Skip to content

Commit

Permalink
fix: use subtle-text variable for forms and input styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@joneff
joneff committed Feb 22, 2021
1 parent 2f3925d commit 0c49b7e
Show file tree
Hide file tree
Showing 25 changed files with 102 additions and 133 deletions.
2 changes: 1 addition & 1 deletion packages/bootstrap/scss/forms/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,5 +57,5 @@ $fieldset-text: null !default;
$fieldset-border: null !default;

$fieldset-legend-bg: null !default;
$fieldset-legend-text: darken($body-text, 13%) !default;
$fieldset-legend-text: null !default;
$fieldset-legend-border: null !default;
19 changes: 13 additions & 6 deletions packages/bootstrap/scss/input/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,9 +33,6 @@ $input-inner-calc-height: calc( #{$input-line-height * 1em} + #{$input-padding-y
$input-inner-calc-height-sm: calc( #{$input-line-height-sm * 1em} + #{$input-padding-y-sm * 2} ) !default;
$input-inner-calc-height-lg: calc( #{$input-line-height-lg * 1em} + #{$input-padding-y-lg * 2} ) !default;

$input-icon-width: calc( #{$icon-size} + #{$input-padding-y * 2} ) !default;
$input-icon-height: calc( #{$input-line-height * $input-font-size} + #{$input-padding-y * 2} ) !default;

$input-adornment-height: calc( #{$input-line-height * $input-font-size} + #{$input-padding-y * 2} ) !default;
$input-adornment-width: $input-adornment-height !default;

Expand All @@ -60,9 +57,6 @@ $input-placeholder-opacity: 1 !default;
$input-selected-bg: null !default;
$input-selected-text: null !default;

$input-separator-color: $clear-button-text !default;
$input-separator-opacity: .5 !default;

$input-clear-button-focused-background: #6c757d !default;
$input-clear-button-focused-opacity: .2 !default;

Expand All @@ -87,3 +81,16 @@ $picker-select-calc-size-lg: calc( #{$picker-select-padding-x-sm * 2} + #{$icon-
$spinner-width: $button-inner-calc-size !default;
$spinner-min-width: calc( #{$icon-size} + #{$picker-select-padding-x * 2} ) !default;
$spinner-icon-offset: 1px !default;


// Input icon
$input-icon-width: calc( #{$icon-size} + #{$input-padding-y * 2} ) !default;
$input-icon-height: calc( #{$input-line-height * $input-font-size} + #{$input-padding-y * 2} ) !default;

$input-icon-text: $subtle-text !default;
$input-icon-opacity: null !default;


// Input separator
$input-separator-color: $clear-button-text !default;
$input-separator-opacity: .5 !default;
9 changes: 0 additions & 9 deletions packages/bootstrap/scss/textbox/_variables.scss
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,2 @@
// Textboxe
$textbox-line-height: $input-line-height !default;
$textbox-icon-width: calc( #{$icon-size} + #{$input-padding-x * 2} ) !default;
$textbox-icon-padding-x: 6px !default;
$textbox-icon-padding-y: $textbox-icon-padding-x !default;

$textbox-icon-color: #343a40 !default;
$textbox-icon-opacity: .5 !default;

$textbox-separator-color: $clear-button-text !default;
$textbox-separator-opacity: .5 !default;
2 changes: 1 addition & 1 deletion packages/classic/scss/forms/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,5 +57,5 @@ $fieldset-text: null !default;
$fieldset-border: null !default;

$fieldset-legend-bg: null !default;
$fieldset-legend-text: darken($body-text, 13%) !default;
$fieldset-legend-text: try-shade( $body-text, 2 ) !default;
$fieldset-legend-border: null !default;
41 changes: 25 additions & 16 deletions packages/classic/scss/input/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,17 +25,14 @@ $input-padding-y-lg: ($input-padding-y * 1.5) !default;
$input-font-size-lg: $input-font-size !default;
$input-line-height-lg: $line-height-lg !default;

$input-calc-height: calc( #{$input-line-height * 1em} + #{$input-padding-y * 2} + #{$input-border-width * 2} ) !default;
$input-calc-height-sm: calc( #{$input-line-height-sm * 1em} + #{$input-padding-y-sm * 2} + #{$input-border-width * 2} ) !default;
$input-calc-height-lg: calc( #{$input-line-height-lg * 1em} + #{$input-padding-y-lg * 2} + #{$input-border-width * 2} ) !default;
$input-calc-height: calc( #{$input-line-height * 1em} + #{$input-padding-y * 2} + #{$input-border-height} ) !default;
$input-calc-height-sm: calc( #{$input-line-height-sm * 1em} + #{$input-padding-y-sm * 2} + #{$input-border-height} ) !default;
$input-calc-height-lg: calc( #{$input-line-height-lg * 1em} + #{$input-padding-y-lg * 2} + #{$input-border-height} ) !default;

$input-inner-calc-height: calc( #{$input-line-height * 1em} + #{$input-padding-y * 2} ) !default;
$input-inner-calc-height-sm: calc( #{$input-line-height-sm * 1em} + #{$input-padding-y-sm * 2} ) !default;
$input-inner-calc-height-lg: calc( #{$input-line-height-lg * 1em} + #{$input-padding-y-lg * 2} ) !default;

$input-icon-width: calc( #{$icon-size} + #{$input-padding-y * 2} ) !default;
$input-icon-height: calc( #{$input-line-height * $input-font-size} + #{$input-padding-y * 2} ) !default;

$input-adornment-height: calc( #{$input-line-height * $input-font-size} + #{$input-padding-y * 2} ) !default;
$input-adornment-width: $input-adornment-height !default;

Expand All @@ -44,30 +41,28 @@ $input-text: $component-text !default;
$input-border: $button-border !default;
$input-shadow: null !default;

$input-hovered-text: $input-text !default;
$input-hovered-bg: $input-bg !default;
$input-hovered-bg: null !default;
$input-hovered-text: null !default;
$input-hovered-border: $button-hovered-border !default;
$input-hovered-shadow: null !default;

$input-focused-text: $input-text !default;
$input-focused-bg: $input-bg !default;
$input-focused-border: $input-hovered-border !default;
$input-focused-bg: null !default;
$input-focused-text: null !default;
$input-focused-border: rgba(0, 0, 0, .1) !default;
$input-focused-shadow: 0 2px 4px 0 rgba(0, 0, 0, .03), 0 4px 5px 0 rgba(0, 0, 0, .04) !default;

$input-placeholder-text: rgba( $input-text, .5) !default;
$input-placeholder-text: $subtle-text !default;
$input-placeholder-opacity: 1 !default;

$input-selected-text: $primary-contrast !default;
$input-selected-bg: $primary !default;

$input-separator-color: $clear-button-text !default;
$input-separator-opacity: .5 !default;

$input-clear-button-focused-background: $base-text !default;
$input-clear-button-focused-opacity: .2 !default;


// Picker
$picker-select-border-width: 0 !default;
$picker-select-border-width: 0px !default;

$picker-select-padding-x: $input-padding-y !default;
$picker-select-padding-y: $input-padding-y !default;
Expand All @@ -83,6 +78,20 @@ $picker-select-calc-size-sm: $input-inner-calc-height-sm !default;
$picker-select-calc-size-lg: $input-inner-calc-height-lg !default;


// Spinner
$spinner-width: $button-inner-calc-size !default;
$spinner-min-width: calc( #{$icon-size} + #{$picker-select-padding-x * 2} ) !default;
$spinner-icon-offset: 2px !default;


// Input icon
$input-icon-width: calc( #{$icon-size} + #{$input-padding-y * 2} ) !default;
$input-icon-height: calc( #{$input-line-height * $input-font-size} + #{$input-padding-y * 2} ) !default;

$input-icon-text: $subtle-text !default;
$input-icon-opacity: null !default;


// Input separator
$input-separator-color: $clear-button-text !default;
$input-separator-opacity: .5 !default;
9 changes: 0 additions & 9 deletions packages/classic/scss/textbox/_variables.scss
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,2 @@
// Textboxe
$textbox-line-height: $input-line-height !default;
$textbox-icon-width: calc( #{$icon-size} + #{$input-padding-x * 2} ) !default;
$textbox-icon-padding-x: 6px !default;
$textbox-icon-padding-y: $textbox-icon-padding-x !default;

$textbox-icon-color: $input-text !default;
$textbox-icon-opacity: .75 !default;

$textbox-separator-color: $clear-button-text !default;
$textbox-separator-opacity: .5 !default;
5 changes: 0 additions & 5 deletions packages/default/scss/autocomplete/_layout.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,12 +37,7 @@

// Clear value
.k-clear-value {
opacity: .5;
visibility: hidden;

&:hover {
opacity: 1;
}
}
&:hover,
// &:focus-within,
Expand Down
5 changes: 0 additions & 5 deletions packages/default/scss/combobox/_layout.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,12 +40,7 @@

// Clear value
.k-clear-value {
opacity: .5;
visibility: hidden;

&:hover {
opacity: 1;
}
}
&:hover,
// &:focus-within,
Expand Down
8 changes: 0 additions & 8 deletions packages/default/scss/dropdownlist/_layout.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,16 +55,8 @@

// Clear value
.k-clear-value {
opacity: .5;
visibility: hidden;

&:hover {
opacity: 1;
}
}


// Focused
&.k-state-focused,
&.k-state-hover,
&:hover {
Expand Down
1 change: 0 additions & 1 deletion packages/default/scss/editor/_layout.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,6 @@
content: attr(data-placeholder);
height: 0;
color: $editor-placeholder-text;
font-style: italic;
float: left;
opacity: $editor-placeholder-opacity;
cursor: text;
Expand Down
2 changes: 1 addition & 1 deletion packages/default/scss/forms/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,5 +57,5 @@ $fieldset-text: null !default;
$fieldset-border: null !default;

$fieldset-legend-bg: null !default;
$fieldset-legend-text: darken($body-text, 13%) !default;
$fieldset-legend-text: try-shade( $body-text, 2 ) !default;
$fieldset-legend-border: null !default;
9 changes: 4 additions & 5 deletions packages/default/scss/input/_layout.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,11 +87,6 @@
width: $input-adornment-width;
height: $input-adornment-height;
position: relative;
opacity: .5;

&:hover {
opacity: 1;
}

&::after {
content: "";
Expand Down Expand Up @@ -157,6 +152,10 @@
justify-content: center;
outline: 0;
cursor: pointer;
opacity: .5;
}
.k-clear-value:hover {
opacity: 1;
}


Expand Down
19 changes: 15 additions & 4 deletions packages/default/scss/input/_theme.scss
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,17 @@
@include exports("input/theme") {
.k-input-separator {
border-color: $input-separator-color;
opacity: $input-separator-opacity;
}

.k-input-prefix,
.k-input-suffix {

> .k-icon {
color: $input-icon-text;
opacity: $input-icon-opacity;
}

.k-clear-value {
color: $clear-button-text;
}

> .k-clear-value {
&.k-state-focused::after,
&:focus::after {
Expand All @@ -14,4 +20,9 @@
}
}
}

.k-input-separator {
border-color: $input-separator-color;
opacity: $input-separator-opacity;
}
}
27 changes: 17 additions & 10 deletions packages/default/scss/input/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,9 +33,6 @@ $input-inner-calc-height: calc( #{$input-line-height * 1em} + #{$input-padding-y
$input-inner-calc-height-sm: calc( #{$input-line-height-sm * 1em} + #{$input-padding-y-sm * 2} ) !default;
$input-inner-calc-height-lg: calc( #{$input-line-height-lg * 1em} + #{$input-padding-y-lg * 2} ) !default;

$input-icon-width: calc( #{$icon-size} + #{$input-padding-y * 2} ) !default;
$input-icon-height: calc( #{$input-line-height * $input-font-size} + #{$input-padding-y * 2} ) !default;

$input-adornment-height: calc( #{$input-line-height * $input-font-size} + #{$input-padding-y * 2} ) !default;
$input-adornment-width: $input-adornment-height !default;

Expand All @@ -44,25 +41,22 @@ $input-text: $component-text !default;
$input-border: $button-border !default;
$input-shadow: null !default;

$input-hovered-text: $input-text !default;
$input-hovered-bg: $input-bg !default;
$input-hovered-bg: null !default;
$input-hovered-text: null !default;
$input-hovered-border: $button-hovered-border !default;
$input-hovered-shadow: null !default;

$input-focused-text: $input-text !default;
$input-focused-bg: $input-bg !default;
$input-focused-text: $input-text !default;
$input-focused-border: rgba(0, 0, 0, .1) !default;
$input-focused-shadow: 0 2px 4px 0 rgba(0, 0, 0, .03), 0 4px 5px 0 rgba(0, 0, 0, .04) !default;

$input-placeholder-text: rgba( $input-text, .5) !default;
$input-placeholder-text: $subtle-text !default;
$input-placeholder-opacity: 1 !default;

$input-selected-text: $primary-contrast !default;
$input-selected-bg: $primary !default;

$input-separator-color: $clear-button-text !default;
$input-separator-opacity: .5 !default;

$input-clear-button-focused-background: $base-text !default;
$input-clear-button-focused-opacity: .2 !default;

Expand All @@ -88,3 +82,16 @@ $picker-select-calc-size-lg: $input-inner-calc-height-lg !default;
$spinner-width: $button-inner-calc-size !default;
$spinner-min-width: calc( #{$icon-size} + #{$picker-select-padding-x * 2} ) !default;
$spinner-icon-offset: 2px !default;


// Input icon
$input-icon-width: calc( #{$icon-size} + #{$input-padding-y * 2} ) !default;
$input-icon-height: calc( #{$input-line-height * $input-font-size} + #{$input-padding-y * 2} ) !default;

$input-icon-text: $subtle-text !default;
$input-icon-opacity: null !default;


// Input separator
$input-separator-color: $clear-button-text !default;
$input-separator-opacity: .5 !default;
6 changes: 1 addition & 5 deletions packages/default/scss/multiselect/_layout.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -109,16 +109,12 @@
right: 0;
}

// Clear value
.k-clear-value {
opacity: .5;
visibility: hidden;
position: absolute;
top: 0;
right: 0;

&:hover {
opacity: 1;
}
}
&:hover,
&.k-state-hover,
Expand Down
16 changes: 2 additions & 14 deletions packages/default/scss/textbox/_theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,21 +17,9 @@
);
}

.k-input-prefix,
.k-input-suffix {
> .k-icon {
color: $textbox-icon-color;
opacity: $textbox-icon-opacity;
}

.k-clear-value {
color: $clear-button-text;
}
}

.k-textbox-separator {
border-color: $textbox-separator-color;
opacity: $textbox-separator-opacity;
border-color: $input-separator-color;
opacity: $input-separator-opacity;
}

// Focused
Expand Down
9 changes: 0 additions & 9 deletions packages/default/scss/textbox/_variables.scss
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,2 @@
// Textboxe
$textbox-line-height: $input-line-height !default;
$textbox-icon-width: calc( #{$icon-size} + #{$input-padding-x * 2} ) !default;
$textbox-icon-padding-x: 6px !default;
$textbox-icon-padding-y: $textbox-icon-padding-x !default;

$textbox-icon-color: $input-text !default;
$textbox-icon-opacity: .75 !default;

$textbox-separator-color: $clear-button-text !default;
$textbox-separator-opacity: .5 !default;
2 changes: 1 addition & 1 deletion packages/material/scss/combobox/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ $combobox-focused-border: $input-focused-border !default;
$combobox-focused-shadow: $input-focused-shadow !default;

$combobox-select-bg: null !default;
$combobox-select-text: $input-placeholder-text !default;
$combobox-select-text: $subtle-text !default;
$combobox-select-border: null !default;
$combobox-select-gradient: null !default;

Expand Down
2 changes: 1 addition & 1 deletion packages/material/scss/datetime/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ $datetime-focused-border: $input-focused-border !default;
$datetime-focused-shadow: $input-focused-shadow !default;

$datetime-select-bg: null !default;
$datetime-select-text: $input-placeholder-text !default;
$datetime-select-text: $subtle-text !default;
$datetime-select-border: null !default;
$datetime-select-gradient: null !default;

Expand Down
Loading

0 comments on commit 0c49b7e

Please sign in to comment.