valtech-components 2.0.687 → 2.0.689

package/src/lib/components/molecules/raffle-status-card/raffle-status-card.component.scss

@@ -0,0 +1,418 @@
+:host {
+  display: block;
+}
+
+.raffle-card {
+  display: flex;
+  flex-direction: column;
+  background: var(--ion-color-light);
+  border-radius: 12px;
+  overflow: hidden;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  transition: transform 0.2s, box-shadow 0.2s;
+
+  &:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
+  }
+}
+
+// === Image section ===
+
+.card-image {
+  position: relative;
+  aspect-ratio: 16 / 9;
+  overflow: hidden;
+
+  val-image {
+    width: 100%;
+    height: 100%;
+
+    ::ng-deep img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+}
+
+.status-badge {
+  position: absolute;
+  top: 12px;
+  left: 12px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  padding: 4px 10px;
+  border-radius: 4px;
+
+  &.inline {
+    position: static;
+    margin-bottom: 8px;
+  }
+}
+
+.countdown-overlay {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 8px 12px;
+  background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
+}
+
+// === Content section ===
+
+.card-content {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 16px;
+}
+
+.card-header {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.card-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--ion-color-dark);
+  margin: 0;
+  line-height: 1.3;
+}
+
+.card-description {
+  font-size: 14px;
+  color: var(--ion-color-medium-shade);
+  margin: 0;
+  line-height: 1.4;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+// === Beneficiary ===
+
+.beneficiary-info {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  color: var(--ion-color-medium-shade);
+
+  ion-icon {
+    font-size: 16px;
+    color: var(--ion-color-danger);
+  }
+
+  .beneficiary-image {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    overflow: hidden;
+  }
+}
+
+// === Prize preview ===
+
+.prize-preview {
+  padding: 12px;
+  background: var(--ion-color-light-shade);
+  border-radius: 8px;
+}
+
+.prize-header {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--ion-color-medium);
+  margin-bottom: 4px;
+
+  ion-icon {
+    font-size: 14px;
+    color: var(--ion-color-warning);
+  }
+}
+
+.prize-name {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--ion-color-dark);
+}
+
+.prize-value {
+  font-size: 18px;
+  font-weight: 700;
+  color: var(--ion-color-success);
+  margin-top: 4px;
+}
+
+// === Progress ===
+
+.progress-section {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.progress-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.progress-label {
+  font-size: 12px;
+  color: var(--ion-color-medium-shade);
+}
+
+.progress-value {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--ion-color-dark);
+}
+
+ion-progress-bar {
+  height: 8px;
+  border-radius: 4px;
+  --background: var(--ion-color-light-shade);
+}
+
+// === Ticket stats ===
+
+.ticket-stats {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+  padding: 12px;
+  background: var(--ion-color-light-shade);
+  border-radius: 8px;
+}
+
+.stat {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 13px;
+
+  ion-icon {
+    font-size: 18px;
+    color: var(--ion-color-primary);
+  }
+}
+
+.stat-value {
+  font-weight: 700;
+  color: var(--ion-color-dark);
+  font-size: 16px;
+}
+
+.stat-label {
+  color: var(--ion-color-medium-shade);
+}
+
+.stat-divider {
+  width: 1px;
+  height: 24px;
+  background: var(--ion-color-medium-tint);
+}
+
+// === Price section ===
+
+.price-section {
+  display: flex;
+  justify-content: center;
+  padding: 8px 0;
+}
+
+// === Dates ===
+
+.dates-section {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  font-size: 13px;
+  color: var(--ion-color-medium-shade);
+}
+
+.date-item {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+
+  ion-icon {
+    font-size: 16px;
+    color: var(--ion-color-primary);
+  }
+}
+
+// === Actions ===
+
+.card-actions {
+  display: flex;
+  gap: 8px;
+  margin-top: 4px;
+
+  val-button {
+    flex: 1;
+  }
+}
+
+// === Variants ===
+
+.variant-featured {
+  border: 2px solid var(--ion-color-warning);
+
+  .card-image {
+    aspect-ratio: 2 / 1;
+  }
+
+  .card-title {
+    font-size: 22px;
+  }
+}
+
+.variant-compact {
+  .card-content {
+    padding: 12px;
+    gap: 8px;
+  }
+
+  .card-title {
+    font-size: 15px;
+  }
+
+  .card-description {
+    font-size: 13px;
+    -webkit-line-clamp: 1;
+  }
+
+  .ticket-stats,
+  .dates-section {
+    display: none;
+  }
+}
+
+.variant-horizontal {
+  flex-direction: row;
+
+  .card-image {
+    width: 40%;
+    min-width: 150px;
+    aspect-ratio: 1;
+  }
+
+  .card-content {
+    flex: 1;
+    justify-content: center;
+  }
+}
+
+// === Size variants ===
+
+.size-small {
+  .card-content {
+    padding: 12px;
+    gap: 8px;
+  }
+
+  .card-title {
+    font-size: 15px;
+  }
+
+  .card-description {
+    font-size: 12px;
+  }
+
+  .ticket-stats {
+    padding: 8px;
+  }
+
+  .stat-value {
+    font-size: 14px;
+  }
+}
+
+.size-large {
+  .card-content {
+    padding: 24px;
+    gap: 16px;
+  }
+
+  .card-title {
+    font-size: 24px;
+  }
+
+  .card-description {
+    font-size: 16px;
+  }
+
+  .prize-name {
+    font-size: 18px;
+  }
+
+  .prize-value {
+    font-size: 22px;
+  }
+}
+
+// === Status styles ===
+
+.status-upcoming {
+  opacity: 0.9;
+}
+
+.status-sold_out {
+  .card-image::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.3);
+  }
+}
+
+.status-completed {
+  .card-actions {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+}
+
+.status-cancelled {
+  opacity: 0.6;
+
+  .card-image::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.4);
+  }
+}
+
+// === Responsive ===
+
+@media (max-width: 480px) {
+  .variant-horizontal {
+    flex-direction: column;
+
+    .card-image {
+      width: 100%;
+      aspect-ratio: 16 / 9;
+    }
+  }
+}