Custom radio inputs

This commit is contained in:
yflory
2018-04-16 19:07:54 +02:00
parent 7870dc05ca
commit 68c26f3164
5 changed files with 110 additions and 44 deletions

View File

@@ -52,6 +52,7 @@
display: flex;
justify-content: center;
border: 1px solid @colortheme_form-border;
flex-shrink: 0;
&:after {
content: "";
display: none;
@@ -65,4 +66,68 @@
}
}
.cp-radio {
margin: 0;
display: flex;
align-items: center;
position: relative;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
&.cp-radio-secondary {
.cp-radio-mark {
&:after {
border-color: @colortheme_checkmark-col2;
}
}
input {
&:checked ~ .cp-radio-mark {
background-color: @colortheme_checkmark-back2;
}
}
}
&:hover .cp-radio-mark {
background-color: @colortheme_checkmark-back0-active;
}
input {
display: none;
&:checked ~ .cp-radio-mark {
background-color: @colortheme_checkmark-back1;
&:after {
display: block;
}
}
}
@radio-size: @dim1 * 3;
.cp-radio-mark {
margin-right: 10px;
position: relative;
height: @radio-size;
width: @radio-size;
background-color: @colortheme_checkmark-back0;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid @colortheme_form-border;
flex-shrink: 0;
&:after {
display: none;
content: "";
border-radius: 50%;
background: white;
width: @dim1;
height: @dim1;
//transform: rotate(45deg);
//border: solid @colortheme_checkmark-col1;
//border-width: 0 @width @width 0;
}
}
}
}