Skip to content

Commit 33b1642

Browse files
author
FezVrasta
committed
improved accessibility (mdbootstrap#425)
1 parent c42cd9c commit 33b1642

1 file changed

Lines changed: 84 additions & 79 deletions

File tree

‎less/_radios.less‎

Lines changed: 84 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -1,95 +1,100 @@
11
.form-horizontal .radio {
2-
margin-bottom: 10px;
2+
margin-bottom: 10px;
33
}
44
.radio {
5-
label {
6-
cursor: pointer;
7-
padding-left: 45px;
8-
position: relative;
9-
span {
10-
display: block;
11-
position: absolute;
12-
left: 10px;
13-
top: 2px;
14-
transition-duration: 0.2s;
15-
}
16-
.circle {
17-
border: 2px solid @lightbg-text;
18-
height: 15px;
19-
width: 15px;
20-
border-radius: 100%;
21-
}
22-
.check {
23-
height: 15px;
24-
width: 15px;
25-
border-radius: 100%;
26-
background-color: @radio-default;
27-
transform: scale(0);
28-
}
29-
.check:after {
30-
display: block;
31-
position: absolute;
32-
content: "";
33-
background-color: @lightbg-text;
34-
left: -18px;
35-
top: -18px;
36-
height: 50px;
37-
width: 50px;
38-
border-radius: 100%;
39-
z-index: 1;
40-
opacity: 0;
41-
margin: 0;
42-
transform: scale(1.5);
43-
}
44-
input[type=radio]:not(:checked) ~ .check:after {
45-
animation: rippleOff 500ms;
46-
}
47-
input[type=radio]:checked ~ .check:after {
48-
animation: rippleOn 500ms;
49-
}
50-
5+
label {
6+
cursor: pointer;
7+
padding-left: 45px;
8+
position: relative;
9+
span {
10+
display: block;
11+
position: absolute;
12+
left: 10px;
13+
top: 2px;
14+
transition-duration: 0.2s;
5115
}
52-
.variations(~" input[type=radio]:checked ~ .check", background-color, @radio-default);
53-
.variations(~" input[type=radio]:checked ~ .circle", border-color, @radio-default);
54-
55-
input[type=radio][disabled] ~ .check,
56-
input[type=radio][disabled] ~ .circle {
57-
opacity: 0.5;
16+
.circle {
17+
border: 2px solid @lightbg-text;
18+
height: 15px;
19+
width: 15px;
20+
border-radius: 100%;
5821
}
59-
60-
input[type=radio] { display: none; }
61-
input[type=radio]:checked ~ .check {
62-
transform: scale(0.55);
22+
.check {
23+
height: 15px;
24+
width: 15px;
25+
border-radius: 100%;
26+
background-color: @radio-default;
27+
transform: scale(0);
28+
}
29+
.check:after {
30+
display: block;
31+
position: absolute;
32+
content: "";
33+
background-color: @lightbg-text;
34+
left: -18px;
35+
top: -18px;
36+
height: 50px;
37+
width: 50px;
38+
border-radius: 100%;
39+
z-index: 1;
40+
opacity: 0;
41+
margin: 0;
42+
transform: scale(1.5);
6343
}
64-
input[type=radio][disabled] ~ .circle {
65-
border-color: @lightbg-text;
44+
input[type=radio]:not(:checked) ~ .check:after {
45+
animation: rippleOff 500ms;
6646
}
67-
input[type=radio][disabled] ~ .check {
68-
background-color: @lightbg-text;
47+
input[type=radio]:checked ~ .check:after {
48+
animation: rippleOn 500ms;
6949
}
7050

51+
}
52+
.variations(~" input[type=radio]:checked ~ .check", background-color, @radio-default);
53+
.variations(~" input[type=radio]:checked ~ .circle", border-color, @radio-default);
54+
55+
input[type=radio][disabled] ~ .check,
56+
input[type=radio][disabled] ~ .circle {
57+
opacity: 0.5;
58+
}
59+
60+
input[type=radio] {
61+
opacity: 0;
62+
height: 0;
63+
width: 0;
64+
overflow: hidden;
65+
} }
66+
input[type=radio]:checked ~ .check {
67+
transform: scale(0.55);
68+
}
69+
input[type=radio][disabled] ~ .circle {
70+
border-color: @lightbg-text;
71+
}
72+
input[type=radio][disabled] ~ .check {
73+
background-color: @lightbg-text;
74+
}
75+
7176
}
7277

7378
@keyframes rippleOn {
74-
0% {
75-
opacity: 0;
76-
}
77-
50% {
78-
opacity: 0.2;
79-
}
80-
100% {
81-
opacity: 0;
82-
}
79+
0% {
80+
opacity: 0;
81+
}
82+
50% {
83+
opacity: 0.2;
84+
}
85+
100% {
86+
opacity: 0;
87+
}
8388
}
8489

8590
@keyframes rippleOff {
86-
0% {
87-
opacity: 0;
88-
}
89-
50% {
90-
opacity: 0.2;
91-
}
92-
100% {
93-
opacity: 0;
94-
}
91+
0% {
92+
opacity: 0;
93+
}
94+
50% {
95+
opacity: 0.2;
96+
}
97+
100% {
98+
opacity: 0;
99+
}
95100
}

0 commit comments

Comments
 (0)