Skip to content

Commit 2dd0579

Browse files
sebastiano-guerrierosebastiano-guerriero
committed
column-count responsive variations
1 parent bf2a441 commit 2dd0579

File tree

3 files changed

+152
-25
lines changed

3 files changed

+152
-25
lines changed

‎main/assets/css/base/_util.scss

+31-24
Original file line numberDiff line numberDiff line change
@@ -783,17 +783,17 @@
783783

784784
:root {
785785
--max-width-xxxxxs: 17.5rem; // ~280px
786-
--max-width-xxxxs: 20rem; // ~320px
787-
--max-width-xxxs: 26rem; // ~416px
788-
--max-width-xxs: 32rem; // ~512px
789-
--max-width-xs: 38rem; // ~608px
790-
--max-width-sm: 48rem; // ~768px
791-
--max-width-md: 64rem; // ~1024px
792-
--max-width-lg: 80rem; // ~1280px
793-
--max-width-xl: 90rem; // ~1440px
794-
--max-width-xxl: 100rem; // ~1600px
795-
--max-width-xxxl: 120rem; // ~1920px
796-
--max-width-xxxxl: 150rem; // ~2400px
786+
--max-width-xxxxs: 20rem; // ~320px
787+
--max-width-xxxs: 26rem; // ~416px
788+
--max-width-xxs: 32rem; // ~512px
789+
--max-width-xs: 38rem; // ~608px
790+
--max-width-sm: 48rem; // ~768px
791+
--max-width-md: 64rem; // ~1024px
792+
--max-width-lg: 80rem; // ~1280px
793+
--max-width-xl: 90rem; // ~1440px
794+
--max-width-xxl: 100rem; // ~1600px
795+
--max-width-xxxl: 120rem; // ~1920px
796+
--max-width-xxxxl: 150rem; // ~2400px
797797
}
798798

799799
.max-width-xxxxxs { max-width: var(--max-width-xxxxxs); }
@@ -1624,6 +1624,12 @@ $breakpointsNr: length($breakpoints);
16241624
.text-xxxl\@#{$breakpoint} { font-size: var(--text-xxxl, 2.5rem); }
16251625
.text-xxxxl\@#{$breakpoint} { font-size: var(--text-xxxxl, 3rem); }
16261626

1627+
// column-count
1628+
.column-count-1\@#{$breakpoint} { column-count: 1; }
1629+
.column-count-2\@#{$breakpoint} { column-count: 2; }
1630+
.column-count-3\@#{$breakpoint} { column-count: 3; }
1631+
.column-count-4\@#{$breakpoint} { column-count: 4; }
1632+
16271633
// width
16281634
.width-xxxxs\@#{$breakpoint} { width: var(--size-xxxxs, 0.25rem); }
16291635
.width-xxxs\@#{$breakpoint} { width: var(--size-xxxs, 0.5rem); }
@@ -1687,19 +1693,20 @@ $breakpointsNr: length($breakpoints);
16871693
.height-inherit\@#{$breakpoint} { height: inherit; }
16881694

