diff --git a/CHANGELOG.md b/CHANGELOG.md index af9584bf..9d78f7f0 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -2,6 +2,10 @@ ## 0.9.2 +### New features + +* Fix #1583 New `is-ghost` button that behaves / looks like a regular link + ### Bug fixes * #3005 Fix `column` offsets in RTL diff --git a/docs/css/bulma-docs.css b/docs/css/bulma-docs.css index 9ad23d81..e66856d8 100644 --- a/docs/css/bulma-docs.css +++ b/docs/css/bulma-docs.css @@ -540,6 +540,18 @@ fieldset[disabled] .button.is-text { box-shadow: none; } +.button.is-ghost { + background: none; + border-color: transparent; + color: #3273dc; + text-decoration: none; +} + +.button.is-ghost:hover, .button.is-ghost.is-hovered { + color: #3273dc; + text-decoration: underline; +} + .button.is-white { background-color: white; border-color: transparent; diff --git a/docs/documentation/elements/button.html b/docs/documentation/elements/button.html index f4ebe36d..66b8be06 100644 --- a/docs/documentation/elements/button.html +++ b/docs/documentation/elements/button.html @@ -31,6 +31,7 @@ meta: + {% endcapture %} {% capture button_colors_b_example %} diff --git a/sass/elements/button.sass b/sass/elements/button.sass index 9e78de5a..5a1c55ac 100644 --- a/sass/elements/button.sass +++ b/sass/elements/button.sass @@ -24,6 +24,13 @@ $button-text-decoration: underline !default $button-text-hover-background-color: $background !default $button-text-hover-color: $text-strong !default +$button-ghost-background: none !default +$button-ghost-border-color: transparent !default +$button-ghost-color: $link !default +$button-ghost-decoration: none !default +$button-ghost-hover-color: $link !default +$button-ghost-hover-decoration: underline !default + $button-disabled-background-color: $scheme-main !default $button-disabled-border-color: $border !default $button-disabled-shadow: none !default @@ -117,6 +124,15 @@ $button-colors: $colors !default background-color: transparent border-color: transparent box-shadow: none + &.is-ghost + background: $button-ghost-background + border-color: $button-ghost-border-color + color: $button-ghost-color + text-decoration: $button-ghost-decoration + &:hover, + &.is-hovered + color: $button-ghost-hover-color + text-decoration: $button-ghost-hover-decoration @each $name, $pair in $button-colors $color: nth($pair, 1) $color-invert: nth($pair, 2)