mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-15 06:08:57 +03:00
222 lines
6.9 KiB
Plaintext
222 lines
6.9 KiB
Plaintext
//
|
|
// 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.
|
|
.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 {
|
|
.input-size(~".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 {
|
|
.input-size(~".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;
|
|
}
|
|
}
|
|
}
|
|
}
|