polestar-ui-kit
Version:
## Install
519 lines (479 loc) • 20.9 kB
text/less
/**
* Polestar CSS
*/
@import '../../themes/default/index';
@import '../../mixins/index';
@keyframes slide-down {
0% {
opacity: 0;
transform-origin: 0% 0%;
transform: scaleY(.8);
}
100% {
opacity: 1;
transform-origin: 0% 0%;
transform: scaleY(1);
}
}
@-webkit-keyframes slide-down {
0% {
opacity: 0;
transform-origin: 0% 0%;
transform: scaleY(.8);
}
100% {
opacity: 1;
transform-origin: 0% 0%;
transform: scaleY(1);
}
}
@-moz-keyframes slide-down {
0% {
opacity: 0;
transform-origin: 0% 0%;
transform: scaleY(.8);
}
100% {
opacity: 1;
transform-origin: 0% 0%;
transform: scaleY(1);
}
}
@keyframes slide-up {
0% {
opacity: 1;
transform-origin: 0% 0%;
transform: scaleY(1);
}
100% {
opacity: 0;
transform-origin: 0% 0%;
transform: scaleY(.8);
}
}
@-webkit-keyframes slide-up {
0% {
opacity: 1;
transform-origin: 0% 0%;
transform: scaleY(1);
}
100% {
opacity: 0;
transform-origin: 0% 0%;
transform: scaleY(.8);
}
}
@-moz-keyframes slide-up {
0% {
opacity: 1;
transform-origin: 0% 0%;
transform: scaleY(1);
}
100% {
opacity: 0;
transform-origin: 0% 0%;
transform: scaleY(.8);
}
}
.@{mega-prefix-cls} {
position: relative;
line-height: 50px;
> ul {
margin: 0;
list-style: none;
white-space: nowrap;
background: @gray-1;
> li {
display: inline-block;
margin: 0 0 0 0;
.font-noto();
font-size: @font-size-lg1;
&:hover {
> a {
background: @gray-2;
color: @primary-6;
}
}
> i {
padding: 0 0 0 5px;
color: @primary-2 ;
}
> a {
display: inline-block;
padding: 0 20px;
color: rgba(0, 0, 0, 0.65);
text-align: center;
text-decoration: none;
}
> .@{mega-prefix-cls}-menu.@{mega-prefix-cls}-menu-hidden {
//display: block !important;
//MegaMenu IE버그 문제로 주석처리
// animation: slide-up 1s ease-out;
// -webkit-animation: slide-up 1s ease-out;
// -moz-animation: slide-up 1s ease-out;
// -o-animation: slide-up 1s ease-out;
//
// -webkit-animation-play-state: running;
// -o-animation-play-state: running;
//
// -moz-transition-duration: 0.3s;
// -webkit-transition-duration: 0.3s;
// -o-transition-duration: 0.3s;
// transition-duration: 0.3s;
//
// -moz-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
// -webkit-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
// -o-transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
// transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
}
@media all and (min-width:768px) and (max-width:1200px) {
> .@{mega-prefix-cls}-menu.@{mega-prefix-cls}-menu-has-children {
width: 30% ;
}
}
@media all and (min-width:1201px) and (max-width:1300px) {
> .@{mega-prefix-cls}-menu.@{mega-prefix-cls}-menu-has-children {
width: 36% ;
}
}
@media all and (min-width:1301px) and (max-width:1400px) {
> .@{mega-prefix-cls}-menu.@{mega-prefix-cls}-menu-has-children {
width: 40% ;
}
}
@media all and (min-width:1401px) and (max-width:1500px) {
> .@{mega-prefix-cls}-menu.@{mega-prefix-cls}-menu-has-children {
width: 47% ;
}
}
@media all and (min-width:1501px) and (max-width:1920px) {
> .@{mega-prefix-cls}-menu.@{mega-prefix-cls}-menu-has-children {
width: 50% ;
}
}
> .@{mega-prefix-cls}-menu.@{mega-prefix-cls}-menu-has-children {
width: 37%; /*해상도 1200 이하는 fix*/
//max-width: 600px;
min-width: 20%;
display: block;
// animation: slide-down 0.3s ease-out;
// -webkit-animation: slide-down 0.3s ease-out;
// -moz-animation: slide-down 0.3s ease-out;
}
> .@{mega-prefix-cls}-menu.@{mega-prefix-cls}-menu-has-config {
//display: block !important;
// animation: slide-down 0.5s ease-out;
// -webkit-animation: slide-down 0.5s ease-out;
// -moz-animation: slide-down 0.5s ease-out;
> .@{mega-prefix-cls}-menu-container {
> ul {
> li {
// animation: slide-down 0.5s ease-out;
// -webkit-animation: slide-down 0.5s ease-out;
// -moz-animation: slide-down 0.5s ease-out;
font-family: @font-family;
font-weight: 400;
font-size: @font-size-base;
> .@{mega-prefix-cls}-menu-sub-container {
height: calc(100% ~'-' 29px);
background: @white;
}
}
}
}
}
> .@{mega-prefix-cls}-menu {
list-style: none;
display: block;
z-index: 1100;
min-width: 180px;
//width: 100%;
padding: 0;
margin: 0;
background: @white;
position: absolute;
//top: 100%;
//top: 51px;
top: 50px;
overflow: visible;
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
border: @border-width-base @border-style-base @primary-3;
border-radius: @border-radius-base;
line-height: 30px;
//MegaMenu IE버그 문제로 주석처리//
// animation: slide-down 0.05s ease-out;
// -webkit-animation: slide-down 0.05s ease-out;
// -moz-animation: slide-down 0.05s ease-out;
// -o-animation: slide-down 0.05s ease-out;
//
// transition-duration: 0.05s;
// -webkit-transition-duration: 0.05s;
// -moz-transition-duration: 0.05s;
// -o-transition-duration: 0.05s;
//
// transition-timing-function: ease-out;
// -webkit-transition-timing-function: ease-out;
// -moz-transition-timing-function: ease-out;
// -o-transition-timing-function: ease-out;
//
// animation-name: antSlideUpIn;
// -webkit-animation-name: antSlideUpIn;
// -moz-animation-name: antSlideUpIn;
// -o-animation-name: antSlideUpIn;
> .@{mega-prefix-cls}-menu-container {
> ul {
list-style: none;
// overflow-y: auto;
//max-width: 677px;
min-height: 300px;
height: 100%;
width: 180px;
// padding: 5px 10px 10px 20px;
// border-right: solid 1px #333;
> li {
display: block;
float: none;
width: auto;
margin: 0;
font-family: @font-family;
font-size: @font-size-base;
&:hover {
background: @primary-1;
}
> a {
display: block;
width: auto;
color: @gray-6;
padding: 5px 10px 3px 20px;
&:hover {
color: @primary-color;
}
> i {
display: block;
float: right;
padding: 7px 0 0 0;
}
/*Firefox 크로스브라우징*/
@-moz-document url-prefix() {
> i {
position: relative;
bottom: 30px;
}
}
}
> .@{mega-prefix-cls}-menu-sub-container {
//display: block;
position: absolute;
width: calc(100% ~ '-' 180px);
//height: calc(100% ~'-' 29px);
top: 0;
right: 0;
bottom: 0;
background-color: @white;
display: none;
border-left: @border-width-base @border-style-base @primary-3;
animation: slide-right 0.1s ease-out;
-webkit-animation: slide-right 0.1s ease-out;
-moz-animation: slide-right 0.1s ease-out;
/* 애니메이션 */
// animation: slide-down 0.1s ease-out;
// -webkit-animation: slide-down 0.1s ease-out;
// -moz-animation: slide-down 0.1s ease-out;
//
// animation: slide-right 0.05s ease-out;
// -webkit-animation: slide-right 0.05s ease-out;
// -moz-animation: slide-right 0.05s ease-out;
// -o-animation: slide-right 0.05s ease-out;
//
// -moz-transition-duration: 0.05s;
// -webkit-transition-duration: 0.05s;
// -o-transition-duration: 0.05s;
// transition-duration: 0.05s;
//
// -moz-transition-timing-function: ease-in;
// -webkit-transition-timing-function: ease-in;
// -o-transition-timing-function: ease-in;
// transition-timing-function: ease-in;
// animation-name: antSlideLeftIn;
> .sub-menu-title {
color: @primary-color;
.font-noto();
font-size: @font-size-lg;
background: @primary-1;
border-bottom: @border-width-base @border-style-base @primary-3;
padding: 3px 0 3px 20px
}
> 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;
//margin: 0 0 0 20px;
text-align: left;
padding-left: 15px;
> a {
padding: 3px 5px;
color: @gray-6;
font-size: @font-size-base;
&:hover {
background: @primary-1;
color: @primary-color;
}
}
}
}
}
}
}
}
> .@{mega-prefix-cls}-menu-config {
background: @primary-1;
border-top: @border-width-base @border-style-base @primary-3;
border-radius: 0 0 3px 3px;
line-height: 0;
.ps-button {
background: none;
border: none;
color: @primary-color;
font-family: @font-family;
font-size: @font-size-sm;
&:hover {
color: @primary-5;
}
}
.ant-btn-clicked:after {
animation: none;
}
}
}
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
> .@{mega-prefix-cls}-full {
//width: calc(100% ~ '-' 380px);
//border:solid 10px pink !important;
width: 100% ;
left: 0
}
}
@media all and (min-width:768px) and (max-width:1200px) {
> .@{mega-prefix-cls}-menu.@{mega-prefix-cls}-menu-has-children {
width: 30% ;
}
}
> .@{mega-prefix-cls}-full {
list-style: none;
/****collapse full size로 펼쳐주기****/
//display: block !important;
z-index: 1050;
//min-width: 500px;
padding: 0;
margin: 0;
background-color: @white;
position: absolute;
top: 50px;
overflow: visible;
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
border: @border-width-base @border-style-base @primary-3;
border-radius: @border-radius-base;
margin: 0;
// animation: slide-down 0.1s ease-out;
// -webkit-animation: slide-down 0.1s ease-out;
// -moz-animation: slide-down 0.1s ease-out;
> .@{mega-prefix-cls}-menu-container {
padding: 10px 30px 20px 30px;
> 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;
padding: 10px 0 0 0;
> a {
display: none;
&.sub-menu-title {
display: block;
color: @primary-6;
.font-noto();
font-size: @font-size-lg;
padding: 0 0 0 10px;
// text-transform: uppercase;
line-height: 28px;
border-left: @border-width-base2 @border-style-base @primary-5;
}
}
> .ps-mega-menu-sub-container {
display: block;
> .sub-menu-title {
margin: 0;
color: @primary-6;
.font-noto();
font-size: @font-size-lg;
padding: 0 0 0 10px;
// text-transform: uppercase;
line-height: 28px;
border-left: @border-width-base2 @border-style-base @primary-5;
}
> ul {
list-style: none;
padding: 0 0 0 7px;
margin: 0;
border-left: @border-width-base2 @border-style-base @primary-2;
line-height: 32px;
font-family: @font-family;
> li {
display: list-item;
text-align: -webkit-match-parent;
> a {
padding: 3px;
color: @gray-6;
font-size: @font-size-base;
&:hover {
background: @primary-1;
color: @primary-color;
}
}
}
}
}
}
}
}
> .@{mega-prefix-cls}-menu-config {
background: @primary-1;
border-top: @border-width-base @border-style-base @primary-3;
border-radius: 0 0 3px 3px;
line-height: 0;
.ps-button {
background: none;
border: none;
color: @primary-color;
font-family: @font-family;
font-size: @font-size-sm;
&:hover {
color: @primary-5;
}
}
.ant-btn-clicked:after {
animation: none;
}
}
}
}
}
}