@spectrum-css/card/index.css

The Spectrum CSS card component

/*!
 * Copyright 2024 Adobe. All rights reserved.
 *
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

@import "./themes/spectrum-two.css";

.spectrum-Card {
	/* Default Layout */
	--spectrum-card-background-color: var(--mod-card-background-color, var(--spectrum-background-layer-2-color));
	--spectrum-card-body-spacing: var(--mod-card-body-spacing, var(--spectrum-spacing-400));
	--spectrum-card-body-padding-block-start: var(--mod-card-body-padding-block-start, var(--spectrum-spacing-300));
	--spectrum-card-title-padding-right: var(--mod-card-title-padding-right, var(--spectrum-spacing-400));
	--spectrum-card-content-margin-top: var(--mod-card-content-margin-top, var(--spectrum-spacing-100));
	--spectrum-card-content-margin-bottom: var(--mod-card-content-margin-bottom, var(--spectrum-spacing-300));
	--spectrum-card-footer-padding-top: var(--mod-card-footer-padding-block-start, var(--spectrum-spacing-100));
	--spectrum-card-subtitle-padding-right: var(--mod-card-subtitle-padding-right, var(--spectrum-spacing-100));

	--spectrum-card-border-width: var(--mod-card-border-width, var(--spectrum-border-width-100));
	--spectrum-card-corner-radius: var(--mod-card-corner-radius, var(--spectrum-corner-radius-100));

	/* Typography */
	--spectrum-card-title-font-family: var(--mod-card-title-font-family, var(--spectrum-sans-font-family-stack));
	--spectrum-card-title-font-size: var(--mod-card-title-font-size, var(--spectrum-heading-size-xxs));
	--spectrum-card-title-font-weight: var(--mod-card-title-font-weight, var(--spectrum-heading-sans-serif-font-weight));
	--spectrum-card-title-font-style: var(--mod-card-title-font-style, var(--spectrum-heading-sans-serif-font-style));
	--spectrum-card-title-line-height: var(--mod-card-title-line-height, var(--spectrum-heading-line-height));
	--spectrum-card-title-font-color: var(--mod-card-title-font-color, var(--spectrum-heading-color));

	--spectrum-card-body-font-family: var(--mod-card-body-font-family, var(--spectrum-sans-font-family-stack));
	--spectrum-card-body-font-size: var(--mod-card-body-font-size, var(--spectrum-body-size-s));
	--spectrum-card-body-font-weight: var(--mod-card-body-font-weight, var(--spectrum-body-sans-serif-font-weight));
	--spectrum-card-body-font-style: var(--mod-card-body-font-style, var(--spectrum-body-sans-serif-font-style));
	--spectrum-card-body-line-height: var(--mod-card-body-line-height, var(--spectrum-body-line-height));
	--spectrum-card-body-font-color: var(--mod-card-body-font-color, var(--spectrum-body-color));

	/* Quick Actions */
	--spectrum-card-actions-spacing: var(--mod-card-actions-spacing, var(--spectrum-spacing-300));
	--spectrum-card-actions-size: var(--mod-card-actions-size, var(--spectrum-card-selection-background-size));
	--spectrum-card-actions-border-radius: var(--mod-card-actions-border-radius, var(--spectrum-corner-radius-100));

	/* TODO update to --spectrum-card-selection-background-color token once an RGB stripped value is available */
	--spectrum-card-actions-background-color-rgb: var(--mod-card-actions-background-color-rgb, var(--spectrum-gray-100-rgb));
	--spectrum-card-actions-background-color-opacity: var(--mod-card-actions-background-color-opacity, var(--spectrum-card-selection-background-color-opacity));
	--spectrum-card-actions-drop-shadow-color: var(--mod-card-actions-drop-shadow-color, var(--spectrum-drop-shadow-color));
	--spectrum-card-actions-drop-shadow-x: var(--mod-card-actions-drop-shadow-x, var(--spectrum-drop-shadow-x));
	--spectrum-card-actions-drop-shadow-y: var(--mod-card-actions-drop-shadow-y, var(--spectrum-drop-shadow-y));
	--spectrum-card-actions-drop-shadow-blur: var(--mod-card-actions-drop-shadow-blur, var(--spectrum-drop-shadow-blur));

	/* Focus */
	--spectrum-card-focus-indicator-color: var(--mod-card-focus-indicator-color, var(--spectrum-focus-indicator-color));
	--spectrum-card-focus-indicator-width: var(--mod-card-focus-indicator-width, var(--spectrum-focus-indicator-thickness));

	/* Selected */
	--spectrum-card-selected-background-opacity: var(--mod-card-selected-background-opacity, 0.1); /* table-selected-row-background-opacity does not exist in tokens yet */

	--spectrum-card-preview-border-width-selected: var(--mod-card-preview-border-width-selected, var(--spectrum-border-width-100));

	/* Horizontal */
	--spectrum-card-horizontal-body-padding: var(--mod-card-horizontal-body-padding, var(--spectrum-spacing-300));
	--spectrum-card-horizontal-preview-padding: var(--mod-card-horizontal-preview-padding, var(--spectrum-spacing-200));

	&.spectrum-Card--quiet {
		--mod-card-minimum-width: var(--mod-card-minimum-width-quiet);
		--mod-card-content-margin-top: var(--mod-card-content-margin-top-quiet, var(--spectrum-spacing-100));
	}

	&.spectrum-Card--gallery {
		--spectrum-card-content-margin-top: var(--spectrum-spacing-100);
	}

	&.is-selected,
	&.is-drop-target {
		--spectrum-card-border-color: var(--mod-card-border-color-selected, var(--spectrum-blue-700));
	}
}

.spectrum-Card {
	position: relative;
	display: inline-flex;
	flex-direction: column;
	box-sizing: border-box;
	text-decoration: none;

	min-inline-size: var(--mod-card-minimum-width, var(--spectrum-card-minimum-width));

	border: var(--spectrum-card-border-width) solid transparent;
	border-radius: var(--spectrum-card-corner-radius);
	border-color: var(--mod-card-border-color, var(--spectrum-card-border-color));

	background-color: var(--spectrum-card-background-color);

	&::before {
		content: "";
		block-size: 100%;
		inline-size: 100%;
		position: absolute;
		inset-inline-start: 0;
		inset-block-start: 0;
	}

	/* Focus indicator - use after so change in border-width does not affect card width */
	&::after {
		content: "";
		block-size: 100%;
		inline-size: 100%;
		position: absolute;
		inset-inline-start: 0;
		inset-inline-end: 0;
		inset-block-start: 0;
		border-style: solid;
		border-color: transparent;
		border-width: 0;
		border-radius: var(--spectrum-card-corner-radius);
		margin-block-start: calc(-1 * var(--spectrum-card-focus-indicator-width));
		margin-inline-start: calc(-1 * var(--spectrum-card-focus-indicator-width));
	}

	&:focus-visible {
		outline: none;

		&::after {
			border-width: var(--spectrum-card-focus-indicator-width);
			border-color: var(--spectrum-card-focus-indicator-color);
		}

		.spectrum-Card-coverPhoto {
			border-start-start-radius: calc(var(--spectrum-card-corner-radius) - var(--spectrum-card-focus-indicator-width));
			border-start-end-radius: calc(var(--spectrum-card-corner-radius) - var(--spectrum-card-focus-indicator-width));
		}

		.spectrum-Card-preview {
			border-start-start-radius: calc(var(--spectrum-card-corner-radius) - var(--spectrum-card-focus-indicator-width));
			border-start-end-radius: calc(var(--spectrum-card-corner-radius) - var(--spectrum-card-focus-indicator-width));
		}
	}

	&:hover {
		--mod-card-border-color: var(--mod-card-border-color-hover, var(--spectrum-card-border-color-hover));
	}

	&.is-selected::before {
		background-color: rgb(var(--mod-card-selected-background-color-rgb, var(--spectrum-card-selected-background-color-rgb)), var(--spectrum-card-selected-background-opacity));
	}

	&.is-drop-target {
		--mod-card-background-color: var(--spectrum-background-base-color);

		box-shadow: 0 0 0 1px var(--spectrum-card-border-color);
	}

	&.is-focused,
	&.is-selected,
	&:focus,
	&:hover {
		.spectrum-Card-quickActions,
		.spectrum-Card-actions {
			visibility: visible;
			opacity: 1;
			pointer-events: all;
		}
	}
}

.spectrum-Card-quickActions {
	position: absolute;
	visibility: hidden;
	box-shadow: var(--spectrum-card-actions-drop-shadow-x) var(--spectrum-card-actions-drop-shadow-y) var(--spectrum-card-actions-drop-shadow-blur) var(--spectrum-card-actions-drop-shadow-color);

	inline-size: var(--spectrum-card-actions-size);
	block-size: var(--spectrum-card-actions-size);
	border-radius: var(--spectrum-card-actions-border-radius);
	background-color: rgb(var(--spectrum-card-actions-background-color-rgb), var(--spectrum-card-actions-background-color-opacity));

	inset-inline-start: calc(var(--spectrum-card-actions-spacing) - var(--spectrum-card-border-width));
	inset-block-start: calc(var(--spectrum-card-actions-spacing) - var(--spectrum-card-border-width));

	/* From QuickAction component that is officially deprecated */
	pointer-events: auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;

	transition:
		transform var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, 130ms)) ease-in-out,
		opacity var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, 130ms)) ease-in-out,
		visibility 0ms linear var(--mod-overlay-animation-duration, var(--spectrum-animation-duration-100, 130ms));
}

