KE_main list

by sthag

HTML

<ul class="oynew-main-list oynew-flex-list">
  <li class="oynew-list-item">
    <div class="oynew-text-group">
      <span class="oynew-order-num">YZ########</span><br>
      <span class="oynew-text-description">created by <span class="oynew-user-name">user name</span></span>
    </div>
    <div class="oynew-text-group">
      <span class="oynew-order-name">list item name</span><br>
      <span class="oynew-text-description">on <span class="oynew-date">YYYY-MM-DD</span></span>
    </div>
    <div class="oynew-text-group text-end me-4">
      <span class="oynew-order-value">##.###,##&nbsp;€</span><br>
      <span class="oynew-text-description">order value</span>
    </div>
    <div class="oynew-icon-group">
      <span class="oynew-icon"><i class="bi bi-truck"></i></span>
      <span class="oynew-icon"><i class="bi bi-cart"></i></span>
    </div>
    <div class="oynew-order-action btn-group" role="group" aria-label="user actions">
      <button type="button" class="btn btn-primary">note</button>
      <button type="button" class="btn btn-primary">folder</button>
      <button type="button" class="btn btn-primary">archive</button>
    </div>
  </li>
  <li class="oynew-list-item done">
    <div class="oynew-text-group">
      <span class="oynew-order-num">YZ########</span><br>
      <span class="oynew-text-description">created by <span class="oynew-user-name">user name</span></span>
    </div>
    <div class="oynew-text-group">
      <span class="oynew-order-name">list item name</span><br>
      <span class="oynew-text-description">on <span class="oynew-date">YYYY-MM-DD</span></span>
    </div>
    <div class="oynew-text-group text-end me-4">
      <span class="oynew-order-value">##.###,##&nbsp;€</span><br>
      <span class="oynew-text-description">order value</span>
    </div>
    <span class="oynew-icon text-bg-success"><i class="bi bi-truck"></i></span>
    <div class="oynew-order-action btn-group" role="group" aria-label="user actions">
      <button...

SCSS

.oynew-main-list {
  margin: 0;
  padding: 0;
  list-style: none;

  > li {
    border-bottom: 2px solid #a9a9a9;

    &:last-child {
      border-bottom: 0;
    }

    > div:not(:last-child) {
      margin-right: 5px;
    }
  }
}

.oynew-list-item {
  cursor: pointer;
  padding: 10px;
}

.oynew-flex-list {
  .oynew-list-item {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;

    .oynew-icon,
    .oynew-icon-group,
    .oynew-order-action {
      align-self: center;
    }

    .oynew-icon-group {
      min-width: calc(3 * 42px);
    }

    > .oynew-icon {
      margin-right: 5px;
    }

    .oynew-order-action {
      margin-left: auto;
    }
  }

  .oynew-text-group {
    flex: 1 1 0;
  }

  .oynew-icon-group {
    flex: 0 1 auto;
  }

  .oynew-order-action {
    flex: 0;
  }
}

.oynew-grid-list {
  background-color: lightgrey;
  
  .oynew-list-item {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr minmax(42px, auto) min-content;
    
    > div {
      background-color: cornflowerblue;
    }
  }
}

.oynew-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr minmax(42px, auto) min-content;

  > div {
    margin: 10px;
    background-color: beige;
  }
}

.oynew-icon-group {
  position: relative;
  display: inline-flex;
  flex-direction: row-reverse;

  .oynew-icon {
    flex: 0 0 auto;
  }
}

.oynew-icon {
  background-color: red;
  width: 42px;
  height: 42px;
}

.btn-group,
.btn-group-vertical {
  position: relative;
  display: inline-flex;
  vertical-align: middle;

  >.btn {
    position: relative;
    flex: 1 1 auto;
  }
}