Skip to content

Commit f81250e

Browse files
JoomFXepetrow
JoomFX
authored and
epetrow
committed
feat(utils): implement responsive layout system
1 parent d6e03dd commit f81250e

16 files changed

+297
-66
lines changed

‎packages/utils/scss/_mixins.scss

+24
Original file line numberDiff line numberDiff line change
@@ -34,4 +34,28 @@
3434
}
3535
}
3636
}
37+
}
38+
39+
40+
// Responsive Layout Breakpoints
41+
@mixin kendo-breakpoint-up( $breakpoint, $media: all ) {
42+
@media only #{$media} and (min-width: k-map-get( $kendo-breakpoints, #{$breakpoint} )) {
43+
@content;
44+
}
45+
}
46+
47+
@mixin kendo-breakpoint-down( $breakpoint, $media: all ) {
48+
@media only #{$media} and (max-width: ( k-map-get( $kendo-breakpoints, #{$breakpoint} ) - .02 )) {
49+
@content;
50+
}
51+
}
52+
53+
@mixin kendo-breakpoint-only( $breakpoint, $media: all ) {
54+
$breakpoint-index: k-list-index( k-map-keys($kendo-breakpoints), $breakpoint );
55+
$next-breakpoint-index: $breakpoint-index + 1;
56+
57+
$next-breakpoint: k-list-nth( k-map-keys($kendo-breakpoints), $next-breakpoint-index );
58+
@media only #{$media} and (min-width: k-map-get( $kendo-breakpoints, #{$breakpoint} )) and (max-width: ( k-map-get( $kendo-breakpoints, #{$next-breakpoint} ) - .02)) {
59+
@content;
60+
}
3761
}

‎packages/utils/scss/_variables.scss

+41-52
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,47 @@ $kendo-sizing: () !default;
6363

6464
$kendo-border-radii: () !default;
6565

