@sheinx/shineout-style 3.1.0-rc.2 → 3.1.0

package/esm/steps/steps.js

@@ -23,14 +23,14 @@ var stepsStyle = {
     '&$arrow': {
       '& $step:not(:last-child)': {
         '&:after': {
-          top: "calc((100% - ".concat(Token.stepsSmallArrowHeight, ")/2)"),
-          width: Token.stepsSmallArrowHeight,
-          height: Token.stepsSmallArrowHeight
+          top: "calc(100% - 28px)",
+          width: 56,
+          height: 56
         },
         '&:before': {
-          top: "calc((100% - ".concat(Token.stepsSmallArrowHeight, ")/2)"),
-          width: Token.stepsSmallArrowHeight,
-          height: Token.stepsSmallArrowHeight
+          top: "calc(100% - 28px)",
+          width: 56,
+          height: 56
         }
       },
       '& $content': {
@@ -56,7 +56,12 @@ var stepsStyle = {
     '&$default': {
       '&$horizontal': {
         '& $tail': {
-          left: 94,
+          '&[dir=ltr]': {
+            left: 94
+          },
+          '&[dir=rtl]': {
+            right: 94
+          },
           top: "calc(".concat(Token.stepsSmallIconWidth, "/2)"),
           width: "calc(100% - 20px)",
           '&:after': {
@@ -70,7 +75,12 @@ var stepsStyle = {
         },
         '& $tail': {
           paddingTop: 28,
-          left: 12
+          '&[dir=ltr]': {
+            left: 12
+          },
+          '&[dir=rtl]': {
+            right: 12
+          }
         }
       },
       '& $verticalLabel': {
@@ -134,7 +144,12 @@ var stepsStyle = {
       },
       '&$horizontal': {
         '& $tail': {
-          left: 102,
+          '&[dir=ltr]': {
+            left: 102
+          },
+          '&[dir=rtl]': {
+            right: 102
+          },
           top: "calc(".concat(Token.stepsLargeIconWidth, "/2)"),
           '&:after': {
             width: "calc(100% - ".concat(Token.stepsLargeIconWidth, " + 4px)")
@@ -143,7 +158,12 @@ var stepsStyle = {
       },
       '&$vertical': {
         '& $tail': {
-          left: 16,
+          '&[dir=ltr]': {
+            left: 16
+          },
+          '&[dir=rtl]': {
+            right: 16
+          },
           paddingTop: 36
         }
       },
@@ -171,7 +191,12 @@ var stepsStyle = {
     '& $tail': {
       width: 1,
       height: '100%',
-      left: 13,
+      '&[dir=ltr]': {
+        left: 13
+      },
+      '&[dir=rtl]': {
+        right: 13
+      },
       '&:after': {
         position: 'relative',
         width: 1,
@@ -200,16 +225,21 @@ var stepsStyle = {
     '& $horizontalLabel': {
       '& $description': {},
       '& $title': {
-        '&:after': {
+        '&::after': {
           content: '""',
           display: 'block',
           background: Token.stepsTailBackgroundColor,
           height: 1,
-          left: '100%',
           marginLeft: 12,
           top: '50%',
           width: 999,
           position: 'absolute'
+        },
+        '&[dir=ltr]::after': {
+          left: '100%'
+        },
+        '&[dir=rtl]::after': {
+          right: '100%'
         }
       }
     }
@@ -371,7 +401,12 @@ var stepsStyle = {
         marginLeft: 76
       },
       '& $tail': {
-        left: 88,
+        '&[dir=ltr]': {
+          left: 88
+        },
+        '&[dir=rtl]': {
+          right: 88
+        },
         overflow: 'hidden',
         width: 'calc(100% - 8px)',
         '&:after': {
@@ -439,25 +474,35 @@ var stepsStyle = {
         position: 'absolute',
         width: 0,
         height: 0,
-        left: 0,
         top: 0,
         borderLeftWidth: 16,
         borderTopWidth: 20,
         borderBottomWidth: 20,
         borderLeftColor: '#ffffff'
       },
+      '&[dir=ltr]:before': {
+        left: 0
+      },
+      '&[dir=rtl]:before': {
+        right: 0
+      },
       // after
       '&:after': {
         content: '""',
         position: 'absolute',
         width: 0,
         height: 0,
-        right: -16,
         top: 0,
         zIndex: 1,
         borderLeftWidth: 16,
         borderTopWidth: 20,
         borderBottomWidth: 20
+      },
+      '&[dir=ltr]:after': {
+        right: -16
+      },
+      '&[dir=rtl]:after': {
+        left: -16
       }
     },
     '&$horizontal': {
@@ -474,8 +519,13 @@ var stepsStyle = {
         '&:after': {
           borderLeftWidth: 26,
           borderTopWidth: 32,
-          borderBottomWidth: 32,
+          borderBottomWidth: 32
+        },
+        '&[dir=ltr]:after': {
           right: -26
+        },
+        '&[dir=rtl]:after': {
+          left: -26
         }
       }
     },
@@ -524,11 +574,16 @@ var stepsStyle = {
         color: Token.stepsProcessFontColor
       },
       '&:after': {
-        right: -16,
         borderLeft: "16px solid ".concat(Token.stepsProcessBackgroundColor),
         borderTop: "20px solid transparent",
         borderBottom: "20px solid transparent"
       },
+      '&[dir=ltr]:after': {
+        right: -16
+      },
+      '&[dir=rtl]:after': {
+        left: -16
+      },
       '&:before': {
         borderLeft: "16px solid #ffffff",
         borderTop: "20px solid transparent",
@@ -561,9 +616,14 @@ var stepsStyle = {
         '&:after': {
           borderLeftWidth: 26,
           borderTopWidth: 32,
-          borderBottomWidth: 32,
+          borderBottomWidth: 32
+        },
+        '&[dir=ltr]:after': {
           right: -26
         },
+        '&[dir=rtl]:after': {
+          left: -26
+        },
         '&:before': {
           borderLeftWidth: 26,
           borderTopWidth: 32,
@@ -587,7 +647,12 @@ var stepsStyle = {
     '&$horizontal': {
       '& $tail': {
         // left: `calc(50% + ${Token.stepsIconWidth}/2 + 4px)`,
-        left: 98,
+        '&[dir=ltr]': {
+          left: 98
+        },
+        '&[dir=rtl]': {
+          right: 98
+        },
         top: 13,
         '&:after': {
           width: "calc(100% - ".concat(Token.stepsIconWidth, " + 4px)")

package/esm/switch/switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["switch.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAaxC,QAAA,MAAM,WAAW,EAAE,QAAQ,CAAC,MAAM,aAAa,CAgI9C,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["switch.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAC7C,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAaxC,QAAA,MAAM,WAAW,EAAE,QAAQ,CAAC,MAAM,aAAa,CAmJ9C,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/esm/switch/switch.js

@@ -77,22 +77,45 @@ var switchStyle = _objectSpread(_objectSpread({}, animation), {}, {
   indicator: {
     width: token.switchCircleSize,
     height: token.switchCircleSize,
-    left: token.switchPaddingX,
+    '&[dir=ltr]': {
+      left: token.switchPaddingX
+    },
+    '&[dir=rtl]': {
+      right: token.switchPaddingX
+    },
     top: token.switchPaddingY,
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
     color: 'red',
     '$wrapperChecked &': {
-      right: token.switchPaddingX,
-      left: "calc(100% - ".concat(token.switchCircleSize, " - ").concat(token.switchPaddingX, ")"),
+      '&[dir=ltr]': {
+        right: token.switchPaddingX,
+        left: "calc(100% - ".concat(token.switchCircleSize, " - ").concat(token.switchPaddingX, ")")
+      },
+      '&[dir=rtl]': {
+        left: token.switchPaddingX,
+        right: "calc(100% - ".concat(token.switchCircleSize, " - ").concat(token.switchPaddingX, ")")
+      },
       '$wrapperSmall&': {
-        right: token.switchSmallPaddingX,
-        left: "calc(100% - ".concat(token.switchSmallCircleSize, " - ").concat(token.switchSmallPaddingX, ")")
+        '&[dir=ltr]': {
+          right: token.switchSmallPaddingX,
+          left: "calc(100% - ".concat(token.switchSmallCircleSize, " - ").concat(token.switchSmallPaddingX, ")")
+        },
+        '&[dir=rtl]': {
+          left: token.switchSmallPaddingX,
+          right: "calc(100% - ".concat(token.switchSmallCircleSize, " - ").concat(token.switchSmallPaddingX, ")")
+        }
       },
       '$wrapperLarge&': {
-        right: token.switchLargePaddingX,
-        left: "calc(100% - ".concat(token.switchLargeCircleSize, " - ").concat(token.switchLargePaddingX, ")")
+        '&[dir=ltr]': {
+          right: token.switchLargePaddingX,
+          left: "calc(100% - ".concat(token.switchLargeCircleSize, " - ").concat(token.switchLargePaddingX, ")")
+        },
+        '&[dir=rtl]': {
+          left: token.switchLargePaddingX,
+          right: "calc(100% - ".concat(token.switchLargeCircleSize, " - ").concat(token.switchLargePaddingX, ")")
+        }
       }
     },
     '$wrapperSmall &': {

package/esm/table/table.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["table.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AASxC,MAAM,MAAM,cAAc,GAAG,MAAM,YAAY,CAAC;AAUhD,QAAA,MAAM,UAAU,EAAE,QAAQ,CAAC,cAAc,CAqXxC,CAAC;AAEF,eAAe,UAAU,CAAC"}
+{"version":3,"file":"table.d.ts","sourceRoot":"","sources":["table.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAC5C,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAUxC,MAAM,MAAM,cAAc,GAAG,MAAM,YAAY,CAAC;AAUhD,QAAA,MAAM,UAAU,EAAE,QAAQ,CAAC,cAAc,CAgaxC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/esm/table/table.js

@@ -7,8 +7,9 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 import token from '@sheinx/theme';
 import { customScrollBar } from "../mixin";
 var cellBaseIndex = 4;
-var sorterIndex = 10;
-var fixedIndex = 8;
+var fixedIndex = 6;
+var resizeIndex = 8;
+var fixedFixedIndex = 10;
 var headerIndex = 12;
 var loadingIndex = 16;
 var globalStyle = {
@@ -28,7 +29,6 @@ var tableStyle = _objectSpread(_objectSpread({}, globalStyle), {}, {
     minHeight: 0,
     fontSize: token.tableFontSize,
     '& table': {
-      textAlign: 'left',
       minWidth: '100%',
       boxSizing: 'border-box',
       tableLayout: 'fixed',
@@ -43,15 +43,22 @@ var tableStyle = _objectSpread(_objectSpread({}, globalStyle), {}, {
         '&$cellFixedLeft, &$cellFixedRight': {
           zIndex: fixedIndex
         },
-        '$bordered&::after': {
-          content: '""',
-          position: 'absolute',
-          zIndex: cellBaseIndex,
-          top: 0,
-          right: 0,
-          bottom: 0,
-          background: token.tableCellBorderColor,
-          borderLeft: "1px solid ".concat(token.tableCellBorderColor)
+        '$bordered&': {
+          '&::after': {
+            content: '""',
+            position: 'absolute',
+            zIndex: cellBaseIndex,
+            top: 0,
+            bottom: 0,
+            background: token.tableCellBorderColor,
+            borderLeft: "1px solid ".concat(token.tableCellBorderColor)
+          },
+          '&[dir=ltr]::after': {
+            right: 0
+          },
+          '&[dir=rtl]::after': {
+            left: 0
+          }
         }
       },
       '& td': {
@@ -153,6 +160,7 @@ var tableStyle = _objectSpread(_objectSpread({}, globalStyle), {}, {
     position: 'sticky',
     left: 0,
     top: 0,
+    right: 0,
     justifyContent: 'center',
     display: 'flex',
     alignItems: 'center'
@@ -170,6 +178,9 @@ var tableStyle = _objectSpread(_objectSpread({}, globalStyle), {}, {
   cellFixedRight: {
     position: 'sticky'
   },
+  cellAlignLeft: {
+    textAlign: 'left'
+  },
   cellAlignCenter: {
     textAlign: 'center'
   },
@@ -196,25 +207,55 @@ var tableStyle = _objectSpread(_objectSpread({}, globalStyle), {}, {
     }
   },
   floatLeft: {
-    '& $cellFixedLast$cellFixedLeft::after': {
-      content: '""',
-      position: 'absolute',
-      top: 0,
-      bottom: 0,
-      width: '5px',
-      right: '-5px',
-      background: "linear-gradient(90deg, ".concat(token.tableFixedShadow, ", transparent)")
+    '& $cellFixedLast$cellFixedLeft': {
+      '&::after': {
+        content: '""',
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        width: '5px'
+      },
+      '&[dir=ltr]::after': {
+        right: '-5px',
+        background: "linear-gradient(90deg, ".concat(token.tableFixedShadow, ", transparent)")
+      },
+      '&[dir=rtl]::after': {
+        left: '-5px',
+        background: "linear-gradient(270deg, ".concat(token.tableFixedShadow, ",transparent)")
+      }
+    },
+    '& table': {
+      '& th, & td': {
+        '&$cellFixedLeft': {
+          zIndex: fixedFixedIndex
+        }
+      }
     }
   },
   floatRight: {
-    '& $cellFixedLast$cellFixedRight::before': {
-      content: '""',
-      width: '5px',
-      left: '-5px',
-      background: "linear-gradient(270deg, ".concat(token.tableFixedShadow, ",transparent)"),
-      top: 0,
-      bottom: 0,
-      position: 'absolute'
+    '& $cellFixedLast$cellFixedRight': {
+      '&::before': {
+        content: '""',
+        position: 'absolute',
+        top: 0,
+        bottom: 0,
+        width: '5px'
+      },
+      '&[dir=rtl]::before': {
+        right: '-5px',
+        background: "linear-gradient(90deg, ".concat(token.tableFixedShadow, ", transparent)")
+      },
+      '&[dir=ltr]::before': {
+        left: '-5px',
+        background: "linear-gradient(270deg, ".concat(token.tableFixedShadow, ",transparent)")
+      }
+    },
+    '& table': {
+      '& th, & td': {
+        '&$cellFixedRight': {
+          zIndex: fixedFixedIndex
+        }
+      }
     }
   },
   hasSorter: {
@@ -225,7 +266,12 @@ var tableStyle = _objectSpread(_objectSpread({}, globalStyle), {}, {
     minWidth: '14px',
     width: '14px',
     position: 'relative',
-    transform: 'translateX(6px)',
+    '&[dir=rtl]': {
+      transform: 'translateX(-6px)'
+    },
+    '&[dir=ltr]': {
+      transform: 'translateX(6px)'
+    },
     display: 'flex',
     alignItems: 'center',
     justifyContent: 'center',
@@ -258,10 +304,15 @@ var tableStyle = _objectSpread(_objectSpread({}, globalStyle), {}, {
   },
   sorterActive: {},
   resizeSpanner: {
-    zIndex: sorterIndex,
+    zIndex: resizeIndex,
     position: 'absolute',
     opacity: 0,
-    right: '-1px',
+    '&[dir=rtl]': {
+      left: '-1px'
+    },
+    '&[dir=ltr]': {
+      right: '-1px'
+    },
     top: 0,
     bottom: 0,
     width: '3px',
@@ -384,6 +435,9 @@ var tableStyle = _objectSpread(_objectSpread({}, globalStyle), {}, {
     }
   },
   simple: {
+    '& th, & td': {
+      textAlign: 'left'
+    },
     '& table tr:hover td': {
       background: "".concat(token.tableTbodyHoverBackgroundColor)
     }

package/esm/tabs/tabs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["tabs.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAoNxC,QAAA,MAAM,SAAS,EAAE,QAAQ,CAAC,MAAM,WAAW,CAub1C,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["tabs.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAsSxC,QAAA,MAAM,SAAS,EAAE,QAAQ,CAAC,MAAM,WAAW,CA6b1C,CAAC;AAEF,eAAe,SAAS,CAAC"}