chore: update listview styles

BREAKING CHANGE: Added kendo prefix to all listview variables Change variables names from `$listview-*` to `$kendo-listview-*`.
telerik · Dec 15, 2022 · 414e586 · 414e586
1 parent 0f77b2c
commit 414e586
Show file tree

Hide file tree

Showing 9 changed files with 114 additions and 106 deletions.
diff --git a/packages/bootstrap/scss/listview/_variables.scss b/packages/bootstrap/scss/listview/_variables.scss
@@ -1,25 +1,25 @@
 // Listview
-$listview-padding-x: k-map-get( $spacing, 1 ) !default;
-$listview-padding-y: k-map-get( $spacing, 1 ) !default;
-$listview-border-width: 1px !default;
-$listview-font-family: $font-family !default;
-$listview-font-size: $font-size !default;
-$listview-line-height: $line-height !default;
+$kendo-listview-padding-x: k-map-get( $spacing, 1 ) !default;
+$kendo-listview-padding-y: k-map-get( $spacing, 1 ) !default;
+$kendo-listview-border-width: 1px !default;
+$kendo-listview-font-family: $font-family !default;
+$kendo-listview-font-size: $font-size !default;
+$kendo-listview-line-height: $line-height !default;
 
-$listview-bg: $component-bg !default;
-$listview-text: $component-text !default;
-$listview-border: $component-border !default;
+$kendo-listview-bg: $component-bg !default;
+$kendo-listview-text: $component-text !default;
+$kendo-listview-border: $component-border !default;
 
-$listview-grid-gap: 10px !default;
+$kendo-listview-grid-gap: 10px !default;
 
-$listview-item-padding-x: k-map-get( $spacing, 1 ) !default;
-$listview-item-padding-y: k-map-get( $spacing, 1 ) !default;
+$kendo-listview-item-padding-x: k-map-get( $spacing, 1 ) !default;
+$kendo-listview-item-padding-y: k-map-get( $spacing, 1 ) !default;
 
-$listview-item-selected-bg: rgba( $selected-bg, .25 ) !default;
-$listview-item-selected-text: null !default;
-$listview-item-selected-border: null !default;
+$kendo-listview-item-selected-bg: rgba( $selected-bg, .25 ) !default;
+$kendo-listview-item-selected-text: null !default;
+$kendo-listview-item-selected-border: null !default;
 
-$listview-item-focus-bg: null !default;
-$listview-item-focus-text: null !default;
-$listview-item-focus-border: null !default;
-$listview-item-focus-shadow: inset 0 0 0 3px rgba( $listview-text, .15 ) !default;
+$kendo-listview-item-focus-bg: null !default;
+$kendo-listview-item-focus-text: null !default;
+$kendo-listview-item-focus-border: null !default;
+$kendo-listview-item-focus-shadow: inset 0 0 0 3px rgba( $kendo-listview-text, .15 ) !default;
diff --git a/packages/classic/scss/listview/_variables.scss b/packages/classic/scss/listview/_variables.scss
@@ -1,25 +1,25 @@
 // Listview
-$listview-padding-x: k-map-get( $spacing, 1 ) !default;
-$listview-padding-y: k-map-get( $spacing, 1 ) !default;
-$listview-border-width: 1px !default;
-$listview-font-family: $font-family !default;
-$listview-font-size: $font-size !default;
-$listview-line-height: $line-height !default;
+$kendo-listview-padding-x: k-map-get( $spacing, 1 ) !default;
+$kendo-listview-padding-y: k-map-get( $spacing, 1 ) !default;
+$kendo-listview-border-width: 1px !default;
+$kendo-listview-font-family: $font-family !default;
+$kendo-listview-font-size: $font-size !default;
+$kendo-listview-line-height: $line-height !default;
 
-$listview-bg: $component-bg !default;
-$listview-text: $component-text !default;
-$listview-border: $component-border !default;
+$kendo-listview-bg: $component-bg !default;
+$kendo-listview-text: $component-text !default;
+$kendo-listview-border: $component-border !default;
 
-$listview-grid-gap: 10px !default;
+$kendo-listview-grid-gap: 10px !default;
 
-$listview-item-padding-x: k-map-get( $spacing, 1 ) !default;
-$listview-item-padding-y: k-map-get( $spacing, 1 ) !default;
+$kendo-listview-item-padding-x: k-map-get( $spacing, 1 ) !default;
+$kendo-listview-item-padding-y: k-map-get( $spacing, 1 ) !default;
 
-$listview-item-selected-bg: rgba( $selected-bg, .25 ) !default;
-$listview-item-selected-text: null !default;
-$listview-item-selected-border: null !default;
+$kendo-listview-item-selected-bg: rgba( $selected-bg, .25 ) !default;
+$kendo-listview-item-selected-text: null !default;
+$kendo-listview-item-selected-border: null !default;
 
-$listview-item-focus-bg: null !default;
-$listview-item-focus-text: null !default;
-$listview-item-focus-border: null !default;
-$listview-item-focus-shadow: inset 0 0 0 2px rgba( black, .13 ) !default;
+$kendo-listview-item-focus-bg: null !default;
+$kendo-listview-item-focus-text: null !default;
+$kendo-listview-item-focus-border: null !default;
+$kendo-listview-item-focus-shadow: inset 0 0 0 2px rgba( black, .13 ) !default;
diff --git a/packages/default/scss/listview/_layout.scss b/packages/default/scss/listview/_layout.scss
@@ -7,16 +7,16 @@
         border-style: solid;
         box-sizing: border-box;
         outline: 0;
-        font-family: $listview-font-family;
-        font-size: $listview-font-size;
-        line-height: $listview-line-height;
+        font-family: $kendo-listview-font-family;
+        font-size: $kendo-listview-font-size;
+        line-height: $kendo-listview-line-height;
         flex-flow: column nowrap;
         position: relative;
         -webkit-touch-callout: none;
         -webkit-tap-highlight-color: transparent;
     }
     .k-listview-bordered {
-        border-width: $listview-border-width;
+        border-width: $kendo-listview-border-width;
     }
 
 
@@ -27,7 +27,7 @@
         border-color: inherit;
     }
     .k-listview-bordered > .k-listview-header {
-        border-bottom-width: $listview-border-width;
+        border-bottom-width: $kendo-listview-border-width;
     }
 
 
@@ -51,10 +51,10 @@
         &::after { display: none; }
     }
     .k-listview-content-padding-rectangle {
-        padding: $listview-padding-y $listview-padding-x;
+        padding: $kendo-listview-padding-y $kendo-listview-padding-x;
     }
     .k-listview-content-padding-square {
-        padding: $listview-padding-y;
+        padding: $kendo-listview-padding-y;
     }
 
 
@@ -68,18 +68,18 @@
         flex-shrink: 0;
     }
     .k-listview-item-padding-rectangle {
-        padding: $listview-item-padding-y $listview-item-padding-x;
+        padding: $kendo-listview-item-padding-y $kendo-listview-item-padding-x;
     }
     .k-listview-item-padding-rectangle .k-listview-link {
-        margin: (-$listview-item-padding-y) (-$listview-item-padding-x);
-        padding: $listview-item-padding-y $listview-item-padding-x;
+        margin: (-$kendo-listview-item-padding-y) (-$kendo-listview-item-padding-x);
+        padding: $kendo-listview-item-padding-y $kendo-listview-item-padding-x;
     }
     .k-listview-item-padding-square {
-        padding: $listview-item-padding-y;
+        padding: $kendo-listview-item-padding-y;
     }
     .k-listview-item-padding-square .k-listview-link {
-        margin: (-$listview-item-padding-y);
-        padding: $listview-item-padding-y;
+        margin: (-$kendo-listview-item-padding-y);
+        padding: $kendo-listview-item-padding-y;
     }
 
 
@@ -90,21 +90,20 @@
         border-color: inherit;
     }
     .k-listview-bordered > .k-listview-footer {
-        border-top-width: $listview-border-width;
+        border-top-width: $kendo-listview-border-width;
     }
 
 
     // Listview pager
     .k-listview-pager {
         border-width: 0;
         border-color: inherit;
-        font: inherit;
     }
     .k-listview-bordered > .k-listview-pager-top {
-        border-bottom-width: $listview-border-width;
+        border-block-end-width: var( --kendo-listview-border-width, #{$kendo-listview-border-width} );
     }
     .k-listview-bordered > .k-listview-pager-bottom {
-        border-top-width: $listview-border-width;
+        border-block-start-width: var( --kendo-listview-border-width, #{$kendo-listview-border-width} );
     }
 
 

diff --git a/packages/default/scss/listview/_theme.scss b/packages/default/scss/listview/_theme.scss
@@ -3,9 +3,9 @@
     // Listview
     .k-listview {
         @include fill(
-            $listview-text,
-            $listview-bg,
-            $listview-border
+            $kendo-listview-text,
+            $kendo-listview-bg,
+            $kendo-listview-border
         );
     }
 
@@ -15,21 +15,26 @@
 
         > .k-focus {
             @include fill(
-                $listview-item-focus-text,
-                $listview-item-focus-bg,
-                $listview-item-focus-border
+                $kendo-listview-item-focus-text,
+                $kendo-listview-item-focus-bg,
+                $kendo-listview-item-focus-border
             );
-            @include box-shadow( $listview-item-focus-shadow );
+            @include box-shadow( $kendo-listview-item-focus-shadow );
         }
 
         > .k-selected {
             @include fill(
-                $listview-item-selected-text,
-                $listview-item-selected-bg,
-                $listview-item-selected-border
+                $kendo-listview-item-selected-text,
+                $kendo-listview-item-selected-bg,
+                $kendo-listview-item-selected-border
             );
         }
 
     }
 
+    // List item
+    .k-listview-item {
+        border-color: $kendo-listview-border;
+    }
+
 }
diff --git a/packages/default/scss/listview/_variables.scss b/packages/default/scss/listview/_variables.scss
@@ -1,25 +1,25 @@
 // Listview
-$listview-padding-x: map-get( $spacing, 1 ) !default;
-$listview-padding-y: map-get( $spacing, 1 ) !default;
-$listview-border-width: 1px !default;
-$listview-font-family: $font-family !default;
-$listview-font-size: $font-size !default;
-$listview-line-height: $line-height !default;
+$kendo-listview-padding-x: map-get( $spacing, 1 ) !default;
+$kendo-listview-padding-y: map-get( $spacing, 1 ) !default;
+$kendo-listview-border-width: 1px !default;
+$kendo-listview-font-family: $font-family !default;
+$kendo-listview-font-size: $font-size !default;
+$kendo-listview-line-height: $line-height !default;
 
-$listview-bg: $component-bg !default;
-$listview-text: $component-text !default;
-$listview-border: $component-border !default;
+$kendo-listview-bg: $component-bg !default;
+$kendo-listview-text: $component-text !default;
+$kendo-listview-border: $component-border !default;
 
-$listview-grid-gap: 10px !default;
+$kendo-listview-grid-gap: 10px !default;
 
-$listview-item-padding-x: map-get( $spacing, 1 ) !default;
-$listview-item-padding-y: map-get( $spacing, 1 ) !default;
+$kendo-listview-item-padding-x: map-get( $spacing, 1 ) !default;
+$kendo-listview-item-padding-y: map-get( $spacing, 1 ) !default;
 
-$listview-item-selected-bg: rgba( $selected-bg, .25 ) !default;
-$listview-item-selected-text: null !default;
-$listview-item-selected-border: null !default;
+$kendo-listview-item-selected-bg: rgba( $selected-bg, .25 ) !default;
+$kendo-listview-item-selected-text: null !default;
+$kendo-listview-item-selected-border: null !default;
 
