mirror of https://github.com/hashicorp/consul
77 lines
1.5 KiB
SCSS
77 lines
1.5 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;
|
|
}
|
|
%loader circle {
|
|
fill: $magenta-100;
|
|
}
|
|
%main-header::before {
|
|
background-color: $magenta-600;
|
|
}
|
|
%header-nav a,
|
|
%header-nav-toggle-button {
|
|
color: $magenta-050;
|
|
}
|
|
@media #{$--lt-horizontal-nav} {
|
|
%header-nav-panel {
|
|
background-color: $magenta-600;
|
|
}
|
|
}
|
|
@media #{$--horizontal-nav} {
|
|
%header-nav > ul > li:not(:first-child).is-active > a {
|
|
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-magnifier;
|
|
color: $blue-500;
|
|
width: 20px;
|
|
height: 20px;
|
|
margin-left: 15px;
|
|
top: -3px;
|
|
}
|
|
#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;
|
|
}
|
|
}
|