@sheinx/shineout-style 3.0.0-alpha.1

package/esm/icon/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, "iconStyle", {
+  enumerable: true,
+  get: function get() {
+    return _icon.default;
+  }
+});
+exports.useIconStyle = void 0;
+var _jssStyle = require("../jss-style");
+var _icon = _interopRequireDefault(require("./icon"));
+var useIconStyle = (0, _jssStyle.styled)(_icon.default, 'icon');
+exports.useIconStyle = useIconStyle;
+var _default = useIconStyle;
+exports.default = _default;

package/esm/image/image.d.ts

@@ -0,0 +1,42 @@
+import { JsStyles } from '../jss-style';
+export interface ImageClasses {
+    image: string;
+    img: string;
+    inner: string;
+    circle: string;
+    rounded: string;
+    thumbnail: string;
+    fill: string;
+    center: string;
+    fit: string;
+    stretch: string;
+    href: string;
+    placeholder: string;
+    defaultPlaceholder: string;
+    error: string;
+    defaultError: string;
+    preview: string;
+    previewMask: string;
+    download: string;
+    overlay: string;
+    magnify: string;
+    close: string;
+    gallery: string;
+    galleryInit: string;
+    galleryForward: string;
+    galleryBackward: string;
+    galleryCenter: string;
+    galleryLeft: string;
+    galleryRight: string;
+    group: string;
+    groupPile: string;
+    groupPileItem: string;
+    groupCount: string;
+    '@keyframes keyframe-f2c': string;
+    '@keyframes keyframe-c2b': string;
+    '@keyframes keyframe-c2f': string;
+    '@keyframes keyframe-b2c': string;
+}
+declare type ImageClass = keyof ImageClasses;
+declare const ImageStyle: JsStyles<ImageClass>;
+export default ImageStyle;

package/esm/image/image.js

@@ -0,0 +1,374 @@
+"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 ImageStyle = {
+  '@keyframes keyframe-f2c': {
+    '0%': {
+      left: '100%',
+      marginLeft: '-80px',
+      transform: 'translate(0, -50%)'
+    },
+    '100%': {
+      left: '50%',
+      marginLeft: 0,
+      transform: 'translate(-50%, -50%)'
+    }
+  },
+  '@keyframes keyframe-c2b': {
+    '0%': {
+      right: '50%',
+      marginRight: 0,
+      transform: 'translate(50%, -50%)'
+    },
+    '100%': {
+      right: '100%',
+      marginRight: '-80px',
+      transform: 'translate(0, -50%)'
+    }
+  },
+  '@keyframes keyframe-c2f': {
+    '0%': {
+      left: ' 50%',
+      marginLeft: 0,
+      transform: 'translate(-50%, -50%)'
+    },
+    '100%': {
+      left: '100%',
+      marginLeft: '-80px',
+      transform: 'translate(0, -50%)'
+    }
+  },
+  '@keyframes keyframe-b2c': {
+    '0%': {
+      right: '100%',
+      marginRight: '-80px',
+      transform: 'translate(0, -50%)'
+    },
+    '100%': {
+      right: '50%',
+      marginRight: 0,
+      transform: 'translate(50%, -50%)'
+    }
+  },
+  // image
+  href: {
+    outline: 'none',
+    cursor: 'pointer',
+    textDecoration: 'none'
+  },
+  image: {
+    position: 'relative',
+    overflow: 'hidden',
+    display: 'inline-block',
+    boxSizing: 'border-box',
+    background: _theme.default.imageBackgroundColor,
+    '& > *': {
+      position: 'absolute'
+    }
+  },
+  img: {
+    maxWidth: '100%',
+    maxHeight: '100%',
+    borderStyle: 'none'
+  },
+  inner: {
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0
+  },
+  fit: {
+    '& $inner': {
+      backgroundPosition: '50% 50%',
+      backgroundRepeat: 'no-repeat'
+    }
+  },
+  fill: {
+    '& $inner': {
+      backgroundSize: 'cover',
+      backgroundPosition: '50% 50%',
+      backgroundRepeat: 'no-repeat'
+    }
+  },
+  previewMask: {
+    display: 'none',
+    // icon
+    '& svg': {
+      width: 16,
+      height: 16,
+      color: '#fff'
+    }
+  },
+  download: {
+    // hover
+    '&:hover': {
+      // after
+      '& $previewMask': {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        background: _theme.default.imageMaskBackgroundColor
+      }
+    }
+  },
+  preview: {
+    '&:hover': {
+      '& $previewMask': {
+        display: 'flex',
+        justifyContent: 'center',
+        alignItems: 'center',
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        background: _theme.default.imageMaskBackgroundColor
+      }
+    }
+  },
+  center: {
+    '& $img': {
+      margin: 'auto'
+    },
+    '& $inner': {
+      display: 'flex'
+    }
+  },
+  stretch: {
+    '& $img': {
+      width: '100%',
+      height: '100%'
+    }
+  },
+  circle: {
+    borderRadius: _theme.default.imageCircleBorderRadius,
+    border: "1px solid ".concat(_theme.default.imageCircleBorderColor)
+  },
+  rounded: {
+    borderRadius: _theme.default.imageRoundedBorderRadius,
+    border: "1px solid ".concat(_theme.default.imageRoundedBorderColor)
+  },
+  thumbnail: {
+    borderRadius: _theme.default.imageThumbnailBorderRadius,
+    backgroundColor: '#FFFFFF',
+    border: "1px solid ".concat(_theme.default.imageThumbnailBorderColor),
+    '& $inner': {
+      top: 4,
+      left: 4,
+      right: 4,
+      bottom: 4
+    }
+  },
+  placeholder: {
+    width: '100%',
+    height: '100%',
+    margin: 'auto',
+    backgroundColor: _theme.default.imagePlaceholderBackgroundColor
+  },
+  defaultPlaceholder: {
+    width: '100%',
+    height: '100%',
+    margin: 'auto',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: _theme.default.imagePlaceholderBackgroundColor
+  },
+  defaultError: {
+    width: '100%',
+    height: '100%',
+    margin: 'auto',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    color: _theme.default.imageErrorFontColor,
+    fontSize: _theme.default.imageErrorFontSize,
+    backgroundColor: _theme.default.imageErrorBackgroundColor,
+    // icon
+    '& svg': {
+      width: 16,
+      height: 16,
+      color: '#B3B7C1'
+    }
+  },
+  error: {
+    width: '100%',
+    height: '100%',
+    margin: 'auto',
+    backgroundColor: _theme.default.imageErrorBackgroundColor
+  },
+  overlay: {
+    position: 'absolute',
+    zIndex: 1100,
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    background: _theme.default.imageMaskBackgroundColor
+  },
+  magnify: {
+    display: 'inline-block',
+    margin: 'auto',
+    boxSizing: 'content-box',
+    '& img': {
+      position: 'relative',
+      display: 'block',
+      borderStyle: 'none'
+    }
+  },
+  close: {
+    position: 'absolute',
+    top: -15,
+    right: -15,
+    zIndex: 1,
+    cursor: 'pointer',
+    outline: 'none',
+    width: 32,
+    height: 32,
+    color: '#666C7C'
+  },
+  // gallery
+  gallery: {
+    position: 'fixed',
+    zIndex: 1100,
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0
+  },
+  galleryInit: {
+    transform: 'translate(-50%,-50%)'
+  },
+  galleryForward: {
+    transform: 'translate(-50%,-50%)',
+    display: 'flex',
+    position: 'absolute'
+  },
+  galleryBackward: {
+    transform: 'translate(-50%,-50%)',
+    display: 'flex',
+    position: 'absolute'
+  },
+  galleryCenter: {
+    cursor: 'zoom-in',
+    position: 'absolute',
+    display: 'flex',
+    zIndex: 20,
+    minWidth: 100,
+    minHeight: 100,
+    background: '#fff',
+    top: '50%',
+    '&$galleryInit': {
+      left: '50%'
+    },
+    '&$galleryForward': {
+      animation: '$keyframe-f2c 0.5s ease-in-out'
+    },
+    '&$galleryBackward': {
+      animation: '$keyframe-b2c 0.5s ease-in-out'
+    }
+  },
+  galleryLeft: {
+    marginRight: '-80px',
+    opacity: 0.4,
+    transform: 'translateY(-50%)',
+    display: 'flex',
+    position: 'absolute',
+    zIndex: 10,
+    right: '100%',
+    top: '50%',
+    '&$galleryForward': {
+      animation: '$keyframe-c2b 0.5s ease-in-out'
+    }
+  },
+  galleryRight: {
+    marginLeft: '-80px',
+    opacity: 0.4,
+    transform: 'translateY(-50%)',
+    display: 'flex',
+    position: 'absolute',
+    zIndex: 10,
+    left: '100%',
+    top: '50%',
+    '&$galleryBackward': {
+      animation: '$keyframe-c2f 0.5s ease-in-out'
+    }
+  },
+  // group
+  group: {
+    lineHeight: 1,
+    display: 'inline-block',
+    '& $image + $image': {
+      marginLeft: _theme.default.imageGroupNearlyMargin
+    }
+  },
+  groupPile: {
+    position: 'relative',
+    '& $image:nth-child(1)': {
+      // zIndex: 3,
+    },
+    '& $groupPileItem:nth-child(2)': {
+      position: 'absolute',
+      borderWidth: 0,
+      top: 1,
+      zIndex: -1,
+      marginLeft: 0,
+      transform: 'scale(0.9375)',
+      background: '#CCCFD7',
+      borderRadius: 2,
+      right: '-6%'
+    },
+    '& $groupPileItem:nth-child(3)': {
+      position: 'absolute',
+      borderWidth: 0,
+      top: 1,
+      zIndex: -2,
+      marginLeft: 0,
+      transform: 'scale(0.875)',
+      background: '#E8EBF0',
+      borderRadius: 2,
+      right: '-12%'
+    }
+  },
+  groupPileItem: {
+    position: 'absolute'
+  },
+  groupCount: {
+    position: 'absolute',
+    right: 1,
+    bottom: 3,
+    minWidth: 20,
+    height: 20,
+    backgroundColor: 'rgba(2, 11, 24, 0.3)',
+    borderRadius: '4px 0 4px 0',
+    padding: 4,
+    boxSizing: 'border-box',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    // span
+    '& > span': {
+      fontSize: 12,
+      color: '#fff',
+      marginLeft: 4
+    },
+    // icon
+    '& > svg': {
+      width: 12,
+      height: 12,
+      color: '#fff'
+    }
+  }
+};
+var _default = ImageStyle;
+exports.default = _default;

package/esm/image/index.d.ts

@@ -0,0 +1,5 @@
+import imageStyle, { ImageClasses } from './image';
+declare const useImageStyle: (data?: undefined) => import("jss").Classes<keyof ImageClasses>;
+export { imageStyle, useImageStyle };
+export type { ImageClasses };
+export default useImageStyle;

package/esm/image/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, "imageStyle", {
+  enumerable: true,
+  get: function get() {
+    return _image.default;
+  }
+});
+exports.useImageStyle = void 0;
+var _jssStyle = require("../jss-style");
+var _image = _interopRequireDefault(require("./image"));
+var useImageStyle = (0, _jssStyle.styled)(_image.default, 'image');
+exports.useImageStyle = useImageStyle;
+var _default = useImageStyle;
+exports.default = _default;

package/esm/index.d.ts

@@ -0,0 +1,43 @@
+export * from './alert';
+export * from './breadcrumb';
+export * from './button';
+export * from './carousel';
+export * from './checkbox';
+export * from './date-picker';
+export * from './divider';
+export * from './dropdown';
+export * from './editable-area';
+export * from './empty';
+export * from './form';
+export * from './icon';
+export * from './image';
+export * from './inner-title';
+export * from './input';
+export * from './list';
+export * from './menu';
+export * from './message';
+export * from './modal';
+export * from './pagination';
+export * from './popover';
+export * from './progress';
+export * from './radio';
+export * from './rate';
+export * from './select';
+export * from './slider';
+export * from './spin';
+export * from './sticky';
+export * from './steps';
+export * from './switch';
+export * from './table';
+export * from './tabs';
+export * from './tag';
+export * from './textarea';
+export * from './tooltip';
+export * from './transfer';
+export * from './tree';
+export * from './upload';
+export * from './virtual-scroll';
+export { styled, StyleProvider } from './jss-style';
+export * as mixins from './mixin';
+declare const _default: {};
+export default _default;