_dropdown.scss 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132
  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. /* Add fade animation to dropdown menus by appending
  43. the class .animated-dropdown-menu to the .dropdown-menu ul (or ol)*/
  44. .open:not(.dropup) > .animated-dropdown-menu {
  45. backface-visibility: visible !important;
  46. @include animation(flipInX .7s both);
  47. }
  48. @keyframes flipInX {
  49. 0% {
  50. transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
  51. transition-timing-function: ease-in;
  52. opacity: 0;
  53. }
  54. 40% {
  55. transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
  56. transition-timing-function: ease-in;
  57. }
  58. 60% {
  59. transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
  60. opacity: 1;
  61. }
  62. 80% {
  63. transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  64. }
  65. 100% {
  66. transform: perspective(400px);
  67. }
  68. }
  69. @-webkit-keyframes flipInX {
  70. 0% {
  71. -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
  72. -webkit-transition-timing-function: ease-in;
  73. opacity: 0;
  74. }
  75. 40% {
  76. -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
  77. -webkit-transition-timing-function: ease-in;
  78. }
  79. 60% {
  80. -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
  81. opacity: 1;
  82. }
  83. 80% {
  84. -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  85. }
  86. 100% {
  87. -webkit-transform: perspective(400px);
  88. }
  89. }
  90. /* Fix dropdown menu in navbars */
  91. .navbar-custom-menu > .navbar-nav {
  92. > li {
  93. position: relative;
  94. > .dropdown-menu {
  95. position: absolute;
  96. right: 0;
  97. left: auto;
  98. }
  99. }
  100. }
  101. @include media-breakpoint-down(sm) {
  102. .navbar-custom-menu > .navbar-nav {
  103. float: right;
  104. > li {
  105. position: static;
  106. > .dropdown-menu {
  107. position: absolute;
  108. right: 5%;
  109. left: auto;
  110. border: 1px solid #ddd;
  111. background: $white;
  112. }
  113. }
  114. }
  115. }