assets/main/sass/layout/_nav.scss

   1 ///
   2 /// Massively by HTML5 UP
   3 /// html5up.net | @ajlkn
   4 /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
   5 ///
   6
   7 /* Nav */
   8
   9         #nav {
  10                 @include color-list(invert);
  11                 @include color-typography(invert);
  12                 @include vendor('display', 'flex');
  13                 @include vendor('transition', (
  14                         'transform 1s ease',
  15                         'opacity 1s ease'
  16                 ));
  17                 background: rgba(255,255,255,0.175);
  18                 height: 4rem;
  19                 line-height: 4rem;
  20                 margin: -4rem auto 0 auto;
  21                 overflow: hidden;
  22                 padding: 0 2rem 0 0;
  23                 position: relative;
  24                 width: calc(100% - #{_size(padding) * 2});
  25                 max-width: _size(wrapper);
  26                 z-index: 2;
  27
  28                 ul {
  29                         &.links {
  30                                 @include vendor('display', 'flex');
  31                                 @include vendor('flex-grow', '1');
  32                                 @include vendor('flex-shrink', '1');
  33                                 font-family: _font(family-heading);
  34                                 font-weight: _font(weight-heading);
  35                                 letter-spacing: 0.075em;
  36                                 list-style: none;
  37                                 margin-bottom: 0;
  38                                 padding-left: 0;
  39                                 text-transform: uppercase;
  40
  41                                 li {
  42                                         display: block;
  43                                         padding-left: 0;
  44
  45                                         a {
  46                                                 @include vendor('transition', (
  47                                                         'background-color #{_duration(transition)} ease-in-out',
  48                                                         'color #{_duration(transition)} ease-in-out'
  49                                                 ));
  50                                                 display: block;
  51                                                 font-size: 0.8rem;
  52                                                 outline: none;
  53                                                 padding: 0 2rem;
  54
  55                                                 &:hover {
  56                                                         color: inherit !important;
  57                                                         background-color: transparentize(_palette(invert, fg), 0.9);
  58                                                 }
  59                                         }
  60
  61                                         &.active {
  62                                                 background-color: _palette(invert, fg);
  63
  64                                                 a {
  65                                                         color: _palette(invert, bg);
  66
  67                                                         &:hover {
  68                                                                 color: _palette(invert, accent) !important;
  69                                                         }
  70                                                 }
  71                                         }
  72                                 }
  73                         }
  74
  75                         &.icons {
  76                                 @include vendor('flex-grow', '0');
  77                                 @include vendor('flex-shrink', '0');
  78                                 margin-bottom: 0;
  79                         }
  80                 }
  81
  82                 @include breakpoint('<=medium') {
  83                         display: none;
  84                 }
  85         }