Skip to content

Commit

Permalink
feat(listbox): wrap listbox actions in k-listbox-actions container
Browse files Browse the repository at this point in the history 
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`
  • Loading branch information
@epetrow @joneff
epetrow authored and joneff committed Dec 13, 2022
1 parent 43c66e4 commit 47f6048
Show file tree
Hide file tree
Showing 7 changed files with 39 additions and 101 deletions.
4 changes: 2 additions & 2 deletions packages/bootstrap/scss/listbox/_variables.scss
View file
@@ -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;

Expand Down
4 changes: 2 additions & 2 deletions packages/classic/scss/listbox/_variables.scss
View file
@@ -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;

Expand Down
70 changes: 16 additions & 54 deletions packages/default/scss/listbox/_layout.scss
View file
Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
}
}
}
}

Expand Down
4 changes: 2 additions & 2 deletions packages/default/scss/listbox/_variables.scss
View file
@@ -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;

Expand Down
50 changes: 13 additions & 37 deletions packages/fluent/scss/listbox/_layout.scss
View file
Expand Up @@ -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 {
Expand Down
4 changes: 2 additions & 2 deletions packages/fluent/scss/listbox/_variables.scss
View file
Expand Up @@ -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;
Expand Down
4 changes: 2 additions & 2 deletions packages/material/scss/listbox/_variables.scss
View file
@@ -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;

Expand Down

0 comments on commit 47f6048

Please sign in to comment.