';
innerHtml += `
`;
if ( this.config.inputDescription ) {
diff --git a/src/assets/scripts/Pinecone/NestedCheckbox/index.js b/src/assets/scripts/Pinecone/NestedCheckbox/index.js
index 402c94eb..adc0518b 100644
--- a/src/assets/scripts/Pinecone/NestedCheckbox/index.js
+++ b/src/assets/scripts/Pinecone/NestedCheckbox/index.js
@@ -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 = {
@@ -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;
diff --git a/src/assets/scripts/pinecone.js b/src/assets/scripts/pinecone.js
index 0cda6a63..2ec77ce8 100644
--- a/src/assets/scripts/pinecone.js
+++ b/src/assets/scripts/pinecone.js
@@ -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 );
diff --git a/src/assets/styles/components/_filter-sort.scss b/src/assets/styles/components/_filter-sort.scss
index bb89d40f..04cb67ba 100644
--- a/src/assets/styles/components/_filter-sort.scss
+++ b/src/assets/styles/components/_filter-sort.scss
@@ -33,9 +33,9 @@
}
.filters {
- display: none;
-
@include breakpoint-down(md) {
+ display: none;
+
[id^="deselect"] {
--color: var(--off-white);
--outline-color: var(--off-white);
@@ -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)};
@@ -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)});
}
@@ -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;
}
@@ -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,
');
}
- 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,
');
}
- [role="checkbox"][aria-checked="mixed"]::before {
- background-image: url('data:image/svg+xml;utf8,
');
- 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);
}
-
-
}
}
diff --git a/src/assets/styles/components/_input.scss b/src/assets/styles/components/_input.scss
index 08f342b0..472c17f8 100644
--- a/src/assets/styles/components/_input.scss
+++ b/src/assets/styles/components/_input.scss
@@ -1,20 +1,14 @@
-.input-group {
+.form {
--border-width: #{rem(1)};
-
- display: block;
- list-style: none;
- position: relative;
- width: auto;
-
--text-border-color-default: var(--grey-500);
- --text-border-color-disabled: var(--grey-400);
+ --text-border-color-disabled: var(--grey-300);
--text-border-color-hover: var(--blue-500);
--text-border-color-focus: var(--blue-500);
--text-border-color-error: var(--red-500);
--text-border-color-error-hover: var(--red-500);
--text-border-color-error-focus: var(--red-500);
- --text-value-color-disabled: var(--grey-400);
+ --text-value-color-disabled: var(--grey-500);
--text-value-color-error: var(--red-500);
--text-background-color-disabled: var(--grey-200);
@@ -62,7 +56,7 @@
0 0 0 calc(3 * var(--border-width)) var(--parent-background-color) inset;
}
-.input-group--inverse {
+.form--inverse {
--text-border-color-default: var(--grey-500);
--text-border-color-disabled: var(--grey-500);
--text-border-color-hover: var(--blue-300);
@@ -93,27 +87,54 @@
--checkbox-radio-focus-hover-background-color: default;
}
+.input-group {
+ display: block;
+ list-style: none;
+ position: relative;
+ width: auto;
+}
+
.input-group + .input-group {
- margin-top: rem(60);
+ margin-top: rem(45);
}
.input-group > * + * {
margin-top: rem(12);
}
-label {
- font-family: $font-family-serif;
- font-weight: $font-weight-bold;
- line-height: (24 / 16);
+label + input,
+label + textarea,
+label + select,
+.input-group__error,
+* + .helptext {
+ margin-top: rem(12);
}
-.input-group__description {
+input + label,
+textarea + label,
+select + label,
+.helptext + label {
+ margin-top: rem(60);
+}
+
+@import "inputs/label",
+ "inputs/input",
+ "inputs/textarea",
+ "inputs/select",
+ "inputs/checkbox",
+ "inputs/radio",
+ "inputs/submit";
+
+.input-group__description,
+.helptext {
+ display: block;
font-size: rem(14);
font-style: italic;
line-height: (24 / 14);
}
.input-group__error {
+ color: var(--input-group--error-color);
display: flex;
flex-direction: row;
font-family: $font-family-sans;
@@ -125,267 +146,3 @@ label {
margin-right: rem(4);
}
}
-
-.input-group--error {
- color: var(--input-group--error-color);
-}
-
-/*
-Text input and text areas.
-*/
-
-input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
-select,
-textarea {
- -moz-appearance: none;
- -webkit-appearance: none;
- appearance: none;
- border: solid var(--border-width) transparent;
- border-radius: rem(3.5);
- box-shadow: var(--text-default-box-shadow);
- display: block;
- font-family: $font-family-serif;
- font-size: rem(16);
- height: rem(40);
- line-height: (24 / 16);
- max-width: rem(268);
- outline: none;
- padding: rem(10) rem(10) rem(7);
- transition: border 0.1s ease-out, background-color 0.1s ease-out, box-shadow 0.1s ease-out;
- width: 100%;
-
- @media (prefers-reduced-motion: reduce) {
- transition: none;
- }
-}
-
-textarea {
- height: rem(118);
- max-width: rem(367);
- resize: none;
-}
-
-select:not([multiple]) {
- background-image: url("../images/chevron-down.svg");
- background-position: calc(100% - #{rem(8)}) center;
- background-repeat: no-repeat;
- background-size: 1.25em;
- line-height: normal;
- padding: rem(6.5) rem(40) rem(6) rem(10);
-
- &::-ms-expand {
- display: none;
- }
-
- &::-moz-focus-inner {
- outline: none;
- }
-
- &:-moz-focusring {
- color: transparent;
- text-shadow: 0 0 0 #000;
- }
-}
-
-.input-group--inverse input[type="text"],
-.input-group--inverse select:not([multiple]),
-.input-group--inverse textarea {
- border-color: var(--parent-background-color);
-}
-
-input[type="text"]:hover,
-textarea:hover,
-select:not([multiple]):hover {
- box-shadow: var(--text-hover-box-shadow);
-}
-
-.input-group--error input[type="text"],
-.input-group--error select:not([multiple]),
-.input-group--error textarea {
- box-shadow: var(--text-error-box-shadow);
- color: var(--text-value-color-error);
-}
-
-input[type="text"]:focus,
-textarea:focus,
-select:not([multiple]):focus,
-input[type="text"]:focus:hover,
-textarea:focus:hover,
-select:focus:hover {
- box-shadow: var(--text-focus-box-shadow);
-}
-
-select[disabled] {
- background-image: none;
-}
-
-select:not([multiple])[disabled],
-input[type="text"][disabled],
-textarea[disabled],
-input[type="text"][disabled]:hover,
-textarea[disabled]:hover,
-select:not([multiple])[disabled]:hover {
- background-color: var(--text-background-color-disabled);
- box-shadow: var(--text-disabled-box-shadow);
- color: var(--text-value-color-disabled);
-}
-
-.input-group--error input[type="text"]:hover,
-.input-group--error textarea:hover,
-.input-group--error select:not([multiple]):hover {
- box-shadow: var(--text-error-hover-box-shadow);
-}
-
-.input-group--error input[type="text"]:focus,
-.input-group--error textarea:focus,
-.input-group--error select:not([multiple]):focus {
- box-shadow: var(--text-error-focus-box-shadow);
-}
-
-/*
-Checkboxes and radios.
-*/
-
-input[type="checkbox"],
-input[type="radio"] {
- appearance: none;
- margin: 0;
-}
-
-[role="checkbox"] + input[type="checkbox"] {
- display: none;
-}
-
-label.label--radio,
-input[type="radio"] + label,
-label.label--checkbox,
-input[type="checkbox"] + label
-[role="checkbox"] {
- font-weight: $font-weight-normal;
-}
-
-input[type="radio"]::before,
-input[type="checkbox"]::before,
-[role="checkbox"]::before {
- border: rem(1) solid;
- border-color: var(--checkbox-radio-border-color);
- border-radius: rem(3);
- content: "";
- display: block;
- float: left;
- height: rem(18);
- margin: 0 rem(8) rem(-4) 0;
- transition: border 0.1s ease-out, background-color 0.1s ease-out, box-shadow 0.1s ease-out;
- width: rem(18);
-
- @media (prefers-reduced-motion: reduce) {
- transition: none;
- }
-}
-
-input[type="radio"]::before {
- border-radius: 100%;
-}
-
-input[type="radio"]::before:focus,
-input[type="checkbox"]::before:focus,
-[role="checkbox"]::before:focus {
- outline: none;
-}
-
-input[type="radio"]:disabled + label,
-input[type="checkbox"]:disabled + label {
- color: var(--text-value-color-disabled);
-}
-
-input[type="checkbox"]:checked::before,
-[role="checkbox"][aria-checked="true"]::before {
- background-image: url('data:image/svg+xml;utf8,
');
-}
-
-[role="checkbox"][aria-checked="mixed"]::before {
- background-image: url('data:image/svg+xml;utf8,
');
- background-size: rem(10) rem(2.5);
-}
-
-input[type="radio"]:hover::before,
-input[type="checkbox"]:hover::before,
-[role="checkbox"]:hover::before {
- background-color: var(--checkbox-radio-focus-hover-background-color);
- border-color: var(--checkbox-radio-hover-color);
- box-shadow: var(--checkbox-radio-hover-box-shadow);
-}
-
-input[type="radio"]:active::before,
-input[type="checkbox"]:active::before,
-[role="checkbox"]:active::before {
- background-color: var(--checkbox-radio-active-color);
- border-color: var(--checkbox-radio-hover-color);
- box-shadow: var(--checkbox-radio-hover-box-shadow);
-}
-
-input[type="radio"]:focus::before,
-input[type="checkbox"]:focus::before,
-[role="checkbox"]:focus::before {
- border-color: var(--checkbox-radio-focus-border-color);
- box-shadow: var(--checkbox-radio-focus-box-shadow);
-}
-
-input[type="checkbox"]:checked::before,
-[role="checkbox"][aria-checked="mixed"]::before,
-[role="checkbox"][aria-checked="true"]::before {
- background-color: var(--checkbox-radio-checked-background-color);
- background-position: center;
- background-repeat: no-repeat;
- border: rem(1) solid var(--checkbox-radio-checked-background-color);
-}
-
-input[type="radio"]:checked::before {
- background: var(--checkbox-radio-checked-background-color);
- border-color: var(--checkbox-radio-focus-border-color);
- box-shadow: var(--radio-checked-box-shadow);
-}
-
-input[type="radio"]:disabled::before,
-input[type="checkbox"]:disabled::before {
- border-color: var(--text-border-color-disabled);
-}
-
-input[type="radio"]:disabled:hover::before,
-input[type="checkbox"]:disabled:hover::before,
-[role="checkbox"]:disabled:hover::before {
- background: initial;
- box-shadow: none;
-}
-
-input[type="radio"]:disabled:active::before,
-input[type="checkbox"]:disabled:active::before,
-[role="checkbox"]:disabled:active::before {
- background: initial;
- box-shadow: none;
-}
-
-input[type="radio"]:checked:hover::before {
- border-color: var(--checkbox-radio-hover-color);
- box-shadow: var(--radio-checked-hover-box-shadow);
-}
-
-input[type="radio"]:checked:focus::before {
- box-shadow: var(--radio-checked-focus-box-shadow);
-}
-
-.input-group--inverse [role="checkbox"][aria-checked="mixed"]::before {
- background-image: url('data:image/svg+xml;utf8,
');
-}
-
-.input-group--inverse input[type="checkbox"]:checked::before,
-.input-group--inverse [role="checkbox"][aria-checked="true"]::before {
- background-image: url('data:image/svg+xml;utf8,
');
-}
-
-.input-group--inverse input[type="checkbox"]:checked:focus::before,
-.input-group--inverse [role="checkbox"][aria-checked="true"]:focus::before {
- box-shadow:
- 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);
-}
diff --git a/src/assets/styles/components/inputs/_checkbox.scss b/src/assets/styles/components/inputs/_checkbox.scss
new file mode 100644
index 00000000..f10fddad
--- /dev/null
+++ b/src/assets/styles/components/inputs/_checkbox.scss
@@ -0,0 +1,140 @@
+input[type="checkbox"] {
+ appearance: none;
+ background-color: transparent;
+ border: 0;
+ box-shadow: none;
+ display: inline-block;
+ height: auto;
+ margin: 0;
+ max-width: 100%;
+ padding: 0;
+ width: auto;
+}
+
+[role="checkbox"] + input[type="checkbox"] {
+ display: none;
+}
+
+.checkbox label,
+input[type="checkbox"] + label,
+[role="checkbox"] {
+ cursor: default;
+ font-weight: $font-weight-normal;
+}
+
+input[type="checkbox"]::before,
+[role="checkbox"]::before {
+ border: rem(1) solid;
+ border-color: var(--checkbox-radio-border-color);
+ border-radius: rem(3);
+ content: "";
+ display: block;
+ float: left;
+ height: rem(18);
+ margin: 0 rem(8) rem(-4) 0;
+ transition: border 0.1s ease-out, background-color 0.1s ease-out, box-shadow 0.1s ease-out;
+ width: rem(18);
+
+ @media (prefers-reduced-motion: reduce) {
+ transition: none;
+ }
+}
+
+input[type="checkbox"]:focus,
+[role="checkbox"]:focus {
+ box-shadow: none;
+ outline: none;
+}
+
+input[type="checkbox"]::before:focus,
+[role="checkbox"]::before:focus {
+ outline: none;
+}
+
+input[type="checkbox"]:disabled + label {
+ color: var(--text-value-color-disabled);
+}
+
+input[type="checkbox"]:checked::before,
+[role="checkbox"][aria-checked="true"]::before {
+ background-image: url('data:image/svg+xml;utf8,
');
+}
+
+[role="checkbox"][aria-checked="mixed"]::before {
+ background-image: url('data:image/svg+xml;utf8,
');
+ background-size: rem(10) rem(2.5);
+}
+
+input[type="checkbox"]:hover::before,
+[role="checkbox"]:hover::before {
+ background-color: var(--checkbox-radio-focus-hover-background-color);
+ border-color: var(--checkbox-radio-hover-color);
+ box-shadow: var(--checkbox-radio-hover-box-shadow);
+}
+
+input[type="checkbox"]:active::before,
+[role="checkbox"]:active::before {
+ background-color: var(--checkbox-radio-active-color);
+ border-color: var(--checkbox-radio-hover-color);
+ box-shadow: var(--checkbox-radio-hover-box-shadow);
+}
+
+
+input[type="checkbox"]:focus::before,
+[role="checkbox"]:focus::before {
+ border-color: var(--checkbox-radio-focus-border-color);
+ box-shadow: var(--checkbox-radio-focus-box-shadow);
+}
+
+input[type="checkbox"]:checked::before,
+[role="checkbox"][aria-checked="mixed"]::before,
+[role="checkbox"][aria-checked="true"]::before {
+ background-color: var(--checkbox-radio-checked-background-color);
+ background-position: center;
+ background-repeat: no-repeat;
+ border: rem(1) solid var(--checkbox-radio-checked-background-color);
+}
+
+
+input[type="checkbox"]:disabled::before {
+ border-color: var(--text-border-color-disabled);
+}
+
+input[type="checkbox"]:disabled:hover {
+ background-color: transparent;
+ box-shadow: none;
+ color: transparent;
+}
+
+input[type="checkbox"]:disabled:hover::before,
+[role="checkbox"]:disabled:hover::before {
+ background: initial;
+ box-shadow: none;
+}
+
+input[type="checkbox"]:disabled:active::before,
+[role="checkbox"]:disabled:active::before {
+ background: initial;
+ box-shadow: none;
+}
+
+.form--inverse [role="checkbox"][aria-checked="mixed"]::before {
+ background-image: url('data:image/svg+xml;utf8,
');
+}
+
+.form--inverse input[type="checkbox"]:checked::before,
+.form--inverse [role="checkbox"][aria-checked="true"]::before {
+ background-image: url('data:image/svg+xml;utf8,
');
+}
+
+.form--inverse input[type="checkbox"]:checked:focus::before,
+.form--inverse [role="checkbox"][aria-checked="true"]:focus::before {
+ box-shadow:
+ 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);
+}
+
+.input-group__descendant {
+ margin-left: rem(10);
+ margin-top: rem(12);
+}
diff --git a/src/assets/styles/components/inputs/_input.scss b/src/assets/styles/components/inputs/_input.scss
new file mode 100644
index 00000000..119fa131
--- /dev/null
+++ b/src/assets/styles/components/inputs/_input.scss
@@ -0,0 +1,61 @@
+input {
+ -moz-appearance: none;
+ -webkit-appearance: none;
+ appearance: none;
+ border: solid var(--border-width) transparent;
+ border-radius: rem(3.5);
+ box-shadow: var(--text-default-box-shadow);
+ display: block;
+ font-family: $font-family-serif;
+ font-size: rem(16);
+ height: rem(40);
+ line-height: (24 / 16);
+ max-width: 100%;
+ outline: none;
+ padding: rem(10) rem(10) rem(7);
+ transition: border 0.1s ease-out, background-color 0.1s ease-out, box-shadow 0.1s ease-out;
+ width: 100%;
+
+ @media (prefers-reduced-motion: reduce) {
+ transition: none;
+ }
+}
+
+input[type="number"] {
+ @include breakpoint-up(sm) {
+ max-width: 50%;
+ }
+}
+
+.form--inverse input {
+ border-color: var(--parent-background-color);
+}
+
+input:hover {
+ box-shadow: var(--text-hover-box-shadow);
+}
+
+input.input--error {
+ box-shadow: var(--text-error-box-shadow);
+ color: var(--text-value-color-error);
+}
+
+input:focus,
+input:focus:hover {
+ box-shadow: var(--text-focus-box-shadow);
+}
+
+input[disabled],
+input[disabled]:hover {
+ background-color: var(--text-background-color-disabled);
+ box-shadow: var(--text-disabled-box-shadow);
+ color: var(--text-value-color-disabled);
+}
+
+input.input--error:hover {
+ box-shadow: var(--text-error-hover-box-shadow);
+}
+
+input.input--error:focus {
+ box-shadow: var(--text-error-focus-box-shadow);
+}
diff --git a/src/assets/styles/components/inputs/_label.scss b/src/assets/styles/components/inputs/_label.scss
new file mode 100644
index 00000000..c68564ac
--- /dev/null
+++ b/src/assets/styles/components/inputs/_label.scss
@@ -0,0 +1,16 @@
+label {
+ display: block;
+ font-family: $font-family-serif;
+ font-weight: $font-weight-bold;
+ line-height: (24 / 16);
+}
+
+label[hidden] {
+ display: none;
+}
+
+input[type="checkbox"] + label,
+input[type="radio"] + label {
+ display: inline-block;
+ margin-top: 0;
+}
diff --git a/src/assets/styles/components/inputs/_radio.scss b/src/assets/styles/components/inputs/_radio.scss
new file mode 100644
index 00000000..fe44ec8b
--- /dev/null
+++ b/src/assets/styles/components/inputs/_radio.scss
@@ -0,0 +1,98 @@
+input[type="radio"] {
+ appearance: none;
+ background-color: transparent;
+ border: 0;
+ box-shadow: none;
+ display: inline-block;
+ height: auto;
+ margin: 0;
+ max-width: 100%;
+ padding: 0;
+ width: auto;
+}
+
+.radio label,
+input[type="radio"] + label {
+ font-weight: $font-weight-normal;
+}
+
+input[type="radio"]::before {
+ border: rem(1) solid;
+ border-color: var(--checkbox-radio-border-color);
+ border-radius: 100%;
+ content: "";
+ display: block;
+ float: left;
+ height: rem(18);
+ margin: 0 rem(8) rem(-4) 0;
+ transition: border 0.1s ease-out, background-color 0.1s ease-out, box-shadow 0.1s ease-out;
+ width: rem(18);
+
+ @media (prefers-reduced-motion: reduce) {
+ transition: none;
+ }
+}
+
+input[type="radio"]::before:focus {
+ outline: none;
+}
+
+input[type="radio"]:disabled + label {
+ color: var(--text-value-color-disabled);
+}
+
+
+input[type="radio"]:hover::before {
+ background-color: var(--checkbox-radio-focus-hover-background-color);
+ border-color: var(--checkbox-radio-hover-color);
+ box-shadow: var(--checkbox-radio-hover-box-shadow);
+}
+
+input[type="radio"]:active::before {
+ background-color: var(--checkbox-radio-active-color);
+ border-color: var(--checkbox-radio-hover-color);
+ box-shadow: var(--checkbox-radio-hover-box-shadow);
+}
+
+input[type="radio"]:focus::before {
+ border-color: var(--checkbox-radio-focus-border-color);
+ box-shadow: var(--checkbox-radio-focus-box-shadow);
+}
+
+input[type="radio"]:checked::before {
+ background: var(--checkbox-radio-checked-background-color);
+ border-color: var(--checkbox-radio-focus-border-color);
+ box-shadow: var(--radio-checked-box-shadow);
+}
+
+input[type="radio"]:disabled::before {
+ border-color: var(--text-border-color-disabled);
+}
+
+input[type="radio"]:disabled:hover {
+ background: initial;
+ box-shadow: none;
+}
+
+input[type="radio"]:disabled:hover::before {
+ background: initial;
+ box-shadow: none;
+}
+
+input[type="radio"]:disabled:active::before {
+ background: initial;
+ box-shadow: none;
+}
+
+input[type="radio"]:checked:hover::before {
+ border-color: var(--checkbox-radio-hover-color);
+ box-shadow: var(--radio-checked-hover-box-shadow);
+}
+
+input[type="radio"]:checked:focus::before {
+ box-shadow: var(--radio-checked-focus-box-shadow);
+}
+
+input[type="radio"]:checked:focus:hover {
+ box-shadow: none;
+}
diff --git a/src/assets/styles/components/inputs/_select.scss b/src/assets/styles/components/inputs/_select.scss
new file mode 100644
index 00000000..233d6182
--- /dev/null
+++ b/src/assets/styles/components/inputs/_select.scss
@@ -0,0 +1,95 @@
+select {
+ -moz-appearance: none;
+ -webkit-appearance: none;
+ appearance: none;
+ background-image: url("../images/chevron-down.svg");
+ background-position: calc(100% - #{rem(8)}) center;
+ background-repeat: no-repeat;
+ background-size: 1.25em;
+ border: solid var(--border-width) transparent;
+ border-radius: rem(3.5);
+ box-shadow: var(--text-default-box-shadow);
+ display: block;
+ font-family: $font-family-serif;
+ font-size: rem(16);
+ height: rem(40);
+ line-height: (24 / 16);
+ line-height: normal;
+ max-width: 100%;
+ min-width: 50%;
+ outline: none;
+ padding: rem(6.5) rem(40) rem(6) rem(10);
+ transition: border 0.1s ease-out, background-color 0.1s ease-out, box-shadow 0.1s ease-out;
+ width: auto;
+
+ &::-ms-expand {
+ display: none;
+ }
+
+ &::-moz-focus-inner {
+ outline: none;
+ }
+
+ &:-moz-focusring {
+ color: transparent;
+ text-shadow: 0 0 0 var(--dark-mint-500);
+ }
+
+ @media (prefers-reduced-motion: reduce) {
+ transition: none;
+ }
+}
+
+select[multiple] {
+ background-image: none;
+ height: auto;
+ padding: rem(10) rem(10) rem(7);
+}
+
+.form--inverse select {
+ border-color: var(--parent-background-color);
+}
+
+select.input--error {
+ background-image: url("../images/chevron-down--error.svg");
+ box-shadow: var(--text-error-box-shadow);
+ color: var(--text-value-color-error);
+
+ &:-moz-focusring {
+ color: transparent;
+ text-shadow: 0 0 0 var(--text-value-color-error);
+ }
+}
+
+select.input--error[multiple] {
+ background-image: none;
+}
+
+select:hover {
+ box-shadow: var(--text-hover-box-shadow);
+}
+
+select:focus,
+select:focus:hover {
+ box-shadow: var(--text-focus-box-shadow);
+}
+
+select.input--error:hover {
+ box-shadow: var(--text-error-hover-box-shadow);
+}
+
+select.input--error:focus {
+ box-shadow: var(--text-error-focus-box-shadow);
+}
+
+select[disabled],
+select[disabled]:hover {
+ background-color: var(--text-background-color-disabled);
+ background-image: url("../images/chevron-down--disabled.svg");
+ box-shadow: var(--text-disabled-box-shadow);
+ color: var(--text-value-color-disabled);
+}
+
+select[multiple][disabled] {
+ background-image: none;
+}
diff --git a/src/assets/styles/components/inputs/_submit.scss b/src/assets/styles/components/inputs/_submit.scss
new file mode 100644
index 00000000..522ca9c1
--- /dev/null
+++ b/src/assets/styles/components/inputs/_submit.scss
@@ -0,0 +1,3 @@
+[type="submit"] {
+ max-width: 100%;
+}
diff --git a/src/assets/styles/components/inputs/_textarea.scss b/src/assets/styles/components/inputs/_textarea.scss
new file mode 100644
index 00000000..15fa010c
--- /dev/null
+++ b/src/assets/styles/components/inputs/_textarea.scss
@@ -0,0 +1,56 @@
+textarea {
+ -moz-appearance: none;
+ -webkit-appearance: none;
+ appearance: none;
+ border: solid var(--border-width) transparent;
+ border-radius: rem(3.5);
+ box-shadow: var(--text-default-box-shadow);
+ display: block;
+ font-family: $font-family-serif;
+ font-size: rem(16);
+ line-height: (24 / 16);
+ max-width: 100%;
+ min-height: rem(118);
+ outline: none;
+ padding: rem(10) rem(10) rem(7);
+ resize: vertical;
+ transition: border 0.1s ease-out, background-color 0.1s ease-out, box-shadow 0.1s ease-out;
+ width: 100%;
+
+ @media (prefers-reduced-motion: reduce) {
+ transition: none;
+ }
+}
+
+.form--inverse textarea {
+ border-color: var(--parent-background-color);
+}
+
+textarea:hover {
+ box-shadow: var(--text-hover-box-shadow);
+}
+
+textarea.input--error {
+ box-shadow: var(--text-error-box-shadow);
+ color: var(--text-value-color-error);
+}
+
+textarea:focus,
+textarea:focus:hover {
+ box-shadow: var(--text-focus-box-shadow);
+}
+
+textarea[disabled],
+textarea[disabled]:hover {
+ background-color: var(--text-background-color-disabled);
+ box-shadow: var(--text-disabled-box-shadow);
+ color: var(--text-value-color-disabled);
+}
+
+textarea.input--error:hover {
+ box-shadow: var(--text-error-hover-box-shadow);
+}
+
+textarea.input--error:focus {
+ box-shadow: var(--text-error-focus-box-shadow);
+}
diff --git a/src/components/10-atoms/100-form-elements/10-inputs/inputs.config.js b/src/components/10-atoms/100-form-elements/10-inputs/inputs.config.js
index 9f5e6090..21f14a01 100644
--- a/src/components/10-atoms/100-form-elements/10-inputs/inputs.config.js
+++ b/src/components/10-atoms/100-form-elements/10-inputs/inputs.config.js
@@ -1,34 +1,83 @@
module.exports = {
- title: 'Text Input',
- label: 'Text Input',
+ title: 'Input',
+ label: 'Input',
status: 'wip',
inverse: false,
context: {
- standAlone: false,
+ component: 'input',
inputs: [
{
name: 'input'
},
+ {
+ name: 'password',
+ type: 'password',
+ label: 'Password',
+ placeholder: 'Enter your password',
+ description: false,
+ },
+ {
+ name: 'email',
+ type: 'email',
+ label: 'Email Address',
+ placeholder: 'me@example.com',
+ description: false,
+ },
+ {
+ name: 'url',
+ type: 'url',
+ label: 'Web Address',
+ placeholder: 'https://example.com',
+ description: false,
+ },
+ {
+ name: 'tel',
+ type: 'tel',
+ label: 'Phone Number',
+ placeholder: '1 (555) 123-4567',
+ description: false,
+ },
+ {
+ name: 'number',
+ type: 'number',
+ label: 'Number',
+ placeholder: '42',
+ description: false,
+ },
{
name: 'error',
- error: true,
- modifiers: ['error']
+ type: 'text',
+ error: true
},
{
name: 'disabled',
disabled: true,
- modifiers: ['disabled']
}
]
},
variants: [
{
- name: 'default_inverse',
+ name: 'default-inverse',
label: 'Default (Inverse)',
context: {
inverse: true,
bodyClass: 'has-dark-mint-500-background-color',
- modifiers: ['inverse']
+ }
+ },
+ {
+ name: 'unwrapped',
+ label: 'Unwrapped',
+ context: {
+ component: 'input--unwrapped',
+ }
+ },
+ {
+ name: 'unwrapped-inverse',
+ label: 'Unwrapped (Inverse)',
+ context: {
+ component: 'input--unwrapped',
+ inverse: true,
+ bodyClass: 'has-dark-mint-500-background-color',
}
}
]
diff --git a/src/components/10-atoms/100-form-elements/10-inputs/inputs.njk b/src/components/10-atoms/100-form-elements/10-inputs/inputs.njk
index 53cfe9b3..5899b82d 100644
--- a/src/components/10-atoms/100-form-elements/10-inputs/inputs.njk
+++ b/src/components/10-atoms/100-form-elements/10-inputs/inputs.njk
@@ -1,4 +1,3 @@
-{% if not standAlone %}
{% endif %}
{% for input in inputs %}
-{% render '@input', {input:input, inverse:inverse}, true %}
+ {% render '@' + component, input, true %}
{% endfor %}
diff --git a/src/components/10-atoms/100-form-elements/20-textareas/textareas.config.js b/src/components/10-atoms/100-form-elements/20-textareas/textareas.config.js
index 481f176b..e27a8e53 100644
--- a/src/components/10-atoms/100-form-elements/20-textareas/textareas.config.js
+++ b/src/components/10-atoms/100-form-elements/20-textareas/textareas.config.js
@@ -3,7 +3,7 @@ module.exports = {
status: 'wip',
context: {
name: 'text',
- standAlone: false,
+ component: 'textarea',
textareas: [
{
name: 'textarea'
@@ -11,12 +11,10 @@ module.exports = {
{
name: 'error',
error: true,
- modifiers: ['error']
},
{
name: 'disabled',
disabled: true,
- modifiers: ['disabled']
}
]
},
@@ -27,7 +25,22 @@ module.exports = {
context: {
inverse: true,
bodyClass: 'has-dark-mint-500-background-color',
- modifiers: ['inverse']
+ }
+ },
+ {
+ name: 'Unwrapped',
+ label: 'Unwrapped',
+ context: {
+ component: 'textarea--unwrapped'
+ }
+ },
+ {
+ name: 'Unwrapped Inverse',
+ label: 'Unwrapped (Inverse)',
+ context: {
+ component: 'textarea--unwrapped',
+ inverse: true,
+ bodyClass: 'has-dark-mint-500-background-color',
}
}
]
diff --git a/src/components/10-atoms/100-form-elements/20-textareas/textareas.njk b/src/components/10-atoms/100-form-elements/20-textareas/textareas.njk
index 30da5fd0..9ac82e02 100644
--- a/src/components/10-atoms/100-form-elements/20-textareas/textareas.njk
+++ b/src/components/10-atoms/100-form-elements/20-textareas/textareas.njk
@@ -1,4 +1,3 @@
-{% if not standAlone %}
{% endif %}
{% for textarea in textareas %}
-{% render '@textarea', {textarea:textarea, inverse:inverse}, true %}
+ {% render '@' + component, textarea, true %}
{% endfor%}
diff --git a/src/components/10-atoms/100-form-elements/30-selects/selects.config.js b/src/components/10-atoms/100-form-elements/30-selects/selects.config.js
index d02624f4..f1510f7b 100644
--- a/src/components/10-atoms/100-form-elements/30-selects/selects.config.js
+++ b/src/components/10-atoms/100-form-elements/30-selects/selects.config.js
@@ -10,16 +10,21 @@ module.exports = {
{
name: 'error',
error: true,
- modifiers: ['error']
},
{
name: 'disabled',
disabled: true,
- modifiers: ['disabled']
}
]
},
variants: [
+ {
+ name: 'Default Multiple',
+ label: 'Default (Multiple)',
+ context: {
+ multiple: true
+ }
+ },
{
name: 'Default Inverse',
label: 'Default (Inverse)',
@@ -27,6 +32,31 @@ module.exports = {
bodyClass: 'has-dark-mint-500-background-color',
inverse: true
}
+ },
+ {
+ name: 'Unwrapped',
+ label: 'Unwrapped',
+ context: {
+ component: 'select--unwrapped'
+ }
+ },
+
+ {
+ name: 'Unwrapped Multiple',
+ label: 'Unwrapped (Multiple)',
+ context: {
+ component: 'select--unwrapped',
+ multiple: true
+ }
+ },
+ {
+ name: 'Unwrapped Inverse',
+ label: 'Unwrapped (Inverse)',
+ context: {
+ component: 'select--unwrapped',
+ bodyClass: 'has-dark-mint-500-background-color',
+ inverse: true
+ }
}
]
};
diff --git a/src/components/10-atoms/100-form-elements/30-selects/selects.njk b/src/components/10-atoms/100-form-elements/30-selects/selects.njk
index 61be97d6..005cb5ae 100644
--- a/src/components/10-atoms/100-form-elements/30-selects/selects.njk
+++ b/src/components/10-atoms/100-form-elements/30-selects/selects.njk
@@ -1,4 +1,7 @@
-{% if not standAlone %}
{% endif %}
{% for select in selects %}
-{% render '@select', {select:select, inverse:inverse}, true %}
+ {% if component %}
+ {% render '@' + component, {select: select, multiple: multiple}, true %}
+ {% else %}
+ {% render '@select', {select: select, multiple: multiple}, true %}
+ {% endif %}
{% endfor %}
diff --git a/src/components/10-atoms/100-form-elements/40-checkboxes/checkboxes.config.js b/src/components/10-atoms/100-form-elements/40-checkboxes/checkboxes.config.js
index 26f53ca4..f793a6f5 100644
--- a/src/components/10-atoms/100-form-elements/40-checkboxes/checkboxes.config.js
+++ b/src/components/10-atoms/100-form-elements/40-checkboxes/checkboxes.config.js
@@ -2,24 +2,21 @@ module.exports = {
title: 'Checkboxes',
status: 'ready',
context: {
- standAlone: false,
+ component: 'checkbox',
checkboxes: [
{
- name: 'unchecked',
+ name: 'checkboxes',
label: 'Initially unchecked',
- standAlone: false
},
{
- name: 'checked',
+ name: 'checkboxes',
label: 'Initially checked',
checked: true,
- standAlone: false
},
{
- name: 'disabled',
+ name: 'checkboxes',
label: 'Disabled checkbox',
disabled: true,
- standAlone: false
}
]
},
@@ -30,7 +27,22 @@ module.exports = {
context: {
bodyClass: 'has-dark-mint-500-background-color',
inverse: true,
- modifiers: ['inverse']
+ }
+ },
+ {
+ name: 'Unwrapped ',
+ label: 'Unwrapped',
+ context: {
+ component: 'checkbox--unwrapped'
+ }
+ },
+ {
+ name: 'Unwrapped Inverse',
+ label: 'Unwrapped (Inverse)',
+ context: {
+ component: 'checkbox--unwrapped',
+ bodyClass: 'has-dark-mint-500-background-color',
+ inverse: true,
}
}
]
diff --git a/src/components/10-atoms/100-form-elements/40-checkboxes/checkboxes.njk b/src/components/10-atoms/100-form-elements/40-checkboxes/checkboxes.njk
index f2090fc5..dd4c7046 100644
--- a/src/components/10-atoms/100-form-elements/40-checkboxes/checkboxes.njk
+++ b/src/components/10-atoms/100-form-elements/40-checkboxes/checkboxes.njk
@@ -1,8 +1,7 @@
-