From f6ad665c26f8a376a806721feaf3f38ceadc7e79 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 8 Jan 2016 13:23:24 -0800 Subject: [PATCH] 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";