100 lines
1.9 KiB
SCSS
100 lines
1.9 KiB
SCSS
/*
|
|
* Component: Dropdown menus
|
|
* -------------------------
|
|
*/
|
|
|
|
.dropdown-menu-lg {
|
|
min-width: 230px;
|
|
.dropdown-footer {
|
|
text-align: center;
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
|
|
/* Add fade animation to dropdown menus by appending
|
|
the class .animated-dropdown-menu to the .dropdown-menu ul (or ol)*/
|
|
.open:not(.dropup) > .animated-dropdown-menu {
|
|
backface-visibility: visible !important;
|
|
@include animation(flipInX .7s both);
|
|
}
|
|
|
|
@keyframes flipInX {
|
|
0% {
|
|
transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
|
|
transition-timing-function: ease-in;
|
|
opacity: 0;
|
|
}
|
|
|
|
40% {
|
|
transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
|
|
transition-timing-function: ease-in;
|
|
}
|
|
|
|
60% {
|
|
transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
|
|
opacity: 1;
|
|
}
|
|
|
|
80% {
|
|
transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
|
|
}
|
|
|
|
100% {
|
|
transform: perspective(400px);
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes flipInX {
|
|
0% {
|
|
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
|
|
-webkit-transition-timing-function: ease-in;
|
|
opacity: 0;
|
|
}
|
|
|
|
40% {
|
|
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
|
|
-webkit-transition-timing-function: ease-in;
|
|
}
|
|
|
|
60% {
|
|
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
|
|
opacity: 1;
|
|
}
|
|
|
|
80% {
|
|
-webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: perspective(400px);
|
|
}
|
|
}
|
|
|
|
/* Fix dropdown menu in navbars */
|
|
.navbar-custom-menu > .navbar-nav {
|
|
> li {
|
|
position: relative;
|
|
> .dropdown-menu {
|
|
position: absolute;
|
|
right: 0;
|
|
left: auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (max-width: map-get($grid-breakpoints, sm)) {
|
|
.navbar-custom-menu > .navbar-nav {
|
|
float: right;
|
|
> li {
|
|
position: static;
|
|
> .dropdown-menu {
|
|
position: absolute;
|
|
right: 5%;
|
|
left: auto;
|
|
border: 1px solid #ddd;
|
|
background: #fff;
|
|
}
|
|
}
|
|
}
|
|
} |