Fixes modal variables for background color, border. Fixes missing background on modal actions, makes border radius more consistent for different content arrangements

src/definitions/modules/modal.less

@@ -42,6 +42,15 @@
   user-select: text;
 }
 
+.ui.modal > :first-child {
+  border-top-left-radius: @borderRadius;
+  border-top-right-radius: @borderRadius;
+}
+
+.ui.modal > :last-child {
+  border-bottom-left-radius: @borderRadius;
+  border-bottom-right-radius: @borderRadius;
+}
 
 /*******************************
             Content
@@ -83,10 +92,7 @@
 
   font-size: @headerFontSize;
   font-weight: @headerFontWeight;
-  border-bottom: @headerBottomBorder;
-
-  border-top-left-radius: @borderRadius;
-  border-top-right-radius: @borderRadius;
+  border-bottom: @headerBorder;
 }
 
 /*--------------
@@ -101,23 +107,19 @@
   line-height: @contentLineHeight;
   padding: @contentPadding;
   background: @contentBackground;
-
-  border-bottom-left-radius: @borderRadius;
-  border-bottom-right-radius: @borderRadius;
-}
-.ui.modal > .content:only-child {
-  border-radius: @borderRadius;
 }
 .ui.modal > .content > .image {
   display: table-cell;
   padding-right: @imagePadding;
   min-width: @imageMinWidth;
+  vertical-align: @imageVerticalAlign;
 }
 .ui.modal > .content > .description {
   display: table-cell;
   vertical-align: top;
   padding-left: @descriptionPadding;
   min-width: @descriptionMinWidth;
+  vertical-align: @descriptionVerticalAlign;
 }
 /*rtl:ignore*/
 .ui.modal > .content > .image > i.icon {
@@ -130,8 +132,10 @@
 ---------------*/
 
 .ui.modal .actions {
+  background: @actionBackground;
   padding: @actionPadding;
-  text-align: right;
+  border-top: @actionBorder;
+  text-align: @actionAlign;
 }
 .ui.modal .actions > .button {
   margin-left: @buttonDistance;
@@ -217,15 +221,18 @@
 .ui.basic.modal {
   background-color: transparent;
   border: none;
+  box-shadow: none;
   color: @basicModalColor;
 }
+.ui.basic.modal > .header,
+.ui.basic.modal > .content,
+.ui.basic.modal > .actions {
+  background-color: transparent;
+}
 .ui.basic.modal > .close {
   top: @basicModalCloseTop;
   right: @basicModalCloseRight;
 }
-.ui.basic.modal .content {
-  background-color: transparent;
-}
 
 /*******************************
             Variations
@@ -237,7 +244,6 @@
   margin-top: @scrollingTopMargin;
 }
 
-
 /*******************************
              States
 *******************************/

src/themes/packages/default/modules/modal.variables

@@ -27,25 +27,30 @@
 @headerFontSize: 1.6em;
 @headerFontWeight: bold;
 @headerFontFamily: @headerFont;
-@headerBottomBorder: none;
+@headerBorder: 1px solid @borderColor;
 
 /* Content */
 @contentFontSize: 1em;
 @contentPadding: 2rem;
 @contentLineHeight: 1.4;
-@contentBackground: #F4F4F4;
+@contentBackground: #FFFFFF;
 
 /* Left / Right */
 @imageMinWidth: 25%;
 @imagePadding: 1em;
-
 @imageIconSize: 8rem;
+@imageVerticalAlign: top;
 
 @descriptionPadding: 1em;
 @descriptionMinWidth: '';
+@descriptionVerticalAlign: top;
 
 /* Modal Actions */
+@actionBorder: 1px solid @borderColor;
+@actionBackground: #EFEFEF;
 @actionPadding: 1rem 2rem;
+@actionAlign: right;
+
 @buttonDistance: 0.75em;
 
 /* Mobile Positions */