@madie/madie-design-system 1.2.39 → 1.2.41

package/styles/qppds/components/_text-input.scss

@@ -1,60 +1,60 @@
-@import '../settings/index';
+@import "../settings/index";
 
 .qpp-c-text-input {
-  display: block;
-  border: 1px solid $gray-10;
-  border-radius: 3px;
-  color: $gray-80;
-  font-size: $font-size-14;
-  font-family: $font-rubik;
-  font-weight: $font-regular;
-  line-height: $line-height-xs;
-  background-color: $white;
-  box-sizing: border-box;
-  padding: $spacing-12 $spacing-16;
-  height: $spacing-40;
-
-  &:focus,
-  &.qpp-c-text-input--focus {
-    border: 1px solid $blue-60;
-    box-shadow: 0 0 0 4px $blue-10;
-    outline: none;
-    text-decoration: none;
-  }
-
-  &:disabled,
-  &.qpp-c-text-input--disabled {
-    background-color: $gray-04;
-    color: $gray-60;
-  }
-
-  &.qpp-c-text-input--error {
-    border: 1px solid $red-60;
-
-    &:focus,
-    &.qpp-c-button--focus {
-      border: 1px solid $red-50;
-      box-shadow: 0 0 0 4px $red-10;
-    }
-  }
-
-  &.qpp-c-text-input--success {
-    padding-right: $spacing-32;
-    background-size: $font-size-20 auto, 100%;
-    background-position: right $spacing-12 top 50%, 0 0;
-    background-repeat: no-repeat, repeat;
-    background-image: url("data:image/svg+xml,%3Csvg fill='rgb(124, 179, 66)' color='currentColor' viewBox='0 0 1792 1792' width='1792' height='1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1412 734q0-28-18-46l-91-90q-19-19-45-19t-45 19l-408 407-226-226q-19-19-45-19t-45 19l-91 90q-18 18-18 46 0 27 18 45l362 362q19 19 45 19 27 0 46-19l543-543q18-18 18-45zm252 162q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z'/%3E%3C/svg%3E");
-    appearance: none;
-    -moz-appearance: none; /* stylelint-disable-line property-no-vendor-prefix */
-    -webkit-appearance: none; /* stylelint-disable-line property-no-vendor-prefix */
-  }
-
-  &.qpp-c-text-input--big {
-    height: $spacing-48;
-    padding: $spacing-16;
-  }
-
-  &::-ms-clear {
-    display: none;
-  }
+	display: block;
+	border: 1px solid $gray-10;
+	border-radius: 3px;
+	color: $gray-80;
+	font-size: $font-size-14;
+	font-family: $font-rubik;
+	font-weight: $font-regular;
+	line-height: $line-height-xs;
+	background-color: $white;
+	box-sizing: border-box;
+	padding: $spacing-12 $spacing-16;
+	height: $spacing-40;
+
+	&:focus,
+	&.qpp-c-text-input--focus {
+		border: 1px solid $blue-60;
+		box-shadow: 0 0 0 4px $blue-10;
+		outline: none;
+		text-decoration: none;
+	}
+
+	&:disabled,
+	&.qpp-c-text-input--disabled {
+		background-color: $gray-04;
+		color: $gray-60;
+	}
+
+	&.qpp-c-text-input--error {
+		border: 1px solid $red-60;
+
+		&:focus,
+		&.qpp-c-button--focus {
+			border: 1px solid $red-50;
+			box-shadow: 0 0 0 4px $red-10;
+		}
+	}
+
+	&.qpp-c-text-input--success {
+		padding-right: $spacing-32;
+		background-size: $font-size-20 auto, 100%;
+		background-position: right $spacing-12 top 50%, 0 0;
+		background-repeat: no-repeat, repeat;
+		background-image: url("data:image/svg+xml,%3Csvg fill='rgb(124, 179, 66)' color='currentColor' viewBox='0 0 1792 1792' width='1792' height='1792' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1412 734q0-28-18-46l-91-90q-19-19-45-19t-45 19l-408 407-226-226q-19-19-45-19t-45 19l-91 90q-18 18-18 46 0 27 18 45l362 362q19 19 45 19 27 0 46-19l543-543q18-18 18-45zm252 162q0 209-103 385.5t-279.5 279.5-385.5 103-385.5-103-279.5-279.5-103-385.5 103-385.5 279.5-279.5 385.5-103 385.5 103 279.5 279.5 103 385.5z'/%3E%3C/svg%3E");
+		appearance: none;
+		-moz-appearance: none; /* stylelint-disable-line property-no-vendor-prefix */
+		-webkit-appearance: none; /* stylelint-disable-line property-no-vendor-prefix */
+	}
+
+	&.qpp-c-text-input--big {
+		height: $spacing-48;
+		padding: $spacing-16;
+	}
+
+	&::-ms-clear {
+		display: none;
+	}
 }

