b966cf1d53
fix(SW-3693): Refactor Input stories to use FormInput component and showcase all controls * Refactor Input stories to use FormInput component and showcase all controls * Updated stories and added autocomplete prop to PasswordInput * Merge branch 'master' into fix/3693-group-inputs-storybook * Use FormTextArea in stories for TextArea to show description and error texts * Merged master into fix/3693-group-inputs-storybook * Merge branch 'master' into fix/3693-group-inputs-storybook * Removed redundant font name and fixed broken icons in stories * Merge branch 'fix/3693-group-inputs-storybook' of bitbucket.org:scandic-swap/web into fix/3693-group-inputs-storybook * Merged master into fix/3693-group-inputs-storybook * Merge branch 'master' into fix/3693-group-inputs-storybook Approved-by: Bianca Widstam
66 lines
1.3 KiB
CSS
66 lines
1.3 KiB
CSS
.helpText {
|
|
align-items: flex-start;
|
|
display: flex;
|
|
gap: var(--Space-x05);
|
|
}
|
|
|
|
.description {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--Space-x05);
|
|
margin-top: var(--Space-x1);
|
|
font-size: var(--Body-Supporting-text-Size);
|
|
font-family: var(--Body-Supporting-text-Font-family);
|
|
font-style: normal;
|
|
font-weight: var(--Body-Supporting-text-Font-weight);
|
|
letter-spacing: var(--Body-Supporting-text-Letter-spacing);
|
|
}
|
|
|
|
.error {
|
|
align-items: center;
|
|
color: var(--Text-Interactive-Error);
|
|
display: flex;
|
|
gap: var(--Space-x05);
|
|
margin: var(--Space-x1) 0 0;
|
|
}
|
|
|
|
.errors {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--Space-x15) var(--Space-x1);
|
|
padding-top: var(--Space-x1);
|
|
}
|
|
|
|
.inputWrapper {
|
|
position: relative;
|
|
}
|
|
|
|
.toggleButton {
|
|
position: absolute;
|
|
right: var(--Space-x2);
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
background: none;
|
|
border: none;
|
|
padding: 0;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.toggleButton:focus-visible {
|
|
outline: 2px solid var(--Focus-ring-color, currentColor);
|
|
border-radius: 100%;
|
|
}
|
|
|
|
/* Hide the built-in password reveal icon in Microsoft Edge.
|
|
* See: https://learn.microsoft.com/en-us/microsoft-edge/web-platform/password-reveal
|
|
*/
|
|
.inputWrapper input::-ms-reveal {
|
|
display: none;
|
|
}
|
|
.inputWrapper input::-ms-clear {
|
|
display: none;
|
|
}
|