mirror of
https://github.com/ant-design/ant-design.git
synced 2026-02-09 02:49:18 +08:00
refactor: 🛠 use genCssVar hook to generate CSS variables (#56546)
* refactor: 🛠 use genCssVar hook to generate CSS variables * update * update * update * update * update * Update components/tooltip/style/index.ts Co-authored-by: thinkasany <480968828@qq.com> Signed-off-by: lijianan <574980606@qq.com> * update * fix: update --------- Signed-off-by: lijianan <574980606@qq.com> Co-authored-by: thinkasany <480968828@qq.com>
This commit is contained in:
@@ -24,7 +24,7 @@ const genFloatButtonStyle: GenerateStyle<FloatButtonToken, CSSObject> = (token)
|
||||
// == Variable ==
|
||||
// ==============================================================
|
||||
{
|
||||
[varName`size`]: unit(floatButtonSize),
|
||||
[varName('size')]: unit(floatButtonSize),
|
||||
},
|
||||
|
||||
// ==============================================================
|
||||
@@ -35,8 +35,8 @@ const genFloatButtonStyle: GenerateStyle<FloatButtonToken, CSSObject> = (token)
|
||||
margin: 0,
|
||||
padding: `${unit(token.paddingXXS)} 0`,
|
||||
|
||||
width: varRef`size`,
|
||||
minHeight: varRef`size`,
|
||||
width: varRef('size'),
|
||||
minHeight: varRef('size'),
|
||||
height: 'auto',
|
||||
wordBreak: 'break-word',
|
||||
whiteSpace: 'normal',
|
||||
|
||||
@@ -20,8 +20,8 @@ const genGroupStyle: GenerateStyle<FloatButtonToken, CSSObject> = (token) => {
|
||||
// == Variable ==
|
||||
// ==============================================================
|
||||
{
|
||||
[varName`list-transform-start`]: `translate(0,${unit(floatButtonSize)})`,
|
||||
[varName`list-trigger-offset`]: `calc(${unit(floatButtonSize)} + ${unit(padding)})`,
|
||||
[varName('list-transform-start')]: `translate(0,${unit(floatButtonSize)})`,
|
||||
[varName('list-trigger-offset')]: `calc(${unit(floatButtonSize)} + ${unit(padding)})`,
|
||||
},
|
||||
|
||||
// ==============================================================
|
||||
@@ -80,7 +80,7 @@ const genGroupStyle: GenerateStyle<FloatButtonToken, CSSObject> = (token) => {
|
||||
|
||||
'&-enter, &-appear': {
|
||||
opacity: 0,
|
||||
transform: varRef`list-transform-start`,
|
||||
transform: varRef('list-transform-start'),
|
||||
|
||||
'&-active': {
|
||||
opacity: 1,
|
||||
@@ -91,7 +91,7 @@ const genGroupStyle: GenerateStyle<FloatButtonToken, CSSObject> = (token) => {
|
||||
'&-leave': {
|
||||
'&-active': {
|
||||
opacity: 0,
|
||||
transform: varRef`list-transform-start`,
|
||||
transform: varRef('list-transform-start'),
|
||||
},
|
||||
},
|
||||
},
|
||||
@@ -100,28 +100,28 @@ const genGroupStyle: GenerateStyle<FloatButtonToken, CSSObject> = (token) => {
|
||||
// ======================== Placements ========================
|
||||
'&-top': {
|
||||
[listCls]: {
|
||||
bottom: varRef`list-trigger-offset`,
|
||||
bottom: varRef('list-trigger-offset'),
|
||||
},
|
||||
},
|
||||
|
||||
'&-bottom': {
|
||||
[listCls]: {
|
||||
[varName`list-transform-start`]: `translate(0, calc(${unit(floatButtonSize)} * -1))`,
|
||||
top: varRef`list-trigger-offset`,
|
||||
[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`,
|
||||
[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`,
|
||||
[varName('list-transform-start')]: `translate(calc(${unit(floatButtonSize)} * -1), 0)`,
|
||||
left: varRef('list-trigger-offset'),
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user