@madie/madie-design-system 1.2.39 → 1.2.41

package/styles/qppds/utilities/_margin.scss

@@ -1,136 +1,136 @@
 // stylelint-disable declaration-no-important
-@import '../settings/variables/index';
+@import "../settings/variables/index";
 
 @each $key, $value in $spacers {
-  .qpp-u-margin--#{$key} {
-    margin: #{$value} !important;
-  }
-
-  .qpp-u-margin-top--#{$key} {
-    margin-top: #{$value} !important;
-  }
-
-  .qpp-u-margin-right--#{$key} {
-    margin-right: #{$value} !important;
-  }
-
-  .qpp-u-margin-bottom--#{$key} {
-    margin-bottom: #{$value} !important;
-  }
-
-  .qpp-u-margin-left--#{$key} {
-    margin-left: #{$value} !important;
-  }
-
-  .qpp-u-margin-x--#{$key} {
-    margin-left: #{$value} !important;
-    margin-right: #{$value} !important;
-  }
-
-  .qpp-u-margin-y--#{$key} {
-    margin-top: #{$value} !important;
-    margin-bottom: #{$value} !important;
-  }
+	.qpp-u-margin--#{$key} {
+		margin: #{$value} !important;
+	}
+
+	.qpp-u-margin-top--#{$key} {
+		margin-top: #{$value} !important;
+	}
+
+	.qpp-u-margin-right--#{$key} {
+		margin-right: #{$value} !important;
+	}
+
+	.qpp-u-margin-bottom--#{$key} {
+		margin-bottom: #{$value} !important;
+	}
+
+	.qpp-u-margin-left--#{$key} {
+		margin-left: #{$value} !important;
+	}
+
+	.qpp-u-margin-x--#{$key} {
+		margin-left: #{$value} !important;
+		margin-right: #{$value} !important;
+	}
+
+	.qpp-u-margin-y--#{$key} {
+		margin-top: #{$value} !important;
+		margin-bottom: #{$value} !important;
+	}
 }
 
 .qpp-u-margin--auto {
-  margin: auto !important;
+	margin: auto !important;
 }
 
 .qpp-u-margin-top--auto {
-  margin-top: auto !important;
+	margin-top: auto !important;
 }
 
 .qpp-u-margin-right--auto {
-  margin-right: auto !important;
+	margin-right: auto !important;
 }
 
 .qpp-u-margin-bottom--auto {
-  margin-bottom: auto !important;
+	margin-bottom: auto !important;
 }
 
 .qpp-u-margin-left--auto {
-  margin-left: auto !important;
+	margin-left: auto !important;
 }
 
 .qpp-u-margin-x--auto {
-  margin-left: auto !important;
-  margin-right: auto !important;
+	margin-left: auto !important;
+	margin-right: auto !important;
 }
 
 .qpp-u-margin-y--auto {
-  margin-bottom: auto !important;
-  margin-top: auto !important;
+	margin-bottom: auto !important;
+	margin-top: auto !important;
 }
 
 @each $breakpoint in map-keys($breakpoints) {
-  $value: map-get($breakpoints, $breakpoint);
-
-  @media (min-width: $value) {
-    @each $spacer in map-keys($spacers) {
-      $size: map-get($spacers, $spacer);
-
-      // Example: qpp-u-sm-margin--0
-      .qpp-u-#{$breakpoint}-margin--#{$spacer} {
-        // Example: margin: 0 !important;
-        margin: #{$size} !important;
-      }
-
-      .qpp-u-#{$breakpoint}-margin-top--#{$spacer} {
-        margin-top: #{$size} !important;
-      }
-
-      .qpp-u-#{$breakpoint}-margin-right--#{$spacer} {
-        margin-right: #{$size} !important;
-      }
-
-      .qpp-u-#{$breakpoint}-margin-bottom--#{$spacer} {
-        margin-bottom: #{$size} !important;
-      }
-
-      .qpp-u-#{$breakpoint}-margin-left--#{$spacer} {
-        margin-left: #{$size} !important;
-      }
-
-      .qpp-u-#{$breakpoint}-margin-x--#{$spacer} {
-        margin-left: #{$size} !important;
-        margin-right: #{$size} !important;
-      }
-
-      .qpp-u-#{$breakpoint}-margin-y--#{$spacer} {
-        margin-bottom: #{$size} !important;
-        margin-top: #{$size} !important;
-      }
-    }
-
-    .qpp-u-#{$breakpoint}-margin--auto {
-      margin: auto !important;
-    }
-
-    .qpp-u-#{$breakpoint}-margin-top--auto {
-      margin-top: auto !important;
-    }
-
-    .qpp-u-#{$breakpoint}-margin-right--auto {
-      margin-right: auto !important;
-    }
-
-    .qpp-u-#{$breakpoint}-margin-bottom--auto {
-      margin-bottom: auto !important;
-    }
-
-    .qpp-u-#{$breakpoint}-margin-left--auto {
-      margin-left: auto !important;
-    }
-
-    .qpp-u-#{$breakpoint}-margin-x--auto {
-      margin-left: auto !important;
-      margin-right: auto !important;
-    }
-
-    .qpp-u-#{$breakpoint}-margin-y--auto {
-      margin-bottom: auto !important;
-      margin-top: auto !important;
-    }
-  }
+	$value: map-get($breakpoints, $breakpoint);
+
+	@media (min-width: $value) {
+		@each $spacer in map-keys($spacers) {
+			$size: map-get($spacers, $spacer);
+
+			// Example: qpp-u-sm-margin--0
+			.qpp-u-#{$breakpoint}-margin--#{$spacer} {
+				// Example: margin: 0 !important;
+				margin: #{$size} !important;
+			}
+
+			.qpp-u-#{$breakpoint}-margin-top--#{$spacer} {
+				margin-top: #{$size} !important;
+			}
+
+			.qpp-u-#{$breakpoint}-margin-right--#{$spacer} {
+				margin-right: #{$size} !important;
+			}
+
+			.qpp-u-#{$breakpoint}-margin-bottom--#{$spacer} {
+				margin-bottom: #{$size} !important;
+			}
+
+			.qpp-u-#{$breakpoint}-margin-left--#{$spacer} {
+				margin-left: #{$size} !important;
+			}
+
+			.qpp-u-#{$breakpoint}-margin-x--#{$spacer} {
+				margin-left: #{$size} !important;
+				margin-right: #{$size} !important;
+			}
+
+			.qpp-u-#{$breakpoint}-margin-y--#{$spacer} {
+				margin-bottom: #{$size} !important;
+				margin-top: #{$size} !important;
+			}
+		}
+
+		.qpp-u-#{$breakpoint}-margin--auto {
+			margin: auto !important;
+		}
+
+		.qpp-u-#{$breakpoint}-margin-top--auto {
+			margin-top: auto !important;
+		}
+
+		.qpp-u-#{$breakpoint}-margin-right--auto {
+			margin-right: auto !important;
+		}
+
+		.qpp-u-#{$breakpoint}-margin-bottom--auto {
+			margin-bottom: auto !important;
+		}
+
+		.qpp-u-#{$breakpoint}-margin-left--auto {
+			margin-left: auto !important;
+		}
+
+		.qpp-u-#{$breakpoint}-margin-x--auto {
+			margin-left: auto !important;
+			margin-right: auto !important;
+		}
+
+		.qpp-u-#{$breakpoint}-margin-y--auto {
+			margin-bottom: auto !important;
+			margin-top: auto !important;
+		}
+	}
 }

