gouttières de Grillade
This commit is contained in:
Raphaël Goetter
parent
ad3b8c2081
commit
b9f1adc09a
4 changed files with 358 additions and 468 deletions
File diff suppressed because one or more lines are too long
|
|
@ -4263,6 +4263,26 @@ template {
|
|||
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.grid-cols-2 {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.grid-cols-3 {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.grid-cols-4 {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.grid-cols-5 {
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.grid-cols-6 {
|
||||
grid-template-columns: repeat(6, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.sm\:grid-cols-1 {
|
||||
grid-template-columns: repeat(1, minmax(0, 1fr));
|
||||
|
|
@ -4281,10 +4301,6 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
.grid-cols-2 {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.sm\:grid-cols-2 {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
|
|
@ -4303,10 +4319,6 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
.grid-cols-3 {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.sm\:grid-cols-3 {
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
|
|
@ -4325,10 +4337,6 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
.grid-cols-4 {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.sm\:grid-cols-4 {
|
||||
grid-template-columns: repeat(4, minmax(0, 1fr));
|
||||
|
|
@ -4347,10 +4355,6 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
.grid-cols-5 {
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.sm\:grid-cols-5 {
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||
|
|
@ -4369,10 +4373,6 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
.grid-cols-6 {
|
||||
grid-template-columns: repeat(6, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.sm\:grid-cols-6 {
|
||||
grid-template-columns: repeat(6, minmax(0, 1fr));
|
||||
|
|
@ -4404,6 +4404,78 @@ template {
|
|||
row-gap: 0;
|
||||
}
|
||||
|
||||
.gap-10 {
|
||||
gap: 0.625rem;
|
||||
}
|
||||
|
||||
.gap-x-10 {
|
||||
column-gap: 0.625rem;
|
||||
}
|
||||
|
||||
.gap-y-10 {
|
||||
row-gap: 0.625rem;
|
||||
}
|
||||
|
||||
.gap-16 {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.gap-x-16 {
|
||||
column-gap: 1rem;
|
||||
}
|
||||
|
||||
.gap-y-16 {
|
||||
row-gap: 1rem;
|
||||
}
|
||||
|
||||
.gap-20 {
|
||||
gap: 1.25rem;
|
||||
}
|
||||
|
||||
.gap-x-20 {
|
||||
column-gap: 1.25rem;
|
||||
}
|
||||
|
||||
.gap-y-20 {
|
||||
row-gap: 1.25rem;
|
||||
}
|
||||
|
||||
.gap-30 {
|
||||
gap: 1.875rem;
|
||||
}
|
||||
|
||||
.gap-x-30 {
|
||||
column-gap: 1.875rem;
|
||||
}
|
||||
|
||||
.gap-y-30 {
|
||||
row-gap: 1.875rem;
|
||||
}
|
||||
|
||||
.gap-50 {
|
||||
gap: 3.125rem;
|
||||
}
|
||||
|
||||
.gap-x-50 {
|
||||
column-gap: 3.125rem;
|
||||
}
|
||||
|
||||
.gap-y-50 {
|
||||
row-gap: 3.125rem;
|
||||
}
|
||||
|
||||
.gap-100 {
|
||||
gap: 6.25rem;
|
||||
}
|
||||
|
||||
.gap-x-100 {
|
||||
column-gap: 6.25rem;
|
||||
}
|
||||
|
||||
.gap-y-100 {
|
||||
row-gap: 6.25rem;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.sm\:gap-0 {
|
||||
gap: 0;
|
||||
|
|
@ -4440,387 +4512,219 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
.gap-1 {
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.gap-x-1 {
|
||||
column-gap: 0.5rem;
|
||||
}
|
||||
|
||||
.gap-y-1 {
|
||||
row-gap: 0.5rem;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.sm\:gap-1 {
|
||||
gap: 0.5rem;
|
||||
.sm\:gap-10 {
|
||||
gap: 0.625rem;
|
||||
}
|
||||
.sm\:gap-x-1 {
|
||||
column-gap: 0.5rem;
|
||||
.sm\:gap-x-10 {
|
||||
column-gap: 0.625rem;
|
||||
}
|
||||
.sm\:gap-y-1 {
|
||||
row-gap: 0.5rem;
|
||||
.sm\:gap-y-10 {
|
||||
row-gap: 0.625rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.md\:gap-1 {
|
||||
gap: 0.5rem;
|
||||
.md\:gap-10 {
|
||||
gap: 0.625rem;
|
||||
}
|
||||
.md\:gap-x-1 {
|
||||
column-gap: 0.5rem;
|
||||
.md\:gap-x-10 {
|
||||
column-gap: 0.625rem;
|
||||
}
|
||||
.md\:gap-y-1 {
|
||||
row-gap: 0.5rem;
|
||||
.md\:gap-y-10 {
|
||||
row-gap: 0.625rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
.lg\:gap-1 {
|
||||
gap: 0.5rem;
|
||||
.lg\:gap-10 {
|
||||
gap: 0.625rem;
|
||||
}
|
||||
.lg\:gap-x-1 {
|
||||
column-gap: 0.5rem;
|
||||
.lg\:gap-x-10 {
|
||||
column-gap: 0.625rem;
|
||||
}
|
||||
.lg\:gap-y-1 {
|
||||
row-gap: 0.5rem;
|
||||
.lg\:gap-y-10 {
|
||||
row-gap: 0.625rem;
|
||||
}
|
||||
}
|
||||
|
||||
.gap-2 {
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
.gap-x-2 {
|
||||
column-gap: 0.75rem;
|
||||
}
|
||||
|
||||
.gap-y-2 {
|
||||
row-gap: 0.75rem;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.sm\:gap-2 {
|
||||
gap: 0.75rem;
|
||||
}
|
||||
.sm\:gap-x-2 {
|
||||
column-gap: 0.75rem;
|
||||
}
|
||||
.sm\:gap-y-2 {
|
||||
row-gap: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.md\:gap-2 {
|
||||
gap: 0.75rem;
|
||||
}
|
||||
.md\:gap-x-2 {
|
||||
column-gap: 0.75rem;
|
||||
}
|
||||
.md\:gap-y-2 {
|
||||
row-gap: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
.lg\:gap-2 {
|
||||
gap: 0.75rem;
|
||||
}
|
||||
.lg\:gap-x-2 {
|
||||
column-gap: 0.75rem;
|
||||
}
|
||||
.lg\:gap-y-2 {
|
||||
row-gap: 0.75rem;
|
||||
}
|
||||
}
|
||||
|
||||
.gap-3 {
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.gap-x-3 {
|
||||
column-gap: 1rem;
|
||||
}
|
||||
|
||||
.gap-y-3 {
|
||||
row-gap: 1rem;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.sm\:gap-3 {
|
||||
.sm\:gap-16 {
|
||||
gap: 1rem;
|
||||
}
|
||||
.sm\:gap-x-3 {
|
||||
.sm\:gap-x-16 {
|
||||
column-gap: 1rem;
|
||||
}
|
||||
.sm\:gap-y-3 {
|
||||
.sm\:gap-y-16 {
|
||||
row-gap: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.md\:gap-3 {
|
||||
.md\:gap-16 {
|
||||
gap: 1rem;
|
||||
}
|
||||
.md\:gap-x-3 {
|
||||
.md\:gap-x-16 {
|
||||
column-gap: 1rem;
|
||||
}
|
||||
.md\:gap-y-3 {
|
||||
.md\:gap-y-16 {
|
||||
row-gap: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
.lg\:gap-3 {
|
||||
.lg\:gap-16 {
|
||||
gap: 1rem;
|
||||
}
|
||||
.lg\:gap-x-3 {
|
||||
.lg\:gap-x-16 {
|
||||
column-gap: 1rem;
|
||||
}
|
||||
.lg\:gap-y-3 {
|
||||
.lg\:gap-y-16 {
|
||||
row-gap: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.gap-4 {
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.gap-x-4 {
|
||||
column-gap: 1.5rem;
|
||||
}
|
||||
|
||||
.gap-y-4 {
|
||||
row-gap: 1.5rem;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.sm\:gap-4 {
|
||||
gap: 1.5rem;
|
||||
.sm\:gap-20 {
|
||||
gap: 1.25rem;
|
||||
}
|
||||
.sm\:gap-x-4 {
|
||||
column-gap: 1.5rem;
|
||||
.sm\:gap-x-20 {
|
||||
column-gap: 1.25rem;
|
||||
}
|
||||
.sm\:gap-y-4 {
|
||||
row-gap: 1.5rem;
|
||||
.sm\:gap-y-20 {
|
||||
row-gap: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.md\:gap-4 {
|
||||
gap: 1.5rem;
|
||||
.md\:gap-20 {
|
||||
gap: 1.25rem;
|
||||
}
|
||||
.md\:gap-x-4 {
|
||||
column-gap: 1.5rem;
|
||||
.md\:gap-x-20 {
|
||||
column-gap: 1.25rem;
|
||||
}
|
||||
.md\:gap-y-4 {
|
||||
row-gap: 1.5rem;
|
||||
.md\:gap-y-20 {
|
||||
row-gap: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
.lg\:gap-4 {
|
||||
gap: 1.5rem;
|
||||
.lg\:gap-20 {
|
||||
gap: 1.25rem;
|
||||
}
|
||||
.lg\:gap-x-4 {
|
||||
column-gap: 1.5rem;
|
||||
.lg\:gap-x-20 {
|
||||
column-gap: 1.25rem;
|
||||
}
|
||||
.lg\:gap-y-4 {
|
||||
row-gap: 1.5rem;
|
||||
.lg\:gap-y-20 {
|
||||
row-gap: 1.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.gap-5 {
|
||||
gap: 2rem;
|
||||
}
|
||||
|
||||
.gap-x-5 {
|
||||
column-gap: 2rem;
|
||||
}
|
||||
|
||||
.gap-y-5 {
|
||||
row-gap: 2rem;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.sm\:gap-5 {
|
||||
gap: 2rem;
|
||||
.sm\:gap-30 {
|
||||
gap: 1.875rem;
|
||||
}
|
||||
.sm\:gap-x-5 {
|
||||
column-gap: 2rem;
|
||||
.sm\:gap-x-30 {
|
||||
column-gap: 1.875rem;
|
||||
}
|
||||
.sm\:gap-y-5 {
|
||||
row-gap: 2rem;
|
||||
.sm\:gap-y-30 {
|
||||
row-gap: 1.875rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.md\:gap-5 {
|
||||
gap: 2rem;
|
||||
.md\:gap-30 {
|
||||
gap: 1.875rem;
|
||||
}
|
||||
.md\:gap-x-5 {
|
||||
column-gap: 2rem;
|
||||
.md\:gap-x-30 {
|
||||
column-gap: 1.875rem;
|
||||
}
|
||||
.md\:gap-y-5 {
|
||||
row-gap: 2rem;
|
||||
.md\:gap-y-30 {
|
||||
row-gap: 1.875rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
.lg\:gap-5 {
|
||||
gap: 2rem;
|
||||
.lg\:gap-30 {
|
||||
gap: 1.875rem;
|
||||
}
|
||||
.lg\:gap-x-5 {
|
||||
column-gap: 2rem;
|
||||
.lg\:gap-x-30 {
|
||||
column-gap: 1.875rem;
|
||||
}
|
||||
.lg\:gap-y-5 {
|
||||
row-gap: 2rem;
|
||||
.lg\:gap-y-30 {
|
||||
row-gap: 1.875rem;
|
||||
}
|
||||
}
|
||||
|
||||
.gap-6 {
|
||||
gap: 3rem;
|
||||
}
|
||||
|
||||
.gap-x-6 {
|
||||
column-gap: 3rem;
|
||||
}
|
||||
|
||||
.gap-y-6 {
|
||||
row-gap: 3rem;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.sm\:gap-6 {
|
||||
gap: 3rem;
|
||||
.sm\:gap-50 {
|
||||
gap: 3.125rem;
|
||||
}
|
||||
.sm\:gap-x-6 {
|
||||
column-gap: 3rem;
|
||||
.sm\:gap-x-50 {
|
||||
column-gap: 3.125rem;
|
||||
}
|
||||
.sm\:gap-y-6 {
|
||||
row-gap: 3rem;
|
||||
.sm\:gap-y-50 {
|
||||
row-gap: 3.125rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.md\:gap-6 {
|
||||
gap: 3rem;
|
||||
.md\:gap-50 {
|
||||
gap: 3.125rem;
|
||||
}
|
||||
.md\:gap-x-6 {
|
||||
column-gap: 3rem;
|
||||
.md\:gap-x-50 {
|
||||
column-gap: 3.125rem;
|
||||
}
|
||||
.md\:gap-y-6 {
|
||||
row-gap: 3rem;
|
||||
.md\:gap-y-50 {
|
||||
row-gap: 3.125rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
.lg\:gap-6 {
|
||||
gap: 3rem;
|
||||
.lg\:gap-50 {
|
||||
gap: 3.125rem;
|
||||
}
|
||||
.lg\:gap-x-6 {
|
||||
column-gap: 3rem;
|
||||
.lg\:gap-x-50 {
|
||||
column-gap: 3.125rem;
|
||||
}
|
||||
.lg\:gap-y-6 {
|
||||
row-gap: 3rem;
|
||||
.lg\:gap-y-50 {
|
||||
row-gap: 3.125rem;
|
||||
}
|
||||
}
|
||||
|
||||
.gap-7 {
|
||||
gap: 5rem;
|
||||
}
|
||||
|
||||
.gap-x-7 {
|
||||
column-gap: 5rem;
|
||||
}
|
||||
|
||||
.gap-y-7 {
|
||||
row-gap: 5rem;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.sm\:gap-7 {
|
||||
gap: 5rem;
|
||||
.sm\:gap-100 {
|
||||
gap: 6.25rem;
|
||||
}
|
||||
.sm\:gap-x-7 {
|
||||
column-gap: 5rem;
|
||||
.sm\:gap-x-100 {
|
||||
column-gap: 6.25rem;
|
||||
}
|
||||
.sm\:gap-y-7 {
|
||||
row-gap: 5rem;
|
||||
.sm\:gap-y-100 {
|
||||
row-gap: 6.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.md\:gap-7 {
|
||||
gap: 5rem;
|
||||
.md\:gap-100 {
|
||||
gap: 6.25rem;
|
||||
}
|
||||
.md\:gap-x-7 {
|
||||
column-gap: 5rem;
|
||||
.md\:gap-x-100 {
|
||||
column-gap: 6.25rem;
|
||||
}
|
||||
.md\:gap-y-7 {
|
||||
row-gap: 5rem;
|
||||
.md\:gap-y-100 {
|
||||
row-gap: 6.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
.lg\:gap-7 {
|
||||
gap: 5rem;
|
||||
.lg\:gap-100 {
|
||||
gap: 6.25rem;
|
||||
}
|
||||
.lg\:gap-x-7 {
|
||||
column-gap: 5rem;
|
||||
.lg\:gap-x-100 {
|
||||
column-gap: 6.25rem;
|
||||
}
|
||||
.lg\:gap-y-7 {
|
||||
row-gap: 5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.gap-auto {
|
||||
gap: auto;
|
||||
}
|
||||
|
||||
.gap-x-auto {
|
||||
column-gap: auto;
|
||||
}
|
||||
|
||||
.gap-y-auto {
|
||||
row-gap: auto;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.sm\:gap-auto {
|
||||
gap: auto;
|
||||
}
|
||||
.sm\:gap-x-auto {
|
||||
column-gap: auto;
|
||||
}
|
||||
.sm\:gap-y-auto {
|
||||
row-gap: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 992px) {
|
||||
.md\:gap-auto {
|
||||
gap: auto;
|
||||
}
|
||||
.md\:gap-x-auto {
|
||||
column-gap: auto;
|
||||
}
|
||||
.md\:gap-y-auto {
|
||||
row-gap: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1330px) {
|
||||
.lg\:gap-auto {
|
||||
gap: auto;
|
||||
}
|
||||
.lg\:gap-x-auto {
|
||||
column-gap: auto;
|
||||
}
|
||||
.lg\:gap-y-auto {
|
||||
row-gap: auto;
|
||||
.lg\:gap-y-100 {
|
||||
row-gap: 6.25rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -4853,6 +4757,146 @@ template {
|
|||
grid-row: span 1 / span 1;
|
||||
}
|
||||
|
||||
.col-start-2 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
|
||||
.col-end-2 {
|
||||
grid-column-end: 2;
|
||||
}
|
||||
|
||||
.col-span-2 {
|
||||
grid-column: span 2 / span 2;
|
||||
}
|
||||
|
||||
.col-span-full {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.row-start-2 {
|
||||
grid-row-start: 2;
|
||||
}
|
||||
|
||||
.row-end-2 {
|
||||
grid-row-end: 2;
|
||||
}
|
||||
|
||||
.row-span-2 {
|
||||
grid-row: span 2 / span 2;
|
||||
}
|
||||
|
||||
.col-start-3 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
|
||||
.col-end-3 {
|
||||
grid-column-end: 3;
|
||||
}
|
||||
|
||||
.col-span-3 {
|
||||
grid-column: span 3 / span 3;
|
||||
}
|
||||
|
||||
.col-span-full {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.row-start-3 {
|
||||
grid-row-start: 3;
|
||||
}
|
||||
|
||||
.row-end-3 {
|
||||
grid-row-end: 3;
|
||||
}
|
||||
|
||||
.row-span-3 {
|
||||
grid-row: span 3 / span 3;
|
||||
}
|
||||
|
||||
.col-start-4 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
|
||||
.col-end-4 {
|
||||
grid-column-end: 4;
|
||||
}
|
||||
|
||||
.col-span-4 {
|
||||
grid-column: span 4 / span 4;
|
||||
}
|
||||
|
||||
.col-span-full {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.row-start-4 {
|
||||
grid-row-start: 4;
|
||||
}
|
||||
|
||||
.row-end-4 {
|
||||
grid-row-end: 4;
|
||||
}
|
||||
|
||||
.row-span-4 {
|
||||
grid-row: span 4 / span 4;
|
||||
}
|
||||
|
||||
.col-start-5 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
|
||||
.col-end-5 {
|
||||
grid-column-end: 5;
|
||||
}
|
||||
|
||||
.col-span-5 {
|
||||
grid-column: span 5 / span 5;
|
||||
}
|
||||
|
||||
.col-span-full {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.row-start-5 {
|
||||
grid-row-start: 5;
|
||||
}
|
||||
|
||||
.row-end-5 {
|
||||
grid-row-end: 5;
|
||||
}
|
||||
|
||||
.row-span-5 {
|
||||
grid-row: span 5 / span 5;
|
||||
}
|
||||
|
||||
.col-start-6 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
|
||||
.col-end-6 {
|
||||
grid-column-end: 6;
|
||||
}
|
||||
|
||||
.col-span-6 {
|
||||
grid-column: span 6 / span 6;
|
||||
}
|
||||
|
||||
.col-span-full {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.row-start-6 {
|
||||
grid-row-start: 6;
|
||||
}
|
||||
|
||||
.row-end-6 {
|
||||
grid-row-end: 6;
|
||||
}
|
||||
|
||||
.row-span-6 {
|
||||
grid-row: span 6 / span 6;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.sm\:col-start-1 {
|
||||
grid-column-start: 1;
|
||||
|
|
@ -4925,34 +4969,6 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
.col-start-2 {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
|
||||
.col-end-2 {
|
||||
grid-column-end: 2;
|
||||
}
|
||||
|
||||
.col-span-2 {
|
||||
grid-column: span 2 / span 2;
|
||||
}
|
||||
|
||||
.col-span-full {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.row-start-2 {
|
||||
grid-row-start: 2;
|
||||
}
|
||||
|
||||
.row-end-2 {
|
||||
grid-row-end: 2;
|
||||
}
|
||||
|
||||
.row-span-2 {
|
||||
grid-row: span 2 / span 2;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.sm\:col-start-2 {
|
||||
grid-column-start: 2;
|
||||
|
|
@ -5025,34 +5041,6 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
.col-start-3 {
|
||||
grid-column-start: 3;
|
||||
}
|
||||
|
||||
.col-end-3 {
|
||||
grid-column-end: 3;
|
||||
}
|
||||
|
||||
.col-span-3 {
|
||||
grid-column: span 3 / span 3;
|
||||
}
|
||||
|
||||
.col-span-full {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.row-start-3 {
|
||||
grid-row-start: 3;
|
||||
}
|
||||
|
||||
.row-end-3 {
|
||||
grid-row-end: 3;
|
||||
}
|
||||
|
||||
.row-span-3 {
|
||||
grid-row: span 3 / span 3;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.sm\:col-start-3 {
|
||||
grid-column-start: 3;
|
||||
|
|
@ -5125,34 +5113,6 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
.col-start-4 {
|
||||
grid-column-start: 4;
|
||||
}
|
||||
|
||||
.col-end-4 {
|
||||
grid-column-end: 4;
|
||||
}
|
||||
|
||||
.col-span-4 {
|
||||
grid-column: span 4 / span 4;
|
||||
}
|
||||
|
||||
.col-span-full {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.row-start-4 {
|
||||
grid-row-start: 4;
|
||||
}
|
||||
|
||||
.row-end-4 {
|
||||
grid-row-end: 4;
|
||||
}
|
||||
|
||||
.row-span-4 {
|
||||
grid-row: span 4 / span 4;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.sm\:col-start-4 {
|
||||
grid-column-start: 4;
|
||||
|
|
@ -5225,34 +5185,6 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
.col-start-5 {
|
||||
grid-column-start: 5;
|
||||
}
|
||||
|
||||
.col-end-5 {
|
||||
grid-column-end: 5;
|
||||
}
|
||||
|
||||
.col-span-5 {
|
||||
grid-column: span 5 / span 5;
|
||||
}
|
||||
|
||||
.col-span-full {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.row-start-5 {
|
||||
grid-row-start: 5;
|
||||
}
|
||||
|
||||
.row-end-5 {
|
||||
grid-row-end: 5;
|
||||
}
|
||||
|
||||
.row-span-5 {
|
||||
grid-row: span 5 / span 5;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.sm\:col-start-5 {
|
||||
grid-column-start: 5;
|
||||
|
|
@ -5325,34 +5257,6 @@ template {
|
|||
}
|
||||
}
|
||||
|
||||
.col-start-6 {
|
||||
grid-column-start: 6;
|
||||
}
|
||||
|
||||
.col-end-6 {
|
||||
grid-column-end: 6;
|
||||
}
|
||||
|
||||
.col-span-6 {
|
||||
grid-column: span 6 / span 6;
|
||||
}
|
||||
|
||||
.col-span-full {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.row-start-6 {
|
||||
grid-row-start: 6;
|
||||
}
|
||||
|
||||
.row-end-6 {
|
||||
grid-row-end: 6;
|
||||
}
|
||||
|
||||
.row-span-6 {
|
||||
grid-row: span 6 / span 6;
|
||||
}
|
||||
|
||||
@media (min-width: 576px) {
|
||||
.sm\:col-start-6 {
|
||||
grid-column-start: 6;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -3,37 +3,27 @@
|
|||
/* --------------------------------------- */
|
||||
// Grillade is heavily inspired by tailwindcss.com Grid utility classes
|
||||
|
||||
|
||||
// use these variables only for a standalone Grillade
|
||||
// in KNACSS, you shall modify variables file instead
|
||||
$grid-columns: 6 !default;
|
||||
|
||||
@if variable_exists(spacers) {
|
||||
$spacers: $spacers !global;
|
||||
}
|
||||
@else {
|
||||
$spacers : (
|
||||
'0' : 0,
|
||||
'1' : .5rem,
|
||||
'2' : .75rem,
|
||||
'3' : 1rem,
|
||||
'4' : 1.5rem,
|
||||
'5' : 2rem,
|
||||
'6' : 3rem,
|
||||
'7' : 5rem,
|
||||
'auto' : auto
|
||||
) !global;
|
||||
}
|
||||
$gaps: (
|
||||
"0": 0,
|
||||
"10": 0.625rem,
|
||||
"16": 1rem,
|
||||
"20": 1.25rem,
|
||||
"30": 1.875rem,
|
||||
"50": 3.125rem,
|
||||
"100": 6.25rem,
|
||||
);
|
||||
|
||||
@if variable_exists(breakpoints) {
|
||||
$breakpoints: $breakpoints !global;
|
||||
}
|
||||
@else {
|
||||
$breakpoints : (
|
||||
sm: 576px,
|
||||
md: 768px,
|
||||
lg: 1024px,
|
||||
xl: 1330px
|
||||
} @else {
|
||||
$breakpoints: (
|
||||
sm: 576px,
|
||||
md: 992px,
|
||||
lg: 1330px,
|
||||
) !global;
|
||||
}
|
||||
|
||||
|
|
@ -42,7 +32,7 @@ $grid-columns: 6 !default;
|
|||
}
|
||||
// grid class for each breakpoint
|
||||
@each $bp, $bpv in $breakpoints {
|
||||
@media (min-width: #{$bpv}) {
|
||||
@media (min-width: #{$bpv}) {
|
||||
.#{$bp}\:grid {
|
||||
display: grid;
|
||||
}
|
||||
|
|
@ -51,24 +41,22 @@ $grid-columns: 6 !default;
|
|||
|
||||
/* grid-template-columns classes */
|
||||
@for $i from 1 through $grid-columns {
|
||||
|
||||
.grid-cols-#{$i} {
|
||||
grid-template-columns: repeat(#{$i}, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
@for $i from 1 through $grid-columns {
|
||||
@each $bp, $bpv in $breakpoints {
|
||||
|
||||
@media (min-width: #{$bpv}) {
|
||||
.#{$bp}\:grid-cols-#{$i} {
|
||||
grid-template-columns: repeat(#{$i}, minmax(0, 1fr));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* gap classes */
|
||||
@each $key, $value in $spacers {
|
||||
|
||||
@each $key, $value in $gaps {
|
||||
.gap-#{$key} {
|
||||
gap: $value;
|
||||
}
|
||||
|
|
@ -78,9 +66,9 @@ $grid-columns: 6 !default;
|
|||
.gap-y-#{$key} {
|
||||
row-gap: $value;
|
||||
}
|
||||
|
||||
}
|
||||
@each $key, $value in $gaps {
|
||||
@each $bp, $bpv in $breakpoints {
|
||||
|
||||
@media (min-width: #{$bpv}) {
|
||||
.#{$bp}\:gap-#{$key} {
|
||||
gap: $value;
|
||||
|
|
@ -93,12 +81,10 @@ $grid-columns: 6 !default;
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* grid-items classes */
|
||||
@for $i from 1 through $grid-columns {
|
||||
|
||||
.col-start-#{$i} {
|
||||
grid-column-start: #{$i};
|
||||
}
|
||||
|
|
@ -120,10 +106,11 @@ $grid-columns: 6 !default;
|
|||
.row-span-#{$i} {
|
||||
grid-row: span #{$i} / span #{$i};
|
||||
}
|
||||
|
||||
// loop for each breakpoint
|
||||
}
|
||||
|
||||
// loop for each breakpoint
|
||||
@for $i from 1 through $grid-columns {
|
||||
@each $bp, $bpv in $breakpoints {
|
||||
|
||||
@media (min-width: #{$bpv}) {
|
||||
.#{$bp}\:col-start-#{$i} {
|
||||
grid-column-start: #{$i};
|
||||
|
|
@ -148,5 +135,4 @@ $grid-columns: 6 !default;
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue