ivue-material-plus
Version:
A high quality UI components Library with Vue.js
1 lines • 12.4 kB
CSS
:root{--ivue-input-padding:4px 7px;--ivue-input-height:32px;--ivue-input-small-padding:1px 7px;--ivue-input-small-height:24px;--ivue-input-small-radius:24px;--ivue-input-small-search-padding:0 12px;--ivue-input-small-group-height:24px;--ivue-input-small-group-radius:3px;--ivue-input-large-padding:6px 7px;--ivue-input-large-height:40px;--ivue-input-large-search-padding:0 20px;--ivue-input-group-padding:4px 7px;--ivue-input-group-radius:4px;--ivue-input-group-font-size:14px;--ivue-input-prefix-padding:32px;--ivue-input-suffix-padding:32px;--ivue-input-icon-width:32px;--ivue-input-small-icon-size:24px;--ivue-input-large-icon-size:40px;--ivue-input-textarea-min-height:32px;--ivue-input-word-count-right:7px;--ivue-input-word-count-top:2px;--ivue-input-word-count-font-size:12px;--ivue-input-search-padding:0 16px;--ivue-input-shadow-color:rgba(91, 142, 255, 0.2);--ivue-input-disabled-bg:#f8f9fd;--ivue-input-word-count-color:#9ab0c6}.ivue-input-wrapper{position:relative;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;vertical-align:middle;line-height:normal;width:100%}.ivue-input-wrapper-clearable .ivue-input-content:hover .ivue-input-password{opacity:0}.ivue-input-wrapper .ivue-input-group-append,.ivue-input-wrapper .ivue-input-group-prepend{padding:var(--ivue-input-group-padding);font-size:inherit;font-weight:400;line-height:1;color:var(--ivue-text-color);text-align:center;border:1px solid var(--ivue-border-color);border-radius:var(--ivue-input-group-radius);display:table-cell;width:1px;white-space:nowrap;vertical-align:middle}.ivue-input-wrapper .ivue-input-group-prepend{border-right:0;border-bottom-right-radius:0;border-top-right-radius:0}.ivue-input-wrapper .ivue-input-group-append{border-left:0;border-bottom-left-radius:0;border-top-left-radius:0}.ivue-input-wrapper .ivue-input-with-prefix{padding-left:var(--ivue-input-prefix-padding)}.ivue-input-wrapper .ivue-input-with-suffix{padding-right:var(--ivue-input-suffix-padding)}.ivue-input-wrapper .ivue-input-clear,.ivue-input-wrapper .ivue-input-icon{position:absolute;top:0;bottom:0;right:0;line-height:1;font-size:var(--ivue-font-default-size);color:var(--ivue-arrow-color);height:auto;margin:0;width:var(--ivue-input-icon-width);-webkit-transition:var(--ivue-all-transition);transition:var(--ivue-all-transition);cursor:pointer;z-index:10;overflow:hidden}.ivue-input-wrapper .ivue-input-clear-clear,.ivue-input-wrapper .ivue-input-icon-clear{opacity:0;z-index:10;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;font-size:var(--ivue-font-default-size);-webkit-transition:var(--ivue-all-transition);transition:var(--ivue-all-transition)}.ivue-input-wrapper .ivue-input-clear{top:0;right:1px}.ivue-input-wrapper .is-suffix{background-color:var(--ivue-white-color);z-index:2}.ivue-input-wrapper .ivue-input-prefix,.ivue-input-wrapper .ivue-input-suffix{position:absolute;left:0;top:0;width:var(--ivue-input-suffix-padding);height:100%;text-align:center;z-index:1}.ivue-input-wrapper .ivue-input-prefix i,.ivue-input-wrapper .ivue-input-suffix i{font-size:var(--ivue-font-default-size);line-height:var(--ivue-input-suffix-padding);height:100%;color:var(--ivue-arrow-color)}.ivue-input-wrapper .ivue-input-suffix{right:0;left:auto}.ivue-input-wrapper-small .ivue-input-content{border-radius:var(--ivue-input-small-group-radius)}.ivue-input-wrapper-small .ivue-input-icon,.ivue-input-wrapper-small .ivue-input-icon i,.ivue-input-wrapper-small .ivue-input-prefix i,.ivue-input-wrapper-small .ivue-input-suffix i{font-size:var(--ivue-font-base-size);width:var(--ivue-input-small-icon-size);height:var(--ivue-input-small-icon-size);line-height:var(--ivue-input-small-icon-size)}.ivue-input-wrapper-large .ivue-input-icon,.ivue-input-wrapper-large .ivue-input-icon i,.ivue-input-wrapper-large .ivue-input-prefix i,.ivue-input-wrapper-large .ivue-input-suffix i{font-size:var(--ivue-font-large-size);width:var(--ivue-input-large-icon-size);height:var(--ivue-input-large-icon-size);line-height:var(--ivue-input-large-icon-size)}.ivue-input{display:inline-block;position:relative;padding:var(--ivue-input-padding);font-size:var(--ivue-font-base-size);border-radius:var(--ivue-border-radius);border:1px solid var(--ivue-border-color);color:var(--ivue-title-color);cursor:text;width:100%;line-height:1;height:var(--ivue-input-height);-webkit-transition:border .3s cubic-bezier(.4,0,.2,1),background .3s cubic-bezier(.4,0,.2,1),-webkit-box-shadow .3s cubic-bezier(.4,0,.2,1);transition:border .3s cubic-bezier(.4,0,.2,1),background .3s cubic-bezier(.4,0,.2,1),-webkit-box-shadow .3s cubic-bezier(.4,0,.2,1);transition:border .3s cubic-bezier(.4,0,.2,1),background .3s cubic-bezier(.4,0,.2,1),box-shadow .3s cubic-bezier(.4,0,.2,1);transition:border .3s cubic-bezier(.4,0,.2,1),background .3s cubic-bezier(.4,0,.2,1),box-shadow .3s cubic-bezier(.4,0,.2,1),-webkit-box-shadow .3s cubic-bezier(.4,0,.2,1)}.ivue-input-content{position:relative;display:inline-block;width:100%;padding:0;border-radius:var(--ivue-border-radius);-webkit-transition:border .3s cubic-bezier(.4,0,.2,1),background .3s cubic-bezier(.4,0,.2,1),-webkit-box-shadow .3s cubic-bezier(.4,0,.2,1);transition:border .3s cubic-bezier(.4,0,.2,1),background .3s cubic-bezier(.4,0,.2,1),-webkit-box-shadow .3s cubic-bezier(.4,0,.2,1);transition:border .3s cubic-bezier(.4,0,.2,1),background .3s cubic-bezier(.4,0,.2,1),box-shadow .3s cubic-bezier(.4,0,.2,1);transition:border .3s cubic-bezier(.4,0,.2,1),background .3s cubic-bezier(.4,0,.2,1),box-shadow .3s cubic-bezier(.4,0,.2,1),-webkit-box-shadow .3s cubic-bezier(.4,0,.2,1);overflow:hidden}.ivue-input-content:hover .ivue-input-icon-clear{opacity:1}.ivue-input-content--prepend{border-bottom-left-radius:0;border-top-left-radius:0}.ivue-input-content--append{border-bottom-right-radius:0;border-top-right-radius:0}.ivue-input-content--disabled:hover{border-color:var(--ivue-border-color)}.ivue-input-content--focused{-webkit-box-shadow:0 0 0 2px var(--ivue-input-shadow-color);box-shadow:0 0 0 2px var(--ivue-input-shadow-color)}.ivue-input-password{opacity:1;-webkit-transition:var(--ivue-all-transition);transition:var(--ivue-all-transition)}.ivue-input-password i{background:var(--ivue-white-color)}.ivue-input-small{font-size:var(--ivue-font-base-size);padding:var(--ivue-input-small-padding);height:var(--ivue-input-small-height)}.ivue-input-large{font-size:var(--ivue-font-large-size);padding:var(--ivue-input-large-padding);height:var(--ivue-input-large-height)}.ivue-input:focus{outline:0;-webkit-box-shadow:0 0 0 2px var(--ivue-input-shadow-color);box-shadow:0 0 0 2px var(--ivue-input-shadow-color)}.ivue-input:focus,.ivue-input:hover{border-color:var(--ivue-primary-color)}.ivue-input[disabled]{background-color:var(--ivue-input-disabled-bg);opacity:1;cursor:var(--ivue-cursor-disabled);color:var(--ivue-input-disabled-color)}.ivue-input[disabled]:hover{border-color:var(--ivue-border-color)}.ivue-input::-moz-placeholder{color:#c5c8ce;opacity:1}.ivue-input:-ms-input-placeholder{color:#c5c8ce}.ivue-input::-webkit-input-placeholder{color:#c5c8ce}.ivue-input-textarea{max-width:100%;line-height:1.5;border:1px solid var(--ivue-border-color);height:auto;min-height:var(--ivue-input-textarea-min-height);vertical-align:bottom}.ivue-input-type-textarea .ivue-input-word-count{-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;top:auto}.ivue-input-group{display:table;width:100%;border-collapse:separate;position:relative;font-size:var(--ivue-input-group-font-size)}.ivue-input-group-small{font-size:var(--ivue-font-base-size)}.ivue-input-group-small .ivue-input-search{padding:var(--ivue-input-small-search-padding)}.ivue-input-group-small .ivue-input-search i{font-size:var(--ivue-font-base-size)}.ivue-input-group-small .ivue-input-group-append,.ivue-input-group-small .ivue-input-group-prepend{padding:var(--ivue-input-small-padding);height:var(--ivue-input-small-group-height);border-radius:var(--ivue-input-small-group-radius)}.ivue-input-group-small .ivue-input-group-append .ivue-select,.ivue-input-group-small .ivue-input-group-prepend .ivue-select{margin:-2px -7px}.ivue-input-group-small .ivue-input-group-append .ivue-select-default .ivue-select-selection,.ivue-input-group-small .ivue-input-group-append .ivue-select-selection-value,.ivue-input-group-small .ivue-input-group-prepend .ivue-select-default .ivue-select-selection,.ivue-input-group-small .ivue-input-group-prepend .ivue-select-selection-value{height:var(--ivue-input-small-height);line-height:var(--ivue-input-small-height);min-height:var(--ivue-input-small-height)}.ivue-input-group-large{font-size:var(--ivue-font-large-size)}.ivue-input-group-large .ivue-input-search{padding:var(--ivue-input-large-search-padding)}.ivue-input-group-large .ivue-input-search i{font-size:var(--ivue-font-large-size)}.ivue-input-group-large .ivue-input-group-append,.ivue-input-group-large .ivue-input-group-prepend{font-size:var(--ivue-font-large-size);padding:var(--ivue-input-large-padding);height:var(--ivue-input-large-height)}.ivue-input-group-large .ivue-input-group-append .ivue-select,.ivue-input-group-large .ivue-input-group-prepend .ivue-select{margin:-6px -7px}.ivue-input-group-large .ivue-input-group-append .ivue-select-default .ivue-select-selection,.ivue-input-group-large .ivue-input-group-append .ivue-select-selection-value,.ivue-input-group-large .ivue-input-group-prepend .ivue-select-default .ivue-select-selection,.ivue-input-group-large .ivue-input-group-prepend .ivue-select-selection-value{height:var(--ivue-input-large-height);line-height:var(--ivue-input-large-height);min-height:var(--ivue-input-large-height)}.ivue-input-group-with-append .ivue-input{border-top-right-radius:0;border-bottom-right-radius:0}.ivue-input-group-with-prepend .ivue-input{border-top-left-radius:0;border-bottom-left-radius:0}.ivue-input-group-append .ivue-select,.ivue-input-group-prepend .ivue-select{margin:-5px -7px}.ivue-input-group-append .ivue-select-visible .ivue-select-selection,.ivue-input-group-prepend .ivue-select-visible .ivue-select-selection{-webkit-box-shadow:none;box-shadow:none}.ivue-input-group-append .ivue-select-default .ivue-select-selection,.ivue-input-group-prepend .ivue-select-default .ivue-select-selection{height:var(--ivue-input-height);min-height:var(--ivue-input-height);border:none;background:0 0}.ivue-input-group-append .ivue-select-selection-value,.ivue-input-group-prepend .ivue-select-selection-value{display:block;height:var(--ivue-input-height);line-height:var(--ivue-input-height);font-size:var(--ivue-input-group-font-size);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ivue-input-group-append .ivue-select-item,.ivue-input-group-prepend .ivue-select-item{font-size:var(--ivue-input-group-font-size)}.ivue-input-group-append .ivue-select-head-wrapper,.ivue-input-group-prepend .ivue-select-head-wrapper{display:block}.ivue-input-word-count{text-align:center;position:absolute;right:var(--ivue-input-word-count-right);top:var(--ivue-input-word-count-top);bottom:var(--ivue-input-word-count-top);padding-left:var(--ivue-input-word-count-right);background:var(--ivue-white-color);z-index:1;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:var(--ivue-input-word-count-color);font-size:var(--ivue-input-word-count-font-size)}.ivue-input-search{cursor:pointer;padding:var(--ivue-input-search-padding);background:var(--ivue-primary-color);color:var(--ivue-white-color);border-color:var(--ivue-primary-color);-webkit-transition:var(--ivue-all-transition);transition:var(--ivue-all-transition);position:relative;z-index:2}.ivue-input-search i{font-size:var(--ivue-font-default-size);min-width:auto;width:auto;display:inline}.ivue-input-search:hover{background:var(--ivue-primary-color);border-color:var(--ivue-primary-color)}.ivue-input-search .ivue-input-wrapper:hover{border-color:var(--ivue-primary-color)}.ivue-input-no-border{border-color:transparent;border-radius:0}.ivue-input-no-border:focus,.ivue-input-no-border:hover{border-color:transparent;-webkit-box-shadow:none;box-shadow:none}