@beetag/antd 4.24.16

package/lib/input-number/style/index.d.ts

@@ -0,0 +1,2 @@
+import '../../style/default.less';
+import './index.less';

package/lib/input-number/style/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+require("../../style/default.less");
+require("./index.less");

package/lib/input-number/style/index.less

@@ -0,0 +1,3 @@
+@root-entry-name: default;
+
+@import './index-pure.less';

package/lib/input-number/style/rtl.less

@@ -0,0 +1,71 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+@import '../../input/style/mixin';
+
+@input-number-prefix-cls: ~'@{ant-prefix}-input-number';
+
+.@{input-number-prefix-cls} {
+  &-rtl {
+    direction: rtl;
+  }
+
+  &-handler {
+    .@{input-number-prefix-cls}-rtl & {
+      border-right: @border-width-base @border-style-base @input-number-handler-border-color;
+      border-left: 0;
+    }
+
+    &-wrap {
+      .@{input-number-prefix-cls}-rtl & {
+        right: auto;
+        left: 0;
+      }
+
+      .@{input-number-prefix-cls}-rtl.@{input-number-prefix-cls}-borderless & {
+        border-right-width: 0;
+      }
+    }
+
+    &-up {
+      .@{input-number-prefix-cls}-rtl & {
+        border-top-right-radius: 0;
+      }
+    }
+
+    &-down {
+      .@{input-number-prefix-cls}-rtl & {
+        border-bottom-right-radius: 0;
+      }
+    }
+  }
+
+  &-input {
+    .@{input-number-prefix-cls}-rtl & {
+      direction: ltr;
+      text-align: right;
+    }
+  }
+}
+
+// https://github.com/ant-design/ant-design/issues/35870
+.input-group(@input-number-prefix-cls) {
+  > .@{input-number-prefix-cls}-rtl:first-child {
+    border-radius: 0 @border-radius-base @border-radius-base 0;
+  }
+  > .@{input-number-prefix-cls}-rtl:last-child {
+    border-radius: @border-radius-base 0 0 @border-radius-base;
+  }
+
+  &-addon {
+    .@{input-number-prefix-cls}-group-rtl &:first-child {
+      border-right: @border-width-base @border-style-base @input-border-color;
+      border-left: 0;
+      border-radius: 0 @border-radius-base @border-radius-base 0;
+    }
+    .@{input-number-prefix-cls}-group-rtl &:last-child {
+      border-right: 0;
+      border-left: @border-width-base @border-style-base @input-border-color;
+      border-radius: @border-radius-base 0 0 @border-radius-base;
+    }
+  }
+}

package/lib/input-number/style/status.less

@@ -0,0 +1,29 @@
+@import '../../input/style/mixin';
+
+@input-number-prefix-cls: ~'@{ant-prefix}-input-number';
+
+@input-number-wrapper-cls: @input-number-prefix-cls, ~'@{input-number-prefix-cls}-affix-wrapper';
+
+each(@input-number-wrapper-cls, {
+  .@{value} {
+    &-status-error {
+      .status-color(@value, @error-color, @error-color, @input-bg, @error-color-hover, @error-color-outline);
+      .status-color-common(@input-number-prefix-cls, @error-color, @error-color, @input-bg, @error-color-hover, @error-color-outline)
+    }
+
+    &-status-warning {
+      .status-color(@value, @warning-color, @warning-color, @input-bg, @warning-color-hover, @warning-color-outline);
+      .status-color-common(@input-number-prefix-cls, @warning-color, @warning-color, @input-bg, @warning-color-hover, @warning-color-outline)
+    }
+  }
+});
+
+.@{input-number-prefix-cls}-group-wrapper {
+  &-status-error {
+    .group-status-color(@input-number-prefix-cls, @error-color, @error-color);
+  }
+
+  &-status-warning {
+    .group-status-color(@input-number-prefix-cls, @warning-color, @warning-color);
+  }
+}

