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