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