Adds glass dimmers

RELEASE-NOTES.md

@@ -8,6 +8,7 @@
 - **Grid** - Grids are now based on `flexbox`, columns are now `equal height` by default. Flexbox alignment has been added for easier vertical alignment.
 - **Headers** - Added new header type `sub header`, useful for displaying small headers alongside text content. See examples [in the header docs](http://www.semantic-ui.com/elements/header.html#sub-headers)
 - **Dropdown** - Added new dropdown variation `scrolling dropdown` and `scrolling menu`, see docs or try it out with the language menu in the navigation bar
+- **Dimmer** - Dimmers now have a `blurring` variation which apply a glass-like effect when dimmed
 
 **Major Changes**
 - **Menu** - Menu now uses flexbox. This allows menu items to match each others heights regardless of each items content size. `right menu` content should now follow other menu content instead of preceding it (no longer uses float).

src/definitions/modules/dimmer.less

@@ -38,7 +38,7 @@
   text-align: @textAlign;
   vertical-align: @verticalAlign;
 
-  background: @background;
+  background-color: @backgroundColor;
   opacity: @hiddenOpacity;
   line-height: @lineHeight;
 
@@ -58,7 +58,7 @@
   display: @contentDisplay;
   user-select: text;
 }
-.ui.dimmer > .content > div {
+.ui.dimmer > .content > * {
   display: @contentChildDisplay;
   vertical-align: @verticalAlign;
   color: @textColor;
@@ -114,15 +114,25 @@ body.dimmable > .dimmer {
   position: fixed;
 }
 
-/*
-body.dimmable > :not(.dimmer) {
-  filter: @elementStartFilter;
+/*--------------
+   Blurring
+---------------*/
+
+.blurring.dimmable > :not(.dimmer) {
+  filter: @blurredStartFilter;
+  transition: @blurredTransition;
+}
+.blurring.dimmed.dimmable > :not(.dimmer) {
+  filter: @blurredEndFilter;
+}
+
+/* Dimmer Color */
+.blurring.dimmable > .dimmer {
+  background-color: @blurredBackgroundColor;
 }
-body.dimmed.dimmable > :not(.dimmer) {
-  filter: @elementEndFilter;
-  transition: @elementTransition;
+.blurring.dimmable > .inverted.dimmer {
+  background-color: @blurredInvertedBackgroundColor;
 }
-*/
 
 /*--------------
     Aligned
@@ -140,7 +150,7 @@ body.dimmed.dimmable > :not(.dimmer) {
 ---------------*/
 
 .ui.inverted.dimmer {
-  background: @invertedBackground;
+  background-color: @invertedBackgroundColor;
 }
 .ui.inverted.dimmer > .content > * {
   color: @textColor;
@@ -158,22 +168,22 @@ body.dimmed.dimmable > :not(.dimmer) {
   width: 0%;
   height: 0%;
   z-index: -100;
-  background-color: @simpleStartBackground;
+  background-color: @simpleStartBackgroundColor;
 }
 .dimmed.dimmable > .ui.simple.dimmer {
   overflow: visible;
   opacity: 1;
   width: 100%;
   height: 100%;
-  background: @simpleEndBackground;
+  background-color: @simpleEndBackgroundColor;
   z-index: @simpleZIndex;
 }
 
 .ui.simple.inverted.dimmer {
-  background: @simpleInvertedStartBackground;
+  background-color: @simpleInvertedStartBackgroundColor;
 }
 .dimmed.dimmable > .ui.simple.inverted.dimmer {
-  background: @simpleInvertedEndBackground;
+  background-color: @simpleInvertedEndBackgroundColor;
 }
 
 .loadUIOverrides();

src/themes/default/modules/dimmer.variables

@@ -5,7 +5,7 @@
 @dimmablePosition: relative;
 @dimmerPosition: absolute;
 
-@background: rgba(0, 0, 0 , 0.85);
+@backgroundColor: rgba(0, 0, 0 , 0.85);
 @lineHeight: 1;
 @perspective: 2000px;
 
@@ -19,9 +19,12 @@
 @textColor: @white;
 @overflow: hidden;
 
-@elementStartFilter: ~"blur(0px) grayscale(0)";
-@elementEndFilter: ~"blur(15px) grayscale(0.7)";
-@elementTransition: 1.5s all ease;
+@blurredStartFilter: ~"blur(0px) grayscale(0)";
+@blurredEndFilter: ~"blur(5px) grayscale(0.7)";
+@blurredTransition: 800ms filter @defaultEasing;
+
+@blurredBackgroundColor: rgba(0, 0, 0, 0.6);
+@blurredInvertedBackgroundColor: rgba(255, 255, 255, 0.6);
 
 /* Hidden (Default) */
 @hiddenOpacity: 0;
@@ -47,12 +50,12 @@
 --------------------*/
 
 /* Inverted */
-@invertedBackground: rgba(255, 255, 255, 0.85);
+@invertedBackgroundColor: rgba(255, 255, 255, 0.85);
 @invertedTextColor: @textColor;
 
 /* Simple */
 @simpleZIndex: 1;
-@simpleStartBackground: rgba(0, 0, 0, 0);
-@simpleEndBackground: @background;
-@simpleInvertedStartBackground: rgba(255, 255, 255, 0);
-@simpleInvertedEndBackground: @invertedBackground;
+@simpleStartBackgroundColor: rgba(0, 0, 0, 0);
+@simpleEndBackgroundColor: @backgroundColor;
+@simpleInvertedStartBackgroundColor: rgba(255, 255, 255, 0);
+@simpleInvertedEndBackgroundColor: @invertedBackgroundColor;