fastlion-amis/lib/renderers/Lion/Table/LionTable/style/common.js

一种MIS页面生成工具

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.WrapperCommonSurfaceGroup = exports.WrapperCommonTbody = exports.WrapperCommonThead = void 0;
var tslib_1 = require("tslib");
var styled_components_1 = (0, tslib_1.__importDefault)(require("styled-components"));
var WrapperCommonTable = styled_components_1.default.table(templateObject_1 || (templateObject_1 = (0, tslib_1.__makeTemplateObject)(["\n\n    tr{\n        .checkbox{\n            background-image: linear-gradient(#e8eaec,#e8eaec);\n            background-repeat: no-repeat;\n            background-size: 100% 1px;\n            background-position: 100% 100%;\n        }\n\n        th.thead-th--column{\n            white-space: pre-line;\n            word-break: break-all;\n            padding-left: 5px;\n            padding-right: 5px;\n        }\n\n        th.fix--hidden{\n            visibility: hidden;\n        }\n\n        td.fix--hidden{\n            visibility: hidden;\n        }\n\n        .lion-td-btn{\n            /* margin-right:5px;\n            border-color:transparent;\n            color:#3582fb;\n            background:transparent;\n            font-size:12px;\n            cursor: pointer;;\n            padding:9px 15px;\n            padding-left:0px;\n            padding-right:0px; */\n            width: 92px;\n            overflow: hidden;\n            text-overflow: ellipsis;\n            white-space: nowrap;\n        }\n\n        // \u6298\u53E0\u6309\u94AE\u6837\u5F0F\n        .lion-table-cell-btn{\n            .ant-popover-inner-content{\n                display: flex;\n                flex-direction: column;\n                border-radius: 4px;\n                padding: 6px 8px;\n                &>button{\n                    :hover{\n                        background: #ebf3ff !important;\n                        color:#5b9bfc !important;\n                    }\n                }\n            }\n        }\n    }\n\n    .lion-cell--fix--left{\n        position: sticky;\n        left: 0;\n        z-index: 2;\n    }\n\n    .lion-cell--fix--right{\n        position: sticky;\n        right: 0;\n        z-index: 2;\n        .lion-cell--fix--right--cell{\n          display: inline-block;\n          overflow: hidden;\n          padding-left: 5px;\n          padding-right: 5px;\n          font-size: 12px;\n        }\n    }\n\n    .fix-left-shadow{\n        box-shadow: 4px 3px 4px 0 rgb(0 0 0 / 12%);\n    }\n\n    .fix-right-shadow{\n        box-shadow:-4px 3px 4px 0 rgb(0 0 0 / 12%);\n    }\n"], ["\n\n    tr{\n        .checkbox{\n            background-image: linear-gradient(#e8eaec,#e8eaec);\n            background-repeat: no-repeat;\n            background-size: 100% 1px;\n            background-position: 100% 100%;\n        }\n\n        th.thead-th--column{\n            white-space: pre-line;\n            word-break: break-all;\n            padding-left: 5px;\n            padding-right: 5px;\n        }\n\n        th.fix--hidden{\n            visibility: hidden;\n        }\n\n        td.fix--hidden{\n            visibility: hidden;\n        }\n\n        .lion-td-btn{\n            /* margin-right:5px;\n            border-color:transparent;\n            color:#3582fb;\n            background:transparent;\n            font-size:12px;\n            cursor: pointer;;\n            padding:9px 15px;\n            padding-left:0px;\n            padding-right:0px; */\n            width: 92px;\n            overflow: hidden;\n            text-overflow: ellipsis;\n            white-space: nowrap;\n        }\n\n        // \u6298\u53E0\u6309\u94AE\u6837\u5F0F\n        .lion-table-cell-btn{\n            .ant-popover-inner-content{\n                display: flex;\n                flex-direction: column;\n                border-radius: 4px;\n                padding: 6px 8px;\n                &>button{\n                    :hover{\n                        background: #ebf3ff !important;\n                        color:#5b9bfc !important;\n                    }\n                }\n            }\n        }\n    }\n\n    .lion-cell--fix--left{\n        position: sticky;\n        left: 0;\n        z-index: 2;\n    }\n\n    .lion-cell--fix--right{\n        position: sticky;\n        right: 0;\n        z-index: 2;\n        .lion-cell--fix--right--cell{\n          display: inline-block;\n          overflow: hidden;\n          padding-left: 5px;\n          padding-right: 5px;\n          font-size: 12px;\n        }\n    }\n\n    .fix-left-shadow{\n        box-shadow: 4px 3px 4px 0 rgb(0 0 0 / 12%);\n    }\n\n    .fix-right-shadow{\n        box-shadow:-4px 3px 4px 0 rgb(0 0 0 / 12%);\n    }\n"])));
var WrapperCommonThead = (0, styled_components_1.default)(WrapperCommonTable)(templateObject_2 || (templateObject_2 = (0, tslib_1.__makeTemplateObject)(["\n\tborder-collapse: separate;\n    border-spacing: 0;\n    table-layout: fixed;\n    border:0;\n    color: #606266;\n    font-weight: 600;\n    thead.lion-table-header-thead{\n    \ttr{\n    \t\theight:40px;\n        background-color:#fff !important;\n\n        th.thead-th--column{\n        /* \u5DE6\u4FA7\u56FA\u5B9A\u8868\u683C\u8868\u5934th\u6837\u5F0F */\n\n          font-size: 12px;\n          box-sizing: border-box;\n          color: rgba(0, 0, 0, .85);\n          padding: 3px 0!important;\n          text-align: left;\n          background-image: linear-gradient(#e8eaec,#e8eaec);\n          background-repeat: no-repeat;\n          background-size: 100% 1px;\n          background-position: 100% 100%;\n          background-color:inherit;\n\n          .thead-th--cell{\n            /* \u5DE6\u4FA7\u56FA\u5B9A\u8868\u683C\u8868\u5934\u5355\u5143\u683C\u6837\u5F0F */\n\n            box-sizing: border-box;\n            display: block;\n            white-space: nowrap;/*\u63A7\u5236\u5355\u884C\u663E\u793A*/\n            overflow: hidden;/*\u8D85\u51FA\u9690\u85CF*/\n            text-overflow: ellipsis;/*\u9690\u85CF\u7684\u5B57\u7B26\u7528\u7701\u7565\u53F7\u8868\u793A*/\n            word-break: break-all;\n            padding-left: 5px;\n            padding-right: 5px;\n          }\n\n          /* &:first-child {\n            overflow:unset !important;\n          } */\n\n          &:last-child {\n              border-right: 0;\n          }\n        }\n\n          /* th.lion-cell--fix--right{\n            :last-child{\n              ::after{\n                content:\"\";\n                width: 7px;\n                height: 100%;\n                position:absolute;\n                right:0;\n              }\n            }\n          } */\n    \t}\n    }\n"], ["\n\tborder-collapse: separate;\n    border-spacing: 0;\n    table-layout: fixed;\n    border:0;\n    color: #606266;\n    font-weight: 600;\n    thead.lion-table-header-thead{\n    \ttr{\n    \t\theight:40px;\n        background-color:#fff !important;\n\n        th.thead-th--column{\n        /* \u5DE6\u4FA7\u56FA\u5B9A\u8868\u683C\u8868\u5934th\u6837\u5F0F */\n\n          font-size: 12px;\n          box-sizing: border-box;\n          color: rgba(0, 0, 0, .85);\n          padding: 3px 0!important;\n          text-align: left;\n          background-image: linear-gradient(#e8eaec,#e8eaec);\n          background-repeat: no-repeat;\n          background-size: 100% 1px;\n          background-position: 100% 100%;\n          background-color:inherit;\n\n          .thead-th--cell{\n            /* \u5DE6\u4FA7\u56FA\u5B9A\u8868\u683C\u8868\u5934\u5355\u5143\u683C\u6837\u5F0F */\n\n            box-sizing: border-box;\n            display: block;\n            white-space: nowrap;/*\u63A7\u5236\u5355\u884C\u663E\u793A*/\n            overflow: hidden;/*\u8D85\u51FA\u9690\u85CF*/\n            text-overflow: ellipsis;/*\u9690\u85CF\u7684\u5B57\u7B26\u7528\u7701\u7565\u53F7\u8868\u793A*/\n            word-break: break-all;\n            padding-left: 5px;\n            padding-right: 5px;\n          }\n\n          /* &:first-child {\n            overflow:unset !important;\n          } */\n\n          &:last-child {\n              border-right: 0;\n          }\n        }\n\n          /* th.lion-cell--fix--right{\n            :last-child{\n              ::after{\n                content:\"\";\n                width: 7px;\n                height: 100%;\n                position:absolute;\n                right:0;\n              }\n            }\n          } */\n    \t}\n    }\n"])));
exports.WrapperCommonThead = WrapperCommonThead;
var WrapperCommonTbody = (0, styled_components_1.default)(WrapperCommonTable)(templateObject_3 || (templateObject_3 = (0, tslib_1.__makeTemplateObject)(["\n\tborder-collapse: separate;\n    border-spacing: 0;\n    table-layout: fixed;\n    border:0;\n\n    tbody.lion-table-body-tbody {\n\n        tr.lion-tr--column--hide{\n\n            font-size: 12px;\n            background-color:rgb(238, 241, 246);\n            td.tbody-td--column--hide{\n\n                padding: 3px 0 !important;\n                background-color: #eef1f6;\n                text-align: left;\n                white-space: nowrap;/*\u63A7\u5236\u5355\u884C\u663E\u793A*/\n                overflow: hidden;/*\u8D85\u51FA\u9690\u85CF*/\n                text-overflow: ellipsis;/*\u9690\u85CF\u7684\u5B57\u7B26\u7528\u7701\u7565\u53F7\u8868\u793A*/\n                background-image: linear-gradient(#e8eaec,#e8eaec);\n                background-repeat: no-repeat;\n                background-size: 100% 1px;\n                background-position: 100% 100%;\n                border-bottom: 1px solid #e5e8f1;\n\n                .td--column--hide--cell{\n                  line-height:16px;\n                  .td--column--hide--cell--container{\n                    text-align:center;\n                    padding:4px 0px;\n                    .hide--cell--operation{\n                      vertical-align: unset;\n                      font-size: 12px;\n                      color: #3582fb;\n                      display: inline-flex;\n                      flex-direction: row;\n                      align-items: center;\n                      justify-content: center;\n                      position: relative;\n                      text-decoration: none;\n                      outline: none;\n                      cursor: pointer;\n                      padding: 0;\n                      font-weight: 500;\n                    }\n                    .hide--cell--action{\n                      background: none;\n                      border:none;\n                      &:hover{\n                        background: none;\n                        border:none;\n                      }\n                    }\n                  }\n                }\n\n                // st-table-row-white\n                // f5f7fa\n\n                &:last-child {\n                    border-right: 0;\n                }\n\n                .tbody-td--column--cell{\n                    box-sizing: border-box;\n                    display: block;\n                    white-space: nowrap;/*\u63A7\u5236\u5355\u884C\u663E\u793A*/\n                    overflow: hidden;/*\u8D85\u51FA\u9690\u85CF*/\n                    text-overflow: ellipsis;/*\u9690\u85CF\u7684\u5B57\u7B26\u7528\u7701\u7565\u53F7\u8868\u793A*/\n                    word-break: break-all;\n                    padding-left: 10px;\n                    padding-right: 10px;\n                }\n\n                span{\n                    &:hover{\n                        color: #5d9bfc !important;\n                    }\n                }\n\n            }\n        }\n\n        .tbody-tr--column--gray{\n            background-color: #f6f6f6 !important;\n        }\n\n        .tbody-tr--column--white{\n            /* background-color: #fff !important; */\n\n\t        /* &:hover td{\n\t            background: #f5f7fa !important;\n\t        } */\n        }\n\n        tr.tr--hover{\n            background-color: #f5f7fa !important;\n        }\n\n        tr.tbody-tr--column--common {\n\n            td.tbody-td--column--surface--checkbox{\n              text-align:center !important;\n              width:50px;\n              line-height:1;\n              left:0;\n              background-color:#f6f6f6;\n            }\n\n            td.tbody-td--column--surface--mainarea{\n              height: 50px;\n              line-height: 1;\n              background-color: inherit;\n            }\n\n            td.tbody-td--column  {\n                font-size: 13px;\n                // height: 45px!important;\n                box-sizing: border-box;\n                // border-right: 1px solid #f0f0f0;\n                color: #333;\n                padding: 3px 0!important;\n                text-align: left;\n                white-space: nowrap;/*\u63A7\u5236\u5355\u884C\u663E\u793A*/\n                overflow: hidden;/*\u8D85\u51FA\u9690\u85CF*/\n                text-overflow: ellipsis;/*\u9690\u85CF\u7684\u5B57\u7B26\u7528\u7701\u7565\u53F7\u8868\u793A*/\n                background-image: linear-gradient(#e8eaec,#e8eaec);\n                background-repeat: no-repeat;\n                background-size: 100% 1px;\n                background-position: 100% 100%;\n\n                &:last-child {\n                    border-right: 0;\n                }\n\n                .tbody-td--column--surface--hide{\n                  display: inline-block;\n                  overflow: hidden;\n                  padding-left: 5px;\n                  padding-right: 5px;\n                  font-size: 12px;\n                  height: 100%;\n                }\n\n                .tbody-td--column--cell{\n                    box-sizing: border-box;\n                    display: block;\n                    white-space: nowrap;/*\u63A7\u5236\u5355\u884C\u663E\u793A*/\n                    overflow: hidden;/*\u8D85\u51FA\u9690\u85CF*/\n                    text-overflow: ellipsis;/*\u9690\u85CF\u7684\u5B57\u7B26\u7528\u7701\u7565\u53F7\u8868\u793A*/\n                    word-break: break-all;\n                    padding-left: 5px;\n                    padding-right: 5px;\n                    .subordinate--item{\n                      width:20px;\n                      display:inline-block;\n                    }\n                    .tbody-td--column--cell--container{\n                      display: flex;\n                    }\n                }\n\n                .cell-action{\n                    margin-right: 5px;\n                    border-color: transparent;\n                    color: #3582fb;\n                    background: transparent;\n                    font-size: 12px;\n                    cursor: pointer;\n                    padding: 9px 15px;\n                    padding-left: 0;\n                    padding-right: 0\n                }\n\n                .cell-action-btn{\n                    margin-right: 5px;\n                    border-color: transparent;\n                    color: #3582fb;\n                    background: transparent;\n                    font-size: 12px;\n                    cursor: pointer;\n                    padding: 0px;\n                    padding-left: 0;\n                    padding-right: 0;\n                    height: 20px;\n                    line-height: 1.5;\n                }\n            }\n\n            td.tbody-td--column--hide--checkbox{\n                left: 0;\n                text-align: center;\n                width:50px;\n                background: #eef1f6;\n                height:45px;\n                padding: 0px !important;\n            }\n\n            .tbody-td--cell--container{\n                font-size: 12px;\n                .lion-td--cell--container--label{\n                    color:#999;\n                }\n            }\n\n            td.tbody-td--opreation{\n              /* height:50px; */\n              background-color: inherit;\n              line-height:1;\n              .tbody-td--opreation--list{\n                display:flex;\n                align-items:center;\n                justify-content:space-evenly;\n                .antd-Button{\n                  margin-right:5px;\n                }\n                .lion-cell-btn--ellipsis{\n                  display: inline-block;\n                  cursor: pointer;\n                  padding: 0;\n                  height: auto;\n                  letter-spacing: 2px;\n                  font-weight: 800;\n                  transform: rotate(90deg);\n                  color: #3574ee;\n                  border: 0\n                }\n              }\n            }\n\n            &:last-child {\n                td.tbody-td--cell--container--label  {\n                    border-bottom: 0;\n                }\n            }\n            .checkbox{\n                text-align: center !important;\n            }\n        }\n    }\n"], ["\n\tborder-collapse: separate;\n    border-spacing: 0;\n    table-layout: fixed;\n    border:0;\n\n    tbody.lion-table-body-tbody {\n\n        tr.lion-tr--column--hide{\n\n            font-size: 12px;\n            background-color:rgb(238, 241, 246);\n            td.tbody-td--column--hide{\n\n                padding: 3px 0 !important;\n                background-color: #eef1f6;\n                text-align: left;\n                white-space: nowrap;/*\u63A7\u5236\u5355\u884C\u663E\u793A*/\n                overflow: hidden;/*\u8D85\u51FA\u9690\u85CF*/\n                text-overflow: ellipsis;/*\u9690\u85CF\u7684\u5B57\u7B26\u7528\u7701\u7565\u53F7\u8868\u793A*/\n                background-image: linear-gradient(#e8eaec,#e8eaec);\n                background-repeat: no-repeat;\n                background-size: 100% 1px;\n                background-position: 100% 100%;\n                border-bottom: 1px solid #e5e8f1;\n\n                .td--column--hide--cell{\n                  line-height:16px;\n                  .td--column--hide--cell--container{\n                    text-align:center;\n                    padding:4px 0px;\n                    .hide--cell--operation{\n                      vertical-align: unset;\n                      font-size: 12px;\n                      color: #3582fb;\n                      display: inline-flex;\n                      flex-direction: row;\n                      align-items: center;\n                      justify-content: center;\n                      position: relative;\n                      text-decoration: none;\n                      outline: none;\n                      cursor: pointer;\n                      padding: 0;\n                      font-weight: 500;\n                    }\n                    .hide--cell--action{\n                      background: none;\n                      border:none;\n                      &:hover{\n                        background: none;\n                        border:none;\n                      }\n                    }\n                  }\n                }\n\n                // st-table-row-white\n                // f5f7fa\n\n                &:last-child {\n                    border-right: 0;\n                }\n\n                .tbody-td--column--cell{\n                    box-sizing: border-box;\n                    display: block;\n                    white-space: nowrap;/*\u63A7\u5236\u5355\u884C\u663E\u793A*/\n                    overflow: hidden;/*\u8D85\u51FA\u9690\u85CF*/\n                    text-overflow: ellipsis;/*\u9690\u85CF\u7684\u5B57\u7B26\u7528\u7701\u7565\u53F7\u8868\u793A*/\n                    word-break: break-all;\n                    padding-left: 10px;\n                    padding-right: 10px;\n                }\n\n                span{\n                    &:hover{\n                        color: #5d9bfc !important;\n                    }\n                }\n\n            }\n        }\n\n        .tbody-tr--column--gray{\n            background-color: #f6f6f6 !important;\n        }\n\n        .tbody-tr--column--white{\n            /* background-color: #fff !important; */\n\n\t        /* &:hover td{\n\t            background: #f5f7fa !important;\n\t        } */\n        }\n\n        tr.tr--hover{\n            background-color: #f5f7fa !important;\n        }\n\n        tr.tbody-tr--column--common {\n\n            td.tbody-td--column--surface--checkbox{\n              text-align:center !important;\n              width:50px;\n              line-height:1;\n              left:0;\n              background-color:#f6f6f6;\n            }\n\n            td.tbody-td--column--surface--mainarea{\n              height: 50px;\n              line-height: 1;\n              background-color: inherit;\n            }\n\n            td.tbody-td--column  {\n                font-size: 13px;\n                // height: 45px!important;\n                box-sizing: border-box;\n                // border-right: 1px solid #f0f0f0;\n                color: #333;\n                padding: 3px 0!important;\n                text-align: left;\n                white-space: nowrap;/*\u63A7\u5236\u5355\u884C\u663E\u793A*/\n                overflow: hidden;/*\u8D85\u51FA\u9690\u85CF*/\n                text-overflow: ellipsis;/*\u9690\u85CF\u7684\u5B57\u7B26\u7528\u7701\u7565\u53F7\u8868\u793A*/\n                background-image: linear-gradient(#e8eaec,#e8eaec);\n                background-repeat: no-repeat;\n                background-size: 100% 1px;\n                background-position: 100% 100%;\n\n                &:last-child {\n                    border-right: 0;\n                }\n\n                .tbody-td--column--surface--hide{\n                  display: inline-block;\n                  overflow: hidden;\n                  padding-left: 5px;\n                  padding-right: 5px;\n                  font-size: 12px;\n                  height: 100%;\n                }\n\n                .tbody-td--column--cell{\n                    box-sizing: border-box;\n                    display: block;\n                    white-space: nowrap;/*\u63A7\u5236\u5355\u884C\u663E\u793A*/\n                    overflow: hidden;/*\u8D85\u51FA\u9690\u85CF*/\n                    text-overflow: ellipsis;/*\u9690\u85CF\u7684\u5B57\u7B26\u7528\u7701\u7565\u53F7\u8868\u793A*/\n                    word-break: break-all;\n                    padding-left: 5px;\n                    padding-right: 5px;\n                    .subordinate--item{\n                      width:20px;\n                      display:inline-block;\n                    }\n                    .tbody-td--column--cell--container{\n                      display: flex;\n                    }\n                }\n\n                .cell-action{\n                    margin-right: 5px;\n                    border-color: transparent;\n                    color: #3582fb;\n                    background: transparent;\n                    font-size: 12px;\n                    cursor: pointer;\n                    padding: 9px 15px;\n                    padding-left: 0;\n                    padding-right: 0\n                }\n\n                .cell-action-btn{\n                    margin-right: 5px;\n                    border-color: transparent;\n                    color: #3582fb;\n                    background: transparent;\n                    font-size: 12px;\n                    cursor: pointer;\n                    padding: 0px;\n                    padding-left: 0;\n                    padding-right: 0;\n                    height: 20px;\n                    line-height: 1.5;\n                }\n            }\n\n            td.tbody-td--column--hide--checkbox{\n                left: 0;\n                text-align: center;\n                width:50px;\n                background: #eef1f6;\n                height:45px;\n                padding: 0px !important;\n            }\n\n            .tbody-td--cell--container{\n                font-size: 12px;\n                .lion-td--cell--container--label{\n                    color:#999;\n                }\n            }\n\n            td.tbody-td--opreation{\n              /* height:50px; */\n              background-color: inherit;\n              line-height:1;\n              .tbody-td--opreation--list{\n                display:flex;\n                align-items:center;\n                justify-content:space-evenly;\n                .antd-Button{\n                  margin-right:5px;\n                }\n                .lion-cell-btn--ellipsis{\n                  display: inline-block;\n                  cursor: pointer;\n                  padding: 0;\n                  height: auto;\n                  letter-spacing: 2px;\n                  font-weight: 800;\n                  transform: rotate(90deg);\n                  color: #3574ee;\n                  border: 0\n                }\n              }\n            }\n\n            &:last-child {\n                td.tbody-td--cell--container--label  {\n                    border-bottom: 0;\n                }\n            }\n            .checkbox{\n                text-align: center !important;\n            }\n        }\n    }\n"])));
exports.WrapperCommonTbody = WrapperCommonTbody;
var WrapperCommonSurfaceGroup = styled_components_1.default.div(templateObject_4 || (templateObject_4 = (0, tslib_1.__makeTemplateObject)(["\n    display: inline-block;\n    overflow: hidden;\n    margin-right:15px;\n    padding-left:10px !important;\n    font-size:12px;\n    .surface-group-container{\n        display:flex;\n        height:100%;\n        .surface-group-item{\n            width: 100%;\n            display: flex;\n            align-items: center;\n            height: 20px;\n            .surface-group-item--label--btn{\n                color:#999;\n                height:20px;\n                line-height:1.5;\n            }\n            .surface-group-item--label{\n                color:#999;\n            }\n        }\n    }\n"], ["\n    display: inline-block;\n    overflow: hidden;\n    margin-right:15px;\n    padding-left:10px !important;\n    font-size:12px;\n    .surface-group-container{\n        display:flex;\n        height:100%;\n        .surface-group-item{\n            width: 100%;\n            display: flex;\n            align-items: center;\n            height: 20px;\n            .surface-group-item--label--btn{\n                color:#999;\n                height:20px;\n                line-height:1.5;\n            }\n            .surface-group-item--label{\n                color:#999;\n            }\n        }\n    }\n"])));
exports.WrapperCommonSurfaceGroup = WrapperCommonSurfaceGroup;
var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
//# sourceMappingURL=./renderers/Lion/Table/LionTable/style/common.js.map