Skip to content

Commit

Permalink
fix(dropdown-list): update styles to match universal v4 rendering
Browse files Browse the repository at this point in the history
  • Loading branch information
@joneff
joneff committed Dec 29, 2021
1 parent 18645f1 commit eb21b75
Show file tree
Hide file tree
Showing 6 changed files with 77 additions and 180 deletions.
9 changes: 3 additions & 6 deletions packages/bootstrap/scss/dropdownlist/_layout.scss
View file
@@ -1,13 +1,10 @@
@import "~@progress/kendo-theme-default/scss/dropdownlist/_layout.scss";

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

// Dropdown
// Dropdown list
.k-dropdown {

.k-dropdown-wrap {
transition: $transition;
}
transition: $transition;
}

}
92 changes: 37 additions & 55 deletions packages/default/scss/dropdownlist/_layout.scss
View file
Expand Up @@ -2,70 +2,55 @@

// Dropdown list
.k-dropdown {
@include border-radius( $input-border-radius );
width: $input-default-width;
border-width: 0;
outline: 0;
background: none;
border-width: $input-border-width;
border-style: solid;
box-sizing: border-box;
outline: 0;
font-family: $input-font-family;
font-size: $input-font-size;
line-height: $input-line-height;
text-align: left;
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-wrap {
@include border-radius( $input-border-radius );
padding: 0;
width: 100%;
display: flex;
flex-flow: row nowrap;
border-width: 1px;
border-style: solid;
box-sizing: border-box;
position: relative;
transition: all .1s ease; // sass-lint:disable-line no-transition-all
cursor: pointer;
outline: 0;
overflow: hidden;


// Input
.k-input {}
// Input
.k-input {}


// Select
.k-select {
padding: $picker-select-padding-y $picker-select-padding-x;
width: if( $use-picker-select-width, $button-inner-calc-size, null );
border-width: 0;
border-inline-start-width: $picker-select-border-width;
border-color: transparent;
box-sizing: border-box;
border-style: solid;
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
text-align: center;
cursor: pointer;
}
// Loading icon
.k-i-loading {
width: $input-icon-width;
height: $input-icon-height;
}

}


// RTL

.k-dropdown.k-rtl,
.k-dropdown[dir="rtl"],
.k-rtl .k-dropdown,
[dir="rtl"] .k-dropdown {
text-align: right;
// Select
.k-select {
padding: $picker-select-padding-y $picker-select-padding-x;
width: if( $use-picker-select-width, $spinner-width, null );
border-width: 0;
border-inline-start-width: $picker-select-border-width;
border-style: solid;
border-color: transparent;
box-sizing: border-box;
outline: 0;
display: flex;
flex-flow: row nowrap;
align-items: center;
justify-content: center;
flex: 0 0 auto;
cursor: pointer;
}
}


Expand All @@ -74,16 +59,13 @@
.k-dropdown-operator {
width: auto;

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

}


Expand Down
108 changes: 33 additions & 75 deletions packages/default/scss/dropdownlist/_theme.scss
View file
@@ -1,78 +1,7 @@
@include exports( "dropdownlist/theme" ) {

// Dropdown list
.k-dropdown {

.k-dropdown-wrap {
@include fill(
$dropdownlist-text,
$dropdownlist-bg,
$dropdownlist-border,
$dropdownlist-gradient
);

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

&.k-state-active {}

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

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

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

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

// Invalid
&.k-state-invalid,
&.ng-invalid.ng-touched,
&.ng-invalid.ng-dirty {
> .k-dropdown-wrap {
border-color: $invalid-border;

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

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

}

// Native select
select.k-dropdown {
@include fill(
$dropdownlist-text,
$dropdownlist-bg,
Expand All @@ -81,7 +10,8 @@
);

// Hover state
&:hover {
&:hover,
&.k-state-hover {
@include fill(
$dropdownlist-hovered-text,
$dropdownlist-hovered-bg,
Expand All @@ -90,8 +20,18 @@
);
}

// Focused state
&:focus {
// 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,
Expand All @@ -100,6 +40,24 @@
);
@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);
}
}

}

}
13 changes: 2 additions & 11 deletions packages/material/scss/dropdownlist/_layout.scss
View file
@@ -1,18 +1,9 @@
@import "~@progress/kendo-theme-default/scss/dropdownlist/_layout.scss";

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

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


// Native select
select.k-dropdown {
@include border-bottom-radius( 0 !important ); // sass-lint:disable-line no-important
border-width: $input-border-width 0;
border-top-color: transparent !important; // sass-lint:disable-line no-important
Expand Down
31 changes: 0 additions & 31 deletions packages/material/scss/dropdownlist/_theme.scss
View file
@@ -1,32 +1 @@
@import "~@progress/kendo-theme-default/scss/dropdownlist/_theme.scss";

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

.k-dropdown {
.k-dropdown-wrap {

.k-select {
color: $dropdownlist-select-text;
}

// Hover
&:hover,
&.k-state-hover {

.k-select {
color: $dropdownlist-select-hovered-text;
}
}

// Focused
&.k-state-focused,
.k-state-focused > & {

.k-select {
color: $dropdownlist-select-focused-text;
}
}
}
}

}
4 changes: 2 additions & 2 deletions packages/material/scss/input/_variables.scss
View file
Expand Up @@ -78,12 +78,12 @@ $picker-select-calc-size-sm: calc( #{$picker-select-padding-x-sm * 2} + #{$icon-
$picker-select-calc-size-lg: calc( #{$picker-select-padding-x-sm * 2} + #{$icon-size} ) !default;

$picker-select-bg: null !default;
$picker-select-text: $subtle-text !default;
$picker-select-text: null !default;
$picker-select-border: null !default;
$picker-select-gradient: null !default;

$picker-select-hovered-bg: null !default;
$picker-select-hovered-text: $input-text !default;
$picker-select-hovered-text: null !default;
$picker-select-hovered-border: null !default;
$picker-select-hovered-gradient: null !default;

Expand Down

0 comments on commit eb21b75

Please sign in to comment.