create v5 style file
This commit is contained in:
zhaowenkai
Родитель
8200bc9f18
Коммит
7eb36ef010
|
|
@ -35,6 +35,21 @@
|
|||
// If you have changed the default port / launch URL make sure to update the expectation below
|
||||
"url": "http://localhost:5000",
|
||||
"webRoot": "${workspaceFolder}/site/AntDesign.Docs.Wasm",
|
||||
}
|
||||
},
|
||||
{
|
||||
"name": "Migrator",
|
||||
"type": "node",
|
||||
"request": "launch",
|
||||
"skipFiles": [
|
||||
"<node_internals>/**"
|
||||
],
|
||||
"runtimeArgs": [
|
||||
"-r",
|
||||
"ts-node/register"
|
||||
],
|
||||
"args": [
|
||||
"${workspaceFolder}/scripts/migrator/index.ts"
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
using System;
|
||||
using CssInCs;
|
||||
using static AntDesign.GlobalStyle;
|
||||
using static AntDesign.Theme;
|
||||
|
||||
namespace AntDesign
|
||||
{
|
||||
public class AffixToken : TokenWithCommonCls
|
||||
{
|
||||
public int ZIndexPopup { get; set; }
|
||||
|
||||
}
|
||||
|
||||
public partial class Affix
|
||||
{
|
||||
public CSSObject GenSharedAffixStyle(AffixToken token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
return new CSSObject()
|
||||
{
|
||||
[componentCls] = new CSSObject()
|
||||
{
|
||||
Position = "fixed",
|
||||
ZIndex = token.ZIndexPopup,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
protected override CSSInterpolation[] UseStyle(GlobalToken token)
|
||||
{
|
||||
var affixToken = MergeToken(
|
||||
token,
|
||||
new AffixToken()
|
||||
{
|
||||
ZIndexPopup = token.ZIndexBase + 10,
|
||||
});
|
||||
return new CSSInterpolation[] { GenSharedAffixStyle(affixToken) };
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,247 @@
|
|||
using System;
|
||||
using CssInCs;
|
||||
using static AntDesign.GlobalStyle;
|
||||
using static AntDesign.Theme;
|
||||
|
||||
namespace AntDesign
|
||||
{
|
||||
public partial class AlertToken : TokenWithCommonCls
|
||||
{
|
||||
}
|
||||
|
||||
public partial class AlertToken
|
||||
{
|
||||
public int AlertIconSizeLG { get; set; }
|
||||
|
||||
public int AlertPaddingHorizontal { get; set; }
|
||||
|
||||
}
|
||||
|
||||
public partial class Alert
|
||||
{
|
||||
public CSSObject GenAlertTypeStyle(string bgColor, string borderColor, string iconColor, AlertToken token, string alertCls)
|
||||
{
|
||||
return new CSSObject()
|
||||
{
|
||||
BackgroundColor = bgColor,
|
||||
Border = @$"{token.LineWidth}px {token.LineType} {borderColor}",
|
||||
[$"{alertCls}-icon"] = new CSSObject()
|
||||
{
|
||||
Color = iconColor,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenBaseStyle(AlertToken token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var duration = token.MotionDurationSlow;
|
||||
var marginXS = token.MarginXS;
|
||||
var marginSM = token.MarginSM;
|
||||
var fontSize = token.FontSize;
|
||||
var fontSizeLG = token.FontSizeLG;
|
||||
var lineHeight = token.LineHeight;
|
||||
var borderRadius = token.BorderRadiusLG;
|
||||
var motionEaseInOutCirc = token.MotionEaseInOutCirc;
|
||||
var alertIconSizeLG = token.AlertIconSizeLG;
|
||||
var colorText = token.ColorText;
|
||||
var paddingContentVerticalSM = token.PaddingContentVerticalSM;
|
||||
var alertPaddingHorizontal = token.AlertPaddingHorizontal;
|
||||
var paddingMD = token.PaddingMD;
|
||||
var paddingContentHorizontalLG = token.PaddingContentHorizontalLG;
|
||||
return new CSSObject()
|
||||
{
|
||||
[componentCls] = new CSSObject()
|
||||
{
|
||||
["..."] = ResetComponent(token),
|
||||
Position = "relative",
|
||||
Display = "flex",
|
||||
AlignItems = "center",
|
||||
Padding = @$"{paddingContentVerticalSM}px {alertPaddingHorizontal}px",
|
||||
WordWrap = "break-word",
|
||||
BorderRadius = borderRadius,
|
||||
[$"&{componentCls}-rtl"] = new CSSObject()
|
||||
{
|
||||
Direction = "rtl",
|
||||
},
|
||||
[$"{componentCls}-content"] = new CSSObject()
|
||||
{
|
||||
Flex = 1,
|
||||
MinWidth = 0,
|
||||
},
|
||||
[$"{componentCls}-icon"] = new CSSObject()
|
||||
{
|
||||
MarginInlineEnd = marginXS,
|
||||
LineHeight = 0,
|
||||
},
|
||||
["&-description"] = new CSSObject()
|
||||
{
|
||||
Display = "none",
|
||||
FontSize = fontSize,
|
||||
LineHeight = lineHeight,
|
||||
},
|
||||
["&-message"] = new CSSObject()
|
||||
{
|
||||
Color = colorText,
|
||||
},
|
||||
[$"&{componentCls}-motion-leave"] = new CSSObject()
|
||||
{
|
||||
Overflow = "hidden",
|
||||
Opacity = 1,
|
||||
Transition = @$"max-height {duration} {motionEaseInOutCirc}, opacity {duration} {motionEaseInOutCirc},
|
||||
padding-top {duration} {motionEaseInOutCirc}, padding-bottom {duration} {motionEaseInOutCirc},
|
||||
margin-bottom {duration} {motionEaseInOutCirc}",
|
||||
},
|
||||
[$"&{componentCls}-motion-leave-active"] = new CSSObject()
|
||||
{
|
||||
MaxHeight = 0,
|
||||
MarginBottom = "0 !important",
|
||||
PaddingTop = 0,
|
||||
PaddingBottom = 0,
|
||||
Opacity = 0,
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-with-description"] = new CSSObject()
|
||||
{
|
||||
AlignItems = "flex-start",
|
||||
PaddingInline = paddingContentHorizontalLG,
|
||||
PaddingBlock = paddingMD,
|
||||
[$"{componentCls}-icon"] = new CSSObject()
|
||||
{
|
||||
MarginInlineEnd = marginSM,
|
||||
FontSize = alertIconSizeLG,
|
||||
LineHeight = 0,
|
||||
},
|
||||
[$"{componentCls}-message"] = new CSSObject()
|
||||
{
|
||||
Display = "block",
|
||||
MarginBottom = marginXS,
|
||||
Color = colorText,
|
||||
FontSize = fontSizeLG,
|
||||
},
|
||||
[$"{componentCls}-description"] = new CSSObject()
|
||||
{
|
||||
Display = "block",
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-banner"] = new CSSObject()
|
||||
{
|
||||
MarginBottom = 0,
|
||||
Border = "0 !important",
|
||||
BorderRadius = 0,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenTypeStyle(AlertToken token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var colorSuccess = token.ColorSuccess;
|
||||
var colorSuccessBorder = token.ColorSuccessBorder;
|
||||
var colorSuccessBg = token.ColorSuccessBg;
|
||||
var colorWarning = token.ColorWarning;
|
||||
var colorWarningBorder = token.ColorWarningBorder;
|
||||
var colorWarningBg = token.ColorWarningBg;
|
||||
var colorError = token.ColorError;
|
||||
var colorErrorBorder = token.ColorErrorBorder;
|
||||
var colorErrorBg = token.ColorErrorBg;
|
||||
var colorInfo = token.ColorInfo;
|
||||
var colorInfoBorder = token.ColorInfoBorder;
|
||||
var colorInfoBg = token.ColorInfoBg;
|
||||
return new CSSObject()
|
||||
{
|
||||
[componentCls] = new CSSObject()
|
||||
{
|
||||
["&-success"] = GenAlertTypeStyle(colorSuccessBg, colorSuccessBorder, colorSuccess, token, componentCls),
|
||||
["&-info"] = GenAlertTypeStyle(colorInfoBg, colorInfoBorder, colorInfo, token, componentCls),
|
||||
["&-warning"] = GenAlertTypeStyle(colorWarningBg, colorWarningBorder, colorWarning, token, componentCls),
|
||||
["&-error"] = new CSSObject()
|
||||
{
|
||||
["..."] = GenAlertTypeStyle(colorErrorBg, colorErrorBorder, colorError, token, componentCls),
|
||||
[$"{componentCls}-description > pre"] = new CSSObject()
|
||||
{
|
||||
Margin = 0,
|
||||
Padding = 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenActionStyle(AlertToken token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var iconCls = token.IconCls;
|
||||
var motionDurationMid = token.MotionDurationMid;
|
||||
var marginXS = token.MarginXS;
|
||||
var fontSizeIcon = token.FontSizeIcon;
|
||||
var colorIcon = token.ColorIcon;
|
||||
var colorIconHover = token.ColorIconHover;
|
||||
return new CSSObject()
|
||||
{
|
||||
[componentCls] = new CSSObject()
|
||||
{
|
||||
["&-action"] = new CSSObject()
|
||||
{
|
||||
MarginInlineStart = marginXS,
|
||||
},
|
||||
[$"{componentCls}-close-icon"] = new CSSObject()
|
||||
{
|
||||
MarginInlineStart = marginXS,
|
||||
Padding = 0,
|
||||
Overflow = "hidden",
|
||||
FontSize = fontSizeIcon,
|
||||
LineHeight = @$"{fontSizeIcon}px",
|
||||
BackgroundColor = "transparent",
|
||||
Border = "none",
|
||||
Outline = "none",
|
||||
Cursor = "pointer",
|
||||
[$"{iconCls}-close"] = new CSSObject()
|
||||
{
|
||||
Color = colorIcon,
|
||||
Transition = @$"color {motionDurationMid}",
|
||||
["&:hover"] = new CSSObject()
|
||||
{
|
||||
Color = colorIconHover,
|
||||
},
|
||||
},
|
||||
},
|
||||
["&-close-text"] = new CSSObject()
|
||||
{
|
||||
Color = colorIcon,
|
||||
Transition = @$"color {motionDurationMid}",
|
||||
["&:hover"] = new CSSObject()
|
||||
{
|
||||
Color = colorIconHover,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject[] GenAlertStyle(AlertToken token)
|
||||
{
|
||||
return new CSSObject[]
|
||||
{
|
||||
GenBaseStyle(token),
|
||||
GenTypeStyle(token),
|
||||
GenActionStyle(token)
|
||||
};
|
||||
}
|
||||
|
||||
protected override CSSInterpolation[] UseStyle(GlobalToken token)
|
||||
{
|
||||
var fontSizeHeading3 = token.FontSizeHeading3;
|
||||
var alertToken = MergeToken(
|
||||
token,
|
||||
new AlertToken()
|
||||
{
|
||||
AlertIconSizeLG = fontSizeHeading3,
|
||||
AlertPaddingHorizontal = 12,
|
||||
});
|
||||
return new CSSInterpolation[] { GenAlertStyle(alertToken) };
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,204 @@
|
|||
using System;
|
||||
using CssInCs;
|
||||
using static AntDesign.GlobalStyle;
|
||||
using static AntDesign.Theme;
|
||||
|
||||
namespace AntDesign
|
||||
{
|
||||
public partial class AnchorToken : TokenWithCommonCls
|
||||
{
|
||||
}
|
||||
|
||||
public partial class AnchorToken
|
||||
{
|
||||
public int HolderOffsetBlock { get; set; }
|
||||
|
||||
public int AnchorPaddingBlock { get; set; }
|
||||
|
||||
public int AnchorPaddingBlockSecondary { get; set; }
|
||||
|
||||
public int AnchorPaddingInline { get; set; }
|
||||
|
||||
public int AnchorBallSize { get; set; }
|
||||
|
||||
public int AnchorTitleBlock { get; set; }
|
||||
|
||||
}
|
||||
|
||||
public partial class Anchor
|
||||
{
|
||||
public CSSObject GenSharedAnchorStyle(AnchorToken token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var holderOffsetBlock = token.HolderOffsetBlock;
|
||||
var motionDurationSlow = token.MotionDurationSlow;
|
||||
var lineWidthBold = token.LineWidthBold;
|
||||
var colorPrimary = token.ColorPrimary;
|
||||
var lineType = token.LineType;
|
||||
var colorSplit = token.ColorSplit;
|
||||
return new CSSObject()
|
||||
{
|
||||
[$"{componentCls}-wrapper"] = new CSSObject()
|
||||
{
|
||||
MarginBlockStart = -holderOffsetBlock,
|
||||
PaddingBlockStart = holderOffsetBlock,
|
||||
BackgroundColor = "transparent",
|
||||
[componentCls] = new CSSObject()
|
||||
{
|
||||
["..."] = ResetComponent(token),
|
||||
Position = "relative",
|
||||
PaddingInlineStart = lineWidthBold,
|
||||
[$"{componentCls}-link"] = new CSSObject()
|
||||
{
|
||||
PaddingBlock = token.AnchorPaddingBlock,
|
||||
PaddingInline = @$"{token.AnchorPaddingInline}px 0",
|
||||
["&-title"] = new CSSObject()
|
||||
{
|
||||
["..."] = TextEllipsis,
|
||||
Position = "relative",
|
||||
Display = "block",
|
||||
MarginBlockEnd = token.AnchorTitleBlock,
|
||||
Color = token.ColorText,
|
||||
Transition = @$"all {token.MotionDurationSlow}",
|
||||
["&:only-child"] = new CSSObject()
|
||||
{
|
||||
MarginBlockEnd = 0,
|
||||
},
|
||||
},
|
||||
[$"&-active > {componentCls}-link-title"] = new CSSObject()
|
||||
{
|
||||
Color = token.ColorPrimary,
|
||||
},
|
||||
[$"{componentCls}-link"] = new CSSObject()
|
||||
{
|
||||
PaddingBlock = token.AnchorPaddingBlockSecondary,
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"&:not({componentCls}-wrapper-horizontal)"] = new CSSObject()
|
||||
{
|
||||
[componentCls] = new CSSObject()
|
||||
{
|
||||
["&::before"] = new CSSObject()
|
||||
{
|
||||
Position = "absolute",
|
||||
Left = new PropertySkip()
|
||||
{
|
||||
SkipCheck = true,
|
||||
Value = 0,
|
||||
},
|
||||
Top = 0,
|
||||
Height = "100%",
|
||||
BorderInlineStart = @$"{lineWidthBold}px {lineType} {colorSplit}",
|
||||
Content = "\" \"",
|
||||
},
|
||||
[$"{componentCls}-ink"] = new CSSObject()
|
||||
{
|
||||
Position = "absolute",
|
||||
Left = new PropertySkip()
|
||||
{
|
||||
SkipCheck = true,
|
||||
Value = 0,
|
||||
},
|
||||
Display = "none",
|
||||
Transform = "translateY(-50%)",
|
||||
Transition = @$"top {motionDurationSlow} ease-in-out",
|
||||
Width = lineWidthBold,
|
||||
BackgroundColor = colorPrimary,
|
||||
[$"&{componentCls}-ink-visible"] = new CSSObject()
|
||||
{
|
||||
Display = "inline-block",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-fixed {componentCls}-ink {componentCls}-ink"] = new CSSObject()
|
||||
{
|
||||
Display = "none",
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenSharedAnchorHorizontalStyle(AnchorToken token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var motionDurationSlow = token.MotionDurationSlow;
|
||||
var lineWidthBold = token.LineWidthBold;
|
||||
var colorPrimary = token.ColorPrimary;
|
||||
return new CSSObject()
|
||||
{
|
||||
[$"{componentCls}-wrapper-horizontal"] = new CSSObject()
|
||||
{
|
||||
Position = "relative",
|
||||
["&::before"] = new CSSObject()
|
||||
{
|
||||
Position = "absolute",
|
||||
Left = new PropertySkip()
|
||||
{
|
||||
SkipCheck = true,
|
||||
Value = 0,
|
||||
},
|
||||
Right = new PropertySkip()
|
||||
{
|
||||
SkipCheck = true,
|
||||
Value = 0,
|
||||
},
|
||||
Bottom = 0,
|
||||
BorderBottom = @$"1px {token.LineType} {token.ColorSplit}",
|
||||
Content = "\" \"",
|
||||
},
|
||||
[componentCls] = new CSSObject()
|
||||
{
|
||||
OverflowX = "scroll",
|
||||
Position = "relative",
|
||||
Display = "flex",
|
||||
ScrollbarWidth = "none",
|
||||
["&::-webkit-scrollbar"] = new CSSObject()
|
||||
{
|
||||
Display = "none",
|
||||
},
|
||||
[$"{componentCls}-link:first-of-type"] = new CSSObject()
|
||||
{
|
||||
PaddingInline = 0,
|
||||
},
|
||||
[$"{componentCls}-ink"] = new CSSObject()
|
||||
{
|
||||
Position = "absolute",
|
||||
Bottom = 0,
|
||||
Transition = @$"left {motionDurationSlow} ease-in-out, width {motionDurationSlow} ease-in-out",
|
||||
Height = lineWidthBold,
|
||||
BackgroundColor = colorPrimary,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
protected override CSSInterpolation[] UseStyle(GlobalToken token)
|
||||
{
|
||||
var fontSize = token.FontSize;
|
||||
var fontSizeLG = token.FontSizeLG;
|
||||
var padding = token.Padding;
|
||||
var paddingXXS = token.PaddingXXS;
|
||||
var anchorToken = MergeToken(
|
||||
token,
|
||||
new AnchorToken()
|
||||
{
|
||||
HolderOffsetBlock = paddingXXS,
|
||||
AnchorPaddingBlock = paddingXXS,
|
||||
AnchorPaddingBlockSecondary = paddingXXS / 2,
|
||||
AnchorPaddingInline = padding,
|
||||
AnchorTitleBlock = (fontSize / 14) * 3,
|
||||
AnchorBallSize = fontSizeLG / 2,
|
||||
});
|
||||
return new CSSInterpolation[]
|
||||
{
|
||||
GenSharedAnchorStyle(anchorToken),
|
||||
GenSharedAnchorHorizontalStyle(anchorToken)
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,192 @@
|
|||
using System;
|
||||
using CssInCs;
|
||||
using static AntDesign.GlobalStyle;
|
||||
using static AntDesign.Theme;
|
||||
|
||||
namespace AntDesign
|
||||
{
|
||||
public partial class AvatarToken : TokenWithCommonCls
|
||||
{
|
||||
}
|
||||
|
||||
public partial class AvatarToken
|
||||
{
|
||||
public string AvatarBg { get; set; }
|
||||
|
||||
public string AvatarColor { get; set; }
|
||||
|
||||
public int AvatarSizeBase { get; set; }
|
||||
|
||||
public int AvatarSizeLG { get; set; }
|
||||
|
||||
public int AvatarSizeSM { get; set; }
|
||||
|
||||
public int AvatarFontSizeBase { get; set; }
|
||||
|
||||
public int AvatarFontSizeLG { get; set; }
|
||||
|
||||
public int AvatarFontSizeSM { get; set; }
|
||||
|
||||
public int AvatarGroupOverlapping { get; set; }
|
||||
|
||||
public int AvatarGroupSpace { get; set; }
|
||||
|
||||
public string AvatarGroupBorderColor { get; set; }
|
||||
|
||||
public string AvatarBgColor { get; set; }
|
||||
|
||||
}
|
||||
|
||||
public partial class Avatar
|
||||
{
|
||||
public CSSObject GenBaseStyle(AvatarToken token)
|
||||
{
|
||||
var antCls = token.AntCls;
|
||||
var componentCls = token.ComponentCls;
|
||||
var iconCls = token.IconCls;
|
||||
var avatarBg = token.AvatarBg;
|
||||
var avatarColor = token.AvatarColor;
|
||||
var avatarSizeBase = token.AvatarSizeBase;
|
||||
var avatarSizeLG = token.AvatarSizeLG;
|
||||
var avatarSizeSM = token.AvatarSizeSM;
|
||||
var avatarFontSizeBase = token.AvatarFontSizeBase;
|
||||
var avatarFontSizeLG = token.AvatarFontSizeLG;
|
||||
var avatarFontSizeSM = token.AvatarFontSizeSM;
|
||||
var borderRadius = token.BorderRadius;
|
||||
var borderRadiusLG = token.BorderRadiusLG;
|
||||
var borderRadiusSM = token.BorderRadiusSM;
|
||||
var lineWidth = token.LineWidth;
|
||||
var lineType = token.LineType;
|
||||
var avatarSizeStyle = (int size, int fontSize, int radius) => {
|
||||
return new CSSObject()
|
||||
{
|
||||
Width = size,
|
||||
Height = size,
|
||||
LineHeight = @$"{size - lineWidth * 2}px",
|
||||
BorderRadius = "50%",
|
||||
[$"&{componentCls}-square"] = new CSSObject()
|
||||
{
|
||||
BorderRadius = radius,
|
||||
},
|
||||
[$"{componentCls}-string"] = new CSSObject()
|
||||
{
|
||||
Position = "absolute",
|
||||
Left = new PropertySkip()
|
||||
{
|
||||
SkipCheck = true,
|
||||
Value = "50%",
|
||||
},
|
||||
TransformOrigin = "0 center",
|
||||
},
|
||||
[$"&{componentCls}-icon"] = new CSSObject()
|
||||
{
|
||||
FontSize = fontSize,
|
||||
[$"> {iconCls}"] = new CSSObject()
|
||||
{
|
||||
Margin = 0,
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
return new CSSObject()
|
||||
{
|
||||
[componentCls] = new CSSObject()
|
||||
{
|
||||
["..."] = ResetComponent(token),
|
||||
Position = "relative",
|
||||
Display = "inline-block",
|
||||
Overflow = "hidden",
|
||||
Color = avatarColor,
|
||||
WhiteSpace = "nowrap",
|
||||
TextAlign = "center",
|
||||
VerticalAlign = "middle",
|
||||
Background = avatarBg,
|
||||
Border = @$"{lineWidth}px {lineType} transparent",
|
||||
["&-image"] = new CSSObject()
|
||||
{
|
||||
Background = "transparent",
|
||||
},
|
||||
[$"{antCls}-image-img"] = new CSSObject()
|
||||
{
|
||||
Display = "block",
|
||||
},
|
||||
["..."] = avatarSizeStyle(avatarSizeBase, avatarFontSizeBase, borderRadius),
|
||||
["&-lg"] = new CSSObject()
|
||||
{
|
||||
["..."] = avatarSizeStyle(avatarSizeLG, avatarFontSizeLG, borderRadiusLG)
|
||||
},
|
||||
["&-sm"] = new CSSObject()
|
||||
{
|
||||
["..."] = avatarSizeStyle(avatarSizeSM, avatarFontSizeSM, borderRadiusSM)
|
||||
},
|
||||
["> img"] = new CSSObject()
|
||||
{
|
||||
Display = "block",
|
||||
Width = "100%",
|
||||
Height = "100%",
|
||||
ObjectFit = "cover",
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenGroupStyle(AvatarToken token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var avatarGroupBorderColor = token.AvatarGroupBorderColor;
|
||||
var avatarGroupSpace = token.AvatarGroupSpace;
|
||||
return new CSSObject()
|
||||
{
|
||||
[$"{componentCls}-group"] = new CSSObject()
|
||||
{
|
||||
Display = "inline-flex",
|
||||
[$"{componentCls}"] = new CSSObject()
|
||||
{
|
||||
BorderColor = avatarGroupBorderColor,
|
||||
},
|
||||
["> *:not(:first-child)"] = new CSSObject()
|
||||
{
|
||||
MarginInlineStart = avatarGroupSpace,
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
protected override CSSInterpolation[] UseStyle(GlobalToken token)
|
||||
{
|
||||
var colorTextLightSolid = token.ColorTextLightSolid;
|
||||
var controlHeight = token.ControlHeight;
|
||||
var controlHeightLG = token.ControlHeightLG;
|
||||
var controlHeightSM = token.ControlHeightSM;
|
||||
var fontSize = token.FontSize;
|
||||
var fontSizeLG = token.FontSizeLG;
|
||||
var fontSizeXL = token.FontSizeXL;
|
||||
var fontSizeHeading3 = token.FontSizeHeading3;
|
||||
var marginXS = token.MarginXS;
|
||||
var colorBorderBg = token.ColorBorderBg;
|
||||
var colorTextPlaceholder = token.ColorTextPlaceholder;
|
||||
var avatarToken = MergeToken(
|
||||
token,
|
||||
new AvatarToken()
|
||||
{
|
||||
AvatarBg = colorTextPlaceholder,
|
||||
AvatarColor = colorTextLightSolid,
|
||||
AvatarSizeBase = controlHeight,
|
||||
AvatarSizeLG = controlHeightLG,
|
||||
AvatarSizeSM = controlHeightSM,
|
||||
AvatarFontSizeBase = (int)Math.Round((double)(fontSizeLG + fontSizeXL) / 2),
|
||||
AvatarFontSizeLG = fontSizeHeading3,
|
||||
AvatarFontSizeSM = fontSize,
|
||||
AvatarGroupSpace = -marginXS,
|
||||
AvatarGroupBorderColor = colorBorderBg,
|
||||
});
|
||||
return new CSSInterpolation[]
|
||||
{
|
||||
GenBaseStyle(avatarToken),
|
||||
GenGroupStyle(avatarToken)
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,145 @@
|
|||
using System;
|
||||
using CssInCs;
|
||||
using static AntDesign.GlobalStyle;
|
||||
using static AntDesign.Theme;
|
||||
|
||||
namespace AntDesign
|
||||
{
|
||||
public partial class BackTopToken : TokenWithCommonCls
|
||||
{
|
||||
public int ZIndexPopup { get; set; }
|
||||
|
||||
}
|
||||
|
||||
public partial class BackTopToken
|
||||
{
|
||||
public string BackTopBackground { get; set; }
|
||||
|
||||
public string BackTopColor { get; set; }
|
||||
|
||||
public string BackTopHoverBackground { get; set; }
|
||||
|
||||
public int BackTopFontSize { get; set; }
|
||||
|
||||
public int BackTopSize { get; set; }
|
||||
|
||||
public int BackTopBlockEnd { get; set; }
|
||||
|
||||
public int BackTopInlineEnd { get; set; }
|
||||
|
||||
public int BackTopInlineEndMD { get; set; }
|
||||
|
||||
public int BackTopInlineEndXS { get; set; }
|
||||
|
||||
}
|
||||
|
||||
public partial class BackTop
|
||||
{
|
||||
public CSSObject GenSharedBackTopStyle(BackTopToken token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var backTopFontSize = token.BackTopFontSize;
|
||||
var backTopSize = token.BackTopSize;
|
||||
var zIndexPopup = token.ZIndexPopup;
|
||||
return new CSSObject()
|
||||
{
|
||||
[componentCls] = new CSSObject()
|
||||
{
|
||||
["..."] = ResetComponent(token),
|
||||
Position = "fixed",
|
||||
InsetInlineEnd = token.BackTopInlineEnd,
|
||||
InsetBlockEnd = token.BackTopBlockEnd,
|
||||
ZIndex = zIndexPopup,
|
||||
Width = 40,
|
||||
Height = 40,
|
||||
Cursor = "pointer",
|
||||
["&:empty"] = new CSSObject()
|
||||
{
|
||||
Display = "none",
|
||||
},
|
||||
[$"{componentCls}-content"] = new CSSObject()
|
||||
{
|
||||
Width = backTopSize,
|
||||
Height = backTopSize,
|
||||
Overflow = "hidden",
|
||||
Color = token.BackTopColor,
|
||||
TextAlign = "center",
|
||||
BackgroundColor = token.BackTopBackground,
|
||||
BorderRadius = backTopSize,
|
||||
Transition = @$"all {token.MotionDurationMid}",
|
||||
["&:hover"] = new CSSObject()
|
||||
{
|
||||
BackgroundColor = token.BackTopHoverBackground,
|
||||
Transition = @$"all {token.MotionDurationMid}",
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-icon"] = new CSSObject()
|
||||
{
|
||||
FontSize = backTopFontSize,
|
||||
LineHeight = @$"{backTopSize}px",
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenMediaBackTopStyle(BackTopToken token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
return new CSSObject()
|
||||
{
|
||||
[$"@media (max-width: {token.ScreenMD}px)"] = new CSSObject()
|
||||
{
|
||||
[componentCls] = new CSSObject()
|
||||
{
|
||||
InsetInlineEnd = token.BackTopInlineEndMD,
|
||||
},
|
||||
},
|
||||
[$"@media (max-width: {token.ScreenXS}px)"] = new CSSObject()
|
||||
{
|
||||
[componentCls] = new CSSObject()
|
||||
{
|
||||
InsetInlineEnd = token.BackTopInlineEndXS,
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
protected override CSSInterpolation[] UseStyle(GlobalToken token)
|
||||
{
|
||||
var fontSizeHeading3 = token.FontSizeHeading3;
|
||||
var colorTextDescription = token.ColorTextDescription;
|
||||
var colorTextLightSolid = token.ColorTextLightSolid;
|
||||
var colorText = token.ColorText;
|
||||
var controlHeightLG = token.ControlHeightLG;
|
||||
var backTopToken = MergeToken(
|
||||
token,
|
||||
new BackTopToken()
|
||||
{
|
||||
BackTopBackground = colorTextDescription,
|
||||
BackTopColor = colorTextLightSolid,
|
||||
BackTopHoverBackground = colorText,
|
||||
BackTopFontSize = fontSizeHeading3,
|
||||
BackTopSize = controlHeightLG,
|
||||
BackTopBlockEnd = (int)(controlHeightLG * 1.25),
|
||||
BackTopInlineEnd = (int)(controlHeightLG * 2.5),
|
||||
BackTopInlineEndMD = (int)(controlHeightLG * 1.5),
|
||||
BackTopInlineEndXS = (int)(controlHeightLG * 0.5),
|
||||
});
|
||||
return new CSSInterpolation[]
|
||||
{
|
||||
GenSharedBackTopStyle(backTopToken),
|
||||
GenMediaBackTopStyle(backTopToken)
|
||||
};
|
||||
}
|
||||
|
||||
public BackTopToken GenComponentStyleHook(BackTopToken token)
|
||||
{
|
||||
return new BackTopToken()
|
||||
{
|
||||
ZIndexPopup = token.ZIndexBase + 10,
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,497 @@
|
|||
using System;
|
||||
using CssInCs;
|
||||
using static AntDesign.GlobalStyle;
|
||||
using static AntDesign.Theme;
|
||||
using Keyframes = CssInCs.Keyframe;
|
||||
|
||||
namespace AntDesign
|
||||
{
|
||||
public partial class BadgeToken : TokenWithCommonCls
|
||||
{
|
||||
public int BadgeFontHeight { get; set; }
|
||||
|
||||
public string BadgeZIndex { get; set; }
|
||||
|
||||
public int BadgeHeight { get; set; }
|
||||
|
||||
public int BadgeHeightSm { get; set; }
|
||||
|
||||
public string BadgeTextColor { get; set; }
|
||||
|
||||
public string BadgeFontWeight { get; set; }
|
||||
|
||||
public int BadgeFontSize { get; set; }
|
||||
|
||||
public string BadgeColor { get; set; }
|
||||
|
||||
public string BadgeColorHover { get; set; }
|
||||
|
||||
public int BadgeDotSize { get; set; }
|
||||
|
||||
public int BadgeFontSizeSm { get; set; }
|
||||
|
||||
public int BadgeStatusSize { get; set; }
|
||||
|
||||
public int BadgeShadowSize { get; set; }
|
||||
|
||||
public string BadgeShadowColor { get; set; }
|
||||
|
||||
public string BadgeProcessingDuration { get; set; }
|
||||
|
||||
public int BadgeRibbonOffset { get; set; }
|
||||
|
||||
public string BadgeRibbonCornerTransform { get; set; }
|
||||
|
||||
public string BadgeRibbonCornerFilter { get; set; }
|
||||
|
||||
}
|
||||
|
||||
public partial class Badge
|
||||
{
|
||||
private Keyframes antStatusProcessing = new Keyframes("antStatusProcessing")
|
||||
{
|
||||
["0%"] = new CSSObject()
|
||||
{
|
||||
Transform = "scale(0.8)",
|
||||
Opacity = 0.5f,
|
||||
},
|
||||
["100%"] = new CSSObject()
|
||||
{
|
||||
Transform = "scale(2.4)",
|
||||
Opacity = 0,
|
||||
},
|
||||
};
|
||||
|
||||
private Keyframes antZoomBadgeIn = new Keyframes("antZoomBadgeIn")
|
||||
{
|
||||
["0%"] = new CSSObject()
|
||||
{
|
||||
Transform = "scale(0) translate(50%, -50%)",
|
||||
Opacity = 0,
|
||||
},
|
||||
["100%"] = new CSSObject()
|
||||
{
|
||||
Transform = "scale(1) translate(50%, -50%)",
|
||||
},
|
||||
};
|
||||
|
||||
private Keyframes antZoomBadgeOut = new Keyframes("antZoomBadgeOut")
|
||||
{
|
||||
["0%"] = new CSSObject()
|
||||
{
|
||||
Transform = "scale(1) translate(50%, -50%)",
|
||||
},
|
||||
["100%"] = new CSSObject()
|
||||
{
|
||||
Transform = "scale(0) translate(50%, -50%)",
|
||||
Opacity = 0,
|
||||
},
|
||||
};
|
||||
|
||||
private Keyframes antNoWrapperZoomBadgeIn = new Keyframes("antNoWrapperZoomBadgeIn")
|
||||
{
|
||||
["0%"] = new CSSObject()
|
||||
{
|
||||
Transform = "scale(0)",
|
||||
Opacity = 0,
|
||||
},
|
||||
["100%"] = new CSSObject()
|
||||
{
|
||||
Transform = "scale(1)",
|
||||
},
|
||||
};
|
||||
|
||||
private Keyframes antNoWrapperZoomBadgeOut = new Keyframes("antNoWrapperZoomBadgeOut")
|
||||
{
|
||||
["0%"] = new CSSObject()
|
||||
{
|
||||
Transform = "scale(1)",
|
||||
},
|
||||
["100%"] = new CSSObject()
|
||||
{
|
||||
Transform = "scale(0)",
|
||||
Opacity = 0,
|
||||
},
|
||||
};
|
||||
|
||||
private Keyframes antBadgeLoadingCircle = new Keyframes("antBadgeLoadingCircle")
|
||||
{
|
||||
["0%"] = new CSSObject()
|
||||
{
|
||||
TransformOrigin = "50%",
|
||||
},
|
||||
["100%"] = new CSSObject()
|
||||
{
|
||||
Transform = "translate(50%, -50%) rotate(360deg)",
|
||||
TransformOrigin = "50%",
|
||||
},
|
||||
};
|
||||
|
||||
public CSSObject GenSharedBadgeStyle(BadgeToken token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var iconCls = token.IconCls;
|
||||
var antCls = token.AntCls;
|
||||
var badgeFontHeight = token.BadgeFontHeight;
|
||||
var badgeShadowSize = token.BadgeShadowSize;
|
||||
var badgeHeightSm = token.BadgeHeightSm;
|
||||
var motionDurationSlow = token.MotionDurationSlow;
|
||||
var badgeStatusSize = token.BadgeStatusSize;
|
||||
var marginXS = token.MarginXS;
|
||||
var badgeRibbonOffset = token.BadgeRibbonOffset;
|
||||
var numberPrefixCls = @$"{antCls}-scroll-number";
|
||||
var ribbonPrefixCls = @$"{antCls}-ribbon";
|
||||
var ribbonWrapperPrefixCls = @$"{antCls}-ribbon-wrapper";
|
||||
var colorPreset = GenPresetColor(
|
||||
token,
|
||||
(colorKey, args) => {
|
||||
var darkColor = args.DarkColor;
|
||||
return new CSSObject()
|
||||
{
|
||||
[$"{componentCls}-color-{colorKey}"] = new CSSObject()
|
||||
{
|
||||
Background = darkColor,
|
||||
},
|
||||
};
|
||||
});
|
||||
var statusRibbonPreset = GenPresetColor(
|
||||
token,
|
||||
(colorKey, args) => {
|
||||
var darkColor = args.DarkColor;
|
||||
return new CSSObject()
|
||||
{
|
||||
[$"&{ribbonPrefixCls}-color-{colorKey}"] = new CSSObject()
|
||||
{
|
||||
Background = darkColor,
|
||||
Color = darkColor,
|
||||
},
|
||||
};
|
||||
});
|
||||
return new CSSObject()
|
||||
{
|
||||
[componentCls] = new CSSObject()
|
||||
{
|
||||
["..."] = ResetComponent(token),
|
||||
Position = "relative",
|
||||
Display = "inline-block",
|
||||
Width = "fit-content",
|
||||
LineHeight = 1,
|
||||
[$"{componentCls}-count"] = new CSSObject()
|
||||
{
|
||||
ZIndex = token.BadgeZIndex,
|
||||
MinWidth = token.BadgeHeight,
|
||||
Height = token.BadgeHeight,
|
||||
Color = token.BadgeTextColor,
|
||||
FontWeight = token.BadgeFontWeight,
|
||||
FontSize = token.BadgeFontSize,
|
||||
LineHeight = @$"{token.BadgeHeight}px",
|
||||
WhiteSpace = "nowrap",
|
||||
TextAlign = "center",
|
||||
Background = token.BadgeColor,
|
||||
BorderRadius = token.BadgeHeight / 2,
|
||||
BoxShadow = @$"0 0 0 {badgeShadowSize}px {token.BadgeShadowColor}",
|
||||
Transition = @$"background {token.MotionDurationMid}",
|
||||
["a"] = new CSSObject()
|
||||
{
|
||||
Color = token.BadgeTextColor,
|
||||
},
|
||||
["a:hover"] = new CSSObject()
|
||||
{
|
||||
Color = token.BadgeTextColor,
|
||||
},
|
||||
["a:hover &"] = new CSSObject()
|
||||
{
|
||||
Background = token.BadgeColorHover,
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-count-sm"] = new CSSObject()
|
||||
{
|
||||
MinWidth = badgeHeightSm,
|
||||
Height = badgeHeightSm,
|
||||
FontSize = token.BadgeFontSizeSm,
|
||||
LineHeight = @$"{badgeHeightSm}px",
|
||||
BorderRadius = badgeHeightSm / 2,
|
||||
},
|
||||
[$"{componentCls}-multiple-words"] = new CSSObject()
|
||||
{
|
||||
Padding = @$"0 {token.PaddingXS}px",
|
||||
},
|
||||
[$"{componentCls}-dot"] = new CSSObject()
|
||||
{
|
||||
ZIndex = token.BadgeZIndex,
|
||||
Width = token.BadgeDotSize,
|
||||
MinWidth = token.BadgeDotSize,
|
||||
Height = token.BadgeDotSize,
|
||||
Background = token.BadgeColor,
|
||||
BorderRadius = "100%",
|
||||
BoxShadow = @$"0 0 0 {badgeShadowSize}px {token.BadgeShadowColor}",
|
||||
},
|
||||
[$"{componentCls}-dot{numberPrefixCls}"] = new CSSObject()
|
||||
{
|
||||
Transition = @$"background {motionDurationSlow}",
|
||||
},
|
||||
[$"{componentCls}-count, {componentCls}-dot, {numberPrefixCls}-custom-component"] = new CSSObject()
|
||||
{
|
||||
Position = "absolute",
|
||||
Top = 0,
|
||||
InsetInlineEnd = 0,
|
||||
Transform = "translate(50%, -50%)",
|
||||
TransformOrigin = "100% 0%",
|
||||
[$"{iconCls}-spin"] = new CSSObject()
|
||||
{
|
||||
AnimationName = antBadgeLoadingCircle,
|
||||
AnimationDuration = token.MotionDurationMid,
|
||||
AnimationIterationCount = "infinite",
|
||||
AnimationTimingFunction = "linear",
|
||||
},
|
||||
},
|
||||
[$"&{componentCls}-status"] = new CSSObject()
|
||||
{
|
||||
LineHeight = "inherit",
|
||||
VerticalAlign = "baseline",
|
||||
[$"{componentCls}-status-dot"] = new CSSObject()
|
||||
{
|
||||
Position = "relative",
|
||||
Top = -1,
|
||||
Display = "inline-block",
|
||||
Width = badgeStatusSize,
|
||||
Height = badgeStatusSize,
|
||||
VerticalAlign = "middle",
|
||||
BorderRadius = "50%",
|
||||
},
|
||||
[$"{componentCls}-status-success"] = new CSSObject()
|
||||
{
|
||||
BackgroundColor = token.ColorSuccess,
|
||||
},
|
||||
[$"{componentCls}-status-processing"] = new CSSObject()
|
||||
{
|
||||
Position = "relative",
|
||||
Color = token.ColorPrimary,
|
||||
BackgroundColor = token.ColorPrimary,
|
||||
["&::after"] = new CSSObject()
|
||||
{
|
||||
Position = "absolute",
|
||||
Top = 0,
|
||||
InsetInlineStart = 0,
|
||||
Width = "100%",
|
||||
Height = "100%",
|
||||
BorderWidth = badgeShadowSize,
|
||||
BorderStyle = "solid",
|
||||
BorderColor = "inherit",
|
||||
BorderRadius = "50%",
|
||||
AnimationName = antStatusProcessing,
|
||||
AnimationDuration = token.BadgeProcessingDuration,
|
||||
AnimationIterationCount = "infinite",
|
||||
AnimationTimingFunction = "ease-in-out",
|
||||
Content = "\"\"",
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-status-default"] = new CSSObject()
|
||||
{
|
||||
BackgroundColor = token.ColorTextPlaceholder,
|
||||
},
|
||||
[$"{componentCls}-status-error"] = new CSSObject()
|
||||
{
|
||||
BackgroundColor = token.ColorError,
|
||||
},
|
||||
[$"{componentCls}-status-warning"] = new CSSObject()
|
||||
{
|
||||
BackgroundColor = token.ColorWarning,
|
||||
},
|
||||
[$"{componentCls}-status-text"] = new CSSObject()
|
||||
{
|
||||
MarginInlineStart = marginXS,
|
||||
Color = token.ColorText,
|
||||
FontSize = token.FontSize,
|
||||
},
|
||||
},
|
||||
["..."] = colorPreset,
|
||||
[$"{componentCls}-zoom-appear, {componentCls}-zoom-enter"] = new CSSObject()
|
||||
{
|
||||
AnimationName = antZoomBadgeIn,
|
||||
AnimationDuration = token.MotionDurationSlow,
|
||||
AnimationTimingFunction = token.MotionEaseOutBack,
|
||||
AnimationFillMode = "both",
|
||||
},
|
||||
[$"{componentCls}-zoom-leave"] = new CSSObject()
|
||||
{
|
||||
AnimationName = antZoomBadgeOut,
|
||||
AnimationDuration = token.MotionDurationSlow,
|
||||
AnimationTimingFunction = token.MotionEaseOutBack,
|
||||
AnimationFillMode = "both",
|
||||
},
|
||||
[$"&{componentCls}-not-a-wrapper"] = new CSSObject()
|
||||
{
|
||||
[$"{componentCls}-zoom-appear, {componentCls}-zoom-enter"] = new CSSObject()
|
||||
{
|
||||
AnimationName = antNoWrapperZoomBadgeIn,
|
||||
AnimationDuration = token.MotionDurationSlow,
|
||||
AnimationTimingFunction = token.MotionEaseOutBack,
|
||||
},
|
||||
[$"{componentCls}-zoom-leave"] = new CSSObject()
|
||||
{
|
||||
AnimationName = antNoWrapperZoomBadgeOut,
|
||||
AnimationDuration = token.MotionDurationSlow,
|
||||
AnimationTimingFunction = token.MotionEaseOutBack,
|
||||
},
|
||||
[$"&:not({componentCls}-status)"] = new CSSObject()
|
||||
{
|
||||
VerticalAlign = "middle",
|
||||
},
|
||||
[$"{numberPrefixCls}-custom-component, {componentCls}-count"] = new CSSObject()
|
||||
{
|
||||
Transform = "none",
|
||||
},
|
||||
[$"{numberPrefixCls}-custom-component, {numberPrefixCls}"] = new CSSObject()
|
||||
{
|
||||
Position = "relative",
|
||||
Top = "auto",
|
||||
Display = "block",
|
||||
TransformOrigin = "50% 50%",
|
||||
},
|
||||
},
|
||||
[$"{numberPrefixCls}"] = new CSSObject()
|
||||
{
|
||||
Overflow = "hidden",
|
||||
[$"{numberPrefixCls}-only"] = new CSSObject()
|
||||
{
|
||||
Position = "relative",
|
||||
Display = "inline-block",
|
||||
Height = token.BadgeHeight,
|
||||
Transition = @$"all {token.MotionDurationSlow} {token.MotionEaseOutBack}",
|
||||
WebkitTransformStyle = "preserve-3d",
|
||||
WebkitBackfaceVisibility = "hidden",
|
||||
[$"> p{numberPrefixCls}-only-unit"] = new CSSObject()
|
||||
{
|
||||
Height = token.BadgeHeight,
|
||||
Margin = 0,
|
||||
WebkitTransformStyle = "preserve-3d",
|
||||
WebkitBackfaceVisibility = "hidden",
|
||||
},
|
||||
},
|
||||
[$"{numberPrefixCls}-symbol"] = new CSSObject()
|
||||
{
|
||||
VerticalAlign = "top",
|
||||
},
|
||||
},
|
||||
["&-rtl"] = new CSSObject()
|
||||
{
|
||||
Direction = "rtl",
|
||||
[$"{componentCls}-count, {componentCls}-dot, {numberPrefixCls}-custom-component"] = new CSSObject()
|
||||
{
|
||||
Transform = "translate(-50%, -50%)",
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"{ribbonWrapperPrefixCls}"] = new CSSObject()
|
||||
{
|
||||
Position = "relative",
|
||||
},
|
||||
[$"{ribbonPrefixCls}"] = new CSSObject()
|
||||
{
|
||||
["..."] = ResetComponent(token),
|
||||
Position = "absolute",
|
||||
Top = marginXS,
|
||||
Padding = @$"0 {token.PaddingXS}px",
|
||||
Color = token.ColorPrimary,
|
||||
LineHeight = @$"{badgeFontHeight}px",
|
||||
WhiteSpace = "nowrap",
|
||||
BackgroundColor = token.ColorPrimary,
|
||||
BorderRadius = token.BorderRadiusSM,
|
||||
[$"{ribbonPrefixCls}-text"] = new CSSObject()
|
||||
{
|
||||
Color = token.ColorTextLightSolid,
|
||||
},
|
||||
[$"{ribbonPrefixCls}-corner"] = new CSSObject()
|
||||
{
|
||||
Position = "absolute",
|
||||
Top = "100%",
|
||||
Width = badgeRibbonOffset,
|
||||
Height = badgeRibbonOffset,
|
||||
Color = "currentcolor",
|
||||
Border = @$"{badgeRibbonOffset / 2}px solid",
|
||||
Transform = token.BadgeRibbonCornerTransform,
|
||||
TransformOrigin = "top",
|
||||
Filter = token.BadgeRibbonCornerFilter,
|
||||
},
|
||||
["..."] = statusRibbonPreset,
|
||||
[$"&{ribbonPrefixCls}-placement-end"] = new CSSObject()
|
||||
{
|
||||
InsetInlineEnd = -badgeRibbonOffset,
|
||||
BorderEndEndRadius = 0,
|
||||
[$"{ribbonPrefixCls}-corner"] = new CSSObject()
|
||||
{
|
||||
InsetInlineEnd = 0,
|
||||
BorderInlineEndColor = "transparent",
|
||||
BorderBlockEndColor = "transparent",
|
||||
},
|
||||
},
|
||||
[$"&{ribbonPrefixCls}-placement-start"] = new CSSObject()
|
||||
{
|
||||
InsetInlineStart = -badgeRibbonOffset,
|
||||
BorderEndStartRadius = 0,
|
||||
[$"{ribbonPrefixCls}-corner"] = new CSSObject()
|
||||
{
|
||||
InsetInlineStart = 0,
|
||||
BorderBlockEndColor = "transparent",
|
||||
BorderInlineStartColor = "transparent",
|
||||
},
|
||||
},
|
||||
["&-rtl"] = new CSSObject()
|
||||
{
|
||||
Direction = "rtl",
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
protected override CSSInterpolation[] UseStyle(GlobalToken token)
|
||||
{
|
||||
var fontSize = token.FontSize;
|
||||
var lineHeight = token.LineHeight;
|
||||
var fontSizeSM = token.FontSizeSM;
|
||||
var lineWidth = token.LineWidth;
|
||||
var marginXS = token.MarginXS;
|
||||
var colorBorderBg = token.ColorBorderBg;
|
||||
var badgeFontHeight = (int)Math.Round((double)fontSize * lineHeight);
|
||||
var badgeShadowSize = lineWidth;
|
||||
var badgeZIndex = "auto";
|
||||
var badgeHeight = badgeFontHeight - 2 * badgeShadowSize;
|
||||
var badgeTextColor = token.ColorBgContainer;
|
||||
var badgeFontWeight = "normal";
|
||||
var badgeFontSize = fontSizeSM;
|
||||
var badgeColor = token.ColorError;
|
||||
var badgeColorHover = token.ColorErrorHover;
|
||||
var badgeHeightSm = fontSize;
|
||||
var badgeDotSize = fontSizeSM / 2;
|
||||
var badgeFontSizeSm = fontSizeSM;
|
||||
var badgeStatusSize = fontSizeSM / 2;
|
||||
var badgeToken = MergeToken(
|
||||
token,
|
||||
new BadgeToken()
|
||||
{
|
||||
BadgeFontHeight = badgeFontHeight,
|
||||
BadgeShadowSize = badgeShadowSize,
|
||||
BadgeZIndex = badgeZIndex,
|
||||
BadgeHeight = badgeHeight,
|
||||
BadgeTextColor = badgeTextColor,
|
||||
BadgeFontWeight = badgeFontWeight,
|
||||
BadgeFontSize = badgeFontSize,
|
||||
BadgeColor = badgeColor,
|
||||
BadgeColorHover = badgeColorHover,
|
||||
BadgeShadowColor = colorBorderBg,
|
||||
BadgeHeightSm = badgeHeightSm,
|
||||
BadgeDotSize = badgeDotSize,
|
||||
BadgeFontSizeSm = badgeFontSizeSm,
|
||||
BadgeStatusSize = badgeStatusSize,
|
||||
BadgeProcessingDuration = "1.2s",
|
||||
BadgeRibbonOffset = marginXS,
|
||||
BadgeRibbonCornerTransform = "scaleY(0.75)",
|
||||
BadgeRibbonCornerFilter = @$"brightness(75%)",
|
||||
});
|
||||
return new CSSInterpolation[] { GenSharedBadgeStyle(badgeToken) };
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,142 @@
|
|||
using System;
|
||||
using CssInCs;
|
||||
using static AntDesign.GlobalStyle;
|
||||
using static AntDesign.Theme;
|
||||
|
||||
namespace AntDesign
|
||||
{
|
||||
public partial class BreadcrumbToken : TokenWithCommonCls
|
||||
{
|
||||
public string BreadcrumbBaseColor { get; set; }
|
||||
|
||||
public int BreadcrumbFontSize { get; set; }
|
||||
|
||||
public int BreadcrumbIconFontSize { get; set; }
|
||||
|
||||
public string BreadcrumbLinkColor { get; set; }
|
||||
|
||||
public string BreadcrumbLinkColorHover { get; set; }
|
||||
|
||||
public string BreadcrumbLastItemColor { get; set; }
|
||||
|
||||
public int BreadcrumbSeparatorMargin { get; set; }
|
||||
|
||||
public string BreadcrumbSeparatorColor { get; set; }
|
||||
|
||||
}
|
||||
|
||||
public partial class Breadcrumb
|
||||
{
|
||||
public CSSObject GenBreadcrumbStyle(BreadcrumbToken token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var iconCls = token.IconCls;
|
||||
return new CSSObject()
|
||||
{
|
||||
[componentCls] = new CSSObject()
|
||||
{
|
||||
["..."] = ResetComponent(token),
|
||||
Color = token.BreadcrumbBaseColor,
|
||||
FontSize = token.BreadcrumbFontSize,
|
||||
[iconCls] = new CSSObject()
|
||||
{
|
||||
FontSize = token.BreadcrumbIconFontSize,
|
||||
},
|
||||
["ol"] = new CSSObject()
|
||||
{
|
||||
Display = "flex",
|
||||
FlexWrap = "wrap",
|
||||
Margin = 0,
|
||||
Padding = 0,
|
||||
ListStyle = "none",
|
||||
},
|
||||
["a"] = new CSSObject()
|
||||
{
|
||||
Color = token.BreadcrumbLinkColor,
|
||||
Transition = @$"color {token.MotionDurationMid}",
|
||||
Padding = @$"0 {token.PaddingXXS}px",
|
||||
BorderRadius = token.BorderRadiusSM,
|
||||
Height = token.LineHeight * token.FontSize,
|
||||
Display = "inline-block",
|
||||
MarginInline = -token.MarginXXS,
|
||||
["&:hover"] = new CSSObject()
|
||||
{
|
||||
Color = token.BreadcrumbLinkColorHover,
|
||||
BackgroundColor = token.ColorBgTextHover,
|
||||
},
|
||||
["..."] = GenFocusStyle(token)
|
||||
},
|
||||
["li:last-child"] = new CSSObject()
|
||||
{
|
||||
Color = token.BreadcrumbLastItemColor,
|
||||
},
|
||||
[$"{componentCls}-separator"] = new CSSObject()
|
||||
{
|
||||
MarginInline = token.BreadcrumbSeparatorMargin,
|
||||
Color = token.BreadcrumbSeparatorColor,
|
||||
},
|
||||
[$"{componentCls}-link"] = new CSSObject()
|
||||
{
|
||||
[$">{iconCls}+span,>{iconCls}+a"] = new CSSObject()
|
||||
{
|
||||
MarginInlineStart = token.MarginXXS,
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-overlay-link"] = new CSSObject()
|
||||
{
|
||||
BorderRadius = token.BorderRadiusSM,
|
||||
Height = token.LineHeight * token.FontSize,
|
||||
Display = "inline-block",
|
||||
Padding = @$"0 {token.PaddingXXS}px",
|
||||
MarginInline = -token.MarginXXS,
|
||||
[$"> {iconCls}"] = new CSSObject()
|
||||
{
|
||||
MarginInlineStart = token.MarginXXS,
|
||||
FontSize = token.FontSizeIcon,
|
||||
},
|
||||
["&:hover"] = new CSSObject()
|
||||
{
|
||||
Color = token.BreadcrumbLinkColorHover,
|
||||
BackgroundColor = token.ColorBgTextHover,
|
||||
["a"] = new CSSObject()
|
||||
{
|
||||
Color = token.BreadcrumbLinkColorHover,
|
||||
},
|
||||
},
|
||||
["a"] = new CSSObject()
|
||||
{
|
||||
["&:hover"] = new CSSObject()
|
||||
{
|
||||
BackgroundColor = "transparent",
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"&{token.ComponentCls}-rtl"] = new CSSObject()
|
||||
{
|
||||
Direction = "rtl",
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
protected override CSSInterpolation[] UseStyle(GlobalToken token)
|
||||
{
|
||||
var BreadcrumbToken = MergeToken(
|
||||
token,
|
||||
new BreadcrumbToken()
|
||||
{
|
||||
BreadcrumbBaseColor = token.ColorTextDescription,
|
||||
BreadcrumbFontSize = token.FontSize,
|
||||
BreadcrumbIconFontSize = token.FontSize,
|
||||
BreadcrumbLinkColor = token.ColorTextDescription,
|
||||
BreadcrumbLinkColorHover = token.ColorText,
|
||||
BreadcrumbLastItemColor = token.ColorText,
|
||||
BreadcrumbSeparatorMargin = token.MarginXS,
|
||||
BreadcrumbSeparatorColor = token.ColorTextDescription,
|
||||
});
|
||||
return new CSSInterpolation[] { GenBreadcrumbStyle(BreadcrumbToken) };
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,669 @@
|
|||
using System;
|
||||
using CssInCs;
|
||||
using static AntDesign.GlobalStyle;
|
||||
using static AntDesign.Theme;
|
||||
|
||||
namespace AntDesign
|
||||
{
|
||||
public class ComponentToken
|
||||
{
|
||||
}
|
||||
|
||||
public partial class ButtonToken : TokenWithCommonCls
|
||||
{
|
||||
public string ColorOutlineDefault { get; set; }
|
||||
|
||||
public int ButtonPaddingHorizontal { get; set; }
|
||||
|
||||
public int ButtonIconOnlyFontSize { get; set; }
|
||||
|
||||
public int ButtonFontWeight { get; set; }
|
||||
|
||||
}
|
||||
|
||||
public partial class Button
|
||||
{
|
||||
public CSSObject GenSharedButtonStyle(ButtonToken token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var iconCls = token.IconCls;
|
||||
var buttonFontWeight = token.ButtonFontWeight;
|
||||
return new CSSObject()
|
||||
{
|
||||
[componentCls] = new CSSObject()
|
||||
{
|
||||
Outline = "none",
|
||||
Position = "relative",
|
||||
Display = "inline-block",
|
||||
FontWeight = buttonFontWeight,
|
||||
WhiteSpace = "nowrap",
|
||||
TextAlign = "center",
|
||||
BackgroundImage = "none",
|
||||
BackgroundColor = "transparent",
|
||||
Border = @$"{token.LineWidth}px {token.LineType} transparent",
|
||||
Cursor = "pointer",
|
||||
Transition = @$"all {token.MotionDurationMid} {token.MotionEaseInOut}",
|
||||
UserSelect = "none",
|
||||
TouchAction = "manipulation",
|
||||
LineHeight = token.LineHeight,
|
||||
Color = token.ColorText,
|
||||
["> span"] = new CSSObject()
|
||||
{
|
||||
Display = "inline-block",
|
||||
},
|
||||
[$"{componentCls}-icon"] = new CSSObject()
|
||||
{
|
||||
LineHeight = 0,
|
||||
},
|
||||
[$"&:not({componentCls}-icon-only) > {componentCls}-icon"] = new CSSObject()
|
||||
{
|
||||
[$"&{componentCls}-loading-icon, &:not(:last-child)"] = new CSSObject()
|
||||
{
|
||||
MarginInlineEnd = token.MarginXS,
|
||||
},
|
||||
},
|
||||
[$"> span + {iconCls}"] = new CSSObject()
|
||||
{
|
||||
MarginInlineStart = token.MarginXS,
|
||||
},
|
||||
["> a"] = new CSSObject()
|
||||
{
|
||||
Color = "currentColor",
|
||||
},
|
||||
["&:not(:disabled)"] = new CSSObject()
|
||||
{
|
||||
["..."] = GenFocusStyle(token)
|
||||
},
|
||||
[$"&-icon-only{componentCls}-compact-item"] = new CSSObject()
|
||||
{
|
||||
Flex = "none",
|
||||
},
|
||||
[$"&-compact-item{componentCls}-primary"] = new CSSObject()
|
||||
{
|
||||
[$"&:not([disabled]) + {componentCls}-compact-item{componentCls}-primary:not([disabled])"] = new CSSObject()
|
||||
{
|
||||
Position = "relative",
|
||||
["&:before"] = new CSSObject()
|
||||
{
|
||||
Position = "absolute",
|
||||
Top = -token.LineWidth,
|
||||
InsetInlineStart = -token.LineWidth,
|
||||
Display = "inline-block",
|
||||
Width = token.LineWidth,
|
||||
Height = @$"calc(100% + {token.LineWidth * 2}px)",
|
||||
BackgroundColor = token.ColorPrimaryHover,
|
||||
Content = "\"\"",
|
||||
},
|
||||
},
|
||||
},
|
||||
["&-compact-vertical-item"] = new CSSObject()
|
||||
{
|
||||
[$"&{componentCls}-primary"] = new CSSObject()
|
||||
{
|
||||
[$"&:not([disabled]) + {componentCls}-compact-vertical-item{componentCls}-primary:not([disabled])"] = new CSSObject()
|
||||
{
|
||||
Position = "relative",
|
||||
["&:before"] = new CSSObject()
|
||||
{
|
||||
Position = "absolute",
|
||||
Top = -token.LineWidth,
|
||||
InsetInlineStart = -token.LineWidth,
|
||||
Display = "inline-block",
|
||||
Width = @$"calc(100% + {token.LineWidth * 2}px)",
|
||||
Height = token.LineWidth,
|
||||
BackgroundColor = token.ColorPrimaryHover,
|
||||
Content = "\"\"",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenHoverActiveButtonStyle(CSSObject hoverStyle = default, CSSObject activeStyle = default)
|
||||
{
|
||||
return new CSSObject()
|
||||
{
|
||||
["&:not(:disabled)"] = new CSSObject()
|
||||
{
|
||||
["&:hover"] = hoverStyle,
|
||||
["&:active"] = activeStyle,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenCircleButtonStyle(ButtonToken token)
|
||||
{
|
||||
return new CSSObject()
|
||||
{
|
||||
MinWidth = token.ControlHeight,
|
||||
PaddingInlineStart = 0,
|
||||
PaddingInlineEnd = 0,
|
||||
BorderRadius = "50%",
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenRoundButtonStyle(ButtonToken token)
|
||||
{
|
||||
return new CSSObject()
|
||||
{
|
||||
BorderRadius = token.ControlHeight,
|
||||
PaddingInlineStart = token.ControlHeight / 2,
|
||||
PaddingInlineEnd = token.ControlHeight / 2,
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenDisabledStyle(ButtonToken token)
|
||||
{
|
||||
return new CSSObject()
|
||||
{
|
||||
Cursor = "not-allowed",
|
||||
BorderColor = token.ColorBorder,
|
||||
Color = token.ColorTextDisabled,
|
||||
BackgroundColor = token.ColorBgContainerDisabled,
|
||||
BoxShadow = "none",
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenGhostButtonStyle(string btnCls, string textColor, string borderColor, string textColorDisabled, string borderColorDisabled, CSSObject hoverStyle = default, CSSObject activeStyle = default)
|
||||
{
|
||||
return new CSSObject()
|
||||
{
|
||||
[$"&{btnCls}-background-ghost"] = new CSSObject()
|
||||
{
|
||||
Color = textColor,
|
||||
BackgroundColor = "transparent",
|
||||
BorderColor = borderColor,
|
||||
BoxShadow = "none",
|
||||
["..."] = GenHoverActiveButtonStyle(
|
||||
new CSSObject()
|
||||
{
|
||||
BackgroundColor = "transparent",
|
||||
["..."] = hoverStyle,
|
||||
},
|
||||
new CSSObject()
|
||||
{
|
||||
BackgroundColor = "transparent",
|
||||
["..."] = activeStyle,
|
||||
}),
|
||||
["&:disabled"] = new CSSObject()
|
||||
{
|
||||
Cursor = "not-allowed",
|
||||
Color = textColorDisabled,
|
||||
BorderColor = borderColorDisabled,
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenSolidDisabledButtonStyle(ButtonToken token)
|
||||
{
|
||||
return new CSSObject()
|
||||
{
|
||||
["&:disabled"] = new CSSObject()
|
||||
{
|
||||
["..."] = GenDisabledStyle(token)
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenSolidButtonStyle(ButtonToken token)
|
||||
{
|
||||
return new CSSObject()
|
||||
{
|
||||
["..."] = GenSolidDisabledButtonStyle(token)
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenPureDisabledButtonStyle(ButtonToken token)
|
||||
{
|
||||
return new CSSObject()
|
||||
{
|
||||
["&:disabled"] = new CSSObject()
|
||||
{
|
||||
Cursor = "not-allowed",
|
||||
Color = token.ColorTextDisabled,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenDefaultButtonStyle(ButtonToken token)
|
||||
{
|
||||
return new CSSObject()
|
||||
{
|
||||
["..."] = GenSolidButtonStyle(token),
|
||||
BackgroundColor = token.ColorBgContainer,
|
||||
BorderColor = token.ColorBorder,
|
||||
BoxShadow = @$"0 {token.ControlOutlineWidth}px 0 {token.ControlTmpOutline}",
|
||||
["..."] = GenHoverActiveButtonStyle(
|
||||
new CSSObject()
|
||||
{
|
||||
Color = token.ColorPrimaryHover,
|
||||
BorderColor = token.ColorPrimaryHover,
|
||||
},
|
||||
new CSSObject()
|
||||
{
|
||||
Color = token.ColorPrimaryActive,
|
||||
BorderColor = token.ColorPrimaryActive,
|
||||
}),
|
||||
["..."] = GenGhostButtonStyle(token.ComponentCls, token.ColorBgContainer, token.ColorBgContainer, token.ColorTextDisabled, token.ColorBorder),
|
||||
[$"&{token.ComponentCls}-dangerous"] = new CSSObject()
|
||||
{
|
||||
Color = token.ColorError,
|
||||
BorderColor = token.ColorError,
|
||||
["..."] = GenHoverActiveButtonStyle(
|
||||
new CSSObject()
|
||||
{
|
||||
Color = token.ColorErrorHover,
|
||||
BorderColor = token.ColorErrorBorderHover,
|
||||
},
|
||||
new CSSObject()
|
||||
{
|
||||
Color = token.ColorErrorActive,
|
||||
BorderColor = token.ColorErrorActive,
|
||||
}),
|
||||
["..."] = GenGhostButtonStyle(token.ComponentCls, token.ColorError, token.ColorError, token.ColorTextDisabled, token.ColorBorder),
|
||||
["..."] = GenSolidDisabledButtonStyle(token)
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenPrimaryButtonStyle(ButtonToken token)
|
||||
{
|
||||
return new CSSObject()
|
||||
{
|
||||
["..."] = GenSolidButtonStyle(token),
|
||||
Color = token.ColorTextLightSolid,
|
||||
BackgroundColor = token.ColorPrimary,
|
||||
BoxShadow = @$"0 {token.ControlOutlineWidth}px 0 {token.ControlOutline}",
|
||||
["..."] = GenHoverActiveButtonStyle(
|
||||
new CSSObject()
|
||||
{
|
||||
Color = token.ColorTextLightSolid,
|
||||
BackgroundColor = token.ColorPrimaryHover,
|
||||
},
|
||||
new CSSObject()
|
||||
{
|
||||
Color = token.ColorTextLightSolid,
|
||||
BackgroundColor = token.ColorPrimaryActive,
|
||||
}),
|
||||
["..."] = GenGhostButtonStyle(
|
||||
token.ComponentCls,
|
||||
token.ColorPrimary,
|
||||
token.ColorPrimary,
|
||||
token.ColorTextDisabled,
|
||||
token.ColorBorder,
|
||||
new CSSObject()
|
||||
{
|
||||
Color = token.ColorPrimaryHover,
|
||||
BorderColor = token.ColorPrimaryHover,
|
||||
},
|
||||
new CSSObject()
|
||||
{
|
||||
Color = token.ColorPrimaryActive,
|
||||
BorderColor = token.ColorPrimaryActive,
|
||||
}),
|
||||
[$"&{token.ComponentCls}-dangerous"] = new CSSObject()
|
||||
{
|
||||
BackgroundColor = token.ColorError,
|
||||
BoxShadow = @$"0 {token.ControlOutlineWidth}px 0 {token.ColorErrorOutline}",
|
||||
["..."] = GenHoverActiveButtonStyle(
|
||||
new CSSObject()
|
||||
{
|
||||
BackgroundColor = token.ColorErrorHover,
|
||||
},
|
||||
new CSSObject()
|
||||
{
|
||||
BackgroundColor = token.ColorErrorActive,
|
||||
}),
|
||||
["..."] = GenGhostButtonStyle(
|
||||
token.ComponentCls,
|
||||
token.ColorError,
|
||||
token.ColorError,
|
||||
token.ColorTextDisabled,
|
||||
token.ColorBorder,
|
||||
new CSSObject()
|
||||
{
|
||||
Color = token.ColorErrorHover,
|
||||
BorderColor = token.ColorErrorHover,
|
||||
},
|
||||
new CSSObject()
|
||||
{
|
||||
Color = token.ColorErrorActive,
|
||||
BorderColor = token.ColorErrorActive,
|
||||
}),
|
||||
["..."] = GenSolidDisabledButtonStyle(token)
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenDashedButtonStyle(ButtonToken token)
|
||||
{
|
||||
return new CSSObject()
|
||||
{
|
||||
["..."] = GenDefaultButtonStyle(token),
|
||||
BorderStyle = "dashed",
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenLinkButtonStyle(ButtonToken token)
|
||||
{
|
||||
return new CSSObject()
|
||||
{
|
||||
Color = token.ColorLink,
|
||||
["..."] = GenHoverActiveButtonStyle(
|
||||
new CSSObject()
|
||||
{
|
||||
Color = token.ColorLinkHover,
|
||||
},
|
||||
new CSSObject()
|
||||
{
|
||||
Color = token.ColorLinkActive,
|
||||
}),
|
||||
["..."] = GenPureDisabledButtonStyle(token),
|
||||
[$"&{token.ComponentCls}-dangerous"] = new CSSObject()
|
||||
{
|
||||
Color = token.ColorError,
|
||||
["..."] = GenHoverActiveButtonStyle(
|
||||
new CSSObject()
|
||||
{
|
||||
Color = token.ColorErrorHover,
|
||||
},
|
||||
new CSSObject()
|
||||
{
|
||||
Color = token.ColorErrorActive,
|
||||
}),
|
||||
["..."] = GenPureDisabledButtonStyle(token)
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenTextButtonStyle(ButtonToken token)
|
||||
{
|
||||
return new CSSObject()
|
||||
{
|
||||
["..."] = GenHoverActiveButtonStyle(
|
||||
new CSSObject()
|
||||
{
|
||||
Color = token.ColorText,
|
||||
BackgroundColor = token.ColorBgTextHover,
|
||||
},
|
||||
new CSSObject()
|
||||
{
|
||||
Color = token.ColorText,
|
||||
BackgroundColor = token.ColorBgTextActive,
|
||||
}),
|
||||
["..."] = GenPureDisabledButtonStyle(token),
|
||||
[$"&{token.ComponentCls}-dangerous"] = new CSSObject()
|
||||
{
|
||||
Color = token.ColorError,
|
||||
["..."] = GenPureDisabledButtonStyle(token),
|
||||
["..."] = GenHoverActiveButtonStyle(
|
||||
new CSSObject()
|
||||
{
|
||||
Color = token.ColorErrorHover,
|
||||
BackgroundColor = token.ColorErrorBg,
|
||||
},
|
||||
new CSSObject()
|
||||
{
|
||||
Color = token.ColorErrorHover,
|
||||
BackgroundColor = token.ColorErrorBg,
|
||||
})
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenDisabledButtonStyle(ButtonToken token)
|
||||
{
|
||||
return new CSSObject()
|
||||
{
|
||||
["..."] = GenDisabledStyle(token),
|
||||
[$"&{token.ComponentCls}:hover"] = new CSSObject()
|
||||
{
|
||||
["..."] = GenDisabledStyle(token)
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenTypeButtonStyle(ButtonToken token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
return new CSSObject()
|
||||
{
|
||||
[$"{componentCls}-default"] = GenDefaultButtonStyle(token),
|
||||
[$"{componentCls}-primary"] = GenPrimaryButtonStyle(token),
|
||||
[$"{componentCls}-dashed"] = GenDashedButtonStyle(token),
|
||||
[$"{componentCls}-link"] = GenLinkButtonStyle(token),
|
||||
[$"{componentCls}-text"] = GenTextButtonStyle(token),
|
||||
[$"{componentCls}-disabled"] = GenDisabledButtonStyle(token)
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject[] GenSizeButtonStyle(ButtonToken token, string sizePrefixCls = "")
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var controlHeight = token.ControlHeight;
|
||||
var fontSize = token.FontSize;
|
||||
var lineHeight = token.LineHeight;
|
||||
var lineWidth = token.LineWidth;
|
||||
var borderRadius = token.BorderRadius;
|
||||
var buttonPaddingHorizontal = token.ButtonPaddingHorizontal;
|
||||
var iconCls = token.IconCls;
|
||||
var paddingVertical = Math.Max(0, (controlHeight - fontSize * lineHeight) / 2 - lineWidth);
|
||||
var paddingHorizontal = buttonPaddingHorizontal - lineWidth;
|
||||
var iconOnlyCls = @$"{componentCls}-icon-only";
|
||||
return new CSSObject[]
|
||||
{
|
||||
new CSSObject()
|
||||
{
|
||||
[$"{componentCls}{sizePrefixCls}"] = new CSSObject()
|
||||
{
|
||||
FontSize = fontSize,
|
||||
Height = controlHeight,
|
||||
Padding = @$"{paddingVertical}px {paddingHorizontal}px",
|
||||
BorderRadius = borderRadius,
|
||||
[$"&{iconOnlyCls}"] = new CSSObject()
|
||||
{
|
||||
Width = controlHeight,
|
||||
PaddingInlineStart = 0,
|
||||
PaddingInlineEnd = 0,
|
||||
[$"&{componentCls}-round"] = new CSSObject()
|
||||
{
|
||||
Width = "auto",
|
||||
},
|
||||
[iconCls] = new CSSObject()
|
||||
{
|
||||
FontSize = token.ButtonIconOnlyFontSize,
|
||||
},
|
||||
},
|
||||
[$"&{componentCls}-loading"] = new CSSObject()
|
||||
{
|
||||
Opacity = token.OpacityLoading,
|
||||
Cursor = "default",
|
||||
},
|
||||
[$"{componentCls}-loading-icon"] = new CSSObject()
|
||||
{
|
||||
Transition = @$"width {token.MotionDurationSlow} {token.MotionEaseInOut}, opacity {token.MotionDurationSlow} {token.MotionEaseInOut}",
|
||||
},
|
||||
},
|
||||
},
|
||||
new CSSObject()
|
||||
{
|
||||
[$"{componentCls}{componentCls}-circle{sizePrefixCls}"] = GenCircleButtonStyle(token)
|
||||
},
|
||||
new CSSObject()
|
||||
{
|
||||
[$"{componentCls}{componentCls}-round{sizePrefixCls}"] = GenRoundButtonStyle(token)
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject[] GenSizeBaseButtonStyle(ButtonToken token)
|
||||
{
|
||||
return GenSizeButtonStyle(token);
|
||||
}
|
||||
|
||||
public CSSObject[] GenSizeSmallButtonStyle(ButtonToken token)
|
||||
{
|
||||
var smallToken = MergeToken(
|
||||
token,
|
||||
new ButtonToken()
|
||||
{
|
||||
ControlHeight = token.ControlHeightSM,
|
||||
Padding = token.PaddingXS,
|
||||
ButtonPaddingHorizontal = 8,
|
||||
BorderRadius = token.BorderRadiusSM,
|
||||
ButtonIconOnlyFontSize = token.FontSizeLG - 2,
|
||||
});
|
||||
return GenSizeButtonStyle(smallToken, $"{token.ComponentCls}-sm");
|
||||
}
|
||||
|
||||
public CSSObject[] GenSizeLargeButtonStyle(ButtonToken token)
|
||||
{
|
||||
var largeToken = MergeToken(
|
||||
token,
|
||||
new ButtonToken()
|
||||
{
|
||||
ControlHeight = token.ControlHeightLG,
|
||||
FontSize = token.FontSizeLG,
|
||||
BorderRadius = token.BorderRadiusLG,
|
||||
ButtonIconOnlyFontSize = token.FontSizeLG + 2,
|
||||
});
|
||||
return GenSizeButtonStyle(largeToken, $"{token.ComponentCls}-lg");
|
||||
}
|
||||
|
||||
public CSSObject GenBlockButtonStyle(ButtonToken token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
return new CSSObject()
|
||||
{
|
||||
[componentCls] = new CSSObject()
|
||||
{
|
||||
[$"&{componentCls}-block"] = new CSSObject()
|
||||
{
|
||||
Width = "100%",
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSInterpolation[] GenComponentStyleHook(GlobalToken token)
|
||||
{
|
||||
var controlTmpOutline = token.ControlTmpOutline;
|
||||
var paddingContentHorizontal = token.PaddingContentHorizontal;
|
||||
var buttonToken = MergeToken(
|
||||
token,
|
||||
new ButtonToken()
|
||||
{
|
||||
ColorOutlineDefault = controlTmpOutline,
|
||||
ButtonPaddingHorizontal = paddingContentHorizontal,
|
||||
ButtonIconOnlyFontSize = token.FontSizeLG,
|
||||
ButtonFontWeight = 400,
|
||||
});
|
||||
return new CSSInterpolation[]
|
||||
{
|
||||
GenSharedButtonStyle(buttonToken),
|
||||
GenSizeSmallButtonStyle(buttonToken),
|
||||
GenSizeBaseButtonStyle(buttonToken),
|
||||
GenSizeLargeButtonStyle(buttonToken),
|
||||
GenBlockButtonStyle(buttonToken),
|
||||
GenTypeButtonStyle(buttonToken),
|
||||
GenGroupStyle(buttonToken),
|
||||
GenCompactItemStyle(token),
|
||||
GenCompactItemVerticalStyle(token)
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenButtonBorderStyle(string buttonTypeCls, string borderColor)
|
||||
{
|
||||
return new CSSObject()
|
||||
{
|
||||
[$"> span, > {buttonTypeCls}"] = new CSSObject()
|
||||
{
|
||||
["&:not(:last-child)"] = new CSSObject()
|
||||
{
|
||||
[$"&, & > {buttonTypeCls}"] = new CSSObject()
|
||||
{
|
||||
["&:not(:disabled)"] = new CSSObject()
|
||||
{
|
||||
BorderInlineEndColor = borderColor,
|
||||
},
|
||||
},
|
||||
},
|
||||
["&:not(:first-child)"] = new CSSObject()
|
||||
{
|
||||
[$"&, & > {buttonTypeCls}"] = new CSSObject()
|
||||
{
|
||||
["&:not(:disabled)"] = new CSSObject()
|
||||
{
|
||||
BorderInlineStartColor = borderColor,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenGroupStyle(ButtonToken token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var fontSize = token.FontSize;
|
||||
var lineWidth = token.LineWidth;
|
||||
var colorPrimaryHover = token.ColorPrimaryHover;
|
||||
var colorErrorHover = token.ColorErrorHover;
|
||||
return new CSSObject()
|
||||
{
|
||||
[$"{componentCls}-group"] = new CSSObject[]
|
||||
{
|
||||
new CSSObject()
|
||||
{
|
||||
Position = "relative",
|
||||
Display = "inline-flex",
|
||||
[$"> span, > {componentCls}"] = new CSSObject()
|
||||
{
|
||||
["&:not(:last-child)"] = new CSSObject()
|
||||
{
|
||||
[$"&, & > {componentCls}"] = new CSSObject()
|
||||
{
|
||||
BorderStartEndRadius = 0,
|
||||
BorderEndEndRadius = 0,
|
||||
},
|
||||
},
|
||||
["&:not(:first-child)"] = new CSSObject()
|
||||
{
|
||||
MarginInlineStart = -lineWidth,
|
||||
[$"&, & > {componentCls}"] = new CSSObject()
|
||||
{
|
||||
BorderStartStartRadius = 0,
|
||||
BorderEndStartRadius = 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
[componentCls] = new CSSObject()
|
||||
{
|
||||
Position = "relative",
|
||||
ZIndex = 1,
|
||||
["&:hover,&:focus,&:active"] = new CSSObject()
|
||||
{
|
||||
ZIndex = 2,
|
||||
},
|
||||
["&[disabled]"] = new CSSObject()
|
||||
{
|
||||
ZIndex = 0,
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-icon-only"] = new CSSObject()
|
||||
{
|
||||
FontSize = fontSize,
|
||||
},
|
||||
},
|
||||
GenButtonBorderStyle($"{componentCls}-primary", colorPrimaryHover),
|
||||
GenButtonBorderStyle($"{componentCls}-danger", colorErrorHover)
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,271 @@
|
|||
using System;
|
||||
using CssInCs;
|
||||
using static AntDesign.GlobalStyle;
|
||||
using static AntDesign.Theme;
|
||||
|
||||
namespace AntDesign
|
||||
{
|
||||
public partial class CalendarToken : TokenWithCommonCls
|
||||
{
|
||||
public int YearControlWidth { get; set; }
|
||||
|
||||
public int MonthControlWidth { get; set; }
|
||||
|
||||
public int MiniContentHeight { get; set; }
|
||||
|
||||
}
|
||||
|
||||
public partial class CalendarToken
|
||||
{
|
||||
public string CalendarCls { get; set; }
|
||||
|
||||
public string CalendarFullBg { get; set; }
|
||||
|
||||
public string CalendarFullPanelBg { get; set; }
|
||||
|
||||
public string CalendarItemActiveBg { get; set; }
|
||||
|
||||
public int DateValueHeight { get; set; }
|
||||
|
||||
public int WeekHeight { get; set; }
|
||||
|
||||
public int DateContentHeight { get; set; }
|
||||
|
||||
}
|
||||
|
||||
public partial class Calendar
|
||||
{
|
||||
public CSSObject GenCalendarStyles(CalendarToken token)
|
||||
{
|
||||
var calendarCls = token.CalendarCls;
|
||||
var componentCls = token.ComponentCls;
|
||||
var calendarFullBg = token.CalendarFullBg;
|
||||
var calendarFullPanelBg = token.CalendarFullPanelBg;
|
||||
var calendarItemActiveBg = token.CalendarItemActiveBg;
|
||||
return new CSSObject()
|
||||
{
|
||||
[calendarCls] = new CSSObject()
|
||||
{
|
||||
["..."] = GenPanelStyle(token),
|
||||
["..."] = ResetComponent(token),
|
||||
Background = calendarFullBg,
|
||||
["&-rtl"] = new CSSObject()
|
||||
{
|
||||
Direction = "rtl",
|
||||
},
|
||||
[$"{calendarCls}-header"] = new CSSObject()
|
||||
{
|
||||
Display = "flex",
|
||||
JustifyContent = "flex-end",
|
||||
Padding = @$"{token.PaddingSM}px 0",
|
||||
[$"{calendarCls}-year-select"] = new CSSObject()
|
||||
{
|
||||
MinWidth = token.YearControlWidth,
|
||||
},
|
||||
[$"{calendarCls}-month-select"] = new CSSObject()
|
||||
{
|
||||
MinWidth = token.MonthControlWidth,
|
||||
MarginInlineStart = token.MarginXS,
|
||||
},
|
||||
[$"{calendarCls}-mode-switch"] = new CSSObject()
|
||||
{
|
||||
MarginInlineStart = token.MarginXS,
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"{calendarCls} {componentCls}-panel"] = new CSSObject()
|
||||
{
|
||||
Background = calendarFullPanelBg,
|
||||
Border = 0,
|
||||
BorderTop = @$"{token.LineWidth}px {token.LineType} {token.ColorSplit}",
|
||||
BorderRadius = 0,
|
||||
[$"{componentCls}-month-panel, {componentCls}-date-panel"] = new CSSObject()
|
||||
{
|
||||
Width = "auto",
|
||||
},
|
||||
[$"{componentCls}-body"] = new CSSObject()
|
||||
{
|
||||
Padding = @$"{token.PaddingXS}px 0",
|
||||
},
|
||||
[$"{componentCls}-content"] = new CSSObject()
|
||||
{
|
||||
Width = "100%",
|
||||
},
|
||||
},
|
||||
[$"{calendarCls}-mini"] = new CSSObject()
|
||||
{
|
||||
BorderRadius = token.BorderRadiusLG,
|
||||
[$"{calendarCls}-header"] = new CSSObject()
|
||||
{
|
||||
PaddingInlineEnd = token.PaddingXS,
|
||||
PaddingInlineStart = token.PaddingXS,
|
||||
},
|
||||
[$"{componentCls}-panel"] = new CSSObject()
|
||||
{
|
||||
BorderRadius = @$"0 0 {token.BorderRadiusLG}px {token.BorderRadiusLG}px",
|
||||
},
|
||||
[$"{componentCls}-content"] = new CSSObject()
|
||||
{
|
||||
Height = token.MiniContentHeight,
|
||||
["th"] = new CSSObject()
|
||||
{
|
||||
Height = "auto",
|
||||
Padding = 0,
|
||||
LineHeight = @$"{token.WeekHeight}px",
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-cell::before"] = new CSSObject()
|
||||
{
|
||||
PointerEvents = "none",
|
||||
},
|
||||
},
|
||||
[$"{calendarCls}{calendarCls}-full"] = new CSSObject()
|
||||
{
|
||||
[$"{componentCls}-panel"] = new CSSObject()
|
||||
{
|
||||
Display = "block",
|
||||
Width = "100%",
|
||||
TextAlign = "end",
|
||||
Background = calendarFullBg,
|
||||
Border = 0,
|
||||
[$"{componentCls}-body"] = new CSSObject()
|
||||
{
|
||||
["th, td"] = new CSSObject()
|
||||
{
|
||||
Padding = 0,
|
||||
},
|
||||
["th"] = new CSSObject()
|
||||
{
|
||||
Height = "auto",
|
||||
PaddingInlineEnd = token.PaddingSM,
|
||||
PaddingBottom = token.PaddingXXS,
|
||||
LineHeight = @$"{token.WeekHeight}px",
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-cell"] = new CSSObject()
|
||||
{
|
||||
["&::before"] = new CSSObject()
|
||||
{
|
||||
Display = "none",
|
||||
},
|
||||
["&:hover"] = new CSSObject()
|
||||
{
|
||||
[$"{calendarCls}-date"] = new CSSObject()
|
||||
{
|
||||
Background = token.ControlItemBgHover,
|
||||
},
|
||||
},
|
||||
[$"{calendarCls}-date-today::before"] = new CSSObject()
|
||||
{
|
||||
Display = "none",
|
||||
},
|
||||
[$"&-in-view{componentCls}-cell-selected"] = new CSSObject()
|
||||
{
|
||||
[$"{calendarCls}-date, {calendarCls}-date-today"] = new CSSObject()
|
||||
{
|
||||
Background = calendarItemActiveBg,
|
||||
},
|
||||
},
|
||||
["&-selected, &-selected:hover"] = new CSSObject()
|
||||
{
|
||||
[$"{calendarCls}-date, {calendarCls}-date-today"] = new CSSObject()
|
||||
{
|
||||
[$"{calendarCls}-date-value"] = new CSSObject()
|
||||
{
|
||||
Color = token.ColorPrimary,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"{calendarCls}-date"] = new CSSObject()
|
||||
{
|
||||
Display = "block",
|
||||
Width = "auto",
|
||||
Height = "auto",
|
||||
Margin = @$"0 {token.MarginXS / 2}px",
|
||||
Padding = @$"{token.PaddingXS / 2}px {token.PaddingXS}px 0",
|
||||
Border = 0,
|
||||
BorderTop = @$"{token.LineWidthBold}px {token.LineType} {token.ColorSplit}",
|
||||
BorderRadius = 0,
|
||||
Transition = @$"background {token.MotionDurationSlow}",
|
||||
["&-value"] = new CSSObject()
|
||||
{
|
||||
LineHeight = @$"{token.DateValueHeight}px",
|
||||
Transition = @$"color {token.MotionDurationSlow}",
|
||||
},
|
||||
["&-content"] = new CSSObject()
|
||||
{
|
||||
Position = "static",
|
||||
Width = "auto",
|
||||
Height = token.DateContentHeight,
|
||||
OverflowY = "auto",
|
||||
Color = token.ColorText,
|
||||
LineHeight = token.LineHeight,
|
||||
TextAlign = "start",
|
||||
},
|
||||
["&-today"] = new CSSObject()
|
||||
{
|
||||
BorderColor = token.ColorPrimary,
|
||||
[$"{calendarCls}-date-value"] = new CSSObject()
|
||||
{
|
||||
Color = token.ColorText,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"@media only screen and (max-width: {token.ScreenXS}px) "] = new CSSObject()
|
||||
{
|
||||
[$"{calendarCls}"] = new CSSObject()
|
||||
{
|
||||
[$"{calendarCls}-header"] = new CSSObject()
|
||||
{
|
||||
Display = "block",
|
||||
[$"{calendarCls}-year-select"] = new CSSObject()
|
||||
{
|
||||
Width = "50%",
|
||||
},
|
||||
[$"{calendarCls}-month-select"] = new CSSObject()
|
||||
{
|
||||
Width = @$"calc(50% - {token.PaddingXS}px)",
|
||||
},
|
||||
[$"{calendarCls}-mode-switch"] = new CSSObject()
|
||||
{
|
||||
Width = "100%",
|
||||
MarginTop = token.MarginXS,
|
||||
MarginInlineStart = 0,
|
||||
["> label"] = new CSSObject()
|
||||
{
|
||||
Width = "50%",
|
||||
TextAlign = "center",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
protected override CSSInterpolation[] UseStyle(GlobalToken token)
|
||||
{
|
||||
var calendarCls = @$"{token.ComponentCls}-calendar";
|
||||
var calendarToken = MergeToken(
|
||||
initInputToken<FullToken<"Calendar">>(token),
|
||||
initPickerPanelToken(token),
|
||||
new CalendarToken()
|
||||
{
|
||||
CalendarCls = calendarCls,
|
||||
PickerCellInnerCls = @$"{token.ComponentCls}-cell-inner",
|
||||
CalendarFullBg = token.ColorBgContainer,
|
||||
CalendarFullPanelBg = token.ColorBgContainer,
|
||||
CalendarItemActiveBg = token.ControlItemBgActive,
|
||||
DateValueHeight = token.ControlHeightSM,
|
||||
WeekHeight = token.ControlHeightSM * 0.75,
|
||||
DateContentHeight = (token.FontSizeSM * token.LineHeightSM + token.MarginXS) * 3 + token.LineWidth * 2,
|
||||
});
|
||||
return new CSSInterpolation[] { GenCalendarStyles(calendarToken) };
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,422 @@
|
|||
using System;
|
||||
using CssInCs;
|
||||
using static AntDesign.GlobalStyle;
|
||||
using static AntDesign.Theme;
|
||||
|
||||
namespace AntDesign
|
||||
{
|
||||
public partial class CardToken : TokenWithCommonCls
|
||||
{
|
||||
}
|
||||
|
||||
public partial class CardToken
|
||||
{
|
||||
public int CardHeadHeight { get; set; }
|
||||
|
||||
public int CardHeadHeightSM { get; set; }
|
||||
|
||||
public string CardShadow { get; set; }
|
||||
|
||||
public int CardHeadPadding { get; set; }
|
||||
|
||||
public int CardPaddingSM { get; set; }
|
||||
|
||||
public int CardPaddingBase { get; set; }
|
||||
|
||||
public int CardHeadTabsMarginBottom { get; set; }
|
||||
|
||||
public string CardActionsLiMargin { get; set; }
|
||||
|
||||
public int CardActionsIconSize { get; set; }
|
||||
|
||||
}
|
||||
|
||||
public partial class Card
|
||||
{
|
||||
public CSSObject GenCardHeadStyle(CardToken token)
|
||||
{
|
||||
var antCls = token.AntCls;
|
||||
var componentCls = token.ComponentCls;
|
||||
var cardHeadHeight = token.CardHeadHeight;
|
||||
var cardPaddingBase = token.CardPaddingBase;
|
||||
var cardHeadTabsMarginBottom = token.CardHeadTabsMarginBottom;
|
||||
return new CSSObject()
|
||||
{
|
||||
Display = "flex",
|
||||
JustifyContent = "center",
|
||||
FlexDirection = "column",
|
||||
MinHeight = cardHeadHeight,
|
||||
MarginBottom = -1,
|
||||
Padding = @$"0 {cardPaddingBase}px",
|
||||
Color = token.ColorTextHeading,
|
||||
FontWeight = token.FontWeightStrong,
|
||||
FontSize = token.FontSizeLG,
|
||||
Background = "transparent",
|
||||
BorderBottom = @$"{token.LineWidth}px {token.LineType} {token.ColorBorderSecondary}",
|
||||
BorderRadius = @$"{token.BorderRadiusLG}px {token.BorderRadiusLG}px 0 0",
|
||||
["..."] = ClearFix(),
|
||||
["&-wrapper"] = new CSSObject()
|
||||
{
|
||||
Width = "100%",
|
||||
Display = "flex",
|
||||
AlignItems = "center",
|
||||
},
|
||||
["&-title"] = new CSSObject()
|
||||
{
|
||||
Display = "inline-block",
|
||||
Flex = 1,
|
||||
["..."] = TextEllipsis,
|
||||
[$">{componentCls}-typography,>{componentCls}-typography-edit-content"] = new CSSObject()
|
||||
{
|
||||
InsetInlineStart = 0,
|
||||
MarginTop = 0,
|
||||
MarginBottom = 0,
|
||||
},
|
||||
},
|
||||
[$"{antCls}-tabs-top"] = new CSSObject()
|
||||
{
|
||||
Clear = "both",
|
||||
MarginBottom = cardHeadTabsMarginBottom,
|
||||
Color = token.ColorText,
|
||||
FontWeight = "normal",
|
||||
FontSize = token.FontSize,
|
||||
["&-bar"] = new CSSObject()
|
||||
{
|
||||
BorderBottom = @$"{token.LineWidth}px {token.LineType} {token.ColorBorderSecondary}",
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenCardGridStyle(CardToken token)
|
||||
{
|
||||
var cardPaddingBase = token.CardPaddingBase;
|
||||
var colorBorderSecondary = token.ColorBorderSecondary;
|
||||
var cardShadow = token.CardShadow;
|
||||
var lineWidth = token.LineWidth;
|
||||
return new CSSObject()
|
||||
{
|
||||
Width = "33.33%",
|
||||
Padding = cardPaddingBase,
|
||||
Border = 0,
|
||||
BorderRadius = 0,
|
||||
BoxShadow = @$"
|
||||
{lineWidth}px 0 0 0 {colorBorderSecondary},
|
||||
0 {lineWidth}px 0 0 {colorBorderSecondary},
|
||||
{lineWidth}px {lineWidth}px 0 0 {colorBorderSecondary},
|
||||
{lineWidth}px 0 0 0 {colorBorderSecondary} inset,
|
||||
0 {lineWidth}px 0 0 {colorBorderSecondary} inset;
|
||||
",
|
||||
Transition = @$"all {token.MotionDurationMid}",
|
||||
["&-hoverable:hover"] = new CSSObject()
|
||||
{
|
||||
Position = "relative",
|
||||
ZIndex = 1,
|
||||
BoxShadow = cardShadow,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenCardActionsStyle(CardToken token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var iconCls = token.IconCls;
|
||||
var cardActionsLiMargin = token.CardActionsLiMargin;
|
||||
var cardActionsIconSize = token.CardActionsIconSize;
|
||||
var colorBorderSecondary = token.ColorBorderSecondary;
|
||||
return new CSSObject()
|
||||
{
|
||||
Margin = 0,
|
||||
Padding = 0,
|
||||
ListStyle = "none",
|
||||
Background = token.ColorBgContainer,
|
||||
BorderTop = @$"{token.LineWidth}px {token.LineType} {colorBorderSecondary}",
|
||||
Display = "flex",
|
||||
BorderRadius = @$"0 0 {token.BorderRadiusLG}px {token.BorderRadiusLG}px ",
|
||||
["..."] = ClearFix(),
|
||||
["& > li"] = new CSSObject()
|
||||
{
|
||||
Margin = cardActionsLiMargin,
|
||||
Color = token.ColorTextDescription,
|
||||
TextAlign = "center",
|
||||
["> span"] = new CSSObject()
|
||||
{
|
||||
Position = "relative",
|
||||
Display = "block",
|
||||
MinWidth = token.CardActionsIconSize * 2,
|
||||
FontSize = token.FontSize,
|
||||
LineHeight = token.LineHeight,
|
||||
Cursor = "pointer",
|
||||
["&:hover"] = new CSSObject()
|
||||
{
|
||||
Color = token.ColorPrimary,
|
||||
Transition = @$"color {token.MotionDurationMid}",
|
||||
},
|
||||
[$"a:not({componentCls}-btn), > {iconCls}"] = new CSSObject()
|
||||
{
|
||||
Display = "inline-block",
|
||||
Width = "100%",
|
||||
Color = token.ColorTextDescription,
|
||||
LineHeight = @$"{token.FontSize * token.LineHeight}px",
|
||||
Transition = @$"color {token.MotionDurationMid}",
|
||||
["&:hover"] = new CSSObject()
|
||||
{
|
||||
Color = token.ColorPrimary,
|
||||
},
|
||||
},
|
||||
[$"> {iconCls}"] = new CSSObject()
|
||||
{
|
||||
FontSize = cardActionsIconSize,
|
||||
LineHeight = @$"{cardActionsIconSize * token.LineHeight}px",
|
||||
},
|
||||
},
|
||||
["&:not(:last-child)"] = new CSSObject()
|
||||
{
|
||||
BorderInlineEnd = @$"{token.LineWidth}px {token.LineType} {colorBorderSecondary}",
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenCardMetaStyle(CardToken token)
|
||||
{
|
||||
return new CSSObject()
|
||||
{
|
||||
Margin = @$"-{token.MarginXXS}px 0",
|
||||
Display = "flex",
|
||||
["..."] = ClearFix(),
|
||||
["&-avatar"] = new CSSObject()
|
||||
{
|
||||
PaddingInlineEnd = token.Padding,
|
||||
},
|
||||
["&-detail"] = new CSSObject()
|
||||
{
|
||||
Overflow = "hidden",
|
||||
Flex = 1,
|
||||
["> div:not(:last-child)"] = new CSSObject()
|
||||
{
|
||||
MarginBottom = token.MarginXS,
|
||||
},
|
||||
},
|
||||
["&-title"] = new CSSObject()
|
||||
{
|
||||
Color = token.ColorTextHeading,
|
||||
FontWeight = token.FontWeightStrong,
|
||||
FontSize = token.FontSizeLG,
|
||||
["..."] = TextEllipsis,
|
||||
},
|
||||
["&-description"] = new CSSObject()
|
||||
{
|
||||
Color = token.ColorTextDescription,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenCardTypeInnerStyle(CardToken token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var cardPaddingBase = token.CardPaddingBase;
|
||||
var colorFillAlter = token.ColorFillAlter;
|
||||
return new CSSObject()
|
||||
{
|
||||
[$"{componentCls}-head"] = new CSSObject()
|
||||
{
|
||||
Padding = @$"0 {cardPaddingBase}px",
|
||||
Background = colorFillAlter,
|
||||
["&-title"] = new CSSObject()
|
||||
{
|
||||
FontSize = token.FontSize,
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-body"] = new CSSObject()
|
||||
{
|
||||
Padding = @$"{token.Padding}px {cardPaddingBase}px",
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenCardLoadingStyle(CardToken token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
return new CSSObject()
|
||||
{
|
||||
Overflow = "hidden",
|
||||
[$"{componentCls}-body"] = new CSSObject()
|
||||
{
|
||||
UserSelect = "none",
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenCardStyle(CardToken token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var cardShadow = token.CardShadow;
|
||||
var cardHeadPadding = token.CardHeadPadding;
|
||||
var colorBorderSecondary = token.ColorBorderSecondary;
|
||||
var boxShadowTertiary = token.BoxShadowTertiary;
|
||||
var cardPaddingBase = token.CardPaddingBase;
|
||||
return new CSSObject()
|
||||
{
|
||||
[componentCls] = new CSSObject()
|
||||
{
|
||||
["..."] = ResetComponent(token),
|
||||
Position = "relative",
|
||||
Background = token.ColorBgContainer,
|
||||
BorderRadius = token.BorderRadiusLG,
|
||||
[$"&:not({componentCls}-bordered)"] = new CSSObject()
|
||||
{
|
||||
BoxShadow = boxShadowTertiary,
|
||||
},
|
||||
[$"{componentCls}-head"] = GenCardHeadStyle(token),
|
||||
[$"{componentCls}-extra"] = new CSSObject()
|
||||
{
|
||||
MarginInlineStart = "auto",
|
||||
Color = "",
|
||||
FontWeight = "normal",
|
||||
FontSize = token.FontSize,
|
||||
},
|
||||
[$"{componentCls}-body"] = new CSSObject()
|
||||
{
|
||||
Padding = cardPaddingBase,
|
||||
BorderRadius = @$" 0 0 {token.BorderRadiusLG}px {token.BorderRadiusLG}px",
|
||||
["..."] = ClearFix()
|
||||
},
|
||||
[$"{componentCls}-grid"] = GenCardGridStyle(token),
|
||||
[$"{componentCls}-cover"] = new CSSObject()
|
||||
{
|
||||
["> *"] = new CSSObject()
|
||||
{
|
||||
Display = "block",
|
||||
Width = "100%",
|
||||
},
|
||||
["img"] = new CSSObject()
|
||||
{
|
||||
BorderRadius = @$"{token.BorderRadiusLG}px {token.BorderRadiusLG}px 0 0",
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-actions"] = GenCardActionsStyle(token),
|
||||
[$"{componentCls}-meta"] = GenCardMetaStyle(token)
|
||||
},
|
||||
[$"{componentCls}-bordered"] = new CSSObject()
|
||||
{
|
||||
Border = @$"{token.LineWidth}px {token.LineType} {colorBorderSecondary}",
|
||||
[$"{componentCls}-cover"] = new CSSObject()
|
||||
{
|
||||
MarginTop = -1,
|
||||
MarginInlineStart = -1,
|
||||
MarginInlineEnd = -1,
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-hoverable"] = new CSSObject()
|
||||
{
|
||||
Cursor = "pointer",
|
||||
Transition = @$"box-shadow {token.MotionDurationMid}, border-color {token.MotionDurationMid}",
|
||||
["&:hover"] = new CSSObject()
|
||||
{
|
||||
BorderColor = "transparent",
|
||||
BoxShadow = cardShadow,
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-contain-grid"] = new CSSObject()
|
||||
{
|
||||
[$"{componentCls}-body"] = new CSSObject()
|
||||
{
|
||||
Display = "flex",
|
||||
FlexWrap = "wrap",
|
||||
},
|
||||
[$"&:not({componentCls}-loading) {componentCls}-body"] = new CSSObject()
|
||||
{
|
||||
MarginBlockStart = -token.LineWidth,
|
||||
MarginInlineStart = -token.LineWidth,
|
||||
Padding = 0,
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-contain-tabs"] = new CSSObject()
|
||||
{
|
||||
[$"> {componentCls}-head"] = new CSSObject()
|
||||
{
|
||||
[$"{componentCls}-head-title, {componentCls}-extra"] = new CSSObject()
|
||||
{
|
||||
PaddingTop = cardHeadPadding,
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-type-inner"] = GenCardTypeInnerStyle(token),
|
||||
[$"{componentCls}-loading"] = GenCardLoadingStyle(token),
|
||||
[$"{componentCls}-rtl"] = new CSSObject()
|
||||
{
|
||||
Direction = "rtl",
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenCardSizeStyle(CardToken token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var cardPaddingSM = token.CardPaddingSM;
|
||||
var cardHeadHeightSM = token.CardHeadHeightSM;
|
||||
return new CSSObject()
|
||||
{
|
||||
[$"{componentCls}-small"] = new CSSObject()
|
||||
{
|
||||
[$"> {componentCls}-head"] = new CSSObject()
|
||||
{
|
||||
MinHeight = cardHeadHeightSM,
|
||||
Padding = @$"0 {cardPaddingSM}px",
|
||||
FontSize = token.FontSize,
|
||||
[$"> {componentCls}-head-wrapper"] = new CSSObject()
|
||||
{
|
||||
[$"> {componentCls}-extra"] = new CSSObject()
|
||||
{
|
||||
FontSize = token.FontSize,
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"> {componentCls}-body"] = new CSSObject()
|
||||
{
|
||||
Padding = cardPaddingSM,
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-small{componentCls}-contain-tabs"] = new CSSObject()
|
||||
{
|
||||
[$"> {componentCls}-head"] = new CSSObject()
|
||||
{
|
||||
[$"{componentCls}-head-title, {componentCls}-extra"] = new CSSObject()
|
||||
{
|
||||
MinHeight = cardHeadHeightSM,
|
||||
PaddingTop = 0,
|
||||
Display = "flex",
|
||||
AlignItems = "center",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
protected override CSSInterpolation[] UseStyle(GlobalToken token)
|
||||
{
|
||||
var cardToken = MergeToken(
|
||||
token,
|
||||
new CardToken()
|
||||
{
|
||||
CardShadow = token.BoxShadowCard,
|
||||
CardHeadHeight = token.FontSizeLG * token.LineHeightLG + token.Padding * 2,
|
||||
CardHeadHeightSM = token.FontSize * token.LineHeight + token.PaddingXS * 2,
|
||||
CardHeadPadding = token.Padding,
|
||||
CardPaddingBase = token.PaddingLG,
|
||||
CardHeadTabsMarginBottom = -token.Padding - token.LineWidth,
|
||||
CardActionsLiMargin = @$"{token.PaddingSM}px 0",
|
||||
CardActionsIconSize = token.FontSize,
|
||||
CardPaddingSM = 12,
|
||||
});
|
||||
return new CSSInterpolation[]
|
||||
{
|
||||
GenCardStyle(cardToken),
|
||||
GenCardSizeStyle(cardToken)
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,371 @@
|
|||
using System;
|
||||
using CssInCs;
|
||||
using static AntDesign.GlobalStyle;
|
||||
using static AntDesign.Theme;
|
||||
|
||||
namespace AntDesign
|
||||
{
|
||||
public partial class CarouselToken : TokenWithCommonCls
|
||||
{
|
||||
public int DotWidth { get; set; }
|
||||
|
||||
public int DotHeight { get; set; }
|
||||
|
||||
public int DotWidthActive { get; set; }
|
||||
|
||||
}
|
||||
|
||||
public partial class CarouselToken
|
||||
{
|
||||
public int CarouselArrowSize { get; set; }
|
||||
|
||||
public int CarouselDotOffset { get; set; }
|
||||
|
||||
public int CarouselDotInline { get; set; }
|
||||
|
||||
}
|
||||
|
||||
public partial class Carousel
|
||||
{
|
||||
public CSSObject GenCarouselStyle(CarouselToken token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var antCls = token.AntCls;
|
||||
var carouselArrowSize = token.CarouselArrowSize;
|
||||
var carouselDotOffset = token.CarouselDotOffset;
|
||||
var marginXXS = token.MarginXXS;
|
||||
var arrowOffset = (int)(-carouselArrowSize * 1.25);
|
||||
var carouselDotMargin = marginXXS;
|
||||
return new CSSObject()
|
||||
{
|
||||
[componentCls] = new CSSObject()
|
||||
{
|
||||
["..."] = ResetComponent(token),
|
||||
[".slick-slider"] = new CSSObject()
|
||||
{
|
||||
Position = "relative",
|
||||
Display = "block",
|
||||
BoxSizing = "border-box",
|
||||
TouchAction = "pan-y",
|
||||
WebkitTouchCallout = "none",
|
||||
WebkitTapHighlightColor = "transparent",
|
||||
[".slick-track, .slick-list"] = new CSSObject()
|
||||
{
|
||||
Transform = "translate3d(0, 0, 0)",
|
||||
TouchAction = "pan-y",
|
||||
},
|
||||
},
|
||||
[".slick-list"] = new CSSObject()
|
||||
{
|
||||
Position = "relative",
|
||||
Display = "block",
|
||||
Margin = 0,
|
||||
Padding = 0,
|
||||
Overflow = "hidden",
|
||||
["&:focus"] = new CSSObject()
|
||||
{
|
||||
Outline = "none",
|
||||
},
|
||||
["&.dragging"] = new CSSObject()
|
||||
{
|
||||
Cursor = "pointer",
|
||||
},
|
||||
[".slick-slide"] = new CSSObject()
|
||||
{
|
||||
PointerEvents = "none",
|
||||
[$"input{antCls}-radio-input, input{antCls}-checkbox-input"] = new CSSObject()
|
||||
{
|
||||
Visibility = "hidden",
|
||||
},
|
||||
["&.slick-active"] = new CSSObject()
|
||||
{
|
||||
PointerEvents = "auto",
|
||||
[$"input{antCls}-radio-input, input{antCls}-checkbox-input"] = new CSSObject()
|
||||
{
|
||||
Visibility = "visible",
|
||||
},
|
||||
},
|
||||
["> div > div"] = new CSSObject()
|
||||
{
|
||||
VerticalAlign = "bottom",
|
||||
},
|
||||
},
|
||||
},
|
||||
[".slick-track"] = new CSSObject()
|
||||
{
|
||||
Position = "relative",
|
||||
Top = 0,
|
||||
InsetInlineStart = 0,
|
||||
Display = "block",
|
||||
["&::before, &::after"] = new CSSObject()
|
||||
{
|
||||
Display = "table",
|
||||
Content = "\"\"",
|
||||
},
|
||||
["&::after"] = new CSSObject()
|
||||
{
|
||||
Clear = "both",
|
||||
},
|
||||
},
|
||||
[".slick-slide"] = new CSSObject()
|
||||
{
|
||||
Display = "none",
|
||||
Float = "left",
|
||||
Height = "100%",
|
||||
MinHeight = 1,
|
||||
["img"] = new CSSObject()
|
||||
{
|
||||
Display = "block",
|
||||
},
|
||||
["&.dragging img"] = new CSSObject()
|
||||
{
|
||||
PointerEvents = "none",
|
||||
},
|
||||
},
|
||||
[".slick-initialized .slick-slide"] = new CSSObject()
|
||||
{
|
||||
Display = "block",
|
||||
},
|
||||
[".slick-vertical .slick-slide"] = new CSSObject()
|
||||
{
|
||||
Display = "block",
|
||||
Height = "auto",
|
||||
},
|
||||
[".Slick-arrow.slick-hidden"] = new CSSObject()
|
||||
{
|
||||
Display = "none",
|
||||
},
|
||||
[".slick-prev, .slick-next"] = new CSSObject()
|
||||
{
|
||||
Position = "absolute",
|
||||
Top = "50%",
|
||||
Display = "block",
|
||||
Width = carouselArrowSize,
|
||||
Height = carouselArrowSize,
|
||||
MarginTop = -carouselArrowSize / 2,
|
||||
Padding = 0,
|
||||
Color = "transparent",
|
||||
FontSize = 0,
|
||||
LineHeight = 0,
|
||||
Background = "transparent",
|
||||
Border = 0,
|
||||
Outline = "none",
|
||||
Cursor = "pointer",
|
||||
["&:hover, &:focus"] = new CSSObject()
|
||||
{
|
||||
Color = "transparent",
|
||||
Background = "transparent",
|
||||
Outline = "none",
|
||||
["&::before"] = new CSSObject()
|
||||
{
|
||||
Opacity = 1,
|
||||
},
|
||||
},
|
||||
["&.slick-disabled::before"] = new CSSObject()
|
||||
{
|
||||
Opacity = 0.25f,
|
||||
},
|
||||
},
|
||||
[".slick-prev"] = new CSSObject()
|
||||
{
|
||||
InsetInlineStart = arrowOffset,
|
||||
["&::before"] = new CSSObject()
|
||||
{
|
||||
Content = "\"←\"",
|
||||
},
|
||||
},
|
||||
[".slick-next"] = new CSSObject()
|
||||
{
|
||||
InsetInlineEnd = arrowOffset,
|
||||
["&::before"] = new CSSObject()
|
||||
{
|
||||
Content = "\"→\"",
|
||||
},
|
||||
},
|
||||
[".slick-dots"] = new CSSObject()
|
||||
{
|
||||
Position = "absolute",
|
||||
InsetInlineEnd = 0,
|
||||
Bottom = 0,
|
||||
InsetInlineStart = 0,
|
||||
ZIndex = 15,
|
||||
Display = "flex !important",
|
||||
JustifyContent = "center",
|
||||
PaddingInlineStart = 0,
|
||||
ListStyle = "none",
|
||||
["&-bottom"] = new CSSObject()
|
||||
{
|
||||
Bottom = carouselDotOffset,
|
||||
},
|
||||
["&-top"] = new CSSObject()
|
||||
{
|
||||
Top = carouselDotOffset,
|
||||
Bottom = "auto",
|
||||
},
|
||||
["li"] = new CSSObject()
|
||||
{
|
||||
Position = "relative",
|
||||
Display = "inline-block",
|
||||
Flex = "0 1 auto",
|
||||
BoxSizing = "content-box",
|
||||
Width = token.DotWidth,
|
||||
Height = token.DotHeight,
|
||||
MarginInline = carouselDotMargin,
|
||||
Padding = 0,
|
||||
TextAlign = "center",
|
||||
TextIndent = -999,
|
||||
VerticalAlign = "top",
|
||||
Transition = @$"all {token.MotionDurationSlow}",
|
||||
["button"] = new CSSObject()
|
||||
{
|
||||
Position = "relative",
|
||||
Display = "block",
|
||||
Width = "100%",
|
||||
Height = token.DotHeight,
|
||||
Padding = 0,
|
||||
Color = "transparent",
|
||||
FontSize = 0,
|
||||
Background = token.ColorBgContainer,
|
||||
Border = 0,
|
||||
BorderRadius = 1,
|
||||
Outline = "none",
|
||||
Cursor = "pointer",
|
||||
Opacity = 0.3f,
|
||||
Transition = @$"all {token.MotionDurationSlow}",
|
||||
["&: hover, &:focus"] = new CSSObject()
|
||||
{
|
||||
Opacity = 0.75f,
|
||||
},
|
||||
["&::after"] = new CSSObject()
|
||||
{
|
||||
Position = "absolute",
|
||||
Inset = -carouselDotMargin,
|
||||
Content = "\"\"",
|
||||
},
|
||||
},
|
||||
["&.slick-active"] = new CSSObject()
|
||||
{
|
||||
Width = token.DotWidthActive,
|
||||
["& button"] = new CSSObject()
|
||||
{
|
||||
Background = token.ColorBgContainer,
|
||||
Opacity = 1,
|
||||
},
|
||||
["&: hover, &:focus"] = new CSSObject()
|
||||
{
|
||||
Opacity = 1,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenCarouselVerticalStyle(CarouselToken token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var carouselDotOffset = token.CarouselDotOffset;
|
||||
var marginXXS = token.MarginXXS;
|
||||
var reverseSizeOfDot = new CSSObject()
|
||||
{
|
||||
Width = token.DotHeight,
|
||||
Height = token.DotWidth,
|
||||
};
|
||||
return new CSSObject()
|
||||
{
|
||||
[$"{componentCls}-vertical"] = new CSSObject()
|
||||
{
|
||||
[".slick-dots"] = new CSSObject()
|
||||
{
|
||||
Top = "50%",
|
||||
Bottom = "auto",
|
||||
FlexDirection = "column",
|
||||
Width = token.DotHeight,
|
||||
Height = "auto",
|
||||
Margin = 0,
|
||||
Transform = "translateY(-50%)",
|
||||
["&-left"] = new CSSObject()
|
||||
{
|
||||
InsetInlineEnd = "auto",
|
||||
InsetInlineStart = carouselDotOffset,
|
||||
},
|
||||
["&-right"] = new CSSObject()
|
||||
{
|
||||
InsetInlineEnd = carouselDotOffset,
|
||||
InsetInlineStart = "auto",
|
||||
},
|
||||
["li"] = new CSSObject()
|
||||
{
|
||||
["..."] = reverseSizeOfDot,
|
||||
Margin = @$"{marginXXS}px 0",
|
||||
VerticalAlign = "baseline",
|
||||
["button"] = reverseSizeOfDot,
|
||||
["&.slick-active"] = new CSSObject()
|
||||
{
|
||||
["..."] = reverseSizeOfDot,
|
||||
["button"] = reverseSizeOfDot,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject[] GenCarouselRtlStyle(CarouselToken token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
return new CSSObject[]
|
||||
{
|
||||
new CSSObject()
|
||||
{
|
||||
[$"{componentCls}-rtl"] = new CSSObject()
|
||||
{
|
||||
Direction = "rtl",
|
||||
[".slick-dots"] = new CSSObject()
|
||||
{
|
||||
[$"{componentCls}-rtl&"] = new CSSObject()
|
||||
{
|
||||
FlexDirection = "row-reverse",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
new CSSObject()
|
||||
{
|
||||
[$"{componentCls}-vertical"] = new CSSObject()
|
||||
{
|
||||
[".slick-dots"] = new CSSObject()
|
||||
{
|
||||
[$"{componentCls}-rtl&"] = new CSSObject()
|
||||
{
|
||||
FlexDirection = "column",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
protected override CSSInterpolation[] UseStyle(GlobalToken token)
|
||||
{
|
||||
var controlHeightLG = token.ControlHeightLG;
|
||||
var controlHeightSM = token.ControlHeightSM;
|
||||
var carouselToken = MergeToken(
|
||||
token,
|
||||
new CarouselToken()
|
||||
{
|
||||
CarouselArrowSize = controlHeightLG / 2,
|
||||
CarouselDotOffset = controlHeightSM / 2,
|
||||
});
|
||||
return new CSSInterpolation[]
|
||||
{
|
||||
GenCarouselStyle(carouselToken),
|
||||
GenCarouselVerticalStyle(carouselToken),
|
||||
GenCarouselRtlStyle(carouselToken)
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,172 @@
|
|||
using System;
|
||||
using CssInCs;
|
||||
using static AntDesign.GlobalStyle;
|
||||
using static AntDesign.Theme;
|
||||
|
||||
namespace AntDesign
|
||||
{
|
||||
public partial class CascaderToken : TokenWithCommonCls
|
||||
{
|
||||
public int ControlWidth { get; set; }
|
||||
|
||||
public int ControlItemWidth { get; set; }
|
||||
|
||||
public int DropdownHeight { get; set; }
|
||||
|
||||
}
|
||||
|
||||
public partial class CascaderToken
|
||||
{
|
||||
}
|
||||
|
||||
public partial class Cascader
|
||||
{
|
||||
public CSSObject[] GenBaseStyle(CascaderToken token)
|
||||
{
|
||||
var prefixCls = token.PrefixCls;
|
||||
var componentCls = token.ComponentCls;
|
||||
var antCls = token.AntCls;
|
||||
var cascaderMenuItemCls = @$"{componentCls}-menu-item";
|
||||
var iconCls = @$"
|
||||
&{cascaderMenuItemCls}-expand {cascaderMenuItemCls}-expand-icon,
|
||||
{cascaderMenuItemCls}-loading-icon
|
||||
";
|
||||
var itemPaddingVertical = Math.Round((double)(token.ControlHeight - token.FontSize * token.LineHeight) / 2);
|
||||
return new CSSObject[]
|
||||
{
|
||||
new CSSObject()
|
||||
{
|
||||
[componentCls] = new CSSObject()
|
||||
{
|
||||
Width = token.ControlWidth,
|
||||
},
|
||||
},
|
||||
new CSSObject()
|
||||
{
|
||||
[$"{componentCls}-dropdown"] = new CSSObject[]
|
||||
{
|
||||
GetCheckboxStyle($"{prefixCls}-checkbox", token),
|
||||
new CSSObject()
|
||||
{
|
||||
[$"&{antCls}-select-dropdown"] = new CSSObject()
|
||||
{
|
||||
Padding = 0,
|
||||
},
|
||||
},
|
||||
new CSSObject()
|
||||
{
|
||||
[componentCls] = new CSSObject()
|
||||
{
|
||||
["&-checkbox"] = new CSSObject()
|
||||
{
|
||||
Top = 0,
|
||||
MarginInlineEnd = token.PaddingXS,
|
||||
},
|
||||
["&-menus"] = new CSSObject()
|
||||
{
|
||||
Display = "flex",
|
||||
FlexWrap = "nowrap",
|
||||
AlignItems = "flex-start",
|
||||
[$"&{componentCls}-menu-empty"] = new CSSObject()
|
||||
{
|
||||
[$"{componentCls}-menu"] = new CSSObject()
|
||||
{
|
||||
Width = "100%",
|
||||
Height = "auto",
|
||||
[cascaderMenuItemCls] = new CSSObject()
|
||||
{
|
||||
Color = token.ColorTextDisabled,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
["&-menu"] = new CSSObject()
|
||||
{
|
||||
FlexGrow = 1,
|
||||
MinWidth = token.ControlItemWidth,
|
||||
Height = token.DropdownHeight,
|
||||
Margin = 0,
|
||||
Padding = token.PaddingXXS,
|
||||
Overflow = "auto",
|
||||
VerticalAlign = "top",
|
||||
ListStyle = "none",
|
||||
MsOverflowStyle = "-ms-autohiding-scrollbar",
|
||||
["&:not(:last-child)"] = new CSSObject()
|
||||
{
|
||||
BorderInlineEnd = @$"{token.LineWidth}px {token.LineType} {token.ColorSplit}",
|
||||
},
|
||||
["&-item"] = new CSSObject()
|
||||
{
|
||||
["..."] = TextEllipsis,
|
||||
Display = "flex",
|
||||
FlexWrap = "nowrap",
|
||||
AlignItems = "center",
|
||||
Padding = @$"{itemPaddingVertical}px {token.PaddingSM}px",
|
||||
LineHeight = token.LineHeight,
|
||||
Cursor = "pointer",
|
||||
Transition = @$"all {token.MotionDurationMid}",
|
||||
BorderRadius = token.BorderRadiusSM,
|
||||
["&:hover"] = new CSSObject()
|
||||
{
|
||||
Background = token.ControlItemBgHover,
|
||||
},
|
||||
["&-disabled"] = new CSSObject()
|
||||
{
|
||||
Color = token.ColorTextDisabled,
|
||||
Cursor = "not-allowed",
|
||||
["&:hover"] = new CSSObject()
|
||||
{
|
||||
Background = "transparent",
|
||||
},
|
||||
[iconCls] = new CSSObject()
|
||||
{
|
||||
Color = token.ColorTextDisabled,
|
||||
},
|
||||
},
|
||||
[$"&-active:not({cascaderMenuItemCls}-disabled)"] = new CSSObject()
|
||||
{
|
||||
["&, &:hover"] = new CSSObject()
|
||||
{
|
||||
FontWeight = token.FontWeightStrong,
|
||||
BackgroundColor = token.ControlItemBgActive,
|
||||
},
|
||||
},
|
||||
["&-content"] = new CSSObject()
|
||||
{
|
||||
Flex = "auto",
|
||||
},
|
||||
[iconCls] = new CSSObject()
|
||||
{
|
||||
MarginInlineStart = token.PaddingXXS,
|
||||
Color = token.ColorTextDescription,
|
||||
FontSize = token.FontSizeIcon,
|
||||
},
|
||||
["&-keyword"] = new CSSObject()
|
||||
{
|
||||
Color = token.ColorHighlight,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
}
|
||||
},
|
||||
new CSSObject()
|
||||
{
|
||||
[$"{componentCls}-dropdown-rtl"] = new CSSObject()
|
||||
{
|
||||
Direction = "rtl",
|
||||
},
|
||||
},
|
||||
GenCompactItemStyle(token)
|
||||
};
|
||||
}
|
||||
|
||||
protected override CSSInterpolation[] UseStyle(GlobalToken token)
|
||||
{
|
||||
return new CSSInterpolation[] { GenBaseStyle(token as CascaderToken) };
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,300 @@
|
|||
using System;
|
||||
using CssInCs;
|
||||
using static AntDesign.GlobalStyle;
|
||||
using static AntDesign.Theme;
|
||||
using Keyframes = CssInCs.Keyframe;
|
||||
|
||||
namespace AntDesign
|
||||
{
|
||||
public partial class CheckboxToken : TokenWithCommonCls
|
||||
{
|
||||
}
|
||||
|
||||
public partial class CheckboxToken
|
||||
{
|
||||
public string CheckboxCls { get; set; }
|
||||
|
||||
public int CheckboxSize { get; set; }
|
||||
|
||||
}
|
||||
|
||||
public partial class Checkbox
|
||||
{
|
||||
private Keyframes antCheckboxEffect = new Keyframes("antCheckboxEffect")
|
||||
{
|
||||
["0%"] = new CSSObject()
|
||||
{
|
||||
Transform = "scale(1)",
|
||||
Opacity = 0.5f,
|
||||
},
|
||||
["100%"] = new CSSObject()
|
||||
{
|
||||
Transform = "scale(1.6)",
|
||||
Opacity = 0,
|
||||
},
|
||||
};
|
||||
|
||||
public CSSObject[] GenCheckboxStyle(CheckboxToken token)
|
||||
{
|
||||
var checkboxCls = token.CheckboxCls;
|
||||
var wrapperCls = @$"{checkboxCls}-wrapper";
|
||||
return new CSSObject[]
|
||||
{
|
||||
new CSSObject()
|
||||
{
|
||||
[$"{checkboxCls}-group"] = new CSSObject()
|
||||
{
|
||||
["..."] = ResetComponent(token),
|
||||
Display = "inline-flex",
|
||||
FlexWrap = "wrap",
|
||||
ColumnGap = token.MarginXS,
|
||||
[$"> {token.AntCls}-row"] = new CSSObject()
|
||||
{
|
||||
Flex = 1,
|
||||
},
|
||||
},
|
||||
[wrapperCls] = new CSSObject()
|
||||
{
|
||||
["..."] = ResetComponent(token),
|
||||
Display = "inline-flex",
|
||||
AlignItems = "baseline",
|
||||
Cursor = "pointer",
|
||||
["&:after"] = new CSSObject()
|
||||
{
|
||||
Display = "inline-block",
|
||||
Width = 0,
|
||||
Overflow = "hidden",
|
||||
Content = "'\\a0'",
|
||||
},
|
||||
[$"& + {wrapperCls}"] = new CSSObject()
|
||||
{
|
||||
MarginInlineStart = 0,
|
||||
},
|
||||
[$"&{wrapperCls}-in-form-item"] = new CSSObject()
|
||||
{
|
||||
["input[type=\"checkbox\"]"] = new CSSObject()
|
||||
{
|
||||
Width = 14,
|
||||
Height = 14,
|
||||
},
|
||||
},
|
||||
},
|
||||
[checkboxCls] = new CSSObject()
|
||||
{
|
||||
["..."] = ResetComponent(token),
|
||||
Position = "relative",
|
||||
WhiteSpace = "nowrap",
|
||||
LineHeight = 1,
|
||||
Cursor = "pointer",
|
||||
AlignSelf = "start",
|
||||
Transform = @$"translate(0, {
|
||||
(token.LineHeight * token.FontSize) / 2 - token.CheckboxSize / 2
|
||||
}px)",
|
||||
[$"{checkboxCls}-input"] = new CSSObject()
|
||||
{
|
||||
Position = "absolute",
|
||||
Inset = 0,
|
||||
ZIndex = 1,
|
||||
Cursor = "pointer",
|
||||
Opacity = 0,
|
||||
Margin = 0,
|
||||
[$"&:focus-visible + {checkboxCls}-inner"] = new CSSObject()
|
||||
{
|
||||
["..."] = GenFocusOutline(token)
|
||||
},
|
||||
},
|
||||
[$"{checkboxCls}-inner"] = new CSSObject()
|
||||
{
|
||||
BoxSizing = "border-box",
|
||||
Position = "relative",
|
||||
Top = 0,
|
||||
InsetInlineStart = 0,
|
||||
Display = "block",
|
||||
Width = token.CheckboxSize,
|
||||
Height = token.CheckboxSize,
|
||||
Direction = "ltr",
|
||||
BackgroundColor = token.ColorBgContainer,
|
||||
Border = @$"{token.LineWidth}px {token.LineType} {token.ColorBorder}",
|
||||
BorderRadius = token.BorderRadiusSM,
|
||||
BorderCollapse = "separate",
|
||||
Transition = @$"all {token.MotionDurationSlow}",
|
||||
["&:after"] = new CSSObject()
|
||||
{
|
||||
BoxSizing = "border-box",
|
||||
Position = "absolute",
|
||||
Top = "50%",
|
||||
InsetInlineStart = "21.5%",
|
||||
Display = "table",
|
||||
Width = (token.CheckboxSize / 14) * 5,
|
||||
Height = (token.CheckboxSize / 14) * 8,
|
||||
Border = @$"{token.LineWidthBold}px solid {token.ColorWhite}",
|
||||
BorderTop = 0,
|
||||
BorderInlineStart = 0,
|
||||
Transform = "rotate(45deg) scale(0) translate(-50%,-50%)",
|
||||
Opacity = 0,
|
||||
Content = "\"\"",
|
||||
Transition = @$"all {token.MotionDurationFast} {token.MotionEaseInBack}, opacity {token.MotionDurationFast}",
|
||||
},
|
||||
},
|
||||
["& + span"] = new CSSObject()
|
||||
{
|
||||
PaddingInlineStart = token.PaddingXS,
|
||||
PaddingInlineEnd = token.PaddingXS,
|
||||
},
|
||||
},
|
||||
},
|
||||
new CSSObject()
|
||||
{
|
||||
[checkboxCls] = new CSSObject()
|
||||
{
|
||||
["&-indeterminate"] = new CSSObject()
|
||||
{
|
||||
[$"{checkboxCls}-inner"] = new CSSObject()
|
||||
{
|
||||
["&:after"] = new CSSObject()
|
||||
{
|
||||
Top = "50%",
|
||||
InsetInlineStart = "50%",
|
||||
Width = token.FontSizeLG / 2,
|
||||
Height = token.FontSizeLG / 2,
|
||||
BackgroundColor = token.ColorPrimary,
|
||||
Border = 0,
|
||||
Transform = "translate(-50%, -50%) scale(1)",
|
||||
Opacity = 1,
|
||||
Content = "\"\"",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
new CSSObject()
|
||||
{
|
||||
[$"{wrapperCls}:hover {checkboxCls}:after"] = new CSSObject()
|
||||
{
|
||||
Visibility = "visible",
|
||||
},
|
||||
[$"{wrapperCls}:not({wrapperCls}-disabled),{checkboxCls}:not({checkboxCls}-disabled)"] = new CSSObject()
|
||||
{
|
||||
[$"&:hover {checkboxCls}-inner"] = new CSSObject()
|
||||
{
|
||||
BorderColor = token.ColorPrimary,
|
||||
},
|
||||
},
|
||||
[$"{wrapperCls}:not({wrapperCls}-disabled)"] = new CSSObject()
|
||||
{
|
||||
[$"&:hover {checkboxCls}-checked:not({checkboxCls}-disabled) {checkboxCls}-inner"] = new CSSObject()
|
||||
{
|
||||
BackgroundColor = token.ColorPrimaryHover,
|
||||
BorderColor = "transparent",
|
||||
},
|
||||
[$"&:hover {checkboxCls}-checked:not({checkboxCls}-disabled):after"] = new CSSObject()
|
||||
{
|
||||
BorderColor = token.ColorPrimaryHover,
|
||||
},
|
||||
},
|
||||
},
|
||||
new CSSObject()
|
||||
{
|
||||
[$"{checkboxCls}-checked"] = new CSSObject()
|
||||
{
|
||||
[$"{checkboxCls}-inner"] = new CSSObject()
|
||||
{
|
||||
BackgroundColor = token.ColorPrimary,
|
||||
BorderColor = token.ColorPrimary,
|
||||
["&:after"] = new CSSObject()
|
||||
{
|
||||
Opacity = 1,
|
||||
Transform = "rotate(45deg) scale(1) translate(-50%,-50%)",
|
||||
Transition = @$"all {token.MotionDurationMid} {token.MotionEaseOutBack} {token.MotionDurationFast}",
|
||||
},
|
||||
},
|
||||
["&:after"] = new CSSObject()
|
||||
{
|
||||
Position = "absolute",
|
||||
Top = 0,
|
||||
InsetInlineStart = 0,
|
||||
Width = "100%",
|
||||
Height = "100%",
|
||||
BorderRadius = token.BorderRadiusSM,
|
||||
Visibility = "hidden",
|
||||
Border = @$"{token.LineWidthBold}px solid {token.ColorPrimary}",
|
||||
AnimationName = antCheckboxEffect,
|
||||
AnimationDuration = token.MotionDurationSlow,
|
||||
AnimationTimingFunction = "ease-in-out",
|
||||
AnimationFillMode = "backwards",
|
||||
Content = "\"\"",
|
||||
Transition = @$"all {token.MotionDurationSlow}",
|
||||
},
|
||||
},
|
||||
[$"{wrapperCls}-checked:not({wrapperCls}-disabled),{checkboxCls}-checked:not({checkboxCls}-disabled)"] = new CSSObject()
|
||||
{
|
||||
[$"&:hover {checkboxCls}-inner"] = new CSSObject()
|
||||
{
|
||||
BackgroundColor = token.ColorPrimaryHover,
|
||||
BorderColor = "transparent",
|
||||
},
|
||||
[$"&:hover {checkboxCls}:after"] = new CSSObject()
|
||||
{
|
||||
BorderColor = token.ColorPrimaryHover,
|
||||
},
|
||||
},
|
||||
},
|
||||
new CSSObject()
|
||||
{
|
||||
[$"{wrapperCls}-disabled"] = new CSSObject()
|
||||
{
|
||||
Cursor = "not-allowed",
|
||||
},
|
||||
[$"{checkboxCls}-disabled"] = new CSSObject()
|
||||
{
|
||||
[$"&, {checkboxCls}-input"] = new CSSObject()
|
||||
{
|
||||
Cursor = "not-allowed",
|
||||
PointerEvents = "none",
|
||||
},
|
||||
[$"{checkboxCls}-inner"] = new CSSObject()
|
||||
{
|
||||
Background = token.ColorBgContainerDisabled,
|
||||
BorderColor = token.ColorBorder,
|
||||
["&:after"] = new CSSObject()
|
||||
{
|
||||
BorderColor = token.ColorTextDisabled,
|
||||
},
|
||||
},
|
||||
["&:after"] = new CSSObject()
|
||||
{
|
||||
Display = "none",
|
||||
},
|
||||
["& + span"] = new CSSObject()
|
||||
{
|
||||
Color = token.ColorTextDisabled,
|
||||
},
|
||||
[$"&{checkboxCls}-indeterminate {checkboxCls}-inner::after"] = new CSSObject()
|
||||
{
|
||||
Background = token.ColorTextDisabled,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject[] GetStyle(string prefixCls, GlobalToken token)
|
||||
{
|
||||
var checkboxToken = MergeToken(
|
||||
token,
|
||||
new CheckboxToken()
|
||||
{
|
||||
CheckboxCls = @$".{prefixCls}",
|
||||
CheckboxSize = token.ControlInteractiveSize,
|
||||
});
|
||||
return GenCheckboxStyle(checkboxToken);
|
||||
}
|
||||
|
||||
protected override CSSInterpolation[] UseStyle(GlobalToken token, Unknown_52 args)
|
||||
{
|
||||
return new CSSInterpolation[] { GetStyle(prefixCls, token) };
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,333 @@
|
|||
using System;
|
||||
using CssInCs;
|
||||
using static AntDesign.GlobalStyle;
|
||||
using static AntDesign.Theme;
|
||||
|
||||
namespace AntDesign
|
||||
{
|
||||
public partial class CollapseToken : TokenWithCommonCls
|
||||
{
|
||||
}
|
||||
|
||||
public partial class CollapseToken
|
||||
{
|
||||
public string CollapseContentBg { get; set; }
|
||||
|
||||
public string CollapseHeaderBg { get; set; }
|
||||
|
||||
public string CollapseHeaderPadding { get; set; }
|
||||
|
||||
public string CollapseHeaderPaddingSM { get; set; }
|
||||
|
||||
public string CollapseHeaderPaddingLG { get; set; }
|
||||
|
||||
public int CollapsePanelBorderRadius { get; set; }
|
||||
|
||||
public int CollapseContentPaddingHorizontal { get; set; }
|
||||
|
||||
}
|
||||
|
||||
public partial class Collapse
|
||||
{
|
||||
public CSSObject GenBaseStyle(CollapseToken token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var collapseContentBg = token.CollapseContentBg;
|
||||
var padding = token.Padding;
|
||||
var collapseContentPaddingHorizontal = token.CollapseContentPaddingHorizontal;
|
||||
var collapseHeaderBg = token.CollapseHeaderBg;
|
||||
var collapseHeaderPadding = token.CollapseHeaderPadding;
|
||||
var collapseHeaderPaddingSM = token.CollapseHeaderPaddingSM;
|
||||
var collapseHeaderPaddingLG = token.CollapseHeaderPaddingLG;
|
||||
var collapsePanelBorderRadius = token.CollapsePanelBorderRadius;
|
||||
var lineWidth = token.LineWidth;
|
||||
var lineType = token.LineType;
|
||||
var colorBorder = token.ColorBorder;
|
||||
var colorText = token.ColorText;
|
||||
var colorTextHeading = token.ColorTextHeading;
|
||||
var colorTextDisabled = token.ColorTextDisabled;
|
||||
var fontSize = token.FontSize;
|
||||
var fontSizeLG = token.FontSizeLG;
|
||||
var lineHeight = token.LineHeight;
|
||||
var marginSM = token.MarginSM;
|
||||
var paddingSM = token.PaddingSM;
|
||||
var paddingLG = token.PaddingLG;
|
||||
var motionDurationSlow = token.MotionDurationSlow;
|
||||
var fontSizeIcon = token.FontSizeIcon;
|
||||
var borderBase = @$"{lineWidth}px {lineType} {colorBorder}";
|
||||
return new CSSObject()
|
||||
{
|
||||
[componentCls] = new CSSObject()
|
||||
{
|
||||
["..."] = ResetComponent(token),
|
||||
BackgroundColor = collapseHeaderBg,
|
||||
Border = borderBase,
|
||||
BorderBottom = 0,
|
||||
BorderRadius = @$"{collapsePanelBorderRadius}px",
|
||||
["&-rtl"] = new CSSObject()
|
||||
{
|
||||
Direction = "rtl",
|
||||
},
|
||||
[$"& > {componentCls}-item"] = new CSSObject()
|
||||
{
|
||||
BorderBottom = borderBase,
|
||||
["&:last-child"] = new CSSObject()
|
||||
{
|
||||
[$"&,&>{componentCls}-header"] = new CSSObject()
|
||||
{
|
||||
BorderRadius = @$"0 0 {collapsePanelBorderRadius}px {collapsePanelBorderRadius}px",
|
||||
},
|
||||
},
|
||||
[$"> {componentCls}-header"] = new CSSObject()
|
||||
{
|
||||
Position = "relative",
|
||||
Display = "flex",
|
||||
FlexWrap = "nowrap",
|
||||
AlignItems = "flex-start",
|
||||
Padding = collapseHeaderPadding,
|
||||
Color = colorTextHeading,
|
||||
LineHeight = lineHeight,
|
||||
Cursor = "pointer",
|
||||
Transition = @$"all {motionDurationSlow}, visibility 0s",
|
||||
[$"> {componentCls}-header-text"] = new CSSObject()
|
||||
{
|
||||
Flex = "auto",
|
||||
},
|
||||
["&:focus"] = new CSSObject()
|
||||
{
|
||||
Outline = "none",
|
||||
},
|
||||
[$"{componentCls}-expand-icon"] = new CSSObject()
|
||||
{
|
||||
Height = fontSize * lineHeight,
|
||||
Display = "flex",
|
||||
AlignItems = "center",
|
||||
PaddingInlineEnd = marginSM,
|
||||
},
|
||||
[$"{componentCls}-arrow"] = new CSSObject()
|
||||
{
|
||||
["..."] = ResetIcon(),
|
||||
FontSize = fontSizeIcon,
|
||||
["svg"] = new CSSObject()
|
||||
{
|
||||
Transition = @$"transform {motionDurationSlow}",
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-header-text"] = new CSSObject()
|
||||
{
|
||||
MarginInlineEnd = "auto",
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-header-collapsible-only"] = new CSSObject()
|
||||
{
|
||||
Cursor = "default",
|
||||
[$"{componentCls}-header-text"] = new CSSObject()
|
||||
{
|
||||
Flex = "none",
|
||||
Cursor = "pointer",
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-icon-collapsible-only"] = new CSSObject()
|
||||
{
|
||||
Cursor = "default",
|
||||
[$"{componentCls}-expand-icon"] = new CSSObject()
|
||||
{
|
||||
Cursor = "pointer",
|
||||
},
|
||||
},
|
||||
[$"&{componentCls}-no-arrow"] = new CSSObject()
|
||||
{
|
||||
[$"> {componentCls}-header"] = new CSSObject()
|
||||
{
|
||||
PaddingInlineStart = paddingSM,
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-content"] = new CSSObject()
|
||||
{
|
||||
Color = colorText,
|
||||
BackgroundColor = collapseContentBg,
|
||||
BorderTop = borderBase,
|
||||
[$"& > {componentCls}-content-box"] = new CSSObject()
|
||||
{
|
||||
Padding = @$"{padding}px {collapseContentPaddingHorizontal}px",
|
||||
},
|
||||
["&-hidden"] = new CSSObject()
|
||||
{
|
||||
Display = "none",
|
||||
},
|
||||
},
|
||||
["&-small"] = new CSSObject()
|
||||
{
|
||||
[$"> {componentCls}-item"] = new CSSObject()
|
||||
{
|
||||
[$"> {componentCls}-header"] = new CSSObject()
|
||||
{
|
||||
Padding = collapseHeaderPaddingSM,
|
||||
},
|
||||
[$"> {componentCls}-content > {componentCls}-content-box"] = new CSSObject()
|
||||
{
|
||||
Padding = paddingSM,
|
||||
},
|
||||
},
|
||||
},
|
||||
["&-large"] = new CSSObject()
|
||||
{
|
||||
[$"> {componentCls}-item"] = new CSSObject()
|
||||
{
|
||||
FontSize = fontSizeLG,
|
||||
[$"> {componentCls}-header"] = new CSSObject()
|
||||
{
|
||||
Padding = collapseHeaderPaddingLG,
|
||||
[$"> {componentCls}-expand-icon"] = new CSSObject()
|
||||
{
|
||||
Height = fontSizeLG * lineHeight,
|
||||
},
|
||||
},
|
||||
[$"> {componentCls}-content > {componentCls}-content-box"] = new CSSObject()
|
||||
{
|
||||
Padding = paddingLG,
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-item:last-child"] = new CSSObject()
|
||||
{
|
||||
[$"> {componentCls}-content"] = new CSSObject()
|
||||
{
|
||||
BorderRadius = @$"0 0 {collapsePanelBorderRadius}px {collapsePanelBorderRadius}px",
|
||||
},
|
||||
},
|
||||
[$"& {componentCls}-item-disabled > {componentCls}-header"] = new CSSObject()
|
||||
{
|
||||
["&,&>.arrow"] = new CSSObject()
|
||||
{
|
||||
Color = colorTextDisabled,
|
||||
Cursor = "not-allowed",
|
||||
},
|
||||
},
|
||||
[$"&{componentCls}-icon-position-end"] = new CSSObject()
|
||||
{
|
||||
[$"& > {componentCls}-item"] = new CSSObject()
|
||||
{
|
||||
[$"> {componentCls}-header"] = new CSSObject()
|
||||
{
|
||||
[$"{componentCls}-expand-icon"] = new CSSObject()
|
||||
{
|
||||
Order = 1,
|
||||
PaddingInlineEnd = 0,
|
||||
PaddingInlineStart = marginSM,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenArrowStyle(CollapseToken token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var fixedSelector = @$"> {componentCls}-item > {componentCls}-header {componentCls}-arrow svg";
|
||||
return new CSSObject()
|
||||
{
|
||||
[$"{componentCls}-rtl"] = new CSSObject()
|
||||
{
|
||||
[fixedSelector] = new CSSObject()
|
||||
{
|
||||
Transform = @$"rotate(180deg)",
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenBorderlessStyle(CollapseToken token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var collapseHeaderBg = token.CollapseHeaderBg;
|
||||
var paddingXXS = token.PaddingXXS;
|
||||
var colorBorder = token.ColorBorder;
|
||||
return new CSSObject()
|
||||
{
|
||||
[$"{componentCls}-borderless"] = new CSSObject()
|
||||
{
|
||||
BackgroundColor = collapseHeaderBg,
|
||||
Border = 0,
|
||||
[$"> {componentCls}-item"] = new CSSObject()
|
||||
{
|
||||
BorderBottom = @$"1px solid {colorBorder}",
|
||||
},
|
||||
[$">{componentCls}-item:last-child,>{componentCls}-item:last-child{componentCls}-header"] = new CSSObject()
|
||||
{
|
||||
BorderRadius = 0,
|
||||
},
|
||||
[$"> {componentCls}-item:last-child"] = new CSSObject()
|
||||
{
|
||||
BorderBottom = 0,
|
||||
},
|
||||
[$"> {componentCls}-item > {componentCls}-content"] = new CSSObject()
|
||||
{
|
||||
BackgroundColor = "transparent",
|
||||
BorderTop = 0,
|
||||
},
|
||||
[$"> {componentCls}-item > {componentCls}-content > {componentCls}-content-box"] = new CSSObject()
|
||||
{
|
||||
PaddingTop = paddingXXS,
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenGhostStyle(CollapseToken token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var paddingSM = token.PaddingSM;
|
||||
return new CSSObject()
|
||||
{
|
||||
[$"{componentCls}-ghost"] = new CSSObject()
|
||||
{
|
||||
BackgroundColor = "transparent",
|
||||
Border = 0,
|
||||
[$"> {componentCls}-item"] = new CSSObject()
|
||||
{
|
||||
BorderBottom = 0,
|
||||
[$"> {componentCls}-content"] = new CSSObject()
|
||||
{
|
||||
BackgroundColor = "transparent",
|
||||
Border = 0,
|
||||
[$"> {componentCls}-content-box"] = new CSSObject()
|
||||
{
|
||||
PaddingBlock = paddingSM,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
protected override CSSInterpolation[] UseStyle(GlobalToken token)
|
||||
{
|
||||
var collapseToken = MergeToken(
|
||||
token,
|
||||
new CollapseToken()
|
||||
{
|
||||
CollapseContentBg = token.ColorBgContainer,
|
||||
CollapseHeaderBg = token.ColorFillAlter,
|
||||
CollapseHeaderPadding = @$"{token.PaddingSM}px {token.Padding}px",
|
||||
CollapseHeaderPaddingSM = @$"{token.PaddingXS}px {token.PaddingSM}px",
|
||||
CollapseHeaderPaddingLG = @$"{token.Padding}px {token.PaddingLG}px",
|
||||
CollapsePanelBorderRadius = token.BorderRadiusLG,
|
||||
CollapseContentPaddingHorizontal = 16,
|
||||
});
|
||||
return new CSSInterpolation[]
|
||||
{
|
||||
GenBaseStyle(collapseToken),
|
||||
GenBorderlessStyle(collapseToken),
|
||||
GenGhostStyle(collapseToken),
|
||||
GenArrowStyle(collapseToken),
|
||||
GenCollapseMotion(collapseToken)
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
using Microsoft.AspNetCore.Components;
|
||||
using CssInCs;
|
||||
using Microsoft.AspNetCore.Components;
|
||||
|
||||
namespace AntDesign
|
||||
{
|
||||
|
|
@ -84,5 +85,10 @@ namespace AntDesign
|
|||
|
||||
private string _class;
|
||||
private string _style;
|
||||
|
||||
protected virtual CSSInterpolation[] UseStyle(GlobalToken token)
|
||||
{
|
||||
return null;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Разница между файлами не показана из-за своего большого размера
Загрузить разницу
|
|
@ -0,0 +1,266 @@
|
|||
using System;
|
||||
using CssInCs;
|
||||
using static AntDesign.GlobalStyle;
|
||||
using static AntDesign.Theme;
|
||||
|
||||
namespace AntDesign
|
||||
{
|
||||
public partial class DescriptionsToken : TokenWithCommonCls
|
||||
{
|
||||
public int DescriptionsTitleMarginBottom { get; set; }
|
||||
|
||||
public string DescriptionsExtraColor { get; set; }
|
||||
|
||||
public int DescriptionItemPaddingBottom { get; set; }
|
||||
|
||||
public string DescriptionsDefaultPadding { get; set; }
|
||||
|
||||
public string DescriptionsBg { get; set; }
|
||||
|
||||
public string DescriptionsMiddlePadding { get; set; }
|
||||
|
||||
public string DescriptionsSmallPadding { get; set; }
|
||||
|
||||
public int DescriptionsItemLabelColonMarginRight { get; set; }
|
||||
|
||||
public int DescriptionsItemLabelColonMarginLeft { get; set; }
|
||||
|
||||
}
|
||||
|
||||
public partial class Descriptions
|
||||
{
|
||||
public CSSObject GenBorderedStyle(DescriptionsToken token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var descriptionsSmallPadding = token.DescriptionsSmallPadding;
|
||||
var descriptionsDefaultPadding = token.DescriptionsDefaultPadding;
|
||||
var descriptionsMiddlePadding = token.DescriptionsMiddlePadding;
|
||||
var descriptionsBg = token.DescriptionsBg;
|
||||
return new CSSObject()
|
||||
{
|
||||
[$"&{componentCls}-bordered"] = new CSSObject()
|
||||
{
|
||||
[$"{componentCls}-view"] = new CSSObject()
|
||||
{
|
||||
Border = @$"{token.LineWidth}px {token.LineType} {token.ColorSplit}",
|
||||
["> table"] = new CSSObject()
|
||||
{
|
||||
TableLayout = "auto",
|
||||
BorderCollapse = "collapse",
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-item-label, {componentCls}-item-content"] = new CSSObject()
|
||||
{
|
||||
Padding = descriptionsDefaultPadding,
|
||||
BorderInlineEnd = @$"{token.LineWidth}px {token.LineType} {token.ColorSplit}",
|
||||
["&:last-child"] = new CSSObject()
|
||||
{
|
||||
BorderInlineEnd = "none",
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-item-label"] = new CSSObject()
|
||||
{
|
||||
Color = token.ColorTextSecondary,
|
||||
BackgroundColor = descriptionsBg,
|
||||
["&::after"] = new CSSObject()
|
||||
{
|
||||
Display = "none",
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-row"] = new CSSObject()
|
||||
{
|
||||
BorderBottom = @$"{token.LineWidth}px {token.LineType} {token.ColorSplit}",
|
||||
["&:last-child"] = new CSSObject()
|
||||
{
|
||||
BorderBottom = "none",
|
||||
},
|
||||
},
|
||||
[$"&{componentCls}-middle"] = new CSSObject()
|
||||
{
|
||||
[$"{componentCls}-item-label, {componentCls}-item-content"] = new CSSObject()
|
||||
{
|
||||
Padding = descriptionsMiddlePadding,
|
||||
},
|
||||
},
|
||||
[$"&{componentCls}-small"] = new CSSObject()
|
||||
{
|
||||
[$"{componentCls}-item-label, {componentCls}-item-content"] = new CSSObject()
|
||||
{
|
||||
Padding = descriptionsSmallPadding,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenDescriptionStyles(DescriptionsToken token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var descriptionsExtraColor = token.DescriptionsExtraColor;
|
||||
var descriptionItemPaddingBottom = token.DescriptionItemPaddingBottom;
|
||||
var descriptionsItemLabelColonMarginRight = token.DescriptionsItemLabelColonMarginRight;
|
||||
var descriptionsItemLabelColonMarginLeft = token.DescriptionsItemLabelColonMarginLeft;
|
||||
var descriptionsTitleMarginBottom = token.DescriptionsTitleMarginBottom;
|
||||
return new CSSObject()
|
||||
{
|
||||
[componentCls] = new CSSObject()
|
||||
{
|
||||
["..."] = ResetComponent(token),
|
||||
["..."] = GenBorderedStyle(token),
|
||||
["&-rtl"] = new CSSObject()
|
||||
{
|
||||
Direction = "rtl",
|
||||
},
|
||||
[$"{componentCls}-header"] = new CSSObject()
|
||||
{
|
||||
Display = "flex",
|
||||
AlignItems = "center",
|
||||
MarginBottom = descriptionsTitleMarginBottom,
|
||||
},
|
||||
[$"{componentCls}-title"] = new CSSObject()
|
||||
{
|
||||
["..."] = TextEllipsis,
|
||||
Flex = "auto",
|
||||
Color = token.ColorText,
|
||||
FontWeight = token.FontWeightStrong,
|
||||
FontSize = token.FontSizeLG,
|
||||
LineHeight = token.LineHeightLG,
|
||||
},
|
||||
[$"{componentCls}-extra"] = new CSSObject()
|
||||
{
|
||||
MarginInlineStart = "auto",
|
||||
Color = descriptionsExtraColor,
|
||||
FontSize = token.FontSize,
|
||||
},
|
||||
[$"{componentCls}-view"] = new CSSObject()
|
||||
{
|
||||
Width = "100%",
|
||||
BorderRadius = token.BorderRadiusLG,
|
||||
["table"] = new CSSObject()
|
||||
{
|
||||
Width = "100%",
|
||||
TableLayout = "fixed",
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-row"] = new CSSObject()
|
||||
{
|
||||
["> th, > td"] = new CSSObject()
|
||||
{
|
||||
PaddingBottom = descriptionItemPaddingBottom,
|
||||
},
|
||||
["&:last-child"] = new CSSObject()
|
||||
{
|
||||
BorderBottom = "none",
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-item-label"] = new CSSObject()
|
||||
{
|
||||
Color = token.ColorTextTertiary,
|
||||
FontWeight = "normal",
|
||||
FontSize = token.FontSize,
|
||||
LineHeight = token.LineHeight,
|
||||
TextAlign = @$"start",
|
||||
["&::after"] = new CSSObject()
|
||||
{
|
||||
Content = "\":\"",
|
||||
Position = "relative",
|
||||
Top = -0.5f,
|
||||
MarginInline = @$"{descriptionsItemLabelColonMarginLeft}px {descriptionsItemLabelColonMarginRight}px",
|
||||
},
|
||||
[$"&{componentCls}-item-no-colon::after"] = new CSSObject()
|
||||
{
|
||||
Content = "\"\"",
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-item-no-label"] = new CSSObject()
|
||||
{
|
||||
["&::after"] = new CSSObject()
|
||||
{
|
||||
Margin = 0,
|
||||
Content = "\"\"",
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-item-content"] = new CSSObject()
|
||||
{
|
||||
Display = "table-cell",
|
||||
Flex = 1,
|
||||
Color = token.ColorText,
|
||||
FontSize = token.FontSize,
|
||||
LineHeight = token.LineHeight,
|
||||
WordBreak = "break-word",
|
||||
OverflowWrap = "break-word",
|
||||
},
|
||||
[$"{componentCls}-item"] = new CSSObject()
|
||||
{
|
||||
PaddingBottom = 0,
|
||||
VerticalAlign = "top",
|
||||
["&-container"] = new CSSObject()
|
||||
{
|
||||
Display = "flex",
|
||||
[$"{componentCls}-item-label"] = new CSSObject()
|
||||
{
|
||||
Display = "inline-flex",
|
||||
AlignItems = "baseline",
|
||||
},
|
||||
[$"{componentCls}-item-content"] = new CSSObject()
|
||||
{
|
||||
Display = "inline-flex",
|
||||
AlignItems = "baseline",
|
||||
},
|
||||
},
|
||||
},
|
||||
["&-middle"] = new CSSObject()
|
||||
{
|
||||
[$"{componentCls}-row"] = new CSSObject()
|
||||
{
|
||||
["> th, > td"] = new CSSObject()
|
||||
{
|
||||
PaddingBottom = token.PaddingSM,
|
||||
},
|
||||
},
|
||||
},
|
||||
["&-small"] = new CSSObject()
|
||||
{
|
||||
[$"{componentCls}-row"] = new CSSObject()
|
||||
{
|
||||
["> th, > td"] = new CSSObject()
|
||||
{
|
||||
PaddingBottom = token.PaddingXS,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
protected override CSSInterpolation[] UseStyle(GlobalToken token)
|
||||
{
|
||||
var descriptionsBg = token.ColorFillAlter;
|
||||
var descriptionsTitleMarginBottom = token.FontSizeSM * token.LineHeightSM;
|
||||
var descriptionsExtraColor = token.ColorText;
|
||||
var descriptionsSmallPadding = @$"{token.PaddingXS}px {token.Padding}px";
|
||||
var descriptionsDefaultPadding = @$"{token.Padding}px {token.PaddingLG}px";
|
||||
var descriptionsMiddlePadding = @$"{token.PaddingSM}px {token.PaddingLG}px";
|
||||
var descriptionItemPaddingBottom = token.Padding;
|
||||
var descriptionsItemLabelColonMarginRight = token.MarginXS;
|
||||
var descriptionsItemLabelColonMarginLeft = token.MarginXXS / 2;
|
||||
var descriptionToken = MergeToken(
|
||||
token,
|
||||
new DescriptionsToken()
|
||||
{
|
||||
DescriptionsBg = descriptionsBg,
|
||||
DescriptionsTitleMarginBottom = descriptionsTitleMarginBottom,
|
||||
DescriptionsExtraColor = descriptionsExtraColor,
|
||||
DescriptionItemPaddingBottom = descriptionItemPaddingBottom,
|
||||
DescriptionsSmallPadding = descriptionsSmallPadding,
|
||||
DescriptionsDefaultPadding = descriptionsDefaultPadding,
|
||||
DescriptionsMiddlePadding = descriptionsMiddlePadding,
|
||||
DescriptionsItemLabelColonMarginRight = descriptionsItemLabelColonMarginRight,
|
||||
DescriptionsItemLabelColonMarginLeft = descriptionsItemLabelColonMarginLeft,
|
||||
});
|
||||
return new CSSInterpolation[] { GenDescriptionStyles(descriptionToken) };
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,182 @@
|
|||
using System;
|
||||
using CssInCs;
|
||||
using static AntDesign.GlobalStyle;
|
||||
using static AntDesign.Theme;
|
||||
|
||||
namespace AntDesign
|
||||
{
|
||||
public partial class DividerToken
|
||||
{
|
||||
public int SizePaddingEdgeHorizontal { get; set; }
|
||||
|
||||
}
|
||||
|
||||
public partial class DividerToken : TokenWithCommonCls
|
||||
{
|
||||
public int DividerVerticalGutterMargin { get; set; }
|
||||
|
||||
public int DividerHorizontalWithTextGutterMargin { get; set; }
|
||||
|
||||
public int DividerHorizontalGutterMargin { get; set; }
|
||||
|
||||
}
|
||||
|
||||
public partial class Divider
|
||||
{
|
||||
public CSSObject GenSharedDividerStyle(Unknown_2 token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var sizePaddingEdgeHorizontal = token.SizePaddingEdgeHorizontal;
|
||||
var colorSplit = token.ColorSplit;
|
||||
var lineWidth = token.LineWidth;
|
||||
return new CSSObject()
|
||||
{
|
||||
[componentCls] = new CSSObject()
|
||||
{
|
||||
["..."] = ResetComponent(token),
|
||||
BorderBlockStart = @$"{lineWidth}px solid {colorSplit}",
|
||||
["&-vertical"] = new CSSObject()
|
||||
{
|
||||
Position = "relative",
|
||||
Top = "-0.06em",
|
||||
Display = "inline-block",
|
||||
Height = "0.9em",
|
||||
Margin = @$"0 {token.DividerVerticalGutterMargin}px",
|
||||
VerticalAlign = "middle",
|
||||
BorderTop = 0,
|
||||
BorderInlineStart = @$"{lineWidth}px solid {colorSplit}",
|
||||
},
|
||||
["&-horizontal"] = new CSSObject()
|
||||
{
|
||||
Display = "flex",
|
||||
Clear = "both",
|
||||
Width = "100%",
|
||||
MinWidth = "100%",
|
||||
Margin = @$"{token.DividerHorizontalGutterMargin}px 0",
|
||||
},
|
||||
[$"&-horizontal{componentCls}-with-text"] = new CSSObject()
|
||||
{
|
||||
Display = "flex",
|
||||
AlignItems = "center",
|
||||
Margin = @$"{token.DividerHorizontalWithTextGutterMargin}px 0",
|
||||
Color = token.ColorTextHeading,
|
||||
FontWeight = 500,
|
||||
FontSize = token.FontSizeLG,
|
||||
WhiteSpace = "nowrap",
|
||||
TextAlign = "center",
|
||||
BorderBlockStart = @$"0 {colorSplit}",
|
||||
["&::before, &::after"] = new CSSObject()
|
||||
{
|
||||
Position = "relative",
|
||||
Width = "50%",
|
||||
BorderBlockStart = @$"{lineWidth}px solid transparent",
|
||||
BorderBlockStartColor = "inherit",
|
||||
BorderBlockEnd = 0,
|
||||
Transform = "translateY(50%)",
|
||||
Content = \"""\",
|
||||
},
|
||||
},
|
||||
[$"&-horizontal{componentCls}-with-text-left"] = new CSSObject()
|
||||
{
|
||||
["&::before"] = new CSSObject()
|
||||
{
|
||||
Width = "5%",
|
||||
},
|
||||
["&::after"] = new CSSObject()
|
||||
{
|
||||
Width = "95%",
|
||||
},
|
||||
},
|
||||
[$"&-horizontal{componentCls}-with-text-right"] = new CSSObject()
|
||||
{
|
||||
["&::before"] = new CSSObject()
|
||||
{
|
||||
Width = "95%",
|
||||
},
|
||||
["&::after"] = new CSSObject()
|
||||
{
|
||||
Width = "5%",
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-inner-text"] = new CSSObject()
|
||||
{
|
||||
Display = "inline-block",
|
||||
Padding = "0 1em",
|
||||
},
|
||||
["&-dashed"] = new CSSObject()
|
||||
{
|
||||
Background = "none",
|
||||
BorderColor = colorSplit,
|
||||
BorderStyle = "dashed",
|
||||
BorderWidth = @$"{lineWidth}px 0 0",
|
||||
},
|
||||
[$"&-horizontal{componentCls}-with-text{componentCls}-dashed"] = new CSSObject()
|
||||
{
|
||||
["&::before, &::after"] = new CSSObject()
|
||||
{
|
||||
BorderStyle = "dashed none none",
|
||||
},
|
||||
},
|
||||
[$"&-vertical{componentCls}-dashed"] = new CSSObject()
|
||||
{
|
||||
BorderInlineStartWidth = lineWidth,
|
||||
BorderInlineEnd = 0,
|
||||
BorderBlockStart = 0,
|
||||
BorderBlockEnd = 0,
|
||||
},
|
||||
[$"&-plain{componentCls}-with-text"] = new CSSObject()
|
||||
{
|
||||
Color = token.ColorText,
|
||||
FontWeight = "normal",
|
||||
FontSize = token.FontSize,
|
||||
},
|
||||
[$"&-horizontal{componentCls}-with-text-left{componentCls}-no-default-orientation-margin-left"] = new CSSObject()
|
||||
{
|
||||
["&::before"] = new CSSObject()
|
||||
{
|
||||
Width = 0,
|
||||
},
|
||||
["&::after"] = new CSSObject()
|
||||
{
|
||||
Width = "100%",
|
||||
},
|
||||
[$"{componentCls}-inner-text"] = new CSSObject()
|
||||
{
|
||||
PaddingInlineStart = sizePaddingEdgeHorizontal,
|
||||
},
|
||||
},
|
||||
[$"&-horizontal{componentCls}-with-text-right{componentCls}-no-default-orientation-margin-right"] = new CSSObject()
|
||||
{
|
||||
["&::before"] = new CSSObject()
|
||||
{
|
||||
Width = "100%",
|
||||
},
|
||||
["&::after"] = new CSSObject()
|
||||
{
|
||||
Width = 0,
|
||||
},
|
||||
[$"{componentCls}-inner-text"] = new CSSObject()
|
||||
{
|
||||
PaddingInlineEnd = sizePaddingEdgeHorizontal,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_1 GenComponentStyleHook(Unknown_3 token)
|
||||
{
|
||||
var dividerToken = MergeToken(
|
||||
token,
|
||||
new Unknown_4()
|
||||
{
|
||||
DividerVerticalGutterMargin = token.MarginXS,
|
||||
DividerHorizontalWithTextGutterMargin = token.Margin,
|
||||
DividerHorizontalGutterMargin = token.MarginLG,
|
||||
});
|
||||
return new Unknown_5 { GenSharedDividerStyle(dividerToken) };
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,250 @@
|
|||
using System;
|
||||
using CssInCs;
|
||||
using static AntDesign.GlobalStyle;
|
||||
using static AntDesign.Theme;
|
||||
|
||||
namespace AntDesign
|
||||
{
|
||||
public partial class DrawerToken
|
||||
{
|
||||
public int ZIndexPopup { get; set; }
|
||||
|
||||
public int FooterPaddingBlock { get; set; }
|
||||
|
||||
public int FooterPaddingInline { get; set; }
|
||||
|
||||
}
|
||||
|
||||
public partial class DrawerToken : TokenWithCommonCls
|
||||
{
|
||||
}
|
||||
|
||||
public partial class Drawer
|
||||
{
|
||||
public Unknown_1 GenDrawerStyle(DrawerToken token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var zIndexPopup = token.ZIndexPopup;
|
||||
var colorBgMask = token.ColorBgMask;
|
||||
var colorBgElevated = token.ColorBgElevated;
|
||||
var motionDurationSlow = token.MotionDurationSlow;
|
||||
var motionDurationMid = token.MotionDurationMid;
|
||||
var padding = token.Padding;
|
||||
var paddingLG = token.PaddingLG;
|
||||
var fontSizeLG = token.FontSizeLG;
|
||||
var lineHeightLG = token.LineHeightLG;
|
||||
var lineWidth = token.LineWidth;
|
||||
var lineType = token.LineType;
|
||||
var colorSplit = token.ColorSplit;
|
||||
var marginSM = token.MarginSM;
|
||||
var colorIcon = token.ColorIcon;
|
||||
var colorIconHover = token.ColorIconHover;
|
||||
var colorText = token.ColorText;
|
||||
var fontWeightStrong = token.FontWeightStrong;
|
||||
var footerPaddingBlock = token.FooterPaddingBlock;
|
||||
var footerPaddingInline = token.FooterPaddingInline;
|
||||
var wrapperCls = @$"{componentCls}-content-wrapper";
|
||||
return new Unknown_4()
|
||||
{
|
||||
[componentCls] = new Unknown_5()
|
||||
{
|
||||
Position = "fixed",
|
||||
Inset = 0,
|
||||
ZIndex = zIndexPopup,
|
||||
PointerEvents = "none",
|
||||
["&-pure"] = new Unknown_6()
|
||||
{
|
||||
Position = "relative",
|
||||
Background = colorBgElevated,
|
||||
[$"&{componentCls}-left"] = new Unknown_7()
|
||||
{
|
||||
BoxShadow = token.BoxShadowDrawerLeft,
|
||||
},
|
||||
[$"&{componentCls}-right"] = new Unknown_8()
|
||||
{
|
||||
BoxShadow = token.BoxShadowDrawerRight,
|
||||
},
|
||||
[$"&{componentCls}-top"] = new Unknown_9()
|
||||
{
|
||||
BoxShadow = token.BoxShadowDrawerUp,
|
||||
},
|
||||
[$"&{componentCls}-bottom"] = new Unknown_10()
|
||||
{
|
||||
BoxShadow = token.BoxShadowDrawerDown,
|
||||
},
|
||||
},
|
||||
["&-inline"] = new Unknown_11()
|
||||
{
|
||||
Position = "absolute",
|
||||
},
|
||||
[$"{componentCls}-mask"] = new Unknown_12()
|
||||
{
|
||||
Position = "absolute",
|
||||
Inset = 0,
|
||||
ZIndex = zIndexPopup,
|
||||
Background = colorBgMask,
|
||||
PointerEvents = "auto",
|
||||
},
|
||||
[wrapperCls] = new Unknown_13()
|
||||
{
|
||||
Position = "absolute",
|
||||
ZIndex = zIndexPopup,
|
||||
Transition = @$"all {motionDurationSlow}",
|
||||
["&-hidden"] = new Unknown_14()
|
||||
{
|
||||
Display = "none",
|
||||
},
|
||||
},
|
||||
[$"&-left > {wrapperCls}"] = new Unknown_15()
|
||||
{
|
||||
Top = 0,
|
||||
Bottom = 0,
|
||||
Left = new Unknown_16()
|
||||
{
|
||||
SkipCheck = true,
|
||||
Value = 0,
|
||||
},
|
||||
BoxShadow = token.BoxShadowDrawerLeft,
|
||||
},
|
||||
[$"&-right > {wrapperCls}"] = new Unknown_17()
|
||||
{
|
||||
Top = 0,
|
||||
Right = new Unknown_18()
|
||||
{
|
||||
SkipCheck = true,
|
||||
Value = 0,
|
||||
},
|
||||
Bottom = 0,
|
||||
BoxShadow = token.BoxShadowDrawerRight,
|
||||
},
|
||||
[$"&-top > {wrapperCls}"] = new Unknown_19()
|
||||
{
|
||||
Top = 0,
|
||||
InsetInline = 0,
|
||||
BoxShadow = token.BoxShadowDrawerUp,
|
||||
},
|
||||
[$"&-bottom > {wrapperCls}"] = new Unknown_20()
|
||||
{
|
||||
Bottom = 0,
|
||||
InsetInline = 0,
|
||||
BoxShadow = token.BoxShadowDrawerDown,
|
||||
},
|
||||
[$"{componentCls}-content"] = new Unknown_21()
|
||||
{
|
||||
Width = "100%",
|
||||
Height = "100%",
|
||||
Overflow = "auto",
|
||||
Background = colorBgElevated,
|
||||
PointerEvents = "auto",
|
||||
},
|
||||
[$"{componentCls}-wrapper-body"] = new Unknown_22()
|
||||
{
|
||||
Display = "flex",
|
||||
FlexDirection = "column",
|
||||
Width = "100%",
|
||||
Height = "100%",
|
||||
},
|
||||
[$"{componentCls}-header"] = new Unknown_23()
|
||||
{
|
||||
Display = "flex",
|
||||
Flex = 0,
|
||||
AlignItems = "center",
|
||||
Padding = @$"{padding}px {paddingLG}px",
|
||||
FontSize = fontSizeLG,
|
||||
LineHeight = lineHeightLG,
|
||||
BorderBottom = @$"{lineWidth}px {lineType} {colorSplit}",
|
||||
["&-title"] = new Unknown_24()
|
||||
{
|
||||
Display = "flex",
|
||||
Flex = 1,
|
||||
AlignItems = "center",
|
||||
MinWidth = 0,
|
||||
MinHeight = 0,
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-extra"] = new Unknown_25()
|
||||
{
|
||||
Flex = "none",
|
||||
},
|
||||
[$"{componentCls}-close"] = new Unknown_26()
|
||||
{
|
||||
Display = "inline-block",
|
||||
MarginInlineEnd = marginSM,
|
||||
Color = colorIcon,
|
||||
FontWeight = fontWeightStrong,
|
||||
FontSize = fontSizeLG,
|
||||
FontStyle = "normal",
|
||||
LineHeight = 1,
|
||||
TextAlign = "center",
|
||||
TextTransform = "none",
|
||||
TextDecoration = "none",
|
||||
Background = "transparent",
|
||||
Border = 0,
|
||||
Outline = 0,
|
||||
Cursor = "pointer",
|
||||
Transition = @$"color {motionDurationMid}",
|
||||
TextRendering = "auto",
|
||||
["&:focus, &:hover"] = new Unknown_27()
|
||||
{
|
||||
Color = colorIconHover,
|
||||
TextDecoration = "none",
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-title"] = new Unknown_28()
|
||||
{
|
||||
Flex = 1,
|
||||
Margin = 0,
|
||||
Color = colorText,
|
||||
FontWeight = token.FontWeightStrong,
|
||||
FontSize = fontSizeLG,
|
||||
LineHeight = lineHeightLG,
|
||||
},
|
||||
[$"{componentCls}-body"] = new Unknown_29()
|
||||
{
|
||||
Flex = 1,
|
||||
MinWidth = 0,
|
||||
MinHeight = 0,
|
||||
Padding = paddingLG,
|
||||
Overflow = "auto",
|
||||
},
|
||||
[$"{componentCls}-footer"] = new Unknown_30()
|
||||
{
|
||||
FlexShrink = 0,
|
||||
Padding = @$"{footerPaddingBlock}px {footerPaddingInline}px",
|
||||
BorderTop = @$"{lineWidth}px {lineType} {colorSplit}",
|
||||
},
|
||||
["&-rtl"] = new Unknown_31()
|
||||
{
|
||||
Direction = "rtl",
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_2 GenComponentStyleHook(Unknown_32 token)
|
||||
{
|
||||
var drawerToken = MergeToken(
|
||||
token,
|
||||
new Unknown_33()
|
||||
{
|
||||
});
|
||||
return new Unknown_34
|
||||
{
|
||||
GenDrawerStyle(drawerToken),
|
||||
GenMotionStyle(drawerToken)
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_3 GenComponentStyleHook(Unknown_35 token)
|
||||
{
|
||||
return new Unknown_36()
|
||||
{
|
||||
ZIndexPopup = token.ZIndexPopupBase,
|
||||
FooterPaddingBlock = token.PaddingXS,
|
||||
FooterPaddingInline = token.Padding,
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,364 @@
|
|||
using System;
|
||||
using CssInCs;
|
||||
using static AntDesign.GlobalStyle;
|
||||
using static AntDesign.Theme;
|
||||
|
||||
namespace AntDesign
|
||||
{
|
||||
public partial class DropdownToken
|
||||
{
|
||||
public int ZIndexPopup { get; set; }
|
||||
|
||||
}
|
||||
|
||||
public partial class DropdownToken : TokenWithCommonCls
|
||||
{
|
||||
public string RootPrefixCls { get; set; }
|
||||
|
||||
public int DropdownArrowDistance { get; set; }
|
||||
|
||||
public int DropdownArrowOffset { get; set; }
|
||||
|
||||
public int DropdownPaddingVertical { get; set; }
|
||||
|
||||
public int DropdownEdgeChildPadding { get; set; }
|
||||
|
||||
public string MenuCls { get; set; }
|
||||
|
||||
}
|
||||
|
||||
public partial class Dropdown
|
||||
{
|
||||
public Unknown_1 GenBaseStyle(Unknown_5 token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var menuCls = token.MenuCls;
|
||||
var zIndexPopup = token.ZIndexPopup;
|
||||
var dropdownArrowDistance = token.DropdownArrowDistance;
|
||||
var sizePopupArrow = token.SizePopupArrow;
|
||||
var antCls = token.AntCls;
|
||||
var iconCls = token.IconCls;
|
||||
var motionDurationMid = token.MotionDurationMid;
|
||||
var dropdownPaddingVertical = token.DropdownPaddingVertical;
|
||||
var fontSize = token.FontSize;
|
||||
var dropdownEdgeChildPadding = token.DropdownEdgeChildPadding;
|
||||
var colorTextDisabled = token.ColorTextDisabled;
|
||||
var fontSizeIcon = token.FontSizeIcon;
|
||||
var controlPaddingHorizontal = token.ControlPaddingHorizontal;
|
||||
var colorBgElevated = token.ColorBgElevated;
|
||||
return new Unknown_6
|
||||
{
|
||||
new Unknown_7()
|
||||
{
|
||||
[componentCls] = new Unknown_8()
|
||||
{
|
||||
["..."] = ResetComponent(token),
|
||||
Position = "absolute",
|
||||
Top = -9999,
|
||||
Left = new Unknown_9()
|
||||
{
|
||||
SkipCheck = true,
|
||||
Value = -9999,
|
||||
},
|
||||
ZIndex = zIndexPopup,
|
||||
Display = "block",
|
||||
["&::before"] = new Unknown_10()
|
||||
{
|
||||
Position = "absolute",
|
||||
InsetBlock = -dropdownArrowDistance + sizePopupArrow / 2,
|
||||
ZIndex = -9999,
|
||||
Opacity = 0.0001f,
|
||||
Content = "\"\"",
|
||||
},
|
||||
[$"&-trigger{antCls}-btn > {iconCls}-down"] = new Unknown_11()
|
||||
{
|
||||
FontSize = fontSizeIcon,
|
||||
Transform = "none",
|
||||
},
|
||||
[$"{componentCls}-wrap"] = new Unknown_12()
|
||||
{
|
||||
Position = "relative",
|
||||
[$"{antCls}-btn > {iconCls}-down"] = new Unknown_13()
|
||||
{
|
||||
FontSize = fontSizeIcon,
|
||||
},
|
||||
[$"{iconCls}-down::before"] = new Unknown_14()
|
||||
{
|
||||
Transition = @$"transform {motionDurationMid}",
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-wrap-open"] = new Unknown_15()
|
||||
{
|
||||
[$"{iconCls}-down::before"] = new Unknown_16()
|
||||
{
|
||||
Transform = @$"rotate(180deg)",
|
||||
},
|
||||
},
|
||||
["&-hidden,&-menu-hidden,&-menu-submenu-hidden"] = new Unknown_17()
|
||||
{
|
||||
Display = "none",
|
||||
},
|
||||
[$"&{antCls}-slide-down-enter{antCls}-slide-down-enter-active{componentCls}-placement-bottomLeft,&{antCls}-slide-down-appear{antCls}-slide-down-appear-active{componentCls}-placement-bottomLeft,&{antCls}-slide-down-enter{antCls}-slide-down-enter-active{componentCls}-placement-bottom,&{antCls}-slide-down-appear{antCls}-slide-down-appear-active{componentCls}-placement-bottom,&{antCls}-slide-down-enter{antCls}-slide-down-enter-active{componentCls}-placement-bottomRight,&{antCls}-slide-down-appear{antCls}-slide-down-appear-active{componentCls}-placement-bottomRight"] = new Unknown_18()
|
||||
{
|
||||
AnimationName = slideUpIn,
|
||||
},
|
||||
[$"&{antCls}-slide-up-enter{antCls}-slide-up-enter-active{componentCls}-placement-topLeft,&{antCls}-slide-up-appear{antCls}-slide-up-appear-active{componentCls}-placement-topLeft,&{antCls}-slide-up-enter{antCls}-slide-up-enter-active{componentCls}-placement-top,&{antCls}-slide-up-appear{antCls}-slide-up-appear-active{componentCls}-placement-top,&{antCls}-slide-up-enter{antCls}-slide-up-enter-active{componentCls}-placement-topRight,&{antCls}-slide-up-appear{antCls}-slide-up-appear-active{componentCls}-placement-topRight"] = new Unknown_19()
|
||||
{
|
||||
AnimationName = slideDownIn,
|
||||
},
|
||||
[$"&{antCls}-slide-down-leave{antCls}-slide-down-leave-active{componentCls}-placement-bottomLeft,&{antCls}-slide-down-leave{antCls}-slide-down-leave-active{componentCls}-placement-bottom,&{antCls}-slide-down-leave{antCls}-slide-down-leave-active{componentCls}-placement-bottomRight"] = new Unknown_20()
|
||||
{
|
||||
AnimationName = slideUpOut,
|
||||
},
|
||||
[$"&{antCls}-slide-up-leave{antCls}-slide-up-leave-active{componentCls}-placement-topLeft,&{antCls}-slide-up-leave{antCls}-slide-up-leave-active{componentCls}-placement-top,&{antCls}-slide-up-leave{antCls}-slide-up-leave-active{componentCls}-placement-topRight"] = new Unknown_21()
|
||||
{
|
||||
AnimationName = slideDownOut,
|
||||
},
|
||||
},
|
||||
},
|
||||
GetArrowStyle<DropdownToken>(token, {
|
||||
colorBg: colorBgElevated,
|
||||
limitVerticalRadius: true,
|
||||
arrowPlacement: { top: true, bottom: true },
|
||||
}),
|
||||
new Unknown_22()
|
||||
{
|
||||
[$"{componentCls} {menuCls}"] = new Unknown_23()
|
||||
{
|
||||
Position = "relative",
|
||||
Margin = 0,
|
||||
},
|
||||
[$"{menuCls}-submenu-popup"] = new Unknown_24()
|
||||
{
|
||||
Position = "absolute",
|
||||
ZIndex = zIndexPopup,
|
||||
Background = "transparent",
|
||||
BoxShadow = "none",
|
||||
TransformOrigin = "0 0",
|
||||
["ul, li"] = new Unknown_25()
|
||||
{
|
||||
ListStyle = "none",
|
||||
Margin = 0,
|
||||
},
|
||||
},
|
||||
[$"{componentCls}, {componentCls}-menu-submenu"] = new Unknown_26()
|
||||
{
|
||||
[menuCls] = new Unknown_27()
|
||||
{
|
||||
Padding = dropdownEdgeChildPadding,
|
||||
ListStyleType = "none",
|
||||
BackgroundColor = colorBgElevated,
|
||||
BackgroundClip = "padding-box",
|
||||
BorderRadius = token.BorderRadiusLG,
|
||||
Outline = "none",
|
||||
BoxShadow = token.BoxShadowSecondary,
|
||||
["..."] = GenFocusStyle(token),
|
||||
[$"{menuCls}-item-group-title"] = new Unknown_28()
|
||||
{
|
||||
Padding = @$"{dropdownPaddingVertical}px {controlPaddingHorizontal}px",
|
||||
Color = token.ColorTextDescription,
|
||||
Transition = @$"all {motionDurationMid}",
|
||||
},
|
||||
[$"{menuCls}-item"] = new Unknown_29()
|
||||
{
|
||||
Position = "relative",
|
||||
Display = "flex",
|
||||
AlignItems = "center",
|
||||
},
|
||||
[$"{menuCls}-item-icon"] = new Unknown_30()
|
||||
{
|
||||
MinWidth = fontSize,
|
||||
MarginInlineEnd = token.MarginXS,
|
||||
FontSize = token.FontSizeSM,
|
||||
},
|
||||
[$"{menuCls}-title-content"] = new Unknown_31()
|
||||
{
|
||||
Flex = "auto",
|
||||
["> a"] = new Unknown_32()
|
||||
{
|
||||
Color = "inherit",
|
||||
Transition = @$"all {motionDurationMid}",
|
||||
["&:hover"] = new Unknown_33()
|
||||
{
|
||||
Color = "inherit",
|
||||
},
|
||||
["&::after"] = new Unknown_34()
|
||||
{
|
||||
Position = "absolute",
|
||||
Inset = 0,
|
||||
Content = "\"\"",
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"{menuCls}-item, {menuCls}-submenu-title"] = new Unknown_35()
|
||||
{
|
||||
Clear = "both",
|
||||
Margin = 0,
|
||||
Padding = @$"{dropdownPaddingVertical}px {controlPaddingHorizontal}px",
|
||||
Color = token.ColorText,
|
||||
FontWeight = "normal",
|
||||
FontSize = fontSize,
|
||||
LineHeight = token.LineHeight,
|
||||
Cursor = "pointer",
|
||||
Transition = @$"all {motionDurationMid}",
|
||||
BorderRadius = token.BorderRadiusSM,
|
||||
["&:hover, &-active"] = new Unknown_36()
|
||||
{
|
||||
BackgroundColor = token.ControlItemBgHover,
|
||||
},
|
||||
["..."] = GenFocusStyle(token),
|
||||
["&-selected"] = new Unknown_37()
|
||||
{
|
||||
Color = token.ColorPrimary,
|
||||
BackgroundColor = token.ControlItemBgActive,
|
||||
["&:hover, &-active"] = new Unknown_38()
|
||||
{
|
||||
BackgroundColor = token.ControlItemBgActiveHover,
|
||||
},
|
||||
},
|
||||
["&-disabled"] = new Unknown_39()
|
||||
{
|
||||
Color = colorTextDisabled,
|
||||
Cursor = "not-allowed",
|
||||
["&:hover"] = new Unknown_40()
|
||||
{
|
||||
Color = colorTextDisabled,
|
||||
BackgroundColor = colorBgElevated,
|
||||
Cursor = "not-allowed",
|
||||
},
|
||||
["a"] = new Unknown_41()
|
||||
{
|
||||
PointerEvents = "none",
|
||||
},
|
||||
},
|
||||
["&-divider"] = new Unknown_42()
|
||||
{
|
||||
Height = 1,
|
||||
Margin = @$"{token.MarginXXS}px 0",
|
||||
Overflow = "hidden",
|
||||
LineHeight = 0,
|
||||
BackgroundColor = token.ColorSplit,
|
||||
},
|
||||
[$"{componentCls}-menu-submenu-expand-icon"] = new Unknown_43()
|
||||
{
|
||||
Position = "absolute",
|
||||
InsetInlineEnd = token.PaddingXS,
|
||||
[$"{componentCls}-menu-submenu-arrow-icon"] = new Unknown_44()
|
||||
{
|
||||
MarginInlineEnd = "0 !important",
|
||||
Color = token.ColorTextDescription,
|
||||
FontSize = fontSizeIcon,
|
||||
FontStyle = "normal",
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"{menuCls}-item-group-list"] = new Unknown_45()
|
||||
{
|
||||
Margin = @$"0 {token.MarginXS}px",
|
||||
Padding = 0,
|
||||
ListStyle = "none",
|
||||
},
|
||||
[$"{menuCls}-submenu-title"] = new Unknown_46()
|
||||
{
|
||||
PaddingInlineEnd = controlPaddingHorizontal + token.FontSizeSM,
|
||||
},
|
||||
[$"{menuCls}-submenu-vertical"] = new Unknown_47()
|
||||
{
|
||||
Position = "relative",
|
||||
},
|
||||
[$"{menuCls}-submenu{menuCls}-submenu-disabled {componentCls}-menu-submenu-title"] = new Unknown_48()
|
||||
{
|
||||
[$"&, {componentCls}-menu-submenu-arrow-icon"] = new Unknown_49()
|
||||
{
|
||||
Color = colorTextDisabled,
|
||||
BackgroundColor = colorBgElevated,
|
||||
Cursor = "not-allowed",
|
||||
},
|
||||
},
|
||||
[$"{menuCls}-submenu-selected {componentCls}-menu-submenu-title"] = new Unknown_50()
|
||||
{
|
||||
Color = token.ColorPrimary,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
[
|
||||
initSlideMotion(token, "slide-up"),
|
||||
initSlideMotion(token, "slide-down"),
|
||||
initMoveMotion(token, "move-up"),
|
||||
initMoveMotion(token, "move-down"),
|
||||
initZoomMotion(token, "zoom-big"),
|
||||
]
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_2 GenComponentStyleHook(Unknown_51 token, Unknown_52 args)
|
||||
{
|
||||
var marginXXS = token.MarginXXS;
|
||||
var sizePopupArrow = token.SizePopupArrow;
|
||||
var controlHeight = token.ControlHeight;
|
||||
var fontSize = token.FontSize;
|
||||
var lineHeight = token.LineHeight;
|
||||
var paddingXXS = token.PaddingXXS;
|
||||
var componentCls = token.ComponentCls;
|
||||
var borderRadiusLG = token.BorderRadiusLG;
|
||||
var dropdownPaddingVertical = (controlHeight - fontSize * lineHeight) / 2;
|
||||
var dropdownArrowOffset = getArrowOffset({
|
||||
contentRadius: borderRadiusLG,
|
||||
}).DropdownArrowOffset;
|
||||
var dropdownToken = MergeToken(
|
||||
token,
|
||||
new Unknown_53()
|
||||
{
|
||||
MenuCls = @$"{componentCls}-menu",
|
||||
RootPrefixCls = rootPrefixCls,
|
||||
DropdownArrowDistance = sizePopupArrow / 2 + marginXXS,
|
||||
DropdownArrowOffset = dropdownArrowOffset,
|
||||
DropdownPaddingVertical = dropdownPaddingVertical,
|
||||
DropdownEdgeChildPadding = paddingXXS,
|
||||
});
|
||||
return new Unknown_54
|
||||
{
|
||||
GenBaseStyle(dropdownToken),
|
||||
GenStatusStyle(dropdownToken)
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_3 GenComponentStyleHook(Unknown_55 token)
|
||||
{
|
||||
return new Unknown_56()
|
||||
{
|
||||
ZIndexPopup = token.ZIndexPopupBase + 50,
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_4 GenStatusStyle(Unknown_57 token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var menuCls = token.MenuCls;
|
||||
var colorError = token.ColorError;
|
||||
var colorTextLightSolid = token.ColorTextLightSolid;
|
||||
var itemCls = @$"{menuCls}-item";
|
||||
return new Unknown_58()
|
||||
{
|
||||
[$"{componentCls}, {componentCls}-menu-submenu"] = new Unknown_59()
|
||||
{
|
||||
[$"{menuCls} {itemCls}"] = new Unknown_60()
|
||||
{
|
||||
[$"&{itemCls}-danger:not({itemCls}-disabled)"] = new Unknown_61()
|
||||
{
|
||||
Color = colorError,
|
||||
["&:hover"] = new Unknown_62()
|
||||
{
|
||||
Color = colorTextLightSolid,
|
||||
BackgroundColor = colorError,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,110 @@
|
|||
using System;
|
||||
using CssInCs;
|
||||
using static AntDesign.GlobalStyle;
|
||||
using static AntDesign.Theme;
|
||||
|
||||
namespace AntDesign
|
||||
{
|
||||
public partial class EmptyToken
|
||||
{
|
||||
}
|
||||
|
||||
public partial class EmptyToken : TokenWithCommonCls
|
||||
{
|
||||
public string EmptyImgCls { get; set; }
|
||||
|
||||
public int EmptyImgHeight { get; set; }
|
||||
|
||||
public int EmptyImgHeightSM { get; set; }
|
||||
|
||||
public int EmptyImgHeightMD { get; set; }
|
||||
|
||||
}
|
||||
|
||||
public partial class Empty
|
||||
{
|
||||
public CSSObject GenSharedEmptyStyle(Unknown_2 token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var margin = token.Margin;
|
||||
var marginXS = token.MarginXS;
|
||||
var marginXL = token.MarginXL;
|
||||
var fontSize = token.FontSize;
|
||||
var lineHeight = token.LineHeight;
|
||||
return new CSSObject()
|
||||
{
|
||||
[componentCls] = new CSSObject()
|
||||
{
|
||||
MarginInline = marginXS,
|
||||
FontSize = fontSize,
|
||||
LineHeight = lineHeight,
|
||||
TextAlign = "center",
|
||||
[$"{componentCls}-image"] = new CSSObject()
|
||||
{
|
||||
Height = token.EmptyImgHeight,
|
||||
MarginBottom = marginXS,
|
||||
Opacity = token.OpacityImage,
|
||||
["img"] = new CSSObject()
|
||||
{
|
||||
Height = "100%",
|
||||
},
|
||||
["svg"] = new CSSObject()
|
||||
{
|
||||
MaxWidth = "100%",
|
||||
Height = "100%",
|
||||
Margin = "auto",
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-description"] = new CSSObject()
|
||||
{
|
||||
Color = token.ColorText,
|
||||
},
|
||||
[$"{componentCls}-footer"] = new CSSObject()
|
||||
{
|
||||
MarginTop = margin,
|
||||
},
|
||||
["&-normal"] = new CSSObject()
|
||||
{
|
||||
MarginBlock = marginXL,
|
||||
Color = token.ColorTextDisabled,
|
||||
[$"{componentCls}-description"] = new CSSObject()
|
||||
{
|
||||
Color = token.ColorTextDisabled,
|
||||
},
|
||||
[$"{componentCls}-image"] = new CSSObject()
|
||||
{
|
||||
Height = token.EmptyImgHeightMD,
|
||||
},
|
||||
},
|
||||
["&-small"] = new CSSObject()
|
||||
{
|
||||
MarginBlock = marginXS,
|
||||
Color = token.ColorTextDisabled,
|
||||
[$"{componentCls}-image"] = new CSSObject()
|
||||
{
|
||||
Height = token.EmptyImgHeightSM,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_1 GenComponentStyleHook(Unknown_3 token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var controlHeightLG = token.ControlHeightLG;
|
||||
var emptyToken = MergeToken(
|
||||
token,
|
||||
new Unknown_4()
|
||||
{
|
||||
EmptyImgCls = @$"{componentCls}-img",
|
||||
EmptyImgHeight = controlHeightLG * 2.5,
|
||||
EmptyImgHeightMD = controlHeightLG,
|
||||
EmptyImgHeightSM = controlHeightLG * 0.875,
|
||||
});
|
||||
return new Unknown_5 { GenSharedEmptyStyle(emptyToken) };
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,567 @@
|
|||
using System;
|
||||
using CssInCs;
|
||||
using static AntDesign.GlobalStyle;
|
||||
using static AntDesign.Theme;
|
||||
|
||||
namespace AntDesign
|
||||
{
|
||||
public partial class FormToken : TokenWithCommonCls
|
||||
{
|
||||
public string FormItemCls { get; set; }
|
||||
|
||||
public string RootPrefixCls { get; set; }
|
||||
|
||||
}
|
||||
|
||||
public partial class Form
|
||||
{
|
||||
public CSSObject ResetForm(AliasToken token)
|
||||
{
|
||||
return new CSSObject()
|
||||
{
|
||||
Legend = new CSSObject()
|
||||
{
|
||||
Display = "block",
|
||||
Width = "100%",
|
||||
MarginBottom = token.MarginLG,
|
||||
Padding = 0,
|
||||
Color = token.ColorTextDescription,
|
||||
FontSize = token.FontSizeLG,
|
||||
LineHeight = "inherit",
|
||||
Border = 0,
|
||||
BorderBottom = @$"{token.LineWidth}px {token.LineType} {token.ColorBorder}",
|
||||
},
|
||||
Label = new CSSObject()
|
||||
{
|
||||
FontSize = token.FontSize,
|
||||
},
|
||||
["input[type=\"search\"]"] = new CSSObject()
|
||||
{
|
||||
BoxSizing = "border-box",
|
||||
},
|
||||
["input[type=\"radio\"], input[type=\"checkbox\"]"] = new CSSObject()
|
||||
{
|
||||
LineHeight = "normal",
|
||||
},
|
||||
["input[type=\"file\"]"] = new CSSObject()
|
||||
{
|
||||
Display = "block",
|
||||
},
|
||||
["input[type=\"range\"]"] = new CSSObject()
|
||||
{
|
||||
Display = "block",
|
||||
Width = "100%",
|
||||
},
|
||||
["select[multiple], select[size]"] = new CSSObject()
|
||||
{
|
||||
Height = "auto",
|
||||
},
|
||||
["input[type=\"file\"]:focus,input[type=\"radio\"]:focus,input[type=\"checkbox\"]:focus"] = new CSSObject()
|
||||
{
|
||||
Outline = 0,
|
||||
BoxShadow = @$"0 0 0 {token.ControlOutlineWidth}px {token.ControlOutline}",
|
||||
},
|
||||
Output = new CSSObject()
|
||||
{
|
||||
Display = "block",
|
||||
PaddingTop = 15,
|
||||
Color = token.ColorText,
|
||||
FontSize = token.FontSize,
|
||||
LineHeight = token.LineHeight,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenFormSize(FormToken token, int height)
|
||||
{
|
||||
var formItemCls = token.FormItemCls;
|
||||
return new CSSObject()
|
||||
{
|
||||
[formItemCls] = new CSSObject()
|
||||
{
|
||||
[$"{formItemCls}-label > label"] = new CSSObject()
|
||||
{
|
||||
Height = height,
|
||||
},
|
||||
[$"{formItemCls}-control-input"] = new CSSObject()
|
||||
{
|
||||
MinHeight = height,
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_1 GenFormStyle(Unknown_8 token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
return new Unknown_9()
|
||||
{
|
||||
[token.ComponentCls] = new Unknown_10()
|
||||
{
|
||||
["..."] = ResetComponent(token),
|
||||
["..."] = ResetForm(token),
|
||||
[$"{componentCls}-text"] = new Unknown_11()
|
||||
{
|
||||
Display = "inline-block",
|
||||
PaddingInlineEnd = token.PaddingSM,
|
||||
},
|
||||
["&-small"] = new Unknown_12()
|
||||
{
|
||||
["..."] = GenFormSize(token, token.ControlHeightSM)
|
||||
},
|
||||
["&-large"] = new Unknown_13()
|
||||
{
|
||||
["..."] = GenFormSize(token, token.ControlHeightLG)
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_2 GenFormItemStyle(Unknown_14 token)
|
||||
{
|
||||
var formItemCls = token.FormItemCls;
|
||||
var iconCls = token.IconCls;
|
||||
var componentCls = token.ComponentCls;
|
||||
var rootPrefixCls = token.RootPrefixCls;
|
||||
return new Unknown_15()
|
||||
{
|
||||
[formItemCls] = new Unknown_16()
|
||||
{
|
||||
["..."] = ResetComponent(token),
|
||||
MarginBottom = token.MarginLG,
|
||||
VerticalAlign = "top",
|
||||
["&-with-help"] = new Unknown_17()
|
||||
{
|
||||
Transition = "none",
|
||||
},
|
||||
[$"&-hidden,&-hidden.{rootPrefixCls}-row"] = new Unknown_18()
|
||||
{
|
||||
Display = "none",
|
||||
},
|
||||
["&-has-warning"] = new Unknown_19()
|
||||
{
|
||||
[$"{formItemCls}-split"] = new Unknown_20()
|
||||
{
|
||||
Color = token.ColorError,
|
||||
},
|
||||
},
|
||||
["&-has-error"] = new Unknown_21()
|
||||
{
|
||||
[$"{formItemCls}-split"] = new Unknown_22()
|
||||
{
|
||||
Color = token.ColorWarning,
|
||||
},
|
||||
},
|
||||
[$"{formItemCls}-label"] = new Unknown_23()
|
||||
{
|
||||
Display = "inline-block",
|
||||
FlexGrow = 0,
|
||||
Overflow = "hidden",
|
||||
WhiteSpace = "nowrap",
|
||||
TextAlign = "end",
|
||||
VerticalAlign = "middle",
|
||||
["&-left"] = new Unknown_24()
|
||||
{
|
||||
TextAlign = "start",
|
||||
},
|
||||
["&-wrap"] = new Unknown_25()
|
||||
{
|
||||
Overflow = "unset",
|
||||
LineHeight = @$"{token.LineHeight} - 0.25em",
|
||||
WhiteSpace = "unset",
|
||||
},
|
||||
["> label"] = new Unknown_26()
|
||||
{
|
||||
Position = "relative",
|
||||
Display = "inline-flex",
|
||||
AlignItems = "center",
|
||||
MaxWidth = "100%",
|
||||
Height = token.ControlHeight,
|
||||
Color = token.ColorTextHeading,
|
||||
FontSize = token.FontSize,
|
||||
[$"> {iconCls}"] = new Unknown_27()
|
||||
{
|
||||
FontSize = token.FontSize,
|
||||
VerticalAlign = "top",
|
||||
},
|
||||
[$"&{formItemCls}-required:not({formItemCls}-required-mark-optional)::before"] = new Unknown_28()
|
||||
{
|
||||
Display = "inline-block",
|
||||
MarginInlineEnd = token.MarginXXS,
|
||||
Color = token.ColorError,
|
||||
FontSize = token.FontSize,
|
||||
FontFamily = "SimSun, sans-serif",
|
||||
LineHeight = 1,
|
||||
Content = "\"*\"",
|
||||
[$"{componentCls}-hide-required-mark &"] = new Unknown_29()
|
||||
{
|
||||
Display = "none",
|
||||
},
|
||||
},
|
||||
[$"{formItemCls}-optional"] = new Unknown_30()
|
||||
{
|
||||
Display = "inline-block",
|
||||
MarginInlineStart = token.MarginXXS,
|
||||
Color = token.ColorTextDescription,
|
||||
[$"{componentCls}-hide-required-mark &"] = new Unknown_31()
|
||||
{
|
||||
Display = "none",
|
||||
},
|
||||
},
|
||||
[$"{formItemCls}-tooltip"] = new Unknown_32()
|
||||
{
|
||||
Color = token.ColorTextDescription,
|
||||
Cursor = "help",
|
||||
WritingMode = "horizontal-tb",
|
||||
MarginInlineStart = token.MarginXXS,
|
||||
},
|
||||
["&::after"] = new Unknown_33()
|
||||
{
|
||||
Content = "\":\"",
|
||||
Position = "relative",
|
||||
MarginBlock = 0,
|
||||
MarginInlineStart = token.MarginXXS / 2,
|
||||
MarginInlineEnd = token.MarginXS,
|
||||
},
|
||||
[$"&{formItemCls}-no-colon::after"] = new Unknown_34()
|
||||
{
|
||||
Content = "\" \"",
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"{formItemCls}-control"] = new Unknown_35()
|
||||
{
|
||||
Display = "flex",
|
||||
FlexDirection = "column",
|
||||
FlexGrow = 1,
|
||||
[$"&:first-child:not([class^=""{rootPrefixCls}-col-""]):not([class*="" {rootPrefixCls}-col-""])"] = new Unknown_36()
|
||||
{
|
||||
Width = "100%",
|
||||
},
|
||||
["&-input"] = new Unknown_37()
|
||||
{
|
||||
Position = "relative",
|
||||
Display = "flex",
|
||||
AlignItems = "center",
|
||||
MinHeight = token.ControlHeight,
|
||||
["&-content"] = new Unknown_38()
|
||||
{
|
||||
Flex = "auto",
|
||||
MaxWidth = "100%",
|
||||
},
|
||||
},
|
||||
},
|
||||
[formItemCls] = new Unknown_39()
|
||||
{
|
||||
["&-explain, &-extra"] = new Unknown_40()
|
||||
{
|
||||
Clear = "both",
|
||||
Color = token.ColorTextDescription,
|
||||
FontSize = token.FontSize,
|
||||
LineHeight = token.LineHeight,
|
||||
},
|
||||
["&-explain-connected"] = new Unknown_41()
|
||||
{
|
||||
Width = "100%",
|
||||
},
|
||||
["&-extra"] = new Unknown_42()
|
||||
{
|
||||
MinHeight = token.ControlHeightSM,
|
||||
Transition = @$"color {token.MotionDurationMid} {token.MotionEaseOut}",
|
||||
},
|
||||
["&-explain"] = new Unknown_43()
|
||||
{
|
||||
["&-error"] = new Unknown_44()
|
||||
{
|
||||
Color = token.ColorError,
|
||||
},
|
||||
["&-warning"] = new Unknown_45()
|
||||
{
|
||||
Color = token.ColorWarning,
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"&-with-help {formItemCls}-explain"] = new Unknown_46()
|
||||
{
|
||||
Height = "auto",
|
||||
Opacity = 1,
|
||||
},
|
||||
[$"{formItemCls}-feedback-icon"] = new Unknown_47()
|
||||
{
|
||||
FontSize = token.FontSize,
|
||||
TextAlign = "center",
|
||||
Visibility = "visible",
|
||||
AnimationName = zoomIn,
|
||||
AnimationDuration = token.MotionDurationMid,
|
||||
AnimationTimingFunction = token.MotionEaseOutBack,
|
||||
PointerEvents = "none",
|
||||
["&-success"] = new Unknown_48()
|
||||
{
|
||||
Color = token.ColorSuccess,
|
||||
},
|
||||
["&-error"] = new Unknown_49()
|
||||
{
|
||||
Color = token.ColorError,
|
||||
},
|
||||
["&-warning"] = new Unknown_50()
|
||||
{
|
||||
Color = token.ColorWarning,
|
||||
},
|
||||
["&-validating"] = new Unknown_51()
|
||||
{
|
||||
Color = token.ColorPrimary,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_3 GenHorizontalStyle(Unknown_52 token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var formItemCls = token.FormItemCls;
|
||||
var rootPrefixCls = token.RootPrefixCls;
|
||||
return new Unknown_53()
|
||||
{
|
||||
[$"{componentCls}-horizontal"] = new Unknown_54()
|
||||
{
|
||||
[$"{formItemCls}-label"] = new Unknown_55()
|
||||
{
|
||||
FlexGrow = 0,
|
||||
},
|
||||
[$"{formItemCls}-control"] = new Unknown_56()
|
||||
{
|
||||
Flex = "1 1 0",
|
||||
MinWidth = 0,
|
||||
},
|
||||
[$"{formItemCls}-label.{rootPrefixCls}-col-24 + {formItemCls}-control"] = new Unknown_57()
|
||||
{
|
||||
MinWidth = "unset",
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_4 GenInlineStyle(Unknown_58 token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var formItemCls = token.FormItemCls;
|
||||
return new Unknown_59()
|
||||
{
|
||||
[$"{componentCls}-inline"] = new Unknown_60()
|
||||
{
|
||||
Display = "flex",
|
||||
FlexWrap = "wrap",
|
||||
[formItemCls] = new Unknown_61()
|
||||
{
|
||||
Flex = "none",
|
||||
MarginInlineEnd = token.Margin,
|
||||
MarginBottom = 0,
|
||||
["&-row"] = new Unknown_62()
|
||||
{
|
||||
FlexWrap = "nowrap",
|
||||
},
|
||||
["&-with-help"] = new Unknown_63()
|
||||
{
|
||||
MarginBottom = token.MarginLG,
|
||||
},
|
||||
[$">{formItemCls}-label,>{formItemCls}-control"] = new Unknown_64()
|
||||
{
|
||||
Display = "inline-block",
|
||||
VerticalAlign = "top",
|
||||
},
|
||||
[$"> {formItemCls}-label"] = new Unknown_65()
|
||||
{
|
||||
Flex = "none",
|
||||
},
|
||||
[$"{componentCls}-text"] = new Unknown_66()
|
||||
{
|
||||
Display = "inline-block",
|
||||
},
|
||||
[$"{formItemCls}-has-feedback"] = new Unknown_67()
|
||||
{
|
||||
Display = "inline-block",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject MakeVerticalLayoutLabel(FormToken token)
|
||||
{
|
||||
return new CSSObject()
|
||||
{
|
||||
Margin = 0,
|
||||
Padding = @$"0 0 {token.PaddingXS}px",
|
||||
WhiteSpace = "initial",
|
||||
TextAlign = "start",
|
||||
["> label"] = new CSSObject()
|
||||
{
|
||||
Margin = 0,
|
||||
["&::after"] = new CSSObject()
|
||||
{
|
||||
Display = "none",
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject MakeVerticalLayout(FormToken token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var formItemCls = token.FormItemCls;
|
||||
return new CSSObject()
|
||||
{
|
||||
[$"{formItemCls} {formItemCls}-label"] = MakeVerticalLayoutLabel(token),
|
||||
[componentCls] = new CSSObject()
|
||||
{
|
||||
[formItemCls] = new CSSObject()
|
||||
{
|
||||
FlexWrap = "wrap",
|
||||
[$"{formItemCls}-label,{formItemCls}-control"] = new CSSObject()
|
||||
{
|
||||
Flex = "0 0 100%",
|
||||
MaxWidth = "100%",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_5 GenVerticalStyle(Unknown_68 token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var formItemCls = token.FormItemCls;
|
||||
var rootPrefixCls = token.RootPrefixCls;
|
||||
return new Unknown_69()
|
||||
{
|
||||
[$"{componentCls}-vertical"] = new Unknown_70()
|
||||
{
|
||||
[formItemCls] = new Unknown_71()
|
||||
{
|
||||
["&-row"] = new Unknown_72()
|
||||
{
|
||||
FlexDirection = "column",
|
||||
},
|
||||
["&-label > label"] = new Unknown_73()
|
||||
{
|
||||
Height = "auto",
|
||||
},
|
||||
[$"{componentCls}-item-control"] = new Unknown_74()
|
||||
{
|
||||
Width = "100%",
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-vertical{formItemCls}-label,.{rootPrefixCls}-col-24{formItemCls}-label,.{rootPrefixCls}-col-xl-24{formItemCls}-label"] = MakeVerticalLayoutLabel(token),
|
||||
[$"@media (max-width: {token.ScreenXSMax}px)"] = new Unknown_75
|
||||
{
|
||||
MakeVerticalLayout(token),
|
||||
new Unknown_76()
|
||||
{
|
||||
[componentCls] = new Unknown_77()
|
||||
{
|
||||
[$".{rootPrefixCls}-col-xs-24{formItemCls}-label"] = MakeVerticalLayoutLabel(token)
|
||||
},
|
||||
},
|
||||
}
|
||||
[$"@media (max-width: {token.ScreenSMMax}px)"] = new Unknown_78()
|
||||
{
|
||||
[componentCls] = new Unknown_79()
|
||||
{
|
||||
[$".{rootPrefixCls}-col-sm-24{formItemCls}-label"] = MakeVerticalLayoutLabel(token)
|
||||
},
|
||||
},
|
||||
[$"@media (max-width: {token.ScreenMDMax}px)"] = new Unknown_80()
|
||||
{
|
||||
[componentCls] = new Unknown_81()
|
||||
{
|
||||
[$".{rootPrefixCls}-col-md-24{formItemCls}-label"] = MakeVerticalLayoutLabel(token)
|
||||
},
|
||||
},
|
||||
[$"@media (max-width: {token.ScreenLGMax}px)"] = new Unknown_82()
|
||||
{
|
||||
[componentCls] = new Unknown_83()
|
||||
{
|
||||
[$".{rootPrefixCls}-col-lg-24{formItemCls}-label"] = MakeVerticalLayoutLabel(token)
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_6 GenComponentStyleHook(Unknown_84 token, Unknown_85 args)
|
||||
{
|
||||
var formToken = MergeToken(
|
||||
token,
|
||||
new Unknown_86()
|
||||
{
|
||||
FormItemCls = @$"{token.ComponentCls}-item",
|
||||
RootPrefixCls = rootPrefixCls,
|
||||
});
|
||||
return new Unknown_87
|
||||
{
|
||||
GenFormStyle(formToken),
|
||||
GenFormItemStyle(formToken),
|
||||
GenFormValidateMotionStyle(formToken),
|
||||
GenHorizontalStyle(formToken),
|
||||
GenInlineStyle(formToken),
|
||||
GenVerticalStyle(formToken),
|
||||
GenCollapseMotion(formToken),
|
||||
ZoomIn
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_7 GenFormValidateMotionStyle(Unknown_88 token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var helpCls = @$"{componentCls}-show-help";
|
||||
var helpItemCls = @$"{componentCls}-show-help-item";
|
||||
return new Unknown_89()
|
||||
{
|
||||
[helpCls] = new Unknown_90()
|
||||
{
|
||||
Transition = @$"opacity {token.MotionDurationSlow} {token.MotionEaseInOut}",
|
||||
["&-appear, &-enter"] = new Unknown_91()
|
||||
{
|
||||
Opacity = 0,
|
||||
["&-active"] = new Unknown_92()
|
||||
{
|
||||
Opacity = 1,
|
||||
},
|
||||
},
|
||||
["&-leave"] = new Unknown_93()
|
||||
{
|
||||
Opacity = 1,
|
||||
["&-active"] = new Unknown_94()
|
||||
{
|
||||
Opacity = 0,
|
||||
},
|
||||
},
|
||||
[helpItemCls] = new Unknown_95()
|
||||
{
|
||||
Overflow = "hidden",
|
||||
Transition = @$"height {token.MotionDurationSlow} {token.MotionEaseInOut},
|
||||
opacity {token.MotionDurationSlow} {token.MotionEaseInOut},
|
||||
transform {token.MotionDurationSlow} {token.MotionEaseInOut} !important",
|
||||
[$"&{helpItemCls}-appear, &{helpItemCls}-enter"] = new Unknown_96()
|
||||
{
|
||||
Transform = @$"translateY(-5px)",
|
||||
Opacity = 0,
|
||||
["&-active"] = new Unknown_97()
|
||||
{
|
||||
Transform = "translateY(0)",
|
||||
Opacity = 1,
|
||||
},
|
||||
},
|
||||
[$"&{helpItemCls}-leave-active"] = new Unknown_98()
|
||||
{
|
||||
Transform = @$"translateY(-5px)",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,119 @@
|
|||
using System;
|
||||
using CssInCs;
|
||||
using static AntDesign.GlobalStyle;
|
||||
using static AntDesign.Theme;
|
||||
|
||||
namespace AntDesign
|
||||
{
|
||||
public partial class GridRowToken
|
||||
{
|
||||
}
|
||||
|
||||
public partial class GridColToken
|
||||
{
|
||||
public int GridColumns { get; set; }
|
||||
|
||||
}
|
||||
|
||||
public partial class Grid
|
||||
{
|
||||
public CSSObject GenGridRowStyle(Unknown_1 token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
return new CSSObject()
|
||||
{
|
||||
[componentCls] = new CSSObject()
|
||||
{
|
||||
Display = "flex",
|
||||
FlexFlow = "row wrap",
|
||||
MinWidth = 0,
|
||||
["&::before, &::after"] = new CSSObject()
|
||||
{
|
||||
Display = "flex",
|
||||
},
|
||||
["&-no-wrap"] = new CSSObject()
|
||||
{
|
||||
FlexWrap = "nowrap",
|
||||
},
|
||||
["&-start"] = new CSSObject()
|
||||
{
|
||||
JustifyContent = "flex-start",
|
||||
},
|
||||
["&-center"] = new CSSObject()
|
||||
{
|
||||
JustifyContent = "center",
|
||||
},
|
||||
["&-end"] = new CSSObject()
|
||||
{
|
||||
JustifyContent = "flex-end",
|
||||
},
|
||||
["&-space-between"] = new CSSObject()
|
||||
{
|
||||
JustifyContent = "space-between",
|
||||
},
|
||||
["&-space-around"] = new CSSObject()
|
||||
{
|
||||
JustifyContent = "space-around",
|
||||
},
|
||||
["&-space-evenly"] = new CSSObject()
|
||||
{
|
||||
JustifyContent = "space-evenly",
|
||||
},
|
||||
["&-top"] = new CSSObject()
|
||||
{
|
||||
AlignItems = "flex-start",
|
||||
},
|
||||
["&-middle"] = new CSSObject()
|
||||
{
|
||||
AlignItems = "center",
|
||||
},
|
||||
["&-bottom"] = new CSSObject()
|
||||
{
|
||||
AlignItems = "flex-end",
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenGridColStyle(Unknown_2 token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
return new CSSObject()
|
||||
{
|
||||
[componentCls] = new CSSObject()
|
||||
{
|
||||
Position = "relative",
|
||||
MaxWidth = "100%",
|
||||
MinHeight = 1,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenLoopGridColumnsStyle(GridColToken token, string sizeCls)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var gridColumns = token.GridColumns;
|
||||
var gridColumnsStyle = new Unknown_3()
|
||||
{
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenGridStyle(GridColToken token, string sizeCls)
|
||||
{
|
||||
return GenLoopGridColumnsStyle(token, sizeCls);
|
||||
}
|
||||
|
||||
public CSSObject GenGridMediaStyle(GridColToken token, int screenSize, string sizeCls)
|
||||
{
|
||||
return new CSSObject()
|
||||
{
|
||||
[$"@media (min-width: {screenSize}px)"] = new CSSObject()
|
||||
{
|
||||
["..."] = GenGridStyle(token, sizeCls)
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,379 @@
|
|||
using System;
|
||||
using CssInCs;
|
||||
using static AntDesign.GlobalStyle;
|
||||
using static AntDesign.Theme;
|
||||
|
||||
namespace AntDesign
|
||||
{
|
||||
public partial class ImageToken
|
||||
{
|
||||
public int ZIndexPopup { get; set; }
|
||||
|
||||
}
|
||||
|
||||
public partial class ImageToken : TokenWithCommonCls
|
||||
{
|
||||
public string PreviewCls { get; set; }
|
||||
|
||||
public string ModalMaskBg { get; set; }
|
||||
|
||||
public string ImagePreviewOperationDisabledColor { get; set; }
|
||||
|
||||
public int ImagePreviewOperationSize { get; set; }
|
||||
|
||||
public int ImagePreviewSwitchSize { get; set; }
|
||||
|
||||
public string ImagePreviewOperationColor { get; set; }
|
||||
|
||||
}
|
||||
|
||||
public class PositionType
|
||||
{
|
||||
}
|
||||
|
||||
public partial class Image
|
||||
{
|
||||
public CSSObject GenBoxStyle(PositionType position)
|
||||
{
|
||||
return new CSSObject()
|
||||
{
|
||||
Position = position,
|
||||
Inset = 0,
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenImageMaskStyle(ImageToken token)
|
||||
{
|
||||
var iconCls = token.IconCls;
|
||||
var motionDurationSlow = token.MotionDurationSlow;
|
||||
var paddingXXS = token.PaddingXXS;
|
||||
var marginXXS = token.MarginXXS;
|
||||
var prefixCls = token.PrefixCls;
|
||||
return new CSSObject()
|
||||
{
|
||||
Position = "absolute",
|
||||
Inset = 0,
|
||||
Display = "flex",
|
||||
AlignItems = "center",
|
||||
JustifyContent = "center",
|
||||
Color = "#fff",
|
||||
Background = New TinyColor('#000').setAlpha(0.5).toRgbString(),
|
||||
Cursor = "pointer",
|
||||
Opacity = 0,
|
||||
Transition = @$"opacity {motionDurationSlow}",
|
||||
[$".{prefixCls}-mask-info"] = new CSSObject()
|
||||
{
|
||||
["..."] = textEllipsis,
|
||||
Padding = @$"0 {paddingXXS}px",
|
||||
[iconCls] = new CSSObject()
|
||||
{
|
||||
MarginInlineEnd = marginXXS,
|
||||
["svg"] = new CSSObject()
|
||||
{
|
||||
VerticalAlign = "baseline",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenPreviewOperationsStyle(ImageToken token)
|
||||
{
|
||||
var previewCls = token.PreviewCls;
|
||||
var modalMaskBg = token.ModalMaskBg;
|
||||
var paddingSM = token.PaddingSM;
|
||||
var imagePreviewOperationDisabledColor = token.ImagePreviewOperationDisabledColor;
|
||||
var motionDurationSlow = token.MotionDurationSlow;
|
||||
var operationBg = New TinyColor(modalMaskBg).setAlpha(0.1);
|
||||
var operationBgHover = OperationBg.Clone().setAlpha(0.2);
|
||||
return new CSSObject()
|
||||
{
|
||||
[$"{previewCls}-operations"] = new CSSObject()
|
||||
{
|
||||
["..."] = ResetComponent(token),
|
||||
Display = "flex",
|
||||
FlexDirection = "row-reverse",
|
||||
AlignItems = "center",
|
||||
Color = token.ImagePreviewOperationColor,
|
||||
ListStyle = "none",
|
||||
Background = OperationBg.ToRgbString(),
|
||||
PointerEvents = "auto",
|
||||
["&-operation"] = new CSSObject()
|
||||
{
|
||||
MarginInlineStart = paddingSM,
|
||||
Padding = paddingSM,
|
||||
Cursor = "pointer",
|
||||
Transition = @$"all {motionDurationSlow}",
|
||||
["&:hover"] = new CSSObject()
|
||||
{
|
||||
Background = OperationBgHover.ToRgbString()
|
||||
},
|
||||
["&-disabled"] = new CSSObject()
|
||||
{
|
||||
Color = imagePreviewOperationDisabledColor,
|
||||
PointerEvents = "none",
|
||||
},
|
||||
["&:last-of-type"] = new CSSObject()
|
||||
{
|
||||
MarginInlineStart = 0,
|
||||
},
|
||||
},
|
||||
["&-progress"] = new CSSObject()
|
||||
{
|
||||
Position = "absolute",
|
||||
Left = new PropertySkip()
|
||||
{
|
||||
SkipCheck = true,
|
||||
Value = "50%",
|
||||
},
|
||||
Transform = "translateX(-50%)",
|
||||
},
|
||||
["&-icon"] = new CSSObject()
|
||||
{
|
||||
FontSize = token.ImagePreviewOperationSize,
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenPreviewSwitchStyle(ImageToken token)
|
||||
{
|
||||
var modalMaskBg = token.ModalMaskBg;
|
||||
var iconCls = token.IconCls;
|
||||
var imagePreviewOperationDisabledColor = token.ImagePreviewOperationDisabledColor;
|
||||
var previewCls = token.PreviewCls;
|
||||
var zIndexPopup = token.ZIndexPopup;
|
||||
var motionDurationSlow = token.MotionDurationSlow;
|
||||
var operationBg = New TinyColor(modalMaskBg).setAlpha(0.1);
|
||||
var operationBgHover = OperationBg.Clone().setAlpha(0.2);
|
||||
return new CSSObject()
|
||||
{
|
||||
[$"{previewCls}-switch-left, {previewCls}-switch-right"] = new CSSObject()
|
||||
{
|
||||
Position = "fixed",
|
||||
InsetBlockStart = "50%",
|
||||
ZIndex = zIndexPopup + 1,
|
||||
Display = "flex",
|
||||
AlignItems = "center",
|
||||
JustifyContent = "center",
|
||||
Width = token.ImagePreviewSwitchSize,
|
||||
Height = token.ImagePreviewSwitchSize,
|
||||
MarginTop = -token.ImagePreviewSwitchSize / 2,
|
||||
Color = token.ImagePreviewOperationColor,
|
||||
Background = OperationBg.ToRgbString(),
|
||||
BorderRadius = "50%",
|
||||
Transform = @$"translateY(-50%)",
|
||||
Cursor = "pointer",
|
||||
Transition = @$"all {motionDurationSlow}",
|
||||
PointerEvents = "auto",
|
||||
["&:hover"] = new CSSObject()
|
||||
{
|
||||
Background = OperationBgHover.ToRgbString()
|
||||
},
|
||||
["&-disabled"] = new CSSObject()
|
||||
{
|
||||
["&, &:hover"] = new CSSObject()
|
||||
{
|
||||
Color = imagePreviewOperationDisabledColor,
|
||||
Background = "transparent",
|
||||
Cursor = "not-allowed",
|
||||
[$"> {iconCls}"] = new CSSObject()
|
||||
{
|
||||
Cursor = "not-allowed",
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"> {iconCls}"] = new CSSObject()
|
||||
{
|
||||
FontSize = token.ImagePreviewOperationSize,
|
||||
},
|
||||
},
|
||||
[$"{previewCls}-switch-left"] = new CSSObject()
|
||||
{
|
||||
InsetInlineStart = token.MarginSM,
|
||||
},
|
||||
[$"{previewCls}-switch-right"] = new CSSObject()
|
||||
{
|
||||
InsetInlineEnd = token.MarginSM,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_1 GenImagePreviewStyle(ImageToken token)
|
||||
{
|
||||
var motionEaseOut = token.MotionEaseOut;
|
||||
var previewCls = token.PreviewCls;
|
||||
var motionDurationSlow = token.MotionDurationSlow;
|
||||
var componentCls = token.ComponentCls;
|
||||
return new Unknown_6
|
||||
{
|
||||
new Unknown_7()
|
||||
{
|
||||
[$"{componentCls}-preview-root"] = new Unknown_8()
|
||||
{
|
||||
[previewCls] = new Unknown_9()
|
||||
{
|
||||
Height = "100%",
|
||||
TextAlign = "center",
|
||||
PointerEvents = "none",
|
||||
},
|
||||
[$"{previewCls}-body"] = new Unknown_10()
|
||||
{
|
||||
["..."] = GenBoxStyle(),
|
||||
Overflow = "hidden",
|
||||
},
|
||||
[$"{previewCls}-img"] = new Unknown_11()
|
||||
{
|
||||
MaxWidth = "100%",
|
||||
MaxHeight = "100%",
|
||||
VerticalAlign = "middle",
|
||||
Transform = "scale3d(1, 1, 1)",
|
||||
Cursor = "grab",
|
||||
Transition = @$"transform {motionDurationSlow} {motionEaseOut} 0s",
|
||||
UserSelect = "none",
|
||||
PointerEvents = "auto",
|
||||
["&-wrapper"] = new Unknown_12()
|
||||
{
|
||||
["..."] = GenBoxStyle(),
|
||||
Transition = @$"transform {motionDurationSlow} {motionEaseOut} 0s",
|
||||
Display = "flex",
|
||||
JustifyContent = "center",
|
||||
AlignItems = "center",
|
||||
["&::before"] = new Unknown_13()
|
||||
{
|
||||
Display = "inline-block",
|
||||
Width = 1,
|
||||
Height = "50%",
|
||||
MarginInlineEnd = -1,
|
||||
Content = "\"\"",
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"{previewCls}-moving"] = new Unknown_14()
|
||||
{
|
||||
[$"{previewCls}-preview-img"] = new Unknown_15()
|
||||
{
|
||||
Cursor = "grabbing",
|
||||
["&-wrapper"] = new Unknown_16()
|
||||
{
|
||||
TransitionDuration = "0s",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
new Unknown_17()
|
||||
{
|
||||
[$"{componentCls}-preview-root"] = new Unknown_18()
|
||||
{
|
||||
[$"{previewCls}-wrap"] = new Unknown_19()
|
||||
{
|
||||
ZIndex = token.ZIndexPopup,
|
||||
},
|
||||
},
|
||||
},
|
||||
new Unknown_20()
|
||||
{
|
||||
[$"{componentCls}-preview-operations-wrapper"] = new Unknown_21()
|
||||
{
|
||||
Position = "fixed",
|
||||
InsetBlockStart = 0,
|
||||
InsetInlineEnd = 0,
|
||||
ZIndex = token.ZIndexPopup + 1,
|
||||
Width = "100%",
|
||||
},
|
||||
["&"] = new Unknown_22
|
||||
{
|
||||
GenPreviewOperationsStyle(token),
|
||||
GenPreviewSwitchStyle(token)
|
||||
}
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_2 GenImageStyle(ImageToken token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
return new Unknown_23()
|
||||
{
|
||||
[componentCls] = new Unknown_24()
|
||||
{
|
||||
Position = "relative",
|
||||
Display = "inline-block",
|
||||
[$"{componentCls}-img"] = new Unknown_25()
|
||||
{
|
||||
Width = "100%",
|
||||
Height = "auto",
|
||||
VerticalAlign = "middle",
|
||||
},
|
||||
[$"{componentCls}-img-placeholder"] = new Unknown_26()
|
||||
{
|
||||
BackgroundColor = token.ColorBgContainerDisabled,
|
||||
BackgroundImage = \"url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTQuNSAyLjVoLTEzQS41LjUgMCAwIDAgMSAzdjEwYS41LjUgMCAwIDAgLjUuNWgxM2EuNS41IDAgMCAwIC41LS41VjNhLjUuNSAwIDAgMC0uNS0uNXpNNS4yODEgNC43NWExIDEgMCAwIDEgMCAyIDEgMSAwIDAgMSAwLTJ6bTguMDMgNi44M2EuMTI3LjEyNyAwIDAgMS0uMDgxLjAzSDIuNzY5YS4xMjUuMTI1IDAgMCAxLS4wOTYtLjIwN2wyLjY2MS0zLjE1NmEuMTI2LjEyNiAwIDAgMSAuMTc3LS4wMTZsLjAxNi4wMTZMNy4wOCAxMC4wOWwyLjQ3LTIuOTNhLjEyNi4xMjYgMCAwIDEgLjE3Ny0uMDE2bC4wMTUuMDE2IDMuNTg4IDQuMjQ0YS4xMjcuMTI3IDAgMCAxLS4wMi4xNzV6IiBmaWxsPSIjOEM4QzhDIiBmaWxsLXJ1bGU9Im5vbnplcm8iLz48L3N2Zz4=")\",
|
||||
BackgroundRepeat = "no-repeat",
|
||||
BackgroundPosition = "center center",
|
||||
BackgroundSize = "30%",
|
||||
},
|
||||
[$"{componentCls}-mask"] = new Unknown_27()
|
||||
{
|
||||
["..."] = GenImageMaskStyle(token)
|
||||
},
|
||||
[$"{componentCls}-mask:hover"] = new Unknown_28()
|
||||
{
|
||||
Opacity = 1,
|
||||
},
|
||||
[$"{componentCls}-placeholder"] = new Unknown_29()
|
||||
{
|
||||
["..."] = GenBoxStyle()
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_3 GenPreviewMotion(Unknown_30 token)
|
||||
{
|
||||
var previewCls = token.PreviewCls;
|
||||
return new Unknown_31()
|
||||
{
|
||||
[$"{previewCls}-root"] = InitZoomMotion(token, "zoom"),
|
||||
["&"] = InitFadeMotion(token, true)
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_4 GenComponentStyleHook(Unknown_32 token)
|
||||
{
|
||||
var imagePreviewOperationColor = New TinyColor(token.ColorTextLightSolid);
|
||||
var previewCls = @$"{token.ComponentCls}-preview";
|
||||
var imageToken = MergeToken(
|
||||
token,
|
||||
new Unknown_33()
|
||||
{
|
||||
PreviewCls = previewCls,
|
||||
ImagePreviewOperationColor = ImagePreviewOperationColor.ToRgbString(),
|
||||
ImagePreviewOperationDisabledColor = New TinyColor(imagePreviewOperationColor)
|
||||
.setAlpha(0.25)
|
||||
.toRgbString(),
|
||||
ModalMaskBg = New TinyColor('#000').setAlpha(0.45).toRgbString(),
|
||||
ImagePreviewOperationSize = token.FontSizeIcon * 1.5,
|
||||
ImagePreviewSwitchSize = token.ControlHeightLG,
|
||||
});
|
||||
return new Unknown_34
|
||||
{
|
||||
GenImageStyle(imageToken),
|
||||
GenImagePreviewStyle(imageToken),
|
||||
GenModalMaskStyle(mergeToken<ImageToken>(imageToken, { componentCls: previewCls })),
|
||||
GenPreviewMotion(imageToken)
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_5 GenComponentStyleHook(Unknown_35 token)
|
||||
{
|
||||
return new Unknown_36()
|
||||
{
|
||||
ZIndexPopup = token.ZIndexPopupBase + 80,
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,409 @@
|
|||
using System;
|
||||
using CssInCs;
|
||||
using static AntDesign.GlobalStyle;
|
||||
using static AntDesign.Theme;
|
||||
|
||||
namespace AntDesign
|
||||
{
|
||||
public partial class InputNumberToken
|
||||
{
|
||||
public int ControlWidth { get; set; }
|
||||
|
||||
public int HandleWidth { get; set; }
|
||||
|
||||
public int HandleFontSize { get; set; }
|
||||
|
||||
public true | "auto" HandleVisible { get; set; }
|
||||
|
||||
}
|
||||
|
||||
public partial class InputNumberToken : TokenWithCommonCls
|
||||
{
|
||||
}
|
||||
|
||||
public partial class InputNumber
|
||||
{
|
||||
public Unknown_1 GenInputNumberStyles(InputNumberToken token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var lineWidth = token.LineWidth;
|
||||
var lineType = token.LineType;
|
||||
var colorBorder = token.ColorBorder;
|
||||
var borderRadius = token.BorderRadius;
|
||||
var fontSizeLG = token.FontSizeLG;
|
||||
var controlHeightLG = token.ControlHeightLG;
|
||||
var controlHeightSM = token.ControlHeightSM;
|
||||
var colorError = token.ColorError;
|
||||
var inputPaddingHorizontalSM = token.InputPaddingHorizontalSM;
|
||||
var colorTextDescription = token.ColorTextDescription;
|
||||
var motionDurationMid = token.MotionDurationMid;
|
||||
var colorPrimary = token.ColorPrimary;
|
||||
var controlHeight = token.ControlHeight;
|
||||
var inputPaddingHorizontal = token.InputPaddingHorizontal;
|
||||
var colorBgContainer = token.ColorBgContainer;
|
||||
var colorTextDisabled = token.ColorTextDisabled;
|
||||
var borderRadiusSM = token.BorderRadiusSM;
|
||||
var borderRadiusLG = token.BorderRadiusLG;
|
||||
var controlWidth = token.ControlWidth;
|
||||
var handleVisible = token.HandleVisible;
|
||||
return new Unknown_5
|
||||
{
|
||||
new Unknown_6()
|
||||
{
|
||||
[componentCls] = new Unknown_7()
|
||||
{
|
||||
["..."] = ResetComponent(token),
|
||||
["..."] = GenBasicInputStyle(token),
|
||||
["..."] = GenStatusStyle(token, componentCls),
|
||||
Display = "inline-block",
|
||||
Width = controlWidth,
|
||||
Margin = 0,
|
||||
Padding = 0,
|
||||
Border = @$"{lineWidth}px {lineType} {colorBorder}",
|
||||
BorderRadius = borderRadius,
|
||||
["&-rtl"] = new Unknown_8()
|
||||
{
|
||||
Direction = "rtl",
|
||||
[$"{componentCls}-input"] = new Unknown_9()
|
||||
{
|
||||
Direction = "rtl",
|
||||
},
|
||||
},
|
||||
["&-lg"] = new Unknown_10()
|
||||
{
|
||||
Padding = 0,
|
||||
FontSize = fontSizeLG,
|
||||
BorderRadius = borderRadiusLG,
|
||||
[$"input{componentCls}-input"] = new Unknown_11()
|
||||
{
|
||||
Height = controlHeightLG - 2 * lineWidth,
|
||||
},
|
||||
},
|
||||
["&-sm"] = new Unknown_12()
|
||||
{
|
||||
Padding = 0,
|
||||
BorderRadius = borderRadiusSM,
|
||||
[$"input{componentCls}-input"] = new Unknown_13()
|
||||
{
|
||||
Height = controlHeightSM - 2 * lineWidth,
|
||||
Padding = @$"0 {inputPaddingHorizontalSM}px",
|
||||
},
|
||||
},
|
||||
["&:hover"] = new Unknown_14()
|
||||
{
|
||||
["..."] = GenHoverStyle(token)
|
||||
},
|
||||
["&-focused"] = new Unknown_15()
|
||||
{
|
||||
["..."] = GenActiveStyle(token)
|
||||
},
|
||||
["&-disabled"] = new Unknown_16()
|
||||
{
|
||||
["..."] = GenDisabledStyle(token),
|
||||
[$"{componentCls}-input"] = new Unknown_17()
|
||||
{
|
||||
Cursor = "not-allowed",
|
||||
},
|
||||
},
|
||||
["&-out-of-range"] = new Unknown_18()
|
||||
{
|
||||
[$"{componentCls}-input-wrap"] = new Unknown_19()
|
||||
{
|
||||
Input = new Unknown_20()
|
||||
{
|
||||
Color = colorError,
|
||||
},
|
||||
},
|
||||
},
|
||||
["&-group"] = new Unknown_21()
|
||||
{
|
||||
["..."] = ResetComponent(token),
|
||||
["..."] = GenInputGroupStyle(token),
|
||||
["&-wrapper"] = new Unknown_22()
|
||||
{
|
||||
Display = "inline-block",
|
||||
TextAlign = "start",
|
||||
VerticalAlign = "top",
|
||||
[$"{componentCls}-affix-wrapper"] = new Unknown_23()
|
||||
{
|
||||
Width = "100%",
|
||||
},
|
||||
["&-lg"] = new Unknown_24()
|
||||
{
|
||||
[$"{componentCls}-group-addon"] = new Unknown_25()
|
||||
{
|
||||
BorderRadius = borderRadiusLG,
|
||||
},
|
||||
},
|
||||
["&-sm"] = new Unknown_26()
|
||||
{
|
||||
[$"{componentCls}-group-addon"] = new Unknown_27()
|
||||
{
|
||||
BorderRadius = borderRadiusSM,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
[componentCls] = new Unknown_28()
|
||||
{
|
||||
["&-input"] = new Unknown_29()
|
||||
{
|
||||
["..."] = ResetComponent(token),
|
||||
Width = "100%",
|
||||
Height = controlHeight - 2 * lineWidth,
|
||||
Padding = @$"0 {inputPaddingHorizontal}px",
|
||||
TextAlign = "start",
|
||||
BackgroundColor = "transparent",
|
||||
Border = 0,
|
||||
BorderRadius = borderRadius,
|
||||
Outline = 0,
|
||||
Transition = @$"all {motionDurationMid} linear",
|
||||
Appearance = "textfield",
|
||||
FontSize = "inherit",
|
||||
VerticalAlign = "top",
|
||||
["..."] = GenPlaceholderStyle(token.ColorTextPlaceholder),
|
||||
["&[type=\"number\"]::-webkit-inner-spin-button, &[type=\"number\"]::-webkit-outer-spin-button"] = new Unknown_30()
|
||||
{
|
||||
Margin = 0,
|
||||
WebkitAppearance = "none",
|
||||
Appearance = "none",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
new Unknown_31()
|
||||
{
|
||||
[componentCls] = new Unknown_32()
|
||||
{
|
||||
[$"&:hover {componentCls}-handler-wrap, &-focused {componentCls}-handler-wrap"] = new Unknown_33()
|
||||
{
|
||||
Opacity = 1,
|
||||
},
|
||||
[$"{componentCls}-handler-wrap"] = new Unknown_34()
|
||||
{
|
||||
Position = "absolute",
|
||||
InsetBlockStart = 0,
|
||||
InsetInlineEnd = 0,
|
||||
Width = token.HandleWidth,
|
||||
Height = "100%",
|
||||
Background = colorBgContainer,
|
||||
BorderStartStartRadius = 0,
|
||||
BorderStartEndRadius = borderRadius,
|
||||
BorderEndEndRadius = borderRadius,
|
||||
BorderEndStartRadius = 0,
|
||||
Opacity = handleVisible === true ? 1 : 0,
|
||||
Display = "flex",
|
||||
FlexDirection = "column",
|
||||
AlignItems = "stretch",
|
||||
Transition = @$"opacity {motionDurationMid} linear {motionDurationMid}",
|
||||
[$"{componentCls}-handler"] = new Unknown_35()
|
||||
{
|
||||
Display = "flex",
|
||||
AlignItems = "center",
|
||||
JustifyContent = "center",
|
||||
Flex = "auto",
|
||||
Height = "40%",
|
||||
[$"{componentCls}-handler-up-inner,{componentCls}-handler-down-inner"] = new Unknown_36()
|
||||
{
|
||||
MarginInlineEnd = 0,
|
||||
FontSize = token.HandleFontSize,
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-handler"] = new Unknown_37()
|
||||
{
|
||||
Height = "50%",
|
||||
Overflow = "hidden",
|
||||
Color = colorTextDescription,
|
||||
FontWeight = "bold",
|
||||
LineHeight = 0,
|
||||
TextAlign = "center",
|
||||
Cursor = "pointer",
|
||||
BorderInlineStart = @$"{lineWidth}px {lineType} {colorBorder}",
|
||||
Transition = @$"all {motionDurationMid} linear",
|
||||
["&:active"] = new Unknown_38()
|
||||
{
|
||||
Background = token.ColorFillAlter,
|
||||
},
|
||||
["&:hover"] = new Unknown_39()
|
||||
{
|
||||
Height = @$"60%",
|
||||
[$"{componentCls}-handler-up-inner,{componentCls}-handler-down-inner"] = new Unknown_40()
|
||||
{
|
||||
Color = colorPrimary,
|
||||
},
|
||||
},
|
||||
["&-up-inner, &-down-inner"] = new Unknown_41()
|
||||
{
|
||||
["..."] = ResetIcon(),
|
||||
Color = colorTextDescription,
|
||||
Transition = @$"all {motionDurationMid} linear",
|
||||
UserSelect = "none",
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-handler-up"] = new Unknown_42()
|
||||
{
|
||||
BorderStartEndRadius = borderRadius,
|
||||
},
|
||||
[$"{componentCls}-handler-down"] = new Unknown_43()
|
||||
{
|
||||
BorderBlockStart = @$"{lineWidth}px {lineType} {colorBorder}",
|
||||
BorderEndEndRadius = borderRadius,
|
||||
},
|
||||
["&-disabled, &-readonly"] = new Unknown_44()
|
||||
{
|
||||
[$"{componentCls}-handler-wrap"] = new Unknown_45()
|
||||
{
|
||||
Display = "none",
|
||||
},
|
||||
[$"{componentCls}-input"] = new Unknown_46()
|
||||
{
|
||||
Color = "inherit",
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-handler-up-disabled,{componentCls}-handler-down-disabled"] = new Unknown_47()
|
||||
{
|
||||
Cursor = "not-allowed",
|
||||
},
|
||||
[$"{componentCls}-handler-up-disabled:hover&-handler-up-inner,{componentCls}-handler-down-disabled:hover&-handler-down-inner"] = new Unknown_48()
|
||||
{
|
||||
Color = colorTextDisabled,
|
||||
},
|
||||
},
|
||||
},
|
||||
new Unknown_49()
|
||||
{
|
||||
[$"{componentCls}-borderless"] = new Unknown_50()
|
||||
{
|
||||
BorderColor = "transparent",
|
||||
BoxShadow = "none",
|
||||
[$"{componentCls}-handler-down"] = new Unknown_51()
|
||||
{
|
||||
BorderBlockStartWidth = 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_2 GenAffixWrapperStyles(InputNumberToken token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var inputPaddingHorizontal = token.InputPaddingHorizontal;
|
||||
var inputAffixPadding = token.InputAffixPadding;
|
||||
var controlWidth = token.ControlWidth;
|
||||
var borderRadiusLG = token.BorderRadiusLG;
|
||||
var borderRadiusSM = token.BorderRadiusSM;
|
||||
return new Unknown_52()
|
||||
{
|
||||
[$"{componentCls}-affix-wrapper"] = new Unknown_53()
|
||||
{
|
||||
["..."] = GenBasicInputStyle(token),
|
||||
["..."] = GenStatusStyle(token, $"{componentCls}-affix-wrapper"),
|
||||
Position = "relative",
|
||||
Display = "inline-flex",
|
||||
Width = controlWidth,
|
||||
Padding = 0,
|
||||
PaddingInlineStart = inputPaddingHorizontal,
|
||||
["&-lg"] = new Unknown_54()
|
||||
{
|
||||
BorderRadius = borderRadiusLG,
|
||||
},
|
||||
["&-sm"] = new Unknown_55()
|
||||
{
|
||||
BorderRadius = borderRadiusSM,
|
||||
},
|
||||
[$"&:not({componentCls}-affix-wrapper-disabled):hover"] = new Unknown_56()
|
||||
{
|
||||
["..."] = GenHoverStyle(token),
|
||||
ZIndex = 1,
|
||||
},
|
||||
["&-focused, &:focus"] = new Unknown_57()
|
||||
{
|
||||
ZIndex = 1,
|
||||
},
|
||||
["&-disabled"] = new Unknown_58()
|
||||
{
|
||||
[$"{componentCls}[disabled]"] = new Unknown_59()
|
||||
{
|
||||
Background = "transparent",
|
||||
},
|
||||
},
|
||||
[$"> div{componentCls}"] = new Unknown_60()
|
||||
{
|
||||
Width = "100%",
|
||||
Border = "none",
|
||||
Outline = "none",
|
||||
[$"&{componentCls}-focused"] = new Unknown_61()
|
||||
{
|
||||
BoxShadow = "none !important",
|
||||
},
|
||||
},
|
||||
[$"input{componentCls}-input"] = new Unknown_62()
|
||||
{
|
||||
Padding = 0,
|
||||
},
|
||||
["&::before"] = new Unknown_63()
|
||||
{
|
||||
Width = 0,
|
||||
Visibility = "hidden",
|
||||
Content = '"\\a0"',
|
||||
},
|
||||
[$"{componentCls}-handler-wrap"] = new Unknown_64()
|
||||
{
|
||||
ZIndex = 2,
|
||||
},
|
||||
[componentCls] = new Unknown_65()
|
||||
{
|
||||
["&-prefix, &-suffix"] = new Unknown_66()
|
||||
{
|
||||
Display = "flex",
|
||||
Flex = "none",
|
||||
AlignItems = "center",
|
||||
PointerEvents = "none",
|
||||
},
|
||||
["&-prefix"] = new Unknown_67()
|
||||
{
|
||||
MarginInlineEnd = inputAffixPadding,
|
||||
},
|
||||
["&-suffix"] = new Unknown_68()
|
||||
{
|
||||
Position = "absolute",
|
||||
InsetBlockStart = 0,
|
||||
InsetInlineEnd = 0,
|
||||
ZIndex = 1,
|
||||
Height = "100%",
|
||||
MarginInlineEnd = inputPaddingHorizontal,
|
||||
MarginInlineStart = inputAffixPadding,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_3 GenComponentStyleHook(Unknown_69 token)
|
||||
{
|
||||
var inputNumberToken = InitInputToken(token);
|
||||
return new Unknown_70
|
||||
{
|
||||
GenInputNumberStyles(inputNumberToken),
|
||||
GenAffixWrapperStyles(inputNumberToken),
|
||||
GenCompactItemStyle(inputNumberToken)
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_4 GenComponentStyleHook(Unknown_71 token)
|
||||
{
|
||||
return new Unknown_72()
|
||||
{
|
||||
ControlWidth = 90,
|
||||
HandleWidth = token.ControlHeightSM - token.LineWidth * 2,
|
||||
HandleFontSize = token.FontSize / 2,
|
||||
HandleVisible = "auto",
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
Разница между файлами не показана из-за своего большого размера
Загрузить разницу
|
|
@ -0,0 +1,261 @@
|
|||
using System;
|
||||
using CssInCs;
|
||||
using static AntDesign.GlobalStyle;
|
||||
using static AntDesign.Theme;
|
||||
|
||||
namespace AntDesign
|
||||
{
|
||||
public partial class LayoutToken
|
||||
{
|
||||
public string ColorBgHeader { get; set; }
|
||||
|
||||
public string ColorBgBody { get; set; }
|
||||
|
||||
public string ColorBgTrigger { get; set; }
|
||||
|
||||
}
|
||||
|
||||
public partial class LayoutToken : TokenWithCommonCls
|
||||
{
|
||||
public int LayoutHeaderHeight { get; set; }
|
||||
|
||||
public int LayoutHeaderPaddingInline { get; set; }
|
||||
|
||||
public string LayoutHeaderColor { get; set; }
|
||||
|
||||
public string LayoutFooterPadding { get; set; }
|
||||
|
||||
public int LayoutTriggerHeight { get; set; }
|
||||
|
||||
public int LayoutZeroTriggerSize { get; set; }
|
||||
|
||||
}
|
||||
|
||||
public partial class Layout
|
||||
{
|
||||
public Unknown_1 GenLayoutStyle(Unknown_5 token)
|
||||
{
|
||||
var antCls = token.AntCls;
|
||||
var componentCls = token.ComponentCls;
|
||||
var colorText = token.ColorText;
|
||||
var colorTextLightSolid = token.ColorTextLightSolid;
|
||||
var colorBgHeader = token.ColorBgHeader;
|
||||
var colorBgBody = token.ColorBgBody;
|
||||
var colorBgTrigger = token.ColorBgTrigger;
|
||||
var layoutHeaderHeight = token.LayoutHeaderHeight;
|
||||
var layoutHeaderPaddingInline = token.LayoutHeaderPaddingInline;
|
||||
var layoutHeaderColor = token.LayoutHeaderColor;
|
||||
var layoutFooterPadding = token.LayoutFooterPadding;
|
||||
var layoutTriggerHeight = token.LayoutTriggerHeight;
|
||||
var layoutZeroTriggerSize = token.LayoutZeroTriggerSize;
|
||||
var motionDurationMid = token.MotionDurationMid;
|
||||
var motionDurationSlow = token.MotionDurationSlow;
|
||||
var fontSize = token.FontSize;
|
||||
var borderRadius = token.BorderRadius;
|
||||
return new Unknown_6()
|
||||
{
|
||||
[componentCls] = new Unknown_7()
|
||||
{
|
||||
Display = "flex",
|
||||
Flex = "auto",
|
||||
FlexDirection = "column",
|
||||
MinHeight = 0,
|
||||
Background = colorBgBody,
|
||||
["&, *"] = new Unknown_8()
|
||||
{
|
||||
BoxSizing = "border-box",
|
||||
},
|
||||
[$"&{componentCls}-has-sider"] = new Unknown_9()
|
||||
{
|
||||
FlexDirection = "row",
|
||||
[$"> {componentCls}, > {componentCls}-content"] = new Unknown_10()
|
||||
{
|
||||
Width = 0,
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-header, &{componentCls}-footer"] = new Unknown_11()
|
||||
{
|
||||
Flex = "0 0 auto",
|
||||
},
|
||||
[$"{componentCls}-sider"] = new Unknown_12()
|
||||
{
|
||||
Position = "relative",
|
||||
MinWidth = 0,
|
||||
Background = colorBgHeader,
|
||||
Transition = @$"all {motionDurationMid}, background 0s",
|
||||
["&-children"] = new Unknown_13()
|
||||
{
|
||||
Height = "100%",
|
||||
MarginTop = -0.1f,
|
||||
PaddingTop = 0.1f,
|
||||
[$"{antCls}-menu{antCls}-menu-inline-collapsed"] = new Unknown_14()
|
||||
{
|
||||
Width = "auto",
|
||||
},
|
||||
},
|
||||
["&-has-trigger"] = new Unknown_15()
|
||||
{
|
||||
PaddingBottom = layoutTriggerHeight,
|
||||
},
|
||||
["&-right"] = new Unknown_16()
|
||||
{
|
||||
Order = 1,
|
||||
},
|
||||
["&-trigger"] = new Unknown_17()
|
||||
{
|
||||
Position = "fixed",
|
||||
Bottom = 0,
|
||||
ZIndex = 1,
|
||||
Height = layoutTriggerHeight,
|
||||
Color = colorTextLightSolid,
|
||||
LineHeight = @$"{layoutTriggerHeight}px",
|
||||
TextAlign = "center",
|
||||
Background = colorBgTrigger,
|
||||
Cursor = "pointer",
|
||||
Transition = @$"all {motionDurationMid}",
|
||||
},
|
||||
["&-zero-width"] = new Unknown_18()
|
||||
{
|
||||
["> *"] = new Unknown_19()
|
||||
{
|
||||
Overflow = "hidden",
|
||||
},
|
||||
["&-trigger"] = new Unknown_20()
|
||||
{
|
||||
Position = "absolute",
|
||||
Top = layoutHeaderHeight,
|
||||
InsetInlineEnd = -layoutZeroTriggerSize,
|
||||
ZIndex = 1,
|
||||
Width = layoutZeroTriggerSize,
|
||||
Height = layoutZeroTriggerSize,
|
||||
Color = colorTextLightSolid,
|
||||
FontSize = token.FontSizeXL,
|
||||
Display = "flex",
|
||||
AlignItems = "center",
|
||||
JustifyContent = "center",
|
||||
Background = colorBgHeader,
|
||||
BorderStartStartRadius = 0,
|
||||
BorderStartEndRadius = borderRadius,
|
||||
BorderEndEndRadius = borderRadius,
|
||||
BorderEndStartRadius = 0,
|
||||
Cursor = "pointer",
|
||||
Transition = @$"background {motionDurationSlow} ease",
|
||||
["&::after"] = new Unknown_21()
|
||||
{
|
||||
Position = "absolute",
|
||||
Inset = 0,
|
||||
Background = "transparent",
|
||||
Transition = @$"all {motionDurationSlow}",
|
||||
Content = "\"\"",
|
||||
},
|
||||
["&:hover::after"] = new Unknown_22()
|
||||
{
|
||||
Background = @$"rgba(255, 255, 255, 0.2)",
|
||||
},
|
||||
["&-right"] = new Unknown_23()
|
||||
{
|
||||
InsetInlineStart = -layoutZeroTriggerSize,
|
||||
BorderStartStartRadius = borderRadius,
|
||||
BorderStartEndRadius = 0,
|
||||
BorderEndEndRadius = 0,
|
||||
BorderEndStartRadius = borderRadius,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
["..."] = GenLayoutLightStyle(token),
|
||||
["&-rtl"] = new Unknown_24()
|
||||
{
|
||||
Direction = "rtl",
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-header"] = new Unknown_25()
|
||||
{
|
||||
Height = layoutHeaderHeight,
|
||||
PaddingInline = layoutHeaderPaddingInline,
|
||||
Color = layoutHeaderColor,
|
||||
LineHeight = @$"{layoutHeaderHeight}px",
|
||||
Background = colorBgHeader,
|
||||
[$"{antCls}-menu"] = new Unknown_26()
|
||||
{
|
||||
LineHeight = "inherit",
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-footer"] = new Unknown_27()
|
||||
{
|
||||
Padding = layoutFooterPadding,
|
||||
Color = colorText,
|
||||
FontSize = fontSize,
|
||||
Background = colorBgBody,
|
||||
},
|
||||
[$"{componentCls}-content"] = new Unknown_28()
|
||||
{
|
||||
Flex = "auto",
|
||||
MinHeight = 0,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_2 GenComponentStyleHook(Unknown_29 token)
|
||||
{
|
||||
var colorText = token.ColorText;
|
||||
var controlHeightSM = token.ControlHeightSM;
|
||||
var controlHeight = token.ControlHeight;
|
||||
var controlHeightLG = token.ControlHeightLG;
|
||||
var marginXXS = token.MarginXXS;
|
||||
var layoutHeaderPaddingInline = controlHeightLG * 1.25;
|
||||
var layoutToken = MergeToken(
|
||||
token,
|
||||
new Unknown_30()
|
||||
{
|
||||
LayoutHeaderHeight = controlHeight * 2,
|
||||
LayoutHeaderPaddingInline = layoutHeaderPaddingInline,
|
||||
LayoutHeaderColor = colorText,
|
||||
LayoutFooterPadding = @$"{controlHeightSM}px {layoutHeaderPaddingInline}px",
|
||||
LayoutTriggerHeight = controlHeightLG + marginXXS * 2,
|
||||
LayoutZeroTriggerSize = controlHeightLG,
|
||||
});
|
||||
return new Unknown_31 { GenLayoutStyle(layoutToken) };
|
||||
}
|
||||
|
||||
public Unknown_3 GenComponentStyleHook(Unknown_32 token)
|
||||
{
|
||||
var colorBgLayout = token.ColorBgLayout;
|
||||
return new Unknown_33()
|
||||
{
|
||||
ColorBgHeader = "#001529",
|
||||
ColorBgBody = colorBgLayout,
|
||||
ColorBgTrigger = "#002140",
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_4 GenLayoutLightStyle(Unknown_34 token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var colorBgContainer = token.ColorBgContainer;
|
||||
var colorBgBody = token.ColorBgBody;
|
||||
var colorText = token.ColorText;
|
||||
return new Unknown_35()
|
||||
{
|
||||
[$"{componentCls}-sider-light"] = new Unknown_36()
|
||||
{
|
||||
Background = colorBgContainer,
|
||||
[$"{componentCls}-sider-trigger"] = new Unknown_37()
|
||||
{
|
||||
Color = colorText,
|
||||
Background = colorBgContainer,
|
||||
},
|
||||
[$"{componentCls}-sider-zero-width-trigger"] = new Unknown_38()
|
||||
{
|
||||
Color = colorText,
|
||||
Background = colorBgContainer,
|
||||
Border = @$"1px solid {colorBgBody}",
|
||||
BorderInlineStart = 0,
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,405 @@
|
|||
using System;
|
||||
using CssInCs;
|
||||
using static AntDesign.GlobalStyle;
|
||||
using static AntDesign.Theme;
|
||||
|
||||
namespace AntDesign
|
||||
{
|
||||
public partial class ListToken
|
||||
{
|
||||
public int ContentWidth { get; set; }
|
||||
|
||||
}
|
||||
|
||||
public partial class ListToken : TokenWithCommonCls
|
||||
{
|
||||
public string ListBorderedCls { get; set; }
|
||||
|
||||
public int MinHeight { get; set; }
|
||||
|
||||
public string ListItemPaddingLG { get; set; }
|
||||
|
||||
public string ListItemPaddingSM { get; set; }
|
||||
|
||||
public string ListItemPadding { get; set; }
|
||||
|
||||
}
|
||||
|
||||
public partial class List
|
||||
{
|
||||
public CSSObject GenBorderedStyle(ListToken token)
|
||||
{
|
||||
var listBorderedCls = token.ListBorderedCls;
|
||||
var componentCls = token.ComponentCls;
|
||||
var paddingLG = token.PaddingLG;
|
||||
var margin = token.Margin;
|
||||
var padding = token.Padding;
|
||||
var listItemPaddingSM = token.ListItemPaddingSM;
|
||||
var marginLG = token.MarginLG;
|
||||
var borderRadiusLG = token.BorderRadiusLG;
|
||||
return new CSSObject()
|
||||
{
|
||||
[$"{listBorderedCls}"] = new CSSObject()
|
||||
{
|
||||
Border = @$"{token.LineWidth}px {token.LineType} {token.ColorBorder}",
|
||||
BorderRadius = borderRadiusLG,
|
||||
[$"{componentCls}-header,{componentCls}-footer,{componentCls}-item"] = new CSSObject()
|
||||
{
|
||||
PaddingInline = paddingLG,
|
||||
},
|
||||
[$"{componentCls}-pagination"] = new CSSObject()
|
||||
{
|
||||
Margin = @$"{margin}px {marginLG}px",
|
||||
},
|
||||
},
|
||||
[$"{listBorderedCls}{componentCls}-sm"] = new CSSObject()
|
||||
{
|
||||
[$"{componentCls}-item,{componentCls}-header,{componentCls}-footer"] = new CSSObject()
|
||||
{
|
||||
Padding = listItemPaddingSM,
|
||||
},
|
||||
},
|
||||
[$"{listBorderedCls}{componentCls}-lg"] = new CSSObject()
|
||||
{
|
||||
[$"{componentCls}-item,{componentCls}-header,{componentCls}-footer"] = new CSSObject()
|
||||
{
|
||||
Padding = @$"{padding}px {paddingLG}px",
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenResponsiveStyle(ListToken token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var screenSM = token.ScreenSM;
|
||||
var screenMD = token.ScreenMD;
|
||||
var marginLG = token.MarginLG;
|
||||
var marginSM = token.MarginSM;
|
||||
var margin = token.Margin;
|
||||
return new CSSObject()
|
||||
{
|
||||
[$"@media screen and (max-width:{screenMD})"] = new CSSObject()
|
||||
{
|
||||
[$"{componentCls}"] = new CSSObject()
|
||||
{
|
||||
[$"{componentCls}-item"] = new CSSObject()
|
||||
{
|
||||
[$"{componentCls}-item-action"] = new CSSObject()
|
||||
{
|
||||
MarginInlineStart = marginLG,
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-vertical"] = new CSSObject()
|
||||
{
|
||||
[$"{componentCls}-item"] = new CSSObject()
|
||||
{
|
||||
[$"{componentCls}-item-extra"] = new CSSObject()
|
||||
{
|
||||
MarginInlineStart = marginLG,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"@media screen and (max-width: {screenSM})"] = new CSSObject()
|
||||
{
|
||||
[$"{componentCls}"] = new CSSObject()
|
||||
{
|
||||
[$"{componentCls}-item"] = new CSSObject()
|
||||
{
|
||||
FlexWrap = "wrap",
|
||||
[$"{componentCls}-action"] = new CSSObject()
|
||||
{
|
||||
MarginInlineStart = marginSM,
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-vertical"] = new CSSObject()
|
||||
{
|
||||
[$"{componentCls}-item"] = new CSSObject()
|
||||
{
|
||||
FlexWrap = "wrap-reverse",
|
||||
[$"{componentCls}-item-main"] = new CSSObject()
|
||||
{
|
||||
MinWidth = token.ContentWidth,
|
||||
},
|
||||
[$"{componentCls}-item-extra"] = new CSSObject()
|
||||
{
|
||||
Margin = @$"auto auto {margin}px",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_1 GenBaseStyle(Unknown_3 token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var antCls = token.AntCls;
|
||||
var controlHeight = token.ControlHeight;
|
||||
var minHeight = token.MinHeight;
|
||||
var paddingSM = token.PaddingSM;
|
||||
var marginLG = token.MarginLG;
|
||||
var padding = token.Padding;
|
||||
var listItemPadding = token.ListItemPadding;
|
||||
var colorPrimary = token.ColorPrimary;
|
||||
var listItemPaddingSM = token.ListItemPaddingSM;
|
||||
var listItemPaddingLG = token.ListItemPaddingLG;
|
||||
var paddingXS = token.PaddingXS;
|
||||
var margin = token.Margin;
|
||||
var colorText = token.ColorText;
|
||||
var colorTextDescription = token.ColorTextDescription;
|
||||
var motionDurationSlow = token.MotionDurationSlow;
|
||||
var lineWidth = token.LineWidth;
|
||||
var alignCls = new Unknown_4()
|
||||
{
|
||||
};
|
||||
return new Unknown_5()
|
||||
{
|
||||
[$"{componentCls}"] = new Unknown_6()
|
||||
{
|
||||
["..."] = ResetComponent(token),
|
||||
Position = "relative",
|
||||
["*"] = new Unknown_7()
|
||||
{
|
||||
Outline = "none",
|
||||
},
|
||||
[$"{componentCls}-header, {componentCls}-footer"] = new Unknown_8()
|
||||
{
|
||||
Background = "transparent",
|
||||
PaddingBlock = paddingSM,
|
||||
},
|
||||
[$"{componentCls}-pagination"] = new Unknown_9()
|
||||
{
|
||||
MarginBlockStart = marginLG,
|
||||
["..."] = alignCls,
|
||||
[$"{antCls}-pagination-options"] = new Unknown_10()
|
||||
{
|
||||
TextAlign = "start",
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-spin"] = new Unknown_11()
|
||||
{
|
||||
MinHeight = minHeight,
|
||||
TextAlign = "center",
|
||||
},
|
||||
[$"{componentCls}-items"] = new Unknown_12()
|
||||
{
|
||||
Margin = 0,
|
||||
Padding = 0,
|
||||
ListStyle = "none",
|
||||
},
|
||||
[$"{componentCls}-item"] = new Unknown_13()
|
||||
{
|
||||
Display = "flex",
|
||||
AlignItems = "center",
|
||||
JustifyContent = "space-between",
|
||||
Padding = listItemPadding,
|
||||
Color = colorText,
|
||||
[$"{componentCls}-item-meta"] = new Unknown_14()
|
||||
{
|
||||
Display = "flex",
|
||||
Flex = 1,
|
||||
AlignItems = "flex-start",
|
||||
MaxWidth = "100%",
|
||||
[$"{componentCls}-item-meta-avatar"] = new Unknown_15()
|
||||
{
|
||||
MarginInlineEnd = padding,
|
||||
},
|
||||
[$"{componentCls}-item-meta-content"] = new Unknown_16()
|
||||
{
|
||||
Flex = "1 0",
|
||||
Width = 0,
|
||||
Color = colorText,
|
||||
},
|
||||
[$"{componentCls}-item-meta-title"] = new Unknown_17()
|
||||
{
|
||||
Margin = @$"0 0 {token.MarginXXS}px 0",
|
||||
Color = colorText,
|
||||
FontSize = token.FontSize,
|
||||
LineHeight = token.LineHeight,
|
||||
["> a"] = new Unknown_18()
|
||||
{
|
||||
Color = colorText,
|
||||
Transition = @$"all {motionDurationSlow}",
|
||||
["&:hover"] = new Unknown_19()
|
||||
{
|
||||
Color = colorPrimary,
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-item-meta-description"] = new Unknown_20()
|
||||
{
|
||||
Color = colorTextDescription,
|
||||
FontSize = token.FontSize,
|
||||
LineHeight = token.LineHeight,
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-item-action"] = new Unknown_21()
|
||||
{
|
||||
Flex = "0 0 auto",
|
||||
MarginInlineStart = token.MarginXXL,
|
||||
Padding = 0,
|
||||
FontSize = 0,
|
||||
ListStyle = "none",
|
||||
["& > li"] = new Unknown_22()
|
||||
{
|
||||
Position = "relative",
|
||||
Display = "inline-block",
|
||||
Padding = @$"0 {paddingXS}px",
|
||||
Color = colorTextDescription,
|
||||
FontSize = token.FontSize,
|
||||
LineHeight = token.LineHeight,
|
||||
TextAlign = "center",
|
||||
["&:first-child"] = new Unknown_23()
|
||||
{
|
||||
PaddingInlineStart = 0,
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-item-action-split"] = new Unknown_24()
|
||||
{
|
||||
Position = "absolute",
|
||||
InsetBlockStart = "50%",
|
||||
InsetInlineEnd = 0,
|
||||
Width = lineWidth,
|
||||
Height = Math.Ceil(token.FontSize * token.LineHeight) - token.MarginXXS * 2,
|
||||
Transform = "translateY(-50%)",
|
||||
BackgroundColor = token.ColorSplit,
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-empty"] = new Unknown_25()
|
||||
{
|
||||
Padding = @$"{padding}px 0",
|
||||
Color = colorTextDescription,
|
||||
FontSize = token.FontSizeSM,
|
||||
TextAlign = "center",
|
||||
},
|
||||
[$"{componentCls}-empty-text"] = new Unknown_26()
|
||||
{
|
||||
Padding = padding,
|
||||
Color = token.ColorTextDisabled,
|
||||
FontSize = token.FontSize,
|
||||
TextAlign = "center",
|
||||
},
|
||||
[$"{componentCls}-item-no-flex"] = new Unknown_27()
|
||||
{
|
||||
Display = "block",
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-grid {antCls}-col > {componentCls}-item"] = new Unknown_28()
|
||||
{
|
||||
Display = "block",
|
||||
MaxWidth = "100%",
|
||||
MarginBlockEnd = margin,
|
||||
PaddingBlock = 0,
|
||||
BorderBlockEnd = "none",
|
||||
},
|
||||
[$"{componentCls}-vertical {componentCls}-item"] = new Unknown_29()
|
||||
{
|
||||
AlignItems = "initial",
|
||||
[$"{componentCls}-item-main"] = new Unknown_30()
|
||||
{
|
||||
Display = "block",
|
||||
Flex = 1,
|
||||
},
|
||||
[$"{componentCls}-item-extra"] = new Unknown_31()
|
||||
{
|
||||
MarginInlineStart = marginLG,
|
||||
},
|
||||
[$"{componentCls}-item-meta"] = new Unknown_32()
|
||||
{
|
||||
MarginBlockEnd = padding,
|
||||
[$"{componentCls}-item-meta-title"] = new Unknown_33()
|
||||
{
|
||||
MarginBlockStart = 0,
|
||||
MarginBlockEnd = paddingSM,
|
||||
Color = colorText,
|
||||
FontSize = token.FontSizeLG,
|
||||
LineHeight = token.LineHeightLG,
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-item-action"] = new Unknown_34()
|
||||
{
|
||||
MarginBlockStart = padding,
|
||||
MarginInlineStart = "auto",
|
||||
["> li"] = new Unknown_35()
|
||||
{
|
||||
Padding = @$"0 {padding}px",
|
||||
["&:first-child"] = new Unknown_36()
|
||||
{
|
||||
PaddingInlineStart = 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-split {componentCls}-item"] = new Unknown_37()
|
||||
{
|
||||
BorderBlockEnd = @$"{token.LineWidth}px {token.LineType} {token.ColorSplit}",
|
||||
["&:last-child"] = new Unknown_38()
|
||||
{
|
||||
BorderBlockEnd = "none",
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-split {componentCls}-header"] = new Unknown_39()
|
||||
{
|
||||
BorderBlockEnd = @$"{token.LineWidth}px {token.LineType} {token.ColorSplit}",
|
||||
},
|
||||
[$"{componentCls}-split{componentCls}-empty {componentCls}-footer"] = new Unknown_40()
|
||||
{
|
||||
BorderTop = @$"{token.LineWidth}px {token.LineType} {token.ColorSplit}",
|
||||
},
|
||||
[$"{componentCls}-loading {componentCls}-spin-nested-loading"] = new Unknown_41()
|
||||
{
|
||||
MinHeight = controlHeight,
|
||||
},
|
||||
[$"{componentCls}-split{componentCls}-something-after-last-item {antCls}-spin-container > {componentCls}-items > {componentCls}-item:last-child"] = new Unknown_42()
|
||||
{
|
||||
BorderBlockEnd = @$"{token.LineWidth}px {token.LineType} {token.ColorSplit}",
|
||||
},
|
||||
[$"{componentCls}-lg {componentCls}-item"] = new Unknown_43()
|
||||
{
|
||||
Padding = listItemPaddingLG,
|
||||
},
|
||||
[$"{componentCls}-sm {componentCls}-item"] = new Unknown_44()
|
||||
{
|
||||
Padding = listItemPaddingSM,
|
||||
},
|
||||
[$"{componentCls}:not({componentCls}-vertical)"] = new Unknown_45()
|
||||
{
|
||||
[$"{componentCls}-item-no-flex"] = new Unknown_46()
|
||||
{
|
||||
[$"{componentCls}-item-action"] = new Unknown_47()
|
||||
{
|
||||
Float = "right",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_2 GenComponentStyleHook(Unknown_48 token)
|
||||
{
|
||||
var listToken = MergeToken(
|
||||
token,
|
||||
new Unknown_49()
|
||||
{
|
||||
ListBorderedCls = @$"{token.ComponentCls}-bordered",
|
||||
MinHeight = token.ControlHeightLG,
|
||||
ListItemPadding = @$"{token.PaddingContentVertical}px 0",
|
||||
ListItemPaddingSM = @$"{token.PaddingContentVerticalSM}px {token.PaddingContentHorizontal}px",
|
||||
ListItemPaddingLG = @$"{token.PaddingContentVerticalLG}px {token.PaddingContentHorizontalLG}px",
|
||||
});
|
||||
return new Unknown_50
|
||||
{
|
||||
GenBaseStyle(listToken),
|
||||
GenBorderedStyle(listToken),
|
||||
GenResponsiveStyle(listToken)
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,222 @@
|
|||
using System;
|
||||
using CssInCs;
|
||||
using static AntDesign.GlobalStyle;
|
||||
using static AntDesign.Theme;
|
||||
|
||||
namespace AntDesign
|
||||
{
|
||||
public partial class MentionsToken
|
||||
{
|
||||
public int ZIndexPopup { get; set; }
|
||||
|
||||
public int DropdownHeight { get; set; }
|
||||
|
||||
public int ControlItemWidth { get; set; }
|
||||
|
||||
}
|
||||
|
||||
public partial class MentionsToken : TokenWithCommonCls
|
||||
{
|
||||
}
|
||||
|
||||
public partial class Mentions
|
||||
{
|
||||
public Unknown_1 GenMentionsStyle(Unknown_4 token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var colorTextDisabled = token.ColorTextDisabled;
|
||||
var controlItemBgHover = token.ControlItemBgHover;
|
||||
var controlPaddingHorizontal = token.ControlPaddingHorizontal;
|
||||
var colorText = token.ColorText;
|
||||
var motionDurationSlow = token.MotionDurationSlow;
|
||||
var lineHeight = token.LineHeight;
|
||||
var controlHeight = token.ControlHeight;
|
||||
var inputPaddingHorizontal = token.InputPaddingHorizontal;
|
||||
var inputPaddingVertical = token.InputPaddingVertical;
|
||||
var fontSize = token.FontSize;
|
||||
var colorBgElevated = token.ColorBgElevated;
|
||||
var paddingXXS = token.PaddingXXS;
|
||||
var borderRadius = token.BorderRadius;
|
||||
var borderRadiusLG = token.BorderRadiusLG;
|
||||
var boxShadowSecondary = token.BoxShadowSecondary;
|
||||
var itemPaddingVertical = Math.Round((token.ControlHeight - token.FontSize * token.LineHeight) / 2);
|
||||
return new Unknown_5()
|
||||
{
|
||||
[componentCls] = new Unknown_6()
|
||||
{
|
||||
["..."] = ResetComponent(token),
|
||||
["..."] = GenBasicInputStyle(token),
|
||||
Position = "relative",
|
||||
Display = "inline-block",
|
||||
Height = "auto",
|
||||
Padding = 0,
|
||||
Overflow = "hidden",
|
||||
LineHeight = lineHeight,
|
||||
WhiteSpace = "pre-wrap",
|
||||
VerticalAlign = "bottom",
|
||||
["..."] = GenStatusStyle(token, componentCls),
|
||||
["&-disabled"] = new Unknown_7()
|
||||
{
|
||||
["> textarea"] = new Unknown_8()
|
||||
{
|
||||
["..."] = GenDisabledStyle(token)
|
||||
},
|
||||
},
|
||||
["&-focused"] = new Unknown_9()
|
||||
{
|
||||
["..."] = GenActiveStyle(token)
|
||||
},
|
||||
[$"&-affix-wrapper {componentCls}-suffix"] = new Unknown_10()
|
||||
{
|
||||
Position = "absolute",
|
||||
Top = 0,
|
||||
InsetInlineEnd = inputPaddingHorizontal,
|
||||
Bottom = 0,
|
||||
ZIndex = 1,
|
||||
Display = "inline-flex",
|
||||
AlignItems = "center",
|
||||
Margin = "auto",
|
||||
},
|
||||
[$"> textarea, {componentCls}-measure"] = new Unknown_11()
|
||||
{
|
||||
Color = colorText,
|
||||
BoxSizing = "border-box",
|
||||
MinHeight = controlHeight - 2,
|
||||
Margin = 0,
|
||||
Padding = @$"{inputPaddingVertical}px {inputPaddingHorizontal}px",
|
||||
Overflow = "inherit",
|
||||
OverflowX = "hidden",
|
||||
OverflowY = "auto",
|
||||
FontWeight = "inherit",
|
||||
FontSize = "inherit",
|
||||
FontFamily = "inherit",
|
||||
FontStyle = "inherit",
|
||||
FontVariant = "inherit",
|
||||
FontSizeAdjust = "inherit",
|
||||
FontStretch = "inherit",
|
||||
LineHeight = "inherit",
|
||||
Direction = "inherit",
|
||||
LetterSpacing = "inherit",
|
||||
WhiteSpace = "inherit",
|
||||
TextAlign = "inherit",
|
||||
VerticalAlign = "top",
|
||||
WordWrap = "break-word",
|
||||
WordBreak = "inherit",
|
||||
TabSize = "inherit",
|
||||
},
|
||||
["> textarea"] = new Unknown_12()
|
||||
{
|
||||
Width = "100%",
|
||||
Border = "none",
|
||||
Outline = "none",
|
||||
Resize = "none",
|
||||
BackgroundColor = "inherit",
|
||||
["..."] = GenPlaceholderStyle(token.ColorTextPlaceholder)
|
||||
},
|
||||
[$"{componentCls}-measure"] = new Unknown_13()
|
||||
{
|
||||
Position = "absolute",
|
||||
Top = 0,
|
||||
InsetInlineEnd = 0,
|
||||
Bottom = 0,
|
||||
InsetInlineStart = 0,
|
||||
ZIndex = -1,
|
||||
Color = "transparent",
|
||||
PointerEvents = "none",
|
||||
["> span"] = new Unknown_14()
|
||||
{
|
||||
Display = "inline-block",
|
||||
MinHeight = "1em",
|
||||
},
|
||||
},
|
||||
["&-dropdown"] = new Unknown_15()
|
||||
{
|
||||
["..."] = ResetComponent(token),
|
||||
Position = "absolute",
|
||||
Top = -9999,
|
||||
InsetInlineStart = -9999,
|
||||
ZIndex = token.ZIndexPopup,
|
||||
BoxSizing = "border-box",
|
||||
FontSize = fontSize,
|
||||
FontVariant = "initial",
|
||||
Padding = paddingXXS,
|
||||
BackgroundColor = colorBgElevated,
|
||||
BorderRadius = borderRadiusLG,
|
||||
Outline = "none",
|
||||
BoxShadow = boxShadowSecondary,
|
||||
["&-hidden"] = new Unknown_16()
|
||||
{
|
||||
Display = "none",
|
||||
},
|
||||
[$"{componentCls}-dropdown-menu"] = new Unknown_17()
|
||||
{
|
||||
MaxHeight = token.DropdownHeight,
|
||||
Margin = 0,
|
||||
PaddingInlineStart = 0,
|
||||
Overflow = "auto",
|
||||
ListStyle = "none",
|
||||
Outline = "none",
|
||||
["&-item"] = new Unknown_18()
|
||||
{
|
||||
["..."] = textEllipsis,
|
||||
Position = "relative",
|
||||
Display = "block",
|
||||
MinWidth = token.ControlItemWidth,
|
||||
Padding = @$"{itemPaddingVertical}px {controlPaddingHorizontal}px",
|
||||
Color = colorText,
|
||||
BorderRadius = borderRadius,
|
||||
FontWeight = "normal",
|
||||
LineHeight = lineHeight,
|
||||
Cursor = "pointer",
|
||||
Transition = @$"background {motionDurationSlow} ease",
|
||||
["&:hover"] = new Unknown_19()
|
||||
{
|
||||
BackgroundColor = controlItemBgHover,
|
||||
},
|
||||
["&-disabled"] = new Unknown_20()
|
||||
{
|
||||
Color = colorTextDisabled,
|
||||
Cursor = "not-allowed",
|
||||
["&:hover"] = new Unknown_21()
|
||||
{
|
||||
Color = colorTextDisabled,
|
||||
BackgroundColor = controlItemBgHover,
|
||||
Cursor = "not-allowed",
|
||||
},
|
||||
},
|
||||
["&-selected"] = new Unknown_22()
|
||||
{
|
||||
Color = colorText,
|
||||
FontWeight = token.FontWeightStrong,
|
||||
BackgroundColor = controlItemBgHover,
|
||||
},
|
||||
["&-active"] = new Unknown_23()
|
||||
{
|
||||
BackgroundColor = controlItemBgHover,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_2 GenComponentStyleHook(Unknown_24 token)
|
||||
{
|
||||
var mentionsToken = InitInputToken(token);
|
||||
return new Unknown_25 { GenMentionsStyle(mentionsToken) };
|
||||
}
|
||||
|
||||
public Unknown_3 GenComponentStyleHook(Unknown_26 token)
|
||||
{
|
||||
return new Unknown_27()
|
||||
{
|
||||
DropdownHeight = 250,
|
||||
ControlItemWidth = 100,
|
||||
ZIndexPopup = token.ZIndexPopupBase + 50,
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,985 @@
|
|||
using System;
|
||||
using CssInCs;
|
||||
using static AntDesign.GlobalStyle;
|
||||
using static AntDesign.Theme;
|
||||
|
||||
namespace AntDesign
|
||||
{
|
||||
public partial class MenuToken
|
||||
{
|
||||
public int DropdownWidth { get; set; }
|
||||
|
||||
public int ZIndexPopup { get; set; }
|
||||
|
||||
public string ColorGroupTitle { get; set; }
|
||||
|
||||
public int RadiusItem { get; set; }
|
||||
|
||||
public int RadiusSubMenuItem { get; set; }
|
||||
|
||||
public string ColorItemText { get; set; }
|
||||
|
||||
public string ColorItemTextHover { get; set; }
|
||||
|
||||
public string ColorItemTextHoverHorizontal { get; set; }
|
||||
|
||||
public string ColorItemTextSelected { get; set; }
|
||||
|
||||
public string ColorItemTextSelectedHorizontal { get; set; }
|
||||
|
||||
public string ColorItemTextDisabled { get; set; }
|
||||
|
||||
public string ColorDangerItemText { get; set; }
|
||||
|
||||
public string ColorDangerItemTextHover { get; set; }
|
||||
|
||||
public string ColorDangerItemTextSelected { get; set; }
|
||||
|
||||
public string ColorDangerItemBgActive { get; set; }
|
||||
|
||||
public string ColorDangerItemBgSelected { get; set; }
|
||||
|
||||
public string ColorItemBg { get; set; }
|
||||
|
||||
public string ColorItemBgHover { get; set; }
|
||||
|
||||
public string ColorSubItemBg { get; set; }
|
||||
|
||||
public string ColorItemBgActive { get; set; }
|
||||
|
||||
public string ColorItemBgSelected { get; set; }
|
||||
|
||||
public string ColorItemBgSelectedHorizontal { get; set; }
|
||||
|
||||
public int ColorActiveBarWidth { get; set; }
|
||||
|
||||
public int ColorActiveBarHeight { get; set; }
|
||||
|
||||
public int ColorActiveBarBorderSize { get; set; }
|
||||
|
||||
public int ItemMarginInline { get; set; }
|
||||
|
||||
}
|
||||
|
||||
public partial class MenuToken : TokenWithCommonCls
|
||||
{
|
||||
public int MenuItemHeight { get; set; }
|
||||
|
||||
public int MenuHorizontalHeight { get; set; }
|
||||
|
||||
public int MenuItemPaddingInline { get; set; }
|
||||
|
||||
public int MenuArrowSize { get; set; }
|
||||
|
||||
public string MenuArrowOffset { get; set; }
|
||||
|
||||
public int MenuPanelMaskInset { get; set; }
|
||||
|
||||
public string MenuSubMenuBg { get; set; }
|
||||
|
||||
}
|
||||
|
||||
public partial class Menu
|
||||
{
|
||||
public CSSObject GenMenuItemStyle(MenuToken token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var fontSize = token.FontSize;
|
||||
var motionDurationSlow = token.MotionDurationSlow;
|
||||
var motionDurationMid = token.MotionDurationMid;
|
||||
var motionEaseInOut = token.MotionEaseInOut;
|
||||
var motionEaseOut = token.MotionEaseOut;
|
||||
var iconCls = token.IconCls;
|
||||
var controlHeightSM = token.ControlHeightSM;
|
||||
return new CSSObject()
|
||||
{
|
||||
[$"{componentCls}-item, {componentCls}-submenu-title"] = new CSSObject()
|
||||
{
|
||||
Position = "relative",
|
||||
Display = "block",
|
||||
Margin = 0,
|
||||
WhiteSpace = "nowrap",
|
||||
Cursor = "pointer",
|
||||
Transition = [
|
||||
`border-color ${motionDurationSlow}`,
|
||||
`background ${motionDurationSlow}`,
|
||||
`padding ${motionDurationSlow} ${motionEaseInOut}`,
|
||||
].join(","),
|
||||
[$"{componentCls}-item-icon, {iconCls}"] = new CSSObject()
|
||||
{
|
||||
MinWidth = fontSize,
|
||||
FontSize = fontSize,
|
||||
Transition = [
|
||||
`font-size ${motionDurationMid} ${motionEaseOut}`,
|
||||
`margin ${motionDurationSlow} ${motionEaseInOut}`,
|
||||
`color ${motionDurationSlow}`,
|
||||
].join(","),
|
||||
["+ span"] = new CSSObject()
|
||||
{
|
||||
MarginInlineStart = controlHeightSM - fontSize,
|
||||
Opacity = 1,
|
||||
Transition = [
|
||||
`opacity ${motionDurationSlow} ${motionEaseInOut}`,
|
||||
`margin ${motionDurationSlow}`,
|
||||
`color ${motionDurationSlow}`,
|
||||
].join(",")
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-item-icon"] = new CSSObject()
|
||||
{
|
||||
["..."] = ResetIcon()
|
||||
},
|
||||
[$"&{componentCls}-item-only-child"] = new CSSObject()
|
||||
{
|
||||
[$"> {iconCls}, > {componentCls}-item-icon"] = new CSSObject()
|
||||
{
|
||||
MarginInlineEnd = 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-item-disabled, {componentCls}-submenu-disabled"] = new CSSObject()
|
||||
{
|
||||
Background = "none !important",
|
||||
Cursor = "not-allowed",
|
||||
["&::after"] = new CSSObject()
|
||||
{
|
||||
BorderColor = "transparent !important",
|
||||
},
|
||||
["a"] = new CSSObject()
|
||||
{
|
||||
Color = "inherit !important",
|
||||
},
|
||||
[$"> {componentCls}-submenu-title"] = new CSSObject()
|
||||
{
|
||||
Color = "inherit !important",
|
||||
Cursor = "not-allowed",
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenSubMenuArrowStyle(MenuToken token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var motionDurationSlow = token.MotionDurationSlow;
|
||||
var motionEaseInOut = token.MotionEaseInOut;
|
||||
var borderRadius = token.BorderRadius;
|
||||
var menuArrowSize = token.MenuArrowSize;
|
||||
var menuArrowOffset = token.MenuArrowOffset;
|
||||
return new CSSObject()
|
||||
{
|
||||
[$"{componentCls}-submenu"] = new CSSObject()
|
||||
{
|
||||
["&-expand-icon, &-arrow"] = new CSSObject()
|
||||
{
|
||||
Position = "absolute",
|
||||
Top = "50%",
|
||||
InsetInlineEnd = token.Margin,
|
||||
Width = menuArrowSize,
|
||||
Color = "currentcolor",
|
||||
Transform = "translateY(-50%)",
|
||||
Transition = @$"transform {motionDurationSlow} {motionEaseInOut}, opacity {motionDurationSlow}",
|
||||
},
|
||||
["&-arrow"] = new CSSObject()
|
||||
{
|
||||
["&::before, &::after"] = new CSSObject()
|
||||
{
|
||||
Position = "absolute",
|
||||
Width = menuArrowSize * 0.6,
|
||||
Height = menuArrowSize * 0.15,
|
||||
BackgroundColor = "currentcolor",
|
||||
BorderRadius = borderRadius,
|
||||
Transition = [
|
||||
`background ${motionDurationSlow} ${motionEaseInOut}`,
|
||||
`transform ${motionDurationSlow} ${motionEaseInOut}`,
|
||||
`top ${motionDurationSlow} ${motionEaseInOut}`,
|
||||
`color ${motionDurationSlow} ${motionEaseInOut}`,
|
||||
].join(","),
|
||||
Content = "\"\"",
|
||||
},
|
||||
["&::before"] = new CSSObject()
|
||||
{
|
||||
Transform = @$"rotate(45deg) translateY(-{menuArrowOffset})",
|
||||
},
|
||||
["&::after"] = new CSSObject()
|
||||
{
|
||||
Transform = @$"rotate(-45deg) translateY({menuArrowOffset})",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_1 GetBaseStyle(Unknown_7 token)
|
||||
{
|
||||
var antCls = token.AntCls;
|
||||
var componentCls = token.ComponentCls;
|
||||
var fontSize = token.FontSize;
|
||||
var motionDurationSlow = token.MotionDurationSlow;
|
||||
var motionDurationMid = token.MotionDurationMid;
|
||||
var motionEaseInOut = token.MotionEaseInOut;
|
||||
var lineHeight = token.LineHeight;
|
||||
var paddingXS = token.PaddingXS;
|
||||
var padding = token.Padding;
|
||||
var colorSplit = token.ColorSplit;
|
||||
var lineWidth = token.LineWidth;
|
||||
var zIndexPopup = token.ZIndexPopup;
|
||||
var borderRadiusLG = token.BorderRadiusLG;
|
||||
var radiusSubMenuItem = token.RadiusSubMenuItem;
|
||||
var menuArrowSize = token.MenuArrowSize;
|
||||
var menuArrowOffset = token.MenuArrowOffset;
|
||||
var lineType = token.LineType;
|
||||
var menuPanelMaskInset = token.MenuPanelMaskInset;
|
||||
return new Unknown_8
|
||||
{
|
||||
new Unknown_9()
|
||||
{
|
||||
[""] = new Unknown_10()
|
||||
{
|
||||
[$"{componentCls}"] = new Unknown_11()
|
||||
{
|
||||
["..."] = ClearFix(),
|
||||
["&-hidden"] = new Unknown_12()
|
||||
{
|
||||
Display = "none",
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-submenu-hidden"] = new Unknown_13()
|
||||
{
|
||||
Display = "none",
|
||||
},
|
||||
},
|
||||
new Unknown_14()
|
||||
{
|
||||
[componentCls] = new Unknown_15()
|
||||
{
|
||||
["..."] = ResetComponent(token),
|
||||
["..."] = ClearFix(),
|
||||
MarginBottom = 0,
|
||||
PaddingInlineStart = 0,
|
||||
FontSize = fontSize,
|
||||
LineHeight = 0,
|
||||
ListStyle = "none",
|
||||
Outline = "none",
|
||||
Transition = @$"width {motionDurationSlow} cubic-bezier(0.2, 0, 0, 1) 0s",
|
||||
["ul, ol"] = new Unknown_16()
|
||||
{
|
||||
Margin = 0,
|
||||
Padding = 0,
|
||||
ListStyle = "none",
|
||||
},
|
||||
["&-overflow"] = new Unknown_17()
|
||||
{
|
||||
Display = "flex",
|
||||
[$"{componentCls}-item"] = new Unknown_18()
|
||||
{
|
||||
Flex = "none",
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-item, {componentCls}-submenu, {componentCls}-submenu-title"] = new Unknown_19()
|
||||
{
|
||||
BorderRadius = token.RadiusItem,
|
||||
},
|
||||
[$"{componentCls}-item-group-title"] = new Unknown_20()
|
||||
{
|
||||
Padding = @$"{paddingXS}px {padding}px",
|
||||
FontSize = fontSize,
|
||||
LineHeight = lineHeight,
|
||||
Transition = @$"all {motionDurationSlow}",
|
||||
},
|
||||
[$"&-horizontal {componentCls}-submenu"] = new Unknown_21()
|
||||
{
|
||||
Transition = [
|
||||
`border-color ${motionDurationSlow} ${motionEaseInOut}`,
|
||||
`background ${motionDurationSlow} ${motionEaseInOut}`,
|
||||
].join(",")
|
||||
},
|
||||
[$"{componentCls}-submenu, {componentCls}-submenu-inline"] = new Unknown_22()
|
||||
{
|
||||
Transition = [
|
||||
`border-color ${motionDurationSlow} ${motionEaseInOut}`,
|
||||
`background ${motionDurationSlow} ${motionEaseInOut}`,
|
||||
`padding ${motionDurationMid} ${motionEaseInOut}`,
|
||||
].join(",")
|
||||
},
|
||||
[$"{componentCls}-submenu {componentCls}-sub"] = new Unknown_23()
|
||||
{
|
||||
Cursor = "initial",
|
||||
Transition = [
|
||||
`background ${motionDurationSlow} ${motionEaseInOut}`,
|
||||
`padding ${motionDurationSlow} ${motionEaseInOut}`,
|
||||
].join(",")
|
||||
},
|
||||
[$"{componentCls}-title-content"] = new Unknown_24()
|
||||
{
|
||||
Transition = @$"color {motionDurationSlow}",
|
||||
},
|
||||
[$"{componentCls}-item a"] = new Unknown_25()
|
||||
{
|
||||
["&::before"] = new Unknown_26()
|
||||
{
|
||||
Position = "absolute",
|
||||
Inset = 0,
|
||||
BackgroundColor = "transparent",
|
||||
Content = "\"\"",
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-item-divider"] = new Unknown_27()
|
||||
{
|
||||
Overflow = "hidden",
|
||||
LineHeight = 0,
|
||||
BorderColor = colorSplit,
|
||||
BorderStyle = lineType,
|
||||
BorderWidth = 0,
|
||||
BorderTopWidth = lineWidth,
|
||||
MarginBlock = lineWidth,
|
||||
Padding = 0,
|
||||
["&-dashed"] = new Unknown_28()
|
||||
{
|
||||
BorderStyle = "dashed",
|
||||
},
|
||||
},
|
||||
["..."] = GenMenuItemStyle(token),
|
||||
[$"{componentCls}-item-group"] = new Unknown_29()
|
||||
{
|
||||
[$"{componentCls}-item-group-list"] = new Unknown_30()
|
||||
{
|
||||
Margin = 0,
|
||||
Padding = 0,
|
||||
[$"{componentCls}-item, {componentCls}-submenu-title"] = new Unknown_31()
|
||||
{
|
||||
PaddingInline = @$"{fontSize * 2}px {padding}px",
|
||||
},
|
||||
},
|
||||
},
|
||||
["&-submenu"] = new Unknown_32()
|
||||
{
|
||||
["&-popup"] = new Unknown_33()
|
||||
{
|
||||
Position = "absolute",
|
||||
ZIndex = zIndexPopup,
|
||||
Background = "transparent",
|
||||
BorderRadius = borderRadiusLG,
|
||||
BoxShadow = "none",
|
||||
TransformOrigin = "0 0",
|
||||
["&::before"] = new Unknown_34()
|
||||
{
|
||||
Position = "absolute",
|
||||
Inset = @$"{menuPanelMaskInset}px 0 0",
|
||||
ZIndex = -1,
|
||||
Width = "100%",
|
||||
Height = "100%",
|
||||
Opacity = 0,
|
||||
Content = "\"\"",
|
||||
},
|
||||
},
|
||||
["&-placement-rightTop::before"] = new Unknown_35()
|
||||
{
|
||||
Top = 0,
|
||||
InsetInlineStart = menuPanelMaskInset,
|
||||
},
|
||||
[$"> {componentCls}"] = new Unknown_36()
|
||||
{
|
||||
BorderRadius = borderRadiusLG,
|
||||
["..."] = GenMenuItemStyle(token),
|
||||
["..."] = GenSubMenuArrowStyle(token),
|
||||
[$"{componentCls}-item, {componentCls}-submenu > {componentCls}-submenu-title"] = new Unknown_37()
|
||||
{
|
||||
BorderRadius = radiusSubMenuItem,
|
||||
},
|
||||
[$"{componentCls}-submenu-title::after"] = new Unknown_38()
|
||||
{
|
||||
Transition = @$"transform {motionDurationSlow} {motionEaseInOut}",
|
||||
},
|
||||
},
|
||||
},
|
||||
["..."] = GenSubMenuArrowStyle(token),
|
||||
[$"&-inline-collapsed{componentCls}-submenu-arrow,&-inline{componentCls}-submenu-arrow"] = new Unknown_39()
|
||||
{
|
||||
["&::before"] = new Unknown_40()
|
||||
{
|
||||
Transform = @$"rotate(-45deg) translateX({menuArrowOffset})",
|
||||
},
|
||||
["&::after"] = new Unknown_41()
|
||||
{
|
||||
Transform = @$"rotate(45deg) translateX(-{menuArrowOffset})",
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-submenu-open{componentCls}-submenu-inline > {componentCls}-submenu-title > {componentCls}-submenu-arrow"] = new Unknown_42()
|
||||
{
|
||||
Transform = @$"translateY(-{menuArrowSize * 0.2}px)",
|
||||
["&::after"] = new Unknown_43()
|
||||
{
|
||||
Transform = @$"rotate(-45deg) translateX(-{menuArrowOffset})",
|
||||
},
|
||||
["&::before"] = new Unknown_44()
|
||||
{
|
||||
Transform = @$"rotate(45deg) translateX({menuArrowOffset})",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
new Unknown_45()
|
||||
{
|
||||
[$"{antCls}-layout-header"] = new Unknown_46()
|
||||
{
|
||||
[componentCls] = new Unknown_47()
|
||||
{
|
||||
LineHeight = "inherit",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_2 GetHorizontalStyle(Unknown_48 token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var motionDurationSlow = token.MotionDurationSlow;
|
||||
var menuHorizontalHeight = token.MenuHorizontalHeight;
|
||||
var colorSplit = token.ColorSplit;
|
||||
var lineWidth = token.LineWidth;
|
||||
var lineType = token.LineType;
|
||||
var menuItemPaddingInline = token.MenuItemPaddingInline;
|
||||
return new Unknown_49()
|
||||
{
|
||||
[$"{componentCls}-horizontal"] = new Unknown_50()
|
||||
{
|
||||
LineHeight = @$"{menuHorizontalHeight}px",
|
||||
Border = 0,
|
||||
BorderBottom = @$"{lineWidth}px {lineType} {colorSplit}",
|
||||
BoxShadow = "none",
|
||||
["&::after"] = new Unknown_51()
|
||||
{
|
||||
Display = "block",
|
||||
Clear = "both",
|
||||
Height = 0,
|
||||
Content = "\"\\20\"",
|
||||
},
|
||||
[$"{componentCls}-item, {componentCls}-submenu"] = new Unknown_52()
|
||||
{
|
||||
Position = "relative",
|
||||
Display = "inline-block",
|
||||
VerticalAlign = "bottom",
|
||||
PaddingInline = menuItemPaddingInline,
|
||||
},
|
||||
[$">{componentCls}-item:hover,>{componentCls}-item-active,>{componentCls}-submenu{componentCls}-submenu-title:hover"] = new Unknown_53()
|
||||
{
|
||||
BackgroundColor = "transparent",
|
||||
},
|
||||
[$"{componentCls}-item, {componentCls}-submenu-title"] = new Unknown_54()
|
||||
{
|
||||
Transition = [`border-color ${motionDurationSlow}`, `background ${motionDurationSlow}`].join(",")
|
||||
},
|
||||
[$"{componentCls}-submenu-arrow"] = new Unknown_55()
|
||||
{
|
||||
Display = "none",
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_3 GetVerticalInlineStyle(Unknown_56 token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var menuItemHeight = token.MenuItemHeight;
|
||||
var itemMarginInline = token.ItemMarginInline;
|
||||
var padding = token.Padding;
|
||||
var menuArrowSize = token.MenuArrowSize;
|
||||
var marginXS = token.MarginXS;
|
||||
var marginXXS = token.MarginXXS;
|
||||
var paddingWithArrow = padding + menuArrowSize + marginXS;
|
||||
return new Unknown_57()
|
||||
{
|
||||
[$"{componentCls}-item"] = new Unknown_58()
|
||||
{
|
||||
Position = "relative",
|
||||
["&:not(:last-child)"] = new Unknown_59()
|
||||
{
|
||||
MarginBottom = marginXS,
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-item, {componentCls}-submenu-title"] = new Unknown_60()
|
||||
{
|
||||
Height = menuItemHeight,
|
||||
LineHeight = @$"{menuItemHeight}px",
|
||||
PaddingInline = padding,
|
||||
Overflow = "hidden",
|
||||
TextOverflow = "ellipsis",
|
||||
MarginInline = itemMarginInline,
|
||||
MarginBlock = marginXXS,
|
||||
Width = @$"calc(100% - {itemMarginInline * 2}px)",
|
||||
},
|
||||
[$"{componentCls}-submenu"] = new Unknown_61()
|
||||
{
|
||||
PaddingBottom = 0.02f,
|
||||
},
|
||||
[$">{componentCls}-item,>{componentCls}-submenu>{componentCls}-submenu-title"] = new Unknown_62()
|
||||
{
|
||||
Height = menuItemHeight,
|
||||
LineHeight = @$"{menuItemHeight}px",
|
||||
},
|
||||
[$"{componentCls}-item-group-list{componentCls}-submenu-title,{componentCls}-submenu-title"] = new Unknown_63()
|
||||
{
|
||||
PaddingInlineEnd = paddingWithArrow,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_4 GetVerticalStyle(Unknown_64 token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var iconCls = token.IconCls;
|
||||
var menuItemHeight = token.MenuItemHeight;
|
||||
var colorTextLightSolid = token.ColorTextLightSolid;
|
||||
var dropdownWidth = token.DropdownWidth;
|
||||
var controlHeightLG = token.ControlHeightLG;
|
||||
var motionDurationMid = token.MotionDurationMid;
|
||||
var motionEaseOut = token.MotionEaseOut;
|
||||
var paddingXL = token.PaddingXL;
|
||||
var fontSizeSM = token.FontSizeSM;
|
||||
var fontSizeLG = token.FontSizeLG;
|
||||
var motionDurationSlow = token.MotionDurationSlow;
|
||||
var paddingXS = token.PaddingXS;
|
||||
var boxShadowSecondary = token.BoxShadowSecondary;
|
||||
var inlineItemStyle = new Unknown_65()
|
||||
{
|
||||
Height = menuItemHeight,
|
||||
LineHeight = @$"{menuItemHeight}px",
|
||||
ListStylePosition = "inside",
|
||||
ListStyleType = "disc",
|
||||
};
|
||||
return new Unknown_66
|
||||
{
|
||||
new Unknown_67()
|
||||
{
|
||||
[componentCls] = new Unknown_68()
|
||||
{
|
||||
["&-inline, &-vertical"] = new Unknown_69()
|
||||
{
|
||||
[$"&{componentCls}-root"] = new Unknown_70()
|
||||
{
|
||||
BoxShadow = "none",
|
||||
},
|
||||
["..."] = GetVerticalInlineStyle(token)
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-submenu-popup"] = new Unknown_71()
|
||||
{
|
||||
[$"{componentCls}-vertical"] = new Unknown_72()
|
||||
{
|
||||
["..."] = GetVerticalInlineStyle(token),
|
||||
BoxShadow = boxShadowSecondary,
|
||||
},
|
||||
},
|
||||
},
|
||||
new Unknown_73()
|
||||
{
|
||||
[$"{componentCls}-submenu-popup {componentCls}-vertical{componentCls}-sub"] = new Unknown_74()
|
||||
{
|
||||
MinWidth = dropdownWidth,
|
||||
MaxHeight = @$"calc(100vh - {controlHeightLG * 2.5}px)",
|
||||
Padding = "0",
|
||||
Overflow = "hidden",
|
||||
BorderInlineEnd = 0,
|
||||
["&:not([class*="-active"])"] = new Unknown_75()
|
||||
{
|
||||
OverflowX = "hidden",
|
||||
OverflowY = "auto",
|
||||
},
|
||||
},
|
||||
},
|
||||
new Unknown_76()
|
||||
{
|
||||
[$"{componentCls}-inline"] = new Unknown_77()
|
||||
{
|
||||
Width = "100%",
|
||||
[$"&{componentCls}-root"] = new Unknown_78()
|
||||
{
|
||||
[$"{componentCls}-item, {componentCls}-submenu-title"] = new Unknown_79()
|
||||
{
|
||||
Display = "flex",
|
||||
AlignItems = "center",
|
||||
Transition = [
|
||||
`border-color ${motionDurationSlow}`,
|
||||
`background ${motionDurationSlow}`,
|
||||
`padding ${motionDurationMid} ${motionEaseOut}`,
|
||||
].join(","),
|
||||
[$"> {componentCls}-title-content"] = new Unknown_80()
|
||||
{
|
||||
Flex = "auto",
|
||||
MinWidth = 0,
|
||||
Overflow = "hidden",
|
||||
TextOverflow = "ellipsis",
|
||||
},
|
||||
["> *"] = new Unknown_81()
|
||||
{
|
||||
Flex = "none",
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-sub{componentCls}-inline"] = new Unknown_82()
|
||||
{
|
||||
Padding = 0,
|
||||
Border = 0,
|
||||
BorderRadius = 0,
|
||||
BoxShadow = "none",
|
||||
[$"& > {componentCls}-submenu > {componentCls}-submenu-title"] = inlineItemStyle,
|
||||
[$"& {componentCls}-item-group-title"] = new Unknown_83()
|
||||
{
|
||||
PaddingInlineStart = paddingXL,
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-item"] = inlineItemStyle,
|
||||
},
|
||||
},
|
||||
new Unknown_84()
|
||||
{
|
||||
[$"{componentCls}-inline-collapsed"] = new Unknown_85()
|
||||
{
|
||||
Width = menuItemHeight * 2,
|
||||
[$"&{componentCls}-root"] = new Unknown_86()
|
||||
{
|
||||
[$"{componentCls}-item, {componentCls}-submenu {componentCls}-submenu-title"] = new Unknown_87()
|
||||
{
|
||||
[$"> {componentCls}-inline-collapsed-noicon"] = new Unknown_88()
|
||||
{
|
||||
FontSize = fontSizeLG,
|
||||
TextAlign = "center",
|
||||
},
|
||||
},
|
||||
},
|
||||
[$">{componentCls}-item,>{componentCls}-item-group>{componentCls}-item-group-list>{componentCls}-item,>{componentCls}-item-group>{componentCls}-item-group-list>{componentCls}-submenu>{componentCls}-submenu-title,>{componentCls}-submenu>{componentCls}-submenu-title"] = new Unknown_89()
|
||||
{
|
||||
InsetInlineStart = 0,
|
||||
PaddingInline = @$"calc(50% - {fontSizeSM}px)",
|
||||
TextOverflow = "clip",
|
||||
[$"{componentCls}-submenu-arrow,{componentCls}-submenu-expand-icon"] = new Unknown_90()
|
||||
{
|
||||
Opacity = 0,
|
||||
},
|
||||
[$"{componentCls}-item-icon, {iconCls}"] = new Unknown_91()
|
||||
{
|
||||
Margin = 0,
|
||||
FontSize = fontSizeLG,
|
||||
LineHeight = @$"{menuItemHeight}px",
|
||||
["+ span"] = new Unknown_92()
|
||||
{
|
||||
Display = "inline-block",
|
||||
Opacity = 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-item-icon, {iconCls}"] = new Unknown_93()
|
||||
{
|
||||
Display = "inline-block",
|
||||
},
|
||||
["&-tooltip"] = new Unknown_94()
|
||||
{
|
||||
PointerEvents = "none",
|
||||
[$"{componentCls}-item-icon, {iconCls}"] = new Unknown_95()
|
||||
{
|
||||
Display = "none",
|
||||
},
|
||||
["a, a:hover"] = new Unknown_96()
|
||||
{
|
||||
Color = colorTextLightSolid,
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-item-group-title"] = new Unknown_97()
|
||||
{
|
||||
["..."] = textEllipsis,
|
||||
PaddingInline = paddingXS,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_5 GetRTLStyle(Unknown_98 args)
|
||||
{
|
||||
return new Unknown_99()
|
||||
{
|
||||
[$"{componentCls}-rtl"] = new Unknown_100()
|
||||
{
|
||||
Direction = "rtl",
|
||||
},
|
||||
[$"{componentCls}-submenu-rtl"] = new Unknown_101()
|
||||
{
|
||||
TransformOrigin = "100% 0",
|
||||
},
|
||||
[$"{componentCls}-rtl{componentCls}-vertical,{componentCls}-submenu-rtl{componentCls}-vertical"] = new Unknown_102()
|
||||
{
|
||||
[$"{componentCls}-submenu-arrow"] = new Unknown_103()
|
||||
{
|
||||
["&::before"] = new Unknown_104()
|
||||
{
|
||||
Transform = @$"rotate(-45deg) translateY(-{menuArrowOffset})",
|
||||
},
|
||||
["&::after"] = new Unknown_105()
|
||||
{
|
||||
Transform = @$"rotate(45deg) translateY({menuArrowOffset})",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_6 AccessibilityFocus(MenuToken token)
|
||||
{
|
||||
return new Unknown_106()
|
||||
{
|
||||
["..."] = GenFocusOutline(token)
|
||||
};
|
||||
}
|
||||
|
||||
public CSSInterpolation GetThemeStyle(MenuToken token, string themeSuffix)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var colorItemText = token.ColorItemText;
|
||||
var colorItemTextSelected = token.ColorItemTextSelected;
|
||||
var colorGroupTitle = token.ColorGroupTitle;
|
||||
var colorItemBg = token.ColorItemBg;
|
||||
var colorSubItemBg = token.ColorSubItemBg;
|
||||
var colorItemBgSelected = token.ColorItemBgSelected;
|
||||
var colorActiveBarHeight = token.ColorActiveBarHeight;
|
||||
var colorActiveBarWidth = token.ColorActiveBarWidth;
|
||||
var colorActiveBarBorderSize = token.ColorActiveBarBorderSize;
|
||||
var motionDurationSlow = token.MotionDurationSlow;
|
||||
var motionEaseInOut = token.MotionEaseInOut;
|
||||
var motionEaseOut = token.MotionEaseOut;
|
||||
var menuItemPaddingInline = token.MenuItemPaddingInline;
|
||||
var motionDurationMid = token.MotionDurationMid;
|
||||
var colorItemTextHover = token.ColorItemTextHover;
|
||||
var lineType = token.LineType;
|
||||
var colorSplit = token.ColorSplit;
|
||||
var colorItemTextDisabled = token.ColorItemTextDisabled;
|
||||
var colorDangerItemText = token.ColorDangerItemText;
|
||||
var colorDangerItemTextHover = token.ColorDangerItemTextHover;
|
||||
var colorDangerItemTextSelected = token.ColorDangerItemTextSelected;
|
||||
var colorDangerItemBgActive = token.ColorDangerItemBgActive;
|
||||
var colorDangerItemBgSelected = token.ColorDangerItemBgSelected;
|
||||
var colorItemBgHover = token.ColorItemBgHover;
|
||||
var menuSubMenuBg = token.MenuSubMenuBg;
|
||||
var colorItemTextSelectedHorizontal = token.ColorItemTextSelectedHorizontal;
|
||||
var colorItemBgSelectedHorizontal = token.ColorItemBgSelectedHorizontal;
|
||||
return new CSSInterpolation()
|
||||
{
|
||||
[$"{componentCls}-{themeSuffix}, {componentCls}-{themeSuffix} > {componentCls}"] = new CSSInterpolation()
|
||||
{
|
||||
Color = colorItemText,
|
||||
Background = colorItemBg,
|
||||
[$"&{componentCls}-root:focus-visible"] = new CSSInterpolation()
|
||||
{
|
||||
["..."] = AccessibilityFocus(token)
|
||||
},
|
||||
[$"{componentCls}-item-group-title"] = new CSSInterpolation()
|
||||
{
|
||||
Color = colorGroupTitle,
|
||||
},
|
||||
[$"{componentCls}-submenu-selected"] = new CSSInterpolation()
|
||||
{
|
||||
[$"> {componentCls}-submenu-title"] = new CSSInterpolation()
|
||||
{
|
||||
Color = colorItemTextSelected,
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-item-disabled, {componentCls}-submenu-disabled"] = new CSSInterpolation()
|
||||
{
|
||||
Color = @$"{colorItemTextDisabled} !important",
|
||||
},
|
||||
[$"{componentCls}-item:hover, {componentCls}-submenu-title:hover"] = new CSSInterpolation()
|
||||
{
|
||||
[$"&:not({componentCls}-item-selected):not({componentCls}-submenu-selected)"] = new CSSInterpolation()
|
||||
{
|
||||
Color = colorItemTextHover,
|
||||
},
|
||||
},
|
||||
[$"&:not({componentCls}-horizontal)"] = new CSSInterpolation()
|
||||
{
|
||||
[$"{componentCls}-item:not({componentCls}-item-selected)"] = new CSSInterpolation()
|
||||
{
|
||||
["&:hover"] = new CSSInterpolation()
|
||||
{
|
||||
BackgroundColor = colorItemBgHover,
|
||||
},
|
||||
["&:active"] = new CSSInterpolation()
|
||||
{
|
||||
BackgroundColor = colorItemBgSelected,
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-submenu-title"] = new CSSInterpolation()
|
||||
{
|
||||
["&:hover"] = new CSSInterpolation()
|
||||
{
|
||||
BackgroundColor = colorItemBgHover,
|
||||
},
|
||||
["&:active"] = new CSSInterpolation()
|
||||
{
|
||||
BackgroundColor = colorItemBgSelected,
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-item-danger"] = new CSSInterpolation()
|
||||
{
|
||||
Color = colorDangerItemText,
|
||||
[$"&{componentCls}-item:hover"] = new CSSInterpolation()
|
||||
{
|
||||
[$"&:not({componentCls}-item-selected):not({componentCls}-submenu-selected)"] = new CSSInterpolation()
|
||||
{
|
||||
Color = colorDangerItemTextHover,
|
||||
},
|
||||
},
|
||||
[$"&{componentCls}-item:active"] = new CSSInterpolation()
|
||||
{
|
||||
Background = colorDangerItemBgActive,
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-item a"] = new CSSInterpolation()
|
||||
{
|
||||
["&, &:hover"] = new CSSInterpolation()
|
||||
{
|
||||
Color = "inherit",
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-item-selected"] = new CSSInterpolation()
|
||||
{
|
||||
Color = colorItemTextSelected,
|
||||
[$"&{componentCls}-item-danger"] = new CSSInterpolation()
|
||||
{
|
||||
Color = colorDangerItemTextSelected,
|
||||
},
|
||||
["a, a:hover"] = new CSSInterpolation()
|
||||
{
|
||||
Color = "inherit",
|
||||
},
|
||||
},
|
||||
[$"& {componentCls}-item-selected"] = new CSSInterpolation()
|
||||
{
|
||||
BackgroundColor = colorItemBgSelected,
|
||||
[$"&{componentCls}-item-danger"] = new CSSInterpolation()
|
||||
{
|
||||
BackgroundColor = colorDangerItemBgSelected,
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-item, {componentCls}-submenu-title"] = new CSSInterpolation()
|
||||
{
|
||||
[$"&:not({componentCls}-item-disabled):focus-visible"] = new CSSInterpolation()
|
||||
{
|
||||
["..."] = AccessibilityFocus(token)
|
||||
},
|
||||
},
|
||||
[$"&{componentCls}-submenu > {componentCls}"] = new CSSInterpolation()
|
||||
{
|
||||
BackgroundColor = menuSubMenuBg,
|
||||
},
|
||||
[$"&{componentCls}-popup > {componentCls}"] = new CSSInterpolation()
|
||||
{
|
||||
BackgroundColor = colorItemBg,
|
||||
},
|
||||
[$"&{componentCls}-horizontal"] = new CSSInterpolation()
|
||||
{
|
||||
["..."] = (themeSuffix === "dark"
|
||||
? {
|
||||
borderBottom: 0,
|
||||
}
|
||||
: {}),
|
||||
[$"> {componentCls}-item, > {componentCls}-submenu"] = new CSSInterpolation()
|
||||
{
|
||||
Top = colorActiveBarBorderSize,
|
||||
MarginTop = -colorActiveBarBorderSize,
|
||||
MarginBottom = 0,
|
||||
BorderRadius = 0,
|
||||
["&::after"] = new CSSInterpolation()
|
||||
{
|
||||
Position = "absolute",
|
||||
InsetInline = menuItemPaddingInline,
|
||||
Bottom = 0,
|
||||
BorderBottom = @$"{colorActiveBarHeight}px solid transparent",
|
||||
Transition = @$"border-color {motionDurationSlow} {motionEaseInOut}",
|
||||
Content = "\"\"",
|
||||
},
|
||||
["&:hover, &-active, &-open"] = new CSSInterpolation()
|
||||
{
|
||||
["&::after"] = new CSSInterpolation()
|
||||
{
|
||||
BorderBottomWidth = colorActiveBarHeight,
|
||||
BorderBottomColor = colorItemTextSelectedHorizontal,
|
||||
},
|
||||
},
|
||||
["&-selected"] = new CSSInterpolation()
|
||||
{
|
||||
Color = colorItemTextSelectedHorizontal,
|
||||
BackgroundColor = colorItemBgSelectedHorizontal,
|
||||
["&::after"] = new CSSInterpolation()
|
||||
{
|
||||
BorderBottomWidth = colorActiveBarHeight,
|
||||
BorderBottomColor = colorItemTextSelectedHorizontal,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"&{componentCls}-root"] = new CSSInterpolation()
|
||||
{
|
||||
[$"&{componentCls}-inline, &{componentCls}-vertical"] = new CSSInterpolation()
|
||||
{
|
||||
BorderInlineEnd = @$"{colorActiveBarBorderSize}px {lineType} {colorSplit}",
|
||||
},
|
||||
},
|
||||
[$"&{componentCls}-inline"] = new CSSInterpolation()
|
||||
{
|
||||
[$"{componentCls}-sub{componentCls}-inline"] = new CSSInterpolation()
|
||||
{
|
||||
Background = colorSubItemBg,
|
||||
},
|
||||
[$"{componentCls}-item, {componentCls}-submenu-title"] = ColorActiveBarBorderSize && colorActiveBarWidth
|
||||
? {
|
||||
width: @$"calc(100% + {colorActiveBarBorderSize}px)",
|
||||
}
|
||||
: {},
|
||||
[$"{componentCls}-item"] = new CSSInterpolation()
|
||||
{
|
||||
Position = "relative",
|
||||
["&::after"] = new CSSInterpolation()
|
||||
{
|
||||
Position = "absolute",
|
||||
InsetBlock = 0,
|
||||
InsetInlineEnd = 0,
|
||||
BorderInlineEnd = @$"{colorActiveBarWidth}px solid {colorItemTextSelected}",
|
||||
Transform = "scaleY(0.0001)",
|
||||
Opacity = 0,
|
||||
Transition = [
|
||||
`transform ${motionDurationMid} ${motionEaseOut}`,
|
||||
`opacity ${motionDurationMid} ${motionEaseOut}`,
|
||||
].join(","),
|
||||
Content = "\"\"",
|
||||
},
|
||||
[$"&{componentCls}-item-danger"] = new CSSInterpolation()
|
||||
{
|
||||
["&::after"] = new CSSInterpolation()
|
||||
{
|
||||
BorderInlineEndColor = colorDangerItemTextSelected,
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-selected, {componentCls}-item-selected"] = new CSSInterpolation()
|
||||
{
|
||||
["&::after"] = new CSSInterpolation()
|
||||
{
|
||||
Transform = "scaleY(1)",
|
||||
Opacity = 1,
|
||||
Transition = [
|
||||
`transform ${motionDurationMid} ${motionEaseInOut}`,
|
||||
`opacity ${motionDurationMid} ${motionEaseInOut}`,
|
||||
].join(",")
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,203 @@
|
|||
using System;
|
||||
using CssInCs;
|
||||
using static AntDesign.GlobalStyle;
|
||||
using static AntDesign.Theme;
|
||||
|
||||
namespace AntDesign
|
||||
{
|
||||
public partial class MessageToken
|
||||
{
|
||||
public int ZIndexPopup { get; set; }
|
||||
|
||||
public string ContentBg { get; set; }
|
||||
|
||||
public CSSProperties ContentPadding { get; set; }
|
||||
|
||||
}
|
||||
|
||||
public partial class MessageToken : TokenWithCommonCls
|
||||
{
|
||||
public int Height { get; set; }
|
||||
|
||||
}
|
||||
|
||||
public partial class Message
|
||||
{
|
||||
public Unknown_1 GenMessageStyle(Unknown_4 token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var iconCls = token.IconCls;
|
||||
var boxShadow = token.BoxShadow;
|
||||
var colorText = token.ColorText;
|
||||
var colorSuccess = token.ColorSuccess;
|
||||
var colorError = token.ColorError;
|
||||
var colorWarning = token.ColorWarning;
|
||||
var colorInfo = token.ColorInfo;
|
||||
var fontSizeLG = token.FontSizeLG;
|
||||
var motionEaseInOutCirc = token.MotionEaseInOutCirc;
|
||||
var motionDurationSlow = token.MotionDurationSlow;
|
||||
var marginXS = token.MarginXS;
|
||||
var paddingXS = token.PaddingXS;
|
||||
var borderRadiusLG = token.BorderRadiusLG;
|
||||
var zIndexPopup = token.ZIndexPopup;
|
||||
var contentPadding = token.ContentPadding;
|
||||
var contentBg = token.ContentBg;
|
||||
var noticeCls = @$"{componentCls}-notice";
|
||||
var messageMoveIn = New Keyframes("MessageMoveIn", {
|
||||
"0%": {
|
||||
padding: 0,
|
||||
transform: "translateY(-100%)",
|
||||
opacity: 0,
|
||||
},
|
||||
|
||||
"100%": {
|
||||
padding: paddingXS,
|
||||
transform: "translateY(0)",
|
||||
opacity: 1,
|
||||
},
|
||||
});
|
||||
var messageMoveOut = new Keyframes("MessageMoveOut", {
|
||||
"0%": {
|
||||
maxHeight: token.Height,
|
||||
padding: paddingXS,
|
||||
opacity: 1,
|
||||
},
|
||||
"100%": {
|
||||
maxHeight: 0,
|
||||
padding: 0,
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
var noticeStyle = new Unknown_5()
|
||||
{
|
||||
Padding = paddingXS,
|
||||
TextAlign = "center",
|
||||
[$"{componentCls}-custom-content > {iconCls}"] = new Unknown_6()
|
||||
{
|
||||
VerticalAlign = "text-bottom",
|
||||
MarginInlineEnd = marginXS,
|
||||
FontSize = fontSizeLG,
|
||||
},
|
||||
[$"{noticeCls}-content"] = new Unknown_7()
|
||||
{
|
||||
Display = "inline-block",
|
||||
Padding = contentPadding,
|
||||
Background = contentBg,
|
||||
BorderRadius = borderRadiusLG,
|
||||
BoxShadow = boxShadow,
|
||||
PointerEvents = "all",
|
||||
},
|
||||
[$"{componentCls}-success > {iconCls}"] = new Unknown_8()
|
||||
{
|
||||
Color = colorSuccess,
|
||||
},
|
||||
[$"{componentCls}-error > {iconCls}"] = new Unknown_9()
|
||||
{
|
||||
Color = colorError,
|
||||
},
|
||||
[$"{componentCls}-warning > {iconCls}"] = new Unknown_10()
|
||||
{
|
||||
Color = colorWarning,
|
||||
},
|
||||
[$"{componentCls}-info>{iconCls},{componentCls}-loading>{iconCls}"] = new Unknown_11()
|
||||
{
|
||||
Color = colorInfo,
|
||||
},
|
||||
};
|
||||
return new Unknown_12
|
||||
{
|
||||
new Unknown_13()
|
||||
{
|
||||
[componentCls] = new Unknown_14()
|
||||
{
|
||||
["..."] = ResetComponent(token),
|
||||
Color = colorText,
|
||||
Position = "fixed",
|
||||
Top = marginXS,
|
||||
Width = "100%",
|
||||
PointerEvents = "none",
|
||||
ZIndex = zIndexPopup,
|
||||
[$"{componentCls}-move-up"] = new Unknown_15()
|
||||
{
|
||||
AnimationFillMode = "forwards",
|
||||
},
|
||||
[$"{componentCls}-move-up-appear,{componentCls}-move-up-enter"] = new Unknown_16()
|
||||
{
|
||||
AnimationName = messageMoveIn,
|
||||
AnimationDuration = motionDurationSlow,
|
||||
AnimationPlayState = "paused",
|
||||
AnimationTimingFunction = motionEaseInOutCirc,
|
||||
},
|
||||
[$"{componentCls}-move-up-appear{componentCls}-move-up-appear-active,{componentCls}-move-up-enter{componentCls}-move-up-enter-active"] = new Unknown_17()
|
||||
{
|
||||
AnimationPlayState = "running",
|
||||
},
|
||||
[$"{componentCls}-move-up-leave"] = new Unknown_18()
|
||||
{
|
||||
AnimationName = messageMoveOut,
|
||||
AnimationDuration = motionDurationSlow,
|
||||
AnimationPlayState = "paused",
|
||||
AnimationTimingFunction = motionEaseInOutCirc,
|
||||
},
|
||||
[$"{componentCls}-move-up-leave{componentCls}-move-up-leave-active"] = new Unknown_19()
|
||||
{
|
||||
AnimationPlayState = "running",
|
||||
},
|
||||
["&-rtl"] = new Unknown_20()
|
||||
{
|
||||
Direction = "rtl",
|
||||
Span = new Unknown_21()
|
||||
{
|
||||
Direction = "rtl",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
new Unknown_22()
|
||||
{
|
||||
[componentCls] = new Unknown_23()
|
||||
{
|
||||
[noticeCls] = new Unknown_24()
|
||||
{
|
||||
["..."] = noticeStyle,
|
||||
},
|
||||
},
|
||||
},
|
||||
new Unknown_25()
|
||||
{
|
||||
[$"{componentCls}-notice-pure-panel"] = new Unknown_26()
|
||||
{
|
||||
["..."] = noticeStyle,
|
||||
Padding = 0,
|
||||
TextAlign = "start",
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_2 GenComponentStyleHook(Unknown_27 token)
|
||||
{
|
||||
var combinedToken = MergeToken(
|
||||
token,
|
||||
new Unknown_28()
|
||||
{
|
||||
Height = 150,
|
||||
});
|
||||
return new Unknown_29 { GenMessageStyle(combinedToken) };
|
||||
}
|
||||
|
||||
public Unknown_3 GenComponentStyleHook(Unknown_30 token)
|
||||
{
|
||||
return new Unknown_31()
|
||||
{
|
||||
ZIndexPopup = token.ZIndexPopupBase + 10,
|
||||
ContentBg = token.ColorBgElevated,
|
||||
ContentPadding = @$"{(token.ControlHeightLG - token.FontSize * token.LineHeight) / 2}px {
|
||||
token.PaddingSM
|
||||
}px",
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,522 @@
|
|||
using System;
|
||||
using CssInCs;
|
||||
using static AntDesign.GlobalStyle;
|
||||
using static AntDesign.Theme;
|
||||
|
||||
namespace AntDesign
|
||||
{
|
||||
public partial class ModalToken
|
||||
{
|
||||
public string HeaderBg { get; set; }
|
||||
|
||||
public int TitleLineHeight { get; set; }
|
||||
|
||||
public int TitleFontSize { get; set; }
|
||||
|
||||
public string TitleColor { get; set; }
|
||||
|
||||
public string ContentBg { get; set; }
|
||||
|
||||
public string FooterBg { get; set; }
|
||||
|
||||
}
|
||||
|
||||
public partial class ModalToken : TokenWithCommonCls
|
||||
{
|
||||
public int ModalHeaderHeight { get; set; }
|
||||
|
||||
public int ModalBodyPadding { get; set; }
|
||||
|
||||
public string ModalHeaderPadding { get; set; }
|
||||
|
||||
public int ModalHeaderBorderWidth { get; set; }
|
||||
|
||||
public string ModalHeaderBorderStyle { get; set; }
|
||||
|
||||
public string ModalHeaderBorderColorSplit { get; set; }
|
||||
|
||||
public string ModalFooterBorderColorSplit { get; set; }
|
||||
|
||||
public string ModalFooterBorderStyle { get; set; }
|
||||
|
||||
public int ModalFooterPaddingVertical { get; set; }
|
||||
|
||||
public int ModalFooterPaddingHorizontal { get; set; }
|
||||
|
||||
public int ModalFooterBorderWidth { get; set; }
|
||||
|
||||
public string ModalIconHoverColor { get; set; }
|
||||
|
||||
public string ModalCloseIconColor { get; set; }
|
||||
|
||||
public int ModalCloseBtnSize { get; set; }
|
||||
|
||||
public int ModalConfirmIconSize { get; set; }
|
||||
|
||||
}
|
||||
|
||||
public partial class Modal
|
||||
{
|
||||
public React.CSSProperties Box(React.CSSProperties['position'] position)
|
||||
{
|
||||
return new React.CSSProperties()
|
||||
{
|
||||
Position = position,
|
||||
Top = 0,
|
||||
InsetInlineEnd = 0,
|
||||
Bottom = 0,
|
||||
InsetInlineStart = 0,
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_1 GenModalMaskStyle(Unknown_8 token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var antCls = token.AntCls;
|
||||
return new Unknown_9
|
||||
{
|
||||
new Unknown_10()
|
||||
{
|
||||
[$"{componentCls}-root"] = new Unknown_11()
|
||||
{
|
||||
[$"{componentCls}{antCls}-zoom-enter, {componentCls}{antCls}-zoom-appear"] = new Unknown_12()
|
||||
{
|
||||
Transform = "none",
|
||||
Opacity = 0,
|
||||
AnimationDuration = token.MotionDurationSlow,
|
||||
UserSelect = "none",
|
||||
},
|
||||
[$"{componentCls}{antCls}-zoom-leave {componentCls}-content"] = new Unknown_13()
|
||||
{
|
||||
PointerEvents = "none",
|
||||
},
|
||||
[$"{componentCls}-mask"] = new Unknown_14()
|
||||
{
|
||||
["..."] = Box("fixed"),
|
||||
ZIndex = token.ZIndexPopupBase,
|
||||
Height = "100%",
|
||||
BackgroundColor = token.ColorBgMask,
|
||||
[$"{componentCls}-hidden"] = new Unknown_15()
|
||||
{
|
||||
Display = "none",
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-wrap"] = new Unknown_16()
|
||||
{
|
||||
["..."] = Box("fixed"),
|
||||
Overflow = "auto",
|
||||
Outline = 0,
|
||||
WebkitOverflowScrolling = "touch",
|
||||
},
|
||||
},
|
||||
},
|
||||
new Unknown_17()
|
||||
{
|
||||
[$"{componentCls}-root"] = InitFadeMotion(token)
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_2 GenModalStyle(Unknown_18 token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
return new Unknown_19
|
||||
{
|
||||
new Unknown_20()
|
||||
{
|
||||
[$"{componentCls}-root"] = new Unknown_21()
|
||||
{
|
||||
[$"{componentCls}-wrap"] = new Unknown_22()
|
||||
{
|
||||
ZIndex = token.ZIndexPopupBase,
|
||||
Position = "fixed",
|
||||
Inset = 0,
|
||||
Overflow = "auto",
|
||||
Outline = 0,
|
||||
WebkitOverflowScrolling = "touch",
|
||||
},
|
||||
[$"{componentCls}-wrap-rtl"] = new Unknown_23()
|
||||
{
|
||||
Direction = "rtl",
|
||||
},
|
||||
[$"{componentCls}-centered"] = new Unknown_24()
|
||||
{
|
||||
TextAlign = "center",
|
||||
["&::before"] = new Unknown_25()
|
||||
{
|
||||
Display = "inline-block",
|
||||
Width = 0,
|
||||
Height = "100%",
|
||||
VerticalAlign = "middle",
|
||||
Content = "\"\"",
|
||||
},
|
||||
[componentCls] = new Unknown_26()
|
||||
{
|
||||
Top = 0,
|
||||
Display = "inline-block",
|
||||
PaddingBottom = 0,
|
||||
TextAlign = "start",
|
||||
VerticalAlign = "middle",
|
||||
},
|
||||
},
|
||||
[$"@media (max-width: {token.ScreenSMMax})"] = new Unknown_27()
|
||||
{
|
||||
[componentCls] = new Unknown_28()
|
||||
{
|
||||
MaxWidth = "calc(100vw - 16px)",
|
||||
Margin = @$"{token.MarginXS} auto",
|
||||
},
|
||||
[$"{componentCls}-centered"] = new Unknown_29()
|
||||
{
|
||||
[componentCls] = new Unknown_30()
|
||||
{
|
||||
Flex = 1,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
new Unknown_31()
|
||||
{
|
||||
[componentCls] = new Unknown_32()
|
||||
{
|
||||
["..."] = ResetComponent(token),
|
||||
PointerEvents = "none",
|
||||
Position = "relative",
|
||||
Top = 100,
|
||||
Width = "auto",
|
||||
MaxWidth = @$"calc(100vw - {token.Margin * 2}px)",
|
||||
Margin = "0 auto",
|
||||
PaddingBottom = token.PaddingLG,
|
||||
[$"{componentCls}-title"] = new Unknown_33()
|
||||
{
|
||||
Margin = 0,
|
||||
Color = token.TitleColor,
|
||||
FontWeight = token.FontWeightStrong,
|
||||
FontSize = token.TitleFontSize,
|
||||
LineHeight = token.TitleLineHeight,
|
||||
WordWrap = "break-word",
|
||||
},
|
||||
[$"{componentCls}-content"] = new Unknown_34()
|
||||
{
|
||||
Position = "relative",
|
||||
BackgroundColor = token.ContentBg,
|
||||
BackgroundClip = "padding-box",
|
||||
Border = 0,
|
||||
BorderRadius = token.BorderRadiusLG,
|
||||
BoxShadow = token.BoxShadow,
|
||||
PointerEvents = "auto",
|
||||
Padding = @$"{token.PaddingMD}px {token.PaddingContentHorizontalLG}px",
|
||||
},
|
||||
[$"{componentCls}-close"] = new Unknown_35()
|
||||
{
|
||||
Position = "absolute",
|
||||
Top = (token.ModalHeaderHeight - token.ModalCloseBtnSize) / 2,
|
||||
InsetInlineEnd = (token.ModalHeaderHeight - token.ModalCloseBtnSize) / 2,
|
||||
ZIndex = token.ZIndexPopupBase + 10,
|
||||
Padding = 0,
|
||||
Color = token.ModalCloseIconColor,
|
||||
FontWeight = token.FontWeightStrong,
|
||||
LineHeight = 1,
|
||||
TextDecoration = "none",
|
||||
Background = "transparent",
|
||||
BorderRadius = token.BorderRadiusSM,
|
||||
Width = token.ModalCloseBtnSize,
|
||||
Height = token.ModalCloseBtnSize,
|
||||
Border = 0,
|
||||
Outline = 0,
|
||||
Cursor = "pointer",
|
||||
Transition = @$"color {token.MotionDurationMid}, background-color {token.MotionDurationMid}",
|
||||
["&-x"] = new Unknown_36()
|
||||
{
|
||||
Display = "flex",
|
||||
FontSize = token.FontSizeLG,
|
||||
FontStyle = "normal",
|
||||
LineHeight = @$"{token.ModalCloseBtnSize}px",
|
||||
JustifyContent = "center",
|
||||
TextTransform = "none",
|
||||
TextRendering = "auto",
|
||||
},
|
||||
["&:hover"] = new Unknown_37()
|
||||
{
|
||||
Color = token.ModalIconHoverColor,
|
||||
BackgroundColor = token.Wireframe ? "transparent" : token.ColorFillContent,
|
||||
TextDecoration = "none",
|
||||
},
|
||||
["&:active"] = new Unknown_38()
|
||||
{
|
||||
BackgroundColor = token.Wireframe ? "transparent" : token.ColorFillContentHover,
|
||||
},
|
||||
["..."] = GenFocusStyle(token)
|
||||
},
|
||||
[$"{componentCls}-header"] = new Unknown_39()
|
||||
{
|
||||
Color = token.ColorText,
|
||||
Background = token.HeaderBg,
|
||||
BorderRadius = @$"{token.BorderRadiusLG}px {token.BorderRadiusLG}px 0 0",
|
||||
MarginBottom = token.MarginXS,
|
||||
},
|
||||
[$"{componentCls}-body"] = new Unknown_40()
|
||||
{
|
||||
FontSize = token.FontSize,
|
||||
LineHeight = token.LineHeight,
|
||||
WordWrap = "break-word",
|
||||
},
|
||||
[$"{componentCls}-footer"] = new Unknown_41()
|
||||
{
|
||||
TextAlign = "end",
|
||||
Background = token.FooterBg,
|
||||
MarginTop = token.MarginSM,
|
||||
[$"{token.AntCls}-btn + {token.AntCls}-btn:not({token.AntCls}-dropdown-trigger)"] = new Unknown_42()
|
||||
{
|
||||
MarginBottom = 0,
|
||||
MarginInlineStart = token.MarginXS,
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-open"] = new Unknown_43()
|
||||
{
|
||||
Overflow = "hidden",
|
||||
},
|
||||
},
|
||||
},
|
||||
new Unknown_44()
|
||||
{
|
||||
[$"{componentCls}-pure-panel"] = new Unknown_45()
|
||||
{
|
||||
Top = "auto",
|
||||
Padding = 0,
|
||||
Display = "flex",
|
||||
FlexDirection = "column",
|
||||
[$"{componentCls}-content,{componentCls}-body,{componentCls}-confirm-body-wrapper"] = new Unknown_46()
|
||||
{
|
||||
Display = "flex",
|
||||
FlexDirection = "column",
|
||||
Flex = "auto",
|
||||
},
|
||||
[$"{componentCls}-confirm-body"] = new Unknown_47()
|
||||
{
|
||||
MarginBottom = "auto",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_3 GenModalConfirmStyle(Unknown_48 token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var confirmComponentCls = @$"{componentCls}-confirm";
|
||||
return new Unknown_49()
|
||||
{
|
||||
[confirmComponentCls] = new Unknown_50()
|
||||
{
|
||||
["&-rtl"] = new Unknown_51()
|
||||
{
|
||||
Direction = "rtl",
|
||||
},
|
||||
[$"{token.AntCls}-modal-header"] = new Unknown_52()
|
||||
{
|
||||
Display = "none",
|
||||
},
|
||||
[$"{confirmComponentCls}-body-wrapper"] = new Unknown_53()
|
||||
{
|
||||
["..."] = ClearFix()
|
||||
},
|
||||
[$"{confirmComponentCls}-body"] = new Unknown_54()
|
||||
{
|
||||
Display = "flex",
|
||||
FlexWrap = "wrap",
|
||||
AlignItems = "center",
|
||||
[$"{confirmComponentCls}-title"] = new Unknown_55()
|
||||
{
|
||||
Flex = "0 0 100%",
|
||||
Display = "block",
|
||||
Overflow = "hidden",
|
||||
Color = token.ColorTextHeading,
|
||||
FontWeight = token.FontWeightStrong,
|
||||
FontSize = token.TitleFontSize,
|
||||
LineHeight = token.TitleLineHeight,
|
||||
[$"+ {confirmComponentCls}-content"] = new Unknown_56()
|
||||
{
|
||||
MarginBlockStart = token.MarginXS,
|
||||
FlexBasis = "100%",
|
||||
MaxWidth = @$"calc(100% - {token.ModalConfirmIconSize + token.MarginSM}px)",
|
||||
},
|
||||
},
|
||||
[$"{confirmComponentCls}-content"] = new Unknown_57()
|
||||
{
|
||||
Color = token.ColorText,
|
||||
FontSize = token.FontSize,
|
||||
},
|
||||
[$"> {token.IconCls}"] = new Unknown_58()
|
||||
{
|
||||
Flex = "none",
|
||||
MarginInlineEnd = token.MarginSM,
|
||||
FontSize = token.ModalConfirmIconSize,
|
||||
[$"+ {confirmComponentCls}-title"] = new Unknown_59()
|
||||
{
|
||||
Flex = 1,
|
||||
},
|
||||
[$"+ {confirmComponentCls}-title + {confirmComponentCls}-content"] = new Unknown_60()
|
||||
{
|
||||
MarginInlineStart = token.ModalConfirmIconSize + token.MarginSM,
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"{confirmComponentCls}-btns"] = new Unknown_61()
|
||||
{
|
||||
TextAlign = "end",
|
||||
MarginTop = token.MarginSM,
|
||||
[$"{token.AntCls}-btn + {token.AntCls}-btn"] = new Unknown_62()
|
||||
{
|
||||
MarginBottom = 0,
|
||||
MarginInlineStart = token.MarginXS,
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"{confirmComponentCls}-error {confirmComponentCls}-body > {token.IconCls}"] = new Unknown_63()
|
||||
{
|
||||
Color = token.ColorError,
|
||||
},
|
||||
[$"{confirmComponentCls}-warning{confirmComponentCls}-body>{token.IconCls},{confirmComponentCls}-confirm{confirmComponentCls}-body>{token.IconCls}"] = new Unknown_64()
|
||||
{
|
||||
Color = token.ColorWarning,
|
||||
},
|
||||
[$"{confirmComponentCls}-info {confirmComponentCls}-body > {token.IconCls}"] = new Unknown_65()
|
||||
{
|
||||
Color = token.ColorInfo,
|
||||
},
|
||||
[$"{confirmComponentCls}-success {confirmComponentCls}-body > {token.IconCls}"] = new Unknown_66()
|
||||
{
|
||||
Color = token.ColorSuccess,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_4 GenRTLStyle(Unknown_67 token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
return new Unknown_68()
|
||||
{
|
||||
[$"{componentCls}-root"] = new Unknown_69()
|
||||
{
|
||||
[$"{componentCls}-wrap-rtl"] = new Unknown_70()
|
||||
{
|
||||
Direction = "rtl",
|
||||
[$"{componentCls}-confirm-body"] = new Unknown_71()
|
||||
{
|
||||
Direction = "rtl",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_5 GenWireframeStyle(Unknown_72 token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var antCls = token.AntCls;
|
||||
var confirmComponentCls = @$"{componentCls}-confirm";
|
||||
return new Unknown_73()
|
||||
{
|
||||
[componentCls] = new Unknown_74()
|
||||
{
|
||||
[$"{componentCls}-content"] = new Unknown_75()
|
||||
{
|
||||
Padding = 0,
|
||||
},
|
||||
[$"{componentCls}-header"] = new Unknown_76()
|
||||
{
|
||||
Padding = token.ModalHeaderPadding,
|
||||
BorderBottom = @$"{token.ModalHeaderBorderWidth}px {token.ModalHeaderBorderStyle} {token.ModalHeaderBorderColorSplit}",
|
||||
MarginBottom = 0,
|
||||
},
|
||||
[$"{componentCls}-body"] = new Unknown_77()
|
||||
{
|
||||
Padding = token.ModalBodyPadding,
|
||||
},
|
||||
[$"{componentCls}-footer"] = new Unknown_78()
|
||||
{
|
||||
Padding = @$"{token.ModalFooterPaddingVertical}px {token.ModalFooterPaddingHorizontal}px",
|
||||
BorderTop = @$"{token.ModalFooterBorderWidth}px {token.ModalFooterBorderStyle} {token.ModalFooterBorderColorSplit}",
|
||||
BorderRadius = @$"0 0 {token.BorderRadiusLG}px {token.BorderRadiusLG}px",
|
||||
MarginTop = 0,
|
||||
},
|
||||
},
|
||||
[confirmComponentCls] = new Unknown_79()
|
||||
{
|
||||
[$"{antCls}-modal-body"] = new Unknown_80()
|
||||
{
|
||||
Padding = @$"{token.Padding * 2}px {token.Padding * 2}px {token.PaddingLG}px",
|
||||
},
|
||||
[$"{confirmComponentCls}-body"] = new Unknown_81()
|
||||
{
|
||||
[$"> {token.IconCls}"] = new Unknown_82()
|
||||
{
|
||||
MarginInlineEnd = token.Margin,
|
||||
[$"+ {confirmComponentCls}-title + {confirmComponentCls}-content"] = new Unknown_83()
|
||||
{
|
||||
MarginInlineStart = token.ModalConfirmIconSize + token.Margin,
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"{confirmComponentCls}-btns"] = new Unknown_84()
|
||||
{
|
||||
MarginTop = token.MarginLG,
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_6 GenComponentStyleHook(Unknown_85 token)
|
||||
{
|
||||
var headerPaddingVertical = token.Padding;
|
||||
var headerFontSize = token.FontSizeHeading5;
|
||||
var headerLineHeight = token.LineHeightHeading5;
|
||||
var modalToken = MergeToken(
|
||||
token,
|
||||
new Unknown_86()
|
||||
{
|
||||
ModalBodyPadding = token.PaddingLG,
|
||||
ModalHeaderPadding = @$"{headerPaddingVertical}px {token.PaddingLG}px",
|
||||
ModalHeaderBorderWidth = token.LineWidth,
|
||||
ModalHeaderBorderStyle = token.LineType,
|
||||
ModalHeaderBorderColorSplit = token.ColorSplit,
|
||||
ModalHeaderHeight = headerLineHeight * headerFontSize + headerPaddingVertical * 2,
|
||||
ModalFooterBorderColorSplit = token.ColorSplit,
|
||||
ModalFooterBorderStyle = token.LineType,
|
||||
ModalFooterPaddingVertical = token.PaddingXS,
|
||||
ModalFooterPaddingHorizontal = token.Padding,
|
||||
ModalFooterBorderWidth = token.LineWidth,
|
||||
ModalIconHoverColor = token.ColorIconHover,
|
||||
ModalCloseIconColor = token.ColorIcon,
|
||||
ModalCloseBtnSize = token.FontSize * token.LineHeight,
|
||||
ModalConfirmIconSize = token.FontSize * token.LineHeight,
|
||||
});
|
||||
return new Unknown_87
|
||||
{
|
||||
GenModalStyle(modalToken),
|
||||
GenModalConfirmStyle(modalToken),
|
||||
GenRTLStyle(modalToken),
|
||||
GenModalMaskStyle(modalToken),
|
||||
Token.Wireframe && genWireframeStyle(modalToken),
|
||||
InitZoomMotion(modalToken, "zoom")
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_7 GenComponentStyleHook(Unknown_88 token)
|
||||
{
|
||||
return new Unknown_89()
|
||||
{
|
||||
FooterBg = "transparent",
|
||||
HeaderBg = token.ColorBgElevated,
|
||||
TitleLineHeight = token.LineHeightHeading5,
|
||||
TitleFontSize = token.FontSizeHeading5,
|
||||
ContentBg = token.ColorBgElevated,
|
||||
TitleColor = token.ColorTextHeading,
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,382 @@
|
|||
using System;
|
||||
using CssInCs;
|
||||
using static AntDesign.GlobalStyle;
|
||||
using static AntDesign.Theme;
|
||||
|
||||
namespace AntDesign
|
||||
{
|
||||
public partial class NotificationToken
|
||||
{
|
||||
public int ZIndexPopup { get; set; }
|
||||
|
||||
public int Width { get; set; }
|
||||
|
||||
}
|
||||
|
||||
public partial class NotificationToken : TokenWithCommonCls
|
||||
{
|
||||
public int AnimationMaxHeight { get; set; }
|
||||
|
||||
public string NotificationBg { get; set; }
|
||||
|
||||
public string NotificationPadding { get; set; }
|
||||
|
||||
public int NotificationPaddingVertical { get; set; }
|
||||
|
||||
public int NotificationPaddingHorizontal { get; set; }
|
||||
|
||||
public int NotificationIconSize { get; set; }
|
||||
|
||||
public int NotificationCloseButtonSize { get; set; }
|
||||
|
||||
public int NotificationMarginBottom { get; set; }
|
||||
|
||||
public int NotificationMarginEdge { get; set; }
|
||||
|
||||
}
|
||||
|
||||
public partial class Notification
|
||||
{
|
||||
public Unknown_1 GenNotificationStyle(Unknown_5 token)
|
||||
{
|
||||
var iconCls = token.IconCls;
|
||||
var componentCls = token.ComponentCls;
|
||||
var boxShadow = token.BoxShadow;
|
||||
var fontSizeLG = token.FontSizeLG;
|
||||
var notificationMarginBottom = token.NotificationMarginBottom;
|
||||
var borderRadiusLG = token.BorderRadiusLG;
|
||||
var colorSuccess = token.ColorSuccess;
|
||||
var colorInfo = token.ColorInfo;
|
||||
var colorWarning = token.ColorWarning;
|
||||
var colorError = token.ColorError;
|
||||
var colorTextHeading = token.ColorTextHeading;
|
||||
var notificationBg = token.NotificationBg;
|
||||
var notificationPadding = token.NotificationPadding;
|
||||
var notificationMarginEdge = token.NotificationMarginEdge;
|
||||
var motionDurationMid = token.MotionDurationMid;
|
||||
var motionEaseInOut = token.MotionEaseInOut;
|
||||
var fontSize = token.FontSize;
|
||||
var lineHeight = token.LineHeight;
|
||||
var width = token.Width;
|
||||
var notificationIconSize = token.NotificationIconSize;
|
||||
var noticeCls = @$"{componentCls}-notice";
|
||||
var notificationFadeIn = new Keyframes("antNotificationFadeIn", {
|
||||
"0%": {
|
||||
left: {
|
||||
_skip_check_: true,
|
||||
value: width,
|
||||
},
|
||||
opacity: 0,
|
||||
},
|
||||
|
||||
"100%": {
|
||||
left: {
|
||||
_skip_check_: true,
|
||||
value: 0,
|
||||
},
|
||||
opacity: 1,
|
||||
},
|
||||
});
|
||||
var notificationFadeOut = new Keyframes("antNotificationFadeOut", {
|
||||
"0%": {
|
||||
maxHeight: token.AnimationMaxHeight,
|
||||
marginBottom: notificationMarginBottom,
|
||||
opacity: 1,
|
||||
},
|
||||
|
||||
"100%": {
|
||||
maxHeight: 0,
|
||||
marginBottom: 0,
|
||||
paddingTop: 0,
|
||||
paddingBottom: 0,
|
||||
opacity: 0,
|
||||
},
|
||||
});
|
||||
var noticeStyle = new Unknown_6()
|
||||
{
|
||||
Position = "relative",
|
||||
Width = width,
|
||||
MaxWidth = @$"calc(100vw - {notificationMarginEdge * 2}px)",
|
||||
MarginBottom = notificationMarginBottom,
|
||||
MarginInlineStart = "auto",
|
||||
Padding = notificationPadding,
|
||||
Overflow = "hidden",
|
||||
LineHeight = lineHeight,
|
||||
WordWrap = "break-word",
|
||||
Background = notificationBg,
|
||||
BorderRadius = borderRadiusLG,
|
||||
BoxShadow = boxShadow,
|
||||
[$"{componentCls}-close-icon"] = new Unknown_7()
|
||||
{
|
||||
FontSize = fontSize,
|
||||
Cursor = "pointer",
|
||||
},
|
||||
[$"{noticeCls}-message"] = new Unknown_8()
|
||||
{
|
||||
MarginBottom = token.MarginXS,
|
||||
Color = colorTextHeading,
|
||||
FontSize = fontSizeLG,
|
||||
LineHeight = token.LineHeightLG,
|
||||
},
|
||||
[$"{noticeCls}-description"] = new Unknown_9()
|
||||
{
|
||||
FontSize = fontSize,
|
||||
},
|
||||
[$"&{noticeCls}-closable {noticeCls}-message"] = new Unknown_10()
|
||||
{
|
||||
PaddingInlineEnd = token.PaddingLG,
|
||||
},
|
||||
[$"{noticeCls}-with-icon {noticeCls}-message"] = new Unknown_11()
|
||||
{
|
||||
MarginBottom = token.MarginXS,
|
||||
MarginInlineStart = token.MarginSM + notificationIconSize,
|
||||
FontSize = fontSizeLG,
|
||||
},
|
||||
[$"{noticeCls}-with-icon {noticeCls}-description"] = new Unknown_12()
|
||||
{
|
||||
MarginInlineStart = token.MarginSM + notificationIconSize,
|
||||
FontSize = fontSize,
|
||||
},
|
||||
[$"{noticeCls}-icon"] = new Unknown_13()
|
||||
{
|
||||
Position = "absolute",
|
||||
FontSize = notificationIconSize,
|
||||
LineHeight = 0,
|
||||
[$"&-success{iconCls}"] = new Unknown_14()
|
||||
{
|
||||
Color = colorSuccess,
|
||||
},
|
||||
[$"&-info{iconCls}"] = new Unknown_15()
|
||||
{
|
||||
Color = colorInfo,
|
||||
},
|
||||
[$"&-warning{iconCls}"] = new Unknown_16()
|
||||
{
|
||||
Color = colorWarning,
|
||||
},
|
||||
[$"&-error{iconCls}"] = new Unknown_17()
|
||||
{
|
||||
Color = colorError,
|
||||
},
|
||||
},
|
||||
[$"{noticeCls}-close"] = new Unknown_18()
|
||||
{
|
||||
Position = "absolute",
|
||||
Top = token.NotificationPaddingVertical,
|
||||
InsetInlineEnd = token.NotificationPaddingHorizontal,
|
||||
Color = token.ColorIcon,
|
||||
Outline = "none",
|
||||
Width = token.NotificationCloseButtonSize,
|
||||
Height = token.NotificationCloseButtonSize,
|
||||
BorderRadius = token.BorderRadiusSM,
|
||||
Transition = @$"background-color {token.MotionDurationMid}, color {token.MotionDurationMid}",
|
||||
Display = "flex",
|
||||
AlignItems = "center",
|
||||
JustifyContent = "center",
|
||||
["&:hover"] = new Unknown_19()
|
||||
{
|
||||
Color = token.ColorIconHover,
|
||||
BackgroundColor = token.Wireframe ? "transparent" : token.ColorFillContent,
|
||||
},
|
||||
},
|
||||
[$"{noticeCls}-btn"] = new Unknown_20()
|
||||
{
|
||||
Float = "right",
|
||||
MarginTop = token.MarginSM,
|
||||
},
|
||||
};
|
||||
return new Unknown_21
|
||||
{
|
||||
new Unknown_22()
|
||||
{
|
||||
[componentCls] = new Unknown_23()
|
||||
{
|
||||
["..."] = ResetComponent(token),
|
||||
Position = "fixed",
|
||||
ZIndex = token.ZIndexPopup,
|
||||
MarginInlineEnd = notificationMarginEdge,
|
||||
[$"{componentCls}-hook-holder"] = new Unknown_24()
|
||||
{
|
||||
Position = "relative",
|
||||
},
|
||||
[$"&{componentCls}-top, &{componentCls}-bottom"] = new Unknown_25()
|
||||
{
|
||||
[noticeCls] = new Unknown_26()
|
||||
{
|
||||
MarginInline = "auto auto",
|
||||
},
|
||||
},
|
||||
[$"&{componentCls}-topLeft, &{componentCls}-bottomLeft"] = new Unknown_27()
|
||||
{
|
||||
[noticeCls] = new Unknown_28()
|
||||
{
|
||||
MarginInlineEnd = "auto",
|
||||
MarginInlineStart = 0,
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-fade-enter, {componentCls}-fade-appear"] = new Unknown_29()
|
||||
{
|
||||
AnimationDuration = token.MotionDurationMid,
|
||||
AnimationTimingFunction = motionEaseInOut,
|
||||
AnimationFillMode = "both",
|
||||
Opacity = 0,
|
||||
AnimationPlayState = "paused",
|
||||
},
|
||||
[$"{componentCls}-fade-leave"] = new Unknown_30()
|
||||
{
|
||||
AnimationTimingFunction = motionEaseInOut,
|
||||
AnimationFillMode = "both",
|
||||
AnimationDuration = motionDurationMid,
|
||||
AnimationPlayState = "paused",
|
||||
},
|
||||
[$"{componentCls}-fade-enter{componentCls}-fade-enter-active, {componentCls}-fade-appear{componentCls}-fade-appear-active"] = new Unknown_31()
|
||||
{
|
||||
AnimationName = notificationFadeIn,
|
||||
AnimationPlayState = "running",
|
||||
},
|
||||
[$"{componentCls}-fade-leave{componentCls}-fade-leave-active"] = new Unknown_32()
|
||||
{
|
||||
AnimationName = notificationFadeOut,
|
||||
AnimationPlayState = "running",
|
||||
},
|
||||
["..."] = GenNotificationPlacementStyle(token),
|
||||
["&-rtl"] = new Unknown_33()
|
||||
{
|
||||
Direction = "rtl",
|
||||
[$"{noticeCls}-btn"] = new Unknown_34()
|
||||
{
|
||||
Float = "left",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
new Unknown_35()
|
||||
{
|
||||
[componentCls] = new Unknown_36()
|
||||
{
|
||||
[noticeCls] = new Unknown_37()
|
||||
{
|
||||
["..."] = noticeStyle,
|
||||
},
|
||||
},
|
||||
},
|
||||
new Unknown_38()
|
||||
{
|
||||
[$"{noticeCls}-pure-panel"] = new Unknown_39()
|
||||
{
|
||||
["..."] = noticeStyle,
|
||||
Margin = 0,
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_2 GenComponentStyleHook(Unknown_40 token)
|
||||
{
|
||||
var notificationPaddingVertical = token.PaddingMD;
|
||||
var notificationPaddingHorizontal = token.PaddingLG;
|
||||
var notificationToken = MergeToken(
|
||||
token,
|
||||
new Unknown_41()
|
||||
{
|
||||
NotificationBg = token.ColorBgElevated,
|
||||
NotificationPaddingVertical = notificationPaddingVertical,
|
||||
NotificationPaddingHorizontal = notificationPaddingHorizontal,
|
||||
NotificationIconSize = token.FontSizeLG * token.LineHeightLG,
|
||||
NotificationCloseButtonSize = token.ControlHeightLG * 0.55,
|
||||
NotificationMarginBottom = token.Margin,
|
||||
NotificationPadding = @$"{token.PaddingMD}px {token.PaddingContentHorizontalLG}px",
|
||||
NotificationMarginEdge = token.MarginLG,
|
||||
AnimationMaxHeight = 150,
|
||||
});
|
||||
return new Unknown_42 { GenNotificationStyle(notificationToken) };
|
||||
}
|
||||
|
||||
public Unknown_3 GenComponentStyleHook(Unknown_43 token)
|
||||
{
|
||||
return new Unknown_44()
|
||||
{
|
||||
ZIndexPopup = token.ZIndexPopupBase + 50,
|
||||
Width = 384,
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_4 GenNotificationPlacementStyle(Unknown_45 token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var width = token.Width;
|
||||
var notificationMarginEdge = token.NotificationMarginEdge;
|
||||
var notificationTopFadeIn = new Keyframes("antNotificationTopFadeIn", {
|
||||
"0%": {
|
||||
marginTop: "-100%",
|
||||
opacity: 0,
|
||||
},
|
||||
|
||||
"100%": {
|
||||
marginTop: 0,
|
||||
opacity: 1,
|
||||
},
|
||||
});
|
||||
var notificationBottomFadeIn = new Keyframes("antNotificationBottomFadeIn", {
|
||||
"0%": {
|
||||
marginBottom: "-100%",
|
||||
opacity: 0,
|
||||
},
|
||||
|
||||
"100%": {
|
||||
marginBottom: 0,
|
||||
opacity: 1,
|
||||
},
|
||||
});
|
||||
var notificationLeftFadeIn = new Keyframes("antNotificationLeftFadeIn", {
|
||||
"0%": {
|
||||
right: {
|
||||
_skip_check_: true,
|
||||
value: width,
|
||||
},
|
||||
opacity: 0,
|
||||
},
|
||||
|
||||
"100%": {
|
||||
right: {
|
||||
_skip_check_: true,
|
||||
value: 0,
|
||||
},
|
||||
opacity: 1,
|
||||
},
|
||||
});
|
||||
return new Unknown_46()
|
||||
{
|
||||
[$"&{componentCls}-top, &{componentCls}-bottom"] = new Unknown_47()
|
||||
{
|
||||
MarginInline = 0,
|
||||
},
|
||||
[$"&{componentCls}-top"] = new Unknown_48()
|
||||
{
|
||||
[$"{componentCls}-fade-enter{componentCls}-fade-enter-active, {componentCls}-fade-appear{componentCls}-fade-appear-active"] = new Unknown_49()
|
||||
{
|
||||
AnimationName = notificationTopFadeIn,
|
||||
},
|
||||
},
|
||||
[$"&{componentCls}-bottom"] = new Unknown_50()
|
||||
{
|
||||
[$"{componentCls}-fade-enter{componentCls}-fade-enter-active, {componentCls}-fade-appear{componentCls}-fade-appear-active"] = new Unknown_51()
|
||||
{
|
||||
AnimationName = notificationBottomFadeIn,
|
||||
},
|
||||
},
|
||||
[$"&{componentCls}-topLeft, &{componentCls}-bottomLeft"] = new Unknown_52()
|
||||
{
|
||||
MarginInlineEnd = 0,
|
||||
MarginInlineStart = notificationMarginEdge,
|
||||
[$"{componentCls}-fade-enter{componentCls}-fade-enter-active, {componentCls}-fade-appear{componentCls}-fade-appear-active"] = new Unknown_53()
|
||||
{
|
||||
AnimationName = notificationLeftFadeIn,
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,756 @@
|
|||
using System;
|
||||
using CssInCs;
|
||||
using static AntDesign.GlobalStyle;
|
||||
using static AntDesign.Theme;
|
||||
|
||||
namespace AntDesign
|
||||
{
|
||||
public partial class PaginationToken : TokenWithCommonCls
|
||||
{
|
||||
public int PaginationItemSize { get; set; }
|
||||
|
||||
public string PaginationFontFamily { get; set; }
|
||||
|
||||
public string PaginationItemBg { get; set; }
|
||||
|
||||
public string PaginationItemBgActive { get; set; }
|
||||
|
||||
public int PaginationFontWeightActive { get; set; }
|
||||
|
||||
public int PaginationItemSizeSM { get; set; }
|
||||
|
||||
public string PaginationItemInputBg { get; set; }
|
||||
|
||||
public int PaginationMiniOptionsSizeChangerTop { get; set; }
|
||||
|
||||
public string PaginationItemDisabledBgActive { get; set; }
|
||||
|
||||
public string PaginationItemDisabledColorActive { get; set; }
|
||||
|
||||
public string PaginationItemLinkBg { get; set; }
|
||||
|
||||
public string InputOutlineOffset { get; set; }
|
||||
|
||||
public int PaginationMiniOptionsMarginInlineStart { get; set; }
|
||||
|
||||
public int PaginationMiniQuickJumperInputWidth { get; set; }
|
||||
|
||||
public int PaginationItemPaddingInline { get; set; }
|
||||
|
||||
public int PaginationEllipsisLetterSpacing { get; set; }
|
||||
|
||||
public string PaginationEllipsisTextIndent { get; set; }
|
||||
|
||||
public int PaginationSlashMarginInlineStart { get; set; }
|
||||
|
||||
public int PaginationSlashMarginInlineEnd { get; set; }
|
||||
|
||||
}
|
||||
|
||||
public partial class Pagination
|
||||
{
|
||||
public Unknown_1 GenPaginationDisabledStyle(Unknown_9 token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
return new Unknown_10()
|
||||
{
|
||||
[$"{componentCls}-disabled"] = new Unknown_11()
|
||||
{
|
||||
["&, &:hover"] = new Unknown_12()
|
||||
{
|
||||
Cursor = "not-allowed",
|
||||
[$"{componentCls}-item-link"] = new Unknown_13()
|
||||
{
|
||||
Color = token.ColorTextDisabled,
|
||||
Cursor = "not-allowed",
|
||||
},
|
||||
},
|
||||
["&:focus-visible"] = new Unknown_14()
|
||||
{
|
||||
Cursor = "not-allowed",
|
||||
[$"{componentCls}-item-link"] = new Unknown_15()
|
||||
{
|
||||
Color = token.ColorTextDisabled,
|
||||
Cursor = "not-allowed",
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"&{componentCls}-disabled"] = new Unknown_16()
|
||||
{
|
||||
Cursor = "not-allowed",
|
||||
[$"&{componentCls}-mini"] = new Unknown_17()
|
||||
{
|
||||
[$"&:hover{componentCls}-item:not({componentCls}-item-active),&:active{componentCls}-item:not({componentCls}-item-active),&:hover{componentCls}-item-link,&:active{componentCls}-item-link"] = new Unknown_18()
|
||||
{
|
||||
BackgroundColor = "transparent",
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-item"] = new Unknown_19()
|
||||
{
|
||||
Cursor = "not-allowed",
|
||||
["&:hover, &:active"] = new Unknown_20()
|
||||
{
|
||||
BackgroundColor = "transparent",
|
||||
},
|
||||
["a"] = new Unknown_21()
|
||||
{
|
||||
Color = token.ColorTextDisabled,
|
||||
BackgroundColor = "transparent",
|
||||
Border = "none",
|
||||
Cursor = "not-allowed",
|
||||
},
|
||||
["&-active"] = new Unknown_22()
|
||||
{
|
||||
BorderColor = token.ColorBorder,
|
||||
BackgroundColor = token.PaginationItemDisabledBgActive,
|
||||
["&:hover, &:active"] = new Unknown_23()
|
||||
{
|
||||
BackgroundColor = token.PaginationItemDisabledBgActive,
|
||||
},
|
||||
["a"] = new Unknown_24()
|
||||
{
|
||||
Color = token.PaginationItemDisabledColorActive,
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-item-link"] = new Unknown_25()
|
||||
{
|
||||
Color = token.ColorTextDisabled,
|
||||
Cursor = "not-allowed",
|
||||
["&:hover, &:active"] = new Unknown_26()
|
||||
{
|
||||
BackgroundColor = "transparent",
|
||||
},
|
||||
[$"{componentCls}-simple&"] = new Unknown_27()
|
||||
{
|
||||
BackgroundColor = "transparent",
|
||||
["&:hover, &:active"] = new Unknown_28()
|
||||
{
|
||||
BackgroundColor = "transparent",
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-item-link-icon"] = new Unknown_29()
|
||||
{
|
||||
Opacity = 0,
|
||||
},
|
||||
[$"{componentCls}-item-ellipsis"] = new Unknown_30()
|
||||
{
|
||||
Opacity = 1,
|
||||
},
|
||||
[$"{componentCls}-simple-pager"] = new Unknown_31()
|
||||
{
|
||||
Color = token.ColorTextDisabled,
|
||||
},
|
||||
},
|
||||
[$"&{componentCls}-simple"] = new Unknown_32()
|
||||
{
|
||||
[$"{componentCls}-prev, {componentCls}-next"] = new Unknown_33()
|
||||
{
|
||||
[$"&{componentCls}-disabled {componentCls}-item-link"] = new Unknown_34()
|
||||
{
|
||||
["&:hover, &:active"] = new Unknown_35()
|
||||
{
|
||||
BackgroundColor = "transparent",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_2 GenPaginationMiniStyle(Unknown_36 token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
return new Unknown_37()
|
||||
{
|
||||
[$"&{componentCls}-mini {componentCls}-total-text, &{componentCls}-mini {componentCls}-simple-pager"] = new Unknown_38()
|
||||
{
|
||||
Height = token.PaginationItemSizeSM,
|
||||
LineHeight = @$"{token.PaginationItemSizeSM}px",
|
||||
},
|
||||
[$"&{componentCls}-mini {componentCls}-item"] = new Unknown_39()
|
||||
{
|
||||
MinWidth = token.PaginationItemSizeSM,
|
||||
Height = token.PaginationItemSizeSM,
|
||||
Margin = 0,
|
||||
LineHeight = @$"{token.PaginationItemSizeSM - 2}px",
|
||||
},
|
||||
[$"&{componentCls}-mini {componentCls}-item:not({componentCls}-item-active)"] = new Unknown_40()
|
||||
{
|
||||
BackgroundColor = "transparent",
|
||||
BorderColor = "transparent",
|
||||
["&:hover"] = new Unknown_41()
|
||||
{
|
||||
BackgroundColor = token.ColorBgTextHover,
|
||||
},
|
||||
["&:active"] = new Unknown_42()
|
||||
{
|
||||
BackgroundColor = token.ColorBgTextActive,
|
||||
},
|
||||
},
|
||||
[$"&{componentCls}-mini {componentCls}-prev, &{componentCls}-mini {componentCls}-next"] = new Unknown_43()
|
||||
{
|
||||
MinWidth = token.PaginationItemSizeSM,
|
||||
Height = token.PaginationItemSizeSM,
|
||||
Margin = 0,
|
||||
LineHeight = @$"{token.PaginationItemSizeSM}px",
|
||||
[$"&:hover {componentCls}-item-link"] = new Unknown_44()
|
||||
{
|
||||
BackgroundColor = token.ColorBgTextHover,
|
||||
},
|
||||
[$"&:active {componentCls}-item-link"] = new Unknown_45()
|
||||
{
|
||||
BackgroundColor = token.ColorBgTextActive,
|
||||
},
|
||||
[$"&{componentCls}-disabled:hover {componentCls}-item-link"] = new Unknown_46()
|
||||
{
|
||||
BackgroundColor = "transparent",
|
||||
},
|
||||
},
|
||||
[$"&{componentCls}-mini{componentCls}-prev{componentCls}-item-link,&{componentCls}-mini{componentCls}-next{componentCls}-item-link"] = new Unknown_47()
|
||||
{
|
||||
BackgroundColor = "transparent",
|
||||
BorderColor = "transparent",
|
||||
["&::after"] = new Unknown_48()
|
||||
{
|
||||
Height = token.PaginationItemSizeSM,
|
||||
LineHeight = @$"{token.PaginationItemSizeSM}px",
|
||||
},
|
||||
},
|
||||
[$"&{componentCls}-mini {componentCls}-jump-prev, &{componentCls}-mini {componentCls}-jump-next"] = new Unknown_49()
|
||||
{
|
||||
Height = token.PaginationItemSizeSM,
|
||||
MarginInlineEnd = 0,
|
||||
LineHeight = @$"{token.PaginationItemSizeSM}px",
|
||||
},
|
||||
[$"&{componentCls}-mini {componentCls}-options"] = new Unknown_50()
|
||||
{
|
||||
MarginInlineStart = token.PaginationMiniOptionsMarginInlineStart,
|
||||
["&-size-changer"] = new Unknown_51()
|
||||
{
|
||||
Top = token.PaginationMiniOptionsSizeChangerTop,
|
||||
},
|
||||
["&-quick-jumper"] = new Unknown_52()
|
||||
{
|
||||
Height = token.PaginationItemSizeSM,
|
||||
LineHeight = @$"{token.PaginationItemSizeSM}px",
|
||||
Input = new Unknown_53()
|
||||
{
|
||||
["..."] = GenInputSmallStyle(token),
|
||||
Width = token.PaginationMiniQuickJumperInputWidth,
|
||||
Height = token.ControlHeightSM,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_3 GenPaginationSimpleStyle(Unknown_54 token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
return new Unknown_55()
|
||||
{
|
||||
[$"&{componentCls}-simple{componentCls}-prev,&{componentCls}-simple{componentCls}-next"] = new Unknown_56()
|
||||
{
|
||||
Height = token.PaginationItemSizeSM,
|
||||
LineHeight = @$"{token.PaginationItemSizeSM}px",
|
||||
VerticalAlign = "top",
|
||||
[$"{componentCls}-item-link"] = new Unknown_57()
|
||||
{
|
||||
Height = token.PaginationItemSizeSM,
|
||||
BackgroundColor = "transparent",
|
||||
Border = 0,
|
||||
["&:hover"] = new Unknown_58()
|
||||
{
|
||||
BackgroundColor = token.ColorBgTextHover,
|
||||
},
|
||||
["&:active"] = new Unknown_59()
|
||||
{
|
||||
BackgroundColor = token.ColorBgTextActive,
|
||||
},
|
||||
["&::after"] = new Unknown_60()
|
||||
{
|
||||
Height = token.PaginationItemSizeSM,
|
||||
LineHeight = @$"{token.PaginationItemSizeSM}px",
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"&{componentCls}-simple {componentCls}-simple-pager"] = new Unknown_61()
|
||||
{
|
||||
Display = "inline-block",
|
||||
Height = token.PaginationItemSizeSM,
|
||||
MarginInlineEnd = token.MarginXS,
|
||||
Input = new Unknown_62()
|
||||
{
|
||||
BoxSizing = "border-box",
|
||||
Height = "100%",
|
||||
MarginInlineEnd = token.MarginXS,
|
||||
Padding = @$"0 {token.PaginationItemPaddingInline}px",
|
||||
TextAlign = "center",
|
||||
BackgroundColor = token.PaginationItemInputBg,
|
||||
Border = @$"{token.LineWidth}px {token.LineType} {token.ColorBorder}",
|
||||
BorderRadius = token.BorderRadius,
|
||||
Outline = "none",
|
||||
Transition = @$"border-color {token.MotionDurationMid}",
|
||||
Color = "inherit",
|
||||
["&:hover"] = new Unknown_63()
|
||||
{
|
||||
BorderColor = token.ColorPrimary,
|
||||
},
|
||||
["&:focus"] = new Unknown_64()
|
||||
{
|
||||
BorderColor = token.ColorPrimaryHover,
|
||||
BoxShadow = @$"{token.InputOutlineOffset}px 0 {token.ControlOutlineWidth}px {token.ControlOutline}",
|
||||
},
|
||||
["&[disabled]"] = new Unknown_65()
|
||||
{
|
||||
Color = token.ColorTextDisabled,
|
||||
BackgroundColor = token.ColorBgContainerDisabled,
|
||||
BorderColor = token.ColorBorder,
|
||||
Cursor = "not-allowed",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_4 GenPaginationJumpStyle(Unknown_66 token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
return new Unknown_67()
|
||||
{
|
||||
[$"{componentCls}-jump-prev, {componentCls}-jump-next"] = new Unknown_68()
|
||||
{
|
||||
Outline = 0,
|
||||
[$"{componentCls}-item-container"] = new Unknown_69()
|
||||
{
|
||||
Position = "relative",
|
||||
[$"{componentCls}-item-link-icon"] = new Unknown_70()
|
||||
{
|
||||
Color = token.ColorPrimary,
|
||||
FontSize = token.FontSizeSM,
|
||||
Opacity = 0,
|
||||
Transition = @$"all {token.MotionDurationMid}",
|
||||
["&-svg"] = new Unknown_71()
|
||||
{
|
||||
Top = 0,
|
||||
InsetInlineEnd = 0,
|
||||
Bottom = 0,
|
||||
InsetInlineStart = 0,
|
||||
Margin = "auto",
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-item-ellipsis"] = new Unknown_72()
|
||||
{
|
||||
Position = "absolute",
|
||||
Top = 0,
|
||||
InsetInlineEnd = 0,
|
||||
Bottom = 0,
|
||||
InsetInlineStart = 0,
|
||||
Display = "block",
|
||||
Margin = "auto",
|
||||
Color = token.ColorTextDisabled,
|
||||
FontFamily = "Arial, Helvetica, sans-serif",
|
||||
LetterSpacing = token.PaginationEllipsisLetterSpacing,
|
||||
TextAlign = "center",
|
||||
TextIndent = token.PaginationEllipsisTextIndent,
|
||||
Opacity = 1,
|
||||
Transition = @$"all {token.MotionDurationMid}",
|
||||
},
|
||||
},
|
||||
["&:hover"] = new Unknown_73()
|
||||
{
|
||||
[$"{componentCls}-item-link-icon"] = new Unknown_74()
|
||||
{
|
||||
Opacity = 1,
|
||||
},
|
||||
[$"{componentCls}-item-ellipsis"] = new Unknown_75()
|
||||
{
|
||||
Opacity = 0,
|
||||
},
|
||||
},
|
||||
["&:focus-visible"] = new Unknown_76()
|
||||
{
|
||||
[$"{componentCls}-item-link-icon"] = new Unknown_77()
|
||||
{
|
||||
Opacity = 1,
|
||||
},
|
||||
[$"{componentCls}-item-ellipsis"] = new Unknown_78()
|
||||
{
|
||||
Opacity = 0,
|
||||
},
|
||||
["..."] = GenFocusOutline(token)
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-prev,{componentCls}-jump-prev,{componentCls}-jump-next"] = new Unknown_79()
|
||||
{
|
||||
MarginInlineEnd = token.MarginXS,
|
||||
},
|
||||
[$"{componentCls}-prev,{componentCls}-next,{componentCls}-jump-prev,{componentCls}-jump-next"] = new Unknown_80()
|
||||
{
|
||||
Display = "inline-block",
|
||||
MinWidth = token.PaginationItemSize,
|
||||
Height = token.PaginationItemSize,
|
||||
Color = token.ColorText,
|
||||
FontFamily = token.PaginationFontFamily,
|
||||
LineHeight = @$"{token.PaginationItemSize}px",
|
||||
TextAlign = "center",
|
||||
VerticalAlign = "middle",
|
||||
ListStyle = "none",
|
||||
BorderRadius = token.BorderRadius,
|
||||
Cursor = "pointer",
|
||||
Transition = @$"all {token.MotionDurationMid}",
|
||||
},
|
||||
[$"{componentCls}-prev, {componentCls}-next"] = new Unknown_81()
|
||||
{
|
||||
FontFamily = "Arial, Helvetica, sans-serif",
|
||||
Outline = 0,
|
||||
["button"] = new Unknown_82()
|
||||
{
|
||||
Color = token.ColorText,
|
||||
Cursor = "pointer",
|
||||
UserSelect = "none",
|
||||
},
|
||||
[$"{componentCls}-item-link"] = new Unknown_83()
|
||||
{
|
||||
Display = "block",
|
||||
Width = "100%",
|
||||
Height = "100%",
|
||||
Padding = 0,
|
||||
FontSize = token.FontSizeSM,
|
||||
TextAlign = "center",
|
||||
BackgroundColor = "transparent",
|
||||
Border = @$"{token.LineWidth}px {token.LineType} transparent",
|
||||
BorderRadius = token.BorderRadius,
|
||||
Outline = "none",
|
||||
Transition = @$"border {token.MotionDurationMid}",
|
||||
},
|
||||
[$"&:focus-visible {componentCls}-item-link"] = new Unknown_84()
|
||||
{
|
||||
["..."] = GenFocusOutline(token)
|
||||
},
|
||||
[$"&:hover {componentCls}-item-link"] = new Unknown_85()
|
||||
{
|
||||
BackgroundColor = token.ColorBgTextHover,
|
||||
},
|
||||
[$"&:active {componentCls}-item-link"] = new Unknown_86()
|
||||
{
|
||||
BackgroundColor = token.ColorBgTextActive,
|
||||
},
|
||||
[$"&{componentCls}-disabled:hover"] = new Unknown_87()
|
||||
{
|
||||
[$"{componentCls}-item-link"] = new Unknown_88()
|
||||
{
|
||||
BackgroundColor = "transparent",
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-slash"] = new Unknown_89()
|
||||
{
|
||||
MarginInlineEnd = token.PaginationSlashMarginInlineEnd,
|
||||
MarginInlineStart = token.PaginationSlashMarginInlineStart,
|
||||
},
|
||||
[$"{componentCls}-options"] = new Unknown_90()
|
||||
{
|
||||
Display = "inline-block",
|
||||
MarginInlineStart = token.Margin,
|
||||
VerticalAlign = "middle",
|
||||
["&-size-changer.-select"] = new Unknown_91()
|
||||
{
|
||||
Display = "inline-block",
|
||||
Width = "auto",
|
||||
},
|
||||
["&-quick-jumper"] = new Unknown_92()
|
||||
{
|
||||
Display = "inline-block",
|
||||
Height = token.ControlHeight,
|
||||
MarginInlineStart = token.MarginXS,
|
||||
LineHeight = @$"{token.ControlHeight}px",
|
||||
VerticalAlign = "top",
|
||||
Input = new Unknown_93()
|
||||
{
|
||||
["..."] = GenBasicInputStyle(token),
|
||||
Width = token.ControlHeightLG * 1.25,
|
||||
Height = token.ControlHeight,
|
||||
BoxSizing = "border-box",
|
||||
Margin = 0,
|
||||
MarginInlineStart = token.MarginXS,
|
||||
MarginInlineEnd = token.MarginXS,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_5 GenPaginationItemStyle(Unknown_94 token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
return new Unknown_95()
|
||||
{
|
||||
[$"{componentCls}-item"] = new Unknown_96()
|
||||
{
|
||||
Display = "inline-block",
|
||||
MinWidth = token.PaginationItemSize,
|
||||
Height = token.PaginationItemSize,
|
||||
MarginInlineEnd = token.MarginXS,
|
||||
FontFamily = token.PaginationFontFamily,
|
||||
LineHeight = @$"{token.PaginationItemSize - 2}px",
|
||||
TextAlign = "center",
|
||||
VerticalAlign = "middle",
|
||||
ListStyle = "none",
|
||||
BackgroundColor = "transparent",
|
||||
Border = @$"{token.LineWidth}px {token.LineType} transparent",
|
||||
BorderRadius = token.BorderRadius,
|
||||
Outline = 0,
|
||||
Cursor = "pointer",
|
||||
UserSelect = "none",
|
||||
["a"] = new Unknown_97()
|
||||
{
|
||||
Display = "block",
|
||||
Padding = @$"0 {token.PaginationItemPaddingInline}px",
|
||||
Color = token.ColorText,
|
||||
Transition = "none",
|
||||
["&:hover"] = new Unknown_98()
|
||||
{
|
||||
TextDecoration = "none",
|
||||
},
|
||||
},
|
||||
[$"&:not({componentCls}-item-active)"] = new Unknown_99()
|
||||
{
|
||||
["&:hover"] = new Unknown_100()
|
||||
{
|
||||
Transition = @$"all {token.MotionDurationMid}",
|
||||
BackgroundColor = token.ColorBgTextHover,
|
||||
},
|
||||
["&:active"] = new Unknown_101()
|
||||
{
|
||||
BackgroundColor = token.ColorBgTextActive,
|
||||
},
|
||||
},
|
||||
["..."] = GenFocusStyle(token),
|
||||
["&-active"] = new Unknown_102()
|
||||
{
|
||||
FontWeight = token.PaginationFontWeightActive,
|
||||
BackgroundColor = token.PaginationItemBgActive,
|
||||
BorderColor = token.ColorPrimary,
|
||||
["a"] = new Unknown_103()
|
||||
{
|
||||
Color = token.ColorPrimary,
|
||||
},
|
||||
["&:hover"] = new Unknown_104()
|
||||
{
|
||||
BorderColor = token.ColorPrimaryHover,
|
||||
},
|
||||
["&:hover a"] = new Unknown_105()
|
||||
{
|
||||
Color = token.ColorPrimaryHover,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_6 GenPaginationStyle(Unknown_106 token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
return new Unknown_107()
|
||||
{
|
||||
[componentCls] = new Unknown_108()
|
||||
{
|
||||
["..."] = ResetComponent(token),
|
||||
["ul, ol"] = new Unknown_109()
|
||||
{
|
||||
Margin = 0,
|
||||
Padding = 0,
|
||||
ListStyle = "none",
|
||||
},
|
||||
["&::after"] = new Unknown_110()
|
||||
{
|
||||
Display = "block",
|
||||
Clear = "both",
|
||||
Height = 0,
|
||||
Overflow = "hidden",
|
||||
Visibility = "hidden",
|
||||
Content = "\"\"",
|
||||
},
|
||||
[$"{componentCls}-total-text"] = new Unknown_111()
|
||||
{
|
||||
Display = "inline-block",
|
||||
Height = token.PaginationItemSize,
|
||||
MarginInlineEnd = token.MarginXS,
|
||||
LineHeight = @$"{token.PaginationItemSize - 2}px",
|
||||
VerticalAlign = "middle",
|
||||
},
|
||||
["..."] = GenPaginationItemStyle(token),
|
||||
["..."] = GenPaginationJumpStyle(token),
|
||||
["..."] = GenPaginationSimpleStyle(token),
|
||||
["..."] = GenPaginationMiniStyle(token),
|
||||
["..."] = GenPaginationDisabledStyle(token),
|
||||
[$"@media only screen and (max-width: {token.ScreenLG}px)"] = new Unknown_112()
|
||||
{
|
||||
[$"{componentCls}-item"] = new Unknown_113()
|
||||
{
|
||||
["&-after-jump-prev, &-before-jump-next"] = new Unknown_114()
|
||||
{
|
||||
Display = "none",
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"@media only screen and (max-width: {token.ScreenSM}px)"] = new Unknown_115()
|
||||
{
|
||||
[$"{componentCls}-options"] = new Unknown_116()
|
||||
{
|
||||
Display = "none",
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"&{token.ComponentCls}-rtl"] = new Unknown_117()
|
||||
{
|
||||
Direction = "rtl",
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_7 GenBorderedStyle(Unknown_118 token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
return new Unknown_119()
|
||||
{
|
||||
[$"{componentCls}{componentCls}-disabled"] = new Unknown_120()
|
||||
{
|
||||
["&, &:hover"] = new Unknown_121()
|
||||
{
|
||||
[$"{componentCls}-item-link"] = new Unknown_122()
|
||||
{
|
||||
BorderColor = token.ColorBorder,
|
||||
},
|
||||
},
|
||||
["&:focus-visible"] = new Unknown_123()
|
||||
{
|
||||
[$"{componentCls}-item-link"] = new Unknown_124()
|
||||
{
|
||||
BorderColor = token.ColorBorder,
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-item, {componentCls}-item-link"] = new Unknown_125()
|
||||
{
|
||||
BackgroundColor = token.ColorBgContainerDisabled,
|
||||
BorderColor = token.ColorBorder,
|
||||
[$"&:hover:not({componentCls}-item-active)"] = new Unknown_126()
|
||||
{
|
||||
BackgroundColor = token.ColorBgContainerDisabled,
|
||||
BorderColor = token.ColorBorder,
|
||||
["a"] = new Unknown_127()
|
||||
{
|
||||
Color = token.ColorTextDisabled,
|
||||
},
|
||||
},
|
||||
[$"&{componentCls}-item-active"] = new Unknown_128()
|
||||
{
|
||||
BackgroundColor = token.PaginationItemDisabledBgActive,
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-prev, {componentCls}-next"] = new Unknown_129()
|
||||
{
|
||||
["&:hover button"] = new Unknown_130()
|
||||
{
|
||||
BackgroundColor = token.ColorBgContainerDisabled,
|
||||
BorderColor = token.ColorBorder,
|
||||
Color = token.ColorTextDisabled,
|
||||
},
|
||||
[$"{componentCls}-item-link"] = new Unknown_131()
|
||||
{
|
||||
BackgroundColor = token.ColorBgContainerDisabled,
|
||||
BorderColor = token.ColorBorder,
|
||||
},
|
||||
},
|
||||
},
|
||||
[componentCls] = new Unknown_132()
|
||||
{
|
||||
[$"{componentCls}-prev, {componentCls}-next"] = new Unknown_133()
|
||||
{
|
||||
["&:hover button"] = new Unknown_134()
|
||||
{
|
||||
BorderColor = token.ColorPrimaryHover,
|
||||
BackgroundColor = token.PaginationItemBg,
|
||||
},
|
||||
[$"{componentCls}-item-link"] = new Unknown_135()
|
||||
{
|
||||
BackgroundColor = token.PaginationItemLinkBg,
|
||||
BorderColor = token.ColorBorder,
|
||||
},
|
||||
[$"&:hover {componentCls}-item-link"] = new Unknown_136()
|
||||
{
|
||||
BorderColor = token.ColorPrimary,
|
||||
BackgroundColor = token.PaginationItemBg,
|
||||
Color = token.ColorPrimary,
|
||||
},
|
||||
[$"&{componentCls}-disabled"] = new Unknown_137()
|
||||
{
|
||||
[$"{componentCls}-item-link"] = new Unknown_138()
|
||||
{
|
||||
BorderColor = token.ColorBorder,
|
||||
Color = token.ColorTextDisabled,
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-item"] = new Unknown_139()
|
||||
{
|
||||
BackgroundColor = token.PaginationItemBg,
|
||||
Border = @$"{token.LineWidth}px {token.LineType} {token.ColorBorder}",
|
||||
[$"&:hover:not({componentCls}-item-active)"] = new Unknown_140()
|
||||
{
|
||||
BorderColor = token.ColorPrimary,
|
||||
BackgroundColor = token.PaginationItemBg,
|
||||
["a"] = new Unknown_141()
|
||||
{
|
||||
Color = token.ColorPrimary,
|
||||
},
|
||||
},
|
||||
["&-active"] = new Unknown_142()
|
||||
{
|
||||
BorderColor = token.ColorPrimary,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_8 GenComponentStyleHook(Unknown_143 token)
|
||||
{
|
||||
var paginationToken = MergeToken(
|
||||
token,
|
||||
new Unknown_144()
|
||||
{
|
||||
PaginationItemSize = token.ControlHeight,
|
||||
PaginationFontFamily = token.FontFamily,
|
||||
PaginationItemBg = token.ColorBgContainer,
|
||||
PaginationItemBgActive = token.ColorBgContainer,
|
||||
PaginationFontWeightActive = token.FontWeightStrong,
|
||||
PaginationItemSizeSM = token.ControlHeightSM,
|
||||
PaginationItemInputBg = token.ColorBgContainer,
|
||||
PaginationMiniOptionsSizeChangerTop = 0,
|
||||
PaginationItemDisabledBgActive = token.ControlItemBgActiveDisabled,
|
||||
PaginationItemDisabledColorActive = token.ColorTextDisabled,
|
||||
PaginationItemLinkBg = token.ColorBgContainer,
|
||||
InputOutlineOffset = "0 0",
|
||||
PaginationMiniOptionsMarginInlineStart = token.MarginXXS / 2,
|
||||
PaginationMiniQuickJumperInputWidth = token.ControlHeightLG * 1.1,
|
||||
PaginationItemPaddingInline = token.MarginXXS * 1.5,
|
||||
PaginationEllipsisLetterSpacing = token.MarginXXS / 2,
|
||||
PaginationSlashMarginInlineStart = token.MarginXXS,
|
||||
PaginationSlashMarginInlineEnd = token.MarginSM,
|
||||
PaginationEllipsisTextIndent = "0.13em",
|
||||
},
|
||||
initInputToken(token));
|
||||
return new Unknown_145
|
||||
{
|
||||
GenPaginationStyle(paginationToken),
|
||||
Token.Wireframe && genBorderedStyle(paginationToken)
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,103 @@
|
|||
using System;
|
||||
using CssInCs;
|
||||
using static AntDesign.GlobalStyle;
|
||||
using static AntDesign.Theme;
|
||||
|
||||
namespace AntDesign
|
||||
{
|
||||
public partial class PopconfirmToken
|
||||
{
|
||||
public int ZIndexPopup { get; set; }
|
||||
|
||||
}
|
||||
|
||||
public partial class PopconfirmToken : TokenWithCommonCls
|
||||
{
|
||||
}
|
||||
|
||||
public partial class Popconfirm
|
||||
{
|
||||
public Unknown_1 GenBaseStyle(Unknown_4 token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var iconCls = token.IconCls;
|
||||
var zIndexPopup = token.ZIndexPopup;
|
||||
var colorText = token.ColorText;
|
||||
var colorWarning = token.ColorWarning;
|
||||
var marginXS = token.MarginXS;
|
||||
var fontSize = token.FontSize;
|
||||
var fontWeightStrong = token.FontWeightStrong;
|
||||
var lineHeight = token.LineHeight;
|
||||
return new Unknown_5()
|
||||
{
|
||||
[componentCls] = new Unknown_6()
|
||||
{
|
||||
ZIndex = zIndexPopup,
|
||||
[$"{componentCls}-inner-content"] = new Unknown_7()
|
||||
{
|
||||
Color = colorText,
|
||||
},
|
||||
[$"{componentCls}-message"] = new Unknown_8()
|
||||
{
|
||||
Position = "relative",
|
||||
MarginBottom = marginXS,
|
||||
Color = colorText,
|
||||
FontSize = fontSize,
|
||||
Display = "flex",
|
||||
FlexWrap = "nowrap",
|
||||
AlignItems = "start",
|
||||
[$"> {componentCls}-message-icon {iconCls}"] = new Unknown_9()
|
||||
{
|
||||
Color = colorWarning,
|
||||
FontSize = fontSize,
|
||||
Flex = "none",
|
||||
LineHeight = 1,
|
||||
PaddingTop = (Math.Round(fontSize * lineHeight) - fontSize) / 2,
|
||||
},
|
||||
["&-title"] = new Unknown_10()
|
||||
{
|
||||
Flex = "auto",
|
||||
MarginInlineStart = marginXS,
|
||||
},
|
||||
["&-title-only"] = new Unknown_11()
|
||||
{
|
||||
FontWeight = fontWeightStrong,
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-description"] = new Unknown_12()
|
||||
{
|
||||
Position = "relative",
|
||||
MarginInlineStart = fontSize + marginXS,
|
||||
MarginBottom = marginXS,
|
||||
Color = colorText,
|
||||
FontSize = fontSize,
|
||||
},
|
||||
[$"{componentCls}-buttons"] = new Unknown_13()
|
||||
{
|
||||
TextAlign = "end",
|
||||
["button"] = new Unknown_14()
|
||||
{
|
||||
MarginInlineStart = marginXS,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_2 GenComponentStyleHook(Unknown_15 token)
|
||||
{
|
||||
return GenBaseStyle(token);
|
||||
}
|
||||
|
||||
public Unknown_3 GenComponentStyleHook(Unknown_16 token)
|
||||
{
|
||||
var zIndexPopupBase = token.ZIndexPopupBase;
|
||||
return new Unknown_17()
|
||||
{
|
||||
ZIndexPopup = zIndexPopupBase + 60,
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,214 @@
|
|||
using System;
|
||||
using CssInCs;
|
||||
using static AntDesign.GlobalStyle;
|
||||
using static AntDesign.Theme;
|
||||
|
||||
namespace AntDesign
|
||||
{
|
||||
public partial class PopoverToken
|
||||
{
|
||||
public int ZIndexPopup { get; set; }
|
||||
|
||||
public int Width { get; set; }
|
||||
|
||||
}
|
||||
|
||||
public partial class PopoverToken : TokenWithCommonCls
|
||||
{
|
||||
public string PopoverBg { get; set; }
|
||||
|
||||
public string PopoverColor { get; set; }
|
||||
|
||||
public string PopoverPadding { get; set; }
|
||||
|
||||
}
|
||||
|
||||
public partial class Popover
|
||||
{
|
||||
public Unknown_1 GenBaseStyle(Unknown_7 token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var popoverBg = token.PopoverBg;
|
||||
var popoverColor = token.PopoverColor;
|
||||
var width = token.Width;
|
||||
var fontWeightStrong = token.FontWeightStrong;
|
||||
var popoverPadding = token.PopoverPadding;
|
||||
var boxShadowSecondary = token.BoxShadowSecondary;
|
||||
var colorTextHeading = token.ColorTextHeading;
|
||||
var borderRadius = token.BorderRadiusLG;
|
||||
var zIndexPopup = token.ZIndexPopup;
|
||||
var marginXS = token.MarginXS;
|
||||
var colorBgElevated = token.ColorBgElevated;
|
||||
return new Unknown_8
|
||||
{
|
||||
new Unknown_9()
|
||||
{
|
||||
[componentCls] = new Unknown_10()
|
||||
{
|
||||
["..."] = ResetComponent(token),
|
||||
Position = "absolute",
|
||||
Top = 0,
|
||||
Left = new Unknown_11()
|
||||
{
|
||||
SkipCheck = true,
|
||||
Value = 0,
|
||||
},
|
||||
ZIndex = zIndexPopup,
|
||||
FontWeight = "normal",
|
||||
WhiteSpace = "normal",
|
||||
TextAlign = "start",
|
||||
Cursor = "auto",
|
||||
UserSelect = "text",
|
||||
TransformOrigin = @$"var(--arrow-x, 50%) var(--arrow-y, 50%)",
|
||||
["--antd-arrow-background-color"] = colorBgElevated,
|
||||
["&-rtl"] = new Unknown_12()
|
||||
{
|
||||
Direction = "rtl",
|
||||
},
|
||||
["&-hidden"] = new Unknown_13()
|
||||
{
|
||||
Display = "none",
|
||||
},
|
||||
[$"{componentCls}-content"] = new Unknown_14()
|
||||
{
|
||||
Position = "relative",
|
||||
},
|
||||
[$"{componentCls}-inner"] = new Unknown_15()
|
||||
{
|
||||
BackgroundColor = popoverBg,
|
||||
BackgroundClip = "padding-box",
|
||||
BorderRadius = borderRadius,
|
||||
BoxShadow = boxShadowSecondary,
|
||||
Padding = popoverPadding,
|
||||
},
|
||||
[$"{componentCls}-title"] = new Unknown_16()
|
||||
{
|
||||
MinWidth = width,
|
||||
MarginBottom = marginXS,
|
||||
Color = colorTextHeading,
|
||||
FontWeight = fontWeightStrong,
|
||||
},
|
||||
[$"{componentCls}-inner-content"] = new Unknown_17()
|
||||
{
|
||||
Color = popoverColor,
|
||||
},
|
||||
},
|
||||
},
|
||||
GetArrowStyle(token, {
|
||||
colorBg: "var(--antd-arrow-background-color)",
|
||||
}),
|
||||
new Unknown_18()
|
||||
{
|
||||
[$"{componentCls}-pure"] = new Unknown_19()
|
||||
{
|
||||
Position = "relative",
|
||||
MaxWidth = "none",
|
||||
Margin = token.SizePopupArrow,
|
||||
Display = "inline-block",
|
||||
[$"{componentCls}-content"] = new Unknown_20()
|
||||
{
|
||||
Display = "inline-block",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_3 GenColorStyle(Unknown_21 token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
return new Unknown_22()
|
||||
{
|
||||
[componentCls] = PresetColors.Map(
|
||||
(colorKey) => {
|
||||
var lightColor = token[@$"{colorKey}6"];
|
||||
return new Unknown_23()
|
||||
{
|
||||
[$"&{componentCls}-{colorKey}"] = new Unknown_24()
|
||||
{
|
||||
["--antd-arrow-background-color"] = lightColor,
|
||||
[$"{componentCls}-inner"] = new Unknown_25()
|
||||
{
|
||||
BackgroundColor = lightColor,
|
||||
},
|
||||
[$"{componentCls}-arrow"] = new Unknown_26()
|
||||
{
|
||||
Background = "transparent",
|
||||
},
|
||||
},
|
||||
};
|
||||
})
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_4 GenWireframeStyle(Unknown_27 token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var lineWidth = token.LineWidth;
|
||||
var lineType = token.LineType;
|
||||
var colorSplit = token.ColorSplit;
|
||||
var paddingSM = token.PaddingSM;
|
||||
var controlHeight = token.ControlHeight;
|
||||
var fontSize = token.FontSize;
|
||||
var lineHeight = token.LineHeight;
|
||||
var padding = token.Padding;
|
||||
var titlePaddingBlockDist = ControlHeight - Math.Round(fontSize * lineHeight);
|
||||
var popoverTitlePaddingBlockTop = titlePaddingBlockDist / 2;
|
||||
var popoverTitlePaddingBlockBottom = titlePaddingBlockDist / 2 - lineWidth;
|
||||
var popoverPaddingHorizontal = padding;
|
||||
return new Unknown_28()
|
||||
{
|
||||
[componentCls] = new Unknown_29()
|
||||
{
|
||||
[$"{componentCls}-inner"] = new Unknown_30()
|
||||
{
|
||||
Padding = 0,
|
||||
},
|
||||
[$"{componentCls}-title"] = new Unknown_31()
|
||||
{
|
||||
Margin = 0,
|
||||
Padding = @$"{popoverTitlePaddingBlockTop}px {popoverPaddingHorizontal}px {popoverTitlePaddingBlockBottom}px",
|
||||
BorderBottom = @$"{lineWidth}px {lineType} {colorSplit}",
|
||||
},
|
||||
[$"{componentCls}-inner-content"] = new Unknown_32()
|
||||
{
|
||||
Padding = @$"{paddingSM}px {popoverPaddingHorizontal}px",
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_5 GenComponentStyleHook(Unknown_33 token)
|
||||
{
|
||||
var colorBgElevated = token.ColorBgElevated;
|
||||
var colorText = token.ColorText;
|
||||
var wireframe = token.Wireframe;
|
||||
var popoverToken = MergeToken(
|
||||
token,
|
||||
new Unknown_34()
|
||||
{
|
||||
PopoverBg = colorBgElevated,
|
||||
PopoverColor = colorText,
|
||||
PopoverPadding = 12,
|
||||
});
|
||||
return new Unknown_35
|
||||
{
|
||||
GenBaseStyle(popoverToken),
|
||||
GenColorStyle(popoverToken),
|
||||
Wireframe && genWireframeStyle(popoverToken),
|
||||
InitZoomMotion(popoverToken, "zoom-big")
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_6 GenComponentStyleHook(Unknown_36 args)
|
||||
{
|
||||
return new Unknown_37()
|
||||
{
|
||||
ZIndexPopup = zIndexPopupBase + 30,
|
||||
Width = 177,
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,326 @@
|
|||
using System;
|
||||
using CssInCs;
|
||||
using static AntDesign.GlobalStyle;
|
||||
using static AntDesign.Theme;
|
||||
|
||||
namespace AntDesign
|
||||
{
|
||||
public partial class ProgressToken
|
||||
{
|
||||
}
|
||||
|
||||
public partial class ProgressToken : TokenWithCommonCls
|
||||
{
|
||||
public int ProgressLineRadius { get; set; }
|
||||
|
||||
public string ProgressInfoTextColor { get; set; }
|
||||
|
||||
public string ProgressRemainingColor { get; set; }
|
||||
|
||||
public string ProgressDefaultColor { get; set; }
|
||||
|
||||
public int ProgressStepMinWidth { get; set; }
|
||||
|
||||
public int ProgressStepMarginInlineEnd { get; set; }
|
||||
|
||||
public string ProgressActiveMotionDuration { get; set; }
|
||||
|
||||
}
|
||||
|
||||
public partial class Progress
|
||||
{
|
||||
private Keyframes antProgressActive = new Keyframes("antProgressActive")
|
||||
{
|
||||
["0%"] = new Keyframes()
|
||||
{
|
||||
Transform = "translateX(-100%) scaleX(0)",
|
||||
Opacity = 0.1f,
|
||||
},
|
||||
["20%"] = new Keyframes()
|
||||
{
|
||||
Transform = "translateX(-100%) scaleX(0)",
|
||||
Opacity = 0.5f,
|
||||
},
|
||||
To = new Keyframes()
|
||||
{
|
||||
Transform = "translateX(0) scaleX(1)",
|
||||
Opacity = 0,
|
||||
},
|
||||
};
|
||||
|
||||
public Unknown_1 GenBaseStyle(Unknown_4 token)
|
||||
{
|
||||
var progressCls = token.ComponentCls;
|
||||
var iconPrefixCls = token.IconCls;
|
||||
return new Unknown_5()
|
||||
{
|
||||
[progressCls] = new Unknown_6()
|
||||
{
|
||||
["..."] = ResetComponent(token),
|
||||
Display = "inline-block",
|
||||
["&-rtl"] = new Unknown_7()
|
||||
{
|
||||
Direction = "rtl",
|
||||
},
|
||||
["&-line"] = new Unknown_8()
|
||||
{
|
||||
Position = "relative",
|
||||
Width = "100%",
|
||||
FontSize = token.FontSize,
|
||||
MarginInlineEnd = token.MarginXS,
|
||||
MarginBottom = token.MarginXS,
|
||||
},
|
||||
[$"{progressCls}-outer"] = new Unknown_9()
|
||||
{
|
||||
Display = "inline-block",
|
||||
Width = "100%",
|
||||
},
|
||||
[$"&{progressCls}-show-info"] = new Unknown_10()
|
||||
{
|
||||
[$"{progressCls}-outer"] = new Unknown_11()
|
||||
{
|
||||
MarginInlineEnd = @$"calc(-2em - {token.MarginXS}px)",
|
||||
PaddingInlineEnd = @$"calc(2em + {token.PaddingXS}px)",
|
||||
},
|
||||
},
|
||||
[$"{progressCls}-inner"] = new Unknown_12()
|
||||
{
|
||||
Position = "relative",
|
||||
Display = "inline-block",
|
||||
Width = "100%",
|
||||
Overflow = "hidden",
|
||||
VerticalAlign = "middle",
|
||||
BackgroundColor = token.ProgressRemainingColor,
|
||||
BorderRadius = token.ProgressLineRadius,
|
||||
},
|
||||
[$"{progressCls}-inner:not({progressCls}-circle-gradient)"] = new Unknown_13()
|
||||
{
|
||||
[$"{progressCls}-circle-path"] = new Unknown_14()
|
||||
{
|
||||
Stroke = token.ColorInfo,
|
||||
},
|
||||
},
|
||||
[$"{progressCls}-success-bg, {progressCls}-bg"] = new Unknown_15()
|
||||
{
|
||||
Position = "relative",
|
||||
BackgroundColor = token.ColorInfo,
|
||||
BorderRadius = token.ProgressLineRadius,
|
||||
Transition = @$"all {token.MotionDurationSlow} {token.MotionEaseInOutCirc}",
|
||||
},
|
||||
[$"{progressCls}-success-bg"] = new Unknown_16()
|
||||
{
|
||||
Position = "absolute",
|
||||
InsetBlockStart = 0,
|
||||
InsetInlineStart = 0,
|
||||
BackgroundColor = token.ColorSuccess,
|
||||
},
|
||||
[$"{progressCls}-text"] = new Unknown_17()
|
||||
{
|
||||
Display = "inline-block",
|
||||
Width = "2em",
|
||||
MarginInlineStart = token.MarginXS,
|
||||
Color = token.ProgressInfoTextColor,
|
||||
LineHeight = 1,
|
||||
WhiteSpace = "nowrap",
|
||||
TextAlign = "start",
|
||||
VerticalAlign = "middle",
|
||||
WordBreak = "normal",
|
||||
[iconPrefixCls] = new Unknown_18()
|
||||
{
|
||||
FontSize = token.FontSize,
|
||||
},
|
||||
},
|
||||
[$"&{progressCls}-status-active"] = new Unknown_19()
|
||||
{
|
||||
[$"{progressCls}-bg::before"] = new Unknown_20()
|
||||
{
|
||||
Position = "absolute",
|
||||
Inset = 0,
|
||||
BackgroundColor = token.ColorBgContainer,
|
||||
BorderRadius = token.ProgressLineRadius,
|
||||
Opacity = 0,
|
||||
AnimationName = antProgressActive,
|
||||
AnimationDuration = token.ProgressActiveMotionDuration,
|
||||
AnimationTimingFunction = token.MotionEaseOutQuint,
|
||||
AnimationIterationCount = "infinite",
|
||||
Content = "\"\"",
|
||||
},
|
||||
},
|
||||
[$"&{progressCls}-status-exception"] = new Unknown_21()
|
||||
{
|
||||
[$"{progressCls}-bg"] = new Unknown_22()
|
||||
{
|
||||
BackgroundColor = token.ColorError,
|
||||
},
|
||||
[$"{progressCls}-text"] = new Unknown_23()
|
||||
{
|
||||
Color = token.ColorError,
|
||||
},
|
||||
},
|
||||
[$"&{progressCls}-status-exception {progressCls}-inner:not({progressCls}-circle-gradient)"] = new Unknown_24()
|
||||
{
|
||||
[$"{progressCls}-circle-path"] = new Unknown_25()
|
||||
{
|
||||
Stroke = token.ColorError,
|
||||
},
|
||||
},
|
||||
[$"&{progressCls}-status-success"] = new Unknown_26()
|
||||
{
|
||||
[$"{progressCls}-bg"] = new Unknown_27()
|
||||
{
|
||||
BackgroundColor = token.ColorSuccess,
|
||||
},
|
||||
[$"{progressCls}-text"] = new Unknown_28()
|
||||
{
|
||||
Color = token.ColorSuccess,
|
||||
},
|
||||
},
|
||||
[$"&{progressCls}-status-success {progressCls}-inner:not({progressCls}-circle-gradient)"] = new Unknown_29()
|
||||
{
|
||||
[$"{progressCls}-circle-path"] = new Unknown_30()
|
||||
{
|
||||
Stroke = token.ColorSuccess,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_2 GenCircleStyle(Unknown_31 token)
|
||||
{
|
||||
var progressCls = token.ComponentCls;
|
||||
var iconPrefixCls = token.IconCls;
|
||||
return new Unknown_32()
|
||||
{
|
||||
[progressCls] = new Unknown_33()
|
||||
{
|
||||
[$"{progressCls}-circle-trail"] = new Unknown_34()
|
||||
{
|
||||
Stroke = token.ProgressRemainingColor,
|
||||
},
|
||||
[$"&{progressCls}-circle {progressCls}-inner"] = new Unknown_35()
|
||||
{
|
||||
Position = "relative",
|
||||
LineHeight = 1,
|
||||
BackgroundColor = "transparent",
|
||||
},
|
||||
[$"&{progressCls}-circle {progressCls}-text"] = new Unknown_36()
|
||||
{
|
||||
Position = "absolute",
|
||||
InsetBlockStart = "50%",
|
||||
InsetInlineStart = 0,
|
||||
Width = "100%",
|
||||
Margin = 0,
|
||||
Padding = 0,
|
||||
Color = token.ColorText,
|
||||
LineHeight = 1,
|
||||
WhiteSpace = "normal",
|
||||
TextAlign = "center",
|
||||
Transform = "translateY(-50%)",
|
||||
[iconPrefixCls] = new Unknown_37()
|
||||
{
|
||||
FontSize = @$"{token.FontSize / token.FontSizeSM}em",
|
||||
},
|
||||
},
|
||||
[$"{progressCls}-circle&-status-exception"] = new Unknown_38()
|
||||
{
|
||||
[$"{progressCls}-text"] = new Unknown_39()
|
||||
{
|
||||
Color = token.ColorError,
|
||||
},
|
||||
},
|
||||
[$"{progressCls}-circle&-status-success"] = new Unknown_40()
|
||||
{
|
||||
[$"{progressCls}-text"] = new Unknown_41()
|
||||
{
|
||||
Color = token.ColorSuccess,
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"{progressCls}-inline-circle"] = new Unknown_42()
|
||||
{
|
||||
LineHeight = 1,
|
||||
[$"{progressCls}-inner"] = new Unknown_43()
|
||||
{
|
||||
VerticalAlign = "bottom",
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenStepStyle(ProgressToken token)
|
||||
{
|
||||
var progressCls = token.ComponentCls;
|
||||
return new CSSObject()
|
||||
{
|
||||
[progressCls] = new CSSObject()
|
||||
{
|
||||
[$"{progressCls}-steps"] = new CSSObject()
|
||||
{
|
||||
Display = "inline-block",
|
||||
["&-outer"] = new CSSObject()
|
||||
{
|
||||
Display = "flex",
|
||||
FlexDirection = "row",
|
||||
AlignItems = "center",
|
||||
},
|
||||
["&-item"] = new CSSObject()
|
||||
{
|
||||
FlexShrink = 0,
|
||||
MinWidth = token.ProgressStepMinWidth,
|
||||
MarginInlineEnd = token.ProgressStepMarginInlineEnd,
|
||||
BackgroundColor = token.ProgressRemainingColor,
|
||||
Transition = @$"all {token.MotionDurationSlow}",
|
||||
["&-active"] = new CSSObject()
|
||||
{
|
||||
BackgroundColor = token.ColorInfo,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenSmallLine(ProgressToken token)
|
||||
{
|
||||
var progressCls = token.ComponentCls;
|
||||
var iconPrefixCls = token.IconCls;
|
||||
return new CSSObject()
|
||||
{
|
||||
[progressCls] = new CSSObject()
|
||||
{
|
||||
[$"{progressCls}-small&-line, {progressCls}-small&-line {progressCls}-text {iconPrefixCls}"] = new CSSObject()
|
||||
{
|
||||
FontSize = token.FontSizeSM,
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_3 GenComponentStyleHook(Unknown_44 token)
|
||||
{
|
||||
var progressStepMarginInlineEnd = token.MarginXXS / 2;
|
||||
var progressToken = MergeToken(
|
||||
token,
|
||||
new Unknown_45()
|
||||
{
|
||||
ProgressLineRadius = 100,
|
||||
ProgressInfoTextColor = token.ColorText,
|
||||
ProgressDefaultColor = token.ColorInfo,
|
||||
ProgressRemainingColor = token.ColorFillSecondary,
|
||||
ProgressStepMarginInlineEnd = progressStepMarginInlineEnd,
|
||||
ProgressStepMinWidth = progressStepMarginInlineEnd,
|
||||
ProgressActiveMotionDuration = "2.4s",
|
||||
});
|
||||
return new Unknown_46
|
||||
{
|
||||
GenBaseStyle(progressToken),
|
||||
GenCircleStyle(progressToken),
|
||||
GenStepStyle(progressToken),
|
||||
GenSmallLine(progressToken)
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,572 @@
|
|||
using System;
|
||||
using CssInCs;
|
||||
using static AntDesign.GlobalStyle;
|
||||
using static AntDesign.Theme;
|
||||
|
||||
namespace AntDesign
|
||||
{
|
||||
public partial class RadioToken
|
||||
{
|
||||
}
|
||||
|
||||
public partial class RadioToken : TokenWithCommonCls
|
||||
{
|
||||
public string RadioFocusShadow { get; set; }
|
||||
|
||||
public string RadioButtonFocusShadow { get; set; }
|
||||
|
||||
public int RadioSize { get; set; }
|
||||
|
||||
public int RadioTop { get; set; }
|
||||
|
||||
public int RadioDotSize { get; set; }
|
||||
|
||||
public int RadioDotDisabledSize { get; set; }
|
||||
|
||||
public string RadioCheckedColor { get; set; }
|
||||
|
||||
public string RadioDotDisabledColor { get; set; }
|
||||
|
||||
public string RadioSolidCheckedColor { get; set; }
|
||||
|
||||
public string RadioButtonBg { get; set; }
|
||||
|
||||
public string RadioButtonCheckedBg { get; set; }
|
||||
|
||||
public string RadioButtonColor { get; set; }
|
||||
|
||||
public string RadioButtonHoverColor { get; set; }
|
||||
|
||||
public string RadioButtonActiveColor { get; set; }
|
||||
|
||||
public int RadioButtonPaddingHorizontal { get; set; }
|
||||
|
||||
public string RadioDisabledButtonCheckedBg { get; set; }
|
||||
|
||||
public string RadioDisabledButtonCheckedColor { get; set; }
|
||||
|
||||
public int RadioWrapperMarginRight { get; set; }
|
||||
|
||||
}
|
||||
|
||||
public partial class Radio
|
||||
{
|
||||
private Keyframes antRadioEffect = new Keyframes("antRadioEffect")
|
||||
{
|
||||
["0%"] = new Keyframes()
|
||||
{
|
||||
Transform = "scale(1)",
|
||||
Opacity = 0.5f,
|
||||
},
|
||||
["100%"] = new Keyframes()
|
||||
{
|
||||
Transform = "scale(1.6)",
|
||||
Opacity = 0,
|
||||
},
|
||||
};
|
||||
|
||||
public Unknown_1 GetGroupRadioStyle(Unknown_5 token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var antCls = token.AntCls;
|
||||
var groupPrefixCls = @$"{componentCls}-group";
|
||||
return new Unknown_6()
|
||||
{
|
||||
[groupPrefixCls] = new Unknown_7()
|
||||
{
|
||||
["..."] = ResetComponent(token),
|
||||
Display = "inline-block",
|
||||
FontSize = 0,
|
||||
[$"&{groupPrefixCls}-rtl"] = new Unknown_8()
|
||||
{
|
||||
Direction = "rtl",
|
||||
},
|
||||
[$"{antCls}-badge {antCls}-badge-count"] = new Unknown_9()
|
||||
{
|
||||
ZIndex = 1,
|
||||
},
|
||||
[$"> {antCls}-badge:not(:first-child) > {antCls}-button-wrapper"] = new Unknown_10()
|
||||
{
|
||||
BorderInlineStart = "none",
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_2 GetRadioBasicStyle(Unknown_11 token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var radioWrapperMarginRight = token.RadioWrapperMarginRight;
|
||||
var radioCheckedColor = token.RadioCheckedColor;
|
||||
var radioSize = token.RadioSize;
|
||||
var motionDurationSlow = token.MotionDurationSlow;
|
||||
var motionDurationMid = token.MotionDurationMid;
|
||||
var motionEaseInOut = token.MotionEaseInOut;
|
||||
var motionEaseInOutCirc = token.MotionEaseInOutCirc;
|
||||
var radioButtonBg = token.RadioButtonBg;
|
||||
var colorBorder = token.ColorBorder;
|
||||
var lineWidth = token.LineWidth;
|
||||
var radioDotSize = token.RadioDotSize;
|
||||
var colorBgContainerDisabled = token.ColorBgContainerDisabled;
|
||||
var colorTextDisabled = token.ColorTextDisabled;
|
||||
var paddingXS = token.PaddingXS;
|
||||
var radioDotDisabledColor = token.RadioDotDisabledColor;
|
||||
var lineType = token.LineType;
|
||||
var radioDotDisabledSize = token.RadioDotDisabledSize;
|
||||
var wireframe = token.Wireframe;
|
||||
var colorWhite = token.ColorWhite;
|
||||
var radioInnerPrefixCls = @$"{componentCls}-inner";
|
||||
return new Unknown_12()
|
||||
{
|
||||
[$"{componentCls}-wrapper"] = new Unknown_13()
|
||||
{
|
||||
["..."] = ResetComponent(token),
|
||||
Position = "relative",
|
||||
Display = "inline-flex",
|
||||
AlignItems = "baseline",
|
||||
MarginInlineStart = 0,
|
||||
MarginInlineEnd = radioWrapperMarginRight,
|
||||
Cursor = "pointer",
|
||||
[$"&{componentCls}-wrapper-rtl"] = new Unknown_14()
|
||||
{
|
||||
Direction = "rtl",
|
||||
},
|
||||
["&-disabled"] = new Unknown_15()
|
||||
{
|
||||
Cursor = "not-allowed",
|
||||
Color = token.ColorTextDisabled,
|
||||
},
|
||||
["&::after"] = new Unknown_16()
|
||||
{
|
||||
Display = "inline-block",
|
||||
Width = 0,
|
||||
Overflow = "hidden",
|
||||
Content = '"\\a0"',
|
||||
},
|
||||
[$"{componentCls}-checked::after"] = new Unknown_17()
|
||||
{
|
||||
Position = "absolute",
|
||||
InsetBlockStart = 0,
|
||||
InsetInlineStart = 0,
|
||||
Width = "100%",
|
||||
Height = "100%",
|
||||
Border = @$"{lineWidth}px {lineType} {radioCheckedColor}",
|
||||
BorderRadius = "50%",
|
||||
Visibility = "hidden",
|
||||
AnimationName = antRadioEffect,
|
||||
AnimationDuration = motionDurationSlow,
|
||||
AnimationTimingFunction = motionEaseInOut,
|
||||
AnimationFillMode = "both",
|
||||
Content = "\"\"",
|
||||
},
|
||||
[componentCls] = new Unknown_18()
|
||||
{
|
||||
["..."] = ResetComponent(token),
|
||||
Position = "relative",
|
||||
Display = "inline-block",
|
||||
Outline = "none",
|
||||
Cursor = "pointer",
|
||||
AlignSelf = "center",
|
||||
},
|
||||
[$"{componentCls}-wrapper:hover&,&:hover{radioInnerPrefixCls}"] = new Unknown_19()
|
||||
{
|
||||
BorderColor = radioCheckedColor,
|
||||
},
|
||||
[$"{componentCls}-input:focus-visible + {radioInnerPrefixCls}"] = new Unknown_20()
|
||||
{
|
||||
["..."] = GenFocusOutline(token)
|
||||
},
|
||||
[$"{componentCls}:hover::after, {componentCls}-wrapper:hover &::after"] = new Unknown_21()
|
||||
{
|
||||
Visibility = "visible",
|
||||
},
|
||||
[$"{componentCls}-inner"] = new Unknown_22()
|
||||
{
|
||||
["&::after"] = new Unknown_23()
|
||||
{
|
||||
BoxSizing = "border-box",
|
||||
Position = "absolute",
|
||||
InsetBlockStart = "50%",
|
||||
InsetInlineStart = "50%",
|
||||
Display = "block",
|
||||
Width = radioSize,
|
||||
Height = radioSize,
|
||||
MarginBlockStart = radioSize / -2,
|
||||
MarginInlineStart = radioSize / -2,
|
||||
BackgroundColor = wireframe ? radioCheckedColor : colorWhite,
|
||||
BorderBlockStart = 0,
|
||||
BorderInlineStart = 0,
|
||||
BorderRadius = radioSize,
|
||||
Transform = "scale(0)",
|
||||
Opacity = 0,
|
||||
Transition = @$"all {motionDurationSlow} {motionEaseInOutCirc}",
|
||||
Content = "\"\"",
|
||||
},
|
||||
BoxSizing = "border-box",
|
||||
Position = "relative",
|
||||
InsetBlockStart = 0,
|
||||
InsetInlineStart = 0,
|
||||
Display = "block",
|
||||
Width = radioSize,
|
||||
Height = radioSize,
|
||||
BackgroundColor = radioButtonBg,
|
||||
BorderColor = colorBorder,
|
||||
BorderStyle = "solid",
|
||||
BorderWidth = lineWidth,
|
||||
BorderRadius = "50%",
|
||||
Transition = @$"all {motionDurationMid}",
|
||||
},
|
||||
[$"{componentCls}-input"] = new Unknown_24()
|
||||
{
|
||||
Position = "absolute",
|
||||
InsetBlockStart = 0,
|
||||
InsetInlineEnd = 0,
|
||||
InsetBlockEnd = 0,
|
||||
InsetInlineStart = 0,
|
||||
ZIndex = 1,
|
||||
Cursor = "pointer",
|
||||
Opacity = 0,
|
||||
},
|
||||
[$"{componentCls}-checked"] = new Unknown_25()
|
||||
{
|
||||
[radioInnerPrefixCls] = new Unknown_26()
|
||||
{
|
||||
BorderColor = radioCheckedColor,
|
||||
BackgroundColor = wireframe ? radioButtonBg : radioCheckedColor,
|
||||
["&::after"] = new Unknown_27()
|
||||
{
|
||||
Transform = @$"scale({radioDotSize / radioSize})",
|
||||
Opacity = 1,
|
||||
Transition = @$"all {motionDurationSlow} {motionEaseInOutCirc}",
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-disabled"] = new Unknown_28()
|
||||
{
|
||||
Cursor = "not-allowed",
|
||||
[radioInnerPrefixCls] = new Unknown_29()
|
||||
{
|
||||
BackgroundColor = colorBgContainerDisabled,
|
||||
BorderColor = colorBorder,
|
||||
Cursor = "not-allowed",
|
||||
["&::after"] = new Unknown_30()
|
||||
{
|
||||
BackgroundColor = radioDotDisabledColor,
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-input"] = new Unknown_31()
|
||||
{
|
||||
Cursor = "not-allowed",
|
||||
},
|
||||
[$"{componentCls}-disabled + span"] = new Unknown_32()
|
||||
{
|
||||
Color = colorTextDisabled,
|
||||
Cursor = "not-allowed",
|
||||
},
|
||||
[$"&{componentCls}-checked"] = new Unknown_33()
|
||||
{
|
||||
[radioInnerPrefixCls] = new Unknown_34()
|
||||
{
|
||||
["&::after"] = new Unknown_35()
|
||||
{
|
||||
Transform = @$"scale({radioDotDisabledSize / radioSize})",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"span{componentCls} + *"] = new Unknown_36()
|
||||
{
|
||||
PaddingInlineStart = paddingXS,
|
||||
PaddingInlineEnd = paddingXS,
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_3 GetRadioButtonStyle(Unknown_37 token)
|
||||
{
|
||||
var radioButtonColor = token.RadioButtonColor;
|
||||
var controlHeight = token.ControlHeight;
|
||||
var componentCls = token.ComponentCls;
|
||||
var lineWidth = token.LineWidth;
|
||||
var lineType = token.LineType;
|
||||
var colorBorder = token.ColorBorder;
|
||||
var motionDurationSlow = token.MotionDurationSlow;
|
||||
var motionDurationMid = token.MotionDurationMid;
|
||||
var radioButtonPaddingHorizontal = token.RadioButtonPaddingHorizontal;
|
||||
var fontSize = token.FontSize;
|
||||
var radioButtonBg = token.RadioButtonBg;
|
||||
var fontSizeLG = token.FontSizeLG;
|
||||
var controlHeightLG = token.ControlHeightLG;
|
||||
var controlHeightSM = token.ControlHeightSM;
|
||||
var paddingXS = token.PaddingXS;
|
||||
var borderRadius = token.BorderRadius;
|
||||
var borderRadiusSM = token.BorderRadiusSM;
|
||||
var borderRadiusLG = token.BorderRadiusLG;
|
||||
var radioCheckedColor = token.RadioCheckedColor;
|
||||
var radioButtonCheckedBg = token.RadioButtonCheckedBg;
|
||||
var radioButtonHoverColor = token.RadioButtonHoverColor;
|
||||
var radioButtonActiveColor = token.RadioButtonActiveColor;
|
||||
var radioSolidCheckedColor = token.RadioSolidCheckedColor;
|
||||
var colorTextDisabled = token.ColorTextDisabled;
|
||||
var colorBgContainerDisabled = token.ColorBgContainerDisabled;
|
||||
var radioDisabledButtonCheckedColor = token.RadioDisabledButtonCheckedColor;
|
||||
var radioDisabledButtonCheckedBg = token.RadioDisabledButtonCheckedBg;
|
||||
return new Unknown_38()
|
||||
{
|
||||
[$"{componentCls}-button-wrapper"] = new Unknown_39()
|
||||
{
|
||||
Position = "relative",
|
||||
Display = "inline-block",
|
||||
Height = controlHeight,
|
||||
Margin = 0,
|
||||
PaddingInline = radioButtonPaddingHorizontal,
|
||||
PaddingBlock = 0,
|
||||
Color = radioButtonColor,
|
||||
FontSize = fontSize,
|
||||
LineHeight = @$"{controlHeight - lineWidth * 2}px",
|
||||
Background = radioButtonBg,
|
||||
Border = @$"{lineWidth}px {lineType} {colorBorder}",
|
||||
BorderBlockStartWidth = lineWidth + 0.02,
|
||||
BorderInlineStartWidth = 0,
|
||||
BorderInlineEndWidth = lineWidth,
|
||||
Cursor = "pointer",
|
||||
Transition = [
|
||||
`color ${motionDurationMid}`,
|
||||
`background ${motionDurationMid}`,
|
||||
`border-color ${motionDurationMid}`,
|
||||
`box-shadow ${motionDurationMid}`,
|
||||
].join(","),
|
||||
["a"] = new Unknown_40()
|
||||
{
|
||||
Color = radioButtonColor,
|
||||
},
|
||||
[$"> {componentCls}-button"] = new Unknown_41()
|
||||
{
|
||||
Position = "absolute",
|
||||
InsetBlockStart = 0,
|
||||
InsetInlineStart = 0,
|
||||
ZIndex = -1,
|
||||
Width = "100%",
|
||||
Height = "100%",
|
||||
},
|
||||
["&:not(:first-child)"] = new Unknown_42()
|
||||
{
|
||||
["&::before"] = new Unknown_43()
|
||||
{
|
||||
Position = "absolute",
|
||||
InsetBlockStart = -lineWidth,
|
||||
InsetInlineStart = -lineWidth,
|
||||
Display = "block",
|
||||
BoxSizing = "content-box",
|
||||
Width = 1,
|
||||
Height = "100%",
|
||||
PaddingBlock = lineWidth,
|
||||
PaddingInline = 0,
|
||||
BackgroundColor = colorBorder,
|
||||
Transition = @$"background-color {motionDurationSlow}",
|
||||
Content = "\"\"",
|
||||
},
|
||||
},
|
||||
["&:first-child"] = new Unknown_44()
|
||||
{
|
||||
BorderInlineStart = @$"{lineWidth}px {lineType} {colorBorder}",
|
||||
BorderStartStartRadius = borderRadius,
|
||||
BorderEndStartRadius = borderRadius,
|
||||
},
|
||||
["&:last-child"] = new Unknown_45()
|
||||
{
|
||||
BorderStartEndRadius = borderRadius,
|
||||
BorderEndEndRadius = borderRadius,
|
||||
},
|
||||
["&:first-child:last-child"] = new Unknown_46()
|
||||
{
|
||||
BorderRadius = borderRadius,
|
||||
},
|
||||
[$"{componentCls}-group-large &"] = new Unknown_47()
|
||||
{
|
||||
Height = controlHeightLG,
|
||||
FontSize = fontSizeLG,
|
||||
LineHeight = @$"{controlHeightLG - lineWidth * 2}px",
|
||||
["&:first-child"] = new Unknown_48()
|
||||
{
|
||||
BorderStartStartRadius = borderRadiusLG,
|
||||
BorderEndStartRadius = borderRadiusLG,
|
||||
},
|
||||
["&:last-child"] = new Unknown_49()
|
||||
{
|
||||
BorderStartEndRadius = borderRadiusLG,
|
||||
BorderEndEndRadius = borderRadiusLG,
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-group-small &"] = new Unknown_50()
|
||||
{
|
||||
Height = controlHeightSM,
|
||||
PaddingInline = paddingXS - lineWidth,
|
||||
PaddingBlock = 0,
|
||||
LineHeight = @$"{controlHeightSM - lineWidth * 2}px",
|
||||
["&:first-child"] = new Unknown_51()
|
||||
{
|
||||
BorderStartStartRadius = borderRadiusSM,
|
||||
BorderEndStartRadius = borderRadiusSM,
|
||||
},
|
||||
["&:last-child"] = new Unknown_52()
|
||||
{
|
||||
BorderStartEndRadius = borderRadiusSM,
|
||||
BorderEndEndRadius = borderRadiusSM,
|
||||
},
|
||||
},
|
||||
["&:hover"] = new Unknown_53()
|
||||
{
|
||||
Position = "relative",
|
||||
Color = radioCheckedColor,
|
||||
},
|
||||
["&:has(:focus-visible)"] = new Unknown_54()
|
||||
{
|
||||
["..."] = GenFocusOutline(token)
|
||||
},
|
||||
[$"{componentCls}-inner, input[type=\"checkbox\"], input[type=\"radio\"]"] = new Unknown_55()
|
||||
{
|
||||
Width = 0,
|
||||
Height = 0,
|
||||
Opacity = 0,
|
||||
PointerEvents = "none",
|
||||
},
|
||||
[$"&-checked:not({componentCls}-button-wrapper-disabled)"] = new Unknown_56()
|
||||
{
|
||||
ZIndex = 1,
|
||||
Color = radioCheckedColor,
|
||||
Background = radioButtonCheckedBg,
|
||||
BorderColor = radioCheckedColor,
|
||||
["&::before"] = new Unknown_57()
|
||||
{
|
||||
BackgroundColor = radioCheckedColor,
|
||||
},
|
||||
["&:first-child"] = new Unknown_58()
|
||||
{
|
||||
BorderColor = radioCheckedColor,
|
||||
},
|
||||
["&:hover"] = new Unknown_59()
|
||||
{
|
||||
Color = radioButtonHoverColor,
|
||||
BorderColor = radioButtonHoverColor,
|
||||
["&::before"] = new Unknown_60()
|
||||
{
|
||||
BackgroundColor = radioButtonHoverColor,
|
||||
},
|
||||
},
|
||||
["&:active"] = new Unknown_61()
|
||||
{
|
||||
Color = radioButtonActiveColor,
|
||||
BorderColor = radioButtonActiveColor,
|
||||
["&::before"] = new Unknown_62()
|
||||
{
|
||||
BackgroundColor = radioButtonActiveColor,
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-group-solid &-checked:not({componentCls}-button-wrapper-disabled)"] = new Unknown_63()
|
||||
{
|
||||
Color = radioSolidCheckedColor,
|
||||
Background = radioCheckedColor,
|
||||
BorderColor = radioCheckedColor,
|
||||
["&:hover"] = new Unknown_64()
|
||||
{
|
||||
Color = radioSolidCheckedColor,
|
||||
Background = radioButtonHoverColor,
|
||||
BorderColor = radioButtonHoverColor,
|
||||
},
|
||||
["&:active"] = new Unknown_65()
|
||||
{
|
||||
Color = radioSolidCheckedColor,
|
||||
Background = radioButtonActiveColor,
|
||||
BorderColor = radioButtonActiveColor,
|
||||
},
|
||||
},
|
||||
["&-disabled"] = new Unknown_66()
|
||||
{
|
||||
Color = colorTextDisabled,
|
||||
BackgroundColor = colorBgContainerDisabled,
|
||||
BorderColor = colorBorder,
|
||||
Cursor = "not-allowed",
|
||||
["&:first-child, &:hover"] = new Unknown_67()
|
||||
{
|
||||
Color = colorTextDisabled,
|
||||
BackgroundColor = colorBgContainerDisabled,
|
||||
BorderColor = colorBorder,
|
||||
},
|
||||
},
|
||||
[$"&-disabled{componentCls}-button-wrapper-checked"] = new Unknown_68()
|
||||
{
|
||||
Color = radioDisabledButtonCheckedColor,
|
||||
BackgroundColor = radioDisabledButtonCheckedBg,
|
||||
BorderColor = colorBorder,
|
||||
BoxShadow = "none",
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_4 GenComponentStyleHook(Unknown_69 token)
|
||||
{
|
||||
var padding = token.Padding;
|
||||
var lineWidth = token.LineWidth;
|
||||
var controlItemBgActiveDisabled = token.ControlItemBgActiveDisabled;
|
||||
var colorTextDisabled = token.ColorTextDisabled;
|
||||
var colorBgContainer = token.ColorBgContainer;
|
||||
var fontSizeLG = token.FontSizeLG;
|
||||
var controlOutline = token.ControlOutline;
|
||||
var colorPrimaryHover = token.ColorPrimaryHover;
|
||||
var colorPrimaryActive = token.ColorPrimaryActive;
|
||||
var colorText = token.ColorText;
|
||||
var colorPrimary = token.ColorPrimary;
|
||||
var marginXS = token.MarginXS;
|
||||
var controlOutlineWidth = token.ControlOutlineWidth;
|
||||
var colorTextLightSolid = token.ColorTextLightSolid;
|
||||
var wireframe = token.Wireframe;
|
||||
var radioFocusShadow = @$"0 0 0 {controlOutlineWidth}px {controlOutline}";
|
||||
var radioButtonFocusShadow = radioFocusShadow;
|
||||
var radioSize = fontSizeLG;
|
||||
var dotPadding = 4;
|
||||
var radioDotDisabledSize = radioSize - dotPadding * 2;
|
||||
var radioDotSize = wireframe ? radioDotDisabledSize : radioSize - (dotPadding + lineWidth) * 2;
|
||||
var radioCheckedColor = colorPrimary;
|
||||
var radioButtonColor = colorText;
|
||||
var radioButtonHoverColor = colorPrimaryHover;
|
||||
var radioButtonActiveColor = colorPrimaryActive;
|
||||
var radioButtonPaddingHorizontal = padding - lineWidth;
|
||||
var radioDisabledButtonCheckedColor = colorTextDisabled;
|
||||
var radioWrapperMarginRight = marginXS;
|
||||
var radioToken = MergeToken(
|
||||
token,
|
||||
new Unknown_70()
|
||||
{
|
||||
RadioFocusShadow = radioFocusShadow,
|
||||
RadioButtonFocusShadow = radioButtonFocusShadow,
|
||||
RadioSize = radioSize,
|
||||
RadioDotSize = radioDotSize,
|
||||
RadioDotDisabledSize = radioDotDisabledSize,
|
||||
RadioCheckedColor = radioCheckedColor,
|
||||
RadioDotDisabledColor = colorTextDisabled,
|
||||
RadioSolidCheckedColor = colorTextLightSolid,
|
||||
RadioButtonBg = colorBgContainer,
|
||||
RadioButtonCheckedBg = colorBgContainer,
|
||||
RadioButtonColor = radioButtonColor,
|
||||
RadioButtonHoverColor = radioButtonHoverColor,
|
||||
RadioButtonActiveColor = radioButtonActiveColor,
|
||||
RadioButtonPaddingHorizontal = radioButtonPaddingHorizontal,
|
||||
RadioDisabledButtonCheckedBg = controlItemBgActiveDisabled,
|
||||
RadioDisabledButtonCheckedColor = radioDisabledButtonCheckedColor,
|
||||
RadioWrapperMarginRight = radioWrapperMarginRight,
|
||||
});
|
||||
return new Unknown_71
|
||||
{
|
||||
GetGroupRadioStyle(radioToken),
|
||||
GetRadioBasicStyle(radioToken),
|
||||
GetRadioButtonStyle(radioToken)
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,154 @@
|
|||
using System;
|
||||
using CssInCs;
|
||||
using static AntDesign.GlobalStyle;
|
||||
using static AntDesign.Theme;
|
||||
|
||||
namespace AntDesign
|
||||
{
|
||||
public partial class RateToken
|
||||
{
|
||||
}
|
||||
|
||||
public partial class RateToken : TokenWithCommonCls
|
||||
{
|
||||
public string RateStarColor { get; set; }
|
||||
|
||||
public int RateStarSize { get; set; }
|
||||
|
||||
public CSSObject RateStarHoverScale { get; set; }
|
||||
|
||||
public string DefaultColor { get; set; }
|
||||
|
||||
}
|
||||
|
||||
public partial class Rate
|
||||
{
|
||||
public Unknown_1 GenRateStarStyle(Unknown_4 token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
return new Unknown_5()
|
||||
{
|
||||
[$"{componentCls}-star"] = new Unknown_6()
|
||||
{
|
||||
Position = "relative",
|
||||
Display = "inline-block",
|
||||
Color = "inherit",
|
||||
Cursor = "pointer",
|
||||
["&:not(:last-child)"] = new Unknown_7()
|
||||
{
|
||||
MarginInlineEnd = token.MarginXS,
|
||||
},
|
||||
["> div"] = new Unknown_8()
|
||||
{
|
||||
Transition = @$"all {token.MotionDurationMid}, outline 0s",
|
||||
["&:hover"] = new Unknown_9()
|
||||
{
|
||||
Transform = token.RateStarHoverScale,
|
||||
},
|
||||
["&:focus"] = new Unknown_10()
|
||||
{
|
||||
Outline = 0,
|
||||
},
|
||||
["&:focus-visible"] = new Unknown_11()
|
||||
{
|
||||
Outline = @$"{token.LineWidth}px dashed {token.RateStarColor}",
|
||||
Transform = token.RateStarHoverScale,
|
||||
},
|
||||
},
|
||||
["&-first, &-second"] = new Unknown_12()
|
||||
{
|
||||
Color = token.DefaultColor,
|
||||
Transition = @$"all {token.MotionDurationMid}",
|
||||
UserSelect = "none",
|
||||
[token.IconCls] = new Unknown_13()
|
||||
{
|
||||
VerticalAlign = "middle",
|
||||
},
|
||||
},
|
||||
["&-first"] = new Unknown_14()
|
||||
{
|
||||
Position = "absolute",
|
||||
Top = 0,
|
||||
InsetInlineStart = 0,
|
||||
Width = "50%",
|
||||
Height = "100%",
|
||||
Overflow = "hidden",
|
||||
Opacity = 0,
|
||||
},
|
||||
[$"&-half {componentCls}-star-first, &-half {componentCls}-star-second"] = new Unknown_15()
|
||||
{
|
||||
Opacity = 1,
|
||||
},
|
||||
[$"&-half {componentCls}-star-first, &-full {componentCls}-star-second"] = new Unknown_16()
|
||||
{
|
||||
Color = "inherit",
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenRateRtlStyle(RateToken token)
|
||||
{
|
||||
return new CSSObject()
|
||||
{
|
||||
[$"&-rtl{token.ComponentCls}"] = new CSSObject()
|
||||
{
|
||||
Direction = "rtl",
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_2 GenRateStyle(Unknown_17 token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
return new Unknown_18()
|
||||
{
|
||||
[componentCls] = new Unknown_19()
|
||||
{
|
||||
["..."] = ResetComponent(token),
|
||||
Display = "inline-block",
|
||||
Margin = 0,
|
||||
Padding = 0,
|
||||
Color = token.RateStarColor,
|
||||
FontSize = token.RateStarSize,
|
||||
LineHeight = "unset",
|
||||
ListStyle = "none",
|
||||
Outline = "none",
|
||||
[$"&-disabled{componentCls} {componentCls}-star"] = new Unknown_20()
|
||||
{
|
||||
Cursor = "default",
|
||||
["> div:hover"] = new Unknown_21()
|
||||
{
|
||||
Transform = "scale(1)",
|
||||
},
|
||||
},
|
||||
["..."] = GenRateStarStyle(token),
|
||||
[$"+ {componentCls}-text"] = new Unknown_22()
|
||||
{
|
||||
Display = "inline-block",
|
||||
MarginInlineStart = token.MarginXS,
|
||||
FontSize = token.FontSize,
|
||||
},
|
||||
["..."] = GenRateRtlStyle(token)
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_3 GenComponentStyleHook(Unknown_23 token)
|
||||
{
|
||||
var colorFillContent = token.ColorFillContent;
|
||||
var rateToken = MergeToken(
|
||||
token,
|
||||
new Unknown_24()
|
||||
{
|
||||
RateStarColor = token.Yellow6,
|
||||
RateStarSize = token.ControlHeightLG * 0.5,
|
||||
RateStarHoverScale = "scale(1.1)",
|
||||
DefaultColor = colorFillContent,
|
||||
});
|
||||
return new Unknown_25 { GenRateStyle(rateToken) };
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,183 @@
|
|||
using System;
|
||||
using CssInCs;
|
||||
using static AntDesign.GlobalStyle;
|
||||
using static AntDesign.Theme;
|
||||
|
||||
namespace AntDesign
|
||||
{
|
||||
public partial class ResultToken
|
||||
{
|
||||
public int TitleFontSize { get; set; }
|
||||
|
||||
public int SubtitleFontSize { get; set; }
|
||||
|
||||
public int IconFontSize { get; set; }
|
||||
|
||||
public CSSProperties ExtraMargin { get; set; }
|
||||
|
||||
}
|
||||
|
||||
public partial class ResultToken : TokenWithCommonCls
|
||||
{
|
||||
public int ImageWidth { get; set; }
|
||||
|
||||
public int ImageHeight { get; set; }
|
||||
|
||||
public string ResultInfoIconColor { get; set; }
|
||||
|
||||
public string ResultSuccessIconColor { get; set; }
|
||||
|
||||
public string ResultWarningIconColor { get; set; }
|
||||
|
||||
public string ResultErrorIconColor { get; set; }
|
||||
|
||||
}
|
||||
|
||||
public partial class Result
|
||||
{
|
||||
public CSSObject GenBaseStyle(Unknown_6 token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var lineHeightHeading3 = token.LineHeightHeading3;
|
||||
var iconCls = token.IconCls;
|
||||
var padding = token.Padding;
|
||||
var paddingXL = token.PaddingXL;
|
||||
var paddingXS = token.PaddingXS;
|
||||
var paddingLG = token.PaddingLG;
|
||||
var marginXS = token.MarginXS;
|
||||
var lineHeight = token.LineHeight;
|
||||
return new CSSObject()
|
||||
{
|
||||
[componentCls] = new CSSObject()
|
||||
{
|
||||
Padding = @$"{paddingLG * 2}px {paddingXL}px",
|
||||
["&-rtl"] = new CSSObject()
|
||||
{
|
||||
Direction = "rtl",
|
||||
},
|
||||
},
|
||||
[$"{componentCls} {componentCls}-image"] = new CSSObject()
|
||||
{
|
||||
Width = token.ImageWidth,
|
||||
Height = token.ImageHeight,
|
||||
Margin = "auto",
|
||||
},
|
||||
[$"{componentCls} {componentCls}-icon"] = new CSSObject()
|
||||
{
|
||||
MarginBottom = paddingLG,
|
||||
TextAlign = "center",
|
||||
[$"& > {iconCls}"] = new CSSObject()
|
||||
{
|
||||
FontSize = token.IconFontSize,
|
||||
},
|
||||
},
|
||||
[$"{componentCls} {componentCls}-title"] = new CSSObject()
|
||||
{
|
||||
Color = token.ColorTextHeading,
|
||||
FontSize = token.TitleFontSize,
|
||||
LineHeight = lineHeightHeading3,
|
||||
MarginBlock = marginXS,
|
||||
TextAlign = "center",
|
||||
},
|
||||
[$"{componentCls} {componentCls}-subtitle"] = new CSSObject()
|
||||
{
|
||||
Color = token.ColorTextDescription,
|
||||
FontSize = token.SubtitleFontSize,
|
||||
LineHeight = lineHeight,
|
||||
TextAlign = "center",
|
||||
},
|
||||
[$"{componentCls} {componentCls}-content"] = new CSSObject()
|
||||
{
|
||||
MarginTop = paddingLG,
|
||||
Padding = @$"{paddingLG}px {padding * 2.5}px",
|
||||
BackgroundColor = token.ColorFillAlter,
|
||||
},
|
||||
[$"{componentCls} {componentCls}-extra"] = new CSSObject()
|
||||
{
|
||||
Margin = token.ExtraMargin,
|
||||
TextAlign = "center",
|
||||
["& > *"] = new CSSObject()
|
||||
{
|
||||
MarginInlineEnd = paddingXS,
|
||||
["&:last-child"] = new CSSObject()
|
||||
{
|
||||
MarginInlineEnd = 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_1 GenStatusIconStyle(Unknown_7 token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var iconCls = token.IconCls;
|
||||
return new Unknown_8()
|
||||
{
|
||||
[$"{componentCls}-success {componentCls}-icon > {iconCls}"] = new Unknown_9()
|
||||
{
|
||||
Color = token.ResultSuccessIconColor,
|
||||
},
|
||||
[$"{componentCls}-error {componentCls}-icon > {iconCls}"] = new Unknown_10()
|
||||
{
|
||||
Color = token.ResultErrorIconColor,
|
||||
},
|
||||
[$"{componentCls}-info {componentCls}-icon > {iconCls}"] = new Unknown_11()
|
||||
{
|
||||
Color = token.ResultInfoIconColor,
|
||||
},
|
||||
[$"{componentCls}-warning {componentCls}-icon > {iconCls}"] = new Unknown_12()
|
||||
{
|
||||
Color = token.ResultWarningIconColor,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_2 GenResultStyle(Unknown_13 token)
|
||||
{
|
||||
return new Unknown_14
|
||||
{
|
||||
GenBaseStyle(token),
|
||||
GenStatusIconStyle(token)
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_3 GetStyle(Unknown_15 token)
|
||||
{
|
||||
return GenResultStyle(token);
|
||||
}
|
||||
|
||||
public Unknown_4 GenComponentStyleHook(Unknown_16 token)
|
||||
{
|
||||
var resultInfoIconColor = token.ColorInfo;
|
||||
var resultErrorIconColor = token.ColorError;
|
||||
var resultSuccessIconColor = token.ColorSuccess;
|
||||
var resultWarningIconColor = token.ColorWarning;
|
||||
var resultToken = MergeToken(
|
||||
token,
|
||||
new Unknown_17()
|
||||
{
|
||||
ResultInfoIconColor = resultInfoIconColor,
|
||||
ResultErrorIconColor = resultErrorIconColor,
|
||||
ResultSuccessIconColor = resultSuccessIconColor,
|
||||
ResultWarningIconColor = resultWarningIconColor,
|
||||
ImageWidth = 250,
|
||||
ImageHeight = 295,
|
||||
});
|
||||
return new Unknown_18 { GetStyle(resultToken) };
|
||||
}
|
||||
|
||||
public Unknown_5 GenComponentStyleHook(Unknown_19 token)
|
||||
{
|
||||
return new Unknown_20()
|
||||
{
|
||||
TitleFontSize = token.FontSizeHeading3,
|
||||
SubtitleFontSize = token.FontSize,
|
||||
IconFontSize = token.FontSizeHeading3 * 3,
|
||||
ExtraMargin = @$"{token.PaddingLG}px 0 0 0",
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,238 @@
|
|||
using System;
|
||||
using CssInCs;
|
||||
using static AntDesign.GlobalStyle;
|
||||
using static AntDesign.Theme;
|
||||
|
||||
namespace AntDesign
|
||||
{
|
||||
public partial class SegmentedToken
|
||||
{
|
||||
}
|
||||
|
||||
public partial class SegmentedToken : TokenWithCommonCls
|
||||
{
|
||||
public int SegmentedPaddingHorizontal { get; set; }
|
||||
|
||||
public int SegmentedPaddingHorizontalSM { get; set; }
|
||||
|
||||
public int SegmentedContainerPadding { get; set; }
|
||||
|
||||
public string LabelColor { get; set; }
|
||||
|
||||
public string LabelColorHover { get; set; }
|
||||
|
||||
public string BgColor { get; set; }
|
||||
|
||||
public string BgColorHover { get; set; }
|
||||
|
||||
public string BgColorActive { get; set; }
|
||||
|
||||
public string BgColorSelected { get; set; }
|
||||
|
||||
}
|
||||
|
||||
public partial class Segmented
|
||||
{
|
||||
public CSSObject GetItemDisabledStyle(string cls, SegmentedToken token)
|
||||
{
|
||||
return new CSSObject()
|
||||
{
|
||||
[$"{cls}, {cls}:hover, {cls}:focus"] = new CSSObject()
|
||||
{
|
||||
Color = token.ColorTextDisabled,
|
||||
Cursor = "not-allowed",
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GetItemSelectedStyle(SegmentedToken token)
|
||||
{
|
||||
return new CSSObject()
|
||||
{
|
||||
BackgroundColor = token.BgColorSelected,
|
||||
BoxShadow = token.BoxShadowTertiary,
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_1 GenSegmentedStyle(SegmentedToken token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
return new Unknown_3()
|
||||
{
|
||||
[componentCls] = new Unknown_4()
|
||||
{
|
||||
["..."] = ResetComponent(token),
|
||||
Display = "inline-block",
|
||||
Padding = token.SegmentedContainerPadding,
|
||||
Color = token.LabelColor,
|
||||
BackgroundColor = token.BgColor,
|
||||
BorderRadius = token.BorderRadius,
|
||||
Transition = @$"all {token.MotionDurationMid} {token.MotionEaseInOut}",
|
||||
[$"{componentCls}-group"] = new Unknown_5()
|
||||
{
|
||||
Position = "relative",
|
||||
Display = "flex",
|
||||
AlignItems = "stretch",
|
||||
JustifyItems = "flex-start",
|
||||
Width = "100%",
|
||||
},
|
||||
[$"&{componentCls}-rtl"] = new Unknown_6()
|
||||
{
|
||||
Direction = "rtl",
|
||||
},
|
||||
[$"&{componentCls}-block"] = new Unknown_7()
|
||||
{
|
||||
Display = "flex",
|
||||
},
|
||||
[$"&{componentCls}-block {componentCls}-item"] = new Unknown_8()
|
||||
{
|
||||
Flex = 1,
|
||||
MinWidth = 0,
|
||||
},
|
||||
[$"{componentCls}-item"] = new Unknown_9()
|
||||
{
|
||||
Position = "relative",
|
||||
TextAlign = "center",
|
||||
Cursor = "pointer",
|
||||
Transition = @$"color {token.MotionDurationMid} {token.MotionEaseInOut}",
|
||||
BorderRadius = token.BorderRadiusSM,
|
||||
["&-selected"] = new Unknown_10()
|
||||
{
|
||||
["..."] = GetItemSelectedStyle(token),
|
||||
Color = token.LabelColorHover,
|
||||
},
|
||||
["&::after"] = new Unknown_11()
|
||||
{
|
||||
Content = "\"\"",
|
||||
Position = "absolute",
|
||||
Width = "100%",
|
||||
Height = "100%",
|
||||
Top = 0,
|
||||
InsetInlineStart = 0,
|
||||
BorderRadius = "inherit",
|
||||
Transition = @$"background-color {token.MotionDurationMid}",
|
||||
PointerEvents = "none",
|
||||
},
|
||||
[$"&:hover:not({componentCls}-item-selected):not({componentCls}-item-disabled)"] = new Unknown_12()
|
||||
{
|
||||
Color = token.LabelColorHover,
|
||||
["&::after"] = new Unknown_13()
|
||||
{
|
||||
BackgroundColor = token.BgColorHover,
|
||||
},
|
||||
},
|
||||
[$"&:active:not({componentCls}-item-selected):not({componentCls}-item-disabled)"] = new Unknown_14()
|
||||
{
|
||||
Color = token.LabelColorHover,
|
||||
["&::after"] = new Unknown_15()
|
||||
{
|
||||
BackgroundColor = token.BgColorActive,
|
||||
},
|
||||
},
|
||||
["&-label"] = new Unknown_16()
|
||||
{
|
||||
MinHeight = token.ControlHeight - token.SegmentedContainerPadding * 2,
|
||||
LineHeight = @$"{token.ControlHeight - token.SegmentedContainerPadding * 2}px",
|
||||
Padding = @$"0 {token.SegmentedPaddingHorizontal}px",
|
||||
["..."] = segmentedTextEllipsisCss,
|
||||
},
|
||||
["&-icon + *"] = new Unknown_17()
|
||||
{
|
||||
MarginInlineStart = token.MarginSM / 2,
|
||||
},
|
||||
["&-input"] = new Unknown_18()
|
||||
{
|
||||
Position = "absolute",
|
||||
InsetBlockStart = 0,
|
||||
InsetInlineStart = 0,
|
||||
Width = 0,
|
||||
Height = 0,
|
||||
Opacity = 0,
|
||||
PointerEvents = "none",
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-thumb"] = new Unknown_19()
|
||||
{
|
||||
["..."] = GetItemSelectedStyle(token),
|
||||
Position = "absolute",
|
||||
InsetBlockStart = 0,
|
||||
InsetInlineStart = 0,
|
||||
Width = 0,
|
||||
Height = "100%",
|
||||
Padding = @$"{token.PaddingXXS}px 0",
|
||||
BorderRadius = token.BorderRadiusSM,
|
||||
[$"& ~ {componentCls}-item:not({componentCls}-item-selected):not({componentCls}-item-disabled)::after"] = new Unknown_20()
|
||||
{
|
||||
BackgroundColor = "transparent",
|
||||
},
|
||||
},
|
||||
[$"&{componentCls}-lg"] = new Unknown_21()
|
||||
{
|
||||
BorderRadius = token.BorderRadiusLG,
|
||||
[$"{componentCls}-item-label"] = new Unknown_22()
|
||||
{
|
||||
MinHeight = token.ControlHeightLG - token.SegmentedContainerPadding * 2,
|
||||
LineHeight = @$"{token.ControlHeightLG - token.SegmentedContainerPadding * 2}px",
|
||||
Padding = @$"0 {token.SegmentedPaddingHorizontal}px",
|
||||
FontSize = token.FontSizeLG,
|
||||
},
|
||||
[$"{componentCls}-item, {componentCls}-thumb"] = new Unknown_23()
|
||||
{
|
||||
BorderRadius = token.BorderRadius,
|
||||
},
|
||||
},
|
||||
[$"&{componentCls}-sm"] = new Unknown_24()
|
||||
{
|
||||
BorderRadius = token.BorderRadiusSM,
|
||||
[$"{componentCls}-item-label"] = new Unknown_25()
|
||||
{
|
||||
MinHeight = token.ControlHeightSM - token.SegmentedContainerPadding * 2,
|
||||
LineHeight = @$"{token.ControlHeightSM - token.SegmentedContainerPadding * 2}px",
|
||||
Padding = @$"0 {token.SegmentedPaddingHorizontalSM}px",
|
||||
},
|
||||
[$"{componentCls}-item, {componentCls}-thumb"] = new Unknown_26()
|
||||
{
|
||||
BorderRadius = token.BorderRadiusXS,
|
||||
},
|
||||
},
|
||||
["..."] = GetItemDisabledStyle($"&-disabled {componentCls}-item", token),
|
||||
["..."] = GetItemDisabledStyle($"{componentCls}-item-disabled", token),
|
||||
[$"{componentCls}-thumb-motion-appear-active"] = new Unknown_27()
|
||||
{
|
||||
Transition = @$"transform {token.MotionDurationSlow} {token.MotionEaseInOut}, width {token.MotionDurationSlow} {token.MotionEaseInOut}",
|
||||
WillChange = "transform, width",
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_2 GenComponentStyleHook(Unknown_28 token)
|
||||
{
|
||||
var lineWidthBold = token.LineWidthBold;
|
||||
var lineWidth = token.LineWidth;
|
||||
var colorTextLabel = token.ColorTextLabel;
|
||||
var colorText = token.ColorText;
|
||||
var colorFillSecondary = token.ColorFillSecondary;
|
||||
var colorFill = token.ColorFill;
|
||||
var colorBgLayout = token.ColorBgLayout;
|
||||
var colorBgElevated = token.ColorBgElevated;
|
||||
var segmentedToken = MergeToken(
|
||||
token,
|
||||
new Unknown_29()
|
||||
{
|
||||
SegmentedPaddingHorizontal = token.ControlPaddingHorizontal - lineWidth,
|
||||
SegmentedPaddingHorizontalSM = token.ControlPaddingHorizontalSM - lineWidth,
|
||||
SegmentedContainerPadding = lineWidthBold,
|
||||
LabelColor = colorTextLabel,
|
||||
LabelColorHover = colorText,
|
||||
BgColor = colorBgLayout,
|
||||
BgColorHover = colorFillSecondary,
|
||||
BgColorActive = colorFill,
|
||||
BgColorSelected = colorBgElevated,
|
||||
});
|
||||
return new Unknown_30 { GenSegmentedStyle(segmentedToken) };
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,838 @@
|
|||
using System;
|
||||
using CssInCs;
|
||||
using static AntDesign.GlobalStyle;
|
||||
using static AntDesign.Theme;
|
||||
|
||||
namespace AntDesign
|
||||
{
|
||||
public partial class SelectToken
|
||||
{
|
||||
public int ZIndexPopup { get; set; }
|
||||
|
||||
}
|
||||
|
||||
public partial class SelectToken : TokenWithCommonCls
|
||||
{
|
||||
public string RootPrefixCls { get; set; }
|
||||
|
||||
public int InputPaddingHorizontalBase { get; set; }
|
||||
|
||||
}
|
||||
|
||||
public partial class Select
|
||||
{
|
||||
public Unknown_1 GenSelectorStyle(Unknown_9 token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
return new Unknown_10()
|
||||
{
|
||||
Position = "relative",
|
||||
BackgroundColor = token.ColorBgContainer,
|
||||
Border = @$"{token.LineWidth}px {token.LineType} {token.ColorBorder}",
|
||||
Transition = @$"all {token.MotionDurationMid} {token.MotionEaseInOut}",
|
||||
Input = new Unknown_11()
|
||||
{
|
||||
Cursor = "pointer",
|
||||
},
|
||||
[$"{componentCls}-show-search&"] = new Unknown_12()
|
||||
{
|
||||
Cursor = "text",
|
||||
Input = new Unknown_13()
|
||||
{
|
||||
Cursor = "auto",
|
||||
Color = "inherit",
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-disabled&"] = new Unknown_14()
|
||||
{
|
||||
Color = token.ColorTextDisabled,
|
||||
Background = token.ColorBgContainerDisabled,
|
||||
Cursor = "not-allowed",
|
||||
[$"{componentCls}-multiple&"] = new Unknown_15()
|
||||
{
|
||||
Background = token.ColorBgContainerDisabled,
|
||||
},
|
||||
Input = new Unknown_16()
|
||||
{
|
||||
Cursor = "not-allowed",
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenStatusStyle(string rootSelectCls, {
|
||||
componentCls: string;
|
||||
antCls: string;
|
||||
borderHoverColor: string;
|
||||
outlineColor: string;
|
||||
controlOutlineWidth: number;
|
||||
} token, bool overwriteDefaultBorder = false)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var borderHoverColor = token.BorderHoverColor;
|
||||
var outlineColor = token.OutlineColor;
|
||||
var antCls = token.AntCls;
|
||||
var overwriteStyle = overwriteDefaultBorder
|
||||
? {
|
||||
[@$"{componentCls}-selector"]: {
|
||||
borderColor: borderHoverColor,
|
||||
},
|
||||
}
|
||||
: {};
|
||||
return new CSSObject()
|
||||
{
|
||||
[rootSelectCls] = new CSSObject()
|
||||
{
|
||||
[$"&:not({componentCls}-disabled):not({componentCls}-customize-input):not({antCls}-pagination-size-changer)"] = new CSSObject()
|
||||
{
|
||||
["..."] = overwriteStyle,
|
||||
[$"{componentCls}-focused& {componentCls}-selector"] = new CSSObject()
|
||||
{
|
||||
BorderColor = borderHoverColor,
|
||||
BoxShadow = @$"0 0 0 {token.ControlOutlineWidth}px {outlineColor}",
|
||||
Outline = 0,
|
||||
},
|
||||
[$"&:hover {componentCls}-selector"] = new CSSObject()
|
||||
{
|
||||
BorderColor = borderHoverColor,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_2 GetSearchInputWithoutBorderStyle(Unknown_17 token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
return new Unknown_18()
|
||||
{
|
||||
[$"{componentCls}-selection-search-input"] = new Unknown_19()
|
||||
{
|
||||
Margin = 0,
|
||||
Padding = 0,
|
||||
Background = "transparent",
|
||||
Border = "none",
|
||||
Outline = "none",
|
||||
Appearance = "none",
|
||||
["&::-webkit-search-cancel-button"] = new Unknown_20()
|
||||
{
|
||||
Display = "none",
|
||||
["-webkit-appearance"] = "none",
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_3 GenBaseStyle(Unknown_21 token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var inputPaddingHorizontalBase = token.InputPaddingHorizontalBase;
|
||||
var iconCls = token.IconCls;
|
||||
return new Unknown_22()
|
||||
{
|
||||
[componentCls] = new Unknown_23()
|
||||
{
|
||||
["..."] = ResetComponent(token),
|
||||
Position = "relative",
|
||||
Display = "inline-block",
|
||||
Cursor = "pointer",
|
||||
[$"&:not({componentCls}-customize-input) {componentCls}-selector"] = new Unknown_24()
|
||||
{
|
||||
["..."] = GenSelectorStyle(token),
|
||||
["..."] = GetSearchInputWithoutBorderStyle(token)
|
||||
},
|
||||
[$"{componentCls}-selection-item"] = new Unknown_25()
|
||||
{
|
||||
Flex = 1,
|
||||
FontWeight = "normal",
|
||||
["..."] = textEllipsis,
|
||||
["> *"] = new Unknown_26()
|
||||
{
|
||||
LineHeight = "inherit",
|
||||
["..."] = textEllipsis,
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-selection-placeholder"] = new Unknown_27()
|
||||
{
|
||||
["..."] = textEllipsis,
|
||||
Flex = 1,
|
||||
Color = token.ColorTextPlaceholder,
|
||||
PointerEvents = "none",
|
||||
},
|
||||
[$"{componentCls}-arrow"] = new Unknown_28()
|
||||
{
|
||||
["..."] = ResetIcon(),
|
||||
Position = "absolute",
|
||||
Top = "50%",
|
||||
InsetInlineStart = "auto",
|
||||
InsetInlineEnd = inputPaddingHorizontalBase,
|
||||
Height = token.FontSizeIcon,
|
||||
MarginTop = -token.FontSizeIcon / 2,
|
||||
Color = token.ColorTextQuaternary,
|
||||
FontSize = token.FontSizeIcon,
|
||||
LineHeight = 1,
|
||||
TextAlign = "center",
|
||||
PointerEvents = "none",
|
||||
Display = "flex",
|
||||
AlignItems = "center",
|
||||
[iconCls] = new Unknown_29()
|
||||
{
|
||||
VerticalAlign = "top",
|
||||
Transition = @$"transform {token.MotionDurationSlow}",
|
||||
["> svg"] = new Unknown_30()
|
||||
{
|
||||
VerticalAlign = "top",
|
||||
},
|
||||
[$"&:not({componentCls}-suffix)"] = new Unknown_31()
|
||||
{
|
||||
PointerEvents = "auto",
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-disabled &"] = new Unknown_32()
|
||||
{
|
||||
Cursor = "not-allowed",
|
||||
},
|
||||
["> *:not(:last-child)"] = new Unknown_33()
|
||||
{
|
||||
MarginInlineEnd = 8,
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-clear"] = new Unknown_34()
|
||||
{
|
||||
Position = "absolute",
|
||||
Top = "50%",
|
||||
InsetInlineStart = "auto",
|
||||
InsetInlineEnd = inputPaddingHorizontalBase,
|
||||
ZIndex = 1,
|
||||
Display = "inline-block",
|
||||
Width = token.FontSizeIcon,
|
||||
Height = token.FontSizeIcon,
|
||||
MarginTop = -token.FontSizeIcon / 2,
|
||||
Color = token.ColorTextQuaternary,
|
||||
FontSize = token.FontSizeIcon,
|
||||
FontStyle = "normal",
|
||||
LineHeight = 1,
|
||||
TextAlign = "center",
|
||||
TextTransform = "none",
|
||||
Background = token.ColorBgContainer,
|
||||
Cursor = "pointer",
|
||||
Opacity = 0,
|
||||
Transition = @$"color {token.MotionDurationMid} ease, opacity {token.MotionDurationSlow} ease",
|
||||
TextRendering = "auto",
|
||||
["&:before"] = new Unknown_35()
|
||||
{
|
||||
Display = "block",
|
||||
},
|
||||
["&:hover"] = new Unknown_36()
|
||||
{
|
||||
Color = token.ColorTextTertiary,
|
||||
},
|
||||
},
|
||||
["&:hover"] = new Unknown_37()
|
||||
{
|
||||
[$"{componentCls}-clear"] = new Unknown_38()
|
||||
{
|
||||
Opacity = 1,
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-has-feedback"] = new Unknown_39()
|
||||
{
|
||||
[$"{componentCls}-clear"] = new Unknown_40()
|
||||
{
|
||||
InsetInlineEnd = inputPaddingHorizontalBase + token.FontSize + token.PaddingXXS,
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_4 GenSelectStyle(Unknown_41 token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
return new Unknown_42
|
||||
{
|
||||
new Unknown_43()
|
||||
{
|
||||
[componentCls] = new Unknown_44()
|
||||
{
|
||||
[$"&-borderless {componentCls}-selector"] = new Unknown_45()
|
||||
{
|
||||
BackgroundColor = @$"transparent !important",
|
||||
BorderColor = @$"transparent !important",
|
||||
BoxShadow = @$"none !important",
|
||||
},
|
||||
[$"&{componentCls}-in-form-item"] = new Unknown_46()
|
||||
{
|
||||
Width = "100%",
|
||||
},
|
||||
},
|
||||
},
|
||||
GenBaseStyle(token),
|
||||
GenSingleStyle(token),
|
||||
GenMultipleStyle(token),
|
||||
GenDropdownStyle(token),
|
||||
new Unknown_47()
|
||||
{
|
||||
[$"{componentCls}-rtl"] = new Unknown_48()
|
||||
{
|
||||
Direction = "rtl",
|
||||
},
|
||||
},
|
||||
GenStatusStyle(
|
||||
componentCls,
|
||||
mergeToken<any>(token, {
|
||||
borderHoverColor: token.ColorPrimaryHover,
|
||||
outlineColor: token.ControlOutline,
|
||||
}),
|
||||
),
|
||||
GenStatusStyle(
|
||||
$"{componentCls}-status-error",
|
||||
mergeToken<any>(token, {
|
||||
borderHoverColor: token.ColorErrorHover,
|
||||
outlineColor: token.ColorErrorOutline,
|
||||
}),
|
||||
true,
|
||||
),
|
||||
GenStatusStyle(
|
||||
$"{componentCls}-status-warning",
|
||||
mergeToken<any>(token, {
|
||||
borderHoverColor: token.ColorWarningHover,
|
||||
outlineColor: token.ColorWarningOutline,
|
||||
}),
|
||||
true,
|
||||
),
|
||||
GenCompactItemStyle(token, {
|
||||
borderElCls: $"{componentCls}-selector",
|
||||
focusElCls: `{componentCls}-focused`,
|
||||
})
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_5 GenComponentStyleHook(Unknown_49 token, Unknown_50 args)
|
||||
{
|
||||
var selectToken = MergeToken(
|
||||
token,
|
||||
new Unknown_51()
|
||||
{
|
||||
RootPrefixCls = rootPrefixCls,
|
||||
InputPaddingHorizontalBase = token.PaddingSM - 1,
|
||||
});
|
||||
return new Unknown_52 { GenSelectStyle(selectToken) };
|
||||
}
|
||||
|
||||
public Unknown_6 GenComponentStyleHook(Unknown_53 token)
|
||||
{
|
||||
return new Unknown_54()
|
||||
{
|
||||
ZIndexPopup = token.ZIndexPopupBase + 50,
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_7 GenItemStyle(Unknown_55 token)
|
||||
{
|
||||
var controlPaddingHorizontal = token.ControlPaddingHorizontal;
|
||||
return new Unknown_56()
|
||||
{
|
||||
Position = "relative",
|
||||
Display = "block",
|
||||
MinHeight = token.ControlHeight,
|
||||
Padding = @$"{
|
||||
(token.ControlHeight - token.FontSize * token.LineHeight) / 2
|
||||
}px {controlPaddingHorizontal}px",
|
||||
Color = token.ColorText,
|
||||
FontWeight = "normal",
|
||||
FontSize = token.FontSize,
|
||||
LineHeight = token.LineHeight,
|
||||
BoxSizing = "border-box",
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_8 GenSingleStyle(Unknown_57 token)
|
||||
{
|
||||
var antCls = token.AntCls;
|
||||
var componentCls = token.ComponentCls;
|
||||
var selectItemCls = @$"{componentCls}-item";
|
||||
return new Unknown_58
|
||||
{
|
||||
new Unknown_59()
|
||||
{
|
||||
[$"{componentCls}-dropdown"] = new Unknown_60()
|
||||
{
|
||||
["..."] = ResetComponent(token),
|
||||
Position = "absolute",
|
||||
Top = -9999,
|
||||
ZIndex = token.ZIndexPopup,
|
||||
BoxSizing = "border-box",
|
||||
Padding = token.PaddingXXS,
|
||||
Overflow = "hidden",
|
||||
FontSize = token.FontSize,
|
||||
FontVariant = "initial",
|
||||
BackgroundColor = token.ColorBgElevated,
|
||||
BorderRadius = token.BorderRadiusLG,
|
||||
Outline = "none",
|
||||
BoxShadow = token.BoxShadowSecondary,
|
||||
[$"&{antCls}-slide-up-enter{antCls}-slide-up-enter-active{componentCls}-dropdown-placement-bottomLeft,&{antCls}-slide-up-appear{antCls}-slide-up-appear-active{componentCls}-dropdown-placement-bottomLeft"] = new Unknown_61()
|
||||
{
|
||||
AnimationName = slideUpIn,
|
||||
},
|
||||
[$"&{antCls}-slide-up-enter{antCls}-slide-up-enter-active{componentCls}-dropdown-placement-topLeft,&{antCls}-slide-up-appear{antCls}-slide-up-appear-active{componentCls}-dropdown-placement-topLeft"] = new Unknown_62()
|
||||
{
|
||||
AnimationName = slideDownIn,
|
||||
},
|
||||
[$"&{antCls}-slide-up-leave{antCls}-slide-up-leave-active{componentCls}-dropdown-placement-bottomLeft"] = new Unknown_63()
|
||||
{
|
||||
AnimationName = slideUpOut,
|
||||
},
|
||||
[$"&{antCls}-slide-up-leave{antCls}-slide-up-leave-active{componentCls}-dropdown-placement-topLeft"] = new Unknown_64()
|
||||
{
|
||||
AnimationName = slideDownOut,
|
||||
},
|
||||
["&-hidden"] = new Unknown_65()
|
||||
{
|
||||
Display = "none",
|
||||
},
|
||||
[$"{selectItemCls}"] = new Unknown_66()
|
||||
{
|
||||
["..."] = GenItemStyle(token),
|
||||
Cursor = "pointer",
|
||||
Transition = @$"background {token.MotionDurationSlow} ease",
|
||||
BorderRadius = token.BorderRadiusSM,
|
||||
["&-group"] = new Unknown_67()
|
||||
{
|
||||
Color = token.ColorTextDescription,
|
||||
FontSize = token.FontSizeSM,
|
||||
Cursor = "default",
|
||||
},
|
||||
["&-option"] = new Unknown_68()
|
||||
{
|
||||
Display = "flex",
|
||||
["&-content"] = new Unknown_69()
|
||||
{
|
||||
Flex = "auto",
|
||||
["..."] = textEllipsis,
|
||||
["> *"] = new Unknown_70()
|
||||
{
|
||||
["..."] = textEllipsis,
|
||||
},
|
||||
},
|
||||
["&-state"] = new Unknown_71()
|
||||
{
|
||||
Flex = "none",
|
||||
},
|
||||
[$"&-active:not({selectItemCls}-option-disabled)"] = new Unknown_72()
|
||||
{
|
||||
BackgroundColor = token.ControlItemBgHover,
|
||||
},
|
||||
[$"&-selected:not({selectItemCls}-option-disabled)"] = new Unknown_73()
|
||||
{
|
||||
Color = token.ColorText,
|
||||
FontWeight = token.FontWeightStrong,
|
||||
BackgroundColor = token.ControlItemBgActive,
|
||||
[$"{selectItemCls}-option-state"] = new Unknown_74()
|
||||
{
|
||||
Color = token.ColorPrimary,
|
||||
},
|
||||
},
|
||||
["&-disabled"] = new Unknown_75()
|
||||
{
|
||||
[$"&{selectItemCls}-option-selected"] = new Unknown_76()
|
||||
{
|
||||
BackgroundColor = token.ColorBgContainerDisabled,
|
||||
},
|
||||
Color = token.ColorTextDisabled,
|
||||
Cursor = "not-allowed",
|
||||
},
|
||||
["&-grouped"] = new Unknown_77()
|
||||
{
|
||||
PaddingInlineStart = token.ControlPaddingHorizontal * 2,
|
||||
},
|
||||
},
|
||||
},
|
||||
["&-rtl"] = new Unknown_78()
|
||||
{
|
||||
Direction = "rtl",
|
||||
},
|
||||
},
|
||||
},
|
||||
InitSlideMotion(token, "slide-up"),
|
||||
InitSlideMotion(token, "slide-down"),
|
||||
InitMoveMotion(token, "move-up"),
|
||||
InitMoveMotion(token, "move-down")
|
||||
};
|
||||
}
|
||||
|
||||
public readonly [number, number] GetSelectItemStyle(Unknown_79 args)
|
||||
{
|
||||
var selectItemDist = (controlHeight - controlHeightSM) / 2 - borderWidth;
|
||||
var selectItemMargin = Math.Ceil(selectItemDist / 2);
|
||||
}
|
||||
|
||||
public CSSObject GenSizeStyle(SelectToken token, string suffix)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var iconCls = token.IconCls;
|
||||
var selectOverflowPrefixCls = @$"{componentCls}-selection-overflow";
|
||||
var selectItemHeight = token.ControlHeightSM;
|
||||
var [selectItemDist] = GetSelectItemStyle(token);
|
||||
var suffixCls = suffix ? @$"{componentCls}-{suffix}" : "";
|
||||
return new CSSObject()
|
||||
{
|
||||
[$"{componentCls}-multiple{suffixCls}"] = new CSSObject()
|
||||
{
|
||||
FontSize = token.FontSize,
|
||||
[selectOverflowPrefixCls] = new CSSObject()
|
||||
{
|
||||
Position = "relative",
|
||||
Display = "flex",
|
||||
Flex = "auto",
|
||||
FlexWrap = "wrap",
|
||||
MaxWidth = "100%",
|
||||
["&-item"] = new CSSObject()
|
||||
{
|
||||
Flex = "none",
|
||||
AlignSelf = "center",
|
||||
MaxWidth = "100%",
|
||||
Display = "inline-flex",
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-selector"] = new CSSObject()
|
||||
{
|
||||
Display = "flex",
|
||||
FlexWrap = "wrap",
|
||||
AlignItems = "center",
|
||||
Padding = @$"{selectItemDist - FIXED_ITEM_MARGIN}px {FIXED_ITEM_MARGIN * 2}px",
|
||||
BorderRadius = token.BorderRadius,
|
||||
[$"{componentCls}-show-search&"] = new CSSObject()
|
||||
{
|
||||
Cursor = "text",
|
||||
},
|
||||
[$"{componentCls}-disabled&"] = new CSSObject()
|
||||
{
|
||||
Background = token.ColorBgContainerDisabled,
|
||||
Cursor = "not-allowed",
|
||||
},
|
||||
["&:after"] = new CSSObject()
|
||||
{
|
||||
Display = "inline-block",
|
||||
Width = 0,
|
||||
Margin = @$"{FIXED_ITEM_MARGIN}px 0",
|
||||
LineHeight = @$"{selectItemHeight}px",
|
||||
Content = '"\\a0"',
|
||||
},
|
||||
},
|
||||
[$"&{componentCls}-show-arrow{componentCls}-selector,&{componentCls}-allow-clear{componentCls}-selector"] = new CSSObject()
|
||||
{
|
||||
PaddingInlineEnd = token.FontSizeIcon + token.ControlPaddingHorizontal,
|
||||
},
|
||||
[$"{componentCls}-selection-item"] = new CSSObject()
|
||||
{
|
||||
Position = "relative",
|
||||
Display = "flex",
|
||||
Flex = "none",
|
||||
BoxSizing = "border-box",
|
||||
MaxWidth = "100%",
|
||||
Height = selectItemHeight,
|
||||
MarginTop = FIXED_ITEM_MARGIN,
|
||||
MarginBottom = FIXED_ITEM_MARGIN,
|
||||
LineHeight = @$"{selectItemHeight - token.LineWidth * 2}px",
|
||||
Background = token.ColorFillSecondary,
|
||||
BorderRadius = token.BorderRadiusSM,
|
||||
Cursor = "default",
|
||||
Transition = @$"font-size {token.MotionDurationSlow}, line-height {token.MotionDurationSlow}, height {token.MotionDurationSlow}",
|
||||
UserSelect = "none",
|
||||
MarginInlineEnd = FIXED_ITEM_MARGIN * 2,
|
||||
PaddingInlineStart = token.PaddingXS,
|
||||
PaddingInlineEnd = token.PaddingXS / 2,
|
||||
[$"{componentCls}-disabled&"] = new CSSObject()
|
||||
{
|
||||
Color = token.ColorTextDisabled,
|
||||
Cursor = "not-allowed",
|
||||
},
|
||||
["&-content"] = new CSSObject()
|
||||
{
|
||||
Display = "inline-block",
|
||||
MarginInlineEnd = token.PaddingXS / 2,
|
||||
Overflow = "hidden",
|
||||
WhiteSpace = "pre",
|
||||
TextOverflow = "ellipsis",
|
||||
},
|
||||
["&-remove"] = new CSSObject()
|
||||
{
|
||||
["..."] = ResetIcon(),
|
||||
Display = "inline-block",
|
||||
Color = token.ColorIcon,
|
||||
FontWeight = "bold",
|
||||
FontSize = 10,
|
||||
LineHeight = "inherit",
|
||||
Cursor = "pointer",
|
||||
[$"> {iconCls}"] = new CSSObject()
|
||||
{
|
||||
VerticalAlign = "-0.2em",
|
||||
},
|
||||
["&:hover"] = new CSSObject()
|
||||
{
|
||||
Color = token.ColorIconHover,
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"{selectOverflowPrefixCls}-item + {selectOverflowPrefixCls}-item"] = new CSSObject()
|
||||
{
|
||||
[$"{componentCls}-selection-search"] = new CSSObject()
|
||||
{
|
||||
MarginInlineStart = 0,
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-selection-search"] = new CSSObject()
|
||||
{
|
||||
Display = "inline-flex",
|
||||
Position = "relative",
|
||||
MaxWidth = "100%",
|
||||
MarginInlineStart = token.InputPaddingHorizontalBase - selectItemDist,
|
||||
["&-input,&-mirror"] = new CSSObject()
|
||||
{
|
||||
Height = selectItemHeight,
|
||||
FontFamily = token.FontFamily,
|
||||
LineHeight = @$"{selectItemHeight}px",
|
||||
Transition = @$"all {token.MotionDurationSlow}",
|
||||
},
|
||||
["&-input"] = new CSSObject()
|
||||
{
|
||||
Width = "100%",
|
||||
MinWidth = 4.1f,
|
||||
},
|
||||
["&-mirror"] = new CSSObject()
|
||||
{
|
||||
Position = "absolute",
|
||||
Top = 0,
|
||||
InsetInlineStart = 0,
|
||||
InsetInlineEnd = "auto",
|
||||
ZIndex = 999,
|
||||
WhiteSpace = "pre",
|
||||
Visibility = "hidden",
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-selection-placeholder "] = new CSSObject()
|
||||
{
|
||||
Position = "absolute",
|
||||
Top = "50%",
|
||||
InsetInlineStart = token.InputPaddingHorizontalBase,
|
||||
InsetInlineEnd = token.InputPaddingHorizontalBase,
|
||||
Transform = "translateY(-50%)",
|
||||
Transition = @$"all {token.MotionDurationSlow}",
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSInterpolation GenMultipleStyle(SelectToken token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var smallToken = MergeToken(
|
||||
token,
|
||||
new CSSInterpolation()
|
||||
{
|
||||
ControlHeight = token.ControlHeightSM,
|
||||
ControlHeightSM = token.ControlHeightXS,
|
||||
BorderRadius = token.BorderRadiusSM,
|
||||
BorderRadiusSM = token.BorderRadiusXS,
|
||||
});
|
||||
var largeToken = MergeToken(
|
||||
token,
|
||||
new CSSInterpolation()
|
||||
{
|
||||
FontSize = token.FontSizeLG,
|
||||
ControlHeight = token.ControlHeightLG,
|
||||
ControlHeightSM = token.ControlHeight,
|
||||
BorderRadius = token.BorderRadiusLG,
|
||||
BorderRadiusSM = token.BorderRadius,
|
||||
});
|
||||
var [, smSelectItemMargin] = GetSelectItemStyle(token);
|
||||
return new CSSInterpolation
|
||||
{
|
||||
GenSizeStyle(token),
|
||||
GenSizeStyle(smallToken, "sm"),
|
||||
new Unknown_80()
|
||||
{
|
||||
[$"{componentCls}-multiple{componentCls}-sm"] = new Unknown_81()
|
||||
{
|
||||
[$"{componentCls}-selection-placeholder"] = new Unknown_82()
|
||||
{
|
||||
InsetInline = token.ControlPaddingHorizontalSM - token.LineWidth,
|
||||
},
|
||||
[$"{componentCls}-selection-search"] = new Unknown_83()
|
||||
{
|
||||
MarginInlineStart = smSelectItemMargin,
|
||||
},
|
||||
},
|
||||
},
|
||||
GenSizeStyle(largeToken, "lg")
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenSizeStyle(SelectToken token, string suffix)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var inputPaddingHorizontalBase = token.InputPaddingHorizontalBase;
|
||||
var borderRadius = token.BorderRadius;
|
||||
var selectHeightWithoutBorder = token.ControlHeight - token.LineWidth * 2;
|
||||
var selectionItemPadding = Math.Ceil(token.FontSize * 1.25);
|
||||
var suffixCls = suffix ? @$"{componentCls}-{suffix}" : "";
|
||||
return new CSSObject()
|
||||
{
|
||||
[$"{componentCls}-single{suffixCls}"] = new CSSObject()
|
||||
{
|
||||
FontSize = token.FontSize,
|
||||
[$"{componentCls}-selector"] = new CSSObject()
|
||||
{
|
||||
["..."] = ResetComponent(token),
|
||||
Display = "flex",
|
||||
BorderRadius = borderRadius,
|
||||
[$"{componentCls}-selection-search"] = new CSSObject()
|
||||
{
|
||||
Position = "absolute",
|
||||
Top = 0,
|
||||
InsetInlineStart = inputPaddingHorizontalBase,
|
||||
InsetInlineEnd = inputPaddingHorizontalBase,
|
||||
Bottom = 0,
|
||||
["&-input"] = new CSSObject()
|
||||
{
|
||||
Width = "100%",
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-selection-item,{componentCls}-selection-placeholder"] = new CSSObject()
|
||||
{
|
||||
Padding = 0,
|
||||
LineHeight = @$"{selectHeightWithoutBorder}px",
|
||||
Transition = @$"all {token.MotionDurationSlow}, visibility 0s",
|
||||
["@supports (-moz-appearance: meterbar)"] = new CSSObject()
|
||||
{
|
||||
LineHeight = @$"{selectHeightWithoutBorder}px",
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-selection-item"] = new CSSObject()
|
||||
{
|
||||
Position = "relative",
|
||||
UserSelect = "none",
|
||||
},
|
||||
[$"{componentCls}-selection-placeholder"] = new CSSObject()
|
||||
{
|
||||
Transition = "none",
|
||||
PointerEvents = "none",
|
||||
},
|
||||
[[$"&:after",/*For""valuebaselinealign*/"{componentCls}-selection-item:after",/*Forundefinedvaluebaselinealign*/"{componentCls}-selection-placeholder:after",].join(",")] = new CSSObject()
|
||||
{
|
||||
Display = "inline-block",
|
||||
Width = 0,
|
||||
Visibility = "hidden",
|
||||
Content = '"\\a0"',
|
||||
},
|
||||
},
|
||||
[$"&{componentCls}-show-arrow{componentCls}-selection-item,&{componentCls}-show-arrow{componentCls}-selection-placeholder"] = new CSSObject()
|
||||
{
|
||||
PaddingInlineEnd = selectionItemPadding,
|
||||
},
|
||||
[$"&{componentCls}-open {componentCls}-selection-item"] = new CSSObject()
|
||||
{
|
||||
Color = token.ColorTextPlaceholder,
|
||||
},
|
||||
[$"&:not({componentCls}-customize-input)"] = new CSSObject()
|
||||
{
|
||||
[$"{componentCls}-selector"] = new CSSObject()
|
||||
{
|
||||
Width = "100%",
|
||||
Height = token.ControlHeight,
|
||||
Padding = @$"0 {inputPaddingHorizontalBase}px",
|
||||
[$"{componentCls}-selection-search-input"] = new CSSObject()
|
||||
{
|
||||
Height = selectHeightWithoutBorder,
|
||||
},
|
||||
["&:after"] = new CSSObject()
|
||||
{
|
||||
LineHeight = @$"{selectHeightWithoutBorder}px",
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"&{componentCls}-customize-input"] = new CSSObject()
|
||||
{
|
||||
[$"{componentCls}-selector"] = new CSSObject()
|
||||
{
|
||||
["&:after"] = new CSSObject()
|
||||
{
|
||||
Display = "none",
|
||||
},
|
||||
[$"{componentCls}-selection-search"] = new CSSObject()
|
||||
{
|
||||
Position = "static",
|
||||
Width = "100%",
|
||||
},
|
||||
[$"{componentCls}-selection-placeholder"] = new CSSObject()
|
||||
{
|
||||
Position = "absolute",
|
||||
InsetInlineStart = 0,
|
||||
InsetInlineEnd = 0,
|
||||
Padding = @$"0 {inputPaddingHorizontalBase}px",
|
||||
["&:after"] = new CSSObject()
|
||||
{
|
||||
Display = "none",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSInterpolation GenSingleStyle(SelectToken token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var inputPaddingHorizontalSM = token.ControlPaddingHorizontalSM - token.LineWidth;
|
||||
return new CSSInterpolation
|
||||
{
|
||||
GenSizeStyle(token),
|
||||
GenSizeStyle(
|
||||
mergeToken<any>(token, {
|
||||
controlHeight: token.ControlHeightSM,
|
||||
borderRadius: token.BorderRadiusSM,
|
||||
}),
|
||||
"sm",
|
||||
),
|
||||
new Unknown_84()
|
||||
{
|
||||
[$"{componentCls}-single{componentCls}-sm"] = new Unknown_85()
|
||||
{
|
||||
[$"&:not({componentCls}-customize-input)"] = new Unknown_86()
|
||||
{
|
||||
[$"{componentCls}-selection-search"] = new Unknown_87()
|
||||
{
|
||||
InsetInlineStart = inputPaddingHorizontalSM,
|
||||
InsetInlineEnd = inputPaddingHorizontalSM,
|
||||
},
|
||||
[$"{componentCls}-selector"] = new Unknown_88()
|
||||
{
|
||||
Padding = @$"0 {inputPaddingHorizontalSM}px",
|
||||
},
|
||||
[$"&{componentCls}-show-arrow {componentCls}-selection-search"] = new Unknown_89()
|
||||
{
|
||||
InsetInlineEnd = inputPaddingHorizontalSM + token.FontSize * 1.5,
|
||||
},
|
||||
[$"&{componentCls}-show-arrow{componentCls}-selection-item,&{componentCls}-show-arrow{componentCls}-selection-placeholder"] = new Unknown_90()
|
||||
{
|
||||
PaddingInlineEnd = token.FontSize * 1.5,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
GenSizeStyle(
|
||||
mergeToken<any>(token, {
|
||||
controlHeight: token.ControlHeightLG,
|
||||
fontSize: token.FontSizeLG,
|
||||
borderRadius: token.BorderRadiusLG,
|
||||
}),
|
||||
"lg",
|
||||
)
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,446 @@
|
|||
using System;
|
||||
using CssInCs;
|
||||
using static AntDesign.GlobalStyle;
|
||||
using static AntDesign.Theme;
|
||||
|
||||
namespace AntDesign
|
||||
{
|
||||
public partial class SkeletonToken
|
||||
{
|
||||
}
|
||||
|
||||
public partial class Skeleton
|
||||
{
|
||||
private Keyframes skeletonClsLoading = new Keyframes()
|
||||
{
|
||||
["0%"] = new Keyframes()
|
||||
{
|
||||
BackgroundPosition = "100% 50%",
|
||||
},
|
||||
["100%"] = new Keyframes()
|
||||
{
|
||||
BackgroundPosition = "0 50%",
|
||||
},
|
||||
};
|
||||
|
||||
public CSSObject GenSkeletonElementCommonSize(int size)
|
||||
{
|
||||
return new CSSObject()
|
||||
{
|
||||
Height = size,
|
||||
LineHeight = @$"{size}px",
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenSkeletonElementAvatarSize(int size)
|
||||
{
|
||||
return new CSSObject()
|
||||
{
|
||||
Width = size,
|
||||
["..."] = GenSkeletonElementCommonSize(size)
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenSkeletonColor(SkeletonToken token)
|
||||
{
|
||||
return new CSSObject()
|
||||
{
|
||||
Background = token.SkeletonLoadingBackground,
|
||||
BackgroundSize = "400% 100%",
|
||||
AnimationName = skeletonClsLoading,
|
||||
AnimationDuration = token.SkeletonLoadingMotionDuration,
|
||||
AnimationTimingFunction = "ease",
|
||||
AnimationIterationCount = "infinite",
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenSkeletonElementInputSize(int size)
|
||||
{
|
||||
return new CSSObject()
|
||||
{
|
||||
Width = size * 5,
|
||||
MinWidth = size * 5,
|
||||
["..."] = GenSkeletonElementCommonSize(size)
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenSkeletonElementAvatar(SkeletonToken token)
|
||||
{
|
||||
var skeletonAvatarCls = token.SkeletonAvatarCls;
|
||||
var color = token.Color;
|
||||
var controlHeight = token.ControlHeight;
|
||||
var controlHeightLG = token.ControlHeightLG;
|
||||
var controlHeightSM = token.ControlHeightSM;
|
||||
return new CSSObject()
|
||||
{
|
||||
[$"{skeletonAvatarCls}"] = new CSSObject()
|
||||
{
|
||||
Display = "inline-block",
|
||||
VerticalAlign = "top",
|
||||
Background = color,
|
||||
["..."] = GenSkeletonElementAvatarSize(controlHeight)
|
||||
},
|
||||
[$"{skeletonAvatarCls}{skeletonAvatarCls}-circle"] = new CSSObject()
|
||||
{
|
||||
BorderRadius = "50%",
|
||||
},
|
||||
[$"{skeletonAvatarCls}{skeletonAvatarCls}-lg"] = new CSSObject()
|
||||
{
|
||||
["..."] = GenSkeletonElementAvatarSize(controlHeightLG)
|
||||
},
|
||||
[$"{skeletonAvatarCls}{skeletonAvatarCls}-sm"] = new CSSObject()
|
||||
{
|
||||
["..."] = GenSkeletonElementAvatarSize(controlHeightSM)
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenSkeletonElementInput(SkeletonToken token)
|
||||
{
|
||||
var controlHeight = token.ControlHeight;
|
||||
var borderRadiusSM = token.BorderRadiusSM;
|
||||
var skeletonInputCls = token.SkeletonInputCls;
|
||||
var controlHeightLG = token.ControlHeightLG;
|
||||
var controlHeightSM = token.ControlHeightSM;
|
||||
var color = token.Color;
|
||||
return new CSSObject()
|
||||
{
|
||||
[$"{skeletonInputCls}"] = new CSSObject()
|
||||
{
|
||||
Display = "inline-block",
|
||||
VerticalAlign = "top",
|
||||
Background = color,
|
||||
BorderRadius = borderRadiusSM,
|
||||
["..."] = GenSkeletonElementInputSize(controlHeight)
|
||||
},
|
||||
[$"{skeletonInputCls}-lg"] = new CSSObject()
|
||||
{
|
||||
["..."] = GenSkeletonElementInputSize(controlHeightLG)
|
||||
},
|
||||
[$"{skeletonInputCls}-sm"] = new CSSObject()
|
||||
{
|
||||
["..."] = GenSkeletonElementInputSize(controlHeightSM)
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenSkeletonElementImageSize(int size)
|
||||
{
|
||||
return new CSSObject()
|
||||
{
|
||||
Width = size,
|
||||
["..."] = GenSkeletonElementCommonSize(size)
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenSkeletonElementImage(SkeletonToken token)
|
||||
{
|
||||
var skeletonImageCls = token.SkeletonImageCls;
|
||||
var imageSizeBase = token.ImageSizeBase;
|
||||
var color = token.Color;
|
||||
var borderRadiusSM = token.BorderRadiusSM;
|
||||
return new CSSObject()
|
||||
{
|
||||
[$"{skeletonImageCls}"] = new CSSObject()
|
||||
{
|
||||
Display = "flex",
|
||||
AlignItems = "center",
|
||||
JustifyContent = "center",
|
||||
VerticalAlign = "top",
|
||||
Background = color,
|
||||
BorderRadius = borderRadiusSM,
|
||||
["..."] = GenSkeletonElementImageSize(imageSizeBase * 2),
|
||||
[$"{skeletonImageCls}-path"] = new CSSObject()
|
||||
{
|
||||
Fill = "#bfbfbf",
|
||||
},
|
||||
[$"{skeletonImageCls}-svg"] = new CSSObject()
|
||||
{
|
||||
["..."] = GenSkeletonElementImageSize(imageSizeBase),
|
||||
MaxWidth = imageSizeBase * 4,
|
||||
MaxHeight = imageSizeBase * 4,
|
||||
},
|
||||
[$"{skeletonImageCls}-svg{skeletonImageCls}-svg-circle"] = new CSSObject()
|
||||
{
|
||||
BorderRadius = "50%",
|
||||
},
|
||||
},
|
||||
[$"{skeletonImageCls}{skeletonImageCls}-circle"] = new CSSObject()
|
||||
{
|
||||
BorderRadius = "50%",
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenSkeletonElementButtonShape(SkeletonToken token, int size, string buttonCls)
|
||||
{
|
||||
var skeletonButtonCls = token.SkeletonButtonCls;
|
||||
return new CSSObject()
|
||||
{
|
||||
[$"{buttonCls}{skeletonButtonCls}-circle"] = new CSSObject()
|
||||
{
|
||||
Width = size,
|
||||
MinWidth = size,
|
||||
BorderRadius = "50%",
|
||||
},
|
||||
[$"{buttonCls}{skeletonButtonCls}-round"] = new CSSObject()
|
||||
{
|
||||
BorderRadius = size,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenSkeletonElementButtonSize(int size)
|
||||
{
|
||||
return new CSSObject()
|
||||
{
|
||||
Width = size * 2,
|
||||
MinWidth = size * 2,
|
||||
["..."] = GenSkeletonElementCommonSize(size)
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenSkeletonElementButton(SkeletonToken token)
|
||||
{
|
||||
var borderRadiusSM = token.BorderRadiusSM;
|
||||
var skeletonButtonCls = token.SkeletonButtonCls;
|
||||
var controlHeight = token.ControlHeight;
|
||||
var controlHeightLG = token.ControlHeightLG;
|
||||
var controlHeightSM = token.ControlHeightSM;
|
||||
var color = token.Color;
|
||||
return new CSSObject()
|
||||
{
|
||||
[$"{skeletonButtonCls}"] = new CSSObject()
|
||||
{
|
||||
Display = "inline-block",
|
||||
VerticalAlign = "top",
|
||||
Background = color,
|
||||
BorderRadius = borderRadiusSM,
|
||||
Width = controlHeight * 2,
|
||||
MinWidth = controlHeight * 2,
|
||||
["..."] = GenSkeletonElementButtonSize(controlHeight)
|
||||
},
|
||||
["..."] = GenSkeletonElementButtonShape(token, controlHeight, skeletonButtonCls),
|
||||
[$"{skeletonButtonCls}-lg"] = new CSSObject()
|
||||
{
|
||||
["..."] = GenSkeletonElementButtonSize(controlHeightLG)
|
||||
},
|
||||
["..."] = GenSkeletonElementButtonShape(token, controlHeightLG, $"{skeletonButtonCls}-lg"),
|
||||
[$"{skeletonButtonCls}-sm"] = new CSSObject()
|
||||
{
|
||||
["..."] = GenSkeletonElementButtonSize(controlHeightSM)
|
||||
},
|
||||
["..."] = GenSkeletonElementButtonShape(token, controlHeightSM, $"{skeletonButtonCls}-sm")
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_1 GenBaseStyle(SkeletonToken token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var skeletonAvatarCls = token.SkeletonAvatarCls;
|
||||
var skeletonTitleCls = token.SkeletonTitleCls;
|
||||
var skeletonParagraphCls = token.SkeletonParagraphCls;
|
||||
var skeletonButtonCls = token.SkeletonButtonCls;
|
||||
var skeletonInputCls = token.SkeletonInputCls;
|
||||
var skeletonImageCls = token.SkeletonImageCls;
|
||||
var controlHeight = token.ControlHeight;
|
||||
var controlHeightLG = token.ControlHeightLG;
|
||||
var controlHeightSM = token.ControlHeightSM;
|
||||
var color = token.Color;
|
||||
var padding = token.Padding;
|
||||
var marginSM = token.MarginSM;
|
||||
var borderRadius = token.BorderRadius;
|
||||
var skeletonTitleHeight = token.SkeletonTitleHeight;
|
||||
var skeletonBlockRadius = token.SkeletonBlockRadius;
|
||||
var skeletonParagraphLineHeight = token.SkeletonParagraphLineHeight;
|
||||
var controlHeightXS = token.ControlHeightXS;
|
||||
var skeletonParagraphMarginTop = token.SkeletonParagraphMarginTop;
|
||||
return new Unknown_4()
|
||||
{
|
||||
[$"{componentCls}"] = new Unknown_5()
|
||||
{
|
||||
Display = "table",
|
||||
Width = "100%",
|
||||
[$"{componentCls}-header"] = new Unknown_6()
|
||||
{
|
||||
Display = "table-cell",
|
||||
PaddingInlineEnd = padding,
|
||||
VerticalAlign = "top",
|
||||
[$"{skeletonAvatarCls}"] = new Unknown_7()
|
||||
{
|
||||
Display = "inline-block",
|
||||
VerticalAlign = "top",
|
||||
Background = color,
|
||||
["..."] = GenSkeletonElementAvatarSize(controlHeight)
|
||||
},
|
||||
[$"{skeletonAvatarCls}-circle"] = new Unknown_8()
|
||||
{
|
||||
BorderRadius = "50%",
|
||||
},
|
||||
[$"{skeletonAvatarCls}-lg"] = new Unknown_9()
|
||||
{
|
||||
["..."] = GenSkeletonElementAvatarSize(controlHeightLG)
|
||||
},
|
||||
[$"{skeletonAvatarCls}-sm"] = new Unknown_10()
|
||||
{
|
||||
["..."] = GenSkeletonElementAvatarSize(controlHeightSM)
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-content"] = new Unknown_11()
|
||||
{
|
||||
Display = "table-cell",
|
||||
Width = "100%",
|
||||
VerticalAlign = "top",
|
||||
[$"{skeletonTitleCls}"] = new Unknown_12()
|
||||
{
|
||||
Width = "100%",
|
||||
Height = skeletonTitleHeight,
|
||||
Background = color,
|
||||
BorderRadius = skeletonBlockRadius,
|
||||
[$"+ {skeletonParagraphCls}"] = new Unknown_13()
|
||||
{
|
||||
MarginBlockStart = controlHeightSM,
|
||||
},
|
||||
},
|
||||
[$"{skeletonParagraphCls}"] = new Unknown_14()
|
||||
{
|
||||
Padding = 0,
|
||||
["> li"] = new Unknown_15()
|
||||
{
|
||||
Width = "100%",
|
||||
Height = skeletonParagraphLineHeight,
|
||||
ListStyle = "none",
|
||||
Background = color,
|
||||
BorderRadius = skeletonBlockRadius,
|
||||
["+ li"] = new Unknown_16()
|
||||
{
|
||||
MarginBlockStart = controlHeightXS,
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"{skeletonParagraphCls}> li:last-child:not(:first-child):not(:nth-child(2))"] = new Unknown_17()
|
||||
{
|
||||
Width = "61%",
|
||||
},
|
||||
},
|
||||
[$"&-round {componentCls}-content"] = new Unknown_18()
|
||||
{
|
||||
[$"{skeletonTitleCls}, {skeletonParagraphCls} > li"] = new Unknown_19()
|
||||
{
|
||||
BorderRadius = borderRadius,
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-with-avatar {componentCls}-content"] = new Unknown_20()
|
||||
{
|
||||
[$"{skeletonTitleCls}"] = new Unknown_21()
|
||||
{
|
||||
MarginBlockStart = marginSM,
|
||||
[$"+ {skeletonParagraphCls}"] = new Unknown_22()
|
||||
{
|
||||
MarginBlockStart = skeletonParagraphMarginTop,
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"{componentCls}{componentCls}-element"] = new Unknown_23()
|
||||
{
|
||||
Display = "inline-block",
|
||||
Width = "auto",
|
||||
["..."] = GenSkeletonElementButton(token),
|
||||
["..."] = GenSkeletonElementAvatar(token),
|
||||
["..."] = GenSkeletonElementInput(token),
|
||||
["..."] = GenSkeletonElementImage(token)
|
||||
},
|
||||
[$"{componentCls}{componentCls}-block"] = new Unknown_24()
|
||||
{
|
||||
Width = "100%",
|
||||
[$"{skeletonButtonCls}"] = new Unknown_25()
|
||||
{
|
||||
Width = "100%",
|
||||
},
|
||||
[$"{skeletonInputCls}"] = new Unknown_26()
|
||||
{
|
||||
Width = "100%",
|
||||
},
|
||||
},
|
||||
[$"{componentCls}{componentCls}-active"] = new Unknown_27()
|
||||
{
|
||||
[$"{skeletonTitleCls},{skeletonParagraphCls}>li,{skeletonAvatarCls},{skeletonButtonCls},{skeletonInputCls},{skeletonImageCls}"] = new Unknown_28()
|
||||
{
|
||||
["..."] = GenSkeletonColor(token)
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_2 GenComponentStyleHook(Unknown_29 token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var skeletonToken = MergeToken(
|
||||
token,
|
||||
new Unknown_30()
|
||||
{
|
||||
SkeletonAvatarCls = @$"{componentCls}-avatar",
|
||||
SkeletonTitleCls = @$"{componentCls}-title",
|
||||
SkeletonParagraphCls = @$"{componentCls}-paragraph",
|
||||
SkeletonButtonCls = @$"{componentCls}-button",
|
||||
SkeletonInputCls = @$"{componentCls}-input",
|
||||
SkeletonImageCls = @$"{componentCls}-image",
|
||||
ImageSizeBase = token.ControlHeight * 1.5,
|
||||
SkeletonTitleHeight = token.ControlHeight / 2,
|
||||
SkeletonBlockRadius = token.BorderRadiusSM,
|
||||
SkeletonParagraphLineHeight = token.ControlHeight / 2,
|
||||
SkeletonParagraphMarginTop = token.MarginLG + token.MarginXXS,
|
||||
BorderRadius = 100,
|
||||
SkeletonLoadingBackground = @$"linear-gradient(90deg, {token.Color} 25%, {token.ColorGradientEnd} 37%, {token.Color} 63%)",
|
||||
SkeletonLoadingMotionDuration = "1.4s",
|
||||
});
|
||||
return new Unknown_31 { GenBaseStyle(skeletonToken) };
|
||||
}
|
||||
|
||||
public Unknown_3 GenComponentStyleHook(Unknown_32 token)
|
||||
{
|
||||
var colorFillContent = token.ColorFillContent;
|
||||
var colorFill = token.ColorFill;
|
||||
return new Unknown_33()
|
||||
{
|
||||
Color = colorFillContent,
|
||||
ColorGradientEnd = colorFill,
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
public partial class SkeletonToken : TokenWithCommonCls
|
||||
{
|
||||
public string SkeletonAvatarCls { get; set; }
|
||||
|
||||
public string SkeletonTitleCls { get; set; }
|
||||
|
||||
public string SkeletonParagraphCls { get; set; }
|
||||
|
||||
public string SkeletonButtonCls { get; set; }
|
||||
|
||||
public string SkeletonInputCls { get; set; }
|
||||
|
||||
public string SkeletonImageCls { get; set; }
|
||||
|
||||
public int ImageSizeBase { get; set; }
|
||||
|
||||
public int SkeletonTitleHeight { get; set; }
|
||||
|
||||
public int SkeletonBlockRadius { get; set; }
|
||||
|
||||
public int SkeletonParagraphLineHeight { get; set; }
|
||||
|
||||
public int SkeletonParagraphMarginTop { get; set; }
|
||||
|
||||
public string SkeletonLoadingBackground { get; set; }
|
||||
|
||||
public string SkeletonLoadingMotionDuration { get; set; }
|
||||
|
||||
public int BorderRadius { get; set; }
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,363 @@
|
|||
using System;
|
||||
using CssInCs;
|
||||
using static AntDesign.GlobalStyle;
|
||||
using static AntDesign.Theme;
|
||||
|
||||
namespace AntDesign
|
||||
{
|
||||
public partial class SliderToken
|
||||
{
|
||||
public int ControlSize { get; set; }
|
||||
|
||||
public int RailSize { get; set; }
|
||||
|
||||
public int HandleSize { get; set; }
|
||||
|
||||
public int HandleSizeHover { get; set; }
|
||||
|
||||
public int HandleLineWidth { get; set; }
|
||||
|
||||
public int HandleLineWidthHover { get; set; }
|
||||
|
||||
public int DotSize { get; set; }
|
||||
|
||||
}
|
||||
|
||||
public partial class SliderToken : TokenWithCommonCls
|
||||
{
|
||||
public int MarginFull { get; set; }
|
||||
|
||||
public int MarginPart { get; set; }
|
||||
|
||||
public int MarginPartWithMark { get; set; }
|
||||
|
||||
}
|
||||
|
||||
public partial class Slider
|
||||
{
|
||||
public Unknown_1 GenBaseStyle(Unknown_6 token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var controlSize = token.ControlSize;
|
||||
var dotSize = token.DotSize;
|
||||
var marginFull = token.MarginFull;
|
||||
var marginPart = token.MarginPart;
|
||||
var colorFillContentHover = token.ColorFillContentHover;
|
||||
return new Unknown_7()
|
||||
{
|
||||
[componentCls] = new Unknown_8()
|
||||
{
|
||||
["..."] = ResetComponent(token),
|
||||
Position = "relative",
|
||||
Height = controlSize,
|
||||
Margin = @$"{marginPart}px {marginFull}px",
|
||||
Padding = 0,
|
||||
Cursor = "pointer",
|
||||
TouchAction = "none",
|
||||
["&-vertical"] = new Unknown_9()
|
||||
{
|
||||
Margin = @$"{marginFull}px {marginPart}px",
|
||||
},
|
||||
[$"{componentCls}-rail"] = new Unknown_10()
|
||||
{
|
||||
Position = "absolute",
|
||||
BackgroundColor = token.ColorFillTertiary,
|
||||
BorderRadius = token.BorderRadiusXS,
|
||||
Transition = @$"background-color {token.MotionDurationMid}",
|
||||
},
|
||||
[$"{componentCls}-track"] = new Unknown_11()
|
||||
{
|
||||
Position = "absolute",
|
||||
BackgroundColor = token.ColorPrimaryBorder,
|
||||
BorderRadius = token.BorderRadiusXS,
|
||||
Transition = @$"background-color {token.MotionDurationMid}",
|
||||
},
|
||||
["&:hover"] = new Unknown_12()
|
||||
{
|
||||
[$"{componentCls}-rail"] = new Unknown_13()
|
||||
{
|
||||
BackgroundColor = token.ColorFillSecondary,
|
||||
},
|
||||
[$"{componentCls}-track"] = new Unknown_14()
|
||||
{
|
||||
BackgroundColor = token.ColorPrimaryBorderHover,
|
||||
},
|
||||
[$"{componentCls}-dot"] = new Unknown_15()
|
||||
{
|
||||
BorderColor = colorFillContentHover,
|
||||
},
|
||||
[$"{componentCls}-handle::after"] = new Unknown_16()
|
||||
{
|
||||
BoxShadow = @$"0 0 0 {token.HandleLineWidth}px {token.ColorPrimaryBorderHover}",
|
||||
},
|
||||
[$"{componentCls}-dot-active"] = new Unknown_17()
|
||||
{
|
||||
BorderColor = token.ColorPrimary,
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-handle"] = new Unknown_18()
|
||||
{
|
||||
Position = "absolute",
|
||||
Width = token.HandleSize,
|
||||
Height = token.HandleSize,
|
||||
Outline = "none",
|
||||
[$"{componentCls}-dragging"] = new Unknown_19()
|
||||
{
|
||||
ZIndex = 1,
|
||||
},
|
||||
["&::before"] = new Unknown_20()
|
||||
{
|
||||
Content = "\"\"",
|
||||
Position = "absolute",
|
||||
InsetInlineStart = -token.HandleLineWidth,
|
||||
InsetBlockStart = -token.HandleLineWidth,
|
||||
Width = token.HandleSize + token.HandleLineWidth * 2,
|
||||
Height = token.HandleSize + token.HandleLineWidth * 2,
|
||||
BackgroundColor = "transparent",
|
||||
},
|
||||
["&::after"] = new Unknown_21()
|
||||
{
|
||||
Content = "\"\"",
|
||||
Position = "absolute",
|
||||
InsetBlockStart = 0,
|
||||
InsetInlineStart = 0,
|
||||
Width = token.HandleSize,
|
||||
Height = token.HandleSize,
|
||||
BackgroundColor = token.ColorBgElevated,
|
||||
BoxShadow = @$"0 0 0 {token.HandleLineWidth}px {token.ColorPrimaryBorder}",
|
||||
BorderRadius = "50%",
|
||||
Cursor = "pointer",
|
||||
Transition = @$"
|
||||
inset-inline-start {token.MotionDurationMid},
|
||||
inset-block-start {token.MotionDurationMid},
|
||||
width {token.MotionDurationMid},
|
||||
height {token.MotionDurationMid},
|
||||
box-shadow {token.MotionDurationMid}
|
||||
",
|
||||
},
|
||||
["&:hover, &:active, &:focus"] = new Unknown_22()
|
||||
{
|
||||
["&::before"] = new Unknown_23()
|
||||
{
|
||||
InsetInlineStart = -(
|
||||
(token.HandleSizeHover - token.HandleSize) / 2 +
|
||||
token.HandleLineWidthHover
|
||||
),
|
||||
InsetBlockStart = -(
|
||||
(token.HandleSizeHover - token.HandleSize) / 2 +
|
||||
token.HandleLineWidthHover
|
||||
),
|
||||
Width = token.HandleSizeHover + token.HandleLineWidthHover * 2,
|
||||
Height = token.HandleSizeHover + token.HandleLineWidthHover * 2,
|
||||
},
|
||||
["&::after"] = new Unknown_24()
|
||||
{
|
||||
BoxShadow = @$"0 0 0 {token.HandleLineWidthHover}px {token.ColorPrimary}",
|
||||
Width = token.HandleSizeHover,
|
||||
Height = token.HandleSizeHover,
|
||||
InsetInlineStart = (token.HandleSize - token.HandleSizeHover) / 2,
|
||||
InsetBlockStart = (token.HandleSize - token.HandleSizeHover) / 2,
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-mark"] = new Unknown_25()
|
||||
{
|
||||
Position = "absolute",
|
||||
FontSize = token.FontSize,
|
||||
},
|
||||
[$"{componentCls}-mark-text"] = new Unknown_26()
|
||||
{
|
||||
Position = "absolute",
|
||||
Display = "inline-block",
|
||||
Color = token.ColorTextDescription,
|
||||
TextAlign = "center",
|
||||
WordBreak = "keep-all",
|
||||
Cursor = "pointer",
|
||||
UserSelect = "none",
|
||||
["&-active"] = new Unknown_27()
|
||||
{
|
||||
Color = token.ColorText,
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-step"] = new Unknown_28()
|
||||
{
|
||||
Position = "absolute",
|
||||
Background = "transparent",
|
||||
PointerEvents = "none",
|
||||
},
|
||||
[$"{componentCls}-dot"] = new Unknown_29()
|
||||
{
|
||||
Position = "absolute",
|
||||
Width = dotSize,
|
||||
Height = dotSize,
|
||||
BackgroundColor = token.ColorBgElevated,
|
||||
Border = @$"{token.HandleLineWidth}px solid {token.ColorBorderSecondary}",
|
||||
BorderRadius = "50%",
|
||||
Cursor = "pointer",
|
||||
Transition = @$"border-color {token.MotionDurationSlow}",
|
||||
PointerEvents = "auto",
|
||||
["&-active"] = new Unknown_30()
|
||||
{
|
||||
BorderColor = token.ColorPrimaryBorder,
|
||||
},
|
||||
},
|
||||
[$"&{componentCls}-disabled"] = new Unknown_31()
|
||||
{
|
||||
Cursor = "not-allowed",
|
||||
[$"{componentCls}-rail"] = new Unknown_32()
|
||||
{
|
||||
BackgroundColor = @$"{token.ColorFillSecondary} !important",
|
||||
},
|
||||
[$"{componentCls}-track"] = new Unknown_33()
|
||||
{
|
||||
BackgroundColor = @$"{token.ColorTextDisabled} !important",
|
||||
},
|
||||
[$"{componentCls}-dot"] = new Unknown_34()
|
||||
{
|
||||
BackgroundColor = token.ColorBgElevated,
|
||||
BorderColor = token.ColorTextDisabled,
|
||||
BoxShadow = "none",
|
||||
Cursor = "not-allowed",
|
||||
},
|
||||
[$"{componentCls}-handle::after"] = new Unknown_35()
|
||||
{
|
||||
BackgroundColor = token.ColorBgElevated,
|
||||
Cursor = "not-allowed",
|
||||
Width = token.HandleSize,
|
||||
Height = token.HandleSize,
|
||||
BoxShadow = @$"0 0 0 {token.HandleLineWidth}px {new TinyColor(token.ColorTextDisabled)
|
||||
.onBackground(token.ColorBgContainer)
|
||||
.toHexShortString()}",
|
||||
InsetInlineStart = 0,
|
||||
InsetBlockStart = 0,
|
||||
},
|
||||
[$"{componentCls}-mark-text,{componentCls}-dot"] = new Unknown_36()
|
||||
{
|
||||
Cursor = @$"not-allowed !important",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenDirectionStyle(SliderToken token, bool horizontal)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var railSize = token.RailSize;
|
||||
var handleSize = token.HandleSize;
|
||||
var dotSize = token.DotSize;
|
||||
var railPadding = horizontal ? "paddingBlock" : "paddingInline";
|
||||
var full = horizontal ? "width" : "height";
|
||||
var part = horizontal ? "height" : "width";
|
||||
var handlePos = horizontal ? "insetBlockStart" : "insetInlineStart";
|
||||
var markInset = horizontal ? "top" : "insetInlineStart";
|
||||
return new CSSObject()
|
||||
{
|
||||
[railPadding] = railSize,
|
||||
[part] = railSize * 3,
|
||||
[$"{componentCls}-rail"] = new CSSObject()
|
||||
{
|
||||
[full] = "100%",
|
||||
[part] = railSize,
|
||||
},
|
||||
[$"{componentCls}-track"] = new CSSObject()
|
||||
{
|
||||
[part] = railSize,
|
||||
},
|
||||
[$"{componentCls}-handle"] = new CSSObject()
|
||||
{
|
||||
[handlePos] = (railSize * 3 - handleSize) / 2,
|
||||
},
|
||||
[$"{componentCls}-mark"] = new CSSObject()
|
||||
{
|
||||
InsetInlineStart = 0,
|
||||
Top = 0,
|
||||
[markInset] = handleSize,
|
||||
[full] = "100%",
|
||||
},
|
||||
[$"{componentCls}-step"] = new CSSObject()
|
||||
{
|
||||
InsetInlineStart = 0,
|
||||
Top = 0,
|
||||
[markInset] = railSize,
|
||||
[full] = "100%",
|
||||
[part] = railSize,
|
||||
},
|
||||
[$"{componentCls}-dot"] = new CSSObject()
|
||||
{
|
||||
Position = "absolute",
|
||||
[handlePos] = (railSize - dotSize) / 2,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_2 GenHorizontalStyle(Unknown_37 token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var marginPartWithMark = token.MarginPartWithMark;
|
||||
return new Unknown_38()
|
||||
{
|
||||
[$"{componentCls}-horizontal"] = new Unknown_39()
|
||||
{
|
||||
["..."] = GenDirectionStyle(token, true),
|
||||
[$"&{componentCls}-with-marks"] = new Unknown_40()
|
||||
{
|
||||
MarginBottom = marginPartWithMark,
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_3 GenVerticalStyle(Unknown_41 token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
return new Unknown_42()
|
||||
{
|
||||
[$"{componentCls}-vertical"] = new Unknown_43()
|
||||
{
|
||||
["..."] = GenDirectionStyle(token, false),
|
||||
Height = "100%",
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_4 GenComponentStyleHook(Unknown_44 token)
|
||||
{
|
||||
var sliderToken = MergeToken(
|
||||
token,
|
||||
new Unknown_45()
|
||||
{
|
||||
MarginPart = (token.ControlHeight - token.ControlSize) / 2,
|
||||
MarginFull = token.ControlSize / 2,
|
||||
MarginPartWithMark = token.ControlHeightLG - token.ControlSize,
|
||||
});
|
||||
return new Unknown_46
|
||||
{
|
||||
GenBaseStyle(sliderToken),
|
||||
GenHorizontalStyle(sliderToken),
|
||||
GenVerticalStyle(sliderToken)
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_5 GenComponentStyleHook(Unknown_47 token)
|
||||
{
|
||||
var increaseHandleWidth = 1;
|
||||
var controlSize = token.ControlHeightLG / 4;
|
||||
var controlSizeHover = token.ControlHeightSM / 2;
|
||||
var handleLineWidth = token.LineWidth + increaseHandleWidth;
|
||||
var handleLineWidthHover = token.LineWidth + increaseHandleWidth * 3;
|
||||
return new Unknown_48()
|
||||
{
|
||||
ControlSize = controlSize,
|
||||
RailSize = 4,
|
||||
HandleSize = controlSize,
|
||||
HandleSizeHover = controlSizeHover,
|
||||
DotSize = 8,
|
||||
HandleLineWidth = handleLineWidth,
|
||||
HandleLineWidthHover = handleLineWidthHover,
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
using System;
|
||||
using CssInCs;
|
||||
using static AntDesign.GlobalStyle;
|
||||
using static AntDesign.Theme;
|
||||
|
||||
namespace AntDesign
|
||||
{
|
||||
public partial class SpaceToken
|
||||
{
|
||||
}
|
||||
|
||||
public partial class SpaceToken : TokenWithCommonCls
|
||||
{
|
||||
}
|
||||
|
||||
public partial class Space
|
||||
{
|
||||
public Unknown_1 GenSpaceStyle(Unknown_5 token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
return new Unknown_6()
|
||||
{
|
||||
[componentCls] = new Unknown_7()
|
||||
{
|
||||
Display = "inline-flex",
|
||||
["&-rtl"] = new Unknown_8()
|
||||
{
|
||||
Direction = "rtl",
|
||||
},
|
||||
["&-vertical"] = new Unknown_9()
|
||||
{
|
||||
FlexDirection = "column",
|
||||
},
|
||||
["&-align"] = new Unknown_10()
|
||||
{
|
||||
FlexDirection = "column",
|
||||
["&-center"] = new Unknown_11()
|
||||
{
|
||||
AlignItems = "center",
|
||||
},
|
||||
["&-start"] = new Unknown_12()
|
||||
{
|
||||
AlignItems = "flex-start",
|
||||
},
|
||||
["&-end"] = new Unknown_13()
|
||||
{
|
||||
AlignItems = "flex-end",
|
||||
},
|
||||
["&-baseline"] = new Unknown_14()
|
||||
{
|
||||
AlignItems = "baseline",
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-item:empty"] = new Unknown_15()
|
||||
{
|
||||
Display = "none",
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_2 GenComponentStyleHook(Unknown_16 token)
|
||||
{
|
||||
return new Unknown_17
|
||||
{
|
||||
GenSpaceStyle(token),
|
||||
GenSpaceCompactStyle(token)
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_3 GenComponentStyleHook()
|
||||
{
|
||||
return new Unknown_18()
|
||||
{
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_4 GenSpaceCompactStyle(Unknown_19 token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
return new Unknown_20()
|
||||
{
|
||||
[componentCls] = new Unknown_21()
|
||||
{
|
||||
Display = "inline-flex",
|
||||
["&-block"] = new Unknown_22()
|
||||
{
|
||||
Display = "flex",
|
||||
Width = "100%",
|
||||
},
|
||||
["&-vertical"] = new Unknown_23()
|
||||
{
|
||||
FlexDirection = "column",
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,265 @@
|
|||
using System;
|
||||
using CssInCs;
|
||||
using static AntDesign.GlobalStyle;
|
||||
using static AntDesign.Theme;
|
||||
|
||||
namespace AntDesign
|
||||
{
|
||||
public partial class SpinToken
|
||||
{
|
||||
public int ContentHeight { get; set; }
|
||||
|
||||
}
|
||||
|
||||
public partial class SpinToken : TokenWithCommonCls
|
||||
{
|
||||
public string SpinDotDefault { get; set; }
|
||||
|
||||
public int SpinDotSize { get; set; }
|
||||
|
||||
public int SpinDotSizeSM { get; set; }
|
||||
|
||||
public int SpinDotSizeLG { get; set; }
|
||||
|
||||
}
|
||||
|
||||
public partial class Spin
|
||||
{
|
||||
private Keyframes antSpinMove = new Keyframes("antSpinMove")
|
||||
{
|
||||
To = new Keyframes()
|
||||
{
|
||||
Opacity = 1,
|
||||
},
|
||||
};
|
||||
|
||||
private Keyframes antRotate = new Keyframes("antRotate")
|
||||
{
|
||||
To = new Keyframes()
|
||||
{
|
||||
Transform = "rotate(405deg)",
|
||||
},
|
||||
};
|
||||
|
||||
public CSSObject GenSpinStyle(SpinToken token)
|
||||
{
|
||||
return new CSSObject()
|
||||
{
|
||||
[$"{token.ComponentCls}"] = new CSSObject()
|
||||
{
|
||||
["..."] = ResetComponent(token),
|
||||
Position = "absolute",
|
||||
Display = "none",
|
||||
Color = token.ColorPrimary,
|
||||
FontSize = 0,
|
||||
TextAlign = "center",
|
||||
VerticalAlign = "middle",
|
||||
Opacity = 0,
|
||||
Transition = @$"transform {token.MotionDurationSlow} {token.MotionEaseInOutCirc}",
|
||||
["&-spinning"] = new CSSObject()
|
||||
{
|
||||
Position = "static",
|
||||
Display = "inline-block",
|
||||
Opacity = 1,
|
||||
},
|
||||
["&-nested-loading"] = new CSSObject()
|
||||
{
|
||||
Position = "relative",
|
||||
[$"> div > {token.ComponentCls}"] = new CSSObject()
|
||||
{
|
||||
Position = "absolute",
|
||||
Top = 0,
|
||||
InsetInlineStart = 0,
|
||||
ZIndex = 4,
|
||||
Display = "block",
|
||||
Width = "100%",
|
||||
Height = "100%",
|
||||
MaxHeight = token.ContentHeight,
|
||||
[$"{token.ComponentCls}-dot"] = new CSSObject()
|
||||
{
|
||||
Position = "absolute",
|
||||
Top = "50%",
|
||||
InsetInlineStart = "50%",
|
||||
Margin = -token.SpinDotSize / 2,
|
||||
},
|
||||
[$"{token.ComponentCls}-text"] = new CSSObject()
|
||||
{
|
||||
Position = "absolute",
|
||||
Top = "50%",
|
||||
Width = "100%",
|
||||
PaddingTop = (token.SpinDotSize - token.FontSize) / 2 + 2,
|
||||
TextShadow = @$"0 1px 2px {token.ColorBgContainer}",
|
||||
FontSize = token.FontSize,
|
||||
},
|
||||
[$"&{token.ComponentCls}-show-text {token.ComponentCls}-dot"] = new CSSObject()
|
||||
{
|
||||
MarginTop = -(token.SpinDotSize / 2) - 10,
|
||||
},
|
||||
["&-sm"] = new CSSObject()
|
||||
{
|
||||
[$"{token.ComponentCls}-dot"] = new CSSObject()
|
||||
{
|
||||
Margin = -token.SpinDotSizeSM / 2,
|
||||
},
|
||||
[$"{token.ComponentCls}-text"] = new CSSObject()
|
||||
{
|
||||
PaddingTop = (token.SpinDotSizeSM - token.FontSize) / 2 + 2,
|
||||
},
|
||||
[$"&{token.ComponentCls}-show-text {token.ComponentCls}-dot"] = new CSSObject()
|
||||
{
|
||||
MarginTop = -(token.SpinDotSizeSM / 2) - 10,
|
||||
},
|
||||
},
|
||||
["&-lg"] = new CSSObject()
|
||||
{
|
||||
[$"{token.ComponentCls}-dot"] = new CSSObject()
|
||||
{
|
||||
Margin = -(token.SpinDotSizeLG / 2),
|
||||
},
|
||||
[$"{token.ComponentCls}-text"] = new CSSObject()
|
||||
{
|
||||
PaddingTop = (token.SpinDotSizeLG - token.FontSize) / 2 + 2,
|
||||
},
|
||||
[$"&{token.ComponentCls}-show-text {token.ComponentCls}-dot"] = new CSSObject()
|
||||
{
|
||||
MarginTop = -(token.SpinDotSizeLG / 2) - 10,
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"{token.ComponentCls}-container"] = new CSSObject()
|
||||
{
|
||||
Position = "relative",
|
||||
Transition = @$"opacity {token.MotionDurationSlow}",
|
||||
["&::after"] = new CSSObject()
|
||||
{
|
||||
Position = "absolute",
|
||||
Top = 0,
|
||||
InsetInlineEnd = 0,
|
||||
Bottom = 0,
|
||||
InsetInlineStart = 0,
|
||||
ZIndex = 10,
|
||||
Width = "100%",
|
||||
Height = "100%",
|
||||
Background = token.ColorBgContainer,
|
||||
Opacity = 0,
|
||||
Transition = @$"all {token.MotionDurationSlow}",
|
||||
Content = "\"\"",
|
||||
PointerEvents = "none",
|
||||
},
|
||||
},
|
||||
[$"{token.ComponentCls}-blur"] = new CSSObject()
|
||||
{
|
||||
Clear = "both",
|
||||
Opacity = 0.5f,
|
||||
UserSelect = "none",
|
||||
PointerEvents = "none",
|
||||
["&::after"] = new CSSObject()
|
||||
{
|
||||
Opacity = 0.4f,
|
||||
PointerEvents = "auto",
|
||||
},
|
||||
},
|
||||
},
|
||||
["&-tip"] = new CSSObject()
|
||||
{
|
||||
Color = token.SpinDotDefault,
|
||||
},
|
||||
[$"{token.ComponentCls}-dot"] = new CSSObject()
|
||||
{
|
||||
Position = "relative",
|
||||
Display = "inline-block",
|
||||
FontSize = token.SpinDotSize,
|
||||
Width = "1em",
|
||||
Height = "1em",
|
||||
["&-item"] = new CSSObject()
|
||||
{
|
||||
Position = "absolute",
|
||||
Display = "block",
|
||||
Width = (token.SpinDotSize - token.MarginXXS / 2) / 2,
|
||||
Height = (token.SpinDotSize - token.MarginXXS / 2) / 2,
|
||||
BackgroundColor = token.ColorPrimary,
|
||||
BorderRadius = "100%",
|
||||
Transform = "scale(0.75)",
|
||||
TransformOrigin = "50% 50%",
|
||||
Opacity = 0.3f,
|
||||
AnimationName = antSpinMove,
|
||||
AnimationDuration = "1s",
|
||||
AnimationIterationCount = "infinite",
|
||||
AnimationTimingFunction = "linear",
|
||||
AnimationDirection = "alternate",
|
||||
["&:nth-child(1)"] = new CSSObject()
|
||||
{
|
||||
Top = 0,
|
||||
InsetInlineStart = 0,
|
||||
},
|
||||
["&:nth-child(2)"] = new CSSObject()
|
||||
{
|
||||
Top = 0,
|
||||
InsetInlineEnd = 0,
|
||||
AnimationDelay = "0.4s",
|
||||
},
|
||||
["&:nth-child(3)"] = new CSSObject()
|
||||
{
|
||||
InsetInlineEnd = 0,
|
||||
Bottom = 0,
|
||||
AnimationDelay = "0.8s",
|
||||
},
|
||||
["&:nth-child(4)"] = new CSSObject()
|
||||
{
|
||||
Bottom = 0,
|
||||
InsetInlineStart = 0,
|
||||
AnimationDelay = "1.2s",
|
||||
},
|
||||
},
|
||||
["&-spin"] = new CSSObject()
|
||||
{
|
||||
Transform = "rotate(45deg)",
|
||||
AnimationName = antRotate,
|
||||
AnimationDuration = "1.2s",
|
||||
AnimationIterationCount = "infinite",
|
||||
AnimationTimingFunction = "linear",
|
||||
},
|
||||
},
|
||||
[$"&-sm {token.ComponentCls}-dot"] = new CSSObject()
|
||||
{
|
||||
FontSize = token.SpinDotSizeSM,
|
||||
I = new CSSObject()
|
||||
{
|
||||
Width = (token.SpinDotSizeSM - token.MarginXXS / 2) / 2,
|
||||
Height = (token.SpinDotSizeSM - token.MarginXXS / 2) / 2,
|
||||
},
|
||||
},
|
||||
[$"&-lg {token.ComponentCls}-dot"] = new CSSObject()
|
||||
{
|
||||
FontSize = token.SpinDotSizeLG,
|
||||
I = new CSSObject()
|
||||
{
|
||||
Width = (token.SpinDotSizeLG - token.MarginXXS) / 2,
|
||||
Height = (token.SpinDotSizeLG - token.MarginXXS) / 2,
|
||||
},
|
||||
},
|
||||
[$"&{token.ComponentCls}-show-text {token.ComponentCls}-text"] = new CSSObject()
|
||||
{
|
||||
Display = "block",
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_1 GenComponentStyleHook(Unknown_2 token)
|
||||
{
|
||||
var spinToken = MergeToken(
|
||||
token,
|
||||
new Unknown_3()
|
||||
{
|
||||
SpinDotDefault = token.ColorTextDescription,
|
||||
SpinDotSize = token.ControlHeightLG / 2,
|
||||
SpinDotSizeSM = token.ControlHeightLG * 0.35,
|
||||
SpinDotSizeLG = token.ControlHeight,
|
||||
});
|
||||
return new Unknown_4 { GenSpinStyle(spinToken) };
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
using System;
|
||||
using CssInCs;
|
||||
using static AntDesign.GlobalStyle;
|
||||
using static AntDesign.Theme;
|
||||
|
||||
namespace AntDesign
|
||||
{
|
||||
public partial class StatisticToken
|
||||
{
|
||||
public int TitleFontSize { get; set; }
|
||||
|
||||
public int ContentFontSize { get; set; }
|
||||
|
||||
}
|
||||
|
||||
public partial class StatisticToken : TokenWithCommonCls
|
||||
{
|
||||
}
|
||||
|
||||
public partial class Statistic
|
||||
{
|
||||
public CSSObject GenStatisticStyle(StatisticToken token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var marginXXS = token.MarginXXS;
|
||||
var padding = token.Padding;
|
||||
var colorTextDescription = token.ColorTextDescription;
|
||||
var titleFontSize = token.TitleFontSize;
|
||||
var colorTextHeading = token.ColorTextHeading;
|
||||
var contentFontSize = token.ContentFontSize;
|
||||
var fontFamily = token.FontFamily;
|
||||
return new CSSObject()
|
||||
{
|
||||
[$"{componentCls}"] = new CSSObject()
|
||||
{
|
||||
["..."] = ResetComponent(token),
|
||||
[$"{componentCls}-title"] = new CSSObject()
|
||||
{
|
||||
MarginBottom = marginXXS,
|
||||
Color = colorTextDescription,
|
||||
FontSize = titleFontSize,
|
||||
},
|
||||
[$"{componentCls}-skeleton"] = new CSSObject()
|
||||
{
|
||||
PaddingTop = padding,
|
||||
},
|
||||
[$"{componentCls}-content"] = new CSSObject()
|
||||
{
|
||||
Color = colorTextHeading,
|
||||
FontSize = contentFontSize,
|
||||
FontFamily = fontFamily,
|
||||
[$"{componentCls}-content-value"] = new CSSObject()
|
||||
{
|
||||
Display = "inline-block",
|
||||
Direction = "ltr",
|
||||
},
|
||||
[$"{componentCls}-content-prefix, {componentCls}-content-suffix"] = new CSSObject()
|
||||
{
|
||||
Display = "inline-block",
|
||||
},
|
||||
[$"{componentCls}-content-prefix"] = new CSSObject()
|
||||
{
|
||||
MarginInlineEnd = marginXXS,
|
||||
},
|
||||
[$"{componentCls}-content-suffix"] = new CSSObject()
|
||||
{
|
||||
MarginInlineStart = marginXXS,
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_1 GenComponentStyleHook(Unknown_3 token)
|
||||
{
|
||||
var statisticToken = MergeToken(
|
||||
token,
|
||||
new Unknown_4()
|
||||
{
|
||||
});
|
||||
return new Unknown_5 { GenStatisticStyle(statisticToken) };
|
||||
}
|
||||
|
||||
public Unknown_2 GenComponentStyleHook(Unknown_6 token)
|
||||
{
|
||||
var fontSizeHeading3 = token.FontSizeHeading3;
|
||||
var fontSize = token.FontSize;
|
||||
return new Unknown_7()
|
||||
{
|
||||
TitleFontSize = fontSize,
|
||||
ContentFontSize = fontSizeHeading3,
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
Разница между файлами не показана из-за своего большого размера
Загрузить разницу
|
|
@ -0,0 +1,79 @@
|
|||
// Licensed to the .NET Foundation under one or more agreements.
|
||||
// The .NET Foundation licenses this file to you under the MIT license.
|
||||
// See the LICENSE file in the project root for more information.
|
||||
|
||||
using System;
|
||||
using CssInCs;
|
||||
|
||||
namespace AntDesign
|
||||
{
|
||||
internal class GlobalStyle
|
||||
{
|
||||
public static CSSObject TextEllipsis = new()
|
||||
{
|
||||
Overflow = "hidden",
|
||||
WhiteSpace = "nowrap",
|
||||
TextOverflow = "ellipsis"
|
||||
};
|
||||
|
||||
public static CSSObject ResetComponent(GlobalToken token)
|
||||
{
|
||||
return new CSSObject();
|
||||
}
|
||||
|
||||
public static CSSObject ResetIcon()
|
||||
{
|
||||
return new CSSObject();
|
||||
}
|
||||
|
||||
public static CSSObject ClearFix()
|
||||
{
|
||||
return new CSSObject();
|
||||
}
|
||||
|
||||
public static CSSObject GenLinkStyle(GlobalToken token)
|
||||
{
|
||||
return new CSSObject();
|
||||
}
|
||||
|
||||
public static CSSObject GenCommonStyle(GlobalToken token)
|
||||
{
|
||||
return new CSSObject();
|
||||
}
|
||||
|
||||
public static CSSObject GenFocusOutline(GlobalToken token)
|
||||
{
|
||||
return new CSSObject();
|
||||
}
|
||||
|
||||
public static CSSObject GenFocusStyle(GlobalToken token)
|
||||
{
|
||||
return new CSSObject();
|
||||
}
|
||||
|
||||
public static CSSObject GenCompactItemStyle(GlobalToken token)
|
||||
{
|
||||
return new CSSObject();
|
||||
}
|
||||
|
||||
public static CSSObject GenCompactItemVerticalStyle(GlobalToken token)
|
||||
{
|
||||
return new CSSObject();
|
||||
}
|
||||
|
||||
public static CSSObject GenPanelStyle(GlobalToken token)
|
||||
{
|
||||
return new CSSObject();
|
||||
}
|
||||
|
||||
public static CSSObject GetCheckboxStyle(string key, GlobalToken token)
|
||||
{
|
||||
return new CSSObject();
|
||||
}
|
||||
|
||||
public static CSSObject GenCollapseMotion(GlobalToken token)
|
||||
{
|
||||
return new CSSObject();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,398 @@
|
|||
using System;
|
||||
using CssInCs;
|
||||
using static AntDesign.GlobalStyle;
|
||||
using static AntDesign.Theme;
|
||||
|
||||
namespace AntDesign
|
||||
{
|
||||
public partial class SwitchToken : TokenWithCommonCls
|
||||
{
|
||||
public int SwitchMinWidth { get; set; }
|
||||
|
||||
public int SwitchHeight { get; set; }
|
||||
|
||||
public string SwitchDuration { get; set; }
|
||||
|
||||
public string SwitchColor { get; set; }
|
||||
|
||||
public int SwitchDisabledOpacity { get; set; }
|
||||
|
||||
public int SwitchInnerMarginMin { get; set; }
|
||||
|
||||
public int SwitchInnerMarginMax { get; set; }
|
||||
|
||||
public int SwitchPadding { get; set; }
|
||||
|
||||
public int SwitchPinSize { get; set; }
|
||||
|
||||
public string SwitchBg { get; set; }
|
||||
|
||||
public int SwitchMinWidthSM { get; set; }
|
||||
|
||||
public int SwitchHeightSM { get; set; }
|
||||
|
||||
public int SwitchInnerMarginMinSM { get; set; }
|
||||
|
||||
public int SwitchInnerMarginMaxSM { get; set; }
|
||||
|
||||
public int SwitchPinSizeSM { get; set; }
|
||||
|
||||
public string SwitchHandleShadow { get; set; }
|
||||
|
||||
public int SwitchLoadingIconSize { get; set; }
|
||||
|
||||
public string SwitchLoadingIconColor { get; set; }
|
||||
|
||||
public string SwitchHandleActiveInset { get; set; }
|
||||
|
||||
}
|
||||
|
||||
public partial class Switch
|
||||
{
|
||||
public Unknown_1 GenSwitchSmallStyle(Unknown_6 token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var switchInnerCls = @$"{componentCls}-inner";
|
||||
return new Unknown_7()
|
||||
{
|
||||
[componentCls] = new Unknown_8()
|
||||
{
|
||||
[$"&{componentCls}-small"] = new Unknown_9()
|
||||
{
|
||||
MinWidth = token.SwitchMinWidthSM,
|
||||
Height = token.SwitchHeightSM,
|
||||
LineHeight = @$"{token.SwitchHeightSM}px",
|
||||
[$"{componentCls}-inner"] = new Unknown_10()
|
||||
{
|
||||
PaddingInlineStart = token.SwitchInnerMarginMaxSM,
|
||||
PaddingInlineEnd = token.SwitchInnerMarginMinSM,
|
||||
[$"{switchInnerCls}-checked"] = new Unknown_11()
|
||||
{
|
||||
MarginInlineStart = @$"calc(-100% + {
|
||||
token.SwitchPinSizeSM + token.SwitchPadding * 2
|
||||
}px - {token.SwitchInnerMarginMaxSM * 2}px)",
|
||||
MarginInlineEnd = @$"calc(100% - {token.SwitchPinSizeSM + token.SwitchPadding * 2}px + {
|
||||
token.SwitchInnerMarginMaxSM * 2
|
||||
}px)",
|
||||
},
|
||||
[$"{switchInnerCls}-unchecked"] = new Unknown_12()
|
||||
{
|
||||
MarginTop = -token.SwitchHeightSM,
|
||||
MarginInlineStart = 0,
|
||||
MarginInlineEnd = 0,
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-handle"] = new Unknown_13()
|
||||
{
|
||||
Width = token.SwitchPinSizeSM,
|
||||
Height = token.SwitchPinSizeSM,
|
||||
},
|
||||
[$"{componentCls}-loading-icon"] = new Unknown_14()
|
||||
{
|
||||
Top = (token.SwitchPinSizeSM - token.SwitchLoadingIconSize) / 2,
|
||||
FontSize = token.SwitchLoadingIconSize,
|
||||
},
|
||||
[$"&{componentCls}-checked"] = new Unknown_15()
|
||||
{
|
||||
[$"{componentCls}-inner"] = new Unknown_16()
|
||||
{
|
||||
PaddingInlineStart = token.SwitchInnerMarginMinSM,
|
||||
PaddingInlineEnd = token.SwitchInnerMarginMaxSM,
|
||||
[$"{switchInnerCls}-checked"] = new Unknown_17()
|
||||
{
|
||||
MarginInlineStart = 0,
|
||||
MarginInlineEnd = 0,
|
||||
},
|
||||
[$"{switchInnerCls}-unchecked"] = new Unknown_18()
|
||||
{
|
||||
MarginInlineStart = @$"calc(100% - {
|
||||
token.SwitchPinSizeSM + token.SwitchPadding * 2
|
||||
}px + {token.SwitchInnerMarginMaxSM * 2}px)",
|
||||
MarginInlineEnd = @$"calc(-100% + {
|
||||
token.SwitchPinSizeSM + token.SwitchPadding * 2
|
||||
}px - {token.SwitchInnerMarginMaxSM * 2}px)",
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-handle"] = new Unknown_19()
|
||||
{
|
||||
InsetInlineStart = @$"calc(100% - {token.SwitchPinSizeSM + token.SwitchPadding}px)",
|
||||
},
|
||||
},
|
||||
[$"&:not({componentCls}-disabled):active"] = new Unknown_20()
|
||||
{
|
||||
[$"&:not({componentCls}-checked) {switchInnerCls}"] = new Unknown_21()
|
||||
{
|
||||
[$"{switchInnerCls}-unchecked"] = new Unknown_22()
|
||||
{
|
||||
MarginInlineStart = token.MarginXXS / 2,
|
||||
MarginInlineEnd = -token.MarginXXS / 2,
|
||||
},
|
||||
},
|
||||
[$"&{componentCls}-checked {switchInnerCls}"] = new Unknown_23()
|
||||
{
|
||||
[$"{switchInnerCls}-checked"] = new Unknown_24()
|
||||
{
|
||||
MarginInlineStart = -token.MarginXXS / 2,
|
||||
MarginInlineEnd = token.MarginXXS / 2,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_2 GenSwitchLoadingStyle(Unknown_25 token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
return new Unknown_26()
|
||||
{
|
||||
[componentCls] = new Unknown_27()
|
||||
{
|
||||
[$"{componentCls}-loading-icon{token.IconCls}"] = new Unknown_28()
|
||||
{
|
||||
Position = "relative",
|
||||
Top = (token.SwitchPinSize - token.FontSize) / 2,
|
||||
Color = token.SwitchLoadingIconColor,
|
||||
VerticalAlign = "top",
|
||||
},
|
||||
[$"&{componentCls}-checked {componentCls}-loading-icon"] = new Unknown_29()
|
||||
{
|
||||
Color = token.SwitchColor,
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_3 GenSwitchHandleStyle(Unknown_30 token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var motion = token.Motion;
|
||||
var switchHandleCls = @$"{componentCls}-handle";
|
||||
return new Unknown_31()
|
||||
{
|
||||
[componentCls] = new Unknown_32()
|
||||
{
|
||||
[switchHandleCls] = new Unknown_33()
|
||||
{
|
||||
Position = "absolute",
|
||||
Top = token.SwitchPadding,
|
||||
InsetInlineStart = token.SwitchPadding,
|
||||
Width = token.SwitchPinSize,
|
||||
Height = token.SwitchPinSize,
|
||||
Transition = @$"all {token.SwitchDuration} ease-in-out",
|
||||
["&::before"] = new Unknown_34()
|
||||
{
|
||||
Position = "absolute",
|
||||
Top = 0,
|
||||
InsetInlineEnd = 0,
|
||||
Bottom = 0,
|
||||
InsetInlineStart = 0,
|
||||
BackgroundColor = token.ColorWhite,
|
||||
BorderRadius = token.SwitchPinSize / 2,
|
||||
BoxShadow = token.SwitchHandleShadow,
|
||||
Transition = @$"all {token.SwitchDuration} ease-in-out",
|
||||
Content = "\"\"",
|
||||
},
|
||||
},
|
||||
[$"&{componentCls}-checked {switchHandleCls}"] = new Unknown_35()
|
||||
{
|
||||
InsetInlineStart = @$"calc(100% - {token.SwitchPinSize + token.SwitchPadding}px)",
|
||||
},
|
||||
[$"&:not({componentCls}-disabled):active"] = motion
|
||||
? {
|
||||
[@$"{switchHandleCls}::before"]: {
|
||||
insetInlineEnd: token.SwitchHandleActiveInset,
|
||||
insetInlineStart: 0,
|
||||
},
|
||||
|
||||
[`&{componentCls}-checked {switchHandleCls}::before`]: {
|
||||
insetInlineEnd: 0,
|
||||
insetInlineStart: token.SwitchHandleActiveInset,
|
||||
},
|
||||
}
|
||||
: /* istanbul ignore next */
|
||||
{},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_4 GenSwitchInnerStyle(Unknown_36 token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var switchInnerCls = @$"{componentCls}-inner";
|
||||
return new Unknown_37()
|
||||
{
|
||||
[componentCls] = new Unknown_38()
|
||||
{
|
||||
[switchInnerCls] = new Unknown_39()
|
||||
{
|
||||
Display = "block",
|
||||
Overflow = "hidden",
|
||||
BorderRadius = 100,
|
||||
Height = "100%",
|
||||
PaddingInlineStart = token.SwitchInnerMarginMax,
|
||||
PaddingInlineEnd = token.SwitchInnerMarginMin,
|
||||
Transition = @$"padding-inline-start {token.SwitchDuration} ease-in-out, padding-inline-end {token.SwitchDuration} ease-in-out",
|
||||
[$"{switchInnerCls}-checked, {switchInnerCls}-unchecked"] = new Unknown_40()
|
||||
{
|
||||
Display = "block",
|
||||
Color = token.ColorTextLightSolid,
|
||||
FontSize = token.FontSizeSM,
|
||||
Transition = @$"margin-inline-start {token.SwitchDuration} ease-in-out, margin-inline-end {token.SwitchDuration} ease-in-out",
|
||||
PointerEvents = "none",
|
||||
},
|
||||
[$"{switchInnerCls}-checked"] = new Unknown_41()
|
||||
{
|
||||
MarginInlineStart = @$"calc(-100% + {token.SwitchPinSize + token.SwitchPadding * 2}px - {
|
||||
token.SwitchInnerMarginMax * 2
|
||||
}px)",
|
||||
MarginInlineEnd = @$"calc(100% - {token.SwitchPinSize + token.SwitchPadding * 2}px + {
|
||||
token.SwitchInnerMarginMax * 2
|
||||
}px)",
|
||||
},
|
||||
[$"{switchInnerCls}-unchecked"] = new Unknown_42()
|
||||
{
|
||||
MarginTop = -token.SwitchHeight,
|
||||
MarginInlineStart = 0,
|
||||
MarginInlineEnd = 0,
|
||||
},
|
||||
},
|
||||
[$"&{componentCls}-checked {switchInnerCls}"] = new Unknown_43()
|
||||
{
|
||||
PaddingInlineStart = token.SwitchInnerMarginMin,
|
||||
PaddingInlineEnd = token.SwitchInnerMarginMax,
|
||||
[$"{switchInnerCls}-checked"] = new Unknown_44()
|
||||
{
|
||||
MarginInlineStart = 0,
|
||||
MarginInlineEnd = 0,
|
||||
},
|
||||
[$"{switchInnerCls}-unchecked"] = new Unknown_45()
|
||||
{
|
||||
MarginInlineStart = @$"calc(100% - {token.SwitchPinSize + token.SwitchPadding * 2}px + {
|
||||
token.SwitchInnerMarginMax * 2
|
||||
}px)",
|
||||
MarginInlineEnd = @$"calc(-100% + {token.SwitchPinSize + token.SwitchPadding * 2}px - {
|
||||
token.SwitchInnerMarginMax * 2
|
||||
}px)",
|
||||
},
|
||||
},
|
||||
[$"&:not({componentCls}-disabled):active"] = new Unknown_46()
|
||||
{
|
||||
[$"&:not({componentCls}-checked) {switchInnerCls}"] = new Unknown_47()
|
||||
{
|
||||
[$"{switchInnerCls}-unchecked"] = new Unknown_48()
|
||||
{
|
||||
MarginInlineStart = token.SwitchPadding * 2,
|
||||
MarginInlineEnd = -token.SwitchPadding * 2,
|
||||
},
|
||||
},
|
||||
[$"&{componentCls}-checked {switchInnerCls}"] = new Unknown_49()
|
||||
{
|
||||
[$"{switchInnerCls}-checked"] = new Unknown_50()
|
||||
{
|
||||
MarginInlineStart = -token.SwitchPadding * 2,
|
||||
MarginInlineEnd = token.SwitchPadding * 2,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenSwitchStyle(SwitchToken token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
return new CSSObject()
|
||||
{
|
||||
[componentCls] = new CSSObject()
|
||||
{
|
||||
["..."] = ResetComponent(token),
|
||||
Position = "relative",
|
||||
Display = "inline-block",
|
||||
BoxSizing = "border-box",
|
||||
MinWidth = token.SwitchMinWidth,
|
||||
Height = token.SwitchHeight,
|
||||
LineHeight = @$"{token.SwitchHeight}px",
|
||||
VerticalAlign = "middle",
|
||||
Background = token.ColorTextQuaternary,
|
||||
Border = "0",
|
||||
BorderRadius = 100,
|
||||
Cursor = "pointer",
|
||||
Transition = @$"all {token.MotionDurationMid}",
|
||||
UserSelect = "none",
|
||||
[$"&:hover:not({componentCls}-disabled)"] = new CSSObject()
|
||||
{
|
||||
Background = token.ColorTextTertiary,
|
||||
},
|
||||
["..."] = GenFocusStyle(token),
|
||||
[$"&{componentCls}-checked"] = new CSSObject()
|
||||
{
|
||||
Background = token.SwitchColor,
|
||||
[$"&:hover:not({componentCls}-disabled)"] = new CSSObject()
|
||||
{
|
||||
Background = token.ColorPrimaryHover,
|
||||
},
|
||||
},
|
||||
[$"&{componentCls}-loading, &{componentCls}-disabled"] = new CSSObject()
|
||||
{
|
||||
Cursor = "not-allowed",
|
||||
Opacity = token.SwitchDisabledOpacity,
|
||||
["*"] = new CSSObject()
|
||||
{
|
||||
BoxShadow = "none",
|
||||
Cursor = "not-allowed",
|
||||
},
|
||||
},
|
||||
[$"&{componentCls}-rtl"] = new CSSObject()
|
||||
{
|
||||
Direction = "rtl",
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_5 GenComponentStyleHook(Unknown_51 token)
|
||||
{
|
||||
var switchHeight = token.FontSize * token.LineHeight;
|
||||
var switchHeightSM = token.ControlHeight / 2;
|
||||
var switchPadding = 2;
|
||||
var switchPinSize = switchHeight - switchPadding * 2;
|
||||
var switchPinSizeSM = switchHeightSM - switchPadding * 2;
|
||||
var switchToken = MergeToken(
|
||||
token,
|
||||
new Unknown_52()
|
||||
{
|
||||
SwitchMinWidth = switchPinSize * 2 + switchPadding * 4,
|
||||
SwitchHeight = switchHeight,
|
||||
SwitchDuration = token.MotionDurationMid,
|
||||
SwitchColor = token.ColorPrimary,
|
||||
SwitchDisabledOpacity = token.OpacityLoading,
|
||||
SwitchInnerMarginMin = switchPinSize / 2,
|
||||
SwitchInnerMarginMax = switchPinSize + switchPadding + switchPadding * 2,
|
||||
SwitchPadding = switchPadding,
|
||||
SwitchPinSize = switchPinSize,
|
||||
SwitchBg = token.ColorBgContainer,
|
||||
SwitchMinWidthSM = switchPinSizeSM * 2 + switchPadding * 2,
|
||||
SwitchHeightSM = switchHeightSM,
|
||||
SwitchInnerMarginMinSM = switchPinSizeSM / 2,
|
||||
SwitchInnerMarginMaxSM = switchPinSizeSM + switchPadding + switchPadding * 2,
|
||||
SwitchPinSizeSM = switchPinSizeSM,
|
||||
SwitchHandleShadow = @$"0 2px 4px 0 {new TinyColor("#00230b").setAlpha(0.2).toRgbString()}",
|
||||
SwitchLoadingIconSize = token.FontSizeIcon * 0.75,
|
||||
SwitchLoadingIconColor = @$"rgba(0, 0, 0, {token.OpacityLoading})",
|
||||
SwitchHandleActiveInset = "-30%",
|
||||
});
|
||||
return new Unknown_53
|
||||
{
|
||||
GenSwitchStyle(switchToken),
|
||||
GenSwitchInnerStyle(switchToken),
|
||||
GenSwitchHandleStyle(switchToken),
|
||||
GenSwitchLoadingStyle(switchToken),
|
||||
GenSwitchSmallStyle(switchToken)
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
Разница между файлами не показана из-за своего большого размера
Загрузить разницу
Разница между файлами не показана из-за своего большого размера
Загрузить разницу
|
|
@ -0,0 +1,215 @@
|
|||
using System;
|
||||
using CssInCs;
|
||||
using static AntDesign.GlobalStyle;
|
||||
using static AntDesign.Theme;
|
||||
|
||||
namespace AntDesign
|
||||
{
|
||||
public partial class TagToken
|
||||
{
|
||||
}
|
||||
|
||||
public partial class TagToken : TokenWithCommonCls
|
||||
{
|
||||
public int TagFontSize { get; set; }
|
||||
|
||||
public React.CSSProperties TagLineHeight { get; set; }
|
||||
|
||||
public string TagDefaultBg { get; set; }
|
||||
|
||||
public string TagDefaultColor { get; set; }
|
||||
|
||||
public int TagIconSize { get; set; }
|
||||
|
||||
public int TagPaddingHorizontal { get; set; }
|
||||
|
||||
public string TagBorderlessBg { get; set; }
|
||||
|
||||
}
|
||||
|
||||
public class CssVariableType
|
||||
{
|
||||
}
|
||||
|
||||
public partial class Tag
|
||||
{
|
||||
public CSSInterpolation GenTagStatusStyle(TagToken token, 'success' | 'processing' | 'error' | 'warning' status, CssVariableType cssVariableType)
|
||||
{
|
||||
var capitalizedCssVariableType = Capitalize(cssVariableType);
|
||||
return new CSSInterpolation()
|
||||
{
|
||||
[$"{token.ComponentCls}-{status}"] = new CSSInterpolation()
|
||||
{
|
||||
Color = token[@$"color{cssVariableType}"],
|
||||
Background = token[@$"color{capitalizedCssVariableType}Bg"],
|
||||
BorderColor = token[@$"color{capitalizedCssVariableType}Border"],
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_2 GenPresetStyle(TagToken token)
|
||||
{
|
||||
return GenPresetColor(
|
||||
token,
|
||||
(colorKey, args) => {
|
||||
var textColor = args.TextColor;
|
||||
var lightBorderColor = args.LightBorderColor;
|
||||
var lightColor = args.LightColor;
|
||||
var darkColor = args.DarkColor;
|
||||
return new Unknown_4()
|
||||
{
|
||||
[$"{token.ComponentCls}-{colorKey}"] = new Unknown_5()
|
||||
{
|
||||
Color = textColor,
|
||||
Background = lightColor,
|
||||
BorderColor = lightBorderColor,
|
||||
["&-inverse"] = new Unknown_6()
|
||||
{
|
||||
Color = token.ColorTextLightSolid,
|
||||
Background = darkColor,
|
||||
BorderColor = darkColor,
|
||||
},
|
||||
[$"&{token.ComponentCls}-borderless"] = new Unknown_7()
|
||||
{
|
||||
BorderColor = "transparent",
|
||||
},
|
||||
},
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
public CSSInterpolation GenBaseStyle(TagToken token)
|
||||
{
|
||||
var paddingXXS = token.PaddingXXS;
|
||||
var lineWidth = token.LineWidth;
|
||||
var tagPaddingHorizontal = token.TagPaddingHorizontal;
|
||||
var componentCls = token.ComponentCls;
|
||||
var paddingInline = tagPaddingHorizontal - lineWidth;
|
||||
var iconMarginInline = paddingXXS - lineWidth;
|
||||
return new CSSInterpolation()
|
||||
{
|
||||
[componentCls] = new CSSInterpolation()
|
||||
{
|
||||
["..."] = ResetComponent(token),
|
||||
Display = "inline-block",
|
||||
Height = "auto",
|
||||
MarginInlineEnd = token.MarginXS,
|
||||
PaddingInline = paddingInline,
|
||||
FontSize = token.TagFontSize,
|
||||
LineHeight = @$"{token.TagLineHeight}px",
|
||||
WhiteSpace = "nowrap",
|
||||
Background = token.TagDefaultBg,
|
||||
Border = @$"{token.LineWidth}px {token.LineType} {token.ColorBorder}",
|
||||
BorderRadius = token.BorderRadiusSM,
|
||||
Opacity = 1,
|
||||
Transition = @$"all {token.MotionDurationMid}",
|
||||
TextAlign = "start",
|
||||
[$"&{componentCls}-rtl"] = new CSSInterpolation()
|
||||
{
|
||||
Direction = "rtl",
|
||||
},
|
||||
["&, a, a:hover"] = new CSSInterpolation()
|
||||
{
|
||||
Color = token.TagDefaultColor,
|
||||
},
|
||||
[$"{componentCls}-close-icon"] = new CSSInterpolation()
|
||||
{
|
||||
MarginInlineStart = iconMarginInline,
|
||||
Color = token.ColorTextDescription,
|
||||
FontSize = token.TagIconSize,
|
||||
Cursor = "pointer",
|
||||
Transition = @$"all {token.MotionDurationMid}",
|
||||
["&:hover"] = new CSSInterpolation()
|
||||
{
|
||||
Color = token.ColorTextHeading,
|
||||
},
|
||||
},
|
||||
[$"&{componentCls}-has-color"] = new CSSInterpolation()
|
||||
{
|
||||
BorderColor = "transparent",
|
||||
[$"&, a, a:hover, {token.IconCls}-close, {token.IconCls}-close:hover"] = new CSSInterpolation()
|
||||
{
|
||||
Color = token.ColorTextLightSolid,
|
||||
},
|
||||
},
|
||||
["&-checkable"] = new CSSInterpolation()
|
||||
{
|
||||
BackgroundColor = "transparent",
|
||||
BorderColor = "transparent",
|
||||
Cursor = "pointer",
|
||||
[$"&:not({componentCls}-checkable-checked):hover"] = new CSSInterpolation()
|
||||
{
|
||||
Color = token.ColorPrimary,
|
||||
BackgroundColor = token.ColorFillSecondary,
|
||||
},
|
||||
["&:active, &-checked"] = new CSSInterpolation()
|
||||
{
|
||||
Color = token.ColorTextLightSolid,
|
||||
},
|
||||
["&-checked"] = new CSSInterpolation()
|
||||
{
|
||||
BackgroundColor = token.ColorPrimary,
|
||||
["&:hover"] = new CSSInterpolation()
|
||||
{
|
||||
BackgroundColor = token.ColorPrimaryHover,
|
||||
},
|
||||
},
|
||||
["&:active"] = new CSSInterpolation()
|
||||
{
|
||||
BackgroundColor = token.ColorPrimaryActive,
|
||||
},
|
||||
},
|
||||
["&-hidden"] = new CSSInterpolation()
|
||||
{
|
||||
Display = "none",
|
||||
},
|
||||
[$"> {token.IconCls} + span, > span + {token.IconCls}"] = new CSSInterpolation()
|
||||
{
|
||||
MarginInlineStart = paddingInline,
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-borderless"] = new CSSInterpolation()
|
||||
{
|
||||
BorderColor = "transparent",
|
||||
Background = token.TagBorderlessBg,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_3 GenComponentStyleHook(Unknown_8 token)
|
||||
{
|
||||
var fontSize = token.FontSize;
|
||||
var lineHeight = token.LineHeight;
|
||||
var lineWidth = token.LineWidth;
|
||||
var fontSizeIcon = token.FontSizeIcon;
|
||||
var tagHeight = Math.Round(fontSize * lineHeight);
|
||||
var tagFontSize = token.FontSizeSM;
|
||||
var tagLineHeight = tagHeight - lineWidth * 2;
|
||||
var tagDefaultBg = token.ColorFillQuaternary;
|
||||
var tagDefaultColor = token.ColorText;
|
||||
var tagToken = MergeToken(
|
||||
token,
|
||||
new Unknown_9()
|
||||
{
|
||||
TagFontSize = tagFontSize,
|
||||
TagLineHeight = tagLineHeight,
|
||||
TagDefaultBg = tagDefaultBg,
|
||||
TagDefaultColor = tagDefaultColor,
|
||||
TagIconSize = fontSizeIcon - 2 * lineWidth,
|
||||
TagPaddingHorizontal = 8,
|
||||
TagBorderlessBg = token.ColorFillTertiary,
|
||||
});
|
||||
return new Unknown_10
|
||||
{
|
||||
GenBaseStyle(tagToken),
|
||||
GenPresetStyle(tagToken),
|
||||
GenTagStatusStyle(tagToken, "success", "Success"),
|
||||
GenTagStatusStyle(tagToken, "processing", "Info"),
|
||||
GenTagStatusStyle(tagToken, "error", "Error"),
|
||||
GenTagStatusStyle(tagToken, "warning", "Warning")
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,634 @@
|
|||
namespace AntDesign
|
||||
{
|
||||
|
||||
// ======================================================================
|
||||
// == Alias Token ==
|
||||
// ======================================================================
|
||||
// 🔥🔥🔥🔥🔥🔥🔥 DO NOT MODIFY THIS. PLEASE CONTACT DESIGNER. 🔥🔥🔥🔥🔥🔥🔥
|
||||
|
||||
public partial class GlobalToken
|
||||
{
|
||||
// Background
|
||||
/**
|
||||
* @nameZH 内容区域背景色（悬停）
|
||||
* @nameEN Background color of content area (hover)
|
||||
* @desc 控制内容区域背景色在鼠标悬停时的样式。
|
||||
* @descEN Control the style of background color of content area when mouse hovers over it.
|
||||
*/
|
||||
public string ColorFillContentHover { get; set; }
|
||||
/**
|
||||
* @nameZH 替代背景色
|
||||
* @nameEN Alternative background color
|
||||
* @desc 控制元素替代背景色。
|
||||
* @descEN Control the alternative background color of element.
|
||||
*/
|
||||
public string ColorFillAlter { get; set; }
|
||||
/**
|
||||
* @nameZH 内容区域背景色
|
||||
* @nameEN Background color of content area
|
||||
* @desc 控制内容区域的背景色。
|
||||
* @descEN Control the background color of content area.
|
||||
*/
|
||||
public string ColorFillContent { get; set; }
|
||||
/**
|
||||
* @nameZH 容器禁用态下的背景色
|
||||
* @nameEN Disabled container background color
|
||||
* @desc 控制容器在禁用状态下的背景色。
|
||||
* @descEN Control the background color of container in disabled state.
|
||||
*/
|
||||
public string ColorBgContainerDisabled { get; set; }
|
||||
/**
|
||||
* @nameZH 文本悬停态背景色
|
||||
* @nameEN Text hover background color
|
||||
* @desc 控制文本在悬停状态下的背景色。
|
||||
* @descEN Control the background color of text in hover state.
|
||||
*/
|
||||
public string ColorBgTextHover { get; set; }
|
||||
/**
|
||||
* @nameZH 文本激活态背景色
|
||||
* @nameEN Text active background color
|
||||
* @desc 控制文本在激活状态下的背景色。
|
||||
* @descEN Control the background color of text in active state.
|
||||
*/
|
||||
public string ColorBgTextActive { get; set; }
|
||||
|
||||
// Border
|
||||
/**
|
||||
* @nameZH 背景边框颜色
|
||||
* @nameEN Background border color
|
||||
* @desc 控制元素背景边框的颜色。
|
||||
* @descEN Control the color of background border of element.
|
||||
*/
|
||||
public string ColorBorderBg { get; set; }
|
||||
/**
|
||||
* @nameZH 分割线颜色
|
||||
* @nameEN Separator color
|
||||
* @desc 用于作为分割线的颜色，此颜色和 colorBorderSecondary 的颜色一致，但是用的是透明色。
|
||||
* @descEN Used as the color of separator, this color is the same as colorBorderSecondary but with transparency.
|
||||
*/
|
||||
public string ColorSplit { get; set; }
|
||||
|
||||
// Text
|
||||
/**
|
||||
* @nameZH 占位文本颜色
|
||||
* @nameEN Placeholder text color
|
||||
* @desc 控制占位文本的颜色。
|
||||
* @descEN Control the color of placeholder text.
|
||||
*/
|
||||
public string ColorTextPlaceholder { get; set; }
|
||||
/**
|
||||
* @nameZH 禁用字体颜色
|
||||
* @nameEN Disabled text color
|
||||
* @desc 控制禁用状态下的字体颜色。
|
||||
* @descEN Control the color of text in disabled state.
|
||||
*/
|
||||
public string ColorTextDisabled { get; set; }
|
||||
/**
|
||||
* @nameZH 标题字体颜色
|
||||
* @nameEN Heading font color
|
||||
* @desc 控制标题字体颜色。
|
||||
* @descEN Control the font color of heading.
|
||||
*/
|
||||
public string ColorTextHeading { get; set; }
|
||||
/**
|
||||
* @nameZH 文本标签字体颜色
|
||||
* @nameEN Text label font color
|
||||
* @desc 控制文本标签字体颜色。
|
||||
* @descEN Control the font color of text label.
|
||||
*/
|
||||
public string ColorTextLabel { get; set; }
|
||||
/**
|
||||
* @nameZH 文本描述字体颜色
|
||||
* @nameEN Text description font color
|
||||
* @desc 控制文本描述字体颜色。
|
||||
* @descEN Control the font color of text description.
|
||||
*/
|
||||
public string ColorTextDescription { get; set; }
|
||||
/**
|
||||
* @nameZH 固定文本高亮颜色
|
||||
* @nameEN Fixed text highlight color
|
||||
* @desc 控制带背景色的文本，例如 Primary Button 组件中的文本高亮颜色。
|
||||
* @descEN Control the highlight color of text with background color, such as the text in Primary Button components.
|
||||
*/
|
||||
public string ColorTextLightSolid { get; set; }
|
||||
|
||||
/**
|
||||
/**
|
||||
* @nameZH 弱操作图标颜色
|
||||
* @nameEN Weak action icon color
|
||||
* @desc 控制弱操作图标的颜色，例如 allowClear 或 Alert 关闭按钮。
|
||||
* @descEN Weak action. Such as `allowClear` or Alert close button
|
||||
*/
|
||||
public string ColorIcon { get; set; }
|
||||
/** */
|
||||
/**
|
||||
* @nameZH 弱操作图标悬浮态颜色
|
||||
* @nameEN Weak action icon hover color
|
||||
* @desc 控制弱操作图标在悬浮状态下的颜色，例如 allowClear 或 Alert 关闭按钮。
|
||||
* @descEN Weak action hover color. Such as `allowClear` or Alert close button
|
||||
*/
|
||||
public string ColorIconHover { get; set; }
|
||||
|
||||
/**
|
||||
* @nameZH 超链接颜色
|
||||
* @nameEN Hyperlink color
|
||||
* @desc 控制超链接的颜色。
|
||||
* @descEN Control the color of hyperlink.
|
||||
*/
|
||||
public string ColorLink { get; set; }
|
||||
/**
|
||||
* @nameZH 超链接悬浮颜色
|
||||
* @nameEN Hyperlink hover color
|
||||
* @desc 控制超链接悬浮时的颜色。
|
||||
* @descEN Control the color of hyperlink when hovering.
|
||||
*/
|
||||
public string ColorLinkHover { get; set; }
|
||||
/**
|
||||
* @nameZH 超链接激活颜色
|
||||
* @nameEN Hyperlink active color
|
||||
* @desc 控制超链接被点击时的颜色。
|
||||
* @descEN Control the color of hyperlink when clicked.
|
||||
*/
|
||||
public string ColorLinkActive { get; set; }
|
||||
|
||||
/**
|
||||
* @nameZH 高亮颜色
|
||||
* @nameEN Highlight color
|
||||
* @desc 控制页面元素高亮时的颜色。
|
||||
* @descEN Control the color of page element when highlighted.
|
||||
*/
|
||||
public string ColorHighlight { get; set; }
|
||||
|
||||
/**
|
||||
* @nameZH 输入组件的 Outline 颜色
|
||||
* @nameEN Input component outline color
|
||||
* @desc 控制输入组件的外轮廓线颜色。
|
||||
* @descEN Control the outline color of input component.
|
||||
*/
|
||||
public string ControlOutline { get; set; }
|
||||
|
||||
/**
|
||||
* @nameZH 警告状态下的 Outline 颜色
|
||||
* @nameEN Warning outline color
|
||||
* @desc 控制输入组件警告状态下的外轮廓线颜色。
|
||||
* @descEN Control the outline color of input component in warning state.
|
||||
*/
|
||||
public string ColorWarningOutline { get; set; }
|
||||
|
||||
/**
|
||||
* @nameZH 错误状态下的 Outline 颜色
|
||||
* @nameEN Error outline color
|
||||
* @desc 控制输入组件错误状态下的外轮廓线颜色。
|
||||
* @descEN Control the outline color of input component in error state.
|
||||
*/
|
||||
public string ColorErrorOutline { get; set; }
|
||||
|
||||
// Font
|
||||
/**
|
||||
* @nameZH 选择器、级联选择器等中的操作图标字体大小
|
||||
* @nameEN Operation icon font size in Select, Cascader, etc.
|
||||
* @desc 控制选择器、级联选择器等中的操作图标字体大小。正常情况下与 fontSizeSM 相同。
|
||||
* @descEN Control the font size of operation icon in Select, Cascader, etc. Normally same as fontSizeSM.
|
||||
*/
|
||||
public int FontSizeIcon { get; set; }
|
||||
|
||||
/**
|
||||
* @nameZH 标题类组件（如 h1、h2、h3）或选中项的字体粗细
|
||||
* @nameEN Font weight for heading components (such as h1, h2, h3) or selected item
|
||||
* @desc 控制标题类组件（如 h1、h2、h3）或选中项的字体粗细。
|
||||
* @descEN Control the font weight of heading components (such as h1, h2, h3) or selected item.
|
||||
*/
|
||||
public int FontWeightStrong { get; set; }
|
||||
|
||||
// Control
|
||||
|
||||
/**
|
||||
* @nameZH 输入组件的外轮廓线宽度
|
||||
* @nameEN Input component outline width
|
||||
* @desc 控制输入组件的外轮廓线宽度。
|
||||
* @descEN Control the outline width of input component.
|
||||
*/
|
||||
public int ControlOutlineWidth { get; set; }
|
||||
|
||||
/**
|
||||
* @nameZH 控制组件项在鼠标悬浮时的背景颜色
|
||||
* @nameEN Background color of control component item when hovering
|
||||
* @desc 控制组件项在鼠标悬浮时的背景颜色。
|
||||
* @descEN Control the background color of control component item when hovering.
|
||||
*/
|
||||
public string ControlItemBgHover { get; set; } // Note. It also is a color
|
||||
|
||||
/**
|
||||
* @nameZH 控制组件项在激活状态下的背景颜色
|
||||
* @nameEN Background color of control component item when active
|
||||
* @desc 控制组件项在激活状态下的背景颜色。
|
||||
* @descEN Control the background color of control component item when active.
|
||||
*/
|
||||
public string ControlItemBgActive { get; set; } // Note. It also is a color
|
||||
|
||||
/**
|
||||
* @nameZH 控制组件项在鼠标悬浮且激活状态下的背景颜色
|
||||
* @nameEN Background color of control component item when hovering and active
|
||||
* @desc 控制组件项在鼠标悬浮且激活状态下的背景颜色。
|
||||
* @descEN Control the background color of control component item when hovering and active.
|
||||
*/
|
||||
public string ControlItemBgActiveHover { get; set; } // Note. It also is a color
|
||||
|
||||
/**
|
||||
* @nameZH 控制组件的交互大小
|
||||
* @nameEN Interactive size of control component
|
||||
* @desc 控制组件的交互大小。
|
||||
* @descEN Control the interactive size of control component.
|
||||
*/
|
||||
public int ControlInteractiveSize { get; set; }
|
||||
|
||||
/**
|
||||
* @nameZH 控制组件项在禁用状态下的激活背景颜色
|
||||
* @nameEN Background color of control component item when active and disabled
|
||||
* @desc 控制组件项在禁用状态下的激活背景颜色。
|
||||
* @descEN Control the background color of control component item when active and disabled.
|
||||
*/
|
||||
public string ControlItemBgActiveDisabled { get; set; } // Note. It also is a color
|
||||
|
||||
// Line
|
||||
/**
|
||||
* @nameZH 线条宽度(聚焦态)
|
||||
* @nameEN Line width(focus state)
|
||||
* @desc 控制线条的宽度，当组件处于聚焦态时。
|
||||
* @descEN Control the width of the line when the component is in focus state.
|
||||
*/
|
||||
public int LineWidthFocus { get; set; }
|
||||
|
||||
// Padding
|
||||
/**
|
||||
* @nameZH 极小内间距
|
||||
* @nameEN Extra extra small padding
|
||||
* @desc 控制元素的极小内间距。
|
||||
* @descEN Control the extra extra small padding of the element.
|
||||
*/
|
||||
public int PaddingXXS { get; set; }
|
||||
/**
|
||||
* @nameZH 特小内间距
|
||||
* @nameEN Extra small padding
|
||||
* @desc 控制元素的特小内间距。
|
||||
* @descEN Control the extra small padding of the element.
|
||||
*/
|
||||
public int PaddingXS { get; set; }
|
||||
/**
|
||||
* @nameZH 小内间距
|
||||
* @nameEN Small padding
|
||||
* @desc 控制元素的小内间距。
|
||||
* @descEN Control the small padding of the element.
|
||||
*/
|
||||
public int PaddingSM { get; set; }
|
||||
/**
|
||||
* @nameZH 内间距
|
||||
* @nameEN Padding
|
||||
* @desc 控制元素的内间距。
|
||||
* @descEN Control the padding of the element.
|
||||
*/
|
||||
public int Padding { get; set; }
|
||||
/**
|
||||
* @nameZH 中等内间距
|
||||
* @nameEN Medium padding
|
||||
* @desc 控制元素的中等内间距。
|
||||
* @descEN Control the medium padding of the element.
|
||||
*/
|
||||
public int PaddingMD { get; set; }
|
||||
/**
|
||||
* @nameZH 大内间距
|
||||
* @nameEN Large padding
|
||||
* @desc 控制元素的大内间距。
|
||||
* @descEN Control the large padding of the element.
|
||||
*/
|
||||
public int PaddingLG { get; set; }
|
||||
/**
|
||||
* @nameZH 特大内间距
|
||||
* @nameEN Extra large padding
|
||||
* @desc 控制元素的特大内间距。
|
||||
* @descEN Control the extra large padding of the element.
|
||||
*/
|
||||
public int PaddingXL { get; set; }
|
||||
|
||||
// Padding Content
|
||||
/**
|
||||
* @nameZH 内容水平内间距（LG）
|
||||
* @nameEN Content horizontal padding (LG)
|
||||
* @desc 控制内容元素水平内间距，适用于大屏幕设备。
|
||||
* @descEN Control the horizontal padding of content element, suitable for large screen devices.
|
||||
*/
|
||||
public int PaddingContentHorizontalLG { get; set; }
|
||||
/**
|
||||
* @nameZH 内容水平内间距
|
||||
* @nameEN Content horizontal padding
|
||||
* @desc 控制内容元素水平内间距。
|
||||
* @descEN Control the horizontal padding of content element.
|
||||
*/
|
||||
public int PaddingContentHorizontal { get; set; }
|
||||
/**
|
||||
* @nameZH 内容水平内间距（SM）
|
||||
* @nameEN Content horizontal padding (SM)
|
||||
* @desc 控制内容元素水平内间距，适用于小屏幕设备。
|
||||
* @descEN Control the horizontal padding of content element, suitable for small screen devices.
|
||||
*/
|
||||
public int PaddingContentHorizontalSM { get; set; }
|
||||
/**
|
||||
* @nameZH 内容垂直内间距（LG）
|
||||
* @nameEN Content vertical padding (LG)
|
||||
* @desc 控制内容元素垂直内间距，适用于大屏幕设备。
|
||||
* @descEN Control the vertical padding of content element, suitable for large screen devices.
|
||||
*/
|
||||
public int PaddingContentVerticalLG { get; set; }
|
||||
/**
|
||||
* @nameZH 内容垂直内间距
|
||||
* @nameEN Content vertical padding
|
||||
* @desc 控制内容元素垂直内间距。
|
||||
* @descEN Control the vertical padding of content element.
|
||||
*/
|
||||
public int PaddingContentVertical { get; set; }
|
||||
/**
|
||||
* @nameZH 内容垂直内间距（SM）
|
||||
* @nameEN Content vertical padding (SM)
|
||||
* @desc 控制内容元素垂直内间距，适用于小屏幕设备。
|
||||
* @descEN Control the vertical padding of content element, suitable for small screen devices.
|
||||
*/
|
||||
public int PaddingContentVerticalSM { get; set; }
|
||||
|
||||
// Margin
|
||||
/**
|
||||
* @nameZH 外边距 XXS
|
||||
* @nameEN Margin XXS
|
||||
* @desc 控制元素外边距，最小尺寸。
|
||||
* @descEN Control the margin of an element, with the smallest size.
|
||||
*/
|
||||
public int MarginXXS { get; set; }
|
||||
/**
|
||||
* @nameZH 外边距 XS
|
||||
* @nameEN Margin XS
|
||||
* @desc 控制元素外边距，小尺寸。
|
||||
* @descEN Control the margin of an element, with a small size.
|
||||
*/
|
||||
public int MarginXS { get; set; }
|
||||
/**
|
||||
* @nameZH 外边距 SM
|
||||
* @nameEN Margin SM
|
||||
* @desc 控制元素外边距，中小尺寸。
|
||||
* @descEN Control the margin of an element, with a medium-small size.
|
||||
*/
|
||||
public int MarginSM { get; set; }
|
||||
/**
|
||||
* @nameZH 外边距
|
||||
* @nameEN Margin
|
||||
* @desc 控制元素外边距，中等尺寸。
|
||||
* @descEN Control the margin of an element, with a medium size.
|
||||
*/
|
||||
public int Margin { get; set; }
|
||||
/**
|
||||
* @nameZH 外边距 MD
|
||||
* @nameEN Margin MD
|
||||
* @desc 控制元素外边距，中大尺寸。
|
||||
* @descEN Control the margin of an element, with a medium-large size.
|
||||
*/
|
||||
public int MarginMD { get; set; }
|
||||
/**
|
||||
* @nameZH 外边距 LG
|
||||
* @nameEN Margin LG
|
||||
* @desc 控制元素外边距，大尺寸。
|
||||
* @descEN Control the margin of an element, with a large size.
|
||||
*/
|
||||
public int MarginLG { get; set; }
|
||||
/**
|
||||
* @nameZH 外边距 XL
|
||||
* @nameEN Margin XL
|
||||
* @desc 控制元素外边距，超大尺寸。
|
||||
* @descEN Control the margin of an element, with an extra-large size.
|
||||
*/
|
||||
public int MarginXL { get; set; }
|
||||
/**
|
||||
* @nameZH 外边距 XXL
|
||||
* @nameEN Margin XXL
|
||||
* @desc 控制元素外边距，最大尺寸。
|
||||
* @descEN Control the margin of an element, with the largest size.
|
||||
*/
|
||||
public int MarginXXL { get; set; }
|
||||
|
||||
// =============== Legacy: should be remove ===============
|
||||
/**
|
||||
* @nameZH 加载状态透明度
|
||||
* @nameEN Loading opacity
|
||||
* @desc 控制加载状态的透明度。
|
||||
* @descEN Control the opacity of the loading state.
|
||||
*/
|
||||
public int OpacityLoading { get; set; }
|
||||
|
||||
/**
|
||||
* @nameZH 一级阴影
|
||||
* @nameEN Box shadow
|
||||
* @desc 控制元素阴影样式。
|
||||
* @descEN Control the box shadow style of an element.
|
||||
*/
|
||||
public string BoxShadow { get; set; }
|
||||
/**
|
||||
* @nameZH 二级阴影
|
||||
* @nameEN Secondary box shadow
|
||||
* @desc 控制元素二级阴影样式。
|
||||
* @descEN Control the secondary box shadow style of an element.
|
||||
*/
|
||||
public string BoxShadowSecondary { get; set; }
|
||||
/**
|
||||
* @nameZH 三级阴影
|
||||
* @nameEN Tertiary box shadow
|
||||
* @desc 控制元素三级盒子阴影样式。
|
||||
* @descEN Control the tertiary box shadow style of an element.
|
||||
*/
|
||||
public string BoxShadowTertiary { get; set; }
|
||||
|
||||
/**
|
||||
* @nameZH 链接文本装饰
|
||||
* @nameEN Link text decoration
|
||||
* @desc 控制链接文本的装饰样式。
|
||||
* @descEN Control the text decoration style of a link.
|
||||
*/
|
||||
public string LinkDecoration { get; set; }
|
||||
/**
|
||||
* @nameZH 链接鼠标悬浮时文本装饰
|
||||
* @nameEN Link text decoration on mouse hover
|
||||
* @desc 控制链接鼠标悬浮时文本的装饰样式。
|
||||
* @descEN Control the text decoration style of a link on mouse hover.
|
||||
*/
|
||||
public string LinkHoverDecoration { get; set; }
|
||||
/**
|
||||
* @nameZH 链接聚焦时文本装饰
|
||||
* @nameEN Link text decoration on focus
|
||||
* @desc 控制链接聚焦时文本的装饰样式。
|
||||
* @descEN Control the text decoration style of a link on focus.
|
||||
*/
|
||||
public string LinkFocusDecoration { get; set; }
|
||||
|
||||
/**
|
||||
* @nameZH 控制水平内间距
|
||||
* @nameEN Control horizontal padding
|
||||
* @desc 控制元素水平内间距。
|
||||
* @descEN Control the horizontal padding of an element.
|
||||
*/
|
||||
public int ControlPaddingHorizontal { get; set; }
|
||||
/**
|
||||
* @nameZH 控制中小尺寸水平内间距
|
||||
* @nameEN Control horizontal padding with a small-medium size
|
||||
* @desc 控制元素中小尺寸水平内间距。
|
||||
* @descEN Control the horizontal padding of an element with a small-medium size.
|
||||
*/
|
||||
public int ControlPaddingHorizontalSM { get; set; }
|
||||
|
||||
// Media queries breakpoints
|
||||
/**
|
||||
* @nameZH 屏幕宽度（像素） - 超小屏幕
|
||||
* @nameEN Screen width (pixels) - Extra small screens
|
||||
* @desc 控制超小屏幕的屏幕宽度。
|
||||
* @descEN Control the screen width of extra small screens.
|
||||
*/
|
||||
public int ScreenXS { get; set; }
|
||||
/**
|
||||
* @nameZH 屏幕宽度（像素） - 超小屏幕最小值
|
||||
* @nameEN Screen width (pixels) - Extra small screens minimum value
|
||||
* @desc 控制超小屏幕的最小宽度。
|
||||
* @descEN Control the minimum width of extra small screens.
|
||||
*/
|
||||
public int ScreenXSMin { get; set; }
|
||||
/**
|
||||
* @nameZH 屏幕宽度（像素） - 超小屏幕最大值
|
||||
* @nameEN Screen width (pixels) - Extra small screens maximum value
|
||||
* @desc 控制超小屏幕的最大宽度。
|
||||
* @descEN Control the maximum width of extra small screens.
|
||||
*/
|
||||
public int ScreenXSMax { get; set; }
|
||||
/**
|
||||
* @nameZH 屏幕宽度（像素） - 小屏幕
|
||||
* @nameEN Screen width (pixels) - Small screens
|
||||
* @desc 控制小屏幕的屏幕宽度。
|
||||
* @descEN Control the screen width of small screens.
|
||||
*/
|
||||
public int ScreenSM { get; set; }
|
||||
/**
|
||||
* @nameZH 屏幕宽度（像素） - 小屏幕最小值
|
||||
* @nameEN Screen width (pixels) - Small screens minimum value
|
||||
* @desc 控制小屏幕的最小宽度。
|
||||
* @descEN Control the minimum width of small screens.
|
||||
*/
|
||||
public int ScreenSMMin { get; set; }
|
||||
/**
|
||||
* @nameZH 屏幕宽度（像素） - 小屏幕最大值
|
||||
* @nameEN Screen width (pixels) - Small screens maximum value
|
||||
* @desc 控制小屏幕的最大宽度。
|
||||
* @descEN Control the maximum width of small screens.
|
||||
*/
|
||||
public int ScreenSMMax { get; set; }
|
||||
/**
|
||||
* @nameZH 屏幕宽度（像素） - 中等屏幕
|
||||
* @nameEN Screen width (pixels) - Medium screens
|
||||
* @desc 控制中等屏幕的屏幕宽度。
|
||||
* @descEN Control the screen width of medium screens.
|
||||
*/
|
||||
public int ScreenMD { get; set; }
|
||||
/**
|
||||
* @nameZH 屏幕宽度（像素） - 中等屏幕最小值
|
||||
* @nameEN Screen width (pixels) - Medium screens minimum value
|
||||
* @desc 控制中等屏幕的最小宽度。
|
||||
* @descEN Control the minimum width of medium screens.
|
||||
*/
|
||||
public int ScreenMDMin { get; set; }
|
||||
/**
|
||||
* @nameZH 屏幕宽度（像素） - 中等屏幕最大值
|
||||
* @nameEN Screen width (pixels) - Medium screens maximum value
|
||||
* @desc 控制中等屏幕的最大宽度。
|
||||
* @descEN Control the maximum width of medium screens.
|
||||
*/
|
||||
public int ScreenMDMax { get; set; }
|
||||
/**
|
||||
* @nameZH 屏幕宽度（像素） - 大屏幕
|
||||
* @nameEN Screen width (pixels) - Large screens
|
||||
* @desc 控制大屏幕的屏幕宽度。
|
||||
* @descEN Control the screen width of large screens.
|
||||
*/
|
||||
public int ScreenLG { get; set; }
|
||||
/**
|
||||
* @nameZH 屏幕宽度（像素） - 大屏幕最小值
|
||||
* @nameEN Screen width (pixels) - Large screens minimum value
|
||||
* @desc 控制大屏幕的最小宽度。
|
||||
* @descEN Control the minimum width of large screens.
|
||||
*/
|
||||
public int ScreenLGMin { get; set; }
|
||||
/**
|
||||
* @nameZH 屏幕宽度（像素） - 大屏幕最大值
|
||||
* @nameEN Screen width (pixels) - Large screens maximum value
|
||||
* @desc 控制大屏幕的最大宽度。
|
||||
* @descEN Control the maximum width of large screens.
|
||||
*/
|
||||
public int ScreenLGMax { get; set; }
|
||||
/**
|
||||
* @nameZH 屏幕宽度（像素） - 超大屏幕
|
||||
* @nameEN Screen width (pixels) - Extra large screens
|
||||
* @desc 控制超大屏幕的屏幕宽度。
|
||||
* @descEN Control the screen width of extra large screens.
|
||||
*/
|
||||
public int ScreenXL { get; set; }
|
||||
/**
|
||||
* @nameZH 屏幕宽度（像素） - 超大屏幕最小值
|
||||
* @nameEN Screen width (pixels) - Extra large screens minimum value
|
||||
* @desc 控制超大屏幕的最小宽度。
|
||||
* @descEN Control the minimum width of extra large screens.
|
||||
*/
|
||||
public int ScreenXLMin { get; set; }
|
||||
/**
|
||||
* @nameZH 屏幕宽度（像素） - 超大屏幕最大值
|
||||
* @nameEN Screen width (pixels) - Extra large screens maximum value
|
||||
* @desc 控制超大屏幕的最大宽度。
|
||||
* @descEN Control the maximum width of extra large screens.
|
||||
*/
|
||||
public int ScreenXLMax { get; set; }
|
||||
/**
|
||||
* @nameZH 屏幕宽度（像素） - 超超大屏幕
|
||||
* @nameEN Screen width (pixels) - Extra extra large screens
|
||||
* @desc 控制超超大屏幕的屏幕宽度。
|
||||
* @descEN Control the screen width of extra extra large screens.
|
||||
*/
|
||||
public int ScreenXXL { get; set; }
|
||||
/**
|
||||
* @nameZH 屏幕宽度（像素） - 超超大屏幕最小值
|
||||
* @nameEN Screen width (pixels) - Extra extra large screens minimum value
|
||||
* @desc 控制超超大屏幕的最小宽度。
|
||||
* @descEN Control the minimum width of extra extra large screens.
|
||||
*/
|
||||
public int ScreenXXLMin { get; set; }
|
||||
|
||||
/**
|
||||
* Used for DefaultButton, Switch which has default outline
|
||||
* @desc 默认样式的 Outline 颜色
|
||||
* @descEN Default style outline color.
|
||||
*/
|
||||
public string ControlTmpOutline { get; set; }
|
||||
|
||||
// public component box-shadow FIXME { get; set; } should be removed
|
||||
/** @internal */
|
||||
public string BoxShadowPopoverArrow { get; set; }
|
||||
/** @internal */
|
||||
public string BoxShadowCard { get; set; }
|
||||
/** @internal */
|
||||
public string BoxShadowDrawerRight { get; set; }
|
||||
/** @internal */
|
||||
public string BoxShadowDrawerLeft { get; set; }
|
||||
/** @internal */
|
||||
public string BoxShadowDrawerUp { get; set; }
|
||||
/** @internal */
|
||||
public string BoxShadowDrawerDown { get; set; }
|
||||
/** @internal */
|
||||
public string BoxShadowTabsOverflowLeft { get; set; }
|
||||
/** @internal */
|
||||
public string BoxShadowTabsOverflowRight { get; set; }
|
||||
/** @internal */
|
||||
public string BoxShadowTabsOverflowTop { get; set; }
|
||||
/** @internal */
|
||||
public string BoxShadowTabsOverflowBottom { get; set; }
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,568 @@
|
|||
namespace AntDesign
|
||||
{
|
||||
public partial class GlobalToken
|
||||
{
|
||||
/**
|
||||
* @internal
|
||||
*/
|
||||
public string ColorTextBase { get; set; }
|
||||
|
||||
/**
|
||||
* @internal
|
||||
*/
|
||||
public string ColorBgBase { get; set; }
|
||||
|
||||
// ---------- Text ---------- //
|
||||
|
||||
/**
|
||||
* @nameZH 一级文本色
|
||||
* @desc 最深的文本色。为了符合W3C标准，默认的文本颜色使用了该色，同时这个颜色也是最深的中性色。
|
||||
* @descEN Default text color which comply with W3C standards, and this color is also the darkest neutral color.
|
||||
*/
|
||||
public string ColorText { get; set; }
|
||||
|
||||
/**
|
||||
* @nameZH 二级文本色
|
||||
* @desc 作为第二梯度的文本色，一般用在不那么需要强化文本颜色的场景，例如 Label 文本、Menu 的文本选中态等场景。
|
||||
* @descEN The second level of text color is generally used in scenarios where text color is not emphasized, such as label text, menu text selection state, etc.
|
||||
*/
|
||||
public string ColorTextSecondary { get; set; }
|
||||
|
||||
/**
|
||||
* @nameZH 三级文本色
|
||||
* @desc 第三级文本色一般用于描述性文本，例如表单的中的补充说明文本、列表的描述性文本等场景。
|
||||
* @descEN The third level of text color is generally used for descriptive text, such as form supplementary explanation text, list descriptive text, etc.
|
||||
*/
|
||||
public string ColorTextTertiary { get; set; }
|
||||
|
||||
/**
|
||||
* @nameZH 四级文本色
|
||||
* @desc 第四级文本色是最浅的文本色，例如表单的输入提示文本、禁用色文本等。
|
||||
* @descEN The fourth level of text color is the lightest text color, such as form input prompt text, disabled color text, etc.
|
||||
*/
|
||||
public string ColorTextQuaternary { get; set; }
|
||||
|
||||
// ---------- Border ---------- //
|
||||
|
||||
/**
|
||||
* @nameZH 一级边框色
|
||||
* @nameEN Default Border Color
|
||||
* @desc 默认使用的边框颜色, 用于分割不同的元素，例如：表单的分割线、卡片的分割线等。
|
||||
* @descEN Default border color, used to separate different elements, such public form separator, card separator As { get; set; } etc.
|
||||
*/
|
||||
public string ColorBorder { get; set; }
|
||||
|
||||
/**
|
||||
* @nameZH 二级边框色
|
||||
* @nameEN Secondary Border Color
|
||||
* @desc 比默认使用的边框色要浅一级，此颜色和 colorSplit 的颜色一致。使用的是实色。
|
||||
* @descEN Slightly lighter than the default border color, this color is the same as `colorSplit`. Solid color is used.
|
||||
*/
|
||||
public string ColorBorderSecondary { get; set; }
|
||||
|
||||
// ---------- Fill ---------- //
|
||||
|
||||
/**
|
||||
* @nameZH 一级填充色
|
||||
* @desc 最深的填充色，用于拉开与二、三级填充色的区分度，目前只用在 Slider 的 hover 效果。
|
||||
* @descEN The darkest fill color is used to distinguish between the second and third level of fill color, and is currently only used in the hover effect of Slider.
|
||||
*/
|
||||
public string ColorFill { get; set; }
|
||||
|
||||
/**
|
||||
* @nameZH 二级填充色
|
||||
* @desc 二级填充色可以较为明显地勾勒出元素形体，如 Rate、Skeleton 等。也可以作为三级填充色的 Hover 状态，如 Table 等。
|
||||
* @descEN The second level of fill color can outline the shape of the element more clearly, such as Rate, Skeleton, etc. It can also be used as the Hover state of the third level of fill color, such as Table, etc.
|
||||
*/
|
||||
public string ColorFillSecondary { get; set; }
|
||||
|
||||
/**
|
||||
* @nameZH 三级填充色
|
||||
* @desc 三级填充色用于勾勒出元素形体的场景，如 Slider、Segmented 等。如无强调需求的情况下，建议使用三级填色作为默认填色。
|
||||
* @descEN The third level of fill color is used to outline the shape of the element, such as Slider, Segmented, etc. If there is no emphasis requirement, it is recommended to use the third level of fill color as the default fill color.
|
||||
*/
|
||||
public string ColorFillTertiary { get; set; }
|
||||
|
||||
/**
|
||||
* @nameZH 四级填充色
|
||||
* @desc 最弱一级的填充色，适用于不易引起注意的色块，例如斑马纹、区分边界的色块等。
|
||||
* @descEN The weakest level of fill color is suitable for color blocks that are not easy to attract attention, such as zebra stripes, color blocks that distinguish boundaries, etc.
|
||||
*/
|
||||
public string ColorFillQuaternary { get; set; }
|
||||
|
||||
// ---------- Surface ---------- //
|
||||
|
||||
/**
|
||||
* @nameZH 布局背景色
|
||||
* @desc 该色用于页面整体布局的背景色，只有需要在页面中处于 B1 的视觉层级时才会使用该 token，其他用法都是错误的
|
||||
* @descEN This color is used for the background color of the overall layout of the page. This token will only be used when it is necessary to be at the B1 visual level in the page. Other usages are wrong.
|
||||
*/
|
||||
public string ColorBgLayout { get; set; }
|
||||
|
||||
/**
|
||||
* @nameZH 组件容器背景色
|
||||
* @desc 组件的容器背景色，例如：默认按钮、输入框等。务必不要将其与 `colorBgElevated` 混淆。
|
||||
* @descEN Container background color, e.public default button, input box G { get; set; } etc. Be sure not to confuse this with `colorBgElevated`.
|
||||
*/
|
||||
public string ColorBgContainer { get; set; }
|
||||
|
||||
/**
|
||||
* @nameZH 浮层容器背景色
|
||||
* @desc 浮层容器背景色，在暗色模式下该 token 的色值会比 `colorBgContainer` 要亮一些。例如：模态框、弹出框、菜单等。
|
||||
* @descEN Container background color of the popup layer, in dark mode the color value of this token will be a little brighter than `colorBgContainer`. E.public modal, pop-up, menu G { get; set; } etc.
|
||||
*/
|
||||
public string ColorBgElevated { get; set; }
|
||||
|
||||
/**
|
||||
* @nameZH 引起注意的背景色
|
||||
* @desc 该色用于引起用户强烈关注注意的背景色，目前只用在 Tooltip 的背景色上。
|
||||
* @descEN This color is used to draw the user's strong attention to the background color, and is currently only used in the background color of Tooltip.
|
||||
*/
|
||||
public string ColorBgSpotlight { get; set; }
|
||||
}
|
||||
|
||||
/**
|
||||
* 品牌色梯度变量
|
||||
*/
|
||||
public partial class GlobalToken
|
||||
{
|
||||
/**
|
||||
* @nameZH 品牌主色
|
||||
* @nameEN Primary color of the brand
|
||||
* @desc 品牌色是体现产品特性和传播理念最直观的视觉元素之一，用于产品的主色调、主按钮、主图标、主文本等
|
||||
* @descEN The brand color is one of the most intuitive visual elements that reflects product characteristics and communication concepts, and is used for the main color tone, main buttons, main icons, main text, etc. of the product.
|
||||
*/
|
||||
public string ColorPrimary { get; set; } // 6
|
||||
|
||||
/**
|
||||
* @nameZH 主色浅色背景色
|
||||
* @nameEN Light background color of primary color
|
||||
* @desc 主色浅色背景颜色，一般用于视觉层级较弱的选中状态。
|
||||
* @descEN Light background color of primary color, usually used for weak visual level selection state.
|
||||
*/
|
||||
public string ColorPrimaryBg { get; set; } // 1
|
||||
|
||||
/**
|
||||
* @nameZH 主色浅色背景悬浮态
|
||||
* @nameEN Hover state of light background color of primary color
|
||||
* @desc 与主色浅色背景颜色相对应的悬浮态颜色。
|
||||
* @descEN The hover state color corresponding to the light background color of the primary color.
|
||||
*/
|
||||
public string ColorPrimaryBgHover { get; set; } // 2
|
||||
|
||||
/**
|
||||
* @nameZH 主色描边色
|
||||
* @nameEN Border color of primary color
|
||||
* @desc 主色梯度下的描边用色，用在 Slider 等组件的描边上。
|
||||
* @descEN The stroke color under the main color gradient, used on the stroke of components such as Slider.
|
||||
*/
|
||||
public string ColorPrimaryBorder { get; set; } // 3
|
||||
|
||||
/**
|
||||
* @nameZH 主色描边色悬浮态
|
||||
* @nameEN Hover state of border color of primary color
|
||||
* @desc 主色梯度下的描边用色的悬浮态，Slider 、Button 等组件的描边 Hover 时会使用。
|
||||
* @descEN The hover state of the stroke color under the main color gradient, which will be used when the stroke Hover of components such as Slider and Button.
|
||||
*/
|
||||
public string ColorPrimaryBorderHover { get; set; } // 4
|
||||
|
||||
/**
|
||||
* @nameZH 主色悬浮态
|
||||
* @nameEN Hover state of primary color
|
||||
* @desc 主色梯度下的悬浮态。
|
||||
* @descEN Hover state under the main color gradient.
|
||||
*/
|
||||
public string ColorPrimaryHover { get; set; } // 5
|
||||
|
||||
/**
|
||||
* @nameZH 主色激活态
|
||||
* @nameEN Active state of primary color
|
||||
* @desc 主色梯度下的深色激活态。
|
||||
* @descEN Dark active state under the main color gradient.
|
||||
*/
|
||||
public string ColorPrimaryActive { get; set; } // 7
|
||||
|
||||
/**
|
||||
* @nameZH 主色文本悬浮态
|
||||
* @nameEN Hover state of text color of primary color
|
||||
* @desc 主色梯度下的文本悬浮态。
|
||||
* @descEN Hover state of text color under the main color gradient.
|
||||
*/
|
||||
public string ColorPrimaryTextHover { get; set; } // 8
|
||||
|
||||
/**
|
||||
* @nameZH 主色文本
|
||||
* @nameEN Text color of primary color
|
||||
* @desc 主色梯度下的文本颜色。
|
||||
* @descEN Text color under the main color gradient.
|
||||
*/
|
||||
public string ColorPrimaryText { get; set; } // 9
|
||||
|
||||
/**
|
||||
* @nameZH 主色文本激活态
|
||||
* @nameEN Active state of text color of primary color
|
||||
* @desc 主色梯度下的文本激活态。
|
||||
* @descEN Active state of text color under the main color gradient.
|
||||
*/
|
||||
public string ColorPrimaryTextActive { get; set; } // 10
|
||||
}
|
||||
|
||||
public partial class GlobalToken
|
||||
{
|
||||
/**
|
||||
* @nameZH 成功色的浅色背景颜色
|
||||
* @nameEN Light Background Color of Success Color
|
||||
* @desc 成功色的浅色背景颜色，用于 Tag 和 Alert 的成功态背景色
|
||||
* @descEN Light background color of success color, used for Tag and Alert success state background color
|
||||
*/
|
||||
public string ColorSuccessBg { get; set; } // 1
|
||||
|
||||
/**
|
||||
* @nameZH 成功色的浅色背景色悬浮态
|
||||
* @nameEN Hover State Color of Light Success Background
|
||||
* @desc 成功色浅色背景颜色，一般用于视觉层级较弱的选中状态，不过 antd 目前没有使用到该 token
|
||||
* @descEN Light background color of success color, but antd does not use this token currently
|
||||
*/
|
||||
public string ColorSuccessBgHover { get; set; } // 2
|
||||
|
||||
/**
|
||||
* @nameZH 成功色的描边色
|
||||
* @nameEN Border Color of Success Color
|
||||
* @desc 成功色的描边色，用于 Tag 和 Alert 的成功态描边色
|
||||
* @descEN Border color of success color, used for Tag and Alert success state border color
|
||||
*/
|
||||
public string ColorSuccessBorder { get; set; } // 3
|
||||
|
||||
/**
|
||||
* @nameZH 成功色的描边色悬浮态
|
||||
* @nameEN Hover State Color of Success Border
|
||||
* @desc 成功色的描边色悬浮态
|
||||
* @descEN Hover state color of success color border
|
||||
*/
|
||||
public string ColorSuccessBorderHover { get; set; } // 4
|
||||
|
||||
/**
|
||||
* @nameZH 成功色的深色悬浮态
|
||||
* @nameEN Hover State Color of Dark Success
|
||||
* @desc 成功色的深色悬浮态
|
||||
* @descEN Hover state color of dark success color
|
||||
*/
|
||||
public string ColorSuccessHover { get; set; } // 5
|
||||
|
||||
/**
|
||||
* @nameZH 成功色
|
||||
* @nameEN Success Color
|
||||
* @desc 默认的成功色，如 Result、Progress 等组件中都有使用该颜色
|
||||
* @descEN Default success color, used in components such as Result and Progress
|
||||
*/
|
||||
public string ColorSuccess { get; set; } // 6
|
||||
|
||||
/**
|
||||
* @nameZH 成功色的深色激活态
|
||||
* @nameEN Active State Color of Dark Success
|
||||
* @desc 成功色的深色激活态
|
||||
* @descEN Active state color of dark success color
|
||||
*/
|
||||
public string ColorSuccessActive { get; set; } // 7
|
||||
|
||||
/**
|
||||
* @nameZH 成功色的文本悬浮态
|
||||
* @nameEN Hover State Color of Success Text
|
||||
* @desc 成功色的文本悬浮态
|
||||
* @descEN Hover state color of success color text
|
||||
*/
|
||||
public string ColorSuccessTextHover { get; set; } // 8
|
||||
|
||||
/**
|
||||
* @nameZH 成功色的文本默认态
|
||||
* @nameEN Default State Color of Success Text
|
||||
* @desc 成功色的文本默认态
|
||||
* @descEN Default state color of success color text
|
||||
*/
|
||||
public string ColorSuccessText { get; set; } // 9
|
||||
|
||||
/**
|
||||
* @nameZH 成功色的文本激活态
|
||||
* @nameEN Active State Color of Success Text
|
||||
* @desc 成功色的文本激活态
|
||||
* @descEN Active state color of success color text
|
||||
*/
|
||||
public string ColorSuccessTextActive { get; set; } // 10
|
||||
}
|
||||
|
||||
public partial class GlobalToken
|
||||
{
|
||||
/**
|
||||
* @nameZH 警戒色的浅色背景颜色
|
||||
* @nameEN Warning background color
|
||||
* @desc 警戒色的浅色背景颜色
|
||||
* @descEN The background color of the warning state.
|
||||
*/
|
||||
public string ColorWarningBg { get; set; } // 1
|
||||
|
||||
/**
|
||||
* @nameZH 警戒色的浅色背景色悬浮态
|
||||
* @nameEN Warning background color hover state
|
||||
* @desc 警戒色的浅色背景色悬浮态
|
||||
* @descEN The hover state background color of the warning state.
|
||||
*/
|
||||
public string ColorWarningBgHover { get; set; } // 2
|
||||
|
||||
/**
|
||||
* @nameZH 警戒色的描边色
|
||||
* @nameEN Warning border color
|
||||
* @desc 警戒色的描边色
|
||||
* @descEN The border color of the warning state.
|
||||
*/
|
||||
public string ColorWarningBorder { get; set; } // 3
|
||||
|
||||
/**
|
||||
* @nameZH 警戒色的描边色悬浮态
|
||||
* @nameEN Warning border color hover state
|
||||
* @desc 警戒色的描边色悬浮态
|
||||
* @descEN The hover state border color of the warning state.
|
||||
*/
|
||||
public string ColorWarningBorderHover { get; set; } // 4
|
||||
|
||||
/**
|
||||
* @nameZH 警戒色的深色悬浮态
|
||||
* @nameEN Warning hover color
|
||||
* @desc 警戒色的深色悬浮态
|
||||
* @descEN The hover state of the warning color.
|
||||
*/
|
||||
public string ColorWarningHover { get; set; } // 5
|
||||
|
||||
/**
|
||||
* @nameZH 警戒色
|
||||
* @nameEN Warning color
|
||||
* @desc 最常用的警戒色，例如 Notification、 Alert等警告类组件或 Input 输入类等组件会使用该颜色
|
||||
* @descEN The most commonly used warning color, used for warning components such as Notification, Alert, or input components.
|
||||
*/
|
||||
public string ColorWarning { get; set; } // 6
|
||||
|
||||
/**
|
||||
* @nameZH 警戒色的深色激活态
|
||||
* @nameEN Warning active color
|
||||
* @desc 警戒色的深色激活态
|
||||
* @descEN The active state of the warning color.
|
||||
*/
|
||||
public string ColorWarningActive { get; set; } // 7
|
||||
|
||||
/**
|
||||
* @nameZH 警戒色的文本悬浮态
|
||||
* @nameEN Warning text hover state
|
||||
* @desc 警戒色的文本悬浮态
|
||||
* @descEN The hover state of the text in the warning color.
|
||||
*/
|
||||
public string ColorWarningTextHover { get; set; } // 8
|
||||
|
||||
/**
|
||||
* @nameZH 警戒色的文本默认态
|
||||
* @nameEN Warning text default state
|
||||
* @desc 警戒色的文本默认态
|
||||
* @descEN The default state of the text in the warning color.
|
||||
*/
|
||||
public string ColorWarningText { get; set; } // 9
|
||||
|
||||
/**
|
||||
* @nameZH 警戒色的文本激活态
|
||||
* @nameEN Warning text active state
|
||||
* @desc 警戒色的文本激活态
|
||||
* @descEN The active state of the text in the warning color.
|
||||
*/
|
||||
public string ColorWarningTextActive { get; set; } // 10
|
||||
}
|
||||
|
||||
public partial class GlobalToken
|
||||
{
|
||||
/**
|
||||
* @nameZH 信息色的浅色背景颜色
|
||||
* @nameEN Light background color of information color
|
||||
* @desc 信息色的浅色背景颜色。
|
||||
* @descEN Light background color of information color.
|
||||
*/
|
||||
public string ColorInfoBg { get; set; } // 1
|
||||
|
||||
/**
|
||||
* @nameZH 信息色的浅色背景色悬浮态
|
||||
* @nameEN Hover state of light background color of information color
|
||||
* @desc 信息色的浅色背景色悬浮态。
|
||||
* @descEN Hover state of light background color of information color.
|
||||
*/
|
||||
public string ColorInfoBgHover { get; set; } // 2
|
||||
|
||||
/**
|
||||
* @nameZH 信息色的描边色
|
||||
* @nameEN Border color of information color
|
||||
* @desc 信息色的描边色。
|
||||
* @descEN Border color of information color.
|
||||
*/
|
||||
public string ColorInfoBorder { get; set; } // 3
|
||||
|
||||
/**
|
||||
* @nameZH 信息色的描边色悬浮态
|
||||
* @nameEN Hover state of border color of information color
|
||||
* @desc 信息色的描边色悬浮态。
|
||||
* @descEN Hover state of border color of information color.
|
||||
*/
|
||||
public string ColorInfoBorderHover { get; set; } // 4
|
||||
|
||||
/**
|
||||
* @nameZH 信息色的深色悬浮态
|
||||
* @nameEN Hover state of dark color of information color
|
||||
* @desc 信息色的深色悬浮态。
|
||||
* @descEN Hover state of dark color of information color.
|
||||
*/
|
||||
public string ColorInfoHover { get; set; } // 5
|
||||
|
||||
/**
|
||||
* @nameZH 信息色
|
||||
* @nameEN Information color
|
||||
* @desc 信息色。
|
||||
* @descEN Information color.
|
||||
*/
|
||||
public string ColorInfo { get; set; } // 6
|
||||
|
||||
/**
|
||||
* @nameZH 信息色的深色激活态
|
||||
* @nameEN Active state of dark color of information color
|
||||
* @desc 信息色的深色激活态。
|
||||
* @descEN Active state of dark color of information color.
|
||||
*/
|
||||
public string ColorInfoActive { get; set; } // 7
|
||||
|
||||
/**
|
||||
* @nameZH 信息色的文本悬浮态
|
||||
* @nameEN Hover state of text color of information color
|
||||
* @desc 信息色的文本悬浮态。
|
||||
* @descEN Hover state of text color of information color.
|
||||
*/
|
||||
public string ColorInfoTextHover { get; set; } // 8
|
||||
|
||||
/**
|
||||
* @nameZH 信息色的文本默认态
|
||||
* @nameEN Default state of text color of information color
|
||||
* @desc 信息色的文本默认态。
|
||||
* @descEN Default state of text color of information color.
|
||||
*/
|
||||
public string ColorInfoText { get; set; } // 9
|
||||
|
||||
/**
|
||||
* @nameZH 信息色的文本激活态
|
||||
* @nameEN Active state of text color of information color
|
||||
* @desc 信息色的文本激活态。
|
||||
* @descEN Active state of text color of information color.
|
||||
*/
|
||||
public string ColorInfoTextActive { get; set; } // 10
|
||||
}
|
||||
|
||||
public partial class GlobalToken
|
||||
{
|
||||
/**
|
||||
* @nameZH 错误色的浅色背景颜色
|
||||
* @nameEN Error background color
|
||||
* @desc 错误色的浅色背景颜色
|
||||
* @descEN The background color of the error state.
|
||||
*/
|
||||
public string ColorErrorBg { get; set; } // 1
|
||||
|
||||
/**
|
||||
* @nameZH 错误色的浅色背景色悬浮态
|
||||
* @nameEN Error background color hover state
|
||||
* @desc 错误色的浅色背景色悬浮态
|
||||
* @descEN The hover state background color of the error state.
|
||||
*/
|
||||
public string ColorErrorBgHover { get; set; } // 2
|
||||
|
||||
/**
|
||||
* @nameZH 错误色的描边色
|
||||
* @nameEN Error border color
|
||||
* @desc 错误色的描边色
|
||||
* @descEN The border color of the error state.
|
||||
*/
|
||||
public string ColorErrorBorder { get; set; } // 3
|
||||
|
||||
/**
|
||||
* @nameZH 错误色的描边色悬浮态
|
||||
* @nameEN Error border color hover state
|
||||
* @desc 错误色的描边色悬浮态
|
||||
* @descEN The hover state border color of the error state.
|
||||
*/
|
||||
public string ColorErrorBorderHover { get; set; } // 4
|
||||
|
||||
/**
|
||||
* @nameZH 错误色的深色悬浮态
|
||||
* @nameEN Error hover color
|
||||
* @desc 错误色的深色悬浮态
|
||||
* @descEN The hover state of the error color.
|
||||
*/
|
||||
public string ColorErrorHover { get; set; } // 5
|
||||
|
||||
/**
|
||||
* @nameZH 错误色
|
||||
* @nameEN Error color
|
||||
* @desc 错误色
|
||||
* @descEN The color of the error state.
|
||||
*/
|
||||
public string ColorError { get; set; } // 6
|
||||
|
||||
/**
|
||||
* @nameZH 错误色的深色激活态
|
||||
* @nameEN Error active color
|
||||
* @desc 错误色的深色激活态
|
||||
* @descEN The active state of the error color.
|
||||
*/
|
||||
public string ColorErrorActive { get; set; } // 7
|
||||
|
||||
/**
|
||||
* @nameZH 错误色的文本悬浮态
|
||||
* @nameEN Error text hover state
|
||||
* @desc 错误色的文本悬浮态
|
||||
* @descEN The hover state of the text in the error color.
|
||||
*/
|
||||
public string ColorErrorTextHover { get; set; } // 8
|
||||
|
||||
/**
|
||||
* @nameZH 错误色的文本默认态
|
||||
* @nameEN Error text default state
|
||||
* @desc 错误色的文本默认态
|
||||
* @descEN The default state of the text in the error color.
|
||||
*/
|
||||
public string ColorErrorText { get; set; } // 9
|
||||
|
||||
/**
|
||||
* @nameZH 错误色的文本激活态
|
||||
* @nameEN Error text active state
|
||||
* @desc 错误色的文本激活态
|
||||
* @descEN The active state of the text in the error color.
|
||||
*/
|
||||
public string ColorErrorTextActive { get; set; } // 10
|
||||
}
|
||||
|
||||
public partial class GlobalToken
|
||||
{
|
||||
/**
|
||||
* @nameZH 纯白色
|
||||
* @desc 不随主题变化的纯白色
|
||||
* @descEN Pure white color don't changed by theme
|
||||
* @default #FFFFFF
|
||||
*/
|
||||
public string ColorWhite { get; set; }
|
||||
|
||||
/**
|
||||
* @nameZH 浮层的背景蒙层颜色
|
||||
* @nameEN Background color of the mask
|
||||
* @desc 浮层的背景蒙层颜色，用于遮罩浮层下面的内容，Modal、Drawer 等组件的蒙层使用的是该 token
|
||||
* @descEN The background color of the mask, used to cover the content below the mask, Modal, Drawer and other components use this token
|
||||
*/
|
||||
public string ColorBgMask { get; set; }
|
||||
|
||||
/**
|
||||
* @nameZH 纯黑色
|
||||
* @desc 不随主题变化的纯黑色
|
||||
* @default #0000
|
||||
*/
|
||||
// public string ColorBlack { get; set; }
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
namespace AntDesign
|
||||
{
|
||||
public partial class GlobalToken
|
||||
{
|
||||
// Motion
|
||||
/**
|
||||
* @desc 动效播放速度，快速。用于小型元素动画交互
|
||||
* @descEN Motion speed, fast speed. Used for small element animation interaction.
|
||||
*/
|
||||
public string MotionDurationFast { get; set; }
|
||||
/**
|
||||
* @desc 动效播放速度，中速。用于中型元素动画交互
|
||||
* @descEN Motion speed, medium speed. Used for medium element animation interaction.
|
||||
*/
|
||||
public string MotionDurationMid { get; set; }
|
||||
/**
|
||||
* @desc 动效播放速度，慢速。用于大型元素如面板动画交互
|
||||
* @descEN Motion speed, slow speed. Used for large element animation interaction.
|
||||
*/
|
||||
public string MotionDurationSlow { get; set; }
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,127 @@
|
|||
namespace AntDesign
|
||||
{
|
||||
public partial class GlobalToken
|
||||
{
|
||||
// Font Size
|
||||
/**
|
||||
* @desc 小号字体大小
|
||||
* @descEN Small font size
|
||||
*/
|
||||
public int FontSizeSM { get; set; }
|
||||
/**
|
||||
* @desc 标准字体大小
|
||||
* @descEN Standard font size
|
||||
*/
|
||||
public int FontSize { get; set; }
|
||||
/**
|
||||
* @desc 大号字体大小
|
||||
* @descEN Large font size
|
||||
*/
|
||||
public int FontSizeLG { get; set; }
|
||||
/**
|
||||
* @desc 超大号字体大小
|
||||
* @descEN Super large font size
|
||||
*/
|
||||
public int FontSizeXL { get; set; }
|
||||
|
||||
/**
|
||||
* @nameZH 一级标题字号
|
||||
* @nameEN Font size of heading level 1
|
||||
* @desc H1 标签所使用的字号
|
||||
* @descEN Font size of h1 tag.
|
||||
* @default 38
|
||||
*/
|
||||
public int FontSizeHeading1 { get; set; }
|
||||
/**
|
||||
* @nameZH 二级标题字号
|
||||
* @nameEN Font size of heading level 2
|
||||
* @desc h2 标签所使用的字号
|
||||
* @descEN Font size of h2 tag.
|
||||
* @default 30
|
||||
*/
|
||||
public int FontSizeHeading2 { get; set; }
|
||||
/**
|
||||
* @nameZH 三级标题字号
|
||||
* @nameEN Font size of heading level 3
|
||||
* @desc h3 标签使用的字号
|
||||
* @descEN Font size of h3 tag.
|
||||
* @default 24
|
||||
*/
|
||||
public int FontSizeHeading3 { get; set; }
|
||||
/**
|
||||
* @nameZH 四级标题字号
|
||||
* @nameEN Font size of heading level 4
|
||||
* @desc h4 标签使用的字号
|
||||
* @descEN Font size of h4 tag.
|
||||
* @default 20
|
||||
*/
|
||||
public int FontSizeHeading4 { get; set; }
|
||||
/**
|
||||
* @nameZH 五级标题字号
|
||||
* @nameEN Font size of heading level 5
|
||||
* @desc h5 标签使用的字号
|
||||
* @descEN Font size of h5 tag.
|
||||
* @default 16
|
||||
*/
|
||||
public int FontSizeHeading5 { get; set; }
|
||||
|
||||
// LineHeight
|
||||
/**
|
||||
* @desc 文本行高
|
||||
* @descEN Line height of text.
|
||||
*/
|
||||
public int LineHeight { get; set; }
|
||||
/**
|
||||
* @desc 大型文本行高
|
||||
* @descEN Line height of large text.
|
||||
*/
|
||||
public int LineHeightLG { get; set; }
|
||||
/**
|
||||
* @desc 小型文本行高
|
||||
* @descEN Line height of small text.
|
||||
*/
|
||||
public int LineHeightSM { get; set; }
|
||||
|
||||
/**
|
||||
* @nameZH 一级标题行高
|
||||
* @nameEN Line height of heading level 1
|
||||
* @desc H1 标签所使用的行高
|
||||
* @descEN Line height of h1 tag.
|
||||
* @default 1.4
|
||||
*/
|
||||
public int LineHeightHeading1 { get; set; }
|
||||
/**
|
||||
* @nameZH 二级标题行高
|
||||
* @nameEN Line height of heading level 2
|
||||
* @desc h2 标签所使用的行高
|
||||
* @descEN Line height of h2 tag.
|
||||
* @default 1.35
|
||||
*/
|
||||
public int LineHeightHeading2 { get; set; }
|
||||
/**
|
||||
* @nameZH 三级标题行高
|
||||
* @nameEN Line height of heading level 3
|
||||
* @desc h3 标签所使用的行高
|
||||
* @descEN Line height of h3 tag.
|
||||
* @default 1.3
|
||||
*/
|
||||
public int LineHeightHeading3 { get; set; }
|
||||
/**
|
||||
* @nameZH 四级标题行高
|
||||
* @nameEN Line height of heading level 4
|
||||
* @desc h4 标签所使用的行高
|
||||
* @descEN Line height of h4 tag.
|
||||
* @default 1.25
|
||||
*/
|
||||
public int LineHeightHeading4 { get; set; }
|
||||
/**
|
||||
* @nameZH 五级标题行高
|
||||
* @nameEN Line height of heading level 5
|
||||
* @desc h5 标签所使用的行高
|
||||
* @descEN Line height of h5 tag.
|
||||
* @default 1.2
|
||||
*/
|
||||
public int LineHeightHeading5 { get; set; }
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,275 @@
|
|||
namespace AntDesign
|
||||
{
|
||||
// ======================================================================
|
||||
// == Seed Token ==
|
||||
// ======================================================================
|
||||
// 🔥🔥🔥🔥🔥🔥🔥 DO NOT MODIFY THIS. PLEASE CONTACT DESIGNER. 🔥🔥🔥🔥🔥🔥🔥
|
||||
|
||||
public partial class GlobalToken
|
||||
{
|
||||
// ---------- Color ---------- //
|
||||
|
||||
/**
|
||||
* @nameZH 品牌主色
|
||||
* @nameEN Brand Color
|
||||
* @desc 品牌色是体现产品特性和传播理念最直观的视觉元素之一。在你完成品牌主色的选取之后，我们会自动帮你生成一套完整的色板，并赋予它们有效的设计语义
|
||||
* @descEN Brand color is one of the most direct visual elements to reflect the characteristics and communication of the product. After you have selected the brand color, we will automatically generate a complete color palette and assign it effective design semantics.
|
||||
*/
|
||||
// public string ColorPrimary { get; set; }
|
||||
|
||||
/**
|
||||
* @nameZH 成功色
|
||||
* @nameEN Success Color
|
||||
* @desc 用于表示操作成功的 Token 序列，如 Result、Progress 等组件会使用该组梯度变量。
|
||||
* @descEN Used to represent the token sequence of operation success, such as Result, Progress and other components will use these map tokens.
|
||||
*/
|
||||
// public string ColorSuccess { get; set; }
|
||||
|
||||
/**
|
||||
* @nameZH 警戒色
|
||||
* @nameEN Warning Color
|
||||
* @desc 用于表示操作警告的 Token 序列，如 Notification、 Alert等警告类组件或 Input 输入类等组件会使用该组梯度变量。
|
||||
* @descEN Used to represent the warning map token, such as Notification, Alert, etc. Alert or Control component(like Input) will use these map tokens.
|
||||
*/
|
||||
// public string ColorWarning { get; set; }
|
||||
|
||||
/**
|
||||
* @nameZH 错误色
|
||||
* @nameEN Error Color
|
||||
* @desc 用于表示操作失败的 Token 序列，如失败按钮、错误状态提示（Result）组件等。
|
||||
* @descEN Used to represent the visual elements of the operation failure, such as the error Button, error Result component, etc.
|
||||
*/
|
||||
// public string ColorError { get; set; }
|
||||
|
||||
/**
|
||||
* @nameZH 信息色
|
||||
* @nameEN Info Color
|
||||
* @desc 用于表示操作信息的 Token 序列，如 Alert 、Tag、 Progress 等组件都有用到该组梯度变量。
|
||||
* @descEN Used to represent the operation information of the Token sequence, such as Alert, Tag, Progress, and other components use these map tokens.
|
||||
*/
|
||||
// public string ColorInfo { get; set; }
|
||||
|
||||
/**
|
||||
* @nameZH 基础文本色
|
||||
* @nameEN Seed Text Color
|
||||
* @desc 用于派生文本色梯度的基础变量，v5 中我们添加了一层文本色的派生算法可以产出梯度明确的文本色的梯度变量。但请不要在代码中直接使用该 Seed Token ！
|
||||
* @descEN Used to derive the base variable of the text color gradient. In v5, we added a layer of text color derivation algorithm to produce gradient variables of text color gradient. But please do not use this Seed Token directly in the code!
|
||||
*/
|
||||
// public string ColorTextBase { get; set; }
|
||||
|
||||
/**
|
||||
* @nameZH 基础背景色
|
||||
* @nameEN Seed Background Color
|
||||
* @desc 用于派生背景色梯度的基础变量，v5 中我们添加了一层背景色的派生算法可以产出梯度明确的背景色的梯度变量。但请不要在代码中直接使用该 Seed Token ！
|
||||
* @descEN Used to derive the base variable of the background color gradient. In v5, we added a layer of background color derivation algorithm to produce map token of background color. But PLEASE DO NOT USE this Seed Token directly in the code!
|
||||
*/
|
||||
// public string ColorBgBase { get; set; }
|
||||
|
||||
// ---------- Font ---------- //
|
||||
|
||||
/**
|
||||
* @nameZH 字体
|
||||
* @nameEN Font family for default text
|
||||
* @desc Ant Design 的字体家族中优先使用系统默认的界面字体，同时提供了一套利于屏显的备用字体库，来维护在不同平台以及浏览器的显示下，字体始终保持良好的易读性和可读性，体现了友好、稳定和专业的特性。
|
||||
* @descEN The font family of Ant Design prioritizes the default interface font of the system, and provides a set of alternative font libraries that are suitable for screen display to maintain the readability and readability of the font under different platforms and browsers, reflecting the friendly, stable and professional characteristics.
|
||||
*/
|
||||
public string FontFamily { get; set; }
|
||||
|
||||
/**
|
||||
* @nameZH 代码字体
|
||||
* @nameEN Font family for code text
|
||||
* @desc 代码字体，用于 Typography 内的 code、pre 和 kbd 类型的元素
|
||||
* @descEN Code font, used for code, pre and kbd elements in Typography
|
||||
*/
|
||||
public string FontFamilyCode { get; set; }
|
||||
|
||||
/**
|
||||
* @nameZH 默认字号
|
||||
* @nameEN Default Font Size
|
||||
* @desc 设计系统中使用最广泛的字体大小，文本梯度也将基于该字号进行派生。
|
||||
* @descEN The most widely used font size in the design system, from which the text gradient will be derived.
|
||||
* @default 14
|
||||
*/
|
||||
// public int FontSize { get; set; }
|
||||
|
||||
// ---------- Line ---------- //
|
||||
|
||||
/**
|
||||
* @nameZH 基础线宽
|
||||
* @nameEN Base Line Width
|
||||
* @desc 用于控制组件边框、分割线等的宽度
|
||||
* @descEN Border width of base components
|
||||
*/
|
||||
public int LineWidth { get; set; }
|
||||
|
||||
/**
|
||||
* @nameZH 线条样式
|
||||
* @nameEN Line Style
|
||||
* @desc 用于控制组件边框、分割线等的样式，默认是实线
|
||||
* @descEN Border style of base components
|
||||
*/
|
||||
public string LineType { get; set; }
|
||||
|
||||
// ---------- BorderRadius ---------- //
|
||||
|
||||
/**
|
||||
* @nameZH 基础圆角
|
||||
* @nameEN Base Border Radius
|
||||
* @descEN Border radius of base components
|
||||
* @desc 基础组件的圆角大小，例如按钮、输入框、卡片等
|
||||
*/
|
||||
public int BorderRadius { get; set; }
|
||||
|
||||
// ---------- Size ---------- //
|
||||
|
||||
/**
|
||||
* @nameZH 尺寸变化单位
|
||||
* @nameEN Size Change Unit
|
||||
* @desc 用于控制组件尺寸的变化单位，在 Ant Design 中我们的基础单位为 4 ，便于更加细致地控制尺寸梯度
|
||||
* @descEN The unit of size change, in Ant Design, our base unit is 4, which is more fine-grained control of the size step
|
||||
* @default 4
|
||||
*/
|
||||
public int SizeUnit { get; set; }
|
||||
|
||||
/**
|
||||
* @nameZH 尺寸步长
|
||||
* @nameEN Size Base Step
|
||||
* @desc 用于控制组件尺寸的基础步长，尺寸步长结合尺寸变化单位，就可以派生各种尺寸梯度。通过调整步长即可得到不同的布局模式，例如 V5 紧凑模式下的尺寸步长为 2
|
||||
* @descEN The base step of size change, the size step combined with the size change unit, can derive various size steps. By adjusting the step, you can get different layout modes, such as the size step of the compact mode of V5 is 2
|
||||
* @default 4
|
||||
*/
|
||||
public int SizeStep { get; set; }
|
||||
|
||||
/**
|
||||
* @nameZH 组件箭头尺寸
|
||||
* @desc 组件箭头的尺寸
|
||||
* @descEN The size of the component arrow
|
||||
*/
|
||||
public int SizePopupArrow { get; set; }
|
||||
|
||||
/**
|
||||
* @nameZH 基础高度
|
||||
* @nameEN Base Control Height
|
||||
* @desc Ant Design 中按钮和输入框等基础控件的高度
|
||||
* @descEN The height of the basic controls such as buttons and input boxes in Ant Design
|
||||
* @default 32
|
||||
*/
|
||||
public int ControlHeight { get; set; }
|
||||
|
||||
// ---------- zIndex ---------- //
|
||||
|
||||
/**
|
||||
* @nameZH 基础 zIndex
|
||||
* @nameEN Base zIndex
|
||||
* @desc 所有组件的基础 Z 轴值，用于一些悬浮类的组件的可以基于该值 Z 轴控制层级，例如 BackTop、 Affix 等
|
||||
* @descEN The base Z axis value of all components, which can be used to control the level of some floating components based on the Z axis value, such as BackTop, Affix, etc.
|
||||
*
|
||||
* @default 0
|
||||
*/
|
||||
public int ZIndexBase { get; set; }
|
||||
|
||||
/**
|
||||
* @nameZH 浮层基础 zIndex
|
||||
* @nameEN popup base zIndex
|
||||
* @desc 浮层类组件的基础 Z 轴值，用于一些悬浮类的组件的可以基于该值 Z 轴控制层级，例如 FloatButton、 Affix、Modal 等
|
||||
* @descEN Base zIndex of component like FloatButton, Affix which can be cover by large popup
|
||||
* @default 1000
|
||||
*/
|
||||
public int ZIndexPopupBase { get; set; }
|
||||
|
||||
// ---------- Opacity ---------- //
|
||||
|
||||
/**
|
||||
* @nameZH 图片不透明度
|
||||
* @nameEN Define default Image opacity. Useful when in dark-like theme
|
||||
*/
|
||||
public int OpacityImage { get; set; }
|
||||
|
||||
// ---------- motion ---------- //
|
||||
// TODO: 缺一个懂 motion 的人来收敛 Motion 相关的 Token
|
||||
|
||||
/**
|
||||
* @nameZH 动画时长变化单位
|
||||
* @nameEN Animation Duration Unit
|
||||
* @desc 用于控制动画时长的变化单位
|
||||
* @descEN The unit of animation duration change
|
||||
* @default 100ms
|
||||
*/
|
||||
public int MotionUnit { get; set; }
|
||||
|
||||
/**
|
||||
* @nameZH 动画基础时长。
|
||||
* @nameEN Animation Base Duration.
|
||||
*/
|
||||
public int MotionBase { get; set; }
|
||||
|
||||
/**
|
||||
* @desc 预设动效曲率
|
||||
* @descEN Preset motion curve.
|
||||
*/
|
||||
public string MotionEaseOutCirc { get; set; }
|
||||
|
||||
/**
|
||||
* @desc 预设动效曲率
|
||||
* @descEN Preset motion curve.
|
||||
*/
|
||||
public string MotionEaseInOutCirc { get; set; }
|
||||
|
||||
/**
|
||||
* @desc 预设动效曲率
|
||||
* @descEN Preset motion curve.
|
||||
*/
|
||||
public string MotionEaseInOut { get; set; }
|
||||
|
||||
/**
|
||||
* @desc 预设动效曲率
|
||||
* @descEN Preset motion curve.
|
||||
*/
|
||||
public string MotionEaseOutBack { get; set; }
|
||||
|
||||
/**
|
||||
* @desc 预设动效曲率
|
||||
* @descEN Preset motion curve.
|
||||
*/
|
||||
public string MotionEaseInBack { get; set; }
|
||||
|
||||
/**
|
||||
* @desc 预设动效曲率
|
||||
* @descEN Preset motion curve.
|
||||
*/
|
||||
public string MotionEaseInQuint { get; set; }
|
||||
|
||||
/**
|
||||
* @desc 预设动效曲率
|
||||
* @descEN Preset motion curve.
|
||||
*/
|
||||
public string MotionEaseOutQuint { get; set; }
|
||||
|
||||
/**
|
||||
* @desc 预设动效曲率
|
||||
* @descEN Preset motion curve.
|
||||
*/
|
||||
public string MotionEaseOut { get; set; }
|
||||
|
||||
// ---------- Style ---------- //
|
||||
|
||||
/**
|
||||
* @nameZH 线框风格
|
||||
* @nameEN Wireframe Style
|
||||
* @desc 用于将组件的视觉效果变为线框化，如果需要使用 V4 的效果，需要开启配置项
|
||||
* @descEN Used to change the visual effect of the component to wireframe, if you need to use the V4 effect, you need to enable the configuration item
|
||||
* @default false
|
||||
*/
|
||||
public bool Wireframe { get; set; }
|
||||
|
||||
/**
|
||||
* @nameZH 动画风格
|
||||
* @nameEN Motion Style
|
||||
* @desc 用于配置动画效果，为 `false` 时则关闭动画
|
||||
* @descEN Used to configure the motion effect, when it is `false`, the motion is turned off
|
||||
* @default false
|
||||
*/
|
||||
public bool Motion { get; set; }
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,80 @@
|
|||
namespace AntDesign
|
||||
{
|
||||
public partial class GlobalToken
|
||||
{
|
||||
/**
|
||||
* @nameZH XXL
|
||||
* @default 48
|
||||
*/
|
||||
public int SizeXXL { get; set; }
|
||||
/**
|
||||
* @nameZH XL
|
||||
* @default 32
|
||||
*/
|
||||
public int SizeXL { get; set; }
|
||||
/**
|
||||
* @nameZH LG
|
||||
* @default 24
|
||||
*/
|
||||
public int SizeLG { get; set; }
|
||||
/**
|
||||
* @nameZH MD
|
||||
* @default 20
|
||||
*/
|
||||
public int SizeMD { get; set; }
|
||||
/** Same as size by default, but could be larger in compact mode */
|
||||
public int SizeMS { get; set; }
|
||||
/**
|
||||
* @nameZH 默认
|
||||
* @desc 默认尺寸
|
||||
* @default 16
|
||||
*/
|
||||
public int Size { get; set; }
|
||||
/**
|
||||
* @nameZH SM
|
||||
* @default 12
|
||||
*/
|
||||
public int SizeSM { get; set; }
|
||||
/**
|
||||
* @nameZH XS
|
||||
* @default 8
|
||||
*/
|
||||
public int SizeXS { get; set; }
|
||||
/**
|
||||
* @nameZH XXS
|
||||
* @default 4
|
||||
*/
|
||||
public int SizeXXS { get; set; }
|
||||
}
|
||||
|
||||
public partial class GlobalToken
|
||||
{
|
||||
// Control
|
||||
/** Only Used for control inside component like Multiple Select inner selection item */
|
||||
|
||||
/**
|
||||
* @nameZH 更小的组件高度
|
||||
* @nameEN XS component height
|
||||
* @desc 更小的组件高度
|
||||
* @descEN XS component height
|
||||
*/
|
||||
public int ControlHeightXS { get; set; }
|
||||
|
||||
/**
|
||||
* @nameZH 较小的组件高度
|
||||
* @nameEN SM component height
|
||||
* @desc 较小的组件高度
|
||||
* @descEN SM component height
|
||||
*/
|
||||
public int ControlHeightSM { get; set; }
|
||||
|
||||
/**
|
||||
* @nameZH 较高的组件高度
|
||||
* @nameEN LG component height
|
||||
* @desc 较高的组件高度
|
||||
* @descEN LG component height
|
||||
*/
|
||||
public int ControlHeightLG { get; set; }
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
namespace AntDesign
|
||||
{
|
||||
public partial class GlobalToken
|
||||
{
|
||||
/**
|
||||
* @nameZH 线宽
|
||||
* @nameEN Line Width
|
||||
* @desc 描边类组件的默认线宽，如 Button、Input、Select 等输入类控件。
|
||||
* @descEN The default line width of the outline class components, such as Button, Input, Select, etc.
|
||||
* @default 1
|
||||
*/
|
||||
public int LineWidthBold { get; set; }
|
||||
|
||||
/**
|
||||
* @nameZH XS号圆角
|
||||
* @nameEN XS Border Radius
|
||||
* @desc XS号圆角，用于组件中的一些小圆角，如 Segmented 、Arrow 等一些内部圆角的组件样式中。
|
||||
* @descEN XS size border radius, used in some small border radius components, such as Segmented, Arrow and other components with small border radius.
|
||||
* @default 2
|
||||
*/
|
||||
public int BorderRadiusXS { get; set; }
|
||||
/**
|
||||
* @nameZH SM号圆角
|
||||
* @nameEN SM Border Radius
|
||||
* @desc SM号圆角，用于组件小尺寸下的圆角，如 Button、Input、Select 等输入类控件在 small size 下的圆角
|
||||
* @descEN SM size border radius, used in small size components, such as Button, Input, Select and other input components in small size
|
||||
* @default 4
|
||||
*/
|
||||
public int BorderRadiusSM { get; set; }
|
||||
/**
|
||||
* @nameZH LG号圆角
|
||||
* @nameEN LG Border Radius
|
||||
* @desc LG号圆角，用于组件中的一些大圆角，如 Card、Modal 等一些组件样式。
|
||||
* @descEN LG size border radius, used in some large border radius components, such as Card, Modal and other components.
|
||||
* @default 8
|
||||
*/
|
||||
public int BorderRadiusLG { get; set; }
|
||||
/**
|
||||
* @nameZH 外部圆角
|
||||
* @nameEN Outer Border Radius
|
||||
* @default 4
|
||||
* @desc 外部圆角
|
||||
* @descEN Outer border radius
|
||||
*/
|
||||
public int BorderRadiusOuter { get; set; }
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
// Licensed to the .NET Foundation under one or more agreements.
|
||||
// The .NET Foundation licenses this file to you under the MIT license.
|
||||
// See the LICENSE file in the project root for more information.
|
||||
|
||||
using CssInCs;
|
||||
using System;
|
||||
|
||||
namespace AntDesign
|
||||
{
|
||||
public class CalcColor
|
||||
{
|
||||
public string LightColor { get; set; }
|
||||
public string LightBorderColor { get; set; }
|
||||
public string DarkColor { get; set; }
|
||||
public string TextColor { get; set; }
|
||||
}
|
||||
|
||||
internal class Theme
|
||||
{
|
||||
public static T MergeToken<T>(GlobalToken token, T value)
|
||||
{
|
||||
return default;
|
||||
}
|
||||
|
||||
public static CSSObject GenPresetColor(GlobalToken token, Func<PresetColor, CalcColor, CSSObject> func)
|
||||
{
|
||||
return new CSSObject();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
// Licensed to the .NET Foundation under one or more agreements.
|
||||
// The .NET Foundation licenses this file to you under the MIT license.
|
||||
// See the LICENSE file in the project root for more information.
|
||||
|
||||
namespace AntDesign
|
||||
{
|
||||
public class TokenWithCommonCls : GlobalToken
|
||||
{
|
||||
public string ComponentCls { get; set; }
|
||||
public string PrefixCls { get; set; }
|
||||
public string IconCls { get; set; }
|
||||
public string AntCls { get; set; }
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,259 @@
|
|||
using System;
|
||||
using CssInCs;
|
||||
using static AntDesign.GlobalStyle;
|
||||
using static AntDesign.Theme;
|
||||
|
||||
namespace AntDesign
|
||||
{
|
||||
public partial class TimelineToken
|
||||
{
|
||||
}
|
||||
|
||||
public partial class TimelineToken : TokenWithCommonCls
|
||||
{
|
||||
public int TimeLineItemPaddingBottom { get; set; }
|
||||
|
||||
public int TimeLineItemHeadSize { get; set; }
|
||||
|
||||
public int TimeLineItemCustomHeadPaddingVertical { get; set; }
|
||||
|
||||
public int TimeLineItemTailWidth { get; set; }
|
||||
|
||||
public int TimeLinePaddingInlineEnd { get; set; }
|
||||
|
||||
public int TimeLineHeadBorderWidth { get; set; }
|
||||
|
||||
}
|
||||
|
||||
public partial class Timeline
|
||||
{
|
||||
public Unknown_1 GenTimelineStyle(Unknown_3 token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
return new Unknown_4()
|
||||
{
|
||||
[componentCls] = new Unknown_5()
|
||||
{
|
||||
["..."] = ResetComponent(token),
|
||||
Margin = 0,
|
||||
Padding = 0,
|
||||
ListStyle = "none",
|
||||
[$"{componentCls}-item"] = new Unknown_6()
|
||||
{
|
||||
Position = "relative",
|
||||
Margin = 0,
|
||||
PaddingBottom = token.TimeLineItemPaddingBottom,
|
||||
FontSize = token.FontSize,
|
||||
ListStyle = "none",
|
||||
["&-tail"] = new Unknown_7()
|
||||
{
|
||||
Position = "absolute",
|
||||
InsetBlockStart = token.TimeLineItemHeadSize,
|
||||
InsetInlineStart = (token.TimeLineItemHeadSize - token.TimeLineItemTailWidth) / 2,
|
||||
Height = @$"calc(100% - {token.TimeLineItemHeadSize}px)",
|
||||
BorderInlineStart = @$"{token.TimeLineItemTailWidth}px {token.LineType} {token.ColorSplit}",
|
||||
},
|
||||
["&-pending"] = new Unknown_8()
|
||||
{
|
||||
[$"{componentCls}-item-head"] = new Unknown_9()
|
||||
{
|
||||
FontSize = token.FontSizeSM,
|
||||
BackgroundColor = "transparent",
|
||||
},
|
||||
[$"{componentCls}-item-tail"] = new Unknown_10()
|
||||
{
|
||||
Display = "none",
|
||||
},
|
||||
},
|
||||
["&-head"] = new Unknown_11()
|
||||
{
|
||||
Position = "absolute",
|
||||
Width = token.TimeLineItemHeadSize,
|
||||
Height = token.TimeLineItemHeadSize,
|
||||
BackgroundColor = token.ColorBgContainer,
|
||||
Border = @$"{token.TimeLineHeadBorderWidth}px {token.LineType} transparent",
|
||||
BorderRadius = "50%",
|
||||
["&-blue"] = new Unknown_12()
|
||||
{
|
||||
Color = token.ColorPrimary,
|
||||
BorderColor = token.ColorPrimary,
|
||||
},
|
||||
["&-red"] = new Unknown_13()
|
||||
{
|
||||
Color = token.ColorError,
|
||||
BorderColor = token.ColorError,
|
||||
},
|
||||
["&-green"] = new Unknown_14()
|
||||
{
|
||||
Color = token.ColorSuccess,
|
||||
BorderColor = token.ColorSuccess,
|
||||
},
|
||||
["&-gray"] = new Unknown_15()
|
||||
{
|
||||
Color = token.ColorTextDisabled,
|
||||
BorderColor = token.ColorTextDisabled,
|
||||
},
|
||||
},
|
||||
["&-head-custom"] = new Unknown_16()
|
||||
{
|
||||
Position = "absolute",
|
||||
InsetBlockStart = token.TimeLineItemHeadSize / 2,
|
||||
InsetInlineStart = token.TimeLineItemHeadSize / 2,
|
||||
Width = "auto",
|
||||
Height = "auto",
|
||||
MarginBlockStart = 0,
|
||||
PaddingBlock = token.TimeLineItemCustomHeadPaddingVertical,
|
||||
LineHeight = 1,
|
||||
TextAlign = "center",
|
||||
Border = 0,
|
||||
BorderRadius = 0,
|
||||
Transform = @$"translate(-50%, -50%)",
|
||||
},
|
||||
["&-content"] = new Unknown_17()
|
||||
{
|
||||
Position = "relative",
|
||||
InsetBlockStart = -(token.FontSize * token.LineHeight - token.FontSize) + token.LineWidth,
|
||||
MarginInlineStart = token.Margin + token.TimeLineItemHeadSize,
|
||||
MarginInlineEnd = 0,
|
||||
MarginBlockStart = 0,
|
||||
MarginBlockEnd = 0,
|
||||
WordBreak = "break-word",
|
||||
},
|
||||
["&-last"] = new Unknown_18()
|
||||
{
|
||||
[$"> {componentCls}-item-tail"] = new Unknown_19()
|
||||
{
|
||||
Display = "none",
|
||||
},
|
||||
[$"> {componentCls}-item-content"] = new Unknown_20()
|
||||
{
|
||||
MinHeight = token.ControlHeightLG * 1.2,
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"&{componentCls}-alternate,&{componentCls}-right,&{componentCls}-label"] = new Unknown_21()
|
||||
{
|
||||
[$"{componentCls}-item"] = new Unknown_22()
|
||||
{
|
||||
["&-tail, &-head, &-head-custom"] = new Unknown_23()
|
||||
{
|
||||
InsetInlineStart = "50%",
|
||||
},
|
||||
["&-head"] = new Unknown_24()
|
||||
{
|
||||
MarginInlineStart = @$"-{token.MarginXXS}px",
|
||||
["&-custom"] = new Unknown_25()
|
||||
{
|
||||
MarginInlineStart = token.TimeLineItemTailWidth / 2,
|
||||
},
|
||||
},
|
||||
["&-left"] = new Unknown_26()
|
||||
{
|
||||
[$"{componentCls}-item-content"] = new Unknown_27()
|
||||
{
|
||||
InsetInlineStart = @$"calc(50% - {token.MarginXXS}px)",
|
||||
Width = @$"calc(50% - {token.MarginSM}px)",
|
||||
TextAlign = "start",
|
||||
},
|
||||
},
|
||||
["&-right"] = new Unknown_28()
|
||||
{
|
||||
[$"{componentCls}-item-content"] = new Unknown_29()
|
||||
{
|
||||
Width = @$"calc(50% - {token.MarginSM}px)",
|
||||
Margin = 0,
|
||||
TextAlign = "end",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"&{componentCls}-right"] = new Unknown_30()
|
||||
{
|
||||
[$"{componentCls}-item-right"] = new Unknown_31()
|
||||
{
|
||||
[$"{componentCls}-item-tail,{componentCls}-item-head,{componentCls}-item-head-custom"] = new Unknown_32()
|
||||
{
|
||||
InsetInlineStart = @$"calc(100% - {
|
||||
(token.TimeLineItemHeadSize + token.TimeLineItemTailWidth) / 2
|
||||
}px)",
|
||||
},
|
||||
[$"{componentCls}-item-content"] = new Unknown_33()
|
||||
{
|
||||
Width = @$"calc(100% - {token.TimeLineItemHeadSize + token.MarginXS}px)",
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"&{componentCls}-pending{componentCls}-item-last{componentCls}-item-tail"] = new Unknown_34()
|
||||
{
|
||||
Display = "block",
|
||||
Height = @$"calc(100% - {token.Margin}px)",
|
||||
BorderInlineStart = @$"{token.TimeLineItemTailWidth}px dotted {token.ColorSplit}",
|
||||
},
|
||||
[$"&{componentCls}-reverse{componentCls}-item-last{componentCls}-item-tail"] = new Unknown_35()
|
||||
{
|
||||
Display = "none",
|
||||
},
|
||||
[$"&{componentCls}-reverse {componentCls}-item-pending"] = new Unknown_36()
|
||||
{
|
||||
[$"{componentCls}-item-tail"] = new Unknown_37()
|
||||
{
|
||||
InsetBlockStart = token.Margin,
|
||||
Display = "block",
|
||||
Height = @$"calc(100% - {token.Margin}px)",
|
||||
BorderInlineStart = @$"{token.TimeLineItemTailWidth}px dotted {token.ColorSplit}",
|
||||
},
|
||||
[$"{componentCls}-item-content"] = new Unknown_38()
|
||||
{
|
||||
MinHeight = token.ControlHeightLG * 1.2,
|
||||
},
|
||||
},
|
||||
[$"&{componentCls}-label"] = new Unknown_39()
|
||||
{
|
||||
[$"{componentCls}-item-label"] = new Unknown_40()
|
||||
{
|
||||
Position = "absolute",
|
||||
InsetBlockStart = -(token.FontSize * token.LineHeight - token.FontSize) + token.TimeLineItemTailWidth,
|
||||
Width = @$"calc(50% - {token.MarginSM}px)",
|
||||
TextAlign = "end",
|
||||
},
|
||||
[$"{componentCls}-item-right"] = new Unknown_41()
|
||||
{
|
||||
[$"{componentCls}-item-label"] = new Unknown_42()
|
||||
{
|
||||
InsetInlineStart = @$"calc(50% + {token.MarginSM}px)",
|
||||
Width = @$"calc(50% - {token.MarginSM}px)",
|
||||
TextAlign = "start",
|
||||
},
|
||||
},
|
||||
},
|
||||
["&-rtl"] = new Unknown_43()
|
||||
{
|
||||
Direction = "rtl",
|
||||
[$"{componentCls}-item-head-custom"] = new Unknown_44()
|
||||
{
|
||||
Transform = @$"translate(50%, -50%)",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_2 GenComponentStyleHook(Unknown_45 token)
|
||||
{
|
||||
var timeLineToken = MergeToken(
|
||||
token,
|
||||
new Unknown_46()
|
||||
{
|
||||
TimeLineItemPaddingBottom = token.Padding * 1.25,
|
||||
TimeLineItemHeadSize = 10,
|
||||
TimeLineItemCustomHeadPaddingVertical = token.PaddingXXS,
|
||||
TimeLinePaddingInlineEnd = 2,
|
||||
TimeLineItemTailWidth = token.LineWidthBold,
|
||||
TimeLineHeadBorderWidth = token.Wireframe ? token.LineWidthBold : token.LineWidth * 3,
|
||||
});
|
||||
return new Unknown_47 { GenTimelineStyle(timeLineToken) };
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,137 @@
|
|||
using System;
|
||||
using CssInCs;
|
||||
using static AntDesign.GlobalStyle;
|
||||
using static AntDesign.Theme;
|
||||
|
||||
namespace AntDesign
|
||||
{
|
||||
public partial class TooltipToken
|
||||
{
|
||||
public int ZIndexPopup { get; set; }
|
||||
|
||||
public string ColorBgDefault { get; set; }
|
||||
|
||||
}
|
||||
|
||||
public partial class TooltipToken : TokenWithCommonCls
|
||||
{
|
||||
public int TooltipMaxWidth { get; set; }
|
||||
|
||||
public string TooltipColor { get; set; }
|
||||
|
||||
public string TooltipBg { get; set; }
|
||||
|
||||
public int TooltipBorderRadius { get; set; }
|
||||
|
||||
public int TooltipRadiusOuter { get; set; }
|
||||
|
||||
}
|
||||
|
||||
public partial class Tooltip
|
||||
{
|
||||
public Unknown_2 GenTooltipStyle(Unknown_3 token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var tooltipMaxWidth = token.TooltipMaxWidth;
|
||||
var tooltipColor = token.TooltipColor;
|
||||
var tooltipBg = token.TooltipBg;
|
||||
var tooltipBorderRadius = token.TooltipBorderRadius;
|
||||
var zIndexPopup = token.ZIndexPopup;
|
||||
var controlHeight = token.ControlHeight;
|
||||
var boxShadowSecondary = token.BoxShadowSecondary;
|
||||
var paddingSM = token.PaddingSM;
|
||||
var paddingXS = token.PaddingXS;
|
||||
var tooltipRadiusOuter = token.TooltipRadiusOuter;
|
||||
return new Unknown_4
|
||||
{
|
||||
new Unknown_5()
|
||||
{
|
||||
[componentCls] = new Unknown_6()
|
||||
{
|
||||
["..."] = ResetComponent(token),
|
||||
Position = "absolute",
|
||||
ZIndex = zIndexPopup,
|
||||
Display = "block",
|
||||
Width = "max-content",
|
||||
MaxWidth = tooltipMaxWidth,
|
||||
Visibility = "visible",
|
||||
TransformOrigin = @$"var(--arrow-x, 50%) var(--arrow-y, 50%)",
|
||||
["&-hidden"] = new Unknown_7()
|
||||
{
|
||||
Display = "none",
|
||||
},
|
||||
["--antd-arrow-background-color"] = tooltipBg,
|
||||
[$"{componentCls}-inner"] = new Unknown_8()
|
||||
{
|
||||
MinWidth = controlHeight,
|
||||
MinHeight = controlHeight,
|
||||
Padding = @$"{paddingSM / 2}px {paddingXS}px",
|
||||
Color = tooltipColor,
|
||||
TextAlign = "start",
|
||||
TextDecoration = "none",
|
||||
WordWrap = "break-word",
|
||||
BackgroundColor = tooltipBg,
|
||||
BorderRadius = tooltipBorderRadius,
|
||||
BoxShadow = boxShadowSecondary,
|
||||
},
|
||||
[["&-placement-left","&-placement-leftTop","&-placement-leftBottom","&-placement-right","&-placement-rightTop","&-placement-rightBottom",].join(",")] = new Unknown_9()
|
||||
{
|
||||
[$"{componentCls}-inner"] = new Unknown_10()
|
||||
{
|
||||
BorderRadius = Math.Min(tooltipBorderRadius, MAX_VERTICAL_CONTENT_RADIUS)
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-content"] = new Unknown_11()
|
||||
{
|
||||
Position = "relative",
|
||||
},
|
||||
["..."] = GenPresetColor(
|
||||
token,
|
||||
(colorKey, args) => {
|
||||
var darkColor = args.DarkColor;
|
||||
return new Unknown_12()
|
||||
{
|
||||
[$"&{componentCls}-{colorKey}"] = new Unknown_13()
|
||||
{
|
||||
[$"{componentCls}-inner"] = new Unknown_14()
|
||||
{
|
||||
BackgroundColor = darkColor,
|
||||
},
|
||||
[$"{componentCls}-arrow"] = new Unknown_15()
|
||||
{
|
||||
["--antd-arrow-background-color"] = darkColor,
|
||||
},
|
||||
},
|
||||
};
|
||||
}),
|
||||
["&-rtl"] = new Unknown_16()
|
||||
{
|
||||
Direction = "rtl",
|
||||
},
|
||||
},
|
||||
},
|
||||
GetArrowStyle<TooltipToken>(
|
||||
mergeToken<TooltipToken>(token, {
|
||||
borderRadiusOuter: tooltipRadiusOuter,
|
||||
}),
|
||||
{
|
||||
colorBg: "var(--antd-arrow-background-color)",
|
||||
contentRadius: tooltipBorderRadius,
|
||||
limitVerticalRadius: true,
|
||||
},
|
||||
),
|
||||
new Unknown_17()
|
||||
{
|
||||
[$"{componentCls}-pure"] = new Unknown_18()
|
||||
{
|
||||
Position = "relative",
|
||||
MaxWidth = "none",
|
||||
Margin = token.SizePopupArrow,
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,397 @@
|
|||
using System;
|
||||
using CssInCs;
|
||||
using static AntDesign.GlobalStyle;
|
||||
using static AntDesign.Theme;
|
||||
|
||||
namespace AntDesign
|
||||
{
|
||||
public partial class TransferToken
|
||||
{
|
||||
public int ListWidth { get; set; }
|
||||
|
||||
public int ListWidthLG { get; set; }
|
||||
|
||||
public int ListHeight { get; set; }
|
||||
|
||||
}
|
||||
|
||||
public partial class TransferToken : TokenWithCommonCls
|
||||
{
|
||||
public int TransferItemHeight { get; set; }
|
||||
|
||||
public int TransferHeaderVerticalPadding { get; set; }
|
||||
|
||||
public int TransferItemPaddingVertical { get; set; }
|
||||
|
||||
public int TransferHeaderHeight { get; set; }
|
||||
|
||||
}
|
||||
|
||||
public partial class Transfer
|
||||
{
|
||||
public CSSObject GenTransferCustomizeStyle(TransferToken token)
|
||||
{
|
||||
var antCls = token.AntCls;
|
||||
var componentCls = token.ComponentCls;
|
||||
var listHeight = token.ListHeight;
|
||||
var controlHeightLG = token.ControlHeightLG;
|
||||
var marginXXS = token.MarginXXS;
|
||||
var margin = token.Margin;
|
||||
var tableCls = @$"{antCls}-table";
|
||||
var inputCls = @$"{antCls}-input";
|
||||
return new CSSObject()
|
||||
{
|
||||
[$"{componentCls}-customize-list"] = new CSSObject()
|
||||
{
|
||||
[$"{componentCls}-list"] = new CSSObject()
|
||||
{
|
||||
Flex = "1 1 50%",
|
||||
Width = "auto",
|
||||
Height = "auto",
|
||||
MinHeight = listHeight,
|
||||
},
|
||||
[$"{tableCls}-wrapper"] = new CSSObject()
|
||||
{
|
||||
[$"{tableCls}-small"] = new CSSObject()
|
||||
{
|
||||
Border = 0,
|
||||
BorderRadius = 0,
|
||||
[$"{tableCls}-selection-column"] = new CSSObject()
|
||||
{
|
||||
Width = controlHeightLG,
|
||||
MinWidth = controlHeightLG,
|
||||
},
|
||||
},
|
||||
[$"{tableCls}-pagination{tableCls}-pagination"] = new CSSObject()
|
||||
{
|
||||
Margin = @$"{margin}px 0 {marginXXS}px",
|
||||
},
|
||||
},
|
||||
[$"{inputCls}[disabled]"] = new CSSObject()
|
||||
{
|
||||
BackgroundColor = "transparent",
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenTransferStatusColor(TransferToken token, string color)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var colorBorder = token.ColorBorder;
|
||||
return new CSSObject()
|
||||
{
|
||||
[$"{componentCls}-list"] = new CSSObject()
|
||||
{
|
||||
BorderColor = color,
|
||||
["&-search:not([disabled])"] = new CSSObject()
|
||||
{
|
||||
BorderColor = colorBorder,
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenTransferStatusStyle(TransferToken token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
return new CSSObject()
|
||||
{
|
||||
[$"{componentCls}-status-error"] = new CSSObject()
|
||||
{
|
||||
["..."] = GenTransferStatusColor(token, token.ColorError)
|
||||
},
|
||||
[$"{componentCls}-status-warning"] = new CSSObject()
|
||||
{
|
||||
["..."] = GenTransferStatusColor(token, token.ColorWarning)
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenTransferListStyle(TransferToken token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var colorBorder = token.ColorBorder;
|
||||
var colorSplit = token.ColorSplit;
|
||||
var lineWidth = token.LineWidth;
|
||||
var transferItemHeight = token.TransferItemHeight;
|
||||
var transferHeaderHeight = token.TransferHeaderHeight;
|
||||
var transferHeaderVerticalPadding = token.TransferHeaderVerticalPadding;
|
||||
var transferItemPaddingVertical = token.TransferItemPaddingVertical;
|
||||
var controlItemBgActive = token.ControlItemBgActive;
|
||||
var controlItemBgActiveHover = token.ControlItemBgActiveHover;
|
||||
var colorTextDisabled = token.ColorTextDisabled;
|
||||
var listHeight = token.ListHeight;
|
||||
var listWidth = token.ListWidth;
|
||||
var listWidthLG = token.ListWidthLG;
|
||||
var fontSizeIcon = token.FontSizeIcon;
|
||||
var marginXS = token.MarginXS;
|
||||
var paddingSM = token.PaddingSM;
|
||||
var lineType = token.LineType;
|
||||
var iconCls = token.IconCls;
|
||||
var motionDurationSlow = token.MotionDurationSlow;
|
||||
return new CSSObject()
|
||||
{
|
||||
Display = "flex",
|
||||
FlexDirection = "column",
|
||||
Width = listWidth,
|
||||
Height = listHeight,
|
||||
Border = @$"{lineWidth}px {lineType} {colorBorder}",
|
||||
BorderRadius = token.BorderRadiusLG,
|
||||
["&-with-pagination"] = new CSSObject()
|
||||
{
|
||||
Width = listWidthLG,
|
||||
Height = "auto",
|
||||
},
|
||||
["&-search"] = new CSSObject()
|
||||
{
|
||||
[$"{iconCls}-search"] = new CSSObject()
|
||||
{
|
||||
Color = colorTextDisabled,
|
||||
},
|
||||
},
|
||||
["&-header"] = new CSSObject()
|
||||
{
|
||||
Display = "flex",
|
||||
Flex = "none",
|
||||
AlignItems = "center",
|
||||
Height = transferHeaderHeight,
|
||||
Padding = @$"{
|
||||
transferHeaderVerticalPadding - lineWidth
|
||||
}px {paddingSM}px {transferHeaderVerticalPadding}px",
|
||||
Color = token.ColorText,
|
||||
Background = token.ColorBgContainer,
|
||||
BorderBottom = @$"{lineWidth}px {lineType} {colorSplit}",
|
||||
BorderRadius = @$"{token.BorderRadiusLG}px {token.BorderRadiusLG}px 0 0",
|
||||
["> *:not(:last-child)"] = new CSSObject()
|
||||
{
|
||||
MarginInlineEnd = 4,
|
||||
},
|
||||
["> *"] = new CSSObject()
|
||||
{
|
||||
Flex = "none",
|
||||
},
|
||||
["&-title"] = new CSSObject()
|
||||
{
|
||||
["..."] = textEllipsis,
|
||||
Flex = "auto",
|
||||
TextAlign = "end",
|
||||
},
|
||||
["&-dropdown"] = new CSSObject()
|
||||
{
|
||||
["..."] = ResetIcon(),
|
||||
FontSize = fontSizeIcon,
|
||||
Transform = "translateY(10%)",
|
||||
Cursor = "pointer",
|
||||
["&[disabled]"] = new CSSObject()
|
||||
{
|
||||
Cursor = "not-allowed",
|
||||
},
|
||||
},
|
||||
},
|
||||
["&-body"] = new CSSObject()
|
||||
{
|
||||
Display = "flex",
|
||||
Flex = "auto",
|
||||
FlexDirection = "column",
|
||||
Overflow = "hidden",
|
||||
FontSize = token.FontSize,
|
||||
["&-search-wrapper"] = new CSSObject()
|
||||
{
|
||||
Position = "relative",
|
||||
Flex = "none",
|
||||
Padding = paddingSM,
|
||||
},
|
||||
},
|
||||
["&-content"] = new CSSObject()
|
||||
{
|
||||
Flex = "auto",
|
||||
Margin = 0,
|
||||
Padding = 0,
|
||||
Overflow = "auto",
|
||||
ListStyle = "none",
|
||||
["&-item"] = new CSSObject()
|
||||
{
|
||||
Display = "flex",
|
||||
AlignItems = "center",
|
||||
MinHeight = transferItemHeight,
|
||||
Padding = @$"{transferItemPaddingVertical}px {paddingSM}px",
|
||||
Transition = @$"all {motionDurationSlow}",
|
||||
["> *:not(:last-child)"] = new CSSObject()
|
||||
{
|
||||
MarginInlineEnd = marginXS,
|
||||
},
|
||||
["> *"] = new CSSObject()
|
||||
{
|
||||
Flex = "none",
|
||||
},
|
||||
["&-text"] = new CSSObject()
|
||||
{
|
||||
["..."] = textEllipsis,
|
||||
Flex = "auto",
|
||||
},
|
||||
["&-remove"] = new CSSObject()
|
||||
{
|
||||
Position = "relative",
|
||||
Color = colorBorder,
|
||||
Cursor = "pointer",
|
||||
Transition = @$"all {motionDurationSlow}",
|
||||
["&:hover"] = new CSSObject()
|
||||
{
|
||||
Color = token.ColorLinkHover,
|
||||
},
|
||||
["&::after"] = new CSSObject()
|
||||
{
|
||||
Position = "absolute",
|
||||
Insert = @$"-{transferItemPaddingVertical}px -50%",
|
||||
Content = "\"\"",
|
||||
},
|
||||
},
|
||||
[$"&:not({componentCls}-list-content-item-disabled)"] = new CSSObject()
|
||||
{
|
||||
["&:hover"] = new CSSObject()
|
||||
{
|
||||
BackgroundColor = token.ControlItemBgHover,
|
||||
Cursor = "pointer",
|
||||
},
|
||||
[$"&{componentCls}-list-content-item-checked:hover"] = new CSSObject()
|
||||
{
|
||||
BackgroundColor = controlItemBgActiveHover,
|
||||
},
|
||||
},
|
||||
["&-checked"] = new CSSObject()
|
||||
{
|
||||
BackgroundColor = controlItemBgActive,
|
||||
},
|
||||
["&-disabled"] = new CSSObject()
|
||||
{
|
||||
Color = colorTextDisabled,
|
||||
Cursor = "not-allowed",
|
||||
},
|
||||
},
|
||||
[$"&-show-remove {componentCls}-list-content-item:not({componentCls}-list-content-item-disabled):hover"] = new CSSObject()
|
||||
{
|
||||
Background = "transparent",
|
||||
Cursor = "default",
|
||||
},
|
||||
},
|
||||
["&-pagination"] = new CSSObject()
|
||||
{
|
||||
Padding = @$"{token.PaddingXS}px 0",
|
||||
TextAlign = "end",
|
||||
BorderTop = @$"{lineWidth}px {lineType} {colorSplit}",
|
||||
},
|
||||
["&-body-not-found"] = new CSSObject()
|
||||
{
|
||||
Flex = "none",
|
||||
Width = "100%",
|
||||
Margin = "auto 0",
|
||||
Color = colorTextDisabled,
|
||||
TextAlign = "center",
|
||||
},
|
||||
["&-footer"] = new CSSObject()
|
||||
{
|
||||
BorderTop = @$"{lineWidth}px {lineType} {colorSplit}",
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenTransferStyle(TransferToken token)
|
||||
{
|
||||
var antCls = token.AntCls;
|
||||
var iconCls = token.IconCls;
|
||||
var componentCls = token.ComponentCls;
|
||||
var transferHeaderHeight = token.TransferHeaderHeight;
|
||||
var marginXS = token.MarginXS;
|
||||
var marginXXS = token.MarginXXS;
|
||||
var fontSizeIcon = token.FontSizeIcon;
|
||||
var fontSize = token.FontSize;
|
||||
var lineHeight = token.LineHeight;
|
||||
return new CSSObject()
|
||||
{
|
||||
[componentCls] = new CSSObject()
|
||||
{
|
||||
["..."] = ResetComponent(token),
|
||||
Position = "relative",
|
||||
Display = "flex",
|
||||
AlignItems = "stretch",
|
||||
[$"{componentCls}-disabled"] = new CSSObject()
|
||||
{
|
||||
[$"{componentCls}-list"] = new CSSObject()
|
||||
{
|
||||
Background = token.ColorBgContainerDisabled,
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-list"] = GenTransferListStyle(token),
|
||||
[$"{componentCls}-operation"] = new CSSObject()
|
||||
{
|
||||
Display = "flex",
|
||||
Flex = "none",
|
||||
FlexDirection = "column",
|
||||
AlignSelf = "center",
|
||||
Margin = @$"0 {marginXS}px",
|
||||
VerticalAlign = "middle",
|
||||
[$"{antCls}-btn"] = new CSSObject()
|
||||
{
|
||||
Display = "block",
|
||||
["&:first-child"] = new CSSObject()
|
||||
{
|
||||
MarginBottom = marginXXS,
|
||||
},
|
||||
[iconCls] = new CSSObject()
|
||||
{
|
||||
FontSize = fontSizeIcon,
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"{antCls}-empty-image"] = new CSSObject()
|
||||
{
|
||||
MaxHeight = TransferHeaderHeight / 2 - Math.Round(fontSize * lineHeight),
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenTransferRTLStyle(TransferToken token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
return new CSSObject()
|
||||
{
|
||||
[$"{componentCls}-rtl"] = new CSSObject()
|
||||
{
|
||||
Direction = "rtl",
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_1 GenComponentStyleHook(Unknown_2 token)
|
||||
{
|
||||
var fontSize = token.FontSize;
|
||||
var lineHeight = token.LineHeight;
|
||||
var lineWidth = token.LineWidth;
|
||||
var controlHeightLG = token.ControlHeightLG;
|
||||
var controlHeight = token.ControlHeight;
|
||||
var fontHeight = Math.Round(fontSize * lineHeight);
|
||||
var transferHeaderHeight = controlHeightLG;
|
||||
var transferItemHeight = controlHeight;
|
||||
var transferToken = MergeToken(
|
||||
token,
|
||||
new Unknown_3()
|
||||
{
|
||||
TransferItemHeight = transferItemHeight,
|
||||
TransferHeaderHeight = transferHeaderHeight,
|
||||
TransferHeaderVerticalPadding = Math.Ceil((transferHeaderHeight - lineWidth - fontHeight) / 2),
|
||||
TransferItemPaddingVertical = (transferItemHeight - fontHeight) / 2,
|
||||
});
|
||||
return new Unknown_4
|
||||
{
|
||||
GenTransferStyle(transferToken),
|
||||
GenTransferCustomizeStyle(transferToken),
|
||||
GenTransferStatusStyle(transferToken),
|
||||
GenTransferRTLStyle(transferToken)
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
using System;
|
||||
using CssInCs;
|
||||
using static AntDesign.GlobalStyle;
|
||||
using static AntDesign.Theme;
|
||||
|
||||
namespace AntDesign
|
||||
{
|
||||
public partial class TreeSelectToken : TokenWithCommonCls
|
||||
{
|
||||
public string TreePrefixCls { get; set; }
|
||||
|
||||
}
|
||||
|
||||
public partial class TreeSelect
|
||||
{
|
||||
public Unknown_1 GenBaseStyle(Unknown_3 token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var treePrefixCls = token.TreePrefixCls;
|
||||
var colorBgElevated = token.ColorBgElevated;
|
||||
var treeCls = @$".{treePrefixCls}";
|
||||
return new Unknown_4 { [object Object] };
|
||||
}
|
||||
|
||||
public Unknown_2 UseTreeSelectStyle(string prefixCls, string treePrefixCls)
|
||||
{
|
||||
return GenComponentStyleHook('TreeSelect', (token) => {
|
||||
const treeSelectToken = mergeToken<TreeSelectToken>(token, { treePrefixCls });
|
||||
return [genBaseStyle(treeSelectToken)];
|
||||
})(prefixCls);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,502 @@
|
|||
using System;
|
||||
using CssInCs;
|
||||
using static AntDesign.GlobalStyle;
|
||||
using static AntDesign.Theme;
|
||||
|
||||
namespace AntDesign
|
||||
{
|
||||
public partial class Tree
|
||||
{
|
||||
private Keyframes treeNodeFX = new Keyframes("ant-tree-node-fx-do-not-use")
|
||||
{
|
||||
["0%"] = new Keyframes()
|
||||
{
|
||||
Opacity = 0,
|
||||
},
|
||||
["100%"] = new Keyframes()
|
||||
{
|
||||
Opacity = 1,
|
||||
},
|
||||
};
|
||||
|
||||
public CSSObject GetSwitchStyle(string prefixCls, DerivativeToken token)
|
||||
{
|
||||
return new CSSObject()
|
||||
{
|
||||
[$".{prefixCls}-switcher-icon"] = new CSSObject()
|
||||
{
|
||||
Display = "inline-block",
|
||||
FontSize = 10,
|
||||
VerticalAlign = "baseline",
|
||||
["svg"] = new CSSObject()
|
||||
{
|
||||
Transition = @$"transform {token.MotionDurationSlow}",
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_1 GetDropIndicatorStyle(string prefixCls, DerivativeToken token)
|
||||
{
|
||||
return new Unknown_3()
|
||||
{
|
||||
[$".{prefixCls}-drop-indicator"] = new Unknown_4()
|
||||
{
|
||||
Position = "absolute",
|
||||
ZIndex = 1,
|
||||
Height = 2,
|
||||
BackgroundColor = token.ColorPrimary,
|
||||
BorderRadius = 1,
|
||||
PointerEvents = "none",
|
||||
["&:after"] = new Unknown_5()
|
||||
{
|
||||
Position = "absolute",
|
||||
Top = -3,
|
||||
InsetInlineStart = -6,
|
||||
Width = 8,
|
||||
Height = 8,
|
||||
BackgroundColor = "transparent",
|
||||
Border = @$"{token.LineWidthBold}px solid {token.ColorPrimary}",
|
||||
BorderRadius = "50%",
|
||||
Content = "\"\"",
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenBaseStyle(string prefixCls, TreeToken token)
|
||||
{
|
||||
var treeCls = token.TreeCls;
|
||||
var treeNodeCls = token.TreeNodeCls;
|
||||
var checkboxSize = token.ControlInteractiveSize;
|
||||
var treeNodePadding = token.TreeNodePadding;
|
||||
var treeTitleHeight = token.TreeTitleHeight;
|
||||
var checkBoxOffset = (token.LineHeight * token.FontSize) / 2 - checkboxSize / 2;
|
||||
var treeCheckBoxMarginVertical = (treeTitleHeight - token.FontSizeLG) / 2 - checkBoxOffset;
|
||||
var treeCheckBoxMarginHorizontal = token.PaddingXS;
|
||||
return new CSSObject()
|
||||
{
|
||||
[treeCls] = new CSSObject()
|
||||
{
|
||||
["..."] = ResetComponent(token),
|
||||
Background = token.ColorBgContainer,
|
||||
BorderRadius = token.BorderRadius,
|
||||
Transition = @$"background-color {token.MotionDurationSlow}",
|
||||
[$"&{treeCls}-rtl"] = new CSSObject()
|
||||
{
|
||||
[$"{treeCls}-switcher"] = new CSSObject()
|
||||
{
|
||||
["&_close"] = new CSSObject()
|
||||
{
|
||||
[$"{treeCls}-switcher-icon"] = new CSSObject()
|
||||
{
|
||||
["svg"] = new CSSObject()
|
||||
{
|
||||
Transform = "rotate(90deg)",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"&-focused:not(:hover):not({treeCls}-active-focused)"] = new CSSObject()
|
||||
{
|
||||
["..."] = GenFocusOutline(token)
|
||||
},
|
||||
[$"{treeCls}-list-holder-inner"] = new CSSObject()
|
||||
{
|
||||
AlignItems = "flex-start",
|
||||
},
|
||||
[$"&{treeCls}-block-node"] = new CSSObject()
|
||||
{
|
||||
[$"{treeCls}-list-holder-inner"] = new CSSObject()
|
||||
{
|
||||
AlignItems = "stretch",
|
||||
[$"{treeCls}-node-content-wrapper"] = new CSSObject()
|
||||
{
|
||||
Flex = "auto",
|
||||
},
|
||||
[$"{treeNodeCls}.dragging"] = new CSSObject()
|
||||
{
|
||||
Position = "relative",
|
||||
["&:after"] = new CSSObject()
|
||||
{
|
||||
Position = "absolute",
|
||||
Top = 0,
|
||||
InsetInlineEnd = 0,
|
||||
Bottom = treeNodePadding,
|
||||
InsetInlineStart = 0,
|
||||
Border = @$"1px solid {token.ColorPrimary}",
|
||||
Opacity = 0,
|
||||
AnimationName = treeNodeFX,
|
||||
AnimationDuration = token.MotionDurationSlow,
|
||||
AnimationPlayState = "running",
|
||||
AnimationFillMode = "forwards",
|
||||
Content = "\"\"",
|
||||
PointerEvents = "none",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"{treeNodeCls}"] = new CSSObject()
|
||||
{
|
||||
Display = "flex",
|
||||
AlignItems = "flex-start",
|
||||
Padding = @$"0 0 {treeNodePadding}px 0",
|
||||
Outline = "none",
|
||||
["&-rtl"] = new CSSObject()
|
||||
{
|
||||
Direction = "rtl",
|
||||
},
|
||||
["&-disabled"] = new CSSObject()
|
||||
{
|
||||
[$"{treeCls}-node-content-wrapper"] = new CSSObject()
|
||||
{
|
||||
Color = token.ColorTextDisabled,
|
||||
Cursor = "not-allowed",
|
||||
["&:hover"] = new CSSObject()
|
||||
{
|
||||
Background = "transparent",
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"&-active {treeCls}-node-content-wrapper"] = new CSSObject()
|
||||
{
|
||||
["..."] = GenFocusOutline(token)
|
||||
},
|
||||
[$"&:not({treeNodeCls}-disabled).filter-node {treeCls}-title"] = new CSSObject()
|
||||
{
|
||||
Color = "inherit",
|
||||
FontWeight = 500,
|
||||
},
|
||||
["&-draggable"] = new CSSObject()
|
||||
{
|
||||
[$"{treeCls}-draggable-icon"] = new CSSObject()
|
||||
{
|
||||
FlexShrink = 0,
|
||||
Width = treeTitleHeight,
|
||||
LineHeight = @$"{treeTitleHeight}px",
|
||||
TextAlign = "center",
|
||||
Visibility = "visible",
|
||||
Opacity = 0.2f,
|
||||
Transition = @$"opacity {token.MotionDurationSlow}",
|
||||
[$"{treeNodeCls}:hover &"] = new CSSObject()
|
||||
{
|
||||
Opacity = 0.45f,
|
||||
},
|
||||
},
|
||||
[$"&{treeNodeCls}-disabled"] = new CSSObject()
|
||||
{
|
||||
[$"{treeCls}-draggable-icon"] = new CSSObject()
|
||||
{
|
||||
Visibility = "hidden",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"{treeCls}-indent"] = new CSSObject()
|
||||
{
|
||||
AlignSelf = "stretch",
|
||||
WhiteSpace = "nowrap",
|
||||
UserSelect = "none",
|
||||
["&-unit"] = new CSSObject()
|
||||
{
|
||||
Display = "inline-block",
|
||||
Width = treeTitleHeight,
|
||||
},
|
||||
},
|
||||
[$"{treeCls}-draggable-icon"] = new CSSObject()
|
||||
{
|
||||
Visibility = "hidden",
|
||||
},
|
||||
[$"{treeCls}-switcher"] = new CSSObject()
|
||||
{
|
||||
["..."] = GetSwitchStyle(prefixCls, token),
|
||||
Position = "relative",
|
||||
Flex = "none",
|
||||
AlignSelf = "stretch",
|
||||
Width = treeTitleHeight,
|
||||
Margin = 0,
|
||||
LineHeight = @$"{treeTitleHeight}px",
|
||||
TextAlign = "center",
|
||||
Cursor = "pointer",
|
||||
UserSelect = "none",
|
||||
["&-noop"] = new CSSObject()
|
||||
{
|
||||
Cursor = "default",
|
||||
},
|
||||
["&_close"] = new CSSObject()
|
||||
{
|
||||
[$"{treeCls}-switcher-icon"] = new CSSObject()
|
||||
{
|
||||
["svg"] = new CSSObject()
|
||||
{
|
||||
Transform = "rotate(-90deg)",
|
||||
},
|
||||
},
|
||||
},
|
||||
["&-loading-icon"] = new CSSObject()
|
||||
{
|
||||
Color = token.ColorPrimary,
|
||||
},
|
||||
["&-leaf-line"] = new CSSObject()
|
||||
{
|
||||
Position = "relative",
|
||||
ZIndex = 1,
|
||||
Display = "inline-block",
|
||||
Width = "100%",
|
||||
Height = "100%",
|
||||
["&:before"] = new CSSObject()
|
||||
{
|
||||
Position = "absolute",
|
||||
Top = 0,
|
||||
InsetInlineEnd = treeTitleHeight / 2,
|
||||
Bottom = -treeNodePadding,
|
||||
MarginInlineStart = -1,
|
||||
BorderInlineEnd = @$"1px solid {token.ColorBorder}",
|
||||
Content = "\"\"",
|
||||
},
|
||||
["&:after"] = new CSSObject()
|
||||
{
|
||||
Position = "absolute",
|
||||
Width = (treeTitleHeight / 2) * 0.8,
|
||||
Height = treeTitleHeight / 2,
|
||||
BorderBottom = @$"1px solid {token.ColorBorder}",
|
||||
Content = "\"\"",
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"{treeCls}-checkbox"] = new CSSObject()
|
||||
{
|
||||
Top = "initial",
|
||||
MarginInlineEnd = treeCheckBoxMarginHorizontal,
|
||||
MarginBlockStart = treeCheckBoxMarginVertical,
|
||||
},
|
||||
[$"{treeCls}-node-content-wrapper, {treeCls}-checkbox + span"] = new CSSObject()
|
||||
{
|
||||
Position = "relative",
|
||||
ZIndex = "auto",
|
||||
MinHeight = treeTitleHeight,
|
||||
Margin = 0,
|
||||
Padding = @$"0 {token.PaddingXS / 2}px",
|
||||
Color = "inherit",
|
||||
LineHeight = @$"{treeTitleHeight}px",
|
||||
Background = "transparent",
|
||||
BorderRadius = token.BorderRadius,
|
||||
Cursor = "pointer",
|
||||
Transition = @$"all {token.MotionDurationMid}, border 0s, line-height 0s, box-shadow 0s",
|
||||
["&:hover"] = new CSSObject()
|
||||
{
|
||||
BackgroundColor = token.ControlItemBgHover,
|
||||
},
|
||||
[$"&{treeCls}-node-selected"] = new CSSObject()
|
||||
{
|
||||
BackgroundColor = token.ControlItemBgActive,
|
||||
},
|
||||
[$"{treeCls}-iconEle"] = new CSSObject()
|
||||
{
|
||||
Display = "inline-block",
|
||||
Width = treeTitleHeight,
|
||||
Height = treeTitleHeight,
|
||||
LineHeight = @$"{treeTitleHeight}px",
|
||||
TextAlign = "center",
|
||||
VerticalAlign = "top",
|
||||
["&:empty"] = new CSSObject()
|
||||
{
|
||||
Display = "none",
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"{treeCls}-unselectable {treeCls}-node-content-wrapper:hover"] = new CSSObject()
|
||||
{
|
||||
BackgroundColor = "transparent",
|
||||
},
|
||||
[$"{treeCls}-node-content-wrapper"] = new CSSObject()
|
||||
{
|
||||
LineHeight = @$"{treeTitleHeight}px",
|
||||
UserSelect = "none",
|
||||
["..."] = GetDropIndicatorStyle(prefixCls, token)
|
||||
},
|
||||
[$"{treeNodeCls}.drop-container"] = new CSSObject()
|
||||
{
|
||||
["> [draggable]"] = new CSSObject()
|
||||
{
|
||||
BoxShadow = @$"0 0 0 2px {token.ColorPrimary}",
|
||||
},
|
||||
},
|
||||
["&-show-line"] = new CSSObject()
|
||||
{
|
||||
[$"{treeCls}-indent"] = new CSSObject()
|
||||
{
|
||||
["&-unit"] = new CSSObject()
|
||||
{
|
||||
Position = "relative",
|
||||
Height = "100%",
|
||||
["&:before"] = new CSSObject()
|
||||
{
|
||||
Position = "absolute",
|
||||
Top = 0,
|
||||
InsetInlineEnd = treeTitleHeight / 2,
|
||||
Bottom = -treeNodePadding,
|
||||
BorderInlineEnd = @$"1px solid {token.ColorBorder}",
|
||||
Content = "\"\"",
|
||||
},
|
||||
["&-end"] = new CSSObject()
|
||||
{
|
||||
["&:before"] = new CSSObject()
|
||||
{
|
||||
Display = "none",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"{treeCls}-switcher"] = new CSSObject()
|
||||
{
|
||||
Background = "transparent",
|
||||
["&-line-icon"] = new CSSObject()
|
||||
{
|
||||
VerticalAlign = "-0.15em",
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"{treeNodeCls}-leaf-last"] = new CSSObject()
|
||||
{
|
||||
[$"{treeCls}-switcher"] = new CSSObject()
|
||||
{
|
||||
["&-leaf-line"] = new CSSObject()
|
||||
{
|
||||
["&:before"] = new CSSObject()
|
||||
{
|
||||
Top = "auto !important",
|
||||
Bottom = "auto !important",
|
||||
Height = @$"{treeTitleHeight / 2}px !important",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GenDirectoryStyle(TreeToken token)
|
||||
{
|
||||
var treeCls = token.TreeCls;
|
||||
var treeNodeCls = token.TreeNodeCls;
|
||||
var treeNodePadding = token.TreeNodePadding;
|
||||
return new CSSObject()
|
||||
{
|
||||
[$"{treeCls}{treeCls}-directory"] = new CSSObject()
|
||||
{
|
||||
[treeNodeCls] = new CSSObject()
|
||||
{
|
||||
Position = "relative",
|
||||
["&:before"] = new CSSObject()
|
||||
{
|
||||
Position = "absolute",
|
||||
Top = 0,
|
||||
InsetInlineEnd = 0,
|
||||
Bottom = treeNodePadding,
|
||||
InsetInlineStart = 0,
|
||||
Transition = @$"background-color {token.MotionDurationMid}",
|
||||
Content = "\"\"",
|
||||
PointerEvents = "none",
|
||||
},
|
||||
["&:hover"] = new CSSObject()
|
||||
{
|
||||
["&:before"] = new CSSObject()
|
||||
{
|
||||
Background = token.ControlItemBgHover,
|
||||
},
|
||||
},
|
||||
["> *"] = new CSSObject()
|
||||
{
|
||||
ZIndex = 1,
|
||||
},
|
||||
[$"{treeCls}-switcher"] = new CSSObject()
|
||||
{
|
||||
Transition = @$"color {token.MotionDurationMid}",
|
||||
},
|
||||
[$"{treeCls}-node-content-wrapper"] = new CSSObject()
|
||||
{
|
||||
BorderRadius = 0,
|
||||
UserSelect = "none",
|
||||
["&:hover"] = new CSSObject()
|
||||
{
|
||||
Background = "transparent",
|
||||
},
|
||||
[$"&{treeCls}-node-selected"] = new CSSObject()
|
||||
{
|
||||
Color = token.ColorTextLightSolid,
|
||||
Background = "transparent",
|
||||
},
|
||||
},
|
||||
["&-selected"] = new CSSObject()
|
||||
{
|
||||
["&:hover::before,&::before"] = new CSSObject()
|
||||
{
|
||||
Background = token.ColorPrimary,
|
||||
},
|
||||
[$"{treeCls}-switcher"] = new CSSObject()
|
||||
{
|
||||
Color = token.ColorTextLightSolid,
|
||||
},
|
||||
[$"{treeCls}-node-content-wrapper"] = new CSSObject()
|
||||
{
|
||||
Color = token.ColorTextLightSolid,
|
||||
Background = "transparent",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSInterpolation GenTreeStyle(string prefixCls, DerivativeToken token)
|
||||
{
|
||||
var treeCls = @$".{prefixCls}";
|
||||
var treeNodeCls = @$"{treeCls}-treenode";
|
||||
var treeNodePadding = token.PaddingXS / 2;
|
||||
var treeTitleHeight = token.ControlHeightSM;
|
||||
var treeToken = MergeToken(
|
||||
token,
|
||||
new CSSInterpolation()
|
||||
{
|
||||
TreeCls = treeCls,
|
||||
TreeNodeCls = treeNodeCls,
|
||||
TreeNodePadding = treeNodePadding,
|
||||
TreeTitleHeight = treeTitleHeight,
|
||||
});
|
||||
return new CSSInterpolation
|
||||
{
|
||||
GenBaseStyle(prefixCls, treeToken),
|
||||
GenDirectoryStyle(treeToken)
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_2 GenComponentStyleHook(Unknown_6 token, Unknown_7 args)
|
||||
{
|
||||
return new Unknown_8
|
||||
{
|
||||
new Unknown_9()
|
||||
{
|
||||
[token.ComponentCls] = GetCheckboxStyle($"{prefixCls}-checkbox", token)
|
||||
},
|
||||
GenTreeStyle(prefixCls, token),
|
||||
GenCollapseMotion(token)
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
public partial class TreeToken : TokenWithCommonCls
|
||||
{
|
||||
public string TreeCls { get; set; }
|
||||
|
||||
public string TreeNodeCls { get; set; }
|
||||
|
||||
public int TreeNodePadding { get; set; }
|
||||
|
||||
public int TreeTitleHeight { get; set; }
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,341 @@
|
|||
using System;
|
||||
using CssInCs;
|
||||
using static AntDesign.GlobalStyle;
|
||||
using static AntDesign.Theme;
|
||||
|
||||
namespace AntDesign
|
||||
{
|
||||
public partial class TypographyToken
|
||||
{
|
||||
public string SizeMarginHeadingVerticalStart { get; set; }
|
||||
|
||||
public string SizeMarginHeadingVerticalEnd { get; set; }
|
||||
|
||||
}
|
||||
|
||||
public partial class TypographyToken : TokenWithCommonCls
|
||||
{
|
||||
}
|
||||
|
||||
public partial class Typography
|
||||
{
|
||||
public Unknown_1 GenTypographyStyle(Unknown_8 token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var sizeMarginHeadingVerticalStart = token.SizeMarginHeadingVerticalStart;
|
||||
return new Unknown_9()
|
||||
{
|
||||
[componentCls] = new Unknown_10()
|
||||
{
|
||||
Color = token.ColorText,
|
||||
WordBreak = "break-word",
|
||||
LineHeight = token.LineHeight,
|
||||
[$"&{componentCls}-secondary"] = new Unknown_11()
|
||||
{
|
||||
Color = token.ColorTextDescription,
|
||||
},
|
||||
[$"&{componentCls}-success"] = new Unknown_12()
|
||||
{
|
||||
Color = token.ColorSuccess,
|
||||
},
|
||||
[$"&{componentCls}-warning"] = new Unknown_13()
|
||||
{
|
||||
Color = token.ColorWarning,
|
||||
},
|
||||
[$"&{componentCls}-danger"] = new Unknown_14()
|
||||
{
|
||||
Color = token.ColorError,
|
||||
["a&:active, a&:focus"] = new Unknown_15()
|
||||
{
|
||||
Color = token.ColorErrorActive,
|
||||
},
|
||||
["a&:hover"] = new Unknown_16()
|
||||
{
|
||||
Color = token.ColorErrorHover,
|
||||
},
|
||||
},
|
||||
[$"&{componentCls}-disabled"] = new Unknown_17()
|
||||
{
|
||||
Color = token.ColorTextDisabled,
|
||||
Cursor = "not-allowed",
|
||||
UserSelect = "none",
|
||||
},
|
||||
["div&,p"] = new Unknown_18()
|
||||
{
|
||||
MarginBottom = "1em",
|
||||
},
|
||||
["..."] = GetTitleStyles(token),
|
||||
[$"&+h1{componentCls},&+h2{componentCls},&+h3{componentCls},&+h4{componentCls},&+h5{componentCls}"] = new Unknown_19()
|
||||
{
|
||||
MarginTop = sizeMarginHeadingVerticalStart,
|
||||
},
|
||||
["div,ul,li,p,h1,h2,h3,h4,h5"] = new Unknown_20()
|
||||
{
|
||||
["+h1,+h2,+h3,+h4,+h5"] = new Unknown_21()
|
||||
{
|
||||
MarginTop = sizeMarginHeadingVerticalStart,
|
||||
},
|
||||
},
|
||||
["..."] = GetResetStyles(token),
|
||||
["..."] = GetLinkStyles(token),
|
||||
[$"{componentCls}-expand,{componentCls}-edit,{componentCls}-copy"] = new Unknown_22()
|
||||
{
|
||||
["..."] = OperationUnit(token),
|
||||
MarginInlineStart = token.MarginXXS,
|
||||
},
|
||||
["..."] = GetEditableStyles(token),
|
||||
["..."] = GetCopyableStyles(token),
|
||||
["..."] = GetEllipsisStyles(),
|
||||
["&-rtl"] = new Unknown_23()
|
||||
{
|
||||
Direction = "rtl",
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_2 GenComponentStyleHook(Unknown_24 token)
|
||||
{
|
||||
return new Unknown_25 { GenTypographyStyle(token) };
|
||||
}
|
||||
|
||||
public Unknown_3 GetTitleStyle(int fontSize, int lineHeight, string color, TypographyToken token)
|
||||
{
|
||||
var sizeMarginHeadingVerticalEnd = token.SizeMarginHeadingVerticalEnd;
|
||||
var fontWeightStrong = token.FontWeightStrong;
|
||||
return new Unknown_26()
|
||||
{
|
||||
MarginBottom = sizeMarginHeadingVerticalEnd,
|
||||
Color = color,
|
||||
FontWeight = fontWeightStrong,
|
||||
FontSize = fontSize,
|
||||
LineHeight = lineHeight,
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_4 GetTitleStyles(Unknown_27 token)
|
||||
{
|
||||
var headings = [1, 2, 3, 4, 5] as const;
|
||||
var styles = {} as CSSObject;
|
||||
}
|
||||
|
||||
public Unknown_5 GetLinkStyles(Unknown_28 token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
return new Unknown_29()
|
||||
{
|
||||
["a&, a"] = new Unknown_30()
|
||||
{
|
||||
["..."] = OperationUnit(token),
|
||||
TextDecoration = token.LinkDecoration,
|
||||
["&:active, &:hover"] = new Unknown_31()
|
||||
{
|
||||
TextDecoration = token.LinkHoverDecoration,
|
||||
},
|
||||
[$"&[disabled], &{componentCls}-disabled"] = new Unknown_32()
|
||||
{
|
||||
Color = token.ColorTextDisabled,
|
||||
Cursor = "not-allowed",
|
||||
["&:active, &:hover"] = new Unknown_33()
|
||||
{
|
||||
Color = token.ColorTextDisabled,
|
||||
},
|
||||
["&:active"] = new Unknown_34()
|
||||
{
|
||||
PointerEvents = "none",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GetResetStyles(Unknown_35 token)
|
||||
{
|
||||
return new CSSObject()
|
||||
{
|
||||
Code = new CSSObject()
|
||||
{
|
||||
Margin = "0 0.2em",
|
||||
PaddingInline = "0.4em",
|
||||
PaddingBlock = "0.2em 0.1em",
|
||||
FontSize = "85%",
|
||||
FontFamily = token.FontFamilyCode,
|
||||
Background = "rgba(150, 150, 150, 0.1)",
|
||||
Border = "1px solid rgba(100, 100, 100, 0.2)",
|
||||
BorderRadius = 3,
|
||||
},
|
||||
Kbd = new CSSObject()
|
||||
{
|
||||
Margin = "0 0.2em",
|
||||
PaddingInline = "0.4em",
|
||||
PaddingBlock = "0.15em 0.1em",
|
||||
FontSize = "90%",
|
||||
FontFamily = token.FontFamilyCode,
|
||||
Background = "rgba(150, 150, 150, 0.06)",
|
||||
Border = "1px solid rgba(100, 100, 100, 0.2)",
|
||||
BorderBottomWidth = 2,
|
||||
BorderRadius = 3,
|
||||
},
|
||||
Mark = new CSSObject()
|
||||
{
|
||||
Padding = 0,
|
||||
BackgroundColor = gold[2],
|
||||
},
|
||||
["u, ins"] = new CSSObject()
|
||||
{
|
||||
TextDecoration = "underline",
|
||||
TextDecorationSkipInk = "auto",
|
||||
},
|
||||
["s, del"] = new CSSObject()
|
||||
{
|
||||
TextDecoration = "line-through",
|
||||
},
|
||||
Strong = new CSSObject()
|
||||
{
|
||||
FontWeight = 600,
|
||||
},
|
||||
["ul, ol"] = new CSSObject()
|
||||
{
|
||||
MarginInline = 0,
|
||||
MarginBlock = "0 1em",
|
||||
Padding = 0,
|
||||
["li"] = new CSSObject()
|
||||
{
|
||||
MarginInline = "20px 0",
|
||||
MarginBlock = 0,
|
||||
PaddingInline = "4px 0",
|
||||
PaddingBlock = 0,
|
||||
},
|
||||
},
|
||||
["ul"] = new CSSObject()
|
||||
{
|
||||
ListStyleType = "circle",
|
||||
["ul"] = new CSSObject()
|
||||
{
|
||||
ListStyleType = "disc",
|
||||
},
|
||||
},
|
||||
["ol"] = new CSSObject()
|
||||
{
|
||||
ListStyleType = "decimal",
|
||||
},
|
||||
["pre, blockquote"] = new CSSObject()
|
||||
{
|
||||
Margin = "1em 0",
|
||||
},
|
||||
Pre = new CSSObject()
|
||||
{
|
||||
Padding = "0.4em 0.6em",
|
||||
WhiteSpace = "pre-wrap",
|
||||
WordWrap = "break-word",
|
||||
Background = "rgba(150, 150, 150, 0.1)",
|
||||
Border = "1px solid rgba(100, 100, 100, 0.2)",
|
||||
BorderRadius = 3,
|
||||
FontFamily = token.FontFamilyCode,
|
||||
Code = new CSSObject()
|
||||
{
|
||||
Display = "inline",
|
||||
Margin = 0,
|
||||
Padding = 0,
|
||||
FontSize = "inherit",
|
||||
FontFamily = "inherit",
|
||||
Background = "transparent",
|
||||
Border = 0,
|
||||
},
|
||||
},
|
||||
Blockquote = new CSSObject()
|
||||
{
|
||||
PaddingInline = "0.6em 0",
|
||||
PaddingBlock = 0,
|
||||
BorderInlineStart = "4px solid rgba(100, 100, 100, 0.2)",
|
||||
Opacity = 0.85f,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_6 GetEditableStyles(Unknown_36 token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var inputToken = InitInputToken(token);
|
||||
var inputShift = inputToken.InputPaddingVertical + 1;
|
||||
return new Unknown_37()
|
||||
{
|
||||
["&-edit-content"] = new Unknown_38()
|
||||
{
|
||||
Position = "relative",
|
||||
["div&"] = new Unknown_39()
|
||||
{
|
||||
InsetInlineStart = -token.PaddingSM,
|
||||
MarginTop = -inputShift,
|
||||
MarginBottom = @$"calc(1em - {inputShift}px)",
|
||||
},
|
||||
[$"{componentCls}-edit-content-confirm"] = new Unknown_40()
|
||||
{
|
||||
Position = "absolute",
|
||||
InsetInlineEnd = token.MarginXS + 2,
|
||||
InsetBlockEnd = token.MarginXS,
|
||||
Color = token.ColorTextDescription,
|
||||
FontWeight = "normal",
|
||||
FontSize = token.FontSize,
|
||||
FontStyle = "normal",
|
||||
PointerEvents = "none",
|
||||
},
|
||||
Textarea = new Unknown_41()
|
||||
{
|
||||
Margin = "0!important",
|
||||
MozTransition = "none",
|
||||
Height = "1em",
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_7 GetCopyableStyles(Unknown_42 token)
|
||||
{
|
||||
return new Unknown_43()
|
||||
{
|
||||
["&-copy-success"] = new Unknown_44()
|
||||
{
|
||||
["&,&:hover,&:focus"] = new Unknown_45()
|
||||
{
|
||||
Color = token.ColorSuccess,
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public CSSObject GetEllipsisStyles()
|
||||
{
|
||||
return new CSSObject()
|
||||
{
|
||||
["a&-ellipsis,span&-ellipsis"] = new CSSObject()
|
||||
{
|
||||
Display = "inline-block",
|
||||
MaxWidth = "100%",
|
||||
},
|
||||
["&-single-line"] = new CSSObject()
|
||||
{
|
||||
WhiteSpace = "nowrap",
|
||||
},
|
||||
["&-ellipsis-single-line"] = new CSSObject()
|
||||
{
|
||||
Overflow = "hidden",
|
||||
TextOverflow = "ellipsis",
|
||||
["a&, span&"] = new CSSObject()
|
||||
{
|
||||
VerticalAlign = "bottom",
|
||||
},
|
||||
},
|
||||
["&-ellipsis-multiple-line"] = new CSSObject()
|
||||
{
|
||||
Display = "-webkit-box",
|
||||
Overflow = "hidden",
|
||||
WebkitLineClamp = 3,
|
||||
WebkitBoxOrient = "vertical",
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -0,0 +1,607 @@
|
|||
using System;
|
||||
using CssInCs;
|
||||
using static AntDesign.GlobalStyle;
|
||||
using static AntDesign.Theme;
|
||||
|
||||
namespace AntDesign
|
||||
{
|
||||
public partial class UploadToken
|
||||
{
|
||||
}
|
||||
|
||||
public partial class UploadToken : TokenWithCommonCls
|
||||
{
|
||||
public int UploadThumbnailSize { get; set; }
|
||||
|
||||
public int UploadProgressOffset { get; set; }
|
||||
|
||||
public int UploadPicCardSize { get; set; }
|
||||
|
||||
}
|
||||
|
||||
public partial class Upload
|
||||
{
|
||||
private Keyframes uploadAnimateInlineIn = new Keyframes("uploadAnimateInlineIn")
|
||||
{
|
||||
From = new Keyframes()
|
||||
{
|
||||
Width = 0,
|
||||
Height = 0,
|
||||
Margin = 0,
|
||||
Padding = 0,
|
||||
Opacity = 0,
|
||||
},
|
||||
};
|
||||
|
||||
private Keyframes uploadAnimateInlineOut = new Keyframes("uploadAnimateInlineOut")
|
||||
{
|
||||
To = new Keyframes()
|
||||
{
|
||||
Width = 0,
|
||||
Height = 0,
|
||||
Margin = 0,
|
||||
Padding = 0,
|
||||
Opacity = 0,
|
||||
},
|
||||
};
|
||||
|
||||
public Unknown_1 GenBaseStyle(Unknown_9 token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var colorTextDisabled = token.ColorTextDisabled;
|
||||
return new Unknown_10()
|
||||
{
|
||||
[$"{componentCls}-wrapper"] = new Unknown_11()
|
||||
{
|
||||
["..."] = ResetComponent(token),
|
||||
[componentCls] = new Unknown_12()
|
||||
{
|
||||
Outline = 0,
|
||||
["input[type=\"file\"]"] = new Unknown_13()
|
||||
{
|
||||
Cursor = "pointer",
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-select"] = new Unknown_14()
|
||||
{
|
||||
Display = "inline-block",
|
||||
},
|
||||
[$"{componentCls}-disabled"] = new Unknown_15()
|
||||
{
|
||||
Color = colorTextDisabled,
|
||||
Cursor = "not-allowed",
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_2 GenComponentStyleHook(Unknown_16 token)
|
||||
{
|
||||
var fontSizeHeading3 = token.FontSizeHeading3;
|
||||
var fontSize = token.FontSize;
|
||||
var lineHeight = token.LineHeight;
|
||||
var lineWidth = token.LineWidth;
|
||||
var controlHeightLG = token.ControlHeightLG;
|
||||
var listItemHeightSM = Math.Round(fontSize * lineHeight);
|
||||
var uploadToken = MergeToken(
|
||||
token,
|
||||
new Unknown_17()
|
||||
{
|
||||
UploadThumbnailSize = fontSizeHeading3 * 2,
|
||||
UploadProgressOffset = listItemHeightSM / 2 + lineWidth,
|
||||
UploadPicCardSize = controlHeightLG * 2.55,
|
||||
});
|
||||
return new Unknown_18
|
||||
{
|
||||
GenBaseStyle(uploadToken),
|
||||
GenDraggerStyle(uploadToken),
|
||||
GenPictureStyle(uploadToken),
|
||||
GenPictureCardStyle(uploadToken),
|
||||
GenListStyle(uploadToken),
|
||||
GenMotionStyle(uploadToken),
|
||||
GenRtlStyle(uploadToken),
|
||||
GenCollapseMotion(uploadToken)
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_3 GenDraggerStyle(Unknown_19 token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var iconCls = token.IconCls;
|
||||
return new Unknown_20()
|
||||
{
|
||||
[$"{componentCls}-wrapper"] = new Unknown_21()
|
||||
{
|
||||
[$"{componentCls}-drag"] = new Unknown_22()
|
||||
{
|
||||
Position = "relative",
|
||||
Width = "100%",
|
||||
Height = "100%",
|
||||
TextAlign = "center",
|
||||
Background = token.ColorFillAlter,
|
||||
Border = @$"{token.LineWidth}px dashed {token.ColorBorder}",
|
||||
BorderRadius = token.BorderRadiusLG,
|
||||
Cursor = "pointer",
|
||||
Transition = @$"border-color {token.MotionDurationSlow}",
|
||||
[componentCls] = new Unknown_23()
|
||||
{
|
||||
Padding = @$"{token.Padding}px 0",
|
||||
},
|
||||
[$"{componentCls}-btn"] = new Unknown_24()
|
||||
{
|
||||
Display = "table",
|
||||
Width = "100%",
|
||||
Height = "100%",
|
||||
Outline = "none",
|
||||
},
|
||||
[$"{componentCls}-drag-container"] = new Unknown_25()
|
||||
{
|
||||
Display = "table-cell",
|
||||
VerticalAlign = "middle",
|
||||
},
|
||||
[$"&:not({componentCls}-disabled):hover"] = new Unknown_26()
|
||||
{
|
||||
BorderColor = token.ColorPrimaryHover,
|
||||
},
|
||||
[$"p{componentCls}-drag-icon"] = new Unknown_27()
|
||||
{
|
||||
MarginBottom = token.Margin,
|
||||
[iconCls] = new Unknown_28()
|
||||
{
|
||||
Color = token.ColorPrimary,
|
||||
FontSize = token.UploadThumbnailSize,
|
||||
},
|
||||
},
|
||||
[$"p{componentCls}-text"] = new Unknown_29()
|
||||
{
|
||||
Margin = @$"0 0 {token.MarginXXS}px",
|
||||
Color = token.ColorTextHeading,
|
||||
FontSize = token.FontSizeLG,
|
||||
},
|
||||
[$"p{componentCls}-hint"] = new Unknown_30()
|
||||
{
|
||||
Color = token.ColorTextDescription,
|
||||
FontSize = token.FontSize,
|
||||
},
|
||||
[$"&{componentCls}-disabled"] = new Unknown_31()
|
||||
{
|
||||
Cursor = "not-allowed",
|
||||
[$"p{componentCls}-drag-icon{iconCls},p{componentCls}-text,p{componentCls}-hint"] = new Unknown_32()
|
||||
{
|
||||
Color = token.ColorTextDisabled,
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_4 GenListStyle(Unknown_33 token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var antCls = token.AntCls;
|
||||
var iconCls = token.IconCls;
|
||||
var fontSize = token.FontSize;
|
||||
var lineHeight = token.LineHeight;
|
||||
var itemCls = @$"{componentCls}-list-item";
|
||||
var actionsCls = @$"{itemCls}-actions";
|
||||
var actionCls = @$"{itemCls}-action";
|
||||
var listItemHeightSM = Math.Round(fontSize * lineHeight);
|
||||
return new Unknown_34()
|
||||
{
|
||||
[$"{componentCls}-wrapper"] = new Unknown_35()
|
||||
{
|
||||
[$"{componentCls}-list"] = new Unknown_36()
|
||||
{
|
||||
["..."] = ClearFix(),
|
||||
LineHeight = token.LineHeight,
|
||||
[itemCls] = new Unknown_37()
|
||||
{
|
||||
Position = "relative",
|
||||
Height = token.LineHeight * fontSize,
|
||||
MarginTop = token.MarginXS,
|
||||
FontSize = fontSize,
|
||||
Display = "flex",
|
||||
AlignItems = "center",
|
||||
Transition = @$"background-color {token.MotionDurationSlow}",
|
||||
["&:hover"] = new Unknown_38()
|
||||
{
|
||||
BackgroundColor = token.ControlItemBgHover,
|
||||
},
|
||||
[$"{itemCls}-name"] = new Unknown_39()
|
||||
{
|
||||
["..."] = textEllipsis,
|
||||
Padding = @$"0 {token.PaddingXS}px",
|
||||
LineHeight = lineHeight,
|
||||
Flex = "auto",
|
||||
Transition = @$"all {token.MotionDurationSlow}",
|
||||
},
|
||||
[actionsCls] = new Unknown_40()
|
||||
{
|
||||
[actionCls] = new Unknown_41()
|
||||
{
|
||||
Opacity = 0,
|
||||
},
|
||||
[$"{actionCls}{antCls}-btn-sm"] = new Unknown_42()
|
||||
{
|
||||
Height = listItemHeightSM,
|
||||
Border = 0,
|
||||
LineHeight = 1,
|
||||
["> span"] = new Unknown_43()
|
||||
{
|
||||
Transform = "scale(1)",
|
||||
},
|
||||
},
|
||||
[$"{actionCls}:focus,&.picture{actionCls}"] = new Unknown_44()
|
||||
{
|
||||
Opacity = 1,
|
||||
},
|
||||
[iconCls] = new Unknown_45()
|
||||
{
|
||||
Color = token.ColorTextDescription,
|
||||
Transition = @$"all {token.MotionDurationSlow}",
|
||||
},
|
||||
[$"&:hover {iconCls}"] = new Unknown_46()
|
||||
{
|
||||
Color = token.ColorText,
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-icon {iconCls}"] = new Unknown_47()
|
||||
{
|
||||
Color = token.ColorTextDescription,
|
||||
FontSize = fontSize,
|
||||
},
|
||||
[$"{itemCls}-progress"] = new Unknown_48()
|
||||
{
|
||||
Position = "absolute",
|
||||
Bottom = -token.UploadProgressOffset,
|
||||
Width = "100%",
|
||||
PaddingInlineStart = fontSize + token.PaddingXS,
|
||||
FontSize = fontSize,
|
||||
LineHeight = 0,
|
||||
PointerEvents = "none",
|
||||
["> div"] = new Unknown_49()
|
||||
{
|
||||
Margin = 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"{itemCls}:hover {actionCls}"] = new Unknown_50()
|
||||
{
|
||||
Opacity = 1,
|
||||
Color = token.ColorText,
|
||||
},
|
||||
[$"{itemCls}-error"] = new Unknown_51()
|
||||
{
|
||||
Color = token.ColorError,
|
||||
[$"{itemCls}-name, {componentCls}-icon {iconCls}"] = new Unknown_52()
|
||||
{
|
||||
Color = token.ColorError,
|
||||
},
|
||||
[actionsCls] = new Unknown_53()
|
||||
{
|
||||
[$"{iconCls}, {iconCls}:hover"] = new Unknown_54()
|
||||
{
|
||||
Color = token.ColorError,
|
||||
},
|
||||
[actionCls] = new Unknown_55()
|
||||
{
|
||||
Opacity = 1,
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-list-item-container"] = new Unknown_56()
|
||||
{
|
||||
Transition = @$"opacity {token.MotionDurationSlow}, height {token.MotionDurationSlow}",
|
||||
["&::before"] = new Unknown_57()
|
||||
{
|
||||
Display = "table",
|
||||
Width = 0,
|
||||
Height = 0,
|
||||
Content = "\"\"",
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_5 GenMotionStyle(Unknown_58 token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var inlineCls = @$"{componentCls}-animate-inline";
|
||||
return new Unknown_59
|
||||
{
|
||||
new Unknown_60()
|
||||
{
|
||||
[$"{componentCls}-wrapper"] = new Unknown_61()
|
||||
{
|
||||
[$"{inlineCls}-appear, {inlineCls}-enter, {inlineCls}-leave"] = new Unknown_62()
|
||||
{
|
||||
AnimationDuration = token.MotionDurationSlow,
|
||||
AnimationTimingFunction = token.MotionEaseInOutCirc,
|
||||
AnimationFillMode = "forwards",
|
||||
},
|
||||
[$"{inlineCls}-appear, {inlineCls}-enter"] = new Unknown_63()
|
||||
{
|
||||
AnimationName = uploadAnimateInlineIn,
|
||||
},
|
||||
[$"{inlineCls}-leave"] = new Unknown_64()
|
||||
{
|
||||
AnimationName = uploadAnimateInlineOut,
|
||||
},
|
||||
},
|
||||
},
|
||||
UploadAnimateInlineIn,
|
||||
UploadAnimateInlineOut
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_6 GenPictureStyle(Unknown_65 token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var iconCls = token.IconCls;
|
||||
var uploadThumbnailSize = token.UploadThumbnailSize;
|
||||
var uploadProgressOffset = token.UploadProgressOffset;
|
||||
var listCls = @$"{componentCls}-list";
|
||||
var itemCls = @$"{listCls}-item";
|
||||
return new Unknown_66()
|
||||
{
|
||||
[$"{componentCls}-wrapper"] = new Unknown_67()
|
||||
{
|
||||
[$"{listCls}{listCls}-picture,{listCls}{listCls}-picture-card,{listCls}{listCls}-picture-circle"] = new Unknown_68()
|
||||
{
|
||||
[itemCls] = new Unknown_69()
|
||||
{
|
||||
Position = "relative",
|
||||
Height = uploadThumbnailSize + token.LineWidth * 2 + token.PaddingXS * 2,
|
||||
Padding = token.PaddingXS,
|
||||
Border = @$"{token.LineWidth}px {token.LineType} {token.ColorBorder}",
|
||||
BorderRadius = token.BorderRadiusLG,
|
||||
["&:hover"] = new Unknown_70()
|
||||
{
|
||||
Background = "transparent",
|
||||
},
|
||||
[$"{itemCls}-thumbnail"] = new Unknown_71()
|
||||
{
|
||||
["..."] = textEllipsis,
|
||||
Width = uploadThumbnailSize,
|
||||
Height = uploadThumbnailSize,
|
||||
LineHeight = @$"{uploadThumbnailSize + token.PaddingSM}px",
|
||||
TextAlign = "center",
|
||||
Flex = "none",
|
||||
[iconCls] = new Unknown_72()
|
||||
{
|
||||
FontSize = token.FontSizeHeading2,
|
||||
Color = token.ColorPrimary,
|
||||
},
|
||||
["img"] = new Unknown_73()
|
||||
{
|
||||
Display = "block",
|
||||
Width = "100%",
|
||||
Height = "100%",
|
||||
Overflow = "hidden",
|
||||
},
|
||||
},
|
||||
[$"{itemCls}-progress"] = new Unknown_74()
|
||||
{
|
||||
Bottom = uploadProgressOffset,
|
||||
Width = @$"calc(100% - {token.PaddingSM * 2}px)",
|
||||
MarginTop = 0,
|
||||
PaddingInlineStart = uploadThumbnailSize + token.PaddingXS,
|
||||
},
|
||||
},
|
||||
[$"{itemCls}-error"] = new Unknown_75()
|
||||
{
|
||||
BorderColor = token.ColorError,
|
||||
[$"{itemCls}-thumbnail {iconCls}"] = new Unknown_76()
|
||||
{
|
||||
["svg path[fill="#e6f7ff"]"] = new Unknown_77()
|
||||
{
|
||||
Fill = token.ColorErrorBg,
|
||||
},
|
||||
["svg path[fill="#1890ff"]"] = new Unknown_78()
|
||||
{
|
||||
Fill = token.ColorError,
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"{itemCls}-uploading"] = new Unknown_79()
|
||||
{
|
||||
BorderStyle = "dashed",
|
||||
[$"{itemCls}-name"] = new Unknown_80()
|
||||
{
|
||||
MarginBottom = uploadProgressOffset,
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"{listCls}{listCls}-picture-circle {itemCls}"] = new Unknown_81()
|
||||
{
|
||||
[$"&, &::before, {itemCls}-thumbnail"] = new Unknown_82()
|
||||
{
|
||||
BorderRadius = "50%",
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_7 GenPictureCardStyle(Unknown_83 token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
var iconCls = token.IconCls;
|
||||
var fontSizeLG = token.FontSizeLG;
|
||||
var colorTextLightSolid = token.ColorTextLightSolid;
|
||||
var listCls = @$"{componentCls}-list";
|
||||
var itemCls = @$"{listCls}-item";
|
||||
var uploadPictureCardSize = token.UploadPicCardSize;
|
||||
return new Unknown_84()
|
||||
{
|
||||
[$"{componentCls}-wrapper{componentCls}-picture-card-wrapper,{componentCls}-wrapper{componentCls}-picture-circle-wrapper"] = new Unknown_85()
|
||||
{
|
||||
["..."] = ClearFix(),
|
||||
Display = "inline-block",
|
||||
Width = "100%",
|
||||
[$"{componentCls}{componentCls}-select"] = new Unknown_86()
|
||||
{
|
||||
Width = uploadPictureCardSize,
|
||||
Height = uploadPictureCardSize,
|
||||
MarginInlineEnd = token.MarginXS,
|
||||
MarginBottom = token.MarginXS,
|
||||
TextAlign = "center",
|
||||
VerticalAlign = "top",
|
||||
BackgroundColor = token.ColorFillAlter,
|
||||
Border = @$"{token.LineWidth}px dashed {token.ColorBorder}",
|
||||
BorderRadius = token.BorderRadiusLG,
|
||||
Cursor = "pointer",
|
||||
Transition = @$"border-color {token.MotionDurationSlow}",
|
||||
[$"> {componentCls}"] = new Unknown_87()
|
||||
{
|
||||
Display = "flex",
|
||||
AlignItems = "center",
|
||||
JustifyContent = "center",
|
||||
Height = "100%",
|
||||
TextAlign = "center",
|
||||
},
|
||||
[$"&:not({componentCls}-disabled):hover"] = new Unknown_88()
|
||||
{
|
||||
BorderColor = token.ColorPrimary,
|
||||
},
|
||||
},
|
||||
[$"{listCls}{listCls}-picture-card, {listCls}{listCls}-picture-circle"] = new Unknown_89()
|
||||
{
|
||||
[$"{listCls}-item-container"] = new Unknown_90()
|
||||
{
|
||||
Display = "inline-block",
|
||||
Width = uploadPictureCardSize,
|
||||
Height = uploadPictureCardSize,
|
||||
MarginBlock = @$"0 {token.MarginXS}px",
|
||||
MarginInline = @$"0 {token.MarginXS}px",
|
||||
VerticalAlign = "top",
|
||||
},
|
||||
["&::after"] = new Unknown_91()
|
||||
{
|
||||
Display = "none",
|
||||
},
|
||||
[itemCls] = new Unknown_92()
|
||||
{
|
||||
Height = "100%",
|
||||
Margin = 0,
|
||||
["&::before"] = new Unknown_93()
|
||||
{
|
||||
Position = "absolute",
|
||||
ZIndex = 1,
|
||||
Width = @$"calc(100% - {token.PaddingXS * 2}px)",
|
||||
Height = @$"calc(100% - {token.PaddingXS * 2}px)",
|
||||
BackgroundColor = token.ColorBgMask,
|
||||
Opacity = 0,
|
||||
Transition = @$"all {token.MotionDurationSlow}",
|
||||
Content = "\" \"",
|
||||
},
|
||||
},
|
||||
[$"{itemCls}:hover"] = new Unknown_94()
|
||||
{
|
||||
[$"&::before, {itemCls}-actions"] = new Unknown_95()
|
||||
{
|
||||
Opacity = 1,
|
||||
},
|
||||
},
|
||||
[$"{itemCls}-actions"] = new Unknown_96()
|
||||
{
|
||||
Position = "absolute",
|
||||
InsetInlineStart = 0,
|
||||
ZIndex = 10,
|
||||
Width = "100%",
|
||||
WhiteSpace = "nowrap",
|
||||
TextAlign = "center",
|
||||
Opacity = 0,
|
||||
Transition = @$"all {token.MotionDurationSlow}",
|
||||
[$"{iconCls}-eye, {iconCls}-download, {iconCls}-delete"] = new Unknown_97()
|
||||
{
|
||||
ZIndex = 10,
|
||||
Width = fontSizeLG,
|
||||
Margin = @$"0 {token.MarginXXS}px",
|
||||
FontSize = fontSizeLG,
|
||||
Cursor = "pointer",
|
||||
Transition = @$"all {token.MotionDurationSlow}",
|
||||
["svg"] = new Unknown_98()
|
||||
{
|
||||
VerticalAlign = "baseline",
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"{itemCls}-actions, {itemCls}-actions:hover"] = new Unknown_99()
|
||||
{
|
||||
[$"{iconCls}-eye, {iconCls}-download, {iconCls}-delete"] = new Unknown_100()
|
||||
{
|
||||
Color = New TinyColor(colorTextLightSolid).setAlpha(0.65).toRgbString(),
|
||||
["&:hover"] = new Unknown_101()
|
||||
{
|
||||
Color = colorTextLightSolid,
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"{itemCls}-thumbnail, {itemCls}-thumbnail img"] = new Unknown_102()
|
||||
{
|
||||
Position = "static",
|
||||
Display = "block",
|
||||
Width = "100%",
|
||||
Height = "100%",
|
||||
ObjectFit = "contain",
|
||||
},
|
||||
[$"{itemCls}-name"] = new Unknown_103()
|
||||
{
|
||||
Display = "none",
|
||||
TextAlign = "center",
|
||||
},
|
||||
[$"{itemCls}-file + {itemCls}-name"] = new Unknown_104()
|
||||
{
|
||||
Position = "absolute",
|
||||
Bottom = token.Margin,
|
||||
Display = "block",
|
||||
Width = @$"calc(100% - {token.PaddingXS * 2}px)",
|
||||
},
|
||||
[$"{itemCls}-uploading"] = new Unknown_105()
|
||||
{
|
||||
[$"&{itemCls}"] = new Unknown_106()
|
||||
{
|
||||
BackgroundColor = token.ColorFillAlter,
|
||||
},
|
||||
[$"&::before, {iconCls}-eye, {iconCls}-download, {iconCls}-delete"] = new Unknown_107()
|
||||
{
|
||||
Display = "none",
|
||||
},
|
||||
},
|
||||
[$"{itemCls}-progress"] = new Unknown_108()
|
||||
{
|
||||
Bottom = token.MarginXL,
|
||||
Width = @$"calc(100% - {token.PaddingXS * 2}px)",
|
||||
PaddingInlineStart = 0,
|
||||
},
|
||||
},
|
||||
},
|
||||
[$"{componentCls}-wrapper{componentCls}-picture-circle-wrapper"] = new Unknown_109()
|
||||
{
|
||||
[$"{componentCls}{componentCls}-select"] = new Unknown_110()
|
||||
{
|
||||
BorderRadius = "50%",
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
public Unknown_8 GenRtlStyle(Unknown_111 token)
|
||||
{
|
||||
var componentCls = token.ComponentCls;
|
||||
return new Unknown_112()
|
||||
{
|
||||
[$"{componentCls}-rtl"] = new Unknown_113()
|
||||
{
|
||||
Direction = "rtl",
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
|
@ -26,7 +26,8 @@
|
|||
"build:lib": "gulp build:library",
|
||||
"build:doc": "gulp build:preview --max-old-space-size=81920",
|
||||
"preinstall": "dotnet tool restore",
|
||||
"changelog": "node ./scripts/print-changelog"
|
||||
"changelog": "node ./scripts/print-changelog",
|
||||
"migrate": "ts-node ./scripts/migrator/index.ts"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.8.7",
|
||||
|
|
@ -69,7 +70,7 @@
|
|||
"simple-git": "^3.7.0",
|
||||
"ts-node": "^10.8.0",
|
||||
"tsify": "^4.0.2",
|
||||
"typescript": "^3.8.3",
|
||||
"typescript": "~5.0.2",
|
||||
"vinyl-buffer": "^1.0.1",
|
||||
"vinyl-source-stream": "^2.0.0"
|
||||
},
|
||||
|
|
|
|||
Разница между файлами не показана из-за своего большого размера
Загрузить разницу
|
|
@ -0,0 +1,477 @@
|
|||
import { isString, toPascalCase, castType, castFieldName, castFieldValue, init, unknown, castParameter, castFunName, defaultValue } from "./Util";
|
||||
|
||||
export type Transform = {
|
||||
source: string;
|
||||
target: string;
|
||||
regex?: string;
|
||||
}
|
||||
|
||||
export type TypeMap = {
|
||||
from: string;
|
||||
to: string;
|
||||
ranges?: number[][];
|
||||
includes?: (number | string)[];
|
||||
}
|
||||
|
||||
export type CsOptions = {
|
||||
usings: string[];
|
||||
namespace: string;
|
||||
defaultClass: string;
|
||||
defaultTab: string;
|
||||
typeMap?: TypeMap[];
|
||||
transforms?: Transform[];
|
||||
}
|
||||
|
||||
export enum CsKinds {
|
||||
ObjectExpression = 0, // create object with expression.
|
||||
ObjectBinding = 1, // extract properties from an object.
|
||||
ArrayExpression = 2, // create array with expression.
|
||||
CallExpression = 3,
|
||||
Method = 4,
|
||||
Func = 5,
|
||||
Action = 6,
|
||||
VariableDeclaration = 7,
|
||||
}
|
||||
|
||||
export type ParameterType = {
|
||||
name: string;
|
||||
type: string;
|
||||
bindings?: BindingItem[];
|
||||
defaultValue?: string;
|
||||
}
|
||||
|
||||
export type PropertyAssignment = {
|
||||
fieldName: string;
|
||||
fieldValue: string | ObjectExpression | ArrayExpression | CallExpression;
|
||||
}
|
||||
|
||||
export type BindingItem = {
|
||||
name: string;
|
||||
propertyName: string;
|
||||
}
|
||||
|
||||
export type ObjectExpression = {
|
||||
kind?: CsKinds;
|
||||
type: string;
|
||||
args?: string[];
|
||||
properties: PropertyAssignment[];
|
||||
}
|
||||
|
||||
export type ArrayExpression = {
|
||||
kind: CsKinds;
|
||||
type: string;
|
||||
items: any[];
|
||||
}
|
||||
|
||||
export type CallExpression = {
|
||||
kind: CsKinds;
|
||||
assignment?: string;
|
||||
funcName: string;
|
||||
paramaters: any[];
|
||||
returnFlag?: string;
|
||||
}
|
||||
|
||||
export type ObjectBinding = {
|
||||
kind: CsKinds;
|
||||
initializer: string;
|
||||
bindings: BindingItem[];
|
||||
}
|
||||
|
||||
export type FunctionBody = {
|
||||
statements: any[];
|
||||
}
|
||||
|
||||
export type VariableDeclaration = {
|
||||
kind: CsKinds;
|
||||
name: string;
|
||||
value: string | ObjectExpression;
|
||||
}
|
||||
|
||||
export class CsVariable {
|
||||
name: string;
|
||||
type: string;
|
||||
value: any;
|
||||
|
||||
constructor(name: string, type: string, value: any) {
|
||||
this.name = name;
|
||||
this.type = type;
|
||||
this.value = value;
|
||||
}
|
||||
|
||||
format(tab: string): string[] {
|
||||
const codes: string[] = [];
|
||||
if (isString(this.value)) {
|
||||
codes.push(`${tab}var ${this.name} = ${this.value};`);
|
||||
} else {
|
||||
switch (this.value.kind) {
|
||||
case CsKinds.ObjectExpression:
|
||||
codes.push(...this.createObjectExpression(tab, this.value));
|
||||
break;
|
||||
}
|
||||
}
|
||||
return codes;
|
||||
}
|
||||
|
||||
private createObjectExpression(tab: string, objectExpression: ObjectExpression): string[] {
|
||||
const codes: string[] = [];
|
||||
const recursion = (rootTab: string, fieldName: string, exp: ObjectExpression) => {
|
||||
const end = fieldName ? ',' : ';';
|
||||
const args = exp.args && exp.args.length > 0 ? exp.args.map(x => castParameter(x)).join(', ') : '';
|
||||
if (!fieldName) {
|
||||
codes.push(`${rootTab}private ${this.type} ${this.name} = new ${this.type}(${args})`);
|
||||
} else {
|
||||
const type = castType(exp.type || unknown());
|
||||
codes.push(`${rootTab}${fieldName} = new ${type}(${args})`);
|
||||
}
|
||||
codes.push(`${rootTab}{`);
|
||||
for (const item of exp.properties) {
|
||||
const name = castFieldName(item.fieldName);
|
||||
if (isString(item.fieldValue)) {
|
||||
codes.push(`${rootTab} ${name} = ${castFieldValue(item.fieldValue as string)},`);
|
||||
} else {
|
||||
recursion(rootTab + ' ', name, item.fieldValue as ObjectExpression);
|
||||
}
|
||||
}
|
||||
codes.push(`${rootTab}}${end}`);
|
||||
}
|
||||
recursion(tab, '', objectExpression);
|
||||
return codes;
|
||||
}
|
||||
}
|
||||
|
||||
export class CsProperty {
|
||||
name: string;
|
||||
type: string;
|
||||
access: string;
|
||||
constructor(name: string, type: string, access: string = 'public') {
|
||||
this.name = name;
|
||||
this.type = type;
|
||||
this.access = access;
|
||||
}
|
||||
|
||||
public format(tab: string = ''): string[] {
|
||||
return [`${tab}${this.access} ${castType(this.type)} ${toPascalCase(this.name)} { get; set; }`];
|
||||
}
|
||||
}
|
||||
|
||||
export class CsFunction {
|
||||
name: string;
|
||||
paramaters: ParameterType[];
|
||||
returnType: string;
|
||||
body: FunctionBody;
|
||||
kind: CsKinds;
|
||||
|
||||
constructor(name: string, parameters: ParameterType[], returnType: string, body: FunctionBody, kind: CsKinds = CsKinds.Method) {
|
||||
this.name = name;
|
||||
this.paramaters = parameters;
|
||||
this.returnType = returnType || unknown();
|
||||
this.body = body;
|
||||
this.kind = kind;
|
||||
}
|
||||
|
||||
format(tab: string = '', end: string = ';'): string[] {
|
||||
const codes: string[] = [];
|
||||
const bindingParamaters = () => {
|
||||
const ps = this.paramaters.filter(x => x.bindings !== undefined);
|
||||
if (ps && ps.length > 0) {
|
||||
ps.forEach(x => {
|
||||
x.bindings?.forEach(y => {
|
||||
codes.push(`${tab} var ${y.name} = ${x.name}.${toPascalCase(y.name)};`);
|
||||
})
|
||||
});
|
||||
}
|
||||
}
|
||||
switch (this.kind) {
|
||||
case CsKinds.Method:
|
||||
const ps = this.paramaters.map(x => `${castType(x.type || unknown())} ${defaultValue(x.name, x.defaultValue)}`).join(', ');
|
||||
codes.push(`${tab}public ${castType(this.returnType)} ${toPascalCase(this.name)}(${ps})`);
|
||||
codes.push(`${tab}{`);
|
||||
codes.push(...this.createBody(tab + ' '));
|
||||
codes.push(`${tab}}`);
|
||||
break;
|
||||
case CsKinds.Func:
|
||||
if (this.name) {
|
||||
const ps = this.paramaters.map(x => `${castType(x.type || unknown())} ${x.name}`).join(', ');
|
||||
codes.push(`${tab}var ${this.name} = (${ps}) => {`);
|
||||
codes.push(...this.createBody(tab + ' '));
|
||||
codes.push(`${tab}}${end}`);
|
||||
} else {
|
||||
const ps = this.paramaters.map(x => `${x.name}`).join(', '); // reset parameters
|
||||
codes.push(`${tab}(${ps}) => {`); // anonymous func
|
||||
bindingParamaters();
|
||||
codes.push(...this.createBody(tab + ' '));
|
||||
codes.push(`${tab}}${end}`);
|
||||
}
|
||||
|
||||
break;
|
||||
}
|
||||
return codes;
|
||||
}
|
||||
|
||||
private createBody(tab: string): string[] {
|
||||
const codes: string[] = [];
|
||||
this.body.statements.forEach(x => {
|
||||
switch (x.kind) {
|
||||
case CsKinds.ObjectExpression:
|
||||
codes.push(...this.createObjectExpression(tab, x));
|
||||
break;
|
||||
case CsKinds.ObjectBinding:
|
||||
codes.push(...this.createObjectBinding(tab, x));
|
||||
break;
|
||||
case CsKinds.ArrayExpression:
|
||||
codes.push(...this.createArrayExpression(tab, x));
|
||||
break;
|
||||
case CsKinds.CallExpression:
|
||||
codes.push(...this.createCallExpression(tab, x));
|
||||
break;
|
||||
case CsKinds.Func:
|
||||
codes.push(...x.format(tab));
|
||||
break;
|
||||
case CsKinds.VariableDeclaration:
|
||||
codes.push(...this.createVariableDeclaration(tab, x));
|
||||
break;
|
||||
}
|
||||
});
|
||||
return codes;
|
||||
}
|
||||
|
||||
private createObjectBinding(tab: string, objectBinding: ObjectBinding): string[] {
|
||||
const codes: string[] = [];
|
||||
if (!objectBinding.bindings || objectBinding.bindings.length <= 0) return codes;
|
||||
objectBinding.bindings.forEach((item) => {
|
||||
const name = item.propertyName ? item.propertyName : item.name;
|
||||
codes.push(`${tab}var ${item.name} = ${objectBinding.initializer}.${toPascalCase(name)};`);
|
||||
});
|
||||
return codes;
|
||||
}
|
||||
|
||||
private createObjectExpression(tab: string, objectExpression: ObjectExpression, rootEnd: string = ';', returnFlag: string = 'return '): string[] {
|
||||
const codes: string[] = [];
|
||||
const recursion = (rootTab: string, fieldName: string, exp: ObjectExpression) => {
|
||||
const end = fieldName ? ',' : rootEnd;
|
||||
const type = castType(exp.type || unknown(), exp.properties.map(x => x.fieldName));
|
||||
codes.push(fieldName ? `${rootTab}${fieldName} = new ${type}()` : `${rootTab}${returnFlag}new ${type}()`);
|
||||
codes.push(`${rootTab}{`);
|
||||
exp.properties.forEach((item, i) => {
|
||||
const name = castFieldName(item.fieldName);
|
||||
const value = item.fieldValue as any;
|
||||
if (isString(value)) {
|
||||
codes.push(`${rootTab} ${name} = ${castFieldValue(value as string)},`);
|
||||
} else if (value.kind === CsKinds.ArrayExpression) {
|
||||
const arrExp = this.createArrayExpression(rootTab + ' ', value as ArrayExpression, '', '');
|
||||
codes.push(`${rootTab} ${name} = ${arrExp[0].trimStart()}`);
|
||||
codes.push(...arrExp.slice(1));
|
||||
} else if (value.kind === CsKinds.CallExpression) {
|
||||
const end = i === exp.properties.length - 1 ? '' : ',';
|
||||
const callExp = this.createCallExpression(rootTab + ' ', value as CallExpression, end);
|
||||
codes.push(`${rootTab} ${name} = ${callExp[0].trimStart()}`);
|
||||
if (callExp.length > 1) {
|
||||
codes.push(...callExp.slice(1));
|
||||
}
|
||||
} else {
|
||||
recursion(rootTab + ' ', name, value as ObjectExpression);
|
||||
}
|
||||
});
|
||||
codes.push(`${rootTab}}${end}`);
|
||||
}
|
||||
recursion(tab, '', objectExpression);
|
||||
return codes;
|
||||
}
|
||||
|
||||
private createArrayExpression(tab: string, arrayExpression: ArrayExpression, rootEnd: string = ';', returnFlag: string = 'return '): string[] {
|
||||
const codes: string[] = [];
|
||||
const precode = `${returnFlag}new ${castType(arrayExpression.type || unknown())}`;
|
||||
if (arrayExpression.items.length > 1) {
|
||||
codes.push(`${tab}${precode}`);
|
||||
codes.push(`${tab}{`);
|
||||
arrayExpression.items.forEach((x, i) => {
|
||||
const end = i === arrayExpression.items.length - 1 ? '' : ',';
|
||||
if (isString(x)) {
|
||||
codes.push(`${tab} ${toPascalCase(castParameter(x))}${end}`);
|
||||
} else {
|
||||
switch (x.kind) {
|
||||
case CsKinds.ObjectExpression:
|
||||
codes.push(...this.createObjectExpression(tab + ' ', x as ObjectExpression, ',', ''));
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
codes.push(`${tab}}${rootEnd}`);
|
||||
} else {
|
||||
const args = arrayExpression.items.map(x => toPascalCase(x)).join(',');
|
||||
codes.push(`${tab}${precode} { ${args} }${rootEnd}`);
|
||||
}
|
||||
|
||||
return codes;
|
||||
}
|
||||
|
||||
private createCallExpression(tab: string, callExpression: CallExpression, rootEnd: string = ';'): string[] {
|
||||
const codes: string[] = [];
|
||||
const multiLine = callExpression.paramaters.findIndex(x => !isString(x)) >= 0;
|
||||
const name = castFunName(callExpression.funcName);
|
||||
const precode = callExpression.assignment ?
|
||||
`var ${callExpression.assignment} = ${name}` :
|
||||
`${callExpression.returnFlag}${name}`;
|
||||
if (!multiLine) {
|
||||
const args = callExpression.paramaters.map(x => castParameter(x)).join(', ');
|
||||
codes.push(`${tab}${precode}(${args})${rootEnd}`);
|
||||
} else {
|
||||
codes.push(`${tab}${precode}(`);
|
||||
const tab2 = `${tab} `;
|
||||
callExpression.paramaters.forEach((x, i) => {
|
||||
const end = i === callExpression.paramaters.length - 1 ? `)${rootEnd}` : ',';
|
||||
if (isString(x)) {
|
||||
codes.push(`${tab2}${castParameter(x)}${end}`);
|
||||
} else if ('kind' in x) {
|
||||
switch (x.kind) {
|
||||
case CsKinds.ObjectExpression:
|
||||
const objCodes = this.createObjectExpression(tab2, x as ObjectExpression, end, '');
|
||||
codes.push(...objCodes);
|
||||
break;
|
||||
case CsKinds.Func:
|
||||
const funcCodes = (x as CsFunction).format(tab + ' ', end);
|
||||
codes.push(...funcCodes);
|
||||
break;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
return codes;
|
||||
}
|
||||
|
||||
private createVariableDeclaration(tab: string, declaration: VariableDeclaration): string[] {
|
||||
const codes: string[] = [];
|
||||
if (isString(declaration.value)) {
|
||||
codes.push(`${tab}var ${declaration.name} = ${castFieldValue(declaration.value as string)};`);
|
||||
} else {
|
||||
const value = declaration.value as any;
|
||||
switch (value.kind) {
|
||||
case CsKinds.ObjectExpression:
|
||||
const objCodes = this.createObjectExpression(tab, value as ObjectExpression, ';', '');
|
||||
codes.push(`${tab}var ${declaration.name} = ${objCodes[0].trimStart()}`);
|
||||
codes.push(...objCodes.slice(1));
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
return codes;
|
||||
}
|
||||
}
|
||||
|
||||
export class CsClass {
|
||||
name: string;
|
||||
access: string;
|
||||
partial: boolean;
|
||||
props: CsProperty[] = [];
|
||||
funcs: CsFunction[] = [];
|
||||
variables: CsVariable[] = [];
|
||||
|
||||
constructor(
|
||||
name: string,
|
||||
access: string = 'public',
|
||||
partial: boolean = false
|
||||
) {
|
||||
this.name = name;
|
||||
this.access = access;
|
||||
this.partial = partial;
|
||||
}
|
||||
|
||||
public addProperty(name: string, type: string) {
|
||||
this.props.push(new CsProperty(name, type));
|
||||
}
|
||||
|
||||
public addFunction(func: CsFunction) {
|
||||
this.funcs.push(func);
|
||||
}
|
||||
|
||||
public addVariable(variable: CsVariable) {
|
||||
this.variables.push(variable);
|
||||
}
|
||||
|
||||
public format(tab: string): string[] {
|
||||
const codes: string[] = [];
|
||||
codes.push(`${tab}${this.access}${this.partial ? ' partial' : ''} class ${this.name}`);
|
||||
codes.push(`${tab}{`);
|
||||
|
||||
this.variables.forEach(x => {
|
||||
codes.push(...x.format(tab + tab));
|
||||
codes.push('');
|
||||
});
|
||||
|
||||
this.props.forEach(x => {
|
||||
codes.push(...x.format(tab + tab));
|
||||
codes.push('');
|
||||
});
|
||||
|
||||
this.funcs.forEach(x => {
|
||||
codes.push(...x.format(tab + tab));
|
||||
codes.push('');
|
||||
});
|
||||
|
||||
codes.push(`${tab}}`);
|
||||
return codes;
|
||||
}
|
||||
}
|
||||
|
||||
export class CsBuilder {
|
||||
options: CsOptions;
|
||||
classes: { [key: string]: CsClass } = {};
|
||||
|
||||
constructor(options: CsOptions) {
|
||||
this.options = options;
|
||||
init(options);
|
||||
}
|
||||
|
||||
public addClass(name: string): CsClass {
|
||||
return this.classes[name] = new CsClass(name);
|
||||
}
|
||||
|
||||
public addClassProperty(className: string, propName: string, propType: string) {
|
||||
this.classes[className].addProperty(propName, propType);
|
||||
}
|
||||
|
||||
public addFunction(func: CsFunction) {
|
||||
const defaultCls = this.getDefaultClass();
|
||||
defaultCls.addFunction(func);
|
||||
}
|
||||
|
||||
public addVariable(variable: CsVariable) {
|
||||
const defaultCls = this.getDefaultClass();
|
||||
defaultCls.addVariable(variable);
|
||||
}
|
||||
|
||||
public format(): string {
|
||||
const codes: string[] = [];
|
||||
if (this.options.usings.length > 0) {
|
||||
codes.push(...this.options.usings);
|
||||
codes.push('');
|
||||
}
|
||||
codes.push(`namespace ${this.options.namespace}`);
|
||||
codes.push(`{`);
|
||||
for (const cls in this.classes) {
|
||||
codes.push(...this.classes[cls].format(this.options.defaultTab));
|
||||
codes.push('');
|
||||
}
|
||||
codes.push(`}`);
|
||||
this.trasnform(codes);
|
||||
return codes.join('\r\n');
|
||||
}
|
||||
|
||||
private getDefaultClass(): CsClass {
|
||||
if (this.options.defaultClass in this.classes) {
|
||||
return this.classes[this.options.defaultClass];
|
||||
}
|
||||
return this.classes[this.options.defaultClass] = new CsClass(this.options.defaultClass);
|
||||
}
|
||||
|
||||
private trasnform(codes: string[]) {
|
||||
for (let i = 0; i < codes.length; i++) {
|
||||
if (!this.options.transforms) continue;
|
||||
let code = codes[i];
|
||||
if (code == '') continue;
|
||||
const item = this.options.transforms.find(x => code.includes(x.source));
|
||||
if (!item) continue;
|
||||
codes[i] = code.replace(item.source, item.target);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
## Css Migrator
|
||||
Migrator can migrate antd style to v5.
|
||||
|
||||
### Usage
|
||||
In the root dir, exec migrate command.
|
||||
```sh
|
||||
npm run migrate
|
||||
```
|
||||
|
||||
### Config
|
||||
```ts
|
||||
const config = {
|
||||
version: '5.5.0',
|
||||
gitHash: '1a2906941f551028677379ba3c47fbe4e9969a2f',
|
||||
remotePath: 'https://github.com/ant-design/ant-design.git',
|
||||
localPath: '../ant-design'
|
||||
}
|
||||
```
|
||||
|
||||
| Property | Description |
|
||||
| ---------- | --------------------------------------------------- |
|
||||
| version | release version of antd, for display purposes only. |
|
||||
| gitHash | git hash of specified version. |
|
||||
| remotePath | antd git url. |
|
||||
| localPath | local path to save antd code. |
|
||||
|
||||
If you want to specify the version, change the githash. Migrator will check out the code specified githash in the configuration.
|
||||
|
||||
### Cssincs Converter
|
||||
Converter use ast to parse ts code, and convert it to csharp. You can check the ast with [ast viewer](https://ts-ast-viewer.com).
|
||||
|
|
@ -0,0 +1,331 @@
|
|||
import * as ts from 'typescript';
|
||||
import { ArrayExpression, CallExpression, CsBuilder, CsFunction, CsKinds, CsOptions, CsVariable, ObjectBinding, ObjectExpression, ParameterType } from "./CsBuilder";
|
||||
|
||||
type Context<T> = {
|
||||
node: T;
|
||||
sourceFile: ts.SourceFile;
|
||||
typeChecker: ts.TypeChecker;
|
||||
csBuilder: CsBuilder;
|
||||
}
|
||||
|
||||
function convertInterface(context: Context<ts.InterfaceDeclaration>) {
|
||||
// parse class name
|
||||
const name = context.node.name?.text;
|
||||
context.csBuilder.addClass(name);
|
||||
// parse properties
|
||||
context.node.members.forEach(x => {
|
||||
const memberName = x.name?.getText() || '';
|
||||
const memberType = context.typeChecker.getTypeAtLocation(x);
|
||||
const typeName = context.typeChecker.typeToString(memberType);
|
||||
context.csBuilder.addClassProperty(name, memberName, typeName);
|
||||
});
|
||||
}
|
||||
|
||||
function convertType(context: Context<ts.TypeAliasDeclaration>) {
|
||||
// parse class name
|
||||
const name = context.node.name.getText();
|
||||
context.csBuilder.addClass(name);
|
||||
// parse properties
|
||||
(context.node.type as any)?.types?.forEach((type: any) => {
|
||||
if (type.kind === ts.SyntaxKind.TypeLiteral) {
|
||||
(type.members as ts.NodeArray<ts.TypeElement>).forEach((x) => {
|
||||
const memberName = x.name?.getText() || '';
|
||||
const memberType = context.typeChecker.getTypeAtLocation(x);
|
||||
const typeName = context.typeChecker.typeToString(memberType);
|
||||
context.csBuilder.addClassProperty(name, memberName, typeName);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function createObjectExpression(type: string, expression: ts.ObjectLiteralExpression, args?: string[]): ObjectExpression {
|
||||
const objectExpression: ObjectExpression = {
|
||||
kind: CsKinds.ObjectExpression,
|
||||
type: type,
|
||||
properties: [],
|
||||
args: args
|
||||
};
|
||||
|
||||
const recursion = (objectExp: ObjectExpression, properties: ts.NodeArray<ts.ObjectLiteralElementLike>) => {
|
||||
for (const item of properties) {
|
||||
switch (item.kind) {
|
||||
case ts.SyntaxKind.PropertyAssignment:
|
||||
const initializer = (item as any).initializer;
|
||||
const fieldName = item.name?.getText() || '';
|
||||
let fieldValue: string | ObjectExpression | ArrayExpression | CallExpression = '';
|
||||
switch (initializer.kind) {
|
||||
case ts.SyntaxKind.Identifier:
|
||||
fieldValue = initializer.getText();
|
||||
break;
|
||||
case ts.SyntaxKind.ObjectLiteralExpression:
|
||||
fieldValue = { type: type, properties: [] }
|
||||
recursion(fieldValue, initializer.properties);
|
||||
break;
|
||||
case ts.SyntaxKind.CallExpression:
|
||||
fieldValue = createCallExpression('', '', initializer as ts.CallExpression);
|
||||
break;
|
||||
case ts.SyntaxKind.ArrayLiteralExpression:
|
||||
fieldValue = createArrayExpression('', initializer.elements);
|
||||
break;
|
||||
default:
|
||||
fieldValue = initializer.getText() as string;
|
||||
break;
|
||||
}
|
||||
objectExp.properties.push({ fieldName, fieldValue });
|
||||
break;
|
||||
case ts.SyntaxKind.ShorthandPropertyAssignment:
|
||||
const shortName = item.name?.getText() || '';
|
||||
objectExp.properties.push({ fieldName: shortName, fieldValue: shortName });
|
||||
break;
|
||||
case ts.SyntaxKind.SpreadAssignment:
|
||||
switch (item.expression.kind) {
|
||||
case ts.SyntaxKind.CallExpression:
|
||||
const callExp = createCallExpression('', '', item.expression as ts.CallExpression);
|
||||
objectExp.properties.push({ fieldName: `['...']`, fieldValue: callExp });
|
||||
break;
|
||||
default:
|
||||
const exp = item.expression.getText();
|
||||
objectExp.properties.push({ fieldName: `['...']`, fieldValue: exp });
|
||||
break;
|
||||
}
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
}
|
||||
};
|
||||
|
||||
recursion(objectExpression, expression.properties);
|
||||
return objectExpression;
|
||||
}
|
||||
|
||||
function createArrayExpression(type: string, elements: any[]) {
|
||||
const arrayExpression: ArrayExpression = {
|
||||
kind: CsKinds.ArrayExpression,
|
||||
type: type,
|
||||
items: []
|
||||
}
|
||||
elements.forEach((x: any) => {
|
||||
switch (x.kind) {
|
||||
case ts.SyntaxKind.ObjectLiteralExpression:
|
||||
const obj = createObjectExpression('', x);
|
||||
arrayExpression.items.push(obj);
|
||||
break;
|
||||
default:
|
||||
arrayExpression.items.push(x.getText());
|
||||
break;
|
||||
}
|
||||
});
|
||||
return arrayExpression;
|
||||
}
|
||||
|
||||
function createObjectBinding(initializer: string, elements: any[]): ObjectBinding {
|
||||
const objectBinding: ObjectBinding = {
|
||||
kind: CsKinds.ObjectBinding,
|
||||
initializer: initializer || '',
|
||||
bindings: [],
|
||||
};
|
||||
elements.forEach((el: any) => {
|
||||
objectBinding.bindings.push({ name: el.name.getText(), propertyName: el.propertyName?.getText() });
|
||||
});
|
||||
|
||||
return objectBinding;
|
||||
}
|
||||
|
||||
function createCallExpression(assignment: string, returnType: string, callExp: ts.CallExpression, returnFlag: string = ''): CallExpression {
|
||||
const callExpression: CallExpression = {
|
||||
kind: CsKinds.CallExpression,
|
||||
funcName: callExp.expression.getText(),
|
||||
assignment: assignment,
|
||||
paramaters: [],
|
||||
returnFlag: returnFlag
|
||||
};
|
||||
callExp.arguments.forEach(arg => {
|
||||
switch (arg.kind) {
|
||||
case ts.SyntaxKind.Identifier:
|
||||
callExpression.paramaters.push(arg.getText());
|
||||
break;
|
||||
case ts.SyntaxKind.ObjectLiteralExpression:
|
||||
const object = createObjectExpression(returnType, arg as ts.ObjectLiteralExpression);
|
||||
callExpression.paramaters.push(object);
|
||||
break;
|
||||
case ts.SyntaxKind.ArrowFunction:
|
||||
const func = createArrowFunction('', arg as ts.ArrowFunction, CsKinds.Func);
|
||||
callExpression.paramaters.push(func);
|
||||
break;
|
||||
default:
|
||||
callExpression.paramaters.push(arg.getText());
|
||||
break;
|
||||
}
|
||||
});
|
||||
return callExpression;
|
||||
}
|
||||
|
||||
function createArrowFunction(funcName: string, arrowFunc: ts.ArrowFunction, kind: CsKinds = CsKinds.Method): CsFunction {
|
||||
// const arrowFunc = declaration.initializer as ts.ArrowFunction;
|
||||
// const funcName = declaration.name.getText();
|
||||
const returnType = arrowFunc.type?.getText() || '';
|
||||
const parameters: ParameterType[] = []
|
||||
arrowFunc.parameters.forEach(x => {
|
||||
switch (x.name.kind) {
|
||||
case ts.SyntaxKind.ObjectBindingPattern:
|
||||
const bindingPattern = x.name as ts.ObjectBindingPattern;
|
||||
const p: ParameterType = { name: 'args', type: '', bindings: [] };
|
||||
bindingPattern.elements.forEach(y => {
|
||||
p.bindings?.push({ name: y.name.getText(), propertyName: '' });
|
||||
});
|
||||
parameters.push(p);
|
||||
break;
|
||||
default:
|
||||
parameters.push({ name: x.name.getText(), type: x.type?.getText() || '', defaultValue: x.initializer?.getText() });
|
||||
break;
|
||||
}
|
||||
});
|
||||
const funcBody = arrowFunc.body as any;
|
||||
const statements: any[] = []
|
||||
if (funcBody.kind === ts.SyntaxKind.CallExpression) {
|
||||
statements.push(createCallExpression('', '', funcBody, 'return '));
|
||||
}
|
||||
// if func body is expression
|
||||
else if (funcBody.expression) {
|
||||
// Object Expression, eg: () => {};
|
||||
switch (funcBody.expression.kind) {
|
||||
case ts.SyntaxKind.ObjectLiteralExpression:
|
||||
statements.push(createObjectExpression(returnType, funcBody.expression));
|
||||
break;
|
||||
}
|
||||
}
|
||||
// if func body is statement
|
||||
else if (funcBody.statements) {
|
||||
funcBody.statements.forEach((x: any) => {
|
||||
switch (x.kind) {
|
||||
case ts.SyntaxKind.VariableStatement:
|
||||
const declaration = (x as ts.VariableStatement).declarationList.declarations[0];
|
||||
if (declaration.name.kind === ts.SyntaxKind.ObjectBindingPattern) {
|
||||
const initializerName = declaration.initializer?.getText() || '';
|
||||
const objectBinding = createObjectBinding(initializerName, (declaration.name as any).elements)
|
||||
statements.push(objectBinding);
|
||||
} else if (declaration.initializer?.kind === ts.SyntaxKind.CallExpression) {
|
||||
const assignment = declaration.name.getText();
|
||||
const callExp = declaration.initializer as ts.CallExpression;
|
||||
statements.push(createCallExpression(assignment, returnType, callExp));
|
||||
} else if (declaration.initializer?.kind === ts.SyntaxKind.ArrowFunction) {
|
||||
const name = declaration.name.getText();
|
||||
const arrFunc = createArrowFunction(name, declaration.initializer as ts.ArrowFunction, CsKinds.Func);
|
||||
statements.push(arrFunc);
|
||||
} else if (declaration.initializer?.kind === ts.SyntaxKind.ObjectLiteralExpression) {
|
||||
const objExp = createObjectExpression('', declaration.initializer as ts.ObjectLiteralExpression);
|
||||
statements.push({ kind: CsKinds.VariableDeclaration, name: declaration.name.getText(), value: objExp });
|
||||
} else {
|
||||
statements.push({ kind: CsKinds.VariableDeclaration, name: declaration.name.getText(), value: declaration.initializer?.getText() });
|
||||
}
|
||||
break;
|
||||
case ts.SyntaxKind.ReturnStatement:
|
||||
const rs = x as ts.ReturnStatement;
|
||||
if (rs.expression?.kind === ts.SyntaxKind.ObjectLiteralExpression) {
|
||||
const objectExpression = createObjectExpression(returnType, rs.expression as ts.ObjectLiteralExpression);
|
||||
statements.push(objectExpression);
|
||||
} else if (rs.expression?.kind === ts.SyntaxKind.ArrayLiteralExpression) {
|
||||
statements.push(createArrayExpression(returnType, (rs.expression as any).elements));
|
||||
} else if (rs.expression?.kind === ts.SyntaxKind.CallExpression) {
|
||||
statements.push(createCallExpression('', '', rs.expression as ts.CallExpression, 'return '));
|
||||
}
|
||||
break;
|
||||
}
|
||||
});
|
||||
}
|
||||
else if (funcBody.elements) {
|
||||
statements.push(createArrayExpression(returnType, funcBody.elements));
|
||||
}
|
||||
return new CsFunction(funcName, parameters, returnType, { statements }, kind);
|
||||
}
|
||||
|
||||
function convertVariableStatement(context: Context<ts.VariableStatement>) {
|
||||
const declaration = context.node.declarationList.declarations[0];
|
||||
switch (declaration.initializer?.kind) {
|
||||
case ts.SyntaxKind.ArrowFunction:
|
||||
const funcName = declaration.name.getText();
|
||||
const func = createArrowFunction(funcName, declaration.initializer as ts.ArrowFunction);
|
||||
context.csBuilder.addFunction(func);
|
||||
break;
|
||||
case ts.SyntaxKind.NewExpression:
|
||||
const name = declaration.name.getText();
|
||||
const initializer = declaration.initializer as ts.NewExpression;
|
||||
const type = initializer.expression.getText();
|
||||
let value: any;
|
||||
let args: string[] = [];
|
||||
initializer.arguments?.forEach(x => {
|
||||
if (x.kind === ts.SyntaxKind.ObjectLiteralExpression) {
|
||||
value = createObjectExpression(type, x as ts.ObjectLiteralExpression, args);
|
||||
} else if (x.kind === ts.SyntaxKind.StringLiteral) {
|
||||
args.push(x.getText());
|
||||
}
|
||||
});
|
||||
context.csBuilder.addVariable(new CsVariable(name, type, value));
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function convertExportAssignment(context: Context<ts.ExportAssignment>) {
|
||||
switch (context.node.expression.kind) {
|
||||
case ts.SyntaxKind.CallExpression:
|
||||
const callExp = context.node.expression as ts.CallExpression;
|
||||
const funcName = callExp.expression.getText();
|
||||
callExp.arguments.forEach(x => {
|
||||
if (x.kind === ts.SyntaxKind.ArrowFunction) {
|
||||
const func = createArrowFunction(funcName, x as ts.ArrowFunction);
|
||||
context.csBuilder.addFunction(func);
|
||||
}
|
||||
});
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function convertFunctionDeclaration(context: Context<ts.FunctionDeclaration>) {
|
||||
const funcName = context.node.name?.getText() || '';
|
||||
const func = createArrowFunction(funcName, context.node as any);
|
||||
context.csBuilder.addFunction(func);
|
||||
}
|
||||
|
||||
export function convert(files: string[], csOptions: CsOptions): string {
|
||||
const options: ts.CompilerOptions = {};
|
||||
let program = ts.createProgram(files, options);
|
||||
const context = {
|
||||
typeChecker: program.getTypeChecker(),
|
||||
csBuilder: new CsBuilder(csOptions),
|
||||
} as any;
|
||||
|
||||
for (const file of files) {
|
||||
const sourceFile = program.getSourceFile(file) as any;
|
||||
context.sourceFile = sourceFile;
|
||||
ts.forEachChild(sourceFile, (node: ts.Node) => {
|
||||
// interface
|
||||
if (ts.isInterfaceDeclaration(node)) {
|
||||
convertInterface({ ...context, node, });
|
||||
}
|
||||
// type
|
||||
else if (ts.isTypeAliasDeclaration(node)) {
|
||||
convertType({ ...context, node, });
|
||||
}
|
||||
// variable statement
|
||||
else if (ts.isVariableStatement(node)) {
|
||||
convertVariableStatement({ ...context, node, });
|
||||
}
|
||||
// export assignment
|
||||
else if (ts.isExportAssignment(node)) {
|
||||
convertExportAssignment({ ...context, node });
|
||||
}
|
||||
// function declaration
|
||||
else if (ts.isFunctionDeclaration(node)) {
|
||||
convertFunctionDeclaration({ ...context, node });
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return context.csBuilder.format();
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,198 @@
|
|||
import { CsOptions, TypeMap } from "./CsBuilder";
|
||||
import * as fs from 'fs';
|
||||
import * as path from 'path';
|
||||
|
||||
let typeMap: { [key: string]: string } = {};
|
||||
let options: CsOptions | undefined = undefined;
|
||||
let emptyMap: { [key: string]: number } = {};
|
||||
let htmlTag: { [key: string]: string } = {
|
||||
'a': `["a"]`,
|
||||
'ol': `["ol"]`,
|
||||
'th': `["th"]`,
|
||||
'img': `["img"]`,
|
||||
'li': `["li"]`,
|
||||
'button': `["button"]`,
|
||||
'svg': `["svg"]`,
|
||||
'td': `["td"]`,
|
||||
'ul': `["ul"]`,
|
||||
'table': `["table"]`,
|
||||
}
|
||||
|
||||
export const spFieldName = '_skip_check_';
|
||||
|
||||
export const toPascalCase = (str?: string): string => {
|
||||
if (!str) return str || '';
|
||||
if (!isString(str)) return str;
|
||||
return str.charAt(0).toUpperCase() + str.slice(1);
|
||||
}
|
||||
|
||||
export const isString = (obj: any): boolean => {
|
||||
return typeof obj === 'string' || obj instanceof String;
|
||||
}
|
||||
|
||||
export const init = (ops: CsOptions) => {
|
||||
emptyMap = {};
|
||||
options = { ...ops };
|
||||
typeMap = {
|
||||
'number': 'int',
|
||||
'string': 'string',
|
||||
'boolean': 'bool',
|
||||
// todo: add union type support.
|
||||
'string | number': 'string',
|
||||
'string | false': 'string',
|
||||
}
|
||||
if (options.typeMap) {
|
||||
for (const item of options.typeMap) {
|
||||
if (item.ranges || item.includes) {
|
||||
if (item.ranges && item.ranges.length > 0) {
|
||||
for (const range of item.ranges) {
|
||||
for (let i = range[0]; i <= range[1]; i++) {
|
||||
typeMap[`${item.from}_${i}`] = item.to;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
if (item.includes && item.includes.length > 0) {
|
||||
for (const inc of item.includes) {
|
||||
if (isString(inc)) {
|
||||
typeMap[inc] = item.to;
|
||||
} else {
|
||||
typeMap[`${item.from}_${inc}`] = item.to;
|
||||
}
|
||||
}
|
||||
}
|
||||
} else {
|
||||
typeMap[item.from] = item.to;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const castType = (tsType: string, checker?: string[]): string => {
|
||||
if (tsType === 'CSSObject' && checker && checker.includes(spFieldName)) {
|
||||
return 'PropertySkip';
|
||||
}
|
||||
|
||||
if (typeMap[tsType]) {
|
||||
return typeMap[tsType];
|
||||
}
|
||||
return tsType;
|
||||
}
|
||||
|
||||
export const castFieldName = (name: string): string => {
|
||||
if (name in htmlTag) {
|
||||
return htmlTag[name];
|
||||
}
|
||||
|
||||
let str = name
|
||||
.replace(/\$/g, '') // 剔除$
|
||||
.replace(/'/g, '"') // 单引号转双引号
|
||||
.replace(/`/g, '"');
|
||||
const char = str.charAt(0);
|
||||
if (/[a-z]/.test(char)) {
|
||||
str = str.replace(char, char.toUpperCase());
|
||||
} else if (char === `"`) {
|
||||
str = `[${str}]`;
|
||||
}
|
||||
if (/\r|\n/.test(name)) {
|
||||
str = str.replace(/\r|\n/g, '').replace(/\s/g, '');
|
||||
}
|
||||
str = str.replace(/("[\s\S]*{[\s\S]+}[\s\S]*")/, '$$$1');
|
||||
|
||||
if (str.includes(spFieldName))
|
||||
str = str.replace(spFieldName, 'SkipCheck');
|
||||
|
||||
for (const match of str.matchAll(/(\w+)\.(\w+)/g)) {
|
||||
if (match[2]) {
|
||||
str = str.replace(match[2], toPascalCase(match[2]));
|
||||
}
|
||||
}
|
||||
str = str.replace(/"(\w+)"/g, `\\"$1\\"`);
|
||||
|
||||
|
||||
return str;
|
||||
}
|
||||
|
||||
export const castFieldValue = (value: string) => {
|
||||
if (value.includes('a0')) return value;
|
||||
let str = value
|
||||
.replace(/\$/g, '') // 剔除$
|
||||
.replace(/"(.*)"/g, `\\"$1\\"`)
|
||||
.replace(/'/g, '"') // 单引号转双引号
|
||||
|
||||
if (str.includes('`')) {
|
||||
str = str.replace('`', `@$"`).replace('`', `"`);
|
||||
}
|
||||
|
||||
if (/\w+\(.+\)/.test(str)) {
|
||||
str = toPascalCase(str);
|
||||
}
|
||||
|
||||
if (/^-*\d+\.\d+$/.test(str)) {
|
||||
str = str + 'f';
|
||||
}
|
||||
|
||||
for (const match of str.matchAll(/(\w+)\.(\w+)/g)) {
|
||||
if (match[2]) {
|
||||
str = str.replace(match[2], toPascalCase(match[2]));
|
||||
}
|
||||
}
|
||||
|
||||
if (str.includes('||')) {
|
||||
str = str.substring(0, str.indexOf('|')).trimEnd();
|
||||
}
|
||||
return str;
|
||||
}
|
||||
|
||||
export const castParameter = (value: string) => {
|
||||
let str = value
|
||||
.replace(/\$/g, '') // 剔除$
|
||||
.replace(/'/g, '"'); // 单引号转双引号
|
||||
|
||||
if (str.includes('`')) {
|
||||
str = str.replace('`', `$"`).replace('`', `"`);
|
||||
}
|
||||
for (const match of str.matchAll(/(\w+)\.(\w+)/g)) {
|
||||
if (match[2]) {
|
||||
str = str.replace(match[2], toPascalCase(match[2]));
|
||||
}
|
||||
}
|
||||
return str;
|
||||
}
|
||||
|
||||
export const castFunName = (name: string) => {
|
||||
let str = toPascalCase(name);
|
||||
for (const match of str.matchAll(/(\w+)\.(\w+)/g)) {
|
||||
if (match[2]) {
|
||||
str = str.replace(match[2], toPascalCase(match[2]));
|
||||
}
|
||||
}
|
||||
return str;
|
||||
}
|
||||
|
||||
export const unknown = () => {
|
||||
const key = 'Unknown';
|
||||
if (!emptyMap[key]) {
|
||||
emptyMap[key] = 0;
|
||||
}
|
||||
const index = emptyMap[key] = emptyMap[key] + 1;
|
||||
return `${key}_${index}`;
|
||||
}
|
||||
|
||||
export const defaultValue = (param: string, value?: string) => {
|
||||
if (value === undefined) {
|
||||
return param;
|
||||
}
|
||||
|
||||
let str = value.replace(/'/g, '"');
|
||||
return `${param} = ${str}`;
|
||||
}
|
||||
|
||||
export const writeAllText = (filePath: string, content: string) => {
|
||||
const distPath = path.resolve(filePath);
|
||||
const dir = path.dirname(distPath);
|
||||
if (!fs.existsSync(dir)) {
|
||||
fs.mkdirSync(dir, { recursive: true });
|
||||
}
|
||||
fs.writeFileSync(distPath, content, 'utf8');
|
||||
}
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
import { convert } from "./TsConverter";
|
||||
import * as fs from 'fs';
|
||||
import * as path from 'path';
|
||||
import { components } from "./Components";
|
||||
import { writeAllText } from "./Util";
|
||||
import { simpleGit, SimpleGit } from 'simple-git';
|
||||
|
||||
const config = {
|
||||
version: '5.5.0',
|
||||
gitHash: '1a2906941f551028677379ba3c47fbe4e9969a2f',
|
||||
remotePath: 'https://github.com/ant-design/ant-design.git',
|
||||
localPath: '../ant-design-5.5.0'
|
||||
}
|
||||
|
||||
/**
|
||||
* git clone ant-design code to local dir, if local dir not exists.
|
||||
*/
|
||||
async function clone(): Promise<void> {
|
||||
const localPath = path.resolve(config.localPath);
|
||||
let git: SimpleGit;
|
||||
if (!fs.existsSync(localPath)) {
|
||||
fs.mkdirSync(localPath, { recursive: true });
|
||||
git = simpleGit(localPath);
|
||||
console.log(`git clone: ${config.remotePath}`);
|
||||
await git.clone(config.remotePath, localPath);
|
||||
} else {
|
||||
git = simpleGit(localPath);
|
||||
}
|
||||
const isRepo = await git.checkIsRepo();
|
||||
if (!isRepo) return;
|
||||
const commitHash = await git.revparse('HEAD');
|
||||
console.log(`Current commithash: ${commitHash}`);
|
||||
if (commitHash !== config.gitHash) {
|
||||
// checkout specify commithash
|
||||
console.log(`Checkout commithash: ${config.gitHash}`);
|
||||
await git.checkout(config.gitHash);
|
||||
}
|
||||
console.log(`clone ant-design ${config.version} code ok.`);
|
||||
}
|
||||
|
||||
/**
|
||||
* remove less files.
|
||||
*/
|
||||
function clean() {
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* convert ts style code to cs code.
|
||||
*/
|
||||
function converTsStyle() {
|
||||
components.forEach(component => {
|
||||
console.log(`Migrate component ${component.name} style.`);
|
||||
const src = component.src.map(x => path.resolve(path.join(config.localPath, x)));
|
||||
const dist = path.resolve(component.dist);
|
||||
const content = convert(src, component.csOptions);
|
||||
writeAllText(dist, content);
|
||||
});
|
||||
console.log(`Migrate ok.`);
|
||||
}
|
||||
|
||||
async function migrate() {
|
||||
await clone();
|
||||
converTsStyle();
|
||||
clean();
|
||||
}
|
||||
|
||||
migrate();
|
||||
Загрузка…
Ссылка в новой задаче