From 82ccd6a0e88c425a75d3ab9a3d0adab5084d60df Mon Sep 17 00:00:00 2001
From: Teya Veselinova <tveselin@progress.com>
Date: Fri, 24 Apr 2020 16:02:28 +0300
Subject: [PATCH] feat(tilelayout): add styles

---
 packages/bootstrap/scss/_variables.scss       | 13 +++
 packages/bootstrap/scss/all.scss              |  1 +
 .../bootstrap/scss/tilelayout/_index.scss     | 12 +++
 .../bootstrap/scss/tilelayout/_layout.scss    |  1 +
 .../bootstrap/scss/tilelayout/_theme.scss     |  1 +
 packages/default/scss/_variables.scss         | 13 +++
 packages/default/scss/all.scss                |  1 +
 packages/default/scss/tilelayout/_index.scss  | 12 +++
 packages/default/scss/tilelayout/_layout.scss | 30 ++++++
 packages/default/scss/tilelayout/_theme.scss  | 16 +++
 packages/material/scss/_variables.scss        | 13 +++
 packages/material/scss/all.scss               |  1 +
 packages/material/scss/tilelayout/_index.scss | 12 +++
 .../material/scss/tilelayout/_layout.scss     |  1 +
 packages/material/scss/tilelayout/_theme.scss |  1 +
 tests/visual/tilelayout.html                  | 99 +++++++++++++++++++
 16 files changed, 227 insertions(+)
 create mode 100644 packages/bootstrap/scss/tilelayout/_index.scss
 create mode 100644 packages/bootstrap/scss/tilelayout/_layout.scss
 create mode 100644 packages/bootstrap/scss/tilelayout/_theme.scss
 create mode 100644 packages/default/scss/tilelayout/_index.scss
 create mode 100644 packages/default/scss/tilelayout/_layout.scss
 create mode 100644 packages/default/scss/tilelayout/_theme.scss
 create mode 100644 packages/material/scss/tilelayout/_index.scss
 create mode 100644 packages/material/scss/tilelayout/_layout.scss
 create mode 100644 packages/material/scss/tilelayout/_theme.scss
 create mode 100644 tests/visual/tilelayout.html

diff --git a/packages/bootstrap/scss/_variables.scss b/packages/bootstrap/scss/_variables.scss
index 1ea23581022..dccc70cc166 100644
--- a/packages/bootstrap/scss/_variables.scss
+++ b/packages/bootstrap/scss/_variables.scss
@@ -2425,6 +2425,19 @@ $splitbar-selected-bg: $selected-bg !default;
 $splitbar-selected-text: $selected-text !default;
 
 
+// TileLayout
+$tilelayout-border-width: 0 !default;
+$tilelayout-card-border-width: $card-border-width !default;
+
+$tilelayout-hint-border-width: 1px !default;
+$tilelayout-hint-border-radius: $card-border-radius !default;
+
+$tilelayout-bg: $gray-100 !default;
+
+$tilelayout-hint-bg: rgba(255, 255, 255, .2) !default;
+$tilelayout-hint-border: $component-border !default;
+
+
 // Filter expression builder
 $filter-padding-x: $padding-x !default;
 $filter-padding-y: $padding-y !default;
diff --git a/packages/bootstrap/scss/all.scss b/packages/bootstrap/scss/all.scss
index 9575568bc59..5ea8e8bce6f 100644
--- a/packages/bootstrap/scss/all.scss
+++ b/packages/bootstrap/scss/all.scss
@@ -89,6 +89,7 @@
 @import "layout/_index.scss";
 @import "card/_index.scss";
 @import "splitter/_index.scss";
+@import "tilelayout/_index.scss";
 
 
 // Data management
