feat(utils): add background position and size

packages/utils/docs/customization.md

@@ -419,6 +419,90 @@ This is equivalent to `background-color: white;`.
 
 
 
+### `.k-bg-center`
+
+This is equivalent to `background-position: center;`.
+
+
+
+
+### `.k-bg-top`
+
+This is equivalent to `background-position: top;`.
+
+
+
+
+### `.k-bg-right`
+
+This is equivalent to `background-position: right;`.
+
+
+
+
+### `.k-bg-bottom`
+
+This is equivalent to `background-position: bottom;`.
+
+
+
+
+### `.k-bg-left`
+
+This is equivalent to `background-position: left;`.
+
+
+
+
+### `.k-bg-top-left`
+
+This is equivalent to `background-position: top left;`.
+
+
+
+
+### `.k-bg-top-right`
+
+This is equivalent to `background-position: top right;`.
+
+
+
+
+### `.k-bg-bottom-left`
+
+This is equivalent to `background-position: bottom left;`.
+
+
+
+
+### `.k-bg-bottom-right`
+
+This is equivalent to `background-position: bottom right;`.
+
+
+
+
+### `.k-bg-auto`
+
+This is equivalent to `background-size: auto;`.
+
+
+
+
+### `.k-bg-cover`
+
+This is equivalent to `background-size: cover;`.
+
+
+
+
+### `.k-bg-contain`
+
+This is equivalent to `background-size: contain;`.
+
+
+
+
 ### `.k-border-collapse`
 
 This is equivalent to `border-collapse: collapse;`.

packages/utils/scss/_variables.scss

@@ -765,6 +765,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": (

packages/utils/scss/background/_background-position.scss

@@ -0,0 +1,61 @@
+/// 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 );
+
+}

packages/utils/scss/background/_background-size.scss

@@ -0,0 +1,25 @@
+/// 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 );
+
+}

packages/utils/scss/background/index.import.scss

@@ -1,8 +1,12 @@
 @import "./_background-clip.scss";
 @import "./_background-color.scss";
+@import "./_background-position.scss";
+@import "./_background-size.scss";
 
 
 @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();
 }