`TranscendenceStar` is a new star capable of displaying `TranscendenceFragment`s depending on the `GridCharacter` stage
79 lines
1.5 KiB
SCSS
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');
|
|
}
|
|
}
|
|
}
|
|
}
|