@antscorp/antsomi-ui 2.0.109 → 2.0.110

package/es/components/atoms/SlideBar/styled.js

@@ -6,209 +6,209 @@ import { THEME } from '@antscorp/antsomi-ui/es/constants';
 import { WIDTH_SLIDE_ITEM } from './constants';
 // Utils
 import { getOffsetSize, getOffsetSizeAdd } from './utils';
-export const SliderWrapper = styled.div `
-  position: relative;
-  display: flex;
-  align-items: center;
-  border-radius: 4px;
-  border: 1px solid ${THEME.token?.accent1};
-  box-sizing: border-box;
-  // max-width: ${props => (props.isViewMode ? '100%' : 'calc(100% - 40px)')};
-  width: calc(
-    100% - ${({ size }) => getOffsetSizeAdd(size)}px - ${({ size }) => getOffsetSize(size) * 2}px
-  );
-  flex: 1;
-  height: ${({ size }) => getOffsetSize(size)}px;
-  padding: 0px ${({ size }) => getOffsetSize(size)}px;
-
-  .btn-action-slide-template {
-    width: ${({ size }) => getOffsetSize(size)}px !important;
-    height: ${({ size }) => getOffsetSize(size) - 2}px !important;
-    box-sizing: border-box;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    &.btn-arrow-left {
-      position: absolute;
-      top: 0px;
-      left: 0;
-      border-right: 1px solid ${THEME.token?.accent1};
-    }
-
-    &.btn-arrow-right {
-      position: absolute;
-      top: 0px;
-      right: 0px;
-      border-left: 1px solid ${THEME.token?.accent1};
-    }
-  }
-
-  &.slider-wrapper--borderless {
-    border-radius: unset;
-    box-shadow: 0px 3px 3px 0px rgba(0, 46, 89, 0.1);
-    border: none;
-    border-bottom: 1px solid ${THEME.token?.bw4};
-
-    #wrapper-overflow {
-      height: ${({ size }) => getOffsetSize(size) - 1}px;
-      background-color: ${THEME.token?.bw2};
-    }
-
-    .slide-item {
-      background-color: transparent;
-      border-top: none;
-      border-right-color: ${THEME.token?.bw3};
-
-      &.slide-item--active {
-        background-color: ${THEME.token?.bw0};
-      }
-
-      &.slide-item--badge-number {
-        justify-content: center;
-        padding: 0px;
-        width: ${({ size }) => getOffsetSize(size)}px;
-        height: ${({ size }) => getOffsetSize(size) - 1}px;
-        border-bottom: none;
-
-        &.slide-item--active {
-          width: 90px;
-        }
-
-        .slide-item__text {
-          &--active {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 10px;
-            color: ${THEME.token?.colorText};
-          }
-
-          &--circle {
-            font-size: 14px;
-            font-weight: 700;
-            color: ${THEME.token?.colorPrimary};
-            line-height: 22px;
-            text-align: center;
-            display: inline-block;
-            background-color: ${THEME.token?.bw0};
-            width: 24px;
-            height: 24px;
-            border-radius: 50%;
-            border: 1px solid ${THEME.token?.blue1};
-          }
-
-          &--icon {
-            color: ${THEME.token?.bw0};
-            background: ${THEME.token?.colorPrimary};
-            width: 24px;
-            height: 24px;
-            border-radius: 50%;
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-          }
-        }
-      }
-    }
-
-    .btn-action-slide-template {
-      height: ${({ size }) => getOffsetSize(size)}px !important;
-    }
-
-    .btn-action-slide-template.btn-arrow-left,
-    .btn-action-slide-template.btn-arrow-right {
-      border-right-color: ${THEME.token?.bw4};
-    }
-  }
+export const SliderWrapper = styled.div `
+  position: relative;
+  display: flex;
+  align-items: center;
+  border-radius: 4px;
+  border: 1px solid ${THEME.token?.accent1};
+  box-sizing: border-box;
+  // max-width: ${props => (props.isViewMode ? '100%' : 'calc(100% - 40px)')};
+  width: calc(
+    100% - ${({ size }) => getOffsetSizeAdd(size)}px - ${({ size }) => getOffsetSize(size) * 2}px
+  );
+  flex: 1;
+  height: ${({ size }) => getOffsetSize(size)}px;
+  padding: 0px ${({ size }) => getOffsetSize(size)}px;
+
+  .btn-action-slide-template {
+    width: ${({ size }) => getOffsetSize(size)}px !important;
+    height: ${({ size }) => getOffsetSize(size) - 2}px !important;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    &.btn-arrow-left {
+      position: absolute;
+      top: 0px;
+      left: 0;
+      border-right: 1px solid ${THEME.token?.accent1};
+    }
+
+    &.btn-arrow-right {
+      position: absolute;
+      top: 0px;
+      right: 0px;
+      border-left: 1px solid ${THEME.token?.accent1};
+    }
+  }
+
+  &.slider-wrapper--borderless {
+    border-radius: unset;
+    box-shadow: 0px 3px 3px 0px rgba(0, 46, 89, 0.1);
+    border: none;
+    border-bottom: 1px solid ${THEME.token?.bw4};
+
+    #wrapper-overflow {
+      height: ${({ size }) => getOffsetSize(size) - 1}px;
+      background-color: ${THEME.token?.bw2};
+    }
+
+    .slide-item {
+      background-color: transparent;
+      border-top: none;
+      border-right-color: ${THEME.token?.bw3};
+
+      &.slide-item--active {
+        background-color: ${THEME.token?.bw0};
+      }
+
+      &.slide-item--badge-number {
+        justify-content: center;
+        padding: 0px;
+        width: ${({ size }) => getOffsetSize(size)}px;
+        height: ${({ size }) => getOffsetSize(size) - 1}px;
+        border-bottom: none;
+
+        &.slide-item--active {
+          width: 90px;
+        }
+
+        .slide-item__text {
+          &--active {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 10px;
+            color: ${THEME.token?.colorText};
+          }
+
+          &--circle {
+            font-size: 14px;
+            font-weight: 700;
+            color: ${THEME.token?.colorPrimary};
+            line-height: 22px;
+            text-align: center;
+            display: inline-block;
+            background-color: ${THEME.token?.bw0};
+            width: 24px;
+            height: 24px;
+            border-radius: 50%;
+            border: 1px solid ${THEME.token?.blue1};
+          }
+
+          &--icon {
+            color: ${THEME.token?.bw0};
+            background: ${THEME.token?.colorPrimary};
+            width: 24px;
+            height: 24px;
+            border-radius: 50%;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+          }
+        }
+      }
+    }
+
+    .btn-action-slide-template {
+      height: ${({ size }) => getOffsetSize(size)}px !important;
+    }
+
+    .btn-action-slide-template.btn-arrow-left,
+    .btn-action-slide-template.btn-arrow-right {
+      border-right-color: ${THEME.token?.bw4};
+    }
+  }
 `;
-export const WrapperOverflow = styled.div `
-  overflow-x: auto;
-  overflow-y: hidden;
-  flex: 1;
-
-  &::-webkit-scrollbar {
-    -webkit-appearance: none;
-    background-color: #eee;
-    width: 0px;
-    height: 0px;
-  }
+export const WrapperOverflow = styled.div `
+  overflow-x: auto;
+  overflow-y: hidden;
+  flex: 1;
+
+  &::-webkit-scrollbar {
+    -webkit-appearance: none;
+    background-color: #eee;
+    width: 0px;
+    height: 0px;
+  }
 `;
