From 8f90b84286fd54e9cd87e68750730b7936f10a24 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?F=C3=A1bio=20Carvalho?= Date: Mon, 17 Apr 2023 18:06:49 +0100 Subject: [PATCH] feat: allow to set background color on outlined button (#514) --- packages/docs-next/components/Button.md | 31 ++++++++++--------- packages/docs/components/Button.md | 31 ++++++++++--------- .../oruga/src/scss/components/_button.scss | 5 +-- packages/oruga/src/scss/oruga.scss | 3 +- 4 files changed, 37 insertions(+), 33 deletions(-) diff --git a/packages/docs-next/components/Button.md b/packages/docs-next/components/Button.md index e342c885a..7ec66a623 100644 --- a/packages/docs-next/components/Button.md +++ b/packages/docs-next/components/Button.md @@ -54,20 +54,21 @@ title: Button 📄 [Full scss file](https://github.com/oruga-ui/oruga/blob/master/packages/oruga/src/scss/components/_button.scss) -| CSS Variable | SASS Variable | Default | -| ------------------------------------ | ------------------------------ | ----------------------------------- | -| --oruga-button-background-color | \$button-background-color | \$primary | -| --oruga-button-color | \$button-color | \$primary-invert | -| --oruga-button-border-radius | \$button-border-radius | \$base-border-radius | -| --oruga-button-border | \$button-border | 1px solid \$button-background-color | -| --oruga-button-box-shadow | \$button-box-shadow | none | -| --oruga-button-font-weight | \$button-font-weight | 400 | -| --oruga-button-line-height | \$button-line-height | \$base-line-height | -| --oruga-button-margin-icon-to-text | \$button-margin-icon-to-text | .1875em | -| --oruga-button-margin | \$button-margin | 0 | -| --oruga-button-height | \$button-height | \$control-height | -| --oruga-button-padding | \$button-padding | \$control-padding-vertical .75em | -| --oruga-button-rounded-border-radius | \$button-rounded-border-radius | \$base-rounded-border-radius | -| --oruga-button-disabled-opacity | \$button-disabled-opacity | \$base-disabled-opacity | +| CSS Variable | SASS Variable | Default | +| ---------------------------------------- | ---------------------------------- | ----------------------------------- | +| --oruga-button-background-color | \$button-background-color | \$primary | +| --oruga-button-color | \$button-color | \$primary-invert | +| --oruga-button-border-radius | \$button-border-radius | \$base-border-radius | +| --oruga-button-border | \$button-border | 1px solid \$button-background-color | +| --oruga-button-box-shadow | \$button-box-shadow | none | +| --oruga-button-font-weight | \$button-font-weight | 400 | +| --oruga-button-line-height | \$button-line-height | \$base-line-height | +| --oruga-button-margin-icon-to-text | \$button-margin-icon-to-text | .1875em | +| --oruga-button-margin | \$button-margin | 0 | +| --oruga-button-height | \$button-height | \$control-height | +| --oruga-button-padding | \$button-padding | \$control-padding-vertical .75em | +| --oruga-button-rounded-border-radius | \$button-rounded-border-radius | \$base-rounded-border-radius | +| --oruga-button-disabled-opacity | \$button-disabled-opacity | \$base-disabled-opacity | +| --oruga-button-outlined-background-color | \$button-outlined-background-color | transparent | diff --git a/packages/docs/components/Button.md b/packages/docs/components/Button.md index 394b3f8e3..e1e6713ad 100644 --- a/packages/docs/components/Button.md +++ b/packages/docs/components/Button.md @@ -323,18 +323,19 @@ export default { ## Style -| CSS Variable | SASS Variable | Default | -| ------------------------------------ | ------------------------------ | ----------------------------------- | -| --oruga-button-background-color | \$button-background-color | \$primary | -| --oruga-button-color | \$button-color | \$primary-invert | -| --oruga-button-border-radius | \$button-border-radius | \$base-border-radius | -| --oruga-button-border | \$button-border | 1px solid \$button-background-color | -| --oruga-button-box-shadow | \$button-box-shadow | none | -| --oruga-button-font-weight | \$button-font-weight | 400 | -| --oruga-button-line-height | \$button-line-height | \$base-line-height | -| --oruga-button-margin-icon-to-text | \$button-margin-icon-to-text | .1875em | -| --oruga-button-margin | \$button-margin | 0 | -| --oruga-button-height | \$button-height | \$control-height | -| --oruga-button-padding | \$button-padding | \$control-padding-vertical .75em | -| --oruga-button-rounded-border-radius | \$button-rounded-border-radius | \$base-rounded-border-radius | -| --oruga-button-disabled-opacity | \$button-disabled-opacity | \$base-disabled-opacity | +| CSS Variable | SASS Variable | Default | +| ---------------------------------------- | ---------------------------------- | ----------------------------------- | +| --oruga-button-background-color | \$button-background-color | \$primary | +| --oruga-button-color | \$button-color | \$primary-invert | +| --oruga-button-border-radius | \$button-border-radius | \$base-border-radius | +| --oruga-button-border | \$button-border | 1px solid \$button-background-color | +| --oruga-button-box-shadow | \$button-box-shadow | none | +| --oruga-button-font-weight | \$button-font-weight | 400 | +| --oruga-button-line-height | \$button-line-height | \$base-line-height | +| --oruga-button-margin-icon-to-text | \$button-margin-icon-to-text | .1875em | +| --oruga-button-margin | \$button-margin | 0 | +| --oruga-button-height | \$button-height | \$control-height | +| --oruga-button-padding | \$button-padding | \$control-padding-vertical .75em | +| --oruga-button-rounded-border-radius | \$button-rounded-border-radius | \$base-rounded-border-radius | +| --oruga-button-disabled-opacity | \$button-disabled-opacity | \$base-disabled-opacity | +| --oruga-button-outlined-background-color | \$button-outlined-background-color | transparent | diff --git a/packages/oruga/src/scss/components/_button.scss b/packages/oruga/src/scss/components/_button.scss index a983e793e..35e1ce19f 100644 --- a/packages/oruga/src/scss/components/_button.scss +++ b/packages/oruga/src/scss/components/_button.scss @@ -13,6 +13,7 @@ $button-height: $control-height !default; $button-padding: $control-padding-vertical .75em !default; $button-rounded-border-radius: $base-rounded-border-radius !default; $button-disabled-opacity: $base-disabled-opacity !default; +$button-outlined-background-color: transparent !default; /* @docs */ @@ -92,7 +93,7 @@ $button-disabled-opacity: $base-disabled-opacity !default; } } &--outlined { - background-color: transparent; + @include avariable('background-color', 'button-outlined-background-color', $button-outlined-background-color); @include avariable('border-color', 'button-background-color', $button-background-color); @include avariable('color', 'button-background-color', $button-background-color); &:hover { @@ -104,7 +105,7 @@ $button-disabled-opacity: $base-disabled-opacity !default; $color: nth($pair, 1); $color-invert: nth($pair, 2); &-#{$name} { - background-color: transparent; + @include avariable('background-color', 'button-outlined-background-color', $button-outlined-background-color); @include avariable('border-color', ('variant-' + #{$name}), $color); @include avariable('color', ('variant-' + #{$name}), $color); &:hover { diff --git a/packages/oruga/src/scss/oruga.scss b/packages/oruga/src/scss/oruga.scss index 7f87b5ca5..cabe7db7f 100644 --- a/packages/oruga/src/scss/oruga.scss +++ b/packages/oruga/src/scss/oruga.scss @@ -18,7 +18,8 @@ $whitelist: add-to-whitelist( $whitelist: add-to-whitelist( 'button-background-color', 'button-color', - 'button-disabled-opacity' + 'button-disabled-opacity', + 'button-outlined-background-color' ); // carousel