<!-- Input button outline starts -->
<span class="c-input--btn-outline">
  <input type="checkbox" id="example">
  <label class="c-btn c-btn--outline" for="example">Label text</label>
</span>
<!-- Input button outline ends -->
<!-- Input button outline starts -->
<span class="c-input--btn-outline{{#if extraClassContainer}} {{extraClassContainer}}{{/if}}">
  <input type="checkbox" id="{{inputID}}">
  <label class="c-btn c-btn--outline{{#if extraClass}} {{extraClass}}{{/if}}" for="{{inputID}}">{{labelText}}</label>
</span>
<!-- Input button outline ends -->
{
  "labelText": "Label text",
  "inputID": "example"
}
  • 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.