diff --git a/packages/bootstrap/scss/checkbox/_index.scss b/packages/bootstrap/scss/checkbox/_index.scss index 65557049251..cdb839faa1f 100644 --- 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 index 0ab4afe99cd..137124f0f8f 100644 --- 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 index f362851a104..4269170f54f 100644 --- 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 index 589ee0590b3..49b3a6a35be 100644 --- 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 index 65557049251..cdb839faa1f 100644 --- 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 index 0ab4afe99cd..137124f0f8f 100644 --- 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 index 99dff8467c0..76601e3a83a 100644 --- 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 index 589ee0590b3..49b3a6a35be 100644 --- 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 index 65557049251..cdb839faa1f 100644 --- 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 index 0ab4afe99cd..137124f0f8f 100644 --- 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 index 8409642aa7a..7a4077550bd 100644 --- 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 index 02979ad13c9..363af7e157a 100644 --- 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 index 589ee0590b3..49b3a6a35be 100644 --- 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 index 65557049251..cdb839faa1f 100644 --- 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 index 0ab4afe99cd..137124f0f8f 100644 --- 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 index 865cd813c8e..578879a63a9 100644 --- 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 index c5a8e35fe08..b7875eb9eb9 100644 --- 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 index 589ee0590b3..49b3a6a35be 100644 --- 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";