@madie/madie-design-system 1.2.39 → 1.2.41

package/styles/qppds/utilities/_flexbox.scss

@@ -1,240 +1,240 @@
 // stylelint-disable declaration-no-important
-@import '../settings/index.scss';
+@import "../settings/index.scss";
 
 $_flex-direction-values: (
-  row: row,
-  column: column,
-  row-reverse: row-reverse,
-  column-reverse: column-reverse
+	row: row,
+	column: column,
+	row-reverse: row-reverse,
+	column-reverse: column-reverse,
 );
 
 @each $name in map-keys($_flex-direction-values) {
-  $value: map-get($_flex-direction-values, $name);
-  // Example: .qpp-u-flex-direction--column
-  .qpp-u-flex-direction--#{$name} {
-    // Example: flex-direction: column
-    flex-direction: $value !important;
-  }
+	$value: map-get($_flex-direction-values, $name);
+	// Example: .qpp-u-flex-direction--column
+	.qpp-u-flex-direction--#{$name} {
+		// Example: flex-direction: column
+		flex-direction: $value !important;
+	}
 }
 
 @each $breakpoint in map-keys($breakpoints) {
-  $viewport: map-get($breakpoints, $breakpoint);
-
-  @media (min-width: $viewport) {
-    @each $name in map-keys($_flex-direction-values) {
-      $value: map-get($_flex-direction-values, $name);
-      // Example: .qpp-u-lg-flex-direction--column
-      .qpp-u-#{$breakpoint}-flex-direction--#{$name} {
-        // Example: flex-direction: column
-        flex-direction: $value !important;
-      }
-    }
-  }
+	$viewport: map-get($breakpoints, $breakpoint);
+
+	@media (min-width: $viewport) {
+		@each $name in map-keys($_flex-direction-values) {
+			$value: map-get($_flex-direction-values, $name);
+			// Example: .qpp-u-lg-flex-direction--column
+			.qpp-u-#{$breakpoint}-flex-direction--#{$name} {
+				// Example: flex-direction: column
+				flex-direction: $value !important;
+			}
+		}
+	}
 }
 
 $_justify-content-values: (
-  start: flex-start,
-  end: flex-end,
-  center: center,
-  between: space-between,
-  around: space-around
+	start: flex-start,
+	end: flex-end,
+	center: center,
+	between: space-between,
+	around: space-around,
 );
 
 @each $name in map-keys($_justify-content-values) {
-  $value: map-get($_justify-content-values, $name);
-  // Example: .qpp-u-justify-content--start
-  .qpp-u-justify-content--#{$name} {
-    // Example: justify-content: flex-start
-    justify-content: $value !important;
-  }
+	$value: map-get($_justify-content-values, $name);
+	// Example: .qpp-u-justify-content--start
+	.qpp-u-justify-content--#{$name} {
+		// Example: justify-content: flex-start
+		justify-content: $value !important;
+	}
 }
 
 @each $breakpoint in map-keys($breakpoints) {
-  $viewport: map-get($breakpoints, $breakpoint);
-
-  @media (min-width: $viewport) {
-    @each $name in map-keys($_justify-content-values) {
-      $value: map-get($_justify-content-values, $name);
-      // Example: .qpp-u-lg-justify-content--start
-      .qpp-u-#{$breakpoint}-justify-content--#{$name} {
-        // Example: justify-content: flex-start
-        justify-content: $value !important;
-      }
-    }
-  }
+	$viewport: map-get($breakpoints, $breakpoint);
+
+	@media (min-width: $viewport) {
+		@each $name in map-keys($_justify-content-values) {
+			$value: map-get($_justify-content-values, $name);
+			// Example: .qpp-u-lg-justify-content--start
+			.qpp-u-#{$breakpoint}-justify-content--#{$name} {
+				// Example: justify-content: flex-start
+				justify-content: $value !important;
+			}
+		}
+	}
 }
 
 $_align-items-values: (
-  start: flex-start,
-  end: flex-end,
-  center: center,
-  baseline: baseline,
-  stretch: stretch
+	start: flex-start,
+	end: flex-end,
+	center: center,
+	baseline: baseline,
+	stretch: stretch,
 );
 
 @each $name in map-keys($_align-items-values) {
-  $value: map-get($_align-items-values, $name);
-  // Example: .qpp-u-align-items--start
-  .qpp-u-align-items--#{$name} {
-    // Example: align-items: flex-start
-    align-items: $value !important;
-  }
+	$value: map-get($_align-items-values, $name);
+	// Example: .qpp-u-align-items--start
+	.qpp-u-align-items--#{$name} {
+		// Example: align-items: flex-start
+		align-items: $value !important;
+	}
 }
 
 @each $breakpoint in map-keys($breakpoints) {
-  $viewport: map-get($breakpoints, $breakpoint);
-
-  @media (min-width: $viewport) {
-    @each $name in map-keys($_align-items-values) {
-      $value: map-get($_align-items-values, $name);
-      // Example: .qpp-u-lg-align-items--start
-      .qpp-u-#{$breakpoint}-align-items--#{$name} {
-        // Example: align-items: flex-start
-        align-items: $value !important;
-      }
-    }
-  }
+	$viewport: map-get($breakpoints, $breakpoint);
+
+	@media (min-width: $viewport) {
+		@each $name in map-keys($_align-items-values) {
+			$value: map-get($_align-items-values, $name);
+			// Example: .qpp-u-lg-align-items--start
+			.qpp-u-#{$breakpoint}-align-items--#{$name} {
+				// Example: align-items: flex-start
+				align-items: $value !important;
+			}
+		}
+	}
 }
 
 $_flex-wrap-values: (
-  nowrap: nowrap,
-  wrap: wrap,
-  reverse: wrap-reverse
+	nowrap: nowrap,
+	wrap: wrap,
+	reverse: wrap-reverse,
 );
 
 @each $name in map-keys($_flex-wrap-values) {
-  $value: map-get($_flex-wrap-values, $name);
-  // Example: .qpp-u-flex-wrap--start
-  .qpp-u-flex-wrap--#{$name} {
-    // Example: flex-wrap: flex-start
-    flex-wrap: $value !important;
-  }
+	$value: map-get($_flex-wrap-values, $name);
+	// Example: .qpp-u-flex-wrap--start
+	.qpp-u-flex-wrap--#{$name} {
+		// Example: flex-wrap: flex-start
+		flex-wrap: $value !important;
+	}
 }
 
 @each $breakpoint in map-keys($breakpoints) {
-  $viewport: map-get($breakpoints, $breakpoint);
-
-  @media (min-width: $viewport) {
-    @each $name in map-keys($_flex-wrap-values) {
-      $value: map-get($_flex-wrap-values, $name);
-      // Example: .qpp-u-lg-flex-wrap--start
-      .qpp-u-#{$breakpoint}-flex-wrap--#{$name} {
-        // Example: flex-wrap: flex-start
-        flex-wrap: $value !important;
-      }
-    }
-  }
+	$viewport: map-get($breakpoints, $breakpoint);
+
+	@media (min-width: $viewport) {
+		@each $name in map-keys($_flex-wrap-values) {
+			$value: map-get($_flex-wrap-values, $name);
+			// Example: .qpp-u-lg-flex-wrap--start
+			.qpp-u-#{$breakpoint}-flex-wrap--#{$name} {
+				// Example: flex-wrap: flex-start
+				flex-wrap: $value !important;
+			}
+		}
+	}
 }
 
 @each $name in map-keys($spacers) {
-  $value: map-get($spacers, $name);
-  .qpp-u-flex-gap--#{$name} {
-    margin: -#{$value} 0 0 -#{$value};
-    width: calc(100% + #{$value});
-
-    > * {
-      padding: $value 0 0 $value;
-      width: 100%; // needed for IE11 support
-    }
-  }
-
-  .qpp-u-flex-gap-col--#{$name} {
-    margin: 0;
-    margin-left: -#{$value} !important;
-    width: calc(100% + #{$value});
-
-    > * {
-      padding: 0;
-      padding-left: $value !important;
-      width: 100%;
-    }
-  }
-
-  .qpp-u-flex-gap-row--#{$name} {
-    margin: 0;
-    margin-top: -#{$value} !important;
-
-    > * {
-      padding: 0;
-      padding-top: $value !important;
-      width: 100%;
-    }
-  }
+	$value: map-get($spacers, $name);
+	.qpp-u-flex-gap--#{$name} {
+		margin: -#{$value} 0 0 -#{$value};
+		width: calc(100% + #{$value});
+
+		> * {
+			padding: $value 0 0 $value;
+			width: 100%; // needed for IE11 support
+		}
+	}
+
+	.qpp-u-flex-gap-col--#{$name} {
+		margin: 0;
+		margin-left: -#{$value} !important;
+		width: calc(100% + #{$value});
+
+		> * {
+			padding: 0;
+			padding-left: $value !important;
+			width: 100%;
+		}
+	}
+
+	.qpp-u-flex-gap-row--#{$name} {
+		margin: 0;
+		margin-top: -#{$value} !important;
+
+		> * {
+			padding: 0;
+			padding-top: $value !important;
+			width: 100%;
+		}
+	}
 }
 
 @each $breakpoint in map-keys($breakpoints) {
-  $viewport: map-get($breakpoints, $breakpoint);
-
-  @media (min-width: $viewport) {
-    @each $name in map-keys($spacers) {
-      $value: map-get($spacers, $name);
-      // Example: .qpp-u-lg-flex-gap--12
-      .qpp-u-#{$breakpoint}-flex-gap--#{$name} {
-        margin: -#{$value} 0 0 -#{$value};
-        width: calc(100% + #{$value});
-
-        > * {
-          padding: $value 0 0 $value;
-          width: 100%;
-        }
-      }
-
-      .qpp-u-#{$breakpoint}-flex-gap-col--#{$name} {
-        margin: 0;
-        margin-left: -#{$value} !important;
-        width: calc(100% + #{$value});
-
-        > * {
-          padding: 0;
-          padding-left: $value !important;
-          width: 100%;
-        }
-      }
-
-      .qpp-u-#{$breakpoint}-flex-gap-row--#{$name} {
-        margin: 0;
-        margin-top: -#{$value} !important;
-
-        > * {
-          padding: 0;
-          padding-top: $value !important;
-          width: 100%;
-        }
-      }
-    }
-  }
+	$viewport: map-get($breakpoints, $breakpoint);
+
+	@media (min-width: $viewport) {
+		@each $name in map-keys($spacers) {
+			$value: map-get($spacers, $name);
+			// Example: .qpp-u-lg-flex-gap--12
+			.qpp-u-#{$breakpoint}-flex-gap--#{$name} {
+				margin: -#{$value} 0 0 -#{$value};
+				width: calc(100% + #{$value});
+
+				> * {
+					padding: $value 0 0 $value;
+					width: 100%;
+				}
+			}
+
+			.qpp-u-#{$breakpoint}-flex-gap-col--#{$name} {
+				margin: 0;
+				margin-left: -#{$value} !important;
+				width: calc(100% + #{$value});
+
+				> * {
+					padding: 0;
+					padding-left: $value !important;
+					width: 100%;
+				}
+			}
+
+			.qpp-u-#{$breakpoint}-flex-gap-row--#{$name} {
+				margin: 0;
+				margin-top: -#{$value} !important;
+
+				> * {
+					padding: 0;
+					padding-top: $value !important;
+					width: 100%;
+				}
+			}
+		}
+	}
 }
 
 $_flex-values: (
-  '1': 1,
-  'fifth': 20% 0,
-  'quarter': 25% 0,
-  'third': 33.333333333% 0,
-  'half': 50% 0,
-  'full': 100% 0,
-  'initial': initial,
-  'auto': auto,
-  'none': none
+	"1": 1,
+	"fifth": 20% 0,
+	"quarter": 25% 0,
+	"third": 33.333333333% 0,
+	"half": 50% 0,
+	"full": 100% 0,
+	"initial": initial,
+	"auto": auto,
+	"none": none,
 );
 
 @each $name in map-keys($_flex-values) {
-  $value: map-get($_flex-values, $name);
-  // Example: .qpp-u-flex--1
-  .qpp-u-flex--#{$name} {
-    flex: $value !important;
-  }
+	$value: map-get($_flex-values, $name);
+	// Example: .qpp-u-flex--1
+	.qpp-u-flex--#{$name} {
+		flex: $value !important;
+	}
 }
 
 @each $breakpoint in map-keys($breakpoints) {
-  $viewport: map-get($breakpoints, $breakpoint);
-
-  @media (min-width: $viewport) {
-    @each $name in map-keys($_flex-values) {
-      $value: map-get($_flex-values, $name);
-      // Example: .qpp-u-lg-flex--1
-      .qpp-u-#{$breakpoint}-flex--#{$name} {
-        flex: $value !important;
-      }
-    }
-  }
+	$viewport: map-get($breakpoints, $breakpoint);
+
+	@media (min-width: $viewport) {
+		@each $name in map-keys($_flex-values) {
+			$value: map-get($_flex-values, $name);
+			// Example: .qpp-u-lg-flex--1
+			.qpp-u-#{$breakpoint}-flex--#{$name} {
+				flex: $value !important;
+			}
+		}
+	}
 }

