@madie/madie-design-system 1.2.39 → 1.2.41

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

@@ -1,91 +1,91 @@
-@import '../variables/index';
+@import "../variables/index";
 
 @mixin table-stacked-styles {
-  thead {
-    display: none;
-  }
+	thead {
+		display: none;
+	}
 
-  th,
-  td {
-    border-bottom-width: 0;
-    display: block;
-    width: 100%;
-    padding: $spacing-8 $spacing-16 $spacing-8;
-  }
+	th,
+	td {
+		border-bottom-width: 0;
+		display: block;
+		width: 100%;
+		padding: $spacing-8 $spacing-16 $spacing-8;
+	}
 
-  th:first-child,
-  td:first-child {
-    padding: $spacing-16 $spacing-16 $spacing-8;
-  }
+	th:first-child,
+	td:first-child {
+		padding: $spacing-16 $spacing-16 $spacing-8;
+	}
 
-  th:last-child,
-  td:last-child {
-    padding: $spacing-8 $spacing-16 $spacing-16;
-  }
+	th:last-child,
+	td:last-child {
+		padding: $spacing-8 $spacing-16 $spacing-16;
+	}
 
-  th:only-child,
-  td:only-child {
-    padding: $spacing-16;
-  }
+	th:only-child,
+	td:only-child {
+		padding: $spacing-16;
+	}
 
-  tr {
-    border-bottom: rem(1px) solid $gray-10;
-    border-top-width: 0;
-    display: block;
-    width: 100%;
-    th:first-child,
-    td:first-child {
-      border-top-width: 0;
-    }
-    &:nth-child(odd) {
-      td,
-      th {
-        background-color: inherit;
-      }
-    }
+	tr {
+		border-bottom: rem(1px) solid $gray-10;
+		border-top-width: 0;
+		display: block;
+		width: 100%;
+		th:first-child,
+		td:first-child {
+			border-top-width: 0;
+		}
+		&:nth-child(odd) {
+			td,
+			th {
+				background-color: inherit;
+			}
+		}
 
-    &:first-child {
-      th:first-child,
-      td:first-child {
-        border-top: rem(1px) solid $gray-10;
-      }
-    }
-  }
+		&:first-child {
+			th:first-child,
+			td:first-child {
+				border-top: rem(1px) solid $gray-10;
+			}
+		}
+	}
 
-  /* stylelint-disable selector-no-qualifying-type */
-  th[data-label],
-  td[data-label] {
-    font-weight: $font-regular;
+	/* stylelint-disable selector-no-qualifying-type */
+	th[data-label],
+	td[data-label] {
+		font-weight: $font-regular;
 
-    &::before {
-      content: attr(data-label);
-      display: block;
-      font-weight: $font-medium;
-    }
-  }
-  /* stylelint-enable selector-no-qualifying-type */
+		&::before {
+			content: attr(data-label);
+			display: block;
+			font-weight: $font-medium;
+		}
+	}
+	/* stylelint-enable selector-no-qualifying-type */
 }
 
 @mixin table-stacked-header-styles {
-  tr {
-    border-bottom: 0;
+	tr {
+		border-bottom: 0;
 
-    td:first-child,
-    th:first-child {
-      font-family: $font-rubik;
-      font-size: $font-size-16;
-      line-height: $line-height-subheading;
-      background-color: $gray-04;
-      color: $gray-80;
-      font-weight: $font-medium;
-      padding: $spacing-16;
-      &::before {
-        display: none;
-      }
-    }
-  }
+		td:first-child,
+		th:first-child {
+			font-family: $font-rubik;
+			font-size: $font-size-16;
+			line-height: $line-height-subheading;
+			background-color: $gray-04;
+			color: $gray-80;
+			font-weight: $font-medium;
+			padding: $spacing-16;
+			&::before {
+				display: none;
+			}
+		}
+	}
 
-  tr:last-child {
-    border-bottom: rem(1px) solid $gray-10;
-  }
+	tr:last-child {
+		border-bottom: rem(1px) solid $gray-10;
+	}
 }

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

