diff --git a/apps/client/src/widgets/react/PropertySheet.css b/apps/client/src/widgets/react/PropertySheet.css new file mode 100644 index 0000000000..65289ad697 --- /dev/null +++ b/apps/client/src/widgets/react/PropertySheet.css @@ -0,0 +1,79 @@ +.property-sheet-table { + --border-radius: 8px; + + dl { + background: var(--card-background-color); + + dt { + color: var(--muted-text-color); + } + } +} + +@media (min-width: 600px) { + .property-sheet-table { + display: table; + border-spacing: 0 2px; + border-collapse: separate; + + dl { + display: table-row; + --_br: var(--border-radius); + + &:first-child { + clip-path: inset(0 round var(--_br) var(--_br) 0 0); + } + + &:last-child { + clip-path: inset(0 round 0 0 var(--_br) var(--_br)); + } + } + + dt, dd { + display: table-cell; + padding: 10px 16px; + vertical-align: top; + } + + dt { + white-space: nowrap; + } + + dl { + width: 100%; + } + } +} + +@media (max-width: 599px) { + .property-sheet-table { + display: flex; + flex-direction: column; + gap: 2px; + + dl { + margin: 0; + padding: 12px 20px; + + &:first-child { + border-radius: var(--border-radius) var(--border-radius) 0 0; + } + + &:last-child { + border-radius: 0 0 var(--border-radius) var(--border-radius); + } + + dt { + margin-bottom: 8px; + font-size: .85em; + font-weight: 500; + text-transform: uppercase; + letter-spacing: .4pt; + } + + dd { + margin: 0; + } + } + } +} \ No newline at end of file diff --git a/apps/client/src/widgets/react/PropertySheet.tsx b/apps/client/src/widgets/react/PropertySheet.tsx new file mode 100644 index 0000000000..d359bd41bb --- /dev/null +++ b/apps/client/src/widgets/react/PropertySheet.tsx @@ -0,0 +1,15 @@ +import { ComponentChildren } from "preact"; +import "./PropertySheet.css"; + +export function PropertySheet({ children }: { children: ComponentChildren }) { + return
+ {children} +
+} + +export function PropertySheetItem({label, children}: {label: string, children: ComponentChildren}) { + return
+
{label}
+
{children}
+
+} \ No newline at end of file