eightequal/AstralRinth
1
0
Fork 0
forked from didirus/AstralRinth
Code Pull Requests Activity

Add Prefers Reduced Motion support for most components (#133)

Browse Source
This commit is contained in:
Mysterious_Dev
2023-11-11 23:22:01 +01:00
committed by GitHub
parent bf5d391d53
commit 66154b30c1
9 changed files with 46 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
lib/components/base/Slider.vue
View File

@@ -115,6 +115,12 @@ const onInput = (value: string) => {
<style lang="scss" scoped>
.root-container {
--transition-speed: 0.2s;
@media (prefers-reduced-motion) {
--transition-speed: 0s;
}
display: flex;
flex-direction: row;
align-items: center;
@@ -159,7 +165,7 @@ const onInput = (value: string) => {
background: var(--color-brand);
cursor: pointer;
border-radius: 50%;
transition: 0.2s;
transition: var(--transition-speed);
}
.slider-component .slide-container .slider::-moz-range-thumb {
@@ -169,19 +175,19 @@ const onInput = (value: string) => {
background: var(--color-brand);
cursor: pointer;
border-radius: 50%;
transition: 0.2s;
transition: var(--transition-speed);
}
.slider-component .slide-container .slider:hover::-webkit-slider-thumb:not(.disabled) {
width: 1rem;
height: 1rem;
transition: 0.2s;
transition: var(--transition-speed);
}
.slider-component .slide-container .slider:hover::-moz-range-thumb:not(.disabled) {
width: 1rem;
height: 1rem;
transition: 0.2s;
transition: var(--transition-speed);
}
.slider-component .slide-container .snap-points-wrapper {