pro/src/layout/style.ts

import { createStyles } from '@/theme'
import { useScrollStyle } from '@/hooks/useScrollStyle'


export const useStyle = createStyles(({ token, css, cx, prefixCls }, props: any) => {
  const prefix = `${prefixCls}-${token?.proPrefix}-layout`

  const {  scrollbar,darkScrollbar,scrollbarBackground } = useScrollStyle()

  const container = {
    [prefix]: css`
      
      .ant-pro-layout .ant-pro-layout-bg-list{
        background:#f2f2f2;
      }
      
      height: 100%;
      
      .ant-pro-global-header-logo,
      .ant-pro-layout-bg-list {
        user-select: none;
      }

      .ant-menu-inline-collapsed >.ant-menu-item-group>.ant-menu-item-group-list>.ant-menu-item{
        //padding-inline-start: 0;
      }
      
    

      .ant-pro-layout-content{
        padding: 20px;
        
      }
      .ant-pro-layout .ant-pro-layout-content-has-page-container{
        padding: 0;
      }
      .ant-pro-page-container-children-container{
       
        padding-inline: 20px;
        padding-block: 20px;
        
      }
      .ant-page-header{
        background-color: white;
      }
       .ant-page-header-no-children {
        height: 0px;
      } 
      .ant-pro-card{
        height: 100%;
        .ant-pro-card-header{
          padding-block: 16px;
        }
      }
      .ant-pro-card-body{
        padding-block-start: 0;
        overflow: auto;
        height:  calc(100vh - 160px - var(--pageHeader, 0px));
        min-height: calc(100vh - 160px - var(--pageHeader, 0px));
        ${scrollbarBackground}
      }

      .ant-tree .ant-tree-checkbox{
        margin-top: 12px;
      }
      .ant-tree .ant-tree-switcher,
      .ant-tree .ant-tree-node-content-wrapper{
        line-height: 40px;
      }
    `,
  }

  const pageCard = css`
    
    .ant-pro-grid-content,
    .ant-pro-grid-content-children,
    .ant-pro-page-container-children-container,
    .layoutkit-flexbox
    {
      height: 100%;
    }
    
    .layoutkit-flexbox{
      height: calc(100% - var(--pageHeader, 0px));
    }
    
  `

  const pageContext = css`
    box-shadow: ${token.boxShadowSecondary};
  `

  const sideMenu = css`
    .ant-pro-base-menu-inline-group .ant-menu-item-group-title .anticon {
      //margin-inline-end: 0;
    }
    
  `
  const myLayout = css`
    
    height: 100%;
    .ant-pro-layout-content{
      flex-direction: row;
    }
    
    .ant-pro-sider-light{
      //background-color: #222b45!important;
    }
    .ant-pro-sider .ant-layout-sider-children{
      padding-inline: 0; 
    }
    
    .ant-layout-sider-children > div:nth-child(2){

      ${darkScrollbar}

    }
    
    .ant-pro-sider-logo{
      padding-block-start: 10px;
      padding-block-end: 0;
      max-height: 50px;
      overflow: hidden;
      justify-content: center;
    }
    .ant-pro-layout-content,
    .ant-pro-layout-container{
      width: calc(100vw - 80px);
      overflow: hidden;
      height: 100vh;
    }

    .ant-pro-page-container .ant-pro-page-container-warp-page-header{
      padding-inline: 30px;
      
      .black{
        cursor: pointer;
        background-color: transparent;
        outline: none;
        transition: color 0.3s;
        .anticon {
          transition: all 0.2s;
          &:hover {
            transform: scale(1.3);
          }
        }
      }
    }
    
  `

  const childMenus = css`

    background: #fff;
    box-shadow: 2px 0 8px 0 rgba(29, 35, 41, .05);
    border-right: 1px solid #e6e6e6;
   // transition: width .3s;
    overflow: hidden;
    height: 100vh;
    
    display: flex;
    flex-direction: column;
    
    .i-icon{
      display: inline-flex;
    }
    
    .ant-menu{
      flex: 1;
      border-inline-end: 0!important;
      overflow: auto;
      ${scrollbar}
      
      .ant-menu-item{ 
        border-radius: 0;
        margin: 0;
        width: 100%;
      }
      .ant-menu-item-selected{
      }
    }

    .ant-menu-inline-collapsed >.ant-menu-item{
      padding-inline: calc(50% - 8px);
      height: 52px;
      line-height: 52px;
    }

    .ant-menu-inline >.ant-menu-submenu>.ant-menu-submenu-title,
    .ant-menu-inline .ant-menu-item{
      height: 52px;
      line-height: 52px;
    }
    .ant-menu .ant-menu-item .ant-menu-item-icon,
    .ant-menu .ant-menu-submenu-title .ant-menu-item-icon,
    .ant-menu .ant-menu-item .anticon, .ant-menu
    .ant-menu-submenu-title .anticon{
        font-size: 16px;  
    }
    
    .ant-menu-inline .ant-menu-submenu-title{
      margin-inline: 0;
      margin-block: 0;
      width: 100%;
      border-radius: 0;
    }

    .ant-menu-light .ant-menu-item-selected, 
    .ant-menu-light>.ant-menu .ant-menu-item-selected{
        background-color:  #3f9eff;
       color: white;
      
    }
    
  `


  const childMenuTop = css` 
    overflow: hidden;   
    border-bottom: 1px solid #ebeef5;
    height:  var(--bodyHeader, 50px);
    line-height: var(--bodyHeader, 50px);

    h2{
      padding: 0 20px;
      font-size: 17px;
      color: #3c4a54;
      margin: 0;
    }
  `

  const childMenuBottom = css `
    border-top: 1px solid #ebeef5;
    height: 51px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  `

  const mySider = css`
    .ant-layout-sider-children{
      //background-color: #001529; 
      padding-block-start: 10px!important;
    }
    .ant-menu-inline-collapsed >.ant-menu-item{
      padding-inline: calc(50% - 19px - 4px);
    }
  `
  const mySiderMenu = css`
   
    padding-top: 10px;
    
    .ant-menu-item{
      padding-inline: unset;
      padding-left: unset!important;
      flex-direction: column;
      height: 64px;
      line-height: 64px;
    }
    .ant-menu-item-selected{
      background-color: rgb(210, 229, 255);
      color: rgb(37, 59, 125);
    }
    .ant-menu-item >.ant-menu-title-content{
      text-overflow: unset!important;
      overflow: unset!important;
      flex: auto!important;
      align-content: center;
      
      .menu-link{
        display: flex; 
        flex-direction: column;
        line-height: normal;
        align-items: center;
      }
    }

    .ant-pro-layout .ant-layout-sider.ant-pro-sider{
      background: none;
    }


    &.ant-menu-inline .ant-menu-item{
      margin-inline: 0;
      margin-block: 0;
      width: 80px;
      border-radius: 0;
      color: white!important;
    }
    
    .ant-menu-title-content{
      .anticon{
        font-size: 18px;
      }
    }

    .ant-menu-item:not(.ant-menu-item-selected):hover{
      background-color: hsla(0,0%,100%,.1) !important;
      color: white!important;
    }

    .ant-menu-item-selected{
      background-color: #334068;
      color: white;
    }
    
  `

  const body = css`
    overflow: hidden;
    --bodyHeader: 50px;
    --pageHeader: 0px;

    .ant-pro-page-container {
      width: 100%;
      flex: 1;
      overflow: hidden;
      height: calc(100vh - var(--bodyHeader, 50px) - var(--pageHeader, 0px));

    }
  `

  const bodyHeader = css`
    padding-block-end: 0;
    padding-block-start: 0;
    border-bottom: 1px solid #ebeef5;
    background-color: white;
    padding-inline: 15px;
    height: var(--bodyHeader, 50px);
    line-height: var(--bodyHeader, 50px);
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    box-shadow: 0 1px 4px rgba(0,21,41,.08);
  `

  const headerRight = css`
    .ant-space-item{
      cursor: pointer;
      &:hover{
        background-color: ${token.colorBgTextHover};
      }
    }
  `

  const box = css`
    flex: 1;
    background: ${token.colorBgContainer};
  `
  const authHeight = css`
    background-color: ${token.colorBgContainer};
    
    .ant-pro-draggable-panel-fixed{
      //height:  calc(100vh - 100px)!important;
      //min-height: calc(100vh - 100px)!important;
    }
    
    
  `

  const layoutTable = css`
    .ant-pro-table{
      .ant-pro-card-body{
        height:  100%;
        min-height: 100%;
      }
    }
    
    .page-title{
      justify-content: center;
      .ant-space-item{
        display: inline-flex;
        justify-content: center;
      }
    }
  `

  return {
    container: cx(container[prefix], props?.className),
    box,
    authHeight,
    pageContext,
    sideMenu,
    mySider,
    mySiderMenu,
    pageCard,
    myLayout,
    childMenuTop,
    childMenus,
    childMenuBottom,
    body,
    bodyHeader,
    headerRight,
    layoutTable,
  }

})