From 8ea114007f10588d6e8eca86aed212f45e2a4a47 Mon Sep 17 00:00:00 2001
From: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Date: Tue, 26 Nov 2019 15:06:30 +0100
Subject: [PATCH] UX: adds hover effect on lightboxed images (#8416)

* UX: adds hover effect on lightboxed images

This commits also adds two scss functions:

- is-light-color-scheme()
- is-dark-color-scheme()

This hover effect won't be added on dark color schemes, as images already standout nicely on dark backgrounds.

Co-Authored-By: David Taylor <david@taylorhq.com>
---
 app/assets/stylesheets/common/base/lightbox.scss   | 13 +++++++++++++
 .../stylesheets/common/foundation/variables.scss   | 14 +++++++++++++-
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/app/assets/stylesheets/common/base/lightbox.scss b/app/assets/stylesheets/common/base/lightbox.scss
index dc75b54a071..465d2c49b20 100644
--- a/app/assets/stylesheets/common/base/lightbox.scss
+++ b/app/assets/stylesheets/common/base/lightbox.scss
@@ -72,3 +72,16 @@ $meta-element-margin: 6px;
 .mfp-preloader .spinner {
   margin: auto;
 }
+
+@if is-light-color-scheme() {
+  a.lightbox {
+    -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
+    transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
+  }
+
+  a.lightbox:hover {
+    border-radius: 5px;
+    box-shadow: 0 2px 5px 0 rgba($primary, 0.2),
+      0 2px 10px 0 rgba($primary, 0.2);
+  }
+}
diff --git a/app/assets/stylesheets/common/foundation/variables.scss b/app/assets/stylesheets/common/foundation/variables.scss
index 0895022002e..22da7ac9bc8 100644
--- a/app/assets/stylesheets/common/foundation/variables.scss
+++ b/app/assets/stylesheets/common/foundation/variables.scss
@@ -198,11 +198,23 @@ $box-shadow: (
   }
 }
 @function dark-light-choose($light-theme-result, $dark-theme-result) {
-  @if dc-color-brightness($primary) < dc-color-brightness($secondary) {
+  @if is-light-color-scheme() {
     @return $light-theme-result;
   } @else {
     @return $dark-theme-result;
   }
 }
 
+@function is-light-color-scheme() {
+  @if dc-color-brightness($primary) < dc-color-brightness($secondary) {
+    @return true;
+  } @else {
+    @return false;
+  }
+}
+
+@function is-dark-color-scheme() {
+  @return not is-light-color-scheme();
+}
+
 @import "color_transformations";