<div class="c-modal--side">
    <h3 class="c-modal--side__title">Filters</h3><button class="c-modal--side__close">×</button>
    <div class="c-modal--side__content">
        <!-- <p class="filters__inside__legend">Filters</p> -->
        <div class="o-stack--sm">
            <div class="c-field">
                <label for="facility" class="c-field__label">Facility</label>
                <!-- Input power select starts -->
                <!-- Plugin markup -->
                <div class="c-input--power-select 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 name</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="c-field">
                <label for="company" class="c-field__label">Company</label>
                <!-- Input power select starts -->
                <!-- Plugin markup -->
                <div class="c-input--power-select 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 company name</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="c-field">
                <label for="well" class="c-field__label">Well</label>
                <!-- Input power select starts -->
                <!-- Plugin markup -->
                <div class="c-input--power-select 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 well name</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="c-field">
                <label for="person" class="c-field__label">Person</label>
                <!-- Input power select starts -->
                <!-- Plugin markup -->
                <div class="c-input--power-select 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 person name</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="c-field">
                <label for="ordertype" class="c-field__label">Order Type</label>
                <!-- Input power select starts -->
                <!-- Plugin markup -->
                <div class="c-input--power-select 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">

                                <ul class="ember-power-select-multiple-options">
                                    <input type="search" id="ordertype" value="All Orders" tabindex="0" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false" aria-controls="ember-power-select-options-ember772" placeholder="" class="ember-power-select-trigger-multiple-input">
                                </ul>
                                <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="u-d-flex">
                <div class="c-field">
                    <label for="startdate" class="c-field__label">Start Date</label>
                    <!-- Input starts -->
                    <input type="text" class="c-input" id="startdate" placeholder="10/30/2019" value="">
                    <!-- Input ends -->
                </div>
                <span class="o-label u-width-50 u-align-self-center u-text-center">to</span>
                <div class="c-field">
                    <label for="startdate" class="c-field__label">End Date</label>
                    <!-- Input starts -->
                    <input type="text" class="c-input" id="startdate" placeholder="11/30/2019" value="">
                    <!-- Input ends -->
                </div>
            </div>
        </div>
    </div>
</div>
<div class="c-modal--side{{#if open}} is-open{{/if}}">
  <h3 class="c-modal--side__title">Filters</h3><button class="c-modal--side__close">×</button>
  <div class="c-modal--side__content">
    <!-- <p class="filters__inside__legend">Filters</p> -->
    <div class="o-stack--sm">
      {{> '@field' label="Facility" inputID="facility" placeholder="Type facility name" powerSelect="yes" empty="yes"}}
      {{> '@field' label="Company" inputID="company" placeholder="Type company name" powerSelect="yes" empty="yes"}}
      {{> '@field' label="Well" inputID="well" placeholder="Type well name" powerSelect="yes" empty="yes"}}
      {{> '@field' label="Person" inputID="person" placeholder="Type person name" powerSelect="yes" empty="yes"}}
      {{> '@field' label="Order Type" inputID="ordertype" value="All Orders" powerSelect="yes"}}
      <div class="u-d-flex">
        {{> '@field' label="Start Date" inputID="startdate" placeholder="10/30/2019"}}
        <span class="o-label u-width-50 u-align-self-center u-text-center">to</span>
        {{> '@field' label="End Date" inputID="startdate" placeholder="11/30/2019"}}
      </div>
    </div>
  </div>
</div>
/* No context defined for this component. */
  • Content:
    .c-modal {
      display: flex;
      position: fixed;
      z-index: 1000;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100%;
      margin: 0;
      overflow-y: scroll;
      background-color: rgba($color-brand-secondary-1000, 0.7);
    }
    
      .c-modal__container {
        width: 90vw;
        margin: auto;
        padding: $space-md;
        border-radius: $global-radius;
        background-color: $color-white;
    
        @include mq(600px) {
           width: 50vw;
        }
      }
    
      .c-modal__header {
        display: flex;
        align-items: center;
        padding-bottom: $space-unit;
        border-bottom: rem(1) solid $color-grey-500;
      }
    
        .c-modal__btn-close {
          min-width: auto;
          min-height: auto;
          margin-left: auto;
          padding: 0;
          border: 0;
          background: transparent;
          box-shadow: none;
          color: $color-text;
          font-size: $text-size-3;
    
          @include acthocus() {
            padding: 0;
            background: transparent;
            box-shadow: none;
            color: lighten($color-text, 20%);
          }
        }
    
    .c-modal--side {
      position: absolute;
      z-index: 100;
      top: 0;
      right: 0;
      bottom: 0;
      width: rem(308);
      min-height: 100vh;
      margin: 0;
      padding: $space-unit 0 $space-unit $space-xl;
      transform: translateX(rem(270));
      transition: $global-transition;
      border-left: rem(1) solid $color-grey-200;
      background-color: $color-grey-100;
      cursor: pointer;
    
      > * > * {
        margin-top: $space-unit;
      }
    
      &:hover {
        border-color: $color-grey-300;
        background-color: $color-brand-primary-0;
        box-shadow: rem(-2) 0 rem(1) 0 rgba($color-grey-900, 0.2);
      }
    
      &.is-open {
        padding: $space-lg;
        transform: translateX(0);
        border: 0;
        border-left: rem(1) solid $color-grey-300;
        background-color: $color-grey-0;
        box-shadow: rem(-3) 0 rem(2) 0 rgba($color-grey-900, 0.2);
        cursor: default;
    
        .c-modal--side__close {
          display: block;
          content: '×';
          position: absolute;
          top: 0;
          right: rem(308);
          width: rem(40);
          height: rem(40);
          margin: $space-xs;
          padding: 0 $space-xs;
          border: 0;
          border: rem(1) solid $color-grey-300;
          border-radius: 50%;
          background: none;
          background: $color-btn-background;
          font-size: 2rem;
          line-height: 1;
          cursor: pointer;
    
          &:hover {
            background: $color-btn-background-hover;
            color: darken($color-btn, 10%);
          }
        }
    
        > .c-modal--side__title {
          position: static;
          transform: none;
          font-size: $text-size-5;
          letter-spacing: normal;
          text-transform: capitalize;
        }
      }
    
    }
    
      .c-modal--side__title {
        position: sticky;
        top: 0;
        transform: translate(rem(-164), 25vh) rotate(-90deg);
        font-size: $text-size-7;
        letter-spacing: rem(1);
        text-transform: uppercase;
        @include text-preset-4--sm;
      }
    
      .c-modal--side__close {
        display: none;
      }
    
  • URL: /components/raw/modal/_modal.scss
  • Filesystem Path: components/_code-components/modal/_modal.scss
  • Size: 2.9 KB
  • Content:
    var sideModal = document.querySelectorAll('.c-modal--side');
    var sideClose = document.querySelectorAll('.c-modal--side__close');
    
    // Add open class by clicking the parent
    for (var i = 0, l = sideModal.length; i < l; i++) {
      sideModal[i].onclick = function() {
        this.classList.add('is-open');
        return false;
      }
    }
    
    // Remove open class of the parent
    for (var i = 0, l = sideClose.length; i < l; i++) {
      sideClose[i].onclick = function() {
        this.parentElement.classList.remove('is-open');
        event.stopPropagation();
        return false;
      }
    }
    
  • URL: /components/raw/modal/modal.js
  • Filesystem Path: components/_code-components/modal/modal.js
  • Size: 551 Bytes

There are no notes for this item.