@zohodesk/components/lib/DateTime/YearView.module.css

In this Package, we Provide Some Basic Components to Build Web App

[dir=ltr] .boxPadding {
  padding-right: var(--zd_size19) ;
  padding-left: var(--zd_size19) ;
}[dir=rtl] .boxPadding {
  padding-left: var(--zd_size19) ;
  padding-right: var(--zd_size19) ;
}

.month {
  width: 30.333%;
  font-size: var(--zd_font_size12) ;
  line-height: 2.1667;
  height: var(--zd_size26) ;
  color: var(--zdt_yearview_month_text);
  text-align: center;
  margin: 0 0 var(--zd_size1) ;
  cursor: pointer;
  background-color: var(--zdt_yearview_month_bg);
  border-radius: 20px;
}

.month:hover {
  background-color: var(--zdt_yearview_month_hover_bg);
}

.currentMonth,
.currentMonth:hover {
  color: var(--zdt_yearview_currentmonth_text);
}

.currentMonth, .currentMonth:hover {
  background-color: var(--zdt_yearview_currentmonth_bg);
}

.yearBox {
  border-bottom: 1px dotted var(--zdt_yearview_yearbox_border);
}

.year {
  padding: var(--zd_size7) 0 ;
  cursor: pointer;
}

.year:hover .yearText,
.year:hover .arrow {
  color: var(--zdt_yearview_year_hover_text);
}

.yearText {
  color: var(--zdt_yearview_yeartext_text);
  font-size: var(--zd_font_size11) ;
}

.arrow {
  color: var(--zdt_yearview_yeartext_text);
  transition: transform var(--zd_transition1);
}

.isActive {
  cursor: default;
}

.isActive .yearText {
  font-family: var(--zd_semibold);
  color: var(--zdt_yearview_year_hover_text);
  font-size: var(--zd_font_size11) ;
}

.arrowActive {
  color: var(--zdt_yearview_year_hover_text);
}

[dir=ltr] .arrowActive {
  transform: rotate(180deg);
}

[dir=rtl] .arrowActive {
  transform: rotate(-180deg);
}

.container {
  height: 100% ;
  overflow-y: auto;
  overflow-x: hidden;
  composes: boxPadding;
  background-color: var(--zdt_yearview_default_bg);
}

.yearContainer {
  height: var(--zd_size135) ;
  overflow: hidden;
  transition: height var(--zd_transition1);
  padding-bottom: var(--zd_size5) ;
}

.toggleYear {
  height: 0 ;
  padding: 0 ;
}