_dropdown.scss 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139
  1. /*
  2. * Component: Dropdown menus
  3. * -------------------------
  4. */
  5. // General Dropdown Rules
  6. .dropdown-item {
  7. &:first-of-type {
  8. @include border-top-radius($border-radius);
  9. }
  10. &:last-of-type {
  11. @include border-bottom-radius($border-radius);
  12. }
  13. }
  14. .dropdown-item-title {
  15. font-size: $font-size-base;
  16. margin: 0;
  17. }
  18. // Dropdown Sizes
  19. .dropdown-menu-lg {
  20. min-width: 280px;
  21. max-width: 300px;
  22. padding: 0;
  23. .dropdown-divider {
  24. margin: 0;
  25. }
  26. .dropdown-item {
  27. padding: $dropdown-padding-y $dropdown-item-padding-x;
  28. }
  29. p {
  30. white-space: normal;
  31. margin: 0;
  32. }
  33. }
  34. // Dropdown header and footer
  35. .dropdown-footer,
  36. .dropdown-header {
  37. text-align: center;
  38. display: block;
  39. padding: .5rem $dropdown-item-padding-x;
  40. font-size: $font-size-sm;
  41. }
  42. .dropdown-header {
  43. &:hover {
  44. background-color: #fff;
  45. color: $gray-200;
  46. }
  47. }
  48. /* Add fade animation to dropdown menus by appending
  49. the class .animated-dropdown-menu to the .dropdown-menu ul (or ol)*/
  50. .open:not(.dropup) > .animated-dropdown-menu {
  51. backface-visibility: visible !important;
  52. @include animation(flipInX .7s both);
  53. }
  54. @keyframes flipInX {
  55. 0% {
  56. transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
  57. transition-timing-function: ease-in;
  58. opacity: 0;
  59. }
  60. 40% {
  61. transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
  62. transition-timing-function: ease-in;
  63. }
  64. 60% {
  65. transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
  66. opacity: 1;
  67. }
  68. 80% {
  69. transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  70. }
  71. 100% {
  72. transform: perspective(400px);
  73. }
  74. }
  75. @-webkit-keyframes flipInX {
  76. 0% {
  77. -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
  78. -webkit-transition-timing-function: ease-in;
  79. opacity: 0;
  80. }
  81. 40% {
  82. -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
  83. -webkit-transition-timing-function: ease-in;
  84. }
  85. 60% {
  86. -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
  87. opacity: 1;
  88. }
  89. 80% {
  90. -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  91. }
  92. 100% {
  93. -webkit-transform: perspective(400px);
  94. }
  95. }
  96. /* Fix dropdown menu in navbars */
  97. .navbar-custom-menu > .navbar-nav {
  98. > li {
  99. position: relative;
  100. > .dropdown-menu {
  101. position: absolute;
  102. right: 0;
  103. left: auto;
  104. }
  105. }
  106. }
  107. @media (max-width: map-get($grid-breakpoints, sm)) {
  108. .navbar-custom-menu > .navbar-nav {
  109. float: right;
  110. > li {
  111. position: static;
  112. > .dropdown-menu {
  113. position: absolute;
  114. right: 5%;
  115. left: auto;
  116. border: 1px solid #ddd;
  117. background: #fff;
  118. }
  119. }
  120. }
  121. }