index.js 2.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192
  1. import { unit } from '@ant-design/cssinjs';
  2. import { resetComponent } from '../../style';
  3. import { genStyleHooks, mergeToken } from '../../theme/internal';
  4. const genRateStarStyle = token => {
  5. const {
  6. componentCls
  7. } = token;
  8. return {
  9. [`${componentCls}-star`]: {
  10. position: 'relative',
  11. display: 'inline-block',
  12. color: 'inherit',
  13. cursor: 'pointer',
  14. '&:not(:last-child)': {
  15. marginInlineEnd: token.marginXS
  16. },
  17. '> div': {
  18. transition: `all ${token.motionDurationMid}, outline 0s`,
  19. '&:hover': {
  20. transform: token.starHoverScale
  21. },
  22. '&:focus': {
  23. outline: 0
  24. },
  25. '&:focus-visible': {
  26. outline: `${unit(token.lineWidth)} dashed ${token.starColor}`,
  27. transform: token.starHoverScale
  28. }
  29. },
  30. '&-first, &-second': {
  31. color: token.starBg,
  32. transition: `all ${token.motionDurationMid}`,
  33. userSelect: 'none'
  34. },
  35. '&-first': {
  36. position: 'absolute',
  37. top: 0,
  38. insetInlineStart: 0,
  39. width: '50%',
  40. height: '100%',
  41. overflow: 'hidden',
  42. opacity: 0
  43. },
  44. [`&-half ${componentCls}-star-first, &-half ${componentCls}-star-second`]: {
  45. opacity: 1
  46. },
  47. [`&-half ${componentCls}-star-first, &-full ${componentCls}-star-second`]: {
  48. color: 'inherit'
  49. }
  50. }
  51. };
  52. };
  53. const genRateRtlStyle = token => ({
  54. [`&-rtl${token.componentCls}`]: {
  55. direction: 'rtl'
  56. }
  57. });
  58. const genRateStyle = token => {
  59. const {
  60. componentCls
  61. } = token;
  62. return {
  63. [componentCls]: Object.assign(Object.assign(Object.assign(Object.assign({}, resetComponent(token)), {
  64. display: 'inline-block',
  65. margin: 0,
  66. padding: 0,
  67. color: token.starColor,
  68. fontSize: token.starSize,
  69. lineHeight: 1,
  70. listStyle: 'none',
  71. outline: 'none',
  72. // disable styles
  73. [`&-disabled${componentCls} ${componentCls}-star`]: {
  74. cursor: 'default',
  75. '> div:hover': {
  76. transform: 'scale(1)'
  77. }
  78. }
  79. }), genRateStarStyle(token)), genRateRtlStyle(token))
  80. };
  81. };
  82. // ============================== Export ==============================
  83. export const prepareComponentToken = token => ({
  84. starColor: token.yellow6,
  85. starSize: token.controlHeightLG * 0.5,
  86. starHoverScale: 'scale(1.1)',
  87. starBg: token.colorFillContent
  88. });
  89. export default genStyleHooks('Rate', token => {
  90. const rateToken = mergeToken(token, {});
  91. return genRateStyle(rateToken);
  92. }, prepareComponentToken);