<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>
/* No context defined for this component. */
  • 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

There are no notes for this item.