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