tmpl/less/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 @dropdown-caret-color;
  14   border-right: @caret-width-base solid transparent;
  15   border-left:  @caret-width-base solid transparent;
  16   // Firefox fix for https://github.com/twbs/bootstrap/issues/9538. Once fixed,
  17   // we can just straight up remove this.
  18   border-bottom: 0 dotted;
  19 }
  20
  21 // The dropdown wrapper (div)
  22 .dropdown {
  23   position: relative;
  24 }
  25
  26 // Prevent the focus on the dropdown toggle when closing dropdowns
  27 .dropdown-toggle:focus {
  28   outline: 0;
  29 }
  30
  31 // The dropdown menu (ul)
  32 .dropdown-menu {
  33   position: absolute;
  34   top: 100%;
  35   left: 0;
  36   z-index: @zindex-dropdown;
  37   display: none; // none by default, but block on "open" of the menu
  38   float: left;
  39   min-width: 160px;
  40   padding: 5px 0;
  41   margin: 2px 0 0; // override default ul
  42   list-style: none;
  43   font-size: @font-size-base;
  44   background-color: @dropdown-bg;
  45   border: 1px solid @dropdown-fallback-border; // IE8 fallback
  46   border: 1px solid @dropdown-border;
  47   border-radius: @border-radius-base;
  48   .box-shadow(0 6px 12px rgba(0,0,0,.175));
  49   background-clip: padding-box;
  50
  51   // Aligns the dropdown menu to right
  52   &.pull-right {
  53     right: 0;
  54     left: auto;
  55   }
  56
  57   // Dividers (basically an hr) within the dropdown
  58   .divider {
  59     .nav-divider(@dropdown-divider-bg);
  60   }
  61
  62   // Links within the dropdown menu
  63   > li > a {
  64     display: block;
  65     padding: 3px 20px;
  66     clear: both;
  67     font-weight: normal;
  68     line-height: @line-height-base;
  69     color: @dropdown-link-color;
  70     white-space: nowrap; // prevent links from randomly breaking onto new lines
  71   }
  72 }
  73
  74 // Hover/Focus state
  75 .dropdown-menu > li > a {
  76   &:hover,
  77   &:focus {
  78     text-decoration: none;
  79     color: @dropdown-link-hover-color;
  80     background-color: @dropdown-link-hover-bg;
  81   }
  82 }
  83
  84 // Active state
  85 .dropdown-menu > .active > a {
  86   &,
  87   &:hover,
  88   &:focus {
  89     color: @dropdown-link-active-color;
  90     text-decoration: none;
  91     outline: 0;
  92     background-color: @dropdown-link-active-bg;
  93   }
  94 }
  95
  96 // Disabled state
  97 //
  98 // Gray out text and ensure the hover/focus state remains gray
  99
 100 .dropdown-menu > .disabled > a {
 101   &,
 102   &:hover,
 103   &:focus {
 104     color: @dropdown-link-disabled-color;
 105   }
 106 }
 107 // Nuke hover/focus effects
 108 .dropdown-menu > .disabled > a {
 109   &:hover,
 110   &:focus {
 111     text-decoration: none;
 112     background-color: transparent;
 113     background-image: none; // Remove CSS gradient
 114     .reset-filter();
 115     cursor: not-allowed;
 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 // Dropdown section headers
 133 .dropdown-header {
 134   display: block;
 135   padding: 3px 20px;
 136   font-size: @font-size-small;
 137   line-height: @line-height-base;
 138   color: @dropdown-header-color;
 139 }
 140
 141 // Backdrop to catch body clicks on mobile, etc.
 142 .dropdown-backdrop {
 143   position: fixed;
 144   left: 0;
 145   right: 0;
 146   bottom: 0;
 147   top: 0;
 148   z-index: @zindex-dropdown - 10;
 149 }
 150
 151 // Right aligned dropdowns
 152 .pull-right > .dropdown-menu {
 153   right: 0;
 154   left: auto;
 155 }
 156
 157 // Allow for dropdowns to go bottom up (aka, dropup-menu)
 158 //
 159 // Just add .dropup after the standard .dropdown class and you're set, bro.
 160 // TODO: abstract this so that the navbar fixed styles are not placed here?
 161
 162 .dropup,
 163 .navbar-fixed-bottom .dropdown {
 164   // Reverse the caret
 165   .caret {
 166     // Firefox fix for https://github.com/twbs/bootstrap/issues/9538. Once this
 167     // gets fixed, restore `border-top: 0;`.
 168     border-top: 0 dotted;
 169     border-bottom: @caret-width-base solid @dropdown-caret-color;
 170     content: "";
 171   }
 172   // Different positioning for bottom up menu
 173   .dropdown-menu {
 174     top: auto;
 175     bottom: 100%;
 176     margin-bottom: 1px;
 177   }
 178 }
 179
 180
 181 // Component alignment
 182 //
 183 // Reiterate per navbar.less and the modified component alignment there.
 184
 185 @media (min-width: @grid-float-breakpoint) {
 186   .navbar-right {
 187     .dropdown-menu {
 188       .pull-right > .dropdown-menu();
 189     }
 190   }
 191 }
 192