chayns-components/lib/react-chayns-gallery/component/Gallery.css

A set of beautiful React components for developing chayns® applications.

.cc__gallery {
  display: flex;
  flex-wrap: wrap;
  user-select: none;
  position: relative;
  width: calc(100% + 2px);
  transform: translate(-1px, -1px);
}
.cc__gallery--default-mode .cc__gallery__image {
  margin: 1px;
}
.cc__gallery--default-mode .cc__gallery__image .cc__image-container {
  padding: 0;
  height: 100%;
}
.cc__gallery--default-mode .cc__gallery__image:nth-child(1):nth-last-child(1) {
  width: calc(100% - 2px);
  height: calc(100% - 2px);
}
.cc__gallery--default-mode .cc__gallery__image:nth-child(1):nth-last-child(2) {
  width: calc(50% - 2px);
  height: calc(100% - 2px);
}
.cc__gallery--default-mode .cc__gallery__image:nth-child(1):nth-last-child(3) {
  width: calc(100% - 2px);
  height: calc(66.66% - 2px);
}
.cc__gallery--default-mode .cc__gallery__image:nth-child(1):nth-last-child(4) {
  width: calc(100% - 2px);
  height: calc(66.66% - 2px);
}
.cc__gallery--default-mode .cc__gallery__image:nth-child(2):nth-last-child(1) {
  width: calc(50% - 2px);
  height: calc(100% - 2px);
}
.cc__gallery--default-mode .cc__gallery__image:nth-child(2):nth-last-child(2) {
  width: calc(50% - 2px);
  height: calc(33.33% - 2px);
}
.cc__gallery--default-mode .cc__gallery__image:nth-child(2):nth-last-child(3) {
  width: calc(33.33% - 2px);
  height: calc(33.33% - 2px);
}
.cc__gallery--default-mode .cc__gallery__image:nth-child(3):nth-last-child(1) {
  width: calc(50% - 2px);
  height: calc(33.33% - 2px);
}
.cc__gallery--default-mode .cc__gallery__image:nth-child(3):nth-last-child(2) {
  width: calc(33.33% - 2px);
  height: calc(33.33% - 2px);
}
.cc__gallery--default-mode .cc__gallery__image:nth-child(4):nth-last-child(1) {
  width: calc(33.33% - 2px);
  height: calc(33.33% - 2px);
}
.cc__gallery__image {
  width: 33.333%;
  display: inline-block;
  padding: 1px;
  margin: 0;
}
.cc__gallery__image__tool--drag {
  cursor: grab;
}
.cc__gallery__image__tool--drag:active {
  cursor: grabbing;
}
.cc__gallery__image__dropzone {
  width: 100%;
  height: 100%;
  border-width: 1px;
  border-style: dashed;
}
.cc__gallery__image--active {
  z-index: 1;
  position: absolute;
}
.cc__gallery__image--transition {
  will-change: top, left;
  transition: top 250ms ease, left 250ms ease;
}
.cc__gallery__image--dropzone {
  z-index: -1;
  display: none;
}
.cc__gallery__image--show_dropzone {
  display: initial !important;
}
.cc__gallery__image--cover,
.cc__gallery__image img {
  width: 100%;
  height: 100%;
}