ten-design-vue
Version:
ten-vue
392 lines (326 loc) • 7.61 kB
text/less
/* dependencies icon */
@import "../vars.less";
@import "../mixins/index.less";
@item: ten-menu-item;
@content: ten-menu-item__content;
@contentinner: ten-menu-item__contentinner;
@contenticon: ten-menu-item__content-icon;
@contentcarret: ten-menu-item__content-carret;
@submenu: ten-menu-item__submenu;
// 垂直模式折叠时,第一级选中与 hover 样式
.deep-0-collapse-selected() {
color: @menu-item-deep-0-color-active-collapsed;
background: @menu-item-deep-0-bg-active-collapsed;
.@{contenticon} {
color: @menu-item-deep-0-color-active-collapsed;
}
}
.hover() {
&:hover {
color: @menu-item-color-hover;
background: @menu-item-bg-hover;
}
}
.hover--ghost() {
&:hover {
color: #fff;
background: none;
}
}
.flex-center() {
display: flex;
align-items: center;
}
.ten-menu {
position: relative;
font-size: @font-size-base;
background-color: #fff;
&-nav {
.clearfix();
}
}
// 菜单项
.ten-menu-item {
position: relative;
cursor: pointer;
white-space: nowrap;
width: 100%;
float: left;
user-select: none;
&__content {
.flex-center();
position: relative;
transition: background-color .2s;
padding: (@menu-item-deep-0-height-vertical - @menu-item-content-height-vertical) / 2 0;
.@{contentinner} {
width: 100%;
padding: @menu-item-content-padding-vertical;
line-height: @menu-item-content-height-vertical;
height: @menu-item-content-height-vertical;
color: @text-color-lighter-1;
.hover;
&:hover .@{contenticon} {
color: @menu-item-color-hover;
}
}
&-icon {
font-size: 20px;
line-height: 20px;
color: @icon-color;
.ten-icon {
margin-left: 2px;
margin-right: 14px;
vertical-align: middle;
}
}
&-carret {
display: block;
position: absolute;
right: @menu-submenu-carret-right-vertical;
top: 50%;
transform: translateY(-50%);
transition: transform .2s;
color: @icon-color;
}
&--expanded &-carret {
transform: translateY(-50%) rotate(180deg);
}
&.@{content}--selected .@{contentinner} {
background: @menu-item-bg-active;
color: @menu-item-color-active;
.@{contenticon} {
color: @menu-item-color-active;
}
}
}
&--paddingdeep {
&-1 {
.@{contentinner} {
padding-left: 56px;
}
}
&-2 .@{contentinner} {
padding-left: 72px;
}
&-3 .@{contentinner} {
padding-left: 92px;
}
}
}
// vertical
.ten-menu--vertical {
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
width: @menu-width-vertical;
&--collapsable {
padding-bottom: 48px;
transition: width .2s;
}
.ten-menu-header {
flex: none;
}
.ten-menu-nav {
flex: 1;
padding: @menu-padding-vertical;
height: 100%;
overflow-y: auto;
}
.@{content} .@{content}-content,
.@{content}-carret {
transition: opacity .2s;
}
.@{content}--childrenselected .@{contentinner} {
.deep-0-collapse-selected();
}
// 垂直模式-折叠
&--collapsed {
width: @menu-collapsed-width-vertical ;
overflow: hidden;
.ten-menu-nav {
padding: 0;
overflow: visible;
}
.@{item}--deep-0 {
z-index: 1;
&.@{item}--hoverexpanded {
z-index: 2;
box-shadow: @shadow-level-1;
}
>.@{content} {
padding: (@menu-item-deep-0-height-vertical - @menu-item-content-height-vertical) / 2 16px;
// background: #fff;
z-index: 1;
&--childrenselected .@{contentinner},
&--selected .@{contentinner} {
.deep-0-collapse-selected();
}
}
>.@{content} .@{content}-content,
>.@{content} .@{content}-carret {
opacity: 0;
}
>.@{submenu} {
// display: block !important;
position: absolute;
z-index: 0;
top: 0;
left: @menu-collapsed-width-vertical;
width: @menu-collapsed-submenu-width-vertical;
padding: 3px 16px;
background: #fff;
box-shadow: @shadow-level-1;
}
}
}
&--collapsed&--collapse-all {
width: 0;
}
&--aftercollapsed {
overflow: visible;
.@{item}--deep-0>.@{content} .@{content}-content,
.@{item}--deep-0>.@{content} .@{content}-carret {
display: none;
}
&.ten-menu--vertical--collapse-all {
.ten-menu-header {
display: none;
}
.@{item}--deep-0>.@{content},
.@{item}--deep-0>.@{content} {
display: none;
}
.ten-menu__footer {
width: 56px;
right: 0;
.ten-menu__footer-carret {
right: 21px;
transition: none;
}
}
}
}
&--collapsing {
overflow: hidden;
.ten-menu-nav {
overflow: hidden
}
}
}
// footer {
.ten-menu__footer {
flex: none;
position: absolute;
z-index: 1;
left: 0;
bottom: 0;
width: 100%;
height: @menu-footer-height;
border-top: #F0F0F0 1px dashed;
// background: #fff;
// position: relative;
overflow: hidden;
cursor: pointer;
&-carret {
display: block;
font-size: 16px;
position: absolute;
top: @menu-footer-top;
right: 16px;
transition: all .4s ease-in-out;
color: @icon-color;
}
&--collapsed {
width: 100%;
.ten-menu__footer-carret {
right: @menu-footer-right;
transform: rotateY(180deg);
}
}
}
// horizontal
.ten-menu--horizontal {
.ten-menu-header {
float: left;
height: @menu-item-height-horizontal;
line-height: @menu-item-height-horizontal - 2px;
width: auto;
}
.@{item} {
&--deep-0 {
float: left;
margin: 0;
width: auto;
>.@{content} {
padding: 0;
}
>.@{content} .@{contentinner} {
padding: 0 24px;
line-height: @menu-item-height-horizontal;
height: @menu-item-height-horizontal;
border-bottom: 2px solid transparent;
}
>.@{content} .@{content}-carret {
right: @menu-submenu-carret-right-horizontal;
}
&.@{item}--ismenu>.@{content} .@{contentinner} {
padding-right: 50px;
}
>.@{content} {
&--childrenselected .@{contentinner},
&--selected>.@{contentinner} {
.deep-0-collapse-selected();
border-bottom: 2px solid @primary-color;
}
}
>.@{submenu} {
// display: block !important;
position: absolute;
z-index: 0;
top: 100%;
left: 0;
width: @menu-collapsed-submenu-width-vertical;
padding: 3px 16px;
background: #fff;
box-shadow: @shadow-level-1;
}
}
}
}
// theme
.ten-menu--theme-ghost.ten-menu {
background: none;
.@{item}--deep-0 {
>.@{content} {
.@{contentinner} {
color: @text-color-white-lighter-2;
background: none;
.hover--ghost;
}
&--selected .@{contentinner},
&--childrenselected .@{contentinner} {
// color: @primary-color;
background: none;
}
}
.@{item}--deep-1 {
>.@{content} {
&--childrenselected .@{contentinner} {
color: @primary-color;
background: none;
}
}
}
}
&.ten-menu--horizontal {
.@{item}--deep-0 {
>.@{content} {
&--childrenselected .@{contentinner},
&--selected>.@{contentinner} {
border-bottom: 2px solid #fff;
}
}
}
}
}