diff options
| author |  Guille Cura <cura.gf@gmail.com> | 2018-07-05 02:37:43 -0300 |
|---|---|---|
| committer | Guille Cura <cura.gf@gmail.com> | 2018-07-05 02:37:43 -0300 |
| commit | 25c6cbd29aff90f694d72afe28ab56b0113fb16a (patch) | |
| tree | 9907623b3a7b835e58b895d08b62c5339b8e0376 /src/styles/image-upload.scss | |
| parent | 5.0.0 beta.18 (diff) | |
| download | ferdium-app-25c6cbd29aff90f694d72afe28ab56b0113fb16a.tar.gz ferdium-app-25c6cbd29aff90f694d72afe28ab56b0113fb16a.tar.zst ferdium-app-25c6cbd29aff90f694d72afe28ab56b0113fb16a.zip | |
Update stylesheets and added darkMode variable and toggle.
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 | ||