1012 lines
24 KiB
Plaintext
1012 lines
24 KiB
Plaintext
/* ==============================================
|
|
Navbar
|
|
================================================= */
|
|
.navbar {
|
|
z-index: 1030;
|
|
margin-bottom: 0;
|
|
height: 60px;
|
|
|
|
color: #666;
|
|
background-color: #FFF;
|
|
border-radius: 0;
|
|
border: 0;
|
|
border-bottom: 0;
|
|
box-shadow: 0 1px 0 0 #e0e0e0;
|
|
|
|
/* Navbar shadow option - Only allowed on default white navbar */
|
|
&.navbar-shadow {
|
|
-webkit-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.08), 0px 2px 0px 0px rgba(0, 0, 0, 0.02);
|
|
box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.08), 0px 2px 0px 0px rgba(0, 0, 0, 0.02);
|
|
}
|
|
}
|
|
|
|
/* Navbar Nav Item Containers */
|
|
.navbar .nav {
|
|
margin: 0;
|
|
|
|
/* Nav Items */
|
|
> li { float: left; }
|
|
|
|
/* Nav Links */
|
|
> li > a {
|
|
color: #666;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
padding-top: 20px;
|
|
padding-bottom: 20px;
|
|
height: 59px;
|
|
max-height: 59px;
|
|
}
|
|
|
|
/* Nav Item/Link States */
|
|
> li.open > a,
|
|
> li:hover > a,
|
|
> li:focus > a,
|
|
> li.active > a,
|
|
> li > a:hover,
|
|
> li > a:focus {
|
|
color: #222;
|
|
background-color: darken(#fafafa, 1%);
|
|
}
|
|
|
|
/* Nav Item - Open Dropdown */
|
|
> li.dropdown.open .dropdown-menu {
|
|
padding: 0;
|
|
margin-top: 10px;
|
|
border-radius: 2px;
|
|
border-top: 3px solid transparent;
|
|
|
|
/* Dropdown Links */
|
|
> a {
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Dropdown Top Arrow */
|
|
&:after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 0;
|
|
height: 0;
|
|
border-color: transparent;
|
|
border-style: solid;
|
|
right: 11px;
|
|
bottom: 100%;
|
|
border-width: 0 10px 10px;
|
|
border-bottom-color: #4a89dc;
|
|
}
|
|
}
|
|
|
|
/* Menu Item Divider - Small Circle */
|
|
.menu-divider {
|
|
color: rgba(0, 0, 0, 0.15);
|
|
font-size: 8px;
|
|
padding: 25px 10px;
|
|
}
|
|
|
|
}
|
|
|
|
/* Dropdown Helper - Item Divider */
|
|
.navbar .dropdown-menu .menu-divider {
|
|
color: rgba(0, 0, 0, 0.2);
|
|
font-size: 8px;
|
|
padding: 25px 10px;
|
|
}
|
|
|
|
/* Dropdown Helper - Header Item */
|
|
.navbar .dropdown-menu > li.dropdown-header {
|
|
padding: 8px;
|
|
background: #fafafa;
|
|
border-bottom: 1px solid #e5e5e5;
|
|
|
|
/* Header Item - Title */
|
|
.dropdown-title {
|
|
color: #666;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
padding-left: 5px;
|
|
line-height: 30px;
|
|
}
|
|
/* Header Item - Label */
|
|
.label {
|
|
font-size: 75%;
|
|
padding: .1em .6em .2em;
|
|
float: right;
|
|
height: 20px;
|
|
line-height: 20px;
|
|
margin-top: 5px;
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
|
|
|
|
/*==========================================================
|
|
Navbar Misc Utility Styles
|
|
=========================================================== */
|
|
|
|
/* define height for panels with scrollers */
|
|
.scroller-navbar {
|
|
max-height: 250px;
|
|
}
|
|
|
|
/* Negative margin helper to negate panel scroller padding */
|
|
.scroller-nm {
|
|
margin: -12px;
|
|
}
|
|
|
|
/* Navbar Left Settings */
|
|
.navbar-left > li.dropdown.open:first-child .dropdown-menu:after,
|
|
.navbar-left > li.dropdown:first-child > .open .dropdown-menu:after {
|
|
left: 10px;
|
|
right: auto;
|
|
}
|
|
|
|
|
|
/*==========================================================
|
|
Navbar Dropdown Carets
|
|
=========================================================== */
|
|
|
|
.navbar .caret {
|
|
position: relative;
|
|
top: -1px;
|
|
margin-left: 3px;
|
|
}
|
|
|
|
/* Alt Caret Style */
|
|
.navbar .caret.alt {
|
|
width: 20px;
|
|
height: 20px;
|
|
text-align: center;
|
|
color: inherit;
|
|
margin: 0;
|
|
border: 0;
|
|
}
|
|
.navbar li.dropdown .caret.alt:after {
|
|
opacity: 0.75;
|
|
font-size: 14px;
|
|
display: inline-block;
|
|
content: "\f107";
|
|
font-family: FontAwesome;
|
|
font-style: normal;
|
|
font-weight: normal;
|
|
text-decoration: inherit;
|
|
}
|
|
.navbar li.dropdown.open .caret.alt:after {
|
|
opacity: 1;
|
|
}
|
|
|
|
|
|
/*==========================================================
|
|
Navbar Advanced Dropdown - Button Dropdowns
|
|
=========================================================== */
|
|
|
|
.navbar .navbar-btn {
|
|
padding: 0 5px;
|
|
|
|
/* split button mod */
|
|
&.btn-group > .btn + .dropdown-toggle {
|
|
border-left: 0;
|
|
}
|
|
> .btn > span.ad,
|
|
> .btn > span.fa,
|
|
> .btn > span.glyphicon,
|
|
> .btn > span.glyphicons {
|
|
position: relative;
|
|
top: -1px;
|
|
font-size: 14px;
|
|
vertical-align: middle;
|
|
}
|
|
&.btn-group > .btn {
|
|
color: #888;
|
|
border-color: rgba(0, 0, 0, 0.15);
|
|
background-color: #f2f2f2;
|
|
background-color: rgba(0, 0, 0, 0.045);
|
|
}
|
|
&.btn-group > .btn:hover {
|
|
color: #333;
|
|
border-color: rgba(0, 0, 0, 0.20);
|
|
}
|
|
&.btn-group.open > .btn,
|
|
&.btn-group > .btn.active {
|
|
color: #222;
|
|
}
|
|
|
|
/* btn badges */
|
|
.badge {
|
|
position: absolute;
|
|
top: -7px;
|
|
right: -5px;
|
|
padding: 3px 6px;
|
|
opacity: 0.95;
|
|
}
|
|
|
|
}
|
|
|
|
/* Modify buttons dropdown menus */
|
|
.navbar .nav > li.dropdown > .open .dropdown-menu {
|
|
color: #222;
|
|
padding: 0;
|
|
margin-top: 25px;
|
|
border-radius: 2px;
|
|
border-top: 3px solid transparent;
|
|
&:after {
|
|
content: "";
|
|
position: absolute;
|
|
width: 0;
|
|
height: 0;
|
|
border-color: transparent;
|
|
border-style: solid;
|
|
right: 11px;
|
|
bottom: 100%;
|
|
border-width: 0 10px 10px;
|
|
border-bottom-color: #4a89dc;
|
|
}
|
|
}
|
|
|
|
|
|
/* Modify buttons inside contextuals navbars (bg-primary, etc) */
|
|
.navbar[class*='bg-'] {
|
|
|
|
.navbar-btn {
|
|
&.btn-group > .btn {
|
|
color: #BBB;
|
|
color: rgba(255,255,255, 0.8);
|
|
border-color: transparent;
|
|
background-color: #f2f2f2;
|
|
background-color: rgba(255, 255, 255, 0.2);
|
|
}
|
|
&.btn-group > .btn:hover {
|
|
color: #fff;
|
|
color: rgba(255,255,255, 1);
|
|
}
|
|
&.btn-group.open > .btn,
|
|
&.btn-group > .btn.active {
|
|
color: #FFF;
|
|
color: rgba(255,255,255, 1);
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
/*==========================================================
|
|
Navbar Dropdown Menu Helpers
|
|
=========================================================== */
|
|
|
|
/* Both the Menu Merge & the Disable Arrow Settings
|
|
* do not use the top margin for dropdowns */
|
|
.navbar .nav > li.dropdown.menu-merge,
|
|
.navbar .nav > li.dropdown.disable-arrow {
|
|
|
|
/* For btn dropdowns */
|
|
> .navbar-btn.open .dropdown-menu {
|
|
margin-top: 15px;
|
|
}
|
|
|
|
/* For normal dropdowns */
|
|
&.open .dropdown-menu {
|
|
margin-top: 1px;
|
|
}
|
|
|
|
}
|
|
/* Modify for style when in contextual navbars (bg-primary, etc) */
|
|
.navbar[class*='bg-'] .nav > li.dropdown.menu-merge {
|
|
&.open .dropdown-menu,
|
|
> .navbar-btn.open .dropdown-menu {
|
|
border-top: 0;
|
|
&:after {
|
|
border-bottom-color: #fafafa;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Disable Arrow Setting */
|
|
.navbar .nav > li.dropdown.disable-arrow {
|
|
&.open .dropdown-menu:after,
|
|
> .navbar-btn.open .dropdown-menu:after {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* Modify for style when in contextual navbars (bg-primary, etc) */
|
|
.navbar[class*='bg-'] .nav > li.dropdown.disable-arrow {
|
|
&.open .dropdown-menu,
|
|
> .navbar-btn.open .dropdown-menu {
|
|
border-top: 0;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/*==========================================================
|
|
Navbar Advanced Dropdown - Media Lists
|
|
=========================================================== */
|
|
|
|
.navbar .media-list > li.media {
|
|
margin: 0;
|
|
padding: 10px;
|
|
|
|
/* Media Item - Top Border */
|
|
+ li.media { border-top: 1px solid #EEE; }
|
|
|
|
/* Media Item - Image */
|
|
> a {
|
|
padding: 0;
|
|
padding-right: 10px;
|
|
display: table-cell;
|
|
}
|
|
|
|
/* Media Item - Heading, small */
|
|
.media-heading small {
|
|
color: #AAA;
|
|
}
|
|
}
|
|
|
|
|
|
/*==========================================================
|
|
Navbar Advanced Dropdown - List Group
|
|
=========================================================== */
|
|
|
|
.navbar .nav .list-group > li.list-group-item {
|
|
padding: 0;
|
|
|
|
/* List-Group Link */
|
|
> a { padding: 12px; }
|
|
|
|
/* List-Group Label */
|
|
> a .label {
|
|
font-size: 75%;
|
|
padding: .1em .65em .2em;
|
|
float: right;
|
|
height: 20px;
|
|
line-height: 20px;
|
|
}
|
|
|
|
/* List-Group Icon */
|
|
> a .fa,
|
|
> a .glyphicon,
|
|
> a .glyphicons {
|
|
padding-right: 5px;
|
|
}
|
|
|
|
}
|
|
|
|
/* Dropdown Header - Remove top border */
|
|
.navbar .list-group > li.dropdown-header + li.list-group-item {
|
|
border-top: 0;
|
|
}
|
|
|
|
/* Dropdown Footer */
|
|
.navbar .dropdown-menu > li.dropdown-footer a {
|
|
text-align: center;
|
|
padding: 8px 10px 9px;
|
|
border-top: 1px solid #e5e5e5;
|
|
background-color: #fafafa;
|
|
-webkit-transition: background-color 0.4s ease;
|
|
transition: background-color 0.4s ease;
|
|
}
|
|
.navbar .dropdown-menu > li.dropdown-footer a:hover {
|
|
background-color: #FFFEF0;
|
|
}
|
|
|
|
|
|
/*==========================================================
|
|
Navbar Advanced Dropdown - Panels
|
|
=========================================================== */
|
|
|
|
/* Panel menu - modify spacing and remove top border */
|
|
.navbar .nav > li.dropdown {
|
|
|
|
/* Panel Heading - remove top border */
|
|
.panel-heading {
|
|
border-top: 0;
|
|
}
|
|
|
|
/* Panel menu - modify spacing and remove top border */
|
|
.panel-menu {
|
|
color: #666;
|
|
padding: 9px 12px 10px;
|
|
border-top: 0;
|
|
}
|
|
|
|
}
|
|
|
|
/*==========================================================
|
|
Navbar Branding - Logo/Text
|
|
=========================================================== */
|
|
|
|
.navbar-branding {
|
|
position: relative;
|
|
overflow: hidden;
|
|
float: left;
|
|
width: @sidebar-open-width;
|
|
height: 60px;
|
|
margin-right: 10px;
|
|
background-color: transparent;
|
|
|
|
/* Logo */
|
|
.navbar-brand {
|
|
color: #666;
|
|
height: 60px;
|
|
line-height: 58px;
|
|
padding: 0;
|
|
padding-left: 18px;
|
|
font-size: 17px;
|
|
font-weight: 400;
|
|
letter-spacing: 0.5px;
|
|
}
|
|
.navbar-brand b { font-weight: bold; }
|
|
}
|
|
|
|
|
|
/*==========================================================
|
|
Navbar Toggle Buttons - Collapses Sidebars
|
|
=========================================================== */
|
|
|
|
#toggle_sidemenu_l,
|
|
#toggle_sidemenu_t {
|
|
color: #666;
|
|
float: right;
|
|
cursor: pointer;
|
|
font-size: 16px;
|
|
line-height: 58px;
|
|
max-height: 60px;
|
|
width: @sidebar-minified-width;
|
|
text-align: center;
|
|
-webkit-touch-callout: none;
|
|
-webkit-user-select: none;
|
|
-khtml-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
&:hover {}
|
|
}
|
|
|
|
#toggle_sidemenu_t {
|
|
display: none;
|
|
width: 31px;
|
|
height: 60px;
|
|
line-height: 58px;
|
|
margin-left: 10px;
|
|
background-color: rgba(0,0,0,0.06);
|
|
border-left: 1px solid rgba(0,0,0,0.08);
|
|
-webkit-transition: background-color 0.2s ease;
|
|
transition: background-color 0.2s ease;
|
|
&:hover {
|
|
background-color: rgba(0,0,0,0.09);
|
|
border-left: 1px solid rgba(0,0,0,0.1);
|
|
}
|
|
}
|
|
#toggle_sidemenu_t .fa-caret-up {
|
|
position: relative;
|
|
font-size: 13px;
|
|
border: 1px solid;
|
|
border-top: 3px solid;
|
|
padding: 0px 3px 1px 3px;
|
|
margin-bottom: 2px;
|
|
|
|
-webkit-transform: rotate(0deg);
|
|
transform: rotate(0deg);
|
|
}
|
|
|
|
body.sb-top #toggle_sidemenu_t {
|
|
display: block;
|
|
}
|
|
|
|
/*==========================================================
|
|
Navbar Left/Right Containers
|
|
=========================================================== */
|
|
|
|
/* Navbar Left */
|
|
.navbar-nav.navbar-left {
|
|
float: left;
|
|
position: relative;
|
|
max-height: 60px;
|
|
// menu items
|
|
> li > a {
|
|
padding-right: 12px;
|
|
padding-left: 12px;
|
|
}
|
|
}
|
|
|
|
/* Navbar Right */
|
|
.navbar-nav.navbar-right,
|
|
.navbar-nav.navbar-right:last-child {
|
|
float: right;
|
|
margin: 0 15px 0 0;
|
|
}
|
|
|
|
|
|
/*==========================================================
|
|
Navbar Forms - Specifically Search Form
|
|
=========================================================== */
|
|
|
|
.navbar-form {
|
|
margin-top: 17px;
|
|
margin-bottom: 17px;
|
|
|
|
// search bar
|
|
&.navbar-search input {
|
|
height: 26px;
|
|
padding: 0 12px;
|
|
-webkit-transition: all 0.2s ease;
|
|
-o-transition: all 0.2s ease;
|
|
transition: all 0.2s ease;
|
|
box-shadow: none;
|
|
border-radius: 20px;
|
|
border-color: #EEE;
|
|
&:focus {
|
|
background-color: #f8f8f8;
|
|
border-color: #f0f0f0;
|
|
}
|
|
}
|
|
|
|
// search bar - square style
|
|
&.navbar-search.square input {
|
|
height: 30px;
|
|
border-radius: 3px;
|
|
margin-top: -2px;
|
|
margin-bottom: -2px;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
/*==========================================================
|
|
Navbar UserMenu Dropdown (last dropdown item)
|
|
=========================================================== */
|
|
|
|
.navbar .dropdown.open .btn-group.open .multiselect-container.dropdown-menu {
|
|
margin-top: 0;
|
|
border-top: 1px solid rgba(0, 0, 0, 0.10) !important;
|
|
border-color: rgba(0, 0, 0, 0.10);
|
|
}
|
|
.navbar .dropdown.open .btn-group.open .multiselect-container.dropdown-menu:after {
|
|
display: none;
|
|
}
|
|
|
|
#user-role + .btn-group > button.multiselect {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
#user-status + .btn-group .multiselect-container.dropdown-menu {
|
|
right: auto !important;
|
|
left: 0 !important;
|
|
}
|
|
#user-status + .btn-group .multiselect-container.dropdown-menu,
|
|
#user-role + .btn-group .multiselect-container.dropdown-menu {
|
|
top: 0 !important;
|
|
position: relative !important;
|
|
margin-top: 9px;
|
|
margin-bottom: 3px;
|
|
width: 212px;
|
|
}
|
|
#user-status + .btn-group .multiselect-container.dropdown-menu > li:first-child,
|
|
#user-role + .btn-group .multiselect-container.dropdown-menu > li:first-child,
|
|
#user-status + .btn-group .multiselect-container.dropdown-menu > li:first-child label,
|
|
#user-role + .btn-group .multiselect-container.dropdown-menu > li:first-child label {
|
|
cursor: pointer;
|
|
position: relative;
|
|
}
|
|
#user-status + .btn-group .multiselect-container.dropdown-menu > li:first-child:after,
|
|
#user-role + .btn-group .multiselect-container.dropdown-menu > li:first-child:after {
|
|
content: "\f00d";
|
|
font-family: "FontAwesome";
|
|
position: absolute;
|
|
width: 15px;
|
|
height: 15px;
|
|
top: 6px;
|
|
right: 8px;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
color: #AAA;
|
|
-webkit-transition: color 0.15s ease;
|
|
transition: color 0.15s ease;
|
|
}
|
|
#user-status + .btn-group .multiselect-container.dropdown-menu > li:first-child:hover:after,
|
|
#user-role + .btn-group .multiselect-container.dropdown-menu > li:first-child:hover:after {
|
|
color: @brand-primary;
|
|
}
|
|
|
|
|
|
/*==========================================================
|
|
Navbar Dropdown Menu Color Settings
|
|
=========================================================== */
|
|
|
|
.navbar {
|
|
|
|
// Top Border color on dropdown menus
|
|
.nav > li.dropdown.open .dropdown-menu,
|
|
.nav > li.dropdown .open .dropdown-menu {
|
|
border-top-color: @navbar-dropdown-active-border;
|
|
}
|
|
// Top Arrow color on dropdown menus
|
|
.nav > li.dropdown.open .dropdown-menu:after,
|
|
.nav > li.dropdown .open .dropdown-menu:after {
|
|
border-bottom-color: @navbar-dropdown-active-border;
|
|
}
|
|
|
|
// Navbar usermenu(last dropdown) multiselect - Active item bg
|
|
.nav > li .dropdown-toggle + .dropdown-menu > .active > a {
|
|
&,
|
|
&:hover,
|
|
&:focus {
|
|
color: @navbar-component-active-text;
|
|
background-color: @navbar-component-active-bg;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
|
|
/*==========================================================
|
|
Navbar Contextual/Skin Settings
|
|
- Skins applied by adding a bg class to ".navbar"
|
|
- For example: <div class="navbar bg-primary">
|
|
=========================================================== */
|
|
|
|
.navbar.bg-primary when (@skin-primary) {
|
|
.navbar-variant(@brand-primary);
|
|
}
|
|
.navbar.bg-success when (@skin-success) {
|
|
.navbar-variant(@brand-success);
|
|
}
|
|
.navbar.bg-info when (@skin-info) {
|
|
.navbar-variant(@brand-info);
|
|
}
|
|
.navbar.bg-warning when (@skin-warning) {
|
|
.navbar-variant(@brand-warning);
|
|
}
|
|
.navbar.bg-danger when (@skin-danger) {
|
|
.navbar-variant(@brand-danger);
|
|
}
|
|
.navbar.bg-alert when (@skin-alert) {
|
|
.navbar-variant(@brand-alert);
|
|
}
|
|
.navbar.bg-system when (@skin-system) {
|
|
.navbar-variant(@brand-system);
|
|
}
|
|
.navbar.bg-dark when (@skin-dark) {
|
|
.navbar-variant(@brand-dark);
|
|
}
|
|
|
|
/* If Navbar has a contextual class we need to modify
|
|
* several elements so there are not color conflictions
|
|
*/
|
|
.navbar[class*='bg-'] {
|
|
border-bottom-color: transparent;
|
|
box-shadow: none;
|
|
|
|
// Change several text elements to white
|
|
.navbar-brand { color: #fff; }
|
|
.nav > li > a {
|
|
color: #fff;
|
|
color: rgba(255,255,255,0.9);
|
|
}
|
|
.nav > li.open > a {
|
|
color: #fff;
|
|
color: rgba(255,255,255,1);
|
|
}
|
|
|
|
// Dropdown Caret
|
|
.caret.caret-tp { border-top-color: rgba(255, 255, 255, 0.3); }
|
|
|
|
// Sidemenu toggle icon
|
|
#toggle_sidemenu_l,
|
|
#toggle_sidemenu_l:hover,
|
|
#toggle_sidemenu_l:focus {
|
|
color: #FFF;
|
|
}
|
|
|
|
#toggle_sidemenu_t {
|
|
color: rgba(255,255,255, 0.5);
|
|
-webkit-transition: color 0.2s ease;
|
|
transition: color 0.2s ease;
|
|
}
|
|
|
|
#toggle_sidemenu_t:hover,
|
|
#toggle_sidemenu_t:focus {
|
|
color: rgba(255,255,255, 1);
|
|
}
|
|
|
|
// search bar
|
|
.navbar-search input,
|
|
.navbar-search input:focus {
|
|
border-color: transparent;
|
|
}
|
|
|
|
// search bar - alt style
|
|
.navbar-search.alt input {
|
|
color: #BBB;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
background-color: #BBB;
|
|
background-color: rgba(255,255,255, 0.2);
|
|
border-color: transparent;
|
|
&:focus {
|
|
border-color: transparent;
|
|
}
|
|
}
|
|
|
|
/* Disable navbar shadow option for navbar bgs */
|
|
&.navbar-shadow {
|
|
border-bottom: 1px solid transparent;
|
|
box-shadow: none;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
/*==========================================================
|
|
Navbar Bug Fixes - Added via Update v1.2.
|
|
=========================================================== */
|
|
|
|
/* Modify whitespace for user menu dropdown - Firefox alignment bug fix */
|
|
.navbar .navbar-right > li:last-child > .dropdown-menu > li > a {
|
|
white-space: inherit;
|
|
}
|
|
|
|
|
|
/*==========================================================
|
|
Navbar Responsive Settings - Added via Update v1.2.
|
|
=========================================================== */
|
|
@media (max-width: 900px) {
|
|
|
|
// user menu dropdown modifications (hide name only display avatar)
|
|
.navbar .navbar-right:last-child { margin-right: 5px; }
|
|
.navbar .navbar-right > li:last-child > a > img { margin-right: 5px !important; }
|
|
.navbar .navbar-right > li:last-child > a > span { display: none; }
|
|
.navbar .navbar-right > li:last-child > a > span.caret { display: inline-block; }
|
|
|
|
// navbar Search Mobile Mode
|
|
.navbar-form.navbar-search {
|
|
padding: 18px 8px;
|
|
font-size: 16px;
|
|
margin: 0;
|
|
cursor: pointer;
|
|
width: auto;
|
|
float: left;
|
|
}
|
|
|
|
.navbar-form.navbar-search .form-group { margin: 0 !important;}
|
|
|
|
// convert search bar to single icon
|
|
.navbar-form.navbar-search:after {
|
|
content: "\f002";
|
|
font: normal normal normal 14px/1 FontAwesome;
|
|
font-size: inherit;
|
|
position: relative;
|
|
line-height: 1;
|
|
display: inline-block;
|
|
text-decoration: none;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
text-rendering: auto;
|
|
transform: translate(0,0);
|
|
}
|
|
|
|
// transform searchbar input to menu slider
|
|
.navbar-form.navbar-search input {
|
|
opacity: 0;
|
|
z-index: -1;
|
|
visibility: hidden;
|
|
position: absolute;
|
|
top: -60px;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 60px;
|
|
margin: 0;
|
|
font-size: 24px;
|
|
color: #AAA;
|
|
border-radius: 0;
|
|
border: 0;
|
|
text-align: center;
|
|
-webkit-transition: all 0.3s ease;
|
|
transition: all 0.3s ease;
|
|
}
|
|
.navbar-form.navbar-search input:focus,
|
|
.navbar.bg-light .navbar-form.navbar-search input:focus {
|
|
background-color: #FFF;
|
|
}
|
|
// slide menu down when set to open(search icon clicked)
|
|
.navbar-form.navbar-search.search-open input {
|
|
z-index: 1040;
|
|
opacity: 1 !important;
|
|
visibility: visible;
|
|
top: 0;
|
|
color: #666 !important;
|
|
border-bottom: 0;
|
|
background-color: #FFF !important;
|
|
-webkit-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.08), 0px 2px 0px 0px rgba(0, 0, 0, 0.02) !important;
|
|
box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.08), 0px 2px 0px 0px rgba(0, 0, 0, 0.02) !important;
|
|
}
|
|
.navbar-form.navbar-search.search-open input:focus {
|
|
border-bottom-color: #DDD;
|
|
}
|
|
|
|
// close search bar icon
|
|
.navbar-form.navbar-search .search-remove {
|
|
display: none;
|
|
z-index: 1040;
|
|
position: absolute;
|
|
color: #AAA;
|
|
top: 0;
|
|
right: 0;
|
|
height: 60px;
|
|
line-height: 59px;
|
|
padding-left: 15px;
|
|
padding-right: 25px;
|
|
}
|
|
.navbar-form.navbar-search .search-remove:after {
|
|
position: relative;
|
|
content: "\e014";
|
|
font-family: 'Glyphicons Halflings';
|
|
text-align: center;
|
|
font-size: 20px;
|
|
}
|
|
.navbar-form.navbar-search.search-open .search-remove:hover {
|
|
color: lighten(@brand-danger, 10%);
|
|
}
|
|
|
|
}
|
|
|
|
/* Force Navbar Dropdowns to float and
|
|
* to occupy 100% width at low resolutions
|
|
*/
|
|
@media (max-width: 599px) {
|
|
|
|
// set parent to static
|
|
.sb-l-m .navbar > .navbar-right,
|
|
.navbar .navbar-nav > li.dropdown,
|
|
.navbar .navbar-nav > li.dropdown .navbar-btn {
|
|
position: static !important;
|
|
}
|
|
.navbar .navbar-right:last-child {
|
|
margin-right: 0;
|
|
}
|
|
|
|
// hide open dropdown top arrows
|
|
.navbar .nav > li.dropdown.open .dropdown-menu:after,
|
|
.navbar .nav > li.dropdown > .open .dropdown-menu:after {
|
|
display: none;
|
|
}
|
|
|
|
// recreate dropdown menus
|
|
.navbar-left .dropdown-menu,
|
|
.navbar-right .dropdown-menu,
|
|
.navbar-left .open .dropdown-menu,
|
|
.navbar-right .open .dropdown-menu {
|
|
z-index: 1000;
|
|
margin-top: 0 !important;
|
|
float: left;
|
|
position: absolute;
|
|
top: 100%;
|
|
left: -1px;
|
|
min-width: 101%;
|
|
list-style: none;
|
|
|
|
background-color: #FFF;
|
|
border: 1px solid rgba(0, 0, 0, 0.15);
|
|
background-clip: padding-box;
|
|
-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
|
|
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
|
|
}
|
|
|
|
// revert usermenu dropdowns to absolute position
|
|
#user-status + .btn-group .multiselect-container.dropdown-menu,
|
|
#user-role + .btn-group .multiselect-container.dropdown-menu {
|
|
top: 34px !important;
|
|
position: absolute !important;
|
|
right: 0;
|
|
left: auto;
|
|
}
|
|
|
|
}
|
|
|
|
|
|
/*==========================================================
|
|
Widget Modifications for Navbar Dropdown Use
|
|
=========================================================== */
|
|
|
|
/* Timeline Widget */
|
|
.navbar .nav > li.dropdown .timeline-list {
|
|
|
|
li.timeline-item {
|
|
padding: 18px 70px 18px 45px;
|
|
}
|
|
li.timeline-item .timeline-icon {
|
|
left: 9px;
|
|
top: 12px;
|
|
}
|
|
li.timeline-item:after {
|
|
left: 21px;
|
|
top: 0;
|
|
}
|
|
li.timeline-item .timeline-desc {
|
|
letter-spacing: 0;
|
|
}
|
|
li.timeline-item .timeline-date {
|
|
font-size: 11px;
|
|
right: 8px;
|
|
top: 17px;
|
|
}
|
|
|
|
}
|
|
|
|
/* Chat Widget */
|
|
.navbar .nav > li.dropdown .chat-widget {
|
|
|
|
// Author Avatar
|
|
.media-left { padding-right: 10px; }
|
|
.media-right { padding-left: 10px; }
|
|
.media-left img,
|
|
.media-right img {
|
|
max-width: 35px;
|
|
border-radius: 2px;
|
|
border: 0;
|
|
}
|
|
|
|
// Chat content
|
|
.media-body {
|
|
padding: 5px;
|
|
background-color: #fafafa;
|
|
}
|
|
|
|
// Author Status
|
|
.media-status:after { font-size: 9px }
|
|
|
|
}
|
|
|
|
/* Alerts Widget */
|
|
.navbar .nav > li.dropdown .alerts-widget {
|
|
|
|
.media { position: relative; }
|
|
|
|
// Alert Left Col
|
|
.media-left {
|
|
vertical-align: middle;
|
|
padding-right: 11px;
|
|
border-right: 1px dashed #DDD;
|
|
}
|
|
|
|
// Alert Icon
|
|
a.media-left {
|
|
color: #AAA;
|
|
font-size: 18px;
|
|
}
|
|
|
|
// Alert Message
|
|
.media-body {
|
|
font-size: 12px;
|
|
font-weight: 400;
|
|
padding-left: 13px;
|
|
}
|
|
|
|
// Alert Message Heading
|
|
.media-heading { margin-bottom: 3px; }
|
|
|
|
// Alert Response Tray
|
|
.media-right {
|
|
position: absolute;
|
|
right: 0;
|
|
top: -3px;
|
|
text-align: right;
|
|
}
|
|
.media-right .btn.btn-xs {
|
|
font-size: 11px;
|
|
padding: 0px 5px;
|
|
}
|
|
.media-right .media-response {
|
|
font-size: 10px;
|
|
font-weight: 400;
|
|
margin-bottom: 2px;
|
|
&.single {
|
|
font-size: 11px;
|
|
padding-top: 10px;
|
|
}
|
|
}
|
|
|
|
}
|
|
|