package/styles/qppds/utilities/_padding.scss

@@ -1,76 +1,76 @@
 // stylelint-disable declaration-no-important
-@import '../settings/variables/index';
+@import "../settings/variables/index";
 
 @each $key, $value in $spacers {
-  .qpp-u-padding--#{$key} {
-    padding: #{$value} !important;
-  }
-
-  .qpp-u-padding-top--#{$key} {
-    padding-top: #{$value} !important;
-  }
-
-  .qpp-u-padding-right--#{$key} {
-    padding-right: #{$value} !important;
-  }
-
-  .qpp-u-padding-bottom--#{$key} {
-    padding-bottom: #{$value} !important;
-  }
-
-  .qpp-u-padding-left--#{$key} {
-    padding-left: #{$value} !important;
-  }
-
-  .qpp-u-padding-x--#{$key} {
-    padding-left: #{$value} !important;
-    padding-right: #{$value} !important;
-  }
-
-  .qpp-u-padding-y--#{$key} {
-    padding-top: #{$value} !important;
-    padding-bottom: #{$value} !important;
-  }
+	.qpp-u-padding--#{$key} {
+		padding: #{$value} !important;
+	}
+
+	.qpp-u-padding-top--#{$key} {
+		padding-top: #{$value} !important;
+	}
+
+	.qpp-u-padding-right--#{$key} {
+		padding-right: #{$value} !important;
+	}
+
+	.qpp-u-padding-bottom--#{$key} {
+		padding-bottom: #{$value} !important;
+	}
+
+	.qpp-u-padding-left--#{$key} {
+		padding-left: #{$value} !important;
+	}
+
+	.qpp-u-padding-x--#{$key} {
+		padding-left: #{$value} !important;
+		padding-right: #{$value} !important;
+	}
+
+	.qpp-u-padding-y--#{$key} {
+		padding-top: #{$value} !important;
+		padding-bottom: #{$value} !important;
+	}
 }
 
 @each $breakpoint in map-keys($breakpoints) {
-  $value: map-get($breakpoints, $breakpoint);
-
-  @media (min-width: $value) {
-    @each $spacer in map-keys($spacers) {
-      $size: map-get($spacers, $spacer);
-
-      // Example: qpp-u-sm-padding--0
-      .qpp-u-#{$breakpoint}-padding--#{$spacer} {
-        // Example: padding: 0 !important;
-        padding: #{$size} !important;
-      }
-
-      .qpp-u-#{$breakpoint}-padding-top--#{$spacer} {
-        padding-top: #{$size} !important;
-      }
-
-      .qpp-u-#{$breakpoint}-padding-right--#{$spacer} {
-        padding-right: #{$size} !important;
-      }
-
-      .qpp-u-#{$breakpoint}-padding-bottom--#{$spacer} {
-        padding-bottom: #{$size} !important;
-      }
-
-      .qpp-u-#{$breakpoint}-padding-left--#{$spacer} {
-        padding-left: #{$size} !important;
-      }
-
-      .qpp-u-#{$breakpoint}-padding-x--#{$spacer} {
-        padding-left: #{$size} !important;
-        padding-right: #{$size} !important;
-      }
-
-      .qpp-u-#{$breakpoint}-padding-y--#{$spacer} {
-        padding-bottom: #{$size} !important;
-        padding-top: #{$size} !important;
-      }
-    }
-  }
+	$value: map-get($breakpoints, $breakpoint);
+
+	@media (min-width: $value) {
+		@each $spacer in map-keys($spacers) {
+			$size: map-get($spacers, $spacer);
+
+			// Example: qpp-u-sm-padding--0
+			.qpp-u-#{$breakpoint}-padding--#{$spacer} {
+				// Example: padding: 0 !important;
+				padding: #{$size} !important;
+			}
+
+			.qpp-u-#{$breakpoint}-padding-top--#{$spacer} {
+				padding-top: #{$size} !important;
+			}
+
+			.qpp-u-#{$breakpoint}-padding-right--#{$spacer} {
+				padding-right: #{$size} !important;
+			}
+
+			.qpp-u-#{$breakpoint}-padding-bottom--#{$spacer} {
+				padding-bottom: #{$size} !important;
+			}
+
+			.qpp-u-#{$breakpoint}-padding-left--#{$spacer} {
+				padding-left: #{$size} !important;
+			}
+
+			.qpp-u-#{$breakpoint}-padding-x--#{$spacer} {
+				padding-left: #{$size} !important;
+				padding-right: #{$size} !important;
+			}
+
+			.qpp-u-#{$breakpoint}-padding-y--#{$spacer} {
+				padding-bottom: #{$size} !important;
+				padding-top: #{$size} !important;
+			}
+		}
+	}
 }

