From 398412cb8f14084a3b38285f6888149a5cbd7332 Mon Sep 17 00:00:00 2001 From: Elena Gancheva Date: Fri, 30 Nov 2018 12:10:20 +0200 Subject: [PATCH] fix(scrollview): revert regression rendering changes --- packages/bootstrap/scss/_variables.scss | 20 ------ .../bootstrap/scss/scrollview/_layout.scss | 2 +- .../bootstrap/scss/scrollview/_theme.scss | 14 ++-- packages/default/scss/_variables.scss | 20 ------ packages/default/scss/scrollview/_layout.scss | 72 ++++++++++++++----- packages/default/scss/scrollview/_theme.scss | 43 ++++++----- packages/material/scss/_variables.scss | 20 ------ .../material/scss/scrollview/_layout.scss | 2 + packages/material/scss/scrollview/_theme.scss | 24 +++++++ tests/visual/scrollview.html | 24 +++---- 10 files changed, 128 insertions(+), 113 deletions(-) diff --git a/packages/bootstrap/scss/_variables.scss b/packages/bootstrap/scss/_variables.scss index 2f4b173daa9..92948793525 100644 --- 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 index 1da0caf972a..e8117b19465 100644 --- 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"; \ No newline at end of file diff --git a/packages/bootstrap/scss/scrollview/_theme.scss b/packages/bootstrap/scss/scrollview/_theme.scss index e58ca38187d..40c397aa331 100644 --- 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; } -} +} \ No newline at end of file diff --git a/packages/default/scss/_variables.scss b/packages/default/scss/_variables.scss index 986725b8e33..4d2badb5c5f 100644 --- 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 index be2a22f5e52..522960d0781 100644 --- 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,7 +94,7 @@ margin: 0; padding: 0; vertical-align: middle; - font-size: $scrollview-navigation-size; + font-size: $scrollview-arrow-icon-size; font-weight: normal; } @@ -98,21 +102,53 @@ 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 index f5cf7890df8..7ecb7245176 100644 --- 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 index 2c57d9ef0fd..7a06e6f2ab7 100644 --- 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 index 1da0caf972a..566d2bf1153 100644 --- 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 index ac4a2ae06b5..b1e175e955a 100644 --- 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 index fc23ca925a8..19ae305486d 100644 --- a/tests/visual/scrollview.html +++ b/tests/visual/scrollview.html @@ -13,8 +13,8 @@
- -
    + +
    • @@ -41,10 +41,10 @@ -
        -
      • +
          +
@@ -53,8 +53,8 @@ - -