@zohodesk/components/lib/CheckBox/CheckBox.module.css

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

.varClass {
  /* checkbox default variables */
  --checkbox_bg_color: var(--zdt_checkbox_default_bg);
  --checkbox_cursor: default;
  --checkbox_stroke_width: 2px;
  --checkbox_stroke_color: var(--zdt_checkbox_default_stroke_border);

  /* checkbox checked state default variables */
  --checkbox_checked_stroke_color: var(--zdt_checkbox_primary_stroke_border);
  --checkbox_checked_active_color: var(--zdt_checkbox_primary_stroke_border);
}
.container {
  composes: varClass;
  stroke: var(--checkbox_stroke_color);
}
.container, .pointer, .readonly {
  cursor: var(--checkbox_cursor);
}
.pointer {
  --checkbox_cursor: pointer;
}
.readonly {
  --checkbox_cursor: default;
}
.cbBox {
  fill: none;
  stroke-width: var(--checkbox_stroke_width);
  stroke-linecap: round;
  stroke: inherit;
}
.tickPath {
  composes: cbBox;
  stroke-dasharray: 40;
}
.boxContainer {
  composes: offSelection from '../common/common.module.css';
  border-radius: 2px;
  background-color: var(--checkbox_bg_color);
}
.filled {
  --checkbox_bg_color: inherit;
}
.medium {
  width: var(--zd_size16) ;
  height: var(--zd_size16) ;
}
.small {
  width: var(--zd_size13) ;
  height: var(--zd_size13) ;
}

.checkbox {
  position: relative;
  font-size: 0 ;
  display: block;
}
.tick {
  position: absolute;
  left: 0 ;
}
.mediumtick {
  top: calc( var(--zd_size2) * -1 ) ;
  height: var(--zd_size20) ;
  width: var(--zd_size20) ;
}
.smalltick {
  top: calc( var(--zd_size3) * -1 ) ;
  height: var(--zd_size18) ;
  width: var(--zd_size18) ;
  left: calc( var(--zd_size1) * -1 ) ;
}

.checkedtickPath {
  stroke-dashoffset: 40;
}

[dir=ltr] .checkedtickPath {
  animation: tickAnimate var(--zd_transition3) ease forwards;
}

[dir=rtl] .checkedtickPath {
  animation: tickAnimate var(--zd_transition3) ease forwards;
}
.linePath {
  transform-origin: center;
}
[dir=ltr] .linePath {
  animation: lineAnimate var(--zd_transition3) ease forwards;
}
[dir=rtl] .linePath {
  animation: lineAnimate var(--zd_transition3) ease forwards;
}
[dir=ltr] .text {
  margin-left: var(--zd_size6) ;
}
[dir=rtl] .text {
  margin-right: var(--zd_size6) ;
}

 .checkedprimary,
.checkeddanger {
  stroke: var(--checkbox_checked_stroke_color);
} 
.primary:hover
/* .primary:focus  */
{
  --checkbox_stroke_color: var(--zdt_checkbox_primary_stroke_border);
}
.checkedprimary {
  --checkbox_checked_stroke_color: var(--zdt_checkbox_primary_stroke_border);
}
.danger:hover
/* .danger:focus */
 {
  --checkbox_stroke_color: var(--zdt_checkbox_danger_stroke_border);
}
.checkeddanger {
  --checkbox_checked_stroke_color: var(--zdt_checkbox_danger_stroke_border);
}

.checkedprimaryLabel,
.checkeddangerLabel {
  color: var(--checkbox_checked_active_color);
}
.activeprimaryLabel:hover
/* .activeprimaryLabel:focus  */
{
  --label_text_color: var(--zdt_checkbox_label_primary_text);
}
.checkedprimaryLabel {
  --checkbox_checked_active_color: var(--zdt_checkbox_primary_stroke_border);
}
.activedangerLabel:hover
/* .activedangerLabel:focus  */
{
  --label_text_color: var(--zdt_checkbox_label_danger_text);
}
.checkeddangerLabel {
  --checkbox_checked_active_color: var(--zdt_checkbox_danger_stroke_border);
}
.disabled {
  opacity: 0.7
}
@keyframes tickAnimate {
  0% {
    stroke-dashoffset: 40;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes lineAnimate {
  0% {
    transform: scaleX(0);
  }
  100% {
    transform: scaleX(1);
  }
}