plain-design 1.0.0-beta.70 → 1.0.0-beta.72

package/src/packages/components/ImagePreviewer/image-previewer.scss

@@ -1,244 +1,244 @@
-.image-previewer-component {
-  position: relative;
-  height: 100%;
-  width: 100%;
-  margin: 0 !important;
-  padding: 0 !important;
-  user-select: none;
-
-  .image-previewer-component-mask {
-    position: absolute;
-    inset: 0;
-    z-index: 1;
-    opacity: 1;
-    transition: opacity 300ms linear;
-    content: '';
-  }
-
-  @include comp(carousel) {
-    position: relative;
-    z-index: 2;
-    box-sizing: border-box;
-
-    .carousel-item-inner {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .carousel-indicator, .carousel-switch-button-prev, .carousel-switch-button-next, img {
-      pointer-events: auto;
-    }
-    .carousel-indicator {
-      transition: none;
-      bottom: -12px;
-    }
-  }
-
-  img {
-    display: inline-block;
-    object-fit: contain;
-
-    &[data-direction=horizontal] {
-      width: 100%;
-    }
-
-    &[data-direction=vertical] {
-      height: 100%;
-    }
-  }
-
-  &.image-previewer-component-waiting {
-    .image-previewer-component-mask, .image-previewer-component-gallery {
-      opacity: 0;
-    }
-  }
-
-  .image-previewer-component-gallery {
-    position: relative;
-    z-index: 2;
-    width: 100%;
-    transition: opacity 300ms linear;
-    user-select: none;
-
-    .image-previewer-component-gallery-container {
-      overflow: hidden;
-      height: 100%;
-      width: 100%;
-    }
-
-    .image-previewer-component-gallery-item {
-      display: inline-block;
-      height: 100%;
-      padding: 2px 1px;
-      cursor: pointer;
-      box-sizing: border-box;
-      position: relative;
-      background-color: #DDDDDD;
-
-      img {
-        height: 100%;
-        width: 100%;
-        object-fit: cover;
-        object-position: center;
-        position: relative;
-        z-index: 2;
-      }
-
-      &[data-active=true] {
-        &:before {
-          position: absolute;
-          inset: 0 -1px;
-          content: '';
-          background-color: gold;
-          z-index: 1;
-        }
-      }
-
-      &:first-child {
-        padding-left: 2px;
-
-        &[data-active=true] {
-          &:before {
-            top: 0;
-            left: 0;
-            right: -1px;
-            bottom: 0;
-          }
-        }
-      }
-
-      &:last-child {
-        padding-right: 2px;
-
-        &[data-active=true] {
-          &:before {
-            top: 0;
-            right: 0;
-            left: -1px;
-            bottom: 0;
-          }
-        }
-      }
-    }
-
-    .image-previewer-component-gallery-scroller {
-      position: absolute;
-      inset: 0;
-      pointer-events: none;
-      display: flex;
-      align-items: stretch;
-      justify-content: space-between;
-      z-index: 3;
-
-      .image-previewer-component-gallery-scroller-prev, .image-previewer-component-gallery-scroller-next {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 50px;
-        color: white;
-        font-size: 20px;
-        pointer-events: auto;
-        cursor: pointer;
-        position: relative;
-
-        &:before {
-          position: absolute;
-          inset: 0;
-          content: '';
-          opacity: 0.5;
-          transition: opacity 300ms ease;
-          z-index: 1;
-        }
-
-        @include comp(icon) {
-          position: relative;
-          z-index: 2;
-        }
-      }
-
-      .image-previewer-component-gallery-scroller-prev {
-        &:before {
-          background: linear-gradient(to right, black, transparent);
-        }
-
-        &:hover {
-          &:before {
-            opacity: 1;
-          }
-        }
-      }
-
-      .image-previewer-component-gallery-scroller-next {
-        &:before {
-          background: linear-gradient(to left, black, transparent);
-        }
-
-        &:hover {
-          &:before {
-            opacity: 1;
-          }
-        }
-      }
-    }
-
-    &.image-previewer-component-gallery-show-scroller {
-      justify-content: flex-start;
-    }
-
-    &:not(.image-previewer-component-gallery-show-scroller) {
-      .scroll-wrapper {
-        text-align: center;
-      }
-    }
-
-    .previewer-loading {
-      position: absolute;
-      inset: 0;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 100%;
-      height: 100%;
-      color: white;
-      font-size: 16px;
-      z-index: 3;
-      background-color: black;
-    }
-  }
-
-  .image-previewer-button-bar {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    pointer-events: none;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    z-index: 3;
-    padding: 16px;
-
-    .image-previewer-button {
-      pointer-events: auto;
-      color: white;
-      height: 50px;
-      width: 50px;
-      font-size: 28px;
-      background-color: rgba(black, 0.2);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      cursor: pointer;
-      transition: background-color ease 300ms;
-
-      & + .image-previewer-button {
-        margin-left: 1px;
-      }
-
-      &:hover {
-        background-color: rgba(black, 0.3);
-      }
-    }
-  }
-}
+.image-previewer-component {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  margin: 0 !important;
+  padding: 0 !important;
+  user-select: none;
+
+  .image-previewer-component-mask {
+    position: absolute;
+    inset: 0;
+    z-index: 1;
+    opacity: 1;
+    transition: opacity 300ms linear;
+    content: '';
+  }
+
+  @include comp(carousel) {
+    position: relative;
+    z-index: 2;
+    box-sizing: border-box;
+
+    .carousel-item-inner {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .carousel-indicator, .carousel-switch-button-prev, .carousel-switch-button-next, img {
+      pointer-events: auto;
+    }
+    .carousel-indicator {
+      transition: none;
+      bottom: -12px;
+    }
+  }
+
+  img {
+    display: inline-block;
+    object-fit: contain;
+
+    &[data-direction=horizontal] {
+      width: 100%;
+    }
+
+    &[data-direction=vertical] {
+      height: 100%;
+    }
+  }
+
+  &.image-previewer-component-waiting {
+    .image-previewer-component-mask, .image-previewer-component-gallery {
+      opacity: 0;
+    }
+  }
+
+  .image-previewer-component-gallery {
+    position: relative;
+    z-index: 2;
+    width: 100%;
+    transition: opacity 300ms linear;
+    user-select: none;
+
+    .image-previewer-component-gallery-container {
+      overflow: hidden;
+      height: 100%;
+      width: 100%;
+    }
+
+    .image-previewer-component-gallery-item {
+      display: inline-block;
+      height: 100%;
+      padding: 2px 1px;
+      cursor: pointer;
+      box-sizing: border-box;
+      position: relative;
+      background-color: #DDDDDD;
+
+      img {
+        height: 100%;
+        width: 100%;
+        object-fit: cover;
+        object-position: center;
+        position: relative;
+        z-index: 2;
+      }
+
+      &[data-active=true] {
+        &:before {
+          position: absolute;
+          inset: 0 -1px;
+          content: '';
+          background-color: gold;
+          z-index: 1;
+        }
+      }
+
+      &:first-child {
+        padding-left: 2px;
+
+        &[data-active=true] {
+          &:before {
+            top: 0;
+            left: 0;
+            right: -1px;
+            bottom: 0;
+          }
+        }
+      }
+
+      &:last-child {
+        padding-right: 2px;
+
+        &[data-active=true] {
+          &:before {
+            top: 0;
+            right: 0;
+            left: -1px;
+            bottom: 0;
+          }
+        }
+      }
+    }
+
+    .image-previewer-component-gallery-scroller {
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+      display: flex;
+      align-items: stretch;
+      justify-content: space-between;
+      z-index: 3;
+
+      .image-previewer-component-gallery-scroller-prev, .image-previewer-component-gallery-scroller-next {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 50px;
+        color: white;
+        font-size: 20px;
+        pointer-events: auto;
+        cursor: pointer;
+        position: relative;
+
+        &:before {
+          position: absolute;
+          inset: 0;
+          content: '';
+          opacity: 0.5;
+          transition: opacity 300ms ease;
+          z-index: 1;
+        }
+
+        @include comp(icon) {
+          position: relative;
+          z-index: 2;
+        }
+      }
+
+      .image-previewer-component-gallery-scroller-prev {
+        &:before {
+          background: linear-gradient(to right, black, transparent);
+        }
+
+        &:hover {
+          &:before {
+            opacity: 1;
+          }
+        }
+      }
+
+      .image-previewer-component-gallery-scroller-next {
+        &:before {
+          background: linear-gradient(to left, black, transparent);
+        }
+
+        &:hover {
+          &:before {
+            opacity: 1;
+          }
+        }
+      }
+    }
+
+    &.image-previewer-component-gallery-show-scroller {
+      justify-content: flex-start;
+    }
+
+    &:not(.image-previewer-component-gallery-show-scroller) {
+      .scroll-wrapper {
+        text-align: center;
+      }
+    }
+
+    .previewer-loading {
+      position: absolute;
+      inset: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      color: white;
+      font-size: 16px;
+      z-index: 3;
+      background-color: black;
+    }
+  }
+
+  .image-previewer-button-bar {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    pointer-events: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 3;
+    padding: 16px;
+
+    .image-previewer-button {
+      pointer-events: auto;
+      color: white;
+      height: 50px;
+      width: 50px;
+      font-size: 28px;
+      background-color: rgba(black, 0.2);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      transition: background-color ease 300ms;
+
+      & + .image-previewer-button {
+        margin-left: 1px;
+      }
+
+      &:hover {
+        background-color: rgba(black, 0.3);
+      }
+    }
+  }
+}