resources/scss/bootstrap/_dropdowns.scss

   1 //
   2 // Dropdown menus
   3 // --------------------------------------------------
   4
   5 // Dropdown arrow/caret
   6 .caret {
   7   display: inline-block;
   8   width: 0;
   9   height: 0;
  10   margin-left: 2px;
  11   vertical-align: middle;
  12   border-top: $caret-width-base dashed;
  13   border-top: $caret-width-base solid \9; // IE8
  14   border-right: $caret-width-base solid transparent;
  15   border-left: $caret-width-base solid transparent;
  16 }
  17
  18 // The dropdown wrapper (div)
  19 .dropup,
  20 .dropdown {
  21   position: relative;
  22 }
  23
  24 // Prevent the focus on the dropdown toggle when closing dropdowns
  25 .dropdown-toggle:focus {
  26   outline: 0;
  27 }
  28
  29 // The dropdown menu (ul)
  30 .dropdown-menu {
  31   position: absolute;
  32   top: 100%;
  33   left: 0;
  34   z-index: $zindex-dropdown;
  35   display: none; // none by default, but block on "open" of the menu
  36   float: left;
  37   min-width: 160px;
  38   padding: 5px 0;
  39   margin: 2px 0 0; // override default ul
  40   list-style: none;
  41   font-size: $font-size-base;
  42   text-align: left; // Ensures proper alignment if parent has it changed (e.g., modal footer)
  43   background-color: $dropdown-bg;
  44   border: 1px solid $dropdown-fallback-border; // IE8 fallback
  45   border: 1px solid $dropdown-border;
  46   border-radius: $border-radius-base;
  47   @include box-shadow(0 6px 12px rgba(0, 0, 0, .175));
  48   background-clip: padding-box;
  49
  50   // Aligns the dropdown menu to right
  51   //
  52   // Deprecated as of 3.1.0 in favor of `.dropdown-menu-[dir]`
  53   &.pull-right {
  54         right: 0;
  55         left: auto;
  56   }
  57
  58   // Dividers (basically an hr) within the dropdown
  59   .divider {
  60         @include nav-divider($dropdown-divider-bg);
  61   }
  62
  63   // Links within the dropdown menu
  64   > li > a {
  65         display: block;
  66         padding: 3px 20px;
  67         clear: both;
  68         font-weight: normal;
  69         line-height: $line-height-base;
  70         color: $dropdown-link-color;
  71         white-space: nowrap; // prevent links from randomly breaking onto new lines
  72   }
  73 }
  74
  75 // Hover/Focus state
  76 .dropdown-menu > li > a {
  77   &:hover,
  78   &:focus {
  79         text-decoration: none;
  80         color: $dropdown-link-hover-color;
  81         background-color: $dropdown-link-hover-bg;
  82   }
  83 }
  84
  85 // Active state
  86 .dropdown-menu > .active > a {
  87   &,
  88   &:hover,
  89   &:focus {
  90         color: $dropdown-link-active-color;
  91         text-decoration: none;
  92         outline: 0;
  93         background-color: $dropdown-link-active-bg;
  94   }
  95 }
  96
  97 // Disabled state
  98 //
  99 // Gray out text and ensure the hover/focus state remains gray
 100
 101 .dropdown-menu > .disabled > a {
 102   &,
 103   &:hover,
 104   &:focus {
 105         color: $dropdown-link-disabled-color;
 106   }
 107
 108   // Nuke hover/focus effects
 109   &:hover,
 110   &:focus {
 111         text-decoration: none;
 112         background-color: transparent;
 113         background-image: none; // Remove CSS gradient
 114         @include reset-filter;
 115         cursor: $cursor-disabled;
 116   }
 117 }
 118
 119 // Open state for the dropdown
 120 .open {
 121   // Show the menu
 122   > .dropdown-menu {
 123         display: block;
 124   }
 125
 126   // Remove the outline when :focus is triggered
 127   > a {
 128         outline: 0;
 129   }
 130 }
 131
 132 // Menu positioning
 133 //
 134 // Add extra class to `.dropdown-menu` to flip the alignment of the dropdown
 135 // menu with the parent.
 136 .dropdown-menu-right {
 137   left: auto; // Reset the default from `.dropdown-menu`
 138   right: 0;
 139 }
 140
 141 // With v3, we enabled auto-flipping if you have a dropdown within a right
 142 // aligned nav component. To enable the undoing of that, we provide an override
 143 // to restore the default dropdown menu alignment.
 144 //
 145 // This is only for left-aligning a dropdown menu within a `.navbar-right` or
 146 // `.pull-right` nav component.
 147 .dropdown-menu-left {
 148   left: 0;
 149   right: auto;
 150 }
 151
 152 // Dropdown section headers
 153 .dropdown-header {
 154   display: block;
 155   padding: 3px 20px;
 156   font-size: $font-size-small;
 157   line-height: $line-height-base;
 158   color: $dropdown-header-color;
 159   white-space: nowrap; // as with > li > a
 160 }
 161
 162 // Backdrop to catch body clicks on mobile, etc.
 163 .dropdown-backdrop {
 164   position: fixed;
 165   left: 0;
 166   right: 0;
 167   bottom: 0;
 168   top: 0;
 169   z-index: ($zindex-dropdown - 10);
 170 }
 171
 172 // Right aligned dropdowns
 173 .pull-right > .dropdown-menu {
 174   right: 0;
 175   left: auto;
 176 }
 177
 178 // Allow for dropdowns to go bottom up (aka, dropup-menu)
 179 //
 180 // Just add .dropup after the standard .dropdown class and you're set, bro.
 181 // TODO: abstract this so that the navbar fixed styles are not placed here?
 182
 183 .dropup,
 184 .navbar-fixed-bottom .dropdown {
 185   // Reverse the caret
 186   .caret {
 187         border-top: 0;
 188         border-bottom: $caret-width-base dashed;
 189         border-bottom: $caret-width-base solid \9; // IE8
 190         content: "";
 191   }
 192   // Different positioning for bottom up menu
 193   .dropdown-menu {
 194         top: auto;
 195         bottom: 100%;
 196         margin-bottom: 2px;
 197   }
 198 }
 199
 200 // Component alignment
 201 //
 202 // Reiterate per navbar.less and the modified component alignment there.
 203
 204 @media (min-width: $grid-float-breakpoint) {
 205   .navbar-right {
 206         .dropdown-menu {
 207           right: 0;
 208           left: auto;
 209         }
 210         // Necessary for overrides of the default right aligned menu.
 211         // Will remove come v4 in all likelihood.
 212         .dropdown-menu-left {
 213           left: 0;
 214           right: auto;
 215         }
 216   }
 217 }