@syncfusion/blazor-themes 23.2.7 → 24.1.41

package/SCSS-Themes/notifications/message/fabric-dark.scss

@@ -9,24 +9,28 @@ $msg-padding: 6px 7px !default;
 $msg-border-radius: 0 !default;
 $msg-icon-size: 14px !default;
 $msg-icon-margin: 2px 4px !default;
-$msg-close-icon-margin: 3px 4px 3px auto !default;
+$msg-close-icon-margin: 0 1px 0 auto !default;
 $msg-close-icon-size: 12px !default;
+$msg-close-icon-padding: 3px !default;
+$msg-close-icon-height: 18px !default;
 $msg-content-font-size: 12px !default;
 $msg-content-line-height: 18px !default;
 $msg-content-padding: 0 4px !default;
 
-$msg-rtl-close-icon-margin: 3px auto 3px 4px !default;
+$msg-rtl-close-icon-margin: 0 auto 0 1px !default;
 
 $msg-bigger-padding: 7px 9px !default;
 $msg-bigger-icon-size: 16px !default;
 $msg-bigger-icon-margin: 4px 6px !default;
-$msg-bigger-close-icon-margin: 5px 6px 5px auto !default;
+$msg-bigger-close-icon-margin: 1px 2px 1px auto !default;
 $msg-bigger-close-icon-size: 14px !default;
+$msg-bigger-close-icon-padding: 4px !default;
+$msg-bigger-close-icon-height: 22px !default;
 $msg-bigger-content-font-size: 16px !default;
 $msg-bigger-content-line-height: 24px !default;
 $msg-bigger-content-padding: 0 6px !default;
 
-$msg-bigger-rtl-close-icon-margin: 5px auto 5px 6px !default;
+$msg-bigger-rtl-close-icon-margin: 1px auto 1px 2px !default;
 
 // Color variables
 // Text
@@ -51,11 +55,17 @@ $msg-success-icon-color: $msg-success-icon-color !default;
 $msg-warning-icon-color: $msg-warning-icon-color !default;
 $msg-info-icon-color: $msg-info-icon-color !default;
 $msg-error-icon-color: $msg-danger-icon-color !default;
+
 $msg-close-icon-color: $msg-close-icon-color !default;
+$msg-close-icon-hover-bg-color: rgba($msg-close-icon-color, .12) !default;
 $msg-success-close-icon-color: $msg-success-close-icon-color !default;
+$msg-success-close-icon-hover-bg-color: rgba($msg-success-close-icon-color, .12) !default;
 $msg-warning-close-icon-color: $msg-warning-close-icon-color !default;
+$msg-warning-close-icon-hover-bg-color: rgba($msg-warning-close-icon-color, .12) !default;
 $msg-info-close-icon-color: $msg-info-close-icon-color !default;
+$msg-info-close-icon-hover-bg-color: rgba($msg-info-close-icon-color, .12) !default;
 $msg-error-close-icon-color: $msg-danger-close-icon-color !default;
+$msg-error-close-icon-hover-bg-color: rgba($msg-error-close-icon-color, .12) !default;
 
 // Outlined
 $msg-outline-color: $msg-color-alt1 !default;
@@ -75,11 +85,17 @@ $msg-outline-success-icon-color: $msg-success-icon-color-alt1 !default;
 $msg-outline-warning-icon-color: $msg-warning-icon-color-alt1 !default;
 $msg-outline-info-icon-color: $msg-info-icon-color-alt1 !default;
 $msg-outline-error-icon-color: $msg-danger-icon-color-alt1 !default;
+
 $msg-outline-close-icon-color: $msg-close-icon-color-alt1 !default;
+$msg-outline-close-icon-hover-bg-color: rgba($msg-outline-close-icon-color, .12) !default;
 $msg-outline-success-close-icon-color: $msg-success-close-icon-color-alt1 !default;
+$msg-outline-success-close-icon-hover-bg-color: rgba($msg-outline-success-close-icon-color, .12) !default;
 $msg-outline-warning-close-icon-color: $msg-warning-close-icon-color-alt1 !default;
+$msg-outline-warning-close-icon-hover-bg-color: rgba($msg-outline-warning-close-icon-color, .12) !default;
 $msg-outline-info-close-icon-color: $msg-info-close-icon-color-alt1 !default;
+$msg-outline-info-close-icon-hover-bg-color: rgba($msg-outline-info-close-icon-color, .12) !default;
 $msg-outline-error-close-icon-color: $msg-danger-close-icon-color-alt1 !default;
