@antscorp/antsomi-ui 2.0.101 → 2.0.102

package/es/components/molecules/TemplateSaveAs/components/ImageSlider/styled.js

@@ -4,285 +4,285 @@ import { Flex } from '@antscorp/antsomi-ui/es/components/atoms/Flex';
 // Assets
 import SkeletonBg from '@antscorp/antsomi-ui/es/assets/images/background/skeleton-background.png';
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
-const backgroundImage = css `
-  ${() => css `
-    &::after {
-      content: '';
-      position: absolute;
-      width: 90%;
-      height: 90%;
-      background: url(${SkeletonBg}) no-repeat center center;
-      background-size: contain;
-      z-index: 0;
-    }
-  `}
+const backgroundImage = css `
+  ${() => css `
+    &::after {
+      content: '';
+      position: absolute;
+      width: 90%;
+      height: 90%;
+      background: url(${SkeletonBg}) no-repeat center center;
+      background-size: contain;
+      z-index: 0;
+    }
+  `}
 `;
-const setWidthHeight = ({ w, h }) => `
-  width: ${w};
-  height: ${h};
+const setWidthHeight = ({ w, h }) => `
+  width: ${w};
+  height: ${h};
 `;
-const centerBlock = css `
-  display: flex;
-  justify-content: center;
-  align-items: center;
+const centerBlock = css `
+  display: flex;
+  justify-content: center;
+  align-items: center;
 `;
-export const ImageSliderStyled = styled(Flex) `
-  /* NOTE: Style for prev and next button in thumbnail slider */
-  position: relative;
-  margin-top: 6px;
-
-  .edit-thumbnail-container {
-    position: relative;
-  }
-
-  .image-resize-action {
-    margin-top: 20px;
-    margin-bottom: 40px;
-  }
-
-  .image-resize-wrapper {
-    background: ${props => props.$skeleton ? `url(${SkeletonBg}) no-repeat center center` : 'unset'};
-
-    background-size: 90% 90%;
-  }
-
-  .image-resize-wrapper.visibility-hidden {
-    visibility: hidden;
-  }
-
-  .image-resize-wrapper,
-  .image-upload-zone {
-    border: 1px solid ${THEME.token?.blue1_1};
-    border-radius: ${THEME.token?.borderRadius}px;
-    margin-top: 0;
-    overflow: hidden;
-  }
-
-  &:has(.image-upload-zone) #image-editor {
-    display: none;
-  }
-
-  .image-upload-zone {
-    justify-content: center;
-    align-items: center;
-    gap: 20px;
-
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: ${props => `${props.$imageWidth}px`};
-    height: ${props => `${props.$imageHeight}px`};
-    background: ${THEME.token?.colorBgSkeleton};
-
-    & > i {
-      color: ${THEME.token?.bw8};
-    }
-
-    & > div > span:last-child {
-      color: ${THEME.token?.bw7};
-    }
-
-    &:not(.hide-skeleton) {
+export const ImageSliderStyled = styled(Flex) `
+  /* NOTE: Style for prev and next button in thumbnail slider */
+  position: relative;
+  margin-top: 6px;
+
+  .edit-thumbnail-container {
+    position: relative;
+  }
+
+  .image-resize-action {
+    margin-top: 20px;
+    margin-bottom: 40px;
+  }
+
+  .image-resize-wrapper {
+    background: ${props => props.$skeleton ? `url(${SkeletonBg}) no-repeat center center` : 'unset'};
+
+    background-size: 90% 90%;
+  }
+
+  .image-resize-wrapper.visibility-hidden {
+    visibility: hidden;
+  }
+
+  .image-resize-wrapper,
+  .image-upload-zone {
+    border: 1px solid ${THEME.token?.blue1_1};
+    border-radius: ${THEME.token?.borderRadius}px;
+    margin-top: 0;
+    overflow: hidden;
+  }
+
+  &:has(.image-upload-zone) #image-editor {
+    display: none;
+  }
+
+  .image-upload-zone {
+    justify-content: center;
+    align-items: center;
+    gap: 20px;
+
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: ${props => `${props.$imageWidth}px`};
+    height: ${props => `${props.$imageHeight}px`};
+    background: ${THEME.token?.colorBgSkeleton};
+
+    & > i {
+      color: ${THEME.token?.bw8};
+    }
+
+    & > div > span:last-child {
+      color: ${THEME.token?.bw7};
+    }
+
+    &:not(.hide-skeleton) {
       background: ${props => props.$skeleton
     ? `url(${SkeletonBg}) no-repeat center center`
-    : THEME.token?.colorBgSkeleton};
-
-      background-size: 90% 90%;
-    }
-  }
-
-  .change-preview-button {
-    ${centerBlock}
-    position: absolute;
-    top: 115px;
-    transform: translateY(-50%);
-    font-size: 24px;
-    color: #fafafa;
-
-    cursor: pointer;
-    z-index: 1;
-
-    &--left {
-      left: 6px;
-    }
-    &--right {
-      right: 6px;
-    }
-  }
-
-  .slider-button {
-    ${centerBlock}
-    position: absolute;
-    bottom: 36px;
-    transform: translateY(50%);
-
-    font-size: 12px;
-
-    ${setWidthHeight({ w: '24px', h: '24px' })}
-    border-radius: 999px;
-    background-color: #fff;
-
-    cursor: pointer;
-    z-index: 1;
-
-    &--left {
-      left: 2px;
-    }
-    &--right {
-      right: 2px;
-    }
-  }
-
-  .slider-button {
-    display: none;
-  }
-
-  .thumbnail-preview-container:has(.antsomi-spin),
-  .thumbnail-slider-container:has(.antsomi-spin) {
-    box-shadow: rgba(159, 180, 180, 0.2) 0px 2px 8px;
-  }
-
-  .thumbnail-preview-container .antsomi-spin,
-  .thumbnail-slider-container .antsomi-spin {
-    width: 100%;
-    ${centerBlock}
-    background-color: #fcfcfc;
-  }
-
-  &:has(.thumbnail-slider-container:hover),
-  &:has(.slider-button:hover) {
-    .slider-button {
-      display: flex;
-    }
-  }
-
-  .thumbnail-preview-container {
-    width: ${({ $imageWidth }) => `${$imageWidth}px`};
-    overflow-x: scroll;
-    scrollbar-width: none;
-
-    /* NOTE: set border-radius for parent of thumbnail list make better UI when scroll horizontal */
-    border-radius: ${THEME.token?.borderRadius}px;
-
-    & > div {
-      overflow: hidden;
-    }
-
-    .antsomi-spin {
-      height: ${({ $imageHeight }) => `${$imageHeight}px`};
-    }
-  }
-
-  .thumbnail-slider-container {
-    position: relative;
-    width: ${({ $imageWidth }) => `${$imageWidth}px`};
-    overflow-x: scroll;
-    scrollbar-width: none;
-
-    .antsomi-spin {
-      height: 72px;
-    }
-  }
-
-  &:has(> .thumbnail-preview-container) {
-    .image-container--big::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background-color: transparent;
-      z-index: 2;
-      transition: background-color 150ms ease-in-out;
-    }
-
-    .image-container--big:hover::before {
-      background-color: rgba(0, 0, 0, 0.5);
-    }
-  }
-
-  .image-container {
-    &--big,
-    &--small {
-      position: relative;
-      box-sizing: border-box;
-      background: ${THEME.token?.colorBgSkeleton};
-      border: 1px solid ${THEME.token?.blue1_1};
-      border-radius: ${THEME.token?.borderRadius}px;
-      overflow: hidden;
-
-      ${centerBlock}
-      &:not(.hide-skeleton) {
-        ${backgroundImage}
-      }
-
-      img {
-        position: relative;
-        object-fit: contain;
-        z-index: 1;
-      }
-
-      div:has(> img) {
-        display: flex;
-        align-items: center;
-      }
-    }
-
-    &--big {
-      width: 100%;
-      height: ${({ $imageHeight }) => `${$imageHeight}px`};
-      flex-shrink: 0;
-
-      position: relative;
-      overflow: hidden;
-    }
-
-    &--small {
-      box-sizing: border-box;
-      width: ${props => `${props.$smallImageWidth}px`};
-
-      height: 72px;
-      flex-shrink: 0;
-
-      /* border: 2px solid #e5e5e5; */
-      border-width: 2px;
-      border-radius: ${THEME.token?.borderRadius}px;
-      user-select: none;
-      cursor: pointer;
-    }
-    &--selected {
-      border: 2px solid var(--primary-color);
-    }
-  }
-
-  .default-checkbox {
-    position: absolute;
-    top: 10px;
-    left: 10px;
-    opacity: 0;
-    z-index: 3;
-    transition: opacity 150ms ease-in-out;
-  }
-
-  .set-default-button {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    z-index: 2;
-    opacity: 0;
-    transition: opacity 150ms ease-in-out;
-
-    button:not(.antsomi-btn-icon-only) {
-      height: unset !important;
-    }
-  }
-
-  .image-container--big:hover {
-    .set-default-button,
-    .default-checkbox {
-      opacity: 1;
-    }
-  }
+    : THEME.token?.colorBgSkeleton};
+
+      background-size: 90% 90%;
+    }
+  }
+
+  .change-preview-button {
+    ${centerBlock}
+    position: absolute;
+    top: 115px;
+    transform: translateY(-50%);
+    font-size: 24px;
+    color: #fafafa;
+
+    cursor: pointer;
+    z-index: 1;
+
+    &--left {
+      left: 6px;
+    }
+    &--right {
+      right: 6px;
+    }
+  }
+
+  .slider-button {
+    ${centerBlock}
+    position: absolute;
+    bottom: 36px;
+    transform: translateY(50%);
+
+    font-size: 12px;
+
+    ${setWidthHeight({ w: '24px', h: '24px' })}
+    border-radius: 999px;
+    background-color: #fff;
+
+    cursor: pointer;
+    z-index: 1;
+
+    &--left {
+      left: 2px;
+    }
+    &--right {
+      right: 2px;
+    }
+  }
+
+  .slider-button {
+    display: none;
+  }
+
+  .thumbnail-preview-container:has(.antsomi-spin),
+  .thumbnail-slider-container:has(.antsomi-spin) {
+    box-shadow: rgba(159, 180, 180, 0.2) 0px 2px 8px;
+  }
+
+  .thumbnail-preview-container .antsomi-spin,
+  .thumbnail-slider-container .antsomi-spin {
+    width: 100%;
+    ${centerBlock}
+    background-color: #fcfcfc;
+  }
+
+  &:has(.thumbnail-slider-container:hover),
+  &:has(.slider-button:hover) {
+    .slider-button {
+      display: flex;
+    }
+  }
+
+  .thumbnail-preview-container {
+    width: ${({ $imageWidth }) => `${$imageWidth}px`};
+    overflow-x: scroll;
+    scrollbar-width: none;
+
+    /* NOTE: set border-radius for parent of thumbnail list make better UI when scroll horizontal */
+    border-radius: ${THEME.token?.borderRadius}px;
+
+    & > div {
+      overflow: hidden;
+    }
+
+    .antsomi-spin {
+      height: ${({ $imageHeight }) => `${$imageHeight}px`};
+    }
+  }
+
+  .thumbnail-slider-container {
+    position: relative;
+    width: ${({ $imageWidth }) => `${$imageWidth}px`};
+    overflow-x: scroll;
+    scrollbar-width: none;
+
+    .antsomi-spin {
+      height: 72px;
+    }
+  }
+
+  &:has(> .thumbnail-preview-container) {
+    .image-container--big::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: transparent;
+      z-index: 2;
+      transition: background-color 150ms ease-in-out;
+    }
+
+    .image-container--big:hover::before {
+      background-color: rgba(0, 0, 0, 0.5);
+    }
+  }
+
+  .image-container {
+    &--big,
+    &--small {
+      position: relative;
+      box-sizing: border-box;
+      background: ${THEME.token?.colorBgSkeleton};
+      border: 1px solid ${THEME.token?.blue1_1};
+      border-radius: ${THEME.token?.borderRadius}px;
+      overflow: hidden;
+
+      ${centerBlock}
+      &:not(.hide-skeleton) {
+        ${backgroundImage}
+      }
+
+      img {
+        position: relative;
+        object-fit: contain;
+        z-index: 1;
+      }
+
+      div:has(> img) {
+        display: flex;
+        align-items: center;
+      }
+    }
+
+    &--big {
+      width: 100%;
+      height: ${({ $imageHeight }) => `${$imageHeight}px`};
+      flex-shrink: 0;
+
+      position: relative;
+      overflow: hidden;
+    }
+
+    &--small {
+      box-sizing: border-box;
+      width: ${props => `${props.$smallImageWidth}px`};
+
+      height: 72px;
+      flex-shrink: 0;
+
+      /* border: 2px solid #e5e5e5; */
+      border-width: 2px;
+      border-radius: ${THEME.token?.borderRadius}px;
+      user-select: none;
+      cursor: pointer;
+    }
+    &--selected {
+      border: 2px solid var(--primary-color);
+    }
+  }
+
+  .default-checkbox {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    opacity: 0;
+    z-index: 3;
+    transition: opacity 150ms ease-in-out;
+  }
+
+  .set-default-button {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 2;
+    opacity: 0;
+    transition: opacity 150ms ease-in-out;
+
+    button:not(.antsomi-btn-icon-only) {
+      height: unset !important;
+    }
+  }
+
+  .image-container--big:hover {
+    .set-default-button,
+    .default-checkbox {
+      opacity: 1;
+    }
+  }
 `;