@spaced-out/ui-design-system/lib/components/DateRangePicker/DateRangeWrapper.module.css

Sense UI components library

@value (
  size160,
  size180,
  size276, 
  size300,
  size580,
  size720,
  sizeFluid
) from '../../styles/variables/_size.css';
@value (
  spaceNone, 
  spaceSmall,
  spaceXSmall,
  spaceMedium
) from '../../styles/variables/_space.css';
@value (borderRadiusMedium) from '../../styles/variables/_border.css';
@value (colorBackgroundPrimary) from '../../styles/variables/_color.css';

.dateRangeWrapper {
  display: flex;
  width: size580;
}

.dateRangeWrapperSmall {
  display: flex;
  width: size300;
}

.cardHeader {
  width: sizeFluid;
  padding: spaceXSmall;
  gap: spaceSmall;
  background-color: colorBackgroundPrimary;
  border-top-left-radius: borderRadiusMedium;
  border-top-right-radius: borderRadiusMedium;
}

.cardFooter {
  background-color: colorBackgroundPrimary;
  border-bottom-left-radius: borderRadiusMedium;
  border-bottom-right-radius: borderRadiusMedium;
}

.cardFooterSmall {
  flex-direction: column;
  justify-content: center;
  padding: spaceSmall;
}

.calendarHeader {
  display: flex;
  align-items: center;
  gap: spaceXSmall;
}

.divider {
  height: sizeFluid;
  width: spaceNone;
  composes: borderRightPrimary from '../../styles/border.module.css';
}

.dateRangeCalendars {
  display: flex;
  padding: spaceNone;
  width: sizeFluid;
}

.headerIcon {
  margin: spaceXSmall;
}

.disabledIcon {
  pointer-events: none;
  outline: none;
}

.timezoneDropdownContainer {
  width: sizeFluid;
}

.timezoneDropdown {
  width: size276;
}

.timezoneDropdown input {
  text-overflow: ellipsis;
}

.mainContainer {
  width: sizeFluid;
}

.selectedDateContainer {
  display: flex;
  gap: spaceMedium;
  padding: spaceXSmall spaceSmall;
}

.selectedDate {
  display: flex;
  width: 100%;
  justify-content: center;
}

.calendarMenuContainer {
  display: flex;
  gap: spaceSmall;
  width: sizeFluid;
  padding: spaceXSmall;
}

.singleCalendarWrapper {
  display: none;
}

@media (max-width: size720) {
  .singleCalendarWrapper {
    display: flex;
  }

  .dualCalendarWrapper {
    display: none;
  }
}

.monthAndYearMenu {
  min-width: size160;
  width: size160;
}