@progress/kendo-theme-utils 5.6.1-dev.0 → 5.6.1-dev.3

package/dist/all.css

@@ -1925,11 +1925,11 @@
 }
 
 .k-col-span-full {
-    grid-column: -1;
+    grid-column: 1 / -1;
 }
 
 .\!k-col-span-full {
-    grid-column: -1 !important;
+    grid-column: 1 / -1 !important;
 }
 
 .k-col-span-auto {
@@ -2605,27 +2605,27 @@
 }
 
 .k-align-content-between {
-    align-content: between;
+    align-content: space-between;
 }
 
 .\!k-align-content-between {
-    align-content: between !important;
+    align-content: space-between !important;
 }
 
 .k-align-content-around {
-    align-content: around;
+    align-content: space-around;
 }
 
 .\!k-align-content-around {
-    align-content: around !important;
+    align-content: space-around !important;
 }
 
 .k-align-content-evenly {
-    align-content: evenly;
+    align-content: space-evenly;
 }
 
 .\!k-align-content-evenly {
-    align-content: evenly !important;
+    align-content: space-evenly !important;
 }
 
 .k-align-items-normal {
@@ -2660,30 +2660,6 @@
     align-items: center !important;
 }
 
-.k-align-items-between {
-    align-items: between;
-}
-
-.\!k-align-items-between {
-    align-items: between !important;
-}
-
-.k-align-items-around {
-    align-items: around;
-}
-
-.\!k-align-items-around {
-    align-items: around !important;
-}
-
-.k-align-items-evenly {
-    align-items: evenly;
-}
-
-.\!k-align-items-evenly {
-    align-items: evenly !important;
-}
-
 .k-align-items-stretch {
     align-items: stretch;
 }
@@ -2773,27 +2749,27 @@
 }
 
 .k-justify-content-between {
-    justify-content: between;
+    justify-content: space-between;
 }
 
 .\!k-justify-content-between {
-    justify-content: between !important;
+    justify-content: space-between !important;
 }
 
 .k-justify-content-around {
-    justify-content: around;
+    justify-content: space-around;
 }
 
 .\!k-justify-content-around {
-    justify-content: around !important;
+    justify-content: space-around !important;
 }
 
 .k-justify-content-evenly {
-    justify-content: evenly;
+    justify-content: space-evenly;
 }
 
 .\!k-justify-content-evenly {
-    justify-content: evenly !important;
+    justify-content: space-evenly !important;
 }
 
 .k-justify-content-stretch {
@@ -2844,30 +2820,6 @@
     justify-items: center !important;
 }
 
-.k-justify-items-between {
-    justify-items: between;
-}
-
-.\!k-justify-items-between {
-    justify-items: between !important;
-}
-
-.k-justify-items-around {
-    justify-items: around;
-}
-
-.\!k-justify-items-around {
-    justify-items: around !important;
-}
-
-.k-justify-items-evenly {
-    justify-items: evenly;
-}
-
-.\!k-justify-items-evenly {
-    justify-items: evenly !important;
-}
-
 .k-justify-items-stretch {
     justify-items: stretch;
 }
@@ -2957,27 +2909,27 @@
 }
 
 .k-place-content-between {
-    place-content: between;
+    place-content: space-between;
 }
 
 .\!k-place-content-between {
-    place-content: between !important;
+    place-content: space-between !important;
 }
 
 .k-place-content-around {
-    place-content: around;
+    place-content: space-around;
 }
 
 .\!k-place-content-around {
-    place-content: around !important;
+    place-content: space-around !important;
 }
 
 .k-place-content-evenly {
-    place-content: evenly;
+    place-content: space-evenly;
 }
 
 .\!k-place-content-evenly {
-    place-content: evenly !important;
+    place-content: space-evenly !important;
 }
 
 .k-place-content-stretch {
@@ -3020,30 +2972,6 @@
     place-items: center !important;
 }
 
