Template:Vehicle specifications/styles.css: Difference between revisions

Template page
imported>Alistair3149
No edit summary
 
sctools>Alistair3149
(Update spacing variable and fix img)
Line 1: Line 1:
.template-components__section {
.template-components__section {
position: relative;
position: relative;
padding-top: var( --space-md );
padding-top: var( --space-sm );
padding-bottom: var( --space-md );
padding-bottom: var( --space-sm );
display: flex;
display: flex;
flex-direction: column;
flex-direction: column;
gap: var( --space-sm );
gap: var( --space-xs );
}
}


Line 21: Line 21:
font-size: 0.875rem;
font-size: 0.875rem;
letter-spacing: 0.75px;
letter-spacing: 0.75px;
gap: var(--space-sm );
gap: var(--space-xs );
line-height: 1.25;
line-height: 1.25;
}
}


.template-components__label > img {
.template-components__label img {
height: 1rem;
height: 1rem;
width: auto;
width: auto;
Line 32: Line 32:
.template-components__group {
.template-components__group {
display: flex;
display: flex;
gap: var( --space-sm );
gap: var( --space-xs );
flex-wrap: wrap;
flex-wrap: wrap;
flex-grow: 1;
flex-grow: 1;
Line 40: Line 40:
display: flex;
display: flex;
flex-direction: column;
flex-direction: column;
gap: var( --space-sm );
gap: var( --space-xs );
flex-grow: 1;
flex-grow: 1;
}
}

Revision as of 01:05, 15 January 2023

.template-components__section {
	position: relative;
	padding-top: var( --space-sm );
	padding-bottom: var( --space-sm );
	display: flex;
	flex-direction: column;
	gap: var( --space-xs );
}

/* TemplateStyles style tag can get in-between */
.template-components__section + .template-components__section,
.template-components__section + style + .template-components__section {
	border-top: 1px solid var( --border-color-base );
}

.template-components__label {
	align-self: flex-start;
	display: flex;
	align-items: center;
	color: var( --color-base--subtle );
	font-size: 0.875rem;
	letter-spacing: 0.75px;
	gap: var(--space-xs );
	line-height: 1.25;
}

.template-components__label img {
	height: 1rem;
	width: auto;
}

.template-components__group {
	display: flex;
	gap: var( --space-xs );
	flex-wrap: wrap;
	flex-grow: 1;
}

.template-components__subgroup {
	display: flex;
	flex-direction: column;
	gap: var( --space-xs );
	flex-grow: 1;
}

.template-components__subgroup .template-component__connectorY {
	top: -0.5rem; /* calc( var( --space-sm ) * -1 ) */
}

.template-components__subgroup .template-component:last-of-type .template-component__connectorY {
	bottom: calc( 50% + 2px); /* calc( var( --connector-thickness ) + 2px ) */
}