mod-build 4.0.0-alpha.1 → 4.0.0-alpha.2

package/gulp-tasks/add-path-subdirectories.js

@@ -11,7 +11,7 @@ module.exports = function(gulp, gulpPlugins, siteSettings, siteData) {
 					return `href="${pathSubdirectory}favicon.ico"`;
 				}))	
 				.pipe(replace(/((src=")(images|scripts|shared-components)\/[^"]+")/g, function(match, path) {
-					if (path.startsWith('src="images') || path.startsWith('src="scripts') || path.startsWith('src="shared-components')) {
+					if (path.startsWith('src="images') || path.startsWith('src="scripts') || path.startsWith('src="shared-components') || path.startsWith('src="accessible-components')) {
 						return `src="${pathSubdirectory}${path.slice(5)}`;
 					}
 					return match;
@@ -23,7 +23,7 @@ module.exports = function(gulp, gulpPlugins, siteSettings, siteData) {
 					return match;
 				}))
 				.pipe(replace(/((href=")(images|styles|shared-components)\/[^"]+")/g, function(match, path) {
-					if (path.startsWith('href="images') || path.startsWith('href="styles') || path.startsWith('href="shared-components')) {
+					if (path.startsWith('href="images') || path.startsWith('href="styles') || path.startsWith('href="shared-components') || path.startsWith('src="accessible-components')) {
 						return `href="${pathSubdirectory}${path.slice(6)}`;
 					}
 					return match;

package/gulp-tasks/grab-shared-scripts.js

@@ -13,7 +13,8 @@ const fileNames = {
   footerComponentJsFileName: '',
   modFooterStylesFileName: '',
   qsFooterStylesFileName: '',
-  homeownerFormFileName: ''
+  homeownerFormFileName: '',
+  callrailFileName: ''
 };
 var isQuotePageOrUseRelativePath = false;
 var resourceURL = '';
@@ -29,9 +30,11 @@ function replaceModalyticsSrc(gulp, gulpPlugins, siteSettings, siteData) {
 function replaceFootAssetScripts(gulp, gulpPlugins, siteSettings, siteData) {
   const resourcePath = isQuotePageOrUseRelativePath ? `${pathSubdirectory}{{#if this.nodeModulesPath}}{{this.nodeModulesPath}}{{/if}}resources/scripts` : '/resources/scripts';
   return gulp.src(`${siteSettings.srcFolder}/${componentFolderPath}/foot-assets/foot-assets.html`)
-  .pipe(replace(/"(?:(?!"|js")[\s\S])+(modutils|mod-utils.*?)js"|"(?:(?!"|")[\s\S])+(footer\/footer-component.*?)js"|"(?:(?!"|")[\s\S])+(mod-form\/form.*?)js"/g, function(match) {
-      if (match.includes('mod-form/form')) {
+  .pipe(replace(/"(?:(?!"|js")[\s\S])+(modutils|mod-utils.*?)js"|"(?:(?!"|")[\s\S])+(callrail.*?)js"|"(?:(?!"|")[\s\S])+(footer\/footer-component.*?)js"|"(?:(?!"|")[\s\S])+(mod-form\/form.*?)js"/g, function(match) {
+    if (match.includes('mod-form/form')) {
         return `"${resourcePath}/mod-form/form/${fileNames.homeownerFormFileName}"`;
+      } else if (match.includes('callrail')) {
+        return `"${resourcePath}/callrail/${fileNames.callrailFileName}"`;
       } else if (match.includes('modutils') || match.includes('mod-utils')) {
         return `"${resourcePath}/mod-utils/${fileNames.modUtilsFileName}"`;
       } else if (match.includes('footer-component')) {
@@ -140,6 +143,16 @@ function getResource(url, config = {}, fn, fnArray) {
   });
 }
 const TASKS = {
+  copyCallrail: {
+    url: 'shared-resources/scripts/callrail/callrail.min.js',
+    config: {
+      fileName: 'callrailFileName',
+      dest: 'scripts/callrail',
+      mapUrl: 'shared-resources/scripts/callrail/callrail.min.js.map',
+    },
+    srcReplaceFn: null,
+    additionalSrcReplaceFns: []
+  },
   copyModutils: {
     url: 'mod-utils/modutils.min.js',
     config: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mod-build",
-  "version": "4.0.0-alpha.1",
+  "version": "4.0.0-alpha.2",
   "description": "Share components for S3 sites.",
   "type": "module",
   "scripts": {
@@ -8,24 +8,22 @@
     "build": "vite build",
     "preview": "vite preview"
   },
-  "devDependencies": {
+  "dependencies": {
     "@rollup/plugin-inject": "^5.0.5",
+    "axios": "^1.6.2",
+    "del": "^7.1.0",
     "eslint": "^8.55.0",
     "gulp": "^4.0.2",
+    "gulp-handlebars-file-include": "^1.0.0",
     "gulp-hash": "^4.2.2",
+    "gulp-replace": "^1.1.4",
     "gulp-tap": "^2.0.0",
     "husky": "^8.0.3",
+    "jquery": "^3.7.1",
     "sass": "^1.69.5",
     "vite": "^5.0.0",
     "vite-plugin-eslint": "^1.8.1",
     "vite-plugin-handlebars": "^1.6.0",
     "vite-plugin-static-copy": "^1.0.0"
-  },
-  "dependencies": {
-    "axios": "^1.6.2",
-    "del": "^7.1.0",
-    "gulp-handlebars-file-include": "^1.0.0",
-    "gulp-replace": "^1.1.4",
-    "jquery": "^3.7.1"
   }
 }

package/src/accessible-components/button/_button.scss

@@ -1,195 +0,0 @@
-$button-border-radius: 2px !default;
-$button-cursor: pointer !default;
-$button-display: inline-block !default;
-$button-font-family: $base-font-family !default;
-$button-font-size: 1.25rem !default;
-$button-font-size-desktop: $button-font-size !default;
-$button-font-style: normal !default;
-$button-font-weight: 700 !default;
-$button-height: 50px !default;
-$button-height-desktop: $button-height !default;
-$button-letter-spacing: 0 !default;
-$button-line-height: 1.05 !default;
-$button-margin: 10px 0 !default;
-$button-padding: 15px 30px !default;
-$button-position: relative !default;
-$button-text-align: center !default;
-$button-text-decoration: none !default;
-$button-text-transform: uppercase !default;
-$button-transition: $base-transition !default;
-$button-width: 100% !default;
-$button-z-index: 0 !default;
-
-$back-button-align-items: center !default;
-$back-button-background-color: transparent !default;
-$back-button-border: 0 !default;
-$back-button-color: $color-charcoal4 !default;
-$back-button-display: flex !default;
-$back-button-initial-display: none !default;
-$back-button-font-size: .875rem !default;
-$back-button-font-weight: 400 !default;
-$back-button-line-height: $button-line-height !default;
-$back-button-margin: 10px 0 0 !default;
-$back-button-padding: 2px 5px !default;
-$back-button-hover-background-color: transparent !default;
-$back-button-hover-color: darken($back-button-color, 20%) !default;
-$back-button-icon-font-size: 90% !default;
-$back-button-icon-margin-right: 4px !default;
-
-$back-button-focus-outline: 1px solid rgba($back-button-color, .5) !default;
-$back-button-focus-outline-offset: 2px !default;
-
-$button-primary-background-color: $color-a11y-default-button !default;
-$button-primary-border: 0 !default;
-$button-primary-color: $color-white !default;
-$button-primary-max-width: 100% !default;
-$button-primary-hover-background-color: $color-a11y-default-button-hover !default;
-$button-primary-hover-border: $button-primary-border !default;
-$button-primary-hover-color: $color-white !default;
-
-$button-secondary-background-color: $button-primary-background-color !default;
-$button-secondary-border: $button-primary-border !default;
-$button-secondary-color: $button-primary-color !default;
-$button-secondary-font-size: $button-font-size !default;
-$button-secondary-font-size-desktop: $button-secondary-font-size !default;
-$button-secondary-height: $button-height !default;
-$button-secondary-height-desktop: $button-secondary-height !default;
-$button-secondary-max-width: 100% !default;
-$button-secondary-padding: $button-padding !default;
-$button-secondary-text-transform: $button-text-transform !default;
-$button-secondary-hover-background-color: $button-primary-hover-background-color !default;
-$button-secondary-hover-border: $button-primary-hover-border !default;
-$button-secondary-hover-color: $button-primary-hover-color !default;
-
-$button-icon-position: absolute !default;
-$button-icon-font-family: modicons-fill !default;
-$button-icon-font-size: .875rem !default;
-$button-icon-bottom: unset !default;
-$button-icon-left: unset !default;
-$button-icon-right: 15px !default;
-$button-icon-top: 50% !default;
-$button-icon-transform: translateY(-50%) !default;
-
-.btn {
-	border-radius: $button-border-radius;
-	cursor: $button-cursor;
-	display: $button-display;
-	font-family: $button-font-family;
-	font-size: $button-font-size;
-	font-style: $button-font-style;
-	font-weight: $button-font-weight;
-	height: $button-height;
-	letter-spacing: $button-letter-spacing;
-	line-height: $button-line-height;
-	margin: $button-margin;
-	padding: $button-padding;
-	position: $button-position;
-	text-align: $button-text-align;
-	text-decoration: $button-text-decoration;
-	text-transform: $button-text-transform;
-	transition: $button-transition;
-	width: $button-width;
-	z-index: $button-z-index;
-
-	&__icon {
-		bottom: $button-icon-bottom;
-		font-family: $button-icon-font-family;
-		font-size: $button-icon-font-size;
-		left: $button-icon-left;
-		position: $button-icon-position;
-		right: $button-icon-right;
-		top: $button-icon-top;
-		transform: $button-icon-transform;
-	}
-
-	&--back {
-		align-items: $back-button-align-items;
-		background-color: $back-button-background-color;
-		border: $back-button-border;
-		color: $back-button-color;
-		cursor: $button-cursor;
-		display: $back-button-initial-display;
-		font-size: $back-button-font-size;
-		font-family: $button-font-family;
-		font-weight: $back-button-font-weight;
-		line-height: $back-button-line-height;
-		margin: $back-button-margin;
-		padding: $back-button-padding;
-		transition: $button-transition;
-
-		i {
-			font-size: $back-button-icon-font-size;
-			margin-right: $back-button-icon-margin-right;
-		}
-
-		&:focus {
-			outline: $back-button-focus-outline;
-			outline-offset: $back-button-focus-outline-offset;
-		}
-	}
-
-	&--primary {
-		background-color: $button-primary-background-color;
-		border: $button-primary-border;
-		color: $button-primary-color;
-		max-width: $button-primary-max-width;
-	}
-
-	&--secondary {
-		background-color: $button-secondary-background-color;
-		border: $button-secondary-border;
-		color: $button-secondary-color;
-		font-size: $button-secondary-font-size;
-		height: $button-secondary-height;
-		max-width: $button-secondary-max-width;
-		padding: $button-secondary-padding;
-		text-transform: $button-secondary-text-transform;
-	}
-}
-
-.form-in-progress {
-	.btn--back {
-		display: $back-button-display;
-	}
-}
-
-@include breakpoint-md {
-	.btn {
-		font-size: $button-font-size-desktop;
-		height: $button-height-desktop;
-
-		&--back {
-			&:hover,
-			&:active,
-			&:focus {
-				background-color: $back-button-hover-background-color;
-				color: $back-button-hover-color;
-			}
-		}
-
-		&--primary {
-			&:hover,
-			&:active,
-			&:focus {
-				background-color: $button-primary-hover-background-color;
-				border: $button-primary-hover-border;
-				color: $button-primary-hover-color;
-			}
-
-		}
-
-		&--secondary {
-			font-size: $button-secondary-font-size-desktop;
-			height: $button-secondary-height-desktop;
-
-			&:hover,
-			&:active,
-			&:focus {
-				background-color: $button-secondary-hover-background-color;
-				border: $button-secondary-hover-border;
-				color: $button-secondary-hover-color;
-			}
-
-		}
-	}
-}

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

@@ -1,4 +0,0 @@
-<button class="btn--back back-btn{{#if class}} {{class}}{{/if}}" data-btn="back" type="button">
-	<i class="icon-caret-left"></i>
-	Back
-</button>

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

@@ -1,17 +0,0 @@
-{{#xif 'this.button.tag && this.button.tag === "a"'}}
-<a class="btn{{#xif 'this.button.attributes && this.button.attributes.class || this.class'}}{{#if this.button.attributes.class}} {{this.button.attributes.class}}{{/if}}{{#if this.class}} {{this.class}}{{/if}}{{/xif}}" {{{addAttributes this.button 'class'}}}>
-{{else}}
-<button class="btn{{#xif 'this.button.attributes && this.button.attributes.class'}} {{this.button.attributes.class}}{{/xif}}" {{{addAttributes this.button 'class'}}}>
-{{/xif}}
-	<span class="btn__text">{{{this.button.text}}}</span>
-	{{#if this.button.icon}}
-		<i class="btn__icon{{#xif 'this.button.icon.attributes && this.button.icon.attributes.class'}} {{this.button.icon.attributes.class}}{{/xif}}" {{{addAttributes this.button.icon 'class'}}}></i>
-	{{/if}}
-{{#xif 'this.button.tag && this.button.tag === "a"'}}
-</a>
-{{else}}
-	{{#unless this.button.hideSpinner}}
-		<span class="btn__spinner"></span>
-	{{/unless}}
-</button>
-{{/xif}}

package/src/accessible-components/carousel/_carousel.scss

@@ -1,112 +0,0 @@
-$swiper-margin-top: 0 !default;
-$swiper-padding-top: 0 !default;
-
-$swiper-controls-padding: 30px 15px !default;
-$swiper-controls-padding-desktop: 50px 15px !default;
-$swiper-navigation-color: $color-charcoal4 !default;
-$swiper-navigation-hover-color: darken($swiper-navigation-color, 20%) !default;
-$swiper-pagination-margin: 0 10px !default;
-$swiper-pagination-bottom-alignment: 0 !default;
-$swiper-pagination-bullet-background-color: transparent !default;
-$swiper-pagination-bullet-border: 1px solid $swiper-navigation-color !default;
-$swiper-pagination-bullet-margin: 0 8px !default;
-$swiper-pagination-bullet-height: 8px !default;
-$swiper-pagination-bullet-width: 8px !default;
-$swiper-pagination-bullet-hover-background-color: darken($swiper-navigation-color, 20%) !default;
-$swiper-pagination-bullet-hover-border: 0 !default;
-$swiper-pagination-bullet-active-background-color: $swiper-navigation-color !default;
-$swiper-pagination-bullet-active-border: 0 !default;
-
-$swiper-scrollbar-background-color: $color-charcoal1 !default;
-$swiper-scrollbar-drag-color: $color-charcoal4 !default;
-$swiper-scrollbar-height: 4px !default;
-
-.swiper {
-	margin-top: $swiper-margin-top;
-	overflow: hidden;
-	padding-top: $swiper-padding-top;
-
-	.swiper-wrapper{
-		display: flex;
-	}
-
-	.swiper-controls {
-		align-items: center;
-		display: flex;
-		justify-content: center;
-		padding: $swiper-controls-padding;
-
-		i.icon {
-			color: $swiper-navigation-color;
-			cursor: pointer;
-			transition: $base-transition;
-
-			&:not(.swiper-button-disabled) {
-				&:active,
-				&:focus,
-				&:hover {
-					color: $swiper-navigation-hover-color;
-				}
-			}
-		}
-
-		.swiper-pagination {
-			margin: $swiper-pagination-margin;
-			position: relative;
-
-			.swiper-pagination-bullet {
-				background-color: $swiper-pagination-bullet-background-color;
-				border: $swiper-pagination-bullet-border;
-				height: $swiper-pagination-bullet-height;
-				opacity: 1;
-				transition: $base-transition;
-				width: $swiper-pagination-bullet-width;
-
-				&:active,
-				&:focus,
-				&:hover {
-					background-color: $swiper-pagination-bullet-hover-background-color;
-					border: $swiper-pagination-bullet-hover-border;
-					outline: 0;
-				}
-
-				&-active {
-					background-color: $swiper-pagination-bullet-active-background-color;
-					border: $swiper-pagination-bullet-active-border;
-				}
-			}
-
-			&.swiper-pagination-horizontal {
-				bottom: $swiper-pagination-bottom-alignment;
-				width: auto;
-
-				.swiper-pagination-bullet {
-					margin: $swiper-pagination-bullet-margin;
-				}
-			}
-		}
-	}
-
-	&-scrollbar {
-		background: $swiper-scrollbar-background-color;
-		height: $swiper-scrollbar-height;
-
-		&-drag {
-			background-color: $swiper-scrollbar-drag-color;
-			height: 100%;
-			width: 100%;
-		}
-	}
-
-	&--reviews {
-		padding-top: 50px !important;
-	}
-}
-
-@include breakpoint-md {
-	.swiper {
-		.swiper-controls {
-			padding: $swiper-controls-padding-desktop;
-		}
-	}
-}

package/src/accessible-components/carousel/carousel.html

@@ -1,25 +0,0 @@
-<div class="swiper{{#xif 'this.carousel.carouselOptions.attributes && this.carousel.carouselOptions.attributes.class'}} {{this.carousel.carouselOptions.attributes.class}}{{/xif}}" {{{addAttributes this.carousel.carouselOptions 'class'}}}>
-	{{#if this.carousel.carouselOptions.attributes.aria.describedby}}
-		<p class="visually-hidden" id="{{this.carousel.carouselOptions.attributes.aria.describedby}}">{{{this.carousel.carouselOptions.description}}}</p>
-	{{/if}}
-	<ul class="swiper-wrapper"{{#if this.carousel.carouselOptions.wrapper}} {{{addAttributes this.carousel.carouselOptions.wrapper 'class'}}}{{/if}}>
-		{{#if this.carousel.template}}
-			{{fileInclude this.carousel.template
-				items = this.carousel.items
-				classModifier = this.carousel.classModifier
-				carouselOptions = this.carousel.carouselOptions
-			}}
-		{{/if}}
-	</ul>
-
-	{{#xif "this.carousel.carouselOptions.hasNavigation === true || this.carousel.carouselOptions.hasPagination === true" }}
-	<div class="swiper-controls">
-		{{#if this.carousel.carouselOptions.previousSlideIcon }}{{{ this.carousel.carouselOptions.previousSlideIcon }}}{{/if}}
-		{{#if this.carousel.carouselOptions.hasPagination }}<div class="swiper-pagination"></div>{{/if}}
-		{{#if this.carousel.carouselOptions.nextSlideIcon }}{{{ this.carousel.carouselOptions.nextSlideIcon }}}{{/if}}
-	</div>
-	{{/xif}}
-	{{#if this.carousel.carouselOptions.hasScrollbar }}
-	<div class="swiper-scrollbar"></div>
-	{{/if}}
-</div>

package/src/accessible-components/checkbox/_checkbox.scss

@@ -1,96 +0,0 @@
-$checkbox-background-color: transparent !default;
-$checkbox-border: 0 !default;
-$checkbox-border-radius: 4px !default;
-$checkbox-font-size: 1rem !default;
-$checkbox-font-weight: normal !default;
-$checkbox-line-height: 1 !default;
-$checkbox-color: $color-charcoal8 !default;
-$checkbox-margin: 15px 0 !default;
-$checkbox-padding: 0 !default;
-$checkbox-text-align: left !default;
-$checkbox-transition: color .15s ease-in-out !default;
-
-$checkbox-label-padding-left: 30px !default;
-$checkbox-label-width: auto !default;
-
-$checkbox-input-background-color: $color-white !default;
-$checkbox-input-border: 1px solid $color-charcoal4 !default;
-$checkbox-input-border-radius: 2px !default;
-$checkbox-input-box-shadow: 0 !default;
-$checkbox-input-checked-background-color: $color-charcoal6 !default;
-$checkbox-input-checked-border: 1px solid $checkbox-input-checked-background-color !default;
-$checkbox-input-checked-color: $color-white !default;
-$checkbox-input-cursor: pointer !default;
-$checkbox-input-font-size: 1.125rem !default;
-$checkbox-input-margin: 0 !default;
-$checkbox-input-position-left: 0 !default;
-$checkbox-input-position-top: -2px !default;
-$checkbox-input-size: 1.25rem !default;
-
-// Focus
-$checkbox-focus-outline: 1px solid rgba($color-charcoal4, .5) !default;
-$checkbox-focus-outline-offset: 5px !default;
-
-
-.checkbox {
-	background-color: $checkbox-background-color;
-	border: $checkbox-border;
-	border-radius: $checkbox-border-radius;
-	color: $checkbox-color;
-	margin: $checkbox-margin;
-	padding: $checkbox-padding;
-	text-align: $checkbox-text-align;
-
-	+ .checkbox {
-		margin-top: 0;
-	}
-
-	label {
-		display: inline-block;
-		font-size: $checkbox-font-size;
-		font-weight: $checkbox-font-weight;
-		line-height: $checkbox-line-height;
-		padding-left: $checkbox-label-padding-left;
-		position: relative;
-		width: $checkbox-label-width;
-
-		&:focus-within {
-			outline: $checkbox-focus-outline;
-			outline-offset: $checkbox-focus-outline-offset;
-		}
-
-		input[type=checkbox] {
-			background: transparent;
-			border-color: $color-white;
-			border-radius: 0;
-			cursor: $checkbox-input-cursor;
-			left: $checkbox-input-position-left;
-			margin: $checkbox-input-margin;
-			position: absolute;
-			top: $checkbox-input-position-top;
-
-			&::before {
-				@include icon-fill;
-				background: $checkbox-input-background-color;
-				border: $checkbox-input-border;
-				border-radius: $checkbox-input-border-radius;
-				box-shadow: $checkbox-input-box-shadow;
-				color: $checkbox-input-background-color;
-				content: '\e920';
-				display: block;
-				height: $checkbox-input-size;
-				text-align: center;
-				transition: $checkbox-transition;
-				width: $checkbox-input-size;
-			}
-
-			&:checked::before {  // sass-lint:disable-line
-				background-color: $checkbox-input-checked-background-color;
-				border: $checkbox-input-checked-border;
-				color: $checkbox-input-checked-color;
-				font-size: $checkbox-input-font-size;
-				line-height: $checkbox-line-height;
-			}
-		}
-	}
-}

package/src/accessible-components/checkbox/checkbox.html

@@ -1,8 +0,0 @@
-{{#if this.field}}
-<div class="checkbox">
-	<label>
-		<input type="checkbox" {{{addAttributes this.field 'type'}}} />
-		{{{this.field.text}}}
-	</label>
-</div>
-{{/if}}

package/src/accessible-components/expand-collapse/_expand-collapse.scss

@@ -1,122 +0,0 @@
-$expand-collapse-transition: $base-transition !default;
-
-$expand-collapse-toggle-background-color: transparent !default;
-$expand-collapse-toggle-border: 0 !default;
-$expand-collapse-toggle-border-radius: 0 !default;
-$expand-collapse-toggle-color: $color-charcoal4 !default;
-$expand-collapse-toggle-font-size: 1rem !default;
-$expand-collapse-toggle-font-weight: 400 !default;
-$expand-collapse-toggle-letter-spacing: 0 !default;
-$expand-collapse-toggle-margin: 0 auto 45px !default;
-$expand-collapse-toggle-padding: 0 !default;
-$expand-collapse-toggle-text-transform: capitalize !default;
-
-$expand-collapse-icon-background-color: $color-white !default;
-$expand-collapse-icon-border: 1px solid $color-charcoal1 !default;
-$expand-collapse-icon-border-top: 0 !default;
-$expand-collapse-icon-border-radius: 100px !default;
-$expand-collapse-icon-color: $color-charcoal4 !default;
-$expand-collapse-icon-display: block !default;
-$expand-collapse-icon-font-size: 1.125rem !default;
-$expand-collapse-icon-line-height: 1 !default;
-$expand-collapse-icon-margin: -1px auto 0 !default;
-$expand-collapse-icon-padding: 5px 0 9px !default;
-$expand-collapse-icon-position: relative !default;
-$expand-collapse-icon-width: 60px !default;
-$expand-collapse-icon-z-index: 2 !default;
-
-$expand-collapse-label-display: inline-block !default;
-$expand-collapse-label-margin: 20px auto 0 !default;
-$expand-collapse-label-text-decoration: underline !default;
-
-$expand-collapse-target-max-height: 2000px !default;
-$expand-collapse-target-transition: .5s !default;
-
-// Focus
-$expand-collapse-toggle-focus-outline: 1px solid rgba($expand-collapse-toggle-color, .5) !default;
-$expand-collapse-toggle-focus-outline-offset: 2px !default;
-
-// Hover
-$expand-collapse-label-hover-background-color: transparent !default;
-$expand-collapse-toggle-hover-color: darken($expand-collapse-toggle-color, 20%) !default;
-$expand-collapse-icon-hover-color: darken($expand-collapse-icon-color, 20%) !default;
-
-.expand-collapse {
-	&__toggle {
-		background-color: $expand-collapse-toggle-background-color;
-		border: $expand-collapse-toggle-border;
-		border-radius: $expand-collapse-toggle-border-radius;
-		color: $expand-collapse-toggle-color;
-		cursor: pointer;
-		font-size: $expand-collapse-toggle-font-size;
-		font-weight: $expand-collapse-toggle-font-weight;
-		letter-spacing: $expand-collapse-toggle-letter-spacing;
-		margin: $expand-collapse-toggle-margin;
-		padding: $expand-collapse-toggle-padding;
-		text-transform: $expand-collapse-toggle-text-transform;
-		transition: $expand-collapse-transition;
-
-		&:focus {
-			outline: $expand-collapse-toggle-focus-outline;
-			outline-offset: $expand-collapse-toggle-focus-outline-offset;
-		}
-	}
-
-	&__icon {
-		background-color: $expand-collapse-icon-background-color;
-		border: $expand-collapse-icon-border;
-		border-top: $expand-collapse-icon-border-top;
-		border-bottom-left-radius: $expand-collapse-icon-border-radius;
-		border-bottom-right-radius: $expand-collapse-icon-border-radius;
-		color: $expand-collapse-icon-color;
-		display: $expand-collapse-icon-display;
-		font-size: $expand-collapse-icon-font-size;
-		line-height: $expand-collapse-icon-line-height;
-		margin: $expand-collapse-icon-margin;
-		padding: $expand-collapse-icon-padding;
-		position: $expand-collapse-icon-position;
-		transition: $expand-collapse-transition;
-		width: $expand-collapse-icon-width;
-		z-index: $expand-collapse-icon-z-index;
-	}
-
-	&__label {
-		display: $expand-collapse-label-display;
-		margin: $expand-collapse-label-margin;
-		text-decoration: $expand-collapse-label-text-decoration;
-		transition: $expand-collapse-transition;
-	}
-
-	&__target {
-		max-height: $expand-collapse-target-max-height;
-		overflow: hidden;
-		transition: $expand-collapse-target-transition;
-
-		&.collapsed {
-			max-height: 0;
-			opacity: 0;
-			visibility: collapse;
-		}
-	}
-}
-
-@include breakpoint-md {
-	.expand-collapse {
-		&__toggle {
-			&:focus,
-			&:hover {
-				color: $expand-collapse-toggle-hover-color;
-
-				.expand-collapse {
-					&__label {
-						background-color: $expand-collapse-label-hover-background-color;
-					}
-
-					&__icon {
-						color: $expand-collapse-icon-hover-color;
-					}
-				}
-			}
-		}
-	}
-}