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- | padding-top: var( --space-sm ); | ||
padding-bottom: var( --space- | padding-bottom: var( --space-sm ); | ||
display: flex; | display: flex; | ||
flex-direction: column; | flex-direction: column; | ||
gap: var( --space- | 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- | gap: var(--space-xs ); | ||
line-height: 1.25; | line-height: 1.25; | ||
} | } | ||
.template-components__label | .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- | 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- | 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 ) */
}