cyber-web-ui
Version:
spring-cyber前端ui框架
99 lines (96 loc) • 2.95 kB
text/less
@import '../../style/theme/index.less';
.cyber-layout-sidebar {
width: 250px;
height: 100%;
overflow: hidden;
padding: 24px 0 16px 30px;
transition: all 0.2s linear;
.cyber-layout-sidebar-container {
height: 100%;
display: flex;
flex-direction: column;
background-color: #FFFFFF;
border-radius: @border-radius-base;
box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.06);
.cyber-layout-sidebar-search-block {
width: 100%;
padding: 12px 20px;
border-radius: @border-radius-base @border-radius-base 0px 0px;
.ant-input-affix-wrapper.cyber-layout-menu-search {
width: 100%;
padding-left: 0;
padding-right: 0;
border-top: none;
border-left: none;
border-right: none;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
outline: none;
box-shadow: none;
.ant-input-prefix {
margin-right: 12px;
}
}
}
.cyber-layout-menu-ul {
width: 100%;
height: 0;
flex: 1;
overflow-x: hidden;
overflow-y: auto;
border-right: none;
border-radius: 0 0 @border-radius-base @border-radius-base;
.ant-menu.ant-menu-inline {
background: transparent;
position: relative;
.nav_bar {
width: 2px;
height: calc(100% - 8px);
background: #d9e2eb;
border-radius: 0px 0px 0px 0px;
position: absolute;
top: 50%;
transform: translate(0, -50%);
z-index: 1;
}
.ant-menu-item {
.action_bar {
position: absolute;
top: 0;
bottom: 0;
border-right-width: 2px;
z-index: 1;
border-right: 2px solid #05c059;
transform: scaleY(0.0001);
opacity: 0;
transition: transform 0.15s cubic-bezier(0.215, 0.61, 0.355, 1),
opacity 0.15s cubic-bezier(0.215, 0.61, 0.355, 1);
}
&.ant-menu-item-selected {
background: transparent;
&::after {
display: none;
}
.action_bar {
transform: scaleY(1);
opacity: 1;
transition: transform 0.15s cubic-bezier(0.645, 0.045, 0.355, 1),
opacity 0.15s cubic-bezier(0.645, 0.045, 0.355, 1);
}
}
}
}
.ant-menu-item .ant-menu-item-icon {
max-width: 16px ;
font-size: 16px ;
}
.ant-menu-submenu-open.ant-menu-submenu-inline > .ant-menu-submenu-title > .expand-icon {
transform: translateY(-2px) rotateX(-180deg);
transition: all 0.3s;
}
.ant-menu-submenu.cyber-menu-submenu-selected {
color: @primary-color;
}
}
}
}