formir/src/less/core/components/form.less

Pure CSS / HTML Framework

.input-disabled() {
  opacity: @input-disabled-opacity;
}

.select-arrow() {
  .font-icon;
  content: @select-arrow-icon-down;
  position: absolute;
  top: 0;
  bottom: 0;
  margin: auto;
  color: @input-border-color;
  z-index: 2;
  pointer-events: none;
  text-align: right;
  vertical-align: middle;
  width: @input-default-font-size;
  font-size: @input-default-font-size;
  height: @input-default-font-size;
  line-height: @input-default-font-size;
}

.input-invalid() {
  & when (@form-state-change-text-color = true) {
    color: ~"@{input-color-@{form-state-invalid}}";
  }
  & when (@form-state-change-background = true) {
    background-color: ~"@{input-background-@{form-state-invalid}}";
  }
  & when (@form-state-change-border = true) {
    border-color: ~"@{input-border-@{form-state-invalid}}";
  }
}

.input-valid() {
  & when (@form-state-change-text-color = true) {
    color: ~"@{input-color-@{form-state-valid}}";
  }
  & when (@form-state-change-background = true) {
    background-color: ~"@{input-background-@{form-state-valid}}";
  }
  & when (@form-state-change-border = true) {
    border-color: ~"@{input-border-@{form-state-valid}}";
  }
}
.input-base-style() {
  border-color: @input-border-color;
  border-style: @input-border-style;
  border-width: @input-default-border-width;
  border-radius: @input-default-border-radius;
  font-size: @input-default-font-size;
  line-height: @input-default-line-height;
  font-weight: @input-font-weight;
  color: @input-text-color;
  background-color: @input-background-color;
  outline: @input-default-outline;
  box-shadow: @input-default-shadow;
  box-sizing: border-box;
}
.input-style() {
  .input-base-style();
  padding: @input-default-padding-vertical @input-default-padding-horizontal;
  text-overflow: ellipsis;
  &:hover, &.@{input-hover} {
    & when not (@input-hover-border-color = none) { 
      border-color: @input-hover-border-color !important;
    }
    & when not (@input-hover-border-style = none) { 
      border-style: @input-hover-border-style !important;
    }
    & when not (@input-hover-outline = none) { 
      outline: @input-hover-outline !important;
    }
    & when not (@input-hover-shadow = none) { 
      box-shadow: @input-hover-shadow !important;
    }
    & when not (@input-hover-background-color = none) { 
      background-color: @input-hover-background-color !important;
    }
  }
  &:focus, &.@{input-focus} {
    & when not (@input-focus-border-color = none) { 
      border-color: @input-focus-border-color !important;
    }
    & when not (@input-focus-border-style = none) { 
      border-style: @input-focus-border-style !important;
    }
    & when not (@input-focus-outline = none) { 
      outline: @input-focus-outline !important;
    }
    & when not (@input-focus-shadow = none) { 
      box-shadow: @input-focus-shadow !important;
    }
    & when not (@input-focus-background-color = none) { 
      background-color: @input-focus-background-color !important;
    }
  }
  &:disabled, &[disabled] {
    pointer-events: none;
    cursor: normal;
    .input-disabled !important;
  }
  &.@{input-inverse} {
    background-color: @input-border-color !important;
    border-color: @input-background-color !important;
    color: @input-background-color !important;
  }
  &.@{input-transparent} {
    background-color: transparent !important;
  }
}

.select-style() {
  option {
    height: @input-default-line-height;
    padding: @input-default-padding-vertical @input-default-padding-horizontal;
    border: none;
  }
}

input {
  &:not([type="checkbox"]):not([type="radio"]):not([type="submit"]) {
    .input-style;
  }
}

select, textarea, .@{input}, output, datalist {
  .input-style;
}

select {
  &:not([multiple]) {
    height: calc( @input-default-line-height ~"+" @input-default-padding-vertical * 2 ~"+" @input-default-border-width * 2 );
  }
  .select-style;
}

