diff --git a/sandbox/pages/SandboxAlert.vue b/sandbox/pages/SandboxAlert.vue index 38a00cb5a2..606150761a 100644 --- a/sandbox/pages/SandboxAlert.vue +++ b/sandbox/pages/SandboxAlert.vue @@ -18,24 +18,52 @@ + > + This is info alert. + + Link + + + > + This is success alert. + + Link + + + > + This is warning alert. + + Link + + + > + This is danger alert. + + Link + + { @mixin kAlertAppearance( $backgroundColor: var(--kui-color-background-primary-weakest, $kui-color-background-primary-weakest), $textColor: var(--kui-color-text-primary, $kui-color-text-primary), - $dismissIconHoverColor: var(--kui-color-text-primary-strong, $kui-color-text-primary-strong)) { + $hoverColor: var(--kui-color-text-primary-strong, $kui-color-text-primary-strong)) { background-color: $backgroundColor; color: $textColor; .alert-dismiss-icon { &:hover, &:focus { - color: $dismissIconHoverColor !important; + color: $hoverColor !important; + } + } + + .alert-content { + .alert-message { + :slotted(a) { + color: $textColor; + + &:hover { + color: $hoverColor; + } + } } } }