fix(style): switch, radio, checkbox hover style (#230)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>
nuxt · May 11, 2023 · 97f5b1a · 97f5b1a
1 parent 501682b
commit 97f5b1a
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 7 deletions.
diff --git a/packages/devtools-ui-kit/src/components/NDarkToggle.vue b/packages/devtools-ui-kit/src/components/NDarkToggle.vue
@@ -14,8 +14,9 @@ const isDark = computed<boolean>({
   },
 })
 
-// @ts-expect-error: Transition API
-const isAppearanceTransition = document.startViewTransition
+const isAppearanceTransition = typeof document !== 'undefined'
+  // @ts-expect-error: Transition API
+  && document.startViewTransition
   && !window.matchMedia('(prefers-reduced-motion: reduce)').matches
 
 /**

diff --git a/packages/devtools-ui-kit/src/components/NSwitch.vue b/packages/devtools-ui-kit/src/components/NSwitch.vue
@@ -16,7 +16,7 @@ const checked = useVModel(props, 'modelValue', emit, { passive: true })
 
 <template>
   <label
-    class="n-switch n-switch-base n-disabled:n-disabled"
+    class="n-switch n-switch-base hover:n-switch-hover n-disabled:n-disabled"
     :checked="checked || null"
     :disabled="disabled || null"
   >

diff --git a/packages/devtools-ui-kit/src/unocss.ts b/packages/devtools-ui-kit/src/unocss.ts
@@ -113,19 +113,22 @@ export function unocssPreset(): Preset {
       'n-button-icon': '-ml-0.2em mr-0.2em text-1.1em',
 
       // checkbox
-      'n-checkbox': 'inline-flex gap-1 items-center',
+      'n-checkbox': 'inline-flex gap-1 items-center rounded',
+      'n-checkbox-hover': 'op100 n-bg-hover cursor-pointer',
       'n-checkbox-box': 'border n-border-base w-1.1em h-1.1em mr-1 text-white flex flex-none items-center rounded-sm overflow-visible',
       'n-checkbox-box-checked': 'bg-context border-context',
       'n-checkbox-icon': 'carbon-checkmark w-1em h-1em m-auto',
 
       // radio
-      'n-radio-box': 'border n-border-base w-1.2em h-1.2em mr-1 text-white flex flex-none rounded-full overflow-visible',
+      'n-radio-box': 'border rounded n-border-base w-1.2em h-1.2em mr-1 text-white flex flex-none rounded-full overflow-visible',
+      'n-radio-hover': 'op100 n-bg-hover cursor-pointer',
       'n-radio-box-checked': 'border-context',
       'n-radio-inner': 'bg-context rounded-1/2 w-0 h-0 m-auto',
       'n-radio-inner-checked': 'w-0.8em h-0.8em',
 
       // switch
-      'n-switch-base': 'inline-flex items-center select-none',
+      'n-switch-base': 'inline-flex items-center select-none rounded-full pe-2',
+      'n-switch-hover': 'op100 n-bg-hover cursor-pointer',
       'n-switch-slider': 'mr-1 rounded-full border n-border-base relative p-2px',
       'n-switch-slider-checked': 'border-context/20 bg-context/10',
       'n-switch-thumb': 'h-1em w-1em rounded-1/2 border n-border-base ml-0 mr-0.8em',

diff --git a/packages/devtools/client/pages/settings.vue b/packages/devtools/client/pages/settings.vue
@@ -67,7 +67,7 @@ function toggleTabCategory(name: string, v: boolean) {
             <div flex="~ col gap-1" border="~ base rounded" py3 pl4 pr2>
               <template v-for="tab of tabs" :key="tab.name">
                 <NSwitch
-                  flex="~ row-reverse" py1 n-primary
+                  flex="~ row-reverse" py1 pl2 pr1 n-primary
                   :model-value="!hiddenTabs.includes(tab.name)"
                   @update:model-value="v => toggleTab(tab.name, v)"
                 >