From 7e1a45dd0ea7b7bf660757128f0855b1e0520f60 Mon Sep 17 00:00:00 2001 From: Jason Baker Date: Mon, 8 Jul 2024 18:13:47 -0700 Subject: [PATCH] fix(hover): corrects minor visual jump in close button on hover --- demo/api.md | 2 +- src/color.scss | 6 ++++-- src/tokens.scss | 12 ++++++------ 3 files changed, 11 insertions(+), 9 deletions(-) diff --git a/demo/api.md b/demo/api.md index d2c7d3e..3843978 100644 --- a/demo/api.md +++ b/demo/api.md @@ -185,7 +185,7 @@ The component may be restyled using the following code sample and changing the v --ds-auro-toast-border-color: var(--ds-color-border-divider-default, $ds-color-border-divider-default); --ds-auro-toast-close-button-icon-color: var(--ds-color-text-primary-inverse, $ds-color-text-primary-inverse); --ds-auro-toast-close-button-background-color: transparent; - --ds-auro-toast-close-button-border-color: var(--ds-color-border-divider-default, $ds-color-border-divider-default); + --ds-auro-toast-close-button-border-color: transparent; --ds-auro-toast-icon-color: var(--ds-color-text-primary-inverse, $ds-color-text-primary-inverse); --ds-auro-toast-text-color: var(--ds-color-text-primary-inverse, $ds-color-text-primary-inverse); } diff --git a/src/color.scss b/src/color.scss index b39b9fb..ff560a7 100644 --- a/src/color.scss +++ b/src/color.scss @@ -15,12 +15,14 @@ } .closeButton { + border-width: 1px; + border-style: solid; + border-color: var(--ds-auro-toast-close-button-border-color); background-color: var(--ds-auro-toast-close-button-background-color); color: var(--ds-auro-toast-close-button-icon-color); &:hover { - border: 1px solid var(--ds-auro-toast-close-button-border-color); - + --ds-auro-toast-close-button-border-color: var(--ds-color-border-divider-default, $ds-color-border-divider-default); --ds-auro-toast-close-button-background-color: var(--ds-color-container-ui-tertiary-active-default, $ds-color-container-ui-tertiary-active-default); } } diff --git a/src/tokens.scss b/src/tokens.scss index 6683f89..a586a22 100644 --- a/src/tokens.scss +++ b/src/tokens.scss @@ -1,9 +1,9 @@ :host { - --ds-auro-toast-background-color: var(--ds-color-brand-gray-400, $ds-color-brand-gray-400); - --ds-auro-toast-border-color: var(--ds-color-border-divider-default, $ds-color-border-divider-default); - --ds-auro-toast-close-button-icon-color: var(--ds-color-text-primary-inverse, $ds-color-text-primary-inverse); + --ds-auro-toast-background-color: var(--ds-color-brand-gray-400, #{$ds-color-brand-gray-400}); + --ds-auro-toast-border-color: var(--ds-color-border-divider-default, #{$ds-color-border-divider-default}); + --ds-auro-toast-close-button-icon-color: var(--ds-color-text-primary-inverse, #{$ds-color-text-primary-inverse}); --ds-auro-toast-close-button-background-color: transparent; - --ds-auro-toast-close-button-border-color: var(--ds-color-border-divider-default, $ds-color-border-divider-default); - --ds-auro-toast-icon-color: var(--ds-color-text-primary-inverse, $ds-color-text-primary-inverse); - --ds-auro-toast-text-color: var(--ds-color-text-primary-inverse, $ds-color-text-primary-inverse); + --ds-auro-toast-close-button-border-color: transparent; + --ds-auro-toast-icon-color: var(--ds-color-text-primary-inverse, #{$ds-color-text-primary-inverse}); + --ds-auro-toast-text-color: var(--ds-color-text-primary-inverse, #{$ds-color-text-primary-inverse}); }