1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-01 21:57:06 +01:00
metamask-extension/ui/components/component-library/text-field-base/text-field-base.scss
George Marshall 055a7c52c0
Adding TextFieldBase component (#16043)
* Adding TextInputBase component

* Removing keyup and keydown props, tests and docs

* removing showClear from stories

* removing unneeded css

* simplifying uncontrolled vs controlled to work

* Fortifying maxLength test

* Lint fix for test

* Doc, style and prop updates

* Updating constant names with 'base'

* Adding a background color

* Adding a background color to input
2022-10-06 12:41:22 -07:00

53 lines
843 B
SCSS

.mm-text-field-base {
--text-field-base-height: var(--size, 40px);
&--size-sm {
--size: 32px;
}
&--size-md {
--size: 40px;
}
&--size-lg {
--size: 48px;
}
height: var(--text-field-base-height);
border-color: var(--color-border-default);
&--focused {
border-color: var(--color-primary-default);
}
&--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-base__input {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
&__input {
border: none;
height: 100%;
flex-grow: 1;
box-sizing: content-box;
margin: 0;
padding: 0;
&:focus,
&:focus-visible {
outline: none;
}
}
}