aleph1.co.uk Git - yaffs-website/blob - web/themes/contrib/bootstrap/starterkits/less/less/component/navbar.less

   1 /**
   2  * Navbar styling.
   3  */
   4 @mobile:          ~"screen and (max-width: @{screen-xs-max})";
   5 @tablet:          ~"screen and (min-width: @{screen-sm-min})";
   6 @normal:          ~"screen and (min-width: @{screen-md-min})";
   7 @wide:            ~"screen and (min-width: @{screen-lg-min})";
   8 @grid-breakpoint: ~"screen and (min-width: @{grid-float-breakpoint})";
   9
  10 body {
  11   // Fix horizontal scrolling on iOS devices.
  12   // http://drupal.org/node/1870076
  13   position: relative;
  14
  15   &.navbar-is-static-top {
  16     margin-top: 0;
  17   }
  18   &.navbar-is-fixed-top {
  19     margin-top: (@navbar-height + (@grid-gutter-width / 2));
  20   }
  21   &.navbar-is-fixed-bottom {
  22     padding-bottom: (@navbar-height + (@grid-gutter-width / 2));
  23   }
  24
  25   @media @tablet {
  26     margin-top: (@grid-gutter-width / 2);
  27   }
  28   @media @mobile {
  29     &.toolbar-vertical {
  30       &.navbar-is-fixed-top,
  31       &.navbar-is-fixed-bottom {
  32         .toolbar-bar {
  33           position: fixed;
  34         }
  35         header {
  36           z-index: 500;
  37         }
  38       }
  39       // Default toolbar fixed height value.
  40       // @see core/modules/toolbar/css/toolbar.icons.theme.css@261
  41       &.navbar-is-fixed-top header {
  42         top: 39px;
  43       }
  44     }
  45   }
  46 }
  47 .navbar.container {
  48   @media @tablet {
  49     max-width: ((@container-sm - @grid-gutter-width));
  50   }
  51   @media @normal {
  52     max-width: ((@container-md - @grid-gutter-width));
  53   }
  54   @media @wide {
  55     max-width: ((@container-lg - @grid-gutter-width));
  56   }
  57 }
  58
  59 // Branding.
  60 .navbar .logo {
  61   margin-right: -(@grid-gutter-width / 2);
  62   padding-left: (@grid-gutter-width / 2);
  63   padding-right: (@grid-gutter-width / 2);
  64   @media @grid-breakpoint {
  65     margin-right: 0;
  66     padding-left: 0;
  67   }
  68 }