48 lines
1.1 KiB
SCSS
48 lines
1.1 KiB
SCSS
@mixin dashboardLayoutWidth(
|
|
$width: calc(100% - var(--pi-spacing-x-large)),
|
|
$max-width: calc(100% - var(--pi-spacing-x-large)),
|
|
$margin: var(--pi-height-header-mobile) auto 0
|
|
) {
|
|
.pi-layout {
|
|
&.pi-layout__01-dashboard {
|
|
width: $width;
|
|
max-width: $max-width;
|
|
margin: $margin;
|
|
}
|
|
}
|
|
}
|
|
|
|
.pi-layout {
|
|
&.pi-layout__01-dashboard {
|
|
display: grid;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
html {
|
|
// Maobile & Tablet
|
|
&:not(.is-desktop) {
|
|
// Small devices
|
|
@include dashboardLayoutWidth;
|
|
}
|
|
// Large device
|
|
&:not(.is-mobile) {
|
|
// Tablet L & Desktop S, M & L > 2400px
|
|
@media screen and (min-width: 62rem) and (max-width: 140rem) {
|
|
@include dashboardLayoutWidth(
|
|
calc(100% - var(--pi-spacing-x-large)),
|
|
calc(100% - var(--pi-spacing-x-large)),
|
|
unset
|
|
);
|
|
}
|
|
// X Large device
|
|
@media screen and (min-width: 140rem) {
|
|
@include dashboardLayoutWidth(
|
|
calc(100% - var(--pi-spacing-x-large) - var(--pi-width-aside) - var(--pi-spacing-x-large)),
|
|
calc(100% - var(--pi-spacing-x-large) - var(--pi-width-aside) - var(--pi-spacing-x-large)),
|
|
unset
|
|
);
|
|
}
|
|
}
|
|
}
|