1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-05 23:44:56 +01:00
metamask-extension/ui/components/component-library/text-field-base/text-field-base.scss
George Marshall 29a33b4692
TextFieldBase updates after design reveiw (#16201)
* Setting truncate to true by default

* Updating readOnly to not have a focus state

* Updating focus state to be browser outline default

* Removing default args so storybook doesn't become out of sync with default props

* Updating outline CSS
2022-10-25 15:23:48 -07:00

54 lines
897 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 {
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-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;
}
}
}