src/ceph/src/pybind/mgr/dashboard/static/AdminLTE-2.3.7/build/less/header.less

   1 /*
   2  * Component: Main Header
   3  * ----------------------
   4  */
   5
   6 .main-header {
   7   position: relative;
   8   max-height: 100px;
   9   z-index: 1030;
  10   //Navbar
  11   .navbar {
  12     .transition(margin-left @transition-speed @transition-fn);
  13     margin-bottom: 0;
  14     margin-left: @sidebar-width;
  15     border: none;
  16     min-height: @navbar-height;
  17     border-radius: 0;
  18     .layout-top-nav & {
  19       margin-left: 0;
  20     }
  21   }
  22   //Navbar search text input
  23   #navbar-search-input.form-control {
  24     background: rgba(255, 255, 255, .2);
  25     border-color: transparent;
  26     &:focus,
  27     &:active {
  28       border-color: rgba(0, 0, 0, .1);
  29       background: rgba(255, 255, 255, .9);
  30     }
  31     &::-moz-placeholder {
  32       color: #ccc;
  33       opacity: 1;
  34     }
  35     &:-ms-input-placeholder {
  36       color: #ccc;
  37     }
  38     &::-webkit-input-placeholder {
  39       color: #ccc;
  40     }
  41   }
  42   //Navbar Right Menu
  43   .navbar-custom-menu,
  44   .navbar-right {
  45     float: right;
  46     @media (max-width: @screen-sm-max) {
  47       a {
  48         color: inherit;
  49         background: transparent;
  50       }
  51     }
  52   }
  53   .navbar-right {
  54     @media (max-width: @screen-header-collapse) {
  55       float: none;
  56       .navbar-collapse & {
  57         margin: 7.5px -15px;
  58       }
  59
  60       > li {
  61         color: inherit;
  62         border: 0;
  63       }
  64     }
  65   }
  66   //Navbar toggle button
  67   .sidebar-toggle {
  68     float: left;
  69     background-color: transparent;
  70     background-image: none;
  71     padding: @navbar-padding-vertical @navbar-padding-horizontal;
  72     //Add the fontawesome bars icon
  73     font-family: fontAwesome;
  74     &:before {
  75       content: "\f0c9";
  76     }
  77     &:hover {
  78       color: #fff;
  79     }
  80     &:focus,
  81     &:active {
  82       background: transparent;
  83     }
  84   }
  85   .sidebar-toggle .icon-bar {
  86     display: none;
  87   }
  88   //Navbar User Menu
  89   .navbar .nav > li.user > a {
  90     > .fa,
  91     > .glyphicon,
  92     > .ion {
  93       margin-right: 5px;
  94     }
  95   }
  96
  97   //Labels in navbar
  98   .navbar .nav > li > a > .label {
  99     position: absolute;
 100     top: 9px;
 101     right: 7px;
 102     text-align: center;
 103     font-size: 9px;
 104     padding: 2px 3px;
 105     line-height: .9;
 106   }
 107
 108   //Logo bar
 109   .logo {
 110     .transition(width @transition-speed @transition-fn);
 111     display: block;
 112     float: left;
 113     height: @navbar-height;
 114     font-size: 20px;
 115     line-height: 50px;
 116     text-align: center;
 117     width: @sidebar-width;
 118     font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 119     padding: 0 15px;
 120     font-weight: 300;
 121     overflow: hidden;
 122     //Add support to sidebar mini by allowing the user to create
 123     //2 logo designs. mini and lg
 124     .logo-lg {
 125       //should be visibile when sidebar isn't collapsed
 126       display: block;
 127     }
 128     .logo-mini {
 129       display: none;
 130     }
 131   }
 132   //Navbar Brand. Alternative logo with layout-top-nav
 133   .navbar-brand {
 134     color: #fff;
 135   }
 136 }
 137
 138 // Content Header
 139 .content-header {
 140   position: relative;
 141   padding: 15px 15px 0 15px;
 142   // Header Text
 143   > h1 {
 144     margin: 0;
 145     font-size: 24px;
 146     > small {
 147       font-size: 15px;
 148       display: inline-block;
 149       padding-left: 4px;
 150       font-weight: 300;
 151     }
 152   }
 153
 154   > .breadcrumb {
 155     float: right;
 156     background: transparent;
 157     margin-top: 0;
 158     margin-bottom: 0;
 159     font-size: 12px;
 160     padding: 7px 5px;
 161     position: absolute;
 162     top: 15px;
 163     right: 10px;
 164     .border-radius(2px);
 165     > li > a {
 166       color: #444;
 167       text-decoration: none;
 168       display: inline-block;
 169       > .fa, > .glyphicon, > .ion {
 170         margin-right: 5px;
 171       }
 172     }
 173     > li + li:before {
 174       content: '>\00a0';
 175     }
 176   }
 177
 178   @media (max-width: @screen-sm-max) {
 179     > .breadcrumb {
 180       position: relative;
 181       margin-top: 5px;
 182       top: 0;
 183       right: 0;
 184       float: none;
 185       background: @gray;
 186       padding-left: 10px;
 187       li:before {
 188         color: darken(@gray, 20%);
 189       }
 190     }
 191   }
 192 }
 193
 194 .navbar-toggle {
 195   color: #fff;
 196   border: 0;
 197   margin: 0;
 198   padding: @navbar-padding-vertical @navbar-padding-horizontal;
 199 }
 200
 201 //Control navbar scaffolding on x-small screens
 202 @media (max-width: @screen-sm-max) {
 203   .navbar-custom-menu .navbar-nav > li {
 204     float: left;
 205   }
 206
 207   //Dont't let links get full width
 208   .navbar-custom-menu .navbar-nav {
 209     margin: 0;
 210     float: left;
 211   }
 212
 213   .navbar-custom-menu .navbar-nav > li > a {
 214     padding-top: 15px;
 215     padding-bottom: 15px;
 216     line-height: 20px;
 217   }
 218 }
 219
 220 // Collapse header
 221 @media (max-width: @screen-header-collapse) {
 222   .main-header {
 223     position: relative;
 224     .logo,
 225     .navbar {
 226       width: 100%;
 227       float: none;
 228     }
 229     .navbar {
 230       margin: 0;
 231     }
 232     .navbar-custom-menu {
 233       float: right;
 234     }
 235   }
 236 }
 237
 238 .navbar-collapse.pull-left {
 239   @media (max-width: @screen-sm-max) {
 240     float: none !important;
 241     + .navbar-custom-menu {
 242       display: block;
 243       position: absolute;
 244       top: 0;
 245       right: 40px;
 246     }
 247   }
 248 }