Reverts #2061 scrollbar changes, adds blurring/inverted settings in modal settings

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;
 }
 

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'
   }

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;
   }

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 */