diff options
author | 2017-11-12 19:12:29 +0100 | |
---|---|---|
committer | 2017-11-12 19:12:29 +0100 | |
commit | a1bdd02fca413cdc314137dc65e835131c358e72 (patch) | |
tree | 9e1e48092288e2a578b84cb366da3276553c39cf /src/styles | |
parent | Merge pull request #252 from meetfranz/feature/mute-service (diff) | |
download | ferdium-app-a1bdd02fca413cdc314137dc65e835131c358e72.tar.gz ferdium-app-a1bdd02fca413cdc314137dc65e835131c358e72.tar.zst ferdium-app-a1bdd02fca413cdc314137dc65e835131c358e72.zip |
[wip] add icon upload
Diffstat (limited to 'src/styles')
-rw-r--r-- | src/styles/image-upload.scss | 52 | ||||
-rw-r--r-- | src/styles/main.scss | 1 | ||||
-rw-r--r-- | src/styles/settings.scss | 20 |
3 files changed, 67 insertions, 6 deletions
diff --git a/src/styles/image-upload.scss b/src/styles/image-upload.scss new file mode 100644 index 000000000..764bb3158 --- /dev/null +++ b/src/styles/image-upload.scss | |||
@@ -0,0 +1,52 @@ | |||
1 | .image-upload { | ||
2 | position: absolute; | ||
3 | width: 100px; | ||
4 | height: 100px; | ||
5 | border-radius: $theme-border-radius; | ||
6 | overflow: hidden; | ||
7 | |||
8 | &__preview, | ||
9 | &__action { | ||
10 | position: absolute; | ||
11 | top: 0; | ||
12 | left: 0; | ||
13 | right: 0; | ||
14 | } | ||
15 | |||
16 | &__preview { | ||
17 | z-index: 1; | ||
18 | background-size: cover; | ||
19 | background-size: 100%; | ||
20 | background-repeat: no-repeat; | ||
21 | background-position: center center; | ||
22 | margin: 5px; | ||
23 | } | ||
24 | |||
25 | &__action { | ||
26 | position: relative; | ||
27 | z-index: 10; | ||
28 | opacity: 0; | ||
29 | transition: opacity 0.5s; | ||
30 | |||
31 | &-background { | ||
32 | position: absolute; | ||
33 | top: 0; | ||
34 | left: 0; | ||
35 | right: 0; | ||
36 | bottom: 0; | ||
37 | background: rgba($theme-gray, 0.7); | ||
38 | z-index: 10; | ||
39 | } | ||
40 | |||
41 | button { | ||
42 | position: relative; | ||
43 | z-index: 100; | ||
44 | } | ||
45 | } | ||
46 | |||
47 | &:hover { | ||
48 | .image-upload__action { | ||
49 | opacity: 1; | ||
50 | } | ||
51 | } | ||
52 | } \ 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 48d12a807..556803c46 100644 --- a/src/styles/settings.scss +++ b/src/styles/settings.scss | |||
@@ -111,6 +111,20 @@ | |||
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: 30%; | ||
125 | min-width: 100px; | ||
126 | margin-left: 40px; | ||
127 | } | ||
114 | } | 128 | } |
115 | 129 | ||
116 | .settings__close { | 130 | .settings__close { |
@@ -308,12 +322,6 @@ | |||
308 | } | 322 | } |
309 | } | 323 | } |
310 | 324 | ||
311 | // @include element(add-service-teaser) { | ||
312 | // height: auto; | ||
313 | // margin-top: 20px; | ||
314 | // display: block; | ||
315 | // text-align: center; | ||
316 | // } | ||
317 | .emoji { | 325 | .emoji { |
318 | display: block; | 326 | display: block; |
319 | font-size: 40px; | 327 | font-size: 40px; |