package/styles/qppds/components/_toast.scss

@@ -5,80 +5,80 @@ $red-50: #d92f2f;
 $green-30: #7cb342;
 
 .toast {
-  border: solid 2px #fff;
-  border-radius: 4px;
-  min-height: 52px;
-  min-width: 858px;
-  padding: 0px 8px;
-  color: #333;
-  font-family: Rubik, sans-serif;
-  font-weight: 400;
-  font-size: 14px;
-  display: flex;
-  align-items: center;
-  background-color: #fff;
-  position: relative;
-  gap: 8px;
+	border: solid 2px #fff;
+	border-radius: 4px;
+	min-height: 52px;
+	min-width: 858px;
+	padding: 0px 8px;
+	color: #333;
+	font-family: Rubik, sans-serif;
+	font-weight: 400;
+	font-size: 14px;
+	display: flex;
+	align-items: center;
+	background-color: #fff;
+	position: relative;
+	gap: 8px;
 
-  &.inactive {
-    display: none;
-  }
-  > svg {
-    margin-right: 8px;
-  }
-  &.warning {
-    border-color: $gold-20;
-    &:before {
-      background-color: $gold-20;
-    }
-    > svg {
-      color: #df711c;
-    }
-  }
-  &.info {
-    border-color: $performance-blue;
-    &:before {
-      background-color: $performance-blue;
-    }
-    > svg {
-      color: #125496;
-    }
-  }
-  &.danger {
-    border-color: $red-50;
-    &:before {
-      background-color: $red-50;
-    }
-    > svg {
-      color: #ae1c1c;
-    }
-  }
-  &.success {
-    border-color: $green-30;
-    &:before {
-      background-color: $green-30;
-    }
-    > svg {
-      color: #4d7e23;
-    }
-  }
-  #content {
-    > ol,
-    > ul,
-    > li,
-    > p,
-    > a,
-    > h1,
-    > h2,
-    > h3,
-    > h4,
-    > h5 {
-      margin: 0;
-      > li {
-        // get rid of the unnecessary natural list gaps
-        line-height: 1;
-        margin: 0;
-      }
-    }
-  }
+	&.inactive {
+		display: none;
+	}
+	> svg {
+		margin-right: 8px;
+	}
+	&.warning {
+		border-color: $gold-20;
+		&:before {
+			background-color: $gold-20;
+		}
+		> svg {
+			color: #df711c;
+		}
+	}
+	&.info {
+		border-color: $performance-blue;
+		&:before {
+			background-color: $performance-blue;
+		}
+		> svg {
+			color: #125496;
+		}
+	}
+	&.danger {
+		border-color: $red-50;
+		&:before {
+			background-color: $red-50;
+		}
+		> svg {
+			color: #ae1c1c;
+		}
+	}
+	&.success {
+		border-color: $green-30;
+		&:before {
+			background-color: $green-30;
+		}
+		> svg {
+			color: #4d7e23;
+		}
+	}
+	#content {
+		> ol,
+		> ul,
+		> li,
+		> p,
+		> a,
+		> h1,
+		> h2,
+		> h3,
+		> h4,
+		> h5 {
+			margin: 0;
+			> li {
+				// get rid of the unnecessary natural list gaps
+				line-height: 1;
+				margin: 0;
+			}
+		}
+	}
 }

package/styles/qppds/components/index.scss

@@ -1,23 +1,23 @@
-@import './link';
-@import './madie-discard-dialog';
-@import './madie-delete-dialog';
-@import './madie-confirm-dialog';
-@import './madie-tooltip';
-@import './madie-alert';
-@import './button';
-@import './dropdown';
-@import './breadcrumbs';
-@import './modal';
-@import './page-header';
-@import './text-field-variable';
-@import './text-input';
-@import './search';
-@import './table';
-@import './tabs';
-@import './card';
-@import './alert';
-@import './footer';
-@import './header';
-@import './sidebar';
-@import './pagination';
-@import './toast';
+@import "./link";
+@import "./madie-discard-dialog";
+@import "./madie-delete-dialog";
+@import "./madie-confirm-dialog";
+@import "./madie-tooltip";
+@import "./madie-alert";
+@import "./button";
+@import "./dropdown";
+@import "./breadcrumbs";
+@import "./modal";
+@import "./page-header";
+@import "./text-field-variable";
+@import "./text-input";
+@import "./search";
+@import "./table";
+@import "./tabs";
+@import "./card";
+@import "./alert";
+@import "./footer";
+@import "./header";
+@import "./sidebar";
+@import "./pagination";
+@import "./toast";

