vuestic-ui/dist/esm-node/VaFileUploadGalleryItem.css

Vue 3 UI Framework

:root,
:host {
  --va-file-upload-gallery-item-card-box-shadow: var(--va-box-shadow);
  --va-file-upload-gallery-item-text: var(--va-text-primary);
  --va-file-upload-gallery-item-text-hover: var(--va-text-inverted);
}
.va-file-upload-gallery-item {
  display: flex;
  position: relative;
  margin-bottom: 1rem;
  margin-right: 0.5rem;
  flex-basis: calc(14.2857% - 0.5rem);
  max-width: calc(14.2857% - 0.5rem);
  min-width: 8.5714rem;
  border-radius: 0.375rem;
  overflow: hidden;
  width: 100%;
  align-items: stretch;
}
@media (max-width: 991.98px) {
.va-file-upload-gallery-item {
    flex-basis: calc(16.667% - 0.5rem);
    max-width: calc(16.667% - 0.5rem);
}
}
@media (max-width: 767.98px) {
.va-file-upload-gallery-item {
    flex-basis: calc(20% - 0.5rem);
    max-width: calc(20% - 0.5rem);
}
}
@media (max-width: 575.98px) {
.va-file-upload-gallery-item {
    flex-basis: calc(50% - 0.5rem);
    max-width: calc(50% - 0.5rem);
}
}
.va-file-upload-gallery-item:last-of-type {
  margin-right: 0;
}
.va-file-upload-gallery-item:hover .va-file-upload-gallery-item__overlay, .va-file-upload-gallery-item:focus .va-file-upload-gallery-item__overlay, .va-file-upload-gallery-item--focused .va-file-upload-gallery-item__overlay {
  z-index: 3;
  opacity: 1;
}
.va-file-upload-gallery-item:hover .va-file-upload-gallery-item__name, .va-file-upload-gallery-item:focus .va-file-upload-gallery-item__name, .va-file-upload-gallery-item--focused .va-file-upload-gallery-item__name {
  color: var(--va-file-upload-gallery-item-text-hover);
}
.va-file-upload-gallery-item__overlay {
  display: flex;
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  flex-direction: column;
  padding: 0.5rem;
  z-index: -1;
  opacity: 0;
}
.va-file-upload-gallery-item__overlay-background {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: -1;
}
.va-file-upload-gallery-item__image {
  width: 100%;
  box-shadow: var(--va-box-shadow);
  object-fit: cover;
  z-index: 1;
}
.va-file-upload-gallery-item__name {
  color: var(--va-file-upload-gallery-item-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 0.875rem;
}
.va-file-upload-gallery-item__delete {
  cursor: pointer;
  font-size: 1.5rem;
  margin-top: auto;
}
.va-file-upload-gallery-item--not-image .va-file-upload-gallery-item__overlay {
  display: flex;
}
.va-file-upload-gallery-item--undo .va-list-item__inner {
  display: flex;
  align-items: flex-start;
  position: relative;
}
.va-file-upload-gallery-item--undo .va-list-item-section {
  height: inherit;
  padding: 0;
}
.va-file-upload-gallery-item--undo .va-file-upload-undo {
  flex: 1;
}