@opentiny/vue-theme/textarea/index.css

An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.

.tiny-transition-icon-out-in-enter-active{-webkit-animation:bounce-in .3s;animation:bounce-in .3s}.tiny-transition-icon-out-in-leave-active{animation:bounce-in .3s reverse}.tiny-transition-icon-scale-in-enter-active{-webkit-animation:scale-in .3s;animation:scale-in .3s}.tiny-transition-icon-scale-in-leave-active{animation:scale-in .3s reverse}@-webkit-keyframes bounce-in{0%{-webkit-transform:scale(0);transform:scale(0)}50%{-webkit-transform:scale(1.2);transform:scale(1.2)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes bounce-in{0%{-webkit-transform:scale(0);transform:scale(0)}50%{-webkit-transform:scale(1.2);transform:scale(1.2)}100%{-webkit-transform:scale(1);transform:scale(1)}}@-webkit-keyframes scale-in{0%{-webkit-transform:scale(0);transform:scale(0)}50%{-webkit-transform:scale(1.2);transform:scale(1.2)}100%{-webkit-transform:scale(1);transform:scale(1)}}@keyframes scale-in{0%{-webkit-transform:scale(0);transform:scale(0)}50%{-webkit-transform:scale(1.2);transform:scale(1.2)}100%{-webkit-transform:scale(1);transform:scale(1)}}.tiny-textarea{--tv-Textarea-text-color:var(--tv-color-text, #191919);--tv-Textarea-more-btn-text-color:var(--tv-color-text-link, #1476ff);--tv-Textarea-bg-color:var(--tv-color-bg-secondary, #ffffff);--tv-Textarea-font-size:var(--tv-font-size-default, 14px);--tv-Textarea-count-font-size:var(--tv-font-size-sm, 12px);--tv-Textarea-height:var(--tv-size-height-md, 32px);--tv-Textarea-border-radius:var(--tv-border-radius-md, 6px);--tv-Textarea-border-color:var(--tv-color-border, #c2c2c2);--tv-Textarea-inner-hover-border-color:var(--tv-color-border-hover, #191919);--tv-Textarea-inner-active-border-color:var(--tv-color-border-active, #191919);--tv-Textarea-placeholder-text-color:var(--tv-color-text-placeholder, #808080);--tv-Textarea-disabled-text-color:var(--tv-color-text-disabled, #c2c2c2);--tv-Textarea-disabled-border-color:var(--tv-color-border-disabled, #dbdbdb);--tv-Textarea-disabled-bg-color:var(--tv-color-bg-disabled, #f0f0f0);--tv-Textarea-exceed-text-color:var(--tv-color-error-text, #f23030);--tv-Textarea-count-color:var(--tv-color-text-weaken, #808080);--tv-Textarea-count-bg-color:var(--tv-color-bg-2, #ffffff);--tv-Textarea-padding-y:var(--tv-space-md, 8px);--tv-Textarea-padding-x:var(--tv-space-lg, 12px);--tv-Textarea-padding-right:var(--tv-space-sm, 4px);--tv-Textarea-padding-bottom:var(--tv-space-xl, 16px);--tv-Textarea-count-right:calc(var(--tv-space-xl, 16px) + 2px);--tv-Textarea-active-border-color:var(--tv-color-border-active, #191919);--tv-Textarea-count-border-radius:var(--tv-border-radius-md, 6px);--tv-Textarea-count-text-length-color:var(--tv-color-text, #191919);--tv-Textarea-count-padding-right:var(--tv-space-sm, 4px);--tv-Textarea-count-line-height:var(--tv-Textarea-count-font-size);position:relative;display:inline-block;width:100%;vertical-align:bottom;font-size:var(--tv-Textarea-font-size)}.tiny-textarea.is-disabled .tiny-textarea__inner{background-color:var(--tv-Textarea-disabled-bg-color);border-color:var(--tv-Textarea-disabled-border-color);color:var(--tv-Textarea-disabled-text-color);cursor:not-allowed}.tiny-textarea.is-disabled .tiny-textarea__inner::-moz-placeholder{color:var(--tv-Textarea-placeholder-text-color);opacity:1}.tiny-textarea.is-disabled .tiny-textarea__inner:-ms-input-placeholder{color:var(--tv-Textarea-placeholder-text-color)}.tiny-textarea.is-disabled .tiny-textarea__inner::-webkit-input-placeholder{color:var(--tv-Textarea-placeholder-text-color)}.tiny-textarea.is-disabled .tiny-textarea__inner::-ms-input-placeholder{color:var(--tv-Textarea-placeholder-text-color)}.tiny-textarea.is-disabled .tiny-textarea__inner::placeholder{color:var(--tv-Textarea-placeholder-text-color)}.tiny-textarea.is-disabled:hover{border-color:var(--tv-Textarea-disabled-border-color)}.tiny-textarea.is-exceed .tiny-textarea__inner{border-color:var(--tv-Textarea-exceed-text-color)}.tiny-textarea.is-exceed .tiny-input__count{color:var(--tv-Textarea-exceed-text-color)}.tiny-textarea.is-exceed .tiny-input__count-text-length{color:var(--tv-Textarea-exceed-text-color)}.tiny-textarea .tiny-input__count{color:var(--tv-Textarea-count-color);font-size:var(--tv-Textarea-count-font-size);text-align:right;position:absolute;z-index:2;line-height:1.5;bottom:1px;right:var(--tv-Textarea-count-right);padding-right:var(--tv-Textarea-count-padding-right);background-color:var(--tv-Textarea-count-bg-color)}.tiny-textarea .tiny-input__count-text-length{color:var(--tv-Textarea-count-text-length-color)}.tiny-textarea__inner{display:block;width:100%;min-height:60px;min-height:calc(var(--tv-Textarea-height,30px) * 2);color:var(--tv-Textarea-text-color);border:1px solid var(--tv-Textarea-border-color);border-radius:var(--tv-Textarea-border-radius);background:var(--tv-Textarea-bg-color);padding:var(--tv-Textarea-padding-y) var(--tv-Textarea-padding-x);padding-bottom:var(--tv-Textarea-padding-bottom);line-height:1.5;font-size:var(--tv-Textarea-font-size);resize:vertical;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition:border-color .2s cubic-bezier(.645,.045,.355,1);transition:border-color .2s cubic-bezier(.645,.045,.355,1)}.tiny-textarea__inner::-moz-placeholder{color:var(--tv-Textarea-placeholder-text-color);opacity:1}.tiny-textarea__inner:-ms-input-placeholder{color:var(--tv-Textarea-placeholder-text-color)}.tiny-textarea__inner::-webkit-input-placeholder{color:var(--tv-Textarea-placeholder-text-color)}.tiny-textarea__inner::-ms-input-placeholder{color:var(--tv-Textarea-placeholder-text-color)}.tiny-textarea__inner::placeholder{color:var(--tv-Textarea-placeholder-text-color)}.tiny-textarea__inner:hover{border-color:var(--tv-Textarea-inner-hover-border-color)}.tiny-textarea__inner:focus{border-color:var(--tv-Textarea-inner-active-border-color)}.tiny-textarea:has(.tiny-textarea__inner:focus){border-color:var(--tv-Textarea-active-border-color)}.tiny-textarea__inner:focus,.tiny-textarea__inner:hover{outline:0}.tiny-textarea__inner.tiny-textarea__fix-height{min-height:30px;height:30px;padding:0 8px;line-height:30px;overflow:hidden}.tiny-textarea .tiny-textarea__inner::-webkit-scrollbar{width:16px}.tiny-textarea .tiny-textarea__inner::-webkit-scrollbar-thumb{border-radius:8px;background-clip:content-box;border:4px solid transparent}.tiny-textarea .tiny-textarea__inner-con{position:relative;display:block;height:30px;width:100%}.tiny-textarea .tiny-textarea__inner-con .tiny-textarea__inner{min-width:160px;position:absolute;z-index:2000;top:0;left:0}.tiny-textarea.is-display-only .tiny-textarea__inner-con{height:auto}.tiny-textarea.is-display-only .tiny-textarea__inner-con .tiny-textarea__inner{display:none}.tiny-textarea.is-display-only .tiny-textarea-display-only .tiny-textarea-display-only__wrap{display:-webkit-box;display:-ms-flexbox;display:flex}.tiny-textarea.is-display-only .tiny-textarea-display-only .tiny-textarea-display-only__content{left:0;color:var(--tv-Textarea-text-color);max-width:100%;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden;word-wrap:break-word;white-space:pre-wrap;line-height:1.5}.tiny-textarea.is-display-only .tiny-textarea-display-only .tiny-textarea-display-only__content:before{content:'';float:right;height:100%;margin-bottom:-14px}.tiny-textarea.is-display-only .tiny-textarea-display-only .tiny-textarea-display-only__content .more-btn{float:right;clear:both;color:var(--tv-Textarea-more-btn-text-color);font-size:12px;line-height:12px;cursor:pointer}.tiny-textarea.is-display-only .tiny-textarea__inner{height:0;padding:0;border-style:none;visibility:hidden}