fix(scrollview): revert regression rendering changes

telerik · Dec 7, 2018 · 398412c · 398412c
1 parent 785a28c
commit 398412c
Show file tree

Hide file tree

Showing 10 changed files with 128 additions and 113 deletions.
diff --git a/packages/bootstrap/scss/_variables.scss b/packages/bootstrap/scss/_variables.scss
@@ -950,26 +950,6 @@ $progressbar-indeterminate-gradient: null !default;
 
 $progressbar-chunk-border: $bg-color !default;
 
-// Scrollview
-
-$scrollview-pager-offset: 20px !default;
-$scrollview-pager-item-spacing: 20px !default;
-$scrollview-pager-item-border-width: 0 !default;
-
-$scrollview-pagebutton-size: 8px !default;
-$scrollview-pagebutton-bg: rgba($carousel-indicator-active-bg, .5) !default;
-$scrollview-pagebutton-border: null !default;
-$scrollview-pagebutton-primary-bg: null !default;
-$scrollview-pagebutton-primary-border: null !default;
-$scrollview-pagebutton-shadow: 0 0 2px rgba(0, 0, 0, .08) !default;
-
-$scrollview-navigation-size: 4.5em !default;
-$scrollview-navigation-color: $selected-text !default;
-$scrollview-navigation-icon-shadow: rgba(0, 0, 0, .3) 0 0 15px !default;
-$scrollview-navigation-background: rgba(0, 0, 0, 0) !default;
-$scrollview-navigation-default-opacity: .7 !default;
-$scrollview-navigation-hover-opacity: 1 !default;
-$scrollview-navigation-hover-span-bg: null !default;
 
 
 // Window

diff --git a/packages/bootstrap/scss/scrollview/_layout.scss b/packages/bootstrap/scss/scrollview/_layout.scss
@@ -1 +1 @@
-@import "~@progress/kendo-theme-default/scss/scrollview/layout";
+@import "~@progress/kendo-theme-default/scss/scrollview/layout";
diff --git a/packages/bootstrap/scss/scrollview/_theme.scss b/packages/bootstrap/scss/scrollview/_theme.scss
@@ -2,7 +2,8 @@
 
     .k-scrollview {}
 
-    .k-scrollview-nav {
+    .k-pages,
+    .k-scrollview-pageable {
         margin-left: $carousel-control-width;
         margin-right: $carousel-control-width;
         width: auto;
@@ -22,8 +23,13 @@
         }
     }
 
-    .k-scrollview-nav > li.k-link {
-        background-color: $scrollview-pagebutton-bg;
+    .k-pages > li,
+    .k-scrollview-pageable > li.k-button {
+        background-image: none;
+        background-color: rgba($carousel-indicator-active-bg, .5);
+    }
+    .k-pages > li.k-current-page {
+        background-color: $carousel-indicator-active-bg;
     }
 
-}
+}
diff --git a/packages/default/scss/_variables.scss b/packages/default/scss/_variables.scss
@@ -933,26 +933,6 @@ $progressbar-indeterminate-gradient: null !default;
 
 $progressbar-chunk-border: $bg-color !default;
 
-// Scrollview
-
-$scrollview-pager-offset: 20px !default;
-$scrollview-pager-item-spacing: 20px !default;
-$scrollview-pager-item-border-width: 1px !default;
-
-$scrollview-pagebutton-size: 8px !default;
-$scrollview-pagebutton-bg: $button-bg !default;
-$scrollview-pagebutton-border: $button-border !default;
-$scrollview-pagebutton-primary-bg: $primary-button-bg !default;
-$scrollview-pagebutton-primary-border: $primary-button-border !default;
-$scrollview-pagebutton-shadow: 0 0 2px rgba(0, 0, 0, .08) !default;
-
-$scrollview-navigation-size: 4.5em !default;
-$scrollview-navigation-color: $selected-text !default;
-$scrollview-navigation-icon-shadow: rgba(0, 0, 0, .3) 0 0 15px !default;
-$scrollview-navigation-background: rgba(0, 0, 0, 0) !default;
-$scrollview-navigation-default-opacity: .7 !default;
-$scrollview-navigation-hover-opacity: 1 !default;
-$scrollview-navigation-hover-span-bg: null !default;
 
 
 // Window

diff --git a/packages/default/scss/scrollview/_layout.scss b/packages/default/scss/scrollview/_layout.scss
@@ -1,16 +1,21 @@
 @import '../common/icons';
 @import '../button/layout';
 
