Sync styleguide 2026.05.18.1

2026-06-03 16:25:03 +02:00
parent 70272e81d6
commit 543d3e5af5
66 changed files with 22706 additions and 0 deletions
@@ -0,0 +1,79 @@
+/* ========================================================= */
+/* 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__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__three-column-distributed {
+    width: 100%;
+  }
+}