Skip to content

Commit

Permalink
fix(input): make all inputs to match filled material input
Browse files Browse the repository at this point in the history
  • Loading branch information
@joneff
joneff committed Dec 10, 2021
1 parent 029560e commit 9731e30
Show file tree
Hide file tree
Showing 13 changed files with 30 additions and 115 deletions.
8 changes: 1 addition & 7 deletions packages/material/scss/autocomplete/_layout.scss
View file
Expand Up @@ -3,15 +3,9 @@
@include exports( "autocomplete/layout/material" ) {

.k-autocomplete {
@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

// Disabled
&[disabled],
&.k-state-disabled {
border-bottom-style: dashed;
}

}

}
7 changes: 1 addition & 6 deletions packages/material/scss/colorpicker/_layout.scss
View file
Expand Up @@ -28,14 +28,9 @@
}

.k-picker-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

// Disabled
.k-state-disabled > &,
&.k-state-disabled {
border-bottom-style: dashed;
}
}

}
Expand Down
6 changes: 1 addition & 5 deletions packages/material/scss/combobox/_layout.scss
View file
Expand Up @@ -4,13 +4,9 @@

.k-combobox {
.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

// Disabled
&.k-state-disabled {
border-bottom-style: dashed;
}
}
}

Expand Down
15 changes: 2 additions & 13 deletions packages/material/scss/datetime/_layout.scss
View file
Expand Up @@ -9,14 +9,9 @@

// Wrapper
.k-picker-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

// Disabled state
.k-state-disabled > &,
&.k-state-disabled {
border-bottom-style: dashed;
}
}
}

Expand All @@ -26,15 +21,9 @@

// Wrapper
.k-dateinput-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


// Disabled state
.k-state-disabled > &,
&.k-state-disabled {
border-bottom-style: dashed;
}
}
}

Expand Down
8 changes: 2 additions & 6 deletions packages/material/scss/dropdownlist/_layout.scss
View file
Expand Up @@ -4,20 +4,16 @@

.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

// Disabled
.k-state-disabled > &,
&.k-state-disabled {
border-bottom-style: dashed;
}
}
}


// 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
23 changes: 0 additions & 23 deletions packages/material/scss/filter/_layout.scss
View file
@@ -1,24 +1 @@
@import "~@progress/kendo-theme-default/scss/filter/_layout.scss";

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

.k-filter {
.k-filter-toolbar {
.k-picker-wrap,
.k-autocomplete,
.k-dateinput-wrap,
.k-combobox .k-dropdown-wrap {
border-width: 0 0 1px;

.k-input {
padding: $input-padding-y $input-padding-x;
height: calc( #{$input-padding-y * 2} + #{$input-line-height * 1em} );
}

.k-select {
padding: 0;
}
}
}
}
}
14 changes: 7 additions & 7 deletions packages/material/scss/input/_variables.scss
View file
Expand Up @@ -3,15 +3,15 @@ $input-default-width: 200px !default;

$input-border-width: 1px !default;
$input-border-height: 1px !default;
$input-border-radius: null !default;
$input-border-radius: map-get( $spacing, 1) !default;
$input-border-radius-sm: 0px !default;
$input-border-radius-lg: 0px !default;

$input-padding-x: 0px !default;
$input-padding-y: 8px !default;
$input-padding-x: map-get( $spacing, 4 ) !default;
$input-padding-y: map-get( $spacing, 2 ) !default;
$input-font-family: $font-family !default;
$input-font-size: $font-size-lg !default;
$input-line-height: 1.125 !default;
$input-font-size: $font-size-md !default;
$input-line-height: ( 20 / 14 ) !default;
$input-line-height-em: $input-line-height * 1em !default;