package/styles/qppds/utilities/_font-family.scss

@@ -1,9 +1,9 @@
 // stylelint-disable declaration-no-important
 
 .qpp-u-font--rubik {
-  font-family: $font-rubik !important;
+	font-family: $font-rubik !important;
 }
 
 .qpp-u-font--monospace {
-  font-family: $font-monospace !important;
+	font-family: $font-monospace !important;
 }

package/styles/qppds/utilities/_font-size.scss

@@ -1,8 +1,8 @@
 // stylelint-disable declaration-no-important
-@import '../settings/variables/index';
+@import "../settings/variables/index";
 
 @each $key, $value in $font-sizes {
-  .qpp-u-font-size--#{$key} {
-    font-size: #{$value} !important;
-  }
+	.qpp-u-font-size--#{$key} {
+		font-size: #{$value} !important;
+	}
 }

package/styles/qppds/utilities/_font-weight.scss

@@ -1,8 +1,8 @@
 // stylelint-disable declaration-no-important
 .qpp-u-font-weight--regular {
-  font-weight: $font-regular !important;
+	font-weight: $font-regular !important;
 }
 
 .qpp-u-font-weight--medium {
-  font-weight: $font-medium !important;
+	font-weight: $font-medium !important;
 }

package/styles/qppds/utilities/_height.scss

