open-consul/ui-v2/app/styles/components/product.scss
John Cowen c7d89f364d
UI: CSS refactor (#4430) + Fullscreen Layout (#4435)
* Begin refactoring CSS into component folders. Moved most
components into layout/skin folders, left out a couple of ones I want
to think about more.
* Adjust grays based on recent Structure changes 
* Switch to fullscreen layout for lists and detail, left aligned forms (#4435)
* Specifically use the 'actions_close' label, not just the :last-child (actions-group)
* Replace some non-var-ed colours in vaults code skin, plus prefixing (black and white)
2018-08-29 12:11:58 +01:00

52 lines
972 B
SCSS

@import './product/index';
@import './filter-bar';
@import './form-elements/index';
html body > svg {
display: none;
}
html.ember-loading body > svg {
@extend %brand-loader;
}
html.template-loading main > div {
@extend %loader;
}
main {
@extend %app-view;
}
%app-view > div > div {
@extend %app-content;
}
%app-view header form {
@extend %filter-bar;
}
%app-content .type-text,
%app-content .type-toggle {
@extend %form-element;
}
%app-content [role='radiogroup'] {
@extend %radio-group;
}
%loader circle {
fill: $brand-magenta-100;
}
%main-header::before {
background-color: $brand-magenta-600;
}
%header-nav a,
%header-nav-toggle-button {
color: $brand-magenta-050;
}
@media #{$--lt-horizontal-nav} {
%header-nav-panel {
background-color: $brand-magenta-600;
}
}
@media #{$--horizontal-nav} {
%header-nav > ul > li:not(:first-child).is-active > a {
background-color: $brand-magenta-800;
}
}
#wrapper > footer {
@extend %footer;
}