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_light(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                 @media screen and (prefers-color-scheme: dark) {
  32                         background: transparentize(_palette_dark(bg), 0.1);
  33                 }
  34
  35                 .inner {
  36                         @include vendor('transition', (
  37                                 'transform #{_duration(menu)} ease-out',
  38                                 'opacity #{_duration(menu)} ease',
  39                                 'visibility #{_duration(menu)}'
  40                         ));
  41                         @include vendor('transform', 'rotateX(20deg)');
  42                         -webkit-overflow-scrolling: touch;
  43                         max-width: 100%;
  44                         max-height: 100vh;
  45                         opacity: 0;
  46                         overflow: auto;
  47                         text-align: center;
  48                         visibility: hidden;
  49                         width: 18em;
  50
  51                         > :first-child {
  52                                 margin-top: _size(element-margin);
  53                         }
  54
  55                         > :last-child {
  56                                 margin-bottom: (_size(element-margin) * 1.5);
  57                         }
  58                 }
  59
  60                 ul {
  61                         margin: 0 0 (_size(element-margin) * 0.5) 0;
  62
  63                         &.links {
  64                                 list-style: none;
  65                                 padding: 0;
  66
  67                                 > li {
  68                                         padding: 0;
  69
  70                                         > a:not(.button) {
  71                                                 border: 0;
  72                                                 border-top: solid 1px _palette_light(border);
  73                                                 display: block;
  74                                                 font-size: 0.8em;
  75                                                 font-weight: _font(weight-bold);
  76                                                 letter-spacing: _font(letter-spacing-alt);
  77                                                 line-height: 4em;
  78                                                 text-decoration: none;
  79                                                 text-transform: uppercase;
  80                                                 @media screen and (prefers-color-scheme: dark) {
  81                                                         border-top: solid 1px _palette_dark(border);
  82                                                 }
  83                                         }
  84
  85                                         > .button {
  86                                                 display: block;
  87                                                 margin: 0.5em 0 0 0;
  88                                         }
  89
  90                                         &:first-child {
  91                                                 > a:not(.button) {
  92                                                         border-top: 0 !important;
  93                                                 }
  94                                         }
  95                                 }
  96                         }
  97                 }
  98
  99                 .close {
 100                         @include vendor('transition', 'color #{_duration(transition)} ease-in-out');
 101                         -webkit-tap-highlight-color: rgba(0,0,0,0);
 102                         border: 0;
 103                         cursor: pointer;
 104                         display: block;
 105                         height: 4em;
 106                         line-height: 4em;
 107                         overflow: hidden;
 108                         padding-right: 1.25em;
 109                         position: absolute;
 110                         right: 0;
 111                         text-align: right;
 112                         text-indent: 8em;
 113                         top: 0;
 114                         vertical-align: middle;
 115                         white-space: nowrap;
 116                         width: 8em;
 117
 118                         &:before, &:after {
 119                                 @include vendor('transition', 'opacity #{_duration(transition)} ease-in-out');
 120                                 background-position: center;
 121                                 background-repeat: no-repeat;
 122                                 content: '';
 123                                 display: block;
 124                                 height: 4em;
 125                                 position: absolute;
 126                                 right: 0;
 127                                 top: 0;
 128                                 width: 4em;
 129                         }
 130
 131                         &:before {
 132                                 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_light(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>');
 133                                 @media screen and (prefers-color-scheme: dark) {
 134                                         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_dark(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>');
 135                                 }
 136                         }
 137
 138                         &:after {
 139                                 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_light(highlight)}; stroke-width: 2; }</style><line x1="0" y1="0" x2="20" y2="20" /><line x1="20" y1="0" x2="0" y2="20" /></svg>');
 140                                 opacity: 0;
 141                                 @media screen and (prefers-color-scheme: dark) {
 142                                         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_dark(highlight)}; stroke-width: 2; }</style><line x1="0" y1="0" x2="20" y2="20" /><line x1="20" y1="0" x2="0" y2="20" /></svg>');
 143                                 }
 144                         }
 145
 146                         &:hover, &:active {
 147                                 &:after {
 148                                         opacity: 1;
 149                                 }
 150                         }
 151                 }
 152         }
 153
 154         body.is-ie {
 155                 #menu {
 156                         background: transparentize(_palette_light(bg-alt), 0.025);
 157                         @media screen and (prefers-color-scheme: dark) {
 158                                 background: transparentize(_palette_dark(bg-alt), 0.025);
 159                         }
 160                 }
 161         }
 162
 163         body.is-menu-visible {
 164                 #wrapper {
 165                         @include vendor('filter', 'blur(0.5em)');
 166                 }
 167
 168                 #menu {
 169                         @include vendor('pointer-events', 'auto');
 170                         opacity: 1;
 171                         visibility: visible;
 172
 173                         .inner {
 174                                 @include vendor('transform', 'none');
 175                                 opacity: 1;
 176                                 visibility: visible;
 177                         }
 178                 }
 179         }