つまみにチェックマークを追加

takusea · Oct 6, 2024 · 32d15f0 · 32d15f0
1 parent 3ae63fa
commit 32d15f0
Showing 1 changed file with 10 additions and 3 deletions.
diff --git a/src/components/Base/BaseSwitch.vue b/src/components/Base/BaseSwitch.vue
@@ -2,7 +2,9 @@
   <div class="root">
     <div class="label">{{ checked ? checkedLabel : uncheckedLabel }}</div>
     <SwitchRoot :id v-model:checked="checked" :disabled class="SwitchRoot">
-      <SwitchThumb class="SwitchThumb" />
+      <SwitchThumb class="SwitchThumb">
+        <QIcon class="check" name="check" />
+      </SwitchThumb>
     </SwitchRoot>
   </div>
 </template>
@@ -52,18 +54,23 @@ const checked = defineModel<boolean>("checked", { required: true });
 }
 
 .SwitchThumb {
-  display: block;
+  display: grid;
+  place-items: center;
+  color: transparent;
   width: 20px;
   height: 20px;
   background-color: white;
   border-radius: 50%;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-  transition: transform vars.$transition-duration;
+  transition:
+    transform vars.$transition-duration,
+    color vars.$transition-duration;
   will-change: transform;
 }
 
 .SwitchThumb[data-state="checked"] {
   transform: translateX(16px);
+  color: colors.$primary;
 }
 
 .label {