diff --git a/src/definitions/modules/dimmer.js b/src/definitions/modules/dimmer.js index 183e11283..21f146686 100755 --- a/src/definitions/modules/dimmer.js +++ b/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(); }) diff --git a/src/definitions/modules/dimmer.less b/src/definitions/modules/dimmer.less index 3e92c98f8..4b92e4b0e 100755 --- a/src/definitions/modules/dimmer.less +++ b/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){ diff --git a/src/definitions/modules/modal.js b/src/definitions/modules/modal.js index aefaa53df..347c79061 100755 --- a/src/definitions/modules/modal.js +++ b/src/definitions/modules/modal.js @@ -510,7 +510,7 @@ $.fn.modal = function(parameters) { else { $module .css({ - marginTop : '1em', + marginTop : '', top : $document.scrollTop() }) ; diff --git a/src/definitions/modules/modal.less b/src/definitions/modules/modal.less index c79edc0d4..efcb3e396 100755 --- a/src/definitions/modules/modal.less +++ b/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; } /******************************* diff --git a/src/themes/packages/default/elements/image.variables b/src/themes/packages/default/elements/image.variables index a0e3114ac..54775a448 100755 --- a/src/themes/packages/default/elements/image.variables +++ b/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; diff --git a/src/themes/packages/default/modules/modal.variables b/src/themes/packages/default/modules/modal.variables index 652bbb550..04cfc0b30 100755 --- a/src/themes/packages/default/modules/modal.variables +++ b/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; /*-------------------