utils/test/reporting/3rd_party/sass/layout/_header.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 /* Header */\r
   8 \r
   9         #header {\r
  10                 @include padding(5em, 0, (3em, 0, -5em, 0));\r
  11 \r
  12                 .logo {\r
  13                         display: block;\r
  14                         border-bottom: 0;\r
  15                         color: inherit;\r
  16                         font-weight: _font(weight-bold);\r
  17                         letter-spacing: _font(letter-spacing);\r
  18                         margin: 0 0 (_size(element-margin) * 1.25) 0;\r
  19                         text-decoration: none;\r
  20                         text-transform: uppercase;\r
  21                         display: inline-block;\r
  22 \r
  23                         > * {\r
  24                                 display: inline-block;\r
  25                                 vertical-align: middle;\r
  26                         }\r
  27 \r
  28                         .symbol {\r
  29                                 margin-right: 0.65em;\r
  30 \r
  31                                 img {\r
  32                                         display: block;\r
  33                                         width: 2em;\r
  34                                         height: 2em;\r
  35                                 }\r
  36                         }\r
  37                 }\r
  38 \r
  39                 nav {\r
  40                         position: fixed;\r
  41                         right: 2em;\r
  42                         top: 2em;\r
  43                         z-index: _misc(z-index-base);\r
  44 \r
  45                         ul {\r
  46                                 @include vendor('display', 'flex');\r
  47                                 @include vendor('align-items', 'center');\r
  48                                 list-style: none;\r
  49                                 margin: 0;\r
  50                                 padding: 0;\r
  51 \r
  52                                 li {\r
  53                                         display: block;\r
  54                                         padding: 0;\r
  55 \r
  56                                         a {\r
  57                                                 display: block;\r
  58                                                 position: relative;\r
  59                                                 height: 3em;\r
  60                                                 line-height: 3em;\r
  61                                                 padding: 0 1.5em;\r
  62                                                 background-color: transparentize(_palette(bg), 0.5);\r
  63                                                 border-radius: _size(border-radius);\r
  64                                                 border: 0;\r
  65                                                 font-size: 0.8em;\r
  66                                                 font-weight: _font(weight-bold);\r
  67                                                 letter-spacing: _font(letter-spacing);\r
  68                                                 text-transform: uppercase;\r
  69                                         }\r
  70 \r
  71                                         a[href="#menu"] {\r
  72                                                 -webkit-tap-highlight-color: transparent;\r
  73                                                 width: 4em;\r
  74                                                 text-indent: 4em;\r
  75                                                 font-size: 1em;\r
  76                                                 overflow: hidden;\r
  77                                                 padding: 0;\r
  78                                                 white-space: nowrap;\r
  79 \r
  80                                                 &:before, &:after {\r
  81                                                         @include vendor('transition', 'opacity #{_duration(transition)} ease');\r
  82                                                         content: '';\r
  83                                                         display: block;\r
  84                                                         position: absolute;\r
  85                                                         top: 0;\r
  86                                                         left: 0;\r
  87                                                         width: 100%;\r
  88                                                         height: 100%;\r
  89                                                         background-position: center;\r
  90                                                         background-repeat: no-repeat;\r
  91                                                         background-size: 2em 2em;\r
  92                                                 }\r
  93 \r
  94                                                 &:before {\r
  95                                                         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="0" y1="25" x2="100" y2="25" /><line x1="0" y1="50" x2="100" y2="50" /><line x1="0" y1="75" x2="100" y2="75" /></svg>');\r
  96                                                         opacity: 0;\r
  97                                                 }\r
  98 \r
  99                                                 &:after {\r
 100                                                         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="0" y1="25" x2="100" y2="25" /><line x1="0" y1="50" x2="100" y2="50" /><line x1="0" y1="75" x2="100" y2="75" /></svg>');\r
 101                                                         opacity: 1;\r
 102                                                 }\r
 103 \r
 104                                                 &:hover {\r
 105                                                         &:before {\r
 106                                                                 opacity: 1;\r
 107                                                         }\r
 108 \r
 109                                                         &:after {\r
 110                                                                 opacity: 0;\r
 111                                                         }\r
 112                                                 }\r
 113                                         }\r
 114                                 }\r
 115                         }\r
 116                 }\r
 117 \r
 118                 @include breakpoint(small) {\r
 119                         @include padding(3em, 0, (1em, 0, -3em, 0));\r
 120 \r
 121                         nav {\r
 122                                 right: 0.5em;\r
 123                                 top: 0.5em;\r
 124 \r
 125                                 ul {\r
 126                                         li {\r
 127                                                 a[href="#menu"] {\r
 128                                                         &:before, &:after {\r
 129                                                                 background-size: 1.5em 1.5em;\r
 130                                                         }\r
 131                                                 }\r
 132                                         }\r
 133                                 }\r
 134                         }\r
 135                 }\r
 136         }