jonny
/
Signal-Desktop
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Respect users's "reduced motion" preference for smooth scrolling

This commit is contained in:
Evan Hahn 2021-03-15 13:50:22 -05:00 committed by Josh Perez
parent 62e04a1bbd
commit 8ee653f252
3 changed files with 15 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
stylesheets/_mixins.scss
View File

@ -106,6 +106,16 @@
} }
} }
// Smooth scrolling
@mixin smooth-scroll() {
scroll-behavior: smooth;
@media (prefers-reduced-motion) {
scroll-behavior: auto;
}
}
// Icons // Icons
@mixin color-svg($svg, $color, $stretch: true) { @mixin color-svg($svg, $color, $stretch: true) {

5
stylesheets/_modules.scss
View File

@ -6308,12 +6308,13 @@ button.module-image__border-overlay:focus {
&__scroll-marker { &__scroll-marker {
$scroll-marker-selector: &; $scroll-marker-selector: &;
@include smooth-scroll;
display: flex; display: flex;
justify-content: center; justify-content: center;
left: 0; left: 0;
opacity: 1; opacity: 1;
position: absolute; position: absolute;
scroll-behavior: smooth;
transition: opacity 200ms ease-out; transition: opacity 200ms ease-out;
width: 100%; width: 100%;
z-index: 1; z-index: 1;
@ -6896,7 +6897,7 @@ button.module-image__border-overlay:focus {
// Module: conversation list // Module: conversation list
.module-conversation-list { .module-conversation-list {
scroll-behavior: smooth; @include smooth-scroll;
&__item { &__item {
&--archive-button { &--archive-button {

3
stylesheets/components/ContactPills.scss
View File

@ -2,6 +2,8 @@
// SPDX-License-Identifier: AGPL-3.0-only // SPDX-License-Identifier: AGPL-3.0-only
.module-ContactPills { .module-ContactPills {
@include smooth-scroll;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-bottom: 10px; margin-bottom: 10px;
@ -9,7 +11,6 @@
overflow-x: hidden; overflow-x: hidden;
overflow-y: scroll; overflow-y: scroll;
padding-left: 12px; padding-left: 12px;
scroll-behavior: smooth;
.module-ContactPill { .module-ContactPill {
margin: 4px 6px; margin: 4px 6px;