@progress/kendo-theme-utils 8.2.0 → 9.0.0-dev.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (109) hide show
  1. package/dist/all.css +14057 -2649
  2. package/dist/all.scss +6505 -5328
  3. package/dist/meta/sassdoc-data.json +2964 -3040
  4. package/dist/meta/sassdoc-raw-data.json +2668 -2744
  5. package/dist/meta/variables.json +376 -243
  6. package/package.json +3 -3
  7. package/scss/_mixins.scss +24 -0
  8. package/scss/_variables.scss +41 -53
  9. package/scss/accessibility/_screen-readers.scss +32 -26
  10. package/scss/background/_background-clip.scss +9 -3
  11. package/scss/background/_background-color.scss +9 -3
  12. package/scss/background/_background-position.scss +9 -3
  13. package/scss/background/_background-size.scss +9 -3
  14. package/scss/border/_border-color.scss +8 -3
  15. package/scss/border/_border-radius.scss +18 -12
  16. package/scss/border/_border-style.scss +16 -11
  17. package/scss/border/_border-width.scss +23 -19
  18. package/scss/border/_outline-color.scss +9 -3
  19. package/scss/border/_outline-offset.scss +9 -3
  20. package/scss/border/_outline-style.scss +9 -3
  21. package/scss/border/_outline-width.scss +6 -0
  22. package/scss/effects/_opacity.scss +9 -3
  23. package/scss/elevation/index.import.scss +7 -1
  24. package/scss/filter/_backdrop.scss +9 -3
  25. package/scss/flex-grid/_align-content.scss +9 -3
  26. package/scss/flex-grid/_align-items.scss +9 -3
  27. package/scss/flex-grid/_align-self.scss +9 -3
  28. package/scss/flex-grid/_flex-basis.scss +10 -4
  29. package/scss/flex-grid/_flex-direction.scss +20 -6
  30. package/scss/flex-grid/_flex-grow.scss +10 -4
  31. package/scss/flex-grid/_flex-shrink.scss +10 -4
  32. package/scss/flex-grid/_flex-wrap.scss +9 -3
  33. package/scss/flex-grid/_flex.scss +9 -3
  34. package/scss/flex-grid/_gap.scss +20 -4
  35. package/scss/flex-grid/_grid-auto-columns.scss +9 -3
  36. package/scss/flex-grid/_grid-auto-flow.scss +9 -3
  37. package/scss/flex-grid/_grid-auto-rows.scss +9 -3
  38. package/scss/flex-grid/_grid-column-start-end.scss +26 -6
  39. package/scss/flex-grid/_grid-row-start-end.scss +31 -13
  40. package/scss/flex-grid/_grid-template-columns.scss +16 -2
  41. package/scss/flex-grid/_grid-template-rows.scss +9 -3
  42. package/scss/flex-grid/_justify-content.scss +12 -6
  43. package/scss/flex-grid/_justify-items.scss +9 -3
  44. package/scss/flex-grid/_justify-self.scss +9 -3
  45. package/scss/flex-grid/_order.scss +9 -3
  46. package/scss/flex-grid/_place-content.scss +9 -3
  47. package/scss/flex-grid/_place-items.scss +9 -3
  48. package/scss/flex-grid/_place-self.scss +9 -3
  49. package/scss/flex-grid/index.import.scss +8 -0
  50. package/scss/index.import.scss +11 -0
  51. package/scss/interactivity/_accent-color.scss +9 -3
  52. package/scss/interactivity/_appearance.scss +9 -3
  53. package/scss/interactivity/_caret-color.scss +9 -3
  54. package/scss/interactivity/_cursor.scss +9 -3
  55. package/scss/interactivity/_pointer-events.scss +9 -3
  56. package/scss/interactivity/_resize.scss +9 -3
  57. package/scss/interactivity/_scroll.scss +38 -34
  58. package/scss/interactivity/_touch-action.scss +9 -3
  59. package/scss/interactivity/_user-select.scss +9 -3
  60. package/scss/interactivity/_will-change.scss +9 -3
  61. package/scss/layout/_aspect-ratio.scss +11 -5
  62. package/scss/layout/_box-sizing.scss +9 -3
  63. package/scss/layout/_clear.scss +9 -3
  64. package/scss/layout/_columns.scss +9 -3
  65. package/scss/layout/_display.scss +23 -9
  66. package/scss/layout/_float.scss +9 -3
  67. package/scss/layout/_object-fit.scss +9 -3
  68. package/scss/layout/_object-position.scss +9 -3
  69. package/scss/layout/_overflow.scss +12 -5
  70. package/scss/layout/_placement.scss +29 -80
  71. package/scss/layout/_position.scss +25 -18
  72. package/scss/layout/_visibility.scss +14 -8
  73. package/scss/layout/_zindex.scss +9 -3
  74. package/scss/layout/index.import.scss +4 -0
  75. package/scss/responsive-layout/_col-gap.scss +28 -0
  76. package/scss/responsive-layout/_col.scss +48 -0
  77. package/scss/responsive-layout/_container.scss +22 -0
  78. package/scss/responsive-layout/_row.scss +21 -0
  79. package/scss/responsive-layout/index.import.scss +25 -0
  80. package/scss/sizing/_height.scss +15 -9
  81. package/scss/sizing/_width.scss +15 -9
  82. package/scss/spacing/_margin.scss +17 -11
  83. package/scss/spacing/_padding.scss +23 -8
  84. package/scss/spacing/_space-between.scss +16 -10
  85. package/scss/spacing/index.import.scss +4 -0
  86. package/scss/svg/_fill.scss +9 -3
  87. package/scss/svg/_stroke.scss +9 -3
  88. package/scss/table/_border-collapse.scss +9 -3
  89. package/scss/table/_table-layout.scss +10 -4
  90. package/scss/transform/_flip.scss +21 -15
  91. package/scss/transform/_origin.scss +9 -3
  92. package/scss/transform/_rotate.scss +9 -3
  93. package/scss/transform/_scale.scss +11 -5
  94. package/scss/transform/_skew.scss +10 -4
  95. package/scss/transform/_translate.scss +22 -16
  96. package/scss/typography/_font-family.scss +7 -2
  97. package/scss/typography/_font-size.scss +9 -4
  98. package/scss/typography/_font-style.scss +9 -3
  99. package/scss/typography/_font-weight.scss +9 -5
  100. package/scss/typography/_letter-spacing.scss +7 -2
  101. package/scss/typography/_line-height.scss +7 -2
  102. package/scss/typography/_list-style.scss +9 -3
  103. package/scss/typography/_text-align.scss +9 -3
  104. package/scss/typography/_text-color.scss +11 -6
  105. package/scss/typography/_text-decoration.scss +9 -3
  106. package/scss/typography/_text-overflow.scss +23 -17
  107. package/scss/typography/_text-transform.scss +9 -3
  108. package/scss/typography/_vertical-align.scss +9 -3
  109. package/scss/typography/_white-space.scss +12 -6