package/styles/qppds/components/sidebar/_cms.scss

@@ -7,13 +7,13 @@ CMS specific styles
 		padding: 25px 25px 0;
 
 		.quality-title {
-			@include typography('Rubik', 14px, 16px, $color-white);
+			@include typography("Rubik", 14px, 16px, $color-white);
 			font-weight: 500;
 			text-transform: uppercase;
 		}
 
 		.quality-subtitle {
-			@include typography('Rubik', 14px, 16px, $color-white);
+			@include typography("Rubik", 14px, 16px, $color-white);
 			padding: 10px 0 0;
 		}
 	}
@@ -26,7 +26,7 @@ CMS specific styles
 		.completed,
 		.trial-period {
 			@include typography(
-				'Rubik',
+				"Rubik",
 				14px,
 				20px,
 				transparentize($color-white, 0.2)
@@ -34,13 +34,13 @@ CMS specific styles
 
 			& span {
 				color: $color-white;
-				font-family: 'Rubik', sans-serif;
+				font-family: "Rubik", sans-serif;
 				font-weight: 500;
 			}
 		}
 
 		a.button {
-			@include typography('Rubik', 14px, 20px, $color-teal-light);
+			@include typography("Rubik", 14px, 20px, $color-teal-light);
 			background: transparent;
 			border: 2px solid $color-teal-light;
 			border-radius: 28px;

package/styles/qppds/components/sidebar/_details.scss

@@ -9,12 +9,12 @@ Shared details
 		padding: 0 25px;
 
 		.practice-name {
-			@include typography('Rubik', 20px, 26px, $color-white);
+			@include typography("Rubik", 20px, 26px, $color-white);
 		}
 
 		.practice-tin,
 		.vg-id {
-			@include typography('Rubik', 14px, 16px, $color-white);
+			@include typography("Rubik", 14px, 16px, $color-white);
 			padding-top: 10px;
 		}
 	}
@@ -25,18 +25,18 @@ Shared details
 		padding: 25px 25px 0;
 
 		.individual-name {
-			@include typography('Rubik', 16px, 22px, $color-white);
+			@include typography("Rubik", 16px, 22px, $color-white);
 			font-weight: 500;
 			text-transform: uppercase;
 		}
 
 		.individual-npi {
-			@include typography('Rubik', 14px, 16px, $color-white);
+			@include typography("Rubik", 14px, 16px, $color-white);
 			padding: 10px 0 0;
 		}
 
 		.individual-link {
-			@include typography('Rubik', 14px, 20px, $color-teal-light);
+			@include typography("Rubik", 14px, 20px, $color-teal-light);
 			padding-bottom: 10px;
 
 			&:hover {

package/styles/qppds/components/sidebar/_links.scss

@@ -25,7 +25,7 @@ Inline and back links
 	.link-inline,
 	.link-back,
 	.account-home-link {
-		@include typography('Rubik', 16px, 22px, $color-teal-light);
+		@include typography("Rubik", 16px, 22px, $color-teal-light);
 		@include hover($color-white);
 		align-items: center;
 		display: flex;
@@ -103,7 +103,7 @@ Inline and back links
 	}
 
 	.link-collapse {
-		@include typography('Rubik', 14px, 0, $color-gray-medium);
+		@include typography("Rubik", 14px, 0, $color-gray-medium);
 		padding: 20px 0;
 
 		.left-icon {
@@ -116,7 +116,7 @@ Inline and back links
 	}
 
 	.link-expand {
-		@include typography('Rubik', 14px, 14px, $color-gray-medium);
+		@include typography("Rubik", 14px, 14px, $color-gray-medium);
 		flex-direction: column;
 		padding: 6px 0 20px;
 
@@ -178,7 +178,7 @@ Inline and back links
 	/* Collapsed links (when the sidebar is collapsed) */
 
 	.link-collapsed {
-		@include typography('Rubik', 16px, 22px, $color-teal-light);
+		@include typography("Rubik", 16px, 22px, $color-teal-light);
 		align-items: center;
 		display: flex;
 		fill: $color-teal-light;
@@ -194,7 +194,7 @@ Inline and back links
 		}
 
 		&[disabled] {
-			@include typography('Rubik', 16px, 22px, $color-gray-dark);
+			@include typography("Rubik", 16px, 22px, $color-gray-dark);
 
 			.left-icon {
 				fill: $color-white;
@@ -203,11 +203,11 @@ Inline and back links
 	}
 
 	.link-drawer .drawer a {
-		@include typography('Rubik', 14px, 22px, $color-teal-light);
+		@include typography("Rubik", 14px, 22px, $color-teal-light);
 	}
 
 	.link-slide-out .switcher-content li a {
-		@include typography('Rubik', 16px, 22px, $color-teal-light);
+		@include typography("Rubik", 16px, 22px, $color-teal-light);
 	}
 
 	.link-drawer .drawer .active-link > a,
@@ -328,7 +328,7 @@ Inline and back links
 
 	.link-slide-out {
 		.switcher {
-			@include typography('Rubik', 14px, 16px, $color-gray-medium);
+			@include typography("Rubik", 14px, 16px, $color-gray-medium);
 			align-items: center;
 			display: flex;
 			fill: $color-gray-medium;
@@ -357,7 +357,7 @@ Inline and back links
 		}
 
 		.switcher-content {
-			@include typography('Rubik', 16px, 22px, $color-teal-light);
+			@include typography("Rubik", 16px, 22px, $color-teal-light);
 			background: $color-slate-dark;
 			height: 100%;
 			left: 0;
@@ -365,7 +365,8 @@ Inline and back links
 			padding: 0 25px;
 			position: absolute;
 			top: 0;
-			transition: z-index 0.6s step-start, opacity 0.6s step-end, left 0.6s;
+			transition: z-index 0.6s step-start, opacity 0.6s step-end,
+				left 0.6s;
 			width: $side-nav-expanded-width;
 			z-index: -1;
 
@@ -374,7 +375,7 @@ Inline and back links
 			}
 
 			.practices-title {
-				@include typography('Rubik', 18px, 26px, $color-white);
+				@include typography("Rubik", 18px, 26px, $color-white);
 				font-weight: 500;
 				padding: 23px 0;
 			}

package/styles/qppds/components/sidebar/_sidebar-animation.scss

@@ -8,7 +8,7 @@ $detailsMaxHeight: 130px;
 		0% {
 			max-height: $maxHeight;
 		}
-	
+
 		100% {
 			max-height: 0;
 			padding-top: 0;
@@ -22,16 +22,16 @@ $detailsMaxHeight: 130px;
 			padding-top: 0;
 			padding-bottom: 0;
 		}
-	
+
 		100% {
 			max-height: $maxHeight;
 		}
 	}
 }
-@include delayKeyframes('Drawer', $drawerMaxHeight);
-@include delayKeyframes('Simple', $simpleMaxHeight);
-@include delayKeyframes('Chart', $chartMaxHeight);
-@include delayKeyframes('Details', $detailsMaxHeight);
+@include delayKeyframes("Drawer", $drawerMaxHeight);
+@include delayKeyframes("Simple", $simpleMaxHeight);
+@include delayKeyframes("Chart", $chartMaxHeight);
+@include delayKeyframes("Details", $detailsMaxHeight);
 
 .animation-group {
 	transition: opacity 0.5s ease-in-out;
@@ -69,7 +69,7 @@ $detailsMaxHeight: 130px;
 	animation-name: delayAddDetails;
 }
 
-.animation-group-details.animation-group-exit {	
+.animation-group-details.animation-group-exit {
 	animation-name: delayRemoveDetails;
 }
 
@@ -77,7 +77,7 @@ $detailsMaxHeight: 130px;
 	animation-name: delayAddChart;
 }
 
-.animation-group-chart.animation-group-exit {	
+.animation-group-chart.animation-group-exit {
 	animation-name: delayRemoveChart;
 }
 
@@ -86,7 +86,7 @@ $detailsMaxHeight: 130px;
 		animation-name: delayAddDrawer;
 	}
 
-	.animation-group-exit {	
+	.animation-group-exit {
 		animation-name: delayRemoveDrawer;
 	}
 }

package/styles/qppds/components/sidebar/_sidebar-tooltip.scss

@@ -18,7 +18,7 @@
 }
 
 .sidebar-tooltip-text:after {
-	content: ' ';
+	content: " ";
 	height: 0;
 	width: 0;
 	position: absolute;