diff options
Diffstat (limited to 'templates/assets/sass/material-kit/_inputs-size.scss')
| -rwxr-xr-x | templates/assets/sass/material-kit/_inputs-size.scss | 223 |
1 files changed, 223 insertions, 0 deletions
diff --git a/templates/assets/sass/material-kit/_inputs-size.scss b/templates/assets/sass/material-kit/_inputs-size.scss new file mode 100755 index 0000000..c86338c --- /dev/null +++ b/templates/assets/sass/material-kit/_inputs-size.scss @@ -0,0 +1,223 @@ +// 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; + } + } + } +} |