diff --git a/foundations.html b/foundations.html index d290209..daad5d9 100644 --- a/foundations.html +++ b/foundations.html @@ -31,6 +31,7 @@ white#FFFFFFStandardfläche von Buttons, Eingabefeldern, Pulldown-Triggern, Checkboxen, Radios, Toggle-Tracks und Card-Trennern. signal-green#009101Positive Score-Balken und positive Chart-Werte. signal-green-light#65A665Hellgrüne Variante für positive Signal- und Notification-Flächen. + signal-green-red#C0624DRotgrüne Variante für positive oder negative Bewertungsdarstellungen in Notifications. signal-yellow#9C7A00Neutrale Score-Balken, neutrale Chart-Werte und Warnwerte in Tabellen. ampel-hellgelb#D3B962Untersegmente in der Pattern-Notification-Variante der Object Card. signal-red#9B3B2FNegative Score-Balken und negative Chart-Werte. diff --git a/patterns/notifications.html b/patterns/notifications.html index 5807bbd..b5c8e4c 100644 --- a/patterns/notifications.html +++ b/patterns/notifications.html @@ -142,6 +142,27 @@ +

Pattern: Notification with title - green-red rating

+
+
+

+ Bewertung +

+
+ +
+

+ Positive oder negative Bewertungsdarstellung zur Illustration. +

+
+ +
+ +
+
+

Pattern: Notification with title - yellow

diff --git a/styles/01-foundations.css b/styles/01-foundations.css index 6e0d007..cd79b50 100644 --- a/styles/01-foundations.css +++ b/styles/01-foundations.css @@ -16,6 +16,7 @@ --color-process-inactive: #FFAE79; --color-signal-green: #009101; --color-signal-green-light: #65A665; + --color-signal-green-red: #C0624D; --color-signal-yellow: #9C7A00; --color-ampel-hellgelb: #D3B962; --color-signal-red: #9B3B2F; diff --git a/styles/40-components-cards.css b/styles/40-components-cards.css index 6b20716..49b2014 100644 --- a/styles/40-components-cards.css +++ b/styles/40-components-cards.css @@ -149,6 +149,11 @@ color: var(--text-card-header); } +.sg-card-segment--signal-green-red { + background: var(--color-signal-green-red); + color: var(--text-card-header); +} + .sg-card-segment--signal-yellow { background: var(--color-signal-yellow); color: var(--text-card-header); @@ -171,6 +176,11 @@ --text-card-body: var(--color-font-light); } +.sg-card.sg-card--notification-signal-green-red { + --text-card-header: var(--color-font-light); + --text-card-body: var(--color-font-light); +} + .sg-card--content-card { --surface-card-header-primary: var(--surface-content-block-card-title); --surface-card-body: var(--surface-content-block-card-content);