@madie/madie-design-system 1.2.39 → 1.2.41

package/styles/qppds/components/_card.scss

@@ -1,175 +1,175 @@
-@import '../settings/index';
+@import "../settings/index";
 
 .qpp-c-card {
-  flex-direction: column;
-  display: flex;
-  position: relative;
-
-  .qpp-c-card__content {
-    flex-direction: column;
-    display: flex;
-    position: relative;
-  }
-
-  .qpp-c-card__header {
-    border-top: 4px solid $blue-60;
-    box-shadow: none;
-    height: auto;
-    background: transparent;
-    display: flex;
-    flex-direction: column;
-    position: relative;
-    z-index: 0;
-    padding: 0;
-  }
-
-  .qpp-c-card__eyebrow {
-    color: $gray-80;
-    padding: $spacing-16 0 0;
-    margin: 0;
-    display: block;
-    order: -1;
-  }
-
-  .qpp-c-card__title {
-    color: $gray-80;
-    padding: $spacing-16 0 $spacing-8;
-    margin: 0;
-    font-weight: $font-regular;
-  }
-
-  .qpp-c-card__body {
-    display: block;
-    padding: 0 0 $spacing-8;
-    margin: 0;
-
-    p {
-      color: $gray-80;
-      font-size: $font-size-16;
-      padding: 0;
-      margin: 0;
-    }
-  }
-
-  .qpp-c-card__cta {
-    display: block;
-    margin: 0;
-    padding-top: rem(7px);
-    line-height: $line-height-xs;
-
-    .qpp-c-button {
-      margin: -1px;
-    }
-  }
-
-  .qpp-c-card__media {
-    display: block;
-    width: 100%;
-    order: -1;
-    padding: 0 0 $spacing-8;
-
-    img {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-    }
-
-    [role='img'] {
-      width: 100%;
-      height: 100%;
-      background-size: cover;
-      background-position: center;
-      background-repeat: no-repeat;
-      position: relative;
-    }
-  }
-
-  &.qpp-c-card--image {
-    .qpp-c-card__header {
-      border-top: 0;
-    }
-  }
-
-  &.qpp-c-card--flag {
-    flex-direction: row;
-
-    .qpp-c-card__media {
-      flex: 0 50%;
-      padding: 0 $spacing-24 0 0;
-    }
-
-    .qpp-c-card__content {
-      flex: 0 50%;
-    }
-  }
-
-  /* stylelint-disable max-nesting-depth */
-  @each $breakpoint in map-keys($breakpoints) {
-    $value: map-get($breakpoints, $breakpoint);
-
-    @media (min-width: $value) {
-      &.qpp-c-#{$breakpoint}-card--flag {
-        flex-direction: row;
-
-        .qpp-c-card__media {
-          flex: 0 50%;
-          padding: 0 $spacing-24 0 0;
-        }
-
-        .qpp-c-card__content {
-          flex: 0 50%;
-        }
-      }
-      &.qpp-c-#{$breakpoint}-card--default {
-        flex-direction: column;
-
-        .qpp-c-card__media {
-          flex: 0 1 auto;
-          padding: 0 0 $spacing-8;
-        }
-
-        .qpp-c-card__content {
-          flex: 0 1 auto;
-        }
-      }
-    }
-  }
-  /* stylelint-enable max-nesting-depth */
-
-  // "fixed image height" helper variants to match existing FE design.
-  // Required when using "background-image" cards, but not for img element media cards
-  &.qpp-c-card--small {
-    .qpp-c-card__media {
-      > img,
-      > [role='img'] {
-        height: 175px;
-      }
-    }
-
-    .qpp-c-card__title {
-      font-size: $font-size-18;
-
-      @media (min-width: $width-xs) {
-        font-size: $font-size-20;
-      }
-    }
-  }
-
-  &.qpp-c-card--medium {
-    .qpp-c-card__media {
-      > img,
-      > [role='img'] {
-        height: 220px;
-      }
-    }
-  }
-
-  &.qpp-c-card--large {
-    .qpp-c-card__media {
-      > img,
-      > [role='img'] {
-        height: 286px;
-      }
-    }
-  }
+	flex-direction: column;
+	display: flex;
+	position: relative;
+
+	.qpp-c-card__content {
+		flex-direction: column;
+		display: flex;
+		position: relative;
+	}
+
+	.qpp-c-card__header {
+		border-top: 4px solid $blue-60;
+		box-shadow: none;
+		height: auto;
+		background: transparent;
+		display: flex;
+		flex-direction: column;
+		position: relative;
+		z-index: 0;
+		padding: 0;
+	}
+
+	.qpp-c-card__eyebrow {
+		color: $gray-80;
+		padding: $spacing-16 0 0;
+		margin: 0;
+		display: block;
+		order: -1;
+	}
+
+	.qpp-c-card__title {
+		color: $gray-80;
+		padding: $spacing-16 0 $spacing-8;
+		margin: 0;
+		font-weight: $font-regular;
+	}
+
+	.qpp-c-card__body {
+		display: block;
+		padding: 0 0 $spacing-8;
+		margin: 0;
+
+		p {
+			color: $gray-80;
+			font-size: $font-size-16;
+			padding: 0;
+			margin: 0;
+		}
+	}
+
+	.qpp-c-card__cta {
+		display: block;
+		margin: 0;
+		padding-top: rem(7px);
+		line-height: $line-height-xs;
+
+		.qpp-c-button {
+			margin: -1px;
+		}
+	}
+
+	.qpp-c-card__media {
+		display: block;
+		width: 100%;
+		order: -1;
+		padding: 0 0 $spacing-8;
+
+		img {
+			width: 100%;
+			height: 100%;
+			object-fit: cover;
+		}
+
+		[role="img"] {
+			width: 100%;
+			height: 100%;
+			background-size: cover;
+			background-position: center;
+			background-repeat: no-repeat;
+			position: relative;
+		}
+	}
+
+	&.qpp-c-card--image {
+		.qpp-c-card__header {
+			border-top: 0;
+		}
+	}
+
+	&.qpp-c-card--flag {
+		flex-direction: row;
+
+		.qpp-c-card__media {
+			flex: 0 50%;
+			padding: 0 $spacing-24 0 0;
+		}
+
+		.qpp-c-card__content {
+			flex: 0 50%;
+		}
+	}
+
+	/* stylelint-disable max-nesting-depth */
+	@each $breakpoint in map-keys($breakpoints) {
+		$value: map-get($breakpoints, $breakpoint);
+
+		@media (min-width: $value) {
+			&.qpp-c-#{$breakpoint}-card--flag {
+				flex-direction: row;
+
+				.qpp-c-card__media {
+					flex: 0 50%;
+					padding: 0 $spacing-24 0 0;
+				}
+
+				.qpp-c-card__content {
+					flex: 0 50%;
+				}
+			}
+			&.qpp-c-#{$breakpoint}-card--default {
+				flex-direction: column;
+
+				.qpp-c-card__media {
+					flex: 0 1 auto;
+					padding: 0 0 $spacing-8;
+				}
+
+				.qpp-c-card__content {
+					flex: 0 1 auto;
+				}
+			}
+		}
+	}
+	/* stylelint-enable max-nesting-depth */
+
+	// "fixed image height" helper variants to match existing FE design.
+	// Required when using "background-image" cards, but not for img element media cards
+	&.qpp-c-card--small {
+		.qpp-c-card__media {
+			> img,
+			> [role="img"] {
+				height: 175px;
+			}
+		}
+
+		.qpp-c-card__title {
+			font-size: $font-size-18;
+
+			@media (min-width: $width-xs) {
+				font-size: $font-size-20;
+			}
+		}
+	}
+
+	&.qpp-c-card--medium {
+		.qpp-c-card__media {
+			> img,
+			> [role="img"] {
+				height: 220px;
+			}
+		}
+	}
+
+	&.qpp-c-card--large {
+		.qpp-c-card__media {
+			> img,
+			> [role="img"] {
+				height: 286px;
+			}
+		}
+	}
 }

