Inventory list

HTML
View
Context
Assets
Info
Notes


    
      

        
        <ul class="c-list--inventory o-stack--xs">
    <li class="c-list--inventory__item">
        <header class="c-list--inventory__item__header">
            <h3 class="c-list--inventory__item__title">
                2-1/16&quot; IJ 10rd EUE Tubing
            </h3>
            <div class="c-list--inventory__item__qty">
                <strong class="c-list--inventory__item__qty-number">4</strong> Items
            </div>
        </header>
        <div class="c-inventory-progress__container">
            <div style="width: 100%;" class="c-inventory-progress__bar c-inventory-progress__bar--100 c-inventory-progress__bar--new">
                <div class="c-inventory-progress__info">
                    <span class="c-inventory-progress__qty">4</span>
                    <span class="c-inventory-progress__condition">new</span>
                </div>
            </div>
        </div>
        <!-- Table inventory starts -->
        <div class="c-table__wrapper">
            <button class="c-table--inventory__configure-columns c-btn c-btn--icon c-btn--icon--hidden-text c-btn--icon--right c-btn--link c-btn--link--no-underline">
    <span class="c-btn--icon__text">Configure Columns</span>
    <svg class="o-icon o-icon--md" aria-hidden="true">
      <use href="#gear"></use>
    </svg>
  </button>
            <table class="c-table c-table--inventory">
                <thead class="c-table__header">
                    <tr class="c-table__header__row">
                        <th class="c-table__header__item">Units</th>
                        <th class="c-table__header__item">Company</th>
                        <th class="c-table__header__item">Initial order</th>
                        <th class="c-table__header__item">Condition</th>
                        <th class="c-table__header__item">Grade</th>
                        <th class="c-table__header__item">Thread</th>
                        <th class="c-table__header__item">Length</th>
                        <th class="c-table__header__item">Rod Mfr.</th>
                        <th class="c-table__header__item">Guide</th>
                        <th class="c-table__header__item">Guide size</th>
                        <th class="c-table__header__item">Guide per</th>
                        <th class="c-table__header__item">Guide type</th>
                        <th class="c-table__header__item">Guide polymer</th>
                        <th class="c-table__header__item">Guide Mfr.</th>
                        <th class="c-table__header__item">Tags</th>
                    </tr>
                </thead>
                <tbody class="c-table__body">
                    <tr class="c-table__body__row">
                        <td class="c-table__body__item">2</td>
                        <td class="c-table__body__item">WildHorse Resources</td>
                        <td class="c-table__body__item">0102-IBOL-0002836</td>
                        <td class="c-table__body__item">Used Uninspected</td>
                        <td class="c-table__body__item">N/A</td>
                        <td class="c-table__body__item">API</td>
                        <td class="c-table__body__item">6</td>
                        <td class="c-table__body__item">N/A</td>
                        <td class="c-table__body__item">Slick</td>
                        <td class="c-table__body__item">N/A</td>
                        <td class="c-table__body__item">N/A</td>
                        <td class="c-table__body__item">N/A</td>
                        <td class="c-table__body__item">N/A</td>
                        <td class="c-table__body__item">N/A</td>
                        <td class="c-table__body__item">N/A</td>
                    </tr>
                    <tr class="c-table__body__row">
                        <td class="c-table__body__item">2</td>
                        <td class="c-table__body__item">WildHorse Resources</td>
                        <td class="c-table__body__item">0102-IBOL-0002836</td>
                        <td class="c-table__body__item">Used Uninspected</td>
                        <td class="c-table__body__item">N/A</td>
                        <td class="c-table__body__item">API</td>
                        <td class="c-table__body__item">6</td>
                        <td class="c-table__body__item">N/A</td>
                        <td class="c-table__body__item">Slick</td>
                        <td class="c-table__body__item">N/A</td>
                        <td class="c-table__body__item">N/A</td>
                        <td class="c-table__body__item">N/A</td>
                        <td class="c-table__body__item">N/A</td>
                        <td class="c-table__body__item">N/A</td>
                        <td class="c-table__body__item">N/A</td>
                    </tr>
                    <tr class="c-table__body__row">
                        <td class="c-table__body__item">2</td>
                        <td class="c-table__body__item">WildHorse Resources</td>
                        <td class="c-table__body__item">0102-IBOL-0002836</td>
                        <td class="c-table__body__item">Used Uninspected</td>
                        <td class="c-table__body__item">N/A</td>
                        <td class="c-table__body__item">API</td>
                        <td class="c-table__body__item">6</td>
                        <td class="c-table__body__item">N/A</td>
                        <td class="c-table__body__item">Slick</td>
                        <td class="c-table__body__item">N/A</td>
                        <td class="c-table__body__item">N/A</td>
                        <td class="c-table__body__item">N/A</td>
                        <td class="c-table__body__item">N/A</td>
                        <td class="c-table__body__item">N/A</td>
                        <td class="c-table__body__item">N/A</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <!-- Table inventory ends -->

    </li>
    <li class="c-list--inventory__item">
        <header class="c-list--inventory__item__header">
            <h3 class="c-list--inventory__item__title">
                1-1/4&quot; x 6&#x27; Fiberglass Pony Rod
            </h3>
            <div class="c-list--inventory__item__qty">
                <strong class="c-list--inventory__item__qty-number">9</strong> Items
            </div>
        </header>
        <div class="c-inventory-progress__container">
            <div style="width: 78%;" class="c-inventory-progress__bar c-inventory-progress__bar--78 c-inventory-progress__bar--visual--clean--inhibit">
                <div class="c-inventory-progress__info">
                    <span class="c-inventory-progress__qty">7</span>
                    <span class="c-inventory-progress__condition">Visual / Clean / Inhibit</span>
                </div>
            </div>
            <div style="width: 22%;" class="c-inventory-progress__bar c-inventory-progress__bar--22 c-inventory-progress__bar--used-uninspected">
                <div class="c-inventory-progress__info">
                    <span class="c-inventory-progress__qty">2</span>
                    <span class="c-inventory-progress__condition">Used Uninspected</span>
                </div>
            </div>
        </div>
        <!-- Table inventory starts -->
        <div class="c-table__wrapper">
            <button class="c-table--inventory__configure-columns c-btn c-btn--icon c-btn--icon--hidden-text c-btn--icon--right c-btn--link c-btn--link--no-underline">
    <span class="c-btn--icon__text">Configure Columns</span>
    <svg class="o-icon o-icon--md" aria-hidden="true">
      <use href="#gear"></use>
    </svg>
  </button>
            <table class="c-table c-table--inventory">
                <thead class="c-table__header">
                    <tr class="c-table__header__row">
                        <th class="c-table__header__item">Units</th>
                        <th class="c-table__header__item">Company</th>
                        <th class="c-table__header__item">Initial order</th>
                        <th class="c-table__header__item">Condition</th>
                        <th class="c-table__header__item">Grade</th>
                        <th class="c-table__header__item">Thread</th>
                        <th class="c-table__header__item">Length</th>
                        <th class="c-table__header__item">Rod Mfr.</th>
                        <th class="c-table__header__item">Guide</th>
                        <th class="c-table__header__item">Guide size</th>
                        <th class="c-table__header__item">Guide per</th>
                        <th class="c-table__header__item">Guide type</th>
                        <th class="c-table__header__item">Guide polymer</th>
                        <th class="c-table__header__item">Guide Mfr.</th>
                        <th class="c-table__header__item">Tags</th>
                    </tr>
                </thead>
                <tbody class="c-table__body">
                    <tr class="c-table__body__row">
                        <td class="c-table__body__item">2</td>
                        <td class="c-table__body__item">WildHorse Resources</td>
                        <td class="c-table__body__item">0102-IBOL-0002836</td>
                        <td class="c-table__body__item">Used Uninspected</td>
                        <td class="c-table__body__item">N/A</td>
                        <td class="c-table__body__item">API</td>
                        <td class="c-table__body__item">6</td>
                        <td class="c-table__body__item">N/A</td>
                        <td class="c-table__body__item">Slick</td>
                        <td class="c-table__body__item">N/A</td>
                        <td class="c-table__body__item">N/A</td>
                        <td class="c-table__body__item">N/A</td>
                        <td class="c-table__body__item">N/A</td>
                        <td class="c-table__body__item">N/A</td>
                        <td class="c-table__body__item">N/A</td>
                    </tr>
                    <tr class="c-table__body__row">
                        <td class="c-table__body__item">2</td>
                        <td class="c-table__body__item">WildHorse Resources</td>
                        <td class="c-table__body__item">0102-IBOL-0002836</td>
                        <td class="c-table__body__item">Used Uninspected</td>
                        <td class="c-table__body__item">N/A</td>
                        <td class="c-table__body__item">API</td>
                        <td class="c-table__body__item">6</td>
                        <td class="c-table__body__item">N/A</td>
                        <td class="c-table__body__item">Slick</td>
                        <td class="c-table__body__item">N/A</td>
                        <td class="c-table__body__item">N/A</td>
                        <td class="c-table__body__item">N/A</td>
                        <td class="c-table__body__item">N/A</td>
                        <td class="c-table__body__item">N/A</td>
                        <td class="c-table__body__item">N/A</td>
                    </tr>
                    <tr class="c-table__body__row">
                        <td class="c-table__body__item">2</td>
                        <td class="c-table__body__item">WildHorse Resources</td>
                        <td class="c-table__body__item">0102-IBOL-0002836</td>
                        <td class="c-table__body__item">Used Uninspected</td>
                        <td class="c-table__body__item">N/A</td>
                        <td class="c-table__body__item">API</td>
                        <td class="c-table__body__item">6</td>
                        <td class="c-table__body__item">N/A</td>
                        <td class="c-table__body__item">Slick</td>
                        <td class="c-table__body__item">N/A</td>
                        <td class="c-table__body__item">N/A</td>
                        <td class="c-table__body__item">N/A</td>
                        <td class="c-table__body__item">N/A</td>
                        <td class="c-table__body__item">N/A</td>
                        <td class="c-table__body__item">N/A</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <!-- Table inventory ends -->

    </li>
    <li class="c-list--inventory__item">
        <header class="c-list--inventory__item__header">
            <h3 class="c-list--inventory__item__title">
                3/4&quot; x 8&#x27; Pony Rod
            </h3>
            <div class="c-list--inventory__item__qty">
                <strong class="c-list--inventory__item__qty-number">103</strong> Items
            </div>
        </header>
        <div class="c-inventory-progress__container">
            <div style="width: 2%;" class="c-inventory-progress__bar c-inventory-progress__bar--2 c-inventory-progress__bar--inspected-1">
                <div class="c-inventory-progress__info">
                    <span class="c-inventory-progress__qty">2</span>
                    <span class="c-inventory-progress__condition">Inspected #1</span>
                </div>
            </div>
            <div style="width: 98%;" class="c-inventory-progress__bar c-inventory-progress__bar--98 c-inventory-progress__bar--used-uninspected">
                <div class="c-inventory-progress__info">
                    <span class="c-inventory-progress__qty">101</span>
                    <span class="c-inventory-progress__condition">Used Uninspected</span>
                </div>
            </div>
        </div>
        <!-- Table inventory starts -->
        <div class="c-table__wrapper">
            <button class="c-table--inventory__configure-columns c-btn c-btn--icon c-btn--icon--hidden-text c-btn--icon--right c-btn--link c-btn--link--no-underline">
    <span class="c-btn--icon__text">Configure Columns</span>
    <svg class="o-icon o-icon--md" aria-hidden="true">
      <use href="#gear"></use>
    </svg>
  </button>
            <table class="c-table c-table--inventory">
                <thead class="c-table__header">
                    <tr class="c-table__header__row">
                        <th class="c-table__header__item">Units</th>
                        <th class="c-table__header__item">Company</th>
                        <th class="c-table__header__item">Initial order</th>
                        <th class="c-table__header__item">Condition</th>
                        <th class="c-table__header__item">Grade</th>
                        <th class="c-table__header__item">Thread</th>
                        <th class="c-table__header__item">Length</th>
                        <th class="c-table__header__item">Rod Mfr.</th>
                        <th class="c-table__header__item">Guide</th>
                        <th class="c-table__header__item">Guide size</th>
                        <th class="c-table__header__item">Guide per</th>
                        <th class="c-table__header__item">Guide type</th>
                        <th class="c-table__header__item">Guide polymer</th>
                        <th class="c-table__header__item">Guide Mfr.</th>
                        <th class="c-table__header__item">Tags</th>
                    </tr>
                </thead>
                <tbody class="c-table__body">
                    <tr class="c-table__body__row">
                        <td class="c-table__body__item">2</td>
                        <td class="c-table__body__item">WildHorse Resources</td>
                        <td class="c-table__body__item">0102-IBOL-0002836</td>
                        <td class="c-table__body__item">Used Uninspected</td>
                        <td class="c-table__body__item">N/A</td>
                        <td class="c-table__body__item">API</td>
                        <td class="c-table__body__item">6</td>
                        <td class="c-table__body__item">N/A</td>
                        <td class="c-table__body__item">Slick</td>
                        <td class="c-table__body__item">N/A</td>
                        <td class="c-table__body__item">N/A</td>
                        <td class="c-table__body__item">N/A</td>
                        <td class="c-table__body__item">N/A</td>
                        <td class="c-table__body__item">N/A</td>
                        <td class="c-table__body__item">N/A</td>
                    </tr>
                    <tr class="c-table__body__row">
                        <td class="c-table__body__item">2</td>
                        <td class="c-table__body__item">WildHorse Resources</td>
                        <td class="c-table__body__item">0102-IBOL-0002836</td>
                        <td class="c-table__body__item">Used Uninspected</td>
                        <td class="c-table__body__item">N/A</td>
                        <td class="c-table__body__item">API</td>
                        <td class="c-table__body__item">6</td>
                        <td class="c-table__body__item">N/A</td>
                        <td class="c-table__body__item">Slick</td>
                        <td class="c-table__body__item">N/A</td>
                        <td class="c-table__body__item">N/A</td>
                        <td class="c-table__body__item">N/A</td>
                        <td class="c-table__body__item">N/A</td>
                        <td class="c-table__body__item">N/A</td>
                        <td class="c-table__body__item">N/A</td>
                    </tr>
                    <tr class="c-table__body__row">
                        <td class="c-table__body__item">2</td>
                        <td class="c-table__body__item">WildHorse Resources</td>
                        <td class="c-table__body__item">0102-IBOL-0002836</td>
                        <td class="c-table__body__item">Used Uninspected</td>
                        <td class="c-table__body__item">N/A</td>
                        <td class="c-table__body__item">API</td>
                        <td class="c-table__body__item">6</td>
                        <td class="c-table__body__item">N/A</td>
                        <td class="c-table__body__item">Slick</td>
                        <td class="c-table__body__item">N/A</td>
                        <td class="c-table__body__item">N/A</td>
                        <td class="c-table__body__item">N/A</td>
                        <td class="c-table__body__item">N/A</td>
                        <td class="c-table__body__item">N/A</td>
                        <td class="c-table__body__item">N/A</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <!-- Table inventory ends -->

    </li>
    <li class="c-list--inventory__item">
        <header class="c-list--inventory__item__header">
            <h3 class="c-list--inventory__item__title">
                1-1/2&quot; Integral Joint Tubing
            </h3>
            <div class="c-list--inventory__item__qty">
                <strong class="c-list--inventory__item__qty-number">593</strong> Items
            </div>
        </header>
        <div class="c-inventory-progress__container">
            <div style="width: 59%;" class="c-inventory-progress__bar c-inventory-progress__bar--59 c-inventory-progress__bar--new">
                <div class="c-inventory-progress__info">
                    <span class="c-inventory-progress__qty">348</span>
                    <span class="c-inventory-progress__condition">new</span>
                </div>
            </div>
            <div style="width: 34%;" class="c-inventory-progress__bar c-inventory-progress__bar--34 c-inventory-progress__bar--used-uninspected">
                <div class="c-inventory-progress__info">
                    <span class="c-inventory-progress__qty">200</span>
                    <span class="c-inventory-progress__condition">Used Uninspected</span>
                </div>
            </div>
            <div style="width: 8%;" class="c-inventory-progress__bar c-inventory-progress__bar--8 c-inventory-progress__bar--rig-new">
                <div class="c-inventory-progress__info">
                    <span class="c-inventory-progress__qty">45</span>
                    <span class="c-inventory-progress__condition">Rig new</span>
                </div>
            </div>
        </div>
    </li>
    <li class="c-list--inventory__item">
        <header class="c-list--inventory__item__header">
            <h3 class="c-list--inventory__item__title">
                2-1/16&quot; IJ 10rd EUE Tubing
            </h3>
            <div class="c-list--inventory__item__qty">
                <strong class="c-list--inventory__item__qty-number">4</strong> Items
            </div>
        </header>
        <div class="c-inventory-progress__container">
            <div style="width: 100%;" class="c-inventory-progress__bar c-inventory-progress__bar--100 c-inventory-progress__bar--new">
                <div class="c-inventory-progress__info">
                    <span class="c-inventory-progress__qty">4</span>
                    <span class="c-inventory-progress__condition">new</span>
                </div>
            </div>
        </div>
    </li>
    <li class="c-list--inventory__item">
        <header class="c-list--inventory__item__header">
            <h3 class="c-list--inventory__item__title">
                1-1/4&quot; x 6&#x27; Fiberglass Pony Rod
            </h3>
            <div class="c-list--inventory__item__qty">
                <strong class="c-list--inventory__item__qty-number">9</strong> Items
            </div>
        </header>
        <div class="c-inventory-progress__container">
            <div style="width: 78%;" class="c-inventory-progress__bar c-inventory-progress__bar--78 c-inventory-progress__bar--visual--clean--inhibit">
                <div class="c-inventory-progress__info">
                    <span class="c-inventory-progress__qty">7</span>
                    <span class="c-inventory-progress__condition">Visual / Clean / Inhibit</span>
                </div>
            </div>
            <div style="width: 22%;" class="c-inventory-progress__bar c-inventory-progress__bar--22 c-inventory-progress__bar--used-uninspected">
                <div class="c-inventory-progress__info">
                    <span class="c-inventory-progress__qty">2</span>
                    <span class="c-inventory-progress__condition">Used Uninspected</span>
                </div>
            </div>
        </div>
    </li>
    <li class="c-list--inventory__item">
        <header class="c-list--inventory__item__header">
            <h3 class="c-list--inventory__item__title">
                3/4&quot; x 8&#x27; Pony Rod
            </h3>
            <div class="c-list--inventory__item__qty">
                <strong class="c-list--inventory__item__qty-number">103</strong> Items
            </div>
        </header>
        <div class="c-inventory-progress__container">
            <div style="width: 2%;" class="c-inventory-progress__bar c-inventory-progress__bar--2 c-inventory-progress__bar--inspected-1">
                <div class="c-inventory-progress__info">
                    <span class="c-inventory-progress__qty">2</span>
                    <span class="c-inventory-progress__condition">Inspected #1</span>
                </div>
            </div>
            <div style="width: 98%;" class="c-inventory-progress__bar c-inventory-progress__bar--98 c-inventory-progress__bar--used-uninspected">
                <div class="c-inventory-progress__info">
                    <span class="c-inventory-progress__qty">101</span>
                    <span class="c-inventory-progress__condition">Used Uninspected</span>
                </div>
            </div>
        </div>
    </li>
    <li class="c-list--inventory__item">
        <header class="c-list--inventory__item__header">
            <h3 class="c-list--inventory__item__title">
                1-1/2&quot; Integral Joint Tubing
            </h3>
            <div class="c-list--inventory__item__qty">
                <strong class="c-list--inventory__item__qty-number">593</strong> Items
            </div>
        </header>
        <div class="c-inventory-progress__container">
            <div style="width: 59%;" class="c-inventory-progress__bar c-inventory-progress__bar--59 c-inventory-progress__bar--new">
                <div class="c-inventory-progress__info">
                    <span class="c-inventory-progress__qty">348</span>
                    <span class="c-inventory-progress__condition">new</span>
                </div>
            </div>
            <div style="width: 34%;" class="c-inventory-progress__bar c-inventory-progress__bar--34 c-inventory-progress__bar--used-uninspected">
                <div class="c-inventory-progress__info">
                    <span class="c-inventory-progress__qty">200</span>
                    <span class="c-inventory-progress__condition">Used Uninspected</span>
                </div>
            </div>
            <div style="width: 8%;" class="c-inventory-progress__bar c-inventory-progress__bar--8 c-inventory-progress__bar--rig-new">
                <div class="c-inventory-progress__info">
                    <span class="c-inventory-progress__qty">45</span>
                    <span class="c-inventory-progress__condition">Rig new</span>
                </div>
            </div>
        </div>
    </li>
    <li class="c-list--inventory__item">
        <header class="c-list--inventory__item__header">
            <h3 class="c-list--inventory__item__title">
                2-1/16&quot; IJ 10rd EUE Tubing
            </h3>
            <div class="c-list--inventory__item__qty">
                <strong class="c-list--inventory__item__qty-number">4</strong> Items
            </div>
        </header>
        <div class="c-inventory-progress__container">
            <div style="width: 100%;" class="c-inventory-progress__bar c-inventory-progress__bar--100 c-inventory-progress__bar--new">
                <div class="c-inventory-progress__info">
                    <span class="c-inventory-progress__qty">4</span>
                    <span class="c-inventory-progress__condition">new</span>
                </div>
            </div>
        </div>
    </li>
    <li class="c-list--inventory__item">
        <header class="c-list--inventory__item__header">
            <h3 class="c-list--inventory__item__title">
                1-1/4&quot; x 6&#x27; Fiberglass Pony Rod
            </h3>
            <div class="c-list--inventory__item__qty">
                <strong class="c-list--inventory__item__qty-number">9</strong> Items
            </div>
        </header>
        <div class="c-inventory-progress__container">
            <div style="width: 78%;" class="c-inventory-progress__bar c-inventory-progress__bar--78 c-inventory-progress__bar--visual--clean--inhibit">
                <div class="c-inventory-progress__info">
                    <span class="c-inventory-progress__qty">7</span>
                    <span class="c-inventory-progress__condition">Visual / Clean / Inhibit</span>
                </div>
            </div>
            <div style="width: 22%;" class="c-inventory-progress__bar c-inventory-progress__bar--22 c-inventory-progress__bar--used-uninspected">
                <div class="c-inventory-progress__info">
                    <span class="c-inventory-progress__qty">2</span>
                    <span class="c-inventory-progress__condition">Used Uninspected</span>
                </div>
            </div>
        </div>
    </li>
    <li class="c-list--inventory__item">
        <header class="c-list--inventory__item__header">
            <h3 class="c-list--inventory__item__title">
                3/4&quot; x 8&#x27; Pony Rod
            </h3>
            <div class="c-list--inventory__item__qty">
                <strong class="c-list--inventory__item__qty-number">103</strong> Items
            </div>
        </header>
        <div class="c-inventory-progress__container">
            <div style="width: 2%;" class="c-inventory-progress__bar c-inventory-progress__bar--2 c-inventory-progress__bar--inspected-1">
                <div class="c-inventory-progress__info">
                    <span class="c-inventory-progress__qty">2</span>
                    <span class="c-inventory-progress__condition">Inspected #1</span>
                </div>
            </div>
            <div style="width: 98%;" class="c-inventory-progress__bar c-inventory-progress__bar--98 c-inventory-progress__bar--used-uninspected">
                <div class="c-inventory-progress__info">
                    <span class="c-inventory-progress__qty">101</span>
                    <span class="c-inventory-progress__condition">Used Uninspected</span>
                </div>
            </div>
        </div>
    </li>
    <li class="c-list--inventory__item">
        <header class="c-list--inventory__item__header">
            <h3 class="c-list--inventory__item__title">
                1-1/2&quot; Integral Joint Tubing
            </h3>
            <div class="c-list--inventory__item__qty">
                <strong class="c-list--inventory__item__qty-number">593</strong> Items
            </div>
        </header>
        <div class="c-inventory-progress__container">
            <div style="width: 59%;" class="c-inventory-progress__bar c-inventory-progress__bar--59 c-inventory-progress__bar--new">
                <div class="c-inventory-progress__info">
                    <span class="c-inventory-progress__qty">348</span>
                    <span class="c-inventory-progress__condition">new</span>
                </div>
            </div>
            <div style="width: 34%;" class="c-inventory-progress__bar c-inventory-progress__bar--34 c-inventory-progress__bar--used-uninspected">
                <div class="c-inventory-progress__info">
                    <span class="c-inventory-progress__qty">200</span>
                    <span class="c-inventory-progress__condition">Used Uninspected</span>
                </div>
            </div>
            <div style="width: 8%;" class="c-inventory-progress__bar c-inventory-progress__bar--8 c-inventory-progress__bar--rig-new">
                <div class="c-inventory-progress__info">
                    <span class="c-inventory-progress__qty">45</span>
                    <span class="c-inventory-progress__condition">Rig new</span>
                </div>
            </div>
        </div>
    </li>
    <li class="c-list--inventory__item">
        <header class="c-list--inventory__item__header">
            <h3 class="c-list--inventory__item__title">
                2-1/16&quot; IJ 10rd EUE Tubing
            </h3>
            <div class="c-list--inventory__item__qty">
                <strong class="c-list--inventory__item__qty-number">4</strong> Items
            </div>
        </header>
        <div class="c-inventory-progress__container">
            <div style="width: 100%;" class="c-inventory-progress__bar c-inventory-progress__bar--100 c-inventory-progress__bar--new">
                <div class="c-inventory-progress__info">
                    <span class="c-inventory-progress__qty">4</span>
                    <span class="c-inventory-progress__condition">new</span>
                </div>
            </div>
        </div>
    </li>
    <li class="c-list--inventory__item">
        <header class="c-list--inventory__item__header">
            <h3 class="c-list--inventory__item__title">
                1-1/4&quot; x 6&#x27; Fiberglass Pony Rod
            </h3>
            <div class="c-list--inventory__item__qty">
                <strong class="c-list--inventory__item__qty-number">9</strong> Items
            </div>
        </header>
        <div class="c-inventory-progress__container">
            <div style="width: 78%;" class="c-inventory-progress__bar c-inventory-progress__bar--78 c-inventory-progress__bar--visual--clean--inhibit">
                <div class="c-inventory-progress__info">
                    <span class="c-inventory-progress__qty">7</span>
                    <span class="c-inventory-progress__condition">Visual / Clean / Inhibit</span>
                </div>
            </div>
            <div style="width: 22%;" class="c-inventory-progress__bar c-inventory-progress__bar--22 c-inventory-progress__bar--used-uninspected">
                <div class="c-inventory-progress__info">
                    <span class="c-inventory-progress__qty">2</span>
                    <span class="c-inventory-progress__condition">Used Uninspected</span>
                </div>
            </div>
        </div>
    </li>
    <li class="c-list--inventory__item">
        <header class="c-list--inventory__item__header">
            <h3 class="c-list--inventory__item__title">
                3/4&quot; x 8&#x27; Pony Rod
            </h3>
            <div class="c-list--inventory__item__qty">
                <strong class="c-list--inventory__item__qty-number">103</strong> Items
            </div>
        </header>
        <div class="c-inventory-progress__container">
            <div style="width: 2%;" class="c-inventory-progress__bar c-inventory-progress__bar--2 c-inventory-progress__bar--inspected-1">
                <div class="c-inventory-progress__info">
                    <span class="c-inventory-progress__qty">2</span>
                    <span class="c-inventory-progress__condition">Inspected #1</span>
                </div>
            </div>
            <div style="width: 98%;" class="c-inventory-progress__bar c-inventory-progress__bar--98 c-inventory-progress__bar--used-uninspected">
                <div class="c-inventory-progress__info">
                    <span class="c-inventory-progress__qty">101</span>
                    <span class="c-inventory-progress__condition">Used Uninspected</span>
                </div>
            </div>
        </div>
    </li>
    <li class="c-list--inventory__item">
        <header class="c-list--inventory__item__header">
            <h3 class="c-list--inventory__item__title">
                1-1/2&quot; Integral Joint Tubing
            </h3>
            <div class="c-list--inventory__item__qty">
                <strong class="c-list--inventory__item__qty-number">593</strong> Items
            </div>
        </header>
        <div class="c-inventory-progress__container">
            <div style="width: 59%;" class="c-inventory-progress__bar c-inventory-progress__bar--59 c-inventory-progress__bar--new">
                <div class="c-inventory-progress__info">
                    <span class="c-inventory-progress__qty">348</span>
                    <span class="c-inventory-progress__condition">new</span>
                </div>
            </div>
            <div style="width: 34%;" class="c-inventory-progress__bar c-inventory-progress__bar--34 c-inventory-progress__bar--used-uninspected">
                <div class="c-inventory-progress__info">
                    <span class="c-inventory-progress__qty">200</span>
                    <span class="c-inventory-progress__condition">Used Uninspected</span>
                </div>
            </div>
            <div style="width: 8%;" class="c-inventory-progress__bar c-inventory-progress__bar--8 c-inventory-progress__bar--rig-new">
                <div class="c-inventory-progress__info">
                    <span class="c-inventory-progress__qty">45</span>
                    <span class="c-inventory-progress__condition">Rig new</span>
                </div>
            </div>
        </div>
    </li>
