topaLE
/
ghostfolio
mirror of https://github.com/ghostfolio/ghostfolio
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
Browse Source

refactoring

pull/5966/head
David Requeno 2 months ago
parent
dee2476d7e
commit
716f2e9b29
1 changed files with 70 additions and 128 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 198
      libs/ui/src/lib/membership-card/membership-card.component.scss

198
libs/ui/src/lib/membership-card/membership-card.component.scss
View File

@ -1,8 +1,7 @@
:host { :host {
--borderRadius: 1rem; --borderRadius: 1rem;
--borderWidth: 2px; --borderWidth: 2px;
--hover3dGradientOpacity: 0.15; --hover3dSpotlightOpacity: 0.1;
--hover3dGradientOpacityHover: 0.2;
display: block; display: block;
max-width: 25rem; max-width: 25rem;
@ -78,28 +77,45 @@
} }
&.hover-3d { &.hover-3d {
--hover3d-rotate-x: 0;
--hover3d-rotate-y: 0;
--hover3d-shine: 100% 100%;
.card-container { .card-container {
overflow: hidden;
position: relative; position: relative;
scale: 1;
transform: rotate3d(
var(--hover3d-rotate-x),
var(--hover3d-rotate-y),
0,
10deg
);
transform-style: preserve-3d; transform-style: preserve-3d;
transition: transition:
box-shadow 300ms ease, box-shadow 400ms ease-out,
transform 300ms ease; scale 500ms ease-out,
will-change: transform; transform 500ms ease-out;
will-change: transform, scale;
&::before { &::before {
background: radial-gradient( background-image: radial-gradient(
circle at 50% 0%, circle at 50%,
rgba(255, 255, 255, var(--hover3dGradientOpacity)), rgba(255, 255, 255, var(--hover3dSpotlightOpacity)) 10%,
transparent 60% transparent 50%
); );
border-radius: var(--borderRadius);
content: ''; content: '';
inset: 0; filter: blur(0.75rem);
mix-blend-mode: screen; height: 33.333%;
opacity: 0; opacity: 0;
pointer-events: none; pointer-events: none;
position: absolute; position: absolute;
transition: opacity 300ms ease; scale: 500%;
translate: var(--hover3d-shine);
transition:
opacity 400ms ease-out,
translate 400ms ease-out;
width: 33.333%;
z-index: 1; z-index: 1;
} }
@ -160,139 +176,67 @@
} }
} }
&:has(.hover-zone:nth-child(1):hover) .card-container { &:has(.hover-zone:hover) .card-container {
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.3); box-shadow: 0 18px 40px rgba(15, 23, 42, 0.3);
transform: perspective(1000px) rotateX(5deg) rotateY(-5deg) scale: 1.05;
translateY(-2px);
&::before { &::before {
background: radial-gradient(
circle at 0% 0%,
rgba(255, 255, 255, var(--hover3dGradientOpacityHover)),
transparent 60%
);
opacity: 1; opacity: 1;
} }
} }
&:has(.hover-zone:nth-child(2):hover) .card-container { &:has(.hover-zone:nth-child(1):hover) {
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.3); --hover3d-rotate-x: 1;
transform: perspective(1000px) rotateX(5deg) rotateY(0deg) --hover3d-rotate-y: -1;
translateY(-2px); --hover3d-shine: 0% 0%;
&::before {
background: radial-gradient(
circle at 50% 0%,
rgba(255, 255, 255, var(--hover3dGradientOpacityHover)),
transparent 60%
);
opacity: 1;
}
} }
&:has(.hover-zone:nth-child(3):hover) .card-container { &:has(.hover-zone:nth-child(2):hover) {
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.3); --hover3d-rotate-x: 1;
transform: perspective(1000px) rotateX(5deg) rotateY(5deg) --hover3d-rotate-y: 0;
translateY(-2px); --hover3d-shine: 100% 0%;
&::before {
background: radial-gradient(
circle at 100% 0%,
rgba(255, 255, 255, var(--hover3dGradientOpacityHover)),
transparent 60%
);
opacity: 1;
} }
}
&:has(.hover-zone:nth-child(4):hover) .card-container {
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.3);
transform: perspective(1000px) rotateX(0deg) rotateY(-5deg)
translateY(-2px);
&::before { &:has(.hover-zone:nth-child(3):hover) {
background: radial-gradient( --hover3d-rotate-x: 1;
circle at 0% 50%, --hover3d-rotate-y: 1;
rgba(255, 255, 255, var(--hover3dGradientOpacityHover)), --hover3d-shine: 200% 0%;
transparent 60%
);
opacity: 1;
}
} }
&:has(.hover-zone:nth-child(5):hover) .card-container { &:has(.hover-zone:nth-child(4):hover) {
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.3); --hover3d-rotate-x: 0;
transform: perspective(1000px) rotateX(0deg) rotateY(0deg) --hover3d-rotate-y: -1;
translateY(-4px); --hover3d-shine: 0% 100%;
&::before {
background: radial-gradient(
circle at 50% 50%,
rgba(255, 255, 255, var(--hover3dGradientOpacityHover)),
transparent 60%
);
opacity: 1;
}
} }
&:has(.hover-zone:nth-child(6):hover) .card-container { &:has(.hover-zone:nth-child(5):hover) {
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.3); --hover3d-rotate-x: 0;
transform: perspective(1000px) rotateX(0deg) rotateY(5deg) --hover3d-rotate-y: 0;
translateY(-2px); --hover3d-shine: 100% 100%;
&::before {
background: radial-gradient(
circle at 100% 50%,
rgba(255, 255, 255, var(--hover3dGradientOpacityHover)),
transparent 60%
);
opacity: 1;
}
} }
&:has(.hover-zone:nth-child(7):hover) .card-container { &:has(.hover-zone:nth-child(6):hover) {
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.3); --hover3d-rotate-x: 0;
transform: perspective(1000px) rotateX(-5deg) rotateY(-5deg) --hover3d-rotate-y: 1;
translateY(-2px); --hover3d-shine: 200% 100%;
&::before {
background: radial-gradient(
circle at 0% 100%,
rgba(255, 255, 255, var(--hover3dGradientOpacityHover)),
transparent 60%
);
opacity: 1;
}
} }
&:has(.hover-zone:nth-child(8):hover) .card-container { &:has(.hover-zone:nth-child(7):hover) {
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.3); --hover3d-rotate-x: -1;
transform: perspective(1000px) rotateX(-5deg) rotateY(0deg) --hover3d-rotate-y: -1;
translateY(-2px); --hover3d-shine: 0% 200%;
&::before {
background: radial-gradient(
circle at 50% 100%,
rgba(255, 255, 255, var(--hover3dGradientOpacityHover)),
transparent 60%
);
opacity: 1;
} }
}
&:has(.hover-zone:nth-child(9):hover) .card-container {
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.3);
transform: perspective(1000px) rotateX(-5deg) rotateY(5deg)
translateY(-2px);
&::before { &:has(.hover-zone:nth-child(8):hover) {
background: radial-gradient( --hover3d-rotate-x: -1;
circle at 100% 100%, --hover3d-rotate-y: 0;
rgba(255, 255, 255, var(--hover3dGradientOpacityHover)), --hover3d-shine: 100% 200%;
transparent 60%
);
opacity: 1;
} }
&:has(.hover-zone:nth-child(9):hover) {
--hover3d-rotate-x: -1;
--hover3d-rotate-y: 1;
--hover3d-shine: 200% 200%;
} }
} }
} }
@ -300,17 +244,15 @@
@media (prefers-reduced-motion: reduce) { @media (prefers-reduced-motion: reduce) {
.card-wrapper.hover-3d { .card-wrapper.hover-3d {
.card-container { .card-container {
scale: 1 !important;
transform: none !important; transform: none !important;
transition: none !important; transition: none !important;
&::before { &::before {
opacity: 0 !important;
transition: none !important; transition: none !important;
} }
} }
&:has(.hover-zone:hover) .card-container {
transform: none !important;
}
} }
} }
} }

Write Preview
Loading…
Cancel
Save