Input: Sub Options 

<section class="c-sub-options o-stack--sm">
    <section class="o-stack--xs">
        <h3 class="o-subheading">Select order status</h3>
        <div class="o-grid o-grid--auto--content">
            <!-- outline sm button starts -->
            <button class="c-btn c-btn--outline c-btn--sm">Pending</button>
            <!-- outline sm button ends -->
            <!-- outline sm button starts -->
            <button class="c-btn c-btn--outline c-btn--sm">In Transit</button>
            <!-- outline sm button ends -->
            <!-- outline sm button starts -->
            <button class="c-btn is-active c-btn--outline c-btn--sm">Completed</button>
            <!-- outline sm button ends -->
        </div>
    </section>
    <section class="o-stack--xs">
        <h3 class="o-subheading">Select type of transfer</h3>
        <div class="o-grid o-grid--auto">
            <!-- outline sm button starts -->
            <button class="c-btn c-btn--outline c-btn--sm">Rack to Rack</button>
            <!-- outline sm button ends -->
            <!-- outline sm button starts -->
            <button class="c-btn c-btn--outline c-btn--sm">Facility to Facility</button>
            <!-- outline sm button ends -->
            <!-- outline sm button starts -->
            <button class="c-btn c-btn--outline c-btn--sm">Rack and Company</button>
            <!-- outline sm button ends -->
            <!-- outline sm button starts -->
            <button class="c-btn is-active c-btn--outline c-btn--sm">Facility and Company</button>
            <!-- outline sm button ends -->
            <!-- outline sm button starts -->
            <button class="c-btn c-btn--outline c-btn--sm">Company to Company</button>
            <!-- outline sm button ends -->
        </div>
    </section>
    <section class="o-grid o-grid--auto">
        <div class="o-stack--xs">
            <label for="originating-company" class="o-label">Originating Company</label>
            <!-- Input power select starts -->
            <!-- Plugin markup -->
            <div class="c-input--power-select c-input--power-select--sm tag-field ember-view">
                <div class="ember-view">
                    <div class="ember-view">
                        <div aria-owns="ember-basic-dropdown-content-ember772" tabindex="-1" data-ebd-id="ember772-trigger" role="button" class="ember-power-select-trigger ember-power-select-multiple-trigger ember-basic-dropdown-trigger ember-view">
                            <span class="ember-power-select-placeholder">Type origin company</span>
                            <span class="ember-power-select-status-icon"></span>
                        </div>
                        <div style="display: none;" class="ember-basic-dropdown-content-placeholder"></div>
                    </div>
                </div>
            </div>
            <!-- Input power select ends -->
        </div>
        <div class="o-stack--xs">
            <label for="receiving-company" class="o-label">Destination Company</label>
            <!-- Input power select starts -->
            <!-- Plugin markup -->
            <div class="c-input--power-select c-input--power-select--sm tag-field ember-view">
                <div class="ember-view">
                    <div class="ember-view">
                        <div aria-owns="ember-basic-dropdown-content-ember772" tabindex="-1" data-ebd-id="ember772-trigger" role="button" class="ember-power-select-trigger ember-power-select-multiple-trigger ember-basic-dropdown-trigger ember-view">
                            <span class="ember-power-select-placeholder">Type destination company</span>
                            <span class="ember-power-select-status-icon"></span>
                        </div>
                        <div style="display: none;" class="ember-basic-dropdown-content-placeholder"></div>
                    </div>
                </div>
            </div>
            <!-- Input power select ends -->
        </div>
        <div class="o-stack--xs">
            <label for="originating-company" class="o-label">Originating Facility</label>
            <!-- Input power select starts -->
            <!-- Plugin markup -->
            <div class="c-input--power-select c-input--power-select--sm tag-field ember-view">
                <div class="ember-view">
                    <div class="ember-view">
                        <div aria-owns="ember-basic-dropdown-content-ember772" tabindex="-1" data-ebd-id="ember772-trigger" role="button" class="ember-power-select-trigger ember-power-select-multiple-trigger ember-basic-dropdown-trigger ember-view">
                            <span class="ember-power-select-placeholder">Type origin facility</span>
                            <span class="ember-power-select-status-icon"></span>
                        </div>
                        <div style="display: none;" class="ember-basic-dropdown-content-placeholder"></div>
                    </div>
                </div>
            </div>
            <!-- Input power select ends -->
        </div>
        <div class="o-stack--xs">
            <label for="destination-facility" class="o-label">Destination Facility</label>
            <!-- Input power select starts -->
            <!-- Plugin markup -->
            <div class="c-input--power-select c-input--power-select--sm tag-field ember-view">
                <div class="ember-view">
                    <div class="ember-view">
                        <div aria-owns="ember-basic-dropdown-content-ember772" tabindex="-1" data-ebd-id="ember772-trigger" role="button" class="ember-power-select-trigger ember-power-select-multiple-trigger ember-basic-dropdown-trigger ember-view">
                            <span class="ember-power-select-placeholder">Type facility</span>
                            <span class="ember-power-select-status-icon"></span>
                        </div>
                        <div style="display: none;" class="ember-basic-dropdown-content-placeholder"></div>
                    </div>
                </div>
            </div>
            <!-- Input power select ends -->
        </div>
    </section>
