fastlion-amis/src/renderers/Lion/Table/LionTable/style/common.ts

一种MIS页面生成工具

import styled from "styled-components";

const WrapperCommonTable = styled.table`

    tr{
        .checkbox{
            background-image: linear-gradient(#e8eaec,#e8eaec);
            background-repeat: no-repeat;
            background-size: 100% 1px;
            background-position: 100% 100%;
        }

        th.thead-th--column{
            white-space: pre-line;
            word-break: break-all;
            padding-left: 5px;
            padding-right: 5px;
        }

        th.fix--hidden{
            visibility: hidden;
        }

        td.fix--hidden{
            visibility: hidden;
        }

        .lion-td-btn{
            /* margin-right:5px;
            border-color:transparent;
            color:#3582fb;
            background:transparent;
            font-size:12px;
            cursor: pointer;;
            padding:9px 15px;
            padding-left:0px;
            padding-right:0px; */
            width: 92px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        // 折叠按钮样式
        .lion-table-cell-btn{
            .ant-popover-inner-content{
                display: flex;
                flex-direction: column;
                border-radius: 4px;
                padding: 6px 8px;
                &>button{
                    :hover{
                        background: #ebf3ff !important;
                        color:#5b9bfc !important;
                    }
                }
            }
        }
    }

    .lion-cell--fix--left{
        position: sticky;
        left: 0;
        z-index: 2;
    }

    .lion-cell--fix--right{
        position: sticky;
        right: 0;
        z-index: 2;
        .lion-cell--fix--right--cell{
          display: inline-block;
          overflow: hidden;
          padding-left: 5px;
          padding-right: 5px;
          font-size: 12px;
        }
    }

    .fix-left-shadow{
        box-shadow: 4px 3px 4px 0 rgb(0 0 0 / 12%);
    }

    .fix-right-shadow{
        box-shadow:-4px 3px 4px 0 rgb(0 0 0 / 12%);
    }
`

const WrapperCommonThead = styled(WrapperCommonTable)`
	border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    border:0;
    color: #606266;
    font-weight: 600;
    thead.lion-table-header-thead{
    	tr{
    		height:40px;
        background-color:#fff !important;

        th.thead-th--column{
        /* 左侧固定表格表头th样式 */

          font-size: 12px;
          box-sizing: border-box;
          color: rgba(0, 0, 0, .85);
          padding: 3px 0!important;
          text-align: left;
          background-image: linear-gradient(#e8eaec,#e8eaec);
          background-repeat: no-repeat;
          background-size: 100% 1px;
          background-position: 100% 100%;
          background-color:inherit;

          .thead-th--cell{
            /* 左侧固定表格表头单元格样式 */

            box-sizing: border-box;
            display: block;
            white-space: nowrap;/*控制单行显示*/
            overflow: hidden;/*超出隐藏*/
            text-overflow: ellipsis;/*隐藏的字符用省略号表示*/
            word-break: break-all;
            padding-left: 5px;
            padding-right: 5px;
          }

          /* &:first-child {
            overflow:unset !important;
          } */

          &:last-child {
              border-right: 0;
          }
        }

          /* th.lion-cell--fix--right{
            :last-child{
              ::after{
                content:"";
                width: 7px;
                height: 100%;
                position:absolute;
                right:0;
              }
            }
          } */
    	}
    }
`

