1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-23 02:10:12 +01:00
metamask-extension/ui/components/component-library/text-field/text-field.scss
George Marshall 527387bbfe
Adding Input component and updating TextFieldBase (#17664)
* Adding Input component and updating TextField

* Exporting from index, removing as prop and updating snapshot
2023-02-21 10:35:28 -08:00

45 lines
735 B
SCSS

.mm-text-field {
--text-field-height: var(--size, 40px);
&--size-sm {
--size: 32px;
}
&--size-md {
--size: 40px;
}
&--size-lg {
--size: 48px;
}
height: var(--text-field-height);
border-color: var(--color-border-default);
&--focused {
outline: 5px auto Highlight; // firefox
outline: 5px auto -webkit-focus-ring-color; // chrome
}
&--error {
border-color: var(--color-error-default);
}
&--disabled {
opacity: 0.5;
border-color: var(--color-border-default);
}
// truncates text with ellipsis
&--truncate .mm-text-field__input {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
&__input {
width: 100%;
flex-grow: 1;
}
}