docs: radio style (#4865)

ilyaliao · web-flow · commit f78be1cb52d1 · 2025-07-09T10:56:03.000Z
diff --git a/packages/.vitepress/theme/styles/demo.css b/packages/.vitepress/theme/styles/demo.css
@@ -135,6 +135,39 @@
     border: 1px solid var(--vp-c-border);
   }
 
+  .radio {
+    @apply inline-flex items-center my-auto cursor-pointer select-none;
+  }
+
+  .radio input {
+    appearance: none;
+    padding: 0;
+    -webkit-print-color-adjust: exact;
+    color-adjust: exact;
+    display: inline-block;
+    vertical-align: middle;
+    background-origen: border-box;
+    user-select: none;
+    flex-shrink: 0;
+    height: 1rem;
+    width: 1rem;
+    @apply bg-gray-400/30;
+    @apply rounded-full h-4 w-4 select-none relative;
+    @apply mr-1;
+    --tw-ring-offset-width: 1px !important;
+    --tw-ring-color: #8885 !important;
+    --tw-ring-offset-color: transparent !important;
+  }
+
+  .radio input:checked::after {
+    content: '';
+    @apply absolute inset-[3px] rounded-full bg-primary;
+  }
+
+  .radio span {
+    @apply ml-1.5 text-13px opacity-70;
+  }
+
   pre,
   .code-block {
     opacity: 0.8;
diff --git a/packages/core/useSpeechRecognition/demo.vue b/packages/core/useSpeechRecognition/demo.vue
@@ -71,7 +71,7 @@ watch(isListening, isListening => isListening ? null : selectedLanguage.value =
       >more details</a>
     </div>
     <div v-else>
-      <div space-x-4>
+      <div flex="~ items-center gap-x-4 wrap">
         <label class="radio">
           <input v-model="lang" value="en-US" type="radio">
           <span>English (US)</span>
@@ -119,49 +119,3 @@ watch(isListening, isListening => isListening ? null : selectedLanguage.value =
     </div>
   </div>
 </template>
-
-<!-- <style scoped>
-.tag {
-  padding: 0.3rem 0.6rem;
-  margin-right: 0.5rem;
-  border-radius: 4px;
-}
-</style> -->
-
-<style scoped lang="postcss">
-input {
-  --tw-ring-offset-width: 1px !important;
-  --tw-ring-color: #8885 !important;
-  --tw-ring-offset-color: transparent !important;
-}
-
-.radio {
-  @apply inline-flex items-center my-auto cursor-pointer select-none;
-}
-
-.radio input {
-  appearance: none;
-  padding: 0;
-  -webkit-print-color-adjust: exact;
-  color-adjust: exact;
-  display: inline-block;
-  vertical-align: middle;
-  background-origen: border-box;
-  user-select: none;
-  flex-shrink: 0;
-  height: 1rem;
-  width: 1rem;
-  @apply bg-gray-400/30;
-  @apply rounded-full h-4 w-4 select-none relative;
-  @apply mr-1;
-}
-
-.radio input:checked::after {
-  content: '';
-  @apply absolute inset-[3px] rounded-full bg-primary;
-}
-
-.checkbox span {
-  @apply ml-1.5 text-13px opacity-70;
-}
-</style>
diff --git a/packages/integrations/useChangeCase/demo.vue b/packages/integrations/useChangeCase/demo.vue
@@ -21,42 +21,9 @@ const changeCase = useChangeCase(input, type)
   <pre lang="yaml">{{ changeCase }}</pre>
 </template>
 
-<style scoped lang="postcss">
-input {
-  --tw-ring-offset-width: 1px !important;
-  --tw-ring-color: #8885 !important;
-  --tw-ring-offset-color: transparent !important;
-}
-
+<style scoped>
 .radio {
   width: 9rem;
-  @apply ml-2;
-  @apply inline-flex items-center my-auto cursor-pointer select-none;
-}
-
-.radio input {
-  appearance: none;
-  padding: 0;
-  -webkit-print-color-adjust: exact;
-  color-adjust: exact;
-  display: inline-block;
-  vertical-align: middle;
-  background-origen: border-box;
-  user-select: none;
-  flex-shrink: 0;
-  height: 1rem;
-  width: 1rem;
-  @apply bg-gray-400/30;
-  @apply rounded-full h-4 w-4 select-none relative;
-  @apply mr-1;
-}
-
-.radio input:checked::after {
-  content: '';
-  @apply absolute inset-[3px] rounded-full bg-primary;
-}
-
-.checkbox span {
-  @apply ml-1.5 text-13px opacity-70;
+  margin-left: 0.5rem;
 }
 </style>
diff --git a/packages/shared/useDateFormat/demo.vue b/packages/shared/useDateFormat/demo.vue
@@ -16,7 +16,7 @@ const formatted = useDateFormat(useNow(), formatter, { locales: lang })
       Formatter Editor :
     </span>
     <input v-model="formatter" type="text">
-    <div space-x-4>
+    <div flex="~ items-center gap-x-4 wrap">
       <label class="radio">
         <input v-model="lang" value="en-US" type="radio">
         <span>English (US)</span>
