Anwendungsbeispiele Custom-CSS
Hier findest du ein paar Anwendungsbeispiele für Custom-CSS
Header mit Farbverlauf erstellen
.Concorde-Topbar {
background: linear-gradient(0.70turn, #dcf7ff 5%, #ccdaff 40%, #dadbff 55%);
Höhe der Header anpassen
img {
margin-bottom: 20px;
max-height: 30px;
margin-top: 20px;
padding-right: 20px;
margin-right: max( calc((100% - 1256px - (2*16px)) / 2), 0px);
@media (max-width:936px) {
margin-right: max( calc((100% - 936px - (2*16px)) / 2); 0px);
}
}
Farbverlauf zur Aktion-Buttons hinzufügen (Hover, Aktiv, Fokus)
.Concorde-ActionBar-Block {
.Concorde-Button__Primary {
color: #FFFFF;
background: linear-gradient(0deg, #4f4ffc, #4f4ffc, #4f4ffc);
&:focus {
background-size: 100% 100%;
background-position: center;
color: #4f4ffc;
background: linear-gradient(0.70turn, #dcf7ff 5%, #ccdaff 40%, #dadbff 55%);
}
&:hover {
color: #4f4ffc;
background: linear-gradient(0.70turn, #dcf7ff 5%, #ccdaff 40%, #dadbff 55%);
background-size: 200% 200%;
background-position: bottom;
transition: background-size 0.4s ease-in-out, background-position 0.4s ease-in-out, color 0.4s ease-in-out;
}
&:active {
background-size: 100% 100%;
background-position: center;
color: #4f4ffc;
background: linear-gradient(0.70turn, #dcf7ff 5%, #ccdaff 40%, #dadbff 55%);
}
}
}
Farbverläufe zu Überschriften hinzufügen
h1.Concorde-Typography,
h2.Concorde-Typography {
background: linear-gradient(90deg, #4f4ffc, #00D7FF);
-webkit-background-clip: text;
color: transparent;
}
Ausrichtung des Logos im Header ändern
Dieses Snippet ändert die horizontale Ausrichtung des Logos im Header der Journey:
Links ausrichten
:root {
--concorde-topbar-logo-alignment: flex-start; /* Links ausrichten */
}
Zentriert (Standard)
:root {
--concorde-topbar-logo-alignment: center; /* Zentriert (Standard) */
}
Rechts ausrichten
: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);
}
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:
In dem Beispiel nutzen wir:
:root {
--concorde-text-xl: 2.5rem;
}und
:root {
--concorde-text-xs: 0.875rem;
}
: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;
}