react-input-material
Version:
Reusable material design based input field with support for (richt-)text, code, selections, numbers, dates and so on.
9 lines (8 loc) • 3.4 kB
CSS
/* !/usr/bin/env css
-*- coding: utf-8 -*- */.text-input__suggestions__suggestion__mark{color:var(--mdc-theme-secondary)}
/* !/usr/bin/env css
-*- coding: utf-8 -*- */.text-input .code-editor.mdc-text-field--disabled .cm-editor{opacity:.3}.text-input .richtext-editor .richtext-editor__bar .richtext-editor-menu-bar .mdc-icon-button--checked{color:var(--mdc-theme-secondary)}.text-input .richtext-editor .richtext-editor__bar .mdc-text-field-character-counter{margin-right:10px}.text-input .richtext-editor.mdc-text-field--disabled .richtext-editor__bar{opacity:.3}.text-input .richtext-editor.mdc-text-field--with-internal-counter .richtext-editor__bar{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;width:100%}
/* !/usr/bin/env css
-*- coding: utf-8 -*- */.text-input{display:block}.text-input .code-editor{overflow:visible;z-index:1}.text-input .code-editor .cm-content{opacity:0}.text-input .code-editor .cm-content .cm-activeLine{background-color:rgba(0,0,0,.05)}.text-input .code-editor .cm-gutters{visibility:hidden}.text-input .code-editor .cm-gutters .cm-activeLineGutter{background-color:rgba(0,0,0,.05)}.text-input .code-editor .cm-focused{outline:none}.text-input .code-editor .cm-focused .cm-content{opacity:1}.text-input .code-editor .cm-focused .cm-gutters{visibility:visible}.text-input .code-editor.code-editor--has-content .cm-content{opacity:1}.text-input .code-editor.code-editor--has-content .cm-gutters{visibility:visible}.text-input .code-editor .code-editor__view{overflow:visible}.text-input .richtext-editor{border-bottom:1px solid rgba(0,0,0,.42)}.text-input .richtext-editor .richtext-editor__bar{padding-left:6px;width:calc(100% - 6px)}.text-input .richtext-editor .richtext-editor__bar .richtext-editor-menu-bar{display:contents}.text-input .richtext-editor .richtext-editor__bar .richtext-editor-menu-bar>span{-ms-flex-item-align:start;align-self:flex-start}.text-input .richtext-editor .richtext-editor__view{display:block}.text-input .richtext-editor .tiptap:focus-visible{outline:none}.text-input .text-input__suggestions{border-top-left-radius:0;border-top-right-radius:0;bottom:auto;top:54px;width:100%}.text-input .text-input__suggestions.text-input__suggestions--pending{padding:10px}.text-input .text-input__suggestions .text-input__suggestions__suggestion{visibility:visible;white-space:break-spaces}.text-input .text-input__suggestions .text-input__suggestions__suggestion__mark{display:contents}.text-input input[type=search]::-ms-clear,.text-input input[type=search]::-ms-reveal{display:none;height:0;width:0}.text-input input[type=search]::-webkit-search-cancel-button,.text-input input[type=search]::-webkit-search-decoration,.text-input input[type=search]::-webkit-search-results-button,.text-input input[type=search]::-webkit-search-results-decoration{display:none}
/* !/usr/bin/env css
-*- coding: utf-8 -*- */.interval{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.interval .interval__icon{-webkit-box-sizing:border-box;box-sizing:border-box;margin:16px;text-align:center}.interval .interval__end,.interval .interval__start{width:calc(50% - 28px)}.interval.interval--disabled .interval__icon{opacity:.5}