diff options
Diffstat (limited to 'src/styles')
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 | |||
3 | html { | ||
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 | |||
6 | html, body, div, span, applet, object, iframe, | ||
7 | h1, h2, h3, h4, h5, h6, p, blockquote, pre, | ||
8 | a, abbr, acronym, address, big, cite, code, | ||
9 | del, dfn, em, img, ins, kbd, q, s, samp, | ||
10 | small, strike, strong, sub, sup, tt, var, | ||
11 | b, u, i, center, | ||
12 | dl, dt, dd, ol, ul, li, | ||
13 | fieldset, form, label, legend, | ||
14 | table, caption, tbody, tfoot, thead, tr, th, td, | ||
15 | article, aside, canvas, details, embed, | ||
16 | figure, figcaption, footer, header, hgroup, | ||
17 | menu, nav, output, ruby, section, summary, | ||
18 | time, 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 */ | ||
26 | article, aside, details, figcaption, figure, | ||
27 | footer, header, hgroup, menu, nav, section { | ||
28 | display: block; | ||
29 | } | ||
30 | body { | ||
31 | line-height: 1; | ||
32 | } | ||
33 | ol, ul { | ||
34 | list-style: none; | ||
35 | } | ||
36 | blockquote, q { | ||
37 | quotes: none; | ||
38 | } | ||
39 | blockquote:before, blockquote:after, q:before, q:after { | ||
40 | content: ''; | ||
41 | content: none; | ||
42 | } | ||
43 | table { | ||
44 | border-collapse: collapse; | ||
45 | border-spacing: 0; | ||
46 | } | ||
47 | |||
48 | /* Buttons should not have any special style applied by default */ | ||
49 | button { | ||
50 | background: none; | ||
51 | border: none; | ||
52 | padding: 0; | ||
53 | } | ||
54 | |||
55 | button:focus { | ||
56 | outline: 0; | ||
57 | } | ||
58 | |||
59 | html { | ||
60 | /* base for rem / 1rem = 10px */ | ||
61 | font-size: 62.5%; | ||
62 | font-family: 'Open Sans'; | ||
63 | } | ||
64 | |||
65 | body { | ||
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 | |||
79 | html, body, div { | ||
80 | height: 100%; | ||
81 | background: none; | ||
82 | box-sizing: border-box; | ||
83 | } | ||
84 | |||
85 | *:focus { | ||
86 | outline: none; | ||
87 | } | ||
88 | |||
89 | img { | ||
90 | pointer-events: none; | ||
91 | } | ||
92 | |||
93 | a { | ||
94 | cursor: default; | ||
95 | } | ||
diff --git a/src/styles/searchInput.scss b/src/styles/searchInput.scss 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 | |||
4 | h1 { | ||
5 | font-size: 30px; | ||
6 | font-weight: 300; | ||
7 | letter-spacing: -1px; | ||
8 | margin-bottom: 25px; | ||
9 | } | ||
10 | |||
11 | h2 { | ||
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 | |||
23 | p { | ||
24 | margin-bottom: 10px; | ||
25 | line-height: 1.7rem; | ||
26 | |||
27 | &:last-of-type { | ||
28 | margin-bottom: 0; | ||
29 | } | ||
30 | } | ||
31 | |||
32 | strong { | ||
33 | font-weight: bold; | ||
34 | } | ||
35 | |||
36 | a { | ||
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 | } | ||