.spectrum-Card-actions {
	inset-block-start: var(--spectrum-card-actions-spacing);
	inset-inline-end: var(--spectrum-card-actions-spacing);
}

.spectrum-Card-coverPhoto {
	position: relative;
	block-size: var(--mod-card-preview-minimum-height, var(--spectrum-card-preview-minimum-height));
	box-sizing: border-box;
	overflow: hidden;

	display: flex;
	align-items: center;
	justify-content: center;

	border-start-start-radius: calc(var(--spectrum-card-corner-radius) - var(--spectrum-card-border-width));
	border-start-end-radius: calc(var(--spectrum-card-corner-radius) - var(--spectrum-card-border-width));
	border-end-end-radius: 0;
	border-end-start-radius: 0;

	background-size: cover;
	background-position: center center;

	background-color: var(--mod-card-preview-background-color, var(--spectrum-card-preview-background-color));
	border-block-end-color: var(--mod-card-border-color, var(--spectrum-card-border-color));
}

.spectrum-Card .spectrum-Divider {
	margin: 0;
}

.spectrum-Card-content {
	display: flex;
	align-items: center;
	margin-block-start: var(--spectrum-card-content-margin-top);
}

.spectrum-Card-body {
	padding-block-start: var(--spectrum-card-body-padding-block-start);
	padding-inline-end: var(--mod-card-body-padding-inline-end, calc(var(--spectrum-card-body-spacing) - var(--spectrum-card-border-width)));
	padding-inline-start: var(--mod-card-body-padding-inline-start, calc(var(--spectrum-card-body-spacing) - var(--spectrum-card-border-width)));
	padding-block-end: var(--mod-card-body-padding-block-end, calc(var(--spectrum-card-body-spacing) - var(--spectrum-card-border-width)));
}

.spectrum-Card-preview {
	overflow: hidden;
	border-start-start-radius: var(--spectrum-card-corner-radius);
	border-start-end-radius: var(--spectrum-card-corner-radius);
	border-end-end-radius: 0;
	border-end-start-radius: 0;
	display: flex;
	align-items: center;
	color: var(--spectrum-card-body-font-color);
}

.spectrum-Card-title {
	padding-inline-end: var(--spectrum-card-title-padding-right);
	font-family: var(--spectrum-card-title-font-family);
	font-size: var(--spectrum-card-title-font-size);
	font-weight: var(--spectrum-card-title-font-weight);
	font-style: var(--spectrum-card-title-font-style);
	line-height: var(--spectrum-card-title-line-height);
	color: var(--spectrum-card-title-font-color);
}

.spectrum-Card-subtitle {
	padding-inline-end: var(--spectrum-card-subtitle-padding-right);
	color: var(--spectrum-card-title-font-color);
	text-transform: none;
}

.spectrum-Card-subtitle + .spectrum-Card-description::before {
	content: "•";
	padding-inline-end: var(--spectrum-card-subtitle-padding-right);
}

.spectrum-Card-description {
	font-family: var(--spectrum-card-body-font-family);
	font-size: var(--spectrum-card-body-font-size);
	font-weight: var(--spectrum-card-body-font-weight);
	font-style: var(--spectrum-card-body-font-style);
	line-height: var(--spectrum-card-body-line-height);
	color: var(--spectrum-card-body-font-color);
}

.spectrum-Card-footer {
	/* Accommodate for wanting less spacing between body and footer */
	margin-block-start: var(--mod-card-footer-margin-block-start, calc(-1 * (var(--spectrum-card-body-spacing) - var(--spectrum-card-content-margin-bottom))));
	margin-inline-start: var(--mod-card-footer-margin-inline-start, var(--spectrum-card-body-spacing));
	margin-inline-end: var(--mod-card-footer-margin-inline-end, var(--spectrum-card-body-spacing));
	padding-block-end: var(--mod-card-footer-padding-block-end, calc(var(--spectrum-card-body-spacing) - var(--spectrum-card-border-width)));
	padding-block-start: var(--spectrum-card-footer-padding-top);

	color: var(--spectrum-card-body-font-color);
	line-height: var(--spectrum-card-body-line-height);
	border-block-start: var(--spectrum-card-border-width) solid var(--mod-card-divider-color, var(--spectrum-card-divider-color));
}

.spectrum-Card-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.spectrum-Card-actionButton {
	z-index: 1;
}

.spectrum-Card--quiet {
	.spectrum-Card-preview {
		border: var(--spectrum-card-focus-indicator-width) solid transparent;
	}

	&:focus,
	&.is-focused {
		/* Quiet cards only have the focus indicator around the preview */
		&::after {
			border-width: 0;
		}

		.spectrum-Card-preview::after {
			border-color: var(--spectrum-card-focus-indicator-color);
		}
	}

	&.is-selected .spectrum-Card-preview {
		border: var(--spectrum-card-preview-border-width-selected) solid;
		border-color: var(--spectrum-card-border-color);
	}
}

