From a5ce29c00a09258df000ec491f467644b9131fd7 Mon Sep 17 00:00:00 2001
From: Kiril Kostadinov <kkostadi@progress.com>
Date: Wed, 7 Sep 2022 11:26:10 +0300
Subject: [PATCH] feat(scrollview): add fluent styles

---
 packages/fluent/scss/index.scss               |   4 +-
 packages/fluent/scss/scrollview/_layout.scss  | 195 ++++++++++++++++++
 packages/fluent/scss/scrollview/_theme.scss   |  91 ++++++++
 .../fluent/scss/scrollview/_variables.scss    | 110 ++++++++++
 packages/fluent/scss/scrollview/index.scss    |  26 +++
 5 files changed, 424 insertions(+), 2 deletions(-)
 create mode 100644 packages/fluent/scss/scrollview/_layout.scss
 create mode 100644 packages/fluent/scss/scrollview/_theme.scss
 create mode 100644 packages/fluent/scss/scrollview/_variables.scss
 create mode 100644 packages/fluent/scss/scrollview/index.scss

diff --git a/packages/fluent/scss/index.scss b/packages/fluent/scss/index.scss
index 7e0c4a5d5c2..a719c50b897 100644
--- a/packages/fluent/scss/index.scss
+++ b/packages/fluent/scss/index.scss
@@ -148,7 +148,7 @@
 // @use "timeline";
 @use "pdf-viewer";
 @use "scroller";
-// @use "scrollview";
+@use "scrollview";
 
 
 // Dataviz
@@ -307,7 +307,7 @@
     // @include timeline.styles();
     @include pdf-viewer.styles();
     @include scroller.styles();
-    // @include scrollview.styles();
+    @include scrollview.styles();
 
 
     // Dataviz
