@progress/kendo-theme-utils 6.4.0-dev.0 → 6.4.0-dev.2

package/dist/all.css

@@ -15448,6 +15448,102 @@
     background-color: white !important;
 }
 
+.k-bg-center {
+    background-position: center;
+}
+
+.\!k-bg-center {
+    background-position: center !important;
+}
+
+.k-bg-top {
+    background-position: top;
+}
+
+.\!k-bg-top {
+    background-position: top !important;
+}
+
+.k-bg-right {
+    background-position: right;
+}
+
+.\!k-bg-right {
+    background-position: right !important;
+}
+
+.k-bg-bottom {
+    background-position: bottom;
+}
+
+.\!k-bg-bottom {
+    background-position: bottom !important;
+}
+
+.k-bg-left {
+    background-position: left;
+}
+
+.\!k-bg-left {
+    background-position: left !important;
+}
+
+.k-bg-top-left {
+    background-position: top left;
+}
+
+.\!k-bg-top-left {
+    background-position: top left !important;
+}
+
+.k-bg-top-right {
+    background-position: top right;
+}
+
+.\!k-bg-top-right {
+    background-position: top right !important;
+}
+
+.k-bg-bottom-left {
+    background-position: bottom left;
+}
+
+.\!k-bg-bottom-left {
+    background-position: bottom left !important;
+}
+
+.k-bg-bottom-right {
+    background-position: bottom right;
+}
+
+.\!k-bg-bottom-right {
+    background-position: bottom right !important;
+}
+
+.k-bg-auto {
+    background-size: auto;
+}
+
+.\!k-bg-auto {
+    background-size: auto !important;
+}
+
+.k-bg-cover {
+    background-size: cover;
+}
+
+.\!k-bg-cover {
+    background-size: cover !important;
+}
+
+.k-bg-contain {
+    background-size: contain;
+}
+
+.\!k-bg-contain {
+    background-size: contain !important;
+}
+
 .k-border-inherit {
     border-color: inherit;
 }

package/dist/all.scss

@@ -2433,6 +2433,22 @@ $kendo-utils: (
         "black": black,
         "white": white
     )),
