luxolus
/
open-consul
2
0
Fork 0
Code Issues 1 Pull Requests Packages Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
ui-v2/app/styles/components/action-group.scss
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;
}

38
ui-v2/app/styles/components/app-view.scss
View File

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

7
ui-v2/app/styles/components/brand-loader.scss Normal file
View File

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

2
ui-v2/app/styles/components/brand-loader/index.scss Normal file
View File

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

10
ui-v2/app/styles/components/brand-loader/layout.scss Normal file
View File

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

0
ui-v2/app/styles/components/brand-loader/skin.scss Normal file
View File

3
ui-v2/app/styles/components/discovery-chain.scss
View File

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

3
ui-v2/app/styles/components/discovery-chain/layout.scss
View File

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

4
ui-v2/app/styles/components/footer.scss Normal file
View File

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

2
ui-v2/app/styles/components/footer/index.scss Normal file
View File

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

22
ui-v2/app/styles/components/product/footer.scss → ui-v2/app/styles/components/footer/layout.scss
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 {
display: flex;
justify-content: center;

25
ui-v2/app/styles/components/footer/skin.scss Normal file
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;
}

21
ui-v2/app/styles/components/index.scss
View File

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

7
ui-v2/app/styles/components/loader.scss Normal file
View File

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

2
ui-v2/app/styles/components/loader/index.scss Normal file
View File

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

7
ui-v2/app/styles/components/loader/layout.scss Normal file
View File

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

18
ui-v2/app/styles/components/product/loader.scss → ui-v2/app/styles/components/loader/skin.scss
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 {
animation: loader-animation 1.5s infinite ease-in-out;
transform-origin: 50% 50%;

30
ui-v2/app/styles/components/main-header-horizontal.scss Normal file
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;
}
}

2
ui-v2/app/styles/components/main-header-horizontal/index.scss Normal file
View File

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

0
ui-v2/app/styles/components/product/main-header-horizontal.scss → ui-v2/app/styles/components/main-header-horizontal/layout.scss
View File

0
ui-v2/app/styles/components/main-header-horizontal/skin.scss Normal file
View File

28
ui-v2/app/styles/components/product/index.scss → ui-v2/app/styles/components/main-nav-horizontal.scss
View File

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

87
ui-v2/app/styles/components/product.scss
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;
}
}

6
ui-v2/app/styles/core/typography.scss
View File

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

7
ui-v2/app/styles/variables/index.scss
View File

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