_dropdown.scss 2.6KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104
  1. // The dropdown wrapper (`<div>`)
  2. .dropup,
  3. .dropdown {
  4. position: relative;
  5. }
  6. .dropdown-toggle {
  7. // Generate the caret automatically
  8. @include caret;
  9. }
  10. // The dropdown menu
  11. .dropdown-menu {
  12. position: absolute;
  13. top: 100%;
  14. left: 0;
  15. z-index: $zindex-dropdown;
  16. display: none; // none by default, but block on "open" of the menu
  17. float: left;
  18. min-width: $dropdown-min-width;
  19. padding: $dropdown-padding-y 0;
  20. margin: $dropdown-spacer 0 0; // override default ul
  21. font-size: $font-size-base; // Redeclare because nesting can cause inheritance issues
  22. color: $body-color;
  23. text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
  24. list-style: none;
  25. background-color: $dropdown-bg;
  26. background-clip: padding-box;
  27. border: $dropdown-border-width solid $dropdown-border-color;
  28. @include border-radius($border-radius);
  29. @include box-shadow($dropdown-box-shadow);
  30. }
  31. // Allow for dropdowns to go bottom up (aka, dropup-menu)
  32. // Just add .dropup after the standard .dropdown class and you're set.
  33. .dropup {
  34. .dropdown-menu {
  35. margin-top: 0;
  36. margin-bottom: $dropdown-spacer;
  37. }
  38. .dropdown-toggle {
  39. @include caret(up);
  40. }
  41. }
  42. // Dividers (basically an `<hr>`) within the dropdown
  43. .dropdown-divider {
  44. @include nav-divider($dropdown-divider-bg);
  45. }
  46. // Links, buttons, and more within the dropdown menu
  47. //
  48. // `<button>`-specific styles are denoted with `// For <button>s`
  49. .dropdown-item {
  50. display: block;
  51. width: 100%; // For `<button>`s
  52. padding: $dropdown-item-padding-y $dropdown-item-padding-x;
  53. clear: both;
  54. font-weight: $font-weight-normal;
  55. color: $dropdown-link-color;
  56. text-align: inherit; // For `<button>`s
  57. white-space: nowrap; // prevent links from randomly breaking onto new lines
  58. background: none; // For `<button>`s
  59. border: 0; // For `<button>`s
  60. @include hover-focus {
  61. color: $dropdown-link-hover-color;
  62. text-decoration: none;
  63. @include gradient-bg($dropdown-link-hover-bg);
  64. }
  65. &.active,
  66. &:active {
  67. color: $dropdown-link-active-color;
  68. text-decoration: none;
  69. @include gradient-bg($dropdown-link-active-bg);
  70. }
  71. &.disabled,
  72. &:disabled {
  73. color: $dropdown-link-disabled-color;
  74. background-color: transparent;
  75. // Remove CSS gradients if they're enabled
  76. @if $enable-gradients {
  77. background-image: none;
  78. }
  79. }
  80. }
  81. .dropdown-menu.show {
  82. display: block;
  83. }
  84. // Dropdown section headers
  85. .dropdown-header {
  86. display: block;
  87. padding: $dropdown-padding-y $dropdown-item-padding-x;
  88. margin-bottom: 0; // for use with heading elements
  89. font-size: $font-size-sm;
  90. color: $dropdown-header-color;
  91. white-space: nowrap; // as with > li > a
  92. }