assets/sass/layout/_menu.scss

   1 ///
   2 /// Forty 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                 @include vendor('transition', (
  11                         'transform #{_duration(menu)} ease',
  12                         'opacity #{_duration(menu)} ease',
  13                         'visibility #{_duration(menu)}'
  14                 ));
  15                 @include vendor('align-items', 'center');
  16                 @include vendor('display', 'flex');
  17                 @include vendor('justify-content', 'center');
  18                 @include vendor('pointer-events', 'none');
  19                 background: transparentize(_palette(bg), 0.1);
  20                 box-shadow: none;
  21                 height: 100%;
  22                 left: 0;
  23                 opacity: 0;
  24                 overflow: hidden;
  25                 padding: 3em 2em;
  26                 position: fixed;
  27                 top: 0;
  28                 visibility: hidden;
  29                 width: 100%;
  30                 z-index: _misc(z-index-base) + 2;
  31
  32                 .inner {
  33                         @include vendor('transition', (
  34                                 'transform #{_duration(menu)} ease-out',
  35                                 'opacity #{_duration(menu)} ease',
  36                                 'visibility #{_duration(menu)}'
  37                         ));
  38                         @include vendor('transform', 'rotateX(20deg)');
  39                         -webkit-overflow-scrolling: touch;
  40                         max-width: 100%;
  41                         max-height: 100vh;
  42                         opacity: 0;
  43                         overflow: auto;
  44                         text-align: center;
  45                         visibility: hidden;
  46                         width: 18em;
  47
  48                         > :first-child {
  49                                 margin-top: _size(element-margin);
  50                         }
  51
  52                         > :last-child {
  53                                 margin-bottom: (_size(element-margin) * 1.5);
  54                         }
  55                 }
  56
  57                 ul {
  58                         margin: 0 0 (_size(element-margin) * 0.5) 0;
  59
  60                         &.links {
  61                                 list-style: none;
  62                                 padding: 0;
  63
  64                                 > li {
  65                                         padding: 0;
  66
  67                                         > a:not(.button) {
  68                                                 border: 0;
  69                                                 border-top: solid 1px _palette(border);
  70                                                 display: block;
  71                                                 font-size: 0.8em;
  72                                                 font-weight: _font(weight-bold);
  73                                                 letter-spacing: _font(letter-spacing-alt);
  74                                                 line-height: 4em;
  75                                                 text-decoration: none;
  76                                                 text-transform: uppercase;
  77                                         }
  78
  79                                         > .button {
  80                                                 display: block;
  81                                                 margin: 0.5em 0 0 0;
  82                                         }
  83
  84                                         &:first-child {
  85                                                 > a:not(.button) {
  86                                                         border-top: 0 !important;
  87                                                 }
  88                                         }
  89                                 }
  90                         }
  91                 }
  92
  93                 .close {
  94                         @include vendor('transition', 'color #{_duration(transition)} ease-in-out');
  95                         -webkit-tap-highlight-color: rgba(0,0,0,0);
  96                         border: 0;
  97                         cursor: pointer;
  98                         display: block;
  99                         height: 4em;
 100                         line-height: 4em;
 101                         overflow: hidden;
 102                         padding-right: 1.25em;
 103                         position: absolute;
 104                         right: 0;
 105                         text-align: right;
 106                         text-indent: 8em;
 107                         top: 0;
 108                         vertical-align: middle;
 109                         white-space: nowrap;
 110                         width: 8em;
 111
 112                         &:before, &:after {
 113                                 @include vendor('transition', 'opacity #{_duration(transition)} ease-in-out');
 114                                 background-position: center;
 115                                 background-repeat: no-repeat;
 116                                 content: '';
 117                                 display: block;
 118                                 height: 4em;
 119                                 position: absolute;
 120                                 right: 0;
 121                                 top: 0;
 122                                 width: 4em;
 123                         }
 124
 125                         &:before {
 126                                 background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px" viewBox="0 0 20 20" zoomAndPan="disable"><style>line { stroke: #{_palette(fg-bold)}; stroke-width: 2; }</style><line x1="0" y1="0" x2="20" y2="20" /><line x1="20" y1="0" x2="0" y2="20" /></svg>');
 127                         }
 128
 129                         &:after {
 130                                 background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="20px" viewBox="0 0 20 20" zoomAndPan="disable"><style>line { stroke: #{_palette(highlight)}; stroke-width: 2; }</style><line x1="0" y1="0" x2="20" y2="20" /><line x1="20" y1="0" x2="0" y2="20" /></svg>');
 131                                 opacity: 0;
 132                         }
 133
 134                         &:hover, &:active {
 135                                 &:after {
 136                                         opacity: 1;
 137                                 }
 138                         }
 139                 }
 140         }
 141
 142         body.is-ie {
 143                 #menu {
 144                         background: transparentize(_palette(bg-alt), 0.025);
 145                 }
 146         }
 147
 148         body.is-menu-visible {
 149                 #wrapper {
 150                         @include vendor('filter', 'blur(0.5em)');
 151                 }
 152
 153                 #menu {
 154                         @include vendor('pointer-events', 'auto');
 155                         opacity: 1;
 156                         visibility: visible;
 157
 158                         .inner {
 159                                 @include vendor('transform', 'none');
 160                                 opacity: 1;
 161                                 visibility: visible;
 162                         }
 163                 }
 164         }