165 lines
4.1 KiB
SCSS
165 lines
4.1 KiB
SCSS
.pi-shell__deale-saas {
|
|
& > div {
|
|
width: 100%;
|
|
|
|
// NOT Is fullscreen
|
|
&:not(.is-fullscreen) {
|
|
& > section {
|
|
position: fixed;
|
|
}
|
|
}
|
|
// Is fullscreen
|
|
&.is-fullscreen {
|
|
& > section {
|
|
left: 0;
|
|
width: 100%;
|
|
}
|
|
.pi-saas-header,
|
|
.pi-saas-navbar {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
html {
|
|
// Mobile & Tablet S
|
|
&:not(.is-desktop) {
|
|
// Tablet L
|
|
@media screen and (max-width: 62rem) {
|
|
.pi-shell__deale-saas {
|
|
& > div {
|
|
& > section {
|
|
width: 100%;
|
|
padding: 0;
|
|
}
|
|
// Footer logo
|
|
& > .pi-headline {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Tablet
|
|
&.is-tablet {
|
|
// Tablet L
|
|
@media screen and (min-width: 62rem) {
|
|
.pi-shell__deale-saas {
|
|
& > div {
|
|
& > section {
|
|
height: calc(
|
|
100vh - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)
|
|
);
|
|
}
|
|
// Not is fullscreen
|
|
&:not(.is-fullscreen) {
|
|
& > section {
|
|
left: calc(
|
|
var(--pi-width-navbar-collapsed) + var(--pi-spacing-x-large) +
|
|
var(--pi-spacing-x-large)
|
|
);
|
|
width: calc(
|
|
100% - var(--pi-width-navbar-collapsed) - var(
|
|
--pi-spacing-x-large
|
|
) - var(--pi-spacing-x-large) - var(--pi-spacing-xxx-small)
|
|
);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// Tablet & Desktop
|
|
&:not(.is-mobile) {
|
|
// Tablet L & Desktop
|
|
@media screen and (min-width: 62rem) {
|
|
.pi-shell__deale-saas {
|
|
& > div {
|
|
height: 100vh;
|
|
width: 100%;
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
// Not is fullscreen
|
|
&:not(.is-fullscreen) {
|
|
// Layout container
|
|
& > section {
|
|
top: var(--pi-spacing-x-large);
|
|
& > *:nth-child(1) {
|
|
padding-right: var(--pi-spacing-x-large);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Aside is open
|
|
&.aside-is-open {
|
|
& > .pi-headline {
|
|
transform: var(--pi-animation);
|
|
transform: translateX(0);
|
|
}
|
|
}
|
|
// Aside is closed
|
|
&.aside-is-closed {
|
|
& > .pi-headline {
|
|
transform: var(--pi-animation);
|
|
transform: translateX(
|
|
calc(var(--pi-width-aside) + var(--pi-spacing-x-large))
|
|
);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
// Desktop
|
|
&.is-desktop {
|
|
.pi-shell__deale-saas {
|
|
& > div {
|
|
// Not is fullscreen
|
|
&:not(.is-fullscreen) {
|
|
// Layout container
|
|
& > section {
|
|
height: calc(
|
|
100vh - var(--pi-spacing-x-large) - var(--pi-spacing-x-large)
|
|
);
|
|
transition: var(--pi-animation);
|
|
& > *:nth-child(1) {
|
|
padding-right: var(--pi-spacing-x-large);
|
|
}
|
|
}
|
|
// Navbar is expanded
|
|
&.navbar-is-expanded {
|
|
& > section {
|
|
left: calc(
|
|
var(--pi-width-navbar-expanded) + var(--pi-spacing-xx-large) +
|
|
var(--pi-spacing-x-large)
|
|
);
|
|
|
|
width: calc(
|
|
100% - var(--pi-width-navbar-expanded) - var(
|
|
--pi-spacing-x-large
|
|
) - var(--pi-spacing-xx-large) - var(--pi-spacing-xxxx-small)
|
|
);
|
|
}
|
|
}
|
|
// Navbar is collapsed
|
|
&.navbar-is-collapsed {
|
|
& > section {
|
|
left: calc(
|
|
var(--pi-width-navbar-collapsed) + var(--pi-spacing-xx-large) +
|
|
var(--pi-spacing-x-large)
|
|
);
|
|
width: calc(
|
|
100% - var(--pi-width-navbar-collapsed) - var(
|
|
--pi-spacing-x-large
|
|
) - var(--pi-spacing-xx-large) - var(--pi-spacing-xxxx-small)
|
|
);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|