Improving styling of Die.

logins
Thomas Hintz 5 years ago
parent 092e16e042
commit d2349ff575

@ -719,8 +719,10 @@ class Die extends React.Component {
} }
return ( return (
<Fragment> <Fragment>
<div className={'die' + (this.state.finalFace ? ' die-selected' : '')}> <div className='die-container'>
{face} <div className={'die' + (this.state.finalFace ? ' die-selected' : '')}>
{face}
</div>
</div> </div>
{this.props.skip && !this.state.finalFace ? {this.props.skip && !this.state.finalFace ?
(<div className='center'> (<div className='center'>

@ -437,6 +437,7 @@ $tab-margin: 0.3rem;
background: #dae0ff; } background: #dae0ff; }
.die { .die {
margin-bottom: 1rem;
width: 100px; width: 100px;
height: 100px; height: 100px;
background: lightyellow; background: lightyellow;
@ -445,7 +446,32 @@ $tab-margin: 0.3rem;
border: 1px solid black; } border: 1px solid black; }
.die-selected { .die-selected {
border: 1px solid red; } position: relative;
box-shadow: 0 1px 2px rgba(0,0,0,0.15);
transition: all 0.3s ease-in-out; }
.die-selected::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
opacity: 0;
border-radius: 5px;
box-shadow: 0 6px 15px $primary-color;
animation: die-pulse 2s ease-in-out infinite; }
@keyframes die-pulse {
0% {
opacity: 0; }
50% {
opacity: 1; }
100% {
opacity: 0; }
}
.die-container {
display: flex;
justify-content: center; }
.die-face { .die-face {
background: black; background: black;

Loading…
Cancel
Save