gitea_admin/erp_naurua
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Sync styleguide 2026.05.18.1

Browse Source
This commit is contained in:
Mathias Gläser
2026-06-05 08:08:46 +02:00
parent 896e6bfddb
commit 4c67276645
13 changed files with 1148 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/styleguide/components/charts.html
+7
View File
@@ -38,6 +38,13 @@
<div class="sg-score-bar__median-marker sg-score-bar__median-marker--outline" data-component-part="score-median-marker" data-component-variant="outline"></div>
</div>
</div>
<div class="sg-score-bar-item" data-component="score-bar">
<p class="sg-score-bar-label sg-bar-label" data-component-part="score-label">Kirschen</p>
<div class="sg-score-bar sg-score-bar--marker-mid sg-score-bar--no-value" role="img" aria-label="Keine Daten" data-component-part="score-track">
<span class="sg-score-bar__empty-state" data-component-part="score-empty-state">keine Daten</span>
</div>
</div>
</div>
</div>
</section>
docs/styleguide/components/data-display.html
+379
View File
@@ -72,5 +72,384 @@
</section>
<!-- Component: Large Table -->
<section id="component-large-table">
<p class="sg-preview-label">Component: Large Table</p>
<article class="sg-card sg-large-table" data-component="large-table" role="table" aria-label="Beispiel Large Table">
<div class="sg-card-segment sg-card-segment--header sg-card-segment--darkblue sg-large-table__title-segment" data-component-part="large-table-header">
<div class="sg-strong">Large Table</div>
<span class="sg-search-field-row" data-component="search-field">
<span class="sg-input-single-line-wrap" data-has-value="false" data-component="single-line-input" data-component-state="inactive-selectable">
<input
class="sg-interaction-element sg-input-single-line sg-search-field-input sg-input-single-line--inactive-selectable sg-form-inactive-selectable"
type="text"
placeholder="Suche"
aria-label="Suchfeld ohne Eingabe"
data-large-table-search
>
<button class="sg-input-clear-button" type="button" aria-label="Eingabe löschen">×</button>
</span>
</span>
</div>
<div class="sg-card-segment sg-card-segment--body sg-card-segment--white sg-large-table__row sg-large-table__row--header" role="row" data-component-part="large-table-header-row">
<div class="sg-large-table__cell sg-large-table__cell--header" role="columnheader" aria-sort="none" data-sort-key="0">
<button class="sg-large-table__sort-button" type="button" aria-label="Spalte 1 sortieren">
<span class="sg-large-table__sort-label">Spalte 1</span>
<span class="sg-large-table__sort-icon" aria-hidden="true" data-direction="ascending"></span>
</button>
</div>
<div class="sg-large-table__cell sg-large-table__cell--header" role="columnheader" aria-sort="none" data-sort-key="1">
<button class="sg-large-table__sort-button" type="button" aria-label="Spalte 2 sortieren">
<span class="sg-large-table__sort-label">Spalte 2</span>
<span class="sg-large-table__sort-icon" aria-hidden="true" data-direction="ascending"></span>
</button>
</div>
<div class="sg-large-table__cell sg-large-table__cell--header" role="columnheader" aria-sort="none" data-sort-key="2">
<button class="sg-large-table__sort-button" type="button" aria-label="Spalte 3 sortieren">
<span class="sg-large-table__sort-label">Spalte 3</span>
<span class="sg-large-table__sort-icon" aria-hidden="true" data-direction="ascending"></span>
</button>
</div>
<div class="sg-large-table__cell sg-large-table__cell--header" role="columnheader" aria-sort="none" data-sort-key="3">
<button class="sg-large-table__sort-button" type="button" aria-label="Spalte 4 sortieren">
<span class="sg-large-table__sort-label">Spalte 4</span>
<span class="sg-large-table__sort-icon" aria-hidden="true" data-direction="ascending"></span>
</button>
</div>
<div class="sg-large-table__cell sg-large-table__cell--header" role="columnheader" aria-sort="none" data-sort-key="4">
<button class="sg-large-table__sort-button" type="button" aria-label="Spalte 5 sortieren">
<span class="sg-large-table__sort-label">Spalte 5</span>
<span class="sg-large-table__sort-icon" aria-hidden="true" data-direction="ascending"></span>
</button>
</div>
</div>
<div class="sg-card-segment sg-card-segment--body sg-card-segment--white sg-large-table__row" role="row" data-component-part="large-table-row">
<div class="sg-large-table__cell" role="cell">A1</div>
<div class="sg-large-table__cell" role="cell">B1</div>
<div class="sg-large-table__cell" role="cell">C1</div>
<div class="sg-large-table__cell" role="cell">D1</div>
<div class="sg-large-table__cell" role="cell">E1</div>
</div>
<div class="sg-card-segment sg-card-segment--body sg-card-segment--white sg-large-table__row" role="row" data-component-part="large-table-row">
<div class="sg-large-table__cell" role="cell">A2</div>
<div class="sg-large-table__cell" role="cell">B2</div>
<div class="sg-large-table__cell" role="cell">C2</div>
<div class="sg-large-table__cell" role="cell">D2</div>
<div class="sg-large-table__cell" role="cell">E2</div>
</div>
<div class="sg-card-segment sg-card-segment--body sg-card-segment--white sg-large-table__row" role="row" data-component-part="large-table-row">
<div class="sg-large-table__cell" role="cell">A3</div>
<div class="sg-large-table__cell" role="cell">B3</div>
<div class="sg-large-table__cell" role="cell">C3</div>
<div class="sg-large-table__cell" role="cell">D3</div>
<div class="sg-large-table__cell" role="cell">E3</div>
</div>
<div class="sg-card-segment sg-card-segment--body sg-card-segment--white sg-large-table__row" role="row" data-component-part="large-table-row">
<div class="sg-large-table__cell" role="cell">A4</div>
<div class="sg-large-table__cell" role="cell">B4</div>
<div class="sg-large-table__cell" role="cell">C4</div>
<div class="sg-large-table__cell" role="cell">D4</div>
<div class="sg-large-table__cell" role="cell">E4</div>
</div>
<div class="sg-card-segment sg-card-segment--body sg-card-segment--white sg-large-table__row" role="row" data-component-part="large-table-row">
<div class="sg-large-table__cell" role="cell">A5</div>
<div class="sg-large-table__cell" role="cell">B5</div>
<div class="sg-large-table__cell" role="cell">C5</div>
<div class="sg-large-table__cell" role="cell">D5</div>
<div class="sg-large-table__cell" role="cell">E5</div>
</div>
<div class="sg-card-segment sg-card-segment--body sg-card-segment--white sg-large-table__row" role="row" data-component-part="large-table-row">
<div class="sg-large-table__cell" role="cell">A6</div>
<div class="sg-large-table__cell" role="cell">B6</div>
<div class="sg-large-table__cell" role="cell">C6</div>
<div class="sg-large-table__cell" role="cell">D6</div>
<div class="sg-large-table__cell" role="cell">E6</div>
</div>
<div class="sg-card-segment sg-card-segment--body sg-card-segment--white sg-large-table__row" role="row" data-component-part="large-table-row">
<div class="sg-large-table__cell" role="cell">A7</div>
<div class="sg-large-table__cell" role="cell">B7</div>
<div class="sg-large-table__cell" role="cell">C7</div>
<div class="sg-large-table__cell" role="cell">D7</div>
<div class="sg-large-table__cell" role="cell">E7</div>
</div>
<div class="sg-card-segment sg-card-segment--body sg-card-segment--white sg-large-table__row" role="row" data-component-part="large-table-row">
<div class="sg-large-table__cell" role="cell">A8</div>
<div class="sg-large-table__cell" role="cell">B8</div>
<div class="sg-large-table__cell" role="cell">C8</div>
<div class="sg-large-table__cell" role="cell">D8</div>
<div class="sg-large-table__cell" role="cell">E8</div>
</div>
<div class="sg-card-segment sg-card-segment--body sg-card-segment--white sg-large-table__row" role="row" data-component-part="large-table-row">
<div class="sg-large-table__cell" role="cell">A9</div>
<div class="sg-large-table__cell" role="cell">B9</div>
<div class="sg-large-table__cell" role="cell">C9</div>
<div class="sg-large-table__cell" role="cell">D9</div>
<div class="sg-large-table__cell" role="cell">E9</div>
</div>
<div class="sg-card-segment sg-card-segment--body sg-card-segment--white sg-large-table__row" role="row" data-component-part="large-table-row">
<div class="sg-large-table__cell" role="cell">A10</div>
<div class="sg-large-table__cell" role="cell">B10</div>
<div class="sg-large-table__cell" role="cell">C10</div>
<div class="sg-large-table__cell" role="cell">D10</div>
<div class="sg-large-table__cell" role="cell">E10</div>
</div>
<div class="sg-card-segment sg-card-segment--body sg-card-segment--white sg-large-table__row sg-large-table__row--load-more" role="row" data-component-part="large-table-row" data-large-table-load-more-row="true">
<div class="sg-large-table__cell sg-large-table__cell--load-more" role="cell">
<div class="sg-navigation-card-layout sg-large-table__load-more-layout">
<div class="sg-navigation-card-block">
<article class="sg-card" data-component="card" data-pattern="navigation-card" aria-label="Navigations-Card">
<div class="sg-card-segment sg-card-segment--body" data-component-part="card-body" data-pattern-part="navigation-card-segment">
<div class="sg-navigation-card-center">
<a class="sg-hyperlink" href="#" data-component="hyperlink" data-large-table-load-more-trigger="true">Mehr laden</a>
</div>
</div>
</article>
</div>
</div>
</div>
</div>
</article>
</section>
<script>
(function () {
const table = document.querySelector('[data-component="large-table"]');
if (!table) {
return;
}
const headerCells = Array.from(table.querySelectorAll('[role="columnheader"][data-sort-key]'));
const headerButtons = headerCells.map((cell) => cell.querySelector('.sg-large-table__sort-button'));
const dataRows = Array.from(table.querySelectorAll('[data-component-part="large-table-row"]')).filter((row) => !row.hasAttribute('data-large-table-load-more-row'));
const loadMoreRow = table.querySelector('[data-large-table-load-more-row="true"]');
const loadMoreTrigger = table.querySelector('[data-large-table-load-more-trigger="true"]');
const headerRow = table.querySelector('[data-component-part="large-table-header-row"]');
const searchInput = table.querySelector('[data-large-table-search]');
const searchFieldWrap = table.querySelector('[data-component="single-line-input"]');
const searchClearButton = table.querySelector('.sg-input-clear-button');
let searchTimer = null;
let loadMoreTimer = null;
const totalRows = Array.from({ length: 20 }, (_, index) => {
const number = index + 1;
return ['A' + number, 'B' + number, 'C' + number, 'D' + number, 'E' + number];
});
const state = {
columnIndex: 0,
direction: 'ascending',
query: '',
loadingSearch: false,
loadingMore: false,
loadedCount: dataRows.length,
};
function createDataRow(values) {
const row = document.createElement('div');
row.className = 'sg-card-segment sg-card-segment--body sg-card-segment--white sg-large-table__row';
row.setAttribute('role', 'row');
row.setAttribute('data-component-part', 'large-table-row');
row.setAttribute('data-large-table-data-row', 'true');
values.forEach((value) => {
const cell = document.createElement('div');
cell.className = 'sg-large-table__cell';
cell.setAttribute('role', 'cell');
cell.textContent = value;
row.appendChild(cell);
});
return row;
}
function setHeaderState(activeIndex, direction) {
headerCells.forEach((cell, index) => {
const icon = cell.querySelector('.sg-large-table__sort-icon');
const isActive = index === activeIndex;
cell.setAttribute('aria-sort', isActive ? direction : 'none');
if (icon) {
icon.dataset.direction = isActive ? direction : 'ascending';
}
});
headerButtons.forEach((button, index) => {
if (!button) {
return;
}
const label = `Spalte ${index + 1}`;
button.setAttribute(
'aria-label',
index === activeIndex
? `${label} ${direction === 'ascending' ? 'aufsteigend' : 'absteigend'} sortiert`
: `${label} sortieren`
);
});
}
function compareValues(left, right, direction) {
const normalizedLeft = left.trim();
const normalizedRight = right.trim();
const comparison = normalizedLeft.localeCompare(normalizedRight, 'de', {
numeric: true,
sensitivity: 'base',
});
return direction === 'ascending' ? comparison : -comparison;
}
function rowMatchesQuery(row, query) {
if (!query) {
return true;
}
return Array.from(row.querySelectorAll('[role="cell"]')).some((cell) => {
const value = cell.textContent || '';
return value.toLowerCase().includes(query);
});
}
function renderRows() {
table.setAttribute('aria-busy', state.loadingSearch || state.loadingMore ? 'true' : 'false');
const sortedRows = dataRows.slice().sort((leftRow, rightRow) => {
const leftCell = leftRow.querySelectorAll('[role="cell"]')[state.columnIndex];
const rightCell = rightRow.querySelectorAll('[role="cell"]')[state.columnIndex];
const leftValue = leftCell ? leftCell.textContent : '';
const rightValue = rightCell ? rightCell.textContent : '';
return compareValues(leftValue, rightValue, state.direction);
});
let visibleIndex = 0;
sortedRows.forEach((row) => {
table.appendChild(row);
const isVisible = rowMatchesQuery(row, state.query);
row.classList.toggle('sg-large-table__row--hidden', !isVisible);
row.setAttribute('aria-hidden', isVisible ? 'false' : 'true');
row.classList.remove('sg-large-table__row--striped-light');
if (isVisible && visibleIndex % 2 === 0) {
row.classList.add('sg-large-table__row--striped-light');
}
if (isVisible) {
visibleIndex += 1;
}
});
if (loadMoreRow) {
const hasMoreRows = state.loadedCount < totalRows.length;
loadMoreRow.classList.toggle('sg-large-table__row--hidden', !hasMoreRows);
loadMoreRow.setAttribute('aria-hidden', hasMoreRows ? 'false' : 'true');
table.appendChild(loadMoreRow);
}
setHeaderState(state.columnIndex, state.direction);
}
headerButtons.forEach((button, index) => {
if (!button) {
return;
}
button.addEventListener('click', () => {
const direction = state.columnIndex === index && state.direction === 'ascending'
? 'descending'
: 'ascending';
state.columnIndex = index;
state.direction = direction;
renderRows();
});
});
if (searchInput) {
searchInput.addEventListener('input', () => {
if (searchFieldWrap) {
searchFieldWrap.setAttribute('data-has-value', searchInput.value ? 'true' : 'false');
}
state.loadingSearch = true;
renderRows();
if (searchTimer) {
window.clearTimeout(searchTimer);
}
searchTimer = window.setTimeout(() => {
state.query = searchInput.value.trim().toLowerCase();
state.loadingSearch = false;
renderRows();
}, 250);
});
}
if (searchClearButton && searchInput) {
searchClearButton.addEventListener('click', () => {
if (searchTimer) {
window.clearTimeout(searchTimer);
searchTimer = null;
}
searchInput.value = '';
state.query = '';
state.loadingSearch = false;
if (searchFieldWrap) {
searchFieldWrap.setAttribute('data-has-value', 'false');
}
renderRows();
searchInput.focus();
});
}
if (loadMoreTrigger) {
loadMoreTrigger.addEventListener('click', (event) => {
event.preventDefault();
if (state.loadingMore || state.loadedCount >= totalRows.length) {
return;
}
if (loadMoreTimer) {
window.clearTimeout(loadMoreTimer);
}
state.loadingMore = true;
loadMoreTrigger.textContent = 'Lädt ...';
renderRows();
loadMoreTimer = window.setTimeout(() => {
const nextCount = Math.min(state.loadedCount + 5, totalRows.length);
const nextRows = totalRows.slice(state.loadedCount, nextCount).map((values) => createDataRow(values));
nextRows.forEach((row) => {
dataRows.push(row);
});
state.loadedCount = nextCount;
state.loadingMore = false;
loadMoreTrigger.textContent = 'Mehr laden';
renderRows();
}, 350);
});
}
if (headerRow) {
setHeaderState(state.columnIndex, state.direction);
}
renderRows();
})();
</script>
</body>
</html>
docs/styleguide/components/interactive-elements.html
+13
View File
@@ -57,6 +57,19 @@
</div>
</section>
<!-- Component: Link Menu Items -->
<section id="component-linksmenu-items">
<p class="sg-preview-label">Component: Linksmenue-Items</p>
<div class="sg-tab-button-group" role="tablist" aria-label="Linksmenue Items" data-component="tab-navigation" data-component-size="large" data-component-variant="linksmenu-items">
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" data-component-part="tab-button">Gesamtbewertung</button>
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="true" data-component-part="tab-button">Marktbewertung</button>
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" data-component-part="tab-button">Wachstum</button>
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" data-component-part="tab-button">Profitabilität</button>
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" data-component-part="tab-button">Stabilität</button>
</div>
</section>
<!-- Component: Button Tab Navigation In Content -->
<section id="component-button-tab-navigation-in-content">
<p class="sg-preview-label">Component: Tasten-Navigation-gross in content</p>
docs/styleguide/index.html
+1
View File
@@ -44,6 +44,7 @@
<li><a href="./patterns/object-card.html">Object Card</a></li>
<li><a href="./patterns/object-group-card.html">Object Group Card</a></li>
<li><a href="./patterns/navigation-card.html">Navigation Card</a></li>
<li><a href="./patterns/left-navigation.html">Left Navigation</a></li>
<li><a href="./patterns/notifications.html">Notifications</a></li>
<li><a href="./patterns/content-cards-group.html">Content Cards Group</a></li>
<li><a href="./patterns/card-gruppe-mit-tastennavigation.html">Card Gruppe mit Tastennavigation</a></li>
docs/styleguide/patterns/left-navigation.html
+104
View File
@@ -0,0 +1,104 @@
<!doctype html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styleguide – Pattern Left Navigation</title>
<link rel="stylesheet" href="../styleguide.css">
</head>
<body>
<h1 class="sg-main-heading">Pattern – Left Navigation</h1>
<section id="pattern-left-navigation" class="sg-left-navigation-pattern">
<p class="sg-preview-label">Pattern: Left Navigation</p>
<p class="sg-body">
Die linke Navigationsspalte nutzt auf Desktop 15% der verfügbaren Breite. Die zweite Group Card ist leer und dient in der Demo nur dazu, den restlichen Bildschirm zu füllen.
</p>
<div class="sg-left-navigation-pattern__layout" aria-label="Left Navigation Demo">
<aside class="sg-group-card sg-left-navigation-pattern__group-card sg-left-navigation-pattern__group-card--navigation" data-component="group-card" aria-label="Linke Navigation">
<div class="sg-group-card__header-row sg-left-navigation-pattern__header-row">
<h2 class="sg-heading-h2 sg-text-on-dark sg-group-card__heading">Navigation</h2>
<button
class="sg-interaction-element sg-button sg-button--active sg-left-navigation-pattern__toggle"
type="button"
data-left-navigation-toggle
aria-expanded="true"
aria-controls="left-navigation-menu"
>
Ausblenden
</button>
</div>
<nav class="sg-tab-button-group" id="left-navigation-menu" role="tablist" aria-label="Linksmenue Items" data-component="tab-navigation" data-component-size="large" data-component-variant="linksmenu-items">
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="true" data-component-part="tab-button">Übersicht</button>
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" data-component-part="tab-button">Unternehmen</button>
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" data-component-part="tab-button">Kennzahlen</button>
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" data-component-part="tab-button">Nachrichten</button>
<button class="sg-interaction-element sg-button sg-tab-button" type="button" role="tab" aria-selected="false" data-component-part="tab-button">Einstellungen</button>
</nav>
</aside>
<section class="sg-group-card sg-left-navigation-pattern__group-card sg-left-navigation-pattern__group-card--content" data-component="group-card" aria-hidden="true"></section>
</div>
</section>
<script>
(() => {
const mediaQuery = window.matchMedia('(max-width: 767px)');
const toggle = document.querySelector('[data-left-navigation-toggle]');
const menu = document.getElementById('left-navigation-menu');
if (!toggle || !menu) {
return;
}
const setMenuState = (expanded) => {
menu.hidden = !expanded;
menu.classList.toggle('sg-left-navigation-pattern__menu--collapsed', !expanded);
toggle.setAttribute('aria-expanded', String(expanded));
toggle.textContent = expanded ? 'Ausblenden' : 'Einblenden';
toggle.classList.add('sg-button--active');
toggle.classList.remove('sg-button--inactive');
};
const syncMode = () => {
if (mediaQuery.matches) {
if (toggle.getAttribute('aria-expanded') !== 'true' && toggle.getAttribute('aria-expanded') !== 'false') {
setMenuState(true);
return;
}
setMenuState(toggle.getAttribute('aria-expanded') !== 'false');
return;
}
menu.hidden = false;
menu.classList.remove('sg-left-navigation-pattern__menu--collapsed');
toggle.setAttribute('aria-expanded', 'true');
toggle.textContent = 'Ausblenden';
toggle.classList.add('sg-button--active');
toggle.classList.remove('sg-button--inactive');
};
toggle.addEventListener('click', () => {
setMenuState(menu.hidden);
});
menu.querySelectorAll('.sg-tab-button').forEach((button) => {
button.addEventListener('click', () => {
menu.querySelectorAll('.sg-tab-button').forEach((otherButton) => {
otherButton.setAttribute('aria-selected', String(otherButton === button));
});
});
});
syncMode();
mediaQuery.addEventListener('change', syncMode);
})();
</script>
</body>
</html>
docs/styleguide/styleguide.css
+1
View File
@@ -11,6 +11,7 @@
@import "./styles/26-patterns-vsf-list-card.css";
@import "./styles/27-patterns-delete-confirmation.css";
@import "./styles/28-patterns-notifications.css";
@import "./styles/29-patterns-left-navigation.css";
@import "./styles/30-layouts-card-list-page.css";
@import "./styles/33-layouts-vsf-list-detailseite.css";
@import "./styles/34-layouts-vsf-listen-uebersicht-seite-v2.css";
docs/styleguide/styles/10-components-interactive-elements.css
+12
View File
@@ -155,6 +155,18 @@
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);
}
docs/styleguide/styles/29-patterns-left-navigation.css
+75
View File
@@ -0,0 +1,75 @@
/* ========================================================= */
/* 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);
}
}
docs/styleguide/styles/41-components-charts.css
+19
View File
@@ -56,6 +56,10 @@
--score-marker-position: 50%;
}
.sg-score-bar--no-value {
display: block;
}
.sg-score-bar__value {
height: 100%;
border-radius: var(--radius-graph-bar);
@@ -85,6 +89,21 @@
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);
docs/styleguide/styles/42-components-data-display.css
+107
View File
@@ -67,3 +67,110 @@
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);
}