diff --git a/CHANGELOG.md b/CHANGELOG.md index daa715d6c..932f6b88a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -6,6 +6,10 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), ## Unreleased +### Added + +- Tertiary danger button styles (#1280) + ### Fixed - Plugin sidebar panel rerendering (#1279) diff --git a/src/assets/stylesheets/Button.scss b/src/assets/stylesheets/Button.scss index 832cfe328..20002dccc 100644 --- a/src/assets/stylesheets/Button.scss +++ b/src/assets/stylesheets/Button.scss @@ -227,6 +227,23 @@ border: 2px solid transparent; outline: 3px solid $rpf-brand-raspberry; } + + &.btn--tertiary { + background-color: inherit; + color: var(--rpf-button-tertiary-danger-text-color); + + svg { + fill: var(--rpf-button-tertiary-danger-text-color); + } + + &:hover { + background-color: var(--rpf-button-tertiary-danger-background-color-hover); + } + + &:active { + background-color: var(--rpf-button-tertiary-danger-background-color-active); + } + } } &--small { diff --git a/src/assets/stylesheets/index.scss b/src/assets/stylesheets/index.scss index 8cca17a41..e9636b6f9 100644 --- a/src/assets/stylesheets/index.scss +++ b/src/assets/stylesheets/index.scss @@ -96,6 +96,10 @@ code { --rpf-button-secondary-text-color: var(--rpf-white); --rpf-button-tertiary-text-color-hover: var(--rpf-grey-200); + + --rpf-button-tertiary-danger-text-color: var(--rpf-red-600); + --rpf-button-tertiary-danger-background-color-hover: rgba(255, 255, 255, 0.1); + --rpf-button-tertiary-danger-background-color-active: rgba(255, 255, 255, 0.15); } .rpf-button--secondary { @@ -123,6 +127,10 @@ code { --rpf-button-tertiary-text-color-hover: var(--rpf-grey-600); + --rpf-button-tertiary-danger-text-color: var(--rpf-alert-error); + --rpf-button-tertiary-danger-background-color-hover: rgba(0, 0, 0, 0.03); + --rpf-button-tertiary-danger-background-color-active: rgba(0, 0, 0, 0.05); + .rpf-button--secondary { border-color: var(--rpf-teal-800); }