Hier findest du ein paar Anwendungsbeispiele für Custom-CSS

Textgrößen erhöhen

Mit dem folgenden Snippet kannst du die Schriftgrößen aller Textelemente in der Journey mithilfe von CSS-Variablen (Design Tokens) vergrößern:

:root {
  --concorde-text-3xl: 2.5rem;
}

:root {
  --concorde-text-2xl: 2rem;
}

:root {
  --concorde-text-xl: 1.875rem;
}

:root {
  --concorde-text-lg: 1.5rem;
}

:root {
  --concorde-text-base: 1.25rem;
}

:root {
  --concorde-text-sm: 1rem;
}

:root {
  --concorde-text-xs: 0.875rem;
}

In dem Beispiel nutzen wir: 

:root {
  --concorde-text-xl: 2.5rem;
}

und

:root {
  --concorde-text-xs: 0.875rem;
}

Ausrichtung des Logos im Header ändern

Dieses Snippet ändert die horizontale Ausrichtung des Logos im Header der Journey:

:root {
  --concorde-topbar-logo-alignment: flex-start; /* Links ausrichten */
  }

:root {
  --concorde-topbar-logo-alignment: center;     /* Zentriert (Standard) */
}

:root {
  --concorde-topbar-logo-alignment: flex-end;   /* Rechts ausrichten */
}

Header fixieren (Sticky Header)

Das folgende Beispiel sorgt dafür, dass der Header beim Scrollen am oberen Bildschirmrand „kleben“ bleibt:

.Concorde-Topbar {
  position: sticky;
  top: 0;
  z-index: 99999;
}

Alle Buttons anpassen

Dieses Snippet verändert das Aussehen aller Buttons (inkl. IconButtons) mithilfe von Design Tokens:

:root {
  --concorde-button-label-color: var(--concorde-secondary-text);
  --concorde-button-background-color: #fffff;
  --concorde-button-hover-bg-color: #258FF9FF;
}

Nur Primary Buttons anpassen

Mit diesem Snippet werden nur die Primary Buttons (z. B. „Weiter“ oder „Absenden“) über die offizielle CSS-Klasse angepasst:

.Concorde-Button__Primary {
  color: var(--concorde-secondary-text);
  background-color: #258FF9FF;

  &:hover {
    color: #ffffff;
  }
}

Hintergrund des DatePickers ändern

Dieses Beispiel zeigt zwei Varianten, um den Hintergrund des Kalenders im DatePicker zu ändern:

/* Variante 1 – über Design Token */ 

:root {
  --concorde-datepicker-calendar-bg-color: #fffff;
}

/* Variante 2 – direkt über die CSS-Klasse */ 

.Concorde-DatePicker {
  .Concorde-DatePicker__Calendar {
    background-color: gray;
  }
}

Hintergrund des PLZ-Dropdowns im Verfügbarkeitsblock ändern

Dieses Snippet passt nur die Hintergrundfarben der PLZ-Auswahl im Block „Verfügbarkeit prüfen“ an:

.Concorde-AvailabilityCheck-Block {
  --concorde-menu-bg-color: white;
  --concorde-menu-item-hover-bg-color: white;
  --concorde-menu-item-selected-bg-color: lightskyblue;
}

Textfarbe der Produkt-Features anpassen

Dieses Snippet setzt die Schriftfarbe aller Produkt-Merkmale (z. B. Stichpunkte) auf den Wert des Design Tokens --concorde-secondary-text:

.Concorde-ProductTile__Features p {
  color: var(--concorde-secondary-text);
}