diff options
author | Stefan Malzner <stefan@adlk.io> | 2017-12-24 22:11:36 +0100 |
---|---|---|
committer | Stefan Malzner <stefan@adlk.io> | 2017-12-24 22:11:36 +0100 |
commit | df44b69c4655415fe1e44689ece443ec06ef0f52 (patch) | |
tree | e677ed5f5328bb3b14bc976c7392d8e259f89034 /src/styles | |
parent | [wip] add icon upload (diff) | |
parent | Merge pull request #494 from heavypackets/websecurity-enable-patch (diff) | |
download | ferdium-app-df44b69c4655415fe1e44689ece443ec06ef0f52.tar.gz ferdium-app-df44b69c4655415fe1e44689ece443ec06ef0f52.tar.zst ferdium-app-df44b69c4655415fe1e44689ece443ec06ef0f52.zip |
Merge branch 'develop' into feature/icon-upload
Diffstat (limited to 'src/styles')
-rw-r--r-- | src/styles/content-tabs.scss | 12 | ||||
-rw-r--r-- | src/styles/info-bar.scss | 4 | ||||
-rw-r--r-- | src/styles/input.scss | 4 | ||||
-rw-r--r-- | src/styles/recipes.scss | 4 | ||||
-rw-r--r-- | src/styles/services.scss | 7 | ||||
-rw-r--r-- | src/styles/settings.scss | 40 | ||||
-rw-r--r-- | src/styles/subscription.scss | 5 | ||||
-rw-r--r-- | src/styles/tabs.scss | 24 | ||||
-rw-r--r-- | src/styles/welcome.scss | 25 |
9 files changed, 99 insertions, 26 deletions
diff --git a/src/styles/content-tabs.scss b/src/styles/content-tabs.scss index aa3c8594b..47dfea2c4 100644 --- a/src/styles/content-tabs.scss +++ b/src/styles/content-tabs.scss | |||
@@ -12,15 +12,17 @@ | |||
12 | flex: 1; | 12 | flex: 1; |
13 | // border: 1px solid $theme-gray-lightest; | 13 | // border: 1px solid $theme-gray-lightest; |
14 | color: $theme-gray-dark; | 14 | color: $theme-gray-dark; |
15 | background: $theme-gray-lightest; | 15 | background: linear-gradient($theme-gray-lightest 80%, darken($theme-gray-lightest, 3%)); |
16 | border-bottom: 1px solid $theme-gray-lighter; | 16 | border-right: 1px solid $theme-gray-lighter; |
17 | box-shadow: inset 0px -3px 10px rgba(black, 0.05); | 17 | transition: background $theme-transition-time; |
18 | transition: all $theme-transition-time; | 18 | |
19 | &:last-of-type { | ||
20 | border-right: 0; | ||
21 | } | ||
19 | 22 | ||
20 | &.is-active { | 23 | &.is-active { |
21 | background: $theme-brand-primary; | 24 | background: $theme-brand-primary; |
22 | color: #FFF; | 25 | color: #FFF; |
23 | border-bottom: 1px solid $theme-brand-primary; | ||
24 | box-shadow: none; | 26 | box-shadow: none; |
25 | } | 27 | } |
26 | } | 28 | } |
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/input.scss b/src/styles/input.scss index 814dce5f8..7042f56e8 100644 --- a/src/styles/input.scss +++ b/src/styles/input.scss | |||
@@ -47,6 +47,10 @@ | |||
47 | padding: 8px; | 47 | padding: 8px; |
48 | // font-size: 18px; | 48 | // font-size: 18px; |
49 | color: $theme-gray; | 49 | color: $theme-gray; |
50 | |||
51 | &::placeholder { | ||
52 | color: lighten($theme-gray-light, 10%); | ||
53 | } | ||
50 | } | 54 | } |
51 | 55 | ||
52 | .franz-form__input-prefix, | 56 | .franz-form__input-prefix, |
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 2a6540e0b..9f6cfc772 100644 --- a/src/styles/services.scss +++ b/src/styles/services.scss | |||
@@ -13,7 +13,7 @@ | |||
13 | } | 13 | } |
14 | 14 | ||
15 | .services__webview, | 15 | .services__webview, |
16 | .services__crash-handler { | 16 | .services__info-layer { |
17 | position: absolute; | 17 | position: absolute; |
18 | width: 100%; | 18 | width: 100%; |
19 | top: 0; | 19 | top: 0; |
@@ -24,6 +24,7 @@ | |||
24 | display: inline-flex; | 24 | display: inline-flex; |
25 | width: 0px; | 25 | width: 0px; |
26 | height: 0px; | 26 | height: 0px; |
27 | background: $theme-gray-lighter; | ||
27 | } | 28 | } |
28 | 29 | ||
29 | &.is-active { | 30 | &.is-active { |
@@ -44,7 +45,7 @@ | |||
44 | } | 45 | } |
45 | 46 | ||
46 | .services__no-service, | 47 | .services__no-service, |
47 | .services__crash-handler { | 48 | .services__info-layer { |
48 | display: flex; | 49 | display: flex; |
49 | flex-direction: column; | 50 | flex-direction: column; |
50 | justify-content: center; | 51 | justify-content: center; |
@@ -63,7 +64,7 @@ | |||
63 | } | 64 | } |
64 | } | 65 | } |
65 | 66 | ||
66 | .services__crash-handler { | 67 | .services__info-layer { |
67 | position: absolut; | 68 | position: absolut; |
68 | z-index: 110; | 69 | z-index: 110; |
69 | } | 70 | } |
diff --git a/src/styles/settings.scss b/src/styles/settings.scss index 556803c46..283913ab7 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; |
@@ -165,8 +165,23 @@ | |||
165 | } | 165 | } |
166 | } | 166 | } |
167 | 167 | ||
168 | .settings__options { | 168 | &__options { |
169 | margin-top: 30px; | 169 | margin-top: 20px; |
170 | } | ||
171 | |||
172 | &__settings-group { | ||
173 | margin-top: 10px; | ||
174 | |||
175 | h3 { | ||
176 | font-weight: bold; | ||
177 | margin: 25px 0 15px; | ||
178 | color: $theme-gray-light; | ||
179 | letter-spacing: -0.1px; | ||
180 | |||
181 | &:first-of-type { | ||
182 | margin-top: 0; | ||
183 | } | ||
184 | } | ||
170 | } | 185 | } |
171 | 186 | ||
172 | .settings__message { | 187 | .settings__message { |
@@ -187,10 +202,6 @@ | |||
187 | margin: -10px 0 20px 55px;; | 202 | margin: -10px 0 20px 55px;; |
188 | font-size: 12px; | 203 | font-size: 12px; |
189 | color: $theme-gray-light; | 204 | color: $theme-gray-light; |
190 | |||
191 | &:last-of-type { | ||
192 | margin-bottom: 30px; | ||
193 | } | ||
194 | } | 205 | } |
195 | 206 | ||
196 | .settings__controls { | 207 | .settings__controls { |
@@ -295,6 +306,10 @@ | |||
295 | margin-left: auto; | 306 | margin-left: auto; |
296 | } | 307 | } |
297 | 308 | ||
309 | .franz-form__button { | ||
310 | white-space: nowrap; | ||
311 | } | ||
312 | |||
298 | div { | 313 | div { |
299 | height: auto; | 314 | height: auto; |
300 | } | 315 | } |
@@ -342,6 +357,12 @@ | |||
342 | background: none; | 357 | background: none; |
343 | padding: 0; | 358 | padding: 0; |
344 | } | 359 | } |
360 | |||
361 | .legal { | ||
362 | text-align: center; | ||
363 | margin-top: 20px; | ||
364 | color: $theme-gray-light; | ||
365 | } | ||
345 | } | 366 | } |
346 | 367 | ||
347 | .settings-navigation { | 368 | .settings-navigation { |
@@ -352,9 +373,10 @@ | |||
352 | flex-direction: column; | 373 | flex-direction: column; |
353 | 374 | ||
354 | .settings-navigation__link { | 375 | .settings-navigation__link { |
355 | display: block; | 376 | display: flex; |
377 | align-items: center; | ||
356 | height: 50px; | 378 | height: 50px; |
357 | line-height: 50px; | 379 | flex-shrink: 0; |
358 | text-decoration: none; | 380 | text-decoration: none; |
359 | color: $theme-text-color; | 381 | color: $theme-text-color; |
360 | padding: 0 20px; | 382 | 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 8347de3b4..ac48aabd6 100644 --- a/src/styles/tabs.scss +++ b/src/styles/tabs.scss | |||
@@ -67,8 +67,28 @@ | |||
67 | padding: 0px 5px; | 67 | padding: 0px 5px; |
68 | font-size: 11px; | 68 | font-size: 11px; |
69 | position: absolute; | 69 | position: absolute; |
70 | right: 5px; | 70 | right: 8px; |
71 | bottom: 5px; | 71 | bottom: 8px; |
72 | display: flex; | ||
73 | justify-content: center; | ||
74 | align-items: center; | ||
75 | |||
76 | &.is-indirect { | ||
77 | padding-top: 0px; | ||
78 | } | ||
79 | } | ||
80 | |||
81 | .tab-item__info-badge { | ||
82 | width: 17px; | ||
83 | height: 17px; | ||
84 | background: $theme-gray-light; | ||
85 | color: $theme-gray-lighter; | ||
86 | border-radius: 20px; | ||
87 | padding: 0px 5px; | ||
88 | font-size: 11px; | ||
89 | position: absolute; | ||
90 | right: 8px; | ||
91 | bottom: 8px; | ||
72 | display: flex; | 92 | display: flex; |
73 | justify-content: center; | 93 | justify-content: center; |
74 | align-items: center; | 94 | align-items: center; |
diff --git a/src/styles/welcome.scss b/src/styles/welcome.scss index 5365921fb..cfdcc80ad 100644 --- a/src/styles/welcome.scss +++ b/src/styles/welcome.scss | |||
@@ -58,17 +58,32 @@ | |||
58 | } | 58 | } |
59 | 59 | ||
60 | &__featured-services { | 60 | &__featured-services { |
61 | margin-top: 150px; | ||
62 | text-align: center; | 61 | text-align: center; |
63 | margin-top: 80px; | 62 | width: 480px; |
63 | margin: 80px auto 0 auto; | ||
64 | display: flex; | ||
65 | align-items: center; | ||
66 | flex-wrap: wrap; | ||
67 | background: #FFF; | ||
68 | border-radius: 6px; | ||
69 | padding: 20px 20px 5px; | ||
64 | } | 70 | } |
65 | 71 | ||
66 | &__featured-service { | 72 | &__featured-service { |
67 | width: 35px; | 73 | width: 35px; |
68 | margin-right: 30px; | 74 | height: 35px; |
75 | margin: 0 10px 15px; | ||
76 | filter: grayscale(1) | ||
77 | opacity(0.5); | ||
78 | transition: 0.5s filter, 0.5s opacity; | ||
79 | |||
80 | &:hover { | ||
81 | filter: grayscale(0); | ||
82 | opacity: (1); | ||
83 | } | ||
69 | 84 | ||
70 | &:last-of-type { | 85 | img { |
71 | margin-right: 0; | 86 | width: 35px; |
72 | } | 87 | } |
73 | } | 88 | } |
74 | } | 89 | } |