UNPKG

@ozen-ui/kit

Version:

React component library

97 lines (81 loc) 2.41 kB
.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; }