Chris@0: /**
Chris@0:  * @file
Chris@0:  * Functional styles for the Image module's in-place editor.
Chris@0:  */
Chris@0: 
Chris@0: /**
Chris@0:  * A minimum width/height is required so that users can drag and drop files
Chris@0:  * onto small images.
Chris@0:  */
Chris@0: .quickedit-image-element {
Chris@0:   min-width: 200px;
Chris@0:   min-height: 200px;
Chris@0: }
Chris@0: 
Chris@0: .quickedit-image-dropzone {
Chris@0:   display: flex;
Chris@0:   flex-direction: column;
Chris@0:   align-items: center;
Chris@0:   justify-content: center;
Chris@0:   position: absolute;
Chris@0:   top: 0;
Chris@0:   left: 0;
Chris@0:   width: 100%;
Chris@0:   height: 100%;
Chris@0: }
Chris@0: 
Chris@0: .quickedit-image-icon {
Chris@0:   display: block;
Chris@0:   width: 50px;
Chris@0:   height: 50px;
Chris@0:   background-repeat: no-repeat;
Chris@0:   background-size: cover;
Chris@0: }
Chris@0: 
Chris@0: .quickedit-image-field-info {
Chris@0:   display: flex;
Chris@0:   align-items: center;
Chris@0:   justify-content: flex-end;
Chris@0: }
Chris@0: 
Chris@0: .quickedit-image-text {
Chris@0:   display: block;
Chris@0: }
Chris@0: 
Chris@0: /**
Chris@0:  * If we do not prevent pointer-events for child elements, our drag+drop events
Chris@0:  * will not fire properly. This can lead to unintentional redirects if a file
Chris@0:  * is dropped on a child element when a user intended to upload it.
Chris@0:  */
Chris@0: .quickedit-image-dropzone * {
Chris@0:   pointer-events: none;
Chris@0: }