.file-drag-and-drop { display: block; outline: 1px dashed #9E9E9E; vertical-align: middle; text-align: center; height: auto; background-color: #FEFEFE; overflow: auto; margin-top: 1em; cursor: default !important; padding: 1.5em 0 1.5em 0; } .inactive-dropzone { cursor: default !important; background-color: rgba(0,0,0,0) !important; outline: 0; } .file-drag-and-drop .file-drag-and-drop-dialog > p:first-child { font-size: 1.5em !important; margin-top: 0; margin-bottom: 0; padding-bottom: 0; } .file-drag-and-drop-position { position: relative; display: inline-block; .delete-file { display: block; background-color: black; width: 20px; height: 20px; position: absolute; right: -7px; top: -7px; border-radius: 1em; text-align: center; cursor: pointer; span { color: white; top: 1; left: 0; font-size: .8em; &:hover { color: $brand-danger; } } } } .file-drag-and-drop-preview-table-wrapper { display: table; height:94px; width:104px; } .file-drag-and-drop-preview { overflow:hidden; cursor: default; background-color: #EEEEEE; border: 1px solid #616161; } .file-drag-and-drop-preview-image { display: table; height:104px; width:104px; overflow:hidden; border: 1px solid #616161; text-align: center; } .file-drag-and-drop-preview-image .action-file { font-size: 2.5em; margin-top: .6em; color: white; text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; cursor: pointer; &:link, &:visited, &:hover, &:active { text-decoration: none; } &:hover { color: #d9534f; } } .file-drag-and-drop-preview-other .action-file { position: relative; top: .3em; margin-top: 0; font-size: 2.5em; color: white; text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black; cursor: pointer; &:link, &:visited, &:hover, &:active { text-decoration: none; } &:hover { color: #d9534f; } } .file-drag-and-drop-preview-other { display: table-cell; text-align: center; vertical-align: middle; } .file-drag-and-drop-preview-other span:not(:first-child) { display: block; margin-top: .5em; }