refactor: add class to dialog for same css specificity

qupaya · May 8, 2024 · 07f1996 · 07f1996
1 parent e184155
commit 07f1996
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 3 deletions.
diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.css b/libs/sketch/src/lib/components/dialog/dialog.component.css
@@ -15,7 +15,7 @@
   --sk-dialog-backdrop-blur: 0;
 }
 
-dialog {
+.sk-dialog {
   width: var(--sk-dialog-width);
   height: var(--sk-dialog-height);
   max-width: 100%;
@@ -26,13 +26,13 @@ dialog {
   background-color: transparent;
 }
 
-dialog:has(::backdrop) {
+.sk-dialog:has(::backdrop) {
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
-dialog::backdrop {
+.sk-dialog::backdrop {
   background: var(--sk-dialog-backdrop);
   backdrop-filter: blur(var(--sk-dialog-backdrop-blur));
 }

diff --git a/libs/sketch/src/lib/components/dialog/dialog.component.html b/libs/sketch/src/lib/components/dialog/dialog.component.html
@@ -1,4 +1,5 @@
 <dialog
+  class="sk-dialog"
   #dialogElement
   skClickBackdrop
   (clickedBackdrop)="close.emit()"