diff --git a/packages/theme/src/grid/radio.less b/packages/theme/src/grid/radio.less index e5563c0c75..5d30f7c9db 100644 --- a/packages/theme/src/grid/radio.less +++ b/packages/theme/src/grid/radio.less @@ -47,14 +47,32 @@ } &:checked + .@{grid-radio-prefix-cls}__icon { + position: relative; + width: var(--tv-Grid-icon-size); + height: var(--tv-Grid-icon-size); + margin: 1px; + border: 1px solid var(--tv-Grid-radio-icon-color-selected); + border-radius: 100%; + + &::after { + content: ''; + height: 8px; + width: 8px; + background: var(--tv-Grid-radio-icon-color-selected); + position: absolute; + border-radius: 100%; + top: 50%; + left: 50%; + transform: translateX(-50%) translateY(-50%); + } + > svg { &.icon-radio { display: none; } &.icon-radio-selected { - display: inline-block; - fill: var(--tv-Grid-radio-icon-color-selected); + display: none; } } @@ -70,7 +88,7 @@ > input { & + .@{grid-radio-prefix-cls}__icon { > svg { - fill: var(--tv-Grid-radio-icon-color-disabled); + fill: var(--tv-Grid-radio-border-color-disabled); path:last-child { fill: var(--tv-Grid-radio-icon-color-disabled); @@ -83,12 +101,10 @@ } &:checked + .@{grid-radio-prefix-cls}__icon { - > svg { - fill: var(--tv-Grid-radio-icon-color-disabled); + border-color: var(--tv-Grid-radio-border-color-disabled); - path:first-child { - fill: var(--tv-Grid-radio-icon-color-disabled); - } + &::after { + background: var(--tv-Grid-radio-border-color-disabled); } } } diff --git a/packages/theme/src/grid/vars.less b/packages/theme/src/grid/vars.less index a1ee257e32..c9d58e8369 100644 --- a/packages/theme/src/grid/vars.less +++ b/packages/theme/src/grid/vars.less @@ -124,6 +124,8 @@ --tv-Grid-radio-icon-color-selected: var(--tv-color-bg-active-control); // 单选框禁用颜色 --tv-Grid-radio-icon-color-disabled: var(--tv-color-bg-disabled); + // 单选框禁用边框色 + --tv-Grid-radio-border-color-disabled: var(--tv-color-border-disabled); // -------筛选相关样式------- // 筛选一般背景色 --tv-Grid-filter-bg-color: var(--tv-color-bg);