snipe-it/resources/assets/less/header.less
2016-05-24 18:50:54 -07:00

269 lines
5 KiB
Plaintext
Executable file

/*
* Component: Main Header
* ----------------------
*/
.main-header {
position: relative;
max-height: 100px;
z-index: 1030;
//Navbar
> .navbar {
.transition(margin-left @transition-speed @transition-fn);
margin-bottom: 0;
margin-left: @sidebar-width;
border: none;
min-height: @navbar-height;
border-radius: 0;
.layout-top-nav & {
margin-left: 0;
}
}
//Navbar search text input
#navbar-search-input.form-control {
background: rgba(255,255,255,.2);
border-color: transparent;
&:focus,
&:active {
border-color: rgba(0,0,0,.1);
background: rgba(255,255,255,.9);
}
&::-moz-placeholder {
color: #ccc;
opacity: 1;
}
&:-ms-input-placeholder {
color: #ccc;
}
&::-webkit-input-placeholder {
color: #ccc;
}
}
//Navbar Right Menu
.navbar-custom-menu,
.navbar-right {
float: right;
@media (max-width: @screen-sm-max) {
a {
color: inherit;
background: transparent;
}
}
}
.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;
}
&:focus,
&:active {
background: transparent;
}
}
.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
.logo {
.transition(width @transition-speed @transition-fn);
display: block;
float: left;
height: @navbar-height;
font-size: 20px;
line-height: 50px;
text-align: center;
width: @sidebar-width;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
padding: 0 15px;
font-weight: 300;
overflow: hidden;
//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;
}
}
//Navbar Brand. Alternative logo with layout-top-nav
.navbar-brand {
color: #fff;
}
}
// 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;
margin-top: 0;
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;
display: inline-block;
> .fa, > .glyphicon, > .ion {
margin-right: 5px;
}
}
> li + li:before {
content: '>\00a0';
}
}
@media (max-width: @screen-sm-max) {
> .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;
}
}
}
.navbar-collapse.pull-left {
@media(max-width: @screen-sm-max) {
float: none!important;
+ .navbar-custom-menu {
display: block;
position: absolute;
top: 0;
right: 40px;
}
}
}
// Collapse header
@media (max-width: @screen-sm-max) {
.content-header {
padding-top: 110px;
}
}
// Collapse header
@media (max-width: @screen-sm-max) {
ul.sidebar-menu {
padding-top: 120px;
}
}
// Collapse header
@media (max-width: @screen-sm-max) {
.sidebar-toggle-mobile a {
color: white;
}
}