UNPKG

ten-design-vue

Version:

ten-vue

129 lines (107 loc) 2.14 kB
/* dependencies icon,tooltip */ @import "../vars.less"; .ten-form { &-item { display: flex; margin-bottom: @form-item-bottom; position: relative; &-label { width: 6em; margin-right: 16px; line-height: @input-height-default; color: @text-color; font-size: 14px; } &-control { flex: 1; position: relative; line-height: @input-height-default; } &-err { display: none; position: absolute; top: 100%; font-size: 12px; line-height: @form-item-err-line-height; color: #FF3E00; } &-icon { position: absolute; top: (@input-height-default - 16px) / 2 + 1px; left: calc(100% + 5px); width: 32px; font-size: 16px; line-height: 16px; } .ten-form-item-icon { display: none; } .ten-form-item-icon .ten-icon { &--line_circle_help { color: #FFA700; cursor: pointer; } &--circle_clear { color: #ff3e00; } &--circle_tick { color: #3ecc36; } &--circle_error { color: #FFA700; } &--loading_gradient { color: @primary-color; } } &--required { .ten-form-item-label { &:after { content: '*'; display: inline; color: @error-color; margin-left: 5px; vertical-align: middle } } } &--error { .ten-form-item-err { display: block; } .ten-input__input, .ten-picker__input { border-color: #FF3E00; } } &--warning { .ten-input__input, .ten-picker__input { border-color: #FFA700; } } &--icon { .ten-form-item-icon { display: inline-block; } } } &--inline { .ten-form-item { display: inline-flex; &-label { width: auto; } } .ten-form-item+.ten-form-item { margin-left: @form-item-next-left; } } &--labelalign-right { .ten-form-item { &-label { text-align: right; } } } }