package/styles/qppds/utilities/_position.scss

@@ -1,24 +1,24 @@
 // stylelint-disable declaration-no-important
-@import '../settings/index.scss';
+@import "../settings/index.scss";
 
 .qpp-u-position--relative {
-  position: relative !important;
+	position: relative !important;
 }
 
 .qpp-u-position--absolute {
-  position: absolute !important;
+	position: absolute !important;
 }
 
 @each $breakpoint in map-keys($breakpoints) {
-  $viewport: map-get($breakpoints, $breakpoint);
+	$viewport: map-get($breakpoints, $breakpoint);
 
-  @media (min-width: $viewport) {
-    .qpp-u-#{$breakpoint}-position--relative {
-      position: relative !important;
-    }
+	@media (min-width: $viewport) {
+		.qpp-u-#{$breakpoint}-position--relative {
+			position: relative !important;
+		}
 
-    .qpp-u-#{$breakpoint}-position--absolute {
-      position: absolute !important;
-    }
-  }
+		.qpp-u-#{$breakpoint}-position--absolute {
+			position: absolute !important;
+		}
+	}
 }

package/styles/qppds/utilities/_text-align.scss

@@ -1,40 +1,40 @@
 // stylelint-disable declaration-no-important
-@import '../settings/index.scss';
+@import "../settings/index.scss";
 
 .qpp-u-text-align--center {
-  text-align: center !important;
+	text-align: center !important;
 }
 
 .qpp-u-text-align--left {
-  text-align: left !important;
+	text-align: left !important;
 }
 
 .qpp-u-text-align--right {
-  text-align: right !important;
+	text-align: right !important;
 }
 
 .qpp-u-text-align--justify {
-  text-align: justify !important;
+	text-align: justify !important;
 }
 
 @each $breakpoint in map-keys($breakpoints) {
-  $viewport: map-get($breakpoints, $breakpoint);
+	$viewport: map-get($breakpoints, $breakpoint);
 
-  @media (min-width: $viewport) {
-    .qpp-u-#{$breakpoint}-text-align--center {
-      text-align: center !important;
-    }
+	@media (min-width: $viewport) {
+		.qpp-u-#{$breakpoint}-text-align--center {
+			text-align: center !important;
+		}
 
-    .qpp-u-#{$breakpoint}-text-align--left {
-      text-align: left !important;
-    }
+		.qpp-u-#{$breakpoint}-text-align--left {
+			text-align: left !important;
+		}
 
