@madie/madie-design-system 1.2.39 → 1.2.41

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

@@ -3,144 +3,144 @@ General sidebar styles
  */
 
 .sidebar {
-  background: $color-slate;
-  box-shadow: 4px 0 10px 0 transparentize($color-black, 0.7);
-  color: $color-white;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  overflow: hidden;
-  position: relative;
-  transition: width 0.6s ease-in-out;
-  width: $side-nav-expanded-width;
-
-  a {
-    text-decoration: none;
-
-    &:hover {
-      text-decoration: none;
-    }
-
-    &.unstyled {
-      color: inherit;
-    }
-  }
-
-  hr {
-    border-top: 1px solid transparentize($color-white, 0.8);
-    height: 1px;
-    margin: 25px $side-nav-horizontal-padding;
-    width: auto;
-
-    &.hr-smaller-vertical-spacing {
-      padding: 0px 22px 14px;
-      margin: 0;
-    }
-  }
-
-  ul {
-    line-height: 1.7;
-    list-style-type: none;
-    margin: 0;
-    padding: 2px 0;
-  }
-
-  svg {
-    position: relative;
-  }
-
-  .SVGInline {
-    display: none;
-  }
-
-  &.closed {
-    width: $side-nav-closed-width;
-  }
-
-  .alt-style {
-    background: $color-slate-dark;
-
-    .alt-style-header {
-      background: $color-slate;
-      padding-bottom: 25px;
-    }
-
-    .alt-style-nav {
-      padding-bottom: 25px;
-    }
-  }
-
-  /* Sidebar content */
-
-  .sidebar-content {
-    display: flex;
-    flex-direction: column;
-    flex-grow: 1;
-    overflow-x: hidden;
-    transition: overflow-x 0.6s;
-
-    .label {
-      @include typography('Rubik', 20px, 26px, $color-white);
-      display: block;
-      font-weight: normal;
-      padding: 30px 25px 20px;
-      text-align: left;
-      white-space: inherit;
-    }
-
-    .level-one-nav {
-      background-color: $color-slate;
-    }
-  }
-
-  /* Sidebar chart */
-
-  .chart-title {
-    align-items: center;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-
-    p {
-      margin: 0;
-    }
-
-    .title {
-      @include typography('Rubik', 16px, 22px, $color-white);
-      text-transform: uppercase;
-    }
-
-    .disclaimer {
-      @include typography(
-        'Rubik',
-        14px,
-        20px,
-        transparentize($color-white, 0.2)
-      );
-      align-items: center;
-      display: flex;
-      padding: 5px 0 10px;
-
-      svg {
-        height: 20px;
-        width: 20px;
-      }
-
-      .left-icon {
-        fill: transparentize($color-white, 0.2);
-        margin-right: 10px;
-      }
-
-      .right-icon {
-        fill: $color-teal-light;
-        margin-left: 10px;
-      }
-    }
-
-    .timestamp {
-      @include typography('Rubik', 13px, 20px, $color-white);
-      padding: 5px 0 20px;
-      text-transform: uppercase;
-    }
-  }
+	background: $color-slate;
+	box-shadow: 4px 0 10px 0 transparentize($color-black, 0.7);
+	color: $color-white;
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	overflow: hidden;
+	position: relative;
+	transition: width 0.6s ease-in-out;
+	width: $side-nav-expanded-width;
+
+	a {
+		text-decoration: none;
+
+		&:hover {
+			text-decoration: none;
+		}
+
+		&.unstyled {
+			color: inherit;
+		}
+	}
+
+	hr {
+		border-top: 1px solid transparentize($color-white, 0.8);
+		height: 1px;
+		margin: 25px $side-nav-horizontal-padding;
+		width: auto;
+
+		&.hr-smaller-vertical-spacing {
+			padding: 0px 22px 14px;
+			margin: 0;
+		}
+	}
+
+	ul {
+		line-height: 1.7;
+		list-style-type: none;
+		margin: 0;
+		padding: 2px 0;
+	}
+
+	svg {
+		position: relative;
+	}
+
+	.SVGInline {
+		display: none;
+	}
+
+	&.closed {
+		width: $side-nav-closed-width;
+	}
+
+	.alt-style {
+		background: $color-slate-dark;
+
+		.alt-style-header {
+			background: $color-slate;
+			padding-bottom: 25px;
+		}
+
+		.alt-style-nav {
+			padding-bottom: 25px;
+		}
+	}
+
+	/* Sidebar content */
+
+	.sidebar-content {
+		display: flex;
+		flex-direction: column;
+		flex-grow: 1;
+		overflow-x: hidden;
+		transition: overflow-x 0.6s;
+
+		.label {
+			@include typography("Rubik", 20px, 26px, $color-white);
+			display: block;
+			font-weight: normal;
+			padding: 30px 25px 20px;
+			text-align: left;
+			white-space: inherit;
+		}
+
+		.level-one-nav {
+			background-color: $color-slate;
+		}
+	}
+
+	/* Sidebar chart */
+
+	.chart-title {
+		align-items: center;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+
+		p {
+			margin: 0;
+		}
+
+		.title {
+			@include typography("Rubik", 16px, 22px, $color-white);
+			text-transform: uppercase;
+		}
+
+		.disclaimer {
+			@include typography(
+				"Rubik",
+				14px,
+				20px,
+				transparentize($color-white, 0.2)
+			);
+			align-items: center;
+			display: flex;
+			padding: 5px 0 10px;
+
+			svg {
+				height: 20px;
+				width: 20px;
+			}
+
+			.left-icon {
+				fill: transparentize($color-white, 0.2);
+				margin-right: 10px;
+			}
+
+			.right-icon {
+				fill: $color-teal-light;
+				margin-left: 10px;
+			}
+		}
+
+		.timestamp {
+			@include typography("Rubik", 13px, 20px, $color-white);
+			padding: 5px 0 20px;
+			text-transform: uppercase;
+		}
+	}
 }

