Entwurf aus Claude Design aufnehmen (Zwischenstand)
Export des Projekts "DataMetric360 App Design" nach design/ - 80 Dateien: die beiden .dc.html-Entwurfsdateien, support.js, die verwendeten Icons, Logos, Typenschilder und Schriften sowie das kompilierte Bündel des Design-Systems, damit der Entwurf für sich allein darstellbar ist. Bewusst ein Zwischenstand, nicht der Endstand: dieser Export zeigt noch "Audi RS 6 Avant" statt des tatsächlichen RS 4 Avant competition und enthält erst die Hauptbildschirme. Die 16 fehlenden Seiten (Fahrzeugstatus, Batterieverlauf, Service, Reifen, Versicherung/Steuer und weitere, siehe SPECIFICATION.md §3) sind im Design-Projekt bereits nachbeauftragt. Beides ist in design/README.md festgehalten, damit der Stand nachvollziehbar bleibt; der Ordner wird beim nächsten Export ersetzt. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,72 @@
|
||||
## Usage conventions
|
||||
|
||||
- **Always wrap the tree that uses these components in `<div className="ads-root" data-theme="nacht">` (or `data-theme="tag"` for the light theme).** Color tokens (`--fg`, `--canvas`, `--tile`, etc.) are defined on `:root` and work anywhere, but text `color` and page `background` are only applied via the `.ads-root` class — content rendered outside it falls back to browser-default black-on-white.
|
||||
- Default theme is **Nacht** (dark) — this is what `:root` sets without any `data-theme` override. Use `data-theme="tag"` for the light variant.
|
||||
- No Audi brand assets (font, rings, nameplate) are included in this bundle — it uses a neutral `Helvetica, Arial, sans-serif` fallback stack by design.
|
||||
- `Popup` renders via a React portal into `document.body` by default (`position: fixed`, centers or anchors relative to the viewport) — it doesn't need to sit inside `.ads-root` itself since its own CSS sets `background`/`color` explicitly rather than inheriting them.
|
||||
- `SwipeRow` is a controlled/uncontrolled swipe-to-reveal row: swiping (or setting `swiped`) slides content left to reveal a delete action on the right, clipping the row's left edge by design — this is the intended interaction, not a layout bug.
|
||||
|
||||
# AudiDashUI (@audi-dash/ui@0.1.0)
|
||||
|
||||
This design system is the published @audi-dash/ui React library, bundled as a single
|
||||
browser global. All 20 components are the real upstream code.
|
||||
|
||||
## Where things are
|
||||
|
||||
- `_ds_bundle.js` — the whole-DS bundle at the project root; loads every component to `window.AudiDashUI`. First line is a `/* @ds-bundle: … */` metadata header.
|
||||
- `styles.css` — the single stylesheet entry: it `@import`s the tokens, fonts, and component styles (`_ds_bundle.css`). Link this one file.
|
||||
- `components/<group>/<Name>/<Name>.prompt.md` (example JSX + variants), `<Name>.d.ts` (types), `<Name>.html` (variant grid).
|
||||
- `tokens/*.css` — CSS custom properties, names verbatim from upstream.
|
||||
- `fonts/` — `@font-face` files + `fonts.css` (when the package ships fonts).
|
||||
|
||||
For a specific component, `read_file("components/<group>/<Name>/<Name>.prompt.md")`.
|
||||
|
||||
## Loading
|
||||
|
||||
Add these two lines to your page once (React must be on the page first):
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="styles.css">
|
||||
<script src="_ds_bundle.js"></script>
|
||||
```
|
||||
|
||||
Components are then available at `window.AudiDashUI.*`. Mount into a dedicated child node (e.g. `<div id="ds-root">`), not the host page's own React root, so the two trees don't collide:
|
||||
|
||||
```jsx
|
||||
const { Accordion } = window.AudiDashUI;
|
||||
ReactDOM.createRoot(document.getElementById('ds-root')).render(<Accordion />);
|
||||
```
|
||||
|
||||
## Tokens
|
||||
|
||||
23 CSS custom properties from @audi-dash/ui. Names are
|
||||
preserved verbatim from upstream. They are declared inside `_ds_bundle.css` (this DS ships one compiled stylesheet rather than separate token files).
|
||||
|
||||
- **typography** (1): `--font-stack`
|
||||
- **other** (22): `--red`, `--r-tile`, `--r-pill`, …
|
||||
|
||||
## Components
|
||||
|
||||
### general
|
||||
- `Accordion`
|
||||
- `ActionButton`
|
||||
- `Feld`
|
||||
- `Fig`
|
||||
- `IconButton`
|
||||
- `ImagePlaceholder`
|
||||
- `Pill`
|
||||
- `Popup`
|
||||
- `PopupMenuItem`
|
||||
- `ProgressBar`
|
||||
- `ProgressRing`
|
||||
- `RowList`
|
||||
- `Seg`
|
||||
- `StatGrid`
|
||||
- `StatusRow`
|
||||
- `SwipeRow`
|
||||
- `Switch`
|
||||
- `TabBar`
|
||||
- `Tile`
|
||||
|
||||
### accordion
|
||||
- `LeafRow`
|
||||
+290
@@ -0,0 +1,290 @@
|
||||
{
|
||||
"plugins": [
|
||||
"react",
|
||||
"import"
|
||||
],
|
||||
"rules": {
|
||||
"react/forbid-elements": [
|
||||
"warn",
|
||||
{
|
||||
"forbid": []
|
||||
}
|
||||
],
|
||||
"no-restricted-imports": [
|
||||
"warn",
|
||||
{
|
||||
"patterns": [
|
||||
{
|
||||
"group": [
|
||||
"components/accordion/LeafRow/**",
|
||||
"components/general/Accordion/**",
|
||||
"components/general/ActionButton/**",
|
||||
"components/general/Feld/**",
|
||||
"components/general/Fig/**",
|
||||
"components/general/IconButton/**",
|
||||
"components/general/ImagePlaceholder/**",
|
||||
"components/general/Pill/**",
|
||||
"components/general/Popup/**",
|
||||
"components/general/PopupMenuItem/**",
|
||||
"components/general/ProgressBar/**",
|
||||
"components/general/ProgressRing/**",
|
||||
"components/general/RowList/**",
|
||||
"components/general/Seg/**",
|
||||
"components/general/StatGrid/**",
|
||||
"components/general/StatusRow/**",
|
||||
"components/general/SwipeRow/**",
|
||||
"components/general/Switch/**",
|
||||
"components/general/TabBar/**",
|
||||
"components/general/Tile/**"
|
||||
],
|
||||
"message": "Import design-system components from 'index.js', not component internals."
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"no-restricted-syntax": [
|
||||
"warn",
|
||||
{
|
||||
"selector": "Literal[value=/#[0-9a-fA-F]{3,8}\\b/]",
|
||||
"message": "Raw hex color — use a design-system color token via var()."
|
||||
},
|
||||
{
|
||||
"selector": "Literal[value=/\\b\\d+px\\b/]",
|
||||
"message": "Raw px value — use a design-system spacing token via var()."
|
||||
},
|
||||
{
|
||||
"selector": "JSXOpeningElement[name.name='Accordion'] > JSXAttribute > JSXIdentifier[name!=/^(?:title|summary|open|defaultOpen|onOpenChange|level|children|className|key|ref|className|style|children)$/]",
|
||||
"message": "<Accordion> doesn't accept that prop. Declared props: title, summary, open, defaultOpen, onOpenChange, level, children, className."
|
||||
},
|
||||
{
|
||||
"selector": "JSXOpeningElement[name.name='ActionButton'] > JSXAttribute > JSXIdentifier[name!=/^(?:children|onClick|variant|disabled|type|className|key|ref|className|style|children)$/]",
|
||||
"message": "<ActionButton> doesn't accept that prop. Declared props: children, onClick, variant, disabled, type, className."
|
||||
},
|
||||
{
|
||||
"selector": "JSXOpeningElement[name.name='ActionButton'] > JSXAttribute[name.name='variant'] > Literal[value!=/^(?:default|destructive)$/]",
|
||||
"message": "<ActionButton> variant must be one of 'default' | 'destructive'."
|
||||
},
|
||||
{
|
||||
"selector": "JSXOpeningElement[name.name='ActionButton'] > JSXAttribute[name.name='type'] > Literal[value!=/^(?:button|submit)$/]",
|
||||
"message": "<ActionButton> type must be one of 'button' | 'submit'."
|
||||
},
|
||||
{
|
||||
"selector": "JSXOpeningElement[name.name='Feld'] > JSXAttribute > JSXIdentifier[name!=/^(?:label|value|children|unit|last|className|key|ref|className|style|children)$/]",
|
||||
"message": "<Feld> doesn't accept that prop. Declared props: label, value, children, unit, last, className."
|
||||
},
|
||||
{
|
||||
"selector": "JSXOpeningElement[name.name='Fig'] > JSXAttribute > JSXIdentifier[name!=/^(?:value|unit|size|className|key|ref|className|style|children)$/]",
|
||||
"message": "<Fig> doesn't accept that prop. Declared props: value, unit, size, className."
|
||||
},
|
||||
{
|
||||
"selector": "JSXOpeningElement[name.name='IconButton'] > JSXAttribute > JSXIdentifier[name!=/^(?:onClick|children|disabled|className|key|ref|className|style|children)$/]",
|
||||
"message": "<IconButton> doesn't accept that prop. Declared props: onClick, children, disabled, className."
|
||||
},
|
||||
{
|
||||
"selector": "JSXOpeningElement[name.name='ImagePlaceholder'] > JSXAttribute > JSXIdentifier[name!=/^(?:src|alt|label|hint|icon|size|className|key|ref|className|style|children)$/]",
|
||||
"message": "<ImagePlaceholder> doesn't accept that prop. Declared props: src, alt, label, hint, icon, size, className."
|
||||
},
|
||||
{
|
||||
"selector": "JSXOpeningElement[name.name='ImagePlaceholder'] > JSXAttribute[name.name='size'] > Literal[value!=/^(?:default|mini|round)$/]",
|
||||
"message": "<ImagePlaceholder> size must be one of 'default' | 'mini' | 'round'."
|
||||
},
|
||||
{
|
||||
"selector": "JSXOpeningElement[name.name='LeafRow'] > JSXAttribute > JSXIdentifier[name!=/^(?:title|subTitle|value|subValue|onClick|className|key|ref|className|style|children)$/]",
|
||||
"message": "<LeafRow> doesn't accept that prop. Declared props: title, subTitle, value, subValue, onClick, className."
|
||||
},
|
||||
{
|
||||
"selector": "JSXOpeningElement[name.name='Pill'] > JSXAttribute > JSXIdentifier[name!=/^(?:children|variant|className|key|ref|className|style|children)$/]",
|
||||
"message": "<Pill> doesn't accept that prop. Declared props: children, variant, className."
|
||||
},
|
||||
{
|
||||
"selector": "JSXOpeningElement[name.name='Pill'] > JSXAttribute[name.name='variant'] > Literal[value!=/^(?:default|work)$/]",
|
||||
"message": "<Pill> variant must be one of 'default' | 'work'."
|
||||
},
|
||||
{
|
||||
"selector": "JSXOpeningElement[name.name='Popup'] > JSXAttribute > JSXIdentifier[name!=/^(?:open|onClose|variant|anchor|children|className|portalTarget|key|ref|className|style|children)$/]",
|
||||
"message": "<Popup> doesn't accept that prop. Declared props: open, onClose, variant, anchor, children, className, portalTarget."
|
||||
},
|
||||
{
|
||||
"selector": "JSXOpeningElement[name.name='Popup'] > JSXAttribute[name.name='variant'] > Literal[value!=/^(?:menu|form)$/]",
|
||||
"message": "<Popup> variant must be one of 'menu' | 'form'."
|
||||
},
|
||||
{
|
||||
"selector": "JSXOpeningElement[name.name='PopupMenuItem'] > JSXAttribute > JSXIdentifier[name!=/^(?:onClick|destructive|children|key|ref|className|style|children)$/]",
|
||||
"message": "<PopupMenuItem> doesn't accept that prop. Declared props: onClick, destructive, children."
|
||||
},
|
||||
{
|
||||
"selector": "JSXOpeningElement[name.name='ProgressBar'] > JSXAttribute > JSXIdentifier[name!=/^(?:percent|segments|showLegend|className|key|ref|className|style|children)$/]",
|
||||
"message": "<ProgressBar> doesn't accept that prop. Declared props: percent, segments, showLegend, className."
|
||||
},
|
||||
{
|
||||
"selector": "JSXOpeningElement[name.name='ProgressRing'] > JSXAttribute > JSXIdentifier[name!=/^(?:percent|value|unit|label|size|className|key|ref|className|style|children)$/]",
|
||||
"message": "<ProgressRing> doesn't accept that prop. Declared props: percent, value, unit, label, size, className."
|
||||
},
|
||||
{
|
||||
"selector": "JSXOpeningElement[name.name='RowList'] > JSXAttribute > JSXIdentifier[name!=/^(?:items|className|key|ref|className|style|children)$/]",
|
||||
"message": "<RowList> doesn't accept that prop. Declared props: items, className."
|
||||
},
|
||||
{
|
||||
"selector": "JSXOpeningElement[name.name='Seg'] > JSXAttribute > JSXIdentifier[name!=/^(?:options|value|onChange|className|key|ref|className|style|children)$/]",
|
||||
"message": "<Seg> doesn't accept that prop. Declared props: options, value, onChange, className."
|
||||
},
|
||||
{
|
||||
"selector": "JSXOpeningElement[name.name='StatGrid'] > JSXAttribute > JSXIdentifier[name!=/^(?:items|columns|className|key|ref|className|style|children)$/]",
|
||||
"message": "<StatGrid> doesn't accept that prop. Declared props: items, columns, className."
|
||||
},
|
||||
{
|
||||
"selector": "JSXOpeningElement[name.name='StatusRow'] > JSXAttribute > JSXIdentifier[name!=/^(?:status|title|subtitle|onClick|className|key|ref|className|style|children)$/]",
|
||||
"message": "<StatusRow> doesn't accept that prop. Declared props: status, title, subtitle, onClick, className."
|
||||
},
|
||||
{
|
||||
"selector": "JSXOpeningElement[name.name='StatusRow'] > JSXAttribute[name.name='status'] > Literal[value!=/^(?:ok|warn|bad)$/]",
|
||||
"message": "<StatusRow> status must be one of 'ok' | 'warn' | 'bad'."
|
||||
},
|
||||
{
|
||||
"selector": "JSXOpeningElement[name.name='SwipeRow'] > JSXAttribute > JSXIdentifier[name!=/^(?:children|onDelete|deleteLabel|swiped|onSwipedChange|className|key|ref|className|style|children)$/]",
|
||||
"message": "<SwipeRow> doesn't accept that prop. Declared props: children, onDelete, deleteLabel, swiped, onSwipedChange, className."
|
||||
},
|
||||
{
|
||||
"selector": "JSXOpeningElement[name.name='Switch'] > JSXAttribute > JSXIdentifier[name!=/^(?:checked|onChange|disabled|id|className|key|ref|className|style|children)$/]",
|
||||
"message": "<Switch> doesn't accept that prop. Declared props: checked, onChange, disabled, id, className."
|
||||
},
|
||||
{
|
||||
"selector": "JSXOpeningElement[name.name='TabBar'] > JSXAttribute > JSXIdentifier[name!=/^(?:items|activeKey|onChange|iconOnly|className|key|ref|className|style|children)$/]",
|
||||
"message": "<TabBar> doesn't accept that prop. Declared props: items, activeKey, onChange, iconOnly, className."
|
||||
},
|
||||
{
|
||||
"selector": "JSXOpeningElement[name.name='Tile'] > JSXAttribute > JSXIdentifier[name!=/^(?:variant|chevron|onClick|className|children|key|ref|className|style|children)$/]",
|
||||
"message": "<Tile> doesn't accept that prop. Declared props: variant, chevron, onClick, className, children."
|
||||
},
|
||||
{
|
||||
"selector": "JSXOpeningElement[name.name='Tile'] > JSXAttribute[name.name='variant'] > Literal[value!=/^(?:default|button|flat)$/]",
|
||||
"message": "<Tile> variant must be one of 'default' | 'button' | 'flat'."
|
||||
}
|
||||
]
|
||||
},
|
||||
"overrides": [
|
||||
{
|
||||
"files": [
|
||||
"**/index.js"
|
||||
],
|
||||
"rules": {
|
||||
"no-restricted-imports": "off"
|
||||
}
|
||||
}
|
||||
],
|
||||
"x-omelette": {
|
||||
"components": {
|
||||
"Accordion": {
|
||||
"replaces": []
|
||||
},
|
||||
"ActionButton": {
|
||||
"replaces": []
|
||||
},
|
||||
"Feld": {
|
||||
"replaces": []
|
||||
},
|
||||
"Fig": {
|
||||
"replaces": []
|
||||
},
|
||||
"IconButton": {
|
||||
"replaces": []
|
||||
},
|
||||
"ImagePlaceholder": {
|
||||
"replaces": []
|
||||
},
|
||||
"LeafRow": {
|
||||
"replaces": []
|
||||
},
|
||||
"Pill": {
|
||||
"replaces": []
|
||||
},
|
||||
"Popup": {
|
||||
"replaces": []
|
||||
},
|
||||
"PopupMenuItem": {
|
||||
"replaces": []
|
||||
},
|
||||
"ProgressBar": {
|
||||
"replaces": []
|
||||
},
|
||||
"ProgressRing": {
|
||||
"replaces": []
|
||||
},
|
||||
"RowList": {
|
||||
"replaces": []
|
||||
},
|
||||
"Seg": {
|
||||
"replaces": []
|
||||
},
|
||||
"StatGrid": {
|
||||
"replaces": []
|
||||
},
|
||||
"StatusRow": {
|
||||
"replaces": []
|
||||
},
|
||||
"SwipeRow": {
|
||||
"replaces": []
|
||||
},
|
||||
"Switch": {
|
||||
"replaces": []
|
||||
},
|
||||
"TabBar": {
|
||||
"replaces": []
|
||||
},
|
||||
"Tile": {
|
||||
"replaces": []
|
||||
}
|
||||
},
|
||||
"tokens": [
|
||||
"--bad",
|
||||
"--canvas",
|
||||
"--fg",
|
||||
"--fg2",
|
||||
"--fg3",
|
||||
"--font-stack",
|
||||
"--line",
|
||||
"--line-strong",
|
||||
"--ok",
|
||||
"--r-func",
|
||||
"--r-pill",
|
||||
"--r-tile",
|
||||
"--rahmen-hg",
|
||||
"--red",
|
||||
"--shade",
|
||||
"--sp-1",
|
||||
"--sp-2",
|
||||
"--sp-3",
|
||||
"--sp-4",
|
||||
"--sp-5",
|
||||
"--tile",
|
||||
"--tile-2",
|
||||
"--warn"
|
||||
],
|
||||
"tokenKinds": {
|
||||
"--red": "color",
|
||||
"--r-tile": "spacing",
|
||||
"--r-pill": "spacing",
|
||||
"--r-func": "spacing",
|
||||
"--rahmen-hg": "color",
|
||||
"--sp-1": "spacing",
|
||||
"--sp-2": "spacing",
|
||||
"--sp-3": "spacing",
|
||||
"--sp-4": "spacing",
|
||||
"--sp-5": "spacing",
|
||||
"--canvas": "color",
|
||||
"--tile": "color",
|
||||
"--tile-2": "color",
|
||||
"--line": "color",
|
||||
"--line-strong": "color",
|
||||
"--fg": "color",
|
||||
"--fg2": "color",
|
||||
"--fg3": "color",
|
||||
"--ok": "color",
|
||||
"--warn": "color",
|
||||
"--bad": "color",
|
||||
"--shade": "color",
|
||||
"--font-stack": "font"
|
||||
},
|
||||
"fontFamilies": []
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,733 @@
|
||||
/* src/tokens/tokens.css */
|
||||
:root {
|
||||
--red: #F50537;
|
||||
--r-tile: 20px;
|
||||
--r-pill: 999px;
|
||||
--r-func: 8px;
|
||||
--rahmen-hg: #111;
|
||||
--sp-1: 4px;
|
||||
--sp-2: 8px;
|
||||
--sp-3: 12px;
|
||||
--sp-4: 16px;
|
||||
--sp-5: 22px;
|
||||
--canvas: #161b23;
|
||||
--tile: #1f2733;
|
||||
--tile-2: #2a3341;
|
||||
--line: rgba(255, 255, 255, .10);
|
||||
--line-strong: rgba(255, 255, 255, .20);
|
||||
--fg: #FFFFFF;
|
||||
--fg2: #9aa1ad;
|
||||
--fg3: #657081;
|
||||
--ok: #15da15;
|
||||
--warn: #ffaa00;
|
||||
--bad: #fd2c4e;
|
||||
--shade: rgba(255, 255, 255, .05);
|
||||
--font-stack:
|
||||
Helvetica,
|
||||
Arial,
|
||||
sans-serif;
|
||||
}
|
||||
[data-theme=tag] {
|
||||
--canvas: #FFFFFF;
|
||||
--tile: #f2f2f2;
|
||||
--tile-2: #e5e5e5;
|
||||
--line: rgba(0, 0, 0, .10);
|
||||
--line-strong: rgba(0, 0, 0, .22);
|
||||
--fg: #000000;
|
||||
--fg2: #4c4c4c;
|
||||
--fg3: #666666;
|
||||
--ok: #0DA20D;
|
||||
--warn: #ffaa00;
|
||||
--bad: #eb0d3f;
|
||||
--shade: rgba(0, 0, 0, .04);
|
||||
}
|
||||
.ads-root {
|
||||
font-family: var(--font-stack);
|
||||
font-variant-numeric: tabular-nums;
|
||||
color: var(--fg);
|
||||
background: var(--canvas);
|
||||
}
|
||||
.ads-eyebrow {
|
||||
font-size: 10px;
|
||||
letter-spacing: .2em;
|
||||
text-transform: uppercase;
|
||||
color: var(--fg3);
|
||||
display: block;
|
||||
}
|
||||
.ads-title {
|
||||
font-size: 23px;
|
||||
letter-spacing: -.015em;
|
||||
line-height: 1.15;
|
||||
color: var(--fg);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.ads-label {
|
||||
font-size: 10px;
|
||||
letter-spacing: .2em;
|
||||
text-transform: uppercase;
|
||||
color: var(--fg3);
|
||||
display: block;
|
||||
}
|
||||
.ads-sport {
|
||||
font-style: italic;
|
||||
letter-spacing: .005em;
|
||||
}
|
||||
|
||||
/* src/components/Pill/Pill.css */
|
||||
.ads-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
font-size: 10px;
|
||||
letter-spacing: .14em;
|
||||
text-transform: uppercase;
|
||||
color: var(--fg2);
|
||||
border: 1px solid var(--line-strong);
|
||||
border-radius: var(--r-pill);
|
||||
padding: 6px 12px;
|
||||
}
|
||||
.ads-pill--work {
|
||||
color: var(--red);
|
||||
border-color: var(--red);
|
||||
}
|
||||
|
||||
/* src/components/IconButton/IconButton.css */
|
||||
.ads-icon-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border: none;
|
||||
border-radius: 50%;
|
||||
background: none;
|
||||
color: var(--fg3);
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
}
|
||||
.ads-icon-button svg {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
.ads-icon-button:hover:not(:disabled) {
|
||||
background: var(--tile-2);
|
||||
color: var(--fg);
|
||||
}
|
||||
.ads-icon-button:disabled {
|
||||
opacity: .4;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/* src/components/Fig/Fig.css */
|
||||
.ads-fig {
|
||||
font-weight: 300;
|
||||
letter-spacing: -.02em;
|
||||
line-height: .95;
|
||||
color: var(--fg);
|
||||
}
|
||||
.ads-fig__unit {
|
||||
font-size: .32em;
|
||||
font-weight: 400;
|
||||
letter-spacing: normal;
|
||||
color: var(--fg2);
|
||||
margin-left: .32em;
|
||||
}
|
||||
|
||||
/* src/components/StatusRow/StatusRow.css */
|
||||
.ads-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--sp-3);
|
||||
width: 100%;
|
||||
background: none;
|
||||
border: none;
|
||||
padding: 0;
|
||||
text-align: left;
|
||||
font-family: inherit;
|
||||
cursor: default;
|
||||
}
|
||||
button.ads-status {
|
||||
cursor: pointer;
|
||||
}
|
||||
.ads-dot {
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
border-radius: 50%;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
.ads-dot--ok {
|
||||
background: var(--ok);
|
||||
}
|
||||
.ads-dot--warn {
|
||||
background: var(--warn);
|
||||
}
|
||||
.ads-dot--bad {
|
||||
background: var(--bad);
|
||||
}
|
||||
.ads-status__text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.ads-status__t {
|
||||
font-size: 14px;
|
||||
color: var(--fg);
|
||||
}
|
||||
.ads-status__s {
|
||||
font-size: 11px;
|
||||
color: var(--fg3);
|
||||
}
|
||||
|
||||
/* src/components/ActionButton/ActionButton.css */
|
||||
.ads-action {
|
||||
display: block;
|
||||
width: 100%;
|
||||
font-family: inherit;
|
||||
font-size: 11px;
|
||||
letter-spacing: .14em;
|
||||
text-transform: uppercase;
|
||||
color: var(--fg);
|
||||
background: none;
|
||||
border: 1px solid var(--line-strong);
|
||||
border-radius: var(--r-pill);
|
||||
padding: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.ads-action:hover:not(:disabled) {
|
||||
border-color: var(--red);
|
||||
}
|
||||
.ads-action:disabled {
|
||||
opacity: .4;
|
||||
cursor: default;
|
||||
}
|
||||
.ads-action--destructive {
|
||||
color: var(--bad);
|
||||
border-color: var(--bad);
|
||||
}
|
||||
.ads-action--destructive:hover:not(:disabled) {
|
||||
background: var(--bad);
|
||||
color: var(--fg);
|
||||
border-color: var(--bad);
|
||||
}
|
||||
|
||||
/* src/components/Switch/Switch.css */
|
||||
.ads-switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
flex-shrink: 0;
|
||||
width: 46px;
|
||||
height: 27px;
|
||||
}
|
||||
.ads-switch input {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
opacity: 0;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
min-width: 0;
|
||||
}
|
||||
.ads-switch__track {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: var(--tile-2);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: var(--r-pill);
|
||||
transition: background .18s;
|
||||
pointer-events: none;
|
||||
}
|
||||
.ads-switch__track::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 2px;
|
||||
top: 1px;
|
||||
width: 23px;
|
||||
height: 23px;
|
||||
background: #fff;
|
||||
border-radius: 50%;
|
||||
transition: transform .18s;
|
||||
}
|
||||
.ads-switch input:checked + .ads-switch__track {
|
||||
background: var(--red);
|
||||
border-color: var(--red);
|
||||
}
|
||||
.ads-switch input:checked + .ads-switch__track::before {
|
||||
transform: translateX(19px);
|
||||
}
|
||||
.ads-switch input:disabled + .ads-switch__track {
|
||||
opacity: .4;
|
||||
}
|
||||
|
||||
/* src/components/Seg/Seg.css */
|
||||
.ads-seg {
|
||||
display: flex;
|
||||
gap: var(--sp-2);
|
||||
}
|
||||
.ads-seg button {
|
||||
flex: 1;
|
||||
border: 1px solid var(--line-strong);
|
||||
background: none;
|
||||
color: var(--fg2);
|
||||
font-family: inherit;
|
||||
font-size: 11px;
|
||||
letter-spacing: .12em;
|
||||
text-transform: uppercase;
|
||||
padding: 11px 8px;
|
||||
border-radius: var(--r-pill);
|
||||
cursor: pointer;
|
||||
}
|
||||
.ads-seg button.ads-seg__on {
|
||||
border-color: var(--red);
|
||||
color: var(--fg);
|
||||
}
|
||||
|
||||
/* src/components/RowList/RowList.css */
|
||||
.ads-rows {
|
||||
margin: 0;
|
||||
}
|
||||
.ads-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: baseline;
|
||||
gap: var(--sp-3);
|
||||
padding: 13px 0;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
.ads-row:last-child {
|
||||
border-bottom: 0;
|
||||
}
|
||||
.ads-row dt {
|
||||
font-size: 13px;
|
||||
color: var(--fg2);
|
||||
}
|
||||
.ads-row dd {
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
color: var(--fg);
|
||||
text-align: right;
|
||||
}
|
||||
.ads-row dd small {
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
color: var(--fg3);
|
||||
}
|
||||
|
||||
/* src/components/Accordion/LeafRow.css */
|
||||
.ads-leaf {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--sp-3);
|
||||
width: 100%;
|
||||
background: none;
|
||||
border: none;
|
||||
font-family: inherit;
|
||||
text-align: left;
|
||||
padding: 12px 0 12px 44px;
|
||||
cursor: default;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
button.ads-leaf {
|
||||
cursor: pointer;
|
||||
}
|
||||
.ads-leaf__k {
|
||||
font-size: 13.5px;
|
||||
color: var(--fg);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.ads-leaf__k small {
|
||||
font-size: 11px;
|
||||
color: var(--fg3);
|
||||
}
|
||||
.ads-leaf__v {
|
||||
font-size: 13px;
|
||||
color: var(--fg2);
|
||||
text-align: right;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.ads-leaf__v small {
|
||||
font-size: 11px;
|
||||
color: var(--fg3);
|
||||
}
|
||||
.ads-chev {
|
||||
width: 6px;
|
||||
height: 10px;
|
||||
color: var(--fg3);
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
/* src/components/Tile/Tile.css */
|
||||
.ads-tile {
|
||||
background: var(--tile);
|
||||
border-radius: var(--r-tile);
|
||||
padding: var(--sp-5);
|
||||
margin-bottom: var(--sp-3);
|
||||
}
|
||||
.ads-tile--flat {
|
||||
background: none;
|
||||
padding: 0;
|
||||
}
|
||||
button.ads-tile--button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
border: none;
|
||||
font-family: inherit;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
button.ads-tile--button:hover {
|
||||
background: var(--tile-2);
|
||||
}
|
||||
.ads-tile__content {
|
||||
flex: 1;
|
||||
}
|
||||
.ads-tile__go {
|
||||
width: 6px;
|
||||
height: 10px;
|
||||
color: var(--fg3);
|
||||
flex: 0 0 auto;
|
||||
margin-left: var(--sp-3);
|
||||
}
|
||||
|
||||
/* src/components/Feld/Feld.css */
|
||||
.ads-feld {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: var(--sp-4);
|
||||
padding: 12px 0;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
.ads-feld--last {
|
||||
border-bottom: 0;
|
||||
}
|
||||
.ads-feld label {
|
||||
font-size: 13px;
|
||||
color: var(--fg2);
|
||||
}
|
||||
.ads-feld input,
|
||||
.ads-feld select {
|
||||
background: var(--tile-2);
|
||||
border: 1px solid var(--line);
|
||||
color: var(--fg);
|
||||
font-family: inherit;
|
||||
font-size: 13.5px;
|
||||
padding: 8px 11px;
|
||||
border-radius: var(--r-func);
|
||||
text-align: right;
|
||||
min-width: 132px;
|
||||
}
|
||||
.ads-mit-einheit {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--sp-2);
|
||||
}
|
||||
.ads-mit-einheit input {
|
||||
min-width: 92px;
|
||||
text-align: right;
|
||||
}
|
||||
.ads-mit-einheit span:last-child {
|
||||
font-size: 13px;
|
||||
color: var(--fg2);
|
||||
}
|
||||
|
||||
/* src/components/ProgressRing/ProgressRing.css */
|
||||
.ads-ring {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
.ads-ring svg {
|
||||
transform: rotate(-90deg);
|
||||
}
|
||||
.ads-ring__track {
|
||||
fill: none;
|
||||
stroke: var(--line);
|
||||
stroke-width: 10;
|
||||
}
|
||||
.ads-ring__arc {
|
||||
fill: none;
|
||||
stroke: var(--red);
|
||||
stroke-width: 10;
|
||||
stroke-linecap: round;
|
||||
transition: stroke-dashoffset .3s;
|
||||
}
|
||||
.ads-ring__mid {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* src/components/ProgressBar/ProgressBar.css */
|
||||
.ads-balken {
|
||||
height: 4px;
|
||||
border-radius: var(--r-pill);
|
||||
background: var(--line);
|
||||
overflow: hidden;
|
||||
}
|
||||
.ads-balken i {
|
||||
display: block;
|
||||
height: 100%;
|
||||
background: var(--fg);
|
||||
border-radius: var(--r-pill);
|
||||
}
|
||||
.ads-bar {
|
||||
display: flex;
|
||||
height: 4px;
|
||||
border-radius: var(--r-pill);
|
||||
overflow: hidden;
|
||||
gap: 2px;
|
||||
}
|
||||
.ads-bar i {
|
||||
display: block;
|
||||
border-radius: var(--r-pill);
|
||||
}
|
||||
.ads-legend {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--sp-3);
|
||||
margin-top: var(--sp-2);
|
||||
font-size: 11px;
|
||||
color: var(--fg2);
|
||||
}
|
||||
.ads-legend span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
}
|
||||
.ads-legend i {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/* src/components/StatGrid/StatGrid.css */
|
||||
.ads-quad {
|
||||
display: grid;
|
||||
gap: var(--sp-4);
|
||||
}
|
||||
.ads-quad__n {
|
||||
display: block;
|
||||
}
|
||||
.ads-quad__l {
|
||||
display: block;
|
||||
margin-top: 4px;
|
||||
font-size: 9px;
|
||||
letter-spacing: .12em;
|
||||
text-transform: uppercase;
|
||||
color: var(--fg3);
|
||||
}
|
||||
|
||||
/* src/components/Accordion/Accordion.css */
|
||||
.ads-acc-h {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--sp-2);
|
||||
width: 100%;
|
||||
background: none;
|
||||
border: none;
|
||||
font-family: inherit;
|
||||
text-align: left;
|
||||
padding: 12px 0;
|
||||
cursor: pointer;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
.ads-acc-h__k {
|
||||
flex: 1;
|
||||
font-size: 15px;
|
||||
color: var(--fg);
|
||||
}
|
||||
.ads-acc-h__v {
|
||||
font-size: 11.5px;
|
||||
color: var(--fg2);
|
||||
text-align: right;
|
||||
}
|
||||
.ads-mark {
|
||||
width: 6px;
|
||||
height: 10px;
|
||||
border-right: 1.4px solid var(--fg3);
|
||||
border-bottom: 1.4px solid var(--fg3);
|
||||
transform: rotate(-45deg) scaleY(1);
|
||||
transition: transform .15s, border-color .15s;
|
||||
}
|
||||
.ads-acc-h[aria-expanded=true] .ads-mark {
|
||||
border-color: var(--red);
|
||||
transform: rotate(45deg) scaleY(1);
|
||||
}
|
||||
.ads-acc-b {
|
||||
display: none;
|
||||
}
|
||||
.ads-acc-b--on {
|
||||
display: block;
|
||||
}
|
||||
.ads-accordion--lvl2 {
|
||||
margin-left: 22px;
|
||||
}
|
||||
.ads-accordion--lvl2 .ads-acc-h__k {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
/* src/components/SwipeRow/SwipeRow.css */
|
||||
.ads-swipe-wrap {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
.ads-swipe-delete {
|
||||
position: absolute;
|
||||
inset: 0 0 0 auto;
|
||||
width: 84px;
|
||||
background: var(--bad);
|
||||
color: #fff;
|
||||
border: none;
|
||||
font-family: inherit;
|
||||
font-size: 11px;
|
||||
letter-spacing: .08em;
|
||||
text-transform: uppercase;
|
||||
cursor: pointer;
|
||||
}
|
||||
.ads-swipe-content {
|
||||
position: relative;
|
||||
background: var(--tile);
|
||||
touch-action: pan-y;
|
||||
transition: transform .18s;
|
||||
}
|
||||
|
||||
/* src/components/TabBar/TabBar.css */
|
||||
.ads-tabbar {
|
||||
display: grid;
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
.ads-tab {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
padding: 10px 0 8px;
|
||||
background: none;
|
||||
border: none;
|
||||
border-top: 2px solid transparent;
|
||||
margin-top: -1px;
|
||||
color: var(--fg3);
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
.ads-tab--on {
|
||||
border-top-color: var(--red);
|
||||
color: var(--fg);
|
||||
}
|
||||
.ads-tab__icon svg {
|
||||
width: 21px;
|
||||
height: 21px;
|
||||
}
|
||||
.ads-tabbar--ohne .ads-tab__icon svg {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
}
|
||||
.ads-tab__label {
|
||||
font-size: 9px;
|
||||
letter-spacing: .08em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* src/components/Popup/Popup.css */
|
||||
.ads-popup-catcher {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 1000;
|
||||
background: none;
|
||||
border: none;
|
||||
}
|
||||
.ads-popup {
|
||||
position: fixed;
|
||||
z-index: 1001;
|
||||
background: var(--tile-2);
|
||||
border-radius: 14px;
|
||||
padding: var(--sp-4);
|
||||
}
|
||||
.ads-popup--menu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 180px;
|
||||
}
|
||||
.ads-popup--form {
|
||||
min-width: 260px;
|
||||
}
|
||||
.ads-popup-item {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--fg);
|
||||
font-family: inherit;
|
||||
font-size: 13.5px;
|
||||
padding: 10px 4px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.ads-popup-item--destructive {
|
||||
color: var(--bad);
|
||||
}
|
||||
|
||||
/* src/components/ImagePlaceholder/ImagePlaceholder.css */
|
||||
.ads-bildbox {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
aspect-ratio: 4 / 3;
|
||||
border-radius: 12px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.ads-bildbox img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
.ads-bildbox--mini {
|
||||
width: 78px;
|
||||
height: 78px;
|
||||
aspect-ratio: auto;
|
||||
border-radius: 12px;
|
||||
}
|
||||
.ads-bildbox--round {
|
||||
border-radius: 50%;
|
||||
}
|
||||
.ads-platzhalter {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
border: 1px dashed var(--line-strong);
|
||||
border-radius: inherit;
|
||||
color: var(--fg3);
|
||||
text-align: center;
|
||||
padding: var(--sp-2);
|
||||
}
|
||||
.ads-platzhalter__icon svg {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
color: var(--fg3);
|
||||
}
|
||||
.ads-platzhalter__label {
|
||||
font-size: 10.5px;
|
||||
letter-spacing: .02em;
|
||||
color: var(--fg3);
|
||||
}
|
||||
.ads-platzhalter__hint {
|
||||
font-family: ui-monospace, monospace;
|
||||
font-size: 9px;
|
||||
color: var(--fg3);
|
||||
}
|
||||
|
||||
/* src/styles.css */
|
||||
/*# sourceMappingURL=styles.css.map */
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -0,0 +1 @@
|
||||
@import "./_ds_bundle.css";
|
||||
Reference in New Issue
Block a user