feat(scrollview): add fluent styles

telerik · Sep 8, 2022 · a5ce29c · a5ce29c
1 parent 7256cf9
commit a5ce29c
Show file tree

Hide file tree

Showing 5 changed files with 424 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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} );
+        }
+    }
+}