</section>
 
<section class="c-sub-options o-stack--sm">
  <section class="o-stack--xs">
    <h3 class="o-subheading">Select order status</h3>
    <div class="o-grid o-grid--auto--content">
      {{> '@buttons--outline' mod="outline" size="sm" btnText="Pending"}}
      {{> '@buttons--outline' mod="outline" size="sm" btnText="In Transit"}}
      {{> '@buttons--outline' mod="outline" size="sm" state="is-active" btnText="Completed"}}
    </div>
  </section>
  <section class="o-stack--xs">
    <h3 class="o-subheading">Select type of transfer</h3>
    <div class="o-grid o-grid--auto">
      {{> '@buttons--outline' mod="outline" size="sm" btnText="Rack to Rack"}}
      {{> '@buttons--outline' mod="outline" size="sm" btnText="Facility to Facility"}}
      {{> '@buttons--outline' mod="outline" size="sm" btnText="Rack and Company"}}
      {{> '@buttons--outline' mod="outline" size="sm" state="is-active" btnText="Facility and Company"}}
      {{> '@buttons--outline' mod="outline" size="sm" btnText="Company to Company"}}
    </div>
  </section>
  <section class="o-grid o-grid--auto">
    <div class="o-stack--xs">
      <label for="originating-company" class="o-label">Originating Company</label>
      {{> '@input--power-select' placeholder="Type origin company" size="sm" inputID="originating-company" empty="yes"}}
    </div>
    <div class="o-stack--xs">
      <label for="receiving-company" class="o-label">Destination Company</label>
      {{> '@input--power-select' placeholder="Type destination company" size="sm" inputID="destination-company" empty="yes"}}
    </div>
    <div class="o-stack--xs">
      <label for="originating-company" class="o-label">Originating Facility</label>
      {{> '@input--power-select' placeholder="Type origin facility" size="sm" inputID="originating-facility" empty="yes"}}
    </div>
    <div class="o-stack--xs">
      <label for="destination-facility" class="o-label">Destination Facility</label>
      {{> '@input--power-select' placeholder="Type facility" size="sm" inputID="destination-facility" empty="yes"}}
    </div>
  </section>
</section>
 
/* No context defined for this component. */
  • Content: 
    .c-input--power-select {
  min-height: $input-height;

  .ember-power-select-trigger {
    position: relative;
    border-radius: $global-radius;
    overflow-x: hidden;
    text-overflow: ellipsis;
    min-height: $input-height;
    padding: $space-xxs $space-md 0 $space-xs;

    .ember-power-select-trigger--active,
    .ember-power-select-trigger:focus {
      border: $input-borders;
    }
  }

  .ember-text-field {
    width: 100%;
  }

  .ember-power-select-multiple-options {
    display: flex;
    align-items: center;
    line-height: 2.3;
    overflow-x: auto;
  }

    .ember-power-select-multiple-option {
      display: flex;
      align-items: center;
      flex-direction: row-reverse;
      padding: 0 0 0 $space-xs;
      border-radius: $global-radius;
      background-color: $color-brand-primary-900;

      + .ember-power-select-multiple-option {
        margin-left: $space-xxxs;
      }
    }

      .option-name {
        padding-bottom: rem(1);
        color: $color-white;
        font-size: $text-size-7;
        white-space: nowrap;
      }

      .ember-power-select-multiple-remove-btn {
        padding: 0 $space-xs;
        color: $color-white;
        line-height: 1.8;
        cursor: pointer;
        opacity: 0.6;
        transition: $global-transition;

        &:hover {
          opacity: 1;
        }
      }

    .ember-power-select-trigger-multiple-input {
      height: auto;
      border: 0;
      padding: 0;
      width: 100%;
    }

    .ember-power-select-trigger-multiple-input:focus {
      margin: 0;
      padding: 0;
    }

    .ember-power-select-status-icon {
      border-width: rem(7) rem(5) 0;
      border-color: $color-grey-400 transparent transparent;
      right: $space-xs;
    }

    .ember-power-select-placeholder,
    .ember-power-select-selected-item {
      margin: 0;
      padding: 0 $space-unit 0 0;
    }

    .ember-power-select-placeholder {
      line-height: 2.2;
    }

    .ember-power-select-selected-item {
      padding: $space-xxxs $space-xs $space-xxxs 0;
    }
}

.c-input--power-select--sm {
  min-height: auto;

  .ember-power-select-trigger {
    height: auto;
    width: 100%;
    padding: 0 $space-xs;
    min-height: auto;
    display: flex;
    align-items: center;
  }

  .ember-text-field {
    height: auto;
    padding: $space-xs 0 $space-xs $space-xs;
  }

  .ember-power-select-placeholder,
  .ember-power-select-selected-item {
    margin: 0;
    padding: 0 $space-unit 0 0;
  }

  .ember-power-select-selected-item {
    padding: 0 $space-unit 0 $space-xs;
  }
}
  • URL: /components/raw/input/_input-power-select.scss
  • Filesystem Path: components/_code-components/input/_input-power-select.scss
  • Size: 2.6 KB
  • Content: 
    .c-input {
  width: 100%;
  height: $input-height;
  padding: $space-xs;
  border: $input-borders;
  border-radius: $global-radius;
}

