input.cx-radio-input{
display: none;
}
.cx-radio-item{
margin-bottom: 10px;
&:last-child{
margin-bottom: 0;
}
label {
display: inline-block;
font-size: 12px;
line-height: 14px;
color: $dark_color_1;
}
span.cx-radio-item {
width: 16px;
height: 16px;
border-radius: 25px;
margin-right: 10px;
cursor: pointer;
position: relative;
background-color: white;
display: inline-block;
float: left;
box-shadow: 1px 1px 6px rgba(0, 0, 0, 0.2);
i {
width: 8px;
height: 8px;
background-color: #495159;
margin: 4px;
border-radius: 20px;
display: inline-block;
transform: scale(0);
transition: all 0.4s cubic-bezier(0.77, 0, 0.175, 1);
}
}
}
.cx-radio-item {
.cx-radio-input:checked{
& + label{
span{
i{
transform: scale(1);
}
}
}
}
}
.cx-radio-img {
float: left;
margin: 10px 5px 0 5px;
text-align: center;
max-width: 60px;
font-size: 12px;
position: relative;
.cx-lable-content {
display: flex;
flex-flow: column;
}
label{
display: inline-block;
}
img {
width: 100%;
height: auto;
margin: 0 0 5px 0;
pointer-events: none;
}
}
.cx-radio-img{
.cx-radio-input:checked{
& + label{
font-weight: bold;
.check{
display: block;
}
img{
box-shadow: 0 0 0 2px rgba(255, 254, 255, 1), 0 0 0 5px #49c66a;
}
}
}
}