@qvant/qui-max/dist/css/q-form-item.css

A Vue 3 Design system for Web.

.q-form-item {
  position: relative;
}
.q-form-item__header {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: baseline;
  margin-bottom: 8px;
}
.q-form-item__label {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-base);
}
.q-form-item_is-required:not(.q-form-item_is-no-asterisk) .q-form-item__label::after {
  margin-left: 4px;
  color: var(--color-secondary-orange);
  content: "*";
}
.q-form-item__label_size_regular {
  font-size: 14px;
  line-height: 18px;
  color: var(--color-primary-black);
}
.q-form-item_is-required:not(.q-form-item_is-no-asterisk) .q-form-item__label_size_regular::after {
  font-weight: 700;
}
.q-form-item__label_size_small {
  font-size: 10px;
  line-height: 12px;
  color: rgb(var(--color-rgb-gray)/64%);
}
.q-form-item_is-required:not(.q-form-item_is-no-asterisk) .q-form-item__label_size_small::after {
  font-weight: 800;
}
.q-form-item__sublabel {
  margin-left: auto;
  font-size: 10px;
  line-height: 12px;
  color: rgb(var(--color-rgb-gray)/64%);
}
.q-form-item__body {
  position: relative;
  padding-bottom: 24px;
}
.q-form-item__error {
  position: absolute;
  top: calc(100% - 16px);
  right: 0;
  left: 0;
  font-size: 10px;
  line-height: 12px;
  color: var(--color-secondary-orange);
}