@activecollab/components/dist/esm/components/DatePicker/Styles.js

ActiveCollab Components

import styled from "styled-components";
import { Button } from "../Button";
import { ConfirmDialog } from "../ConfirmDialog";
export const StyledConfirmDialog = styled(ConfirmDialog).withConfig({
  displayName: "Styles__StyledConfirmDialog",
  componentId: "sc-18towna-0"
})([".modal-header{padding:16px 30px;h1{margin:0;font-size:16px;}}.modal-body{padding:10px 30px;}.modal-divider{border-top:1px solid var(--border-primary);height:1px;}.modal-footer{padding:16px 30px;}"]);
StyledConfirmDialog.displayName = "StyledConfirmDialog";
export const StyledDatePickerContainerInner = styled.div.withConfig({
  displayName: "Styles__StyledDatePickerContainerInner",
  componentId: "sc-18towna-1"
})(["& > *{font-family:-apple-system,BlinkMacSystemFont,\"Roboto\",\"Helvetica Neue\",Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}&{@keyframes slide-up{from{transform:translateY(0);opacity:1;}to{transform:translateY(-20px);opacity:0;}}@keyframes slide-down{from{transform:translateY(0);opacity:1;}to{transform:translateY(20px);opacity:0;}}.slide-up{animation:slide-up 0.3s ease-in-out;}.slide-down{animation:slide-down 0.3s ease-in-out;}.today-day{position:relative;&::after{position:absolute;content:\"\";bottom:2px;height:3px;width:3px;border-radius:3px;margin:0 auto;left:0;right:0;background:var(--color-primary);}}.today-day,.today-month,.today-year{color:var(--color-primary);background-color:none;}.selected{background-color:var(--color-primary) !important;color:var(--color-theme-100) !important;}.disabled{pointer-events:none;color:var(--color-theme-500);}.hovered{background-color:var(--color-primary-300);}}.userAvailability,.nonWorkingDaysOfWeek{color:var(--red-alert);&.hovered:hover:not(.selected){background-color:rgba(237,97,97,0.1);color:var(--red-alert);}&.today-day{color:var(--red-alert);&:after{background-color:var(--red-alert);}&.hovered:hover:not(.selected):after{background-color:var(--red-alert);}}}.selected{background-color:var(--color-primary);color:var(--color-theme-100);&.today-day{color:var(--color-theme-100);&:after{background-color:var(--color-theme-100);}}&.userAvailability,&.nonWorkingDaysOfWeek{background-color:var(--red-alert) !important;color:var(--color-theme-100) !important;}}.nonWorkingDay{color:var(--color-theme-500);&.hovered:hover:not(.selected){color:var(--color-theme-500);}&.today-day{color:var(--color-primary-500);&:after{background-color:var(--color-primary-500);}&.hovered:hover:not(.selected){color:var(--color-theme-500);&:after{background-color:var(--color-theme-500);}}}&.userAvailability,&.nonWorkingDaysOfWeek{&.hovered:hover:not(.selected){color:var(--color-theme-500);background-color:var(--color-primary-300);&.today-day:after{background-color:var(--color-theme-500);}}}&.selected{color:rgba(255,255,255,0.6);background-color:var(--color-primary);.neon &{color:rgba(0,0,0,0.4);}&.today-day{color:rgba(255,255,255,0.6);.neon &{color:rgba(0,0,0,0.4);}&:after{background-color:rgba(255,255,255,0.6);.neon &{background-color:rgba(0,0,0,0.4);}}}}}.disabled{cursor:default;color:var(--color-theme-500);&.hovered:hover{color:var(--color-theme-500);}}.outside{cursor:default;opacity:0.25;color:var(--color-theme-900);&.userAvailability.hovered:hover:not(.selected),&.nonWorkingDaysOfWeek.hovered:hover:not(.selected){background:var(--color-primary-300);}&.userAvailability:not(.selected),&.nonWorkingDaysOfWeek:not(.selected),&.userAvailability.hovered:hover:not(.selected),&.nonWorkingDaysOfWeek.hovered:hover:not(.selected),&.nonWorkingDay.hovered:hover:not(.selected),&.nonWorkingDay:not(.selected),&.today-day.hovered:hover:not(.selected),&.today-day:not(.selected){color:var(--color-theme-900);}&.userAvailability.today-day:not(.selected):after,&.nonWorkingDaysOfWeek.today-day:not(.selected):after,&.userAvailability.today-day.hovered:hover:not(.selected):after,&.nonWorkingDaysOfWeek.today-day.hovered:hover:not(.selected):after,&.nonWorkingDay.today-day:not(.selected):after,&.nonWorkingDay.today-day.hovered:hover:not(.selected):after,&.today-day.hovered:hover:not(.selected):after,&.today-day:not(.selected):after{background-color:var(--color-theme-900);}&.hovered:hover:not(.selected){background:var(--color-primary-400);}&.selected{color:var(--page-paper-main);background:var(--color-primary);.neon &{color:var(--page-paper-main);}&.today-day{&:after{background:var(--page-paper-main);.neon &{background:var(--page-paper-main);}}&.nonWorkingDay{color:var(--page-paper-main);.neon &{color:var(--page-paper-main);}}}}}"]);
export const StyledDatePickerWrapper = styled.div.withConfig({
  displayName: "Styles__StyledDatePickerWrapper",
  componentId: "sc-18towna-2"
})(["position:relative;display:inline-block;width:100%;"]);
StyledDatePickerWrapper.displayName = "StyledDatePickerWrapper";
export const StyledDaysOfWeek = styled.div.withConfig({
  displayName: "Styles__StyledDaysOfWeek",
  componentId: "sc-18towna-3"
})(["display:grid;grid-template-columns:repeat(7,1fr);text-align:center;font-weight:bold;margin-bottom:0;width:100%;"]);
StyledDaysOfWeek.displayName = "StyledDaysOfWeek";
export const StyledDayName = styled.div.withConfig({
  displayName: "Styles__StyledDayName",
  componentId: "sc-18towna-4"
})(["width:27px;height:27px;display:grid;place-items:center;font-size:11px;font-weight:400;color:var(--color-theme-600);user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;"]);
StyledDayName.displayName = "StyledDayName";
export const StyledCalendarDates = styled.div.withConfig({
  displayName: "Styles__StyledCalendarDates",
  componentId: "sc-18towna-5"
})(["display:grid;grid-template-columns:repeat(7,1fr);text-align:center;row-gap:4px;width:100%;"]);
StyledCalendarDates.displayName = "StyledCalendarDates";
export const StyledCalendarDate = styled.div.withConfig({
  displayName: "Styles__StyledCalendarDate",
  componentId: "sc-18towna-6"
})(["cursor:pointer;border-radius:50%;transition:background 0.3s;width:27px;height:27px;display:grid;place-items:center;font-size:13px;font-weight:700;color:var(--color-theme-900);user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;&:hover{background-color:var(--color-primary-300);}"]);
StyledCalendarDate.displayName = "StyledCalendarDate";
export const StyledCaption = styled.span.withConfig({
  displayName: "Styles__StyledCaption",
  componentId: "sc-18towna-7"
})(["font-size:18.5px;font-weight:500;padding:0 16px;border-radius:15px;color:var(--color-theme-900);user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;&.year-caption{margin:auto !important;}&:hover{background-color:var(--color-primary-300);}"]);
StyledCaption.displayName = "StyledCaption";
export const StyledCalendarSelector = styled.div.withConfig({
  displayName: "Styles__StyledCalendarSelector",
  componentId: "sc-18towna-8"
})(["height:230px;display:grid;place-items:center;width:100%;max-width:212px;margin:auto;"]);
StyledCalendarSelector.displayName = "StyledCalendarSelector";
export const StyledYearSelect = styled.div.withConfig({
  displayName: "Styles__StyledYearSelect",
  componentId: "sc-18towna-9"
})(["display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:8px 20px;max-height:210px;overflow-y:auto;width:100%;"]);
StyledYearSelect.displayName = "StyledYearSelect";
export const StyledYearOption = styled.div.withConfig({
  displayName: "Styles__StyledYearOption",
  componentId: "sc-18towna-10"
})(["cursor:pointer;text-align:center;border-radius:16px;transition:background 0.2s;font-size:14px;margin:auto;font-weight:700;font-size:14px;line-height:18px;width:50px;margin-bottom:16px;height:20px;color:var(--color-theme-900);user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;&:hover{background-color:var(--color-primary-300);}"]);
StyledYearOption.displayName = "StyledYearOption";
export const StyledMonthOption = styled.div.withConfig({
  displayName: "Styles__StyledMonthOption",
  componentId: "sc-18towna-11"
})(["text-align:center;cursor:pointer;border-radius:16px;transition:background 0.2s;margin:13.5px auto;font-weight:700;font-size:14px;line-height:18px;width:50px;margin-bottom:16px;height:20px;color:var(--color-theme-900);user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;&:hover{background-color:var(--color-primary-300);}"]);
StyledMonthOption.displayName = "StyledMonthOption";
export const StyledMonthSelect = styled.div.withConfig({
  displayName: "Styles__StyledMonthSelect",
  componentId: "sc-18towna-12"
})(["display:grid;grid-template-columns:repeat(3,1fr);gap:4px;width:100%;height:220px;margin:auto;"]);
StyledMonthSelect.displayName = "StyledMonthSelect";
export const StyledMonthSelector = styled.div.withConfig({
  displayName: "Styles__StyledMonthSelector",
  componentId: "sc-18towna-13"
})(["width:100%;padding:8px 20px;"]);
StyledMonthSelector.displayName = "StyledMonthSelector";
export const StyledControls = styled.div.withConfig({
  displayName: "Styles__StyledControls",
  componentId: "sc-18towna-14"
})(["display:flex;justify-content:space-between;border-top:1px solid var(--border-primary);margin:8px 0 0;padding:8px 24px 0px;"]);
StyledControls.displayName = "StyledControls";
export const StyledControlsLeft = styled.div.withConfig({
  displayName: "Styles__StyledControlsLeft",
  componentId: "sc-18towna-15"
})(["display:flex;gap:8px;"]);
StyledControlsLeft.displayName = "StyledControlsLeft";
export const StyledClearInstantButton = styled(Button).withConfig({
  displayName: "Styles__StyledClearInstantButton",
  componentId: "sc-18towna-16"
})(["margin:auto !important;"]);
StyledClearInstantButton.displayName = "StyledClearInstantButton";
export const StyledCalendarHeader = styled.div.withConfig({
  displayName: "Styles__StyledCalendarHeader",
  componentId: "sc-18towna-17"
})(["display:flex;justify-content:space-between;align-items:center;font-weight:bold;margin:auto;margin-bottom:4px;cursor:pointer;width:230px;"]);
StyledCalendarHeader.displayName = "StyledCalendarHeader";
//# sourceMappingURL=Styles.js.map