diff options
author | 2018-01-02 22:54:17 +0100 | |
---|---|---|
committer | 2018-01-02 22:54:47 +0100 | |
commit | 6b97e42537879be306cd2aaf95dd8aebf8655fcb (patch) | |
tree | 2c2628d507cbf34c953dc97d9a5fe30d8ffcd5db /src/styles/image-upload.scss | |
parent | First working draft of icon upload (diff) | |
download | ferdium-app-6b97e42537879be306cd2aaf95dd8aebf8655fcb.tar.gz ferdium-app-6b97e42537879be306cd2aaf95dd8aebf8655fcb.tar.zst ferdium-app-6b97e42537879be306cd2aaf95dd8aebf8655fcb.zip |
feat(Service): Add custom service icon upload
Diffstat (limited to 'src/styles/image-upload.scss')
-rw-r--r-- | src/styles/image-upload.scss | 47 |
1 files changed, 43 insertions, 4 deletions
diff --git a/src/styles/image-upload.scss b/src/styles/image-upload.scss index 764bb3158..06176a7af 100644 --- a/src/styles/image-upload.scss +++ b/src/styles/image-upload.scss | |||
@@ -1,9 +1,12 @@ | |||
1 | .image-upload { | 1 | .image-upload { |
2 | position: absolute; | 2 | position: absolute; |
3 | width: 100px; | 3 | width: 140px; |
4 | height: 100px; | 4 | height: 140px; |
5 | border-radius: $theme-border-radius; | 5 | border: 1px solid $theme-gray-lighter; |
6 | border-radius: $theme-border-radius-small; | ||
7 | background: $theme-gray-lightest; | ||
6 | overflow: hidden; | 8 | overflow: hidden; |
9 | margin-top: 5px; | ||
7 | 10 | ||
8 | &__preview, | 11 | &__preview, |
9 | &__action { | 12 | &__action { |
@@ -19,7 +22,7 @@ | |||
19 | background-size: 100%; | 22 | background-size: 100%; |
20 | background-repeat: no-repeat; | 23 | background-repeat: no-repeat; |
21 | background-position: center center; | 24 | background-position: center center; |
22 | margin: 5px; | 25 | border-radius: 3px; |
23 | } | 26 | } |
24 | 27 | ||
25 | &__action { | 28 | &__action { |
@@ -27,6 +30,8 @@ | |||
27 | z-index: 10; | 30 | z-index: 10; |
28 | opacity: 0; | 31 | opacity: 0; |
29 | transition: opacity 0.5s; | 32 | transition: opacity 0.5s; |
33 | display: flex; | ||
34 | justify-content: center; | ||
30 | 35 | ||
31 | &-background { | 36 | &-background { |
32 | position: absolute; | 37 | position: absolute; |
@@ -41,6 +46,33 @@ | |||
41 | button { | 46 | button { |
42 | position: relative; | 47 | position: relative; |
43 | z-index: 100; | 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; | ||
44 | } | 76 | } |
45 | } | 77 | } |
46 | 78 | ||
@@ -49,4 +81,11 @@ | |||
49 | opacity: 1; | 81 | opacity: 1; |
50 | } | 82 | } |
51 | } | 83 | } |
84 | } | ||
85 | |||
86 | .image-upload-wrapper { | ||
87 | .mdi { | ||
88 | font-size: 40px; | ||
89 | color: $theme-gray-light; | ||
90 | } | ||
52 | } \ No newline at end of file | 91 | } \ No newline at end of file |