[Summary view] [Print] [Text view]

   1  // The dropdown wrapper (`<div>`)
   2  .dropup,
   3  .dropend,
   4  .dropdown,
   5  .dropstart {
   6    position: relative;
   7  }
   8  
   9  .dropdown-toggle {
  10    white-space: nowrap;
  11  
  12    // Generate the caret automatically
  13    @include caret();
  14  }
  15  
  16  // The dropdown menu
  17  .dropdown-menu {
  18    position: absolute;
  19    z-index: $zindex-dropdown;
  20    display: none; // none by default, but block on "open" of the menu
  21    min-width: $dropdown-min-width;
  22    padding: $dropdown-padding-y $dropdown-padding-x;
  23    margin: 0; // Override default margin of ul
  24    @include font-size($dropdown-font-size);
  25    color: $dropdown-color;
  26    text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
  27    list-style: none;
  28    background-color: $dropdown-bg;
  29    background-clip: padding-box;
  30    border: $dropdown-border-width solid $dropdown-border-color;
  31    @include border-radius($dropdown-border-radius);
  32    @include box-shadow($dropdown-box-shadow);
  33  
  34    &[data-bs-popper] {
  35      top: 100%;
  36      left: 0;
  37      margin-top: $dropdown-spacer;
  38    }
  39  }
  40  
  41  // scss-docs-start responsive-breakpoints
  42  // We deliberately hardcode the `bs-` prefix because we check
  43  // this custom property in JS to determine Popper's positioning
  44  
  45  @each $breakpoint in map-keys($grid-breakpoints) {
  46    @include media-breakpoint-up($breakpoint) {
  47      $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
  48  
  49      .dropdown-menu#{$infix}-start {
  50        --bs-position: start;
  51  
  52        &[data-bs-popper] {
  53          right: auto;
  54          left: 0;
  55        }
  56      }
  57  
  58      .dropdown-menu#{$infix}-end {
  59        --bs-position: end;
  60  
  61        &[data-bs-popper] {
  62          right: 0;
  63          left: auto;
  64        }
  65      }
  66    }
  67  }
  68  // scss-docs-end responsive-breakpoints
  69  
  70  // Allow for dropdowns to go bottom up (aka, dropup-menu)
  71  // Just add .dropup after the standard .dropdown class and you're set.
  72  .dropup {
  73    .dropdown-menu[data-bs-popper] {
  74      top: auto;
  75      bottom: 100%;
  76      margin-top: 0;
  77      margin-bottom: $dropdown-spacer;
  78    }
  79  
  80    .dropdown-toggle {
  81      @include caret(up);
  82    }
  83  }
  84  
  85  .dropend {
  86    .dropdown-menu[data-bs-popper] {
  87      top: 0;
  88      right: auto;
  89      left: 100%;
  90      margin-top: 0;
  91      margin-left: $dropdown-spacer;
  92    }
  93  
  94    .dropdown-toggle {
  95      @include caret(end);
  96      &::after {
  97        vertical-align: 0;
  98      }
  99    }
 100  }
 101  
 102  .dropstart {
 103    .dropdown-menu[data-bs-popper] {
 104      top: 0;
 105      right: 100%;
 106      left: auto;
 107      margin-top: 0;
 108      margin-right: $dropdown-spacer;
 109    }
 110  
 111    .dropdown-toggle {
 112      @include caret(start);
 113      &::before {
 114        vertical-align: 0;
 115      }
 116    }
 117  }
 118  
 119  
 120  // Dividers (basically an `<hr>`) within the dropdown
 121  .dropdown-divider {
 122    height: 0;
 123    margin: $dropdown-divider-margin-y 0;
 124    overflow: hidden;
 125    border-top: 1px solid $dropdown-divider-bg;
 126  }
 127  
 128  // Links, buttons, and more within the dropdown menu
 129  //
 130  // `<button>`-specific styles are denoted with `// For <button>s`
 131  .dropdown-item {
 132    display: block;
 133    width: 100%; // For `<button>`s
 134    padding: $dropdown-item-padding-y $dropdown-item-padding-x;
 135    clear: both;
 136    font-weight: $font-weight-normal;
 137    color: $dropdown-link-color;
 138    text-align: inherit; // For `<button>`s
 139    text-decoration: if($link-decoration == none, null, none);
 140    white-space: nowrap; // prevent links from randomly breaking onto new lines
 141    background-color: transparent; // For `<button>`s
 142    border: 0; // For `<button>`s
 143  
 144    // Prevent dropdown overflow if there's no padding
 145    // See https://github.com/twbs/bootstrap/pull/27703
 146    @if $dropdown-padding-y == 0 {
 147      &:first-child {
 148        @include border-top-radius($dropdown-inner-border-radius);
 149      }
 150  
 151      &:last-child {
 152        @include border-bottom-radius($dropdown-inner-border-radius);
 153      }
 154    }
 155  
 156    &:hover,
 157    &:focus {
 158      color: $dropdown-link-hover-color;
 159      text-decoration: if($link-hover-decoration == underline, none, null);
 160      @include gradient-bg($dropdown-link-hover-bg);
 161    }
 162  
 163    &.active,
 164    &:active {
 165      color: $dropdown-link-active-color;
 166      text-decoration: none;
 167      @include gradient-bg($dropdown-link-active-bg);
 168    }
 169  
 170    &.disabled,
 171    &:disabled {
 172      color: $dropdown-link-disabled-color;
 173      pointer-events: none;
 174      background-color: transparent;
 175      // Remove CSS gradients if they're enabled
 176      background-image: if($enable-gradients, none, null);
 177    }
 178  }
 179  
 180  .dropdown-menu.show {
 181    display: block;
 182  }
 183  
 184  // Dropdown section headers
 185  .dropdown-header {
 186    display: block;
 187    padding: $dropdown-header-padding;
 188    margin-bottom: 0; // for use with heading elements
 189    @include font-size($font-size-sm);
 190    color: $dropdown-header-color;
 191    white-space: nowrap; // as with > li > a
 192  }
 193  
 194  // Dropdown text
 195  .dropdown-item-text {
 196    display: block;
 197    padding: $dropdown-item-padding-y $dropdown-item-padding-x;
 198    color: $dropdown-link-color;
 199  }
 200  
 201  // Dark dropdowns
 202  .dropdown-menu-dark {
 203    color: $dropdown-dark-color;
 204    background-color: $dropdown-dark-bg;
 205    border-color: $dropdown-dark-border-color;
 206    @include box-shadow($dropdown-dark-box-shadow);
 207  
 208    .dropdown-item {
 209      color: $dropdown-dark-link-color;
 210  
 211      &:hover,
 212      &:focus {
 213        color: $dropdown-dark-link-hover-color;
 214        @include gradient-bg($dropdown-dark-link-hover-bg);
 215      }
 216  
 217      &.active,
 218      &:active {
 219        color: $dropdown-dark-link-active-color;
 220        @include gradient-bg($dropdown-dark-link-active-bg);
 221      }
 222  
 223      &.disabled,
 224      &:disabled {
 225        color: $dropdown-dark-link-disabled-color;
 226      }
 227    }
 228  
 229    .dropdown-divider {
 230      border-color: $dropdown-dark-divider-bg;
 231    }
 232  
 233    .dropdown-item-text {
 234      color: $dropdown-dark-link-color;
 235    }
 236  
 237    .dropdown-header {
 238      color: $dropdown-dark-header-color;
 239    }
 240  }