aboutsummaryrefslogtreecommitdiffstats
path: root/src/styles
diff options
context:
space:
mode:
authorLibravatar Stefan Malzner <stefan@adlk.io>2017-10-13 12:29:40 +0200
committerLibravatar Stefan Malzner <stefan@adlk.io>2017-10-13 12:29:40 +0200
commit58cda9cc7fb79ca9df6746de7f9662bc08dc156a (patch)
tree1211600c2a5d3b5f81c435c6896618111a611720 /src/styles
downloadferdium-app-58cda9cc7fb79ca9df6746de7f9662bc08dc156a.tar.gz
ferdium-app-58cda9cc7fb79ca9df6746de7f9662bc08dc156a.tar.zst
ferdium-app-58cda9cc7fb79ca9df6746de7f9662bc08dc156a.zip
initial commit
Diffstat (limited to 'src/styles')
-rw-r--r--src/styles/animations.scss90
-rw-r--r--src/styles/auth.scss144
-rw-r--r--src/styles/badge.scss15
-rw-r--r--src/styles/button.scss74
-rw-r--r--src/styles/colors.scss22
-rw-r--r--src/styles/config.scss1
-rw-r--r--src/styles/content-tabs.scss52
-rw-r--r--src/styles/fonts.scss44
-rw-r--r--src/styles/info-bar.scss79
-rw-r--r--src/styles/infobox.scss61
-rw-r--r--src/styles/input.scss99
-rw-r--r--src/styles/layout.scss141
-rw-r--r--src/styles/main.scss36
-rw-r--r--src/styles/mixins.scss9
-rw-r--r--src/styles/radio.scss34
-rw-r--r--src/styles/recipes.scss72
-rw-r--r--src/styles/reset.scss95
-rw-r--r--src/styles/searchInput.scss4
-rw-r--r--src/styles/select.scss19
-rw-r--r--src/styles/service-table.scss62
-rw-r--r--src/styles/services.scss60
-rw-r--r--src/styles/settings.scss392
-rw-r--r--src/styles/subscription-popup.scss20
-rw-r--r--src/styles/subscription.scss72
-rw-r--r--src/styles/tabs.scss72
-rw-r--r--src/styles/toggle.scss47
-rw-r--r--src/styles/tooltip.scss4
-rw-r--r--src/styles/type.scss73
-rw-r--r--src/styles/util.scss20
-rw-r--r--src/styles/welcome.scss75
30 files changed, 1988 insertions, 0 deletions
diff --git a/src/styles/animations.scss b/src/styles/animations.scss
new file mode 100644
index 000000000..1e49af207
--- /dev/null
+++ b/src/styles/animations.scss
@@ -0,0 +1,90 @@
1// FadeIn
2.fadeIn-appear {
3 opacity: 0.01;
4}
5
6.fadeIn-appear.fadeIn-appear-active {
7 opacity: 1;
8 transition: opacity 0.5s ease-out;
9}
10
11.fadeIn-enter {
12 opacity: 0.01;
13 transition: opacity 0.5s ease-out;
14}
15
16.fadeIn-leave {
17 opacity: 1;
18}
19
20.fadeIn-leave.fadeIn-leave-active {
21 opacity: 0.01;
22 transition: opacity 300ms ease-in;
23}
24
25// FadeIn Fast
26.fadeIn-fast-appear {
27 opacity: 0.01;
28}
29
30.fadeIn-fast-appear.fadeIn-fast-appear-active {
31 opacity: 1;
32 transition: opacity 0.25s ease-out;
33}
34
35.fadeIn-fast-enter {
36 opacity: 0.01;
37 transition: opacity 0.25s ease-out;
38}
39
40.fadeIn-fast-leave {
41 opacity: 1;
42}
43
44.fadeIn-fast-leave.fadeIn-fast-leave-active {
45 opacity: 0.01;
46 transition: opacity 0.25s ease-in;
47}
48
49// Slide down
50.slideDown-appear {
51 max-height: 0;
52 overflow-y: hidden;
53}
54
55.slideDown-appear.slideDown-appear-active {
56 max-height: 500px;
57 transition: max-height 0.5s ease-out;
58}
59
60.slideDown-enter {
61 max-height: 0;
62 transition: max-height 0.5s ease-out;
63}
64
65// Slide up
66.slideUp-appear {
67 transform: translateY(20px);
68 opacity: 0;
69}
70
71.slideUp-appear.slideUp-appear-active {
72 transform: translateY(0px);
73 opacity: 1;
74 transition: all 0.3s ease-out;
75}
76
77.slideUp-enter {
78 transform: translateY(20px);
79 opacity: 0;
80 transition: all 0.3s ease-out;
81}
82
83.slideUp-leave {
84 opacity: 1;
85}
86
87.slideUp-leave.slideUp-leave-active {
88 opacity: 0.01;
89 transition: opacity 300ms ease-in;
90}
diff --git a/src/styles/auth.scss b/src/styles/auth.scss
new file mode 100644
index 000000000..9ad71867c
--- /dev/null
+++ b/src/styles/auth.scss
@@ -0,0 +1,144 @@
1@import './config.scss';
2
3.auth {
4 display: flex;
5 justify-content: center;
6 background: $theme-brand-primary;
7
8 .auth__layout {
9 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
22 &>div {
23 display: flex;
24 justify-content: center;
25 align-items: center;
26
27 &>span {
28 position: absolute;
29 }
30 }
31 }
32
33 .auth__container {
34 position: relative;
35 width: 350px;
36 height: auto;
37 margin: 40px auto 0 auto;
38 background: #FFF;
39 // padding: 20px;
40 border-radius: $theme-border-radius;
41 box-shadow: 0 0 50px rgba(black, 0.2);
42
43 &.auth__container--signup {
44 width: 450px;
45 // margin-left: auto;
46 // margin-right: auto;
47 }
48 }
49
50 .auth__logo {
51 display: block;
52 width: 150px;
53 height: auto;
54 margin: -105px auto 20px auto;
55 border-radius: $theme-border-radius;
56
57 &.auth__logo--sm {
58 border: 4px solid #FFF;
59 box-shadow: 0 0 6px rgba(black, 0.5);
60 border-radius: 100%;
61 }
62 }
63
64 .auth__form {
65 padding: 20px;
66
67 h1 {
68 text-align: center;
69 }
70 }
71
72 .auth__button {
73 width: 100%;
74
75 &.auth__button--skip {
76 margin: 10px auto 0;
77 }
78 }
79
80 .auth__links {
81 padding: 20px;
82 background: $theme-gray-lighter;
83 border-bottom-left-radius: $theme-border-radius;
84 border-bottom-right-radius: $theme-border-radius;
85
86 a {
87 display: block;
88 text-align: center;
89 color: $theme-gray;
90 margin-bottom: 8px;
91
92 &:last-of-type {
93 margin-bottom: 0;
94 }
95 }
96 }
97
98 .auth__adlk {
99 position: absolute;
100 right: 25px;
101 bottom: 15px;
102
103 img {
104 width: 65px;
105 }
106 }
107
108 .auth__letter {
109 margin-bottom: 30px;
110 }
111
112 .scroll-container {
113 z-index: 10;
114 }
115
116 .info-bar {
117 position: absolute;
118 }
119
120 &__scroll-container {
121 overflow: scroll;
122 width: 100%;
123 max-height: 100vh;
124 padding: 80px 0;
125 }
126
127 .available-services {
128 margin-bottom: 15px;
129 }
130
131 .unavailable-services {
132 margin: 15px 0;
133
134 p {
135 text-transform: capitalize;
136 }
137 }
138
139 .legal {
140 text-align: center;
141 margin-top: 20px;
142 color: $theme-gray-light;
143 }
144}
diff --git a/src/styles/badge.scss b/src/styles/badge.scss
new file mode 100644
index 000000000..d7dfaf783
--- /dev/null
+++ b/src/styles/badge.scss
@@ -0,0 +1,15 @@
1@import './config.scss';
2
3.badge {
4 font-size: 14px;
5 display: inline-block;
6 padding: 5px 10px;
7 border-radius: $theme-border-radius;
8 background: $theme-gray-lighter;
9
10 &.badge--primary,
11 &.badge--premium {
12 background: $theme-brand-primary;
13 color: #FFF;
14 }
15}
diff --git a/src/styles/button.scss b/src/styles/button.scss
new file mode 100644
index 000000000..c2dd91293
--- /dev/null
+++ b/src/styles/button.scss
@@ -0,0 +1,74 @@
1@import './config.scss';
2
3.franz-form {
4 .franz-form__button {
5 position: relative;
6 background: $theme-brand-primary;
7 display: block;
8 padding: 10px 20px;
9 color: #FFF;
10 border-radius: 3px;
11 transition: background 0.5s;
12 text-align: center;
13
14 &:hover {
15 background: darken($theme-brand-primary, 5%);
16 }
17
18 &:active {
19 transition: none;
20 background: lighten($theme-brand-primary, 5%);
21 }
22
23 &:disabled {
24 opacity: 0.2;
25 }
26
27 &.franz-form__button--secondary {
28 background: $theme-gray-lighter;
29 color: $theme-gray;
30
31 &:hover {
32 background: darken($theme-gray-lighter, 5%);
33 }
34
35 &:active {
36 background: lighten($theme-gray-lighter, 5%);
37 }
38 }
39
40 &.franz-form__button--danger {
41 background: $theme-brand-danger;
42
43 &:hover {
44 background: darken($theme-brand-danger, 5%);
45 }
46
47 &:active {
48 background: lighten($theme-brand-danger, 5%);
49 }
50 }
51
52 &.franz-form__button--inverted {
53 background: none;
54 padding: 10px 20px;
55 border: 2px solid $theme-brand-primary;
56 color: $theme-brand-primary;
57 transition: background 0.5s, color 0.5s;
58
59 &:hover {
60 background: darken($theme-brand-primary, 5%);
61 color: #FFF;
62 }
63 }
64
65 .loader {
66 position: relative;
67 width: 20px;
68 height: 12px;
69 z-index: 9999;
70 display: inline-block;
71 margin-right: 5px;
72 }
73 }
74}
diff --git a/src/styles/colors.scss b/src/styles/colors.scss
new file mode 100644
index 000000000..5d8302c28
--- /dev/null
+++ b/src/styles/colors.scss
@@ -0,0 +1,22 @@
1$theme-brand-primary: #3498db;
2$theme-brand-success: #5cb85c;
3$theme-brand-info: #5bc0de;
4$theme-brand-warning: #FF9F00;
5$theme-brand-danger: #d9534f;
6
7$theme-gray-dark: #373a3c;
8$theme-gray: #55595c;
9$theme-gray-light: #818a91;
10$theme-gray-lighter: #eceeef;
11$theme-gray-lightest: #f7f7f9;
12
13$theme-border-radius: 6px;
14$theme-border-radius-small: 3px;
15
16$theme-sidebar-width: 68px;
17
18$theme-text-color: $theme-gray-dark;
19
20$theme-transition-time: 0.5s;
21
22$theme-inset-shadow: inset 0 2px 5px rgba(0,0,0,0.03);
diff --git a/src/styles/config.scss b/src/styles/config.scss
new file mode 100644
index 000000000..7aa2d674f
--- /dev/null
+++ b/src/styles/config.scss
@@ -0,0 +1 @@
@import './colors.scss';
diff --git a/src/styles/content-tabs.scss b/src/styles/content-tabs.scss
new file mode 100644
index 000000000..aa3c8594b
--- /dev/null
+++ b/src/styles/content-tabs.scss
@@ -0,0 +1,52 @@
1@import './config.scss';
2
3.content-tabs {
4 .content-tabs__tabs {
5 display: flex;
6 border-top-left-radius: $theme-border-radius-small;
7 border-top-right-radius: $theme-border-radius-small;
8 overflow: hidden;
9
10 .content-tabs__item {
11 padding: 10px;
12 flex: 1;
13 // border: 1px solid $theme-gray-lightest;
14 color: $theme-gray-dark;
15 background: $theme-gray-lightest;
16 border-bottom: 1px solid $theme-gray-lighter;
17 box-shadow: inset 0px -3px 10px rgba(black, 0.05);
18 transition: all $theme-transition-time;
19
20 &.is-active {
21 background: $theme-brand-primary;
22 color: #FFF;
23 border-bottom: 1px solid $theme-brand-primary;
24 box-shadow: none;
25 }
26 }
27 }
28
29 .content-tabs__content {
30 padding: 20px 20px;
31 border-bottom-left-radius: $theme-border-radius-small;
32 border-bottom-right-radius: $theme-border-radius-small;
33 background: $theme-gray-lightest;
34
35 .content-tabs__item {
36 top: 0;
37 display: none;
38
39 &.is-active {
40 display: block;
41 }
42 }
43
44 .franz-form__input-wrapper {
45 background: #FFF;
46 }
47
48 .franz-form__field:last-of-type {
49 margin-bottom: 0;
50 }
51 }
52}
diff --git a/src/styles/fonts.scss b/src/styles/fonts.scss
new file mode 100644
index 000000000..bd96ea867
--- /dev/null
+++ b/src/styles/fonts.scss
@@ -0,0 +1,44 @@
1@import './config.scss';
2// @import './node_modules/mdi/scss/materialdesignicons.scss';
3
4@font-face {
5 font-family: 'Open Sans';
6 src: url('../assets/fonts/OpenSans-Light.ttf');
7 font-weight: 300;
8 font-style: normal;
9}
10
11@font-face {
12 font-family: 'Open Sans';
13 src: url('../assets/fonts/OpenSans-Regular.ttf');
14 font-weight: normal;
15 font-style: normal;
16}
17
18@font-face {
19 font-family: 'Open Sans';
20 src: url('../assets/fonts/OpenSans-Bold.ttf');
21 font-weight: bold;
22 font-style: normal;
23}
24
25@font-face {
26 font-family: 'Open Sans';
27 src: url('../assets/fonts/OpenSans-BoldItalic.ttf');
28 font-weight: bold;
29 font-style: italic;
30}
31
32@font-face {
33 font-family: 'Open Sans';
34 src: url('../assets/fonts/OpenSans-ExtraBold.ttf');
35 font-weight: 800;
36 font-style: normal;
37}
38
39@font-face {
40 font-family: 'Open Sans';
41 src: url('../assets/fonts/OpenSans-ExtraBoldItalic.ttf');
42 font-weight: 800;
43 font-style: italic;
44}
diff --git a/src/styles/info-bar.scss b/src/styles/info-bar.scss
new file mode 100644
index 000000000..c30c951ee
--- /dev/null
+++ b/src/styles/info-bar.scss
@@ -0,0 +1,79 @@
1@import './config.scss';
2
3.info-bar {
4 width: 100%;
5 height: 50px;
6 background: $theme-brand-primary;
7 display: flex;
8 align-items: center;
9 justify-content: center;
10 padding: 0 20px;
11 position: relative;
12 // bottom: 0;
13 z-index: 100;
14 box-shadow: 0 0 8px rgba(black, 0.2);
15
16 .info-bar__content {
17 height: auto;
18
19 .mdi {
20 margin-right: 5px;
21 }
22 }
23
24 .info-bar__close {
25 position: absolute;
26 right: 10px;
27 color: #FFF;
28 }
29
30 .info-bar__cta {
31 color: #FFF;
32 padding: 3px 8px;
33 border-radius: $theme-border-radius-small;
34 border-color: #FFF;
35 border-width: 2px;
36 border-style: solid;
37 margin-left: 15px;
38
39 .loader {
40 position: relative;
41 width: 20px;
42 height: 12px;
43 z-index: 9999;
44 display: inline-block;
45 margin-right: 5px;
46 }
47 }
48
49 &.info-bar--bottom {
50 order: 10;
51 }
52
53 &.info-bar--primary {
54 background: $theme-brand-primary;
55 color: #FFF;
56
57 a {
58 color: #FFF;
59 }
60 }
61
62 &.info-bar--warning {
63 background: $theme-brand-warning;
64 color: #FFF;
65
66 a {
67 color: #FFF;
68 }
69 }
70
71 &.info-bar--danger {
72 background: $theme-brand-danger;
73 color: #FFF;
74
75 a {
76 color: #FFF;
77 }
78 }
79}
diff --git a/src/styles/infobox.scss b/src/styles/infobox.scss
new file mode 100644
index 000000000..ad363314d
--- /dev/null
+++ b/src/styles/infobox.scss
@@ -0,0 +1,61 @@
1@import './config.scss';
2
3.infobox {
4 height: auto;
5 padding: 15px 20px;
6 margin-bottom: 30px;
7 border-radius: $theme-border-radius-small;
8 display: flex;
9 align-items: center;
10
11 a {
12 color: #FFF;
13 }
14
15 .infobox__content {
16 flex: 1;
17 }
18
19 &.infobox--success {
20 background: $theme-brand-success;
21 color: #FFF;
22 }
23
24 &.infobox--primary {
25 background: $theme-brand-primary;
26 color: #FFF;
27 }
28
29 &.infobox--danger {
30 background: $theme-brand-danger;
31 color: #FFF;
32 }
33
34 .mdi {
35 margin-right: 10px;
36 }
37
38 .infobox__cta {
39 color: #FFF;
40 padding: 3px 8px;
41 border-radius: $theme-border-radius-small;
42 border-color: #FFF;
43 border-width: 2px;
44 border-style: solid;
45 margin-left: 15px;
46
47 .loader {
48 position: relative;
49 width: 20px;
50 height: 12px;
51 z-index: 9999;
52 display: inline-block;
53 margin-right: 5px;
54 }
55 }
56
57 .infobox__delete {
58 color: #FFF;
59 margin-right: 0;
60 }
61}
diff --git a/src/styles/input.scss b/src/styles/input.scss
new file mode 100644
index 000000000..814dce5f8
--- /dev/null
+++ b/src/styles/input.scss
@@ -0,0 +1,99 @@
1@import './config.scss';
2@import './mixins.scss';
3
4.franz-form {
5 .franz-form__field {
6 display: flex;
7 flex: 1;
8 flex-direction: column;
9 margin-bottom: 20px;
10
11 &.has-error {
12 .franz-form__input-wrapper {
13 border-color: $theme-brand-danger;
14 }
15
16 .franz-form__input-modifier {
17 border-color: $theme-brand-danger;
18 }
19 }
20 }
21
22 .franz-form__label {
23 @include formLabel();
24 }
25
26 .franz-form__error {
27 color: $theme-brand-danger;
28 margin-top: 10px;
29 order: 2;
30 }
31
32 .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;
38 border: 1px solid $theme-gray-lighter;
39 flex-wrap: wrap;
40 }
41
42 .franz-form__input {
43 flex: 1;
44 border: 0;
45 background: none;
46 width: 100%;
47 padding: 8px;
48 // font-size: 18px;
49 color: $theme-gray;
50 }
51
52 .franz-form__input-prefix,
53 .franz-form__input-suffix {
54 padding: 0 10px;
55 background: $theme-gray-lighter;
56 color: $theme-gray-light;
57 line-height: 35px;
58 }
59
60 .franz-form__input-modifier {
61 padding: 0 20px;
62 border-left: 1px solid $theme-gray-lighter;
63 color: $theme-gray-light;
64 font-size: 20px;
65 }
66
67 .franz-form__password-score {
68 background: $theme-gray-lighter;
69 height: 5px;
70 flex-basis: 100%;
71 border-bottom-left-radius: 3px;
72 border-bottom-right-radius: 3px;
73
74 meter {
75 width: 100%;
76 height: 100%;
77 display: block;
78 border-bottom-left-radius: 3px;
79 border-bottom-right-radius: 3px;
80 overflow: hidden;
81
82 &::-webkit-meter-bar {
83 background: none;
84 }
85
86 &::-webkit-meter-even-less-good-value {
87 background: $theme-brand-danger;
88 }
89
90 &::-webkit-meter-suboptimum-value {
91 background: $theme-brand-warning;
92 }
93
94 &::-webkit-meter-optimum-value {
95 background: $theme-brand-success;
96 }
97 }
98 }
99}
diff --git a/src/styles/layout.scss b/src/styles/layout.scss
new file mode 100644
index 000000000..d87df2684
--- /dev/null
+++ b/src/styles/layout.scss
@@ -0,0 +1,141 @@
1@import './config.scss';
2
3html {
4 overflow: hidden;
5}
6
7.app {
8 display: flex;
9 flex-direction: row;
10
11 .app__service {
12 display: flex;
13 flex: 1;
14 flex-direction: column;
15 }
16}
17
18.window-draggable {
19 position: absolute;
20 width: 100%;
21 top: 0px;
22 left: 0px;
23 height: 35px;
24 pointer-events: none;
25 -webkit-app-region: drag;
26 z-index: 9999;
27}
28
29.darwin {
30 .sidebar {
31 padding-top: 23px;
32 }
33}
34
35.sidebar {
36 display: flex;
37 flex-direction: column;
38 align-items: center;
39 width: $theme-sidebar-width;
40 background: $theme-gray-lightest;
41 box-shadow: 1px 0 10px rgba(0,0,0,0.08);
42 z-index: 200;
43 text-align: center;
44 color: $theme-text-color;
45
46 .sidebar__add-service {
47 width: 32px;
48 height: 32px;
49 background: $theme-gray-lighter;
50 border-radius: $theme-border-radius-small;
51 margin: 10px auto;
52 color: $theme-gray-light;
53 }
54
55 .sidebar__settings-button {
56 height: auto;
57 padding: 20px 0;
58 font-size: 12px;
59 position: relative;
60
61 .emoji {
62 position: absolute;
63 top: 18px;
64 right: 12px;
65
66 img {
67 width: 18px;
68 }
69 }
70 }
71
72 .sidebar__logo {
73 width: 40px;
74 height: auto;
75 }
76
77 & > div {
78 display: flex;
79 overflow-y: scroll;
80
81 &::-webkit-scrollbar {
82 display: none;
83 }
84 }
85}
86
87.grid {
88 .grid__row {
89 display: flex;
90 flex-direction: row;
91
92 &>* {
93 margin-right: 20px;
94 }
95
96 & :last-child {
97 margin-right: 0;
98 }
99 }
100}
101
102.app-loader {
103 display: flex;
104 justify-content: center;
105 align-items: center;
106
107 .app-loader__title {
108 color: #FFF;
109 font-size: 40px;
110 }
111
112 &>span {
113 height: auto;
114 }
115}
116
117.dev-warning {
118 display: none;
119}
120
121.isDevMode {
122 .dev-warning {
123 display: block;
124 position: fixed;
125 background: $theme-brand-warning;
126 width: auto;
127 height: auto;
128 top: 5px;
129 right: 5px;
130 padding: 4px;
131 font-size: 10px;
132 color: #FFF;
133 z-index: 999999999;
134 border-radius: 3px;
135 transition: opacity 0.5s ease;
136
137 &:hover {
138 opacity: 0;
139 }
140 }
141}
diff --git a/src/styles/main.scss b/src/styles/main.scss
new file mode 100644
index 000000000..8afc86f98
--- /dev/null
+++ b/src/styles/main.scss
@@ -0,0 +1,36 @@
1$mdi-font-path: '../node_modules/mdi/fonts';
2@if $env == development {
3 $mdi-font-path: '../../node_modules/mdi/fonts';
4}
5
6@import './node_modules/mdi/scss/materialdesignicons.scss';
7
8// modules
9@import './reset.scss';
10@import './util.scss';
11@import './layout.scss';
12@import './tabs.scss';
13@import './services.scss';
14@import './settings.scss';
15@import './service-table.scss';
16@import './recipes.scss';
17@import './fonts.scss';
18@import './type.scss';
19@import './welcome.scss';
20@import './auth.scss';
21@import './tooltip.scss';
22@import './info-bar.scss';
23@import './animations.scss';
24@import './infobox.scss';
25@import './badge.scss';
26@import './subscription.scss';
27@import './subscription-popup.scss';
28@import './content-tabs.scss';
29
30// form
31@import './input.scss';
32@import './radio.scss';
33@import './toggle.scss';
34@import './button.scss';
35@import './searchInput.scss';
36@import './select.scss';
diff --git a/src/styles/mixins.scss b/src/styles/mixins.scss
new file mode 100644
index 000000000..c9b1bc988
--- /dev/null
+++ b/src/styles/mixins.scss
@@ -0,0 +1,9 @@
1@import './config.scss';
2
3@mixin formLabel {
4 width: 100%;
5 color: $theme-gray-light;
6 display: block;
7 margin-bottom: 5px;
8 order: 0;
9}
diff --git a/src/styles/radio.scss b/src/styles/radio.scss
new file mode 100644
index 000000000..644478cd6
--- /dev/null
+++ b/src/styles/radio.scss
@@ -0,0 +1,34 @@
1@import './config.scss';
2
3.franz-form {
4 .franz-form__radio-wrapper {
5 display: flex;
6 }
7
8 .franz-form__radio {
9 // background: $theme-gray-lightest;
10 border: 2px solid $theme-gray-lighter;
11 color: $theme-gray;
12 padding: 11px;
13 margin-right: 20px;
14 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;
19
20 &:last-of-type {
21 margin-right: 0;
22 }
23
24 &.is-selected {
25 border: 2px solid $theme-brand-primary;
26 background: #FFF;
27 color: $theme-brand-primary;
28 }
29
30 input {
31 display: none;
32 }
33 }
34}
diff --git a/src/styles/recipes.scss b/src/styles/recipes.scss
new file mode 100644
index 000000000..017aa4fe2
--- /dev/null
+++ b/src/styles/recipes.scss
@@ -0,0 +1,72 @@
1@import './config.scss';
2
3.recipes {
4 .recipes__list {
5 display: flex;
6 flex-flow: row wrap;
7 align-content: flex-start;
8 min-height: 70%;
9 height: auto;
10
11 &.recipes__list--disabled {
12 opacity: 0.3;
13 filter: grayscale(100%);
14 pointer-events: none;
15 }
16 }
17
18 .recipes__navigation {
19 height: auto;
20 margin-bottom: 35px;
21
22 .badge {
23 margin-right: 10px;
24 }
25
26 &.recipes__navigation--disabled {
27 opacity: 0.3;
28 filter: grayscale(100%);
29 pointer-events: none;
30 }
31 }
32}
33
34.recipe-teaser {
35 position: relative;
36 width: calc(25% - 20px);
37 height: 120px;
38 margin: 0 20px 20px 0;
39 border-radius: $theme-border-radius;
40 background-color: $theme-gray-lightest;
41 transition: background $theme-transition-time;
42 overflow: hidden;
43
44 &:hover {
45 background-color: $theme-gray-lighter;
46 }
47
48 .recipe-teaser__icon {
49 width: 50px;
50 margin-bottom: 10px;
51 }
52
53 .recipe-teaser__label {
54 display: block;
55 }
56
57 h2 {
58 z-index: 10;
59 }
60
61 &__dev-badge {
62 position: absolute;
63 top: 5px;
64 right: -13px;
65 width: 50px;
66 background: $theme-brand-warning;
67 color: #FFF;
68 font-size: 10px;
69 transform: rotateZ(45deg);
70 box-shadow: 0 0 4px rgba(black, 0.2);
71 }
72}
diff --git a/src/styles/reset.scss b/src/styles/reset.scss
new file mode 100644
index 000000000..21763f44f
--- /dev/null
+++ b/src/styles/reset.scss
@@ -0,0 +1,95 @@
1@import './config.scss';
2
3/* ============ RESET =========== */
4/* http://meyerweb.com/eric/tools/css/reset */
5
6html, body, div, span, applet, object, iframe,
7h1, h2, h3, h4, h5, h6, p, blockquote, pre,
8a, abbr, acronym, address, big, cite, code,
9del, dfn, em, img, ins, kbd, q, s, samp,
10small, strike, strong, sub, sup, tt, var,
11b, u, i, center,
12dl, dt, dd, ol, ul, li,
13fieldset, form, label, legend,
14table, caption, tbody, tfoot, thead, tr, th, td,
15article, aside, canvas, details, embed,
16figure, figcaption, footer, header, hgroup,
17menu, nav, output, ruby, section, summary,
18time, mark, audio, video {
19 margin: 0;
20 padding: 0;
21 border: 0;
22 font-size: 100%;
23 font: inherit;
24}
25/* HTML5 display-role reset for older browsers */
26article, aside, details, figcaption, figure,
27footer, header, hgroup, menu, nav, section {
28 display: block;
29}
30body {
31 line-height: 1;
32}
33ol, ul {
34 list-style: none;
35}
36blockquote, q {
37 quotes: none;
38}
39blockquote:before, blockquote:after, q:before, q:after {
40 content: '';
41 content: none;
42}
43table {
44 border-collapse: collapse;
45 border-spacing: 0;
46}
47
48/* Buttons should not have any special style applied by default */
49button {
50 background: none;
51 border: none;
52 padding: 0;
53}
54
55button:focus {
56 outline: 0;
57}
58
59html {
60 /* base for rem / 1rem = 10px */
61 font-size: 62.5%;
62 font-family: 'Open Sans';
63}
64
65body {
66 /* default font size = 14px */
67 font-size: 1.4rem;
68 color: $theme-gray-dark;
69}
70
71* {
72 -webkit-font-smoothing: antialiased;
73 box-sizing: border-box;
74 font-size: 1.4rem;
75 font-family: 'Open Sans';
76 -webkit-user-select: none;
77}
78
79html, body, div {
80 height: 100%;
81 background: none;
82 box-sizing: border-box;
83}
84
85*:focus {
86 outline: none;
87}
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
new file mode 100644
index 000000000..28ff09fc4
--- /dev/null
+++ b/src/styles/searchInput.scss
@@ -0,0 +1,4 @@
1.search-input {
2 width: 100%;
3 height: auto;
4}
diff --git a/src/styles/select.scss b/src/styles/select.scss
new file mode 100644
index 000000000..965b4321a
--- /dev/null
+++ b/src/styles/select.scss
@@ -0,0 +1,19 @@
1@import './config.scss';
2@import './mixins.scss';
3
4$toggle: "PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICBpZD0ic3ZnMiIKICAgdmlld0JveD0iMCAwIDM1Ljk3MDk4MyAyMy4wOTE1MTgiCiAgIGhlaWdodD0iNi41MTY5Mzk2bW0iCiAgIHdpZHRoPSIxMC4xNTE4MTFtbSI+CiAgPGRlZnMKICAgICBpZD0iZGVmczQiIC8+CiAgPG1ldGFkYXRhCiAgICAgaWQ9Im1ldGFkYXRhNyI+CiAgICA8cmRmOlJERj4KICAgICAgPGNjOldvcmsKICAgICAgICAgcmRmOmFib3V0PSIiPgogICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PgogICAgICAgIDxkYzp0eXBlCiAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4KICAgICAgICA8ZGM6dGl0bGU+PC9kYzp0aXRsZT4KICAgICAgPC9jYzpXb3JrPgogICAgPC9yZGY6UkRGPgogIDwvbWV0YWRhdGE+CiAgPGcKICAgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjAyLjAxNDUxLC00MDcuMTIyMjUpIgogICAgIGlkPSJsYXllcjEiPgogICAgPHRleHQKICAgICAgIGlkPSJ0ZXh0MzMzNiIKICAgICAgIHk9IjYyOS41MDUwNyIKICAgICAgIHg9IjI5MS40Mjg1NiIKICAgICAgIHN0eWxlPSJmb250LXN0eWxlOm5vcm1hbDtmb250LXdlaWdodDpub3JtYWw7Zm9udC1zaXplOjQwcHg7bGluZS1oZWlnaHQ6MTI1JTtmb250LWZhbWlseTpzYW5zLXNlcmlmO2xldHRlci1zcGFjaW5nOjBweDt3b3JkLXNwYWNpbmc6MHB4O2ZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZTtzdHJva2Utd2lkdGg6MXB4O3N0cm9rZS1saW5lY2FwOmJ1dHQ7c3Ryb2tlLWxpbmVqb2luOm1pdGVyO3N0cm9rZS1vcGFjaXR5OjEiCiAgICAgICB4bWw6c3BhY2U9InByZXNlcnZlIj48dHNwYW4KICAgICAgICAgeT0iNjI5LjUwNTA3IgogICAgICAgICB4PSIyOTEuNDI4NTYiCiAgICAgICAgIGlkPSJ0c3BhbjMzMzgiPjwvdHNwYW4+PC90ZXh0PgogICAgPGcKICAgICAgIGlkPSJ0ZXh0MzM0MCIKICAgICAgIHN0eWxlPSJmb250LXN0eWxlOm5vcm1hbDtmb250LXZhcmlhbnQ6bm9ybWFsO2ZvbnQtd2VpZ2h0Om5vcm1hbDtmb250LXN0cmV0Y2g6bm9ybWFsO2ZvbnQtc2l6ZTo0MHB4O2xpbmUtaGVpZ2h0OjEyNSU7Zm9udC1mYW1pbHk6Rm9udEF3ZXNvbWU7LWlua3NjYXBlLWZvbnQtc3BlY2lmaWNhdGlvbjpGb250QXdlc29tZTtsZXR0ZXItc3BhY2luZzowcHg7d29yZC1zcGFjaW5nOjBweDtmaWxsOiMwMDAwMDA7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmU7c3Ryb2tlLXdpZHRoOjFweDtzdHJva2UtbGluZWNhcDpidXR0O3N0cm9rZS1saW5lam9pbjptaXRlcjtzdHJva2Utb3BhY2l0eToxIj4KICAgICAgPHBhdGgKICAgICAgICAgaWQ9InBhdGgzMzQ1IgogICAgICAgICBzdHlsZT0iZmlsbDojMzMzMzMzO2ZpbGwtb3BhY2l0eToxIgogICAgICAgICBkPSJtIDIzNy41NjY5Niw0MTMuMjU1MDcgYyAwLjU1ODA0LC0wLjU1ODA0IDAuNTU4MDQsLTEuNDczMjIgMCwtMi4wMzEyNSBsIC0zLjcwNTM1LC0zLjY4MzA0IGMgLTAuNTU4MDQsLTAuNTU4MDQgLTEuNDUwOSwtMC41NTgwNCAtMi4wMDg5MywwIEwgMjIwLDQxOS4zOTM0NiAyMDguMTQ3MzIsNDA3LjU0MDc4IGMgLTAuNTU4MDMsLTAuNTU4MDQgLTEuNDUwODksLTAuNTU4MDQgLTIuMDA4OTMsMCBsIC0zLjcwNTM1LDMuNjgzMDQgYyAtMC41NTgwNCwwLjU1ODAzIC0wLjU1ODA0LDEuNDczMjEgMCwyLjAzMTI1IGwgMTYuNTYyNSwxNi41NDAxNyBjIDAuNTU4MDMsMC41NTgwNCAxLjQ1MDg5LDAuNTU4MDQgMi4wMDg5MiwwIGwgMTYuNTYyNSwtMTYuNTQwMTcgeiIgLz4KICAgIDwvZz4KICA8L2c+Cjwvc3ZnPgo=";
5
6.franz-form {
7 .franz-form__select {
8 -webkit-appearance: none;
9 min-width: 200px;
10 padding: 10px;
11 background-color: $theme-gray-lightest;
12 background-position: right center;
13 background-repeat: no-repeat;
14 background-size: 1ex;
15 background-origin: content-box;
16 background-image: url(data:image/svg+xml;base64,#{$toggle});
17 border: 1px solid $theme-gray-lighter;
18 }
19}
diff --git a/src/styles/service-table.scss b/src/styles/service-table.scss
new file mode 100644
index 000000000..66d5ac941
--- /dev/null
+++ b/src/styles/service-table.scss
@@ -0,0 +1,62 @@
1@import './config.scss';
2
3.service-table {
4 width: 100%;
5
6 .service-table__toggle {
7 width: 60px;
8
9 .franz-form__field {
10 margin-bottom: 0;
11 }
12 }
13
14 .service-table__icon {
15 width: 35px;
16
17 &.has-custom-icon {
18 border-radius: $theme-border-radius;
19 border: 1px solid $theme-gray-lighter;
20 width: 37px;
21 }
22 }
23
24 .service-table__column-icon {
25 width: 40px;
26 }
27
28 .service-table__column-action {
29 width: 40px
30 }
31
32 .service-table__column-info {
33 width: 40px;
34
35 .mdi {
36 display: block;
37 font-size: 18px;
38 color: $theme-gray-light;
39 }
40 }
41
42 .service-table__row {
43 border-bottom: 1px solid $theme-gray-lightest;
44
45 &:hover {
46 background: $theme-gray-lightest;
47 }
48
49 &.service-table__row--disabled {
50 color: $theme-gray-light;
51
52 .service-table__column-icon {
53 filter: grayscale(100%);
54 opacity: 0.5;
55 }
56 }
57 }
58
59 td {
60 padding: 10px;
61 }
62}
diff --git a/src/styles/services.scss b/src/styles/services.scss
new file mode 100644
index 000000000..3347ea9d7
--- /dev/null
+++ b/src/styles/services.scss
@@ -0,0 +1,60 @@
1@import './config.scss';
2
3.services {
4 flex: 1;
5 height: 100%;
6 position: relative;
7 overflow: hidden;
8 background: #FFF;
9 order: 5;
10
11 .services__webview {
12 position: absolute;
13 width: 100%;
14 top: 0;
15 left: 0;
16 z-index: 0;
17
18 webview {
19 display: inline-flex;
20 width: 0px;
21 height: 0px;
22 }
23
24 &.is-active {
25 z-index: 100;
26
27 webview {
28 flex: 0 1;
29 width: 100%;
30 height: 100%;
31 }
32 }
33
34 &--force-repaint {
35 webview {
36 z-index: 5;
37 }
38 }
39 }
40
41 .services__no-service {
42 display: flex;
43 flex-direction: column;
44 justify-content: center;
45 align-items: center;
46 text-align: center;
47 background: $theme-gray-lighter;
48
49 h1 {
50 margin: 25px 0 40px;
51 color: $theme-gray-dark;
52 }
53
54 a.button {
55 margin-top: 40px;
56 // color: #FFF;
57 // border-color: #FFF;
58 }
59 }
60}
diff --git a/src/styles/settings.scss b/src/styles/settings.scss
new file mode 100644
index 000000000..9b19deb4e
--- /dev/null
+++ b/src/styles/settings.scss
@@ -0,0 +1,392 @@
1@import './config.scss';
2
3%headline {
4 font-size: 20px;
5 font-weight: 400;
6 letter-spacing: -1px;
7 color: $theme-gray-light;
8
9 a {
10 color: $theme-gray-light;
11 }
12}
13
14.settings-wrapper {
15 background: rgba(black, 0.5);
16 position: absolute;
17 width: 100%;
18 height: 100%;
19 top: 0;
20 left: 0;
21 z-index: 9998;
22 display: flex;
23 justify-content: center;
24 align-items: center;
25 padding: 25px;
26
27 .settings-wrapper__action {
28 position: absolute;
29 width: 100%;
30 height: 100%;
31 top: 0;
32 left: 0;
33 }
34}
35
36.settings {
37 position: relative;
38 display: flex;
39 height: 100%;
40 width: 100%;
41 max-width: 900px;
42 min-height: 400px;
43 max-height: 600px;
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;
49 // margin-top: -10%;
50
51 .settings__main {
52 flex: 1;
53 display: flex;
54 flex-direction: column;
55 height: auto;
56 }
57
58 .settings__header {
59 display: flex;
60 align-items: center;
61 width: calc(100% - 60px);
62 height: 50px;
63 padding: 0 40px;
64 background: $theme-gray-lighter;
65
66 h1 {
67 @extend %headline;
68 margin: 0;
69 }
70
71 .settings__header-item {
72 @extend %headline;
73 }
74
75 .separator {
76 height: 100%;
77 margin: 0 15px;
78 border-right: 1px solid darken($theme-gray-lighter, 10%);
79 transform: skew(15deg) rotate(2deg);
80 }
81
82 .mdi {
83 color: $theme-gray-light;
84 }
85 }
86
87 .settings__body {
88 flex: 1;
89 padding: 25px 15px 15px 25px;
90 margin: 15px;
91 overflow-y: scroll;
92
93 &::-webkit-scrollbar {
94 width: 8px;
95 }
96
97 /* Track */
98 &::-webkit-scrollbar-track {
99 -webkit-border-radius: 10px;
100 border-radius: 10px;
101 background: none;
102 }
103
104 /* Handle */
105 &::-webkit-scrollbar-thumb {
106 -webkit-border-radius: 10px;
107 border-radius: 10px;
108 background: $theme-gray-lighter;
109 }
110
111 &::-webkit-scrollbar-thumb:window-inactive {
112 background: none;
113 }
114 }
115
116 .settings__close {
117 position: absolute;
118 right: 0;
119 background: $theme-gray-lighter;
120 height: 50px;
121 padding: 0 20px;
122 font-size: 20px;
123 border-left: 1px solid darken($theme-gray-lighter, 5%);
124 color: $theme-gray-light;
125 transition: background $theme-transition-time;
126
127 &:hover {
128 background: darken($theme-gray-lighter, 5%);
129 }
130 }
131
132 .settings__search-header {
133 display: flex;
134 align-items: center;
135 padding: 0 10px;
136 border-radius: $theme-border-radius;
137 transition: background $theme-transition-time;
138 @extend %headline;
139 font-size: 22px;
140
141 &:hover {
142 background: darken($theme-gray-lighter, 5%);
143 }
144
145 input {
146 padding-left: 10px;
147 background: none;
148 border: 0;
149 flex: 1;
150 @extend %headline;
151 }
152 }
153
154 .settings__options {
155 margin-top: 30px;
156 }
157
158 .settings__message {
159 display: flex;
160 margin-top: 40px;
161 padding-top: 15px;
162 border-top: 1px solid $theme-gray-lighter;
163 color: $theme-gray-light;
164
165 .mdi {
166 color: $theme-gray-light;
167 font-size: 20px;
168 margin-right: 10px;
169 }
170 }
171
172 .settings__indirect-message-help {
173 margin: -10px 0 20px 55px;;
174 font-size: 12px;
175 color: $theme-gray-light;
176
177 &:last-of-type {
178 margin-bottom: 30px;
179 }
180 }
181
182 .settings__controls {
183 display: flex;
184 justify-content: space-between;
185 padding: 10px 20px;
186 height: auto;
187 background: $theme-gray-lighter;
188
189 .franz-form__button {
190 &[type='submit'] {
191 margin-left: auto;
192 }
193
194 &.franz-form__button--secondary {
195 background: $theme-gray-light;
196 }
197 }
198 }
199
200 .settings__delete-button {
201 right: 0;
202 }
203
204 .settings__empty-state {
205 width: 100%;
206 height: auto;
207 min-height: 70%;
208 text-align: center;
209 align-self: center;
210 // margin-top: -20px;
211 align-items: center;
212
213 a.button {
214 margin-top: 40px;
215 }
216 }
217
218 .account {
219 height: auto;
220 // padding: 20px;
221
222 .account__box {
223 background: $theme-gray-lightest;
224 border-radius: $theme-border-radius;
225 padding: 20px;
226 margin-bottom: 40px;
227 align-items: center;
228
229 &.account__box--flex {
230 display: flex;
231 }
232
233 &.account__box--last {
234 margin-bottom: 0;
235 }
236
237 .auth__button {
238 width: 100%;
239 margin-top: 10px;
240 }
241 }
242
243 .account__avatar {
244 margin-right: 20px;
245 position: relative;
246
247 .emoji img {
248 width: 30px;
249 }
250 }
251
252 .account__avatar-premium {
253 position: absolute;
254 top: 2px;
255 right: 2px;
256 font-size: 26px;
257 }
258
259 .account__info {
260 flex: 1;
261
262 h2 {
263 margin-bottom: 5px;
264 }
265
266 .badge {
267 margin-top: 5px;
268 }
269 }
270
271 .account__subscription {
272 display: flex;
273 align-items: center;
274
275 .badge {
276 margin-left: 10px;
277 }
278 }
279
280 .account__subscription-button {
281 margin-left: auto;
282 }
283
284 div {
285 height: auto;
286 }
287
288 .invoices {
289 width: 100%;
290
291 td {
292 padding: 15px 0;
293 border-bottom: 1px solid $theme-gray-lighter;
294 }
295
296 tr:last-of-type td {
297 border: 0;
298 padding-bottom: 0;
299 }
300
301 .invoices__action {
302 text-align: right;
303
304 button {
305 color: $theme-brand-primary;
306 }
307 }
308 }
309 }
310
311 // @include element(add-service-teaser) {
312 // height: auto;
313 // margin-top: 20px;
314 // display: block;
315 // text-align: center;
316 // }
317 .emoji {
318 display: block;
319 font-size: 40px;
320 margin-bottom: 20px;
321
322 img {
323 width: 40px;
324 }
325 }
326
327 .premium-info {
328 background: lighten($theme-brand-primary, 40%);
329 padding: 20px;
330 border-radius: $theme-border-radius;
331 }
332
333 .content-tabs .premium-info {
334 background: none;
335 padding: 0;
336 }
337}
338
339.settings-navigation {
340 width: 200px;
341 height: auto;
342 background: $theme-gray-lightest;
343 display: flex;
344 flex-direction: column;
345
346 .settings-navigation__link {
347 display: block;
348 height: 50px;
349 line-height: 50px;
350 text-decoration: none;
351 color: $theme-text-color;
352 padding: 0 20px;
353 transition: background $theme-transition-time, color $theme-transition-time;
354
355 &:hover {
356 background: darken($theme-gray-lightest, 5%);
357
358 .badge {
359 background: #FFF;
360 }
361 }
362
363 &.is-active {
364 background: $theme-brand-primary;
365 color: #FFF;
366
367 .badge {
368 background: #FFF;
369 color: $theme-brand-primary;
370 }
371 }
372 }
373
374 .settings-navigation__expander {
375 flex: 1;
376 }
377
378 .badge {
379 transition: background $theme-transition-time, color $theme-transition-time;
380 display: initial;
381 margin-left: 5px;
382 }
383
384 .settings-navigation__action-badge {
385 display: inline-block;
386 width: 7px;
387 height: 7px;
388 background: $theme-brand-danger;
389 border-radius: 100%;
390 margin-left: 5px;
391 }
392}
diff --git a/src/styles/subscription-popup.scss b/src/styles/subscription-popup.scss
new file mode 100644
index 000000000..b6f232fcb
--- /dev/null
+++ b/src/styles/subscription-popup.scss
@@ -0,0 +1,20 @@
1.subscription-popup {
2 height: 100%;
3
4 &__content {
5 height: calc(100% - 60px);
6 }
7
8 &__webview {
9 height: 100%;
10 }
11
12 &__toolbar {
13 height: 60px;
14 background: $theme-gray-lightest;
15 display: flex;
16 justify-content: space-between;
17 padding: 10px;
18 border-top: 1px solid $theme-gray-lighter;
19 }
20}
diff --git a/src/styles/subscription.scss b/src/styles/subscription.scss
new file mode 100644
index 000000000..63183f085
--- /dev/null
+++ b/src/styles/subscription.scss
@@ -0,0 +1,72 @@
1.subscription {
2 .subscription__premium-features {
3 margin: 10px 0;
4
5 li {
6 height: 30px;
7 align-items: center;
8 display: flex;
9
10 &:before {
11 content: "👍";
12 margin-right: 10px;
13 }
14
15 .badge {
16 margin-left: 10px;
17 }
18 }
19 }
20
21 .subscription__premium-info {
22 margin: 15px 0 25px;
23 }
24}
25
26.paymentTiers {
27 .franz-form__radio-wrapper {
28 flex-flow: wrap;
29
30 .franz-form__radio {
31 width: 32%;
32 flex: initial;
33 margin-right: 2%;
34
35 &:nth-child(3) {
36 margin-right: 0;
37 }
38
39 &:last-of-type {
40 margin-right: 0;
41 margin-top: 2%;
42 width: 100%;
43 }
44 }
45 }
46}
47
48.settings {
49 .paymentTiers {
50 .franz-form__radio-wrapper {
51 .franz-form__radio {
52 width: 49%;
53
54 &:nth-child(2) {
55 margin-right: 0;
56 }
57
58 &:last-of-type {
59 width: 100%;
60 }
61 }
62 }
63 }
64}
65
66.mining-details {
67 margin-bottom: 15px;
68
69 button {
70 color: $theme-brand-primary;
71 }
72}
diff --git a/src/styles/tabs.scss b/src/styles/tabs.scss
new file mode 100644
index 000000000..75568898b
--- /dev/null
+++ b/src/styles/tabs.scss
@@ -0,0 +1,72 @@
1@import './config.scss';
2
3.tabs {
4 display: flex;
5 // flex: 1;
6 flex-direction: column;
7 flex-shrink: 1;
8 // align-items: center;
9 // height: auto;
10
11 .placeholder {
12 width: 100%;
13 height: 40px;
14 }
15}
16
17.tab-item {
18 display: flex;
19 justify-content: center;
20 align-items: center;
21 position: relative;
22 width: $theme-sidebar-width;
23 height: $theme-sidebar-width;
24 min-height: 50px;
25 transition: background $theme-transition-time;
26
27 &.is-active {
28 border-left: 4px solid $theme-brand-primary;
29 background: lighten($theme-brand-primary, 35%);
30
31 .tab-item__icon {
32 margin-left: -4px;
33 }
34 }
35
36 &.has-custom-icon {
37 .tab-item__icon {
38 border-radius: $theme-border-radius;
39 // border: 1px solid $theme-gray-lighter;
40 // width: 32px;
41 }
42 }
43
44 .tab-item__icon {
45 width: 30px;
46 height: auto;
47 }
48
49 .tab-item__message-count {
50 min-width: 17px;
51 min-height: 17px;
52 background: $theme-brand-danger;
53 color: #FFF;
54 border-radius: 20px;
55 padding: 0px 5px;
56 font-size: 11px;
57 position: absolute;
58 right: 5px;
59 bottom: 5px;
60 display: flex;
61 justify-content: center;
62 align-items: center;
63
64 &.is-indirect {
65 padding-top: 0px;
66 }
67 }
68
69 &.is-reordering {
70 z-index: 99999;
71 }
72}
diff --git a/src/styles/toggle.scss b/src/styles/toggle.scss
new file mode 100644
index 000000000..5b47e6495
--- /dev/null
+++ b/src/styles/toggle.scss
@@ -0,0 +1,47 @@
1@import './config.scss';
2
3$toggle-size: 14px;
4$toggle-width: 40px;
5$toggle-button-size: 22px;
6
7.franz-form {
8 .franz-form__toggle-wrapper {
9 display: flex;
10 flex-direction: row;
11
12 .franz-form__label {
13 margin-left: 20px;
14 }
15
16 .franz-form__toggle {
17 width: $toggle-width;
18 height: $toggle-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 }
46 }
47}
diff --git a/src/styles/tooltip.scss b/src/styles/tooltip.scss
new file mode 100644
index 000000000..1194e7fbb
--- /dev/null
+++ b/src/styles/tooltip.scss
@@ -0,0 +1,4 @@
1.__react_component_tooltip {
2 padding: 10px !important;
3 height: auto;
4}
diff --git a/src/styles/type.scss b/src/styles/type.scss
new file mode 100644
index 000000000..935a36f4b
--- /dev/null
+++ b/src/styles/type.scss
@@ -0,0 +1,73 @@
1@import './config.scss';
2@import './mixins.scss';
3
4h1 {
5 font-size: 30px;
6 font-weight: 300;
7 letter-spacing: -1px;
8 margin-bottom: 25px;
9}
10
11h2 {
12 font-size: 20px;
13 font-weight: 500;
14 letter-spacing: -1px;
15 margin-bottom: 25px;
16 margin-top: 55px;
17
18 &:first-of-type {
19 margin-top: 0;
20 }
21}
22
23p {
24 margin-bottom: 10px;
25 line-height: 1.7rem;
26
27 &:last-of-type {
28 margin-bottom: 0;
29 }
30}
31
32strong {
33 font-weight: bold;
34}
35
36a {
37 text-decoration: none;
38 color: $theme-text-color;
39
40 &.button {
41 position: relative;
42 background: none;
43 display: inline-block;
44 padding: 10px 20px;
45 border: 2px solid $theme-brand-primary;
46 color: $theme-brand-primary;
47 border-radius: 3px;
48 transition: background 0.5s, color 0.5s;
49 text-align: center;
50
51 &:hover {
52 background: darken($theme-brand-primary, 5%);
53 color: #FFF;
54 }
55 }
56
57 &.link {
58 color: $theme-brand-primary;
59 }
60}
61
62.error-message, .error-message:last-of-type {
63 margin: 10px 0;
64 color: $theme-brand-danger;
65}
66
67.center {
68 text-align: center;
69}
70
71.label {
72 @include formLabel();
73}
diff --git a/src/styles/util.scss b/src/styles/util.scss
new file mode 100644
index 000000000..3faad8db3
--- /dev/null
+++ b/src/styles/util.scss
@@ -0,0 +1,20 @@
1.scroll-container {
2 height: 100%;
3 flex: 1;
4 overflow-y: scroll;
5 overflow-x: hidden;
6}
7
8.loader {
9 position: relative;
10 z-index: 9999;
11 display: block;
12 width: 100%;
13 height: 40px;
14}
15
16.align-middle {
17 display: flex;
18 flex-direction: column;
19 justify-content: center;
20}
diff --git a/src/styles/welcome.scss b/src/styles/welcome.scss
new file mode 100644
index 000000000..5365921fb
--- /dev/null
+++ b/src/styles/welcome.scss
@@ -0,0 +1,75 @@
1.auth {
2 .welcome {
3
4 &__content {
5 display: flex;
6 align-items: center;
7 justify-content: center;
8 color: #FFF;
9 }
10
11 &__logo {
12 width: 100px;
13 }
14
15 &__text {
16 margin-left: 40px;
17 padding-left: 40px;
18 border-left: 1px solid #FFF;
19
20 h1 {
21 font-size: 60px;
22 letter-spacing: -0.4rem;
23 margin-bottom: 5px;
24 }
25
26 h2 {
27 margin-left: 2px;
28 margin-bottom: 0;
29 }
30 }
31
32 &__services {
33 width: 100%;
34 max-width: 800px;
35 height: 100%;
36 max-height: 600px;
37 margin-left: -450px;
38 }
39
40 &__buttons {
41 display: block;
42 margin-top: 100px;
43 text-align: center;
44
45 .button:first-of-type {
46 margin-right: 25px;
47 }
48 }
49
50 .button {
51 border-color: #FFF;
52 color: #FFF;
53
54 &:hover {
55 background: #FFF;
56 color: $theme-brand-primary;
57 }
58 }
59
60 &__featured-services {
61 margin-top: 150px;
62 text-align: center;
63 margin-top: 80px;
64 }
65
66 &__featured-service {
67 width: 35px;
68 margin-right: 30px;
69
70 &:last-of-type {
71 margin-right: 0;
72 }
73 }
74 }
75}
generated by cgit v1.2.3-54-g00ecf (git 2.45.2) at 2024-08-07 16:32:20 +0000