From c850beb64083c730301188ade4cbba0f2a329a92 Mon Sep 17 00:00:00 2001 From: Morgan Richomme Date: Wed, 16 Nov 2016 18:16:43 +0100 Subject: Refactor reporting dir - dockerization - create util function for all the test projects - create a common config files - add unit tests - pep8 JIRA: RELENG-162 Change-Id: Ib209be4233084100ff238a7aeb2843ccc24a6f1e Signed-off-by: Morgan Richomme --- .../reporting/3rd_party/sass/components/_box.scss | 26 +++ .../3rd_party/sass/components/_button.scss | 88 +++++++ .../reporting/3rd_party/sass/components/_form.scss | 206 ++++++++++++++++ .../reporting/3rd_party/sass/components/_icon.scss | 50 ++++ .../3rd_party/sass/components/_image.scss | 64 +++++ .../reporting/3rd_party/sass/components/_list.scss | 177 ++++++++++++++ .../3rd_party/sass/components/_section.scss | 25 ++ .../3rd_party/sass/components/_table.scss | 81 +++++++ .../3rd_party/sass/components/_tiles.scss | 258 +++++++++++++++++++++ 9 files changed, 975 insertions(+) create mode 100644 utils/test/reporting/3rd_party/sass/components/_box.scss create mode 100644 utils/test/reporting/3rd_party/sass/components/_button.scss create mode 100644 utils/test/reporting/3rd_party/sass/components/_form.scss create mode 100644 utils/test/reporting/3rd_party/sass/components/_icon.scss create mode 100644 utils/test/reporting/3rd_party/sass/components/_image.scss create mode 100644 utils/test/reporting/3rd_party/sass/components/_list.scss create mode 100644 utils/test/reporting/3rd_party/sass/components/_section.scss create mode 100644 utils/test/reporting/3rd_party/sass/components/_table.scss create mode 100644 utils/test/reporting/3rd_party/sass/components/_tiles.scss (limited to 'utils/test/reporting/3rd_party/sass/components') diff --git a/utils/test/reporting/3rd_party/sass/components/_box.scss b/utils/test/reporting/3rd_party/sass/components/_box.scss new file mode 100644 index 000000000..74d3eba02 --- /dev/null +++ b/utils/test/reporting/3rd_party/sass/components/_box.scss @@ -0,0 +1,26 @@ +/// +/// Phantom by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Box */ + + .box { + border-radius: _size(border-radius); + border: solid _size(border-width) _palette(border); + margin-bottom: _size(element-margin); + padding: 1.5em; + + > :last-child, + > :last-child > :last-child, + > :last-child > :last-child > :last-child { + margin-bottom: 0; + } + + &.alt { + border: 0; + border-radius: 0; + padding: 0; + } + } \ No newline at end of file diff --git a/utils/test/reporting/3rd_party/sass/components/_button.scss b/utils/test/reporting/3rd_party/sass/components/_button.scss new file mode 100644 index 000000000..97fb389ad --- /dev/null +++ b/utils/test/reporting/3rd_party/sass/components/_button.scss @@ -0,0 +1,88 @@ +/// +/// Phantom by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Button */ + + input[type="submit"], + input[type="reset"], + input[type="button"], + button, + .button { + @include vendor('appearance', 'none'); + @include vendor('transition', ( + 'background-color #{_duration(transition)} ease-in-out', + 'color #{_duration(transition)} ease-in-out', + 'box-shadow #{_duration(transition)} ease-in-out' + )); + background-color: transparent; + border-radius: _size(border-radius); + border: 0; + box-shadow: inset 0 0 0 (_size(border-width) * 2) _palette(fg); + color: _palette(fg) !important; + cursor: pointer; + display: inline-block; + font-size: 0.8em; + font-weight: _font(weight-bold); + height: 3.5em; + letter-spacing: _font(letter-spacing); + line-height: 3.45em; + overflow: hidden; + padding: 0 1.25em 0 #{1.25em + _font(letter-spacing)}; + text-align: center; + text-decoration: none; + text-overflow: ellipsis; + text-transform: uppercase; + white-space: nowrap; + + &.icon { + &:before { + margin-right: 0.5em; + } + } + + &.fit { + display: block; + margin: 0 0 (_size(element-margin) * 0.5) 0; + width: 100%; + } + + &:hover { + color: _palette(accent1) !important; + box-shadow: inset 0 0 0 (_size(border-width) * 2) _palette(accent1); + } + + &:active { + background-color: transparentize(_palette(accent1), 0.9); + } + + &.small { + font-size: 0.6em; + } + + &.big { + font-size: 1em; + } + + &.special { + box-shadow: none; + background-color: _palette(fg); + color: _palette(bg) !important; + + &:hover { + background-color: _palette(accent1); + } + + &:active { + background-color: darken(_palette(accent1), 8); + } + } + + &.disabled, + &:disabled { + @include vendor('pointer-events', 'none'); + opacity: 0.25; + } + } \ No newline at end of file diff --git a/utils/test/reporting/3rd_party/sass/components/_form.scss b/utils/test/reporting/3rd_party/sass/components/_form.scss new file mode 100644 index 000000000..af0d5f224 --- /dev/null +++ b/utils/test/reporting/3rd_party/sass/components/_form.scss @@ -0,0 +1,206 @@ +/// +/// Phantom by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Form */ + + form { + margin: (_size(element-margin) * -0.5) 0 _size(element-margin) 0; + + &:after { + content: ''; + display: block; + clear: both; + height: 1px; + } + + .field { + position: relative; + float: left; + margin: 0 0 (_size(element-margin) * 0.65) 0; + vertical-align: top; + width: 100%; + } + + .half { + width: calc(50% + #{_size(field-gutter) * 0.5}) !important; + padding-left: _size(field-gutter); + } + + .half.first { + width: calc(50% - #{_size(field-gutter) * 0.5}) !important; + padding-left: 0; + } + + :last-child { + margin-bottom: 0; + } + + .half:nth-last-child(2) { + margin-bottom: 0; + } + + .actions { + position: relative; + clear: both; + padding-top: (_size(element-margin) * 0.5); + } + + @include breakpoint(xsmall) { + .half { + width: 100% !important; + padding-left: 0; + } + + .half.first { + width: 100% !important; + padding-left: 0; + } + + .half:nth-last-child(2) { + margin: 0 0 (_size(element-margin) * 0.65) 0; + } + } + } + + label { + display: block; + font-size: 0.9em; + font-weight: _font(weight-bold); + margin: 0 0 (_size(element-margin) * 0.5) 0; + } + + input[type="text"], + input[type="password"], + input[type="email"], + input[type="tel"], + select, + textarea { + @include vendor('appearance', 'none'); + background-color: transparent; + border: none; + border-radius: 0; + border-bottom: solid _size(border-width) _palette(border); + color: inherit; + display: block; + outline: 0; + padding: 0; + text-decoration: none; + width: 100%; + + &:invalid { + box-shadow: none; + } + + &:focus { + border-bottom-color: _palette(accent1); + box-shadow: inset 0 -1px 0 0 _palette(accent1); + } + } + + .select-wrapper { + @include icon; + display: block; + position: relative; + + &:before { + color: _palette(border); + content: '\f078'; + display: block; + height: _size(element-height); + line-height: _size(element-height); + pointer-events: none; + position: absolute; + right: 0; + text-align: center; + top: 0; + width: _size(element-height); + } + + select::-ms-expand { + display: none; + } + } + + input[type="text"], + input[type="password"], + input[type="email"], + select { + height: _size(element-height); + } + + textarea { + padding: 0; + min-height: (_size(element-height) * 1.25); + } + + input[type="checkbox"], + input[type="radio"], { + @include vendor('appearance', 'none'); + display: block; + float: left; + margin-right: -2em; + opacity: 0; + width: 1em; + z-index: -1; + + & + label { + @include icon; + color: _palette(fg); + cursor: pointer; + display: inline-block; + font-size: 1em; + font-weight: _font(weight); + padding-left: (_size(element-height) * 0.6) + 0.75em; + padding-right: 0.75em; + position: relative; + + &:before { + border-radius: _size(border-radius); + border: solid _size(border-width) _palette(border); + content: ''; + display: inline-block; + height: (_size(element-height) * 0.6); + left: 0; + line-height: (_size(element-height) * 0.575); + position: absolute; + text-align: center; + top: 0; + width: (_size(element-height) * 0.6); + } + } + + &:checked + label { + &:before { + background: _palette(fg); + border-color: _palette(fg); + color: _palette(bg); + content: '\f00c'; + } + } + + &:focus + label { + &:before { + border-color: _palette(accent1); + box-shadow: 0 0 0 _size(border-width) _palette(accent1); + } + } + } + + input[type="checkbox"] { + & + label { + &:before { + border-radius: _size(border-radius); + } + } + } + + input[type="radio"] { + & + label { + &:before { + border-radius: 100%; + } + } + } \ No newline at end of file diff --git a/utils/test/reporting/3rd_party/sass/components/_icon.scss b/utils/test/reporting/3rd_party/sass/components/_icon.scss new file mode 100644 index 000000000..5b9a40ca6 --- /dev/null +++ b/utils/test/reporting/3rd_party/sass/components/_icon.scss @@ -0,0 +1,50 @@ +/// +/// Phantom by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Icon */ + + .icon { + @include icon; + border-bottom: none; + position: relative; + + > .label { + display: none; + } + + &.style1 { + } + + &.style2 { + @include vendor('transition', ( + 'background-color #{_duration(transition)} ease-in-out', + 'color #{_duration(transition)} ease-in-out', + 'border-color #{_duration(transition)} ease-in-out' + )); + background-color: transparent; + border: solid 1px _palette(border); + border-radius: _size(border-radius); + width: 2.65em; + height: 2.65em; + display: inline-block; + text-align: center; + line-height: 2.65em; + color: inherit; + + &:before { + font-size: 1.1em; + } + + &:hover { + color: _palette(accent1); + border-color: _palette(accent1); + } + + &:active { + background-color: transparentize(_palette(accent1), 0.9); + } + } + } \ No newline at end of file diff --git a/utils/test/reporting/3rd_party/sass/components/_image.scss b/utils/test/reporting/3rd_party/sass/components/_image.scss new file mode 100644 index 000000000..81ae7a372 --- /dev/null +++ b/utils/test/reporting/3rd_party/sass/components/_image.scss @@ -0,0 +1,64 @@ +/// +/// Phantom by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Image */ + + .image { + border-radius: _size(border-radius); + border: 0; + display: inline-block; + position: relative; + + img { + border-radius: _size(border-radius); + display: block; + } + + &.left, + &.right { + max-width: 40%; + + img { + width: 100%; + } + } + + &.left { + float: left; + padding: 0 1.5em 1em 0; + top: 0.25em; + } + + &.right { + float: right; + padding: 0 0 1em 1.5em; + top: 0.25em; + } + + &.fit { + display: block; + margin: 0 0 _size(element-margin) 0; + width: 100%; + + img { + width: 100%; + } + } + + &.main { + display: block; + margin: 0 0 (_size(element-margin) * 1.5) 0; + width: 100%; + + img { + width: 100%; + } + + @include breakpoint(small) { + margin: 0 0 _size(element-margin) 0; + } + } + } \ No newline at end of file diff --git a/utils/test/reporting/3rd_party/sass/components/_list.scss b/utils/test/reporting/3rd_party/sass/components/_list.scss new file mode 100644 index 000000000..9aadc22d1 --- /dev/null +++ b/utils/test/reporting/3rd_party/sass/components/_list.scss @@ -0,0 +1,177 @@ +/// +/// Phantom by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* List */ + + ol { + list-style: decimal; + margin: 0 0 _size(element-margin) 0; + padding-left: 1.25em; + + li { + padding-left: 0.25em; + } + } + + ul { + list-style: disc; + margin: 0 0 _size(element-margin) 0; + padding-left: 1em; + + li { + padding-left: 0.5em; + } + + &.alt { + list-style: none; + padding-left: 0; + + li { + border-top: solid _size(border-width) _palette(border); + padding: 0.5em 0; + + &:first-child { + border-top: 0; + padding-top: 0; + } + } + } + + &.icons { + cursor: default; + list-style: none; + padding-left: 0; + margin: -1em 0 _size(element-margin) -1em; + + li { + display: inline-block; + padding: 1em 0 0 1em; + } + } + + &.actions { + cursor: default; + list-style: none; + padding-left: 0; + + li { + display: inline-block; + padding: 0 (_size(element-margin) * 0.5) 0 0; + vertical-align: middle; + + &:last-child { + padding-right: 0; + } + } + + &.small { + li { + padding: 0 (_size(element-margin) * 0.25) 0 0; + } + } + + &.vertical { + li { + display: block; + padding: (_size(element-margin) * 0.5) 0 0 0; + + &:first-child { + padding-top: 0; + } + + > * { + margin-bottom: 0; + } + } + + &.small { + li { + padding: (_size(element-margin) * 0.25) 0 0 0; + + &:first-child { + padding-top: 0; + } + } + } + } + + &.fit { + display: table; + margin-left: (_size(element-margin) * -0.5); + padding: 0; + table-layout: fixed; + width: calc(100% + #{(_size(element-margin) * 0.5)}); + + li { + display: table-cell; + padding: 0 0 0 (_size(element-margin) * 0.5); + + > * { + margin-bottom: 0; + } + } + + &.small { + margin-left: (_size(element-margin) * -0.25); + width: calc(100% + #{(_size(element-margin) * 0.25)}); + + li { + padding: 0 0 0 (_size(element-margin) * 0.25); + } + } + } + + @include breakpoint(xsmall) { + margin: 0 0 _size(element-margin) 0; + + li { + padding: (_size(element-margin) * 0.5) 0 0 0; + display: block; + text-align: center; + width: 100%; + + &:first-child { + padding-top: 0; + } + + > * { + width: 100%; + margin: 0 !important; + + &.icon { + &:before { + margin-left: -2em; + } + } + } + } + + &.small { + li { + padding: (_size(element-margin) * 0.25) 0 0 0; + + &:first-child { + padding-top: 0; + } + } + } + } + } + } + + dl { + margin: 0 0 _size(element-margin) 0; + + dt { + display: block; + font-weight: _font(weight-bold); + margin: 0 0 (_size(element-margin) * 0.5) 0; + } + + dd { + margin-left: _size(element-margin); + } + } \ No newline at end of file diff --git a/utils/test/reporting/3rd_party/sass/components/_section.scss b/utils/test/reporting/3rd_party/sass/components/_section.scss new file mode 100644 index 000000000..5b1b02a5d --- /dev/null +++ b/utils/test/reporting/3rd_party/sass/components/_section.scss @@ -0,0 +1,25 @@ +/// +/// Phantom by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Section/Article */ + + section, article { + &.special { + text-align: center; + } + } + + header { + p { + margin-top: _size(element-margin) * -0.5; + } + + @include breakpoint(small) { + p { + margin-top: 0; + } + } + } \ No newline at end of file diff --git a/utils/test/reporting/3rd_party/sass/components/_table.scss b/utils/test/reporting/3rd_party/sass/components/_table.scss new file mode 100644 index 000000000..d6e872865 --- /dev/null +++ b/utils/test/reporting/3rd_party/sass/components/_table.scss @@ -0,0 +1,81 @@ +/// +/// Phantom by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Table */ + + .table-wrapper { + -webkit-overflow-scrolling: touch; + overflow-x: auto; + } + + table { + margin: 0 0 _size(element-margin) 0; + width: 100%; + + tbody { + tr { + border: solid _size(border-width) _palette(border); + border-left: 0; + border-right: 0; + + &:nth-child(2n + 1) { + background-color: _palette(border-bg); + } + } + } + + td { + padding: 0.75em 0.75em; + } + + th { + color: _palette(fg-bold); + font-size: 0.9em; + font-weight: _font(weight-bold); + padding: 0 0.75em 0.75em 0.75em; + text-align: left; + } + + thead { + border-bottom: solid (_size(border-width) * 2) _palette(border); + } + + tfoot { + border-top: solid (_size(border-width) * 2) _palette(border); + } + + &.alt { + border-collapse: separate; + + tbody { + tr { + td { + border: solid _size(border-width) _palette(border); + border-left-width: 0; + border-top-width: 0; + + &:first-child { + border-left-width: _size(border-width); + } + } + + &:first-child { + td { + border-top-width: _size(border-width); + } + } + } + } + + thead { + border-bottom: 0; + } + + tfoot { + border-top: 0; + } + } + } \ No newline at end of file diff --git a/utils/test/reporting/3rd_party/sass/components/_tiles.scss b/utils/test/reporting/3rd_party/sass/components/_tiles.scss new file mode 100644 index 000000000..cecbbbe8d --- /dev/null +++ b/utils/test/reporting/3rd_party/sass/components/_tiles.scss @@ -0,0 +1,258 @@ +/// +/// Phantom by HTML5 UP +/// html5up.net | @ajlkn +/// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license) +/// + +/* Tiles */ + + .tiles { + $gutter: _size(gutter); + $duration: 0.5s; + $ease: 'ease'; + + @include vendor('display', 'flex'); + @include vendor('flex-wrap', 'wrap'); + postiion: relative; + margin: ($gutter * -1) 0 0 ($gutter * -1); + + article { + @include vendor('transition', ( + 'transform #{$duration} #{$ease}', + 'opacity #{$duration} #{$ease}' + )); + position: relative; + width: calc(#{(100% / 3)} - #{$gutter * 1}); + margin: $gutter 0 0 $gutter; + + > .image { + @include vendor('transition', 'transform #{$duration} #{$ease}'); + position: relative; + display: block; + width: 100%; + border-radius: _size(border-radius); + overflow: hidden; + + img { + display: block; + width: 100%; + } + + &:before { + @include vendor('pointer-events', 'none'); + @include vendor('transition', ( + 'background-color #{$duration} #{$ease}', + 'opacity #{$duration} #{$ease}' + )); + content: ''; + display: block; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + opacity: 1.0; + z-index: 1; + opacity: 0.8; + } + + &:after { + @include vendor('pointer-events', 'none'); + @include vendor('transition', 'opacity #{$duration} #{$ease}'); + content: ''; + display: block; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-image: svg-url(''); + background-position: center; + background-repeat: no-repeat; + background-size: 100% 100%; + opacity: 0.25; + z-index: 2; + } + } + + > a { + @include vendor('display', 'flex'); + @include vendor('flex-direction', 'column'); + @include vendor('align-items', 'center'); + @include vendor('justify-content', 'center'); + @include vendor('transition', ( + 'background-color #{$duration} #{$ease}', + 'transform #{$duration} #{$ease}' + )); + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 1em; + border-radius: _size(border-radius); + border-bottom: 0; + color: _palette(fg-accent); + text-align: center; + text-decoration: none; + z-index: 3; + + > :last-child { + margin: 0; + } + + &:hover { + color: _palette(fg-accent) !important; + } + + h2 { + margin: 0; + } + + .content { + @include vendor('transition', ( + 'max-height #{$duration} #{$ease}', + 'opacity #{$duration} #{$ease}' + )); + width: 100%; + max-height: 0; + line-height: 1.5; + margin-top: 0.35em; + opacity: 0; + + > :last-child { + margin-bottom: 0; + } + } + } + + &.style1 { + > .image:before { + background-color: _palette(accent1); + } + } + + &.style2 { + > .image:before { + background-color: _palette(accent2); + } + } + + &.style3 { + > .image:before { + background-color: _palette(accent3); + } + } + + &.style4 { + > .image:before { + background-color: _palette(accent4); + } + } + + &.style5 { + > .image:before { + background-color: _palette(accent5); + } + } + + &.style6 { + > .image:before { + background-color: _palette(accent6); + } + } + + body:not(.is-touch) & { + &:hover { + > .image { + @include vendor('transform', 'scale(1.1)'); + + &:before { + background-color: _palette(bg-accent); + opacity: 0.35; + } + + &:after { + opacity: 0; + } + } + + .content { + max-height: 15em; + opacity: 1; + } + } + } + } + + * + & { + margin-top: _size(element-margin); + } + + body.is-loading & { + article { + @include vendor('transform', 'scale(0.9)'); + opacity: 0; + } + } + + body.is-touch & { + article { + .content { + max-height: 15em; + opacity: 1; + } + } + } + + @include breakpoint(large) { + $gutter: _size(gutter) * 0.5; + + margin: ($gutter * -1) 0 0 ($gutter * -1); + + article { + width: calc(#{(100% / 3)} - #{$gutter * 1}); + margin: $gutter 0 0 $gutter; + } + } + + @include breakpoint(medium) { + $gutter: _size(gutter); + + margin: ($gutter * -1) 0 0 ($gutter * -1); + + article { + width: calc(#{(100% / 2)} - #{$gutter * 1}); + margin: $gutter 0 0 $gutter; + } + } + + @include breakpoint(small) { + $gutter: _size(gutter) * 0.5; + + margin: ($gutter * -1) 0 0 ($gutter * -1); + + article { + width: calc(#{(100% / 2)} - #{$gutter * 1}); + margin: $gutter 0 0 $gutter; + + &:hover { + > .image { + @include vendor('transform', 'scale(1.0)'); + } + } + } + } + + @include breakpoint(xsmall) { + $gutter: _size(gutter) * 0.5; + + margin: 0; + + article { + width: 100%; + margin: $gutter 0 0 0; + } + } + } + -- cgit 1.2.3-korg