From 4f9ad5d836c16e5e1fc0fdba2919121dc066bc13 Mon Sep 17 00:00:00 2001 From: shin Date: Fri, 3 Jul 2026 19:05:16 +0900 Subject: [PATCH] =?UTF-8?q?fix:=20Radio=20=E3=81=AE=E9=81=B8=E6=8A=9E?= =?UTF-8?q?=E3=83=89=E3=83=83=E3=83=88=E3=81=8C=20label=20=E3=81=AE=20padd?= =?UTF-8?q?ing=20=E3=81=A7=E4=BD=8D=E7=BD=AE=E3=81=9A=E3=82=8C=E3=81=97?= =?UTF-8?q?=E3=81=AA=E3=81=84=E3=82=88=E3=81=86=E3=81=AB=E3=81=99=E3=82=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ドットを ::after の絶対配置（left: calc(...) 固定）で重ねる方式から、 輪(:before)自身の background に radial-gradient で描く方式に変更する。 絶対配置の基準が padding を含まないため、label に padding を当てると 輪だけが動いてドットが取り残されていた。 選択時のアニメーションは transform: scale の代わりに background-size （アニメーション可能）で中心から広がる動きを維持する。 Closes #18 Co-Authored-By: Claude Fable 5 --- src/Radio/_index.scss | 27 +++++++++------------------ 1 file changed, 9 insertions(+), 18 deletions(-) diff --git a/src/Radio/_index.scss b/src/Radio/_index.scss index b86744a..ad92dc5 100644 --- a/src/Radio/_index.scss +++ b/src/Radio/_index.scss @@ -11,12 +11,14 @@ .wip-radio { @include adapter.text($level: m); display: flex; - position: relative; align-items: center; gap: adapter.get-gap-size(xs); forced-color-adjust: none; cursor: pointer; + // ドット（選択マーク）は擬似要素のオーバーレイではなく、輪(:before)自身の + // background に radial-gradient で描く。絶対配置だとルートの label に + // padding を当てたときに輪（フロー配置）とずれるため。 &:before { content: ''; display: block; @@ -24,28 +26,17 @@ height: adapter.get-radio-child-background-height(); border-radius: 50%; box-shadow: 0 0 0 .0625rem adapter.get-radio-border-color(); - } - - &:after { - content: ''; - position: absolute; - left: calc((adapter.get-radio-child-background-width() - adapter.get-radio-child-foreground-width()) / 2); - top: 50%; - transform: translateY(-50%) scale(0); - width: adapter.get-radio-child-foreground-width(); - height: adapter.get-radio-child-foreground-height(); - background: adapter.get-primitive-color(blue, 800); - border-radius: 50%; - transition: transform 200ms; + background-image: radial-gradient(circle closest-side, adapter.get-primitive-color(blue, 800) 98%, transparent); + background-repeat: no-repeat; + background-position: center; + background-size: 0 0; + transition: background-size 200ms; } &[data-selected] { &:before { box-shadow: 0 0 0 .0625rem adapter.get-primitive-color(blue, 800); - } - - &:after { - transform: translateY(-50%) scale(1); + background-size: adapter.get-radio-child-foreground-width() adapter.get-radio-child-foreground-height(); } }