16891695
// max-width
1690-
.max-width-xxxxs\@#{$breakpoint} { max-width: var(--max-width-xxxxs); }
1691-
.max-width-xxxs\@#{$breakpoint} { max-width: var(--max-width-xxxs); }
1692-
.max-width-xxs\@#{$breakpoint} { max-width: var(--max-width-xxs); }
1693-
.max-width-xs\@#{$breakpoint} { max-width: var(--max-width-xs); }
1694-
.max-width-sm\@#{$breakpoint} { max-width: var(--max-width-sm); }
1695-
.max-width-md\@#{$breakpoint} { max-width: var(--max-width-md); }
1696-
.max-width-lg\@#{$breakpoint} { max-width: var(--max-width-lg); }
1697-
.max-width-xl\@#{$breakpoint} { max-width: var(--max-width-xl); }
1698-
.max-width-xxl\@#{$breakpoint} { max-width: var(--max-width-xxl); }
1699-
.max-width-xxxl\@#{$breakpoint} { max-width: var(--max-width-xxxl); }
1700-
.max-width-xxxxl\@#{$breakpoint} { max-width: var(--max-width-xxxxl); }
1701-
.max-width-100\%\@#{$breakpoint} { max-width: 100%; }
1702-
.max-width-none\@#{$breakpoint} { max-width: none; }
1696+
.max-width-xxxxxs\@#{$breakpoint} { max-width: var(--max-width-xxxxxs); }
1697+
.max-width-xxxxs\@#{$breakpoint} { max-width: var(--max-width-xxxxs); }
1698+
.max-width-xxxs\@#{$breakpoint} { max-width: var(--max-width-xxxs); }
1699+
.max-width-xxs\@#{$breakpoint} { max-width: var(--max-width-xxs); }
1700+
.max-width-xs\@#{$breakpoint} { max-width: var(--max-width-xs); }
1701+
.max-width-sm\@#{$breakpoint} { max-width: var(--max-width-sm); }
1702+
.max-width-md\@#{$breakpoint} { max-width: var(--max-width-md); }
1703+
.max-width-lg\@#{$breakpoint} { max-width: var(--max-width-lg); }
1704+
.max-width-xl\@#{$breakpoint} { max-width: var(--max-width-xl); }
1705+
.max-width-xxl\@#{$breakpoint} { max-width: var(--max-width-xxl); }
1706+
.max-width-xxxl\@#{$breakpoint} { max-width: var(--max-width-xxxl); }
1707+
.max-width-xxxxl\@#{$breakpoint} { max-width: var(--max-width-xxxxl); }
1708+
.max-width-100\%\@#{$breakpoint} { max-width: 100%; }
1709+
.max-width-none\@#{$breakpoint} { max-width: none; }
17031710

17041711
// position
17051712
.position-relative\@#{$breakpoint} { position: relative; }

‎main/assets/css/style.css

+120
Original file line numberDiff line numberDiff line change
@@ -7321,6 +7321,26 @@ html:not(.js) .no-js\:is-hidden {
73217321
font-size: var(--text-xxxxl, 3rem);
73227322
}
73237323

7324+
.column-count-1\@xs {
7325+
-moz-column-count: 1;
7326+
column-count: 1;
7327+
}
7328+
7329+
.column-count-2\@xs {
7330+
-moz-column-count: 2;
7331+
column-count: 2;
7332+
}
7333+
7334+
.column-count-3\@xs {
7335+
-moz-column-count: 3;
7336+
column-count: 3;
7337+
}
7338+
7339+
.column-count-4\@xs {
7340+
-moz-column-count: 4;
7341+
column-count: 4;
7342+
}
7343+
73247344
.width-xxxxs\@xs {
73257345
width: var(--size-xxxxs, 0.25rem);
73267346
}
@@ -7553,6 +7573,10 @@ html:not(.js) .no-js\:is-hidden {
75537573
height: inherit;
75547574
}
75557575

7576+
.max-width-xxxxxs\@xs {
7577+
max-width: var(--max-width-xxxxxs);
7578+
}
7579+
75567580
.max-width-xxxxs\@xs {
75577581
max-width: var(--max-width-xxxxs);
75587582
}
@@ -8824,6 +8848,26 @@ html:not(.js) .no-js\:is-hidden {
88248848
font-size: var(--text-xxxxl, 3rem);
88258849
}
88268850

8851+
.column-count-1\@sm {
8852+
-moz-column-count: 1;
8853+
column-count: 1;
8854+
}
8855+
8856+
.column-count-2\@sm {
8857+
-moz-column-count: 2;
8858+
column-count: 2;
8859+
}
8860+
8861+
.column-count-3\@sm {
8862+
-moz-column-count: 3;
8863+
column-count: 3;
8864+
}
8865+
8866+
.column-count-4\@sm {
8867+
-moz-column-count: 4;
8868+
column-count: 4;
8869+
}
8870+
88278871
.width-xxxxs\@sm {
88288872
width: var(--size-xxxxs, 0.25rem);
88298873
}
@@ -9056,6 +9100,10 @@ html:not(.js) .no-js\:is-hidden {
90569100
height: inherit;
90579101
}
90589102

