1

2026-05-25 17:08:18 +08:00
parent df501f6151
commit f1259b71b5
9178 changed files with 1626125 additions and 0 deletions
@@ -0,0 +1,111 @@
+import { unit } from '@ant-design/cssinjs';
+import { resetComponent } from '../../style';
+import { genCssVar } from '../../theme/util/genStyleUtils';
+const genGroupStyle = token => {
+  const {
+    componentCls,
+    antCls,
+    floatButtonSize,
+    padding
+  } = token;
+  const groupCls = `${componentCls}-group`;
+  const listCls = `${groupCls}-list`;
+  const [varName, varRef] = genCssVar(antCls, 'float-btn');
+  return {
+    [groupCls]: [
+    // ==============================================================
+    // ==                         Variable                         ==
+    // ==============================================================
+    {
+      [varName('list-transform-start')]: `translate(0,${unit(floatButtonSize)})`,
+      [varName('list-trigger-offset')]: `calc(${unit(floatButtonSize)} + ${unit(padding)})`
+    },
+    // ==============================================================
+    // ==                         Template                         ==
+    // ==============================================================
+    {
+      ...resetComponent(token),
+      position: 'fixed',
+      zIndex: token.zIndexPopupBase,
+      insetInlineEnd: token.floatButtonInsetInlineEnd,
+      bottom: token.floatButtonInsetBlockEnd,
+      gap: padding,
+      '&-rtl': {
+        direction: 'rtl'
+      },
+      // =========================== Pure ===========================
+      [`&${componentCls}-pure`]: {
+        position: 'relative',
+        inset: 'auto'
+      },
+      // ========================== Button ==========================
+      [componentCls]: {
+        position: 'relative',
+        inset: 'auto'
+      }
+    },
+    // ==============================================================
+    // ==                           List                           ==
+    // ==============================================================
+    {
+      // ======================== Individual ========================
+      // Not in group
+      [`&:not(${groupCls}-individual) ${listCls}`]: {
+        boxShadow: token.boxShadowSecondary
+      },
+      [`&${groupCls}-individual ${listCls}`]: {
+        gap: padding
+      },
+      // =========================== Menu ===========================
+      [`&-menu-mode ${listCls}`]: {
+        position: 'absolute'
+      },
+      // ========================== Motion ==========================
+      [listCls]: {
+        borderRadius: token.borderRadiusLG,
+        '&-motion': {
+          transition: `all ${token.motionDurationSlow}`,
+          '&-enter, &-appear': {
+            opacity: 0,
+            transform: varRef('list-transform-start'),
+            '&-active': {
+              opacity: 1,
+              transform: `translate(0, 0)`
+            }
+          },
+          '&-leave': {
+            '&-active': {
+              opacity: 0,
+              transform: varRef('list-transform-start')
+            }
+          }
+        }
+      },
+      // ======================== Placements ========================
+      '&-top': {
+        [listCls]: {
+          bottom: varRef('list-trigger-offset')
+        }
+      },
+      '&-bottom': {
+        [listCls]: {
+          [varName('list-transform-start')]: `translate(0, calc(${unit(floatButtonSize)} * -1))`,
+          top: varRef('list-trigger-offset')
+        }
+      },
+      '&-left': {
+        [listCls]: {
+          [varName('list-transform-start')]: `translate(${unit(floatButtonSize)}, 0)`,
+          right: varRef('list-trigger-offset')
+        }
+      },
+      '&-right': {
+        [listCls]: {
+          [varName('list-transform-start')]: `translate(calc(${unit(floatButtonSize)} * -1), 0)`,
+          left: varRef('list-trigger-offset')
+        }
+      }
+    }]
+  };
+};
+export default genGroupStyle;