fixes modals deep selectors (#4795)

apostrophecms · Nov 11, 2024 · 8495063 · 8495063
1 parent b49344a
commit 8495063
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 51 deletions.
diff --git a/modules/@apostrophecms/command-menu/ui/apos/components/AposCommandMenuShortcut.vue b/modules/@apostrophecms/command-menu/ui/apos/components/AposCommandMenuShortcut.vue
@@ -128,23 +128,25 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-:deep(.apos-modal__body) {
-  padding: 0;
-}
+.apos-command-menu-shortcut {
+  :deep(.apos-modal__body) {
+    padding: 0;
+  }
 
-:deep(.apos-modal__inner) {
-  inset: auto $spacing-quadruple $spacing-quadruple auto;
-  max-width: 700px;
-  height: auto;
-  border-radius: $spacing-base + $spacing-half;
-}
+  :deep(.apos-modal__inner) {
+    inset: auto $spacing-quadruple $spacing-quadruple auto;
+    max-width: 700px;
+    height: auto;
+    border-radius: $spacing-base + $spacing-half;
+  }
 
-:deep(.apos-modal__overlay) {
-  display: none;
-}
+  :deep(.apos-modal__overlay) {
+    display: none;
+  }
 
-:deep(.apos-modal__body-main) {
-  padding-bottom: 15px;
+  :deep(.apos-modal__body-main) {
+    padding-bottom: 15px;
+  }
 }
 
 .apos-modal__header {

diff --git a/modules/@apostrophecms/modal/ui/apos/components/AposModalConfirm.vue b/modules/@apostrophecms/modal/ui/apos/components/AposModalConfirm.vue
@@ -175,35 +175,35 @@ export default {
   display: flex;
   align-items: center;
   justify-content: center;
-}
 
-:deep(.apos-modal__inner) {
-  inset: auto;
-  max-width: 700px;
-  height: auto;
-  text-align: center;
-}
+  :deep(.apos-modal__inner) {
+    inset: auto;
+    max-width: 700px;
+    height: auto;
+    text-align: center;
+  }
 
-:deep(.apos-modal__overlay) {
-  .apos-modal + .apos-confirm & {
-    display: block;
+  :deep(.apos-modal__overlay) {
+    .apos-modal + .apos-confirm & {
+      display: block;
+    }
+  }
+
+  :deep(.apos-modal__body) {
+    padding: 60px;
   }
-}
 
-:deep(.apos-modal__body) {
-  padding: 60px;
+  :deep(.apos-modal__body-main) {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
 }
 
 .apos-confirm--tiny :deep(.apos-modal__body) {
   padding: 40px;
 }
 
-:deep(.apos-modal__body-main) {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
 .apos-confirm__logo,
 .apos-confirm__custom-logo {
   height: 35px;

diff --git a/modules/@apostrophecms/modal/ui/apos/components/AposModalShareDraft.vue b/modules/@apostrophecms/modal/ui/apos/components/AposModalShareDraft.vue
@@ -207,29 +207,29 @@ export default {
   display: flex;
   align-items: center;
   justify-content: center;
-}
 
-:deep(.apos-modal__inner) {
-  inset: auto;
-  max-width: 700px;
-  height: auto;
-  border-radius: 15px;
-}
+  :deep(.apos-modal__inner) {
+    inset: auto;
+    max-width: 700px;
+    height: auto;
+    border-radius: 15px;
+  }
 
-:deep(.apos-modal__overlay) {
-  .apos-modal + .apos-share-draft & {
-    display: block;
+  :deep(.apos-modal__overlay) {
+    .apos-modal + .apos-share-draft & {
+      display: block;
+    }
   }
-}
 
-:deep(.apos-modal__body) {
-  padding: 20px;
-}
+  :deep(.apos-modal__body) {
+    padding: 20px;
+  }
 
-:deep(.apos-modal__body-main) {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+  :deep(.apos-modal__body-main) {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
 }
 
 .apos-share-draft__header {