fix(rtl): css 样式变量部分 (#1944)

jdf2e · Feb 23, 2024 · 3e4ca73 · 3e4ca73
1 parent 756903a
commit 3e4ca73
Show file tree

Hide file tree

Showing 99 changed files with 569 additions and 569 deletions.
diff --git a/src/packages/actionsheet/demo.taro.tsx b/src/packages/actionsheet/demo.taro.tsx
@@ -169,23 +169,23 @@ const ActionSheetDemo = () => {
               {translated['84aa6bce']}
             </label>
           </span>
-          <div style={{ marginLeft: '10px' }}>{val1}</div>
+          <div style={{ marginInlineStart: '10px', color: '#999' }}>{val1}</div>
         </Cell>
         <Cell onClick={() => setIsVisible2(!isVisible2)}>
           <span>
             <label htmlFor={translated['595d7bb3']}>
               {translated['595d7bb3']}
             </label>
           </span>
-          <div style={{ marginLeft: '10px' }}>{val2}</div>
+          <div style={{ marginInlineStart: '10px', color: '#999' }}>{val2}</div>
         </Cell>
         <Cell onClick={() => setIsVisible3(!isVisible3)}>
           <span>
             <label htmlFor={translated['0a1a6656']}>
               {translated['0a1a6656']}
             </label>
           </span>
-          <div style={{ marginLeft: '10px' }}>{val3}</div>
+          <div style={{ marginInlineStart: '10px', color: '#999' }}>{val3}</div>
         </Cell>
         <h2>{translated.c3a08064}</h2>
         <Cell onClick={() => setIsVisible4(!isVisible4)}>

diff --git a/src/packages/actionsheet/demo.tsx b/src/packages/actionsheet/demo.tsx
@@ -166,23 +166,23 @@ const ActionSheetDemo = () => {
               {translated['84aa6bce']}
             </label>
           </span>
-          <div style={{ marginLeft: '10px' }}>{val1}</div>
+          <div style={{ marginInlineStart: '10px', color: '#999' }}>{val1}</div>
         </Cell>
         <Cell onClick={() => setIsVisible2(!isVisible2)}>
           <span>
             <label htmlFor={translated['595d7bb3']}>
               {translated['595d7bb3']}
             </label>
           </span>
-          <div style={{ marginLeft: '10px' }}>{val2}</div>
+          <div style={{ marginInlineStart: '10px', color: '#999' }}>{val2}</div>
         </Cell>
         <Cell onClick={() => setIsVisible3(!isVisible3)}>
           <span>
             <label htmlFor={translated['0a1a6656']}>
               {translated['0a1a6656']}
             </label>
           </span>
-          <div style={{ marginLeft: '10px' }}>{val3}</div>
+          <div style={{ marginInlineStart: '10px', color: '#999' }}>{val3}</div>
         </Cell>
         <h2>{translated.c3a08064}</h2>
         <Cell onClick={() => setIsVisible4(!isVisible4)}>

diff --git a/src/packages/animate/animate.scss b/src/packages/animate/animate.scss
@@ -304,30 +304,3 @@
     animation-iteration-count: infinite;
   }
 }
-
-[dir='rtl'] .nut-animate,
-.nut-rtl .nut-animate {
-  .nut-animate-twinkle {
-    &::after,
-    &::before {
-      border-radius: calc(60 / 2) * 1px;
-      right: auto;
-      left: 50%;
-      margin-right: 0;
-      margin-left: calc(-60 / 2) * 1px;
-    }
-  }
-
-  .nut-animate-flicker {
-    &::after {
-      left: auto;
-      right: 0;
-      background-image: linear-gradient(
-        -106deg,
-        rgba(232, 224, 255, 0) 24%,
-        #e8e0ff 91%
-      );
-      transform: skewX(20deg);
-    }
-  }
-}
diff --git a/src/packages/audio/audio.scss b/src/packages/audio/audio.scss
@@ -15,11 +15,6 @@
       background: $white;
       border-radius: 50%;
       box-shadow: 0 0 8px $color-text-disabled;
-
-      .nut-icon-am-rotate {
-        transform: rotate((360));
-        animation-timing-function: ease-in-out;
-      }
     }
 
     .nut-audio-icon-stop {

diff --git a/src/packages/avatar/demo.scss b/src/packages/avatar/demo.scss
@@ -4,20 +4,10 @@
     border-radius: 0;
 
     & > div {
-      margin-right: 30px;
+      margin-inline-end: 30px;
     }
   }
 }
 .demo-avatar {
   color: #fff;
 }
