css: introduce --grid-gutter & --nb-cols css vars for flex-grid (#80527)
gitea/publik-base-theme/pipeline/head This commit looks good
Details
gitea/publik-base-theme/pipeline/head This commit looks good
Details
This commit is contained in:
parent
30ec51ee76
commit
1d543dc673
|
@ -21,18 +21,19 @@ $min-grid-desktop-viewport: "min-width: #{min-desktop-viewport($fx-grid-tablet-l
|
|||
|
||||
.fx-grid,
|
||||
[class*="fx-grid--"] {
|
||||
--grid-gutter: #{$fx-grid-gutter};
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
margin-left: -1 * $fx-grid-gutter;
|
||||
margin-left: calc(-1 * var(--grid-gutter));
|
||||
/* if flex item are list */
|
||||
list-style-type: none;
|
||||
|
||||
> * {
|
||||
box-sizing: border-box; // for gadjo
|
||||
margin-left: $fx-grid-gutter;
|
||||
flex-basis: calc(100% - #{$fx-grid-gutter});
|
||||
margin-left: var(--grid-gutter);
|
||||
flex-basis: calc(100% / var(--nb-cols, 1) - var(--grid-gutter));
|
||||
hyphens: auto;
|
||||
}
|
||||
}
|
||||
|
@ -51,20 +52,20 @@ $min-grid-desktop-viewport: "min-width: #{min-desktop-viewport($fx-grid-tablet-l
|
|||
@for $i from 2 through $max-cols-mobile {
|
||||
.fx-grid--#{$i} > *,
|
||||
[class*="fx-grid--"][class*="--m#{$i}"] > * {
|
||||
flex-basis: calc(#{100%/$i} - #{$fx-grid-gutter});
|
||||
--nb-cols: #{$i};
|
||||
}
|
||||
}
|
||||
@media ($min-grid-tablet-viewport) {
|
||||
@for $i from 2 through $max-cols-tablet {
|
||||
[class*="fx-grid--"][class*="--t#{$i}"] > * {
|
||||
flex-basis: calc(#{100%/$i} - #{$fx-grid-gutter});
|
||||
--nb-cols: #{$i};
|
||||
}
|
||||
}
|
||||
}
|
||||
@media ($min-grid-desktop-viewport) {
|
||||
@for $i from 2 through $max-cols-desktop {
|
||||
[class*="fx-grid--"][class*="--d#{$i}"] > * {
|
||||
flex-basis: calc(#{100%/$i} - #{$fx-grid-gutter});
|
||||
--nb-cols: #{$i};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -76,7 +77,7 @@ $min-grid-desktop-viewport: "min-width: #{min-desktop-viewport($fx-grid-tablet-l
|
|||
@for $j from 1 through $i {
|
||||
> .size--#{$j}-#{$i},
|
||||
> [class*="size--"][class*="--m#{$j}-#{$i}"] {
|
||||
flex-basis: calc( #{100%*$j/$i} - #{$fx-grid-gutter});
|
||||
--nb-cols: #{$i};
|
||||
flex-grow: 0;
|
||||
}
|
||||
}
|
||||
|
@ -85,7 +86,7 @@ $min-grid-desktop-viewport: "min-width: #{min-desktop-viewport($fx-grid-tablet-l
|
|||
@for $i from 1 through $max-cols-tablet {
|
||||
@for $j from 1 through $i {
|
||||
> [class*="size--"][class*="--t#{$j}-#{$i}"] {
|
||||
flex-basis: calc( #{100%*$j/$i} - #{$fx-grid-gutter});
|
||||
--nb-cols: #{$i};
|
||||
flex-grow: 0;
|
||||
}
|
||||
}
|
||||
|
@ -95,7 +96,7 @@ $min-grid-desktop-viewport: "min-width: #{min-desktop-viewport($fx-grid-tablet-l
|
|||
@for $i from 1 through $max-cols-desktop {
|
||||
@for $j from 1 through $i {
|
||||
> [class*="size--"][class*="--d#{$j}-#{$i}"] {
|
||||
flex-basis: calc( #{100%*$j/$i} - #{$fx-grid-gutter});
|
||||
--nb-cols: #{$i};
|
||||
flex-grow: 0;
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue