fix(list): use correct colors for various list parts

telerik · Dec 9, 2021 · efac2c6 · efac2c6
1 parent 457c7db
commit efac2c6
Show file tree

Hide file tree

Showing 7 changed files with 23 additions and 12 deletions.
diff --git a/packages/bootstrap/scss/list/_variables.scss b/packages/bootstrap/scss/list/_variables.scss
@@ -13,5 +13,5 @@ $list-item-selected-text: $selected-text !default;
 
 $list-item-focused-shadow: inset 0 0 0 3px rgba( $list-item-text, .15 ) !default;
 
-$list-container-shadow: 0 5px 10px 0 rgba(0, 0, 0, .06) !default;
-$list-container-no-data-text: rgba( $component-text, .5 ) !default;
+$list-container-shadow: null !default;
+$list-container-no-data-text: $subtle-text !default;
diff --git a/packages/classic/scss/list/_variables.scss b/packages/classic/scss/list/_variables.scss
@@ -13,5 +13,5 @@ $list-item-selected-text: $selected-text !default;
 
 $list-item-focused-shadow: inset 0 0 0 2px rgba(0, 0, 0, .12) !default;
 
-$list-container-shadow: 0 5px 10px 0 rgba(0, 0, 0, .06) !default;
-$list-container-no-data-text: rgba( $component-text, .5 ) !default;
+$list-container-shadow: null !default;
+$list-container-no-data-text: $subtle-text !default;
diff --git a/packages/default/scss/list/_layout.scss b/packages/default/scss/list/_layout.scss
@@ -88,7 +88,7 @@
 
     .k-list__item__group { // sass-lint:disable-line class-name-format
         padding: 0 .5em;
-        font-size: .875em;
+        font-size: .75em;
         position: absolute;
         top: 0;
         right: 0;

diff --git a/packages/default/scss/list/_theme.scss b/packages/default/scss/list/_theme.scss
@@ -9,8 +9,8 @@
     }
 
     .k-list__item__group { // sass-lint:disable-line class-name-format
-        color: $grouping-header-text;
-        background: $grouping-header-bg;
+        color: $component-bg;
+        background: $component-text;
     }
 
     .k-list__item:hover, // sass-lint:disable-line class-name-format

diff --git a/packages/default/scss/list/_variables.scss b/packages/default/scss/list/_variables.scss
@@ -14,4 +14,4 @@ $list-item-selected-text: $selected-text !default;
 $list-item-focused-shadow: inset 0 0 0 2px rgba(0, 0, 0, .12) !default;
 
 $list-container-shadow: 0 5px 10px 0 rgba(0, 0, 0, .06) !default;
-$list-container-no-data-text: rgba( $component-text, .5 ) !default;
+$list-container-no-data-text: $subtle-text !default;
diff --git a/packages/material/scss/list/_layout.scss b/packages/material/scss/list/_layout.scss
@@ -3,6 +3,7 @@
 @include exports( "list/layout/material" ) {
 
     .k-list-container {
+        line-height: 1.5;
 
         .k-button {
             box-shadow: none;
@@ -14,4 +15,14 @@
 
     }
 
+    .k-list {
+        line-height: 1.5;
+    }
+
+    .k-list__item, // sass-lint:disable-line class-name-format
+    .k-list__group-header { // sass-lint:disable-line class-name-format
+        min-height: auto;
+        line-height: inherit;
+    }
+
 }
diff --git a/packages/material/scss/list/_variables.scss b/packages/material/scss/list/_variables.scss
@@ -1,6 +1,6 @@
 // List
-$list-item-padding-x: $padding-x * 1.5 !default;
-$list-item-padding-y: $padding-y / 2 !default;
+$list-item-padding-x: map-get( $spacing, 4 ) !default;
+$list-item-padding-y: map-get( $spacing, 1 ) !default;
 
 $list-item-bg: null !default;
 $list-item-text: $component-text !default;
@@ -13,5 +13,5 @@ $list-item-selected-text: $secondary !default;
 
 $list-item-focused-shadow: null !default;
 
-$list-container-shadow: 0 5px 10px 0 rgba(0, 0, 0, .06) !default;
-$list-container-no-data-text: rgba( $body-text, .5 ) !default;
+$list-container-shadow: null !default;
+$list-container-no-data-text: $subtle-text !default;