diff --git a/packages/fluent/scss/scrollview/_layout.scss b/packages/fluent/scss/scrollview/_layout.scss
new file mode 100644
index 00000000000..fa18089dad4
--- /dev/null
+++ b/packages/fluent/scss/scrollview/_layout.scss
@@ -0,0 +1,195 @@
+@use "../core/color-system" as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-scrollview--layout() {
+    kendo-scrollview.k-scrollview-wrap,
+    kendo-scrollview.k-scrollview,
+    .k-scrollview {
+        border-width: var( --kendo-scrollview-border-width, #{$kendo-scrollview-border-width} );
+        border-style: solid;
+        box-sizing: border-box;
+        outline: 0;
+        font-family: var( --kendo-scrollview-font-family, #{$kendo-scrollview-font-family} );
+        font-size: var( --kendo-scrollview-font-size, #{$kendo-scrollview-font-size} );
+        line-height: var( --kendo-scrollview-line-height, #{$kendo-scrollview-line-height} );
+        position: relative;
+        overflow: hidden;
+        display: block;
+        -webkit-touch-callout: none;
+        -webkit-tap-highlight-color: $rgba-transparent;
+    }
+
+    .k-scrollview-wrap .k-scrollview,
+    .k-scrollview .k-scrollview-wrap {
+        list-style-type: none;
+        position: absolute;
+        margin: 0;
+        padding: 0;
+        width: 100%;
+        height: 100%;
+        cursor: default;
+        white-space: nowrap;
+
+        img {
+            user-select: none;
+        }
+
+        & > li {
+            display: inline-block;
+            overflow: hidden;
+            position: absolute;
+            top: 0;
+            left: 0;
+        }
+
+        & > [data-role="page"] {
+            vertical-align: top;
+            display: inline-block;
+            min-height: 1px;
+        }
+    }
+
+
+    // Blazor rendering
+    .k-scrollview-wrap.k-scrollview-animate {
+        display: flex;
+        flex-flow: row nowrap;
+        width: calc( var(--kendo-scrollview-views, 1) * 100% );
+        transition-duration: var( --kendo-scrollview-transition-duration, #{$kendo-scrollview-transition-duration} );
+        transition-timing-function: var( --kendo-scrollview-transition-timing-function, #{$kendo-scrollview-transition-timing-function} );
+        transform: translateX( calc( -100% / var(--kendo-scrollview-views, 1) * ( var(--kendo-scrollview-current, 1) - 1) ) );
+
+        .k-scrollview-view {
+            width: calc( 100% / var(--kendo-scrollview-views, 1) );
+            flex: 0 0 calc( 100% / var(--kendo-scrollview-views, 1) );
+        }
+    }
+
+
+    kendo-scrollview.k-scrollview-wrap kendo-scrollview-pager,
+    kendo-scrollview.k-scrollview kendo-scrollview-pager,
+    .k-scrollview-nav-wrap {
+        padding: 0;
+        margin: 0;
+        position: absolute;
+        left: 0;
+        right: 0;
+        bottom: var( --kendo-scrollview-pager-offset, #{$kendo-scrollview-pager-offset} );
+        height: var( --kendo-scrollview-pager-height, #{$kendo-scrollview-pager-height} );
+        text-align: center;
+    }
+
+    kendo-scrollview.k-scrollview-wrap kendo-scrollview-pager,
+    kendo-scrollview.k-scrollview kendo-scrollview-pager {
+        pointer-events: none;
+    }
+
+    kendo-scrollview.k-scrollview-wrap .k-scrollview-nav,
+    kendo-scrollview.k-scrollview .k-scrollview-nav {
+        pointer-events: initial;
+    }
+
+    .k-scrollview-pageable,
+    .k-scrollview-nav {
+        margin: 0;
+        padding: var( --kendo-scrollview-pager-item-spacing, #{$kendo-scrollview-pager-item-spacing} );
+        max-width: 100%;
+        box-sizing: border-box;
+        line-height: 0;
+        text-align: center;
+        white-space: nowrap;
+        list-style: none;
+        display: inline-flex;
+        align-items: center;
+        overflow-x: scroll;
+        overflow-y: hidden;
+        pointer-events: initial;
+
+        &:focus {
+            outline: none;
+        }
+    }
+
+    .k-scrollview-nav > .k-link {
+        margin: 0 calc( var( --kendo-scrollview-pager-item-spacing, #{$kendo-scrollview-pager-item-spacing} ) / 2);
+        padding: 0;
+        width: var( --kendo-scrollview-pagebutton-size, #{$kendo-scrollview-pagebutton-size} );
+        height: var( --kendo-scrollview-pagebutton-size, #{$kendo-scrollview-pagebutton-size} );
+        border-width: var( --kendo-scrollview-pager-item-border-width, #{$kendo-scrollview-pager-item-border-width} );
+        border-style: solid;
+        border-radius: 50%;
+        box-sizing: content-box;
+        display: inline-block;
+        position: relative;
+        flex: 0 0 auto;
+        cursor: pointer;
+        pointer-events: all;
+        vertical-align: top;
+
+        &::before {
+            content: "";
+            width: var( --kendo-scrollview-pagebutton-size, #{$kendo-scrollview-pagebutton-size} ) + var( --kendo-scrollview-pager-item-spacing, #{$kendo-scrollview-pager-item-spacing} );
+            height: var( --kendo-scrollview-pagebutton-size, #{$kendo-scrollview-pagebutton-size} ) + var( --kendo-scrollview-pager-item-spacing, #{$kendo-scrollview-pager-item-spacing} );
+            display: block;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            pointer-events: initial;
+            border-radius: 0;
+        }
+    }
+
+    .k-scrollview-next,
+    .k-scrollview-prev {
+        display: table;
+        position: absolute;
+        padding: 0;
+        height: 60%;
+        top: 20%;
+        text-decoration: none;
+        user-select: none;
+        cursor: pointer;
+
+        .k-icon {
+            display: table-cell;
+            overflow: visible;
+            margin: 0;
+            padding: 0;
+            vertical-align: middle;
+            font-size: var( --kendo-scrollview-arrow-icon-size, #{$kendo-scrollview-arrow-icon-size} );
+            font-weight: normal;
+        }
+    }
+
+    .k-scrollview-prev {
+        left: 0;
+    }
+
+    .k-scrollview-next {
+        right: 0;
+    }
+
+
+    .k-scrollview-animation {
+        transition-duration: .3s;
+        transition-timing-function: ease-in-out;
+    }
+
+
+    @supports (-webkit-user-select: none) {
+        kendo-scrollview.k-scrollview-wrap ul.k-scrollview li > *,
+        kendo-scrollview.k-scrollview ul.k-scrollview-wrap li > *,
+        div.k-scrollview ul.k-scrollview-wrap li > * {
+            pointer-events: auto;
+        }
+    }
+
+    @supports (not (-webkit-user-select: none)) {
+        kendo-scrollview.k-scrollview-wrap ul.k-scrollview li > *,
+        kendo-scrollview.k-scrollview ul.k-scrollview-wrap li > *,
+        div.k-scrollview ul.k-scrollview-wrap li > * {
+            pointer-events: none;
+        }
+    }
+}
diff --git a/packages/fluent/scss/scrollview/_theme.scss b/packages/fluent/scss/scrollview/_theme.scss
new file mode 100644
index 00000000000..79241783d17
--- /dev/null
+++ b/packages/fluent/scss/scrollview/_theme.scss
@@ -0,0 +1,91 @@
+@use "../core/mixins" as *;
+@use "../core/color-system" as *;
+@use "_variables.scss" as *;
+
+@mixin kendo-scrollview--theme() {
+
+    kendo-scrollview.k-scrollview-wrap,
+    kendo-scrollview.k-scrollview,
+    div.k-scrollview {
+        @include fill(
+            var( --kendo-scrollview-text, #{$kendo-scrollview-text} ),
+            var( --kendo-scrollview-bg, #{$kendo-scrollview-bg} ),
+            var( --kendo-scrollview-border, #{$kendo-scrollview-border} )
+        );
+
+        &.k-scrollview-dark {
+            kendo-scrollview-pager,
+            .k-scrollview-nav-wrap {
+                background-color: var( --kendo-scrollview-pager-dark-bg, #{$kendo-scrollview-pager-dark-bg} );
+            }
+        }
+
+        &.k-scrollview-light {
+            kendo-scrollview-pager,
+            .k-scrollview-nav-wrap {
+                background-color: var( --kendo-scrollview-pager-light-bg, #{$kendo-scrollview-pager-light-bg} );
+            }
+        }
+    }
+
+    .k-scrollview:focus,
+    .k-scrollview-wrap:focus {
+        outline: none;
+
+    }
+    .k-scrollview-elements {
+        color: var( --kendo-scrollview-navigation-color, #{$kendo-scrollview-navigation-color} );
+    }
+
+    .k-scrollview-next,
+    .k-scrollview-prev {
+        color: var( --kendo-scrollview-navigation-color, #{$kendo-scrollview-navigation-color} );
+        background-color: var( --kendo-scrollview-navigation-bg, #{$kendo-scrollview-navigation-bg} );
+        text-shadow: var( --kendo-scrollview-navigation-arrow-shadow, #{$kendo-scrollview-navigation-arrow-shadow} );
+        outline-width: 0;
+        -webkit-tap-highlight-color: $rgba-transparent;
+
+        &:focus,
+        &.k-focus {
+
+            .k-icon::before {
+                box-shadow: var( --kendo-scrollview-navigation-focus-shadow, #{$kendo-scrollview-navigation-focus-shadow} );
+            }
+        }
+
+        &:hover,
+        &.k-hover {
+            text-shadow: var( --kendo-scrollview-navigation-arrow-hover-shadow, #{$kendo-scrollview-navigation-arrow-hover-shadow} );
+        }
+    }
+
+    .k-scrollview-nav > .k-link {
+        background-color: var( --kendo-scrollview-pagebutton-bg, #{$kendo-scrollview-pagebutton-bg} );
+        border: var( --kendo-scrollview-pagebutton-border, #{$kendo-scrollview-pagebutton-border} );
+
+        &.k-primary {
+            background-color: var( --kendo-scrollview-pagebutton-primary-bg, #{$kendo-scrollview-pagebutton-primary-bg} );
+            border: var( --kendo-scrollview-pagebutton-primary-border, #{$kendo-scrollview-pagebutton-primary-border} );
+
+            &:focus,
+            &.k-focus {
+                box-shadow: var( --kendo-scrollview-pagebutton-primary-focus-shadow, #{$kendo-scrollview-pagebutton-primary-focus-shadow} );
+            }
+
+            &:hover,
+            &.k-hover {
+                box-shadow: var( --kendo-scrollview-pagebutton-primary-hover-shadow, #{$kendo-scrollview-pagebutton-primary-hover-shadow} );
+            }
+        }
+
+        &:focus,
+        &.k-focus {
+            box-shadow: var( --kendo-scrollview-pagebutton-focus-shadow, #{$kendo-scrollview-pagebutton-focus-shadow} );
+        }
+
+        &:hover,
+        &.k-hover {
+            box-shadow: var( --kendo-scrollview-pagebutton-hover-shadow, #{$kendo-scrollview-pagebutton-hover-shadow} );
+        }
+    }
+}
diff --git a/packages/fluent/scss/scrollview/_variables.scss b/packages/fluent/scss/scrollview/_variables.scss
new file mode 100644
index 00000000000..50c56649602
--- /dev/null
+++ b/packages/fluent/scss/scrollview/_variables.scss
@@ -0,0 +1,110 @@
+@use "../core/color-system" as *;
+@use "../button/_variables.scss"as *;
+
+/// Width of the border around the scrollview.
+/// @group scrollview
+$kendo-scrollview-border-width: 0px !default;
+/// Font family of the scrollview.
+/// @group scrollview
+$kendo-scrollview-font-family: var( --kendo-font-family, inherit ) !default;
+/// Font size of the scrollview.
+/// @group scrollview
+$kendo-scrollview-font-size: var( --kendo-font-size, inherit ) !default;
+/// Line height of the scrollview.
+/// @group scrollview
+$kendo-scrollview-line-height: var( --kendo-line-height, normal ) !default;
+
+/// Background color of the scrollview.
+/// @group scrollview
+$kendo-scrollview-bg: var( --kendo-component-bg, inherit ) !default;
+/// Text color of the scrollview.
+/// @group scrollview
+$kendo-scrollview-text: var( --kendo-component-text, inherit ) !default;
+/// Border color of the scrollview.
+/// @group scrollview
+$kendo-scrollview-border: var( --kendo-component-border, inherit ) !default;
+
+/// Scrollview page button size.
+/// @group scrollview
+$kendo-scrollview-pagebutton-size: 10px !default;
+/// Scrollview page background color.
+/// @group scrollview
+$kendo-scrollview-pagebutton-bg: $white !default;
+/// Scrollview page button border color.
+/// @group scrollview
+$kendo-scrollview-pagebutton-border: $kendo-scrollview-pagebutton-bg !default;
+/// Scrollview page button primary background color.
+/// @group scrollview
+$kendo-scrollview-pagebutton-primary-bg: get-theme-color-var( primary-100 ) !default;
+/// Scrollview page button primary border color.
+/// @group scrollview
+$kendo-scrollview-pagebutton-primary-border: $kendo-scrollview-pagebutton-primary-bg !default;
+/// Scrollview page button hover shadow.
+/// @group scrollview
+$kendo-scrollview-pagebutton-hover-shadow: 0 0 0 1px get-theme-color-var( neutral-30 ) !default;
+/// Scrollview page button focus shadow.
+/// @group scrollview
+$kendo-scrollview-pagebutton-focus-shadow: 0 0 0 1px get-theme-color-var( neutral-130 ) !default;
+/// Scrollview page button primary hover shadow.
+/// @group scrollview
+$kendo-scrollview-pagebutton-primary-hover-shadow: 0 0 0 2px get-theme-color-var( neutral-30 ) !default;
+/// Scrollview page button primary focus shadow.
+/// @group scrollview
+$kendo-scrollview-pagebutton-primary-focus-shadow: 0 0 0 2px get-theme-color-var( neutral-130 ) !default;
+
+/// Scrollview pager offset.
+/// @group scrollview
+$kendo-scrollview-pager-offset: 0px !default;
+/// Scrollview pager item spacing.
+/// @group scrollview
+$kendo-scrollview-pager-item-spacing: 20px !default;
+/// Scrollview pager item border width.
+/// @group scrollview
+$kendo-scrollview-pager-item-border-width: 0px !default;
+/// Scrollview pager height.
+/// @group scrollview
+$kendo-scrollview-pager-height: calc( #{$kendo-scrollview-pagebutton-size} + #{$kendo-scrollview-pager-item-border-width * 2} + #{$kendo-scrollview-pager-item-spacing * 2} ) !default;
+
+/// Scrollview pager multidot threshold.
+/// @group scrollview
+$kendo-scrollview-pager-multidot-threshold: 10 !default;
+/// Scrollview pager multidot intermediate.
+/// @group scrollview
+$kendo-scrollview-pager-multidot-intermediate: 3 !default;
+/// Scrollview pager multidot step.
+/// @group scrollview
+$kendo-scrollview-pager-multidot-step: 1px !default;
+
+/// Scrollview pager light background color.
+/// @group scrollview
+$kendo-scrollview-pager-light-bg: rgba( $white, .4 ) !default;
+/// Scrollview pager dark background color.
+/// @group scrollview
+$kendo-scrollview-pager-dark-bg: rgba( $black, .4 ) !default;
+
+/// Scrollview arrow arrows size.
+/// @group scrollview
+$kendo-scrollview-arrow-icon-size: calc( var( --kendo-icon-size-lg, 2rem ) * 2 ) !default;
+/// Scrollview navigation text color.
+/// @group scrollview
+$kendo-scrollview-navigation-color: $white !default;
+/// Scrollview navigation arrows shadow.
+/// @group scrollview
+$kendo-scrollview-navigation-arrow-shadow: var( --kendo-box-shadow-depth-3, none ) !default;
+/// Scrollview navigation background color.
+/// @group scrollview
+$kendo-scrollview-navigation-bg: transparent !default;
+/// Scrollview navigation arrows focus shadow.
+/// @group scrollview
+$kendo-scrollview-navigation-focus-shadow: 0 0 0 1px get-theme-color-var( neutral-130 ) !default;
+/// Scrollview navigation arrows hover shadow.
+/// @group scrollview
+$kendo-scrollview-navigation-arrow-hover-shadow: var( --kendo-box-shadow-depth-4, none ) !default;
+
+/// Scrollview transition duration.
+/// @group scrollview
+$kendo-scrollview-transition-duration: .3s !default;
+/// Scrollview transition timing function.
+/// @group scrollview
+$kendo-scrollview-transition-timing-function: ease-in-out !default;
+
diff --git a/packages/fluent/scss/scrollview/index.scss b/packages/fluent/scss/scrollview/index.scss
new file mode 100644
index 00000000000..49086b8bc41
--- /dev/null
+++ b/packages/fluent/scss/scrollview/index.scss
@@ -0,0 +1,26 @@
+// Module meta
+$_kendo-module-meta: (
+    name: "scrollview",
+    dependencies: (
+        "button",
+        "icon"
+    )
+);
+
+
+// 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( "scrollview" ) {
+        @include kendo-scrollview--layout();
+        @include kendo-scrollview--theme();
+    }
+}