mdb-ui-kit/sass/_inputs-size.scss

221 lines
6.8 KiB
SCSS
Raw Normal View History

// This file has been autogenerated by grunt task lessToSass. Any changes will be overwritten.
//
// 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
@mixin 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 {
@include 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 {
@include 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;
}
}
}
}