@progress/kendo-theme-default 6.7.0-dev.0 → 6.7.0-dev.2

package/scss/scrollview/_layout.scss

@@ -1,7 +1,5 @@
 @mixin kendo-scrollview--layout-base() {
 
-    kendo-scrollview.k-scrollview-wrap,
-    kendo-scrollview.k-scrollview,
     .k-scrollview {
         border-width: $kendo-scrollview-border-width;
         border-style: solid;
@@ -17,14 +15,14 @@
         -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
     }
 
-    .k-scrollview-wrap .k-scrollview,
-    .k-scrollview .k-scrollview-wrap {
-        list-style-type: none;
+    .k-scrollview-wrap {
         position: absolute;
         margin: 0;
         padding: 0;
-        width: 100%;
         height: 100%;
+        width: 100%;
+        display: flex;
+        flex-flow: row nowrap;
         cursor: default;
         white-space: nowrap;
 
@@ -32,45 +30,35 @@
             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;
-        }
     }
 
+     // Can be removed once Angular are able to rely on the animations from the themes
+     kendo-scrollview.k-scrollview .k-scrollview-wrap > .k-scrollview-view {
+        display: inline-block;
+        overflow: hidden;
+        position: absolute;
+        top: 0;
+        left: 0;
+    }
 
-    // Blazor rendering
     .k-scrollview-wrap.k-scrollview-animate {
-        display: flex;
-        flex-flow: row nowrap;
         width: calc( var(--kendo-scrollview-views, 1) * 100% );
         transition-duration: $kendo-scrollview-transition-duration;
         transition-timing-function: $kendo-scrollview-transition-timing-function;
         transform: translateX( calc( -100% / var(--kendo-scrollview-views, 1) * ( var(--kendo-scrollview-current, 1) - 1) ) );
 
+        [dir="rtl"] &,
+        .k-rtl & {
+            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) );
         }
 
-        [dir="rtl"] &,
-        .k-rtl & {
-            transform: translateX( calc( 100% / var(--kendo-scrollview-views, 1) * ( var(--kendo-scrollview-current, 1) - 1) ) );
-        }
     }
 
-
-    kendo-scrollview.k-scrollview-wrap kendo-scrollview-pager,
-    kendo-scrollview.k-scrollview kendo-scrollview-pager,
     .k-scrollview-nav-wrap {
         padding: 0;
         margin: 0;
@@ -82,17 +70,14 @@
         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: $kendo-scrollview-pager-item-spacing;
@@ -113,7 +98,6 @@
         }
     }
 
-    .k-scrollview-pageable > .k-button,
     .k-scrollview-nav > .k-link {
         margin-block: 0;
         margin-inline: k-math-div( $kendo-scrollview-pager-item-spacing, 2 );
@@ -180,24 +164,6 @@
         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;
-        }
-    }
-
 }
 
 

package/scss/scrollview/_theme.scss

@@ -1,8 +1,6 @@
 @mixin kendo-scrollview--theme-base() {
 
-    kendo-scrollview.k-scrollview-wrap,
-    kendo-scrollview.k-scrollview,
-    div.k-scrollview {
+   .k-scrollview {
         @include fill(
             $kendo-scrollview-text,
             $kendo-scrollview-bg,
@@ -67,7 +65,6 @@
     }
 
     // refactor when https://github.com/telerik/kendo-angular-scrollview/issues/130 is done
-    .k-scrollview-pageable > .k-button,
     .k-scrollview-nav > .k-link {
         background: $kendo-scrollview-pagebutton-bg;
         border: $kendo-scrollview-pagebutton-border;
@@ -81,15 +78,11 @@
         &.k-focus {
             @include focus-indicator( $kendo-scrollview-pagebutton-shadow );
         }
-    }
-
-    .k-scrollview-nav > .k-link:hover,
-    .k-scrollview-nav > .k-link.k-hover {
-        box-shadow: $kendo-scrollview-pagebutton-shadow;
-    }
 
-    .k-scrollview-pageable > .k-button {
-        box-shadow: inset 0 0 2px rgba(0, 0, 0, .08);
+        &:hover,
+        &.k-hover {
+            box-shadow: $kendo-scrollview-pagebutton-shadow;
+        }
     }
 
 }

package/scss/tilelayout/_layout.scss

@@ -6,6 +6,7 @@
         box-sizing: border-box;
         outline: 0;
         display: grid;
+        padding: $kendo-tile-layout-padding-y $kendo-tile-layout-padding-x;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
 

package/scss/tilelayout/_variables.scss

@@ -7,6 +7,14 @@ $kendo-tile-layout-border-width: 0px !default;
 /// @group tilelayout
 $kendo-tile-layout-bg: $kendo-base-bg !default;
 
+/// The horizontal padding of the TileLayout.
+/// @group tilelayout
+$kendo-tile-layout-padding-x: k-map-get( $kendo-spacing, 4 ) !default;
+
+/// The vertical padding of the TileLayout
+/// @group tilelayout
+$kendo-tile-layout-padding-y: $kendo-tile-layout-padding-x !default;
+
 /// The width of the border around the TileLayout card.
 /// @group tilelayout
 $kendo-tile-layout-card-border-width: $kendo-card-border-width !default;