github/dbx
4
0 Fork 0
mirror of https://github.com/t8y2/dbx.git synced 2026-11-15 14:52:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: 兼容intel Mac旧版系统webview中样式问题

Browse Source 
Co-authored-by: tangheng <tangheng@tanghengdeMacBook-Pro.local>
This commit is contained in:
zipgandtangheng authored and GitHub committed 2026-07-11 21:53:29 +08:00
1 parent 361f7774e9
commit 8ff0f13bd4
14 files changed
+1354 -134
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

apps/desktop/src/components/ui/switch/Switch.vue
+81 -5
View File
@@ -32,16 +32,92 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
v-bind="forwarded"
:class="
cn(
'data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 shrink-0 rounded-full border border-transparent focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] peer group/switch relative inline-flex items-center transition-colors outline-none after:absolute after:-inset-x-3 after:-inset-y-2 data-disabled:cursor-not-allowed data-disabled:opacity-50',
'dbx-switch data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 dark:data-unchecked:bg-input/80 shrink-0 rounded-full border border-transparent focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-[18.4px] data-[size=default]:w-[32px] data-[size=sm]:h-[14px] data-[size=sm]:w-[24px] peer group/switch relative inline-flex items-center transition-colors outline-none after:absolute after:-inset-x-3 after:-inset-y-2 data-disabled:cursor-not-allowed data-disabled:opacity-50',
props.class,
)
"
>
<SwitchThumb
data-slot="switch-thumb"
class="bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground rounded-full group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=sm]/switch:data-checked:translate-x-[calc(100%-2px)] group-data-[size=default]/switch:data-unchecked:translate-x-0 group-data-[size=sm]/switch:data-unchecked:translate-x-0 pointer-events-none block ring-0 transition-transform"
>
<SwitchThumb data-slot="switch-thumb" class="dbx-switch-thumb bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground rounded-full group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 pointer-events-none block ring-0 transition-transform">
<slot name="thumb" v-bind="slotProps" />
</SwitchThumb>
</SwitchRoot>
</template>
<style>
.dbx-switch {
box-sizing: border-box;
display: inline-flex !important;
align-items: center !important;
position: relative;
flex-shrink: 0;
overflow: hidden;
border: 1px solid rgba(120, 120, 128, 0.22) !important;
background-color: rgb(229, 229, 229) !important;
vertical-align: middle;
}
.dbx-switch[data-size="default"] {
width: 32px !important;
height: 18.4px !important;
}
.dbx-switch[data-size="sm"] {
width: 24px !important;
height: 14px !important;
}
.dbx-switch-thumb {
display: block !important;
border-radius: 9999px;
background-color: rgb(255, 255, 255) !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22);
transform: translateX(0) !important;
}
.dbx-switch[data-size="default"] .dbx-switch-thumb {
width: 16px !important;
height: 16px !important;
}
.dbx-switch[data-size="sm"] .dbx-switch-thumb {
width: 12px !important;
height: 12px !important;
}
.dbx-switch[data-state="checked"],
.dbx-switch[data-checked],
.dbx-switch[aria-checked="true"] {
border-color: rgb(23, 23, 23) !important;
background-color: rgb(23, 23, 23) !important;
}
.dbx-switch[data-size="default"][data-state="checked"] .dbx-switch-thumb,
.dbx-switch[data-size="default"][data-checked] .dbx-switch-thumb,
.dbx-switch[data-size="default"][aria-checked="true"] .dbx-switch-thumb {
transform: translateX(14px) !important;
}
.dbx-switch[data-size="sm"][data-state="checked"] .dbx-switch-thumb,
.dbx-switch[data-size="sm"][data-checked] .dbx-switch-thumb,
.dbx-switch[data-size="sm"][aria-checked="true"] .dbx-switch-thumb {
transform: translateX(10px) !important;
}
.dark .dbx-switch {
border-color: rgba(255, 255, 255, 0.16) !important;
background-color: rgba(255, 255, 255, 0.18) !important;
}
.dark .dbx-switch[data-state="checked"],
.dark .dbx-switch[data-checked],
.dark .dbx-switch[aria-checked="true"] {
border-color: rgb(245, 245, 245) !important;
background-color: rgb(245, 245, 245) !important;
}
.dark .dbx-switch[data-state="checked"] .dbx-switch-thumb,
.dark .dbx-switch[data-checked] .dbx-switch-thumb,
.dark .dbx-switch[aria-checked="true"] .dbx-switch-thumb {
background-color: rgb(23, 23, 23) !important;
}
</style>