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;
+ }
+ }
}
}
}