@mjhls/mjh-framework 1.0.69 → 1.0.71
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/index.es.js +8 -7
- package/dist/index.es.js.map +1 -1
- package/dist/index.js +8 -7
- package/dist/index.js.map +1 -1
- package/package.json +1 -1
package/dist/index.es.js
CHANGED
|
@@ -5491,6 +5491,7 @@ GROQ query -
|
|
|
5491
5491
|
*/
|
|
5492
5492
|
var GroupDeck = function GroupDeck(props) {
|
|
5493
5493
|
// Props should be an array of objects containing Thumbnail, title, and URL
|
|
5494
|
+
var variant = props.dark ? 'white' : '#383838';
|
|
5494
5495
|
function scrollSlider(e, direction) {
|
|
5495
5496
|
var slide = e.target.parentElement;
|
|
5496
5497
|
var scrollOffset = slide.scrollLeft;
|
|
@@ -5518,15 +5519,15 @@ var GroupDeck = function GroupDeck(props) {
|
|
|
5518
5519
|
'div',
|
|
5519
5520
|
{ onClick: function onClick(e) {
|
|
5520
5521
|
return scrollSlider(e, 'prev');
|
|
5521
|
-
}, className: 'tile__slider-prev' },
|
|
5522
|
-
'
|
|
5522
|
+
}, className: 'tile__slider-prev', style: { color: variant } },
|
|
5523
|
+
React__default.createElement('i', { style: { border: 'solid ' + variant, borderWidth: '0 4px 4px 0' }, className: 'arrow left' })
|
|
5523
5524
|
),
|
|
5524
5525
|
React__default.createElement(
|
|
5525
5526
|
'div',
|
|
5526
5527
|
{ onClick: function onClick(e) {
|
|
5527
5528
|
return scrollSlider(e, 'next');
|
|
5528
|
-
}, className: 'tile__slider-next' },
|
|
5529
|
-
'
|
|
5529
|
+
}, className: 'tile__slider-next', style: { color: variant } },
|
|
5530
|
+
React__default.createElement('i', { style: { border: 'solid ' + variant, borderWidth: '0 4px 4px 0' }, className: 'arrow right' })
|
|
5530
5531
|
),
|
|
5531
5532
|
React__default.createElement(
|
|
5532
5533
|
'div',
|
|
@@ -5555,14 +5556,14 @@ var GroupDeck = function GroupDeck(props) {
|
|
|
5555
5556
|
{ className: 'tile__title' },
|
|
5556
5557
|
React__default.createElement(
|
|
5557
5558
|
'div',
|
|
5558
|
-
{ className: 'tile__title_text' },
|
|
5559
|
+
{ style: { color: variant }, className: 'tile__title_text' },
|
|
5559
5560
|
video.title
|
|
5560
5561
|
)
|
|
5561
5562
|
)
|
|
5562
5563
|
),
|
|
5563
5564
|
React__default.createElement(
|
|
5564
5565
|
'div',
|
|
5565
|
-
{ className: 'tile__info' },
|
|
5566
|
+
{ style: { color: variant }, className: 'tile__info' },
|
|
5566
5567
|
video.title
|
|
5567
5568
|
)
|
|
5568
5569
|
)
|
|
@@ -5574,7 +5575,7 @@ var GroupDeck = function GroupDeck(props) {
|
|
|
5574
5575
|
React__default.createElement(
|
|
5575
5576
|
'style',
|
|
5576
5577
|
{ jsx: true },
|
|
5577
|
-
'\n #vid-slider * {\n box-sizing: border-box;\n }\n #vid-slider {\n position: relative;\n
|
|
5578
|
+
'\n #vid-slider * {\n box-sizing: border-box;\n }\n #vid-slider {\n position: relative;\n }\n #vid-slider h1,\n #vid-slider p {\n text-align: center;\n width: 100%;\n max-width: 500px;\n margin: auto;\n }\n #vid-slider a:link,\n #vid-slider a:hover,\n #vid-slider a:active,\n #vid-slider a:visited {\n transition: color 150ms;\n color: #95a5a6;\n text-decoration: none;\n }\n #vid-slider a:hover {\n color: #7f8c8d;\n text-decoration: underline;\n }\n #vid-slider .contain {\n width: 100%;\n }\n #vid-slider .row {\n overflow: scroll;\n width: 100%;\n }\n #vid-slider .tile__info {\n white-space: normal !important;\n position: absolute;\n text-align: center;\n color: ' + (props.dark ? 'white' : '#383838') + ';\n opacity: 1;\n font-size: 1rem;\n transition: opacity 0.25s;\n }\n #vid-slider .row__inner {\n transition: 450ms -webkit-transform;\n transition: 450ms transform;\n transition: 450ms transform, 450ms -webkit-transform;\n font-size: 0;\n white-space: nowrap;\n margin: 55px 0;\n padding-bottom: 10px;\n padding-left: 3rem;\n }\n #vid-slider .tile {\n position: relative;\n display: inline-block;\n width: 250px;\n height: 140.625px;\n margin-right: 10px;\n font-size: 20px;\n cursor: pointer;\n transition: 450ms all;\n -webkit-transform-origin: center left;\n transform-origin: center left;\n }\n #vid-slider .tile__img {\n width: 250px;\n height: 140.625px;\n -o-object-fit: cover;\n object-fit: cover;\n }\n #vid-slider .tile__details {\n position: absolute;\n bottom: 0;\n left: 0;\n right: 0;\n top: 0;\n font-size: 10px;\n opacity: 0;\n background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);\n transition: 450ms opacity;\n }\n #vid-slider .tile__details:after,\n #vid-slider .tile__details:before {\n content: \'\';\n position: absolute;\n top: 50%;\n left: 50%;\n display: #000;\n }\n #vid-slider .tile__details:after {\n margin-top: -25px;\n margin-left: -25px;\n width: 50px;\n height: 50px;\n border: 3px solid #ecf0f1;\n line-height: 50px;\n text-align: center;\n border-radius: 100%;\n background: rgba(0, 0, 0, 0.5);\n z-index: 1;\n }\n #vid-slider .tile__details:before {\n content: \'\u25B6\';\n left: 0;\n width: 100%;\n font-size: 30px;\n margin-left: 3px;\n margin-top: -23px;\n text-align: center;\n z-index: 2;\n color: white;\n }\n #vid-slider .tile:hover .tile__details {\n opacity: 1;\n }\n #vid-slider .tile__title {\n position: absolute;\n bottom: 0;\n padding: 10px;\n max-width: 250px;\n }\n #vid-slider .tile__title_text {\n position: relative;\n left: 0;\n white-space: normal;\n }\n #vid-slider .row__inner:hover {\n -webkit-transform: translate3d(-62.5px, 0, 0);\n transform: translate3d(-62.5px, 0, 0);\n }\n #vid-slider .row__inner:hover .tile {\n opacity: 0.3;\n }\n #vid-slider .row__inner:hover .tile:hover {\n -webkit-transform: scale(1.25);\n transform: scale(1.25);\n opacity: 1;\n }\n #vid-slider .tile:hover ~ .tile {\n -webkit-transform: translate3d(62px, 0, 0);\n transform: translate3d(62px, 0, 0);\n }\n #vid-slider .tile:hover .tile__info {\n opacity: 0;\n }\n #vid-slider .tile__slider-prev,\n #vid-slider .tile__slider-next {\n width: 30px;\n background: transparent;\n border: none;\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n z-index: 5;\n cursor: pointer;\n color: ' + (props.dark ? 'white' : 'black') + ';\n display: flex;\n justify-content: center;\n align-items: center;\n font-size: 2rem;\n }\n #vid-slider .tile__slider-next {\n right: 0;\n }\n #vid-slider,\n #vid-slider .row {\n margin: 0;\n padding: 0;\n }\n #vid-slider .tile:last-child {\n margin-right: 2rem;\n }\n #vid-slider .row::-webkit-scrollbar-thumb {\n background-color: transparent !important;\n }\n #vid-slider i {\n border: solid ' + (props.dark ? 'white' : 'black') + ';\n border-width: 0 4px 4px 0;\n display: inline-block;\n padding: 4px;\n pointer-events: none;\n }\n\n #vid-slider .right {\n transform: rotate(-45deg);\n -webkit-transform: rotate(-45deg);\n }\n\n #vid-slider .left {\n transform: rotate(135deg);\n -webkit-transform: rotate(135deg);\n }\n '
|
|
5578
5579
|
)
|
|
5579
5580
|
);
|
|
5580
5581
|
};
|