@antscorp/antsomi-ui 2.0.109 → 2.0.110

package/es/components/molecules/CaptureScreen/components/CommentBox/styled.js

@@ -2,131 +2,131 @@
 import styled, { css } from 'styled-components';
 // Constants
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
-export const CommentPoint = styled.div `
-  position: fixed;
-  top: ${props => props.top}px;
-  left: ${props => props.left}px;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  width: ${props => props.offset * 2}px;
-  height: ${props => props.offset * 2}px;
-  border-radius: 50%;
-
-  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.5);
-  /* background-color: ${props => props.isSubmitted ? `${THEME.token?.bw0}` : `${props.color}`}; */
-  background-color: ${props => (props.color ? props.color : `${THEME.token?.bw0}`)};
-  /* color: ${props => (props.isSubmitted ? `${THEME.token?.blue8}` : `${THEME.token?.bw0}`)}; */
-  color: ${props => (props.color ? `${THEME.token?.bw0}` : `${THEME.token?.colorText}`)};
-  font-size: 16px;
-
-  /* pointer-events: ${props => (props.isSubmitted ? 'none' : 'visible')}; */
-  font-family: ${THEME.token?.fontFamily};
-  z-index: 99;
-  cursor: grab;
-
-  :hover {
-    z-index: 999999;
-  }
-
-  :hover .icon-close-comment,
-  :hover .rounded-dashed {
-    display: block;
-  }
+export const CommentPoint = styled.div `
+  position: fixed;
+  top: ${props => props.top}px;
+  left: ${props => props.left}px;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  width: ${props => props.offset * 2}px;
+  height: ${props => props.offset * 2}px;
+  border-radius: 50%;
+
+  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.5);
+  /* background-color: ${props => props.isSubmitted ? `${THEME.token?.bw0}` : `${props.color}`}; */
+  background-color: ${props => (props.color ? props.color : `${THEME.token?.bw0}`)};
+  /* color: ${props => (props.isSubmitted ? `${THEME.token?.blue8}` : `${THEME.token?.bw0}`)}; */
+  color: ${props => (props.color ? `${THEME.token?.bw0}` : `${THEME.token?.colorText}`)};
+  font-size: 16px;
+
+  /* pointer-events: ${props => (props.isSubmitted ? 'none' : 'visible')}; */
+  font-family: ${THEME.token?.fontFamily};
+  z-index: 99;
+  cursor: grab;
+
+  :hover {
+    z-index: 999999;
+  }
+
+  :hover .icon-close-comment,
+  :hover .rounded-dashed {
+    display: block;
+  }
 `;
-export const RoundedDashed = styled.div `
-  position: absolute;
-  top: 0;
-  left: 0;
-  display: none;
-  border: 2px dashed #707070;
-  width: ${props => props.offset * 2 + 1}px;
-  height: ${props => props.offset * 2 + 1}px;
+export const RoundedDashed = styled.div `
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: none;
+  border: 2px dashed #707070;
+  width: ${props => props.offset * 2 + 1}px;
+  height: ${props => props.offset * 2 + 1}px;
 `;
-export const CommentBoxed = styled.div `
-  position: absolute;
-  width: ${props => props.boxDimension.width}px;
-  /* height: 170px; */
-  max-height: ${props => props.boxDimension.height}px;
-  padding: 15px;
-  border-radius: ${THEME.token?.borderRadius}px;
-
-  box-shadow: 0px 11px 15px 0 rgba(0, 0, 0, 0.2);
-  background-color: ${THEME.token?.bw0};
-  font-family: ${THEME.token?.fontFamily};
-  cursor: grab;
-
-  ::before {
-    content: '';
-    position: absolute;
-    display: block;
-    border: 16px solid transparent;
-  }
-
-  :hover ~ .icon-close-comment,
-  :hover ~ .rounded-dashed {
-    display: none;
-  }
-
-  /* Tính toán lại vị trí của box comment khi box bị che */
+export const CommentBoxed = styled.div `
+  position: absolute;
+  width: ${props => props.boxDimension.width}px;
+  /* height: 170px; */
+  max-height: ${props => props.boxDimension.height}px;
+  padding: 15px;
+  border-radius: ${THEME.token?.borderRadius}px;
+
+  box-shadow: 0px 11px 15px 0 rgba(0, 0, 0, 0.2);
+  background-color: ${THEME.token?.bw0};
+  font-family: ${THEME.token?.fontFamily};
+  cursor: grab;
+
+  ::before {
+    content: '';
+    position: absolute;
+    display: block;
+    border: 16px solid transparent;
+  }
+
+  :hover ~ .icon-close-comment,
+  :hover ~ .rounded-dashed {
+    display: none;
+  }
+
+  /* Tính toán lại vị trí của box comment khi box bị che */
   ${props => props.isReverseAxisY
-    ? css `
-          bottom: 50%;
-          border-bottom-left-radius: 0px;
-
-          ::before {
-            bottom: 0;
-            border-bottom-color: ${THEME.token?.bw0};
-          }
+    ? css `
+          bottom: 50%;
+          border-bottom-left-radius: 0px;
+
+          ::before {
+            bottom: 0;
+            border-bottom-color: ${THEME.token?.bw0};
+          }
         `
-    : css `
-          top: 50%;
-          border-top-left-radius: 0px;
-
-          ::before {
-            top: 0;
-            border-top-color: ${THEME.token?.bw0};
-          }
-        `}
-
+    : css `
+          top: 50%;
+          border-top-left-radius: 0px;
+
+          ::before {
+            top: 0;
+            border-top-color: ${THEME.token?.bw0};
+          }
+        `}
+
   ${props => props.isReverseAxisX
-    ? css `
-          right: calc(100% + 24px);
-
-          ::before {
-            right: -15px;
-          }
+    ? css `
+          right: calc(100% + 24px);
+
+          ::before {
+            right: -15px;
+          }
         `
-    : css `
-          left: calc(100% + 24px);
-
-          ::before {
-            left: -15px;
-          }
-        `}
+    : css `
+          left: calc(100% + 24px);
+
+          ::before {
+            left: -15px;
+          }
+        `}
 `;
-export const TextArea = styled.textarea `
-  width: 300px;
-  height: 100px;
-  padding: 10px;
-  border: solid 1px rgba(0, 0, 0, 0.12);
-  outline: none;
-  font-family: ${THEME.token?.fontFamily};
-  font-size: ${THEME.token?.fontSize}px;
-  color: #999999;
-  resize: none;
+export const TextArea = styled.textarea `
+  width: 300px;
+  height: 100px;
+  padding: 10px;
+  border: solid 1px rgba(0, 0, 0, 0.12);
+  outline: none;
+  font-family: ${THEME.token?.fontFamily};
+  font-size: ${THEME.token?.fontSize}px;
+  color: #999999;
+  resize: none;
 `;
