144 lines
2.5 KiB
SCSS
144 lines
2.5 KiB
SCSS
@import '../init/breakpoints';
|
|
|
|
.filePrice {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
color: var(--color-purchased-text);
|
|
|
|
.credit-amount,
|
|
.icon--Key {
|
|
position: relative;
|
|
margin-left: var(--spacing-m);
|
|
white-space: nowrap;
|
|
color: var(--color-purchased-text);
|
|
}
|
|
|
|
&::before {
|
|
position: absolute;
|
|
content: '';
|
|
left: 0;
|
|
width: 250%;
|
|
height: 160%;
|
|
transform: skew(15deg);
|
|
border-radius: var(--border-radius);
|
|
background-color: var(--color-purchased-alt);
|
|
border: 2px solid var(--color-purchased);
|
|
}
|
|
}
|
|
|
|
.filePrice--filepage {
|
|
font-size: var(--font-body);
|
|
top: calc(var(--spacing-xxs) * -1);
|
|
margin-left: var(--spacing-m);
|
|
|
|
.credit-amount {
|
|
margin: 0 var(--spacing-m);
|
|
margin-bottom: -0.5rem;
|
|
}
|
|
|
|
&::before {
|
|
height: 250%;
|
|
left: calc(var(--spacing-m) * -1);
|
|
border-radius: 0;
|
|
border-bottom-left-radius: var(--border-radius);
|
|
border-width: 5px;
|
|
border-top-width: 0;
|
|
}
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
padding: var(--spacing-s);
|
|
|
|
&::before {
|
|
height: 140%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.filePrice--modal {
|
|
border: 5px solid var(--color-purchased);
|
|
border-radius: var(--border-radius);
|
|
font-size: var(--font-body);
|
|
height: 4rem;
|
|
background-color: var(--color-purchased-alt);
|
|
transform: skew(15deg);
|
|
|
|
.icon,
|
|
.credit-amount {
|
|
transform: skew(-15deg);
|
|
}
|
|
|
|
.credit-amount {
|
|
margin: 0 var(--spacing-m);
|
|
margin-left: var(--spacing-l);
|
|
font-weight: var(--font-bold);
|
|
font-size: var(--font-large);
|
|
}
|
|
|
|
&::before {
|
|
content: none;
|
|
}
|
|
}
|
|
|
|
.filePrice__key {
|
|
@extend .filePrice;
|
|
color: var(--color-gray-5);
|
|
|
|
.icon {
|
|
fill: white;
|
|
}
|
|
|
|
&::before {
|
|
background-color: var(--color-purchased);
|
|
height: 180%;
|
|
}
|
|
}
|
|
|
|
.filePrice__key--filepage {
|
|
@extend .filePrice--filepage;
|
|
top: 0;
|
|
|
|
&::before {
|
|
height: 300%;
|
|
}
|
|
|
|
.icon {
|
|
margin: 0 var(--spacing-m);
|
|
}
|
|
|
|
@media (max-width: $breakpoint-small) {
|
|
&::before {
|
|
top: calc(-1 * var(--spacing-s));
|
|
height: 110%;
|
|
}
|
|
|
|
.icon {
|
|
top: calc(-1 * var(--spacing-s));
|
|
margin: 0 var(--spacing-xs);
|
|
}
|
|
}
|
|
}
|
|
|
|
.filePrice__key--modal {
|
|
@extend .filePrice--modal;
|
|
top: var(--spacing-m);
|
|
|
|
.icon {
|
|
height: 100%;
|
|
width: auto;
|
|
left: calc(var(--spacing-xl) * 1.5);
|
|
animation: moveKey 2.5s 1 ease-out;
|
|
overflow: visible;
|
|
stroke: var(--color-black);
|
|
|
|
g {
|
|
animation: turnKey 2.5s 1 ease-out;
|
|
}
|
|
}
|
|
|
|
&::before {
|
|
content: '';
|
|
transform: skew(15deg);
|
|
animation: expand 2.5s 1 ease-out;
|
|
}
|
|
}
|