www.aleph1.co.uk Git - yaffs-website/blob - web/themes/contrib/bootstrap/starterkits/sass/scss/component/_navbar.scss

   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   // https://www.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 }
  69