#1968 Fixes undetachable scrollable modal in ideal circumstances (not inside a container with z-index)

RELEASE-NOTES.md

@@ -52,6 +52,8 @@
 - **Grid** - Fixes colored grid columns not appearing when not nested in rows
 - **Label** - Labels inside `header` now vertical align better by accounting for line height offset
 - **Message** - Message now uses `@lineHeight` from `site.variables`
+- **Modal** - `scrollable modal` now correctly adds padding below modal
+- **Modal** - Modal with `detachable: false` inside `ui sidebar`  `pusher` element will now show correctly
 - **Popup** - Fixes issue with `min-width` in firefox exceeding `max-width` causing element to not wrap correctly
 - **Table** - `very basic table` now works together with `padded table`
 - **Table** - Fix inheritance of text alignment and vertical alignment

src/definitions/modules/modal.js

@@ -117,6 +117,9 @@ $.fn.modal = function(parameters) {
               module.verbose('Modal is detachable, moving content into dimmer');
               $dimmable.dimmer('add content', $module);
             }
+            else {
+              module.set.undetached();
+            }
             $dimmer = $dimmable.dimmer('get dimmer');
           },
           id: function() {
@@ -580,7 +583,7 @@ $.fn.modal = function(parameters) {
             else {
               module.debug('Modal is taller than page content, resizing page height');
               $body
-                .css('height', module.cache.height + (settings.padding / 2) )
+                .css('height', module.cache.height + (settings.padding * 2) )
               ;
             }
           },
@@ -621,6 +624,9 @@ $.fn.modal = function(parameters) {
                 })
               ;
             }
+          },
+          undetached: function() {
+            $dimmable.addClass(className.undetached);
           }
         },
 
@@ -850,9 +856,10 @@ $.fn.modal.settings = {
     notFound  : 'The element you specified could not be found'
   },
   className : {
-    active    : 'active',
-    animating : 'animating',
-    scrolling : 'scrolling'
+    active     : 'active',
+    animating  : 'animating',
+    scrolling  : 'scrolling',
+    undetached : 'undetached'
   }
 };
 

src/definitions/modules/modal.less

@@ -292,10 +292,23 @@
   }
 }
 
+
+/*******************************
+             States
+*******************************/
+
+.ui.active.modal {
+  display: block;
+}
+
 /*******************************
-            Variations
+           Variations
 *******************************/
 
+/*--------------
+    Scrolling
+---------------*/
+
 /* A modal that cannot fit on the page */
 .scrolling.dimmable.dimmed {
   overflow: hidden;
@@ -307,12 +320,30 @@
 .scrolling.dimmable > .dimmer {
   position: fixed;
 }
-
-.ui.scrolling.modal {
-  position: static;
+.modals.dimmer .ui.scrolling.modal {
+  position: static !important;
   margin: @scrollingMargin auto !important;
 }
 
+/* undetached scrolling */
+.scrolling.undetached.dimmable.dimmed {
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+}
+.scrolling.undetached.dimmable.dimmed > .dimmer {
+  overflow: hidden;
+}
+.scrolling.undetached.dimmable .ui.scrolling.modal {
+  position: absolute;
+  left: 50%;
+  margin-top: @scrollingMargin !important;
+}
+
+/* Coupling with Sidebar */
+.undetached.dimmable.dimmed > .pusher {
+  z-index: auto;
+}
+
 @media only screen and (max-width : @computerBreakpoint) {
   .ui.scrolling.modal {
     margin-top: @mobileScrollingMargin;
@@ -320,17 +351,6 @@
   }
 }
 
-/*******************************
-             States
-*******************************/
-
-.ui.active.modal {
-  display: block;
-}
-
-/*******************************
-           Variations
-*******************************/
 
 /*--------------
    Full Screen