+$msg-outline-error-close-icon-hover-bg-color: rgba($msg-outline-error-close-icon-color, .12) !default;
 
 // Filled
 $msg-filled-color: $msg-color-alt2 !default;
@@ -103,11 +119,17 @@ $msg-filled-success-icon-color: $msg-success-icon-color-alt2 !default;
 $msg-filled-warning-icon-color: $msg-warning-icon-color-alt2 !default;
 $msg-filled-info-icon-color: $msg-info-icon-color-alt2 !default;
 $msg-filled-error-icon-color: $msg-danger-icon-color-alt2 !default;
+
 $msg-filled-close-icon-color: $msg-close-icon-color-alt2 !default;
+$msg-filled-close-icon-hover-bg-color: rgba($msg-filled-close-icon-color, .12) !default;
 $msg-filled-success-close-icon-color: $msg-success-close-icon-color-alt2 !default;
+$msg-filled-success-close-icon-hover-bg-color: rgba($msg-filled-success-close-icon-color, .12) !default;
 $msg-filled-warning-close-icon-color: $msg-warning-close-icon-color-alt2 !default;
+$msg-filled-warning-close-icon-hover-bg-color: rgba($msg-filled-warning-close-icon-color, .12) !default;
 $msg-filled-info-close-icon-color: $msg-info-close-icon-color-alt2 !default;
+$msg-filled-info-close-icon-hover-bg-color: rgba($msg-filled-info-close-icon-color, .12) !default;
 $msg-filled-error-close-icon-color: $msg-danger-close-icon-color-alt2 !default;
+$msg-filled-error-close-icon-hover-bg-color: rgba($msg-filled-error-close-icon-color, .12) !default;
 
 @include export-module('message-layout') {
 
@@ -143,13 +165,8 @@ $msg-filled-error-close-icon-color: $msg-danger-close-icon-color-alt2 !default;
       cursor: pointer;
       font-size: $msg-close-icon-size;
       margin: $msg-close-icon-margin;
-      padding: 0;
-      @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'highcontrast') {
-        height: $msg-close-icon-size;
-      }
-      @else {
-        height: $msg-icon-size;
-      }
+      padding: $msg-close-icon-padding;
+      height: $msg-close-icon-height;
     }
 
     .e-msg-content {
@@ -201,12 +218,8 @@ $msg-filled-error-close-icon-color: $msg-danger-close-icon-color-alt2 !default;
     .e-msg-close-icon {
       font-size: $msg-bigger-close-icon-size;
       margin: $msg-bigger-close-icon-margin;
-      @if ($skin-name == 'fabric' or $skin-name == 'fabric-dark' or $skin-name == 'highcontrast') {
-        height: $msg-bigger-close-icon-size;
-      }
-      @else {
-        height: $msg-bigger-icon-size;
-      }
+      padding: $msg-bigger-close-icon-padding;
+      height: $msg-bigger-close-icon-height;
     }
 
     .e-msg-content {
@@ -247,6 +260,13 @@ $msg-filled-error-close-icon-color: $msg-danger-close-icon-color-alt2 !default;
     .e-msg-close-icon {
       background: transparent;
       color: $msg-close-icon-color;
+
+      &:hover,
+      &:focus {
+        background-color: $msg-close-icon-hover-bg-color;
+        box-shadow: 0 0 0 2px $msg-close-icon-hover-bg-color;
+        border-radius: 50%;
+      }
     }
 
     &.e-success {
@@ -260,6 +280,12 @@ $msg-filled-error-close-icon-color: $msg-danger-close-icon-color-alt2 !default;
 
       .e-msg-close-icon {
         color: $msg-success-close-icon-color;
+
+        &:hover,
+        &:focus {
+          background-color: $msg-success-close-icon-hover-bg-color;
+          box-shadow: 0 0 0 2px $msg-success-close-icon-hover-bg-color;
+        }
       }
     }
 
@@ -274,6 +300,12 @@ $msg-filled-error-close-icon-color: $msg-danger-close-icon-color-alt2 !default;
 
       .e-msg-close-icon {
         color: $msg-warning-close-icon-color;
+
+        &:hover,
+        &:focus {
+          background-color: $msg-warning-close-icon-hover-bg-color;
+          box-shadow: 0 0 0 2px $msg-warning-close-icon-hover-bg-color;
+        }
       }
     }
 
@@ -288,6 +320,12 @@ $msg-filled-error-close-icon-color: $msg-danger-close-icon-color-alt2 !default;
 
       .e-msg-close-icon {
         color: $msg-info-close-icon-color;
+
+        &:hover,
+        &:focus {
+          background-color: $msg-info-close-icon-hover-bg-color;
+          box-shadow: 0 0 0 2px $msg-info-close-icon-hover-bg-color;
+        }
       }
     }
 
