@gsretail.com/gui-core/build/core/Dialog/GuiDialog.styled.js

A skeleton to create your own React component library using Rollup, TypeScript, Sass and Storybook

import{__makeTemplateObject as n}from"../../node_modules/tslib/tslib.es6.js";import t from"@emotion/styled";import{Dialog as o}from"@mui/material";var i,e,r=t(o)(i||(i=n(["\n  .MuiDialog-container > .MuiPaper-root {\n    max-width: ",";\n    height: ",";\n    background-color: ",";\n\n    &.MuiDialog-paperFullScreen {\n      max-width: unset;\n    }\n  }\n\n  & .gui-tabs {\n    .MuiGrid-root {\n      max-width: 100%;\n      flex-grow: 1;\n    }\n  }\n\n  .MuiDialogTitle-root {\n    min-height: 48px;\n    padding: 16px 24px 13px;\n    font-weight: 700;\n    line-height: 1;\n    background-color: ",";\n    border-bottom: 1px solid ",";\n\n    & .gui-tabs {\n      margin: 6px 0 -13px;\n    }\n  }\n\n  .MuiDialogTitle-root + .MuiDialogContent-root {\n    padding-top: 16px;\n  }\n\n  .MuiDialogContent-root {\n    padding: 16px 16px 0 16px;\n    word-break: break-all;\n    font-size: 0.875rem;  //14px\n\n    & > div:first-of-type,\n    & > .gui-tabPanel > div:first-of-type {\n      margin-top: 0;\n    }\n\n    overflow: auto;\n    // overflow: hidden;\n    // &:hover {\n    //   overflow-y: overlay;\n    // }\n\n    & > img {\n      display: block;\n      max-width: 100%;\n      margin: 0 auto 16px;\n    }\n  }\n\n  .MuiDialogActions-root {\n    padding: 8px 16px;\n    background-color: ",";\n    border-top: 1px solid ",";\n  }\n\n  .btnDialogClose {\n    position: absolute;\n    top: 8px;\n    right: 8px;\n  }\n\n  .MuiDialog-paper {\n    min-height: 80px;\n  }\n\n  // 헤더 컨텐츠\n  .ctrlWrap {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    position: absolute;\n    top: 12px;\n    width: calc(100% - 80px);\n\n    & .ctrl {\n      display: flex;\n      gap: 8px;\n    }\n  }\n"],["\n  .MuiDialog-container > .MuiPaper-root {\n    max-width: ",";\n    height: ",";\n    background-color: ",";\n\n    &.MuiDialog-paperFullScreen {\n      max-width: unset;\n    }\n  }\n\n  & .gui-tabs {\n    .MuiGrid-root {\n      max-width: 100%;\n      flex-grow: 1;\n    }\n  }\n\n  .MuiDialogTitle-root {\n    min-height: 48px;\n    padding: 16px 24px 13px;\n    font-weight: 700;\n    line-height: 1;\n    background-color: ",";\n    border-bottom: 1px solid ",";\n\n    & .gui-tabs {\n      margin: 6px 0 -13px;\n    }\n  }\n\n  .MuiDialogTitle-root + .MuiDialogContent-root {\n    padding-top: 16px;\n  }\n\n  .MuiDialogContent-root {\n    padding: 16px 16px 0 16px;\n    word-break: break-all;\n    font-size: 0.875rem;  //14px\n\n    & > div:first-of-type,\n    & > .gui-tabPanel > div:first-of-type {\n      margin-top: 0;\n    }\n\n    overflow: auto;\n    // overflow: hidden;\n    // &:hover {\n    //   overflow-y: overlay;\n    // }\n\n    & > img {\n      display: block;\n      max-width: 100%;\n      margin: 0 auto 16px;\n    }\n  }\n\n  .MuiDialogActions-root {\n    padding: 8px 16px;\n    background-color: ",";\n    border-top: 1px solid ",";\n  }\n\n  .btnDialogClose {\n    position: absolute;\n    top: 8px;\n    right: 8px;\n  }\n\n  .MuiDialog-paper {\n    min-height: 80px;\n  }\n\n  // 헤더 컨텐츠\n  .ctrlWrap {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    position: absolute;\n    top: 12px;\n    width: calc(100% - 80px);\n\n    & .ctrl {\n      display: flex;\n      gap: 8px;\n    }\n  }\n"])),(function(n){var t=n.size;return"tiny"===t?"444px":"small"===t?"600px":"medium"===t?"960px":"large"===t?"1280px":"number"==typeof t?"".concat(t,"px"):"string"==typeof t?"".concat(t):void 0}),(function(n){var t=n.height;return"number"==typeof t?"".concat(t,"px"):"string"==typeof t?"".concat(t):void 0}),(function(n){return n.theme.palette.grey[100]}),(function(n){return n.theme.palette.common.white}),(function(n){return n.theme.palette.grey[300]}),(function(n){return n.theme.palette.common.white}),(function(n){return n.theme.palette.grey[300]})),a=t(o)(e||(e=n(["\n  .MuiDialog-container > .MuiPaper-root {\n    margin: 0;\n    max-width: unset;\n    width: 100%;\n    visibility: visible;\n    background-color: ",";\n  }\n\n  max-width: ",";\n  width: 100%;\n  height: ",";\n  top: 50%;\n  bottom: unset;\n  right: unset;\n  left: 50%;\n  transform: translateX(-50%) translateY(-50%);\n  visibility: hidden;\n\n  .MuiBackdrop-root {\n    display: none;\n  }\n\n  #draggable-dialog-title {\n    cursor: move;\n  }\n\n  & .gui-tabs {\n    .MuiGrid-root {\n      max-width: 100%;\n      flex-grow: 1;\n    }\n  }\n\n  .MuiDialogTitle-root {\n    min-height: 48px;\n    padding: 16px 24px 13px;\n    font-weight: 700;\n    line-height: 1;\n    background-color: ",";\n    border-bottom: 1px solid ",";\n\n    & .gui-tabs {\n      margin: 6px 0 -13px;\n    }\n  }\n\n  .MuiDialogContent-root {\n    padding: 0 24px 16px;\n    word-break: break-all;\n    font-size: 0.875rem;  //14px\n  }\n\n  .MuiDialogActions-root {\n    padding: 8px 16px;\n    background-color: ",";\n    border-top: 1px solid ",";\n  }\n\n  .btnDialogClose {\n    position: absolute;\n    top: 8px;\n    right: 8px;\n  }\n\n  .MuiDialog-paper {\n    min-height: 80px;\n  }\n\n  // 헤더 컨텐츠\n  .ctrlWrap {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    position: absolute;\n    top: 12px;\n    width: calc(100% - 80px);\n\n    & .ctrl {\n      display: flex;\n      gap: 8px;\n    }\n  }\n"],["\n  .MuiDialog-container > .MuiPaper-root {\n    margin: 0;\n    max-width: unset;\n    width: 100%;\n    visibility: visible;\n    background-color: ",";\n  }\n\n  max-width: ",";\n  width: 100%;\n  height: ",";\n  top: 50%;\n  bottom: unset;\n  right: unset;\n  left: 50%;\n  transform: translateX(-50%) translateY(-50%);\n  visibility: hidden;\n\n  .MuiBackdrop-root {\n    display: none;\n  }\n\n  #draggable-dialog-title {\n    cursor: move;\n  }\n\n  & .gui-tabs {\n    .MuiGrid-root {\n      max-width: 100%;\n      flex-grow: 1;\n    }\n  }\n\n  .MuiDialogTitle-root {\n    min-height: 48px;\n    padding: 16px 24px 13px;\n    font-weight: 700;\n    line-height: 1;\n    background-color: ",";\n    border-bottom: 1px solid ",";\n\n    & .gui-tabs {\n      margin: 6px 0 -13px;\n    }\n  }\n\n  .MuiDialogContent-root {\n    padding: 0 24px 16px;\n    word-break: break-all;\n    font-size: 0.875rem;  //14px\n  }\n\n  .MuiDialogActions-root {\n    padding: 8px 16px;\n    background-color: ",";\n    border-top: 1px solid ",";\n  }\n\n  .btnDialogClose {\n    position: absolute;\n    top: 8px;\n    right: 8px;\n  }\n\n  .MuiDialog-paper {\n    min-height: 80px;\n  }\n\n  // 헤더 컨텐츠\n  .ctrlWrap {\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    position: absolute;\n    top: 12px;\n    width: calc(100% - 80px);\n\n    & .ctrl {\n      display: flex;\n      gap: 8px;\n    }\n  }\n"])),(function(n){return n.theme.palette.grey[100]}),(function(n){var t=n.size;return"tiny"===t?"444px":"small"===t?"600px":"medium"===t?"960px":"large"===t?"1280px":"number"==typeof t?"".concat(t,"px"):"string"==typeof t?"".concat(t):void 0}),(function(n){return n.height}),(function(n){return n.theme.palette.common.white}),(function(n){return n.theme.palette.grey[300]}),(function(n){return n.theme.palette.common.white}),(function(n){return n.theme.palette.grey[300]}));export{r as StyledDialog,a as StyledDraggableDialog};