@festo-ui/react 9.0.1-dev.783 → 9.0.1-dev.784

package/dist/components/modals/image-gallery/ImageGallery.css

@@ -0,0 +1,833 @@
+:root {
+  --swiper-theme-color: #007aff;
+}
+
+:host {
+  z-index: 1;
+  margin-left: auto;
+  margin-right: auto;
+  display: block;
+  position: relative;
+}
+
+.swiper {
+  z-index: 1;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 0;
+  list-style: none;
+  display: block;
+  position: relative;
+  overflow: hidden;
+}
+
+.swiper-vertical > .swiper-wrapper {
+  flex-direction: column;
+}
+
+.swiper-wrapper {
+  z-index: 1;
+  width: 100%;
+  height: 100%;
+  transition-property: transform;
+  transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
+  box-sizing: content-box;
+  display: flex;
+  position: relative;
+}
+
+.swiper-android .swiper-slide, .swiper-ios .swiper-slide, .swiper-wrapper {
+  transform: translate3d(0, 0, 0);
+}
+
+.swiper-horizontal {
+  touch-action: pan-y;
+}
+
+.swiper-vertical {
+  touch-action: pan-x;
+}
+
+.swiper-slide {
+  flex-shrink: 0;
+  width: 100%;
+  height: 100%;
+  transition-property: transform;
+  display: block;
+  position: relative;
+}
+
+.swiper-slide-invisible-blank {
+  visibility: hidden;
+}
+
+.swiper-autoheight, .swiper-autoheight .swiper-slide {
+  height: auto;
+}
+
+.swiper-autoheight .swiper-wrapper {
+  align-items: flex-start;
+  transition-property: transform, height;
+}
+
+.swiper-backface-hidden .swiper-slide {
+  backface-visibility: hidden;
+  transform: translateZ(0);
+}
+
+.swiper-3d.swiper-css-mode .swiper-wrapper {
+  perspective: 1200px;
+}
+
+.swiper-3d .swiper-wrapper {
+  transform-style: preserve-3d;
+}
+
+.swiper-3d {
+  perspective: 1200px;
+
+  & .swiper-slide, & .swiper-cube-shadow {
+    transform-style: preserve-3d;
+  }
+}
+
+.swiper-css-mode {
+  & > .swiper-wrapper {
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    overflow: auto;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  & > .swiper-wrapper > .swiper-slide {
+    scroll-snap-align: start start;
+  }
+
+  &.swiper-horizontal {
+    & > .swiper-wrapper {
+      scroll-snap-type: x mandatory;
+    }
+
+    & > .swiper-wrapper > .swiper-slide:first-child {
+      margin-inline-start: var(--swiper-slides-offset-before);
+      scroll-margin-inline-start: var(--swiper-slides-offset-before);
+    }
+
+    & > .swiper-wrapper > .swiper-slide:last-child {
+      margin-inline-end: var(--swiper-slides-offset-after);
+    }
+  }
+
+  &.swiper-vertical {
+    & > .swiper-wrapper {
+      scroll-snap-type: y mandatory;
+    }
+
+    & > .swiper-wrapper > .swiper-slide:first-child {
+      margin-block-start: var(--swiper-slides-offset-before);
+      scroll-margin-block-start: var(--swiper-slides-offset-before);
+    }
+
+    & > .swiper-wrapper > .swiper-slide:last-child {
+      margin-block-end: var(--swiper-slides-offset-after);
+    }
+  }
+
+  &.swiper-free-mode {
+    & > .swiper-wrapper {
+      scroll-snap-type: none;
+    }
+
+    & > .swiper-wrapper > .swiper-slide {
+      scroll-snap-align: none;
+    }
+  }
+
+  &.swiper-centered {
+    & > .swiper-wrapper:before {
+      content: "";
+      flex-shrink: 0;
+      order: 9999;
+    }
+
+    & > .swiper-wrapper > .swiper-slide {
+      scroll-snap-align: center center;
+      scroll-snap-stop: always;
+    }
+  }
+
+  &.swiper-centered.swiper-horizontal {
+    & > .swiper-wrapper > .swiper-slide:first-child {
+      margin-inline-start: var(--swiper-centered-offset-before);
+    }
+
+    & > .swiper-wrapper:before {
+      height: 100%;
+      min-height: 1px;
+      width: var(--swiper-centered-offset-after);
+    }
+  }
+
+  &.swiper-centered.swiper-vertical {
+    & > .swiper-wrapper > .swiper-slide:first-child {
+      margin-block-start: var(--swiper-centered-offset-before);
+    }
+
+    & > .swiper-wrapper:before {
+      width: 100%;
+      min-width: 1px;
+      height: var(--swiper-centered-offset-after);
+    }
+  }
+}
+
+.swiper-3d {
+  & .swiper-slide-shadow, & .swiper-slide-shadow-left, & .swiper-slide-shadow-right, & .swiper-slide-shadow-top, & .swiper-slide-shadow-bottom, & .swiper-slide-shadow, & .swiper-slide-shadow-left, & .swiper-slide-shadow-right, & .swiper-slide-shadow-top, & .swiper-slide-shadow-bottom {
+    pointer-events: none;
+    z-index: 10;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  & .swiper-slide-shadow {
+    background: #00000026;
+  }
+
+  & .swiper-slide-shadow-left {
+    background-image: linear-gradient(to left, #00000080, #0000);
+  }
+
+  & .swiper-slide-shadow-right {
+    background-image: linear-gradient(to right, #00000080, #0000);
+  }
+
+  & .swiper-slide-shadow-top {
+    background-image: linear-gradient(to top, #00000080, #0000);
+  }
+
+  & .swiper-slide-shadow-bottom {
+    background-image: linear-gradient(#00000080, #0000);
+  }
+}
+
+.swiper-lazy-preloader {
+  z-index: 10;
+  transform-origin: 50%;
+  box-sizing: border-box;
+  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
+  border-top-color: #0000;
+  border-radius: 50%;
+  width: 42px;
+  height: 42px;
+  margin-top: -21px;
+  margin-left: -21px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+}
+
+.swiper:not(.swiper-watch-progress), .swiper-watch-progress .swiper-slide-visible {
+  & .swiper-lazy-preloader {
+    animation: 1s linear infinite swiper-preloader-spin;
+  }
+}
+
+.swiper-lazy-preloader-white {
+  --swiper-preloader-color: #fff;
+}
+
+.swiper-lazy-preloader-black {
+  --swiper-preloader-color: #000;
+}
+
+@keyframes swiper-preloader-spin {
+  0% {
+    transform: rotate(0);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.swiper-virtual .swiper-slide {
+  -webkit-backface-visibility: hidden;
+  transform: translateZ(0);
+}
+
+.swiper-virtual.swiper-css-mode {
+  & .swiper-wrapper:after {
+    content: "";
+    pointer-events: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+}
+
+.swiper-virtual.swiper-css-mode.swiper-horizontal {
+  & .swiper-wrapper:after {
+    height: 1px;
+    width: var(--swiper-virtual-size);
+  }
+}
+
+.swiper-virtual.swiper-css-mode.swiper-vertical {
+  & .swiper-wrapper:after {
+    width: 1px;
+    height: var(--swiper-virtual-size);
+  }
+}
+
+:root {
+  --swiper-navigation-size: 44px;
+}
+
+.swiper-button-prev, .swiper-button-next {
+  width: var(--swiper-navigation-size);
+  height: var(--swiper-navigation-size);
+  z-index: 10;
+  cursor: pointer;
+  color: var(--swiper-navigation-color, var(--swiper-theme-color));
+  justify-content: center;
+  align-items: center;
+  display: flex;
+  position: absolute;
+
+  &.swiper-button-disabled {
+    opacity: .35;
+    cursor: auto;
+    pointer-events: none;
+  }
+
+  &.swiper-button-hidden {
+    opacity: 0;
+    cursor: auto;
+    pointer-events: none;
+  }
+
+  .swiper-navigation-disabled & {
+    display: none !important;
+  }
+
+  & svg {
+    object-fit: contain;
+    transform-origin: center;
+    fill: currentColor;
+    pointer-events: none;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.swiper-button-lock {
+  display: none;
+}
+
+.swiper-button-prev, .swiper-button-next {
+  top: var(--swiper-navigation-top-offset, 50%);
+  margin-top: calc(0px - var(--swiper-navigation-size) / 2);
+}
+
+.swiper-button-prev {
+  left: var(--swiper-navigation-sides-offset, 4px);
+  right: auto;
+
+  & .swiper-navigation-icon {
+    transform: rotate(180deg);
+  }
+}
+
+.swiper-button-next {
+  right: var(--swiper-navigation-sides-offset, 4px);
+  left: auto;
+}
+
+.swiper-horizontal {
+  & .swiper-button-prev, & .swiper-button-next, & ~ .swiper-button-prev, & ~ .swiper-button-next {
+    top: var(--swiper-navigation-top-offset, 50%);
+    margin-top: calc(0px - var(--swiper-navigation-size) / 2);
+    margin-left: 0;
+  }
+
+  & .swiper-button-prev, & ~ .swiper-button-prev, &.swiper-rtl .swiper-button-next, &.swiper-rtl ~ .swiper-button-next {
+    left: var(--swiper-navigation-sides-offset, 4px);
+    right: auto;
+  }
+
+  & .swiper-button-next, & ~ .swiper-button-next, &.swiper-rtl .swiper-button-prev, &.swiper-rtl ~ .swiper-button-prev {
+    right: var(--swiper-navigation-sides-offset, 4px);
+    left: auto;
+  }
+
+  & .swiper-button-prev, & ~ .swiper-button-prev, &.swiper-rtl .swiper-button-next, &.swiper-rtl ~ .swiper-button-next {
+    & .swiper-navigation-icon {
+      transform: rotate(180deg);
+    }
+  }
+
+  &.swiper-rtl .swiper-button-prev, &.swiper-rtl ~ .swiper-button-prev {
+    & .swiper-navigation-icon {
+      transform: rotate(0);
+    }
+  }
+}
+
+.swiper-vertical {
+  & .swiper-button-prev, & .swiper-button-next, & ~ .swiper-button-prev, & ~ .swiper-button-next {
+    left: var(--swiper-navigation-top-offset, 50%);
+    margin-left: calc(0px - var(--swiper-navigation-size) / 2);
+    margin-top: 0;
+    right: auto;
+  }
+
+  & .swiper-button-prev, & ~ .swiper-button-prev {
+    top: var(--swiper-navigation-sides-offset, 4px);
+    bottom: auto;
+
+    & .swiper-navigation-icon {
+      transform: rotate(-90deg);
+    }
+  }
+
+  & .swiper-button-next, & ~ .swiper-button-next {
+    bottom: var(--swiper-navigation-sides-offset, 4px);
+    top: auto;
+
+    & .swiper-navigation-icon {
+      transform: rotate(90deg);
+    }
+  }
+}
+
+.swiper-pagination {
+  text-align: center;
+  z-index: 10;
+  transition: opacity .3s;
+  position: absolute;
+  transform: translate3d(0, 0, 0);
+
+  &.swiper-pagination-hidden {
+    opacity: 0;
+  }
+
+  .swiper-pagination-disabled > &, &.swiper-pagination-disabled {
+    display: none !important;
+  }
+}
+
+.swiper-pagination-fraction, .swiper-pagination-custom, .swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal {
+  bottom: var(--swiper-pagination-bottom, 8px);
+  top: var(--swiper-pagination-top, auto);
+  width: 100%;
+  left: 0;
+}
+
+.swiper-pagination-bullets-dynamic {
+  font-size: 0;
+  overflow: hidden;
+
+  & .swiper-pagination-bullet {
+    position: relative;
+    transform: scale(.33);
+  }
+
+  & .swiper-pagination-bullet-active, & .swiper-pagination-bullet-active-main {
+    transform: scale(1);
+  }
+
+  & .swiper-pagination-bullet-active-prev {
+    transform: scale(.66);
+  }
+
+  & .swiper-pagination-bullet-active-prev-prev {
+    transform: scale(.33);
+  }
+
+  & .swiper-pagination-bullet-active-next {
+    transform: scale(.66);
+  }
+
+  & .swiper-pagination-bullet-active-next-next {
+    transform: scale(.33);
+  }
+}
+
+.swiper-pagination-bullet {
+  width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
+  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
+  border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
+  background: var(--swiper-pagination-bullet-inactive-color, #000);
+  opacity: var(--swiper-pagination-bullet-inactive-opacity, .2);
+  display: inline-block;
+
+  button& {
+    box-shadow: none;
+    appearance: none;
+    border: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .swiper-pagination-clickable & {
+    cursor: pointer;
+  }
+
+  &:only-child {
+    display: none !important;
+  }
+}
+
+.swiper-pagination-bullet-active {
+  opacity: var(--swiper-pagination-bullet-opacity, 1);
+  background: var(--swiper-pagination-color, var(--swiper-theme-color));
+}
+
+.swiper-vertical > .swiper-pagination-bullets, .swiper-pagination-vertical.swiper-pagination-bullets {
+  right: var(--swiper-pagination-right, 8px);
+  left: var(--swiper-pagination-left, auto);
+  top: 50%;
+  transform: translate3d(0, -50%, 0);
+
+  & .swiper-pagination-bullet {
+    margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
+    display: block;
+  }
+
+  &.swiper-pagination-bullets-dynamic {
+    width: 8px;
+    top: 50%;
+    transform: translateY(-50%);
+
+    & .swiper-pagination-bullet {
+      transition: transform .2s, top .2s;
+      display: inline-block;
+    }
+  }
+}
+
+.swiper-horizontal > .swiper-pagination-bullets, .swiper-pagination-horizontal.swiper-pagination-bullets {
+  & .swiper-pagination-bullet {
+    margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
+  }
+
+  &.swiper-pagination-bullets-dynamic {
+    white-space: nowrap;
+    left: 50%;
+    transform: translateX(-50%);
+
+    & .swiper-pagination-bullet {
+      transition: transform .2s, left .2s;
+    }
+  }
+}
+
+.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
+  transition: transform .2s, right .2s;
+}
+
+.swiper-pagination-fraction {
+  color: var(--swiper-pagination-fraction-color, inherit);
+}
+
+.swiper-pagination-progressbar {
+  background: var(--swiper-pagination-progressbar-bg-color, #00000040);
+  position: absolute;
+
+  & .swiper-pagination-progressbar-fill {
+    background: var(--swiper-pagination-color, var(--swiper-theme-color));
+    transform-origin: 0 0;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    transform: scale(0);
+  }
+
+  .swiper-rtl & .swiper-pagination-progressbar-fill {
+    transform-origin: 100% 0;
+  }
+
+  .swiper-horizontal > &, &.swiper-pagination-horizontal, .swiper-vertical > &.swiper-pagination-progressbar-opposite, &.swiper-pagination-vertical.swiper-pagination-progressbar-opposite {
+    width: 100%;
+    height: var(--swiper-pagination-progressbar-size, 4px);
+    top: 0;
+    left: 0;
+  }
+
+  .swiper-vertical > &, &.swiper-pagination-vertical, .swiper-horizontal > &.swiper-pagination-progressbar-opposite, &.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite {
+    width: var(--swiper-pagination-progressbar-size, 4px);
+    height: 100%;
+    top: 0;
+    left: 0;
+  }
+}
+
+.swiper-pagination-lock {
+  display: none;
+}
+
+.swiper-scrollbar {
+  border-radius: var(--swiper-scrollbar-border-radius, 10px);
+  touch-action: none;
+  background: var(--swiper-scrollbar-bg-color, #0000001a);
+  position: relative;
+
+  .swiper-scrollbar-disabled > &, &.swiper-scrollbar-disabled {
+    display: none !important;
+  }
+
+  .swiper-horizontal > &, &.swiper-scrollbar-horizontal {
+    left: var(--swiper-scrollbar-sides-offset, 1%);
+    bottom: var(--swiper-scrollbar-bottom, 4px);
+    top: var(--swiper-scrollbar-top, auto);
+    z-index: 50;
+    height: var(--swiper-scrollbar-size, 4px);
+    width: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
+    position: absolute;
+  }
+
+  .swiper-vertical > &, &.swiper-scrollbar-vertical {
+    left: var(--swiper-scrollbar-left, auto);
+    right: var(--swiper-scrollbar-right, 4px);
+    top: var(--swiper-scrollbar-sides-offset, 1%);
+    z-index: 50;
+    width: var(--swiper-scrollbar-size, 4px);
+    height: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
+    position: absolute;
+  }
+}
+
+.swiper-scrollbar-drag {
+  background: var(--swiper-scrollbar-drag-bg-color, #00000080);
+  border-radius: var(--swiper-scrollbar-border-radius, 10px);
+  width: 100%;
+  height: 100%;
+  position: relative;
+  top: 0;
+  left: 0;
+}
+
+.swiper-scrollbar-cursor-drag {
+  cursor: move;
+}
+
+.swiper-scrollbar-lock {
+  display: none;
+}
+
+.swiper-zoom-container {
+  text-align: center;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  display: flex;
+
+  & > img, & > svg, & > canvas {
+    object-fit: contain;
+    max-width: 100%;
+    max-height: 100%;
+  }
+}
+
+.swiper-slide-zoomed {
+  cursor: move;
+  touch-action: none;
+}
+
+.swiper .swiper-notification {
+  pointer-events: none;
+  opacity: 0;
+  z-index: -1000;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.swiper-free-mode > .swiper-wrapper {
+  margin: 0 auto;
+  transition-timing-function: ease-out;
+}
+
+.swiper-grid > .swiper-wrapper {
+  flex-wrap: wrap;
+}
+
+.swiper-grid-column > .swiper-wrapper {
+  flex-flow: column wrap;
+}
+
+.swiper-fade {
+  &.swiper-free-mode {
+    & .swiper-slide {
+      transition-timing-function: ease-out;
+    }
+  }
+
+  & .swiper-slide {
+    pointer-events: none;
+    transition-property: opacity;
+
+    & .swiper-slide {
+      pointer-events: none;
+    }
+  }
+
+  & .swiper-slide-active {
+    pointer-events: auto;
+
+    & .swiper-slide-active {
+      pointer-events: auto;
+    }
+  }
+}
+
+.swiper.swiper-cube {
+  overflow: visible;
+}
+
+.swiper-cube {
+  & .swiper-slide {
+    pointer-events: none;
+    backface-visibility: hidden;
+    z-index: 1;
+    visibility: hidden;
+    transform-origin: 0 0;
+    width: 100%;
+    height: 100%;
+
+    & .swiper-slide {
+      pointer-events: none;
+    }
+  }
+
+  &.swiper-rtl .swiper-slide {
+    transform-origin: 100% 0;
+  }
+
+  & .swiper-slide-active {
+    &, & .swiper-slide-active {
+      pointer-events: auto;
+    }
+  }
+
+  & .swiper-slide-active, & .swiper-slide-next, & .swiper-slide-prev {
+    pointer-events: auto;
+    visibility: visible;
+  }
+
+  & .swiper-cube-shadow {
+    opacity: .6;
+    z-index: 0;
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+
+    &:before {
+      content: "";
+      filter: blur(50px);
+      background: #000;
+      position: absolute;
+      inset: 0;
+    }
+  }
+}
+
+.swiper-cube {
+  & .swiper-slide-next + .swiper-slide {
+    pointer-events: auto;
+    visibility: visible;
+  }
+}
+
+.swiper-cube {
+  & .swiper-slide-shadow-cube.swiper-slide-shadow-top, & .swiper-slide-shadow-cube.swiper-slide-shadow-bottom, & .swiper-slide-shadow-cube.swiper-slide-shadow-left, & .swiper-slide-shadow-cube.swiper-slide-shadow-right {
+    z-index: 0;
+    backface-visibility: hidden;
+  }
+}
+
+.swiper.swiper-flip {
+  overflow: visible;
+}
+
+.swiper-flip {
+  & .swiper-slide {
+    pointer-events: none;
+    backface-visibility: hidden;
+    z-index: 1;
+
+    & .swiper-slide {
+      pointer-events: none;
+    }
+  }
+
+  & .swiper-slide-active {
+    &, & .swiper-slide-active {
+      pointer-events: auto;
+    }
+  }
+}
+
+.swiper-flip {
+  & .swiper-slide-shadow-flip.swiper-slide-shadow-top, & .swiper-slide-shadow-flip.swiper-slide-shadow-bottom, & .swiper-slide-shadow-flip.swiper-slide-shadow-left, & .swiper-slide-shadow-flip.swiper-slide-shadow-right {
+    z-index: 0;
+    backface-visibility: hidden;
+  }
+}
+
+.swiper-creative {
+  & .swiper-slide {
+    backface-visibility: hidden;
+    transition-property: transform, opacity, height;
+    overflow: hidden;
+  }
+}
+
+.swiper.swiper-cards {
+  overflow: visible;
+}
+
+.swiper-cards {
+  & .swiper-slide {
+    transform-origin: bottom;
+    backface-visibility: hidden;
+    overflow: hidden;
+  }
+}
+
+.fr-image-gallery-item-contain {
+  padding: 8px;
+  object-fit: contain !important;
+}
+
+.fr-image-gallery-item-thumb-contain {
+  padding: 2px;
+  object-fit: contain !important;
+}
+
+.fr-image-gallery-scale-container {
+  z-index: 2;
+  background: #fff;
+  position: fixed;
+  inset: 8px;
+}
+
+.fr-image-gallery-scale-container img {
+  width: 100%;
+  height: 100%;
+  margin: auto;
+  padding: 8px;
+  object-fit: contain !important;
+}
+