feat(dimmer): support other types of background beside color

lubber-de · web-flow · commit ecf370bcd048 · 2020-07-12T12:52:48.000+02:00
While i initially thought about implementing a new dimmer variant based on a different background, i tried to simply change the dimmer variables instead, so my idea would work by just creating a new theme.
However, as the dimmer currently only supports background-color this prevents to use an image or a radial gradient as dimmer background for the existing variables.
That said, this PR changes the background-color property to just background which is compatible with the default color value and allows for themes to use other other type of background than just the color.

Again: This PR does not change the default theme behavior, it just provides the possibility to use other background-types than just the color
diff --git a/src/definitions/modules/dimmer.less b/src/definitions/modules/dimmer.less
@@ -38,7 +38,7 @@
   vertical-align: @verticalAlign;
   padding: @padding;
 
-  background-color: @backgroundColor;
+  background: @backgroundColor;
   opacity: @hiddenOpacity;
   line-height: @lineHeight;
 
@@ -181,10 +181,10 @@ body.dimmable > .dimmer {
 
   /* Dimmer Color */
   .blurring.dimmable > .dimmer {
-    background-color: @blurredBackgroundColor;
+    background: @blurredBackgroundColor;
   }
   .blurring.dimmable > .inverted.dimmer {
-    background-color: @blurredInvertedBackgroundColor;
+    background: @blurredInvertedBackgroundColor;
   }
 }
 & when (@variationDimmerAligned) {
@@ -206,13 +206,13 @@ body.dimmable > .dimmer {
   ---------------*/
 
   .medium.medium.medium.medium.medium.dimmer {
-    background-color: @mediumBackgroundColor;
+    background: @mediumBackgroundColor;
   }
   .light.light.light.light.light.dimmer {
-    background-color: @lightBackgroundColor;
+    background: @lightBackgroundColor;
   }
   .very.light.light.light.light.dimmer {
-    background-color: @veryLightBackgroundColor;
+    background: @veryLightBackgroundColor;
   }
 }
 
@@ -222,7 +222,7 @@ body.dimmable > .dimmer {
   ---------------*/
 
   .ui.inverted.dimmer {
-    background-color: @invertedBackgroundColor;
+    background: @invertedBackgroundColor;
   }
   .ui.inverted.dimmer > .content,
   .ui.inverted.dimmer > .content > * {
@@ -235,13 +235,13 @@ body.dimmable > .dimmer {
     ---------------*/
 
     .medium.medium.medium.medium.medium.inverted.dimmer {
-      background-color: @mediumInvertedBackgroundColor;
+      background: @mediumInvertedBackgroundColor;
     }
     .light.light.light.light.light.inverted.dimmer {
-      background-color: @lightInvertedBackgroundColor;
+      background: @lightInvertedBackgroundColor;
     }
     .very.light.light.light.light.inverted.dimmer {
-      background-color: @veryLightInvertedBackgroundColor;
+      background: @veryLightInvertedBackgroundColor;
     }
   }
 }
@@ -259,22 +259,22 @@ body.dimmable > .dimmer {
     width: 0;
     height: 0;
     z-index: -100;
-    background-color: @simpleStartBackgroundColor;
+    background: @simpleStartBackgroundColor;
   }
   .dimmed.dimmable > .ui.simple.dimmer {
     overflow: visible;
     opacity: 1;
     width: 100%;
     height: 100%;
-    background-color: @simpleEndBackgroundColor;
+    background: @simpleEndBackgroundColor;
     z-index: @simpleZIndex;
   }
 
   .ui.simple.inverted.dimmer {
-    background-color: @simpleInvertedStartBackgroundColor;
+    background: @simpleInvertedStartBackgroundColor;
   }
   .dimmed.dimmable > .ui.simple.inverted.dimmer {
-    background-color: @simpleInvertedEndBackgroundColor;
+    background: @simpleInvertedEndBackgroundColor;
   }
 }
 
diff --git a/src/definitions/modules/sidebar.less b/src/definitions/modules/sidebar.less
@@ -162,7 +162,7 @@ body.pushable > .pusher {
   top: 0;
   right: 0;
   content: '';
-  background-color: @dimmerColor;
+  background: @dimmerColor;
   overflow: hidden;
   opacity: 0;
   transition: @dimmerTransition;
diff --git a/src/definitions/views/card.less b/src/definitions/views/card.less
@@ -343,7 +343,7 @@
 
 .ui.cards > .card .dimmer,
 .ui.card .dimmer {
-  background-color: @dimmerColor;
+  background: @dimmerColor;
   z-index: @dimmerZIndex;
 }
 

Original file line number	Diff line number	Diff line change
`@@ -38,7 +38,7 @@`
`38`	`38`	`vertical-align: @verticalAlign;`
`39`	`39`	`padding: @padding;`
`40`	`40`
`41`		`- background-color: @backgroundColor;`
	`41`	`+ background: @backgroundColor;`
`42`	`42`	`opacity: @hiddenOpacity;`
`43`	`43`	`line-height: @lineHeight;`
`44`	`44`
`@@ -181,10 +181,10 @@ body.dimmable > .dimmer {`
`181`	`181`
`182`	`182`	`/* Dimmer Color */`
`183`	`183`	`.blurring.dimmable > .dimmer {`
`184`		`- background-color: @blurredBackgroundColor;`
	`184`	`+ background: @blurredBackgroundColor;`
`185`	`185`	`}`
`186`	`186`	`.blurring.dimmable > .inverted.dimmer {`
`187`		`- background-color: @blurredInvertedBackgroundColor;`
	`187`	`+ background: @blurredInvertedBackgroundColor;`
`188`	`188`	`}`
`189`	`189`	`}`
`190`	`190`	`& when (@variationDimmerAligned) {`
`@@ -206,13 +206,13 @@ body.dimmable > .dimmer {`
`206`	`206`	`---------------*/`
`207`	`207`
`208`	`208`	`.medium.medium.medium.medium.medium.dimmer {`
`209`		`- background-color: @mediumBackgroundColor;`
	`209`	`+ background: @mediumBackgroundColor;`
`210`	`210`	`}`
`211`	`211`	`.light.light.light.light.light.dimmer {`
`212`		`- background-color: @lightBackgroundColor;`
	`212`	`+ background: @lightBackgroundColor;`
`213`	`213`	`}`
`214`	`214`	`.very.light.light.light.light.dimmer {`
`215`		`- background-color: @veryLightBackgroundColor;`
	`215`	`+ background: @veryLightBackgroundColor;`
`216`	`216`	`}`
`217`	`217`	`}`
`218`	`218`
`@@ -222,7 +222,7 @@ body.dimmable > .dimmer {`
`222`	`222`	`---------------*/`
`223`	`223`
`224`	`224`	`.ui.inverted.dimmer {`
`225`		`- background-color: @invertedBackgroundColor;`
	`225`	`+ background: @invertedBackgroundColor;`
`226`	`226`	`}`
`227`	`227`	`.ui.inverted.dimmer > .content,`
`228`	`228`	`.ui.inverted.dimmer > .content > * {`
`@@ -235,13 +235,13 @@ body.dimmable > .dimmer {`
`235`	`235`	`---------------*/`
`236`	`236`
`237`	`237`	`.medium.medium.medium.medium.medium.inverted.dimmer {`
`238`		`- background-color: @mediumInvertedBackgroundColor;`
	`238`	`+ background: @mediumInvertedBackgroundColor;`
`239`	`239`	`}`
`240`	`240`	`.light.light.light.light.light.inverted.dimmer {`
`241`		`- background-color: @lightInvertedBackgroundColor;`
	`241`	`+ background: @lightInvertedBackgroundColor;`
`242`	`242`	`}`
`243`	`243`	`.very.light.light.light.light.inverted.dimmer {`
`244`		`- background-color: @veryLightInvertedBackgroundColor;`
	`244`	`+ background: @veryLightInvertedBackgroundColor;`
`245`	`245`	`}`
`246`	`246`	`}`
`247`	`247`	`}`
`@@ -259,22 +259,22 @@ body.dimmable > .dimmer {`
`259`	`259`	`width: 0;`
`260`	`260`	`height: 0;`
`261`	`261`	`z-index: -100;`
`262`		`- background-color: @simpleStartBackgroundColor;`
	`262`	`+ background: @simpleStartBackgroundColor;`
`263`	`263`	`}`
`264`	`264`	`.dimmed.dimmable > .ui.simple.dimmer {`
`265`	`265`	`overflow: visible;`
`266`	`266`	`opacity: 1;`
`267`	`267`	`width: 100%;`
`268`	`268`	`height: 100%;`
`269`		`- background-color: @simpleEndBackgroundColor;`
	`269`	`+ background: @simpleEndBackgroundColor;`
`270`	`270`	`z-index: @simpleZIndex;`
`271`	`271`	`}`
`272`	`272`
`273`	`273`	`.ui.simple.inverted.dimmer {`
`274`		`- background-color: @simpleInvertedStartBackgroundColor;`
	`274`	`+ background: @simpleInvertedStartBackgroundColor;`
`275`	`275`	`}`
`276`	`276`	`.dimmed.dimmable > .ui.simple.inverted.dimmer {`
`277`		`- background-color: @simpleInvertedEndBackgroundColor;`
	`277`	`+ background: @simpleInvertedEndBackgroundColor;`
`278`	`278`	`}`
`279`	`279`	`}`
`280`	`280`
Original file line number	Diff line number	Diff line change
`@@ -343,7 +343,7 @@`
`343`	`343`
`344`	`344`	`.ui.cards > .card .dimmer,`
`345`	`345`	`.ui.card .dimmer {`
`346`		`- background-color: @dimmerColor;`
	`346`	`+ background: @dimmerColor;`
`347`	`347`	`z-index: @dimmerZIndex;`
`348`	`348`	`}`
`349`	`349`