polestar-ui-kit
Version:
## Install
211 lines (188 loc) • 7.69 kB
text/less
/**
-----------------
2017-11-22 정현승
-----------------
<< TIP >>
- 대메뉴바의 높이를 조정하려면 .ps-mega-lg-item 의 line-height 값을 조정할 것
- 대메뉴에 마우스를 올렸을 때 화면에 표시되는 중메뉴 컨테이너가 대메뉴바와 분리되게 하려면 @mega-position: static; 으로 변경할 것
*/
@mega-position: relative;
@mega-zIndex: 1;
@mega-cursor: pointer;
@mega-lg-justify-contents: center;
@mega-lg-font-color: @primary-3;
@mega-lg-container-bg: @primary-6;
@mega-lg-inner-bg: transparent;
@mega-lg-font-color-hover: @white;
@mega-lg-bg-hover: @primary-7;
@mega-lg-font-size: @font-size-base;
@mega-md-justify-contents: center;
@mega-md-font-color: @primary-5;
@mega-md-container-bg: @white;
@mega-md-inner-bg: transparent;
@mega-md-font-color-hover: @primary-6;
@mega-md-bg-hover: @primary-1;
@mega-md-font-size: @font-size-lg;
@mega-sm-font-color: @primary-5;
@mega-sm-inner-bg: transparent;
@mega-sm-font-color-hover: @primary-9;
@mega-sm-bg-hover: @primary-2;
@mega-sm-font-size: @font-size-base;
.ps-mega-menu {
// z-index: 30101;
position: relative;
> ul {
margin: 0;
list-style: none;
white-space: nowrap;
> li {
display: inline-block;
margin: 0;
> a {
display: inline-block;
padding: 0 15px;
color: inherit;
font-size: 15px;
text-align: center;
text-transform: uppercase;
// line-height: 40px;
text-decoration: none;
}
>.ps-mega-submenu {
list-style: none;
display: none;
z-index: 1050;
min-width: 100px;
padding: 0;
margin: 0;
background-color: #FFF;
position: absolute;
top: 100%;
overflow: visible;
box-shadow: rgba(0,0,0,.5) 0 3px 4px -1px, rgba(0,0,0,.0980392) 0 4px 5px 0, rgba(0,0,0,.0823529) 0 1px 10px 0;
>.ps-mega-submenu-container {
> ul {
list-style: none;
// overflow-y: auto;
max-width: 677px;
min-height: 300px;
height: 100%;
width: 180px;
padding: 5px 0;
border-right: solid 1px #333;
> li {
margin: 0;
width: auto;
float: none;
display: block;
> a {
display: block;
width: auto;
> i {
display: block;
float: right;
}
}
> .ps-mega-submenu-sub-container {
position: absolute;
width: 366px;
left: 180px;
top: 0;
right: 0;
bottom: 42px;
background-color: #FFF;
display: none;
box-shadow: rgba(0,0,0,.5) 0 3px 4px -1px, rgba(0,0,0,.0980392) 0 4px 5px 0, rgba(0,0,0,.0823529) 0 1px 10px 0;
>.sub-menu-title {
color: #333;
font-size: 16px;
font-weight: bold;
}
> ul {
list-style: none;
padding: 0;
margin: 0;
position: absolute;
left: 0;
width: 100%;
top: 40px;
bottom: 0;
overflow-y: auto;
> li {
float: left;
width: 165px;
}
}
}
}
}
}
}
> .ps-mega-full-menu {
list-style: none;
display: none;
z-index: 1050;
min-width: 165px;
padding: 0;
margin: 0;
background-color: #FFF;
position: absolute;
top: 100%;
overflow: visible;
box-shadow: rgba(0,0,0,.5) 0 3px 4px -1px, rgba(0,0,0,.0980392) 0 4px 5px 0, rgba(0,0,0,.0823529) 0 1px 10px 0;
> .ps-mega-submenu-container {
> ul {
list-style: none;
padding: 0;
// max-width: 677px;
max-height: 654px;
width: 720px;
overflow-y: auto;
display: flex;
flex-wrap: wrap;
> li {
margin: 0 0 15px;
width: 180px;
// float: left;
// display: block;
flex: auto;
> a {
display: none;
}
> a.sub-menu-title {
display: block;
color: #333;
font-size: 16px;
font-weight: bold;
padding: 10px 15px;
text-transform: uppercase;
line-height: 20px;
}
> .ps-mega-submenu-sub-container {
display: block;
>.sub-menu-title {
margin: 0;
color: #333;
font-size: 16px;
font-weight: bold;
padding: 10px 15px;
text-transform: uppercase;
line-height: 20px;
}
> ul {
list-style: none;
padding: 0;
margin: 0;
> li {
display: list-item;
text-align: -webkit-match-parent;
}
}
}
}
}
}
}
}
}
}