145 lines
3.2 KiB
SCSS
145 lines
3.2 KiB
SCSS
.app .skip-links {
|
|
@extend %skip-links;
|
|
}
|
|
.app .notifications {
|
|
@extend %app-notifications;
|
|
}
|
|
%app-notifications {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
position: fixed;
|
|
z-index: 50;
|
|
top: -45px;
|
|
left: 0;
|
|
|
|
pointer-events: none;
|
|
}
|
|
|
|
%app-notifications .app-notification > * {
|
|
min-width: 400px;
|
|
}
|
|
%app-notifications .app-notification {
|
|
@extend %with-transition-500;
|
|
transition-property: opacity;
|
|
width: fit-content;
|
|
max-width: 80%;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
[role='contentinfo'] {
|
|
@extend %footer;
|
|
}
|
|
[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;
|
|
}
|
|
%footer,
|
|
%main-nav-sidebar,
|
|
%main-notifications,
|
|
main {
|
|
@extend %transition-pushover;
|
|
}
|
|
%footer {
|
|
position: fixed;
|
|
z-index: 50;
|
|
|
|
color: rgb(var(--tone-gray-400));
|
|
font-size: var(--typo-size-800);
|
|
|
|
width: 250px;
|
|
padding-left: 25px;
|
|
}
|
|
%footer {
|
|
top: calc(100vh - 42px);
|
|
top: calc(max(100vh, 460px) - 42px);
|
|
}
|
|
html.has-partitions.has-nspaces .app [role='contentinfo'] {
|
|
top: calc(100vh - 42px);
|
|
top: calc(max(100vh, 640px) - 42px);
|
|
}
|
|
%main-nav-sidebar {
|
|
z-index: 10;
|
|
}
|
|
%footer,
|
|
%main-nav-sidebar {
|
|
transition-property: left;
|
|
}
|
|
%app-notifications,
|
|
main {
|
|
margin-top: var(--chrome-height, 64px);
|
|
transition-property: margin-left;
|
|
}
|
|
%app-notifications {
|
|
transition-property: margin-left, width;
|
|
}
|
|
|
|
@media #{$--sidebar-open} {
|
|
%main-nav-horizontal-toggle ~ main .notifications {
|
|
width: calc(100% - var(--chrome-width));
|
|
}
|
|
%main-nav-horizontal-toggle:checked ~ main .notifications {
|
|
width: 100%;
|
|
}
|
|
%main-nav-horizontal-toggle ~ footer,
|
|
%main-nav-horizontal-toggle + header > div > nav:first-of-type {
|
|
left: 0;
|
|
}
|
|
%main-nav-horizontal-toggle:checked ~ footer,
|
|
%main-nav-horizontal-toggle:checked + header > div > nav:first-of-type {
|
|
left: calc(var(--chrome-width, 300px) * -1);
|
|
}
|
|
%main-nav-horizontal-toggle ~ main .notifications,
|
|
%main-nav-horizontal-toggle ~ main {
|
|
margin-left: var(--chrome-width, 300px);
|
|
}
|
|
%main-nav-horizontal-toggle:checked ~ main .notifications,
|
|
%main-nav-horizontal-toggle:checked ~ main {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
@media #{$--lt-sidebar-open} {
|
|
%main-nav-horizontal-toggle ~ main .notifications {
|
|
width: 100%;
|
|
}
|
|
%main-nav-horizontal-toggle:checked ~ footer,
|
|
%main-nav-horizontal-toggle:checked + header > div > nav:first-of-type {
|
|
left: 0;
|
|
}
|
|
%main-nav-horizontal-toggle ~ footer,
|
|
%main-nav-horizontal-toggle + header > div > nav:first-of-type {
|
|
left: calc(var(--chrome-width, 300px) * -1);
|
|
}
|
|
%main-nav-horizontal-toggle ~ main .notifications,
|
|
%main-nav-horizontal-toggle ~ main {
|
|
margin-left: 0;
|
|
}
|
|
}
|