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

feat: add focus-ring mixin for accessible focus states

Browse Source
This commit is contained in:
sendevia
2025-10-27 00:44:20 +08:00
parent b98978d898
commit 033dd6afdd
1 changed files with 18 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -59,3 +59,21 @@
white-space: nowrap;
word-wrap: normal;
}
@mixin focus-ring($size: 2, $z-index: 1) {
@keyframes focus-ring {
0% {
outline: #{$size * 4}px solid var(--md-sys-color-primary);
}
100% {
outline: #{$size}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;
position: relative;
transition: var(--md-sys-motion-spring-fast-spatial-standard-duration) var(--md-sys-motion-spring-fast-spatial-standard);
z-index: $z-index;
}