chore: copia de libs/shared con prefijo Pi y APIs de terceros actualizadas
This commit is contained in:
516
libs/ui/src/lib/styles/common/wrappers/_pi-grid-wrapper.scss
Normal file
516
libs/ui/src/lib/styles/common/wrappers/_pi-grid-wrapper.scss
Normal file
@@ -0,0 +1,516 @@
|
||||
// 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user