@@ -1,65 +1,65 @@
-@import '../variables/index';
+@import "../variables/index";
 
 @mixin input-label {
-  color: $gray-80;
-  font-size: $font-size-14;
-  font-weight: $font-medium;
-  text-transform: none;
-  display: block;
+	color: $gray-80;
+	font-size: $font-size-14;
+	font-weight: $font-medium;
+	text-transform: none;
+	display: block;
 }
 
 // uses heading objects defined in src/variables/_type
 @mixin heading($heading) {
-  font-family: $font-rubik;
-  font-weight: nth($heading, 5);
-  font-size: nth($heading, 1);
-  line-height: nth($heading, 3);
+	font-family: $font-rubik;
+	font-weight: nth($heading, 5);
+	font-size: nth($heading, 1);
+	line-height: nth($heading, 3);
 
-  @include media-breakpoint(xxs) {
-    font-size: nth($heading, 2);
-    line-height: nth($heading, 4);
-  }
-  @include media-breakpoint(xs) {
-    font-size: nth($heading, 1);
-    line-height: nth($heading, 3);
-  }
+	@include media-breakpoint(xxs) {
+		font-size: nth($heading, 2);
+		line-height: nth($heading, 4);
+	}
+	@include media-breakpoint(xs) {
+		font-size: nth($heading, 1);
+		line-height: nth($heading, 3);
+	}
 }
 
 @mixin p1 {
-  font-family: $font-rubik;
-  font-size: $font-size-18;
-  line-height: $line-height-base;
+	font-family: $font-rubik;
+	font-size: $font-size-18;
+	line-height: $line-height-base;
 
-  @include media-breakpoint(xxs) {
-    font-size: $font-size-16;
-  }
-  @include media-breakpoint(xs) {
-    font-size: $font-size-18;
-  }
+	@include media-breakpoint(xxs) {
+		font-size: $font-size-16;
+	}
+	@include media-breakpoint(xs) {
+		font-size: $font-size-18;
+	}
 }
 
 @mixin p2 {
-  font-family: $font-rubik;
-  font-size: $font-size-14;
-  line-height: $line-height-base;
+	font-family: $font-rubik;
+	font-size: $font-size-14;
+	line-height: $line-height-base;
 
-  @include media-breakpoint(xxs) {
-    font-size: $font-size-14;
-  }
-  @include media-breakpoint(xs) {
-    font-size: $font-size-14;
-  }
+	@include media-breakpoint(xxs) {
+		font-size: $font-size-14;
+	}
+	@include media-breakpoint(xs) {
+		font-size: $font-size-14;
+	}
 }
 
 @mixin l1 {
-  font-family: $font-rubik;
-  font-size: $font-size-18;
-  line-height: $line-height-md;
+	font-family: $font-rubik;
+	font-size: $font-size-18;
+	line-height: $line-height-md;
 }
 
 @mixin l2 {
-  font-family: $font-rubik;
-  font-size: $font-size-14;
-  line-height: $line-height-md;
-  text-transform: uppercase;
+	font-family: $font-rubik;
+	font-size: $font-size-14;
+	line-height: $line-height-md;
+	text-transform: uppercase;
 }

package/styles/qppds/settings/mixins/_visually-hidden.scss

@@ -8,15 +8,15 @@
 // See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/
 
 @mixin visually-hidden() {
-  position: absolute !important;
-  width: 1px !important;
-  height: 1px !important;
-  padding: 0 !important;
-  margin: -1px !important; // Fix for https://github.com/twbs/bootstrap/issues/25686
-  overflow: hidden !important;
-  clip: rect(0, 0, 0, 0) !important;
-  white-space: nowrap !important;
-  border: 0 !important;
+	position: absolute !important;
+	width: 1px !important;
+	height: 1px !important;
+	padding: 0 !important;
+	margin: -1px !important; // Fix for https://github.com/twbs/bootstrap/issues/25686
+	overflow: hidden !important;
+	clip: rect(0, 0, 0, 0) !important;
+	white-space: nowrap !important;
+	border: 0 !important;
 }
 
 // Use to only display content when it's focused.
@@ -24,7 +24,7 @@
 // Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
 
 @mixin visually-hidden-focusable() {
-  &:not(:focus) {
-    @include visually-hidden;
-  }
+	&:not(:focus) {
+		@include visually-hidden;
+	}
 }

package/styles/qppds/settings/variables/_color.scss

@@ -12,7 +12,7 @@ $blue-80: #003366;
 $cyan-20: #bbede9;
 $cyan-40: #209fa6;
 $cyan-50: #048087;
-$cyan-60: #035E63;
+$cyan-60: #035e63;
 
 $green-05: #eff5eb;
 $green-30: #7cb342;
@@ -45,45 +45,45 @@ $quality-blue: $blue-60;
 
 /* stylelint-disable property-case */
 :export {
-  white: $white;
-  black: $black;
-
-  blue05: $blue-05;
-  blue10: $blue-10;
-  blue30: $blue-30; // deprecated
-  blue40: $blue-40;
-  blue60: $blue-60;
-  blue70: $blue-70;
-  blue80: $blue-80;
-
-  cyan20: $cyan-20;
-  cyan40: $cyan-40;
-  cyan50: $cyan-50;
-
-  green05: $green-05;
-  green30: $green-30;
-  green50: $green-50;
-
-  gold05: $gold-05;
-  gold20: $gold-20;
-  gold40: $gold-40;
-
-  red10: $red-10;
-  red50: $red-50;
-  red60: $red-60;
-
-  gray02: $gray-02;
-  gray04: $gray-04;
-  gray10: $gray-10;
-  gray20: $gray-20;
-  gray60: $gray-60;
-  gray70: $gray-70;
-  gray80: $gray-80;
-  gray90: $gray-90;
-
-  costGreen: $cost-green;
-  iaGold: $ia-gold;
-  piMagenta: $pi-magenta;
-  qualityBlue: $quality-blue;
+	white: $white;
+	black: $black;
+
+	blue05: $blue-05;
+	blue10: $blue-10;
+	blue30: $blue-30; // deprecated
+	blue40: $blue-40;
+	blue60: $blue-60;
+	blue70: $blue-70;
+	blue80: $blue-80;
+
+	cyan20: $cyan-20;
+	cyan40: $cyan-40;
+	cyan50: $cyan-50;
+
+	green05: $green-05;
+	green30: $green-30;
+	green50: $green-50;
+
+	gold05: $gold-05;
+	gold20: $gold-20;
+	gold40: $gold-40;
+
+	red10: $red-10;
+	red50: $red-50;
+	red60: $red-60;
+
+	gray02: $gray-02;
+	gray04: $gray-04;
+	gray10: $gray-10;
+	gray20: $gray-20;
+	gray60: $gray-60;
+	gray70: $gray-70;
+	gray80: $gray-80;
+	gray90: $gray-90;
+
+	costGreen: $cost-green;
+	iaGold: $ia-gold;
+	piMagenta: $pi-magenta;
+	qualityBlue: $quality-blue;
 }
 /* stylelint-enable property-case */

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

