sendevia/website
1
0
Fork 0
mirror of https://github.com/sendevia/website.git synced 2026-03-07 08:12:35 +08:00
Code Activity

feat: update focus-ring mixin parameter from size to thickness

Browse Source
This commit is contained in:
sendevia
2025-11-09 16:00:42 +08:00
parent 3bce8e20ff
commit 0c14354359
4 changed files with 9 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
.vitepress/theme/components/PageIndicator.vue
View File

@@ -355,7 +355,7 @@ if (typeof window !== "undefined") {
border-radius: var(--md-sys-shape-corner-extra-large);
&:focus-visible {
@include mixin.focus-ring($size: 2);
@include mixin.focus-ring($thickness: 2);
background-color: var(--md-sys-color-surface-container);
}

2
.vitepress/theme/components/PrevNext.vue
View File

@@ -165,7 +165,7 @@ const next = computed(() => {
}
&:focus-visible {
@include mixin.focus-ring();
@include mixin.focus-ring($thickness: 2);
}
}

6
.vitepress/theme/layouts/Article.vue
View File

@@ -150,7 +150,7 @@ section {
}
&:focus-visible {
@include mixin.focus-ring($size: 2, $z-index: 3);
@include mixin.focus-ring($thickness: 2, $z-index: 3);
outline-color: var(--md-ref-palette-neutral90) !important;
}
@@ -319,7 +319,7 @@ section {
}
&:focus-visible {
@include mixin.focus-ring($size: 3);
@include mixin.focus-ring($thickness: 3);
}
}
@@ -431,7 +431,7 @@ section {
-moz-user-select: none;
&:focus-visible {
@include mixin.focus-ring($size: 2, $z-index: 2);
@include mixin.focus-ring($thickness: 2, $z-index: 2);
opacity: 1;

8
.vitepress/theme/styles/mixin.scss
View File

@@ -40,19 +40,19 @@
word-wrap: normal;
}
@mixin focus-ring($size: 2, $z-index: 1) {
@mixin focus-ring($thickness: 2, $offset: $thickness, $z-index: 1) {
@keyframes focus-ring {
0% {
outline: #{$size * 4}px solid var(--md-sys-color-primary);
outline: #{$thickness * 4}px solid var(--md-sys-color-primary);
}
100% {
outline: #{$size}px solid var(--md-sys-color-primary);
outline: #{$thickness}px solid var(--md-sys-color-primary);
}
}
animation: focus-ring var(--md-sys-motion-spring-slow-effect-duration) var(--md-sys-motion-spring-slow-effect) forwards;
outline-offset: #{$size}px;
outline-offset: #{$offset}px;
transition: background-color var(--md-sys-motion-spring-fast-effect-duration) var(--md-sys-motion-spring-fast-effect),
outline var(--md-sys-motion-spring-fast-spatial-standard-duration) var(--md-sys-motion-spring-fast-spatial-standard);
z-index: $z-index;