UNPKG

ten-design-vue

Version:

ten-vue

119 lines (99 loc) 1.99 kB
/* 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; } }