@ant-design/pro-layout/lib/components/SettingDrawer/style/index.js

@ant-design/pro-layout

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useStyle = useStyle;
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _proProvider = require("@ant-design/pro-provider");
var genSettingDrawerStyle = function genSettingDrawerStyle(token) {
  return (0, _defineProperty2.default)((0, _defineProperty2.default)({}, "".concat(token.componentCls, "-handle"), {
    position: 'fixed',
    insetBlockStart: '240px',
    insetInlineEnd: '0px',
    zIndex: 0,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    width: '48px',
    height: '48px',
    fontSize: '16px',
    textAlign: 'center',
    backgroundColor: token.colorPrimary,
    borderEndStartRadius: token.borderRadiusLG,
    borderStartStartRadius: token.borderRadiusLG,
    '-webkit-backdropilter': 'saturate(180%) blur(20px)',
    backdropFilter: 'saturate(180%) blur(20px)',
    cursor: 'pointer',
    pointerEvents: 'auto'
  }), token.componentCls, {
    '&-content': {
      position: 'relative',
      minHeight: '100%',
      color: token.colorText
    },
    '&-body-title': {
      marginBlock: token.marginXS,
      fontSize: '14px',
      lineHeight: '22px',
      color: token.colorTextHeading
    },
    '&-block-checkbox': {
      display: 'flex',
      minHeight: 42,
      gap: token.marginSM,
      '& &-item': {
        position: 'relative',
        width: '44px',
        height: '36px',
        overflow: 'hidden',
        borderRadius: '4px',
        boxShadow: token.boxShadow,
        cursor: 'pointer',
        fontSize: 56,
        lineHeight: '56px',
        '&::before': {
          position: 'absolute',
          insetBlockStart: 0,
          insetInlineStart: 0,
          width: '33%',
          height: '100%',
          content: "''"
        },
        '&::after': {
          position: 'absolute',
          insetBlockStart: 0,
          insetInlineStart: 0,
          width: '100%',
          height: '25%',
          content: "''"
        },
        '&-realDark': {
          backgroundColor: 'rgba(0, 21, 41, 0.85)',
          '&::before': {
            backgroundColor: 'rgba(0, 0, 0, 0.65)'
          },
          '&::after': {
            backgroundColor: 'rgba(0, 0, 0, 0.85)'
          }
        },
        '&-light': {
          backgroundColor: '#fff',
          '&::before': {
            backgroundColor: '#fff'
          },
          '&::after': {
            backgroundColor: '#fff'
          }
        },
        '&-dark,&-side': {
          backgroundColor: token.colorBgElevated,
          '&::before': {
            zIndex: '1',
            backgroundColor: '#001529'
          },
          '&::after': {
            backgroundColor: token.colorBgContainer
          }
        },
        '&-top': {
          backgroundColor: token.colorBgElevated,
          '&::before': {
            backgroundColor: 'transparent'
          },
          '&::after': {
            backgroundColor: '#001529'
          }
        },
        '&-mix': {
          backgroundColor: token.colorBgElevated,
          '&::before': {
            backgroundColor: token.colorBgContainer
          },
          '&::after': {
            backgroundColor: '#001529'
          }
        }
      },
      '& &-selectIcon': {
        position: 'absolute',
        insetInlineEnd: '6px',
        bottom: '4px',
        color: token.colorPrimary,
        fontWeight: 'bold',
        fontSize: '14px',
        pointerEvents: 'none',
        '.action': {
          color: token.colorPrimary
        }
      },
      '& &-icon': {
        fontSize: 56,
        lineHeight: '56px'
      }
    },
    '&-theme-color': {
      marginBlockStart: '16px',
      overflow: 'hidden',
      '& &-block': {
        float: 'left',
        width: '20px',
        height: '20px',
        marginBlockStart: 8,
        marginInlineEnd: 8,
        color: '#fff',
        fontWeight: 'bold',
        textAlign: 'center',
        borderRadius: '2px',
        cursor: 'pointer'
      }
    },
    '&-list': (0, _defineProperty2.default)({}, "li".concat(token.antCls, "-list-item"), {
      paddingInline: 0,
      paddingBlock: 8
    })
  });
};
function useStyle(prefixCls) {
  return (0, _proProvider.useStyle)('ProLayoutSettingDrawer', function (token) {
    var settingDrawerToken = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, token), {}, {
      componentCls: ".".concat(prefixCls)
    });
    return [genSettingDrawerStyle(settingDrawerToken)];
  });
}