|
|
|
@ -1,16 +1,16 @@ |
|
|
|
import type { CSSObject } from '@ant-design/cssinjs'; |
|
|
|
import { resetComponent } from '../../style'; |
|
|
|
import type { FullToken, GenerateStyle } from '../../theme/internal'; |
|
|
|
import { genComponentStyleHook, mergeToken } from '../../theme/internal'; |
|
|
|
import { resetComponent } from '../../style'; |
|
|
|
|
|
|
|
export type ComponentToken = {}; |
|
|
|
export type ComponentToken = { |
|
|
|
starColor: string; |
|
|
|
starSize: number; |
|
|
|
starHoverScale: CSSObject['transform']; |
|
|
|
starBg: string; |
|
|
|
}; |
|
|
|
|
|
|
|
interface RateToken extends FullToken<'Rate'> { |
|
|
|
rateStarColor: string; |
|
|
|
rateStarSize: number; |
|
|
|
rateStarHoverScale: CSSObject['transform']; |
|
|
|
defaultColor: string; |
|
|
|
} |
|
|
|
interface RateToken extends FullToken<'Rate'> {} |
|
|
|
|
|
|
|
const genRateStarStyle: GenerateStyle<RateToken, CSSObject> = (token) => { |
|
|
|
const { componentCls } = token; |
|
|
|
@ -30,7 +30,7 @@ const genRateStarStyle: GenerateStyle<RateToken, CSSObject> = (token) => { |
|
|
|
transition: `all ${token.motionDurationMid}, outline 0s`, |
|
|
|
|
|
|
|
'&:hover': { |
|
|
|
transform: token.rateStarHoverScale, |
|
|
|
transform: token.starHoverScale, |
|
|
|
}, |
|
|
|
|
|
|
|
'&:focus': { |
|
|
|
@ -38,13 +38,13 @@ const genRateStarStyle: GenerateStyle<RateToken, CSSObject> = (token) => { |
|
|
|
}, |
|
|
|
|
|
|
|
'&:focus-visible': { |
|
|
|
outline: `${token.lineWidth}px dashed ${token.rateStarColor}`, |
|
|
|
transform: token.rateStarHoverScale, |
|
|
|
outline: `${token.lineWidth}px dashed ${token.starColor}`, |
|
|
|
transform: token.starHoverScale, |
|
|
|
}, |
|
|
|
}, |
|
|
|
|
|
|
|
'&-first, &-second': { |
|
|
|
color: token.defaultColor, |
|
|
|
color: token.starBg, |
|
|
|
transition: `all ${token.motionDurationMid}`, |
|
|
|
userSelect: 'none', |
|
|
|
|
|
|
|
@ -90,8 +90,8 @@ const genRateStyle: GenerateStyle<RateToken> = (token) => { |
|
|
|
display: 'inline-block', |
|
|
|
margin: 0, |
|
|
|
padding: 0, |
|
|
|
color: token.rateStarColor, |
|
|
|
fontSize: token.rateStarSize, |
|
|
|
color: token.starColor, |
|
|
|
fontSize: token.starSize, |
|
|
|
lineHeight: 'unset', |
|
|
|
listStyle: 'none', |
|
|
|
outline: 'none', |
|
|
|
@ -122,14 +122,16 @@ const genRateStyle: GenerateStyle<RateToken> = (token) => { |
|
|
|
}; |
|
|
|
|
|
|
|
// ============================== Export ==============================
|
|
|
|
export default genComponentStyleHook('Rate', (token) => { |
|
|
|
const { colorFillContent } = token; |
|
|
|
|
|
|
|
const rateToken = mergeToken<RateToken>(token, { |
|
|
|
rateStarColor: token.yellow6, |
|
|
|
rateStarSize: token.controlHeightLG * 0.5, |
|
|
|
rateStarHoverScale: 'scale(1.1)', |
|
|
|
defaultColor: colorFillContent, |
|
|
|
}); |
|
|
|
return [genRateStyle(rateToken)]; |
|
|
|
}); |
|
|
|
export default genComponentStyleHook( |
|
|
|
'Rate', |
|
|
|
(token) => { |
|
|
|
const rateToken = mergeToken<RateToken>(token, {}); |
|
|
|
return [genRateStyle(rateToken)]; |
|
|
|
}, |
|
|
|
(token) => ({ |
|
|
|
starColor: token.yellow6, |
|
|
|
starSize: token.controlHeightLG * 0.5, |
|
|
|
starHoverScale: 'scale(1.1)', |
|
|
|
starBg: token.colorFillContent, |
|
|
|
}), |
|
|
|
); |
|
|
|
|
muxin
2 years ago
GitHub