mh-sms-web/src/layout/siderOld.less

:global {
  @opacity-bg  : #f5f5f5;//#f5f5f5菜单背景色
  @active-color: #0047FF;
  @sider-prefix: sider;

  .@{sider-prefix} {
    position        : relative;
    width           : 100%;
    height          : 100%;
    padding         : 0 12px;
    background-color: @opacity-bg;
    transition      : width .2s ease;
    box-shadow      : 0 0 10px rgba(0, 0, 0, 0.25);

    &.shortMenuShow {
      width: 178px;
    }

    &__menuAll,
    &__menu {
      display        : flex;
      flex-direction : row;
      justify-content: flex-start;
      align-items    : center;
      width          : 100%;
      padding        : 0 12px;
      cursor         : pointer;
      overflow       : hidden;
    }

    &__menuAll {
      height       : 61px;
      border-bottom: 1px solid #333333;//#333333菜单下划线颜色

      &-icon {
        width : auto;
        height: 28px;
      }
    }

    &__menuExpand {
      position        : absolute;
      top             : 0;
      left            : 100%;
      width           : 0;
      height          : 100%;
      transition      : width .2s ease;
      background-color: @opacity-bg;
      box-shadow      : 6px 0 10px rgba(0, 0, 0, 0.1);

      &-divempty {
        position: absolute;
        top     : -52px;
        left    : -30%;
        height  : 50px;
        width   : 130%;
      }

      &-divempty-hide {
        position: absolute;
      }

      &-inner {
        height : 100%;
        padding: 0 24px;
      }

      &-divider {
        position   : absolute;
        top        : 0;
        left       : 0;
        height     : 100%;
        border-left: 1px solid #333333;//#333333
      }

      &-divempty-right {
        position: relative;
        bottom  : 100%;
        left    : 100%;
        height  : 100%;
        width   : 200px;
      }

      &-header {
        display      : flex;
        flex-wrap    : nowrap;
        width        : 100%;
        height       : 61px;
        border-bottom: 1px solid #333333;//#333333菜单扩展处下划线颜色
      }

      &-body {
        width  : 100%;
        height : ~'calc(100% - 140px)';
        padding: 12px 0;

        &--scroll {
          display        : flex;
          flex-direction : row;
          justify-content: flex-start;
          align-items    : flex-start;
          flex-wrap      : wrap;
        }
      }

      &-footer {
        position     : relative;
        height       : 70px;
        padding      : 4px;
        border       : 1px solid #e1e1e1;
        border-radius: 4px;

        &--title {
          position: absolute;
          top     : -24px;
          left    : 0;
        }

        &--scroll {
          font-size  : 14px;
          line-height: 18px;
        }
      }

      &-menu {
        position       : relative;
        display        : flex;
        flex-direction : column;
        justify-content: center;
        align-items    : center;
        width          : 82px;
        height         : 100%;
        margin-right   : 40px;
        cursor         : pointer;

        &:hover {

          .@{sider-prefix}__menuExpand-menu--itemIcon,
          .@{sider-prefix}__menuExpand-menu--itemText {
            color: @active-color;
          }

          .@{sider-prefix}__menuExpand-menu--indicator {
            opacity: 1;
          }
        }

        &.lastChild {
          margin-right: 0;
        }

        &--item {
          width          : 100%;
          display        : flex;
          flex-direction : row;
          justify-content: center;
          align-items    : center;

          &Icon {
            font-size   : 12px;
            color       : #333333;//#333333右侧扩展菜单图标颜色
            margin-right: 5px;
            transition  : color .2s ease;

            &.active {
              color: @active-color;
            }
          }

          &Text {
            font-size : 10px;
            color     : #333333;//#333333右侧扩展菜单字体颜色
            transition: color .2s ease;
            &.active {
              color: @active-color;
            }
          }
        }

        &--indicator {
          position        : absolute;
          bottom          : 12px;
          width           : 48px;
          height          : 2px;
          background-color: @active-color;
          border-radius   : 2px;
          opacity         : 0;
          transition      : opacity .2s ease;

          &.active {
            opacity: 1;
          }
        }
      }

      &-subMenu {
        display       : flex;
        flex-direction: column;
        padding-right : 20px;
        margin-bottom : 4px;
        overflow      : hidden;

        &--title {
          font-size    : 12px;
          color        : #333333;//#ABABAB二级菜单颜色
          margin-bottom: 18px;
          cursor       : pointer;
          
          &--icon {
            margin-left: 5px;
            font-size  : 14px;
          }

          &:hover {
            color: @active-color;;
          }
        }

        &--menu {
          width          : 100%;
          // padding-left   : 20px;
          margin-bottom  : 20px;
          display        : flex;
          flex-direction : row;
          justify-content: flex-start;
          align-items    : center;
          cursor         : pointer;

          &:hover {

            .@{sider-prefix}__menuExpand-menu--itemIcon,
            .@{sider-prefix}__menuExpand-menu--itemText {
              color: @active-color;
            }
          }
        }
      }
    }

    &__scrollbars {
      width : 100%;
      height: ~'calc(100% - 61px)' !important;
    }

    &__menu {
      height    : 28px;
      margin-top: 30px;

      &:hover {

        .@{sider-prefix}__menu-icon,
        .@{sider-prefix}__menu-font--text {
          color: @active-color;
        }
      }

      &.lastChild {
        margin-bottom: 30px;
      }

      &-icon {
        font-size : 28px;
        color     : #333333;//#333333左侧常用菜单图标颜色
        transition: color .2s ease;

        &.active {
          color: @active-color;
        }
      }

      &-font {
        display        : flex;
        flex-direction : row;
        justify-content: flex-start;
        align-items    : center;
        margin-left    : 16px;

        &--text {
          font-size   : 16px;
          color       : #333333;//#333333左侧常用菜单字体颜色
          margin-right: 4px;
          white-space : nowrap;
          transition  : color .2s ease;

          &.active {
            color: @active-color;
          }
        }

        &--icon {
          font-size: 16px;
          color    : #333333;
        }
      }
    }
  }
}