spee.ch/client/scss/_dropzone.scss

87 lines
1.6 KiB
SCSS
Raw Normal View History

.dropzone-wrapper {
// fill the parent flex container
flex: 1 0 auto;
// be a flex container for children
display: flex;
flex-direction: column;
2018-11-15 04:24:36 +01:00
position: relative;
}
.dropzone {
border: 2px dashed #9b9b9b;
// fill the parent flex container
flex: 1 0 auto;
// be a flex container for children
display: flex;
2018-11-15 04:24:36 +01:00
padding: 1em;
-webkit-flex-direction: column;
flex-direction: column;
justify-content: center;
align-items: center;
2018-11-09 01:44:59 +01:00
user-select: none;
}
.dropzone:hover, .dropzone--active {
border: 2px dashed #4156C5;
cursor: pointer;
}
.dropzone-dropit-display, .dropzone-instructions-display {
padding: 1em;
text-align: center;
}
2018-11-09 01:44:59 +01:00
.dropzone-dropit-display
{
color: $primary-color;
}
2018-06-02 00:15:48 +02:00
.dropzone-preview-wrapper {
position: relative;
2018-06-05 23:24:54 +02:00
width: 100%;
2018-06-02 00:15:48 +02:00
.dropzone-preview-overlay {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
display: flex;
-webkit-flex-direction: column;
flex-direction: column;
justify-content: center;
}
}
2018-06-03 05:58:54 +02:00
.dropzone-preview-image {
display: block;
2018-11-15 04:24:36 +01:00
width: 100%;
}
.dropzone-preview-memeify {
margin-top: 3em;
2018-06-03 05:58:54 +02:00
}
2018-11-09 01:44:59 +01:00
2018-11-15 03:08:20 +01:00
.dropzone-memeify-button {
2018-11-15 04:24:36 +01:00
background: $primary-color;
2018-11-15 03:08:20 +01:00
color: #fff;
2018-11-15 04:24:36 +01:00
cursor: pointer;
2018-11-15 03:08:20 +01:00
font-size: .8em;
padding: 3px 6px;
position: absolute;
right: 0;
top: 0;
z-index: 3;
}
2018-11-15 04:24:36 +01:00
.dropzone-memeify-toolbar {
/* TODO: Cleanup `!important` */
background: $primary-color !important;
left: -1em !important;
right: -1em !important;
top: -4em !important;
}
2018-11-09 01:44:59 +01:00
.dropzone-instructions-display__chooser-label {
text-decoration: underline;
}