SPFx-Projekte/Modern-Recurring-Events
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Verbessere das Styling der Datumsanzeige durch Hinzufügen eines Rahmens zur DateBadge und Anpassung der Eigenschaften für DateLine und Location

Browse Source
This commit is contained in:
Torsten Brendgen
2026-08-24 20:22:31 +02:00
parent 9372ae8e18
commit 977c5b54c1
1 changed files with 2 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/webparts/recurringEvents/components/RecurringEvents.module.scss
+2 -2
View File
@@ -19,11 +19,11 @@
.cardLink:hover, .compactLink:hover { background: "[theme:neutralLighterAlt, default:#faf9f8]"; color: "[theme:bodyText, default:#323130]"; } .cardLink:hover, .compactLink:hover { background: "[theme:neutralLighterAlt, default:#faf9f8]"; color: "[theme:bodyText, default:#323130]"; }
.cardLink:focus, .compactLink:focus { outline: 2px solid "[theme:focusBorder, default:#605e5c]"; outline-offset: -2px; } .cardLink:focus, .compactLink:focus { outline: 2px solid "[theme:focusBorder, default:#605e5c]"; outline-offset: -2px; }
.cardContent, .compactContent { display: block; flex: 1 1 auto; min-width: 0; } .cardContent, .compactContent { display: block; flex: 1 1 auto; min-width: 0; }
.dateBadge { color: "[theme:themePrimary, default:#0078d4]"; display: flex; flex: 0 0 48px; flex-direction: column; margin-right: 12px; text-align: center; } .dateBadge {border: 1px solid #c8c8c8; min-width: 62px; height: 62px; justify-content: center; color: "[theme:themePrimary, default:#0078d4]"; display: flex; flex: 0 0 48px; flex-direction: column; margin-right: 12px; text-align: center; }
.month { font-size: 12px; font-weight: 400; line-height: 16px; text-transform: uppercase; } .month { font-size: 12px; font-weight: 400; line-height: 16px; text-transform: uppercase; }
.day { color: "[theme:bodyText, default:#323130]"; font-size: 21px; font-weight: 600; line-height: 28px; } .day { color: "[theme:bodyText, default:#323130]"; font-size: 21px; font-weight: 600; line-height: 28px; }
.title { display: block; font-size: 14px; font-weight: 600; line-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .title { display: block; font-size: 14px; font-weight: 600; line-height: 20px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dateLine, .location {border: 1px solid #c8c8c8; min-width: 62px; height: 62px; justify-content: center; color: "[theme:neutralSecondary, default:#605e5c]"; display: block; font-size: 12px; line-height: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dateLine, .location {color: "[theme:neutralSecondary, default:#605e5c]"; display: block; font-size: 12px; line-height: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.recurringIcon { color: "[theme:themePrimary, default:#0078d4]"; flex: 0 0 28px; font-size: 18px; text-align: center; } .recurringIcon { color: "[theme:themePrimary, default:#0078d4]"; flex: 0 0 28px; font-size: 18px; text-align: center; }
.status { color: "[theme:bodyText, default:#323130]"; padding: 16px; } .status { color: "[theme:bodyText, default:#323130]"; padding: 16px; }
.error { color: "[theme:errorText, default:#a80000]"; padding: 16px; } .error { color: "[theme:errorText, default:#a80000]"; padding: 16px; }