This commit is contained in:
FezVrasta 2015-03-18 15:29:57 +01:00
parent b4f40e2fb6
commit dc15824fdd
10 changed files with 112 additions and 56 deletions

View File

@ -35463,13 +35463,10 @@ body .jumbotron-material-blue-grey-A700,
}
}
fieldset[disabled] .form-control,
.form-control-wrapper .form-control,
.form-control,
fieldset[disabled] .form-control:focus,
.form-control-wrapper .form-control:focus,
.form-control:focus,
fieldset[disabled] .form-control.focus,
.form-control-wrapper .form-control.focus,
.form-control.focus {
padding: 0;
float: none;
@ -35477,29 +35474,19 @@ fieldset[disabled] .form-control.focus,
box-shadow: none;
border-radius: 0;
}
fieldset[disabled] .form-control:not(textarea),
.form-control-wrapper .form-control:not(textarea),
.form-control:not(textarea),
fieldset[disabled] .form-control:focus:not(textarea),
.form-control-wrapper .form-control:focus:not(textarea),
.form-control:focus:not(textarea),
fieldset[disabled] .form-control.focus:not(textarea),
.form-control-wrapper .form-control.focus:not(textarea),
.form-control.focus:not(textarea) {
height: 28px;
}
fieldset[disabled] .form-control:disabled,
.form-control-wrapper .form-control:disabled,
.form-control:disabled,
fieldset[disabled] .form-control:focus:disabled,
.form-control-wrapper .form-control:focus:disabled,
.form-control:focus:disabled,
fieldset[disabled] .form-control.focus:disabled,
.form-control-wrapper .form-control.focus:disabled,
.form-control.focus:disabled {
border-style: dashed;
border-bottom: 1px solid #757575;
}
fieldset[disabled] .form-control:textarea,
.form-control:textarea {
height: 40px;
}
select[multiple].form-control,
select[multiple].form-control:focus,
select[multiple].form-control.focus {
@ -35554,7 +35541,6 @@ fieldset[disabled] .form-control.focus:disabled,
}
.form-control-wrapper .floating-label {
color: #bdbdbd;
font-size: 14px;
position: absolute;
pointer-events: none;
left: 0px;
@ -35562,11 +35548,35 @@ fieldset[disabled] .form-control.focus:disabled,
transition: 0.2s ease all;
opacity: 0;
}
.form-control:focus ~ .form-control-wrapper .floating-label,
.form-control:not(.empty) ~ .form-control-wrapper .floating-label {
opacity: 1;
}
.form-control-wrapper .floating-label {
font-size: 14px;
}
.form-control-wrapper .form-control:focus ~ .floating-label,
.form-control-wrapper .form-control:not(.empty) ~ .floating-label {
top: -10px;
font-size: 10px;
opacity: 1;
top: -9.8px;
font-size: 9.8px;
}
.form-control-wrapper .input-sm + .floating-label {
font-size: 12px;
top: 7px;
}
.form-control-wrapper .form-control.input-sm:focus ~ .floating-label,
.form-control-wrapper .form-control.input-sm:not(.empty) ~ .floating-label {
top: -8.4px;
font-size: 8.4px;
}
.form-control-wrapper .input-lg + .floating-label {
font-size: 18px;
top: 10px;
}
.form-control-wrapper .form-control.input-lg:focus ~ .floating-label,
.form-control-wrapper .form-control.input-lg:not(.empty) ~ .floating-label {
top: -12.6px;
font-size: 12.6px;
}
.form-control-wrapper .form-control:focus ~ .floating-label {
color: #009688;

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

52
dist/css/material.css vendored
View File

@ -4852,13 +4852,10 @@ body .jumbotron-material-blue-grey,
}
}
fieldset[disabled] .form-control,
.form-control-wrapper .form-control,
.form-control,
fieldset[disabled] .form-control:focus,
.form-control-wrapper .form-control:focus,
.form-control:focus,
fieldset[disabled] .form-control.focus,
.form-control-wrapper .form-control.focus,
.form-control.focus {
padding: 0;
float: none;
@ -4866,29 +4863,19 @@ fieldset[disabled] .form-control.focus,
box-shadow: none;
border-radius: 0;
}
fieldset[disabled] .form-control:not(textarea),
.form-control-wrapper .form-control:not(textarea),
.form-control:not(textarea),
fieldset[disabled] .form-control:focus:not(textarea),
.form-control-wrapper .form-control:focus:not(textarea),
.form-control:focus:not(textarea),
fieldset[disabled] .form-control.focus:not(textarea),
.form-control-wrapper .form-control.focus:not(textarea),
.form-control.focus:not(textarea) {
height: 28px;
}
fieldset[disabled] .form-control:disabled,
.form-control-wrapper .form-control:disabled,
.form-control:disabled,
fieldset[disabled] .form-control:focus:disabled,
.form-control-wrapper .form-control:focus:disabled,
.form-control:focus:disabled,
fieldset[disabled] .form-control.focus:disabled,
.form-control-wrapper .form-control.focus:disabled,
.form-control.focus:disabled {
border-style: dashed;
border-bottom: 1px solid #757575;
}
fieldset[disabled] .form-control:textarea,
.form-control:textarea {
height: 40px;
}
select[multiple].form-control,
select[multiple].form-control:focus,
select[multiple].form-control.focus {
@ -4943,7 +4930,6 @@ fieldset[disabled] .form-control.focus:disabled,
}
.form-control-wrapper .floating-label {
color: #bdbdbd;
font-size: 14px;
position: absolute;
pointer-events: none;
left: 0px;
@ -4951,11 +4937,35 @@ fieldset[disabled] .form-control.focus:disabled,
transition: 0.2s ease all;
opacity: 0;
}
.form-control:focus ~ .form-control-wrapper .floating-label,
.form-control:not(.empty) ~ .form-control-wrapper .floating-label {
opacity: 1;
}
.form-control-wrapper .floating-label {
font-size: 14px;
}
.form-control-wrapper .form-control:focus ~ .floating-label,
.form-control-wrapper .form-control:not(.empty) ~ .floating-label {
top: -10px;
font-size: 10px;
opacity: 1;
top: -9.8px;
font-size: 9.8px;
}
.form-control-wrapper .input-sm + .floating-label {
font-size: 12px;
top: 7px;
}
.form-control-wrapper .form-control.input-sm:focus ~ .floating-label,
.form-control-wrapper .form-control.input-sm:not(.empty) ~ .floating-label {
top: -8.4px;
font-size: 8.4px;
}
.form-control-wrapper .input-lg + .floating-label {
font-size: 18px;
top: 10px;
}
.form-control-wrapper .form-control.input-lg:focus ~ .floating-label,
.form-control-wrapper .form-control.input-lg:not(.empty) ~ .floating-label {
top: -12.6px;
font-size: 12.6px;
}
.form-control-wrapper .form-control:focus ~ .floating-label {
color: #009688;

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -1,8 +1,5 @@
fieldset[disabled] .form-control, .form-control-wrapper .form-control, .form-control {
fieldset[disabled] .form-control, .form-control {
&, &:focus, &.focus {
&:not(textarea) {
height: 28px;
}
padding: 0;
float: none;
border: 0;
@ -15,6 +12,12 @@ fieldset[disabled] .form-control, .form-control-wrapper .form-control, .form-con
}
}
fieldset[disabled] .form-control, .form-control {
&:textarea {
height: 40px;
}
}
select[multiple].form-control {
&, &:focus, &.focus {
height: 85px;
@ -69,20 +72,48 @@ fieldset[disabled] .form-control.focus:disabled,
.floating-label {
color: @input-placeholder-color;
font-size: 14px;
position: absolute;
pointer-events: none;
left: 0px;
top: 5px;
transition: 0.2s ease all;
opacity: 0;
.form-control:focus ~ &,
.form-control:not(.empty) ~ & {
opacity: 1;
}
}
// Input sizes
.floating-label { // base
font-size: @font-size-base;
}
.form-control:focus ~ .floating-label,
.form-control:not(.empty) ~ .floating-label {
top: -10px;
font-size: 10px;
opacity: 1;
top: @floating-label-size-ratio * -@font-size-base;
font-size: @floating-label-size-ratio * @font-size-base;
}
.input-sm + .floating-label { // small
font-size: @font-size-small;
top: 7px;
}
.form-control.input-sm:focus ~ .floating-label,
.form-control.input-sm:not(.empty) ~.floating-label {
top: @floating-label-size-ratio * -@font-size-small;
font-size: @floating-label-size-ratio * @font-size-small;
}
.input-lg + .floating-label {
font-size: @font-size-large;
top: 10px;
}
.form-control.input-lg:focus ~ .floating-label,
.form-control.input-lg:not(.empty) ~ .floating-label {
top: @floating-label-size-ratio * -@font-size-large;
font-size: @floating-label-size-ratio * @font-size-large;
}
.form-control:focus ~ .floating-label {
color: @primary;
}

View File

@ -67,6 +67,10 @@
@progress-warning: @warning;
@progress-danger: @danger;
@font-size-base: 14px;
@font-size-large: ceil((@font-size-base * 1.25)); // ~18px
@font-size-small: ceil((@font-size-base * 0.85)); // ~12px
// Global Material variables
@material-border-radius: 2px;
@input-underline-color: #D2D2D2;
@ -90,3 +94,4 @@
// Inputs
@input-placeholder-color: #BDBDBD;
@floating-label-size-ratio: 70 / 100;