first comit
This commit is contained in:
223
static/scss/material-bootstrap-wizard/_inputs-size.scss
Normal file
223
static/scss/material-bootstrap-wizard/_inputs-size.scss
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user