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

Refactoring

pull/5671/head
Thomas Kaul 3 weeks ago
parent
975ca4cd4d
commit
4d20834b36
2 changed files with 136 additions and 137 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. 2
      libs/ui/src/lib/logo-carousel/logo-carousel.component.html
  2. 271
      libs/ui/src/lib/logo-carousel/logo-carousel.component.scss

2
libs/ui/src/lib/logo-carousel/logo-carousel.component.html
View File

@ -1,5 +1,5 @@
<div class="logo-carousel-container overflow-hidden position-relative w-100"> <div class="logo-carousel-container overflow-hidden position-relative w-100">
<div class="d-flex logo-carousel-track"> <div class="align-items-center d-flex logo-carousel-track">
@for (logo of logosRepeated; track $index) { @for (logo of logosRepeated; track $index) {
<div class="logo-carousel-item"> <div class="logo-carousel-item">
<a <a

271
libs/ui/src/lib/logo-carousel/logo-carousel.component.scss
View File

@ -47,123 +47,131 @@
width: 30px; width: 30px;
} }
} }
}
.logo-carousel-track {
align-items: center;
animation: scroll 60s linear infinite;
width: fit-content;
&:hover {
animation-play-state: paused;
}
}
.logo-carousel-item {
flex-shrink: 0;
min-width: 200px;
padding: 0 2rem;
@media (max-width: 768px) {
min-width: 150px;
padding: 0.75rem 1.5rem;
}
@media (max-width: 576px) {
min-width: 120px;
padding: 0.5rem 1rem;
}
}
.logo {
height: 3rem;
transition:
opacity 0.3s ease,
transform 0.3s ease;
width: 7.5rem;
&:hover {
opacity: 0.8;
}
&.mask {
background-color: rgba(var(--dark-secondary-text));
mask-position: center;
mask-repeat: no-repeat;
mask-size: contain;
}
&.logo-alternative-to {
mask-image: url('/assets/images/logo-alternative-to.svg');
}
&.logo-awesome {
background-image: url('/assets/images/logo-awesome.png');
background-position: center;
background-repeat: no-repeat;
background-size: contain;
filter: grayscale(1);
}
&.logo-dev-community {
mask-image: url('/assets/images/logo-dev-community.svg');
}
&.logo-hacker-news {
mask-image: url('/assets/images/logo-hacker-news.svg');
}
&.logo-openalternative {
mask-image: url('/assets/images/logo-openalternative.svg');
}
&.logo-privacy-tools {
mask-image: url('/assets/images/logo-privacy-tools.svg');
}
&.logo-product-hunt {
background-image: url('/assets/images/logo-product-hunt.png');
background-position: center;
background-repeat: no-repeat;
background-size: contain;
filter: grayscale(1);
}
&.logo-reddit {
mask-image: url('/assets/images/logo-reddit.svg');
max-height: 1rem;
}
&.logo-sackgeld { .logo-carousel-track {
mask-image: url('/assets/images/logo-sackgeld.png'); animation: scroll 60s linear infinite;
} width: fit-content;
&.logo-selfh-st {
mask-image: url('/assets/images/logo-selfh-st.svg');
max-height: 1.25rem;
}
&.logo-sourceforge {
mask-image: url('/assets/images/logo-sourceforge.svg');
}
&.logo-umbrel {
mask-image: url('/assets/images/logo-umbrel.svg');
max-height: 1.5rem;
}
&.logo-unraid { &:hover {
mask-image: url('/assets/images/logo-unraid.svg'); animation-play-state: paused;
} }
@media (max-width: 768px) { .logo-carousel-item {
height: 2.5rem; flex-shrink: 0;
width: 6rem; min-width: 200px;
} padding: 0 2rem;
@media (max-width: 768px) {
min-width: 150px;
padding: 0.75rem 1.5rem;
}
@media (max-width: 576px) {
min-width: 120px;
padding: 0.5rem 1rem;
}
.logo {
height: 3rem;
transition:
opacity 0.3s ease,
transform 0.3s ease;
width: 7.5rem;
&:hover {
opacity: 0.8;
}
&.mask {
background-color: rgba(var(--dark-secondary-text));
mask-position: center;
mask-repeat: no-repeat;
mask-size: contain;
}
&.logo-alternative-to {
mask-image: url('/assets/images/logo-alternative-to.svg');
}
&.logo-awesome {
background-image: url('/assets/images/logo-awesome.png');
background-position: center;
background-repeat: no-repeat;
background-size: contain;
filter: grayscale(1);
}
&.logo-dev-community {
mask-image: url('/assets/images/logo-dev-community.svg');
}
&.logo-hacker-news {
mask-image: url('/assets/images/logo-hacker-news.svg');
}
&.logo-openalternative {
mask-image: url('/assets/images/logo-openalternative.svg');
}
&.logo-privacy-tools {
mask-image: url('/assets/images/logo-privacy-tools.svg');
}
&.logo-product-hunt {
background-image: url('/assets/images/logo-product-hunt.png');
background-position: center;
background-repeat: no-repeat;
background-size: contain;
filter: grayscale(1);
}
&.logo-reddit {
mask-image: url('/assets/images/logo-reddit.svg');
max-height: 1rem;
}
&.logo-sackgeld {
mask-image: url('/assets/images/logo-sackgeld.png');
}
&.logo-selfh-st {
mask-image: url('/assets/images/logo-selfh-st.svg');
max-height: 1.25rem;
}
&.logo-sourceforge {
mask-image: url('/assets/images/logo-sourceforge.svg');
}
&.logo-umbrel {
mask-image: url('/assets/images/logo-umbrel.svg');
max-height: 1.5rem;
}
&.logo-unraid {
mask-image: url('/assets/images/logo-unraid.svg');
}
@media (max-width: 768px) {
height: 2.5rem;
width: 6rem;
}
@media (max-width: 576px) {
height: 2rem;
width: 5rem;
}
}
}
@media (max-width: 576px) { @keyframes scroll {
height: 2rem; 0% {
width: 5rem; transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
} }
} }
} }
@ -185,30 +193,21 @@
rgba(var(--palette-background-background-dark), 0) 100% rgba(var(--palette-background-background-dark), 0) 100%
); );
} }
}
.logo { .logo {
&.logo-alternative-to, &.logo-alternative-to,
&.logo-dev-community, &.logo-dev-community,
&.logo-hacker-news, &.logo-hacker-news,
&.logo-openalternative, &.logo-openalternative,
&.logo-privacy-tools, &.logo-privacy-tools,
&.logo-reddit, &.logo-reddit,
&.logo-sackgeld, &.logo-sackgeld,
&.logo-selfh-st, &.logo-selfh-st,
&.logo-sourceforge, &.logo-sourceforge,
&.logo-umbrel, &.logo-umbrel,
&.logo-unraid { &.logo-unraid {
background-color: rgba(var(--light-primary-text)); background-color: rgba(var(--light-primary-text));
}
} }
} }
} }
@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}

Write Preview
Loading…
Cancel
Save