diff --git a/packages/bootstrap/scss/tilelayout/_index.scss b/packages/bootstrap/scss/tilelayout/_index.scss
new file mode 100644
index 00000000000..f3ceed6dda3
--- /dev/null
+++ b/packages/bootstrap/scss/tilelayout/_index.scss
@@ -0,0 +1,12 @@
+@import "../_variables.scss";
+@import "../mixins/_index.scss";
+
+
+// Dependencies
+@import "../common/_index.scss";
+@import "../card/_index.scss";
+
+
+// Component
+@import "_layout.scss";
+@import "_theme.scss";
diff --git a/packages/bootstrap/scss/tilelayout/_layout.scss b/packages/bootstrap/scss/tilelayout/_layout.scss
new file mode 100644
index 00000000000..69cc47a5f8e
--- /dev/null
+++ b/packages/bootstrap/scss/tilelayout/_layout.scss
@@ -0,0 +1 @@
+@import "~@progress/kendo-theme-default/scss/tilelayout/_layout.scss";
diff --git a/packages/bootstrap/scss/tilelayout/_theme.scss b/packages/bootstrap/scss/tilelayout/_theme.scss
new file mode 100644
index 00000000000..cdf153a6b7e
--- /dev/null
+++ b/packages/bootstrap/scss/tilelayout/_theme.scss
@@ -0,0 +1 @@
+@import "~@progress/kendo-theme-default/scss/tilelayout/_theme.scss";
diff --git a/packages/default/scss/_variables.scss b/packages/default/scss/_variables.scss
index ccc0949ffc4..66519275bf5 100644
--- a/packages/default/scss/_variables.scss
+++ b/packages/default/scss/_variables.scss
@@ -2431,6 +2431,19 @@ $splitbar-selected-bg: $selected-bg !default;
 $splitbar-selected-text: contrast-wcag( $splitbar-selected-bg ) !default;
 
 
+// TileLayout
+$tilelayout-border-width: 0 !default;
+$tilelayout-card-border-width: $card-border-width !default;
+
+$tilelayout-hint-border-width: 1px !default;
+$tilelayout-hint-border-radius: $border-radius-lg !default;
+
+$tilelayout-bg: $base-bg !default;
+
+$tilelayout-hint-bg: rgba(255, 255, 255, .2) !default;
+$tilelayout-hint-border: $component-border !default;
+
+
 // Filter expression builder
 $filter-padding-x: $padding-x !default;
 $filter-padding-y: $padding-y !default;
diff --git a/packages/default/scss/all.scss b/packages/default/scss/all.scss
index 9575568bc59..5ea8e8bce6f 100644
--- a/packages/default/scss/all.scss
+++ b/packages/default/scss/all.scss
@@ -89,6 +89,7 @@
 @import "layout/_index.scss";
 @import "card/_index.scss";
 @import "splitter/_index.scss";
+@import "tilelayout/_index.scss";
 
 
 // Data management
diff --git a/packages/default/scss/tilelayout/_index.scss b/packages/default/scss/tilelayout/_index.scss
new file mode 100644
index 00000000000..f3ceed6dda3
--- /dev/null
+++ b/packages/default/scss/tilelayout/_index.scss
@@ -0,0 +1,12 @@
+@import "../_variables.scss";
+@import "../mixins/_index.scss";
+
+
+// Dependencies
+@import "../common/_index.scss";
+@import "../card/_index.scss";
+
+
+// Component
+@import "_layout.scss";
+@import "_theme.scss";
diff --git a/packages/default/scss/tilelayout/_layout.scss b/packages/default/scss/tilelayout/_layout.scss
new file mode 100644
index 00000000000..b814b23720c
--- /dev/null
+++ b/packages/default/scss/tilelayout/_layout.scss
@@ -0,0 +1,30 @@
+@include exports("tilelayout/layout") {
+
+    .k-tilelayout {
+        @include use-background-clip();
+        border-width: $tilelayout-border-width;
+        border-style: solid;
+        box-sizing: border-box;
+        outline: 0;
+        display: grid;
+        -webkit-touch-callout: none;
+        -webkit-tap-highlight-color: $rgba-transparent;
+
+        .k-card {
+            @include box-shadow( none );
+            border-width: $tilelayout-card-border-width;
+        }
+    }
+
+    .k-layout-item-hint {
+        @include border-radius( $tilelayout-hint-border-radius );
+        border-width: $tilelayout-hint-border-width;
+        border-style: solid;
+        position: relative;
+
+        &.k-layout-item-hint-resize {
+            z-index: 3;
+        }
+    }
+
+}
diff --git a/packages/default/scss/tilelayout/_theme.scss b/packages/default/scss/tilelayout/_theme.scss
new file mode 100644
index 00000000000..f689b2524b4
--- /dev/null
+++ b/packages/default/scss/tilelayout/_theme.scss
@@ -0,0 +1,16 @@
+@include exports("tilelayout/theme") {
+
+    .k-tilelayout {
+        @include fill(
+            $bg: $tilelayout-bg
+        );
+    }
+
+    .k-layout-item-hint {
+        @include fill(
+            $bg: $tilelayout-hint-bg,
+            $border: $tilelayout-hint-border
+        );
+    }
+
+}
diff --git a/packages/material/scss/_variables.scss b/packages/material/scss/_variables.scss
index 9e50e33c26e..71d7da55c02 100644
--- a/packages/material/scss/_variables.scss
+++ b/packages/material/scss/_variables.scss
@@ -2478,6 +2478,19 @@ $splitbar-selected-bg: $primary !default;
 $splitbar-selected-text: contrast-wcag( $splitbar-selected-bg ) !default;
 
 
