style: vote btn overlay bug on chrome

This commit is contained in:
MTG2000
2022-05-21 18:38:37 +03:00
parent 3709b4d93c
commit 95fcd7cc00
2 changed files with 8 additions and 21 deletions

View File

@@ -2,7 +2,7 @@ import { MdLocalFireDepartment } from 'react-icons/md'
import Button from 'src/Components/Button/Button'
import { useAppSelector, usePressHolder } from 'src/utils/hooks'
import { ComponentProps, useRef, useState } from 'react'
import styles from './styles.module.css'
import styles from './styles.module.scss'
import { random, randomItem, numberFormatter } from 'src/utils/helperFunctions'
import { useDebouncedCallback, useThrottledCallback } from '@react-hookz/web'
@@ -183,6 +183,7 @@ export default function VoteButton({
${fillType === 'radial' && styles.color_overlay__radial}
`}
>
<div></div>
</div>
<div className={`
relative z-10
@@ -201,15 +202,7 @@ export default function VoteButton({
>+{increment.value}</span>)}
<div className="relative z-50">
<MdLocalFireDepartment className={styles.spark}
style={{
opacity: 1,
scale: 1,
top: 0,
left: 0,
color: 'green'
}}
/>
{sparks.map(spark =>
<div
key={spark.id}

View File

@@ -71,7 +71,7 @@
transition: all 0.1s;
}
.color_overlay::before {
.color_overlay > div {
content: "";
background: var(--bg-color);
width: 100%;
@@ -79,30 +79,24 @@
position: absolute;
}
.color_overlay__background::before {
.color_overlay__background > div {
top: 0;
right: 0;
}
.color_overlay__leftRight::before {
.color_overlay__leftRight > div {
top: 0;
right: 100%;
transform: translateX(var(--offset));
}
.color_overlay__upDown::before {
.color_overlay__upDown > div {
top: 100%;
right: 0;
transform: translateY(calc(-1 * var(--offset)));
}
@property --offset {
syntax: "<number>"; /* <- defined as type number for the transition to work */
initial-value: 0%;
inherits: false;
}
.color_overlay__radial::before {
.color_overlay__radial > div {
top: 0;
right: 0;
background: radial-gradient(