.content-assets { .updatable { margin-top: 140px; > .nav-container { height: 39px; padding: 3px 0px 10px 0px; } > .list-container { margin-top: 192px; .pagination { margin-top: 10px; } } } .sidebar-dropzone { height: 100%; } .top-dropzone { z-index: 10; position: absolute; top: 0px; height: 140px; width: 100%; } .dropzone { background: $assets_dropzone_background_color; &.hovered { background: $assets_dropzone_background_hover_color; } .dropzone-inner { position: fixed; top: 100px; } .instructions { margin-top: 10px; text-align: center; color: $assets_dropzone_instructions_color; font-size: 12px; strong { color: #555; font-size: 14px; } i { color: #bec1c2; font-size: 65px; } } .progress { margin-top: 10px; background: $assets_dropzone_progress_background; height: $assets_dropzone_progress_size; @include border-radius($assets_dropzone_progress_size / 2); @include box-shadow(none); .progress-bar { background: $assets_dropzone_progress_bar_color; } } } } .content-assets-list { margin-top: 10px; @include display-flex; @include flex-direction(row); @include flex-wrap; @include flex-align(left); // @include flex-justify-content(center); .asset { @include border-radius($asset_border_radius); background: $asset_background; padding: 10px 15px; margin: 0px 20px 20px 0px; position: relative; width: $asset_width; height: $asset_height; h2 { color: $asset_title_color; font-size: 14px; margin: 0px 0px 4px 0px; text-align: right; } .size { font-size: 11px; text-align: right; color: $asset_size_color; margin-bottom: 10px; } .body { width: 100%; height: $asset_height - 106; @include display-flex; @include flex-align(center); @include flex-justify-content(center); } .small-thumbnail { display: inline-block; background: $asset_thumbnail_background; @include border-radius($asset_thumbnail_border_radius); padding: $asset_thumbnail_border_radius; img { border: $asset_thumbnail_img_border; } .not-a-image { position: relative; width: 120px; height: 120px; border: 2px solid $asset_not_image_border_color; &.pdf { background: $asset_pdf_background; } &.media { background: $asset_media_background; } &.other { background: $asset_other_background; } span { display: block; position: relative; top: 40px; color: $asset_not_image_text_color; font-size: 22px; font-weight: bold; text-align: center; text-transform: uppercase; // FIXME: Disabled because it slows down the scrolling // @include transform(rotate(-45deg)); } } } .actions { position: absolute; bottom: 10px; right: 15px; a.remove { color: $asset_remove_icon_color; } } } } .edit-assets-container { @include full-space(); .actions { position: absolute; top: 120px; right: 5px; } .image-container { background-color: $cropping_asset_background; overflow: hidden; width: 100%; text-align: center; } .image-container { height: 100%; } .image-container > img { max-width: 100%; max-height: inherit; } .cropper-label { position: absolute; top: 0px; left: 0px; background: $cropping_asset_label_background; color: $cropping_asset_label_color; font-size: 11px; padding: 3px 6px; } }