react-text-input
Version:
Textarea and input components with custom scrollbars and aurogrow in both axes
1 lines • 3.77 kB
CSS
.scroll-box{position:relative}.scroll-box:focus{outline:none}.scroll-box--disabled>.scroll-box__viewport{overflow:hidden}.scroll-box--disabled>.scroll-box__track{visibility:hidden}.scroll-box--wrapped>.scroll-box__viewport{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden;padding:inherit;border-radius:inherit}.scroll-box--wrapped>.scroll-box__track{display:block}.scroll-box--client-scroll-bars.scroll-box--enable-y.scroll-box--requires-y>.scroll-box__viewport{overflow-y:auto}.scroll-box--client-scroll-bars.scroll-box--enable-x.scroll-box--requires-x>.scroll-box__viewport{overflow-x:auto}.scroll-box--client-scroll-bars>.scroll-box__viewport{-webkit-overflow-scrolling:touch}.scroll-box:not(.scroll-box--client-scroll-bars).scroll-box--enable-x.scroll-box--requires-x>.scroll-box__track--x,.scroll-box:not(.scroll-box--client-scroll-bars).scroll-box--enable-y.scroll-box--requires-y>.scroll-box__track--y{visibility:visible}.scroll-box:not(.scroll-box--client-scroll-bars).scroll-box--enable-x.scroll-box--requires-x.scroll-box--enable-y.scroll-box--requires-y:not(.scroll-box--outset)>.scroll-box__track--y{margin-bottom:14px}.scroll-box:not(.scroll-box--client-scroll-bars).scroll-box--enable-x.scroll-box--requires-x.scroll-box--enable-y.scroll-box--requires-y:not(.scroll-box--outset)>.scroll-box__track--x{margin-right:14px}.scroll-box__handle,.scroll-box__track{position:absolute;border-radius:10.2px;transition:.2s ease-in-out}.scroll-box__handle{transition-property:background;cursor:default}.scroll-box__handle--y{width:100%;min-height:30px;max-height:100%;top:0}.scroll-box__handle--x{height:100%;min-width:30px;max-width:100%;left:0}.scroll-box__track{display:none;visibility:hidden;transition-property:background,width,height;cursor:default}.scroll-box__track--y{top:0;bottom:0;right:0;width:6px;margin:4px 4px 4px 0}.scroll-box__track--y.scroll-box__track--dragged,.scroll-box__track--y.scroll-box__track--hover{width:10.2px}.scroll-box--outset>.scroll-box__track--y{left:100%;margin-left:4px}.scroll-box__track--x{left:0;right:0;bottom:0;height:6px;margin:0 4px 4px}.scroll-box__track--x.scroll-box__track--dragged,.scroll-box__track--x.scroll-box__track--hover{height:10.2px}.scroll-box--outset>.scroll-box__track--x{top:100%;margin-top:4px}.scroll-box>.scroll-box__track{background:transparent}.scroll-box>.scroll-box__track>.scroll-box__handle{background:rgba(0,0,0,.4)}.scroll-box>.scroll-box__track--dragged,.scroll-box>.scroll-box__track--hover{background:rgba(0,0,0,.2)}.scroll-box>.scroll-box__track--dragged>.scroll-box__handle,.scroll-box>.scroll-box__track--hover>.scroll-box__handle{background:rgba(0,0,0,.6)}.text-input{display:inline-block;vertical-align:bottom;position:relative;overflow:hidden;cursor:text;text-align:left}.text-input__control{box-sizing:border-box;height:100%;width:100%;padding:inherit;background:transparent none;border:0 none;border-radius:inherit;font:inherit;resize:none;cursor:inherit}.text-input__control:focus{outline:0 none}.text-input__area,.text-input__placeholder{box-sizing:border-box;position:absolute;top:0;left:0;height:100%;width:100%;padding:inherit}.text-input__placeholder{overflow:hidden}.text-input__content{visibility:hidden;white-space:pre}.text-input__content:after{display:inline;content:'\202F'}.text-input--filled .text-input__placeholder{display:none}.text-input--disabled .text-input__area{visibility:hidden}.text-input--disabled:not(.text-input--password) .text-input__content{visibility:visible}.text-input--fit-line-length{max-width:100%;clear:both;width:auto}.text-input--text-area{height:auto}.text-input--text-area .text-input__content,.text-input--text-area .text-input__control{white-space:pre-wrap;overflow-wrap:break-word;word-wrap:break-word}