less/bootstrap/dropdowns.less

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