fix(Modal): avoid breaking changes due to specificity

the previous commit caused modal to have (0, 2, 0), which caused it to override user-defined className
mondaycom · Jan 7, 2025 · 97358dc · 97358dc
1 parent 6f4b9d5
commit 97358dc
Showing 1 changed file with 41 additions and 41 deletions.
diff --git a/packages/core/src/components/Modal/Modal/Modal.module.scss b/packages/core/src/components/Modal/Modal/Modal.module.scss
@@ -2,49 +2,49 @@
   position: fixed;
   inset: 0;
   z-index: var(--monday-modal-z-index, 10000);
+}
+
+.overlay {
+  position: fixed;
+  inset: 0;
+  height: 100%;
+  background-color: var(--color-surface);
+}
+
+.modal {
+  --top-actions-spacing: var(--spacing-large);
+  --top-actions-width: var(--spacing-xl);
+  --modal-inline-padding: var(--spacing-xl);
+
+  position: relative;
+  top: 50%;
+  left: 50%;
+
+  display: flex;
+  flex-direction: column;
+  width: var(--modal-width);
+  max-height: var(--modal-max-height);
+  background-color: var(--primary-background-color);
+  overflow: hidden;
+  border-radius: var(--border-radius-big);
+  box-shadow: var(--box-shadow-large);
+
+  &.withHeaderAction {
+    --top-actions-width: calc(var(--spacing-xl) * 2);
+  }
+
+  &.sizeSmall {
+    --modal-max-height: 50%;
+    --modal-width: 480px;
+  }
 
-  .overlay {
-    position: fixed;
-    inset: 0;
-    height: 100%;
-    background-color: var(--color-surface);
+  &.sizeMedium {
+    --modal-max-height: 80%;
+    --modal-width: 580px;
   }
 
-  .modal {
-    --top-actions-spacing: var(--spacing-large);
-    --top-actions-width: var(--spacing-xl);
-    --modal-inline-padding: var(--spacing-xl);
-
-    position: relative;
-    top: 50%;
-    left: 50%;
-
-    display: flex;
-    flex-direction: column;
-    width: var(--modal-width);
-    max-height: var(--modal-max-height);
-    background-color: var(--primary-background-color);
-    overflow: hidden;
-    border-radius: var(--border-radius-big);
-    box-shadow: var(--box-shadow-large);
-
-    &.withHeaderAction {
-      --top-actions-width: calc(var(--spacing-xl) * 2);
-    }
-
-    &.sizeSmall {
-      --modal-max-height: 50%;
-      --modal-width: 480px;
-    }
-
-    &.sizeMedium {
-      --modal-max-height: 80%;
-      --modal-width: 580px;
-    }
-
-    &.sizeLarge {
-      --modal-max-height: 80%;
-      --modal-width: 840px;
-    }
+  &.sizeLarge {
+    --modal-max-height: 80%;
+    --modal-width: 840px;
   }
 }