vuestic-ui/dist/esm-node/VaListItemSection.css

Vue 3 UI Framework

:root,
:host {
  --va-list-width: 100%;
  /* Label */
  --va-list-label-text-align: center;
  --va-list-label-padding: 0.3rem 0;
  /* Item */
  --va-list-item-display: flex;
  --va-list-item-align-items: center;
  --va-list-item-width: 100%;
  --va-list-item-height: 100%;
  /* Item label */
  --va-list-item-label-color: #34495e;
  --va-list-item-label-display: -webkit-box;
  --va-list-item-label-box-orient: vertical;
  --va-list-item-label-overflow: hidden;
  --va-list-item-label-line-height: normal;
  --va-list-item-label-caption-font-size: 85%;
  --va-list-item-label-caption-color: #babfc2;
  /* Item Section */
  --va-list-item-section-display: flex;
  --va-list-item-section-icon-min-width: 1.5rem;
  --va-list-item-section-icon-align-items: center;
  --va-list-item-section-icon-justify-content: center;
  --va-list-item-section-icon-margin: 0.6rem 0.75rem;
  --va-list-item-section-icon-font-size: 1.25rem;
  --va-list-item-section-avatar-min-width: 3rem;
}
.va-list-item-section {
  display: flex;
  font-family: var(--va-font-family);
}
.va-list-item-section--main {
  min-width: 0;
  flex-direction: column;
  flex: 1 0;
}
.va-list-item-section--icon {
  min-width: var(--va-list-item-section-icon-min-width);
  align-items: var(--va-list-item-section-icon-align-items);
  justify-content: var(--va-list-item-section-icon-justify-content);
  margin: var(--va-list-item-section-icon-margin);
}
.va-list-item-section--icon .va-icon {
  font-size: var(--va-list-item-section-icon-font-size);
}
.va-list-item-section--avatar {
  min-width: var(--va-list-item-section-avatar-min-width);
}
.va-list-item-section + .va-list-item-section {
  margin-left: 0.5rem;
}
.va-list-item-section + .va-list-item-section--icon:last-child {
  margin-left: 1rem;
}