@zohodesk/dot/es/list/status/StatusListItem/StatusListItem.module.css

In this Library, we Provide Some Basic Components to Build Your Application

.list {
  color: var(--zdt_statuslistitem_list_text);
  font-size: var(--zd_font_size13) ;
  position: relative;
  list-style: none;
  min-height: var(--zd_size35) ;
  cursor: pointer;
}
[dir=ltr] .withBorder {
  border-left: 1px solid var(--zdt_statuslistitem_default_border);
}
[dir=rtl] .withBorder {
  border-right: 1px solid var(--zdt_statuslistitem_default_border);
}
[dir=ltr] .small {
  padding: var(--zd_size7) var(--zd_size3) var(--zd_size7) var(--zd_size5) ;
}
[dir=rtl] .small {
  padding: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size3) ;
}
.medium {
  padding: var(--zd_size7) var(--zd_size20) ;
}
.large {
  height: var(--zd_size48) ;
}
[dir=ltr] .large {
  padding: var(--zd_size10) var(--zd_size3) var(--zd_size10) var(--zd_size25) ;
}
[dir=rtl] .large {
  padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3) ;
}
.value,.multiLineValue {
  line-height: 1.5385;
}
.value {
  composes: dotted from '~@zohodesk/components/es/common/common.module.css';
}
.multiLineValue{
  word-break: break-word;
  composes: clamp from '~@zohodesk/components/es/common/common.module.css';
}
[dir=ltr] .withBorder.active {
  border-left-color: var(--zdt_statuslistitem_default_active_border);
}
[dir=rtl] .withBorder.active {
  border-right-color: var(--zdt_statuslistitem_default_active_border);
}

.default.hover, .default.effect:hover {
  background-color: var(--zdt_statuslistitem_default_effect_bg);
}
.primary.hover, .primary.effect:hover, .selected {
  background-color: var(--zdt_statuslistitem_primary_efffect_bg);
}
.secondary.hover, .secondary.effect:hover {
  background-color: var(--zdt_statuslistitem_secondary_effect_bg);
}
.list.active.default, .list.active.primary {
  background-color: var(--zdt_statuslistitem_primary_efffect_bg);
}
.list.active.secondary {
  background-color: var(--zdt_statuslistitem_secondary_effect_bg);
}
.secondary.hover,
.secondary.effect:hover,
.list.active.secondary {
  color: var(--zdt_statuslistitem_secondary_effect_text);
}
.tickIcon {
  color: var(--zdt_statuslistitem_tickicon);
  position: absolute;
  top:50% ;
  transform: translateY(-50%);
}
[dir=ltr] .tickIcon {
  right: var(--zd_size20) ;
}
[dir=rtl] .tickIcon {
  left: var(--zd_size20) ;
}
.tickIcon > i {
  display: block;
}
[dir=ltr] .active.withTick {
  padding-right: var(--zd_size39) ;
}
[dir=rtl] .active.withTick {
  padding-left: var(--zd_size39) ;
}
/* Status Type */
.statusType {
  width: var(--zd_size8) ;
  height: var(--zd_size8) ;
  border-radius: 50%;
}
[dir=ltr] .statusType {
  margin-right: var(--zd_size13) ;
}
[dir=rtl] .statusType {
  margin-left: var(--zd_size13) ;
}
.black {
  background-color: var(--zdt_statuslistitem_black_bg);
}
.orange {
  background-color: var(--zdt_statuslistitem_orange_bg);
}
.green {
  background-color: var(--zdt_statuslistitem_green_bg);
}