fix: fixed svg icon load failure and enabled global injection bem.scss

This commit is contained in:
vince
2024-07-17 22:30:18 +08:00
parent 8b6d3a72e8
commit cb161eab89
48 changed files with 1626 additions and 1576 deletions

View File

@@ -50,7 +50,7 @@
"@vben-core/toolkit": "workspace:*",
"@vben-core/typings": "workspace:*",
"@vueuse/core": "^10.11.0",
"vue": "^3.4.31",
"vue": "^3.4.32",
"vue-router": "^4.4.0"
}
}

View File

@@ -121,7 +121,7 @@ function toggleTheme(event: MouseEvent) {
</VbenButton>
</template>
<style lang="scss" scoped>
<style scoped>
.theme-toggle {
&__moon {
& > circle {
@@ -130,32 +130,32 @@ function toggleTheme(event: MouseEvent) {
}
&__sun {
fill: hsl(var(--foreground) / 80%);
stroke: none;
@apply fill-foreground/80 stroke-none;
transition: transform 1.6s cubic-bezier(0.25, 0, 0.2, 1);
transform-origin: center center;
&:hover > svg > & {
fill: hsl(var(--foreground));
@apply fill-foreground/80;
}
}
&__sun-beams {
stroke: hsl(var(--foreground) / 80%);
stroke-width: 2px;
@apply stroke-foreground/80 stroke-[2px];
transition:
transform 1.6s cubic-bezier(0.5, 1.5, 0.75, 1.25),
opacity 0.6s cubic-bezier(0.25, 0, 0.3, 1);
transform-origin: center center;
&:hover > svg > & {
stroke: hsl(var(--foreground));
@apply stroke-foreground;
}
}
&.is-light {
.theme-toggle__sun {
transform: scale(0.5);
@apply scale-50;
}
.theme-toggle__sun-beams {
@@ -171,14 +171,14 @@ function toggleTheme(event: MouseEvent) {
}
.theme-toggle__sun-beams {
opacity: 0;
@apply opacity-0;
}
}
&:hover > svg {
.theme-toggle__sun,
.theme-toggle__moon {
fill: hsl(var(--foreground));
@apply fill-foreground;
}
}
}