<section class="c-modal">
<div class="c-modal__container o-stack">
<header class="c-modal__header">
<h2 class="o-heading">Customize Columns</h2>
<button role="button" aria-label="Close modal" class="c-btn c-modal__btn-close">×</button>
</header>
<div class="c-modal__content">
<ul class="c-accordion">
<li class="c-accordion__item c-accordion__item--no-counter">
<button class="c-accordion__header is-open">
<span class="c-accordion__header-title">Anchor - Inbound order</span>
</button>
<div class="c-accordion__content">
<ul class="o-grid o-grid--auto">
<li>
<input type="checkbox" id="no1">
<label for="no1">Item 1</label>
</li>
<li>
<input type="checkbox" id="no2">
<label for="no2">Item 2</label>
</li>
<li>
<input type="checkbox" id="no3">
<label for="no3">Item 3</label>
</li>
<li>
<input type="checkbox" id="no4">
<label for="no4">Item 4</label>
</li>
<li>
<input type="checkbox" id="no5">
<label for="no5">Item 5</label>
</li>
<li>
<input type="checkbox" id="no6">
<label for="no6">Item 6</label>
</li>
<li>
<input type="checkbox" id="no7">
<label for="no7">Item 7</label>
</li>
<li>
<input type="checkbox" id="no8">
<label for="no8">Item 8</label>
</li>
<li>
<input type="checkbox" id="no9">
<label for="no9">Item 9</label>
</li>
<li>
<input type="checkbox" id="no10">
<label for="no10">Item 10</label>
</li>
<li>
<input type="checkbox" id="no11">
<label for="no11">Item 11</label>
</li>
<li>
<input type="checkbox" id="no12">
<label for="no12">Item 12</label>
</li>
<li>
<input type="checkbox" id="no13">
<label for="no13">Item 13</label>
</li>
<li>
<input type="checkbox" id="no14">
<label for="no14">Item 14</label>
</li>
<li>
<input type="checkbox" id="no15">
<label for="no15">Item 15</label>
</li>
<li>
<input type="checkbox" id="no16">
<label for="no16">Item 16</label>
</li>
</ul>
</div>
</li>
<li class="c-accordion__item c-accordion__item--no-counter">
<button class="c-accordion__header">
<span class="c-accordion__header-title">Additional data - Delivery order</span>
</button>
<div class="c-accordion__content">
<ul class="o-grid o-grid--auto">
<li>
<input type="checkbox" id="no1">
<label for="no1">Item 1</label>
</li>
<li>
<input type="checkbox" id="no2">
<label for="no2">Item 2</label>
</li>
<li>
<input type="checkbox" id="no3">
<label for="no3">Item 3</label>
</li>
<li>
<input type="checkbox" id="no4">
<label for="no4">Item 4</label>
</li>
<li>
<input type="checkbox" id="no5">
<label for="no5">Item 5</label>
</li>
<li>
<input type="checkbox" id="no6">
<label for="no6">Item 6</label>
</li>
<li>
<input type="checkbox" id="no7">
<label for="no7">Item 7</label>
</li>
<li>
<input type="checkbox" id="no8">
<label for="no8">Item 8</label>
</li>
<li>
<input type="checkbox" id="no9">
<label for="no9">Item 9</label>
</li>
<li>
<input type="checkbox" id="no10">
<label for="no10">Item 10</label>
</li>
<li>
<input type="checkbox" id="no11">
<label for="no11">Item 11</label>
</li>
<li>
<input type="checkbox" id="no12">
<label for="no12">Item 12</label>
</li>
<li>
<input type="checkbox" id="no13">
<label for="no13">Item 13</label>
</li>
<li>
<input type="checkbox" id="no14">
<label for="no14">Item 14</label>
</li>
<li>
<input type="checkbox" id="no15">
<label for="no15">Item 15</label>
</li>
<li>
<input type="checkbox" id="no16">
<label for="no16">Item 16</label>
</li>
</ul>
</div>
</li>
<li class="c-accordion__item c-accordion__item--no-counter">
<button class="c-accordion__header">
<span class="c-accordion__header-title">Additional data - Work order</span>
</button>
<div class="c-accordion__content">
<ul class="o-grid o-grid--auto">
<li>
<input type="checkbox" id="no1">
<label for="no1">Item 1</label>
</li>
<li>
<input type="checkbox" id="no2">
<label for="no2">Item 2</label>
</li>
<li>
<input type="checkbox" id="no3">
<label for="no3">Item 3</label>
</li>
<li>
<input type="checkbox" id="no4">
<label for="no4">Item 4</label>
</li>
<li>
<input type="checkbox" id="no5">
<label for="no5">Item 5</label>
</li>
<li>
<input type="checkbox" id="no6">
<label for="no6">Item 6</label>
</li>
<li>
<input type="checkbox" id="no7">
<label for="no7">Item 7</label>
</li>
<li>
<input type="checkbox" id="no8">
<label for="no8">Item 8</label>
</li>
<li>
<input type="checkbox" id="no9">
<label for="no9">Item 9</label>
</li>
<li>
<input type="checkbox" id="no10">
<label for="no10">Item 10</label>
</li>
<li>
<input type="checkbox" id="no11">
<label for="no11">Item 11</label>
</li>
<li>
<input type="checkbox" id="no12">
<label for="no12">Item 12</label>
</li>
<li>
<input type="checkbox" id="no13">
<label for="no13">Item 13</label>
</li>
<li>
<input type="checkbox" id="no14">
<label for="no14">Item 14</label>
</li>
<li>
<input type="checkbox" id="no15">
<label for="no15">Item 15</label>
</li>
<li>
<input type="checkbox" id="no16">
<label for="no16">Item 16</label>
</li>
</ul>
</div>
</li>
</ul>
</div>
<div class="o-grid o-grid--auto--content">
<button type="submit" name="button" class="c-btn c-btn--primary">Save</button>
<a href="#0" class="c-btn">Cancel</a>
</div>
</div>
</section>
<section class="c-modal">
<div class="c-modal__container o-stack">
<header class="c-modal__header">
<h2 class="o-heading">Customize Columns</h2>
<button role="button" aria-label="Close modal" class="c-btn c-modal__btn-close">×</button>
</header>
<div class="c-modal__content">
{{> '@accordion--checkboxes'}}
</div>
<div class="o-grid o-grid--auto--content">
<button type="submit" name="button" class="c-btn c-btn--primary">Save</button>
<a href="#0" class="c-btn">Cancel</a>
</div>
</div>
</section>
{
"item": [
{
"itemTitle": "Anchor - Inbound order",
"noCounter": "no",
"open": "yes",
"checks": [
{
"checksLabel": "Item 1",
"checksId": "no1"
},
{
"checksLabel": "Item 2",
"checksId": "no2"
},
{
"checksLabel": "Item 3",
"checksId": "no3"
},
{
"checksLabel": "Item 4",
"checksId": "no4"
},
{
"checksLabel": "Item 5",
"checksId": "no5"
},
{
"checksLabel": "Item 6",
"checksId": "no6"
},
{
"checksLabel": "Item 7",
"checksId": "no7"
},
{
"checksLabel": "Item 8",
"checksId": "no8"
},
{
"checksLabel": "Item 9",
"checksId": "no9"
},
{
"checksLabel": "Item 10",
"checksId": "no10"
},
{
"checksLabel": "Item 11",
"checksId": "no11"
},
{
"checksLabel": "Item 12",
"checksId": "no12"
},
{
"checksLabel": "Item 13",
"checksId": "no13"
},
{
"checksLabel": "Item 14",
"checksId": "no14"
},
{
"checksLabel": "Item 15",
"checksId": "no15"
},
{
"checksLabel": "Item 16",
"checksId": "no16"
}
]
},
{
"itemTitle": "Additional data - Delivery order",
"noCounter": "no",
"checks": [
{
"checksLabel": "Item 1",
"checksId": "no1"
},
{
"checksLabel": "Item 2",
"checksId": "no2"
},
{
"checksLabel": "Item 3",
"checksId": "no3"
},
{
"checksLabel": "Item 4",
"checksId": "no4"
},
{
"checksLabel": "Item 5",
"checksId": "no5"
},
{
"checksLabel": "Item 6",
"checksId": "no6"
},
{
"checksLabel": "Item 7",
"checksId": "no7"
},
{
"checksLabel": "Item 8",
"checksId": "no8"
},
{
"checksLabel": "Item 9",
"checksId": "no9"
},
{
"checksLabel": "Item 10",
"checksId": "no10"
},
{
"checksLabel": "Item 11",
"checksId": "no11"
},
{
"checksLabel": "Item 12",
"checksId": "no12"
},
{
"checksLabel": "Item 13",
"checksId": "no13"
},
{
"checksLabel": "Item 14",
"checksId": "no14"
},
{
"checksLabel": "Item 15",
"checksId": "no15"
},
{
"checksLabel": "Item 16",
"checksId": "no16"
}
]
},
{
"itemTitle": "Additional data - Work order",
"noCounter": "no",
"checks": [
{
"checksLabel": "Item 1",
"checksId": "no1"
},
{
"checksLabel": "Item 2",
"checksId": "no2"
},
{
"checksLabel": "Item 3",
"checksId": "no3"
},
{
"checksLabel": "Item 4",
"checksId": "no4"
},
{
"checksLabel": "Item 5",
"checksId": "no5"
},
{
"checksLabel": "Item 6",
"checksId": "no6"
},
{
"checksLabel": "Item 7",
"checksId": "no7"
},
{
"checksLabel": "Item 8",
"checksId": "no8"
},
{
"checksLabel": "Item 9",
"checksId": "no9"
},
{
"checksLabel": "Item 10",
"checksId": "no10"
},
{
"checksLabel": "Item 11",
"checksId": "no11"
},
{
"checksLabel": "Item 12",
"checksId": "no12"
},
{
"checksLabel": "Item 13",
"checksId": "no13"
},
{
"checksLabel": "Item 14",
"checksId": "no14"
},
{
"checksLabel": "Item 15",
"checksId": "no15"
},
{
"checksLabel": "Item 16",
"checksId": "no16"
}
]
}
]
}
.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.