diff options
Diffstat (limited to 'src/styles/image-upload.scss')
-rw-r--r-- | src/styles/image-upload.scss | 93 |
1 files changed, 51 insertions, 42 deletions
diff --git a/src/styles/image-upload.scss b/src/styles/image-upload.scss index 06176a7af..e93884b36 100644 --- a/src/styles/image-upload.scss +++ b/src/styles/image-upload.scss | |||
@@ -1,74 +1,89 @@ | |||
1 | .theme__dark { | ||
2 | .image-upload { | ||
3 | background: $dark-theme-gray-darker; | ||
4 | border: 1px solid $dark-theme-gray-light; | ||
5 | color: $dark-theme-gray-lighter; | ||
6 | |||
7 | &__action { | ||
8 | &-background { background: rgba($dark-theme-black, .7); } | ||
9 | |||
10 | button { | ||
11 | color: $dark-theme-gray-lightest; | ||
12 | |||
13 | .mdi { color: $dark-theme-gray-lightest; } | ||
14 | } | ||
15 | } | ||
16 | } | ||
17 | |||
18 | .image-upload-wrapper .mdi { color: $dark-theme-gray-light; } | ||
19 | } | ||
20 | |||
1 | .image-upload { | 21 | .image-upload { |
2 | position: absolute; | 22 | background: $theme-gray-lightest; |
3 | width: 140px; | ||
4 | height: 140px; | ||
5 | border: 1px solid $theme-gray-lighter; | 23 | border: 1px solid $theme-gray-lighter; |
6 | border-radius: $theme-border-radius-small; | 24 | border-radius: $theme-border-radius-small; |
7 | background: $theme-gray-lightest; | 25 | height: 140px; |
8 | overflow: hidden; | ||
9 | margin-top: 5px; | 26 | margin-top: 5px; |
27 | overflow: hidden; | ||
28 | position: absolute; | ||
29 | width: 140px; | ||
10 | 30 | ||
11 | &__preview, | 31 | &__preview, |
12 | &__action { | 32 | &__action { |
13 | position: absolute; | ||
14 | top: 0; | ||
15 | left: 0; | 33 | left: 0; |
34 | position: absolute; | ||
16 | right: 0; | 35 | right: 0; |
36 | top: 0; | ||
17 | } | 37 | } |
18 | 38 | ||
19 | &__preview { | 39 | &__preview { |
20 | z-index: 1; | ||
21 | background-size: cover; | ||
22 | background-size: 100%; | ||
23 | background-repeat: no-repeat; | ||
24 | background-position: center center; | 40 | background-position: center center; |
41 | background-repeat: no-repeat; | ||
42 | background-size: cover; | ||
25 | border-radius: 3px; | 43 | border-radius: 3px; |
44 | z-index: 1; | ||
26 | } | 45 | } |
27 | 46 | ||
28 | &__action { | 47 | &__action { |
29 | position: relative; | ||
30 | z-index: 10; | ||
31 | opacity: 0; | ||
32 | transition: opacity 0.5s; | ||
33 | display: flex; | 48 | display: flex; |
34 | justify-content: center; | 49 | justify-content: center; |
50 | opacity: 0; | ||
51 | position: relative; | ||
52 | transition: opacity .5s; | ||
53 | z-index: 10; | ||
35 | 54 | ||
36 | &-background { | 55 | &-background { |
37 | position: absolute; | 56 | background: rgba($theme-gray, .7); |
38 | top: 0; | 57 | bottom: 0; |
39 | left: 0; | 58 | left: 0; |
59 | position: absolute; | ||
40 | right: 0; | 60 | right: 0; |
41 | bottom: 0; | 61 | top: 0; |
42 | background: rgba($theme-gray, 0.7); | ||
43 | z-index: 10; | 62 | z-index: 10; |
44 | } | 63 | } |
45 | 64 | ||
46 | button { | 65 | button { |
66 | color: #FFF; | ||
47 | position: relative; | 67 | position: relative; |
48 | z-index: 100; | 68 | z-index: 100; |
49 | color: #FFF; | ||
50 | 69 | ||
51 | .mdi { | 70 | .mdi { color: #FFF; } |
52 | color: #FFF; | ||
53 | } | ||
54 | } | 71 | } |
55 | } | 72 | } |
56 | 73 | ||
57 | &__dropzone { | 74 | &__dropzone { |
58 | text-align: center; | 75 | align-items: center; |
59 | border-radius: 5px; | 76 | border-radius: 5px; |
60 | padding: 10px; | ||
61 | display: flex; | 77 | display: flex; |
62 | align-items: center; | ||
63 | justify-content: center; | ||
64 | flex-direction: column; | 78 | flex-direction: column; |
79 | justify-content: center; | ||
80 | padding: 10px; | ||
81 | text-align: center; | ||
65 | } | 82 | } |
66 | 83 | ||
67 | &__dropzone, | 84 | &__dropzone, |
68 | button { | 85 | button { |
69 | .mdi { | 86 | .mdi { margin-bottom: 5px; } |
70 | margin-bottom: 5px; | ||
71 | } | ||
72 | 87 | ||
73 | p { | 88 | p { |
74 | font-size: 10px; | 89 | font-size: 10px; |
@@ -76,16 +91,10 @@ | |||
76 | } | 91 | } |
77 | } | 92 | } |
78 | 93 | ||
79 | &:hover { | 94 | &:hover .image-upload__action { opacity: 1; } |
80 | .image-upload__action { | ||
81 | opacity: 1; | ||
82 | } | ||
83 | } | ||
84 | } | 95 | } |
85 | 96 | ||
86 | .image-upload-wrapper { | 97 | .image-upload-wrapper .mdi { |
87 | .mdi { | 98 | color: $theme-gray-light; |
88 | font-size: 40px; | 99 | font-size: 40px; |
89 | color: $theme-gray-light; | 100 | } |
90 | } | ||
91 | } \ No newline at end of file | ||