primevue
Version:
PrimeVue is an open source UI library for Vue featuring a rich set of 80+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBloc
2 lines (1 loc) • 5.48 kB
JavaScript
this.primevue=this.primevue||{},this.primevue.dialog=this.primevue.dialog||{},this.primevue.dialog.style=function(t){"use strict";function o(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}return o(primevue.base.style).default.extend({name:"dialog",css:"\n@layer primevue {\n .p-dialog-mask.p-component-overlay {\n pointer-events: auto;\n }\n\n .p-dialog {\n max-height: 90%;\n transform: scale(1);\n }\n\n .p-dialog-content {\n overflow-y: auto;\n }\n\n .p-dialog-header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n flex-shrink: 0;\n }\n\n .p-dialog-footer {\n flex-shrink: 0;\n }\n\n .p-dialog .p-dialog-header-icons {\n display: flex;\n align-items: center;\n }\n\n .p-dialog .p-dialog-header-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n position: relative;\n }\n\n /* Fluid */\n .p-fluid .p-dialog-footer .p-button {\n width: auto;\n }\n\n /* Animation */\n /* Center */\n .p-dialog-enter-active {\n transition: all 150ms cubic-bezier(0, 0, 0.2, 1);\n }\n .p-dialog-leave-active {\n transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);\n }\n .p-dialog-enter-from,\n .p-dialog-leave-to {\n opacity: 0;\n transform: scale(0.7);\n }\n\n /* Top, Bottom, Left, Right, Top* and Bottom* */\n .p-dialog-top .p-dialog,\n .p-dialog-bottom .p-dialog,\n .p-dialog-left .p-dialog,\n .p-dialog-right .p-dialog,\n .p-dialog-topleft .p-dialog,\n .p-dialog-topright .p-dialog,\n .p-dialog-bottomleft .p-dialog,\n .p-dialog-bottomright .p-dialog {\n margin: 0.75rem;\n transform: translate3d(0px, 0px, 0px);\n }\n .p-dialog-top .p-dialog-enter-active,\n .p-dialog-top .p-dialog-leave-active,\n .p-dialog-bottom .p-dialog-enter-active,\n .p-dialog-bottom .p-dialog-leave-active,\n .p-dialog-left .p-dialog-enter-active,\n .p-dialog-left .p-dialog-leave-active,\n .p-dialog-right .p-dialog-enter-active,\n .p-dialog-right .p-dialog-leave-active,\n .p-dialog-topleft .p-dialog-enter-active,\n .p-dialog-topleft .p-dialog-leave-active,\n .p-dialog-topright .p-dialog-enter-active,\n .p-dialog-topright .p-dialog-leave-active,\n .p-dialog-bottomleft .p-dialog-enter-active,\n .p-dialog-bottomleft .p-dialog-leave-active,\n .p-dialog-bottomright .p-dialog-enter-active,\n .p-dialog-bottomright .p-dialog-leave-active {\n transition: all 0.3s ease-out;\n }\n .p-dialog-top .p-dialog-enter-from,\n .p-dialog-top .p-dialog-leave-to {\n transform: translate3d(0px, -100%, 0px);\n }\n .p-dialog-bottom .p-dialog-enter-from,\n .p-dialog-bottom .p-dialog-leave-to {\n transform: translate3d(0px, 100%, 0px);\n }\n .p-dialog-left .p-dialog-enter-from,\n .p-dialog-left .p-dialog-leave-to,\n .p-dialog-topleft .p-dialog-enter-from,\n .p-dialog-topleft .p-dialog-leave-to,\n .p-dialog-bottomleft .p-dialog-enter-from,\n .p-dialog-bottomleft .p-dialog-leave-to {\n transform: translate3d(-100%, 0px, 0px);\n }\n .p-dialog-right .p-dialog-enter-from,\n .p-dialog-right .p-dialog-leave-to,\n .p-dialog-topright .p-dialog-enter-from,\n .p-dialog-topright .p-dialog-leave-to,\n .p-dialog-bottomright .p-dialog-enter-from,\n .p-dialog-bottomright .p-dialog-leave-to {\n transform: translate3d(100%, 0px, 0px);\n }\n\n /* Maximize */\n .p-dialog-maximized {\n -webkit-transition: none;\n transition: none;\n transform: none;\n width: 100vw !important;\n height: 100vh !important;\n top: 0px;\n left: 0px;\n max-height: 100%;\n height: 100%;\n }\n .p-dialog-maximized .p-dialog-content {\n flex-grow: 1;\n }\n\n .p-confirm-dialog .p-dialog-content {\n display: flex;\n align-items: center;\n }\n}\n",classes:{mask:function(t){var o=t.props,e=["left","right","top","topleft","topright","bottom","bottomleft","bottomright"].find((function(t){return t===o.position}));return["p-dialog-mask",{"p-component-overlay p-component-overlay-enter":o.modal},e?"p-dialog-".concat(e):""]},root:function(t){var o=t.props,e=t.instance;return["p-dialog p-component",{"p-dialog-rtl":o.rtl,"p-dialog-maximized":o.maximizable&&e.maximized,"p-input-filled":"filled"===e.$primevue.config.inputStyle,"p-ripple-disabled":!1===e.$primevue.config.ripple}]},header:"p-dialog-header",title:"p-dialog-title",icons:"p-dialog-header-icons",maximizableButton:"p-dialog-header-icon p-dialog-header-maximize p-link",maximizableIcon:"p-dialog-header-maximize-icon",closeButton:"p-dialog-header-icon p-dialog-header-close p-link",closeButtonIcon:"p-dialog-header-close-icon",content:"p-dialog-content",footer:"p-dialog-footer"},inlineStyles:{mask:function(t){var o=t.position;return{position:"fixed",height:"100%",width:"100%",left:0,top:0,display:"flex",justifyContent:"left"===o||"topleft"===o||"bottomleft"===o?"flex-start":"right"===o||"topright"===o||"bottomright"===o?"flex-end":"center",alignItems:"top"===o||"topleft"===o||"topright"===o?"flex-start":"bottom"===o||"bottomleft"===o||"bottomright"===o?"flex-end":"center",pointerEvents:t.modal?"auto":"none"}},root:{display:"flex",flexDirection:"column",pointerEvents:"auto"}}})}();