Split styleguide CSS into modular files per section/pattern/layout/page

2026-05-25 08:29:52 +02:00
parent e13ce0ad23
commit 3e9c273823
18 changed files with 3273 additions and 3256 deletions
@@ -0,0 +1,69 @@
+/* ========================================================= */
+/* Patterns: Object Card                                     */
+/* ========================================================= */
+
+.sg-object-card-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-small);
+  align-items: flex-start;
+  width: 100%;
+}
+
+.sg-object-card {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 var(--layout-object-card-min-width);
+  min-width: var(--layout-object-card-min-width);
+  max-width: var(--layout-object-card-max-width);
+  height: var(--layout-object-card-height);
+}
+
+.sg-object-card-grid.sg-object-card-grid--multi-row .sg-object-card {
+  flex: 0 0 var(--layout-object-card-shared-width);
+  width: var(--layout-object-card-shared-width);
+}
+
+@media (max-width: 767px) {
+  .sg-object-card {
+    width: var(--layout-object-card-mobile-width);
+    min-width: 0;
+    max-width: none;
+    height: var(--layout-object-card-mobile-height);
+  }
+
+  .sg-object-card[data-pattern="object-group-card"] {
+    flex-basis: 100%;
+    width: 100%;
+    min-width: 0;
+    max-width: none;
+  }
+}
+
+.sg-object-card__content {
+  flex: var(--layout-object-card-content-grow) 1 auto;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  background: var(--color-white);
+}
+
+.sg-object-card__header {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.sg-object-card__actions {
+  display: flex;
+  gap: var(--spacing-small);
+  width: 100%;
+  margin-top: 0;
+}
+
+.sg-object-card__action {
+  flex: 1 1 0;
+  min-width: 0;
+}
+