responsivewebframework/src/less/text-box.less

Jalasoft Foundation Front End Framework ========================================

// Text box

.baseInputConfig {
  padding: @text-box-padding;
  border: @text-box-border;
  position: @text-box-position;
  outline: @text-box-outline;
  margin: @text-box-margin;
  height: @text-box-height;
  width: @text-box-width;
  font-family: @font-family-Regular;
  font-size: @text-box-base-font-size;
}

input[type="text"].textbox,
input[type="text"].textbox-x1,
input[type="text"].textbox-x2,
input[type="text"].textbox-x3,
input[type="text"].textbox-x4,
input[type="text"].textbox-x5,
input[type="text"].textbox-x6 {
  .baseInputConfig;
  border-color: @text-box-placeholder-color;
  color: @text-box-text-color;

  &:disabled {
    background-color: @text-box-disabled-background-color;
    opacity: 0.5;
  }

  &::-webkit-input-placeholder {
    font-style: @text-box-placeholder-style;
  }

  &:focus::-webkit-input-placeholder {
    -webkit-transition: @text-box-placeholder-transition;
    opacity: @tex-box-placeholder-opacity;
  }

  &::-moz-placeholder {
    font-style: @text-box-placeholder-style;
  }

  &:focus::-moz-placeholder {
    -moz-transition: @text-box-placeholder-transition;
    opacity: @tex-box-placeholder-opacity;
  }
}

//To increase size of text  box

input[type="text"].textbox-x1 {
  width: @text-box-width + (1 * @text-box-increasing-rate);
}

input[type="text"].textbox-x2 {
  width: @text-box-width + (2 * @text-box-increasing-rate);
}

input[type="text"].textbox-x3 {
  width: @text-box-width + (3 * @text-box-increasing-rate);
}

input[type="text"].textbox-x4 {
  width: @text-box-width + (4 * @text-box-increasing-rate);
}

input[type="text"].textbox-x5 {
  width: @text-box-width + (5 * @text-box-increasing-rate);
}

input[type="text"].textbox-x6 {
  width: 100%
}