feat: Add border around the warning box (#1173)

mdn · Jun 9, 2023 · 9d818f0 · 9d818f0
1 parent fe265cb
commit 9d818f0
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 11 deletions.
diff --git a/editor/css/editor-libs/common.css b/editor/css/editor-libs/common.css
@@ -520,10 +520,16 @@ body {
   z-index: 4;
 }
 
+.warning-container {
+  border: 1px solid var(--border-primary);
+  border-top: 0;
+  border-radius: 0 0 var(--button-radius) var(--button-radius);
+  padding: 16px;
+}
+
 .warning {
   position: relative;
   padding: 1rem 1rem 1rem 3rem;
-  margin: 1rem;
   background-color: var(--background-warning);
   border-radius: var(--elem-radius);
   border: 1px solid var(--border-secondary);

diff --git a/editor/tmpl/live-css-tmpl.html b/editor/tmpl/live-css-tmpl.html
@@ -17,13 +17,17 @@ <h4 class="output-heading">%title%</h4>
         <button id="reset" class="reset" type="button">Reset</button>
       </header>
       <noscript>
-        <div id="warning-no-script" class="warning">
-          Interactive examples cannot be shown because JavaScript is disabled.
+        <div id="warning-no-script" class="warning-container">
+          <div class="warning">
+            Interactive examples cannot be shown because JavaScript is disabled.
+          </div>
         </div>
       </noscript>
-      <div id="warning-no-support" class="warning hidden">
-        This feature is not supported by your current browser. Check Browser
-        compatibility for more details.
+      <div id="warning-no-support" class="warning-container hidden">
+        <div class="warning">
+          This feature is not supported by your current browser. Check Browser
+          compatibility for more details.
+        </div>
       </div>
       <div
         id="editor-wrapper"

diff --git a/editor/tmpl/live-tabbed-tmpl.html b/editor/tmpl/live-tabbed-tmpl.html
@@ -15,13 +15,18 @@ <h4 class="output-heading">%title%</h4>
       <button id="reset" class="reset" type="button">Reset</button>
     </header>
     <noscript>
-      <div id="warning-no-script" class="warning">
-        The interactive example cannot be shown because JavaScript is disabled.
+      <div id="warning-no-script" class="warning-container">
+        <div class="warning">
+          The interactive example cannot be shown because JavaScript is
+          disabled.
+        </div>
       </div>
     </noscript>
-    <div id="warning-mathml-not-supported" class="warning hidden">
-      The interactive example cannot be shown because MathML is not supported by
-      your browser.
+    <div id="warning-mathml-not-supported" class="warning-container hidden">
+      <div class="warning">
+        The interactive example cannot be shown because MathML is not supported
+        by your browser.
+      </div>
     </div>
     <div
       id="editor-container"