@sheinx/shineout-style 3.0.0-alpha.1

package/esm/carousel/carousel.js

@@ -0,0 +1,315 @@
+"use strict";
+
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _theme = _interopRequireDefault(require("@sheinx/theme"));
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var carouselDuration = '0.4s';
+var animations = {
+  '@keyframes r2c': {
+    '0%': {
+      transform: 'translateX(100%)'
+    },
+    '100%': {
+      transform: 'translateX(0)'
+    }
+  },
+  '@keyframes  c2r': {
+    '0%': {
+      transform: 'translateX(0)'
+    },
+    '100%': {
+      transform: 'translateX(100%)'
+    }
+  },
+  '@keyframes  l2c': {
+    '0%': {
+      transform: 'translateX(-100%)'
+    },
+    '100%': {
+      transform: 'translateX(0)'
+    }
+  },
+  '@keyframes  c2l': {
+    '0%': {
+      transform: 'translateX(0)'
+    },
+    '100%': {
+      transform: 'translateX(-100%)'
+    }
+  },
+  '@keyframes t2c': {
+    '0%': {
+      transform: 'translateY(-100%)'
+    },
+    '100%': {
+      transform: 'translateY(0)'
+    }
+  },
+  '@keyframes c2t': {
+    '0%': {
+      transform: 'translateY(0)'
+    },
+    '100%': {
+      transform: 'translateY(-100%)'
+    }
+  },
+  '@keyframes b2c': {
+    '0%': {
+      transform: 'translateY(100%)'
+    },
+    '100%': {
+      transform: 'translateY(0)'
+    }
+  },
+  '@keyframes c2b': {
+    '0%': {
+      transform: 'translateY(0)'
+    },
+    '100%': {
+      transform: 'translateY(100%)'
+    }
+  },
+  '@keyframes fade-in': {
+    '0%': {
+      opacity: 0
+    },
+    '100%': {
+      opacity: 1
+    }
+  },
+  '@keyframes fade-out': {
+    '0%': {
+      opacity: 1
+    },
+    '100%': {
+      opacity: 0
+    }
+  }
+};
+var carouselStyle = _objectSpread(_objectSpread({}, animations), {}, {
+  wrapper: {
+    position: 'relative',
+    zIndex: 0
+  },
+  animationSlide: {},
+  animationFade: {},
+  animationSlideY: {},
+  directionForward: {},
+  directionBackward: {},
+  directionStop: {},
+  slider: {
+    width: '100%',
+    height: '100%',
+    position: 'relative',
+    overflow: 'hidden'
+  },
+  item: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    width: '100%',
+    height: '100%',
+    background: '#e9e9e9',
+    '& > *': {
+      width: '100%',
+      height: '100%'
+    }
+  },
+  itemCurrent: {
+    zIndex: 10,
+    '$animationSlide$directionForward &': {
+      animation: "$r2c ".concat(carouselDuration, " ease-in-out")
+    },
+    '$animationSlide$directionBackward &': {
+      animation: "$l2c ".concat(carouselDuration, " ease-in-out")
+    },
+    '$animationSlideY$directionForward &': {
+      animation: "$b2c ".concat(carouselDuration, " ease-in-out")
+    },
+    '$animationSlideY$directionBackward &': {
+      animation: "$t2c ".concat(carouselDuration, " ease-in-out")
+    },
+    '$animationFade &': {
+      animation: "$fade-in ".concat(carouselDuration, " ease-in-out")
+    },
+    '$directionStop &': {
+      animation: 'none'
+    }
+  },
+  itemPre: {
+    zIndex: 9,
+    '$animationSlide$directionForward &': {
+      animation: "$c2l ".concat(carouselDuration, " ease-in-out")
+    },
+    '$animationSlide$directionBackward &': {
+      animation: "$c2r ".concat(carouselDuration, " ease-in-out")
+    },
+    '$animationSlideY$directionForward &': {
+      animation: "$c2t ".concat(carouselDuration, " ease-in-out")
+    },
+    '$animationSlideY$directionBackward &': {
+      animation: "$c2b ".concat(carouselDuration, " ease-in-out")
+    },
+    '$animationFade &': {
+      animation: "$fade-out ".concat(carouselDuration, " ease-in-out")
+    }
+  },
+  arrowWrapper: {},
+  arrowHover: {
+    '& $arrowItem': {
+      opacity: 0
+    },
+    '$wrapper:hover & $arrowItem': {
+      opacity: 1
+    }
+  },
+  arrowItem: {
+    position: 'absolute',
+    top: '50%',
+    transform: 'translateY(-50%)',
+    width: _theme.default.carouselArrowSize,
+    height: _theme.default.carouselArrowSize,
+    borderRadius: _theme.default.carouselArrowBorderRadius,
+    color: _theme.default.carouselArrowFontColor,
+    background: _theme.default.carouselArrowBackgroundColor,
+    zIndex: 100,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    cursor: 'pointer',
+    '& svg': {
+      width: _theme.default.carouselArrowIconSize,
+      height: _theme.default.carouselArrowIconSize
+    },
+    '&:hover': {
+      background: _theme.default.carouselArrowHoverBackgroundColor
+    }
+  },
+  arrowLeft: {
+    left: '12px',
+    '&::after': {
+      transform: 'translateX(35%) rotate(-135deg)'
+    }
+  },
+  arrowRight: {
+    right: '12px',
+    '&::after': {
+      transform: 'translateX(-15%) rotate(45deg)'
+    }
+  },
+  indicatorWrapper: {
+    position: 'absolute',
+    zIndex: 10,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  indicatorCenter: {
+    bottom: '0',
+    left: '0',
+    right: '0',
+    height: _theme.default.carouselIndicatorWrapperHeight,
+    background: 'linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.15) 100%)'
+  },
+  indicatorLeft: {
+    left: '0',
+    top: '0',
+    bottom: '0',
+    width: _theme.default.carouselIndicatorWrapperHeight,
+    flexDirection: 'column',
+    background: 'linear-gradient(-90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.15) 100%)'
+  },
+  indicatorRight: {
+    right: '0',
+    top: '0',
+    bottom: '0',
+    width: _theme.default.carouselIndicatorWrapperHeight,
+    flexDirection: 'column',
+    background: 'linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.15) 100%)'
+  },
+  indicatorOuter: {
+    position: 'static',
+    width: '100%',
+    height: '38px',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center'
+  },
+  indicatorTypeNumber: {},
+  indicatorTypeCircle: {
+    '& $indicator': {
+      '&:not(:first-child)': {
+        marginLeft: _theme.default.carouselIndicatorCircleGap
+      },
+      width: _theme.default.carouselIndicatorCircleWidth,
+      height: _theme.default.carouselIndicatorCircleWidth,
+      borderRadius: '50%'
+    }
+  },
+  indicatorTypeLine: {
+    '& $indicator': {
+      '&:not(:first-child)': {
+        marginLeft: _theme.default.carouselIndicatorLineGap
+      },
+      width: _theme.default.carouselIndicatorLineWidth,
+      height: _theme.default.carouselIndicatorLineHeight,
+      borderRadius: '100px'
+    },
+    '$indicatorLeft& $indicator, $indicatorRight& $indicator': {
+      width: _theme.default.carouselIndicatorLineHeight,
+      height: _theme.default.carouselIndicatorLineWidth
+    }
+  },
+  indicatorTypeSlider: {},
+  indicatorArrow: {
+    width: _theme.default.carouselIndicatorArrowSize,
+    height: _theme.default.carouselIndicatorArrowSize,
+    cursor: 'pointer',
+    color: _theme.default.carouselIndicatorArrowColor,
+    '&:hover': {
+      color: _theme.default.carouselIndicatorArrowHoverColor
+    },
+    '$indicatorOuter &': {
+      color: _theme.default.carouselIndicatorOuterArrowColor,
+      '&:hover': {
+        color: _theme.default.carouselIndicatorOuterArrowHoverColor
+      }
+    },
+    '$indicatorLeft &, $indicatorRight &': {
+      transform: 'rotate(90deg)'
+    }
+  },
+  indicatorNumber: {
+    margin: '0 8px',
+    fontSize: _theme.default.carouselIndicatorNumberFontSize,
+    lineHeight: 1,
+    color: _theme.default.carouselIndicatorNumberColor,
+    '$indicatorOuter &': {
+      color: _theme.default.carouselIndicatorOuterNumberColor
+    }
+  },
+  indicator: {
+    cursor: 'pointer',
+    backgroundColor: _theme.default.carouselIndicatorBackgroundColor,
+    '$indicatorOuter &': {
+      backgroundColor: _theme.default.carouselIndicatorOuterBackgroundColor
+    }
+  },
+  indicatorActive: {
+    backgroundColor: _theme.default.carouselIndicatorActiveBackgroundColor,
+    '$indicatorOuter &': {
+      backgroundColor: _theme.default.carouselIndicatorOuterActiveBackgroundColor
+    }
+  }
+});
+var _default = carouselStyle;
+exports.default = _default;

