diff options
author | Stefan Malzner <stefan@adlk.io> | 2017-11-23 16:17:34 +0100 |
---|---|---|
committer | GitHub <noreply@github.com> | 2017-11-23 16:17:34 +0100 |
commit | abca425e4a7b63be93132067bc335e8b6b39c2b2 (patch) | |
tree | e386f3e5d4c1c1caff19e3555e7ed1ce93e625f6 /src/styles | |
parent | replace typeform (diff) | |
parent | Add windows notification fix to changelog (diff) | |
download | ferdium-app-abca425e4a7b63be93132067bc335e8b6b39c2b2.tar.gz ferdium-app-abca425e4a7b63be93132067bc335e8b6b39c2b2.tar.zst ferdium-app-abca425e4a7b63be93132067bc335e8b6b39c2b2.zip |
Merge pull request #330 from meetfranz/developv5.0.0-beta.14
Beta 14
Diffstat (limited to 'src/styles')
-rw-r--r-- | src/styles/button.scss | 108 | ||||
-rw-r--r-- | src/styles/info-bar.scss | 4 | ||||
-rw-r--r-- | src/styles/layout.scss | 33 | ||||
-rw-r--r-- | src/styles/recipes.scss | 4 | ||||
-rw-r--r-- | src/styles/services.scss | 23 | ||||
-rw-r--r-- | src/styles/settings.scss | 15 | ||||
-rw-r--r-- | src/styles/subscription.scss | 5 | ||||
-rw-r--r-- | src/styles/tabs.scss | 18 | ||||
-rw-r--r-- | src/styles/type.scss | 5 |
9 files changed, 130 insertions, 85 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 | } |
diff --git a/src/styles/info-bar.scss b/src/styles/info-bar.scss index c30c951ee..b6d1e84e2 100644 --- a/src/styles/info-bar.scss +++ b/src/styles/info-bar.scss | |||
@@ -46,6 +46,10 @@ | |||
46 | } | 46 | } |
47 | } | 47 | } |
48 | 48 | ||
49 | a { | ||
50 | // text-decoration: underline; | ||
51 | } | ||
52 | |||
49 | &.info-bar--bottom { | 53 | &.info-bar--bottom { |
50 | order: 10; | 54 | order: 10; |
51 | } | 55 | } |
diff --git a/src/styles/layout.scss b/src/styles/layout.scss index d87df2684..afdd7dec7 100644 --- a/src/styles/layout.scss +++ b/src/styles/layout.scss | |||
@@ -42,6 +42,7 @@ html { | |||
42 | z-index: 200; | 42 | z-index: 200; |
43 | text-align: center; | 43 | text-align: center; |
44 | color: $theme-text-color; | 44 | color: $theme-text-color; |
45 | padding-bottom: 10px; | ||
45 | 46 | ||
46 | .sidebar__add-service { | 47 | .sidebar__add-service { |
47 | width: 32px; | 48 | width: 32px; |
@@ -52,26 +53,28 @@ html { | |||
52 | color: $theme-gray-light; | 53 | color: $theme-gray-light; |
53 | } | 54 | } |
54 | 55 | ||
55 | .sidebar__settings-button { | 56 | .sidebar__button { |
56 | height: auto; | 57 | width: $theme-sidebar-width; |
57 | padding: 20px 0; | 58 | padding: 7px 0; |
58 | font-size: 12px; | 59 | font-size: 24px; |
59 | position: relative; | 60 | position: relative; |
61 | color: $theme-gray-light; | ||
60 | 62 | ||
61 | .emoji { | 63 | &:hover { |
62 | position: absolute; | 64 | color: darken($theme-gray-light, 10%); |
63 | top: 18px; | 65 | } |
64 | right: 12px; | ||
65 | 66 | ||
66 | img { | 67 | &:active { |
67 | width: 18px; | 68 | color: lighten($theme-gray-light, 10%); |
68 | } | ||
69 | } | 69 | } |
70 | } | ||
71 | 70 | ||
72 | .sidebar__logo { | 71 | &.is-muted { |
73 | width: 40px; | 72 | color: $theme-brand-primary; |
74 | height: auto; | 73 | } |
74 | |||
75 | &--new-service { | ||
76 | padding-bottom: 6px; | ||
77 | } | ||
75 | } | 78 | } |
76 | 79 | ||
77 | & > div { | 80 | & > div { |
diff --git a/src/styles/recipes.scss b/src/styles/recipes.scss index 017aa4fe2..1b519a5e5 100644 --- a/src/styles/recipes.scss +++ b/src/styles/recipes.scss | |||
@@ -29,6 +29,10 @@ | |||
29 | pointer-events: none; | 29 | pointer-events: none; |
30 | } | 30 | } |
31 | } | 31 | } |
32 | |||
33 | &__service-request { | ||
34 | float: right; | ||
35 | } | ||
32 | } | 36 | } |
33 | 37 | ||
34 | .recipe-teaser { | 38 | .recipe-teaser { |
diff --git a/src/styles/services.scss b/src/styles/services.scss index 3347ea9d7..282c15121 100644 --- a/src/styles/services.scss +++ b/src/styles/services.scss | |||
@@ -8,7 +8,12 @@ | |||
8 | background: #FFF; | 8 | background: #FFF; |
9 | order: 5; | 9 | order: 5; |
10 | 10 | ||
11 | .services__webview { | 11 | .services__webview-wrapper { |
12 | background: $theme-gray-lighter; | ||
13 | } | ||
14 | |||
15 | .services__webview, | ||
16 | .services__info-layer { | ||
12 | position: absolute; | 17 | position: absolute; |
13 | width: 100%; | 18 | width: 100%; |
14 | top: 0; | 19 | top: 0; |
@@ -38,7 +43,8 @@ | |||
38 | } | 43 | } |
39 | } | 44 | } |
40 | 45 | ||
41 | .services__no-service { | 46 | .services__no-service, |
47 | .services__info-layer { | ||
42 | display: flex; | 48 | display: flex; |
43 | flex-direction: column; | 49 | flex-direction: column; |
44 | justify-content: center; | 50 | justify-content: center; |
@@ -51,10 +57,15 @@ | |||
51 | color: $theme-gray-dark; | 57 | color: $theme-gray-dark; |
52 | } | 58 | } |
53 | 59 | ||
54 | a.button { | 60 | a.button, |
55 | margin-top: 40px; | 61 | button { |
56 | // color: #FFF; | 62 | margin: 40px 0 20px; |
57 | // border-color: #FFF; | ||
58 | } | 63 | } |
59 | } | 64 | } |
65 | |||
66 | .services__info-layer { | ||
67 | position: absolut; | ||
68 | z-index: 110; | ||
69 | } | ||
70 | |||
60 | } | 71 | } |
diff --git a/src/styles/settings.scss b/src/styles/settings.scss index 9b19deb4e..6e93094b4 100644 --- a/src/styles/settings.scss +++ b/src/styles/settings.scss | |||
@@ -40,7 +40,7 @@ | |||
40 | width: 100%; | 40 | width: 100%; |
41 | max-width: 900px; | 41 | max-width: 900px; |
42 | min-height: 400px; | 42 | min-height: 400px; |
43 | max-height: 600px; | 43 | max-height: 720px; |
44 | z-index: 9999; | 44 | z-index: 9999; |
45 | background: #FFF; | 45 | background: #FFF; |
46 | border-radius: $theme-border-radius; | 46 | border-radius: $theme-border-radius; |
@@ -169,7 +169,7 @@ | |||
169 | } | 169 | } |
170 | } | 170 | } |
171 | 171 | ||
172 | .settings__indirect-message-help { | 172 | .settings__help { |
173 | margin: -10px 0 20px 55px;; | 173 | margin: -10px 0 20px 55px;; |
174 | font-size: 12px; | 174 | font-size: 12px; |
175 | color: $theme-gray-light; | 175 | color: $theme-gray-light; |
@@ -334,6 +334,12 @@ | |||
334 | background: none; | 334 | background: none; |
335 | padding: 0; | 335 | padding: 0; |
336 | } | 336 | } |
337 | |||
338 | .legal { | ||
339 | text-align: center; | ||
340 | margin-top: 20px; | ||
341 | color: $theme-gray-light; | ||
342 | } | ||
337 | } | 343 | } |
338 | 344 | ||
339 | .settings-navigation { | 345 | .settings-navigation { |
@@ -344,9 +350,10 @@ | |||
344 | flex-direction: column; | 350 | flex-direction: column; |
345 | 351 | ||
346 | .settings-navigation__link { | 352 | .settings-navigation__link { |
347 | display: block; | 353 | display: flex; |
354 | align-items: center; | ||
348 | height: 50px; | 355 | height: 50px; |
349 | line-height: 50px; | 356 | flex-shrink: 0; |
350 | text-decoration: none; | 357 | text-decoration: none; |
351 | color: $theme-text-color; | 358 | color: $theme-text-color; |
352 | padding: 0 20px; | 359 | padding: 0 20px; |
diff --git a/src/styles/subscription.scss b/src/styles/subscription.scss index 63183f085..01d8f4ecb 100644 --- a/src/styles/subscription.scss +++ b/src/styles/subscription.scss | |||
@@ -36,7 +36,7 @@ | |||
36 | margin-right: 0; | 36 | margin-right: 0; |
37 | } | 37 | } |
38 | 38 | ||
39 | &:last-of-type { | 39 | &:nth-child(4) { |
40 | margin-right: 0; | 40 | margin-right: 0; |
41 | margin-top: 2%; | 41 | margin-top: 2%; |
42 | width: 100%; | 42 | width: 100%; |
@@ -55,7 +55,8 @@ | |||
55 | margin-right: 0; | 55 | margin-right: 0; |
56 | } | 56 | } |
57 | 57 | ||
58 | &:last-of-type { | 58 | &:nth-child(3) { |
59 | margin-top: 2%; | ||
59 | width: 100%; | 60 | width: 100%; |
60 | } | 61 | } |
61 | } | 62 | } |
diff --git a/src/styles/tabs.scss b/src/styles/tabs.scss index 75568898b..3ffc53558 100644 --- a/src/styles/tabs.scss +++ b/src/styles/tabs.scss | |||
@@ -20,7 +20,7 @@ | |||
20 | align-items: center; | 20 | align-items: center; |
21 | position: relative; | 21 | position: relative; |
22 | width: $theme-sidebar-width; | 22 | width: $theme-sidebar-width; |
23 | height: $theme-sidebar-width; | 23 | height: 65px; |
24 | min-height: 50px; | 24 | min-height: 50px; |
25 | transition: background $theme-transition-time; | 25 | transition: background $theme-transition-time; |
26 | 26 | ||
@@ -33,6 +33,12 @@ | |||
33 | } | 33 | } |
34 | } | 34 | } |
35 | 35 | ||
36 | &.is-disabled { | ||
37 | .tab-item__icon { | ||
38 | filter: grayscale(100%) opacity(0.2); | ||
39 | } | ||
40 | } | ||
41 | |||
36 | &.has-custom-icon { | 42 | &.has-custom-icon { |
37 | .tab-item__icon { | 43 | .tab-item__icon { |
38 | border-radius: $theme-border-radius; | 44 | border-radius: $theme-border-radius; |
@@ -41,6 +47,12 @@ | |||
41 | } | 47 | } |
42 | } | 48 | } |
43 | 49 | ||
50 | &:active { | ||
51 | .tab-item__icon { | ||
52 | opacity: 0.7; | ||
53 | } | ||
54 | } | ||
55 | |||
44 | .tab-item__icon { | 56 | .tab-item__icon { |
45 | width: 30px; | 57 | width: 30px; |
46 | height: auto; | 58 | height: auto; |
@@ -55,8 +67,8 @@ | |||
55 | padding: 0px 5px; | 67 | padding: 0px 5px; |
56 | font-size: 11px; | 68 | font-size: 11px; |
57 | position: absolute; | 69 | position: absolute; |
58 | right: 5px; | 70 | right: 8px; |
59 | bottom: 5px; | 71 | bottom: 8px; |
60 | display: flex; | 72 | display: flex; |
61 | justify-content: center; | 73 | justify-content: center; |
62 | align-items: center; | 74 | align-items: center; |
diff --git a/src/styles/type.scss b/src/styles/type.scss index 935a36f4b..cacbec482 100644 --- a/src/styles/type.scss +++ b/src/styles/type.scss | |||
@@ -71,3 +71,8 @@ a { | |||
71 | .label { | 71 | .label { |
72 | @include formLabel(); | 72 | @include formLabel(); |
73 | } | 73 | } |
74 | |||
75 | .footnote { | ||
76 | font-size: 12px; | ||
77 | color: $theme-gray-light; | ||
78 | } \ No newline at end of file | ||