feat(styles): added a legend for the calendar

SAP · Oct 4, 2024 · 477e4be · 477e4be
1 parent 7c89d67
commit 477e4be
Showing 1 changed file with 42 additions and 0 deletions.
diff --git a/packages/styles/src/calendar.scss b/packages/styles/src/calendar.scss
@@ -413,6 +413,48 @@ $fd-calendar-special-days: (
     display: flex;
   }
 
+  &--legend {
+
+    margin: 0.125rem 0.5rem 0.25rem 0.25rem;
+    width: 1rem;
+    height: 1rem;
+
+    &__circle {
+      height: 1rem;
+      width: 1rem;
+      border: 0.0625rem solid var(--sapLegendColor5);  // var(--sapContent_ForegroundBorderColor);
+      border-radius: 0.563rem;
+      // background-color: var(--sapLegendColor5);
+    }
+
+    &__square {
+      height: 0.875rem;
+      width: 0.875rem;
+      border: 0.0625rem solid var(--sapContent_ForegroundBorderColor);
+      border-radius: 0.125rem;
+      background-color: bisque;
+    }
+
+    &__text {
+      color: var(--sapContent_LabelColor);
+      font-family: var(--sapFontFamily);
+      font-size: var(--sapFontSmallSize);
+      font-weight: normal;
+      padding: 0.3125rem;
+      background: var(--sapList_Background);
+      column-gap: 0.5rem;
+    }
+
+    &__description {
+      vertical-align: middle;
+      white-space: pre-line;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      cursor: default;
+    }
+  }
+
+
   &__text {
     @include fd-reset();
     @include fd-flex-center();