diff --git a/RELEASE-NOTES.md b/RELEASE-NOTES.md index f36e7f0a5..cda078b16 100644 --- a/RELEASE-NOTES.md +++ b/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 diff --git a/src/definitions/modules/modal.js b/src/definitions/modules/modal.js index 887fcd96c..c4ea8e4f1 100644 --- a/src/definitions/modules/modal.js +++ b/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' } }; diff --git a/src/definitions/modules/modal.less b/src/definitions/modules/modal.less index 56c811f82..7f4c3d66a 100755 --- a/src/definitions/modules/modal.less +++ b/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