@gsretail.com/gui-core/build/core/Table/GuiTable/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,e=function(e){return t(e)(o||(o=n(["\n  position: relative;\n  left: -1px;\n  width: calc(100% + 1px);\n  height: ",";\n  max-height: ",";\n  border-radius: 4px;\n\n  overflow: auto;\n  // overflow-x: auto;\n  // overflow-y: overlay;\n\n  ::-webkit-scrollbar,\n  ::-webkit-scrollbar-track {\n    background-color: transparent;\n  }\n  ::-webkit-scrollbar-thumb {\n    background-clip: content-box;\n    background-color: rgba(0,0,0,.15);\n    border: 3px solid transparent;\n  }\n  ::-webkit-scrollbar-corner {\n    border-radius: 4px;\n  }\n\n  & .MuiTable-root {\n    width: ",";\n    min-width: ",";\n\n    & .MuiTableCell-head {\n      top: \"0px\";\n\n      &::after {\n        content: '';\n        position: absolute;\n        left: 0;\n        bottom: 0;\n        display: block;\n        width: ",";\n        height: 100%;\n        background: ",";\n      }\n    }\n\n    & .MuiTableCell-root {\n      border-left: ",';\n    }\n\n    & .MuiTableBody-root {\n      & .MuiTableRow-root:last-of-type:after {\n        content: "";\n        display: block;\n        width: 100%;\n        height: 1px;\n        position: absolute;\n        left: 0;\n        bottom: 0;\n        z-index: 2;\n        background-color: ',";\n      }\n    }\n\n    & .MuiTableCell-body {\n      padding: ",';\n\n      & .MuiTableBody-root {\n        .MuiTableRow-root:last-of-type:after {\n          content: "";\n          display: none;\n        }\n      }\n    }\n  }\n\n  // 셀 내부 테이블\n  & .innerTable {\n    width: calc(100% + 12px);\n    height: calc(100% + 2px);\n    position: relative;\n    left: -6px;\n\n    & th {\n      background-color: ',";\n\n      &:hover {\n        background-color: "," !important;\n      }\n    }\n\n    .MuiTableRow-hover:hover > .MuiTableCell-body:not(.collapseCell) {\n      background-color: transparent;\n    }\n\n    & .MuiTableCell-body {\n      position: relative;\n      border: 0;\n    }\n\n    &.isBorderColumn {\n      & .MuiTableCell-body {\n        &:before {\n          content: '';\n          display: block;\n          width: 1px;\n          height: 100%;\n          position: absolute;\n          top: 0;\n          left: 0;\n          background-color: ",";\n        }\n        &:first-of-type:before {\n          display: none;\n        }\n      }\n    }\n\n    &.isBorderRow {\n      & .MuiTableRow-root:after {\n        content: '';\n        display: block;\n        width: 100%;\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        right: 0;\n        height: 1px;\n        background-color: ",";\n\n        &:last-of-type:after {\n          display: none;\n        }\n      }\n    }\n\n    // 마지막 행\n    & .MuiTableRow-root:last-of-type:after {\n      display: none !important;\n    }\n  }\n\n  & .MuiTable-root:not(",") {\n    & :not(.MuiTableFooter-root) {\n\n      // Input, Select, AutoComplete 재정의\n      & .MuiInputBase-root.MuiOutlinedInput-root,\n      & .MuiInputBase-root.MuiOutlinedInput-root:hover:not(.Gui-readonly,.Mui-disabled,.MuiInputBase-inputMultiline) {\n        background-color: transparent !important;\n\n        &.Gui-readonly .MuiInputBase-input:hover {\n          background-color: transparent;\n        }\n        & .Mui-disabled {\n          -webkit-text-fill-color: "," !important;\n        }\n        & .MuiOutlinedInput-notchedOutline {\n          border-color: "," !important;\n        }\n        & .MuiInputBase-input {\n          padding: 0 1px 0 0 !important;\n        }\n        & .MuiInputAdornment-positionStart {\n          margin: 0 3px 0 -2px;\n        }\n        & .MuiInputAdornment-positionEnd {\n          margin: 0 -2px 0 3px;\n        }\n      }\n\n      // AutoComplete 재정의\n      & .gui-autoComplete {\n        & .MuiOutlinedInput-root {\n          padding: 2px 50px 2px 0 !important;\n\n          & .MuiAutocomplete-endAdornment {\n            right: 0 !important;\n          }\n        }\n      }\n\n      // Select 재정의\n      & .gui-select {\n        & .MuiInputBase-input {\n          padding: 2px 16px 2px 0 !important;\n        }\n        & .MuiSelect-icon {\n          right: 4px !important;\n        }\n        & .MuiInputLabel-root {\n          left: -14px !important;\n        }\n      }\n\n      // DatePicker 재정의\n      & .gui-date-picker {\n        & > div {\n          border-color: transparent !important;\n        }\n\n        & .gui-date-single,\n        & .gui-date-range,\n        & .gui-date-single:hover,\n        & .gui-date-range:hover {\n          border-color: transparent !important;\n          background-color: transparent !important;\n        }\n\n        & .MuiInputBase-adornedEnd,\n        & .MuiInputBase-adornedEnd {\n          padding-right: 4px !important;\n        }\n\n        &.gui-form-disabled .gui-date-single,\n        &.gui-form-disabled .gui-date-range {\n          background-color: transparent !important;\n          border-color: transparent !important;\n        }\n      }\n    }\n  }\n"],["\n  position: relative;\n  left: -1px;\n  width: calc(100% + 1px);\n  height: ",";\n  max-height: ",";\n  border-radius: 4px;\n\n  overflow: auto;\n  // overflow-x: auto;\n  // overflow-y: overlay;\n\n  ::-webkit-scrollbar,\n  ::-webkit-scrollbar-track {\n    background-color: transparent;\n  }\n  ::-webkit-scrollbar-thumb {\n    background-clip: content-box;\n    background-color: rgba(0,0,0,.15);\n    border: 3px solid transparent;\n  }\n  ::-webkit-scrollbar-corner {\n    border-radius: 4px;\n  }\n\n  & .MuiTable-root {\n    width: ",";\n    min-width: ",";\n\n    & .MuiTableCell-head {\n      top: \"0px\";\n\n      &::after {\n        content: '';\n        position: absolute;\n        left: 0;\n        bottom: 0;\n        display: block;\n        width: ",";\n        height: 100%;\n        background: ",";\n      }\n    }\n\n    & .MuiTableCell-root {\n      border-left: ",';\n    }\n\n    & .MuiTableBody-root {\n      & .MuiTableRow-root:last-of-type:after {\n        content: "";\n        display: block;\n        width: 100%;\n        height: 1px;\n        position: absolute;\n        left: 0;\n        bottom: 0;\n        z-index: 2;\n        background-color: ',";\n      }\n    }\n\n    & .MuiTableCell-body {\n      padding: ",';\n\n      & .MuiTableBody-root {\n        .MuiTableRow-root:last-of-type:after {\n          content: "";\n          display: none;\n        }\n      }\n    }\n  }\n\n  // 셀 내부 테이블\n  & .innerTable {\n    width: calc(100% + 12px);\n    height: calc(100% + 2px);\n    position: relative;\n    left: -6px;\n\n    & th {\n      background-color: ',";\n\n      &:hover {\n        background-color: "," !important;\n      }\n    }\n\n    .MuiTableRow-hover:hover > .MuiTableCell-body:not(.collapseCell) {\n      background-color: transparent;\n    }\n\n    & .MuiTableCell-body {\n      position: relative;\n      border: 0;\n    }\n\n    &.isBorderColumn {\n      & .MuiTableCell-body {\n        &:before {\n          content: '';\n          display: block;\n          width: 1px;\n          height: 100%;\n          position: absolute;\n          top: 0;\n          left: 0;\n          background-color: ",";\n        }\n        &:first-of-type:before {\n          display: none;\n        }\n      }\n    }\n\n    &.isBorderRow {\n      & .MuiTableRow-root:after {\n        content: '';\n        display: block;\n        width: 100%;\n        position: absolute;\n        bottom: 0;\n        left: 0;\n        right: 0;\n        height: 1px;\n        background-color: ",";\n\n        &:last-of-type:after {\n          display: none;\n        }\n      }\n    }\n\n    // 마지막 행\n    & .MuiTableRow-root:last-of-type:after {\n      display: none !important;\n    }\n  }\n\n  & .MuiTable-root:not(",") {\n    & :not(.MuiTableFooter-root) {\n\n      // Input, Select, AutoComplete 재정의\n      & .MuiInputBase-root.MuiOutlinedInput-root,\n      & .MuiInputBase-root.MuiOutlinedInput-root:hover:not(.Gui-readonly,.Mui-disabled,.MuiInputBase-inputMultiline) {\n        background-color: transparent !important;\n\n        &.Gui-readonly .MuiInputBase-input:hover {\n          background-color: transparent;\n        }\n        & .Mui-disabled {\n          -webkit-text-fill-color: "," !important;\n        }\n        & .MuiOutlinedInput-notchedOutline {\n          border-color: "," !important;\n        }\n        & .MuiInputBase-input {\n          padding: 0 1px 0 0 !important;\n        }\n        & .MuiInputAdornment-positionStart {\n          margin: 0 3px 0 -2px;\n        }\n        & .MuiInputAdornment-positionEnd {\n          margin: 0 -2px 0 3px;\n        }\n      }\n\n      // AutoComplete 재정의\n      & .gui-autoComplete {\n        & .MuiOutlinedInput-root {\n          padding: 2px 50px 2px 0 !important;\n\n          & .MuiAutocomplete-endAdornment {\n            right: 0 !important;\n          }\n        }\n      }\n\n      // Select 재정의\n      & .gui-select {\n        & .MuiInputBase-input {\n          padding: 2px 16px 2px 0 !important;\n        }\n        & .MuiSelect-icon {\n          right: 4px !important;\n        }\n        & .MuiInputLabel-root {\n          left: -14px !important;\n        }\n      }\n\n      // DatePicker 재정의\n      & .gui-date-picker {\n        & > div {\n          border-color: transparent !important;\n        }\n\n        & .gui-date-single,\n        & .gui-date-range,\n        & .gui-date-single:hover,\n        & .gui-date-range:hover {\n          border-color: transparent !important;\n          background-color: transparent !important;\n        }\n\n        & .MuiInputBase-adornedEnd,\n        & .MuiInputBase-adornedEnd {\n          padding-right: 4px !important;\n        }\n\n        &.gui-form-disabled .gui-date-single,\n        &.gui-form-disabled .gui-date-range {\n          background-color: transparent !important;\n          border-color: transparent !important;\n        }\n      }\n    }\n  }\n"])),(function(n){var t=n.maxHeight;return t?"".concat(t,"px"):"auto"}),(function(n){var t=n.maxHeight;return t?"".concat(t,"px"):"100%"}),(function(n){return n.fixedWidth?"100%":"max-content"}),(function(n){var t=n.minWidth;return t?"".concat(t,"px"):"100%"}),(function(n){return n.verticalBorder?0:"1px"}),(function(n){return n.theme.palette.grey[300]}),(function(n){var t=n.theme;return n.verticalBorder?"1px solid"+t.palette.grey[300]:0}),(function(n){return n.theme.palette.grey[300]}),(function(n){return n.elementView?"3px 6px":"1px 6px"}),(function(n){return n.theme.palette.grey[50]}),(function(n){return n.theme.palette.grey[50]}),(function(n){return n.theme.palette.grey[300]}),(function(n){return n.theme.palette.grey[300]}),(function(n){return n&&".elementView"}),(function(n){return n.theme.palette.common.black}),(function(n){return n&&"transparent"}))};export{e as default};