isite
Version:
Create High Level Multi-Language Web Site [Fast and Easy]
104 lines (88 loc) • 1.8 kB
CSS
.radio-list label.radio{
text-align: var(--text-align);
}
.radio-list .control{
padding: 0px;
}
.radio-list .title{
font-size: 16px;
}
.radio {
margin: 5px;
margin-left: 25px;
display: inline-block;
position: relative;
padding-right: 35px;
padding-left: 0px;
margin-bottom: 12px;
cursor: pointer;
direction: ltr;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.radio input {
position: absolute;
opacity: 0;
cursor: pointer;
}
.radio .checkmark {
position: absolute;
top: 0;
right: 0;
height: 25px;
width: 25px;
border: 2px solid var(--modal-header-background-color);;
transition: color .1s ease;
border-radius: 50%;
}
.radio:hover input ~ .checkmark {
background-color: var(--modal-header-background-color);;
}
.radio input:checked ~ .checkmark {
background-color: var(--modal-header-background-color);;
border : none;
}
.radio .checkmark:after {
content: "";
position: absolute;
display: none;
}
.radio input:checked ~ .checkmark:after {
display: block;
}
.radio .checkmark:after {
top: 9px;
left: 9px;
width: 7px;
height: 7px;
border-radius: 50%;
background: white;
}
i-radio .selector {
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
cursor: pointer;
display: inline-block;
padding: 5px 9px;
margin: 5px;
min-width: 25px;
min-height: 25px;
border-radius: 5px;
}
i-radio .selector.selected {
background: green;
color: #fff;
transform: scale(1.1);
}
i-radio .selector.selected .fa{
color: #FFEB3B;
}
i-radio .selector.un-selected .fa{
color: #fff;
}
i-radio .selector.un-selected {
background: #787d72;
}