Choose or drop image for upload

Fix up some JS
Update Icons
This commit is contained in:
Michał Gdula 2023-03-23 12:54:00 +00:00
parent 0e1514bf93
commit 69d264739b
13 changed files with 279 additions and 194 deletions

View file

@ -1,10 +1,10 @@
@mixin btn-block($color)
background-color: transparent
background-color: rgba($color, 0.1)
color: $color
&:hover
background-color: $color
color: $black
background-color: rgba($color, 0.3)
color: $color
&:focus-visible
outline: 2px solid rgba($color, 0.5)
@ -73,7 +73,7 @@
font-weight: 600
text-align: left
background-color: transparent
background-color: rgba($white, 0.1)
color: $white
border: none
@ -96,7 +96,7 @@
&.file
padding: 0 1rem 0 0
border: none
background-color: $black2
background-color: rgba($white, 0.1)
&:focus-visible
outline: 2px solid rgba($white, 0.5)
@ -118,3 +118,51 @@
&:not([value=""])
display: none
.fileDrop-block
padding: 1rem 1.25rem
width: 100%
min-height: 2.5rem
display: flex
flex-direction: column
justify-content: center
align-items: center
gap: 0.5rem
position: relative
font-size: 1rem
font-weight: 600
text-align: center
background-color: rgba($white, 0.1)
color: $white
border: none
border-radius: $rad-inner
cursor: pointer
transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out
input
position: absolute
inset: 0
opacity: 0
cursor: pointer
&.active
background-color: rgba($primary, 0.2)
color: $primary
&.edging
background-color: rgba($white, 0.2)
color: $white
input
display: none // So it doesnt get in the way of the drop as that breaks things
&.error
background-color: rgba($critical, 0.2)
color: $critical

View file

@ -1,10 +1,9 @@
.pop-up
width: calc(100% - 3.5rem)
width: 100%
height: 100vh
position: fixed
top: 0
left: 3.5rem
inset: 0
display: none
@ -59,7 +58,7 @@
overflow-y: auto
overflow-x: hidden
text-size-adjust: auto;
text-size-adjust: auto
text-overflow: ellipsis
h3
@ -144,23 +143,9 @@
@media (max-width: $breakpoint)
.pop-up
width: 100%
height: 100vh
height: 100dvh
position: fixed
left: 0
bottom: 0
.pop-up-wrapper
width: calc(100vw - 1rem)
max-height: 99vh
left: 0.5rem
bottom: 0.5rem
border-radius: $rad
transform: translateY(5rem)
width: calc(100% - 1rem)
max-height: 95vh
.pop-up-content
max-height: 100%
@ -168,12 +153,8 @@
img
max-height: 50vh
.pop-up-controlls
flex-direction: column
justify-content: center
.pop-up-controlls button
width: 100%
&.active
opacity: 1
.pop-up-wrapper
transform: translateY(0)
opacity: 1