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

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

.varClass {
  /* listitem default variables */
  --listitem_font_size: var(--zd_font_size13);
  --listitem_text_color: var(--zdt_listitem_default_text);
  --listitem_padding: var(--zd_size9) var(--zd_size20);
  --listitem_border_width: 0;
  --listitem_border_color: var(--zdt_listitem_default_border);
  --listitem_bg_color: var(--zdt_listitem_default_bg);
  --listitem_active_bg_color: var(--zdt_listitem_primary_bg);
  --listitem_height: auto;
  --listitem_min_height: 0;

  /* listitem hover default variable */
  --listitem_highlight_bg_color: var(--zdt_listitem_highlight_bg);

  /* listitem tick icon default variables */
  --listitem_tickicon_color: var(--zdt_listitem_default_tickicon);
}[dir=ltr] .varClass {
  --listitem_avatar_margin: 0 var(--zd_size15) 0 0;
}[dir=rtl] .varClass {
  --listitem_avatar_margin: 0 0 0 var(--zd_size15);
}
.list {
  composes: varClass;
  position: relative;
  list-style: none;
  color: var(--listitem_text_color);
  font-size: var(--listitem_font_size);
  height: var(--listitem_height);
  min-height: var(--listitem_min_height);
  text-decoration: none;
  padding: var(--listitem_padding);
  border-width: var(--listitem_border_width);
  border-style: solid;
  border-color: var(--listitem_border_color);
  cursor: pointer;
}
.list, .default, .secondary {
  background-color: var(--listitem_bg_color);
}
[dir=ltr] .withBorder {
  --listitem_border_width: 0 0 0 1px /*rtl: 0 1px 0 0*/;
}
[dir=rtl] .withBorder {
  --listitem_border_width: 0 1px 0 0;
}
.active {
  --listitem_border_color: var(--zdt_listitem_active_border);
}
[dir=ltr] .small {
  --listitem_padding: var(--zd_size7) var(--zd_size3) var(--zd_size7) var(--zd_size5);
}
[dir=rtl] .small {
  --listitem_padding: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size3);
}
.medium {
  --listitem_padding: var(--zd_size7) var(--zd_size20);
  --listitem_min_height: var(--zd_size35);
}
.large {
  --listitem_min_height: var(--zd_size48);
}
[dir=ltr] .large {
  --listitem_padding: var(--zd_size10) var(--zd_size3) var(--zd_size10) var(--zd_size25);
}
[dir=rtl] .large {
  --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3);
}
.value,
.children,.secondaryValue {
  composes: dotted from '../common/common.module.css';
}
.value, .multiLineValue {
  line-height: 1.5385;
}
.multiLineValue,.multiLine{
 composes: lineClamp from '../common/common.module.css';
}
.iconBox {
  width: var(--zd_size20) ;
  text-align: center;
}
[dir=ltr] .iconBox {
  margin-right: var(--zd_size10) ;
}
[dir=rtl] .iconBox {
  margin-left: var(--zd_size10) ;
}
.iconBox,
.leftAvatar {
  font-size: 0 ;
}
.leftAvatar {
  margin: var(--listitem_avatar_margin);
}

.lhsJustifyContent_start,
.lhsJustifyContent_center,
.lhsJustifyContent_end {
  composes: dflex alignVertical from '../common/common.module.css';
}
.lhsJustifyContent_start {
  composes: justifyFstart from '../common/common.module.css';
}
.lhsJustifyContent_center {
  composes: alignHorizontal from '../common/common.module.css';
}
.lhsJustifyContent_end {
  composes: justifyFend from '../common/common.module.css';
}

.lhsBox {
  composes: dflex from '../common/common.module.css';
  align-self: stretch;
}
.lhsBox_small,
.lhsBox_medium,
.lhsBox_large{
  composes: varClass;
  --listitem_doubleline_content_height: calc(var(--listitem_font_size) * 2 );
  height: 100% ;
  composes: dflex alignVertical from '../common/common.module.css';
}
.lhsBox_small {
  max-height: calc(var(--listitem_doubleline_content_height) + var(--zd_size7)); /* 7px = listitem min-height - (top + bottom padding) - doubleLine content height */
}
.lhsBox_medium {
  max-height: calc(var(--listitem_doubleline_content_height) + var(--zd_size8)); /* 8px = listitem min-height - (top + bottom padding) - doubleLine content height */
}
.lhsBox_large {
  max-height: calc(var(--listitem_doubleline_content_height) + var(--zd_size15)); /* 15px = listitem min-height - (top + bottom padding) - doubleLine content height */
}
.defaultHover, .primaryHover, .secondaryHover, .darkHover {
  background-color: var(--listitem_highlight_bg_color);
}
.activewithBorder {
  --listitem_border_color: var(--zdt_listitem_active_border);
}
[dir=ltr] .activewithBorder {
  --listitem_border_width: 0 0 0 1px /*rtl: 0 1px 0 0*/;
}
[dir=rtl] .activewithBorder {
  --listitem_border_width: 0 1px 0 0;
}

