Skip to content

Commit

Permalink
feat!: add comprehensive Django support to inputs (#376)
Browse files Browse the repository at this point in the history
  • Loading branch information
@greatislander
greatislander committed Jun 2, 2020
1 parent f9c5b56 commit 675b165
Show file tree
Hide file tree
Showing 46 changed files with 908 additions and 492 deletions.
1 change: 1 addition & 0 deletions src/assets/images/chevron-down--disabled.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions src/assets/images/chevron-down--error.svg
View file
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions src/assets/scripts/Pinecone/Dialog/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,7 @@ class Dialog {
innerHtml += `<p id="q-${unique + 1}">${this.config.question}</p>`;
}
if ( this.config.input && this.config.inputLabel ) {
dialog.classList.add( 'form' );
innerHtml += '<div class="input-group">';
innerHtml += `<label for="${this.config.input}">${this.config.inputLabel}</label>`;
if ( this.config.inputDescription ) {
Expand Down
4 changes: 2 additions & 2 deletions src/assets/scripts/Pinecone/NestedCheckbox/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ class NestedCheckbox {
this.inputId = this.input.id;
this.customCheckbox = false;
this.value = this.input.getAttribute( 'value' );
this.label = this.input.nextElementSibling;
this.label = this.container.querySelector( `label[for="${this.inputId}"]` );
this.subInputs = subInputs;
this.subGroup = this.container.querySelector( '.input-group__descendant' );
this.config = {
Expand Down Expand Up @@ -52,7 +52,7 @@ class NestedCheckbox {
supplementaryLabel.classList.add( 'screen-reader-text' );
supplementaryLabel.hidden = false;
}
this.input.parentNode.insertBefore( customCheckbox, this.input );
this.label.parentNode.insertBefore( customCheckbox, this.label );
this.input.classList.add( 'screen-reader-text' );
this.input.setAttribute( 'aria-hidden', 'true' );
this.label.hidden = true;
Expand Down
4 changes: 1 addition & 3 deletions src/assets/scripts/pinecone.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,9 +44,7 @@ if ( showFilters && hideFilters && filterContainer ) {
const nestedCheckboxContainers = document.querySelectorAll( '.input-group__parent > li' );
if ( 0 < nestedCheckboxContainers.length ) {
Array.prototype.forEach.call( nestedCheckboxContainers, container => {
const input = Array.prototype.filter.call( container.children, function ( child ) {
return child.matches( 'input' );
} ).shift();
const input = container.querySelector( '.input--parent' );
const subInputs = container.querySelectorAll( '.input-group__descendant input' );
if ( 0 < subInputs.length ) {
new Pinecone.NestedCheckbox( container, input, subInputs );
Expand Down
89 changes: 42 additions & 47 deletions src/assets/styles/components/_filter-sort.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,9 +33,9 @@
}

.filters {
display: none;

@include breakpoint-down(md) {
display: none;

[id^="deselect"] {
--color: var(--off-white);
--outline-color: var(--off-white);
Expand All @@ -60,6 +60,11 @@
}

.accordion--filter-list {
.accordion__content > .input-group li ul {
margin-top: rem(12);
padding-left: rem(30);
}

@include breakpoint-down(md) {
.accordion__heading {
--border-width: #{rem(1)};
Expand Down Expand Up @@ -122,7 +127,7 @@
margin-right: ($gutter * -1);
margin-top: rem(12);
padding-bottom: rem(6);
padding-left: rem(70);
padding-left: rem(40);
padding-top: rem(6);
width: calc(100% + #{($gutter * 2)});
}
Expand All @@ -148,11 +153,6 @@
top: rem(9);
}

.accordion__content > .input-group li ul {
margin-top: rem(12);
padding-left: rem(40);
}

.accordion__content > .input-group li [aria-expanded="false"] + ul {
display: none;
}
Expand Down Expand Up @@ -250,56 +250,51 @@
}

@include breakpoint-down(md) {
.filters {
input[type="checkbox"] + label::before,
[role="checkbox"]::before {
border-color: var(--off-white);
}
.filters .form {
--text-border-color-default: var(--grey-500);
--text-border-color-disabled: var(--grey-500);
--text-border-color-hover: var(--blue-300);
--text-border-color-focus: var(--off-white);
--text-border-color-error: var(--red-300);
--text-border-color-error-hover: var(--red-300);
--text-border-color-error-focus: var(--red-300);

--text-value-color-disabled: var(--grey-500);
--text-value-color-error: var(--red-500);

--text-background-color-disabled: var(--grey-200);
--input-group--error-color: var(--red-200);

--text-focus-box-shadow:
0 0 0 calc(1 * var(--border-width)) var(--parent-background-color),
0 0 0 calc(3 * var(--border-width)) var(--text-border-color-focus);

--text-error-focus-box-shadow:
0 0 0 calc(1 * var(--border-width)) var(--parent-background-color),
0 0 0 calc(3 * var(--border-width)) var(--text-border-color-error-hover);

--checkbox-radio-hover-color: var(--blue-300);
--checkbox-radio-active-color: var(--blue-400);
--checkbox-radio-border-color: var(--off-white);
--checkbox-radio-checked-background-color: var(--off-white);
--checkbox-radio-focus-border-color: var(--blue-300);
--checkbox-radio-focus-hover-background-color: default;

input[type="checkbox"]:hover + label::before,
[role="checkbox"]:hover::before {
border-color: var(--blue-300);
box-shadow: 0 0 0 rem(1) var(--blue-300) inset;
}

input[type="checkbox"]:focus + label::before,
[role="checkbox"]:focus::before {
border-color: var(--blue-300);
box-shadow:
0 0 0 rem(2) var(--dark-mint-500),
0 0 0 rem(4) var(--blue-300),
0 0 0 rem(1) var(--blue-300) inset;
}

input[type="checkbox"]:checked + label::before,
[role="checkbox"][aria-checked="true"]::before,
[role="checkbox"][aria-checked="mixed"]::before {
background: var(--off-white);
background-position: center;
background-repeat: no-repeat;
border-color: var(--off-white);
box-shadow: none;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 2"><path fill="%23000000" d="M0,1A1,1,0,0,0,1,2H7A1,1,0,0,0,7,0H1A1,1,0,0,0,0,1Z"/></svg>');
}

input[type="checkbox"]:checked + label::before,
input[type="checkbox"]:checked::before,
[role="checkbox"][aria-checked="true"]::before {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10.572" height="7.742" viewBox="0 0 10.572 7.742"><path d="M.681 3.812l3.148 2.931L9.864.708" fill="none" stroke="%23000000" stroke-linejoin="round" class="stroke" stroke-width="2"/></svg>');
}

[role="checkbox"][aria-checked="mixed"]::before {
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 2"><path fill="%23000000" d="M0,1A1,1,0,0,0,1,2H7A1,1,0,0,0,7,0H1A1,1,0,0,0,0,1Z"/></svg>');
background-size: rem(10) rem(2.5);
}

input[type="checkbox"]:checked:focus + label::before,
input[type="checkbox"]:checked:focus::before,
[role="checkbox"][aria-checked="true"]:focus::before {
border-color: var(--off-white);
box-shadow:
0 0 0 rem(2) var(--dark-mint-500),
0 0 0 rem(4) var(--blue-300);
0 0 0 calc(2 * var(--border-width)) var(--parent-background-color),
0 0 0 calc(4 * var(--border-width)) var(--checkbox-radio-focus-border-color);
}


}
}

Expand Down

0 comments on commit 675b165

Please sign in to comment.