250 lines
6.3 KiB
Plaintext
250 lines
6.3 KiB
Plaintext
/*==================================================
|
|
Icons
|
|
==================================================== */
|
|
.wf-loading .glyphicons,
|
|
.wf-loading .glyphicon,
|
|
.wf-loading .imoon,
|
|
.wf-loading .fa,
|
|
.wf-loading .iconsweets {
|
|
opacity: 0 !important;
|
|
}
|
|
|
|
/* Font Awesome Fixed Width Helpers */
|
|
.fs15.fa-fw { width: 35px; }
|
|
.fs16.fa-fw { width: 40px; }
|
|
.fs17.fa-fw { width: 43px; }
|
|
.fs18.fa-fw { width: 46px; }
|
|
|
|
/* Icon Transitions */
|
|
.glyphicon, .glyphicons,
|
|
.imoon, .fa, .iconsweets {
|
|
opacity: 1;
|
|
transition: opacity 0.1s ease-in;
|
|
-moz-transition: opacity 0.1s ease-in;
|
|
-webkit-transition: opacity 0.1s ease-in;
|
|
}
|
|
/* Glyphicon Pro and Halfling */
|
|
.glyphicons-2x, .glyphicon-2x { font-size: 2em }
|
|
.glyphicons-3x, .glyphicon-3x { font-size: 3em }
|
|
.glyphicons-4x, .glyphicon-4x { font-size: 4em }
|
|
.glyphicons-5x, .glyphicon-5x { font-size: 5em }
|
|
/* Icomoon Font Icons */
|
|
.imoon-2x { font-size: 2em }
|
|
.imoon-3x { font-size: 3em }
|
|
.imoon-4x { font-size: 4em }
|
|
.imoon-5x { font-size: 5em }
|
|
/* IconSweets2 Font Icons */
|
|
.iconsweets-2x { font-size: 2em }
|
|
.iconsweets-3x { font-size: 3em }
|
|
.iconsweets-4x { font-size: 4em }
|
|
.iconsweets-5x { font-size: 5em }
|
|
|
|
/* Buttons with Icons
|
|
* Cross browser problems were creating problems when
|
|
* an icon was given a larger font size than its sibling
|
|
* text. To fix Line height, vertical align, and top
|
|
* positioning have been redefined */
|
|
.btn .glyphicon, .btn .glyphicons {
|
|
top: -1px;
|
|
vertical-align: middle;
|
|
line-height: 0;
|
|
font-size: 1.1em;
|
|
}
|
|
/* A Helper Class to Align Icons Right in Control-forms */
|
|
span.field-icon-right,
|
|
i.field-icon-right {
|
|
position: absolute;
|
|
right: 10px;
|
|
top: 8px;
|
|
}
|
|
|
|
/* Icon Background and Borders
|
|
* properly align icons that have been placed inside of titles
|
|
* Useful for matching icon size to adjacent text
|
|
* Icon Background Shapes */
|
|
.icon-circle {
|
|
top: 0;
|
|
padding: 9px;
|
|
position: relative;
|
|
overflow: visible;
|
|
border-radius: 64px; }
|
|
|
|
.icon-square {
|
|
top: 0;
|
|
padding: 9px;
|
|
border-radius: 4px; }
|
|
|
|
/* Icon Background Sizes */
|
|
.icon-circle.glyphicon-2x,
|
|
.icon-circle.glyphicons-2x {
|
|
padding: 12px; }
|
|
|
|
.icon-circle.glyphicon-3x,
|
|
.icon-circle.glyphicons-3x {
|
|
padding: 20px; }
|
|
|
|
.icon-circle.glyphicon-4x,
|
|
.icon-circle.glyphicons-4x {
|
|
padding: 35px; }
|
|
|
|
.icon-square.glyphicon-2x,
|
|
.icon-square.glyphicons-2x {
|
|
padding: 12px; }
|
|
|
|
.icon-square.glyphicon-3x,
|
|
.icon-square.glyphicons-3x {
|
|
padding: 20px; }
|
|
|
|
.icon-square.glyphicon-4x,
|
|
.icon-square.glyphicons-4x {
|
|
padding: 35px; }
|
|
|
|
|
|
/* WIDGET SPECIFIC ICON STYLING
|
|
* ALL elements which use icons have been
|
|
* moved from their respective positions
|
|
* and placed here for easy icon styling */
|
|
|
|
/* Header Button Icons */
|
|
.navbar-menus > div > button > span,
|
|
.navbar-menus > div > button > i {
|
|
font-size: 15px;
|
|
vertical-align: middle;
|
|
}
|
|
/* Special on-hover styles for user dropdown menu */
|
|
.user-menu ul.dropdown-items > li:hover .glyphicon { color: #d9534f; }
|
|
.user-menu ul.dropdown-items > li:last-child:hover .glyphicon { color: #888; }
|
|
.user-menu ul.dropdown-items > li:last-child > div:hover .glyphicon { color: #d9534f; }
|
|
|
|
/* Breadcrumb "Home" Icon */
|
|
.breadcrumb .glyphicon,
|
|
.breadcrumb .glyphicons {
|
|
color: #777;
|
|
font-size: 11px;
|
|
margin-left: 1px;
|
|
top: 0;
|
|
}
|
|
/* Panel Sidemenu Icons */
|
|
.panel-sidemenu ul.nav li.active .fa { color: @brand-primary; }
|
|
.panel-sidemenu ul.nav li a:hover { background: none }
|
|
.panel-sidemenu ul.nav li .fa {
|
|
width: 28px;
|
|
color: #BBB;
|
|
font-size: 18px;
|
|
}
|
|
|
|
/* Panel Tabs Icons */
|
|
.panel-tabs li .glyphicon,
|
|
.panel-tabs li .glyphicons,
|
|
.panel-tabs li .fa {
|
|
font-size: 14px
|
|
}
|
|
.panel-tabs .imoon,
|
|
.panel-tabs .iconsweets {
|
|
font-size: 14px;
|
|
vertical-align: middle;
|
|
}
|
|
/* Mildly styles a font awesome based icon group
|
|
* used in occasionaly in panel heading. Look at
|
|
* message widget on index.html for example */
|
|
.mini-action-icons .fa {
|
|
position: relative;
|
|
top: 2px;
|
|
padding-right: 10px;
|
|
color: #777;
|
|
font-size: 16px;
|
|
cursor: pointer;
|
|
}
|
|
/* Pricing Table Icons */
|
|
.pricing-tables .pricing-icons li .fa-times { color: #e74a4a }
|
|
.pricing-tables .pricing-icons li .fa-ellipsis-h { color: #555 }
|
|
/* Tab Navigation Icons */
|
|
.nav-tabs li .fa { font-size: 14px }
|
|
.nav-tabs li .fa.fa-caret-down { font-size: 12px }
|
|
|
|
/* Timeline Widget Icons */
|
|
.timeline-widget span.glyphicons {
|
|
z-index: 11;
|
|
position: relative;
|
|
top: 2px;
|
|
width: auto;
|
|
padding: 6px;
|
|
font-size: 18px;
|
|
border-radius: 50%;
|
|
-webkit-box-shadow: 1px 1px 2px #AAA;
|
|
box-shadow: 1px 1px 2px #AAA;
|
|
}
|
|
|
|
//
|
|
// Sprites
|
|
// --------------------------------------------------
|
|
|
|
/* Favicon sprite */
|
|
.favicons {
|
|
background: url('@{img-path}/sprites/favicons.png') no-repeat;
|
|
width: 16px;
|
|
height: 16px;
|
|
vertical-align: middle;
|
|
display: inline-block;
|
|
}
|
|
.google { background-position: 0 0;}
|
|
.yahoo { background-position: 0 -15px ;}
|
|
.bing { background-position: 0 -30px ;}
|
|
.chrome { background-position: 0 -45px;}
|
|
.firefox { background-position: 0 -61px ;}
|
|
.ie { background-position: 0 -78px ;}
|
|
.safari { background-position: 0 -96px ;}
|
|
|
|
/* News Sprite - Demo purposes */
|
|
.news-sprite {
|
|
width: 25px;
|
|
height: 26px;
|
|
vertical-align: middle;
|
|
display: inline-block;
|
|
background: url("@{img-path}/sprites/news-logo_sprite.png") no-repeat;
|
|
background-position: 0 0;
|
|
}
|
|
.news-sprite.cnn {
|
|
background-position: 0 0;
|
|
}
|
|
.news-sprite.yahoo {
|
|
background-position: 0 -26px;
|
|
}
|
|
.news-sprite.google {
|
|
background-position: 0 -50px;
|
|
}
|
|
.news-sprite.fb {
|
|
background-position: 0 -75px;
|
|
}
|
|
|
|
/* Flag Icons */
|
|
.flag-xs,
|
|
.flag-sm,
|
|
.flag,
|
|
.flag-lg {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
.flag-xs {
|
|
width: 16px;
|
|
height: 16px;
|
|
background: url('@{img-path}/sprites/flag-xs.png') no-repeat top left;
|
|
}
|
|
.flag-sm {
|
|
width: 32px;
|
|
height: 32px;
|
|
background: url('@{img-path}/sprites/flag-sm.png') no-repeat top left;
|
|
}
|
|
.flag-sm.flag-fr { background-position: 0 0; }
|
|
.flag-sm.flag-de { background-position: 0 -33px; }
|
|
.flag-sm.flag-in { background-position: 0 -66px; }
|
|
.flag-sm.flag-es { background-position: 0 -99px; }
|
|
.flag-sm.flag-tr { background-position: 0 -132px; }
|
|
.flag-sm.flag-us { background-position: 0 -165px; }
|
|
.flag-xs.flag-fr{ background-position: 0 -1px; }
|
|
.flag-xs.flag-de{ background-position: 0 -18px; }
|
|
.flag-xs.flag-es{ background-position: 0 -35px; }
|
|
.flag-xs.flag-tr{ background-position: 0 -52px; }
|
|
.flag-xs.flag-us{ background-position: 0 -69px; }
|
|
.flag-xs.flag-in{ background-position: 0 -86px; }
|