Fixes modal to remove scroll bars when modal is visible, fixes #787

src/definitions/modules/dimmer.js

@@ -85,7 +85,6 @@ $.fn.dimmer = function(parameters) {
               .on(clickEvent + eventNamespace, module.toggle)
             ;
           }
-          console.log($module, module.is.page());
           if( module.is.page() ) {
             module.debug('Setting as a page dimmer', $dimmable);
             module.set.pageDimmer();
@@ -192,13 +191,13 @@ $.fn.dimmer = function(parameters) {
             ;
             if(settings.on != 'hover' && settings.useCSS && $.fn.transition !== undefined && $dimmer.transition('is supported')) {
               module.verbose('Hiding dimmer with css');
+              module.remove.dimmed();
               $dimmer
                 .transition({
                   animation : settings.transition + ' out',
                   duration  : module.get.duration(),
                   queue     : true,
                   complete  : function() {
-                    module.remove.dimmed();
                     module.remove.active();
                     callback();
                   }
@@ -207,11 +206,11 @@ $.fn.dimmer = function(parameters) {
             }
             else {
               module.verbose('Hiding dimmer with javascript');
+              module.remove.dimmed();
               $dimmer
                 .stop()
                 .fadeOut(module.get.duration(), function() {
                   $dimmer.removeAttr('style');
-                  module.remove.dimmed();
                   module.remove.active();
                   callback();
                 })

src/definitions/modules/dimmer.less

@@ -108,9 +108,11 @@
   transform-origin: center center;
 }
 
-.ui.scrolling.dimmable > .dimmer,
-.ui.scrolling.page.dimmer {
-  position: absolute;
+body.ui.dimmed.dimmable {
+  overflow: hidden;
+}
+body.ui.dimmable > .dimmer {
+  position: fixed;
 }
 
 body.ui.dimmed.dimmable > :not(.dimmer){

src/definitions/modules/modal.js

@@ -510,7 +510,7 @@ $.fn.modal = function(parameters) {
             else {
               $module
                 .css({
-                  marginTop : '1em',
+                  marginTop : '',
                   top       : $document.scrollTop()
                 })
               ;

src/definitions/modules/modal.less

@@ -90,6 +90,7 @@
   background: @headerBackground;
   margin: @headerMargin;
   padding: @headerPadding;
+  box-shadow: @headerBoxShadow;
 
   font-size: @headerFontSize;
   font-weight: @headerFontWeight;
@@ -104,6 +105,7 @@
 .ui.modal > .content {
   position: relative;
   display: table;
+  table-layout: fixed;
   width: 100%;
   font-size: @contentFontSize;
   line-height: @contentLineHeight;
@@ -112,21 +114,26 @@
 }
 .ui.modal > .content > .image {
   display: table-cell;
-  padding-right: @imagePadding;
-  min-width: @imageMinWidth;
+  width: @imageWidth;
   vertical-align: @imageVerticalAlign;
 }
 .ui.modal > .content > .description {
   display: table-cell;
   vertical-align: top;
-  padding-left: @descriptionPadding;
   min-width: @descriptionMinWidth;
   vertical-align: @descriptionVerticalAlign;
 }
+
+.ui.modal > .content > .icon + .description,
+.ui.modal > .content > .image + .description {
+  padding-left: @descriptionDistance;
+}
+
 /*rtl:ignore*/
 .ui.modal > .content > .image > i.icon {
   font-size: @imageIconSize;
   margin: 0em;
+  opacity: 1;
 }
 
 /*--------------
@@ -231,6 +238,9 @@
 .ui.basic.modal > .actions {
   background-color: transparent;
 }
+.ui.basic.modal > .header {
+  color: @basicModalHeaderColor;
+}
 .ui.basic.modal > .close {
   top: @basicModalCloseTop;
   right: @basicModalCloseRight;
@@ -242,12 +252,16 @@
 
 /* A modal that cannot fit on the page */
 
-body.ui.scrolling.dimmable {
-  height: auto;
+.ui.scrolling.dimmable {
+  overflow: hidden;
+}
+.ui.scrolling.dimmable > .dimmer {
+  position: fixed;
+  overflow: auto;
 }
 .ui.modal.scrolling {
-  position: absolute;
-  margin-top: @scrollingTopMargin;
+  position: static;
+  margin: @scrollingMargin auto;
 }
 
 /*******************************

src/themes/packages/default/elements/image.variables

@@ -6,7 +6,7 @@
        Element
 --------------------*/
 
-@placeholderColor: rgba(0, 0, 0, 0.05);
+@placeholderColor: transparent;
 @roundedBorderRadius: 0.3125em;
 
 @imageHorizontalMargin: 0.25rem;

src/themes/packages/default/modules/modal.variables

@@ -23,9 +23,10 @@
 /* Header */
 @headerMargin: 0em;
 @headerPadding: 1.5rem 2rem;
-@headerBackground: @lightBlack;
-@headerColor: @white;
+@headerBackground: @subtleGradient @white;
+@headerColor: @darkTextColor;
 @headerFontSize: 1.6em;
+@headerBoxShadow: @subtleShadow;
 @headerFontWeight: bold;
 @headerFontFamily: @headerFont;
 @headerBorder: 1px solid @borderColor;
@@ -36,13 +37,12 @@
 @contentLineHeight: 1.4;
 @contentBackground: #FFFFFF;
 
-/* Left / Right */
-@imageMinWidth: 25%;
-@imagePadding: 1em;
+/* Image / Description */
+@imageWidth: '';
 @imageIconSize: 8rem;
 @imageVerticalAlign: top;
 
-@descriptionPadding: 1em;
+@descriptionDistance: 1em;
 @descriptionMinWidth: '';
 @descriptionVerticalAlign: top;
 
@@ -60,7 +60,7 @@
 @mobileButtonDistance: 1em;
 
 /* Inner Close Position (Responsive) */
-@innerCloseTop: 1.5rem;
+@innerCloseTop: 1rem;
 @innerCloseRight: 1rem;
 @innerCloseColor: @textColor;
 
@@ -86,12 +86,13 @@
 --------------------*/
 
 /* Basic */
+@basicModalHeaderColor: @white;
 @basicModalColor: @white;
 @basicModalCloseTop: 1.5rem;
 @basicModalCloseRight: 1rem;
 
 /* Scrolling Margin */
-@scrollingTopMargin: 1rem;
+@scrollingMargin: 3rem;
 
 
 /*-------------------