quantumai-design-system/dist/components/Base/Table/TableData/styles.js

퀀텀에이아이의 디자인 시스템

var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
    return cooked;
};
import styled from '@emotion/styled';
import { COLORS, TYPOGRAPHYS_STYLE } from '../../../../styles/theme';
import { units } from '../../../../utils/utilData';
import { mixinHeight, mixinMargin, mixinWidth } from '../../../../utils/styleSet';
export var formatSize = function (size, exceptionValue) {
    if (exceptionValue === void 0) { exceptionValue = 'unset'; }
    if (typeof size === 'undefined')
        return exceptionValue;
    if (typeof size === 'number')
        return "".concat(size, "px");
    return units.filter(function (unit) { return size.includes(unit); }).length > 0 ? size : "".concat(size, "px");
};
export var TableDataContainer = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  position: relative;\n  overflow: auto;\n  text-align: center;\n  scroll-behavior: smooth;\n  scroll-snap-type: y mandatory;\n  background-color: ", ";\n  border: 1px solid ", ";\n\n  &::-webkit-scrollbar-track {\n    border-top: 1px solid ", ";\n    border-left: 1px solid ", ";\n  }\n\n  table {\n    width: 100%;\n    border-collapse: separate;\n    border-spacing: 0;\n\n    thead {\n      position: relative;\n\n      tr {\n        height: 40px;\n      }\n\n      th {\n        position: sticky;\n        top: 0;\n        z-index: 10;\n        color: ", ";\n        background-color: ", ";\n        border-bottom: 1px solid ", ";\n\n        &:not(:last-of-type)::after {\n          content: '';\n          height: 50%;\n          width: 2px;\n          position: absolute;\n          right: 0;\n          top: 50%;\n          transform: translateY(-50%);\n          background-color: ", ";\n        }\n\n        &:first-of-type {\n          width: ", ";\n        }\n\n        .multi-cell {\n          display: flex;\n          border-top: 1px solid ", ";\n\n          & > .cell {\n            position: relative;\n\n            &:not(:last-of-type)::after {\n              content: '';\n              height: 50%;\n              width: 2px;\n              position: absolute;\n              right: 0;\n              top: 50%;\n              transform: translateY(-50%);\n              background-color: ", ";\n            }\n          }\n        }\n\n        .cell {\n          flex: 1;\n          padding: 0.5rem;\n          overflow: hidden;\n          text-overflow: ellipsis;\n          white-space: nowrap;\n\n          &.selected-cell {\n            display: flex;\n            justify-content: center;\n            align-items: center;\n          }\n        }\n\n        ", "\n      }\n    }\n\n    tbody {\n      th {\n        position: sticky;\n        left: 0;\n        z-index: 9;\n        color: ", ";\n        background-color: ", ";\n        border-right: 2px solid ", ";\n        border-bottom: 1px solid ", ";\n      }\n\n      tr {\n        height: 40px;\n        scroll-snap-align: end;\n\n        :hover {\n          background-color: ", ";\n        }\n\n        &[data-disabled='true'] {\n          cursor: not-allowed;\n          user-select: none;\n          td {\n            color: ", ";\n          }\n        }\n\n        &[data-selected='true'] {\n          background-color: ", ";\n        }\n\n        td {\n          border-bottom: 1px solid ", ";\n          color: ", ";\n          height: 0;\n\n          &:not(:last-of-type) {\n            border-right: 2px solid ", ";\n          }\n\n          .multi-cell {\n            display: flex;\n            height: 100%;\n\n            & > .cell:not(:last-of-type) {\n              border-right: 2px solid ", ";\n            }\n          }\n\n          .cell {\n            flex: 1;\n            padding: 0.5rem;\n            height: 100%;\n            overflow: hidden;\n            text-overflow: ellipsis;\n            white-space: nowrap;\n            background-clip: padding-box;\n\n            &.selected-cell {\n              display: flex;\n              justify-content: center;\n              align-items: center;\n            }\n          }\n\n          ", "\n        }\n      }\n    }\n  }\n\n  ", ";\n  ", ";\n  ", ";\n"], ["\n  width: 100%;\n  position: relative;\n  overflow: auto;\n  text-align: center;\n  scroll-behavior: smooth;\n  scroll-snap-type: y mandatory;\n  background-color: ", ";\n  border: 1px solid ", ";\n\n  &::-webkit-scrollbar-track {\n    border-top: 1px solid ", ";\n    border-left: 1px solid ", ";\n  }\n\n  table {\n    width: 100%;\n    border-collapse: separate;\n    border-spacing: 0;\n\n    thead {\n      position: relative;\n\n      tr {\n        height: 40px;\n      }\n\n      th {\n        position: sticky;\n        top: 0;\n        z-index: 10;\n        color: ", ";\n        background-color: ", ";\n        border-bottom: 1px solid ", ";\n\n        &:not(:last-of-type)::after {\n          content: '';\n          height: 50%;\n          width: 2px;\n          position: absolute;\n          right: 0;\n          top: 50%;\n          transform: translateY(-50%);\n          background-color: ", ";\n        }\n\n        &:first-of-type {\n          width: ", ";\n        }\n\n        .multi-cell {\n          display: flex;\n          border-top: 1px solid ", ";\n\n          & > .cell {\n            position: relative;\n\n            &:not(:last-of-type)::after {\n              content: '';\n              height: 50%;\n              width: 2px;\n              position: absolute;\n              right: 0;\n              top: 50%;\n              transform: translateY(-50%);\n              background-color: ", ";\n            }\n          }\n        }\n\n        .cell {\n          flex: 1;\n          padding: 0.5rem;\n          overflow: hidden;\n          text-overflow: ellipsis;\n          white-space: nowrap;\n\n          &.selected-cell {\n            display: flex;\n            justify-content: center;\n            align-items: center;\n          }\n        }\n\n        ", "\n      }\n    }\n\n    tbody {\n      th {\n        position: sticky;\n        left: 0;\n        z-index: 9;\n        color: ", ";\n        background-color: ", ";\n        border-right: 2px solid ", ";\n        border-bottom: 1px solid ", ";\n      }\n\n      tr {\n        height: 40px;\n        scroll-snap-align: end;\n\n        :hover {\n          background-color: ", ";\n        }\n\n        &[data-disabled='true'] {\n          cursor: not-allowed;\n          user-select: none;\n          td {\n            color: ", ";\n          }\n        }\n\n        &[data-selected='true'] {\n          background-color: ", ";\n        }\n\n        td {\n          border-bottom: 1px solid ", ";\n          color: ", ";\n          height: 0;\n\n          &:not(:last-of-type) {\n            border-right: 2px solid ", ";\n          }\n\n          .multi-cell {\n            display: flex;\n            height: 100%;\n\n            & > .cell:not(:last-of-type) {\n              border-right: 2px solid ", ";\n            }\n          }\n\n          .cell {\n            flex: 1;\n            padding: 0.5rem;\n            height: 100%;\n            overflow: hidden;\n            text-overflow: ellipsis;\n            white-space: nowrap;\n            background-clip: padding-box;\n\n            &.selected-cell {\n              display: flex;\n              justify-content: center;\n              align-items: center;\n            }\n          }\n\n          ", "\n        }\n      }\n    }\n  }\n\n  ", ";\n  ", ";\n  ", ";\n"])), COLORS.white, COLORS.grey6, COLORS.grey4, COLORS.grey4, COLORS.coolgrey5, COLORS.coolgrey1, COLORS.grey4, COLORS.grey4, function (_a) {
    var selected = _a.selected;
    return (selected ? "60px" : 'auto');
}, COLORS.grey4, COLORS.grey4, TYPOGRAPHYS_STYLE['subTitle2'], COLORS.coolgrey5, COLORS.coolgrey1, COLORS.grey4, COLORS.grey4, COLORS.blue1, COLORS.grey5, COLORS.coolgrey2, COLORS.grey4, COLORS.black, COLORS.grey4, COLORS.grey4, TYPOGRAPHYS_STYLE['body3'], function (props) { return mixinWidth(props); }, function (props) { return mixinHeight(props); }, function (props) { return mixinMargin(props); });
var templateObject_1;