@sheinx/shineout-style 3.0.0-alpha.1

package/esm/steps/steps.js

@@ -0,0 +1,559 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.array.concat.js");
+var _theme = _interopRequireDefault(require("@sheinx/theme"));
+var stepsStyle = {
+  steps: {
+    display: 'flex',
+    '& $step:last-child ': {
+      '& $tail,$title::after': {
+        display: 'none'
+      }
+    }
+  },
+  click: {
+    '& $icon': {
+      cursor: 'pointer'
+    },
+    '&$arrow': {
+      '& $step': {
+        cursor: 'pointer'
+      }
+    }
+  },
+  small: {
+    fontSize: _theme.default.stepsIconFontSize,
+    '&$arrow': {
+      '& $step:not(:last-child)': {
+        '&:after': {
+          top: "calc((100% - ".concat(_theme.default.stepsSmallArrowHeight, ")/2)"),
+          width: _theme.default.stepsSmallArrowHeight,
+          height: _theme.default.stepsSmallArrowHeight
+        },
+        '&:before': {
+          top: "calc((100% - ".concat(_theme.default.stepsSmallArrowHeight, ")/2)"),
+          width: _theme.default.stepsSmallArrowHeight,
+          height: _theme.default.stepsSmallArrowHeight
+        }
+      },
+      '& $content': {
+        padding: "".concat(_theme.default.stepsSmallArrowPaddingY, " ").concat(_theme.default.stepsSmallArrowPaddingX),
+        boxSizing: 'border-box'
+      }
+    },
+    '&$dot': {
+      '&$vertical': {
+        '& $tail': {}
+      }
+    },
+    '& $title': {
+      fontSize: _theme.default.stepsSmallTitleFontSize
+    },
+    '&$default $iconWrapper': {
+      fontSize: _theme.default.stepsSmallTitleFontSize,
+      lineHeight: _theme.default.stepsSmallIconHeight,
+      width: _theme.default.stepsSmallIconWidth,
+      height: _theme.default.stepsSmallIconHeight,
+      padding: 0
+    },
+    '&$default': {
+      '&$horizontal': {
+        '& $tail': {
+          left: 94,
+          top: "calc(".concat(_theme.default.stepsSmallIconWidth, "/2)"),
+          width: "calc(100% - 20px)",
+          '&:after': {
+            width: '100%'
+          }
+        }
+      },
+      '&$vertical': {
+        '& $description': {
+          marginTop: 4
+        },
+        '& $tail': {
+          paddingTop: 28,
+          left: 12
+        }
+      },
+      '& $verticalLabel': {
+        '& $title': {
+          lineHeight: _theme.default.lineHeightDynamic
+        }
+      },
+      '& $title': {
+        lineHeight: _theme.default.stepsSmallIconHeight
+      }
+    },
+    '& $horizontal': {
+      '& $horizontalLabel': {
+        '& $title': {
+          marginTop: 2
+        }
+      },
+      '& $horizontalLabel:not(:last-child)': {
+        minWidth: 150,
+        '& $description': {
+          marginTop: 0
+        }
+      }
+    },
+    '& $vertical ': {
+      '& $horizontalLabel': {
+        '& $title': {
+          marginTop: 2
+        }
+      },
+      '& $horizontalLabel:not(:last-child)': {
+        minWidth: 150,
+        '& $description': {}
+      }
+    }
+  },
+  large: {
+    '&$arrow': {
+      '& $step:not(:last-child)': {
+        '&:after': {
+          top: "calc((100% - ".concat(_theme.default.stepsLargeArrowHeight, ")/2)"),
+          width: _theme.default.stepsLargeArrowHeight,
+          height: _theme.default.stepsLargeArrowHeight
+        },
+        '&:before': {
+          top: "calc((100% - ".concat(_theme.default.stepsLargeArrowHeight, ")/2)"),
+          width: _theme.default.stepsLargeArrowHeight,
+          height: _theme.default.stepsLargeArrowHeight
+        }
+      },
+      '& $content': {
+        padding: "".concat(_theme.default.stepsLargeArrowPaddingY, " ").concat(_theme.default.stepsLargeArrowPaddingX),
+        boxSizing: 'border-box'
+      }
+    },
+    '& $title': {
+      fontSize: _theme.default.stepsLargeTitleFontSize
+    },
+    '&$default $iconWrapper': {
+      fontSize: _theme.default.stepsLargeTitleFontSize,
+      width: "calc(".concat(_theme.default.stepsLargeIconFontSize, " + 14px)"),
+      height: "calc(".concat(_theme.default.stepsLargeIconFontSize, " + 14px)"),
+      lineHeight: "calc(".concat(_theme.default.stepsLargeIconFontSize, " + 14px)"),
+      padding: 0
+    },
+    '&$default': {
+      '& $title': {
+        lineHeight: _theme.default.stepsLargeIconHeight
+      },
+      '&$horizontal': {
+        '& $tail': {
+          left: 102,
+          top: "calc(".concat(_theme.default.stepsLargeIconWidth, "/2)"),
+          '&:after': {
+            width: "calc(100% - ".concat(_theme.default.stepsLargeIconWidth, " + 4px)")
+          }
+        }
+      },
+      '&$vertical': {
+        '& $tail': {
+          left: 16,
+          paddingTop: 36
+        }
+      },
+      '& $verticalLabel': {
+        '& $title': {
+          lineHeight: _theme.default.lineHeightDynamic
+        }
+      }
+    },
+    '& $horizontalLabel': {},
+    '& $horizontalLabel:not(:last-child)': {
+      minWidth: 170
+    }
+  },
+  vertical: {
+    flexDirection: 'column',
+    '& $content': {
+      minHeight: 64
+    },
+    '& $description': {
+      marginTop: 4,
+      paddingBottom: 12
+    },
+    '& $tail': {
+      width: 1,
+      height: '100%',
+      left: 13.5,
+      '&:after': {
+        position: 'relative',
+        width: 1,
+        height: '100%'
+      }
+    },
+    '&dot': {
+      '& $description': {
+        marginTop: 4
+      }
+    }
+  },
+  horizontal: {
+    '&dot': {
+      '& $description': {
+        marginTop: 4
+      }
+    },
+    '& $tail': {
+      width: '100%',
+      height: 1,
+      '&:after': {
+        height: '100%'
+      }
+    },
+    '& $horizontalLabel': {
+      '& $description': {},
+      '& $title': {
+        '&:after': {
+          content: '""',
+          display: 'block',
+          background: _theme.default.stepsTailBackgroundColor,
+          height: 1,
+          left: '100%',
+          marginLeft: 12,
+          top: '50%',
+          width: 999,
+          position: 'absolute'
+        }
+      }
+    }
+  },
+  step: {
+    position: 'relative',
+    flex: 1,
+    marginRight: 12,
+    whiteSpace: 'nowrap',
+    '&:last-child': {
+      marginRight: 0
+    }
+  },
+  disabled: {},
+  horizontalLabel: {
+    '&$step': {
+      overflow: 'hidden'
+    },
+    '& $icon': {
+      marginRight: 12
+    },
+    '& $title, $description': {
+      textAlign: 'left'
+    },
+    '& $content': {
+      textAlign: 'left',
+      display: 'inline-block'
+    },
+    '& $title': {},
+    '& $description': {
+      // paddingRight: 40,
+    }
+  },
+  verticalLabel: {
+    '& $icon': {
+      marginLeft: 66
+    },
+    '& $content': {
+      width: 160,
+      display: 'block',
+      marginTop: _theme.default.stepsNearlyContentMargin
+    }
+  },
+  content: {
+    textAlign: 'center',
+    verticalAlign: 'top'
+  },
+  title: {
+    position: 'relative',
+    display: 'inline-block',
+    textAlign: 'center',
+    lineHeight: _theme.default.lineHeightDynamic,
+    fontSize: _theme.default.stepsTitleFontSize
+  },
+  tail: {
+    position: 'absolute',
+    boxSizing: 'border-box',
+    '&:after': {
+      content: '""',
+      display: 'block',
+      position: 'absolute',
+      background: _theme.default.stepsTailBackgroundColor
+    }
+  },
+  description: {
+    textAlign: 'center',
+    fontSize: _theme.default.stepsDescriptionFontSize,
+    color: _theme.default.stepsDescriptionFontColor,
+    lineHeight: _theme.default.lineHeightDynamic,
+    // marginTop: Token.stepsNearlyDescribeMargin,
+    whiteSpace: 'normal'
+  },
+  wait: {
+    '& $iconWrapper': {
+      color: _theme.default.stepsWaitFontColor,
+      backgroundColor: _theme.default.stepsWaitBackgroundColor
+    },
+    '& $title': {
+      color: _theme.default.stepsWaitFontColor
+    }
+  },
+  process: {
+    '& $iconWrapper': {
+      color: _theme.default.stepsProcessFontColor,
+      backgroundColor: _theme.default.stepsProcessBackgroundColor,
+      fontWeight: 500
+    },
+    '& $title': {
+      fontWeight: 500
+    }
+  },
+  finish: {
+    '& $iconWrapper': {
+      color: _theme.default.stepsFinishFontColor,
+      backgroundColor: _theme.default.stepsFinishBackgroundColor
+    },
+    '& $tail': {
+      '&:after': {
+        background: _theme.default.stepsTailFinishBackgroundColor
+      }
+    }
+  },
+  error: {
+    '& $iconWrapper': {
+      color: _theme.default.stepsErrorFontColor,
+      backgroundColor: _theme.default.stepsErrorBackgroundColor
+    }
+  },
+  icon: {
+    display: 'inline-block',
+    position: 'relative',
+    fontSize: _theme.default.stepsIconFontSize,
+    textAlign: 'center'
+  },
+  iconWrapper: {
+    display: 'inline-block',
+    textAlign: 'center',
+    borderRadius: '50%'
+  },
+  dot: {
+    '&$vertical': {
+      '& $title': {
+        marginTop: 0
+      },
+      '& $icon': {
+        lineHeight: 0,
+        padding: 10
+      },
+      '& $process': {
+        '& $icon': {
+          padding: 9
+        }
+      },
+      '& $tail': {
+        top: 7,
+        paddingTop: 27,
+        '&:after': {
+          width: 1
+        }
+      }
+    },
+    '&$horizontal': {
+      '& $description': {
+        marginTop: 4
+      },
+      '& $icon': {
+        lineHeight: 0,
+        marginLeft: 76
+      },
+      '& $tail': {
+        left: 88,
+        overflow: 'hidden',
+        width: 'calc(100% - 8px)',
+        '&:after': {
+          width: '100%'
+        }
+      },
+      '& $title': {
+        whiteSpace: 'normal'
+      },
+      '& $process': {
+        '& $icon': {
+          marginLeft: 73
+        }
+      }
+    },
+    '& $process': {
+      '& $iconWrapper': {
+        width: 10,
+        height: 10
+      }
+    },
+    '& $iconWrapper': {
+      width: 8,
+      height: 8
+    },
+    '& $description': {
+      fontSize: _theme.default.stepsSmallDescriptionFontSize
+    },
+    '& $tail': {
+      top: 10.5,
+      boxSizing: 'border-box'
+    },
+    '& $finish': {
+      '& $iconWrapper': {
+        backgroundColor: _theme.default.stepsProcessBackgroundColor
+      },
+      '& $title': {}
+    }
+  },
+  arrow: {
+    '&$steps': {
+      overflow: 'hidden'
+    },
+    '& $step': {},
+    '&$horizontal': {
+      '& $horizontalLabel $title:after': {
+        display: 'none'
+      }
+    },
+    '& $step:last-child': {
+      marginRight: 0
+    },
+    '& $step:not(:last-child)': {
+      marginRight: 4,
+      overflow: 'visible',
+      position: 'relative',
+      '&:after': {
+        zIndex: 1,
+        content: '""',
+        width: _theme.default.stepsArrowHeight,
+        height: _theme.default.stepsArrowHeight,
+        borderRadius: 4,
+        display: 'block',
+        position: 'absolute',
+        top: "calc((100% - ".concat(_theme.default.stepsArrowHeight, ")/2)"),
+        right: -30,
+        transform: 'rotate(45deg)'
+      },
+      '&:before': {
+        zIndex: 2,
+        content: '""',
+        height: _theme.default.stepsArrowHeight,
+        width: _theme.default.stepsArrowHeight,
+        borderRadius: 4,
+        display: 'block',
+        position: 'absolute',
+        top: "calc((100% - ".concat(_theme.default.stepsArrowHeight, ")/2)"),
+        right: -26,
+        transform: 'rotate(45deg)'
+      }
+    },
+    '& $step:not(:first-child)': {
+      paddingLeft: 30
+    },
+    '& $description': {
+      paddingRight: 0,
+      height: 20,
+      whiteSpace: 'nowrap',
+      fontSize: _theme.default.stepsSmallDescriptionFontSize
+    },
+    '& $content': {
+      padding: "".concat(_theme.default.stepsArrowPaddingY, " ").concat(_theme.default.stepsArrowPaddingX),
+      boxSizing: 'border-box',
+      marginTop: 0
+    },
+    '& $finish': {
+      backgroundColor: _theme.default.stepsFinishBackgroundColor,
+      '&:after': {
+        background: "linear-gradient(45deg,rgba(0,0,0,0) 50%,rgba(0,0,0,0) 25% 50%,#fff 50% 75%,#fff 75%)"
+      },
+      '&:before': {
+        background: "linear-gradient(45deg,rgba(0,0,0,0) 50%,rgba(0,0,0,0) 25% 50%,".concat(_theme.default.stepsFinishBackgroundColor, " 50% 75%,").concat(_theme.default.stepsFinishBackgroundColor, " 75%)")
+      }
+    },
+    '& $process': {
+      color: _theme.default.stepsProcessFontColor,
+      backgroundColor: _theme.default.stepsProcessBackgroundColor,
+      '& $description': {
+        color: _theme.default.stepsProcessFontColor
+      },
+      '&:after': {
+        background: "linear-gradient(45deg,rgba(0,0,0,0) 50%,rgba(0,0,0,0) 25% 50%,#fff 50% 75%,#fff 75%)"
+      },
+      '&:before': {
+        background: "linear-gradient(45deg,rgba(0,0,0,0) 50%,rgba(0,0,0,0) 25% 50%,".concat(_theme.default.stepsProcessBackgroundColor, " 50% 75%,").concat(_theme.default.stepsProcessBackgroundColor, " 75%)")
+      }
+    },
+    '& $wait': {
+      color: _theme.default.stepsWaitFontColor,
+      backgroundColor: _theme.default.stepsWaitBackgroundColor,
+      '&:after': {
+        background: "linear-gradient(45deg,rgba(0,0,0,0) 50%,rgba(0,0,0,0) 25% 50%,#fff 50% 75%,#fff 75%)"
+      },
+      '&:before': {
+        background: "linear-gradient(45deg,rgba(0,0,0,0) 50%,rgba(0,0,0,0) 25% 50%,".concat(_theme.default.stepsWaitBackgroundColor, " 50% 75%,").concat(_theme.default.stepsWaitBackgroundColor, " 75%)")
+      }
+    }
+  },
+  default: {
+    lineHeight: 0,
+    '&$vertical': {
+      '& $tail': {
+        paddingTop: 32,
+        paddingBottom: 4,
+        '&:after': {
+          width: 1
+        }
+      }
+    },
+    '&$horizontal': {
+      '& $tail': {
+        // left: `calc(50% + ${Token.stepsIconWidth}/2 + 4px)`,
+        left: 98,
+        top: 13.5,
+        '&:after': {
+          width: "calc(100% - ".concat(_theme.default.stepsIconWidth, " + 4px)")
+        }
+      }
+    },
+    '& $verticalLabel': {
+      '& $title': {
+        lineHeight: _theme.default.lineHeightDynamic
+      },
+      '& $description': {
+        marginTop: 4
+      }
+    },
+    '& $iconWrapper': {
+      lineHeight: _theme.default.stepsIconHeight,
+      width: _theme.default.stepsIconWidth,
+      height: _theme.default.stepsIconHeight
+    },
+    '& $icon': {
+      lineHeight: 0
+    },
+    '& $title': {
+      lineHeight: _theme.default.stepsIconHeight
+    },
+    '& $description': {
+      fontSize: _theme.default.stepsSmallDescriptionFontSize
+    },
+    '& $icon svg': {
+      padding: 6
+    },
+    '& $horizontalLabel:not(:last-child)': {
+      minWidth: 160
+    }
+  }
+};
+var _default = stepsStyle;
+exports.default = _default;

