feat(modal): basic header and basic left actions

Added a basic variant for header and actions of a modal which removes the separate background and border separator
Added left variant for actions which displays the action buttons to the left (we already have this for toast)
i also added some more options for variation switches to possibly reduce more css output if people dont need the actions or left/centered variants

Author: lubber-de

src/definitions/modules/modal.less

@@ -167,29 +167,43 @@
   font-size: @imageIconSize;
 }
 
-/*--------------
-     Actions
----------------*/
+& when (@variationModalActions) {
+  /*--------------
+       Actions
+  ---------------*/
 
-.ui.modal > .actions {
-  background: @actionBackground;
-  padding: @actionPadding;
-  border-top: @actionBorder;
-  text-align: @actionAlign;
-}
-.ui.modal .actions > .button:not(.fluid) {
-  margin-left: @buttonDistance;
-}
-.ui.basic.modal > .actions {
-  border-top:none;
+  .ui.modal > .actions {
+    background: @actionBackground;
+    padding: @actionPadding;
+    border-top: @actionBorder;
+    text-align: @actionAlign;
+  }
+  .ui.modal .actions > .button:not(.fluid) {
+    margin-left: @buttonDistance;
+  }
+  .ui.modal > .basic.actions,
+  .ui.basic.modal > .actions {
+    border-top: none;
+  }
+  & when (@variationModalLeftActions) {
+    .ui.modal > .left.actions {
+      text-align: left;
+      & > .button:not(.fluid) {
+        margin-left: @buttonLeftDistance;
+        margin-right: @buttonLeftDistance;
+      }
+    }
+  }
 }
 
-.ui.modal > .centered,
-.ui.modal > .center.aligned {
-  text-align: center;
-  &.actions > .button:not(.fluid) {
-    margin-left: @buttonCenteredDistance;
-    margin-right: @buttonCenteredDistance;
+& when (@variationModalCentered) {
+  .ui.modal > .centered,
+  .ui.modal > .center.aligned {
+    text-align: center;
+    &.actions > .button:not(.fluid) when (@variationModalActions){
+      margin-left: @buttonCenteredDistance;
+      margin-right: @buttonCenteredDistance;
+    }
   }
 }
 
@@ -299,14 +313,15 @@
     padding: @mobileDescriptionPadding !important;
     box-shadow: none;
   }
-
-  /* Let Buttons Stack */
-  .ui.modal > .actions {
-    padding: @mobileActionPadding !important;
-  }
-  .ui.modal .actions > .buttons,
-  .ui.modal .actions > .button {
-    margin-bottom: @mobileButtonDistance;
+  & when (@variationModalActions) {
+    /* Let Buttons Stack */
+    .ui.modal > .actions {
+      padding: @mobileActionPadding !important;
+    }
+    .ui.modal .actions > .buttons,
+    .ui.modal .actions > .button {
+      margin-bottom: @mobileButtonDistance;
+    }
   }
 }
 
@@ -329,11 +344,16 @@
     box-shadow: none !important;
     color: @basicModalColor;
   }
+  .ui.modal > .basic.header,
+  .ui.modal > .basic.actions,
   .ui.basic.modal > .header,
   .ui.basic.modal > .content,
   .ui.basic.modal > .actions {
     background-color: transparent;
   }
+  .ui.modal > .basic.header {
+    border-bottom: none;
+  }
   .ui.basic.modal > .header {
     color: @basicModalHeaderColor;
     border-bottom: none;
@@ -575,11 +595,12 @@
     background: @invertedBackground;
     color: @invertedHeaderColor;
   }
-
-  .ui.inverted.modal > .actions {
-    background: @invertedActionBackground;
-    border-top: @invertedActionBorder;
-    color: @invertedActionColor;
+  & when (@variationModalActions) {
+    .ui.inverted.modal > .actions {
+      background: @invertedActionBackground;
+      border-top: @invertedActionBorder;
+      color: @invertedActionColor;
+    }
   }
 
   .ui.inverted.dimmer > .modal > .close {

src/themes/default/globals/variation.variables

@@ -559,6 +559,9 @@
 @variationModalScrolling: true;
 @variationModalLegacy: true;
 @variationModalCloseInside: true;
+@variationModalCentered: true;
+@variationModalActions: true;
+@variationModalLeftActions: true;
 @variationModalSizes: @variationAllSizes;
 
 /* Nag */

src/themes/default/modules/modal.variables

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