66+
$_default-kendo-fraction-classes: (
67+
'91-6': 91.6666%,
68+
'83-3': 83.3333%,
69+
'66-6': 66.6666%,
70+
'58-3': 58.3333%,
71+
'41-6': 41.6666%,
72+
'33-3': 33.3333%,
73+
'16-7': 16.6666%,
74+
'14-3': 14.2857%,
75+
'12-5': 12.5%,
76+
'11-1': 11.1111%,
77+
'9-1': 9.0909%,
78+
'8-3': 8.3333%
79+
);
80+
81+
$kendo-fraction-classes: $_default-kendo-fraction-classes !default;
82+
$kendo-fraction-classes: k-map-merge($_default-kendo-fraction-classes, $kendo-fraction-classes);
83+
84+
$_default-kendo-breakpoints: (
85+
xs: 0,
86+
sm: 576px,
87+
md: 768px,
88+
lg: 992px,
89+
xl: 1200px,
90+
xxl: 1400px
91+
) !default;
92+
93+
$kendo-breakpoints: $_default-kendo-breakpoints !default;
94+
$kendo-breakpoints: k-map-merge($_default-kendo-breakpoints, $kendo-breakpoints);
95+
96+
$_default-kendo-container-max-widths: (
97+
sm: 540px,
98+
md: 720px,
99+
lg: 960px,
100+
xl: 1140px,
101+
xxl: 1320px
102+
) !default;
103+
104+
$kendo-container-max-widths: $_default-kendo-container-max-widths !default;
105+
$kendo-container-max-widths: k-map-merge($_default-kendo-container-max-widths, $kendo-container-max-widths);
106+
66107
$kendo-utils: (
67108

68109
// Accessibility
@@ -272,19 +313,6 @@ $kendo-utils: (
272313
11: 11,
273314
12: 12,
274315
13: 13,
275-
-1: -1,
276-
-2: -2,
277-
-3: -3,
278-
-4: -4,
279-
-5: -5,
280-
-6: -6,
281-
-7: -7,
282-
-8: -8,
283-
-9: -9,
284-
-10: -10,
285-
-11: -11,
286-
-12: -12,
287-
-13: -13,
288316
auto: auto
289317
),
290318
"grid-column-end": (
@@ -301,19 +329,6 @@ $kendo-utils: (
301329
11: 11,
302330
12: 12,
303331
13: 13,
304-
-1: -1,
305-
-2: -2,
306-
-3: -3,
307-
-4: -4,
308-
-5: -5,
309-
-6: -6,
310-
-7: -7,
311-
-8: -8,
312-
-9: -9,
313-
-10: -10,
314-
-11: -11,
315-
-12: -12,
316-
-13: -13,
317332
auto: auto
318333
),
319334
"grid-column-span": (
@@ -346,19 +361,6 @@ $kendo-utils: (
346361
11: 11,
347362
12: 12,
348363
13: 13,
349-
-1: -1,
350-
-2: -2,
351-
-3: -3,
352-
-4: -4,
353-
-5: -5,
354-
-6: -6,
355-
-7: -7,
356-
-8: -8,
357-
-9: -9,
358-
-10: -10,
359-
-11: -11,
360-
-12: -12,
361-
-13: -13,
362364
auto: auto
363365
),
364366
"grid-row-end": (
@@ -375,19 +377,6 @@ $kendo-utils: (
375377
11: 11,
376378
12: 12,
377379
13: 13,
378-
-1: -1,
379-
-2: -2,
380-
-3: -3,
381-
-4: -4,
382-
-5: -5,
383-
-6: -6,
384-
-7: -7,
385-
-8: -8,
386-
-9: -9,
387-
-10: -10,
388-
-11: -11,
389-
-12: -12,
390-
-13: -13,
391380
auto: auto
392381
),
393382
"grid-row-span": (

‎packages/utils/scss/flex-grid/_gap.scss

+10
Original file line numberDiff line numberDiff line change
@@ -193,3 +193,13 @@
193193

194194
}
195195
}
196+
197+
@mixin kendo-utils--flex-grid--gap--responsive($key) {
198+
199+
// Gap responsive utility classes
200+
$kendo-utils-gap: k-map-get( $kendo-utils, "gap" ) !default;
201+
@include generate-utils( gap-#{$key}, gap, $kendo-utils-gap, $css-var: "spacing", $important: false );
202+
@include generate-utils( gap-x-#{$key}, column-gap, $kendo-utils-gap, $css-var: "spacing", $important: false );
203+
@include generate-utils( gap-y-#{$key}, row-gap, $kendo-utils-gap, $css-var: "spacing", $important: false );
204+
205+
}

‎packages/utils/scss/flex-grid/_grid-column-start-end.scss

+28-14
Original file line numberDiff line numberDiff line change
@@ -23,25 +23,39 @@
2323
@mixin kendo-utils--flex-grid--grid-column-start-end() {
2424
@include module-render("utils-flex-grid-grid-column-start-end") {
2525

26-
// Grid column start utility classes
27-
$kendo-utils-grid-column-start: k-map-get( $kendo-utils, "grid-column-start" ) !default;
28-
@include generate-utils( col-start, grid-column-start, $kendo-utils-grid-column-start );
26+
// Grid column span utility classes
27+
$kendo-utils-grid-column-span: k-map-get( $kendo-utils, "grid-column-span" ) !default;
28+
@include generate-utils( col-span, grid-column, $kendo-utils-grid-column-span );
2929

30+
// Grid column start utility classes
31+
$kendo-utils-grid-column-start: k-map-get( $kendo-utils, "grid-column-start" ) !default;
32+
@include generate-utils( col-start, grid-column-start, $kendo-utils-grid-column-start );
3033

31-
// Grid column end utility classes
32-
$kendo-utils-grid-column-end: k-map-get( $kendo-utils, "grid-column-end" ) !default;
33-
@include generate-utils( col-end, grid-column-end, $kendo-utils-grid-column-end );
34+
// Grid column end utility classes
35+
$kendo-utils-grid-column-end: k-map-get( $kendo-utils, "grid-column-end" ) !default;
36+
@include generate-utils( col-end, grid-column-end, $kendo-utils-grid-column-end );
3437

3538

36-
// Grid column span utility classes
37-
$kendo-utils-grid-column-span: k-map-get( $kendo-utils, "grid-column-span" ) !default;
38-
@include generate-utils( col-span, grid-column, $kendo-utils-grid-column-span );
39+
// Legacy aliases
40+
@include generate-utils( colspan, grid-column, $kendo-utils-grid-column-span );
41+
.#{$kendo-prefix}colspan-all { @extend .#{$kendo-prefix}colspan-full !optional; }
42+
.\!#{$kendo-prefix}colspan-all { @extend .\!#{$kendo-prefix}colspan-full !optional; }
3943

44+
}
45+
}
4046

41-
// Legacy aliases
42-
@include generate-utils( colspan, grid-column, $kendo-utils-grid-column-span );
43-
.#{$kendo-prefix}colspan-all { @extend .#{$kendo-prefix}colspan-full !optional; }
44-
.\!#{$kendo-prefix}colspan-all { @extend .\!#{$kendo-prefix}colspan-full !optional; }
47+
@mixin kendo-utils--flex-grid--grid-column-start-end--responsive($key) {
48+
49+
// Grid column span responsive utility classes
50+
$kendo-utils-grid-column-span: k-map-get( $kendo-utils, "grid-column-span" ) !default;
51+
@include generate-utils( col-span-#{$key}, grid-column, $kendo-utils-grid-column-span, $important: false );
52+
53+
// Grid column start responsive utility classes
54+
$kendo-utils-grid-column-start: k-map-get( $kendo-utils, "grid-column-start" ) !default;
55+
@include generate-utils( col-start-#{$key}, grid-column-start, $kendo-utils-grid-column-start, $important: false );
56+
57+
// Grid column end responsive utility classes
58+
$kendo-utils-grid-column-end: k-map-get( $kendo-utils, "grid-column-end" ) !default;
59+
@include generate-utils( col-end-#{$key}, grid-column-end, $kendo-utils-grid-column-end, $important: false );
4560

46-
}
4761
}

‎packages/utils/scss/flex-grid/_grid-template-columns.scss

+8
Original file line numberDiff line numberDiff line change
@@ -29,3 +29,11 @@
2929

3030
}
3131
}
32+
33+
@mixin kendo-utils--flex-grid--grid-template-columns--responsive($key) {
34+
35+
// Grid template columns responsive utility classes
36+
$kendo-utils-grid-template-columns: k-map-get( $kendo-utils, "grid-template-columns" ) !default;
37+
@include generate-utils( grid-cols-#{$key}, grid-template-columns, $kendo-utils-grid-template-columns, $important: false );
38+
39+
}

‎packages/utils/scss/flex-grid/index.import.scss

+6
Original file line numberDiff line numberDiff line change
@@ -50,3 +50,9 @@
5050
@include kendo-utils--flex-grid--place-items();
5151
@include kendo-utils--flex-grid--place-self();
5252
}
53+
54+
@mixin kendo-utils--flex-grid--responsive($key) {
55+
@include kendo-utils--flex-grid--gap--responsive($key);
56+
@include kendo-utils--flex-grid--grid-column-start-end--responsive($key);
57+
@include kendo-utils--flex-grid--grid-template-columns--responsive($key);
58+
}

‎packages/utils/scss/index.import.scss

+11
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44

55
@import "./accessibility/index.import.scss";
66
@import "./layout/index.import.scss";
7+
@import "./responsive-layout/index.import.scss";
78
@import "./flex-grid/index.import.scss";
89
@import "./spacing/index.import.scss";
910
@import "./sizing/index.import.scss";
@@ -25,6 +26,7 @@
2526
@mixin kendo-utils() {
2627
@include kendo-utils--accessibility();
2728
@include kendo-utils--layout();
29+
@include kendo-utils--responsive-layout();
2830
@include kendo-utils--flex-grid();
2931
@include kendo-utils--spacing();
3032
@include kendo-utils--sizing();
@@ -39,4 +41,13 @@
3941
@include kendo-utils--svg();
4042

4143
@include kendo-utils--elevation();
44+
45+
// Responsive utils
46+
@each $key, $val in $kendo-breakpoints {
47+
@include kendo-breakpoint-up($key) {
48+
@include kendo-utils--layout--responsive($key);
49+
@include kendo-utils--flex-grid--responsive($key);
50+
@include kendo-utils--spacing--responsive($key);
51+
}
52+
}
4253
}

‎packages/utils/scss/layout/_display.scss

+8
Original file line numberDiff line numberDiff line change
@@ -103,3 +103,11 @@
103103

104104
}
105105
}
106+
107+
@mixin kendo-utils--layout--display--responsive($key) {
108+
109+
// Display responsive utility classes
110+
$kendo-utils-display: k-map-get( $kendo-utils, "display" ) !default;
111+
@include generate-utils( d-#{$key}, display, $kendo-utils-display, $important: false );
112+
113+
}

‎packages/utils/scss/layout/index.import.scss

+4
Original file line numberDiff line numberDiff line change
@@ -28,3 +28,7 @@
2828
@include kendo-utils--layout--visibility();
2929
@include kendo-utils--layout--zindex();
3030
}
31+
32+
@mixin kendo-utils--layout--responsive($key) {
33+
@include kendo-utils--layout--display--responsive($key);
34+
}

‎packages/utils/scss/responsive-layout/_col-gap.scss

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
@mixin kendo-utils--responsive-layout--col-gap() {
2+
3+
// Columns gap
4+
$kendo-utils-col-gap: k-map-get( $kendo-utils, "gap" ) !default;
5+
6+
@each $key, $val in $kendo-utils-col-gap {
7+
$_key: k-escape-class-name( $key );
8+
.k-col-gap-#{$_key} {
9+
--kendo-col-gap: #{$val};
10+
}
11+
}
12+
13+
}
14+
15+
@mixin kendo-utils--responsive-layout--col-gap--responsive($breakpoint) {
16+
17+
// Columns gap responsive
18+
$kendo-utils-col-gap: k-map-get( $kendo-utils, "gap" ) !default;
19+
20+
@each $key, $val in $kendo-utils-col-gap {
21+
$_key: k-escape-class-name( $key );
22+
.k-col-gap-#{$breakpoint}-#{$_key} {
23+
--kendo-col-gap: #{$val};
24+
}
25+
}
26+
}
27+
28+

‎packages/utils/scss/responsive-layout/_col.scss

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
@mixin kendo-utils--responsive-layout--col() {
2+
3+
// Column
4+
.k-col {
5+
flex: 1 0 0%;
6+
}
7+
8+
// Column Sizes
9+
@for $i from 1 through 100 {
10+
.k-col-size-#{$i} {
11+
flex: 0 0 auto;
12+
width: $i * 1%;
13+
}
14+
}
15+
16+
@each $i, $n in $kendo-fraction-classes {
17+
.k-col-size-#{$i} {
18+
flex: 0 0 auto;
19+
width: $n;
20+
}
21+
}
22+
23+
}
24+
25+
@mixin kendo-utils--responsive-layout--col--responsive($key) {
26+
27+
// Column responsive
28+
.k-col-#{$key} {
29+
flex: 1 0 0%;
30+
}
31+
32+
// Column Sizes responsive
33+
@for $i from 1 through 100 {
34+
.k-col-#{$key}-size-#{$i} {
35+
flex: 0 0 auto;
36+
width: $i * 1%;
37+
}
38+
}
39+
40+
@each $i, $n in $kendo-fraction-classes {
41+
.k-col-#{$key}-size-#{$i} {
42+
flex: 0 0 auto;
43+
width: $n;
44+
}
45+
}
46+
}
47+
48+

‎packages/utils/scss/responsive-layout/_container.scss

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
@mixin kendo-utils--responsive-layout--container() {
2+
3+
// Page Container
4+
.k-container,
5+
.k-container-fluid {
6+
margin: 0 auto;
7+
width: 100%;
8+
display: flex;
9+
flex-direction: column;
10+
box-sizing: border-box;
11+
}
12+
13+
}
14+
15+
@mixin kendo-utils--responsive-layout--container--responsive($key, $val) {
16+
17+
// Page Container responsive
18+
.k-container {
19+
max-width: var(--kendo-container-#{$key}-max-width, #{$val});
20+
}
21+
22+
}

0 commit comments

Comments
 (0)