ffa5e023bb
* WIP: add the validation * feat/WIP: set the color of the button to red * feat: change color temporarily * feat: add accessibility for validation * feat: add the styling changes for the multi input * feat: add focus visible styling as well * fix: add comma to scss file to separate attributes * chore: rename regex to inputRegex * refactor: move out validation into a function * chore: rename regex to inputRegex * feat: add a validation Regex as a prop * feat: update the text description * chore: update spelling oops * feat: remove comment * remove comments * rename error * feat: add showLabel and labelText to the stories component * cater for when we don't pass in a validationRegex * some small tweaks Co-authored-by: Suzanne Aitchison <suzanne@forem.com>
78 lines
1.5 KiB
SCSS
78 lines
1.5 KiB
SCSS
@import './forms';
|
|
@import '../config/import';
|
|
|
|
.c-input--multi {
|
|
&__wrapper-border:focus-within {
|
|
@extend %form-styling-focus;
|
|
|
|
.c-input--multi__input {
|
|
background-color: var(--form-bg-focus);
|
|
}
|
|
}
|
|
|
|
&__input {
|
|
background-color: var(--bg-color);
|
|
color: var(--body-color);
|
|
border: none;
|
|
}
|
|
|
|
&__wrapper-border {
|
|
.c-input--multi__input {
|
|
background-color: var(--form-bg);
|
|
}
|
|
}
|
|
}
|
|
|
|
.c-btn.c-input--multi__selected {
|
|
&:first-child {
|
|
border-top-right-radius: 0;
|
|
border-bottom-right-radius: 0;
|
|
border: 1px solid var(--base-10);
|
|
border-right: none;
|
|
color: var(--base-90);
|
|
}
|
|
|
|
&:last-child {
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
border: 1px solid var(--base-10);
|
|
border-left: none;
|
|
}
|
|
|
|
&:first-child:hover,
|
|
&:first-child:focus-visible {
|
|
background: none;
|
|
color: none;
|
|
}
|
|
|
|
&:last-child:hover,
|
|
&:last-child:focus-visible {
|
|
background: none;
|
|
color: var(--accent-danger);
|
|
}
|
|
|
|
&-invalid {
|
|
&:first-child,
|
|
&:last-child {
|
|
background-color: var(--accent-danger-a10);
|
|
color: var(--accent-danger);
|
|
border: 1px solid var(--accent-danger);
|
|
}
|
|
|
|
&:first-child {
|
|
border-right: none;
|
|
}
|
|
|
|
&:last-child {
|
|
border-left: none;
|
|
}
|
|
|
|
&:first-child:hover,
|
|
&:first-child:focus-visible,
|
|
&:last-child:hover,
|
|
&:last-child:focus-visible {
|
|
background-color: var(--accent-danger-a10);
|
|
color: var(--accent-danger);
|
|
}
|
|
}
|
|
}
|