.defaultHover,
.defaultEffect:hover
/* .defaultEffect:focus  */
{
  --listitem_bg_color: var(--zdt_listitem_highlight_bg);
}
.primaryHover,
.primaryEffect:hover
/* .primaryEffect:focus */
 {
  --listitem_bg_color: var(--zdt_listitem_primary_bg);
  --listitem_highlight_bg_color: var(--zdt_listitem_primary_bg);
}
.secondaryHover,
.secondaryEffect:hover
/* .secondaryEffect:focus  */
{
  --listitem_bg_color: var(--zdt_listitem_secondary_bg);
  --listitem_highlight_bg_color: var(--zdt_listitem_secondary_bg);
  --listitem_text_color: var(--zdt_listitem_secondary_text);
}
.darkHover,
.darkEffect:hover
/* .darkEffect:focus */
 {
  --listitem_bg_color: var(--zdt_listitem_dark_effect_bg);
  --listitem_highlight_bg_color: var(--zdt_listitem_dark_effect_bg);
}
.activedefault, .activeprimary, .activesecondary, .activedark {
  background-color: var(--listitem_active_bg_color);
}
.activedefault,
.activedefault:hover,
.activeprimary,
.activeprimary:hover {
  --listitem_active_bg_color: var(--zdt_listitem_primary_bg);
}
.activesecondary {
  --listitem_active_bg_color: var(--zdt_listitem_secondary_bg);
  --listitem_text_color: var(--zdt_listitem_secondary_text);
}
.dark {
  --listitem_bg_color: var(--zdt_listitem_dark_bg);
  --listitem_text_color: var(--zdt_listitem_dark_text);
}
.activedark {
  --listitem_active_bg_color: var(--zdt_listitem_dark_active_bg);
}
.secondaryField{
  color:var(--zdt_listitem_secondaryfield_text);
  font-size: var(--zd_font_size12) ;
  line-height: 1.25;
}

.tickIcon,
.defaultTick,
.darkTick {
  position: absolute;
  color: var(--listitem_tickicon_color);
  top:50% ;
  font-size: 0 ;
}

.tickIcon, .defaultTick, .darkTick {
  transform: translateY(-50%);
}

[dir=ltr] .tickIcon, [dir=ltr] .defaultTick, [dir=ltr] .darkTick {
  right: var(--zd_size20) ;
}

[dir=rtl] .tickIcon, [dir=rtl] .defaultTick, [dir=rtl] .darkTick {
  left: var(--zd_size20) ;
}
.defaultTick {
  --listitem_tickicon_color: var(--zdt_listitem_default_tickicon);
}
.darkTick {
  --listitem_tickicon_color: var(--zdt_listitem_dark_tickicon);
}
.defaultTick > i {
  display: block;
}
[dir=ltr] .smallwithTick {
  --listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7) var(--zd_size5);
}
[dir=rtl] .smallwithTick {
  --listitem_padding: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size39);
}
[dir=ltr] .mediumwithTick {
  --listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7) var(--zd_size20);
}
[dir=rtl] .mediumwithTick {
  --listitem_padding: var(--zd_size7) var(--zd_size20) var(--zd_size7) var(--zd_size39);
}
[dir=ltr] .largewithTick {
  --listitem_padding: var(--zd_size10) var(--zd_size39) var(--zd_size10) var(--zd_size25);
}
[dir=rtl] .largewithTick {
  --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size39);
}
.responsiveHeight {
  --listitem_min_height: var(--zd_size45);
  --listitem_font_size: var(--zd_font_size15);
  padding-top: var(--zd_size10) ;
  padding-bottom: var(--zd_size10) ;
}