X-Git-Url: https://gerrit.opnfv.org/gerrit/gitweb?a=blobdiff_plain;f=utils%2Ftest%2Freporting%2Fassets%2Fsass%2Flayout%2F_header.scss;fp=utils%2Ftest%2Freporting%2Fassets%2Fsass%2Flayout%2F_header.scss;h=70a5fbaaed5c99b630a22b7ee27a199148468516;hb=d74e439e04434fd4e77e7c55e8ba4e25df3936a7;hp=0000000000000000000000000000000000000000;hpb=a366d65ccaca3c1aa8fdc9e396d708b623dda014;p=releng.git

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