@desynova-digital/components 8.19.37 → 8.19.39
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/atoms/icon/icons.json
CHANGED
|
@@ -1511,30 +1511,30 @@
|
|
|
1511
1511
|
"fillRule": "evenodd",
|
|
1512
1512
|
"clipRule": "evenodd",
|
|
1513
1513
|
"width": 12,
|
|
1514
|
-
"height":12
|
|
1514
|
+
"height": 12
|
|
1515
1515
|
},
|
|
1516
1516
|
"backward-shift-icon": {
|
|
1517
1517
|
"paths": [
|
|
1518
1518
|
"M7.70508 2.11508L3.12508 6.70508L7.70508 11.2951L6.29508 12.7051L0.295078 6.70508L6.29508 0.705078L7.70508 2.11508Z"
|
|
1519
1519
|
],
|
|
1520
1520
|
"width": 8,
|
|
1521
|
-
"height":13
|
|
1521
|
+
"height": 13
|
|
1522
1522
|
},
|
|
1523
1523
|
"forward-shift-all-icon": {
|
|
1524
1524
|
"paths": [
|
|
1525
|
-
"M4.43836 5.80177L0 1.36342L1.36342 0L7.16519 5.80177L1.36342 11.6035L0 10.2401L4.43836 5.80177ZM12 0H10.0661V11.6035H12V0Z"
|
|
1525
|
+
"M4.43836 5.80177L0 1.36342L1.36342 0L7.16519 5.80177L1.36342 11.6035L0 10.2401L4.43836 5.80177ZM12 0H10.0661V11.6035H12V0Z"
|
|
1526
1526
|
],
|
|
1527
1527
|
"fillRule": "evenodd",
|
|
1528
1528
|
"clipRule": "evenodd",
|
|
1529
1529
|
"width": 12,
|
|
1530
|
-
"height":12
|
|
1530
|
+
"height": 12
|
|
1531
1531
|
},
|
|
1532
1532
|
"forward-shift-icon": {
|
|
1533
1533
|
"paths": [
|
|
1534
|
-
"M0.294922 2.11508L4.87492 6.70508L0.294922 11.2951L1.70492 12.7051L7.70492 6.70508L1.70492 0.705078L0.294922 2.11508Z"
|
|
1534
|
+
"M0.294922 2.11508L4.87492 6.70508L0.294922 11.2951L1.70492 12.7051L7.70492 6.70508L1.70492 0.705078L0.294922 2.11508Z"
|
|
1535
1535
|
],
|
|
1536
1536
|
"width": 8,
|
|
1537
|
-
"height":13
|
|
1537
|
+
"height": 13
|
|
1538
1538
|
},
|
|
1539
1539
|
"forward-backward-icon": {
|
|
1540
1540
|
"paths": [
|
|
@@ -1543,14 +1543,21 @@
|
|
|
1543
1543
|
"fillRule": "evenodd",
|
|
1544
1544
|
"clipRule": "evenodd",
|
|
1545
1545
|
"width": 21,
|
|
1546
|
-
"height":16
|
|
1546
|
+
"height": 16
|
|
1547
1547
|
},
|
|
1548
1548
|
"export-download-icon": {
|
|
1549
1549
|
"paths": [
|
|
1550
1550
|
"M7.35685 14.632C6.51241 14.5431 5.72907 14.3098 5.00685 13.932C4.28463 13.5543 3.65963 13.0654 3.13185 12.4654C2.60407 11.8654 2.19019 11.182 1.89019 10.4154C1.59019 9.6487 1.44019 8.83759 1.44019 7.98203C1.44019 6.25981 2.00407 4.76536 3.13185 3.4987C4.25963 2.23203 5.67352 1.50981 7.37352 1.33203V2.33203C5.9513 2.54314 4.77352 3.18203 3.84019 4.2487C2.90685 5.31536 2.44019 6.55981 2.44019 7.98203C2.44019 9.40425 2.90407 10.6487 3.83185 11.7154C4.75963 12.782 5.93463 13.4209 7.35685 13.632V14.632ZM8.09019 11.332L4.75685 7.9987L5.47352 7.28203L7.59019 9.3987V4.66536H8.59019V9.3987L10.7069 7.28203L11.4235 7.9987L8.09019 11.332ZM8.82352 14.632V13.632C9.33463 13.5654 9.8263 13.4348 10.2985 13.2404C10.7707 13.0459 11.2069 12.7876 11.6069 12.4654L12.3402 13.1987C11.8291 13.5876 11.2763 13.9098 10.6819 14.1654C10.0874 14.4209 9.46796 14.5765 8.82352 14.632ZM11.6235 3.51536C11.2013 3.21536 10.7569 2.96259 10.2902 2.75703C9.82352 2.55148 9.33463 2.40981 8.82352 2.33203V1.33203C9.46796 1.40981 10.0846 1.5737 10.6735 1.8237C11.2624 2.0737 11.818 2.39314 12.3402 2.78203L11.6235 3.51536ZM13.2902 12.1654L12.5735 11.4654C12.8957 11.0543 13.1513 10.6126 13.3402 10.1404C13.5291 9.66814 13.6569 9.17648 13.7235 8.66536H14.7402C14.6624 9.30981 14.5013 9.92925 14.2569 10.5237C14.0124 11.1181 13.6902 11.6654 13.2902 12.1654ZM13.7235 7.2987C13.6569 6.78759 13.5291 6.29314 13.3402 5.81536C13.1513 5.33759 12.8957 4.8987 12.5735 4.4987L13.3569 3.81536C13.7457 4.32648 14.0569 4.87648 14.2902 5.46536C14.5235 6.05425 14.6735 6.66536 14.7402 7.2987H13.7235Z"
|
|
1551
1551
|
],
|
|
1552
1552
|
"width": 17,
|
|
1553
|
-
"height":16
|
|
1553
|
+
"height": 16
|
|
1554
|
+
},
|
|
1555
|
+
"document-icon": {
|
|
1556
|
+
"paths": [
|
|
1557
|
+
"M3.66732 12.3307H10.334V13.9974H3.66732V12.3307ZM3.66732 8.99739H10.334V10.6641H3.66732V8.99739ZM8.66732 0.664062H2.00065C1.08398 0.664062 0.333984 1.41406 0.333984 2.33073V15.6641C0.333984 16.5807 1.07565 17.3307 1.99232 17.3307H12.0007C12.9173 17.3307 13.6673 16.5807 13.6673 15.6641V5.66406L8.66732 0.664062ZM12.0007 15.6641H2.00065V2.33073H7.83398V6.4974H12.0007V15.6641Z"
|
|
1558
|
+
],
|
|
1559
|
+
"width": 14,
|
|
1560
|
+
"height": 18
|
|
1554
1561
|
}
|
|
1555
1562
|
}
|
|
1556
1563
|
}
|
|
@@ -76,7 +76,8 @@ var Textarea = function Textarea(_ref) {
|
|
|
76
76
|
_react2.default.createElement(Textarea.Element, _extends({
|
|
77
77
|
type: type,
|
|
78
78
|
value: props.value,
|
|
79
|
-
defaultValue: defaultValue
|
|
79
|
+
defaultValue: defaultValue,
|
|
80
|
+
maxLength: maxLength
|
|
80
81
|
}, props)),
|
|
81
82
|
props.label ? _react2.default.createElement(
|
|
82
83
|
"label",
|
|
@@ -8,7 +8,7 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
|
|
|
8
8
|
|
|
9
9
|
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
|
|
10
10
|
|
|
11
|
-
var _templateObject = _taggedTemplateLiteral(["\n font-family: \"SFUIText-Regular\";\n width: ", ";\n height: ", ";\n\n cursor: ", ";\n pointer-events: ", ";\n .image-box {\n position: relative;\n height: ", ";\n width: ", ";\n .iframe-image-block {\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n cursor: pointer;\n overflow: hidden;\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 img {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: auto;\n }\n }\n & > img {\n top: 0px;\n left: 0px;\n transform: none;\n }\n .bottom-box {\n position: absolute;\n bottom: 0;\n width: 100%;\n padding: 30px 15px 15px;\n color: #fff;\n word-break: break-word;\n background: linear-gradient(\n to top,\n rgba(0, 0, 0, 0.77) 0%,\n rgba(99, 99, 99, 0.85) 72%,\n rgba(78, 78, 78, 0.64) 84%,\n rgba(255, 255, 255, 0) 100%\n );\n }\n .thumbnail-overlay-text {\n position: absolute;\n height: 100%;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 22px;\n text-transform: uppercase;\n background: rgba(53, 53, 53, 0.78);\n color: #ddd;\n font-family: \"SFUIText-Medium\";\n }\n .top-tag-list {\n position: absolute;\n top: 0px;\n max-width: 100%;\n padding: 10px;\n\n .top-tag-item {\n background: #152130;\n color: #fff;\n padding: 2px 5px;\n border-radius: 2px;\n font-size: 12px;\n text-transform: capitalize;\n }\n }\n .more-action-box {\n display: flex;\n justify-content: center;\n right: 5px;\n top: 0;\n position: absolute;\n z-index: 1;\n cursor: default;\n align-items: center;\n .more-action-item {\n width: 26px;\n height: 26px;\n background-color: rgba(0, 0, 0, 0.5);\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n margin: 10px 5px;\n cursor: pointer;\n transition: all 350ms ease-in-out;\n position: relative;\n &:hover {\n background: #00cec6;\n .info-section {\n visibility: visible;\n opacity: 1;\n width: auto;\n height: auto;\n padding: 30px;\n }\n }\n .info-section {\n width: 0;\n height: 0;\n visibility: hidden;\n opacity: 0;\n transition: opacity 350ms ease-in-out;\n position: absolute;\n left: 90%;\n background: #15212f;\n box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.2);\n border-radius: 10px;\n padding: 0px;\n margin-left: 9px;\n top: -30px;\n &.left-alligned {\n left: 100%;\n transform: translateX(calc(-100% - 45px));\n &:before {\n content: \"\";\n position: absolute;\n border-left: 5px solid #00cec6;\n border-top: 5px solid transparent;\n border-bottom: 5px solid transparent;\n border-right: none;\n left: 100%;\n top: 38px;\n }\n }\n &:before {\n content: \"\";\n position: absolute;\n border-right: 5px solid #00cec6;\n border-top: 5px solid transparent;\n border-bottom: 5px solid transparent;\n left: -5px;\n top: 38px;\n }\n }\n i {\n line-height: 0;\n }\n }\n .asset-status-chip {\n background: rgba(0, 0, 0, 0.5);\n backdrop-filter: blur(30px);\n border-radius: 15px;\n padding: 5px 10px;\n font-size: 10px;\n line-height: 10px;\n display: flex;\n width: fit-content;\n position: relative;\n justify-content: center;\n align-items: center;\n box-sizing: border-box;\n color: #fff;\n max-height: 20px;\n position: relative;\n margin: 0px 5px;\n\n .status-color {\n width: 8px;\n height: 8px;\n border-radius: 100%;\n margin-right: 5px;\n background: #fff;\n }\n\n &.review,\n &.pending,\n &.in-progress,\n &.in-queue {\n .status-color {\n background: #f9e900;\n }\n }\n &.approved,\n &.finished,\n &.upload-fc,\n &.upload-revised-fc {\n .status-color {\n background: #18b96e;\n }\n }\n &.rejected,\n &.cancelled {\n .status-color {\n background: #ff6c56;\n }\n }\n }\n }\n }\n .details-box {\n background: #15212f;\n color: #fff;\n position: relative;\n padding: 15px;\n font-size: 12px;\n transition: all 0.2s ease;\n /* border-radius: 0 0 4px 4px; */\n .main-text {\n font-family: \"SFUIText-Medium\";\n // padding-bottom: 5px;\n margin-bottom: 5px;\n height: auto;\n overflow: hidden;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n word-break: break-word;\n line-height: 17px;\n }\n .bottom-section {\n display: flex;\n justify-content: space-between;\n align-items: center;\n .section-left {\n display: flex;\n justify-content: center;\n align-items: center;\n .upload-status {\n font-size: 10px;\n margin-right: 10px;\n animation: fadein 1s infinite ease-in-out;\n }\n .h2,\n .h3,\n .h4 {\n font-size: 10px;\n height: auto;\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n word-break: break-word;\n overflow: hidden;\n text-overflow: ellipsis;\n -webkit-line-clamp: 1;\n margin-right: 10px;\n }\n .h3,\n .h4 {\n display: flex;\n justify-content: center;\n align-items: center;\n p {\n margin-left: 5px;\n }\n }\n }\n .section-right {\n .status {\n font-size: 10px;\n &.pending,\n &.in-progress,\n &.in-queue {\n color: #f9e900;\n }\n &.approved,\n &.finished {\n color: #18b96e;\n }\n &.rejected,\n &.cancelled {\n color: #ff6c56;\n }\n }\n }\n }\n }\n .actions-box {\n position: relative;\n .action-button-holder {\n position: absolute;\n bottom: 15px;\n right: 0px;\n .action-button {\n display: inline-flex;\n margin-right: 15px;\n background: #00cec6;\n border: 0px solid #00cec6;\n }\n }\n }\n .gradient-icon {\n position: relative;\n div {\n position: absolute;\n bottom: 20px;\n right: 20px;\n }\n }\n .video-card-box {\n background: transparent;\n width: 100%;\n border-radius: 5px;\n .media-box {\n display: table;\n width: 100%;\n padding-bottom: 20px;\n position: relative;\n cursor: pointer;\n .left-side {\n display: inline-block;\n overflow: hidden;\n position: relative;\n display: table-cell;\n overflow: hidden;\n border: 0px solid;\n border-right: 0px;\n vertical-align: middle;\n\n .thumbnail-as {\n font-family: DINCondensed-Bold;\n width: 100%;\n text-align: left;\n font-size: 70px;\n height: 100%;\n color: #303f51;\n }\n .image-box {\n transition: all 0.2s ease;\n width: ", ";\n\n height: ", ";\n\n background-size: auto 100%, cover;\n background-position: 50% 50%;\n font-size: 40px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #848c94;\n\n .play-icon-box {\n background: #90909066;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n justify-content: center;\n align-items: center;\n display: none;\n }\n }\n\n .bottom-text {\n color: #aaaaaa;\n font-size: 10px;\n padding-top: 8px;\n }\n }\n .right-side {\n vertical-align: top;\n display: table-cell;\n position: relative;\n width: ", ";\n\n .main-text {\n font-size: 14px;\n font-family: \"SFUIText-Medium\";\n color: #fff;\n margin: 0px 0px 6px;\n padding: 0px 15px;\n line-height: 1.17;\n height: 83px;\n overflow: hidden;\n display: -webkit-box;\n -webkit-line-clamp: 5;\n -webkit-box-orient: vertical;\n word-break: break-word;\n }\n .bottom-fixed-text {\n font-size: 10px;\n font-family: \"SFUIText-Medium\";\n color: #aaaaaa;\n position: absolute;\n bottom: 0px;\n padding: 0px 15px;\n }\n }\n &.small .main-text {\n height: 29px;\n overflow: hidden;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n font-size: 12px;\n }\n &:hover {\n .left-side {\n .image-box {\n background-size: auto 120%, cover;\n .play-icon-box {\n display: flex;\n }\n }\n }\n .right-side {\n .main-text {\n color: #00cec6;\n }\n }\n }\n }\n }\n &:hover {\n .image-box {\n .full-top {\n height: 155px;\n overflow: hidden;\n }\n }\n .details-box {\n .main-text {\n color: #00cec6;\n transition: color 0.5s;\n }\n &.selectable {\n background: #121d29;\n .sub-text {\n color: #ccc;\n }\n .bottom {\n color: #aaa;\n }\n }\n }\n .actions-box {\n .action-button-holder {\n .action-button {\n background: #fff;\n ", " {\n path {\n fill: #00cec6;\n }\n }\n }\n }\n }\n }\n .sub-title {\n font-size: 10px;\n color: #aaaaaa;\n margin-right: 10px;\n }\n .segment-indicator {\n display: inline-block;\n border-width: 0px 1px;\n margin-left: 17px;\n font-size: 10px;\n color: #fff;\n position: relative;\n padding-left: 8px;\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: #00cec6;\n border-radius: 50%;\n }\n }\n .check-box-holder {\n position: absolute;\n right: 10px;\n bottom: 10px;\n }\n input[type=\"checkbox\"] {\n height: 0;\n width: 0;\n display: none;\n }\n input[type=\"checkbox\"] + label {\n position: relative;\n display: inline-block; // flex;\n margin: 0;\n align-items: center;\n color: #cccccc;\n font-size: 13px;\n transition: color 250ms cubic-bezier(0.4, 0, 0.23, 1);\n font-family: SFUIText-Regular;\n cursor: pointer;\n &.list-title {\n display: inline-block;\n }\n }\n input[type=\"checkbox\"]:disabled + label {\n color: #999;\n cursor: not-allowed;\n &:hover > span,\n &:focus + label > span {\n background: transparent;\n }\n }\n input[type=\"checkbox\"]:checked:disabled + label > span {\n border: 10px solid rgba(73, 218, 208, 0.45);\n &:before {\n //background: #ddd;\n }\n }\n input[type=\"checkbox\"] + label > span {\n display: inline-block; // flex;\n justify-content: center;\n align-items: center;\n width: 20px;\n height: 20px;\n background: transparent;\n border: 1px solid #9e9e9e;\n border-radius: 50%;\n cursor: pointer;\n transition: all 250ms cubic-bezier(0.4, 0, 0.23, 1);\n }\n input[type=\"checkbox\"] + label:hover > span,\n input[type=\"checkbox\"]:focus + label > span {\n background: rgba(255, 255, 255, 0.1);\n }\n input[type=\"checkbox\"]:checked + label > span {\n border: 10px solid #49dad0;\n animation: shrink-bounce 200ms cubic-bezier(0.4, 0, 0.23, 1);\n }\n input[type=\"checkbox\"]:checked + label > span:before {\n content: \"\";\n position: absolute;\n top: 6px;\n left: 4px;\n border-right: 2px solid transparent;\n border-bottom: 2px solid transparent;\n transform: rotate(45deg);\n transform-origin: 0% 100%;\n animation: checkbox-check 125ms 250ms cubic-bezier(0.4, 0, 0.23, 1) forwards;\n }\n .gradient-box {\n display: flex;\n height: 100%;\n width: 100%;\n font-family: \"SFUIText-Medium\";\n background-image: ", ";\n position: relative;\n border-radius: 2px;\n\n .main-text {\n color: #fff;\n font-size: 32px;\n padding: 15px;\n height: 145px;\n overflow: hidden;\n display: -webkit-box;\n -webkit-line-clamp: 4;\n -webkit-box-orient: vertical;\n word-break: break-word;\n }\n\n .bottom {\n position: absolute;\n bottom: 0px;\n padding: 15px;\n color: #fff;\n font-size: 12px;\n & > i {\n margin-right: 5px;\n }\n }\n }\n @keyframes shrink-bounce {\n 0% {\n transform: scale(1);\n }\n 33% {\n transform: scale(0.85);\n }\n 100% {\n transform: scale(1);\n }\n }\n @keyframes checkbox-check {\n 0% {\n width: 0;\n height: 0;\n border-color: #fff;\n transform: translate3d(0, 0, 0) rotate(45deg);\n }\n 33% {\n width: 4px;\n height: 0;\n transform: translate3d(0, 0, 0) rotate(45deg);\n }\n 100% {\n width: 4px;\n height: 9px;\n border-color: #fff;\n transform: translate3d(0, -0.5em, 0) rotate(45deg);\n }\n }\n @keyframes fadein {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n"], ["\n font-family: \"SFUIText-Regular\";\n width: ", ";\n height: ", ";\n\n cursor: ", ";\n pointer-events: ", ";\n .image-box {\n position: relative;\n height: ", ";\n width: ", ";\n .iframe-image-block {\n position: absolute;\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n cursor: pointer;\n overflow: hidden;\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 img {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: auto;\n }\n }\n & > img {\n top: 0px;\n left: 0px;\n transform: none;\n }\n .bottom-box {\n position: absolute;\n bottom: 0;\n width: 100%;\n padding: 30px 15px 15px;\n color: #fff;\n word-break: break-word;\n background: linear-gradient(\n to top,\n rgba(0, 0, 0, 0.77) 0%,\n rgba(99, 99, 99, 0.85) 72%,\n rgba(78, 78, 78, 0.64) 84%,\n rgba(255, 255, 255, 0) 100%\n );\n }\n .thumbnail-overlay-text {\n position: absolute;\n height: 100%;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 22px;\n text-transform: uppercase;\n background: rgba(53, 53, 53, 0.78);\n color: #ddd;\n font-family: \"SFUIText-Medium\";\n }\n .top-tag-list {\n position: absolute;\n top: 0px;\n max-width: 100%;\n padding: 10px;\n\n .top-tag-item {\n background: #152130;\n color: #fff;\n padding: 2px 5px;\n border-radius: 2px;\n font-size: 12px;\n text-transform: capitalize;\n }\n }\n .more-action-box {\n display: flex;\n justify-content: center;\n right: 5px;\n top: 0;\n position: absolute;\n z-index: 1;\n cursor: default;\n align-items: center;\n .more-action-item {\n width: 26px;\n height: 26px;\n background-color: rgba(0, 0, 0, 0.5);\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n margin: 10px 5px;\n cursor: pointer;\n transition: all 350ms ease-in-out;\n position: relative;\n &:hover {\n background: #00cec6;\n .info-section {\n visibility: visible;\n opacity: 1;\n width: auto;\n height: auto;\n padding: 30px;\n }\n }\n .info-section {\n width: 0;\n height: 0;\n visibility: hidden;\n opacity: 0;\n transition: opacity 350ms ease-in-out;\n position: absolute;\n left: 90%;\n background: #15212f;\n box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.2);\n border-radius: 10px;\n padding: 0px;\n margin-left: 9px;\n top: -30px;\n &.left-alligned {\n left: 100%;\n transform: translateX(calc(-100% - 45px));\n &:before {\n content: \"\";\n position: absolute;\n border-left: 5px solid #00cec6;\n border-top: 5px solid transparent;\n border-bottom: 5px solid transparent;\n border-right: none;\n left: 100%;\n top: 38px;\n }\n }\n &:before {\n content: \"\";\n position: absolute;\n border-right: 5px solid #00cec6;\n border-top: 5px solid transparent;\n border-bottom: 5px solid transparent;\n left: -5px;\n top: 38px;\n }\n }\n i {\n line-height: 0;\n }\n }\n .asset-status-chip {\n background: rgba(0, 0, 0, 0.5);\n backdrop-filter: blur(30px);\n border-radius: 15px;\n padding: 5px 10px;\n font-size: 10px;\n line-height: 10px;\n display: flex;\n width: fit-content;\n position: relative;\n justify-content: center;\n align-items: center;\n box-sizing: border-box;\n color: #fff;\n max-height: 20px;\n position: relative;\n margin: 0px 5px;\n\n .status-color {\n width: 8px;\n height: 8px;\n border-radius: 100%;\n margin-right: 5px;\n background: #fff;\n }\n\n &.review,\n &.pending,\n &.in-progress,\n &.in-queue {\n .status-color {\n background: #f9e900;\n }\n }\n &.approved,\n &.finished,\n &.upload-fc,\n &.upload-revised-fc {\n .status-color {\n background: #18b96e;\n }\n }\n &.rejected,\n &.cancelled {\n .status-color {\n background: #ff6c56;\n }\n }\n }\n }\n }\n .details-box {\n background: #15212f;\n color: #fff;\n position: relative;\n padding: 15px;\n font-size: 12px;\n transition: all 0.2s ease;\n /* border-radius: 0 0 4px 4px; */\n .main-text {\n font-family: \"SFUIText-Medium\";\n // padding-bottom: 5px;\n margin-bottom: 5px;\n height: auto;\n overflow: hidden;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n word-break: break-word;\n line-height: 17px;\n }\n .bottom-section {\n display: flex;\n justify-content: space-between;\n align-items: center;\n .section-left {\n display: flex;\n justify-content: center;\n align-items: center;\n .upload-status {\n font-size: 10px;\n margin-right: 10px;\n animation: fadein 1s infinite ease-in-out;\n }\n .h2,\n .h3,\n .h4 {\n font-size: 10px;\n height: auto;\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n word-break: break-word;\n overflow: hidden;\n text-overflow: ellipsis;\n -webkit-line-clamp: 1;\n margin-right: 10px;\n }\n .h3,\n .h4 {\n display: flex;\n justify-content: center;\n align-items: center;\n p {\n margin-left: 5px;\n }\n }\n }\n .section-right {\n .status {\n font-size: 10px;\n &.pending,\n &.in-progress,\n &.in-queue {\n color: #f9e900;\n }\n &.approved,\n &.finished {\n color: #18b96e;\n }\n &.rejected,\n &.cancelled {\n color: #ff6c56;\n }\n }\n }\n }\n }\n .actions-box {\n position: relative;\n .action-button-holder {\n position: absolute;\n bottom: 15px;\n right: 0px;\n .action-button {\n display: inline-flex;\n margin-right: 15px;\n background: #00cec6;\n border: 0px solid #00cec6;\n }\n }\n }\n .gradient-icon {\n position: relative;\n div {\n position: absolute;\n bottom: 20px;\n right: 20px;\n }\n }\n .video-card-box {\n background: transparent;\n width: 100%;\n border-radius: 5px;\n .media-box {\n display: table;\n width: 100%;\n padding-bottom: 20px;\n position: relative;\n cursor: pointer;\n .left-side {\n display: inline-block;\n overflow: hidden;\n position: relative;\n display: table-cell;\n overflow: hidden;\n border: 0px solid;\n border-right: 0px;\n vertical-align: middle;\n\n .thumbnail-as {\n font-family: DINCondensed-Bold;\n width: 100%;\n text-align: left;\n font-size: 70px;\n height: 100%;\n color: #303f51;\n }\n .image-box {\n transition: all 0.2s ease;\n width: ", ";\n\n height: ", ";\n\n background-size: auto 100%, cover;\n background-position: 50% 50%;\n font-size: 40px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #848c94;\n\n .play-icon-box {\n background: #90909066;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n justify-content: center;\n align-items: center;\n display: none;\n }\n }\n\n .bottom-text {\n color: #aaaaaa;\n font-size: 10px;\n padding-top: 8px;\n }\n }\n .right-side {\n vertical-align: top;\n display: table-cell;\n position: relative;\n width: ", ";\n\n .main-text {\n font-size: 14px;\n font-family: \"SFUIText-Medium\";\n color: #fff;\n margin: 0px 0px 6px;\n padding: 0px 15px;\n line-height: 1.17;\n height: 83px;\n overflow: hidden;\n display: -webkit-box;\n -webkit-line-clamp: 5;\n -webkit-box-orient: vertical;\n word-break: break-word;\n }\n .bottom-fixed-text {\n font-size: 10px;\n font-family: \"SFUIText-Medium\";\n color: #aaaaaa;\n position: absolute;\n bottom: 0px;\n padding: 0px 15px;\n }\n }\n &.small .main-text {\n height: 29px;\n overflow: hidden;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n font-size: 12px;\n }\n &:hover {\n .left-side {\n .image-box {\n background-size: auto 120%, cover;\n .play-icon-box {\n display: flex;\n }\n }\n }\n .right-side {\n .main-text {\n color: #00cec6;\n }\n }\n }\n }\n }\n &:hover {\n .image-box {\n .full-top {\n height: 155px;\n overflow: hidden;\n }\n }\n .details-box {\n .main-text {\n color: #00cec6;\n transition: color 0.5s;\n }\n &.selectable {\n background: #121d29;\n .sub-text {\n color: #ccc;\n }\n .bottom {\n color: #aaa;\n }\n }\n }\n .actions-box {\n .action-button-holder {\n .action-button {\n background: #fff;\n ", " {\n path {\n fill: #00cec6;\n }\n }\n }\n }\n }\n }\n .sub-title {\n font-size: 10px;\n color: #aaaaaa;\n margin-right: 10px;\n }\n .segment-indicator {\n display: inline-block;\n border-width: 0px 1px;\n margin-left: 17px;\n font-size: 10px;\n color: #fff;\n position: relative;\n padding-left: 8px;\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: #00cec6;\n border-radius: 50%;\n }\n }\n .check-box-holder {\n position: absolute;\n right: 10px;\n bottom: 10px;\n }\n input[type=\"checkbox\"] {\n height: 0;\n width: 0;\n display: none;\n }\n input[type=\"checkbox\"] + label {\n position: relative;\n display: inline-block; // flex;\n margin: 0;\n align-items: center;\n color: #cccccc;\n font-size: 13px;\n transition: color 250ms cubic-bezier(0.4, 0, 0.23, 1);\n font-family: SFUIText-Regular;\n cursor: pointer;\n &.list-title {\n display: inline-block;\n }\n }\n input[type=\"checkbox\"]:disabled + label {\n color: #999;\n cursor: not-allowed;\n &:hover > span,\n &:focus + label > span {\n background: transparent;\n }\n }\n input[type=\"checkbox\"]:checked:disabled + label > span {\n border: 10px solid rgba(73, 218, 208, 0.45);\n &:before {\n //background: #ddd;\n }\n }\n input[type=\"checkbox\"] + label > span {\n display: inline-block; // flex;\n justify-content: center;\n align-items: center;\n width: 20px;\n height: 20px;\n background: transparent;\n border: 1px solid #9e9e9e;\n border-radius: 50%;\n cursor: pointer;\n transition: all 250ms cubic-bezier(0.4, 0, 0.23, 1);\n }\n input[type=\"checkbox\"] + label:hover > span,\n input[type=\"checkbox\"]:focus + label > span {\n background: rgba(255, 255, 255, 0.1);\n }\n input[type=\"checkbox\"]:checked + label > span {\n border: 10px solid #49dad0;\n animation: shrink-bounce 200ms cubic-bezier(0.4, 0, 0.23, 1);\n }\n input[type=\"checkbox\"]:checked + label > span:before {\n content: \"\";\n position: absolute;\n top: 6px;\n left: 4px;\n border-right: 2px solid transparent;\n border-bottom: 2px solid transparent;\n transform: rotate(45deg);\n transform-origin: 0% 100%;\n animation: checkbox-check 125ms 250ms cubic-bezier(0.4, 0, 0.23, 1) forwards;\n }\n .gradient-box {\n display: flex;\n height: 100%;\n width: 100%;\n font-family: \"SFUIText-Medium\";\n background-image: ", ";\n position: relative;\n border-radius: 2px;\n\n .main-text {\n color: #fff;\n font-size: 32px;\n padding: 15px;\n height: 145px;\n overflow: hidden;\n display: -webkit-box;\n -webkit-line-clamp: 4;\n -webkit-box-orient: vertical;\n word-break: break-word;\n }\n\n .bottom {\n position: absolute;\n bottom: 0px;\n padding: 15px;\n color: #fff;\n font-size: 12px;\n & > i {\n margin-right: 5px;\n }\n }\n }\n @keyframes shrink-bounce {\n 0% {\n transform: scale(1);\n }\n 33% {\n transform: scale(0.85);\n }\n 100% {\n transform: scale(1);\n }\n }\n @keyframes checkbox-check {\n 0% {\n width: 0;\n height: 0;\n border-color: #fff;\n transform: translate3d(0, 0, 0) rotate(45deg);\n }\n 33% {\n width: 4px;\n height: 0;\n transform: translate3d(0, 0, 0) rotate(45deg);\n }\n 100% {\n width: 4px;\n height: 9px;\n border-color: #fff;\n transform: translate3d(0, -0.5em, 0) rotate(45deg);\n }\n }\n @keyframes fadein {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n"]);
|
|
11
|
+
var _templateObject = _taggedTemplateLiteral(["\n font-family: \"SFUIText-Regular\";\n width: ", ";\n height: ", ";\n\n cursor: ", ";\n pointer-events: ", ";\n .image-box {\n position: relative;\n height: ", ";\n width: ", ";\n .thumbnail-image-block{\n position: absolute;\n z-index: 1;\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n cursor: pointer;\n overflow: hidden;\n background: #182738;;\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 } \n & > img {\n top: 0px;\n left: 0px;\n transform: none;\n }\n .iframe-image-block {\n position: absolute;\n z-index: 2;\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n cursor: pointer;\n overflow: hidden;\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 img {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: auto;\n }\n }\n & > img {\n top: 0px;\n left: 0px;\n transform: none;\n }\n .bottom-box {\n position: absolute;\n bottom: 0;\n width: 100%;\n padding: 30px 15px 15px;\n color: #fff;\n word-break: break-word;\n background: linear-gradient(\n to top,\n rgba(0, 0, 0, 0.77) 0%,\n rgba(99, 99, 99, 0.85) 72%,\n rgba(78, 78, 78, 0.64) 84%,\n rgba(255, 255, 255, 0) 100%\n );\n }\n .thumbnail-overlay-text {\n position: absolute;\n height: 100%;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 22px;\n text-transform: uppercase;\n background: rgba(53, 53, 53, 0.78);\n color: #ddd;\n font-family: \"SFUIText-Medium\";\n }\n .top-tag-list {\n position: absolute;\n top: 0px;\n max-width: 100%;\n padding: 10px;\n\n .top-tag-item {\n background: #152130;\n color: #fff;\n padding: 2px 5px;\n border-radius: 2px;\n font-size: 12px;\n text-transform: capitalize;\n }\n }\n .more-action-box {\n display: flex;\n justify-content: center;\n right: 5px;\n top: 0;\n position: absolute;\n z-index: 1;\n cursor: default;\n align-items: center;\n .more-action-item {\n width: 26px;\n height: 26px;\n background-color: rgba(0, 0, 0, 0.5);\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n margin: 10px 5px;\n cursor: pointer;\n transition: all 350ms ease-in-out;\n position: relative;\n &:hover {\n background: #00cec6;\n .info-section {\n visibility: visible;\n opacity: 1;\n width: auto;\n height: auto;\n padding: 30px;\n }\n }\n .info-section {\n width: 0;\n height: 0;\n visibility: hidden;\n opacity: 0;\n transition: opacity 350ms ease-in-out;\n position: absolute;\n left: 90%;\n background: #15212f;\n box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.2);\n border-radius: 10px;\n padding: 0px;\n margin-left: 9px;\n top: -30px;\n &.left-alligned {\n left: 100%;\n transform: translateX(calc(-100% - 45px));\n &:before {\n content: \"\";\n position: absolute;\n border-left: 5px solid #00cec6;\n border-top: 5px solid transparent;\n border-bottom: 5px solid transparent;\n border-right: none;\n left: 100%;\n top: 38px;\n }\n }\n &:before {\n content: \"\";\n position: absolute;\n border-right: 5px solid #00cec6;\n border-top: 5px solid transparent;\n border-bottom: 5px solid transparent;\n left: -5px;\n top: 38px;\n }\n }\n i {\n line-height: 0;\n }\n }\n .asset-status-chip {\n background: rgba(0, 0, 0, 0.5);\n backdrop-filter: blur(30px);\n border-radius: 15px;\n padding: 5px 10px;\n font-size: 10px;\n line-height: 10px;\n display: flex;\n width: fit-content;\n position: relative;\n justify-content: center;\n align-items: center;\n box-sizing: border-box;\n color: #fff;\n max-height: 20px;\n position: relative;\n margin: 0px 5px;\n\n .status-color {\n width: 8px;\n height: 8px;\n border-radius: 100%;\n margin-right: 5px;\n background: #fff;\n }\n\n &.review,\n &.pending,\n &.in-progress,\n &.in-queue {\n .status-color {\n background: #f9e900;\n }\n }\n &.approved,\n &.finished,\n &.upload-fc,\n &.upload-revised-fc {\n .status-color {\n background: #18b96e;\n }\n }\n &.rejected,\n &.cancelled {\n .status-color {\n background: #ff6c56;\n }\n }\n }\n }\n }\n .details-box {\n background: #15212f;\n color: #fff;\n position: relative;\n padding: 15px;\n font-size: 12px;\n transition: all 0.2s ease;\n /* border-radius: 0 0 4px 4px; */\n .main-text {\n font-family: \"SFUIText-Medium\";\n // padding-bottom: 5px;\n margin-bottom: 5px;\n height: auto;\n overflow: hidden;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n word-break: break-word;\n line-height: 17px;\n }\n .bottom-section {\n display: flex;\n justify-content: space-between;\n align-items: center;\n .section-left {\n display: flex;\n justify-content: center;\n align-items: center;\n .upload-status {\n font-size: 10px;\n margin-right: 10px;\n animation: fadein 1s infinite ease-in-out;\n }\n .h2,\n .h3,\n .h4 {\n font-size: 10px;\n height: auto;\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n word-break: break-word;\n overflow: hidden;\n text-overflow: ellipsis;\n -webkit-line-clamp: 1;\n margin-right: 10px;\n }\n .h3,\n .h4 {\n display: flex;\n justify-content: center;\n align-items: center;\n p {\n margin-left: 5px;\n }\n }\n }\n .section-right {\n .status {\n font-size: 10px;\n &.pending,\n &.in-progress,\n &.in-queue {\n color: #f9e900;\n }\n &.approved,\n &.finished {\n color: #18b96e;\n }\n &.rejected,\n &.cancelled {\n color: #ff6c56;\n }\n }\n }\n }\n }\n .actions-box {\n position: relative;\n .action-button-holder {\n position: absolute;\n bottom: 15px;\n right: 0px;\n .action-button {\n display: inline-flex;\n margin-right: 15px;\n background: #00cec6;\n border: 0px solid #00cec6;\n }\n }\n }\n .gradient-icon {\n position: relative;\n div {\n position: absolute;\n bottom: 20px;\n right: 20px;\n }\n }\n .video-card-box {\n background: transparent;\n width: 100%;\n border-radius: 5px;\n .media-box {\n display: table;\n width: 100%;\n padding-bottom: 20px;\n position: relative;\n cursor: pointer;\n .left-side {\n display: inline-block;\n overflow: hidden;\n position: relative;\n display: table-cell;\n overflow: hidden;\n border: 0px solid;\n border-right: 0px;\n vertical-align: middle;\n\n .thumbnail-as {\n font-family: DINCondensed-Bold;\n width: 100%;\n text-align: left;\n font-size: 70px;\n height: 100%;\n color: #303f51;\n }\n .image-box {\n transition: all 0.2s ease;\n width: ", ";\n\n height: ", ";\n\n background-size: auto 100%, cover;\n background-position: 50% 50%;\n font-size: 40px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #848c94;\n\n .play-icon-box {\n background: #90909066;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n justify-content: center;\n align-items: center;\n display: none;\n }\n }\n\n .bottom-text {\n color: #aaaaaa;\n font-size: 10px;\n padding-top: 8px;\n }\n }\n .right-side {\n vertical-align: top;\n display: table-cell;\n position: relative;\n width: ", ";\n\n .main-text {\n font-size: 14px;\n font-family: \"SFUIText-Medium\";\n color: #fff;\n margin: 0px 0px 6px;\n padding: 0px 15px;\n line-height: 1.17;\n height: 83px;\n overflow: hidden;\n display: -webkit-box;\n -webkit-line-clamp: 5;\n -webkit-box-orient: vertical;\n word-break: break-word;\n }\n .bottom-fixed-text {\n font-size: 10px;\n font-family: \"SFUIText-Medium\";\n color: #aaaaaa;\n position: absolute;\n bottom: 0px;\n padding: 0px 15px;\n }\n }\n &.small .main-text {\n height: 29px;\n overflow: hidden;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n font-size: 12px;\n }\n &:hover {\n .left-side {\n .image-box {\n background-size: auto 120%, cover;\n .play-icon-box {\n display: flex;\n }\n }\n }\n .right-side {\n .main-text {\n color: #00cec6;\n }\n }\n }\n }\n }\n &:hover {\n .image-box {\n .full-top {\n height: 155px;\n overflow: hidden;\n }\n }\n .details-box {\n .main-text {\n color: #00cec6;\n transition: color 0.5s;\n }\n &.selectable {\n background: #121d29;\n .sub-text {\n color: #ccc;\n }\n .bottom {\n color: #aaa;\n }\n }\n }\n .actions-box {\n .action-button-holder {\n .action-button {\n background: #fff;\n ", " {\n path {\n fill: #00cec6;\n }\n }\n }\n }\n }\n }\n .sub-title {\n font-size: 10px;\n color: #aaaaaa;\n margin-right: 10px;\n }\n .segment-indicator {\n display: inline-block;\n border-width: 0px 1px;\n margin-left: 17px;\n font-size: 10px;\n color: #fff;\n position: relative;\n padding-left: 8px;\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: #00cec6;\n border-radius: 50%;\n }\n }\n .check-box-holder {\n position: absolute;\n right: 10px;\n bottom: 10px;\n }\n input[type=\"checkbox\"] {\n height: 0;\n width: 0;\n display: none;\n }\n input[type=\"checkbox\"] + label {\n position: relative;\n display: inline-block; // flex;\n margin: 0;\n align-items: center;\n color: #cccccc;\n font-size: 13px;\n transition: color 250ms cubic-bezier(0.4, 0, 0.23, 1);\n font-family: SFUIText-Regular;\n cursor: pointer;\n &.list-title {\n display: inline-block;\n }\n }\n input[type=\"checkbox\"]:disabled + label {\n color: #999;\n cursor: not-allowed;\n &:hover > span,\n &:focus + label > span {\n background: transparent;\n }\n }\n input[type=\"checkbox\"]:checked:disabled + label > span {\n border: 10px solid rgba(73, 218, 208, 0.45);\n &:before {\n //background: #ddd;\n }\n }\n input[type=\"checkbox\"] + label > span {\n display: inline-block; // flex;\n justify-content: center;\n align-items: center;\n width: 20px;\n height: 20px;\n background: transparent;\n border: 1px solid #9e9e9e;\n border-radius: 50%;\n cursor: pointer;\n transition: all 250ms cubic-bezier(0.4, 0, 0.23, 1);\n }\n input[type=\"checkbox\"] + label:hover > span,\n input[type=\"checkbox\"]:focus + label > span {\n background: rgba(255, 255, 255, 0.1);\n }\n input[type=\"checkbox\"]:checked + label > span {\n border: 10px solid #49dad0;\n animation: shrink-bounce 200ms cubic-bezier(0.4, 0, 0.23, 1);\n }\n input[type=\"checkbox\"]:checked + label > span:before {\n content: \"\";\n position: absolute;\n top: 6px;\n left: 4px;\n border-right: 2px solid transparent;\n border-bottom: 2px solid transparent;\n transform: rotate(45deg);\n transform-origin: 0% 100%;\n animation: checkbox-check 125ms 250ms cubic-bezier(0.4, 0, 0.23, 1) forwards;\n }\n .gradient-box {\n display: flex;\n height: 100%;\n width: 100%;\n font-family: \"SFUIText-Medium\";\n background-image: ", ";\n position: relative;\n border-radius: 2px;\n\n .main-text {\n color: #fff;\n font-size: 32px;\n padding: 15px;\n height: 145px;\n overflow: hidden;\n display: -webkit-box;\n -webkit-line-clamp: 4;\n -webkit-box-orient: vertical;\n word-break: break-word;\n }\n\n .bottom {\n position: absolute;\n bottom: 0px;\n padding: 15px;\n color: #fff;\n font-size: 12px;\n & > i {\n margin-right: 5px;\n }\n }\n }\n @keyframes shrink-bounce {\n 0% {\n transform: scale(1);\n }\n 33% {\n transform: scale(0.85);\n }\n 100% {\n transform: scale(1);\n }\n }\n @keyframes checkbox-check {\n 0% {\n width: 0;\n height: 0;\n border-color: #fff;\n transform: translate3d(0, 0, 0) rotate(45deg);\n }\n 33% {\n width: 4px;\n height: 0;\n transform: translate3d(0, 0, 0) rotate(45deg);\n }\n 100% {\n width: 4px;\n height: 9px;\n border-color: #fff;\n transform: translate3d(0, -0.5em, 0) rotate(45deg);\n }\n }\n @keyframes fadein {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n"], ["\n font-family: \"SFUIText-Regular\";\n width: ", ";\n height: ", ";\n\n cursor: ", ";\n pointer-events: ", ";\n .image-box {\n position: relative;\n height: ", ";\n width: ", ";\n .thumbnail-image-block{\n position: absolute;\n z-index: 1;\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n cursor: pointer;\n overflow: hidden;\n background: #182738;;\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 } \n & > img {\n top: 0px;\n left: 0px;\n transform: none;\n }\n .iframe-image-block {\n position: absolute;\n z-index: 2;\n width: 100%;\n height: 100%;\n left: 0;\n top: 0;\n cursor: pointer;\n overflow: hidden;\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 img {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: auto;\n }\n }\n & > img {\n top: 0px;\n left: 0px;\n transform: none;\n }\n .bottom-box {\n position: absolute;\n bottom: 0;\n width: 100%;\n padding: 30px 15px 15px;\n color: #fff;\n word-break: break-word;\n background: linear-gradient(\n to top,\n rgba(0, 0, 0, 0.77) 0%,\n rgba(99, 99, 99, 0.85) 72%,\n rgba(78, 78, 78, 0.64) 84%,\n rgba(255, 255, 255, 0) 100%\n );\n }\n .thumbnail-overlay-text {\n position: absolute;\n height: 100%;\n width: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 22px;\n text-transform: uppercase;\n background: rgba(53, 53, 53, 0.78);\n color: #ddd;\n font-family: \"SFUIText-Medium\";\n }\n .top-tag-list {\n position: absolute;\n top: 0px;\n max-width: 100%;\n padding: 10px;\n\n .top-tag-item {\n background: #152130;\n color: #fff;\n padding: 2px 5px;\n border-radius: 2px;\n font-size: 12px;\n text-transform: capitalize;\n }\n }\n .more-action-box {\n display: flex;\n justify-content: center;\n right: 5px;\n top: 0;\n position: absolute;\n z-index: 1;\n cursor: default;\n align-items: center;\n .more-action-item {\n width: 26px;\n height: 26px;\n background-color: rgba(0, 0, 0, 0.5);\n border-radius: 50%;\n display: flex;\n justify-content: center;\n align-items: center;\n margin: 10px 5px;\n cursor: pointer;\n transition: all 350ms ease-in-out;\n position: relative;\n &:hover {\n background: #00cec6;\n .info-section {\n visibility: visible;\n opacity: 1;\n width: auto;\n height: auto;\n padding: 30px;\n }\n }\n .info-section {\n width: 0;\n height: 0;\n visibility: hidden;\n opacity: 0;\n transition: opacity 350ms ease-in-out;\n position: absolute;\n left: 90%;\n background: #15212f;\n box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.2);\n border-radius: 10px;\n padding: 0px;\n margin-left: 9px;\n top: -30px;\n &.left-alligned {\n left: 100%;\n transform: translateX(calc(-100% - 45px));\n &:before {\n content: \"\";\n position: absolute;\n border-left: 5px solid #00cec6;\n border-top: 5px solid transparent;\n border-bottom: 5px solid transparent;\n border-right: none;\n left: 100%;\n top: 38px;\n }\n }\n &:before {\n content: \"\";\n position: absolute;\n border-right: 5px solid #00cec6;\n border-top: 5px solid transparent;\n border-bottom: 5px solid transparent;\n left: -5px;\n top: 38px;\n }\n }\n i {\n line-height: 0;\n }\n }\n .asset-status-chip {\n background: rgba(0, 0, 0, 0.5);\n backdrop-filter: blur(30px);\n border-radius: 15px;\n padding: 5px 10px;\n font-size: 10px;\n line-height: 10px;\n display: flex;\n width: fit-content;\n position: relative;\n justify-content: center;\n align-items: center;\n box-sizing: border-box;\n color: #fff;\n max-height: 20px;\n position: relative;\n margin: 0px 5px;\n\n .status-color {\n width: 8px;\n height: 8px;\n border-radius: 100%;\n margin-right: 5px;\n background: #fff;\n }\n\n &.review,\n &.pending,\n &.in-progress,\n &.in-queue {\n .status-color {\n background: #f9e900;\n }\n }\n &.approved,\n &.finished,\n &.upload-fc,\n &.upload-revised-fc {\n .status-color {\n background: #18b96e;\n }\n }\n &.rejected,\n &.cancelled {\n .status-color {\n background: #ff6c56;\n }\n }\n }\n }\n }\n .details-box {\n background: #15212f;\n color: #fff;\n position: relative;\n padding: 15px;\n font-size: 12px;\n transition: all 0.2s ease;\n /* border-radius: 0 0 4px 4px; */\n .main-text {\n font-family: \"SFUIText-Medium\";\n // padding-bottom: 5px;\n margin-bottom: 5px;\n height: auto;\n overflow: hidden;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n word-break: break-word;\n line-height: 17px;\n }\n .bottom-section {\n display: flex;\n justify-content: space-between;\n align-items: center;\n .section-left {\n display: flex;\n justify-content: center;\n align-items: center;\n .upload-status {\n font-size: 10px;\n margin-right: 10px;\n animation: fadein 1s infinite ease-in-out;\n }\n .h2,\n .h3,\n .h4 {\n font-size: 10px;\n height: auto;\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n word-break: break-word;\n overflow: hidden;\n text-overflow: ellipsis;\n -webkit-line-clamp: 1;\n margin-right: 10px;\n }\n .h3,\n .h4 {\n display: flex;\n justify-content: center;\n align-items: center;\n p {\n margin-left: 5px;\n }\n }\n }\n .section-right {\n .status {\n font-size: 10px;\n &.pending,\n &.in-progress,\n &.in-queue {\n color: #f9e900;\n }\n &.approved,\n &.finished {\n color: #18b96e;\n }\n &.rejected,\n &.cancelled {\n color: #ff6c56;\n }\n }\n }\n }\n }\n .actions-box {\n position: relative;\n .action-button-holder {\n position: absolute;\n bottom: 15px;\n right: 0px;\n .action-button {\n display: inline-flex;\n margin-right: 15px;\n background: #00cec6;\n border: 0px solid #00cec6;\n }\n }\n }\n .gradient-icon {\n position: relative;\n div {\n position: absolute;\n bottom: 20px;\n right: 20px;\n }\n }\n .video-card-box {\n background: transparent;\n width: 100%;\n border-radius: 5px;\n .media-box {\n display: table;\n width: 100%;\n padding-bottom: 20px;\n position: relative;\n cursor: pointer;\n .left-side {\n display: inline-block;\n overflow: hidden;\n position: relative;\n display: table-cell;\n overflow: hidden;\n border: 0px solid;\n border-right: 0px;\n vertical-align: middle;\n\n .thumbnail-as {\n font-family: DINCondensed-Bold;\n width: 100%;\n text-align: left;\n font-size: 70px;\n height: 100%;\n color: #303f51;\n }\n .image-box {\n transition: all 0.2s ease;\n width: ", ";\n\n height: ", ";\n\n background-size: auto 100%, cover;\n background-position: 50% 50%;\n font-size: 40px;\n text-align: center;\n display: flex;\n align-items: center;\n justify-content: center;\n color: #848c94;\n\n .play-icon-box {\n background: #90909066;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n justify-content: center;\n align-items: center;\n display: none;\n }\n }\n\n .bottom-text {\n color: #aaaaaa;\n font-size: 10px;\n padding-top: 8px;\n }\n }\n .right-side {\n vertical-align: top;\n display: table-cell;\n position: relative;\n width: ", ";\n\n .main-text {\n font-size: 14px;\n font-family: \"SFUIText-Medium\";\n color: #fff;\n margin: 0px 0px 6px;\n padding: 0px 15px;\n line-height: 1.17;\n height: 83px;\n overflow: hidden;\n display: -webkit-box;\n -webkit-line-clamp: 5;\n -webkit-box-orient: vertical;\n word-break: break-word;\n }\n .bottom-fixed-text {\n font-size: 10px;\n font-family: \"SFUIText-Medium\";\n color: #aaaaaa;\n position: absolute;\n bottom: 0px;\n padding: 0px 15px;\n }\n }\n &.small .main-text {\n height: 29px;\n overflow: hidden;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n font-size: 12px;\n }\n &:hover {\n .left-side {\n .image-box {\n background-size: auto 120%, cover;\n .play-icon-box {\n display: flex;\n }\n }\n }\n .right-side {\n .main-text {\n color: #00cec6;\n }\n }\n }\n }\n }\n &:hover {\n .image-box {\n .full-top {\n height: 155px;\n overflow: hidden;\n }\n }\n .details-box {\n .main-text {\n color: #00cec6;\n transition: color 0.5s;\n }\n &.selectable {\n background: #121d29;\n .sub-text {\n color: #ccc;\n }\n .bottom {\n color: #aaa;\n }\n }\n }\n .actions-box {\n .action-button-holder {\n .action-button {\n background: #fff;\n ", " {\n path {\n fill: #00cec6;\n }\n }\n }\n }\n }\n }\n .sub-title {\n font-size: 10px;\n color: #aaaaaa;\n margin-right: 10px;\n }\n .segment-indicator {\n display: inline-block;\n border-width: 0px 1px;\n margin-left: 17px;\n font-size: 10px;\n color: #fff;\n position: relative;\n padding-left: 8px;\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: #00cec6;\n border-radius: 50%;\n }\n }\n .check-box-holder {\n position: absolute;\n right: 10px;\n bottom: 10px;\n }\n input[type=\"checkbox\"] {\n height: 0;\n width: 0;\n display: none;\n }\n input[type=\"checkbox\"] + label {\n position: relative;\n display: inline-block; // flex;\n margin: 0;\n align-items: center;\n color: #cccccc;\n font-size: 13px;\n transition: color 250ms cubic-bezier(0.4, 0, 0.23, 1);\n font-family: SFUIText-Regular;\n cursor: pointer;\n &.list-title {\n display: inline-block;\n }\n }\n input[type=\"checkbox\"]:disabled + label {\n color: #999;\n cursor: not-allowed;\n &:hover > span,\n &:focus + label > span {\n background: transparent;\n }\n }\n input[type=\"checkbox\"]:checked:disabled + label > span {\n border: 10px solid rgba(73, 218, 208, 0.45);\n &:before {\n //background: #ddd;\n }\n }\n input[type=\"checkbox\"] + label > span {\n display: inline-block; // flex;\n justify-content: center;\n align-items: center;\n width: 20px;\n height: 20px;\n background: transparent;\n border: 1px solid #9e9e9e;\n border-radius: 50%;\n cursor: pointer;\n transition: all 250ms cubic-bezier(0.4, 0, 0.23, 1);\n }\n input[type=\"checkbox\"] + label:hover > span,\n input[type=\"checkbox\"]:focus + label > span {\n background: rgba(255, 255, 255, 0.1);\n }\n input[type=\"checkbox\"]:checked + label > span {\n border: 10px solid #49dad0;\n animation: shrink-bounce 200ms cubic-bezier(0.4, 0, 0.23, 1);\n }\n input[type=\"checkbox\"]:checked + label > span:before {\n content: \"\";\n position: absolute;\n top: 6px;\n left: 4px;\n border-right: 2px solid transparent;\n border-bottom: 2px solid transparent;\n transform: rotate(45deg);\n transform-origin: 0% 100%;\n animation: checkbox-check 125ms 250ms cubic-bezier(0.4, 0, 0.23, 1) forwards;\n }\n .gradient-box {\n display: flex;\n height: 100%;\n width: 100%;\n font-family: \"SFUIText-Medium\";\n background-image: ", ";\n position: relative;\n border-radius: 2px;\n\n .main-text {\n color: #fff;\n font-size: 32px;\n padding: 15px;\n height: 145px;\n overflow: hidden;\n display: -webkit-box;\n -webkit-line-clamp: 4;\n -webkit-box-orient: vertical;\n word-break: break-word;\n }\n\n .bottom {\n position: absolute;\n bottom: 0px;\n padding: 15px;\n color: #fff;\n font-size: 12px;\n & > i {\n margin-right: 5px;\n }\n }\n }\n @keyframes shrink-bounce {\n 0% {\n transform: scale(1);\n }\n 33% {\n transform: scale(0.85);\n }\n 100% {\n transform: scale(1);\n }\n }\n @keyframes checkbox-check {\n 0% {\n width: 0;\n height: 0;\n border-color: #fff;\n transform: translate3d(0, 0, 0) rotate(45deg);\n }\n 33% {\n width: 4px;\n height: 0;\n transform: translate3d(0, 0, 0) rotate(45deg);\n }\n 100% {\n width: 4px;\n height: 9px;\n border-color: #fff;\n transform: translate3d(0, -0.5em, 0) rotate(45deg);\n }\n }\n @keyframes fadein {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n"]);
|
|
12
12
|
|
|
13
13
|
var _react = require("react");
|
|
14
14
|
|
|
@@ -171,8 +171,13 @@ var VideoCard = function (_React$Component) {
|
|
|
171
171
|
info = _props.info,
|
|
172
172
|
cardSelectionChangeHandler = _props.cardSelectionChangeHandler,
|
|
173
173
|
theme = _props.theme,
|
|
174
|
-
sub_title = _props.sub_title
|
|
174
|
+
sub_title = _props.sub_title,
|
|
175
|
+
file_type = _props.file_type;
|
|
175
176
|
|
|
177
|
+
var iconMap = {
|
|
178
|
+
'audio': 'audio_track_ingest',
|
|
179
|
+
'document': 'document-icon'
|
|
180
|
+
};
|
|
176
181
|
return _react2.default.createElement(
|
|
177
182
|
VideoCardStyled,
|
|
178
183
|
_extends({
|
|
@@ -195,12 +200,26 @@ var VideoCard = function (_React$Component) {
|
|
|
195
200
|
{
|
|
196
201
|
className: "image-box",
|
|
197
202
|
style: {
|
|
198
|
-
backgroundImage: gradient ? _colors2.default[theme].videoCard.gradient[gradient] : "
|
|
203
|
+
backgroundImage: gradient ? _colors2.default[theme].videoCard.gradient[gradient] : "",
|
|
199
204
|
backgroundSize: "" + (display_type === "type3" ? "auto 100%, cover" : "100%, cover"),
|
|
200
205
|
backgroundPositionX: "50% 50%",
|
|
201
206
|
backgroundRepeat: "no-repeat"
|
|
202
207
|
}
|
|
203
208
|
},
|
|
209
|
+
thumbnail && !gradient && _react2.default.createElement(
|
|
210
|
+
"div",
|
|
211
|
+
{ className: "thumbnail-image-block" },
|
|
212
|
+
_react2.default.createElement("img", { className: "thumbnail-image", src: thumbnail })
|
|
213
|
+
),
|
|
214
|
+
!thumbnail && !gradient && file_type !== 'video' && file_type !== 'image' && _react2.default.createElement(
|
|
215
|
+
"div",
|
|
216
|
+
{ className: "thumbnail-image-block" },
|
|
217
|
+
_react2.default.createElement(
|
|
218
|
+
"div",
|
|
219
|
+
{ className: "circle" },
|
|
220
|
+
_react2.default.createElement(_icon2.default, { name: "" + iconMap[file_type] || 'default', width: 20, height: 20 })
|
|
221
|
+
)
|
|
222
|
+
),
|
|
204
223
|
(display_type === "type1" || display_type === "type2") && iframeURL && !gradient ? _react2.default.createElement(
|
|
205
224
|
"div",
|
|
206
225
|
{
|
|
@@ -384,6 +403,20 @@ var VideoCard = function (_React$Component) {
|
|
|
384
403
|
backgroundImage: thumbnailAs ? null : thumbnail ? "url(" + thumbnail + ")" : "url(https://thumbnail.desynova.com/default_placeholder/Contido_Placeholder_Image.png)"
|
|
385
404
|
}
|
|
386
405
|
},
|
|
406
|
+
thumbnail && !gradient && _react2.default.createElement(
|
|
407
|
+
"div",
|
|
408
|
+
{ className: "thumbnail-image-block" },
|
|
409
|
+
_react2.default.createElement("img", { className: "thumbnail-image", src: thumbnail })
|
|
410
|
+
),
|
|
411
|
+
!thumbnail && !gradient && file_type !== 'video' && file_type !== 'image' && _react2.default.createElement(
|
|
412
|
+
"div",
|
|
413
|
+
{ className: "thumbnail-image-block" },
|
|
414
|
+
_react2.default.createElement(
|
|
415
|
+
"div",
|
|
416
|
+
{ className: "circle" },
|
|
417
|
+
_react2.default.createElement(_icon2.default, { name: "" + iconMap[file_type] || 'default', width: 20, height: 20 })
|
|
418
|
+
)
|
|
419
|
+
),
|
|
387
420
|
thumbnailAs ? _react2.default.createElement(
|
|
388
421
|
"div",
|
|
389
422
|
{ className: "thumbnail-as" },
|
package/package.json
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@desynova-digital/components",
|
|
3
|
-
"version": "8.19.
|
|
3
|
+
"version": "8.19.39",
|
|
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": "8.19.
|
|
10
|
+
"@desynova-digital/tokens": "8.19.39",
|
|
11
11
|
"prop-types": "^15.7.2",
|
|
12
12
|
"styled-components": "^4.3.2"
|
|
13
13
|
},
|