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

Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development

/* css:lineheight-validation:ignore */
.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);

  /* line-height for multiline text */
  --listitem_multiline_lineheight: 1.5385;
}
[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';
}
.beforeChild{
  margin-inline-end: var(--zd_size10) ;
  height: calc(var(--listitem_font_size) * var(--listitem_multiline_lineheight));
}
  /* css:lineheight-validation:ignore */
.value, .multiLineValue {
  line-height: var(--listitem_multiline_lineheight);
}
.multiLineValue,.multiLine{
 composes: lineClamp from '../common/common.module.css';
}
.iconBox,
.leftAvatar,
.lhsBoxInner {
  composes: dflex from '../common/common.module.css';
}
.iconBox {
  width: var(--zd_size20) ;
  margin-inline-end: var(--zd_size10) ;
  text-align: center;
}
.iconBox,
.leftAvatar {
  font-size: 0 ;
}
.leftAvatar {
  margin: var(--listitem_avatar_margin);
}
.iconWrapper{
  height: calc(var(--listitem_font_size) * var(--listitem_multiline_lineheight));
}

.iconWrapper,
.lhsJustifyContent_start,
.lhsJustifyContent_center,
.lhsJustifyContent_end,
.beforeChild,
.titleBox {
  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';
}
.selfAlign_center{
  align-self: center;
}

.contentWrapper {
  composes: dflex flexrow from '../common/common.module.css';
  align-items: stretch;
  width: 100% ;
}
.alignLhsBox_end {
  align-items: flex-end;
}
.alignLhsBox_center {
  align-items: center;
}
.lhsBoxInner{
  height: 100% ;
  max-height: calc((var(--listitem_font_size) * var(--listitem_multiline_lineheight)) * 2 );
}
.defaultHover, .primaryHover, .dangerHover, .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);
}
.activedanger,
.dangerHover,
.dangerEffect:hover {
  --listitem_bg_color: var(--zdt_listitem_danger_bg);
  --listitem_highlight_bg_color: var(--zdt_listitem_danger_bg);
  --listitem_text_color: var(--zdt_listitem_danger_text)
}
.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, .activedanger, .activesecondary, .activedark {
  background-color: var(--listitem_active_bg_color);
}
.activedefault,
.activedefault:hover,
.activeprimary,
.activeprimary:hover {
  --listitem_active_bg_color: var(--zdt_listitem_primary_bg);
}
.activedanger,
.activedanger:hover {
  --listitem_active_bg_color: var(--zdt_listitem_danger_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);
  padding-block: var(--zd_size10) ;
  --listitem_font_size: var(--zd_font_size15);
}


.leftBox {
  composes: dflex flexcolumn from '../common/common.module.css';
}

.titleBox {
  align-items: stretch;
}