mdb-ui-kit/less/_inputs-size.less

//
// Forms - sizing - material - mirrors bootstrap/forms.less with custom sizing
//
// NOTE: this is intentionally kept structurally _identical_ to the bootstrap/forms.less file to make it easier
//        to identify differences in sizing approaches to form inputs.
// --------------------------------------------------

legend {
  margin-bottom: @md-input-line-height-computed;
  font-size: (@md-input-font-size-base * 1.5);
}

// Adjust output element
output {
  padding-top: (@md-input-padding-base-vertical + 1);
  font-size: @md-input-font-size-base;
  line-height: @md-input-line-height-base;
}

.form-control {
  height: @md-input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
  padding: @md-input-padding-base-vertical @md-input-padding-base-horizontal;
  font-size: @md-input-font-size-base;
  line-height: @md-input-line-height-base;
}

// Special styles for iOS temporal inputs
//
// In Mobile Safari, setting `display: block` on temporal inputs causes the
// text within the input to become vertically misaligned. As a workaround, we
// set a pixel line-height that matches the given height of the input, but only
// for Safari. See https://bugs.webkit.org/show_bug.cgi?id=139848
//
// Note that as of 8.3, iOS doesn't support `datetime` or `week`.

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  input[type="date"],
  input[type="time"],
  input[type="datetime-local"],
  input[type="month"] {
    &.form-control {
      line-height: @md-input-height-base;
    }

    &.input-sm,
    .input-group-sm & {
      line-height: @md-input-height-small;
    }

    &.input-lg,
    .input-group-lg & {
      line-height: @md-input-height-large;
    }
  }
}

.radio,
.checkbox {

  label {
    min-height: @md-input-line-height-computed; // Ensure the input doesn't jump when there is no text
  }
}


// Static form control text
//
// Apply class to a `p` element to make any string of text align with labels in
// a horizontal form layout.

.form-control-static {
  // Size it appropriately next to real form controls
  padding-top: (@md-input-padding-base-vertical + 1);
  padding-bottom: (@md-input-padding-base-vertical + 1);
  min-height: (@md-input-line-height-computed + @md-input-font-size-base);
}


// Form control sizing
//
// Relative text size, padding, and border-radii changes for form controls. For
// horizontal sizing, wrap controls in the predefined grid classes. `<select>`
// element gets special love because it's special, and that's a fact!

// mixin pulled from bootstrap and altered for less/sass compatibility
.input-size(@parent, @input-height, @padding-vertical, @padding-horizontal, @font-size, @line-height, @border-radius) {

  @{parent} {
    height: @input-height;
    padding: @padding-vertical @padding-horizontal;
    font-size: @font-size;
    line-height: @line-height;
    border-radius: @border-radius;
  }

  select@{parent} {
    height: @input-height;
    line-height: @input-height;
  }

  textarea@{parent},
  select[multiple]@{parent} {
    height: auto;
  }
}



// Form control sizing
//
// Build on `.form-control` with modifier classes to decrease or increase the
// height and font-size of form controls.
//
// The `.form-group-* form-control` variations are sadly duplicated to avoid the
// issue documented in https://github.com/twbs/bootstrap/issues/15074.
.input-sm {
  .input-size('.input-sm', @md-input-height-small, @md-input-padding-small-vertical, @md-input-padding-small-horizontal, @md-input-font-size-small, @md-input-line-height-small, @md-input-border-radius-small);
}
.form-group-sm {
  .form-control {
    height: @md-input-height-small;
    padding: @md-input-padding-small-vertical @md-input-padding-small-horizontal;
    font-size: @md-input-font-size-small;
    line-height: @md-input-line-height-small;
  }
  select.form-control {
    height: @md-input-height-small;
    line-height: @md-input-height-small;
  }
  textarea.form-control,
  select[multiple].form-control {
    height: auto;
  }
  .form-control-static {
    height: @md-input-height-small;
    min-height: (@md-input-line-height-computed + @md-input-font-size-small);
    padding: (@md-input-padding-small-vertical + 1) @md-input-padding-small-horizontal;
    font-size: @md-input-font-size-small;
    line-height: @md-input-line-height-small;
  }
}

.input-lg {
  .input-size('.input-lg', @md-input-height-large, @md-input-padding-large-vertical, @md-input-padding-large-horizontal, @md-input-font-size-large, @md-input-line-height-large, @md-input-border-radius-large);
}
.form-group-lg {
  .form-control {
    height: @md-input-height-large;
    padding: @md-input-padding-large-vertical @md-input-padding-large-horizontal;
    font-size: @md-input-font-size-large;
    line-height: @md-input-line-height-large;
  }
  select.form-control {
    height: @md-input-height-large;
    line-height: @md-input-height-large;
  }
  textarea.form-control,
  select[multiple].form-control {
    height: auto;
  }
  .form-control-static {
    height: @md-input-height-large;
    min-height: (@md-input-line-height-computed + @md-input-font-size-large);
    padding: (@md-input-padding-large-vertical + 1) @md-input-padding-large-horizontal;
    font-size: @md-input-font-size-large;
    line-height: @md-input-line-height-large;
  }
}


.form-horizontal {

  // Consistent vertical alignment of radios and checkboxes
  //
  // Labels also get some reset styles, but that is scoped to a media query below.
  .radio,
  .checkbox,
  .radio-inline,
  .checkbox-inline {
    padding-top: (@md-input-padding-base-vertical + 1); // Default padding plus a border
  }
  // Account for padding we're adding to ensure the alignment and of help text
  // and other content below items
  .radio,
  .checkbox {
    min-height: (@md-input-line-height-computed + (@md-input-padding-base-vertical + 1));
  }

  // Reset spacing and right align labels, but scope to media queries so that
  // labels on narrow viewports stack the same as a default form example.
  @media (min-width: @screen-sm-min) {
    .control-label {
      padding-top: (@md-input-padding-base-vertical + 1); // Default padding plus a border
    }
  }


  // Form group sizes
  //
  // Quick utility class for applying `.input-lg` and `.input-sm` styles to the
  // inputs and labels within a `.form-group`.
  .form-group-lg {
    @media (min-width: @screen-sm-min) {
      .control-label {
        padding-top: ((@md-input-padding-large-vertical * @md-input-line-height-large) + 1);
        font-size: @md-input-font-size-large;
      }
    }
  }
  .form-group-sm {
    @media (min-width: @screen-sm-min) {
      .control-label {
        padding-top: (@md-input-padding-small-vertical + 1);
        font-size: @md-input-font-size-small;
      }
    }
  }
}