portal-FE-common/src/styles/bootstrap/_dropdown.scss

   1 // The dropdown wrapper (`<div>`)
   2 .dropup,
   3 .dropdown {
   4   position: relative;
   5 }
   6
   7 .dropdown-toggle {
   8   // Generate the caret automatically
   9   @include caret;
  10 }
  11
  12 // The dropdown menu
  13 .dropdown-menu {
  14   position: absolute;
  15   top: 100%;
  16   left: 0;
  17   z-index: $zindex-dropdown;
  18   display: none; // none by default, but block on "open" of the menu
  19   float: left;
  20   min-width: $dropdown-min-width;
  21   padding: $dropdown-padding-y 0;
  22   margin: $dropdown-spacer 0 0; // override default ul
  23   font-size: $font-size-base; // Redeclare because nesting can cause inheritance issues
  24   color: $body-color;
  25   text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
  26   list-style: none;
  27   background-color: $dropdown-bg;
  28   background-clip: padding-box;
  29   border: $dropdown-border-width solid $dropdown-border-color;
  30   @include border-radius($dropdown-border-radius);
  31   @include box-shadow($dropdown-box-shadow);
  32 }
  33
  34 // Allow for dropdowns to go bottom up (aka, dropup-menu)
  35 // Just add .dropup after the standard .dropdown class and you're set.
  36 .dropup {
  37   .dropdown-menu {
  38     margin-top: 0;
  39     margin-bottom: $dropdown-spacer;
  40   }
  41
  42   .dropdown-toggle {
  43     @include caret(up);
  44   }
  45 }
  46
  47 .dropright {
  48   .dropdown-menu {
  49     margin-top: 0;
  50     margin-left: $dropdown-spacer;
  51   }
  52
  53   .dropdown-toggle {
  54     @include caret(right);
  55     &::after {
  56       vertical-align: 0;
  57     }
  58   }
  59 }
  60
  61 .dropleft {
  62   .dropdown-menu {
  63     margin-top: 0;
  64     margin-right: $dropdown-spacer;
  65   }
  66
  67   .dropdown-toggle {
  68     @include caret(left);
  69     &::before {
  70       vertical-align: 0;
  71     }
  72   }
  73 }
  74
  75 // Dividers (basically an `<hr>`) within the dropdown
  76 .dropdown-divider {
  77   @include nav-divider($dropdown-divider-bg);
  78 }
  79
  80 // Links, buttons, and more within the dropdown menu
  81 //
  82 // `<button>`-specific styles are denoted with `// For <button>s`
  83 .dropdown-item {
  84   display: block;
  85   width: 100%; // For `<button>`s
  86   padding: $dropdown-item-padding-y $dropdown-item-padding-x;
  87   clear: both;
  88   font-weight: $font-weight-normal;
  89   color: $dropdown-link-color;
  90   text-align: inherit; // For `<button>`s
  91   white-space: nowrap; // prevent links from randomly breaking onto new lines
  92   background-color: transparent; // For `<button>`s
  93   border: 0; // For `<button>`s
  94
  95   @include hover-focus {
  96     color: $dropdown-link-hover-color;
  97     text-decoration: none;
  98     @include gradient-bg($dropdown-link-hover-bg);
  99   }
 100
 101   &.active,
 102   &:active {
 103     color: $dropdown-link-active-color;
 104     text-decoration: none;
 105     @include gradient-bg($dropdown-link-active-bg);
 106   }
 107
 108   &.disabled,
 109   &:disabled {
 110     color: $dropdown-link-disabled-color;
 111     background-color: transparent;
 112     // Remove CSS gradients if they're enabled
 113     @if $enable-gradients {
 114       background-image: none;
 115     }
 116   }
 117 }
 118
 119 .dropdown-menu.show {
 120   display: block;
 121 }
 122
 123 // Dropdown section headers
 124 .dropdown-header {
 125   display: block;
 126   padding: $dropdown-padding-y $dropdown-item-padding-x;
 127   margin-bottom: 0; // for use with heading elements
 128   font-size: $font-size-sm;
 129   color: $dropdown-header-color;
 130   white-space: nowrap; // as with > li > a
 131 }