Skip to content

Commit f26e7de

Browse files
author
Federico Zivolo
committed
class to let users force focus status
1 parent 4fd7a94 commit f26e7de

4 files changed

Lines changed: 164 additions & 27 deletions

File tree

‎css-compiled/material.css‎

Lines changed: 101 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1176,7 +1176,9 @@ h6,
11761176
.form-control-wrapper .form-control,
11771177
.form-control,
11781178
.form-control-wrapper .form-control:focus,
1179-
.form-control:focus {
1179+
.form-control:focus,
1180+
.form-control-wrapper .form-control.focus,
1181+
.form-control.focus {
11801182
height: 28px;
11811183
padding: 0;
11821184
float: none;
@@ -1189,21 +1191,25 @@ h6,
11891191
.form-control-wrapper .form-control:disabled,
11901192
.form-control:disabled,
11911193
.form-control-wrapper .form-control:focus:disabled,
1192-
.form-control:focus:disabled {
1194+
.form-control:focus:disabled,
1195+
.form-control-wrapper .form-control.focus:disabled,
1196+
.form-control.focus:disabled {
11931197
border-style: dashed;
11941198
}
11951199
select.form-control {
11961200
height: 23px;
11971201
}
11981202
select[multiple].form-control,
1199-
select[multiple].form-control:focus {
1203+
select[multiple].form-control:focus,
1204+
select[multiple].form-control.focus {
12001205
height: 85px;
12011206
}
12021207
.form-control-wrapper {
12031208
position: relative;
12041209
/* active state */
12051210
}
1206-
.form-control-wrapper .form-control:focus {
1211+
.form-control-wrapper .form-control:focus,
1212+
.form-control-wrapper .form-control.focus {
12071213
outline: none;
12081214
}
12091215
.form-control-wrapper .floating-label {
@@ -1221,14 +1227,18 @@ select[multiple].form-control:focus {
12211227
font-size: 10px;
12221228
opacity: 1;
12231229
}
1224-
.form-control-wrapper .form-control:focus:invalid ~ .floating-label {
1230+
.form-control-wrapper .form-control:focus:invalid ~ .floating-label,
1231+
.form-control-wrapper .form-control.focus:invalid ~ .floating-label {
12251232
color: #f44336;
12261233
}
1227-
.form-control-wrapper .form-control:focus ~ .material-input:after {
1234+
.form-control-wrapper .form-control:focus ~ .material-input:after,
1235+
.form-control-wrapper .form-control.focus ~ .material-input:after {
12281236
background-color: #5264ae;
12291237
}
12301238
.form-control-wrapper .form-control:focus:invalid ~ .material-input:before,
1231-
.form-control-wrapper .form-control:focus:invalid ~ .material-input:after {
1239+
.form-control-wrapper .form-control.focus:invalid ~ .material-input:before,
1240+
.form-control-wrapper .form-control:focus:invalid ~ .material-input:after,
1241+
.form-control-wrapper .form-control.focus:invalid ~ .material-input:after {
12321242
background-color: #f44336;
12331243
}
12341244
.form-control-wrapper .form-control.empty ~ .floating-label {
@@ -1245,7 +1255,8 @@ select[multiple].form-control:focus {
12451255
transform: scaleX(0);
12461256
transition: transform 0s;
12471257
}
1248-
.form-control-wrapper .form-control:focus ~ .material-input:before {
1258+
.form-control-wrapper .form-control:focus ~ .material-input:before,
1259+
.form-control-wrapper .form-control.focus ~ .material-input:before {
12491260
transform: scaleX(1);
12501261
transition: transform 0.2s ease-out;
12511262
}
@@ -1270,7 +1281,8 @@ select[multiple].form-control:focus {
12701281
.form-control-wrapper textarea ~ .form-control-highlight {
12711282
margin-top: -11px;
12721283
}
1273-
.form-control-wrapper .form-control:focus ~ .material-input:after {
1284+
.form-control-wrapper .form-control:focus ~ .material-input:after,
1285+
.form-control-wrapper .form-control.focus ~ .material-input:after {
12741286
-webkit-animation: input-highlight 0.3s ease;
12751287
animation: input-highlight 0.3s ease;
12761288
-webkit-animation-fill-mode: forwards;
@@ -1284,31 +1296,35 @@ select[multiple].form-control:focus {
12841296
display: none;
12851297
}
12861298
.form-group.has-warning .material-input:before,
1287-
.form-group.has-warning input.form-control:focus ~ .material-input:after {
1299+
.form-group.has-warning input.form-control:focus ~ .material-input:after,
1300+
.form-group.has-warning input.form-control.focus ~ .material-input:after {
12881301
background: #ff5722;
12891302
}
12901303
.form-group.has-warning .control-label,
12911304
.form-group.has-warning input.form-control:not(.empty) ~ .floating-label {
12921305
color: #ff5722;
12931306
}
12941307
.form-group.has-error .material-input:before,
1295-
.form-group.has-error input.form-control:focus ~ .material-input:after {
1308+
.form-group.has-error input.form-control:focus ~ .material-input:after,
1309+
.form-group.has-error input.form-control.focus ~ .material-input:after {
12961310
background: #f44336;
12971311
}
12981312
.form-group.has-error .control-label,
12991313
.form-group.has-error input.form-control:not(.empty) ~ .floating-label {
13001314
color: #f44336;
13011315
}
13021316
.form-group.has-success .material-input:before,
1303-
.form-group.has-success input.form-control:focus ~ .material-input:after {
1317+
.form-group.has-success input.form-control:focus ~ .material-input:after,
1318+
.form-group.has-success input.form-control.focus ~ .material-input:after {
13041319
background: #0f9d58;
13051320
}
13061321
.form-group.has-success .control-label,
13071322
.form-group.has-success input.form-control:not(.empty) ~ .floating-label {
13081323
color: #0f9d58;
13091324
}
13101325
.form-group.has-info .material-input:before,
1311-
.form-group.has-info input.form-control:focus ~ .material-input:after {
1326+
.form-group.has-info input.form-control:focus ~ .material-input:after,
1327+
.form-group.has-info input.form-control.focus ~ .material-input:after {
13121328
background: #03a9f4;
13131329
}
13141330
.form-group.has-info .control-label,
@@ -1455,6 +1471,76 @@ select[multiple].form-control:focus {
14551471
.form-group-material-lightgrey input.form-control:focus ~ .material-input:after {
14561472
background-color: #ececec;
14571473
}
1474+
.form-group input.form-control.focus ~ .material-input:after,
1475+
.form-group-default input.form-control.focus ~ .material-input:after {
1476+
background-color: #3f51b5;
1477+
}
1478+
.form-group-primary input.form-control.focus ~ .material-input:after {
1479+
background-color: #4285f4;
1480+
}
1481+
.form-group-success input.form-control.focus ~ .material-input:after {
1482+
background-color: #0f9d58;
1483+
}
1484+
.form-group-info input.form-control.focus ~ .material-input:after {
1485+
background-color: #03a9f4;
1486+
}
1487+
.form-group-warning input.form-control.focus ~ .material-input:after {
1488+
background-color: #ff5722;
1489+
}
1490+
.form-group-danger input.form-control.focus ~ .material-input:after {
1491+
background-color: #f44336;
1492+
}
1493+
.form-group-material-red input.form-control.focus ~ .material-input:after {
1494+
background-color: #f44336;
1495+
}
1496+
.form-group-material-pink input.form-control.focus ~ .material-input:after {
1497+
background-color: #e91e63;
1498+
}
1499+
.form-group-material-purple input.form-control.focus ~ .material-input:after {
1500+
background-color: #9c27b0;
1501+
}
1502+
.form-group-material-deeppurple input.form-control.focus ~ .material-input:after {
1503+
background-color: #673ab7;
1504+
}
1505+
.form-group-material-indigo input.form-control.focus ~ .material-input:after {
1506+
background-color: #3f51b5;
1507+
}
1508+
.form-group-material-lightblue input.form-control.focus ~ .material-input:after {
1509+
background-color: #03a9f4;
1510+
}
1511+
.form-group-material-cyan input.form-control.focus ~ .material-input:after {
1512+
background-color: #00bcd4;
1513+
}
1514+
.form-group-material-teal input.form-control.focus ~ .material-input:after {
1515+
background-color: #009688;
1516+
}
1517+
.form-group-material-lightgreen input.form-control.focus ~ .material-input:after {
1518+
background-color: #8bc34a;
1519+
}
1520+
.form-group-material-lime input.form-control.focus ~ .material-input:after {
1521+
background-color: #cddc39;
1522+
}
1523+
.form-group-material-lightyellow input.form-control.focus ~ .material-input:after {
1524+
background-color: #ffeb3b;
1525+
}
1526+
.form-group-material-orange input.form-control.focus ~ .material-input:after {
1527+
background-color: #ff9800;
1528+
}
1529+
.form-group-material-deeporange input.form-control.focus ~ .material-input:after {
1530+
background-color: #ff5722;
1531+
}
1532+
.form-group-material-grey input.form-control.focus ~ .material-input:after {
1533+
background-color: #9e9e9e;
1534+
}
1535+
.form-group-material-bluegrey input.form-control.focus ~ .material-input:after {
1536+
background-color: #607d8b;
1537+
}
1538+
.form-group-material-brown input.form-control.focus ~ .material-input:after {
1539+
background-color: #795548;
1540+
}
1541+
.form-group-material-lightgrey input.form-control.focus ~ .material-input:after {
1542+
background-color: #ececec;
1543+
}
14581544
.form-group .control-label,
14591545
.form-group-default .control-label {
14601546
color: rgba(0, 0, 0, 0.84);
@@ -1615,7 +1701,8 @@ select.form-control {
16151701
border-bottom: 1px solid #757575;
16161702
border-radius: 0;
16171703
}
1618-
select.form-control:focus {
1704+
select.form-control:focus,
1705+
select.form-control.focus {
16191706
box-shadow: none;
16201707
border-color: #757575;
16211708
}

‎less/inputs.less‎

Lines changed: 14 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
// main: material.less
22

33
.form-control-wrapper .form-control, .form-control {
4-
&, &:focus {
4+
&, &:focus, &.focus {
55
height: 28px;
66
padding: 0;
77
float: none;
@@ -19,15 +19,15 @@ select.form-control {
1919
height: 23px;
2020
}
2121
select[multiple].form-control {
22-
&, &:focus {
22+
&, &:focus, &.focus {
2323
height: 85px;
2424
}
2525
}
2626

2727
.form-control-wrapper {
2828
position: relative;
2929

30-
.form-control:focus {
30+
.form-control:focus, .form-control.focus {
3131
outline: none;
3232
}
3333

@@ -46,13 +46,13 @@ select[multiple].form-control {
4646
font-size: 10px;
4747
opacity: 1;
4848
}
49-
.form-control:focus:invalid ~ .floating-label {
49+
.form-control:focus:invalid ~ .floating-label, .form-control.focus:invalid ~ .floating-label {
5050
color: @input-danger;
5151
}
52-
.form-control:focus ~ .material-input:after {
52+
.form-control:focus ~ .material-input:after, .form-control.focus ~ .material-input:after {
5353
background-color: @input-default;
5454
}
55-
.form-control:focus:invalid ~ .material-input {
55+
.form-control:focus:invalid ~ .material-input, .form-control.focus:invalid ~ .material-input {
5656
&:before, &:after {
5757
background-color: @input-danger;
5858
}
@@ -71,7 +71,7 @@ select[multiple].form-control {
7171
transform: scaleX(0);
7272
transition: transform 0s;
7373
}
74-
.form-control:focus ~ .material-input:before {
74+
.form-control:focus ~ .material-input:before, .form-control.focus ~ .material-input:before {
7575
transform: scaleX(1);
7676
transition: transform 0.2s ease-out;
7777
}
@@ -96,7 +96,7 @@ select[multiple].form-control {
9696
}
9797

9898
/* active state */
99-
.form-control:focus ~ .material-input:after {
99+
.form-control:focus ~ .material-input:after, .form-control.focus ~ .material-input:after {
100100
-webkit-animation: input-highlight 0.3s ease;
101101
animation: input-highlight 0.3s ease;
102102
-webkit-animation-fill-mode: forwards;
@@ -115,31 +115,31 @@ select[multiple].form-control {
115115

116116
.form-group {
117117
&.has-warning {
118-
.material-input:before, input.form-control:focus ~ .material-input:after {
118+
.material-input:before, input.form-control:focus ~ .material-input:after, input.form-control.focus ~ .material-input:after {
119119
background: @input-warning;
120120
}
121121
.control-label, input.form-control:not(.empty) ~ .floating-label {
122122
color: @input-warning;
123123
}
124124
}
125125
&.has-error {
126-
.material-input:before, input.form-control:focus ~ .material-input:after {
126+
.material-input:before, input.form-control:focus ~ .material-input:after, input.form-control.focus ~ .material-input:after {
127127
background: @input-danger;
128128
}
129129
.control-label, input.form-control:not(.empty) ~ .floating-label {
130130
color: @input-danger;
131131
}
132132
}
133133
&.has-success {
134-
.material-input:before, input.form-control:focus ~ .material-input:after {
134+
.material-input:before, input.form-control:focus ~ .material-input:after, input.form-control.focus ~ .material-input:after {
135135
background: @input-success;
136136
}
137137
.control-label, input.form-control:not(.empty) ~ .floating-label {
138138
color: @input-success;
139139
}
140140
}
141141
&.has-info {
142-
.material-input:before, input.form-control:focus ~ .material-input:after {
142+
.material-input:before, input.form-control:focus ~ .material-input:after, input.form-control.focus ~ .material-input:after {
143143
background: @input-info;
144144
}
145145
.control-label, input.form-control:not(.empty) ~ .floating-label {
@@ -148,6 +148,7 @@ select[multiple].form-control {
148148
}
149149
.variations(~" .material-input:before", background-color, @indigo);
150150
.variations(~" input.form-control:focus ~ .material-input:after", background-color, @indigo);
151+
.variations(~" input.form-control.focus ~ .material-input:after", background-color, @indigo);
151152
.variations(~" .control-label", color, @lightbg-text);
152153
.variations(~" input.form-control:not(.empty) ~ .floating-label", color, @indigo);
153154

@@ -175,7 +176,7 @@ select.form-control {
175176
box-shadow: none;
176177
border-bottom: 1px solid #757575;
177178
border-radius: 0;
178-
&:focus {
179+
&:focus, &.focus {
179180
box-shadow: none;
180181
border-color: #757575;
181182
}

‎less/test.css‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/* Generated by less 1.7.0 */
2+
.btn-default {
3+
color: #000000;
4+
}
5+
.btn-primary {
6+
color: #4285f4;
7+
}
8+
.btn-success {
9+
color: #0f9d58;
10+
}

‎less/test.less‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
@import "variables.less";
2+
3+
.color(@default) {
4+
&-default {
5+
color: @default;
6+
}
7+
&-primary {
8+
color: @primary;
9+
}
10+
&-success {
11+
color: @success;
12+
}
13+
// etc
14+
}
15+
.btn {
16+
.color(black);
17+
}
18+
19+
.background(@default) {
20+
&-default {
21+
color: @default;
22+
}
23+
&-primary {
24+
color: @primary;
25+
}
26+
&-success {
27+
color: @success;
28+
}
29+
}
30+
31+
.variations(@extra, @property) {
32+
&-default@{extra} { &:extend(.@{property}-default); }
33+
&-primary@{extra} { &:extend(.@{property}-primary); }
34+
// etc
35+
}
36+
37+
.label {
38+
.variations(~"", btn);
39+
}

0 commit comments

Comments
 (0)