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/button.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/button.scss')
-rw-r--r-- | src/styles/button.scss | 91 |
1 files changed, 64 insertions, 27 deletions
diff --git a/src/styles/button.scss b/src/styles/button.scss index d18b683d5..86b3501f0 100644 --- a/src/styles/button.scss +++ b/src/styles/button.scss | |||
@@ -4,29 +4,45 @@ | |||
4 | background: $theme-brand-primary; | 4 | background: $theme-brand-primary; |
5 | color: $dark-theme-text-color; | 5 | color: $dark-theme-text-color; |
6 | 6 | ||
7 | &:hover { background: darken($theme-brand-primary, 5%); } | 7 | &:hover { |
8 | &:active { background: lighten($theme-brand-primary, 5%); } | 8 | background: darken($theme-brand-primary, 5%); |
9 | } | ||
10 | &:active { | ||
11 | background: lighten($theme-brand-primary, 5%); | ||
12 | } | ||
9 | 13 | ||
10 | &.franz-form__button--secondary { | 14 | &.franz-form__button--secondary { |
11 | background: $dark-theme-gray-dark; | 15 | background: $dark-theme-gray-dark; |
12 | color: $dark-theme-text-color; | 16 | color: $dark-theme-text-color; |
13 | 17 | ||
14 | &:hover { background: lighten($dark-theme-gray-dark, 10%); } | 18 | &:hover { |
15 | &:active { background: lighten($dark-theme-gray-dark, 20%); } | 19 | background: lighten($dark-theme-gray-dark, 10%); |
20 | } | ||
21 | &:active { | ||
22 | background: lighten($dark-theme-gray-dark, 20%); | ||
23 | } | ||
16 | } | 24 | } |
17 | 25 | ||
18 | &.franz-form__button--danger { | 26 | &.franz-form__button--danger { |
19 | background: $theme-brand-danger; | 27 | background: $theme-brand-danger; |
20 | 28 | ||
21 | &:hover { background: darken($theme-brand-danger, 5%); } | 29 | &:hover { |
22 | &:active { background: lighten($theme-brand-danger, 5%); } | 30 | background: darken($theme-brand-danger, 5%); |
31 | } | ||
32 | &:active { | ||
33 | background: lighten($theme-brand-danger, 5%); | ||
34 | } | ||
23 | } | 35 | } |
24 | 36 | ||
25 | &.franz-form__button--warning { | 37 | &.franz-form__button--warning { |
26 | background: $theme-brand-warning; | 38 | background: $theme-brand-warning; |
27 | 39 | ||
28 | &:hover { background: darken($theme-brand-warning, 5%); } | 40 | &:hover { |
29 | &:active { background: lighten($theme-brand-warning, 5%); } | 41 | background: darken($theme-brand-warning, 5%); |
42 | } | ||
43 | &:active { | ||
44 | background: lighten($theme-brand-warning, 5%); | ||
45 | } | ||
30 | } | 46 | } |
31 | 47 | ||
32 | &.franz-form__button--inverted { | 48 | &.franz-form__button--inverted { |
@@ -39,27 +55,35 @@ | |||
39 | } | 55 | } |
40 | } | 56 | } |
41 | 57 | ||
42 | &:disabled { opacity: .5; } | 58 | &:disabled { |
59 | opacity: 0.5; | ||
60 | } | ||
43 | } | 61 | } |
44 | 62 | ||
45 | .franz-form__button { | 63 | .franz-form__button { |
46 | background: $theme-brand-primary; | 64 | background: $theme-brand-primary; |
47 | border-radius: 3px; | 65 | border-radius: 3px; |
48 | display: block; | 66 | display: block; |
49 | color: #FFF; | 67 | color: #fff; |
50 | padding: 10px 20px; | 68 | padding: 10px 20px; |
51 | position: relative; | 69 | position: relative; |
52 | transition: background .5s; | 70 | @media (prefers-reduced-motion: no-preference) { |
71 | transition: background 0.5s; | ||
72 | } | ||
53 | text-align: center; | 73 | text-align: center; |
54 | 74 | ||
55 | &:hover { background: darken($theme-brand-primary, 5%) } | 75 | &:hover { |
76 | background: darken($theme-brand-primary, 5%); | ||
77 | } | ||
56 | 78 | ||
57 | &:active { | 79 | &:active { |
58 | background: lighten($theme-brand-primary, 5%); | 80 | background: lighten($theme-brand-primary, 5%); |
59 | transition: none; | 81 | transition: none; |
60 | } | 82 | } |
61 | 83 | ||
62 | &:disabled { opacity: .2; } | 84 | &:disabled { |
85 | opacity: 0.2; | ||
86 | } | ||
63 | 87 | ||
64 | &.franz-form__button--large { | 88 | &.franz-form__button--large { |
65 | width: 100%; | 89 | width: 100%; |
@@ -70,22 +94,34 @@ | |||
70 | background: $theme-gray-lighter; | 94 | background: $theme-gray-lighter; |
71 | color: $theme-gray; | 95 | color: $theme-gray; |
72 | 96 | ||
73 | &:hover { background: darken($theme-gray-lighter, 5%); } | 97 | &:hover { |
74 | &:active { background: lighten($theme-gray-lighter, 5%); } | 98 | background: darken($theme-gray-lighter, 5%); |
99 | } | ||
100 | &:active { | ||
101 | background: lighten($theme-gray-lighter, 5%); | ||
102 | } | ||
75 | } | 103 | } |
76 | 104 | ||
77 | &.franz-form__button--danger { | 105 | &.franz-form__button--danger { |
78 | background: $theme-brand-danger; | 106 | background: $theme-brand-danger; |
79 | 107 | ||
80 | &:hover { background: darken($theme-brand-danger, 5%); } | 108 | &:hover { |
81 | &:active { background: lighten($theme-brand-danger, 5%); } | 109 | background: darken($theme-brand-danger, 5%); |
110 | } | ||
111 | &:active { | ||
112 | background: lighten($theme-brand-danger, 5%); | ||
113 | } | ||
82 | } | 114 | } |
83 | 115 | ||
84 | &.franz-form__button--warning { | 116 | &.franz-form__button--warning { |
85 | background: $theme-brand-warning; | 117 | background: $theme-brand-warning; |
86 | 118 | ||
87 | &:hover { background: darken($theme-brand-warning, 5%); } | 119 | &:hover { |
88 | &:active { background: lighten($theme-brand-warning, 5%); } | 120 | background: darken($theme-brand-warning, 5%); |
121 | } | ||
122 | &:active { | ||
123 | background: lighten($theme-brand-warning, 5%); | ||
124 | } | ||
89 | } | 125 | } |
90 | 126 | ||
91 | &.franz-form__button--inverted { | 127 | &.franz-form__button--inverted { |
@@ -93,11 +129,12 @@ | |||
93 | border: 2px solid $theme-brand-primary; | 129 | border: 2px solid $theme-brand-primary; |
94 | color: $theme-brand-primary; | 130 | color: $theme-brand-primary; |
95 | padding: 10px 20px; | 131 | padding: 10px 20px; |
96 | transition: background .5s, color .5s; | 132 | @media (prefers-reduced-motion: no-preference) { |
97 | 133 | transition: background 0.5s, color 0.5s; | |
134 | } | ||
98 | &:hover { | 135 | &:hover { |
99 | background: darken($theme-brand-primary, 5%); | 136 | background: darken($theme-brand-primary, 5%); |
100 | color: #FFF; | 137 | color: #fff; |
101 | } | 138 | } |
102 | } | 139 | } |
103 | 140 | ||
@@ -122,20 +159,20 @@ | |||
122 | z-index: 9998; | 159 | z-index: 9998; |
123 | list-style: none; | 160 | list-style: none; |
124 | background: $theme-brand-primary; | 161 | background: $theme-brand-primary; |
125 | 162 | ||
126 | position: absolute; | 163 | position: absolute; |
127 | bottom: 20px; | 164 | bottom: 20px; |
128 | right: 20px; | 165 | right: 20px; |
129 | 166 | ||
130 | cursor: pointer; | 167 | cursor: pointer; |
131 | 168 | ||
132 | display: flex; | 169 | display: flex; |
133 | justify-content: center; | 170 | justify-content: center; |
134 | align-items: center; | 171 | align-items: center; |
135 | 172 | ||
136 | a { | 173 | a { |
137 | font-size: 30px; | 174 | font-size: 30px; |
138 | color: #FFFFFF; | 175 | color: #ffffff; |
139 | cursor: pointer; | 176 | cursor: pointer; |
140 | } | 177 | } |
141 | } | 178 | } |