@gsretail.com/gui-core/build/core/Section/PageContent/PageContent.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";var o,r=function(r){return t(r)(o||(o=n(["\n\n  overflow: ",";\n\n  position: relative;\n  border: 0;\n  word-break: break-all;\n  min-height: ",";\n\n  box-shadow: ",";\n\n  padding: ",";\n  margin: ",";\n\n  margin-left: 0;\n  margin-right: 0;\n\n  &.MuiPaper-rounded {\n    border-radius: 4px;\n  }\n\n  margin-bottom: ",";\n  margin-left: ",";\n  margin-right: ",";\n\n  // with Tabs\n  & > .gui-tabs {\n    padding: 8px 16px;\n  }\n\n  // inner PageContent\n  & > .MuiPaper-root {\n    padding: 0;\n    margin-left: 16px;\n    margin-right: 16px;\n  }\n\n  // 토글 버튼\n  .toggleButtonWrap {\n    position: absolute;\n    bottom: 0;\n    width: 100%;\n    height: 10px;\n    display: flex;\n    justify-content: center;\n    border-top: 1px solid #e6eaf4;\n    z-index: 1;\n\n    & .MuiBox-root {\n      position: absolute;\n      bottom: -10px;\n      background-color: #fff;\n      border-radius: 8px;\n\n      & .MuiButton-root {\n        display: flex;\n        min-width: 64px;\n        min-height: unset;\n        height: 15px;\n        border-radius: 8px;\n        border: 1px solid #e6eaf4 !important;\n        color: #858da3;\n        box-shadow: 0 1px 4px 0 rgb(0 0 0 / 8%);\n\n        &:hover {\n          background-color: rgba(0, 98, 255, 0.04) !important;\n        }\n\n        & > span {\n          padding: 0 4px 0 0;\n          font-size: 10px;\n        }\n\n        & > svg {\n          transform: rotate(180deg);\n          font-size: 13px;\n        }\n\n        &.open > svg {\n          transform: rotate(0deg);\n        }\n      }\n    }\n  }\n\n  // PageContent 내 Pagination\n  & .MuiPagination-root {\n    border-top: 1px solid ",";\n    & .MuiPagination-ul {\n      justify-content: center;\n    }\n  }\n\n  & .page-content-header {\n    background-color: ",";\n  }\n\n  ::-webkit-scrollbar-track {\n    background: transparent;\n  }\n"],["\n\n  overflow: ",";\n\n  position: relative;\n  border: 0;\n  word-break: break-all;\n  min-height: ",";\n\n  box-shadow: ",";\n\n  padding: ",";\n  margin: ",";\n\n  margin-left: 0;\n  margin-right: 0;\n\n  &.MuiPaper-rounded {\n    border-radius: 4px;\n  }\n\n  margin-bottom: ",";\n  margin-left: ",";\n  margin-right: ",";\n\n  // with Tabs\n  & > .gui-tabs {\n    padding: 8px 16px;\n  }\n\n  // inner PageContent\n  & > .MuiPaper-root {\n    padding: 0;\n    margin-left: 16px;\n    margin-right: 16px;\n  }\n\n  // 토글 버튼\n  .toggleButtonWrap {\n    position: absolute;\n    bottom: 0;\n    width: 100%;\n    height: 10px;\n    display: flex;\n    justify-content: center;\n    border-top: 1px solid #e6eaf4;\n    z-index: 1;\n\n    & .MuiBox-root {\n      position: absolute;\n      bottom: -10px;\n      background-color: #fff;\n      border-radius: 8px;\n\n      & .MuiButton-root {\n        display: flex;\n        min-width: 64px;\n        min-height: unset;\n        height: 15px;\n        border-radius: 8px;\n        border: 1px solid #e6eaf4 !important;\n        color: #858da3;\n        box-shadow: 0 1px 4px 0 rgb(0 0 0 / 8%);\n\n        &:hover {\n          background-color: rgba(0, 98, 255, 0.04) !important;\n        }\n\n        & > span {\n          padding: 0 4px 0 0;\n          font-size: 10px;\n        }\n\n        & > svg {\n          transform: rotate(180deg);\n          font-size: 13px;\n        }\n\n        &.open > svg {\n          transform: rotate(0deg);\n        }\n      }\n    }\n  }\n\n  // PageContent 내 Pagination\n  & .MuiPagination-root {\n    border-top: 1px solid ",";\n    & .MuiPagination-ul {\n      justify-content: center;\n    }\n  }\n\n  & .page-content-header {\n    background-color: ",";\n  }\n\n  ::-webkit-scrollbar-track {\n    background: transparent;\n  }\n"])),(function(n){n.toggleButton;return"unset"}),(function(n){var t=n.minHeight;return t&&"".concat(t,"px")}),(function(n){return n.theme.shadows[2]}),(function(n){var t=n.padding,o=n.toggleButton;return"compact"===t?o?"0 0 10px 0":0:o?"0 16px 26px 16px":"0 16px 16px 16px"}),(function(n){var t=n.margin,o=n.marginZero;return t?"16px":o?0:"16px"}),(function(n){return n.marginBottomZero&&0}),(function(n){return n.horizontalMargin&&"16px"}),(function(n){return n.horizontalMargin&&"16px"}),(function(n){return n.theme.palette.grey[300]}),(function(n){return n.theme.palette.common.white}))};export{r as default};