@veracity/vui/dist/calendar/calendar.styles.js

Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.

import { th } from "../core/theme.js";
import styled, { css } from "../core/styled.js";
import { Box } from "../box/box.js";
import { Link } from "../link/link.js";

//#region src/calendar/calendar.styles.ts
const boundary = css`
  background-color: ${th.color("seaBlue.main")};
  color: white !important;
  border-radius: 0;
`;
const current = css`
  background-color: ${th.color("seaBlue.main")};
  color: white !important;
  border-radius: 0;
`;
const isDisabled = css`
  background-color: ${th.color("sandstone.97")} !important;
  color: ${th.color("sandstone.55")} !important;
  cursor: not-allowed;
`;
const isHidden = css`
  color: ${th.color("sandstone.55")} !important;
`;
const isToday = css`
  border: 1px solid ${th.color("seaBlue.main")};
`;
const hover = css`
  background-color: ${th.color("skyBlue.85")};
  color: ${th.color("seaBlue.main")};
  border-radius: 0;
`;
const isSelected = css`
  background-color: ${th.color("skyBlue.85")};
  border-radius: 0;
  color: white;
`;
const CalendarItem = styled(Link)`
  aspect-ratio: 1;
  border: 0;
  cursor: pointer;
  height: 100%;
  justify-content: center;
  text-decoration: none;
  width: 100%;

  ${(p) => p.isHidden && isHidden}
  ${(p) => p.isToday && isToday}
  ${(p) => p.isDisabled && isDisabled}
  ${(p) => p.isSelected && isSelected}
  ${(p) => p.boundary && boundary}
  ${(p) => p.current && current}

  &:hover {
    color: inherit;
    text-decoration: none;

    ${(p) => !p.isDisabled && hover}
  }
`;
const CalendarItemsContainer = styled(Box)`
  align-items: center;
  column-gap: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(4, 48px);
  justify-items: center;
  row-gap: 0;
`;

//#endregion
export { CalendarItem, CalendarItemsContainer, boundary, current, hover, isDisabled, isHidden, isSelected, isToday };
globalThis.__vuiVersion__ = "5.3.1"
//# sourceMappingURL=calendar.styles.js.map