package/lib/layout/Sider.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+export interface SiderContextProps {
+    siderCollapsed?: boolean;
+}
+export declare const SiderContext: React.Context<SiderContextProps>;
+export type CollapseType = 'clickTrigger' | 'responsive';
+export type SiderTheme = 'light' | 'dark';
+export interface SiderProps extends React.HTMLAttributes<HTMLDivElement> {
+    prefixCls?: string;
+    collapsible?: boolean;
+    collapsed?: boolean;
+    defaultCollapsed?: boolean;
+    reverseArrow?: boolean;
+    onCollapse?: (collapsed: boolean, type: CollapseType) => void;
+    zeroWidthTriggerStyle?: React.CSSProperties;
+    trigger?: React.ReactNode;
+    width?: number | string;
+    collapsedWidth?: number | string;
+    breakpoint?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+    theme?: SiderTheme;
+    onBreakpoint?: (broken: boolean) => void;
+}
+export interface SiderState {
+    collapsed?: boolean;
+    below: boolean;
+}
+declare const Sider: React.ForwardRefExoticComponent<SiderProps & React.RefAttributes<HTMLDivElement>>;
+export default Sider;

package/lib/layout/Sider.js

@@ -0,0 +1,192 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.SiderContext = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _BarsOutlined = _interopRequireDefault(require("@ant-design/icons/BarsOutlined"));
+var _LeftOutlined = _interopRequireDefault(require("@ant-design/icons/LeftOutlined"));
+var _RightOutlined = _interopRequireDefault(require("@ant-design/icons/RightOutlined"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _omit = _interopRequireDefault(require("rc-util/lib/omit"));
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _configProvider = require("../config-provider");
+var _isNumeric = _interopRequireDefault(require("../_util/isNumeric"));
+var _layout = require("./layout");
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+var dimensionMaxMap = {
+  xs: '479.98px',
+  sm: '575.98px',
+  md: '767.98px',
+  lg: '991.98px',
+  xl: '1199.98px',
+  xxl: '1599.98px'
+};
+var SiderContext = exports.SiderContext = /*#__PURE__*/React.createContext({});
+var generateId = function () {
+  var i = 0;
+  return function () {
+    var prefix = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+    i += 1;
+    return "".concat(prefix).concat(i);
+  };
+}();
+var Sider = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+  var customizePrefixCls = _a.prefixCls,
+    className = _a.className,
+    trigger = _a.trigger,
+    children = _a.children,
+    _a$defaultCollapsed = _a.defaultCollapsed,
+    defaultCollapsed = _a$defaultCollapsed === void 0 ? false : _a$defaultCollapsed,
+    _a$theme = _a.theme,
+    theme = _a$theme === void 0 ? 'dark' : _a$theme,
+    _a$style = _a.style,
+    style = _a$style === void 0 ? {} : _a$style,
+    _a$collapsible = _a.collapsible,
+    collapsible = _a$collapsible === void 0 ? false : _a$collapsible,
+    _a$reverseArrow = _a.reverseArrow,
+    reverseArrow = _a$reverseArrow === void 0 ? false : _a$reverseArrow,
+    _a$width = _a.width,
+    width = _a$width === void 0 ? 200 : _a$width,
+    _a$collapsedWidth = _a.collapsedWidth,
+    collapsedWidth = _a$collapsedWidth === void 0 ? 80 : _a$collapsedWidth,
+    zeroWidthTriggerStyle = _a.zeroWidthTriggerStyle,
+    breakpoint = _a.breakpoint,
+    onCollapse = _a.onCollapse,
+    onBreakpoint = _a.onBreakpoint,
+    props = __rest(_a, ["prefixCls", "className", "trigger", "children", "defaultCollapsed", "theme", "style", "collapsible", "reverseArrow", "width", "collapsedWidth", "zeroWidthTriggerStyle", "breakpoint", "onCollapse", "onBreakpoint"]);
+  var _useContext = (0, _react.useContext)(_layout.LayoutContext),
+    siderHook = _useContext.siderHook;
+  var _useState = (0, _react.useState)('collapsed' in props ? props.collapsed : defaultCollapsed),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    collapsed = _useState2[0],
+    setCollapsed = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
+    below = _useState4[0],
+    setBelow = _useState4[1];
+  (0, _react.useEffect)(function () {
+    if ('collapsed' in props) {
+      setCollapsed(props.collapsed);
+    }
+  }, [props.collapsed]);
+  var handleSetCollapsed = function handleSetCollapsed(value, type) {
+    if (!('collapsed' in props)) {
+      setCollapsed(value);
+    }
+    onCollapse === null || onCollapse === void 0 ? void 0 : onCollapse(value, type);
+  };
+  // ========================= Responsive =========================
+  var responsiveHandlerRef = (0, _react.useRef)();
+  responsiveHandlerRef.current = function (mql) {
+    setBelow(mql.matches);
+    onBreakpoint === null || onBreakpoint === void 0 ? void 0 : onBreakpoint(mql.matches);
+    if (collapsed !== mql.matches) {
+      handleSetCollapsed(mql.matches, 'responsive');
+    }
+  };
+  (0, _react.useEffect)(function () {
+    function responsiveHandler(mql) {
+      return responsiveHandlerRef.current(mql);
+    }
+    var mql;
+    if (typeof window !== 'undefined') {
+      var _window = window,
+        matchMedia = _window.matchMedia;
+      if (matchMedia && breakpoint && breakpoint in dimensionMaxMap) {
+        mql = matchMedia("(max-width: ".concat(dimensionMaxMap[breakpoint], ")"));
+        try {
+          mql.addEventListener('change', responsiveHandler);
+        } catch (error) {
+          mql.addListener(responsiveHandler);
+        }
+        responsiveHandler(mql);
+      }
+    }
+    return function () {
+      try {
+        mql === null || mql === void 0 ? void 0 : mql.removeEventListener('change', responsiveHandler);
+      } catch (error) {
+        mql === null || mql === void 0 ? void 0 : mql.removeListener(responsiveHandler);
+      }
+    };
+  }, [breakpoint]); // in order to accept dynamic 'breakpoint' property, we need to add 'breakpoint' into dependency array.
+  (0, _react.useEffect)(function () {
+    var uniqueId = generateId('ant-sider-');
+    siderHook.addSider(uniqueId);
+    return function () {
+      return siderHook.removeSider(uniqueId);
+    };
+  }, []);
+  var toggle = function toggle() {
+    handleSetCollapsed(!collapsed, 'clickTrigger');
+  };
+  var _useContext2 = (0, _react.useContext)(_configProvider.ConfigContext),
+    getPrefixCls = _useContext2.getPrefixCls;
+  var renderSider = function renderSider() {
+    var prefixCls = getPrefixCls('layout-sider', customizePrefixCls);
+    var divProps = (0, _omit["default"])(props, ['collapsed']);
+    var rawWidth = collapsed ? collapsedWidth : width;
+    // use "px" as fallback unit for width
+    var siderWidth = (0, _isNumeric["default"])(rawWidth) ? "".concat(rawWidth, "px") : String(rawWidth);
+    // special trigger when collapsedWidth == 0
+    var zeroWidthTrigger = parseFloat(String(collapsedWidth || 0)) === 0 ? (/*#__PURE__*/React.createElement("span", {
+      onClick: toggle,
+      className: (0, _classnames["default"])("".concat(prefixCls, "-zero-width-trigger"), "".concat(prefixCls, "-zero-width-trigger-").concat(reverseArrow ? 'right' : 'left')),
+      style: zeroWidthTriggerStyle
+    }, trigger || /*#__PURE__*/React.createElement(_BarsOutlined["default"], null))) : null;
+    var iconObj = {
+      expanded: reverseArrow ? /*#__PURE__*/React.createElement(_RightOutlined["default"], null) : /*#__PURE__*/React.createElement(_LeftOutlined["default"], null),
+      collapsed: reverseArrow ? /*#__PURE__*/React.createElement(_LeftOutlined["default"], null) : /*#__PURE__*/React.createElement(_RightOutlined["default"], null)
+    };
+    var status = collapsed ? 'collapsed' : 'expanded';
+    var defaultTrigger = iconObj[status];
+    var triggerDom = trigger !== null ? zeroWidthTrigger || (/*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-trigger"),
+      onClick: toggle,
+      style: {
+        width: siderWidth
+      }
+    }, trigger || defaultTrigger)) : null;
+    var divStyle = (0, _extends2["default"])((0, _extends2["default"])({}, style), {
+      flex: "0 0 ".concat(siderWidth),
+      maxWidth: siderWidth,
+      minWidth: siderWidth,
+      width: siderWidth
+    });
+    var siderCls = (0, _classnames["default"])(prefixCls, "".concat(prefixCls, "-").concat(theme), (0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, "".concat(prefixCls, "-collapsed"), !!collapsed), "".concat(prefixCls, "-has-trigger"), collapsible && trigger !== null && !zeroWidthTrigger), "".concat(prefixCls, "-below"), !!below), "".concat(prefixCls, "-zero-width"), parseFloat(siderWidth) === 0), className);
+    return /*#__PURE__*/React.createElement("aside", (0, _extends2["default"])({
+      className: siderCls
+    }, divProps, {
+      style: divStyle,
+      ref: ref
+    }), /*#__PURE__*/React.createElement("div", {
+      className: "".concat(prefixCls, "-children")
+    }, children), collapsible || below && zeroWidthTrigger ? triggerDom : null);
+  };
+  var contextValue = React.useMemo(function () {
+    return {
+      siderCollapsed: collapsed
+    };
+  }, [collapsed]);
+  return /*#__PURE__*/React.createElement(SiderContext.Provider, {
+    value: contextValue
+  }, renderSider());
+});
+if (process.env.NODE_ENV !== 'production') {
+  Sider.displayName = 'Sider';
+}
+var _default = exports["default"] = Sider;

package/lib/layout/index.d.ts

@@ -0,0 +1,15 @@
+import InternalLayout, { Content, Footer, Header } from './layout';
+import Sider, { SiderContext } from './Sider';
+export { BasicProps as LayoutProps } from './layout';
+export { SiderProps } from './Sider';
+type InternalLayoutType = typeof InternalLayout;
+type CompoundedComponent = InternalLayoutType & {
+    Header: typeof Header;
+    Footer: typeof Footer;
+    Content: typeof Content;
+    Sider: typeof Sider;
+    /** @private Internal Context. Do not use in your production. */
+    _InternalSiderContext: typeof SiderContext;
+};
+declare const Layout: CompoundedComponent;
+export default Layout;

package/lib/layout/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _layout = _interopRequireWildcard(require("./layout"));
+var _Sider = _interopRequireWildcard(require("./Sider"));
+var Layout = _layout["default"];
+Layout.Header = _layout.Header;
+Layout.Footer = _layout.Footer;
+Layout.Content = _layout.Content;
+Layout.Sider = _Sider["default"];
+Layout._InternalSiderContext = _Sider.SiderContext;
+var _default = exports["default"] = Layout;

package/lib/layout/layout.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+export interface GeneratorProps {
+    suffixCls: string;
+    tagName: 'header' | 'footer' | 'main' | 'section';
+    displayName: string;
+}
+export interface BasicProps extends React.HTMLAttributes<HTMLDivElement> {
+    prefixCls?: string;
+    hasSider?: boolean;
+}
+export interface LayoutContextProps {
+    siderHook: {
+        addSider: (id: string) => void;
+        removeSider: (id: string) => void;
+    };
+}
+export declare const LayoutContext: React.Context<LayoutContextProps>;
+declare const Layout: React.ForwardRefExoticComponent<BasicProps & React.RefAttributes<HTMLElement>>;
+declare const Header: React.ForwardRefExoticComponent<BasicProps & React.RefAttributes<HTMLElement>>;
+declare const Footer: React.ForwardRefExoticComponent<BasicProps & React.RefAttributes<HTMLElement>>;
+declare const Content: React.ForwardRefExoticComponent<BasicProps & React.RefAttributes<HTMLElement>>;
+export { Header, Footer, Content };
+export default Layout;

package/lib/layout/layout.js

@@ -0,0 +1,128 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard")["default"];
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault")["default"];
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.LayoutContext = exports.Header = exports.Footer = exports.Content = void 0;
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var React = _interopRequireWildcard(require("react"));
+var _configProvider = require("../config-provider");
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+var LayoutContext = exports.LayoutContext = /*#__PURE__*/React.createContext({
+  siderHook: {
+    addSider: function addSider() {
+      return null;
+    },
+    removeSider: function removeSider() {
+      return null;
+    }
+  }
+});
+function generator(_ref) {
+  var suffixCls = _ref.suffixCls,
+    tagName = _ref.tagName,
+    displayName = _ref.displayName;
+  return function (BasicComponent) {
+    var Adapter = /*#__PURE__*/React.forwardRef(function (props, ref) {
+      var _React$useContext = React.useContext(_configProvider.ConfigContext),
+        getPrefixCls = _React$useContext.getPrefixCls;
+      var customizePrefixCls = props.prefixCls;
+      var prefixCls = getPrefixCls(suffixCls, customizePrefixCls);
+      return /*#__PURE__*/React.createElement(BasicComponent, (0, _extends2["default"])({
+        ref: ref,
+        prefixCls: prefixCls,
+        tagName: tagName
+      }, props));
+    });
+    if (process.env.NODE_ENV !== 'production') {
+      Adapter.displayName = displayName;
+    }
+    return Adapter;
+  };
+}
+var Basic = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var prefixCls = props.prefixCls,
+    className = props.className,
+    children = props.children,
+    tagName = props.tagName,
+    others = __rest(props, ["prefixCls", "className", "children", "tagName"]);
+  var classString = (0, _classnames["default"])(prefixCls, className);
+  return /*#__PURE__*/React.createElement(tagName, (0, _extends2["default"])((0, _extends2["default"])({
+    className: classString
+  }, others), {
+    ref: ref
+  }), children);
+});
+var BasicLayout = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var _React$useContext2 = React.useContext(_configProvider.ConfigContext),
+    direction = _React$useContext2.direction;
+  var _React$useState = React.useState([]),
+    _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+    siders = _React$useState2[0],
+    setSiders = _React$useState2[1];
+  var prefixCls = props.prefixCls,
+    className = props.className,
+    children = props.children,
+    hasSider = props.hasSider,
+    Tag = props.tagName,
+    others = __rest(props, ["prefixCls", "className", "children", "hasSider", "tagName"]);
+  var classString = (0, _classnames["default"])(prefixCls, (0, _defineProperty2["default"])((0, _defineProperty2["default"])({}, "".concat(prefixCls, "-has-sider"), typeof hasSider === 'boolean' ? hasSider : siders.length > 0), "".concat(prefixCls, "-rtl"), direction === 'rtl'), className);
+  var contextValue = React.useMemo(function () {
+    return {
+      siderHook: {
+        addSider: function addSider(id) {
+          setSiders(function (prev) {
+            return [].concat((0, _toConsumableArray2["default"])(prev), [id]);
+          });
+        },
+        removeSider: function removeSider(id) {
+          setSiders(function (prev) {
+            return prev.filter(function (currentId) {
+              return currentId !== id;
+            });
+          });
+        }
+      }
+    };
+  }, []);
+  return /*#__PURE__*/React.createElement(LayoutContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/React.createElement(Tag, (0, _extends2["default"])({
+    ref: ref,
+    className: classString
+  }, others), children));
+});
+var Layout = generator({
+  suffixCls: 'layout',
+  tagName: 'section',
+  displayName: 'Layout'
+})(BasicLayout);
+var Header = exports.Header = generator({
+  suffixCls: 'layout-header',
+  tagName: 'header',
+  displayName: 'Header'
+})(Basic);
+var Footer = exports.Footer = generator({
+  suffixCls: 'layout-footer',
+  tagName: 'footer',
+  displayName: 'Footer'
+})(Basic);
+var Content = exports.Content = generator({
+  suffixCls: 'layout-content',
+  tagName: 'main',
+  displayName: 'Content'
+})(Basic);
+var _default = exports["default"] = Layout;

