git.roojs.org Git - bootswatch/blob - AdminLTE-master/less/header.less

   1 /*
   2     Components: navbar, logo and content header
   3 -------------------------------------------------
   4 */
   5
   6 body > .header {
   7     position: relative;
   8     max-height: 100px;
   9     z-index: 1030;
  10     .navbar {
  11         height: 50px;
  12         margin-bottom: 0;
  13         margin-left: @left-side-width;
  14     }
  15
  16     //Navbar toggle button
  17     .navbar .sidebar-toggle {
  18         float: left;
  19         padding: 9px 5px;
  20         margin-top: 8px;
  21         margin-right: 0;
  22         margin-bottom: 8px;
  23         margin-left: 5px;
  24         background-color: transparent;
  25         background-image: none;
  26         border: 1px solid transparent;
  27         .border-radius(0)!important;
  28     }
  29
  30     .navbar .sidebar-toggle:hover .icon-bar{
  31         background: #f6f6f6;
  32     }
  33     .navbar .sidebar-toggle .icon-bar {
  34         display: block;
  35         width: 22px;
  36         height: 2px;
  37
  38         .border-radius(4px);
  39
  40     }
  41
  42     .navbar .sidebar-toggle .icon-bar + .icon-bar {
  43         margin-top: 4px;
  44     }
  45
  46     //User image in navbar
  47     .navbar .nav > li.user > a {
  48         font-weight: bold;
  49     }
  50     .navbar .nav > li.user > a > .fa,
  51     .navbar .nav > li.user > a > .glyphicon,
  52     .navbar .nav > li.user > a > .ion {
  53         margin-right: 5px;
  54     }
  55
  56     //Labels in navbar
  57     .navbar .nav > li > a > .label {
  58         .border-radius(50%);
  59         position: absolute;
  60         top:7px;
  61         right: 2px;
  62         font-size: 10px;
  63         font-weight: normal;
  64         width: 15px;
  65         height: 15px;
  66         line-height: 1.0em;
  67         text-align: center;
  68         padding: 2px;
  69     }
  70     .navbar .nav > li > a:hover > .label {
  71         top: 3px;
  72     }
  73
  74     //Logo bar - leftside
  75     .logo {
  76         float: left;
  77         height: 50px;
  78         font-size: 20px;
  79         line-height: 50px;
  80         text-align: center;
  81         padding: 0 10px;
  82         width: @left-side-width;
  83         font-family: 'Kaushan Script', cursive;
  84         font-weight: 500;
  85         height: 50px;
  86         display: block;
  87         //For logo imgs or icons
  88         .icon {
  89             margin-right: 10px;
  90         }
  91     }
  92
  93 }
  94
  95 // Content Header
  96 .right-side > .content-header {
  97     position: relative;
  98     padding: 15px 15px 10px 20px;
  99     // Header Text
 100     > h1 {
 101         margin: 0;
 102         font-size: 24px;
 103         > small {
 104             font-size: 15px;
 105             display: inline-block;
 106             padding-left: 4px;
 107             font-weight: 300;
 108         }
 109     }
 110
 111     > .breadcrumb {
 112         float: right;
 113         background: transparent;
 114         margin-top: 0px;
 115         margin-bottom: 0;
 116         font-size: 12px;
 117         padding: 7px 5px;
 118         position: absolute;
 119         top: 15px;
 120         right: 10px;
 121         .border-radius(2px);
 122         > li > a {
 123             color: #444;
 124             text-decoration: none;
 125             > .fa, > .glyphicon, > .ion {
 126                 margin-right: 5px;
 127             }
 128         }
 129         > li + li:before {
 130             content: '>\00a0';
 131         }
 132     }
 133
 134     @media screen and (max-width: @screen-sm) {
 135         > .breadcrumb {
 136             position: relative;
 137             margin-top: 5px;
 138             top: 0;
 139             right: 0;
 140             float: none;
 141             background: #efefef;
 142         }
 143     }
 144 }
 145
 146 //Control navbar scaffolding on x-small screens
 147 @media (max-width: @screen-sm) {
 148     .navbar .navbar-nav > li {
 149         float: left;
 150     }
 151     //Dont't let links get full width
 152     .navbar-nav {
 153         margin: 0;
 154         float: left;
 155     }
 156
 157     .navbar-nav > li > a {
 158         padding-top: 15px;
 159         padding-bottom: 15px;
 160         line-height: 20px;
 161     }
 162     .navbar .navbar-right {
 163         float: right;
 164     }
 165 }
 166
 167 // Collapse header
 168 @media screen and (max-width: @screen-header-collapse) {
 169     body > .header {
 170         position: relative;
 171         .logo, .navbar {
 172             width: 100%;
 173             float: none;
 174             position: relative!important;
 175         }
 176         .navbar {
 177             margin: 0;
 178         }
 179
 180     }
 181
 182     body.fixed {
 183         > .header {
 184             position: fixed;
 185         }
 186         > .wrapper, .sidebar-offcanvas {
 187             margin-top: 100px!important;
 188         }
 189     }
 190
 191 }