github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-01-06 11:23:57 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UX: adds hover effect on lightboxed images (#8416)

Browse Source 
* 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>
This commit is contained in:
Joffrey JAFFEUX 2019-11-26 15:06:30 +01:00 committed by GitHub
parent 8876db874f
commit 8ea114007f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 26 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
app/assets/stylesheets/common/base/lightbox.scss
View File

@ -72,3 +72,16 @@ $meta-element-margin: 6px;
.mfp-preloader .spinner { .mfp-preloader .spinner {
margin: auto; 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);
}
}

14
app/assets/stylesheets/common/foundation/variables.scss
View File

@ -198,11 +198,23 @@ $box-shadow: (
} }
} }
@function dark-light-choose($light-theme-result, $dark-theme-result) { @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; @return $light-theme-result;
} @else { } @else {
@return $dark-theme-result; @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"; @import "color_transformations";