DROOP-1090: Fix bug when media background is not visible after removi…

…ng color opacity
droptica · Apr 12, 2024 · fdbd34e · fdbd34e
1 parent c88034a
commit fdbd34e
Show file tree

Hide file tree

Showing 8 changed files with 4 additions and 17 deletions.
diff --git a/themes/custom/droopler_theme/STARTERKIT_SCSS/src/scss/base/_themes.scss b/themes/custom/droopler_theme/STARTERKIT_SCSS/src/scss/base/_themes.scss
@@ -58,7 +58,6 @@
 //   --product-teaser-box-shadow: 0 0 0.625rem -0.1875rem #{$color-aeneas};
 //   --product-teaser-border: 1px solid #{$color-hector};
 //   --product-slick-arrow-background-color: #{$color-odysseus};
-//   --media-overlay-background-color: #{$color-odysseus};
 //   --tiles-gallery-item-caption-background: #{$color-cassandra};
 //   --tiles-gallery-item-caption-text-color: #{$color-odysseus};
 //   --mobile-filter-icon-color: #828282;
@@ -137,7 +136,6 @@
 //   --product-teaser-box-shadow: 0 0 0.625rem -0.1875rem #{$color-aeneas};
 //   --product-teaser-border: 1px solid #{$color-hector};
 //   --product-slick-arrow-background-color: #{$color-odysseus};
-//   --media-overlay-background-color: #{$color-cassandra};
 //   --mobile-filter-icon-color: #828282;
 //   --mobile-filter-icon-color-hover: #{$color-cassandra};
 //   --mobile-filter-border: 2px solid #{$color-hector};
@@ -211,7 +209,6 @@
 //   --product-teaser-box-shadow: 0 0 0.625rem -0.1875rem #{$color-aeneas};
 //   --product-teaser-border: 1px solid #{$color-hector};
 //   --product-slick-arrow-background-color: #{$color-odysseus};
-//   --media-overlay-background-color: #{$color-agamemnon};
 //   --mobile-filter-icon-color: #828282;
 //   --mobile-filter-icon-color-hover: #{$color-odysseus};
 //   --mobile-filter-border: 2px solid #{$color-hector};
@@ -285,7 +282,6 @@
 //   --product-teaser-box-shadow: 0 0 0.625rem -0.1875rem #{$color-aeneas};
 //   --product-teaser-border: 1px solid #{$color-hector};
 //   --product-slick-arrow-background-color: #{$color-odysseus};
-//   --media-overlay-background-color: #{$color-odysseus};
 //   --tiles-gallery-item-caption-background: #{$color-cassandra};
 //   --tiles-gallery-item-caption-text-color: #{$color-odysseus};
 //   --tiles-gallery-background-color: #{$color-odysseus};
@@ -358,7 +354,6 @@
 //   --product-teaser-text-color: "inherit";
 //   --product-teaser-box-shadow: 0 0 0.625rem -0.1875rem #{$color-aeneas};
 //   --product-teaser-border: 1px solid #{$color-hector};
-//   --media-overlay-background-color: "inherit";
 //   --mobile-filter-icon-color: #828282;
 //   --mobile-filter-icon-color-hover: #{$color-odysseus};
 //   --mobile-filter-border: 2px solid #{$color-hector};

diff --git a/themes/custom/droopler_theme/STARTERKIT_SCSS/src/scss/base/_variables.scss b/themes/custom/droopler_theme/STARTERKIT_SCSS/src/scss/base/_variables.scss
@@ -22,7 +22,6 @@
 //   --media-img-display: block;
 //   --media-img-width: auto;
 //   --media-img-height: auto;
-//   --media-overlay-background-color: rgb(0 0 0 / 20%);
 //   --media-overlay-opacity: 0.2;
 
 //   // Base component: Media icon.

diff --git a/themes/custom/droopler_theme/build/components/base/media/media.css b/themes/custom/droopler_theme/build/components/base/media/media.css
diff --git a/themes/custom/droopler_theme/build/components/base/media/media.css.map b/themes/custom/droopler_theme/build/components/base/media/media.css.map
diff --git a/themes/custom/droopler_theme/build/css/main.style.css b/themes/custom/droopler_theme/build/css/main.style.css
diff --git a/themes/custom/droopler_theme/build/css/main.style.css.map b/themes/custom/droopler_theme/build/css/main.style.css.map
diff --git a/themes/custom/droopler_theme/src/components/base/media/_media.scss b/themes/custom/droopler_theme/src/components/base/media/_media.scss
@@ -6,7 +6,6 @@
   --media-img-display: block;
   --media-img-width: auto;
   --media-img-height: auto;
-  --media-overlay-background-color: rgb(0 0 0 / 20%);
   --media-overlay-opacity: 0.2;
 }
 
@@ -29,7 +28,6 @@
       @include filling-absolute;
 
       content: "";
-      background-color: var(--media-overlay-background-color);
     }
   }
 

diff --git a/themes/custom/droopler_theme/src/scss/base/_themes.scss b/themes/custom/droopler_theme/src/scss/base/_themes.scss
@@ -58,7 +58,6 @@
   --product-teaser-box-shadow: 0 0 0.625rem -0.1875rem #{$color-aeneas};
   --product-teaser-border: 1px solid #{$color-hector};
   --product-slick-arrow-background-color: #{$color-odysseus};
-  --media-overlay-background-color: #{$color-odysseus};
   --tiles-gallery-item-caption-background: #{$color-cassandra};
   --tiles-gallery-item-caption-text-color: #{$color-odysseus};
   --mobile-filter-icon-color: #828282;
@@ -137,7 +136,6 @@
   --product-teaser-box-shadow: 0 0 0.625rem -0.1875rem #{$color-aeneas};
   --product-teaser-border: 1px solid #{$color-hector};
   --product-slick-arrow-background-color: #{$color-odysseus};
-  --media-overlay-background-color: #{$color-cassandra};
   --mobile-filter-icon-color: #828282;
   --mobile-filter-icon-color-hover: #{$color-cassandra};
   --mobile-filter-border: 2px solid #{$color-hector};
@@ -211,7 +209,6 @@
   --product-teaser-box-shadow: 0 0 0.625rem -0.1875rem #{$color-aeneas};
   --product-teaser-border: 1px solid #{$color-hector};
   --product-slick-arrow-background-color: #{$color-odysseus};
-  --media-overlay-background-color: #{$color-agamemnon};
   --mobile-filter-icon-color: #828282;
   --mobile-filter-icon-color-hover: #{$color-odysseus};
   --mobile-filter-border: 2px solid #{$color-hector};
@@ -285,7 +282,6 @@
   --product-teaser-box-shadow: 0 0 0.625rem -0.1875rem #{$color-aeneas};
   --product-teaser-border: 1px solid #{$color-hector};
   --product-slick-arrow-background-color: #{$color-odysseus};
-  --media-overlay-background-color: #{$color-odysseus};
   --tiles-gallery-item-caption-background: #{$color-cassandra};
   --tiles-gallery-item-caption-text-color: #{$color-odysseus};
   --tiles-gallery-background-color: #{$color-odysseus};
@@ -358,7 +354,6 @@
   --product-teaser-text-color: "inherit";
   --product-teaser-box-shadow: 0 0 0.625rem -0.1875rem #{$color-aeneas};
   --product-teaser-border: 1px solid #{$color-hector};
-  --media-overlay-background-color: "inherit";
   --mobile-filter-icon-color: #828282;
   --mobile-filter-icon-color-hover: #{$color-odysseus};
   --mobile-filter-border: 2px solid #{$color-hector};