+    "background-position": (
+        center: center,
+        top: top,
+        right: right,
+        bottom: bottom,
+        left: left,
+        top-left: top left,
+        top-right: top right,
+        bottom-left: bottom left,
+        bottom-right: bottom right
+    ),
+    "background-size": (
+        auto,
+        cover,
+        contain
+    ),
 
     // Border
     "border-width": (
@@ -2842,25 +2858,25 @@ $kendo-utils: (
 /// This is equivalent to `clear: left;`.
 /// @example clear: left;
 /// @name .k-clear-left
-/// @group float
+/// @group clear
 /// @contextType css
 
 /// This is equivalent to `clear: right;`.
 /// @example clear: right;
 /// @name .k-clear-right
-/// @group float
+/// @group clear
 /// @contextType css
 
 /// This is equivalent to `clear: both;`.
 /// @example clear: both;
 /// @name .k-clear-both
-/// @group float
+/// @group clear
 /// @contextType css
 
 /// This is equivalent to `clear: none;`.
 /// @example clear: none;
 /// @name .k-clear-none
-/// @group float
+/// @group clear
 /// @contextType css
 
 @mixin kendo-utils--layout--clear() {
@@ -3305,91 +3321,91 @@ $kendo-utils: (
 /// This is equivalent to `top: 0;`.
 /// @example top: 0;
 /// @name .k-top-0
-/// @group position
+/// @group placement
 /// @contextType css
 
 /// This is equivalent to `right: 0;`.
 /// @example right: 0;
 /// @name .k-right-0
-/// @group position
+/// @group placement
 /// @contextType css
 
 /// This is equivalent to `bottom: 0;`.
 /// @example bottom: 0;
 /// @name .k-bottom-0
-/// @group position
+/// @group placement
 /// @contextType css
 
 /// This is equivalent to `left: 0;`.
 /// @example left: 0;
 /// @name .k-left-0
-/// @group position
+/// @group placement
 /// @contextType css
 
 /// This is equivalent to `top: 0;`.
 /// @example top: 0;
 /// @name .k-pos-top-0
-/// @group position
+/// @group placement
 /// @contextType css
 
 /// This is equivalent to `right: 0;`.
 /// @example right: 0;
 /// @name .k-pos-right-0
-/// @group position
+/// @group placement
 /// @contextType css
 
 /// This is equivalent to `bottom: 0;`.
 /// @example bottom: 0;
 /// @name .k-pos-bottom-0
-/// @group position
+/// @group placement
 /// @contextType css
 
 /// This is equivalent to `left: 0;`.
 /// @example left: 0;
 /// @name .k-pos-left-0
-/// @group position
+/// @group placement
 /// @contextType css
 
 /// This is equivalent to `top: 0; left: 0;`.
 /// @example top: 0; left: 0;
 /// @name .k-top-left-0
-/// @group position
+/// @group placement
 /// @contextType css
 
 /// This is equivalent to `top: 0; right: 0;`.
 /// @example top: 0; right: 0;
 /// @name .k-top-right-0
-/// @group position
+/// @group placement
 /// @contextType css
 
 /// This is equivalent to `bottom: 0; left: 0;`.
 /// @example bottom: 0; left: 0;
 /// @name .k-bottom-left-0
-/// @group position
+/// @group placement
 /// @contextType css
 
 /// This is equivalent to `bottom: 0; right: 0;`.
 /// @example bottom: 0; right: 0;
 /// @name .k-bottom-right-0
-/// @group position
+/// @group placement
 /// @contextType css
 
-/// This is equivalent to `inset: 0;`.This is a shorthand that corresponds to the top: 0; right: 0; bottom: 0; and/or left: 0 properties. It has the same multi-value syntax of the margin shorthand.
+/// This is equivalent to `inset: 0;`.
 /// @example inset: 0;
 /// @name .k-inset-0
-/// @group position
+/// @group placement
 /// @contextType css
 
 /// This is equivalent to `inset-inline: 0;`.
 /// @example inset-inline: 0;
 /// @name .k-inset-x-0
-/// @group position
+/// @group placement
 /// @contextType css
 
 /// This is equivalent to `inset-block: 0;`.
 /// @example inset-block: 0;
 /// @name .k-inset-y-0
-/// @group position
+/// @group placement
 /// @contextType css
 
 @mixin kendo-utils--layout--placement() {
@@ -3401,7 +3417,7 @@ $kendo-utils: (
     @include generate-utils( left, left, $kendo-utils-placement );
 
 
-    // Position length utility classes
+    // placement length utility classes
     @each $side in (top, right, bottom, left) {
         .#{$kendo-prefix}#{$side},
         .#{$kendo-prefix}pos-#{$side} { #{$side}: 0; } // sass-lint:disable-line brace-style
@@ -4294,37 +4310,37 @@ $kendo-utils: (
 // #region @import "./_grid-auto-flow.scss"; -> scss/flex-grid/_grid-auto-flow.scss
 /// This is equivalent to `grid-auto-flow: row;`.
 /// @example grid-auto-flow: row;
-/// @name .k-grid-auto-flow-row
+/// @name .k-grid-flow-row
 /// @group grid-auto-flow
 /// @contextType css
 
 /// This is equivalent to `grid-auto-flow: column;`.
 /// @example grid-auto-flow: column;
-/// @name .k-grid-auto-flow-column
+/// @name .k-grid-flow-column
 /// @group grid-auto-flow
 /// @contextType css
 
 /// This is equivalent to `grid-auto-flow: dense;`.
 /// @example grid-auto-flow: dense;
-/// @name .k-grid-auto-flow-dense
+/// @name .k-grid-flow-dense
 /// @group grid-auto-flow
 /// @contextType css
 
 /// This is equivalent to `grid-auto-flow: row dense;`.
 /// @example grid-auto-flow: row dense;
-/// @name .k-grid-auto-flow-row-dense
+/// @name .k-grid-flow-row-dense
 /// @group grid-auto-flow
 /// @contextType css
 
 /// This is equivalent to `grid-auto-flow: col dense;`.
 /// @example grid-auto-flow: col dense;
-/// @name .k-grid-auto-flow-col-dense
+/// @name .k-grid-flow-col-dense
 /// @group grid-auto-flow
 /// @contextType css
 
 /// This is equivalent to `grid-auto-flow: unset;`.
 /// @example grid-auto-flow: unset;
-/// @name .k-grid-auto-flow-unset
+/// @name .k-grid-flow-unset
 /// @group grid-auto-flow
 /// @contextType css
 
@@ -5696,7 +5712,7 @@ $kendo-utils: (
 
 /// This is equivalent to `padding: 0.75rem;`.
 /// @example padding: 0.75rem;
-/// @name .k-p-pd
+/// @name .k-p-md
 /// @group padding
 /// @contextType css
 
@@ -7091,12 +7107,106 @@ $kendo-utils: (
 
 }
 
+// #endregion
+// #region @import "./_background-position.scss"; -> scss/background/_background-position.scss
+/// This is equivalent to `background-position: center;`.
+/// @example background-position: center;
+/// @name .k-bg-center
+/// @group background-position
+/// @contextType css
+
+/// This is equivalent to `background-position: top;`.
+/// @example background-position: top;
+/// @name .k-bg-top
+/// @group background-position
+/// @contextType css
+
+/// This is equivalent to `background-position: right;`.
+/// @example background-position: right;
+/// @name .k-bg-right
+/// @group background-position
+/// @contextType css
+
+/// This is equivalent to `background-position: bottom;`.
+/// @example background-position: bottom;
+/// @name .k-bg-bottom
+/// @group background-position
+/// @contextType css
+
+/// This is equivalent to `background-position: left;`.
+/// @example background-position: left;
+/// @name .k-bg-left
+/// @group background-position
+/// @contextType css
+
+/// This is equivalent to `background-position: top left;`.
+/// @example background-position: top left;
+/// @name .k-bg-top-left
+/// @group background-position
+/// @contextType css
+
+/// This is equivalent to `background-position: top right;`.
+/// @example background-position: top right;
+/// @name .k-bg-top-right
+/// @group background-position
+/// @contextType css
+
+/// This is equivalent to `background-position: bottom left;`.
+/// @example background-position: bottom left;
+/// @name .k-bg-bottom-left
+/// @group background-position
+/// @contextType css
+
+/// This is equivalent to `background-position: bottom right;`.
+/// @example background-position: bottom right;
+/// @name .k-bg-bottom-right
+/// @group background-position
+/// @contextType css
+
+@mixin kendo-utils--background--background-position() {
+
+    // Background position utility classes
+    $kendo-utils-background-position: k-map-get( $kendo-utils, "background-position" ) !default;
+    @include generate-utils( bg, background-position, $kendo-utils-background-position );
+
+}
+
+// #endregion
+// #region @import "./_background-size.scss"; -> scss/background/_background-size.scss
+/// This is equivalent to `background-size: auto;`.
+/// @example background-size: auto;
+/// @name .k-bg-auto
+/// @group background-size
+/// @contextType css
+
+/// This is equivalent to `background-size: cover;`.
+/// @example background-size: cover;
+/// @name .k-bg-cover
+/// @group background-size
+/// @contextType css
+
+/// This is equivalent to `background-size: contain;`.
+/// @example background-size: contain;
+/// @name .k-bg-contain
+/// @group background-size
+/// @contextType css
+
+@mixin kendo-utils--background--background-size() {
+
+    // Background size utility classes
+    $kendo-utils-background-size: k-map-get( $kendo-utils, "background-size" ) !default;
+    @include generate-utils( bg, background-size, $kendo-utils-background-size );
+
+}
+
 // #endregion
 
 
 @mixin kendo-utils--background() {
     @include kendo-utils--background--background-clip();
     @include kendo-utils--background--background-color();
+    @include kendo-utils--background--background-position();
+    @include kendo-utils--background--background-size();
 }
 
 // #endregion