-.k-place-items-between {
-    place-items: between;
-}
-
-.\!k-place-items-between {
-    place-items: between !important;
-}
-
-.k-place-items-around {
-    place-items: around;
-}
-
-.\!k-place-items-around {
-    place-items: around !important;
-}
-
-.k-place-items-evenly {
-    place-items: evenly;
-}
-
-.\!k-place-items-evenly {
-    place-items: evenly !important;
-}
-
 .k-place-items-stretch {
     place-items: stretch;
 }
@@ -8340,12 +8268,36 @@
     outline-style: double !important;
 }
 
-.k-outline-hidden {
-    outline-style: hidden;
+.k-outline-groove {
+    outline-style: groove;
+}
+
+.\!k-outline-groove {
+    outline-style: groove !important;
+}
+
+.k-outline-ridge {
+    outline-style: ridge;
 }
 
-.\!k-outline-hidden {
-    outline-style: hidden !important;
+.\!k-outline-ridge {
+    outline-style: ridge !important;
+}
+
+.k-outline-inset {
+    outline-style: inset;
+}
+
+.\!k-outline-inset {
+    outline-style: inset !important;
+}
+
+.k-outline-outset {
+    outline-style: outset;
+}
+
+.\!k-outline-outset {
+    outline-style: outset !important;
 }
 
 .k-outline-none {
@@ -8453,171 +8405,171 @@
 }
 
 .k-scale-0 {
-    transform: scale("0");
+    transform: scale(0);
 }
 
 .\!k-scale-0 {
-    transform: scale("0") !important;
+    transform: scale(0) !important;
 }
 
-.k-scale-0\.25 {
-    transform: scale("0\\.25");
+.k-scale-\.25 {
+    transform: scale(.25);
 }
 
-.\!k-scale-0\.25 {
-    transform: scale("0\\.25") !important;
+.\!k-scale-\.25 {
+    transform: scale(.25) !important;
 }
 
-.k-scale-0\.5 {
-    transform: scale("0\\.5");
+.k-scale-\.5 {
+    transform: scale(.5);
 }
 
-.\!k-scale-0\.5 {
-    transform: scale("0\\.5") !important;
+.\!k-scale-\.5 {
+    transform: scale(.5) !important;
 }
 
-.k-scale-0\.75 {
-    transform: scale("0\\.75");
+.k-scale-\.75 {
+    transform: scale(.75);
 }
 
-.\!k-scale-0\.75 {
-    transform: scale("0\\.75") !important;
+.\!k-scale-\.75 {
+    transform: scale(.75) !important;
 }
 
 .k-scale-1 {
-    transform: scale("1");
+    transform: scale(1);
 }
 
 .\!k-scale-1 {
-    transform: scale("1") !important;
+    transform: scale(1) !important;
 }
 
 .k-scale-1\.25 {
-    transform: scale("1\\.25");
+    transform: scale(1.25);
 }
 
 .\!k-scale-1\.25 {
-    transform: scale("1\\.25") !important;
+    transform: scale(1.25) !important;
 }
 
 .k-scale-1\.5 {
-    transform: scale("1\\.5");
+    transform: scale(1.5);
 }
 
 .\!k-scale-1\.5 {
-    transform: scale("1\\.5") !important;
+    transform: scale(1.5) !important;
 }
 
 .k-scale-x-0 {
-    transform: scaleX("0");
+    transform: scaleX(0);
 }
 
 .\!k-scale-x-0 {
-    transform: scaleX("0") !important;
+    transform: scaleX(0) !important;
 }
 
-.k-scale-x-0\.25 {
-    transform: scaleX("0\\.25");
+.k-scale-x-\.25 {
+    transform: scaleX(.25);
 }
 
-.\!k-scale-x-0\.25 {
-    transform: scaleX("0\\.25") !important;
+.\!k-scale-x-\.25 {
+    transform: scaleX(.25) !important;
 }
 
-.k-scale-x-0\.5 {
-    transform: scaleX("0\\.5");
+.k-scale-x-\.5 {
+    transform: scaleX(.5);
 }
 
-.\!k-scale-x-0\.5 {
-    transform: scaleX("0\\.5") !important;
+.\!k-scale-x-\.5 {
+    transform: scaleX(.5) !important;
 }
 
-.k-scale-x-0\.75 {
-    transform: scaleX("0\\.75");
+.k-scale-x-\.75 {
+    transform: scaleX(.75);
 }
 
-.\!k-scale-x-0\.75 {
-    transform: scaleX("0\\.75") !important;
+.\!k-scale-x-\.75 {
+    transform: scaleX(.75) !important;
 }
 
 .k-scale-x-1 {
-    transform: scaleX("1");
+    transform: scaleX(1);
 }
 
 .\!k-scale-x-1 {
-    transform: scaleX("1") !important;
+    transform: scaleX(1) !important;
 }
 
 .k-scale-x-1\.25 {
-    transform: scaleX("1\\.25");
+    transform: scaleX(1.25);
 }
 
 .\!k-scale-x-1\.25 {
-    transform: scaleX("1\\.25") !important;
+    transform: scaleX(1.25) !important;
 }
 
 .k-scale-x-1\.5 {
-    transform: scaleX("1\\.5");
+    transform: scaleX(1.5);
 }
 
 .\!k-scale-x-1\.5 {
-    transform: scaleX("1\\.5") !important;
+    transform: scaleX(1.5) !important;
 }
 
 .k-scale-y-0 {
-    transform: scaleY("0");
+    transform: scaleY(0);
 }
 
 .\!k-scale-y-0 {
-    transform: scaleY("0") !important;
+    transform: scaleY(0) !important;
 }
 
-.k-scale-y-0\.25 {
-    transform: scaleY("0\\.25");
+.k-scale-y-\.25 {
+    transform: scaleY(.25);
 }
 
-.\!k-scale-y-0\.25 {
-    transform: scaleY("0\\.25") !important;
+.\!k-scale-y-\.25 {
+    transform: scaleY(.25) !important;
 }
 
-.k-scale-y-0\.5 {
-    transform: scaleY("0\\.5");
+.k-scale-y-\.5 {
+    transform: scaleY(.5);
 }
 
-.\!k-scale-y-0\.5 {
-    transform: scaleY("0\\.5") !important;
+.\!k-scale-y-\.5 {
+    transform: scaleY(.5) !important;
 }
 
-.k-scale-y-0\.75 {
-    transform: scaleY("0\\.75");
+.k-scale-y-\.75 {
+    transform: scaleY(.75);
 }
 
-.\!k-scale-y-0\.75 {
-    transform: scaleY("0\\.75") !important;
+.\!k-scale-y-\.75 {
+    transform: scaleY(.75) !important;
 }
 
 .k-scale-y-1 {
-    transform: scaleY("1");
+    transform: scaleY(1);
 }
 
 .\!k-scale-y-1 {
-    transform: scaleY("1") !important;
+    transform: scaleY(1) !important;
 }
 
 .k-scale-y-1\.25 {
-    transform: scaleY("1\\.25");
+    transform: scaleY(1.25);
 }
 
 .\!k-scale-y-1\.25 {
-    transform: scaleY("1\\.25") !important;
+    transform: scaleY(1.25) !important;
 }
 
 .k-scale-y-1\.5 {
-    transform: scaleY("1\\.5");
+    transform: scaleY(1.5);
 }
 
 .\!k-scale-y-1\.5 {
-    transform: scaleY("1\\.5") !important;
+    transform: scaleY(1.5) !important;
 }
 
 .k-rotate-0 {
@@ -8876,14 +8828,6 @@
     transform: translateX(0.0625rem) !important;
 }
 
-.k-translate-x-auto {
-    transform: translateX(auto);
-}
-
-.\!k-translate-x-auto {
-    transform: translateX(auto) !important;
-}
-
 .k-translate-x-1\/2 {
     transform: translateX(50%);
 }
@@ -9100,30 +9044,6 @@
     transform: translateX(100%) !important;
 }
 
-.k-translate-x-min {
-    transform: translateX(min-content);
-}
-
-.\!k-translate-x-min {
-    transform: translateX(min-content) !important;
-}
-
-.k-translate-x-max {
-    transform: translateX(max-content);
-}
-
-.\!k-translate-x-max {
-    transform: translateX(max-content) !important;
-}
-
-.k-translate-x-fit {
-    transform: translateX(fit-content);
-}
-
-.\!k-translate-x-fit {
-    transform: translateX(fit-content) !important;
-}
-
 .k-translate-y-0 {
     transform: translateY(0);
 }
@@ -9316,14 +9236,6 @@
     transform: translateY(0.0625rem) !important;
 }
 
-.k-translate-y-auto {
-    transform: translateY(auto);
-}
-
-.\!k-translate-y-auto {
-    transform: translateY(auto) !important;
-}
-
 .k-translate-y-1\/2 {
     transform: translateY(50%);
 }
@@ -9540,30 +9452,6 @@
     transform: translateY(100%) !important;
 }
 
-.k-translate-y-min {
-    transform: translateY(min-content);
-}
-
-.\!k-translate-y-min {
-    transform: translateY(min-content) !important;
-}
-
-.k-translate-y-max {
-    transform: translateY(max-content);
-}
-
-.\!k-translate-y-max {
-    transform: translateY(max-content) !important;
-}
-
-.k-translate-y-fit {
-    transform: translateY(fit-content);
-}
-
-.\!k-translate-y-fit {
-    transform: translateY(fit-content) !important;
-}
-
 .k-skew-x-0 {
     transform: skewX(0deg);
 }

package/dist/all.scss

@@ -317,7 +317,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": (
@@ -393,18 +393,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": (
@@ -420,9 +417,9 @@ $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": (
@@ -430,9 +427,6 @@ $kendo-utils: (
         start: flex-start,
         end: flex-end,
         center: center,
-        between: between,
-        around: around,
-        evenly: evenly,
         stretch: stretch
     ),
     "justify-self": (
@@ -448,9 +442,9 @@ $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": (
@@ -458,9 +452,6 @@ $kendo-utils: (
         start: flex-start,
         end: flex-end,
         center: center,
-        between: between,
-        around: around,
-        evenly: evenly,
         stretch: stretch
     ),
     "place-self": (
@@ -616,7 +607,10 @@ $kendo-utils: (
         dashed,
         dotted,
         double,
-        hidden,
+        groove,
+        ridge,
+        inset,
+        outset,
         none
     ),
     "outline-color": (),
@@ -647,13 +641,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,
@@ -665,7 +659,7 @@ $kendo-utils: (
         270: 270deg,
         315: 315deg
     ),
-    "translate": $kendo-sizing,
+    "translate": map-remove( $kendo-sizing, "auto", "min", "max", "fit" ),
     "skew": (
         0: 0deg,
         1: 1deg,
@@ -807,7 +801,7 @@ $kendo-utils: (
 
         @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});
 
@@ -1709,13 +1703,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
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-utils",
   "description": "Utility first library alongside Kendo UI",
-  "version": "5.6.1-dev.0",
+  "version": "5.6.1-dev.3",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -38,5 +38,5 @@
   "devDependencies": {
     "sass-build": "^0.0.1"
   },
-  "gitHead": "57dbcf8b8d0e6f11fc74d102cd8784a17438b2d2"
+  "gitHead": "dd570d41f4941a81814d63d80c89ea4de2219a5d"
 }

package/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});
 

package/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,9 +372,9 @@ $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": (
@@ -385,9 +382,6 @@ $kendo-utils: (
         start: flex-start,
         end: flex-end,
         center: center,
-        between: between,
-        around: around,
-        evenly: evenly,
         stretch: stretch
     ),
     "justify-self": (
@@ -403,9 +397,9 @@ $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": (
@@ -413,9 +407,6 @@ $kendo-utils: (
         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,

package/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