antd/es/layout/style/index.js

An enterprise-class UI design language and React components implementation

import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _extends from "@babel/runtime/helpers/esm/extends";
import { genComponentStyleHook, mergeToken } from '../../theme';
import genLayoutLightStyle from './light';

var genLayoutStyle = function genLayoutStyle(token) {
  var _extends2;

  var antCls = token.antCls,
      componentCls = token.componentCls,
      colorText = token.colorText,
      colorTextLightSolid = token.colorTextLightSolid,
      colorBgHeader = token.colorBgHeader,
      colorBgBody = token.colorBgBody,
      colorBgTrigger = token.colorBgTrigger,
      layoutHeaderHeight = token.layoutHeaderHeight,
      layoutHeaderPaddingInline = token.layoutHeaderPaddingInline,
      layoutHeaderColor = token.layoutHeaderColor,
      layoutFooterPadding = token.layoutFooterPadding,
      layoutTriggerHeight = token.layoutTriggerHeight,
      layoutZeroTriggerSize = token.layoutZeroTriggerSize,
      motionDurationMid = token.motionDurationMid,
      motionDurationSlow = token.motionDurationSlow,
      fontSizeBase = token.fontSizeBase,
      radiusBase = token.radiusBase;
  return _defineProperty({}, componentCls, _extends(_extends((_extends2 = {
    display: 'flex',
    flex: 'auto',
    flexDirection: 'column',

    /* fix firefox can't set height smaller than content on flex item */
    minHeight: 0,
    background: colorBgBody,
    '&, *': {
      boxSizing: 'border-box'
    }
  }, _defineProperty(_extends2, "&".concat(componentCls, "-has-sider"), _defineProperty({
    flexDirection: 'row'
  }, "> ".concat(componentCls, ", > ").concat(componentCls, "-content"), {
    // https://segmentfault.com/a/1190000019498300
    width: 0
  })), _defineProperty(_extends2, "".concat(componentCls, "-header, &").concat(componentCls, "-footer"), {
    flex: '0 0 auto'
  }), _defineProperty(_extends2, "".concat(componentCls, "-header"), _defineProperty({
    height: layoutHeaderHeight,
    paddingInline: layoutHeaderPaddingInline,
    color: layoutHeaderColor,
    lineHeight: "".concat(layoutHeaderHeight, "px"),
    background: colorBgHeader
  }, "".concat(antCls, "-menu"), {
    lineHeight: 'inherit'
  })), _defineProperty(_extends2, "".concat(componentCls, "-footer"), {
    padding: layoutFooterPadding,
    color: colorText,
    fontSize: fontSizeBase,
    background: colorBgBody
  }), _defineProperty(_extends2, "".concat(componentCls, "-content"), {
    flex: 'auto',
    // fix firefox can't set height smaller than content on flex item
    minHeight: 0
  }), _defineProperty(_extends2, "".concat(componentCls, "-sider"), {
    position: 'relative',
    // fix firefox can't set width smaller than content on flex item
    minWidth: 0,
    background: colorBgHeader,
    transition: "all ".concat(motionDurationMid),
    '&-children': _defineProperty({
      height: '100%',
      // Hack for fixing margin collapse bug
      // https://github.com/ant-design/ant-design/issues/7967
      // solution from https://stackoverflow.com/a/33132624/3040605
      marginTop: -0.1,
      paddingTop: 0.1
    }, "".concat(antCls, "-menu").concat(antCls, "menu-inline-collapsed"), {
      width: 'auto'
    }),
    '&-has-trigger': {
      paddingBottom: layoutTriggerHeight
    },
    '&-right': {
      order: 1
    },
    '&-trigger': {
      position: 'fixed',
      bottom: 0,
      zIndex: 1,
      height: layoutTriggerHeight,
      color: colorTextLightSolid,
      lineHeight: "".concat(layoutTriggerHeight, "px"),
      textAlign: 'center',
      background: colorBgTrigger,
      cursor: 'pointer',
      transition: "all ".concat(motionDurationMid)
    },
    '&-zero-width': {
      '> *': {
        overflow: 'hidden'
      },
      '&-trigger': {
        position: 'absolute',
        top: layoutHeaderHeight,
        insetInlineEnd: -layoutZeroTriggerSize,
        zIndex: 1,
        width: layoutZeroTriggerSize,
        height: layoutZeroTriggerSize,
        color: colorTextLightSolid,
        fontSize: token.fontSizeXL,
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        background: colorBgHeader,
        borderStartStartRadius: 0,
        borderStartEndRadius: radiusBase,
        borderEndEndRadius: radiusBase,
        borderEndStartRadius: 0,
        cursor: 'pointer',
        transition: "background ".concat(motionDurationSlow, " ease"),
        '&::after': {
          position: 'absolute',
          inset: 0,
          background: 'transparent',
          transition: "all ".concat(motionDurationSlow),
          content: '""'
        },
        '&:hover::after': {
          // FIXME: Hardcode, but seems no need to create a token for this
          background: "rgba(255, 255, 255, 0.2)"
        },
        '&-right': {
          insetInlineStart: -layoutZeroTriggerSize,
          borderStartStartRadius: radiusBase,
          borderStartEndRadius: 0,
          borderEndEndRadius: 0,
          borderEndStartRadius: radiusBase
        }
      }
    }
  }), _extends2), genLayoutLightStyle(token)), {
    // RTL
    '&-rtl': {
      direction: 'rtl'
    }
  }));
}; // ============================== Export ==============================


export default genComponentStyleHook('Layout', function (token) {
  var colorText = token.colorText,
      controlHeightSM = token.controlHeightSM,
      controlHeight = token.controlHeight,
      controlHeightLG = token.controlHeightLG,
      marginXXS = token.marginXXS;
  var layoutHeaderPaddingInline = controlHeightLG * 1.25;
  var layoutToken = mergeToken(token, {
    // Layout
    layoutHeaderHeight: controlHeight * 2,
    layoutHeaderPaddingInline: layoutHeaderPaddingInline,
    layoutHeaderColor: colorText,
    layoutFooterPadding: "".concat(controlHeightSM, "px ").concat(layoutHeaderPaddingInline, "px"),
    layoutTriggerHeight: controlHeightLG + marginXXS * 2,
    layoutZeroTriggerSize: controlHeightLG
  });
  return [genLayoutStyle(layoutToken)];
}, {
  colorBgHeader: '#001529',
  colorBgBody: '#f0f2f5',
  colorBgTrigger: '#002140'
});