/* ------------------------------------------------------------------------------
*
* # Demo styles
*
* Styles used for demostration purposes only
*
* Version: 1.0
* Latest update: May 25, 2015
*
* ---------------------------------------------------------------------------- */
// Color palette
// ------------------------------
.demo-color {
height: 150px;
position: relative;
margin: 3px;
margin-bottom: 0;
> span {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
padding: 6px;
background-color: fade(#000, 20%);
font-size: @font-size-small;
color: #fff;
}
}
// Page loader overlay
// ------------------------------
.overlay-demo {
display: inline-block;
background-color: #333;
border-radius: @border-radius-base;
}
.overlay-demo-light {
background-color: @body-bg;
}
// Icons showcase
// ------------------------------
.glyphs > div {
padding: @padding-base-vertical @padding-base-horizontal;
cursor: pointer;
// Icon
> i {
margin-right: 10px;
width: 1em;
text-align: center;
}
// Hover state
&:hover {
background-color: @color-teal-500;
color: #fff;
border-radius: @border-radius-small;
span {
color: #fff;
}
}
}
// Grid demo
// ------------------------------
.grid-demo [class*="col-"] > div:not(.row) {
margin-bottom: @line-height-computed;
padding: 10px;
text-align: center;
background-color: #F7F7FC;
border: 1px solid #ddd;
color: @text-color;
}
// Velocity animations box
// ------------------------------
.demo-velocity-box {
padding: 12px 15px;
margin-bottom: @line-height-computed;
position: relative;
border: 1px solid #ccc;
text-align: center;
background-color: #fcfcfc;
border-radius: @border-radius-base;
.box-shadow(0 0 0 0 @brand-primary);
> span {
float: left;
}
span {
vertical-align: middle;
}
// List with icons
.icons-list {
float: right;
margin-top: 2px;
a {
.opacity(0.8);
&:hover {
.opacity(1);
}
}
}
}
// BlockUI growl notification
// ------------------------------
// Base
.blockui-growl {
display: none;
text-align: left;
padding: 15px;
background-color: @color-slate-700;
color: #fff;
border-radius: @border-radius-base;
h6 {
margin-top: 2px;
margin-bottom: 8px;
}
}
// Message
.blockui-message {
display: none;
background-color: @color-slate-700;
color: #fff;
border-radius: @border-radius-base;
padding: 15px 15px 10px 15px;
> i {
display: block;
margin-bottom: 10px;
}
}
// Containers
.multiple-messages-container,
.blockui-animation-container {
display: none;
}
.blockui-animation-container {
background-color: #555;
padding: 10px;
line-height: 1;
border-radius: @border-radius-base;
}
// Tag inputs results
// ------------------------------
.val-demo {
display: block;
margin-top: @line-height-computed;
> span {
font-weight: 500;
}
}