Skip to content

Instantly share code, notes, and snippets.

@dbouwman

dbouwman/brollyouts.markdown

Created May 12, 2026 20:24
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save dbouwman/555f9b68a4a302fdcbb78e8b5639bd4e to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save dbouwman/555f9b68a4a302fdcbb78e8b5639bd4e to your computer and use it in GitHub Desktop.
Download ZIP
brollyouts
Raw
index.html
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<script type="module" src=https://js.arcgis.com/calcite-components/5.0.2></script>
</head>
<body>
<calcite-shell content-behind class="shell">
<!-- <calcite-navigation slot="header" class="nav">
<div slot="content-start" class="header-actions">
<calcite-button icon-start="sign-out" round kind="neutral" appearance="transparent">Exit</calcite-button>
<div class="entity">
<div class="entity-title">{entity.title}</div>
<calcite-chip scale="s" kind="brand" appearance="outline">{version.title}</calcite-chip>
</div>
<calcite-button icon-end="chevron-down" round kind="neutral" appearance="transparent">{entity.title}</calcite-button>
</div>
<div slot="content-center" class="header-actions">
<calcite-dropdown width="m" placement="bottom" offset-distance="12">
<calcite-button slot="trigger" appearance="transparent" kind="neutral" icon-start="home" icon-end="chevron-down">Home page</calcite-button>
<calcite-dropdown-group group-title="Switch layout" selection-mode="none">
<calcite-dropdown-item icon-start="home" disabled>Home page</calcite-dropdown-item>
<calcite-dropdown-item icon-start="search">Search</calcite-dropdown-item>
<calcite-dropdown-item icon-start="file">Content</calcite-dropdown-item>
<calcite-dropdown-item icon-start="exclamation-mark-circle">404 page</calcite-dropdown-item>
</calcite-dropdown-group>
</calcite-dropdown>
</div>
<div slot="content-end" class="header-actions">
<calcite-button icon-start="effects" round kind="neutral" appearance="outline"></calcite-button>
<calcite-dropdown width="m" placement="bottom" offset-distance="12">
<calcite-button slot="trigger" appearance="outline" kind="neutral" icon-start="dimensions-unit" icon-end="chevron-down">Auto</calcite-button>
<calcite-dropdown-group group-title="Select device" selection-mode="none">
<calcite-dropdown-item icon-start="dimensions-unit" disabled>Auto</calcite-dropdown-item>
<calcite-dropdown-item icon-start="monitor">Desktop</calcite-dropdown-item>
<calcite-dropdown-item icon-start="tablet">Tablet</calcite-dropdown-item>
<calcite-dropdown-item icon-start="mobile">Mobile</calcite-dropdown-item>
</calcite-dropdown-group>
</calcite-dropdown>
<div class="header-actions-group">
<calcite-button icon-start="undo" round kind="neutral" appearance="solid" label="undo"></calcite-button>
<calcite-button icon-start="redo" round kind="neutral" appearance="solid" disabled label="redo"></calcite-button>
</div>
<div class="header-actions-group">
<calcite-popover heading="Unable to save" reference-element="invalid-popover-nav">
<p>You have invalid settings in your layout, check your Layout panel to address errors.</p>
</calcite-popover>
<calcite-button icon-start="exclamation-mark-circle" round kind="danger" appearance="transparent" label="invalid layout" id"invalid-popover-nav"></calcite-button>
<calcite-button disabled round kind="inverse">Save</calcite-button>
</div>
</div>
</calcite-navigation> -->
<calcite-navigation slot="header" class="nav">
<calcite-navigation-logo slot="logo" heading="Entity title goes here and is truncated to N chara..." description="Version: {version.title/timestamp}"></calcite-navigation-logo>
<calcite-chip slot="content-start" scale="s" appearance="outline" kind="brand">Published version</calcite-chip>
<!-- <div slot="content-start">
<calcite-dropdown width="m" placement="bottom-start" offset-distance="12">
<calcite-button slot="trigger" appearance="transparent" kind="neutral" icon-start="ellipsis"></calcite-button>
<calcite-dropdown-group group-title="More actions" selection-mode="none">
<calcite-dropdown-item icon-start="recent">View versions</calcite-dropdown-item>
<calcite-dropdown-item icon-start="palette">Change theme</calcite-dropdown-item>
<calcite-dropdown-item icon-start="gear">Manage entity.type</calcite-dropdown-item>
<calcite-dropdown-item icon-start="book">Open documentation</calcite-dropdown-item>
<calcite-dropdown-item icon-start="question">Get support</calcite-dropdown-item>
</calcite-dropdown-group>
</calcite-dropdown>
</div> -->
<div slot="content-center" class="header-actions">
<calcite-dropdown width="m" placement="bottom" offset-distance="12">
<calcite-button slot="trigger" appearance="transparent" kind="neutral" icon-start="home" icon-end="chevron-down">Home page</calcite-button>
<calcite-dropdown-group group-title="Switch layout" selection-mode="none">
<calcite-dropdown-item icon-start="home" disabled>Home page</calcite-dropdown-item>
<calcite-dropdown-item icon-start="banana">Header</calcite-dropdown-item>
<calcite-dropdown-item icon-start="footer">Footer</calcite-dropdown-item>
<calcite-dropdown-item icon-start="search">Search</calcite-dropdown-item>
<calcite-dropdown-item icon-start="file">Content</calcite-dropdown-item>
<calcite-dropdown-item icon-start="exclamation-mark-circle">404 page</calcite-dropdown-item>
</calcite-dropdown-group>
</calcite-dropdown>
</div>
<div slot="content-end" class="header-actions">
<calcite-button icon-start="effects" round kind="neutral" appearance="outline"></calcite-button>
<calcite-dropdown width="m" placement="bottom" offset-distance="12">
<calcite-button slot="trigger" appearance="outline" kind="neutral" icon-start="dimensions-unit" icon-end="chevron-down">Auto</calcite-button>
<calcite-dropdown-group group-title="Select device" selection-mode="none">
<calcite-dropdown-item icon-start="dimensions-unit" disabled>Auto</calcite-dropdown-item>
<calcite-dropdown-item icon-start="monitor">Desktop</calcite-dropdown-item>
<calcite-dropdown-item icon-start="tablet">Tablet</calcite-dropdown-item>
<calcite-dropdown-item icon-start="mobile">Mobile</calcite-dropdown-item>
</calcite-dropdown-group>
</calcite-dropdown>
<div class="header-actions-group">
<calcite-button icon-start="undo" round kind="neutral" appearance="solid" label="undo"></calcite-button>
<calcite-button icon-start="redo" round kind="neutral" appearance="solid" disabled label="redo"></calcite-button>
</div>
<div class="header-actions-group">
<calcite-popover heading="Unable to save" reference-element="invalid-popover-nav" auto-close placement="bottom-end">
<div class="popover-body">{invalidText}. Normally the save btn would be disabled too, but left active so that split button dropdown is accessible.</div>
</calcite-popover>
<calcite-button icon-start="exclamation-mark-circle" round kind="danger" appearance="transparent" label="invalid layout" id="invalid-popover-nav"></calcite-button>
<calcite-split-button kind="inverse" primary-text="Save">
<calcite-dropdown-group selection-mode="none">
<calcite-dropdown-item>Create version</calcite-dropdown-item>
<calcite-dropdown-item>Revert to last version</calcite-dropdown-item>
<calcite-dropdown-item>Export version</calcite-dropdown-item>
<calcite-dropdown-item>Publish version</calcite-dropdown-item>
</calcite-dropdown-group>
</calcite-split-button>
</div>
<calcite-button round kind="neutral" appearance="outline">Exit</calcite-button>
</div>
<calcite-navigation-user slot="user" full-name="Jack Dangermond" username="jdangermond" text-disabled></calcite-navigation-user>
</calcite-navigation>
<!-- The following panel shows only a single layout at a time. -->
<calcite-shell-panel slot="panel-start" position="start" display-mode="float-content">
<calcite-action-bar slot="action-bar" selection-appearance="highlight">
<calcite-action text="Layout" icon="ungroup-layout-elements" active></calcite-action>
<calcite-action text="Versions" icon="recent"></calcite-action>
<calcite-action text="Styles" icon="palette"></calcite-action>
<calcite-action text="Settings" icon="gear"></calcite-action>
</calcite-action-bar>
<calcite-panel heading="Layout">
<calcite-list drag-enabled display-mode="nested" selection-mode="none" filter-enabled>
<calcite-action slot="filter-actions-end" icon="ellipsis" text="More actions"></calcite-action>
<calcite-list-item label="Custom container" icon-start="layout-horizontal" expanded>
<calcite-list drag-enabled selection-mode="none">
<calcite-list-item label="Text" icon-start="text"></calcite-list-item>
<calcite-list-item label="Card" icon-start="list-rectangle">
<calcite-list selection-mode="none">
<calcite-list-item label="Image" icon-start="image"></calcite-list-item>
<calcite-list-item label="Header" icon-start="sub-fields">
<calcite-list selection-mode="none">
<calcite-list-item label="Title" icon-start="text"></calcite-list-item>
<calcite-list-item drag-disabled label="Add block" icon-start="plus-circle" class="list-action"></calcite-list-item>
</calcite-list>
</calcite-list-item>
<calcite-list-item label="Body" icon-start="sub-fields">
<calcite-list selection-mode="none">
<calcite-list-item drag-disabled label="Add block" icon-start="plus-circle" class="list-action"></calcite-list-item>
</calcite-list>
</calcite-list-item>
<calcite-list-item label="Footer" icon-start="sub-fields">
<calcite-list selection-mode="none">
<calcite-list-item label="Button" icon-start="button"></calcite-list-item>
<calcite-list-item drag-disabled label="Add block" icon-start="plus-circle" class="list-action"></calcite-list-item>
</calcite-list>
</calcite-list-item>
</calcite-list>
</calcite-list-item>
<calcite-list-item label="Card" icon-start="list-rectangle">
<calcite-list selection-mode="none">
<calcite-list-item label="Image" icon-start="image"></calcite-list-item>
<calcite-list-item label="Header" icon-start="sub-fields">
<calcite-list selection-mode="none">
<calcite-list-item label="Title" icon-start="text"></calcite-list-item>
<calcite-list-item drag-disabled label="Add block" icon-start="plus-circle" class="list-action"></calcite-list-item>
</calcite-list>
</calcite-list-item>
<calcite-list-item label="Body" icon-start="sub-fields">
<calcite-list selection-mode="none">
<calcite-list-item label="Metric" icon-start="gauge-summary"></calcite-list-item>
<calcite-list-item drag-disabled label="Add block" icon-start="plus-circle" class="list-action"></calcite-list-item>
</calcite-list>
</calcite-list-item>
<calcite-list-item label="Footer" icon-start="sub-fields">
<calcite-list selection-mode="none">
<calcite-list-item label="Button" icon-start="button"></calcite-list-item>
<calcite-list-item drag-disabled label="Add block" icon-start="plus-circle" class="list-action"></calcite-list-item>
</calcite-list>
</calcite-list-item>
</calcite-list>
</calcite-list-item>
<calcite-list-item drag-disabled label="Add block" icon-start="plus-circle" class="list-action"></calcite-list-item>
</calcite-list>
</calcite-list-item>
<calcite-list-item drag-disabled label="Add container" icon-start="plus-circle" class="list-action"></calcite-list-item>
</calcite-list>
</calcite-panel>
</calcite-shell-panel>
<!-- The following panel shows a combined layout tree wherein the header, body, footer, and float are all displayed at once. -->
<!-- <calcite-shell-panel slot="panel-start" position="start" display-mode="float-content">
<calcite-action-bar slot="action-bar" selection-appearance="highlight">
<calcite-action text="Layout" icon="ungroup-layout-elements" active></calcite-action>
<calcite-action text="Versions" icon="recent"></calcite-action>
<calcite-action text="Styles" icon="palette"></calcite-action>
<calcite-action text="Settings" icon="gear"></calcite-action>
</calcite-action-bar>
<calcite-panel heading="Layout">
<calcite-list drag-enabled display-mode="nested" selection-mode="none" filter-enabled>
<calcite-action slot="filter-actions-end" icon="ellipsis" text="More actions"></calcite-action>
<calcite-list-item-group heading="Header">
<calcite-list-item label="Information banner" icon-start="layout-horizontal">
<calcite-list selection-mode="none">
<calcite-list-item label="Text" icon-start="text"></calcite-list-item>
<calcite-list-item drag-disabled label="Add container" icon-start="plus-circle" class="list-action"></calcite-list-item>
</calcite-list>
</calcite-list-item>
<calcite-list-item label="Navigation" icon-start="layout-horizontal">
<calcite-list drag-enabled selection-mode="none">
<calcite-list-item label="Logo" icon-start="image"></calcite-list-item>
<calcite-list-item label="Container" icon-start="layout-vertical">
<calcite-list drag-enabled selection-mode="none">
<calcite-list-item label="Container" icon-start="layout-horizontal">
<calcite-list drag-enabled selection-mode="none">
<calcite-list-item label="Text" icon-start="text"></calcite-list-item>
<calcite-list-item label="Socials" icon-start="layout-horizontal">
<calcite-list drag-enabled selection-mode="none">
<calcite-list-item label="Facebook" icon-start="link"></calcite-list-item>
<calcite-list-item label="LinkedIn" icon-start="link"></calcite-list-item>
<calcite-list-item drag-disabled label="Add container" icon-start="plus-circle" class="list-action"></calcite-list-item>
</calcite-list>
</calcite-list-item>
<calcite-list-item drag-disabled label="Add container" icon-start="plus-circle" class="list-action"></calcite-list-item>
</calcite-list>
</calcite-list-item>
<calcite-list-item label="Menu" icon-start="link">
<calcite-list drag-enabled selection-mode="none">
<calcite-list-item label="Menu link" icon-start="link"></calcite-list-item>
<calcite-list-item label="Menu link" icon-start="link"></calcite-list-item>
<calcite-list-item label="Dropdown menu" icon-start="sub-fields">
<calcite-list drag-enabled selection-mode="none">
<calcite-list-item label="Menu link" icon-start="link"></calcite-list-item>
<calcite-list-item label="Menu link" icon-start="link"></calcite-list-item>
<calcite-list-item drag-disabled label="Add container" icon-start="plus-circle" class="list-action"></calcite-list-item>
</calcite-list>
</calcite-list-item>
<calcite-list-item drag-disabled label="Add container" icon-start="plus-circle" class="list-action"></calcite-list-item>
</calcite-list>
</calcite-list-item>
<calcite-list-item drag-disabled label="Add container" icon-start="plus-circle" class="list-action"></calcite-list-item>
</calcite-list>
</calcite-list-item>
<calcite-list-item drag-disabled label="Add container" icon-start="plus-circle" class="list-action"></calcite-list-item>
</calcite-list>
</calcite-list-item>
<calcite-list-item drag-disabled label="Add container" icon-start="plus-circle" class="list-action"></calcite-list-item>
</calcite-list-item-group>
<calcite-list-item-group heading="Body">
<calcite-list-item label="Custom container" icon-start="layout-horizontal">
<calcite-list drag-enabled selection-mode="none">
<calcite-list-item label="Text" icon-start="text"></calcite-list-item>
<calcite-list-item label="Card" icon-start="list-rectangle">
<calcite-list selection-mode="none">
<calcite-list-item label="Image" icon-start="image"></calcite-list-item>
<calcite-list-item label="Header" icon-start="sub-fields">
<calcite-list selection-mode="none">
<calcite-list-item label="Title" icon-start="text"></calcite-list-item>
<calcite-list-item drag-disabled label="Add block" icon-start="plus-circle" class="list-action"></calcite-list-item>
</calcite-list>
</calcite-list-item>
<calcite-list-item label="Body" icon-start="sub-fields">
<calcite-list selection-mode="none">
<calcite-list-item drag-disabled label="Add block" icon-start="plus-circle" class="list-action"></calcite-list-item>
</calcite-list>
</calcite-list-item>
<calcite-list-item label="Footer" icon-start="sub-fields">
<calcite-list selection-mode="none">
<calcite-list-item label="Button" icon-start="button"></calcite-list-item>
<calcite-list-item drag-disabled label="Add block" icon-start="plus-circle" class="list-action"></calcite-list-item>
</calcite-list>
</calcite-list-item>
</calcite-list>
</calcite-list-item>
<calcite-list-item label="Card" icon-start="list-rectangle">
<calcite-list selection-mode="none">
<calcite-list-item label="Image" icon-start="image"></calcite-list-item>
<calcite-list-item label="Header" icon-start="sub-fields">
<calcite-list selection-mode="none">
<calcite-list-item label="Title" icon-start="text"></calcite-list-item>
<calcite-list-item drag-disabled label="Add block" icon-start="plus-circle" class="list-action"></calcite-list-item>
</calcite-list>
</calcite-list-item>
<calcite-list-item label="Body" icon-start="sub-fields">
<calcite-list selection-mode="none">
<calcite-list-item label="Metric" icon-start="gauge-summary"></calcite-list-item>
<calcite-list-item drag-disabled label="Add block" icon-start="plus-circle" class="list-action"></calcite-list-item>
</calcite-list>
</calcite-list-item>
<calcite-list-item label="Footer" icon-start="sub-fields">
<calcite-list selection-mode="none">
<calcite-list-item label="Button" icon-start="button"></calcite-list-item>
<calcite-list-item drag-disabled label="Add block" icon-start="plus-circle" class="list-action"></calcite-list-item>
</calcite-list>
</calcite-list-item>
</calcite-list>
</calcite-list-item>
<calcite-list-item drag-disabled label="Add block" icon-start="plus-circle" class="list-action"></calcite-list-item>
</calcite-list>
</calcite-list-item>
<calcite-list-item drag-disabled label="Add container" icon-start="plus-circle" class="list-action"></calcite-list-item>
</calcite-list-item-group>
<calcite-list-item-group heading="Footer">
<calcite-list-item label="Custom section" icon-start="layout-horizontal">
<calcite-chip slot="content-bottom" icon="exclamation-mark-circle" scale="s" appearance="outline" class="chip-error">Error in section</calcite-chip>
<calcite-list drag-enabled selection-mode="none">
<calcite-list-item label="Text" icon-start="text"></calcite-list-item>
<calcite-list-item label="Image" icon-start="image"></calcite-list-item>
<calcite-list-item label="Container" icon-start="layout-vertical">
<calcite-list drag-enabled selection-mode="none">
<calcite-list-item label="Link" icon-start="link"></calcite-list-item>
<calcite-list-item label="Link" icon-start="link"></calcite-list-item>
</calcite-list>
</calcite-list-item>
</calcite-list>
</calcite-list-item>
<calcite-list-item label="Product footer" icon-start="layout-horizontal">
<calcite-list drag-enabled selection-mode="none">
<calcite-list-item label="Branding" icon-start="cube"></calcite-list-item>
<calcite-list-item label="Actions" icon-start="layout-horizontal">
<calcite-list drag-enabled selection-mode="none">
<calcite-list-item label="Feeds" icon-start="rss"></calcite-list-item>
<calcite-list-item label="Privacy" icon-start="security"></calcite-list-item>
</calcite-list>
</calcite-list-item>
</calcite-list>
</calcite-list-item>
<calcite-list-item drag-disabled label="Add container" icon-start="plus-circle" class="list-action"></calcite-list-item>
</calcite-list-item-group>
<calcite-list-item-group heading="Float">
<calcite-list-item label="Privacy notice" icon-start="security">
</calcite-list-item>
<calcite-list-item label="Actions" icon-start="layout-vertical">
<calcite-list drag-enabled selection-mode="none">
<calcite-list-item label="Favorite" icon-start="star"></calcite-list-item>
<calcite-list-item label="Assistant" icon-start="effects">
</calcite-list-item>
</calcite-list>
</calcite-list-item>
</calcite-list-item-group>
</calcite-list>
</calcite-panel>
</calcite-shell-panel> -->
<!-- The following panel shows version switcher. -->
<!-- <calcite-shell-panel slot="panel-start" position="start" display-mode="float-content">
<calcite-action-bar slot="action-bar" selection-appearance="highlight">
<calcite-action text="Layout" icon="ungroup-layout-elements"></calcite-action>
<calcite-action text="Styles" icon="palette"></calcite-action>
<calcite-action text="Versions" icon="recent" active></calcite-action>
<calcite-action text="Settings" icon="gear"></calcite-action>
</calcite-action-bar>
<calcite-panel heading="Versions">
<calcite-list selection-mode="single-persist" selection-appearance="highlight" filter-enabled>
<calcite-action slot="filter-actions-end" icon="ellipsis" text="More actions"></calcite-action>
<calcite-list-item-group heading="Published version">
<calcite-list-item label="{version.title}" description="{timestamp}" selected>
<calcite-action slot="actions-end" icon="ellipsis"></calcite-action>
</calcite-list-item>
</calcite-list-item-group>
<calcite-list-item-group heading="Other versions">
<calcite-list-item label="{version.title}" description="{timestamp}">
<calcite-action slot="actions-end" icon="ellipsis"></calcite-action>
</calcite-list-item>
<calcite-list-item label="{version.title}" description="{timestamp}">
<calcite-action slot="actions-end" icon="ellipsis"></calcite-action>
</calcite-list-item>
<calcite-list-item label="{version.title}" description="{timestamp}">
<calcite-action slot="actions-end" icon="ellipsis"></calcite-action>
</calcite-list-item>
<calcite-list-item label="{version.title}" description="{timestamp}">
<calcite-action slot="actions-end" icon="ellipsis"></calcite-action>
</calcite-list-item>
<calcite-list-item label="{version.title}" description="{timestamp}">
<calcite-action slot="actions-end" icon="ellipsis"></calcite-action>
</calcite-list-item>
<calcite-list-item label="{version.title}" description="{timestamp}">
<calcite-action slot="actions-end" icon="ellipsis"></calcite-action>
</calcite-list-item>
</calcite-list-item-group>
</calcite-list>
</calcite-panel>
</calcite-shell-panel> -->
<div slot="panel-top" class="layout">
<div class="info-banner">Hello there, I'm the information banner!</div>
<div class="section-h nav">
<div class="nav-img">
<img src="https://www.mfc.ms.gov/wp-content/uploads/2020/11/Smokey-Head.png" height=100 />
</div>
<calcite-navigation class="primary-nav">
<calcite-navigation-logo slot="logo" heading="Brollywood"></calcite-navigation-logo>
<div slot="content-end" class="socials">
<calcite-button icon-start="banana" appearance="transparent" kind="neutral"></calcite-button>
<calcite-button icon-start="banana" appearance="transparent" kind="neutral"></calcite-button>
</div>
<calcite-navigation slot="navigation-secondary" class="secondary-nav">
<calcite-menu slot="content-start">
<calcite-menu-item text="Menu link"></calcite-menu-item>
<calcite-menu-item text="Menu link"></calcite-menu-item>
<calcite-menu-item text="Menu link"></calcite-menu-item>
</calcite-menu>
</calcite-navigation>
</calcite-navigation>
</div>
<div class="section-h padding-1rem">
<div class="block-text">
<h2>This is a heading</h2>
<h3>This is a lower level heading</h3>
<p><b>Pay attention!</b> The section has a direction of horizontal but these appear to be vertical. You might be asking, "Brian did you give up on your mark-up?" Yes is the answer, but I thought it was a happy accident to demonstrate how a horizontal row should still wrap down...so there you go.</p>
<p>Also, you might be like "Brian, why does the visual of the layout tree change from Header/Body to Footer/Float?" Great question, the first two are the layout tree using calcite-block-group and calcite-block while the latter two are calcite-list, calcite-list-group, and calcite-list item. Much needs to be sussed, but I have a visual preference...</p>
</div>
<calcite-card-group>
<calcite-card>
<img slot="thumbnail" src="https://placebear.com/240/180" />
<span slot="heading">Card title goes here</span>
<div class="block-empty">
<calcite-button appearance="transparent">Content</calcite-button>
</div>
<calcite-button slot="footer-start" width="full">Button</calcite-button>
</calcite-card>
<calcite-card>
<img slot="thumbnail" src="https://placebear.com/240/180" />
<span slot="heading">Save the bananas foundation</span>
<div class="metric">
<div class="metric-heading">Progress toward goal</div>
<div class="metric-body">40,000</div>
<div class="metric-footer">Bananas saved</div>
</div>
<calcite-button slot="footer-start" width="full">Contribute</calcite-button>
</calcite-card>
</calcite-card-group>
</div>
</div>
<calcite-shell-panel slot="panel-end" position="end" display-mode="float-content">
<!-- <calcite-action-bar slot="action-bar"></calcite-action-bar> -->
<calcite-panel heading="Gallery" icon="four-by-three-grid">
<calcite-tabs class="panel-tabs">
<calcite-tab-nav slot="title-group">
<calcite-tab-title selected>Settings</calcite-tab-title>
<calcite-tab-title>Styles</calcite-tab-title>
</calcite-tab-nav>
<calcite-tab selected class="tab">
<div class="config">{config editor}</div>
</calcite-tab>
</calcite-tabs>
</calcite-panel>
</calcite-shell-panel>
</calcite-shell>
</body>
</html>
Raw
style.css
/* Global overrides */
calcite-button {
--calcite-button-corner-radius: var(--calcite-corner-radius-round);
}
calcite-split-button {
--calcite-split-button-corner-radius: var(--calcite-corner-radius-round);
}
calcite-list-item {
--calcite-list-border-color: transparent;
}
calcite-navigation {
--calcite-navigation-border-color: transparent;
}
h2 {
font-size: var(--calcite-font-size-2);
font-weight: var(--calcite-font-weight-medium);
}
h3 {
font-size: var(--calcite-font-size-1);
font-weight: var(--calcite-font-weight-medium);
}
p {
font-size: var(--calcite-font-size-0);
font-weight: var(--calcite-font-weight-normal);
line-height: 1.375;
}
b {
font-weight: var(--calcite-font-weight-bold);
}
/* Generic classes */
.section-h {
display: flex;
flex-wrap: wrap;
}
.padding-1rem {
padding: 1rem;
}
/* General structure */
.shell {
background-color: var(--calcite-color-background);
}
.popover-body {
padding: 0.75rem;
max-width: 20rem;
}
/* Layout nav bar */
.entity {
display: flex;
gap: 0.5rem;
align-items: center;
}
.entity-title {
font-size: var(--calcite-font-size-0);
font-weight: var(--calcite-font-weight-bold);
}
.header-actions {
display: flex;
gap: 1rem;
/* padding: 0 0.5rem; */
}
/* Layout tree */
.sub-block {
--calcite-block-border-color: transparent;
}
.list-action {
--calcite-list-label-text-color: var(--calcite-color-brand);
--calcite-list-icon-color: var(--calcite-color-brand);
}
.chip-error {
--calcite-chip-border-color: var(--calcite-color-status-danger);
margin-left: 3rem;
}
/* Layout preview */
.layout {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
background-color: var(--calcite-color-foreground-1);
border-radius: var(--calcite-corner-radius-round);
box-shadow: var(--calcite-shadow-sm);
height: 100%;
}
.info-banner {
background-color: var(--calcite-color-status-info);
color: var(--calcite-color-text-inverse);
font-weight: var(--calcite-font-weight-bold);
padding: 1rem;
border-top-left-radius: var(--calcite-corner-radius-round);
border-top-right-radius: var(--calcite-corner-radius-round);
text-align: center;
}
.nav {
border-bottom: 1px solid var(--calcite-color-border-1);
}
.nav-img {
padding:0 1rem;
}
.primary-nav {
flex-grow:1;
}
.socials {
display: flex;
gap:0rem;
padding-right:0.75rem;
}
.block-text {
max-width: 360rem;
}
.block-empty {
border: 1px dashed var(--calcite-color-brand);
padding:1rem;
text-align: center;
}
.metric {
font-size: var(--calcite-font-size--1);
}
.metric-body {
font-size: var(--calcite-font-size-2);
font-weight: var(--calcite-font-weight-bold);
}
/* Layout config panel */
.config {
background-color: var(--calcite-color-foreground-2);
height: 24rem;
}
.panel-tabs {
background-color: var(--calcite-color-foreground-1);
padding-top: 0.5rem;
}
.tab {
padding: 0 0.5rem;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment