1
0
mirror of https://github.com/tobspr/shapez.io.git synced 2026-03-02 03:39:21 +00:00

Promote current discount

This commit is contained in:
tobspr
2022-04-20 11:17:56 +02:00
parent 6a0254b358
commit 7e198f2a72
9 changed files with 113 additions and 25 deletions

View File

@@ -23,7 +23,6 @@
flex-direction: column;
align-items: center;
justify-content: center;
overflow: hidden;
> button {
transition: opacity 0.12s ease-in-out;
@@ -40,7 +39,7 @@
@include IncreasedClickArea(0px);
@include S(margin-top, 15px);
@include InlineAnimation(5s ease-in-out) {
@include InlineAnimation(1s ease-in-out) {
0% {
opacity: 0.05;
}
@@ -60,7 +59,26 @@
@include S(height, 40px);
background: #171a23 center center / contain no-repeat;
overflow: visible;
@include S(border-radius, $globalBorderRadius);
> .discount {
position: absolute;
@include S(top, -7px);
@include S(right, -5px);
background: #4c6b22;
color: #c5ea3f;
@include S(border-radius, $globalBorderRadius);
@include S(padding, 1px, 3px, 1px, 4px);
@include SuperSmallText;
text-transform: uppercase;
transform: rotate(1deg);
@include InlineAnimation(1.3s ease-in-out infinite) {
50% {
transform: rotate(4deg) scale(1.1);
}
}
}
}
}

View File

@@ -82,4 +82,26 @@
background-image: uiResource("res/ui/icons/demo_steam_link_indicator.png");
}
}
&.withDiscount {
color: #4c6b22;
}
> .discount {
// position: absolute;
@include S(margin, 0, 5px);
background: rgba(#4c6b22, 1);
color: #c5ea3f;
@include S(border-radius, $globalBorderRadius);
@include S(padding, 0px, 2px, 0px, 3px);
@include SuperSmallText;
text-transform: uppercase;
transform: rotate(0deg);
@include InlineAnimation(1.3s ease-in-out infinite) {
50% {
transform: rotate(0.5deg) scale(1.05);
}
}
}
}

View File

@@ -83,12 +83,6 @@ $languages: en, de, cs, da, et, es-419, fr, it, pt-BR, sv, tr, el, ru, uk, zh-TW
/*
PRICE
*/
.steam_1_pr {
/* @load-async */
background-image: uiResource("get_on_steam_with_price.png") !important;
}
.steam_2_npr {
/* @load-async */
background-image: uiResource("get_on_steam.png") !important;

View File

@@ -140,20 +140,37 @@
@include S(height, 40px);
@include S(width, 180px);
background: #171a23 center center / contain no-repeat;
overflow: hidden;
// overflow: hidden;
display: block;
text-indent: -999em;
cursor: pointer;
@include S(margin-top, 30px);
pointer-events: all;
transition: all 0.12s ease-in;
transition-property: opacity, transform;
position: relative;
@include S(border-radius, $globalBorderRadius);
&:hover {
opacity: 0.9;
}
> .discount {
position: absolute;
@include S(top, -7px);
@include S(right, -5px);
background: #4c6b22;
color: #c5ea3f;
@include S(border-radius, $globalBorderRadius);
@include S(padding, 1px, 3px, 1px, 4px);
@include SuperSmallText;
text-transform: uppercase;
transform: rotate(1deg);
@include InlineAnimation(1.3s ease-in-out infinite) {
50% {
transform: rotate(4deg) scale(1.1);
}
}
}
}
}
}