siwi-form/src/form.less

siwi form by siwi

@import "../node_modules/siwi-variables/variables";
@import "mixins";
@cursor-disabled                  : not-allowed;
@css-namespace: replace(~"@{css-prefix}", '-', '');
.label() {
  display: inline-block;
  font-size: @font-size-base;
  color: @light-black;
  line-height: 32px;
  height: 32px;
  padding-right: 10px;
}
.@{css-namespace}.form {
  position: relative;
  .field {
    padding: 5px 10px;
    justify-content: flex-start;
    align-items: center;
    >label {
      display: inline-block;
      text-align: right;
      font-size: @font-size-base;
    }
    >input{
      .input();
      margin: 5px 0;
    }
    .radio, .checkbox {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      height: @input-height-base;
      >input{
        display: inline-block;
        margin-right: 4px;
        white-space: nowrap;
        outline: none;
        position: relative;
        line-height: 1;
        vertical-align: middle;
        cursor: pointer;
      }
      >label {
        width: 50px;
        display: inline-block;
        text-align: left;
        font-size: @font-size-sm;
      }
    }
    >select {
      width: 100%;
      margin: 5px 0;
      display: inline-block;
      border: 1px solid @input-border-color;
      border-radius: 2;
      color: @input-color;
      font-size: @font-size-sm;
      line-height: @input-height-base;
      outline: none;
      &[multiple] {
        width: 100%;
        option {
          padding: .2rem .4rem;
        }
      }
      &:not([multiple]) {
        background: white;
        height: @input-height-base;
        color: @input-color;
        padding-right: 24px;
      }
      option {
        color: @input-color;
      }
    }
    >textarea {
      .input();
      margin: 5px 0;
      height: auto;
    }

  }
  .inline-field {
    padding: 5px 10px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    >label {
      width: 80px;
      text-align: right;
      padding:0 10px;
      font-size: @font-size-base;
    }
    >input {
      flex: 1;
      .input();
    }
    .radio, .checkbox {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      height: @input-height-base;
      >input{
        display: inline-block;
        margin-right: 4px;
        white-space: nowrap;
        outline: none;
        position: relative;
        line-height: 1;
        vertical-align: middle;
        cursor: pointer;
        padding: 0;
      }
      >label {
        width: 50px;
        display: inline-block;
        text-align: left;
        font-size: @font-size-sm;
      }
    }
    >textarea {
      .input();
      flex: 1;
      height: auto;
    }
  }
  .fields {
    .inline-field {
      >label {
        width: auto;
        text-align: center;
        padding:0 10px;
      }
      &:first-child {
        >label {
          width: 80px;
          text-align: right;
        }
      }
    }

    display: flex;
  }
}