package/lib/layout/style/css.js

@@ -0,0 +1,4 @@
+"use strict";
+
+require("../../style/default.css");
+require("./index.css");

package/lib/layout/style/index-pure.less

@@ -0,0 +1,145 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@layout-prefix-cls: ~'@{ant-prefix}-layout';
+@layout-menu-prefix-cls: ~'@{ant-prefix}-menu';
+
+.@{layout-prefix-cls} {
+  display: flex;
+  flex: auto;
+  flex-direction: column;
+
+  /* fix firefox can't set height smaller than content on flex item */
+  min-height: 0;
+  background: @layout-body-background;
+
+  &,
+  * {
+    box-sizing: border-box;
+  }
+
+  &&-has-sider {
+    flex-direction: row;
+
+    > .@{layout-prefix-cls},
+    > .@{layout-prefix-cls}-content {
+      width: 0; // https://segmentfault.com/a/1190000019498300
+    }
+  }
+
+  &-header,
+  &-footer {
+    flex: 0 0 auto;
+  }
+
+  &-header {
+    height: @layout-header-height;
+    padding: @layout-header-padding;
+    color: @layout-header-color;
+    line-height: @layout-header-height;
+    background: @layout-header-background;
+  }
+
+  &-footer {
+    padding: @layout-footer-padding;
+    color: @text-color;
+    font-size: @font-size-base;
+    background: @layout-footer-background;
+  }
+
+  &-content {
+    flex: auto;
+
+    /* fix firefox can't set height smaller than content on flex item */
+    min-height: 0;
+  }
+
+  &-sider {
+    position: relative;
+
+    /* fix firefox can't set width smaller than content on flex item */
+    min-width: 0;
+    background: @layout-sider-background;
+    transition: all 0.2s;
+
+    &-children {
+      height: 100%;
+      margin-top: -0.1px;
+      // Hack for fixing margin collaspe bug
+      // https://github.com/ant-design/ant-design/issues/7967
+      // solution from https://stackoverflow.com/a/33132624/3040605
+      padding-top: 0.1px;
+
+      .@{layout-menu-prefix-cls}.@{layout-menu-prefix-cls}-inline-collapsed {
+        width: auto;
+      }
+    }
+
+    &-has-trigger {
+      padding-bottom: @layout-trigger-height;
+    }
+
+    &-right {
+      order: 1;
+    }
+
+    &-trigger {
+      position: fixed;
+      bottom: 0;
+      z-index: 1;
+      height: @layout-trigger-height;
+      color: @layout-trigger-color;
+      line-height: @layout-trigger-height;
+      text-align: center;
+      background: @layout-trigger-background;
+      cursor: pointer;
+      transition: all 0.2s;
+    }
+
+    &-zero-width {
+      > * {
+        overflow: hidden;
+      }
+
+      &-trigger {
+        position: absolute;
+        top: @layout-header-height;
+        right: -@layout-zero-trigger-width;
+        z-index: 1;
+        width: @layout-zero-trigger-width;
+        height: @layout-zero-trigger-height;
+        color: @layout-trigger-color;
+        font-size: (@layout-zero-trigger-width / 2);
+        line-height: @layout-zero-trigger-height;
+        text-align: center;
+        background: @layout-sider-background;
+        border-radius: 0 @border-radius-base @border-radius-base 0;
+        cursor: pointer;
+        transition: background 0.3s ease;
+
+        &::after {
+          position: absolute;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          left: 0;
+          background: transparent;
+          transition: all 0.3s;
+          content: '';
+        }
+
+        &:hover::after {
+          background: rgba(255, 255, 255, 0.1);
+        }
+
+        &-right {
+          left: -@layout-zero-trigger-width;
+          border-radius: @border-radius-base 0 0 @border-radius-base;
+        }
+      }
+    }
+  }
+}
+
+@import './light';
+@import './rtl';