93 lines
2.4 KiB
CSS
93 lines
2.4 KiB
CSS
/* ========================================================= */
|
|
/* Patterns: Text Layouts */
|
|
/* ========================================================= */
|
|
|
|
.sg-text-layout-pattern {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-small);
|
|
}
|
|
|
|
.sg-text-layout-pattern__preview-surface {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: var(--spacing-large);
|
|
border-radius: var(--radius-card);
|
|
background: var(--surface-text-layout-preview);
|
|
}
|
|
|
|
.sg-text-layout-pattern__sample {
|
|
margin: 0;
|
|
}
|
|
|
|
.sg-text-layout-pattern__sample--full-width {
|
|
width: 100%;
|
|
}
|
|
|
|
.sg-text-layout-pattern__sample--sixty-width {
|
|
width: 60%;
|
|
}
|
|
|
|
.sg-text-layout-pattern__sample--two-column {
|
|
margin: 0;
|
|
}
|
|
|
|
.sg-text-layout-pattern__two-column {
|
|
width: 100%;
|
|
min-width: 0;
|
|
display: grid;
|
|
grid-template-columns: var(--layout-text-layout-two-column-columns);
|
|
column-gap: var(--layout-text-layout-column-gap);
|
|
}
|
|
|
|
.sg-text-layout-pattern__three-column-distributed {
|
|
width: 100%;
|
|
min-width: 0;
|
|
display: grid;
|
|
grid-template-columns: var(--layout-text-layout-three-column-columns);
|
|
column-gap: var(--layout-text-layout-column-gap);
|
|
}
|
|
|
|
.sg-text-layout-pattern__column {
|
|
margin: 0;
|
|
min-width: 0;
|
|
}
|
|
|
|
.sg-text-layout-pattern__column--align-left {
|
|
text-align: var(--text-align-text-layout-column-left);
|
|
}
|
|
|
|
.sg-text-layout-pattern__column--align-center {
|
|
text-align: var(--text-align-text-layout-column-center);
|
|
}
|
|
|
|
.sg-text-layout-pattern__column--align-right {
|
|
text-align: var(--text-align-text-layout-column-right);
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.sg-text-layout-pattern__sample--sixty-width,
|
|
.sg-text-layout-pattern__sample--two-column,
|
|
.sg-text-layout-pattern__two-column,
|
|
.sg-text-layout-pattern__three-column-distributed {
|
|
width: 100%;
|
|
}
|
|
|
|
.sg-text-layout-pattern__two-column,
|
|
.sg-text-layout-pattern__three-column-distributed {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
.sg-text-layout-pattern__two-column[data-pattern-part="text-block-two-column"] {
|
|
grid-template-columns: var(--layout-text-layout-two-column-columns);
|
|
}
|
|
|
|
.sg-text-layout-pattern__three-column-distributed[data-pattern-part="text-block-three-column-distributed"] {
|
|
grid-template-columns: var(--layout-text-layout-three-column-columns);
|
|
}
|
|
|
|
.sg-text-layout-pattern__three-column-distributed[data-pattern-part="company-card-metrics-three-column"] {
|
|
grid-template-columns: var(--layout-text-layout-three-column-columns);
|
|
}
|
|
}
|