diff options
author | 2021-08-10 19:04:54 +0200 | |
---|---|---|
committer | 2021-08-10 22:34:54 +0530 | |
commit | 969eda02a66050cf4518ddfa657e86d1d6d8b6c3 (patch) | |
tree | 9f21b062f0c188f2c3ddfbb6594670982610aadf /src/styles/radio.scss | |
parent | refactor: Move platform-specific logic for shortcut keys into common location. (diff) | |
download | ferdium-app-969eda02a66050cf4518ddfa657e86d1d6d8b6c3.tar.gz ferdium-app-969eda02a66050cf4518ddfa657e86d1d6d8b6c3.tar.zst ferdium-app-969eda02a66050cf4518ddfa657e86d1d6d8b6c3.zip |
feat: follow OS reduced motion setting (#1757)
- add missing meta charset to index.html
- dont restrict scaling for user in index.html
- load animations.css conditionally based on motion preference
- load transitions conditionally in js and css based on motion preference
Co-authored-by: Vijay Raghavan Aravamudhan <vraravam@users.noreply.github.com>
Diffstat (limited to 'src/styles/radio.scss')
-rw-r--r-- | src/styles/radio.scss | 19 |
1 files changed, 13 insertions, 6 deletions
diff --git a/src/styles/radio.scss b/src/styles/radio.scss index b1e148ca0..e8297408d 100644 --- a/src/styles/radio.scss +++ b/src/styles/radio.scss | |||
@@ -11,9 +11,10 @@ | |||
11 | } | 11 | } |
12 | } | 12 | } |
13 | 13 | ||
14 | |||
15 | .franz-form { | 14 | .franz-form { |
16 | .franz-form__radio-wrapper { display: flex; } | 15 | .franz-form__radio-wrapper { |
16 | display: flex; | ||
17 | } | ||
17 | 18 | ||
18 | .franz-form__radio { | 19 | .franz-form__radio { |
19 | border: 2px solid $theme-gray-lighter; | 20 | border: 2px solid $theme-gray-lighter; |
@@ -24,18 +25,24 @@ | |||
24 | margin-right: 20px; | 25 | margin-right: 20px; |
25 | padding: 11px; | 26 | padding: 11px; |
26 | text-align: center; | 27 | text-align: center; |
27 | transition: background $theme-transition-time; | 28 | @media (prefers-reduced-motion: no-preference) { |
29 | transition: background $theme-transition-time; | ||
30 | } | ||
28 | 31 | ||
29 | &:last-of-type { margin-right: 0; } | 32 | &:last-of-type { |
33 | margin-right: 0; | ||
34 | } | ||
30 | 35 | ||
31 | &.is-selected { | 36 | &.is-selected { |
32 | background: #FFF; | 37 | background: #fff; |
33 | border-width: 2px; | 38 | border-width: 2px; |
34 | border-style: solid; | 39 | border-style: solid; |
35 | border-color: $theme-brand-primary; | 40 | border-color: $theme-brand-primary; |
36 | color: $theme-brand-primary; | 41 | color: $theme-brand-primary; |
37 | } | 42 | } |
38 | 43 | ||
39 | input { display: none; } | 44 | input { |
45 | display: none; | ||
46 | } | ||
40 | } | 47 | } |
41 | } | 48 | } |