fix(scrollview): update styles based on latest design

telerik · Dec 11, 2020 · ba5a4e9 · ba5a4e9
1 parent f56c091
commit ba5a4e9
Show file tree

Hide file tree

Showing 15 changed files with 356 additions and 210 deletions.
diff --git a/packages/bootstrap/scss/scrollview/_theme.scss b/packages/bootstrap/scss/scrollview/_theme.scss
@@ -2,34 +2,94 @@
 
     // refactor when https://github.com/telerik/kendo-angular-scrollview/issues/130 is done
     kendo-scrollview.k-scrollview-wrap,
-    div.k-scrollview {
+    .k-scrollview {
         @extend .k-text-selection !optional;
         @include fill(
             $scrollview-text,
             $scrollview-bg,
             $scrollview-border
         );
 
-        .k-scrollview-pageable,
-        .k-scrollview-nav {
-            margin-left: $carousel-control-width;
-            margin-right: $carousel-control-width;
-            width: auto;
-            left: 0;
-            right: 0;
-
-            > li {
-                background-color: $scrollview-pagebutton-bg;
-                margin-right: $carousel-indicator-spacer;
-                margin-left: $carousel-indicator-spacer;
-                padding: 0;
-                max-width: $carousel-indicator-width;
-                height: $carousel-indicator-height;
-                border-width: 0;
-                border-radius: 0;
-                flex: 1 0 auto;
-                position: relative;
+        &.k-scrollview-dark {
+            kendo-scrollview-pager,
+            .k-scrollview-nav-wrap {
+                background-color: $scrollview-dark-bg;
             }
+            .k-scrollview-next,
+            .k-scrollview-prev {
+                color: $scrollview-dark-bg;
+
+            }
+        }
+
+        &.k-scrollview-light {
+            kendo-scrollview-pager,
+            .k-scrollview-nav-wrap {
+                background-color: $scrollview-light-bg;
+            }
+
         }
     }
+
+    .k-scrollview:focus,
+    .k-scrollview-wrap:focus  {
+        outline: none;
+
+    }
+
+    .k-scrollview-next,
+    .k-scrollview-prev {
+        color: $scrollview-navigation-color;
+        background-color: $scrollview-navigation-bg;
+        text-shadow: $scrollview-navigation-icon-shadow;
+        opacity: $scrollview-navigation-default-opacity;
+        outline-width: 0;
+
+        &:focus,
+        &.k-state-focus {
+            color: $scrollview-navigation-color;
+            opacity: $scrollview-navigation-hover-opacity;
+            .k-icon::before {
+                box-shadow: $scrollview-pagebutton-shadow;
+                background-color: $scrollview-navigation-hover-span-bg;
+            }
+        }
+
+        &:hover,
+        &.k-state-hover {
+            color: $scrollview-navigation-color;
+            opacity: $scrollview-navigation-hover-opacity;
+
+        }
+    }
+
+
+
+    .k-scrollview-pageable > .k-button,
+    .k-scrollview-nav > .k-link {
+        background-color: $scrollview-pagebutton-bg;
+        border-color: $scrollview-pagebutton-border;
+        background-clip: padding-box;
+
+        &.k-primary {
+            background: $scrollview-pagebutton-primary-bg;
+            border: $scrollview-pagebutton-primary-border;
+        }
+
+
+        &:focus,
+        &.k-state-focused {
+            box-shadow: $scrollview-pagebutton-shadow;
+        }
+    }
+
+    .k-scrollview-nav > .k-link:hover,
+    .k-scrollview-nav > .k-link.k-state-hover {
+        box-shadow: $scrollview-pagebutton-shadow;
+    }
+
+    .k-scrollview-pageable > .k-button {
+        box-shadow: inset 0 0 2px rgba(0, 0, 0, .08);
+    }
+
 }
diff --git a/packages/bootstrap/scss/scrollview/_variables.scss b/packages/bootstrap/scss/scrollview/_variables.scss
@@ -8,23 +8,30 @@ $scrollview-bg: $component-bg !default;
 $scrollview-text: $component-text !default;
 $scrollview-border: $component-border !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-pagebutton-size: 10px !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 0 2px rgba(0, 0, 0, .13) !default;
 
-$scrollview-pager-offset: 20px !default;
+$scrollview-pager-offset: 0 !default;
 $scrollview-pager-item-spacing: 20px !default;
-$scrollview-pager-item-border-width: 0px !default;
-$scrollview-pager-height: calc( #{$scrollview-pagebutton-size} + #{$scrollview-pager-item-border-width * 2} + #{$scrollview-pager-item-spacing / 2} ) !default;
+$scrollview-pager-item-border-width: 0 !default;
+$scrollview-pager-height: calc( #{$scrollview-pagebutton-size} + #{$scrollview-pager-item-border-width * 2} + #{$scrollview-pager-item-spacing * 2} ) !default;
+
+$scrollview-pager-multidot-threshold: 10;
+$scrollview-pager-multidot-intermediate: 3;
+$scrollview-pager-multidot-step: 1px;
 
 $scrollview-arrow-icon-size: 4.5em !default;
 $scrollview-arrow-tap-highlight-color: $rgba-transparent !default;
-$scrollview-navigation-color: $selected-text !default;
+$scrollview-navigation-color: white !default;
 $scrollview-navigation-icon-shadow: rgba(0, 0, 0, .3) 0 0 15px !default;
 $scrollview-navigation-bg: 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;
+
+$scrollview-light-bg: rgba(255, 255, 255, .2) !default;
+$scrollview-dark-bg: rgba(0, 0, 0, .2) !default;
diff --git a/packages/bootstrap/scss/utils/_aria.scss b/packages/bootstrap/scss/utils/_aria.scss
@@ -0,0 +1 @@
+@import "~@progress/kendo-theme-default/scss/utils/_aria.scss";
diff --git a/packages/bootstrap/scss/utils/_index.scss b/packages/bootstrap/scss/utils/_index.scss
@@ -7,6 +7,7 @@
 
 
 // Component
+@import "_aria.scss";
 @import "_display.scss";
 @import "_flex.scss";
 @import "_float.scss";

diff --git a/packages/classic/scss/scrollview/_variables.scss b/packages/classic/scss/scrollview/_variables.scss
@@ -8,23 +8,30 @@ $scrollview-bg: $component-bg !default;
 $scrollview-text: $component-text !default;
 $scrollview-border: $component-border !default;
 
-$scrollview-pagebutton-size: 8px !default;
+$scrollview-pagebutton-size: 10px !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-pagebutton-shadow: 0 0 0 2px rgba(0, 0, 0, .13) !default;
 
-$scrollview-pager-offset: 20px !default;
+$scrollview-pager-offset: 0 !default;
 $scrollview-pager-item-spacing: 20px !default;
-$scrollview-pager-item-border-width: 1px !default;
-$scrollview-pager-height: calc( #{$scrollview-pagebutton-size} + #{$scrollview-pager-item-border-width * 2} + #{$scrollview-pager-item-spacing / 2} ) !default;
+$scrollview-pager-item-border-width: 0 !default;
+$scrollview-pager-height: calc( #{$scrollview-pagebutton-size} + #{$scrollview-pager-item-border-width * 2} + #{$scrollview-pager-item-spacing * 2} ) !default;
+
+$scrollview-pager-multidot-threshold: 10;
+$scrollview-pager-multidot-intermediate: 3;
+$scrollview-pager-multidot-step: 1px;
 
 $scrollview-arrow-icon-size: 4.5em !default;
 $scrollview-arrow-tap-highlight-color: $rgba-transparent !default;
-$scrollview-navigation-color: $selected-text !default;
+$scrollview-navigation-color: white !default;
 $scrollview-navigation-icon-shadow: rgba(0, 0, 0, .3) 0 0 15px !default;
 $scrollview-navigation-bg: 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;
+
+$scrollview-light-bg: rgba(255, 255, 255, .2) !default;
+$scrollview-dark-bg: rgba(0, 0, 0, .2) !default;
diff --git a/packages/classic/scss/utils/_aria.scss b/packages/classic/scss/utils/_aria.scss
@@ -0,0 +1 @@
+@import "~@progress/kendo-theme-default/scss/utils/_aria.scss";
diff --git a/packages/classic/scss/utils/_index.scss b/packages/classic/scss/utils/_index.scss
@@ -7,6 +7,7 @@
 
 
 // Component
+@import "_aria.scss";
 @import "_display.scss";
 @import "_flex.scss";
 @import "_float.scss";