src/scss/bootstrap-4.0.0-alpha.6/scss/_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   &::after {
  10     display: inline-block;
  11     width: 0;
  12     height: 0;
  13     margin-left: $caret-width;
  14     vertical-align: middle;
  15     content: "";
  16     border-top: $caret-width solid;
  17     border-right: $caret-width solid transparent;
  18     border-left: $caret-width solid transparent;
  19   }
  20
  21   // Prevent the focus on the dropdown toggle when closing dropdowns
  22   &:focus {
  23     outline: 0;
  24   }
  25 }
  26
  27 .dropup {
  28   .dropdown-toggle {
  29     &::after {
  30       border-top: 0;
  31       border-bottom: $caret-width solid;
  32     }
  33   }
  34 }
  35
  36 // The dropdown menu
  37 .dropdown-menu {
  38   position: absolute;
  39   top: 100%;
  40   left: 0;
  41   z-index: $zindex-dropdown;
  42   display: none; // none by default, but block on "open" of the menu
  43   float: left;
  44   min-width: $dropdown-min-width;
  45   padding: $dropdown-padding-y 0;
  46   margin: $dropdown-margin-top 0 0; // override default ul
  47   font-size: $font-size-base; // Redeclare because nesting can cause inheritance issues
  48   color: $body-color;
  49   text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
  50   list-style: none;
  51   background-color: $dropdown-bg;
  52   background-clip: padding-box;
  53   border: $dropdown-border-width solid $dropdown-border-color;
  54   @include border-radius($border-radius);
  55   @include box-shadow($dropdown-box-shadow);
  56 }
  57
  58 // Dividers (basically an `<hr>`) within the dropdown
  59 .dropdown-divider {
  60   @include nav-divider($dropdown-divider-bg);
  61 }
  62
  63 // Links, buttons, and more within the dropdown menu
  64 //
  65 // `<button>`-specific styles are denoted with `// For <button>s`
  66 .dropdown-item {
  67   display: block;
  68   width: 100%; // For `<button>`s
  69   padding: 3px $dropdown-item-padding-x;
  70   clear: both;
  71   font-weight: $font-weight-normal;
  72   color: $dropdown-link-color;
  73   text-align: inherit; // For `<button>`s
  74   white-space: nowrap; // prevent links from randomly breaking onto new lines
  75   background: none; // For `<button>`s
  76   border: 0; // For `<button>`s
  77
  78   @include hover-focus {
  79     color: $dropdown-link-hover-color;
  80     text-decoration: none;
  81     background-color: $dropdown-link-hover-bg;
  82   }
  83
  84   &.active,
  85   &:active {
  86     color: $dropdown-link-active-color;
  87     text-decoration: none;
  88     background-color: $dropdown-link-active-bg;
  89   }
  90
  91   &.disabled,
  92   &:disabled {
  93     color: $dropdown-link-disabled-color;
  94     cursor: $cursor-disabled;
  95     background-color: transparent;
  96     // Remove CSS gradients if they're enabled
  97     @if $enable-gradients {
  98       background-image: none;
  99     }
 100   }
 101 }
 102
 103 // Open state for the dropdown
 104 .show {
 105   // Show the menu
 106   > .dropdown-menu {
 107     display: block;
 108   }
 109
 110   // Remove the outline when :focus is triggered
 111   > a {
 112     outline: 0;
 113   }
 114 }
 115
 116 // Menu positioning
 117 //
 118 // Add extra class to `.dropdown-menu` to flip the alignment of the dropdown
 119 // menu with the parent.
 120 .dropdown-menu-right {
 121   right: 0;
 122   left: auto; // Reset the default from `.dropdown-menu`
 123 }
 124
 125 .dropdown-menu-left {
 126   right: auto;
 127   left: 0;
 128 }
 129
 130 // Dropdown section headers
 131 .dropdown-header {
 132   display: block;
 133   padding: $dropdown-padding-y $dropdown-item-padding-x;
 134   margin-bottom: 0; // for use with heading elements
 135   font-size: $font-size-sm;
 136   color: $dropdown-header-color;
 137   white-space: nowrap; // as with > li > a
 138 }
 139
 140 // Backdrop to catch body clicks on mobile, etc.
 141 .dropdown-backdrop {
 142   position: fixed;
 143   top: 0;
 144   right: 0;
 145   bottom: 0;
 146   left: 0;
 147   z-index: $zindex-dropdown-backdrop;
 148 }
 149
 150 // Allow for dropdowns to go bottom up (aka, dropup-menu)
 151 //
 152 // Just add .dropup after the standard .dropdown class and you're set.
 153
 154 .dropup {
 155   // Different positioning for bottom up menu
 156   .dropdown-menu {
 157     top: auto;
 158     bottom: 100%;
 159     margin-bottom: $dropdown-margin-top;
 160   }
 161 }