@desynova-digital/components 9.2.9 → 9.2.11
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.
|
@@ -33,7 +33,7 @@ var TitleStyles = (0, _styledComponents["default"])(function (props) {
|
|
|
33
33
|
return isTitleClick ? 'pointer' : 'default';
|
|
34
34
|
});
|
|
35
35
|
var ContentBody = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: column;\n &.no-meta-row {\n margin-top: 6px;\n }\n"])));
|
|
36
|
-
var ContentStyles = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n height: ", ";\n width: ", ";\n padding: ", ";\n background-color: ", ";\n border-radius: 0 0 8px 8px;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n\n &.no-meta-row {\n height: ", ";\n }\n\n &.no-meta-row .footer-row {\n margin-top: 10px;\n }\n\n .title-parent {\n position: relative;\n }\n\n .segment-indicator {\n position: relative;\n color: #fff;\n padding-left: 10px;\n &:before {\n display: inline-block;\n content: ' ';\n width: 6px;\n height: 6px;\n position: absolute;\n top: 2px;\n left: 0px;\n background: ", ";\n border-radius: 50%;\n }\n }\n .overlapping-container {\n justify-content: center;\n align-items: center;\n height: 11px;\n position: relative;\n .overlappig-popup-container {\n position: absolute;\n bottom: 100%;\n margin-right: 110px;\n pointer-events: none;\n opacity: 0;\n transition: opacity 0.3s ease-out;\n padding-bottom: 10px;\n\n .overlappig-popup {\n font-family: SFUIText-Regular;\n background: #182738;\n box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.2);\n border-radius: 2px;\n padding: 12px;\n width: 300px;\n z-index: 10;\n\n .popup-pointer {\n content: '';\n position: absolute;\n width: 0;\n height: 0;\n border-left: 5px solid transparent;\n border-right: 5px solid transparent;\n border-bottom: 5px solid ", ";\n\n bottom: 5px;\n left: 66%;\n -webkit-transform: rotate(180deg);\n -ms-transform: translate(180deg);\n transform: translate(180deg);\n }\n\n .overlapping-episod-list-container {\n max-height: 165px;\n overflow: scroll;\n ::-webkit-scrollbar {\n display: none;\n }\n -ms-overflow-style: none; /* IE and Edge */\n scrollbar-width: none;\n }\n\n .divider {\n height: 1px;\n width: 100%;\n margin: 10px 0;\n background: #303f51;\n }\n .header-container {\n display: flex;\n position: relative;\n .thumbnail {\n width: 100px;\n height: 55px;\n background-size: cover !important;\n background-repeat: no-repeat !important;\n margin-right: 10px;\n border-radius: 2px;\n }\n .episod-title {\n font-size: 12px;\n margin-bottom: 8px;\n max-width: 180px;\n line-height: 14px;\n color: #fff;\n }\n .episod-details {\n font-size: 10px;\n color: #afb2ba;\n }\n }\n\n .overlappig-popup-title {\n font-size: 12px;\n line-height: 12px;\n color: #afb2ba;\n margin-bottom: 15px;\n }\n }\n }\n\n :hover {\n .overlappig-popup-container {\n opacity: 1;\n pointer-events: all;\n }\n }\n p {\n font-size: 12px;\n margin-left: 5px;\n height: 12px;\n }\n }\n .meta-row {\n display: flex;\n align-items: center;\n margin-top: 6px;\n cursor: default;\n column-gap: 10px\n }\n .category-count {\n margin-top: 6px;\n color: #afb2ba;\n font-family: SFUIText-Regular;\n font-size: 10px;\n line-height: 12px;\n }\n .meta-badge {\n ", "\n font-size: 8px;\n line-height: 12px;\n padding: 1px 3px;\n border-radius: 4px;\n font-family: SFUIText-Regular;\n min-height: 12px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n .meta-text {\n color: ", ";\n font-family: SFUIText-Regular;\n font-size: 10px;\n font-style: normal;\n font-weight: 300;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .footer-row {\n display: flex;\n align-items: center;\n margin-top: 16px;\n column-gap: 12px;\n position: relative;\n cursor: default;\n }\n .meta-row + .footer-row {\n margin-top: 10px;\n }\n .footer-text {\n color: #afb2ba;\n font-family: SFUIText-Regular;\n font-size: 8px;\n line-height: 10px;\n margin-right: 0;\n }\n .footer-icons {\n margin-left: auto;\n display: inline-flex;\n align-items: center;\n gap: 8px;\n }\n .footer-icon {\n color: #afb2ba;\n font-family: SFUIText-Regular;\n font-size: 8px;\n line-height: 12px;\n display: inline-flex;\n align-items: center;\n }\n .footer-text-language {\n color: #afb2ba;\n font-family: SFUIText-Regular;\n font-size: 8px;\n line-height: 10px;\n margin-right: 0;\n text-transform: capitalize;\n }\n"])), function (_ref2) {
|
|
36
|
+
var ContentStyles = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n height: ", ";\n width: ", ";\n padding: ", ";\n background-color: ", ";\n border-radius: 0 0 8px 8px;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n\n &.no-meta-row {\n // height: ", ";\n ", "\n }\n\n &.no-meta-row .footer-row {\n margin-top: 10px;\n }\n\n .title-parent {\n position: relative;\n }\n\n .segment-indicator {\n position: relative;\n color: #fff;\n padding-left: 10px;\n &:before {\n display: inline-block;\n content: ' ';\n width: 6px;\n height: 6px;\n position: absolute;\n top: 2px;\n left: 0px;\n background: ", ";\n border-radius: 50%;\n }\n }\n .overlapping-container {\n justify-content: center;\n align-items: center;\n height: 11px;\n position: relative;\n .overlappig-popup-container {\n position: absolute;\n bottom: 100%;\n margin-right: 110px;\n pointer-events: none;\n opacity: 0;\n transition: opacity 0.3s ease-out;\n padding-bottom: 10px;\n\n .overlappig-popup {\n font-family: SFUIText-Regular;\n background: #182738;\n box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.2);\n border-radius: 2px;\n padding: 12px;\n width: 300px;\n z-index: 10;\n\n .popup-pointer {\n content: '';\n position: absolute;\n width: 0;\n height: 0;\n border-left: 5px solid transparent;\n border-right: 5px solid transparent;\n border-bottom: 5px solid ", ";\n\n bottom: 5px;\n left: 66%;\n -webkit-transform: rotate(180deg);\n -ms-transform: translate(180deg);\n transform: translate(180deg);\n }\n\n .overlapping-episod-list-container {\n max-height: 165px;\n overflow: scroll;\n ::-webkit-scrollbar {\n display: none;\n }\n -ms-overflow-style: none; /* IE and Edge */\n scrollbar-width: none;\n }\n\n .divider {\n height: 1px;\n width: 100%;\n margin: 10px 0;\n background: #303f51;\n }\n .header-container {\n display: flex;\n position: relative;\n .thumbnail {\n width: 100px;\n height: 55px;\n background-size: cover !important;\n background-repeat: no-repeat !important;\n margin-right: 10px;\n border-radius: 2px;\n }\n .episod-title {\n font-size: 12px;\n margin-bottom: 8px;\n max-width: 180px;\n line-height: 14px;\n color: #fff;\n }\n .episod-details {\n font-size: 10px;\n color: #afb2ba;\n }\n }\n\n .overlappig-popup-title {\n font-size: 12px;\n line-height: 12px;\n color: #afb2ba;\n margin-bottom: 15px;\n }\n }\n }\n\n :hover {\n .overlappig-popup-container {\n opacity: 1;\n pointer-events: all;\n }\n }\n p {\n font-size: 12px;\n margin-left: 5px;\n height: 12px;\n }\n }\n .meta-row {\n display: flex;\n align-items: center;\n margin-top: 6px;\n cursor: default;\n column-gap: 10px\n }\n .category-count {\n margin-top: 6px;\n color: #afb2ba;\n font-family: SFUIText-Regular;\n font-size: 10px;\n line-height: 12px;\n }\n .meta-badge {\n ", "\n font-size: 8px;\n line-height: 12px;\n padding: 1px 3px;\n border-radius: 4px;\n font-family: SFUIText-Regular;\n min-height: 12px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n .meta-text {\n color: ", ";\n font-family: SFUIText-Regular;\n font-size: 10px;\n font-style: normal;\n font-weight: 300;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .footer-row {\n display: flex;\n align-items: center;\n margin-top: 16px;\n column-gap: 12px;\n position: relative;\n cursor: default;\n }\n .meta-row + .footer-row {\n margin-top: 10px;\n }\n .footer-text {\n color: #afb2ba;\n font-family: SFUIText-Regular;\n font-size: 8px;\n line-height: 10px;\n margin-right: 0;\n }\n .footer-icons {\n margin-left: auto;\n display: inline-flex;\n align-items: center;\n gap: 8px;\n }\n .footer-icon {\n color: #afb2ba;\n font-family: SFUIText-Regular;\n font-size: 8px;\n line-height: 12px;\n display: inline-flex;\n align-items: center;\n }\n .footer-text-language {\n color: #afb2ba;\n font-family: SFUIText-Regular;\n font-size: 8px;\n line-height: 10px;\n margin-right: 0;\n text-transform: capitalize;\n }\n"])), function (_ref2) {
|
|
37
37
|
var type = _ref2.type,
|
|
38
38
|
width = _ref2.width;
|
|
39
39
|
return type === 'search' || width === 'sm' ? 'auto' : width === 'md' ? '74px' : '90px';
|
|
@@ -55,19 +55,25 @@ var ContentStyles = _styledComponents["default"].div(_templateObject5 || (_templ
|
|
|
55
55
|
}, function (_ref6) {
|
|
56
56
|
var type = _ref6.type,
|
|
57
57
|
width = _ref6.width;
|
|
58
|
-
return type === 'search' || width === 'sm' ? 'auto' : width === 'md' ? '62px' : '
|
|
58
|
+
return type === 'search' || width === 'sm' ? 'auto' : width === 'md' ? '62px' : '';
|
|
59
|
+
}, function (_ref7) {
|
|
60
|
+
var type = _ref7.type,
|
|
61
|
+
width = _ref7.width;
|
|
62
|
+
if (type === 'search' || width === 'sm') return 'height: auto;';
|
|
63
|
+
if (width === 'md') return 'height: 62px;';
|
|
64
|
+
return '';
|
|
59
65
|
}, function (props) {
|
|
60
66
|
return _tokens.colors[props.theme].filter.rgbthemeColor;
|
|
61
67
|
}, function (props) {
|
|
62
68
|
return _tokens.colors[props.theme].card.themeColor;
|
|
63
|
-
}, function (
|
|
64
|
-
var upload_type =
|
|
69
|
+
}, function (_ref8) {
|
|
70
|
+
var upload_type = _ref8.upload_type;
|
|
65
71
|
var isRC = (upload_type === null || upload_type === void 0 ? void 0 : upload_type.toLowerCase()) === 'rc';
|
|
66
72
|
var color = isRC ? '#ff6327' : '#00CEC6';
|
|
67
73
|
var bg = isRC ? 'rgba(255, 99, 39, 0.1)' : 'rgba(0, 206, 198, 0.1)';
|
|
68
74
|
return (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n border: 1px solid ", ";\n color: ", ";\n background-color: ", ";\n "])), color, color, bg);
|
|
69
|
-
}, function (
|
|
70
|
-
var upload_type =
|
|
75
|
+
}, function (_ref9) {
|
|
76
|
+
var upload_type = _ref9.upload_type;
|
|
71
77
|
return upload_type && upload_type.toLowerCase() === 'rc' ? '#ff6327' : '#00CEC6';
|
|
72
78
|
});
|
|
73
79
|
var SeasonEpisodeContainer = _styledComponents["default"].span(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n display: inline-flex;\n flex-shrink: 0;\n padding: 2px 6px;\n justify-content: center;\n align-items: center;\n gap: 4px;\n border-radius: 3px;\n background: rgba(255, 255, 255, 0.1);\n color: var(--Color-Text-color-Text-500, #999);\n text-align: center;\n font-family: 'SFUITEXT-LIGHT';\n font-size: 8px;\n font-style: normal;\n font-weight: 400;\n height: auto;\n width: auto;\n margin-left: 6px;\n span {\n padding: 0px 2px;\n }\n"])));
|
|
@@ -219,8 +225,9 @@ var ContentV2 = function ContentV2(props) {
|
|
|
219
225
|
}, footerIcons.map(function (icon) {
|
|
220
226
|
return /*#__PURE__*/_react["default"].createElement("span", {
|
|
221
227
|
key: icon.name,
|
|
222
|
-
className: "footer-icon"
|
|
223
|
-
title
|
|
228
|
+
className: "footer-icon"
|
|
229
|
+
// title={icon.tooltipLabel}
|
|
230
|
+
,
|
|
224
231
|
onMouseEnter: function onMouseEnter() {
|
|
225
232
|
return setIsFooterIconHovered(true);
|
|
226
233
|
},
|
|
@@ -32,7 +32,7 @@ var assetStyles = {
|
|
|
32
32
|
}
|
|
33
33
|
};
|
|
34
34
|
var HoverActionButton = _styledComponents["default"].button(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n ", ";\n border: none;\n cursor: pointer;\n width: 26px;\n height: 26px;\n border-radius: 15px;\n display: flex;\n align-items: center;\n justify-content: center;\n opacity: 0;\n transition: opacity 200ms ease;\n"])), OverlayBackgroundStyles);
|
|
35
|
-
var ThumbnailStyles = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n position: relative;\n background: ", ";\n background-color: ", ";\n background-size: ", ";\n width: ", ";\n height: ", ";\n border-radius: 8px 8px 0 0;\n
|
|
35
|
+
var ThumbnailStyles = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n position: relative;\n background: ", ";\n background-color: ", ";\n background-size: ", ";\n width: ", ";\n height: ", ";\n border-radius: 8px 8px 0 0;\n\n .iframe-image-block {\n cursor: ", ";\n background: #000;\n opacity: 0;\n &:hover {\n opacity: 1;\n }\n .hover-pointer {\n position: absolute;\n width: 1px;\n height: 100%;\n top: 0;\n background: #fff;\n pointer-events: none;\n z-index: 1;\n }\n }\n .background-block {\n position: absolute;\n z-index: 1;\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n overflow: hidden;\n .circle {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n background-color: #15212f;\n }\n i {\n position: absolute;\n left: 50%;\n top: 50%;\n transform: translate(-50%, -50%);\n }\n img {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: auto;\n }\n }\n .thumbnail-image-block {\n cursor: pointer;\n background: linear-gradient(359deg, #182738 19.98%, #182738 48.97%, rgba(24, 39, 56, 0.42) 99.47%);\n }\n\n &:hover ", " {\n opacity: 1;\n }\n"])), function (_ref) {
|
|
36
36
|
var thumbnail = _ref.thumbnail;
|
|
37
37
|
return "url(".concat(thumbnail, ") no-repeat 50%");
|
|
38
38
|
}, function (_ref2) {
|
|
@@ -63,7 +63,7 @@ var StatusBoxStyles = _styledComponents["default"].div(_templateObject6 || (_tem
|
|
|
63
63
|
});
|
|
64
64
|
var IconButtonStyles = (0, _styledComponents["default"])(function (props) {
|
|
65
65
|
return /*#__PURE__*/_react["default"].createElement(_cardV.BaseButtonStyles, props);
|
|
66
|
-
})(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n ", ";\n\n .tooltip {\n position: absolute;\n bottom: 130%;\n
|
|
66
|
+
})(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n ", ";\n\n .tooltip {\n position: absolute;\n bottom: 130%;\n right: 0;\n transform: translateX(0);\n padding: 5px 9px;\n box-sizing: border-box;\n background: #000000;\n color: #fff;\n border-radius: 10px;\n width: max-content;\n max-width: 200px;\n white-space: normal;\n overflow-wrap: break-word;\n text-align: center;\n visibility: hidden;\n opacity: 0;\n z-index: 10;\n transition: all 350ms ease-in-out 0s;\n &:after {\n content: '';\n position: absolute;\n border-left: 5px solid transparent;\n border-right: 5px solid transparent;\n border-top: 5px solid #000;\n bottom: -5px;\n left: 50%;\n }\n .details-header {\n color: #666666;\n font-family: 'SFUIText-Regular';\n text-transform: none;\n margin-bottom: 8px;\n }\n .details-value {\n color: #999999;\n font-family: 'SFUIText-Light';\n text-transform: none;\n font-size: 10px;\n }\n }\n\n &:hover {\n background-color: ", ";\n .tooltip {\n opacity: 1;\n visibility: visible;\n }\n }\n &:active,\n &:focus {\n outline: none;\n }\n"])), OverlayBackgroundStyles, function (props) {
|
|
67
67
|
return _tokens.colors[props.theme].card.themeColor;
|
|
68
68
|
});
|
|
69
69
|
var CardHeader = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n justify-content: space-between;\n padding: 10px;\n"])));
|
package/atoms/icon/icons.json
CHANGED
|
@@ -1966,8 +1966,8 @@
|
|
|
1966
1966
|
"paths": [
|
|
1967
1967
|
"M7.125 9.375L12.375 6L7.125 2.625V9.375ZM4.5 12C4.0875 12 3.73438 11.8531 3.44063 11.5594C3.14688 11.2656 3 10.9125 3 10.5V1.5C3 1.0875 3.14688 0.734375 3.44063 0.440625C3.73438 0.146875 4.0875 0 4.5 0H13.5C13.9125 0 14.2656 0.146875 14.5594 0.440625C14.8531 0.734375 15 1.0875 15 1.5V10.5C15 10.9125 14.8531 11.2656 14.5594 11.5594C14.2656 11.8531 13.9125 12 13.5 12H4.5ZM1.5 15C1.0875 15 0.734375 14.8531 0.440625 14.5594C0.146875 14.2656 0 13.9125 0 13.5V3H1.5V13.5H12V15H1.5Z"
|
|
1968
1968
|
],
|
|
1969
|
-
"width":
|
|
1970
|
-
"height":
|
|
1969
|
+
"width": 15,
|
|
1970
|
+
"height": 15
|
|
1971
1971
|
},
|
|
1972
1972
|
"folder-icon": {
|
|
1973
1973
|
"paths": [
|
package/package.json
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@desynova-digital/components",
|
|
3
|
-
"version": "9.2.
|
|
3
|
+
"version": "9.2.11",
|
|
4
4
|
"description": "Components for Desynova Digital",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"author": "desynova-digital",
|
|
7
7
|
"license": "MIT",
|
|
8
8
|
"repository": "desynova-digital",
|
|
9
9
|
"dependencies": {
|
|
10
|
-
"@desynova-digital/tokens": "9.2.
|
|
10
|
+
"@desynova-digital/tokens": "9.2.11",
|
|
11
11
|
"prop-types": "^15.7.2",
|
|
12
12
|
"styled-components": "^4.3.2"
|
|
13
13
|
},
|