refactor(grid): [grid] refactor grid radio style (#2462)

opentiny · Nov 4, 2024 · 92b1abd · 92b1abd
1 parent 8a9f812
commit 92b1abd
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 8 deletions.
diff --git 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
@@ -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);