@progress/kendo-theme-utils 5.6.1-dev.6 → 5.8.0

package/dist/all.css

@@ -614,13 +614,40 @@
     right: -1px !important;
 }
 
-.k-top-center {
+.k-top-start,
+.k-pos-top-start {
+    top: 0;
+    left: 0;
+}
+
+.k-top-end,
+.k-pos-top-end {
+    top: 0;
+    right: 0;
+}
+
+.k-bottom-start,
+.k-pos-bottom-start {
+    bottom: 0;
+    left: 0;
+}
+
+.k-bottom-end,
+.k-pos-bottom-end {
+    bottom: 0;
+    right: 0;
+}
+
+.k-top-center,
+.k-pos-top-center {
     top: 0;
     left: 50%;
     transform: translateX(-50%);
 }
 
-.k-middle-left {
+.k-middle-left,
+.k-middle-start,
+.k-pos-middle-start {
     top: 50%;
     left: 0;
     transform: translateY(-50%);
@@ -632,18 +659,41 @@
     transform: translateY(-50%);
 }
 
-.k-middle-right {
+.k-middle-right,
+.k-middle-end,
+.k-pos-middle-end {
     top: 50%;
     right: 0;
     transform: translateY(-50%);
 }
 
-.k-bottom-center {
+.k-bottom-center,
+.k-pos-bottom-center {
     bottom: 0;
     left: 50%;
     transform: translateX(-50%);
 }
 
+.k-top,
+.k-pos-top {
+    top: 0;
+}
+
+.k-right,
+.k-pos-right {
+    right: 0;
+}
+
+.k-bottom,
+.k-pos-bottom {
+    bottom: 0;
+}
+
+.k-left,
+.k-pos-left {
+    left: 0;
+}
+
 .k-visibility-visible, .k-visible {
     visibility: visible;
 }
@@ -741,11 +791,11 @@
 }
 
 .k-flex-col-reverse {
-    flex-direction: column;
+    flex-direction: column-reverse;
 }
 
 .\!k-flex-col-reverse {
-    flex-direction: column !important;
+    flex-direction: column-reverse !important;
 }
 
 .k-flex-wrap {
@@ -6149,10 +6199,12 @@
 }
 
 .k-w-fit {
+    width: -moz-fit-content;
     width: fit-content;
 }
 
 .\!k-w-fit {
+    width: -moz-fit-content !important;
     width: fit-content !important;
 }
 
@@ -6205,10 +6257,12 @@
 }
 
 .k-min-w-fit {
+    min-width: -moz-fit-content;
     min-width: fit-content;
 }
 
 .\!k-min-w-fit {
+    min-width: -moz-fit-content !important;
     min-width: fit-content !important;
 }
 
@@ -6261,10 +6315,12 @@
 }
 
 .k-max-w-fit {
+    max-width: -moz-fit-content;
     max-width: fit-content;
 }
 
 .\!k-max-w-fit {
+    max-width: -moz-fit-content !important;
     max-width: fit-content !important;
 }
 
@@ -6701,10 +6757,12 @@
 }
 
 .k-h-fit {
+    height: -moz-fit-content;
     height: fit-content;
 }
 
 .\!k-h-fit {
+    height: -moz-fit-content !important;
     height: fit-content !important;
 }
 
@@ -6757,10 +6815,12 @@
 }
 
 .k-min-h-fit {
+    min-height: -moz-fit-content;
     min-height: fit-content;
 }
 
 .\!k-min-h-fit {
+    min-height: -moz-fit-content !important;
     min-height: fit-content !important;
 }
 
@@ -6813,10 +6873,12 @@
 }
 
 .k-max-h-fit {
+    max-height: -moz-fit-content;
     max-height: fit-content;
 }
 
 .\!k-max-h-fit {
+    max-height: -moz-fit-content !important;
     max-height: fit-content !important;
 }
 
@@ -8380,6 +8442,22 @@
     table-layout: fixed !important;
 }
 
+.k-table-layout-auto {
+    table-layout: auto;
+}
+
+.\!k-table-layout-auto {
+    table-layout: auto !important;
+}
+
+.k-table-layout-fixed {
+    table-layout: fixed;
+}
+
+.\!k-table-layout-fixed {
+    table-layout: fixed !important;
+}
+
 .k-flip-h, .k-flip-x {
     transform: scaleX(-1);
 }
