yu.css.ui/css/component/field.css

纯CSS通用UI模块和组件

.yu-field {
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
  color: #606266;
  font-size: 0;
  margin: 0 8px 14px 0;
  vertical-align: top;
  display: block; }
  .yu-field.flex {
    display: flex; }
  .yu-field.inline {
    display: inline-block; }
    .yu-field.inline > .field {
      width: auto; }
      .yu-field.inline > .field > .yu-input {
        width: auto; }
        .yu-field.inline > .field > .yu-input > textarea {
          width: auto; }
  .yu-field > label {
    font-size: 14px;
    width: 80px;
    height: 32px;
    line-height: 32px;
    box-sizing: border-box;
    padding-right: 14px; }
    .yu-field > label.top {
      flex-wrap: nowrap;
      display: block;
      margin-bottom: 14px; }
    .yu-field > label.left {
      display: inline-block;
      text-align: left; }
    .yu-field > label.right {
      display: inline-block;
      text-align: right; }
  .yu-field > .field {
    vertical-align: top;
    display: inline-block;
    box-sizing: border-box;
    width: 100%; }
    .yu-field > .field > .yu-input {
      margin: 0; }
      .yu-field > .field > .yu-input > input {
        width: 100%; }
      .yu-field > .field > .yu-input > textarea {
        width: 100%; }
    .yu-field > .field > .yu-switch {
      margin-top: 14px; }
    .yu-field > .field.cascader {
      min-width: 500px; }
  .yu-field .three.field {
    min-width: 370px; }
  .yu-field.error > .field {
    text-align: left; }
    .yu-field.error > .field > .yu-input > input {
      border: 1px solid #F56C6C; }
    .yu-field.error > .field > .yu-input > textarea {
      border: 1px solid #F56C6C; }
    .yu-field.error > .field > .error {
      margin: 0;
      font-size: 14px;
      line-height: 32px;
      color: #F56C6C; }