@import '~antd/es/style/themes/variable.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; } } } } } } }