Jump to content

Module:TabbedCard/styles.css

From Creopedia
.t-tabbedCard {
	margin-block: 16px;
	font-size: 0.875rem;
}

.t-tabbedCard .tabber {
	border: 1px solid var(--border-color-base);
	border-radius: 2px;
}

.t-tabbedCard .tabber__header {
	background-color: var(--background-color-neutral-subtle);
	border-top-left-radius: 2px;
	border-top-right-radius: 2px;
}

.t-tabbedCard .tabber__tab {
	/* Align tab text to the content padding */
	padding-inline: 12px;
}

.t-tabbedCard .tabber__panel {
	padding: 12px;
}

.t-tabbedCard--noPadding .tabber__panel {
	padding: 0;
}

.t-tabbedCard .tabber__panel > *:first-child {
	/* Spacing is controlled by padding at tabber__panel */
	margin-top: 0;
}

.t-tabbedCard .tabber__panel > *:last-child {
	/* Spacing is controlled by padding at tabber__panel */
	margin-bottom: 0;
}

/*
 * Table handling if the content is a table
 * There are two possible classes for the table:
 * - t-tabbedCard-table for <table> elements
 * - t-tabbedCard-table-container for parent elements containing the table
 */
.t-tabbedCard .t-tabbedCard-table,
.t-tabbedCard-table-container > .wikitable {
	max-width: none;
	display: table;
}

.t-tabbedCard .t-tabbedCard-table,
.t-tabbedCard-table-container > .wikitable {
	margin-block: 0;
}

.t-tabbedCard--noPadding .t-tabbedCard-table,
.t-tabbedCard-table-container > .wikitable {
	border: 0;
	width: 100%;
}