mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-11 12:17:59 +03:00
219 lines
6.7 KiB
SCSS
219 lines
6.7 KiB
SCSS
// 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 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;
|
|
}
|
|
}
|
|
}
|
|
}
|