@antscorp/antsomi-ui 2.0.101 → 2.0.102

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

@@ -4,294 +4,294 @@ import styled from 'styled-components';
 import { Input } from '@antscorp/antsomi-ui/es/components/atoms/Input';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
-export const WrapperInputStyle = styled.div `
-  color: ${THEME.token?.colorText};
-  position: relative;
-
-  .input-wrapper-outter {
-    position: relative;
-    max-width: 100%;
-    min-height: 22px;
-    max-height: 6rem;
-    overflow: auto;
-    padding: 5px;
-    border-bottom: 1px solid ${THEME.token?.blue1};
-  }
-
-  .customize-antsomi-profile {
-    position: absolute;
-    font-size: 20px;
-    right: 4px;
-    top: 50%;
-    transform: translateY(-50%);
-    cursor: pointer;
-    color: rgb(0, 94, 184);
-  }
-
-  .styles-input-wrapper {
-    border-bottom: 1px solid ${THEME.token?.blue1} !important;
-    :hover {
-      cursor: text;
-      background-color: ${THEME.token?.blue};
-      border-bottom: 1px solid ${THEME.token?.blue1};
-    }
-    :focus-within {
-      background-color: ${THEME.token?.bw0};
-      border-bottom: 1px solid rgb(0, 94, 184);
-    }
-    :active {
-      background-color: ${THEME.token?.bw0};
-      border-bottom: 1px solid rgb(0, 94, 184);
-    }
-  }
-
-  .input-error {
-    border-bottom-color: rgb(239, 51, 64);
-  }
-
-  .customize-antsomi-profile-outter {
-    position: absolute;
-    font-size: 20px;
-    right: 2.8rem;
-    top: 2.3rem;
-    transform: translateY(-50%);
-    cursor: pointer;
-    color: ${THEME.token?.blue7};
-  }
-
-  .input-personal {
-    padding: 0px 4px;
-    padding-right: 32px;
-    outline: none;
-    overflow-wrap: normal;
-    overflow: hidden;
-    text-overflow: unset;
-    white-space: normal;
-    // display: inline-block;
-
-    .detect-url {
-      background-color: #e8feca;
-      display: inline;
-      position: relative;
-      cursor: pointer;
-    }
-  }
-  /*
-  $base-color: ${THEME.token?.blue7};
-  $bg-base-color: #fff;
-  $border-base-color: ${THEME.token?.bw3_5};
-  $bg-btn-base-color: #f4f6f8; */
-
-  .antsomi-wrapper-personalization {
-    width: 100%;
-    height: 100%;
-    background: $bg-base-color;
-    border: 1px solid $border-base-color;
-    border-radius: ${THEME.token?.borderRadius}px;
-    display: flex;
-    flex-direction: column;
-    font-size: 14px;
-    font-family: Roboto, 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
-    // box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
-    .header {
-      padding: 13px 20px;
-      position: relative;
-
-      .title {
-        font-size: 20px;
-        font-weight: bold;
-        color: $base-color;
-      }
-
-      &:before {
-        content: '';
-        position: absolute;
-        left: 0;
-        bottom: 0;
-        height: 15px;
-        width: 95%;
-        border-bottom: 1px solid $border-base-color;
-      }
-    }
-
-    .body {
-      overflow: auto;
-      flex-grow: 1;
-      padding: 0 5px;
-
-      table {
-        width: 100%;
-        height: 100%;
-        table-layout: fixed;
-        border-collapse: collapse;
-        border-spacing: 0;
-        th,
-        td {
-          text-align: left;
-          padding: 0 15px;
-        }
-      }
-    }
-
-    .footer {
-      display: flex;
-      padding: 15px 25px;
-      justify-content: flex-end;
-    }
-  }
-
-  .btn {
-    min-width: 100px;
-    min-height: 40px;
-    border-radius: ${THEME.token?.borderRadius}px;
-    outline: none;
-    border: none;
-    cursor: pointer;
-
-    &:focus {
-      outline: none !important;
-    }
-  }
-
-  .group-btn {
-    width: 222px;
-    display: flex;
-    justify-content: space-between;
-  }
-
-  .btn-default {
-    background-color: $bg-btn-base-color;
-    color: $base-color;
-    border: 1px solid #d7dfe8;
-
-    &:hover {
-      background-color: #e3e9ef;
-    }
-  }
-
-  .btn-blue {
-    background-color: $base-color;
-    color: $bg-base-color;
-    border: 1px solid #707070;
-    opacity: 0.9;
-
-    &:hover {
-      opacity: 1;
-    }
-  }
-
-  .input-outline {
-    border-top-style: hidden;
-    border-right-style: hidden;
-    border-left-style: hidden;
-    height: 27px;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.4);
-
-    &:focus {
-      outline: none;
-    }
-  }
-
-  .insert-word {
-    padding: 5px 8px;
-    color: white;
-    border: 1px solid;
-    border-radius: 20px;
-    height: 30px;
-    cursor: pointer;
-    line-height: 1px;
-    background: #bbefbe;
-
-    &.blue {
-      background: #3c39ba;
-    }
-
-    &.orange {
-      background: #fbac00;
-    }
-
-    &.violet-pc {
-      background: #6750a7;
-    }
-
-    &.disabled {
-      background: #ccc;
-    }
-    &.custom {
-      background: #bbefbe;
-      // border: 1px solid #BBEFBE;
-    }
-
-    em {
-      color: white;
-      font-style: normal;
-      font-size: 13px;
-      opacity: 0;
-      user-select: none;
-    }
-
-    &:hover {
-      em {
-        opacity: 1;
-      }
-    }
-  }
+export const WrapperInputStyle = styled.div `
+  color: ${THEME.token?.colorText};
+  position: relative;
+
+  .input-wrapper-outter {
+    position: relative;
+    max-width: 100%;
+    min-height: 22px;
+    max-height: 6rem;
+    overflow: auto;
+    padding: 5px;
+    border-bottom: 1px solid ${THEME.token?.blue1};
+  }
+
+  .customize-antsomi-profile {
+    position: absolute;
+    font-size: 20px;
+    right: 4px;
+    top: 50%;
+    transform: translateY(-50%);
+    cursor: pointer;
+    color: rgb(0, 94, 184);
+  }
+
+  .styles-input-wrapper {
+    border-bottom: 1px solid ${THEME.token?.blue1} !important;
+    :hover {
+      cursor: text;
+      background-color: ${THEME.token?.blue};
+      border-bottom: 1px solid ${THEME.token?.blue1};
+    }
+    :focus-within {
+      background-color: ${THEME.token?.bw0};
+      border-bottom: 1px solid rgb(0, 94, 184);
+    }
+    :active {
+      background-color: ${THEME.token?.bw0};
+      border-bottom: 1px solid rgb(0, 94, 184);
+    }
+  }
+
+  .input-error {
+    border-bottom-color: rgb(239, 51, 64);
+  }
+
+  .customize-antsomi-profile-outter {
+    position: absolute;
+    font-size: 20px;
+    right: 2.8rem;
+    top: 2.3rem;
+    transform: translateY(-50%);
+    cursor: pointer;
+    color: ${THEME.token?.blue7};
+  }
+
+  .input-personal {
+    padding: 0px 4px;
+    padding-right: 32px;
+    outline: none;
+    overflow-wrap: normal;
+    overflow: hidden;
+    text-overflow: unset;
+    white-space: normal;
+    // display: inline-block;
+
+    .detect-url {
+      background-color: #e8feca;
+      display: inline;
+      position: relative;
+      cursor: pointer;
+    }
+  }
+  /*
+  $base-color: ${THEME.token?.blue7};
+  $bg-base-color: #fff;
+  $border-base-color: ${THEME.token?.bw3_5};
+  $bg-btn-base-color: #f4f6f8; */
+
+  .antsomi-wrapper-personalization {
+    width: 100%;
+    height: 100%;
+    background: $bg-base-color;
+    border: 1px solid $border-base-color;
+    border-radius: ${THEME.token?.borderRadius}px;
+    display: flex;
+    flex-direction: column;
+    font-size: 14px;
+    font-family: Roboto, 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
+    // box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+    .header {
+      padding: 13px 20px;
+      position: relative;
+
+      .title {
+        font-size: 20px;
+        font-weight: bold;
+        color: $base-color;
+      }
+
+      &:before {
+        content: '';
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        height: 15px;
+        width: 95%;
+        border-bottom: 1px solid $border-base-color;
+      }
+    }
+
+    .body {
+      overflow: auto;
+      flex-grow: 1;
+      padding: 0 5px;
+
+      table {
+        width: 100%;
+        height: 100%;
+        table-layout: fixed;
+        border-collapse: collapse;
+        border-spacing: 0;
+        th,
+        td {
+          text-align: left;
+          padding: 0 15px;
+        }
+      }
+    }
+
+    .footer {
+      display: flex;
+      padding: 15px 25px;
+      justify-content: flex-end;
+    }
+  }
+
+  .btn {
+    min-width: 100px;
+    min-height: 40px;
+    border-radius: ${THEME.token?.borderRadius}px;
+    outline: none;
+    border: none;
+    cursor: pointer;
+
+    &:focus {
+      outline: none !important;
+    }
+  }
+
+  .group-btn {
+    width: 222px;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .btn-default {
+    background-color: $bg-btn-base-color;
+    color: $base-color;
+    border: 1px solid #d7dfe8;
+
+    &:hover {
+      background-color: #e3e9ef;
+    }
+  }
+
+  .btn-blue {
+    background-color: $base-color;
+    color: $bg-base-color;
+    border: 1px solid #707070;
+    opacity: 0.9;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  .input-outline {
+    border-top-style: hidden;
+    border-right-style: hidden;
+    border-left-style: hidden;
+    height: 27px;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.4);
+
+    &:focus {
+      outline: none;
+    }
+  }
+
+  .insert-word {
+    padding: 5px 8px;
+    color: white;
+    border: 1px solid;
+    border-radius: 20px;
+    height: 30px;
+    cursor: pointer;
+    line-height: 1px;
+    background: #bbefbe;
+
+    &.blue {
+      background: #3c39ba;
+    }
+
+    &.orange {
+      background: #fbac00;
+    }
+
+    &.violet-pc {
+      background: #6750a7;
+    }
+
+    &.disabled {
+      background: #ccc;
+    }
+    &.custom {
+      background: #bbefbe;
+      // border: 1px solid #BBEFBE;
+    }
+
+    em {
+      color: white;
+      font-style: normal;
+      font-size: 13px;
+      opacity: 0;
+      user-select: none;
+    }
+
+    &:hover {
+      em {
+        opacity: 1;
+      }
+    }
+  }
 `;
-export const SpanIcon = styled.span `
-  ${({ isDisabled }) => isDisabled && `cursor: not-allowed !important; opacity: 0.5;`}
-  font-size: 20px;
+export const SpanIcon = styled.span `
+  ${({ isDisabled }) => isDisabled && `cursor: not-allowed !important; opacity: 0.5;`}
+  font-size: 20px;
 `;
-export const InputWrapper = styled.div `
-  .input__wrapper {
-    display: flex;
-    align-items: center;
-
-    div.--default {
-      min-width: 120px;
-    }
-  }
+export const InputWrapper = styled.div `
+  .input__wrapper {
+    display: flex;
+    align-items: center;
+
+    div.--default {
+      min-width: 120px;
+    }
+  }
 `;
 // export const InputShortLink = styled(Input)``;
 export const InputShortLink = styled(props => _jsx(Input, { ...props })) ``;
-export const TooltipHover = styled.div `
-  position: fixed;
-  left: ${props => `${props.left}px`};
-  top: ${props => `${props.top}px`};
-
-  display: ${props => (props.isShow ? 'flex' : 'none')};
-  justify-content: center;
-  align-items: center;
-
-  background: rgba(0, 0, 0, 0.62);
-  transition:
-    opacity 186ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
-    transform 124ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-  color: ${THEME.token?.bw0};
-  font-size: 12px;
-  box-shadow:
-    0px 5px 5px -3px rgba(0, 0, 0, 0.2),
-    0px 8px 10px 1px rgba(0, 0, 0, 0.14),
-    0px 3px 14px 2px rgba(0, 0, 0, 0.12);
-  border-radius: 4px;
-  height: 24px;
-  width: auto;
-  z-index: 999;
-  padding: 5px 10px;
-  user-select: none;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-  box-sizing: border-box;
+export const TooltipHover = styled.div `
+  position: fixed;
+  left: ${props => `${props.left}px`};
+  top: ${props => `${props.top}px`};
+
+  display: ${props => (props.isShow ? 'flex' : 'none')};
+  justify-content: center;
+  align-items: center;
+
+  background: rgba(0, 0, 0, 0.62);
+  transition:
+    opacity 186ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
+    transform 124ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  color: ${THEME.token?.bw0};
+  font-size: 12px;
+  box-shadow:
+    0px 5px 5px -3px rgba(0, 0, 0, 0.2),
+    0px 8px 10px 1px rgba(0, 0, 0, 0.14),
+    0px 3px 14px 2px rgba(0, 0, 0, 0.12);
+  border-radius: 4px;
+  height: 24px;
+  width: auto;
+  z-index: 999;
+  padding: 5px 10px;
+  user-select: none;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  box-sizing: border-box;
 `;
-export const DynamicItem = styled.div `
-  padding: 4px 16px;
-  font-size: 13px;
-  color: ${THEME.token?.bw10};
-  cursor: pointer;
-  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
-
-  &:hover {
-    color: ${THEME.token?.bw0};
-    background-color: ${THEME.token?.colorPrimary};
-  }
+export const DynamicItem = styled.div `
+  padding: 4px 16px;
+  font-size: 13px;
+  color: ${THEME.token?.bw10};
+  cursor: pointer;
+  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+
+  &:hover {
+    color: ${THEME.token?.bw0};
+    background-color: ${THEME.token?.colorPrimary};
+  }
 `;

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

@@ -6,27 +6,27 @@ import BadgeBackground from '@antscorp/antsomi-ui/es/assets/images/background/ba
 import { Typography } from 'antd';
 // Constants
 import { globalToken } from '@antscorp/antsomi-ui/es/constants';
-export const BoxImage = styled.div `
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 30px;
-  height: 30px;
-  padding: 5px;
-  border-radius: 50%;
-  background-color: ${globalToken?.bw0};
+export const BoxImage = styled.div `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 30px;
+  height: 30px;
+  padding: 5px;
+  border-radius: 50%;
+  background-color: ${globalToken?.bw0};
 `;
-export const BrandingName = styled(Typography.Text) `
-  font-weight: 600;
-  font-size: 14px;
-  color: #171717;
+export const BrandingName = styled(Typography.Text) `
+  font-weight: 600;
+  font-size: 14px;
+  color: #171717;
 `;
-export const BadgeContainer = styled.div `
-  background: url(${BadgeBackground}) no-repeat center center;
-  background-size: contain;
-  width: 16px;
-  height: 16px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
+export const BadgeContainer = styled.div `
+  background: url(${BadgeBackground}) no-repeat center center;
+  background-size: contain;
+  width: 16px;
+  height: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 `;

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

@@ -2,37 +2,37 @@
 import styled, { css } from 'styled-components';
 // Assets
 import MobileFrame from '@antscorp/antsomi-ui/es/assets/images/iphone.png';
-export const MobileWrapper = styled.div `
-  display: flex;
-  justify-content: center;
-  width: 100%;
-  background: url(${MobileFrame}) no-repeat center center;
-  background-size: contain;
+export const MobileWrapper = styled.div `
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  background: url(${MobileFrame}) no-repeat center center;
+  background-size: contain;
 `;
-export const MobileInner = styled.div `
-  position: relative;
-  width: 100%;
-  max-width: ${props => (props.size === 'medium' ? 290 : 336)}px;
-  height: ${props => (props.size === 'medium' ? 600 : 695)}px;
-  margin: ${props => (props.size === 'medium' ? '52px 23px 18px 24px' : '61px 23px 20px 24px')};
-  border-bottom-left-radius: ${props => (props.size === 'medium' ? 37 : 50)}px;
-  border-bottom-right-radius: ${props => (props.size === 'medium' ? 37 : 50)}px;
-  overflow: hidden;
-
+export const MobileInner = styled.div `
+  position: relative;
+  width: 100%;
+  max-width: ${props => (props.size === 'medium' ? 290 : 336)}px;
+  height: ${props => (props.size === 'medium' ? 600 : 695)}px;
+  margin: ${props => (props.size === 'medium' ? '52px 23px 18px 24px' : '61px 23px 20px 24px')};
+  border-bottom-left-radius: ${props => (props.size === 'medium' ? 37 : 50)}px;
+  border-bottom-right-radius: ${props => (props.size === 'medium' ? 37 : 50)}px;
+  overflow: hidden;
+
   ${props => props.backgroundColor &&
-    css `
-      background-color: ${props.backgroundColor};
-    `}
+    css `
+      background-color: ${props.backgroundColor};
+    `}
 `;
-export const MobileBottomLine = styled.div `
-  width: 145px;
-  height: 5px;
-  background-color: #000000;
-  border-radius: 20px;
-  position: absolute;
-  margin: auto;
-  bottom: 10px;
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 10;
+export const MobileBottomLine = styled.div `
+  width: 145px;
+  height: 5px;
+  background-color: #000000;
+  border-radius: 20px;
+  position: absolute;
+  margin: auto;
+  bottom: 10px;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 10;
 `;