[Summary view] [Print] [Text view]

   1  // The dropdown wrapper (`<div>`)
   2  .dropup,
   3  .dropright,
   4  .dropdown,
   5  .dropleft {
   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    top: 100%;
  20    left: 0;
  21    z-index: $zindex-dropdown;
  22    display: none; // none by default, but block on "open" of the menu
  23    float: left;
  24    min-width: $dropdown-min-width;
  25    padding: $dropdown-padding-y 0;
  26    margin: $dropdown-spacer 0 0; // override default ul
  27    @include font-size($dropdown-font-size);
  28    color: $dropdown-color;
  29    text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
  30    list-style: none;
  31    background-color: $dropdown-bg;
  32    background-clip: padding-box;
  33    border: $dropdown-border-width solid $dropdown-border-color;
  34    @include border-radius($dropdown-border-radius);
  35    @include box-shadow($dropdown-box-shadow);
  36  }
  37  
  38  @each $breakpoint in map-keys($grid-breakpoints) {
  39    @include media-breakpoint-up($breakpoint) {
  40      $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
  41  
  42      .dropdown-menu#{$infix}-left {
  43        right: auto;
  44        left: 0;
  45      }
  46  
  47      .dropdown-menu#{$infix}-right {
  48        right: 0;
  49        left: auto;
  50      }
  51    }
  52  }
  53  
  54  // Allow for dropdowns to go bottom up (aka, dropup-menu)
  55  // Just add .dropup after the standard .dropdown class and you're set.
  56  .dropup {
  57    .dropdown-menu {
  58      top: auto;
  59      bottom: 100%;
  60      margin-top: 0;
  61      margin-bottom: $dropdown-spacer;
  62    }
  63  
  64    .dropdown-toggle {
  65      @include caret(up);
  66    }
  67  }
  68  
  69  .dropright {
  70    .dropdown-menu {
  71      top: 0;
  72      right: auto;
  73      left: 100%;
  74      margin-top: 0;
  75      margin-left: $dropdown-spacer;
  76    }
  77  
  78    .dropdown-toggle {
  79      @include caret(right);
  80      &::after {
  81        vertical-align: 0;
  82      }
  83    }
  84  }
  85  
  86  .dropleft {
  87    .dropdown-menu {
  88      top: 0;
  89      right: 100%;
  90      left: auto;
  91      margin-top: 0;
  92      margin-right: $dropdown-spacer;
  93    }
  94  
  95    .dropdown-toggle {
  96      @include caret(left);
  97      &::before {
  98        vertical-align: 0;
  99      }
 100    }
 101  }
 102  
 103  // When enabled Popper.js, reset basic dropdown position
 104  // stylelint-disable-next-line no-duplicate-selectors
 105  .dropdown-menu {
 106    &[x-placement^="top"],
 107    &[x-placement^="right"],
 108    &[x-placement^="bottom"],
 109    &[x-placement^="left"] {
 110      right: auto;
 111      bottom: auto;
 112    }
 113  }
 114  
 115  // Dividers (basically an `<hr>`) within the dropdown
 116  .dropdown-divider {
 117    @include nav-divider($dropdown-divider-bg, $dropdown-divider-margin-y, true);
 118  }
 119  
 120  // Links, buttons, and more within the dropdown menu
 121  //
 122  // `<button>`-specific styles are denoted with `// For <button>s`
 123  .dropdown-item {
 124    display: block;
 125    width: 100%; // For `<button>`s
 126    padding: $dropdown-item-padding-y $dropdown-item-padding-x;
 127    clear: both;
 128    font-weight: $font-weight-normal;
 129    color: $dropdown-link-color;
 130    text-align: inherit; // For `<button>`s
 131    text-decoration: if($link-decoration == none, null, none);
 132    white-space: nowrap; // prevent links from randomly breaking onto new lines
 133    background-color: transparent; // For `<button>`s
 134    border: 0; // For `<button>`s
 135  
 136    // Prevent dropdown overflow if there's no padding
 137    // See https://github.com/twbs/bootstrap/pull/27703
 138    @if $dropdown-padding-y == 0 {
 139      &:first-child {
 140        @include border-top-radius($dropdown-inner-border-radius);
 141      }
 142  
 143      &:last-child {
 144        @include border-bottom-radius($dropdown-inner-border-radius);
 145      }
 146    }
 147  
 148    @include hover-focus() {
 149      color: $dropdown-link-hover-color;
 150      text-decoration: none;
 151      @include gradient-bg($dropdown-link-hover-bg);
 152    }
 153  
 154    &.active,
 155    &:active {
 156      color: $dropdown-link-active-color;
 157      text-decoration: none;
 158      @include gradient-bg($dropdown-link-active-bg);
 159    }
 160  
 161    &.disabled,
 162    &:disabled {
 163      color: $dropdown-link-disabled-color;
 164      pointer-events: none;
 165      background-color: transparent;
 166      // Remove CSS gradients if they're enabled
 167      @if $enable-gradients {
 168        background-image: none;
 169      }
 170    }
 171  }
 172  
 173  .dropdown-menu.show {
 174    display: block;
 175  }
 176  
 177  // Dropdown section headers
 178  .dropdown-header {
 179    display: block;
 180    padding: $dropdown-header-padding;
 181    margin-bottom: 0; // for use with heading elements
 182    @include font-size($font-size-sm);
 183    color: $dropdown-header-color;
 184    white-space: nowrap; // as with > li > a
 185  }
 186  
 187  // Dropdown text
 188  .dropdown-item-text {
 189    display: block;
 190    padding: $dropdown-item-padding-y $dropdown-item-padding-x;
 191    color: $dropdown-link-color;
 192  }