const WrapperCommonTbody = styled(WrapperCommonTable)`
	border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
    border:0;

    tbody.lion-table-body-tbody {

        tr.lion-tr--column--hide{

            font-size: 12px;
            background-color:rgb(238, 241, 246);
            td.tbody-td--column--hide{

                padding: 3px 0 !important;
                background-color: #eef1f6;
                text-align: left;
                white-space: nowrap;/*控制单行显示*/
                overflow: hidden;/*超出隐藏*/
                text-overflow: ellipsis;/*隐藏的字符用省略号表示*/
                background-image: linear-gradient(#e8eaec,#e8eaec);
                background-repeat: no-repeat;
                background-size: 100% 1px;
                background-position: 100% 100%;
                border-bottom: 1px solid #e5e8f1;

                .td--column--hide--cell{
                  line-height:16px;
                  .td--column--hide--cell--container{
                    text-align:center;
                    padding:4px 0px;
                    .hide--cell--operation{
                      vertical-align: unset;
                      font-size: 12px;
                      color: #3582fb;
                      display: inline-flex;
                      flex-direction: row;
                      align-items: center;
                      justify-content: center;
                      position: relative;
                      text-decoration: none;
                      outline: none;
                      cursor: pointer;
                      padding: 0;
                      font-weight: 500;
                    }
                    .hide--cell--action{
                      background: none;
                      border:none;
                      &:hover{
                        background: none;
                        border:none;
                      }
                    }
                  }
                }

                // st-table-row-white
                // f5f7fa

                &:last-child {
                    border-right: 0;
                }

                .tbody-td--column--cell{
                    box-sizing: border-box;
                    display: block;
                    white-space: nowrap;/*控制单行显示*/
                    overflow: hidden;/*超出隐藏*/
                    text-overflow: ellipsis;/*隐藏的字符用省略号表示*/
                    word-break: break-all;
                    padding-left: 10px;
                    padding-right: 10px;
                }

                span{
                    &:hover{
                        color: #5d9bfc !important;
                    }
                }

            }
        }

        .tbody-tr--column--gray{
            background-color: #f6f6f6 !important;
        }

        .tbody-tr--column--white{
            /* background-color: #fff !important; */

	        /* &:hover td{
	            background: #f5f7fa !important;
	        } */
        }

        tr.tr--hover{
            background-color: #f5f7fa !important;
        }

        tr.tbody-tr--column--common {

            td.tbody-td--column--surface--checkbox{
              text-align:center !important;
              width:50px;
              line-height:1;
              left:0;
              background-color:#f6f6f6;
            }

            td.tbody-td--column--surface--mainarea{
              height: 50px;
              line-height: 1;
              background-color: inherit;
            }

            td.tbody-td--column  {
                font-size: 13px;
                // height: 45px!important;
                box-sizing: border-box;
                // border-right: 1px solid #f0f0f0;
                color: #333;
                padding: 3px 0!important;
                text-align: left;
                white-space: nowrap;/*控制单行显示*/
                overflow: hidden;/*超出隐藏*/
                text-overflow: ellipsis;/*隐藏的字符用省略号表示*/
                background-image: linear-gradient(#e8eaec,#e8eaec);
                background-repeat: no-repeat;
                background-size: 100% 1px;
                background-position: 100% 100%;

                &:last-child {
                    border-right: 0;
                }

                .tbody-td--column--surface--hide{
                  display: inline-block;
                  overflow: hidden;
                  padding-left: 5px;
                  padding-right: 5px;
                  font-size: 12px;
                  height: 100%;
                }

                .tbody-td--column--cell{
                    box-sizing: border-box;
                    display: block;
                    white-space: nowrap;/*控制单行显示*/
                    overflow: hidden;/*超出隐藏*/
                    text-overflow: ellipsis;/*隐藏的字符用省略号表示*/
                    word-break: break-all;
                    padding-left: 5px;
                    padding-right: 5px;
                    .subordinate--item{
                      width:20px;
                      display:inline-block;
                    }
                    .tbody-td--column--cell--container{
                      display: flex;
                    }
                }

                .cell-action{
                    margin-right: 5px;
                    border-color: transparent;
                    color: #3582fb;
                    background: transparent;
                    font-size: 12px;
                    cursor: pointer;
                    padding: 9px 15px;
                    padding-left: 0;
                    padding-right: 0
                }

                .cell-action-btn{
                    margin-right: 5px;
                    border-color: transparent;
                    color: #3582fb;
                    background: transparent;
                    font-size: 12px;
                    cursor: pointer;
                    padding: 0px;
                    padding-left: 0;
                    padding-right: 0;
                    height: 20px;
                    line-height: 1.5;
                }
            }

            td.tbody-td--column--hide--checkbox{
                left: 0;
                text-align: center;
                width:50px;
                background: #eef1f6;
                height:45px;
                padding: 0px !important;
            }

            .tbody-td--cell--container{
                font-size: 12px;
                .lion-td--cell--container--label{
                    color:#999;
                }
            }

            td.tbody-td--opreation{
              /* height:50px; */
              background-color: inherit;
              line-height:1;
              .tbody-td--opreation--list{
                display:flex;
                align-items:center;
                justify-content:space-evenly;
                .antd-Button{
                  margin-right:5px;
                }
                .lion-cell-btn--ellipsis{
                  display: inline-block;
                  cursor: pointer;
                  padding: 0;
                  height: auto;
                  letter-spacing: 2px;
                  font-weight: 800;
                  transform: rotate(90deg);
                  color: #3574ee;
                  border: 0
                }
              }
            }

            &:last-child {
                td.tbody-td--cell--container--label  {
                    border-bottom: 0;
                }
            }
            .checkbox{
                text-align: center !important;
            }
        }
    }
`

const WrapperCommonSurfaceGroup = styled.div`
    display: inline-block;
    overflow: hidden;
    margin-right:15px;
    padding-left:10px !important;
    font-size:12px;
    .surface-group-container{
        display:flex;
        height:100%;
        .surface-group-item{
            width: 100%;
            display: flex;
            align-items: center;
            height: 20px;
            .surface-group-item--label--btn{
                color:#999;
                height:20px;
                line-height:1.5;
            }
            .surface-group-item--label{
                color:#999;
            }
        }
    }
`

export {
  WrapperCommonThead,
  WrapperCommonTbody,
  WrapperCommonSurfaceGroup
}