From 381610756034561b065cea1b1c67b05b2b138b78 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Fri, 13 Dec 2019 09:38:38 -0500
Subject: [PATCH] UX: Z-index of image lightbox needs to be higher than modal
 z-index

---
 .../common/base/magnific-popup.scss           | 48 +------------------
 1 file changed, 2 insertions(+), 46 deletions(-)

diff --git a/app/assets/stylesheets/common/base/magnific-popup.scss b/app/assets/stylesheets/common/base/magnific-popup.scss
index 76ef9a84466..1200c09b7cc 100644
--- a/app/assets/stylesheets/common/base/magnific-popup.scss
+++ b/app/assets/stylesheets/common/base/magnific-popup.scss
@@ -40,7 +40,6 @@ $controls-color: #fff !default;
 $inner-close-icon-color: #333 !default;
 $controls-text-color: #ccc !default; // Color of preloader and "1 of X" indicator
 $controls-text-color-hover: #fff !default;
-$IE7support: true !default; // Very basic IE7 support
 
 // Iframe-type options
 $include-iframe-type: true !default;
@@ -73,15 +72,12 @@ $use-visuallyhidden: false !default; // Hide content from browsers, but make it
   left: 0;
   width: 100%;
   height: 100%;
-  z-index: $z-index-base + 2;
+  z-index: z("modal", "popover");
   overflow: hidden;
   position: fixed;
 
   background: $overlay-color;
   opacity: $overlay-opacity;
-  @if $IE7support {
-    filter: unquote("alpha(opacity=#{$overlay-opacity*100})");
-  }
 }
 
 // Wrapper for popup
@@ -90,7 +86,7 @@ $use-visuallyhidden: false !default; // Hide content from browsers, but make it
   left: 0;
   width: 100%;
   height: 100%;
-  z-index: $z-index-base + 3;
+  z-index: z("modal", "popover") + 1;
   position: fixed;
   outline: 0 !important;
   -webkit-backface-visibility: hidden; // fixes webkit bug that can cause "false" scrollbar
@@ -274,9 +270,6 @@ button {
   text-decoration: none;
   text-align: center;
   opacity: $controls-opacity;
-  @if $IE7support {
-    filter: unquote("alpha(opacity=#{$controls-opacity*100})");
-  }
   padding: 0 0 18px 10px;
   color: $controls-color;
   font-style: normal;
@@ -287,9 +280,6 @@ button {
   &:focus {
     opacity: 1;
     outline: 0;
-    @if $IE7support {
-      filter: unquote("alpha(opacity=#{1*100})");
-    }
   }
 
   &:active {
@@ -327,9 +317,6 @@ button {
   .mfp-arrow {
     position: absolute;
     opacity: $controls-opacity;
-    @if $IE7support {
-      filter: unquote("alpha(opacity=#{$controls-opacity*100})");
-    }
     top: 50%;
     margin: -55px 0 0;
     padding: 0;
@@ -343,9 +330,6 @@ button {
     &:focus {
       outline: 0;
       opacity: 1;
-      @if $IE7support {
-        filter: unquote("alpha(opacity=#{1*100})");
-      }
     }
     &:before,
     &:after,
@@ -598,34 +582,6 @@ button {
   }
 }
 
-// IE7 support
-// Styles that make popup look nicier in old IE
-@if $IE7support {
-  .mfp-ie7 {
-    .mfp-img {
-      padding: 0;
-    }
-    .mfp-bottom-bar {
-      width: 600px;
-      left: 50%;
-      margin-left: -300px;
-      margin-top: 5px;
-      padding-bottom: 5px;
-    }
-    .mfp-container {
-      padding: 0;
-    }
-    .mfp-content {
-      padding-top: 44px;
-    }
-    .mfp-close {
-      top: 0;
-      right: 0;
-      padding-top: 0;
-    }
-  }
-}
-
 .mfp-zoom-in {
   /* start state */
   .mfp-content {