tools/side_chain_tool/web/node_modules/bootstrap/scss/_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 .dropdown-menu-right {
  37   right: 0;
  38   left: auto;
  39 }
  40
  41 // Allow for dropdowns to go bottom up (aka, dropup-menu)
  42 // Just add .dropup after the standard .dropdown class and you're set.
  43 .dropup {
  44   .dropdown-menu {
  45     top: auto;
  46     bottom: 100%;
  47     margin-top: 0;
  48     margin-bottom: $dropdown-spacer;
  49   }
  50
  51   .dropdown-toggle {
  52     @include caret(up);
  53   }
  54 }
  55
  56 .dropright {
  57   .dropdown-menu {
  58     top: 0;
  59     right: auto;
  60     left: 100%;
  61     margin-top: 0;
  62     margin-left: $dropdown-spacer;
  63   }
  64
  65   .dropdown-toggle {
  66     @include caret(right);
  67     &::after {
  68       vertical-align: 0;
  69     }
  70   }
  71 }
  72
  73 .dropleft {
  74   .dropdown-menu {
  75     top: 0;
  76     right: 100%;
  77     left: auto;
  78     margin-top: 0;
  79     margin-right: $dropdown-spacer;
  80   }
  81
  82   .dropdown-toggle {
  83     @include caret(left);
  84     &::before {
  85       vertical-align: 0;
  86     }
  87   }
  88 }
  89
  90 // When enabled Popper.js, reset basic dropdown position
  91 // stylelint-disable no-duplicate-selectors
  92 .dropdown-menu {
  93   &[x-placement^="top"],
  94   &[x-placement^="right"],
  95   &[x-placement^="bottom"],
  96   &[x-placement^="left"] {
  97     right: auto;
  98     bottom: auto;
  99   }
 100 }
 101 // stylelint-enable no-duplicate-selectors
 102
 103 // Dividers (basically an `<hr>`) within the dropdown
 104 .dropdown-divider {
 105   @include nav-divider($dropdown-divider-bg);
 106 }
 107
 108 // Links, buttons, and more within the dropdown menu
 109 //
 110 // `<button>`-specific styles are denoted with `// For <button>s`
 111 .dropdown-item {
 112   display: block;
 113   width: 100%; // For `<button>`s
 114   padding: $dropdown-item-padding-y $dropdown-item-padding-x;
 115   clear: both;
 116   font-weight: $font-weight-normal;
 117   color: $dropdown-link-color;
 118   text-align: inherit; // For `<button>`s
 119   white-space: nowrap; // prevent links from randomly breaking onto new lines
 120   background-color: transparent; // For `<button>`s
 121   border: 0; // For `<button>`s
 122
 123   @include hover-focus {
 124     color: $dropdown-link-hover-color;
 125     text-decoration: none;
 126     @include gradient-bg($dropdown-link-hover-bg);
 127   }
 128
 129   &.active,
 130   &:active {
 131     color: $dropdown-link-active-color;
 132     text-decoration: none;
 133     @include gradient-bg($dropdown-link-active-bg);
 134   }
 135
 136   &.disabled,
 137   &:disabled {
 138     color: $dropdown-link-disabled-color;
 139     background-color: transparent;
 140     // Remove CSS gradients if they're enabled
 141     @if $enable-gradients {
 142       background-image: none;
 143     }
 144   }
 145 }
 146
 147 .dropdown-menu.show {
 148   display: block;
 149 }
 150
 151 // Dropdown section headers
 152 .dropdown-header {
 153   display: block;
 154   padding: $dropdown-padding-y $dropdown-item-padding-x;
 155   margin-bottom: 0; // for use with heading elements
 156   font-size: $font-size-sm;
 157   color: $dropdown-header-color;
 158   white-space: nowrap; // as with > li > a
 159 }
 160
 161 // Dropdown text
 162 .dropdown-item-text {
 163   display: block;
 164   padding: $dropdown-item-padding-y $dropdown-item-padding-x;
 165   color: $dropdown-link-color;
 166 }