@import '~antd/es/style/themes/default.less'; @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: ~'@{ant-prefix}'; .@{panda-prefix-cls}-menu-item-children { height: 36px; background: #fff; box-shadow: rgb(240 241 242) 0px 2px 8px; position: fixed; top: 46px; width: 100%; z-index: 500; svg { path, rect, circle { fill: #c4cddb; stroke: #c4cddb; box-shadow: 0px 1px 2px 0px rgb(6 0 1 / 50%); } } img { filter: drop-shadow(10px 0px #c4cddb); transform: translateX(-10px); } & :global { .@{ant-prefix}-tabs-tab { padding: 7px 0 !important; margin: 0 32px 0 0 !important; &:hover { svg path, svg rect, svg circle { fill: @primary-color!important; stroke: @primary-color!important; } img { filter: drop-shadow(10px 0px @primary-color); } .menu-item-name { color: @primary-color; } .@{ant-prefix}-tabs-tab-btn { color: @primary-color; } } .@{ant-prefix}-tabs-tab-btn { .@{ant-prefix}-dropdown-trigger { div { div { width: 100%; height: 100%; } } } } } } .menu-item { float: left; } & :global(.@{ant-prefix}-tabs-tab) { display: flex !important; } & :global(.@{ant-prefix}-tabs-tab-btn) { display: flex; position: relative; align-items: center; color: #737983; transform: scale(0.92); } & :global(.@{ant-prefix}-tabs-tab.@{ant-prefix}-tabs-tab-active .@{ant-prefix}-tabs-tab-btn) { color: @primary-color!important; } & :global(.@{ant-prefix}-tabs-tab-btn > div > div) { display: flex; } & :global(.@{ant-prefix}-tabs-nav::before) { border-bottom: none !important; } .menu-item-name { margin-left: 8px; color: #737983; // transition: color .3s; transition: border-color 0.3s, color 0.3s, padding 0.1s cubic-bezier(0.215, 0.61, 0.355, 1); &:hover { color: @primary-color; } } & :global { .@{ant-prefix}-divider-vertical { left: 20px; margin: 0 1px !important; } .@{ant-prefix}-tabs-nav-operations { .ant-tabs-nav-more { margin-right: 0px !important; } } } & :global(.@{ant-prefix}-tabs-ink-bar) { background: @primary-color!important; } & :global(.@{ant-prefix}-tabs-tab-active) { color: @primary-color!important; } & :global(.@{ant-prefix}-tabs-tab-active .panda-pro-layouts-basic-layout-menu-item-name) { color: @primary-color!important; } & :global { .@{ant-prefix}-tabs-tab-active svg path, .@{ant-prefix}-tabs-tab-active svg rect, .@{ant-prefix}-tabs-tab-active svg circle { fill: @primary-color!important; stroke: @primary-color!important; } .@{ant-prefix}-tabs-tab-active img { filter: drop-shadow(10px 0px @primary-color); } } & :global(.@{ant-prefix}-tabs-nav-wrap) { margin-left: 22px; } & :global(.@{ant-prefix}-dropdown-trigger) { display: flex; align-items: center; } & :global(.@{ant-prefix}-tabs-nav) { margin: 0px !important; } }