From e558f490dd3cce1d9c13714e41cf4a7b1e04e909 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Mon, 17 Aug 2015 11:19:14 -0700 Subject: [PATCH] Rewrite dropdowns - Remove nested > selectors for dropdown items - Update docs examples to use all the new markup --- docs/components/button-dropdown.md | 282 ++++++++++++++--------------- docs/components/dropdowns.md | 82 +++------ docs/components/navs.md | 40 ++-- scss/_dropdown.scss | 72 ++++---- 4 files changed, 222 insertions(+), 254 deletions(-) diff --git a/docs/components/button-dropdown.md b/docs/components/button-dropdown.md index 32e03c0b78..315b351074 100644 --- a/docs/components/button-dropdown.md +++ b/docs/components/button-dropdown.md @@ -24,63 +24,63 @@ Turn a button into a dropdown toggle with some basic markup changes.
- +
+ Action + Another action + Something else here +
+ Separated link +
- +
+ Action + Another action + Something else here +
+ Separated link +
- +
+ Action + Another action + Something else here +
+ Separated link +
- +
+ Action + Another action + Something else here +
+ Separated link +
- +
+ Action + Another action + Something else here +
+ Separated link +
- +
+ Action + Another action + Something else here +
+ Separated link +
@@ -90,13 +90,13 @@ Turn a button into a dropdown toggle with some basic markup changes. - +
+ Action + Another action + Something else here +
+ Separated link +
{% endhighlight %} @@ -110,78 +110,78 @@ Similarly, create split button dropdowns with the same markup changes, only with - +
+ Action + Another action + Something else here +
+ Separated link +
- +
+ Action + Another action + Something else here +
+ Separated link +
- +
+ Action + Another action + Something else here +
+ Separated link +
- +
+ Action + Another action + Something else here +
+ Separated link +
- +
+ Action + Another action + Something else here +
+ Separated link +
- +
+ Action + Another action + Something else here +
+ Separated link +
@@ -192,13 +192,13 @@ Similarly, create split button dropdowns with the same markup changes, only with - +
+ Action + Another action + Something else here +
+ Separated link +
{% endhighlight %} @@ -212,13 +212,13 @@ Button dropdowns work with buttons of all sizes. - +
+ Action + Another action + Something else here +
+ Separated link +
@@ -257,9 +257,9 @@ Button dropdowns work with buttons of all sizes. - + @@ -267,9 +267,9 @@ Button dropdowns work with buttons of all sizes. - + @@ -277,9 +277,9 @@ Button dropdowns work with buttons of all sizes. - + {% endhighlight %} @@ -294,26 +294,26 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent. - +
+ Action + Another action + Something else here +
+ Separated link +
- +
+ Action + Another action + Something else here +
+ Separated link +
@@ -324,8 +324,8 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent. - + {% endhighlight %} diff --git a/docs/components/dropdowns.md b/docs/components/dropdowns.md index 0917766962..c60cb6fdbb 100644 --- a/docs/components/dropdowns.md +++ b/docs/components/dropdowns.md @@ -20,17 +20,11 @@ Wrap the dropdown's trigger and the dropdown menu within `.dropdown`, or another - +
+ Action + Another action + Something else here +
{% endexample %} @@ -43,9 +37,9 @@ By default, a dropdown menu is automatically positioned 100% from the top and al {% endcallout %} {% highlight html %} - + {% endhighlight %} ## Menu headers @@ -53,15 +47,11 @@ By default, a dropdown menu is automatically positioned 100% from the top and al Add a header to label sections of actions in any dropdown menu. {% example html %} - +
+
Dropdown header
+ Action + Another action +
{% endexample %} ## Menu dividers @@ -69,39 +59,25 @@ Add a header to label sections of actions in any dropdown menu. Separate groups of related menu items with a divider. {% example html %} - +
+ Action + Another action + Something else here +
+ Separated link +
{% endexample %} ## Disabled menu items -Add `.disabled` to a `
  • ` in the dropdown to disable the link. +Add `.disabled` to items in the dropdown to **style them as disabled**. {% example html %} - +
    + Regular link + Disabled link + Another link +
    {% endexample %} ## Usage @@ -121,9 +97,9 @@ Add `data-toggle="dropdown"` to a link or button to toggle a dropdown. - + {% endhighlight %} @@ -135,9 +111,9 @@ To keep URLs intact with link buttons, use the `data-target` attribute instead o Dropdown trigger - + {% endhighlight %} diff --git a/docs/components/navs.md b/docs/components/navs.md index c951bb1baf..644cd7bf07 100644 --- a/docs/components/navs.md +++ b/docs/components/navs.md @@ -123,13 +123,13 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
  • - +
    + Action + Another action + Something else here +
    + Separated link +
  • Another link @@ -149,13 +149,13 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
  • - +
    + Action + Another action + Something else here +
    + Separated link +
  • Another link @@ -182,14 +182,10 @@ Use the tab JavaScript plugin—include it individually or through the compiled - +
    + @fat + @mdo +
    • diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss index db7ee2a87f..84f2fde0d7 100644 --- a/scss/_dropdown.scss +++ b/scss/_dropdown.scss @@ -53,54 +53,50 @@ .dropdown-divider { @include nav-divider($dropdown-divider-bg); } - - // Links within the dropdown menu - > li > a { - display: block; - padding: 3px 20px; - clear: both; - font-weight: normal; - line-height: $line-height; - color: $dropdown-link-color; - white-space: nowrap; // prevent links from randomly breaking onto new lines - } } -// Hover/Focus state -.dropdown-menu > li > a { +// Links, buttons, and more within the dropdown menu +.dropdown-item { + display: block; + padding: 3px 20px; + clear: both; + font-weight: normal; + line-height: $line-height; + color: $dropdown-link-color; + white-space: nowrap; // prevent links from randomly breaking onto new lines + @include hover-focus { color: $dropdown-link-hover-color; text-decoration: none; background-color: $dropdown-link-hover-bg; } -} -// Active state -.dropdown-menu > .active > a { - @include plain-hover-focus { - color: $dropdown-link-active-color; - text-decoration: none; - background-color: $dropdown-link-active-bg; - outline: 0; - } -} - -// Disabled state -// -// Gray out text and ensure the hover/focus state remains gray - -.dropdown-menu > .disabled > a { - @include plain-hover-focus { - color: $dropdown-link-disabled-color; + // Active state + &.active { + @include plain-hover-focus { + color: $dropdown-link-active-color; + text-decoration: none; + background-color: $dropdown-link-active-bg; + outline: 0; + } } - // Nuke hover/focus effects - @include hover-focus { - text-decoration: none; - cursor: $cursor-disabled; - background-color: transparent; - background-image: none; // Remove CSS gradient - @include reset-filter(); + // Disabled state + // + // Gray out text and ensure the hover/focus state remains gray + &.disabled { + @include plain-hover-focus { + color: $dropdown-link-disabled-color; + } + + // Nuke hover/focus effects + @include hover-focus { + text-decoration: none; + cursor: $cursor-disabled; + background-color: transparent; + background-image: none; // Remove CSS gradient + @include reset-filter(); + } } }