9103+
.max-width-xxxxxs\@sm {
9104+
max-width: var(--max-width-xxxxxs);
9105+
}
9106+
90599107
.max-width-xxxxs\@sm {
90609108
max-width: var(--max-width-xxxxs);
90619109
}
@@ -10327,6 +10375,26 @@ html:not(.js) .no-js\:is-hidden {
1032710375
font-size: var(--text-xxxxl, 3rem);
1032810376
}
1032910377

10378+
.column-count-1\@md {
10379+
-moz-column-count: 1;
10380+
column-count: 1;
10381+
}
10382+
10383+
.column-count-2\@md {
10384+
-moz-column-count: 2;
10385+
column-count: 2;
10386+
}
10387+
10388+
.column-count-3\@md {
10389+
-moz-column-count: 3;
10390+
column-count: 3;
10391+
}
10392+
10393+
.column-count-4\@md {
10394+
-moz-column-count: 4;
10395+
column-count: 4;
10396+
}
10397+
1033010398
.width-xxxxs\@md {
1033110399
width: var(--size-xxxxs, 0.25rem);
1033210400
}
@@ -10559,6 +10627,10 @@ html:not(.js) .no-js\:is-hidden {
1055910627
height: inherit;
1056010628
}
1056110629

10630+
.max-width-xxxxxs\@md {
10631+
max-width: var(--max-width-xxxxxs);
10632+
}
10633+
1056210634
.max-width-xxxxs\@md {
1056310635
max-width: var(--max-width-xxxxs);
1056410636
}
@@ -11830,6 +11902,26 @@ html:not(.js) .no-js\:is-hidden {
1183011902
font-size: var(--text-xxxxl, 3rem);
1183111903
}
1183211904

11905+
.column-count-1\@lg {
11906+
-moz-column-count: 1;
11907+
column-count: 1;
11908+
}
11909+
11910+
.column-count-2\@lg {
11911+
-moz-column-count: 2;
11912+
column-count: 2;
11913+
}
11914+
11915+
.column-count-3\@lg {
11916+
-moz-column-count: 3;
11917+
column-count: 3;
11918+
}
11919+
11920+
.column-count-4\@lg {
11921+
-moz-column-count: 4;
11922+
column-count: 4;
11923+
}
11924+
1183311925
.width-xxxxs\@lg {
1183411926
width: var(--size-xxxxs, 0.25rem);
1183511927
}
@@ -12062,6 +12154,10 @@ html:not(.js) .no-js\:is-hidden {
1206212154
height: inherit;
1206312155
}
1206412156

12157+
.max-width-xxxxxs\@lg {
12158+
max-width: var(--max-width-xxxxxs);
12159+
}
12160+
1206512161
.max-width-xxxxs\@lg {
1206612162
max-width: var(--max-width-xxxxs);
1206712163
}
@@ -13333,6 +13429,26 @@ html:not(.js) .no-js\:is-hidden {
1333313429
font-size: var(--text-xxxxl, 3rem);
1333413430
}
1333513431

13432+
.column-count-1\@xl {
13433+
-moz-column-count: 1;
13434+
column-count: 1;
13435+
}
13436+
13437+
.column-count-2\@xl {
13438+
-moz-column-count: 2;
13439+
column-count: 2;
13440+
}
13441+
13442+
.column-count-3\@xl {
13443+
-moz-column-count: 3;
13444+
column-count: 3;
13445+
}
13446+
13447+
.column-count-4\@xl {
13448+
-moz-column-count: 4;
13449+
column-count: 4;
13450+
}
13451+
1333613452
.width-xxxxs\@xl {
1333713453
width: var(--size-xxxxs, 0.25rem);
1333813454
}
@@ -13565,6 +13681,10 @@ html:not(.js) .no-js\:is-hidden {
1356513681
height: inherit;
1356613682
}
1356713683

13684+
.max-width-xxxxxs\@xl {
13685+
max-width: var(--max-width-xxxxxs);
13686+
}
13687+
1356813688
.max-width-xxxxs\@xl {
1356913689
max-width: var(--max-width-xxxxs);
1357013690
}

‎main/assets/css/style.min.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)