From a8de3f308186ba1afa527472afd67892e8ff7b70 Mon Sep 17 00:00:00 2001 From: John Cowen Date: Mon, 2 Mar 2020 06:48:35 -0500 Subject: [PATCH] ui: Split out product css component into its separate elements (#7342) * Remove old %action-group * Remove old variables we no longer need * Use the discovery-chain component in the same manner as others * Split `product` out into its separate components --- ui-v2/app/styles/components/action-group.scss | 13 --- ui-v2/app/styles/components/app-view.scss | 38 ++++++++ ui-v2/app/styles/components/brand-loader.scss | 7 ++ .../styles/components/brand-loader/index.scss | 2 + .../components/brand-loader/layout.scss | 10 +++ .../styles/components/brand-loader/skin.scss | 0 .../styles/components/discovery-chain.scss | 3 + .../components/discovery-chain/layout.scss | 3 - ui-v2/app/styles/components/footer.scss | 4 + ui-v2/app/styles/components/footer/index.scss | 2 + .../footer.scss => footer/layout.scss} | 22 ----- ui-v2/app/styles/components/footer/skin.scss | 25 ++++++ ui-v2/app/styles/components/index.scss | 21 +++-- ui-v2/app/styles/components/loader.scss | 7 ++ ui-v2/app/styles/components/loader/index.scss | 2 + .../app/styles/components/loader/layout.scss | 7 ++ .../{product/loader.scss => loader/skin.scss} | 18 ---- .../components/main-header-horizontal.scss | 30 +++++++ .../main-header-horizontal/index.scss | 2 + .../layout.scss} | 0 .../main-header-horizontal/skin.scss | 0 .../index.scss => main-nav-horizontal.scss} | 28 +++--- ui-v2/app/styles/components/product.scss | 87 ------------------- ui-v2/app/styles/core/typography.scss | 6 ++ ui-v2/app/styles/variables/index.scss | 7 +- 25 files changed, 171 insertions(+), 173 deletions(-) delete mode 100644 ui-v2/app/styles/components/action-group.scss create mode 100644 ui-v2/app/styles/components/brand-loader.scss create mode 100644 ui-v2/app/styles/components/brand-loader/index.scss create mode 100644 ui-v2/app/styles/components/brand-loader/layout.scss create mode 100644 ui-v2/app/styles/components/brand-loader/skin.scss create mode 100644 ui-v2/app/styles/components/footer.scss create mode 100644 ui-v2/app/styles/components/footer/index.scss rename ui-v2/app/styles/components/{product/footer.scss => footer/layout.scss} (55%) create mode 100644 ui-v2/app/styles/components/footer/skin.scss create mode 100644 ui-v2/app/styles/components/loader.scss create mode 100644 ui-v2/app/styles/components/loader/index.scss create mode 100644 ui-v2/app/styles/components/loader/layout.scss rename ui-v2/app/styles/components/{product/loader.scss => loader/skin.scss} (61%) create mode 100644 ui-v2/app/styles/components/main-header-horizontal.scss create mode 100644 ui-v2/app/styles/components/main-header-horizontal/index.scss rename ui-v2/app/styles/components/{product/main-header-horizontal.scss => main-header-horizontal/layout.scss} (100%) create mode 100644 ui-v2/app/styles/components/main-header-horizontal/skin.scss rename ui-v2/app/styles/components/{product/index.scss => main-nav-horizontal.scss} (79%) delete mode 100644 ui-v2/app/styles/components/product.scss diff --git a/ui-v2/app/styles/components/action-group.scss b/ui-v2/app/styles/components/action-group.scss deleted file mode 100644 index c9d6fee84f..0000000000 --- a/ui-v2/app/styles/components/action-group.scss +++ /dev/null @@ -1,13 +0,0 @@ -@import '../base/components/action-group/index'; -.action-group { - @extend %action-group; -} -/* This needs to go into table */ -%action-group { - position: absolute; - top: 8px; - right: 15px; -} -%action-group .type-delete { - @extend %internal-button-dangerous; -} diff --git a/ui-v2/app/styles/components/app-view.scss b/ui-v2/app/styles/components/app-view.scss index 3e45ed58b4..fb5ff2ec61 100644 --- a/ui-v2/app/styles/components/app-view.scss +++ b/ui-v2/app/styles/components/app-view.scss @@ -82,3 +82,41 @@ main { %app-view > div.disabled > div { margin-top: 0 !important; } + +/* toggleable toolbar for short screens */ +[for='toolbar-toggle'] { + @extend %with-search-color-icon; + background-position: 0 4px; + display: inline-block; + width: 26px; + height: 26px; + cursor: pointer; + color: $blue-500; +} +#toolbar-toggle { + display: none; +} +@media #{$--horizontal-selects} { + [for='toolbar-toggle'] { + display: none; + } +} +// reduced search magnifying icon layout +@media #{$--lt-horizontal-selects} { + %app-view header h1 { + display: inline-block; + } + %app-view header h1 { + display: inline-block; + } + // on the instance detail page we don't have the magnifier + html.template-instance.template-show h1 { + display: block; + } + #toolbar-toggle + * { + display: none; + } + #toolbar-toggle:checked + * { + display: block; + } +} diff --git a/ui-v2/app/styles/components/brand-loader.scss b/ui-v2/app/styles/components/brand-loader.scss new file mode 100644 index 0000000000..c248b9cc18 --- /dev/null +++ b/ui-v2/app/styles/components/brand-loader.scss @@ -0,0 +1,7 @@ +@import './brand-loader/index'; +html body > svg { + display: none; +} +html.ember-loading body > svg { + @extend %brand-loader; +} diff --git a/ui-v2/app/styles/components/brand-loader/index.scss b/ui-v2/app/styles/components/brand-loader/index.scss new file mode 100644 index 0000000000..bc18252196 --- /dev/null +++ b/ui-v2/app/styles/components/brand-loader/index.scss @@ -0,0 +1,2 @@ +@import './skin'; +@import './layout'; diff --git a/ui-v2/app/styles/components/brand-loader/layout.scss b/ui-v2/app/styles/components/brand-loader/layout.scss new file mode 100644 index 0000000000..1fe3cc5096 --- /dev/null +++ b/ui-v2/app/styles/components/brand-loader/layout.scss @@ -0,0 +1,10 @@ +%brand-loader { + display: block; +} +%brand-loader { + position: absolute; + top: 50%; + margin-top: -26px; + left: 50%; + margin-left: -84px; +} diff --git a/ui-v2/app/styles/components/brand-loader/skin.scss b/ui-v2/app/styles/components/brand-loader/skin.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/ui-v2/app/styles/components/discovery-chain.scss b/ui-v2/app/styles/components/discovery-chain.scss index 972fb8720a..00f507d709 100644 --- a/ui-v2/app/styles/components/discovery-chain.scss +++ b/ui-v2/app/styles/components/discovery-chain.scss @@ -1,2 +1,5 @@ @import './card/index'; @import './discovery-chain/index'; +.discovery-chain { + @extend %discovery-chain; +} diff --git a/ui-v2/app/styles/components/discovery-chain/layout.scss b/ui-v2/app/styles/components/discovery-chain/layout.scss index 0beb5548b0..96449c8a17 100644 --- a/ui-v2/app/styles/components/discovery-chain/layout.scss +++ b/ui-v2/app/styles/components/discovery-chain/layout.scss @@ -1,6 +1,3 @@ -.discovery-chain { - @extend %discovery-chain; -} %discovery-chain .resolvers, %discovery-chain .splitters, %discovery-chain .routes { diff --git a/ui-v2/app/styles/components/footer.scss b/ui-v2/app/styles/components/footer.scss new file mode 100644 index 0000000000..5b52981207 --- /dev/null +++ b/ui-v2/app/styles/components/footer.scss @@ -0,0 +1,4 @@ +@import './footer/index'; +#wrapper > footer { + @extend %footer; +} diff --git a/ui-v2/app/styles/components/footer/index.scss b/ui-v2/app/styles/components/footer/index.scss new file mode 100644 index 0000000000..bc18252196 --- /dev/null +++ b/ui-v2/app/styles/components/footer/index.scss @@ -0,0 +1,2 @@ +@import './skin'; +@import './layout'; diff --git a/ui-v2/app/styles/components/product/footer.scss b/ui-v2/app/styles/components/footer/layout.scss similarity index 55% rename from ui-v2/app/styles/components/product/footer.scss rename to ui-v2/app/styles/components/footer/layout.scss index 50750abe73..681af2a3a0 100644 --- a/ui-v2/app/styles/components/product/footer.scss +++ b/ui-v2/app/styles/components/footer/layout.scss @@ -1,25 +1,3 @@ -%footer > a:first-child { - position: relative; -} -%footer > a:first-child::before { - @extend %with-hashicorp-logo-mask, %as-pseudo; - background-color: $gray-400; - font-size: 1.4em; - position: absolute; - top: 50%; - margin-top: -0.7em; - left: -25px; -} -%footer { - border-top: $decor-border-100; -} -%footer { - border-color: $gray-200; - background-color: $white; -} -%footer > * { - color: $gray-400; -} %footer { display: flex; justify-content: center; diff --git a/ui-v2/app/styles/components/footer/skin.scss b/ui-v2/app/styles/components/footer/skin.scss new file mode 100644 index 0000000000..c27b02f8e0 --- /dev/null +++ b/ui-v2/app/styles/components/footer/skin.scss @@ -0,0 +1,25 @@ +/* This layout is to do with the logo */ +%footer > a:first-child { + position: relative; +} +%footer > a:first-child::before { + position: absolute; + top: 50%; + margin-top: -0.7em; + left: -25px; +} +%footer > a:first-child::before { + @extend %with-hashicorp-logo-mask, %as-pseudo; + background-color: $gray-400; + font-size: 1.4em; +} +%footer { + border-top: $decor-border-100; +} +%footer { + border-color: $gray-200; + background-color: $white; +} +%footer > * { + color: $gray-400; +} diff --git a/ui-v2/app/styles/components/index.scss b/ui-v2/app/styles/components/index.scss index a22ddb6498..982942ba99 100644 --- a/ui-v2/app/styles/components/index.scss +++ b/ui-v2/app/styles/components/index.scss @@ -8,14 +8,6 @@ @import './pill'; @import './table'; @import './form-elements'; - -@import './tabular-details'; -@import './tabular-collection'; -@import './list-collection'; - -@import './app-view'; -@import './product'; - @import './tooltip'; @import './tag-list'; @import './healthcheck-output'; @@ -33,3 +25,16 @@ @import './notice'; @import './sort-control'; @import './discovery-chain'; + +@import './tabular-details'; +@import './tabular-collection'; +@import './list-collection'; + +/**/ + +@import './brand-loader'; +@import './loader'; +@import './main-header-horizontal'; +@import './main-nav-horizontal'; +@import './app-view'; +@import './footer'; diff --git a/ui-v2/app/styles/components/loader.scss b/ui-v2/app/styles/components/loader.scss new file mode 100644 index 0000000000..c8c2a72a37 --- /dev/null +++ b/ui-v2/app/styles/components/loader.scss @@ -0,0 +1,7 @@ +@import './loader/index'; +html.template-loading main > div { + @extend %loader; +} +%loader circle { + fill: $magenta-100; +} diff --git a/ui-v2/app/styles/components/loader/index.scss b/ui-v2/app/styles/components/loader/index.scss new file mode 100644 index 0000000000..bc18252196 --- /dev/null +++ b/ui-v2/app/styles/components/loader/index.scss @@ -0,0 +1,2 @@ +@import './skin'; +@import './layout'; diff --git a/ui-v2/app/styles/components/loader/layout.scss b/ui-v2/app/styles/components/loader/layout.scss new file mode 100644 index 0000000000..f682b2decc --- /dev/null +++ b/ui-v2/app/styles/components/loader/layout.scss @@ -0,0 +1,7 @@ +/* blobs / %ui-loader ? */ +%loader { + display: flex; + align-items: center; + justify-content: center; + height: calc(100vh - 90px - 48px - 50px); +} diff --git a/ui-v2/app/styles/components/product/loader.scss b/ui-v2/app/styles/components/loader/skin.scss similarity index 61% rename from ui-v2/app/styles/components/product/loader.scss rename to ui-v2/app/styles/components/loader/skin.scss index 4fcf0252b1..373882d1ff 100644 --- a/ui-v2/app/styles/components/product/loader.scss +++ b/ui-v2/app/styles/components/loader/skin.scss @@ -1,21 +1,3 @@ -/* logo */ -%brand-loader { - display: block; -} -%brand-loader { - position: absolute; - top: 50%; - margin-top: -26px; - left: 50%; - margin-left: -84px; -} -/* blobs / %ui-loader ? */ -%loader { - display: flex; - align-items: center; - justify-content: center; - height: calc(100vh - 90px - 48px - 50px); -} %loader circle { animation: loader-animation 1.5s infinite ease-in-out; transform-origin: 50% 50%; diff --git a/ui-v2/app/styles/components/main-header-horizontal.scss b/ui-v2/app/styles/components/main-header-horizontal.scss new file mode 100644 index 0000000000..6c35cc0a69 --- /dev/null +++ b/ui-v2/app/styles/components/main-header-horizontal.scss @@ -0,0 +1,30 @@ +@import './main-header-horizontal/index'; +[role='banner'] { + @extend %main-header-horizontal; +} +%main-nav-horizontal .docs-link a::after { + @extend %with-learn-icon, %as-pseudo; +} +%main-nav-horizontal .learn-link a::after { + @extend %with-docs-icon, %as-pseudo; +} +%main-nav-horizontal .feedback-link a::after { + @extend %with-logo-github-monochrome-icon, %as-pseudo; +} +%main-header-horizontal::before { + background-color: $magenta-600; +} +%main-nav-horizontal-action, +%main-nav-horizontal-toggle-button { + color: $magenta-050; +} +@media #{$--lt-horizontal-nav} { + %main-nav-horizontal-panel { + background-color: $magenta-600; + } +} +@media #{$--horizontal-nav} { + %main-nav-horizontal-action-active { + background-color: $magenta-800; + } +} diff --git a/ui-v2/app/styles/components/main-header-horizontal/index.scss b/ui-v2/app/styles/components/main-header-horizontal/index.scss new file mode 100644 index 0000000000..07dc13fdcb --- /dev/null +++ b/ui-v2/app/styles/components/main-header-horizontal/index.scss @@ -0,0 +1,2 @@ +@import './skin.scss'; +@import './layout.scss'; diff --git a/ui-v2/app/styles/components/product/main-header-horizontal.scss b/ui-v2/app/styles/components/main-header-horizontal/layout.scss similarity index 100% rename from ui-v2/app/styles/components/product/main-header-horizontal.scss rename to ui-v2/app/styles/components/main-header-horizontal/layout.scss diff --git a/ui-v2/app/styles/components/main-header-horizontal/skin.scss b/ui-v2/app/styles/components/main-header-horizontal/skin.scss new file mode 100644 index 0000000000..e69de29bb2 diff --git a/ui-v2/app/styles/components/product/index.scss b/ui-v2/app/styles/components/main-nav-horizontal.scss similarity index 79% rename from ui-v2/app/styles/components/product/index.scss rename to ui-v2/app/styles/components/main-nav-horizontal.scss index ae9742d37b..ef8e69e3e1 100644 --- a/ui-v2/app/styles/components/product/index.scss +++ b/ui-v2/app/styles/components/main-nav-horizontal.scss @@ -1,19 +1,5 @@ -@import './loader'; -@import './main-header-horizontal'; -@import '../main-nav-horizontal/index'; -@import './footer'; -[role='banner'] { - @extend %main-header-horizontal; -} -%main-header-horizontal > div { - @extend %main-nav-horizontal-panel; -} -%main-header-horizontal label[for='main-nav-toggle'] { - @extend %main-nav-horizontal-toggle-button; -} -%main-header-horizontal > input { - @extend %main-nav-horizontal-toggle; -} +@import './main-nav-horizontal/index'; + %main-header-horizontal nav:first-of-type { @extend %primary-nav; } @@ -24,6 +10,16 @@ %secondary-nav { @extend %main-nav-horizontal; } + +%main-header-horizontal > div { + @extend %main-nav-horizontal-panel; +} +%main-header-horizontal label[for='main-nav-toggle'] { + @extend %main-nav-horizontal-toggle-button; +} +%main-header-horizontal > input { + @extend %main-nav-horizontal-toggle; +} @media #{$--lt-horizontal-nav} { %primary-nav { margin-top: 65px; diff --git a/ui-v2/app/styles/components/product.scss b/ui-v2/app/styles/components/product.scss deleted file mode 100644 index f047be48d7..0000000000 --- a/ui-v2/app/styles/components/product.scss +++ /dev/null @@ -1,87 +0,0 @@ -@import './product/index'; -@import './filter-bar'; -html body > svg { - display: none; -} -%main-nav-horizontal .docs-link a::after { - @extend %with-learn-icon, %as-pseudo; -} - -%main-nav-horizontal .learn-link a::after { - @extend %with-docs-icon, %as-pseudo; -} -%main-nav-horizontal .feedback-link a::after { - @extend %with-logo-github-monochrome-icon, %as-pseudo; -} -html.ember-loading body > svg { - @extend %brand-loader; -} -html.template-loading main > div { - @extend %loader; -} -%loader circle { - fill: $magenta-100; -} -%main-header-horizontal::before { - background-color: $magenta-600; -} -%main-nav-horizontal-action, -%main-nav-horizontal-toggle-button { - color: $magenta-050; -} -@media #{$--lt-horizontal-nav} { - %main-nav-horizontal-panel { - background-color: $magenta-600; - } -} -@media #{$--horizontal-nav} { - %main-nav-horizontal-action-active { - background-color: $magenta-800; - } -} -#wrapper > footer { - @extend %footer; -} -/*TODO: This should go in reset, and probably needs select etc adding */ -@media (max-width: 420px) and (-webkit-min-device-pixel-ratio: 0) { - input { - font-size: 16px !important; - } -} -/* toggleable toolbar for short screens */ -[for='toolbar-toggle'] { - @extend %with-search-color-icon; - background-position: 0 4px; - display: inline-block; - width: 26px; - height: 26px; - cursor: pointer; - color: $blue-500; -} -#toolbar-toggle { - display: none; -} -@media #{$--horizontal-selects} { - [for='toolbar-toggle'] { - display: none; - } -} -// reduced search magnifying icon layout -@media #{$--lt-horizontal-selects} { - %app-view header h1 { - display: inline-block; - } - %app-view header h1 { - display: inline-block; - } - // on the instance detail page we don't have the magnifier - html.template-instance.template-show h1 { - display: block; - } - #toolbar-toggle + * { - display: none; - } - #toolbar-toggle:checked + * { - display: block; - } -} diff --git a/ui-v2/app/styles/core/typography.scss b/ui-v2/app/styles/core/typography.scss index 5b2791fb74..6c2029d262 100644 --- a/ui-v2/app/styles/core/typography.scss +++ b/ui-v2/app/styles/core/typography.scss @@ -109,3 +109,9 @@ pre code, %app-view h1 em { font-size: $typo-size-500; } +/*TODO: This should go in reset, and probably needs select etc adding */ +@media (max-width: 420px) and (-webkit-min-device-pixel-ratio: 0) { + input { + font-size: 16px !important; + } +} diff --git a/ui-v2/app/styles/variables/index.scss b/ui-v2/app/styles/variables/index.scss index 1d71f3793a..d15df7c46d 100644 --- a/ui-v2/app/styles/variables/index.scss +++ b/ui-v2/app/styles/variables/index.scss @@ -1,7 +1,7 @@ @import './custom-query'; // TODO: Setup only the CSS props we actually need here -// potentially see if our compiled can automatically remove +// potentially see if our compiler can automatically remove // unused CSS props :root { --white: #{$white}; @@ -10,8 +10,3 @@ --gray-500: #{$gray-500}; --decor-elevation-600: #{$decor-elevation-600}; } - -$gray: $gray-200; -$gray-025: #fafbfc; - -$magenta-800-no-hash: 5a1434;