refactor: add class to dialog for same css specificity

qupaya · May 8, 2024 · 41d2343 · 41d2343
1 parent e184155
commit 41d2343
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 4 deletions.
diff --git a/libs/sketch/src/index.ts b/libs/sketch/src/index.ts
@@ -1,4 +1,4 @@
 export * from './lib/components/sketch/sketch.component';
 export * from './lib/components/select';
 export * from './lib/components/list';
-export * from './lib/components/dialog/dialog.component';
+export * from './lib/components/dialog/dialog.component';
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()"