.spectrum-Card--quiet,
.spectrum-Card--gallery {
	--mod-card-border-color-hover: transparent;

	border-width: 0;
	border-radius: 0;
	overflow: visible;
	border-color: transparent;
	background-color: transparent;
	block-size: 100%;

	&::before {
		display: none;
	}

	.spectrum-Card-preview {
		border-radius: var(--spectrum-card-corner-radius);
		background-color: var(--mod-card-preview-background-color, var(--mod-card-background-color, var(--spectrum-card-preview-background-color)));
		min-block-size: var(--mod-card-preview-minimum-height, var(--spectrum-card-preview-minimum-height));
		inline-size: 100%;
		flex: 1;
		margin: 0 auto;
		box-sizing: border-box;
		position: relative;

		/* @deprecation --mod-animation-duration-100 has been renamed and will be removed in a future version. */
		transition: background-color var(--mod-card-animation-duration, var(--mod-animation-duration-100, var(--spectrum-animation-duration-100)));
		overflow: visible;

		/* Use ::before to show the selected overlay */
		&::before {
			content: "";
			block-size: 100%;
			inline-size: 100%;
			position: absolute;
			inset-inline-start: 0;
			inset-block-start: 0;
		}

		/* Use ::after to show the selection outline so that the border doesn't
		   affect the layout of the content within the preview. */
		&::after {
			content: "";
			block-size: 100%;
			inline-size: 100%;
			position: absolute;
			inset-inline-start: 0;
			inset-inline-end: 0;
			inset-block-start: 0;
			border-style: solid;
			border-color: transparent;
			border-width: 0;
			border-radius: calc(var(--spectrum-card-corner-radius) + var(--spectrum-card-focus-indicator-width));
			margin-block-start: calc(-1 * var(--spectrum-card-focus-indicator-width));
			margin-inline-start: calc(-1 * var(--spectrum-card-focus-indicator-width));
		}
	}

	&:hover .spectrum-Card-preview {
		background-color: var(--mod-card-preview-background-color-hover, var(--mod-card-background-color-hover, var(--spectrum-card-preview-background-color-hover)));
	}

	&.is-drop-target {
		border-color: transparent;
		background-color: transparent;
		box-shadow: none;

		.spectrum-Card-preview {
			transition: none;
			background-color: var(--mod-card-preview-background-color, var(--mod-card-background-color, var(--spectrum-card-preview-background-color)));
		}

		.spectrum-Card-preview::before {
			border-color: var(--spectrum-card-focus-indicator-color);
			box-shadow: 0 0 0 1px var(--spectrum-card-focus-indicator-color);
		}
	}

	&.is-selected .spectrum-Card-preview::before {
		background-color: rgb(var(--mod-card-selected-background-color-rgb, var(--spectrum-card-selected-background-color-rgb)), var(--mod-card-selected-background-opacity, var(--spectrum-card-selected-background-opacity)));
	}

	.spectrum-Card-body {
		margin-block-start: var(--spectrum-card-content-margin-top);
		padding: 0;
	}

	.spectrum-Card-footer {
		margin-inline-end: 0;
		margin-inline-start: 0;
	}
}

.spectrum-Card--horizontal {
	flex-direction: row;

	&:hover .spectrum-Card-preview {
		border-color: var(--mod-card-border-color-hover, var(--spectrum-card-border-color-hover));
	}

	.spectrum-Card-preview {
		flex-shrink: 0;
		min-block-size: 0;
		display: flex;
		align-items: center;
		justify-content: center;

		border-start-start-radius: calc(var(--spectrum-card-corner-radius) - var(--spectrum-card-border-width));
		border-start-end-radius: 0;
		border-end-start-radius: calc(var(--spectrum-card-corner-radius) - var(--spectrum-card-border-width));
		border-end-end-radius: 0;

		padding: var(--spectrum-card-horizontal-preview-padding);
		background-color: var(--mod-card-preview-background-color, var(--spectrum-card-preview-background-color));
		border-color: var(--mod-card-border-color, var(--spectrum-card-border-color));
	}

	.spectrum-Card-header,
	.spectrum-Card-content {
		margin-block-start: 0;
		block-size: auto;
	}

	.spectrum-Card-content {
		margin-block-end: 0;
	}

	.spectrum-Card-title {
		padding-inline-end: 0;
	}

	.spectrum-Card-body {
		flex-shrink: 0;
		display: flex;
		justify-content: center;
		flex-direction: column;
		padding-block: 0;
		padding-inline: var(--spectrum-card-horizontal-body-padding);
	}
}

.spectrum-Card--gallery {
	min-inline-size: 0;

	.spectrum-Card-preview {
		padding: 0;
		border-radius: 0;
	}
}