Work on flexbox modal fixes

RELEASE-NOTES.md

@@ -2,6 +2,11 @@
 
 ### Version 2.3.1 - Mar 18, 2018
 
+**Major Changes**
+- **Modal** - Flexbox modals have been modified to be opt-in using the setting `mode: flex`. This was a tough choice, but currently [only comforming browsers support absolute in flex propertly](https://developers.google.com/web/updates/2016/06/absolute-positioned-children), (I'm looking at you IE11).
+
+Flex modals should now work properly in chrome with multiple modals. However in IE11 flex modals will not appear centered correctly.
+
 **Critical Bugs**
 - **Dropdown** - Fixed issue in `2.3.0` that could cause multiselect dropdowns initialized by converting `<select>` to not add initial selected options. #6123
 - **Search** - Fixes using category search with `fullTextSearch: 'exact'` returning duplicate results #6223 #6221 @Thanks @prudho
@@ -19,6 +24,7 @@
 - **Icons** - Added ability to choose whether solid, outline and brand icons should be included in your theme via the `@importSolidIcons`, `importRegularIcons` and `@importBrandIcons` variables **Thanks hammy2899**
 - **Icons** - Increased specifity on `fitted icon` to fix compatibility with other components #6125
 - **Visibility** - Fixed bug that could cause `onScreen` callback to not occur properly for elements that are taller than screen.
+- **Modal** - Fixed issue with `allowMultiple: false` when second modal is `scrolling` where first modal would shift positions to align top when animating out before the scrollable modal would show
 - **Menu** - Fixes `disabled item` showing hover style for `secondary menu` **Thanks @tcmal** #6268
 - **CSS Variables** - Added use of `@normal` for normal font weight for all non-default themes included in repo. #6227
 - **Image** - Fixes margin being applied twice to `ui images` #6224

src/definitions/modules/dimmer.js

@@ -238,7 +238,6 @@ $.fn.dimmer = function(parameters) {
               }
               $dimmer
                 .transition({
-                  displayType : 'flex',
                   animation   : settings.transition + ' in',
                   queue       : false,
                   duration    : module.get.duration(),
@@ -283,7 +282,6 @@ $.fn.dimmer = function(parameters) {
               module.verbose('Hiding dimmer with css');
               $dimmer
                 .transition({
-                  displayType : 'flex',
                   animation   : settings.transition + ' out',
                   queue       : false,
                   duration    : module.get.duration(),

src/definitions/modules/modal.js

@@ -108,11 +108,10 @@ $.fn.modal = function(parameters) {
             var
               defaultSettings = {
                 debug      : settings.debug,
+                dimmerName : 'modals',
                 variation  : settings.centered
                   ? false
                   : 'top aligned'
-                ,
-                dimmerName : 'modals'
               },
               dimmerSettings = $.extend(true, defaultSettings, settings.dimmerSettings)
             ;
@@ -322,17 +321,17 @@ $.fn.modal = function(parameters) {
             : function(){}
           ;
           if( module.is.animating() || !module.is.active() ) {
-
-            module.showDimmer();
-            module.cacheSizes();
-            module.set.screenHeight();
-            module.set.type();
-            module.set.clickaway();
-
             if( !settings.allowMultiple && module.others.active() ) {
               module.hideOthers(module.showModal);
             }
             else {
+
+              module.showDimmer();
+              module.cacheSizes();
+              module.set.screenHeight();
+              module.set.type();
+              module.set.clickaway();
+
               if(settings.allowMultiple && settings.detachable) {
                 $module.detach().appendTo($dimmer);
               }
@@ -526,9 +525,9 @@ $.fn.modal = function(parameters) {
           },
           screenHeight: function() {
             module.debug('Removing page height');
-            $body
+            /*$body
               .css('height', '')
-            ;
+            ;*/
           },
           keyboardShortcuts: function() {
             module.verbose('Removing keyboard shortcuts');
@@ -628,14 +627,13 @@ $.fn.modal = function(parameters) {
                 debug      : settings.debug,
                 dimmerName : 'modals',
                 closable   : 'auto',
-                variation  : settings.centered
-                  ? false
-                  : 'top aligned'
-                ,
                 duration   : {
                   show     : settings.duration,
                   hide     : settings.duration
-                }
+                },
+                variation  : settings.centered
+                  ? ''
+                  : 'top aligned'
               },
               dimmerSettings = $.extend(true, defaultSettings, settings.dimmerSettings)
             ;

src/definitions/modules/modal.less

@@ -24,6 +24,7 @@
 
 .ui.modal {
   display: none;
+  position: absolute;
   z-index: @zIndex;
   text-align: left;
 
@@ -278,6 +279,18 @@
   box-shadow: @invertedBoxShadow;
 }
 
+/*--------------
+      Flex
+---------------*/
+
+.ui.flex.dimmer > .ui.modal {
+  margin-top: auto !important;
+  margin-left: auto !important;
+  left: auto !important;
+  top: auto !important;
+}
+
+
 /*******************************
              Types
 *******************************/
@@ -341,7 +354,8 @@
 
 /* Top Aligned Modal */
 .modals.dimmer[class*="top aligned"] .modal {
-  margin: @topAlignedMargin auto;
+  margin-top: @topAlignedMargin;
+  margin-bottom: @topAlignedMargin;
 }
 
 /*--------------
@@ -359,11 +373,9 @@
   overflow: auto;
   -webkit-overflow-scrolling: touch;
 }
-.scrolling.dimmable > .dimmer {
-  position: fixed;
-}
 .modals.dimmer .ui.scrolling.modal {
-  margin: @scrollingMargin auto !important;
+  margin-top: @scrollingMargin !important;
+  margin-bottom: @scrollingBottomMargin !important;
 }
 
 /* Undetached Scrolling */

src/definitions/modules/transition.js

@@ -708,10 +708,12 @@ $.fn.transition = function() {
                   .attr('class', elementClass)
                   .removeAttr('style')
                   .removeClass(className.hidden)
-                  .removeClass(className.visible)
+                  .addClass(className.visible)
+                  .addClass(className.loading)
                   .show()
                   .css('display')
                 ;
+                debugger;
                 module.verbose('Determining final display state', displayType);
                 module.save.displayType(displayType);
               }

src/themes/default/modules/modal.variables

@@ -84,11 +84,11 @@
 @largeMonitorWidth: 900px;
 @widescreenMonitorWidth: 950px;
 
-@mobileMargin: 0em 0em 0em 0em;
-@tabletMargin: 0em 0em 0em 0em;
-@computerMargin: 0em 0em 0em 0em;
-@largeMonitorMargin: 0em 0em 0em 0em;
-@widescreenMonitorMargin: 0em 0em 0em 0em;
+@mobileMargin: auto auto;
+@tabletMargin: auto auto;
+@computerMargin: auto auto;
+@largeMonitorMargin: auto auto;
+@widescreenMonitorMargin: auto auto;
 
 @fullScreenWidth: 95%;
 @fullScreenOffset: 0em;
@@ -123,6 +123,7 @@
 
 /* Scrolling Margin */
 @scrollingMargin: 1rem;
+@scrollingBottomMargin: 2rem;
 @mobileScrollingMargin: @mobileTopAlignedMargin;
 
 /* Scrolling Content */
@@ -146,11 +147,11 @@
 @miniLargeMonitorWidth: (@largeMonitorWidth * @miniRatio);
 @miniWidescreenMonitorWidth: (@widescreenMonitorWidth * @miniRatio);
 
-@miniMobileMargin: 0em 0em 0em 0em;
-@miniTabletMargin: 0em 0em 0em 0em;
-@miniComputerMargin: 0em 0em 0em 0em;
-@miniLargeMonitorMargin: 0em 0em 0em 0em;
-@miniWidescreenMonitorMargin: 0em 0em 0em 0em;
+@miniMobileMargin: auto auto;
+@miniTabletMargin: auto auto;
+@miniComputerMargin: auto auto;
+@miniLargeMonitorMargin: auto auto;
+@miniWidescreenMonitorMargin: auto auto;
 
 @tinyHeaderSize: 1.3em;
 @tinyMobileWidth: @mobileWidth;
@@ -159,11 +160,11 @@
 @tinyLargeMonitorWidth: (@largeMonitorWidth * @tinyRatio);
 @tinyWidescreenMonitorWidth: (@widescreenMonitorWidth * @tinyRatio);
 
-@tinyMobileMargin: 0em 0em 0em 0em;
-@tinyTabletMargin: 0em 0em 0em 0em;
-@tinyComputerMargin: 0em 0em 0em 0em;
-@tinyLargeMonitorMargin: 0em 0em 0em 0em;
-@tinyWidescreenMonitorMargin: 0em 0em 0em 0em;
+@tinyMobileMargin: auto auto;
+@tinyTabletMargin: auto auto;
+@tinyComputerMargin: auto auto;
+@tinyLargeMonitorMargin: auto auto;
+@tinyWidescreenMonitorMargin: auto auto;
 
 @smallHeaderSize: 1.3em;
 @smallMobileWidth: @mobileWidth;
@@ -172,11 +173,11 @@
 @smallLargeMonitorWidth: (@largeMonitorWidth * @smallRatio);
 @smallWidescreenMonitorWidth: (@widescreenMonitorWidth * @smallRatio);
 
-@smallMobileMargin: 0em 0em 0em 0em;
-@smallTabletMargin: 0em 0em 0em 0em;
-@smallComputerMargin: 0em 0em 0em 0em;
-@smallLargeMonitorMargin: 0em 0em 0em 0em;
-@smallWidescreenMonitorMargin: 0em 0em 0em 0em;
+@smallMobileMargin: auto auto;
+@smallTabletMargin: auto auto;
+@smallComputerMargin: auto auto;
+@smallLargeMonitorMargin: auto auto;
+@smallWidescreenMonitorMargin: auto auto;
 
 @largeHeaderSize: 1.6em;
 @largeMobileWidth: @mobileWidth;
@@ -185,8 +186,8 @@
 @largeLargeMonitorWidth: (@largeMonitorWidth * @largeRatio);
 @largeWidescreenMonitorWidth: (@widescreenMonitorWidth * @largeRatio);
 
-@largeMobileMargin: 0em 0em 0em 0em;
-@largeTabletMargin: 0em 0em 0em 0em;
-@largeComputerMargin: 0em 0em 0em 0em;
-@largeLargeMonitorMargin: 0em 0em 0em 0em;
-@largeWidescreenMonitorMargin: 0em 0em 0em 0em;
+@largeMobileMargin: auto auto;
+@largeTabletMargin: auto auto;
+@largeComputerMargin: auto auto;
+@largeLargeMonitorMargin: auto auto;
+@largeWidescreenMonitorMargin: auto auto;