<div class="c-modal--side is-open">
<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="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 is-open{{#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"}}
<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. */
.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;
}
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;
}
}
There are no notes for this item.