Skip to content

Commit

Permalink
fix(input-fields): EU input fields shadows clean up - FRONT-3304 (#2261)
Browse files Browse the repository at this point in the history 
* fix(input-fields): EU input fields shadows clean up - FRONT-3304

* Update shadow for error focus states
  • Loading branch information
@papegaill
papegaill authored Nov 23, 2021
1 parent 80b3cef commit 1e333b6
Show file tree
Hide file tree
Showing 7 changed files with 7 additions and 17 deletions.
10 changes: 0 additions & 10 deletions src/implementations/vanilla/components/datepicker/_datepicker.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
/* stylelint-disable-next-line scss/at-import-partial-extension-blacklist, no-invalid-position-at-import-rule */
@import 'pikaday/scss/pikaday.scss';

$_input-hover-shadow: null !default;
$_input-icon-color: null !default;
$_input-icon-hover-color: null !default;
$_input-icon-focus-color: null !default;
Expand Down Expand Up @@ -39,13 +38,8 @@ $_picker-theme-color: null !default;
}

.ecl-datepicker__field.ecl-text-input {
box-shadow: none;
padding-right: map.get(theme.$spacing, 'xl');
width: 100%;

&:hover {
box-shadow: $_input-hover-shadow;
}
}

.ecl-datepicker__icon {
Expand All @@ -61,10 +55,6 @@ $_picker-theme-color: null !default;
.ecl-datepicker__field.ecl-text-input[disabled] {
color: rgba($_input-placeholder-color, 0.5);

&:hover {
box-shadow: none;
}

&::placeholder {
color: rgba($_input-placeholder-color, 0.5);
}
Expand Down
1 change: 0 additions & 1 deletion src/implementations/vanilla/components/datepicker/datepicker-ec.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
@use '@ecl/theme-dev/theme';
@use 'datepicker' with
(
$_input-hover-shadow: none,
$_input-icon-color: map.get(theme.$color, 'grey-75'),
$_input-icon-hover-color: map.get(theme.$color, 'blue'),
$_input-icon-focus-color: map.get(theme.$color, 'blue'),
Expand Down
1 change: 0 additions & 1 deletion src/implementations/vanilla/components/datepicker/datepicker-eu.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
@use '@ecl/theme-dev/theme';
@use 'datepicker' with
(
$_input-hover-shadow: 0 0 4px rgb(14 71 203 / 50%),
$_input-icon-color: map.get(theme.$color, 'grey-80'),
$_input-icon-hover-color: map.get(theme.$color, 'grey-80'),
$_input-icon-focus-color: map.get(theme.$color, 'grey-80'),
Expand Down
5 changes: 2 additions & 3 deletions src/implementations/vanilla/components/select/_select.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,6 +71,7 @@ $_multiple-checkbox-label-vertical-padding: null !default;
&:focus {
border-color: $_border-color-focus;
border-width: $_border-width-focus;
box-shadow: $_shadow-hover;
outline: none;
padding: calc(#{map.get(theme.$spacing, 's')} - #{$_border-width-focus})
calc(
Expand Down Expand Up @@ -185,7 +186,7 @@ $_multiple-checkbox-label-vertical-padding: null !default;

.ecl-select:hover {
border-color: $_border-color-disabled;
box-shadow: none;
box-shadow: $_shadow;
}
}

Expand All @@ -209,12 +210,10 @@ $_multiple-checkbox-label-vertical-padding: null !default;
/* stylelint-disable-next-line no-descending-specificity */
.ecl-select {
border-color: $_border-color-invalid;
box-shadow: none;
}

.ecl-select:hover {
border-color: $_border-color-invalid-hover;
box-shadow: $_shadow-hover;
}

.ecl-select:focus {
Expand Down
4 changes: 2 additions & 2 deletions src/implementations/vanilla/components/select/select-eu.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,8 @@
$_border-width-focus: 2px,
$_color-input: map.get(theme.$color, 'grey-140'),
$_color-placeholder: map.get(theme.$color, 'grey-40'),
$_shadow: none,
$_shadow-hover: 0 0 4px rgba(9, 49, 142, 0.2),
$_shadow: inset 0 0 6px rgba(9, 49, 142, 0.2),
$_shadow-hover: inset 0 0 6px rgba(9, 49, 142, 0.4),
$_arrow-background-color: map.get(theme.$color, 'blue-100'),
$_arrow-background-color-hover: map.get(theme.$color, 'blue-80'),
$_arrow-background-color-invalid: map.get(theme.$color, 'red-120'),
Expand Down
2 changes: 2 additions & 0 deletions src/implementations/vanilla/components/text-area/_text-area.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,6 +53,7 @@ $_padding-horizontal: null !default;
&:active {
border-color: $_border-color-focus;
border-width: $_border-width-focus;
box-shadow: $_shadow-hover;
outline: none;
padding: calc(#{$_padding-vertical} - #{$_border-width-focus})
calc(#{$_padding-horizontal} - #{$_border-width-focus});
Expand Down Expand Up @@ -85,6 +86,7 @@ $_padding-horizontal: null !default;
.ecl-text-area--readonly {
background-color: map.get(theme.$color, 'white-100');
border-color: rgba($_border-color, 0.5);
box-shadow: $_shadow;
cursor: not-allowed;

&::placeholder {
Expand Down
1 change: 1 addition & 0 deletions src/implementations/vanilla/components/text-input/_text-input.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,7 @@ $_padding-horizontal: null !default;
&:active {
border-color: $_border-color-focus;
border-width: $_border-width-focus;
box-shadow: $_shadow-hover;
outline: none;
padding: calc(#{$_padding-vertical} - #{$_border-width-focus})
calc(#{$_padding-horizontal} - #{$_border-width-focus});
Expand Down

1 comment on commit 1e333b6

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🚀 Deployed on https://v3--europa-component-library.netlify.app

Please sign in to comment.