input {
  &:not([type="checkbox"]):not([type="radio"]):not([type="submit"]) {
    &.@{input} {
      .for(@input-sizes); .-each(@name) {
        &-@{name} {
          font-size: ~"@{input-@{name}-font-size}";
          line-height: ~"@{input-@{name}-line-height}";
          padding: ~"@{input-@{name}-padding-vertical}" ~"@{input-@{name}-padding-horizontal}";
          border-radius: ~"@{input-@{name}-border-radius}";
          border-width: ~"@{input-@{name}-border-width}";
          outline-width: ~"@{input-@{name}-outline}";
          box-shadow: ~"@{input-@{name}-shadow}";
        }
      }
    }
  }
}
select, textarea {
  &.@{input} {
    .for(@input-sizes); .-each(@name) {
      &-@{name} {
        font-size: ~"@{input-@{name}-font-size}";
        line-height: ~"@{input-@{name}-line-height}";
        padding: ~"@{input-@{name}-padding-vertical}" ~"@{input-@{name}-padding-horizontal}";
        border-radius: ~"@{input-@{name}-border-radius}";
        border-width: ~"@{input-@{name}-border-width}";
        outline-width: ~"@{input-@{name}-outline}";
        box-shadow: ~"@{input-@{name}-shadow}";
      }
    }
  }
}
select:not([multiple]) {
  &.@{input} {
    .for(@input-sizes); .-each(@name) {
      &-@{name} {
        height: calc( ~"@{input-@{name}-line-height}" ~"+" ~"@{input-@{name}-padding-vertical} * 2" ~" +" ~"@{input-@{name}-border-width} * 2" );
        option {
          line-height: ~"@{input-@{name}-line-height}";
          padding: ~"@{input-@{name}-padding-vertical}" ~"@{input-@{name}-padding-horizontal}";
        }
      }
    }
  }
}

.@{inputs}, .@{size} {
  .for(@input-sizes); .-each(@name) {
    &-@{name} {
      &, &[class*="@{cell}"] {
        .@{input}, input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), select, textarea {
          font-size: ~"@{input-@{name}-font-size}";
          line-height: ~"@{input-@{name}-line-height}";
          padding: ~"@{input-@{name}-padding-vertical}" ~"@{input-@{name}-padding-horizontal}";
          border-radius: ~"@{input-@{name}-border-radius}";
          border-width: ~"@{input-@{name}-border-width}";
          outline: ~"@{input-@{name}-outline}";
          box-shadow: ~"@{input-@{name}-shadow}";
        }
        .@{select} {
          min-height: calc( ~"@{input-@{name}-line-height}" ~"+" ~"@{input-@{name}-padding-vertical} * 2" ~" +" ~"@{input-@{name}-border-width} * 2" );
        }
        .@{select-content} {
          border-radius: ~"@{input-@{name}-border-radius}";
          border-width: ~"@{input-@{name}-border-width}";
          outline: ~"@{input-@{name}-outline}";
          box-shadow: ~"@{input-@{name}-shadow}";
        }
        select:not([multiple]) {
          height: calc( ~"@{input-@{name}-line-height}" ~"+" ~"@{input-@{name}-padding-vertical} * 2" ~" +" ~"@{input-@{name}-border-width} * 2" );
          option {
            line-height: ~"@{input-@{name}-line-height}";
            padding: ~"@{input-@{name}-padding-vertical}" ~"@{input-@{name}-padding-horizontal}";
          }
        }
      }
    }
  }
}

