<section class="c-modal">
<div class="c-modal__container o-stack--sm">
<header class="c-modal__header">
<h2 class="o-heading">Schedule report</h2> <button role="button" aria-label="Close modal" class="c-btn c-modal__btn-close">×</button>
</header>
<div class="c-modal__content o-stack--sm o-grid">
<div class="o-stack--xs">
<h3 class="o-heading--sm">Recipients</h3>
<!-- Input starts -->
<input type="text" class="c-input" placeholder="Type email addresses" value="">
<!-- Input ends -->
</div>
<div class="o-stack--xs">
<h3 class="o-heading--sm">Frecuency</h3>
<div class="o-stack--xs">
<div class="o-grid o-grid--auto--content">
<!-- Input button outline starts -->
<span class="c-input--btn-outline">
<input type="checkbox" id="month">
<label class="c-btn c-btn--outline" for="month">Monthly</label>
</span>
<!-- Input button outline ends -->
<!-- Input button outline starts -->
<span class="c-input--btn-outline">
<input type="checkbox" id="day">
<label class="c-btn c-btn--outline is-active" for="day">Weekly</label>
</span>
<!-- Input button outline ends -->
<!-- Input button outline starts -->
<span class="c-input--btn-outline">
<input type="checkbox" id="onetime">
<label class="c-btn c-btn--outline" for="onetime">One time</label>
</span>
<!-- Input button outline ends -->
</div>
<div class="c-sub-options o-grid o-grid--auto--sm">
<!-- Input button outline starts -->
<span class="c-input--btn-outline">
<input type="checkbox" id="mon">
<label class="c-btn c-btn--outline c-btn--sm is-active" for="mon">Monday</label>
</span>
<!-- Input button outline ends -->
<!-- Input button outline starts -->
<span class="c-input--btn-outline">
<input type="checkbox" id="tue">
<label class="c-btn c-btn--outline c-btn--sm" for="tue">Tuesday</label>
</span>
<!-- Input button outline ends -->
<!-- Input button outline starts -->
<span class="c-input--btn-outline">
<input type="checkbox" id="wen">
<label class="c-btn c-btn--outline c-btn--sm is-active" for="wen">Wednesday</label>
</span>
<!-- Input button outline ends -->
<!-- Input button outline starts -->
<span class="c-input--btn-outline">
<input type="checkbox" id="thr">
<label class="c-btn c-btn--outline c-btn--sm" for="thr">Thursday</label>
</span>
<!-- Input button outline ends -->
<!-- Input button outline starts -->
<span class="c-input--btn-outline">
<input type="checkbox" id="fri">
<label class="c-btn c-btn--outline c-btn--sm is-active" for="fri">Friday</label>
</span>
<!-- Input button outline ends -->
</div>
</div>
</div>
<div class="o-stack--xs">
<h3 class="o-heading--sm">Report type</h3>
<div class="o-grid o-grid--auto--content o-hover-tip__container">
<div class="o-hover-tip">
<!-- Input button outline starts -->
<span class="c-input--btn-outline">
<input type="checkbox" id="accum">
<label class="c-btn c-btn--outline c-btn--sm" for="accum">Accumulative</label>
</span>
<!-- Input button outline ends -->
<div class="o-hover-tip__content o-body-text--sm u-width-75">From the start date specified on the template, to the day it is being sent.</div>
</div>
<div class="o-hover-tip">
<!-- Input button outline starts -->
<span class="c-input--btn-outline">
<input type="checkbox" id="fixed">
<label class="c-btn c-btn--outline is-active c-btn--sm" for="fixed">Fixed</label>
</span>
<!-- Input button outline ends -->
<div class="o-hover-tip__content o-body-text--sm o-grid__start-col--2 u-width-75">From the specified periedo of the report, ex. Frequency Daily and you select Friday, the report would be from friday to friday, not including the previous data.</div>
</div>
</div>
</div>
<div class="o-grid o-grid--auto--content">
<!-- Input button outline starts -->
<span class="c-input--btn-outline">
<input type="checkbox" id="expire">
<label class="c-btn c-btn--outline c-btn--sm" for="expire">Add expiration date</label>
</span>
<!-- Input button outline ends -->
</div>
</div>
<div class="o-grid o-grid--auto--content u-mt-3">
<button type="submit" name="button" class="c-btn c-btn--primary">Save changes</button>
<a href="#0" class="c-btn">Cancel</a>
</div>
</div>
</section>
<section class="c-modal">
<div class="c-modal__container o-stack--sm">
<header class="c-modal__header">
<h2 class="o-heading">Schedule report</h2> <button role="button" aria-label="Close modal" class="c-btn c-modal__btn-close">×</button>
</header>
<div class="c-modal__content o-stack--sm o-grid">
<div class="o-stack--xs">
<h3 class="o-heading--sm">Recipients</h3>
{{> '@input' placeholder="Type email addresses"}}
</div>
<div class="o-stack--xs">
<h3 class="o-heading--sm">Frecuency</h3>
<div class="o-stack--xs">
<div class="o-grid o-grid--auto--content">
{{> '@input--btn-outline' inputID="month" labelText="Monthly"}}
{{> '@input--btn-outline' inputID="day" labelText="Weekly" extraClass="is-active"}}
{{> '@input--btn-outline' inputID="onetime" labelText="One time"}}
</div>
<div class="c-sub-options o-grid o-grid--auto--sm">
{{> '@input--btn-outline' inputID="mon" labelText="Monday" extraClass="c-btn--sm is-active"}}
{{> '@input--btn-outline' inputID="tue" labelText="Tuesday" extraClass="c-btn--sm"}}
{{> '@input--btn-outline' inputID="wen" labelText="Wednesday" extraClass="c-btn--sm is-active"}}
{{> '@input--btn-outline' inputID="thr" labelText="Thursday" extraClass="c-btn--sm"}}
{{> '@input--btn-outline' inputID="fri" labelText="Friday" extraClass="c-btn--sm is-active"}}
</div>
</div>
</div>
<div class="o-stack--xs">
<h3 class="o-heading--sm">Report type</h3>
<div class="o-grid o-grid--auto--content o-hover-tip__container">
<div class="o-hover-tip">
{{> '@input--btn-outline' inputID="accum" labelText="Accumulative" extraClass="c-btn--sm"}}
<div class="o-hover-tip__content o-body-text--sm u-width-75">From the start date specified on the template, to the day it is being sent.</div>
</div>
<div class="o-hover-tip">
{{> '@input--btn-outline' inputID="fixed" labelText="Fixed" extraClass="is-active c-btn--sm"}}
<div class="o-hover-tip__content o-body-text--sm o-grid__start-col--2 u-width-75">From the specified periedo of the report, ex. Frequency Daily and you select Friday, the report would be from friday to friday, not including the previous data.</div>
</div>
</div>
</div>
<div class="o-grid o-grid--auto--content">
{{> '@input--btn-outline' inputID="expire" labelText="Add expiration date" extraClass="c-btn--sm"}}
</div>
</div>
<div class="o-grid o-grid--auto--content u-mt-3">
<button type="submit" name="button" class="c-btn c-btn--primary">Save changes</button>
<a href="#0" class="c-btn">Cancel</a>
</div>
</div>
</section>
/* 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.