100 lines
1.6 KiB
CSS
100 lines
1.6 KiB
CSS
form .poll {
|
|
grid-row: 1/3;
|
|
grid-column: 2;
|
|
padding: 0 0 0 2rem;
|
|
|
|
input,
|
|
label {
|
|
display: inline-block;
|
|
}
|
|
|
|
.check{
|
|
display: block;
|
|
position: absolute;
|
|
border: .15rem solid #AAAAAA;
|
|
border-radius: 100%;
|
|
height: 1rem;
|
|
width: 1rem;
|
|
top: .5rem;
|
|
left: .5rem;
|
|
}
|
|
|
|
.group {
|
|
display: block;
|
|
position: relative;
|
|
margin: .5rem 0;
|
|
|
|
.check::before {
|
|
display: block;
|
|
position: absolute;
|
|
content: '';
|
|
border-radius: 100%;
|
|
height: .4rem;
|
|
width: .4rem;
|
|
top: .18rem;
|
|
left: .2rem;
|
|
}
|
|
|
|
@-moz-document url-prefix() {
|
|
.check::before {
|
|
height: .35rem;
|
|
width: .35rem;
|
|
top: .2rem;
|
|
left: .2rem;
|
|
}
|
|
}
|
|
|
|
label {
|
|
font-size: .9rem;
|
|
padding: .25rem 0 0 2rem;
|
|
margin: 0;
|
|
text-transform: none;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
input[type=radio] {
|
|
position: absolute;
|
|
visibility: hidden;
|
|
|
|
&:checked ~ .check {
|
|
border: .15rem solid var(--s-color);
|
|
}
|
|
|
|
&:checked ~ .check::before{
|
|
background: var(--s-color);
|
|
}
|
|
|
|
&:checked ~ label{
|
|
color: var(--s-color);
|
|
}
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 600px) {
|
|
form .poll {
|
|
padding: 1rem 0;
|
|
|
|
.check{
|
|
height: 1.25rem;
|
|
width: 1.25rem;
|
|
top: .5rem;
|
|
left: .5rem;
|
|
}
|
|
|
|
.group {
|
|
|
|
.check::before {
|
|
height: .55rem;
|
|
width: .55rem;
|
|
top: .22rem;
|
|
left: .22rem;
|
|
}
|
|
|
|
label {
|
|
font-size: 1rem;
|
|
padding: .25rem 0 0 2.5rem;
|
|
}
|
|
}
|
|
}
|
|
} |