Skip to content

Commit

Permalink
feat(dropdown-list): add size, shape and color customization to dropd…
Browse files Browse the repository at this point in the history 
…own list

BREAKING CHANGE: Use high-level picker for dropdown list base

Dropdown list reuses the picker base component size, rounded and fill
component options.
  • Loading branch information
@joneff
joneff committed Jan 18, 2022
1 parent 3454223 commit 1a529a8
Show file tree
Hide file tree
Showing 14 changed files with 36 additions and 188 deletions.
9 changes: 0 additions & 9 deletions packages/bootstrap/scss/dropdownlist/_layout.scss
View file
@@ -1,10 +1 @@
@import "~@progress/kendo-theme-default/scss/dropdownlist/_layout.scss";

@include exports( "dropdownlist/layout/bootstrap" ) {

// Dropdown list
.k-dropdown {
transition: $transition;
}

}
5 changes: 5 additions & 0 deletions packages/bootstrap/scss/pager/_theme.scss
View file
Expand Up @@ -2,6 +2,11 @@

@include exports( "pager/theme/bootstrap" ) {


// Pager
.k-pager-wrap {}


// Responsive
.k-pager-md,
.k-pager-sm {
Expand Down
91 changes: 18 additions & 73 deletions packages/default/scss/dropdownlist/_layout.scss
View file
@@ -1,91 +1,36 @@
@include exports("dropdownlist/layout") {

// Dropdown list
.k-dropdown {
@include border-radius( $kendo-input-border-radius );
width: $kendo-input-default-width;
border-width: $kendo-input-border-width;
border-style: solid;
box-sizing: border-box;
outline: 0;
font-family: $kendo-input-font-family;
font-size: $kendo-input-font-size;
line-height: $kendo-input-line-height;
text-align: start;
white-space: nowrap;
display: inline-flex;
flex-flow: row nowrap;
vertical-align: middle;
position: relative;
overflow: hidden;
transition: all .1s ease; // sass-lint:disable-line no-transition-all
-webkit-touch-callout: none;
-webkit-tap-highlight-color: $rgba-transparent;
.k-dropdown-list {}

*,
*::before,
*::after {
box-sizing: border-box;
}


// Input
.k-input {}

// Native select
select.k-dropdown-list {}

// Loading icon
.k-i-loading {
// width: $kendo-input-icon-width;
// height: $kendo-input-icon-height;
}

// Dropdown operator
.k-dropdown-operator {
width: min-content;
flex: none;
aspect-ratio: 1;

// Select
.k-select {
// padding: $picker-select-padding-y $picker-select-padding-x;
width: if( $use-picker-select-width, $kendo-input-spinner-width, null );
.k-input-button {
border-width: 0;
border-inline-start-width: $kendo-input-button-width;
border-style: solid;
border-color: transparent;
outline: 0;
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: center;
flex: 0 0 auto;
cursor: pointer;
}
}



// Dropdown operator
.k-dropdown-operator {
width: auto;
.k-input-button .k-button-icon {
width: auto;
aspect-ratio: 1;
}

.k-input {
.k-input-inner {
display: none;
}
.k-select {
width: $kendo-button-inner-calc-size;
height: $kendo-button-inner-calc-size;
}
}


// Native select
select.k-dropdown {
@include border-radius( $kendo-input-border-radius );
padding: $kendo-input-padding-y $kendo-input-padding-x;
border-width: 1px;
border-style: solid;
box-sizing: border-box;
outline: 0;
overflow: hidden;
text-overflow: ellipsis;
transition: all .1s ease; // sass-lint:disable-block no-transition-all
cursor: pointer;
// Alias
.k-dropdown,
.k-dropdownlist {
@extend .k-dropdown-list !optional;
}

}
60 changes: 3 additions & 57 deletions packages/default/scss/dropdownlist/_theme.scss
View file
@@ -1,63 +1,9 @@
@include exports( "dropdownlist/theme" ) {

// Dropdown list
.k-dropdown {
@include fill(
$dropdownlist-text,
$dropdownlist-bg,
$dropdownlist-border,
$dropdownlist-gradient
);
.k-dropdown-list {}

// Hover state
&:hover,
&.k-state-hover {
@include fill(
$dropdownlist-hovered-text,
$dropdownlist-hovered-bg,
$dropdownlist-hovered-border,
$dropdownlist-hovered-gradient
);
}

// Focus state
&:focus,
&.k-state-focus {
@include fill(
$dropdownlist-focused-text,
$dropdownlist-focused-bg,
$dropdownlist-focused-border,
$dropdownlist-focused-gradient
);
@include box-shadow($dropdownlist-focused-shadow);
}
&:focus-within {
@include fill(
$dropdownlist-focused-text,
$dropdownlist-focused-bg,
$dropdownlist-focused-border,
$dropdownlist-focused-gradient
);
@include box-shadow($dropdownlist-focused-shadow);
}


// Invalid state
&.k-invalid,
&.ng-invalid,
&.k-state-invalid {
border-color: $invalid-border;

.k-input-validation-icon {
color: $invalid-text;
}

&:focus-within,
&.k-state-focus {
@include box-shadow($invalid-shadow);
}
}

}
// Native select
select.k-dropdown-list {}

}
2 changes: 1 addition & 1 deletion packages/default/scss/dropdowntree/_layout.scss
View file
Expand Up @@ -2,7 +2,7 @@

.k-dropdowntree {
@extend .k-multiselect;
@extend .k-dropdown;
@extend .k-dropdown-list;
}

// Dropdowntree popup
Expand Down
5 changes: 0 additions & 5 deletions packages/default/scss/editor/_layout.scss
View file
Expand Up @@ -576,11 +576,6 @@
.k-edit-field > .k-checkbox {
position: relative; // fix scrolling
}

// Align
.k-dropdown.k-align {
width: auto;
}
}


Expand Down
7 changes: 3 additions & 4 deletions packages/default/scss/filter/_layout.scss
View file
Expand Up @@ -47,10 +47,9 @@
.k-toolbar {
border-style: solid;
}

.k-filter-operator .k-dropdown {
width: $filter-operator-dropdown-width;
}
}
.k-filter-operator .k-dropdown-list {
width: $filter-operator-dropdown-width;
}

.k-filter-item {
Expand Down
1 change: 0 additions & 1 deletion packages/default/scss/forms/_layout.scss
View file
Expand Up @@ -140,7 +140,6 @@
}


.k-dropdown,
.k-multiselect,
.k-dateinput,
.k-datepicker,
Expand Down
13 changes: 4 additions & 9 deletions packages/default/scss/pager/_layout.scss
View file
Expand Up @@ -37,11 +37,6 @@
}
}

.k-widget,
select.k-dropdown {
font-size: inherit;
}

.k-rtl &,
&[dir="rtl"],
[dir="rtl"] & {
Expand Down Expand Up @@ -108,7 +103,7 @@
flex-direction: row;
position: relative;

select.k-dropdown {
select.k-dropdown-list {
cursor: pointer;
display: none;
}
Expand Down Expand Up @@ -176,15 +171,15 @@
.k-pager-sizes {
@extend %base-pager-section;

.k-dropdown,
.k-dropdown-list,
> select {
margin-right: 1ex;
width: $pager-dropdown-width;
}

.k-rtl &,
[dir="rtl"] & {
.k-dropdown,
.k-dropdown-list,
> select {
margin-left: 1ex;
margin-right: 0;
Expand Down Expand Up @@ -222,7 +217,7 @@

// Show native select
.k-pager-numbers-wrap {
select.k-dropdown {
select.k-dropdown-list {
width: $pager-dropdown-width;
display: flex;
}
Expand Down
4 changes: 2 additions & 2 deletions packages/default/scss/pivotgrid/_layout.scss
View file
Expand Up @@ -247,7 +247,7 @@
font-weight: 500;
align-items: flex-start;
}
.k-dropdown {
.k-dropdown-list {
max-width: 90px;
}
.k-textbox {
Expand Down Expand Up @@ -340,7 +340,7 @@
.k-icon {
margin-right: map-get( $spacing, 2 );
}
.k-dropdown {
.k-dropdown-list {
max-width: 100px;
}
}
Expand Down
11 changes: 0 additions & 11 deletions packages/material/scss/dropdownlist/_layout.scss
View file
@@ -1,12 +1 @@
@import "~@progress/kendo-theme-default/scss/dropdownlist/_layout.scss";

@include exports( "dropdownlist/layout/material" ) {

// Dropdown list
.k-dropdown {
@include border-bottom-radius( 0 !important ); // sass-lint:disable-line no-important
border-width: $kendo-input-border-width 0;
border-top-color: transparent !important; // sass-lint:disable-line no-important
}

}
5 changes: 0 additions & 5 deletions packages/material/scss/editor/_layout.scss
View file
Expand Up @@ -49,11 +49,6 @@
float: none;
display: flex;
flex-direction: row;

.k-dropdown {
width: auto;
flex: 1 1 auto;
}
}

}
Expand Down
5 changes: 0 additions & 5 deletions packages/material/scss/forms/_layout.scss
View file
Expand Up @@ -19,11 +19,6 @@
display: flex;
flex-direction: row;

.k-dropdown {
width: auto;
flex: 1 1 auto;
}

> div {
width: auto;
flex: 1 1 auto;
Expand Down
6 changes: 0 additions & 6 deletions packages/material/scss/grid/_layout.scss
View file
Expand Up @@ -53,12 +53,6 @@ $grid-group-dropclue-top: calc( ( #{$kendo-button-calc-size} + #{$grid-grouping-
border-radius: 50%;
}

.k-filter-row {
.k-dropdown-operator .k-dropdown-wrap {
border-width: 0;
}
}

.k-header-column-menu {
border-radius: 50%;
}
Expand Down

0 comments on commit 1a529a8

Please sign in to comment.