Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@speakapbv/dough-extended-components-for-speakap
Advanced tools
@speakapbv/dough-extended-components-for-speakap - npm Package Compare versions
Comparing version 1.2.9 to 1.3.0
@@ -7,2 +7,10 @@ ### Changelog | ||
| #### [v1.3.0](https://github.com/SpeakapBV/dough-extended-components-for-speakap/compare/v1.2.9...v1.3.0) | ||
| > 19 March 2020 | ||
| - updated responsive layout structure [`16c3441`](https://github.com/SpeakapBV/dough-extended-components-for-speakap/commit/16c3441834531355dcfb0885f78bb59db8ea47d9) | ||
| - updated rsvp by wrapping with button [`e0558c9`](https://github.com/SpeakapBV/dough-extended-components-for-speakap/commit/e0558c95f4d31975f466efa03811cf7bbf976cb6) | ||
| - updated styles for timeline cards [`4c84bf3`](https://github.com/SpeakapBV/dough-extended-components-for-speakap/commit/4c84bf357b56e239f8c2e9e9714f2915f77c2498) | ||
| #### [v1.2.9](https://github.com/SpeakapBV/dough-extended-components-for-speakap/compare/v1.2.8...v1.2.9) | ||
@@ -13,2 +21,3 @@ | ||
| - fixed structure of likes-container [`9811c12`](https://github.com/SpeakapBV/dough-extended-components-for-speakap/commit/9811c124d72b4946e8832208c46574c572f0c7ff) | ||
| - updated version to v1.2.9 [`77b0c41`](https://github.com/SpeakapBV/dough-extended-components-for-speakap/commit/77b0c418c3574cde64fe39c1c55fea65a1fdf913) | ||
@@ -15,0 +24,0 @@ #### [v1.2.8](https://github.com/SpeakapBV/dough-extended-components-for-speakap/compare/v1.2.7...v1.2.8) |
| import React, { forwardRef, useState, useRef, useEffect, Children } from 'react'; | ||
| import { TextInput, Button, colors, sizes, DropMenu, Image, Container, LayoutContainer, LayoutFlexBox, spacings, Text, Toggle, Divider, colorsText, Avatar, Badge, AppWrapper, Card, Link, H7, Spacer, Tooltip, Subtitle, H2, H4, H5 } from '@speakapbv/dough-component-library'; | ||
| import { TextInput, Button, colors, sizes, DropMenu, Image, Container, LayoutContainer, LayoutFlexBox, spacings, Text, Toggle, Divider, colorsText, Avatar, Badge, AppWrapper, Card, Link, H7, Spacer, Tooltip, Subtitle, H2, H4, H5, H3 } from '@speakapbv/dough-component-library'; | ||
@@ -262,2 +262,4 @@ function _typeof(obj) { | ||
| icon: props.userInfo && props.userInfo.picture ? React.createElement(Image, { | ||
| width: "100%", | ||
| height: "100%", | ||
| src: props.userInfo.picture, | ||
@@ -289,3 +291,5 @@ rounded: true, | ||
| bold: true | ||
| }, props.userInfo && props.userInfo.name)), React.createElement(LayoutFlexBox, null, React.createElement(Text, null, props.userInfo && props.userInfo.title)))), React.createElement(LayoutFlexBox, { | ||
| }, props.userInfo && props.userInfo.name)), React.createElement(LayoutFlexBox, null, React.createElement(Text, { | ||
| small: true | ||
| }, props.userInfo && props.userInfo.title)))), React.createElement(LayoutFlexBox, { | ||
| autoFit: false | ||
@@ -360,2 +364,4 @@ }, React.createElement(Toggle, { | ||
| icon: React.createElement(Image, { | ||
| height: "100%", | ||
| width: "100%", | ||
| src: nw.thumbnail, | ||
@@ -414,3 +420,3 @@ rounded: true, | ||
| var css_248z$3 = ".speakap-app-frame .speakap-app-frame-wrapper {\n width: 100vw;\n min-height: 100vh; }\n .speakap-app-frame .speakap-app-frame-wrapper .speakap-app-frame-content {\n width: 100%;\n padding-top: 80px;\n padding-bottom: 24px;\n box-sizing: border-box;\n position: relative;\n z-index: 5; }\n\n.speakap-app-frame .speakap-app-frame-header-wrapper {\n height: 56px;\n max-height: 56px;\n min-height: 56px; }\n\n.speakap-app-frame .speakap-app-frame-center {\n overflow-x: hidden;\n overflow-y: auto;\n margin: 0 auto;\n max-width: 1328px;\n padding-left: 88px;\n padding-right: calc( 88px + var(--dough-scroll-bar-width)); }\n\n@media (max-width: 576px) {\n .speakap-app-frame .speakap-app-frame-center {\n max-width: 100%;\n padding-left: 0;\n padding-right: 0; } }\n"; | ||
| var css_248z$3 = ".speakap-app-frame .speakap-app-frame-wrapper {\n width: 100vw;\n min-height: 100vh; }\n .speakap-app-frame .speakap-app-frame-wrapper .speakap-app-frame-content {\n width: 100%;\n padding-top: 88px;\n padding-bottom: 16px;\n box-sizing: border-box;\n position: relative;\n z-index: 5; }\n\n.speakap-app-frame .speakap-app-frame-header-wrapper {\n height: 56px;\n max-height: 56px;\n min-height: 56px; }\n\n.speakap-app-frame .speakap-app-frame-center {\n overflow-x: hidden;\n overflow-y: auto;\n margin: 0 auto;\n max-width: calc(1120px + var(--dough-scroll-bar-width));\n padding-right: var(--dough-scroll-bar-width); }\n\n@media (max-width: 576px) {\n .speakap-app-frame .speakap-app-frame-center {\n max-width: 100% !important;\n padding-right: var(--dough-scroll-bar-width); }\n .speakap-app-frame .speakap-app-frame-center:not(.speakap-application-header) {\n padding-left: 0 !important;\n padding-right: 0 !important; } }\n\n@media (max-width: 1296px) {\n .speakap-app-frame-center {\n max-width: calc( 832px + var(--dough-scroll-bar-width)) !important; } }\n\n@media (max-width: 1016px) {\n .speakap-app-frame .speakap-app-frame-center {\n max-width: calc( 736px + var(--dough-scroll-bar-width)) !important;\n padding-left: 96px;\n padding-right: calc( 96px + var(--dough-scroll-bar-width)); } }\n"; | ||
| styleInject(css_248z$3); | ||
@@ -452,3 +458,3 @@ | ||
| var css_248z$4 = ".speakap-app-frame-header-wrapper {\n position: absolute;\n top: 0;\n left: 0;\n z-index: 10;\n width: 100vw;\n height: 56px;\n position: fixed;\n display: -webkit-box;\n display: -moz-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n justify-content: center;\n overflow: hidden; }\n .speakap-app-frame-header-wrapper > .speakap-application-header {\n overflow: hidden;\n width: 100%; }\n .speakap-app-frame-header-wrapper > .speakap-application-header .speakap-header-left {\n width: 25%;\n padding-left: 0 !important; }\n .speakap-app-frame-header-wrapper > .speakap-application-header .speakap-header-right {\n width: 25%;\n padding-right: 0 !important; }\n\n@media (max-width: 576px) {\n .speakap-application-header {\n padding-left: 64px !important;\n padding-right: 16px !important; } }\n\n@media (max-width: 576px) {\n .speakap-app-frame-header-wrapper .speakap-header-right {\n display: none !important; } }\n"; | ||
| var css_248z$4 = ".speakap-app-frame-header-wrapper {\n position: absolute;\n top: 0;\n left: 0;\n z-index: 10;\n width: 100vw;\n height: 56px;\n position: fixed;\n display: -webkit-box;\n display: -moz-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n justify-content: center;\n overflow: hidden; }\n .speakap-app-frame-header-wrapper > .speakap-application-header {\n overflow: hidden;\n width: 100%; }\n .speakap-app-frame-header-wrapper > .speakap-application-header .speakap-header-left {\n width: 25%;\n padding-left: 0 !important; }\n .speakap-app-frame-header-wrapper > .speakap-application-header .speakap-header-right {\n width: 25%;\n padding-right: 0 !important; }\n\n@media (max-width: 576px) {\n .speakap-application-header {\n padding-left: 64px !important;\n padding-right: calc( 16px + var(--dough-scroll-bar-width)) !important; } }\n\n@media (max-width: 576px) {\n .speakap-app-frame-header-wrapper .speakap-header-right {\n display: none !important; } }\n"; | ||
| styleInject(css_248z$4); | ||
@@ -618,3 +624,3 @@ | ||
| var css_248z$6 = ".speakap-page-wrapper {\n grid-template-columns: 100%;\n grid-row-gap: 0;\n grid-column-gap: 0;\n grid-auto-rows: max-content auto;\n align-items: flex-start;\n justify-content: center;\n box-sizing: border-box;\n display: grid;\n width: 100%; }\n .speakap-page-wrapper.speakap-page-wrapper-split-into-1 {\n grid-template-columns: 272px calc(100% - 544px) 272px; }\n .speakap-page-wrapper.speakap-page-wrapper-split-into-2 {\n grid-template-columns: 272px calc(100% - 272px); }\n .speakap-page-wrapper.speakap-page-wrapper-split-into-3 {\n grid-template-columns: 272px calc(100% - 544px) 272px; }\n .speakap-page-wrapper > .speakap-page-content-left,\n .speakap-page-wrapper > .speakap-page-content-right,\n .speakap-page-wrapper > .speakap-page-content-center {\n min-width: 1px !important;\n box-sizing: border-box; }\n .speakap-page-wrapper > .speakap-page-content-left {\n grid-row-start: 1;\n grid-column: 1;\n padding-right: 24px; }\n .speakap-page-wrapper > .speakap-page-content-center {\n grid-row-start: 1;\n grid-column: 2; }\n .speakap-page-wrapper > .speakap-page-content-right {\n grid-row-start: 1;\n grid-column: 3;\n padding-left: 24px; }\n\n@media (max-width: 1201px) {\n .speakap-page-wrapper.speakap-page-wrapper-split-into-3 {\n grid-template-columns: calc(100% - 272px) 272px; }\n .speakap-page-wrapper.speakap-page-wrapper-split-into-3 > .speakap-page-content-left {\n grid-column: 2;\n grid-row-start: 1;\n padding-left: 24px;\n padding-right: 0; }\n .speakap-page-wrapper.speakap-page-wrapper-split-into-3 > .speakap-page-content-center {\n grid-column: 1;\n grid-row-end: 300; }\n .speakap-page-wrapper.speakap-page-wrapper-split-into-3 > .speakap-page-content-right {\n padding-top: 16px;\n grid-row-start: 2;\n grid-column: 2; } }\n\n@media (max-width: 992px) {\n .speakap-page-wrapper {\n display: block; }\n .speakap-page-wrapper > .speakap-page-content-left,\n .speakap-page-wrapper > .speakap-page-content-right {\n display: none !important; } }\n"; | ||
| var css_248z$6 = ".speakap-page-wrapper {\n grid-template-columns: 100%;\n grid-row-gap: 0;\n grid-column-gap: 0;\n grid-auto-rows: max-content auto;\n align-items: flex-start;\n justify-content: center;\n box-sizing: border-box;\n display: grid;\n width: 100%; }\n .speakap-page-wrapper.speakap-page-wrapper-split-into-1 {\n grid-template-columns: 288px 544px 288px; }\n .speakap-page-wrapper.speakap-page-wrapper-split-into-2 {\n grid-template-columns: 288px 544px; }\n .speakap-page-wrapper.speakap-page-wrapper-split-into-3 {\n grid-template-columns: 288px 544px 288px; }\n .speakap-page-wrapper > .speakap-page-content-left,\n .speakap-page-wrapper > .speakap-page-content-right,\n .speakap-page-wrapper > .speakap-page-content-center {\n min-width: 1px !important;\n box-sizing: border-box; }\n .speakap-page-wrapper > .speakap-page-content-left {\n grid-row-start: 1;\n grid-column: 1;\n padding-right: 32px; }\n .speakap-page-wrapper > .speakap-page-content-center {\n grid-row-start: 1;\n grid-column: 2; }\n .speakap-page-wrapper > .speakap-page-content-right {\n grid-row-start: 1;\n grid-column: 3;\n padding-left: 32px; }\n\n@media (max-width: 1296px) {\n .speakap-page-wrapper.speakap-page-wrapper-split-into-3 {\n grid-template-columns: 544px 288px; }\n .speakap-page-wrapper.speakap-page-wrapper-split-into-3 > .speakap-page-content-left {\n grid-column: 2;\n grid-row-start: 1;\n padding-left: 32px;\n padding-right: 0; }\n .speakap-page-wrapper.speakap-page-wrapper-split-into-3 > .speakap-page-content-center {\n grid-column: 1;\n grid-row-end: 300; }\n .speakap-page-wrapper.speakap-page-wrapper-split-into-3 > .speakap-page-content-right {\n padding-top: 32px;\n grid-row-start: 2;\n grid-column: 2; } }\n\n@media (max-width: 1016px) {\n .speakap-page-wrapper {\n display: block; }\n .speakap-page-wrapper > .speakap-page-content-left,\n .speakap-page-wrapper > .speakap-page-content-right {\n display: none !important; } }\n"; | ||
| styleInject(css_248z$6); | ||
@@ -686,3 +692,3 @@ | ||
| var css_248z$7 = ".speakap-post-card {\n margin-bottom: 24px; }\n .speakap-post-card .dough-typo {\n white-space: pre-wrap;\n word-wrap: break-word;\n max-width: 100%; }\n .speakap-post-card .speakap-comment-text-block {\n overflow-x: hidden; }\n\n.dough-drop-menu.button-over-image\n.dough-button:not(:hover)\n.dough-button-icon {\n color: var(--dough-color-white); }\n .dough-drop-menu.button-over-image\n.dough-button:not(:hover)\n.dough-button-icon path {\n fill: var(--dough-color-white); }\n\n.speakap-event-image-container {\n box-shadow: inset 0 30px 25px -10px rgba(0, 0, 0, 0.5);\n position: relative; }\n .speakap-event-image-container + .speakap-event-publisher-label {\n position: absolute;\n right: 0;\n bottom: 10%;\n z-index: 10;\n width: auto;\n height: auto;\n background-color: var(--dough-color-header-dark);\n border-top-left-radius: 3px;\n border-bottom-left-radius: 3px;\n color: var(--dough-color-text-white);\n font-size: 0.6875rem;\n padding: 4px 8px 4px 8px; }\n\n@media (max-width: 576px) {\n .speakap-post-card {\n border-radius: 0; } }\n"; | ||
| var css_248z$7 = ".speakap-post-card {\n margin-bottom: 16px; }\n .speakap-post-card .dough-typo {\n white-space: pre-wrap;\n word-wrap: break-word;\n max-width: 100%; }\n .speakap-post-card .speakap-comment-text-block {\n overflow-x: hidden; }\n\n.dough-drop-menu.button-over-image\n.dough-button:not(:hover)\n.dough-button-icon {\n color: var(--dough-color-white); }\n .dough-drop-menu.button-over-image\n.dough-button:not(:hover)\n.dough-button-icon path {\n fill: var(--dough-color-white); }\n\n.speakap-event-image-container {\n box-shadow: inset 0 30px 25px -10px rgba(0, 0, 0, 0.5);\n position: relative; }\n .speakap-event-image-container + .speakap-event-publisher-label {\n position: absolute;\n right: 0;\n bottom: 10%;\n z-index: 10;\n width: auto;\n height: auto;\n background-color: var(--dough-color-header-dark);\n border-top-left-radius: 3px;\n border-bottom-left-radius: 3px;\n color: var(--dough-color-text-white);\n font-size: 0.6875rem;\n padding: 4px 8px 4px 8px; }\n\n@media (max-width: 576px) {\n .speakap-post-card {\n border-radius: 0; } }\n"; | ||
| styleInject(css_248z$7); | ||
@@ -770,2 +776,3 @@ | ||
| }, React.createElement(DropMenu, { | ||
| innerButtonSize: sizes.SMALL, | ||
| showCaret: false, | ||
@@ -778,3 +785,3 @@ size: sizes.SMALL, | ||
| var css_248z$8 = ".speakap-liked-user-pics-wrapper {\n overflow: hidden; }\n .speakap-liked-user-pics-wrapper .speakap-liked-user-pic {\n z-index: 1;\n width: 32px;\n height: 32px;\n overflow: visible;\n transform-origin: center center; }\n .speakap-liked-user-pics-wrapper .speakap-liked-user-pic:hover {\n z-index: 10;\n transform-origin: center center;\n transform: translate3d(0, 0, 0) scale(1.5); }\n body:not(.no-transition) .speakap-liked-user-pics-wrapper .speakap-liked-user-pic:hover {\n transition: all 450ms cubic-bezier(0.25, 1.5, 0, 1); }\n body.no-transition .speakap-liked-user-pics-wrapper .speakap-liked-user-pic:hover {\n transition: none 0ms linear;\n transition-delay: 0ms !important; }\n .speakap-liked-user-pics-wrapper .speakap-liked-user-pic:not(:first-child) {\n margin-left: -12px; }\n"; | ||
| var css_248z$8 = ".speakap-liked-user-pics-wrapper {\n overflow: hidden; }\n .speakap-liked-user-pics-wrapper .speakap-liked-user-pic {\n z-index: 1;\n width: 32px;\n height: 32px;\n overflow: visible;\n transform-origin: center center; }\n .speakap-liked-user-pics-wrapper .speakap-liked-user-pic:hover {\n z-index: 10;\n transform-origin: center center;\n transform: translate3d(0, 0, 0) scale(1.2); }\n body:not(.no-transition) .speakap-liked-user-pics-wrapper .speakap-liked-user-pic:hover {\n transition: transform 450ms cubic-bezier(0.25, 1.5, 0, 1); }\n body.no-transition .speakap-liked-user-pics-wrapper .speakap-liked-user-pic:hover {\n transition: none 0ms linear;\n transition-delay: 0ms !important; }\n .speakap-liked-user-pics-wrapper .speakap-liked-user-pic:not(:first-child) {\n margin-left: -12px; }\n"; | ||
| styleInject(css_248z$8); | ||
@@ -839,3 +846,3 @@ | ||
| }, React.createElement(Text, { | ||
| tiny: true | ||
| small: true | ||
| }, props.children))); | ||
@@ -891,2 +898,3 @@ }; | ||
| }, React.createElement(DropMenu, { | ||
| innerButtonSize: sizes.SMALL, | ||
| showCaret: false, | ||
@@ -896,3 +904,3 @@ size: sizes.SMALL, | ||
| }, props.menuButtons))), React.createElement(Container, { | ||
| paddingVertical: sizes.NONE | ||
| padding: sizes.NONE | ||
| }, props.children)); | ||
@@ -936,2 +944,3 @@ }; | ||
| }, React.createElement(DropMenu, { | ||
| innerButtonSize: sizes.SMALL, | ||
| showCaret: false, | ||
@@ -953,3 +962,4 @@ color: colors.TRANSPARENT, | ||
| }, React.createElement(H2, { | ||
| align: "center" | ||
| align: "center", | ||
| color: colorsText.DARK | ||
| }, props.eventDateDays), React.createElement(H4, { | ||
@@ -967,3 +977,3 @@ align: "center", | ||
| paddingVertical: sizes.SMALL | ||
| }, React.createElement(H4, { | ||
| }, React.createElement(H3, { | ||
| color: colorsText.DARK | ||
@@ -1010,2 +1020,3 @@ }, props.eventTitle), React.createElement(Subtitle, null, props.eventLocation))), React.createElement(Container, { | ||
| }, React.createElement(DropMenu, { | ||
| innerButtonSize: sizes.SMALL, | ||
| showCaret: false, | ||
@@ -1021,3 +1032,3 @@ color: colors.TRANSPARENT, | ||
| paddingVertical: sizes.SMALL | ||
| }, React.createElement(H4, { | ||
| }, React.createElement(H3, { | ||
| color: colorsText.DARK | ||
@@ -1051,3 +1062,3 @@ }, props.newsTitle)), React.createElement(LayoutContainer, null, React.createElement(LayoutFlexBox, { | ||
| var css_248z$9 = ".speakap-rsvp-status-toggles-container {\n margin-left: -24px;\n margin-right: -24px;\n width: calc(100% + 48px); }\n .speakap-rsvp-status-toggles-container .speakap-rsvp-status-toggle {\n cursor: pointer;\n outline: none;\n -webkit-tap-highlight-color: transparent;\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n text-align: center; }\n .speakap-rsvp-status-toggles-container .speakap-rsvp-status-toggle * {\n outline: none;\n -webkit-tap-highlight-color: transparent; }\n"; | ||
| var css_248z$9 = ".speakap-rsvp-status-toggles-container {\n margin-left: -24px;\n margin-right: -24px;\n width: calc(100% + 48px); }\n .speakap-rsvp-status-toggles-container .speakap-rsvp-status-toggle {\n cursor: pointer;\n outline: none;\n -webkit-tap-highlight-color: transparent;\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n text-align: center; }\n .speakap-rsvp-status-toggles-container .speakap-rsvp-status-toggle * {\n outline: none;\n -webkit-tap-highlight-color: transparent; }\n .speakap-rsvp-status-toggles-container .speakap-rsvp-status-toggle > .dough-button {\n width: 100%;\n height: 100%;\n padding-top: 12px;\n padding-bottom: 12px; }\n"; | ||
| styleInject(css_248z$9); | ||
@@ -1094,3 +1105,3 @@ | ||
| return React.createElement(LayoutFlexBox, { | ||
| padding: sizes.SMALL, | ||
| padding: sizes.NONE, | ||
| autoFit: false, | ||
@@ -1100,12 +1111,20 @@ spacing: spacings.STRETCH, | ||
| horizontalAlign: "center" | ||
| }, React.createElement("div", { | ||
| className: cn("speakap-rsvp-status-toggle", props.active ? props.color : colorsText.LIGHT), | ||
| }, React.createElement(Button, { | ||
| color: colors.TRANSPARENT, | ||
| flat: true, | ||
| shadow: false, | ||
| className: "speakap-rsvp-status-toggle", | ||
| onClick: props.onClick | ||
| }, React.createElement("div", { | ||
| className: props.active ? props.color : colorsText.LIGHT | ||
| }, React.createElement("div", { | ||
| className: "speakap-rsvp-status-toggle-icon" | ||
| }, props.icon), React.createElement("div", { | ||
| }, props.icon), React.createElement(Spacer, { | ||
| type: "vertical", | ||
| size: sizes.XS | ||
| }), React.createElement("div", { | ||
| className: "speakap-rsvp-status-toggle-label" | ||
| }, React.createElement(Text, { | ||
| small: true | ||
| }, props.label)))); | ||
| }, props.label))))); | ||
| }; | ||
@@ -1112,0 +1131,0 @@ RsvpStatusToggle.displayName = "RsvpStatusToggle"; |
@@ -269,2 +269,4 @@ 'use strict'; | ||
| icon: props.userInfo && props.userInfo.picture ? React__default.createElement(doughComponentLibrary.Image, { | ||
| width: "100%", | ||
| height: "100%", | ||
| src: props.userInfo.picture, | ||
@@ -296,3 +298,5 @@ rounded: true, | ||
| bold: true | ||
| }, props.userInfo && props.userInfo.name)), React__default.createElement(doughComponentLibrary.LayoutFlexBox, null, React__default.createElement(doughComponentLibrary.Text, null, props.userInfo && props.userInfo.title)))), React__default.createElement(doughComponentLibrary.LayoutFlexBox, { | ||
| }, props.userInfo && props.userInfo.name)), React__default.createElement(doughComponentLibrary.LayoutFlexBox, null, React__default.createElement(doughComponentLibrary.Text, { | ||
| small: true | ||
| }, props.userInfo && props.userInfo.title)))), React__default.createElement(doughComponentLibrary.LayoutFlexBox, { | ||
| autoFit: false | ||
@@ -367,2 +371,4 @@ }, React__default.createElement(doughComponentLibrary.Toggle, { | ||
| icon: React__default.createElement(doughComponentLibrary.Image, { | ||
| height: "100%", | ||
| width: "100%", | ||
| src: nw.thumbnail, | ||
@@ -421,3 +427,3 @@ rounded: true, | ||
| var css_248z$3 = ".speakap-app-frame .speakap-app-frame-wrapper {\n width: 100vw;\n min-height: 100vh; }\n .speakap-app-frame .speakap-app-frame-wrapper .speakap-app-frame-content {\n width: 100%;\n padding-top: 80px;\n padding-bottom: 24px;\n box-sizing: border-box;\n position: relative;\n z-index: 5; }\n\n.speakap-app-frame .speakap-app-frame-header-wrapper {\n height: 56px;\n max-height: 56px;\n min-height: 56px; }\n\n.speakap-app-frame .speakap-app-frame-center {\n overflow-x: hidden;\n overflow-y: auto;\n margin: 0 auto;\n max-width: 1328px;\n padding-left: 88px;\n padding-right: calc( 88px + var(--dough-scroll-bar-width)); }\n\n@media (max-width: 576px) {\n .speakap-app-frame .speakap-app-frame-center {\n max-width: 100%;\n padding-left: 0;\n padding-right: 0; } }\n"; | ||
| var css_248z$3 = ".speakap-app-frame .speakap-app-frame-wrapper {\n width: 100vw;\n min-height: 100vh; }\n .speakap-app-frame .speakap-app-frame-wrapper .speakap-app-frame-content {\n width: 100%;\n padding-top: 88px;\n padding-bottom: 16px;\n box-sizing: border-box;\n position: relative;\n z-index: 5; }\n\n.speakap-app-frame .speakap-app-frame-header-wrapper {\n height: 56px;\n max-height: 56px;\n min-height: 56px; }\n\n.speakap-app-frame .speakap-app-frame-center {\n overflow-x: hidden;\n overflow-y: auto;\n margin: 0 auto;\n max-width: calc(1120px + var(--dough-scroll-bar-width));\n padding-right: var(--dough-scroll-bar-width); }\n\n@media (max-width: 576px) {\n .speakap-app-frame .speakap-app-frame-center {\n max-width: 100% !important;\n padding-right: var(--dough-scroll-bar-width); }\n .speakap-app-frame .speakap-app-frame-center:not(.speakap-application-header) {\n padding-left: 0 !important;\n padding-right: 0 !important; } }\n\n@media (max-width: 1296px) {\n .speakap-app-frame-center {\n max-width: calc( 832px + var(--dough-scroll-bar-width)) !important; } }\n\n@media (max-width: 1016px) {\n .speakap-app-frame .speakap-app-frame-center {\n max-width: calc( 736px + var(--dough-scroll-bar-width)) !important;\n padding-left: 96px;\n padding-right: calc( 96px + var(--dough-scroll-bar-width)); } }\n"; | ||
| styleInject(css_248z$3); | ||
@@ -459,3 +465,3 @@ | ||
| var css_248z$4 = ".speakap-app-frame-header-wrapper {\n position: absolute;\n top: 0;\n left: 0;\n z-index: 10;\n width: 100vw;\n height: 56px;\n position: fixed;\n display: -webkit-box;\n display: -moz-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n justify-content: center;\n overflow: hidden; }\n .speakap-app-frame-header-wrapper > .speakap-application-header {\n overflow: hidden;\n width: 100%; }\n .speakap-app-frame-header-wrapper > .speakap-application-header .speakap-header-left {\n width: 25%;\n padding-left: 0 !important; }\n .speakap-app-frame-header-wrapper > .speakap-application-header .speakap-header-right {\n width: 25%;\n padding-right: 0 !important; }\n\n@media (max-width: 576px) {\n .speakap-application-header {\n padding-left: 64px !important;\n padding-right: 16px !important; } }\n\n@media (max-width: 576px) {\n .speakap-app-frame-header-wrapper .speakap-header-right {\n display: none !important; } }\n"; | ||
| var css_248z$4 = ".speakap-app-frame-header-wrapper {\n position: absolute;\n top: 0;\n left: 0;\n z-index: 10;\n width: 100vw;\n height: 56px;\n position: fixed;\n display: -webkit-box;\n display: -moz-box;\n display: -webkit-flex;\n display: -ms-flexbox;\n display: flex;\n flex-flow: row nowrap;\n align-items: center;\n justify-content: center;\n overflow: hidden; }\n .speakap-app-frame-header-wrapper > .speakap-application-header {\n overflow: hidden;\n width: 100%; }\n .speakap-app-frame-header-wrapper > .speakap-application-header .speakap-header-left {\n width: 25%;\n padding-left: 0 !important; }\n .speakap-app-frame-header-wrapper > .speakap-application-header .speakap-header-right {\n width: 25%;\n padding-right: 0 !important; }\n\n@media (max-width: 576px) {\n .speakap-application-header {\n padding-left: 64px !important;\n padding-right: calc( 16px + var(--dough-scroll-bar-width)) !important; } }\n\n@media (max-width: 576px) {\n .speakap-app-frame-header-wrapper .speakap-header-right {\n display: none !important; } }\n"; | ||
| styleInject(css_248z$4); | ||
@@ -625,3 +631,3 @@ | ||
| var css_248z$6 = ".speakap-page-wrapper {\n grid-template-columns: 100%;\n grid-row-gap: 0;\n grid-column-gap: 0;\n grid-auto-rows: max-content auto;\n align-items: flex-start;\n justify-content: center;\n box-sizing: border-box;\n display: grid;\n width: 100%; }\n .speakap-page-wrapper.speakap-page-wrapper-split-into-1 {\n grid-template-columns: 272px calc(100% - 544px) 272px; }\n .speakap-page-wrapper.speakap-page-wrapper-split-into-2 {\n grid-template-columns: 272px calc(100% - 272px); }\n .speakap-page-wrapper.speakap-page-wrapper-split-into-3 {\n grid-template-columns: 272px calc(100% - 544px) 272px; }\n .speakap-page-wrapper > .speakap-page-content-left,\n .speakap-page-wrapper > .speakap-page-content-right,\n .speakap-page-wrapper > .speakap-page-content-center {\n min-width: 1px !important;\n box-sizing: border-box; }\n .speakap-page-wrapper > .speakap-page-content-left {\n grid-row-start: 1;\n grid-column: 1;\n padding-right: 24px; }\n .speakap-page-wrapper > .speakap-page-content-center {\n grid-row-start: 1;\n grid-column: 2; }\n .speakap-page-wrapper > .speakap-page-content-right {\n grid-row-start: 1;\n grid-column: 3;\n padding-left: 24px; }\n\n@media (max-width: 1201px) {\n .speakap-page-wrapper.speakap-page-wrapper-split-into-3 {\n grid-template-columns: calc(100% - 272px) 272px; }\n .speakap-page-wrapper.speakap-page-wrapper-split-into-3 > .speakap-page-content-left {\n grid-column: 2;\n grid-row-start: 1;\n padding-left: 24px;\n padding-right: 0; }\n .speakap-page-wrapper.speakap-page-wrapper-split-into-3 > .speakap-page-content-center {\n grid-column: 1;\n grid-row-end: 300; }\n .speakap-page-wrapper.speakap-page-wrapper-split-into-3 > .speakap-page-content-right {\n padding-top: 16px;\n grid-row-start: 2;\n grid-column: 2; } }\n\n@media (max-width: 992px) {\n .speakap-page-wrapper {\n display: block; }\n .speakap-page-wrapper > .speakap-page-content-left,\n .speakap-page-wrapper > .speakap-page-content-right {\n display: none !important; } }\n"; | ||
| var css_248z$6 = ".speakap-page-wrapper {\n grid-template-columns: 100%;\n grid-row-gap: 0;\n grid-column-gap: 0;\n grid-auto-rows: max-content auto;\n align-items: flex-start;\n justify-content: center;\n box-sizing: border-box;\n display: grid;\n width: 100%; }\n .speakap-page-wrapper.speakap-page-wrapper-split-into-1 {\n grid-template-columns: 288px 544px 288px; }\n .speakap-page-wrapper.speakap-page-wrapper-split-into-2 {\n grid-template-columns: 288px 544px; }\n .speakap-page-wrapper.speakap-page-wrapper-split-into-3 {\n grid-template-columns: 288px 544px 288px; }\n .speakap-page-wrapper > .speakap-page-content-left,\n .speakap-page-wrapper > .speakap-page-content-right,\n .speakap-page-wrapper > .speakap-page-content-center {\n min-width: 1px !important;\n box-sizing: border-box; }\n .speakap-page-wrapper > .speakap-page-content-left {\n grid-row-start: 1;\n grid-column: 1;\n padding-right: 32px; }\n .speakap-page-wrapper > .speakap-page-content-center {\n grid-row-start: 1;\n grid-column: 2; }\n .speakap-page-wrapper > .speakap-page-content-right {\n grid-row-start: 1;\n grid-column: 3;\n padding-left: 32px; }\n\n@media (max-width: 1296px) {\n .speakap-page-wrapper.speakap-page-wrapper-split-into-3 {\n grid-template-columns: 544px 288px; }\n .speakap-page-wrapper.speakap-page-wrapper-split-into-3 > .speakap-page-content-left {\n grid-column: 2;\n grid-row-start: 1;\n padding-left: 32px;\n padding-right: 0; }\n .speakap-page-wrapper.speakap-page-wrapper-split-into-3 > .speakap-page-content-center {\n grid-column: 1;\n grid-row-end: 300; }\n .speakap-page-wrapper.speakap-page-wrapper-split-into-3 > .speakap-page-content-right {\n padding-top: 32px;\n grid-row-start: 2;\n grid-column: 2; } }\n\n@media (max-width: 1016px) {\n .speakap-page-wrapper {\n display: block; }\n .speakap-page-wrapper > .speakap-page-content-left,\n .speakap-page-wrapper > .speakap-page-content-right {\n display: none !important; } }\n"; | ||
| styleInject(css_248z$6); | ||
@@ -693,3 +699,3 @@ | ||
| var css_248z$7 = ".speakap-post-card {\n margin-bottom: 24px; }\n .speakap-post-card .dough-typo {\n white-space: pre-wrap;\n word-wrap: break-word;\n max-width: 100%; }\n .speakap-post-card .speakap-comment-text-block {\n overflow-x: hidden; }\n\n.dough-drop-menu.button-over-image\n.dough-button:not(:hover)\n.dough-button-icon {\n color: var(--dough-color-white); }\n .dough-drop-menu.button-over-image\n.dough-button:not(:hover)\n.dough-button-icon path {\n fill: var(--dough-color-white); }\n\n.speakap-event-image-container {\n box-shadow: inset 0 30px 25px -10px rgba(0, 0, 0, 0.5);\n position: relative; }\n .speakap-event-image-container + .speakap-event-publisher-label {\n position: absolute;\n right: 0;\n bottom: 10%;\n z-index: 10;\n width: auto;\n height: auto;\n background-color: var(--dough-color-header-dark);\n border-top-left-radius: 3px;\n border-bottom-left-radius: 3px;\n color: var(--dough-color-text-white);\n font-size: 0.6875rem;\n padding: 4px 8px 4px 8px; }\n\n@media (max-width: 576px) {\n .speakap-post-card {\n border-radius: 0; } }\n"; | ||
| var css_248z$7 = ".speakap-post-card {\n margin-bottom: 16px; }\n .speakap-post-card .dough-typo {\n white-space: pre-wrap;\n word-wrap: break-word;\n max-width: 100%; }\n .speakap-post-card .speakap-comment-text-block {\n overflow-x: hidden; }\n\n.dough-drop-menu.button-over-image\n.dough-button:not(:hover)\n.dough-button-icon {\n color: var(--dough-color-white); }\n .dough-drop-menu.button-over-image\n.dough-button:not(:hover)\n.dough-button-icon path {\n fill: var(--dough-color-white); }\n\n.speakap-event-image-container {\n box-shadow: inset 0 30px 25px -10px rgba(0, 0, 0, 0.5);\n position: relative; }\n .speakap-event-image-container + .speakap-event-publisher-label {\n position: absolute;\n right: 0;\n bottom: 10%;\n z-index: 10;\n width: auto;\n height: auto;\n background-color: var(--dough-color-header-dark);\n border-top-left-radius: 3px;\n border-bottom-left-radius: 3px;\n color: var(--dough-color-text-white);\n font-size: 0.6875rem;\n padding: 4px 8px 4px 8px; }\n\n@media (max-width: 576px) {\n .speakap-post-card {\n border-radius: 0; } }\n"; | ||
| styleInject(css_248z$7); | ||
@@ -777,2 +783,3 @@ | ||
| }, React__default.createElement(doughComponentLibrary.DropMenu, { | ||
| innerButtonSize: doughComponentLibrary.sizes.SMALL, | ||
| showCaret: false, | ||
@@ -785,3 +792,3 @@ size: doughComponentLibrary.sizes.SMALL, | ||
| var css_248z$8 = ".speakap-liked-user-pics-wrapper {\n overflow: hidden; }\n .speakap-liked-user-pics-wrapper .speakap-liked-user-pic {\n z-index: 1;\n width: 32px;\n height: 32px;\n overflow: visible;\n transform-origin: center center; }\n .speakap-liked-user-pics-wrapper .speakap-liked-user-pic:hover {\n z-index: 10;\n transform-origin: center center;\n transform: translate3d(0, 0, 0) scale(1.5); }\n body:not(.no-transition) .speakap-liked-user-pics-wrapper .speakap-liked-user-pic:hover {\n transition: all 450ms cubic-bezier(0.25, 1.5, 0, 1); }\n body.no-transition .speakap-liked-user-pics-wrapper .speakap-liked-user-pic:hover {\n transition: none 0ms linear;\n transition-delay: 0ms !important; }\n .speakap-liked-user-pics-wrapper .speakap-liked-user-pic:not(:first-child) {\n margin-left: -12px; }\n"; | ||
| var css_248z$8 = ".speakap-liked-user-pics-wrapper {\n overflow: hidden; }\n .speakap-liked-user-pics-wrapper .speakap-liked-user-pic {\n z-index: 1;\n width: 32px;\n height: 32px;\n overflow: visible;\n transform-origin: center center; }\n .speakap-liked-user-pics-wrapper .speakap-liked-user-pic:hover {\n z-index: 10;\n transform-origin: center center;\n transform: translate3d(0, 0, 0) scale(1.2); }\n body:not(.no-transition) .speakap-liked-user-pics-wrapper .speakap-liked-user-pic:hover {\n transition: transform 450ms cubic-bezier(0.25, 1.5, 0, 1); }\n body.no-transition .speakap-liked-user-pics-wrapper .speakap-liked-user-pic:hover {\n transition: none 0ms linear;\n transition-delay: 0ms !important; }\n .speakap-liked-user-pics-wrapper .speakap-liked-user-pic:not(:first-child) {\n margin-left: -12px; }\n"; | ||
| styleInject(css_248z$8); | ||
@@ -846,3 +853,3 @@ | ||
| }, React__default.createElement(doughComponentLibrary.Text, { | ||
| tiny: true | ||
| small: true | ||
| }, props.children))); | ||
@@ -898,2 +905,3 @@ }; | ||
| }, React__default.createElement(doughComponentLibrary.DropMenu, { | ||
| innerButtonSize: doughComponentLibrary.sizes.SMALL, | ||
| showCaret: false, | ||
@@ -903,3 +911,3 @@ size: doughComponentLibrary.sizes.SMALL, | ||
| }, props.menuButtons))), React__default.createElement(doughComponentLibrary.Container, { | ||
| paddingVertical: doughComponentLibrary.sizes.NONE | ||
| padding: doughComponentLibrary.sizes.NONE | ||
| }, props.children)); | ||
@@ -943,2 +951,3 @@ }; | ||
| }, React__default.createElement(doughComponentLibrary.DropMenu, { | ||
| innerButtonSize: doughComponentLibrary.sizes.SMALL, | ||
| showCaret: false, | ||
@@ -960,3 +969,4 @@ color: doughComponentLibrary.colors.TRANSPARENT, | ||
| }, React__default.createElement(doughComponentLibrary.H2, { | ||
| align: "center" | ||
| align: "center", | ||
| color: doughComponentLibrary.colorsText.DARK | ||
| }, props.eventDateDays), React__default.createElement(doughComponentLibrary.H4, { | ||
@@ -974,3 +984,3 @@ align: "center", | ||
| paddingVertical: doughComponentLibrary.sizes.SMALL | ||
| }, React__default.createElement(doughComponentLibrary.H4, { | ||
| }, React__default.createElement(doughComponentLibrary.H3, { | ||
| color: doughComponentLibrary.colorsText.DARK | ||
@@ -1017,2 +1027,3 @@ }, props.eventTitle), React__default.createElement(doughComponentLibrary.Subtitle, null, props.eventLocation))), React__default.createElement(doughComponentLibrary.Container, { | ||
| }, React__default.createElement(doughComponentLibrary.DropMenu, { | ||
| innerButtonSize: doughComponentLibrary.sizes.SMALL, | ||
| showCaret: false, | ||
@@ -1028,3 +1039,3 @@ color: doughComponentLibrary.colors.TRANSPARENT, | ||
| paddingVertical: doughComponentLibrary.sizes.SMALL | ||
| }, React__default.createElement(doughComponentLibrary.H4, { | ||
| }, React__default.createElement(doughComponentLibrary.H3, { | ||
| color: doughComponentLibrary.colorsText.DARK | ||
@@ -1058,3 +1069,3 @@ }, props.newsTitle)), React__default.createElement(doughComponentLibrary.LayoutContainer, null, React__default.createElement(doughComponentLibrary.LayoutFlexBox, { | ||
| var css_248z$9 = ".speakap-rsvp-status-toggles-container {\n margin-left: -24px;\n margin-right: -24px;\n width: calc(100% + 48px); }\n .speakap-rsvp-status-toggles-container .speakap-rsvp-status-toggle {\n cursor: pointer;\n outline: none;\n -webkit-tap-highlight-color: transparent;\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n text-align: center; }\n .speakap-rsvp-status-toggles-container .speakap-rsvp-status-toggle * {\n outline: none;\n -webkit-tap-highlight-color: transparent; }\n"; | ||
| var css_248z$9 = ".speakap-rsvp-status-toggles-container {\n margin-left: -24px;\n margin-right: -24px;\n width: calc(100% + 48px); }\n .speakap-rsvp-status-toggles-container .speakap-rsvp-status-toggle {\n cursor: pointer;\n outline: none;\n -webkit-tap-highlight-color: transparent;\n width: 100%;\n height: 100%;\n box-sizing: border-box;\n text-align: center; }\n .speakap-rsvp-status-toggles-container .speakap-rsvp-status-toggle * {\n outline: none;\n -webkit-tap-highlight-color: transparent; }\n .speakap-rsvp-status-toggles-container .speakap-rsvp-status-toggle > .dough-button {\n width: 100%;\n height: 100%;\n padding-top: 12px;\n padding-bottom: 12px; }\n"; | ||
| styleInject(css_248z$9); | ||
@@ -1101,3 +1112,3 @@ | ||
| return React__default.createElement(doughComponentLibrary.LayoutFlexBox, { | ||
| padding: doughComponentLibrary.sizes.SMALL, | ||
| padding: doughComponentLibrary.sizes.NONE, | ||
| autoFit: false, | ||
@@ -1107,12 +1118,20 @@ spacing: doughComponentLibrary.spacings.STRETCH, | ||
| horizontalAlign: "center" | ||
| }, React__default.createElement("div", { | ||
| className: cn("speakap-rsvp-status-toggle", props.active ? props.color : doughComponentLibrary.colorsText.LIGHT), | ||
| }, React__default.createElement(doughComponentLibrary.Button, { | ||
| color: doughComponentLibrary.colors.TRANSPARENT, | ||
| flat: true, | ||
| shadow: false, | ||
| className: "speakap-rsvp-status-toggle", | ||
| onClick: props.onClick | ||
| }, React__default.createElement("div", { | ||
| className: props.active ? props.color : doughComponentLibrary.colorsText.LIGHT | ||
| }, React__default.createElement("div", { | ||
| className: "speakap-rsvp-status-toggle-icon" | ||
| }, props.icon), React__default.createElement("div", { | ||
| }, props.icon), React__default.createElement(doughComponentLibrary.Spacer, { | ||
| type: "vertical", | ||
| size: doughComponentLibrary.sizes.XS | ||
| }), React__default.createElement("div", { | ||
| className: "speakap-rsvp-status-toggle-label" | ||
| }, React__default.createElement(doughComponentLibrary.Text, { | ||
| small: true | ||
| }, props.label)))); | ||
| }, props.label))))); | ||
| }; | ||
@@ -1119,0 +1138,0 @@ RsvpStatusToggle.displayName = "RsvpStatusToggle"; |
| { | ||
| "name": "@speakapbv/dough-extended-components-for-speakap", | ||
| "version": "1.2.9", | ||
| "version": "1.3.0", | ||
| "description": "DOUGH Extended for Speakap: Speakap Specific Components based on Dough", | ||
@@ -25,3 +25,3 @@ "author": "Speakap", | ||
| "peerDependencies": { | ||
| "@speakapbv/dough-component-library": ">=0.3.18", | ||
| "@speakapbv/dough-component-library": ">=0.4.0", | ||
| "@speakapbv/dough-component-library-tokens": ">=1.0.0", | ||
@@ -38,3 +38,3 @@ "react": ">=16.12.0", | ||
| "@rollup/plugin-url": "^4.0.0", | ||
| "@speakapbv/dough-component-library": "^0.3.18", | ||
| "@speakapbv/dough-component-library": "^0.4.0", | ||
| "@speakapbv/dough-component-library-tokens": "1.0.0", | ||
@@ -41,0 +41,0 @@ "@svgr/rollup": "^5.0.1", |
New alerts
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Fixed alerts
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by2.65%
131254
- Lines of code
- increased by1.88%
2327
Worsened metrics
- Number of low supply chain risk alerts
- increased by36.36%
15
No dependency changes