create nice reporting landing pages

[releng.git] / utils / test / reporting / assets / sass / layout / _header.scss

diff --git a/utils/test/reporting/assets/sass/layout/_header.scss b/utils/test/reporting/assets/sass/layout/_header.scss
new file mode 100644 (file)
index 0000000..70a5fba
--- /dev/null
+++ b/utils/test/reporting/assets/sass/layout/_header.scss
@@ -0,0 +1,136 @@
+///\r
+/// Phantom by HTML5 UP\r
+/// html5up.net | @ajlkn\r
+/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)\r
+///\r
+\r
+/* Header */\r
+\r
+       #header {\r
+               @include padding(5em, 0, (3em, 0, -5em, 0));\r
+\r
+               .logo {\r
+                       display: block;\r
+                       border-bottom: 0;\r
+                       color: inherit;\r
+                       font-weight: _font(weight-bold);\r
+                       letter-spacing: _font(letter-spacing);\r
+                       margin: 0 0 (_size(element-margin) * 1.25) 0;\r
+                       text-decoration: none;\r
+                       text-transform: uppercase;\r
+                       display: inline-block;\r
+\r
+                       > * {\r
+                               display: inline-block;\r
+                               vertical-align: middle;\r
+                       }\r
+\r
+                       .symbol {\r
+                               margin-right: 0.65em;\r
+\r
+                               img {\r
+                                       display: block;\r
+                                       width: 2em;\r
+                                       height: 2em;\r
+                               }\r
+                       }\r
+               }\r
+\r
+               nav {\r
+                       position: fixed;\r
+                       right: 2em;\r
+                       top: 2em;\r
+                       z-index: _misc(z-index-base);\r
+\r
+                       ul {\r
+                               @include vendor('display', 'flex');\r
+                               @include vendor('align-items', 'center');\r
+                               list-style: none;\r
+                               margin: 0;\r
+                               padding: 0;\r
+\r
+                               li {\r
+                                       display: block;\r
+                                       padding: 0;\r
+\r
+                                       a {\r
+                                               display: block;\r
+                                               position: relative;\r
+                                               height: 3em;\r
+                                               line-height: 3em;\r
+                                               padding: 0 1.5em;\r
+                                               background-color: transparentize(_palette(bg), 0.5);\r
+                                               border-radius: _size(border-radius);\r
+                                               border: 0;\r
+                                               font-size: 0.8em;\r
+                                               font-weight: _font(weight-bold);\r
+                                               letter-spacing: _font(letter-spacing);\r
+                                               text-transform: uppercase;\r
+                                       }\r
+\r
+                                       a[href="#menu"] {\r
+                                               -webkit-tap-highlight-color: transparent;\r
+                                               width: 4em;\r
+                                               text-indent: 4em;\r
+                                               font-size: 1em;\r
+                                               overflow: hidden;\r
+                                               padding: 0;\r
+                                               white-space: nowrap;\r
+\r
+                                               &:before, &:after {\r
+                                                       @include vendor('transition', 'opacity #{_duration(transition)} ease');\r
+                                                       content: '';\r
+                                                       display: block;\r
+                                                       position: absolute;\r
+                                                       top: 0;\r
+                                                       left: 0;\r
+                                                       width: 100%;\r
+                                                       height: 100%;\r
+                                                       background-position: center;\r
+                                                       background-repeat: no-repeat;\r
+                                                       background-size: 2em 2em;\r
+                                               }\r
+\r
+                                               &:before {\r
+                                                       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
+                                                       opacity: 0;\r
+                                               }\r
+\r
+                                               &:after {\r
+                                                       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
+                                                       opacity: 1;\r
+                                               }\r
+\r
+                                               &:hover {\r
+                                                       &:before {\r
+                                                               opacity: 1;\r
+                                                       }\r
+\r
+                                                       &:after {\r
+                                                               opacity: 0;\r
+                                                       }\r
+                                               }\r
+                                       }\r
+                               }\r
+                       }\r
+               }\r
+\r
+               @include breakpoint(small) {\r
+                       @include padding(3em, 0, (1em, 0, -3em, 0));\r
+\r
+                       nav {\r
+                               right: 0.5em;\r
+                               top: 0.5em;\r
+\r
+                               ul {\r
+                                       li {\r
+                                               a[href="#menu"] {\r
+                                                       &:before, &:after {\r
+                                                               background-size: 1.5em 1.5em;\r
+                                                       }\r
+                                               }\r
+                                       }\r
+                               }\r
+                       }\r
+               }\r
+       }
\ No newline at end of file