@{form} {
  @{label} {
    text-transform: @label-text-transform;
    font-size: @label-font-size;
    line-height: @label-line-height;
    font-weight: @label-font-weight;
    color: @label-text-color;
    min-height: @label-line-height;
    display: block;
  }

  .@{hint} {
    text-transform: @hint-text-transform;
    font-size: @hint-font-size;
    line-height: @hint-line-height;
    font-weight: @hint-font-weight;
    color: @hint-text-color;
    & when(@include-core-component-tooltip = true) {
      &.@{has-tooltip} {
        z-index: auto;
        min-height: calc(@tooltip-padding-vertical  ~"*" 2  ~"+" @tooltip-line-height);
        .@{tooltip} {
          display: table;
        }
      }
      .@{tooltip} {
        top: @tooltip-distance !important;
        & when (@form-tooltip-position = left) {
          left: 0 !important;
        }
        & when (@form-tooltip-position = right) {
          right: 0 !important;
        }
      }
    }
  }

  &.@{form-validate} {
    .@{has-tooltip} {
      input, select, textarea {
        &.@{form-input-touched} {
          &:invalid, &.@{input-invalid} {
            & when (@form-tooltip-input-show-on = focus) {
              &:focus {
                ~ .@{tooltip} {
                  display: table !important;
                }
              }
            }
            & when (@form-tooltip-input-show-on = hover) {
              &:hover {
                ~ .@{tooltip} {
                  display: table !important;
                }
              }
            }
            & when (@form-tooltip-input-show-on = not_focus) {
              &:not(:focus) {
                ~ .@{tooltip} {
                  display: table !important;
                }
              }
            }
          }
        }
        ~ .@{tooltip} {
          display: none !important;
          background-color: ~"@{input-tooltip-has-error}";
          color: ~"@{input-tooltip-contrast-has-error}";
          & when (@form-tooltip-position = left) {
            left: 0 !important;
          }
          & when (@form-tooltip-position = right) {
            right: 0 !important;
          }
          & when (@form-tooltip-position = left) {
            .tooltip-bottom(~"@{input-tooltip-has-error}");
          }
          & when (@form-tooltip-position = center) {
            .tooltip-bottom-center(~"@{input-tooltip-has-error}");
          }
          & when (@form-tooltip-position = right) {
            .tooltip-bottom-right(~"@{input-tooltip-has-error}");
          }
        }
      }
    }
    input, select, textarea {
      &:not(:focus).@{form-input-touched} {
        &:invalid, &.@{input-invalid} {
          .input-invalid;
        }
        &:valid, &.@{input-valid} {
          .input-valid;
        }
      }
    }
    .@{select-arrow} select {
      &:not(:focus).@{form-input-touched} {
        &:invalid, &.@{input-invalid} {
          + span:after {
            color: ~"@{input-color-@{form-state-invalid}}";
          }
        }
        &:valid, &.@{input-valid} {
          + span:after {
            color: ~"@{input-color-@{form-state-valid}}";
          }
        }
      }
    }
  }
}

.@{control}, .@{control-group} {
  position: relative;
  & when(@include-core-component-tooltip = true) {
    &.@{has-tooltip} {
      z-index: auto;
      & when not (@form-tooltip-input-show-on = hover) {
        &:hover {
          .@{tooltip} {
            display: none;
          }
        }
      }
      input, select, textarea {
        & when (@form-tooltip-input-show-on = focus) {
          &:focus {
            ~ .@{tooltip} {
              display: block;
            }
          }
        }
        & when (@form-tooltip-input-show-on = not_focus) {
          &:not(:focus) {
            ~ .@{tooltip} {
              display: block;
            }
          }
        }
      }
    }
    .@{tooltip} {
      & when (@form-tooltip-position = left) {
        left: 0 !important;
      }
      & when (@form-tooltip-position = right) {
        right: 0 !important;
      }
    }
  }
}

.@{control}, [class*="@{cell}"], .@{control-group} {
  &.@{input-inverse} {
    input, select, textarea {
      background-color: @input-border-color;
      border-color: @input-background-color;
      color: @input-background-color;
    }
  }
  &.@{input-transparent} {
    input, select, textarea {
      background-color: transparent;
    }
  }
  &[class*="@{icon}-"] {
    position: relative;
    &.@{icon-left} {
      &:before {
        left: calc((@input-icon-font-size/2) ~"+" @input-default-padding-horizontal);
        right: auto;
      }
      input , select, textarea {
        padding-left:calc(( @input-icon-font-size*2) ~"+" @input-default-padding-horizontal);
      }
    }
    &.@{input-inverse} {
      &:before {
        color: @input-background-color;
      }
    }
    &:before {
      position: absolute;
      top: 0;
      bottom: 0;
      margin: auto;
      font-size: @input-icon-font-size;
      right: calc((@input-icon-font-size/2) ~"+" @input-default-padding-horizontal);
      color: @input-icon-text-color;
      z-index: 2;
      pointer-events: none;
      height: 1em;
    }
    input , select, textarea {
      padding-right:calc((@input-icon-font-size*2) ~"+" @input-default-padding-horizontal);
    }
    select {
      appearance: none;
    }
  }
  &.@{select-arrow} {
    position: relative;
    select {
      appearance: none;
      padding-right:calc((@input-icon-font-size*2) ~"+" @input-default-padding-horizontal);
      &.@{input-inverse} {
        + span:after {
          color: @input-background-color;
        }
      }
      + span:after {
        .select-arrow;
        right: calc((@input-default-font-size/1.2) ~"+" @input-default-padding-horizontal);
      }
      &:focus {
        + span:after {
          content: @select-arrow-icon-up;
          color: @input-focus-border-color;
        }
      }
      &:hover {
        + span:after {
          color: @input-hover-border-color;
        }
      }
    }
    &.@{input-inverse} {
      select {
        + span:after {
          color: @input-background-color;
        }
      }
    }
  }
  &[data-addon] {
    position: relative;
    &.@{addon-left} {
      &:after {
        left: calc((@input-icon-font-size/2) ~"+" @input-default-padding-horizontal);
        right: auto;
        text-align: left;
      }
      input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]), select, textarea {
        padding-left: @input-icon-font-size*3 + @input-default-padding-horizontal;
        padding-right: @input-default-padding-horizontal;
      }
    }
    &.@{input-inverse} {
      &:after {
        color: @input-background-color;
      }
    }
    &:after {
      position: absolute;
      top: 0;
      bottom: 0;
      margin: auto;
      font-size: @input-addon-font-size;
      text-transform: @input-addon-font-weight;
      right: calc((@input-icon-font-size/2) ~"+" @input-default-padding-horizontal);
      color: @input-addon-text-color;
      text-transform: @input-addon-text-transform;
      z-index: 2;
      content: attr(data-addon);
      pointer-events: none;
      height: @input-default-line-height;
      white-space: nowrap;
      text-align: right;
    }
    input, select, textarea {
      padding-right: calc(@input-icon-font-size*3 ~"+" @input-default-padding-horizontal);
    }
  }
}

