Skip to content

Commit 8c78d8a

Browse files
author
FezVrasta
committed
tweaks on inputs
1 parent 6037ee0 commit 8c78d8a

3 files changed

Lines changed: 53 additions & 48 deletions

File tree

‎css-compiled/material.css‎

Lines changed: 37 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1192,6 +1192,13 @@ h6,
11921192
.form-control:focus:disabled {
11931193
border-style: dashed;
11941194
}
1195+
select.form-control {
1196+
height: 23px;
1197+
}
1198+
select[multiple].form-control,
1199+
select[multiple].form-control:focus {
1200+
height: 85px;
1201+
}
11951202
.form-control-wrapper {
11961203
position: relative;
11971204
/* active state */
@@ -1204,16 +1211,11 @@ h6,
12041211
font-size: 14px;
12051212
position: absolute;
12061213
pointer-events: none;
1207-
left: 12px;
1208-
top: 7px;
1214+
left: 0px;
1215+
top: 5px;
12091216
transition: 0.2s ease all;
12101217
opacity: 0;
12111218
}
1212-
.form-control-wrapper .form-control:focus ~ .floating-label {
1213-
top: -10px;
1214-
font-size: 10px;
1215-
color: #5264ae;
1216-
}
12171219
.form-control-wrapper .form-control:not(.empty) ~ .floating-label {
12181220
top: -10px;
12191221
font-size: 10px;
@@ -1286,31 +1288,31 @@ h6,
12861288
background: #ff5722;
12871289
}
12881290
.form-group.has-warning .control-label,
1289-
.form-group.has-warning input.form-control:focus ~ .floating-label {
1291+
.form-group.has-warning input.form-control:not(.empty) ~ .floating-label {
12901292
color: #ff5722;
12911293
}
12921294
.form-group.has-error .material-input:before,
12931295
.form-group.has-error input.form-control:focus ~ .material-input:after {
12941296
background: #f44336;
12951297
}
12961298
.form-group.has-error .control-label,
1297-
.form-group.has-error input.form-control:focus ~ .floating-label {
1299+
.form-group.has-error input.form-control:not(.empty) ~ .floating-label {
12981300
color: #f44336;
12991301
}
13001302
.form-group.has-success .material-input:before,
13011303
.form-group.has-success input.form-control:focus ~ .material-input:after {
13021304
background: #0f9d58;
13031305
}
13041306
.form-group.has-success .control-label,
1305-
.form-group.has-success input.form-control:focus ~ .floating-label {
1307+
.form-group.has-success input.form-control:not(.empty) ~ .floating-label {
13061308
color: #0f9d58;
13071309
}
13081310
.form-group.has-info .material-input:before,
13091311
.form-group.has-info input.form-control:focus ~ .material-input:after {
13101312
background: #03a9f4;
13111313
}
13121314
.form-group.has-info .control-label,
1313-
.form-group.has-info input.form-control:focus ~ .floating-label {
1315+
.form-group.has-info input.form-control:not(.empty) ~ .floating-label {
13141316
color: #03a9f4;
13151317
}
13161318
.form-group .material-input:before,
@@ -1523,74 +1525,74 @@ h6,
15231525
.form-group-material-lightgrey .control-label {
15241526
color: #ececec;
15251527
}
1526-
.form-group input.form-control:focus ~ .floating-label,
1527-
.form-group-default input.form-control:focus ~ .floating-label {
1528+
.form-group input.form-control:not(.empty) ~ .floating-label,
1529+
.form-group-default input.form-control:not(.empty) ~ .floating-label {
15281530
color: #3f51b5;
15291531
}
1530-
.form-group-primary input.form-control:focus ~ .floating-label {
1532+
.form-group-primary input.form-control:not(.empty) ~ .floating-label {
15311533
color: #4285f4;
15321534
}
1533-
.form-group-success input.form-control:focus ~ .floating-label {
1535+
.form-group-success input.form-control:not(.empty) ~ .floating-label {
15341536
color: #0f9d58;
15351537
}
1536-
.form-group-info input.form-control:focus ~ .floating-label {
1538+
.form-group-info input.form-control:not(.empty) ~ .floating-label {
15371539
color: #03a9f4;
15381540
}
1539-
.form-group-warning input.form-control:focus ~ .floating-label {
1541+
.form-group-warning input.form-control:not(.empty) ~ .floating-label {
15401542
color: #ff5722;
15411543
}
1542-
.form-group-danger input.form-control:focus ~ .floating-label {
1544+
.form-group-danger input.form-control:not(.empty) ~ .floating-label {
15431545
color: #f44336;
15441546
}
1545-
.form-group-material-red input.form-control:focus ~ .floating-label {
1547+
.form-group-material-red input.form-control:not(.empty) ~ .floating-label {
15461548
color: #f44336;
15471549
}
1548-
.form-group-material-pink input.form-control:focus ~ .floating-label {
1550+
.form-group-material-pink input.form-control:not(.empty) ~ .floating-label {
15491551
color: #e91e63;
15501552
}
1551-
.form-group-material-purple input.form-control:focus ~ .floating-label {
1553+
.form-group-material-purple input.form-control:not(.empty) ~ .floating-label {
15521554
color: #9c27b0;
15531555
}
1554-
.form-group-material-deeppurple input.form-control:focus ~ .floating-label {
1556+
.form-group-material-deeppurple input.form-control:not(.empty) ~ .floating-label {
15551557
color: #673ab7;
15561558
}
1557-
.form-group-material-indigo input.form-control:focus ~ .floating-label {
1559+
.form-group-material-indigo input.form-control:not(.empty) ~ .floating-label {
15581560
color: #3f51b5;
15591561
}
1560-
.form-group-material-lightblue input.form-control:focus ~ .floating-label {
1562+
.form-group-material-lightblue input.form-control:not(.empty) ~ .floating-label {
15611563
color: #03a9f4;
15621564
}
1563-
.form-group-material-cyan input.form-control:focus ~ .floating-label {
1565+
.form-group-material-cyan input.form-control:not(.empty) ~ .floating-label {
15641566
color: #00bcd4;
15651567
}
1566-
.form-group-material-teal input.form-control:focus ~ .floating-label {
1568+
.form-group-material-teal input.form-control:not(.empty) ~ .floating-label {
15671569
color: #009688;
15681570
}
1569-
.form-group-material-lightgreen input.form-control:focus ~ .floating-label {
1571+
.form-group-material-lightgreen input.form-control:not(.empty) ~ .floating-label {
15701572
color: #8bc34a;
15711573
}
1572-
.form-group-material-lime input.form-control:focus ~ .floating-label {
1574+
.form-group-material-lime input.form-control:not(.empty) ~ .floating-label {
15731575
color: #cddc39;
15741576
}
1575-
.form-group-material-lightyellow input.form-control:focus ~ .floating-label {
1577+
.form-group-material-lightyellow input.form-control:not(.empty) ~ .floating-label {
15761578
color: #ffeb3b;
15771579
}
1578-
.form-group-material-orange input.form-control:focus ~ .floating-label {
1580+
.form-group-material-orange input.form-control:not(.empty) ~ .floating-label {
15791581
color: #ff9800;
15801582
}
1581-
.form-group-material-deeporange input.form-control:focus ~ .floating-label {
1583+
.form-group-material-deeporange input.form-control:not(.empty) ~ .floating-label {
15821584
color: #ff5722;
15831585
}
1584-
.form-group-material-grey input.form-control:focus ~ .floating-label {
1586+
.form-group-material-grey input.form-control:not(.empty) ~ .floating-label {
15851587
color: #9e9e9e;
15861588
}
1587-
.form-group-material-bluegrey input.form-control:focus ~ .floating-label {
1589+
.form-group-material-bluegrey input.form-control:not(.empty) ~ .floating-label {
15881590
color: #607d8b;
15891591
}
1590-
.form-group-material-brown input.form-control:focus ~ .floating-label {
1592+
.form-group-material-brown input.form-control:not(.empty) ~ .floating-label {
15911593
color: #795548;
15921594
}
1593-
.form-group-material-lightgrey input.form-control:focus ~ .floating-label {
1595+
.form-group-material-lightgrey input.form-control:not(.empty) ~ .floating-label {
15941596
color: #ececec;
15951597
}
15961598
.input-group .form-control-wrapper {

‎less/inputs.less‎

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,14 @@
1515
}
1616
}
1717
}
18+
select.form-control {
19+
height: 23px;
20+
}
21+
select[multiple].form-control {
22+
&, &:focus {
23+
height: 85px;
24+
}
25+
}
1826

1927
.form-control-wrapper {
2028
position: relative;
@@ -28,16 +36,11 @@
2836
font-size: 14px;
2937
position: absolute;
3038
pointer-events: none;
31-
left: 12px;
32-
top: 7px;
39+
left: 0px;
40+
top: 5px;
3341
transition: 0.2s ease all;
3442
opacity: 0;
3543
}
36-
.form-control:focus ~ .floating-label {
37-
top: -10px;
38-
font-size: 10px;
39-
color: @input-default;
40-
}
4144
.form-control:not(.empty) ~ .floating-label {
4245
top: -10px;
4346
font-size: 10px;
@@ -115,38 +118,38 @@
115118
.material-input:before, input.form-control:focus ~ .material-input:after {
116119
background: @input-warning;
117120
}
118-
.control-label, input.form-control:focus ~ .floating-label {
121+
.control-label, input.form-control:not(.empty) ~ .floating-label {
119122
color: @input-warning;
120123
}
121124
}
122125
&.has-error {
123126
.material-input:before, input.form-control:focus ~ .material-input:after {
124127
background: @input-danger;
125128
}
126-
.control-label, input.form-control:focus ~ .floating-label {
129+
.control-label, input.form-control:not(.empty) ~ .floating-label {
127130
color: @input-danger;
128131
}
129132
}
130133
&.has-success {
131134
.material-input:before, input.form-control:focus ~ .material-input:after {
132135
background: @input-success;
133136
}
134-
.control-label, input.form-control:focus ~ .floating-label {
137+
.control-label, input.form-control:not(.empty) ~ .floating-label {
135138
color: @input-success;
136139
}
137140
}
138141
&.has-info {
139142
.material-input:before, input.form-control:focus ~ .material-input:after {
140143
background: @input-info;
141144
}
142-
.control-label, input.form-control:focus ~ .floating-label {
145+
.control-label, input.form-control:not(.empty) ~ .floating-label {
143146
color: @input-info;
144147
}
145148
}
146149
.variations(~" .material-input:before", background-color, @indigo);
147150
.variations(~" input.form-control:focus ~ .material-input:after", background-color, @indigo);
148151
.variations(~" .control-label", color, @lightbg-text);
149-
.variations(~" input.form-control:focus ~ .floating-label", color, @indigo);
152+
.variations(~" input.form-control:not(.empty) ~ .floating-label", color, @indigo);
150153

151154
}
152155

‎scripts/material.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ $(function (){
2424
}
2525
});
2626

27-
$(document).on("change", ".form-control", function() {
27+
$(document).on("keyup", ".form-control", function() {
2828
if ($(this).val() !== "") {
2929
$(this).removeClass("empty");
3030
} else {

0 commit comments

Comments
 (0)