@antscorp/antsomi-ui 2.0.101 → 2.0.102

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

@@ -3,140 +3,140 @@ import styled from 'styled-components';
 // Components
 import { Flex } from '@antscorp/antsomi-ui/es/components/atoms/Flex';
 import { globalToken, THEME } from '@antscorp/antsomi-ui/es/constants';
-export const TemplateSaveAsStyled = styled(Flex) `
-  /* max-width: 1177px; */
-  height: 100%;
-
-  position: relative;
-
-  /* &:has(canvas),
-  &:has(.image-upload-zone) { */
-  &:has(.is-editing) {
-    &:after {
-      content: '';
-      position: absolute;
-      inset: 0;
-      background-color: #fff;
-      opacity: 0.5;
-      z-index: 20;
-    }
-  }
-
-  .save-options-container {
-    padding: 15px 0;
-    margin-bottom: 20px;
-    border-bottom: 1px dashed #e5e5e5;
-  }
-
-  div:has(> .template-container) {
-    height: 100%;
-  }
-
-  .template-container {
-    flex: 1 0 680px;
-    /* flex: 1 1 60%; */
-    max-height: 60vh;
-    padding-right: 28px;
-    overflow-y: auto;
-  }
-
-  .template-container:has(+ .share-access-container) {
-    flex-grow: 0;
-  }
-
-  .categories-container {
-    margin-bottom: 20px;
-  }
-
-  /* &:not(:has(.share-access-container)) .categories-container {
-    width: 60%;
-  } */
-
-  .share-access-container {
-    flex: 1 1 40%;
-    padding-left: 20px;
-    margin-left: 5px;
-    /* max-height: 60vh; */
-    overflow-y: auto;
-    border-left: 1px solid #e5e5e5;
-
-    & > div {
-      max-width: 400px;
-    }
-  }
-
-  /* .antsomi-form-item .antsomi-form-item-row */
-  .field-container {
-    gap: 10px;
-  }
-
-  /* NOTE: Style for ant form */
-  .antsomi-form-item {
-    /* margin: 0; */
-  }
-  .antsomi-form-item-row {
-    gap: 10px;
-    .antsomi-form-item-label {
-      flex: 0 0 150px;
-    }
-    .antsomi-form-item-control-input {
-      width: 330px;
-    }
-  }
-
-  .field-title {
-    font-size: 12px;
-    flex: 0 0 150px;
-    span {
-      color: ${THEME.token?.red6};
-    }
-
-    &--start {
-      padding-top: 6px;
-    }
-    &--middle {
-      display: flex;
-      align-items: center;
-    }
-  }
-
-  div:has(> .field-input) {
-    width: 330px;
-  }
-
-  .field-input.antsomi-select {
-    margin-bottom: 24px;
-  }
-
-  .category-container {
-    flex: 1;
-    display: flex;
-    flex-wrap: wrap;
-    min-width: 510px;
-    max-width: 510px;
-    & > button {
-      height: 36px;
-      box-sizing: border-box;
-      padding: 0 10px;
-    }
-    /* display: grid;
-    grid-template-columns: repeat(2, minmax(100px, 250px)); */
-  }
-
-  .selected-category {
-    /* width: 240px; */
-    overflow: hidden;
-    box-sizing: border-box;
-    width: 250px;
-    height: 36px;
-    border: 1px solid #b8cfe6;
-    padding: 0 5px;
-    border-radius: ${globalToken?.borderRadiusXL}px;
-
-    & > .remove-btn {
-      cursor: pointer;
-    }
-  }
+export const TemplateSaveAsStyled = styled(Flex) `
+  /* max-width: 1177px; */
+  height: 100%;
+
+  position: relative;
+
+  /* &:has(canvas),
+  &:has(.image-upload-zone) { */
+  &:has(.is-editing) {
+    &:after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background-color: #fff;
+      opacity: 0.5;
+      z-index: 20;
+    }
+  }
+
+  .save-options-container {
+    padding: 15px 0;
+    margin-bottom: 20px;
+    border-bottom: 1px dashed #e5e5e5;
+  }
+
+  div:has(> .template-container) {
+    height: 100%;
+  }
+
+  .template-container {
+    flex: 1 0 680px;
+    /* flex: 1 1 60%; */
+    max-height: 60vh;
+    padding-right: 28px;
+    overflow-y: auto;
+  }
+
+  .template-container:has(+ .share-access-container) {
+    flex-grow: 0;
+  }
+
+  .categories-container {
+    margin-bottom: 20px;
+  }
+
+  /* &:not(:has(.share-access-container)) .categories-container {
+    width: 60%;
+  } */
+
+  .share-access-container {
+    flex: 1 1 40%;
+    padding-left: 20px;
+    margin-left: 5px;
+    /* max-height: 60vh; */
+    overflow-y: auto;
+    border-left: 1px solid #e5e5e5;
+
+    & > div {
+      max-width: 400px;
+    }
+  }
+
+  /* .antsomi-form-item .antsomi-form-item-row */
+  .field-container {
+    gap: 10px;
+  }
+
+  /* NOTE: Style for ant form */
+  .antsomi-form-item {
+    /* margin: 0; */
+  }
+  .antsomi-form-item-row {
+    gap: 10px;
+    .antsomi-form-item-label {
+      flex: 0 0 150px;
+    }
+    .antsomi-form-item-control-input {
+      width: 330px;
+    }
+  }
+
+  .field-title {
+    font-size: 12px;
+    flex: 0 0 150px;
+    span {
+      color: ${THEME.token?.red6};
+    }
+
+    &--start {
+      padding-top: 6px;
+    }
+    &--middle {
+      display: flex;
+      align-items: center;
+    }
+  }
+
+  div:has(> .field-input) {
+    width: 330px;
+  }
+
+  .field-input.antsomi-select {
+    margin-bottom: 24px;
+  }
+
+  .category-container {
+    flex: 1;
+    display: flex;
+    flex-wrap: wrap;
+    min-width: 510px;
+    max-width: 510px;
+    & > button {
+      height: 36px;
+      box-sizing: border-box;
+      padding: 0 10px;
+    }
+    /* display: grid;
+    grid-template-columns: repeat(2, minmax(100px, 250px)); */
+  }
+
+  .selected-category {
+    /* width: 240px; */
+    overflow: hidden;
+    box-sizing: border-box;
+    width: 250px;
+    height: 36px;
+    border: 1px solid #b8cfe6;
+    padding: 0 5px;
+    border-radius: ${globalToken?.borderRadiusXL}px;
+
+    & > .remove-btn {
+      cursor: pointer;
+    }
+  }
 `;
 // export const FormStyled = styled(Form)`
 //   position: relative;

