1 | "use strict";
|
2 |
|
3 | Object.defineProperty(exports, "__esModule", {
|
4 | value: true
|
5 | });
|
6 | exports.StyledNumberContentTail = exports.StyledNumberIcon = exports.StyledNumberStep = exports.StyledContentDescription = exports.StyledContentTail = exports.StyledContentTitle = exports.StyledContent = exports.StyledInnerIcon = exports.StyledIcon = exports.StyledIconContainer = exports.StyledStep = exports.StyledProgressSteps = void 0;
|
7 |
|
8 | var _index = require("../styles/index.js");
|
9 |
|
10 | function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
|
11 |
|
12 | function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
13 |
|
14 | function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
|
15 |
|
16 | var StyledProgressSteps = (0, _index.styled)('ol', function (_ref) {
|
17 | var $theme = _ref.$theme;
|
18 | return {
|
19 | display: 'inline-block',
|
20 | marginBottom: 0,
|
21 | marginTop: 0,
|
22 | paddingTop: $theme.sizing.scale300,
|
23 | paddingRight: $theme.sizing.scale100,
|
24 | paddingLeft: $theme.sizing.scale100,
|
25 | paddingBottom: $theme.sizing.scale300
|
26 | };
|
27 | });
|
28 | exports.StyledProgressSteps = StyledProgressSteps;
|
29 | StyledProgressSteps.displayName = "StyledProgressSteps";
|
30 | var StyledStep = (0, _index.styled)('li', function (_ref2) {
|
31 | var $theme = _ref2.$theme;
|
32 | return {
|
33 | listStyleType: 'none',
|
34 | position: 'relative',
|
35 | overflow: 'visible'
|
36 | };
|
37 | });
|
38 | exports.StyledStep = StyledStep;
|
39 | StyledStep.displayName = "StyledStep";
|
40 | var StyledIconContainer = (0, _index.styled)('div', function (_ref3) {
|
41 | var $theme = _ref3.$theme,
|
42 | $isActive = _ref3.$isActive,
|
43 | $isCompleted = _ref3.$isCompleted,
|
44 | $disabled = _ref3.$disabled;
|
45 | var currentColor = $theme.colors.backgroundPrimary;
|
46 | var size = $theme.sizing.scale500;
|
47 | var marginLeft = '26px';
|
48 | var marginRight = '26px';
|
49 | var font = $theme.typography.LabelMedium;
|
50 | var titlePad = $theme.sizing.scale800;
|
51 |
|
52 | if ($isActive) {
|
53 | size = $theme.sizing.scale700;
|
54 | marginLeft = $theme.sizing.scale750;
|
55 | marginRight = $theme.sizing.scale750;
|
56 | }
|
57 |
|
58 | var marginTop = "calc(".concat(titlePad, " + (").concat(font.lineHeight, " - ").concat(size, ") / 2)");
|
59 |
|
60 | if ($theme.direction === 'rtl') {
|
61 | var _ref4 = [marginRight, marginLeft];
|
62 | marginLeft = _ref4[0];
|
63 | marginRight = _ref4[1];
|
64 | }
|
65 |
|
66 | return {
|
67 | marginRight: marginRight,
|
68 | marginLeft: marginLeft,
|
69 | marginTop: marginTop,
|
70 | width: size,
|
71 | height: size,
|
72 | lineHeight: size,
|
73 | backgroundColor: currentColor,
|
74 | float: $theme.direction === 'rtl' ? 'right' : 'left',
|
75 | textAlign: 'center',
|
76 | display: 'flex',
|
77 | justifyContent: 'center',
|
78 | alignItems: 'center'
|
79 | };
|
80 | });
|
81 | exports.StyledIconContainer = StyledIconContainer;
|
82 | StyledIconContainer.displayName = "StyledIconContainer";
|
83 | var StyledIcon = (0, _index.styled)('div', function (_ref5) {
|
84 | var $theme = _ref5.$theme,
|
85 | $isActive = _ref5.$isActive,
|
86 | $isCompleted = _ref5.$isCompleted,
|
87 | $disabled = _ref5.$disabled;
|
88 | var currentColor = $theme.colors.mono400;
|
89 | var size = $theme.sizing.scale300;
|
90 |
|
91 | if ($isCompleted) {
|
92 | currentColor = $theme.colors.primary;
|
93 | } else if ($isActive) {
|
94 | currentColor = $theme.colors.progressStepsActiveFill;
|
95 | }
|
96 |
|
97 | if ($isActive) {
|
98 | size = $theme.sizing.scale600;
|
99 | }
|
100 |
|
101 | return {
|
102 | width: size,
|
103 | height: size,
|
104 | lineHeight: size,
|
105 | borderTopLeftRadius: size,
|
106 | borderTopRightRadius: size,
|
107 | borderBottomRightRadius: size,
|
108 | borderBottomLeftRadius: size,
|
109 | backgroundColor: currentColor,
|
110 | float: $theme.direction === 'rtl' ? 'right' : 'left',
|
111 | textAlign: 'center',
|
112 | display: 'flex',
|
113 | justifyContent: 'center',
|
114 | alignItems: 'center'
|
115 | };
|
116 | });
|
117 | exports.StyledIcon = StyledIcon;
|
118 | StyledIcon.displayName = "StyledIcon";
|
119 | var StyledInnerIcon = (0, _index.styled)('div', function (_ref6) {
|
120 | var $theme = _ref6.$theme;
|
121 | return {
|
122 | width: $theme.sizing.scale300,
|
123 | height: $theme.sizing.scale300,
|
124 | lineHeight: $theme.sizing.scale300,
|
125 | borderTopLeftRadius: $theme.sizing.scale300,
|
126 | borderTopRightRadius: $theme.sizing.scale300,
|
127 | borderBottomRightRadius: $theme.sizing.scale300,
|
128 | borderBottomLeftRadius: $theme.sizing.scale300,
|
129 | backgroundColor: $theme.colors.progressStepsActiveText,
|
130 | textAlign: 'center'
|
131 | };
|
132 | });
|
133 | exports.StyledInnerIcon = StyledInnerIcon;
|
134 | StyledInnerIcon.displayName = "StyledInnerIcon";
|
135 | var StyledContent = (0, _index.styled)('div', function (_ref7) {
|
136 | var $theme = _ref7.$theme;
|
137 | var marginDir = $theme.direction === 'rtl' ? 'marginRight' : 'marginLeft';
|
138 | return _defineProperty({}, marginDir, $theme.sizing.scale1600);
|
139 | });
|
140 | exports.StyledContent = StyledContent;
|
141 | StyledContent.displayName = "StyledContent";
|
142 | var StyledContentTitle = (0, _index.styled)('div', function (_ref9) {
|
143 | var $theme = _ref9.$theme,
|
144 | $isActive = _ref9.$isActive,
|
145 | $isCompleted = _ref9.$isCompleted;
|
146 | var color = $theme.colors.primary400;
|
147 |
|
148 | if ($isCompleted) {
|
149 | color = $theme.colors.contentSecondary;
|
150 | } else if ($isActive) {
|
151 | color = $theme.colors.contentPrimary;
|
152 | }
|
153 |
|
154 | var font = $theme.typography.LabelMedium;
|
155 | return _objectSpread({}, font, {
|
156 | color: color,
|
157 | paddingTop: $theme.sizing.scale800,
|
158 | paddingBottom: $theme.sizing.scale800
|
159 | });
|
160 | });
|
161 | exports.StyledContentTitle = StyledContentTitle;
|
162 | StyledContentTitle.displayName = "StyledContentTitle";
|
163 | var StyledContentTail = (0, _index.styled)('div', function (_ref10) {
|
164 | var _ref11;
|
165 |
|
166 | var $theme = _ref10.$theme,
|
167 | $isCompleted = _ref10.$isCompleted,
|
168 | $isActive = _ref10.$isActive;
|
169 | var currentColor = $theme.colors.mono400;
|
170 | var size = $theme.sizing.scale500;
|
171 | var font = $theme.typography.LabelMedium;
|
172 | var titlePad = $theme.sizing.scale800;
|
173 |
|
174 | if ($isActive) {
|
175 | size = $theme.sizing.scale700;
|
176 | }
|
177 |
|
178 | if ($isCompleted) {
|
179 | currentColor = $theme.colors.primary;
|
180 | }
|
181 |
|
182 | var dir = $theme.direction === 'rtl' ? 'right' : 'left';
|
183 | return _ref11 = {
|
184 | position: 'absolute'
|
185 | }, _defineProperty(_ref11, dir, '31px'), _defineProperty(_ref11, "top", 0), _defineProperty(_ref11, "height", "calc(100% + ".concat($theme.sizing.scale500, ")")), _defineProperty(_ref11, "marginBottom", 0), _defineProperty(_ref11, "width", $theme.sizing.scale0), _defineProperty(_ref11, "marginTop", "calc(".concat(titlePad, " + (").concat(font.lineHeight, " + ").concat(size, ") / 2)")), _defineProperty(_ref11, "display", 'inline-block'), _defineProperty(_ref11, "backgroundColor", currentColor), _ref11;
|
186 | });
|
187 | exports.StyledContentTail = StyledContentTail;
|
188 | StyledContentTail.displayName = "StyledContentTail";
|
189 | var StyledContentDescription = (0, _index.styled)('div', function (_ref12) {
|
190 | var $theme = _ref12.$theme;
|
191 | return {
|
192 | marginBottom: $theme.sizing.scale700
|
193 | };
|
194 | });
|
195 | exports.StyledContentDescription = StyledContentDescription;
|
196 | StyledContentDescription.displayName = "StyledContentDescription";
|
197 | var StyledNumberStep = (0, _index.styled)('li', function (_ref13) {
|
198 | var $theme = _ref13.$theme;
|
199 | return {
|
200 | listStyleType: 'none',
|
201 | position: 'relative',
|
202 | overflow: 'visible'
|
203 | };
|
204 | });
|
205 | exports.StyledNumberStep = StyledNumberStep;
|
206 | StyledNumberStep.displayName = "StyledNumberStep";
|
207 | var StyledNumberIcon = (0, _index.styled)('div', function (_ref14) {
|
208 | var $theme = _ref14.$theme,
|
209 | $isActive = _ref14.$isActive,
|
210 | $isCompleted = _ref14.$isCompleted,
|
211 | $disabled = _ref14.$disabled;
|
212 | var backgroundColor = $theme.colors.mono400;
|
213 | var color = $theme.colors.contentStateDisabled;
|
214 | var size = $theme.sizing.scale950;
|
215 | var font = $theme.typography.ParagraphMedium;
|
216 | var marginLeft = $theme.sizing.scale550;
|
217 | var marginRight = $theme.sizing.scale550;
|
218 | var titlePad = $theme.sizing.scale800;
|
219 | var titleFont = $theme.typography.LabelMedium;
|
220 |
|
221 | if ($isCompleted) {
|
222 | color = $theme.colors.progressStepsCompletedText;
|
223 | backgroundColor = $theme.colors.progressStepsCompletedFill;
|
224 | } else if ($isActive) {
|
225 | color = $theme.colors.progressStepsActiveText;
|
226 | backgroundColor = $theme.colors.progressStepsActiveFill;
|
227 | }
|
228 |
|
229 | var marginTop = "calc(".concat(titlePad, " + (").concat(titleFont.lineHeight, " - ").concat(size, ") / 2)");
|
230 | return _objectSpread({
|
231 | marginLeft: marginLeft,
|
232 | marginRight: marginRight,
|
233 | marginTop: marginTop,
|
234 | width: size,
|
235 | height: size,
|
236 | borderTopLeftRadius: size,
|
237 | borderTopRightRadius: size,
|
238 | borderBottomRightRadius: size,
|
239 | borderBottomLeftRadius: size,
|
240 | backgroundColor: backgroundColor,
|
241 | color: color,
|
242 | float: $theme.direction === 'rtl' ? 'right' : 'left',
|
243 | textAlign: 'center',
|
244 | display: 'flex',
|
245 | justifyContent: 'center',
|
246 | alignItems: 'center'
|
247 | }, font);
|
248 | });
|
249 | exports.StyledNumberIcon = StyledNumberIcon;
|
250 | StyledNumberIcon.displayName = "StyledNumberIcon";
|
251 | var StyledNumberContentTail = (0, _index.styled)('div', function (_ref15) {
|
252 | var _ref16;
|
253 |
|
254 | var $theme = _ref15.$theme,
|
255 | $isActive = _ref15.$isActive,
|
256 | $isCompleted = _ref15.$isCompleted,
|
257 | $disabled = _ref15.$disabled;
|
258 | var currentColor = $theme.colors.mono300;
|
259 | var size = $theme.sizing.scale950;
|
260 | var titleFont = $theme.typography.LabelMedium;
|
261 | var titlePad = $theme.sizing.scale800;
|
262 |
|
263 | if ($isCompleted) {
|
264 | currentColor = $theme.colors.primary;
|
265 | }
|
266 |
|
267 | var marginTop = "calc(".concat(titlePad, " + ").concat(size, " + (").concat(titleFont.lineHeight, " - ").concat(size, ") / 2)");
|
268 | var dir = $theme.direction === 'rtl' ? 'right' : 'left';
|
269 | return _ref16 = {
|
270 | position: 'absolute'
|
271 | }, _defineProperty(_ref16, dir, '31px'), _defineProperty(_ref16, "top", 0), _defineProperty(_ref16, "height", "calc(100% - ".concat($theme.sizing.scale500, ")")), _defineProperty(_ref16, "paddingBottom", 0), _defineProperty(_ref16, "marginTop", marginTop), _defineProperty(_ref16, "width", $theme.sizing.scale0), _defineProperty(_ref16, "backgroundColor", currentColor), _defineProperty(_ref16, "display", 'inline-block'), _ref16;
|
272 | });
|
273 | exports.StyledNumberContentTail = StyledNumberContentTail;
|
274 | StyledNumberContentTail.displayName = "StyledNumberContentTail"; |
\ | No newline at end of file |