diff --git a/docs/_includes/components/button-dropdowns.html b/docs/_includes/components/button-dropdowns.html index 6f621086ea6319933df076bfd341dad378177598..9a3973188b75767e56c61e1967eb263cbcbba574 100644 --- a/docs/_includes/components/button-dropdowns.html +++ b/docs/_includes/components/button-dropdowns.html @@ -317,5 +317,30 @@ <!-- Dropdown menu links --> </ul> </div> +{% endhighlight %} + + <h2 id="btn-dropdowns-button-item">Buttons elements as items</h2> + <p>Dropdown list items can also be <code>button</code> elements.</p> + <div class="bs-example" data-example-id="button-dropdown-button-item"> + <div class="btn-toolbar" role="toolbar"> + <div class="btn-group"> + <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Default <span class="caret"></span></button> + <ul class="dropdown-menu"> + <li><button type="button">Action</button></li> + <li class="disabled"><button type="button">Disabled action</button></li> + </ul> + </div><!-- /btn-group --> + </div> + </div><!-- /example --> +{% highlight html %} + <div class="btn-group"> + <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> + Default <span class="caret"></span> + </button> + <ul class="dropdown-menu"> + <li><button type="button">Action</button></li> + <li class="disabled"><button type="button">Disabled action</button></li> + </ul> + </div> {% endhighlight %} </div> diff --git a/docs/_includes/nav/components.html b/docs/_includes/nav/components.html index 1ec91b5631532714a26784dc829e2dbb1d7936d3..dc21ef2884767c90c6c010e6e0c2f253dc8a4b36 100644 --- a/docs/_includes/nav/components.html +++ b/docs/_includes/nav/components.html @@ -34,6 +34,7 @@ <li><a href="#btn-dropdowns-split">Split button dropdowns</a></li> <li><a href="#btn-dropdowns-sizing">Sizing</a></li> <li><a href="#btn-dropdowns-dropup">Dropup variation</a></li> + <li><a href="#btn-dropdowns-button-item">Button elements as items</a></li> </ul> </li> <li> diff --git a/less/dropdowns.less b/less/dropdowns.less index f6876c1a9b2a8d7fb3574d090248f4762139c0c2..dc9a1f3fc34b1578abdf52d71a430f40cf0bc80a 100644 --- a/less/dropdowns.less +++ b/less/dropdowns.less @@ -61,37 +61,56 @@ .nav-divider(@dropdown-divider-bg); } + // Reset buttons within the dropdown + > li > button { + border: 0 none @dropdown-link-color; + background-color: transparent; + box-shadow: none; + text-align: left; + width: 100%; + -webkit-appearance: none; + } + // Links within the dropdown menu - > li > a { - display: block; - padding: 3px 20px; - clear: both; - font-weight: normal; - line-height: @line-height-base; - color: @dropdown-link-color; - white-space: nowrap; // prevent links from randomly breaking onto new lines + > li { + > a, + > button { + display: block; + padding: 3px 20px; + clear: both; + font-weight: normal; + line-height: @line-height-base; + color: @dropdown-link-color; + white-space: nowrap; // prevent links from randomly breaking onto new lines + } } } // Hover/Focus state -.dropdown-menu > li > a { - &:hover, - &:focus { - text-decoration: none; - color: @dropdown-link-hover-color; - background-color: @dropdown-link-hover-bg; +.dropdown-menu > li { + > a, + > button { + &:hover, + &:focus { + text-decoration: none; + color: @dropdown-link-hover-color; + background-color: @dropdown-link-hover-bg; + } } } // Active state -.dropdown-menu > .active > a { - &, - &:hover, - &:focus { - color: @dropdown-link-active-color; - text-decoration: none; - outline: 0; - background-color: @dropdown-link-active-bg; +.dropdown-menu > .active { + > a, + > button { + &, + &:hover, + &:focus { + color: @dropdown-link-active-color; + text-decoration: none; + outline: 0; + background-color: @dropdown-link-active-bg; + } } } @@ -99,21 +118,24 @@ // // Gray out text and ensure the hover/focus state remains gray -.dropdown-menu > .disabled > a { - &, - &:hover, - &:focus { - color: @dropdown-link-disabled-color; - } +.dropdown-menu > .disabled { + > a, + > button { + &, + &:hover, + &:focus { + color: @dropdown-link-disabled-color; + } - // Nuke hover/focus effects - &:hover, - &:focus { - text-decoration: none; - background-color: transparent; - background-image: none; // Remove CSS gradient - .reset-filter(); - cursor: @cursor-disabled; + // Nuke hover/focus effects + &:hover, + &:focus { + text-decoration: none; + background-color: transparent; + background-image: none; // Remove CSS gradient + .reset-filter(); + cursor: @cursor-disabled; + } } } @@ -125,7 +147,8 @@ } // Remove the outline when :focus is triggered - > a { + > a, + > button { outline: 0; } }