package/styles/qppds/components/sidebar/project-specific/_wi.scss

@@ -2,7 +2,7 @@
 	WI specific styles
  */
 
- .sidebar {
+.sidebar {
 	&.sidebar-wi-nav .sidebar-content {
 		> .animation-group > a.link-back {
 			background: $color-slate;
@@ -28,13 +28,13 @@
 			padding: 25px $side-nav-horizontal-padding 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;
 			}
 		}

package/styles/qppds/index.scss

@@ -1,4 +1,4 @@
-@import './settings/index';
-@import './base/index';
-@import './utilities/index';
-@import './components/index';
+@import "./settings/index";
+@import "./base/index";
+@import "./utilities/index";
+@import "./components/index";

package/styles/qppds/settings/_functions.scss

@@ -1,4 +1,4 @@
 // Convert PX to REM units
 @function rem($size) {
-  @return ($size / 16px) * 1rem;
+	@return ($size / 16px) * 1rem;
 }

package/styles/qppds/settings/_index.scss

@@ -1,3 +1,3 @@
-@import './functions';
-@import './variables/index';
-@import './mixins/index';
+@import "./functions";
+@import "./variables/index";
+@import "./mixins/index";

package/styles/qppds/settings/mixins/_borders.scss

@@ -1,6 +1,6 @@
-@import '../variables/index';
+@import "../variables/index";
 
 @mixin raised-border {
-  border-radius: 3px;
-  box-shadow: 0 rem(2px) rem(8px) rgba(0, 0, 0, 0.1);
+	border-radius: 3px;
+	box-shadow: 0 rem(2px) rem(8px) rgba(0, 0, 0, 0.1);
 }

package/styles/qppds/settings/mixins/_focus.scss

@@ -1,28 +1,28 @@
 $none: none;
 
 @mixin focus-ring {
-  border: 1px solid $blue-70;
-  border-radius: 3px;
-  box-shadow: 0 0 0 4px $blue-10;
-  outline: none;
+	border: 1px solid $blue-70;
+	border-radius: 3px;
+	box-shadow: 0 0 0 4px $blue-10;
+	outline: none;
 }
 
 @mixin link-focus {
-  border: 1px solid $blue-70;
-  border-radius: 3px;
-  box-shadow: 0 0 0 4px $blue-10;
-  outline: none;
-  padding: 2px;
-  margin-left: -3px;
-  margin-right: -3px;
+	border: 1px solid $blue-70;
+	border-radius: 3px;
+	box-shadow: 0 0 0 4px $blue-10;
+	outline: none;
+	padding: 2px;
+	margin-left: -3px;
+	margin-right: -3px;
 
-  @media screen and (-ms-high-contrast: $none) {
-    // IE10+ specific styles go here
-    border: 0 solid transparent;
-    border-radius: 0;
-    outline: 1px solid $blue-70;
-    margin-left: 0;
-    margin-right: 0;
-    padding: 0;
-  }
+	@media screen and (-ms-high-contrast: $none) {
+		// IE10+ specific styles go here
+		border: 0 solid transparent;
+		border-radius: 0;
+		outline: 1px solid $blue-70;
+		margin-left: 0;
+		margin-right: 0;
+		padding: 0;
+	}
 }

package/styles/qppds/settings/mixins/_icons.scss

@@ -1,33 +1,33 @@
 @mixin inline-icon {
-  position: relative;
-  vertical-align: middle;
-  margin-bottom: -0.1em; // apply negative margin so icon doesn't affect height
-  margin-top: -0.1em;
-  height: 1em;
-  width: 1em;
+	position: relative;
+	vertical-align: middle;
+	margin-bottom: -0.1em; // apply negative margin so icon doesn't affect height
+	margin-top: -0.1em;
+	height: 1em;
+	width: 1em;
 }
 
 @mixin inline-icon-md {
-  @include inline-icon;
-  margin-bottom: -0.2em;
-  margin-top: -0.3em;
-  height: 1.25em;
-  width: 1.25em;
+	@include inline-icon;
+	margin-bottom: -0.2em;
+	margin-top: -0.3em;
+	height: 1.25em;
+	width: 1.25em;
 }
 
 @mixin inline-icon-lg {
-  @include inline-icon;
-  margin-bottom: -0.3em;
-  margin-top: -0.4em;
-  height: 1.5em;
-  width: 1.5em;
+	@include inline-icon;
+	margin-bottom: -0.3em;
+	margin-top: -0.4em;
+	height: 1.5em;
+	width: 1.5em;
 }
 
 @mixin mat-icon {
-  fill: currentColor;
+	fill: currentColor;
 }
 
 @mixin feather-icon {
-  stroke: currentColor;
-  fill: none;
+	stroke: currentColor;
+	fill: none;
 }

package/styles/qppds/settings/mixins/_index.scss

@@ -1,8 +1,8 @@
-@import './visually-hidden';
-@import './icons';
-@import './lists';
-@import './layout';
-@import './focus';
-@import './table';
-@import './borders';
-@import './type';
+@import "./visually-hidden";
+@import "./icons";
+@import "./lists";
+@import "./layout";
+@import "./focus";
+@import "./table";
+@import "./borders";
+@import "./type";

package/styles/qppds/settings/mixins/_layout.scss

@@ -1,74 +1,74 @@
-@import '../variables/layout';
+@import "../variables/layout";
 
-$at-media-error-message: 'breakpoint mixin supports: xxs, xs, sm, md, lg, xl';
+$at-media-error-message: "breakpoint mixin supports: xxs, xs, sm, md, lg, xl";
 
 /*
 NOTE: named this "media-breakpoint" so as not to conflict with existing qpp-style
 mixin "breakpoint" used for legacy css.
 */
 @mixin media-breakpoint($class) {
-  @if $class == xxs {
-    @media all and (min-width: $width-xxs) {
-      @content;
-    }
-  } @else if $class == xs {
-    @media all and (min-width: $width-xs) {
-      @content;
-    }
-  } @else if $class == sm {
-    @media all and (min-width: $width-sm) {
-      @content;
-    }
-  } @else if $class == md {
-    @media all and (min-width: $width-md) {
-      @content;
-    }
-  } @else if $class == lg {
-    @media all and (min-width: $width-lg) {
-      @content;
-    }
-  } @else if $class == xl {
-    @media all and (min-width: $width-xl) {
-      @content;
-    }
-  } @else {
-    @warn $at-media-error-message;
-  }
+	@if $class == xxs {
+		@media all and (min-width: $width-xxs) {
+			@content;
+		}
+	} @else if $class == xs {
+		@media all and (min-width: $width-xs) {
+			@content;
+		}
+	} @else if $class == sm {
+		@media all and (min-width: $width-sm) {
+			@content;
+		}
+	} @else if $class == md {
+		@media all and (min-width: $width-md) {
+			@content;
+		}
+	} @else if $class == lg {
+		@media all and (min-width: $width-lg) {
+			@content;
+		}
+	} @else if $class == xl {
+		@media all and (min-width: $width-xl) {
+			@content;
+		}
+	} @else {
+		@warn $at-media-error-message;
+	}
 }
 
 // alias to old mixin name, updated to match uswds
 @mixin at-media($bp) {
-  @include media-breakpoint($bp) {
-    @content;
-  }
+	@include media-breakpoint($bp) {
+		@content;
+	}
 }
 
 @mixin at-media-max($bp) {
-  @if $bp == xxs {
-    @media all and (max-width: $width-xxs) {
-      @content;
-    }
-  } @else if $bp == xs {
-    @media all and (max-width: $width-xs) {
-      @content;
-    }
-  } @else if $bp == sm {
-    @media all and (max-width: $width-sm) {
-      @content;
-    }
-  } @else if $bp == md {
-    @media all and (max-width: $width-md) {
-      @content;
-    }
-  } @else if $bp == lg {
-    @media all and (max-width: $width-lg) {
-      @content;
-    }
-  } @else if $bp == xl {
-    @media all and (max-width: $width-xl) {
-      @content;
-    }
-  } @else {
-    @warn $at-media-error-message;
-  }
+	@if $bp == xxs {
+		@media all and (max-width: $width-xxs) {
+			@content;
+		}
+	} @else if $bp == xs {
+		@media all and (max-width: $width-xs) {
+			@content;
+		}
+	} @else if $bp == sm {
+		@media all and (max-width: $width-sm) {
+			@content;
+		}
+	} @else if $bp == md {
+		@media all and (max-width: $width-md) {
+			@content;
+		}
+	} @else if $bp == lg {
+		@media all and (max-width: $width-lg) {
+			@content;
+		}
+	} @else if $bp == xl {
+		@media all and (max-width: $width-xl) {
+			@content;
+		}
+	} @else {
+		@warn $at-media-error-message;
+	}
 }

package/styles/qppds/settings/mixins/_lists.scss

@@ -1,12 +1,12 @@
 // Unstyled list helper
 @mixin unstyled-list() {
-  margin-top: 0;
-  margin-bottom: 0;
-  list-style-type: none;
-  padding-left: 0;
+	margin-top: 0;
+	margin-bottom: 0;
+	list-style-type: none;
+	padding-left: 0;
 
-  > li {
-    margin-bottom: 0;
-    max-width: unset;
-  }
+	> li {
+		margin-bottom: 0;
+		max-width: unset;
+	}
 }