| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111 |
- "use strict";
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
- Object.defineProperty(exports, "__esModule", {
- value: true
- });
- exports.default = void 0;
- var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
- var _internal = require("../../theme/internal");
- var _style = require("../../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]: (0, _extends2.default)((0, _extends2.default)((0, _extends2.default)((0, _extends2.default)((0, _extends2.default)({}, (0, _style.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 ==============================
- var _default = exports.default = (0, _internal.genComponentStyleHook)('Rate', token => {
- const {
- colorFillContent
- } = token;
- const rateToken = (0, _internal.mergeToken)(token, {
- rateStarColor: token['yellow-6'],
- rateStarSize: token.controlHeightLG * 0.5,
- rateStarHoverScale: 'scale(1.1)',
- defaultColor: colorFillContent
- });
- return [genRateStyle(rateToken)];
- });
|