-
-[dir='rtl'] .avatar-demo,
-.nut-rtl .avatar-demo {
-  .nut-cell {
-    & > div {
-      margin-right: 0px;
-      margin-left: 30px;
-    }
-  }
-}
diff --git a/src/packages/avatar/demo.tsx b/src/packages/avatar/demo.tsx
@@ -174,10 +174,10 @@ const AvatarDemo = () => {
         <Cell>
           <Avatar
             size="normal"
-            style={{ marginRight: 0 }}
+            style={{ marginInlineEnd: 0 }}
             src="https://img12.360buyimg.com/imagetools/jfs/t1/143702/31/16654/116794/5fc6f541Edebf8a57/4138097748889987.png"
           />
-          <div style={{ marginLeft: '10px' }}>
+          <div style={{ marginInlineStart: '10px' }}>
             <div style={{ fontSize: '16px' }}>{translated.f645fc67}</div>
             <div style={{ fontSize: '12px' }}>{translated.f645fc68}</div>
           </div>

diff --git a/src/packages/avatarcropper/avatarcropper.scss b/src/packages/avatarcropper/avatarcropper.scss
@@ -119,7 +119,6 @@
     left: auto;
     right: 0;
   }
-
   &-popup {
     left: auto;
     right: 0;
@@ -138,7 +137,6 @@
     &-highlight {
       left: auto;
       right: 0;
-
       .highlight {
         left: auto;
         right: 50%;

diff --git a/src/packages/backtop/backtop.taro.tsx b/src/packages/backtop/backtop.taro.tsx
@@ -46,16 +46,17 @@ export const BackTop: FunctionComponent<
     })
   }
 
-  const styles = style
-    ? {
-        zIndex,
-        ...style,
-      }
-    : {
-        right: '10px',
-        bottom: '20px',
-        zIndex,
-      }
+  const styles =
+    Object.keys(style || {}).length !== 0
+      ? {
+          zIndex,
+          ...style,
+        }
+      : {
+          right: '10px',
+          bottom: '20px',
+          zIndex,
+        }
 
   return (
     <div

diff --git a/src/packages/backtop/backtop.tsx b/src/packages/backtop/backtop.tsx
@@ -41,15 +41,12 @@ export const BackTop: FunctionComponent<
   }
 
   const classPrefix = 'nut-backtop'
-
   const [backTop, SetBackTop] = useState(false)
   const [scrollTop, SetScrollTop] = useState(0)
   let startTime = 0
   const scrollEl: any = useRef<any>(null)
-  // 初始化
   useEffect(() => {
     init()
-
     return () => removeEventListener()
   }, [])
 
@@ -72,7 +69,6 @@ export const BackTop: FunctionComponent<
       SetScrollTop(top)
     }
     const showBtn = top >= threshold
-
     SetBackTop(showBtn)
   }
 
@@ -101,36 +97,34 @@ export const BackTop: FunctionComponent<
     window.cancelAnimationFrame = window.webkitCancelAnimationFrame
   }
 
-  // 监听事件
   function addEventListener() {
     scrollEl.current?.addEventListener('scroll', scrollListener, false)
     scrollEl.current?.addEventListener('resize', scrollListener, false)
   }
 
-  // 移除监听事件
   function removeEventListener() {
     scrollEl.current?.removeEventListener('scroll', scrollListener, false)
     scrollEl.current?.removeEventListener('resize', scrollListener, false)
   }
 
-  // 返回顶部点击事件
   const goTop = (e: MouseEvent<HTMLDivElement>) => {
     onClick && onClick(e)
     const otime = +new Date()
     startTime = otime
     duration > 0 ? scrollAnimation() : scroll()
   }
 
-  const styles = style
-    ? {
-        zIndex,
-        ...style,
-      }
-    : {
-        right: '10px',
-        bottom: '20px',
-        zIndex,
-      }
+  const styles =
+    Object.keys(style || {}).length !== 0
+      ? {
+          zIndex,
+          ...style,
+        }
+      : {
+          right: '10px',
+          bottom: '20px',
+          zIndex,
+        }
 
   return (
     <div

diff --git a/src/packages/backtop/demo.taro.tsx b/src/packages/backtop/demo.taro.tsx
@@ -58,7 +58,7 @@ const BackTopDemo = () => {
           threshold={200}
           style={{
             bottom: '50px',
-            right: '20px',
+            insetInlineEnd: '20px',
           }}
           onClick={handleClick}
         >

diff --git a/src/packages/backtop/demo.tsx b/src/packages/backtop/demo.tsx
@@ -52,7 +52,7 @@ const BackTopDemo = () => {
           threshold={200}
           style={{
             bottom: '50px',
-            right: '20px',
+            insetInlineEnd: '20px',
           }}
           onClick={handleClick}
           target="target"

diff --git a/src/packages/badge/badge.scss b/src/packages/badge/badge.scss
@@ -65,4 +65,11 @@
     right: auto;
     left: -15%;
   }
+
+  &-content {
+    transform: var(
+      --nutui-badge-content-transform,
+      translateY(-50%) translateX(-100%)
+    );
+  }
 }
diff --git a/src/packages/badge/demo.scss b/src/packages/badge/demo.scss