diff options
author | Guille Cura <cura.gf@gmail.com> | 2018-07-05 02:37:43 -0300 |
---|---|---|
committer | Guille Cura <cura.gf@gmail.com> | 2018-07-05 02:37:43 -0300 |
commit | 25c6cbd29aff90f694d72afe28ab56b0113fb16a (patch) | |
tree | 9907623b3a7b835e58b895d08b62c5339b8e0376 /src/styles/button.scss | |
parent | 5.0.0 beta.18 (diff) | |
download | ferdium-app-25c6cbd29aff90f694d72afe28ab56b0113fb16a.tar.gz ferdium-app-25c6cbd29aff90f694d72afe28ab56b0113fb16a.tar.zst ferdium-app-25c6cbd29aff90f694d72afe28ab56b0113fb16a.zip |
Update stylesheets and added darkMode variable and toggle.
Diffstat (limited to 'src/styles/button.scss')
-rw-r--r-- | src/styles/button.scss | 96 |
1 files changed, 59 insertions, 37 deletions
diff --git a/src/styles/button.scss b/src/styles/button.scss index 8d2adbbcc..83ddf3e3e 100644 --- a/src/styles/button.scss +++ b/src/styles/button.scss | |||
@@ -1,71 +1,93 @@ | |||
1 | @import './config.scss'; | 1 | @import './config.scss'; |
2 | 2 | ||
3 | |||
4 | .theme__dark .franz-form__button { | ||
5 | background: $theme-brand-primary; | ||
6 | color: $dark-theme-gray-smoke; | ||
7 | |||
8 | &:hover { background: darken($theme-brand-primary, 5%); } | ||
9 | &:active { background: lighten($theme-brand-primary, 5%); } | ||
10 | |||
11 | &.franz-form__button--secondary { | ||
12 | background: $dark-theme-gray-lighter; | ||
13 | color: $dark-theme-gray-smoke; | ||
14 | |||
15 | &:hover { background: darken($dark-theme-gray-lightest, 5%); } | ||
16 | &:active { background: lighten($dark-theme-gray-lightest, 5%); } | ||
17 | } | ||
18 | |||
19 | &.franz-form__button--danger { | ||
20 | background: $theme-brand-danger; | ||
21 | |||
22 | &:hover { background: darken($theme-brand-danger, 5%); } | ||
23 | &:active { background: lighten($theme-brand-danger, 5%); } | ||
24 | } | ||
25 | |||
26 | &.franz-form__button--warning { | ||
27 | background: $theme-brand-warning; | ||
28 | |||
29 | &:hover { background: darken($theme-brand-warning, 5%); } | ||
30 | &:active { background: lighten($theme-brand-warning, 5%); } | ||
31 | } | ||
32 | |||
33 | &.franz-form__button--inverted { | ||
34 | border: 2px solid $theme-brand-primary; | ||
35 | color: $theme-brand-primary; | ||
36 | |||
37 | &:hover { | ||
38 | background: darken($theme-brand-primary, 5%); | ||
39 | color: $dark-theme-gray-smoke; | ||
40 | } | ||
41 | } | ||
42 | } | ||
43 | |||
3 | .franz-form__button { | 44 | .franz-form__button { |
4 | position: relative; | ||
5 | background: $theme-brand-primary; | 45 | background: $theme-brand-primary; |
46 | border-radius: 3px; | ||
6 | display: block; | 47 | display: block; |
7 | padding: 10px 20px; | ||
8 | color: #FFF; | 48 | color: #FFF; |
9 | border-radius: 3px; | 49 | padding: 10px 20px; |
10 | transition: background 0.5s; | 50 | position: relative; |
51 | transition: background .5s; | ||
11 | text-align: center; | 52 | text-align: center; |
12 | 53 | ||
13 | &:hover { | 54 | &:hover { background: darken($theme-brand-primary, 5%) } |
14 | background: darken($theme-brand-primary, 5%); | ||
15 | } | ||
16 | 55 | ||
17 | &:active { | 56 | &:active { |
18 | transition: none; | ||
19 | background: lighten($theme-brand-primary, 5%); | 57 | background: lighten($theme-brand-primary, 5%); |
58 | transition: none; | ||
20 | } | 59 | } |
21 | 60 | ||
22 | &:disabled { | 61 | &:disabled { opacity: .2; } |
23 | opacity: 0.2; | ||
24 | } | ||
25 | 62 | ||
26 | &.franz-form__button--secondary { | 63 | &.franz-form__button--secondary { |
27 | background: $theme-gray-lighter; | 64 | background: $theme-gray-lighter; |
28 | color: $theme-gray; | 65 | color: $theme-gray; |
29 | 66 | ||
30 | &:hover { | 67 | &:hover { background: darken($theme-gray-lighter, 5%); } |
31 | background: darken($theme-gray-lighter, 5%); | 68 | &:active { background: lighten($theme-gray-lighter, 5%); } |
32 | } | ||
33 | |||
34 | &:active { | ||
35 | background: lighten($theme-gray-lighter, 5%); | ||
36 | } | ||
37 | } | 69 | } |
38 | 70 | ||
39 | &.franz-form__button--danger { | 71 | &.franz-form__button--danger { |
40 | background: $theme-brand-danger; | 72 | background: $theme-brand-danger; |
41 | 73 | ||
42 | &:hover { | 74 | &:hover { background: darken($theme-brand-danger, 5%); } |
43 | background: darken($theme-brand-danger, 5%); | 75 | &:active { background: lighten($theme-brand-danger, 5%); } |
44 | } | ||
45 | |||
46 | &:active { | ||
47 | background: lighten($theme-brand-danger, 5%); | ||
48 | } | ||
49 | } | 76 | } |
50 | 77 | ||
51 | &.franz-form__button--warning { | 78 | &.franz-form__button--warning { |
52 | background: $theme-brand-warning; | 79 | background: $theme-brand-warning; |
53 | 80 | ||
54 | &:hover { | 81 | &:hover { background: darken($theme-brand-warning, 5%); } |
55 | background: darken($theme-brand-warning, 5%); | 82 | &:active { background: lighten($theme-brand-warning, 5%); } |
56 | } | ||
57 | |||
58 | &:active { | ||
59 | background: lighten($theme-brand-warning, 5%); | ||
60 | } | ||
61 | } | 83 | } |
62 | 84 | ||
63 | &.franz-form__button--inverted { | 85 | &.franz-form__button--inverted { |
64 | background: none; | 86 | background: none; |
65 | padding: 10px 20px; | ||
66 | border: 2px solid $theme-brand-primary; | 87 | border: 2px solid $theme-brand-primary; |
67 | color: $theme-brand-primary; | 88 | color: $theme-brand-primary; |
68 | transition: background 0.5s, color 0.5s; | 89 | padding: 10px 20px; |
90 | transition: background .5s, color .5s; | ||
69 | 91 | ||
70 | &:hover { | 92 | &:hover { |
71 | background: darken($theme-brand-primary, 5%); | 93 | background: darken($theme-brand-primary, 5%); |
@@ -74,11 +96,11 @@ | |||
74 | } | 96 | } |
75 | 97 | ||
76 | .loader { | 98 | .loader { |
99 | display: inline-block; | ||
100 | height: 12px; | ||
101 | margin-right: 5px; | ||
77 | position: relative; | 102 | position: relative; |
78 | width: 20px; | 103 | width: 20px; |
79 | height: 12px; | ||
80 | z-index: 9999; | 104 | z-index: 9999; |
81 | display: inline-block; | ||
82 | margin-right: 5px; | ||
83 | } | 105 | } |
84 | } | 106 | } |