-export const MainContent = styled.div `
-  display: flex;
-  align-items: center;
-  height: 100%;
-
-  .slide-item {
-    border-right: 1px solid ${THEME.token?.accent1};
-  }
+export const MainContent = styled.div `
+  display: flex;
+  align-items: center;
+  height: 100%;
+
+  .slide-item {
+    border-right: 1px solid ${THEME.token?.accent1};
+  }
 `;
-export const SlideItem = styled.div `
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex-shrink: 0;
-
-  border-top: 1px solid ${THEME.token?.accent1};
-  border-bottom: 1px solid ${THEME.token?.accent1};
-  height: ${({ size }) => getOffsetSize(size)}px;
-  width: ${WIDTH_SLIDE_ITEM}px;
-  padding: 0px 10px;
-  cursor: pointer;
-  background-color: ${props => (props.isActive ? THEME.token?.colorTextActive : THEME.token?.bw0)};
-
-  .icon-more-vertical {
-    font-weight: 600;
-  }
-
+export const SlideItem = styled.div `
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-shrink: 0;
+
+  border-top: 1px solid ${THEME.token?.accent1};
+  border-bottom: 1px solid ${THEME.token?.accent1};
+  height: ${({ size }) => getOffsetSize(size)}px;
+  width: ${WIDTH_SLIDE_ITEM}px;
+  padding: 0px 10px;
+  cursor: pointer;
+  background-color: ${props => (props.isActive ? THEME.token?.colorTextActive : THEME.token?.bw0)};
+
+  .icon-more-vertical {
+    font-weight: 600;
+  }
+
   ${props => props.isSlideError &&
-    css `
-      border: 1px solid ${THEME.token?.red8} !important;
-    `}
+    css `
+      border: 1px solid ${THEME.token?.red8} !important;
+    `}
 `;