@@ -1,38 +1,38 @@
 $static-height-vals: (
-  10: 10px,
-  12: 12px,
-  15: 15px,
-  16: 16px,
-  20: 20px,
-  24: 24px,
-  30: 30px,
-  32: 32px,
-  40: 40px,
-  50: 50px
+	10: 10px,
+	12: 12px,
+	15: 15px,
+	16: 16px,
+	20: 20px,
+	24: 24px,
+	30: 30px,
+	32: 32px,
+	40: 40px,
+	50: 50px,
 );
 
 @each $name in map-keys($static-height-vals) {
-  $value: map-get($static-height-vals, $name);
+	$value: map-get($static-height-vals, $name);
 
-  .qpp-u-height--#{$name}px {
-    height: #{$value} !important;
-  }
+	.qpp-u-height--#{$name}px {
+		height: #{$value} !important;
+	}
 }
 
 @each $breakpoint in map-keys($breakpoints) {
-  $viewport: map-get($breakpoints, $breakpoint);
+	$viewport: map-get($breakpoints, $breakpoint);
 
-  @media (min-height: $viewport) {
-    @each $name in map-keys($static-height-vals) {
-      $value: map-get($static-height-vals, $name);
+	@media (min-height: $viewport) {
+		@each $name in map-keys($static-height-vals) {
+			$value: map-get($static-height-vals, $name);
 
-      .qpp-u-#{$breakpoint}-height--#{$name}px {
-        height: #{$value} !important;
-      }
-    }
-  }
+			.qpp-u-#{$breakpoint}-height--#{$name}px {
+				height: #{$value} !important;
+			}
+		}
+	}
 }
 
 .qpp-u-height--auto {
-    height: auto !important;
+	height: auto !important;
 }