Commit f436eb15 authored by Aral Balkan's avatar Aral Balkan

Improve accessibility

parent 9cc99794
...@@ -130,7 +130,7 @@ label ...@@ -130,7 +130,7 @@ label
.donationTypeButtonLabel .donationTypeButtonLabel
{ {
width: 48%; width: 48%;
height: 30px; height: 34px;
line-height: 30px; line-height: 30px;
text-align: center; text-align: center;
margin-bottom: 12px; margin-bottom: 12px;
...@@ -144,9 +144,15 @@ input[name="donationType"] { ...@@ -144,9 +144,15 @@ input[name="donationType"] {
display: none; display: none;
} }
input[name="donationType"] + label {
border: 2px solid #eee;
}
input[name="donationType"]:checked + label { input[name="donationType"]:checked + label {
background-color: #FFC3A7; background-color: #D2D8ED;
color: #82073B; color: #422D50;
box-sizing: border-box;
border: 2px solid #AAB5D6;
} }
/* only add right margin to first button /* only add right margin to first button
...@@ -163,7 +169,7 @@ input[name="donationType"]:checked + label { ...@@ -163,7 +169,7 @@ input[name="donationType"]:checked + label {
display: block; display: block;
float: left; float: left;
width: 62px; width: 62px;
height: 85px; height: 89px;
line-height: 85px; line-height: 85px;
margin-bottom: 10px; margin-bottom: 10px;
margin-right: 10px; margin-right: 10px;
...@@ -194,10 +200,16 @@ input[name="donationType"]:checked + label { ...@@ -194,10 +200,16 @@ input[name="donationType"]:checked + label {
text-align: center; text-align: center;
} }
input[name="donationAmount"] + label
{
border: 2px solid #eee;
}
input[name="donationAmount"]:checked + label input[name="donationAmount"]:checked + label
{ {
color: #154652; color: #154652;
background-color: #AFE1E8; background-color: #AFE1E8;
border: 2px solid #76BCC7;
} }
#otherDonationLabel #otherDonationLabel
...@@ -258,6 +270,7 @@ input[name="donationAmount"]:checked + label ...@@ -258,6 +270,7 @@ input[name="donationAmount"]:checked + label
{ {
color: #ccc; color: #ccc;
background-color: #eee; background-color: #eee;
border: 2px solid #eee;
} }
@media only screen and (min-width: 380px) { @media only screen and (min-width: 380px) {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment