@sheinx/shineout-style 3.0.0-alpha.1

package/cjs/alert/alert.d.ts

@@ -0,0 +1,4 @@
+import { JsStyles } from '../jss-style';
+export declare type AlertClass = 'alert' | 'noBordered' | 'content' | 'widthTitle' | 'title' | 'close' | 'info' | 'success' | 'warning' | 'confirmwarning' | 'danger' | 'infoIcon' | 'successIcon' | 'warningIcon' | 'confirmwarningIcon' | 'confirmIcon' | 'dangerIcon' | 'icon' | 'text' | 'pending';
+declare const alertStyle: JsStyles<AlertClass>;
+export default alertStyle;

package/cjs/alert/alert.js

@@ -0,0 +1,135 @@
+"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 alertStyle = {
+  alert: {
+    // display: 'table',
+    display: 'flex',
+    width: '100%',
+    lineHeight: '1em',
+    boxSizing: 'border-box',
+    position: 'relative',
+    alignItems: 'flex-start',
+    color: _theme.default.alertFontColor,
+    padding: "".concat(_theme.default.alertPaddingY, " ").concat(_theme.default.alertPaddingX),
+    borderRadius: _theme.default.alertBorderRadius,
+    borderWidth: 1,
+    borderStyle: 'solid',
+    opacity: 1,
+    transformOrigin: '0 0',
+    transform: 'scaleY(1) translateZ(0)',
+    '& [data-soui-layout="row"]': {
+      display: 'table-row'
+    },
+    '& [data-soui-layout="cell"]': {
+      display: 'table-cell',
+      verticalAlign: 'top',
+      height: 'auto'
+    },
+    '& [data-soui-children="true"]': {
+      fontSize: _theme.default.alertFontSize,
+      lineHeight: _theme.default.lineHeightDynamic
+    },
+    '&$widthTitle': {},
+    '& $icon': {}
+  },
+  widthTitle: {
+    '& $icon': {
+      // marginBottom: Token.alertNearlyMargin,
+      width: 20,
+      height: 24
+    },
+    '& $title': {
+      lineHeight: '24px'
+    },
+    '& $close': {
+      marginBottom: _theme.default.alertNearlyMargin
+    }
+  },
+  title: {
+    fontSize: _theme.default.alertTitleFontSize,
+    fontWeight: 500,
+    marginBottom: 4,
+    overflowWrap: 'anywhere',
+    lineHeight: _theme.default.alertTitleFontSize
+  },
+  text: {
+    overflowWrap: 'anywhere',
+    fontSize: _theme.default.alertFontSize
+  },
+  close: {
+    cursor: 'pointer',
+    width: _theme.default.alertFontSize,
+    color: _theme.default.alertCloseFontColor,
+    flex: '0 0 auto',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginLeft: _theme.default.alertNearlyMargin
+  },
+  content: {
+    flex: '1 1 0'
+  },
+  pending: {
+    opacity: 0,
+    transformOrigin: '0 0',
+    transform: 'scaleY(.8) translateZ(0)',
+    transition: 'transform .3s cubic-bezier(.3,1.3,.3,1),opacity .3s cubic-bezier(.3,1.3,.3,1)'
+  },
+  info: {
+    backgroundColor: _theme.default.alertInfoBackgroundColor,
+    borderColor: _theme.default.alertInfoBorderColor
+  },
+  success: {
+    backgroundColor: _theme.default.alertSuccessBackgroundColor,
+    borderColor: _theme.default.alertSuccessBorderColor
+  },
+  warning: {
+    backgroundColor: _theme.default.alertWarningBackgroundColor,
+    borderColor: _theme.default.alertWarningBorderColor
+  },
+  confirmwarning: {
+    backgroundColor: _theme.default.alertDangerBackgroundColor,
+    borderColor: _theme.default.alertDangerBorderColor
+  },
+  danger: {
+    backgroundColor: _theme.default.alertDangerBackgroundColor,
+    borderColor: _theme.default.alertDangerBorderColor
+  },
+  infoIcon: {
+    color: _theme.default.alertInfoFontColor
+  },
+  successIcon: {
+    color: _theme.default.alertSuccessFontColor
+  },
+  warningIcon: {
+    color: _theme.default.alertWarningFontColor
+  },
+  confirmwarningIcon: {
+    color: _theme.default.alertDangerFontColor
+  },
+  dangerIcon: {
+    color: _theme.default.alertDangerFontColor
+  },
+  confirmIcon: {
+    color: _theme.default.alertWarningFontColor
+  },
+  noBordered: {
+    borderColor: 'transparent'
+  },
+  icon: {
+    width: 16,
+    display: 'flex',
+    flex: '0 0 auto',
+    alignItems: 'center',
+    marginRight: _theme.default.alertNearlyMargin
+  }
+};
+var _default = alertStyle;
+exports.default = _default;

package/cjs/alert/index.d.ts

@@ -0,0 +1,4 @@
+import alertStyle from './alert';
+declare const useAlertStyle: (data?: undefined) => import("jss").Classes<import("./alert").AlertClass>;
+export { alertStyle, useAlertStyle };
+export default useAlertStyle;

package/cjs/alert/index.js

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

package/cjs/breadcrumb/breadcrumb.d.ts

@@ -0,0 +1,16 @@
+import { JsStyles } from '../jss-style';
+export declare type BreadcrumbClasses = {
+    wrapper: string;
+    content: string;
+    item: string;
+    itemWithDrop: string;
+    down: string;
+    downOpen: string;
+    dropdownItem: string;
+    separator: string;
+    dropdown: string;
+    ellipsis: string;
+};
+export declare type BreadcrumbClassType = keyof BreadcrumbClasses;
+declare const breadcrumbStyle: JsStyles<BreadcrumbClassType>;
+export default breadcrumbStyle;

package/cjs/breadcrumb/breadcrumb.js

@@ -0,0 +1,83 @@
+"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 breadcrumbStyle = {
+  wrapper: {
+    lineHeight: _theme.default.lineHeightDynamic,
+    fontSize: _theme.default.breadcrumbFontSize,
+    display: 'flex',
+    alignItems: 'center',
+    color: _theme.default.breadcrumbFontColor,
+    '& a': {
+      textDecoration: 'none',
+      color: _theme.default.breadcrumbLinkColor,
+      cursor: 'pointer',
+      '&:hover': {
+        color: _theme.default.breadcrumbLinkHoverColor
+      }
+    }
+  },
+  content: {
+    '&&': {
+      display: 'flex',
+      alignItems: 'center'
+    }
+  },
+  ellipsis: {
+    color: _theme.default.breadcrumbLinkColor,
+    position: 'relative',
+    top: '-3px'
+  },
+  item: {
+    display: 'flex',
+    alignItems: 'center'
+  },
+  itemWithDrop: {
+    display: 'flex',
+    alignItems: 'center'
+  },
+  down: {
+    width: 14,
+    height: 14,
+    lineHeight: '1',
+    marginLeft: 4
+  },
+  downOpen: {
+    transform: 'rotate(180deg)'
+  },
+  dropdown: {
+    backgroundColor: _theme.default.breadcrumbListBackgroundColor,
+    boxShadow: _theme.default.breadcrumbListShadow,
+    border: "1px solid ".concat(_theme.default.breadcrumbListBorderColor),
+    padding: "".concat(_theme.default.breadcrumbListPaddingY, " 0"),
+    color: _theme.default.breadcrumbLinkColor
+  },
+  dropdownItem: {
+    lineHeight: _theme.default.lineHeightDynamic,
+    fontSize: _theme.default.breadcrumbFontSize,
+    cursor: 'pointer',
+    color: _theme.default.breadcrumbFontColor,
+    '&:hover': {
+      backgroundColor: _theme.default.breadcrumbListItemHoverBackgroundColor
+    },
+    '& $content, &  a': {
+      padding: "".concat(_theme.default.breadcrumbListItemPaddingY, " ").concat(_theme.default.breadcrumbListItemPaddingX),
+      display: 'inline-block',
+      textDecoration: 'none',
+      color: 'inherit',
+      minWidth: '100px'
+    }
+  },
+  separator: {
+    margin: "0 ".concat(_theme.default.breadcrumbSeparatorMarginX),
+    color: _theme.default.breadcrumbLinkColor
+  }
+};
+var _default = breadcrumbStyle;
+exports.default = _default;

package/cjs/breadcrumb/index.d.ts

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

package/cjs/breadcrumb/index.js

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

package/cjs/button/button.d.ts

@@ -0,0 +1,4 @@
+import { JsStyles } from '../jss-style';
+declare type ButtonClass = 'button' | 'default' | 'disabled' | 'loading' | 'primary' | 'secondary' | 'danger' | 'warning' | 'success' | 'text' | 'outline' | 'dashed' | 'round' | 'circle' | 'square' | 'link' | 'href' | 'small' | 'large' | 'group' | 'groupItem' | 'spin';
+declare const ButtonStyle: JsStyles<ButtonClass>;
+export default ButtonStyle;