mirror of https://github.com/status-im/consul.git
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
John Cowen
parent
2f28232df0
commit
a8de3f3081
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,7 @@
|
|||
@import './brand-loader/index';
|
||||
html body > svg {
|
||||
display: none;
|
||||
}
|
||||
html.ember-loading body > svg {
|
||||
@extend %brand-loader;
|
||||
}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
@import './skin';
|
||||
@import './layout';
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
%brand-loader {
|
||||
display: block;
|
||||
}
|
||||
%brand-loader {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
margin-top: -26px;
|
||||
left: 50%;
|
||||
margin-left: -84px;
|
||||
}
|
||||
|
|
@ -1,2 +1,5 @@
|
|||
@import './card/index';
|
||||
@import './discovery-chain/index';
|
||||
.discovery-chain {
|
||||
@extend %discovery-chain;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,3 @@
|
|||
.discovery-chain {
|
||||
@extend %discovery-chain;
|
||||
}
|
||||
%discovery-chain .resolvers,
|
||||
%discovery-chain .splitters,
|
||||
%discovery-chain .routes {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
@import './footer/index';
|
||||
#wrapper > footer {
|
||||
@extend %footer;
|
||||
}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
@import './skin';
|
||||
@import './layout';
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,7 @@
|
|||
@import './loader/index';
|
||||
html.template-loading main > div {
|
||||
@extend %loader;
|
||||
}
|
||||
%loader circle {
|
||||
fill: $magenta-100;
|
||||
}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
@import './skin';
|
||||
@import './layout';
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
/* blobs / %ui-loader ? */
|
||||
%loader {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: calc(100vh - 90px - 48px - 50px);
|
||||
}
|
||||
|
|
@ -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%;
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,2 @@
|
|||
@import './skin.scss';
|
||||
@import './layout.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;
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
Loading…
Reference in New Issue