@{form}, .@{control}, [class*="@{cell}"], .@{control-group} {
  .for(@form-states); .-each(@name) {
    &.@{name} {
      & {
        & when (@form-state-change-text-color = true) {
          &.@{input-inverse}.@{input-transparent} {
             &[class*="@{icon}-"]:before, &[data-addon]:after, &.@{select-arrow} select + span:after {
              color: ~"@{input-color-@{name}}";
            }
          }
        }
        &, &.@{input-inverse}.@{input-transparent} {
          input {
            &:not([type="checkbox"]):not([type="radio"]):not([type="submit"]) {
              & when (@form-state-change-text-color = true) {
                color: ~"@{input-color-@{name}}";
              }
              & when (@form-state-change-background = true) {
                background-color: ~"@{input-background-@{name}}";
              }
              & when (@form-state-change-border = true) {
                border-color: ~"@{input-border-@{name}}";
              }
            }
          }
          select, textarea, output, data-list, .@{input} {
            & when (@form-state-change-text-color = true) {
              color: ~"@{input-color-@{name}}";
            }
            & when (@form-state-change-background = true) {
              background-color: ~"@{input-background-@{name}}";
              color: ~"@{input-background-contrast-@{name}}";
            }
            & when (@form-state-change-border = true) {
              border-color: ~"@{input-border-@{name}}";
            }
          }
          & when (@form-state-change-label = true) {
            @{label} {
              & when (@form-state-change-text-color = true) {
                color: ~"@{input-color-@{name}}";
              }
            }
          }
          & when (@form-state-change-hint = true) {
            .@{hint} {
              & when (@form-state-change-text-color = true) {
                color: ~"@{input-color-@{name}}";
              }
            }
          }
          & when(@include-core-component-tooltip = true) {
            & when (@form-state-change-tooltip = true) {
              .@{tooltip} {
                background-color: ~"@{input-tooltip-@{name}}";
                color: ~"@{input-tooltip-contrast-@{name}}";
                & when (@form-tooltip-position = left) {
                  .tooltip-bottom(~"@{input-tooltip-@{name}}");
                }
                & when (@form-tooltip-position = center) {
                  .tooltip-bottom-center(~"@{input-tooltip-@{name}}");
                }
                & when (@form-tooltip-position = right) {
                  .tooltip-bottom-right(~"@{input-tooltip-@{name}}");
                }
              }
            }
          }
        }
        &.@{input-inverse} {
          select, textarea, output, data-list, .@{input}, input {
            & when (@form-state-change-background = true) {
              background-color: ~"@{input-border-@{name}}";
            }
            & when (@form-state-change-border = true) {
              border-color: ~"@{input-background-@{name}}";
            }
            & when (@form-state-change-text-color = true) {
              color: ~"@{input-background-@{name}}";
            }
          }
          & when (@form-state-change-text-color = true) {
            &, .@{control}, [class*="@{cell}"], .@{control-group} {
              &[class*="@{icon}-"]:before, &[data-addon]:after, &.@{select-arrow} select + span:after {
                color: ~"@{input-background-@{name}}";
              }
            }
          }
        }
        & when (@form-state-change-text-color = true) {
          &[class*="@{icon}-"]:before, &[data-addon]:after, &.@{select-arrow} select + span:after {
            color: ~"@{input-color-@{name}}";
          }
        }
      }
    }
  }
}

