fix(utils): fixes invalid css property values

telerik · Aug 8, 2022 · bd88a5e · bd88a5e
1 parent f3bb9ff
commit bd88a5e
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 32 deletions.
diff --git a/packages/utils/scss/_mixins.scss b/packages/utils/scss/_mixins.scss
@@ -5,7 +5,7 @@
 
         @each $key, $val in $values {
             $_key: escape-class-name( $key );
-            $_val: if( type-of($values) == list, $_key, $val );
+            $_val: if( type-of($values) == list, $key, $val );
             $_name: escape-class-name( $name );
             $_selector: if( $_key == DEFAULT, #{$kendo-prefix}#{$_name}, #{$kendo-prefix}#{$_name}-#{$_key});
 

diff --git a/packages/utils/scss/_variables.scss b/packages/utils/scss/_variables.scss
@@ -272,7 +272,7 @@ $kendo-utils: (
         10: span 10 / span 10,
         11: span 11 / span 11,
         12: span 12 / span 12,
-        full: 1 / -1,
+        full: unquote("1 / -1"),
         auto: auto
     ),
     "grid-row-start": (
@@ -348,18 +348,15 @@ $kendo-utils: (
         start: flex-start,
         end: flex-end,
         center: center,
-        between: between,
-        around: around,
-        evenly: evenly
+        between: space-between,
+        around: space-around,
+        evenly: space-evenly
     ),
     "align-items": (
         normal: normal,
         start: flex-start,
         end: flex-end,
         center: center,
-        between: between,
-        around: around,
-        evenly: evenly,
         stretch: stretch
     ),
     "align-self": (
@@ -375,19 +372,16 @@ $kendo-utils: (
         start: flex-start,
         end: flex-end,
         center: center,
-        between: between,
-        around: around,
-        evenly: evenly,
+        between: space-between,
+        around: space-around,
+        evenly: space-evenly,
         stretch: stretch
     ),
     "justify-items": (
         normal: normal,
         start: flex-start,
         end: flex-end,
         center: center,
-        between: between,
-        around: around,
-        evenly: evenly,
         stretch: stretch
     ),
     "justify-self": (
@@ -403,19 +397,16 @@ $kendo-utils: (
         start: flex-start,
         end: flex-end,
         center: center,
-        between: between,
-        around: around,
-        evenly: evenly,
+        between: space-between,
+        around: space-around,
+        evenly: space-evenly,
         stretch: stretch
     ),
     "place-items": (
         normal: normal,
         start: flex-start,
         end: flex-end,
         center: center,
-        between: between,
-        around: around,
-        evenly: evenly,
         stretch: stretch
     ),
     "place-self": (
@@ -571,7 +562,10 @@ $kendo-utils: (
         dashed,
         dotted,
         double,
-        hidden,
+        groove,
+        ridge,
+        inset,
+        outset,
         none
     ),
     "outline-color": (),
@@ -602,13 +596,13 @@ $kendo-utils: (
     // Transform
     "flip": true,
     "scale": (
-        0,
-        .25,
-        .5,
-        .75,
-        1,
-        1.25,
-        1.5
+        "0",
+        ".25",
+        ".5",
+        ".75",
+        "1",
+        "1.25",
+        "1.5"
     ),
     "rotate": (
         0: 0deg,
@@ -620,7 +614,7 @@ $kendo-utils: (
         270: 270deg,
         315: 315deg
     ),
-    "translate": $kendo-sizing,
+    "translate": map-remove( $kendo-sizing, "auto", "min", "max", "fit" ),
     "skew": (
         0: 0deg,
         1: 1deg,

diff --git a/packages/utils/scss/transform/_scale.scss b/packages/utils/scss/transform/_scale.scss
@@ -4,13 +4,13 @@ $kendo-utils-scale: map-get( $kendo-utils, "scale" ) !default;
 
 // sass-lint:disable function-name-format
 @function __scale( $val ) {
-    @return scale( $val );
+    @return scale( unquote($val) );
 }
 @function __scale-x( $val ) {
-    @return scaleX( $val );
+    @return scaleX( unquote($val) );
 }
 @function __scale-y( $val ) {
-    @return scaleY( $val );
+    @return scaleY( unquote($val) );
 }
 // sass-lint:enable function-name-format