mealcomes/theme-chalk/form.css

MealComes 用于学习前端的组件库

.mc-form {
  --mc-form-label-font-size: var(--mc-font-size-base);
  --mc-form-inline-content-width: 220px;
}
.mc-form--inline .mc-form-item {
  display: inline-flex;
  vertical-align: middle;
  margin-right: 32px;
}
.mc-form--inline.mc-form--label-top {
  display: flex;
  flex-wrap: wrap;
}
.mc-form--inline.mc-form--label-top .mc-form-item {
  display: block;
}

.mc-form-item {
  display: flex;
  --font-size: 14px;
  margin-bottom: 18px;
}
.mc-form-item .mc-form-item {
  margin-bottom: 0;
}
.mc-form-item--large {
  --font-size: 14px;
  --mc-form-label-font-size: var(--font-size);
  margin-bottom: 22px;
}
.mc-form-item--large__label {
  height: 40px;
  line-height: 40px;
}

.mc-form-item--large .mc-form-item__content {
  line-height: 40px;
}
.mc-form-item--large .mc-form-item__error {
  padding-top: 4px;
}

.mc-form-item--default {
  --font-size: 14px;
  --mc-form-label-font-size: var(--font-size);
  margin-bottom: 18px;
}
.mc-form-item--default__label {
  height: 32px;
  line-height: 32px;
}

.mc-form-item--default .mc-form-item__content {
  line-height: 32px;
}
.mc-form-item--default .mc-form-item__error {
  padding-top: 2px;
}

.mc-form-item--small {
  --font-size: 12px;
  --mc-form-label-font-size: var(--font-size);
  margin-bottom: 18px;
}
.mc-form-item--small__label {
  height: 24px;
  line-height: 24px;
}

.mc-form-item--small .mc-form-item__content {
  line-height: 24px;
}
.mc-form-item--small .mc-form-item__error {
  padding-top: 2px;
}

.mc-form-item__label-wrap {
  display: flex;
}

.mc-form-item__label {
  display: inline-flex;
  align-items: flex-start;
  flex: 0 0 auto;
  font-size: var(--mc-form-label-font-size);
  color: var(--mc-text-color-regular);
  height: 32px;
  line-height: 32px;
  padding: 0 12px 0 0;
  box-sizing: border-box;
}

.mc-form-item__content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  flex: 1;
  line-height: 32px;
  position: relative;
  font-size: var(--font-size);
  min-width: 0;
}
.mc-form-item__content .mc-input-group {
  vertical-align: top;
}

.mc-form-item__error {
  color: var(--mc-color-danger);
  font-size: 12px;
  line-height: 1;
  padding-top: 2px;
  position: absolute;
  top: 100%;
  left: 0;
}
.mc-form-item__error--inline {
  position: relative;
  top: auto;
  left: auto;
  display: inline-block;
  margin-left: 10px;
}

.mc-form-item-input .mc-form-item {
  position: relative;
}
.mc-form-item-input .mc-form-item--large .mc-form-item-input__form-label {
  line-height: 40px;
  left: 7px;
}
.mc-form-item-input .mc-form-item--large .mc-form-item-input__form-label.active {
  transform: translate(calc(0px - 7px)) scale(1.1);
}
.mc-form-item-input .mc-form-item--default .mc-form-item-input__form-label {
  line-height: 32px;
  left: 11px;
}
.mc-form-item-input .mc-form-item--default .mc-form-item-input__form-label.active {
  transform: translate(calc(0px - 11px)) scale(1.1);
}
.mc-form-item-input .mc-form-item--small .mc-form-item-input__form-label {
  line-height: 24px;
  left: 15px;
}
.mc-form-item-input .mc-form-item--small .mc-form-item-input__form-label.active {
  transform: translate(calc(0px - 15px)) scale(1.1);
}
.mc-form-item-input .mc-form-item-input__form-label {
  position: absolute;
  font-size: inherit;
  font-weight: inherit;
  height: 100%;
  color: var(--mc-text-color-placeholder);
  transition: all 0.3s ease;
  transform-origin: 0 50%;
  user-select: none;
  pointer-events: none;
}
.mc-form-item-input .mc-form-item-input__form-label.active {
  font-size: var(--mc-form-label-font-size);
  color: var(--mc-text-color-primary);
}
.mc-form-item-input .mc-form-item-input__form-label.inactive {
  font-size: var(--font-size);
  color: var(--mc-text-color-placeholder);
}
.mc-form-item-input .mc-form-item__content {
  position: static;
  transition: all 0.3s ease;
}
.mc-form-item-input .mc-form-item__content .mc-form-item__error {
  transition: left 0.3s ease;
  left: auto;
}