@gsretail.com/gui-core/build/core/Table/GuiTableCell/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 e from"@emotion/styled";import"@mui/material/styles";import t from"../../../assets/theme/basicStyle.js";var o,l=function(l){return e(l)(o||(o=n(["\n  height: 28px;\n  background-color : ",";\n  font-size: ","px;\n  font-weight: ",";\n  line-height: 1.2;\n  border-bottom: 0;\n  border-top: 1px solid ",";\n\n  &.MuiTableCell-head {\n    line-height: 1;\n    text-align: center;\n    height: 28px;\n    padding: 1px 6px;\n    border-top: 0;\n    background-color: ",";\n    resize: ",";\n  }\n\n  &.MuiTableCell-body {\n\t\tfont-family: 'Pretendard' !important;\n    letter-spacing: 0;\n\n    & input {\n      letter-spacing: initial;\n    }\n  }\n\n  &.MuiTableCell-footer {\n    height: 28px;\n    padding: 3px 6px;\n  }\n\n  &.stickyColumn {\n    position: sticky !important;\n    left: 0;\n    border-right: 1px solid ",";\n\n    &.MuiTableCell-head {\n      z-index: 3;\n    }\n\n    &.MuiTableCell-body {\n      z-index: 2;\n      background-color: ",";\n    }\n\n    & + .MuiTableCell-root {\n      border-left: 0 !important;\n    }\n  }\n\n  &.collapseBtn {\n    width: 70px;\n    text-align: center;\n\n    & .MuiIconButton-root {\n      padding: 0;\n      font-size: 24px;\n      color: ",";\n    }\n  }\n  &.collapseCell {\n    height: auto;\n    padding: 0 !important;\n    border: 0;\n\n    & .MuiTable-root {\n      margin: 0;\n    }\n  }\n\n  & .dragIcon {\n    display: flex;\n    justify-content: center;\n    position: relative;\n    top: -1px;\n\n    & > svg {\n      font-size: 20px;\n      width: 20px;\n      color: ",";\n    }\n  }\n\n  // Cell Color\n  &.editedCell {\n    background-color: ",";\n  }\n\n  &.warningCell {\n    background-color: ",";\n  }\n\n  &.whiteCell {\n    background-color: ",";\n    &.selectedRow {\n      background-color: ",";\n    }\n  }\n\n  &.currentCell {\n    font-weight: 700;\n    background-color: ",";\n  }\n\n  &.disabledCell {\n    color: inherit;\n    -webkit-text-fill-color: unset;\n    background-color: "," !important;\n\n    & svg {\n      opacity: 1;\n      color: "," !important;\n    }\n  }\n\n  background-color: ","; !important;\n\n  // Cell Alignment\n  &.MuiTableCell-alignInherit {\n    text-align: inherit !important;\n  }\n\n  &.MuiTableCell-alignLeft {\n    text-align: left !important;\n  }\n\n  &.MuiTableCell-alignCenter {\n    text-align: center !important;\n  }\n\n  &.MuiTableCell-alignRight {\n    text-align: right !important;\n  }\n\n  &.MuiTableCell-alignJustify {\n    text-align: justify !important;\n  }\n\n  & .required {\n    line-height: 1.2;\n    display: inline-block;\n    padding-left: 1px;\n    color: ",";\n  }\n"],["\n  height: 28px;\n  background-color : ",";\n  font-size: ","px;\n  font-weight: ",";\n  line-height: 1.2;\n  border-bottom: 0;\n  border-top: 1px solid ",";\n\n  &.MuiTableCell-head {\n    line-height: 1;\n    text-align: center;\n    height: 28px;\n    padding: 1px 6px;\n    border-top: 0;\n    background-color: ",";\n    resize: ",";\n  }\n\n  &.MuiTableCell-body {\n\t\tfont-family: 'Pretendard' !important;\n    letter-spacing: 0;\n\n    & input {\n      letter-spacing: initial;\n    }\n  }\n\n  &.MuiTableCell-footer {\n    height: 28px;\n    padding: 3px 6px;\n  }\n\n  &.stickyColumn {\n    position: sticky !important;\n    left: 0;\n    border-right: 1px solid ",";\n\n    &.MuiTableCell-head {\n      z-index: 3;\n    }\n\n    &.MuiTableCell-body {\n      z-index: 2;\n      background-color: ",";\n    }\n\n    & + .MuiTableCell-root {\n      border-left: 0 !important;\n    }\n  }\n\n  &.collapseBtn {\n    width: 70px;\n    text-align: center;\n\n    & .MuiIconButton-root {\n      padding: 0;\n      font-size: 24px;\n      color: ",";\n    }\n  }\n  &.collapseCell {\n    height: auto;\n    padding: 0 !important;\n    border: 0;\n\n    & .MuiTable-root {\n      margin: 0;\n    }\n  }\n\n  & .dragIcon {\n    display: flex;\n    justify-content: center;\n    position: relative;\n    top: -1px;\n\n    & > svg {\n      font-size: 20px;\n      width: 20px;\n      color: ",";\n    }\n  }\n\n  // Cell Color\n  &.editedCell {\n    background-color: ",";\n  }\n\n  &.warningCell {\n    background-color: ",";\n  }\n\n  &.whiteCell {\n    background-color: ",";\n    &.selectedRow {\n      background-color: ",";\n    }\n  }\n\n  &.currentCell {\n    font-weight: 700;\n    background-color: ",";\n  }\n\n  &.disabledCell {\n    color: inherit;\n    -webkit-text-fill-color: unset;\n    background-color: "," !important;\n\n    & svg {\n      opacity: 1;\n      color: "," !important;\n    }\n  }\n\n  background-color: ","; !important;\n\n  // Cell Alignment\n  &.MuiTableCell-alignInherit {\n    text-align: inherit !important;\n  }\n\n  &.MuiTableCell-alignLeft {\n    text-align: left !important;\n  }\n\n  &.MuiTableCell-alignCenter {\n    text-align: center !important;\n  }\n\n  &.MuiTableCell-alignRight {\n    text-align: right !important;\n  }\n\n  &.MuiTableCell-alignJustify {\n    text-align: justify !important;\n  }\n\n  & .required {\n    line-height: 1.2;\n    display: inline-block;\n    padding-left: 1px;\n    color: ",";\n  }\n"])),(function(n){var e=n.background;return e?t.color[e]:"transparent"}),t.typography.table.tableBody,(function(n){return n.theme.typography.fontWeightMedium}),(function(n){return n.theme.palette.grey[300]}),(function(n){var e=n.background;return e?t.color[e]:t.color.grey50}),(function(n){return n.resizeNone&&"none"}),(function(n){return n.theme.palette.grey[300]}),(function(n){return n.theme.palette.common.white}),(function(n){return n.theme.palette.grey[600]}),(function(n){return n.theme.palette.grey[600]}),t.color.$editedCell,t.color.$warningCell,t.color.$whiteCell,t.color.$selectedRow,t.color.$currentCell,t.color.$disabledRow,(function(n){return n.theme.palette.grey[600]}),(function(n){return n.disabled&&t.color.$disabledRow}),(function(n){return n.theme.palette.red.main}))};export{l as default};