Fix star styles
This commit is contained in:
parent
ab98089f81
commit
8f124c0f9a
6 changed files with 41 additions and 41 deletions
|
|
@ -1,4 +1,4 @@
|
||||||
.TranscendenceStar {
|
.star {
|
||||||
$size: 18px;
|
$size: 18px;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
|
|
@ -6,35 +6,35 @@
|
||||||
transform: scale(1.2);
|
transform: scale(1.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.Immutable {
|
&.immutable {
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.Empty {
|
&.empty {
|
||||||
@include hidpiImage('/icons/transcendence/0/stage-0', png, $size, $size);
|
@include hidpiImage('/icons/transcendence/0/stage-0', png, $size, $size);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.Stage1 {
|
&.stage1 {
|
||||||
@include hidpiImage('/icons/transcendence/1/stage-1', png, $size, $size);
|
@include hidpiImage('/icons/transcendence/1/stage-1', png, $size, $size);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.Stage2 {
|
&.stage2 {
|
||||||
@include hidpiImage('/icons/transcendence/2/stage-2', png, $size, $size);
|
@include hidpiImage('/icons/transcendence/2/stage-2', png, $size, $size);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.Stage3 {
|
&.stage3 {
|
||||||
@include hidpiImage('/icons/transcendence/3/stage-3', png, $size, $size);
|
@include hidpiImage('/icons/transcendence/3/stage-3', png, $size, $size);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.Stage4 {
|
&.stage4 {
|
||||||
@include hidpiImage('/icons/transcendence/4/stage-4', png, $size, $size);
|
@include hidpiImage('/icons/transcendence/4/stage-4', png, $size, $size);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.Stage5 {
|
&.stage5 {
|
||||||
@include hidpiImage('/icons/transcendence/5/stage-5', png, $size, $size);
|
@include hidpiImage('/icons/transcendence/5/stage-5', png, $size, $size);
|
||||||
}
|
}
|
||||||
|
|
||||||
.Figure {
|
.figure {
|
||||||
$size: 18px;
|
$size: 18px;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: 54px 54px;
|
background-size: 54px 54px;
|
||||||
|
|
@ -42,7 +42,7 @@
|
||||||
height: $size;
|
height: $size;
|
||||||
width: $size;
|
width: $size;
|
||||||
|
|
||||||
&.Interactive.Base {
|
&.interactive.base {
|
||||||
$size: $unit-6x;
|
$size: $unit-6x;
|
||||||
|
|
||||||
@include hidpiImage(
|
@include hidpiImage(
|
||||||
|
|
|
||||||
|
|
@ -36,18 +36,18 @@ const TranscendenceStar = ({
|
||||||
|
|
||||||
// Classes
|
// Classes
|
||||||
const starClasses = classnames({
|
const starClasses = classnames({
|
||||||
TranscendenceStar: true,
|
[styles.star]: true,
|
||||||
Immutable: immutable,
|
[styles.immutable]: immutable,
|
||||||
Empty: stage === 0,
|
[styles.empty]: stage === 0,
|
||||||
Stage1: stage === 1,
|
[styles.stage1]: stage === 1,
|
||||||
Stage2: stage === 2,
|
[styles.stage2]: stage === 2,
|
||||||
Stage3: stage === 3,
|
[styles.stage3]: stage === 3,
|
||||||
Stage4: stage === 4,
|
[styles.stage4]: stage === 4,
|
||||||
Stage5: stage === 5,
|
[styles.stage5]: stage === 5,
|
||||||
})
|
})
|
||||||
|
|
||||||
const baseImageClasses = classnames(className, {
|
const baseImageClasses = classnames(className, {
|
||||||
Figure: true,
|
[styles.figure]: true,
|
||||||
})
|
})
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,7 @@
|
||||||
.UncapWrapper {
|
.wrapper {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
|
||||||
|
|
||||||
.UncapIndicator {
|
.indicator {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-content: center;
|
align-content: center;
|
||||||
|
|
@ -15,4 +14,5 @@
|
||||||
&:hover {
|
&:hover {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -150,8 +150,8 @@ const UncapIndicator = (props: Props) => {
|
||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="UncapWrapper">
|
<div className={styles.wrapper}>
|
||||||
<ul className="UncapIndicator">
|
<ul className={styles.indicator}>
|
||||||
{Array.from(Array(numStars)).map((x, i) => {
|
{Array.from(Array(numStars)).map((x, i) => {
|
||||||
if (props.type === 'character' && i > 4) {
|
if (props.type === 'character' && i > 4) {
|
||||||
if (props.special) return ulb(i)
|
if (props.special) return ulb(i)
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
.UncapStar {
|
.star {
|
||||||
$size: 18px;
|
$size: 18px;
|
||||||
background-repeat: no-repeat;
|
background-repeat: no-repeat;
|
||||||
background-size: $size;
|
background-size: $size;
|
||||||
|
|
|
||||||
|
|
@ -18,12 +18,12 @@ interface Props
|
||||||
|
|
||||||
const UncapStar = (props: Props) => {
|
const UncapStar = (props: Props) => {
|
||||||
const classes = classnames({
|
const classes = classnames({
|
||||||
UncapStar: true,
|
[styles.star]: true,
|
||||||
empty: props.empty,
|
[styles.empty]: props.empty,
|
||||||
special: props.special,
|
[styles.special]: props.special,
|
||||||
mlb: !props.special,
|
[styles.mlb]: !props.special,
|
||||||
flb: props.flb,
|
[styles.flb]: props.flb,
|
||||||
ulb: props.ulb,
|
[styles.ulb]: props.ulb,
|
||||||
})
|
})
|
||||||
|
|
||||||
function clicked() {
|
function clicked() {
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue