Skip to content

Commit

Permalink
feat(dropdowns): Orange branded 🎉
Browse files Browse the repository at this point in the history
  • Loading branch information
@ffoodd
ffoodd committed May 14, 2020
1 parent 186b02f commit b0194a7
Show file tree
Hide file tree
Showing 5 changed files with 71 additions and 169 deletions.
53 changes: 47 additions & 6 deletions scss/_button-group.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,8 +65,49 @@
//

.dropdown-toggle-split {
padding-right: $btn-padding-x * .75;
padding-left: $btn-padding-x * .75;
padding-right: subtract($dropdown-padding-x, $border-width);
padding-left: subtract($dropdown-padding-x, $border-width);
border-color: $black;

// Boosted mod
&:not(:hover):not(:focus):not(:active) {
border-left-color: transparent;
}

&:not(:focus):not(:active)::before {
position: absolute;
top: -$border-width;
bottom: -$border-width;
left: -$border-width;
width: $border-width;
color: $black;
content: "";
background:
linear-gradient(
currentColor $border-width,
transparent $border-width,
transparent $border-width * 2.5,
currentColor $border-width * 2.5,
currentColor subtract(100%, $border-width * 2.5),
transparent subtract(100%, $border-width * 2.5),
transparent subtract(100%, $border-width),
currentColor subtract(100%, $border-width)
);
}

.btn:active + & {
border-color: $primary;
}

.btn-group.show > &:not(:focus):not(:active)::before {
color: $primary;
background-color: currentColor;
}

.dropleft > &:not(:hover):not(:focus):not(:active) {
border-left-color: $black;
}
// end mod

&::after,
.dropup &::after,
Expand All @@ -80,13 +121,13 @@
}

.btn-sm + .dropdown-toggle-split {
padding-right: $btn-padding-x-sm * .75;
padding-left: $btn-padding-x-sm * .75;
padding-right: $btn-padding-x-sm * .5; // Boosted mod
padding-left: $btn-padding-x-sm * .5; // Boosted mod
}

.btn-lg + .dropdown-toggle-split {
padding-right: $btn-padding-x-lg * .75;
padding-left: $btn-padding-x-lg * .75;
padding-right: $btn-padding-x-lg * .5; // Boosted mod
padding-left: $btn-padding-x-lg * .5; // Boosted mod
}


Expand Down
15 changes: 7 additions & 8 deletions scss/_dropdown.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,12 @@
}

.dropdown-toggle {
padding-right: $dropdown-padding-x;
padding-left: $dropdown-padding-x;
color: $dropdown-color;
white-space: nowrap;
background-color: $dropdown-bg;
border-color: $dropdown-border-color;

// Generate the caret automatically
@include caret();
Expand Down Expand Up @@ -76,9 +81,6 @@

.dropdown-toggle {
@include caret(right);
&::after {
vertical-align: 0;
}
}
}

Expand All @@ -93,9 +95,6 @@

.dropdown-toggle {
@include caret(left);
&::before {
vertical-align: 0;
}
}
}

Expand All @@ -116,7 +115,7 @@
height: 0;
margin: $dropdown-divider-margin-y 0;
overflow: hidden;
border-top: 1px solid $dropdown-divider-bg;
border-top: $border-width solid $dropdown-divider-bg; // Boosted mod
}

// Links, buttons, and more within the dropdown menu
Expand All @@ -127,7 +126,7 @@
width: 100%; // For `<button>`s
padding: $dropdown-item-padding-y $dropdown-item-padding-x;
clear: both;
font-weight: $font-weight-normal;
font-weight: $font-weight-bold; // Boosted mod
color: $dropdown-link-color;
text-align: inherit; // For `<button>`s
text-decoration: if($link-decoration == none, null, none);
Expand Down
12 changes: 6 additions & 6 deletions scss/_variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -480,7 +480,7 @@ $blockquote-letter-spacing: $letter-spacing-base * .25 !default;

$hr-margin-y: $spacer !default;
$hr-color: inherit !default;
$hr-height: $border-width / 2 !default;
$hr-height: $border-width !default;
$hr-opacity: .25 !default;

$legend-margin-bottom: map-get($spacers, 1) !default;
Expand Down Expand Up @@ -919,8 +919,8 @@ $navbar-dark-brand-hover-color: $navbar-dark-active-color !default;
// Dropdown menu container and contents.

$dropdown-min-width: 10rem !default;
$dropdown-padding-y: $spacer !default;
//$dropdown-padding-x: map-get($spacers, 2) !default; // Boosted mod
$dropdown-padding-y: 0 !default;
$dropdown-padding-x: map-get($spacers, 2) !default; // Boosted mod
$dropdown-spacer: $border-width * -1 !default;
$dropdown-font-size: $font-size-base !default;
$dropdown-color: $body-color !default;
Expand All @@ -929,8 +929,8 @@ $dropdown-border-color: $gray-500 !default;
$dropdown-border-radius: $border-radius !default;
$dropdown-border-width: $border-width !default;
$dropdown-inner-border-radius: 0 !default;
$dropdown-divider-bg: $gray-300 !default;
$dropdown-divider-margin-y: $spacer / 2 !default;
$dropdown-divider-bg: $gray-500 !default;
$dropdown-divider-margin-y: map-get($spacers, 1) !default;
$dropdown-box-shadow: $box-shadow !default;

$dropdown-link-color: $black !default;
Expand All @@ -946,7 +946,7 @@ $dropdown-item-padding-y: map-get($spacers, 2) !default;
$dropdown-item-padding-x: map-get($spacers, 2) !default;

$dropdown-header-color: $black !default;
$dropdown-header-padding: $dropdown-padding-y !default;
$dropdown-header-padding: $spacer map-get($spacers, 2) !default;


// Pagination
Expand Down
6 changes: 5 additions & 1 deletion scss/mixins/_caret.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,9 +54,13 @@
}

&::before {
// stylelint-disable-next-line declaration-no-important
position: static !important; // Boosted mod: prevent custom split buttons to interfere
display: inline-block;
align-self: $caret-vertical-align; // Boosted mod: flexbox FTW!
margin-right: $caret-spacing;
vertical-align: $caret-vertical-align;
// stylelint-disable-next-line declaration-no-important
color: unset !important; // Boosted mod: prevent custom split buttons to interfere
content: "";
@include caret-left();
}
Expand Down
154 changes: 6 additions & 148 deletions site/content/docs/4.3/components/dropdowns.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,107 +57,17 @@ And with `<a>` elements:
</div>
{{< /example >}}

The best part is you can do this with any button variant, too:

<div class="bd-example">
<div class="btn-group">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Primary</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Secondary</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Success</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Info</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Warning</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Danger</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div>

{{< highlight html >}}
<!-- Example single danger button -->
<div class="btn-group">
<button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
Action
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div>
{{< /highlight >}}
<!-- Boosted mod: do not show button's variants for dropdown -->

### Split button

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.

<!-- Boosted mod: do not show button's variants for dropdown -->

<div class="bd-example">
<div class="btn-group">
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
Expand All @@ -171,65 +81,13 @@ We use this extra class to reduce the horizontal `padding` on either side of the
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div>

{{< highlight html >}}
<!-- Example split danger button -->
<!-- Example split button -->
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
<button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<button type="button" class="btn btn-secondary">Action</button>
<button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu">
Expand Down

0 comments on commit b0194a7

Please sign in to comment.