ttk-app-core/src/assets/base.less

@ttk/recat enterprise develop framework

// 全局基础样式
html {
    touch-action: none;
}

body {
    color      : #333;
    font-family: Monospaced Number, Chinese Quote, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif;
}

#app{
    width: 100%;
    height: 100%;
}

/*整体部分*/
::-webkit-scrollbar {
    width : 6px;
    height: 6px;
}

/*滑动轨道*/
::-webkit-scrollbar-track {
    border-radius: 10px;
    padding      : 0 5px;
    width        : 6px;
}

/*滑块*/
::-webkit-scrollbar-thumb {
    border-radius   : 10px;
    background-color: #fff;
    padding-top     : 4px;
    width           : 6px;
    background      : #c2c2c2;
}

/*滑块效果*/
::-webkit-scrollbar-thumb:hover {
    border-radius: 10px;
    background   : rgba(114, 114, 114, 0.8);
}

// 在这里重置antd的样式
// 重置页头组件：PageHeader
.ant-page-header {
    padding: 0;
}

.ant-page-header-content {
    padding-top: 0;
}

.ant-page-header-heading+.ant-page-header-content {
    padding-top: 12px;
}

// reset Table
.ant-table-tbody tr:nth-child(2n) td {
    background: @background-color-light ;
}

td .ant-btn {
    margin-right: 8px;
}

td.operationcell {
    text-align : center;
    font-size  : 14px;
    line-height: 2;
    padding    : 4px 10px 0;

    &>button,
    &>span,
    &>div,
    &>i,
    &>a {
        cursor      : pointer;
        margin-right: 10px;

        &:last-child {
            margin-right: 0px;
        }
    }

    &>i,
    &>a,
    &>span {
        color         : #5caae3;
        vertical-align: middle;
    }
}

// 重置表单
.ttk-card-form {
    width: 100%;

    .ant-card-head-title {
        font-weight: 500;
        font-size  : 21px;
    }

    .header {}

    .content {
        .mk-form {
            background-color: white;

            .ant-form-item {
                display      : flex;
                align-items  : center;
                margin-bottom: 0;
                padding-right: 10px;

                .ant-form-item-label {
                    padding: 10px 0;
                    flex   : 0 0 100px;
                    width  : 100px;
                }

                .ant-form-item-control-wrapper,
                .ant-calendar-picker {
                    width  : 100%;
                    padding: 0;

                    .ant-select {
                        width: 100%
                    }

                    textarea {
                        height: 60px;
                    }
                }

                .ant-form-explain {
                    margin-top: 0px;
                }

                &.label100 {
                    .ant-form-item-label {
                        flex : 0 0 100px;
                        width: 100px;
                    }
                }

                &.label110 {
                    .ant-form-item-label {
                        flex : 0 0 110px;
                        width: 110px;
                    }
                }

                &.label120 {
                    .ant-form-item-label {
                        flex : 0 0 120px;
                        width: 120px;
                    }
                }

                &.label130 {
                    .ant-form-item-label {
                        flex : 0 0 130px;
                        width: 130px;
                    }
                }

                &.label140 {
                    .ant-form-item-label {
                        flex : 0 0 140px;
                        width: 140px;
                    }
                }

                &.label150 {
                    .ant-form-item-label {
                        flex : 0 0 150px;
                        width: 150px;
                    }
                }

                &.label160 {
                    .ant-form-item-label {
                        flex : 0 0 160px;
                        width: 160px;
                    }
                }

                &.label170 {
                    .ant-form-item-label {
                        flex : 0 0 170px;
                        width: 170px;
                    }
                }

                &.label180 {
                    .ant-form-item-label {
                        flex : 0 0 180px;
                        width: 180px;
                    }
                }
            }

            .form-footer {
                padding   : 10px 0;
                text-align: center;

                .ant-btn {
                    margin-right: 10px;
                }
            }
        }
    }
}

.ant-select-dropdown-menu {
    overflow: auto;
}

.ant-calendar-date:hover {
    color: @primary-color;
}

.ant-message span .ant-message-notice:first-child {
    top: 41px;
}

// datepicker样式调整
.ant-calendar-selected-day {
    .ant-calendar-date {
        color: #fff;
    }

    .ant-calendar-date:hover {
        color     : #fff;
        background: @primary-color;
    }
}

