git.roojs.org Git - roojs1/blob - scss/bootstrap/_dropdown.scss

   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 $dropdown-padding-x;
  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 Popper is enabled, reset the 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 }