@ozen-ui/kit
Version:
React component library
97 lines (81 loc) • 2.41 kB
CSS
.Textarea {
--textfield-scroll-size: 12px;
min-block-size: var(--textfield-input-height);
position: relative;
}
.Textarea-Label {
padding: 0 var(--textfield-gutter-x);
}
.Textarea-Body,
.Textarea-Field {
transition: background-color var(--transition-slow);
}
.Textarea-Body {
position: relative;
inline-size: 100%;
display: flex;
border: none;
outline: none;
box-sizing: border-box;
background-color: var(--textfield-background-color);
transition: background-color var(--transition-slow);
color: var(--textfield-color);
border-radius: var(--textfield-border-radius);
min-block-size: inherit;
block-size: inherit;
padding: var(--textfield-input-padding);
}
.Textarea-Field {
--scroll-bar-size: 12px;
}
.Textarea-Field::-webkit-scrollbar {
inline-size: var(--scroll-bar-size);
}
.Textarea-Field::-webkit-scrollbar-thumb {
background-color: var(--color-background-secondary);
border-radius: calc(var(--scroll-bar-size) / 2);
border: calc(var(--scroll-bar-size) / 4) solid transparent;
background-clip: padding-box;
border-image: initial;
min-block-size: 24px;
}
.Textarea-Field::-webkit-scrollbar-thumb:hover,
.Textarea-Field::-webkit-scrollbar-thumb:active {
border: calc(var(--scroll-bar-size) / 4) solid transparent;
background-clip: padding-box;
}
.Textarea-Field::-webkit-scrollbar-thumb:hover {
background-color: var(--color-background-secondary-hover);
}
.Textarea-Field::-webkit-scrollbar-thumb:active {
background-color: var(--color-background-secondary-pressed);
}
.Textarea-Field::-webkit-scrollbar-corner {
background: transparent;
}
.Textarea-Field {
border: none;
display: flex;
outline: none;
font: inherit;
background-color: var(--textfield-background-color);
color: var(--textfield-color);
padding: 0 var(--textfield-gutter-x);
inline-size: inherit;
resize: none;
}
.Textarea-Counter {
float: right;
margin-inline-start: var(--spacing-s);
color: var(--color-content-secondary);
}
.Textarea-Counter_disabled {
color: var(--color-content-disabled);
}
.Textarea_expand_autoSize .Textarea-Body {
resize: none;
}
.Textarea_expand_verticalResize .Textarea-Body {
resize: vertical;
overflow: hidden;
}