-$listview-item-focus-bg: null !default;
-$listview-item-focus-text: null !default;
-$listview-item-focus-border: null !default;
-$listview-item-focus-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;
+$kendo-listview-item-focus-bg: null !default;
+$kendo-listview-item-focus-text: null !default;
+$kendo-listview-item-focus-border: null !default;
+$kendo-listview-item-focus-shadow: inset 0 0 0 2px rgba(0, 0, 0, .13) !default;
diff --git a/packages/fluent/scss/listview/_layout.scss b/packages/fluent/scss/listview/_layout.scss
@@ -114,7 +114,6 @@
     .k-listview-pager {
         border-width: 0;
         border-color: inherit;
-        font: inherit;
     }
     .k-listview-bordered > .k-listview-pager-top {
         border-block-end-width: var( --kendo-listview-border-width, #{$kendo-listview-border-width} );

diff --git a/packages/fluent/scss/listview/_theme.scss b/packages/fluent/scss/listview/_theme.scss
@@ -8,7 +8,7 @@
             var( --kendo-listview-text, $kendo-listview-text ),
             var( --kendo-listview-bg, $kendo-listview-bg ),
             var( --kendo-listview-border, $kendo-listview-border )
-        )
+        );
     }
 
 
@@ -31,6 +31,11 @@
         }
     }
 
+    // List item
+    .k-listview-item {
+        border-color: $kendo-listview-border;
+    }
+
     // Listview header
     .k-listview-header {
         @include fill(

diff --git a/packages/material/scss/listview/_theme.scss b/packages/material/scss/listview/_theme.scss
@@ -9,7 +9,7 @@
     // Listview content
     .k-listview-content {}
     .k-listview-content > .k-selected.k-focus {
-        background-color: rgba( k-contrast-color( $listview-bg ), .12 );
+        background-color: rgba( k-contrast-color( $kendo-listview-bg ), .12 );
     }
 
 }
diff --git a/packages/material/scss/listview/_variables.scss b/packages/material/scss/listview/_variables.scss
@@ -1,25 +1,25 @@
 // Listview
-$listview-padding-x: k-map-get( $spacing, 1 ) !default;
-$listview-padding-y: k-map-get( $spacing, 1 ) !default;
-$listview-border-width: 1px !default;
-$listview-font-family: $font-family !default;
-$listview-font-size: $font-size !default;
-$listview-line-height: $line-height !default;
+$kendo-listview-padding-x: k-map-get( $spacing, 1 ) !default;
+$kendo-listview-padding-y: k-map-get( $spacing, 1 ) !default;
+$kendo-listview-border-width: 1px !default;
+$kendo-listview-font-family: $font-family !default;
+$kendo-listview-font-size: $font-size !default;
+$kendo-listview-line-height: $line-height !default;
 
-$listview-bg: $component-bg !default;
-$listview-text: $component-text !default;
-$listview-border: $component-border !default;
+$kendo-listview-bg: $component-bg !default;
+$kendo-listview-text: $component-text !default;
+$kendo-listview-border: $component-border !default;
 
-$listview-grid-gap: 10px !default;
+$kendo-listview-grid-gap: 10px !default;
 
-$listview-item-padding-x: k-map-get( $spacing, 1 ) !default;
-$listview-item-padding-y: k-map-get( $spacing, 1 ) !default;
+$kendo-listview-item-padding-x: k-map-get( $spacing, 1 ) !default;
+$kendo-listview-item-padding-y: k-map-get( $spacing, 1 ) !default;
 
-$listview-item-selected-bg: rgba( k-contrast-color( $listview-bg ), .04 ) !default;
-$listview-item-selected-text: null !default;
-$listview-item-selected-border: null !default;
+$kendo-listview-item-selected-bg: rgba( k-contrast-color( $kendo-listview-bg ), .04 ) !default;
+$kendo-listview-item-selected-text: null !default;
+$kendo-listview-item-selected-border: null !default;
 
-$listview-item-focus-bg: rgba( k-contrast-color( $listview-bg ), .08 ) !default;
-$listview-item-focus-text: null !default;
-$listview-item-focus-border: null !default;
-$listview-item-focus-shadow: null !default;
+$kendo-listview-item-focus-bg: rgba( k-contrast-color( $kendo-listview-bg ), .08 ) !default;
+$kendo-listview-item-focus-text: null !default;
+$kendo-listview-item-focus-border: null !default;
+$kendo-listview-item-focus-shadow: null !default;