diff options
Diffstat (limited to 'src/styles')
-rw-r--r-- | src/styles/auth.scss | 2 | ||||
-rw-r--r-- | src/styles/badge.scss | 3 | ||||
-rw-r--r-- | src/styles/info-bar.scss | 4 | ||||
-rw-r--r-- | src/styles/layout.scss | 22 | ||||
-rw-r--r-- | src/styles/settings.scss | 40 | ||||
-rw-r--r-- | src/styles/toggle.scss | 2 |
6 files changed, 45 insertions, 28 deletions
diff --git a/src/styles/auth.scss b/src/styles/auth.scss index 817801982..0a075036a 100644 --- a/src/styles/auth.scss +++ b/src/styles/auth.scss | |||
@@ -107,7 +107,7 @@ | |||
107 | &__scroll-container { | 107 | &__scroll-container { |
108 | max-height: 100vh; | 108 | max-height: 100vh; |
109 | padding: 80px 0; | 109 | padding: 80px 0; |
110 | overflow: scroll; | 110 | overflow: auto; |
111 | width: 100%; | 111 | width: 100%; |
112 | } | 112 | } |
113 | 113 | ||
diff --git a/src/styles/badge.scss b/src/styles/badge.scss index f9fac039a..69879de31 100644 --- a/src/styles/badge.scss +++ b/src/styles/badge.scss | |||
@@ -8,7 +8,7 @@ | |||
8 | &.badge--primary, | 8 | &.badge--primary, |
9 | &.badge--premium { | 9 | &.badge--premium { |
10 | background: $theme-brand-primary; | 10 | background: $theme-brand-primary; |
11 | color: $dark-theme-gray-smoke; | 11 | color: $dark-theme-gray-lightest; |
12 | } | 12 | } |
13 | } | 13 | } |
14 | 14 | ||
@@ -19,6 +19,7 @@ | |||
19 | display: inline-block; | 19 | display: inline-block; |
20 | font-size: 14px; | 20 | font-size: 14px; |
21 | padding: 5px 10px; | 21 | padding: 5px 10px; |
22 | letter-spacing: 0; | ||
22 | 23 | ||
23 | &.badge--primary, | 24 | &.badge--primary, |
24 | &.badge--premium { | 25 | &.badge--premium { |
diff --git a/src/styles/info-bar.scss b/src/styles/info-bar.scss index fb4917358..d3010942f 100644 --- a/src/styles/info-bar.scss +++ b/src/styles/info-bar.scss | |||
@@ -43,6 +43,10 @@ | |||
43 | } | 43 | } |
44 | } | 44 | } |
45 | 45 | ||
46 | .info-bar__inline-button { | ||
47 | color: white; | ||
48 | } | ||
49 | |||
46 | &.info-bar--bottom { order: 10; } | 50 | &.info-bar--bottom { order: 10; } |
47 | 51 | ||
48 | &.info-bar--primary { | 52 | &.info-bar--primary { |
diff --git a/src/styles/layout.scss b/src/styles/layout.scss index 8b7cc512a..e858b7904 100644 --- a/src/styles/layout.scss +++ b/src/styles/layout.scss | |||
@@ -18,8 +18,14 @@ html { overflow: hidden; } | |||
18 | font-size: 22px; | 18 | font-size: 22px; |
19 | 19 | ||
20 | &:hover, | 20 | &:hover, |
21 | &:active { color: $dark-theme-gray-smoke; } | 21 | &:active { |
22 | &.is-muted { color: $theme-brand-primary; } | 22 | color: $dark-theme-gray-smoke; |
23 | } | ||
24 | |||
25 | &.is-muted, | ||
26 | &.is-active { | ||
27 | color: $theme-brand-primary; | ||
28 | } | ||
23 | } | 29 | } |
24 | } | 30 | } |
25 | 31 | ||
@@ -33,6 +39,7 @@ html { overflow: hidden; } | |||
33 | .app__content { display: flex; } | 39 | .app__content { display: flex; } |
34 | 40 | ||
35 | .app__service { | 41 | .app__service { |
42 | position: relative; | ||
36 | display: flex; | 43 | display: flex; |
37 | flex: 1; | 44 | flex: 1; |
38 | flex-direction: column; | 45 | flex-direction: column; |
@@ -84,7 +91,7 @@ html { overflow: hidden; } | |||
84 | 91 | ||
85 | &:hover, | 92 | &:hover, |
86 | &:active { color: lighten($theme-gray-light, 10%); } | 93 | &:active { color: lighten($theme-gray-light, 10%); } |
87 | &.is-muted { color: $theme-brand-primary; } | 94 | &.is-muted, &.is-active { color: $theme-brand-primary; } |
88 | &--new-service { padding-bottom: 6px; } | 95 | &--new-service { padding-bottom: 6px; } |
89 | } | 96 | } |
90 | 97 | ||
@@ -124,15 +131,14 @@ html { overflow: hidden; } | |||
124 | background: $theme-brand-warning; | 131 | background: $theme-brand-warning; |
125 | color: #FFF; | 132 | color: #FFF; |
126 | display: block; | 133 | display: block; |
127 | font-size: 10px; | 134 | font-size: 8px; |
128 | height: auto; | 135 | height: auto; |
129 | padding: 4px; | 136 | padding: 4px; |
130 | position: fixed; | 137 | position: fixed; |
131 | right: 5px; | 138 | left: 9px; |
132 | top: 5px; | 139 | bottom: 0px; |
133 | transition: opacity .5s ease; | 140 | transition: opacity .5s ease; |
134 | width: auto; | 141 | width: auto; |
135 | z-index: 999999999; | 142 | z-index: 999999999; |
136 | 143 | pointer-events: none; | |
137 | &:hover { opacity: 0; } | ||
138 | } | 144 | } |
diff --git a/src/styles/settings.scss b/src/styles/settings.scss index 750b6bedd..1baff8b54 100644 --- a/src/styles/settings.scss +++ b/src/styles/settings.scss | |||
@@ -61,14 +61,9 @@ | |||
61 | 61 | ||
62 | .account { | 62 | .account { |
63 | .account__box { background: $dark-theme-gray-darker; } | 63 | .account__box { background: $dark-theme-gray-darker; } |
64 | |||
65 | .invoices { | ||
66 | td { border-bottom: 1px solid $dark-theme-gray-darker; } | ||
67 | .invoices__action button { color: $theme-brand-primary; } | ||
68 | } | ||
69 | } | 64 | } |
70 | 65 | ||
71 | .premium-info { | 66 | .premium-info { |
72 | background: $dark-theme-gray-darker; | 67 | background: $dark-theme-gray-darker; |
73 | border: 2px solid $theme-brand-primary; | 68 | border: 2px solid $theme-brand-primary; |
74 | } | 69 | } |
@@ -329,15 +324,6 @@ | |||
329 | .account__avatar { | 324 | .account__avatar { |
330 | margin-right: 20px; | 325 | margin-right: 20px; |
331 | position: relative; | 326 | position: relative; |
332 | |||
333 | .emoji img { width: 30px; } | ||
334 | } | ||
335 | |||
336 | .account__avatar-premium { | ||
337 | font-size: 26px; | ||
338 | position: absolute; | ||
339 | right: 2px; | ||
340 | top: 2px; | ||
341 | } | 327 | } |
342 | 328 | ||
343 | .account__info { | 329 | .account__info { |
@@ -345,6 +331,7 @@ | |||
345 | 331 | ||
346 | h2 { margin-bottom: 5px; } | 332 | h2 { margin-bottom: 5px; } |
347 | .badge { margin-top: 5px; } | 333 | .badge { margin-top: 5px; } |
334 | .username { margin-right: 10 } | ||
348 | } | 335 | } |
349 | 336 | ||
350 | .account__subscription { | 337 | .account__subscription { |
@@ -354,6 +341,22 @@ | |||
354 | .badge { margin-left: 10px; } | 341 | .badge { margin-left: 10px; } |
355 | } | 342 | } |
356 | 343 | ||
344 | .badge--premium { | ||
345 | margin-left: 1px; | ||
346 | position: relative; | ||
347 | top: -3px; | ||
348 | padding-top: 4px; | ||
349 | color: #FFF; | ||
350 | border-radius: 3px; | ||
351 | } | ||
352 | |||
353 | |||
354 | .manage-user-links { | ||
355 | margin-top: 20px; | ||
356 | display: flex; | ||
357 | justify-content: space-between; | ||
358 | } | ||
359 | |||
357 | .account__subscription-button { margin-left: auto; } | 360 | .account__subscription-button { margin-left: auto; } |
358 | .franz-form__button { white-space: nowrap; } | 361 | .franz-form__button { white-space: nowrap; } |
359 | div { height: auto; } | 362 | div { height: auto; } |
@@ -414,6 +417,7 @@ | |||
414 | 417 | ||
415 | .settings-navigation__link { | 418 | .settings-navigation__link { |
416 | align-items: center; | 419 | align-items: center; |
420 | justify-content: space-between; | ||
417 | color: $theme-text-color; | 421 | color: $theme-text-color; |
418 | display: flex; | 422 | display: flex; |
419 | flex-shrink: 0; | 423 | flex-shrink: 0; |
@@ -425,7 +429,9 @@ | |||
425 | &:hover { | 429 | &:hover { |
426 | background: darken($theme-gray-lightest, 5%); | 430 | background: darken($theme-gray-lightest, 5%); |
427 | 431 | ||
428 | .badge { background: #FFF; } | 432 | .badge { |
433 | background: #FFF; | ||
434 | } | ||
429 | } | 435 | } |
430 | 436 | ||
431 | &.is-active { | 437 | &.is-active { |
@@ -442,8 +448,8 @@ | |||
442 | .settings-navigation__expander { flex: 1; } | 448 | .settings-navigation__expander { flex: 1; } |
443 | 449 | ||
444 | .badge { | 450 | .badge { |
451 | |||
445 | display: initial; | 452 | display: initial; |
446 | margin-left: 5px; | ||
447 | transition: background $theme-transition-time, color $theme-transition-time; | 453 | transition: background $theme-transition-time, color $theme-transition-time; |
448 | } | 454 | } |
449 | 455 | ||
diff --git a/src/styles/toggle.scss b/src/styles/toggle.scss index 0ce0c3379..52675ceed 100644 --- a/src/styles/toggle.scss +++ b/src/styles/toggle.scss | |||
@@ -41,7 +41,7 @@ $toggle-button-size: 22px; | |||
41 | 41 | ||
42 | &.is-active .franz-form__toggle-button { | 42 | &.is-active .franz-form__toggle-button { |
43 | background: $theme-brand-primary; | 43 | background: $theme-brand-primary; |
44 | left: $toggle-width - $toggle-size - 3;; | 44 | left: $toggle-width - $toggle-size - 3; |
45 | } | 45 | } |
46 | 46 | ||
47 | input { display: none; } | 47 | input { display: none; } |