csit.infra.dash/app/pal/static/sass/bootstrap/_dropdown.scss

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