add box-shadow to modal__content, flexbox solution for modal with ifr…

…ame (#1189)
SAP · Mar 25, 2020 · fe19365 · fe19365
1 parent 6cf8bf9
commit fe19365
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 0 deletions.
diff --git a/core/src/App.html b/core/src/App.html
@@ -1405,5 +1405,10 @@
   :global(.fd-modal__content) {
     background-color: #fff;
     background-color: var(--sapGroup_ContentBackground, #fff);
+    box-shadow: var(
+      --sapContent_Shadow3,
+      0 0 0 0.0625rem rgba(0, 0, 0, 0.42),
+      0 1.25rem 5rem 0 rgba(0, 0, 0, 0.3)
+    );
   }
 </style>
diff --git a/core/src/Modal.html b/core/src/Modal.html
@@ -124,6 +124,7 @@ <h1 class="fd-modal__title">{modalSettings.title}</h1>
     -webkit-overflow-scrolling: touch;
     background-color: #fff;
     background-color: var(--sapGroup_ContentBackground, #fff);
+    border-radius: 0 0 4px 4px;
   }
   .iframeModalCtn :global(iframe) {
     width: 100%;
@@ -147,6 +148,11 @@ <h1 class="fd-modal__title">{modalSettings.title}</h1>
     &__header {
       overflow-wrap: break-word;
     }
+
+    &__content {
+      display: flex;
+      flex-direction: column;
+    }
   }
 
   :global(.no-side-nav),