From 1681b4ff2aedc92abe01192a45bea4e6410d25e6 Mon Sep 17 00:00:00 2001
From: Magdalena Angelova <magdalena.angelova@progress.com>
Date: Fri, 21 Apr 2023 17:05:53 +0300
Subject: [PATCH] feat(utils): add background position and size

---
 packages/utils/docs/customization.md          | 84 +++++++++++++++++++
 packages/utils/scss/_variables.scss           | 16 ++++
 .../scss/background/_background-position.scss | 61 ++++++++++++++
 .../scss/background/_background-size.scss     | 25 ++++++
 .../utils/scss/background/index.import.scss   |  4 +
 5 files changed, 190 insertions(+)
 create mode 100644 packages/utils/scss/background/_background-position.scss
 create mode 100644 packages/utils/scss/background/_background-size.scss

diff --git a/packages/utils/docs/customization.md b/packages/utils/docs/customization.md
index 2911dda78c..85ff98e055 100644
--- a/packages/utils/docs/customization.md
+++ b/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;`.
diff --git a/packages/utils/scss/_variables.scss b/packages/utils/scss/_variables.scss
index df5c970f3d..17673d15d3 100644
--- a/packages/utils/scss/_variables.scss
+++ b/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": (
diff --git a/packages/utils/scss/background/_background-position.scss b/packages/utils/scss/background/_background-position.scss
new file mode 100644
index 0000000000..4a734cd29b
--- /dev/null
+++ b/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 );
+
+}
diff --git a/packages/utils/scss/background/_background-size.scss b/packages/utils/scss/background/_background-size.scss
new file mode 100644
index 0000000000..b815722b85
--- /dev/null
+++ b/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 );
+
+}
diff --git a/packages/utils/scss/background/index.import.scss b/packages/utils/scss/background/index.import.scss
index 313ff2f0a9..3621d6059b 100644
--- a/packages/utils/scss/background/index.import.scss
+++ b/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();
 }