aboutsummaryrefslogtreecommitdiffstats
path: root/src/styles
diff options
context:
space:
mode:
authorLibravatar Guille Cura <cura.gf@gmail.com>2018-07-05 02:37:43 -0300
committerLibravatar Guille Cura <cura.gf@gmail.com>2018-07-05 02:37:43 -0300
commit25c6cbd29aff90f694d72afe28ab56b0113fb16a (patch)
tree9907623b3a7b835e58b895d08b62c5339b8e0376 /src/styles
parent5.0.0 beta.18 (diff)
downloadferdium-app-25c6cbd29aff90f694d72afe28ab56b0113fb16a.tar.gz
ferdium-app-25c6cbd29aff90f694d72afe28ab56b0113fb16a.tar.zst
ferdium-app-25c6cbd29aff90f694d72afe28ab56b0113fb16a.zip
Update stylesheets and added darkMode variable and toggle.
Diffstat (limited to 'src/styles')
-rw-r--r--src/styles/animations.scss54
-rw-r--r--src/styles/auth.scss121
-rw-r--r--src/styles/badge.scss19
-rw-r--r--src/styles/button.scss96
-rw-r--r--src/styles/colors.scss47
-rw-r--r--src/styles/content-tabs.scss34
-rw-r--r--src/styles/image-upload.scss93
-rw-r--r--src/styles/info-bar.scss49
-rw-r--r--src/styles/infobox.scss34
-rw-r--r--src/styles/input.scss95
-rw-r--r--src/styles/invite.scss11
-rw-r--r--src/styles/layout.scss162
-rw-r--r--src/styles/mixins.scss2
-rw-r--r--src/styles/radio.scss35
-rw-r--r--src/styles/recipes.scss56
-rw-r--r--src/styles/reset.scss67
-rw-r--r--src/styles/searchInput.scss30
-rw-r--r--src/styles/select.scss30
-rw-r--r--src/styles/service-table.scss39
-rw-r--r--src/styles/services.scss60
-rw-r--r--src/styles/settings.scss351
-rw-r--r--src/styles/status-bar-target-url.scss14
-rw-r--r--src/styles/subscription-popup.scss13
-rw-r--r--src/styles/subscription.scss56
-rw-r--r--src/styles/tabs.scss99
-rw-r--r--src/styles/title-bar.scss35
-rw-r--r--src/styles/toggle.scss79
-rw-r--r--src/styles/tooltip.scss2
-rw-r--r--src/styles/type.scss48
-rw-r--r--src/styles/util.scss10
-rw-r--r--src/styles/welcome.scss138
31 files changed, 988 insertions, 991 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..34bfa1805 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-gray-lighter; }
20 }
21
22 .legal {
23 color: $dark-theme-gray-lighter;
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..913a273df 100644
--- a/src/styles/badge.scss
+++ b/src/styles/badge.scss
@@ -1,11 +1,24 @@
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 {
diff --git a/src/styles/button.scss b/src/styles/button.scss
index 8d2adbbcc..83ddf3e3e 100644
--- a/src/styles/button.scss
+++ b/src/styles/button.scss
@@ -1,71 +1,93 @@
1@import './config.scss'; 1@import './config.scss';
2 2
3
4.theme__dark .franz-form__button {
5 background: $theme-brand-primary;
6 color: $dark-theme-gray-smoke;
7
8 &:hover { background: darken($theme-brand-primary, 5%); }
9 &:active { background: lighten($theme-brand-primary, 5%); }
10
11 &.franz-form__button--secondary {
12 background: $dark-theme-gray-lighter;
13 color: $dark-theme-gray-smoke;
14
15 &:hover { background: darken($dark-theme-gray-lightest, 5%); }
16 &:active { background: lighten($dark-theme-gray-lightest, 5%); }
17 }
18
19 &.franz-form__button--danger {
20 background: $theme-brand-danger;
21
22 &:hover { background: darken($theme-brand-danger, 5%); }
23 &:active { background: lighten($theme-brand-danger, 5%); }
24 }
25
26 &.franz-form__button--warning {
27 background: $theme-brand-warning;
28
29 &:hover { background: darken($theme-brand-warning, 5%); }
30 &:active { background: lighten($theme-brand-warning, 5%); }
31 }
32
33 &.franz-form__button--inverted {
34 border: 2px solid $theme-brand-primary;
35 color: $theme-brand-primary;
36
37 &:hover {
38 background: darken($theme-brand-primary, 5%);
39 color: $dark-theme-gray-smoke;
40 }
41 }
42}
43
3.franz-form__button { 44.franz-form__button {
4 position: relative;
5 background: $theme-brand-primary; 45 background: $theme-brand-primary;
46 border-radius: 3px;
6 display: block; 47 display: block;
7 padding: 10px 20px;
8 color: #FFF; 48 color: #FFF;
9 border-radius: 3px; 49 padding: 10px 20px;
10 transition: background 0.5s; 50 position: relative;
51 transition: background .5s;
11 text-align: center; 52 text-align: center;
12 53
13 &:hover { 54 &:hover { background: darken($theme-brand-primary, 5%) }
14 background: darken($theme-brand-primary, 5%);
15 }
16 55
17 &:active { 56 &:active {
18 transition: none;
19 background: lighten($theme-brand-primary, 5%); 57 background: lighten($theme-brand-primary, 5%);
58 transition: none;
20 } 59 }
21 60
22 &:disabled { 61 &:disabled { opacity: .2; }
23 opacity: 0.2;
24 }
25 62
26 &.franz-form__button--secondary { 63 &.franz-form__button--secondary {
27 background: $theme-gray-lighter; 64 background: $theme-gray-lighter;
28 color: $theme-gray; 65 color: $theme-gray;
29 66
30 &:hover { 67 &:hover { background: darken($theme-gray-lighter, 5%); }
31 background: darken($theme-gray-lighter, 5%); 68 &:active { background: lighten($theme-gray-lighter, 5%); }
32 }
33
34 &:active {
35 background: lighten($theme-gray-lighter, 5%);
36 }
37 } 69 }
38 70
39 &.franz-form__button--danger { 71 &.franz-form__button--danger {
40 background: $theme-brand-danger; 72 background: $theme-brand-danger;
41 73
42 &:hover { 74 &:hover { background: darken($theme-brand-danger, 5%); }
43 background: darken($theme-brand-danger, 5%); 75 &:active { background: lighten($theme-brand-danger, 5%); }
44 }
45
46 &:active {
47 background: lighten($theme-brand-danger, 5%);
48 }
49 } 76 }
50 77
51 &.franz-form__button--warning { 78 &.franz-form__button--warning {
52 background: $theme-brand-warning; 79 background: $theme-brand-warning;
53 80
54 &:hover { 81 &:hover { background: darken($theme-brand-warning, 5%); }
55 background: darken($theme-brand-warning, 5%); 82 &:active { background: lighten($theme-brand-warning, 5%); }
56 }
57
58 &:active {
59 background: lighten($theme-brand-warning, 5%);
60 }
61 } 83 }
62 84
63 &.franz-form__button--inverted { 85 &.franz-form__button--inverted {
64 background: none; 86 background: none;
65 padding: 10px 20px;
66 border: 2px solid $theme-brand-primary; 87 border: 2px solid $theme-brand-primary;
67 color: $theme-brand-primary; 88 color: $theme-brand-primary;
68 transition: background 0.5s, color 0.5s; 89 padding: 10px 20px;
90 transition: background .5s, color .5s;
69 91
70 &:hover { 92 &:hover {
71 background: darken($theme-brand-primary, 5%); 93 background: darken($theme-brand-primary, 5%);
@@ -74,11 +96,11 @@
74 } 96 }
75 97
76 .loader { 98 .loader {
99 display: inline-block;
100 height: 12px;
101 margin-right: 5px;
77 position: relative; 102 position: relative;
78 width: 20px; 103 width: 20px;
79 height: 12px;
80 z-index: 9999; 104 z-index: 9999;
81 display: inline-block;
82 margin-right: 5px;
83 } 105 }
84} 106}
diff --git a/src/styles/colors.scss b/src/styles/colors.scss
index 5d8302c28..b669c6a88 100644
--- a/src/styles/colors.scss
+++ b/src/styles/colors.scss
@@ -1,22 +1,37 @@
1$theme-brand-primary: #3498db; 1$theme-brand-primary: #3498db;
2$theme-brand-success: #5cb85c; 2$theme-brand-success: #5cb85c;
3$theme-brand-info: #5bc0de; 3$theme-brand-info: #5bc0de;
4$theme-brand-warning: #FF9F00; 4$theme-brand-warning: #FF9F00;
5$theme-brand-danger: #d9534f; 5$theme-brand-danger: #d9534f;
6 6
7$theme-gray-dark: #373a3c; 7$theme-gray-dark: #373a3c;
8$theme-gray: #55595c; 8$theme-gray: #55595c;
9$theme-gray-light: #818a91; 9$theme-gray-light: #818a91;
10$theme-gray-lighter: #eceeef; 10$theme-gray-lighter: #eceeef;
11$theme-gray-lightest: #f7f7f9; 11$theme-gray-lightest: #f7f7f9;
12 12
13$theme-border-radius: 6px; 13$theme-border-radius: 6px;
14$theme-border-radius-small: 3px; 14$theme-border-radius-small: 3px;
15 15
16$theme-sidebar-width: 68px; 16$theme-sidebar-width: 68px;
17 17
18$theme-text-color: $theme-gray-dark; 18$theme-text-color: $theme-gray-dark;
19 19
20$theme-transition-time: 0.5s; 20$theme-transition-time: .5s;
21 21
22$theme-inset-shadow: inset 0 2px 5px rgba(0,0,0,0.03); 22$theme-inset-shadow: inset 0 2px 5px rgba(0, 0, 0, .03);
23
24// Dark Theme
25$dark-theme-black: #1A1A1A;
26
27$dark-theme-gray-darkest: #1E1E1E;
28$dark-theme-gray-darker: #2D2F31;
29$dark-theme-gray-dark: #383A3B;
30
31$dark-theme-gray: #47494B;
32
33$dark-theme-gray-light: #515355;
34$dark-theme-gray-lighter: #686A6C;
35$dark-theme-gray-lightest: #A0A2A3;
36
37$dark-theme-gray-smoke: #CED0D1;
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..e93884b36 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: absolute;
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..f3c713f13 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-gray-lightest; }
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-lighter;
14
15 &::placeholder { color: $dark-theme-gray-light; }
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..373b29e7d 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
3html { 3html { 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-lightest;
13 background: $dark-theme-gray;
14 }
15
16 .sidebar__button {
17 color: $dark-theme-gray-lightest;
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,
16figure, figcaption, footer, header, hgroup, 16figure, figcaption, footer, header, hgroup,
17menu, nav, output, ruby, section, summary, 17menu, nav, output, ruby, section, summary,
18time, mark, audio, video { 18time, 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
26article, aside, details, figcaption, figure, 26article, aside, details, figcaption, figure,
27footer, header, hgroup, menu, nav, section { 27footer, header, hgroup, menu, nav, section { display: block; }
28 display: block; 28
29} 29ol,
30body { 30ul { list-style: none; }
31 line-height: 1; 31
32} 32blockquote,
33ol, ul { 33q {
34 list-style: none;
35}
36blockquote, q {
37 quotes: none; 34 quotes: none;
35
36 &::before,
37 &::after {
38 content: '';
39 content: none;
40 }
38} 41}
39blockquote:before, blockquote:after, q:before, q:after { 42
40 content: '';
41 content: none;
42}
43table { 43table {
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 */
49button { 48button {
50 background: none; 49 background: none;
51 border: none; 50 border: none;
52 padding: 0; 51 padding: 0;
53}
54 52
55button:focus { 53 &:focus { outline: 0; }
56 outline: 0; 54 .theme__dark & { color: $dark-theme-gray-smoke; }
57} 55}
58 56
59html { 57html {
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
65body { 62body {
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; 85img { pointer-events: none; }
87} 86a { cursor: default; }
88
89img {
90 pointer-events: none;
91}
92
93a {
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..36ac963bb 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-light;
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..c9703ad01 100644
--- a/src/styles/settings.scss
+++ b/src/styles/settings.scss
@@ -1,130 +1,212 @@
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 { background: lighten($theme-brand-primary, 40%); }
72 .legal { color: $theme-gray-light; }
73 }
74
75 .settings-navigation {
76 background: $dark-theme-gray-darker;
77 border-right: 1px solid $dark-theme-gray-dark;
78
79 .settings-navigation__link {
80 color: $dark-theme-gray-lightest;
81
82 .badge {
83 background: $dark-theme-gray-lighter;
84 color: $dark-theme-gray-smoke;
85 }
86
87 &:hover {
88 background: darken($dark-theme-gray-darker, 5%);
89
90 .badge {
91 background: $dark-theme-gray-lighter;
92 color: $dark-theme-gray-smoke;
93 }
94 }
95
96 &.is-active {
97 background: $dark-theme-gray;
98 color: $dark-theme-gray-smoke;
99
100 .badge {
101 background: $dark-theme-gray-lighter;
102 color: $dark-theme-gray-smoke;
103 }
104 }
105 }
106
107 .settings-navigation__action-badge { background: $theme-brand-danger; }
11 } 108 }
12} 109}
13 110
14.settings-wrapper { 111.settings-wrapper {
15 background: rgba(black, 0.5); 112 align-items: center;
16 position: absolute; 113 background: rgba(black, .5);
17 width: 100%; 114 display: flex;
18 height: 100%; 115 height: 100%;
19 top: 0;
20 left: 0; 116 left: 0;
21 z-index: 9998;
22 display: flex;
23 justify-content: center; 117 justify-content: center;
24 align-items: center;
25 padding: 25px; 118 padding: 25px;
119 position: absolute;
120 top: 0;
121 width: 100%;
122 z-index: 9998;
26 123
27 .settings-wrapper__action { 124 .settings-wrapper__action {
28 position: absolute;
29 width: 100%;
30 height: 100%; 125 height: 100%;
31 top: 0;
32 left: 0; 126 left: 0;
127 position: absolute;
128 top: 0;
129 width: 100%;
33 } 130 }
34} 131}
35 132
36.settings { 133.settings {
37 position: relative; 134 background: #FFF;
135 border-radius: $theme-border-radius;
136 box-shadow: 0 20px 50px rgba(black, .5);
38 display: flex; 137 display: flex;
39 height: 100%; 138 height: 100%;
40 width: 100%; 139 max-height: 720px;
41 max-width: 900px; 140 max-width: 900px;
42 min-height: 400px; 141 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; 142 overflow: hidden;
49 // margin-top: -10%; 143 position: relative;
144 width: 100%;
145 z-index: 9999;
50 146
51 .settings__main { 147 .settings__main {
52 flex: 1;
53 display: flex; 148 display: flex;
149 flex: 1;
54 flex-direction: column; 150 flex-direction: column;
55 height: auto; 151 height: auto;
56 } 152 }
57 153
58 .settings__header { 154 .settings__header {
59 display: flex;
60 align-items: center; 155 align-items: center;
61 width: calc(100% - 60px); 156 background: $theme-gray-lighter;
157 display: flex;
62 height: 50px; 158 height: 50px;
63 padding: 0 40px; 159 padding: 0 40px;
64 background: $theme-gray-lighter; 160 width: calc(100% - 60px);
65 161
66 h1 { 162 h1 {
67 @extend %headline; 163 @extend %headline;
68 margin: 0; 164 margin: 0;
69 } 165 }
70 166
71 .settings__header-item { 167 .settings__header-item { @extend %headline; }
72 @extend %headline;
73 }
74 168
75 .separator { 169 .separator {
170 border-right: 1px solid darken($theme-gray-lighter, 10%);
76 height: 100%; 171 height: 100%;
77 margin: 0 15px; 172 margin: 0 15px;
78 border-right: 1px solid darken($theme-gray-lighter, 10%);
79 transform: skew(15deg) rotate(2deg); 173 transform: skew(15deg) rotate(2deg);
80 } 174 }
81 175
82 .mdi { 176 .mdi { color: $theme-gray-light; }
83 color: $theme-gray-light;
84 }
85 } 177 }
86 178
87 .settings__body { 179 .settings__body {
88 flex: 1; 180 flex: 1;
89 padding: 25px 15px 15px 25px;
90 margin: 15px; 181 margin: 15px;
91 overflow-y: scroll; 182 overflow-y: scroll;
183 padding: 25px 15px 15px 25px;
92 184
93 &::-webkit-scrollbar { 185 &::-webkit-scrollbar { width: 8px; }
94 width: 8px;
95 }
96 186
97 /* Track */ 187 /* Track */
98 &::-webkit-scrollbar-track { 188 &::-webkit-scrollbar-track {
99 -webkit-border-radius: 10px;
100 border-radius: 10px;
101 background: none; 189 background: none;
190 border-radius: 10px;
191 -webkit-border-radius: 10px;
102 } 192 }
103 193
104 /* Handle */ 194 /* Handle */
105 &::-webkit-scrollbar-thumb { 195 &::-webkit-scrollbar-thumb {
106 -webkit-border-radius: 10px;
107 border-radius: 10px;
108 background: $theme-gray-lighter; 196 background: $theme-gray-lighter;
197 border-radius: 10px;
198 -webkit-border-radius: 10px;
109 } 199 }
110 200
111 &::-webkit-scrollbar-thumb:window-inactive { 201 &::-webkit-scrollbar-thumb:window-inactive { background: none; }
112 background: none; 202 .service-flex-grid { display: flex; }
113 } 203 .service-name { flex: 1px; }
114
115 .service-flex-grid {
116 display: flex;
117 }
118
119 .service-name {
120 flex: 1px;
121 }
122 204
123 .service-icon { 205 .service-icon {
124 width: 140px;
125 float: right; 206 float: right;
126 margin-top: 30px;
127 margin-left: 40px; 207 margin-left: 40px;
208 margin-top: 30px;
209 width: 140px;
128 210
129 label { 211 label {
130 font-weight: bold; 212 font-weight: bold;
@@ -134,51 +216,45 @@
134 } 216 }
135 217
136 .settings__close { 218 .settings__close {
137 position: absolute;
138 right: 0;
139 background: $theme-gray-lighter; 219 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%); 220 border-left: 1px solid darken($theme-gray-lighter, 5%);
144 color: $theme-gray-light; 221 color: $theme-gray-light;
222 font-size: 20px;
223 height: 50px;
224 padding: 0 20px;
225 position: absolute;
226 right: 0;
145 transition: background $theme-transition-time; 227 transition: background $theme-transition-time;
146 228
147 &:hover { 229 &:hover { background: darken($theme-gray-lighter, 5%); }
148 background: darken($theme-gray-lighter, 5%);
149 }
150 } 230 }
151 231
152 .search-input { 232 .search-input { margin-bottom: 30px; }
153 margin-bottom: 30px;
154 }
155 233
156 &__options { 234 &__options {
157 margin-top: 20px;
158 flex: 1; 235 flex: 1;
236 margin-top: 20px;
159 } 237 }
160 238
161 &__settings-group { 239 &__settings-group {
162 margin-top: 10px; 240 margin-top: 10px;
163 241
164 h3 { 242 h3 {
243 color: $theme-gray-light;
165 font-weight: bold; 244 font-weight: bold;
245 letter-spacing: -.1px;
166 margin: 25px 0 15px; 246 margin: 25px 0 15px;
167 color: $theme-gray-light;
168 letter-spacing: -0.1px;
169 247
170 &:first-of-type { 248 &:first-of-type { margin-top: 0; }
171 margin-top: 0;
172 }
173 } 249 }
174 } 250 }
175 251
176 .settings__message { 252 .settings__message {
253 border-top: 1px solid $theme-gray-lighter;
254 color: $theme-gray-light;
177 display: flex; 255 display: flex;
178 margin-top: 40px; 256 margin-top: 40px;
179 padding-top: 15px; 257 padding-top: 15px;
180 border-top: 1px solid $theme-gray-lighter;
181 color: $theme-gray-light;
182 258
183 .mdi { 259 .mdi {
184 color: $theme-gray-light; 260 color: $theme-gray-light;
@@ -188,69 +264,53 @@
188 } 264 }
189 265
190 .settings__help { 266 .settings__help {
191 margin: -10px 0 20px 55px;;
192 font-size: 12px;
193 color: $theme-gray-light; 267 color: $theme-gray-light;
268 font-size: 12px;
269 margin: -10px 0 20px 55px;;
194 } 270 }
195 271
196 .settings__controls { 272 .settings__controls {
273 background: $theme-gray-lighter;
197 display: flex; 274 display: flex;
275 height: auto;
198 justify-content: space-between; 276 justify-content: space-between;
199 padding: 10px 20px; 277 padding: 10px 20px;
200 height: auto;
201 background: $theme-gray-lighter;
202 278
203 .franz-form__button { 279 .franz-form__button {
204 &[type='submit'] { 280 &[type='submit'] { margin-left: auto; }
205 margin-left: auto; 281 &.franz-form__button--secondary { background: $theme-gray-light; }
206 }
207
208 &.franz-form__button--secondary {
209 background: $theme-gray-light;
210 }
211 } 282 }
212 } 283 }
213 284
214 .settings__delete-button { 285 .settings__delete-button { right: 0; }
215 right: 0;
216 }
217 286
218 .settings__empty-state { 287 .settings__empty-state {
219 width: 100%; 288 align-items: center;
289 align-self: center;
220 height: auto; 290 height: auto;
221 min-height: 70%; 291 min-height: 70%;
222 text-align: center; 292 text-align: center;
223 align-self: center; 293 width: 100%;
224 // margin-top: -20px;
225 align-items: center;
226 294
227 a.button { 295 a.button { margin-top: 40px; }
228 margin-top: 40px;
229 }
230 } 296 }
231 297
232 .account { 298 .account {
233 height: auto; 299 height: auto;
234 // padding: 20px;
235 300
236 .account__box { 301 .account__box {
302 align-items: center;
237 background: $theme-gray-lightest; 303 background: $theme-gray-lightest;
238 border-radius: $theme-border-radius; 304 border-radius: $theme-border-radius;
239 padding: 20px;
240 margin-bottom: 40px; 305 margin-bottom: 40px;
241 align-items: center; 306 padding: 20px;
242
243 &.account__box--flex {
244 display: flex;
245 }
246 307
247 &.account__box--last { 308 &.account__box--flex { display: flex; }
248 margin-bottom: 0; 309 &.account__box--last { margin-bottom: 0; }
249 }
250 310
251 .auth__button { 311 .auth__button {
252 width: 100%;
253 margin-top: 10px; 312 margin-top: 10px;
313 width: 100%;
254 } 314 }
255 } 315 }
256 316
@@ -258,57 +318,40 @@
258 margin-right: 20px; 318 margin-right: 20px;
259 position: relative; 319 position: relative;
260 320
261 .emoji img { 321 .emoji img { width: 30px; }
262 width: 30px;
263 }
264 } 322 }
265 323
266 .account__avatar-premium { 324 .account__avatar-premium {
325 font-size: 26px;
267 position: absolute; 326 position: absolute;
268 top: 2px;
269 right: 2px; 327 right: 2px;
270 font-size: 26px; 328 top: 2px;
271 } 329 }
272 330
273 .account__info { 331 .account__info {
274 flex: 1; 332 flex: 1;
275 333
276 h2 { 334 h2 { margin-bottom: 5px; }
277 margin-bottom: 5px; 335 .badge { margin-top: 5px; }
278 }
279
280 .badge {
281 margin-top: 5px;
282 }
283 } 336 }
284 337
285 .account__subscription { 338 .account__subscription {
286 display: flex;
287 align-items: center; 339 align-items: center;
340 display: flex;
288 341
289 .badge { 342 .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 } 343 }
301 344
302 div { 345 .account__subscription-button { margin-left: auto; }
303 height: auto; 346 .franz-form__button { white-space: nowrap; }
304 } 347 div { height: auto; }
305 348
306 .invoices { 349 .invoices {
307 width: 100%; 350 width: 100%;
308 351
309 td { 352 td {
310 padding: 15px 0;
311 border-bottom: 1px solid $theme-gray-lighter; 353 border-bottom: 1px solid $theme-gray-lighter;
354 padding: 15px 0;
312 } 355 }
313 356
314 tr:last-of-type td { 357 tr:last-of-type td {
@@ -319,9 +362,7 @@
319 .invoices__action { 362 .invoices__action {
320 text-align: right; 363 text-align: right;
321 364
322 button { 365 button { color: $theme-brand-primary; }
323 color: $theme-brand-primary;
324 }
325 } 366 }
326 } 367 }
327 } 368 }
@@ -331,15 +372,13 @@
331 font-size: 40px; 372 font-size: 40px;
332 margin-bottom: 20px; 373 margin-bottom: 20px;
333 374
334 img { 375 img { width: 40px; }
335 width: 40px;
336 }
337 } 376 }
338 377
339 .premium-info { 378 .premium-info {
340 background: lighten($theme-brand-primary, 40%); 379 background: lighten($theme-brand-primary, 40%);
341 padding: 20px;
342 border-radius: $theme-border-radius; 380 border-radius: $theme-border-radius;
381 padding: 20px;
343 } 382 }
344 383
345 .content-tabs .premium-info { 384 .content-tabs .premium-info {
@@ -348,35 +387,33 @@
348 } 387 }
349 388
350 .legal { 389 .legal {
351 text-align: center;
352 margin-top: 20px;
353 color: $theme-gray-light; 390 color: $theme-gray-light;
391 margin-top: 20px;
392 text-align: center;
354 } 393 }
355} 394}
356 395
357.settings-navigation { 396.settings-navigation {
358 width: 200px;
359 height: auto;
360 background: $theme-gray-lightest;
361 display: flex; 397 display: flex;
398 background: $theme-gray-lightest;
362 flex-direction: column; 399 flex-direction: column;
400 height: auto;
401 width: 200px;
363 402
364 .settings-navigation__link { 403 .settings-navigation__link {
365 display: flex;
366 align-items: center; 404 align-items: center;
367 height: 50px;
368 flex-shrink: 0;
369 text-decoration: none;
370 color: $theme-text-color; 405 color: $theme-text-color;
406 display: flex;
407 flex-shrink: 0;
408 height: 50px;
371 padding: 0 20px; 409 padding: 0 20px;
410 text-decoration: none;
372 transition: background $theme-transition-time, color $theme-transition-time; 411 transition: background $theme-transition-time, color $theme-transition-time;
373 412
374 &:hover { 413 &:hover {
375 background: darken($theme-gray-lightest, 5%); 414 background: darken($theme-gray-lightest, 5%);
376 415
377 .badge { 416 .badge { background: #FFF; }
378 background: #FFF;
379 }
380 } 417 }
381 418
382 &.is-active { 419 &.is-active {
@@ -390,22 +427,20 @@
390 } 427 }
391 } 428 }
392 429
393 .settings-navigation__expander { 430 .settings-navigation__expander { flex: 1; }
394 flex: 1;
395 }
396 431
397 .badge { 432 .badge {
398 transition: background $theme-transition-time, color $theme-transition-time;
399 display: initial; 433 display: initial;
400 margin-left: 5px; 434 margin-left: 5px;
435 transition: background $theme-transition-time, color $theme-transition-time;
401 } 436 }
402 437
403 .settings-navigation__action-badge { 438 .settings-navigation__action-badge {
404 display: inline-block;
405 width: 7px;
406 height: 7px;
407 background: $theme-brand-danger; 439 background: $theme-brand-danger;
408 border-radius: 100%; 440 border-radius: 100%;
441 display: inline-block;
442 height: 7px;
409 margin-left: 5px; 443 margin-left: 5px;
444 width: 7px;
410 } 445 }
411} 446}
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..384495481 100644
--- a/src/styles/tabs.scss
+++ b/src/styles/tabs.scss
@@ -1,104 +1,89 @@
1@import './config.scss'; 1@import './config.scss';
2 2
3.theme__dark .tab-item {
4 &.is-active {
5 background: $dark-theme-gray;
6 border-left: 0;
7
8 .tab-item__icon { margin-left: -4px; }
9 }
10
11 &.is-disabled .tab-item__icon { filter: grayscale(100%) opacity(.2); }
12 .tab-item__icon { width: 34px; }
13}
14
3.tabs { 15.tabs {
4 display: flex; 16 display: flex;
5 // flex: 1;
6 flex-direction: column; 17 flex-direction: column;
7 flex-shrink: 1; 18 flex-shrink: 1;
8 // align-items: center;
9 // height: auto;
10 19
11 .placeholder { 20 .placeholder {
12 width: 100%;
13 height: 40px; 21 height: 40px;
22 width: 100%;
14 } 23 }
15} 24}
16 25
17.tab-item { 26.tab-item {
18 display: flex;
19 justify-content: center;
20 align-items: center; 27 align-items: center;
21 position: relative; 28 display: flex;
22 width: $theme-sidebar-width;
23 height: 65px; 29 height: 65px;
30 justify-content: center;
24 min-height: 50px; 31 min-height: 50px;
32 position: relative;
25 transition: background $theme-transition-time; 33 transition: background $theme-transition-time;
34 width: $theme-sidebar-width;
26 35
27 &.is-active { 36 &.is-active {
28 border-left: 4px solid $theme-brand-primary;
29 background: lighten($theme-brand-primary, 35%); 37 background: lighten($theme-brand-primary, 35%);
38 border-left: 4px solid $theme-brand-primary;
30 39
31 .tab-item__icon { 40 .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 } 41 }
49 42
50 &:active { 43 &.is-disabled .tab-item__icon { filter: grayscale(100%) opacity(0.2); }
51 .tab-item__icon { 44 &.has-custom-icon .tab-item__icon { border-radius: $theme-border-radius; }
52 opacity: 0.7; 45 &:active .tab-item__icon { opacity: .7; }
53 }
54 }
55 46
56 .tab-item__icon { 47 .tab-item__icon {
57 width: 30px;
58 height: auto; 48 height: auto;
49 width: 30px;
59 } 50 }
60 51
61 .tab-item__message-count { 52 .tab-item__message-count {
62 min-width: 17px; 53 align-items: center;
63 min-height: 17px;
64 background: $theme-brand-danger; 54 background: $theme-brand-danger;
65 color: #FFF;
66 border-radius: 20px; 55 border-radius: 20px;
67 padding: 0px 5px;
68 font-size: 11px;
69 position: absolute;
70 right: 8px;
71 bottom: 8px; 56 bottom: 8px;
57 color: #FFF;
72 display: flex; 58 display: flex;
59 font-size: 11px;
73 justify-content: center; 60 justify-content: center;
74 align-items: center; 61 min-height: 17px;
62 min-width: 17px;
63 padding: 0px 5px;
64 position: absolute;
65 right: 8px;
75 66
76 &.is-indirect { 67 &.is-indirect { padding-top: 0; }
77 padding-top: 0px;
78 }
79 } 68 }
80 69
81 .tab-item__info-badge { 70 .tab-item__info-badge {
82 width: 17px; 71 align-items: center;
83 height: 17px;
84 background: $theme-gray-light; 72 background: $theme-gray-light;
85 color: $theme-gray-lighter; 73 bottom: 8px;
86 border-radius: 20px; 74 border-radius: 20px;
87 padding: 0px 5px; 75 color: $theme-gray-lighter;
76 display: flex;
88 font-size: 11px; 77 font-size: 11px;
78 height: 17px;
79 justify-content: center;
80 padding: 0px 5px;
89 position: absolute; 81 position: absolute;
90 right: 8px; 82 right: 8px;
91 bottom: 8px; 83 width: 17px;
92 display: flex;
93 justify-content: center;
94 align-items: center;
95 84
96 &.is-indirect { 85 &.is-indirect { padding-top: 0; }
97 padding-top: 0px;
98 }
99 } 86 }
100 87
101 &.is-reordering { 88 &.is-reordering { z-index: 99999; }
102 z-index: 99999;
103 }
104} 89}
diff --git a/src/styles/title-bar.scss b/src/styles/title-bar.scss
index 5316f35b3..5c7b0bcdf 100644
--- a/src/styles/title-bar.scss
+++ b/src/styles/title-bar.scss
@@ -1,49 +1,38 @@
1#electron-app-title-bar { 1#electron-app-title-bar {
2 background: $theme-gray-lightest; 2 background: $theme-gray-lightest;
3 border-bottom: 0; 3 border-bottom: 0;
4 box-shadow: 0px 0 8px rgba(#000, 0.1); 4 box-shadow: 0 0 8px rgba(black, .1);
5 5
6 span { 6 span { line-height: normal; }
7 line-height: normal;
8 }
9 7
10 div { 8 div { height: auto; }
11 height: auto;
12 }
13 9
14 .toolbar-dropdown { 10 .toolbar-dropdown {
15 &.open { 11 &.open { box-shadow: 0 0 8px rgba(black, 0.1); }
16 box-shadow: 0px 0 8px rgba(#000, 0.1);
17 }
18 12
19 &:not(.open) { 13 &:not(.open) {
20 .menu-item .menu-label { 14 .menu-item .menu-label { opacity: 1; }
21 opacity: 1; 15 > .toolbar-button > button:hover { background: $theme-brand-primary; }
22 }
23
24 &>.toolbar-button > button:hover {
25 background: $theme-brand-primary;
26 }
27 } 16 }
28 } 17 }
29 18
30 .list-item { 19 .list-item {
31 .menu-item { 20 .menu-item {
32 margin: 4px;
33 border-radius: $theme-border-radius-small; 21 border-radius: $theme-border-radius-small;
22 margin: 4px;
34 } 23 }
35 &.selected, &.selected:focus { 24
25 &.selected,
26 &.selected:focus {
36 background: none; 27 background: none;
37 28
38 .menu-item { 29 .menu-item { background: $theme-brand-primary; }
39 background: $theme-brand-primary;
40 }
41 } 30 }
42 } 31 }
43 32
44 .menu-pane { 33 .menu-pane {
45 box-shadow: 0px 0 10px rgba(#000, 0.5);
46 border-bottom-left-radius: $theme-border-radius-small; 34 border-bottom-left-radius: $theme-border-radius-small;
47 border-bottom-right-radius: $theme-border-radius-small; 35 border-bottom-right-radius: $theme-border-radius-small;
36 box-shadow: 0 0 10px rgba(black, .5);
48 } 37 }
49} 38}
diff --git a/src/styles/toggle.scss b/src/styles/toggle.scss
index 5b47e6495..dc38e6c77 100644
--- a/src/styles/toggle.scss
+++ b/src/styles/toggle.scss
@@ -4,44 +4,53 @@ $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; 10 width: $toggle-width * .85;
11 11
12 .franz-form__label { 12 .franz-form__toggle-button {
13 margin-left: 20px; 13 background: $dark-theme-gray-lighter;
14 box-shadow: 0 1px 4px rgba($dark-theme-black, .3);
15 height: $toggle-size - 2;
16 left: 1px;
17 top: 1px;
18 width: $toggle-size - 2;
19 }
20
21 &.is-active .franz-form__toggle-button { left: $toggle-width * .85 - $toggle-size - 3; }
22}
23
24.franz-form .franz-form__toggle-wrapper {
25 display: flex;
26 flex-direction: row;
27
28 .franz-form__label { margin-left: 20px; }
29
30 .franz-form__toggle {
31 background: $theme-gray-lighter;
32 border-radius: $theme-border-radius;
33 height: $toggle-size;
34 position: relative;
35 width: $toggle-width;
36
37 .franz-form__toggle-button {
38 background: $theme-gray-light;
39 border-radius: 100%;
40 box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
41 height: $toggle-button-size;
42 left: 0;
43 position: absolute;
44 top: -($toggle-button-size - $toggle-size) / 2;
45 transition: all .5s;
46 width: $toggle-button-size;
14 } 47 }
15 48
16 .franz-form__toggle { 49 &.is-active .franz-form__toggle-button {
17 width: $toggle-width; 50 background: $theme-brand-primary;
18 height: $toggle-size; 51 left: $toggle-width - $toggle-button-size;
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 } 52 }
53
54 input { display: none; }
46 } 55 }
47} 56}
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.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
4h1 { 10h1 {
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
23p { 27p {
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
32strong { 34strong { font-weight: bold; }
33 font-weight: bold;
34}
35 35
36a { 36a {
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}
generated by cgit v1.2.3-54-g00ecf (git 2.45.2) at 2024-07-06 14:37:38 +0000