From 3e9c273823a5ef70bd9d403d731ba20c021d9ce2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mathias=20Gla=CC=88ser?= Date: Mon, 25 May 2026 08:29:52 +0200 Subject: [PATCH] Split styleguide CSS into modular files per section/pattern/layout/page --- styleguide.css | 3273 +---------------- styles/01-foundations.css | 282 ++ styles/02-base.css | 97 + styles/03-typography-helpers.css | 67 + styles/10-components-interactive-elements.css | 1356 +++++++ styles/20-patterns-portal-header.css | 69 + styles/21-patterns-options-row.css | 164 + styles/22-patterns-object-card.css | 69 + styles/23-patterns-object-group-card.css | 42 + styles/24-patterns-navigation-card.css | 4 + styles/25-patterns-form-sections.css | 261 ++ styles/30-layouts-card-list-page.css | 186 + styles/31-patterns-text-layouts.css | 81 + .../32-patterns-card-group-keyboard-nav.css | 44 + styles/40-components-cards.css | 187 + styles/41-components-charts.css | 261 ++ styles/42-components-data-display.css | 69 + styles/43-components-typography.css | 17 + 18 files changed, 3273 insertions(+), 3256 deletions(-) create mode 100644 styles/01-foundations.css create mode 100644 styles/02-base.css create mode 100644 styles/03-typography-helpers.css create mode 100644 styles/10-components-interactive-elements.css create mode 100644 styles/20-patterns-portal-header.css create mode 100644 styles/21-patterns-options-row.css create mode 100644 styles/22-patterns-object-card.css create mode 100644 styles/23-patterns-object-group-card.css create mode 100644 styles/24-patterns-navigation-card.css create mode 100644 styles/25-patterns-form-sections.css create mode 100644 styles/30-layouts-card-list-page.css create mode 100644 styles/31-patterns-text-layouts.css create mode 100644 styles/32-patterns-card-group-keyboard-nav.css create mode 100644 styles/40-components-cards.css create mode 100644 styles/41-components-charts.css create mode 100644 styles/42-components-data-display.css create mode 100644 styles/43-components-typography.css diff --git a/styleguide.css b/styleguide.css index 3242bb3..7b8b3d5 100644 --- a/styleguide.css +++ b/styleguide.css @@ -1,3256 +1,17 @@ -/* ========================================================= */ -/* Foundations */ -/* ========================================================= */ - -:root { - /* Colors */ - --color-darkblue: #4661A9; - --color-midblue: #657FBA; - --color-darkgreen: #4D646E; - --color-darkbrown: #665F57; - --color-light-grey: #E2E5E9; - --color-medium-grey: #CDCFD4; - --color-dark-grey: #7B879D; - --color-white: #FFFFFF; - --color-process-inactive: #FFAE79; - --color-signal-green: #009101; - --color-signal-yellow: #9C7A00; - --color-signal-red: #9B3B2F; - --color-font-dark: #414959; - --color-font-light: #FFFFFF; - --color-font-hyperlink: #FF6900; - --color-background-purple: #373C4A; - --color-background-purple-light: #656C7D; - --color-transparent: transparent; - - /* Semantic component tokens: Cards */ - --surface-card: var(--color-light-grey); - --surface-card-body: var(--color-light-grey); - --surface-card-segment-neutral: var(--color-light-grey); - --surface-card-group: var(--color-background-purple-light); - --surface-card-transparent: var(--color-transparent); - --surface-card-header-primary: var(--color-darkblue); - --surface-card-header-alternative: var(--color-darkgreen); - --surface-card-header-muted: var(--color-darkbrown); - --divider-card-segment: var(--color-white); - --text-card-header: var(--color-font-light); - --text-card-body: var(--color-font-dark); - --text-card-transparent: var(--color-font-light); - --layout-card-body-content-justify: flex-start; - --layout-card-segment-content-gap: var(--spacing-small); - - /* Semantic component tokens: Interactive elements */ - --surface-form-preview: var(--color-light-grey); - --surface-control-default: var(--color-white); - --surface-control-active: var(--color-white); - --surface-control-inactive: var(--color-white); - --surface-control-disabled: var(--color-white); - --surface-button-active: var(--color-medium-grey); - --surface-button-process: var(--color-font-hyperlink); - --surface-button-process-inactive: var(--color-process-inactive); - --surface-button-inactive: var(--color-light-grey); - --surface-tab-selected: var(--color-dark-grey); - --surface-tab-unselected: var(--color-white); - --surface-tab-compact-background: var(--surface-form-preview); - --surface-tab-compact-unselected: var(--color-medium-grey); - --surface-input-clear: var(--color-medium-grey); - --surface-toggle-track: var(--color-medium-grey); - --surface-toggle-handle: var(--color-darkblue); - --surface-menu-panel-portal: var(--color-light-grey); - --surface-help-icon: var(--color-medium-grey); - --surface-help-panel: var(--color-light-grey); - --surface-pulldown-panel: var(--color-light-grey); - --surface-activatable-remove: var(--surface-control-default); - --surface-slider-track: var(--color-medium-grey); - --surface-slider-progress: var(--color-dark-grey); - --surface-slider-thumb: var(--color-dark-grey); - --surface-checkbox-default: var(--color-white); - --surface-checkbox-on-context: var(--color-white); - --surface-radio-default: var(--color-white); - --layout-pulldown-panel-padding-inline: var(--compact-interaction-padding-horizontal); - --layout-pulldown-option-padding-inline: var(--compact-interaction-padding-horizontal); - --layout-pulldown-padding-inline: var(--compact-interaction-padding-horizontal); - --layout-pulldown-chevron-offset: var(--compact-interaction-padding-horizontal); - --layout-tab-navigation-large-padding-inline: var(--interaction-padding-horizontal); - --layout-pulldown-chevron-reserved-space: var(--spacing-large); - --layout-pulldown-panel-form-mobile-width: 90%; - --layer-pulldown-panel: var(--dimension-layer-pulldown-panel); - --layout-multiselect-pulldown-panel-desktop-width: var(--dimension-multiselect-pulldown-panel-desktop-width); - --layout-multiselect-pulldown-panel-mobile-width: var(--dimension-multiselect-pulldown-panel-mobile-width); - --layout-input-label-width: var(--dimension-input-label-width); - --layout-input-field-desktop-width: var(--dimension-input-field-desktop-width); - --layout-input-field-max-width: var(--dimension-input-field-max-width); - --layout-search-field-width: var(--dimension-search-field-width); - --layout-mode-toggle-local-height: var(--compact-interaction-height); - --layout-mode-toggle-local-width-factor: 3; - --layout-mode-toggle-width: calc(var(--interaction-height) * 3.5); - --layout-help-panel-width: calc(var(--interaction-height) * 8); - --text-control-default: var(--color-font-dark); - --text-control-disabled: var(--color-dark-grey); - --text-button-process: var(--color-font-light); - --text-tab-selected: var(--color-font-light); - --text-tab-unselected: var(--color-dark-grey); - --text-toggle-label-active: var(--color-font-light); - --text-menu-link-portal: var(--color-font-dark); - --text-help-icon: var(--color-font-dark); - --text-help-panel: var(--color-font-dark); - --text-activatable-remove: var(--text-control-default); - --text-hyperlink: var(--color-font-hyperlink); - --icon-pulldown-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M2 2l4 4 4-4' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E"); - --icon-sandwich-line-portal: var(--color-font-dark); - --icon-radio-mark: var(--color-font-dark); - - /* Semantic component tokens: Charts */ - --surface-score-bar-track: var(--color-medium-grey); - --surface-chart-area: var(--color-light-grey); - --chart-value-positive: var(--color-signal-green); - --chart-value-neutral: var(--color-signal-yellow); - --chart-value-negative: var(--color-signal-red); - --chart-value-primary: var(--color-darkblue); - --chart-value-reference: var(--color-medium-grey); - --chart-grid-line: var(--color-medium-grey); - --chart-axis-line: var(--color-font-dark); - --chart-marker-line: var(--color-font-dark); - --chart-median-line: var(--color-font-dark); - --text-chart-default: var(--color-font-dark); - --text-score-state-positive: var(--chart-value-positive); - --layout-score-bar-item-columns: max-content 1fr; - --layout-score-bar-item-gap: var(--spacing-large); - --layout-score-bar-item-single-score-columns: max-content 1fr max-content; - - /* Semantic component tokens: Data display */ - --surface-data-table: var(--color-light-grey); - --surface-data-table-header: var(--color-light-grey); - --surface-data-table-cell: var(--color-light-grey); - --surface-data-table-help-icon: var(--color-medium-grey); - - --text-data-table-default: var(--color-font-dark); - --text-data-table-warning: var(--color-signal-yellow); - --text-data-table-help-icon: var(--color-font-dark); - - /* Semantic component tokens: Typography */ - --text-typography-preview: var(--color-font-light); - --layout-preview-align-items: flex-start; - - /* Semantic pattern tokens: Portal header */ - --surface-portal-header: var(--color-darkblue); - --surface-portal-header-tab: var(--color-midblue); - --surface-portal-header-tab-active: var(--color-light-grey); - --text-portal-header-brand: var(--color-font-light); - --font-size-portal-header-brand: calc(var(--font-size-brand) * 1.1); - --text-portal-header-tab: var(--color-font-light); - --text-portal-header-tab-active: var(--color-font-dark); - --layout-page-content-inset-inline: var(--card-segment-padding-horizontal); - --surface-options-row: var(--color-light-grey); - --surface-options-row-control: var(--surface-control-default); - --surface-options-row-control-selected: var(--surface-control-active); - --surface-options-row-input-clear: var(--surface-input-clear); - --surface-options-row-toggle-track: var(--surface-toggle-track); - --surface-options-row-toggle-handle: var(--surface-toggle-handle); - --surface-options-row-help-icon: var(--surface-help-icon); - --surface-options-row-help-panel: var(--surface-help-panel); - --divider-options-row-mobile: var(--color-white); - --text-options-row-default: var(--text-control-default); - --text-options-row-placeholder: var(--text-control-disabled); - --text-options-row-help-icon: var(--color-font-light); - --text-options-row-help-panel: var(--text-help-panel); - --text-options-row-description: var(--color-font-light); - --layout-options-row-margin-top: var(--spacing-small); - --layout-options-row-main-gap: var(--spacing-large); - --layout-options-row-group-gap: var(--spacing-small); - --layout-options-row-mode-toggle-width: var(--dimension-options-row-mode-toggle-width); - --layout-options-row-help-panel-width: var(--dimension-options-row-help-panel-width); - --layout-object-card-min-width: var(--dimension-object-card-min-width); - --layout-object-card-max-width: var(--dimension-object-card-max-width); - --layout-object-card-height: var(--dimension-object-card-height); - --layout-object-card-content-grow: var(--dimension-object-card-content-grow); - --layout-object-card-mobile-width: var(--dimension-object-card-mobile-width); - --layout-object-card-mobile-height: var(--dimension-object-card-mobile-height); - --layout-object-card-desktop-breakpoint: var(--dimension-object-card-desktop-breakpoint); - --layout-object-group-card-min-width: var(--dimension-object-group-card-min-width); - --layout-object-group-card-max-width: var(--dimension-object-group-card-max-width); - --surface-object-card-lower-segment: var(--color-white); - --text-company-card-data-negative: var(--chart-value-negative); - --text-company-card-moat-neutral: var(--chart-value-neutral); - --layout-company-card-analysis-gap-after-moat: var(--spacing-large); - --surface-navigation-card: var(--color-white); - --surface-navigation-card-body: var(--color-white); - --surface-content-block-card-title: var(--color-light-grey); - --surface-content-block-card-content: var(--color-white); - --layout-content-cards-group-gap: var(--spacing-small); - --surface-card-list-drawer: var(--color-background-purple); - --text-content-block-card-title: var(--color-font-dark); - --text-content-block-card-content: var(--color-font-dark); - --text-card-list-drawer: var(--color-font-dark); - --layout-card-list-drawer-width: var(--dimension-card-list-drawer-width); - --surface-vsf-drawer-object-card-header: var(--color-darkblue); - --surface-vsf-drawer-object-card-body: var(--color-darkblue); - --text-vsf-drawer-object-card-heading: var(--color-font-light); - --text-vsf-drawer-object-card-body: var(--color-font-light); - --layout-vsf-drawer-object-card-column-gap: var(--spacing-large); - --surface-text-layout-preview: var(--color-light-grey); - --layout-text-layout-column-gap: var(--spacing-large); - --layout-text-layout-two-column-columns: repeat(2, minmax(0, 1fr)); - --layout-text-layout-three-column-columns: repeat(3, minmax(0, 1fr)); - --text-align-text-layout-column-left: left; - --text-align-text-layout-column-center: center; - --text-align-text-layout-column-right: right; - - /* Typography */ - --font-family-base: "Open Sans", sans-serif; - --font-size-base: 1rem; - --font-size-small: 0.8rem; - --font-size-brand: 1.6rem; - --font-size-h1: 1.5rem; - --font-size-h2: 1.25rem; - --font-weight-regular: 400; - --font-weight-semibold: 600; - --line-height-base: 1.5; - - /* Spacing */ - --spacing-small: 0.3rem; - --spacing-large: 1rem; - --card-segment-padding-vertical: 0.75rem; - --card-segment-padding-horizontal: 1rem; - --card-segment-padding-horizontal-mobile: 0.5rem; - --interaction-padding-vertical: 0.25rem; - --interaction-padding-horizontal: 1rem; - - /* Dimensions */ - --interaction-height: 2rem; - --compact-interaction-height: 1.5rem; - --compact-interaction-padding-vertical: 0.15rem; - --compact-interaction-padding-horizontal: 0.75rem; - --small-interaction-element-size: 1.25rem; - --disabled-opacity: 0.7; - --sandwich-line-width: 1.25rem; - --sandwich-line-height: 4px; - --sandwich-line-gap: 3px; - --score-bar-height: 1rem; - --score-marker-width: 6px; - --score-marker-height: calc(var(--score-bar-height) + 2px); - --chart-height-bar: 24rem; - --chart-height-line: 18rem; - --chart-axis-label-column-width: 4rem; - --chart-axis-label-gap: 5px; - --chart-grid-line-width: 1px; - --chart-line-width: 2px; - --chart-label-position-default: 50%; - --dimension-object-card-min-width: 395px; - --dimension-object-card-max-width: 600px; - --dimension-object-card-height: 600px; - --dimension-object-card-content-grow: 1; - --dimension-object-card-mobile-width: 100%; - --dimension-object-card-mobile-height: auto; - --dimension-object-card-desktop-breakpoint: 768px; - --dimension-object-group-card-min-width: 550px; - --dimension-object-group-card-max-width: 800px; - --dimension-input-label-width: 9rem; - --dimension-input-field-desktop-width: 400px; - --dimension-input-field-max-width: 600px; - --dimension-search-field-width: 15.3rem; - --dimension-layer-pulldown-panel: 40; - --dimension-multiselect-pulldown-panel-desktop-width: 500px; - --dimension-multiselect-pulldown-panel-mobile-width: 80vw; - --dimension-options-row-mode-toggle-width: 7rem; - --dimension-options-row-help-panel-width: 16rem; - --dimension-card-list-drawer-width: 40%; - --dimension-slider-track-height: 6px; - --dimension-slider-thumb-size: 22px; - --dimension-slider-thumb-offset-top: -8px; - --radius-slider-track: 999px; - - /* Radius */ - --radius-card: 8px; - --radius-graph-bar: 2px; - --radius-interaction: 4px; - - /* Shadows */ - --shadow-none: none; - --shadow-overlay: 0 10px 24px rgba(0, 0, 0, 0.22); - --shadow-interaction-inset: none; - - /* Borders */ - --border-none: none; - --border-control: none; - - /* Runtime defaults */ - --layout-object-card-shared-width: auto; - --sg-slider-progress: 0%; - --chart-label-position: var(--chart-label-position-default); -} - -/* ========================================================= */ -/* Base */ -/* ========================================================= */ - -body { - font-family: var(--font-family-base); - font-size: var(--font-size-base); - font-weight: var(--font-weight-regular); - line-height: var(--line-height-base); - color: var(--color-font-dark); - background: var(--color-background-purple); - margin: 0; - padding: var(--spacing-small); -} - -@media (max-width: 48rem) { - :root { - --layout-tab-navigation-large-padding-inline: 0.7rem; - } - - body { - padding: var(--spacing-small); - } -} - -section { - margin-bottom: var(--spacing-large); -} - -section + section { - margin-top: var(--spacing-large); -} - -.sg-main-heading { - margin: 0 0 var(--spacing-large) 0; - font-family: var(--font-family-base); - font-size: var(--font-size-brand); - font-weight: var(--font-weight-semibold); - line-height: var(--line-height-base); - color: var(--color-font-light); -} - -.sg-sub-heading { - margin: 0 0 var(--spacing-large) 0; - font-family: var(--font-family-base); - font-size: var(--font-size-base); - font-weight: var(--font-weight-semibold); - line-height: var(--line-height-base); -} - -.sg-text-on-dark { - color: var(--color-font-light); -} - -.sg-brand-title { - margin: 0 0 var(--spacing-large) 0; - font-family: var(--font-family-base); - font-size: var(--font-size-brand); - font-weight: var(--font-weight-regular); - line-height: var(--line-height-base); -} - -.sg-heading-h1 { - margin: 0 0 calc(var(--spacing-large) - 0.5rem) 0; - font-family: var(--font-family-base); - font-size: var(--font-size-h1); - font-weight: var(--font-weight-regular); - line-height: var(--line-height-base); -} - -.sg-heading-h2 { - margin: 0 0 var(--spacing-large) 0; - font-family: var(--font-family-base); - font-size: var(--font-size-h2); - font-weight: var(--font-weight-regular); - line-height: var(--line-height-base); -} - -.sg-preview-label { - margin: 0 0 var(--spacing-small) 0; - font-family: var(--font-family-base); - font-size: var(--font-size-small); - font-weight: var(--font-weight-semibold); - line-height: var(--line-height-base); - color: var(--color-font-light); -} - -.sg-preview-area { - display: inline-flex; - flex-wrap: wrap; - gap: var(--spacing-small); - align-items: var(--layout-preview-align-items); - padding: 0; - border-radius: 0; - background: transparent; -} - -/* ========================================================= */ -/* Typography helpers */ -/* ========================================================= */ - -.sg-body, -.sg-strong, -.sg-section-title, -.sg-bar-label, -.sg-table-label, -.sg-table-value { - font-family: var(--font-family-base); - line-height: var(--line-height-base); -} - -.sg-body, -.sg-section-title { - font-size: var(--font-size-base); - font-weight: var(--font-weight-regular); -} - -.sg-body { - margin: 0 0 var(--spacing-large) 0; -} - -.sg-strong, -.sg-bar-label { - font-size: var(--font-size-base); - font-weight: var(--font-weight-semibold); -} - -.sg-table-label { - font-size: var(--font-size-small); - font-weight: var(--font-weight-regular); -} - -.sg-table-value { - font-size: var(--font-size-small); - font-weight: var(--font-weight-semibold); -} - -.sg-index a { - color: var(--color-font-hyperlink); -} - -.sg-index .sg-sub-heading { - color: var(--color-font-light); -} - -.sg-foundation-table { - width: 100%; - margin-bottom: var(--spacing-large); - color: var(--color-font-light); - border: 1px solid var(--color-white); -} - -.sg-foundation-table th, -.sg-foundation-table td { - color: var(--color-font-light); - border: 1px solid var(--color-white); - vertical-align: top; -} - -.sg-section-h2, -.sg-section-h3 { - margin: 0 0 var(--spacing-small) 0; - color: var(--color-font-light); -} -/* ========================================================= */ -/* Components: Interactive Elements */ -/* ========================================================= */ - - - - .sg-component-row { - display: flex; - flex-wrap: wrap; - gap: var(--spacing-small); - align-items: center; - } - - .sg-component-column { - display: flex; - flex-direction: column; - gap: var(--spacing-small); - width: fit-content; - } - - /* - Form preview surface only: - All form elements in this component are intentionally shown on the form-area background. - This wrapper provides only that evaluation background and must not be implemented as part of the form control itself. - The current preview background uses light-grey according to the style foundations. - */ - .sg-form-preview-area { - display: inline-flex; - flex-direction: column; - gap: var(--spacing-small); - width: fit-content; - padding: var(--spacing-large); - border-radius: var(--radius-card); - background: var(--surface-form-preview); - } - - .sg-pulldown-demo { - position: relative; - display: inline-flex; - flex-direction: column; - gap: var(--spacing-small); - width: fit-content; - } - - - .sg-state-example { - display: grid; - grid-template-columns: calc(var(--interaction-height) * 6) auto; - gap: var(--spacing-small); - align-items: center; - } - - .sg-state-example__label { - margin: 0; - color: var(--text-control-default); - } - - .sg-activatable-control { - display: inline-flex; - align-items: center; - gap: var(--spacing-small); - } - - .sg-activatable-row { - display: inline-flex; - align-items: center; - gap: var(--spacing-small); - } - - .sg-interaction-element { - box-sizing: border-box; - height: var(--interaction-height); - padding: - var(--interaction-padding-vertical) - var(--interaction-padding-horizontal); - border: var(--border-none); - border-radius: var(--radius-interaction); - box-shadow: var(--shadow-none); - font-family: var(--font-family-base); - font-size: var(--font-size-base); - line-height: var(--line-height-base); - color: var(--text-control-default); - background: var(--surface-control-default); - } - - .sg-form-active { - background: var(--surface-control-active); - color: var(--text-control-default); - } - - .sg-form-inactive-selectable { - background: var(--surface-control-inactive); - color: var(--text-control-default); - } - - .sg-form-disabled { - background: var(--surface-control-disabled); - color: var(--text-control-disabled); - opacity: var(--disabled-opacity); - cursor: not-allowed; - } - - .sg-interaction-element:focus, - .sg-interaction-element:focus-visible { - outline: none; - } - - .sg-button { - display: inline-flex; - align-items: center; - justify-content: center; - font-weight: var(--font-weight-semibold); - cursor: pointer; - text-decoration: none; - } - - .sg-button--active { - background: var(--surface-button-active); - color: var(--text-control-default); - } - - .sg-button--process { - background: var(--surface-button-process); - color: var(--text-button-process); - } - - .sg-button--process-inactive { - background: var(--surface-button-process-inactive); - color: var(--text-button-process); - } - - .sg-button--inactive { - background: var(--surface-button-inactive); - color: var(--text-control-disabled); - } - - .sg-button:disabled, - .sg-button--disabled { - cursor: not-allowed; - color: var(--text-control-disabled); - } - - .sg-button--process-inactive:disabled { - color: var(--text-button-process); - } - - .sg-tab-button-group { - display: flex; - flex-wrap: wrap; - gap: var(--spacing-small); - align-items: center; - } - - .sg-tab-button-group[data-component-size="compact"] { - background: var(--surface-tab-compact-background); - } - - .sg-tab-button-group[data-component="tab-navigation"][data-component-size="large"] .sg-tab-button { - padding-inline: var(--layout-tab-navigation-large-padding-inline); - } - - .sg-tab-button[aria-selected="true"] { - background: var(--surface-tab-selected); - color: var(--text-tab-selected); - } - - .sg-tab-button[aria-selected="false"] { - background: var(--surface-tab-unselected); - color: var(--text-tab-unselected); - } - - .sg-tab-button-group[data-component-size="compact"] .sg-tab-button[aria-selected="false"] { - background: var(--surface-tab-compact-unselected); - color: var(--text-control-default); - } - - .sg-tab-button--compact { - height: var(--compact-interaction-height); - padding: - var(--compact-interaction-padding-vertical) - var(--compact-interaction-padding-horizontal); - font-size: var(--font-size-small); - } - - .sg-pulldown { - font-weight: var(--font-weight-regular); - appearance: none; - padding-left: var(--layout-pulldown-padding-inline); - padding-right: calc( - var(--layout-pulldown-chevron-offset) - + var(--layout-pulldown-chevron-reserved-space) - ); - background-image: var(--icon-pulldown-chevron); - background-position: right var(--layout-pulldown-chevron-offset) center; - background-size: calc(var(--interaction-height) * 0.375) calc(var(--interaction-height) * 0.25); - background-repeat: no-repeat; - } - - .sg-pulldown-demo__trigger { - text-align: left; - } - - .sg-pulldown--selected { - background-color: var(--surface-control-active); - color: var(--text-control-default); - } - - .sg-pulldown--inactive-selectable { - background-color: var(--surface-control-inactive); - color: var(--text-control-default); - } - - .sg-pulldown-demo[data-activatable="true"] .sg-pulldown-demo__trigger.sg-pulldown--inactive-selectable { - opacity: var(--disabled-opacity); - } - - .sg-pulldown--disabled { - background-color: var(--surface-control-disabled); - color: var(--text-control-disabled); - opacity: var(--disabled-opacity); - cursor: not-allowed; - } - - .sg-input-single-line { - font-weight: var(--font-weight-regular); - color: var(--text-control-default); - -webkit-appearance: none; - appearance: none; - } - - .sg-input-single-line::placeholder { - color: var(--text-control-disabled); - opacity: 1; - } - - .sg-input-single-line--inactive-selectable { - color: var(--text-control-default); - } - - .sg-input-single-line--disabled { - color: var(--text-control-disabled); - opacity: var(--disabled-opacity); - cursor: not-allowed; - } - - .sg-input-single-line-wrap { - position: relative; - display: inline-flex; - align-items: center; - } - - .sg-input-single-line-wrap .sg-input-single-line { - padding-right: calc(var(--interaction-padding-horizontal) + var(--interaction-height)); - } - - .sg-input-clear-button { - position: absolute; - top: 0; - right: 0; - display: none; - align-items: center; - justify-content: center; - width: var(--interaction-height); - height: var(--interaction-height); - padding: 0; - margin: 0; - border: var(--border-none); - border-radius: 0 var(--radius-interaction) var(--radius-interaction) 0; - box-shadow: var(--shadow-none); - -webkit-appearance: none; - appearance: none; - font-family: var(--font-family-base); - font-size: var(--font-size-base); - line-height: 1; - color: var(--text-control-default); - background: var(--surface-input-clear); - cursor: pointer; - } - - .sg-input-single-line-wrap[data-has-value="true"] .sg-input-clear-button { - display: inline-flex; - } - - .sg-search-field-row { - display: inline-flex; - align-items: center; - gap: var(--spacing-small); - white-space: nowrap; - flex-wrap: nowrap; - } - - .sg-search-field-input { - width: var(--layout-search-field-width); - } - - .sg-search-result-count { - color: var(--color-dark-grey); - font-family: var(--font-family-base); - font-size: var(--font-size-base); - line-height: var(--line-height-base); - } - - .sg-labeled-input-row { - display: flex; - align-items: center; - gap: var(--spacing-small); - width: auto; - max-width: none; - } - - .sg-labeled-input-row .sg-label { - min-width: var(--layout-input-label-width); - flex: 0 0 var(--layout-input-label-width); - } - - .sg-labeled-input-row .sg-input-single-line, - .sg-labeled-input-row .sg-input-multi-line { - width: 100%; - min-width: 0; - max-width: var(--layout-input-field-max-width); - } - - .sg-labeled-input-row:has(.sg-input-multi-line) { - align-items: flex-start; - } - - .sg-input-multi-line { - box-sizing: border-box; - min-height: calc(var(--interaction-height) * 2.75); - padding: var(--interaction-padding-vertical) var(--interaction-padding-horizontal); - border: var(--border-control); - border-radius: var(--radius-interaction); - box-shadow: var(--shadow-interaction-inset); - font-family: var(--font-family-base); - font-size: var(--font-size-base); - line-height: var(--line-height-base); - color: var(--text-control-default); - background: var(--surface-control-inactive); - resize: vertical; - } - - .sg-input-component .sg-form-preview-area { - width: 100%; - box-sizing: border-box; - } - - #component-pulldown .sg-form-preview-area { - width: 100%; - box-sizing: border-box; - } - - #component-pulldown .sg-state-example { - grid-template-columns: calc(var(--interaction-height) * 6) minmax(0, 1fr); - width: 100%; - } - - #component-pulldown .sg-state-example > :last-child { - width: 100%; - min-width: 0; - } - - #component-pulldown .sg-pulldown-demo { - width: 100%; - min-width: 0; - max-width: var(--layout-input-field-max-width); - } - - #component-pulldown .sg-labeled-input-row { - width: 100%; - max-width: none; - } - - #component-pulldown .sg-labeled-input-row .sg-pulldown, - #component-pulldown .sg-labeled-input-row .sg-pulldown-demo { - width: 100%; - min-width: 0; - max-width: var(--layout-input-field-max-width); - } - - #component-pulldown .sg-pulldown-demo__trigger, - #component-pulldown .sg-state-example > .sg-pulldown { - width: 100%; - min-width: 0; - max-width: var(--layout-input-field-max-width); - } - - #component-pulldown .sg-activatable-row { - display: grid; - grid-template-columns: var(--layout-input-label-width) minmax(0, 1fr); - align-items: center; - column-gap: var(--spacing-small); - width: 100%; - } - - #component-pulldown .sg-pulldown-activatable-header { - display: grid; - grid-template-columns: max-content max-content; - align-items: center; - column-gap: var(--spacing-small); - width: 100%; - justify-content: start; - } - - #component-pulldown .sg-pulldown-activatable-header .sg-mode-toggle { - grid-column: 1; - } - - #component-pulldown .sg-pulldown-activatable-header .sg-label { - grid-column: 2; - min-width: 0; - } - - #component-pulldown .sg-activatable-row .sg-pulldown-demo { - width: 100%; - max-width: var(--layout-input-field-max-width); - min-width: 0; - } - - .sg-input-component .sg-state-example { - grid-template-columns: calc(var(--interaction-height) * 6) minmax(0, 1fr); - } - - @media (max-width: 48rem) { - .sg-input-component .sg-form-preview-area { - width: 100%; - max-width: 100%; - box-sizing: border-box; - } - - #component-pulldown .sg-form-preview-area { - width: 100%; - max-width: 100%; - box-sizing: border-box; - } - - .sg-input-component .sg-state-example { - grid-template-columns: 1fr; - align-items: start; - width: 100%; - } - - #component-pulldown .sg-state-example { - grid-template-columns: 1fr; - align-items: start; - width: 100%; - } - - .sg-input-component .sg-state-example > :last-child { - width: 100%; - min-width: 0; - } - - #component-pulldown .sg-state-example > :last-child { - width: 100%; - min-width: 0; - } - - #component-pulldown .sg-labeled-input-row .sg-pulldown, - #component-pulldown .sg-labeled-input-row .sg-pulldown-demo { - width: 100%; - min-width: 0; - max-width: 100%; - } - - #component-pulldown .sg-activatable-row { - grid-template-columns: 1fr; - align-items: start; - row-gap: var(--spacing-small); - width: 100%; - max-width: 100%; - } - - .sg-labeled-input-row { - flex-direction: column; - align-items: flex-start; - width: 100%; - max-width: 100%; - } - - .sg-labeled-input-row .sg-label { - min-width: 0; - flex: 0 0 auto; - } - - .sg-labeled-input-row .sg-input-single-line, - .sg-labeled-input-row .sg-input-multi-line { - min-width: 0; - max-width: 100%; - width: 100%; - } - } - - .sg-mode-toggle { - display: inline-flex; - align-items: center; - gap: var(--spacing-small); - height: auto; - padding: 0; - border: var(--border-none); - border-radius: 0; - box-shadow: var(--shadow-none); - appearance: none; - -webkit-tap-highlight-color: transparent; - background: transparent; - cursor: pointer; - } - - .sg-mode-toggle:focus, - .sg-mode-toggle:focus-visible { - outline: none; - } - - .sg-mode-toggle__label { - font-family: var(--font-family-base); - font-size: var(--font-size-base); - font-weight: var(--font-weight-semibold); - line-height: var(--line-height-base); - color: var(--text-control-default); - } - - .sg-mode-toggle__switch { - position: relative; - width: var(--layout-mode-toggle-width); - height: var(--interaction-height); - border-radius: var(--radius-interaction); - background: var(--surface-toggle-track); - } - - .sg-mode-toggle__handle { - position: absolute; - top: 0; - right: 0; - width: calc(100% / 2); - height: 100%; - border-radius: var(--radius-interaction); - background: var(--surface-toggle-handle); - } - - .sg-mode-toggle[data-active="absolute"] .sg-mode-toggle__handle { - left: 0; - right: auto; - } - - .sg-mode-toggle[data-active="relative"] .sg-mode-toggle__handle { - left: auto; - right: 0; - } - - .sg-mode-toggle--local .sg-mode-toggle__label { - font-weight: var(--font-weight-regular); - } - - .sg-mode-toggle--local .sg-mode-toggle__switch { - width: calc(var(--layout-mode-toggle-local-height) * var(--layout-mode-toggle-local-width-factor)); - height: var(--layout-mode-toggle-local-height); - } - - .sg-activation-toggle-pattern { - display: flex; - align-items: center; - gap: var(--spacing-small); - } - - .sg-activation-mode-toggle { - gap: 0; - } - - .sg-activation-mode-toggle .sg-mode-toggle__switch { - display: grid; - grid-template-columns: 1fr 1fr; - align-items: center; - overflow: hidden; - } - - .sg-activation-mode-toggle .sg-mode-toggle__handle { - z-index: 1; - } - - .sg-activation-mode-toggle__switch-label { - position: relative; - z-index: 2; - text-align: center; - font-family: var(--font-family-base); - font-size: var(--font-size-small); - font-weight: var(--font-weight-regular); - line-height: var(--layout-mode-toggle-local-height); - text-transform: lowercase; - color: var(--text-control-default); - } - - .sg-activation-mode-toggle[data-active="absolute"] .sg-activation-mode-toggle__switch-label--left, - .sg-activation-mode-toggle[data-active="relative"] .sg-activation-mode-toggle__switch-label--right { - color: var(--text-toggle-label-active); - } - - .sg-slider-row { - display: flex; - flex-wrap: wrap; - align-items: center; - gap: var(--spacing-small); - width: 100%; - max-width: none; - } - - .sg-slider-row .sg-label { - min-width: var(--layout-input-label-width); - flex: 0 0 var(--layout-input-label-width); - color: var(--text-control-default); - } - - .sg-slider { - flex: 1 1 14rem; - width: 100%; - min-width: 0; - max-width: var(--layout-input-field-max-width); - height: var(--interaction-height); - margin: 0; - padding: 0; - border: 0; - -webkit-appearance: none; - appearance: none; - background: transparent; - cursor: pointer; - } - - .sg-slider::-webkit-slider-runnable-track { - height: var(--dimension-slider-track-height); - border-radius: var(--radius-slider-track); - background: - linear-gradient( - to right, - var(--surface-slider-progress) 0%, - var(--surface-slider-progress) var(--sg-slider-progress, 0%), - var(--surface-slider-track) var(--sg-slider-progress, 0%), - var(--surface-slider-track) 100% - ); - } - - .sg-slider::-webkit-slider-thumb { - width: var(--dimension-slider-thumb-size); - height: var(--dimension-slider-thumb-size); - margin-top: var(--dimension-slider-thumb-offset-top); - border: 0; - border-radius: 50%; - -webkit-appearance: none; - appearance: none; - background: var(--surface-slider-thumb); - } - - .sg-slider::-moz-range-track { - height: var(--dimension-slider-track-height); - border: 0; - border-radius: var(--radius-slider-track); - background: var(--surface-slider-track); - } - - .sg-slider::-moz-range-progress { - height: var(--dimension-slider-track-height); - border-radius: var(--radius-slider-track); - background: var(--surface-slider-progress); - } - - .sg-slider::-moz-range-thumb { - width: var(--dimension-slider-thumb-size); - height: var(--dimension-slider-thumb-size); - border: 0; - border-radius: 50%; - background: var(--surface-slider-thumb); - } - - .sg-slider-value { - flex: 0 0 auto; - min-width: calc(var(--interaction-height) * 1.25); - white-space: nowrap; - text-align: right; - color: var(--text-control-default); - } - - .sg-slider-row--inactive-selectable { - opacity: var(--disabled-opacity); - } - - #component-slider .sg-slider-row { - display: grid; - grid-template-columns: - max-content - minmax(0, 1fr) - auto; - align-items: center; - column-gap: var(--spacing-large); - width: 100%; - } - - #component-slider .sg-state-example { - grid-template-columns: calc(var(--interaction-height) * 6) minmax(0, 1fr); - width: 100%; - } - - #component-slider .sg-form-preview-area { - width: 100%; - box-sizing: border-box; - } - - #component-slider .sg-state-example > :last-child { - width: 100%; - min-width: 0; - } - - #component-slider .sg-slider-row .sg-label { - min-width: 0; - flex: 0 0 auto; - grid-column: 1; - } - - #component-slider .sg-slider-row .sg-slider { - width: 100%; - max-width: var(--layout-input-field-max-width); - min-width: 0; - grid-column: 2; - } - - #component-slider .sg-state-example > .sg-slider-row, - #component-slider .sg-activatable-row .sg-slider-row { - max-width: var(--layout-input-field-max-width); - } - - #component-slider .sg-slider-row .sg-slider-value { - min-width: 0; - grid-column: 3; - justify-self: start; - align-self: center; - display: block; - margin: 0; - line-height: 1; - } - - #component-slider .sg-activatable-row { - display: grid; - grid-template-columns: max-content minmax(0, 1fr); - align-items: center; - column-gap: var(--spacing-large); - width: 100%; - } - - #component-slider .sg-slider-activatable-header { - display: grid; - grid-template-columns: max-content max-content; - column-gap: var(--spacing-large); - align-items: center; - width: 100%; - justify-content: start; - } - - #component-slider .sg-slider-activatable-header .sg-label { - grid-column: 2; - min-width: 0; - } - - #component-slider .sg-slider-activatable-header .sg-mode-toggle { - grid-column: 1; - } - - #component-slider .sg-activatable-row .sg-slider-row { - display: grid; - grid-template-columns: minmax(0, 1fr) auto; - align-items: center; - column-gap: var(--spacing-large); - width: 100%; - } - - #component-slider .sg-activatable-row .sg-slider-row .sg-slider { - width: 100%; - max-width: var(--layout-input-field-max-width); - min-width: 0; - grid-column: 1; - } - - #component-slider .sg-activatable-row .sg-slider-row .sg-slider-value { - grid-column: 2; - justify-self: start; - min-width: 0; - align-self: center; - display: block; - margin: 0; - line-height: 1; - } - - .sg-pulldown-panel .sg-slider-row[data-activatable="true"] { - display: grid; - grid-template-columns: - var(--layout-input-label-width) - minmax(0, 1fr) - auto; - align-items: center; - column-gap: var(--spacing-small); - } - - .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-label { - min-width: 0; - flex: 0 0 auto; - grid-column: 1; - grid-row: 1; - } - - .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-slider { - min-width: 0; - max-width: 100%; - width: 100%; - grid-column: 2; - grid-row: 1; - } - - .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-slider-value { - min-width: calc(var(--interaction-height) * 1.25); - justify-self: end; - align-self: center; - white-space: nowrap; - grid-column: 3; - grid-row: 1; - } - - @media (max-width: 48rem) { - #component-slider .sg-form-preview-area { - width: 100%; - max-width: 100%; - box-sizing: border-box; - } - - #component-slider .sg-state-example { - grid-template-columns: 1fr; - align-items: start; - width: 100%; - } - - #component-slider .sg-state-example > :last-child { - width: 100%; - min-width: 0; - } - - #component-slider .sg-activatable-row { - grid-template-columns: 1fr; - align-items: start; - row-gap: var(--spacing-small); - } - - #component-slider .sg-slider-activatable-header .sg-label { - grid-column: 2; - grid-row: 1; - } - - #component-slider .sg-slider-activatable-header .sg-mode-toggle { - grid-column: 1; - grid-row: 1; - } - - #component-slider .sg-activatable-row .sg-slider-row { - grid-template-columns: minmax(0, 1fr) auto; - column-gap: var(--spacing-large); - align-items: center; - width: 100%; - } - - #component-slider .sg-activatable-row .sg-slider-row .sg-slider { - width: 100%; - } - - #component-slider .sg-activatable-row .sg-slider-row .sg-slider-value { - justify-self: start; - align-self: center; - margin: 0; - line-height: 1; - } - - } - - .sg-sandwich-button { - display: inline-flex; - align-items: center; - justify-content: center; - width: calc(var(--interaction-height) + var(--spacing-small)); - height: calc(var(--interaction-height) + var(--spacing-small)); - padding: 0; - cursor: pointer; - } - - .sg-sandwich-button--small { - width: calc(var(--interaction-height) * 0.9); - height: calc(var(--interaction-height) * 0.9); - } - - .sg-sandwich-button__icon { - width: var(--sandwich-line-width); - height: auto; - display: flex; - flex-direction: column; - gap: var(--sandwich-line-gap); - justify-content: center; - } - - .sg-sandwich-button__line { - display: block; - width: 100%; - height: var(--sandwich-line-height); - border-radius: var(--radius-interaction); - } - - .sg-sandwich-menu-wrap[data-component-size="default"] .sg-sandwich-button__line { - background: var(--icon-sandwich-line-portal); - } - - .sg-sandwich-menu-wrap[data-component-size="small"] .sg-sandwich-button__line { - height: calc(var(--sandwich-line-height) - 1px); - background: var(--icon-sandwich-line-portal); - } - - .sg-sandwich-menu-wrap[data-component-size="small"] .sg-sandwich-button__icon { - width: calc(var(--sandwich-line-width) - 3px); - } - - .sg-sandwich-menu-wrap { - position: relative; - display: inline-flex; - } - - .sg-sandwich-menu-panel { - position: absolute; - top: calc(100% + var(--spacing-small)); - right: 0; - display: none; - flex-direction: column; - gap: var(--spacing-small); - width: max-content; - padding: var(--spacing-large); - border: var(--border-none); - border-radius: var(--radius-card); - box-shadow: var(--shadow-overlay); - z-index: 1; - } - - .sg-sandwich-menu-wrap[data-component-size="default"] .sg-sandwich-menu-panel { - background: var(--surface-menu-panel-portal); - } - - .sg-sandwich-menu-wrap[data-component-size="small"] .sg-sandwich-menu-panel { - background: var(--surface-menu-panel-portal); - } - - .sg-sandwich-menu-wrap[data-open="true"] .sg-sandwich-menu-panel { - display: flex; - } - - .sg-sandwich-menu-link { - margin: 0; - text-decoration: none; - white-space: nowrap; - font-family: var(--font-family-base); - font-size: var(--font-size-base); - font-weight: var(--font-weight-regular); - line-height: var(--line-height-base); - } - - .sg-sandwich-menu-wrap[data-component-size="default"] .sg-sandwich-menu-link { - color: var(--text-menu-link-portal); - } - - .sg-sandwich-menu-wrap[data-component-size="small"] .sg-sandwich-menu-link { - color: var(--text-menu-link-portal); - } - - .sg-sandwich-menu-wrap[data-align="left"] .sg-sandwich-menu-panel { - right: auto; - left: 0; - } - - .sg-sandwich-menu-wrap[data-align="right"] .sg-sandwich-menu-panel { - right: 0; - left: auto; - } - - .sg-help-icon-wrap { - position: relative; - display: inline-flex; - vertical-align: middle; - } - - .sg-help-icon { - display: inline-flex; - align-items: center; - justify-content: center; - width: var(--small-interaction-element-size); - height: var(--small-interaction-element-size); - padding: 0; - border: var(--border-none); - border-radius: 50%; - box-shadow: var(--shadow-none); - font-family: var(--font-family-base); - font-size: var(--font-size-small); - font-weight: var(--font-weight-semibold); - line-height: 1; - color: var(--text-help-icon); - background: var(--surface-help-icon); - cursor: pointer; - } - - .sg-help-icon-panel { - position: absolute; - top: calc(100% + var(--spacing-small)); - left: 0; - z-index: var(--layer-pulldown-panel); - display: none; - width: var(--layout-help-panel-width); - padding: var(--spacing-large); - border-radius: var(--radius-card); - color: var(--text-help-panel); - background: var(--surface-help-panel); - box-shadow: var(--shadow-overlay); - } - - .sg-help-icon-wrap[data-open="true"] .sg-help-icon-panel { - display: block; - } - - .sg-help-icon-wrap[data-open="true"] { - z-index: var(--layer-pulldown-panel); - } - - .sg-help-icon-wrap[data-align="left"] .sg-help-icon-panel { - left: 0; - right: auto; - } - - .sg-help-icon-wrap[data-align="right"] .sg-help-icon-panel { - left: auto; - right: 0; - } - - .sg-pulldown-panel { - position: absolute; - top: calc(100% + var(--spacing-small)); - left: 0; - z-index: var(--layer-pulldown-panel); - display: none; - flex-direction: column; - gap: var(--spacing-small); - min-width: 100%; - width: max-content; - max-width: calc(100vw - (2 * var(--spacing-large))); - box-sizing: border-box; - padding-block: var(--spacing-large); - padding-inline: var(--layout-pulldown-panel-padding-inline); - border-radius: var(--radius-card); - background: var(--surface-pulldown-panel); - box-shadow: var(--shadow-overlay); - } - - .sg-pulldown-demo[data-open="true"] .sg-pulldown-panel { - display: inline-flex; - } - - .sg-pulldown-demo[data-align="left"] .sg-pulldown-panel { - left: 0; - right: auto; - } - - .sg-pulldown-demo[data-align="right"] .sg-pulldown-panel { - left: auto; - right: 0; - } - - .sg-pulldown-panel__row { - display: grid; - grid-template-columns: calc(var(--interaction-height) * 5) calc(var(--interaction-height) * 7) var(--interaction-height); - gap: var(--spacing-small); - align-items: center; - } - - .sg-pulldown-panel__label { - margin: 0; - color: var(--text-control-default); - } - -.sg-pulldown-panel__remove { - display: inline-flex; - align-items: center; - justify-content: center; - width: var(--interaction-height); - height: var(--interaction-height); - padding: 0; - border: var(--border-none); - border-radius: var(--radius-interaction); - background: var(--surface-activatable-remove); - color: var(--text-activatable-remove); - font-family: var(--font-family-base); - font-size: var(--font-size-base); - line-height: 1; - -webkit-appearance: none; - appearance: none; - cursor: pointer; -} - - .sg-pulldown-panel__remove[hidden] { - display: none; - } - - .sg-pulldown-panel__row--disabled { - color: var(--text-control-disabled); - opacity: var(--disabled-opacity); - cursor: not-allowed; - } - - .sg-pulldown-panel__row--disabled .sg-pulldown, - .sg-pulldown-panel__row--disabled .sg-pulldown-panel__label { - color: var(--text-control-disabled); - } - - .sg-pulldown-option-list { - display: flex; - flex-direction: column; - gap: var(--spacing-small); - margin: 0; - padding: 0; - list-style: none; - } - - .sg-pulldown-option { - display: flex; - gap: var(--spacing-small); - align-items: center; - padding-block: var(--interaction-padding-vertical); - padding-inline: var(--layout-pulldown-option-padding-inline); - border-radius: var(--radius-interaction); - white-space: nowrap; - color: var(--text-control-default); - cursor: pointer; - } - - .sg-pulldown-option--selected { - background: var(--surface-control-active); - } - - .sg-pulldown-option--disabled { - color: var(--text-control-disabled); - } - - .sg-pulldown-option__checkbox { - width: var(--font-size-base); - height: var(--font-size-base); - margin: 0; - } - - .sg-checkbox-field { - display: inline-flex; - align-items: center; - justify-content: center; - width: var(--small-interaction-element-size); - height: var(--small-interaction-element-size); - padding: 0; - border: var(--border-none); - border-radius: var(--radius-interaction); - box-shadow: var(--shadow-none); - color: var(--text-control-default); - background: var(--surface-checkbox-default); - cursor: pointer; - } - - .sg-checkbox-field--on-grey, - .sg-checkbox-field--on-color { - background: var(--surface-checkbox-on-context); - } - - .sg-checkbox-field__mark { - display: none; - font-family: var(--font-family-base); - font-size: var(--font-size-base); - font-weight: var(--font-weight-semibold); - line-height: 1; - } - - .sg-checkbox-field[aria-checked="true"] .sg-checkbox-field__mark { - display: inline; - } - - .sg-checkbox-field.sg-form-active { - background: var(--surface-control-active); - color: var(--text-control-default); - } - - .sg-checkbox-field--inactive-selectable { - color: var(--text-control-default); - background: var(--surface-control-inactive); - opacity: var(--disabled-opacity); - } - - .sg-checkbox-field--disabled { - color: var(--text-control-disabled); - background: var(--surface-control-disabled); - opacity: var(--disabled-opacity); - cursor: not-allowed; - } - - .sg-checkbox-field-list { - display: flex; - flex-direction: column; - gap: var(--spacing-small); - } - - .sg-checkbox-field-option { - display: inline-flex; - align-items: center; - gap: var(--spacing-small); - color: var(--text-control-default); - flex-wrap: wrap; - } - - .sg-pulldown-panel__checkbox-list .sg-checkbox-field-option.sg-body { - margin-bottom: 0; - } - - #component-checkbox-field .sg-checkbox-field-option .sg-state-example__label, - #component-radio-field .sg-checkbox-field-option .sg-state-example__label { - flex: 0 0 100%; - margin-bottom: var(--spacing-small); - } - - .sg-checkbox-field-option--inactive-selectable { - color: var(--text-control-default); - } - - #component-checkbox-field .sg-checkbox-field-option[data-activatable="true"], - #component-radio-field .sg-checkbox-field-option[data-activatable="true"] { - gap: var(--spacing-large); - } - - .sg-radio-activatable-group__choices { - display: inline-flex; - align-items: center; - gap: var(--spacing-small); - } - - .sg-radio-activatable-group__choice { - display: inline-flex; - align-items: center; - gap: var(--spacing-small); - } - - .sg-radio-activatable-group__choice > span { - color: var(--text-control-default); - opacity: 1; - } - - #component-radio-activatable[data-component-state="inactive-selectable"] .sg-radio-activatable-group__choice > span { - opacity: var(--disabled-opacity); - } - - #component-radio-activatable[data-component-state="active"] .sg-radio-activatable-group__choice > span { - opacity: 1; - } - - #component-radio-field .sg-checkbox-field-option { - display: grid; - grid-template-columns: calc(var(--interaction-height) * 6) minmax(0, 1fr); - align-items: center; - column-gap: var(--spacing-small); - width: 100%; - } - - #component-radio-field .sg-checkbox-field-option .sg-state-example__label { - grid-column: 1; - margin-bottom: 0; - } - - #component-radio-field .sg-radio-field-row { - grid-column: 2; - display: inline-flex; - align-items: center; - gap: var(--spacing-small); - min-width: 0; - flex-wrap: nowrap; - } - - #component-radio-field .sg-radio-field-row > .sg-radio-activatable-group__choices { - margin-left: var(--spacing-large); - } - - @media (max-width: 48rem) { - #component-radio-field .sg-checkbox-field-option { - grid-template-columns: 1fr; - align-items: start; - } - - #component-radio-field .sg-checkbox-field-option .sg-state-example__label, - #component-radio-field .sg-radio-field-row { - grid-column: 1; - } - - #component-radio-field .sg-radio-field-row { - flex-wrap: wrap; - } - - #component-radio-field .sg-radio-field-row > .sg-radio-activatable-group__choices { - flex: 0 0 100%; - margin-left: 0; - } - } - - .sg-checkbox-field-option--disabled { - color: var(--text-control-disabled); - opacity: var(--disabled-opacity); - cursor: not-allowed; - } - - .sg-radio-field { - display: inline-flex; - align-items: center; - justify-content: center; - width: var(--small-interaction-element-size); - height: var(--small-interaction-element-size); - padding: 0; - border: var(--border-none); - border-radius: 50%; - box-shadow: var(--shadow-none); - color: var(--text-control-default); - background: var(--surface-radio-default); - cursor: pointer; - } - - .sg-radio-field__mark { - display: none; - width: calc(var(--small-interaction-element-size) * 0.44); - height: calc(var(--small-interaction-element-size) * 0.44); - border-radius: 50%; - background: var(--icon-radio-mark); - } - - .sg-radio-field[aria-checked="true"] .sg-radio-field__mark { - display: block; - } - - .sg-radio-field--inactive-selectable { - color: var(--text-control-default); - background: var(--surface-radio-default); - opacity: var(--disabled-opacity); - } - - .sg-radio-field--disabled { - color: var(--text-control-disabled); - background: var(--surface-control-disabled); - opacity: var(--disabled-opacity); - cursor: not-allowed; - } - - .sg-hyperlink { - color: var(--text-hyperlink); - text-decoration: none; - } - -/* ========================================================= */ -/* Patterns: Portal Header */ -/* ========================================================= */ - -.sg-portal-header { - --surface-tab-selected: var(--surface-portal-header-tab-active); - --surface-tab-unselected: var(--surface-portal-header-tab); - --text-tab-selected: var(--text-portal-header-tab-active); - --text-tab-unselected: var(--text-portal-header-tab); - display: flex; - align-items: center; - justify-content: space-between; - gap: var(--spacing-large); - padding: - var(--card-segment-padding-vertical) - var(--layout-page-content-inset-inline); - border: var(--border-none); - border-radius: var(--radius-card); - box-shadow: var(--shadow-none); - background: var(--surface-portal-header); -} - -.sg-portal-header__main { - display: grid; - flex: 1 1 auto; - grid-template-columns: minmax(0, 1fr) auto; - grid-template-areas: - "brand menu" - "tabs tabs"; - gap: var(--spacing-large); - min-width: 0; -} - -.sg-portal-header__brand { - grid-area: brand; - margin: 0; - padding-left: 0; - font-size: var(--font-size-portal-header-brand); - color: var(--text-portal-header-brand); -} - -.sg-portal-header__tabs { - grid-area: tabs; - width: 100%; -} - -.sg-portal-header__menu-wrap { - grid-area: menu; - justify-self: end; -} - -.sg-portal-header-pattern-variant { - margin-bottom: var(--spacing-large); -} - -.sg-portal-header-pattern-variant__label { - margin: 0 0 var(--spacing-small) 0; -} - -.sg-portal-header-pattern-variant__next-element { - margin-top: var(--spacing-large); -} - -@media (max-width: calc(var(--layout-object-card-desktop-breakpoint) - 1px)) { - .sg-portal-header__main { - gap: var(--spacing-small) var(--spacing-large); - } -} - -/* ========================================================= */ -/* Patterns: Options Row */ -/* ========================================================= */ - -.sg-options-row { - --surface-control-default: var(--surface-options-row-control); - --surface-control-active: var(--surface-options-row-control-selected); - --surface-input-clear: var(--surface-options-row-input-clear); - --surface-toggle-track: var(--surface-options-row-toggle-track); - --surface-toggle-handle: var(--surface-options-row-toggle-handle); - --surface-help-icon: var(--surface-options-row-help-icon); - --surface-help-panel: var(--surface-options-row-help-panel); - --text-control-default: var(--text-options-row-default); - --text-control-disabled: var(--text-options-row-placeholder); - --text-help-icon: var(--text-options-row-help-icon); - --text-help-panel: var(--text-options-row-help-panel); - --layout-mode-toggle-width: var(--layout-options-row-mode-toggle-width); - --layout-help-panel-width: var(--layout-options-row-help-panel-width); - margin-top: var(--layout-options-row-margin-top); - display: flex; - justify-content: space-between; - gap: var(--layout-options-row-main-gap); - padding: - var(--card-segment-padding-vertical) - var(--layout-page-content-inset-inline); - border: var(--border-none); - border-radius: var(--radius-card); - box-shadow: var(--shadow-none); - background: var(--surface-options-row); -} - -.sg-options-row__left, -.sg-options-row__right { - display: flex; - flex-wrap: wrap; - gap: var(--layout-options-row-group-gap); - align-items: center; -} - -.sg-options-row__left { - justify-content: flex-start; -} - -.sg-options-row__right { - justify-content: flex-end; - flex-wrap: nowrap; - margin-left: auto; -} - -@media (max-width: 48rem) { - .sg-options-row { - flex-direction: column; - gap: 0; - padding: 0; - } - - .sg-options-row__right, - .sg-options-row__left { - padding: - var(--card-segment-padding-vertical) - var(--card-segment-padding-horizontal); - } - - .sg-options-row__right { - order: 1; - justify-content: flex-end; - flex-wrap: nowrap; - margin-left: 0; - } - - .sg-options-row__left { - order: 2; - box-shadow: inset 0 1px 0 var(--divider-options-row-mobile); - } - - .sg-options-row__left > .sg-pulldown-demo, - .sg-options-row__left > .sg-input-single-line-wrap, - .sg-options-row__left > .sg-search-field-row { - flex: 1 1 calc(50% - var(--layout-options-row-group-gap)); - min-width: 0; - } - -.sg-options-row__left > .sg-input-single-line-wrap, -.sg-options-row__left > .sg-search-field-row { - flex-basis: 100%; - } - - .sg-options-row .sg-search-field-input { - display: inline-flex; - align-items: stretch; - } - - .sg-options-row .sg-search-field-input .sg-input-single-line { - padding-right: var(--interaction-padding-horizontal); - } - - .sg-options-row .sg-search-field-input[data-has-value="true"] .sg-input-single-line { - border-radius: var(--radius-interaction) 0 0 var(--radius-interaction); - } - - .sg-options-row .sg-search-field-input .sg-input-clear-button { - position: static; - flex: 0 0 var(--interaction-height); - height: auto; - border-radius: 0 var(--radius-interaction) var(--radius-interaction) 0; - } - - .sg-options-row__left > .sg-input-single-line-wrap .sg-input-single-line, - .sg-options-row__left > .sg-pulldown-demo .sg-pulldown { - width: 100%; - } - - .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-panel { - width: min( - var(--layout-pulldown-panel-form-mobile-width), - calc(100vw - (2 * var(--spacing-large))) - ); - min-width: 0; - max-width: calc(100vw - (2 * var(--spacing-large))); - } - - .sg-options-row .sg-pulldown-panel .sg-form-sections-card-wrapper, - .sg-options-row .sg-pulldown-panel .sg-form-sections-card { - min-width: 0; - width: 100%; - max-width: 100%; - } - - .sg-pulldown-panel .sg-slider-row[data-activatable="true"] { - display: flex; - flex-wrap: wrap; - align-items: center; - column-gap: var(--spacing-large); - row-gap: var(--spacing-small); - } - - .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-label { - min-width: 100%; - flex: 0 0 100%; - } - - .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-slider { - min-width: 0; - max-width: 100%; - width: 100%; - flex: 1 1 0; - } - - .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-slider-value { - min-width: calc(var(--interaction-height) * 1.25); - align-self: center; - white-space: nowrap; - flex: 0 0 auto; - } - - .sg-pulldown-panel__row { - grid-template-columns: minmax(0, 1fr) var(--interaction-height); - } - - .sg-pulldown-panel__label { - grid-column: 1 / -1; - } -} - -/* ========================================================= */ -/* 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; -} - -/* ========================================================= */ -/* Patterns: Object Group Card */ -/* ========================================================= */ - -.sg-object-group-card__actions { - margin-top: auto; -} - -.sg-object-card[data-pattern="object-group-card"] { - flex: 1 1 var(--layout-object-group-card-min-width); - min-width: var(--layout-object-group-card-min-width); - max-width: var(--layout-object-group-card-max-width); -} - -.sg-object-group-card__hint { - color: var(--color-font-light); -} - -.sg-company-card__metric-negative { - color: var(--text-company-card-data-negative); -} - -.sg-company-card__analysis-title { - margin: 0; -} - -.sg-company-card__analysis-bars { - margin-top: 0; -} - -.sg-company-card__moat { - margin: 0; -} - -.sg-company-card__moat-neutral { - color: var(--text-company-card-moat-neutral); -} - -.sg-company-card__summary { - margin: 0; -} - -/* ========================================================= */ -/* Patterns: Navigation Card */ -/* ========================================================= */ - -/* ========================================================= */ -/* Patterns: Formular mit Abschnitten */ -/* ========================================================= */ - -.sg-form-sections-card { - display: flex; - flex-direction: column; - width: clamp( - var(--layout-object-card-max-width), - 65vw, - calc(var(--layout-object-card-max-width) * 1.3) - ); - max-width: 100%; -} - -.sg-form-sections-card-wrapper { - display: flex; - justify-content: center; - width: 100%; - height: auto; -} - -.sg-form-sections-card__body { - background: var(--surface-form-preview); - padding: var(--card-segment-padding-vertical) var(--card-segment-padding-horizontal); -} - -.sg-form-sections-card__title { - margin: 0 0 var(--spacing-large) 0; -} - -.sg-form-sections-card__actions-segment { - background: var(--surface-form-preview); - padding: 0 var(--card-segment-padding-horizontal) var(--card-segment-padding-vertical); -} - -.sg-form-sections-card__chapter + .sg-form-sections-card__chapter { - margin-top: var(--spacing-large); -} - -.sg-form-sections-card__chapter-title, -.sg-form-sections-card__sentence { - margin: 0; -} - -.sg-form-sections-card__sentence { - margin-top: var(--spacing-small); -} - -.sg-form-sections-card__option-group, -.sg-form-sections-card__field-group { - display: flex; - flex-direction: column; - gap: var(--spacing-small); - margin-top: var(--spacing-large); -} - -.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-form-sections-card__chapter > :not(.sg-form-sections-card__chapter-title) + :not(.sg-form-sections-card__chapter-title) { - margin-top: var(--spacing-large); -} - -.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-form-sections-card__chapter > .sg-form-sections-card__chapter-title + * { - margin-top: var(--spacing-large); -} - -.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-form-sections-card__chapter > .sg-slider-row + .sg-slider-row, -.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-form-sections-card__chapter > .sg-checkbox-field-option + .sg-checkbox-field-option, -.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-form-sections-card__chapter > .sg-radio-activatable-group + .sg-radio-activatable-group { - margin-top: var(--spacing-small); -} - -.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-form-sections-card__chapter > .sg-pulldown-panel__row + .sg-pulldown-panel__row { - margin-top: var(--spacing-large); -} - -.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] { - display: grid; - grid-template-columns: max-content max-content minmax(0, 1fr) auto; - align-items: center; - column-gap: var(--spacing-large); -} - -.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] .sg-mode-toggle { - grid-column: 1; -} - -.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] .sg-label { - grid-column: 2; - min-width: 0; -} - -.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] .sg-slider { - grid-column: 3; - min-width: 0; - width: 100%; - max-width: none; -} - -.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] .sg-slider-value { - grid-column: 4; - margin: 0; - min-width: 0; - line-height: 1; -} - -.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group { - display: grid; - grid-template-columns: max-content max-content minmax(0, 1fr); - align-items: center; - column-gap: var(--spacing-large); -} - -.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group > .sg-label { - grid-column: 2; - margin: 0; -} - -.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group > .sg-mode-toggle { - grid-column: 1; -} - -.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group > .sg-radio-activatable-group__choices { - grid-column: 3; -} - -.sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] { - grid-template-columns: max-content max-content minmax(0, 1fr); - column-gap: var(--spacing-large); -} - -.sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] > .sg-mode-toggle { - grid-column: 1; -} - -.sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] > .sg-pulldown-panel__label { - grid-column: 2; -} - -.sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] > .sg-pulldown { - grid-column: 3; -} - -.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-demo .sg-pulldown-panel { - min-width: 100%; - width: max-content; - max-width: calc(100vw - (2 * var(--spacing-large))); -} - -@media (max-width: 48rem) { - .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-panel { - min-width: 100%; - width: max-content; - max-width: calc(100vw - (2 * var(--spacing-large))); - } - - .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] { - grid-template-columns: max-content minmax(0, 1fr) auto; - row-gap: var(--spacing-small); - } - - .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] .sg-mode-toggle { - grid-column: 1; - grid-row: 1; - } - - .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] .sg-label { - grid-column: 2; - grid-row: 1; - } - - .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] .sg-slider { - grid-column: 1 / 3; - grid-row: 2; - } - - .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] .sg-slider-value { - grid-column: 3; - grid-row: 2; - } - - .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group { - grid-template-columns: max-content minmax(0, 1fr); - row-gap: var(--spacing-small); - } - - .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group > .sg-label { - grid-column: 2; - grid-row: 1; - } - - .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group > .sg-mode-toggle { - grid-column: 1; - grid-row: 1; - } - - .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group > .sg-radio-activatable-group__choices { - grid-column: 1 / -1; - grid-row: 2; - } - - .sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] { - grid-template-columns: max-content minmax(0, 1fr); - row-gap: var(--spacing-small); - } - - .sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] > .sg-mode-toggle { - grid-column: 1; - grid-row: 1; - } - - .sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] > .sg-pulldown-panel__label { - grid-column: 2; - grid-row: 1; - } - - .sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] > .sg-pulldown { - grid-column: 1 / -1; - grid-row: 2; - } -} - -.sg-form-sections-card__actions { - display: grid; - grid-template-columns: repeat(2, minmax(0, 1fr)); - gap: var(--spacing-small); - width: 100%; - margin-top: 0; -} - -.sg-form-sections-card__action { - width: 100%; -} - -.sg-navigation-card-layout { - width: 100%; - margin-top: var(--spacing-large); -} - -.sg-navigation-card-block { - --surface-card: var(--surface-navigation-card); - --surface-card-body: var(--surface-navigation-card-body); - display: block; - flex: none; - min-width: 0; - max-width: none; - width: 100%; -} - -.sg-navigation-card-center { - display: flex; - align-items: center; - justify-content: center; - text-align: center; -} - -.sg-content-cards-group { - display: flex; - flex-direction: column; - gap: var(--layout-content-cards-group-gap); -} - -/* ========================================================= */ -/* Layouts: Card Listen Seite */ -/* ========================================================= */ - -.sg-card-list-page { - display: flex; - flex-direction: column; -} - -.sg-card-list-page-drawer { - position: fixed; - top: 0; - right: 0; - bottom: 0; - width: var(--layout-card-list-drawer-width); - max-width: 100%; - display: flex; - flex-direction: column; - transform: translateX(100%); - transition: transform 220ms ease; - background: var(--surface-card-list-drawer); - color: var(--text-card-list-drawer); - box-shadow: var(--shadow-overlay); - z-index: 1000; - overflow-y: auto; -} - -.sg-card-list-page-drawer[data-open="true"] { - transform: translateX(0); -} - -.sg-card-list-page-drawer__header { - display: flex; - align-items: center; - justify-content: space-between; - gap: var(--spacing-small); - padding: - var(--card-segment-padding-vertical) - var(--layout-page-content-inset-inline); -} - -.sg-card-list-page-drawer__title { - margin: 0; - color: inherit; -} - -.sg-card-list-page-drawer__content { - display: flex; - flex-direction: column; - gap: var(--spacing-large); - padding: - var(--card-segment-padding-vertical) - var(--layout-page-content-inset-inline) - var(--card-segment-padding-vertical) - var(--layout-page-content-inset-inline); -} - -.sg-card-list-page > * + * { - margin-top: var(--spacing-large); -} - -.sg-card-list-page > .sg-options-row { - margin-top: var(--spacing-large); -} - -.sg-card-list-page > .sg-card-list-page__intro-block { - margin-top: calc(var(--spacing-large) - 0.5rem); -} - -.sg-card-list-page__intro-block { - display: flex; - flex-direction: column; - gap: var(--spacing-large); -} - -.sg-card-list-page__title-row { - display: inline-flex; - align-items: center; - gap: var(--spacing-small); - width: fit-content; - max-width: 100%; -} - -.sg-card-list-page__intro-block .sg-text-layout-pattern__sample--sixty-width { - width: min(60vw, 100%); -} - -@media (max-width: 767px) { - .sg-card-list-page-drawer { - display: none; - } - - .sg-card-list-page__intro-block .sg-text-layout-pattern__sample--sixty-width { - width: 100%; - } -} - -.sg-card-list-page__object-grid, -.sg-card-list-page__navigation { - width: 100%; -} - -.sg-vsf-drawer-card { - --surface-card-header-primary: var(--surface-vsf-drawer-object-card-header); - --surface-card: var(--surface-vsf-drawer-object-card-body); - --surface-card-body: var(--surface-vsf-drawer-object-card-body); - --text-card-header: var(--text-vsf-drawer-object-card-heading); - --text-card-body: var(--text-vsf-drawer-object-card-body); - width: 100%; - min-width: 0; - max-width: none; - align-self: stretch; - height: auto; -} - -.sg-vsf-drawer-card__content { - color: var(--text-vsf-drawer-object-card-body); -} - -.sg-vsf-drawer-card .sg-text-layout-pattern__two-column, -.sg-vsf-drawer-card .sg-text-layout-pattern__column { - color: var(--text-vsf-drawer-object-card-body); -} - -.sg-vsf-drawer-card .sg-text-layout-pattern__two-column { - gap: var(--layout-vsf-drawer-object-card-column-gap); -} - -.sg-vsf-drawer-card__actions-segment { - display: flex; - flex-direction: column; - align-items: flex-start; - justify-content: flex-start; - gap: var(--spacing-large); - background: var(--surface-vsf-drawer-object-card-body); -} - -.sg-vsf-drawer-card__actions-segment .sg-interaction-element.sg-button { - height: auto; - width: 100%; -} - -#vsf-business-model-toggle.sg-interaction-element.sg-button { - background: var(--surface-portal-header-tab); - color: var(--text-portal-header-tab); -} - -.sg-inline-controls-card { - --surface-card-body: var(--surface-card-segment-neutral); -} - -.sg-card-segment.sg-inline-header-row { - flex-direction: row; - align-items: center; - justify-content: space-between; - gap: var(--spacing-small); -} - -.sg-card-segment.sg-inline-controls-row { - flex-direction: row; - align-items: center; - justify-content: flex-end; - gap: var(--spacing-small); - flex-wrap: nowrap; -} - -.sg-vsf-drawer-object-card__heading { - color: var(--text-vsf-drawer-object-card-heading); - margin: 0; -} - -.sg-analysis-intro-block { - display: flex; - flex-direction: column; - gap: var(--spacing-small); -} - -.sg-analysis-intro-block .sg-heading-h2 { - margin: 0; -} - -.sg-analysis-intro-block .sg-text-layout-pattern__sample { - margin: 0; - color: var(--text-vsf-drawer-object-card-body); -} - -/* ========================================================= */ -/* Patterns: Text Layouts */ -/* ========================================================= */ - -.sg-text-layout-pattern { - display: flex; - flex-direction: column; - gap: var(--spacing-small); -} - -.sg-text-layout-pattern__preview-surface { - width: 100%; - 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%; - 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%; - 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; -} - -.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__three-column-distributed[data-pattern-part="company-card-metrics-three-column"] { - grid-template-columns: var(--layout-text-layout-three-column-columns); - } -} - -/* ========================================================= */ -/* Patterns: Card Gruppe mit Tastennavigation */ -/* ========================================================= */ - -.sg-content-block-card-group { - display: flex; - flex-direction: column; - gap: var(--spacing-small); - width: 100%; - --surface-tab-unselected: var(--color-white); -} - -.sg-content-block-card-group__tabs, -.sg-content-block-card-group__panels, -.sg-content-block-card-group__panel, -.sg-content-block-card-group__card { - width: 100%; -} - -.sg-content-block-card-group__panel[hidden] { - display: none; -} - -.sg-content-block-card-group__title { - color: var(--text-content-block-card-title); - background: var(--surface-content-block-card-title); -} - -.sg-content-block-card-group__content { - color: var(--text-content-block-card-content); - background: var(--surface-content-block-card-content); -} - -.sg-content-block-card-group__content .sg-body { - margin: 0; -} - -@media (max-width: 767px) { - .sg-content-block-card-group__tabs[role="tablist"] > [role="tab"] { - flex: 1 1 0; - min-width: max-content; - } -} - -/* ========================================================= */ -/* 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); -} - -/* ========================================================= */ -/* Components: Charts */ -/* ========================================================= */ - -.sg-score-bar-list { - display: grid; - grid-template-columns: var(--layout-score-bar-item-columns); - column-gap: var(--layout-score-bar-item-gap); - row-gap: var(--spacing-small); - align-items: center; - width: 100%; -} - -.sg-score-bar-item { - display: contents; -} - -.sg-score-bar-list--single-score { - --layout-score-bar-item-columns: var(--layout-score-bar-item-single-score-columns); -} - -.sg-score-state--positive { - margin: 0; - justify-self: end; - text-align: right; - color: var(--text-score-state-positive); -} - -.sg-score-bar-label { - margin: 0; - color: var(--text-chart-default); -} - -.sg-score-bar { - position: relative; - height: var(--score-bar-height); - overflow: visible; - border-radius: var(--radius-graph-bar); - background: var(--surface-score-bar-track); -} - -.sg-score-bar--marker-mid { - --score-marker-position: 50%; -} - -.sg-score-bar__value { - height: 100%; - border-radius: var(--radius-graph-bar); -} - -.sg-score-bar__value--w96 { width: 96%; } -.sg-score-bar__value--w64 { width: 64%; } -.sg-score-bar__value--w35 { width: 35%; } - -.sg-score-bar__value--positive { background: var(--chart-value-positive); } -.sg-score-bar__value--neutral { background: var(--chart-value-neutral); } -.sg-score-bar__value--negative { background: var(--chart-value-negative); } - -.sg-score-bar__median-marker { - position: absolute; - top: 50%; - left: var(--score-marker-position); - width: var(--score-marker-width); - height: var(--score-marker-height); - border-radius: 0; - background: var(--chart-marker-line); - transform: translate(-50%, -50%); -} - -.sg-score-bar__median-marker--outline { - border: var(--chart-grid-line-width) solid var(--chart-marker-line); - background: transparent; -} - -.sg-chart-preview-area { - min-width: var(--layout-object-card-min-width); - max-width: var(--layout-object-card-max-width); - width: 100%; -} - -.sg-bar-chart { - display: block; - width: 100%; - box-sizing: border-box; - padding: 0; - background: var(--surface-chart-area); - color: var(--text-chart-default); -} - -.sg-chart-frame { - display: grid; - grid-template-columns: min-content 1fr; - column-gap: var(--chart-axis-label-gap); - height: calc(var(--chart-height-bar) * 0.7); -} - -.sg-chart-y-labels { - position: relative; - width: min-content; - margin: 0; - padding: 0; - list-style: none; - color: var(--text-chart-default); - text-align: right; - pointer-events: none; -} - -.sg-chart-y-labels li { - position: absolute; - white-space: nowrap; - right: 0; - top: var(--chart-label-position); - transform: translateY(-50%); -} - -.sg-chart-x-labels { - display: grid; - grid-template-columns: repeat(10, 1fr); - margin: var(--spacing-small) 0 var(--spacing-large) 0; - padding: 0 0 0 calc(var(--interaction-height) + var(--chart-axis-label-gap)); - list-style: none; - color: var(--text-chart-default); - text-align: center; -} - -.sg-chart-x-labels--line { - position: relative; - display: block; - height: var(--spacing-large); - grid-template-columns: none; -} - -.sg-chart-x-labels--line li { - position: absolute; - left: var(--chart-label-position); - transform: translateX(-50%); -} - -.sg-chart-y-labels li, -.sg-chart-x-labels li { - font-family: var(--font-family-base); - font-size: var(--font-size-small); - font-weight: var(--font-weight-regular); - line-height: var(--line-height-base); -} - -.sg-bar-chart__svg, -.sg-line-chart__svg { - display: block; - width: 100%; - height: 100%; - overflow: hidden; -} - -.sg-bar-chart__grid-line, -.sg-line-chart__grid-line { - stroke: var(--chart-grid-line); - stroke-width: var(--chart-grid-line-width); -} - -.sg-bar-chart__axis-line, -.sg-line-chart__axis-line { - stroke: var(--chart-axis-line); - stroke-width: var(--chart-grid-line-width); -} - -.sg-bar-chart__bar { - rx: var(--radius-graph-bar); - ry: var(--radius-graph-bar); -} - -.sg-bar-chart__bar--value { fill: var(--chart-value-primary); } -.sg-bar-chart__bar--median { fill: var(--chart-value-reference); } -.sg-bar-chart__label, -.sg-line-chart__label { display: none; } - -.sg-bar-chart__legend, -.sg-line-chart__legend { - display: flex; - gap: var(--spacing-large); - padding-left: 0; - margin-left: 0; -} - -.sg-bar-chart__legend { - flex-wrap: wrap; - margin-top: 0; - color: var(--text-chart-default); -} - -.sg-line-chart__legend { - margin-top: var(--spacing-large); -} - -.sg-bar-chart__legend-item, -.sg-line-chart__legend-item { - display: inline-flex; - align-items: center; - gap: var(--spacing-small); - color: var(--text-chart-default); - font-family: var(--font-family-base); - font-size: var(--font-size-small); - font-weight: var(--font-weight-regular); - line-height: var(--line-height-base); -} - -.sg-bar-chart__legend-swatch { - display: inline-block; - width: var(--interaction-height); - height: var(--interaction-height); - border-radius: var(--radius-interaction); -} - -.sg-bar-chart__legend-swatch--value { background: var(--chart-value-primary); } -.sg-bar-chart__legend-swatch--median { background: var(--chart-value-reference); } - -.sg-line-chart { - width: 100%; - box-sizing: border-box; - padding: 0; - background: var(--surface-chart-area); - color: var(--text-chart-default); -} - -.sg-chart-frame--line { - height: calc(var(--chart-height-line) * 0.7); -} - -.sg-line-chart__line { - fill: none; - stroke: var(--chart-value-primary); - stroke-width: var(--chart-line-width); - stroke-linecap: round; - stroke-linejoin: round; -} - -.sg-line-chart__median-line { - fill: none; - stroke: var(--chart-median-line); - stroke-width: var(--chart-grid-line-width); - stroke-dasharray: var(--sandwich-line-height) var(--sandwich-line-height); -} - -.sg-line-chart__legend-line { - display: inline-block; - width: var(--spacing-large); - height: var(--chart-line-width); - background: var(--chart-value-primary); -} - -.sg-line-chart__legend-line--median { - height: var(--chart-grid-line-width); - background: repeating-linear-gradient( - to right, - var(--chart-median-line) 0, - var(--chart-median-line) var(--sandwich-line-height), - transparent var(--sandwich-line-height), - transparent calc(var(--sandwich-line-height) * 2) - ); -} - -/* ========================================================= */ -/* Components: Data Display */ -/* ========================================================= */ - -.sg-data-table { - --data-table-column-count: 3; - width: 100%; - border-collapse: collapse; - background: var(--surface-data-table); - table-layout: fixed; -} - -.sg-data-table th, -.sg-data-table td { - width: calc(100% / var(--data-table-column-count)); - padding: 0 0 var(--spacing-small) 0; - border: var(--border-none); - text-align: left; - vertical-align: top; -} - -.sg-data-table[data-component="data-columns"] { - --data-table-column-count: 2; -} - -.sg-data-table th { - font-family: var(--font-family-base); - font-size: var(--font-size-small); - font-weight: var(--font-weight-regular); - line-height: var(--line-height-base); - color: var(--text-data-table-default); - background: var(--surface-data-table-header); -} - -.sg-data-table td { - font-family: var(--font-family-base); - font-size: var(--font-size-base); - font-weight: var(--font-weight-regular); - line-height: var(--line-height-base); - color: var(--text-data-table-default); - background: var(--surface-data-table-cell); -} - -.sg-data-table__label, -.sg-data-table__value { - font-weight: var(--font-weight-semibold); -} - -.sg-data-table__value--warning { - color: var(--text-data-table-warning); -} - -.sg-data-table__help-icon { - display: inline-flex; - align-items: center; - justify-content: center; - width: var(--small-interaction-element-size); - height: var(--small-interaction-element-size); - border: var(--border-none); - border-radius: 50%; - box-shadow: var(--shadow-none); - font-family: var(--font-family-base); - font-size: var(--font-size-small); - font-weight: var(--font-weight-semibold); - line-height: 1; - color: var(--text-data-table-help-icon); - background: var(--surface-data-table-help-icon); -} - -/* ========================================================= */ -/* Components: Typography */ -/* ========================================================= */ - -.sg-typography-preview { - display: flex; - flex-direction: column; - gap: var(--spacing-small); - color: var(--text-typography-preview); -} - -.sg-typography-preview h1, -.sg-typography-preview h2, -.sg-typography-preview p { - color: var(--text-typography-preview); - margin-top: 0; -} +@import "./styles/01-foundations.css"; +@import "./styles/02-base.css"; +@import "./styles/03-typography-helpers.css"; +@import "./styles/10-components-interactive-elements.css"; +@import "./styles/20-patterns-portal-header.css"; +@import "./styles/21-patterns-options-row.css"; +@import "./styles/22-patterns-object-card.css"; +@import "./styles/23-patterns-object-group-card.css"; +@import "./styles/24-patterns-navigation-card.css"; +@import "./styles/25-patterns-form-sections.css"; +@import "./styles/30-layouts-card-list-page.css"; +@import "./styles/31-patterns-text-layouts.css"; +@import "./styles/32-patterns-card-group-keyboard-nav.css"; +@import "./styles/40-components-cards.css"; +@import "./styles/41-components-charts.css"; +@import "./styles/42-components-data-display.css"; +@import "./styles/43-components-typography.css"; diff --git a/styles/01-foundations.css b/styles/01-foundations.css new file mode 100644 index 0000000..adbcf3b --- /dev/null +++ b/styles/01-foundations.css @@ -0,0 +1,282 @@ +/* ========================================================= */ +/* Foundations */ +/* ========================================================= */ + +:root { + /* Colors */ + --color-darkblue: #4661A9; + --color-midblue: #657FBA; + --color-darkgreen: #4D646E; + --color-darkbrown: #665F57; + --color-light-grey: #E2E5E9; + --color-medium-grey: #CDCFD4; + --color-dark-grey: #7B879D; + --color-white: #FFFFFF; + --color-process-inactive: #FFAE79; + --color-signal-green: #009101; + --color-signal-yellow: #9C7A00; + --color-signal-red: #9B3B2F; + --color-font-dark: #414959; + --color-font-light: #FFFFFF; + --color-font-hyperlink: #FF6900; + --color-background-purple: #373C4A; + --color-background-purple-light: #656C7D; + --color-transparent: transparent; + + /* Semantic component tokens: Cards */ + --surface-card: var(--color-light-grey); + --surface-card-body: var(--color-light-grey); + --surface-card-segment-neutral: var(--color-light-grey); + --surface-card-group: var(--color-background-purple-light); + --surface-card-transparent: var(--color-transparent); + --surface-card-header-primary: var(--color-darkblue); + --surface-card-header-alternative: var(--color-darkgreen); + --surface-card-header-muted: var(--color-darkbrown); + --divider-card-segment: var(--color-white); + --text-card-header: var(--color-font-light); + --text-card-body: var(--color-font-dark); + --text-card-transparent: var(--color-font-light); + --layout-card-body-content-justify: flex-start; + --layout-card-segment-content-gap: var(--spacing-small); + + /* Semantic component tokens: Interactive elements */ + --surface-form-preview: var(--color-light-grey); + --surface-control-default: var(--color-white); + --surface-control-active: var(--color-white); + --surface-control-inactive: var(--color-white); + --surface-control-disabled: var(--color-white); + --surface-button-active: var(--color-medium-grey); + --surface-button-process: var(--color-font-hyperlink); + --surface-button-process-inactive: var(--color-process-inactive); + --surface-button-inactive: var(--color-light-grey); + --surface-tab-selected: var(--color-dark-grey); + --surface-tab-unselected: var(--color-white); + --surface-tab-compact-background: var(--surface-form-preview); + --surface-tab-compact-unselected: var(--color-medium-grey); + --surface-input-clear: var(--color-medium-grey); + --surface-toggle-track: var(--color-medium-grey); + --surface-toggle-handle: var(--color-darkblue); + --surface-menu-panel-portal: var(--color-light-grey); + --surface-help-icon: var(--color-medium-grey); + --surface-help-panel: var(--color-light-grey); + --surface-pulldown-panel: var(--color-light-grey); + --surface-activatable-remove: var(--surface-control-default); + --surface-slider-track: var(--color-medium-grey); + --surface-slider-progress: var(--color-dark-grey); + --surface-slider-thumb: var(--color-dark-grey); + --surface-checkbox-default: var(--color-white); + --surface-checkbox-on-context: var(--color-white); + --surface-radio-default: var(--color-white); + --layout-pulldown-panel-padding-inline: var(--compact-interaction-padding-horizontal); + --layout-pulldown-option-padding-inline: var(--compact-interaction-padding-horizontal); + --layout-pulldown-padding-inline: var(--compact-interaction-padding-horizontal); + --layout-pulldown-chevron-offset: var(--compact-interaction-padding-horizontal); + --layout-tab-navigation-large-padding-inline: var(--interaction-padding-horizontal); + --layout-pulldown-chevron-reserved-space: var(--spacing-large); + --layout-pulldown-panel-form-mobile-width: 90%; + --layer-pulldown-panel: var(--dimension-layer-pulldown-panel); + --layout-multiselect-pulldown-panel-desktop-width: var(--dimension-multiselect-pulldown-panel-desktop-width); + --layout-multiselect-pulldown-panel-mobile-width: var(--dimension-multiselect-pulldown-panel-mobile-width); + --layout-input-label-width: var(--dimension-input-label-width); + --layout-input-field-desktop-width: var(--dimension-input-field-desktop-width); + --layout-input-field-max-width: var(--dimension-input-field-max-width); + --layout-search-field-width: var(--dimension-search-field-width); + --layout-mode-toggle-local-height: var(--compact-interaction-height); + --layout-mode-toggle-local-width-factor: 3; + --layout-mode-toggle-width: calc(var(--interaction-height) * 3.5); + --layout-help-panel-width: calc(var(--interaction-height) * 8); + --text-control-default: var(--color-font-dark); + --text-control-disabled: var(--color-dark-grey); + --text-button-process: var(--color-font-light); + --text-tab-selected: var(--color-font-light); + --text-tab-unselected: var(--color-dark-grey); + --text-toggle-label-active: var(--color-font-light); + --text-menu-link-portal: var(--color-font-dark); + --text-help-icon: var(--color-font-dark); + --text-help-panel: var(--color-font-dark); + --text-activatable-remove: var(--text-control-default); + --text-hyperlink: var(--color-font-hyperlink); + --icon-pulldown-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M2 2l4 4 4-4' fill='none' stroke='currentColor' stroke-width='1.5' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E"); + --icon-sandwich-line-portal: var(--color-font-dark); + --icon-radio-mark: var(--color-font-dark); + + /* Semantic component tokens: Charts */ + --surface-score-bar-track: var(--color-medium-grey); + --surface-chart-area: var(--color-light-grey); + --chart-value-positive: var(--color-signal-green); + --chart-value-neutral: var(--color-signal-yellow); + --chart-value-negative: var(--color-signal-red); + --chart-value-primary: var(--color-darkblue); + --chart-value-reference: var(--color-medium-grey); + --chart-grid-line: var(--color-medium-grey); + --chart-axis-line: var(--color-font-dark); + --chart-marker-line: var(--color-font-dark); + --chart-median-line: var(--color-font-dark); + --text-chart-default: var(--color-font-dark); + --text-score-state-positive: var(--chart-value-positive); + --layout-score-bar-item-columns: max-content 1fr; + --layout-score-bar-item-gap: var(--spacing-large); + --layout-score-bar-item-single-score-columns: max-content 1fr max-content; + + /* Semantic component tokens: Data display */ + --surface-data-table: var(--color-light-grey); + --surface-data-table-header: var(--color-light-grey); + --surface-data-table-cell: var(--color-light-grey); + --surface-data-table-help-icon: var(--color-medium-grey); + + --text-data-table-default: var(--color-font-dark); + --text-data-table-warning: var(--color-signal-yellow); + --text-data-table-help-icon: var(--color-font-dark); + + /* Semantic component tokens: Typography */ + --text-typography-preview: var(--color-font-light); + --layout-preview-align-items: flex-start; + + /* Semantic pattern tokens: Portal header */ + --surface-portal-header: var(--color-darkblue); + --surface-portal-header-tab: var(--color-midblue); + --surface-portal-header-tab-active: var(--color-light-grey); + --text-portal-header-brand: var(--color-font-light); + --font-size-portal-header-brand: calc(var(--font-size-brand) * 1.1); + --text-portal-header-tab: var(--color-font-light); + --text-portal-header-tab-active: var(--color-font-dark); + --layout-page-content-inset-inline: var(--card-segment-padding-horizontal); + --surface-options-row: var(--color-light-grey); + --surface-options-row-control: var(--surface-control-default); + --surface-options-row-control-selected: var(--surface-control-active); + --surface-options-row-input-clear: var(--surface-input-clear); + --surface-options-row-toggle-track: var(--surface-toggle-track); + --surface-options-row-toggle-handle: var(--surface-toggle-handle); + --surface-options-row-help-icon: var(--surface-help-icon); + --surface-options-row-help-panel: var(--surface-help-panel); + --divider-options-row-mobile: var(--color-white); + --text-options-row-default: var(--text-control-default); + --text-options-row-placeholder: var(--text-control-disabled); + --text-options-row-help-icon: var(--color-font-light); + --text-options-row-help-panel: var(--text-help-panel); + --text-options-row-description: var(--color-font-light); + --layout-options-row-margin-top: var(--spacing-small); + --layout-options-row-main-gap: var(--spacing-large); + --layout-options-row-group-gap: var(--spacing-small); + --layout-options-row-mode-toggle-width: var(--dimension-options-row-mode-toggle-width); + --layout-options-row-help-panel-width: var(--dimension-options-row-help-panel-width); + --layout-object-card-min-width: var(--dimension-object-card-min-width); + --layout-object-card-max-width: var(--dimension-object-card-max-width); + --layout-object-card-height: var(--dimension-object-card-height); + --layout-object-card-content-grow: var(--dimension-object-card-content-grow); + --layout-object-card-mobile-width: var(--dimension-object-card-mobile-width); + --layout-object-card-mobile-height: var(--dimension-object-card-mobile-height); + --layout-object-card-desktop-breakpoint: var(--dimension-object-card-desktop-breakpoint); + --layout-object-group-card-min-width: var(--dimension-object-group-card-min-width); + --layout-object-group-card-max-width: var(--dimension-object-group-card-max-width); + --surface-object-card-lower-segment: var(--color-white); + --text-company-card-data-negative: var(--chart-value-negative); + --text-company-card-moat-neutral: var(--chart-value-neutral); + --layout-company-card-analysis-gap-after-moat: var(--spacing-large); + --surface-navigation-card: var(--color-white); + --surface-navigation-card-body: var(--color-white); + --surface-content-block-card-title: var(--color-light-grey); + --surface-content-block-card-content: var(--color-white); + --layout-content-cards-group-gap: var(--spacing-small); + --surface-card-list-drawer: var(--color-background-purple); + --text-content-block-card-title: var(--color-font-dark); + --text-content-block-card-content: var(--color-font-dark); + --text-card-list-drawer: var(--color-font-dark); + --layout-card-list-drawer-width: var(--dimension-card-list-drawer-width); + --surface-vsf-drawer-object-card-header: var(--color-darkblue); + --surface-vsf-drawer-object-card-body: var(--color-darkblue); + --text-vsf-drawer-object-card-heading: var(--color-font-light); + --text-vsf-drawer-object-card-body: var(--color-font-light); + --layout-vsf-drawer-object-card-column-gap: var(--spacing-large); + --surface-text-layout-preview: var(--color-light-grey); + --layout-text-layout-column-gap: var(--spacing-large); + --layout-text-layout-two-column-columns: repeat(2, minmax(0, 1fr)); + --layout-text-layout-three-column-columns: repeat(3, minmax(0, 1fr)); + --text-align-text-layout-column-left: left; + --text-align-text-layout-column-center: center; + --text-align-text-layout-column-right: right; + + /* Typography */ + --font-family-base: "Open Sans", sans-serif; + --font-size-base: 1rem; + --font-size-small: 0.8rem; + --font-size-brand: 1.6rem; + --font-size-h1: 1.5rem; + --font-size-h2: 1.25rem; + --font-weight-regular: 400; + --font-weight-semibold: 600; + --line-height-base: 1.5; + + /* Spacing */ + --spacing-small: 0.3rem; + --spacing-large: 1rem; + --card-segment-padding-vertical: 0.75rem; + --card-segment-padding-horizontal: 1rem; + --card-segment-padding-horizontal-mobile: 0.5rem; + --interaction-padding-vertical: 0.25rem; + --interaction-padding-horizontal: 1rem; + + /* Dimensions */ + --interaction-height: 2rem; + --compact-interaction-height: 1.5rem; + --compact-interaction-padding-vertical: 0.15rem; + --compact-interaction-padding-horizontal: 0.75rem; + --small-interaction-element-size: 1.25rem; + --disabled-opacity: 0.7; + --sandwich-line-width: 1.25rem; + --sandwich-line-height: 4px; + --sandwich-line-gap: 3px; + --score-bar-height: 1rem; + --score-marker-width: 6px; + --score-marker-height: calc(var(--score-bar-height) + 2px); + --chart-height-bar: 24rem; + --chart-height-line: 18rem; + --chart-axis-label-column-width: 4rem; + --chart-axis-label-gap: 5px; + --chart-grid-line-width: 1px; + --chart-line-width: 2px; + --chart-label-position-default: 50%; + --dimension-object-card-min-width: 395px; + --dimension-object-card-max-width: 600px; + --dimension-object-card-height: 600px; + --dimension-object-card-content-grow: 1; + --dimension-object-card-mobile-width: 100%; + --dimension-object-card-mobile-height: auto; + --dimension-object-card-desktop-breakpoint: 768px; + --dimension-object-group-card-min-width: 550px; + --dimension-object-group-card-max-width: 800px; + --dimension-input-label-width: 9rem; + --dimension-input-field-desktop-width: 400px; + --dimension-input-field-max-width: 600px; + --dimension-search-field-width: 15.3rem; + --dimension-layer-pulldown-panel: 40; + --dimension-multiselect-pulldown-panel-desktop-width: 500px; + --dimension-multiselect-pulldown-panel-mobile-width: 80vw; + --dimension-options-row-mode-toggle-width: 7rem; + --dimension-options-row-help-panel-width: 16rem; + --dimension-card-list-drawer-width: 40%; + --dimension-slider-track-height: 6px; + --dimension-slider-thumb-size: 22px; + --dimension-slider-thumb-offset-top: -8px; + --radius-slider-track: 999px; + + /* Radius */ + --radius-card: 8px; + --radius-graph-bar: 2px; + --radius-interaction: 4px; + + /* Shadows */ + --shadow-none: none; + --shadow-overlay: 0 10px 24px rgba(0, 0, 0, 0.22); + --shadow-interaction-inset: none; + + /* Borders */ + --border-none: none; + --border-control: none; + + /* Runtime defaults */ + --layout-object-card-shared-width: auto; + --sg-slider-progress: 0%; + --chart-label-position: var(--chart-label-position-default); +} + diff --git a/styles/02-base.css b/styles/02-base.css new file mode 100644 index 0000000..96916b4 --- /dev/null +++ b/styles/02-base.css @@ -0,0 +1,97 @@ +/* ========================================================= */ +/* Base */ +/* ========================================================= */ + +body { + font-family: var(--font-family-base); + font-size: var(--font-size-base); + font-weight: var(--font-weight-regular); + line-height: var(--line-height-base); + color: var(--color-font-dark); + background: var(--color-background-purple); + margin: 0; + padding: var(--spacing-small); +} + +@media (max-width: 48rem) { + :root { + --layout-tab-navigation-large-padding-inline: 0.7rem; + } + + body { + padding: var(--spacing-small); + } +} + +section { + margin-bottom: var(--spacing-large); +} + +section + section { + margin-top: var(--spacing-large); +} + +.sg-main-heading { + margin: 0 0 var(--spacing-large) 0; + font-family: var(--font-family-base); + font-size: var(--font-size-brand); + font-weight: var(--font-weight-semibold); + line-height: var(--line-height-base); + color: var(--color-font-light); +} + +.sg-sub-heading { + margin: 0 0 var(--spacing-large) 0; + font-family: var(--font-family-base); + font-size: var(--font-size-base); + font-weight: var(--font-weight-semibold); + line-height: var(--line-height-base); +} + +.sg-text-on-dark { + color: var(--color-font-light); +} + +.sg-brand-title { + margin: 0 0 var(--spacing-large) 0; + font-family: var(--font-family-base); + font-size: var(--font-size-brand); + font-weight: var(--font-weight-regular); + line-height: var(--line-height-base); +} + +.sg-heading-h1 { + margin: 0 0 calc(var(--spacing-large) - 0.5rem) 0; + font-family: var(--font-family-base); + font-size: var(--font-size-h1); + font-weight: var(--font-weight-regular); + line-height: var(--line-height-base); +} + +.sg-heading-h2 { + margin: 0 0 var(--spacing-large) 0; + font-family: var(--font-family-base); + font-size: var(--font-size-h2); + font-weight: var(--font-weight-regular); + line-height: var(--line-height-base); +} + +.sg-preview-label { + margin: 0 0 var(--spacing-small) 0; + font-family: var(--font-family-base); + font-size: var(--font-size-small); + font-weight: var(--font-weight-semibold); + line-height: var(--line-height-base); + color: var(--color-font-light); +} + +.sg-preview-area { + display: inline-flex; + flex-wrap: wrap; + gap: var(--spacing-small); + align-items: var(--layout-preview-align-items); + padding: 0; + border-radius: 0; + background: transparent; +} + diff --git a/styles/03-typography-helpers.css b/styles/03-typography-helpers.css new file mode 100644 index 0000000..6dfe5b3 --- /dev/null +++ b/styles/03-typography-helpers.css @@ -0,0 +1,67 @@ +/* ========================================================= */ +/* Typography helpers */ +/* ========================================================= */ + +.sg-body, +.sg-strong, +.sg-section-title, +.sg-bar-label, +.sg-table-label, +.sg-table-value { + font-family: var(--font-family-base); + line-height: var(--line-height-base); +} + +.sg-body, +.sg-section-title { + font-size: var(--font-size-base); + font-weight: var(--font-weight-regular); +} + +.sg-body { + margin: 0 0 var(--spacing-large) 0; +} + +.sg-strong, +.sg-bar-label { + font-size: var(--font-size-base); + font-weight: var(--font-weight-semibold); +} + +.sg-table-label { + font-size: var(--font-size-small); + font-weight: var(--font-weight-regular); +} + +.sg-table-value { + font-size: var(--font-size-small); + font-weight: var(--font-weight-semibold); +} + +.sg-index a { + color: var(--color-font-hyperlink); +} + +.sg-index .sg-sub-heading { + color: var(--color-font-light); +} + +.sg-foundation-table { + width: 100%; + margin-bottom: var(--spacing-large); + color: var(--color-font-light); + border: 1px solid var(--color-white); +} + +.sg-foundation-table th, +.sg-foundation-table td { + color: var(--color-font-light); + border: 1px solid var(--color-white); + vertical-align: top; +} + +.sg-section-h2, +.sg-section-h3 { + margin: 0 0 var(--spacing-small) 0; + color: var(--color-font-light); +} diff --git a/styles/10-components-interactive-elements.css b/styles/10-components-interactive-elements.css new file mode 100644 index 0000000..f1782ea --- /dev/null +++ b/styles/10-components-interactive-elements.css @@ -0,0 +1,1356 @@ +/* ========================================================= */ +/* Components: Interactive Elements */ +/* ========================================================= */ + + + + .sg-component-row { + display: flex; + flex-wrap: wrap; + gap: var(--spacing-small); + align-items: center; + } + + .sg-component-column { + display: flex; + flex-direction: column; + gap: var(--spacing-small); + width: fit-content; + } + + /* + Form preview surface only: + All form elements in this component are intentionally shown on the form-area background. + This wrapper provides only that evaluation background and must not be implemented as part of the form control itself. + The current preview background uses light-grey according to the style foundations. + */ + .sg-form-preview-area { + display: inline-flex; + flex-direction: column; + gap: var(--spacing-small); + width: fit-content; + padding: var(--spacing-large); + border-radius: var(--radius-card); + background: var(--surface-form-preview); + } + + .sg-pulldown-demo { + position: relative; + display: inline-flex; + flex-direction: column; + gap: var(--spacing-small); + width: fit-content; + } + + + .sg-state-example { + display: grid; + grid-template-columns: calc(var(--interaction-height) * 6) auto; + gap: var(--spacing-small); + align-items: center; + } + + .sg-state-example__label { + margin: 0; + color: var(--text-control-default); + } + + .sg-activatable-control { + display: inline-flex; + align-items: center; + gap: var(--spacing-small); + } + + .sg-activatable-row { + display: inline-flex; + align-items: center; + gap: var(--spacing-small); + } + + .sg-interaction-element { + box-sizing: border-box; + height: var(--interaction-height); + padding: + var(--interaction-padding-vertical) + var(--interaction-padding-horizontal); + border: var(--border-none); + border-radius: var(--radius-interaction); + box-shadow: var(--shadow-none); + font-family: var(--font-family-base); + font-size: var(--font-size-base); + line-height: var(--line-height-base); + color: var(--text-control-default); + background: var(--surface-control-default); + } + + .sg-form-active { + background: var(--surface-control-active); + color: var(--text-control-default); + } + + .sg-form-inactive-selectable { + background: var(--surface-control-inactive); + color: var(--text-control-default); + } + + .sg-form-disabled { + background: var(--surface-control-disabled); + color: var(--text-control-disabled); + opacity: var(--disabled-opacity); + cursor: not-allowed; + } + + .sg-interaction-element:focus, + .sg-interaction-element:focus-visible { + outline: none; + } + + .sg-button { + display: inline-flex; + align-items: center; + justify-content: center; + font-weight: var(--font-weight-semibold); + cursor: pointer; + text-decoration: none; + } + + .sg-button--active { + background: var(--surface-button-active); + color: var(--text-control-default); + } + + .sg-button--process { + background: var(--surface-button-process); + color: var(--text-button-process); + } + + .sg-button--process-inactive { + background: var(--surface-button-process-inactive); + color: var(--text-button-process); + } + + .sg-button--inactive { + background: var(--surface-button-inactive); + color: var(--text-control-disabled); + } + + .sg-button:disabled, + .sg-button--disabled { + cursor: not-allowed; + color: var(--text-control-disabled); + } + + .sg-button--process-inactive:disabled { + color: var(--text-button-process); + } + + .sg-tab-button-group { + display: flex; + flex-wrap: wrap; + gap: var(--spacing-small); + align-items: center; + } + + .sg-tab-button-group[data-component-size="compact"] { + background: var(--surface-tab-compact-background); + } + + .sg-tab-button-group[data-component="tab-navigation"][data-component-size="large"] .sg-tab-button { + padding-inline: var(--layout-tab-navigation-large-padding-inline); + } + + .sg-tab-button[aria-selected="true"] { + background: var(--surface-tab-selected); + color: var(--text-tab-selected); + } + + .sg-tab-button[aria-selected="false"] { + background: var(--surface-tab-unselected); + color: var(--text-tab-unselected); + } + + .sg-tab-button-group[data-component-size="compact"] .sg-tab-button[aria-selected="false"] { + background: var(--surface-tab-compact-unselected); + color: var(--text-control-default); + } + + .sg-tab-button--compact { + height: var(--compact-interaction-height); + padding: + var(--compact-interaction-padding-vertical) + var(--compact-interaction-padding-horizontal); + font-size: var(--font-size-small); + } + + .sg-pulldown { + font-weight: var(--font-weight-regular); + appearance: none; + padding-left: var(--layout-pulldown-padding-inline); + padding-right: calc( + var(--layout-pulldown-chevron-offset) + + var(--layout-pulldown-chevron-reserved-space) + ); + background-image: var(--icon-pulldown-chevron); + background-position: right var(--layout-pulldown-chevron-offset) center; + background-size: calc(var(--interaction-height) * 0.375) calc(var(--interaction-height) * 0.25); + background-repeat: no-repeat; + } + + .sg-pulldown-demo__trigger { + text-align: left; + } + + .sg-pulldown--selected { + background-color: var(--surface-control-active); + color: var(--text-control-default); + } + + .sg-pulldown--inactive-selectable { + background-color: var(--surface-control-inactive); + color: var(--text-control-default); + } + + .sg-pulldown-demo[data-activatable="true"] .sg-pulldown-demo__trigger.sg-pulldown--inactive-selectable { + opacity: var(--disabled-opacity); + } + + .sg-pulldown--disabled { + background-color: var(--surface-control-disabled); + color: var(--text-control-disabled); + opacity: var(--disabled-opacity); + cursor: not-allowed; + } + + .sg-input-single-line { + font-weight: var(--font-weight-regular); + color: var(--text-control-default); + -webkit-appearance: none; + appearance: none; + } + + .sg-input-single-line::placeholder { + color: var(--text-control-disabled); + opacity: 1; + } + + .sg-input-single-line--inactive-selectable { + color: var(--text-control-default); + } + + .sg-input-single-line--disabled { + color: var(--text-control-disabled); + opacity: var(--disabled-opacity); + cursor: not-allowed; + } + + .sg-input-single-line-wrap { + position: relative; + display: inline-flex; + align-items: center; + } + + .sg-input-single-line-wrap .sg-input-single-line { + padding-right: calc(var(--interaction-padding-horizontal) + var(--interaction-height)); + } + + .sg-input-clear-button { + position: absolute; + top: 0; + right: 0; + display: none; + align-items: center; + justify-content: center; + width: var(--interaction-height); + height: var(--interaction-height); + padding: 0; + margin: 0; + border: var(--border-none); + border-radius: 0 var(--radius-interaction) var(--radius-interaction) 0; + box-shadow: var(--shadow-none); + -webkit-appearance: none; + appearance: none; + font-family: var(--font-family-base); + font-size: var(--font-size-base); + line-height: 1; + color: var(--text-control-default); + background: var(--surface-input-clear); + cursor: pointer; + } + + .sg-input-single-line-wrap[data-has-value="true"] .sg-input-clear-button { + display: inline-flex; + } + + .sg-search-field-row { + display: inline-flex; + align-items: center; + gap: var(--spacing-small); + white-space: nowrap; + flex-wrap: nowrap; + } + + .sg-search-field-input { + width: var(--layout-search-field-width); + } + + .sg-search-result-count { + color: var(--color-dark-grey); + font-family: var(--font-family-base); + font-size: var(--font-size-base); + line-height: var(--line-height-base); + } + + .sg-labeled-input-row { + display: flex; + align-items: center; + gap: var(--spacing-small); + width: auto; + max-width: none; + } + + .sg-labeled-input-row .sg-label { + min-width: var(--layout-input-label-width); + flex: 0 0 var(--layout-input-label-width); + } + + .sg-labeled-input-row .sg-input-single-line, + .sg-labeled-input-row .sg-input-multi-line { + width: 100%; + min-width: 0; + max-width: var(--layout-input-field-max-width); + } + + .sg-labeled-input-row:has(.sg-input-multi-line) { + align-items: flex-start; + } + + .sg-input-multi-line { + box-sizing: border-box; + min-height: calc(var(--interaction-height) * 2.75); + padding: var(--interaction-padding-vertical) var(--interaction-padding-horizontal); + border: var(--border-control); + border-radius: var(--radius-interaction); + box-shadow: var(--shadow-interaction-inset); + font-family: var(--font-family-base); + font-size: var(--font-size-base); + line-height: var(--line-height-base); + color: var(--text-control-default); + background: var(--surface-control-inactive); + resize: vertical; + } + + .sg-input-component .sg-form-preview-area { + width: 100%; + box-sizing: border-box; + } + + #component-pulldown .sg-form-preview-area { + width: 100%; + box-sizing: border-box; + } + + #component-pulldown .sg-state-example { + grid-template-columns: calc(var(--interaction-height) * 6) minmax(0, 1fr); + width: 100%; + } + + #component-pulldown .sg-state-example > :last-child { + width: 100%; + min-width: 0; + } + + #component-pulldown .sg-pulldown-demo { + width: 100%; + min-width: 0; + max-width: var(--layout-input-field-max-width); + } + + #component-pulldown .sg-labeled-input-row { + width: 100%; + max-width: none; + } + + #component-pulldown .sg-labeled-input-row .sg-pulldown, + #component-pulldown .sg-labeled-input-row .sg-pulldown-demo { + width: 100%; + min-width: 0; + max-width: var(--layout-input-field-max-width); + } + + #component-pulldown .sg-pulldown-demo__trigger, + #component-pulldown .sg-state-example > .sg-pulldown { + width: 100%; + min-width: 0; + max-width: var(--layout-input-field-max-width); + } + + #component-pulldown .sg-activatable-row { + display: grid; + grid-template-columns: var(--layout-input-label-width) minmax(0, 1fr); + align-items: center; + column-gap: var(--spacing-small); + width: 100%; + } + + #component-pulldown .sg-pulldown-activatable-header { + display: grid; + grid-template-columns: max-content max-content; + align-items: center; + column-gap: var(--spacing-small); + width: 100%; + justify-content: start; + } + + #component-pulldown .sg-pulldown-activatable-header .sg-mode-toggle { + grid-column: 1; + } + + #component-pulldown .sg-pulldown-activatable-header .sg-label { + grid-column: 2; + min-width: 0; + } + + #component-pulldown .sg-activatable-row .sg-pulldown-demo { + width: 100%; + max-width: var(--layout-input-field-max-width); + min-width: 0; + } + + .sg-input-component .sg-state-example { + grid-template-columns: calc(var(--interaction-height) * 6) minmax(0, 1fr); + } + + @media (max-width: 48rem) { + .sg-input-component .sg-form-preview-area { + width: 100%; + max-width: 100%; + box-sizing: border-box; + } + + #component-pulldown .sg-form-preview-area { + width: 100%; + max-width: 100%; + box-sizing: border-box; + } + + .sg-input-component .sg-state-example { + grid-template-columns: 1fr; + align-items: start; + width: 100%; + } + + #component-pulldown .sg-state-example { + grid-template-columns: 1fr; + align-items: start; + width: 100%; + } + + .sg-input-component .sg-state-example > :last-child { + width: 100%; + min-width: 0; + } + + #component-pulldown .sg-state-example > :last-child { + width: 100%; + min-width: 0; + } + + #component-pulldown .sg-labeled-input-row .sg-pulldown, + #component-pulldown .sg-labeled-input-row .sg-pulldown-demo { + width: 100%; + min-width: 0; + max-width: 100%; + } + + #component-pulldown .sg-activatable-row { + grid-template-columns: 1fr; + align-items: start; + row-gap: var(--spacing-small); + width: 100%; + max-width: 100%; + } + + .sg-labeled-input-row { + flex-direction: column; + align-items: flex-start; + width: 100%; + max-width: 100%; + } + + .sg-labeled-input-row .sg-label { + min-width: 0; + flex: 0 0 auto; + } + + .sg-labeled-input-row .sg-input-single-line, + .sg-labeled-input-row .sg-input-multi-line { + min-width: 0; + max-width: 100%; + width: 100%; + } + } + + .sg-mode-toggle { + display: inline-flex; + align-items: center; + gap: var(--spacing-small); + height: auto; + padding: 0; + border: var(--border-none); + border-radius: 0; + box-shadow: var(--shadow-none); + appearance: none; + -webkit-tap-highlight-color: transparent; + background: transparent; + cursor: pointer; + } + + .sg-mode-toggle:focus, + .sg-mode-toggle:focus-visible { + outline: none; + } + + .sg-mode-toggle__label { + font-family: var(--font-family-base); + font-size: var(--font-size-base); + font-weight: var(--font-weight-semibold); + line-height: var(--line-height-base); + color: var(--text-control-default); + } + + .sg-mode-toggle__switch { + position: relative; + width: var(--layout-mode-toggle-width); + height: var(--interaction-height); + border-radius: var(--radius-interaction); + background: var(--surface-toggle-track); + } + + .sg-mode-toggle__handle { + position: absolute; + top: 0; + right: 0; + width: calc(100% / 2); + height: 100%; + border-radius: var(--radius-interaction); + background: var(--surface-toggle-handle); + } + + .sg-mode-toggle[data-active="absolute"] .sg-mode-toggle__handle { + left: 0; + right: auto; + } + + .sg-mode-toggle[data-active="relative"] .sg-mode-toggle__handle { + left: auto; + right: 0; + } + + .sg-mode-toggle--local .sg-mode-toggle__label { + font-weight: var(--font-weight-regular); + } + + .sg-mode-toggle--local .sg-mode-toggle__switch { + width: calc(var(--layout-mode-toggle-local-height) * var(--layout-mode-toggle-local-width-factor)); + height: var(--layout-mode-toggle-local-height); + } + + .sg-activation-toggle-pattern { + display: flex; + align-items: center; + gap: var(--spacing-small); + } + + .sg-activation-mode-toggle { + gap: 0; + } + + .sg-activation-mode-toggle .sg-mode-toggle__switch { + display: grid; + grid-template-columns: 1fr 1fr; + align-items: center; + overflow: hidden; + } + + .sg-activation-mode-toggle .sg-mode-toggle__handle { + z-index: 1; + } + + .sg-activation-mode-toggle__switch-label { + position: relative; + z-index: 2; + text-align: center; + font-family: var(--font-family-base); + font-size: var(--font-size-small); + font-weight: var(--font-weight-regular); + line-height: var(--layout-mode-toggle-local-height); + text-transform: lowercase; + color: var(--text-control-default); + } + + .sg-activation-mode-toggle[data-active="absolute"] .sg-activation-mode-toggle__switch-label--left, + .sg-activation-mode-toggle[data-active="relative"] .sg-activation-mode-toggle__switch-label--right { + color: var(--text-toggle-label-active); + } + + .sg-slider-row { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: var(--spacing-small); + width: 100%; + max-width: none; + } + + .sg-slider-row .sg-label { + min-width: var(--layout-input-label-width); + flex: 0 0 var(--layout-input-label-width); + color: var(--text-control-default); + } + + .sg-slider { + flex: 1 1 14rem; + width: 100%; + min-width: 0; + max-width: var(--layout-input-field-max-width); + height: var(--interaction-height); + margin: 0; + padding: 0; + border: 0; + -webkit-appearance: none; + appearance: none; + background: transparent; + cursor: pointer; + } + + .sg-slider::-webkit-slider-runnable-track { + height: var(--dimension-slider-track-height); + border-radius: var(--radius-slider-track); + background: + linear-gradient( + to right, + var(--surface-slider-progress) 0%, + var(--surface-slider-progress) var(--sg-slider-progress, 0%), + var(--surface-slider-track) var(--sg-slider-progress, 0%), + var(--surface-slider-track) 100% + ); + } + + .sg-slider::-webkit-slider-thumb { + width: var(--dimension-slider-thumb-size); + height: var(--dimension-slider-thumb-size); + margin-top: var(--dimension-slider-thumb-offset-top); + border: 0; + border-radius: 50%; + -webkit-appearance: none; + appearance: none; + background: var(--surface-slider-thumb); + } + + .sg-slider::-moz-range-track { + height: var(--dimension-slider-track-height); + border: 0; + border-radius: var(--radius-slider-track); + background: var(--surface-slider-track); + } + + .sg-slider::-moz-range-progress { + height: var(--dimension-slider-track-height); + border-radius: var(--radius-slider-track); + background: var(--surface-slider-progress); + } + + .sg-slider::-moz-range-thumb { + width: var(--dimension-slider-thumb-size); + height: var(--dimension-slider-thumb-size); + border: 0; + border-radius: 50%; + background: var(--surface-slider-thumb); + } + + .sg-slider-value { + flex: 0 0 auto; + min-width: calc(var(--interaction-height) * 1.25); + white-space: nowrap; + text-align: right; + color: var(--text-control-default); + } + + .sg-slider-row--inactive-selectable { + opacity: var(--disabled-opacity); + } + + #component-slider .sg-slider-row { + display: grid; + grid-template-columns: + max-content + minmax(0, 1fr) + auto; + align-items: center; + column-gap: var(--spacing-large); + width: 100%; + } + + #component-slider .sg-state-example { + grid-template-columns: calc(var(--interaction-height) * 6) minmax(0, 1fr); + width: 100%; + } + + #component-slider .sg-form-preview-area { + width: 100%; + box-sizing: border-box; + } + + #component-slider .sg-state-example > :last-child { + width: 100%; + min-width: 0; + } + + #component-slider .sg-slider-row .sg-label { + min-width: 0; + flex: 0 0 auto; + grid-column: 1; + } + + #component-slider .sg-slider-row .sg-slider { + width: 100%; + max-width: var(--layout-input-field-max-width); + min-width: 0; + grid-column: 2; + } + + #component-slider .sg-state-example > .sg-slider-row, + #component-slider .sg-activatable-row .sg-slider-row { + max-width: var(--layout-input-field-max-width); + } + + #component-slider .sg-slider-row .sg-slider-value { + min-width: 0; + grid-column: 3; + justify-self: start; + align-self: center; + display: block; + margin: 0; + line-height: 1; + } + + #component-slider .sg-activatable-row { + display: grid; + grid-template-columns: max-content minmax(0, 1fr); + align-items: center; + column-gap: var(--spacing-large); + width: 100%; + } + + #component-slider .sg-slider-activatable-header { + display: grid; + grid-template-columns: max-content max-content; + column-gap: var(--spacing-large); + align-items: center; + width: 100%; + justify-content: start; + } + + #component-slider .sg-slider-activatable-header .sg-label { + grid-column: 2; + min-width: 0; + } + + #component-slider .sg-slider-activatable-header .sg-mode-toggle { + grid-column: 1; + } + + #component-slider .sg-activatable-row .sg-slider-row { + display: grid; + grid-template-columns: minmax(0, 1fr) auto; + align-items: center; + column-gap: var(--spacing-large); + width: 100%; + } + + #component-slider .sg-activatable-row .sg-slider-row .sg-slider { + width: 100%; + max-width: var(--layout-input-field-max-width); + min-width: 0; + grid-column: 1; + } + + #component-slider .sg-activatable-row .sg-slider-row .sg-slider-value { + grid-column: 2; + justify-self: start; + min-width: 0; + align-self: center; + display: block; + margin: 0; + line-height: 1; + } + + .sg-pulldown-panel .sg-slider-row[data-activatable="true"] { + display: grid; + grid-template-columns: + var(--layout-input-label-width) + minmax(0, 1fr) + auto; + align-items: center; + column-gap: var(--spacing-small); + } + + .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-label { + min-width: 0; + flex: 0 0 auto; + grid-column: 1; + grid-row: 1; + } + + .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-slider { + min-width: 0; + max-width: 100%; + width: 100%; + grid-column: 2; + grid-row: 1; + } + + .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-slider-value { + min-width: calc(var(--interaction-height) * 1.25); + justify-self: end; + align-self: center; + white-space: nowrap; + grid-column: 3; + grid-row: 1; + } + + @media (max-width: 48rem) { + #component-slider .sg-form-preview-area { + width: 100%; + max-width: 100%; + box-sizing: border-box; + } + + #component-slider .sg-state-example { + grid-template-columns: 1fr; + align-items: start; + width: 100%; + } + + #component-slider .sg-state-example > :last-child { + width: 100%; + min-width: 0; + } + + #component-slider .sg-activatable-row { + grid-template-columns: 1fr; + align-items: start; + row-gap: var(--spacing-small); + } + + #component-slider .sg-slider-activatable-header .sg-label { + grid-column: 2; + grid-row: 1; + } + + #component-slider .sg-slider-activatable-header .sg-mode-toggle { + grid-column: 1; + grid-row: 1; + } + + #component-slider .sg-activatable-row .sg-slider-row { + grid-template-columns: minmax(0, 1fr) auto; + column-gap: var(--spacing-large); + align-items: center; + width: 100%; + } + + #component-slider .sg-activatable-row .sg-slider-row .sg-slider { + width: 100%; + } + + #component-slider .sg-activatable-row .sg-slider-row .sg-slider-value { + justify-self: start; + align-self: center; + margin: 0; + line-height: 1; + } + + } + + .sg-sandwich-button { + display: inline-flex; + align-items: center; + justify-content: center; + width: calc(var(--interaction-height) + var(--spacing-small)); + height: calc(var(--interaction-height) + var(--spacing-small)); + padding: 0; + cursor: pointer; + } + + .sg-sandwich-button--small { + width: calc(var(--interaction-height) * 0.9); + height: calc(var(--interaction-height) * 0.9); + } + + .sg-sandwich-button__icon { + width: var(--sandwich-line-width); + height: auto; + display: flex; + flex-direction: column; + gap: var(--sandwich-line-gap); + justify-content: center; + } + + .sg-sandwich-button__line { + display: block; + width: 100%; + height: var(--sandwich-line-height); + border-radius: var(--radius-interaction); + } + + .sg-sandwich-menu-wrap[data-component-size="default"] .sg-sandwich-button__line { + background: var(--icon-sandwich-line-portal); + } + + .sg-sandwich-menu-wrap[data-component-size="small"] .sg-sandwich-button__line { + height: calc(var(--sandwich-line-height) - 1px); + background: var(--icon-sandwich-line-portal); + } + + .sg-sandwich-menu-wrap[data-component-size="small"] .sg-sandwich-button__icon { + width: calc(var(--sandwich-line-width) - 3px); + } + + .sg-sandwich-menu-wrap { + position: relative; + display: inline-flex; + } + + .sg-sandwich-menu-panel { + position: absolute; + top: calc(100% + var(--spacing-small)); + right: 0; + display: none; + flex-direction: column; + gap: var(--spacing-small); + width: max-content; + padding: var(--spacing-large); + border: var(--border-none); + border-radius: var(--radius-card); + box-shadow: var(--shadow-overlay); + z-index: 1; + } + + .sg-sandwich-menu-wrap[data-component-size="default"] .sg-sandwich-menu-panel { + background: var(--surface-menu-panel-portal); + } + + .sg-sandwich-menu-wrap[data-component-size="small"] .sg-sandwich-menu-panel { + background: var(--surface-menu-panel-portal); + } + + .sg-sandwich-menu-wrap[data-open="true"] .sg-sandwich-menu-panel { + display: flex; + } + + .sg-sandwich-menu-link { + margin: 0; + text-decoration: none; + white-space: nowrap; + font-family: var(--font-family-base); + font-size: var(--font-size-base); + font-weight: var(--font-weight-regular); + line-height: var(--line-height-base); + } + + .sg-sandwich-menu-wrap[data-component-size="default"] .sg-sandwich-menu-link { + color: var(--text-menu-link-portal); + } + + .sg-sandwich-menu-wrap[data-component-size="small"] .sg-sandwich-menu-link { + color: var(--text-menu-link-portal); + } + + .sg-sandwich-menu-wrap[data-align="left"] .sg-sandwich-menu-panel { + right: auto; + left: 0; + } + + .sg-sandwich-menu-wrap[data-align="right"] .sg-sandwich-menu-panel { + right: 0; + left: auto; + } + + .sg-help-icon-wrap { + position: relative; + display: inline-flex; + vertical-align: middle; + } + + .sg-help-icon { + display: inline-flex; + align-items: center; + justify-content: center; + width: var(--small-interaction-element-size); + height: var(--small-interaction-element-size); + padding: 0; + border: var(--border-none); + border-radius: 50%; + box-shadow: var(--shadow-none); + font-family: var(--font-family-base); + font-size: var(--font-size-small); + font-weight: var(--font-weight-semibold); + line-height: 1; + color: var(--text-help-icon); + background: var(--surface-help-icon); + cursor: pointer; + } + + .sg-help-icon-panel { + position: absolute; + top: calc(100% + var(--spacing-small)); + left: 0; + z-index: var(--layer-pulldown-panel); + display: none; + width: var(--layout-help-panel-width); + padding: var(--spacing-large); + border-radius: var(--radius-card); + color: var(--text-help-panel); + background: var(--surface-help-panel); + box-shadow: var(--shadow-overlay); + } + + .sg-help-icon-wrap[data-open="true"] .sg-help-icon-panel { + display: block; + } + + .sg-help-icon-wrap[data-open="true"] { + z-index: var(--layer-pulldown-panel); + } + + .sg-help-icon-wrap[data-align="left"] .sg-help-icon-panel { + left: 0; + right: auto; + } + + .sg-help-icon-wrap[data-align="right"] .sg-help-icon-panel { + left: auto; + right: 0; + } + + .sg-pulldown-panel { + position: absolute; + top: calc(100% + var(--spacing-small)); + left: 0; + z-index: var(--layer-pulldown-panel); + display: none; + flex-direction: column; + gap: var(--spacing-small); + min-width: 100%; + width: max-content; + max-width: calc(100vw - (2 * var(--spacing-large))); + box-sizing: border-box; + padding-block: var(--spacing-large); + padding-inline: var(--layout-pulldown-panel-padding-inline); + border-radius: var(--radius-card); + background: var(--surface-pulldown-panel); + box-shadow: var(--shadow-overlay); + } + + .sg-pulldown-demo[data-open="true"] .sg-pulldown-panel { + display: inline-flex; + } + + .sg-pulldown-demo[data-align="left"] .sg-pulldown-panel { + left: 0; + right: auto; + } + + .sg-pulldown-demo[data-align="right"] .sg-pulldown-panel { + left: auto; + right: 0; + } + + .sg-pulldown-panel__row { + display: grid; + grid-template-columns: calc(var(--interaction-height) * 5) calc(var(--interaction-height) * 7) var(--interaction-height); + gap: var(--spacing-small); + align-items: center; + } + + .sg-pulldown-panel__label { + margin: 0; + color: var(--text-control-default); + } + +.sg-pulldown-panel__remove { + display: inline-flex; + align-items: center; + justify-content: center; + width: var(--interaction-height); + height: var(--interaction-height); + padding: 0; + border: var(--border-none); + border-radius: var(--radius-interaction); + background: var(--surface-activatable-remove); + color: var(--text-activatable-remove); + font-family: var(--font-family-base); + font-size: var(--font-size-base); + line-height: 1; + -webkit-appearance: none; + appearance: none; + cursor: pointer; +} + + .sg-pulldown-panel__remove[hidden] { + display: none; + } + + .sg-pulldown-panel__row--disabled { + color: var(--text-control-disabled); + opacity: var(--disabled-opacity); + cursor: not-allowed; + } + + .sg-pulldown-panel__row--disabled .sg-pulldown, + .sg-pulldown-panel__row--disabled .sg-pulldown-panel__label { + color: var(--text-control-disabled); + } + + .sg-pulldown-option-list { + display: flex; + flex-direction: column; + gap: var(--spacing-small); + margin: 0; + padding: 0; + list-style: none; + } + + .sg-pulldown-option { + display: flex; + gap: var(--spacing-small); + align-items: center; + padding-block: var(--interaction-padding-vertical); + padding-inline: var(--layout-pulldown-option-padding-inline); + border-radius: var(--radius-interaction); + white-space: nowrap; + color: var(--text-control-default); + cursor: pointer; + } + + .sg-pulldown-option--selected { + background: var(--surface-control-active); + } + + .sg-pulldown-option--disabled { + color: var(--text-control-disabled); + } + + .sg-pulldown-option__checkbox { + width: var(--font-size-base); + height: var(--font-size-base); + margin: 0; + } + + .sg-checkbox-field { + display: inline-flex; + align-items: center; + justify-content: center; + width: var(--small-interaction-element-size); + height: var(--small-interaction-element-size); + padding: 0; + border: var(--border-none); + border-radius: var(--radius-interaction); + box-shadow: var(--shadow-none); + color: var(--text-control-default); + background: var(--surface-checkbox-default); + cursor: pointer; + } + + .sg-checkbox-field--on-grey, + .sg-checkbox-field--on-color { + background: var(--surface-checkbox-on-context); + } + + .sg-checkbox-field__mark { + display: none; + font-family: var(--font-family-base); + font-size: var(--font-size-base); + font-weight: var(--font-weight-semibold); + line-height: 1; + } + + .sg-checkbox-field[aria-checked="true"] .sg-checkbox-field__mark { + display: inline; + } + + .sg-checkbox-field.sg-form-active { + background: var(--surface-control-active); + color: var(--text-control-default); + } + + .sg-checkbox-field--inactive-selectable { + color: var(--text-control-default); + background: var(--surface-control-inactive); + opacity: var(--disabled-opacity); + } + + .sg-checkbox-field--disabled { + color: var(--text-control-disabled); + background: var(--surface-control-disabled); + opacity: var(--disabled-opacity); + cursor: not-allowed; + } + + .sg-checkbox-field-list { + display: flex; + flex-direction: column; + gap: var(--spacing-small); + } + + .sg-checkbox-field-option { + display: inline-flex; + align-items: center; + gap: var(--spacing-small); + color: var(--text-control-default); + flex-wrap: wrap; + } + + .sg-pulldown-panel__checkbox-list .sg-checkbox-field-option.sg-body { + margin-bottom: 0; + } + + #component-checkbox-field .sg-checkbox-field-option .sg-state-example__label, + #component-radio-field .sg-checkbox-field-option .sg-state-example__label { + flex: 0 0 100%; + margin-bottom: var(--spacing-small); + } + + .sg-checkbox-field-option--inactive-selectable { + color: var(--text-control-default); + } + + #component-checkbox-field .sg-checkbox-field-option[data-activatable="true"], + #component-radio-field .sg-checkbox-field-option[data-activatable="true"] { + gap: var(--spacing-large); + } + + .sg-radio-activatable-group__choices { + display: inline-flex; + align-items: center; + gap: var(--spacing-small); + } + + .sg-radio-activatable-group__choice { + display: inline-flex; + align-items: center; + gap: var(--spacing-small); + } + + .sg-radio-activatable-group__choice > span { + color: var(--text-control-default); + opacity: 1; + } + + #component-radio-activatable[data-component-state="inactive-selectable"] .sg-radio-activatable-group__choice > span { + opacity: var(--disabled-opacity); + } + + #component-radio-activatable[data-component-state="active"] .sg-radio-activatable-group__choice > span { + opacity: 1; + } + + #component-radio-field .sg-checkbox-field-option { + display: grid; + grid-template-columns: calc(var(--interaction-height) * 6) minmax(0, 1fr); + align-items: center; + column-gap: var(--spacing-small); + width: 100%; + } + + #component-radio-field .sg-checkbox-field-option .sg-state-example__label { + grid-column: 1; + margin-bottom: 0; + } + + #component-radio-field .sg-radio-field-row { + grid-column: 2; + display: inline-flex; + align-items: center; + gap: var(--spacing-small); + min-width: 0; + flex-wrap: nowrap; + } + + #component-radio-field .sg-radio-field-row > .sg-radio-activatable-group__choices { + margin-left: var(--spacing-large); + } + + @media (max-width: 48rem) { + #component-radio-field .sg-checkbox-field-option { + grid-template-columns: 1fr; + align-items: start; + } + + #component-radio-field .sg-checkbox-field-option .sg-state-example__label, + #component-radio-field .sg-radio-field-row { + grid-column: 1; + } + + #component-radio-field .sg-radio-field-row { + flex-wrap: wrap; + } + + #component-radio-field .sg-radio-field-row > .sg-radio-activatable-group__choices { + flex: 0 0 100%; + margin-left: 0; + } + } + + .sg-checkbox-field-option--disabled { + color: var(--text-control-disabled); + opacity: var(--disabled-opacity); + cursor: not-allowed; + } + + .sg-radio-field { + display: inline-flex; + align-items: center; + justify-content: center; + width: var(--small-interaction-element-size); + height: var(--small-interaction-element-size); + padding: 0; + border: var(--border-none); + border-radius: 50%; + box-shadow: var(--shadow-none); + color: var(--text-control-default); + background: var(--surface-radio-default); + cursor: pointer; + } + + .sg-radio-field__mark { + display: none; + width: calc(var(--small-interaction-element-size) * 0.44); + height: calc(var(--small-interaction-element-size) * 0.44); + border-radius: 50%; + background: var(--icon-radio-mark); + } + + .sg-radio-field[aria-checked="true"] .sg-radio-field__mark { + display: block; + } + + .sg-radio-field--inactive-selectable { + color: var(--text-control-default); + background: var(--surface-radio-default); + opacity: var(--disabled-opacity); + } + + .sg-radio-field--disabled { + color: var(--text-control-disabled); + background: var(--surface-control-disabled); + opacity: var(--disabled-opacity); + cursor: not-allowed; + } + + .sg-hyperlink { + color: var(--text-hyperlink); + text-decoration: none; + } + diff --git a/styles/20-patterns-portal-header.css b/styles/20-patterns-portal-header.css new file mode 100644 index 0000000..d608ebd --- /dev/null +++ b/styles/20-patterns-portal-header.css @@ -0,0 +1,69 @@ +/* ========================================================= */ +/* Patterns: Portal Header */ +/* ========================================================= */ + +.sg-portal-header { + --surface-tab-selected: var(--surface-portal-header-tab-active); + --surface-tab-unselected: var(--surface-portal-header-tab); + --text-tab-selected: var(--text-portal-header-tab-active); + --text-tab-unselected: var(--text-portal-header-tab); + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--spacing-large); + padding: + var(--card-segment-padding-vertical) + var(--layout-page-content-inset-inline); + border: var(--border-none); + border-radius: var(--radius-card); + box-shadow: var(--shadow-none); + background: var(--surface-portal-header); +} + +.sg-portal-header__main { + display: grid; + flex: 1 1 auto; + grid-template-columns: minmax(0, 1fr) auto; + grid-template-areas: + "brand menu" + "tabs tabs"; + gap: var(--spacing-large); + min-width: 0; +} + +.sg-portal-header__brand { + grid-area: brand; + margin: 0; + padding-left: 0; + font-size: var(--font-size-portal-header-brand); + color: var(--text-portal-header-brand); +} + +.sg-portal-header__tabs { + grid-area: tabs; + width: 100%; +} + +.sg-portal-header__menu-wrap { + grid-area: menu; + justify-self: end; +} + +.sg-portal-header-pattern-variant { + margin-bottom: var(--spacing-large); +} + +.sg-portal-header-pattern-variant__label { + margin: 0 0 var(--spacing-small) 0; +} + +.sg-portal-header-pattern-variant__next-element { + margin-top: var(--spacing-large); +} + +@media (max-width: calc(var(--layout-object-card-desktop-breakpoint) - 1px)) { + .sg-portal-header__main { + gap: var(--spacing-small) var(--spacing-large); + } +} + diff --git a/styles/21-patterns-options-row.css b/styles/21-patterns-options-row.css new file mode 100644 index 0000000..610ca3b --- /dev/null +++ b/styles/21-patterns-options-row.css @@ -0,0 +1,164 @@ +/* ========================================================= */ +/* Patterns: Options Row */ +/* ========================================================= */ + +.sg-options-row { + --surface-control-default: var(--surface-options-row-control); + --surface-control-active: var(--surface-options-row-control-selected); + --surface-input-clear: var(--surface-options-row-input-clear); + --surface-toggle-track: var(--surface-options-row-toggle-track); + --surface-toggle-handle: var(--surface-options-row-toggle-handle); + --surface-help-icon: var(--surface-options-row-help-icon); + --surface-help-panel: var(--surface-options-row-help-panel); + --text-control-default: var(--text-options-row-default); + --text-control-disabled: var(--text-options-row-placeholder); + --text-help-icon: var(--text-options-row-help-icon); + --text-help-panel: var(--text-options-row-help-panel); + --layout-mode-toggle-width: var(--layout-options-row-mode-toggle-width); + --layout-help-panel-width: var(--layout-options-row-help-panel-width); + margin-top: var(--layout-options-row-margin-top); + display: flex; + justify-content: space-between; + gap: var(--layout-options-row-main-gap); + padding: + var(--card-segment-padding-vertical) + var(--layout-page-content-inset-inline); + border: var(--border-none); + border-radius: var(--radius-card); + box-shadow: var(--shadow-none); + background: var(--surface-options-row); +} + +.sg-options-row__left, +.sg-options-row__right { + display: flex; + flex-wrap: wrap; + gap: var(--layout-options-row-group-gap); + align-items: center; +} + +.sg-options-row__left { + justify-content: flex-start; +} + +.sg-options-row__right { + justify-content: flex-end; + flex-wrap: nowrap; + margin-left: auto; +} + +@media (max-width: 48rem) { + .sg-options-row { + flex-direction: column; + gap: 0; + padding: 0; + } + + .sg-options-row__right, + .sg-options-row__left { + padding: + var(--card-segment-padding-vertical) + var(--card-segment-padding-horizontal); + } + + .sg-options-row__right { + order: 1; + justify-content: flex-end; + flex-wrap: nowrap; + margin-left: 0; + } + + .sg-options-row__left { + order: 2; + box-shadow: inset 0 1px 0 var(--divider-options-row-mobile); + } + + .sg-options-row__left > .sg-pulldown-demo, + .sg-options-row__left > .sg-input-single-line-wrap, + .sg-options-row__left > .sg-search-field-row { + flex: 1 1 calc(50% - var(--layout-options-row-group-gap)); + min-width: 0; + } + +.sg-options-row__left > .sg-input-single-line-wrap, +.sg-options-row__left > .sg-search-field-row { + flex-basis: 100%; + } + + .sg-options-row .sg-search-field-input { + display: inline-flex; + align-items: stretch; + } + + .sg-options-row .sg-search-field-input .sg-input-single-line { + padding-right: var(--interaction-padding-horizontal); + } + + .sg-options-row .sg-search-field-input[data-has-value="true"] .sg-input-single-line { + border-radius: var(--radius-interaction) 0 0 var(--radius-interaction); + } + + .sg-options-row .sg-search-field-input .sg-input-clear-button { + position: static; + flex: 0 0 var(--interaction-height); + height: auto; + border-radius: 0 var(--radius-interaction) var(--radius-interaction) 0; + } + + .sg-options-row__left > .sg-input-single-line-wrap .sg-input-single-line, + .sg-options-row__left > .sg-pulldown-demo .sg-pulldown { + width: 100%; + } + + .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-panel { + width: min( + var(--layout-pulldown-panel-form-mobile-width), + calc(100vw - (2 * var(--spacing-large))) + ); + min-width: 0; + max-width: calc(100vw - (2 * var(--spacing-large))); + } + + .sg-options-row .sg-pulldown-panel .sg-form-sections-card-wrapper, + .sg-options-row .sg-pulldown-panel .sg-form-sections-card { + min-width: 0; + width: 100%; + max-width: 100%; + } + + .sg-pulldown-panel .sg-slider-row[data-activatable="true"] { + display: flex; + flex-wrap: wrap; + align-items: center; + column-gap: var(--spacing-large); + row-gap: var(--spacing-small); + } + + .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-label { + min-width: 100%; + flex: 0 0 100%; + } + + .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-slider { + min-width: 0; + max-width: 100%; + width: 100%; + flex: 1 1 0; + } + + .sg-pulldown-panel .sg-slider-row[data-activatable="true"] .sg-slider-value { + min-width: calc(var(--interaction-height) * 1.25); + align-self: center; + white-space: nowrap; + flex: 0 0 auto; + } + + .sg-pulldown-panel__row { + grid-template-columns: minmax(0, 1fr) var(--interaction-height); + } + + .sg-pulldown-panel__label { + grid-column: 1 / -1; + } +} + diff --git a/styles/22-patterns-object-card.css b/styles/22-patterns-object-card.css new file mode 100644 index 0000000..8a52384 --- /dev/null +++ b/styles/22-patterns-object-card.css @@ -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; +} + diff --git a/styles/23-patterns-object-group-card.css b/styles/23-patterns-object-group-card.css new file mode 100644 index 0000000..63aeea8 --- /dev/null +++ b/styles/23-patterns-object-group-card.css @@ -0,0 +1,42 @@ +/* ========================================================= */ +/* Patterns: Object Group Card */ +/* ========================================================= */ + +.sg-object-group-card__actions { + margin-top: auto; +} + +.sg-object-card[data-pattern="object-group-card"] { + flex: 1 1 var(--layout-object-group-card-min-width); + min-width: var(--layout-object-group-card-min-width); + max-width: var(--layout-object-group-card-max-width); +} + +.sg-object-group-card__hint { + color: var(--color-font-light); +} + +.sg-company-card__metric-negative { + color: var(--text-company-card-data-negative); +} + +.sg-company-card__analysis-title { + margin: 0; +} + +.sg-company-card__analysis-bars { + margin-top: 0; +} + +.sg-company-card__moat { + margin: 0; +} + +.sg-company-card__moat-neutral { + color: var(--text-company-card-moat-neutral); +} + +.sg-company-card__summary { + margin: 0; +} + diff --git a/styles/24-patterns-navigation-card.css b/styles/24-patterns-navigation-card.css new file mode 100644 index 0000000..d3d3420 --- /dev/null +++ b/styles/24-patterns-navigation-card.css @@ -0,0 +1,4 @@ +/* ========================================================= */ +/* Patterns: Navigation Card */ +/* ========================================================= */ + diff --git a/styles/25-patterns-form-sections.css b/styles/25-patterns-form-sections.css new file mode 100644 index 0000000..43fcfda --- /dev/null +++ b/styles/25-patterns-form-sections.css @@ -0,0 +1,261 @@ +/* ========================================================= */ +/* Patterns: Formular mit Abschnitten */ +/* ========================================================= */ + +.sg-form-sections-card { + display: flex; + flex-direction: column; + width: clamp( + var(--layout-object-card-max-width), + 65vw, + calc(var(--layout-object-card-max-width) * 1.3) + ); + max-width: 100%; +} + +.sg-form-sections-card-wrapper { + display: flex; + justify-content: center; + width: 100%; + height: auto; +} + +.sg-form-sections-card__body { + background: var(--surface-form-preview); + padding: var(--card-segment-padding-vertical) var(--card-segment-padding-horizontal); +} + +.sg-form-sections-card__title { + margin: 0 0 var(--spacing-large) 0; +} + +.sg-form-sections-card__actions-segment { + background: var(--surface-form-preview); + padding: 0 var(--card-segment-padding-horizontal) var(--card-segment-padding-vertical); +} + +.sg-form-sections-card__chapter + .sg-form-sections-card__chapter { + margin-top: var(--spacing-large); +} + +.sg-form-sections-card__chapter-title, +.sg-form-sections-card__sentence { + margin: 0; +} + +.sg-form-sections-card__sentence { + margin-top: var(--spacing-small); +} + +.sg-form-sections-card__option-group, +.sg-form-sections-card__field-group { + display: flex; + flex-direction: column; + gap: var(--spacing-small); + margin-top: var(--spacing-large); +} + +.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-form-sections-card__chapter > :not(.sg-form-sections-card__chapter-title) + :not(.sg-form-sections-card__chapter-title) { + margin-top: var(--spacing-large); +} + +.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-form-sections-card__chapter > .sg-form-sections-card__chapter-title + * { + margin-top: var(--spacing-large); +} + +.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-form-sections-card__chapter > .sg-slider-row + .sg-slider-row, +.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-form-sections-card__chapter > .sg-checkbox-field-option + .sg-checkbox-field-option, +.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-form-sections-card__chapter > .sg-radio-activatable-group + .sg-radio-activatable-group { + margin-top: var(--spacing-small); +} + +.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-form-sections-card__chapter > .sg-pulldown-panel__row + .sg-pulldown-panel__row { + margin-top: var(--spacing-large); +} + +.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] { + display: grid; + grid-template-columns: max-content max-content minmax(0, 1fr) auto; + align-items: center; + column-gap: var(--spacing-large); +} + +.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] .sg-mode-toggle { + grid-column: 1; +} + +.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] .sg-label { + grid-column: 2; + min-width: 0; +} + +.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] .sg-slider { + grid-column: 3; + min-width: 0; + width: 100%; + max-width: none; +} + +.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] .sg-slider-value { + grid-column: 4; + margin: 0; + min-width: 0; + line-height: 1; +} + +.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group { + display: grid; + grid-template-columns: max-content max-content minmax(0, 1fr); + align-items: center; + column-gap: var(--spacing-large); +} + +.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group > .sg-label { + grid-column: 2; + margin: 0; +} + +.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group > .sg-mode-toggle { + grid-column: 1; +} + +.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group > .sg-radio-activatable-group__choices { + grid-column: 3; +} + +.sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] { + grid-template-columns: max-content max-content minmax(0, 1fr); + column-gap: var(--spacing-large); +} + +.sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] > .sg-mode-toggle { + grid-column: 1; +} + +.sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] > .sg-pulldown-panel__label { + grid-column: 2; +} + +.sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] > .sg-pulldown { + grid-column: 3; +} + +.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-demo .sg-pulldown-panel { + min-width: 100%; + width: max-content; + max-width: calc(100vw - (2 * var(--spacing-large))); +} + +@media (max-width: 48rem) { + .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-pulldown-panel { + min-width: 100%; + width: max-content; + max-width: calc(100vw - (2 * var(--spacing-large))); + } + + .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] { + grid-template-columns: max-content minmax(0, 1fr) auto; + row-gap: var(--spacing-small); + } + + .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] .sg-mode-toggle { + grid-column: 1; + grid-row: 1; + } + + .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] .sg-label { + grid-column: 2; + grid-row: 1; + } + + .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] .sg-slider { + grid-column: 1 / 3; + grid-row: 2; + } + + .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] .sg-slider-value { + grid-column: 3; + grid-row: 2; + } + + .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group { + grid-template-columns: max-content minmax(0, 1fr); + row-gap: var(--spacing-small); + } + + .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group > .sg-label { + grid-column: 2; + grid-row: 1; + } + + .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group > .sg-mode-toggle { + grid-column: 1; + grid-row: 1; + } + + .sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group > .sg-radio-activatable-group__choices { + grid-column: 1 / -1; + grid-row: 2; + } + + .sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] { + grid-template-columns: max-content minmax(0, 1fr); + row-gap: var(--spacing-small); + } + + .sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] > .sg-mode-toggle { + grid-column: 1; + grid-row: 1; + } + + .sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] > .sg-pulldown-panel__label { + grid-column: 2; + grid-row: 1; + } + + .sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] > .sg-pulldown { + grid-column: 1 / -1; + grid-row: 2; + } +} + +.sg-form-sections-card__actions { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: var(--spacing-small); + width: 100%; + margin-top: 0; +} + +.sg-form-sections-card__action { + width: 100%; +} + +.sg-navigation-card-layout { + width: 100%; + margin-top: var(--spacing-large); +} + +.sg-navigation-card-block { + --surface-card: var(--surface-navigation-card); + --surface-card-body: var(--surface-navigation-card-body); + display: block; + flex: none; + min-width: 0; + max-width: none; + width: 100%; +} + +.sg-navigation-card-center { + display: flex; + align-items: center; + justify-content: center; + text-align: center; +} + +.sg-content-cards-group { + display: flex; + flex-direction: column; + gap: var(--layout-content-cards-group-gap); +} + diff --git a/styles/30-layouts-card-list-page.css b/styles/30-layouts-card-list-page.css new file mode 100644 index 0000000..94f8ba1 --- /dev/null +++ b/styles/30-layouts-card-list-page.css @@ -0,0 +1,186 @@ +/* ========================================================= */ +/* Layouts: Card Listen Seite */ +/* ========================================================= */ + +.sg-card-list-page { + display: flex; + flex-direction: column; +} + +.sg-card-list-page-drawer { + position: fixed; + top: 0; + right: 0; + bottom: 0; + width: var(--layout-card-list-drawer-width); + max-width: 100%; + display: flex; + flex-direction: column; + transform: translateX(100%); + transition: transform 220ms ease; + background: var(--surface-card-list-drawer); + color: var(--text-card-list-drawer); + box-shadow: var(--shadow-overlay); + z-index: 1000; + overflow-y: auto; +} + +.sg-card-list-page-drawer[data-open="true"] { + transform: translateX(0); +} + +.sg-card-list-page-drawer__header { + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--spacing-small); + padding: + var(--card-segment-padding-vertical) + var(--layout-page-content-inset-inline); +} + +.sg-card-list-page-drawer__title { + margin: 0; + color: inherit; +} + +.sg-card-list-page-drawer__content { + display: flex; + flex-direction: column; + gap: var(--spacing-large); + padding: + var(--card-segment-padding-vertical) + var(--layout-page-content-inset-inline) + var(--card-segment-padding-vertical) + var(--layout-page-content-inset-inline); +} + +.sg-card-list-page > * + * { + margin-top: var(--spacing-large); +} + +.sg-card-list-page > .sg-options-row { + margin-top: var(--spacing-large); +} + +.sg-card-list-page > .sg-card-list-page__intro-block { + margin-top: calc(var(--spacing-large) - 0.5rem); +} + +.sg-card-list-page__intro-block { + display: flex; + flex-direction: column; + gap: var(--spacing-large); +} + +.sg-card-list-page__title-row { + display: inline-flex; + align-items: center; + gap: var(--spacing-small); + width: fit-content; + max-width: 100%; +} + +.sg-card-list-page__intro-block .sg-text-layout-pattern__sample--sixty-width { + width: min(60vw, 100%); +} + +@media (max-width: 767px) { + .sg-card-list-page-drawer { + display: none; + } + + .sg-card-list-page__intro-block .sg-text-layout-pattern__sample--sixty-width { + width: 100%; + } +} + +.sg-card-list-page__object-grid, +.sg-card-list-page__navigation { + width: 100%; +} + +.sg-vsf-drawer-card { + --surface-card-header-primary: var(--surface-vsf-drawer-object-card-header); + --surface-card: var(--surface-vsf-drawer-object-card-body); + --surface-card-body: var(--surface-vsf-drawer-object-card-body); + --text-card-header: var(--text-vsf-drawer-object-card-heading); + --text-card-body: var(--text-vsf-drawer-object-card-body); + width: 100%; + min-width: 0; + max-width: none; + align-self: stretch; + height: auto; +} + +.sg-vsf-drawer-card__content { + color: var(--text-vsf-drawer-object-card-body); +} + +.sg-vsf-drawer-card .sg-text-layout-pattern__two-column, +.sg-vsf-drawer-card .sg-text-layout-pattern__column { + color: var(--text-vsf-drawer-object-card-body); +} + +.sg-vsf-drawer-card .sg-text-layout-pattern__two-column { + gap: var(--layout-vsf-drawer-object-card-column-gap); +} + +.sg-vsf-drawer-card__actions-segment { + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: flex-start; + gap: var(--spacing-large); + background: var(--surface-vsf-drawer-object-card-body); +} + +.sg-vsf-drawer-card__actions-segment .sg-interaction-element.sg-button { + height: auto; + width: 100%; +} + +#vsf-business-model-toggle.sg-interaction-element.sg-button { + background: var(--surface-portal-header-tab); + color: var(--text-portal-header-tab); +} + +.sg-inline-controls-card { + --surface-card-body: var(--surface-card-segment-neutral); +} + +.sg-card-segment.sg-inline-header-row { + flex-direction: row; + align-items: center; + justify-content: space-between; + gap: var(--spacing-small); +} + +.sg-card-segment.sg-inline-controls-row { + flex-direction: row; + align-items: center; + justify-content: flex-end; + gap: var(--spacing-small); + flex-wrap: nowrap; +} + +.sg-vsf-drawer-object-card__heading { + color: var(--text-vsf-drawer-object-card-heading); + margin: 0; +} + +.sg-analysis-intro-block { + display: flex; + flex-direction: column; + gap: var(--spacing-small); +} + +.sg-analysis-intro-block .sg-heading-h2 { + margin: 0; +} + +.sg-analysis-intro-block .sg-text-layout-pattern__sample { + margin: 0; + color: var(--text-vsf-drawer-object-card-body); +} + diff --git a/styles/31-patterns-text-layouts.css b/styles/31-patterns-text-layouts.css new file mode 100644 index 0000000..208f928 --- /dev/null +++ b/styles/31-patterns-text-layouts.css @@ -0,0 +1,81 @@ +/* ========================================================= */ +/* Patterns: Text Layouts */ +/* ========================================================= */ + +.sg-text-layout-pattern { + display: flex; + flex-direction: column; + gap: var(--spacing-small); +} + +.sg-text-layout-pattern__preview-surface { + width: 100%; + 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%; + 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%; + 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; +} + +.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__three-column-distributed[data-pattern-part="company-card-metrics-three-column"] { + grid-template-columns: var(--layout-text-layout-three-column-columns); + } +} + diff --git a/styles/32-patterns-card-group-keyboard-nav.css b/styles/32-patterns-card-group-keyboard-nav.css new file mode 100644 index 0000000..c3ba317 --- /dev/null +++ b/styles/32-patterns-card-group-keyboard-nav.css @@ -0,0 +1,44 @@ +/* ========================================================= */ +/* Patterns: Card Gruppe mit Tastennavigation */ +/* ========================================================= */ + +.sg-content-block-card-group { + display: flex; + flex-direction: column; + gap: var(--spacing-small); + width: 100%; + --surface-tab-unselected: var(--color-white); +} + +.sg-content-block-card-group__tabs, +.sg-content-block-card-group__panels, +.sg-content-block-card-group__panel, +.sg-content-block-card-group__card { + width: 100%; +} + +.sg-content-block-card-group__panel[hidden] { + display: none; +} + +.sg-content-block-card-group__title { + color: var(--text-content-block-card-title); + background: var(--surface-content-block-card-title); +} + +.sg-content-block-card-group__content { + color: var(--text-content-block-card-content); + background: var(--surface-content-block-card-content); +} + +.sg-content-block-card-group__content .sg-body { + margin: 0; +} + +@media (max-width: 767px) { + .sg-content-block-card-group__tabs[role="tablist"] > [role="tab"] { + flex: 1 1 0; + min-width: max-content; + } +} + diff --git a/styles/40-components-cards.css b/styles/40-components-cards.css new file mode 100644 index 0000000..c3e8478 --- /dev/null +++ b/styles/40-components-cards.css @@ -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); +} + diff --git a/styles/41-components-charts.css b/styles/41-components-charts.css new file mode 100644 index 0000000..86e2067 --- /dev/null +++ b/styles/41-components-charts.css @@ -0,0 +1,261 @@ +/* ========================================================= */ +/* Components: Charts */ +/* ========================================================= */ + +.sg-score-bar-list { + display: grid; + grid-template-columns: var(--layout-score-bar-item-columns); + column-gap: var(--layout-score-bar-item-gap); + row-gap: var(--spacing-small); + align-items: center; + width: 100%; +} + +.sg-score-bar-item { + display: contents; +} + +.sg-score-bar-list--single-score { + --layout-score-bar-item-columns: var(--layout-score-bar-item-single-score-columns); +} + +.sg-score-state--positive { + margin: 0; + justify-self: end; + text-align: right; + color: var(--text-score-state-positive); +} + +.sg-score-bar-label { + margin: 0; + color: var(--text-chart-default); +} + +.sg-score-bar { + position: relative; + height: var(--score-bar-height); + overflow: visible; + border-radius: var(--radius-graph-bar); + background: var(--surface-score-bar-track); +} + +.sg-score-bar--marker-mid { + --score-marker-position: 50%; +} + +.sg-score-bar__value { + height: 100%; + border-radius: var(--radius-graph-bar); +} + +.sg-score-bar__value--w96 { width: 96%; } +.sg-score-bar__value--w64 { width: 64%; } +.sg-score-bar__value--w35 { width: 35%; } + +.sg-score-bar__value--positive { background: var(--chart-value-positive); } +.sg-score-bar__value--neutral { background: var(--chart-value-neutral); } +.sg-score-bar__value--negative { background: var(--chart-value-negative); } + +.sg-score-bar__median-marker { + position: absolute; + top: 50%; + left: var(--score-marker-position); + width: var(--score-marker-width); + height: var(--score-marker-height); + border-radius: 0; + background: var(--chart-marker-line); + transform: translate(-50%, -50%); +} + +.sg-score-bar__median-marker--outline { + border: var(--chart-grid-line-width) solid var(--chart-marker-line); + background: transparent; +} + +.sg-chart-preview-area { + min-width: var(--layout-object-card-min-width); + max-width: var(--layout-object-card-max-width); + width: 100%; +} + +.sg-bar-chart { + display: block; + width: 100%; + box-sizing: border-box; + padding: 0; + background: var(--surface-chart-area); + color: var(--text-chart-default); +} + +.sg-chart-frame { + display: grid; + grid-template-columns: min-content 1fr; + column-gap: var(--chart-axis-label-gap); + height: calc(var(--chart-height-bar) * 0.7); +} + +.sg-chart-y-labels { + position: relative; + width: min-content; + margin: 0; + padding: 0; + list-style: none; + color: var(--text-chart-default); + text-align: right; + pointer-events: none; +} + +.sg-chart-y-labels li { + position: absolute; + white-space: nowrap; + right: 0; + top: var(--chart-label-position); + transform: translateY(-50%); +} + +.sg-chart-x-labels { + display: grid; + grid-template-columns: repeat(10, 1fr); + margin: var(--spacing-small) 0 var(--spacing-large) 0; + padding: 0 0 0 calc(var(--interaction-height) + var(--chart-axis-label-gap)); + list-style: none; + color: var(--text-chart-default); + text-align: center; +} + +.sg-chart-x-labels--line { + position: relative; + display: block; + height: var(--spacing-large); + grid-template-columns: none; +} + +.sg-chart-x-labels--line li { + position: absolute; + left: var(--chart-label-position); + transform: translateX(-50%); +} + +.sg-chart-y-labels li, +.sg-chart-x-labels li { + font-family: var(--font-family-base); + font-size: var(--font-size-small); + font-weight: var(--font-weight-regular); + line-height: var(--line-height-base); +} + +.sg-bar-chart__svg, +.sg-line-chart__svg { + display: block; + width: 100%; + height: 100%; + overflow: hidden; +} + +.sg-bar-chart__grid-line, +.sg-line-chart__grid-line { + stroke: var(--chart-grid-line); + stroke-width: var(--chart-grid-line-width); +} + +.sg-bar-chart__axis-line, +.sg-line-chart__axis-line { + stroke: var(--chart-axis-line); + stroke-width: var(--chart-grid-line-width); +} + +.sg-bar-chart__bar { + rx: var(--radius-graph-bar); + ry: var(--radius-graph-bar); +} + +.sg-bar-chart__bar--value { fill: var(--chart-value-primary); } +.sg-bar-chart__bar--median { fill: var(--chart-value-reference); } +.sg-bar-chart__label, +.sg-line-chart__label { display: none; } + +.sg-bar-chart__legend, +.sg-line-chart__legend { + display: flex; + gap: var(--spacing-large); + padding-left: 0; + margin-left: 0; +} + +.sg-bar-chart__legend { + flex-wrap: wrap; + margin-top: 0; + color: var(--text-chart-default); +} + +.sg-line-chart__legend { + margin-top: var(--spacing-large); +} + +.sg-bar-chart__legend-item, +.sg-line-chart__legend-item { + display: inline-flex; + align-items: center; + gap: var(--spacing-small); + color: var(--text-chart-default); + font-family: var(--font-family-base); + font-size: var(--font-size-small); + font-weight: var(--font-weight-regular); + line-height: var(--line-height-base); +} + +.sg-bar-chart__legend-swatch { + display: inline-block; + width: var(--interaction-height); + height: var(--interaction-height); + border-radius: var(--radius-interaction); +} + +.sg-bar-chart__legend-swatch--value { background: var(--chart-value-primary); } +.sg-bar-chart__legend-swatch--median { background: var(--chart-value-reference); } + +.sg-line-chart { + width: 100%; + box-sizing: border-box; + padding: 0; + background: var(--surface-chart-area); + color: var(--text-chart-default); +} + +.sg-chart-frame--line { + height: calc(var(--chart-height-line) * 0.7); +} + +.sg-line-chart__line { + fill: none; + stroke: var(--chart-value-primary); + stroke-width: var(--chart-line-width); + stroke-linecap: round; + stroke-linejoin: round; +} + +.sg-line-chart__median-line { + fill: none; + stroke: var(--chart-median-line); + stroke-width: var(--chart-grid-line-width); + stroke-dasharray: var(--sandwich-line-height) var(--sandwich-line-height); +} + +.sg-line-chart__legend-line { + display: inline-block; + width: var(--spacing-large); + height: var(--chart-line-width); + background: var(--chart-value-primary); +} + +.sg-line-chart__legend-line--median { + height: var(--chart-grid-line-width); + background: repeating-linear-gradient( + to right, + var(--chart-median-line) 0, + var(--chart-median-line) var(--sandwich-line-height), + transparent var(--sandwich-line-height), + transparent calc(var(--sandwich-line-height) * 2) + ); +} + diff --git a/styles/42-components-data-display.css b/styles/42-components-data-display.css new file mode 100644 index 0000000..bf6af2a --- /dev/null +++ b/styles/42-components-data-display.css @@ -0,0 +1,69 @@ +/* ========================================================= */ +/* Components: Data Display */ +/* ========================================================= */ + +.sg-data-table { + --data-table-column-count: 3; + width: 100%; + border-collapse: collapse; + background: var(--surface-data-table); + table-layout: fixed; +} + +.sg-data-table th, +.sg-data-table td { + width: calc(100% / var(--data-table-column-count)); + padding: 0 0 var(--spacing-small) 0; + border: var(--border-none); + text-align: left; + vertical-align: top; +} + +.sg-data-table[data-component="data-columns"] { + --data-table-column-count: 2; +} + +.sg-data-table th { + font-family: var(--font-family-base); + font-size: var(--font-size-small); + font-weight: var(--font-weight-regular); + line-height: var(--line-height-base); + color: var(--text-data-table-default); + background: var(--surface-data-table-header); +} + +.sg-data-table td { + font-family: var(--font-family-base); + font-size: var(--font-size-base); + font-weight: var(--font-weight-regular); + line-height: var(--line-height-base); + color: var(--text-data-table-default); + background: var(--surface-data-table-cell); +} + +.sg-data-table__label, +.sg-data-table__value { + font-weight: var(--font-weight-semibold); +} + +.sg-data-table__value--warning { + color: var(--text-data-table-warning); +} + +.sg-data-table__help-icon { + display: inline-flex; + align-items: center; + justify-content: center; + width: var(--small-interaction-element-size); + height: var(--small-interaction-element-size); + border: var(--border-none); + border-radius: 50%; + box-shadow: var(--shadow-none); + font-family: var(--font-family-base); + font-size: var(--font-size-small); + font-weight: var(--font-weight-semibold); + line-height: 1; + color: var(--text-data-table-help-icon); + background: var(--surface-data-table-help-icon); +} + diff --git a/styles/43-components-typography.css b/styles/43-components-typography.css new file mode 100644 index 0000000..c8f8855 --- /dev/null +++ b/styles/43-components-typography.css @@ -0,0 +1,17 @@ +/* ========================================================= */ +/* Components: Typography */ +/* ========================================================= */ + +.sg-typography-preview { + display: flex; + flex-direction: column; + gap: var(--spacing-small); + color: var(--text-typography-preview); +} + +.sg-typography-preview h1, +.sg-typography-preview h2, +.sg-typography-preview p { + color: var(--text-typography-preview); + margin-top: 0; +}