diff --git a/style/mobile/components/radio/v2/_index.less b/style/mobile/components/radio/v2/_index.less index 64f49134e6..0c3bf44c2c 100644 --- a/style/mobile/components/radio/v2/_index.less +++ b/style/mobile/components/radio/v2/_index.less @@ -2,6 +2,8 @@ @import "./_var.less"; +@import "./_mixin.less"; + .@{prefix}-radio { position: relative; display: inline-flex; @@ -24,6 +26,7 @@ &__icon { position: relative; + margin-top: calc((@radio-label-line-height - @radio-icon-size) / 2); width: @radio-icon-size; height: @radio-icon-size; font-size: @radio-icon-size; @@ -48,24 +51,31 @@ } &-circle { - width: 42px; - height: 42px; - border: 3px solid @radio-icon-color; - border-radius: 50%; - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%) scale(.5); + width: @radio-icon-size; + height: @radio-icon-size; box-sizing: border-box; - &--disabled { + &::after { + content: ""; + width: calc(200% - 3px); + height: calc(200% - 3px); + border-radius: 50%; + border: 3px solid @radio-icon-color; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%) scale(.5); + box-sizing: border-box; + } + + &--disabled::after { background: @radio-icon-disabled-bg-color; } } &-dot { - width: 42px; - height: 42px; + width: calc((@radio-icon-size - 3px) * 2); + height: calc((@radio-icon-size - 3px) * 2); border: 3px solid @radio-icon-checked-color; border-radius: 50%; position: absolute; @@ -80,8 +90,8 @@ &::after { content: ""; display: block; - width: 24px; - height: 24px; + width: @radio-icon-size; + height: @radio-icon-size; background: @radio-icon-checked-color; border-radius: 50%; } diff --git a/style/mobile/components/radio/v2/_mixin.less b/style/mobile/components/radio/v2/_mixin.less new file mode 100644 index 0000000000..c1a5d9ae00 --- /dev/null +++ b/style/mobile/components/radio/v2/_mixin.less @@ -0,0 +1,5 @@ +.limit-title-row { + display: -webkit-box; // stylelint-disable-line + -webkit-box-orient: vertical; // stylelint-disable-line + overflow: hidden; +}