fomantic-ui 2.9.0-beta.299 → 2.9.0-beta.300

package/dist/semantic.min.js

@@ -1,5 +1,5 @@
 /*
- * # Fomantic UI - 2.9.0-beta.299+f49946a
+ * # Fomantic UI - 2.9.0-beta.300+9bf5e5c
  * https://github.com/fomantic/Fomantic-UI
  * http://fomantic-ui.com/
  *

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fomantic-ui",
-  "version": "2.9.0-beta.299+f49946a",
+  "version": "2.9.0-beta.300+9bf5e5c",
   "description": "Fomantic empowers designers and developers by creating a shared vocabulary for UI.",
   "keywords": [
     "fomantic-ui",

package/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 {

package/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 */

package/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));