92 lines
2.1 KiB
CSS
92 lines
2.1 KiB
CSS
/* ========================================================= */
|
|
/* Patterns: Text Layouts */
|
|
/* ========================================================= */
|
|
|
|
.sg-page-text-layouts {
|
|
background: var(--surface-form-preview);
|
|
}
|
|
|
|
.sg-page-text-layouts .sg-main-heading,
|
|
.sg-page-text-layouts .sg-preview-label {
|
|
color: inherit;
|
|
}
|
|
|
|
.sg-text-layout-pattern {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-small);
|
|
}
|
|
|
|
.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__two-column--stacked-mobile {
|
|
width: 100%;
|
|
min-width: 0;
|
|
}
|
|
|
|
.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__three-column-distributed > .sg-body {
|
|
margin: 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__two-column--stacked-mobile,
|
|
.sg-text-layout-pattern__three-column-distributed {
|
|
width: 100%;
|
|
}
|
|
|
|
.sg-text-layout-pattern__two-column--stacked-mobile {
|
|
grid-template-columns: 1fr;
|
|
row-gap: var(--layout-text-layout-column-gap);
|
|
}
|
|
}
|