--- /dev/null
+// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
+
+//
+// Forms - sizing - material - mirrors bootstrap/forms.less with custom sizing
+//
+// LEAVE THIS IDENTICAL TO THE BOOTSTRAP FILE - DO NOT CUSTOMIZE HERE.
+//
+// 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: $mdb-input-line-height-computed;
+ font-size: ($mdb-input-font-size-base * 1.5);
+}
+
+// Adjust output element
+output {
+ padding-top: ($mdb-input-padding-base-vertical + 1);
+ font-size: $mdb-input-font-size-base;
+ line-height: $mdb-input-line-height-base;
+}
+
+.form-control {
+ height: $mdb-input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border)
+ padding: $mdb-input-padding-base-vertical $mdb-input-padding-base-horizontal;
+ font-size: $mdb-input-font-size-base;
+ line-height: $mdb-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: $mdb-input-height-base;
+ }
+
+ &.input-sm,
+ .input-group-sm & {
+ line-height: $mdb-input-height-small;
+ }
+
+ &.input-lg,
+ .input-group-lg & {
+ line-height: $mdb-input-height-large;
+ }
+ }
+}
+
+.radio,
+.checkbox {
+
+ label {
+ min-height: $mdb-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: ($mdb-input-padding-base-vertical + 1);
+ padding-bottom: ($mdb-input-padding-base-vertical + 1);
+ min-height: ($mdb-input-line-height-computed + $mdb-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 with sass parent hack.
+// bootstrap-sass has this one, but we would have to then convert it back to less. chicken meet egg.
+@mixin input-size($parent, $mdb-input-height, $padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius){
+
+ #{$parent} {
+ height: $mdb-input-height;
+ padding: $padding-vertical $padding-horizontal;
+ font-size: $font-size;
+ line-height: $line-height;
+ border-radius: $border-radius;
+ }
+
+ select#{$parent} {
+ height: $mdb-input-height;
+ line-height: $mdb-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 {
+ @include input-size(unquote(".input-sm"), $mdb-input-height-small, $mdb-input-padding-small-vertical, $mdb-input-padding-small-horizontal, $mdb-input-font-size-small, $mdb-input-line-height-small, $mdb-input-border-radius-small);
+}
+.form-group-sm {
+ .form-control {
+ height: $mdb-input-height-small;
+ padding: $mdb-input-padding-small-vertical $mdb-input-padding-small-horizontal;
+ font-size: $mdb-input-font-size-small;
+ line-height: $mdb-input-line-height-small;
+ }
+ select.form-control {
+ height: $mdb-input-height-small;
+ line-height: $mdb-input-height-small;
+ }
+ textarea.form-control,
+ select[multiple].form-control {
+ height: auto;
+ }
+ .form-control-static {
+ height: $mdb-input-height-small;
+ min-height: ($mdb-input-line-height-computed + $mdb-input-font-size-small);
+ padding: ($mdb-input-padding-small-vertical + 1) $mdb-input-padding-small-horizontal;
+ font-size: $mdb-input-font-size-small;
+ line-height: $mdb-input-line-height-small;
+ }
+}
+
+.input-lg {
+ @include input-size(unquote(".input-lg"), $mdb-input-height-large, $mdb-input-padding-large-vertical, $mdb-input-padding-large-horizontal, $mdb-input-font-size-large, $mdb-input-line-height-large, $mdb-input-border-radius-large);
+}
+.form-group-lg {
+ .form-control {
+ height: $mdb-input-height-large;
+ padding: $mdb-input-padding-large-vertical $mdb-input-padding-large-horizontal;
+ font-size: $mdb-input-font-size-large;
+ line-height: $mdb-input-line-height-large;
+ }
+ select.form-control {
+ height: $mdb-input-height-large;
+ line-height: $mdb-input-height-large;
+ }
+ textarea.form-control,
+ select[multiple].form-control {
+ height: auto;
+ }
+ .form-control-static {
+ height: $mdb-input-height-large;
+ min-height: ($mdb-input-line-height-computed + $mdb-input-font-size-large);
+ padding: ($mdb-input-padding-large-vertical + 1) $mdb-input-padding-large-horizontal;
+ font-size: $mdb-input-font-size-large;
+ line-height: $mdb-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: ($mdb-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: ($mdb-input-line-height-computed + ($mdb-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: ($mdb-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: (($mdb-input-padding-large-vertical * $mdb-input-line-height-large) + 1);
+ font-size: $mdb-input-font-size-large;
+ }
+ }
+ }
+ .form-group-sm {
+ @media (min-width: $screen-sm-min) {
+ .control-label {
+ padding-top: ($mdb-input-padding-small-vertical + 1);
+ font-size: $mdb-input-font-size-small;
+ }
+ }
+ }
+}
projects / bootswatch / blobdiff