assets/main/sass/layout/_menu.scss

   1 ///
   2 /// Editorial 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 /* Menu */
   8
   9         #menu {
  10                 ul {
  11                         @include vendor('user-select', 'none');
  12                         color: _palette(fg-bold);
  13                         font-family: _font(family-heading);
  14                         font-family: _font(weight-heading-alt);
  15                         letter-spacing: _font(kerning-heading);
  16                         list-style: none;
  17                         margin-bottom: 0;
  18                         padding: 0;
  19                         text-transform: uppercase;
  20
  21                         a, span {
  22                                 border-bottom: 0;
  23                                 color: inherit;
  24                                 cursor: pointer;
  25                                 display: block;
  26                                 font-size: 0.9em;
  27                                 padding: 0.625em 0;
  28
  29                                 &:hover {
  30                                         color: _palette(accent);
  31                                 }
  32
  33                                 &.opener {
  34                                         @include vendor('transition', 'color #{_duration(transition)} ease-in-out');
  35                                         @include icon;
  36                                         -webkit-tap-highlight-color: rgba(255,255,255,0);
  37                                         position: relative;
  38
  39                                         &:before {
  40                                                 @include vendor('transition', (
  41                                                         'color #{_duration(transition)} ease-in-out',
  42                                                         'transform #{_duration(transition)} ease-in-out'
  43                                                 ));
  44                                                 color: _palette(fg-light);
  45                                                 content: '\f078';
  46                                                 position: absolute;
  47                                                 right: 0;
  48                                         }
  49
  50                                         &:hover {
  51                                                 &:before {
  52                                                         color: _palette(accent);
  53                                                 }
  54                                         }
  55
  56                                         &.active {
  57                                                 & + ul {
  58                                                         display: block;
  59                                                 }
  60
  61                                                 &:before {
  62                                                         @include vendor('transform', 'rotate(-180deg)');
  63                                                 }
  64                                         }
  65                                 }
  66                         }
  67                 }
  68
  69                 > ul {
  70                         > li {
  71                                 border-top: solid 1px _palette(border);
  72                                 margin: 0.5em 0 0 0;
  73                                 padding: 0.5em 0 0 0;
  74
  75                                 > ul {
  76                                         color: _palette(fg-light);
  77                                         display: none;
  78                                         margin: 0.5em 0 1.5em 0;
  79                                         padding-left: 1em;
  80
  81                                         a, span {
  82                                                 font-size: 0.8em;
  83                                         }
  84
  85                                         > li {
  86                                                 margin: 0.125em 0 0 0;
  87                                                 padding: 0.125em 0 0 0;
  88                                         }
  89                                 }
  90
  91                                 &:first-child {
  92                                         border-top: 0;
  93                                         margin-top: 0;
  94                                         padding-top: 0;
  95                                 }
  96                         }
  97                 }
  98         }