@opentiny/vue-theme/form-item/index.css

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

.tiny-form-item{--tv-FormItem-line-height:var(--tv-line-height-number, 1.5);--tv-FormItem-font-size:var(--tv-font-size-default, 14px);--tv-FormItem-text-color:var(--tv-color-text, #191919);--tv-FormItem-text-color-weaken:var(--tv-color-text-weaken, #808080);--tv-FormItem-text-color-error:var(--tv-color-error-text, #f23030);--tv-FormItem-icon-color-error:var(--tv-color-error-icon, #f23030);--tv-FormItem-bg-color-error:var(--tv-color-error-bg-light, #fce3e1);--tv-FormItem-border-color-error:var(--tv-color-error-border, #f23030);--tv-FormItem-height:var(--tv-size-height-md, 32px);--tv-FormItem-margin-bottom:var(--tv-space-xxl, 24px);--tv-FormItem-inline-margin-right:var(--tv-space-xxl, 24px);--tv-FormItem-error-block-padding-top:var(--tv-space-md, 8px);--tv-FormItem-label-padding-right:var(--tv-space-xxl, 24px);--tv-FormItem-height-lg:var(--tv-size-height-lg, 40px);--tv-FormItem-margin-bottom-lg:var(--tv-space-xxl, 24px);--tv-FormItem-height-sm:var(--tv-size-height-sm, 28px);--tv-FormItem-margin-bottom-sm:var(--tv-space-xxl, 24px);--tv-FormItem-height-xs:var(--tv-size-height-xs, 24px);--tv-FormItem-margin-bottom-xs:var(--tv-space-xl, 16px);margin-bottom:var(--tv-FormItem-margin-bottom)}.tiny-form-item:after,.tiny-form-item:before{content:'';display:table}.tiny-form-item:after{clear:both}.tiny-form-item .tiny-form-item{margin-bottom:0}.tiny-form-item--mini .tiny-form-item__error{padding-top:2px}.tiny-form-item .tiny-form-item__content{line-height:var(--tv-FormItem-height)}.tiny-form-item .tiny-form-item__content .tiny-checkbox,.tiny-form-item .tiny-form-item__content .tiny-radio{line-height:var(--tv-FormItem-height)}.tiny-form-item .tiny-form-item__content .tiny-checkbox-group{min-height:var(--tv-FormItem-height)}.tiny-form-item .tiny-form-item__content .tiny-numeric{display:block}.tiny-form-item .tiny-form-item__content .tiny-numeric__input-inner{height:var(--tv-FormItem-height)}.tiny-form-item .tiny-form-item__content .tiny-slider-container{height:var(--tv-FormItem-height)}.tiny-form-item .tiny-form-item__label{height:var(--tv-FormItem-height);line-height:var(--tv-FormItem-height)}.tiny-form-item--medium{margin-bottom:var(--tv-FormItem-margin-bottom-lg)}.tiny-form-item--medium .tiny-form-item__content{line-height:var(--tv-FormItem-height-lg)}.tiny-form-item--medium .tiny-form-item__content .tiny-checkbox,.tiny-form-item--medium .tiny-form-item__content .tiny-radio{line-height:var(--tv-FormItem-height-lg)}.tiny-form-item--medium .tiny-form-item__content .tiny-checkbox-group{min-height:var(--tv-FormItem-height-lg)}.tiny-form-item--medium .tiny-form-item__content .tiny-numeric{display:block}.tiny-form-item--medium .tiny-form-item__content .tiny-numeric__input-inner{height:var(--tv-FormItem-height-lg)}.tiny-form-item--medium .tiny-form-item__content .tiny-slider-container{height:var(--tv-FormItem-height-lg)}.tiny-form-item--medium .tiny-form-item__label{height:var(--tv-FormItem-height-lg);line-height:var(--tv-FormItem-height-lg)}.tiny-form-item--small{margin-bottom:var(--tv-FormItem-margin-bottom-sm)}.tiny-form-item--small .tiny-form-item__content{line-height:var(--tv-FormItem-height-sm)}.tiny-form-item--small .tiny-form-item__content .tiny-checkbox,.tiny-form-item--small .tiny-form-item__content .tiny-radio{line-height:var(--tv-FormItem-height-sm)}.tiny-form-item--small .tiny-form-item__content .tiny-checkbox-group{min-height:var(--tv-FormItem-height-sm)}.tiny-form-item--small .tiny-form-item__content .tiny-numeric{display:block}.tiny-form-item--small .tiny-form-item__content .tiny-numeric__input-inner{height:var(--tv-FormItem-height-sm)}.tiny-form-item--small .tiny-form-item__content .tiny-slider-container{height:var(--tv-FormItem-height-sm)}.tiny-form-item--small .tiny-form-item__label{height:var(--tv-FormItem-height-sm);line-height:var(--tv-FormItem-height-sm)}.tiny-form-item--mini{margin-bottom:var(--tv-FormItem-margin-bottom-xs)}.tiny-form-item--mini .tiny-form-item__content{line-height:var(--tv-FormItem-height-xs)}.tiny-form-item--mini .tiny-form-item__content .tiny-checkbox,.tiny-form-item--mini .tiny-form-item__content .tiny-radio{line-height:var(--tv-FormItem-height-xs)}.tiny-form-item--mini .tiny-form-item__content .tiny-checkbox-group{min-height:var(--tv-FormItem-height-xs)}.tiny-form-item--mini .tiny-form-item__content .tiny-numeric{display:block}.tiny-form-item--mini .tiny-form-item__content .tiny-numeric__input-inner{height:var(--tv-FormItem-height-xs)}.tiny-form-item--mini .tiny-form-item__content .tiny-slider-container{height:var(--tv-FormItem-height-xs)}.tiny-form-item--mini .tiny-form-item__label{height:var(--tv-FormItem-height-xs);line-height:var(--tv-FormItem-height-xs)}.tiny-form-item__label-wrap{float:left}.tiny-form-item__label-wrap .tiny-form-item__label{display:inline-block;float:none}.tiny-form-item__label{text-align:right;vertical-align:middle;float:left;font-size:var(--tv-FormItem-font-size);color:var(--tv-FormItem-text-color);padding-right:var(--tv-FormItem-label-padding-right);-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.tiny-form-item__content{position:relative;font-size:var(--tv-FormItem-font-size)}.tiny-form-item__content:after,.tiny-form-item__content:before{content:'';display:table}.tiny-form-item__content:after{clear:both}.tiny-form-item__content .tiny-checkbox,.tiny-form-item__content .tiny-input,.tiny-form-item__content .tiny-link,.tiny-form-item__content .tiny-numeric,.tiny-form-item__content .tiny-radio,.tiny-form-item__content .tiny-rate,.tiny-form-item__content .tiny-select{vertical-align:bottom}.tiny-form-item__content .tiny-checkbox.is-display-only,.tiny-form-item__content .tiny-input.is-display-only,.tiny-form-item__content .tiny-link.is-display-only,.tiny-form-item__content .tiny-numeric.is-display-only,.tiny-form-item__content .tiny-radio.is-display-only,.tiny-form-item__content .tiny-rate.is-display-only,.tiny-form-item__content .tiny-select.is-display-only{vertical-align:middle;line-height:1.5}.tiny-form-item__content .tiny-input{display:inline-block}.tiny-form-item__content .tiny-input.tiny-range-editor.tiny-input__inner{display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex}.tiny-form-item__content .tiny-input.tiny-input-group{display:inline-table}.tiny-form-item__content .tiny-rate__text{line-height:var(--tv-FormItem-line-height)}.tiny-form-item__content .tiny-input-group{vertical-align:top}.tiny-form-item__content .tiny-button+.tiny-button{margin-left:8px}.tiny-form-item__content .tiny-checkbox-group:has(>label.is-group-display-only){min-height:unset;vertical-align:baseline;display:inline-block}.tiny-form-item__content .tiny-autocomplete,.tiny-form-item__content .tiny-cascader,.tiny-form-item__content .tiny-date-editor--daterange.tiny-input,.tiny-form-item__content .tiny-date-editor--daterange.tiny-input__inner,.tiny-form-item__content .tiny-date-editor--timerange.tiny-input,.tiny-form-item__content .tiny-date-editor--timerange.tiny-input__inner,.tiny-form-item__content .tiny-numeric{width:100%}.tiny-form-item__error{color:var(--tv-FormItem-text-color-error);font-size:var(--tv-FormItem-font-size);line-height:1;padding-top:4px;position:absolute}.tiny-form-item__error .validate-icon{fill:var(--tv-FormItem-icon-color-error);margin-right:4px;-ms-flex-negative:0;flex-shrink:0}.tiny-form-item__error .tiny-form-item__validate-message{vertical-align:middle}.tiny-form-item__error--inline{position:relative;display:inline-block;margin-left:8px}.tiny-form-item__error--block{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;margin-left:0;padding-top:var(--tv-FormItem-error-block-padding-top)}.tiny-form-item.is-required:not(.is-no-asterisk) .tiny-form-item__label-wrap>.tiny-form-item__label:before,.tiny-form-item.is-required:not(.is-no-asterisk)>.tiny-form-item__label:before{content:'*';color:var(--tv-FormItem-text-color-error);margin-right:4px}.tiny-form-item.is-error .tiny-input__inner,.tiny-form-item.is-error .tiny-input__inner:focus,.tiny-form-item.is-error .tiny-textarea,.tiny-form-item.is-error .tiny-textarea::after,.tiny-form-item.is-error .tiny-textarea::before,.tiny-form-item.is-error .tiny-textarea:focus,.tiny-form-item.is-error .tiny-textarea__inner,.tiny-form-item.is-error .tiny-textarea__inner:focus{border-color:var(--tv-FormItem-border-color-error);background-color:var(--tv-FormItem-bg-color-error)}.tiny-form-item.is-error .tiny-input-group__append .tiny-input__inner,.tiny-form-item.is-error .tiny-input-group__prepend .tiny-input__inner{border-color:transparent}.tiny-form-item.is-error .tiny-numeric__input-inner,.tiny-form-item.is-error .tiny-numeric__input-inner:focus{border-color:var(--tv-FormItem-border-color-error);background-color:var(--tv-FormItem-bg-color-error)}.tiny-form-item__extra-tip{line-height:var(--tv-FormItem-line-height);margin-top:8px;color:var(--tv-FormItem-text-color-weaken);font-size:var(--tv-FormItem-font-size)}.tiny-form{--tv-FormItem-line-height:var(--tv-line-height-number, 1.5);--tv-FormItem-font-size:var(--tv-font-size-default, 14px);--tv-FormItem-text-color:var(--tv-color-text, #191919);--tv-FormItem-text-color-weaken:var(--tv-color-text-weaken, #808080);--tv-FormItem-text-color-error:var(--tv-color-error-text, #f23030);--tv-FormItem-icon-color-error:var(--tv-color-error-icon, #f23030);--tv-FormItem-bg-color-error:var(--tv-color-error-bg-light, #fce3e1);--tv-FormItem-border-color-error:var(--tv-color-error-border, #f23030);--tv-FormItem-height:var(--tv-size-height-md, 32px);--tv-FormItem-margin-bottom:var(--tv-space-xxl, 24px);--tv-FormItem-inline-margin-right:var(--tv-space-xxl, 24px);--tv-FormItem-error-block-padding-top:var(--tv-space-md, 8px);--tv-FormItem-label-padding-right:var(--tv-space-xxl, 24px);--tv-FormItem-height-lg:var(--tv-size-height-lg, 40px);--tv-FormItem-margin-bottom-lg:var(--tv-space-xxl, 24px);--tv-FormItem-height-sm:var(--tv-size-height-sm, 28px);--tv-FormItem-margin-bottom-sm:var(--tv-space-xxl, 24px);--tv-FormItem-height-xs:var(--tv-size-height-xs, 24px);--tv-FormItem-margin-bottom-xs:var(--tv-space-xl, 16px)}.tiny-form--inline .tiny-form-item{display:inline-block;vertical-align:top;margin-right:var(--tv-FormItem-inline-margin-right)}.tiny-form--inline .tiny-form-item__label{float:none;display:inline-block}.tiny-form--inline .tiny-form-item__content{display:inline-block;vertical-align:top}.tiny-form--inline .tiny-form--label-top .tiny-form-item__content{display:block}.tiny-form--label-left.has-required .tiny-form-item__label{padding-left:12px}.tiny-form--label-left .tiny-form-item__label{text-align:left}.tiny-form--label-left.label-align .tiny-form-item.is-required .tiny-form-item__label{padding-left:12px;position:relative}.tiny-form--label-left.label-align .tiny-form-item.is-required .tiny-form-item__label::before{position:absolute;left:0}.tiny-form--label-left.label-align .tiny-form-item.is-required~.tiny-form-item .tiny-form-item__label{padding-left:12px}.tiny-form--label-top .tiny-form-item{margin-bottom:16px}.tiny-form--label-top .tiny-form-item__label{float:none;display:block;text-align:left;padding:0 0 8px;height:auto;line-height:var(--tv-FormItem-line-height)}.tiny-form.is-display-only .tiny-form-item__label{line-height:var(--tv-FormItem-line-height);height:auto;vertical-align:inherit;color:var(--tv-FormItem-text-color-weaken)}.tiny-form.is-display-only .tiny-form-item__content{line-height:var(--tv-FormItem-line-height);font-size:var(--tv-FormItem-font-size);height:auto;vertical-align:inherit}.tiny-form.is-display-only .tiny-form-item__content .tiny-switch{margin-top:0}.tiny-form.is-display-only .tiny-form-item__content .tiny-numeric.is-display-only{margin-top:2px}.tiny-form.is-display-only .tiny-form-item__content .tiny-input.tiny-range-editor.tiny-input__inner{height:18px}.tiny-form.is-display-only .tiny-form-item.is-required:not(.is-no-asterisk) .tiny-form-item__label-wrap>.tiny-form-item__label:before,.tiny-form.is-display-only .tiny-form-item.is-required:not(.is-no-asterisk)>.tiny-form-item__label:before{content:''}