trepur_components 0.3.22 → 0.3.25
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/BreadcrumbsItem/index.js +23 -5
- package/dist/components/Card/index.js +0 -2
- package/dist/components/CardWithTopImage/index.js +5 -3
- package/dist/components/Carousel/index.css +2 -1
- package/dist/components/Carousel/index.css.map +1 -0
- package/dist/components/Carousel/index.js +5 -4
- package/dist/components/Container/index.js +1 -1
- package/dist/components/SocialBlock/index.js +7 -3
- package/dist/components/StarRating/index.js +9 -9
- package/dist/components/Timeline/index.css +8 -6
- package/dist/components/Timeline/index.css.map +1 -0
- package/dist/components/Timeline/index.js +109 -3
- package/dist/components/Tubestops/index.css +35 -30
- package/dist/components/Tubestops/index.css.map +1 -0
- package/dist/components/Users/rupertb/Documents/apps/trepur_components/src/lib/styles/base.css +1831 -0
- package/dist/components/Users/rupertb/Documents/apps/trepur_components/src/lib/styles/base.css.map +1 -0
- package/dist/index.js +0 -8
- package/package.json +5 -3
- package/dist/components/BreadcrumbsItem/BreadcrumbsItem.module.css +0 -22
- package/dist/components/CardWithTopImage/index.css +0 -3
- package/dist/components/CarouselV2/index.css +0 -3
- package/dist/components/CarouselV2/index.js +0 -185
- package/dist/components/StarRating/index.css +0 -8
|
@@ -15,8 +15,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
|
15
15
|
|
|
16
16
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
17
17
|
|
|
18
|
-
var _BreadcrumbsItemModule = _interopRequireDefault(require("./BreadcrumbsItem.module.css"));
|
|
19
|
-
|
|
20
18
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
21
19
|
|
|
22
20
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
@@ -87,13 +85,33 @@ const BreadcrumbsItem = _ref => {
|
|
|
87
85
|
}, 'absolute top-0 w-0 h-0 border-t');
|
|
88
86
|
|
|
89
87
|
const frontArrow = /*#__PURE__*/_react.default.createElement("span", {
|
|
90
|
-
|
|
88
|
+
style: {
|
|
89
|
+
'border-top': '17px solid transparent',
|
|
90
|
+
'border-bottom': '15px solid transparent',
|
|
91
|
+
'border-left': '16px solid',
|
|
92
|
+
'right': '-16px'
|
|
93
|
+
},
|
|
94
|
+
className: frontArrowClasses
|
|
91
95
|
});
|
|
92
96
|
|
|
93
97
|
const backArrows = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", {
|
|
94
|
-
|
|
98
|
+
style: {
|
|
99
|
+
'border-top': '17px solid',
|
|
100
|
+
'border-bottom': '18px solid transparent',
|
|
101
|
+
'border-left': '17px solid transparent',
|
|
102
|
+
'left': '-17px',
|
|
103
|
+
'-webkit-transform': 'scaleY(-1)',
|
|
104
|
+
'transform': 'scaleY(-1)'
|
|
105
|
+
},
|
|
106
|
+
className: "".concat(backArrowsClasses, " ").concat(bottomArrowClasses)
|
|
95
107
|
}), /*#__PURE__*/_react.default.createElement("span", {
|
|
96
|
-
|
|
108
|
+
style: {
|
|
109
|
+
'border-top': '18px solid',
|
|
110
|
+
'border-bottom': '17px solid transparent',
|
|
111
|
+
'border-left': '17px solid transparent',
|
|
112
|
+
'left': '-17px'
|
|
113
|
+
},
|
|
114
|
+
className: "".concat(backArrowsClasses, " ").concat(topArrowClasses)
|
|
97
115
|
}));
|
|
98
116
|
|
|
99
117
|
const renderWithFrontArrow = () => /*#__PURE__*/_react.default.createElement("div", {
|
|
@@ -19,8 +19,6 @@ var _Video = _interopRequireDefault(require("../Video"));
|
|
|
19
19
|
|
|
20
20
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
21
21
|
|
|
22
|
-
var _Icon = _interopRequireDefault(require("../Icon"));
|
|
23
|
-
|
|
24
22
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
25
23
|
|
|
26
24
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
@@ -13,8 +13,6 @@ var _index = _interopRequireDefault(require("../Image/index"));
|
|
|
13
13
|
|
|
14
14
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
15
15
|
|
|
16
|
-
require("./index.css");
|
|
17
|
-
|
|
18
16
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
19
17
|
|
|
20
18
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
@@ -54,7 +52,11 @@ const CardWithTopImage = _ref => {
|
|
|
54
52
|
imageProps = _objectSpread(_objectSpread({}, imageProps), {}, {
|
|
55
53
|
classes: ((_imageProps3 = imageProps) === null || _imageProps3 === void 0 ? void 0 : _imageProps3.classes) + ' ' + imageClassList
|
|
56
54
|
});
|
|
57
|
-
return /*#__PURE__*/_react.default.createElement("div", _extends({
|
|
55
|
+
return /*#__PURE__*/_react.default.createElement("div", _extends({
|
|
56
|
+
style: {
|
|
57
|
+
'filter': 'drop-shadow(0 4px 8px rgb(154, 154, 154))'
|
|
58
|
+
}
|
|
59
|
+
}, id && {
|
|
58
60
|
id: id
|
|
59
61
|
}, {
|
|
60
62
|
className: classList
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/lib/components/Carousel/index.css"],"names":[],"mappings":"AAAA;EACE,mCAAmC;AACrC","file":"index.css","sourcesContent":[".arrow {\n -webkit-transform: translateY(-50%);\n}"]}
|
|
@@ -15,8 +15,6 @@ require("keen-slider/keen-slider.min.css");
|
|
|
15
15
|
|
|
16
16
|
var _react2 = require("keen-slider/react");
|
|
17
17
|
|
|
18
|
-
require("./index.css");
|
|
19
|
-
|
|
20
18
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
21
19
|
|
|
22
20
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
@@ -28,7 +26,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
|
|
|
28
26
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
29
27
|
|
|
30
28
|
//https://keen-slider.io/docs#usage-in-react
|
|
31
|
-
const
|
|
29
|
+
const Carousel = _ref => {
|
|
32
30
|
var _instanceRef$current3, _instanceRef$current4, _instanceRef$current5, _instanceRef$current6, _instanceRef$current7, _instanceRef$current8, _instanceRef$current9, _instanceRef$current10;
|
|
33
31
|
|
|
34
32
|
let {
|
|
@@ -170,6 +168,9 @@ function Arrow(props) {
|
|
|
170
168
|
'arrow--disabled': props.disabled
|
|
171
169
|
}, 'arrow w-12 translate-y-2/4 h-12 absolute cursor-pointer top-1/2');
|
|
172
170
|
return /*#__PURE__*/_react.default.createElement("svg", {
|
|
171
|
+
style: {
|
|
172
|
+
'WebkitTransform': 'translateY(-50%)'
|
|
173
|
+
},
|
|
173
174
|
onClick: props === null || props === void 0 ? void 0 : props.onClick,
|
|
174
175
|
className: "".concat(arrowClasses),
|
|
175
176
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -181,5 +182,5 @@ function Arrow(props) {
|
|
|
181
182
|
}));
|
|
182
183
|
}
|
|
183
184
|
|
|
184
|
-
var _default =
|
|
185
|
+
var _default = Carousel;
|
|
185
186
|
exports.default = _default;
|
|
@@ -39,7 +39,7 @@ const Container = _ref => {
|
|
|
39
39
|
}, 'mx-auto');
|
|
40
40
|
return /*#__PURE__*/_react.default.createElement("div", _extends({
|
|
41
41
|
style: {
|
|
42
|
-
'
|
|
42
|
+
'maxWidth': containerProps.maxWidth
|
|
43
43
|
}
|
|
44
44
|
}, (containerProps === null || containerProps === void 0 ? void 0 : containerProps.id) && {
|
|
45
45
|
id: containerProps === null || containerProps === void 0 ? void 0 : containerProps.id
|
|
@@ -71,7 +71,7 @@ const SocialBlock = _ref => {
|
|
|
71
71
|
});
|
|
72
72
|
const buttnoWrapperClasslist = (0, _classnames.default)({
|
|
73
73
|
[buttonWrapperClasses]: buttonWrapperClasses
|
|
74
|
-
}, 'pt-4
|
|
74
|
+
}, 'pt-4');
|
|
75
75
|
const hoverClassList = (0, _classnames.default)({
|
|
76
76
|
[hoverClasses]: withLiveUpdates && !isInEditingMode && isHovering,
|
|
77
77
|
[textWrapperClasses]: textWrapperClasses
|
|
@@ -172,9 +172,13 @@ const SocialBlock = _ref => {
|
|
|
172
172
|
className: "pt-4"
|
|
173
173
|
}, componentData.text.text)), /*#__PURE__*/_react.default.createElement("div", {
|
|
174
174
|
className: buttnoWrapperClasslist
|
|
175
|
+
}, /*#__PURE__*/_react.default.createElement("div", {
|
|
176
|
+
className: "flex flex-wrap w-full justify-center"
|
|
175
177
|
}, socialButtons && socialButtons.map((button, i) => {
|
|
176
|
-
return
|
|
177
|
-
|
|
178
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
179
|
+
key: "social_btn_".concat(i + 1)
|
|
180
|
+
}, button);
|
|
181
|
+
})))));
|
|
178
182
|
};
|
|
179
183
|
|
|
180
184
|
var _default = SocialBlock;
|
|
@@ -17,8 +17,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
|
17
17
|
|
|
18
18
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
19
19
|
|
|
20
|
-
require("./index.css");
|
|
21
|
-
|
|
22
20
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
23
21
|
|
|
24
22
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
@@ -58,12 +56,13 @@ const StarRating = _ref => {
|
|
|
58
56
|
var _starRatingProps$icon2;
|
|
59
57
|
|
|
60
58
|
starsArr.push( /*#__PURE__*/_react.default.createElement(_Icon.default, {
|
|
61
|
-
key: "
|
|
59
|
+
key: "checked_star_".concat(i + 0),
|
|
62
60
|
iconProps: {
|
|
63
|
-
id: "
|
|
61
|
+
id: "checked-".concat(i),
|
|
64
62
|
classes: "".concat(iconClassList, " checked"),
|
|
65
63
|
type: 'star',
|
|
66
|
-
size: starRatingProps === null || starRatingProps === void 0 ? void 0 : (_starRatingProps$icon2 = starRatingProps.iconProps) === null || _starRatingProps$icon2 === void 0 ? void 0 : _starRatingProps$icon2.size
|
|
64
|
+
size: starRatingProps === null || starRatingProps === void 0 ? void 0 : (_starRatingProps$icon2 = starRatingProps.iconProps) === null || _starRatingProps$icon2 === void 0 ? void 0 : _starRatingProps$icon2.size,
|
|
65
|
+
colour: 'text-brand-gold'
|
|
67
66
|
}
|
|
68
67
|
}));
|
|
69
68
|
}
|
|
@@ -78,12 +77,13 @@ const StarRating = _ref => {
|
|
|
78
77
|
var _starRatingProps$icon3;
|
|
79
78
|
|
|
80
79
|
starsArr.push( /*#__PURE__*/_react.default.createElement(_Icon.default, {
|
|
81
|
-
key: "
|
|
80
|
+
key: "unchecked_star_".concat(i + 0),
|
|
82
81
|
iconProps: {
|
|
83
|
-
id: "
|
|
84
|
-
classes: "".concat(iconClassList, " unchecked"),
|
|
82
|
+
id: "unchecked-".concat(i),
|
|
83
|
+
classes: "".concat(iconClassList, " unchecked opacity-30 gold"),
|
|
85
84
|
type: 'star',
|
|
86
|
-
size: starRatingProps === null || starRatingProps === void 0 ? void 0 : (_starRatingProps$icon3 = starRatingProps.iconProps) === null || _starRatingProps$icon3 === void 0 ? void 0 : _starRatingProps$icon3.size
|
|
85
|
+
size: starRatingProps === null || starRatingProps === void 0 ? void 0 : (_starRatingProps$icon3 = starRatingProps.iconProps) === null || _starRatingProps$icon3 === void 0 ? void 0 : _starRatingProps$icon3.size,
|
|
86
|
+
colour: 'text-brand-gold'
|
|
87
87
|
}
|
|
88
88
|
}));
|
|
89
89
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
/* Vertical */
|
|
2
|
-
#circle.vertical:before {
|
|
2
|
+
/* #circle.vertical:before {
|
|
3
3
|
position: absolute;
|
|
4
4
|
display: block;
|
|
5
5
|
border-left: 1px solid #31a3dd;
|
|
@@ -41,10 +41,10 @@
|
|
|
41
41
|
top: 0%;
|
|
42
42
|
left: 49.9%;
|
|
43
43
|
z-index: -1;
|
|
44
|
-
}
|
|
44
|
+
} */
|
|
45
45
|
|
|
46
46
|
/* V - collapse*/
|
|
47
|
-
#circle.vertical.collapse:before {
|
|
47
|
+
/* #circle.vertical.collapse:before {
|
|
48
48
|
position: absolute;
|
|
49
49
|
display: block;
|
|
50
50
|
border-left: 1px solid #31a3dd;
|
|
@@ -86,9 +86,9 @@
|
|
|
86
86
|
top: 0%;
|
|
87
87
|
left: 8.2%;
|
|
88
88
|
z-index: -1;
|
|
89
|
-
}
|
|
89
|
+
} */
|
|
90
90
|
/* Horizontal */
|
|
91
|
-
#circle.horizontal:before {
|
|
91
|
+
/* #circle.horizontal:before {
|
|
92
92
|
position: absolute;
|
|
93
93
|
display: block;
|
|
94
94
|
border-top: 1px solid #31a3dd;
|
|
@@ -130,4 +130,6 @@
|
|
|
130
130
|
top: 50%;
|
|
131
131
|
left: -8%;
|
|
132
132
|
z-index: -1;
|
|
133
|
-
}
|
|
133
|
+
} */
|
|
134
|
+
|
|
135
|
+
/*# sourceMappingURL=index.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/lib/components/Timeline/index.css"],"names":[],"mappings":"AAAA,aAAa;AACb;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;;AAEH,gBAAgB;AAChB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG;AACH,eAAe;AACf;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA0CG","file":"index.css","sourcesContent":["/* Vertical */\n/* #circle.vertical:before {\n position: absolute;\n display: block;\n border-left: 1px solid #31a3dd;\n content: \"\";\n height: 50%;\n top: 0%;\n left: 49.9%;\n z-index: -1;\n}\n\n#circle.vertical:after {\n position: absolute;\n display: block;\n border-left: 1px solid #31a3dd;\n content: \"\";\n height: 50%;\n bottom: 0%;\n left: 49.9%;\n z-index: -1;\n}\n\n#first-circle.vertical:after {\n position: absolute;\n display: block;\n border-left: 1px solid #31a3dd;\n content: \"\";\n height: 50%;\n bottom: 0%;\n left: 49.9%;\n z-index: -1;\n}\n\n#last-circle.vertical:before {\n position: absolute;\n display: block;\n border-left: 1px solid #31a3dd;\n content: \"\";\n height: 50%;\n top: 0%;\n left: 49.9%;\n z-index: -1;\n} */\n\n/* V - collapse*/\n/* #circle.vertical.collapse:before {\n position: absolute;\n display: block;\n border-left: 1px solid #31a3dd;\n content: \"\";\n height: 50%;\n top: 0%;\n left: 8.2%;\n z-index: -1;\n}\n\n#circle.vertical.collapse:after {\n position: absolute;\n display: block;\n border-left: 1px solid #31a3dd;\n content: \"\";\n height: 50%;\n bottom: 0%;\n left: 8.2%;\n z-index: -1;\n}\n\n#first-circle.vertical.collapse:after {\n position: absolute;\n display: block;\n border-left: 1px solid #31a3dd;\n content: \"\";\n height: 50%;\n bottom: 0%;\n left: 8.2%;\n z-index: -1;\n}\n\n#last-circle.vertical.collapse:before {\n position: absolute;\n display: block;\n border-left: 1px solid #31a3dd;\n content: \"\";\n height: 50%;\n top: 0%;\n left: 8.2%;\n z-index: -1;\n} */\n/* Horizontal */\n/* #circle.horizontal:before {\n position: absolute;\n display: block;\n border-top: 1px solid #31a3dd;\n content: \"\";\n width: 70%;\n top: 50%;\n left: -8%;\n z-index: -1;\n}\n\n#circle.horizontal:after {\n position: absolute;\n display: block;\n border-top: 1px solid #31a3dd;\n content: \"\";\n width: 70%;\n top: 50%;\n right: -12%;\n z-index: -1;\n}\n\n#first-circle.horizontal:after {\n position: absolute;\n display: block;\n border-top: 1px solid #31a3dd;\n content: \"\";\n width: 60%;\n top: 50%;\n right: -12%;\n z-index: -1;\n}\n\n#last-circle.horizontal:before {\n position: absolute;\n display: block;\n border-top: 1px solid #31a3dd;\n content: \"\";\n width: 55%;\n top: 50%;\n left: -8%;\n z-index: -1;\n} */\n"]}
|
|
@@ -17,8 +17,6 @@ var _Column = _interopRequireDefault(require("../Column"));
|
|
|
17
17
|
|
|
18
18
|
var _Row = _interopRequireDefault(require("../Row"));
|
|
19
19
|
|
|
20
|
-
require("./index.css");
|
|
21
|
-
|
|
22
20
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
|
|
23
21
|
|
|
24
22
|
const Timeline = _ref => {
|
|
@@ -60,6 +58,86 @@ const Timeline = _ref => {
|
|
|
60
58
|
'vertical collapse': !isHorizontal && isSm,
|
|
61
59
|
'vertical': !isHorizontal && !isSm
|
|
62
60
|
}, 'w-4 h-4 my-16 text-center mx-auto rounded-full border bg-black');
|
|
61
|
+
const circleVerticalBefore = {
|
|
62
|
+
'position': 'absolute',
|
|
63
|
+
'display': 'block',
|
|
64
|
+
'borderLeft': '1px solid #31a3dd',
|
|
65
|
+
'content': '""',
|
|
66
|
+
'height': '50%',
|
|
67
|
+
'top': '0%',
|
|
68
|
+
'left': '49.9%',
|
|
69
|
+
'zIndex': '-1'
|
|
70
|
+
};
|
|
71
|
+
const circleVerticalCollapseBefore = {
|
|
72
|
+
'position': ' absolute',
|
|
73
|
+
'display': ' block',
|
|
74
|
+
'borderLeft': ' 1px solid #31a3dd',
|
|
75
|
+
'content': ' ""',
|
|
76
|
+
'height': ' 50%',
|
|
77
|
+
'top': ' 0%',
|
|
78
|
+
'left': ' 8.2%',
|
|
79
|
+
'zIndex': ' -1'
|
|
80
|
+
};
|
|
81
|
+
const lastCircleVerticalBefore = {
|
|
82
|
+
'position': 'absolute',
|
|
83
|
+
'display': 'block',
|
|
84
|
+
'borderLeft': '1px solid #31a3dd',
|
|
85
|
+
'content': '""',
|
|
86
|
+
'height': '50%',
|
|
87
|
+
'top': '0%',
|
|
88
|
+
'left': '49.9%',
|
|
89
|
+
'zIndex': '-1'
|
|
90
|
+
};
|
|
91
|
+
const lastCircleVerticalCollapseBefore = {
|
|
92
|
+
'position': ' absolute',
|
|
93
|
+
'display': ' block',
|
|
94
|
+
'borderLeft': ' 1px solid #31a3dd',
|
|
95
|
+
'content': ' ""',
|
|
96
|
+
'height': ' 50%',
|
|
97
|
+
'top': ' 0%',
|
|
98
|
+
'left': ' 8.2%',
|
|
99
|
+
'zIndex': ' -1'
|
|
100
|
+
};
|
|
101
|
+
const circleVerticalAfter = {
|
|
102
|
+
'position': 'absolute',
|
|
103
|
+
'display': 'block',
|
|
104
|
+
'borderLeft': '1px solid #31a3dd',
|
|
105
|
+
'content': '""',
|
|
106
|
+
'height': '50%',
|
|
107
|
+
'bottom': '0%',
|
|
108
|
+
'left': '49.9%',
|
|
109
|
+
'zIndex': '-1'
|
|
110
|
+
};
|
|
111
|
+
const firstCircleVerticalAfter = {
|
|
112
|
+
'position': 'absolute',
|
|
113
|
+
'display': 'block',
|
|
114
|
+
'borderLeft': '1px solid #31a3dd',
|
|
115
|
+
'content': '""',
|
|
116
|
+
'height': '50%',
|
|
117
|
+
'bottom': '0%',
|
|
118
|
+
'left': '49.9%',
|
|
119
|
+
'zIndex': '-1'
|
|
120
|
+
};
|
|
121
|
+
const circleVerticalCollapseAfter = {
|
|
122
|
+
'position': 'absolute',
|
|
123
|
+
'display': 'block',
|
|
124
|
+
'borderLeft': '1px solid #31a3dd',
|
|
125
|
+
'content': '""',
|
|
126
|
+
'height': '50%',
|
|
127
|
+
'bottom': '0%',
|
|
128
|
+
'left': '8.2%',
|
|
129
|
+
'zIndex': '-1'
|
|
130
|
+
};
|
|
131
|
+
const firstCircleVerticalCollapseAfter = {
|
|
132
|
+
'position': 'absolute',
|
|
133
|
+
'display': 'block',
|
|
134
|
+
'borderLeft': '1px solid #31a3dd',
|
|
135
|
+
'content': '""',
|
|
136
|
+
'height': '50%',
|
|
137
|
+
'bottom': '0%',
|
|
138
|
+
'left': '8.2%',
|
|
139
|
+
'zIndex': '-1'
|
|
140
|
+
};
|
|
63
141
|
return /*#__PURE__*/_react.default.createElement(_Column.default, {
|
|
64
142
|
columnProps: {
|
|
65
143
|
sm: 12,
|
|
@@ -77,6 +155,30 @@ const Timeline = _ref => {
|
|
|
77
155
|
if (i === 0) circlePos = 'first-circle';else if (i === items.length - 1) circlePos = 'last-circle';else circlePos = "circle";
|
|
78
156
|
}
|
|
79
157
|
|
|
158
|
+
let verticalCircleStylesBefore;
|
|
159
|
+
|
|
160
|
+
if (circlePos === 'circle' && isSm) {
|
|
161
|
+
verticalCircleStylesBefore = circleVerticalCollapseBefore;
|
|
162
|
+
} else if (circlePos === 'circle' && !isSm) {
|
|
163
|
+
verticalCircleStylesBefore = circleVerticalBefore;
|
|
164
|
+
} else if (circlePos === 'last-circle' && isSm) {
|
|
165
|
+
verticalCircleStylesBefore = lastCircleVerticalCollapseBefore;
|
|
166
|
+
} else if (circlePos === 'last-circle' && !isSm) {
|
|
167
|
+
verticalCircleStylesBefore = lastCircleVerticalBefore;
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
let verticalCircleStylesAfter;
|
|
171
|
+
|
|
172
|
+
if (circlePos === 'circle' && isSm) {
|
|
173
|
+
verticalCircleStylesAfter = circleVerticalCollapseAfter;
|
|
174
|
+
} else if (circlePos === 'circle' && !isSm) {
|
|
175
|
+
verticalCircleStylesAfter = circleVerticalAfter;
|
|
176
|
+
} else if (circlePos === 'first-circle' && isSm) {
|
|
177
|
+
verticalCircleStylesAfter = firstCircleVerticalCollapseAfter;
|
|
178
|
+
} else if (circlePos === 'first-circle' && !isSm) {
|
|
179
|
+
verticalCircleStylesAfter = firstCircleVerticalAfter;
|
|
180
|
+
}
|
|
181
|
+
|
|
80
182
|
if (isHorizontal) {
|
|
81
183
|
return /*#__PURE__*/_react.default.createElement(_Column.default, {
|
|
82
184
|
key: "horizontal_col_".concat(i + 0),
|
|
@@ -127,13 +229,17 @@ const Timeline = _ref => {
|
|
|
127
229
|
}, useImages ? /*#__PURE__*/_react.default.createElement("div", {
|
|
128
230
|
id: circlePos,
|
|
129
231
|
className: isSm ? 'vertical collapse' : 'vertical'
|
|
130
|
-
}, /*#__PURE__*/_react.default.createElement(
|
|
232
|
+
}, /*#__PURE__*/_react.default.createElement("span", {
|
|
233
|
+
style: verticalCircleStylesBefore
|
|
234
|
+
}), /*#__PURE__*/_react.default.createElement(_Image.default, {
|
|
131
235
|
imageProps: {
|
|
132
236
|
classes: imageClassList,
|
|
133
237
|
title: item.logoTitle,
|
|
134
238
|
image: item.logo,
|
|
135
239
|
altText: "".concat(item.logoAltText, " center logo")
|
|
136
240
|
}
|
|
241
|
+
}), /*#__PURE__*/_react.default.createElement("span", {
|
|
242
|
+
style: verticalCircleStylesAfter
|
|
137
243
|
})) : /*#__PURE__*/_react.default.createElement("p", {
|
|
138
244
|
id: circlePos,
|
|
139
245
|
className: circle
|
|
@@ -1,92 +1,97 @@
|
|
|
1
1
|
/* Vertical */
|
|
2
2
|
.tubestop.flex-col.none-reverse .status-flow-item:not(:first-child):before {
|
|
3
|
-
|
|
4
|
-
|
|
3
|
+
|
|
4
|
+
position: absolute;
|
|
5
|
+
|
|
6
|
+
display: block;
|
|
5
7
|
|
|
6
8
|
content: "";
|
|
7
9
|
width: 1px;
|
|
8
10
|
height: 100%;
|
|
9
11
|
left: 7px;
|
|
10
|
-
top: -100
|
|
12
|
+
top: -100%
|
|
11
13
|
}
|
|
12
14
|
|
|
13
15
|
.tubestop.flex-col.none-reverse .status-flow-item:not(:last-child):after {
|
|
14
|
-
|
|
15
|
-
|
|
16
|
+
|
|
17
|
+
position: absolute;
|
|
18
|
+
|
|
19
|
+
display: block;
|
|
16
20
|
|
|
17
21
|
content: "";
|
|
18
22
|
width: 1px;
|
|
19
23
|
height: 100%;
|
|
20
24
|
left: 7px;
|
|
21
|
-
top: 40
|
|
25
|
+
top: 40%
|
|
22
26
|
}
|
|
23
27
|
|
|
24
28
|
/* reverse */
|
|
25
29
|
.tubestop.flex-col.reverse .status-flow-item:not(:first-child):before {
|
|
26
|
-
|
|
27
|
-
|
|
30
|
+
|
|
31
|
+
position: absolute;
|
|
32
|
+
|
|
33
|
+
display: block;
|
|
28
34
|
|
|
29
35
|
content: "";
|
|
30
36
|
width: 1px;
|
|
31
37
|
height: 100%;
|
|
32
38
|
right: 7px;
|
|
33
|
-
top: -100
|
|
39
|
+
top: -100%
|
|
34
40
|
}
|
|
35
41
|
|
|
36
42
|
.tubestop.flex-col.reverse .status-flow-item:not(:last-child):after {
|
|
37
|
-
|
|
38
|
-
|
|
43
|
+
|
|
44
|
+
position: absolute;
|
|
45
|
+
|
|
46
|
+
display: block;
|
|
39
47
|
|
|
40
48
|
content: "";
|
|
41
49
|
width: 1px;
|
|
42
50
|
height: 100%;
|
|
43
51
|
right: 7px;
|
|
44
|
-
top: 40
|
|
52
|
+
top: 40%
|
|
45
53
|
}
|
|
46
54
|
|
|
47
55
|
/* Horizontal */
|
|
48
56
|
.tubestop.flex-row.none-reverse .status-flow-item:not(:first-child):after {
|
|
49
|
-
|
|
50
|
-
|
|
57
|
+
|
|
58
|
+
position: absolute;
|
|
59
|
+
|
|
60
|
+
display: block;
|
|
51
61
|
|
|
52
62
|
content: "";
|
|
53
63
|
width: 100%;
|
|
54
64
|
height: 1px;
|
|
55
65
|
left: -50%;
|
|
56
|
-
bottom: 7px
|
|
66
|
+
bottom: 7px
|
|
57
67
|
}
|
|
58
68
|
|
|
59
69
|
.tubestop.flex-row-reverse.none-reverse
|
|
60
70
|
.status-flow-item:not(:first-child):after {
|
|
61
|
-
|
|
62
|
-
|
|
71
|
+
|
|
72
|
+
position: absolute;
|
|
73
|
+
|
|
74
|
+
display: block;
|
|
63
75
|
|
|
64
76
|
content: "";
|
|
65
77
|
width: 100%;
|
|
66
78
|
height: 1px;
|
|
67
79
|
right: -50%;
|
|
68
|
-
top: 7px
|
|
80
|
+
top: 7px
|
|
69
81
|
}
|
|
70
82
|
|
|
71
83
|
/*reverse*/
|
|
72
84
|
.tubestop.flex-row.reverse .status-flow-item:not(:first-child):after {
|
|
73
|
-
@apply absolute;
|
|
74
|
-
@apply block;
|
|
75
|
-
|
|
76
|
-
content: "";
|
|
77
|
-
width: 100%;
|
|
78
|
-
height: 1px;
|
|
79
85
|
left: -50%;
|
|
80
86
|
bottom: 7px;
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
.tubestop.flex-row.reverse .status-flow-item:not(:first-child):after {
|
|
84
|
-
@apply absolute;
|
|
85
|
-
@apply block;
|
|
87
|
+
position: absolute;
|
|
88
|
+
display: block;
|
|
86
89
|
|
|
87
90
|
content: "";
|
|
88
91
|
width: 100%;
|
|
89
92
|
height: 1px;
|
|
90
93
|
right: -50%;
|
|
91
|
-
top: 7px
|
|
94
|
+
top: 7px
|
|
92
95
|
}
|
|
96
|
+
|
|
97
|
+
/*# sourceMappingURL=index.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../../../src/lib/components/Tubestops/index.css"],"names":[],"mappings":"AAAA,aAAa;AAEX;;EAAA,kBAAe;;EACf,cAAY;;EAEZ,WAAW;EACX,UAAU;EACV,YAAY;EACZ,SAAS;EACT;AAPe;;AAWf;;EAAA,kBAAe;;EACf,cAAY;;EAEZ,WAAW;EACX,UAAU;EACV,YAAY;EACZ,SAAS;EACT;AAPe;;AAUjB,YAAY;AAEV;;EAAA,kBAAe;;EACf,cAAY;;EAEZ,WAAW;EACX,UAAU;EACV,YAAY;EACZ,UAAU;EACV;AAPe;;AAWf;;EAAA,kBAAe;;EACf,cAAY;;EAEZ,WAAW;EACX,UAAU;EACV,YAAY;EACZ,UAAU;EACV;AAPe;;AAUjB,eAAe;AAEb;;EAAA,kBAAe;;EACf,cAAY;;EAEZ,WAAW;EACX,WAAW;EACX,WAAW;EACX,UAAU;EACV;AAPe;;AAYf;;;EAAA,kBAAe;;EACf,cAAY;;EAEZ,WAAW;EACX,WAAW;EACX,WAAW;EACX,WAAW;EACX;AAPe;;AAUjB,UAAU;AAER;EAMA,UAAU;EACV,WAAW;EAIX,kBAAe;EACf,cAAY;;EAEZ,WAAW;EACX,WAAW;EACX,WAAW;EACX,WAAW;EACX;AAlBe","file":"index.css","sourcesContent":["/* Vertical */\n.tubestop.flex-col.none-reverse .status-flow-item:not(:first-child):before {\n @apply absolute;\n @apply block;\n \n content: \"\";\n width: 1px;\n height: 100%;\n left: 7px;\n top: -100%;\n}\n\n.tubestop.flex-col.none-reverse .status-flow-item:not(:last-child):after {\n @apply absolute;\n @apply block;\n \n content: \"\";\n width: 1px;\n height: 100%;\n left: 7px;\n top: 40%;\n}\n\n/* reverse */\n.tubestop.flex-col.reverse .status-flow-item:not(:first-child):before {\n @apply absolute;\n @apply block;\n\n content: \"\";\n width: 1px;\n height: 100%;\n right: 7px;\n top: -100%;\n}\n\n.tubestop.flex-col.reverse .status-flow-item:not(:last-child):after {\n @apply absolute;\n @apply block;\n\n content: \"\";\n width: 1px;\n height: 100%;\n right: 7px;\n top: 40%;\n}\n\n/* Horizontal */\n.tubestop.flex-row.none-reverse .status-flow-item:not(:first-child):after {\n @apply absolute;\n @apply block;\n\n content: \"\";\n width: 100%;\n height: 1px;\n left: -50%;\n bottom: 7px;\n}\n\n.tubestop.flex-row-reverse.none-reverse\n .status-flow-item:not(:first-child):after {\n @apply absolute;\n @apply block;\n\n content: \"\";\n width: 100%;\n height: 1px;\n right: -50%;\n top: 7px;\n}\n\n/*reverse*/\n.tubestop.flex-row.reverse .status-flow-item:not(:first-child):after {\n @apply absolute;\n @apply block;\n\n content: \"\";\n width: 100%;\n height: 1px;\n left: -50%;\n bottom: 7px;\n}\n\n.tubestop.flex-row.reverse .status-flow-item:not(:first-child):after {\n @apply absolute;\n @apply block;\n\n content: \"\";\n width: 100%;\n height: 1px;\n right: -50%;\n top: 7px;\n}\n"]}
|