@@ -10101,35 +10179,43 @@
 }
 
 .k-scroll-snap-none {
-    scroll-snap-type: none;
+    -ms-scroll-snap-type: none;
+        scroll-snap-type: none;
 }
 
 .\!k-scroll-snap-none {
-    scroll-snap-type: none !important;
+    -ms-scroll-snap-type: none !important;
+        scroll-snap-type: none !important;
 }
 
 .k-scroll-snap-snap-x {
-    scroll-snap-type: x var(--k-scroll-snap-strictness);
+    -ms-scroll-snap-type: x var(--k-scroll-snap-strictness);
+        scroll-snap-type: x var(--k-scroll-snap-strictness);
 }
 
 .\!k-scroll-snap-snap-x {
-    scroll-snap-type: x var(--k-scroll-snap-strictness) !important;
+    -ms-scroll-snap-type: x var(--k-scroll-snap-strictness) !important;
+        scroll-snap-type: x var(--k-scroll-snap-strictness) !important;
 }
 
 .k-scroll-snap-snap-y {
-    scroll-snap-type: y var(--k-scroll-snap-strictness);
+    -ms-scroll-snap-type: y var(--k-scroll-snap-strictness);
+        scroll-snap-type: y var(--k-scroll-snap-strictness);
 }
 
 .\!k-scroll-snap-snap-y {
-    scroll-snap-type: y var(--k-scroll-snap-strictness) !important;
+    -ms-scroll-snap-type: y var(--k-scroll-snap-strictness) !important;
+        scroll-snap-type: y var(--k-scroll-snap-strictness) !important;
 }
 
 .k-scroll-snap-snap-both {
-    scroll-snap-type: both var(--k-scroll-snap-strictness);
+    -ms-scroll-snap-type: both var(--k-scroll-snap-strictness);
+        scroll-snap-type: both var(--k-scroll-snap-strictness);
 }
 
 .\!k-scroll-snap-snap-both {
-    scroll-snap-type: both var(--k-scroll-snap-strictness) !important;
+    -ms-scroll-snap-type: both var(--k-scroll-snap-strictness) !important;
+        scroll-snap-type: both var(--k-scroll-snap-strictness) !important;
 }
 
 .k-scroll-snap-mandatory {
@@ -12957,43 +13043,61 @@
 }
 
 .k-user-select-none {
-    user-select: none;
+    -webkit-user-select: none;
+        -ms-user-select: none;
+            user-select: none;
 }
 
 .\!k-user-select-none {
-    user-select: none !important;
+    -webkit-user-select: none !important;
+        -ms-user-select: none !important;
+            user-select: none !important;
 }
 
 .k-user-select-auto {
-    user-select: auto;
+    -webkit-user-select: auto;
+        -ms-user-select: auto;
+            user-select: auto;
 }
 
 .\!k-user-select-auto {
-    user-select: auto !important;
+    -webkit-user-select: auto !important;
+        -ms-user-select: auto !important;
+            user-select: auto !important;
 }
 
 .k-user-select-text {
-    user-select: text;
+    -webkit-user-select: text;
+        -ms-user-select: text;
+            user-select: text;
 }
 
 .\!k-user-select-text {
-    user-select: text !important;
+    -webkit-user-select: text !important;
+        -ms-user-select: text !important;
+            user-select: text !important;
 }
 
 .k-user-select-all {
-    user-select: all;
+    -webkit-user-select: all;
+            user-select: all;
 }
 
 .\!k-user-select-all {
-    user-select: all !important;
+    -webkit-user-select: all !important;
+            user-select: all !important;
 }
 
 .k-user-select-contain {
-    user-select: contain;
+    -webkit-user-select: contain;
+        -ms-user-select: element;
+            user-select: contain;
 }
 
 .\!k-user-select-contain {
-    user-select: contain !important;
+    -webkit-user-select: contain !important;
+        -ms-user-select: element !important;
+            user-select: contain !important;
 }
 
 .k-will-change-auto {

package/dist/all.scss

@@ -203,7 +203,7 @@ $kendo-utils: (
         row: row,
         row-reverse: row-reverse,
         col: column,
-        col-reverse: column
+        col-reverse: column-reverse
     ),
     "flex-wrap": (
         wrap,
@@ -1036,12 +1036,39 @@ $kendo-utils-inset: map-get( $kendo-utils, "inset" ) !default;
 @include generate-utils( bottom-left, ( bottom, left ), $kendo-utils-inset );
 @include generate-utils( bottom-right, ( bottom, right), $kendo-utils-inset );
 
-.#{$kendo-prefix}top-center {
+.#{$kendo-prefix}top-start,
+.#{$kendo-prefix}pos-top-start {
+    top: 0;
+    left: 0;
+}
+
+.#{$kendo-prefix}top-end,
+.#{$kendo-prefix}pos-top-end {
+    top: 0;
+    right: 0;
+}
+
+.#{$kendo-prefix}bottom-start,
+.#{$kendo-prefix}pos-bottom-start {
+    bottom: 0;
+    left: 0;
+}
+
+.#{$kendo-prefix}bottom-end,
+.#{$kendo-prefix}pos-bottom-end {
+    bottom: 0;
+    right: 0;
+}
+
+.#{$kendo-prefix}top-center,
+.#{$kendo-prefix}pos-top-center {
     top: 0;
     left: 50%;
     transform: translateX(-50%);
 }
-.#{$kendo-prefix}middle-left {
+.#{$kendo-prefix}middle-left,
+.#{$kendo-prefix}middle-start,
+.#{$kendo-prefix}pos-middle-start {
     top: 50%;
     left: 0;
     transform: translateY(-50%);
@@ -1051,17 +1078,26 @@ $kendo-utils-inset: map-get( $kendo-utils, "inset" ) !default;
     left: 50%;
     transform: translateY(-50%);
 }