@@ -302,6 +340,12 @@ $msg-filled-error-close-icon-color: $msg-danger-close-icon-color-alt2 !default;
 
       .e-msg-close-icon {
         color: $msg-error-close-icon-color;
+
+        &:hover,
+        &:focus {
+          background-color: $msg-error-close-icon-hover-bg-color;
+          box-shadow: 0 0 0 2px $msg-error-close-icon-hover-bg-color;
+        }
       }
     }
 
@@ -319,6 +363,12 @@ $msg-filled-error-close-icon-color: $msg-danger-close-icon-color-alt2 !default;
 
       .e-msg-close-icon {
         color: $msg-outline-close-icon-color;
+
+        &:hover,
+        &:focus {
+          background-color: $msg-outline-close-icon-hover-bg-color;
+          box-shadow: 0 0 0 2px $msg-outline-close-icon-hover-bg-color;
+        }
       }
 
       &.e-success {
@@ -331,6 +381,12 @@ $msg-filled-error-close-icon-color: $msg-danger-close-icon-color-alt2 !default;
 
         .e-msg-close-icon {
           color: $msg-outline-success-close-icon-color;
+
+          &:hover,
+          &:focus {
+            background-color: $msg-outline-success-close-icon-hover-bg-color;
+            box-shadow: 0 0 0 2px $msg-outline-success-close-icon-hover-bg-color;
+          }
         }
       }
 
@@ -344,6 +400,12 @@ $msg-filled-error-close-icon-color: $msg-danger-close-icon-color-alt2 !default;
 
         .e-msg-close-icon {
           color: $msg-outline-warning-close-icon-color;
+
+          &:hover,
+          &:focus {
+            background-color: $msg-outline-warning-close-icon-hover-bg-color;
+            box-shadow: 0 0 0 2px $msg-outline-warning-close-icon-hover-bg-color;
+          }
         }
       }
 
@@ -357,6 +419,12 @@ $msg-filled-error-close-icon-color: $msg-danger-close-icon-color-alt2 !default;
 
         .e-msg-close-icon {
           color: $msg-outline-info-close-icon-color;
+
+          &:hover,
+          &:focus {
+            background-color: $msg-outline-info-close-icon-hover-bg-color;
+            box-shadow: 0 0 0 2px $msg-outline-info-close-icon-hover-bg-color;
+          }
         }
       }
 
@@ -370,6 +438,12 @@ $msg-filled-error-close-icon-color: $msg-danger-close-icon-color-alt2 !default;
 
         .e-msg-close-icon {
           color: $msg-outline-error-close-icon-color;
+
+          &:hover,
+          &:focus {
+            background-color: $msg-outline-error-close-icon-hover-bg-color;
+            box-shadow: 0 0 0 2px $msg-outline-error-close-icon-hover-bg-color;
+          }
         }
       }
     }
@@ -388,6 +462,12 @@ $msg-filled-error-close-icon-color: $msg-danger-close-icon-color-alt2 !default;
 
       .e-msg-close-icon {
         color: $msg-filled-close-icon-color;
+
+        &:hover,
+        &:focus {
+          background-color: $msg-filled-close-icon-hover-bg-color;
+          box-shadow: 0 0 0 2px $msg-filled-close-icon-hover-bg-color;
+        }
       }
 
       &.e-success {
@@ -401,6 +481,12 @@ $msg-filled-error-close-icon-color: $msg-danger-close-icon-color-alt2 !default;
 
         .e-msg-close-icon {
           color: $msg-filled-success-close-icon-color;
+
+          &:hover,
+          &:focus {
+            background-color: $msg-filled-success-close-icon-hover-bg-color;
+            box-shadow: 0 0 0 2px $msg-filled-success-close-icon-hover-bg-color;
+          }
         }
       }
 
@@ -415,6 +501,12 @@ $msg-filled-error-close-icon-color: $msg-danger-close-icon-color-alt2 !default;
 
         .e-msg-close-icon {
           color: $msg-filled-warning-close-icon-color;
+
+          &:hover,
+          &:focus {
+            background-color: $msg-filled-warning-close-icon-hover-bg-color;
+            box-shadow: 0 0 0 2px $msg-filled-warning-close-icon-hover-bg-color;
+          }
         }
       }
 
