From 47f6048bd4b96795a8007496e9d069bf48725d1d Mon Sep 17 00:00:00 2001 From: Emil Petrov Date: Wed, 16 Nov 2022 14:24:30 +0200 Subject: [PATCH] feat(listbox): wrap listbox actions in k-listbox-actions container BREAKING CHANGE: The following classes have been renamed: * `k-listbox-toolbar` renamed to `k-listbox-actions` * `k-listbox-toolbar-left` renamed to `k-listbox-actions-left` * `k-listbox-toolbar-right` renamed to `k-listbox-actions-right` * `k-listbox-toolbar-top` renamed to `k-listbox-actions-top` * `k-listbox-toolbar-bottom` renamed to `k-listbox-actions-bottom` --- .../bootstrap/scss/listbox/_variables.scss | 4 +- packages/classic/scss/listbox/_variables.scss | 4 +- packages/default/scss/listbox/_layout.scss | 70 +++++-------------- packages/default/scss/listbox/_variables.scss | 4 +- packages/fluent/scss/listbox/_layout.scss | 50 ++++--------- packages/fluent/scss/listbox/_variables.scss | 4 +- .../material/scss/listbox/_variables.scss | 4 +- 7 files changed, 39 insertions(+), 101 deletions(-) diff --git a/packages/bootstrap/scss/listbox/_variables.scss b/packages/bootstrap/scss/listbox/_variables.scss index 47803ccc4b2..1f4c5aad711 100644 --- a/packages/bootstrap/scss/listbox/_variables.scss +++ b/packages/bootstrap/scss/listbox/_variables.scss @@ -1,6 +1,6 @@ // Listbox -$listbox-margin: 5px !default; -$listbox-button-margin: $padding-x !default; +$listbox-spacing: k-map-get( $spacing, 2 ) !default; +$listbox-button-spacing: $padding-x !default; $listbox-width: 10em !default; $listbox-default-height: 200px !default; diff --git a/packages/classic/scss/listbox/_variables.scss b/packages/classic/scss/listbox/_variables.scss index 97f6487f4b3..b167df44cb7 100644 --- a/packages/classic/scss/listbox/_variables.scss +++ b/packages/classic/scss/listbox/_variables.scss @@ -1,6 +1,6 @@ // Listbox -$listbox-margin: $padding-x !default; -$listbox-button-margin: $padding-x !default; +$listbox-spacing: $padding-x !default; +$listbox-button-spacing: $padding-x !default; $listbox-width: 10em !default; $listbox-default-height: 200px !default; diff --git a/packages/default/scss/listbox/_layout.scss b/packages/default/scss/listbox/_layout.scss index f62b9b8388a..4b4d26791bc 100644 --- a/packages/default/scss/listbox/_layout.scss +++ b/packages/default/scss/listbox/_layout.scss @@ -11,63 +11,39 @@ vertical-align: top; background-color: transparent; display: inline-flex; + gap: $listbox-spacing; -webkit-touch-callout: none; -webkit-tap-highlight-color: $rgba-transparent; - .k-listbox-toolbar ul { + .k-listbox-actions { display: flex; + gap: $listbox-button-spacing; } - &.k-listbox-toolbar-left, - &.k-listbox-toolbar-right { - .k-listbox-toolbar ul { - flex-direction: column; - } - - .k-listbox-toolbar li + li { - margin-top: $listbox-button-margin; - } - } - - &.k-listbox-toolbar-left { + &.k-listbox-actions-left, + &.k-listbox-actions-right { flex-direction: row; - .k-listbox-toolbar { - margin-right: $listbox-margin; + .k-listbox-actions { + flex-direction: column; } } - &.k-listbox-toolbar-right { + &.k-listbox-actions-right { flex-direction: row-reverse; - - .k-listbox-toolbar { - margin-left: $listbox-margin; - } } - &.k-listbox-toolbar-top, - &.k-listbox-toolbar-bottom { + &.k-listbox-actions-top, + &.k-listbox-actions-bottom { flex-direction: column; - .k-listbox-toolbar ul { + .k-listbox-actions { flex-direction: row; } - - .k-listbox-toolbar li + li { - margin-left: $listbox-button-margin; - } } - &.k-listbox-toolbar-top { - .k-listbox-toolbar { - margin-bottom: $listbox-margin; - } - } - - &.k-listbox-toolbar-bottom { - .k-listbox-toolbar { - margin-top: $listbox-margin; - } + &.k-listbox-actions-bottom { + flex-direction: column-reverse; } .k-list-scroller { @@ -100,26 +76,12 @@ &[dir="rtl"], [dir="rtl"] & { - &.k-listbox-toolbar-left, - &.k-listbox-toolbar-right { - .k-listbox-toolbar { + &.k-listbox-actions-left, + &.k-listbox-actions-right { + .k-listbox-actions { transform: scaleX(-1); } } - - &.k-listbox-toolbar-left { - .k-listbox-toolbar { - margin-right: 0; - margin-left: $listbox-margin; - } - } - - &.k-listbox-toolbar-right { - .k-listbox-toolbar { - margin-right: $listbox-margin; - margin-left: 0; - } - } } } diff --git a/packages/default/scss/listbox/_variables.scss b/packages/default/scss/listbox/_variables.scss index 97f6487f4b3..b167df44cb7 100644 --- a/packages/default/scss/listbox/_variables.scss +++ b/packages/default/scss/listbox/_variables.scss @@ -1,6 +1,6 @@ // Listbox -$listbox-margin: $padding-x !default; -$listbox-button-margin: $padding-x !default; +$listbox-spacing: $padding-x !default; +$listbox-button-spacing: $padding-x !default; $listbox-width: 10em !default; $listbox-default-height: 200px !default; diff --git a/packages/fluent/scss/listbox/_layout.scss b/packages/fluent/scss/listbox/_layout.scss index 004187e23a1..a89769c0fb4 100644 --- a/packages/fluent/scss/listbox/_layout.scss +++ b/packages/fluent/scss/listbox/_layout.scss @@ -14,63 +14,39 @@ vertical-align: top; background-color: transparent; display: inline-flex; + gap: var( --kendo-listbox-spacing, #{$kendo-listbox-spacing} ); -webkit-touch-callout: none; -webkit-tap-highlight-color: $rgba-transparent; - .k-listbox-toolbar ul { + .k-listbox-actions { display: flex; + gap: var( --kendo-listbox-button-spacing, #{$kendo-listbox-button-spacing} ); } - &.k-listbox-toolbar-left, - &.k-listbox-toolbar-right { - .k-listbox-toolbar ul { - flex-direction: column; - } - - .k-listbox-toolbar li + li { - margin-block-start: var( --kendo-listbox-button-margin, #{$kendo-listbox-button-margin} ); - } - } - - &.k-listbox-toolbar-left { + &.k-listbox-actions-left, + &.k-listbox-actions-right { flex-direction: row; - .k-listbox-toolbar { - margin-inline-end: var( --kendo-listbox-margin, #{$kendo-listbox-margin} ); + .k-listbox-actions { + flex-direction: column; } } - &.k-listbox-toolbar-right { + &.k-listbox-actions-right { flex-direction: row-reverse; - - .k-listbox-toolbar { - margin-inline-start: var( --kendo-listbox-margin, #{$kendo-listbox-margin} ); - } } - &.k-listbox-toolbar-top, - &.k-listbox-toolbar-bottom { + &.k-listbox-actions-top, + &.k-listbox-actions-bottom { flex-direction: column; - .k-listbox-toolbar ul { + .k-listbox-actions { flex-direction: row; } - - .k-listbox-toolbar li + li { - margin-inline-start: var( --kendo-listbox-button-margin, #{$kendo-listbox-button-margin} ); - } } - &.k-listbox-toolbar-top { - .k-listbox-toolbar { - margin-block-end: var( --kendo-listbox-margin, #{$kendo-listbox-margin} ); - } - } - - &.k-listbox-toolbar-bottom { - .k-listbox-toolbar { - margin-block-start: var( --kendo-listbox-margin, #{$kendo-listbox-margin} ); - } + &.k-listbox-actions-bottom { + flex-direction: column-reverse; } .k-list-scroller { diff --git a/packages/fluent/scss/listbox/_variables.scss b/packages/fluent/scss/listbox/_variables.scss index aa5835b7e61..1c883ab4355 100644 --- a/packages/fluent/scss/listbox/_variables.scss +++ b/packages/fluent/scss/listbox/_variables.scss @@ -3,10 +3,10 @@ /// Margin between the listbox elements. /// @group listbox -$kendo-listbox-margin: $kendo-padding-x !default; +$kendo-listbox-spacing: $kendo-padding-x !default; /// Margin between the listbox buttons. /// @group listbox -$kendo-listbox-button-margin: $kendo-padding-x !default; +$kendo-listbox-button-spacing: $kendo-padding-x !default; /// Width of the listbox. /// @group listbox $kendo-listbox-width: 10em !default; diff --git a/packages/material/scss/listbox/_variables.scss b/packages/material/scss/listbox/_variables.scss index 219039218a7..d0ecc131561 100644 --- a/packages/material/scss/listbox/_variables.scss +++ b/packages/material/scss/listbox/_variables.scss @@ -1,6 +1,6 @@ // Listbox -$listbox-margin: 12px !default; -$listbox-button-margin: 8px !default; +$listbox-spacing: k-map-get( $spacing, 3 ) !default; +$listbox-button-spacing: k-map-get( $spacing, 2 ) !default; $listbox-width: 10em !default; $listbox-default-height: 200px !default;