AdminLTE/build/less/header.less

245 lines
4.7 KiB
Plaintext
Raw Normal View History

2015-02-01 21:25:09 +00:00
/*
* Component: Main Header
* ----------------------
*/
.main-header {
position: relative;
max-height: 100px;
z-index: 1030;
//Navbar
2015-02-02 22:09:59 +00:00
> .navbar {
2015-03-25 23:00:53 +00:00
.transition(margin-left @transition-speed @transition-fn);
2015-02-01 21:25:09 +00:00
margin-bottom: 0;
margin-left: @sidebar-width;
border: none;
min-height: @navbar-height;
2015-02-02 22:09:59 +00:00
border-radius: 0;
.layout-top-nav & {
2015-07-21 02:36:04 +00:00
margin-left: 0;
}
2015-07-12 13:42:26 +00:00
}
2015-02-07 16:35:34 +00:00
//Navbar search text input
2015-07-21 02:36:04 +00:00
#navbar-search-input.form-control {
2015-02-07 16:35:34 +00:00
background: rgba(255,255,255,.2);
border-color: transparent;
&:focus,
&:active {
2015-07-21 02:36:04 +00:00
border-color: rgba(0,0,0,.1);
background: rgba(255,255,255,.9);
2015-02-07 16:35:34 +00:00
}
&::-moz-placeholder {
color: #ccc;
opacity: 1;
}
&:-ms-input-placeholder {
color: #ccc;
}
&::-webkit-input-placeholder {
color: #ccc;
}
}
2015-02-01 21:25:09 +00:00
//Navbar Right Menu
.navbar-custom-menu,
.navbar-right {
float: right;
@media (max-width: @screen-sm-max) {
a {
color: inherit;
background: transparent;
}
}
2015-02-01 21:25:09 +00:00
}
.navbar-right {
@media (max-width: @screen-header-collapse) {
float: none;
.navbar-collapse & {
margin: 7.5px -15px;
}
> li {
color: inherit;
border: 0;
}
}
}
//Navbar toggle button
.sidebar-toggle {
float: left;
background-color: transparent;
background-image: none;
padding: @navbar-padding-vertical @navbar-padding-horizontal;
//Add the fontawesome bars icon
font-family: fontAwesome;
&:before {
content: "\f0c9";
}
&:hover {
color: #fff;
}
2015-03-25 23:00:53 +00:00
&:focus,
&:active {
background: transparent;
}
2015-02-01 21:25:09 +00:00
}
.sidebar-toggle .icon-bar {
display: none;
}
//Navbar User Menu
.navbar .nav > li.user > a {
> .fa,
> .glyphicon,
> .ion {
margin-right: 5px;
}
}
//Labels in navbar
.navbar .nav > li > a > .label {
position: absolute;
top: 9px;
right: 7px;
text-align: center;
font-size: 9px;
padding: 2px 3px;
line-height: .9;
}
//Logo bar
2015-02-07 16:35:34 +00:00
.logo {
2015-03-25 23:00:53 +00:00
.transition(width @transition-speed @transition-fn);
2015-02-01 21:25:09 +00:00
display: block;
float: left;
2015-03-29 00:39:26 +00:00
height: @navbar-height;
2015-02-01 21:25:09 +00:00
font-size: 20px;
line-height: 50px;
text-align: center;
width: @sidebar-width;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
padding: 0 15px;
2015-02-06 22:08:16 +00:00
font-weight: 300;
2015-04-17 17:50:49 +00:00
overflow: hidden;
2015-03-25 23:00:53 +00:00
//Add support to sidebar mini by allowing the user to create
//2 logo designs. mini and lg
.logo-lg {
//should be visibile when sidebar isn't collapsed
display: block;
}
.logo-mini {
display: none;
2015-07-12 13:42:26 +00:00
}
2015-02-01 21:25:09 +00:00
}
//Navbar Brand. Alternative logo with layout-top-nav
.navbar-brand {
color: #fff;
}
2015-02-01 21:25:09 +00:00
}
// Content Header
.content-header {
position: relative;
padding: 15px 15px 0 15px;
// Header Text
> h1 {
margin: 0;
font-size: 24px;
> small {
font-size: 15px;
display: inline-block;
padding-left: 4px;
font-weight: 300;
}
}
> .breadcrumb {
float: right;
background: transparent;
2015-07-25 19:52:28 +00:00
margin-top: 0;
2015-02-01 21:25:09 +00:00
margin-bottom: 0;
font-size: 12px;
padding: 7px 5px;
position: absolute;
top: 15px;
right: 10px;
.border-radius(2px);
> li > a {
color: #444;
text-decoration: none;
2015-02-21 23:11:57 +00:00
display: inline-block;
2015-02-01 21:25:09 +00:00
> .fa, > .glyphicon, > .ion {
margin-right: 5px;
}
}
> li + li:before {
content: '>\00a0';
}
}
2015-02-02 22:09:59 +00:00
@media (max-width: @screen-sm-max) {
2015-02-01 21:25:09 +00:00
> .breadcrumb {
position: relative;
margin-top: 5px;
top: 0;
right: 0;
float: none;
background: @gray;
padding-left: 10px;
li:before {
color: darken(@gray, 20%);
}
}
}
}
.navbar-toggle {
color: #fff;
border: 0;
margin: 0;
padding: @navbar-padding-vertical @navbar-padding-horizontal;
}
//Control navbar scaffolding on x-small screens
@media (max-width: @screen-sm-max) {
.navbar-custom-menu .navbar-nav > li {
float: left;
}
//Dont't let links get full width
.navbar-custom-menu .navbar-nav {
margin: 0;
float: left;
}
.navbar-custom-menu .navbar-nav > li > a {
padding-top: 15px;
padding-bottom: 15px;
line-height: 20px;
}
}
// Collapse header
@media (max-width: @screen-header-collapse) {
.main-header {
position: relative;
.logo,
.navbar {
width: 100%;
float: none;
}
.navbar {
margin: 0;
}
.navbar-custom-menu {
float: right;
}
}
2015-04-04 02:55:30 +00:00
}
.navbar-collapse.pull-left {
@media(max-width: @screen-sm-max) {
float: none!important;
2015-07-12 13:42:26 +00:00
+ .navbar-custom-menu {
2015-04-04 02:55:30 +00:00
display: block;
position: absolute;
top: 0;
right: 40px;
}
2015-07-12 13:42:26 +00:00
}
}