diff options
author | Markus Hatvan <markus_hatvan@aon.at> | 2021-08-10 19:04:54 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-08-10 22:34:54 +0530 |
commit | 969eda02a66050cf4518ddfa657e86d1d6d8b6c3 (patch) | |
tree | 9f21b062f0c188f2c3ddfbb6594670982610aadf /src/styles/content-tabs.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/content-tabs.scss')
-rw-r--r-- | src/styles/content-tabs.scss | 29 |
1 files changed, 21 insertions, 8 deletions
diff --git a/src/styles/content-tabs.scss b/src/styles/content-tabs.scss index 03befedcb..41bd2c251 100644 --- a/src/styles/content-tabs.scss +++ b/src/styles/content-tabs.scss | |||
@@ -9,7 +9,7 @@ | |||
9 | .content-tabs__tabs { | 9 | .content-tabs__tabs { |
10 | .content-tabs__item { | 10 | .content-tabs__item { |
11 | background: $dark-theme-gray; | 11 | background: $dark-theme-gray; |
12 | color: #FFF; | 12 | color: #fff; |
13 | border: 0; | 13 | border: 0; |
14 | } | 14 | } |
15 | } | 15 | } |
@@ -24,19 +24,26 @@ | |||
24 | overflow: hidden; | 24 | overflow: hidden; |
25 | 25 | ||
26 | .content-tabs__item { | 26 | .content-tabs__item { |
27 | background: linear-gradient($theme-gray-lightest 80%, darken($theme-gray-lightest, 3%)); | 27 | background: linear-gradient( |
28 | $theme-gray-lightest 80%, | ||
29 | darken($theme-gray-lightest, 3%) | ||
30 | ); | ||
28 | border-right: 1px solid $theme-gray-lighter; | 31 | border-right: 1px solid $theme-gray-lighter; |
29 | color: $theme-gray-dark; | 32 | color: $theme-gray-dark; |
30 | flex: 1; | 33 | flex: 1; |
31 | padding: 10px; | 34 | padding: 10px; |
32 | transition: background $theme-transition-time; | 35 | @media (prefers-reduced-motion: no-preference) { |
36 | transition: background $theme-transition-time; | ||
37 | } | ||
33 | 38 | ||
34 | &:last-of-type { border-right: 0; } | 39 | &:last-of-type { |
40 | border-right: 0; | ||
41 | } | ||
35 | 42 | ||
36 | &.is-active { | 43 | &.is-active { |
37 | background: $theme-brand-primary; | 44 | background: $theme-brand-primary; |
38 | box-shadow: none; | 45 | box-shadow: none; |
39 | color: #FFF; | 46 | color: #fff; |
40 | } | 47 | } |
41 | } | 48 | } |
42 | } | 49 | } |
@@ -51,10 +58,16 @@ | |||
51 | display: none; | 58 | display: none; |
52 | top: 0; | 59 | top: 0; |
53 | 60 | ||
54 | &.is-active { display: block; } | 61 | &.is-active { |
62 | display: block; | ||
63 | } | ||
55 | } | 64 | } |
56 | 65 | ||
57 | .franz-form__input-wrapper { background: #FFF; } | 66 | .franz-form__input-wrapper { |
58 | .franz-form__field:last-of-type { margin-bottom: 0; } | 67 | background: #fff; |
68 | } | ||
69 | .franz-form__field:last-of-type { | ||
70 | margin-bottom: 0; | ||
71 | } | ||
59 | } | 72 | } |
60 | } | 73 | } |