@ant-design/pro-components 3.1.0-0 → 3.1.1-0

package/lib/form/layouts/LoginFormPage/style.js

@@ -1,149 +1,158 @@
 "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 _provider = require("../../../provider");
-var genLoginFormStyle = function genLoginFormStyle(token) {
-  return (0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, token.componentCls, {
-    display: 'flex',
-    width: '100%',
-    height: '100%',
-    backgroundSize: 'cover',
-    backgroundPosition: 'center',
-    backgroundRepeat: 'no-repeat',
-    '&-notice': {
+const genLoginFormStyle = token => {
+  return {
+    [token.componentCls]: {
       display: 'flex',
-      flex: '1',
-      zIndex: 99,
-      alignItems: 'flex-end',
-      '&-activity': {
-        marginBlock: 24,
-        marginInline: 24,
-        paddingInline: 24,
-        paddingBlock: 24,
-        '&-title': {
-          fontWeight: '500',
-          fontSize: '28px'
-        },
-        '&-subTitle': {
-          marginBlockStart: 8,
-          fontSize: '16px'
-        },
-        '&-action': {
-          marginBlockStart: '24px'
+      width: '100%',
+      height: '100%',
+      backgroundSize: 'cover',
+      backgroundPosition: 'center',
+      backgroundRepeat: 'no-repeat',
+      '&-notice': {
+        display: 'flex',
+        flex: '1',
+        zIndex: 99,
+        alignItems: 'flex-end',
+        '&-activity': {
+          marginBlock: 24,
+          marginInline: 24,
+          paddingInline: 24,
+          paddingBlock: 24,
+          '&-title': {
+            fontWeight: '500',
+            fontSize: '28px'
+          },
+          '&-subTitle': {
+            marginBlockStart: 8,
+            fontSize: '16px'
+          },
+          '&-action': {
+            marginBlockStart: '24px'
+          }
+        }
+      },
+      '&-left': {
+        display: 'flex',
+        flex: '1',
+        zIndex: 99,
+        flexDirection: 'column',
+        maxWidth: '550px',
+        paddingInline: 0,
+        paddingBlock: 32,
+        overflow: 'auto',
+        alignItems: 'center',
+        justifyContent: 'center',
+        padding: 24,
+        height: 'max-content',
+        margin: 'auto'
+      },
+      '&-container': {
+        borderRadius: token.borderRadius,
+        backgroundSize: '100%',
+        backgroundPosition: 'top',
+        backdropFilter: 'blur(10px)',
+        backgroundColor: (0, _provider.setAlpha)(token.colorBgContainer, 0.8),
+        backgroundImage: 'radial-gradient(circle at 93% 1e+02%, rgba(22,119,255,0.17) 0%, rgba(255,255,255,0.05) 23%, rgba(255,255,255,0.03) 87%, rgba(22,119,255,0.12) 109%)',
+        padding: 32,
+        boxShadow: '0px 0px 24px 0px rgba(0,0,0,0.1)'
+      },
+      '&-top': {
+        textAlign: 'center'
+      },
+      '&-header': {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        minHeight: '44px',
+        lineHeight: '44px',
+        a: {
+          textDecoration: 'none'
+        }
+      },
+      '&-title': {
+        position: 'relative',
+        tinsetBlockStartop: '2px',
+        color: token.colorTextHeading,
+        fontWeight: '600',
+        fontSize: '33px'
+      },
+      '&-logo': {
+        width: '44px',
+        height: '44px',
+        marginInlineEnd: '16px',
+        verticalAlign: 'top',
+        img: {
+          width: '100%'
+        }
+      },
+      '&-desc': {
+        marginBlockStart: '12px',
+        marginBlockEnd: '40px',
+        color: token.colorTextSecondary,
+        fontSize: token.fontSize
+      },
+      '&-main': {
+        width: '328px',
+        margin: '0 auto',
+        '&-other': {
+          marginBlockStart: '24px',
+          lineHeight: '22px',
+          textAlign: 'start'
         }
       }
     },
-    '&-left': {
-      display: 'flex',
-      flex: '1',
-      zIndex: 99,
-      flexDirection: 'column',
-      maxWidth: '550px',
-      paddingInline: 0,
-      paddingBlock: 32,
-      overflow: 'auto',
-      alignItems: 'center',
-      justifyContent: 'center',
-      padding: 24,
-      height: 'max-content',
-      margin: 'auto'
-    },
-    '&-container': {
-      borderRadius: token.borderRadius,
-      backgroundSize: '100%',
-      backgroundPosition: 'top',
-      backdropFilter: 'blur(10px)',
-      backgroundColor: (0, _provider.setAlpha)(token.colorBgContainer, 0.8),
-      backgroundImage: 'radial-gradient(circle at 93% 1e+02%, rgba(22,119,255,0.17) 0%, rgba(255,255,255,0.05) 23%, rgba(255,255,255,0.03) 87%, rgba(22,119,255,0.12) 109%)',
-      padding: 32,
-      boxShadow: '0px 0px 24px 0px rgba(0,0,0,0.1)'
-    },
-    '&-top': {
-      textAlign: 'center'
-    },
-    '&-header': {
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      minHeight: '44px',
-      lineHeight: '44px',
-      a: {
-        textDecoration: 'none'
-      }
-    },
-    '&-title': {
-      position: 'relative',
-      tinsetBlockStartop: '2px',
-      color: token.colorTextHeading,
-      fontWeight: '600',
-      fontSize: '33px'
-    },
-    '&-logo': {
-      width: '44px',
-      height: '44px',
-      marginInlineEnd: '16px',
-      verticalAlign: 'top',
-      img: {
-        width: '100%'
+    [`@media (max-width: ${token.screenMDMin}px)`]: {
+      [token.componentCls]: {
+        flexDirection: 'column-reverse',
+        background: 'none !important',
+        '&-container': {
+          padding: 24,
+          boxShadow: 'none',
+          backgroundImage: 'none',
+          borderRadius: '0px'
+        },
+        '&-notice': {
+          display: 'flex',
+          flex: 'none',
+          alignItems: 'flex-start',
+          width: '100%',
+          '> div': {
+            width: '100%'
+          }
+        }
       }
     },
-    '&-desc': {
-      marginBlockStart: '12px',
-      marginBlockEnd: '40px',
-      color: token.colorTextSecondary,
-      fontSize: token.fontSize
-    },
-    '&-main': {
-      width: '328px',
-      margin: '0 auto',
-      '&-other': {
-        marginBlockStart: '24px',
-        lineHeight: '22px',
-        textAlign: 'start'
+    [`@media (min-width: ${token.screenMDMin}px)`]: {
+      [token.componentCls]: {
+        '&-left': {
+          backgroundRepeat: 'no-repeat',
+          backgroundPosition: 'center 110px',
+          backgroundSize: '100%'
+        }
       }
-    }
-  }), "@media (max-width: ".concat(token.screenMDMin, "px)"), (0, _defineProperty2.default)({}, token.componentCls, {
-    flexDirection: 'column-reverse',
-    background: 'none !important',
-    '&-container': {
-      padding: 24,
-      boxShadow: 'none',
-      backgroundImage: 'none',
-      borderRadius: '0px'
     },
-    '&-notice': {
-      display: 'flex',
-      flex: 'none',
-      alignItems: 'flex-start',
-      width: '100%',
-      '> div': {
-        width: '100%'
+    [`@media (max-width: ${token.screenSM}px)`]: {
+      [token.componentCls]: {
+        '&-main': {
+          width: '95%',
+          maxWidth: '328px'
+        }
       }
     }
-  })), "@media (min-width: ".concat(token.screenMDMin, "px)"), (0, _defineProperty2.default)({}, token.componentCls, {
-    '&-left': {
-      backgroundRepeat: 'no-repeat',
-      backgroundPosition: 'center 110px',
-      backgroundSize: '100%'
-    }
-  })), "@media (max-width: ".concat(token.screenSM, "px)"), (0, _defineProperty2.default)({}, token.componentCls, {
-    '&-main': {
-      width: '95%',
-      maxWidth: '328px'
-    }
-  }));
+  };
 };
 function useStyle(prefixCls) {
-  return (0, _provider.useStyle)('LoginFormPage', function (token) {
-    var loginFormToken = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, token), {}, {
-      componentCls: ".".concat(prefixCls)
-    });
+  return (0, _provider.useStyle)('LoginFormPage', token => {
+    const loginFormToken = {
+      ...token,
+      componentCls: `.${prefixCls}`
+    };
     return [genLoginFormStyle(loginFormToken)];
   });
 }