Redesign drag-over state for write data form

pull/1897/head
Alex P 2017-08-17 13:34:53 -07:00
parent aa26fe18e8
commit 80c9d758f3
2 changed files with 39 additions and 19 deletions

View File

@ -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>

View File

@ -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);