utils/test/reporting/3rd_party/sass/layout/_menu.scss

   1 ///\r
   2 /// Phantom by HTML5 UP\r
   3 /// html5up.net | @ajlkn\r
   4 /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)\r
   5 ///\r
   6 \r
   7 /* Menu */\r
   8 \r
   9         #wrapper {\r
  10                 @include vendor('transition', 'opacity #{_duration(menu)} ease');\r
  11                 opacity: 1;\r
  12         }\r
  13 \r
  14         #menu {\r
  15                 @include vendor('transform', 'translateX(#{_size(menu)})');\r
  16                 @include vendor('transition', ('transform #{_duration(menu)} ease', 'visibility #{_duration(menu)}'));\r
  17                 position: fixed;\r
  18                 top: 0;\r
  19                 right: 0;\r
  20                 width: _size(menu);\r
  21                 max-width: 80%;\r
  22                 height: 100%;\r
  23                 -webkit-overflow-scrolling: touch;\r
  24                 background: _palette(fg);\r
  25                 color: _palette(bg);\r
  26                 cursor: default;\r
  27                 visibility: hidden;\r
  28                 z-index: _misc(z-index-base) + 2;\r
  29 \r
  30                 > .inner {\r
  31                         @include vendor('transition', 'opacity #{_duration(menu)} ease');\r
  32                         -webkit-overflow-scrolling: touch;\r
  33                         position: absolute;\r
  34                         top: 0;\r
  35                         left: 0;\r
  36                         width: 100%;\r
  37                         height: 100%;\r
  38                         padding: 2.75em;\r
  39                         opacity: 0;\r
  40                         overflow-y: auto;\r
  41 \r
  42                         > ul {\r
  43                                 list-style: none;\r
  44                                 margin: 0 0 (_size(element-margin) * 0.5) 0;\r
  45                                 padding: 0;\r
  46 \r
  47                                 > li {\r
  48                                         padding: 0;\r
  49                                         border-top: solid 1px transparentize(_palette(bg), 0.85);\r
  50 \r
  51                                         a {\r
  52                                                 display: block;\r
  53                                                 padding: 1em 0;\r
  54                                                 line-height: 1.5;\r
  55                                                 border: 0;\r
  56                                                 color: inherit;\r
  57                                         }\r
  58 \r
  59                                         &:first-child {\r
  60                                                 border-top: 0;\r
  61                                                 margin-top: -1em;\r
  62                                         }\r
  63                                 }\r
  64                         }\r
  65                 }\r
  66 \r
  67                 > .close {\r
  68                         @include vendor('transition', (\r
  69                                 'opacity #{_duration(menu)} ease',\r
  70                                 'transform #{_duration(menu)} ease'\r
  71                         ));\r
  72                         @include vendor('transform', 'scale(0.25) rotate(180deg)');\r
  73                         -webkit-tap-highlight-color: transparent;\r
  74                         display: block;\r
  75                         position: absolute;\r
  76                         top: 2em;\r
  77                         left: -6em;\r
  78                         width: 6em;\r
  79                         text-indent: 6em;\r
  80                         height: 3em;\r
  81                         border: 0;\r
  82                         font-size: 1em;\r
  83                         opacity: 0;\r
  84                         overflow: hidden;\r
  85                         padding: 0;\r
  86                         white-space: nowrap;\r
  87 \r
  88                         &:before, &:after {\r
  89                                 @include vendor('transition', 'opacity #{_duration(transition)} ease');\r
  90                                 content: '';\r
  91                                 display: block;\r
  92                                 position: absolute;\r
  93                                 top: 0;\r
  94                                 left: 0;\r
  95                                 width: 100%;\r
  96                                 height: 100%;\r
  97                                 background-position: center;\r
  98                                 background-repeat: no-repeat;\r
  99                                 background-size: 2em 2em;\r
 100                         }\r
 101 \r
 102                         &:before {\r
 103                                 background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" preserveAspectRatio="none"><style>line { stroke-width: 8px; stroke: #{_palette(accent1)}; }</style><line x1="15" y1="15" x2="85" y2="85" /><line x1="85" y1="15" x2="15" y2="85" /></svg>');\r
 104                                 opacity: 0;\r
 105                         }\r
 106 \r
 107                         &:after {\r
 108                                 background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100" preserveAspectRatio="none"><style>line { stroke-width: 8px; stroke: #{_palette(fg)}; }</style><line x1="15" y1="15" x2="85" y2="85" /><line x1="85" y1="15" x2="15" y2="85" /></svg>');\r
 109                                 opacity: 1;\r
 110                         }\r
 111 \r
 112                         &:hover {\r
 113                                 &:before {\r
 114                                         opacity: 1;\r
 115                                 }\r
 116 \r
 117                                 &:after {\r
 118                                         opacity: 0;\r
 119                                 }\r
 120                         }\r
 121                 }\r
 122 \r
 123                 @include breakpoint(small) {\r
 124                         @include vendor('transform', 'translateX(#{_size(menu) * 0.75})');\r
 125                         width: (_size(menu) * 0.75);\r
 126 \r
 127                         > .inner {\r
 128                                 padding: 2.75em 1.5em;\r
 129                         }\r
 130 \r
 131                         > .close {\r
 132                                 top: 0.5em;\r
 133                                 left: -4.25em;\r
 134                                 width: 4.25em;\r
 135                                 text-indent: 4.25em;\r
 136 \r
 137                                 &:before, &:after {\r
 138                                         background-size: 1.5em 1.5em;\r
 139                                 }\r
 140                         }\r
 141                 }\r
 142         }\r
 143 \r
 144         body.is-menu-visible {\r
 145                 #wrapper {\r
 146                         @include vendor('pointer-events', 'none');\r
 147                         cursor: default;\r
 148                         opacity: 0.25;\r
 149                 }\r
 150 \r
 151                 #menu {\r
 152                         @include vendor('transform', 'translateX(0)');\r
 153                         visibility: visible;\r
 154 \r
 155                         > * {\r
 156                                 opacity: 1;\r
 157                         }\r
 158 \r
 159                         .close {\r
 160                                 @include vendor('transform', 'scale(1.0) rotate(0deg)');\r
 161                                 opacity: 1;\r
 162                         }\r
 163                 }\r
 164         }