@progress/kendo-theme-fluent 6.6.1-dev.0 → 6.7.0-dev.1

package/scss/scrollview/_layout.scss

@@ -2,8 +2,7 @@
 @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;
@@ -19,55 +18,39 @@
         -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: calc( var(--kendo-scrollview-views, 1) * 100% );
+        display: flex;
+        flex-flow: row nowrap;
         cursor: default;
         white-space: nowrap;
 
-        img {
-            user-select: none;
+        .k-scrollview-view {
+            width: calc( 100% / var(--kendo-scrollview-views, 1) );
+            flex: 0 0 calc( 100% / var(--kendo-scrollview-views, 1) );
         }
 
-        & > li {
-            display: inline-block;
-            overflow: hidden;
-            position: absolute;
-            top: 0;
-            left: 0;
+        img {
+            user-select: none;
         }
 
-        & > [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) );
+        [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;
@@ -79,17 +62,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: var( --kendo-scrollview-pager-item-spacing, #{$kendo-scrollview-pager-item-spacing} );
@@ -175,20 +155,4 @@
         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

@@ -3,9 +3,7 @@
 
 @mixin kendo-scrollview--theme() {
 
-    kendo-scrollview.k-scrollview-wrap,
-    kendo-scrollview.k-scrollview,
-    div.k-scrollview {
+    .k-scrollview {
         @include fill(
             var( --kendo-scrollview-text, #{$kendo-scrollview-text} ),
             var( --kendo-scrollview-bg, #{$kendo-scrollview-bg} ),

package/scss/tilelayout/_layout.scss

@@ -9,6 +9,8 @@
         box-sizing: border-box;
         outline: 0;
         display: grid;
+        padding-block: var( --kendo-tile-layout-padding-y, #{$kendo-tile-layout-padding-y} );
+        padding-inline: var( --kendo-tile-layout-padding-x, #{$kendo-tile-layout-padding-x} );
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: $kendo-color-rgba-transparent;
     }

package/scss/tilelayout/_variables.scss

@@ -1,4 +1,5 @@
 @use "sass:color";
+@use "sass:map";
 @use "../core/" as *;
 @use "../card/_variables.scss" as *;
 
@@ -9,6 +10,14 @@ $kendo-tile-layout-border-width: 0px !default;
 /// @group tilelayout
 $kendo-tile-layout-bg: k-get-theme-color-var( neutral-10 ) !default;
 
+/// The horizontal padding of the TileLayout.
+/// @group tilelayout
+$kendo-tile-layout-padding-x: 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 hint.
 /// @group tilelayout
 $kendo-tile-layout-hint-border-width: 1px !default;