mdbootstrap/mdb-ui-kit
1
1
Fork 0
mirror of https://github.com/mdbootstrap/mdb-ui-kit.git synced 2025-11-04 09:57:36 +03:00
Code Issues Packages Projects Releases Wiki Activity

restructured form-control and standardized disabled

Browse Source
This commit is contained in:
Kevin Ross 2015-11-18 12:42:52 -06:00
parent 4b762f5900
commit 9cd457ab0c
2 changed files with 50 additions and 72 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
less/_checkboxes.less
View File

@ -1,3 +1,4 @@
// http://www.google.com/design/spec/components/selection-controls.html#selection-controls-checkbox
.form-horizontal .checkbox { .form-horizontal .checkbox {
padding-top: 20px; padding-top: 20px;
} }

121
less/_inputs.less
View File

@ -1,18 +1,17 @@
@import '_inputs-size.less'; @import '_inputs-size.less';
// Ugly reset of Bootstrap border // Ugly reset of Bootstrap border
fieldset[disabled] .form-control:disabled, //fieldset[disabled] .form-control:disabled,
.form-group .form-control:disabled, //.form-group .form-control:disabled,
.form-control:disabled, //.form-control:disabled,
fieldset[disabled] .form-control:focus:disabled, //fieldset[disabled] .form-control:focus:disabled,
.form-group .form-control:focus:disabled, //.form-group .form-control:focus:disabled,
.form-control:focus:disabled, //.form-control:focus:disabled,
.form-group.is-focused fieldset[disabled] .form-control:disabled, //.form-group.is-focused fieldset[disabled] .form-control:disabled,
.form-group.is-focused .form-group .form-control:disabled, //.form-group.is-focused .form-group .form-control:disabled,
.form-group.is-focused .form-control:disabled { //.form-group.is-focused .form-control:disabled {
border: 0; // border: 0;
} //}
// usage: .form-group-validation-state(@input-danger); // usage: .form-group-validation-state(@input-danger);
.form-group-validation-state(@name, @color) { .form-group-validation-state(@name, @color) {
@ -40,43 +39,44 @@ fieldset[disabled] .form-control:focus:disabled,
background-position: center bottom, center calc(~"100% - 1px"); background-position: center bottom, center calc(~"100% - 1px");
background-color: rgba(0, 0, 0, 0); background-color: rgba(0, 0, 0, 0);
transition: background 0s ease-out; transition: background 0s ease-out;
float: none;
box-shadow: none;
border-radius: 0;
.form-group.is-focused & { // Placeholders and and labels-as-placeholders should look the same
outline: none; .material-placeholder({
background-image: linear-gradient(@primary, @primary), linear-gradient(@input-underline-color, @input-underline-color); color: @input-placeholder-color;
background-size: 100% 2px, 100% 1px; font-weight: normal;
box-shadow: none; });
transition-duration: 0.3s;
.material-input:after {
background-color: @input-default; &:textarea {
} height: 40px;
} }
&,
&[readonly],
&[disabled],
fieldset[disabled] & { fieldset[disabled] & {
background-color: rgba(0, 0, 0, 0);
&:textarea {
height: 40px;
}
&,
.form-group.is-focused & {
float: none;
border: 0;
box-shadow: none;
border-radius: 0;
&:disabled {
background-image: none;
border-bottom: 1px dotted @input-underline-color;
}
}
} }
&[disabled], &[disabled],
&[readonly],
fieldset[disabled] & { fieldset[disabled] & {
background-color: rgba(0, 0, 0, 0); background-image: none;
border-bottom: 1px dotted @input-underline-color;
}
}
&.is-focused .form-control {
outline: none;
background-image: linear-gradient(@primary, @primary), linear-gradient(@input-underline-color, @input-underline-color);
background-size: 100% 2px, 100% 1px;
box-shadow: none;
transition-duration: 0.3s;
.material-input:after {
background-color: @input-default;
} }
} }
} }
@ -143,15 +143,6 @@ fieldset[disabled] .form-control:focus:disabled,
//border: solid 1px red; //border: solid 1px red;
position: relative; position: relative;
// ----
// Placeholders and and floating-labels should look the same
.form-control {
.material-placeholder({
color: @input-placeholder-color;
font-weight: normal;
});
}
// ----- // -----
// Labels // Labels
// //
@ -211,19 +202,6 @@ fieldset[disabled] .form-control:focus:disabled,
} }
} }
// Hints - visibility approach - uses a bit too much vertical space, no jumping on blur, good text wrapping
// May need to generate help-block for those without one for even vertical spacing (not a good thing).
//.help-block {
// visibility: hidden; // reserve the vertical space to avoid jumping inputs on blur
// margin-bottom: 0; // keep vertical space to a minimum
//}
//
//&.is-focused {
// .help-block {
// visibility: visible;
// }
//}
// SASS conversion note: please mirror any content change in _mixins-shared.scss bg-img-variations-content // SASS conversion note: please mirror any content change in _mixins-shared.scss bg-img-variations-content
.generic-variations(~".is-focused .form-control", @primary, { .generic-variations(~".is-focused .form-control", @primary, {
background-image: linear-gradient(@material-color, @material-color), linear-gradient(@input-underline-color, @input-underline-color); background-image: linear-gradient(@material-color, @material-color), linear-gradient(@input-underline-color, @input-underline-color);
@ -236,18 +214,17 @@ fieldset[disabled] .form-control:focus:disabled,
textarea { textarea {
resize: none; resize: none;
} & ~ .form-control-highlight {
textarea ~ .form-control-highlight { margin-top: -11px;
margin-top: -11px; }
} }
select ~ .material-input:after {
display: none;
}
// Fix for OS X
select { select {
appearance: none; appearance: none; // Fix for OS X
& ~ .material-input:after {
display: none;
}
} }
} }
@ -259,7 +236,7 @@ select.form-control {
.form-group.is-focused & { .form-group.is-focused & {
box-shadow: none; box-shadow: none;
border-color: #757575; border-color: @input-underline-color;
} }
&[multiple] { &[multiple] {