censa_front_end_library/css/src/components/fileList.css

React components library project for censa Design System

.FileIcon {
  padding: var(--spacing);
  border-radius: 50%;
}
.FileItem:not(:last-child) {
  border-bottom: var(--border);
  width: 100%;
  box-sizing: border-box;
}
.FileItem {
  padding-top: var(--spacing);
  padding-bottom: var(--spacing);
  padding-left: var(--spacing-l);
  padding-right: var(--spacing);
}
.FileItem-fileContent {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 0;
}
.FileItem-actions {
  display: flex;
  justify-content: center;
  align-items: center;
}
.FileItem-file {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.FileItem-size {
  margin-right: var(--spacing);
  margin-left: var(--spacing);
  flex-shrink: 0;
}
.FileItem-text {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-left: var(--spacing-l);
}
.FileItem-error {
  margin-left: 40px;
}

.FileIcon--image {
  background: var(--alert-lightest);
  color: var(--alert);
}
.FileIcon--audio {
  background: var(--accent1-lightest);
  color: var(--accent1);
}
.FileIcon--video {
  background: var(--accent2-lightest);
  color: var(--accent2);
}
.FileIcon--application {
  background: var(--accent3-lightest);
  color: var(--accent3);
}
.FileIcon--others {
  background: var(--success-lightest);
  color: var(--success);
}
.FileIcon--animate {
  animation: fadeIn var(--duration--moderate-01) var(--entrance-productive-curve);
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}