517 lines
14 KiB
SCSS
517 lines
14 KiB
SCSS
// 2 cols
|
|
@mixin gridWrapper2Columns($columns: 1) {
|
|
.pi-wrapper {
|
|
&.pi-wrapper__grid {
|
|
// 3
|
|
&.pi-wrapper__grid--columns-2 {
|
|
grid-template-columns: repeat(#{$columns}, 1fr);
|
|
// NOT Is Responsive
|
|
&:not(.is-responsive) {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin gridWrapperColmnsWidths {
|
|
.pi-wrapper {
|
|
&.pi-wrapper__grid {
|
|
&.pi-wrapper__grid--columns-2 {
|
|
// 2 / 3
|
|
&.pi-wrapper__grid--two-thirds {
|
|
grid-template-columns: 2fr 1fr;
|
|
}
|
|
// 1 / 2
|
|
&.pi-wrapper__grid--half {
|
|
grid-template-columns: repeat(1, 1fr);
|
|
}
|
|
// 1 / 3
|
|
&.pi-wrapper__grid--third {
|
|
grid-template-columns: 1fr 2fr;
|
|
}
|
|
// 1 / 4
|
|
&.pi-wrapper__grid--quarter {
|
|
grid-template-columns: 1fr 3fr;
|
|
}
|
|
// 1 / 5
|
|
&.pi-wrapper__grid--fifth {
|
|
grid-template-columns: 1fr 4fr;
|
|
}
|
|
// 1 / 6
|
|
&.pi-wrapper__grid--sixth {
|
|
grid-template-columns: 1fr 5fr;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.pi-wrapper {
|
|
// Grid directive
|
|
&.pi-wrapper__grid {
|
|
display: grid;
|
|
// Align items
|
|
&.pi-wrapper__align-items--start {
|
|
align-items: start;
|
|
}
|
|
&.pi-wrapper__align-items--center {
|
|
align-items: center;
|
|
}
|
|
&.pi-wrapper__align-items--end {
|
|
align-items: end;
|
|
}
|
|
// Align self
|
|
&.pi-wrapper__align-self--start {
|
|
align-self: start;
|
|
}
|
|
&.pi-wrapper__align-self--center {
|
|
align-self: center;
|
|
}
|
|
&.pi-wrapper__align-self--end {
|
|
align-self: end;
|
|
}
|
|
// Grid Half
|
|
&.pi-wrapper__grid--half {
|
|
grid-gap: var(--pi-spacing-x-large);
|
|
// Fill
|
|
&.pi-wrapper__fill--fit-content {
|
|
width: fit-content;
|
|
}
|
|
&.pi-wrapper__fill--fill-available {
|
|
width: -webkit-fill-available;
|
|
}
|
|
|
|
// Mobile
|
|
@media screen and (max-width: 40rem) {
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: repeat(2, 1fr);
|
|
}
|
|
// Tablet & Dektop
|
|
@media screen and (min-width: 40rem) {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
// Grid Four
|
|
&.pi-wrapper__grid--four {
|
|
justify-items: center;
|
|
&.pi-wrapper__fill--fill-available {
|
|
width: -webkit-fill-available;
|
|
& > *:nth-child(n + 1) {
|
|
width: -webkit-fill-available;
|
|
}
|
|
}
|
|
// Mobile
|
|
@media screen and (max-width: 40rem) {
|
|
grid-template-columns: 1fr;
|
|
grid-template-rows: repeat(2, 1fr);
|
|
}
|
|
&:not(.is-responsive) {
|
|
// Tablet & Desktop
|
|
@media screen and (min-width: 40rem) {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
}
|
|
|
|
&.is-responsive {
|
|
// Tablet
|
|
@media screen and (min-width: 40rem) and (max-width: 77.5rem) {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
// Desktop
|
|
@media screen and (min-width: 77.5rem) {
|
|
grid-template-columns: repeat(4, 1fr);
|
|
}
|
|
}
|
|
// Gap
|
|
&.pi-wrapper__gap-l {
|
|
grid-gap: var(--pi-spacing-large);
|
|
}
|
|
&.pi-wrapper__gap-x-l {
|
|
grid-gap: var(--pi-spacing-x-large);
|
|
}
|
|
&.pi-wrapper__gap-xx-l {
|
|
grid-gap: var(--pi-spacing-xx-large);
|
|
}
|
|
&.pi-wrapper__gap-xxx-l {
|
|
grid-gap: var(--pi-spacing-xxx-large);
|
|
}
|
|
&.pi-wrapper__gap-xxxx-l {
|
|
grid-gap: var(--pi-spacing-xxxx-large);
|
|
}
|
|
|
|
& > *:nth-child(1) {
|
|
grid-area: item1;
|
|
}
|
|
& > *:nth-child(2) {
|
|
grid-area: item2;
|
|
}
|
|
& > *:nth-child(3) {
|
|
grid-area: item3;
|
|
}
|
|
& > *:nth-child(4) {
|
|
grid-area: item4;
|
|
}
|
|
|
|
// 1fr 1fr
|
|
// 1fr 1fr
|
|
&.pi-wrapper__grid--four-1-1-1-1 {
|
|
// Mobile
|
|
@media screen and (max-width: 40rem) {
|
|
grid-template-areas:
|
|
'item1'
|
|
'item2'
|
|
'item3'
|
|
'item4';
|
|
}
|
|
|
|
&:not(.is-responsive) {
|
|
// Tablet & Desktop
|
|
@media screen and (min-width: 40rem) {
|
|
grid-template-areas:
|
|
'item1 item2'
|
|
'item3 item4';
|
|
}
|
|
}
|
|
&.is-responsive {
|
|
// Tablet
|
|
@media screen and (min-width: 40rem) and (max-width: 77.5rem) {
|
|
grid-template-areas:
|
|
'item1 item2'
|
|
'item3 item4';
|
|
}
|
|
// Desktop
|
|
@media screen and (min-width: 77.5rem) {
|
|
grid-template-areas: 'item1 item2 item3 item4';
|
|
}
|
|
}
|
|
}
|
|
// . 1fr
|
|
// 1fr 1fr
|
|
&.pi-wrapper__grid--four-0-1-1-1 {
|
|
// Mobile
|
|
@media screen and (max-width: 40rem) {
|
|
grid-template-areas:
|
|
'.'
|
|
'item1'
|
|
'item2'
|
|
'item3';
|
|
}
|
|
|
|
&:not(.is-responsive) {
|
|
// Tablet & Desktop
|
|
@media screen and (min-width: 40rem) {
|
|
grid-template-areas:
|
|
'. item1'
|
|
'item2 item3';
|
|
}
|
|
}
|
|
&.is-responsive {
|
|
// Tablet
|
|
@media screen and (min-width: 40rem) and (max-width: 77.5rem) {
|
|
grid-template-areas:
|
|
'. item1'
|
|
'item2 item3';
|
|
}
|
|
// Desktop
|
|
@media screen and (min-width: 77.5rem) {
|
|
grid-template-areas: '. item1 item2 item3';
|
|
}
|
|
}
|
|
}
|
|
// 1fr .
|
|
// 1fr 1fr
|
|
&.pi-wrapper__grid--four-1-0-1-1 {
|
|
// Mobile
|
|
@media screen and (max-width: 40rem) {
|
|
grid-template-areas:
|
|
'item1'
|
|
'.'
|
|
'item2'
|
|
'item3';
|
|
}
|
|
|
|
&:not(.is-responsive) {
|
|
// Tablet & Desktop
|
|
@media screen and (min-width: 40rem) {
|
|
grid-template-areas:
|
|
'item1 .'
|
|
'item2 item3';
|
|
}
|
|
}
|
|
&.is-responsive {
|
|
// Tablet
|
|
@media screen and (min-width: 40rem) and (max-width: 77.5rem) {
|
|
grid-template-areas:
|
|
'item1 .'
|
|
'item2 item3';
|
|
}
|
|
// Desktop
|
|
@media screen and (min-width: 77.5rem) {
|
|
grid-template-areas: 'item1 . item2 item3';
|
|
}
|
|
}
|
|
}
|
|
// 1fr 1fr
|
|
// . 1fr
|
|
&.pi-wrapper__grid--four-1-1-0-1 {
|
|
// Mobile
|
|
@media screen and (max-width: 40rem) {
|
|
grid-template-areas:
|
|
'item1'
|
|
'item2'
|
|
'.'
|
|
'item3';
|
|
}
|
|
|
|
&:not(.is-responsive) {
|
|
// Tablet & Desktop
|
|
@media screen and (min-width: 40rem) {
|
|
grid-template-areas:
|
|
'item1 item2'
|
|
'. item3';
|
|
}
|
|
}
|
|
&.is-responsive {
|
|
// Tablet
|
|
@media screen and (min-width: 40rem) and (max-width: 77.5rem) {
|
|
grid-template-areas:
|
|
'item1 item2'
|
|
'. item3';
|
|
}
|
|
// Desktop
|
|
@media screen and (min-width: 77.5rem) {
|
|
grid-template-areas: 'item1 item2 . item3';
|
|
}
|
|
}
|
|
}
|
|
// 1fr 1fr
|
|
// 1fr .
|
|
&.pi-wrapper__grid--four-1-1-1-0 {
|
|
// Mobile
|
|
@media screen and (max-width: 40rem) {
|
|
grid-template-areas:
|
|
'item1'
|
|
'item2'
|
|
'item3'
|
|
'.';
|
|
}
|
|
|
|
&:not(.is-responsive) {
|
|
// Tablet & Desktop
|
|
@media screen and (min-width: 40rem) {
|
|
grid-template-areas:
|
|
'item1 item2'
|
|
'item3 .';
|
|
}
|
|
}
|
|
&.is-responsive {
|
|
// Tablet
|
|
@media screen and (min-width: 40rem) and (max-width: 77.5rem) {
|
|
grid-template-areas:
|
|
'item1 item2'
|
|
'item3 .';
|
|
}
|
|
// Desktop
|
|
@media screen and (min-width: 77.5rem) {
|
|
grid-template-areas: 'item1 item2 item3 .';
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&.pi-wrapper__max-width--full-width {
|
|
// Desktop S
|
|
@media screen and (min-width: 77.5rem) and (max-width: 90rem) {
|
|
max-width: var(--pi-website-width-container-s);
|
|
}
|
|
// Desktop M
|
|
@media screen and (min-width: 90rem) and (max-width: 120rem) {
|
|
max-width: var(--pi-website-width-container);
|
|
}
|
|
// Desktop L
|
|
@media screen and (min-width: 120rem) {
|
|
max-width: var(--pi-website-width-container-l);
|
|
}
|
|
}
|
|
|
|
&.pi-wrapper__fill--fill-available {
|
|
width: -webkit-fill-available;
|
|
}
|
|
|
|
// 3
|
|
&.pi-wrapper__grid--columns-3 {
|
|
// Is Responsive
|
|
&.is-responsive {
|
|
// Mobile S
|
|
@media screen and (max-width: 62rem) {
|
|
grid-template-columns: repeat(1, 1fr);
|
|
}
|
|
// Tablet & Desktop S
|
|
@media screen and (min-width: 62rem) and (max-width: 77.5rem) {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
// Tablet & Desktop
|
|
@media screen and (min-width: 77.5rem) {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
}
|
|
// NOT Is Responsive
|
|
&:not(.is-responsive) {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
}
|
|
// 4
|
|
&.pi-wrapper__grid--columns-4 {
|
|
// Is Responsive
|
|
&.is-responsive {
|
|
// Mobile
|
|
@media screen and (max-width: 40rem) {
|
|
grid-template-columns: repeat(1, 1fr);
|
|
}
|
|
// Tablet S
|
|
@media screen and (min-width: 40rem) and (max-width: 62rem) {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
// Tablet L
|
|
@media screen and (min-width: 62rem) and (min-width: 77.5rem) {
|
|
grid-template-columns: repeat(4, 1fr);
|
|
}
|
|
// Desktop
|
|
@media screen and (min-width: 77.5rem) {
|
|
width: 25%;
|
|
}
|
|
}
|
|
// NOT Is Responsive
|
|
&:not(.is-responsive) {
|
|
grid-template-columns: repeat(4, 1fr);
|
|
}
|
|
}
|
|
// 5
|
|
&.pi-wrapper__grid--columns-5 {
|
|
// Is Responsive
|
|
&.is-responsive {
|
|
// Mobile
|
|
@media screen and (max-width: 40rem) {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
// Tablet S
|
|
@media screen and (min-width: 40rem) and (max-width: 62rem) {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
// Tablet L & Desktop
|
|
@media screen and (min-width: 62rem) {
|
|
grid-template-columns: repeat(5, 1fr);
|
|
}
|
|
}
|
|
// NOT Is Responsive
|
|
&:not(.is-responsive) {
|
|
grid-template-columns: repeat(5, 1fr);
|
|
}
|
|
}
|
|
// 6
|
|
&.pi-wrapper__grid--columns-6 {
|
|
// Is Responsive
|
|
&.is-responsive {
|
|
// Mobile
|
|
@media screen and (max-width: 40rem) {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
// Tablet
|
|
@media screen and (min-width: 40rem) and (max-width: 77.5rem) {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
// Desktop
|
|
@media screen and (min-width: 77.5rem) {
|
|
grid-template-columns: repeat(6, 1fr);
|
|
}
|
|
}
|
|
// NOT Is Responsive
|
|
&:not(.is-responsive) {
|
|
grid-template-columns: repeat(6, 1fr);
|
|
}
|
|
}
|
|
// 7
|
|
&.pi-wrapper__grid--columns-7 {
|
|
// Is Responsive
|
|
&.is-responsive {
|
|
// Mobile
|
|
@media screen and (max-width: 40rem) {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
// Tablet S
|
|
@media screen and (min-width: 40rem) and (max-width: 62rem) {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
// Tablet L & Desktop
|
|
@media screen and (min-width: 62rem) and (max-width: 77.5rem) {
|
|
grid-template-columns: repeat(4, 1fr);
|
|
}
|
|
// Tablet L & Desktop
|
|
@media screen and (min-width: 77.5rem) {
|
|
grid-template-columns: repeat(7, 1fr);
|
|
}
|
|
}
|
|
// NOT Is Responsive
|
|
&:not(.is-responsive) {
|
|
grid-template-columns: repeat(7, 1fr);
|
|
}
|
|
}
|
|
// 8
|
|
&.pi-wrapper__grid--columns-8 {
|
|
// Is Responsive
|
|
&.is-responsive {
|
|
// Mobile
|
|
@media screen and (max-width: 40rem) {
|
|
grid-template-columns: repeat(2, 1fr);
|
|
}
|
|
// Tablet S
|
|
@media screen and (min-width: 40rem) and (max-width: 62rem) {
|
|
grid-template-columns: repeat(4, 1fr);
|
|
}
|
|
// Tablet L & Desktop
|
|
@media screen and (min-width: 62rem) and (max-width: 77.5rem) {
|
|
grid-template-columns: repeat(6, 1fr);
|
|
}
|
|
// Tablet L & Desktop
|
|
@media screen and (min-width: 77.5rem) {
|
|
grid-template-columns: repeat(8, 1fr);
|
|
}
|
|
}
|
|
// NOT Is Responsive
|
|
&:not(.is-responsive) {
|
|
grid-template-columns: repeat(8, 1fr);
|
|
}
|
|
}
|
|
// Justify
|
|
// Center
|
|
&.pi-wrapper__justify-items--center {
|
|
justify-items: center;
|
|
}
|
|
// End
|
|
&.pi-wrapper__justify-items--end {
|
|
justify-items: end;
|
|
}
|
|
}
|
|
}
|
|
|
|
html {
|
|
// Mobile & Tablet
|
|
&:not(.is-desktop) {
|
|
// Small device
|
|
@media screen and (max-width: 62rem) {
|
|
// 2 cols
|
|
@include gridWrapper2Columns;
|
|
}
|
|
}
|
|
|
|
// Tablet & Desktop
|
|
&:not(.is-mobile) {
|
|
// Large device
|
|
@media screen and (min-width: 62rem) {
|
|
// 2 cols
|
|
@include gridWrapper2Columns(2);
|
|
@include gridWrapperColmnsWidths;
|
|
}
|
|
}
|
|
}
|