@madie/madie-design-system 1.2.39 → 1.2.41

package/styles/components/_modals.scss

@@ -1,18 +1,18 @@
 .modal-subscribe-footer {
-  padding-top: 10px;
-  text-align: center;
+	padding-top: 10px;
+	text-align: center;
 }
 
 .modal-footer {
-  text-align: center;
+	text-align: center;
 
-  a {
-    margin-right: 20px;
-  }
+	a {
+		margin-right: 20px;
+	}
 }
 
 #privacy-modal {
-  .text-wrap-normal {
-    white-space: normal;
-  }
+	.text-wrap-normal {
+		white-space: normal;
+	}
 }

package/styles/components/_score-chart.scss

@@ -68,7 +68,7 @@
 	}
 
 	.chart-tooltip {
-		@include typography('Rubik', 14px, 20px, $color-text-main);
+		@include typography("Rubik", 14px, 20px, $color-text-main);
 		background-color: rgba(255, 255, 255, 0.85);
 		border-radius: 10px;
 		box-shadow: 4px 4px 10px rbga(0, 0, 0, 0.4);
@@ -90,7 +90,7 @@
 		flex-direction: row;
 
 		& button {
-			@include typography('Rubik', 14px, 20px, $color-teal-light);
+			@include typography("Rubik", 14px, 20px, $color-teal-light);
 			cursor: pointer;
 			fill: $color-teal-light;
 			margin: 20px 0;
@@ -119,7 +119,7 @@
 		text-align: left;
 
 		& button {
-			@include typography('Rubik', 14px, 20px, $color-white);
+			@include typography("Rubik", 14px, 20px, $color-white);
 			margin-bottom: 7px;
 		}
 

package/styles/components/_tables.scss

@@ -1,111 +1,111 @@
 /* Tables */
 
 .thead-inverse th {
-  background-color: $table-primary-color;
-  color: $color-white; // Bootstrap 3
+	background-color: $table-primary-color;
+	color: $color-white; // Bootstrap 3
 }
 
 .table {
-  font-size: 1.1rem;
-
-  th {
-    border-top: none;
-    font-weight: 500;
-  }
-
-  th,
-  td {
-    border-color: $table-border-color !important; // Impotant Bootstrap 3
-    padding: 1.2rem 1.4rem !important; // Impotant Bootstrap 3
-  }
+	font-size: 1.1rem;
+
+	th {
+		border-top: none;
+		font-weight: 500;
+	}
+
+	th,
+	td {
+		border-color: $table-border-color !important; // Impotant Bootstrap 3
+		padding: 1.2rem 1.4rem !important; // Impotant Bootstrap 3
+	}
 }
 
 .table-bordered {
-  border: none;
+	border: none;
 
-  thead {
-    th {
-      border-bottom: none !important; // Impotant Bootstrap 3
-    }
-  }
+	thead {
+		th {
+			border-bottom: none !important; // Impotant Bootstrap 3
+		}
+	}
 }
 
 .table thead {
-  tr {
-    th {
-      border-bottom: none;
-      vertical-align: middle;
-    }
-  }
+	tr {
+		th {
+			border-bottom: none;
+			vertical-align: middle;
+		}
+	}
 }
 
 .table-bordered thead th:first-of-type {
-  border-left: none;
+	border-left: none;
 }
 
 .table-bordered thead th:last-of-type {
-  border-right-color: $table-primary-color;
+	border-right-color: $table-primary-color;
 }
 
 .table tbody {
-  tr {
-    &:first-of-type {
-      td {
-        border-top: 0;
-      }
-    }
-  }
+	tr {
+		&:first-of-type {
+			td {
+				border-top: 0;
+			}
+		}
+	}
 }
 
 .table-striped tbody tr:nth-of-type(odd) {
-  background-color: transparent;
+	background-color: transparent;
 }
 
 .table-striped tbody tr:nth-of-type(even) {
-  background-color: $table-stripe-color;
+	background-color: $table-stripe-color;
 }
 
 // Mobile table fixes
 
 .table-container {
-  margin: 0 0 1em;
-  overflow-y: auto;
-  width: 100%;
-
-  &::-webkit-scrollbar {
-    -webkit-appearance: none;
-    height: 14px;
-    width: 14px;
-  }
-
-  &::-webkit-scrollbar-thumb {
-    background-color: rgba(0, 0, 0, 0.3);
-    border: 3px solid $color-white;
-    border-radius: 8px;
-  }
-
-  .table {
-    @include breakpoint(xs) {
-      margin-bottom: 2rem;
-      position: relative;
-
-      &::after {
-        bottom: -32px;
-        content: 'Scroll to view table \2192';
-        font-size: 0.9rem;
-        font-weight: 100;
-        position: absolute;
-      }
-    }
-  }
+	margin: 0 0 1em;
+	overflow-y: auto;
+	width: 100%;
+
+	&::-webkit-scrollbar {
+		-webkit-appearance: none;
+		height: 14px;
+		width: 14px;
+	}
+
+	&::-webkit-scrollbar-thumb {
+		background-color: rgba(0, 0, 0, 0.3);
+		border: 3px solid $color-white;
+		border-radius: 8px;
+	}
+
+	.table {
+		@include breakpoint(xs) {
+			margin-bottom: 2rem;
+			position: relative;
+
+			&::after {
+				bottom: -32px;
+				content: "Scroll to view table \2192";
+				font-size: 0.9rem;
+				font-weight: 100;
+				position: absolute;
+			}
+		}
+	}
 }
 
 .no-scroll-table-container {
-  overflow-y: inherit !important;
-  overflow: inherit !important;
-  .table {
-    &::after {
-      content: '' !important;
-    }
-  }
+	overflow-y: inherit !important;
+	overflow: inherit !important;
+	.table {
+		&::after {
+			content: "" !important;
+		}
+	}
 }

package/styles/components/_tabs.scss

@@ -32,13 +32,13 @@
 		text-decoration: none;
 		text-transform: uppercase;
 
-		&[aria-selected='true'] {
+		&[aria-selected="true"] {
 			border-bottom-color: $color-white;
 			color: $color-text-main;
 			font-weight: $rubik-medium;
 		}
 
-		&[aria-disabled='true'] {
+		&[aria-disabled="true"] {
 			background: $color-gray-very-light;
 			color: $color-gray-darker-medium;
 			cursor: not-allowed;
@@ -52,7 +52,7 @@
 			display: none;
 		}
 
-		&[aria-hidden='true'] {
+		&[aria-hidden="true"] {
 			display: none;
 		}
 	}

package/styles/components/_text-field-variable.scss

@@ -1,14 +1,14 @@
 .text-area-variable {
-    border-radius: 3px;
-    margin-top: 8px;
-    font-family: Rubik, sans-serif;
-    font-size: 14px;
-    padding: 8px 14px;
-    &::placeholder {
-        opacity: 1;
-        color: #717171;
-    }
-    &.error{
-        border-color: #AE1C1C !important;
-    }
-}
+	border-radius: 3px;
+	margin-top: 8px;
+	font-family: Rubik, sans-serif;
+	font-size: 14px;
+	padding: 8px 14px;
+	&::placeholder {
+		opacity: 1;
+		color: #717171;
+	}
+	&.error {
+		border-color: #ae1c1c !important;
+	}
+}

package/styles/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/components/_variables.scss

@@ -86,7 +86,7 @@ $border-radius-large: 4px;
 $border-radius-small: 4px;
 // ============================================================================= FONTS SETUP
 $font-size-base: 16px;
-$font-family-base: Rubik, Arial, 'Helvetica Neue', Helvetica, sans-serif;
+$font-family-base: Rubik, Arial, "Helvetica Neue", Helvetica, sans-serif;
 
 // ============================================================================= TEXT
 $color-text-main: $color-gray-darker;
@@ -134,22 +134,22 @@ $rubik-bold: 700;
 // Text style based on https://confluence.cms.gov/pages/viewpage.action?spaceKey=QPPPRACTICE&title=Design+Specifications
 // Structure: (font-size(desktop), font-size(mobile), line-height(desktop), line-height(mobile), font-weight)
 $headings: (
-  (44, 32, 48, 38, $rubik-regular),
-  (32, 26, 38, 30, $rubik-regular),
-  (24, 20, 29, 24, $rubik-medium),
-  (18, 18, 22, 22, $rubik-medium),
-  (16, 16, 21, 21, $rubik-medium),
-  (14, 14, 19, 19, $rubik-medium)
+	(44, 32, 48, 38, $rubik-regular),
+	(32, 26, 38, 30, $rubik-regular),
+	(24, 20, 29, 24, $rubik-medium),
+	(18, 18, 22, 22, $rubik-medium),
+	(16, 16, 21, 21, $rubik-medium),
+	(14, 14, 19, 19, $rubik-medium)
 );
 
 // Structure: (Desktop (px), Tablet(px), Mobile(px), Font Weight, Transform)
 $content-headings: (
-  (56, 34, 34, $rubik-light, initial),
-  (46, 28, 28, $rubik-light, initial),
-  (36, 24, 24, $rubik-regular, initial),
-  (30, 20, 20, $rubik-medium, initial),
-  (24, 18, 18, $rubik-medium, initial),
-  (18, 18, 16, $rubik-bold, uppercase)
+	(56, 34, 34, $rubik-light, initial),
+	(46, 28, 28, $rubik-light, initial),
+	(36, 24, 24, $rubik-regular, initial),
+	(30, 20, 20, $rubik-medium, initial),
+	(24, 18, 18, $rubik-medium, initial),
+	(18, 18, 16, $rubik-bold, uppercase)
 );
 // ============================================================================= SCREEN SIZE
 $screen-sm: 768px;

package/styles/qppds/base/_backgrounds.scss

@@ -1,7 +1,7 @@
 // stylelint-disable declaration-no-important
-@import '../settings/index';
+@import "../settings/index";
 
 .qpp-dark-background {
-  background-color: $blue-80;
-  color: $white;
+	background-color: $blue-80;
+	color: $white;
 }

package/styles/qppds/base/_fonts.scss

@@ -1,26 +1,26 @@
-@import '../settings/index';
+@import "../settings/index";
 
 @font-face {
-  font-family: Rubik;
-  font-style: normal;
-  font-weight: 300;
-  src: url('#{$font-path}Rubik-Light.ttf');
+	font-family: Rubik;
+	font-style: normal;
+	font-weight: 300;
+	src: url("#{$font-path}Rubik-Light.ttf");
 }
 @font-face {
-  font-family: Rubik;
-  font-style: normal;
-  font-weight: 400;
-  src: url('#{$font-path}Rubik-Regular.ttf');
+	font-family: Rubik;
+	font-style: normal;
+	font-weight: 400;
+	src: url("#{$font-path}Rubik-Regular.ttf");
 }
 @font-face {
-  font-family: Rubik;
-  font-style: normal;
-  font-weight: 500;
-  src: url('#{$font-path}Rubik-Medium.ttf');
+	font-family: Rubik;
+	font-style: normal;
+	font-weight: 500;
+	src: url("#{$font-path}Rubik-Medium.ttf");
 }
 @font-face {
-  font-family: Rubik;
-  font-style: normal;
-  font-weight: 700;
-  src: url('#{$font-path}Rubik-Bold.ttf');
+	font-family: Rubik;
+	font-style: normal;
+	font-weight: 700;
+	src: url("#{$font-path}Rubik-Bold.ttf");
 }

package/styles/qppds/base/_icon.scss

@@ -1,23 +1,23 @@
-@import '../settings/variables/index';
+@import "../settings/variables/index";
 
 .qpp-icon-inline {
-  @include inline-icon;
+	@include inline-icon;
 }
 
 .qpp-icon-inline--md {
-  @include inline-icon-md;
+	@include inline-icon-md;
 }
 
 .qpp-icon-inline--lg {
-  @include inline-icon-lg;
+	@include inline-icon-lg;
 }
 
 .qpp-icon-mat {
-  @include mat-icon;
+	@include mat-icon;
 }
 
 // Deprecated.  Will be removed once feather icons are
 // no longer used by applications.
 .qpp-icon-feather {
-  @include feather-icon;
+	@include feather-icon;
 }

package/styles/qppds/base/_layout.scss

@@ -1,5 +1,5 @@
-@import '../settings/index';
+@import "../settings/index";
 
 .qpp-raised-border {
-  @include raised-border;
+	@include raised-border;
 }