diff --git a/packages/bootstrap/scss/listview/_variables.scss b/packages/bootstrap/scss/listview/_variables.scss index bde47372da6..74a235dc210 100644 --- 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 index ca57b87aa53..9d1a98ec32d 100644 --- 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 index 9920f90664f..b657367ead3 100644 --- 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,7 +90,7 @@ border-color: inherit; } .k-listview-bordered > .k-listview-footer { - border-top-width: $listview-border-width; + border-top-width: $kendo-listview-border-width; } @@ -98,13 +98,12 @@ .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 index f7370b5e053..9886688797c 100644 --- 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 index d42bad0f9c6..6a2aa81c0b2 100644 --- 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 index d4f44772d94..92e574b7014 100644 --- 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 index 996a7576583..181f22b3ebb 100644 --- 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 index 6a5d98c6bfe..11916ae3c57 100644 --- 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 index 80062ba8f63..2f23a1d958e 100644 --- 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;