mod-build 4.0.10 → 4.0.11

package/src/accessible-components/radio-button/_radio-button.scss

@@ -1,586 +0,0 @@
-$radio-overflow: visible !default;
-$radio-margin: 0 0 10px !default;
-
-$radio-button-label-cursor: pointer !default;
-$radio-button-label-display: block !default;
-$radio-button-input-position: absolute !default;
-$radio-button-input-opacity: 0 !default;
-
-// Default Styling (radioOptionType = none)
-$radio-button-background-color: $color-white !default;
-$radio-button-border-color: darken($color-charcoal3, 5%)!default;
-$radio-button-border-radius: 4px !default;
-$radio-button-border-width: 1px !default;
-$radio-button-color: $color-charcoal8 !default;
-$radio-button-font-size: 1rem !default;
-$radio-button-font-size-desktop: 1.125rem !default;
-$radio-button-font-weight: 400 !default;
-$radio-button-line-height: 1.25 !default;
-$radio-button-margin: 0 0 15px !default;
-$radio-button-min-height: 48px !default;
-$radio-button-padding: 17px 16px 17px 40px !default;
-$radio-button-text-align: left !default;
-// Checked
-$radio-button-checked-background-color: rgba($color-charcoal1, .4) !default;
-$radio-button-checked-border-color: $color-charcoal5 !default;
-$radio-button-checked-border-width: 2px !default;
-$radio-button-checked-box-shadow: none !default;
-$radio-button-checked-color: $radio-button-color !default;
-$radio-button-checked-font-weight: $radio-button-font-weight !default;
-// Focus
-$radio-button-focus-box-shadow: 0 0 10px 0 rgba(darken($radio-button-checked-background-color, 10%), .5) !default;
-// Hover
-$radio-button-hover-background-color: $radio-button-checked-background-color !default;
-$radio-button-hover-border-color: $radio-button-border-color !default;
-$radio-button-hover-border-width: $radio-button-border-width !default;
-$radio-button-hover-color: $radio-button-checked-color !default;
-// Error
-$radio-button-error-color: $color-a11y-red !default;
-
-// Radio Select (Circle)
-$radio-button-select-background-color: $color-white !default;
-$radio-button-select-border: 1px solid darken($color-charcoal3, 5%) !default;
-$radio-button-select-box-shadow: none !default;
-$radio-button-select-size: 20px !default;
-$radio-button-select-position-top: 17px !default;
-$radio-button-select-position-left: 13px !default;
-$radio-button-select-inner-circle-background-color: $color-charcoal5 !default;
-$radio-button-select-inner-circle-border-radius: 50% !default;
-$radio-button-select-inner-circle-color: transparent !default;
-$radio-button-select-inner-circle-content: '' !default;
-$radio-button-select-inner-circle-display: block !default;
-$radio-button-select-inner-circle-font-family: inherit !default;
-$radio-button-select-inner-circle-font-size: 0 !default;
-$radio-button-select-inner-circle-position: absolute !default;
-$radio-button-select-inner-circle-position-left: 3px !default;
-$radio-button-select-inner-circle-position-top: $radio-button-select-inner-circle-position-left !default;
-$radio-button-select-inner-circle-size: 10px !default;
-// Checked Radio Select (Circle)
-$radio-button-select-checked-background-color: $color-white !default;
-$radio-button-select-checked-border: 2px solid $color-charcoal5 !default;
-$radio-button-select-checked-box-shadow: none !default;
-
-$radio-border-transition: border-color .15s ease-in-out !default;
-
-// Radio Button (Text Spanning Multiple Lines)
-$radio-button-multiple-lines-text-max-width: 200px !default;
-$radio-button-multiple-lines-font-size: $radio-button-font-size !default;
-$radio-button-multiple-lines-font-size-desktop: $radio-button-font-size-desktop !default;
-
-// Radio Button (radioOptionType = 'group')
-$radio-group-border-color: $radio-button-border-color !default;
-$radio-group-border-width: 1px !default;
-$radio-group-border-radius: $radio-button-border-radius !default;
-$radio-group-box-shadow: none !default;
-$radio-group-gap: 0 !default;
-$radio-group-button-background-color: transparent !default;
-$radio-group-button-border-radius: 0 !default;
-$radio-group-button-font-size: 1rem !default;
-$radio-group-button-font-weight: normal !default;
-$radio-group-button-height: 70px !default;
-$radio-group-button-color: $radio-button-color !default;
-// Checked
-$radio-group-button-checked-background-color: $radio-button-checked-background-color !default;
-$radio-group-button-checked-border: 2px solid $radio-button-checked-border-color !default;
-$radio-group-button-checked-box-shadow: none !default;
-$radio-group-button-checked-font-weight: 700 !default;
-$radio-group-button-checked-color: $radio-group-button-color !default;
-// Hover
-$radio-group-button-hover-background-color: $radio-button-hover-background-color !default;
-$radio-group-button-hover-color: $radio-group-button-color !default;
-
-// Radio Button (radioOptionType = 'icon')
-$radio-icon-checked-border-color: $radio-button-checked-border-color !default;
-$radio-icon-border-radius: $radio-button-border-radius !default;
-$radio-icon-checked-border-width: $radio-button-checked-border-width !default;
-$radio-icon-height: 135px !default;
-$radio-icon-margin: 0 3px 10px 0 !default;
-$radio-icon-width: 32% !default;
-
-// Radio Button (radioOptionType = 'backgroundImage')
-$radio-background-color-checked-border-color: $radio-button-checked-border-color !default;
-$radio-background-color-border-radius: 5px !default;
-$radio-background-color-default-background-color: $color-charcoal4 !default;
-$radio-background-color-height: 77px !default;
-$radio-background-color-margin: 5px 4px !default;
-$radio-background-color-margin-desktop: 5px 4px 13px !default;
-$radio-background-color-width: calc(31% - 5px) !default;
-
-// Radio Button (radioOptionType = 'custom')
-$radio-custom-icon-background-color: $radio-button-checked-border-color !default;
-$radio-custom-icon-border-radius: 50% !default;
-$radio-custom-icon-color: $color-white !default;
-$radio-custom-icon-content: '\e920' !default;
-$radio-custom-icon-font-size: .875rem !default;
-$radio-custom-icon-initial-opacity: 0 !default;
-$radio-custom-icon-checked-opacity: 1 !default;
-$radio-custom-icon-position: absolute !default;
-$radio-custom-icon-position-left: 24px !default;
-$radio-custom-icon-size: 30px !default;
-$radio-custom-icon-text-align: center !default;
-$radio-custom-icon-text-shadow: none !default;
-$radio-custom-icon-checked-text-shadow: $radio-custom-icon-text-shadow !default;
-$radio-custom-margin: 0 0 15px !default;
-$radio-custom-min-height: 57px !default;
-$radio-custom-min-height-desktop: 67px !default;
-$radio-custom-padding: 5px 30px !default;
-$radio-custom-text-align: center !default;
-$radio-custom-label-justify-content: center !default;
-
-.radio {
-	margin: $radio-margin;
-	overflow: $radio-overflow;
-
-	&__button {
-		font-size: $radio-button-font-size;
-		margin: $radio-button-margin;
-		min-height: $radio-button-min-height;
-
-		label {
-			cursor: $radio-button-label-cursor;
-			display: $radio-button-label-display;
-			font-weight: $radio-button-font-weight;
-			line-height: $radio-button-line-height;
-			padding: $radio-button-padding;
-			position: relative;
-			text-align: $radio-button-text-align;
-
-			input[type=radio] {
-				position: $radio-button-input-position;
-				opacity: $radio-button-input-opacity;
-
-				+ span {
-					background-color: $radio-button-select-background-color;
-					border: $radio-button-select-border;
-					border-radius: 50%;
-					box-shadow: $radio-button-select-box-shadow;
-					display: block;
-					height: $radio-button-select-size;
-					left: $radio-button-select-position-left;
-					position: absolute;
-					top: $radio-button-select-position-top;
-					width: $radio-button-select-size;
-				}
-
-				&:checked + span { // sass-lint:disable-line
-					background-color: $radio-button-select-checked-background-color;
-					border: $radio-button-select-checked-border;
-					box-shadow: $radio-button-select-checked-box-shadow;
-
-					&:empty {
-						transition: $base-transition;
-					}
-
-					&:after {
-						background: $radio-button-select-inner-circle-background-color;
-						border-radius: $radio-button-select-inner-circle-border-radius;
-						color: $radio-button-select-inner-circle-color;
-						content: $radio-button-select-inner-circle-content;
-						display: $radio-button-select-inner-circle-display;
-						font-family: $radio-button-select-inner-circle-font-family;
-						font-size: $radio-button-select-inner-circle-font-size;
-						position: $radio-button-select-inner-circle-position;
-						height: $radio-button-select-inner-circle-size;
-						left: $radio-button-select-inner-circle-position-left;
-						top: $radio-button-select-inner-circle-position-top;
-						width: $radio-button-select-inner-circle-size;
-					}
-
-					+ span {
-						color: $radio-button-checked-color;
-						font-weight: $radio-button-checked-font-weight;
-
-						&::before {
-							background-color: $radio-button-checked-background-color;
-							border: $radio-button-checked-border-width solid $radio-button-checked-border-color;
-							box-shadow: $radio-button-checked-box-shadow;
-						}
-					}
-				}
-
-				&:focus {
-					+ span + span {
-						&::before {
-							box-shadow: $radio-button-focus-box-shadow;
-						}
-					}
-				}
-
-				&.multiple-lines {
-					+ .radio__button-text {
-						font-size: $radio-button-multiple-lines-font-size;
-						max-width: $radio-button-multiple-lines-text-max-width;
-					}
-				}
-			}
-
-			&:hover {
-				input:not(:checked) + span + .radio__button-text { // sass-lint:disable-line
-					color: $radio-button-hover-color;
-
-					&::before {
-						background-color: $radio-button-hover-background-color;
-						border: $radio-button-hover-border-width solid $radio-button-hover-border-color;
-					}
-				}
-			}
-		}
-
-		&:last-child {
-			margin-bottom: 0;
-		}
-	}
-
-	&__button-text {
-		color: $radio-button-color;
-		transition: $base-transition;
-
-		&::before {
-			background-color: $radio-button-background-color;
-			border: $radio-button-border-width solid $radio-button-border-color;
-			border-radius: $radio-button-border-radius;
-			content: '';
-			height: 100%;
-			left: 0;
-			position: absolute;
-			top: 0;
-			transition: $base-transition;
-			width: 100%;
-			z-index: -1;
-		}
-	}
-
-	&__group,
-	&--icon,
-	&--backgroundImage,
-	&--custom {
-		.radio__button {
-			label {
-				padding: 0;
-				text-align: $radio-custom-text-align;
-
-				input[type=radio] {
-					+ span {
-						background: none;
-						border: 0;
-						border-radius: 0;
-						box-shadow: none;
-						display: block;
-						height: auto;
-						left: 0;
-						position: unset;
-						text-align: $radio-custom-text-align;
-						top: unset;
-						width: auto;
-					}
-
-					&:checked {
-						+ span {
-							background: none;
-							border: 0;
-						}
-					}
-				}
-			}
-		}
-	}
-
-	&__group,
-	&--backgroundImage,
-	&--icon {
-		overflow: hidden;
-		user-select: none;
-
-		.radio__button {
-			border-radius: $radio-icon-border-radius;
-			display: inline-flex;
-			flex-direction: column;
-			justify-content: center;
-			margin: $radio-icon-margin;
-			position: relative;
-			text-align: center;
-			vertical-align: top;
-			width: $radio-icon-width;
-
-			label {
-				input[type=radio] {
-					+ span {
-						&::before,
-						&::after {
-							display: none;
-						}
-					}
-				}
-			}
-
-			.radio__buton-text {
-				&::before {
-					display: none;
-				}
-			}
-		}
-	}
-
-	&__group {
-		border: $radio-group-border-width solid $radio-group-border-color;
-		border-radius: $radio-group-border-radius;
-		box-shadow: $radio-group-box-shadow;
-		display: flex;
-		gap: $radio-group-gap;
-
-		.radio__button {
-			border: 0;
-			border-radius: 0;
-			height: $radio-group-button-height;
-			margin: 0;
-			width: 100%;
-
-			label {
-				height: 100%;
-				min-height: 0;
-
-				input[type=radio] {
-					+ span {
-						align-items: center;
-						background-color: $radio-group-button-background-color;
-						border-radius: $radio-group-button-border-radius;
-						color: $radio-group-button-color;
-						display: flex;
-						font-size: $radio-group-button-font-size;
-						font-weight: $radio-group-button-font-weight;
-						height: 100%;
-						justify-content: center;
-						transition: all .15s linear;
-					}
-
-					&:checked {
-						+ span {
-							background-color: $radio-group-button-checked-background-color;
-							border: $radio-group-button-checked-border;
-							box-shadow: $radio-group-button-checked-box-shadow;
-							color: $radio-group-button-checked-color;
-							font-weight: $radio-group-button-checked-font-weight;
-						}
-					}
-				}
-
-				&:hover {
-					input[type=radio]:not(:checked) + span { // sass-lint:disable-line
-						background-color: $radio-group-button-hover-background-color;
-						color: $radio-group-button-hover-color;
-					}
-				}
-			}
-
-			~ .radio__button {
-				border-left: $radio-group-border-width solid $radio-group-border-color;
-			}
-		}
-	}
-
-	&--icon {
-		display: flex;
-		flex-wrap: wrap;
-		justify-content: space-between;
-
-		.radio__button {
-			border: 0;
-			height: $radio-icon-height;
-			line-height: 12px;
-			position: relative;
-
-			label {
-				display: inline-flex;
-				flex-direction: column;
-				height: 100%;
-				justify-content: center;
-
-				input[type=radio]:checked + .tile .tile__text::before { // sass-lint:disable-line
-					border: $radio-icon-checked-border-width solid $radio-icon-checked-border-color;
-				}
-			}
-		}
-	}
-
-	&--backgroundImage {
-		padding: 0 1px;
-
-		.radio__button {
-			background-color: $radio-background-color-default-background-color;
-			border-radius: $radio-background-color-border-radius;
-			height: $radio-background-color-height;
-			margin: $radio-background-color-margin;
-			width: $radio-background-color-width;
-
-			input:checked {
-				+ .tile .tile__background-image {
-					&::before {
-						border-color: $radio-background-color-checked-border-color;
-					}
-				}
-			}
-
-			label {
-				align-items: center;
-				display: flex;
-				height: 100%;
-				justify-content: center;
-			}
-		}
-	}
-
-	&--custom {
-		.radio__button {
-			min-height: $radio-custom-min-height;
-
-			label {
-				align-items: center;
-				display: flex;
-				justify-content: $radio-custom-label-justify-content;
-				min-height: inherit;
-				padding: $radio-custom-padding;
-				position: relative;
-
-				input[type=radio] {
-					+ span {
-						color: $radio-button-color;
-						line-height: $radio-button-line-height;
-
-						&::before {
-							background-color: $radio-button-background-color;
-							border: $radio-button-border-width solid $radio-button-border-color;
-							border-radius: $radio-button-border-radius;
-							height: 100%;
-							left: 0;
-							opacity: 1;
-							position: absolute;
-							top: 0;
-							transition: $base-transition;
-							width: 100%;
-							z-index: -1;
-						}
-
-						&::after {
-							display: none;
-						}
-
-						+ span {
-							background-color: $radio-custom-icon-background-color;
-							border-radius: $radio-custom-icon-border-radius;
-							height: $radio-custom-icon-size;
-							left: $radio-custom-icon-position-left;
-							opacity: $radio-custom-icon-initial-opacity;
-							position: $radio-custom-icon-position;
-							text-align: $radio-custom-icon-text-align;
-							transition: $base-transition;
-							width: $radio-custom-icon-size;
-
-							&::before {
-								@include icon-fill;
-								background: transparent;
-								border: 0;
-								color: $radio-custom-icon-color;
-								content: $radio-custom-icon-content;
-								display: block;
-								font-size: $radio-custom-icon-font-size;
-								line-height: $radio-custom-icon-size;
-								text-shadow: $radio-custom-icon-text-shadow;
-								z-index: 2;
-							}
-						}
-					}
-
-					&:checked {
-						+ span {
-							color: $radio-button-checked-color;
-							font-weight: $radio-button-checked-font-weight;
-
-							&::before {
-								background-color: $radio-button-checked-background-color;
-								border: $radio-button-checked-border-width solid $radio-button-checked-border-color;
-							}
-
-							+ span {
-								opacity: $radio-custom-icon-checked-opacity;
-
-								&::before {
-									text-shadow: $radio-custom-icon-checked-text-shadow;
-								}
-							}
-						}
-					}
-
-					&:focus {
-						+ span {
-							&::before {
-								box-shadow: $radio-button-focus-box-shadow;
-							}
-
-							+ span {
-								&:before {
-									box-shadow: none;
-								}
-							}
-						}
-					}
-				}
-
-				&:hover {
-					input:not(:checked) + span {
-						color: $radio-button-hover-color;
-
-						&::before {
-							background-color: $radio-button-hover-background-color;
-							border: $radio-button-hover-border-width solid $radio-button-hover-border-color;
-						}
-
-						+ span {
-							opacity: 1;
-						}
-					}
-				}
-			}
-		}
-	}
-}
-
-.has-error, .has-error label:hover { // sass-lint:disable-line
-	input:not(:checked) + span + .radio__button-text { // sass-lint:disable-line
-		color: $radio-button-error-color;
-
-		&::before {
-			border-color: $radio-button-error-color;
-		}
-	}
-}
-
-@include breakpoint-md {
-	.radio {
-		&--custom {
-			.radio__button {
-				min-height: $radio-custom-min-height-desktop;
-			}
-		}
-
-		&--backgroundImage {
-			.radio__button {
-				margin: $radio-background-color-margin-desktop;
-			}
-		}
-
-		&__button {
-			font-size: $radio-button-font-size-desktop;
-
-			label {
-				input[type=radio] {
-					&.multiple-lines {
-						+ .radio__button-text {
-							font-size: $radio-button-multiple-lines-font-size-desktop;
-						}
-					}
-				}
-			}
-		}
-	}
-}
-

