consul/ui-v2/app/styles/components/product.scss

83 lines
1.6 KiB
SCSS

@import './product/index';
@import './filter-bar';
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;
}
@media #{$--lt-spacious-page-header} {
%app-view header .actions {
margin-top: 5px;
}
}
%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;
}
/*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-magnifier;
color: $ui-blue-500;
width: 20px;
height: 20px;
margin-left: 15px;
top: -3px;
}
#toolbar-toggle {
display: none;
}
@media #{$--horizontal-selects} {
[for='toolbar-toggle'] {
display: none;
}
}
@media #{$--lt-horizontal-selects} {
%app-view header h1 {
display: inline-block;
}
#toolbar-toggle + * {
display: none;
}
#toolbar-toggle:checked + * {
display: block;
}
}