+$scrollview-pager-offset: 20px !default;
+$scrollview-pager-item-spacing: 20px !default;
+
 @include exports('scrollview/layout') {
+    $scrollview-page-button-size: 8px;
+    $scrollview-arrow-icon-size: 4.5em;
 
-    .k-scrollview {
+    .k-scrollview-wrap {
         position: relative;
         overflow: hidden;
         outline: 0;
         display: block;
     }
 
-    .k-scrollview-wrap {
+    .k-scrollview {
         list-style-type: none;
         position: absolute;
         margin: 0;
@@ -32,7 +37,8 @@
         }
     }
 
-    .k-scrollview-nav {
+    .k-pages,
+    .k-scrollview-pageable {
         margin: 0 auto;
         padding: 0;
         width: 100%;
@@ -45,18 +51,16 @@
         bottom: $scrollview-pager-offset;
         pointer-events: none;
     }
-
-    .k-scrollview-nav > li.k-link {
+    .k-pages > li,
+    .k-scrollview-pageable > li.k-button {
         margin: 0 $scrollview-pager-item-spacing;
         padding: 0;
-        width: $scrollview-pagebutton-size;
-        height: $scrollview-pagebutton-size;
+        width: $scrollview-page-button-size;
+        height: $scrollview-page-button-size;
         box-sizing: content-box;
         vertical-align: middle;
         display: inline-block;
-        flex: 0 0 $scrollview-pagebutton-size;
-        border-width: $scrollview-pager-item-border-width;
-        border-style: solid;
+        flex: 0 0 $scrollview-page-button-size;
         border-radius: 50%;
         cursor: pointer;
         pointer-events: all;
@@ -90,29 +94,61 @@
         margin: 0;
         padding: 0;
         vertical-align: middle;
-        font-size: $scrollview-navigation-size;
+        font-size: $scrollview-arrow-icon-size;
         font-weight: normal;
     }
 
     .k-scrollview-elements {
         width: 100%;
     }
 
-    .k-scrollview-animation {
-        transition-duration: .3s;
-        transition-timing-function: ease-in-out;
-    }
-
     @supports (-webkit-user-select: none) {
-        div.k-scrollview ul.k-scrollview-wrap li > *  {
+        div.k-scrollview-wrap ul.k-scrollview li > *  {
             pointer-events: auto;
         }
     }
 
     @supports (not (-webkit-user-select: none)) {
-        div.k-scrollview ul.k-scrollview-wrap li > *  {
+        div.k-scrollview-wrap ul.k-scrollview li > *  {
             pointer-events: none;
         }
     }
 
+    //Mobile version
+    .km-scrollview {
+        white-space: nowrap;
+        overflow: hidden;
+        position: relative;
+        width: 100%;
+
+        & > div > * {
+            -webkit-transform: translatez(0);
+        }
+
+        & > div > [data-role="page"] {
+            vertical-align: top;
+            display: inline-block;
+            min-height: 1px;
+        }
+
+        .km-virtual-page {
+            min-height: 1px;
+            position: absolute;
+            top: 0;
+            left: 0;
+            display: inline-block;
+        }
+    }
+
+    .k-ff18 .km-scrollview > div,
+    .k-ff19 .km-scrollview > div,
+    .k-ff20 .km-scrollview > div,
+    .k-ff21 .km-scrollview > div {
+        width: 0;
+    }
+
+    .km-pages {
+        padding: $padding-y 0 0 0;
+        position: static;
+    }
 }
diff --git a/packages/default/scss/scrollview/_theme.scss b/packages/default/scss/scrollview/_theme.scss
@@ -1,20 +1,27 @@
-@include exports('scrollview/theme') {
-
-    .k-scrollview-nav > li.k-link {
-        @include fill(
-            $bg: $scrollview-pagebutton-bg,
-            $border: $scrollview-pagebutton-border
-        );
+$scrollview-navigation-color: $selected-text !default;
+$scrollview-navigation-icon-shadow: rgba(0, 0, 0, .3) 0 0 15px !default;
+$scrollview-pagebutton-shadow: 0 0 2px rgba(0, 0, 0, .08) !default;
+$scrollview-navigation-background: rgba(0, 0, 0, 0) !default;
+$scrollview-navigation-default-opacity: .7 !default;
+$scrollview-navigation-hover-opacity: 1 !default;
+$webkit-highlight-color: rgba(0, 0, 0, 0) !default;
 
-        &.k-primary {
-            @include fill(
-                $bg: $scrollview-pagebutton-primary-bg,
-                $border: $scrollview-pagebutton-primary-border
-            );
-        }
+@include exports('scrollview/theme') {
 
+    .k-pages > li,
+    .k-scrollview-pageable > li.k-button {
+        background-image: none;
         box-shadow: $scrollview-pagebutton-shadow;
-        background-clip: padding-box;
+    }
+    .k-pages > li {
+        border-color: $button-border;
+        color: $button-text;
+        background-color: $button-bg;
+    }
+    .k-pages > li.k-current-page {
+        border-color: $selected-border;
+        color: $selected-text;
+        background-color: $selected-bg;
     }
 
     .k-scrollview-elements {
@@ -32,11 +39,11 @@
         &:hover {
             color: $scrollview-navigation-color;
             opacity: $scrollview-navigation-hover-opacity;
-
-            span::before {
-                background-color: $scrollview-navigation-hover-span-bg;
-            }
         }
     }
 
+    .k-scrollview-animation {
+        transition-duration: .3s;
+        transition-timing-function: ease-out;
+    }
 }
diff --git a/packages/material/scss/_variables.scss b/packages/material/scss/_variables.scss
@@ -1020,26 +1020,6 @@ $progressbar-indeterminate-gradient: null !default;
 
 $progressbar-chunk-border: $bg-color !default;
 
-// Scrollview
-
-$scrollview-pager-offset: 20px !default;
-$scrollview-pager-item-spacing: 8px !default;
-$scrollview-pager-item-border-width: 0 !default;
-
-$scrollview-pagebutton-size: 8px !default;
-$scrollview-pagebutton-bg: rgba(black, .4) !default;
-$scrollview-pagebutton-border: null !default;
-$scrollview-pagebutton-primary-bg: $primary-button-bg !default;
-$scrollview-pagebutton-primary-border: null !default;
-$scrollview-pagebutton-shadow: 0 0 2px rgba(0, 0, 0, .08) !default;
-
-$scrollview-navigation-size: 4.5em !default;
-$scrollview-navigation-color: $base-text !default;
-$scrollview-navigation-icon-shadow: rgba(0, 0, 0, .3) 0 0 15px !default;
-$scrollview-navigation-background: rgba(0, 0, 0, 0) !default;
-$scrollview-navigation-default-opacity: .7 !default;
-$scrollview-navigation-hover-opacity: 1 !default;
-$scrollview-navigation-hover-span-bg: rgba($base-bg, .4) !default;
 
 
 // Window

diff --git a/packages/material/scss/scrollview/_layout.scss b/packages/material/scss/scrollview/_layout.scss
@@ -1 +1,3 @@
+$scrollview-pager-item-spacing: 8px !default;
+
 @import "~@progress/kendo-theme-default/scss/scrollview/layout";
diff --git a/packages/material/scss/scrollview/_theme.scss b/packages/material/scss/scrollview/_theme.scss
@@ -1 +1,25 @@
+$scrollview-navigation-color: $base-text;
+
 @import "~@progress/kendo-theme-default/scss/scrollview/theme";
+
+@include exports("scrollview/theme/material") {
+    $scrollview-text-opacity: .4 !default;
+
+    .k-scrollview-next:hover,
+    .k-scrollview-prev:hover {
+        &::before {
+            background-color: rgba($base-bg, $scrollview-text-opacity);
+        }
+    }
+
+    .k-scrollview-pageable {
+
+        li.k-button {
+            background-color: rgba(black, $scrollview-text-opacity);
+
+            &.k-primary {
+                background-color: $primary;
+            }
+        }
+    }
+}
diff --git a/tests/visual/scrollview.html b/tests/visual/scrollview.html
@@ -13,8 +13,8 @@
 <body>
 
     <div id="test-area" class="grid">
-        <kendo-scrollview class="k-widget k-scrollview" style="width: 400px; height: 300px;">
-            <ul class="k-scrollview-wrap">
+        <kendo-scrollview class="k-widget k-scrollview-wrap" style="width: 400px; height: 300px;">
+            <ul class="k-scrollview">
                 <li style="height: 300px; transform: translateX(-100%); width: 100%;">
                     <!-- template -->
                     <div style="width: 100%; height: 100%; background: #333;"></div>
@@ -41,10 +41,10 @@
                     <span class="k-icon k-i-arrowhead-e"></span>
                 </a>
                 <kendo-scrollview-pager>
-                    <ul class="k-scrollview-nav">
-                        <li class="k-link k-primary"></li><!--
-                        --><li class="k-link"></li><!--
-                        --><li class="k-link"></li>
+                    <ul class="k-scrollview-pageable">
+                        <li class="k-button k-primary"></li><!--
+                        --><li class="k-button"></li><!--
+                        --><li class="k-button"></li>
                     </ul>
                 </kendo-scrollview-pager>
             </div>
@@ -53,8 +53,8 @@
         <!-- TODO: the items do not need all the hard-coded sizes, can be handled by theme layout -->
         <!-- TODO: the hit area of the pager can be increased by using padding instead of margins and moving the circles in generated content-->
 
-        <kendo-scrollview class="k-widget k-scrollview" style="width: 400px; height: 300px;">
-            <ul class="k-scrollview-wrap">
+        <kendo-scrollview class="k-widget k-scrollview-wrap" style="width: 400px; height: 300px;">
+            <ul class="k-scrollview">
                 <li style="height: 300px; transform: translateX(-100%); width: 100%;">
                     <!-- template -->
                     <div style="width: 100%; height: 100%; background: #fff;"></div>
@@ -81,10 +81,10 @@
                     <span class="k-icon k-i-arrowhead-e"></span>
                 </a>
                 <kendo-scrollview-pager>
-                    <ul class="k-scrollview-nav">
-                        <li class="k-link k-primary"></li><!--
-                        --><li class="k-link"></li><!--
-                        --><li class="k-link"></li>
+                    <ul class="k-scrollview-pageable">
+                        <li class="k-button k-primary"></li><!--
+                        --><li class="k-button"></li><!--
+                        --><li class="k-button"></li>
                     </ul>
                 </kendo-scrollview-pager>
             </div>