-    .qpp-u-#{$breakpoint}-text-align--right {
-      text-align: right !important;
-    }
+		.qpp-u-#{$breakpoint}-text-align--right {
+			text-align: right !important;
+		}
 
-    .qpp-u-#{$breakpoint}-text-align--justify {
-      text-align: justify !important;
-    }
-  }
+		.qpp-u-#{$breakpoint}-text-align--justify {
+			text-align: justify !important;
+		}
+	}
 }

package/styles/qppds/utilities/_text-transform.scss

@@ -1,7 +1,7 @@
 .qpp-u-text-transform--uppercase {
-    text-transform: uppercase !important;
+	text-transform: uppercase !important;
 }
 
 .qpp-u-text-transform--lowercase {
-    text-transform: lowercase !important;
+	text-transform: lowercase !important;
 }

package/styles/qppds/utilities/_truncate.scss

@@ -1,8 +1,8 @@
 /* stylelint-disable declaration-no-important */
 
 .qpp-u-truncate {
-  max-width: 100% !important;
-  overflow: hidden !important;
-  text-overflow: ellipsis !important;
-  white-space: nowrap !important;
+	max-width: 100% !important;
+	overflow: hidden !important;
+	text-overflow: ellipsis !important;
+	white-space: nowrap !important;
 }

package/styles/qppds/utilities/_width.scss

@@ -2,78 +2,78 @@
 // stylelint-disable declaration-no-important
 
 $width-values: (
-  10: 10%,
-  20: 20%,
-  25: 25%,
-  30: 30%,
-  33: 33%,
-  34: 34%,
-  40: 40%,
-  50: 50%,
-  60: 60%,
-  70: 70%,
-  75: 75%,
-  80: 80%,
-  90: 90%,
-  100: 100%,
-  third: calc(100% / 3),
-  two-thirds: calc(100% / 1.5),
-  auto: auto
+	10: 10%,
+	20: 20%,
+	25: 25%,
+	30: 30%,
+	33: 33%,
+	34: 34%,
+	40: 40%,
+	50: 50%,
+	60: 60%,
+	70: 70%,
+	75: 75%,
+	80: 80%,
+	90: 90%,
+	100: 100%,
+	third: calc(100% / 3),
+	two-thirds: calc(100% / 1.5),
+	auto: auto,
 );
 
 @each $name in map-keys($width-values) {
-  $value: map-get($width-values, $name);
+	$value: map-get($width-values, $name);
 
-  .qpp-u-width--#{$name} {
-    width: #{$value} !important;
-  }
+	.qpp-u-width--#{$name} {
+		width: #{$value} !important;
+	}
 }
 
 @each $breakpoint in map-keys($breakpoints) {
-  $viewport: map-get($breakpoints, $breakpoint);
+	$viewport: map-get($breakpoints, $breakpoint);
 
-  @media (min-width: $viewport) {
-    @each $name in map-keys($width-values) {
-      $value: map-get($width-values, $name);
+	@media (min-width: $viewport) {
+		@each $name in map-keys($width-values) {
+			$value: map-get($width-values, $name);
 
-      .qpp-u-#{$breakpoint}-width--#{$name} {
-        width: #{$value} !important;
-      }
-    }
-  }
+			.qpp-u-#{$breakpoint}-width--#{$name} {
+				width: #{$value} !important;
+			}
+		}
+	}
 }
 
 $static-width-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-width-vals) {
-  $value: map-get($static-width-vals, $name);
+	$value: map-get($static-width-vals, $name);
 
-  .qpp-u-width--#{$name}px {
-    width: #{$value} !important;
-  }
+	.qpp-u-width--#{$name}px {
+		width: #{$value} !important;
+	}
 }
 
 @each $breakpoint in map-keys($breakpoints) {
-  $viewport: map-get($breakpoints, $breakpoint);
+	$viewport: map-get($breakpoints, $breakpoint);
 
-  @media (min-width: $viewport) {
-    @each $name in map-keys($static-width-vals) {
-      $value: map-get($static-width-vals, $name);
+	@media (min-width: $viewport) {
+		@each $name in map-keys($static-width-vals) {
+			$value: map-get($static-width-vals, $name);
 
-      .qpp-u-#{$breakpoint}-width--#{$name}px {
-        width: #{$value} !important;
-      }
-    }
-  }
+			.qpp-u-#{$breakpoint}-width--#{$name}px {
+				width: #{$value} !important;
+			}
+		}
+	}
 }