package/es/components/molecules/ThumbnailCard/styled.js

@@ -4,96 +4,96 @@ import styled from 'styled-components';
 import skeletonBackground from '../../../assets/images/background/skeleton-background.png';
 // Constants
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
-export const ThumbnailCardWrapper = styled.div `
-  background-color: ${globalToken?.colorBgSkeleton};
-  padding: 10px;
-  border-radius: ${globalToken?.borderRadius}px;
-  position: relative;
-  box-sizing: border-box;
-  width: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid ${globalToken?.blue1_1};
-
-  :hover {
-    .center-action {
-      display: flex;
-      max-width: 90%;
-
-      button {
-        max-width: 100%;
-      }
-    }
-
-    .top-right-corner-action {
-      display: flex;
-    }
-
-    .backdrop {
-      opacity: 0.5 !important;
-    }
-  }
-
-  .screen {
-    width: 100%;
-    height: 100%;
-
-    ${p => p.$showSkeleton ? `background: center / cover no-repeat url(${skeletonBackground});` : ''}
-
-    img {
-      width: 100%;
-      height: 100%;
-      object-fit: contain;
-    }
-  }
-
-  .center-action {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    display: none;
-    z-index: 12;
-
-    button {
-      width: fit-content;
-    }
-  }
-
-  .top-right-corner-action {
-    position: absolute;
-    top: 16px;
-    right: 16px;
-    display: none;
-    align-items: center;
-    gap: 12px;
-    z-index: 12;
-
-    button {
-      background: #00000040;
-
-      :hover {
-        background: none !important;
-        background-color: black !important;
-      }
-    }
-  }
-
-  .backdrop {
-    border-radius: ${globalToken?.borderRadius}px;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    background-color: black;
-    opacity: 0;
-    transition: opacity 0.5s;
-    z-index: 10;
-    top: 0;
-    left: 0;
-  }
-
-  .thumbnail__loading {
-    position: absolute;
-  }
+export const ThumbnailCardWrapper = styled.div `
+  background-color: ${globalToken?.colorBgSkeleton};
+  padding: 10px;
+  border-radius: ${globalToken?.borderRadius}px;
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 1px solid ${globalToken?.blue1_1};
+
+  :hover {
+    .center-action {
+      display: flex;
+      max-width: 90%;
+
+      button {
+        max-width: 100%;
+      }
+    }
+
+    .top-right-corner-action {
+      display: flex;
+    }
+
+    .backdrop {
+      opacity: 0.5 !important;
+    }
+  }
+
+  .screen {
+    width: 100%;
+    height: 100%;
+
+    ${p => p.$showSkeleton ? `background: center / cover no-repeat url(${skeletonBackground});` : ''}
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+  }
+
+  .center-action {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    display: none;
+    z-index: 12;
+
+    button {
+      width: fit-content;
+    }
+  }
+
+  .top-right-corner-action {
+    position: absolute;
+    top: 16px;
+    right: 16px;
+    display: none;
+    align-items: center;
+    gap: 12px;
+    z-index: 12;
+
+    button {
+      background: #00000040;
+
+      :hover {
+        background: none !important;
+        background-color: black !important;
+      }
+    }
+  }
+
+  .backdrop {
+    border-radius: ${globalToken?.borderRadius}px;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-color: black;
+    opacity: 0;
+    transition: opacity 0.5s;
+    z-index: 10;
+    top: 0;
+    left: 0;
+  }
+
+  .thumbnail__loading {
+    position: absolute;
+  }
 `;

package/es/components/molecules/Tree/styled.js

@@ -1,43 +1,43 @@
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
 import { Tree } from 'antd';
 import styled from 'styled-components';
-export const StyledTree = styled(Tree) `
-  .antsomi-tree-treenode {
-    .antsomi-tree-switcher {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      order: 10;
-    }
-
-    .antsomi-tree-iconEle.antsomi-tree-icon__customize {
-      display: inline-flex;
-      align-items: center;
-    }
-  }
+export const StyledTree = styled(Tree) `
+  .antsomi-tree-treenode {
+    .antsomi-tree-switcher {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      order: 10;
+    }
+
+    .antsomi-tree-iconEle.antsomi-tree-icon__customize {
+      display: inline-flex;
+      align-items: center;
+    }
+  }
 `;
-export const StyledTreeDirectory = styled(Tree.DirectoryTree) `
-  .antsomi-tree-treenode {
-    .antsomi-tree-switcher {
-      display: flex;
-      order: 10;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-
-    .antsomi-tree-iconEle.antsomi-tree-icon__customize {
-      display: inline-flex;
-      align-items: center;
-
-      & svg {
-        width: 16px;
-        height: 16px;
-      }
-    }
-
-    &::before {
-      border-radius: ${globalToken?.borderRadius}px;
-    }
-  }
+export const StyledTreeDirectory = styled(Tree.DirectoryTree) `
+  .antsomi-tree-treenode {
+    .antsomi-tree-switcher {
+      display: flex;
+      order: 10;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .antsomi-tree-iconEle.antsomi-tree-icon__customize {
+      display: inline-flex;
+      align-items: center;
+
+      & svg {
+        width: 16px;
+        height: 16px;
+      }
+    }
+
+    &::before {
+      border-radius: ${globalToken?.borderRadius}px;
+    }
+  }
 `;