finish off drag and drop styl
This commit is contained in:
parent
a26f0c3b56
commit
8b4566a634
|
@ -130,15 +130,26 @@ p {
|
|||
|
||||
|
||||
.file-drag-n-drop {
|
||||
display: block;
|
||||
width: 400px;
|
||||
height: 400px;
|
||||
background: var(--header-sec-color);
|
||||
border-radius: 16px;
|
||||
padding: var(--header-padding-x);
|
||||
}
|
||||
.file-drag-n-drop-inside {
|
||||
.file-drag-n-drop * { display: block }
|
||||
.file-drag-n-drop object { display: initial }
|
||||
.file-drag-n-drop .file-drag-n-drop-inside {
|
||||
padding: var(--header-padding-x);
|
||||
border: 4px dotted #656565;
|
||||
height: calc(100% - 32px - 8px);
|
||||
border-radius: 16px;
|
||||
}
|
||||
.file-drag-n-drop .file-drag-n-drop-inside .file-drag-n-drop-inside-text {
|
||||
margin: 0;
|
||||
position: relative;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
text-align: center;
|
||||
line-height: 32px;
|
||||
}
|
|
@ -0,0 +1,6 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg height="16px" viewBox="0 0 16 16" width="16px" xmlns="http://www.w3.org/2000/svg" fill='#eee'>
|
||||
<path d="m 3 0 c -1.644531 0 -3 1.355469 -3 3 v 10 c 0 1.644531 1.355469 3 3 3 h 10 c 1.644531 0 3 -1.355469 3 -3 v -10 c 0 -1.644531 -1.355469 -3 -3 -3 z m 0 2 h 10 c 0.570312 0 1 0.429688 1 1 v 10 c 0 0.570312 -0.429688 1 -1 1 h -10 c -0.570312 0 -1 -0.429688 -1 -1 v -10 c 0 -0.570312 0.429688 -1 1 -1 z m 0 0"/>
|
||||
<path d="m 4 7 h 8 v 2 h -8 z m 0 0"/>
|
||||
<path d="m 9 4 v 8 h -2 v -8 z m 0 0"/>
|
||||
</svg>
|
After Width: | Height: | Size: 552 B |
|
@ -30,11 +30,14 @@
|
|||
<p>
|
||||
<input type="file" name="file" id="bfile-formupload-file" style="display: none" />
|
||||
<label for="bfile-formupload-file">
|
||||
<div class="file-drag-n-drop">
|
||||
<div class="file-drag-n-drop-inside">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<span class="file-drag-n-drop">
|
||||
<span class="file-drag-n-drop-inside">
|
||||
<span class="file-drag-n-drop-inside-text">
|
||||
<object data="/tab-new-symbolic.svg" width="32" height="32"></object><br/>
|
||||
Drag & drop your files here!
|
||||
</span>
|
||||
</span>
|
||||
</span>
|
||||
</label>
|
||||
</p>
|
||||
</form>
|
||||
|
|
Loading…
Reference in New Issue