@festo-ui/react 10.0.1-dev.847 → 10.0.1-dev.849

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

@@ -1,833 +0,0 @@
-: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;
-  }
-
-  & ::slotted(svg), & 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;
-
-  & ::slotted(.swiper-navigation-icon), & .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 {
-    & ::slotted(.swiper-navigation-icon), & .swiper-navigation-icon {
-      transform: rotate(180deg);
-    }
-  }
-
-  &.swiper-rtl .swiper-button-prev, &.swiper-rtl ~ .swiper-button-prev {
-    & ::slotted(.swiper-navigation-icon), & .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;
-
-    & ::slotted(.swiper-navigation-icon), & .swiper-navigation-icon {
-      transform: rotate(-90deg);
-    }
-  }
-
-  & .swiper-button-next, & ~ .swiper-button-next {
-    bottom: var(--swiper-navigation-sides-offset, 4px);
-    top: auto;
-
-    & ::slotted(.swiper-navigation-icon), & .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;
-}
-