1 | "use strict";
|
2 |
|
3 | Object.defineProperty(exports, "__esModule", {
|
4 | value: true
|
5 | });
|
6 | exports.StyledEmoticon = exports.StyledStar = exports.StyledRoot = void 0;
|
7 |
|
8 | var _index = require("../styles/index.js");
|
9 |
|
10 | var _svgIcons = require("./svg-icons.js");
|
11 |
|
12 |
|
13 |
|
14 |
|
15 |
|
16 |
|
17 |
|
18 | var StyledRoot = (0, _index.styled)('ul', function (_ref) {
|
19 | var $theme = _ref.$theme;
|
20 | return {
|
21 | marginLeft: 0,
|
22 | marginRight: 0,
|
23 | marginTop: 0,
|
24 | marginBottom: 0,
|
25 | paddingLeft: 0,
|
26 | paddingRight: 0,
|
27 | paddingTop: 0,
|
28 | paddingBottom: 0,
|
29 | display: 'inline-block',
|
30 | ':focus': {
|
31 | outline: 'none'
|
32 | }
|
33 | };
|
34 | });
|
35 | exports.StyledRoot = StyledRoot;
|
36 | StyledRoot.displayName = "StyledRoot";
|
37 | var StyledStar = (0, _index.styled)('li', function (_ref2) {
|
38 | var $theme = _ref2.$theme,
|
39 | $isActive = _ref2.$isActive,
|
40 | $isSelected = _ref2.$isSelected,
|
41 | $isFocusVisible = _ref2.$isFocusVisible,
|
42 | $size = _ref2.$size;
|
43 | var starStroke = $theme.colors.mono500;
|
44 | var starFill = $theme.colors.mono300;
|
45 |
|
46 | if ($isActive) {
|
47 | starStroke = starFill = $theme.colors.rating400;
|
48 | }
|
49 |
|
50 | var styles = {
|
51 | paddingLeft: 0,
|
52 | paddingTop: 0,
|
53 | paddingBottom: 0,
|
54 | paddingRight: 0,
|
55 | display: 'inline-block',
|
56 | transition: "transform ".concat($theme.animation.timing400),
|
57 | cursor: 'pointer',
|
58 | marginLeft: 0,
|
59 | marginTop: 0,
|
60 | marginBottom: 0,
|
61 | marginRight: $theme.sizing.scale300,
|
62 | width: "".concat($size, "px"),
|
63 | height: "".concat($size, "px"),
|
64 | transform: $isSelected ? 'scale(1.35)' : '',
|
65 | outline: $isFocusVisible ? "3px solid ".concat($theme.colors.accent) : 'none',
|
66 | outlineOffset: '2px',
|
67 | ':after': {
|
68 | transition: "all ".concat($theme.animation.timing400),
|
69 | content: "url('data:image/svg+xml," + (0, _svgIcons.starSVG)(starFill, starStroke, $size) + "')"
|
70 | }
|
71 | };
|
72 | return styles;
|
73 | });
|
74 | exports.StyledStar = StyledStar;
|
75 | StyledStar.displayName = "StyledStar";
|
76 | var StyledEmoticon = (0, _index.styled)('li', function (_ref3) {
|
77 | var $theme = _ref3.$theme,
|
78 | $isActive = _ref3.$isActive,
|
79 | $isSelected = _ref3.$isSelected,
|
80 | _ref3$$index = _ref3.$index,
|
81 | $index = _ref3$$index === void 0 ? 1 : _ref3$$index,
|
82 | $isFocusVisible = _ref3.$isFocusVisible,
|
83 | $size = _ref3.$size;
|
84 | var emoticonFill = $theme.colors.mono500;
|
85 |
|
86 | if ($isActive) {
|
87 | emoticonFill = $theme.colors.rating400;
|
88 | }
|
89 |
|
90 | var ratingIcons = [(0, _svgIcons.angryRatingSVG)(emoticonFill, $size), (0, _svgIcons.sadRatingSVG)(emoticonFill, $size), (0, _svgIcons.neutralRatingSVG)(emoticonFill, $size), (0, _svgIcons.happyRatingSVG)(emoticonFill, $size), (0, _svgIcons.veryHappyRatingSVG)(emoticonFill, $size)];
|
91 | var styles = {
|
92 | paddingLeft: 0,
|
93 | paddingTop: 0,
|
94 | paddingRight: 0,
|
95 | paddingBottom: 0,
|
96 | display: 'inline-block',
|
97 | transition: "transform ".concat($theme.animation.timing400),
|
98 | cursor: 'pointer',
|
99 | marginLeft: 0,
|
100 | marginTop: 0,
|
101 | marginBottom: 0,
|
102 | marginRight: $theme.sizing.scale300,
|
103 | width: "".concat($size, "px"),
|
104 | height: "".concat($size, "px"),
|
105 | transform: $isSelected ? 'scale(1.1)' : '',
|
106 | outline: $isFocusVisible ? "3px solid ".concat($theme.colors.accent) : 'none',
|
107 | outlineOffset: '2px',
|
108 | ':after': {
|
109 | transition: "all ".concat($theme.animation.timing400),
|
110 | content: "url('data:image/svg+xml," + ratingIcons[$index - 1] + "')"
|
111 | }
|
112 | };
|
113 | return styles;
|
114 | });
|
115 | exports.StyledEmoticon = StyledEmoticon;
|
116 | StyledEmoticon.displayName = "StyledEmoticon"; |
\ | No newline at end of file |