From 640c9f13fb72dc4087a06335374edf3bcad13e13 Mon Sep 17 00:00:00 2001
From: Dimitar Kalaydzhiev <dkalaydz@progress.com>
Date: Fri, 2 Sep 2022 19:30:11 +0300
Subject: [PATCH] feat(scroller): add fluent styles

---
 packages/fluent/scss/index.scss               |  6 +-
 packages/fluent/scss/scroller/_layout.scss    | 84 +++++++++++++++++++
 packages/fluent/scss/scroller/_theme.scss     |  8 ++
 packages/fluent/scss/scroller/_variables.scss |  1 +
 packages/fluent/scss/scroller/index.scss      | 23 +++++
 5 files changed, 118 insertions(+), 4 deletions(-)
 create mode 100644 packages/fluent/scss/scroller/_layout.scss
 create mode 100644 packages/fluent/scss/scroller/_theme.scss
 create mode 100644 packages/fluent/scss/scroller/_variables.scss
 create mode 100644 packages/fluent/scss/scroller/index.scss

diff --git a/packages/fluent/scss/index.scss b/packages/fluent/scss/index.scss
index 417c2f8a6f7..53c0ecc2f7b 100644
--- a/packages/fluent/scss/index.scss
+++ b/packages/fluent/scss/index.scss
@@ -148,7 +148,7 @@
 @use "mediaplayer";
 // @use "timeline";
 // @use "pdf-viewer";
-// @use "scroller";
+@use "scroller";
 // @use "scrollview";
 
 
@@ -166,11 +166,9 @@
     // Typography and utils
     @include typography.styles();
     @include utils.styles();
-    // @include cursor.styles();
 
 
     // Generic content
-    // @include styling.styles();
     @include icon.styles();
     @include messagebox.styles();
 
@@ -310,7 +308,7 @@
     @include mediaplayer.styles();
     // @include timeline.styles();
     // @include pdf-viewer.styles();
-    // @include scroller.styles();
+    @include scroller.styles();
     // @include scrollview.styles();
 
 
diff --git a/packages/fluent/scss/scroller/_layout.scss b/packages/fluent/scss/scroller/_layout.scss
new file mode 100644
index 00000000000..4d8f6ea6de4
--- /dev/null
+++ b/packages/fluent/scss/scroller/_layout.scss
@@ -0,0 +1,84 @@
+@use "_variables.scss" as *;
+
+@mixin kendo-scroller--layout() {
+
+    // Layout
+    .km-scrollview,
+    .km-scroll-container {
+        user-select: none;
+        border-collapse: separate;
+    }
+    .km-scroll-wrapper {
+        position: relative;
+    }
+    .km-scroll-header {
+        position: absolute;
+        z-index: 1001;
+        width: 100%;
+        top: 0;
+        left: 0;
+    }
+
+
+    // Pull to refresh
+    .km-scroller-pull {
+        width: 100%;
+        display: block;
+        position: absolute;
+        line-height: 3em;
+        font-size: 1.4em;
+        text-align: center;
+        transform: translate3d(0, -3em, 0);
+    }
+    .km-scroller-pull .km-template {
+        display: inline-block;
+        min-width: 200px;
+        text-align: left;
+    }
+    .km-load-more .km-icon,
+    .km-widget .km-scroller-pull .km-icon {
+        display: inline-block;
+        height: 2rem;
+        margin-right: 1rem;
+        vertical-align: middle;
+        width: 2rem;
+        font-size: 2rem;
+        transform: rotate(0deg);
+        transition: transform 300ms linear;
+    }
+    .km-widget .km-scroller-release .km-icon {
+        transform: rotate(180deg);
+    }
+    .km-widget .km-scroller-refresh .km-icon {
+        transition: none;
+    }
+
+
+    // Scrollbar
+    .km-touch-scrollbar {
+        position: absolute;
+        visibility: hidden;
+        z-index: 200000;
+        height: .4em;
+        width: .4em;
+        opacity: 0;
+        transform-origin: 0 0;
+        transition: opacity .3s linear;
+
+        .k-map &,
+        .k-diagram & {
+            display: none;
+        }
+    }
+    .km-vertical-scrollbar {
+        height: 100%;
+        right: 2px;
+        top: 0;
+    }
+    .km-horizontal-scrollbar {
+        width: 100%;
+        left: 0;
+        bottom: 2px;
+    }
+
+}
diff --git a/packages/fluent/scss/scroller/_theme.scss b/packages/fluent/scss/scroller/_theme.scss
new file mode 100644
index 00000000000..63842810107
--- /dev/null
+++ b/packages/fluent/scss/scroller/_theme.scss
@@ -0,0 +1,8 @@
+@use "_variables.scss" as *;
+
+@mixin kendo-scroller--theme() {
+
+    .km-touch-scrollbar {
+        background-color: #333333;
+    }
+}
diff --git a/packages/fluent/scss/scroller/_variables.scss b/packages/fluent/scss/scroller/_variables.scss
new file mode 100644
index 00000000000..d49c3f6bf3c
--- /dev/null
+++ b/packages/fluent/scss/scroller/_variables.scss
@@ -0,0 +1 @@
+@use "../core/color-system" as *;
diff --git a/packages/fluent/scss/scroller/index.scss b/packages/fluent/scss/scroller/index.scss
new file mode 100644
index 00000000000..e4b30968a6a
--- /dev/null
+++ b/packages/fluent/scss/scroller/index.scss
@@ -0,0 +1,23 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "scroller",
+    dependencies: ()
+);
+
+
+// Component
+@forward "_variables.scss";
+@use "_layout.scss" as *;
+@use "_theme.scss" as *;
+
+// Register
+@use "../core/module-system/" as module;
+@include module.register( $_kendo-module-meta... );
+
+// Expose
+@mixin styles() {
+    @include module.render( "scroller" ) {
+        @include kendo-scroller--layout();
+        @include kendo-scroller--theme();
+    }
+}