feat(modal): centered variant for any content

There currently is no declarative way to display content of a modal center aligned.

Workaround for header is icon header or ui centered header or ui center aligned header
Workaround for actions is to create an own theme modifying the @actionAlign variable
For the content itself there is no workaround than creating a css class manually (would also work for actions
This PR copies over the existing variant from header (which supports centered as well as center aligned already) and applies it to any direct sibling of the modal itself, so header or content or even actions can be displayed centered out of the box in the fomantic way

Author: lubber-de

src/definitions/modules/modal.less

@@ -182,6 +182,15 @@
   border-top:none;
 }
 
+.ui.modal > .centered,
+.ui.modal > .center.aligned {
+  text-align: center;
+  &.actions > .button:not(.fluid) {
+    margin-left: @buttonCenteredDistance;
+    margin-right: @buttonCenteredDistance;
+  }
+}
+
 /*-------------------
        Responsive
 --------------------*/
@@ -220,7 +229,7 @@
 
 /* Tablet and Mobile */
 @media only screen and (max-width : @largestTabletScreen) {
-  .ui.modal > .header {
+  .ui.modal > .close + .header {
     padding-right: @closeHitbox;
   }
   .ui.modal > .close {
@@ -234,8 +243,10 @@
 @media only screen and (max-width : @largestMobileScreen) {
 
   .ui.modal > .header {
-    padding: @mobileHeaderPadding !important;
-    padding-right: @closeHitbox !important;
+    padding: @mobileHeaderPadding;
+  }
+  .ui.modal > .close + .header {
+    padding-right: @closeHitbox;
   }
   .ui.overlay.fullscreen.modal > .content.content.content {
     min-height: @overlayFullscreenScrollingContentMaxHeightMobile;
@@ -467,7 +478,7 @@
     }
   }
   .ui.modal > .close.inside + .header,
-  .ui.fullscreen.modal > .header {
+  .ui.fullscreen.modal > .close + .header {
     padding-right: @closeHitbox;
   }
   .ui.modal > .close.inside,

src/themes/default/modules/modal.variables

@@ -60,6 +60,7 @@
 @actionAlign: right;
 
 @buttonDistance: 0.75em;
+@buttonCenteredDistance: 0.5em;
 
 /* Inner Close Position (Tablet/Mobile) */
 @innerCloseTop: (@headerVerticalPadding - @closeHitBoxOffset + (@lineHeight - 1em));