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
This commit is contained in:
John Cowen 2020-03-02 06:48:35 -05:00 committed by John Cowen
parent 6ec5c61ca6
commit 941fefb15c
25 changed files with 171 additions and 173 deletions

View File

@ -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;
}

View File

@ -82,3 +82,41 @@ main {
%app-view > div.disabled > div { %app-view > div.disabled > div {
margin-top: 0 !important; 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;
}
}

View File

@ -0,0 +1,7 @@
@import './brand-loader/index';
html body > svg {
display: none;
}
html.ember-loading body > svg {
@extend %brand-loader;
}

View File

@ -0,0 +1,2 @@
@import './skin';
@import './layout';

View File

@ -0,0 +1,10 @@
%brand-loader {
display: block;
}
%brand-loader {
position: absolute;
top: 50%;
margin-top: -26px;
left: 50%;
margin-left: -84px;
}

View File

@ -1,2 +1,5 @@
@import './card/index'; @import './card/index';
@import './discovery-chain/index'; @import './discovery-chain/index';
.discovery-chain {
@extend %discovery-chain;
}

View File

@ -1,6 +1,3 @@
.discovery-chain {
@extend %discovery-chain;
}
%discovery-chain .resolvers, %discovery-chain .resolvers,
%discovery-chain .splitters, %discovery-chain .splitters,
%discovery-chain .routes { %discovery-chain .routes {

View File

@ -0,0 +1,4 @@
@import './footer/index';
#wrapper > footer {
@extend %footer;
}

View File

@ -0,0 +1,2 @@
@import './skin';
@import './layout';

View File

@ -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 { %footer {
display: flex; display: flex;
justify-content: center; justify-content: center;

View File

@ -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;
}

View File

@ -8,14 +8,6 @@
@import './pill'; @import './pill';
@import './table'; @import './table';
@import './form-elements'; @import './form-elements';
@import './tabular-details';
@import './tabular-collection';
@import './list-collection';
@import './app-view';
@import './product';
@import './tooltip'; @import './tooltip';
@import './tag-list'; @import './tag-list';
@import './healthcheck-output'; @import './healthcheck-output';
@ -33,3 +25,16 @@
@import './notice'; @import './notice';
@import './sort-control'; @import './sort-control';
@import './discovery-chain'; @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';

View File

@ -0,0 +1,7 @@
@import './loader/index';
html.template-loading main > div {
@extend %loader;
}
%loader circle {
fill: $magenta-100;
}

View File

@ -0,0 +1,2 @@
@import './skin';
@import './layout';

View File

@ -0,0 +1,7 @@
/* blobs / %ui-loader ? */
%loader {
display: flex;
align-items: center;
justify-content: center;
height: calc(100vh - 90px - 48px - 50px);
}

View File

@ -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 { %loader circle {
animation: loader-animation 1.5s infinite ease-in-out; animation: loader-animation 1.5s infinite ease-in-out;
transform-origin: 50% 50%; transform-origin: 50% 50%;

View File

@ -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;
}
}

View File

@ -0,0 +1,2 @@
@import './skin.scss';
@import './layout.scss';

View File

@ -1,19 +1,5 @@
@import './loader'; @import './main-nav-horizontal/index';
@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;
}
%main-header-horizontal nav:first-of-type { %main-header-horizontal nav:first-of-type {
@extend %primary-nav; @extend %primary-nav;
} }
@ -24,6 +10,16 @@
%secondary-nav { %secondary-nav {
@extend %main-nav-horizontal; @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} { @media #{$--lt-horizontal-nav} {
%primary-nav { %primary-nav {
margin-top: 65px; margin-top: 65px;

View File

@ -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;
}
}

View File

@ -109,3 +109,9 @@ pre code,
%app-view h1 em { %app-view h1 em {
font-size: $typo-size-500; 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;
}
}

View File

@ -1,7 +1,7 @@
@import './custom-query'; @import './custom-query';
// TODO: Setup only the CSS props we actually need here // 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 // unused CSS props
:root { :root {
--white: #{$white}; --white: #{$white};
@ -10,8 +10,3 @@
--gray-500: #{$gray-500}; --gray-500: #{$gray-500};
--decor-elevation-600: #{$decor-elevation-600}; --decor-elevation-600: #{$decor-elevation-600};
} }
$gray: $gray-200;
$gray-025: #fafbfc;
$magenta-800-no-hash: 5a1434;