package/styles/qppds/components/_dropdown.scss

@@ -1,55 +1,55 @@
-@import '../settings/index';
+@import "../settings/index";
 
 .qpp-c-dropdown {
-  display: block;
-  border: 1px solid $gray-10;
-  border-radius: 3px;
-  color: $gray-80;
-  font-size: $font-size-14;
-  font-family: $font-rubik;
-  font-weight: $font-regular;
-  line-height: $line-height-xs;
-  background-color: $white;
-  box-sizing: border-box;
-  padding: $spacing-12 $spacing-40 $spacing-12 $spacing-16;
-  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
-  background-size: $font-size-18 auto, 100%;
-  background-position: right $spacing-12 top 50%, 0 0;
-  background-repeat: no-repeat, repeat;
-  appearance: none;
-  -moz-appearance: none; /* stylelint-disable-line property-no-vendor-prefix */
-  -webkit-appearance: none; /* stylelint-disable-line property-no-vendor-prefix */
+	display: block;
+	border: 1px solid $gray-10;
+	border-radius: 3px;
+	color: $gray-80;
+	font-size: $font-size-14;
+	font-family: $font-rubik;
+	font-weight: $font-regular;
+	line-height: $line-height-xs;
+	background-color: $white;
+	box-sizing: border-box;
+	padding: $spacing-12 $spacing-40 $spacing-12 $spacing-16;
+	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+	background-size: $font-size-18 auto, 100%;
+	background-position: right $spacing-12 top 50%, 0 0;
+	background-repeat: no-repeat, repeat;
+	appearance: none;
+	-moz-appearance: none; /* stylelint-disable-line property-no-vendor-prefix */
+	-webkit-appearance: none; /* stylelint-disable-line property-no-vendor-prefix */
 
-  &:hover,
-  &.qpp-c-dropdown--hover {
-    background-color: $gray-04;
-  }
+	&:hover,
+	&.qpp-c-dropdown--hover {
+		background-color: $gray-04;
+	}
 
-  &:focus,
-  &.qpp-c-dropdown--focus {
-    border: 1px solid $blue-60;
-    box-shadow: 0 0 0 4px $blue-10;
-    outline: none;
-    text-decoration: none;
-  }
+	&:focus,
+	&.qpp-c-dropdown--focus {
+		border: 1px solid $blue-60;
+		box-shadow: 0 0 0 4px $blue-10;
+		outline: none;
+		text-decoration: none;
+	}
 
-  &:disabled,
-  &.qpp-c-dropdown--disabled {
-    background-color: $gray-04;
-    color: $gray-60;
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(113, 113, 113)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
-  }
+	&:disabled,
+	&.qpp-c-dropdown--disabled {
+		background-color: $gray-04;
+		color: $gray-60;
+		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(113, 113, 113)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
+	}
 }
 
 .qpp-c-dropdown::-ms-expand {
-  display: none;
+	display: none;
 }
 
 .qpp-c-dropdown::-ms-value {
-  background: none;
-  color: $gray-80;
+	background: none;
+	color: $gray-80;
 }
 
 .qpp-c-dropdown--big {
-  padding: $spacing-16 $spacing-40 $spacing-16 $spacing-16;
+	padding: $spacing-16 $spacing-40 $spacing-16 $spacing-16;
 }