diff options
author | 2018-01-06 23:51:04 +0100 | |
---|---|---|
committer | 2018-01-06 23:51:04 +0100 | |
commit | fb16f121e8ff6678c74148cd456b964a85742fbe (patch) | |
tree | 5534162572aca6bda4d22984ab6103c76510d193 /src/styles | |
parent | Merge pull request #541 from meetfranz/feature/external-links (diff) | |
parent | fix displaying old icon while uploading new icon (diff) | |
download | ferdium-app-fb16f121e8ff6678c74148cd456b964a85742fbe.tar.gz ferdium-app-fb16f121e8ff6678c74148cd456b964a85742fbe.tar.zst ferdium-app-fb16f121e8ff6678c74148cd456b964a85742fbe.zip |
Merge pull request #525 from meetfranz/feature/icon-upload
[PR] Feature/icon upload
Diffstat (limited to 'src/styles')
-rw-r--r-- | src/styles/image-upload.scss | 91 | ||||
-rw-r--r-- | src/styles/main.scss | 1 | ||||
-rw-r--r-- | src/styles/settings.scss | 27 |
3 files changed, 113 insertions, 6 deletions
diff --git a/src/styles/image-upload.scss b/src/styles/image-upload.scss new file mode 100644 index 000000000..06176a7af --- /dev/null +++ b/src/styles/image-upload.scss | |||
@@ -0,0 +1,91 @@ | |||
1 | .image-upload { | ||
2 | position: absolute; | ||
3 | width: 140px; | ||
4 | height: 140px; | ||
5 | border: 1px solid $theme-gray-lighter; | ||
6 | border-radius: $theme-border-radius-small; | ||
7 | background: $theme-gray-lightest; | ||
8 | overflow: hidden; | ||
9 | margin-top: 5px; | ||
10 | |||
11 | &__preview, | ||
12 | &__action { | ||
13 | position: absolute; | ||
14 | top: 0; | ||
15 | left: 0; | ||
16 | right: 0; | ||
17 | } | ||
18 | |||
19 | &__preview { | ||
20 | z-index: 1; | ||
21 | background-size: cover; | ||
22 | background-size: 100%; | ||
23 | background-repeat: no-repeat; | ||
24 | background-position: center center; | ||
25 | border-radius: 3px; | ||
26 | } | ||
27 | |||
28 | &__action { | ||
29 | position: relative; | ||
30 | z-index: 10; | ||
31 | opacity: 0; | ||
32 | transition: opacity 0.5s; | ||
33 | display: flex; | ||
34 | justify-content: center; | ||
35 | |||
36 | &-background { | ||
37 | position: absolute; | ||
38 | top: 0; | ||
39 | left: 0; | ||
40 | right: 0; | ||
41 | bottom: 0; | ||
42 | background: rgba($theme-gray, 0.7); | ||
43 | z-index: 10; | ||
44 | } | ||
45 | |||
46 | button { | ||
47 | position: relative; | ||
48 | z-index: 100; | ||
49 | color: #FFF; | ||
50 | |||
51 | .mdi { | ||
52 | color: #FFF; | ||
53 | } | ||
54 | } | ||
55 | } | ||
56 | |||
57 | &__dropzone { | ||
58 | text-align: center; | ||
59 | border-radius: 5px; | ||
60 | padding: 10px; | ||
61 | display: flex; | ||
62 | align-items: center; | ||
63 | justify-content: center; | ||
64 | flex-direction: column; | ||
65 | } | ||
66 | |||
67 | &__dropzone, | ||
68 | button { | ||
69 | .mdi { | ||
70 | margin-bottom: 5px; | ||
71 | } | ||
72 | |||
73 | p { | ||
74 | font-size: 10px; | ||
75 | line-height: 10px; | ||
76 | } | ||
77 | } | ||
78 | |||
79 | &:hover { | ||
80 | .image-upload__action { | ||
81 | opacity: 1; | ||
82 | } | ||
83 | } | ||
84 | } | ||
85 | |||
86 | .image-upload-wrapper { | ||
87 | .mdi { | ||
88 | font-size: 40px; | ||
89 | color: $theme-gray-light; | ||
90 | } | ||
91 | } \ No newline at end of file | ||
diff --git a/src/styles/main.scss b/src/styles/main.scss index 0a082729c..261396f6f 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss | |||
@@ -35,3 +35,4 @@ $mdi-font-path: '../node_modules/mdi/fonts'; | |||
35 | @import './button.scss'; | 35 | @import './button.scss'; |
36 | @import './searchInput.scss'; | 36 | @import './searchInput.scss'; |
37 | @import './select.scss'; | 37 | @import './select.scss'; |
38 | @import './image-upload.scss'; | ||
diff --git a/src/styles/settings.scss b/src/styles/settings.scss index 2da56c930..2182c9b5f 100644 --- a/src/styles/settings.scss +++ b/src/styles/settings.scss | |||
@@ -111,6 +111,26 @@ | |||
111 | &::-webkit-scrollbar-thumb:window-inactive { | 111 | &::-webkit-scrollbar-thumb:window-inactive { |
112 | background: none; | 112 | background: none; |
113 | } | 113 | } |
114 | |||
115 | .service-flex-grid { | ||
116 | display: flex; | ||
117 | } | ||
118 | |||
119 | .service-name { | ||
120 | flex: 1px; | ||
121 | } | ||
122 | |||
123 | .service-icon { | ||
124 | width: 140px; | ||
125 | float: right; | ||
126 | margin-top: 30px; | ||
127 | margin-left: 40px; | ||
128 | |||
129 | label { | ||
130 | font-weight: bold; | ||
131 | letter-spacing: -0.1px; | ||
132 | } | ||
133 | } | ||
114 | } | 134 | } |
115 | 135 | ||
116 | .settings__close { | 136 | .settings__close { |
@@ -135,6 +155,7 @@ | |||
135 | 155 | ||
136 | &__options { | 156 | &__options { |
137 | margin-top: 20px; | 157 | margin-top: 20px; |
158 | flex: 1; | ||
138 | } | 159 | } |
139 | 160 | ||
140 | &__settings-group { | 161 | &__settings-group { |
@@ -305,12 +326,6 @@ | |||
305 | } | 326 | } |
306 | } | 327 | } |
307 | 328 | ||
308 | // @include element(add-service-teaser) { | ||
309 | // height: auto; | ||
310 | // margin-top: 20px; | ||
311 | // display: block; | ||
312 | // text-align: center; | ||
313 | // } | ||
314 | .emoji { | 329 | .emoji { |
315 | display: block; | 330 | display: block; |
316 | font-size: 40px; | 331 | font-size: 40px; |