<!-- Card list starts -->
<ul class="c-card-list">
    <!-- Card starts -->
    <li class="c-card o-stack--xs  c-card-list__item">
        <h4 class="c-card__name">
            <a href="#0" class="c-card-list__name-link">0202-WO-0002141</a>
        </h4>
        <a href="#0" class="c-card-list__company">Marathon - Eagle Ford</a>
        <div class="c-card-list__meta">
            <span class="c-card-list__types">Type 1, Other type</span>
            <div class="u-d-flex">
                <span class="c-card-list__items">45 items</span>
                <time class="c-card-list__date" datetime="2019-07-07">July 7, 2019</time>
            </div>
        </div>
    </li>
    <!-- Card ends -->
    <!-- Card starts -->
    <li class="c-card o-stack--xs  c-card-list__item">
        <h4 class="c-card__name">
            <a href="#0" class="c-card-list__name-link">0202-WO-0001345</a>
        </h4>
        <a href="#0" class="c-card-list__company">Universal Oil Services</a>
        <div class="c-card-list__meta">
            <span class="c-card-list__types"></span>
            <div class="u-d-flex">
                <span class="c-card-list__items">22 items</span>
                <time class="c-card-list__date" datetime="2019-07-07">July 7, 2019</time>
            </div>
        </div>
    </li>
    <!-- Card ends -->
    <!-- Card starts -->
    <li class="c-card o-stack--xs  c-card-list__item">
        <h4 class="c-card__name">
            <a href="#0" class="c-card-list__name-link">0202-WO-0003141</a>
        </h4>
        <a href="#0" class="c-card-list__company">MD America Energy</a>
        <div class="c-card-list__meta">
            <span class="c-card-list__types">Type 1, Other type</span>
            <div class="u-d-flex">
                <span class="c-card-list__items">94 items</span>
                <time class="c-card-list__date" datetime="2019-07-07">July 7, 2019</time>
            </div>
        </div>
    </li>
    <!-- Card ends -->
</ul>
<!-- Card list ends -->
<!-- Card list starts -->
<ul class="c-card-list{{#if managerDashboard}} c-card-list--manager-dashboard{{/if}}">
  {{#each card}}
    {{> '@cards--default' c-card-list="yes"}}
  {{/each}}
</ul>
<!-- Card list ends -->
{
  "card": [
    {
      "woNumber": 2141,
      "cardCompany": "Marathon - Eagle Ford",
      "productTypes": "Type 1, Other type",
      "numItems": 45
    },
    {
      "woNumber": 1345,
      "cardCompany": "Universal Oil Services",
      "numItems": 22
    },
    {
      "woNumber": 3141,
      "cardCompany": "MD America Energy",
      "productTypes": "Type 1, Other type",
      "numItems": 94
    }
  ]
}
  • Content:
    .c-card {
      padding: $space-unit;
      border-radius: $global-radius;
      background: $color-gradient--md;
      box-shadow: $global-box-shadow, inset 0 0 0 .08rem rgba($color-grey-900, 0.1);
    }
    
    .c-card-list__item {
    
      & + & {
        margin-top: $space-unit;
      }
    }
    
    .c-card-list__name-link {
      font-size: $text-size-7;
    }
    
    .c-card-list__company {
      text-decoration: underline;
      text-transform: uppercase;
      margin-top: $space-xs;
      font-size: $text-size-7;
    }
    
      .c-card-list__company-logo {
        width: $space-md;
        border-radius: 50%;
        vertical-align: middle;
        margin-right: $space-xxs;
      }
    
    .c-card-list__meta {
      margin-top: $space-lg;
      font-size: $text-size-7;
      color: $color-grey-600;
    }
      .c-card-list__types {
        display: block;
        margin: $space-xs 0;
      }
    
      .c-card-list__date {
        margin-left: auto;
      }
    
    // Manager Dashboard styles
    
    .c-card-container--manager-dashboard {
      background-color: $color-brand-primary-0;
      border-radius: $global-radius;
      box-shadow: inset 0 0 $space-xs rgba($color-brand-primary-800, 0.3);
    
      > *:first-child {
        background-color: $color-white;
        padding: $space-unit $space-xs 0 0;
        box-shadow: $space-xxs 0 $space-xxs -#{$space-xxs} rgba($color-brand-primary-800, 0.3);
      }
    
      > * {
        padding: $space-unit 0 0 $space-xs;
      }
    }
    
    
    .c-card-list--manager-dashboard {
      max-height: rem(900);
      padding: 0 rem(1);
      overflow-y: scroll;
    
      &::after {
        display: block;
        height: rem(4);
        content: '';
      }
    }
    
    
    
    ////////////////////////
    // Big link card styles
    ///////////////////////
    
    .c-card--big-link__item {
      transition: $global-transition;
    
      @include hocus() {
        flex-basis: 20%;
      }
    }
    
    .c-card--big-link {
      display: flex;
      position: relative;
      flex-direction: column;
      align-items: center;
      justify-content: space-evenly;
      min-width: rem(180);
      min-height: calc(10rem + 2vw);
      padding: 0;
      color: $color-white;
      text-decoration: none;
      background: $color-brand-primary;
    
      @include hocus() {
        color: $color-white;
        background: lighten($color-brand-primary, 5%);
        text-decoration: none;
    
        .c-card--big-link__description {
          z-index: 1;
          height: auto;
          padding: $space-unit;
        }
      }
    }
    
    .c-card--big-link__name {
      color: $color-white;
      font-size: $text-size-7;
      letter-spacing: rem(.5);
      text-align: center;
      text-transform: uppercase;
    }
    
    .c-card--big-link__description {
      position: absolute;
      top: 98.6%;
      right: 0;
      left: 0;
      height: 0;
      padding: 0 $space-unit;
      overflow: hidden;
      border-radius: 0 0 $space-xxxs $space-xxxs;
      background-color: darken($color-brand-primary, 10%);
      box-shadow: $global-box-shadow--md;
      color: $color-white;
      line-height: 1.3;
      transition: $global-transition;
    }
    
    .c-card--big-link--well {
      background: $color-well-analysis;
    
      @include hocus() {
        background: lighten($color-well-analysis, 5%);
      }
    
      .c-card--big-link__description {
        background-color: darken($color-well-analysis, 30%);
      }
    }
    
    .c-card--big-link--inventory {
      background: $color-current-inventory;
    
      @include hocus() {
        background: lighten($color-current-inventory, 5%);
      }
    
      .c-card--big-link__description {
        background-color: darken($color-current-inventory, 30%);
      }
    }
    
    .c-card--big-link--history {
      background: $color-order-history;
    
      @include hocus() {
        background: lighten($color-order-history, 5%);
      }
    
      .c-card--big-link__description {
        background-color: darken($color-order-history, 30%);
      }
    }
    
    .c-card--big-link--inspection {
      background: $color-inspection-reports;
    
      @include hocus() {
        background: lighten($color-inspection-reports, 5%);
      }
    
      .c-card--big-link__description {
        background-color: darken($color-inspection-reports, 30%);
      }
    }
    
    .c-card--big-link--reporting {
      background: $color-reporting;
    
      @include hocus() {
        background: lighten($color-reporting, 5%);
      }
    
      .c-card--big-link__description {
        background-color: darken($color-reporting, 20%);
      }
    }
    
  • URL: /components/raw/cards/_cards.scss
  • Filesystem Path: components/_code-components/cards/_cards.scss
  • Size: 3.9 KB

There are no notes for this item.