ant-design-vue
Version:
An enterprise-class UI design language and Vue-based implementation
104 lines • 2.87 kB
JavaScript
import _extends from "@babel/runtime/helpers/esm/extends";
import { genComponentStyleHook, mergeToken } from '../../theme/internal';
import { resetComponent } from '../../style';
const genRateStarStyle = token => {
const {
componentCls
} = token;
return {
[`${componentCls}-star`]: {
position: 'relative',
display: 'inline-block',
color: 'inherit',
cursor: 'pointer',
'&:not(:last-child)': {
marginInlineEnd: token.marginXS
},
'> div': {
transition: `all ${token.motionDurationMid}, outline 0s`,
'&:hover': {
transform: token.rateStarHoverScale
},
'&:focus': {
outline: 0
},
'&:focus-visible': {
outline: `${token.lineWidth}px dashed ${token.rateStarColor}`,
transform: token.rateStarHoverScale
}
},
'&-first, &-second': {
color: token.defaultColor,
transition: `all ${token.motionDurationMid}`,
userSelect: 'none',
[token.iconCls]: {
verticalAlign: 'middle'
}
},
'&-first': {
position: 'absolute',
top: 0,
insetInlineStart: 0,
width: '50%',
height: '100%',
overflow: 'hidden',
opacity: 0
},
[`&-half ${componentCls}-star-first, &-half ${componentCls}-star-second`]: {
opacity: 1
},
[`&-half ${componentCls}-star-first, &-full ${componentCls}-star-second`]: {
color: 'inherit'
}
}
};
};
const genRateRtlStyle = token => ({
[`&-rtl${token.componentCls}`]: {
direction: 'rtl'
}
});
const genRateStyle = token => {
const {
componentCls
} = token;
return {
[componentCls]: _extends(_extends(_extends(_extends(_extends({}, resetComponent(token)), {
display: 'inline-block',
margin: 0,
padding: 0,
color: token.rateStarColor,
fontSize: token.rateStarSize,
lineHeight: 'unset',
listStyle: 'none',
outline: 'none',
// disable styles
[`&-disabled${componentCls} ${componentCls}-star`]: {
cursor: 'default',
'&:hover': {
transform: 'scale(1)'
}
}
}), genRateStarStyle(token)), {
// text styles
[`+ ${componentCls}-text`]: {
display: 'inline-block',
marginInlineStart: token.marginXS,
fontSize: token.fontSize
}
}), genRateRtlStyle(token))
};
};
// ============================== Export ==============================
export default genComponentStyleHook('Rate', token => {
const {
colorFillContent
} = token;
const rateToken = mergeToken(token, {
rateStarColor: token['yellow-6'],
rateStarSize: token.controlHeightLG * 0.5,
rateStarHoverScale: 'scale(1.1)',
defaultColor: colorFillContent
});
return [genRateStyle(rateToken)];
});