diff --git a/scss/_buttons.scss b/scss/_buttons.scss index 7381de533..3f767bb52 100644 --- a/scss/_buttons.scss +++ b/scss/_buttons.scss @@ -4,34 +4,48 @@ .btn { display: inline-block; + padding: $btn-padding-y $btn-padding-x; + @include font-size($btn-font-size); font-family: $btn-font-family; font-weight: $btn-font-weight; line-height: $btn-line-height; - color: $body-color; + color: var(--btn-accent-contrast-color); text-align: center; text-decoration: if($link-decoration == none, null, none); white-space: $btn-white-space; vertical-align: middle; cursor: if($enable-pointer-cursor-for-buttons, pointer, null); user-select: none; - background-color: transparent; - border: $btn-border-width solid transparent; - @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-border-radius); + background-color: var(--btn-accent-color); + border: $btn-border-width solid $btn-border-color; + @include transition($btn-transition); + @include gradient-bg(); + @include border-radius($btn-border-radius, 0); // Manually declare to provide an override to the browser default + @include box-shadow($btn-box-shadow); &:hover { - color: $body-color; + color: var(--btn-accent-contrast-color); text-decoration: if($link-hover-decoration == underline, none, null); } &:focus, &.focus { outline: 0; - box-shadow: $btn-focus-box-shadow; + + // Avoid using mixin so we can pass custom focus shadow properly + @if $enable-shadows { + box-shadow: $btn-box-shadow, $btn-focus-box-shadow; + } @else { + box-shadow: $btn-focus-box-shadow; + } } &:active, - &.active { + &.active, + .show > &.dropdown-toggle { + // Remove CSS gradients if they're enabled + background-image: if($enable-gradients, none, null); @include box-shadow($btn-active-box-shadow); &:focus { @@ -43,11 +57,37 @@ &.disabled, fieldset:disabled & { // stylelint-disable-line selector-no-qualifying-type pointer-events: none; + // Remove CSS gradients if they're enabled + background-image: if($enable-gradients, none, null); opacity: $btn-disabled-opacity; @include box-shadow(none); } } +.btn-outline { + color: var(--btn-accent-color); + background-color: transparent; + border-color: currentColor; + + &:hover { + background-color: var(--btn-accent-color); + border-color: var(--btn-accent-color); + } + + &:focus, + &.focus { + color: var(--btn-accent-contrast-color); + background-color: var(--btn-accent-color); + border-color: var(--btn-accent-color); + } + + &.active, + &:active { + color: var(--btn-accent-contrast-color); + background-color: var(--btn-accent-color); + border-color: var(--btn-accent-color); + } +} // // Alternate buttons @@ -55,26 +95,44 @@ @each $color, $value in $theme-colors { .btn-#{$color} { - @include button-variant($value, $value); + $contrast-color: color-contrast($value); + + --btn-accent-color: #{$value}; + --btn-accent-contrast-color: #{$contrast-color}; + + &:hover { + $accent-hover: darken($value, 5%); + $accent-hover-contrast-color: color-contrast($accent-hover); + + --btn-accent-color: #{$accent-hover}; + @if ($contrast-color != $accent-hover-contrast-color) { + --btn-accent-contrast-color: #{$accent-hover-contrast-color}; + } + } + + &.active, + &:active { + $accent-active: darken($value, 15%); + $accent-active-contrast-color: color-contrast($accent-active); + + --btn-accent-color: #{$accent-active}; + @if ($contrast-color != $accent-active-contrast-color) { + --btn-accent-contrast-color: #{$accent-active-contrast-color}; + } + } } } -@each $color, $value in $theme-colors { - .btn-outline-#{$color} { - @include button-outline-variant($value); - } -} - - // // Link buttons // // Make a button look and behave like a link .btn-link { - font-weight: $font-weight-normal; + font-weight: $font-weight-base; color: $btn-link-color; text-decoration: $link-decoration; + border-color: if($btn-border-color != transparent, transparent, null); &:hover { color: $btn-link-hover-color; @@ -84,14 +142,13 @@ &:focus, &.focus { text-decoration: $link-hover-decoration; + box-shadow: 0 0 0 $btn-focus-offset $body-bg, 0 0 0 $btn-focus-width; } &:disabled, &.disabled { color: $btn-link-disabled-color; } - - // No need for an active state here } @@ -99,12 +156,16 @@ // Button Sizes // -.btn-lg { - @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-border-radius-lg); +.btn-sm { + padding: $btn-padding-y-sm $btn-padding-x-sm; + @include font-size($btn-font-size-sm); + @include border-radius($btn-border-radius-sm); } -.btn-sm { - @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm); +.btn-lg { + padding: $btn-padding-y-lg $btn-padding-x-lg; + @include font-size($btn-font-size-lg); + @include border-radius($btn-border-radius-lg); } diff --git a/scss/_mixins.scss b/scss/_mixins.scss index 5a04655d5..76b2a67a6 100644 --- a/scss/_mixins.scss +++ b/scss/_mixins.scss @@ -21,7 +21,6 @@ // Components @import "mixins/alert"; -@import "mixins/buttons"; @import "mixins/caret"; @import "mixins/pagination"; @import "mixins/lists"; diff --git a/scss/_variables.scss b/scss/_variables.scss index 6123f3ce1..b30d1f039 100644 --- a/scss/_variables.scss +++ b/scss/_variables.scss @@ -534,12 +534,14 @@ $btn-padding-y-lg: $input-btn-padding-y-lg !default; $btn-padding-x-lg: $input-btn-padding-x-lg !default; $btn-font-size-lg: $input-btn-font-size-lg !default; +$btn-border-color: rgba($black, .01) !default; $btn-border-width: $input-btn-border-width !default; $btn-font-weight: $font-weight-normal !default; $btn-box-shadow: inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default; $btn-focus-width: $input-btn-focus-width !default; -$btn-focus-box-shadow: $input-btn-focus-box-shadow !default; +$btn-focus-offset: $input-btn-focus-width / 2 !default; +$btn-focus-box-shadow: 0 0 0 $btn-focus-offset, 0 0 0 $input-btn-focus-width var(--btn-accent-color) !default; $btn-disabled-opacity: .65 !default; $btn-active-box-shadow: inset 0 3px 5px rgba($black, .125) !default; diff --git a/scss/mixins/_buttons.scss b/scss/mixins/_buttons.scss deleted file mode 100644 index 53a337ba0..000000000 --- a/scss/mixins/_buttons.scss +++ /dev/null @@ -1,121 +0,0 @@ -// Button variants -// -// Easily pump out default styles, as well as :hover, :focus, :active, -// and disabled options for all buttons - -@mixin button-variant( - $background, - $border, - $color: color-contrast($background), - $hover-background: darken($background, 7.5%), - $hover-border: darken($border, 10%), - $hover-color: color-contrast($hover-background), - $active-background: darken($background, 10%), - $active-border: darken($border, 12.5%), - $active-color: color-contrast($active-background) -) { - color: $color; - @include gradient-bg($background); - border-color: $border; - @include box-shadow($btn-box-shadow); - - &:hover { - color: $hover-color; - @include gradient-bg($hover-background); - border-color: $hover-border; - } - - &:focus, - &.focus { - color: $hover-color; - @include gradient-bg($hover-background); - border-color: $hover-border; - // Avoid using mixin so we can pass custom focus shadow properly - @if $enable-shadows { - box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5); - } @else { - box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5); - } - } - - &:active, - &.active, - .show > &.dropdown-toggle { - color: $active-color; - background-color: $active-background; - // Remove CSS gradients if they're enabled - background-image: if($enable-gradients, none, null); - border-color: $active-border; - - &:focus { - // Avoid using mixin so we can pass custom focus shadow properly - @if $enable-shadows and $btn-active-box-shadow != none { - box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5); - } @else { - box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5); - } - } - } - - &:disabled, - &.disabled { - color: $color; - background-color: $background; - // Remove CSS gradients if they're enabled - background-image: if($enable-gradients, none, null); - border-color: $border; - } -} - -@mixin button-outline-variant( - $color, - $color-hover: color-contrast($color), - $active-background: $color, - $active-border: $color, - $active-color: color-contrast($active-background) -) { - color: $color; - border-color: $color; - - &:hover { - color: $color-hover; - background-color: $active-background; - border-color: $active-border; - } - - &:focus, - &.focus { - box-shadow: 0 0 0 $btn-focus-width rgba($color, .5); - } - - &:active, - &.active, - &.dropdown-toggle.show { - color: $active-color; - background-color: $active-background; - border-color: $active-border; - - &:focus { - // Avoid using mixin so we can pass custom focus shadow properly - @if $enable-shadows and $btn-active-box-shadow != none { - box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5); - } @else { - box-shadow: 0 0 0 $btn-focus-width rgba($color, .5); - } - } - } - - &:disabled, - &.disabled { - color: $color; - background-color: transparent; - } -} - -// Button sizes -@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) { - padding: $padding-y $padding-x; - @include font-size($font-size); - // Manually declare to provide an override to the browser default - @include border-radius($border-radius, 0); -} diff --git a/scss/mixins/_gradients.scss b/scss/mixins/_gradients.scss index cecabc913..64187d42d 100644 --- a/scss/mixins/_gradients.scss +++ b/scss/mixins/_gradients.scss @@ -1,14 +1,14 @@ // Gradients -@mixin gradient-bg($color, $foreground: null) { +@mixin gradient-bg($color: null, $foreground: null) { + background-color: $color; + @if $enable-gradients { @if $foreground { - background-image: $foreground, linear-gradient(180deg, mix($body-bg, $color, 15%), $color); + background-image: $foreground, linear-gradient(180deg, rgba($color, .15), transparent); } @else { - background-image: linear-gradient(180deg, mix($body-bg, $color, 15%), $color); + background-image: linear-gradient(180deg, rgba($body-bg, .15), transparent); } - } @else { - background-color: $color; } } diff --git a/site/content/docs/4.3/components/buttons.md b/site/content/docs/4.3/components/buttons.md index b64dfdbec..74b9f45f2 100644 --- a/site/content/docs/4.3/components/buttons.md +++ b/site/content/docs/4.3/components/buttons.md @@ -44,12 +44,12 @@ When using button classes on `` elements that are used to trigger in-page fun ## Outline buttons -In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the `.btn-outline-*` ones to remove all background images and colors on any button. +In need of a button, but not the hefty background colors they bring? Replace the default modifier classes with the `.btn-outline btn-*` ones to remove all background images and colors on any button. {{< example >}} {{< buttons.inline >}} {{- range (index $.Site.Data "theme-colors") }} - + {{- end -}} {{< /buttons.inline >}} {{< /example >}} diff --git a/site/content/docs/4.3/components/navbar.md b/site/content/docs/4.3/components/navbar.md index 4ae3dddc4..8843f1c08 100644 --- a/site/content/docs/4.3/components/navbar.md +++ b/site/content/docs/4.3/components/navbar.md @@ -68,7 +68,7 @@ Here's an example of all the sub-components included in a responsive light-theme
- +
@@ -223,7 +223,7 @@ Place various form controls and components within a navbar:
- +
@@ -237,7 +237,7 @@ Immediate children elements in `.navbar` use flex layout and will default to `ju Navbar
- +
@@ -261,8 +261,8 @@ Various buttons are supported as part of these navbar forms, too. This is also a {{< example >}} {{< /example >}} @@ -338,7 +338,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl
- +
@@ -367,7 +367,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl
- +
@@ -396,7 +396,7 @@ Theming the navbar has never been easier thanks to the combination of theming cl
- +
@@ -512,7 +512,7 @@ With no `.navbar-brand` shown in lowest breakpoint:
- +
@@ -542,7 +542,7 @@ With a brand name shown on the left and toggler on the right:
- +
@@ -572,7 +572,7 @@ With a toggler on the left and brand name on the right:
- +
diff --git a/site/content/docs/4.3/examples/album/index.html b/site/content/docs/4.3/examples/album/index.html index 5219acbba..1178905d0 100644 --- a/site/content/docs/4.3/examples/album/index.html +++ b/site/content/docs/4.3/examples/album/index.html @@ -61,8 +61,8 @@ title: Album example

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

- - + +
9 mins
@@ -76,8 +76,8 @@ title: Album example

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

- - + +
9 mins
@@ -91,8 +91,8 @@ title: Album example

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

- - + +
9 mins
@@ -107,8 +107,8 @@ title: Album example

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

- - + +
9 mins
@@ -122,8 +122,8 @@ title: Album example

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

- - + +
9 mins
@@ -137,8 +137,8 @@ title: Album example

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

- - + +
9 mins
@@ -153,8 +153,8 @@ title: Album example

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

- - + +
9 mins
@@ -168,8 +168,8 @@ title: Album example

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

- - + +
9 mins
@@ -183,8 +183,8 @@ title: Album example

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

- - + +
9 mins
diff --git a/site/content/docs/4.3/examples/blog/index.html b/site/content/docs/4.3/examples/blog/index.html index 42fa9cc9d..d9cc953da 100644 --- a/site/content/docs/4.3/examples/blog/index.html +++ b/site/content/docs/4.3/examples/blog/index.html @@ -20,7 +20,7 @@ include_js: false Search - Sign up + Sign up @@ -149,8 +149,8 @@ include_js: false diff --git a/site/content/docs/4.3/examples/carousel/index.html b/site/content/docs/4.3/examples/carousel/index.html index e5b9f4649..28332933e 100644 --- a/site/content/docs/4.3/examples/carousel/index.html +++ b/site/content/docs/4.3/examples/carousel/index.html @@ -26,7 +26,7 @@ extra_css:
- +
diff --git a/site/content/docs/4.3/examples/dashboard/index.html b/site/content/docs/4.3/examples/dashboard/index.html index 899739a30..f0c275b21 100644 --- a/site/content/docs/4.3/examples/dashboard/index.html +++ b/site/content/docs/4.3/examples/dashboard/index.html @@ -107,10 +107,10 @@ extra_js:

Dashboard

- - + +
- diff --git a/site/content/docs/4.3/examples/navbar-fixed/index.html b/site/content/docs/4.3/examples/navbar-fixed/index.html index d6404f293..61c051b9d 100644 --- a/site/content/docs/4.3/examples/navbar-fixed/index.html +++ b/site/content/docs/4.3/examples/navbar-fixed/index.html @@ -25,7 +25,7 @@ extra_css:
- +
diff --git a/site/content/docs/4.3/examples/navbar-static/index.html b/site/content/docs/4.3/examples/navbar-static/index.html index 0b6c4d273..e5fe16178 100644 --- a/site/content/docs/4.3/examples/navbar-static/index.html +++ b/site/content/docs/4.3/examples/navbar-static/index.html @@ -25,7 +25,7 @@ extra_css:
- +
diff --git a/site/content/docs/4.3/examples/offcanvas/index.html b/site/content/docs/4.3/examples/offcanvas/index.html index cc41316bc..3bce244c5 100644 --- a/site/content/docs/4.3/examples/offcanvas/index.html +++ b/site/content/docs/4.3/examples/offcanvas/index.html @@ -40,7 +40,7 @@ body_class: "bg-light"
- +
diff --git a/site/content/docs/4.3/examples/pricing/index.html b/site/content/docs/4.3/examples/pricing/index.html index 033574d60..ac81c6e6a 100644 --- a/site/content/docs/4.3/examples/pricing/index.html +++ b/site/content/docs/4.3/examples/pricing/index.html @@ -14,7 +14,7 @@ include_js: false Support Pricing - Sign up + Sign up
@@ -36,7 +36,7 @@ include_js: false
  • Email support
  • Help center access
    • - +
    diff --git a/site/content/docs/4.3/examples/product/index.html b/site/content/docs/4.3/examples/product/index.html index 451702103..c5c5a7f92 100644 --- a/site/content/docs/4.3/examples/product/index.html +++ b/site/content/docs/4.3/examples/product/index.html @@ -24,7 +24,7 @@ extra_css:

    Punny headline

    And an even wittier subheading to boot. Jumpstart your marketing efforts with this example based on Apple’s marketing pages.

    - Coming soon + Coming soon
    diff --git a/site/content/docs/4.3/examples/starter-template/index.html b/site/content/docs/4.3/examples/starter-template/index.html index d2869091e..0fa2d431c 100644 --- a/site/content/docs/4.3/examples/starter-template/index.html +++ b/site/content/docs/4.3/examples/starter-template/index.html @@ -34,7 +34,7 @@ extra_css:
    - +
    diff --git a/site/content/docs/4.3/examples/sticky-footer-navbar/index.html b/site/content/docs/4.3/examples/sticky-footer-navbar/index.html index 4203772d7..b9fc9db30 100644 --- a/site/content/docs/4.3/examples/sticky-footer-navbar/index.html +++ b/site/content/docs/4.3/examples/sticky-footer-navbar/index.html @@ -29,7 +29,7 @@ body_class: "d-flex flex-column h-100"
    - +
    diff --git a/site/content/docs/4.3/forms/input-group.md b/site/content/docs/4.3/forms/input-group.md index 5d0e13ac2..05b1ddd6e 100644 --- a/site/content/docs/4.3/forms/input-group.md +++ b/site/content/docs/4.3/forms/input-group.md @@ -127,25 +127,25 @@ Multiple add-ons are supported and can be mixed with checkbox and radio input ve {{< example >}}
    - +
    - +
    - - + +
    - - + +
    {{< /example >}} @@ -153,7 +153,7 @@ Multiple add-ons are supported and can be mixed with checkbox and radio input ve {{< example >}}
    - +