Use new "any emoji" icon in light mode

This commit is contained in:
Ken Powers 2020-05-08 13:29:42 -04:00 committed by GitHub
parent 0d1786db8b
commit 9d24f0db83
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 29 additions and 2 deletions

View File

Before

Width:  |  Height:  |  Size: 291 B

After

Width:  |  Height:  |  Size: 291 B

View File

Before

Width:  |  Height:  |  Size: 291 B

After

Width:  |  Height:  |  Size: 291 B

View File

@ -0,0 +1,6 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 32C24.8366 32 32 24.8366 32 16C32 7.16344 24.8366 0 16 0C7.16344 0 0 7.16344 0 16C0 24.8366 7.16344 32 16 32Z" fill="#676767"/>
<path d="M8 18C9.10457 18 10 17.1046 10 16C10 14.8954 9.10457 14 8 14C6.89543 14 6 14.8954 6 16C6 17.1046 6.89543 18 8 18Z" fill="#E9E9E9"/>
<path d="M16 18C17.1046 18 18 17.1046 18 16C18 14.8954 17.1046 14 16 14C14.8954 14 14 14.8954 14 16C14 17.1046 14.8954 18 16 18Z" fill="#E9E9E9"/>
<path d="M24 18C25.1046 18 26 17.1046 26 16C26 14.8954 25.1046 14 24 14C22.8954 14 22 14.8954 22 16C22 17.1046 22.8954 18 24 18Z" fill="#E9E9E9"/>
</svg>

After

Width:  |  Height:  |  Size: 679 B

View File

@ -0,0 +1,6 @@
<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M16 32C24.8366 32 32 24.8366 32 16C32 7.16344 24.8366 0 16 0C7.16344 0 0 7.16344 0 16C0 24.8366 7.16344 32 16 32Z" fill="#4A4A4A"/>
<path d="M8 18C9.10457 18 10 17.1046 10 16C10 14.8954 9.10457 14 8 14C6.89543 14 6 14.8954 6 16C6 17.1046 6.89543 18 8 18Z" fill="#E9E9E9"/>
<path d="M16 18C17.1046 18 18 17.1046 18 16C18 14.8954 17.1046 14 16 14C14.8954 14 14 14.8954 14 16C14 17.1046 14.8954 18 16 18Z" fill="#E9E9E9"/>
<path d="M24 18C25.1046 18 26 17.1046 26 16C26 14.8954 25.1046 14 24 14C22.8954 14 22 14.8954 22 16C22 17.1046 22.8954 18 24 18Z" fill="#E9E9E9"/>
</svg>

After

Width:  |  Height:  |  Size: 679 B

View File

@ -5162,16 +5162,31 @@ button.module-image__border-overlay:focus {
background: rgba($color-white, 0.3);
}
&--more {
background: url('../images/any-emoji-32.svg') no-repeat center;
@include light-theme {
background: url('../images/any-emoji-32-light.svg') no-repeat center;
}
@include dark-theme {
background: url('../images/any-emoji-32-dark.svg') no-repeat center;
}
&::after {
content: '';
display: block;
width: 52px;
height: 52px;
background: url('../images/any-emoji-32-hover.svg') no-repeat center;
opacity: 0;
transition: opacity 400ms $ease-out-expo;
@include light-theme {
background: url('../images/any-emoji-32-light-hover.svg') no-repeat
center;
}
@include dark-theme {
background: url('../images/any-emoji-32-dark-hover.svg') no-repeat
center;
}
}
&:hover::after {