Skip to content

Commit

Permalink
feat: allow to set background color on outlined button (#514)
Browse files Browse the repository at this point in the history
  • Loading branch information
@fabiiomiiguel
fabiiomiiguel committed Apr 17, 2023
1 parent 26e90af commit 8f90b84
Show file tree
Hide file tree
Showing 4 changed files with 37 additions and 33 deletions.
31 changes: 16 additions & 15 deletions packages/docs-next/components/Button.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 |

</div>
31 changes: 16 additions & 15 deletions packages/docs/components/Button.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 |
5 changes: 3 additions & 2 deletions packages/oruga/src/scss/components/_button.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 */


Expand Down Expand Up @@ -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 {
Expand All @@ -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 {
Expand Down
3 changes: 2 additions & 1 deletion packages/oruga/src/scss/oruga.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down

0 comments on commit 8f90b84

Please sign in to comment.