b9a62b5280
feat(SW-3659): Use new input component * Use new input component * Update error formatter * Merged master into feat/use-new-input-component * Merged master into feat/use-new-input-component * Merge branch 'master' into feat/use-new-input-component * Merged master into feat/use-new-input-component * Update Input stories * Merge branch 'feat/use-new-input-component' of bitbucket.org:scandic-swap/web into feat/use-new-input-component * Update Storybook logo * Add some new demo icon input story * Fix the clear content button position * Fix broken password input icon * Merged master into feat/use-new-input-component * Merged master into feat/use-new-input-component * Add aria-hidden to required asterisk * Merge branch 'feat/use-new-input-component' of bitbucket.org:scandic-swap/web into feat/use-new-input-component * Merge branch 'master' into feat/use-new-input-component Approved-by: Bianca Widstam Approved-by: Matilda Landström
94 lines
2.5 KiB
CSS
94 lines
2.5 KiB
CSS
.inputLabel {
|
|
font-family:
|
|
var(--Body-Paragraph-Font-family), var(--Body-Paragraph-Font-fallback);
|
|
font-size: var(--Body-Paragraph-Size);
|
|
font-weight: var(--Body-Paragraph-Font-weight);
|
|
letter-spacing: var(--Body-Paragraph-Letter-spacing);
|
|
text-transform: unset;
|
|
line-height: 1.5;
|
|
text-decoration: none;
|
|
|
|
transition: font-size 100ms ease;
|
|
text-align: left;
|
|
color: var(--Text-Interactive-Placeholder);
|
|
user-select: none;
|
|
}
|
|
|
|
.small {
|
|
font-family: var(--Label-Font-family), var(--Label-Font-fallback);
|
|
font-size: var(--Label-Size);
|
|
font-weight: var(--Label-Font-weight);
|
|
letter-spacing: var(--Label-Letter-spacing);
|
|
text-transform: unset;
|
|
line-height: 1.5;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.discreet {
|
|
font-family:
|
|
var(--Body-Supporting-text-Font-family),
|
|
var(--Body-Supporting-text-Font-fallback);
|
|
font-size: var(--Body-Supporting-text-Size);
|
|
font-weight: var(--Body-Supporting-text-Font-weight-2);
|
|
letter-spacing: var(--Body-Supporting-text-Letter-spacing);
|
|
text-transform: unset;
|
|
line-height: 1.4;
|
|
text-decoration: none;
|
|
|
|
color: var(--Text-Default);
|
|
order: unset;
|
|
}
|
|
|
|
input:focus ~ .inputLabel,
|
|
input:placeholder-shown ~ .inputLabel,
|
|
input[value]:not([value='']) ~ .inputLabel,
|
|
textarea:focus ~ .inputLabel,
|
|
textarea:placeholder-shown ~ .inputLabel,
|
|
textarea[value]:not([value='']) ~ .inputLabel,
|
|
.selected {
|
|
font-family: var(--Label-Font-family), var(--Label-Font-fallback);
|
|
font-size: var(--Label-Size);
|
|
font-weight: var(--Label-Font-weight);
|
|
letter-spacing: var(--Label-Letter-spacing);
|
|
text-transform: unset;
|
|
line-height: 1.5;
|
|
text-decoration: none;
|
|
|
|
margin-bottom: var(--Space-x025);
|
|
}
|
|
|
|
.inputLabel.disabled,
|
|
input:read-only ~ .inputLabel,
|
|
input:disabled ~ .inputLabel,
|
|
textarea:disabled ~ .inputLabel {
|
|
color: var(--Text-Interactive-Disabled);
|
|
}
|
|
|
|
@media (hover: hover) {
|
|
input:active:not(:disabled) ~ .inputLabel {
|
|
font-family: var(--Label-Font-family), var(--Label-Font-fallback);
|
|
font-size: var(--Label-Size);
|
|
font-weight: var(--Label-Font-weight);
|
|
letter-spacing: var(--Label-Letter-spacing);
|
|
text-transform: unset;
|
|
line-height: 1.5;
|
|
text-decoration: none;
|
|
|
|
margin-bottom: var(--Space-x025);
|
|
}
|
|
}
|
|
|
|
/* Legacy selector for deprecated select component */
|
|
:global(.select-container)[data-disabled] .inputLabel {
|
|
color: var(--Text-Interactive-Disabled);
|
|
}
|
|
|
|
:global(.select-button) .inputLabel {
|
|
order: unset;
|
|
}
|
|
|
|
:global(.select-container)[data-open='true'] .inputLabel:not(.discreet),
|
|
:global(.react-aria-SelectValue):has(:nth-child(2)) .inputLabel:not(.discreet) {
|
|
font-size: 12px;
|
|
}
|