From 5fb76e23840346a8df4a120fc99143966c1455c6 Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Fri, 21 Apr 2023 10:35:17 +0200 Subject: [PATCH 1/5] Fix? --- scss/_buttons.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/scss/_buttons.scss b/scss/_buttons.scss index bd9a4fe536..09618e30f6 100644 --- a/scss/_buttons.scss +++ b/scss/_buttons.scss @@ -107,9 +107,9 @@ .btn-light, .btn-secondary { - @include button-variant($white, $black, $disabled-background: $white, $disabled-border: $gray-500, $disabled-color: $gray-500); + @include button-variant(transparent, $black, $disabled-background: $white, $disabled-border: $gray-500, $disabled-color: $gray-500); &.btn-inverse { - @include button-variant($black, $white, $white, $white, $white, $black, $primary, $primary, $black, transparent, $gray-700, $gray-700, $black); + @include button-variant(transparent, $white, $white, $white, $white, $black, $primary, $primary, $black, transparent, $gray-700, $gray-700, $black); } } From ff63358558ff727ac0e3a0ae5617ea13cc95d9c5 Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Fri, 21 Apr 2023 10:39:21 +0200 Subject: [PATCH 2/5] . --- site/content/docs/5.3/migration.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/site/content/docs/5.3/migration.md b/site/content/docs/5.3/migration.md index c177aa1dea..8d40a26f98 100644 --- a/site/content/docs/5.3/migration.md +++ b/site/content/docs/5.3/migration.md @@ -64,6 +64,9 @@ Learn more by reading the new [color modes documentation]({{< docsref "/customiz - Deprecated The `.alert-variant()` mixin is now deprecated. We now [use a Sass loop]({{< docsref "/components/alerts#sass-loops" >}}) directly to modify the component's default CSS variables for each variant. +- **Buttons** + - Warning The `.btn-secondary` now has a transparent background for default state. Please check that it doesn't break any of your design. + - **Cards** - Cards now have a `color` set on them to improve rendering across color modes. From 4f0edab7267b130f04ea74b830b264da03f3024c Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Mon, 24 Apr 2023 14:28:07 +0200 Subject: [PATCH 3/5] fix(review) --- scss/_buttons.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/scss/_buttons.scss b/scss/_buttons.scss index 09618e30f6..4a9912538f 100644 --- a/scss/_buttons.scss +++ b/scss/_buttons.scss @@ -107,7 +107,7 @@ .btn-light, .btn-secondary { - @include button-variant(transparent, $black, $disabled-background: $white, $disabled-border: $gray-500, $disabled-color: $gray-500); + @include button-variant(transparent, $black, $black, $disabled-background: $white, $disabled-border: $gray-500, $disabled-color: $gray-500); &.btn-inverse { @include button-variant(transparent, $white, $white, $white, $white, $black, $primary, $primary, $black, transparent, $gray-700, $gray-700, $black); } From 7586525dcba13cfc3e68c216845853f1b5aec896 Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Wed, 26 Apr 2023 18:36:47 +0200 Subject: [PATCH 4/5] ? --- scss/_back-to-top.scss | 1 + scss/_button-group.scss | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/scss/_back-to-top.scss b/scss/_back-to-top.scss index 1363f981e3..3dc6a59d99 100644 --- a/scss/_back-to-top.scss +++ b/scss/_back-to-top.scss @@ -44,6 +44,7 @@ position: sticky; top: var(--#{$prefix}back-to-top-link-offset-top); pointer-events: all; + background-color: var(--#{$prefix}back-to-top-title-bg-color); // Boosted mod @include button-icon(var(--#{$prefix}back-to-top-link-icon), $size: var(--#{$prefix}back-to-top-link-width) var(--#{$prefix}back-to-top-link-height), $pseudo: "after", $position: calc(50% - 1px)); &::after { diff --git a/scss/_button-group.scss b/scss/_button-group.scss index dc2e795f0e..08b356c91b 100644 --- a/scss/_button-group.scss +++ b/scss/_button-group.scss @@ -89,7 +89,7 @@ .btn-group:not(.dropstart) &, .dropstart & ~ .btn { &:not(:hover):not(:focus):not(:active):not(.show) { - border-left-color: transparent; + border-left-color: var(--#{$prefix}highlight-color); // Not a big fan &::before { position: absolute; From 439dd7d2849ea507dbc87f8667c111b7a6f3308d Mon Sep 17 00:00:00 2001 From: "louismaxime.piton" Date: Thu, 27 Apr 2023 14:51:44 +0200 Subject: [PATCH 5/5] fix --- scss/_back-to-top.scss | 1 - scss/_button-group.scss | 2 +- scss/_buttons.scss | 13 ++++++++++--- site/content/docs/5.3/components/buttons.md | 11 ++++++++++- site/content/docs/5.3/migration.md | 2 +- 5 files changed, 22 insertions(+), 7 deletions(-) diff --git a/scss/_back-to-top.scss b/scss/_back-to-top.scss index 3dc6a59d99..1363f981e3 100644 --- a/scss/_back-to-top.scss +++ b/scss/_back-to-top.scss @@ -44,7 +44,6 @@ position: sticky; top: var(--#{$prefix}back-to-top-link-offset-top); pointer-events: all; - background-color: var(--#{$prefix}back-to-top-title-bg-color); // Boosted mod @include button-icon(var(--#{$prefix}back-to-top-link-icon), $size: var(--#{$prefix}back-to-top-link-width) var(--#{$prefix}back-to-top-link-height), $pseudo: "after", $position: calc(50% - 1px)); &::after { diff --git a/scss/_button-group.scss b/scss/_button-group.scss index 08b356c91b..dc2e795f0e 100644 --- a/scss/_button-group.scss +++ b/scss/_button-group.scss @@ -89,7 +89,7 @@ .btn-group:not(.dropstart) &, .dropstart & ~ .btn { &:not(:hover):not(:focus):not(:active):not(.show) { - border-left-color: var(--#{$prefix}highlight-color); // Not a big fan + border-left-color: transparent; &::before { position: absolute; diff --git a/scss/_buttons.scss b/scss/_buttons.scss index 4a9912538f..3690eef657 100644 --- a/scss/_buttons.scss +++ b/scss/_buttons.scss @@ -107,9 +107,9 @@ .btn-light, .btn-secondary { - @include button-variant(transparent, $black, $black, $disabled-background: $white, $disabled-border: $gray-500, $disabled-color: $gray-500); + @include button-variant($white, $black, $disabled-background: $white, $disabled-border: $gray-500, $disabled-color: $gray-500); &.btn-inverse { - @include button-variant(transparent, $white, $white, $white, $white, $black, $primary, $primary, $black, transparent, $gray-700, $gray-700, $black); + @include button-variant($black, $white, $white, $white, $white, $black, $primary, $primary, $black, transparent, $gray-700, $gray-700, $black); } } @@ -137,7 +137,14 @@ // scss-docs-end btn-variant-loops // End mod -// Boosted mod: no .btn-outline +// Boosted mod: only secondary variant +.btn-outline-secondary { + @include button-variant(transparent, $black, $black, $disabled-background: $white, $disabled-border: $gray-500, $disabled-color: $gray-500); + &.btn-inverse { + @include button-variant(transparent, $white, $white, $white, $white, $black, $primary, $primary, $black, transparent, $gray-700, $gray-700, $black); + } +} +// End mod // Boosted mod: border-only on :hover and :active .btn-no-outline { diff --git a/site/content/docs/5.3/components/buttons.md b/site/content/docs/5.3/components/buttons.md index d12a151267..5701543e12 100644 --- a/site/content/docs/5.3/components/buttons.md +++ b/site/content/docs/5.3/components/buttons.md @@ -207,8 +207,17 @@ When using button classes on `` elements that are used to trigger in-page fun {{< /example >}} - +## Outline buttons +In need of a button with a transparent default background color? Replace the default modifier classes with the `.btn-outline-secondary` one to remove all background colors on buttons. + +{{< example class="bg-supporting-blue" >}} + +{{< /example >}} + +{{< callout info >}} +This button should only be used on a light background in order to have sufficient contrast, otherwise use its dark variant. +{{< /callout >}} ## Sizes diff --git a/site/content/docs/5.3/migration.md b/site/content/docs/5.3/migration.md index fb379c2e22..37e9367d94 100644 --- a/site/content/docs/5.3/migration.md +++ b/site/content/docs/5.3/migration.md @@ -65,7 +65,7 @@ Learn more by reading the new [color modes documentation]({{< docsref "/customiz - Deprecated The `.alert-variant()` mixin is now deprecated. We now [use a Sass loop]({{< docsref "/components/alerts#sass-loops" >}}) directly to modify the component's default CSS variables for each variant. - **Buttons** - - Warning The `.btn-secondary` now has a transparent background for default state. Please check that it doesn't break any of your design. + - New Outlined button `.btn-outline-secondary` is now provided. It is basically `.btn-secondary` with default transparent background. - **Cards** - Cards now have a `color` set on them to improve rendering across color modes.