mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2024-11-18 15:13:21 +08:00
115 lines
2.9 KiB
SCSS
115 lines
2.9 KiB
SCSS
body {
|
|
min-width: 1140px;
|
|
}
|
|
|
|
body.navigator-collapsed {
|
|
min-width: 900px;
|
|
}
|
|
|
|
.sci--layout {
|
|
--breadcrumbs-navigation-height: 44px;
|
|
--left-navigation-width: 192px;
|
|
--navbar-height: calc(var(--top-navigation-height) + var(--breadcrumbs-navigation-height));
|
|
--navigator-navigation-width: 240px;
|
|
--title-row-height: 4em;
|
|
--top-navigation-height: 72px;
|
|
display: grid;
|
|
grid-template-areas: "left top top"
|
|
"left breadcrumbs breadcrumbs"
|
|
"left navigator content";
|
|
grid-template-columns: var(--left-navigation-width)
|
|
var(--navigator-navigation-width)
|
|
calc(100% - var(--left-navigation-width) - var(--navigator-navigation-width));
|
|
grid-template-rows: var(--top-navigation-height)
|
|
var(--breadcrumbs-navigation-height)
|
|
calc(100% - var(--top-navigation-height) - var(--breadcrumbs-navigation-height));
|
|
height: 100%;
|
|
position: relative;
|
|
transition: .4s $timing-function-sharp;
|
|
width: 100%;
|
|
|
|
.sci--layout--navigator-open {
|
|
display: none;
|
|
}
|
|
|
|
&[data-breadcrumbs-collapsed="true"] {
|
|
--breadcrumbs-navigation-height: 0px;
|
|
}
|
|
|
|
&[data-navigator-collapsed="true"] {
|
|
--navigator-navigation-width: 0px;
|
|
|
|
.sci--layout--navigator-open {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
&[data-left-navigation-collapsed="true"] {
|
|
--left-navigation-width: 0px;
|
|
}
|
|
|
|
.sci--layout-navigation-top {
|
|
grid-area: top;
|
|
height: var(--top-navigation-height);
|
|
width: 100%;
|
|
z-index: 610;
|
|
}
|
|
|
|
.sci--layout-navigation-left {
|
|
grid-area: left;
|
|
height: 100vh;
|
|
position: sticky;
|
|
position: -webkit-sticky;
|
|
top: 0;
|
|
width: var(--left-navigation-width);
|
|
z-index: 600;
|
|
}
|
|
|
|
.sci--layout-navigation-navigator {
|
|
--navigator-top-margin: 0px;
|
|
background-color: var(--sn-white);
|
|
grid-area: navigator;
|
|
height: calc(100vh - var(--navbar-height) - 1rem - var(--navigator-top-margin));
|
|
position: sticky;
|
|
position: -webkit-sticky;
|
|
top: 1rem;
|
|
transition: width .4s $timing-function-sharp;
|
|
width: var(--navigator-navigation-width);
|
|
z-index: 550;
|
|
}
|
|
|
|
.sci--layout-navigation-breadcrumbs {
|
|
background-color: var(--sn-white);
|
|
grid-area: breadcrumbs;
|
|
height: var(--breadcrumbs-navigation-height);
|
|
transition: .4s $timing-function-sharp;
|
|
width: 100%;
|
|
z-index: 600;
|
|
}
|
|
|
|
.sci--layout-content {
|
|
background-color: var(--sn-white);
|
|
grid-area: content;
|
|
padding: 0 1.5rem;
|
|
width: 100%;
|
|
|
|
.container-fluid {
|
|
padding: 1em; // override bootstrap and old pages support
|
|
}
|
|
}
|
|
|
|
&[data-grey-background="true"] {
|
|
background-color: var(--sn-super-light-grey);
|
|
|
|
.sci--layout-content,
|
|
.sci--layout-navigation-breadcrumbs,
|
|
.sci--layout-navigation-navigator {
|
|
background-color: var(--sn-super-light-grey);
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
.w-98 {
|
|
width: 98%;
|
|
}
|