package/scss/transform/_scale.scss CHANGED
@@ -16,6 +16,10 @@
16
16
  /// @group transform
17
17
  /// @contextType css
18
18
 
19
+ // Register
20
+ @import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
21
+ @include module-register((name: "utils-transform-scale"));
22
+
19
23
  // stylelint-disable scss/at-function-pattern
20
24
  @function _scale( $val ) {
21
25
  @return scale( $val );
@@ -29,11 +33,13 @@
29
33
  // stylelint-enable scss/at-function-pattern
30
34
 
31
35
  @mixin kendo-utils--transform--scale() {
36
+ @include module-render("utils-transform-scale") {
32
37
 
33
- // Scale utility classes
34
- $kendo-utils-scale: k-map-get( $kendo-utils, "scale" ) !default;
35
- @include generate-utils( scale, transform, $kendo-utils-scale, _scale );
36
- @include generate-utils( scale-x, transform, $kendo-utils-scale, _scale-x );
37
- @include generate-utils( scale-y, transform, $kendo-utils-scale, _scale-y );
38
+ // Scale utility classes
39
+ $kendo-utils-scale: k-map-get( $kendo-utils, "scale" ) !default;
40
+ @include generate-utils( scale, transform, $kendo-utils-scale, _scale );
41
+ @include generate-utils( scale-x, transform, $kendo-utils-scale, _scale-x );
42
+ @include generate-utils( scale-y, transform, $kendo-utils-scale, _scale-y );
38
43
 
44
+ }
39
45
  }
package/scss/transform/_skew.scss CHANGED
@@ -22,6 +22,10 @@
22
22
  /// @group skew
23
23
  /// @contextType css
24
24
 
25
+ // Register
26
+ @import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
27
+ @include module-register((name: "utils-transform-skew"));
28
+
25
29
  // stylelint-disable scss/at-function-pattern
26
30
  @function _skew-x( $val ) {
27
31
  @return skewX( $val );
@@ -32,10 +36,12 @@
32
36
  // stylelint-enable scss/at-function-pattern
33
37
 
34
38
  @mixin kendo-utils--transform--skew() {
39
+ @include module-render("utils-transform-skew") {
35
40
 
36
- // Transform skew utility classes
37
- $kendo-utils-skew: k-map-get( $kendo-utils, "skew" ) !default;
38
- @include generate-utils( skew-x, transform, $kendo-utils-skew, _skew-x );
39
- @include generate-utils( skew-y, transform, $kendo-utils-skew, _skew-y );
41
+ // Transform skew utility classes
42
+ $kendo-utils-skew: k-map-get( $kendo-utils, "skew" ) !default;
43
+ @include generate-utils( skew-x, transform, $kendo-utils-skew, _skew-x );
44
+ @include generate-utils( skew-y, transform, $kendo-utils-skew, _skew-y );
40
45
 
46
+ }
41
47
  }
package/scss/transform/_translate.scss CHANGED
@@ -52,6 +52,10 @@
52
52
  /// @group transform
53
53
  /// @contextType css
54
54
 
55
+ // Register
56
+ @import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
57
+ @include module-register((name: "utils-transform-translate"));
58
+
55
59
  // stylelint-disable scss/at-function-pattern
56
60
  @function _translate( $val ) {
57
61
  @return translate( $val );
@@ -65,22 +69,24 @@
65
69
  // stylelint-enable scss/at-function-pattern
66
70
 
67
71
  @mixin kendo-utils--transform--translate() {
72
+ @include module-render("utils-transform-translate") {
68
73
 
69
- // Translate utility classes
70
- $kendo-utils-translate: k-map-get( $kendo-utils, "translate" ) !default;
71
- $kendo-utils-translate-xy: (
72
- "0": ( 0, 0 ),
73
- "0-50": ( 0, 50% ),
74
- "0-100": ( 0, 100% ),
75
- "50-0": ( 50%, 0 ),
76
- "50-50": ( 50%, 50% ),
77
- "50-100": ( 50%, 100% ),
78
- "100-0": ( 100%, 0 ),
79
- "100-50": ( 100%, 50% ),
80
- "100-100": ( 100%, 100% )
81
- ) !default;
82
- @include generate-utils( translate, transform, $kendo-utils-translate-xy, _translate );
83
- @include generate-utils( translate-x, transform, $kendo-utils-translate, _translate-x );
84
- @include generate-utils( translate-y, transform, $kendo-utils-translate, _translate-y );
74
+ // Translate utility classes
75
+ $kendo-utils-translate: k-map-get( $kendo-utils, "translate" ) !default;
76
+ $kendo-utils-translate-xy: (
77
+ "0": ( 0, 0 ),
78
+ "0-50": ( 0, 50% ),
79
+ "0-100": ( 0, 100% ),
80
+ "50-0": ( 50%, 0 ),
81
+ "50-50": ( 50%, 50% ),
82
+ "50-100": ( 50%, 100% ),
83
+ "100-0": ( 100%, 0 ),
84
+ "100-50": ( 100%, 50% ),
85
+ "100-100": ( 100%, 100% )
86
+ ) !default;
87
+ @include generate-utils( translate, transform, $kendo-utils-translate-xy, _translate );
88
+ @include generate-utils( translate-x, transform, $kendo-utils-translate, _translate-x );
89
+ @include generate-utils( translate-y, transform, $kendo-utils-translate, _translate-y );
85
90
 
91
+ }
86
92
  }
package/scss/typography/_font-family.scss CHANGED
@@ -1,8 +1,13 @@
1
1
  @import "@progress/kendo-theme-core/scss/index.import.scss";
2
2
 
3
+ // Register
4
+ @include module-register((name: "utils-typography-font-family"));
5
+
3
6
  @mixin kendo-utils--typography--font-family() {
7
+ @include module-render("utils-typography-font-family") {
4
8
 
5
- // Font family utility classes
6
- @include generate-utils( font-family, font-family, $kendo-font-families, $css-var: "font-family" );
9
+ // Font family utility classes
10
+ @include generate-utils( font-family, font-family, $kendo-font-families, $css-var: "font-family" );
7
11
 
12
+ }
8
13
  }
package/scss/typography/_font-size.scss CHANGED
@@ -30,12 +30,17 @@
30
30
  /// @group font-size
31
31
  /// @contextType css
32
32
 
33
+ // Register
34
+ @include module-register((name: "utils-typography-font-size"));
35
+
33
36
  @mixin kendo-utils--typography--font-size() {
37
+ @include module-render("utils-typography-font-size") {
34
38
 
35
- // Font size utility classes
36
- @include generate-utils( font-size, font-size, $kendo-font-sizes, $css-var: "font-size" );
39
+ // Font size utility classes
40
+ @include generate-utils( font-size, font-size, $kendo-font-sizes, $css-var: "font-size" );
37
41
 
38
- // Legacy aliases
39
- @include generate-utils( fs, font-size, $kendo-font-sizes, $css-var: "fs" );
42
+ // Legacy aliases
43
+ @include generate-utils( fs, font-size, $kendo-font-sizes, $css-var: "fs" );
40
44
 
45
+ }
41
46
  }
package/scss/typography/_font-style.scss CHANGED
@@ -10,10 +10,16 @@
10
10
  /// @group font-style
11
11
  /// @contextType css
12
12
 
13
+ // Register
14
+ @import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
15
+ @include module-register((name: "utils-typography-font-style"));
16
+
13
17
  @mixin kendo-utils--typography--font-style() {
18
+ @include module-render("utils-typography-font-style") {
14
19
 
15
- // Font style utility classes
16
- $kendo-utils-font-style: k-map-get( $kendo-utils, "font-style" ) !default;
17
- @include generate-utils( font-style, font-style, $kendo-utils-font-style, $css-var: "font-style" );
20
+ // Font style utility classes
21
+ $kendo-utils-font-style: k-map-get( $kendo-utils, "font-style" ) !default;
22
+ @include generate-utils( font-style, font-style, $kendo-utils-font-style, $css-var: "font-style" );
18
23
 
24
+ }
19
25
  }
package/scss/typography/_font-weight.scss CHANGED
@@ -54,13 +54,17 @@
54
54
  /// @group font-weight
55
55
  /// @contextType css
56
56
 
57
- @mixin kendo-utils--typography--font-weight() {
57
+ // Register
58
+ @include module-register((name: "utils-typography-font-weight"));
58
59
 
59
- // Font weight utility classes
60
- @include generate-utils( font, font-weight, $kendo-font-weights, $css-var: "font-weight" );
60
+ @mixin kendo-utils--typography--font-weight() {
61
+ @include module-render("utils-typography-font-weight") {
61
62
 
63
+ // Font weight utility classes
64
+ @include generate-utils( font, font-weight, $kendo-font-weights, $css-var: "font-weight" );
62
65
 
63
- // Legacy aliases
64
- @include generate-utils( font-weight, font-weight, $kendo-font-weights, $css-var: "font-weight" );
66
+ // Legacy aliases
67
+ @include generate-utils( font-weight, font-weight, $kendo-font-weights, $css-var: "font-weight" );
65
68
 
69
+ }
66
70
  }
package/scss/typography/_letter-spacing.scss CHANGED
@@ -1,9 +1,14 @@
1
1
  @import "@progress/kendo-theme-core/scss/index.import.scss";
2
2
 
3
+ // Register
4
+ @include module-register((name: "utils-typography-letter-spacing"));
5
+
3
6
  @mixin kendo-utils--typography--letter-spacing() {
7
+ @include module-render("utils-typography-letter-spacing") {
4
8
 
5
- // Letter spacing utility classes
6
- @include generate-utils( letter-spacing, letter-spacing, $kendo-letter-spacings, $css-var: "letter-spacing" );
9
+ // Letter spacing utility classes
10
+ @include generate-utils( letter-spacing, letter-spacing, $kendo-letter-spacings, $css-var: "letter-spacing" );
7
11
 
12
+ }
8
13
  }
9
14
 
package/scss/typography/_line-height.scss CHANGED
@@ -1,8 +1,13 @@
1
1
  @import "@progress/kendo-theme-core/scss/index.import.scss";
2
2
 
3
+ // Register
4
+ @include module-register((name: "utils-typography-line-height"));
5
+
3
6
  @mixin kendo-utils--typography--line-height() {
7
+ @include module-render("utils-typography-line-height") {
4
8
 
5
- // Line height utility classes
6
- @include generate-utils( line-height, line-height, $kendo-line-heights, $css-var: "line-height" );
9
+ // Line height utility classes
10
+ @include generate-utils( line-height, line-height, $kendo-line-heights, $css-var: "line-height" );
7
11
 
12
+ }
8
13
  }
package/scss/typography/_list-style.scss CHANGED
@@ -16,10 +16,16 @@
16
16
  /// @group list-style
17
17
  /// @contextType css
18
18
 
19
+ // Register
20
+ @import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
21
+ @include module-register((name: "utils-typography-list-style"));
22
+
19
23
  @mixin kendo-utils--typography--list-style-type() {
24
+ @include module-render("utils-typography-list-style") {
20
25
 
21
- // list-style-type utility classes
22
- $kendo-utils-list-style-type: k-map-get( $kendo-utils, "list-style-type" ) !default;
23
- @include generate-utils( list, list-style-type, $kendo-utils-list-style-type );
26
+ // list-style-type utility classes
27
+ $kendo-utils-list-style-type: k-map-get( $kendo-utils, "list-style-type" ) !default;
28
+ @include generate-utils( list, list-style-type, $kendo-utils-list-style-type );
24
29
 
30
+ }
25
31
  }
package/scss/typography/_text-align.scss CHANGED
@@ -22,11 +22,17 @@
22
22
  /// @group text-align
23
23
  /// @contextType css
24
24
 
25
+ // Register
26
+ @import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
27
+ @include module-register((name: "utils-typography-text-align"));
28
+
25
29
  @mixin kendo-utils--typography--text-align() {
30
+ @include module-render("utils-typography-text-align") {
26
31
 
27
- // Text align utility classes
28
- $kendo-utils-text-align: k-map-get( $kendo-utils, "text-align" ) !default;
32
+ // Text align utility classes
33
+ $kendo-utils-text-align: k-map-get( $kendo-utils, "text-align" ) !default;
29
34
 
30
- @include generate-utils( text, text-align, $kendo-utils-text-align );
35
+ @include generate-utils( text, text-align, $kendo-utils-text-align );
31
36
 
37
+ }
32
38
  }
package/scss/typography/_text-color.scss CHANGED
@@ -1,13 +1,18 @@
1
1
  // TODO: docs
2
2
 
3
- @mixin kendo-utils--typography--text-color() {
3
+ // Register
4
+ @import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
5
+ @include module-register((name: "utils-typography-text-color"));
4
6
 
5
- // Text color utility classes
6
- $kendo-utils-text-color: k-map-get( $kendo-utils, "text-color" ) !default;
7
- @include generate-utils( text, color, $kendo-utils-text-color, $css-var: 'color' );
7
+ @mixin kendo-utils--typography--text-color() {
8
+ @include module-render("utils-typography-text-color") {
8
9
 
10
+ // Text color utility classes
11
+ $kendo-utils-text-color: k-map-get( $kendo-utils, "text-color" ) !default;
12
+ @include generate-utils( text, color, $kendo-utils-text-color, $css-var: 'color' );
9
13
 
10
- // Legacy aliases
11
- @include generate-utils( color, color, $kendo-utils-text-color, $css-var: 'color' );
14
+ // Legacy aliases
15
+ @include generate-utils( color, color, $kendo-utils-text-color, $css-var: 'color' );
12
16
 
17
+ }
13
18
  }
package/scss/typography/_text-decoration.scss CHANGED
@@ -22,10 +22,16 @@
22
22
  /// @group text-decoration
23
23
  /// @contextType css
24
24
 
25
+ // Register
26
+ @import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
27
+ @include module-register((name: "utils-typography-text-decoration"));
28
+
25
29
  @mixin kendo-utils--typography--text-decoration() {
30
+ @include module-render("utils-typography-text-decoration") {
26
31
 
27
- // text-decoration utility classes
28
- $kendo-utils-text-decoration: k-map-get( $kendo-utils, "text-decoration" ) !default;
29
- @include generate-utils( text, text-decoration, $kendo-utils-text-decoration );
32
+ // text-decoration utility classes
33
+ $kendo-utils-text-decoration: k-map-get( $kendo-utils, "text-decoration" ) !default;
34
+ @include generate-utils( text, text-decoration, $kendo-utils-text-decoration );
30
35
 
36
+ }
31
37
  }
package/scss/typography/_text-overflow.scss CHANGED
@@ -10,27 +10,33 @@
10
10
  /// @group text-overflow
11
11
  /// @contextType css
12
12
 
13
+ // Register
14
+ @import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
15
+ @include module-register((name: "utils-typography-text-overflow"));
16
+
13
17
  @mixin kendo-utils--typography--text-overflow() {
18
+ @include module-render("utils-typography-text-overflow") {
14
19
 
15
- // Text overflow utility classes
16
- $kendo-utils-text-overflow: k-map-get( $kendo-utils, "text-overflow" ) !default;
17
- @include generate-utils( text, text-overflow, $kendo-utils-text-overflow );
20
+ // Text overflow utility classes
21
+ $kendo-utils-text-overflow: k-map-get( $kendo-utils, "text-overflow" ) !default;
22
+ @include generate-utils( text, text-overflow, $kendo-utils-text-overflow );
18
23
 
19
24
 
20
- // Text truncate utility classes
21
- .#{$kendo-prefix}text-truncate {
22
- white-space: nowrap;
23
- overflow: hidden;
24
- text-overflow: ellipsis;
25
- }
26
- .\!#{$kendo-prefix}text-truncate {
27
- white-space: nowrap !important; // stylelint-disable-line declaration-no-important
28
- overflow: hidden !important; // stylelint-disable-line declaration-no-important
29
- text-overflow: ellipsis !important; // stylelint-disable-line declaration-no-important
30
- }
25
+ // Text truncate utility classes
26
+ .#{$kendo-prefix}text-truncate {
27
+ white-space: nowrap;
28
+ overflow: hidden;
29
+ text-overflow: ellipsis;
30
+ }
31
+ .\!#{$kendo-prefix}text-truncate {
32
+ white-space: nowrap !important; // stylelint-disable-line declaration-no-important
33
+ overflow: hidden !important; // stylelint-disable-line declaration-no-important
34
+ text-overflow: ellipsis !important; // stylelint-disable-line declaration-no-important
35
+ }
31
36
 
32
- // Legacy aliases
33
- .#{$kendo-prefix}text-ellipsis { @extend .#{$kendo-prefix}text-truncate !optional; }
34
- .\!#{$kendo-prefix}text-ellipsis { @extend .\!#{$kendo-prefix}text-truncate !optional; }
37
+ // Legacy aliases
38
+ .#{$kendo-prefix}text-ellipsis { @extend .#{$kendo-prefix}text-truncate !optional; }
39
+ .\!#{$kendo-prefix}text-ellipsis { @extend .\!#{$kendo-prefix}text-truncate !optional; }
35
40
 
41
+ }
36
42
  }
package/scss/typography/_text-transform.scss CHANGED
@@ -16,10 +16,16 @@
16
16
  /// @group text-transform
17
17
  /// @contextType css
18
18
 
19
+ // Register
20
+ @import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
21
+ @include module-register((name: "utils-typography-text-transform"));
22
+
19
23
  @mixin kendo-utils--typography--text-transform() {
24
+ @include module-render("utils-typography-text-transform") {
20
25
 
21
- // Text transform utility classes
22
- $kendo-utils-text-transform: k-map-get( $kendo-utils, "text-transform" ) !default;
23
- @include generate-utils( text, text-transform, $kendo-utils-text-transform );
26
+ // Text transform utility classes
27
+ $kendo-utils-text-transform: k-map-get( $kendo-utils, "text-transform" ) !default;
28
+ @include generate-utils( text, text-transform, $kendo-utils-text-transform );
24
29
 
30
+ }
25
31
  }
package/scss/typography/_vertical-align.scss CHANGED
@@ -46,10 +46,16 @@
46
46
  /// @group vertical-align
47
47
  /// @contextType css
48
48
 
49
+ // Register
50
+ @import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
51
+ @include module-register((name: "utils-typography-vertical-align"));
52
+
49
53
  @mixin kendo-utils--typography--vertical-align() {
54
+ @include module-render("utils-typography-vertical-align") {
50
55
 
51
- // vertical-align utility classes
52
- $kendo-utils-vertical-align: k-map-get( $kendo-utils, "vertical-align" ) !default;
53
- @include generate-utils( align, vertical-align, $kendo-utils-vertical-align );
56
+ // vertical-align utility classes
57
+ $kendo-utils-vertical-align: k-map-get( $kendo-utils, "vertical-align" ) !default;
58
+ @include generate-utils( align, vertical-align, $kendo-utils-vertical-align );
54
59
 
60
+ }
55
61
  }
package/scss/typography/_white-space.scss CHANGED
@@ -34,16 +34,22 @@
34
34
  /// @group white-space
35
35
  /// @contextType css
36
36
 
37
+ // Register
38
+ @import "@progress/kendo-theme-core/scss/module-system/index.import.scss";
39
+ @include module-register((name: "utils-typography-white-space"));
40
+
37
41
  @mixin kendo-utils--typography--white-space() {
42
+ @include module-render("utils-typography-white-space") {
38
43
 
39
- // White space utility classes
40
- $kendo-utils-white-space: k-map-get( $kendo-utils, "white-space" ) !default;
44
+ // White space utility classes
45
+ $kendo-utils-white-space: k-map-get( $kendo-utils, "white-space" ) !default;
41
46
 
42
- @include generate-utils( white-space, white-space, $kendo-utils-white-space );
43
- @include generate-utils( whitespace, white-space, $kendo-utils-white-space );
47
+ @include generate-utils( white-space, white-space, $kendo-utils-white-space );
48
+ @include generate-utils( whitespace, white-space, $kendo-utils-white-space );
44
49
 
45
50
 
46
- // Legacy aliases
47
- .#{$kendo-prefix}text-nowrap { @extend .#{$kendo-prefix}white-space-nowrap !optional; }
51
+ // Legacy aliases
52
+ .#{$kendo-prefix}text-nowrap { @extend .#{$kendo-prefix}white-space-nowrap !optional; }
48
53
 
54
+ }
49
55
  }