diff options
Diffstat (limited to 'src/styles')
32 files changed, 1139 insertions, 990 deletions
diff --git a/src/styles/animations.scss b/src/styles/animations.scss index 1e49af207..b121af7d2 100644 --- a/src/styles/animations.scss +++ b/src/styles/animations.scss | |||
@@ -1,49 +1,41 @@ | |||
1 | // FadeIn | 1 | // FadeIn |
2 | .fadeIn-appear { | 2 | .fadeIn-appear { opacity: .01; } |
3 | opacity: 0.01; | ||
4 | } | ||
5 | 3 | ||
6 | .fadeIn-appear.fadeIn-appear-active { | 4 | .fadeIn-appear.fadeIn-appear-active { |
7 | opacity: 1; | 5 | opacity: 1; |
8 | transition: opacity 0.5s ease-out; | 6 | transition: opacity .5s ease-out; |
9 | } | 7 | } |
10 | 8 | ||
11 | .fadeIn-enter { | 9 | .fadeIn-enter { |
12 | opacity: 0.01; | 10 | opacity: .01; |
13 | transition: opacity 0.5s ease-out; | 11 | transition: opacity .5s ease-out; |
14 | } | 12 | } |
15 | 13 | ||
16 | .fadeIn-leave { | 14 | .fadeIn-leave { opacity: 1; } |
17 | opacity: 1; | ||
18 | } | ||
19 | 15 | ||
20 | .fadeIn-leave.fadeIn-leave-active { | 16 | .fadeIn-leave.fadeIn-leave-active { |
21 | opacity: 0.01; | 17 | opacity: .01; |
22 | transition: opacity 300ms ease-in; | 18 | transition: opacity 300ms ease-in; |
23 | } | 19 | } |
24 | 20 | ||
25 | // FadeIn Fast | 21 | // FadeIn Fast |
26 | .fadeIn-fast-appear { | 22 | .fadeIn-fast-appear { opacity: .01; } |
27 | opacity: 0.01; | ||
28 | } | ||
29 | 23 | ||
30 | .fadeIn-fast-appear.fadeIn-fast-appear-active { | 24 | .fadeIn-fast-appear.fadeIn-fast-appear-active { |
31 | opacity: 1; | 25 | opacity: 1; |
32 | transition: opacity 0.25s ease-out; | 26 | transition: opacity .25s ease-out; |
33 | } | 27 | } |
34 | 28 | ||
35 | .fadeIn-fast-enter { | 29 | .fadeIn-fast-enter { |
36 | opacity: 0.01; | 30 | opacity: .01; |
37 | transition: opacity 0.25s ease-out; | 31 | transition: opacity .25s ease-out; |
38 | } | 32 | } |
39 | 33 | ||
40 | .fadeIn-fast-leave { | 34 | .fadeIn-fast-leave { opacity: 1; } |
41 | opacity: 1; | ||
42 | } | ||
43 | 35 | ||
44 | .fadeIn-fast-leave.fadeIn-fast-leave-active { | 36 | .fadeIn-fast-leave.fadeIn-fast-leave-active { |
45 | opacity: 0.01; | 37 | opacity: .01; |
46 | transition: opacity 0.25s ease-in; | 38 | transition: opacity .25s ease-in; |
47 | } | 39 | } |
48 | 40 | ||
49 | // Slide down | 41 | // Slide down |
@@ -54,37 +46,35 @@ | |||
54 | 46 | ||
55 | .slideDown-appear.slideDown-appear-active { | 47 | .slideDown-appear.slideDown-appear-active { |
56 | max-height: 500px; | 48 | max-height: 500px; |
57 | transition: max-height 0.5s ease-out; | 49 | transition: max-height .5s ease-out; |
58 | } | 50 | } |
59 | 51 | ||
60 | .slideDown-enter { | 52 | .slideDown-enter { |
61 | max-height: 0; | 53 | max-height: 0; |
62 | transition: max-height 0.5s ease-out; | 54 | transition: max-height .5s ease-out; |
63 | } | 55 | } |
64 | 56 | ||
65 | // Slide up | 57 | // Slide up |
66 | .slideUp-appear { | 58 | .slideUp-appear { |
67 | transform: translateY(20px); | ||
68 | opacity: 0; | 59 | opacity: 0; |
60 | transform: translateY(20px); | ||
69 | } | 61 | } |
70 | 62 | ||
71 | .slideUp-appear.slideUp-appear-active { | 63 | .slideUp-appear.slideUp-appear-active { |
72 | transform: translateY(0px); | ||
73 | opacity: 1; | 64 | opacity: 1; |
74 | transition: all 0.3s ease-out; | 65 | transform: translateY(0px); |
66 | transition: all .3s ease-out; | ||
75 | } | 67 | } |
76 | 68 | ||
77 | .slideUp-enter { | 69 | .slideUp-enter { |
78 | transform: translateY(20px); | ||
79 | opacity: 0; | 70 | opacity: 0; |
80 | transition: all 0.3s ease-out; | 71 | transform: translateY(20px); |
72 | transition: all .3s ease-out; | ||
81 | } | 73 | } |
82 | 74 | ||
83 | .slideUp-leave { | 75 | .slideUp-leave { opacity: 1; } |
84 | opacity: 1; | ||
85 | } | ||
86 | 76 | ||
87 | .slideUp-leave.slideUp-leave-active { | 77 | .slideUp-leave.slideUp-leave-active { |
88 | opacity: 0.01; | 78 | opacity: .01; |
89 | transition: opacity 300ms ease-in; | 79 | transition: opacity 300ms ease-in; |
90 | } | 80 | } |
diff --git a/src/styles/auth.scss b/src/styles/auth.scss index 9ad71867c..54e264dc6 100644 --- a/src/styles/auth.scss +++ b/src/styles/auth.scss | |||
@@ -1,144 +1,135 @@ | |||
1 | @import './config.scss'; | 1 | @import './config.scss'; |
2 | 2 | ||
3 | .theme__dark .auth { | ||
4 | background: $dark-theme-gray-darkest; | ||
5 | |||
6 | .auth__container { | ||
7 | background: $dark-theme-gray-darker; | ||
8 | box-shadow: 0 0 50px rgba($dark-theme-black, .2); | ||
9 | } | ||
10 | |||
11 | .auth__logo.auth__logo--sm { | ||
12 | border: 4px solid $dark-theme-black; | ||
13 | box-shadow: 0 0 6px rgba($dark-theme-black, .5); | ||
14 | } | ||
15 | |||
16 | .auth__links { | ||
17 | background: $dark-theme-gray-dark; | ||
18 | |||
19 | a { color: $dark-theme-text-color; } | ||
20 | } | ||
21 | |||
22 | .legal { | ||
23 | color: $dark-theme-text-color; | ||
24 | |||
25 | a { color: $dark-theme-gray-lightest; } | ||
26 | } | ||
27 | } | ||
28 | |||
3 | .auth { | 29 | .auth { |
30 | background: $theme-brand-primary; | ||
4 | display: flex; | 31 | display: flex; |
5 | justify-content: center; | 32 | justify-content: center; |
6 | background: $theme-brand-primary; | ||
7 | 33 | ||
8 | .auth__layout { | 34 | .auth__layout { |
9 | width: 100%; | 35 | width: 100%; |
10 | &>div>span { | ||
11 | width: 100%; | ||
12 | } | ||
13 | // display: flex; | ||
14 | // align-items: center; | ||
15 | // justify-content: center; | ||
16 | // flex-direction: column; | ||
17 | |||
18 | // @media only screen and (max-height : 700px) { | ||
19 | // margin: 100px 0; | ||
20 | // } | ||
21 | 36 | ||
22 | &>div { | 37 | & > div { |
38 | align-items: center; | ||
23 | display: flex; | 39 | display: flex; |
24 | justify-content: center; | 40 | justify-content: center; |
25 | align-items: center; | ||
26 | 41 | ||
27 | &>span { | 42 | & > span { |
28 | position: absolute; | 43 | position: absolute; |
44 | width: 100%; | ||
29 | } | 45 | } |
30 | } | 46 | } |
31 | } | 47 | } |
32 | 48 | ||
33 | .auth__container { | 49 | .auth__container { |
34 | position: relative; | ||
35 | width: 350px; | ||
36 | height: auto; | ||
37 | margin: 40px auto 0 auto; | ||
38 | background: #FFF; | 50 | background: #FFF; |
39 | // padding: 20px; | ||
40 | border-radius: $theme-border-radius; | 51 | border-radius: $theme-border-radius; |
41 | box-shadow: 0 0 50px rgba(black, 0.2); | 52 | box-shadow: 0 0 50px rgba(black, .2); |
53 | height: auto; | ||
54 | margin: 40px auto 0; | ||
55 | position: relative; | ||
56 | width: 350px; | ||
42 | 57 | ||
43 | &.auth__container--signup { | 58 | &.auth__container--signup { width: 450px; } |
44 | width: 450px; | ||
45 | // margin-left: auto; | ||
46 | // margin-right: auto; | ||
47 | } | ||
48 | } | 59 | } |
49 | 60 | ||
50 | .auth__logo { | 61 | .auth__logo { |
62 | border-radius: $theme-border-radius; | ||
51 | display: block; | 63 | display: block; |
52 | width: 150px; | ||
53 | height: auto; | 64 | height: auto; |
54 | margin: -105px auto 20px auto; | 65 | margin: -105px auto 20px auto; |
55 | border-radius: $theme-border-radius; | 66 | width: 150px; |
56 | 67 | ||
57 | &.auth__logo--sm { | 68 | &.auth__logo--sm { |
58 | border: 4px solid #FFF; | 69 | border: 4px solid #FFF; |
59 | box-shadow: 0 0 6px rgba(black, 0.5); | ||
60 | border-radius: 100%; | 70 | border-radius: 100%; |
71 | box-shadow: 0 0 6px rgba(black, .5); | ||
61 | } | 72 | } |
62 | } | 73 | } |
63 | 74 | ||
64 | .auth__form { | 75 | .auth__form { |
65 | padding: 20px; | 76 | padding: 20px; |
66 | 77 | ||
67 | h1 { | 78 | h1 { text-align: center; } |
68 | text-align: center; | ||
69 | } | ||
70 | } | 79 | } |
71 | 80 | ||
72 | .auth__button { | 81 | .auth__button { |
73 | width: 100%; | 82 | width: 100%; |
74 | 83 | ||
75 | &.auth__button--skip { | 84 | &.auth__button--skip { margin: 10px auto 0; } |
76 | margin: 10px auto 0; | ||
77 | } | ||
78 | } | 85 | } |
79 | 86 | ||
80 | .auth__links { | 87 | .auth__links { |
81 | padding: 20px; | ||
82 | background: $theme-gray-lighter; | 88 | background: $theme-gray-lighter; |
83 | border-bottom-left-radius: $theme-border-radius; | 89 | border-bottom-left-radius: $theme-border-radius; |
84 | border-bottom-right-radius: $theme-border-radius; | 90 | border-bottom-right-radius: $theme-border-radius; |
91 | padding: 20px; | ||
85 | 92 | ||
86 | a { | 93 | a { |
87 | display: block; | 94 | display: block; |
88 | text-align: center; | ||
89 | color: $theme-gray; | 95 | color: $theme-gray; |
90 | margin-bottom: 8px; | 96 | margin-bottom: 8px; |
97 | text-align: center; | ||
91 | 98 | ||
92 | &:last-of-type { | 99 | &:last-of-type { margin-bottom: 0; } |
93 | margin-bottom: 0; | ||
94 | } | ||
95 | } | 100 | } |
96 | } | 101 | } |
97 | 102 | ||
98 | .auth__adlk { | 103 | .auth__adlk { |
104 | bottom: 15px; | ||
99 | position: absolute; | 105 | position: absolute; |
100 | right: 25px; | 106 | right: 25px; |
101 | bottom: 15px; | ||
102 | 107 | ||
103 | img { | 108 | img { width: 65px; } |
104 | width: 65px; | ||
105 | } | ||
106 | } | 109 | } |
107 | 110 | ||
108 | .auth__letter { | 111 | .auth__letter { margin-bottom: 30px; } |
109 | margin-bottom: 30px; | 112 | .scroll-container { z-index: 10; } |
110 | } | 113 | .info-bar { position: absolute; } |
111 | |||
112 | .scroll-container { | ||
113 | z-index: 10; | ||
114 | } | ||
115 | |||
116 | .info-bar { | ||
117 | position: absolute; | ||
118 | } | ||
119 | 114 | ||
120 | &__scroll-container { | 115 | &__scroll-container { |
121 | overflow: scroll; | ||
122 | width: 100%; | ||
123 | max-height: 100vh; | 116 | max-height: 100vh; |
124 | padding: 80px 0; | 117 | padding: 80px 0; |
118 | overflow: scroll; | ||
119 | width: 100%; | ||
125 | } | 120 | } |
126 | 121 | ||
127 | .available-services { | 122 | .available-services { margin-bottom: 15px; } |
128 | margin-bottom: 15px; | ||
129 | } | ||
130 | 123 | ||
131 | .unavailable-services { | 124 | .unavailable-services { |
132 | margin: 15px 0; | 125 | margin: 15px 0; |
133 | 126 | ||
134 | p { | 127 | p { text-transform: capitalize; } |
135 | text-transform: capitalize; | ||
136 | } | ||
137 | } | 128 | } |
138 | 129 | ||
139 | .legal { | 130 | .legal { |
140 | text-align: center; | ||
141 | margin-top: 20px; | ||
142 | color: $theme-gray-light; | 131 | color: $theme-gray-light; |
132 | margin-top: 20px; | ||
133 | text-align: center; | ||
143 | } | 134 | } |
144 | } | 135 | } |
diff --git a/src/styles/badge.scss b/src/styles/badge.scss index d7dfaf783..f9fac039a 100644 --- a/src/styles/badge.scss +++ b/src/styles/badge.scss | |||
@@ -1,15 +1,34 @@ | |||
1 | @import './config.scss'; | 1 | @import './config.scss'; |
2 | 2 | ||
3 | .theme__dark .badge { | ||
4 | background: $dark-theme-gray; | ||
5 | border-radius: $theme-border-radius-small; | ||
6 | color: $dark-theme-gray-lightest; | ||
7 | |||
8 | &.badge--primary, | ||
9 | &.badge--premium { | ||
10 | background: $theme-brand-primary; | ||
11 | color: $dark-theme-gray-smoke; | ||
12 | } | ||
13 | } | ||
14 | |||
15 | |||
3 | .badge { | 16 | .badge { |
4 | font-size: 14px; | 17 | background: $theme-gray-lighter; |
18 | border-radius: $theme-border-radius; | ||
5 | display: inline-block; | 19 | display: inline-block; |
20 | font-size: 14px; | ||
6 | padding: 5px 10px; | 21 | padding: 5px 10px; |
7 | border-radius: $theme-border-radius; | ||
8 | background: $theme-gray-lighter; | ||
9 | 22 | ||
10 | &.badge--primary, | 23 | &.badge--primary, |
11 | &.badge--premium { | 24 | &.badge--premium { |
12 | background: $theme-brand-primary; | 25 | background: $theme-brand-primary; |
13 | color: #FFF; | 26 | color: #FFF; |
14 | } | 27 | } |
28 | |||
29 | &.badge--success { | ||
30 | background: $theme-brand-success; | ||
31 | color: #FFF; | ||
32 | } | ||
33 | |||
15 | } | 34 | } |
diff --git a/src/styles/button.scss b/src/styles/button.scss index 8d2adbbcc..a66345114 100644 --- a/src/styles/button.scss +++ b/src/styles/button.scss | |||
@@ -1,71 +1,94 @@ | |||
1 | @import './config.scss'; | 1 | @import './config.scss'; |
2 | 2 | ||
3 | .theme__dark .franz-form__button { | ||
4 | background: $theme-brand-primary; | ||
5 | color: $dark-theme-text-color; | ||
6 | |||
7 | &:hover { background: darken($theme-brand-primary, 5%); } | ||
8 | &:active { background: lighten($theme-brand-primary, 5%); } | ||
9 | |||
10 | &.franz-form__button--secondary { | ||
11 | background: $dark-theme-gray-lighter; | ||
12 | color: $dark-theme-text-color; | ||
13 | |||
14 | &:hover { background: lighten($dark-theme-gray-lighter, 10%); } | ||
15 | &:active { background: lighten($dark-theme-gray-lighter, 20%); } | ||
16 | } | ||
17 | |||
18 | &.franz-form__button--danger { | ||
19 | background: $theme-brand-danger; | ||
20 | |||
21 | &:hover { background: darken($theme-brand-danger, 5%); } | ||
22 | &:active { background: lighten($theme-brand-danger, 5%); } | ||
23 | } | ||
24 | |||
25 | &.franz-form__button--warning { | ||
26 | background: $theme-brand-warning; | ||
27 | |||
28 | &:hover { background: darken($theme-brand-warning, 5%); } | ||
29 | &:active { background: lighten($theme-brand-warning, 5%); } | ||
30 | } | ||
31 | |||
32 | &.franz-form__button--inverted { | ||
33 | border: 2px solid $theme-brand-primary; | ||
34 | color: $theme-brand-primary; | ||
35 | |||
36 | &:hover { | ||
37 | background: darken($theme-brand-primary, 5%); | ||
38 | color: $dark-theme-text-color; | ||
39 | } | ||
40 | } | ||
41 | |||
42 | &:disabled { opacity: .5; } | ||
43 | } | ||
44 | |||
3 | .franz-form__button { | 45 | .franz-form__button { |
4 | position: relative; | ||
5 | background: $theme-brand-primary; | 46 | background: $theme-brand-primary; |
47 | border-radius: 3px; | ||
6 | display: block; | 48 | display: block; |
7 | padding: 10px 20px; | ||
8 | color: #FFF; | 49 | color: #FFF; |
9 | border-radius: 3px; | 50 | padding: 10px 20px; |
10 | transition: background 0.5s; | 51 | position: relative; |
52 | transition: background .5s; | ||
11 | text-align: center; | 53 | text-align: center; |
12 | 54 | ||
13 | &:hover { | 55 | &:hover { background: darken($theme-brand-primary, 5%) } |
14 | background: darken($theme-brand-primary, 5%); | ||
15 | } | ||
16 | 56 | ||
17 | &:active { | 57 | &:active { |
18 | transition: none; | ||
19 | background: lighten($theme-brand-primary, 5%); | 58 | background: lighten($theme-brand-primary, 5%); |
59 | transition: none; | ||
20 | } | 60 | } |
21 | 61 | ||
22 | &:disabled { | 62 | &:disabled { opacity: .2; } |
23 | opacity: 0.2; | ||
24 | } | ||
25 | 63 | ||
26 | &.franz-form__button--secondary { | 64 | &.franz-form__button--secondary { |
27 | background: $theme-gray-lighter; | 65 | background: $theme-gray-lighter; |
28 | color: $theme-gray; | 66 | color: $theme-gray; |
29 | 67 | ||
30 | &:hover { | 68 | &:hover { background: darken($theme-gray-lighter, 5%); } |
31 | background: darken($theme-gray-lighter, 5%); | 69 | &:active { background: lighten($theme-gray-lighter, 5%); } |
32 | } | ||
33 | |||
34 | &:active { | ||
35 | background: lighten($theme-gray-lighter, 5%); | ||
36 | } | ||
37 | } | 70 | } |
38 | 71 | ||
39 | &.franz-form__button--danger { | 72 | &.franz-form__button--danger { |
40 | background: $theme-brand-danger; | 73 | background: $theme-brand-danger; |
41 | 74 | ||
42 | &:hover { | 75 | &:hover { background: darken($theme-brand-danger, 5%); } |
43 | background: darken($theme-brand-danger, 5%); | 76 | &:active { background: lighten($theme-brand-danger, 5%); } |
44 | } | ||
45 | |||
46 | &:active { | ||
47 | background: lighten($theme-brand-danger, 5%); | ||
48 | } | ||
49 | } | 77 | } |
50 | 78 | ||
51 | &.franz-form__button--warning { | 79 | &.franz-form__button--warning { |
52 | background: $theme-brand-warning; | 80 | background: $theme-brand-warning; |
53 | 81 | ||
54 | &:hover { | 82 | &:hover { background: darken($theme-brand-warning, 5%); } |
55 | background: darken($theme-brand-warning, 5%); | 83 | &:active { background: lighten($theme-brand-warning, 5%); } |
56 | } | ||
57 | |||
58 | &:active { | ||
59 | background: lighten($theme-brand-warning, 5%); | ||
60 | } | ||
61 | } | 84 | } |
62 | 85 | ||
63 | &.franz-form__button--inverted { | 86 | &.franz-form__button--inverted { |
64 | background: none; | 87 | background: none; |
65 | padding: 10px 20px; | ||
66 | border: 2px solid $theme-brand-primary; | 88 | border: 2px solid $theme-brand-primary; |
67 | color: $theme-brand-primary; | 89 | color: $theme-brand-primary; |
68 | transition: background 0.5s, color 0.5s; | 90 | padding: 10px 20px; |
91 | transition: background .5s, color .5s; | ||
69 | 92 | ||
70 | &:hover { | 93 | &:hover { |
71 | background: darken($theme-brand-primary, 5%); | 94 | background: darken($theme-brand-primary, 5%); |
@@ -74,11 +97,11 @@ | |||
74 | } | 97 | } |
75 | 98 | ||
76 | .loader { | 99 | .loader { |
100 | display: inline-block; | ||
101 | height: 12px; | ||
102 | margin-right: 5px; | ||
77 | position: relative; | 103 | position: relative; |
78 | width: 20px; | 104 | width: 20px; |
79 | height: 12px; | ||
80 | z-index: 9999; | 105 | z-index: 9999; |
81 | display: inline-block; | ||
82 | margin-right: 5px; | ||
83 | } | 106 | } |
84 | } | 107 | } |
diff --git a/src/styles/colors.scss b/src/styles/colors.scss index 5d8302c28..80c2fb633 100644 --- a/src/styles/colors.scss +++ b/src/styles/colors.scss | |||
@@ -1,22 +1,40 @@ | |||
1 | $theme-brand-primary: #3498db; | 1 | @import "./type-helper"; |
2 | $theme-brand-success: #5cb85c; | ||
3 | $theme-brand-info: #5bc0de; | ||
4 | $theme-brand-warning: #FF9F00; | ||
5 | $theme-brand-danger: #d9534f; | ||
6 | 2 | ||
7 | $theme-gray-dark: #373a3c; | 3 | $theme-brand-primary: convert-rgb-string-to-color($raw-theme-brand-primary); |
8 | $theme-gray: #55595c; | 4 | $theme-brand-success: convert-rgb-string-to-color($raw-theme-brand-success); |
9 | $theme-gray-light: #818a91; | 5 | $theme-brand-info: convert-rgb-string-to-color($raw-theme-brand-info); |
10 | $theme-gray-lighter: #eceeef; | 6 | $theme-brand-warning: convert-rgb-string-to-color($raw-theme-brand-warning); |
11 | $theme-gray-lightest: #f7f7f9; | 7 | $theme-brand-danger: convert-rgb-string-to-color($raw-theme-brand-danger); |
12 | 8 | ||
13 | $theme-border-radius: 6px; | 9 | $theme-gray-dark: convert-rgb-string-to-color($raw-theme-gray-dark); |
14 | $theme-border-radius-small: 3px; | 10 | $theme-gray: convert-rgb-string-to-color($raw-theme-gray); |
11 | $theme-gray-light: convert-rgb-string-to-color($raw-theme-gray-light); | ||
12 | $theme-gray-lighter: convert-rgb-string-to-color($raw-theme-gray-lighter); | ||
13 | $theme-gray-lightest: convert-rgb-string-to-color($raw-theme-gray-lightest); | ||
15 | 14 | ||
16 | $theme-sidebar-width: 68px; | 15 | $theme-border-radius: to-number($raw-theme-border-radius); |
16 | $theme-border-radius-small: to-number($raw-theme-border-radius-small); | ||
17 | 17 | ||
18 | $theme-text-color: $theme-gray-dark; | 18 | $theme-sidebar-width: to-number($raw-theme-sidebar-width); |
19 | 19 | ||
20 | $theme-transition-time: 0.5s; | 20 | $theme-text-color: convert-rgb-string-to-color($raw-theme-gray-dark); |
21 | 21 | ||
22 | $theme-inset-shadow: inset 0 2px 5px rgba(0,0,0,0.03); | 22 | $theme-transition-time: .5s; |
23 | |||
24 | $theme-inset-shadow: inset 0 2px 5px rgba(0, 0, 0, .03); | ||
25 | |||
26 | // Dark Theme | ||
27 | $dark-theme-black: convert-rgb-string-to-color($raw-dark-theme-black); | ||
28 | |||
29 | $dark-theme-gray-darkest: convert-rgb-string-to-color($raw-dark-theme-gray-darkest); | ||
30 | $dark-theme-gray-darker: convert-rgb-string-to-color($raw-dark-theme-gray-darker); | ||
31 | $dark-theme-gray-dark: convert-rgb-string-to-color($raw-dark-theme-gray-dark); | ||
32 | |||
33 | $dark-theme-gray: convert-rgb-string-to-color($raw-dark-theme-gray); | ||
34 | |||
35 | $dark-theme-gray-light: convert-rgb-string-to-color($raw-dark-theme-gray-light); | ||
36 | $dark-theme-gray-lighter: convert-rgb-string-to-color($raw-dark-theme-gray-lighter); | ||
37 | $dark-theme-gray-lightest: convert-rgb-string-to-color($raw-dark-theme-gray-lightest); | ||
38 | |||
39 | $dark-theme-gray-smoke: convert-rgb-string-to-color($raw-dark-theme-gray-smoke); | ||
40 | $dark-theme-text-color: convert-rgb-string-to-color($raw-dark-theme-text-color); | ||
diff --git a/src/styles/content-tabs.scss b/src/styles/content-tabs.scss index 47dfea2c4..ca3820fb4 100644 --- a/src/styles/content-tabs.scss +++ b/src/styles/content-tabs.scss | |||
@@ -2,53 +2,43 @@ | |||
2 | 2 | ||
3 | .content-tabs { | 3 | .content-tabs { |
4 | .content-tabs__tabs { | 4 | .content-tabs__tabs { |
5 | display: flex; | ||
6 | border-top-left-radius: $theme-border-radius-small; | 5 | border-top-left-radius: $theme-border-radius-small; |
7 | border-top-right-radius: $theme-border-radius-small; | 6 | border-top-right-radius: $theme-border-radius-small; |
7 | display: flex; | ||
8 | overflow: hidden; | 8 | overflow: hidden; |
9 | 9 | ||
10 | .content-tabs__item { | 10 | .content-tabs__item { |
11 | padding: 10px; | ||
12 | flex: 1; | ||
13 | // border: 1px solid $theme-gray-lightest; | ||
14 | color: $theme-gray-dark; | ||
15 | background: linear-gradient($theme-gray-lightest 80%, darken($theme-gray-lightest, 3%)); | 11 | background: linear-gradient($theme-gray-lightest 80%, darken($theme-gray-lightest, 3%)); |
16 | border-right: 1px solid $theme-gray-lighter; | 12 | border-right: 1px solid $theme-gray-lighter; |
13 | color: $theme-gray-dark; | ||
14 | flex: 1; | ||
15 | padding: 10px; | ||
17 | transition: background $theme-transition-time; | 16 | transition: background $theme-transition-time; |
18 | 17 | ||
19 | &:last-of-type { | 18 | &:last-of-type { border-right: 0; } |
20 | border-right: 0; | ||
21 | } | ||
22 | 19 | ||
23 | &.is-active { | 20 | &.is-active { |
24 | background: $theme-brand-primary; | 21 | background: $theme-brand-primary; |
25 | color: #FFF; | ||
26 | box-shadow: none; | 22 | box-shadow: none; |
23 | color: #FFF; | ||
27 | } | 24 | } |
28 | } | 25 | } |
29 | } | 26 | } |
30 | 27 | ||
31 | .content-tabs__content { | 28 | .content-tabs__content { |
32 | padding: 20px 20px; | 29 | background: $theme-gray-lightest; |
33 | border-bottom-left-radius: $theme-border-radius-small; | 30 | border-bottom-left-radius: $theme-border-radius-small; |
34 | border-bottom-right-radius: $theme-border-radius-small; | 31 | border-bottom-right-radius: $theme-border-radius-small; |
35 | background: $theme-gray-lightest; | 32 | padding: 20px 20px; |
36 | 33 | ||
37 | .content-tabs__item { | 34 | .content-tabs__item { |
38 | top: 0; | ||
39 | display: none; | 35 | display: none; |
36 | top: 0; | ||
40 | 37 | ||
41 | &.is-active { | 38 | &.is-active { display: block; } |
42 | display: block; | ||
43 | } | ||
44 | } | ||
45 | |||
46 | .franz-form__input-wrapper { | ||
47 | background: #FFF; | ||
48 | } | 39 | } |
49 | 40 | ||
50 | .franz-form__field:last-of-type { | 41 | .franz-form__input-wrapper { background: #FFF; } |
51 | margin-bottom: 0; | 42 | .franz-form__field:last-of-type { margin-bottom: 0; } |
52 | } | ||
53 | } | 43 | } |
54 | } | 44 | } |
diff --git a/src/styles/image-upload.scss b/src/styles/image-upload.scss index 06176a7af..31300c227 100644 --- a/src/styles/image-upload.scss +++ b/src/styles/image-upload.scss | |||
@@ -1,74 +1,89 @@ | |||
1 | .theme__dark { | ||
2 | .image-upload { | ||
3 | background: $dark-theme-gray-darker; | ||
4 | border: 1px solid $dark-theme-gray-light; | ||
5 | color: $dark-theme-gray-lighter; | ||
6 | |||
7 | &__action { | ||
8 | &-background { background: rgba($dark-theme-black, .7); } | ||
9 | |||
10 | button { | ||
11 | color: $dark-theme-gray-lightest; | ||
12 | |||
13 | .mdi { color: $dark-theme-gray-lightest; } | ||
14 | } | ||
15 | } | ||
16 | } | ||
17 | |||
18 | .image-upload-wrapper .mdi { color: $dark-theme-gray-light; } | ||
19 | } | ||
20 | |||
1 | .image-upload { | 21 | .image-upload { |
2 | position: absolute; | 22 | background: $theme-gray-lightest; |
3 | width: 140px; | ||
4 | height: 140px; | ||
5 | border: 1px solid $theme-gray-lighter; | 23 | border: 1px solid $theme-gray-lighter; |
6 | border-radius: $theme-border-radius-small; | 24 | border-radius: $theme-border-radius-small; |
7 | background: $theme-gray-lightest; | 25 | height: 140px; |
8 | overflow: hidden; | ||
9 | margin-top: 5px; | 26 | margin-top: 5px; |
27 | overflow: hidden; | ||
28 | position: relative; | ||
29 | width: 140px; | ||
10 | 30 | ||
11 | &__preview, | 31 | &__preview, |
12 | &__action { | 32 | &__action { |
13 | position: absolute; | ||
14 | top: 0; | ||
15 | left: 0; | 33 | left: 0; |
34 | position: absolute; | ||
16 | right: 0; | 35 | right: 0; |
36 | top: 0; | ||
17 | } | 37 | } |
18 | 38 | ||
19 | &__preview { | 39 | &__preview { |
20 | z-index: 1; | ||
21 | background-size: cover; | ||
22 | background-size: 100%; | ||
23 | background-repeat: no-repeat; | ||
24 | background-position: center center; | 40 | background-position: center center; |
41 | background-repeat: no-repeat; | ||
42 | background-size: cover; | ||
25 | border-radius: 3px; | 43 | border-radius: 3px; |
44 | z-index: 1; | ||
26 | } | 45 | } |
27 | 46 | ||
28 | &__action { | 47 | &__action { |
29 | position: relative; | ||
30 | z-index: 10; | ||
31 | opacity: 0; | ||
32 | transition: opacity 0.5s; | ||
33 | display: flex; | 48 | display: flex; |
34 | justify-content: center; | 49 | justify-content: center; |
50 | opacity: 0; | ||
51 | position: relative; | ||
52 | transition: opacity .5s; | ||
53 | z-index: 10; | ||
35 | 54 | ||
36 | &-background { | 55 | &-background { |
37 | position: absolute; | 56 | background: rgba($theme-gray, .7); |
38 | top: 0; | 57 | bottom: 0; |
39 | left: 0; | 58 | left: 0; |
59 | position: absolute; | ||
40 | right: 0; | 60 | right: 0; |
41 | bottom: 0; | 61 | top: 0; |
42 | background: rgba($theme-gray, 0.7); | ||
43 | z-index: 10; | 62 | z-index: 10; |
44 | } | 63 | } |
45 | 64 | ||
46 | button { | 65 | button { |
66 | color: #FFF; | ||
47 | position: relative; | 67 | position: relative; |
48 | z-index: 100; | 68 | z-index: 100; |
49 | color: #FFF; | ||
50 | 69 | ||
51 | .mdi { | 70 | .mdi { color: #FFF; } |
52 | color: #FFF; | ||
53 | } | ||
54 | } | 71 | } |
55 | } | 72 | } |
56 | 73 | ||
57 | &__dropzone { | 74 | &__dropzone { |
58 | text-align: center; | 75 | align-items: center; |
59 | border-radius: 5px; | 76 | border-radius: 5px; |
60 | padding: 10px; | ||
61 | display: flex; | 77 | display: flex; |
62 | align-items: center; | ||
63 | justify-content: center; | ||
64 | flex-direction: column; | 78 | flex-direction: column; |
79 | justify-content: center; | ||
80 | padding: 10px; | ||
81 | text-align: center; | ||
65 | } | 82 | } |
66 | 83 | ||
67 | &__dropzone, | 84 | &__dropzone, |
68 | button { | 85 | button { |
69 | .mdi { | 86 | .mdi { margin-bottom: 5px; } |
70 | margin-bottom: 5px; | ||
71 | } | ||
72 | 87 | ||
73 | p { | 88 | p { |
74 | font-size: 10px; | 89 | font-size: 10px; |
@@ -76,16 +91,10 @@ | |||
76 | } | 91 | } |
77 | } | 92 | } |
78 | 93 | ||
79 | &:hover { | 94 | &:hover .image-upload__action { opacity: 1; } |
80 | .image-upload__action { | ||
81 | opacity: 1; | ||
82 | } | ||
83 | } | ||
84 | } | 95 | } |
85 | 96 | ||
86 | .image-upload-wrapper { | 97 | .image-upload-wrapper .mdi { |
87 | .mdi { | 98 | color: $theme-gray-light; |
88 | font-size: 40px; | 99 | font-size: 40px; |
89 | color: $theme-gray-light; | 100 | } |
90 | } | ||
91 | } \ No newline at end of file | ||
diff --git a/src/styles/info-bar.scss b/src/styles/info-bar.scss index b6d1e84e2..fb4917358 100644 --- a/src/styles/info-bar.scss +++ b/src/styles/info-bar.scss | |||
@@ -1,83 +1,68 @@ | |||
1 | @import './config.scss'; | 1 | @import './config.scss'; |
2 | 2 | ||
3 | .info-bar { | 3 | .info-bar { |
4 | width: 100%; | 4 | align-items: center; |
5 | height: 50px; | ||
6 | background: $theme-brand-primary; | 5 | background: $theme-brand-primary; |
6 | box-shadow: 0 0 8px rgba(black, .2); | ||
7 | display: flex; | 7 | display: flex; |
8 | align-items: center; | 8 | height: 50px; |
9 | justify-content: center; | 9 | justify-content: center; |
10 | padding: 0 20px; | 10 | padding: 0 20px; |
11 | position: relative; | 11 | position: relative; |
12 | // bottom: 0; | 12 | width: 100%; |
13 | z-index: 100; | 13 | z-index: 100; |
14 | box-shadow: 0 0 8px rgba(black, 0.2); | ||
15 | 14 | ||
16 | .info-bar__content { | 15 | .info-bar__content { |
17 | height: auto; | 16 | height: auto; |
18 | 17 | ||
19 | .mdi { | 18 | .mdi { margin-right: 5px; } |
20 | margin-right: 5px; | ||
21 | } | ||
22 | } | 19 | } |
23 | 20 | ||
24 | .info-bar__close { | 21 | .info-bar__close { |
22 | color: #FFF; | ||
25 | position: absolute; | 23 | position: absolute; |
26 | right: 10px; | 24 | right: 10px; |
27 | color: #FFF; | ||
28 | } | 25 | } |
29 | 26 | ||
30 | .info-bar__cta { | 27 | .info-bar__cta { |
31 | color: #FFF; | ||
32 | padding: 3px 8px; | ||
33 | border-radius: $theme-border-radius-small; | ||
34 | border-color: #FFF; | 28 | border-color: #FFF; |
35 | border-width: 2px; | 29 | border-radius: $theme-border-radius-small; |
36 | border-style: solid; | 30 | border-style: solid; |
31 | border-width: 2px; | ||
32 | color: #FFF; | ||
37 | margin-left: 15px; | 33 | margin-left: 15px; |
34 | padding: 3px 8px; | ||
38 | 35 | ||
39 | .loader { | 36 | .loader { |
37 | display: inline-block; | ||
38 | height: 12px; | ||
39 | margin-right: 5px; | ||
40 | position: relative; | 40 | position: relative; |
41 | width: 20px; | 41 | width: 20px; |
42 | height: 12px; | ||
43 | z-index: 9999; | 42 | z-index: 9999; |
44 | display: inline-block; | ||
45 | margin-right: 5px; | ||
46 | } | 43 | } |
47 | } | 44 | } |
48 | 45 | ||
49 | a { | 46 | &.info-bar--bottom { order: 10; } |
50 | // text-decoration: underline; | ||
51 | } | ||
52 | |||
53 | &.info-bar--bottom { | ||
54 | order: 10; | ||
55 | } | ||
56 | 47 | ||
57 | &.info-bar--primary { | 48 | &.info-bar--primary { |
58 | background: $theme-brand-primary; | 49 | background: $theme-brand-primary; |
59 | color: #FFF; | 50 | color: #FFF; |
60 | 51 | ||
61 | a { | 52 | a { color: #FFF; } |
62 | color: #FFF; | ||
63 | } | ||
64 | } | 53 | } |
65 | 54 | ||
66 | &.info-bar--warning { | 55 | &.info-bar--warning { |
67 | background: $theme-brand-warning; | 56 | background: $theme-brand-warning; |
68 | color: #FFF; | 57 | color: #FFF; |
69 | 58 | ||
70 | a { | 59 | a { color: #FFF; } |
71 | color: #FFF; | ||
72 | } | ||
73 | } | 60 | } |
74 | 61 | ||
75 | &.info-bar--danger { | 62 | &.info-bar--danger { |
76 | background: $theme-brand-danger; | 63 | background: $theme-brand-danger; |
77 | color: #FFF; | 64 | color: #FFF; |
78 | 65 | ||
79 | a { | 66 | a { color: #FFF; } |
80 | color: #FFF; | ||
81 | } | ||
82 | } | 67 | } |
83 | } | 68 | } |
diff --git a/src/styles/infobox.scss b/src/styles/infobox.scss index 7ab094058..e287e5be7 100644 --- a/src/styles/infobox.scss +++ b/src/styles/infobox.scss | |||
@@ -1,20 +1,16 @@ | |||
1 | @import './config.scss'; | 1 | @import './config.scss'; |
2 | 2 | ||
3 | .infobox { | 3 | .infobox { |
4 | height: auto; | 4 | align-items: center; |
5 | padding: 15px 20px; | ||
6 | margin-bottom: 30px; | ||
7 | border-radius: $theme-border-radius-small; | 5 | border-radius: $theme-border-radius-small; |
8 | display: flex; | 6 | display: flex; |
9 | align-items: center; | 7 | height: auto; |
8 | margin-bottom: 30px; | ||
9 | padding: 15px 20px; | ||
10 | 10 | ||
11 | a { | 11 | a { color: #FFF; } |
12 | color: #FFF; | ||
13 | } | ||
14 | 12 | ||
15 | .infobox__content { | 13 | .infobox__content { flex: 1; } |
16 | flex: 1; | ||
17 | } | ||
18 | 14 | ||
19 | &.infobox--success { | 15 | &.infobox--success { |
20 | background: $theme-brand-success; | 16 | background: $theme-brand-success; |
@@ -36,26 +32,24 @@ | |||
36 | color: #FFF; | 32 | color: #FFF; |
37 | } | 33 | } |
38 | 34 | ||
39 | .mdi { | 35 | .mdi { margin-right: 10px; } |
40 | margin-right: 10px; | ||
41 | } | ||
42 | 36 | ||
43 | .infobox__cta { | 37 | .infobox__cta { |
44 | color: #FFF; | ||
45 | padding: 3px 8px; | ||
46 | border-radius: $theme-border-radius-small; | ||
47 | border-color: #FFF; | 38 | border-color: #FFF; |
48 | border-width: 2px; | 39 | border-radius: $theme-border-radius-small; |
49 | border-style: solid; | 40 | border-style: solid; |
41 | border-width: 2px; | ||
42 | color: #FFF; | ||
50 | margin-left: 15px; | 43 | margin-left: 15px; |
44 | padding: 3px 8px; | ||
51 | 45 | ||
52 | .loader { | 46 | .loader { |
47 | display: inline-block; | ||
48 | height: 12px; | ||
49 | margin-right: 5px; | ||
53 | position: relative; | 50 | position: relative; |
54 | width: 20px; | 51 | width: 20px; |
55 | height: 12px; | ||
56 | z-index: 9999; | 52 | z-index: 9999; |
57 | display: inline-block; | ||
58 | margin-right: 5px; | ||
59 | } | 53 | } |
60 | } | 54 | } |
61 | 55 | ||
diff --git a/src/styles/input.scss b/src/styles/input.scss index 7042f56e8..687bcac64 100644 --- a/src/styles/input.scss +++ b/src/styles/input.scss | |||
@@ -1,6 +1,34 @@ | |||
1 | @import './config.scss'; | 1 | @import './config.scss'; |
2 | @import './mixins.scss'; | 2 | @import './mixins.scss'; |
3 | 3 | ||
4 | .theme__dark .franz-form { | ||
5 | .franz-form__label { color: $dark-theme-text-color; } | ||
6 | |||
7 | .franz-form__input-wrapper { | ||
8 | background: $dark-theme-gray-dark; | ||
9 | border: 1px solid $dark-theme-gray-light; | ||
10 | } | ||
11 | |||
12 | .franz-form__input { | ||
13 | color: $dark-theme-gray-lightest; | ||
14 | |||
15 | &::placeholder { color: $dark-theme-gray-lighter; } | ||
16 | } | ||
17 | |||
18 | .franz-form__input-prefix, | ||
19 | .franz-form__input-suffix { | ||
20 | background: $dark-theme-gray; | ||
21 | color: $dark-theme-gray-lighter; | ||
22 | } | ||
23 | |||
24 | .franz-form__input-modifier { | ||
25 | border-left: 1px solid $dark-theme-gray-light; | ||
26 | color: $dark-theme-gray-lighter; | ||
27 | } | ||
28 | |||
29 | .franz-form__password-score { background: $dark-theme-gray-dark; } | ||
30 | } | ||
31 | |||
4 | .franz-form { | 32 | .franz-form { |
5 | .franz-form__field { | 33 | .franz-form__field { |
6 | display: flex; | 34 | display: flex; |
@@ -9,19 +37,12 @@ | |||
9 | margin-bottom: 20px; | 37 | margin-bottom: 20px; |
10 | 38 | ||
11 | &.has-error { | 39 | &.has-error { |
12 | .franz-form__input-wrapper { | 40 | .franz-form__input-wrapper, |
13 | border-color: $theme-brand-danger; | 41 | .franz-form__input-modifier { border-color: $theme-brand-danger; } |
14 | } | ||
15 | |||
16 | .franz-form__input-modifier { | ||
17 | border-color: $theme-brand-danger; | ||
18 | } | ||
19 | } | 42 | } |
20 | } | 43 | } |
21 | 44 | ||
22 | .franz-form__label { | 45 | .franz-form__label { @include formLabel(); } |
23 | @include formLabel(); | ||
24 | } | ||
25 | 46 | ||
26 | .franz-form__error { | 47 | .franz-form__error { |
27 | color: $theme-brand-danger; | 48 | color: $theme-brand-danger; |
@@ -30,74 +51,60 @@ | |||
30 | } | 51 | } |
31 | 52 | ||
32 | .franz-form__input-wrapper { | 53 | .franz-form__input-wrapper { |
33 | display: flex; | ||
34 | width: 100%; | ||
35 | order: 1; | ||
36 | border-radius: $theme-border-radius-small; | ||
37 | background: $theme-gray-lightest; | 54 | background: $theme-gray-lightest; |
38 | border: 1px solid $theme-gray-lighter; | 55 | border: 1px solid $theme-gray-lighter; |
56 | border-radius: $theme-border-radius-small; | ||
57 | display: flex; | ||
39 | flex-wrap: wrap; | 58 | flex-wrap: wrap; |
59 | order: 1; | ||
60 | width: 100%; | ||
40 | } | 61 | } |
41 | 62 | ||
42 | .franz-form__input { | 63 | .franz-form__input { |
43 | flex: 1; | ||
44 | border: 0; | ||
45 | background: none; | 64 | background: none; |
46 | width: 100%; | 65 | border: 0; |
47 | padding: 8px; | ||
48 | // font-size: 18px; | ||
49 | color: $theme-gray; | 66 | color: $theme-gray; |
67 | flex: 1; | ||
68 | padding: 8px; | ||
69 | width: 100%; | ||
50 | 70 | ||
51 | &::placeholder { | 71 | &::placeholder { color: lighten($theme-gray-light, 10%); } |
52 | color: lighten($theme-gray-light, 10%); | ||
53 | } | ||
54 | } | 72 | } |
55 | 73 | ||
56 | .franz-form__input-prefix, | 74 | .franz-form__input-prefix, |
57 | .franz-form__input-suffix { | 75 | .franz-form__input-suffix { |
58 | padding: 0 10px; | ||
59 | background: $theme-gray-lighter; | 76 | background: $theme-gray-lighter; |
60 | color: $theme-gray-light; | 77 | color: $theme-gray-light; |
61 | line-height: 35px; | 78 | line-height: 35px; |
79 | padding: 0 10px; | ||
62 | } | 80 | } |
63 | 81 | ||
64 | .franz-form__input-modifier { | 82 | .franz-form__input-modifier { |
65 | padding: 0 20px; | ||
66 | border-left: 1px solid $theme-gray-lighter; | 83 | border-left: 1px solid $theme-gray-lighter; |
67 | color: $theme-gray-light; | 84 | color: $theme-gray-light; |
68 | font-size: 20px; | 85 | font-size: 20px; |
86 | padding: 0 20px; | ||
69 | } | 87 | } |
70 | 88 | ||
71 | .franz-form__password-score { | 89 | .franz-form__password-score { |
72 | background: $theme-gray-lighter; | 90 | background: $theme-gray-lighter; |
73 | height: 5px; | ||
74 | flex-basis: 100%; | ||
75 | border-bottom-left-radius: 3px; | 91 | border-bottom-left-radius: 3px; |
76 | border-bottom-right-radius: 3px; | 92 | border-bottom-right-radius: 3px; |
93 | flex-basis: 100%; | ||
94 | height: 5px; | ||
77 | 95 | ||
78 | meter { | 96 | meter { |
79 | width: 100%; | ||
80 | height: 100%; | ||
81 | display: block; | ||
82 | border-bottom-left-radius: 3px; | 97 | border-bottom-left-radius: 3px; |
83 | border-bottom-right-radius: 3px; | 98 | border-bottom-right-radius: 3px; |
99 | display: block; | ||
100 | height: 100%; | ||
84 | overflow: hidden; | 101 | overflow: hidden; |
102 | width: 100%; | ||
85 | 103 | ||
86 | &::-webkit-meter-bar { | 104 | &::-webkit-meter-bar { background: none; } |
87 | background: none; | 105 | &::-webkit-meter-even-less-good-value { background: $theme-brand-danger; } |
88 | } | 106 | &::-webkit-meter-suboptimum-value { background: $theme-brand-warning; } |
89 | 107 | &::-webkit-meter-optimum-value { background: $theme-brand-success; } | |
90 | &::-webkit-meter-even-less-good-value { | ||
91 | background: $theme-brand-danger; | ||
92 | } | ||
93 | |||
94 | &::-webkit-meter-suboptimum-value { | ||
95 | background: $theme-brand-warning; | ||
96 | } | ||
97 | |||
98 | &::-webkit-meter-optimum-value { | ||
99 | background: $theme-brand-success; | ||
100 | } | ||
101 | } | 108 | } |
102 | } | 109 | } |
103 | } | 110 | } |
diff --git a/src/styles/invite.scss b/src/styles/invite.scss index bfb1a4b6b..594224f62 100644 --- a/src/styles/invite.scss +++ b/src/styles/invite.scss | |||
@@ -1,15 +1,8 @@ | |||
1 | .invite__form { | 1 | .invite__form { |
2 | /* play with values to see different layouts */ | ||
3 | // display: flex; | ||
4 | align-items: center; | 2 | align-items: center; |
5 | align-self: center; | 3 | align-self: center; |
6 | justify-content: center; | 4 | justify-content: center; |
7 | } | 5 | } |
8 | 6 | ||
9 | .invite__embed { | 7 | .invite__embed { text-align: center; } |
10 | text-align: center; | 8 | .invite__embed--button { width: 100%; } |
11 | } | ||
12 | |||
13 | .invite__embed--button { | ||
14 | width: 100%; | ||
15 | } \ No newline at end of file | ||
diff --git a/src/styles/layout.scss b/src/styles/layout.scss index 964a9fcea..ebf468cf0 100644 --- a/src/styles/layout.scss +++ b/src/styles/layout.scss | |||
@@ -1,16 +1,36 @@ | |||
1 | @import './config.scss'; | 1 | @import './config.scss'; |
2 | 2 | ||
3 | html { | 3 | html { overflow: hidden; } |
4 | overflow: hidden; | 4 | |
5 | .theme__dark .app { | ||
6 | .sidebar { | ||
7 | background: $dark-theme-gray-darker; | ||
8 | box-shadow: 0 0 5px 0 $dark-theme-black; | ||
9 | color: $theme-text-color; | ||
10 | |||
11 | .sidebar__add-service { | ||
12 | color: $dark-theme-gray-lighter; | ||
13 | background: $dark-theme-gray; | ||
14 | } | ||
15 | |||
16 | .sidebar__button { | ||
17 | color: $dark-theme-gray-lighter; | ||
18 | font-size: 22px; | ||
19 | |||
20 | &:hover, | ||
21 | &:active { color: $dark-theme-gray-smoke; } | ||
22 | &.is-muted { color: $dark-theme-gray; } | ||
23 | } | ||
24 | } | ||
25 | |||
26 | .app-loader .app-loader__title { color: $dark-theme-gray-lightest; } | ||
5 | } | 27 | } |
6 | 28 | ||
7 | .app { | 29 | .app { |
8 | display: flex; | 30 | display: flex; |
9 | flex-direction: column; | 31 | flex-direction: column; |
10 | 32 | ||
11 | .app__content { | 33 | .app__content { display: flex; } |
12 | display: flex; | ||
13 | } | ||
14 | 34 | ||
15 | .app__service { | 35 | .app__service { |
16 | display: flex; | 36 | display: flex; |
@@ -19,134 +39,100 @@ html { | |||
19 | } | 39 | } |
20 | } | 40 | } |
21 | 41 | ||
22 | .electron-app-title-bar { | 42 | .electron-app-title-bar { z-index: 99999999; } |
23 | z-index: 99999999; | ||
24 | } | ||
25 | 43 | ||
26 | .window-draggable { | 44 | .window-draggable { |
27 | position: absolute; | ||
28 | width: 100%; | ||
29 | top: 0px; | ||
30 | left: 0px; | ||
31 | height: 35px; | 45 | height: 35px; |
46 | left: 0; | ||
32 | pointer-events: none; | 47 | pointer-events: none; |
33 | -webkit-app-region: drag; | 48 | position: absolute; |
49 | top: 0; | ||
50 | width: 100%; | ||
34 | z-index: 9999; | 51 | z-index: 9999; |
52 | -webkit-app-region: drag; | ||
35 | } | 53 | } |
36 | 54 | ||
37 | .darwin { | 55 | .darwin .sidebar { padding-top: 23px; } |
38 | .sidebar { | ||
39 | padding-top: 23px; | ||
40 | } | ||
41 | } | ||
42 | 56 | ||
43 | .sidebar { | 57 | .sidebar { |
44 | display: flex; | ||
45 | flex-direction: column; | ||
46 | align-items: center; | 58 | align-items: center; |
47 | width: $theme-sidebar-width; | ||
48 | background: $theme-gray-lightest; | 59 | background: $theme-gray-lightest; |
49 | box-shadow: 1px 0 10px rgba(0,0,0,0.08); | 60 | box-shadow: 1px 0 10px rgba(0, 0, 0, .08); |
50 | z-index: 200; | ||
51 | text-align: center; | ||
52 | color: $theme-text-color; | 61 | color: $theme-text-color; |
62 | display: flex; | ||
63 | flex-direction: column; | ||
53 | padding-bottom: 10px; | 64 | padding-bottom: 10px; |
65 | text-align: center; | ||
66 | width: $theme-sidebar-width; | ||
67 | z-index: 200; | ||
54 | 68 | ||
55 | .sidebar__add-service { | 69 | .sidebar__add-service { |
56 | width: 32px; | 70 | color: $theme-gray-light; |
57 | height: 32px; | ||
58 | background: $theme-gray-lighter; | 71 | background: $theme-gray-lighter; |
59 | border-radius: $theme-border-radius-small; | 72 | border-radius: $theme-border-radius-small; |
73 | height: 32px; | ||
60 | margin: 10px auto; | 74 | margin: 10px auto; |
61 | color: $theme-gray-light; | 75 | width: 32px; |
62 | } | 76 | } |
63 | 77 | ||
64 | .sidebar__button { | 78 | .sidebar__button { |
65 | width: $theme-sidebar-width; | 79 | color: $theme-gray-light; |
66 | padding: 7px 0; | ||
67 | font-size: 24px; | 80 | font-size: 24px; |
81 | padding: 7px 0; | ||
68 | position: relative; | 82 | position: relative; |
69 | color: $theme-gray-light; | 83 | width: $theme-sidebar-width; |
70 | |||
71 | &:hover { | ||
72 | color: darken($theme-gray-light, 10%); | ||
73 | } | ||
74 | |||
75 | &:active { | ||
76 | color: lighten($theme-gray-light, 10%); | ||
77 | } | ||
78 | |||
79 | &.is-muted { | ||
80 | color: $theme-brand-primary; | ||
81 | } | ||
82 | 84 | ||
83 | &--new-service { | 85 | &:hover, |
84 | padding-bottom: 6px; | 86 | &:active { color: lighten($theme-gray-light, 10%); } |
85 | } | 87 | &.is-muted { color: $theme-brand-primary; } |
88 | &--new-service { padding-bottom: 6px; } | ||
86 | } | 89 | } |
87 | 90 | ||
88 | & > div { | 91 | & > div { |
89 | display: flex; | 92 | display: flex; |
90 | overflow-y: scroll; | 93 | overflow-y: scroll; |
91 | 94 | ||
92 | &::-webkit-scrollbar { | 95 | &::-webkit-scrollbar { display: none; } |
93 | display: none; | ||
94 | } | ||
95 | } | 96 | } |
96 | } | 97 | } |
97 | 98 | ||
98 | .grid { | 99 | .grid .grid__row { |
99 | .grid__row { | 100 | display: flex; |
100 | display: flex; | 101 | flex-direction: row; |
101 | flex-direction: row; | ||
102 | |||
103 | &>* { | ||
104 | margin-right: 20px; | ||
105 | } | ||
106 | 102 | ||
107 | & :last-child { | 103 | & > * { margin-right: 20px; } |
108 | margin-right: 0; | 104 | & :last-child { margin-right: 0; } |
109 | } | ||
110 | } | ||
111 | } | 105 | } |
112 | 106 | ||
113 | .app-loader { | 107 | .app-loader { |
108 | align-items: center; | ||
114 | display: flex; | 109 | display: flex; |
115 | justify-content: center; | 110 | justify-content: center; |
116 | align-items: center; | ||
117 | 111 | ||
118 | .app-loader__title { | 112 | .app-loader__title { |
119 | color: #FFF; | 113 | color: #FFF; |
120 | font-size: 40px; | 114 | font-size: 40px; |
121 | } | 115 | } |
122 | 116 | ||
123 | &>span { | 117 | & > span { height: auto; } |
124 | height: auto; | ||
125 | } | ||
126 | } | ||
127 | |||
128 | .dev-warning { | ||
129 | display: none; | ||
130 | } | 118 | } |
131 | 119 | ||
132 | .isDevMode { | 120 | .dev-warning { display: none; } |
133 | .dev-warning { | 121 | |
134 | display: block; | 122 | .isDevMode .dev-warning { |
135 | position: fixed; | 123 | border-radius: 3px; |
136 | background: $theme-brand-warning; | 124 | background: $theme-brand-warning; |
137 | width: auto; | 125 | color: #FFF; |
138 | height: auto; | 126 | display: block; |
139 | top: 5px; | 127 | font-size: 10px; |
140 | right: 5px; | 128 | height: auto; |
141 | padding: 4px; | 129 | padding: 4px; |
142 | font-size: 10px; | 130 | position: fixed; |
143 | color: #FFF; | 131 | right: 5px; |
144 | z-index: 999999999; | 132 | top: 5px; |
145 | border-radius: 3px; | 133 | transition: opacity .5s ease; |
146 | transition: opacity 0.5s ease; | 134 | width: auto; |
147 | 135 | z-index: 999999999; | |
148 | &:hover { | 136 | |
149 | opacity: 0; | 137 | &:hover { opacity: 0; } |
150 | } | ||
151 | } | ||
152 | } | 138 | } |
diff --git a/src/styles/mixins.scss b/src/styles/mixins.scss index c9b1bc988..06efb475a 100644 --- a/src/styles/mixins.scss +++ b/src/styles/mixins.scss | |||
@@ -1,9 +1,9 @@ | |||
1 | @import './config.scss'; | 1 | @import './config.scss'; |
2 | 2 | ||
3 | @mixin formLabel { | 3 | @mixin formLabel { |
4 | width: 100%; | ||
5 | color: $theme-gray-light; | 4 | color: $theme-gray-light; |
6 | display: block; | 5 | display: block; |
7 | margin-bottom: 5px; | 6 | margin-bottom: 5px; |
8 | order: 0; | 7 | order: 0; |
8 | width: 100%; | ||
9 | } | 9 | } |
diff --git a/src/styles/radio.scss b/src/styles/radio.scss index 644478cd6..87d401215 100644 --- a/src/styles/radio.scss +++ b/src/styles/radio.scss | |||
@@ -1,34 +1,39 @@ | |||
1 | @import './config.scss'; | 1 | @import './config.scss'; |
2 | 2 | ||
3 | .franz-form { | 3 | .theme__dark .franz-form .franz-form__radio { |
4 | .franz-form__radio-wrapper { | 4 | border: 1px solid $dark-theme-gray-lighter; |
5 | display: flex; | 5 | color: $dark-theme-gray-lightest; |
6 | |||
7 | &.is-selected { | ||
8 | background: $dark-theme-gray-lighter; | ||
9 | border: 1px solid $dark-theme-gray-lighter; | ||
10 | color: $dark-theme-gray-smoke; | ||
6 | } | 11 | } |
12 | } | ||
13 | |||
14 | |||
15 | .franz-form { | ||
16 | .franz-form__radio-wrapper { display: flex; } | ||
7 | 17 | ||
8 | .franz-form__radio { | 18 | .franz-form__radio { |
9 | // background: $theme-gray-lightest; | ||
10 | border: 2px solid $theme-gray-lighter; | 19 | border: 2px solid $theme-gray-lighter; |
20 | border-radius: $theme-border-radius-small; | ||
21 | box-shadow: $theme-inset-shadow; | ||
11 | color: $theme-gray; | 22 | color: $theme-gray; |
12 | padding: 11px; | 23 | flex: 1; |
13 | margin-right: 20px; | 24 | margin-right: 20px; |
25 | padding: 11px; | ||
14 | text-align: center; | 26 | text-align: center; |
15 | border-radius: $theme-border-radius-small; | ||
16 | flex: 1; | ||
17 | box-shadow: $theme-inset-shadow; | ||
18 | transition: background $theme-transition-time; | 27 | transition: background $theme-transition-time; |
19 | 28 | ||
20 | &:last-of-type { | 29 | &:last-of-type { margin-right: 0; } |
21 | margin-right: 0; | ||
22 | } | ||
23 | 30 | ||
24 | &.is-selected { | 31 | &.is-selected { |
25 | border: 2px solid $theme-brand-primary; | ||
26 | background: #FFF; | 32 | background: #FFF; |
33 | border: 2px solid $theme-brand-primary; | ||
27 | color: $theme-brand-primary; | 34 | color: $theme-brand-primary; |
28 | } | 35 | } |
29 | 36 | ||
30 | input { | 37 | input { display: none; } |
31 | display: none; | ||
32 | } | ||
33 | } | 38 | } |
34 | } | 39 | } |
diff --git a/src/styles/recipes.scss b/src/styles/recipes.scss index 1b519a5e5..84222e1fe 100644 --- a/src/styles/recipes.scss +++ b/src/styles/recipes.scss | |||
@@ -1,16 +1,22 @@ | |||
1 | @import './config.scss'; | 1 | @import './config.scss'; |
2 | 2 | ||
3 | .theme__dark .recipe-teaser { | ||
4 | background-color: $dark-theme-gray-dark; | ||
5 | |||
6 | &:hover { background-color: $dark-theme-gray; } | ||
7 | } | ||
8 | |||
3 | .recipes { | 9 | .recipes { |
4 | .recipes__list { | 10 | .recipes__list { |
11 | align-content: flex-start; | ||
5 | display: flex; | 12 | display: flex; |
6 | flex-flow: row wrap; | 13 | flex-flow: row wrap; |
7 | align-content: flex-start; | ||
8 | min-height: 70%; | ||
9 | height: auto; | 14 | height: auto; |
15 | min-height: 70%; | ||
10 | 16 | ||
11 | &.recipes__list--disabled { | 17 | &.recipes__list--disabled { |
12 | opacity: 0.3; | ||
13 | filter: grayscale(100%); | 18 | filter: grayscale(100%); |
19 | opacity: .3; | ||
14 | pointer-events: none; | 20 | pointer-events: none; |
15 | } | 21 | } |
16 | } | 22 | } |
@@ -19,58 +25,48 @@ | |||
19 | height: auto; | 25 | height: auto; |
20 | margin-bottom: 35px; | 26 | margin-bottom: 35px; |
21 | 27 | ||
22 | .badge { | 28 | .badge { margin-right: 10px; } |
23 | margin-right: 10px; | ||
24 | } | ||
25 | 29 | ||
26 | &.recipes__navigation--disabled { | 30 | &.recipes__navigation--disabled { |
27 | opacity: 0.3; | ||
28 | filter: grayscale(100%); | 31 | filter: grayscale(100%); |
32 | opacity: .3; | ||
29 | pointer-events: none; | 33 | pointer-events: none; |
30 | } | 34 | } |
31 | } | 35 | } |
32 | 36 | ||
33 | &__service-request { | 37 | &__service-request { float: right; } |
34 | float: right; | ||
35 | } | ||
36 | } | 38 | } |
37 | 39 | ||
38 | .recipe-teaser { | 40 | .recipe-teaser { |
39 | position: relative; | 41 | background-color: $theme-gray-lightest; |
40 | width: calc(25% - 20px); | 42 | border-radius: $theme-border-radius; |
41 | height: 120px; | 43 | height: 120px; |
42 | margin: 0 20px 20px 0; | 44 | margin: 0 20px 20px 0; |
43 | border-radius: $theme-border-radius; | ||
44 | background-color: $theme-gray-lightest; | ||
45 | transition: background $theme-transition-time; | ||
46 | overflow: hidden; | 45 | overflow: hidden; |
46 | position: relative; | ||
47 | transition: background $theme-transition-time; | ||
48 | width: calc(25% - 20px); | ||
47 | 49 | ||
48 | &:hover { | 50 | &:hover { background-color: $theme-gray-lighter; } |
49 | background-color: $theme-gray-lighter; | ||
50 | } | ||
51 | 51 | ||
52 | .recipe-teaser__icon { | 52 | .recipe-teaser__icon { |
53 | width: 50px; | ||
54 | margin-bottom: 10px; | 53 | margin-bottom: 10px; |
54 | width: 50px; | ||
55 | } | 55 | } |
56 | 56 | ||
57 | .recipe-teaser__label { | 57 | .recipe-teaser__label { display: block; } |
58 | display: block; | ||
59 | } | ||
60 | 58 | ||
61 | h2 { | 59 | h2 { z-index: 10; } |
62 | z-index: 10; | ||
63 | } | ||
64 | 60 | ||
65 | &__dev-badge { | 61 | &__dev-badge { |
66 | position: absolute; | ||
67 | top: 5px; | ||
68 | right: -13px; | ||
69 | width: 50px; | ||
70 | background: $theme-brand-warning; | 62 | background: $theme-brand-warning; |
63 | box-shadow: 0 0 4px rgba(black, .2); | ||
71 | color: #FFF; | 64 | color: #FFF; |
72 | font-size: 10px; | 65 | font-size: 10px; |
66 | position: absolute; | ||
67 | right: -13px; | ||
68 | top: 5px; | ||
73 | transform: rotateZ(45deg); | 69 | transform: rotateZ(45deg); |
74 | box-shadow: 0 0 4px rgba(black, 0.2); | 70 | width: 50px; |
75 | } | 71 | } |
76 | } | 72 | } |
diff --git a/src/styles/reset.scss b/src/styles/reset.scss index 21763f44f..80328dcef 100644 --- a/src/styles/reset.scss +++ b/src/styles/reset.scss | |||
@@ -16,63 +16,62 @@ article, aside, canvas, details, embed, | |||
16 | figure, figcaption, footer, header, hgroup, | 16 | figure, figcaption, footer, header, hgroup, |
17 | menu, nav, output, ruby, section, summary, | 17 | menu, nav, output, ruby, section, summary, |
18 | time, mark, audio, video { | 18 | time, mark, audio, video { |
19 | margin: 0; | ||
20 | padding: 0; | ||
21 | border: 0; | 19 | border: 0; |
22 | font-size: 100%; | ||
23 | font: inherit; | 20 | font: inherit; |
21 | font-size: 100%; | ||
22 | margin: 0; | ||
23 | padding: 0; | ||
24 | } | 24 | } |
25 | /* HTML5 display-role reset for older browsers */ | 25 | |
26 | article, aside, details, figcaption, figure, | 26 | article, aside, details, figcaption, figure, |
27 | footer, header, hgroup, menu, nav, section { | 27 | footer, header, hgroup, menu, nav, section { display: block; } |
28 | display: block; | 28 | |
29 | } | 29 | ol, |
30 | body { | 30 | ul { list-style: none; } |
31 | line-height: 1; | 31 | |
32 | } | 32 | blockquote, |
33 | ol, ul { | 33 | q { |
34 | list-style: none; | ||
35 | } | ||
36 | blockquote, q { | ||
37 | quotes: none; | 34 | quotes: none; |
35 | |||
36 | &::before, | ||
37 | &::after { | ||
38 | content: ''; | ||
39 | content: none; | ||
40 | } | ||
38 | } | 41 | } |
39 | blockquote:before, blockquote:after, q:before, q:after { | 42 | |
40 | content: ''; | ||
41 | content: none; | ||
42 | } | ||
43 | table { | 43 | table { |
44 | border-collapse: collapse; | 44 | border-collapse: collapse; |
45 | border-spacing: 0; | 45 | border-spacing: 0; |
46 | } | 46 | } |
47 | 47 | ||
48 | /* Buttons should not have any special style applied by default */ | ||
49 | button { | 48 | button { |
50 | background: none; | 49 | background: none; |
51 | border: none; | 50 | border: none; |
52 | padding: 0; | 51 | padding: 0; |
53 | } | ||
54 | 52 | ||
55 | button:focus { | 53 | &:focus { outline: 0; } |
56 | outline: 0; | 54 | .theme__dark & { color: $dark-theme-gray-smoke; } |
57 | } | 55 | } |
58 | 56 | ||
59 | html { | 57 | html { |
60 | /* base for rem / 1rem = 10px */ | ||
61 | font-size: 62.5%; | 58 | font-size: 62.5%; |
62 | font-family: 'Open Sans'; | 59 | font-family: 'Open Sans'; |
63 | } | 60 | } |
64 | 61 | ||
65 | body { | 62 | body { |
66 | /* default font size = 14px */ | ||
67 | font-size: 1.4rem; | ||
68 | color: $theme-gray-dark; | 63 | color: $theme-gray-dark; |
64 | font-size: 1.4rem; | ||
65 | line-height: 1; | ||
66 | |||
67 | .theme__dark { color: $dark-theme-gray-smoke; } | ||
69 | } | 68 | } |
70 | 69 | ||
71 | * { | 70 | * { |
72 | -webkit-font-smoothing: antialiased; | ||
73 | box-sizing: border-box; | 71 | box-sizing: border-box; |
74 | font-size: 1.4rem; | ||
75 | font-family: 'Open Sans'; | 72 | font-family: 'Open Sans'; |
73 | font-size: 1.4rem; | ||
74 | -webkit-font-smoothing: antialiased; | ||
76 | -webkit-user-select: none; | 75 | -webkit-user-select: none; |
77 | } | 76 | } |
78 | 77 | ||
@@ -82,14 +81,6 @@ html, body, div { | |||
82 | box-sizing: border-box; | 81 | box-sizing: border-box; |
83 | } | 82 | } |
84 | 83 | ||
85 | *:focus { | 84 | *:focus { outline: none; } |
86 | outline: none; | 85 | img { pointer-events: none; } |
87 | } | 86 | a { cursor: default; } |
88 | |||
89 | img { | ||
90 | pointer-events: none; | ||
91 | } | ||
92 | |||
93 | a { | ||
94 | cursor: default; | ||
95 | } | ||
diff --git a/src/styles/searchInput.scss b/src/styles/searchInput.scss index 633a31e09..32b9da065 100644 --- a/src/styles/searchInput.scss +++ b/src/styles/searchInput.scss | |||
@@ -1,20 +1,32 @@ | |||
1 | @import './config.scss'; | ||
2 | @import './mixins.scss'; | ||
3 | |||
4 | .theme__dark .search-input { | ||
5 | @extend %headline__dark; | ||
6 | background: $dark-theme-gray-dark; | ||
7 | border: 1px solid $dark-theme-gray-light; | ||
8 | border-radius: $theme-border-radius; | ||
9 | color: $dark-theme-gray-lightest; | ||
10 | |||
11 | input { color: $dark-theme-gray-lightest; } | ||
12 | } | ||
13 | |||
1 | .search-input { | 14 | .search-input { |
2 | width: 100%; | 15 | @extend %headline; |
3 | height: auto; | ||
4 | display: flex; | ||
5 | align-items: center; | 16 | align-items: center; |
6 | padding: 0 10px; | ||
7 | border-radius: 30px; | ||
8 | background: $theme-gray-lightest; | 17 | background: $theme-gray-lightest; |
9 | padding: 5px 10px; | 18 | border-radius: 30px; |
10 | @extend %headline; | ||
11 | color: $theme-gray-light; | 19 | color: $theme-gray-light; |
20 | display: flex; | ||
21 | height: auto; | ||
22 | padding: 5px 10px; | ||
23 | width: 100%; | ||
12 | 24 | ||
13 | input { | 25 | input { |
14 | padding-left: 10px; | ||
15 | background: none; | 26 | background: none; |
16 | border: 0; | 27 | border: 0; |
17 | flex: 1; | ||
18 | color: $theme-gray-light; | 28 | color: $theme-gray-light; |
29 | flex: 1; | ||
30 | padding-left: 10px; | ||
19 | } | 31 | } |
20 | } | 32 | } |
diff --git a/src/styles/select.scss b/src/styles/select.scss index 965b4321a..ed0fc0fc2 100644 --- a/src/styles/select.scss +++ b/src/styles/select.scss | |||
@@ -3,17 +3,21 @@ | |||
3 | 3 | ||
4 | $toggle: "PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICBpZD0ic3ZnMiIKICAgdmlld0JveD0iMCAwIDM1Ljk3MDk4MyAyMy4wOTE1MTgiCiAgIGhlaWdodD0iNi41MTY5Mzk2bW0iCiAgIHdpZHRoPSIxMC4xNTE4MTFtbSI+CiAgPGRlZnMKICAgICBpZD0iZGVmczQiIC8+CiAgPG1ldGFkYXRhCiAgICAgaWQ9Im1ldGFkYXRhNyI+CiAgICA8cmRmOlJERj4KICAgICAgPGNjOldvcmsKICAgICAgICAgcmRmOmFib3V0PSIiPgogICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PgogICAgICAgIDxkYzp0eXBlCiAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4KICAgICAgICA8ZGM6dGl0bGU+PC9kYzp0aXRsZT4KICAgICAgPC9jYzpXb3JrPgogICAgPC9yZGY6UkRGPgogIDwvbWV0YWRhdGE+CiAgPGcKICAgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjAyLjAxNDUxLC00MDcuMTIyMjUpIgogICAgIGlkPSJsYXllcjEiPgogICAgPHRleHQKICAgICAgIGlkPSJ0ZXh0MzMzNiIKICAgICAgIHk9IjYyOS41MDUwNyIKICAgICAgIHg9IjI5MS40Mjg1NiIKICAgICAgIHN0eWxlPSJmb250LXN0eWxlOm5vcm1hbDtmb250LXdlaWdodDpub3JtYWw7Zm9udC1zaXplOjQwcHg7bGluZS1oZWlnaHQ6MTI1JTtmb250LWZhbWlseTpzYW5zLXNlcmlmO2xldHRlci1zcGFjaW5nOjBweDt3b3JkLXNwYWNpbmc6MHB4O2ZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZTtzdHJva2Utd2lkdGg6MXB4O3N0cm9rZS1saW5lY2FwOmJ1dHQ7c3Ryb2tlLWxpbmVqb2luOm1pdGVyO3N0cm9rZS1vcGFjaXR5OjEiCiAgICAgICB4bWw6c3BhY2U9InByZXNlcnZlIj48dHNwYW4KICAgICAgICAgeT0iNjI5LjUwNTA3IgogICAgICAgICB4PSIyOTEuNDI4NTYiCiAgICAgICAgIGlkPSJ0c3BhbjMzMzgiPjwvdHNwYW4+PC90ZXh0PgogICAgPGcKICAgICAgIGlkPSJ0ZXh0MzM0MCIKICAgICAgIHN0eWxlPSJmb250LXN0eWxlOm5vcm1hbDtmb250LXZhcmlhbnQ6bm9ybWFsO2ZvbnQtd2VpZ2h0Om5vcm1hbDtmb250LXN0cmV0Y2g6bm9ybWFsO2ZvbnQtc2l6ZTo0MHB4O2xpbmUtaGVpZ2h0OjEyNSU7Zm9udC1mYW1pbHk6Rm9udEF3ZXNvbWU7LWlua3NjYXBlLWZvbnQtc3BlY2lmaWNhdGlvbjpGb250QXdlc29tZTtsZXR0ZXItc3BhY2luZzowcHg7d29yZC1zcGFjaW5nOjBweDtmaWxsOiMwMDAwMDA7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmU7c3Ryb2tlLXdpZHRoOjFweDtzdHJva2UtbGluZWNhcDpidXR0O3N0cm9rZS1saW5lam9pbjptaXRlcjtzdHJva2Utb3BhY2l0eToxIj4KICAgICAgPHBhdGgKICAgICAgICAgaWQ9InBhdGgzMzQ1IgogICAgICAgICBzdHlsZT0iZmlsbDojMzMzMzMzO2ZpbGwtb3BhY2l0eToxIgogICAgICAgICBkPSJtIDIzNy41NjY5Niw0MTMuMjU1MDcgYyAwLjU1ODA0LC0wLjU1ODA0IDAuNTU4MDQsLTEuNDczMjIgMCwtMi4wMzEyNSBsIC0zLjcwNTM1LC0zLjY4MzA0IGMgLTAuNTU4MDQsLTAuNTU4MDQgLTEuNDUwOSwtMC41NTgwNCAtMi4wMDg5MywwIEwgMjIwLDQxOS4zOTM0NiAyMDguMTQ3MzIsNDA3LjU0MDc4IGMgLTAuNTU4MDMsLTAuNTU4MDQgLTEuNDUwODksLTAuNTU4MDQgLTIuMDA4OTMsMCBsIC0zLjcwNTM1LDMuNjgzMDQgYyAtMC41NTgwNCwwLjU1ODAzIC0wLjU1ODA0LDEuNDczMjEgMCwyLjAzMTI1IGwgMTYuNTYyNSwxNi41NDAxNyBjIDAuNTU4MDMsMC41NTgwNCAxLjQ1MDg5LDAuNTU4MDQgMi4wMDg5MiwwIGwgMTYuNTYyNSwtMTYuNTQwMTcgeiIgLz4KICAgIDwvZz4KICA8L2c+Cjwvc3ZnPgo="; | 4 | $toggle: "PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICBpZD0ic3ZnMiIKICAgdmlld0JveD0iMCAwIDM1Ljk3MDk4MyAyMy4wOTE1MTgiCiAgIGhlaWdodD0iNi41MTY5Mzk2bW0iCiAgIHdpZHRoPSIxMC4xNTE4MTFtbSI+CiAgPGRlZnMKICAgICBpZD0iZGVmczQiIC8+CiAgPG1ldGFkYXRhCiAgICAgaWQ9Im1ldGFkYXRhNyI+CiAgICA8cmRmOlJERj4KICAgICAgPGNjOldvcmsKICAgICAgICAgcmRmOmFib3V0PSIiPgogICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PgogICAgICAgIDxkYzp0eXBlCiAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4KICAgICAgICA8ZGM6dGl0bGU+PC9kYzp0aXRsZT4KICAgICAgPC9jYzpXb3JrPgogICAgPC9yZGY6UkRGPgogIDwvbWV0YWRhdGE+CiAgPGcKICAgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjAyLjAxNDUxLC00MDcuMTIyMjUpIgogICAgIGlkPSJsYXllcjEiPgogICAgPHRleHQKICAgICAgIGlkPSJ0ZXh0MzMzNiIKICAgICAgIHk9IjYyOS41MDUwNyIKICAgICAgIHg9IjI5MS40Mjg1NiIKICAgICAgIHN0eWxlPSJmb250LXN0eWxlOm5vcm1hbDtmb250LXdlaWdodDpub3JtYWw7Zm9udC1zaXplOjQwcHg7bGluZS1oZWlnaHQ6MTI1JTtmb250LWZhbWlseTpzYW5zLXNlcmlmO2xldHRlci1zcGFjaW5nOjBweDt3b3JkLXNwYWNpbmc6MHB4O2ZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZTtzdHJva2Utd2lkdGg6MXB4O3N0cm9rZS1saW5lY2FwOmJ1dHQ7c3Ryb2tlLWxpbmVqb2luOm1pdGVyO3N0cm9rZS1vcGFjaXR5OjEiCiAgICAgICB4bWw6c3BhY2U9InByZXNlcnZlIj48dHNwYW4KICAgICAgICAgeT0iNjI5LjUwNTA3IgogICAgICAgICB4PSIyOTEuNDI4NTYiCiAgICAgICAgIGlkPSJ0c3BhbjMzMzgiPjwvdHNwYW4+PC90ZXh0PgogICAgPGcKICAgICAgIGlkPSJ0ZXh0MzM0MCIKICAgICAgIHN0eWxlPSJmb250LXN0eWxlOm5vcm1hbDtmb250LXZhcmlhbnQ6bm9ybWFsO2ZvbnQtd2VpZ2h0Om5vcm1hbDtmb250LXN0cmV0Y2g6bm9ybWFsO2ZvbnQtc2l6ZTo0MHB4O2xpbmUtaGVpZ2h0OjEyNSU7Zm9udC1mYW1pbHk6Rm9udEF3ZXNvbWU7LWlua3NjYXBlLWZvbnQtc3BlY2lmaWNhdGlvbjpGb250QXdlc29tZTtsZXR0ZXItc3BhY2luZzowcHg7d29yZC1zcGFjaW5nOjBweDtmaWxsOiMwMDAwMDA7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmU7c3Ryb2tlLXdpZHRoOjFweDtzdHJva2UtbGluZWNhcDpidXR0O3N0cm9rZS1saW5lam9pbjptaXRlcjtzdHJva2Utb3BhY2l0eToxIj4KICAgICAgPHBhdGgKICAgICAgICAgaWQ9InBhdGgzMzQ1IgogICAgICAgICBzdHlsZT0iZmlsbDojMzMzMzMzO2ZpbGwtb3BhY2l0eToxIgogICAgICAgICBkPSJtIDIzNy41NjY5Niw0MTMuMjU1MDcgYyAwLjU1ODA0LC0wLjU1ODA0IDAuNTU4MDQsLTEuNDczMjIgMCwtMi4wMzEyNSBsIC0zLjcwNTM1LC0zLjY4MzA0IGMgLTAuNTU4MDQsLTAuNTU4MDQgLTEuNDUwOSwtMC41NTgwNCAtMi4wMDg5MywwIEwgMjIwLDQxOS4zOTM0NiAyMDguMTQ3MzIsNDA3LjU0MDc4IGMgLTAuNTU4MDMsLTAuNTU4MDQgLTEuNDUwODksLTAuNTU4MDQgLTIuMDA4OTMsMCBsIC0zLjcwNTM1LDMuNjgzMDQgYyAtMC41NTgwNCwwLjU1ODAzIC0wLjU1ODA0LDEuNDczMjEgMCwyLjAzMTI1IGwgMTYuNTYyNSwxNi41NDAxNyBjIDAuNTU4MDMsMC41NTgwNCAxLjQ1MDg5LDAuNTU4MDQgMi4wMDg5MiwwIGwgMTYuNTYyNSwtMTYuNTQwMTcgeiIgLz4KICAgIDwvZz4KICA8L2c+Cjwvc3ZnPgo="; |
5 | 5 | ||
6 | .franz-form { | 6 | .theme__dark .franz-form .franz-form__select { |
7 | .franz-form__select { | 7 | background-color: $dark-theme-gray-dark; |
8 | -webkit-appearance: none; | 8 | border: 1px solid $dark-theme-gray-light; |
9 | min-width: 200px; | 9 | color: $dark-theme-gray-lightest; |
10 | padding: 10px; | 10 | } |
11 | background-color: $theme-gray-lightest; | 11 | |
12 | background-position: right center; | 12 | .franz-form .franz-form__select { |
13 | background-repeat: no-repeat; | 13 | background-color: $theme-gray-lightest; |
14 | background-size: 1ex; | 14 | background-image: url(data:image/svg+xml;base64,#{$toggle}); |
15 | background-origin: content-box; | 15 | background-origin: content-box; |
16 | background-image: url(data:image/svg+xml;base64,#{$toggle}); | 16 | background-position: right center; |
17 | border: 1px solid $theme-gray-lighter; | 17 | background-repeat: no-repeat; |
18 | } | 18 | background-size: 1ex; |
19 | border: 1px solid $theme-gray-lighter; | ||
20 | min-width: 200px; | ||
21 | padding: 10px; | ||
22 | -webkit-appearance: none; | ||
19 | } | 23 | } |
diff --git a/src/styles/service-table.scss b/src/styles/service-table.scss index 66d5ac941..f2090685b 100644 --- a/src/styles/service-table.scss +++ b/src/styles/service-table.scss | |||
@@ -1,62 +1,63 @@ | |||
1 | @import './config.scss'; | 1 | @import './config.scss'; |
2 | 2 | ||
3 | .theme__dark .service-table { | ||
4 | .service-table__icon.has-custom-icon { border: 1px solid $dark-theme-gray-dark; } | ||
5 | .service-table__column-info .mdi { color: $dark-theme-gray-lightest; } | ||
6 | |||
7 | .service-table__row { | ||
8 | border-bottom: 1px solid $dark-theme-gray-darker; | ||
9 | |||
10 | &:hover { background: $dark-theme-gray-darker; } | ||
11 | &.service-table__row--disabled { color: $dark-theme-gray; } | ||
12 | } | ||
13 | } | ||
14 | |||
3 | .service-table { | 15 | .service-table { |
4 | width: 100%; | 16 | width: 100%; |
5 | 17 | ||
6 | .service-table__toggle { | 18 | .service-table__toggle { |
7 | width: 60px; | 19 | width: 60px; |
8 | 20 | ||
9 | .franz-form__field { | 21 | .franz-form__field { margin-bottom: 0; } |
10 | margin-bottom: 0; | ||
11 | } | ||
12 | } | 22 | } |
13 | 23 | ||
14 | .service-table__icon { | 24 | .service-table__icon { |
15 | width: 35px; | 25 | width: 35px; |
16 | 26 | ||
17 | &.has-custom-icon { | 27 | &.has-custom-icon { |
18 | border-radius: $theme-border-radius; | ||
19 | border: 1px solid $theme-gray-lighter; | 28 | border: 1px solid $theme-gray-lighter; |
29 | border-radius: $theme-border-radius; | ||
20 | width: 37px; | 30 | width: 37px; |
21 | } | 31 | } |
22 | } | 32 | } |
23 | 33 | ||
24 | .service-table__column-icon { | 34 | .service-table__column-icon, |
25 | width: 40px; | 35 | .service-table__column-action { width: 40px } |
26 | } | ||
27 | |||
28 | .service-table__column-action { | ||
29 | width: 40px | ||
30 | } | ||
31 | 36 | ||
32 | .service-table__column-info { | 37 | .service-table__column-info { |
33 | width: 40px; | 38 | width: 40px; |
34 | 39 | ||
35 | .mdi { | 40 | .mdi { |
41 | color: $theme-gray-light; | ||
36 | display: block; | 42 | display: block; |
37 | font-size: 18px; | 43 | font-size: 18px; |
38 | color: $theme-gray-light; | ||
39 | } | 44 | } |
40 | } | 45 | } |
41 | 46 | ||
42 | .service-table__row { | 47 | .service-table__row { |
43 | border-bottom: 1px solid $theme-gray-lightest; | 48 | border-bottom: 1px solid $theme-gray-lightest; |
44 | 49 | ||
45 | &:hover { | 50 | &:hover { background: $theme-gray-lightest; } |
46 | background: $theme-gray-lightest; | ||
47 | } | ||
48 | 51 | ||
49 | &.service-table__row--disabled { | 52 | &.service-table__row--disabled { |
50 | color: $theme-gray-light; | 53 | color: $theme-gray-light; |
51 | 54 | ||
52 | .service-table__column-icon { | 55 | .service-table__column-icon { |
53 | filter: grayscale(100%); | 56 | filter: grayscale(100%); |
54 | opacity: 0.5; | 57 | opacity: .5; |
55 | } | 58 | } |
56 | } | 59 | } |
57 | } | 60 | } |
58 | 61 | ||
59 | td { | 62 | td { padding: 10px; } |
60 | padding: 10px; | ||
61 | } | ||
62 | } | 63 | } |
diff --git a/src/styles/services.scss b/src/styles/services.scss index 9f6cfc772..0e559501c 100644 --- a/src/styles/services.scss +++ b/src/styles/services.scss | |||
@@ -1,30 +1,46 @@ | |||
1 | @import './config.scss'; | 1 | @import './config.scss'; |
2 | 2 | ||
3 | .theme__dark .services { | ||
4 | background: $dark-theme-gray-darkest; | ||
5 | |||
6 | .services__webview-wrapper { background: $dark-theme-gray-darkest; } | ||
7 | |||
8 | .services__webview, | ||
9 | .services__info-layer { | ||
10 | webview { background: $dark-theme-gray-darkest; } | ||
11 | } | ||
12 | |||
13 | .services__no-service, | ||
14 | .services__info-layer { | ||
15 | background: $dark-theme-gray-darkest; | ||
16 | |||
17 | h1 { color: $dark-theme-gray-lightest; } | ||
18 | } | ||
19 | } | ||
20 | |||
3 | .services { | 21 | .services { |
22 | background: #FFF; | ||
4 | flex: 1; | 23 | flex: 1; |
5 | height: 100%; | 24 | height: 100%; |
6 | position: relative; | ||
7 | overflow: hidden; | ||
8 | background: #FFF; | ||
9 | order: 5; | 25 | order: 5; |
26 | overflow: hidden; | ||
27 | position: relative; | ||
10 | 28 | ||
11 | .services__webview-wrapper { | 29 | .services__webview-wrapper { background: $theme-gray-lighter; } |
12 | background: $theme-gray-lighter; | ||
13 | } | ||
14 | 30 | ||
15 | .services__webview, | 31 | .services__webview, |
16 | .services__info-layer { | 32 | .services__info-layer { |
33 | left: 0; | ||
17 | position: absolute; | 34 | position: absolute; |
18 | width: 100%; | ||
19 | top: 0; | 35 | top: 0; |
20 | left: 0; | 36 | width: 100%; |
21 | z-index: 0; | 37 | z-index: 0; |
22 | 38 | ||
23 | webview { | 39 | webview { |
24 | display: inline-flex; | ||
25 | width: 0px; | ||
26 | height: 0px; | ||
27 | background: $theme-gray-lighter; | 40 | background: $theme-gray-lighter; |
41 | display: inline-flex; | ||
42 | height: 0; | ||
43 | width: 0; | ||
28 | } | 44 | } |
29 | 45 | ||
30 | &.is-active { | 46 | &.is-active { |
@@ -32,36 +48,30 @@ | |||
32 | 48 | ||
33 | webview { | 49 | webview { |
34 | flex: 0 1; | 50 | flex: 0 1; |
35 | width: 100%; | ||
36 | height: 100%; | 51 | height: 100%; |
52 | width: 100%; | ||
37 | } | 53 | } |
38 | } | 54 | } |
39 | 55 | ||
40 | &--force-repaint { | 56 | &--force-repaint webview { z-index: 5; } |
41 | webview { | ||
42 | z-index: 5; | ||
43 | } | ||
44 | } | ||
45 | } | 57 | } |
46 | 58 | ||
47 | .services__no-service, | 59 | .services__no-service, |
48 | .services__info-layer { | 60 | .services__info-layer { |
61 | align-items: center; | ||
62 | background: $theme-gray-lighter; | ||
49 | display: flex; | 63 | display: flex; |
50 | flex-direction: column; | 64 | flex-direction: column; |
51 | justify-content: center; | 65 | justify-content: center; |
52 | align-items: center; | ||
53 | text-align: center; | 66 | text-align: center; |
54 | background: $theme-gray-lighter; | ||
55 | 67 | ||
56 | h1 { | 68 | h1 { |
57 | margin: 25px 0 40px; | ||
58 | color: $theme-gray-dark; | 69 | color: $theme-gray-dark; |
70 | margin: 25px 0 40px; | ||
59 | } | 71 | } |
60 | 72 | ||
61 | a.button, | 73 | a.button, |
62 | button { | 74 | button { margin: 40px 0 20px; } |
63 | margin: 40px 0 20px; | ||
64 | } | ||
65 | } | 75 | } |
66 | 76 | ||
67 | .services__info-layer { | 77 | .services__info-layer { |
diff --git a/src/styles/settings.scss b/src/styles/settings.scss index 2182c9b5f..f94ca114d 100644 --- a/src/styles/settings.scss +++ b/src/styles/settings.scss | |||
@@ -1,130 +1,215 @@ | |||
1 | @import './config.scss'; | 1 | @import './config.scss'; |
2 | 2 | ||
3 | %headline { | 3 | %headline { |
4 | color: $theme-gray-light; | ||
4 | font-size: 20px; | 5 | font-size: 20px; |
5 | font-weight: 400; | 6 | font-weight: 400; |
6 | letter-spacing: -1px; | 7 | letter-spacing: -1px; |
7 | color: $theme-gray-light; | ||
8 | 8 | ||
9 | a { | 9 | a { color: $theme-gray-light; } |
10 | color: $theme-gray-light; | 10 | } |
11 | |||
12 | %headline__dark { | ||
13 | color: $dark-theme-gray-lightest; | ||
14 | |||
15 | a { color: $dark-theme-gray-lightest; } | ||
16 | } | ||
17 | |||
18 | .theme__dark { | ||
19 | .settings-wrapper { background: rgba($dark-theme-black, .8); } | ||
20 | |||
21 | .settings { | ||
22 | background: $dark-theme-gray-darkest; | ||
23 | box-shadow: 0 20px 50px rgba($dark-theme-black, .5); | ||
24 | |||
25 | .settings__header { | ||
26 | background: $dark-theme-gray-darker; | ||
27 | |||
28 | h1, | ||
29 | .settings__header-item { @extend %headline__dark; } | ||
30 | |||
31 | .separator { border-right: 1px solid $dark-theme-gray-dark; } | ||
32 | .mdi { color: $dark-theme-gray-lightest; } | ||
33 | } | ||
34 | |||
35 | .settings__body::-webkit-scrollbar-thumb { background: $dark-theme-gray; } | ||
36 | |||
37 | .settings__close { | ||
38 | background: $dark-theme-gray-darker; | ||
39 | border-left: none; | ||
40 | color: $dark-theme-gray-lightest; | ||
41 | |||
42 | &:hover { background: darken($dark-theme-gray-darker, 5%); } | ||
43 | } | ||
44 | |||
45 | &__settings-group h3 { color: $dark-theme-gray-lightest; } | ||
46 | |||
47 | .settings__message { | ||
48 | border-top: 1px solid $theme-gray-lighter; | ||
49 | color: $dark-theme-gray-lightest; | ||
50 | |||
51 | .mdi { color: $dark-theme-gray-lightest; } | ||
52 | } | ||
53 | |||
54 | .settings__help { color: $dark-theme-gray-lightest; } | ||
55 | |||
56 | .settings__controls { | ||
57 | background: $dark-theme-gray-darker; | ||
58 | |||
59 | .franz-form__button.franz-form__button--secondary { background: $theme-gray-light; } | ||
60 | } | ||
61 | |||
62 | .account { | ||
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 | } | ||
70 | |||
71 | .premium-info { | ||
72 | background: $dark-theme-gray-darker; | ||
73 | border: 2px solid $theme-brand-primary; | ||
74 | } | ||
75 | .legal { color: $theme-gray-light; } | ||
76 | } | ||
77 | |||
78 | .settings-navigation { | ||
79 | background: $dark-theme-gray-darker; | ||
80 | border-right: 1px solid $dark-theme-gray-dark; | ||
81 | |||
82 | .settings-navigation__link { | ||
83 | color: $dark-theme-gray-lightest; | ||
84 | |||
85 | .badge { | ||
86 | background: $dark-theme-gray-lighter; | ||
87 | color: $dark-theme-gray-smoke; | ||
88 | } | ||
89 | |||
90 | &:hover { | ||
91 | background: darken($dark-theme-gray-darker, 5%); | ||
92 | |||
93 | .badge { | ||
94 | background: $dark-theme-gray-lighter; | ||
95 | color: $dark-theme-gray-smoke; | ||
96 | } | ||
97 | } | ||
98 | |||
99 | &.is-active { | ||
100 | background: $dark-theme-gray; | ||
101 | color: $dark-theme-gray-smoke; | ||
102 | |||
103 | .badge { | ||
104 | background: $dark-theme-gray-lighter; | ||
105 | color: $dark-theme-gray-smoke; | ||
106 | } | ||
107 | } | ||
108 | } | ||
109 | |||
110 | .settings-navigation__action-badge { background: $theme-brand-danger; } | ||
11 | } | 111 | } |
12 | } | 112 | } |
13 | 113 | ||
14 | .settings-wrapper { | 114 | .settings-wrapper { |
15 | background: rgba(black, 0.5); | 115 | align-items: center; |
16 | position: absolute; | 116 | background: rgba(black, .5); |
17 | width: 100%; | 117 | display: flex; |
18 | height: 100%; | 118 | height: 100%; |
19 | top: 0; | ||
20 | left: 0; | 119 | left: 0; |
21 | z-index: 9998; | ||
22 | display: flex; | ||
23 | justify-content: center; | 120 | justify-content: center; |
24 | align-items: center; | ||
25 | padding: 25px; | 121 | padding: 25px; |
122 | position: absolute; | ||
123 | top: 0; | ||
124 | width: 100%; | ||
125 | z-index: 9998; | ||
26 | 126 | ||
27 | .settings-wrapper__action { | 127 | .settings-wrapper__action { |
28 | position: absolute; | ||
29 | width: 100%; | ||
30 | height: 100%; | 128 | height: 100%; |
31 | top: 0; | ||
32 | left: 0; | 129 | left: 0; |
130 | position: absolute; | ||
131 | top: 0; | ||
132 | width: 100%; | ||
33 | } | 133 | } |
34 | } | 134 | } |
35 | 135 | ||
36 | .settings { | 136 | .settings { |
37 | position: relative; | 137 | background: #FFF; |
138 | border-radius: $theme-border-radius; | ||
139 | box-shadow: 0 20px 50px rgba(black, .5); | ||
38 | display: flex; | 140 | display: flex; |
39 | height: 100%; | 141 | height: 100%; |
40 | width: 100%; | 142 | max-height: 720px; |
41 | max-width: 900px; | 143 | max-width: 900px; |
42 | min-height: 400px; | 144 | min-height: 400px; |
43 | max-height: 720px; | ||
44 | z-index: 9999; | ||
45 | background: #FFF; | ||
46 | border-radius: $theme-border-radius; | ||
47 | box-shadow: 0 20px 50px rgba(black, 0.5); | ||
48 | overflow: hidden; | 145 | overflow: hidden; |
49 | // margin-top: -10%; | 146 | position: relative; |
147 | width: 100%; | ||
148 | z-index: 9999; | ||
50 | 149 | ||
51 | .settings__main { | 150 | .settings__main { |
52 | flex: 1; | ||
53 | display: flex; | 151 | display: flex; |
152 | flex: 1; | ||
54 | flex-direction: column; | 153 | flex-direction: column; |
55 | height: auto; | 154 | height: auto; |
56 | } | 155 | } |
57 | 156 | ||
58 | .settings__header { | 157 | .settings__header { |
59 | display: flex; | ||
60 | align-items: center; | 158 | align-items: center; |
61 | width: calc(100% - 60px); | 159 | background: $theme-gray-lighter; |
160 | display: flex; | ||
62 | height: 50px; | 161 | height: 50px; |
63 | padding: 0 40px; | 162 | padding: 0 40px; |
64 | background: $theme-gray-lighter; | 163 | width: calc(100% - 60px); |
65 | 164 | ||
66 | h1 { | 165 | h1 { |
67 | @extend %headline; | 166 | @extend %headline; |
68 | margin: 0; | 167 | margin: 0; |
69 | } | 168 | } |
70 | 169 | ||
71 | .settings__header-item { | 170 | .settings__header-item { @extend %headline; } |
72 | @extend %headline; | ||
73 | } | ||
74 | 171 | ||
75 | .separator { | 172 | .separator { |
173 | border-right: 1px solid darken($theme-gray-lighter, 10%); | ||
76 | height: 100%; | 174 | height: 100%; |
77 | margin: 0 15px; | 175 | margin: 0 15px; |
78 | border-right: 1px solid darken($theme-gray-lighter, 10%); | ||
79 | transform: skew(15deg) rotate(2deg); | 176 | transform: skew(15deg) rotate(2deg); |
80 | } | 177 | } |
81 | 178 | ||
82 | .mdi { | 179 | .mdi { color: $theme-gray-light; } |
83 | color: $theme-gray-light; | ||
84 | } | ||
85 | } | 180 | } |
86 | 181 | ||
87 | .settings__body { | 182 | .settings__body { |
88 | flex: 1; | 183 | flex: 1; |
89 | padding: 25px 15px 15px 25px; | ||
90 | margin: 15px; | 184 | margin: 15px; |
91 | overflow-y: scroll; | 185 | overflow-y: scroll; |
186 | padding: 25px 15px 15px 25px; | ||
92 | 187 | ||
93 | &::-webkit-scrollbar { | 188 | &::-webkit-scrollbar { width: 8px; } |
94 | width: 8px; | ||
95 | } | ||
96 | 189 | ||
97 | /* Track */ | 190 | /* Track */ |
98 | &::-webkit-scrollbar-track { | 191 | &::-webkit-scrollbar-track { |
99 | -webkit-border-radius: 10px; | ||
100 | border-radius: 10px; | ||
101 | background: none; | 192 | background: none; |
193 | border-radius: 10px; | ||
194 | -webkit-border-radius: 10px; | ||
102 | } | 195 | } |
103 | 196 | ||
104 | /* Handle */ | 197 | /* Handle */ |
105 | &::-webkit-scrollbar-thumb { | 198 | &::-webkit-scrollbar-thumb { |
106 | -webkit-border-radius: 10px; | ||
107 | border-radius: 10px; | ||
108 | background: $theme-gray-lighter; | 199 | background: $theme-gray-lighter; |
200 | border-radius: 10px; | ||
201 | -webkit-border-radius: 10px; | ||
109 | } | 202 | } |
110 | 203 | ||
111 | &::-webkit-scrollbar-thumb:window-inactive { | 204 | &::-webkit-scrollbar-thumb:window-inactive { background: none; } |
112 | background: none; | 205 | .service-flex-grid { display: flex; } |
113 | } | 206 | .service-name { flex: 1px; } |
114 | |||
115 | .service-flex-grid { | ||
116 | display: flex; | ||
117 | } | ||
118 | |||
119 | .service-name { | ||
120 | flex: 1px; | ||
121 | } | ||
122 | 207 | ||
123 | .service-icon { | 208 | .service-icon { |
124 | width: 140px; | ||
125 | float: right; | 209 | float: right; |
126 | margin-top: 30px; | ||
127 | margin-left: 40px; | 210 | margin-left: 40px; |
211 | margin-top: 30px; | ||
212 | width: 140px; | ||
128 | 213 | ||
129 | label { | 214 | label { |
130 | font-weight: bold; | 215 | font-weight: bold; |
@@ -134,51 +219,50 @@ | |||
134 | } | 219 | } |
135 | 220 | ||
136 | .settings__close { | 221 | .settings__close { |
137 | position: absolute; | ||
138 | right: 0; | ||
139 | background: $theme-gray-lighter; | 222 | background: $theme-gray-lighter; |
140 | height: 50px; | ||
141 | padding: 0 20px; | ||
142 | font-size: 20px; | ||
143 | border-left: 1px solid darken($theme-gray-lighter, 5%); | 223 | border-left: 1px solid darken($theme-gray-lighter, 5%); |
144 | color: $theme-gray-light; | 224 | color: $theme-gray-light; |
225 | font-size: 20px; | ||
226 | height: 50px; | ||
227 | padding: 0 20px; | ||
228 | position: absolute; | ||
229 | right: 0; | ||
145 | transition: background $theme-transition-time; | 230 | transition: background $theme-transition-time; |
146 | 231 | ||
147 | &:hover { | 232 | &:hover { background: darken($theme-gray-lighter, 5%); } |
148 | background: darken($theme-gray-lighter, 5%); | ||
149 | } | ||
150 | } | 233 | } |
151 | 234 | ||
152 | .search-input { | 235 | .search-input { margin-bottom: 30px; } |
153 | margin-bottom: 30px; | ||
154 | } | ||
155 | 236 | ||
156 | &__options { | 237 | &__options { |
157 | margin-top: 20px; | ||
158 | flex: 1; | 238 | flex: 1; |
239 | margin-top: 20px; | ||
159 | } | 240 | } |
160 | 241 | ||
161 | &__settings-group { | 242 | &__settings-group { |
162 | margin-top: 10px; | 243 | margin-top: 10px; |
163 | 244 | ||
164 | h3 { | 245 | h3 { |
246 | color: $theme-gray-light; | ||
165 | font-weight: bold; | 247 | font-weight: bold; |
248 | letter-spacing: -.1px; | ||
166 | margin: 25px 0 15px; | 249 | margin: 25px 0 15px; |
167 | color: $theme-gray-light; | ||
168 | letter-spacing: -0.1px; | ||
169 | 250 | ||
170 | &:first-of-type { | 251 | &:first-of-type { margin-top: 0; } |
171 | margin-top: 0; | 252 | |
253 | .badge { | ||
254 | font-weight: normal; | ||
255 | margin-left: 10px; | ||
172 | } | 256 | } |
173 | } | 257 | } |
174 | } | 258 | } |
175 | 259 | ||
176 | .settings__message { | 260 | .settings__message { |
261 | border-top: 1px solid $theme-gray-lighter; | ||
262 | color: $theme-gray-light; | ||
177 | display: flex; | 263 | display: flex; |
178 | margin-top: 40px; | 264 | margin-top: 40px; |
179 | padding-top: 15px; | 265 | padding-top: 15px; |
180 | border-top: 1px solid $theme-gray-lighter; | ||
181 | color: $theme-gray-light; | ||
182 | 266 | ||
183 | .mdi { | 267 | .mdi { |
184 | color: $theme-gray-light; | 268 | color: $theme-gray-light; |
@@ -188,69 +272,53 @@ | |||
188 | } | 272 | } |
189 | 273 | ||
190 | .settings__help { | 274 | .settings__help { |
191 | margin: -10px 0 20px 55px;; | ||
192 | font-size: 12px; | ||
193 | color: $theme-gray-light; | 275 | color: $theme-gray-light; |
276 | font-size: 12px; | ||
277 | margin: -10px 0 20px 55px;; | ||
194 | } | 278 | } |
195 | 279 | ||
196 | .settings__controls { | 280 | .settings__controls { |
281 | background: $theme-gray-lighter; | ||
197 | display: flex; | 282 | display: flex; |
283 | height: auto; | ||
198 | justify-content: space-between; | 284 | justify-content: space-between; |
199 | padding: 10px 20px; | 285 | padding: 10px 20px; |
200 | height: auto; | ||
201 | background: $theme-gray-lighter; | ||
202 | 286 | ||
203 | .franz-form__button { | 287 | .franz-form__button { |
204 | &[type='submit'] { | 288 | &[type='submit'] { margin-left: auto; } |
205 | margin-left: auto; | 289 | &.franz-form__button--secondary { background: $theme-gray-light; } |
206 | } | ||
207 | |||
208 | &.franz-form__button--secondary { | ||
209 | background: $theme-gray-light; | ||
210 | } | ||
211 | } | 290 | } |
212 | } | 291 | } |
213 | 292 | ||
214 | .settings__delete-button { | 293 | .settings__delete-button { right: 0; } |
215 | right: 0; | ||
216 | } | ||
217 | 294 | ||
218 | .settings__empty-state { | 295 | .settings__empty-state { |
219 | width: 100%; | 296 | align-items: center; |
297 | align-self: center; | ||
220 | height: auto; | 298 | height: auto; |
221 | min-height: 70%; | 299 | min-height: 70%; |
222 | text-align: center; | 300 | text-align: center; |
223 | align-self: center; | 301 | width: 100%; |
224 | // margin-top: -20px; | ||
225 | align-items: center; | ||
226 | 302 | ||
227 | a.button { | 303 | a.button { margin-top: 40px; } |
228 | margin-top: 40px; | ||
229 | } | ||
230 | } | 304 | } |
231 | 305 | ||
232 | .account { | 306 | .account { |
233 | height: auto; | 307 | height: auto; |
234 | // padding: 20px; | ||
235 | 308 | ||
236 | .account__box { | 309 | .account__box { |
310 | align-items: center; | ||
237 | background: $theme-gray-lightest; | 311 | background: $theme-gray-lightest; |
238 | border-radius: $theme-border-radius; | 312 | border-radius: $theme-border-radius; |
239 | padding: 20px; | ||
240 | margin-bottom: 40px; | 313 | margin-bottom: 40px; |
241 | align-items: center; | 314 | padding: 20px; |
242 | |||
243 | &.account__box--flex { | ||
244 | display: flex; | ||
245 | } | ||
246 | 315 | ||
247 | &.account__box--last { | 316 | &.account__box--flex { display: flex; } |
248 | margin-bottom: 0; | 317 | &.account__box--last { margin-bottom: 0; } |
249 | } | ||
250 | 318 | ||
251 | .auth__button { | 319 | .auth__button { |
252 | width: 100%; | ||
253 | margin-top: 10px; | 320 | margin-top: 10px; |
321 | width: 100%; | ||
254 | } | 322 | } |
255 | } | 323 | } |
256 | 324 | ||
@@ -258,57 +326,40 @@ | |||
258 | margin-right: 20px; | 326 | margin-right: 20px; |
259 | position: relative; | 327 | position: relative; |
260 | 328 | ||
261 | .emoji img { | 329 | .emoji img { width: 30px; } |
262 | width: 30px; | ||
263 | } | ||
264 | } | 330 | } |
265 | 331 | ||
266 | .account__avatar-premium { | 332 | .account__avatar-premium { |
333 | font-size: 26px; | ||
267 | position: absolute; | 334 | position: absolute; |
268 | top: 2px; | ||
269 | right: 2px; | 335 | right: 2px; |
270 | font-size: 26px; | 336 | top: 2px; |
271 | } | 337 | } |
272 | 338 | ||
273 | .account__info { | 339 | .account__info { |
274 | flex: 1; | 340 | flex: 1; |
275 | 341 | ||
276 | h2 { | 342 | h2 { margin-bottom: 5px; } |
277 | margin-bottom: 5px; | 343 | .badge { margin-top: 5px; } |
278 | } | ||
279 | |||
280 | .badge { | ||
281 | margin-top: 5px; | ||
282 | } | ||
283 | } | 344 | } |
284 | 345 | ||
285 | .account__subscription { | 346 | .account__subscription { |
286 | display: flex; | ||
287 | align-items: center; | 347 | align-items: center; |
348 | display: flex; | ||
288 | 349 | ||
289 | .badge { | 350 | .badge { margin-left: 10px; } |
290 | margin-left: 10px; | ||
291 | } | ||
292 | } | ||
293 | |||
294 | .account__subscription-button { | ||
295 | margin-left: auto; | ||
296 | } | ||
297 | |||
298 | .franz-form__button { | ||
299 | white-space: nowrap; | ||
300 | } | 351 | } |
301 | 352 | ||
302 | div { | 353 | .account__subscription-button { margin-left: auto; } |
303 | height: auto; | 354 | .franz-form__button { white-space: nowrap; } |
304 | } | 355 | div { height: auto; } |
305 | 356 | ||
306 | .invoices { | 357 | .invoices { |
307 | width: 100%; | 358 | width: 100%; |
308 | 359 | ||
309 | td { | 360 | td { |
310 | padding: 15px 0; | ||
311 | border-bottom: 1px solid $theme-gray-lighter; | 361 | border-bottom: 1px solid $theme-gray-lighter; |
362 | padding: 15px 0; | ||
312 | } | 363 | } |
313 | 364 | ||
314 | tr:last-of-type td { | 365 | tr:last-of-type td { |
@@ -319,9 +370,7 @@ | |||
319 | .invoices__action { | 370 | .invoices__action { |
320 | text-align: right; | 371 | text-align: right; |
321 | 372 | ||
322 | button { | 373 | button { color: $theme-brand-primary; } |
323 | color: $theme-brand-primary; | ||
324 | } | ||
325 | } | 374 | } |
326 | } | 375 | } |
327 | } | 376 | } |
@@ -331,15 +380,13 @@ | |||
331 | font-size: 40px; | 380 | font-size: 40px; |
332 | margin-bottom: 20px; | 381 | margin-bottom: 20px; |
333 | 382 | ||
334 | img { | 383 | img { width: 40px; } |
335 | width: 40px; | ||
336 | } | ||
337 | } | 384 | } |
338 | 385 | ||
339 | .premium-info { | 386 | .premium-info { |
340 | background: lighten($theme-brand-primary, 40%); | 387 | background: lighten($theme-brand-primary, 40%); |
341 | padding: 20px; | ||
342 | border-radius: $theme-border-radius; | 388 | border-radius: $theme-border-radius; |
389 | padding: 20px; | ||
343 | } | 390 | } |
344 | 391 | ||
345 | .content-tabs .premium-info { | 392 | .content-tabs .premium-info { |
@@ -348,35 +395,33 @@ | |||
348 | } | 395 | } |
349 | 396 | ||
350 | .legal { | 397 | .legal { |
351 | text-align: center; | ||
352 | margin-top: 20px; | ||
353 | color: $theme-gray-light; | 398 | color: $theme-gray-light; |
399 | margin-top: 20px; | ||
400 | text-align: center; | ||
354 | } | 401 | } |
355 | } | 402 | } |
356 | 403 | ||
357 | .settings-navigation { | 404 | .settings-navigation { |
358 | width: 200px; | ||
359 | height: auto; | ||
360 | background: $theme-gray-lightest; | ||
361 | display: flex; | 405 | display: flex; |
406 | background: $theme-gray-lightest; | ||
362 | flex-direction: column; | 407 | flex-direction: column; |
408 | height: auto; | ||
409 | width: 200px; | ||
363 | 410 | ||
364 | .settings-navigation__link { | 411 | .settings-navigation__link { |
365 | display: flex; | ||
366 | align-items: center; | 412 | align-items: center; |
367 | height: 50px; | ||
368 | flex-shrink: 0; | ||
369 | text-decoration: none; | ||
370 | color: $theme-text-color; | 413 | color: $theme-text-color; |
414 | display: flex; | ||
415 | flex-shrink: 0; | ||
416 | height: 50px; | ||
371 | padding: 0 20px; | 417 | padding: 0 20px; |
418 | text-decoration: none; | ||
372 | transition: background $theme-transition-time, color $theme-transition-time; | 419 | transition: background $theme-transition-time, color $theme-transition-time; |
373 | 420 | ||
374 | &:hover { | 421 | &:hover { |
375 | background: darken($theme-gray-lightest, 5%); | 422 | background: darken($theme-gray-lightest, 5%); |
376 | 423 | ||
377 | .badge { | 424 | .badge { background: #FFF; } |
378 | background: #FFF; | ||
379 | } | ||
380 | } | 425 | } |
381 | 426 | ||
382 | &.is-active { | 427 | &.is-active { |
@@ -390,22 +435,20 @@ | |||
390 | } | 435 | } |
391 | } | 436 | } |
392 | 437 | ||
393 | .settings-navigation__expander { | 438 | .settings-navigation__expander { flex: 1; } |
394 | flex: 1; | ||
395 | } | ||
396 | 439 | ||
397 | .badge { | 440 | .badge { |
398 | transition: background $theme-transition-time, color $theme-transition-time; | ||
399 | display: initial; | 441 | display: initial; |
400 | margin-left: 5px; | 442 | margin-left: 5px; |
443 | transition: background $theme-transition-time, color $theme-transition-time; | ||
401 | } | 444 | } |
402 | 445 | ||
403 | .settings-navigation__action-badge { | 446 | .settings-navigation__action-badge { |
404 | display: inline-block; | ||
405 | width: 7px; | ||
406 | height: 7px; | ||
407 | background: $theme-brand-danger; | 447 | background: $theme-brand-danger; |
408 | border-radius: 100%; | 448 | border-radius: 100%; |
449 | display: inline-block; | ||
450 | height: 7px; | ||
409 | margin-left: 5px; | 451 | margin-left: 5px; |
452 | width: 7px; | ||
410 | } | 453 | } |
411 | } | 454 | } |
diff --git a/src/styles/status-bar-target-url.scss b/src/styles/status-bar-target-url.scss index bc7438be9..36f69df28 100644 --- a/src/styles/status-bar-target-url.scss +++ b/src/styles/status-bar-target-url.scss | |||
@@ -1,14 +1,14 @@ | |||
1 | @import './config.scss'; | 1 | @import './config.scss'; |
2 | 2 | ||
3 | .status-bar-target-url { | 3 | .status-bar-target-url { |
4 | height: auto; | ||
5 | background: $theme-gray-lighter; | 4 | background: $theme-gray-lighter; |
6 | padding: 4px; | 5 | border-top-left-radius: 5px; |
7 | position: absolute; | ||
8 | box-shadow: 0 0 8px rgba(black, 0.2); | ||
9 | font-size: 12px; | ||
10 | color: $theme-gray-dark; | ||
11 | bottom: 0; | 6 | bottom: 0; |
7 | box-shadow: 0 0 8px rgba(black, .2); | ||
8 | color: $theme-gray-dark; | ||
9 | font-size: 12px; | ||
10 | height: auto; | ||
12 | right: 0; | 11 | right: 0; |
13 | border-top-left-radius: 5px; | 12 | padding: 4px; |
13 | position: absolute; | ||
14 | } | 14 | } |
diff --git a/src/styles/subscription-popup.scss b/src/styles/subscription-popup.scss index b6f232fcb..fb4795d6c 100644 --- a/src/styles/subscription-popup.scss +++ b/src/styles/subscription-popup.scss | |||
@@ -1,20 +1,15 @@ | |||
1 | .subscription-popup { | 1 | .subscription-popup { |
2 | height: 100%; | 2 | height: 100%; |
3 | 3 | ||
4 | &__content { | 4 | &__content { height: calc(100% - 60px); } |
5 | height: calc(100% - 60px); | 5 | &__webview { height: 100%; } |
6 | } | ||
7 | |||
8 | &__webview { | ||
9 | height: 100%; | ||
10 | } | ||
11 | 6 | ||
12 | &__toolbar { | 7 | &__toolbar { |
13 | height: 60px; | ||
14 | background: $theme-gray-lightest; | 8 | background: $theme-gray-lightest; |
9 | border-top: 1px solid $theme-gray-lighter; | ||
15 | display: flex; | 10 | display: flex; |
11 | height: 60px; | ||
16 | justify-content: space-between; | 12 | justify-content: space-between; |
17 | padding: 10px; | 13 | padding: 10px; |
18 | border-top: 1px solid $theme-gray-lighter; | ||
19 | } | 14 | } |
20 | } | 15 | } |
diff --git a/src/styles/subscription.scss b/src/styles/subscription.scss index 8bfb68d23..70fb41cde 100644 --- a/src/styles/subscription.scss +++ b/src/styles/subscription.scss | |||
@@ -3,63 +3,47 @@ | |||
3 | margin: 10px 0; | 3 | margin: 10px 0; |
4 | 4 | ||
5 | li { | 5 | li { |
6 | height: 30px; | ||
7 | align-items: center; | 6 | align-items: center; |
8 | display: flex; | 7 | display: flex; |
8 | height: 30px; | ||
9 | 9 | ||
10 | &:before { | 10 | &:before { |
11 | content: "👍"; | 11 | content: "👍"; |
12 | margin-right: 10px; | 12 | margin-right: 10px; |
13 | } | 13 | } |
14 | 14 | ||
15 | .badge { | 15 | .badge { margin-left: 10px; } |
16 | margin-left: 10px; | ||
17 | } | ||
18 | } | 16 | } |
19 | } | 17 | } |
20 | 18 | ||
21 | .subscription__premium-info { | 19 | .subscription__premium-info { margin: 15px 0 25px; } |
22 | margin: 15px 0 25px; | ||
23 | } | ||
24 | } | 20 | } |
25 | 21 | ||
26 | .paymentTiers { | 22 | .paymentTiers .franz-form__radio-wrapper { |
27 | .franz-form__radio-wrapper { | 23 | flex-flow: wrap; |
28 | flex-flow: wrap; | ||
29 | 24 | ||
30 | .franz-form__radio { | 25 | .franz-form__radio { |
31 | width: 32%; | 26 | flex: initial; |
32 | flex: initial; | 27 | margin-right: 2%; |
33 | margin-right: 2%; | 28 | width: 32%; |
34 | 29 | ||
35 | &:nth-child(3) { | 30 | &:nth-child(3) { margin-right: 0; } |
36 | margin-right: 0; | ||
37 | } | ||
38 | 31 | ||
39 | &:nth-child(4) { | 32 | &:nth-child(4) { |
40 | margin-right: 0; | 33 | margin-right: 0; |
41 | margin-top: 2%; | 34 | margin-top: 2%; |
42 | width: 100%; | 35 | width: 100%; |
43 | } | ||
44 | } | 36 | } |
45 | } | 37 | } |
46 | } | 38 | } |
47 | 39 | ||
48 | .settings { | 40 | .settings .paymentTiers .franz-form__radio-wrapper .franz-form__radio { |
49 | .paymentTiers { | 41 | width: 49%; |
50 | .franz-form__radio-wrapper { | ||
51 | .franz-form__radio { | ||
52 | width: 49%; | ||
53 | 42 | ||
54 | &:nth-child(2) { | 43 | &:nth-child(2) { margin-right: 0; } |
55 | margin-right: 0; | ||
56 | } | ||
57 | 44 | ||
58 | &:nth-child(3) { | 45 | &:nth-child(3) { |
59 | margin-top: 2%; | 46 | margin-top: 2%; |
60 | width: 100%; | 47 | width: 100%; |
61 | } | ||
62 | } | ||
63 | } | ||
64 | } | 48 | } |
65 | } | 49 | } |
diff --git a/src/styles/tabs.scss b/src/styles/tabs.scss index ac48aabd6..cbd833f04 100644 --- a/src/styles/tabs.scss +++ b/src/styles/tabs.scss | |||
@@ -1,104 +1,88 @@ | |||
1 | @import './config.scss'; | 1 | @import './config.scss'; |
2 | 2 | ||
3 | .theme__dark .tab-item { | ||
4 | &.is-active { | ||
5 | background: $dark-theme-gray; | ||
6 | |||
7 | .tab-item__icon { margin-left: -4px; } | ||
8 | } | ||
9 | |||
10 | &.is-disabled .tab-item__icon { filter: grayscale(100%) opacity(.2); } | ||
11 | .tab-item__icon { width: 34px; } | ||
12 | } | ||
13 | |||
3 | .tabs { | 14 | .tabs { |
4 | display: flex; | 15 | display: flex; |
5 | // flex: 1; | ||
6 | flex-direction: column; | 16 | flex-direction: column; |
7 | flex-shrink: 1; | 17 | flex-shrink: 1; |
8 | // align-items: center; | ||
9 | // height: auto; | ||
10 | 18 | ||
11 | .placeholder { | 19 | .placeholder { |
12 | width: 100%; | ||
13 | height: 40px; | 20 | height: 40px; |
21 | width: 100%; | ||
14 | } | 22 | } |
15 | } | 23 | } |
16 | 24 | ||
17 | .tab-item { | 25 | .tab-item { |
18 | display: flex; | ||
19 | justify-content: center; | ||
20 | align-items: center; | 26 | align-items: center; |
21 | position: relative; | 27 | display: flex; |
22 | width: $theme-sidebar-width; | ||
23 | height: 65px; | 28 | height: 65px; |
29 | justify-content: center; | ||
24 | min-height: 50px; | 30 | min-height: 50px; |
31 | position: relative; | ||
25 | transition: background $theme-transition-time; | 32 | transition: background $theme-transition-time; |
33 | width: $theme-sidebar-width; | ||
26 | 34 | ||
27 | &.is-active { | 35 | &.is-active { |
28 | border-left: 4px solid $theme-brand-primary; | ||
29 | background: lighten($theme-brand-primary, 35%); | 36 | background: lighten($theme-brand-primary, 35%); |
37 | border-left: 4px solid $theme-brand-primary; | ||
30 | 38 | ||
31 | .tab-item__icon { | 39 | .tab-item__icon { margin-left: -4px; } |
32 | margin-left: -4px; | ||
33 | } | ||
34 | } | ||
35 | |||
36 | &.is-disabled { | ||
37 | .tab-item__icon { | ||
38 | filter: grayscale(100%) opacity(0.2); | ||
39 | } | ||
40 | } | ||
41 | |||
42 | &.has-custom-icon { | ||
43 | .tab-item__icon { | ||
44 | border-radius: $theme-border-radius; | ||
45 | // border: 1px solid $theme-gray-lighter; | ||
46 | // width: 32px; | ||
47 | } | ||
48 | } | 40 | } |
49 | 41 | ||
50 | &:active { | 42 | &.is-disabled .tab-item__icon { filter: grayscale(100%) opacity(0.2); } |
51 | .tab-item__icon { | 43 | &.has-custom-icon .tab-item__icon { border-radius: $theme-border-radius; } |
52 | opacity: 0.7; | 44 | &:active .tab-item__icon { opacity: .7; } |
53 | } | ||
54 | } | ||
55 | 45 | ||
56 | .tab-item__icon { | 46 | .tab-item__icon { |
57 | width: 30px; | ||
58 | height: auto; | 47 | height: auto; |
48 | width: 30px; | ||
59 | } | 49 | } |
60 | 50 | ||
61 | .tab-item__message-count { | 51 | .tab-item__message-count { |
62 | min-width: 17px; | 52 | align-items: center; |
63 | min-height: 17px; | ||
64 | background: $theme-brand-danger; | 53 | background: $theme-brand-danger; |
65 | color: #FFF; | ||
66 | border-radius: 20px; | 54 | border-radius: 20px; |
67 | padding: 0px 5px; | ||
68 | font-size: 11px; | ||
69 | position: absolute; | ||
70 | right: 8px; | ||
71 | bottom: 8px; | 55 | bottom: 8px; |
56 | color: #FFF; | ||
72 | display: flex; | 57 | display: flex; |
58 | font-size: 11px; | ||
73 | justify-content: center; | 59 | justify-content: center; |
74 | align-items: center; | 60 | min-height: 17px; |
61 | min-width: 17px; | ||
62 | padding: 0px 5px; | ||
63 | position: absolute; | ||
64 | right: 8px; | ||
75 | 65 | ||
76 | &.is-indirect { | 66 | &.is-indirect { padding-top: 0; } |
77 | padding-top: 0px; | ||
78 | } | ||
79 | } | 67 | } |
80 | 68 | ||
81 | .tab-item__info-badge { | 69 | .tab-item__info-badge { |
82 | width: 17px; | 70 | align-items: center; |
83 | height: 17px; | ||
84 | background: $theme-gray-light; | 71 | background: $theme-gray-light; |
85 | color: $theme-gray-lighter; | 72 | bottom: 8px; |
86 | border-radius: 20px; | 73 | border-radius: 20px; |
87 | padding: 0px 5px; | 74 | color: $theme-gray-lighter; |
75 | display: flex; | ||
88 | font-size: 11px; | 76 | font-size: 11px; |
77 | height: 17px; | ||
78 | justify-content: center; | ||
79 | padding: 0px 5px; | ||
89 | position: absolute; | 80 | position: absolute; |
90 | right: 8px; | 81 | right: 8px; |
91 | bottom: 8px; | 82 | width: 17px; |
92 | display: flex; | ||
93 | justify-content: center; | ||
94 | align-items: center; | ||
95 | 83 | ||
96 | &.is-indirect { | 84 | &.is-indirect { padding-top: 0; } |
97 | padding-top: 0px; | ||
98 | } | ||
99 | } | 85 | } |
100 | 86 | ||
101 | &.is-reordering { | 87 | &.is-reordering { z-index: 99999; } |
102 | z-index: 99999; | ||
103 | } | ||
104 | } | 88 | } |
diff --git a/src/styles/title-bar.scss b/src/styles/title-bar.scss index 5316f35b3..885eb94c4 100644 --- a/src/styles/title-bar.scss +++ b/src/styles/title-bar.scss | |||
@@ -1,49 +1,80 @@ | |||
1 | #electron-app-title-bar { | 1 | @import './config.scss'; |
2 | background: $theme-gray-lightest; | ||
3 | border-bottom: 0; | ||
4 | box-shadow: 0px 0 8px rgba(#000, 0.1); | ||
5 | |||
6 | span { | ||
7 | line-height: normal; | ||
8 | } | ||
9 | 2 | ||
10 | div { | 3 | .theme__dark #electron-app-title-bar { |
11 | height: auto; | 4 | background: $dark-theme-gray-darker; |
12 | } | ||
13 | 5 | ||
14 | .toolbar-dropdown { | 6 | .toolbar-dropdown { |
15 | &.open { | 7 | &.open > .toolbar-button > button { |
16 | box-shadow: 0px 0 8px rgba(#000, 0.1); | 8 | background: $dark-theme-gray-light; |
9 | color: $dark-theme-gray-lightest; | ||
17 | } | 10 | } |
18 | 11 | ||
19 | &:not(.open) { | 12 | &:not(.open) { |
20 | .menu-item .menu-label { | 13 | .menu-item .menu-label { opacity: 1; } |
21 | opacity: 1; | 14 | > .toolbar-button > button:hover { |
15 | background: $dark-theme-gray-darkest; | ||
22 | } | 16 | } |
17 | } | ||
18 | } | ||
23 | 19 | ||
24 | &>.toolbar-button > button:hover { | 20 | #app-menu-bar #foldout-container .foldout { |
25 | background: $theme-brand-primary; | 21 | color: $dark-theme-gray-lightest; |
22 | |||
23 | .menu-pane { | ||
24 | background: $dark-theme-gray-light; | ||
25 | |||
26 | .menu-item { | ||
27 | .accelerator { | ||
28 | color: lighten($dark-theme-gray-light, 20%); | ||
29 | } | ||
30 | } | ||
31 | |||
32 | hr { | ||
33 | border-color: $dark-theme-gray-lighter; | ||
26 | } | 34 | } |
27 | } | 35 | } |
28 | } | 36 | } |
29 | 37 | ||
38 | .list .ReactVirtualized__Grid { | ||
39 | background: $dark-theme-gray-light; | ||
40 | } | ||
41 | } | ||
42 | |||
43 | #electron-app-title-bar { | ||
44 | background: $theme-gray-lightest; | ||
45 | border-bottom: 0; | ||
46 | box-shadow: 0 0 8px rgba(black, .1); | ||
47 | |||
48 | span { line-height: normal; } | ||
49 | |||
50 | div { height: auto; } | ||
51 | |||
52 | .toolbar-dropdown { | ||
53 | &.open { box-shadow: 0 0 8px rgba(black, 0.1); } | ||
54 | |||
55 | &:not(.open) { | ||
56 | .menu-item .menu-label { opacity: 1; } | ||
57 | > .toolbar-button > button:hover { background: $theme-brand-primary; } | ||
58 | } | ||
59 | } | ||
60 | |||
30 | .list-item { | 61 | .list-item { |
31 | .menu-item { | 62 | .menu-item { |
32 | margin: 4px; | ||
33 | border-radius: $theme-border-radius-small; | 63 | border-radius: $theme-border-radius-small; |
64 | margin: 4px; | ||
34 | } | 65 | } |
35 | &.selected, &.selected:focus { | 66 | |
67 | &.selected, | ||
68 | &.selected:focus { | ||
36 | background: none; | 69 | background: none; |
37 | 70 | ||
38 | .menu-item { | 71 | .menu-item { background: $theme-brand-primary; } |
39 | background: $theme-brand-primary; | ||
40 | } | ||
41 | } | 72 | } |
42 | } | 73 | } |
43 | 74 | ||
44 | .menu-pane { | 75 | .menu-pane { |
45 | box-shadow: 0px 0 10px rgba(#000, 0.5); | ||
46 | border-bottom-left-radius: $theme-border-radius-small; | 76 | border-bottom-left-radius: $theme-border-radius-small; |
47 | border-bottom-right-radius: $theme-border-radius-small; | 77 | border-bottom-right-radius: $theme-border-radius-small; |
78 | box-shadow: 0 0 10px rgba(black, .5); | ||
48 | } | 79 | } |
49 | } | 80 | } |
diff --git a/src/styles/toggle.scss b/src/styles/toggle.scss index 5b47e6495..0ce0c3379 100644 --- a/src/styles/toggle.scss +++ b/src/styles/toggle.scss | |||
@@ -4,44 +4,46 @@ $toggle-size: 14px; | |||
4 | $toggle-width: 40px; | 4 | $toggle-width: 40px; |
5 | $toggle-button-size: 22px; | 5 | $toggle-button-size: 22px; |
6 | 6 | ||
7 | .franz-form { | 7 | .theme__dark .franz-form .franz-form__toggle-wrapper .franz-form__toggle { |
8 | .franz-form__toggle-wrapper { | 8 | background: $dark-theme-gray; |
9 | display: flex; | 9 | border-radius: $toggle-size / 2; |
10 | flex-direction: row; | ||
11 | 10 | ||
12 | .franz-form__label { | 11 | .franz-form__toggle-button { |
13 | margin-left: 20px; | 12 | background: $dark-theme-gray-lighter; |
13 | box-shadow: 0 1px 4px rgba($dark-theme-black, .3); | ||
14 | } | ||
15 | } | ||
16 | |||
17 | .franz-form .franz-form__toggle-wrapper { | ||
18 | display: flex; | ||
19 | flex-direction: row; | ||
20 | |||
21 | .franz-form__label { margin-left: 20px; } | ||
22 | |||
23 | .franz-form__toggle { | ||
24 | background: $theme-gray-lighter; | ||
25 | border-radius: $theme-border-radius; | ||
26 | height: $toggle-size; | ||
27 | position: relative; | ||
28 | width: $toggle-width; | ||
29 | |||
30 | .franz-form__toggle-button { | ||
31 | background: $theme-gray-light; | ||
32 | border-radius: 100%; | ||
33 | box-shadow: 0 1px 4px rgba(0, 0, 0, .3); | ||
34 | height: $toggle-size - 2; | ||
35 | left: 1px; | ||
36 | top: 1px; | ||
37 | position: absolute; | ||
38 | transition: all .5s; | ||
39 | width: $toggle-size - 2; | ||
14 | } | 40 | } |
15 | 41 | ||
16 | .franz-form__toggle { | 42 | &.is-active .franz-form__toggle-button { |
17 | width: $toggle-width; | 43 | background: $theme-brand-primary; |
18 | height: $toggle-size; | 44 | left: $toggle-width - $toggle-size - 3;; |
19 | position: relative; | ||
20 | background: $theme-gray-lighter; | ||
21 | border-radius: $theme-border-radius; | ||
22 | |||
23 | .franz-form__toggle-button { | ||
24 | position: absolute; | ||
25 | left: 0; | ||
26 | top: -($toggle-button-size - $toggle-size) / 2; | ||
27 | width: $toggle-button-size; | ||
28 | height: $toggle-button-size; | ||
29 | background: $theme-gray-light; | ||
30 | border-radius: 100%; | ||
31 | transition: all 0.5s; | ||
32 | box-shadow: 0 1px 4px rgba(0,0,0,0.3); | ||
33 | } | ||
34 | |||
35 | &.is-active { | ||
36 | .franz-form__toggle-button { | ||
37 | left: $toggle-width - $toggle-button-size; | ||
38 | background: $theme-brand-primary; | ||
39 | } | ||
40 | } | ||
41 | |||
42 | input { | ||
43 | display: none; | ||
44 | } | ||
45 | } | 45 | } |
46 | |||
47 | input { display: none; } | ||
46 | } | 48 | } |
47 | } | 49 | } |
diff --git a/src/styles/tooltip.scss b/src/styles/tooltip.scss index 1194e7fbb..5700e994c 100644 --- a/src/styles/tooltip.scss +++ b/src/styles/tooltip.scss | |||
@@ -1,4 +1,4 @@ | |||
1 | .__react_component_tooltip { | 1 | .__react_component_tooltip { |
2 | padding: 10px !important; | ||
3 | height: auto; | 2 | height: auto; |
3 | padding: 10px !important; | ||
4 | } | 4 | } |
diff --git a/src/styles/type-helper.scss b/src/styles/type-helper.scss new file mode 100644 index 000000000..b1da394b5 --- /dev/null +++ b/src/styles/type-helper.scss | |||
@@ -0,0 +1,100 @@ | |||
1 | @function str-split($string, $separator) { | ||
2 | // empty array/list | ||
3 | $split-arr: (); | ||
4 | // first index of separator in string | ||
5 | $index : str-index($string, $separator); | ||
6 | // loop through string | ||
7 | @while $index != null { | ||
8 | // get the substring from the first character to the separator | ||
9 | $item: str-slice($string, 1, $index - 1); | ||
10 | // push item to array | ||
11 | $split-arr: append($split-arr, $item); | ||
12 | // remove item and separator from string | ||
13 | $string: str-slice($string, $index + 1); | ||
14 | // find new index of separator | ||
15 | $index : str-index($string, $separator); | ||
16 | } | ||
17 | // add the remaining string to list (the last item) | ||
18 | $split-arr: append($split-arr, $string); | ||
19 | |||
20 | @return $split-arr; | ||
21 | } | ||
22 | |||
23 | // ---- | ||
24 | // Sass (v3.4.13) | ||
25 | // Compass (v1.0.3) | ||
26 | // ---- | ||
27 | |||
28 | /// String to number converter | ||
29 | /// @author Hugo Giraudel | ||
30 | /// @access private | ||
31 | |||
32 | |||
33 | /// Casts a string into a number | ||
34 | /// | ||
35 | /// @param {String | Number} $value - Value to be parsed | ||
36 | /// | ||
37 | /// @return {Number} | ||
38 | |||
39 | @function to-number($value) { | ||
40 | @if type-of($value) == 'number' { | ||
41 | @return $value; | ||
42 | } @else if type-of($value) != 'string' { | ||
43 | $_: log('Value for `to-number` should be a number or a string.'); | ||
44 | } | ||
45 | |||
46 | $result: 0; | ||
47 | $digits: 0; | ||
48 | $minus: str-slice($value, 1, 1) == '-'; | ||
49 | $numbers: ('0': 0, '1': 1, '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9); | ||
50 | |||
51 | @for $i from if($minus, 2, 1) through str-length($value) { | ||
52 | $character: str-slice($value, $i, $i); | ||
53 | |||
54 | @if not (index(map-keys($numbers), $character) or $character == '.') { | ||
55 | @return to-length(if($minus, -$result, $result), str-slice($value, $i)) | ||
56 | } | ||
57 | |||
58 | @if $character == '.' { | ||
59 | $digits: 1; | ||
60 | } @else if $digits == 0 { | ||
61 | $result: $result * 10 + map-get($numbers, $character); | ||
62 | } @else { | ||
63 | $digits: $digits * 10; | ||
64 | $result: $result + map-get($numbers, $character) / $digits; | ||
65 | } | ||
66 | } | ||
67 | |||
68 | @return if($minus, -$result, $result);; | ||
69 | } | ||
70 | |||
71 | |||
72 | /// Add `$unit` to `$value` | ||
73 | /// | ||
74 | /// @param {Number} $value - Value to add unit to | ||
75 | /// @param {String} $unit - String representation of the unit | ||
76 | /// | ||
77 | /// @return {Number} - `$value` expressed in `$unit` | ||
78 | @function to-length($value, $unit) { | ||
79 | $units: ('px': 1px, 'cm': 1cm, 'mm': 1mm, '%': 1%, 'ch': 1ch, 'pc': 1pc, 'in': 1in, 'em': 1em, 'rem': 1rem, 'pt': 1pt, 'ex': 1ex, 'vw': 1vw, 'vh': 1vh, 'vmin': 1vmin, 'vmax': 1vmax); | ||
80 | |||
81 | @if not index(map-keys($units), $unit) { | ||
82 | $_: log('Invalid unit `#{$unit}`.'); | ||
83 | } | ||
84 | |||
85 | @return $value * map-get($units, $unit); | ||
86 | } | ||
87 | |||
88 | |||
89 | |||
90 | /// converts injectes rgb strings to sass colors | ||
91 | @function convert-rgb-string-to-color($string) { | ||
92 | $values: str-split($string, ','); | ||
93 | $colorList: (); | ||
94 | @each $value in $values { | ||
95 | $colorList: append($colorList, to-number($value)); | ||
96 | } | ||
97 | |||
98 | $rgbaColor: rgb(nth($colorList, 1), nth($colorList, 2), nth($colorList, 3)); | ||
99 | @return $rgbaColor; | ||
100 | } \ No newline at end of file | ||
diff --git a/src/styles/type.scss b/src/styles/type.scss index cacbec482..135d32da0 100644 --- a/src/styles/type.scss +++ b/src/styles/type.scss | |||
@@ -1,6 +1,12 @@ | |||
1 | @import './config.scss'; | 1 | @import './config.scss'; |
2 | @import './mixins.scss'; | 2 | @import './mixins.scss'; |
3 | 3 | ||
4 | .theme__dark { | ||
5 | a { color: $dark-theme-gray-smoke; } | ||
6 | .label { color: $dark-theme-gray-lightest; } | ||
7 | .footnote { color: $dark-theme-gray-lightest; } | ||
8 | } | ||
9 | |||
4 | h1 { | 10 | h1 { |
5 | font-size: 30px; | 11 | font-size: 30px; |
6 | font-weight: 300; | 12 | font-weight: 300; |
@@ -15,38 +21,32 @@ h2 { | |||
15 | margin-bottom: 25px; | 21 | margin-bottom: 25px; |
16 | margin-top: 55px; | 22 | margin-top: 55px; |
17 | 23 | ||
18 | &:first-of-type { | 24 | &:first-of-type { margin-top: 0; } |
19 | margin-top: 0; | ||
20 | } | ||
21 | } | 25 | } |
22 | 26 | ||
23 | p { | 27 | p { |
24 | margin-bottom: 10px; | 28 | margin-bottom: 10px; |
25 | line-height: 1.7rem; | 29 | line-height: 1.7rem; |
26 | 30 | ||
27 | &:last-of-type { | 31 | &:last-of-type { margin-bottom: 0; } |
28 | margin-bottom: 0; | ||
29 | } | ||
30 | } | 32 | } |
31 | 33 | ||
32 | strong { | 34 | strong { font-weight: bold; } |
33 | font-weight: bold; | ||
34 | } | ||
35 | 35 | ||
36 | a { | 36 | a { |
37 | text-decoration: none; | ||
38 | color: $theme-text-color; | 37 | color: $theme-text-color; |
38 | text-decoration: none; | ||
39 | 39 | ||
40 | &.button { | 40 | &.button { |
41 | position: relative; | ||
42 | background: none; | 41 | background: none; |
43 | display: inline-block; | ||
44 | padding: 10px 20px; | ||
45 | border: 2px solid $theme-brand-primary; | 42 | border: 2px solid $theme-brand-primary; |
46 | color: $theme-brand-primary; | ||
47 | border-radius: 3px; | 43 | border-radius: 3px; |
48 | transition: background 0.5s, color 0.5s; | 44 | color: $theme-brand-primary; |
45 | display: inline-block; | ||
46 | padding: 10px 20px; | ||
47 | position: relative; | ||
49 | text-align: center; | 48 | text-align: center; |
49 | transition: background .5s, color .5s; | ||
50 | 50 | ||
51 | &:hover { | 51 | &:hover { |
52 | background: darken($theme-brand-primary, 5%); | 52 | background: darken($theme-brand-primary, 5%); |
@@ -54,25 +54,19 @@ a { | |||
54 | } | 54 | } |
55 | } | 55 | } |
56 | 56 | ||
57 | &.link { | 57 | &.link { color: $theme-brand-primary; } |
58 | color: $theme-brand-primary; | ||
59 | } | ||
60 | } | 58 | } |
61 | 59 | ||
62 | .error-message, .error-message:last-of-type { | 60 | .error-message, .error-message:last-of-type { |
63 | margin: 10px 0; | ||
64 | color: $theme-brand-danger; | 61 | color: $theme-brand-danger; |
62 | margin: 10px 0; | ||
65 | } | 63 | } |
66 | 64 | ||
67 | .center { | 65 | .center { text-align: center; } |
68 | text-align: center; | ||
69 | } | ||
70 | 66 | ||
71 | .label { | 67 | .label { @include formLabel(); } |
72 | @include formLabel(); | ||
73 | } | ||
74 | 68 | ||
75 | .footnote { | 69 | .footnote { |
76 | font-size: 12px; | ||
77 | color: $theme-gray-light; | 70 | color: $theme-gray-light; |
78 | } \ No newline at end of file | 71 | font-size: 12px; |
72 | } | ||
diff --git a/src/styles/util.scss b/src/styles/util.scss index 3faad8db3..cc93f79ab 100644 --- a/src/styles/util.scss +++ b/src/styles/util.scss | |||
@@ -1,16 +1,16 @@ | |||
1 | .scroll-container { | 1 | .scroll-container { |
2 | height: 100%; | ||
3 | flex: 1; | 2 | flex: 1; |
4 | overflow-y: scroll; | 3 | height: 100%; |
5 | overflow-x: hidden; | 4 | overflow-x: hidden; |
5 | overflow-y: scroll; | ||
6 | } | 6 | } |
7 | 7 | ||
8 | .loader { | 8 | .loader { |
9 | position: relative; | ||
10 | z-index: 9999; | ||
11 | display: block; | 9 | display: block; |
12 | width: 100%; | ||
13 | height: 40px; | 10 | height: 40px; |
11 | position: relative; | ||
12 | width: 100%; | ||
13 | z-index: 9999; | ||
14 | } | 14 | } |
15 | 15 | ||
16 | .align-middle { | 16 | .align-middle { |
diff --git a/src/styles/welcome.scss b/src/styles/welcome.scss index a12069ba4..b3d6515b1 100644 --- a/src/styles/welcome.scss +++ b/src/styles/welcome.scss | |||
@@ -1,92 +1,84 @@ | |||
1 | .auth { | 1 | .auth .welcome { |
2 | .welcome { | 2 | &__content { |
3 | 3 | align-items: center; | |
4 | &__content { | 4 | color: #FFF; |
5 | display: flex; | 5 | display: flex; |
6 | align-items: center; | 6 | justify-content: center; |
7 | justify-content: center; | 7 | } |
8 | color: #FFF; | ||
9 | } | ||
10 | |||
11 | &__logo { | ||
12 | width: 100px; | ||
13 | } | ||
14 | 8 | ||
15 | &__text { | 9 | &__logo { width: 100px; } |
16 | margin-left: 40px; | ||
17 | padding-left: 40px; | ||
18 | border-left: 1px solid #FFF; | ||
19 | 10 | ||
20 | h1 { | 11 | &__text { |
21 | font-size: 60px; | 12 | border-left: 1px solid #FFF; |
22 | letter-spacing: -0.4rem; | 13 | margin-left: 40px; |
23 | margin-bottom: 5px; | 14 | padding-left: 40px; |
24 | } | ||
25 | 15 | ||
26 | h2 { | 16 | h1 { |
27 | margin-left: 2px; | 17 | font-size: 60px; |
28 | margin-bottom: 0; | 18 | letter-spacing: -.4rem; |
29 | } | 19 | margin-bottom: 5px; |
30 | } | 20 | } |
31 | 21 | ||
32 | &__services { | 22 | h2 { |
33 | width: 100%; | 23 | margin-bottom: 0; |
34 | max-width: 800px; | 24 | margin-left: 2px; |
35 | height: 100%; | ||
36 | max-height: 600px; | ||
37 | margin-left: -450px; | ||
38 | } | 25 | } |
26 | } | ||
39 | 27 | ||
40 | &__buttons { | 28 | &__services { |
41 | display: block; | 29 | height: 100%; |
42 | margin-top: 100px; | 30 | margin-left: -450px; |
43 | text-align: center; | 31 | max-height: 600px; |
32 | max-width: 800px; | ||
33 | width: 100%; | ||
34 | } | ||
44 | 35 | ||
45 | .button:first-of-type { | 36 | &__buttons { |
46 | margin-right: 25px; | 37 | display: block; |
47 | } | 38 | margin-top: 100px; |
48 | } | 39 | text-align: center; |
49 | 40 | ||
50 | .button { | 41 | .button:first-of-type { margin-right: 25px; } |
51 | border-color: #FFF; | 42 | } |
52 | color: #FFF; | ||
53 | 43 | ||
54 | &:hover { | 44 | .button { |
55 | background: #FFF; | 45 | border-color: #FFF; |
56 | color: $theme-brand-primary; | 46 | color: #FFF; |
57 | } | ||
58 | 47 | ||
59 | &__inverted { | 48 | &:hover { |
60 | background: #FFF; | 49 | background: #FFF; |
61 | color: $theme-brand-primary; | 50 | color: $theme-brand-primary; |
62 | } | ||
63 | &__inverted:hover { | ||
64 | background: none; | ||
65 | color: #FFF; | ||
66 | } | ||
67 | } | 51 | } |
68 | 52 | ||
69 | &__featured-services { | 53 | &__inverted { |
70 | text-align: center; | ||
71 | width: 480px; | ||
72 | margin: 80px auto 0 auto; | ||
73 | display: flex; | ||
74 | align-items: center; | ||
75 | flex-wrap: wrap; | ||
76 | background: #FFF; | 54 | background: #FFF; |
77 | border-radius: 6px; | 55 | color: $theme-brand-primary; |
78 | padding: 20px 20px 5px; | ||
79 | } | 56 | } |
80 | 57 | ||
81 | &__featured-service { | 58 | &__inverted:hover { |
82 | width: 35px; | 59 | background: none; |
83 | height: 35px; | 60 | color: #FFF; |
84 | margin: 0 10px 15px; | ||
85 | transition: 0.5s filter, 0.5s opacity; | ||
86 | |||
87 | img { | ||
88 | width: 35px; | ||
89 | } | ||
90 | } | 61 | } |
91 | } | 62 | } |
63 | |||
64 | &__featured-services { | ||
65 | align-items: center; | ||
66 | background: #FFF; | ||
67 | border-radius: 6px; | ||
68 | display: flex; | ||
69 | flex-wrap: wrap; | ||
70 | margin: 80px auto 0 auto; | ||
71 | padding: 20px 20px 5px; | ||
72 | text-align: center; | ||
73 | width: 480px; | ||
74 | } | ||
75 | |||
76 | &__featured-service { | ||
77 | margin: 0 10px 15px; | ||
78 | height: 35px; | ||
79 | transition: .5s filter, .5s opacity; | ||
80 | width: 35px; | ||
81 | |||
82 | img { width: 35px; } | ||
83 | } | ||
92 | } | 84 | } |