6fa3034dd6
Upgrade all patch and minor upgradeable packages, also uses `only` in ember-cli-build to reduce the included helpers from certain helper packages. Make some major version upgrades for some dev tools - husky - lint-staged - ember-cli-yadda - ember-cli-sass (also moved from node-sass to dart-sass) Minor tweak: spotted css file (instead of scss file), rename The move to `dart-sass`: dart-sass has been the primary implementation of sass for ~6 months and will receive updates earlier than libsass (ruby-sass itself is now deprecated) Other benefits include not having to recompile (via `npm rebuild` or similar) when switching platforms and an 'almost' javascript based solution. This update also alters some media queries that, whilst wouldn't compile anymore with either an updated libsass or dart-sass, where probably a little over complicated anyway, I've therefore made them similar to other breakpoints that made sense.
83 lines
1.6 KiB
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;
|
|
}
|
|
}
|