Redesign drag-over state for write data form
parent
aa26fe18e8
commit
80c9d758f3
|
@ -172,7 +172,7 @@ class WriteDataForm extends Component {
|
|||
</div>
|
||||
<div className="write-data-form--drag-container">
|
||||
<div className="write-data-form--drag-here">
|
||||
Drag file here to Upload
|
||||
<h3>Drag your file here to Upload</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -13,7 +13,6 @@ $write-data--transition: opacity 0.4s ease;
|
|||
.write-data-form {
|
||||
max-width: $write-data--max-width;
|
||||
margin: 0 auto;
|
||||
transition: $write-data--transition;
|
||||
}
|
||||
.write-data-form--header {
|
||||
height: $chronograf-page-header-height;
|
||||
|
@ -112,32 +111,53 @@ input[type="file"].write-data-form--upload {
|
|||
.write-data-form--drag-container {
|
||||
transition-property: all;
|
||||
visibility: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: calc(100% - 60px);
|
||||
max-width: $write-data--max-width;
|
||||
height: 90vh;
|
||||
top: 0;
|
||||
left: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
}
|
||||
.write-data-form--drag-here {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-50%);
|
||||
top: 60px;
|
||||
width: 100%;
|
||||
height: calc(100% - 60px);
|
||||
@include gradient-v($g2-kevlar,$g0-obsidian);
|
||||
transition: $write-data--transition;
|
||||
width: 520px;
|
||||
height: 240px;
|
||||
border-radius: 5px;
|
||||
text-align: center;
|
||||
line-height: 240px;
|
||||
font-size: 30px;
|
||||
font-weight: 400;
|
||||
border-radius: 0 0 4px 4px;
|
||||
opacity: 0;
|
||||
color: $g20-white;
|
||||
border: 2px dashed fade-out($g20-white, 0.5);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
align-content: center;
|
||||
|
||||
// Dashed box
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 18px;
|
||||
left: 30px;
|
||||
right: 30px;
|
||||
bottom: 66px;
|
||||
border: 2px dashed $g5-pepper;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
.write-data-form--drag-here h3 {
|
||||
text-align: center;
|
||||
color: $g12-forge;
|
||||
margin: 0;
|
||||
@include no-user-select();
|
||||
}
|
||||
.overlay-technology.drag-over {
|
||||
.write-data-form {opacity: 0;}
|
||||
.write-data-form--drag-container {visibility: visible;}
|
||||
.write-data-form--drag-here {opacity: 1;}
|
||||
.write-data-form--drag-here {
|
||||
opacity: 1;
|
||||
transition: $write-data--transition;
|
||||
}
|
||||
}
|
||||
.write-data-form--drag-graphic {
|
||||
background-image: url(assets/images/drag-drop-icon.svg);
|
||||
|
|
Loading…
Reference in New Issue