package/src/accessible-components/radio-button/radio-button.html

@@ -1,33 +0,0 @@
-{{#if this.field}}
-<fieldset class="radio{{#if this.field.radioOptionType}} radio--{{this.field.radioOptionType}}{{/if}}{{#if this.field.attributes.class}} {{this.field.attributes.class}}{{/if}}" {{{addAttributes this.field 'class'}}}>
-	{{#if this.field.legend}}
-		<legend {{{addAttributes this.field.legend}}}>{{{this.field.legend.text}}}</legend>
-	{{/if}}
-	{{#xif "this.field.radioOptionType === 'group'"}}
-	<div class="radio__group">
-	{{/xif}}
-	{{#each this.field.options}}
-		<div class="radio__button{{#xif "this.wrapper && this.wrapper.attributes && this.wrapper.attributes.class"}} {{this.wrapper.attributes.class}}{{/xif}}" {{#if this.wrapper}}{{{addAttributes this.wrapper 'class'}}}{{/if}}>
-			<label class="radio__button-label">
-				<input type="radio" {{{addAttributes this 'id' 'type'}}} />
-				{{#unless ../this.field.radioOptionType}}
-					<span class="radio__button-select"></span>
-				{{/unless}}
-				{{#xif "this.backgroundImage || this.picture"}}
-					{{fileInclude 'src/accessible-components/tile/tile.html'
-						field = this
-					}}
-				{{else}}
-					<span class="radio__button-text">{{{this.text}}}</span>
-					{{#if ../this.field.radioOptionType}}
-						<span class="radio__custom-select"></span>
-					{{/if}}
-				{{/xif}}
-			</label>
-		</div>
-	{{/each}}
-	{{#xif "this.field.radioOptionType === 'group'"}}
-	</div>
-	{{/xif}}
-</fieldset>
-{{/if}}