fix(list): better alignment for checkboxes in multiline scenario

telerik · Dec 31, 2021 · d87921a · d87921a
1 parent 9c9e647
commit d87921a
Show file tree

Hide file tree

Showing 18 changed files with 47 additions and 13 deletions.
diff --git a/packages/bootstrap/scss/checkbox/_index.scss b/packages/bootstrap/scss/checkbox/_index.scss
@@ -2,6 +2,7 @@
 
 
 // Dependencies
+@import "../typography/_variables.scss";
 @import "../list/_variables.scss";
 
 

diff --git a/packages/bootstrap/scss/list/_index.scss b/packages/bootstrap/scss/list/_index.scss
@@ -3,6 +3,7 @@
 
 // Dependencies
 @import "../common/_index.scss";
+@import "../checkbox/_index.scss";
 
 
 // Component

diff --git a/packages/bootstrap/scss/list/_variables.scss b/packages/bootstrap/scss/list/_variables.scss
@@ -1,4 +1,8 @@
 // List
+$list-font-size: $font-size !default;
+$list-line-height: $line-height !default;
+$list-line-height-em: $line-height-em !default;
+
 $list-item-padding-x: map-get( $spacing, 4 ) !default;
 $list-item-padding-y: map-get( $spacing, 1 ) !default;
 

diff --git a/packages/bootstrap/scss/radio/_index.scss b/packages/bootstrap/scss/radio/_index.scss
@@ -2,6 +2,7 @@
 
 
 // Dependencies
+@import "../typography/_variables.scss";
 @import "../list/_variables.scss";
 @import "../checkbox/_variables.scss";
 

diff --git a/packages/classic/scss/checkbox/_index.scss b/packages/classic/scss/checkbox/_index.scss
@@ -2,6 +2,7 @@
 
 
 // Dependencies
+@import "../typography/_variables.scss";
 @import "../list/_variables.scss";
 
 

diff --git a/packages/classic/scss/list/_index.scss b/packages/classic/scss/list/_index.scss
@@ -3,6 +3,7 @@
 
 // Dependencies
 @import "../common/_index.scss";
+@import "../checkbox/_index.scss";
 
 
 // Component

diff --git a/packages/classic/scss/list/_variables.scss b/packages/classic/scss/list/_variables.scss
@@ -1,4 +1,8 @@
 // List
+$list-font-size: $font-size !default;
+$list-line-height: $line-height !default;
+$list-line-height-em: $line-height-em !default;
+
 $list-item-padding-x: $padding-x !default;
 $list-item-padding-y: $padding-y !default;
 

diff --git a/packages/classic/scss/radio/_index.scss b/packages/classic/scss/radio/_index.scss
@@ -2,6 +2,7 @@
 
 
 // Dependencies
+@import "../typography/_variables.scss";
 @import "../list/_variables.scss";
 @import "../checkbox/_variables.scss";
 

diff --git a/packages/default/scss/checkbox/_index.scss b/packages/default/scss/checkbox/_index.scss
@@ -2,6 +2,7 @@
 
 
 // Dependencies
+@import "../typography/_variables.scss";
 @import "../list/_variables.scss";
 
 

diff --git a/packages/default/scss/list/_index.scss b/packages/default/scss/list/_index.scss
@@ -3,6 +3,7 @@
 
 // Dependencies
 @import "../common/_index.scss";
+@import "../checkbox/_index.scss";
 
 
 // Component

diff --git a/packages/default/scss/list/_layout.scss b/packages/default/scss/list/_layout.scss
@@ -1,5 +1,11 @@
 @include exports( "list/layout" ) {
 
+    .k-list,
+    .k-list-container {
+        font-size: $list-font-size;
+        line-height: $list-line-height;
+    }
+
     // Layout
     .k-list-scroller {
         position: relative;
@@ -14,7 +20,7 @@
 
     .k-list__group-header { // sass-lint:disable-line class-name-format
         padding: $list-item-padding-y $list-item-padding-x;
-        min-height: $line-height-em;
+        min-height: $list-line-height-em;
         border-bottom-width: 1px;
         border-bottom-style: solid;
         font-size: $font-size;
@@ -56,8 +62,8 @@
 
     .k-list__item { // sass-lint:disable-line class-name-format
         padding: $list-item-padding-y $list-item-padding-x;
-        min-height: $line-height-em;
-        line-height: $line-height-em;
+        min-height: $list-line-height-em;
+        line-height: $list-line-height;
         white-space: normal;
         display: flex;
         align-items: center;
@@ -70,6 +76,12 @@
         transition-timing-function: ease;
         outline: none;
 
+        .k-checkbox {
+            margin-top: calc( ( #{$list-line-height-em} - #{$checkbox-size} ) / 2 );
+            font-size: inherit;
+            align-self: flex-start;
+        }
+
         &.k-first::before {
             content: "";
             display: block;

diff --git a/packages/default/scss/list/_variables.scss b/packages/default/scss/list/_variables.scss
@@ -1,4 +1,8 @@
 // List
+$list-font-size: $font-size !default;
+$list-line-height: $line-height !default;
+$list-line-height-em: $line-height-em !default;
+
 $list-item-padding-x: $padding-x !default;
 $list-item-padding-y: $padding-y !default;
 

diff --git a/packages/default/scss/radio/_index.scss b/packages/default/scss/radio/_index.scss
@@ -2,6 +2,7 @@
 
 
 // Dependencies
+@import "../typography/_variables.scss";
 @import "../list/_variables.scss";
 @import "../checkbox/_variables.scss";
 

diff --git a/packages/material/scss/checkbox/_index.scss b/packages/material/scss/checkbox/_index.scss
@@ -2,6 +2,7 @@
 
 
 // Dependencies
+@import "../typography/_variables.scss";
 @import "../list/_variables.scss";
 
 

diff --git a/packages/material/scss/list/_index.scss b/packages/material/scss/list/_index.scss
@@ -3,6 +3,7 @@
 
 // Dependencies
 @import "../common/_index.scss";
+@import "../checkbox/_index.scss";
 
 
 // Component

diff --git a/packages/material/scss/list/_layout.scss b/packages/material/scss/list/_layout.scss
@@ -3,7 +3,6 @@
 @include exports( "list/layout/material" ) {
 
     .k-list-container {
-        line-height: 1.5;
 
         .k-button {
             box-shadow: none;
@@ -13,16 +12,11 @@
             }
         }
 
-    }
-
-    .k-list {
-        line-height: 1.5;
-    }
+        .k-list__group-header { // sass-lint:disable-line class-name-format
+            min-height: auto;
+            line-height: inherit;
+        }
 
-    .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,4 +1,8 @@
 // List
+$list-font-size: $font-size !default;
+$list-line-height: 1.5 !default;
+$list-line-height-em: 1.5em !default;
+
 $list-item-padding-x: map-get( $spacing, 4 ) !default;
 $list-item-padding-y: map-get( $spacing, 1 ) !default;
 

diff --git a/packages/material/scss/radio/_index.scss b/packages/material/scss/radio/_index.scss
@@ -2,6 +2,7 @@
 
 
 // Dependencies
+@import "../typography/_variables.scss";
 @import "../list/_variables.scss";
 @import "../checkbox/_variables.scss";