Hugging Face's logo

AbdulElahGwaith
/
ant-design

Arabic
English
ant
design
ant-design
Model card Files
xet
 Community
ant-design
File size: 3,680 Bytes
5941ac2
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
import { unit } from '@ant-design/cssinjs';
import type { CSSObject } from '@ant-design/cssinjs';

import type { FloatButtonToken } from '.';
import type { GenerateStyle } from '../../theme/interface';
import { genCssVar } from '../../theme/util/genStyleUtils';

const genFloatButtonStyle: GenerateStyle<FloatButtonToken, CSSObject> = (token) => {
  const { componentCls, floatButtonSize, iconCls, antCls, floatButtonIconSize } = token;

  const [varName, varRef] = genCssVar(antCls, 'float-btn');

  const badgeCls = `${componentCls}-badge`;

  const R = Math.SQRT2;
  const offsetR = (R - 1) / R;

  const offsetSquare = token.calc(token.borderRadius).mul(offsetR).equal();
  const offsetCircle = token.calc(token.controlHeight).div(2).mul(offsetR).equal();

  return {
    [componentCls]: [
      // ==============================================================
      // ==                         Variable                         ==
      // ==============================================================
      {
        [varName('size')]: unit(floatButtonSize),
      },

      // ==============================================================
      // ==                         Template                         ==
      // ==============================================================
      {
        flexDirection: 'column',
        margin: 0,
        padding: `${unit(token.paddingXXS)} 0`,

        width: varRef('size'),
        minHeight: varRef('size'),
        height: 'auto',
        wordBreak: 'break-word',
        whiteSpace: 'normal',
        gap: token.calc(token.paddingXXS).div(2).equal(),

        '&-rtl': {
          direction: 'rtl',
        },

        // ======================== Individual ========================
        // Not in group
        [`&${componentCls}-individual`]: {
          position: 'fixed',
          zIndex: token.zIndexPopupBase,
          insetInlineEnd: token.floatButtonInsetInlineEnd,
          bottom: token.floatButtonInsetBlockEnd,
          boxShadow: token.boxShadowSecondary,
        },

        // =========================== Pure ===========================
        [`&${componentCls}-pure`]: {
          position: 'relative',
          inset: 'auto',
        },

        // ========================== Empty ===========================
        '&:empty': {
          display: 'none',
        },

        // =========================== Icon ===========================
        [`${componentCls}-icon`]: {
          lineHeight: 1,
        },

        // Icon Only will has large icon Size
        [`&${componentCls}-icon-only`]: {
          [iconCls]: {
            fontSize: floatButtonIconSize,
          },
        },

        // =========================== Desc ===========================
        [`${componentCls}-content`]: {
          fontSize: token.fontSizeSM,
        },

        // ========================== Badge ===========================
        [badgeCls]: {
          position: 'absolute',
          top: 0,
          insetInlineEnd: 0,

          [`&:not(${badgeCls}-dot)`]: {
            transform: 'translate(50%, -50%)',
          },
        },

        // RTL
        [`&-rtl ${badgeCls}:not(${badgeCls}-dot)`]: {
          transform: 'translate(-50%, -50%)',
        },

        // Shape: square
        '&-square': {
          [`${badgeCls}-dot`]: {
            marginTop: offsetSquare,
            marginInlineEnd: offsetSquare,
          },
        },

        // Shape: circle
        '&-circle': {
          [badgeCls]: {
            marginTop: offsetCircle,
            marginInlineEnd: offsetCircle,
          },
        },
      },
    ],
  };
};

export default genFloatButtonStyle;