.@{inputs}, .@{size} {
  .for(@input-sizes); .-each(@name) {
    &-@{name} {
      @{label}, .@{select} .@{select-content} > label, .@{select} .@{select-placeholder} {
        font-size: ~"@{input-@{name}-font-size}";
        line-height: ~"@{input-@{name}-line-height}";
        padding-top: ~"@{input-@{name}-padding-vertical}";
        padding-bottom: ~"@{input-@{name}-padding-vertical}";
      }
      @{label}, &.@{control}[class*="@{icon}-"]:before, .@{control}[class*="@{icon}-"]:before, &[data-addon]:after, [data-addon]:after, &.@{select-arrow} select + span:after {
        font-size: ~"@{input-@{name}-font-size}";
      }
    }
  }
}



.@{grid-form} {
  &.@{column}.@{release} {
    height: auto;
  }
  &.@{label}-center, .@{row}.@{label}-center {
    label[class*="@{cell}"], .@{label}[class*="@{cell}"] {
      .align-self(center);
    }
  }
  &.@{label}-right, .@{row}.@{label}-right {
    label[class*="@{cell}"], .@{label}[class*="@{cell}"] {
      .justify-content(flex-end);
    }
  }
  &.@{label}-left, .@{row}.@{label}-left {
    label[class*="@{cell}"], .@{label}[class*="@{cell}"] {
      .justify-content(flex-start);
    }
  }

  &.@{control}-center, .@{row}.@{control}-center {
    .@{control}[class*="@{cell}"] {
      .align-self(center);
    }
  }
  &.@{control}-right, .@{row}.@{control}-right {
    .@{control}[class*="@{cell}"] {
      .justify-content(flex-end);
    }
  }
  &.@{control}-left, .@{row}.@{control}-left {
    .@{control}[class*="@{cell}"] {
      .justify-content(flex-start);
    }
  }

  &.@{hint}-center, .@{row}.@{hint}-center {
    .@{control}[class*="@{cell}"] {
      .align-self(center);
    }
  }
  &.@{hint}-right, .@{row}.@{hint}-right {
    .@{control}[class*="@{cell}"] {
      .justify-content(flex-end);
    }
  }
  &.@{hint}-left, .@{row}.@{hint}-left {
    .@{control}[class*="@{cell}"] {
      .justify-content(flex-start);
    }
  }

  &.@{text-center}, .@{row}.@{text-center} {
    [class*="@{cell}"] {
      &.@{keep-flex} {
        .justify-content(center);
      }
    }
  }
  &.@{text-right}, .@{row}.@{text-right} {
    [class*="@{cell}"] {
      &.@{keep-flex} {
        .justify-content(flex-end);
      }
    }
  }
  &.@{text-left}, .@{row}.@{text-left} {
    [class*="@{cell}"] {
      &.@{keep-flex} {
        .justify-content(flex-start);
      }
    }
  }
  &.@{keep-flex} [class*="@{cell}"] {
    &.@{keep-flex} {
      .display-flex;
      textarea {
        .flex(1 1 100%);
        width: 100% !important;
        max-width: 100%;
        min-width: 100%;
        &[rows="1"] {
          height: calc(1.7em ~" + " (@input-default-padding-vertical * 2 ));
        }
      }
    }
  }
  [class*=" @{cell}"], [class^="@{cell}"] {
    textarea {
      resize: vertical;
      min-height: calc(1.7em ~" + " (@input-default-padding-vertical * 2 ));
    }
    input {
      &:not([type="checkbox"]):not([type="radio"]) {
        width: 100%;
        max-width: 100%;
        min-width: 100%;
        box-sizing: border-box;
      }
    }
    select, textarea, .@{select}, .@{input}, output, datalist, .@{button}.@{button-block} {
      width: 100%;
      max-width: 100%;
      min-width: 100%;
      box-sizing: border-box;
    }
  }
}