ten-design-vue
Version:
ten-vue
119 lines (99 loc) • 1.99 kB
text/less
/* dependencies button */
@import "../vars.less";
.ten-radio + .ten-radio {
margin-left: 8px;
}
.ten-radio {
font-family: @font-family;
cursor: pointer;
&__radio {
position: relative;
display: inline-block;
margin-right: 8px;
width: 16px;
height: 16px;
border: 1px solid @border-color;
border-radius: 50%;
background-color: #fff;
transition: border-color 0.3s;
vertical-align: middle;
input {
position: absolute;
z-index: 9999;
left: 0;
top: 0;
margin: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
&-inner {
display: block;
position: absolute;
width: 8px;
height: 8px;
left: 50%;
top: 50%;
border-radius: 100%;
background-color: @primary-color;
transform: translate(-50%, -50%) scale(0);
opacity: 0;
transition: all 0.3s;
}
}
&__child {
// vertical-align: middle;
}
&--focus &__radio,
&:hover &__radio {
border-color: #6697E8;
}
&--checked {
.ten-radio__radio {
border-color: @primary-color;
&-inner {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
}
}
}
&--disabled {
cursor: not-allowed;
.ten-radio__radio {
cursor: not-allowed;
background-color: #f5f5f5;
border-color: @border-color;
input {
pointer-events: none;
cursor: not-allowed;
}
&-inner {
background-color: @border-color;
transform: translate(-50%, -50%) scale(1);
}
}
&:hover .ten-radio__radio {
border-color: @border-color;
}
.ten-radio__child {
color: @disabled-color;
}
}
}
.ten-radio-group {
display: inline-block;
}
.ten-button-radio {
position: relative;
&--checked {
z-index: 2;
}
.ten-radio__radio {
position: absolute;
width: 0;
height: 0;
margin: 0;
opacity: 0;
}
}