</ul>


        <ul class="c-list--inventory o-stack--xs{{#if listClass}} {{listClass}}{{/if}}">
  {{#each item}}
    {{> '@list--inventory-item'}}
  {{/each}}
</ul>


        
            
            {
  "item": [
    {
      "itemTitle": "2-1/16\" IJ 10rd EUE Tubing",
      "qty": 4,
      "tableOpen": "yes",
      "progressBar": [
        {
          "itemCondition": "new",
          "percentage": 100,
          "qty": 4
        }
      ]
    },
    {
      "itemTitle": "1-1/4\" x 6' Fiberglass Pony Rod",
      "qty": 9,
      "tableOpen": "yes",
      "progressBar": [
        {
          "itemCondition": "Visual / Clean / Inhibit",
          "conditionClass": "visual--clean--inhibit",
          "qty": 7,
          "percentage": 78
        },
        {
          "itemCondition": "Used Uninspected",
          "conditionClass": "used-uninspected",
          "qty": 2,
          "percentage": 22
        }
      ]
    },
    {
      "itemTitle": "3/4\" x 8' Pony Rod",
      "qty": 103,
      "tableOpen": "yes",
      "progressBar": [
        {
          "itemCondition": "Inspected #1",
          "conditionClass": "inspected-1",
          "qty": 2,
          "percentage": 2
        },
        {
          "itemCondition": "Used Uninspected",
          "conditionClass": "used-uninspected",
          "qty": 101,
          "percentage": 98
        }
      ]
    },
    {
      "itemTitle": "1-1/2\" Integral Joint Tubing",
      "qty": 593,
      "progressBar": [
        {
          "itemCondition": "new",
          "qty": 348,
          "percentage": 59
        },
        {
          "itemCondition": "Used Uninspected",
          "conditionClass": "used-uninspected",
          "qty": 200,
          "percentage": 34
        },
        {
          "itemCondition": "Rig new",
          "conditionClass": "rig-new",
          "qty": 45,
          "percentage": 8
        }
      ]
    },
    {
      "itemTitle": "2-1/16\" IJ 10rd EUE Tubing",
      "qty": 4,
      "progressBar": [
        {
          "itemCondition": "new",
          "percentage": 100,
          "qty": 4
        }
      ]
    },
    {
      "itemTitle": "1-1/4\" x 6' Fiberglass Pony Rod",
      "qty": 9,
      "progressBar": [
        {
          "itemCondition": "Visual / Clean / Inhibit",
          "conditionClass": "visual--clean--inhibit",
          "qty": 7,
          "percentage": 78
        },
        {
          "itemCondition": "Used Uninspected",
          "conditionClass": "used-uninspected",
          "qty": 2,
          "percentage": 22
        }
      ]
    },
    {
      "itemTitle": "3/4\" x 8' Pony Rod",
      "qty": 103,
      "progressBar": [
        {
          "itemCondition": "Inspected #1",
          "conditionClass": "inspected-1",
          "qty": 2,
          "percentage": 2
        },
        {
          "itemCondition": "Used Uninspected",
          "conditionClass": "used-uninspected",
          "qty": 101,
          "percentage": 98
        }
      ]
    },
    {
      "itemTitle": "1-1/2\" Integral Joint Tubing",
      "qty": 593,
      "progressBar": [
        {
          "itemCondition": "new",
          "qty": 348,
          "percentage": 59
        },
        {
          "itemCondition": "Used Uninspected",
          "conditionClass": "used-uninspected",
          "qty": 200,
          "percentage": 34
        },
        {
          "itemCondition": "Rig new",
          "conditionClass": "rig-new",
          "qty": 45,
          "percentage": 8
        }
      ]
    },
    {
      "itemTitle": "2-1/16\" IJ 10rd EUE Tubing",
      "qty": 4,
      "progressBar": [
        {
          "itemCondition": "new",
          "percentage": 100,
          "qty": 4
        }
      ]
    },
    {
      "itemTitle": "1-1/4\" x 6' Fiberglass Pony Rod",
      "qty": 9,
      "progressBar": [
        {
          "itemCondition": "Visual / Clean / Inhibit",
          "conditionClass": "visual--clean--inhibit",
          "qty": 7,
          "percentage": 78
        },
        {
          "itemCondition": "Used Uninspected",
          "conditionClass": "used-uninspected",
          "qty": 2,
          "percentage": 22
        }
      ]
    },
    {
      "itemTitle": "3/4\" x 8' Pony Rod",
      "qty": 103,
      "progressBar": [
        {
          "itemCondition": "Inspected #1",
          "conditionClass": "inspected-1",
          "qty": 2,
          "percentage": 2
        },
        {
          "itemCondition": "Used Uninspected",
          "conditionClass": "used-uninspected",
          "qty": 101,
          "percentage": 98
        }
      ]
    },
    {
      "itemTitle": "1-1/2\" Integral Joint Tubing",
      "qty": 593,
      "progressBar": [
        {
          "itemCondition": "new",
          "qty": 348,
          "percentage": 59
        },
        {
          "itemCondition": "Used Uninspected",
          "conditionClass": "used-uninspected",
          "qty": 200,
          "percentage": 34
        },
        {
          "itemCondition": "Rig new",
          "conditionClass": "rig-new",
          "qty": 45,
          "percentage": 8
        }
      ]
    },
    {
      "itemTitle": "2-1/16\" IJ 10rd EUE Tubing",
      "qty": 4,
      "progressBar": [
        {
          "itemCondition": "new",
          "percentage": 100,
          "qty": 4
        }
      ]
    },
    {
      "itemTitle": "1-1/4\" x 6' Fiberglass Pony Rod",
      "qty": 9,
      "progressBar": [
        {
          "itemCondition": "Visual / Clean / Inhibit",
          "conditionClass": "visual--clean--inhibit",
          "qty": 7,
          "percentage": 78
        },
        {
          "itemCondition": "Used Uninspected",
          "conditionClass": "used-uninspected",
          "qty": 2,
          "percentage": 22
        }
      ]
    },
    {
      "itemTitle": "3/4\" x 8' Pony Rod",
      "qty": 103,
      "progressBar": [
        {
          "itemCondition": "Inspected #1",
          "conditionClass": "inspected-1",
          "qty": 2,
          "percentage": 2
        },
        {
          "itemCondition": "Used Uninspected",
          "conditionClass": "used-uninspected",
          "qty": 101,
          "percentage": 98
        }
      ]
    },
    {
      "itemTitle": "1-1/2\" Integral Joint Tubing",
      "qty": 593,
      "progressBar": [
        {
          "itemCondition": "new",
          "qty": 348,
          "percentage": 59
        },
        {
          "itemCondition": "Used Uninspected",
          "conditionClass": "used-uninspected",
          "qty": 200,
          "percentage": 34
        },
        {
          "itemCondition": "Rig new",
          "conditionClass": "rig-new",
          "qty": 45,
          "percentage": 8
        }
      ]
    }
  ]
}

File:

Content:


                                .c-list--inventory {
  margin-right: -#{$space-md};
  margin-left: -#{$space-md};
  padding: $space-md;
  border-radius: $global-radius;
  background-color: $color-grey-100;
}

.c-list--inventory__item {
  position: relative;
  list-style-type: none;

  .c-table__wrapper {
    display: none;
  }

  &.is-open {
    position: relative;
    display: grid;

    .c-inventory-progress__bar:first-child::before,
    .c-inventory-progress__bar:last-child::before {
      border-radius: 0;
    }

    .c-inventory-progress__info {
      display: none;
    }

    .c-table__wrapper {
      display: block;
    }

    .c-table__header__item:first-child,
    .c-table__header__item:last-child {
      border-radius: 0;
    }

    .c-list--inventory__item__qty {
      margin-right: $space-xl;
    }
  }
}

  .c-list--inventory__item__header {
    display: flex;
    justify-content: space-between;
    padding: $space-sm $space-xs;
    border: rem(0.5) solid $color-grey-300;
    border-radius: $global-radius $global-radius 0 0;
    background-color: $color-white;
    box-shadow: $global-box-shadow;
    cursor: pointer;
    transition: $global-transition;

    @include hocus() {
      box-shadow: 0 rem(1) rem(1.5) rem(-1) rgba($color-grey-900, 0.4),
                  0 rem(2) rem(1.5) rem(-1) rgba($color-grey-800, 0.4),
                  0 rem(3) rem(2) rem(-1) rgba($color-grey-800, 0.3),
                  0 rem(4) rem(2.5) rem(-1) rgba($color-grey-800, 0.25),
                  0 rem(5) rem(3.5) rem(-1) rgba($color-grey-700, 0.2),
                  0 rem(6) rem(4.5) 0 rgba($color-grey-700, 0.1),
                  0 rem(7) rem(5.5) 0 rgba($color-grey-600, 0.1),
                  0 rem(8) rem(6.5) 0 rgba($color-grey-600, 0.05);
    }
  }

  .c-list--inventory__item__header--transfer {
    display: grid;
    grid-template-columns: 25% 20% 2fr auto;
    grid-gap: $space-unit;
    grid-row-gap: $space-xs;
    border-radius: $global-radius;

    @include hocus() {
      box-shadow: 0 rem(1) rem(1.5) rem(-1) rgba($color-grey-900, 0.2),
                  0 rem(1.5) rem(1.5) rem(-1) rgba($color-grey-800, 0.2),
                  0 rem(2) rem(2) rem(-1) rgba($color-grey-800, 0.15),
                  0 rem(2.5) rem(2.5) rem(-1) rgba($color-grey-800, 0.1),
                  0 rem(3.5) rem(3.5) rem(-1) rgba($color-grey-700, 0.1),
                  0 rem(4.5) rem(4.5) 0 rgba($color-grey-700, 0.05),
                  0 rem(5.5) rem(5.5) 0 rgba($color-grey-600, 0.05),
                  0 rem(6.5) rem(6.5) 0 rgba($color-grey-600, 0.02);
    }

    .is-open > & {
      border-radius: $global-radius $global-radius 0 0;
    }
  }

    .c-list--inventory__item__product-name {
      grid-column: 2;
    }

    .c-list--inventory__item__product-size {
      grid-column: 3;
    }

    .c-list--inventory__item__title,
    .c-list--inventory__item__qty-number {
      font-weight: 600;
    }

    .c-list--inventory__item__title {
      grid-column: 1;
    }

    .c-list--inventory__item__qty {
      grid-column: 4;
      grid-row: 1;
    }

    .c-list--inventory__item__qty-number {
      color: $color-brand-secondary-700;
    }

  .c-inventory-progress__container {
    display: flex;
  }

    .c-inventory-progress__bar {
      transition: $global-transition;

      &::before {
        display: block;
        width: 100%;
        height: rem(4);
        background-color: red;
        content: '';
      }

      &:first-child {

        &::before {
          border-radius: 0 0 0 $global-radius;
        }
      }

      &:last-child {

        &::before {
          border-radius: 0 0 $global-radius 0;
        }
      }

      &:only-child {

        &::before {
          border-radius: 0 0 $global-radius $global-radius;
        }
      }
    }

      .c-inventory-progress__info {
        overflow: hidden;
        font-size: rem(14);
        white-space: nowrap;
      }

      .c-inventory-progress__condition {
        display: inline-block;

        &::first-letter {
          text-transform: uppercase;
        }
      }

    .c-inventory-progress__bar--8,
    .c-inventory-progress__bar--7,
    .c-inventory-progress__bar--6,
    .c-inventory-progress__bar--5,
    .c-inventory-progress__bar--4,
    .c-inventory-progress__bar--3,
    .c-inventory-progress__bar--2,
    .c-inventory-progress__bar--1,
    .c-inventory-progress__bar--0 {
      min-width: $space-unit;

      &::before {
        background-color: cyan;
      }

      > * {
        width: rem(1);
        opacity: 0;
        transition: $global-transition;
      }

      @include hocus() {
          min-width: 20%;

          > * {
            width: auto;
            opacity: 1;
        }
    }
  }

    @for $i from 1 through 100 {
    .c-inventory-progress__bar--#{$i} {
      width: 0% + $i;
    }
  }

  .c-table--inventory__configure-columns {
    position: absolute;
    top: 0;
    right: $space-unit;
    padding: 0;

    .o-icon {
      fill: $color-grey-800;
    }
  }

URL: /components/raw/list/_list-inventory.scss
Filesystem Path: components/_code-components/list/_list-inventory.scss
Size: 5 KB

Content:


                                .c-inventory-progress__bar::before {
 background-color:#dcdcdc
}
.c-inventory-progress__bar.c-inventory-progress__bar--yellow-band::before {
 background-color:#f8e71c
}
.c-inventory-progress__bar.c-inventory-progress__bar--single-yellow-ws::before {
 background:repeating-linear-gradient(45deg,#f8e71c,#f8e71c 1px,#fff 2px,#fff 4px)
}
.c-inventory-progress__bar.c-inventory-progress__bar--blue-band::before {
 background-color:#098fcd
}

.c-inventory-progress__bar.c-inventory-progress__bar--green-band::before {
 background-color:#2b7a19
}

.c-inventory-progress__bar.c-inventory-progress__bar--red-band::before {
 background-color:red
}

.c-inventory-progress__bar.c-inventory-progress__bar--single-white-ws::before {
 background:repeating-linear-gradient(45deg,#fff,#fff 1px,#dcdcdc 4px,#dcdcdc 4px)
}
.c-inventory-progress__bar.c-inventory-progress__bar--used-uninspected::before {
 background-color:#979797
}

.c-inventory-progress__bar.c-inventory-progress__bar--inspected-1::before {
 background-color:#f5a623
}

.c-inventory-progress__bar.c-inventory-progress__bar--reject::before {
 background-color:#979797
}

.c-inventory-progress__bar.c-inventory-progress__bar--new::before {
 background-color:#85a82d
}

URL: /components/raw/list/inventory-bar-colors.scss
Filesystem Path: components/_code-components/list/inventory-bar-colors.scss
Size: 1.2 KB

Handle: @list--inventory
Variants (5): Default , Inventory list , Card big link , Card big link list , Inventory Item
Preview:
- With layout
- Component only
Filesystem Path: components/_code-components/list/list--inventory.hbs
References (1): @list--inventory-item
Referenced by (1): @inventory

There are no notes for this item.