www.aleph1.co.uk Git - yaffs-website/blob - web/themes/custom/yaffs/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
   9 body {
  10   // Fix horizontal scrolling on iOS devices.
  11   // http://drupal.org/node/1870076
  12   position: relative;
  13
  14   &.navbar-is-static-top {
  15     margin-top: 0;
  16   }
  17   &.navbar-is-fixed-top {
  18     margin-top: ($navbar-height + ($grid-gutter-width / 2));
  19   }
  20   &.navbar-is-fixed-bottom {
  21     padding-bottom: ($navbar-height + ($grid-gutter-width / 2));
  22   }
  23
  24   @media #{$tablet} {
  25     margin-top: ($grid-gutter-width / 2);
  26   }
  27   @media #{$mobile} {
  28     &.toolbar-vertical {
  29       &.navbar-is-fixed-top,
  30       &.navbar-is-fixed-bottom {
  31         .toolbar-bar {
  32           position: fixed;
  33         }
  34         header {
  35           z-index: 500;
  36         }
  37       }
  38       // Default toolbar fixed height value.
  39       // @see core/modules/toolbar/css/toolbar.icons.theme.css@261
  40       &.navbar-is-fixed-top header {
  41         top: 39px;
  42       }
  43     }
  44   }
  45 }
  46 .navbar.container {
  47   @media #{$tablet} {
  48     max-width: (($container-sm - $grid-gutter-width));
  49   }
  50   @media #{$normal} {
  51     max-width: (($container-md - $grid-gutter-width));
  52   }
  53   @media #{$wide} {
  54     max-width: (($container-lg - $grid-gutter-width));
  55   }
  56 }