index.less

@import '~antd/es/style/themes/default.less';
@panda-prefix-cls: ~'@{ant-prefix}-layout-slider';
@primary-color: #1685ff;
@primary-1: color(~`colorPalette('@{primary-color}', 1) `); // replace tint(@primary-color, 90%)
@primary-2: color(~`colorPalette('@{primary-color}', 2) `); // replace tint(@primary-color, 80%)
@primary-3: color(~`colorPalette('@{primary-color}', 3) `); // unused
@primary-4: color(~`colorPalette('@{primary-color}', 4) `); // unused
@primary-5: color(
  ~`colorPalette('@{primary-color}', 5) `
); // color used to control the text color in many active and hover states, replace tint(@primary-color, 20%)
@primary-6: @primary-color; // color used to control the text color of active buttons, don't use, use @primary-color
@primary-7: color(~`colorPalette('@{primary-color}', 7) `); // replace shade(@primary-color, 5%)
@primary-8: color(~`colorPalette('@{primary-color}', 8) `); // unused
@primary-9: color(~`colorPalette('@{primary-color}', 9) `); // unused
@primary-10: color(~`colorPalette('@{primary-color}', 10) `); // unused
@slider-light: #fff;
@color-black: #fff;
.@{panda-prefix-cls} {
  overflow: hidden;
  flex: 0 0 140px;
  max-width: 140px;
  min-width: 140px;
  width: 140px;
  background-color: @layout-header-background;
  transition: background 0.3s, width 0.3s cubic-bezier(0.2, 0, 0, 1) 0s;
  &-fixed {
    position: fixed !important;
    top: 46px;
    left: 0;
    z-index: 600;
    height: calc(100% - 46px);
    // overflow: auto;
    overflow-x: hidden;
    box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
    transition: all 0.2s;
  }
  &-collapsed {
    flex: 0 0 48px;
    max-width: 48px;
    min-width: 48px;
    width: 48px;
    transition: background 0.3s, width 0.5s cubic-bezier(0.2, 0, 0, 1) 0s;
    .sliderMenu {
      .splitLine {
        width: 48px;
      }
    }
  }
  &-children {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  &-wrapper {
    flex: 1 1 0%;
  }
  &-menu {
    position: relative;
    min-height: 100%;
    &-item {
      height: 74px;
      display: flex;
      align-items: center;
      text-align: center;
      width: 100%;
      justify-content: center;
      cursor: pointer;
      transition: border-color 0.3s, background 0.3s,
        padding 0.1s cubic-bezier(0.215, 0.61, 0.355, 1);
      a {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        img {
          width: 22px;
          height: 22px;
          opacity: 0.7;
        }
      }
      &-icon {
        transition: font-size 0.15s cubic-bezier(0.215, 0.61, 0.355, 1),
          margin 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), color 0.3s;
        font-size: 14px;
        svg {
          path,
          rect,
          circle,
          .cls-1 {
            fill: hsla(0, 0%, 100%, 0.65) !important;
            stroke: hsla(0, 0%, 100%, 0.65) !important;
            stroke-width: 0 !important;
            stroke-linecap: round;
            stroke-miterlimit: 10;
          }
        }
      }
      &-text {
        display: block;
        color: hsla(0, 0%, 100%, 0.65);
        padding-top: 4px;
        max-width: 70px;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        opacity: 1;
        transition: opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), margin 0.3s, color 0.3s;
      }
      &-current {
        color: @color-black;
      }
      &.hover {
        span {
          color: #fff;
        }
        .icon {
          &.fillCurrent {
            svg {
              path {
                fill: hsla(0, 0%, 100%, 0.65) !important;
                stroke: hsla(0, 0%, 100%, 0.65) !important;
              }
            }
          }
          // svg {
          //     path:not(.st0) {
          //         fill: #fff!important;

          //     }
          //     path.st0 {
          //         fill:url(#SVGID_1_)!important;
          //     }
          //     path.st1 {
          //         fill:url(#SVGID_2_)!important;
          //     }
          // }
        }
      }
      &-active {
        background: @primary-color;
        box-shadow: 0px 1px 0px 0px rgba(238, 238, 238, 0.17);
        span {
          color: #ffffff;
        }
        .icon {
          svg {
            path,
            rect,
            circle {
              // fill: #fff!important;
            }
          }
        }
      }
    }
  }
}