package/esm/sticky/index.d.ts

@@ -0,0 +1,4 @@
+import stickyStyle from './sticky';
+declare const useStickyStyle: (data?: undefined) => import("jss").Classes<"wrapper">;
+export { stickyStyle, useStickyStyle };
+export default useStickyStyle;

package/esm/sticky/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+Object.defineProperty(exports, "stickyStyle", {
+  enumerable: true,
+  get: function get() {
+    return _sticky.default;
+  }
+});
+exports.useStickyStyle = void 0;
+var _jssStyle = require("../jss-style");
+var _sticky = _interopRequireDefault(require("./sticky"));
+var useStickyStyle = (0, _jssStyle.styled)(_sticky.default, 'sticky');
+exports.useStickyStyle = useStickyStyle;
+var _default = useStickyStyle;
+exports.default = _default;

package/esm/sticky/sticky.d.ts

@@ -0,0 +1,7 @@
+import { JsStyles } from '../jss-style';
+export declare type StickyClasses = {
+    wrapper: string;
+};
+export declare type StickyClassType = keyof StickyClasses;
+declare const stickyStyle: JsStyles<StickyClassType>;
+export default stickyStyle;

package/esm/sticky/sticky.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+// import token from '@sheinx/theme';
+
+var stickyStyle = {
+  wrapper: {
+    display: 'block'
+  }
+};
+var _default = stickyStyle;
+exports.default = _default;

package/esm/switch/index.d.ts

@@ -0,0 +1,4 @@
+import switchStyle from './switch';
+declare const useSwitchStyle: (data?: undefined) => import("jss").Classes<import("./switch").SwitchClass>;
+export { switchStyle, useSwitchStyle };
+export default useSwitchStyle;

package/esm/switch/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+Object.defineProperty(exports, "switchStyle", {
+  enumerable: true,
+  get: function get() {
+    return _switch.default;
+  }
+});
+exports.useSwitchStyle = void 0;
+var _jssStyle = require("../jss-style");
+var _switch = _interopRequireDefault(require("./switch"));
+var useSwitchStyle = (0, _jssStyle.styled)(_switch.default, 'switch');
+exports.useSwitchStyle = useSwitchStyle;
+var _default = useSwitchStyle;
+exports.default = _default;

package/esm/switch/switch.d.ts

@@ -0,0 +1,4 @@
+import { JsStyles } from '../jss-style';
+export declare type SwitchClass = 'wrapper' | 'wrapperDisabled' | 'wrapperChecked' | 'wrapperSmall' | 'wrapperLarge' | 'indicator' | 'loading' | 'content';
+declare const switchStyle: JsStyles<SwitchClass>;
+export default switchStyle;