diff options
author | Stefan Malzner <stefan@adlk.io> | 2017-11-07 14:26:19 +0100 |
---|---|---|
committer | Stefan Malzner <stefan@adlk.io> | 2017-11-07 14:26:19 +0100 |
commit | fa48f676c91f289a00ef12d0a6476eb71cd02d88 (patch) | |
tree | 72de8e617758d3fb0a9c612b6726a82d9f1a28e8 /src/styles | |
parent | Merge branch 'develop' into reload-crashed-service (diff) | |
download | ferdium-app-fa48f676c91f289a00ef12d0a6476eb71cd02d88.tar.gz ferdium-app-fa48f676c91f289a00ef12d0a6476eb71cd02d88.tar.zst ferdium-app-fa48f676c91f289a00ef12d0a6476eb71cd02d88.zip |
Remove cumbersome style nesting
Diffstat (limited to 'src/styles')
-rw-r--r-- | src/styles/button.scss | 108 |
1 files changed, 53 insertions, 55 deletions
diff --git a/src/styles/button.scss b/src/styles/button.scss index c2dd91293..75d2cb1d4 100644 --- a/src/styles/button.scss +++ b/src/styles/button.scss | |||
@@ -1,74 +1,72 @@ | |||
1 | @import './config.scss'; | 1 | @import './config.scss'; |
2 | 2 | ||
3 | .franz-form { | 3 | .franz-form__button { |
4 | .franz-form__button { | 4 | position: relative; |
5 | position: relative; | 5 | background: $theme-brand-primary; |
6 | background: $theme-brand-primary; | 6 | display: block; |
7 | display: block; | 7 | padding: 10px 20px; |
8 | padding: 10px 20px; | 8 | color: #FFF; |
9 | color: #FFF; | 9 | border-radius: 3px; |
10 | border-radius: 3px; | 10 | transition: background 0.5s; |
11 | transition: background 0.5s; | 11 | text-align: center; |
12 | text-align: center; | ||
13 | 12 | ||
14 | &:hover { | 13 | &:hover { |
15 | background: darken($theme-brand-primary, 5%); | 14 | background: darken($theme-brand-primary, 5%); |
16 | } | 15 | } |
17 | 16 | ||
18 | &:active { | 17 | &:active { |
19 | transition: none; | 18 | transition: none; |
20 | background: lighten($theme-brand-primary, 5%); | 19 | background: lighten($theme-brand-primary, 5%); |
21 | } | 20 | } |
22 | 21 | ||
23 | &:disabled { | 22 | &:disabled { |
24 | opacity: 0.2; | 23 | opacity: 0.2; |
25 | } | 24 | } |
26 | 25 | ||
27 | &.franz-form__button--secondary { | 26 | &.franz-form__button--secondary { |
28 | background: $theme-gray-lighter; | 27 | background: $theme-gray-lighter; |
29 | color: $theme-gray; | 28 | color: $theme-gray; |
30 | 29 | ||
31 | &:hover { | 30 | &:hover { |
32 | background: darken($theme-gray-lighter, 5%); | 31 | background: darken($theme-gray-lighter, 5%); |
33 | } | 32 | } |
34 | 33 | ||
35 | &:active { | 34 | &:active { |
36 | background: lighten($theme-gray-lighter, 5%); | 35 | background: lighten($theme-gray-lighter, 5%); |
37 | } | ||
38 | } | 36 | } |
37 | } | ||
39 | 38 | ||
40 | &.franz-form__button--danger { | 39 | &.franz-form__button--danger { |
41 | background: $theme-brand-danger; | 40 | background: $theme-brand-danger; |
42 | 41 | ||
43 | &:hover { | 42 | &:hover { |
44 | background: darken($theme-brand-danger, 5%); | 43 | background: darken($theme-brand-danger, 5%); |
45 | } | 44 | } |
46 | 45 | ||
47 | &:active { | 46 | &:active { |
48 | background: lighten($theme-brand-danger, 5%); | 47 | background: lighten($theme-brand-danger, 5%); |
49 | } | ||
50 | } | 48 | } |
49 | } | ||
51 | 50 | ||
52 | &.franz-form__button--inverted { | 51 | &.franz-form__button--inverted { |
53 | background: none; | 52 | background: none; |
54 | padding: 10px 20px; | 53 | padding: 10px 20px; |
55 | border: 2px solid $theme-brand-primary; | 54 | border: 2px solid $theme-brand-primary; |
56 | color: $theme-brand-primary; | 55 | color: $theme-brand-primary; |
57 | transition: background 0.5s, color 0.5s; | 56 | transition: background 0.5s, color 0.5s; |
58 | 57 | ||
59 | &:hover { | 58 | &:hover { |
60 | background: darken($theme-brand-primary, 5%); | 59 | background: darken($theme-brand-primary, 5%); |
61 | color: #FFF; | 60 | color: #FFF; |
62 | } | ||
63 | } | 61 | } |
62 | } | ||
64 | 63 | ||
65 | .loader { | 64 | .loader { |
66 | position: relative; | 65 | position: relative; |
67 | width: 20px; | 66 | width: 20px; |
68 | height: 12px; | 67 | height: 12px; |
69 | z-index: 9999; | 68 | z-index: 9999; |
70 | display: inline-block; | 69 | display: inline-block; |
71 | margin-right: 5px; | 70 | margin-right: 5px; |
72 | } | ||
73 | } | 71 | } |
74 | } | 72 | } |