monday-ui-react-core
Version:
Official monday.com UI resources for application development in React.js
3 lines (2 loc) • 3.72 kB
JavaScript
var n={toast:"toast",typeNormal:"typeNormal",typePositive:"typePositive",typeNegative:"typeNegative",typeWarning:"typeWarning",closeButton:"closeButton",actionButton:"actionButton",actionLink:"actionLink",typeDark:"typeDark",icon:"icon",withTransition:"withTransition",bounceIn:"bounceIn",content:"content",textContent:"textContent",enterActive:"enterActive",slideIn:"slideIn",exitActive:"exitActive",slideOut:"slideOut"};!function(n){const t="s_id-72c9912c1efa_2_149_4";if("undefined"!=typeof document){const o=document.head||document.getElementsByTagName("head")[0];if(o.querySelector("#"+t))return;const a=document.createElement("style");a.id=t,o.firstChild?o.insertBefore(a,o.firstChild):o.appendChild(a),a.appendChild(document.createTextNode(n))}else globalThis.injectedStyles&&(globalThis.injectedStyles[t]=n)}(".toast {\n box-shadow: var(--box-shadow-medium);\n -webkit-font-smoothing: var(--font-smoothing-webkit);\n -moz-osx-font-smoothing: var(--font-smoothing-moz);\n margin: var(--spacing-medium);\n position: fixed;\n left: 50%;\n top: 0;\n margin-right: auto;\n margin-left: auto;\n padding: var(--spacing-small);\n align-items: center;\n display: flex;\n min-width: 200px;\n width: auto;\n border-radius: var(--border-radius-small);\n color: var(--fixed-light-color);\n transform: translateX(-50%);\n transition: background-color 80ms cubic-bezier(0.6, 0, 0.4, 1), width 200ms cubic-bezier(0, 0, 0.4, 1);\n}\n.toast.typeNormal {\n background-color: var(--primary-color);\n}\n.toast.typePositive {\n background-color: var(--positive-color);\n}\n.toast.typeNegative {\n background-color: var(--negative-color);\n}\n.toast.typeWarning {\n background-color: var(--warning-color);\n color: var(--fixed-dark-color);\n}\n.toast.typeWarning .closeButton {\n color: var(--fixed-dark-color);\n}\n.toast.typeWarning .actionButton,\n.toast.typeWarning .actionLink {\n color: var(--fixed-dark-color);\n border-color: var(--fixed-dark-color);\n}\n.toast.typeDark {\n background-color: var(--inverted-color-background);\n color: var(--text-color-on-inverted);\n}\n.toast.typeDark .closeButton {\n color: var(--text-color-on-inverted);\n}\n.toast.typeDark .actionButton,\n.toast.typeDark .actionLink {\n color: var(--text-color-on-inverted);\n border-color: var(--text-color-on-inverted);\n}\n.icon {\n display: flex;\n margin-left: var(--spacing-small);\n}\n.actionButton.withTransition {\n opacity: 0;\n animation: bounceIn 150ms cubic-bezier(0, 0, 0.4, 1);\n animation-delay: 300ms;\n animation-fill-mode: forwards;\n}\n.content {\n margin: 0 var(--spacing-small);\n flex: 1;\n}\n.textContent {\n display: inline-flex;\n flex-grow: 1;\n}\n.enterActive {\n animation-iteration-count: 1;\n animation-fill-mode: forwards;\n animation-name: slideIn;\n animation-duration: 350ms;\n animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1);\n}\n.exitActive {\n animation-iteration-count: 1;\n animation-fill-mode: forwards;\n animation-name: slideOut;\n animation-duration: 350ms;\n animation-timing-function: cubic-bezier(0.6, 0, 0.4, 1);\n}\n.closeButton {\n margin-left: var(--spacing-small);\n}\n@keyframes slideIn {\n 0% {\n transform: translate(-50%, -100px);\n }\n 40% {\n transform: translate(-50%, 16px);\n }\n 100% {\n transform: translate(-50%, 0px);\n }\n}\n@keyframes slideOut {\n 0% {\n transform: translate(-50%, 0);\n }\n 100% {\n transform: translate(-50%, -100px);\n opacity: 0;\n }\n}\n@keyframes bounceIn {\n 0% {\n transform: scale(0.8);\n opacity: 0;\n }\n 50% {\n opacity: 1;\n }\n 100% {\n opacity: 1;\n transform: scale(1);\n }\n}");export{n as default};
//# sourceMappingURL=Toast.module.scss.js.map