package/esm/carousel/index.d.ts

@@ -0,0 +1,4 @@
+import carouselStyle from './carousel';
+declare const useCarouselStyle: (data?: undefined) => import("jss").Classes<keyof import("./carousel").CarouselClasses>;
+export { carouselStyle, useCarouselStyle };
+export default useCarouselStyle;

package/esm/carousel/index.js

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

package/esm/checkbox/checkbox.d.ts

@@ -0,0 +1,4 @@
+import { JsStyles } from '../jss-style';
+export declare type CheckboxClass = 'wrapper' | 'wrapperSmall' | 'wrapperLarge' | 'wrapperDisabled' | 'wrapperChecked' | 'wrapperIndeterminate' | 'indicator' | 'indicatorWrapper' | 'darkIndicatorWrapper' | 'desc' | 'input' | 'group' | 'groupBlock';
+declare const checkboxStyle: JsStyles<CheckboxClass>;
+export default checkboxStyle;

package/esm/checkbox/checkbox.js

@@ -0,0 +1,143 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _theme = _interopRequireDefault(require("@sheinx/theme"));
+var checkboxStyle = {
+  wrapper: {
+    display: 'inline-flex',
+    position: 'relative',
+    alignItems: 'center',
+    cursor: 'pointer',
+    boxSizing: 'border-box',
+    marginRight: _theme.default.checkboxGap,
+    '& $input': {
+      width: 'auto',
+      marginLeft: _theme.default.checkboxIconGap
+    }
+  },
+  wrapperSmall: {},
+  wrapperLarge: {},
+  input: {},
+  wrapperChecked: {},
+  wrapperIndeterminate: {},
+  wrapperDisabled: {
+    cursor: 'not-allowed'
+  },
+  indicatorWrapper: {
+    display: 'block',
+    position: 'relative',
+    boxSizing: 'border-box',
+    width: _theme.default.checkboxIconSize,
+    height: _theme.default.checkboxIconSize,
+    '$wrapperSmall &': {
+      width: _theme.default.checkboxSmallIconSize,
+      height: _theme.default.checkboxSmallIconSize
+    },
+    '$wrapperLarge &': {
+      width: _theme.default.checkboxLargeIconSize,
+      height: _theme.default.checkboxLargeIconSize
+    },
+    verticalAlign: 'middle',
+    '&::before': {
+      content: '" "',
+      display: 'block',
+      width: '100%',
+      height: '100%',
+      padding: _theme.default.iconCirclePadding,
+      position: 'absolute',
+      top: '50%',
+      left: '50%',
+      transform: 'translate(-50%, -50%)',
+      boxSizing: 'content-box',
+      background: 'transparent',
+      borderRadius: '50%'
+    },
+    '$wrapper:not($wrapperChecked):not($wrapperIndeterminate):not($wrapperDisabled):hover &': {
+      '&::before': {
+        background: _theme.default.checkboxIconCircleFill
+      },
+      '& $indicator': {
+        backgroundColor: _theme.default.checkboxIconHoverBackgroundColor,
+        color: _theme.default.checkboxIconHoverColor
+      }
+    }
+  },
+  darkIndicatorWrapper: {
+    '$wrapper:not($wrapperChecked):not($wrapperIndeterminate):not($wrapperDisabled):hover &': {
+      '&::before': {
+        background: _theme.default.checkboxIconCircleDark
+      }
+    }
+  },
+  indicator: {
+    position: 'absolute',
+    boxSizing: 'border-box',
+    top: '0',
+    left: '0',
+    width: '100%',
+    height: '100%',
+    borderRadius: _theme.default.checkboxIconBorderRadius,
+    borderStyle: 'solid',
+    borderWidth: _theme.default.checkboxIconBorderWidth,
+    borderColor: _theme.default.checkboxIconBorderColor,
+    backgroundColor: _theme.default.checkboxIconBackgroundColor,
+    color: _theme.default.checkboxIconColor,
+    display: 'block',
+    verticalAlign: 'middle',
+    '& > svg': {
+      position: 'absolute',
+      width: '80%',
+      top: '50%',
+      left: '50%',
+      transform: 'translateY(-50%) translateX(-50%)'
+    },
+    '$wrapperChecked &, $wrapperIndeterminate &': {
+      borderColor: _theme.default.checkboxIconCheckedBorderColor,
+      borderWidth: 0,
+      backgroundColor: _theme.default.checkboxIconCheckedBackgroundColor,
+      color: _theme.default.checkboxIconCheckedColor
+    },
+    '$wrapperDisabled &': {
+      borderColor: _theme.default.checkboxIconDisabledBorderColor,
+      backgroundColor: _theme.default.checkboxIconDisabledBackgroundColor,
+      color: _theme.default.checkboxIconDisabledColor
+    },
+    '$wrapperDisabled$wrapperChecked &, $wrapperDisabled$wrapperIndeterminate &': {
+      borderColor: _theme.default.checkboxIconCheckedDisabledBorderColor,
+      backgroundColor: _theme.default.checkboxIconCheckedDisabledBackgroundColor,
+      color: _theme.default.checkboxIconCheckedDisabledColor
+    }
+  },
+  desc: {
+    verticalAlign: 'middle',
+    boxSizing: 'border-box',
+    marginLeft: _theme.default.checkboxIconGap,
+    fontSize: _theme.default.checkboxLabelFontSize,
+    '$wrapperSmall &': {
+      fontSize: _theme.default.checkboxSmallLabelFontSize
+    },
+    '$wrapperLarge &': {
+      fontSize: _theme.default.checkboxLargeLabelFontSize
+    },
+    lineHeight: _theme.default.lineHeightDynamic,
+    color: _theme.default.checkboxLabelFontColor,
+    '$wrapperDisabled &': {
+      color: _theme.default.checkboxLabelDisabledFontColor
+    }
+  },
+  group: {
+    // padding: '5px 0',
+  },
+  groupBlock: {
+    '& $wrapper': {
+      display: 'flex',
+      marginBottom: _theme.default.checkboxBlockGap
+    }
+  }
+};
+var _default = checkboxStyle;
+exports.default = _default;

package/esm/checkbox/index.d.ts

@@ -0,0 +1,4 @@
+import checkboxStyle from './checkbox';
+declare const useCheckboxStyle: (data?: undefined) => import("jss").Classes<import("./checkbox").CheckboxClass>;
+export { checkboxStyle, useCheckboxStyle };
+export default useCheckboxStyle;

package/esm/checkbox/index.js

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

package/esm/cssvar/checkbox.d.ts

@@ -0,0 +1,10 @@
+declare const _default: {
+    checkinputColor: string;
+    checkboxWidth: string;
+    checkboxBorderUncheckWidth: string;
+    checkboxBorderWidth: string;
+    checkboxBorderColor: string;
+    checkboxDisabledBgc: string;
+    checkboxCheckedDisabledBgc: string;
+};
+export default _default;

package/esm/cssvar/checkbox.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _common = require("./common");
+var checkboxBorderColor = (0, _common.va)('checkbox-border-color', _common.colorVar.grey300);
+var _default = {
+  checkinputColor: (0, _common.va)('checkinput-color', '#333e59'),
+  checkboxWidth: (0, _common.va)('checkbox-width', '16px'),
+  checkboxBorderUncheckWidth: (0, _common.va)('checkbox-border-uncheck-width', '2px'),
+  checkboxBorderWidth: (0, _common.va)('checkbox-border-width', '6px'),
+  checkboxBorderColor: checkboxBorderColor,
+  checkboxDisabledBgc: (0, _common.va)('checkbox-disabled-bgc', '#E8EBF0'),
+  checkboxCheckedDisabledBgc: (0, _common.va)('checkbox-disabled-bgc', checkboxBorderColor)
+};
+exports.default = _default;

