mirror of https://github.com/ColorlibHQ/AdminLTE
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
139 lines
2.6 KiB
139 lines
2.6 KiB
/*
|
|
* Component: Dropdown menus
|
|
* -------------------------
|
|
*/
|
|
|
|
// General Dropdown Rules
|
|
.dropdown-item {
|
|
&:first-of-type {
|
|
@include border-top-radius($border-radius);
|
|
}
|
|
&:last-of-type {
|
|
@include border-bottom-radius($border-radius);
|
|
}
|
|
}
|
|
|
|
.dropdown-item-title {
|
|
font-size: $font-size-base;
|
|
margin: 0;
|
|
}
|
|
|
|
// Dropdown Sizes
|
|
.dropdown-menu-lg {
|
|
min-width: 280px;
|
|
max-width: 300px;
|
|
padding: 0;
|
|
.dropdown-divider {
|
|
margin: 0;
|
|
}
|
|
.dropdown-item {
|
|
padding: $dropdown-padding-y $dropdown-item-padding-x;
|
|
}
|
|
p {
|
|
white-space: normal;
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
// Dropdown header and footer
|
|
.dropdown-footer,
|
|
.dropdown-header {
|
|
text-align: center;
|
|
display: block;
|
|
padding: .5rem $dropdown-item-padding-x;
|
|
font-size: $font-size-sm;
|
|
}
|
|
|
|
.dropdown-header {
|
|
&:hover {
|
|
background-color: #fff;
|
|
color: $gray-light;
|
|
}
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
}
|
|
}
|
|
} |