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 | $isReadOnly = _ref2.$isReadOnly,
|
43 | $size = _ref2.$size;
|
44 | var starStroke = $theme.colors.mono500;
|
45 | var starFill = $theme.colors.mono300;
|
46 |
|
47 | if ($isActive) {
|
48 | starStroke = starFill = $theme.colors.rating400;
|
49 | }
|
50 |
|
51 | var styles = {
|
52 | paddingLeft: 0,
|
53 | paddingTop: 0,
|
54 | paddingBottom: 0,
|
55 | paddingRight: 0,
|
56 | display: 'inline-block',
|
57 | transition: "transform ".concat($theme.animation.timing400),
|
58 | cursor: $isReadOnly ? 'default' : 'pointer',
|
59 | marginLeft: 0,
|
60 | marginTop: 0,
|
61 | marginBottom: 0,
|
62 | marginRight: $theme.sizing.scale300,
|
63 | width: "".concat($size, "px"),
|
64 | height: "".concat($size, "px"),
|
65 | transform: $isSelected ? 'scale(1.35)' : null,
|
66 | outline: $isFocusVisible ? "3px solid ".concat($theme.colors.accent) : 'none',
|
67 | outlineOffset: '2px',
|
68 | ':after': {
|
69 | transition: "all ".concat($theme.animation.timing400),
|
70 | content: "url('data:image/svg+xml," + (0, _svgIcons.starSVG)(starFill, starStroke, $size) + "')"
|
71 | }
|
72 | };
|
73 | return styles;
|
74 | });
|
75 | exports.StyledStar = StyledStar;
|
76 | StyledStar.displayName = "StyledStar";
|
77 | var StyledEmoticon = (0, _index.styled)('li', function (_ref3) {
|
78 | var $theme = _ref3.$theme,
|
79 | $isActive = _ref3.$isActive,
|
80 | $isSelected = _ref3.$isSelected,
|
81 | _ref3$$index = _ref3.$index,
|
82 | $index = _ref3$$index === void 0 ? 1 : _ref3$$index,
|
83 | $isFocusVisible = _ref3.$isFocusVisible,
|
84 | $isReadOnly = _ref3.$isReadOnly,
|
85 | $size = _ref3.$size;
|
86 | var emoticonFill = $theme.colors.mono500;
|
87 |
|
88 | if ($isActive) {
|
89 | emoticonFill = $theme.colors.rating400;
|
90 | }
|
91 |
|
92 | 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)];
|
93 | var styles = {
|
94 | paddingLeft: 0,
|
95 | paddingTop: 0,
|
96 | paddingRight: 0,
|
97 | paddingBottom: 0,
|
98 | display: 'inline-block',
|
99 | transition: "transform ".concat($theme.animation.timing400),
|
100 | cursor: $isReadOnly ? 'default' : 'pointer',
|
101 | marginLeft: 0,
|
102 | marginTop: 0,
|
103 | marginBottom: 0,
|
104 | marginRight: $theme.sizing.scale300,
|
105 | width: "".concat($size, "px"),
|
106 | height: "".concat($size, "px"),
|
107 | transform: $isSelected ? 'scale(1.1)' : null,
|
108 | outline: $isFocusVisible ? "3px solid ".concat($theme.colors.accent) : 'none',
|
109 | outlineOffset: '2px',
|
110 | ':after': {
|
111 | transition: "all ".concat($theme.animation.timing400),
|
112 | content: "url('data:image/svg+xml," + ratingIcons[$index - 1] + "')"
|
113 | }
|
114 | };
|
115 | return styles;
|
116 | });
|
117 | exports.StyledEmoticon = StyledEmoticon;
|
118 | StyledEmoticon.displayName = "StyledEmoticon"; |
\ | No newline at end of file |