create nice reporting landing pages

[releng.git] / utils / test / reporting / assets / sass / components / _tiles.scss

diff --git a/utils/test/reporting/assets/sass/components/_tiles.scss b/utils/test/reporting/assets/sass/components/_tiles.scss
new file mode 100644 (file)
index 0000000..cecbbbe
--- /dev/null
+++ b/utils/test/reporting/assets/sass/components/_tiles.scss
@@ -0,0 +1,258 @@
+///\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
+/* Tiles */\r
+\r
+       .tiles {\r
+               $gutter: _size(gutter);\r
+               $duration: 0.5s;\r
+               $ease: 'ease';\r
+\r
+               @include vendor('display', 'flex');\r
+               @include vendor('flex-wrap', 'wrap');\r
+               postiion: relative;\r
+               margin: ($gutter * -1) 0 0 ($gutter * -1);\r
+\r
+               article {\r
+                       @include vendor('transition', (\r
+                               'transform #{$duration} #{$ease}',\r
+                               'opacity #{$duration} #{$ease}'\r
+                       ));\r
+                       position: relative;\r
+                       width: calc(#{(100% / 3)} - #{$gutter * 1});\r
+                       margin: $gutter 0 0 $gutter;\r
+\r
+                       > .image {\r
+                               @include vendor('transition', 'transform #{$duration} #{$ease}');\r
+                               position: relative;\r
+                               display: block;\r
+                               width: 100%;\r
+                               border-radius: _size(border-radius);\r
+                               overflow: hidden;\r
+\r
+                               img {\r
+                                       display: block;\r
+                                       width: 100%;\r
+                               }\r
+\r
+                               &:before {\r
+                                       @include vendor('pointer-events', 'none');\r
+                                       @include vendor('transition', (\r
+                                               'background-color #{$duration} #{$ease}',\r
+                                               'opacity #{$duration} #{$ease}'\r
+                                       ));\r
+                                       content: '';\r
+                                       display: block;\r
+                                       position: absolute;\r
+                                       top: 0;\r
+                                       left: 0;\r
+                                       width: 100%;\r
+                                       height: 100%;\r
+                                       opacity: 1.0;\r
+                                       z-index: 1;\r
+                                       opacity: 0.8;\r
+                               }\r
+\r
+                               &:after {\r
+                                       @include vendor('pointer-events', 'none');\r
+                                       @include vendor('transition', 'opacity #{$duration} #{$ease}');\r
+                                       content: '';\r
+                                       display: block;\r
+                                       position: absolute;\r
+                                       top: 0;\r
+                                       left: 0;\r
+                                       width: 100%;\r
+                                       height: 100%;\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: 0.25px; stroke: #ffffff; }</style><line x1="0" y1="0" x2="100" y2="100" /><line x1="100" y1="0" x2="0" y2="100" /></svg>');\r
+                                       background-position: center;\r
+                                       background-repeat: no-repeat;\r
+                                       background-size: 100% 100%;\r
+                                       opacity: 0.25;\r
+                                       z-index: 2;\r
+                               }\r
+                       }\r
+\r
+                       > a {\r
+                               @include vendor('display', 'flex');\r
+                               @include vendor('flex-direction', 'column');\r
+                               @include vendor('align-items', 'center');\r
+                               @include vendor('justify-content', 'center');\r
+                               @include vendor('transition', (\r
+                                       'background-color #{$duration} #{$ease}',\r
+                                       'transform #{$duration} #{$ease}'\r
+                               ));\r
+                               position: absolute;\r
+                               top: 0;\r
+                               left: 0;\r
+                               width: 100%;\r
+                               height: 100%;\r
+                               padding: 1em;\r
+                               border-radius: _size(border-radius);\r
+                               border-bottom: 0;\r
+                               color: _palette(fg-accent);\r
+                               text-align: center;\r
+                               text-decoration: none;\r
+                               z-index: 3;\r
+\r
+                               > :last-child {\r
+                                       margin: 0;\r
+                               }\r
+\r
+                               &:hover {\r
+                                       color: _palette(fg-accent) !important;\r
+                               }\r
+\r
+                               h2 {\r
+                                       margin: 0;\r
+                               }\r
+\r
+                               .content {\r
+                                       @include vendor('transition', (\r
+                                               'max-height #{$duration} #{$ease}',\r
+                                               'opacity #{$duration} #{$ease}'\r
+                                       ));\r
+                                       width: 100%;\r
+                                       max-height: 0;\r
+                                       line-height: 1.5;\r
+                                       margin-top: 0.35em;\r
+                                       opacity: 0;\r
+\r
+                                       > :last-child {\r
+                                               margin-bottom: 0;\r
+                                       }\r
+                               }\r
+                       }\r
+\r
+                       &.style1 {\r
+                               > .image:before {\r
+                                       background-color: _palette(accent1);\r
+                               }\r
+                       }\r
+\r
+                       &.style2 {\r
+                               > .image:before {\r
+                                       background-color: _palette(accent2);\r
+                               }\r
+                       }\r
+\r
+                       &.style3 {\r
+                               > .image:before {\r
+                                       background-color: _palette(accent3);\r
+                               }\r
+                       }\r
+\r
+                       &.style4 {\r
+                               > .image:before {\r
+                                       background-color: _palette(accent4);\r
+                               }\r
+                       }\r
+\r
+                       &.style5 {\r
+                               > .image:before {\r
+                                       background-color: _palette(accent5);\r
+                               }\r
+                       }\r
+\r
+                       &.style6 {\r
+                               > .image:before {\r
+                                       background-color: _palette(accent6);\r
+                               }\r
+                       }\r
+\r
+                       body:not(.is-touch) & {\r
+                               &:hover {\r
+                                       > .image {\r
+                                               @include vendor('transform', 'scale(1.1)');\r
+\r
+                                               &:before {\r
+                                                       background-color: _palette(bg-accent);\r
+                                                       opacity: 0.35;\r
+                                               }\r
+\r
+                                               &:after {\r
+                                                       opacity: 0;\r
+                                               }\r
+                                       }\r
+\r
+                                       .content {\r
+                                               max-height: 15em;\r
+                                               opacity: 1;\r
+                                       }\r
+                               }\r
+                       }\r
+               }\r
+\r
+               * + & {\r
+                       margin-top: _size(element-margin);\r
+               }\r
+\r
+               body.is-loading & {\r
+                       article {\r
+                               @include vendor('transform', 'scale(0.9)');\r
+                               opacity: 0;\r
+                       }\r
+               }\r
+\r
+               body.is-touch & {\r
+                       article {\r
+                               .content {\r
+                                       max-height: 15em;\r
+                                       opacity: 1;\r
+                               }\r
+                       }\r
+               }\r
+\r
+               @include breakpoint(large) {\r
+                       $gutter: _size(gutter) * 0.5;\r
+\r
+                       margin: ($gutter * -1) 0 0 ($gutter * -1);\r
+\r
+                       article {\r
+                               width: calc(#{(100% / 3)} - #{$gutter * 1});\r
+                               margin: $gutter 0 0 $gutter;\r
+                       }\r
+               }\r
+\r
+               @include breakpoint(medium) {\r
+                       $gutter: _size(gutter);\r
+\r
+                       margin: ($gutter * -1) 0 0 ($gutter * -1);\r
+\r
+                       article {\r
+                               width: calc(#{(100% / 2)} - #{$gutter * 1});\r
+                               margin: $gutter 0 0 $gutter;\r
+                       }\r
+               }\r
+\r
+               @include breakpoint(small) {\r
+                       $gutter: _size(gutter) * 0.5;\r
+\r
+                       margin: ($gutter * -1) 0 0 ($gutter * -1);\r
+\r
+                       article {\r
+                               width: calc(#{(100% / 2)} - #{$gutter * 1});\r
+                               margin: $gutter 0 0 $gutter;\r
+\r
+                               &:hover {\r
+                                       > .image {\r
+                                               @include vendor('transform', 'scale(1.0)');\r
+                                       }\r
+                               }\r
+                       }\r
+               }\r
+\r
+               @include breakpoint(xsmall) {\r
+                       $gutter: _size(gutter) * 0.5;\r
+\r
+                       margin: 0;\r
+\r
+                       article {\r
+                               width: 100%;\r
+                               margin: $gutter 0 0 0;\r
+                       }\r
+               }\r
+       }\r
+\r