mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-11-10 19:57:13 +03:00
stable default text input size variant
This commit is contained in:
parent
19ae3fd074
commit
0a489cf35d
|
@ -1,3 +1,8 @@
|
|||
form {
|
||||
// ensure enough room at the bottom of any form to display a one-line mdb-help
|
||||
margin-bottom: ($mdb-help-size-ratio * $font-size-base) * $line-height;
|
||||
}
|
||||
|
||||
// -----
|
||||
// Inputs
|
||||
//
|
||||
|
@ -115,17 +120,17 @@
|
|||
}
|
||||
|
||||
// default floating size/location with an mdb-form-group
|
||||
@include mdb-form-size-variant($font-size-base, $mdb-label-top-margin-base, $input-padding-y, $mdb-form-line-height, $mdb-label-as-placeholder-shim-base, "mdb-form-group default");
|
||||
@include mdb-form-size-variant($font-size-base, $mdb-label-top-margin-base, $input-padding-y, $mdb-form-line-height, "mdb-form-group default");
|
||||
|
||||
// sm floating size/location
|
||||
//&.mdb-form-group-sm {
|
||||
// @include mdb-form-size-variant($font-size-sm, $mdb-label-top-margin-sm, $mdb-input-padding-y-sm, $mdb-form-line-height-sm, $mdb-label-as-placeholder-shim-sm, "mdb-form-group sm");
|
||||
//}
|
||||
//
|
||||
//// lg floating size/location
|
||||
//&.mdb-form-group-lg {
|
||||
// @include mdb-form-size-variant($font-size-lg, $mdb-label-top-margin-lg, $mdb-input-padding-y-lg, $mdb-form-line-height-sm, $mdb-label-as-placeholder-shim-lg, "mdb-form-group lg");
|
||||
//}
|
||||
&.mdb-form-group-sm {
|
||||
@include mdb-form-size-variant($font-size-sm, $mdb-label-top-margin-sm, $input-padding-y-sm, $mdb-form-line-height-sm, "mdb-form-group sm");
|
||||
}
|
||||
|
||||
// lg floating size/location
|
||||
&.mdb-form-group-lg {
|
||||
@include mdb-form-size-variant($font-size-lg, $mdb-label-top-margin-lg, $input-padding-y-lg, $mdb-form-line-height-sm, "mdb-form-group lg");
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
@ -15,6 +15,7 @@ $mdb-label-color-inner-focus: $gray !default; // e.g. radio label or text-muted
|
|||
//---
|
||||
// Customized BS variables
|
||||
$enable-flex: true;
|
||||
@import "variables/bootstrap/spacing";
|
||||
@import "variables/bootstrap/body";
|
||||
@import "variables/bootstrap/brand";
|
||||
@import "variables/bootstrap/buttons";
|
||||
|
@ -57,16 +58,12 @@ $mdb-help-size-ratio: 75 / 100 !default;
|
|||
////## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
|
||||
|
||||
$mdb-form-line-height: 1 !default; // set as 1x font-size so that paddings are easier calculated to match the spec.
|
||||
|
||||
$mdb-label-as-placeholder-shim-base: 0 !default; // manual adjustment of label top when positioned as placeholder
|
||||
$mdb-label-top-margin-base: 1rem !default;
|
||||
//
|
||||
$mdb-form-line-height-lg: 1 !default; // set as 1x font-size so that paddings are easier calculated to match the spec.
|
||||
$mdb-label-as-placeholder-shim-lg: 0 !default; // -4px // manual adjustment of label top when positioned as placeholder
|
||||
$mdb-label-top-margin-lg: 1rem !default; // 16px
|
||||
//
|
||||
$mdb-form-line-height-sm: 1 !default; // set as 1x font-size so that paddings are easier calculated to match the spec.
|
||||
$mdb-label-as-placeholder-shim-sm: 0 !default; // 8px // manual adjustment of label top when positioned as placeholder
|
||||
$mdb-label-top-margin-sm: .75rem !default; // 12px
|
||||
|
||||
// Card
|
||||
|
|
|
@ -40,7 +40,7 @@
|
|||
.mdb-form-control-decorator {
|
||||
&::before,
|
||||
&::after {
|
||||
//@include gradient-vertical($label-color-focus, $input-border-color);
|
||||
//@include gradient-vertical($label-color-focus, $input-border-color); // seems to look better solid. other comments?
|
||||
background-color: $label-color-focus;
|
||||
}
|
||||
}
|
||||
|
@ -59,7 +59,7 @@
|
|||
font-size: $static-font-size;
|
||||
}
|
||||
|
||||
@mixin mdb-form-size-variant($font-size, $label-top-margin, $variant-padding-y, $variant-line-height, $label-as-placeholder-shim, $form-group-context: null) {
|
||||
@mixin mdb-form-size-variant($font-size, $label-top-margin, $variant-padding-y, $variant-line-height, $form-group-context: null) {
|
||||
$static-font-size: ($mdb-mdb-label-static-size-ratio * $font-size);
|
||||
$help-font-size: ($mdb-help-size-ratio * $font-size);
|
||||
|
||||
|
@ -75,33 +75,23 @@
|
|||
//Padding below text divider: 8dp
|
||||
|
||||
@if $form-group-context {
|
||||
|
||||
// Create a space at the top of the mdb-form-group for the label.
|
||||
// The label is absolutely positioned, so we use top padding to make space. This padding extends down to the top of the input (padding).
|
||||
// The label is absolutely positioned, so we use top padding to make space. This padding extends over the label down to the top of the input (padding).
|
||||
padding-top: ($label-top-margin + $static-font-size);
|
||||
// note: bottom-margin of this is determined by $spacer. @see _spacer.scss
|
||||
}
|
||||
|
||||
// Set all line-heights preferably to 1 so that we can space out everything manually without additional added space
|
||||
// from the default line-height of 1.5
|
||||
.form-control,
|
||||
label,
|
||||
.mdb-help,
|
||||
input::placeholder {
|
||||
line-height: $variant-line-height;
|
||||
}
|
||||
|
||||
// this may be inside or outside a form-group, may be .mdb-form-group.mdb-form-group-sm or .mdb-form-group.mdb-form-group-lg
|
||||
//@include label-size-variant($font-size, $vertical-padding, $variant-line-height, $static-font-size, $static-line-height, $help-font-size);
|
||||
.form-control {
|
||||
//
|
||||
// // margin-bottom must be specified to give help-block vertical space.
|
||||
// // $see also form-group padding-bottom (and size variants) re: collapsible margins. These work together.
|
||||
// margin-bottom: $vertical-padding;
|
||||
}
|
||||
|
||||
// Note: this may be inside or outside a form-group, may be .mdb-form-group.mdb-form-group-sm or .mdb-form-group.mdb-form-group-lg
|
||||
input::placeholder {
|
||||
font-size: $font-size;
|
||||
//line-height: $variant-line-height;
|
||||
}
|
||||
|
||||
// generic labels used anywhere in the form
|
||||
|
@ -111,19 +101,11 @@
|
|||
font-size: $font-size;
|
||||
}
|
||||
|
||||
// smaller focused or static size
|
||||
//[class^='mdb-label'],
|
||||
//[class*=' mdb-label'] {
|
||||
// //font-size: $static-font-size;
|
||||
// //margin: 16px 0 0 0; // std and lg
|
||||
//}
|
||||
|
||||
// floating/placeholder default (no focus)
|
||||
.mdb-label-floating,
|
||||
.mdb-label-placeholder {
|
||||
//@debug "top: #{$label-as-placeholder-top}";
|
||||
top: $label-placeholder-top; // place the floating label to look like a placeholder with input padding
|
||||
//font-size: $placeholder-font-size;
|
||||
}
|
||||
|
||||
// floating focused/filled will look like static
|
||||
|
|
|
@ -24,10 +24,10 @@ $input-padding-x: 0 !default; // .75rem !default;
|
|||
$input-padding-y: .4375rem !default; // spec 8px // .375rem !default;
|
||||
|
||||
$input-padding-x-sm: 0 !default; // .75rem !default;
|
||||
$input-padding-y-sm: .1875 !default; // 3px //.275rem !default;
|
||||
$input-padding-y-sm: .25rem !default; // spec 4px //.275rem !default;
|
||||
|
||||
$input-padding-x-lg: 0 !default; // 1.25rem !default;
|
||||
$input-padding-y-lg: .5625rem !default; // 9px // .75rem !default;
|
||||
$input-padding-y-lg: .5625rem !default; // no-spec 9px // .75rem !default;
|
||||
|
||||
//$input-height: (($font-size-base * $line-height) + ($input-padding-y * 2)) !default;
|
||||
//$input-height-lg: (($font-size-lg * $line-height-lg) + ($input-padding-y-lg * 2)) !default;
|
||||
|
|
26
scss/variables/bootstrap/_spacing.scss
Normal file
26
scss/variables/bootstrap/_spacing.scss
Normal file
|
@ -0,0 +1,26 @@
|
|||
// Spacing
|
||||
//
|
||||
// Control the default styling of most Bootstrap elements by modifying these
|
||||
// variables. Mostly focused on spacing.
|
||||
|
||||
$spacer: .5rem !default; // 1rem !default; // $form-group-margin-bottom uses $spacer-y. Decided to try this globally and see how it works out.
|
||||
//$spacer-x: $spacer !default;
|
||||
//$spacer-y: $spacer !default;
|
||||
//$spacers: (
|
||||
// 0: (
|
||||
// x: 0,
|
||||
// y: 0
|
||||
// ),
|
||||
// 1: (
|
||||
// x: $spacer-x,
|
||||
// y: $spacer-y
|
||||
// ),
|
||||
// 2: (
|
||||
// x: ($spacer-x * 1.5),
|
||||
// y: ($spacer-y * 1.5)
|
||||
// ),
|
||||
// 3: (
|
||||
// x: ($spacer-x * 3),
|
||||
// y: ($spacer-y * 3)
|
||||
// )
|
||||
//) !default;
|
Loading…
Reference in New Issue
Block a user