mirror of
https://github.com/status-im/consul.git
synced 2025-02-11 13:17:36 +00:00
e3f9a0f8ee
* ui: Loader amends/improvements 1. Create a JS compatible template only 'glimmer' component so we can use it with or without glimmer. 2. Add a set of `rose` colors. 3. Animate the brand loader to keep it centered when the side navigation appears. 4. Tweak the color of Consul::Loader to use a 'rose' color. 5. Move everything loader related to the `app/components/` folder and add docs.
77 lines
1.8 KiB
SCSS
77 lines
1.8 KiB
SCSS
.app .skip-links {
|
|
@extend %skip-links;
|
|
}
|
|
[role='banner'] {
|
|
@extend %main-header-horizontal;
|
|
}
|
|
[role="banner"] > label {
|
|
@extend %main-nav-horizontal-toggle-button;
|
|
}
|
|
.app > input[id] {
|
|
@extend %main-nav-horizontal-toggle;
|
|
}
|
|
%main-header-horizontal > div {
|
|
@extend %main-nav-horizontal-panel;
|
|
}
|
|
|
|
%main-header-horizontal nav:first-of-type {
|
|
@extend %main-nav-vertical, %main-nav-sidebar;
|
|
}
|
|
%main-header-horizontal nav:last-of-type {
|
|
@extend %main-nav-horizontal;
|
|
margin-left: auto;
|
|
}
|
|
%main-nav-vertical-hoisted {
|
|
top: 11px;
|
|
}
|
|
%main-nav-vertical-hoisted > .popover-menu > label > button {
|
|
@extend %main-nav-horizontal-action;
|
|
border: none;
|
|
}
|
|
%main-nav-vertical-hoisted.is-active > label > * {
|
|
@extend %main-nav-horizontal-action-active;
|
|
}
|
|
%main-nav-sidebar,
|
|
main {
|
|
@extend %transition-pushover;
|
|
}
|
|
%main-nav-sidebar {
|
|
transition-property: left;
|
|
z-index: 10;
|
|
}
|
|
main {
|
|
margin-top: var(--chrome-height, 64px);
|
|
transition-property: margin-left;
|
|
}
|
|
|
|
|
|
@media #{$--sidebar-open} {
|
|
%main-nav-horizontal-toggle + header > div > nav:first-of-type {
|
|
left: 0;
|
|
}
|
|
%main-nav-horizontal-toggle:checked + header > div > nav:first-of-type {
|
|
left: calc(var(--chrome-width, 300px) * -1);
|
|
}
|
|
%main-nav-horizontal-toggle ~ main,
|
|
%main-nav-horizontal-toggle ~ footer {
|
|
margin-left: var(--chrome-width, 300px);
|
|
}
|
|
%main-nav-horizontal-toggle:checked ~ main,
|
|
%main-nav-horizontal-toggle:checked ~ footer {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
@media #{$--lt-sidebar-open} {
|
|
%main-nav-horizontal-toggle:checked + header > div > nav:first-of-type {
|
|
left: 0;
|
|
}
|
|
%main-nav-horizontal-toggle + header > div > nav:first-of-type {
|
|
left: calc(var(--chrome-width, 300px) * -1);
|
|
}
|
|
%main-nav-horizontal-toggle ~ main,
|
|
%main-nav-horizontal-toggle ~ footer {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|