Appearance

DAM Dropzone Styles ​

File Information ​

  • Path: assets/css/dam-dropzone.css
  • Purpose: File upload dropzone and upload queue styles
  • Size: ~8.6 KB

Overview ​

The DAM Dropzone CSS file provides comprehensive styles for the file upload interface, including drag-and-drop zones, upload previews, progress indicators, and upload queue management.

Key Features ​

  1. Dropzone Styling

    • Drag-and-drop area
    • Upload message display
    • File preview cards
    • Progress indicators

  2. Upload Queue

    • File list display
    • Upload status indicators
    • Error handling styles
    • Success/error states

  3. Interactive Elements

    • Hover effects
    • Loading animations
    • Remove buttons
    • Progress bars

CSS Classes ​

.dam-container .vue-dropzone ​

Main dropzone container:

css
.dam-container .vue-dropzone {
  padding: 0;
  border: none;
}

.dam-container .dropzone .dz-message {
  margin: 0 !important;
}

.dam-container .dropzone .dz-preview {
  min-width: 100%;
  max-width: 100%;
}

Properties:

  • No padding or border
  • Full-width previews
  • No default margins

.dam-container .vue-dropzone > .dz-preview .dz-image ​

Preview image container:

css
.dam-container .vue-dropzone > .dz-preview .dz-image {
  width: 70px !important;
  margin: 0;
}

.dam-container .dam-dropzone .dz-image img {
  object-fit: contain;
}

Properties:

  • Fixed width (70px)
  • Contain object fit
  • No margins

.dam-dropzone .dz-preview ​

File preview card:

css
.dam-dropzone .dz-preview,
.dam-dropzone .dropzone .dz-preview.dz-image-preview {
  background-color: #ffffff !important;
  transition: background-color 200ms ease;
}

.dam-dropzone .dropzone .dz-preview:hover,
.dam-dropzone .dropzone .dz-preview.dz-image-preview:hover {
  background-color: #f1f1f1 !important;
}

Properties:

  • White background
  • Hover effect
  • Smooth transition

.dam-dropzone .dz-preview .dz-progress ​

Progress bar:

css
.dam-dropzone .dz-preview .dz-progress span {
  height: 100% !important;
  border-radius: 4px;
  background-color: rgba(3, 97, 207, 0.25) !important;
}

.dam-dropzone .dz-progress {
  padding-right: 10%;
  transition: 0.4s ease-in !important;
}

.dam-dropzone .dz-complete .dz-progress {
  padding-right: 0%;
}

Properties:

  • Blue progress color
  • Rounded corners
  • Smooth transitions
  • Padding adjustment

.dam-dropzone .dz-complete.dz-error ​

Error state:

css
.dam-dropzone .dz-complete.dz-error .dz-progress span {
  background: #f17575 !important;
}

.dam-dropzone .dz-complete.dz-error .dz-success-mark {
  opacity: 0.8 !important;
  background-size: contain;
  pointer-events: all !important;
  background-repeat: no-repeat;
  background-image: url('~@/assets/img/alert.png');
}

.dam-dropzone .dz-error.dz-preview,
.dam-dropzone .dropzone .dz-error.dz-preview.dz-image-preview {
  background: #ffdddd !important;
}

Properties:

  • Red error color
  • Error icon display
  • Light red background

.dam-dropzone .dz-preview:not(.dz-complete) ​

Loading state:

css
.dam-dropzone .dz-preview:not(.dz-complete):not(.dz-error):not(.dz-success) .dz-success-mark,
.dam-dropzone .dz-preview:not(.dz-complete):not(.dz-error):not(.dz-success) .dz-error-mark .dz-remove {
  opacity: 0.8 !important;
  background-size: contain;
  background-repeat: no-repeat;
  background-image: url('~@/assets/img/loading.gif');
}

Properties:

  • Loading animation
  • Gif background
  • Opacity control

.dam-container .upload-container ​

Upload container:

css
.dam-container .upload-container {
  height: 100%;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.dam-container .upload-container:not(.file-added) .dam-dropzone {
  flex: 1;
}

.dam-container .upload-container:not(.file-added) .vue-dropzone,
.dam-container .upload-container:not(.file-added) .dz-message,
.dam-container .upload-container:not(.file-added) .dropzone {
  height: 100%;
}

Properties:

  • Full height
  • Flex column layout
  • Conditional flex sizing

.file-added .dam-dropzone ​

With files added:

css
.file-added .dam-dropzone {
  position: relative;
  height: 100%;
}

.file-added .dam-dropzone .vue-dropzone {
  margin-top: 277px;
  background: #eff1f3 !important;
  border-radius: 4px;
  padding: 10px;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scroll-behavior: smooth;
}

.file-added .dam-dropzone .vue-dropzone {
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-behavior: smooth;
}

Properties:

  • Top margin for header
  • Light gray background
  • Scrollable area
  • Smooth scrolling

.dam-dropzone .upload-images ​

Upload area:

css
.dam-dropzone .upload-images {
  border: 2px dashed #dfe0e2;
  border-radius: 4px;
  padding: 30px;
  position: relative;
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.dam-dropzone .upload-images h2 {
  position: absolute;
  top: 30px;
  left: 30px;
  font-size: 18px;
  color: #333333;
  font-weight: 700;
  padding-right: 20px;
  color: #1f3253;
  font-size: 22px;
  line-height: 25px;
  font-weight: 600;
  margin: 0;
}

.dam-dropzone .dz-started .upload-images {
  height: auto;
  padding: 55px 30px;
}

.dam-dropzone .dz-started .upload-images h2 {
  display: none;
}

Properties:

  • Dashed border
  • Centered content
  • Absolute positioned title
  • Conditional display

Custom Scrollbar ​

css
.file-added .dam-dropzone .vue-dropzone::-webkit-scrollbar-track {
  background-color: transparent;
}

.file-added .dam-dropzone .vue-dropzone::-webkit-scrollbar {
  width: 4px;
  background-color: transparent;
}

.file-added .dam-dropzone .vue-dropzone::-webkit-scrollbar-thumb {
  background-color: transparent;
}

.file-added .dam-dropzone .vue-dropzone:hover::-webkit-scrollbar-track {
  background-color: #d3d3d3;
}

.file-added .dam-dropzone .vue-dropzone:hover::-webkit-scrollbar {
  width: 4px;
  background-color: #d3d3d3;
}

.file-added .dam-dropzone .vue-dropzone:hover::-webkit-scrollbar-thumb {
  background-color: #697fa5;
}

Properties:

  • Transparent by default
  • Visible on hover
  • Thin scrollbar (4px)
  • Blue thumb color

File Preview Card ​

css
.dam-dropzone .dz-preview {
  display: flex !important;
  align-items: center;
  padding: 15px 20px;
  margin: 4px 0 0 !important;
  min-height: auto !important;
  border-radius: 8px !important;
  box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.12);
  margin-bottom: 0.5rem !important;
}

.dam-dropzone .dz-preview > a,
.dam-dropzone .dz-preview > div {
  position: relative !important;
  z-index: 3 !important;
}

Properties:

  • Flex layout
  • Rounded corners
  • Box shadow
  • Z-index layering

Usage Examples ​

Basic Dropzone ​

html
<div class="dam-container">
  <div class="upload-container">
    <div class="dam-dropzone">
      <div class="upload-images">
        <h2>Upload Files</h2>
        <div class="upload-text">
          <h5>Drag and drop files here</h5>
        </div>
      </div>
    </div>
  </div>
</div>

File Preview ​

html
<div class="dam-dropzone">
  <div class="dz-preview">
    <div class="dz-image">
      <img src="preview.jpg" alt="Preview">
    </div>
    <div class="dz-details">
      <div class="dz-filename">
        <span>filename.jpg</span>
      </div>
    </div>
    <div class="dz-progress">
      <span style="width: 50%"></span>
    </div>
    <a class="dz-remove">Remove</a>
  </div>
</div>

Integration Points ​

  • Upload Page: Main upload interface
  • Asset Upload Component: Upload component
  • Upload Queue: Queue management
  • File Preview: Preview display

Notes for Development ​

  • Uses Dropzone.js library
  • Custom scrollbar styling
  • Loading animations
  • Error state handling
  • Progress indicators