vexip-ui/css/form.css

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

.vxp-form-vars{--vxp-form-error-color:var(--vxp-color-error-light-1);--vxp-form-error-shadow:var(--vxp-box-shaodw-focus) var(--vxp-color-error-opacity-6);--vxp-form-asterisk-color:var(--vxp-color-error-base);--vxp-form-asterisk-family:var(--vxp-font-family-base);--vxp-form-tip-color:var(--vxp-color-error-base)}.vxp-form{font-family:var(--vxp-font-family-base);font-size:var(--vxp-font-size-base);font-variant-numeric:tabular-nums;line-height:var(--vxp-line-height-base);color:var(--vxp-content-color-base);position:relative}.vxp-form,.vxp-form *,.vxp-form ::after,.vxp-form ::before{box-sizing:border-box}.vxp-form--inherit{font-family:inherit;font-size:inherit;font-variant-numeric:inherit;line-height:inherit}.vxp-form--inherit{color:inherit}.vxp-form--inline{display:inline-flex;flex-flow:row wrap}.vxp-form__item{font-family:var(--vxp-font-family-base);font-size:var(--vxp-font-size-base);font-variant-numeric:tabular-nums;line-height:var(--vxp-line-height-base);color:var(--vxp-content-color-base);display:flex;align-items:center;width:100%;margin-bottom:28px}.vxp-form__item,.vxp-form__item *,.vxp-form__item ::after,.vxp-form__item ::before{box-sizing:border-box}.vxp-form__item--inherit{font-family:inherit;font-size:inherit;font-variant-numeric:inherit;line-height:inherit}.vxp-form__item--action{justify-content:center;margin-bottom:0;text-align:center}.vxp-form__item--padding::before{padding-inline-end:8px;margin-bottom:4px;pointer-events:none;visibility:hidden;content:"-";opacity:0}.vxp-form--inline .vxp-form__item{flex:1 0 auto;width:auto;min-width:40px}.vxp-form--inline .vxp-form__item--action{flex:0 0 auto}.vxp-form__label,.vxp-form__placeholder{display:inline-flex;align-items:center;padding-inline-end:8px;white-space:nowrap}.vxp-form__placeholder{position:absolute;visibility:hidden}.vxp-form__control{position:relative;display:flex;align-items:center}.vxp-form__control__no-label{width:100%}.vxp-form__item--action .vxp-form__control{justify-content:center}.vxp-form--label-top .vxp-form__item{flex-direction:column;align-items:flex-start;justify-content:center}.vxp-form--label-top .vxp-form__label{justify-content:flex-start;width:100%;padding-inline-end:0;margin-bottom:4px;text-align:left}.vxp-form--label-top .vxp-form__control{width:100%}.vxp-form--label-right .vxp-form__label{align-self:stretch;justify-content:flex-end;text-align:right}.vxp-form--label-left .vxp-form__label{align-self:stretch;justify-content:flex-start;text-align:left}.vxp-form__help{margin-inline-end:3px;cursor:help}.vxp-form--label-left .vxp-form__help,.vxp-form--label-top .vxp-form__help{order:1;margin-inline:3px 0}.vxp-form__item--required .vxp-form__label::before{display:inline-block;font-family:var(--vxp-form-asterisk-family);color:var(--vxp-form-asterisk-color);content:"*";-webkit-user-select:none;-moz-user-select:none;user-select:none;margin-inline-end:4px}.vxp-form--label-top .vxp-form__item--required .vxp-form__label::before{display:none}.vxp-form--label-top .vxp-form__item--required .vxp-form__label::after{display:inline-block;font-family:var(--vxp-form-asterisk-family);color:var(--vxp-form-asterisk-color);content:"*";-webkit-user-select:none;-moz-user-select:none;user-select:none;margin-inline-start:4px}.vxp-form__error-tip{position:absolute;top:100%;left:0;padding-top:3px;color:var(--vxp-form-tip-color);white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;user-select:none}