4351 lines
119 KiB
CSS
4351 lines
119 KiB
CSS
/* ========================================================= */
|
|
/* 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-black: #000000;
|
|
--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-label-column-width-fallback: max-content;
|
|
--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-form-input-field-max-width: calc(var(--layout-input-field-max-width) + 100px);
|
|
--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);
|
|
--text-score-state-warning: var(--chart-value-neutral);
|
|
--text-score-state-neutral: var(--text-score-state-warning);
|
|
--text-score-state-negative: var(--chart-value-negative);
|
|
--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);
|
|
--dimension-notifications-card-min-width: 445px;
|
|
--layout-notifications-card-flex-basis: var(--dimension-notifications-card-min-width);
|
|
--layout-notifications-card-min-width: var(--dimension-notifications-card-min-width);
|
|
--layout-notifications-card-max-width: var(--layout-object-card-max-width);
|
|
--dimension-notifications-text-segment-fixed-height: 150px;
|
|
--dimension-notifications-text-segment-fixed-height-small: 60px;
|
|
--layout-notifications-text-segment-fixed-height: var(--dimension-notifications-text-segment-fixed-height);
|
|
--layout-notifications-text-segment-fixed-height-small: var(--dimension-notifications-text-segment-fixed-height-small);
|
|
--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);
|
|
--layout-object-group-card-height: var(--dimension-object-group-card-height);
|
|
--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);
|
|
--text-vsf-list-card-limit-note: var(--color-signal-red);
|
|
--layout-vsf-list-card-summary-offset-block-start: var(--layout-company-card-analysis-gap-after-moat);
|
|
--layout-vsf-list-card-delete-confirmation-target-max-width: var(--layout-object-group-card-max-width);
|
|
--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;
|
|
--surface-delete-confirmation-overlay: var(--color-light-grey);
|
|
--surface-delete-confirmation-target-dim-overlay: var(--color-black);
|
|
--text-delete-confirmation-overlay: var(--color-font-dark);
|
|
--layout-delete-confirmation-target-max-width: 35rem;
|
|
--layout-delete-confirmation-overlay-width-factor: 0.8;
|
|
--layout-delete-confirmation-overlay-offset-block-start: 10%;
|
|
--layout-delete-confirmation-overlay-max-height: calc(100vh - 10vh);
|
|
--layout-delete-confirmation-content-gap: var(--spacing-small);
|
|
--layout-delete-confirmation-actions-gap: var(--spacing-small);
|
|
--layout-delete-confirmation-actions-offset-block-start: var(--spacing-large);
|
|
--layout-delete-confirmation-label-width: var(--dimension-input-label-width);
|
|
--layout-delete-confirmation-target-dim-opacity: 0.5;
|
|
--layer-delete-confirmation-overlay: 50;
|
|
|
|
/* 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: 450px;
|
|
--dimension-object-group-card-max-width: 650px;
|
|
--dimension-object-group-card-height: 700px;
|
|
--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-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);
|
|
}
|
|
|
|
:root {
|
|
--color-darkblue: #354A52;
|
|
--font-family-base: "Avenir", sans-serif;
|
|
}
|
|
|
|
/* ========================================================= */
|
|
/* 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;
|
|
}
|
|
|
|
.sg-body:not(:last-child) {
|
|
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-active);
|
|
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-variant="linksmenu-items"] {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
width: 100%;
|
|
}
|
|
|
|
.sg-tab-button-group[data-component-variant="linksmenu-items"] .sg-tab-button {
|
|
width: 100%;
|
|
justify-content: flex-start;
|
|
text-align: left;
|
|
}
|
|
|
|
.sg-tab-button-group[data-component-context="content"] {
|
|
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-group[data-component="tab-navigation"][data-component-size="large"] .sg-tab-button[aria-selected="true"] {
|
|
background: var(--surface-tab-unselected);
|
|
color: var(--text-tab-unselected);
|
|
}
|
|
|
|
.sg-tab-button-group[data-component="tab-navigation"][data-component-size="large"] .sg-tab-button[aria-selected="false"] {
|
|
background: var(--surface-tab-selected);
|
|
color: var(--text-tab-selected);
|
|
}
|
|
|
|
.sg-tab-button-group[data-component="tab-navigation"][data-component-size="large"][data-component-context="content"] .sg-tab-button[aria-selected="true"] {
|
|
background: var(--surface-control-default);
|
|
color: var(--text-control-default);
|
|
}
|
|
|
|
.sg-tab-button-group[data-component="tab-navigation"][data-component-size="large"][data-component-context="content"] .sg-tab-button[aria-selected="false"] {
|
|
background: var(--surface-tab-compact-unselected);
|
|
color: var(--text-control-default);
|
|
}
|
|
|
|
.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 {
|
|
display: block;
|
|
width: 100%;
|
|
min-width: 0;
|
|
text-align: left;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.sg-pulldown-demo[data-component-context="form"],
|
|
.sg-pulldown-demo[data-component-context="overlay"] {
|
|
width: 100%;
|
|
min-width: 0;
|
|
max-width: var(--layout-input-field-max-width);
|
|
}
|
|
|
|
.sg-pulldown-demo[data-component-context="form"] .sg-pulldown-demo__trigger,
|
|
.sg-pulldown-demo[data-component-context="overlay"] .sg-pulldown-demo__trigger {
|
|
width: 100%;
|
|
min-width: 0;
|
|
max-width: var(--layout-input-field-max-width);
|
|
}
|
|
|
|
.sg-pulldown--selected {
|
|
background-color: var(--surface-control-active);
|
|
color: var(--text-control-default);
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.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-labeled-input-row .sg-pulldown-demo,
|
|
.sg-labeled-input-row .sg-pulldown-demo .sg-pulldown {
|
|
width: 100%;
|
|
min-width: 0;
|
|
max-width: var(--layout-input-field-max-width);
|
|
}
|
|
|
|
.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: 0;
|
|
width: auto;
|
|
max-width: none;
|
|
}
|
|
|
|
.sg-labeled-input-row .sg-label {
|
|
min-width: 0;
|
|
flex: 0 0 auto;
|
|
margin-right: var(--spacing-large);
|
|
}
|
|
|
|
.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-form-input-field-max-width);
|
|
}
|
|
|
|
.sg-input-validation-stack {
|
|
display: flex;
|
|
flex: 1 1 auto;
|
|
flex-direction: column;
|
|
gap: var(--spacing-small);
|
|
min-width: 0;
|
|
max-width: var(--layout-form-input-field-max-width);
|
|
}
|
|
|
|
.sg-input-validation-stack .sg-input-single-line,
|
|
.sg-input-validation-stack .sg-input-multi-line {
|
|
width: 100%;
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.sg-form-validation-text {
|
|
margin: 0;
|
|
color: var(--text-vsf-list-card-limit-note);
|
|
font-family: var(--font-family-base);
|
|
font-size: var(--font-size-small);
|
|
line-height: var(--line-height-base);
|
|
}
|
|
|
|
.sg-input-single-line[aria-invalid="true"],
|
|
.sg-input-multi-line[aria-invalid="true"] {
|
|
box-shadow: 0 0 0 1px var(--color-signal-red) inset;
|
|
}
|
|
|
|
.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: max-content minmax(0, 1fr);
|
|
align-items: center;
|
|
column-gap: var(--spacing-large);
|
|
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-labeled-input-row {
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
gap: var(--spacing-small);
|
|
width: 100%;
|
|
max-width: 100%;
|
|
}
|
|
|
|
#component-pulldown .sg-labeled-input-row .sg-label {
|
|
min-width: 0;
|
|
flex: 0 0 auto;
|
|
margin-right: 0;
|
|
margin-bottom: 0;
|
|
line-height: 1;
|
|
}
|
|
|
|
#component-pulldown .sg-labeled-input-row .sg-pulldown-demo,
|
|
#component-pulldown .sg-labeled-input-row .sg-pulldown {
|
|
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;
|
|
gap: var(--spacing-small);
|
|
width: 100%;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.sg-labeled-input-row .sg-label {
|
|
min-width: 0;
|
|
flex: 0 0 auto;
|
|
margin-right: 0;
|
|
margin-bottom: 0;
|
|
line-height: 1;
|
|
}
|
|
|
|
.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-size: var(--font-size-small);
|
|
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 {
|
|
display: block;
|
|
width: calc(var(--sandwich-line-width) - 3px);
|
|
height: calc(var(--sandwich-line-width) - 3px);
|
|
background: url("../assets/icons/star-filled.svg") no-repeat center / contain;
|
|
}
|
|
|
|
.sg-sandwich-menu-wrap[data-component-size="small"] .sg-sandwich-button__line {
|
|
display: none;
|
|
}
|
|
|
|
.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: var(--layer-pulldown-panel);
|
|
}
|
|
|
|
.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);
|
|
max-width: calc(100vw - (2 * var(--spacing-large)));
|
|
box-sizing: border-box;
|
|
overflow-wrap: anywhere;
|
|
padding: var(--spacing-large);
|
|
border-radius: var(--radius-card);
|
|
color: var(--text-help-panel);
|
|
background: var(--surface-help-panel);
|
|
box-shadow: var(--shadow-overlay);
|
|
}
|
|
|
|
@supports (width: 100dvw) {
|
|
.sg-help-icon-panel {
|
|
width: min(var(--layout-help-panel-width), calc(100dvw - (2 * var(--spacing-large))));
|
|
max-width: calc(100dvw - (2 * var(--spacing-large)));
|
|
}
|
|
}
|
|
|
|
.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);
|
|
width: max-content;
|
|
max-width: min(
|
|
var(--layout-multiselect-pulldown-panel-desktop-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);
|
|
}
|
|
|
|
@supports (width: 100dvw) {
|
|
.sg-pulldown-panel {
|
|
max-width: min(
|
|
var(--layout-multiselect-pulldown-panel-desktop-width),
|
|
calc(100dvw - (2 * var(--spacing-large)))
|
|
);
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
@media (max-width: 48rem) {
|
|
.sg-pulldown-panel {
|
|
min-width: 0;
|
|
}
|
|
|
|
.sg-pulldown-demo[data-component-context="overlay"] .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: flex-start;
|
|
padding-block: var(--interaction-padding-vertical);
|
|
padding-inline: var(--layout-pulldown-option-padding-inline);
|
|
border-radius: var(--radius-interaction);
|
|
white-space: normal;
|
|
overflow-wrap: anywhere;
|
|
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);
|
|
}
|
|
|
|
#component-radio-field .sg-radio-field-row--without-label > .sg-radio-activatable-group__choices {
|
|
margin-left: 0;
|
|
}
|
|
|
|
@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);
|
|
--surface-tab-unselected: var(--surface-portal-header-tab-active);
|
|
--text-tab-selected: var(--text-portal-header-tab);
|
|
--text-tab-unselected: var(--text-portal-header-tab-active);
|
|
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);
|
|
}
|
|
}
|
|
|
|
@media (max-width: 48rem) {
|
|
.sg-portal-header__brand {
|
|
font-size: calc(var(--font-size-portal-header-brand) * 0.8);
|
|
}
|
|
}
|
|
|
|
/* ========================================================= */
|
|
/* 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-only {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.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-only {
|
|
flex-direction: row;
|
|
gap: var(--layout-options-row-main-gap);
|
|
padding:
|
|
var(--card-segment-padding-vertical)
|
|
var(--layout-page-content-inset-inline);
|
|
}
|
|
|
|
.sg-options-row--left-only .sg-options-row__left {
|
|
order: 0;
|
|
padding: 0;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.sg-object-card--variable-height {
|
|
height: auto;
|
|
}
|
|
|
|
/* ========================================================= */
|
|
/* 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);
|
|
height: var(--layout-object-group-card-height);
|
|
}
|
|
|
|
.sg-list-group-card--height-600 .sg-object-card[data-pattern="object-group-card"] {
|
|
height: var(--layout-object-card-height);
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.sg-object-card[data-pattern="object-group-card"] {
|
|
height: auto;
|
|
}
|
|
|
|
.sg-list-group-card--height-600 .sg-object-card[data-pattern="object-group-card"] {
|
|
height: auto;
|
|
}
|
|
}
|
|
|
|
.sg-object-group-card__hint {
|
|
color: var(--color-font-light);
|
|
}
|
|
|
|
.sg-company-card__header-title {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--spacing-large);
|
|
min-width: 0;
|
|
}
|
|
|
|
.sg-company-card__header-star {
|
|
display: inline-block;
|
|
flex: 0 0 auto;
|
|
inline-size: 1em;
|
|
block-size: 1em;
|
|
background: url("../assets/icons/star-filled-white.svg") no-repeat center / contain;
|
|
}
|
|
|
|
.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-row {
|
|
display: contents;
|
|
}
|
|
|
|
.sg-company-card__moat-value {
|
|
justify-self: start;
|
|
text-align: left;
|
|
}
|
|
|
|
.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 {
|
|
--layout-form-sections-label-column-width: var(--layout-input-label-width);
|
|
--layout-form-sections-interaction-indent: calc(
|
|
var(--layout-form-sections-label-column-width) + var(--spacing-large)
|
|
);
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
background: var(--surface-form-preview);
|
|
min-width: min(
|
|
100%,
|
|
calc(var(--layout-form-sections-label-column-width) + var(--spacing-small) + var(--layout-input-field-desktop-width))
|
|
);
|
|
max-width: calc(
|
|
var(--layout-form-sections-label-column-width) + var(--spacing-small) + var(--layout-form-input-field-max-width)
|
|
);
|
|
}
|
|
|
|
.sg-form-sections-card-wrapper {
|
|
display: flex;
|
|
justify-content: center;
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
.sg-form-sections-card__body {
|
|
padding: 0;
|
|
}
|
|
|
|
.sg-form-sections-card__title {
|
|
margin: 0 0 var(--spacing-large) 0;
|
|
}
|
|
|
|
.sg-form-sections-card__actions-segment {
|
|
margin-top: calc(var(--spacing-large) - var(--card-segment-padding-vertical));
|
|
padding: 0;
|
|
}
|
|
|
|
.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-form-sections-card__field-group {
|
|
gap: var(--spacing-large);
|
|
}
|
|
|
|
.sg-form-sections-card .sg-labeled-input-row .sg-label {
|
|
min-width: var(--layout-form-sections-label-column-width);
|
|
flex: 0 0 var(--layout-form-sections-label-column-width);
|
|
margin-right: var(--spacing-large);
|
|
}
|
|
|
|
.sg-form-sections-card__option-group,
|
|
.sg-form-sections-card__actions {
|
|
padding-left: var(--layout-form-sections-interaction-indent);
|
|
}
|
|
|
|
.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-pulldown-panel {
|
|
--sg-multiselect-label-column-width: var(--layout-multiselect-pulldown-label-column-width-fallback);
|
|
}
|
|
|
|
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] > .sg-label,
|
|
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group > .sg-label,
|
|
.sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] > .sg-pulldown-panel__label {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"] {
|
|
display: grid;
|
|
grid-template-columns: max-content var(--sg-multiselect-label-column-width) 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-slider-row--inactive-selectable {
|
|
opacity: 1;
|
|
}
|
|
|
|
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"].sg-slider-row--inactive-selectable .sg-slider {
|
|
opacity: var(--disabled-opacity);
|
|
}
|
|
|
|
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"].sg-slider-row--inactive-selectable .sg-label,
|
|
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"].sg-slider-row--inactive-selectable .sg-slider-value,
|
|
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group[data-component-state="inactive-selectable"] > .sg-label,
|
|
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group[data-component-state="inactive-selectable"] > .sg-radio-activatable-group__choices {
|
|
opacity: var(--disabled-opacity);
|
|
}
|
|
|
|
.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-slider-row[data-activatable="true"] {
|
|
-webkit-tap-highlight-color: transparent;
|
|
}
|
|
|
|
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group {
|
|
display: grid;
|
|
grid-template-columns: max-content var(--sg-multiselect-label-column-width) 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"] .sg-radio-activatable-group[data-component-state="inactive-selectable"] > .sg-radio-activatable-group__choices {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-slider-row[data-activatable="true"].sg-slider-row--inactive-selectable > :not(.sg-mode-toggle),
|
|
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group[data-component-state="inactive-selectable"] > :not(.sg-mode-toggle),
|
|
.sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row].sg-pulldown-panel__row--disabled > :not(.sg-mode-toggle) {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] {
|
|
grid-template-columns: max-content var(--sg-multiselect-label-column-width) 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"] [data-pulldown-filter-row].sg-pulldown-panel__row--disabled {
|
|
opacity: 1;
|
|
}
|
|
|
|
.sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row].sg-pulldown-panel__row--disabled > .sg-pulldown-panel__label,
|
|
.sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row].sg-pulldown-panel__row--disabled > .sg-pulldown {
|
|
opacity: var(--disabled-opacity);
|
|
}
|
|
|
|
.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-label,
|
|
.sg-options-row[data-pattern="multiselektions-pulldown"] .sg-radio-activatable-group > .sg-label,
|
|
.sg-options-row[data-pattern="multiselektions-pulldown"] [data-pulldown-filter-row] > .sg-pulldown-panel__label {
|
|
white-space: normal;
|
|
}
|
|
|
|
.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: flex;
|
|
width: 100%;
|
|
justify-content: flex-end;
|
|
gap: var(--spacing-small);
|
|
margin-top: 0;
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
|
|
.sg-form-sections-card__action {
|
|
width: auto;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
@media (max-width: 48rem) {
|
|
.sg-form-sections-card .sg-labeled-input-row .sg-label {
|
|
min-width: 0;
|
|
flex: 0 0 auto;
|
|
margin-right: 0;
|
|
}
|
|
|
|
.sg-form-sections-card__option-group {
|
|
padding-left: 0;
|
|
}
|
|
}
|
|
|
|
/* ========================================================= */
|
|
/* Patterns: VSF List Card */
|
|
/* ========================================================= */
|
|
|
|
#layout-vsf-list-card .sg-vsf-list-card-limit-note {
|
|
margin: 0 0 var(--space-16) 0;
|
|
color: var(--text-vsf-list-card-limit-note);
|
|
}
|
|
|
|
#layout-vsf-list-card .sg-vsf-list-card__summary {
|
|
margin: var(--layout-vsf-list-card-summary-offset-block-start) 0 0 0;
|
|
}
|
|
|
|
.sg-vsf-list-card-context[data-pattern="overlay-card"] {
|
|
--layout-delete-confirmation-target-max-width: var(--layout-vsf-list-card-delete-confirmation-target-max-width);
|
|
}
|
|
|
|
/* ========================================================= */
|
|
/* Patterns: Overlay Card */
|
|
/* ========================================================= */
|
|
|
|
.sg-delete-confirmation-pattern {
|
|
width: 100%;
|
|
max-width: var(--layout-delete-confirmation-target-max-width);
|
|
}
|
|
|
|
.sg-delete-confirmation-pattern__stage {
|
|
position: relative;
|
|
}
|
|
|
|
.sg-delete-confirmation-pattern__host {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.sg-delete-confirmation-pattern__host > .sg-delete-confirmation-pattern__target {
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
.sg-delete-confirmation-pattern__target {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.sg-delete-confirmation-pattern__target::after {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 0;
|
|
background: var(--surface-delete-confirmation-target-dim-overlay);
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.sg-delete-confirmation-pattern__stage[data-dialog-open="true"] .sg-delete-confirmation-pattern__target::after {
|
|
opacity: var(--layout-delete-confirmation-target-dim-opacity);
|
|
}
|
|
|
|
.sg-delete-confirmation-pattern__floating-card {
|
|
position: absolute;
|
|
top: var(--layout-delete-confirmation-overlay-offset-block-start);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: calc(100% * var(--layout-delete-confirmation-overlay-width-factor));
|
|
box-sizing: border-box;
|
|
max-width: calc(100% * var(--layout-delete-confirmation-overlay-width-factor));
|
|
max-height: var(--layout-delete-confirmation-overlay-max-height);
|
|
overflow: auto;
|
|
z-index: var(--layer-delete-confirmation-overlay);
|
|
box-shadow: var(--shadow-overlay);
|
|
}
|
|
|
|
.sg-delete-confirmation-pattern__floating-card[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.sg-delete-confirmation-pattern__body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--layout-delete-confirmation-content-gap);
|
|
background: var(--surface-delete-confirmation-overlay);
|
|
}
|
|
|
|
.sg-delete-confirmation-pattern__list {
|
|
display: grid;
|
|
gap: var(--spacing-small);
|
|
margin: 0;
|
|
margin-top: var(--spacing-large);
|
|
padding: 0;
|
|
list-style: none;
|
|
}
|
|
|
|
.sg-delete-confirmation-pattern__list-item {
|
|
margin: 0;
|
|
}
|
|
|
|
.sg-delete-confirmation-pattern__list-button {
|
|
display: inline-flex;
|
|
width: 100%;
|
|
justify-content: flex-start;
|
|
gap: var(--spacing-small);
|
|
font-weight: var(--font-weight-regular);
|
|
color: var(--text-delete-confirmation-overlay);
|
|
background: var(--surface-control-inactive);
|
|
}
|
|
|
|
.sg-delete-confirmation-pattern__list-button[data-selected="true"] {
|
|
background: var(--surface-control-active);
|
|
}
|
|
|
|
.sg-delete-confirmation-pattern__list-button[data-selected="false"] {
|
|
background: var(--surface-control-inactive);
|
|
}
|
|
|
|
.sg-delete-confirmation-pattern__list-icon {
|
|
display: block;
|
|
flex: 0 0 auto;
|
|
width: 1rem;
|
|
height: 1rem;
|
|
background: center / contain no-repeat;
|
|
}
|
|
|
|
.sg-delete-confirmation-pattern__list-button[data-selected="true"] .sg-delete-confirmation-pattern__list-icon {
|
|
background-image: url("../assets/icons/star-filled.svg");
|
|
}
|
|
|
|
.sg-delete-confirmation-pattern__list-button[data-selected="false"] .sg-delete-confirmation-pattern__list-icon {
|
|
background-image: url("../assets/icons/star-outline.svg");
|
|
}
|
|
|
|
.sg-delete-confirmation-pattern__create-list-form {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.sg-delete-confirmation-pattern__create-list-segment {
|
|
gap: 0;
|
|
}
|
|
|
|
.sg-delete-confirmation-pattern__create-list-title {
|
|
margin: 0 0 var(--spacing-large) 0;
|
|
}
|
|
|
|
.sg-delete-confirmation-pattern__create-list-form[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.sg-delete-confirmation-pattern__create-list-segment[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.sg-delete-confirmation-pattern__text {
|
|
margin: 0;
|
|
color: var(--text-delete-confirmation-overlay);
|
|
}
|
|
|
|
.sg-delete-confirmation-pattern__code {
|
|
font-weight: var(--font-weight-semibold);
|
|
}
|
|
|
|
.sg-delete-confirmation-pattern__input-row {
|
|
margin: var(--spacing-large) 0 0 0;
|
|
}
|
|
|
|
.sg-delete-confirmation-pattern__actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: var(--layout-delete-confirmation-actions-gap);
|
|
margin-top: var(--layout-delete-confirmation-actions-offset-block-start);
|
|
}
|
|
|
|
@media (max-width: 48rem) {
|
|
.sg-delete-confirmation-pattern__actions {
|
|
flex-wrap: wrap;
|
|
}
|
|
}
|
|
|
|
/* ========================================================= */
|
|
/* Patterns: Notifications */
|
|
/* ========================================================= */
|
|
|
|
.sg-notifications-pattern {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--spacing-small);
|
|
align-items: flex-start;
|
|
width: 100%;
|
|
}
|
|
|
|
.sg-notifications-pattern__card {
|
|
flex: 0 0 100%;
|
|
width: 100%;
|
|
min-width: 0;
|
|
max-width: none;
|
|
}
|
|
|
|
/* Dokumentierte Pattern-Variante: Notifications innerhalb Group Card */
|
|
.sg-notifications-pattern.sg-group-card > .sg-notifications-pattern__card {
|
|
flex: 0 0 100%;
|
|
width: 100%;
|
|
min-width: 0;
|
|
max-width: none;
|
|
}
|
|
|
|
.sg-notifications-pattern.sg-notifications-pattern--multi-row .sg-notifications-pattern__card {
|
|
flex: 0 0 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.sg-notifications-pattern__card > .sg-notifications-pattern__text-segment {
|
|
height: auto;
|
|
}
|
|
|
|
.sg-notifications-pattern__card > .sg-notifications-pattern__title-segment {
|
|
height: auto;
|
|
}
|
|
|
|
.sg-notifications-pattern__card > .sg-notifications-pattern__text-segment.sg-notifications-pattern__text-segment--small {
|
|
height: auto;
|
|
}
|
|
|
|
.sg-vsf-meldungen-layout {
|
|
display: grid;
|
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
gap: var(--spacing-small);
|
|
align-items: start;
|
|
width: 100%;
|
|
}
|
|
|
|
.sg-vsf-meldungen-layout > .sg-group-card {
|
|
min-width: 0;
|
|
}
|
|
|
|
.sg-vsf-meldungen-mobile {
|
|
display: none;
|
|
}
|
|
|
|
.sg-vsf-meldungen-mobile__panels {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-small);
|
|
width: 100%;
|
|
}
|
|
|
|
.sg-vsf-meldungen-mobile__panel {
|
|
width: 100%;
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.sg-vsf-meldungen-layout {
|
|
display: none;
|
|
}
|
|
|
|
.sg-vsf-meldungen-mobile {
|
|
display: flex;
|
|
width: 100%;
|
|
}
|
|
|
|
.sg-notifications-pattern__card {
|
|
width: 100%;
|
|
min-width: 0;
|
|
max-width: none;
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
.sg-notifications-pattern__card > .sg-notifications-pattern__text-segment,
|
|
.sg-notifications-pattern__card > .sg-notifications-pattern__title-segment,
|
|
.sg-notifications-pattern__card > .sg-notifications-pattern__text-segment.sg-notifications-pattern__text-segment--small {
|
|
height: auto;
|
|
}
|
|
}
|
|
|
|
/* ========================================================= */
|
|
/* Patterns: Left Navigation */
|
|
/* ========================================================= */
|
|
|
|
.sg-left-navigation-pattern {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-small);
|
|
}
|
|
|
|
.sg-left-navigation-pattern__layout {
|
|
display: flex;
|
|
align-items: stretch;
|
|
gap: 0;
|
|
width: 100%;
|
|
min-width: 0;
|
|
}
|
|
|
|
.sg-left-navigation-pattern__header-row {
|
|
display: none;
|
|
}
|
|
|
|
.sg-left-navigation-pattern__toggle {
|
|
display: none;
|
|
}
|
|
|
|
.sg-left-navigation-pattern__menu--collapsed {
|
|
display: none;
|
|
}
|
|
|
|
.sg-left-navigation-pattern__group-card {
|
|
min-width: 0;
|
|
}
|
|
|
|
.sg-left-navigation-pattern__group-card--navigation {
|
|
flex: 0 0 15vw;
|
|
width: 15vw;
|
|
max-width: 15vw;
|
|
padding: var(--spacing-small);
|
|
margin: 0 var(--spacing-small) var(--spacing-small) 0;
|
|
}
|
|
|
|
.sg-left-navigation-pattern__group-card--content {
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.sg-left-navigation-pattern__layout {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.sg-left-navigation-pattern__header-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--spacing-small);
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.sg-left-navigation-pattern__toggle {
|
|
display: inline-flex;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.sg-left-navigation-pattern__group-card--navigation {
|
|
flex: 0 0 auto;
|
|
width: 100%;
|
|
max-width: none;
|
|
margin: 0;
|
|
}
|
|
|
|
.sg-left-navigation-pattern__group-card--content {
|
|
margin-top: var(--spacing-small);
|
|
}
|
|
}
|
|
|
|
/* ========================================================= */
|
|
/* 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);
|
|
}
|
|
|
|
|
|
/* ========================================================= */
|
|
/* Layouts: VSF List Detailseite */
|
|
/* ========================================================= */
|
|
|
|
.sg-vsf-list-detail-page {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.sg-vsf-list-detail-page > * + * {
|
|
margin-top: var(--spacing-large);
|
|
}
|
|
|
|
.sg-vsf-list-detail-page > .sg-options-row {
|
|
margin-top: var(--spacing-large);
|
|
}
|
|
|
|
.sg-vsf-list-detail-page > .sg-vsf-list-detail-page__intro-block {
|
|
margin-top: var(--spacing-large);
|
|
}
|
|
|
|
.sg-vsf-list-detail-page__intro-block {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.sg-vsf-list-detail-page__intro-block .sg-vsf-list-detail-page__title,
|
|
.sg-vsf-list-detail-page__intro-block .sg-text-layout-pattern__sample--sixty-width {
|
|
color: var(--color-font-light);
|
|
}
|
|
|
|
.sg-vsf-list-detail-page__intro-block .sg-text-layout-pattern__sample--sixty-width {
|
|
width: min(60vw, 100%);
|
|
}
|
|
|
|
.sg-vsf-list-detail-page__content {
|
|
display: flex;
|
|
gap: var(--spacing-small);
|
|
width: 100%;
|
|
}
|
|
|
|
.sg-vsf-list-detail-page__left-column {
|
|
width: 30%;
|
|
min-width: 30%;
|
|
}
|
|
|
|
.sg-vsf-list-detail-page__right-column {
|
|
width: 70%;
|
|
min-width: 0;
|
|
}
|
|
|
|
.sg-vsf-list-detail-page__left-column .sg-group-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
}
|
|
|
|
.sg-vsf-list-detail-page__left-column .sg-group-card > .sg-card {
|
|
flex: 0 0 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.sg-vsf-list-detail-page__notification-card.sg-vsf-list-detail-page__notification-card--hidden {
|
|
display: none;
|
|
}
|
|
|
|
.sg-vsf-list-detail-page__meldungen-overlay-pattern {
|
|
max-width: 100%;
|
|
}
|
|
|
|
.sg-vsf-list-detail-page__meldungen-overlay-pattern .sg-delete-confirmation-pattern__floating-card {
|
|
top: calc(var(--spacing-large) * 5);
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.sg-vsf-list-detail-page__mobile-toggle {
|
|
display: none;
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.sg-vsf-list-detail-page__intro-block .sg-text-layout-pattern__sample--sixty-width {
|
|
width: 100%;
|
|
}
|
|
|
|
.sg-vsf-list-detail-page__content {
|
|
display: block;
|
|
}
|
|
|
|
.sg-vsf-list-detail-page__left-column {
|
|
width: 100%;
|
|
min-width: 0;
|
|
}
|
|
|
|
.sg-vsf-list-detail-page__right-column {
|
|
width: 100%;
|
|
}
|
|
|
|
.sg-vsf-list-detail-page__left-column .sg-group-card,
|
|
.sg-vsf-list-detail-page__right-column .sg-group-card {
|
|
margin-bottom: var(--spacing-large);
|
|
}
|
|
|
|
.sg-vsf-list-detail-page__mobile-toggle {
|
|
display: inline-flex;
|
|
width: 100%;
|
|
margin-bottom: var(--spacing-large);
|
|
}
|
|
}
|
|
|
|
/* ========================================================= */
|
|
/* Layouts: VSF Listen Übersicht Seite V2 */
|
|
/* ========================================================= */
|
|
|
|
.sg-vsf-list-overview-page-v2 {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.sg-vsf-list-overview-page-v2 > * + * {
|
|
margin-top: var(--spacing-large);
|
|
}
|
|
|
|
.sg-vsf-list-overview-page-v2 .sg-portal-header-pattern-variant {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.sg-vsf-list-overview-page-v2 > .sg-vsf-list-overview-page-v2__intro {
|
|
margin-top: var(--spacing-large);
|
|
}
|
|
|
|
.sg-vsf-list-overview-page-v2__content {
|
|
display: flex;
|
|
gap: var(--spacing-small);
|
|
width: 100%;
|
|
}
|
|
|
|
.sg-vsf-list-overview-page-v2__primary {
|
|
width: 70%;
|
|
min-width: 0;
|
|
}
|
|
|
|
.sg-vsf-list-overview-page-v2__secondary {
|
|
width: 30%;
|
|
min-width: 0;
|
|
}
|
|
|
|
.sg-vsf-list-overview-page-v2__intro .sg-text-layout-pattern__sample--sixty-width {
|
|
color: var(--color-font-light);
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.sg-vsf-list-overview-page-v2__content {
|
|
display: block;
|
|
}
|
|
|
|
.sg-vsf-list-overview-page-v2__primary,
|
|
.sg-vsf-list-overview-page-v2__secondary {
|
|
width: 100%;
|
|
}
|
|
|
|
.sg-vsf-list-overview-page-v2__secondary {
|
|
margin-top: var(--spacing-large);
|
|
}
|
|
}
|
|
|
|
/* ========================================================= */
|
|
/* Layouts: VSF Register Step 1 */
|
|
/* ========================================================= */
|
|
|
|
.sg-vsf-register-step-1 {
|
|
display: block;
|
|
margin-top: clamp(32px, 6vw, 100px);
|
|
padding: 0 var(--layout-page-content-inset-inline);
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.sg-vsf-register-step-1-page {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.sg-vsf-register-step-1__card {
|
|
width: 100%;
|
|
max-width: var(--layout-object-card-max-width);
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.sg-vsf-register-step-1__social-links {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: var(--spacing-large);
|
|
margin-top: var(--spacing-large);
|
|
}
|
|
|
|
/* ========================================================= */
|
|
/* Patterns: Text Layouts */
|
|
/* ========================================================= */
|
|
|
|
.sg-text-layout-pattern {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-small);
|
|
}
|
|
|
|
.sg-text-layout-pattern__preview-surface {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: var(--spacing-large);
|
|
border-radius: var(--radius-card);
|
|
background: var(--surface-text-layout-preview);
|
|
}
|
|
|
|
.sg-text-layout-pattern__sample {
|
|
margin: 0;
|
|
}
|
|
|
|
.sg-text-layout-pattern__sample--full-width {
|
|
width: 100%;
|
|
}
|
|
|
|
.sg-text-layout-pattern__sample--sixty-width {
|
|
width: 60%;
|
|
}
|
|
|
|
.sg-text-layout-pattern__sample--two-column {
|
|
margin: 0;
|
|
}
|
|
|
|
.sg-text-layout-pattern__two-column {
|
|
width: 100%;
|
|
min-width: 0;
|
|
display: grid;
|
|
grid-template-columns: var(--layout-text-layout-two-column-columns);
|
|
column-gap: var(--layout-text-layout-column-gap);
|
|
}
|
|
|
|
.sg-text-layout-pattern__three-column-distributed {
|
|
width: 100%;
|
|
min-width: 0;
|
|
display: grid;
|
|
grid-template-columns: var(--layout-text-layout-three-column-columns);
|
|
column-gap: var(--layout-text-layout-column-gap);
|
|
}
|
|
|
|
.sg-text-layout-pattern__column {
|
|
margin: 0;
|
|
min-width: 0;
|
|
}
|
|
|
|
.sg-text-layout-pattern__three-column-distributed > .sg-body {
|
|
margin: 0;
|
|
}
|
|
|
|
.sg-text-layout-pattern__column--align-left {
|
|
text-align: var(--text-align-text-layout-column-left);
|
|
}
|
|
|
|
.sg-text-layout-pattern__column--align-center {
|
|
text-align: var(--text-align-text-layout-column-center);
|
|
}
|
|
|
|
.sg-text-layout-pattern__column--align-right {
|
|
text-align: var(--text-align-text-layout-column-right);
|
|
}
|
|
|
|
@media (max-width: 767px) {
|
|
.sg-text-layout-pattern__sample--sixty-width,
|
|
.sg-text-layout-pattern__sample--two-column,
|
|
.sg-text-layout-pattern__two-column,
|
|
.sg-text-layout-pattern__three-column-distributed {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
/* ========================================================= */
|
|
/* Patterns: Card Gruppe mit Tastennavigation */
|
|
/* ========================================================= */
|
|
|
|
.sg-content-block-card-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-small);
|
|
width: 100%;
|
|
}
|
|
|
|
.sg-content-block-card-group[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
.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 auto;
|
|
min-width: max-content;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
|
|
/* ========================================================= */
|
|
/* 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--signal-red {
|
|
background: var(--color-signal-red);
|
|
color: var(--text-card-header);
|
|
}
|
|
|
|
.sg-card-segment--signal-green {
|
|
background: var(--color-signal-green);
|
|
color: var(--text-card-header);
|
|
}
|
|
|
|
.sg-card-segment--signal-yellow {
|
|
background: var(--color-signal-yellow);
|
|
color: var(--text-card-header);
|
|
}
|
|
|
|
.sg-card-segment--gray {
|
|
background: var(--surface-card-segment-neutral);
|
|
}
|
|
|
|
.sg-card-segment--white {
|
|
background: var(--surface-object-card-lower-segment);
|
|
}
|
|
|
|
.sg-card.sg-card--notification-white {
|
|
--text-card-header: var(--text-card-body);
|
|
}
|
|
|
|
.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-group-card--margin-after-large {
|
|
margin-bottom: var(--spacing-large);
|
|
}
|
|
|
|
.sg-group-card__header-row {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--spacing-small);
|
|
width: 100%;
|
|
margin-bottom: var(--spacing-small);
|
|
}
|
|
|
|
.sg-group-card__heading {
|
|
flex: 0 0 100%;
|
|
margin-top: 0;
|
|
margin-right: 0;
|
|
margin-bottom: var(--spacing-small);
|
|
margin-left: var(--card-segment-padding-horizontal);
|
|
}
|
|
|
|
.sg-group-card__header-row .sg-group-card__heading {
|
|
flex: 1 1 auto;
|
|
margin-top: 0;
|
|
margin-right: 0;
|
|
margin-bottom: 0;
|
|
margin-left: var(--card-segment-padding-horizontal);
|
|
}
|
|
|
|
.sg-group-card__header-row .sg-sandwich-menu-wrap {
|
|
margin-right: var(--card-segment-padding-horizontal);
|
|
}
|
|
|
|
.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:
|
|
0
|
|
var(--card-segment-padding-horizontal)
|
|
0
|
|
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,
|
|
.sg-score-state--warning,
|
|
.sg-score-state--neutral,
|
|
.sg-score-state--negative {
|
|
margin: 0;
|
|
justify-self: end;
|
|
text-align: right;
|
|
}
|
|
|
|
.sg-score-state--positive {
|
|
color: var(--text-score-state-positive);
|
|
}
|
|
|
|
.sg-score-state--warning {
|
|
color: var(--text-score-state-warning);
|
|
}
|
|
|
|
.sg-score-state--neutral {
|
|
color: var(--text-score-state-neutral);
|
|
}
|
|
|
|
.sg-score-state--negative {
|
|
color: var(--text-score-state-negative);
|
|
}
|
|
|
|
.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--no-value {
|
|
display: block;
|
|
}
|
|
|
|
.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-score-bar__empty-state {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
padding-inline-start: 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);
|
|
pointer-events: none;
|
|
}
|
|
|
|
.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);
|
|
}
|
|
|
|
.sg-large-table {
|
|
width: 100%;
|
|
}
|
|
|
|
.sg-large-table__title-segment {
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--spacing-large);
|
|
}
|
|
|
|
.sg-large-table__row {
|
|
display: grid;
|
|
grid-template-columns: repeat(5, minmax(0, 1fr));
|
|
align-items: stretch;
|
|
gap: 0;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
background: var(--color-white);
|
|
}
|
|
|
|
.sg-large-table__row--hidden {
|
|
display: none;
|
|
}
|
|
|
|
.sg-large-table__row--header {
|
|
font-weight: var(--font-weight-semibold);
|
|
background: var(--color-medium-grey);
|
|
}
|
|
|
|
.sg-large-table__row--striped-light {
|
|
background: var(--color-light-grey);
|
|
}
|
|
|
|
.sg-large-table__row--load-more {
|
|
background: var(--color-medium-grey);
|
|
}
|
|
|
|
.sg-large-table__cell {
|
|
min-width: 0;
|
|
padding: 0 var(--spacing-small);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.sg-large-table__cell--load-more {
|
|
grid-column: 1 / -1;
|
|
padding: 0;
|
|
white-space: normal;
|
|
}
|
|
|
|
.sg-large-table__load-more-layout {
|
|
width: 100%;
|
|
max-width: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.sg-large-table__cell--header {
|
|
padding: 0;
|
|
}
|
|
|
|
.sg-large-table__sort-button {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
gap: 0.2rem;
|
|
width: 100%;
|
|
padding: 0 var(--spacing-small);
|
|
border: var(--border-none);
|
|
background: var(--color-transparent);
|
|
color: inherit;
|
|
font: inherit;
|
|
font-weight: var(--font-weight-semibold);
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.sg-large-table__sort-button:focus-visible {
|
|
outline: 2px solid var(--color-darkblue);
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
.sg-large-table__sort-icon {
|
|
flex: 0 0 auto;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 0.85rem;
|
|
height: 0.85rem;
|
|
line-height: 1;
|
|
transform: translateY(0.02em);
|
|
}
|
|
|
|
.sg-large-table__sort-icon::before {
|
|
content: "";
|
|
display: block;
|
|
width: 0;
|
|
height: 0;
|
|
border-left: 0.36rem solid transparent;
|
|
border-right: 0.36rem solid transparent;
|
|
border-bottom: 0.55rem solid currentColor;
|
|
}
|
|
|
|
.sg-large-table__sort-icon[data-direction="descending"]::before {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
/* ========================================================= */
|
|
/* 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;
|
|
}
|
|
|