-export const SlideText = styled.div `
-  font-size: ${THEME.token?.fontSize}px;
-  font-weight: 400;
-  line-height: ${({ size }) => getOffsetSize(size)}px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-
-  color: ${props => (props.isActive ? THEME.token?.colorPrimary : THEME.token?.colorText)};
+export const SlideText = styled.div `
+  font-size: ${THEME.token?.fontSize}px;
+  font-weight: 400;
+  line-height: ${({ size }) => getOffsetSize(size)}px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+
+  color: ${props => (props.isActive ? THEME.token?.colorPrimary : THEME.token?.colorText)};
 `;
-export const MenuList = styled.div `
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: center;
-  gap: 8px;
+export const MenuList = styled.div `
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  gap: 8px;
 `;
-export const MenuItem = styled.div `
-  font-size: ${THEME.token?.fontSize}px;
-  line-height: 14px;
-  color: ${THEME.token?.colorText};
-
+export const MenuItem = styled.div `
+  font-size: ${THEME.token?.fontSize}px;
+  line-height: 14px;
+  color: ${THEME.token?.colorText};
+
   ${props => props.isDisabled &&
-    css `
-      pointer-events: none;
-    `}
+    css `
+      pointer-events: none;
+    `}
 `;
-export const ContainerSlideBar = styled.div `
-  display: flex;
-  width: 100%;
-  align-items: center;
-  justify-content: flex-start;
-  gap: 10px;
-  * > * {
-    box-sizing: border-box;
-  }
+export const ContainerSlideBar = styled.div `
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 10px;
+  * > * {
+    box-sizing: border-box;
+  }
 `;
-export const WrapperDisable = styled.div `
-  cursor: pointer;
-
+export const WrapperDisable = styled.div `
+  cursor: pointer;
+
   ${props => props.disabled &&
-    css `
-      cursor: not-allowed;
-      opacity: 0.6;
-    `}
+    css `
+      cursor: not-allowed;
+      opacity: 0.6;
+    `}
 `;

package/es/components/atoms/Slider/styled.js

@@ -2,42 +2,42 @@
 import styled, { css } from 'styled-components';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
-export const SliderWrapper = styled.div `
-  width: 100%;
-
-  .antsomi-slider {
+export const SliderWrapper = styled.div `
+  width: 100%;
+
+  .antsomi-slider {
     ${p => {
     const width = p.width || 0;
     return p.isNegative
-        ? css `
-            .antsomi-slider-handle-1 {
-              display: none;
-            }
-
-            .antsomi-slider-track {
+        ? css `
+            .antsomi-slider-handle-1 {
+              display: none;
+            }
+
+            .antsomi-slider-track {
               ${width < 0
-            ? css `
-                    left: auto !important;
-                    right: 50% !important;
+            ? css `
+                    left: auto !important;
+                    right: 50% !important;
                   `
-            : css `
-                    left: 50% !important;
-                    right: auto !important;
-                  `}
-
-              width: ${Math.abs(width)}% !important;
-            }
-
-            .antsomi-slider-dot {
-              top: -4px;
-              width: 0.25rem;
-              height: 0.875rem;
-              border-radius: 0.125rem;
-              background-color: ${THEME.token?.accent1};
-              border-color: ${THEME.token?.accent1};
-            }
+            : css `
+                    left: 50% !important;
+                    right: auto !important;
+                  `}
+
+              width: ${Math.abs(width)}% !important;
+            }
+
+            .antsomi-slider-dot {
+              top: -4px;
+              width: 0.25rem;
+              height: 0.875rem;
+              border-radius: 0.125rem;
+              background-color: ${THEME.token?.accent1};
+              border-color: ${THEME.token?.accent1};
+            }
           `
         : '';
-}}
-  }
+}}
+  }
 `;

package/es/components/atoms/Space/Space.js

@@ -1,9 +1,9 @@
 import styled from 'styled-components';
 // Components
 import { Space as AntdSpace } from 'antd';
-export const OriginSpace = styled(AntdSpace) `
-  &.antsomi-space-vertical {
-    width: 100%;
-  }
+export const OriginSpace = styled(AntdSpace) `
+  &.antsomi-space-vertical {
+    width: 100%;
+  }
 `;
 export const Space = OriginSpace;

package/es/components/atoms/Spin/styled.js

@@ -2,15 +2,15 @@
 import styled from 'styled-components';
 // Antd Components
 import { Spin } from 'antd';
-export const StyledSpin = styled(Spin) `
-  max-height: unset !important;
-
-  @keyframes loadingCircle {
-    0% {
-      transform: rotate(0deg);
-    }
-    100% {
-      transform: rotate(360deg);
-    }
-  }
+export const StyledSpin = styled(Spin) `
+  max-height: unset !important;
+
+  @keyframes loadingCircle {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
 `;