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/recipes.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/recipes.scss')
-rw-r--r-- | src/styles/recipes.scss | 36 |
1 files changed, 25 insertions, 11 deletions
diff --git a/src/styles/recipes.scss b/src/styles/recipes.scss index 5bdc60a57..37c2febf6 100644 --- a/src/styles/recipes.scss +++ b/src/styles/recipes.scss | |||
@@ -4,7 +4,9 @@ | |||
4 | background-color: $dark-theme-gray-dark; | 4 | background-color: $dark-theme-gray-dark; |
5 | color: $dark-theme-text-color; | 5 | color: $dark-theme-text-color; |
6 | 6 | ||
7 | &:hover { background-color: $dark-theme-gray; } | 7 | &:hover { |
8 | background-color: $dark-theme-gray; | ||
9 | } | ||
8 | } | 10 | } |
9 | 11 | ||
10 | .recipes { | 12 | .recipes { |
@@ -17,7 +19,7 @@ | |||
17 | 19 | ||
18 | &.recipes__list--disabled { | 20 | &.recipes__list--disabled { |
19 | filter: grayscale(100%); | 21 | filter: grayscale(100%); |
20 | opacity: .3; | 22 | opacity: 0.3; |
21 | pointer-events: none; | 23 | pointer-events: none; |
22 | } | 24 | } |
23 | } | 25 | } |
@@ -26,16 +28,20 @@ | |||
26 | height: auto; | 28 | height: auto; |
27 | margin-bottom: 35px; | 29 | margin-bottom: 35px; |
28 | 30 | ||
29 | .badge { margin-right: 10px; } | 31 | .badge { |
32 | margin-right: 10px; | ||
33 | } | ||
30 | 34 | ||
31 | &.recipes__navigation--disabled { | 35 | &.recipes__navigation--disabled { |
32 | filter: grayscale(100%); | 36 | filter: grayscale(100%); |
33 | opacity: .3; | 37 | opacity: 0.3; |
34 | pointer-events: none; | 38 | pointer-events: none; |
35 | } | 39 | } |
36 | } | 40 | } |
37 | 41 | ||
38 | &__service-request { float: right; } | 42 | &__service-request { |
43 | float: right; | ||
44 | } | ||
39 | } | 45 | } |
40 | 46 | ||
41 | .recipe-teaser { | 47 | .recipe-teaser { |
@@ -45,24 +51,32 @@ | |||
45 | margin: 0 20px 20px 0; | 51 | margin: 0 20px 20px 0; |
46 | overflow: hidden; | 52 | overflow: hidden; |
47 | position: relative; | 53 | position: relative; |
48 | transition: background $theme-transition-time; | 54 | @media (prefers-reduced-motion: no-preference) { |
55 | transition: background $theme-transition-time; | ||
56 | } | ||
49 | width: calc(25% - 20px); | 57 | width: calc(25% - 20px); |
50 | 58 | ||
51 | &:hover { background-color: $theme-gray-lighter; } | 59 | &:hover { |
60 | background-color: $theme-gray-lighter; | ||
61 | } | ||
52 | 62 | ||
53 | .recipe-teaser__icon { | 63 | .recipe-teaser__icon { |
54 | margin-bottom: 10px; | 64 | margin-bottom: 10px; |
55 | width: 50px; | 65 | width: 50px; |
56 | } | 66 | } |
57 | 67 | ||
58 | .recipe-teaser__label { display: block; } | 68 | .recipe-teaser__label { |
69 | display: block; | ||
70 | } | ||
59 | 71 | ||
60 | h2 { z-index: 10; } | 72 | h2 { |
73 | z-index: 10; | ||
74 | } | ||
61 | 75 | ||
62 | &__dev-badge { | 76 | &__dev-badge { |
63 | background: $theme-brand-warning; | 77 | background: $theme-brand-warning; |
64 | box-shadow: 0 0 4px rgba(black, .2); | 78 | box-shadow: 0 0 4px rgba(black, 0.2); |
65 | color: #FFF; | 79 | color: #fff; |
66 | font-size: 10px; | 80 | font-size: 10px; |
67 | position: absolute; | 81 | position: absolute; |
68 | right: -13px; | 82 | right: -13px; |