@dodlhuat/basix 1.2.0 → 1.2.1

package/css/calendar.scss

@@ -0,0 +1,957 @@
+// ============================================================
+// calendar.scss — Basix Calendar Component Styles
+//
+// Integration principles:
+//   - No hard-coded colours — uses Basix CSS custom properties
+//   - No global reset
+//   - BEM: .cal / .cal__* / is-* / has-*
+//   - State classes match Basix convention: .is-today, .is-selected,
+//     .is-disabled, .has-events, .active, .error, .success
+//   - Font, spacing, radius, border — all from Basix tokens
+//   - Event pills accept any Basix badge/alert class as className
+// ============================================================
+
+@use "parameters" as *;
+
+.cal {
+  --cal-spacing-xs: 4px;
+  --cal-spacing-sm: 8px;
+  --cal-spacing-md: 12px;
+  --cal-spacing-lg: 16px;
+
+  --cal-bg:          var(--background);
+  --cal-bg-alt:      var(--secondary-background);
+  --cal-bg-hover:    var(--hover);
+
+  --cal-border:      var(--divider);
+
+  --cal-text:        var(--primary-text);
+  --cal-text-muted:  var(--secondary-text);
+
+  --cal-accent:      var(--accent-color);
+  --cal-accent-light: var(--accent-color-lighten);
+  --cal-accent-text: #fff;
+
+  --cal-today-ring:  var(--accent-color);
+
+  --cal-hour-height: 48px;
+  --cal-time-col-width: 52px;
+
+  --cal-radius:      #{$border-radius};
+  --cal-radius-sm:   calc(#{$border-radius} * 0.5);
+
+  font-family: var(--font-family, 'Outfit', sans-serif);
+  color: var(--cal-text);
+  box-sizing: border-box;
+  width: 100%;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.cal *,
+.cal *::before,
+.cal *::after {
+  box-sizing: inherit;
+}
+
+// ------------------------------------------------------------------
+// Header
+// ------------------------------------------------------------------
+
+.cal__header {
+  display: flex;
+  align-items: center;
+  gap: var(--cal-spacing-sm);
+  margin-bottom: var(--cal-spacing-lg);
+  flex-wrap: wrap;
+}
+
+.cal__title {
+  flex: 1;
+  min-width: 120px;
+  font-size: 1.25rem;
+  font-weight: 700;
+  color: var(--cal-text);
+  margin: 0;
+  letter-spacing: -0.02em;
+}
+
+.cal__nav {
+  display: flex;
+  gap: var(--cal-spacing-xs);
+  align-items: center;
+}
+
+.cal__btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--cal-spacing-xs);
+  padding: 6px var(--cal-spacing-md);
+  font-family: inherit;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  line-height: 1.5;
+  cursor: pointer;
+  border: 1px solid var(--cal-border);
+  border-radius: var(--cal-radius);
+  background: transparent;
+  color: var(--cal-text);
+  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
+  white-space: nowrap;
+
+  &:hover {
+    background: var(--cal-bg-hover);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--cal-accent);
+    outline-offset: 2px;
+  }
+
+  &:active {
+    transform: scale(0.95);
+  }
+
+  &--active,
+  &[aria-pressed="true"] {
+    background: var(--cal-accent);
+    border-color: var(--cal-accent);
+    color: var(--cal-accent-text);
+    font-weight: 600;
+  }
+
+  .icon-svg {
+    width: 16px;
+    height: 16px;
+    fill: currentColor;
+    vertical-align: middle;
+  }
+}
+
+.cal__view-toggle {
+  display: flex;
+  background: var(--cal-bg-alt);
+  border-radius: var(--cal-radius);
+  padding: 3px;
+  gap: 2px;
+  position: relative;
+
+  .cal__btn {
+    border: none;
+    border-radius: calc(var(--cal-radius) - 2px);
+    padding: 5px 14px;
+    font-size: 0.75rem;
+    background: transparent;
+    color: var(--cal-text-muted);
+    transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
+    position: relative;
+    z-index: 1;
+
+    &--active,
+    &[aria-pressed="true"] {
+      background: var(--cal-bg);
+      color: var(--cal-text);
+      font-weight: 600;
+      box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.03);
+    }
+  }
+}
+
+// ------------------------------------------------------------------
+// Body wrapper
+// ------------------------------------------------------------------
+
+.cal__body {
+  width: 100%;
+}
+
+// ------------------------------------------------------------------
+// Month View
+// ------------------------------------------------------------------
+
+.cal__month-grid {
+  display: grid;
+  grid-template-columns: repeat(7, minmax(0, 1fr));
+  border: 1px solid var(--cal-border);
+  border-radius: var(--cal-radius);
+  overflow: hidden;
+  gap: 1px;
+  background: var(--cal-border);
+}
+
+.cal__weekday {
+  background: var(--cal-bg-alt);
+  padding: var(--cal-spacing-sm) var(--cal-spacing-xs);
+  text-align: center;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  color: var(--cal-text-muted);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.cal__day {
+  background: var(--cal-bg);
+  padding: var(--cal-spacing-xs) var(--cal-spacing-sm);
+  min-height: 88px;
+  cursor: pointer;
+  transition: background 0.15s ease;
+  position: relative;
+
+  &:hover {
+    background: var(--cal-bg-hover);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--cal-accent);
+    outline-offset: -2px;
+    z-index: 1;
+  }
+
+  &--empty {
+    background: var(--cal-bg-alt);
+    cursor: default;
+    pointer-events: none;
+  }
+
+  &--outside {
+    .cal__day-num {
+      opacity: 0.25;
+    }
+    .cal__day-events {
+      opacity: 0.25;
+    }
+  }
+
+  &.is-today .cal__day-num {
+    background: var(--cal-today-ring);
+    color: var(--cal-accent-text);
+    border-radius: 50%;
+    font-weight: 700;
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cal-accent) 20%, transparent);
+  }
+
+  &.is-selected {
+    background: color-mix(in srgb, var(--cal-accent) 6%, var(--cal-bg));
+
+    .cal__day-num {
+      background: var(--cal-accent);
+      color: var(--cal-accent-text);
+      border-radius: 50%;
+      font-weight: 700;
+      box-shadow: 0 2px 8px color-mix(in srgb, var(--cal-accent) 35%, transparent);
+    }
+  }
+
+  &.has-events::after {
+    content: '';
+    display: none;
+    position: absolute;
+    bottom: 6px;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 5px;
+    height: 5px;
+    border-radius: 50%;
+    background: var(--cal-accent);
+  }
+}
+
+.cal__day-num {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  color: var(--cal-text);
+  margin-bottom: var(--cal-spacing-xs);
+  flex-shrink: 0;
+  border-radius: 50%;
+  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.25s ease, transform 0.15s ease;
+}
+
+.cal__day-events {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  overflow: hidden;
+}
+
+// Event pills — use badge color semantics for the left border accent
+.cal__event-pill {
+  font-size: 0.6875rem;
+  line-height: 1.4;
+  padding: 2px 6px;
+  border-radius: var(--cal-radius-sm);
+  background: var(--cal-bg-alt);
+  color: var(--cal-text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: pointer;
+  border: none;
+  border-left: 2px solid var(--cal-accent-light);
+  display: block;
+  text-align: left;
+  width: 100%;
+  transition: background 0.12s ease, transform 0.1s ease;
+
+  &:hover {
+    background: var(--cal-bg-hover);
+  }
+
+  &:active {
+    transform: scale(0.97);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--cal-accent);
+    outline-offset: 1px;
+  }
+
+  // Badge-class color mapping for left border
+  &.badge-success { border-left-color: var(--success); }
+  &.badge-warning { border-left-color: var(--warning); }
+  &.badge-error   { border-left-color: var(--error); }
+  &.badge-info    { border-left-color: var(--accent-color); }
+}
+
+.cal__event-more {
+  font-size: 0.625rem;
+  font-weight: 600;
+  color: var(--cal-accent);
+  padding: 1px 6px;
+  cursor: pointer;
+}
+
+.cal__event-time {
+  font-weight: 600;
+  margin-right: 3px;
+  opacity: 0.7;
+}
+
+// ------------------------------------------------------------------
+// Week View
+// ------------------------------------------------------------------
+
+.cal__week {
+  border: 1px solid var(--cal-border);
+  border-radius: var(--cal-radius);
+  overflow: hidden;
+}
+
+.cal__week-head {
+  display: grid;
+  grid-template-columns: var(--cal-time-col-width) repeat(7, minmax(0, 1fr));
+  background: var(--cal-bg-alt);
+  border-bottom: 1px solid var(--cal-border);
+  overflow-y: auto;
+  scrollbar-gutter: stable;
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+
+  &::-webkit-scrollbar {
+    width: 5px;
+  }
+
+  &::-webkit-scrollbar-track,
+  &::-webkit-scrollbar-thumb {
+    background: transparent;
+  }
+}
+
+.cal__week-head-time {
+  padding: var(--cal-spacing-sm) var(--cal-spacing-xs);
+  font-size: 0.6875rem;
+  color: var(--cal-text-muted);
+}
+
+.cal__week-head-day {
+  padding: var(--cal-spacing-sm) var(--cal-spacing-xs);
+  text-align: center;
+  font-size: 0.6875rem;
+  font-weight: 600;
+  color: var(--cal-text-muted);
+  border-left: 1px solid var(--cal-border);
+  cursor: pointer;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+
+  span {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.0625rem;
+    font-weight: 600;
+    color: var(--cal-text);
+    line-height: 1;
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    margin-top: 2px;
+    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.25s ease;
+    text-transform: none;
+    letter-spacing: normal;
+  }
+
+  &.is-today span {
+    background: var(--cal-today-ring);
+    color: var(--cal-accent-text);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cal-accent) 20%, transparent);
+  }
+
+  &.is-selected span {
+    background: var(--cal-accent);
+    color: var(--cal-accent-text);
+  }
+}
+
+.cal__allday {
+  display: grid;
+  grid-template-columns: var(--cal-time-col-width) repeat(7, minmax(0, 1fr));
+  border-bottom: 1px solid var(--cal-border);
+  min-height: 32px;
+  background: var(--cal-bg);
+  overflow-y: auto;
+  scrollbar-gutter: stable;
+  scrollbar-width: thin;
+  scrollbar-color: transparent transparent;
+
+  &::-webkit-scrollbar {
+    width: 5px;
+  }
+
+  &::-webkit-scrollbar-track,
+  &::-webkit-scrollbar-thumb {
+    background: transparent;
+  }
+}
+
+.cal__allday-label {
+  padding: var(--cal-spacing-xs);
+  font-size: 0.625rem;
+  color: var(--cal-text-muted);
+  display: flex;
+  align-items: flex-start;
+  padding-top: 6px;
+  font-weight: 500;
+}
+
+.cal__allday-col {
+  border-left: 1px solid var(--cal-border);
+  padding: 3px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.cal__week-body {
+  overflow-y: auto;
+  max-height: 480px;
+  position: relative;
+  background: var(--cal-bg);
+  scrollbar-width: thin;
+  scrollbar-gutter: stable;
+  scrollbar-color: var(--cal-border) transparent;
+
+  &::-webkit-scrollbar {
+    width: 5px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: var(--cal-border);
+    border-radius: 3px;
+  }
+}
+
+.cal__week-grid {
+  display: grid;
+  grid-template-columns: var(--cal-time-col-width) repeat(7, minmax(0, 1fr));
+  position: relative;
+}
+
+.cal__time-col {
+  display: flex;
+  flex-direction: column;
+  background: var(--cal-bg-alt);
+}
+
+.cal__time-slot {
+  height: var(--cal-hour-height);
+  display: flex;
+  align-items: flex-start;
+  padding-top: 3px;
+  padding-right: var(--cal-spacing-sm);
+  font-size: 0.625rem;
+  font-weight: 500;
+  color: var(--cal-text-muted);
+  justify-content: flex-end;
+  border-top: 1px solid var(--cal-border);
+  flex-shrink: 0;
+
+  &:first-child {
+    border-top: none;
+  }
+}
+
+.cal__day-col {
+  border-left: 1px solid var(--cal-border);
+  position: relative;
+}
+
+.cal__day-col-hour {
+  height: var(--cal-hour-height);
+  border-top: 1px solid var(--cal-border);
+  flex-shrink: 0;
+  position: relative;
+
+  &:first-child {
+    border-top: none;
+  }
+
+  &::after {
+    content: '';
+    display: block;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 50%;
+    height: 1px;
+    background: var(--cal-border);
+    opacity: 0.4;
+    pointer-events: none;
+  }
+}
+
+.cal__week-event {
+  position: absolute;
+  left: 2px;
+  right: 2px;
+  border-radius: var(--cal-radius-sm);
+  font-size: 0.6875rem;
+  line-height: 1.3;
+  padding: 3px 6px;
+  overflow: hidden;
+  cursor: pointer;
+  background: color-mix(in srgb, var(--cal-accent) 10%, var(--cal-bg));
+  color: var(--cal-text);
+  border-left: 3px solid var(--cal-accent);
+  z-index: 1;
+  transition: box-shadow 0.15s ease, transform 0.1s ease;
+
+  &:hover {
+    z-index: 2;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+    transform: translateY(-1px);
+  }
+
+  &:active {
+    transform: scale(0.98);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--cal-accent);
+    outline-offset: 1px;
+    z-index: 3;
+  }
+
+  // Badge-class color mapping
+  &.badge-success {
+    border-left-color: var(--success);
+    background: color-mix(in srgb, var(--success) 10%, var(--cal-bg));
+  }
+  &.badge-warning {
+    border-left-color: var(--warning);
+    background: color-mix(in srgb, var(--warning) 10%, var(--cal-bg));
+  }
+  &.badge-error {
+    border-left-color: var(--error);
+    background: color-mix(in srgb, var(--error) 10%, var(--cal-bg));
+  }
+  &.badge-info {
+    border-left-color: var(--accent-color);
+    background: color-mix(in srgb, var(--accent-color) 10%, var(--cal-bg));
+  }
+}
+
+// Now-line
+.cal__now-line {
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 2px;
+  background: var(--error);
+  z-index: 5;
+  pointer-events: none;
+
+  &::before {
+    content: '';
+    display: block;
+    position: absolute;
+    left: -5px;
+    top: -4px;
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background: var(--error);
+    animation: cal-now-pulse 2s ease-in-out infinite;
+  }
+}
+
+// ------------------------------------------------------------------
+// Agenda View
+// ------------------------------------------------------------------
+
+.cal__agenda {
+  border: 1px solid var(--cal-border);
+  border-radius: var(--cal-radius);
+  overflow: hidden;
+}
+
+.cal__agenda-day {
+  display: flex;
+  gap: var(--cal-spacing-lg);
+  padding: var(--cal-spacing-md) var(--cal-spacing-lg);
+  border-bottom: 1px solid var(--cal-border);
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  &.is-today {
+    background: color-mix(in srgb, var(--cal-accent) 4%, var(--cal-bg));
+  }
+}
+
+.cal__agenda-date {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-width: 44px;
+  flex-shrink: 0;
+}
+
+.cal__agenda-dow {
+  font-size: 0.625rem;
+  color: var(--cal-text-muted);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  font-weight: 600;
+}
+
+.cal__agenda-num {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 34px;
+  height: 34px;
+  font-size: 1rem;
+  font-weight: 700;
+  color: var(--cal-text);
+  border-radius: 50%;
+  margin-top: 2px;
+  transition: background 0.2s ease, color 0.2s ease;
+
+  &.is-today {
+    background: var(--cal-today-ring);
+    color: var(--cal-accent-text);
+    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cal-accent) 20%, transparent);
+  }
+}
+
+.cal__agenda-events {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--cal-spacing-sm);
+  padding-top: 4px;
+  min-width: 0;
+}
+
+.cal__agenda-event {
+  display: flex;
+  align-items: baseline;
+  gap: var(--cal-spacing-sm);
+  padding: var(--cal-spacing-sm) var(--cal-spacing-md);
+  border-radius: var(--cal-radius-sm);
+  background: var(--cal-bg-alt);
+  border-left: 3px solid var(--cal-accent-light);
+  cursor: pointer;
+  transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease;
+
+  &:hover {
+    background: var(--cal-bg-hover);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+  }
+
+  &:active {
+    transform: scale(0.98);
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--cal-accent);
+    outline-offset: 1px;
+  }
+
+  // Badge-class color mapping
+  &.badge-success { border-left-color: var(--success); }
+  &.badge-warning { border-left-color: var(--warning); }
+  &.badge-error   { border-left-color: var(--error); }
+  &.badge-info    { border-left-color: var(--accent-color); }
+}
+
+.cal__agenda-event-time {
+  font-size: 0.75rem;
+  color: var(--cal-text-muted);
+  font-weight: 600;
+  white-space: nowrap;
+  min-width: 110px;
+  flex-shrink: 0;
+}
+
+.cal__agenda-event-title {
+  font-size: 0.875rem;
+  color: var(--cal-text);
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.cal__agenda-empty {
+  padding: var(--cal-spacing-lg);
+  color: var(--cal-text-muted);
+  font-size: 0.875rem;
+  text-align: center;
+}
+
+// ------------------------------------------------------------------
+// Responsive — mobile-first refinements
+// ------------------------------------------------------------------
+
+@media (max-width: 600px) {
+  .cal__header {
+    gap: var(--cal-spacing-xs);
+  }
+
+  .cal__title {
+    font-size: 1.0625rem;
+    order: -1;
+    width: 100%;
+  }
+
+  .cal__nav {
+    flex: 1;
+  }
+
+  .cal__view-toggle {
+    padding: 2px;
+    gap: 1px;
+
+    .cal__btn {
+      padding: 4px 10px;
+      font-size: 0.6875rem;
+    }
+  }
+
+  // Month grid — borderless, airy, centered numbers
+  .cal__month-grid {
+    border: none;
+    border-radius: 0;
+    gap: 0;
+    background: transparent;
+  }
+
+  .cal__weekday {
+    background: transparent;
+    padding: var(--cal-spacing-sm) 0;
+    font-size: 0.625rem;
+  }
+
+  .cal__day {
+    min-height: 52px;
+    padding: var(--cal-spacing-xs) 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start;
+    background: transparent;
+
+    &:hover {
+      background: transparent;
+
+      .cal__day-num {
+        background: var(--cal-bg-hover);
+      }
+    }
+
+    &--empty {
+      background: transparent;
+    }
+
+    &--outside {
+      .cal__day-num {
+        opacity: 0.25;
+      }
+    }
+
+    &.is-selected {
+      background: transparent;
+    }
+
+    &.has-events::after {
+      display: block;
+      position: static;
+      transform: none;
+      margin-top: 3px;
+    }
+  }
+
+  .cal__day-num {
+    width: 36px;
+    height: 36px;
+    font-size: 0.8125rem;
+    margin-bottom: 0;
+  }
+
+  .cal__day-events,
+  .cal__event-pill,
+  .cal__event-more {
+    display: none;
+  }
+
+  // Week view — compact
+  .cal {
+    --cal-time-col-width: 40px;
+  }
+
+  .cal__week-body {
+    max-height: 360px;
+  }
+
+  .cal__week-head-day {
+    font-size: 0.5625rem;
+    padding: var(--cal-spacing-xs) 2px;
+
+    span {
+      font-size: 0.875rem;
+      width: 28px;
+      height: 28px;
+    }
+  }
+
+  .cal__time-slot {
+    font-size: 0.5rem;
+    padding-right: 3px;
+  }
+
+  // Agenda — tighter
+  .cal__agenda-day {
+    padding: var(--cal-spacing-sm) var(--cal-spacing-md);
+    gap: var(--cal-spacing-md);
+  }
+
+  .cal__agenda-event {
+    padding: var(--cal-spacing-xs) var(--cal-spacing-sm);
+    flex-direction: column;
+    gap: 2px;
+  }
+
+  .cal__agenda-event-time {
+    min-width: 0;
+    font-size: 0.6875rem;
+  }
+
+  .cal__agenda-event-title {
+    font-size: 0.8125rem;
+  }
+}
+
+// ------------------------------------------------------------------
+// Print styles
+// ------------------------------------------------------------------
+
+@media print {
+  .cal__header .cal__view-toggle,
+  .cal__header .cal__nav .cal__btn--today {
+    display: none;
+  }
+
+  .cal__week-body {
+    max-height: none;
+    overflow: visible;
+  }
+
+  .cal__month-grid,
+  .cal__week,
+  .cal__agenda {
+    border: 1px solid #ccc;
+  }
+}
+
+// ------------------------------------------------------------------
+// Animation — staggered grid entrance + now-line pulse
+// ------------------------------------------------------------------
+
+@media (prefers-reduced-motion: no-preference) {
+  .cal__body {
+    animation: cal-slide-in 0.25s cubic-bezier(0.2, 0, 0, 1);
+  }
+
+  .cal__day,
+  .cal__agenda-day {
+    animation: cal-cell-in 0.3s cubic-bezier(0.2, 0, 0, 1) both;
+  }
+
+  // Stagger the first 5 rows (35 day cells) for a wave effect
+  @for $i from 1 through 49 {
+    .cal__month-grid .cal__day:nth-child(#{$i}) {
+      animation-delay: #{0.01s * $i};
+    }
+  }
+
+  @for $i from 1 through 10 {
+    .cal__agenda-day:nth-child(#{$i}) {
+      animation-delay: #{0.03s * $i};
+    }
+  }
+}
+
+@keyframes cal-slide-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes cal-cell-in {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes cal-now-pulse {
+  0%, 100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.5;
+    transform: scale(1.3);
+  }
+}