@@ -1,3 +1,3 @@
-@import './color';
-@import './type';
-@import './layout';
+@import "./color";
+@import "./type";
+@import "./layout";

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

@@ -1,29 +1,29 @@
 // stylelint-disable length-zero-no-unit
-@import '../functions';
+@import "../functions";
 
 $spacers: (
-  '0': rem(0px),
-  '4': rem(4px),
-  '8': rem(8px),
-  '12': rem(12px),
-  '16': rem(16px),
-  '24': rem(24px),
-  '32': rem(32px),
-  '40': rem(40px),
-  '48': rem(48px),
-  '96': rem(96px)
+	"0": rem(0px),
+	"4": rem(4px),
+	"8": rem(8px),
+	"12": rem(12px),
+	"16": rem(16px),
+	"24": rem(24px),
+	"32": rem(32px),
+	"40": rem(40px),
+	"48": rem(48px),
+	"96": rem(96px),
 );
 
-$spacing-0: map-get($spacers, '0');
-$spacing-4: map-get($spacers, '4');  // deprecated
-$spacing-8: map-get($spacers, '8');
-$spacing-12: map-get($spacers, '12'); // deprecated
-$spacing-16: map-get($spacers, '16');
-$spacing-24: map-get($spacers, '24');
-$spacing-32: map-get($spacers, '32');
-$spacing-40: map-get($spacers, '40');
-$spacing-48: map-get($spacers, '48');
-$spacing-96: map-get($spacers, '96');
+$spacing-0: map-get($spacers, "0");
+$spacing-4: map-get($spacers, "4"); // deprecated
+$spacing-8: map-get($spacers, "8");
+$spacing-12: map-get($spacers, "12"); // deprecated
+$spacing-16: map-get($spacers, "16");
+$spacing-24: map-get($spacers, "24");
+$spacing-32: map-get($spacers, "32");
+$spacing-40: map-get($spacers, "40");
+$spacing-48: map-get($spacers, "48");
+$spacing-96: map-get($spacers, "96");
 
 // Breakpoint widths
 $width-xxs: 0;
@@ -35,33 +35,33 @@ $width-xl: 1400px;
 
 // Breakpoints
 $breakpoints: (
-  xxs: $width-xxs,
-  xs: $width-xs,
-  sm: $width-sm,
-  md: $width-md,
-  lg: $width-lg,
-  xl: $width-xl
+	xxs: $width-xxs,
+	xs: $width-xs,
+	sm: $width-sm,
+	md: $width-md,
+	lg: $width-lg,
+	xl: $width-xl,
 );
 
 // JS Variable Exports
 /* stylelint-disable property-case */
 :export {
-  // spacing variables
-  spacing0: $spacing-0;
-  spacing8: $spacing-8;
-  spacing16: $spacing-16;
-  spacing24: $spacing-24;
-  spacing32: $spacing-32;
-  spacing40: $spacing-40;
-  spacing48: $spacing-48;
-  spacing96: $spacing-96;
+	// spacing variables
+	spacing0: $spacing-0;
+	spacing8: $spacing-8;
+	spacing16: $spacing-16;
+	spacing24: $spacing-24;
+	spacing32: $spacing-32;
+	spacing40: $spacing-40;
+	spacing48: $spacing-48;
+	spacing96: $spacing-96;
 
-  // breakpoints
-  breakpointXXS: $width-xxs;
-  breakpointXS: $width-xs;
-  breakpointSM: $width-sm;
-  breakpointMD: $width-md;
-  breakpointLG: $width-lg;
-  breakpointXL: $width-xl;
+	// breakpoints
+	breakpointXXS: $width-xxs;
+	breakpointXS: $width-xs;
+	breakpointSM: $width-sm;
+	breakpointMD: $width-md;
+	breakpointLG: $width-lg;
+	breakpointXL: $width-xl;
 }
 /* stylelint-enable property-case */