Fixes alignment of dimmer

RELEASE-NOTES.md

@@ -4,10 +4,10 @@
 
 **Major Enhancements**
 - **Modal** - Modal has been rewritten to use `flexbox`. No need to call `refresh()` to recalculate vertical centering.
-- **Modal** - Modal has a new setting `centered` which can be past `false` to make a modal top aligned
-- **Dimmer** - Dimmers now have centered content with a single wrapping `content` element.
+- **Modal** - Modals now have a setting `centered` which can be used to disable vertical centering. This can be useful for modals with content that changes dynamically to prevent content from jumping in position.
 
 **Enhancements**
+- **Dimmer** - Dimmers now have centered content with a single wrapping `content` element.
 - **Popup** - Popup will now align the center of the arrow (not the edge of the popup) when it would be reasonable (up to 2x arrow's offset from edge). [See this explanation](http://oi66.tinypic.com/2zr2ckk.jpg)
 - **Popup** - Popup can now position elements correctly even when they have a different offset context than their activating element. Like in [this example](https://jsfiddle.net/g853mc03/)
 

src/definitions/modules/dimmer.less

@@ -36,6 +36,7 @@
 
   text-align: @textAlign;
   vertical-align: @verticalAlign;
+  padding: @padding;
 
   background-color: @backgroundColor;
   opacity: @hiddenOpacity;
@@ -112,6 +113,17 @@
            Variations
 *******************************/
 
+/*--------------
+    Alignment
+---------------*/
+
+.ui[class*="top aligned"].dimmer {
+  justify-content: flex-start;
+}
+.ui[class*="bottom aligned"].dimmer {
+  justify-content: flex-end;
+}
+
 /*--------------
       Page
 ---------------*/

src/definitions/modules/modal.js

@@ -108,6 +108,10 @@ $.fn.modal = function(parameters) {
             var
               defaultSettings = {
                 debug      : settings.debug,
+                variation  : settings.centered
+                  ? ''
+                  : 'top aligned'
+                ,
                 dimmerName : 'modals'
               },
               dimmerSettings = $.extend(true, defaultSettings, settings.dimmerSettings)
@@ -627,6 +631,10 @@ $.fn.modal = function(parameters) {
                 dimmerName : 'modals',
                 variation  : false,
                 closable   : 'auto',
+                variation  : settings.centered
+                  ? ''
+                  : 'top aligned'
+                ,
                 duration   : {
                   show     : settings.duration,
                   hide     : settings.duration
@@ -890,6 +898,8 @@ $.fn.modal.settings = {
   inverted       : false,
   blurring       : false,
 
+  centered       : true,
+
   dimmerSettings : {
     closable : false,
     useCSS   : true

src/definitions/modules/modal.less

@@ -333,7 +333,20 @@
            Variations
 *******************************/
 
-/* A modal that cannot fit on the page */
+/*--------------
+   Top Aligned
+---------------*/
+
+/* Top Aligned Modal */
+.modals.dimmer[class*="top aligned"] .modal {
+  margin: @topAlignedMargin auto;
+}
+
+/*--------------
+    Scrolling
+---------------*/
+
+/* Scrolling Dimmer */
 .scrolling.dimmable.dimmed {
   overflow: hidden;
 }
@@ -351,7 +364,7 @@
   margin: @scrollingMargin auto !important;
 }
 
-/* undetached scrolling */
+/* Undetached Scrolling */
 .scrolling.undetached.dimmable.dimmed {
   overflow: auto;
   -webkit-overflow-scrolling: touch;
@@ -365,7 +378,6 @@
   margin-top: @scrollingMargin !important;
 }
 
-
 /* Scrolling Content */
 .ui.modal .scrolling.content {
   max-height: @scrollingContentMaxHeight;

src/themes/default/modules/dimmer.variables

@@ -8,6 +8,7 @@
 @backgroundColor: rgba(0, 0, 0 , 0.85);
 @lineHeight: 1;
 @perspective: 2000px;
+@padding: 1em;
 
 @duration: 0.5s;
 @transition:

src/themes/default/modules/modal.variables

@@ -117,9 +117,13 @@
 @basicInvertedModalColor: @textColor;
 @basicInvertedModalHeaderColor: @darkTextColor;
 
+/* Top Aligned */
+@topAlignedMargin: 5vh;
+@mobileTopAlignedMargin: 1rem;
+
 /* Scrolling Margin */
-@scrollingMargin: 5vh;
-@mobileScrollingMargin: 1rem;
+@scrollingMargin: @topAlignedMargin;
+@mobileScrollingMargin: @mobileTopAlignedMargin;
 
 /* Scrolling Content */
 @scrollingContentMaxHeight: calc(80vh - 10em);