@microsoft/atlas-css 3.43.0 → 3.44.1

package/src/components/card.scss

@@ -1,252 +1,252 @@
-$card-color: $text !default;
-$card-shadow: $box-shadow-light;
-$card-padding: $spacer-5;
-$card-border-radius: $border-radius-sm;
-$card-row-gap: $spacer-3 !default;
-$card-column-gap: $spacer-5 !default;
-
-.card {
-	display: flex;
-	position: relative;
-	flex-direction: column;
-	justify-content: flex-start;
-	max-width: 100%;
-	padding: $card-padding 0 0;
-	border: 1px solid $border-white-high-contrast;
-	border-radius: $card-border-radius;
-	outline-color: $text;
-	background-color: $card-background;
-	color: $card-color;
-	box-shadow: $card-shadow;
-
-	> :first-child {
-		border-start-end-radius: $card-border-radius;
-		border-start-start-radius: $card-border-radius;
-	}
-
-	> :last-child {
-		border-end-end-radius: $card-border-radius;
-		border-end-start-radius: $card-border-radius;
-	}
-
-	.card-template {
-		display: grid;
-		flex-grow: 1;
-		padding: $card-padding;
-		grid-template: auto / 1fr $spacer-10;
-		gap: $card-row-gap $card-column-gap;
-		grid-template-areas:
-			'supertitle supertitle'
-			'title title'
-			'detail icon';
-
-		/* stylelint-disable no-descending-specificity */
-
-		.card-title {
-			margin-block-end: $spacer-5;
-		}
-	}
-
-	.card-template-icon {
-		margin-block-start: auto;
-		grid-area: icon;
-		width: $spacer-10;
-		height: $spacer-10;
-	}
-
-	.card-template-detail {
-		display: flex;
-		flex-direction: column;
-		align-self: stretch;
-		justify-content: flex-end;
-		font-size: $font-size-9;
-		line-height: 1.25;
-		grid-area: detail;
-	}
-
-	.card-header {
-		position: relative;
-		margin-block-end: 1.125rem;
-
-		.card-header-image {
-			position: relative;
-			width: 64px;
-			height: 64px;
-
-			img,
-			svg {
-				@include overlay;
-
-				display: block;
-				width: 100%;
-				height: 100%;
-			}
-		}
-	}
-
-	.card-header,
-	.card-content,
-	.card-template {
-		padding-inline: $card-padding;
-
-		&:first-child {
-			padding-block-start: $card-padding;
-			margin-block-start: -$card-padding;
-		}
-	}
-
-	// optional prescriptive inner elements
-
-	.card-supertitle {
-		@include line-clamp(1);
-
-		font-size: $font-size-9;
-		letter-spacing: $letter-spacing-wide;
-		line-height: 1;
-		text-transform: uppercase;
-		grid-area: supertitle;
-	}
-
-	// includes some resets for <a> and <button>
-
-	.card-title {
-		@include line-clamp(3);
-
-		flex-grow: 1;
-		margin: 0;
-		padding: 0;
-		border: none;
-		color: $primary;
-		font-size: $font-size-7;
-		font-weight: $weight-semibold;
-		line-height: 1.25;
-		text-align: start;
-		text-decoration: none;
-		appearance: none;
-		grid-area: title;
-
-		&:first-child {
-			margin-block-start: none;
-		}
-
-		&:only-child {
-			margin: 0;
-		}
-
-		&:visited {
-			color: $visited;
-		}
-	}
-
-	/* stylelint-disable selector-no-qualifying-type */
-
-	a.card-title:hover,
-	button.card-title:hover {
-		text-decoration: underline;
-		cursor: pointer;
-	}
-
-	.card-content {
-		flex-grow: 1;
-		margin-block-end: 1.125rem;
-
-		> *:not(:first-child) {
-			margin-block-start: 0.5rem;
-		}
-	}
-
-	.card-content-description {
-		@include line-clamp(4);
-
-		max-height: inherit;
-		padding-block-end: 0;
-		font-size: $font-size-8;
-		line-height: 1.25;
-	}
-
-	.card-footer {
-		display: flex;
-		flex-wrap: nowrap;
-		justify-content: space-between;
-		border-block-start: 1px solid $border;
-		margin-inline: $card-padding;
-
-		// Artificial alignment of card item, intended for use on when there's only a single .card-footer-items
-
-		&.card-footer-left,
-		&.card-footer-right {
-			.card-footer-item {
-				flex-grow: 0;
-			}
-		}
-
-		&.card-footer-left {
-			justify-content: flex-start;
-		}
-
-		&.card-footer-right {
-			justify-content: flex-end;
-		}
-
-		.card-footer-item {
-			display: flex;
-			flex-grow: 1;
-			flex-shrink: 1;
-			align-items: center;
-			padding-block: 0.375rem;
-
-			&:first-child,
-			&:only-child {
-				justify-content: flex-start;
-			}
-
-			&:last-child {
-				justify-content: flex-end;
-			}
-
-			/* stylelint-disable selector-max-specificity */
-
-			&:not(:last-child):not(:first-child):not(:only-child) {
-				justify-content: center;
-			}
-
-			/* stylelint-enable selector-max-specificity */
-
-			// Allow buttons to fit perfectly in card footer
-
-			.buttons {
-				margin-block: 0;
-			}
-
-			.button {
-				margin-block-end: 0;
-			}
-
-			/* stylelint-disable selector-max-specificity */
-
-			.button:last-child {
-				margin-inline-end: 0;
-			}
-
-			/* stylelint-enable selector-max-specificity */
-		}
-	}
-
-	@include tablet {
-		&.card-horizontal {
-			flex-flow: row wrap;
-
-			.card-content {
-				padding-inline-start: 0;
-				max-width: calc(100% - 7rem);
-				padding-inline-end: $spacer-10 + $spacer-5;
-			}
-
-			.card-footer {
-				flex-grow: 1;
-				flex-shrink: 1;
-				width: 100%;
-			}
-		}
-	}
-}
+$card-color: $text !default;
+$card-shadow: $box-shadow-light;
+$card-padding: $spacer-5;
+$card-border-radius: $border-radius-sm;
+$card-row-gap: $spacer-3 !default;
+$card-column-gap: $spacer-5 !default;
+
+.card {
+	display: flex;
+	position: relative;
+	flex-direction: column;
+	justify-content: flex-start;
+	max-width: 100%;
+	padding: $card-padding 0 0;
+	border: 1px solid $border-white-high-contrast;
+	border-radius: $card-border-radius;
+	outline-color: $text;
+	background-color: $card-background;
+	color: $card-color;
+	box-shadow: $card-shadow;
+
+	> :first-child {
+		border-start-end-radius: $card-border-radius;
+		border-start-start-radius: $card-border-radius;
+	}
+
+	> :last-child {
+		border-end-end-radius: $card-border-radius;
+		border-end-start-radius: $card-border-radius;
+	}
+
+	.card-template {
+		display: grid;
+		flex-grow: 1;
+		padding: $card-padding;
+		grid-template: auto / 1fr $spacer-10;
+		gap: $card-row-gap $card-column-gap;
+		grid-template-areas:
+			'supertitle supertitle'
+			'title title'
+			'detail icon';
+
+		/* stylelint-disable no-descending-specificity */
+
+		.card-title {
+			margin-block-end: $spacer-5;
+		}
+	}
+
+	.card-template-icon {
+		margin-block-start: auto;
+		grid-area: icon;
+		width: $spacer-10;
+		height: $spacer-10;
+	}
+
+	.card-template-detail {
+		display: flex;
+		flex-direction: column;
+		align-self: stretch;
+		justify-content: flex-end;
+		font-size: $font-size-9;
+		line-height: 1.25;
+		grid-area: detail;
+	}
+
+	.card-header {
+		position: relative;
+		margin-block-end: 1.125rem;
+
+		.card-header-image {
+			position: relative;
+			width: 64px;
+			height: 64px;
+
+			img,
+			svg {
+				@include overlay;
+
+				display: block;
+				width: 100%;
+				height: 100%;
+			}
+		}
+	}
+
+	.card-header,
+	.card-content,
+	.card-template {
+		padding-inline: $card-padding;
+
+		&:first-child {
+			padding-block-start: $card-padding;
+			margin-block-start: -$card-padding;
+		}
+	}
+
+	// optional prescriptive inner elements
+
+	.card-supertitle {
+		@include line-clamp(1);
+
+		font-size: $font-size-9;
+		letter-spacing: $letter-spacing-wide;
+		line-height: 1;
+		text-transform: uppercase;
+		grid-area: supertitle;
+	}
+
+	// includes some resets for <a> and <button>
+
+	.card-title {
+		@include line-clamp(3);
+
+		flex-grow: 1;
+		margin: 0;
+		padding: 0;
+		border: none;
+		color: $primary;
+		font-size: $font-size-7;
+		font-weight: $weight-semibold;
+		line-height: 1.25;
+		text-align: start;
+		text-decoration: none;
+		appearance: none;
+		grid-area: title;
+
+		&:first-child {
+			margin-block-start: none;
+		}
+
+		&:only-child {
+			margin: 0;
+		}
+
+		&:visited {
+			color: $visited;
+		}
+	}
+
+	/* stylelint-disable selector-no-qualifying-type */
+
+	a.card-title:hover,
+	button.card-title:hover {
+		text-decoration: underline;
+		cursor: pointer;
+	}
+
+	.card-content {
+		flex-grow: 1;
+		margin-block-end: 1.125rem;
+
+		> *:not(:first-child) {
+			margin-block-start: 0.5rem;
+		}
+	}
+
+	.card-content-description {
+		@include line-clamp(4);
+
+		max-height: inherit;
+		padding-block-end: 0;
+		font-size: $font-size-8;
+		line-height: 1.25;
+	}
+
+	.card-footer {
+		display: flex;
+		flex-wrap: nowrap;
+		justify-content: space-between;
+		border-block-start: 1px solid $border;
+		margin-inline: $card-padding;
+
+		// Artificial alignment of card item, intended for use on when there's only a single .card-footer-items
+
+		&.card-footer-left,
+		&.card-footer-right {
+			.card-footer-item {
+				flex-grow: 0;
+			}
+		}
+
+		&.card-footer-left {
+			justify-content: flex-start;
+		}
+
+		&.card-footer-right {
+			justify-content: flex-end;
+		}
+
+		.card-footer-item {
+			display: flex;
+			flex-grow: 1;
+			flex-shrink: 1;
+			align-items: center;
+			padding-block: 0.375rem;
+
+			&:first-child,
+			&:only-child {
+				justify-content: flex-start;
+			}
+
+			&:last-child {
+				justify-content: flex-end;
+			}
+
+			/* stylelint-disable selector-max-specificity */
+
+			&:not(:last-child):not(:first-child):not(:only-child) {
+				justify-content: center;
+			}
+
+			/* stylelint-enable selector-max-specificity */
+
+			// Allow buttons to fit perfectly in card footer
+
+			.buttons {
+				margin-block: 0;
+			}
+
+			.button {
+				margin-block-end: 0;
+			}
+
+			/* stylelint-disable selector-max-specificity */
+
+			.button:last-child {
+				margin-inline-end: 0;
+			}
+
+			/* stylelint-enable selector-max-specificity */
+		}
+	}
+
+	@include tablet {
+		&.card-horizontal {
+			flex-flow: row wrap;
+
+			.card-content {
+				padding-inline-start: 0;
+				max-width: calc(100% - 7rem);
+				padding-inline-end: $spacer-10 + $spacer-5;
+			}
+
+			.card-footer {
+				flex-grow: 1;
+				flex-shrink: 1;
+				width: 100%;
+			}
+		}
+	}
+}