.c-textarea {
  width: 100%;
  padding: $space-xs;
  border: $input-borders;
  border-radius: $global-radius;
}


.c-input--sm {
  width: auto;
  height: auto;
}

.c-input--btn {
  width: auto;
  height: auto;
  min-height: rem(36);
  padding: $space-sm $space-xs;
  border: rem(1) solid $color-btn-border;
  border-right: 0;
  border-radius: $global-radius 0 0 $global-radius;
  font-size: rem(14);

  + .c-btn {
    border-radius: 0 $global-radius $global-radius 0;
  }
}

// RANGE INPUT

.c-input-range {
  -webkit-appearance: none;
  width: 100%;
  height: auto;
  padding: $space-xs 0;
  border: 0;
}

  .c-input-range--age {
    padding: rem(6) 0 rem(2);
    min-height: rem(28);
  }

.c-input-range__value {
  font-weight: 600;
}

.c-input-range__extra {
  display: flex;
  justify-content: space-between;
  margin-top: -#{$space-xs};
  color: $color-grey-600;
  font-size: $text-size-7;
}

// INPUT WITH ADD NEW BUTTON
.c-input--add-new {
  display: flex;
  flex-direction: column;

  > .c-btn {
    margin-left: auto;
    padding: $space-xxxs 0 0;
    font-size: $text-size-8;
    min-height: auto;
  }
}



// Cross-Browser range styles

.c-input-range:focus {
  outline: none;
}
.c-input-range::-webkit-slider-runnable-track {
  width: 100%;
  height: rem(6);
  border: 0 solid rgba(0, 0, 0, 0);
  border-radius: rem(50);
  background: rgba($color-grey-400, 0.78);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(13, 13, 13, 0);
  cursor: pointer;
}
.c-input-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: rem(20);
  height: rem(20);
  margin-top: rem(-7);
  border: rem(1) solid rgba(0, 0, 0, 0.1);
  border-radius: rem(50);
  background: $color-grey-0;
  box-shadow: rem(1) rem(1) rem(3) rgba(0, 0, 0, 0.5), 0 0 rem(1) rgba(13, 13, 13, 0.5);
  cursor: pointer;
}
.c-input-range:focus::-webkit-slider-runnable-track {
  background: rgba(234, 234, 234, 0.78);
}
.c-input-range::-moz-range-track {
  width: 100%;
  height: rem(6);
  border: 0 solid rgba(0, 0, 0, 0);
  border-radius: rem(50);
  background: rgba($color-grey-400, 0.78);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(13, 13, 13, 0);
  cursor: pointer;
}
.c-input-range::-moz-range-thumb {
  width: rem(20);
  height: rem(20);
  border: rem(1) solid rgba(0, 0, 0, 0.1);
  border-radius: rem(50);
  background: $color-grey-0;
  box-shadow: rem(1) rem(1) rem(3) rgba(0, 0, 0, 0.5), 0 0 rem(1) rgba(13, 13, 13, 0.5);
  cursor: pointer;
}
.c-input-range::-ms-track {
  width: 100%;
  height: rem(6);
  border-color: transparent;
  background: transparent;
  color: transparent;
  cursor: pointer;
}
.c-input-range::-ms-fill-lower {
  border: 0 solid rgba(0, 0, 0, 0);
  border-radius: rem(50);
  background: rgba(122, 122, 122, 0.78);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0), 0 0 0 rgba(13, 13, 13, 0);
}
.c-input-range::-ms-fill-upper {
  border: 0 solid rgba(0, 0, 0, 0);
  border-radius: rem(50);
  background: rgba($color-grey-400, 0.78);
  box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}
.c-input-range::-ms-thumb {
  width: rem(20);
  height: rem(20);
  height: rem(6);
  border: rem(1) solid rgba(0, 0, 0, 0.1);
  border-radius: rem(50);
  background: $color-grey-0;
  box-shadow: rem(1) rem(1) rem(3) rgba(0, 0, 0, 0.5), 0 0 rem(1) rgba(13, 13, 13, 0.5);
  cursor: pointer;
}
.c-input-range:focus::-ms-fill-lower {
  background: rgba($color-grey-400, 0.78);
}
.c-input-range:focus::-ms-fill-upper {
  background: rgba($color-grey-400, 0.78);
}


// Quantity fix column input

.c-input--qty {
  width: rem(100);
  text-align: center;
}
  • URL: /components/raw/input/_input.scss
  • Filesystem Path: components/_code-components/input/_input.scss
  • Size: 3.7 KB
  • Content: 
    .c-sub-options,
.o-sub-details {
  padding: $space-unit;
  border-radius: $global-radius;
  background-color: lighten($color-grey-100, 1%);
  border: rem(1) solid $color-grey-300;
}
  • URL: /components/raw/input/_sub-options.scss
  • Filesystem Path: components/_code-components/input/_sub-options.scss
  • Size: 182 Bytes

There are no notes for this item.