package/esm/cssvar/common.d.ts

@@ -0,0 +1,23 @@
+export declare const va: (name: string, value: string) => string;
+export declare const colorVar: {
+    primaryColor: string;
+    primaryColorFade50: string;
+    primaryColorFade0: string;
+    secondaryColor: string;
+    successColor: string;
+    infoColor: string;
+    warningColor: string;
+    dangerColor: string;
+    white: string;
+    grey100: string;
+    grey200: string;
+    grey300: string;
+    grey500: string;
+    grey900: string;
+};
+export declare const sizeVar: {
+    fontSize: string;
+    fontSizeSmall: string;
+    fontSizeLarge: string;
+    commonLineHeight: string;
+};

package/esm/cssvar/common.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.va = exports.sizeVar = exports.colorVar = void 0;
+require("core-js/modules/es.array.concat.js");
+var va = function va(name, value) {
+  return "var(--".concat(name, ",").concat(value, ")");
+};
+exports.va = va;
+var colorVar = {
+  primaryColor: va('primary-color', '#197AFA'),
+  primaryColorFade50: va('primary-color-fade-50', 'rgba(25,122,250,.5)'),
+  primaryColorFade0: va('primary-color-fade-0', 'rgba(25,122,250,0)'),
+  secondaryColor: va('secondary-color', '#666c7c'),
+  successColor: va('success-color', '#52c41a'),
+  infoColor: va('info-color', '#197AFA'),
+  warningColor: va('warning-color', '#ff8c00'),
+  dangerColor: va('danger-color', '#ff4d50'),
+  white: '#fff',
+  grey100: va('grey-100', '#f4f5f8'),
+  grey200: va('grey-200', '#e8ebf0'),
+  grey300: va('grey-300', '#cccfd7'),
+  grey500: va('grey-500', '#adb5bd'),
+  grey900: va('grey-900', '#020b18')
+};
+exports.colorVar = colorVar;
+var sizeVar = {
+  fontSize: va('font-size', '14px'),
+  fontSizeSmall: va('font-size-small', '12px'),
+  fontSizeLarge: va('font-size-large', '16px'),
+  commonLineHeight: va('common-line-height', '1.42857143')
+};
+exports.sizeVar = sizeVar;

package/esm/cssvar/form.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+    formItemMarginBottom: string;
+    formItemMarginRight: string;
+    formItemTipGap: string;
+};
+export default _default;

package/esm/cssvar/form.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _common = require("./common");
+var _default = {
+  formItemMarginBottom: (0, _common.va)('form-item-margin-bottom', '12px'),
+  formItemMarginRight: (0, _common.va)('form-item-margin-right', '16px'),
+  formItemTipGap: (0, _common.va)('form-item-tip-gap', '22px')
+};
+exports.default = _default;