From f6ad665c26f8a376a806721feaf3f38ceadc7e79 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 8 Jan 2016 13:23:24 -0800 Subject: [PATCH 1/6] Switch up some split button stuff - New vars - New function for stripping units so we can combine rems and ems in math functions - Add new classes for sizing and spacing around the split dropdown toggle so that the caret isn't misaligned --- docs/components/button-dropdown.md | 44 ++++++++++++++++++++++++------ scss/_button-group.scss | 20 +++++++++----- scss/_dropdown.scss | 3 +- scss/_functions.scss | 17 ++++++++++++ scss/_variables.scss | 12 +++++--- scss/bootstrap.scss | 1 + 6 files changed, 75 insertions(+), 22 deletions(-) create mode 100644 scss/_functions.scss diff --git a/docs/components/button-dropdown.md b/docs/components/button-dropdown.md index e2aa98df37..ecad0d862a 100644 --- a/docs/components/button-dropdown.md +++ b/docs/components/button-dropdown.md @@ -102,12 +102,12 @@ Turn a button into a dropdown toggle with some basic markup changes. ### Split button dropdowns -Similarly, create split button dropdowns with the same markup changes, only with a separate button. +Similarly, create split button dropdowns with nearly the same markup as single button dropdowns, but add the `.dropdown-toggle-split` class for proper spacing around the dropdown caret.
-
@@ -120,7 +120,7 @@ Similarly, create split button dropdowns with the same markup changes, only with
-
@@ -133,7 +133,7 @@ Similarly, create split button dropdowns with the same markup changes, only with
-
@@ -146,7 +146,7 @@ Similarly, create split button dropdowns with the same markup changes, only with
-
@@ -159,7 +159,7 @@ Similarly, create split button dropdowns with the same markup changes, only with
-
@@ -172,7 +172,7 @@ Similarly, create split button dropdowns with the same markup changes, only with
-
@@ -186,10 +186,10 @@ Similarly, create split button dropdowns with the same markup changes, only with
{% highlight html %} - +
-
@@ -220,6 +220,19 @@ Button dropdowns work with buttons of all sizes. Separated link
+
+ + +
+ Action + Another action + Something else here +
+ Separated link +
+
+
+ + +
+ Action + Another action + Something else here +
+ Separated link +
+
diff --git a/scss/_button-group.scss b/scss/_button-group.scss index e0c6c9af40..818ba17710 100644 --- a/scss/_button-group.scss +++ b/scss/_button-group.scss @@ -103,13 +103,19 @@ // // Give the line between buttons some depth -.btn-group > .btn + .dropdown-toggle { - padding-right: $split-btn-dropdown-toggle-padding-x; - padding-left: $split-btn-dropdown-toggle-padding-x; -} -.btn-group > .btn-lg + .dropdown-toggle { - padding-right: $split-btn-lg-dropdown-toggle-padding-x; - padding-left: $split-btn-lg-dropdown-toggle-padding-x; +.dropdown-toggle-split { + padding-left: $btn-dropdown-toggle-split-l; + padding-right: $btn-dropdown-toggle-split-r; + + &.btn-sm { + padding-left: $btn-dropdown-toggle-split-l-sm; + padding-right: $btn-dropdown-toggle-split-r-sm; + } + + &.btn-lg { + padding-left: $btn-dropdown-toggle-split-l-lg; + padding-right: $btn-dropdown-toggle-split-r-lg; + } } // The clickable button for toggling the menu diff --git a/scss/_dropdown.scss b/scss/_dropdown.scss index d9776d59c6..141806c34c 100644 --- a/scss/_dropdown.scss +++ b/scss/_dropdown.scss @@ -10,8 +10,7 @@ display: inline-block; width: 0; height: 0; - margin-right: .25rem; - margin-left: .25rem; + margin-left: $caret-width; vertical-align: middle; content: ""; border-top: $caret-width solid; diff --git a/scss/_functions.scss b/scss/_functions.scss new file mode 100644 index 0000000000..c917659375 --- /dev/null +++ b/scss/_functions.scss @@ -0,0 +1,17 @@ +// +// Functions +// + + +// Remove the unit of a length +// Source: https://css-tricks.com/snippets/sass/strip-unit-function/ +// +// @param {Number} $number - Number to remove unit from +// @return {Number} - Unitless number + +@function strip-unit($number) { + @if type-of($number) == 'number' and not unitless($number) { + @return $number / ($number * 0 + 1); + } + @return $number; +} diff --git a/scss/_variables.scss b/scss/_variables.scss index dec4d0b864..ed7139cee8 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -270,11 +270,15 @@ $btn-padding-y-sm: .25rem !default; $btn-padding-x-lg: 1.25rem !default; $btn-padding-y-lg: .75rem !default; -$btn-block-spacing-y: 5px !default; -$btn-toolbar-margin: 5px !default; +$btn-block-spacing-y: .5rem !default; +$btn-toolbar-margin: .5rem !default; -$split-btn-dropdown-toggle-padding-x: 8px !default; -$split-btn-lg-dropdown-toggle-padding-x: 12px !default; +$btn-dropdown-toggle-split-l: (strip-unit($btn-padding-x) - ($caret-width * 1.5)) !default; +$btn-dropdown-toggle-split-r: (strip-unit($btn-padding-x) - ($caret-width * .5)) !default; +$btn-dropdown-toggle-split-l-sm: (strip-unit($btn-padding-x-sm) - ($caret-width * 1.5)) !default; +$btn-dropdown-toggle-split-r-sm: (strip-unit($btn-padding-x-sm) - ($caret-width * .5)) !default; +$btn-dropdown-toggle-split-l-lg: (strip-unit($btn-padding-x-lg) - ($caret-width-lg * 1.5)) !default; +$btn-dropdown-toggle-split-r-lg: (strip-unit($btn-padding-x-lg) - ($caret-width-lg * .5)) !default; // Allows for customizing button radius independently from global border radius $btn-border-radius: $border-radius !default; diff --git a/scss/bootstrap.scss b/scss/bootstrap.scss index ab33f86c4f..febbc4ea4a 100644 --- a/scss/bootstrap.scss +++ b/scss/bootstrap.scss @@ -5,6 +5,7 @@ */ // Core variables and mixins +@import "functions"; @import "variables"; @import "mixins"; From ef50b7839cb2ca9171eec12c2bf22fc38ad9d7ae Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Sat, 6 Feb 2016 20:36:21 -0800 Subject: [PATCH 2/6] linting --- scss/_button-group.scss | 6 +++--- scss/_functions.scss | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/scss/_button-group.scss b/scss/_button-group.scss index 2e978ba1f6..751c3eebd4 100644 --- a/scss/_button-group.scss +++ b/scss/_button-group.scss @@ -106,17 +106,17 @@ // Give the line between buttons some depth .dropdown-toggle-split { - padding-left: $btn-dropdown-toggle-split-l; padding-right: $btn-dropdown-toggle-split-r; + padding-left: $btn-dropdown-toggle-split-l; &.btn-sm { - padding-left: $btn-dropdown-toggle-split-l-sm; padding-right: $btn-dropdown-toggle-split-r-sm; + padding-left: $btn-dropdown-toggle-split-l-sm; } &.btn-lg { - padding-left: $btn-dropdown-toggle-split-l-lg; padding-right: $btn-dropdown-toggle-split-r-lg; + padding-left: $btn-dropdown-toggle-split-l-lg; } } diff --git a/scss/_functions.scss b/scss/_functions.scss index c917659375..de7871a9af 100644 --- a/scss/_functions.scss +++ b/scss/_functions.scss @@ -10,7 +10,7 @@ // @return {Number} - Unitless number @function strip-unit($number) { - @if type-of($number) == 'number' and not unitless($number) { + @if type-of($number) == "number" and not unitless($number) { @return $number / ($number * 0 + 1); } @return $number; From fda92d02a35de82de8a98af93e2ebe162c373615 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 11 May 2016 11:36:09 -0700 Subject: [PATCH 3/6] Unfuck those split button dropdowns - Really we didn't need to do any of that strip units stuff to generate six new variables, two for each button size - Using sibling selectors, we can target those split button dropdown toggles using the .dropdown-toggle-split class, and adjust padding and margin as needed - Now, we nuke the margin-left from the ::after generated caret and tighten up the padding so that those split toggles don't look huge next to their main button --- docs/components/button-dropdown.md | 88 ++++++++++++++++++++++-------- scss/_button-group.scss | 28 ++++++---- scss/_variables.scss | 7 --- 3 files changed, 80 insertions(+), 43 deletions(-) diff --git a/docs/components/button-dropdown.md b/docs/components/button-dropdown.md index ecad0d862a..80d8911b96 100644 --- a/docs/components/button-dropdown.md +++ b/docs/components/button-dropdown.md @@ -17,9 +17,9 @@ Button dropdowns require the [dropdown plugin]({{ site.baseurl }}/components/dro * Will be replaced with the ToC, excluding the "Contents" header {:toc} -### Single button dropdowns +## Single button dropdowns -Turn a button into a dropdown toggle with some basic markup changes. +Turn a button into a dropdown toggle with some basic markup changes for the menu itself and the button used to trigger it.
@@ -100,9 +100,11 @@ Turn a button into a dropdown toggle with some basic markup changes.
{% endhighlight %} -### Split button dropdowns +## Split button dropdowns -Similarly, create split button dropdowns with nearly the same markup as single button dropdowns, but add the `.dropdown-toggle-split` class for proper spacing around the dropdown caret. +Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of `.dropdown-toggle-split` for proper spacing around the dropdown caret. + +We use this extra class to reduce the horizontal `padding` on either side of the caret by 25% and remove the `margin-left` that's added for regular button dropdowns. Those extra changes keep the caret centered in the split button and provide a more appropriately sized hit area next to the main button.
@@ -202,9 +204,9 @@ Similarly, create split button dropdowns with nearly the same markup as single b
{% endhighlight %} -### Sizing +## Sizing -Button dropdowns work with buttons of all sizes. +Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.
{% highlight html %} - +
+
+ + +
+ ... +
+
- +
+
+ + +
+ ... +
+
{% endhighlight %} -### Dropup variation +## Dropup variation Trigger dropdown menus above elements by adding `.dropup` to the parent.
-
- - -
- Action - Another action - Something else here -
- Separated link -
-
+
{% highlight html %} +
+ + +
+ + +
+ +
+
{% endhighlight %} diff --git a/scss/_button-group.scss b/scss/_button-group.scss index 751c3eebd4..7bbfc6b3ac 100644 --- a/scss/_button-group.scss +++ b/scss/_button-group.scss @@ -104,22 +104,26 @@ // Split button dropdowns // -// Give the line between buttons some depth -.dropdown-toggle-split { - padding-right: $btn-dropdown-toggle-split-r; - padding-left: $btn-dropdown-toggle-split-l; +.btn + .dropdown-toggle-split { + padding-left: $btn-padding-x * .75; + padding-right: $btn-padding-x * .75; - &.btn-sm { - padding-right: $btn-dropdown-toggle-split-r-sm; - padding-left: $btn-dropdown-toggle-split-l-sm; - } - - &.btn-lg { - padding-right: $btn-dropdown-toggle-split-r-lg; - padding-left: $btn-dropdown-toggle-split-l-lg; + &::after { + margin-left: 0; } } +.btn-sm + .dropdown-toggle-split { + padding-left: $btn-padding-x-sm * .75; + padding-right: $btn-padding-x-sm * .75; +} + +.btn-lg + .dropdown-toggle-split { + padding-left: $btn-padding-x-lg * .75; + padding-right: $btn-padding-x-lg * .75; +} + + // The clickable button for toggling the menu // Remove the gradient and set the same inset shadow as the :active state .btn-group.open .dropdown-toggle { diff --git a/scss/_variables.scss b/scss/_variables.scss index bbdbe24c4d..5be9795454 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -298,13 +298,6 @@ $btn-padding-y-lg: .75rem !default; $btn-block-spacing-y: .5rem !default; $btn-toolbar-margin: .5rem !default; -$btn-dropdown-toggle-split-l: (strip-unit($btn-padding-x) - ($caret-width * 1.5)) !default; -$btn-dropdown-toggle-split-r: (strip-unit($btn-padding-x) - ($caret-width * .5)) !default; -$btn-dropdown-toggle-split-l-sm: (strip-unit($btn-padding-x-sm) - ($caret-width * 1.5)) !default; -$btn-dropdown-toggle-split-r-sm: (strip-unit($btn-padding-x-sm) - ($caret-width * .5)) !default; -$btn-dropdown-toggle-split-l-lg: (strip-unit($btn-padding-x-lg) - ($caret-width-lg * 1.5)) !default; -$btn-dropdown-toggle-split-r-lg: (strip-unit($btn-padding-x-lg) - ($caret-width-lg * .5)) !default; - // Allows for customizing button radius independently from global border radius $btn-border-radius: $border-radius !default; $btn-border-radius-lg: $border-radius-lg !default; From 575769c34ded2de0239b3b58d3c27360db18963a Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 11 May 2016 11:36:40 -0700 Subject: [PATCH 4/6] rest in peace _functions.scss --- scss/_functions.scss | 17 ----------------- scss/bootstrap.scss | 1 - 2 files changed, 18 deletions(-) delete mode 100644 scss/_functions.scss diff --git a/scss/_functions.scss b/scss/_functions.scss deleted file mode 100644 index de7871a9af..0000000000 --- a/scss/_functions.scss +++ /dev/null @@ -1,17 +0,0 @@ -// -// Functions -// - - -// Remove the unit of a length -// Source: https://css-tricks.com/snippets/sass/strip-unit-function/ -// -// @param {Number} $number - Number to remove unit from -// @return {Number} - Unitless number - -@function strip-unit($number) { - @if type-of($number) == "number" and not unitless($number) { - @return $number / ($number * 0 + 1); - } - @return $number; -} diff --git a/scss/bootstrap.scss b/scss/bootstrap.scss index 47f5a79b36..f99a722cad 100644 --- a/scss/bootstrap.scss +++ b/scss/bootstrap.scss @@ -5,7 +5,6 @@ */ // Core variables and mixins -@import "functions"; @import "custom"; @import "variables"; @import "mixins"; From 7cc802ea781997cdce09c5ab74b878c84301ebab Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 11 May 2016 14:13:16 -0700 Subject: [PATCH 5/6] Consolidate button-dropdown.md with dropdowns.md to simplify docs --- docs/_data/nav.yml | 3 +- docs/components/button-dropdown.md | 373 --------------------------- docs/components/dropdowns.md | 389 ++++++++++++++++++++++++++++- 3 files changed, 382 insertions(+), 383 deletions(-) delete mode 100644 docs/components/button-dropdown.md diff --git a/docs/_data/nav.yml b/docs/_data/nav.yml index d2ee6e3d8c..2700cba0c1 100644 --- a/docs/_data/nav.yml +++ b/docs/_data/nav.yml @@ -34,9 +34,8 @@ - title: Breadcrumb - title: Buttons - title: Button group - - title: Button dropdown - title: Card - - title: Carousel + - title: Carousel - title: Collapse - title: Dropdowns - title: Forms diff --git a/docs/components/button-dropdown.md b/docs/components/button-dropdown.md deleted file mode 100644 index 80d8911b96..0000000000 --- a/docs/components/button-dropdown.md +++ /dev/null @@ -1,373 +0,0 @@ ---- -layout: docs -title: Button dropdown -group: components ---- - -Use any button to trigger a dropdown menu by placing it within a `.btn-group` and providing the proper dropdown menu markup. - -{% callout danger %} -#### Plugin dependency - -Button dropdowns require the [dropdown plugin]({{ site.baseurl }}/components/dropdowns/) to be included in your version of Bootstrap. -{% endcallout %} - -## Contents - -* Will be replaced with the ToC, excluding the "Contents" header -{:toc} - -## Single button dropdowns - -Turn a button into a dropdown toggle with some basic markup changes for the menu itself and the button used to trigger it. - -
-
- -
- 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 -
-
-
- -{% highlight html %} - -
- -
- Action - Another action - Something else here -
- Separated link -
-
-{% endhighlight %} - -## Split button dropdowns - -Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of `.dropdown-toggle-split` for proper spacing around the dropdown caret. - -We use this extra class to reduce the horizontal `padding` on either side of the caret by 25% and remove the `margin-left` that's added for regular button dropdowns. Those extra changes keep the caret centered in the split button and provide a more appropriately sized hit area next to the main button. - -
-
- - -
- 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 -
-
-
- -{% highlight html %} - -
- - -
- Action - Another action - Something else here -
- Separated link -
-
-{% endhighlight %} - -## Sizing - -Button dropdowns work with buttons of all sizes, including default and split dropdown buttons. - -
- - -
- -{% highlight html %} - -
- -
- ... -
-
-
- - -
- ... -
-
- - -
- -
- ... -
-
-
- - -
- ... -
-
-{% endhighlight %} - -## Dropup variation - -Trigger dropdown menus above elements by adding `.dropup` to the parent. - -
- -
- -{% highlight html %} - -
- - -
- -
-
- - -
- - -
- -
-
-{% endhighlight %} diff --git a/docs/components/dropdowns.md b/docs/components/dropdowns.md index 09d518a606..affaadc6e8 100644 --- a/docs/components/dropdowns.md +++ b/docs/components/dropdowns.md @@ -11,16 +11,20 @@ Dropdowns are toggleable, contextual overlays for displaying lists of links and * Will be replaced with the ToC, excluding the "Contents" header {:toc} -## Example +## Examples -Wrap the dropdown's trigger and the dropdown menu within `.dropdown`, or another element that declares `position: relative;`. Then, add the menu's HTML. +Wrap the dropdown's toggle (your button or link) and the dropdown menu within `.dropdown`, or another element that declares `position: relative;`. Dropdowns can be triggered from `` or ` -
+
Action Another action Something else here @@ -28,9 +32,378 @@ Wrap the dropdown's trigger and the dropdown menu within `.dropdown`, or another
{% endexample %} -### Button elements +And with `` elements: -You can optionally use ` +
+ 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 +
+
+
+ +{% highlight html %} + +
+ +
+ Action + Another action + Something else here +
+ Separated link +
+
+{% endhighlight %} + +### Split button dropdowns + +Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of `.dropdown-toggle-split` for proper spacing around the dropdown caret. + +We use this extra class to reduce the horizontal `padding` on either side of the caret by 25% and remove the `margin-left` that's added for regular button dropdowns. Those extra changes keep the caret centered in the split button and provide a more appropriately sized hit area next to the main button. + +
+
+ + +
+ 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 +
+
+
+ +{% highlight html %} + +
+ + +
+ Action + Another action + Something else here +
+ Separated link +
+
+{% endhighlight %} + +## Sizing + +Button dropdowns work with buttons of all sizes, including default and split dropdown buttons. + +
+ + +
+ +{% highlight html %} + +
+ +
+ ... +
+
+
+ + +
+ ... +
+
+ + +
+ +
+ ... +
+
+
+ + +
+ ... +
+
+{% endhighlight %} + +## Dropup variation + +Trigger dropdown menus above elements by adding `.dropup` to the parent element. + +
+ +
+ +{% highlight html %} + +
+ + +
+ +
+
+ + +
+ + +
+ +
+
+{% endhighlight %} + +## Menu items + +Historically dropdown menu contents *had* to be links, but that's no longer the case with v4. Now you can optionally use `
{% endexample %} -## Alignment +## Menu alignment By default, a dropdown menu is automatically positioned 100% from the top and along the left side of its parent. Add `.dropdown-menu-right` to a `.dropdown-menu` to right align the dropdown menu. From 6e7d450e1cbf2491af393a83c9843d0dbc004022 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 11 May 2016 14:28:59 -0700 Subject: [PATCH 6/6] linting order --- scss/_button-group.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/scss/_button-group.scss b/scss/_button-group.scss index 7bbfc6b3ac..60e9f7a744 100644 --- a/scss/_button-group.scss +++ b/scss/_button-group.scss @@ -105,8 +105,8 @@ // .btn + .dropdown-toggle-split { - padding-left: $btn-padding-x * .75; padding-right: $btn-padding-x * .75; + padding-left: $btn-padding-x * .75; &::after { margin-left: 0; @@ -114,13 +114,13 @@ } .btn-sm + .dropdown-toggle-split { - padding-left: $btn-padding-x-sm * .75; padding-right: $btn-padding-x-sm * .75; + padding-left: $btn-padding-x-sm * .75; } .btn-lg + .dropdown-toggle-split { - padding-left: $btn-padding-x-lg * .75; padding-right: $btn-padding-x-lg * .75; + padding-left: $btn-padding-x-lg * .75; }