-export const WrapperIcon = styled.div `
-  position: absolute;
-  top: 0;
-  left: 80%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  transform: translateY(-50%);
-
-  display: none;
-  z-index: 10;
+export const WrapperIcon = styled.div `
+  position: absolute;
+  top: 0;
+  left: 80%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transform: translateY(-50%);
+
+  display: none;
+  z-index: 10;
 `;

package/es/components/molecules/CaptureScreen/components/Cursor/styled.js

@@ -2,74 +2,74 @@
 import { THEME } from '@antscorp/antsomi-ui/es/constants';
 // Constants
 import styled, { css } from 'styled-components';
-export const PlusCursor = styled.div `
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  background-color: red;
-  width: 30px;
-  height: 30px;
-  /* border-radius: 50%; */
-  background: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
-  background-position: center;
-  background-size: 90% 2px, 2px 90%; /*thickness = 2px, length = 50% (25px)*/
-  background-repeat: no-repeat;
-  box-sizing: border-box;
-  cursor: none;
-  pointer-events: none;
-  z-index: 999999;
+export const PlusCursor = styled.div `
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: red;
+  width: 30px;
+  height: 30px;
+  /* border-radius: 50%; */
+  background: linear-gradient(#000 0 0), linear-gradient(#000 0 0);
+  background-position: center;
+  background-size: 90% 2px, 2px 90%; /*thickness = 2px, length = 50% (25px)*/
+  background-repeat: no-repeat;
+  box-sizing: border-box;
+  cursor: none;
+  pointer-events: none;
+  z-index: 999999;
 `;
-export const TooltipDrag = styled.div `
-  position: absolute;
-  top: 50%;
-  /* left: 50%; */
-  left: calc(100% + 10px);
-  /* transform: translate(-50%, -50%); */
-  transform: translateY(-50%);
-  height: 30px;
-  padding: 0px 8px;
-  border-radius: ${THEME.token?.borderRadius}px;
-  background-color: #515151;
-  font-size: ${THEME.token?.fontSize}px;
-  color: ${THEME.token?.bw0};
-  font-family: ${THEME.token?.fontFamily};
-  line-height: 30px;
-  white-space: nowrap;
-  box-sizing: border-box;
-  user-select: none;
-  z-index: 9999;
+export const TooltipDrag = styled.div `
+  position: absolute;
+  top: 50%;
+  /* left: 50%; */
+  left: calc(100% + 10px);
+  /* transform: translate(-50%, -50%); */
+  transform: translateY(-50%);
+  height: 30px;
+  padding: 0px 8px;
+  border-radius: ${THEME.token?.borderRadius}px;
+  background-color: #515151;
+  font-size: ${THEME.token?.fontSize}px;
+  color: ${THEME.token?.bw0};
+  font-family: ${THEME.token?.fontFamily};
+  line-height: 30px;
+  white-space: nowrap;
+  box-sizing: border-box;
+  user-select: none;
+  z-index: 9999;
 `;
-export const DottedCursor = styled.div `
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  background-color: ${props => props.bgColor || '#0f2eae'};
-  width: 20px;
-  height: 20px;
-  border-radius: 50%;
-  border: 3px solid ${THEME.token?.bw0};
-  box-sizing: border-box;
-  cursor: none;
-  pointer-events: none;
-  z-index: 999999;
-
+export const DottedCursor = styled.div `
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: ${props => props.bgColor || '#0f2eae'};
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  border: 3px solid ${THEME.token?.bw0};
+  box-sizing: border-box;
+  cursor: none;
+  pointer-events: none;
+  z-index: 999999;
+
   ${props => props.isPointerBox &&
-    css `
-      display: flex;
-      justify-content: center;
-      align-items: center;
-
-      width: ${props.offset * 2}px;
-      height: ${props.offset * 2}px;
-      border-radius: 50%;
-
-      box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.5);
-      background-color: ${THEME.token?.bw0};
-      color: ${props.bgColor ? props.bgColor : THEME.token?.bw0};
-      font-size: 16px;
-
-      font-family: ${THEME.token?.fontFamily};
-    `}
+    css `
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      width: ${props.offset * 2}px;
+      height: ${props.offset * 2}px;
+      border-radius: 50%;
+
+      box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.5);
+      background-color: ${THEME.token?.bw0};
+      color: ${props.bgColor ? props.bgColor : THEME.token?.bw0};
+      font-size: 16px;
+
+      font-family: ${THEME.token?.fontFamily};
+    `}
 `;