+// TileLayout
+$tilelayout-border-width: 0 !default;
+$tilelayout-card-border-width: 1px !default;
+
+$tilelayout-hint-border-width: 1px !default;
+$tilelayout-hint-border-radius: $border-radius !default;
+
+$tilelayout-bg: if( $is-dark-theme, $dark, $light) !default;
+
+$tilelayout-hint-bg: rgba(255, 255, 255, .2) !default;
+$tilelayout-hint-border: $component-border !default;
+
+
 // Filter expression builder
 $filter-padding-x: $padding-x-sm !default;
 $filter-padding-y: $filter-padding-x !default;
diff --git a/packages/material/scss/all.scss b/packages/material/scss/all.scss
index 9575568bc59..5ea8e8bce6f 100644
--- a/packages/material/scss/all.scss
+++ b/packages/material/scss/all.scss
@@ -89,6 +89,7 @@
 @import "layout/_index.scss";
 @import "card/_index.scss";
 @import "splitter/_index.scss";
+@import "tilelayout/_index.scss";
 
 
 // Data management
diff --git a/packages/material/scss/tilelayout/_index.scss b/packages/material/scss/tilelayout/_index.scss
new file mode 100644
index 00000000000..f3ceed6dda3
--- /dev/null
+++ b/packages/material/scss/tilelayout/_index.scss
@@ -0,0 +1,12 @@
+@import "../_variables.scss";
+@import "../mixins/_index.scss";
+
+
+// Dependencies
+@import "../common/_index.scss";
+@import "../card/_index.scss";
+
+
+// Component
+@import "_layout.scss";
+@import "_theme.scss";
diff --git a/packages/material/scss/tilelayout/_layout.scss b/packages/material/scss/tilelayout/_layout.scss
new file mode 100644
index 00000000000..69cc47a5f8e
--- /dev/null
+++ b/packages/material/scss/tilelayout/_layout.scss
@@ -0,0 +1 @@
+@import "~@progress/kendo-theme-default/scss/tilelayout/_layout.scss";
diff --git a/packages/material/scss/tilelayout/_theme.scss b/packages/material/scss/tilelayout/_theme.scss
new file mode 100644
index 00000000000..cdf153a6b7e
--- /dev/null
+++ b/packages/material/scss/tilelayout/_theme.scss
@@ -0,0 +1 @@
+@import "~@progress/kendo-theme-default/scss/tilelayout/_theme.scss";
diff --git a/tests/visual/tilelayout.html b/tests/visual/tilelayout.html
new file mode 100644
index 00000000000..5f4b08650a2
--- /dev/null
+++ b/tests/visual/tilelayout.html
@@ -0,0 +1,99 @@
+<!doctype html>
+<html lang="en" class="k-typography k-no-animations">
+<head>
+    <title>Tile Layout</title>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" data-role="kendo-theme" href="../../packages/default/dist/all.css" />
+    <link rel="stylesheet" href="assets/styles.css" />
+    <script src="assets/scripts.js"></script>
+</head>
+<body>
+
+    <div id="test-area">
+        <div id="tilelayout" class="k-widget k-tilelayout" style="grid-template-columns: repeat(5, minmax(0px, 1fr)); grid-template-rows: repeat(5, minmax(0px, 1fr)); gap: 16px; width: 1000px; padding: 16px;">
+            <div class="k-tilelayout-item k-card" style="order: 0; grid-column-end: span 1; grid-row-end: span 1;">
+                <div class="k-tilelayout-item-header k-card-header">
+                    Title goes here
+                </div>
+                <div class="k-tilelayout-item-body k-card-body">
+                    Content goes here
+                </div>
+            </div>
+            <div class="k-tilelayout-item k-card" style="order: 1; grid-column-end: span 1; grid-row-end: span 1;">
+                <div class="k-tilelayout-item-header k-card-header">
+                    Title goes here
+                </div>
+                <div class="k-tilelayout-item-body k-card-body">
+                    Content goes here
+                </div>
+            </div>
+            <div class="k-tilelayout-item k-card" style="order: 2;grid-column-end: span 1;grid-row-end: span 2; width: 250px; position: absolute; height: 198px;left: 430px;">
+                <div class="k-tilelayout-item-header k-card-header">
+                    Title goes here
+                </div>
+                <div class="k-tilelayout-item-body k-card-body">
+                    Content goes here
+                </div>
+            </div>
+            <div class="k-resize-handle k-cursor-ew-resize" style="top: 36px; left: 674px; height: 196px; width: 9px;"></div>
+            <div class="k-layout-item-hint k-layout-item-hint-resize" style="order: 2;grid-column-end: span 2;grid-row-end: span 2;"></div>
+            <div class="k-tilelayout-item k-card" style="order: 3; grid-column-end: span 1; grid-row-end: span 1;">
+                <div class="k-tilelayout-item-header k-card-header">
+                    Title goes here
+                </div>
+                <div class="k-tilelayout-item-body k-card-body">
+                    Content goes here
+                </div>
+            </div>
+            <div class="k-tilelayout-item k-card" style="order: 4; grid-column-end: span 1; grid-row-end: span 2;">
+                <div class="k-tilelayout-item-header k-card-header">
+                    Title goes here
+                </div>
+                <div class="k-tilelayout-item-body k-card-body">
+                    Content goes here
+                </div>
+            </div>
+            <div class="k-tilelayout-item k-card" style="order: 5; grid-column-end: span 1; grid-row-end: span 1;">
+                <div class="k-tilelayout-item-header k-card-header">
+                    Title goes here
+                </div>
+                <div class="k-tilelayout-item-body k-card-body">
+                    Content goes here
+                </div>
+            </div>
+            <div class="k-tilelayout-item k-card" style="order: 6; grid-column-end: span 1; grid-row-end: span 1;">
+                <div class="k-tilelayout-item-header k-card-header">
+                    Title goes here
+                </div>
+                <div class="k-tilelayout-item-body k-card-body">
+                    Content goes here
+                </div>
+            </div>
+            <div class="k-tilelayout-item k-card" style="order: 7; grid-column-end: span 1; grid-row-end: span 2;">
+                <div class="k-tilelayout-item-header k-card-header">
+                    Title goes here
+                </div>
+                <div class="k-tilelayout-item-body k-card-body">
+                    Content goes here
+                </div>
+            </div>
+            <div class="k-tilelayout-item k-card" style="order: 8; grid-column-end: span 1; grid-row-end: span 1;">
+                <div class="k-tilelayout-item-header k-card-header">
+                    Title goes here
+                </div>
+                <div class="k-tilelayout-item-body k-card-body">
+                    Content goes here
+                </div>
+            </div>
+            <div class="k-tilelayout-item k-card" style="order: 9; grid-column-end: span 1; grid-row-end: span 2;">
+                <div class="k-tilelayout-item-header k-card-header">
+                    Title goes here
+                </div>
+                <div class="k-tilelayout-item-body k-card-body">
+                    Content goes here
+                </div>
+            </div>
+        </div>
+    </div>
+</body>
+</html>