address PR review comments

SAP · Mar 31, 2020 · 550ffeb · 550ffeb
1 parent ad41bd6
commit 550ffeb
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 12 deletions.
diff --git a/docs/pages/components/message-box.md b/docs/pages/components/message-box.md
@@ -9,7 +9,7 @@ folder: components
 summary:
 ---
 
-Message Box is used to display simple messages to the user. These messages could be Standard (Default), Confirmation, Error, Success, Warning and Information (Neutral). The Message Box component inherits the look and the behaviour of the [Dialog]({{site.baseurl}}/components/dialog.html) component. 
+Message Box is used to display simple messages (text) to the user. These messages could be Standard (Default), Confirmation, Error, Success, Warning and Information (Neutral). The Message Box component inherits the look and the basic behaviour (excludes dragging and resizing) of the [Dialog]({{site.baseurl}}/components/dialog.html) component. 
 {: .docs-intro}
 
 <br>

diff --git a/src/_dialog-placeholders.scss b/src/_dialog-placeholders.scss
@@ -1,10 +1,13 @@
+@import "./mixins";
+
 $fd-dialog-content-margin-y: 6%;
 $fd-dialog-content-margin-x: 10%;
 $fd-dialog-content-min-width: 20rem;
 $fd-dialog-content-min-height: 7.5rem;
 $fd-dialog-content-box-shadow: var(--sapContent_Shadow3);
 $fd-dialog-content-border-radius: var(--sapElement_BorderCornerRadius);
 $fd-dialog-content-padding-x: (s: 1rem, m: 2rem, l: 2rem, xl: 3rem);
+$fd-dialog-title-font-size: 1rem;
 $fd-dialog-footer-button-min-width: 4rem;
 $fd-dialog-body-color: var(--sapGroup_ContentBackground);
 $fd-dialog-overlay-color: rgba(0, 0, 0, 0.6); // Should be fade(var(--sapBlockLayer_Background), 60)
@@ -51,3 +54,10 @@ $fd-dialog-overlay-color: rgba(0, 0, 0, 0.6); // Should be fade(var(--sapBlockLa
   max-width: 100vw;
   max-height: 100vh;
 }
+
+%dialog-title {
+  @include fd-reset();
+  @include fd-ellipsis();
+
+  font-size: $fd-dialog-title-font-size;
+}
diff --git a/src/dialog.scss b/src/dialog.scss
@@ -37,9 +37,6 @@ $button: #{$fd-namespace}-button;
   // RESIZE HANDLE
   $fd-dialog-resize-handle-color: var(--sapButton_Lite_TextColor);
 
-  // HEADER
-  $fd-dialog-title-font-size: 1rem;
-
   // BODY
   $fd-dialog-body-padding-y: 1rem;
   $fd-dialog-body-color: var(--sapGroup_ContentBackground);
@@ -184,9 +181,6 @@ $button: #{$fd-namespace}-button;
   }
 
   &__title {
-    @include fd-reset();
-    @include fd-ellipsis();
-
-    font-size: $fd-dialog-title-font-size;
+    @extend %dialog-title;
   }
 }
diff --git a/src/message-box.scss b/src/message-box.scss
@@ -74,10 +74,7 @@ $message-box-states: (
   }
 
   &__title {
-    @include fd-reset();
-    @include fd-ellipsis();
-
-    font-size: $fd-message-box-title-icon-text-size;
+    @extend %dialog-title;
   }
 
   &__more {