hensei-web/components/TranscendenceStar/index.scss
Justin Edmund 9c757c2c5b Add TranscendenceStar and TranscendenceFragment
`TranscendenceStar` is a new star capable of displaying `TranscendenceFragment`s depending on the `GridCharacter` stage
2023-01-22 14:40:21 -08:00

79 lines
1.5 KiB
SCSS

.TranscendenceStar {
position: relative;
&.Immutable {
pointer-events: none;
}
.Figure {
$size: 18px;
background-repeat: no-repeat;
background-size: 54px 54px;
display: block;
height: $size;
width: $size;
&.Interactive.Base {
$size: $unit-6x;
@include hidpiImage(
'/icons/transcendence/interactive/interactive-base',
png,
$size,
$size
);
height: $size;
width: $size;
&:hover {
cursor: pointer;
transform: none;
}
}
&:hover {
transform: scale(1.2);
}
&.Stage1 {
background-image: url('/icons/transcendence/1/step-1@3x.png');
&:hover {
background-image: url('/icons/transcendence/1/step-1-hover@3x.png');
}
}
&.Stage2 {
background-image: url('/icons/transcendence/2/step-2@3x.png');
&:hover {
background-image: url('/icons/transcendence/2/step-2-hover@3x.png');
}
}
&.Stage3 {
background-image: url('/icons/transcendence/3/step-3@3x.png');
&:hover {
background-image: url('/icons/transcendence/3/step-3-hover@3x.png');
}
}
&.Stage4 {
background-image: url('/icons/transcendence/4/step-4@3x.png');
&:hover {
background-image: url('/icons/transcendence/4/step-4-hover@3x.png');
}
}
&.Stage5 {
background-image: url('/icons/transcendence/5/step-5@3x.png');
&:hover {
background-image: url('/icons/transcendence/5/step-5-hover@3x.png');
}
}
}
}