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,187 @@
+/* ========================================================= */
+/* Components: Cards                                         */
+/* ========================================================= */
+
+.sg-card {
+  --layout-card-segment-padding-top: var(--card-segment-padding-vertical);
+  --layout-card-segment-padding-right: var(--card-segment-padding-horizontal);
+  --layout-card-segment-padding-bottom: var(--card-segment-padding-vertical);
+  --layout-card-segment-padding-left: var(--card-segment-padding-horizontal);
+  --layout-card-body-padding-top: var(--layout-card-segment-padding-top);
+  --layout-card-body-padding-right: var(--layout-card-segment-padding-right);
+  --layout-card-body-padding-bottom: var(--layout-card-segment-padding-bottom);
+  --layout-card-body-padding-left: var(--layout-card-segment-padding-left);
+  --layout-card-body-text-margin: 0;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  width: 100%;
+  box-sizing: border-box;
+  border: var(--border-none);
+  border-radius: var(--radius-card);
+  box-shadow: var(--shadow-none);
+  background: var(--surface-card);
+}
+
+.sg-card.sg-card--overlay-host {
+  overflow: visible;
+}
+
+.sg-card > .sg-card-segment:first-child {
+  border-top-left-radius: var(--radius-card);
+  border-top-right-radius: var(--radius-card);
+}
+
+.sg-card > .sg-card-segment:last-child {
+  border-bottom-left-radius: var(--radius-card);
+  border-bottom-right-radius: var(--radius-card);
+}
+
+@media (max-width: 48rem) {
+  :root {
+    --card-segment-padding-horizontal: var(--card-segment-padding-horizontal-mobile);
+  }
+}
+
+.sg-card-segment {
+  display: flex;
+  flex-direction: column;
+  height: auto;
+  justify-content: flex-start;
+  align-items: stretch;
+  align-content: flex-start;
+  padding:
+    var(--layout-card-segment-padding-top)
+    var(--layout-card-segment-padding-right)
+    var(--layout-card-segment-padding-bottom)
+    var(--layout-card-segment-padding-left);
+  gap: var(--layout-card-segment-content-gap);
+}
+
+.sg-card-segment--header {
+  color: var(--text-card-header);
+}
+
+.sg-card-segment--body {
+  justify-content: var(--layout-card-body-content-justify);
+  padding:
+    var(--layout-card-body-padding-top)
+    var(--layout-card-body-padding-right)
+    var(--layout-card-body-padding-bottom)
+    var(--layout-card-body-padding-left);
+  color: var(--text-card-body);
+  background: var(--surface-card-body);
+}
+
+.sg-card-segment--body > .sg-body {
+  margin: var(--layout-card-body-text-margin, 0);
+}
+
+.sg-card-segment--body.sg-object-card__content > .sg-body.sg-company-card__summary {
+  margin: var(--layout-company-card-analysis-gap-after-moat) 0 0 0;
+}
+
+.sg-card-segment--darkblue {
+  background: var(--surface-card-header-primary);
+}
+
+.sg-card-segment--darkgreen {
+  background: var(--surface-card-header-alternative);
+}
+
+.sg-card-segment--darkbrown {
+  background: var(--surface-card-header-muted);
+}
+
+.sg-card-segment--gray {
+  background: var(--surface-card-segment-neutral);
+}
+
+.sg-card-segment--white {
+  background: var(--surface-object-card-lower-segment);
+}
+
+.sg-card--content-card {
+  --surface-card-header-primary: var(--surface-content-block-card-title);
+  --surface-card-body: var(--surface-content-block-card-content);
+  --text-card-header: var(--text-content-block-card-title);
+  --text-card-body: var(--text-content-block-card-content);
+}
+
+.sg-card-segment + .sg-card-segment {
+  box-shadow: inset 0 1px 0 var(--divider-card-segment);
+}
+
+.sg-card-segment--darkbrown + .sg-card-segment--body {
+  box-shadow: none;
+}
+
+.sg-card-segment.sg-object-card__header {
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.sg-card-segment--body.sg-object-card__content {
+  background: var(--surface-object-card-lower-segment);
+}
+
+.sg-card-segment--body.sg-object-card__actions-segment {
+  background: var(--surface-object-card-lower-segment);
+}
+
+.sg-card-segment.sg-vsf-drawer-card__actions-segment {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-large);
+}
+
+.sg-group-card {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-small);
+  align-items: flex-start;
+  width: 100%;
+  box-sizing: border-box;
+  padding: var(--spacing-small);
+  border-radius: var(--radius-card);
+  background: var(--surface-card-group);
+}
+
+.sg-group-card > .sg-card {
+  flex: 1 1 calc(50% - var(--spacing-small));
+  width: calc(50% - var(--spacing-small));
+}
+
+.sg-page-cards .sg-preview-area {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.sg-page-cards .sg-preview-area > .sg-card,
+.sg-page-cards .sg-preview-area > .sg-transparent-card {
+  width: 100%;
+  max-width: none;
+}
+
+.sg-page-cards .sg-group-card > .sg-card {
+  flex: 0 0 100%;
+  width: 100%;
+}
+
+.sg-transparent-card {
+  color: var(--text-card-transparent);
+  background: var(--surface-card-transparent);
+  padding:
+    var(--card-segment-padding-vertical)
+    var(--card-segment-padding-horizontal)
+    var(--card-segment-padding-vertical)
+    var(--card-segment-padding-horizontal);
+}
+
+.sg-transparent-card p {
+  margin: 0;
+  color: var(--text-card-transparent);
+}
+