.ant-calendar-range.ant-calendar-time .ant-calendar-footer .ant-calendar-time-picker-btn {
    display: none;
}

.ant-modal {
    padding-bottom: 0;
    // ant-modal样式修改
    .ant-modal-header,
    .ant-modal-body {
        padding: 12px;
    }
    .ant-modal-content {
        font-family            : "Microsoft Yahei", "Helvetica Neue", Helvetica, Arial, sans-serif;
        -webkit-font-smoothing : antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

// mk-datagrid
// .mk-datagrid {
//     .fixedDataTableLayout_main {
//         border-right: 0 !important;

//         .fixedDataTableRowLayout_main {
//             border-left    : 1px solid #ddd;
//             // border-right: 1px solid #ddd;
//         }

//         .mk-datagrid-cellContent {
//             padding: 0 8px;
//         }
//     }

//     /* 列拖拽线样式*/
//     .fixedDataTableColumnResizerLineLayout_mouseArea {
//         width           : 3px;
//         background-color: #0066B3;
//         right           : -2px;

//         &:before {
//             content : '';
//             position: absolute;
//             border  : 4px solid transparent;
//             height  : 100%;
//             left    : -6px;
//         }

//         &:after {
//             content : '';
//             position: absolute;
//             border  : 4px solid transparent;
//             height  : 100%;
//             left    : 2px;
//         }
//     }

//     .operationcell {
//         text-align : center;
//         font-size  : 14px;
//         line-height: 2;

//         &>button,
//         &>span,
//         &>div,
//         &>i,
//         &>a {
//             cursor      : pointer;
//             margin-right: 10px;

//             &:last-child {
//                 margin-right: 0px;
//             }
//         }

//         &>i,
//         &>a,
//         &>span {
//             color         : #5caae3;
//             vertical-align: middle;
//         }
//     }
// }

// mk-table 
.mk-table,
.ant-table {
    // border-left  : 0 !important;
    // border-bottom: 0 !important;

    // ::selection {
    //     color: #fff !important;
    // }

    .ant-table-placeholder {
        position: absolute;
        // top     : 37px;
        width   : 100%;
    }

    // .ant-table-fixed-header {
    //   .ant-table-fixed-right {

    //     .ant-table-body-outer {
    //       margin-bottom: 0 !important;

    //       .ant-table-body-inner {
    //         overflow-x: hidden;
    //       }
    //     }
    //   }
    // }

    // .ant-table-fixed-right {
    //   border-top: 1px solid #ddd;
    // }


    // .ant-table-layout-fixed {
    //   .ant-table-fixed-right {
    //     border-top: 0;
    //   }
    // }

    .ant-table-body {
        // overflow-x: auto !important;

        .ant-table-fixed {
            border-left: 1px solid #ddd;
        }
    }

    .ant-table-tbody {
        .operationcell {
            padding   : 4px 10px 0;
            text-align: center;

            &>button,
            &>span,
            &>div,
            &>i {
                cursor      : pointer;
                color       : #5caae3;
                margin-right: 10px;

                &:last-child {
                    margin-right: 0px;
                }
            }

            &>i {
                color         : #5caae3;
                font-size     : 18px;
                vertical-align: middle;
            }

            .ant-table-column-title {
                color: #333; // 避免被全局样式冲突
            }
        }
    }
}

// .mk-table .ant-table-tbody tr:not(.lazy_table_tr) td {
//     padding: 0 8px !important;
// }

.box-header,
.box-footer {
    padding: 10px;
}

.box-content {
    padding: 0 4px 4px;
}

.box-footer {
    background-color: #E9ECF2;
}

.edficon {
    // font-size : 14px;
    font-style: normal;
}

// 系统或者浏览器默认缩放大于100的样式
// 主要解决datagrid边界的问题
body.ratio-large {

    /* Firefox */
    @-moz-document url-prefix() {
        .mk-datagrid .public_fixedDataTableCell_main {
            border-width: 2px;
        }
    }
}

.textOverflow {
    overflow     : hidden; //超出的文本隐藏
    text-overflow: ellipsis; //溢出用省略号显示
    white-space  : nowrap; //溢出不换行
}