perf(styles): add styles to day slot content #128

src/style-auro-calendar-cell.scss

@@ -1,4 +1,12 @@
-/* stylelint-disable selector-max-class, color-function-notation */
+// // Copyright (c) 2022 Alaska Airlines. All right reserved. Licensed under the Apache-2.0 license
+// // See LICENSE in the project root for license information.
+
+// // ---------------------------------------------------------------------
+
+@import './../node_modules/@aurodesignsystem/webcorestylesheets/dist/breakpoints';
+@import './../node_modules/@alaskaairux/design-tokens/dist/tokens/SCSSVariables';
+
+/* stylelint-disable selector-max-class, color-function-notation, order/properties-order */
 
 .day {
   position: relative;
@@ -56,6 +64,41 @@
   }
 }
 
+.daySlot {
+  display: flex;
+  flex: 1;
+
+  width: 100%;
+
+  align-items: center;
+  justify-content: center;
+
+  font-size: var(--auro-text-body-size-xxs);
+}
+
+::slotted(*) {
+  position: absolute;
+  width: 80%;
+
+  overflow: hidden;
+  white-space: nowrap;
+
+  left: 50%; 
+  top: 80%;
+  transform: translate(-50%, -50%);
+}
+
+::slotted(auro-icon) {
+  max-height: 24px;
+  max-width: 24px;
+}
+
+@include auro_grid-breakpoint--xs {
+  .daySlot {
+    font-size: var(--auro-text-body-size-xs);
+  }
+}
+
 @media (hover: hover) {
   .day {
     &:hover {