Mirrors/tabler
1
0 Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-10-12 05:06:55 +04:00
Code Issues Projects Releases Wiki Activity

Align core, shared and preview with the design-system skill (#3010)

Browse Source
This commit is contained in:
Paweł Kuna authored and Bartek committed 2026-10-02 12:04:57 +02:00
1 parent 171d0c9b5d
commit 2b355ee76f
158 files changed
+1025 -947
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

preview/pages/2-step-verification-code.astro
+2 -2
View File
@@ -7,10 +7,10 @@ import CardTitle from '@ui/CardTitle.astro'
import OtpInput from '@ui/OtpInput.astro'
---
<SingleLayout title="2-Step Verification">
<SingleLayout title="2-step verification">
<form class="card card-md" action="./" method="get" novalidate>
<div class="card-body">
<CardTitle as="h1" class="text-center mb-4">Authenticate Your Account</CardTitle>
<CardTitle as="h1" class="text-center mb-4">Authenticate your account</CardTitle>
<p class="my-4 text-center">
Please confirm your account by entering the authorization code sent to <strong>+1 856-672-8552</strong>.
preview/pages/2-step-verification.astro
+3 -3
View File
@@ -7,10 +7,10 @@ import flags from '@data/flags.json'
import CardTitle from '@ui/CardTitle.astro'
---
<SingleLayout title="2-Step Verification">
<SingleLayout title="2-step verification">
<form class="card card-md" action="./2-step-verification-code.html" method="get" novalidate>
<div class="card-body">
<CardTitle as="h1" class="text-center mb-4">2-Step Verification</CardTitle>
<CardTitle as="h1" class="text-center mb-4">2-step verification</CardTitle>
<FormGroup label="Country" for="verify-country">
<select class="form-select" id="verify-country" autocomplete="country-name">
@@ -18,7 +18,7 @@ import CardTitle from '@ui/CardTitle.astro'
</select>
</FormGroup>
<FormGroup label="Your Phone Number" for="verify-phone" class="mb-4">
<FormGroup label="Your phone number" for="verify-phone" class="mb-4">
<div class="input-group">
<span class="input-group-text">+1</span>
<input type="tel" class="form-control" id="verify-phone" placeholder="Enter phone number" autocomplete="tel" />
preview/pages/all-elements.astro
+83 -85
View File
@@ -70,7 +70,7 @@ function greetUser(name) {
}`
---
<DefaultLayout title="All Elements - Kitchen Sink" pageHeader="All Elements" pageMenu="base.all-elements" pageLibs={['nouislider', 'star-rating.js', 'tom-select']}>
<DefaultLayout title="All elements - Kitchen sink" pageHeader="All elements" pageMenu="base.all-elements" pageLibs={['nouislider', 'star-rating.js', 'tom-select']}>
<div class="row row-cards">
<!-- Typography Section -->
<div class="col-12">
@@ -92,7 +92,7 @@ function greetUser(name) {
This is a regular paragraph with <strong>bold text</strong>, <em>italic text</em>, and
<u>underlined text</u>.
</p>
<p><small class="text-muted">This is small muted text.</small></p>
<p><small class="text-secondary">This is small muted text.</small></p>
<p class="text-primary">Primary text color</p>
<p class="text-success">Success text color</p>
<p class="text-danger">Danger text color</p>
@@ -109,7 +109,7 @@ function greetUser(name) {
<CardBody>
<div class="row">
<div class="col-md-6">
<h4>Standard Buttons</h4>
<h4>Standard buttons</h4>
<ButtonList class="mb-3">
<Button text="Default" />
<Button text="Primary" color="primary" icon="star" />
@@ -121,14 +121,14 @@ function greetUser(name) {
</ButtonList>
</div>
<div class="col-md-6">
<h4>Button Sizes</h4>
<h4>Button sizes</h4>
<ButtonList class="mb-3 align-items-start">
<Button text="Small" size="sm" />
<Button text="Default" />
<Button text="Large" size="lg" />
</ButtonList>
<h4>Icon Buttons</h4>
<h4>Icon buttons</h4>
<ButtonList class="mb-3 align-items-start">
<Button icon="heart" iconOnly text="Heart" />
<Button icon="star" iconOnly text="Star" />
@@ -143,7 +143,7 @@ function greetUser(name) {
<!-- Cards Section -->
<div class="col-md-6">
<Card>
<CardHeader title="Simple Card" />
<CardHeader title="Simple card" />
<CardBody>
<p>This is a simple card with header and body content.</p>
</CardBody>
@@ -193,8 +193,8 @@ function greetUser(name) {
<Badge text="Danger" color="danger" />
</BadgeList>
<BadgeList>
<Badge text="With Icon" color="primary" icon="star" />
<Badge text="Light Badge" color="primary" light />
<Badge text="With icon" color="primary" icon="star" />
<Badge text="Light badge" color="primary" light />
</BadgeList>
</div>
</CardBody>
@@ -204,7 +204,7 @@ function greetUser(name) {
<!-- Progress Bars Section -->
<div class="col-md-6">
<Card>
<CardHeader title="Progress Bars" />
<CardHeader title="Progress bars" />
<CardBody>
<div class="space-y">
<div>
@@ -227,20 +227,20 @@ function greetUser(name) {
<!-- Form Elements Section -->
<div class="col-12">
<Card>
<CardHeader title="Form Elements" />
<CardHeader title="Form elements" />
<CardBody>
<div class="row">
<div class="col-md-6">
<FormGroup label="Text Input" for="all-elements-text-input">
<FormGroup label="Text input" for="all-elements-text-input">
<input type="text" class="form-control" id="all-elements-text-input" placeholder="Enter text" />
</FormGroup>
<FormGroup label="Email Input" for="all-elements-email-input">
<FormGroup label="Email input" for="all-elements-email-input">
<input type="email" class="form-control" id="all-elements-email-input" placeholder="Enter email" />
</FormGroup>
<FormGroup label="Password Input" for="all-elements-password-input">
<FormGroup label="Password input" for="all-elements-password-input">
<input type="password" class="form-control" id="all-elements-password-input" placeholder="Enter password" autocomplete="current-password" />
</FormGroup>
<FormGroup label="Select Dropdown" for="select-demo-select">
<FormGroup label="Select dropdown" for="select-demo-select">
<DataSelect id="demo-select" values={['Option 1', 'Option 2', 'Option 3']} />
</FormGroup>
</div>
@@ -252,7 +252,7 @@ function greetUser(name) {
<Check title="Option 1" type="checkbox" />
<Check title="Option 2" type="checkbox" checked />
</FormGroup>
<FormGroup label="Radio Buttons" associate={false}>
<FormGroup label="Radio buttons" associate={false}>
<Check title="Option 1" type="radio" name="radio-demo" />
<Check title="Option 2" type="radio" name="radio-demo" checked />
</FormGroup>
@@ -269,7 +269,7 @@ function greetUser(name) {
<!-- Navigation Elements -->
<div class="col-12">
<Card>
<CardHeader title="Navigation Elements" />
<CardHeader title="Navigation elements" />
<CardBody>
<div class="row">
<div class="col-md-6">
@@ -278,7 +278,7 @@ function greetUser(name) {
<Nav tabs class="mb-4" />
</div>
<h4>Pills Navigation</h4>
<h4>Pills navigation</h4>
<div class="mb-3">
<Nav pills class="mb-4" />
</div>
@@ -303,14 +303,14 @@ function greetUser(name) {
<Card>
<CardHeader title="Lists" />
<CardBody>
<h4>Unordered List</h4>
<h4>Unordered list</h4>
<ul>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ul>
<h4>Ordered List</h4>
<h4>Ordered list</h4>
<ol>
<li>First item</li>
<li>Second item</li>
@@ -443,7 +443,7 @@ function greetUser(name) {
<!-- Interactive Elements Section -->
<div class="col-12">
<Card>
<CardHeader title="Interactive Elements" />
<CardHeader title="Interactive elements" />
<CardBody>
<div class="row">
<div class="col-md-6">
@@ -484,9 +484,9 @@ function greetUser(name) {
<!-- Status & Feedback Elements -->
<div class="col-md-6">
<Card>
<CardHeader title="Status Elements" />
<CardHeader title="Status elements" />
<CardBody>
<h4>Status Dots</h4>
<h4>Status dots</h4>
<div class="mb-3">
<StatusDot color="success" ariaLabel="Success" />
<StatusDot color="warning" ariaLabel="Warning" />
@@ -494,7 +494,7 @@ function greetUser(name) {
<StatusDot color="info" animated ariaLabel="Info" />
</div>
<h4>Toast Notifications</h4>
<h4>Toast notifications</h4>
<div class="mb-3">
<Toast toastId="demo-toast" show text="This is a sample toast message!" />
</div>
@@ -505,7 +505,7 @@ function greetUser(name) {
<!-- Enhanced Form Elements -->
<div class="col-md-6">
<Card>
<CardHeader title="Enhanced Forms" />
<CardHeader title="Enhanced forms" />
<CardBody>
<h4>Input with Icons</h4>
<div class="mb-3">
@@ -515,7 +515,7 @@ function greetUser(name) {
<InputIcon placeholder="Loading..." loader />
</div>
<h4>Input Groups</h4>
<h4>Input groups</h4>
<div class="mb-3">
<InputGroup prepend="@" placeholder="Username" />
</div>
@@ -523,7 +523,7 @@ function greetUser(name) {
<InputGroup append=".00" prepend="$" placeholder="Price" />
</div>
<h4>Range Slider</h4>
<h4>Range slider</h4>
<div class="mb-3">
<Range id="demo-range" min={0} max={100} value={50} />
</div>
@@ -538,16 +538,16 @@ function greetUser(name) {
<CardBody>
<h4>Tags</h4>
<TagList class="mb-3">
<Tag text="Primary Tag" icon="star" />
<Tag text="Success Tag" status="success" />
<Tag text="Warning Tag" status="warning" />
<Tag text="Primary tag" icon="star" />
<Tag text="Success tag" status="success" />
<Tag text="Warning tag" status="warning" />
</TagList>
<h4>Ribbons</h4>
<div class="position-relative mb-4" style="height: 100px; background-color: var(--tblr-bg-surface-secondary); border-radius: 8px;">
<div class="position-relative bg-surface-secondary rounded-3 p-6 mb-4">
<Ribbon text="New" color="success" />
</div>
<div class="position-relative mb-3" style="height: 100px; background: var(--tblr-bg-surface-secondary); border-radius: 8px;">
<div class="position-relative bg-surface-secondary rounded-3 p-6 mb-3">
<Ribbon text="Sale" color="danger" top />
</div>
</CardBody>
@@ -557,7 +557,7 @@ function greetUser(name) {
<!-- Media Elements -->
<div class="col-md-6">
<Card>
<CardHeader title="Media Elements" />
<CardHeader title="Media elements" />
<CardBody>
<h4>Flags</h4>
<div class="mb-3">
@@ -575,7 +575,7 @@ function greetUser(name) {
</div>
</div>
<h4>Payment Icons</h4>
<h4>Payment icons</h4>
<div class="mb-3">
<div class="d-flex flex-wrap gap-2">
{
@@ -605,7 +605,7 @@ function greetUser(name) {
<!-- Empty State Section -->
<div class="col-md-6">
<Card>
<CardHeader title="Empty State" />
<CardHeader title="Empty state" />
<CardBody>
<Empty title="No data found" description="Try adjusting your search or filter to find what you're looking for." illustration="boy-girl.svg" buttonText="Add new item" buttonIcon="plus" />
</CardBody>
@@ -618,8 +618,8 @@ function greetUser(name) {
<CardHeader title="Modals" />
<CardBody>
<ButtonList>
<button class="btn" data-bs-toggle="modal" data-bs-target="#modal-demo"> Open Modal </button>
<button class="btn" data-bs-toggle="modal" data-bs-target="#modal-success"> Success Modal </button>
<button class="btn" data-bs-toggle="modal" data-bs-target="#modal-demo"> Open modal </button>
<button class="btn" data-bs-toggle="modal" data-bs-target="#modal-success"> Success modal </button>
</ButtonList>
<!-- Demo Modal -->
@@ -627,7 +627,7 @@ function greetUser(name) {
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal Title</h5>
<h5 class="modal-title">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
@@ -657,7 +657,7 @@ function greetUser(name) {
<button class="btn w-100" data-bs-dismiss="modal">Cancel</button>
</div>
<div class="col">
<button class="btn btn-success w-100" data-bs-dismiss="modal">OK</button>
<button class="btn btn-primary w-100" data-bs-dismiss="modal">OK</button>
</div>
</div>
</div>
@@ -672,18 +672,18 @@ function greetUser(name) {
<!-- Button Groups Section -->
<div class="col-md-6">
<Card>
<CardHeader title="Button Groups" />
<CardHeader title="Button groups" />
<CardBody>
<h4>Basic Button Group</h4>
<h4>Basic button group</h4>
<ButtonGroup class="mb-3">
<button type="button" class="btn">Left</button>
<button type="button" class="btn">Middle</button>
<button type="button" class="btn">Right</button>
</ButtonGroup>
<h4>Button Toolbar</h4>
<div class="btn-toolbar mb-3" role="toolbar">
<ButtonGroup class="me-2">
<h4>Button toolbar</h4>
<div class="btn-toolbar gap-2 mb-3" role="toolbar">
<ButtonGroup>
<button type="button" class="btn">1</button>
<button type="button" class="btn">2</button>
<button type="button" class="btn">3</button>
@@ -694,7 +694,7 @@ function greetUser(name) {
</ButtonGroup>
</div>
<h4>Vertical Button Group</h4>
<h4>Vertical button group</h4>
<ButtonGroup vertical={true}>
<button type="button" class="btn">Top</button>
<button type="button" class="btn">Middle</button>
@@ -707,24 +707,24 @@ function greetUser(name) {
<!-- Segmented Navigation Section -->
<div class="col-md-6">
<Card>
<CardHeader title="Segmented Navigation" />
<CardHeader title="Segmented navigation" />
<CardBody>
<h4>Basic Segmented</h4>
<h4>Basic segmented</h4>
<div class="mb-3">
<NavSegmented items={['Home', 'Profile', 'Settings']} />
</div>
<h4>With Icons</h4>
<h4>With icons</h4>
<div class="mb-3">
<NavSegmented icons={['home', 'user', 'settings']} />
</div>
<h4>With Emojis</h4>
<h4>With emojis</h4>
<div class="mb-3">
<NavSegmented items={['👦', '👦🏿', '👦🏾', '👦🏽', '👦🏼', '👦🏻']} />
</div>
<h4>With Icons and Text</h4>
<h4>With icons and text</h4>
<div class="mb-3">
<NavSegmented items={['Home', 'Profile', 'Settings']} icons={['home', 'user', 'settings']} />
</div>
@@ -739,17 +739,17 @@ function greetUser(name) {
<CardBody>
<div class="row">
<div class="col-md-6">
<h4>Basic Collapse</h4>
<button class="btn" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample"> Toggle Collapse </button>
<h4>Basic collapse</h4>
<button class="btn" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample"> Toggle collapse </button>
<div class="collapse" id="collapseExample">
<div class="card card-body">This is collapsed content that can be toggled. It's hidden by default and shown when the button is clicked.</div>
</div>
</div>
<div class="col-md-6">
<h4>Multiple Targets</h4>
<h4>Multiple targets</h4>
<ButtonList>
<button class="btn" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample1"> Toggle First </button>
<button class="btn" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2"> Toggle Second </button>
<button class="btn" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample1"> Toggle first </button>
<button class="btn" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2"> Toggle second </button>
</ButtonList>
<div class="collapse" id="multiCollapseExample1">
<div class="card card-body mb-2">First collapsible content.</div>
@@ -781,8 +781,8 @@ function greetUser(name) {
<div class="col-md-6">
<h4>Popovers</h4>
<ButtonList>
<button class="btn" data-bs-toggle="popover" data-bs-placement="top" title="Popover Title" data-bs-content="This is popover content on top"> Top Popover </button>
<button class="btn" data-bs-toggle="popover" data-bs-placement="right" title="Popover Title" data-bs-content="This is popover content on right"> Right Popover </button>
<button class="btn" data-bs-toggle="popover" data-bs-placement="top" title="Popover title" data-bs-content="This is popover content on top"> Top popover </button>
<button class="btn" data-bs-toggle="popover" data-bs-placement="right" title="Popover title" data-bs-content="This is popover content on right"> Right popover </button>
</ButtonList>
</div>
</div>
@@ -793,51 +793,49 @@ function greetUser(name) {
<!-- List Groups Section -->
<div class="col-md-6">
<Card>
<CardHeader title="List Groups" />
<CardBody class="p-0">
<ListGroup flush>
<ListGroupItem>
<Icon name="home" inline class="me-2" />
Home
</ListGroupItem>
<ListGroupItem active>
<Icon name="star" inline class="me-2" />
Active item
</ListGroupItem>
<ListGroupItem>
<Icon name="settings" inline class="me-2" />
Settings
</ListGroupItem>
<ListGroupItem>
<Icon name="user" inline class="me-2" />
Profile
</ListGroupItem>
<ListGroupItem disabled>
<Icon name="lock" inline class="me-2" />
Disabled item
</ListGroupItem>
</ListGroup>
</CardBody>
<CardHeader title="List groups" />
<ListGroup class="card-list-group">
<ListGroupItem>
<Icon inline name="home" class="me-2" />
Home
</ListGroupItem>
<ListGroupItem active>
<Icon inline name="star" class="me-2" />
Active item
</ListGroupItem>
<ListGroupItem>
<Icon inline name="settings" class="me-2" />
Settings
</ListGroupItem>
<ListGroupItem>
<Icon inline name="user" class="me-2" />
Profile
</ListGroupItem>
<ListGroupItem disabled>
<Icon inline name="lock" class="me-2" />
Disabled item
</ListGroupItem>
</ListGroup>
</Card>
</div>
<!-- Content Elements Section -->
<div class="col-md-6">
<Card>
<CardHeader title="Content Elements" />
<CardHeader title="Content elements" />
<CardBody>
<h4>Blockquote</h4>
<blockquote class="blockquote mb-4">
<p>This is a blockquote example with some sample text to demonstrate the styling.</p>
<footer class="blockquote-footer">
Someone famous in <cite title="Source Title">Source Title</cite>
Someone famous in <cite title="Source title">Source title</cite>
</footer>
</blockquote>
<h4>Code Block</h4>
<h4>Code block</h4>
<pre class="mb-3"><code set:html={codeExample} /></pre>
<h4>Inline Elements</h4>
<h4>Inline elements</h4>
<p>This paragraph contains <code>inline code</code>, <kbd>Ctrl + S</kbd> keyboard shortcut, and <mark>highlighted text</mark>.</p>
</CardBody>
</Card>
preview/pages/card-gradients.astro
+3 -3
View File
@@ -15,7 +15,7 @@ import { requireIndex } from '@shared/lib/array'
import DocsLink from '@ui/DocsLink.astro'
---
<DefaultLayout title="Card Gradients" pageMenu="base.cards.gradients">
<DefaultLayout title="Card gradients" pageMenu="base.cards.gradients">
<DocsLink slot="page-header-actions" path="/ui/components/card-gradient" />
<div class="row row-cards">
<div class="col-md-6">
@@ -44,10 +44,10 @@ import DocsLink from '@ui/DocsLink.astro'
<StatGradient title="Earned" value="$2,847" icon="credit-card" color="success" progress={75} />
</div>
<div class="col-12">
<StatGradient title="Pending Orders" value="47" icon="clock" color="yellow" progress={38} />
<StatGradient title="Pending orders" value="47" icon="clock" color="yellow" progress={38} />
</div>
<div class="col-12">
<StatGradient title="Cancelled Orders" value="12" icon="shopping-cart-x" color="red" progress={8} />
<StatGradient title="Cancelled orders" value="12" icon="shopping-cart-x" color="red" progress={8} />
</div>
</div>
</div>
preview/pages/cards-masonry.astro
+1 -1
View File
@@ -9,7 +9,7 @@ import BodyPlaceholder from '@shared/components/cards/BodyPlaceholder.astro'
const heights = [200, 150, 400, 300, 350, 600, 700, 200, 150, 250, 50, 400, 300, 200]
---
<DefaultLayout title="Cards Masonry" pageMenu="base.cards.masonry" pageLibs={['masonry']}>
<DefaultLayout title="Cards masonry" pageMenu="base.cards.masonry" pageLibs={['masonry']}>
<div class="row row-cards" data-masonry={'{"percentPosition": true }'}>
{
heights.map((height) => (
preview/pages/cookie-banner.astro
+2 -2
View File
@@ -14,10 +14,10 @@ import OffcanvasBody from '@ui/OffcanvasBody.astro'
<a href="./terms-of-service.html" target="_blank">Learn more</a>
</div>
<div class="col-auto">
<button type="button" class="btn btn-primary" data-bs-dismiss="offcanvas"> Essential Cookies Only </button>
<button type="button" class="btn btn-primary" data-bs-dismiss="offcanvas"> Essential cookies only </button>
</div>
<div class="col-auto">
<button type="button" class="btn btn-primary" data-bs-dismiss="offcanvas"> Allow All Cookies </button>
<button type="button" class="btn btn-primary" data-bs-dismiss="offcanvas"> Allow all cookies </button>
</div>
</div>
</div>
preview/pages/dashboard-crypto.astro
+14 -14
View File
@@ -43,7 +43,7 @@ const orders = cryptoOrders as { sell_orders: { price: string; btc: string; sum:
const operationCurrencies = currencies.slice(0, 20)
---
<DefaultLayout title="Crypto Dashboard" pageMenu="dashboards.crypto" pageLibs={['apexcharts']}>
<DefaultLayout title="Crypto dashboard" pageMenu="dashboards.crypto" pageLibs={['apexcharts']}>
<div class="row row-cards">
<div class="col-12">
<div class="row row-cards">
@@ -60,11 +60,11 @@ const operationCurrencies = currencies.slice(0, 20)
</div>
<div class="mb-1">
<span class="h3">${totalUsd}</span>
<span class="text-muted">{btcBalance} {btc.symbol}</span>
<span class="text-secondary">{btcBalance} {btc.symbol}</span>
</div>
<div class="mb-0">
<Trending value={btc.p24h} />
<span class="text-muted">Since last week</span>
<span class="text-secondary">Since last week</span>
</div>
</CardBody>
</Card>
@@ -83,10 +83,10 @@ const operationCurrencies = currencies.slice(0, 20)
</div>
<div class="mb-1">
<span class="h3">{usdBtc}</span>
<span class="text-muted">{btc.price}</span>
<span class="text-secondary">{btc.price}</span>
</div>
<div class="mb-0">
<span class="text-muted">Volume: {btc['volume-24h']}</span>
<span class="text-secondary">Volume: {btc['volume-24h']}</span>
</div>
</CardBody>
</Card>
@@ -105,10 +105,10 @@ const operationCurrencies = currencies.slice(0, 20)
</div>
<div class="mb-1">
<span class="h3">{ltcBtc}</span>
<span class="text-muted">{ltc.price}</span>
<span class="text-secondary">{ltc.price}</span>
</div>
<div class="mb-0">
<span class="text-muted">Volume: {ltc['volume-24h'].replace('$', '')}</span>
<span class="text-secondary">Volume: {ltc['volume-24h'].replace('$', '')}</span>
</div>
</CardBody>
</Card>
@@ -127,10 +127,10 @@ const operationCurrencies = currencies.slice(0, 20)
</div>
<div class="mb-1">
<span class="h3">{ethBtc}</span>
<span class="text-muted">{eth.price}</span>
<span class="text-secondary">{eth.price}</span>
</div>
<div class="mb-0">
<span class="text-muted">Volume: {eth['volume-24h'].replace('$', '')}</span>
<span class="text-secondary">Volume: {eth['volume-24h'].replace('$', '')}</span>
</div>
</CardBody>
</Card>
@@ -149,10 +149,10 @@ const operationCurrencies = currencies.slice(0, 20)
</div>
<div class="mb-1">
<span class="h3">{xmrBtc}</span>
<span class="text-muted">{xmr.price}</span>
<span class="text-secondary">{xmr.price}</span>
</div>
<div class="mb-0">
<span class="text-muted">Volume: {xmr['volume-24h'].replace('$', '')}</span>
<span class="text-secondary">Volume: {xmr['volume-24h'].replace('$', '')}</span>
</div>
</CardBody>
</Card>
@@ -261,7 +261,7 @@ const operationCurrencies = currencies.slice(0, 20)
<button type="button" class="btn btn-primary mb-3">Process to wallet</button>
</div>
<p class="text-muted mb-0 small">The final amount could change depending on current market conditions.</p>
<p class="text-secondary mb-0 small">The final amount could change depending on current market conditions.</p>
</CardBody>
</Card>
</div>
@@ -269,7 +269,7 @@ const operationCurrencies = currencies.slice(0, 20)
<div class="col-12 col-lg-6 col-xxl">
<Card>
<CardHeader>
<CardTitle class="mb-0">Sell Orders</CardTitle>
<CardTitle class="mb-0">Sell orders</CardTitle>
<CardActions>
<button class="btn btn-sm">View all</button>
</CardActions>
@@ -300,7 +300,7 @@ const operationCurrencies = currencies.slice(0, 20)
<div class="col-12 col-lg-6 col-xxl">
<Card>
<CardHeader>
<CardTitle class="mb-0">Buy Orders</CardTitle>
<CardTitle class="mb-0">Buy orders</CardTitle>
<CardActions>
<button class="btn btn-sm">View all</button>
</CardActions>
preview/pages/datatables.astro
+38 -41
View File
@@ -4,7 +4,6 @@ import { toUnixSeconds, formatLongDate } from '@shared/lib/date-format'
import { randomNumber, randomDate } from '@shared/lib/pseudo-random'
import Card from '@ui/Card.astro'
import CardHeader from '@ui/CardHeader.astro'
import CardBody from '@ui/CardBody.astro'
import CardTitle from '@ui/CardTitle.astro'
import CardSubtitle from '@ui/CardSubtitle.astro'
import Progress from '@ui/Progress.astro'
@@ -44,47 +43,45 @@ const valueNames = ['sort-name', 'sort-type', 'sort-city', 'sort-score', { attr:
<CardSubtitle>Click a column header to sort the rows by that value.</CardSubtitle>
</div>
</CardHeader>
<CardBody class="p-0">
<div id={`table-${id}`} class="table-responsive">
<table class="table">
<thead>
<tr>
<th><button class="table-sort" data-sort="sort-name">Name</button></th>
<th><button class="table-sort" data-sort="sort-city">City</button></th>
<th><button class="table-sort" data-sort="sort-type">Type</button></th>
<th><button class="table-sort" data-sort="sort-score">Score</button></th>
<th><button class="table-sort" data-sort="sort-date">Date</button></th>
<th><button class="table-sort" data-sort="sort-quantity">Quantity</button></th>
<th><button class="table-sort" data-sort="sort-progress">Progress</button></th>
</tr>
</thead>
<tbody class="table-tbody">
{
rows.map(({ rc, progress, quantity, dateSeconds, dateLabel }) => (
<tr>
<td class="sort-name">{rc.name}</td>
<td class="sort-city">{rc.city}</td>
<td class="sort-type">{rc.type}</td>
<td class="sort-score">{rc.score}</td>
<td class="sort-date" data-date={dateSeconds}>
{dateLabel}
</td>
<td class="sort-quantity">{quantity}</td>
<td class="sort-progress" data-progress={progress}>
<div class="row align-items-center">
<div class="col-12 col-lg-auto">{progress}%</div>
<div class="col">
<Progress value={progress} width="5rem" />
</div>
<div id={`table-${id}`} class="table-responsive">
<table class="table card-table">
<thead>
<tr>
<th><button class="table-sort" data-sort="sort-name">Name</button></th>
<th><button class="table-sort" data-sort="sort-city">City</button></th>
<th><button class="table-sort" data-sort="sort-type">Type</button></th>
<th><button class="table-sort" data-sort="sort-score">Score</button></th>
<th><button class="table-sort" data-sort="sort-date">Date</button></th>
<th><button class="table-sort" data-sort="sort-quantity">Quantity</button></th>
<th><button class="table-sort" data-sort="sort-progress">Progress</button></th>
</tr>
</thead>
<tbody class="table-tbody">
{
rows.map(({ rc, progress, quantity, dateSeconds, dateLabel }) => (
<tr>
<td class="sort-name">{rc.name}</td>
<td class="sort-city">{rc.city}</td>
<td class="sort-type">{rc.type}</td>
<td class="sort-score">{rc.score}</td>
<td class="sort-date" data-date={dateSeconds}>
{dateLabel}
</td>
<td class="sort-quantity">{quantity}</td>
<td class="sort-progress" data-progress={progress}>
<div class="row align-items-center">
<div class="col-12 col-lg-auto">{progress}%</div>
<div class="col">
<Progress value={progress} width="5rem" />
</div>
</td>
</tr>
))
}
</tbody>
</table>
</div>
</CardBody>
</div>
</td>
</tr>
))
}
</tbody>
</table>
</div>
</Card>
<TablerList id={id} valueNames={valueNames} />
preview/pages/dropzone.astro
+3 -3
View File
@@ -14,7 +14,7 @@ import DocsLink from '@ui/DocsLink.astro'
<div class="col-md-6">
<Card>
<CardBody>
<CardTitle>Basic Usage</CardTitle>
<CardTitle>Basic usage</CardTitle>
<CardSubtitle>Drag a file in or click to browse — a single drop target for one upload.</CardSubtitle>
<Dropzone id="default" />
</CardBody>
@@ -23,7 +23,7 @@ import DocsLink from '@ui/DocsLink.astro'
<div class="col-md-6">
<Card>
<CardBody>
<CardTitle>Multiple File Upload</CardTitle>
<CardTitle>Multiple file upload</CardTitle>
<CardSubtitle>Accept and preview several files at once from the same drop target.</CardSubtitle>
<Dropzone id="multiple" multiple={true} />
</CardBody>
@@ -32,7 +32,7 @@ import DocsLink from '@ui/DocsLink.astro'
<div class="col-md-6">
<Card>
<CardBody>
<CardTitle>Custom Dropzone</CardTitle>
<CardTitle>Custom dropzone</CardTitle>
<CardSubtitle>Swap in your own label and helper text for the drop target.</CardSubtitle>
<Dropzone id="custom" custom={true} text="Your text here" description="Your custom description here" />
</CardBody>
preview/pages/email-inbox.astro
+64 -63
View File
@@ -1,4 +1,5 @@
---
import Empty from '@ui/Empty.astro'
import Subheader from '@ui/Subheader.astro'
import ButtonGroup from '@ui/ButtonGroup.astro'
import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
@@ -16,7 +17,7 @@ import { formatShortDate } from '@shared/lib/date-format'
import mails from '@data/mails.json'
// Label colors shared by the folder sidebar and the dots in the message list.
const labelColors: Record<string, string> = { Updates: 'info', Friends: 'warning', Family: 'success', Social: 'primary', Important: 'danger', Promotions: 'purple' }
const labelColors: Record<string, string> = { Updates: 'azure', Friends: 'orange', Family: 'teal', Social: 'indigo', Important: 'pink', Promotions: 'purple' }
---
<DefaultLayout title="Email inbox" pageHeader="Inbox" pageMenu="extra.email-inbox" pageLibs={['hugerte']}>
@@ -37,7 +38,7 @@ const labelColors: Record<string, string> = { Updates: 'info', Friends: 'warning
<a href="#" class="nav-link"><Icon name="star" class="me-2" />Starred</a>
<a href="#" class="nav-link"><Icon name="clock" class="me-2" />Snoozed</a>
<a href="#" class="nav-link"><Icon name="file" class="me-2" />Draft<span class="badge bg-info-lt ms-auto">32</span></a>
<a href="#" class="nav-link"><Icon name="mail-up" class="me-2" />Sent Mail</a>
<a href="#" class="nav-link"><Icon name="mail-up" class="me-2" />Sent mail</a>
<a href="#" class="nav-link"><Icon name="trash" class="me-2" />Trash</a>
<a href="#" class="nav-link"><Icon name="tag" class="me-2" />Important</a>
<a href="#" class="nav-link"><Icon name="alert-octagon" class="me-2" />Spam</a>
@@ -99,7 +100,7 @@ const labelColors: Record<string, string> = { Updates: 'info', Friends: 'warning
<Icon name="tag" />
</button>
<div class="dropdown-menu">
<span class="dropdown-header">Label as:</span>
<span class="dropdown-header">Label as</span>
<a class="dropdown-item" href="#">Updates</a>
<a class="dropdown-item" href="#">Social</a>
<a class="dropdown-item" href="#">Promotions</a>
@@ -112,72 +113,72 @@ const labelColors: Record<string, string> = { Updates: 'info', Friends: 'warning
<Icon name="dots" /> More
</button>
<div class="dropdown-menu dropdown-menu-end">
<a class="dropdown-item" href="#">Mark as Unread</a>
<a class="dropdown-item" href="#">Add to Tasks</a>
<a class="dropdown-item" href="#">Add Star</a>
<a class="dropdown-item" href="#">Mark as unread</a>
<a class="dropdown-item" href="#">Add to tasks</a>
<a class="dropdown-item" href="#">Add star</a>
<a class="dropdown-item" href="#">Mute</a>
</div>
</ButtonGroup>
</div>
</div>
<div class="card-body p-0">
<ListGroup flush hoverable>
{
mails.length > 0 ? (
mails.map((mail) => (
<ListGroupItem>
<div class="row align-items-center g-2">
<div class="col-auto">
<input type="checkbox" class="form-check-input m-0" aria-label={`Select "${mail.subject}"`} />
</div>
<div class="col-auto">
<a href="#" class:list={['list-group-item-actions', mail.starred && 'show']} aria-label={mail.starred ? 'Remove star' : 'Add star'}>
<Icon name="star" color={mail.starred ? 'yellow' : 'muted'} />
</a>
</div>
<div class="col-3 col-lg-2 text-truncate">
<a href="#" class="text-body">
{mail.sender}
</a>
</div>
<div class="col text-truncate">
<a href="#" class="text-body">
{mail.subject}
</a>
<span class="text-secondary"> – {mail.preview}</span>
</div>
<div class="col-auto d-none d-lg-block">
{mail.labels.map((label) => (
<span class={`badge bg-${labelColors[label] ?? 'secondary'}`} title={label} aria-label={label} />
))}
</div>
<div class="col-auto d-none d-md-block">
<div class="list-group-item-actions d-flex gap-2">
<a href="#" class="text-secondary" aria-label="Archive">
<Icon name="archive" />
</a>
<a href="#" class="text-secondary" aria-label="Delete">
<Icon name="trash" />
</a>
<a href="#" class="text-secondary" aria-label="Mark as read">
<Icon name="mail-opened" />
</a>
<a href="#" class="text-secondary" aria-label="Snooze">
<Icon name="clock" />
</a>
</div>
</div>
<div class="col-auto text-secondary text-end">{formatShortDate(new Date(mail.date))}</div>
<ListGroup flush hoverable class="card-list-group">
{
mails.length > 0 ? (
mails.map((mail) => (
<ListGroupItem>
<div class="row align-items-center g-2">
<div class="col-auto">
<input type="checkbox" class="form-check-input m-0" aria-label={`Select "${mail.subject}"`} />
</div>
</ListGroupItem>
))
) : (
<ListGroupItem class="text-secondary">No emails</ListGroupItem>
)
}
</ListGroup>
</div>
<div class="card-body">
<div class="col-auto">
<a href="#" class:list={['list-group-item-actions', mail.starred && 'show']} aria-label={mail.starred ? 'Remove star' : 'Add star'}>
<Icon name="star" color={mail.starred ? 'yellow' : 'secondary'} />
</a>
</div>
<div class="col-3 col-lg-2 text-truncate">
<a href="#" class="text-body">
{mail.sender}
</a>
</div>
<div class="col text-truncate">
<a href="#" class="text-body">
{mail.subject}
</a>
<span class="text-secondary"> – {mail.preview}</span>
</div>
<div class="col-auto d-none d-lg-block">
{mail.labels.map((label) => (
<span class={`badge bg-${labelColors[label] ?? 'secondary'}`} title={label} aria-label={label} />
))}
</div>
<div class="col-auto d-none d-md-block">
<div class="list-group-item-actions d-flex gap-2">
<a href="#" class="text-secondary" aria-label="Archive">
<Icon name="archive" />
</a>
<a href="#" class="text-secondary" aria-label="Delete">
<Icon name="trash" />
</a>
<a href="#" class="text-secondary" aria-label="Mark as read">
<Icon name="mail-opened" />
</a>
<a href="#" class="text-secondary" aria-label="Snooze">
<Icon name="clock" />
</a>
</div>
</div>
<div class="col-auto text-secondary text-end">{formatShortDate(new Date(mail.date))}</div>
</div>
</ListGroupItem>
))
) : (
<ListGroupItem>
<Empty title="No emails" />
</ListGroupItem>
)
}
</ListGroup>
<div class="card-footer">
<div class="row align-items-center">
<div class="col-7 mt-1">
Showing 1 - {mails.length} of {mails.length}
preview/pages/faq.astro
+1 -1
View File
@@ -7,7 +7,7 @@ import HeaderActionsBreadcrumb from '@shared/components/layout/HeaderActionsBrea
const categories = faq as { name: string; questions: { question: string }[] }[]
---
<DefaultLayout title="Frequently Asked Questions" pageMenu="extra.faq">
<DefaultLayout title="Frequently asked questions" pageMenu="extra.faq">
<HeaderActionsBreadcrumb slot="page-header-actions" />
<div class="card card-lg">
<div class="card-body">
preview/pages/form-elements.astro
+54 -54
View File
@@ -110,14 +110,14 @@ const rows = [
<div class="col-md-6">
<Card>
<CardBody>
<CardTitle>Node.js Version</CardTitle>
<CardTitle>Node.js version</CardTitle>
<CardSubtitle> The version of Node.js that is used in the Build Step and for Serverless Functions. A new Deployment is required for your changes to take effect. </CardSubtitle>
<select class="form-select">
<option>14.x</option>
<option>12.x</option>
</select>
</CardBody>
<CardFooter>Learn more about <a href="#">Node.js Version</a></CardFooter>
<CardFooter>Learn more about <a href="#">Node.js version</a></CardFooter>
</Card>
</div>
@@ -135,8 +135,8 @@ const rows = [
<FormGroup label="ZIP Code"><InputMask mask="00000-000" visible /></FormGroup>
<FormGroup label="Money"><InputMask mask="000.000.000.000.000,00" visible reverse /></FormGroup>
<FormGroup label="Telephone"><InputMask mask="0000-0000" visible /></FormGroup>
<FormGroup label="Telephone with Code Area"><InputMask mask="(00) 0000-0000" visible /></FormGroup>
<FormGroup label="IP Address"><InputMask mask="099.099.099.099" placeholder="000.000.000.000" visible /></FormGroup>
<FormGroup label="Telephone with area code"><InputMask mask="(00) 0000-0000" visible /></FormGroup>
<FormGroup label="IP address"><InputMask mask="099.099.099.099" placeholder="000.000.000.000" visible /></FormGroup>
</CardBody>
</Card>
</div>
@@ -160,7 +160,7 @@ const rows = [
</div>
<div class="col-12 col-lg-6">
<Card as="form" class="h-100">
<CardHeader title="My Profile" />
<CardHeader title="My profile" />
<CardBody>
<div class="mb-3">
<div class="row">
@@ -193,82 +193,82 @@ const rows = [
<div class="col-12 col-lg-6">
<Card as="form">
<CardBody>
<CardTitle>Edit Profile</CardTitle>
<CardTitle>Edit profile</CardTitle>
<div class="row row-cards">
<div class="col-md-5"><FormGroup label="Company"><input type="text" class="form-control" disabled="" placeholder="Company" value="Creative Code Inc." /></FormGroup></div>
<div class="col-sm-6 col-md-3"><FormGroup label="Username"><input type="text" class="form-control" placeholder="Username" value="michael23" /></FormGroup></div>
<div class="col-sm-6 col-md-4"><FormGroup label="Email address"><input type="email" class="form-control" placeholder="Email" /></FormGroup></div>
<div class="col-sm-6 col-md-6"><FormGroup label="First Name"><input type="text" class="form-control" placeholder="Company" value="Chet" /></FormGroup></div>
<div class="col-sm-6 col-md-6"><FormGroup label="Last Name"><input type="text" class="form-control" placeholder="Last Name" value="Faker" /></FormGroup></div>
<div class="col-md-12"><FormGroup label="Address"><input type="text" class="form-control" placeholder="Home Address" value="Melbourne, Australia" /></FormGroup></div>
<div class="col-sm-6 col-md-6"><FormGroup label="First name"><input type="text" class="form-control" placeholder="Company" value="Chet" /></FormGroup></div>
<div class="col-sm-6 col-md-6"><FormGroup label="Last name"><input type="text" class="form-control" placeholder="Last name" value="Faker" /></FormGroup></div>
<div class="col-md-12"><FormGroup label="Address"><input type="text" class="form-control" placeholder="Home address" value="Melbourne, Australia" /></FormGroup></div>
<div class="col-sm-6 col-md-4"><FormGroup label="City"><input type="text" class="form-control" placeholder="City" value="Melbourne" /></FormGroup></div>
<div class="col-sm-6 col-md-3"><FormGroup label="Postal Code"><input type="text" class="form-control" placeholder="ZIP Code" /></FormGroup></div>
<div class="col-sm-6 col-md-3"><FormGroup label="Postal code"><input type="text" class="form-control" placeholder="ZIP code" /></FormGroup></div>
<div class="col-md-5"><FormGroup label="Country"><select class="form-control form-select"><option value="">Germany</option></select></FormGroup></div>
<div class="col-md-12">
<FormGroup label="About Me" class="mb-3 mb-0">
<FormGroup label="About me" class="mb-0">
<textarea rows="5" class="form-control" placeholder="Here can be your description">Oh so, your weak rhyme You doubt I'll bother, reading into it I'll probably won't, left to my own devices But that's the difference in our opinions.</textarea>
</FormGroup>
</div>
</div>
</CardBody>
<CardFooter class="text-end"><button type="submit" class="btn btn-primary">Update Profile</button></CardFooter>
<CardFooter class="text-end"><button type="submit" class="btn btn-primary">Update profile</button></CardFooter>
</Card>
</div>
<div class="col-12 col-lg-6">
<Card class="h-100">
<CardHeader title="HTTP Request" />
<CardHeader title="HTTP request" />
<CardBody>
<div class="row row-cards">
<FormGroup label="Method" required class="mb-3 col-sm-4 col-md-2">
<FormGroup label="Method" required class="col-sm-4 col-md-2">
<select class="form-select">
{httpMethods.map((m) => <option value={m}>{m}</option>)}
</select>
</FormGroup>
<FormGroup label="URL" required class="mb-3 col-sm-8 col-md-10">
<FormGroup label="URL" required class="col-sm-8 col-md-10">
<input name="url" type="text" class="form-control" value="https://content.googleapis.com/discovery/v1/apis/surveys/v2/rest" />
</FormGroup>
</div>
<div class="form-label">Assertions</div>
<div class="table-responsive">
<table class="table mb-0">
<thead>
<tr><th>Source</th><th>Property</th><th>Comparison</th><th>Target</th></tr>
</thead>
<tbody>
{
rows.map((row) => (
<tr>
<td>
<select class="form-select" aria-label="Source">
{sources.map(([v, l]) => (
<option value={v} selected={v === row.source || undefined}>
{l}
</option>
))}
</select>
</td>
<td>
<input type="text" class="form-control" aria-label="Property" value={row.prop || undefined} />
</td>
<td>
<select class="form-select" aria-label="Comparison">
{comparisons.map(([v, l]) => (
<option value={v} selected={v === row.comparison || undefined}>
{l}
</option>
))}
</select>
</td>
<td>
<input type="text" class="form-control" aria-label="Target" value={row.target} />
</td>
</tr>
))
}
</tbody>
</table>
</div>
</CardBody>
<div class="table-responsive">
<table class="table card-table">
<thead>
<tr><th>Source</th><th>Property</th><th>Comparison</th><th>Target</th></tr>
</thead>
<tbody>
{
rows.map((row) => (
<tr>
<td>
<select class="form-select" aria-label="Source">
{sources.map(([v, l]) => (
<option value={v} selected={v === row.source || undefined}>
{l}
</option>
))}
</select>
</td>
<td>
<input type="text" class="form-control" aria-label="Property" value={row.prop || undefined} />
</td>
<td>
<select class="form-select" aria-label="Comparison">
{comparisons.map(([v, l]) => (
<option value={v} selected={v === row.comparison || undefined}>
{l}
</option>
))}
</select>
</td>
<td>
<input type="text" class="form-control" aria-label="Target" value={row.target} />
</td>
</tr>
))
}
</tbody>
</table>
</div>
<CardFooter class="text-end"><button type="submit" class="btn btn-primary">Make request</button></CardFooter>
</Card>
</div>
preview/pages/form-layout.astro
+19 -19
View File
@@ -20,7 +20,7 @@ import DocsLink from '@ui/DocsLink.astro'
const countries = flags as { name: string }[]
---
<DefaultLayout title="Form layout" pageHeader="Form Layout" pageMenu="form.layout" pageLibs={['vanilla-calendar-pro']}>
<DefaultLayout title="Form layout" pageHeader="Form layout" pageMenu="form.layout" pageLibs={['vanilla-calendar-pro']}>
<DocsLink slot="page-header-actions" path="/ui/forms" />
<div class="row row-cards row-cols-1 row-cols-md-3">
@@ -30,7 +30,7 @@ const countries = flags as { name: string }[]
<Card>
<CardHeader>
<div>
<CardTitle>Basic Form</CardTitle>
<CardTitle>Basic form</CardTitle>
<CardSubtitle>A minimal sign-up form with just the essentials.</CardSubtitle>
</div>
</CardHeader>
@@ -47,8 +47,8 @@ const countries = flags as { name: string }[]
<FormGroup label="Password" labelClass="visually-hidden" for="basic-password" class="">
<input type="password" placeholder="Password" class="form-control" id="basic-password" name="password" autocomplete="new-password" />
</FormGroup>
<FormGroup label="Confirm Password" labelClass="visually-hidden" for="basic-password-confirm" class="">
<input type="password" placeholder="Confirm Password" class="form-control" id="basic-password-confirm" name="password_confirm" autocomplete="new-password" />
<FormGroup label="Confirm password" labelClass="visually-hidden" for="basic-password-confirm" class="">
<input type="password" placeholder="Confirm password" class="form-control" id="basic-password-confirm" name="password_confirm" autocomplete="new-password" />
</FormGroup>
<div><Button type="submit" color="primary" block text="Submit" /></div>
</form>
@@ -59,23 +59,23 @@ const countries = flags as { name: string }[]
<Card>
<CardHeader>
<div>
<CardTitle>Example Form</CardTitle>
<CardTitle>Example form</CardTitle>
<CardSubtitle>A contact form with a subject select and a message field.</CardSubtitle>
</div>
</CardHeader>
<CardBody>
<form>
<div class="space-y">
<FormGroup label="First Name" for="example-first-name" class="">
<FormGroup label="First name" for="example-first-name" class="">
<input type="text" placeholder="Enter first name" class="form-control" id="example-first-name" name="first_name" />
</FormGroup>
<FormGroup label="Last Name" for="example-last-name" class="">
<FormGroup label="Last name" for="example-last-name" class="">
<input type="text" placeholder="Enter last name" class="form-control" id="example-last-name" name="last_name" />
</FormGroup>
<FormGroup label="Email" for="example-email" class="">
<input type="email" placeholder="Enter email address" class="form-control" id="example-email" name="email" />
</FormGroup>
<FormGroup label="Select Subject" for="example-subject" class="">
<FormGroup label="Select subject" for="example-subject" class="">
<select class="form-select" id="example-subject" name="subject">
<option>Option 1</option><option>Option 2</option><option>Option 3</option><option>Option 4</option>
</select>
@@ -83,7 +83,7 @@ const countries = flags as { name: string }[]
<FormGroup label="Message" for="example-message" class="">
<textarea placeholder="Enter your message" rows="6" class="form-control" id="example-message" name="message"></textarea>
</FormGroup>
<div><Button type="submit" color="primary" block text="Send Message" iconEnd="arrow-right" /></div>
<div><Button type="submit" color="primary" block text="Send message" iconEnd="arrow-right" /></div>
</div>
</form>
</CardBody>
@@ -98,7 +98,7 @@ const countries = flags as { name: string }[]
<Card>
<CardHeader>
<div>
<CardTitle>Example Form with Icons</CardTitle>
<CardTitle>Example form with icons</CardTitle>
<CardSubtitle>Prefix each field with an icon for a friendlier sign-up flow.</CardSubtitle>
</div>
</CardHeader>
@@ -107,11 +107,11 @@ const countries = flags as { name: string }[]
<div><InputIcon icon="user" placeholder="Username" prepend /></div>
<div><InputIcon icon="mail" placeholder="Email address" prepend type="email" /></div>
<div><InputIcon icon="lock" placeholder="Password" prepend type="password" autocomplete="new-password" /></div>
<div><InputIcon icon="lock" placeholder="Confirm Password" prepend type="password" autocomplete="new-password" /></div>
<div><InputIcon icon="lock" placeholder="Confirm password" prepend type="password" autocomplete="new-password" /></div>
<div>
<div class="row align-items-center">
<div class="col"><Check title="Remember me" class="m-0" /></div>
<div class="col-auto"><Button type="submit" color="primary" text="Create Account" iconEnd="arrow-right" /></div>
<div class="col-auto"><Button type="submit" color="primary" text="Create account" iconEnd="arrow-right" /></div>
</div>
</div>
</form>
@@ -154,19 +154,19 @@ const countries = flags as { name: string }[]
<Card>
<CardHeader>
<div>
<CardTitle>Example Form</CardTitle>
<CardTitle>Example form</CardTitle>
<CardSubtitle>A longer profile form grouped into personal info and address sections.</CardSubtitle>
</div>
</CardHeader>
<CardBody>
<form>
<div class="space-y">
<div><h4>Personal Info</h4></div>
<div><h4>Personal info</h4></div>
<div class="row row-cols-2 g-4">
<FormGroup label="First Name" for="example-form-first-name" class="">
<FormGroup label="First name" for="example-form-first-name" class="">
<input type="text" id="example-form-first-name" placeholder="Enter first name" class="form-control" autocomplete="given-name" />
</FormGroup>
<FormGroup label="Last Name" for="example-form-last-name" class="">
<FormGroup label="Last name" for="example-form-last-name" class="">
<input type="text" id="example-form-last-name" placeholder="Enter last name" class="form-control" autocomplete="family-name" />
</FormGroup>
<FormGroup label="Gender" for="example-form-gender" class="">
@@ -202,13 +202,13 @@ const countries = flags as { name: string }[]
<FormGroup label="State" for="example-form-state" class="">
<input type="text" id="example-form-state" class="form-control" autocomplete="address-level1" />
</FormGroup>
<FormGroup label="Post Code" for="example-form-postcode" class="">
<FormGroup label="Post code" for="example-form-postcode" class="">
<input type="text" id="example-form-postcode" class="form-control" autocomplete="postal-code" />
</FormGroup>
<FormGroup label="Country" for="example-form-country" class="">
<div>
<select class="form-select" id="example-form-country" autocomplete="country-name">
<option>--Select Country--</option>
<option>Select country</option>
{countries.map((country) => <option>{country.name}</option>)}
</select>
</div>
@@ -224,7 +224,7 @@ const countries = flags as { name: string }[]
</div>
<ButtonList class="justify-content-end">
<Button text="Cancel" />
<Button type="submit" color="primary" text="Save Changes" />
<Button type="submit" color="primary" text="Save changes" />
</ButtonList>
</div>
</form>
preview/pages/illustrations.astro
+2 -2
View File
@@ -80,7 +80,7 @@ const illustrationsData = Object.fromEntries(autodarkEntries.map(([key, svg]) =>
}
</div>
<div class="form-label mt-4">Skin color</div>
<div class="form-label mt-3">Skin color</div>
<div class="row g-2">
{
skinEntries.map((color, i) => (
@@ -94,7 +94,7 @@ const illustrationsData = Object.fromEntries(autodarkEntries.map(([key, svg]) =>
}
</div>
<div class="form-label mt-4">Select SVG illustration</div>
<div class="form-label mt-3">Select SVG illustration</div>
<div class="row">
{
autodarkEntries.map(([key, svg], i) => (
preview/pages/inline-player.astro
+1 -1
View File
@@ -10,7 +10,7 @@ import DocsLink from '@ui/DocsLink.astro'
type Provider = { 'title': string; 'type': string; 'id': string; 'embed-id': string | number }
---
<DefaultLayout title="Inline Player" pageMenu="plugins.plyr" pageLibs={['plyr']}>
<DefaultLayout title="Inline player" pageMenu="plugins.plyr" pageLibs={['plyr']}>
<DocsLink slot="page-header-actions" path="/ui/plugins/inline-player" />
<div class="row row-cards">
{
preview/pages/logs.astro
+5 -5
View File
@@ -18,12 +18,12 @@ import { site } from '@shared/lib/site'
<pre><code>GET <a class="text-reset" target="_blank" href={site.previewUrl}>{site.previewUrl}</a></code></pre>
</div>
<h2>Request Timing</h2>
<h2>Request timing</h2>
<div>
<pre>Effective URL&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a class="text-reset" target="_blank" href={site.previewUrl}>{site.previewUrl}</a><br />Redirect count&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0<br />Name lookup time&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3.4e-05<br />Connect time&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0.000521<br />Pre-transfer time&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0.0<br />Start-transfer time&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0.0<br />App connect time&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0.0<br />Redirect time&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0.0<br />Total time&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;28.000601<br />Response code&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0<br />Return keyword&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;operation_timedout</pre>
</div>
<h2>Response Headers</h2>
<h2>Response headers</h2>
<div>
<pre>HTTP/1.1 200 Connection established</pre>
</div>
@@ -37,7 +37,7 @@ import { site } from '@shared/lib/site'
<div class="col-lg-6">
<Card>
<CardBody>
<h2>Application Log</h2>
<h2>Application log</h2>
<div>
<pre><code>2024-01-15 14:23:45 [INFO] Application started successfully
2024-01-15 14:23:46 [DEBUG] Database connection established
@@ -48,7 +48,7 @@ import { site } from '@shared/lib/site'
2024-01-15 14:23:51 [DEBUG] API request completed: endpoint=/api/users, duration=234ms</code></pre>
</div>
<h2>Log Levels</h2>
<h2>Log levels</h2>
<BadgeList class="mb-2">
<Badge text="INFO" color="success" />
<Badge text="WARNING" color="warning" />
@@ -57,7 +57,7 @@ import { site } from '@shared/lib/site'
</BadgeList>
</CardBody>
<CardFooter>
<h2>Log Source</h2>
<h2>Log source</h2>
<div>Application Server (prod-01)</div>
</CardFooter>
</Card>
preview/pages/map-fullsize.astro
+2 -2
View File
@@ -3,8 +3,8 @@ import DefaultLayout from '@shared/layouts/DefaultLayout.astro'
import CaptureScript from '@shared/components/CaptureScript.astro'
---
<DefaultLayout title="Full Size Map" pageHeader={false} pageMenu="plugins.map-fullsize" pageLibs={['google-maps']} navbarPosition="vertical" wrapperFull>
<h1 class="visually-hidden">Full Size Map</h1>
<DefaultLayout title="Full-size map" pageHeader={false} pageMenu="plugins.map-fullsize" pageLibs={['google-maps']} navbarPosition="vertical" wrapperFull>
<h1 class="visually-hidden">Full-size map</h1>
<div class="map flex-fill" id="map-google"></div>
<CaptureScript>
<!-- BEGIN MAP SCRIPT -->
preview/pages/maps-vector.astro
+1 -1
View File
@@ -7,7 +7,7 @@ import CardTitle from '@ui/CardTitle.astro'
import DocsLink from '@ui/DocsLink.astro'
---
<DefaultLayout title="Vector Maps" pageMenu="plugins.maps-vector" pageLibs={['jsvectormap']}>
<DefaultLayout title="Vector maps" pageMenu="plugins.maps-vector" pageLibs={['jsvectormap']}>
<DocsLink slot="page-header-actions" path="/ui/plugins/vector-map" />
<div class="row row-cards">
<div class="col-md-6">
preview/pages/marketing/about.astro
+7 -7
View File
@@ -5,7 +5,7 @@ import MarketingLayout from '@shared/layouts/MarketingLayout.astro'
<MarketingLayout title="About">
<div class="hero">
<div class="container">
<h1 class="hero-title">About Us</h1>
<h1 class="hero-title">About us</h1>
<p class="hero-description hero-description-wide">Tabler is a digital firm specializing in website development. Our themes are employed by businesses of all scales, ranging from emerging startups to established public companies, to construct and oversee their online presence.</p>
</div>
</div>
@@ -14,29 +14,29 @@ import MarketingLayout from '@shared/layouts/MarketingLayout.astro'
<div class="container">
<div class="row gx-3">
<div class="col mb-3">
<div class="bg-cover rounded bg-body-tertiary" style="height: 15rem;"></div>
<div class="bg-cover rounded bg-body-tertiary demo-photo-placeholder"></div>
</div>
<div class="col-3 d-none d-md-block mb-3">
<div class="bg-cover rounded bg-body-tertiary" style="height: 15rem;"></div>
<div class="bg-cover rounded bg-body-tertiary demo-photo-placeholder"></div>
</div>
<div class="col mb-3">
<div class="bg-cover rounded bg-body-tertiary" style="height: 15rem;"></div>
<div class="bg-cover rounded bg-body-tertiary demo-photo-placeholder"></div>
</div>
<div class="w-100"></div>
<div class="col mb-3 mb-md-0">
<div class="bg-cover rounded bg-body-tertiary" style="height: 15rem;"></div>
<div class="bg-cover rounded bg-body-tertiary demo-photo-placeholder"></div>
</div>
<div class="col-4 d-none d-md-block mb-3 mb-md-0">
<div class="bg-cover rounded bg-body-tertiary" style="height: 15rem;"></div>
<div class="bg-cover rounded bg-body-tertiary demo-photo-placeholder"></div>
</div>
<div class="col">
<div class="bg-cover rounded bg-body-tertiary" style="height: 15rem;"></div>
<div class="bg-cover rounded bg-body-tertiary demo-photo-placeholder"></div>
</div>
</div>
</div>
preview/pages/marketing/real-estate.astro
+3 -3
View File
@@ -31,7 +31,7 @@ const buildings = realEstate as Building[]
<div class="col flex-grow-1">
<input id="inputEmail" type="text" placeholder="Search properties near you..." class="form-control" aria-label="Search properties near you" />
</div>
<div class="col"><button type="submit" class="btn btn-teal fw-medium">Search</button></div>
<div class="col"><button type="submit" class="btn btn-primary">Search</button></div>
</form>
</div>
</div>
@@ -52,7 +52,7 @@ const buildings = realEstate as Building[]
</a>
<CardBody>
<div class="h1 mb-2 fw-bold">{building.price}</div>
<div class="h1 mb-2">{building.price}</div>
<div>
<div class="text-secondary">{building.address}, California USA</div>
@@ -67,7 +67,7 @@ const buildings = realEstate as Building[]
</div>
</div>
<a href="#" class="btn btn-primary py-2 px-3">
<a href="#" class="btn btn-primary">
See details
</a>
</div>
preview/pages/modals.astro
+1 -1
View File
@@ -86,7 +86,7 @@ const cardClass = 'position-relative rounded d-block bg-surface-backdrop py-6 w-
</div>
<div>
<h2>Scrollable modal</h2>
<ModalInline class={cardClass} modalId="scrollable" scrollable style="max-height: 30rem" show>
<ModalInline class={`${cardClass} modal-demo-scrollable`} modalId="scrollable" scrollable show>
<ScrollableModalContent />
</ModalInline>
</div>
preview/pages/navigation.astro
+1 -1
View File
@@ -21,7 +21,7 @@ import DocsLink from '@ui/DocsLink.astro'
</div>
<div class="mb-3">
<Navbar menuId="navbar-menu-4" sample condensed dark smallLogo backgroundColor="#7952b3" hideSearch personId={6} />
<Navbar menuId="navbar-menu-4" sample condensed dark smallLogo background="purple" hideSearch personId={6} />
</div>
<div class="mb-3">
preview/pages/onboarding.astro
+3 -3
View File
@@ -49,7 +49,7 @@ import PageTitle from '@ui/PageTitle.astro'
</select>
</FormGroup>
<fieldset class="border-0 p-0 m-0">
<legend class="form-label float-none mb-0" style="font-size: inherit;">Team size</legend>
<legend class="form-label float-none mb-0">Team size</legend>
<div class="form-selectgroup">
<label class="form-selectgroup-item">
<input type="radio" name="team-size" value="1" class="form-selectgroup-input" checked />
@@ -70,7 +70,7 @@ import PageTitle from '@ui/PageTitle.astro'
</div>
</fieldset>
<fieldset class="border-0 p-0 m-0">
<legend class="form-label float-none mb-0" style="font-size: inherit;">What are you planning to use this for?</legend>
<legend class="form-label float-none mb-0">What are you planning to use this for?</legend>
<div class="form-check">
<input class="form-check-input" type="radio" name="use-for" value="personal" id="use-personal" checked />
<label class="form-check-label" for="use-personal"> Personal projects </label>
@@ -89,7 +89,7 @@ import PageTitle from '@ui/PageTitle.astro'
</div>
</fieldset>
<fieldset class="border-0 p-0 m-0">
<legend class="form-label float-none mb-0" style="font-size: inherit;">How did you hear about us?</legend>
<legend class="form-label float-none mb-0">How did you hear about us?</legend>
<div class="form-check">
<input class="form-check-input" type="checkbox" name="referral" value="search" id="ref-search" />
<label class="form-check-label" for="ref-search"> Search engine </label>
preview/pages/patterns.astro
+22 -22
View File
@@ -28,7 +28,7 @@ const patterns = ['diagonal', 'diagonal-2', 'dots', 'rectangles', 'lines', 'line
{
patterns.map((pattern) => (
<div class="col">
<BackgroundPattern pattern={pattern} class="border rounded mb-3" style="height: 8rem;" />
<BackgroundPattern pattern={pattern} class="border rounded mb-3 ratio ratio-21x9" />
<code>.bg-pattern-{pattern}</code>
</div>
))
@@ -46,7 +46,7 @@ const patterns = ['diagonal', 'diagonal-2', 'dots', 'rectangles', 'lines', 'line
{
patternColors.map((color) => (
<div class="col">
<BackgroundPattern pattern="rectangles" color={color} class="border rounded mb-3" style="height: 8rem;" />
<BackgroundPattern pattern="rectangles" color={color} class="border rounded mb-3 ratio ratio-21x9" />
<code>.bg-pattern-{color}</code>
</div>
))
@@ -64,7 +64,7 @@ const patterns = ['diagonal', 'diagonal-2', 'dots', 'rectangles', 'lines', 'line
{
patternSizes.map((size) => (
<div class="col">
<BackgroundPattern pattern="diagonal" size={size} class="border rounded mb-3" style="height: 8rem;" />
<BackgroundPattern pattern="diagonal" size={size} class="border rounded mb-3 ratio ratio-21x9" />
<code>.bg-pattern-{size}</code>
</div>
))
@@ -82,7 +82,7 @@ const patterns = ['diagonal', 'diagonal-2', 'dots', 'rectangles', 'lines', 'line
{
patternOpacities.map((opacity) => (
<div class="col">
<BackgroundPattern pattern="transparent" color="primary" class={`border rounded mb-3 bg-pattern-opacity-${opacity}`} style="height: 8rem;" />
<BackgroundPattern pattern="transparent" color="primary" class={`border rounded mb-3 ratio ratio-21x9 bg-pattern-opacity-${opacity}`} />
<code>.bg-pattern-opacity-{opacity}</code>
</div>
))
@@ -98,38 +98,38 @@ const patterns = ['diagonal', 'diagonal-2', 'dots', 'rectangles', 'lines', 'line
<CardSubtitle>Combine pattern type, color, size, and opacity on real layouts.</CardSubtitle>
<div class="row g-3">
<div class="col-12 col-md-6 col-xl-3">
<BackgroundPattern pattern="transparent" class="border rounded mb-3" style="height: 8rem;" />
<BackgroundPattern pattern="transparent" class="border rounded mb-3 ratio ratio-21x9" />
<code>.bg-pattern-transparent</code>
</div>
<div class="col-12 col-md-6 col-xl-3">
<BackgroundPattern pattern="grid" color="primary" size="lg" class="border rounded mb-3 bg-pattern-opacity-light" style="height: 8rem;" />
<BackgroundPattern pattern="grid" color="primary" size="lg" class="border rounded mb-3 bg-pattern-opacity-light ratio ratio-21x9" />
<code>.bg-pattern-grid.bg-pattern-primary.bg-pattern-lg.bg-pattern-opacity-light</code>
</div>
<div class="col-12 col-md-6 col-xl-3">
<BackgroundPattern pattern="diagonal-stripes-2" color="azure" class="border rounded mb-3 bg-pattern-opacity-dark" style="height: 8rem;" />
<BackgroundPattern pattern="diagonal-stripes-2" color="azure" class="border rounded mb-3 bg-pattern-opacity-dark ratio ratio-21x9" />
<code>.bg-pattern-diagonal-stripes-2.bg-pattern-azure.bg-pattern-opacity-dark</code>
</div>
<div class="col-12 col-md-6 col-xl-3">
<BackgroundPattern pattern="dots" color="red" size="sm" class="border rounded mb-3 bg-pattern-opacity-darker" style="height: 8rem;" />
<BackgroundPattern pattern="dots" color="red" size="sm" class="border rounded mb-3 bg-pattern-opacity-darker ratio ratio-21x9" />
<code>.bg-pattern-dots.bg-pattern-red.bg-pattern-sm.bg-pattern-opacity-darker</code>
</div>
<div class="col-12 col-lg-6">
<Card class="bg-pattern-diagonal">
<CardBody>
Card with <code>.bg-pattern-diagonal</code>.
</CardBody>
</Card>
</div>
<div class="col-12 col-lg-6">
<Card class="bg-pattern-grid bg-pattern-primary bg-pattern-opacity-light">
<CardBody>
Card with a primary grid and <code>.bg-pattern-opacity-light</code>.
</CardBody>
</Card>
</div>
</div>
</CardBody>
</Card>
</div>
<div class="col-12 col-lg-6">
<Card class="bg-pattern-diagonal">
<CardBody>
Card with <code>.bg-pattern-diagonal</code>.
</CardBody>
</Card>
</div>
<div class="col-12 col-lg-6">
<Card class="bg-pattern-grid bg-pattern-primary bg-pattern-opacity-light">
<CardBody>
Card with a primary grid and <code>.bg-pattern-opacity-light</code>.
</CardBody>
</Card>
</div>
</div>
</DefaultLayout>
preview/pages/pay.astro
+2 -2
View File
@@ -42,7 +42,7 @@ import Icon from '@ui/Icon.astro'
<div class="tab-pane active show" id="tab-card" role="tabpanel">
<form>
<div class="space-y">
<FormGroup label="Card Number" for="card-number" class="">
<FormGroup label="Card number" for="card-number" class="">
<div class="input-group input-group-flat">
<span class="input-group-text">
<Payment payment="visa" size="xs" />
@@ -52,7 +52,7 @@ import Icon from '@ui/Icon.astro'
</FormGroup>
<div class="row g-3">
<FormGroup label="Expiry Date" for="card-expiry" class="col-sm-6">
<FormGroup label="Expiry date" for="card-expiry" class="col-sm-6">
<input type="text" class="form-control" id="card-expiry" placeholder="MM/YY" inputmode="numeric" aria-required="true" maxlength="5" autocomplete="cc-exp" />
</FormGroup>
<FormGroup label="CVC" for="card-cvc" class="col-sm-6">
preview/pages/payment-providers.astro
+1 -1
View File
@@ -13,7 +13,7 @@ import DocsLink from '@ui/DocsLink.astro'
const providers = payments as { name: string; logo: string }[]
---
<DefaultLayout title="Payment Providers" pageMenu="addons.payment-providers">
<DefaultLayout title="Payment providers" pageMenu="addons.payment-providers">
<DocsLink slot="page-header-actions" path="/payments/css" />
<div class="row row-cards">
preview/pages/pricing-table.astro
+8 -8
View File
@@ -16,18 +16,18 @@ import Subheader from '@ui/Subheader.astro'
<div class="text-secondary text-wrap">Choose an affordable plan that comes with the best features to engage your audience, create customer loyalty and increase sales.</div>
</td>
<td class="text-center">
<div class="text-uppercase text-secondary fw-medium">Starter</div>
<div class="display-6 fw-bold my-3">$0</div>
<Subheader>Starter</Subheader>
<div class="display-6 my-3">$0</div>
<a href="#" class="btn w-100">Choose plan</a>
</td>
<td class="text-center">
<div class="text-uppercase text-secondary fw-medium">Professional</div>
<div class="display-6 fw-bold my-3">$9</div>
<a href="#" class="btn btn-green w-100">Choose plan</a>
<Subheader>Professional</Subheader>
<div class="display-6 my-3">$9</div>
<a href="#" class="btn btn-primary w-100">Choose plan</a>
</td>
<td class="text-center">
<div class="text-uppercase text-secondary fw-medium">Business</div>
<div class="display-6 fw-bold my-3">$16</div>
<Subheader>Business</Subheader>
<div class="display-6 my-3">$16</div>
<a href="#" class="btn w-100">Choose plan</a>
</td>
</tr>
@@ -92,7 +92,7 @@ import Subheader from '@ui/Subheader.astro'
<a href="#" class="btn w-100">Choose plan</a>
</td>
<td>
<a href="#" class="btn btn-green w-100">Choose plan</a>
<a href="#" class="btn btn-primary w-100">Choose plan</a>
</td>
<td>
<a href="#" class="btn w-100">Choose plan</a>
preview/pages/profile.astro
+1 -1
View File
@@ -20,7 +20,7 @@ import UserInfo from '@shared/components/cards/UserInfo.astro'
<div class="col-12">
<Card>
<CardBody>
<CardTitle>About Me</CardTitle>
<CardTitle>About me</CardTitle>
<div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium aliquid beatae eaque eius esse fugit, hic id illo itaque modi molestias nemo perferendis quae rerum soluta. Blanditiis laborum minima molestiae molestias nemo nesciunt nisi pariatur quae sapiente ut. Aut consectetur doloremque,
preview/pages/progress.astro
+5 -5
View File
@@ -184,7 +184,7 @@ import DocsLink from '@ui/DocsLink.astro'
<div class="col">
<Card>
<CardBody>
<CardTitle> Steps Progress </CardTitle>
<CardTitle>Steps progress</CardTitle>
<CardSubtitle>Mark discrete steps instead of a continuous percentage.</CardSubtitle>
<div class="space-y">
<ProgressSteps count={3} />
@@ -198,7 +198,7 @@ import DocsLink from '@ui/DocsLink.astro'
<div class="col">
<Card>
<CardBody>
<CardTitle> Progress Background </CardTitle>
<CardTitle>Progress background</CardTitle>
<CardSubtitle>Fill a row's background as the progress indicator itself.</CardSubtitle>
<div class="space-y">
<ProgressBg value={85} text="Poland" showValue />
@@ -212,7 +212,7 @@ import DocsLink from '@ui/DocsLink.astro'
<div class="col">
<Card>
<CardBody>
<CardTitle> Progress Background Colors </CardTitle>
<CardTitle>Progress background colors</CardTitle>
<CardSubtitle>Pair a light background fill with a matching accent color.</CardSubtitle>
<div class="space-y">
<ProgressBg value={75} text="Success" color="success" showValue />
@@ -226,7 +226,7 @@ import DocsLink from '@ui/DocsLink.astro'
<div class="col">
<Card>
<CardBody>
<CardTitle> Progress Description </CardTitle>
<CardTitle>Progress description</CardTitle>
<CardSubtitle>Pair a label and percentage with the bar for more context.</CardSubtitle>
<div class="space-y">
<ProgressDescription label="Project completion" value={85} color="green" />
@@ -240,7 +240,7 @@ import DocsLink from '@ui/DocsLink.astro'
<div class="col">
<Card>
<CardBody>
<CardTitle> Progress Description Sizes </CardTitle>
<CardTitle>Progress description sizes</CardTitle>
<CardSubtitle>Scale the labeled progress bar from <code>progress-sm</code> to <code>progress-xl</code>.</CardSubtitle>
<div class="space-y">
<ProgressDescription label="Small progress" value={60} size="sm" color="blue" />
preview/pages/screenshot.astro
+2 -7
View File
@@ -9,17 +9,12 @@ import { site } from '@shared/lib/site'
.screenshot {
width: 1024px;
height: 768px;
background: var(--tblr-bg-surface-tertiary) linear-gradient(to top left, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0));
background: var(--tblr-bg-surface-tertiary);
position: relative;
}
.screenshot-card {
padding: 64px;
border-radius: 16px;
box-shadow:
0 1px 1px 0 rgba(0, 0, 0, 0.02),
0 8px 24px -4px rgba(0, 0, 0, 0.04),
0 24px 40px -8px rgba(0, 0, 0, 0.1);
}
.screenshot-logo {
@@ -50,7 +45,7 @@ import { site } from '@shared/lib/site'
<div class="screenshot-logo">
<Logo gray />
</div>
<div class="screenshot-card card p-6">
<div class="screenshot-card card rounded-4 shadow-lg">
<div class="row g-4">
{
site.themeColors.map((color) => (
preview/pages/scroll-spy.astro
+1 -1
View File
@@ -63,7 +63,7 @@ const articles: [string, string[]][] = [
]
---
<DefaultLayout title="Scroll Spy" pageMenu="base.scroll-spy">
<DefaultLayout title="Scroll spy" pageMenu="base.scroll-spy">
<div class="row g-5">
<div class="col-sm-2">
<div class="sticky-top">
preview/pages/settings.astro
+4 -4
View File
@@ -15,9 +15,9 @@ const person = requireIndex(people, 0)
<SettingsLayout active="settings">
<div class="card-body">
<h2 class="mb-4">My Account</h2>
<h2 class="mb-4">My account</h2>
<CardTitle>Profile Details</CardTitle>
<CardTitle>Profile details</CardTitle>
<div class="row align-items-center">
<div class="col-auto"><Avatar size="xl" person={personById(1)} /></div>
@@ -25,10 +25,10 @@ const person = requireIndex(people, 0)
<div class="col-auto"><Button text="Delete avatar" color="danger" variant="ghost" /></div>
</div>
<CardTitle class="mt-4">Business Profile</CardTitle>
<CardTitle class="mt-4">Business profile</CardTitle>
<div class="row g-3">
<FormGroup label="Business Name" for="business-name" class="col-md">
<FormGroup label="Business name" for="business-name" class="col-md">
<input type="text" class="form-control" id="business-name" name="business-name" value={person.company} />
</FormGroup>
<FormGroup label="Business ID" for="business-id" class="col-md">
preview/pages/sortable.astro
+6 -8
View File
@@ -65,14 +65,12 @@ const sections = [
<CardSubtitle>Drag to reorder items within a single list.</CardSubtitle>
</div>
</CardHeader>
<CardBody>
<ListGroup as="ul" data-sortable='{"animation":150}'>
<ListGroupItem as="li">Element A</ListGroupItem>
<ListGroupItem as="li">Element B</ListGroupItem>
<ListGroupItem as="li">Element C</ListGroupItem>
<ListGroupItem as="li">Element D</ListGroupItem>
</ListGroup>
</CardBody>
<ListGroup as="ul" class="card-list-group" data-sortable='{"animation":150}'>
<ListGroupItem as="li">Element A</ListGroupItem>
<ListGroupItem as="li">Element B</ListGroupItem>
<ListGroupItem as="li">Element C</ListGroupItem>
<ListGroupItem as="li">Element D</ListGroupItem>
</ListGroup>
</Card>
</div>
<div class="col-md-6">
preview/pages/stars-rating.astro
+1 -1
View File
@@ -8,7 +8,7 @@ import CardSubtitle from '@ui/CardSubtitle.astro'
import DocsLink from '@ui/DocsLink.astro'
---
<DefaultLayout title="Star Ratings" pageMenu="base.stars-rating" pageLibs={['star-rating.js']} description="An interactive star rating built on the star-rating.js widget, backed by a hidden select for accessibility and forms.">
<DefaultLayout title="Star ratings" pageMenu="base.stars-rating" pageLibs={['star-rating.js']} description="An interactive star rating built on the star-rating.js widget, backed by a hidden select for accessibility and forms.">
<DocsLink slot="page-header-actions" path="/ui/components/star-rating" />
<div class="row row-cards mb-5">
preview/pages/tasks-list.astro
+6 -6
View File
@@ -34,7 +34,7 @@ const peopleList = people
const selectedPeople = [5, 6, 2, 3].map((id) => requireIndex(peopleList, id - 1))
---
<DefaultLayout title="Task List" pageMenu="extra.tasks.list">
<DefaultLayout title="Task list" pageMenu="extra.tasks.list">
<div class="row">
<div class="col-12">
{
@@ -43,7 +43,7 @@ const selectedPeople = [5, 6, 2, 3].map((id) => requireIndex(peopleList, id - 1)
<div class="card-header">
<CardTitle class="mb-0">{section.name}</CardTitle>
<CardActions>
<Button text="New Task" icon="plus" modalId="add-task" size="sm" />
<Button text="New task" icon="plus" modalId="add-task" size="sm" />
</CardActions>
</div>
<div class="table-responsive">
@@ -54,8 +54,8 @@ const selectedPeople = [5, 6, 2, 3].map((id) => requireIndex(peopleList, id - 1)
<input type="checkbox" class="form-check-input align-middle table-selectable-check" aria-label="Select all tasks" />
</th>
<th class="w-50">Name</th>
<th class="d-none d-xl-table-cell">Assigned To</th>
<th class="d-none d-xxl-table-cell">Due Date</th>
<th class="d-none d-xl-table-cell">Assigned to</th>
<th class="d-none d-xxl-table-cell">Due date</th>
<th>Priority</th>
<th class="text-end">Actions</th>
</tr>
@@ -91,7 +91,7 @@ const selectedPeople = [5, 6, 2, 3].map((id) => requireIndex(peopleList, id - 1)
{task['due-date']}
</Fragment>
) : (
<span class="text-muted">—</span>
<span class="text-secondary">—</span>
)}
</td>
<td>{task.priority === 'High' ? <Badge text="High" color="red" light /> : task.priority === 'Medium' ? <Badge text="Medium" color="yellow" light /> : task.priority === 'Low' ? <Badge text="Low" color="blue" light /> : <Badge text="—" light />}</td>
@@ -122,7 +122,7 @@ const selectedPeople = [5, 6, 2, 3].map((id) => requireIndex(peopleList, id - 1)
<FormGroup label="Name" for="tasks-list-add-task-name">
<input type="text" class="form-control" id="tasks-list-add-task-name" placeholder="Task name" />
</FormGroup>
<FormGroup label="Assigned To" for="tasks-list-add-task-assigned">
<FormGroup label="Assigned to" for="tasks-list-add-task-assigned">
<select class="form-select" id="tasks-list-add-task-assigned">
<option value="">Select person</option>
{selectedPeople.map((person) => <option value={person.id}>{person.full_name}</option>)}
preview/pages/tour.astro
+7 -7
View File
@@ -12,13 +12,13 @@ import Badge from '@ui/Badge.astro'
import Icon from '@ui/Icon.astro'
---
<DefaultLayout title="Driver Tour" pageMenu="plugins.tour" pageLibs={['driver.js']}>
<DefaultLayout title="Driver tour" pageMenu="plugins.tour" pageLibs={['driver.js']}>
<div class="row row-cards">
<div class="col-12">
<Card>
<CardHeader title="Product Tour Example">
<CardHeader title="Product tour example">
<CardActions>
<Button id="start-tour" text="Start Tour" icon="player-play" color="primary" element="button" />
<Button id="start-tour" text="Start tour" icon="player-play" color="primary" element="button" />
</CardActions>
</CardHeader>
<CardBody>
@@ -28,11 +28,11 @@ import Icon from '@ui/Icon.astro'
</div>
<div class="col-md-6">
<Card id="tour-card-1">
<CardHeader title="Welcome Section" />
<CardHeader title="Welcome section" />
<CardBody>
<p>This is the first card in our tour. It demonstrates how Driver.js highlights elements on the page.</p>
<ButtonList>
<Button text="Action Button" color="primary" element="button" />
<Button text="Action button" color="primary" element="button" />
<Button text="Secondary" element="button" />
</ButtonList>
</CardBody>
@@ -41,7 +41,7 @@ import Icon from '@ui/Icon.astro'
<div class="col-md-6">
<Card id="tour-card-2">
<CardHeader title="Features Section" />
<CardHeader title="Features section" />
<CardBody>
<p>This card shows additional features and demonstrates the tour's ability to navigate between different elements.</p>
<div class="form-selectgroup">
@@ -59,7 +59,7 @@ import Icon from '@ui/Icon.astro'
</div>
<div class="col-12">
<Card id="tour-card-3">
<CardHeader title="Navigation Example" />
<CardHeader title="Navigation example" />
<CardBody>
<p>This is a full-width card that demonstrates how the tour works with larger elements.</p>
<div class="table-responsive">
preview/pages/trial-ended.astro
+1 -1
View File
@@ -6,7 +6,7 @@ import Icon from '@ui/Icon.astro'
<SingleLayout title="Trial ended">
<div class="card card-md">
<div class="card-body">
<h1 class="mb-3 fs-2">Your free trial period has expired!</h1>
<h1 class="mb-3">Your free trial period has expired!</h1>
<p class="text-secondary mb-4">If you want to continue to benefit from Tabler, it's time to upgrade your plan.</p>
preview/pages/users.astro
+2 -2
View File
@@ -31,10 +31,10 @@ const users = people.slice(0, 18)
</CardBody>
<div class="d-flex">
<a href="#" class="card-btn">
<Icon name="mail" color="muted" class="me-2" /> Email
<Icon name="mail" class="me-2" /> Email
</a>
<a href="#" class="card-btn">
<Icon name="phone" color="muted" class="me-2" /> Call
<Icon name="phone" class="me-2" /> Call
</a>
</div>
</Card>
preview/scss/_highlight.scss
-48
View File
@@ -1,48 +0,0 @@
$color-highlight-green: #b5f4a5;
$color-highlight-yellow: #ffe484;
$color-highlight-purple: #d9a9ff;
$color-highlight-red: #ff8383;
$color-highlight-blue: #93ddfd;
$color-highlight-gray: #a0aec0;
pre.highlight,
.highlight pre {
max-height: 30rem;
margin: 1.5rem 0;
overflow: auto;
}
.highlight {
margin: 0;
code > * {
margin: 0 !important;
padding: 0 !important;
}
.c,
.c1 {
color: $color-highlight-gray;
}
.nt,
.nc,
.nx {
color: $color-highlight-red;
}
.na,
.p {
color: $color-highlight-yellow;
}
.s,
.dl,
.s2 {
color: $color-highlight-green;
}
.k {
color: $color-highlight-blue;
}
.s1,
.mi {
color: $color-highlight-purple;
}
}
preview/scss/demo.scss
+26 -31
View File
@@ -1,5 +1,3 @@
@use 'highlight';
.dropdown-menu-demo {
display: inline-block;
width: 100%;
@@ -8,35 +6,6 @@
margin-bottom: 1rem !important;
}
.demo-icon-preview {
position: sticky;
top: 0;
svg,
i {
width: 15rem;
height: 15rem;
font-size: 15rem;
stroke-width: 1.5;
margin: 0 auto;
display: block;
}
}
.demo-icon-preview-icon {
pre {
margin: 0;
user-select: all;
}
}
.demo-dividers {
> p {
opacity: 0.2;
user-select: none;
}
}
$demo-icon-size: 4rem;
.demo-icons-list {
display: flex;
@@ -77,3 +46,29 @@ $demo-icon-size: 4rem;
text-decoration: none;
}
}
// Demo-only sizes, so pages do not carry inline `style` attributes.
.demo-photo-placeholder {
height: 15rem;
}
.demo-dropdown-menu-wide {
min-width: 22rem;
}
.modal-demo-scrollable {
max-height: 30rem;
}
// Border token lab on the playground page
.demo-btn-border-translucent {
--tblr-btn-border-color: var(--tblr-border-color-translucent);
}
.demo-btn-border-dark {
--tblr-btn-border-color: var(--tblr-border-dark-color);
}
.demo-btn-border-dark-translucent {
--tblr-btn-border-color: var(--tblr-border-dark-color-translucent);
}