From 46198c9feae1d3105b9a3bdc9a26addda3a5420d Mon Sep 17 00:00:00 2001 From: jlukic Date: Thu, 16 Apr 2015 15:14:07 -0400 Subject: [PATCH] Reverts #2061 scrollbar changes, adds blurring/inverted settings in modal settings --- src/definitions/modules/dimmer.less | 11 +++-- src/definitions/modules/modal.js | 13 ++++++ src/definitions/modules/modal.less | 48 ++++++++++++++-------- src/themes/default/modules/modal.variables | 38 +++++++++-------- 4 files changed, 73 insertions(+), 37 deletions(-) diff --git a/src/definitions/modules/dimmer.less b/src/definitions/modules/dimmer.less index a329f1dfb..2de5369bf 100755 --- a/src/definitions/modules/dimmer.less +++ b/src/definitions/modules/dimmer.less @@ -106,19 +106,24 @@ transform-origin: center center; } +body.animating.in.dimmable, +body.dimmed.dimmable { + overflow: hidden; +} + body.dimmable > .dimmer { position: fixed; } /*-------------- - Blurring + Blurring ---------------*/ -.blurring.dimmable > :not(.dimmer) { +.blurring.dimmable > :not(.dimmer) > * { filter: @blurredStartFilter; transition: @blurredTransition; } -.blurring.dimmed.dimmable > :not(.dimmer) { +.blurring.dimmed.dimmable > :not(.dimmer) > * { filter: @blurredEndFilter; } diff --git a/src/definitions/modules/modal.js b/src/definitions/modules/modal.js index 2e18e0ccc..52c787d60 100644 --- a/src/definitions/modules/modal.js +++ b/src/definitions/modules/modal.js @@ -106,6 +106,12 @@ $.fn.modal = function(parameters) { }, dimmerSettings = $.extend(true, defaultSettings, settings.dimmerSettings) ; + if(settings.inverted) { + dimmerSettings.variation = (dimmerSettings.variation !== undefined) + ? dimmer.settings.variation + ' inverted' + : 'inverted' + ; + } if($.fn.dimmer === undefined) { module.error(error.dimmer); return; @@ -119,6 +125,9 @@ $.fn.modal = function(parameters) { else { module.set.undetached(); } + if(settings.blurring) { + $dimmable.addClass(className.blurring); + } $dimmer = $dimmable.dimmer('get dimmer'); }, id: function() { @@ -829,6 +838,9 @@ $.fn.modal.settings = { closable : true, autofocus : true, + inverted : true, + blurring : true, + dimmerSettings : { closable : false, useCSS : true @@ -877,6 +889,7 @@ $.fn.modal.settings = { className : { active : 'active', animating : 'animating', + blurring : 'blurring', scrolling : 'scrolling', undetached : 'undetached' } diff --git a/src/definitions/modules/modal.less b/src/definitions/modules/modal.less index 7f4c3d66a..f55fa4bc7 100755 --- a/src/definitions/modules/modal.less +++ b/src/definitions/modules/modal.less @@ -32,9 +32,6 @@ left: 50%; text-align: left; - width: @width; - margin-left: @xOffset; - background: @background; border: @border; box-shadow: @boxShadow; @@ -106,8 +103,7 @@ ---------------*/ .ui.modal > .content { - display: table; - table-layout: fixed; + display: flex; width: 100%; font-size: @contentFontSize; line-height: @contentLineHeight; @@ -117,26 +113,32 @@ /* Image */ .ui.modal > .content > .image { - display: table-cell; + display: block; + flex: 0 1 auto; width: @imageWidth; - vertical-align: @imageVerticalAlign; + align-self: @imageVerticalAlign; } -.ui.modal > .content > .image[class*="top aligned"] { - vertical-align: top; +.ui.modal > [class*="top aligned"] { + align-self: top; } -.ui.modal > .content > .image[class*="middle aligned"] { - vertical-align: middle; +.ui.modal > [class*="middle aligned"] { + align-self: middle; +} +.ui.modal > [class*="stretched"] { + align-self: stretch; } /* Description */ .ui.modal > .content > .description { - display: table-cell; - vertical-align: top; - vertical-align: @descriptionVerticalAlign; + display: block; + flex: 1 0 auto; + min-width: 0px; + align-self: @descriptionVerticalAlign; } .ui.modal > .content > .icon + .description, .ui.modal > .content > .image + .description { + flex: 0 1 auto; min-width: @descriptionMinWidth; width: @descriptionWidth; padding-left: @descriptionDistance; @@ -260,6 +262,14 @@ } } +/*-------------- + Coupling +---------------*/ + +.ui.inverted.dimmer > .ui.modal { + box-shadow: @invertedBoxShadow; +} + /******************************* Types *******************************/ @@ -268,7 +278,7 @@ background-color: transparent; border: none; border-radius: 0em; - box-shadow: 0px 0px 0px 0px; + box-shadow: none !important; color: @basicModalColor; } .ui.basic.modal > .header, @@ -284,9 +294,15 @@ right: @basicModalCloseRight; } +.ui.inverted.dimmer > .basic.modal { + color: @basicInvertedModalColor; +} +.ui.inverted.dimmer > .ui.basic.modal > .header { + color: @basicInvertedModalHeaderColor; +} + /* Tablet and Mobile */ @media only screen and (max-width : @computerBreakpoint) { - .ui.basic.modal > .close { color: @basicInnerCloseColor; } diff --git a/src/themes/default/modules/modal.variables b/src/themes/default/modules/modal.variables index 87127de30..5cddbbf65 100644 --- a/src/themes/default/modules/modal.variables +++ b/src/themes/default/modules/modal.variables @@ -4,11 +4,9 @@ @background: @white; @border: none; -@width: 90%; @zIndex: 1001; -@xOffset: -(@width / 2); @borderRadius: @defaultBorderRadius; -@boxShadow: 0 1px 4px 1px rgba(0, 0, 0, 0.3); +@boxShadow: 1px 3px 10px 2px rgba(0, 0, 0, 0.5); /* Close Icon */ @closeOpacity: 0.8; @@ -24,21 +22,20 @@ /* Header */ @headerMargin: 0em; -@headerVerticalPadding: 1.2rem; -@headerHorizontalPadding: 2rem; +@headerVerticalPadding: 1.25rem; +@headerHorizontalPadding: 1.5rem; @headerPadding: @headerVerticalPadding @headerHorizontalPadding; -@headerBackground: @subtleGradient @white; +@headerBackground: @white; @headerColor: @darkTextColor; -@headerFontSize: 1.6em; -@headerLineHeight: 1.3em; -@headerBoxShadow: @subtleShadow; +@headerFontSize: @huge; +@headerBoxShadow: none; @headerFontWeight: bold; @headerFontFamily: @headerFont; @headerBorder: 1px solid @borderColor; /* Content */ @contentFontSize: 1em; -@contentPadding: 2rem; +@contentPadding: 1.5rem; @contentLineHeight: 1.4; @contentBackground: #FFFFFF; @@ -49,13 +46,13 @@ @descriptionDistance: 2em; @descriptionMinWidth: ''; -@descriptionWidth: 80%; +@descriptionWidth: auto; @descriptionVerticalAlign: top; /* Modal Actions */ @actionBorder: 1px solid @borderColor; -@actionBackground: #EFEFEF; -@actionPadding: 1rem 2rem; +@actionBackground: @offWhite; +@actionPadding: 1rem 1rem; @actionAlign: right; @buttonDistance: 0.75em; @@ -76,13 +73,12 @@ @mobileCloseTop: 0.5rem; @mobileCloseRight: 0.5rem; - /* Responsive Widths */ @mobileWidth: 95%; @tabletWidth: 88%; -@computerWidth: 74%; -@largeMonitorWidth: 56%; -@widescreenMonitorWidth: 42%; +@computerWidth: 850px; +@largeMonitorWidth: 900px; +@widescreenMonitorWidth: 950px; @mobileMargin: 0em 0em 0em -(@mobileWidth / 2); @tabletMargin: 0em 0em 0em -(@tabletWidth / 2); @@ -94,6 +90,9 @@ @fullScreenOffset: (100% - @fullScreenWidth) / 2; @fullScreenMargin: 1em auto; +/* Coupling */ +@invertedBoxShadow: 1px 3px 10px 2px rgba(0, 0, 0, 0.2); + /*------------------- Types --------------------*/ @@ -105,6 +104,9 @@ @basicModalCloseRight: 1.5rem; @basicInnerCloseColor: @white; +@basicInvertedModalColor: @textColor; +@basicInvertedModalHeaderColor: @darkTextColor; + /* Scrolling Margin */ @scrollingMargin: 3.5rem; @mobileScrollingMargin: 1rem; @@ -114,7 +116,7 @@ --------------------*/ /* Size Widths */ -@smallRatio: 0.6; +@smallRatio: 0.8; @largeRatio: 1.2; /* Derived Responsive Sizes */