$input-padding-x-sm: ($input-padding-x / 2) !default;
Expand All @@ -35,9 +35,9 @@ $input-inner-calc-height-lg: calc( #{$input-line-height-lg * 1em} + #{$input-pad
$input-adornment-height: calc( #{$input-line-height * $input-font-size} + #{$input-padding-y * 2} ) !default;
$input-adornment-width: $input-adornment-height !default;

$input-bg: null !default;
$input-bg: try-shade( $component-bg, .5 ) !default;
$input-text: $component-text !default;
$input-border: $subtle-text !default;
$input-border: $component-border !default;
$input-shadow: null !default;

$input-hovered-bg: null !default;
Expand Down
7 changes: 1 addition & 6 deletions packages/material/scss/multiselect/_layout.scss
View file
Expand Up @@ -5,6 +5,7 @@
.k-multiselect {
.k-multiselect-wrap {
min-height: 0;
@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 Expand Up @@ -42,12 +43,6 @@
}
}

// Disabled
&.k-state-disabled > .k-multiselect-wrap,
.k-multiselect-wrap.k-state-disabled {
border-bottom-style: dashed;
}

&[dir="rtl"],
.k-rtl & {
.k-multiselect-wrap {
Expand Down
14 changes: 1 addition & 13 deletions packages/material/scss/numerictextbox/_layout.scss
View file
Expand Up @@ -4,21 +4,9 @@

.k-numerictextbox {
.k-numeric-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


// Disabled state
&.k-state-disabled {
border-bottom-style: dashed;
}
}

// Disabled state for k-state-disabled added to the k-numerictextbox
&.k-state-disabled {
.k-numeric-wrap {
border-bottom-style: dashed;
}
}
}

Expand Down
2 changes: 2 additions & 0 deletions packages/material/scss/searchbox/_layout.scss
View file
Expand Up @@ -2,7 +2,9 @@

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

// Searchbox
.k-searchbox {
@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
20 changes: 3 additions & 17 deletions packages/material/scss/textarea/_layout.scss
View file
Expand Up @@ -4,23 +4,9 @@

// Textarea
.k-textarea {
@include border-radius( $border-radius );
border-width: 0 0 1px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;

// Focus state
&:focus,
// &:focus-within,
&.k-state-focus,
&.k-state-focused {
border-bottom-left-radius: $textarea-border-radius;
border-bottom-right-radius: $textarea-border-radius;
}
&:focus-within {
border-bottom-left-radius: $textarea-border-radius;
border-bottom-right-radius: $textarea-border-radius;
}
@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
}

// Textarea Floating label
Expand Down
16 changes: 8 additions & 8 deletions packages/material/scss/textarea/_variables.scss
View file
Expand Up @@ -7,11 +7,11 @@ $textarea-border-radius: $input-border-radius !default;
$textarea-border-radius-sm: $input-border-radius-sm !default;
$textarea-border-radius-lg: $input-border-radius-lg !default;

$textarea-padding-x: 16px !default;
$textarea-padding-y: 6px !default;
$textarea-padding-x: $input-padding-x !default;
$textarea-padding-y: $input-padding-y !default;
$textarea-font-family: $input-font-family !default;
$textarea-font-size: $input-font-size !default;
$textarea-line-height: 24px !default;
$textarea-line-height: $input-line-height !default;
$textarea-line-height-em: $input-line-height-em !default;

$textarea-padding-x-sm: $input-padding-x-sm !default;
Expand All @@ -30,25 +30,25 @@ $textarea-calc-height-lg: $input-calc-height-lg !default;

$textarea-floating-label-padding: 3px !default;

$textarea-bg: try-shade( $body-bg, .5 ) !default;
$textarea-bg: $input-bg !default;
$textarea-text: $input-text !default;
$textarea-border: $input-border !default;
$textarea-shadow: $input-shadow !default;

$textarea-hover-text: $input-hovered-text !default;
$textarea-hover-bg: try-shade( $body-bg, 1 ) !default;
$textarea-hover-border: $input-border !default;
$textarea-hover-bg: $input-hovered-bg !default;
$textarea-hover-border: $input-hovered-border !default;
$textarea-hover-shadow: $input-hovered-shadow !default;

$textarea-focus-text: $input-focused-text !default;
$textarea-focus-bg: $input-focused-bg !default;
$textarea-focus-border: $input-focused-border !default;
$textarea-focus-shadow: 0 0 0 1px $primary !default;
$textarea-focus-shadow: $input-focused-shadow !default;

$textarea-placeholder-text: $input-placeholder-text !default;
$textarea-placeholder-opacity: $input-placeholder-opacity !default;

$textarea-selected-bg: $input-selected-bg !default;
$textarea-selected-text: $input-selected-text !default;

$textarea-invalid-focus-shadow: 0 0 0 1px $error !default;
$textarea-invalid-focus-shadow: null !default;
5 changes: 1 addition & 4 deletions packages/material/scss/textbox/_layout.scss
View file
Expand Up @@ -4,12 +4,9 @@

// Textbox
.k-textbox {
@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

&:disabled {
border-style: dashed;
}
}

}

0 comments on commit 9731e30

Please sign in to comment.