-.#{$kendo-prefix}middle-right {
+.#{$kendo-prefix}middle-right,
+.#{$kendo-prefix}middle-end,
+.#{$kendo-prefix}pos-middle-end {
     top: 50%;
     right: 0;
     transform: translateY(-50%);
 }
-.#{$kendo-prefix}bottom-center {
+.#{$kendo-prefix}bottom-center,
+.#{$kendo-prefix}pos-bottom-center {
     bottom: 0;
     left: 50%;
     transform: translateX(-50%);
 }
 
+
+@each $side in (top, right, bottom, left) {
+    .#{$kendo-prefix}#{$side},
+    .#{$kendo-prefix}pos-#{$side} { #{$side}: 0; } // sass-lint:disable-line brace-style
+}
+
 // #endregion
 // #region @import "./_visibility.scss"; -> packages/utils/scss/layout/_visibility.scss
 // TODO DOCS
@@ -1663,6 +1699,7 @@ $kendo-utils-border-collapse: map-get( $kendo-utils, "border-collapse" ) !defaul
 $kendo-utils-table-layout: map-get( $kendo-utils, "table-layout" ) !default;
 
 @include generate-utils( table, table-layout, $kendo-utils-table-layout );
+@include generate-utils( table-layout, table-layout, $kendo-utils-table-layout );
 
 // #endregion
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@progress/kendo-theme-utils",
   "description": "Utility first library alongside Kendo UI",
-  "version": "5.6.1-dev.6",
+  "version": "5.8.0",
   "author": "Progress",
   "license": "Apache-2.0",
   "keywords": [
@@ -36,7 +36,7 @@
     "postpublish": "echo 'no postpublish for utils'"
   },
   "devDependencies": {
-    "sass-build": "^0.0.1"
+    "sass-build": "^1.0.0"
   },
-  "gitHead": "0bb8ba8dbd98bdff0c5d8b8d862fa68d28365c1b"
+  "gitHead": "2e623d96036e764e51218c1b9d8b97d17eb036b5"
 }

package/scss/_variables.scss

@@ -158,7 +158,7 @@ $kendo-utils: (
         row: row,
         row-reverse: row-reverse,
         col: column,
-        col-reverse: column
+        col-reverse: column-reverse
     ),
     "flex-wrap": (
         wrap,

package/scss/layout/_position.scss

@@ -33,12 +33,39 @@ $kendo-utils-inset: map-get( $kendo-utils, "inset" ) !default;
 @include generate-utils( bottom-left, ( bottom, left ), $kendo-utils-inset );
 @include generate-utils( bottom-right, ( bottom, right), $kendo-utils-inset );
 
-.#{$kendo-prefix}top-center {
+.#{$kendo-prefix}top-start,
+.#{$kendo-prefix}pos-top-start {
+    top: 0;
+    left: 0;
+}
+
+.#{$kendo-prefix}top-end,
+.#{$kendo-prefix}pos-top-end {
+    top: 0;
+    right: 0;
+}
+
+.#{$kendo-prefix}bottom-start,
+.#{$kendo-prefix}pos-bottom-start {
+    bottom: 0;
+    left: 0;
+}
+
+.#{$kendo-prefix}bottom-end,
+.#{$kendo-prefix}pos-bottom-end {
+    bottom: 0;
+    right: 0;
+}
+
+.#{$kendo-prefix}top-center,
+.#{$kendo-prefix}pos-top-center {
     top: 0;
     left: 50%;
     transform: translateX(-50%);
 }
-.#{$kendo-prefix}middle-left {
+.#{$kendo-prefix}middle-left,
+.#{$kendo-prefix}middle-start,
+.#{$kendo-prefix}pos-middle-start {
     top: 50%;
     left: 0;
     transform: translateY(-50%);
@@ -48,13 +75,22 @@ $kendo-utils-inset: map-get( $kendo-utils, "inset" ) !default;
     left: 50%;
     transform: translateY(-50%);
 }
-.#{$kendo-prefix}middle-right {
+.#{$kendo-prefix}middle-right,
+.#{$kendo-prefix}middle-end,
+.#{$kendo-prefix}pos-middle-end {
     top: 50%;
     right: 0;
     transform: translateY(-50%);
 }
-.#{$kendo-prefix}bottom-center {
+.#{$kendo-prefix}bottom-center,
+.#{$kendo-prefix}pos-bottom-center {
     bottom: 0;
     left: 50%;
     transform: translateX(-50%);
 }
+
+
+@each $side in (top, right, bottom, left) {
+    .#{$kendo-prefix}#{$side},
+    .#{$kendo-prefix}pos-#{$side} { #{$side}: 0; } // sass-lint:disable-line brace-style
+}

package/scss/table/_table-layout.scss

@@ -9,3 +9,4 @@
 $kendo-utils-table-layout: map-get( $kendo-utils, "table-layout" ) !default;
 
 @include generate-utils( table, table-layout, $kendo-utils-table-layout );
+@include generate-utils( table-layout, table-layout, $kendo-utils-table-layout );