@@ -429,6 +521,12 @@ $msg-filled-error-close-icon-color: $msg-danger-close-icon-color-alt2 !default;
 
         .e-msg-close-icon {
           color: $msg-filled-info-close-icon-color;
+
+          &:hover,
+          &:focus {
+            background-color: $msg-filled-info-close-icon-hover-bg-color;
+            box-shadow: 0 0 0 2px $msg-filled-info-close-icon-hover-bg-color;
+          }
         }
       }
 
@@ -443,6 +541,148 @@ $msg-filled-error-close-icon-color: $msg-danger-close-icon-color-alt2 !default;
 
         .e-msg-close-icon {
           color: $msg-filled-error-close-icon-color;
+
+          &:hover,
+          &:focus {
+            background-color: $msg-filled-error-close-icon-hover-bg-color;
+            box-shadow: 0 0 0 2px $msg-filled-error-close-icon-hover-bg-color;
+          }
+        }
+      }
+    }
+  }
+
+  .e-bigger .e-message,
+  .e-message.e-bigger {
+    .e-msg-close-icon {
+      &:hover,
+      &:focus {
+        box-shadow: 0 0 0 4px $msg-close-icon-hover-bg-color;
+      }
+    }
+
+    &.e-success {
+      .e-msg-close-icon {
+        &:hover,
+        &:focus {
+          box-shadow: 0 0 0 4px $msg-success-close-icon-hover-bg-color;
+        }
+      }
+    }
+
+    &.e-warning {
+      .e-msg-close-icon {
+        &:hover,
+        &:focus {
+          box-shadow: 0 0 0 4px $msg-warning-close-icon-hover-bg-color;
+        }
+      }
+    }
+
+    &.e-info {
+      .e-msg-close-icon {
+        &:hover,
+        &:focus {
+          box-shadow: 0 0 0 4px $msg-info-close-icon-hover-bg-color;
+        }
+      }
+    }
+
+    &.e-error {
+      .e-msg-close-icon {
+        &:hover,
+        &:focus {
+          box-shadow: 0 0 0 4px $msg-error-close-icon-hover-bg-color;
+        }
+      }
+    }
+
+    &.e-outlined {
+      .e-msg-close-icon {
+        &:hover,
+        &:focus {
+          box-shadow: 0 0 0 4px $msg-outline-close-icon-hover-bg-color;
+        }
+      }
+
+      &.e-success {
+        .e-msg-close-icon {
+          &:hover,
+          &:focus {
+            box-shadow: 0 0 0 4px $msg-outline-success-close-icon-hover-bg-color;
+          }
+        }
+      }
+
+      &.e-warning {
+        .e-msg-close-icon {
+          &:hover,
+          &:focus {
+            box-shadow: 0 0 0 4px $msg-outline-warning-close-icon-hover-bg-color;
+          }
+        }
+      }
+
+      &.e-info {
+        .e-msg-close-icon {
+          &:hover,
+          &:focus {
+            box-shadow: 0 0 0 4px $msg-outline-info-close-icon-hover-bg-color;
+          }
+        }
+      }
+
+      &.e-error {
+        .e-msg-close-icon {
+          &:hover,
+          &:focus {
+            box-shadow: 0 0 0 4px $msg-outline-error-close-icon-hover-bg-color;
+          }
+        }
+      }
+    }
+
+    &.e-filled {
+      .e-msg-close-icon {
+        &:hover,
+        &:focus {
+          box-shadow: 0 0 0 4px $msg-filled-close-icon-hover-bg-color;
+        }
+      }
+
+      &.e-success {
+        .e-msg-close-icon {
+          &:hover,
+          &:focus {
+            box-shadow: 0 0 0 4px $msg-filled-success-close-icon-hover-bg-color;
+          }
+        }
+      }
+
+      &.e-warning {
+        .e-msg-close-icon {
+          &:hover,
+          &:focus {
+            box-shadow: 0 0 0 4px $msg-filled-warning-close-icon-hover-bg-color;
+          }
+        }
+      }
+
+      &.e-info {
+        .e-msg-close-icon {
+          &:hover,
+          &:focus {
+            box-shadow: 0 0 0 4px $msg-filled-info-close-icon-hover-bg-color;
+          }
+        }
+      }
+
+      &.e-error {
+        .e-msg-close-icon {
+          &:hover,
+          &:focus {
+            box-shadow: 0 0 0 4px $msg-filled-error-close-icon-hover-bg-color;
+          }
         }
       }
     }