mirror of
https://github.com/tabler/tabler.git
synced 2026-10-12 05:06:55 +04:00
Align core, shared and preview with the design-system skill (#3010)
This commit is contained in:
Paweł Kuna authored and 
Bartek committed
1 parent
171d0c9b5d
commit
2b355ee76f
158 files changed
+1025
-947
No files matched your search
@@ -117,7 +117,7 @@ migration plan removes it together with every `rgba(var(--X-rgb))` site, so buil
|
||||
| Body size / line | `0.875rem` (14px) / `1.25rem` (20px) |
|
||||
| Small / large body | `0.765625rem` (12.25px; `0.75rem` in 2.0, decision #4) / `1.09375rem` (17.5px) |
|
||||
| Weights | 400 body · 500 medium · 600 semibold · 300 display |
|
||||
| Letter spacing | 0 |
|
||||
| Letter spacing | 0, except `0.04em`: the `subheader()` mixin (`.subheader`, table heads, `.table-mobile` cell labels, `.dropdown-header`, `.datagrid-title`, `.page-pretitle`, `.hr-text`) and the sidebar section title, which writes the same value by hand |
|
||||
| Root font size | not set; `rem` follows the user's browser setting (WCAG 1.4.4) |
|
||||
|
||||
### Heading scale (size / line, both on the 4px grid)
|
||||
@@ -137,7 +137,9 @@ Heading margin-bottom is `--spacer` (8px). Headings and `strong` share the semib
|
||||
### Where each weight is used
|
||||
|
||||
- **400** body text, lead (lead is body-size in the secondary colour, not larger).
|
||||
- **500** buttons, form labels, badges, `kbd`, card titles.
|
||||
- **500** buttons, form labels, badges, `kbd`, card titles, modal and offcanvas titles, ribbons,
|
||||
the chat bubble author, and the active item of a vertical nav, list or step (the active colour
|
||||
already carries the state).
|
||||
- **600** headings, `strong`, navbar brand, alert links.
|
||||
|
||||
### Component text sizes
|
||||
@@ -146,12 +148,15 @@ Heading margin-bottom is `--spacer` (8px). Headings and `strong` share the semib
|
||||
| --- | --- | --- | --- |
|
||||
| Card title | h3 (16px) | 500 | heading colour |
|
||||
| Card subtitle | h4 (14px) when inline | 400 | secondary |
|
||||
| Modal / offcanvas title | h3 (16px) | 500 | heading colour |
|
||||
| Page title | h2 (20px / 28px) | headings weight | |
|
||||
| Form label | h4 (14px), margin-bottom 8px | 500 | body |
|
||||
| Fieldset legend as a label (`legend.form-label`) | inherits 14px (the reboot's bare `legend` is 24px) | 500 | body |
|
||||
| Markdown prose (`.markdown`) | h3 (16px), blockquote 16px — long-form reading text is the one exception to the 14px content rule | 400 | body |
|
||||
| Form hint / feedback | `0.875em`, margin-top 4px | 400 | secondary |
|
||||
| Tooltip / popover body | small (12.25px) | | |
|
||||
| Badge | `0.857em` of parent (sm `0.714em`, lg `1em`) | 500 | |
|
||||
| Sidebar section title | 12px | | |
|
||||
| Sidebar section title | 12px, uppercase, tracked `0.04em` | 500 | navbar colour at 70% |
|
||||
| Code | `0.857em`, `gray-600` on `gray-100` (dark: `gray-400` on `gray-900`) | | |
|
||||
|
||||
---
|
||||
@@ -248,7 +253,7 @@ Rule of thumb: **controls 6px, containers 8px, small controls 4px.** A global
|
||||
|
||||
### Borders
|
||||
|
||||
- Width 1px; `wide` 2px (nav-bordered active, steps, modal status, progress ring).
|
||||
- Width 1px; `wide` 2px (nav-bordered active, steps, modal status, progress ring, card status bar, blockquote rule). Components write `var(--border-width)`, not `1px`.
|
||||
- Colour: `--border-color-translucent` for cards, tables, dropdowns, alerts (blends on any
|
||||
background); `--border-color` for navbars, modals headers, list groups, tabs, popovers.
|
||||
- Hover on a control raises the border to `--border-active-color`.
|
||||
@@ -287,7 +292,11 @@ Every interactive component expresses the same five states with the same tokens:
|
||||
- Coloured buttons: filled `btn-X`, `btn-outline-X` (transparent, coloured border, fills on
|
||||
hover), `btn-ghost-X` (no border, tints on hover).
|
||||
- Nav variants: `pills` (active = `--active-bg` + primary text), `bordered` (2px primary
|
||||
underline), `tabs` (surface bg + border), `underline` (2px, emphasis colour).
|
||||
underline), `tabs` (surface bg + border), `underline` (2px, emphasis colour), `segmented`
|
||||
(tertiary track with an inset 1px translucent ring; active = surface bg + `--border-color`;
|
||||
sizes 32 / 40 / 48px, link gap 8px, lg 12px).
|
||||
- Hover on a list, nav, pagination, action button or select-group item is `$hover-bg`; the
|
||||
open state of a `form-help` popover and the checked select-group item are `--active-bg`.
|
||||
- Pagination active is the one place where a filled primary background is used for a
|
||||
selected item.
|
||||
|
||||
@@ -302,8 +311,9 @@ Every interactive component expresses the same five states with the same tokens:
|
||||
| Collapse | `height 0.35s ease` |
|
||||
| Modal | `transform 0.3s ease-out`, slides down 16px; static backdrop scales 1.02 |
|
||||
| Progress bar | `width 0.6s ease` |
|
||||
| Reveal on hover (`$transition-time`) | `0.3s` — list-group item actions, card options; an opacity fade, not a colour change |
|
||||
| Icon animations | pulse 2s, tada 3s, rotate 3s |
|
||||
| Reveal on hover (`$transition-time`) | `0.3s` — list-group item actions, card options, switch-icon fade/scale/flip; an opacity fade, not a colour change |
|
||||
| Icon animations | pulse 2s, tada 3s, rotate 3s (`.icon-*`); `.btn-animate-icon-*` pulse/shake/tada 0.9s once on hover |
|
||||
| Everything else | `$transition-time` 0.3s or `0.15s`; no other durations in `core/scss/ui` |
|
||||
|
||||
`prefers-reduced-motion`: decorative loops (blink, pulse, tada, rotate, animated gradient,
|
||||
waves) are removed; loaders and indeterminate progress keep animating but at 3s so state is
|
||||
@@ -320,6 +330,8 @@ still visible.
|
||||
negative outer margin of a quarter.
|
||||
- Nav-link icons are the link colour at 50%, 80% on hover.
|
||||
- Filled variant only via `.icon-filled`.
|
||||
- A toggle's two faces are `.switch-icon-a` (rest, inherits or `--secondary`) and `.switch-icon-b`
|
||||
(on, a state colour — `SwitchIcon` takes it as `activeColor`).
|
||||
|
||||
---
|
||||
|
||||
@@ -333,12 +345,17 @@ Places where the code contradicts its own rules, found on 2026-09-08 and decided
|
||||
| 2 | Sass `$spacer` = 16px but CSS `--spacer` = 8px. Headings use the 8px one, `card-img-overlay` and popover header use the 16px one. | `_variables.scss:341`, `layout/_root.scss` | **Fix in 2.0.** `--spacer` becomes 16px, equal to `$spacer`; headings get an explicit `--spacer-2`. Remap of the shipped `--tblr-spacer`: section 5 entry + upgrade guide. | planned 2.0 |
|
||||
| 3 | Small-element heights do not share a ladder: `btn-sm` 28 · `avatar-sm` 32 · tag/status 24. | buttons, inputs, avatars | **Fix in 2.0.** `btn-sm` (and with it `form-control-sm`, `form-select-sm`) goes to 32px: `$input-btn-padding-y-sm` 5px → 7px. The ladder becomes 24 / 32 / 40 / 48 / 56. Section 5 entry + upgrade guide. | planned 2.0 |
|
||||
| 4 | `$font-size-sm` is 12.25px, off the pixel grid; `h5` is 12px. | `_variables.scss:403` | **Fix in 2.0.** `$font-size-sm: 0.75rem`. Tooltips and popovers drop a quarter pixel. Short section 5 entry. | planned 2.0 |
|
||||
| 5 | Two focus indicators: the ring everywhere, but `outline: 2px solid var(--primary)` in `_buttons.scss:294` and `_calendars.scss:73`. | buttons, calendars | **Fix.** Both go through `@include focus-ring()`; added to the scope of issue #2972. | tracked, #2972 |
|
||||
| 5 | Two focus indicators: the ring everywhere, but `outline: 2px solid var(--primary)` on `.btn-action:focus-visible` (`_buttons.scss`), `.date-item:focus-visible` (`_calendars.scss`) and `.switch-icon:focus-visible` (`_switch-icon.scss`). | buttons, calendars, switch-icon | **Fix.** All three go through `@include focus-ring()`; added to the scope of issue #2972. | tracked, #2972 |
|
||||
| 6 | Hex literals outside the variable files: `--card-gradient-*`, `.card-cover` `#666`, `.card-note` `#fff7dd/#fff1c9`, calendar `#66758c` and `#fefeff`. | `ui/_cards.scss`, `ui/_calendars.scss` | **Fix, with one exception.** `.card-note`, `.card-cover` and the calendar get `light-dark()` tokens. The gradients stay literal: they are artwork, nobody rethemes them. | planned, no remap |
|
||||
| 7 | `$dropdown-header-color: $gray-600` and the `$dropdown-dark-*` family are not `light-dark()` pairs. | `_variables.scss` | **Fix in 2.0.** Header colour → `--secondary`. The `$dropdown-dark-*` Sass variables go; `.dropdown-menu-dark` keeps emitting through the dropdown tokens (v5 class, section 5 question 8). | planned 2.0 |
|
||||
| 8 | Tooltip 200px, popover 276px, modals 380/540/720/1140px and toast 350px are the only pixel widths. | `_variables.scss` | **Fix in 2.0.** Move to `rem` (12.5 · 17.25 · 23.75/33.75/45/71.25 · 21.875rem) so overlays scale with the user's font size. Section 5 entry. | planned 2.0 |
|
||||
| 9 | `icon-md` 40px and `icon-lg` 56px drop the stroke to 1; `icon-sm` keeps 1.5. | `ui/_icons.scss` | **Intended.** Rule: stroke 1.5 up to 24px, stroke 1 from 40px. Recorded in section 8. | closed, exception |
|
||||
| 10 | Table hover uses `--emphasis-color` at 7.5% while every other hover uses `$hover-bg` (`--secondary` at 8%). | `_variables.scss` table block | **Fix in 2.0.** `$table-hover-bg: $hover-bg`. Short section 5 entry. | planned 2.0 |
|
||||
| 13 | Demo pages nest example cards inside a section card (`SectionCard` > `SectionCardBody` > `Card`), and `cards.astro` documents "Cards inside card"; rule 12 forbids a card in a card body. | `preview/pages/cards.astro` and every `SectionCard` page | **Intended.** The demo section wrapper is exempt from rule 12: it frames the examples, it is not product markup. The "cards inside card" demo stays. | closed, exception |
|
||||
| 14 | `badge-outline` is forbidden by `.agents/rules/main.mdc` but shipped by `core/scss/ui/_badges.scss` and shown as the "Outline" demo on `badges.astro`. | `_badges.scss`, `badges.astro`, `job-listing.astro` | **Fix in 2.0.** The class is removed: it duplicates the soft `-lt` variant. Deprecate, section 5 entry, upgrade-guide line. | tracked, #3011 |
|
||||
| 15 | Brand colour as UI chrome: the sponsor heart is `text-pink` inside `.btn` (`NavbarSide.astro`, `Sponsor.astro`), the marketing footer uses filled `btn-facebook` / `btn-x` / `btn-instagram` / `btn-linkedin`, and `SmallStats color="facebook"` fills a stat avatar. | `shared/components/**`, `shared/layouts/MarketingLayout.astro` | **Intended, for the brand only.** The sponsor heart and the social follow buttons keep their brand colour; everything else obeys rule 21. The one real violation was a decorative icon at rest, the favourite star in `ProfileContact`, which now inherits. A toggle's on-state (`.switch-icon-b`) is a separate, allowed pattern: it carries a state colour, not decoration. | closed, exception |
|
||||
| 16 | Scroll containers carry an inline height: `ActivityCard` `height: 28rem`, `UsersListHeaders` `max-height: 35rem`, `NavbarSideApps` `max-height: 50vh`. | `shared/components/cards/ActivityCard.astro`, `UsersListHeaders.astro`, `navbar/NavbarSideApps.astro` | **Intended.** A scroll container's height is a per-instance layout choice, not a scale value, so it stays inline. Rule 18 records the exception. | closed, exception |
|
||||
|
||||
---
|
||||
|
||||
## 10. What a review checks (summary)
|
||||
|
||||
@@ -12,6 +12,7 @@ A review cites a rule by number: "rule 16 — buttons go in `btn-list`".
|
||||
### 1. Use 14px for content text
|
||||
|
||||
Body copy, buttons, table cells and form values are 14px. 16px and above belong to headings.
|
||||
Long-form prose inside `.markdown` is the one exception, at 16px (SKILL section 3).
|
||||
|
||||
```html
|
||||
<!-- Recommended -->
|
||||
@@ -28,7 +29,8 @@ Body copy, buttons, table cells and form values are 14px. 16px and above belong
|
||||
Only the first word and product names take a capital. Title Case reads as marketing, not UI.
|
||||
This covers all UI text: headings, card and page titles, subheaders, buttons, menu items and
|
||||
table headers.
|
||||
Today: "Top Pages", "Payment Method", "Edit Profile" and about ten more card titles in preview.
|
||||
Today: 0 in `preview/pages` and `shared/` after the sentence-case pass of 2026-09-08; what is left
|
||||
capitalised is a product or proper name ("Tabler Icons", "Front-End Learning", "United States").
|
||||
|
||||
```html
|
||||
<!-- Recommended -->
|
||||
@@ -43,7 +45,7 @@ Today: "Top Pages", "Payment Method", "Edit Profile" and about ten more card tit
|
||||
### 3. Never use `fw-bold`
|
||||
|
||||
Headings are semibold (600) and emphasised inline text is medium (500). 700 is not on the
|
||||
weight scale. Today: 12 × `fw-bold` against 25 × `fw-medium` and 8 × `fw-semibold`.
|
||||
weight scale. Today: 0 × `fw-bold`, 23 × `fw-medium`, 7 × `fw-semibold`.
|
||||
|
||||
```html
|
||||
<!-- Recommended -->
|
||||
@@ -57,8 +59,10 @@ weight scale. Today: 12 × `fw-bold` against 25 × `fw-medium` and 8 × `fw-semi
|
||||
|
||||
### 4. Never change letter spacing
|
||||
|
||||
`letter-spacing` is 0 everywhere. The only tracked text is `.subheader`, which the framework
|
||||
styles itself.
|
||||
`letter-spacing` is 0 everywhere. The only tracked text comes from the `subheader()` mixin,
|
||||
which the framework applies itself: `.subheader`, table heads, `.table-mobile` cell labels,
|
||||
`.dropdown-header`, `.datagrid-title`, `.page-pretitle` and `.hr-text`, plus the sidebar
|
||||
section title, which writes the same `0.04em` by hand. Markup never adds tracking.
|
||||
|
||||
```html
|
||||
<!-- Recommended -->
|
||||
@@ -134,16 +138,16 @@ hand-written nesting must too.
|
||||
<div class="bg-secondary-lt rounded-1 p-3">…</div>
|
||||
</div>
|
||||
|
||||
<!-- Avoid: inner radius equal to the outer one -->
|
||||
<!-- Avoid: inner radius equal to the outer one (rounded-3 is the card's 8px) -->
|
||||
<div class="card p-1">
|
||||
<div class="bg-secondary-lt rounded-2 p-3">…</div>
|
||||
<div class="bg-secondary-lt rounded-3 p-3">…</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### 9. Use a border to separate sticky elements
|
||||
|
||||
A sticky table head or toolbar gets a 1px border on the edge that meets the content. A
|
||||
shadow there reads as a floating surface, which it is not. Today: 6 × `sticky-top` in preview.
|
||||
shadow there reads as a floating surface, which it is not. Today: 4 × `sticky-top` in preview.
|
||||
|
||||
```html
|
||||
<!-- Recommended -->
|
||||
@@ -190,6 +194,8 @@ stronger belongs to floating surfaces.
|
||||
Two borders and two paddings in a row look like a mistake. Kumo's rule is "never stack";
|
||||
Tabler has `.card-stacked` for the deliberate stack, so the rule is about nesting. A list in a
|
||||
card is `card-list-group`, a table is `card-table`; both keep the card's edge and padding.
|
||||
The demo pages' `SectionCard` wrapper is exempt: it frames the examples on a preview page, it
|
||||
is not product markup (deviation #13, closed).
|
||||
|
||||
```html
|
||||
<!-- Recommended -->
|
||||
@@ -260,7 +266,8 @@ finds the primary without reading.
|
||||
### 16. Buttons go in `btn-list`, badges in `badge-list`, avatars in `avatar-list`
|
||||
|
||||
The wrappers own the gap and the wrapping. Hand-written `me-2` breaks at the last item and
|
||||
in RTL. Today: 57 × `me-2` against 5 × `btn-list`.
|
||||
in RTL. Today: 0 × `me-2` on a button, badge or avatar; 49 × `<ButtonList>`, 10 × `<BadgeList>`,
|
||||
13 × `<AvatarList>`, 9 × `<TagList>`. The remaining 53 × `me-2` sit on inline icons and text.
|
||||
|
||||
```html
|
||||
<!-- Recommended -->
|
||||
@@ -277,8 +284,9 @@ in RTL. Today: 57 × `me-2` against 5 × `btn-list`.
|
||||
### 17. Use `text-secondary`, never `text-muted`
|
||||
|
||||
One class for secondary text. `text-muted` is a Bootstrap alias kept for compatibility.
|
||||
Today: 254 × `text-secondary`, 18 × `text-muted`. `<Icon color="muted">` still emits
|
||||
`text-muted` and is documented that way; it is not a finding until the prop is remapped.
|
||||
Today: 0 × `text-muted` anywhere in `preview/pages`, `shared/` and `docs/content`, including
|
||||
`<Icon color="muted">`, which is gone; `text-secondary` is the only secondary-text class. The
|
||||
`.text-muted` utility itself stays as a Bootstrap alias until 2.0 drops the aliases.
|
||||
|
||||
```html
|
||||
<!-- Recommended -->
|
||||
@@ -291,8 +299,12 @@ Today: 254 × `text-secondary`, 18 × `text-muted`. `<Icon color="muted">` still
|
||||
### 18. No inline `style` for sizes
|
||||
|
||||
Sizes come from utilities or a component token, so they follow the scale and the theme.
|
||||
Today: 75 inline `style` attributes in preview, among them 8 × `height: 8rem` and
|
||||
`width: 350px`. The exception is SVG illustration fills, which are data, not layout.
|
||||
Today: 0 inline sizes in `preview/pages`; demo-only sizes live as classes in
|
||||
`preview/scss/demo.scss` (`demo-photo-placeholder`, `demo-dropdown-menu-wide`,
|
||||
`modal-demo-scrollable`). In `shared/` three scroll-container heights stay inline on purpose (deviation #16): a scroll
|
||||
height is a per-instance layout choice, not a scale value.
|
||||
The exceptions are data, not layout: SVG illustration fills, `background-image` URLs and
|
||||
progress-bar widths that carry the value.
|
||||
|
||||
```html
|
||||
<!-- Recommended -->
|
||||
@@ -307,7 +319,8 @@ Today: 75 inline `style` attributes in preview, among them 8 × `height: 8rem` a
|
||||
### 19. Vertical rhythm is `mb-3` inside a card and `row-cards` between cards
|
||||
|
||||
One spacing step per level. Mixing `mb-3`, `mb-4` and `mt-3` in the same block gives uneven
|
||||
gaps nobody chose. Today: 142 × `mb-3`, 76 × `mb-4`, 31 × `mt-3`, 31 × `mt-4`.
|
||||
gaps nobody chose. Today: 148 × `mb-3`, 46 × `mb-4`, 33 × `mt-3`, 27 × `mt-4`; the `mb-4`
|
||||
left is mostly the auth and marketing cards, which use a wider rhythm on purpose.
|
||||
|
||||
```html
|
||||
<!-- Recommended -->
|
||||
@@ -348,12 +361,19 @@ and the state colours are not reused for categories.
|
||||
### 21. Icons inherit colour inside controls, `gray-400` elsewhere
|
||||
|
||||
A button's icon is the button's text colour. A stand-alone icon is `--icon-color`.
|
||||
Colouring an icon separately makes it read as a second control.
|
||||
Colouring an icon separately makes it read as a second control. Two exceptions: the on-state of
|
||||
a toggle carries a state colour on purpose (rule 20) — that is what `.switch-icon-b` is for, and
|
||||
`SwitchIcon` takes it as `activeColor` — and the sponsor heart, which carries the brand
|
||||
(deviation #15).
|
||||
|
||||
```html
|
||||
<!-- Recommended -->
|
||||
<a href="#" class="btn btn-primary"><Icon name="plus" /> Create</a>
|
||||
<Icon name="search" class="text-secondary" />
|
||||
<button class="switch-icon" data-bs-toggle="switch-icon">
|
||||
<span class="switch-icon-a text-secondary"><Icon name="heart" /></span>
|
||||
<span class="switch-icon-b text-red"><Icon name="heart" class="icon-filled" /></span>
|
||||
</button>
|
||||
|
||||
<!-- Avoid -->
|
||||
<a href="#" class="btn"><Icon name="plus" class="text-primary" /> Create</a>
|
||||
@@ -361,8 +381,10 @@ Colouring an icon separately makes it read as a second control.
|
||||
|
||||
### 22. Uppercase only in `.subheader` and list-group headers
|
||||
|
||||
The framework uppercases `.subheader`, `.list-group-header`, avatar initials, ribbons and the
|
||||
pagination "page" label. Nothing else. Today: 9 × `text-uppercase` in preview to review.
|
||||
The framework uppercases `.subheader`, `.list-group-header`, avatar initials, ribbons, the
|
||||
pagination "page" label and, through the `subheader()` mixin, table heads, `.dropdown-header`,
|
||||
`.datagrid-title`, `.page-pretitle` and `.hr-text`. Nothing else, so `<th class="text-uppercase">`
|
||||
is redundant. Today: 0 × `text-uppercase` in `preview/pages` and `shared/`.
|
||||
|
||||
```html
|
||||
<!-- Recommended -->
|
||||
|
||||
@@ -0,0 +1,5 @@
|
||||
---
|
||||
"@tabler/core": minor
|
||||
---
|
||||
|
||||
Added `$dropdown-arrow-size`, `$badge-padding-y-sm`, `$signature-canvas-height` and the `$nav-tokens` and `$pagination-tokens` maps.
|
||||
@@ -0,0 +1,5 @@
|
||||
---
|
||||
"@tabler/core": patch
|
||||
---
|
||||
|
||||
Fixed colours that ignored dark mode by replacing Sass colour literals with `--tblr-*` tokens in buttons, forms, lists, steps and toasts.
|
||||
@@ -0,0 +1,5 @@
|
||||
---
|
||||
"@tabler/core": patch
|
||||
---
|
||||
|
||||
Updated hover, active, font-weight, shadow and motion values across `core/scss/ui` to the design-system recipes.
|
||||
@@ -0,0 +1,5 @@
|
||||
---
|
||||
"@tabler/core": major
|
||||
---
|
||||
|
||||
Removed `$alert-shadow`, `$steps-dot-offset-counter` and the `--tblr-status-color-rgb` custom property.
|
||||
@@ -0,0 +1,5 @@
|
||||
---
|
||||
"@tabler/core": patch
|
||||
---
|
||||
|
||||
Removed the `letter-spacing` from `.badge` so only `.subheader` and its mixin consumers are tracked.
|
||||
@@ -0,0 +1,5 @@
|
||||
---
|
||||
"@tabler/preview": patch
|
||||
---
|
||||
|
||||
Updated the email inbox list to `card-list-group` and replaced every `<Icon color="muted">` with `color="secondary"`.
|
||||
@@ -0,0 +1,5 @@
|
||||
---
|
||||
"@tabler/preview": patch
|
||||
---
|
||||
|
||||
Updated preview pages and shared components to sentence case, `text-secondary` and list wrappers, with no inline sizes.
|
||||
+19
-15
@@ -1006,7 +1006,6 @@ $alert-margin-bottom: 1rem !default;
|
||||
$alert-link-font-weight: var(--font-weight-semibold) !default;
|
||||
$alert-border-width: var(--border-width) !default;
|
||||
$alert-border-color: var(--border-color-translucent) !default;
|
||||
$alert-shadow: color-transparent(var(--dark), 0.04) 0 2px 4px 0 !default;
|
||||
$alert-heading-margin-bottom: 0.25rem !default;
|
||||
$alert-icon-size: 1.25rem !default;
|
||||
$alert-padding-inline-end: 3rem !default;
|
||||
@@ -1021,7 +1020,7 @@ $breadcrumb-padding-x: 0 !default;
|
||||
$breadcrumb-item-padding-x: 0.5rem !default;
|
||||
$breadcrumb-margin-bottom: 1rem !default;
|
||||
$breadcrumb-bg: null !default;
|
||||
$breadcrumb-divider-color: var(--gray-500) !default;
|
||||
$breadcrumb-divider-color: var(--secondary) !default;
|
||||
$breadcrumb-active-color: inherit !default;
|
||||
$breadcrumb-divider: string.quote('/') !default;
|
||||
$breadcrumb-border-radius: null !default;
|
||||
@@ -1049,6 +1048,7 @@ $badge-empty-size: 0.5rem !default;
|
||||
$badge-color: var(--secondary) !default;
|
||||
$badge-bg-color: var(--bg-surface-secondary) !default;
|
||||
$badge-gap: 0.25rem !default;
|
||||
$badge-padding-y-sm: 2px !default;
|
||||
$badge-padding-x-sm: 0.25rem !default;
|
||||
$badge-padding-y-lg: 0.25rem !default;
|
||||
$badge-padding-x-lg: 0.5rem !default;
|
||||
@@ -1227,7 +1227,7 @@ $card-bg: var(--bg-surface) !default;
|
||||
$card-img-overlay-padding: $spacer !default;
|
||||
$card-group-margin: 1.5rem !default;
|
||||
|
||||
$card-status-size: 3px !default;
|
||||
$card-status-size: $border-width-wide !default;
|
||||
// The strip sits on top of the card border, so it is pulled out by the border width
|
||||
$card-status-offset: calc(-1 * var(--card-border-width)) !default;
|
||||
|
||||
@@ -1308,10 +1308,10 @@ $carousel-control-icon-width: 1.5rem !default;
|
||||
$carousel-control-prev-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='15 18 9 12 15 6'></polyline></svg>") !default;
|
||||
$carousel-control-next-icon-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'></polyline></svg>") !default;
|
||||
|
||||
$carousel-indicator-width: 30px !default;
|
||||
$carousel-indicator-height: 3px !default;
|
||||
$carousel-indicator-hit-area-height: 10px !default;
|
||||
$carousel-indicator-spacer: 3px !default;
|
||||
$carousel-indicator-width: 32px !default;
|
||||
$carousel-indicator-height: 2px !default;
|
||||
$carousel-indicator-hit-area-height: 12px !default;
|
||||
$carousel-indicator-spacer: 4px !default;
|
||||
$carousel-indicator-opacity: 0.5 !default;
|
||||
$carousel-indicator-active-bg: $white !default;
|
||||
$carousel-indicator-active-opacity: 1 !default;
|
||||
@@ -1403,6 +1403,7 @@ $dropdown-scrollable-height: 13rem !default;
|
||||
$dropdown-item-gap: 0.5rem !default;
|
||||
$dropdown-header-padding-bottom: 0.25rem !default;
|
||||
$dropdown-menu-columns-gap: 0.25rem !default;
|
||||
$dropdown-arrow-size: 0.75rem !default;
|
||||
$dropdown-arrow-offset: 0.25rem !default;
|
||||
$dropdown-arrow-inset: 0.75rem !default;
|
||||
$dropdown-dropend-offset: 0.25rem !default;
|
||||
@@ -1443,7 +1444,7 @@ $tooltip-arrow-height: 0.4rem !default;
|
||||
$loader-size: 2.5rem !default;
|
||||
|
||||
$list-group-header-bg: var(--bg-surface-tertiary) !default;
|
||||
$list-group-header-color: var(--gray-500) !default;
|
||||
$list-group-header-color: var(--secondary) !default;
|
||||
|
||||
// Modals
|
||||
// scss-docs-start modal-variables
|
||||
@@ -1502,7 +1503,7 @@ $nav-link-padding-y: 0.5rem !default;
|
||||
$nav-link-padding-x: 0.75rem !default;
|
||||
$nav-link-font-size: var(--body-font-size) !default;
|
||||
$nav-link-font-weight: null !default;
|
||||
$nav-link-color: var(--gray-500) !default;
|
||||
$nav-link-color: var(--secondary) !default;
|
||||
$nav-link-active-color: var(--body-color) !default;
|
||||
$nav-link-hover-color: var(--link-hover-color) !default;
|
||||
$nav-link-transition:
|
||||
@@ -1731,8 +1732,8 @@ $steps-counter-dot-size: 1.5rem !default;
|
||||
$steps-vertical-padding-start: 1rem !default;
|
||||
$steps-vertical-item-gap: 1rem !default;
|
||||
$steps-vertical-connector-gap: 1rem !default;
|
||||
$steps-dot-offset: 6px !default;
|
||||
$steps-dot-offset-counter: -2px !default;
|
||||
// Centers the dot on the first line of the step label, whatever the dot size.
|
||||
$steps-dot-offset: calc((var(--body-line-height) * 1em - var(--steps-dot-size)) / 2) !default;
|
||||
// scss-docs-end steps-variables
|
||||
|
||||
// Spinner
|
||||
@@ -1820,7 +1821,7 @@ $toast-background-color: var(--bg-surface) !default;
|
||||
$toast-border-width: var(--border-width) !default;
|
||||
$toast-border-color: var(--border-color) !default;
|
||||
$toast-border-radius: var(--border-radius) !default;
|
||||
$toast-box-shadow: var(--box-shadow) !default;
|
||||
$toast-box-shadow: var(--shadow) !default;
|
||||
$toast-spacing: $container-padding-x !default;
|
||||
|
||||
$toast-header-color: var(--gray-500) !default;
|
||||
@@ -2148,6 +2149,9 @@ $switch-icon-loading-border-width: $spinner-border-width-sm !default;
|
||||
$switch-icon-loading-animation-speed: $spinner-animation-speed !default;
|
||||
// scss-docs-end switch-icon-variables
|
||||
|
||||
// Signature
|
||||
$signature-canvas-height: 12.5rem !default;
|
||||
|
||||
// Offcanvas
|
||||
// scss-docs-start offcanvas-variables
|
||||
$offcanvas-padding-y: $modal-inner-padding !default;
|
||||
@@ -2203,19 +2207,19 @@ $nav-segmented-height: 2.5rem !default;
|
||||
$nav-segmented-padding: 2px !default;
|
||||
$nav-segmented-radius: 6px !default;
|
||||
$nav-segmented-gap: 0.25rem !default;
|
||||
$nav-segmented-link-gap: 0.25rem !default;
|
||||
$nav-segmented-link-gap: 0.5rem !default;
|
||||
$nav-segmented-link-padding-x: 0.75rem !default;
|
||||
$nav-segmented-link-icon-size: 1.25rem !default;
|
||||
$nav-segmented-icon-margin: -0.25rem !default;
|
||||
$nav-segmented-height-sm: 2rem !default;
|
||||
$nav-segmented-radius-sm: 4px !default;
|
||||
$nav-segmented-link-padding-x-sm: 0.5rem !default;
|
||||
$nav-segmented-link-gap-sm: 0.25rem !default;
|
||||
$nav-segmented-link-gap-sm: 0.5rem !default;
|
||||
$nav-segmented-link-icon-size-sm: 1rem !default;
|
||||
$nav-segmented-height-lg: 3rem !default;
|
||||
$nav-segmented-radius-lg: 8px !default;
|
||||
$nav-segmented-link-padding-x-lg: 1rem !default;
|
||||
$nav-segmented-link-gap-lg: 0.5rem !default;
|
||||
$nav-segmented-link-gap-lg: 0.75rem !default;
|
||||
$nav-segmented-link-icon-size-lg: 1.5rem !default;
|
||||
// scss-docs-end segmented-nav-variables
|
||||
|
||||
|
||||
@@ -58,7 +58,7 @@ $avatar-tokens: defaults(
|
||||
inset-inline-end: 0;
|
||||
bottom: 0;
|
||||
@include border-radius(var(--border-radius-pill));
|
||||
box-shadow: 0 0 0 calc(var(--avatar-status-size) / 4) $card-bg;
|
||||
box-shadow: 0 0 0 calc(var(--avatar-status-size) / 4) var(--card-bg, var(--bg-surface));
|
||||
}
|
||||
|
||||
@at-root a#{&} {
|
||||
@@ -66,7 +66,7 @@ $avatar-tokens: defaults(
|
||||
|
||||
&:hover {
|
||||
color: var(--primary);
|
||||
--avatar-box-shadow-color: var(--primary);
|
||||
--avatar-box-shadow-color: var(--border-active-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -149,13 +149,13 @@ $avatar-tokens: defaults(
|
||||
svg {
|
||||
width: var(--avatar-upload-icon-size);
|
||||
height: var(--avatar-upload-icon-size);
|
||||
stroke-width: 1;
|
||||
stroke-width: 1.5;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--primary);
|
||||
text-decoration: none;
|
||||
border-color: var(--primary);
|
||||
border-color: var(--border-active-color);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -181,6 +181,6 @@ $avatar-tokens: defaults(
|
||||
width: var(--avatar-brand-size);
|
||||
height: var(--avatar-brand-size);
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border-color);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
@include border-radius(var(--border-radius));
|
||||
}
|
||||
@@ -36,7 +36,6 @@ $badge-tokens: defaults(
|
||||
line-height: var(--badge-line-height);
|
||||
color: var(--badge-color);
|
||||
text-align: center;
|
||||
letter-spacing: 0.04em;
|
||||
white-space: nowrap;
|
||||
vertical-align: bottom;
|
||||
user-select: none;
|
||||
@@ -52,7 +51,6 @@ $badge-tokens: defaults(
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
font-size: var(--badge-icon-size);
|
||||
stroke-width: 2;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -115,7 +113,7 @@ $badge-tokens: defaults(
|
||||
.badge-sm {
|
||||
--badge-font-size: #{$badge-font-size-sm};
|
||||
--badge-icon-size: 1em;
|
||||
--badge-padding-y: 2px;
|
||||
--badge-padding-y: #{$badge-padding-y-sm};
|
||||
--badge-padding-x: #{$badge-padding-x-sm};
|
||||
}
|
||||
|
||||
|
||||
@@ -81,7 +81,7 @@ $btn-tokens: defaults(
|
||||
// here would leave a disabled link button with the default surface and border.
|
||||
--btn-bg: transparent;
|
||||
--btn-border-color: transparent;
|
||||
color: #{adjust-lightness-css(var(--primary), 5%)};
|
||||
color: var(--link-color);
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
box-shadow: none;
|
||||
@@ -91,7 +91,7 @@ $btn-tokens: defaults(
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #{$btn-link-hover-color};
|
||||
color: var(--link-hover-color);
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
@@ -311,7 +311,7 @@ $btn-colors: map.keys(map.merge($theme-colors, $social-colors));
|
||||
// Action button
|
||||
//
|
||||
.btn-action {
|
||||
--border-color: transparent;
|
||||
--btn-border-color: transparent;
|
||||
--btn-bg: transparent;
|
||||
--btn-disabled-color: var(--secondary);
|
||||
color: var(--secondary);
|
||||
@@ -361,7 +361,7 @@ $btn-colors: map.keys(map.merge($theme-colors, $social-colors));
|
||||
|
||||
.btn-animate-icon {
|
||||
.icon {
|
||||
transition: transform 0.3s ease;
|
||||
transition: transform $transition-time ease;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
|
||||
@@ -104,14 +104,14 @@ $calendar-tokens: defaults(
|
||||
top: 50%;
|
||||
height: var(--calendar-date-size);
|
||||
content: '';
|
||||
background: color-transparent(var(--primary), 0.1);
|
||||
background: var(--active-bg);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
&.range-start,
|
||||
&.range-end {
|
||||
.date-item {
|
||||
color: $white;
|
||||
color: var(--primary-fg);
|
||||
background: var(--primary);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
+16
-16
@@ -106,7 +106,7 @@ $card-tokens: defaults(
|
||||
max-height: 100%;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
border-start-end-radius: $border-radius;
|
||||
border-start-end-radius: var(--card-border-radius);
|
||||
opacity: $card-stamp-opacity;
|
||||
}
|
||||
|
||||
@@ -132,7 +132,7 @@ $card-tokens: defaults(
|
||||
.icon {
|
||||
width: calc(var(--stamp-size) * 0.75);
|
||||
height: calc(var(--stamp-size) * 0.75);
|
||||
stroke-width: 2;
|
||||
stroke-width: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -176,7 +176,7 @@ $card-tokens: defaults(
|
||||
flex: 1;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: $card-spacer-y $card-spacer-x;
|
||||
padding: var(--card-spacer-y) var(--card-spacer-x);
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: inherit;
|
||||
text-align: center;
|
||||
@@ -213,7 +213,7 @@ $card-tokens: defaults(
|
||||
|
||||
.card-cover {
|
||||
position: relative;
|
||||
padding: $card-spacer-y $card-spacer-x;
|
||||
padding: var(--card-spacer-y) var(--card-spacer-x);
|
||||
background: #666 no-repeat center/cover;
|
||||
|
||||
&::before {
|
||||
@@ -228,7 +228,7 @@ $card-tokens: defaults(
|
||||
|
||||
&:first-child,
|
||||
&:first-child::before {
|
||||
@include border-radius($border-radius $border-radius 0 0);
|
||||
@include border-radius(var(--card-border-radius) var(--card-border-radius) 0 0);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -299,7 +299,7 @@ $card-tokens: defaults(
|
||||
&:hover {
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
box-shadow: 0 1px 6px 0 rgba(0, 0, 0, 0.08);
|
||||
box-shadow: var(--shadow-card-hover);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -338,11 +338,11 @@ $card-tokens: defaults(
|
||||
height: var(--card-progress-height);
|
||||
|
||||
&:last-child {
|
||||
@include border-radius(0 0 2px 2px);
|
||||
@include border-radius(0 0 var(--border-radius-xs) var(--border-radius-xs));
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
@include border-radius(2px 2px 0 0);
|
||||
@include border-radius(var(--border-radius-xs) var(--border-radius-xs) 0 0);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -391,7 +391,7 @@ $card-tokens: defaults(
|
||||
.card-subtitle {
|
||||
--card-subtitle-margin-start: #{$card-subtitle-margin-start};
|
||||
margin-bottom: $card-title-spacer-y;
|
||||
font-weight: 400;
|
||||
font-weight: var(--font-weight-normal);
|
||||
color: var(--secondary);
|
||||
|
||||
.card-header & {
|
||||
@@ -502,13 +502,13 @@ $card-tokens: defaults(
|
||||
td,
|
||||
th {
|
||||
&:first-child {
|
||||
padding-inline-start: $card-spacer-x;
|
||||
padding-inline-start: var(--card-spacer-x);
|
||||
border-inline-start: 0;
|
||||
border-start-start-radius: var(--card-border-radius);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-inline-end: $card-spacer-x;
|
||||
padding-inline-end: var(--card-spacer-x);
|
||||
border-inline-end: 0;
|
||||
border-start-end-radius: var(--card-border-radius);
|
||||
}
|
||||
@@ -627,8 +627,8 @@ Card list group
|
||||
}
|
||||
|
||||
.list-group-item {
|
||||
padding-inline-start: $card-spacer-x;
|
||||
padding-inline-end: $card-spacer-x;
|
||||
padding-inline-start: var(--card-spacer-x);
|
||||
padding-inline-end: var(--card-spacer-x);
|
||||
border-inline-start: 0;
|
||||
border-inline-end: 0;
|
||||
border-radius: 0;
|
||||
@@ -651,14 +651,14 @@ Card list group
|
||||
border-bottom: 0;
|
||||
|
||||
.nav-link {
|
||||
background: $card-cap-bg;
|
||||
border: $card-border-width var(--border-style) $card-border-color;
|
||||
background: var(--card-cap-bg);
|
||||
border: var(--card-border-width) var(--border-style) var(--card-border-color);
|
||||
|
||||
&.active,
|
||||
&:active,
|
||||
&:hover {
|
||||
color: var(--body-color);
|
||||
border-color: $card-border-color;
|
||||
border-color: var(--card-border-color);
|
||||
}
|
||||
|
||||
&.active {
|
||||
|
||||
@@ -39,7 +39,7 @@
|
||||
margin: 0 $carousel-indicator-spacer;
|
||||
background: no-repeat center/cover;
|
||||
border: 0;
|
||||
box-shadow: $box-shadow;
|
||||
box-shadow: var(--shadow-card);
|
||||
opacity: $carousel-indicator-thumb-opacity;
|
||||
@include border-radius(var(--border-radius));
|
||||
|
||||
@@ -68,6 +68,6 @@
|
||||
inset-inline-end: 0;
|
||||
bottom: 0;
|
||||
height: 90%;
|
||||
background: $dark;
|
||||
background: var(--dark);
|
||||
background: linear-gradient(0deg, color-transparent(var(--dark), 0.9), color-transparent(var(--dark), 0));
|
||||
}
|
||||
@@ -43,7 +43,7 @@ $chat-tokens: defaults(
|
||||
}
|
||||
|
||||
.chat-bubble-author {
|
||||
font-weight: 600;
|
||||
font-weight: var(--font-weight-medium);
|
||||
}
|
||||
|
||||
.chat-bubble-date {
|
||||
|
||||
@@ -11,6 +11,7 @@ $dropdown-tokens: defaults(
|
||||
--dropdown-item-icon-color: var(--tertiary),
|
||||
--dropdown-header-padding-bottom: $dropdown-header-padding-bottom,
|
||||
--dropdown-menu-columns-gap: $dropdown-menu-columns-gap,
|
||||
--dropdown-arrow-size: $dropdown-arrow-size,
|
||||
--dropdown-arrow-offset: $dropdown-arrow-offset,
|
||||
--dropdown-arrow-inset: $dropdown-arrow-inset,
|
||||
--dropdown-dropend-offset: $dropdown-dropend-offset,
|
||||
@@ -99,9 +100,9 @@ $dropdown-tokens: defaults(
|
||||
top: calc(-1 * var(--dropdown-arrow-offset));
|
||||
z-index: -1;
|
||||
display: block;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
clip-path: inset(0 5px 5px 0);
|
||||
width: var(--dropdown-arrow-size);
|
||||
height: var(--dropdown-arrow-size);
|
||||
clip-path: inset(0 calc(var(--dropdown-arrow-size) / 3) calc(var(--dropdown-arrow-size) / 3) 0);
|
||||
content: '';
|
||||
background: inherit;
|
||||
// The menu draws its edge with the 1px ring in --dropdown-box-shadow and has
|
||||
|
||||
@@ -18,12 +18,17 @@ textarea {
|
||||
&.required {
|
||||
&::after {
|
||||
margin-inline-start: var(--form-label-required-gap);
|
||||
color: $red;
|
||||
color: var(--danger);
|
||||
content: '*';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// A fieldset legend used as a label keeps the label size, not the reboot's 1.5rem.
|
||||
legend.form-label {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
.form-label-description {
|
||||
float: inline-end;
|
||||
font-weight: var(--font-weight-normal);
|
||||
@@ -57,12 +62,12 @@ textarea {
|
||||
}
|
||||
|
||||
.form-control-light {
|
||||
background-color: var(--gray-100);
|
||||
background-color: var(--bg-surface-secondary);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.form-control-dark {
|
||||
color: $white;
|
||||
color: var(--white);
|
||||
background-color: color-transparent(var(--black), 0.1);
|
||||
border-color: transparent;
|
||||
|
||||
@@ -135,10 +140,15 @@ fieldset:empty {
|
||||
@include border-radius(var(--border-radius-pill));
|
||||
@include transition(background-color $transition-time, color $transition-time);
|
||||
|
||||
&:hover,
|
||||
&:hover {
|
||||
color: var(--body-color);
|
||||
background: $hover-bg;
|
||||
}
|
||||
|
||||
// Popover open
|
||||
&[aria-describedby] {
|
||||
color: $white;
|
||||
background: var(--primary);
|
||||
color: var(--primary);
|
||||
background: var(--active-bg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -61,19 +61,19 @@
|
||||
// Icons animation
|
||||
//
|
||||
.icon-pulse {
|
||||
transition: all 0.15s ease 0s;
|
||||
transition: transform 0.15s ease;
|
||||
animation: pulse 2s ease infinite;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.icon-tada {
|
||||
transition: all 0.15s ease 0s;
|
||||
transition: transform 0.15s ease;
|
||||
animation: tada 3s ease infinite;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
.icon-rotate {
|
||||
transition: all 0.15s ease 0s;
|
||||
transition: transform 0.15s ease;
|
||||
animation: rotate-360 3s linear infinite;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
@@ -14,7 +14,7 @@
|
||||
width: var(--legend-size);
|
||||
height: var(--legend-size);
|
||||
background: var(--legend-color);
|
||||
border: 1px solid var(--border-color-translucent);
|
||||
border: var(--border-width) solid var(--border-color-translucent);
|
||||
@include border-radius($legend-border-radius);
|
||||
}
|
||||
|
||||
|
||||
@@ -30,14 +30,14 @@
|
||||
// `.list-group-item-{color}` tint.
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
color: $gray-500;
|
||||
color: var(--disabled-color);
|
||||
background-color: var(--hover-bg);
|
||||
}
|
||||
}
|
||||
|
||||
.list-group-item.active {
|
||||
background-color: var(--active-bg);
|
||||
border-inline-start-color: $component-active-bg;
|
||||
border-inline-start-color: var(--primary);
|
||||
border-inline-start-width: $border-width-wide;
|
||||
}
|
||||
|
||||
@@ -85,7 +85,7 @@
|
||||
}
|
||||
|
||||
&.active {
|
||||
font-weight: var(--font-weight-semibold);
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: inherit;
|
||||
background: $list-group-active-bg;
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
display: block;
|
||||
width: $loader-size;
|
||||
height: $loader-size;
|
||||
color: $blue;
|
||||
color: var(--primary);
|
||||
vertical-align: middle;
|
||||
|
||||
&::after {
|
||||
@@ -15,7 +15,7 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
content: '';
|
||||
border: 1px var(--border-style);
|
||||
border: var(--border-width) var(--border-style);
|
||||
border-color: transparent;
|
||||
border-inline-start-color: currentColor;
|
||||
border-top-color: currentColor;
|
||||
|
||||
@@ -81,7 +81,7 @@ Prose (formerly markdown)
|
||||
> p > img,
|
||||
> figure > img {
|
||||
@include border-radius(var(--border-radius));
|
||||
border: 1px solid var(--border-color);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
}
|
||||
|
||||
pre {
|
||||
|
||||
@@ -47,7 +47,7 @@
|
||||
|
||||
.modal-title {
|
||||
font-size: $h3-font-size;
|
||||
font-weight: $headings-font-weight;
|
||||
font-weight: var(--font-weight-medium);
|
||||
line-height: $line-height-base;
|
||||
color: var(--heading-color, var(--emphasis-color));
|
||||
}
|
||||
|
||||
+25
-10
@@ -1,15 +1,30 @@
|
||||
@use '../config' as *;
|
||||
|
||||
// stylelint-disable custom-property-no-missing-var-function -- token-map keys are dashed-idents by design, not unwrapped var() references
|
||||
|
||||
// Tabler's additions on top of Bootstrap's `.nav` tokens.
|
||||
// scss-docs-start nav-css-vars
|
||||
$nav-tokens: () !default;
|
||||
$nav-tokens: defaults(
|
||||
(
|
||||
--nav-link-hover-bg: var(--hover-bg),
|
||||
// Read by `.nav-vertical .nav-link.active` below; without it that rule's
|
||||
// color declaration was invalid and the active link fell back to the
|
||||
// inherited color.
|
||||
--nav-link-active-color: $nav-link-active-color,
|
||||
--nav-vertical-nested-margin-start: $nav-vertical-nested-margin-start,
|
||||
--nav-vertical-nested-padding-start: $nav-vertical-nested-padding-start,
|
||||
--nav-link-toggle-padding-x: $nav-link-toggle-padding-x,
|
||||
--nav-link-icon-margin-end: $nav-link-icon-margin-end,
|
||||
),
|
||||
$nav-tokens
|
||||
);
|
||||
// scss-docs-end nav-css-vars
|
||||
|
||||
// stylelint-enable custom-property-no-missing-var-function
|
||||
|
||||
.nav {
|
||||
--nav-link-hover-bg: var(--hover-bg);
|
||||
// Read by `.nav-vertical .nav-link.active` below; without it that rule's
|
||||
// color declaration was invalid and the active link fell back to the
|
||||
// inherited color.
|
||||
--nav-link-active-color: #{$nav-link-active-color};
|
||||
--nav-vertical-nested-margin-start: #{$nav-vertical-nested-margin-start};
|
||||
--nav-vertical-nested-padding-start: #{$nav-vertical-nested-padding-start};
|
||||
--nav-link-toggle-padding-x: #{$nav-link-toggle-padding-x};
|
||||
--nav-link-icon-margin-end: #{$nav-link-icon-margin-end};
|
||||
@include tokens($nav-tokens);
|
||||
font-size: var(--body-font-size);
|
||||
}
|
||||
|
||||
@@ -28,7 +43,7 @@
|
||||
|
||||
.nav-link.active,
|
||||
.nav-item.show .nav-link {
|
||||
font-weight: var(--font-weight-semibold);
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--nav-link-active-color);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,13 +1,28 @@
|
||||
@use '../config' as *;
|
||||
|
||||
// stylelint-disable custom-property-no-missing-var-function -- token-map keys are dashed-idents by design, not unwrapped var() references
|
||||
|
||||
// Tabler's additions on top of Bootstrap's `.pagination` tokens.
|
||||
// scss-docs-start pagination-css-vars
|
||||
$pagination-tokens: () !default;
|
||||
$pagination-tokens: defaults(
|
||||
(
|
||||
--pagination-gap: $pagination-gap,
|
||||
--pagination-link-min-width: $pagination-link-min-width,
|
||||
--page-text-padding-x: $page-text-padding-x,
|
||||
),
|
||||
$pagination-tokens
|
||||
);
|
||||
// scss-docs-end pagination-css-vars
|
||||
|
||||
// stylelint-enable custom-property-no-missing-var-function
|
||||
|
||||
.pagination {
|
||||
@include tokens($pagination-tokens);
|
||||
gap: var(--pagination-gap);
|
||||
margin: 0;
|
||||
line-height: var(--body-line-height);
|
||||
user-select: none;
|
||||
--pagination-gap: #{$pagination-gap};
|
||||
--pagination-link-min-width: #{$pagination-link-min-width};
|
||||
--page-text-padding-x: #{$page-text-padding-x};
|
||||
|
||||
@include media-print() {
|
||||
display: none;
|
||||
@@ -62,7 +77,7 @@
|
||||
color: var(--body-color);
|
||||
|
||||
.page-link:hover & {
|
||||
color: $link-color;
|
||||
color: var(--link-color);
|
||||
}
|
||||
|
||||
.page-item.disabled & {
|
||||
@@ -73,7 +88,7 @@
|
||||
.pagination-outline {
|
||||
--pagination-border-color: var(--border-color);
|
||||
--pagination-disabled-border-color: var(--border-color);
|
||||
--pagination-border-width: 1px;
|
||||
--pagination-border-width: var(--border-width);
|
||||
}
|
||||
|
||||
.pagination-circle {
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
@use 'sass:map';
|
||||
@use '../config' as *;
|
||||
|
||||
@mixin pattern-base($opacity: $pattern-opacity) {
|
||||
@@ -165,9 +166,9 @@
|
||||
}
|
||||
|
||||
// Color variants
|
||||
@each $color, $value in $theme-colors {
|
||||
@each $color in map.keys($theme-colors) {
|
||||
.bg-pattern-#{$color} {
|
||||
--pattern-color: #{$value};
|
||||
--pattern-color: var(--#{$color});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
font-style: normal;
|
||||
vertical-align: bottom;
|
||||
background: no-repeat center/100% 100%;
|
||||
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
|
||||
box-shadow: var(--shadow-border);
|
||||
@include config.border-radius(var(--border-radius));
|
||||
}
|
||||
|
||||
|
||||
@@ -42,9 +42,9 @@ $ribbon-tokens: defaults(
|
||||
min-height: var(--ribbon-min-size);
|
||||
padding: var(--ribbon-padding-y) var(--ribbon-padding-x);
|
||||
font-size: var(--ribbon-font-size);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
font-weight: var(--font-weight-medium);
|
||||
line-height: 1;
|
||||
color: $white;
|
||||
color: var(--primary-fg);
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
background: var(--primary);
|
||||
|
||||
@@ -34,12 +34,12 @@ $nav-segmented-tokens: defaults(
|
||||
list-style: none;
|
||||
background: var(--nav-bg);
|
||||
@include border-radius(calc(var(--nav-radius) + var(--nav-padding)));
|
||||
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
|
||||
box-shadow: inset 0 0 0 var(--border-width) var(--border-color-translucent);
|
||||
|
||||
.nav-link {
|
||||
display: inline-flex;
|
||||
flex-grow: 1;
|
||||
gap: calc(#{$nav-segmented-link-gap} + var(--nav-link-gap));
|
||||
gap: var(--nav-link-gap);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: calc(var(--nav-height) - 2 * var(--nav-padding));
|
||||
@@ -53,7 +53,7 @@ $nav-segmented-tokens: defaults(
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border: 1px solid transparent;
|
||||
border: var(--border-width) solid transparent;
|
||||
transition:
|
||||
background-color $transition-time,
|
||||
color $transition-time;
|
||||
|
||||
@@ -8,7 +8,7 @@ $signature-tokens: defaults(
|
||||
(
|
||||
--signature-padding: var(--spacer-1),
|
||||
--signature-border-radius: var(--border-radius),
|
||||
--signature-canvas-height: 12.5rem,
|
||||
--signature-canvas-height: $signature-canvas-height,
|
||||
),
|
||||
$signature-tokens
|
||||
);
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
|
||||
display: inline-flex;
|
||||
font-size: $h5-font-size;
|
||||
color: $gray-400;
|
||||
color: var(--tertiary);
|
||||
|
||||
.star:not(:first-child) {
|
||||
margin-inline-start: var(--stars-gap);
|
||||
|
||||
@@ -10,6 +10,7 @@ $steps-tokens: () !default;
|
||||
$steps-tokens: defaults(
|
||||
(
|
||||
--steps-color: $steps-color,
|
||||
--steps-fg: var(--primary-fg),
|
||||
--steps-inactive-color: $steps-inactive-color,
|
||||
--steps-dot-size: $steps-dot-size,
|
||||
--steps-border-width: $steps-border-width,
|
||||
@@ -39,9 +40,11 @@ $steps-tokens: defaults(
|
||||
@each $name, $color in $extra-colors {
|
||||
.steps-#{$name} {
|
||||
--steps-color: var(--#{$name});
|
||||
--steps-fg: var(--#{$name}-fg);
|
||||
|
||||
&-lt {
|
||||
--steps-color: var(--#{$name}-lt);
|
||||
--steps-fg: var(--#{$name});
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -97,7 +100,7 @@ $steps-tokens: defaults(
|
||||
justify-content: center;
|
||||
width: var(--steps-dot-size);
|
||||
height: var(--steps-dot-size);
|
||||
color: var(--white);
|
||||
color: var(--steps-fg);
|
||||
content: '';
|
||||
|
||||
/* rtl:ignore */
|
||||
@@ -106,7 +109,7 @@ $steps-tokens: defaults(
|
||||
}
|
||||
|
||||
&.active {
|
||||
font-weight: var(--font-weight-semibold);
|
||||
font-weight: var(--font-weight-medium);
|
||||
|
||||
&::after {
|
||||
background: var(--steps-inactive-color);
|
||||
@@ -153,10 +156,6 @@ $steps-tokens: defaults(
|
||||
--steps-vertical-connector-gap: #{$steps-vertical-connector-gap};
|
||||
flex-direction: column;
|
||||
|
||||
&.steps-counter {
|
||||
--steps-dot-offset: #{$steps-dot-offset-counter};
|
||||
}
|
||||
|
||||
.step-item {
|
||||
min-height: auto;
|
||||
padding-inline-start: calc(var(--steps-dot-size) + var(--steps-vertical-padding-start));
|
||||
|
||||
@@ -121,7 +121,7 @@
|
||||
.switch-icon-fade {
|
||||
.switch-icon-a,
|
||||
.switch-icon-b {
|
||||
@include transition(opacity 0.5s);
|
||||
@include transition(opacity $transition-time);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -129,7 +129,7 @@
|
||||
.switch-icon-scale {
|
||||
.switch-icon-a,
|
||||
.switch-icon-b {
|
||||
@include transition(opacity 0.5s, transform 0s 0.5s);
|
||||
@include transition(opacity $transition-time, transform 0s $transition-time);
|
||||
}
|
||||
|
||||
.switch-icon-b {
|
||||
@@ -139,7 +139,7 @@
|
||||
&.active {
|
||||
.switch-icon-a,
|
||||
.switch-icon-b {
|
||||
@include transition(opacity 0s, transform 0.5s);
|
||||
@include transition(opacity 0s, transform $transition-time);
|
||||
}
|
||||
|
||||
.switch-icon-b {
|
||||
@@ -156,7 +156,7 @@
|
||||
.switch-icon-b {
|
||||
backface-visibility: hidden;
|
||||
transform-style: preserve-3d;
|
||||
@include transition(opacity 0s 0.2s, transform 0.4s ease-in-out);
|
||||
@include transition(opacity 0s 0.15s, transform $transition-time ease-in-out);
|
||||
}
|
||||
|
||||
.switch-icon-a {
|
||||
|
||||
@@ -33,7 +33,7 @@ $tag-tokens: defaults(
|
||||
padding: 0 var(--tag-padding-x);
|
||||
background: var(--bg-surface);
|
||||
|
||||
border: $border-width solid var(--border-color);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
box-shadow: var(--shadow-input);
|
||||
@include border-radius(var(--border-radius));
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
@use 'sass:map';
|
||||
@use '../config' as *;
|
||||
|
||||
.toast {
|
||||
border: $alert-border-width var(--border-style) $alert-border-color;
|
||||
box-shadow: $alert-shadow;
|
||||
|
||||
.toast-header {
|
||||
user-select: none;
|
||||
@@ -20,8 +20,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
@each $state, $value in $theme-colors {
|
||||
@each $state in map.keys($theme-colors) {
|
||||
.toast-#{$state} {
|
||||
--toast-color: #{$value};
|
||||
--toast-color: var(--#{$state});
|
||||
}
|
||||
}
|
||||
@@ -87,7 +87,7 @@ blockquote {
|
||||
--blockquote-padding: #{$blockquote-padding};
|
||||
--blockquote-paragraph-margin-bottom: #{$blockquote-paragraph-margin-bottom};
|
||||
padding: var(--blockquote-padding) var(--blockquote-padding) var(--blockquote-padding);
|
||||
border-inline-start: 2px var(--border-style) var(--border-color);
|
||||
border-inline-start: $border-width-wide var(--border-style) var(--border-color);
|
||||
|
||||
p {
|
||||
margin-bottom: var(--blockquote-paragraph-margin-bottom);
|
||||
@@ -282,7 +282,6 @@ $text-variants: (
|
||||
text-decoration-thickness: 1px;
|
||||
text-decoration-color: $color;
|
||||
background: color-transparent($color, 0.04);
|
||||
background: color-transparent($color, 4%);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -308,7 +307,7 @@ $text-variants: (
|
||||
margin-bottom: var(--steps-margin-bottom);
|
||||
overflow: visible;
|
||||
counter-reset: step;
|
||||
border-inline-start: 1px solid var(--border-color);
|
||||
border-inline-start: var(--border-width) solid var(--border-color);
|
||||
|
||||
h3 {
|
||||
counter-increment: step;
|
||||
@@ -323,15 +322,15 @@ $text-variants: (
|
||||
width: var(--steps-item-size);
|
||||
height: var(--steps-item-size);
|
||||
margin-inline-start: calc(-1 * var(--steps-padding) - var(--steps-item-size) / 2);
|
||||
margin-top: 1px;
|
||||
margin-top: var(--border-width);
|
||||
font-size: var(--font-size-h4);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
line-height: calc(var(--steps-item-size) - 2px);
|
||||
line-height: calc(var(--steps-item-size) - 2 * var(--border-width));
|
||||
color: var(--body-color);
|
||||
text-align: center;
|
||||
content: counter(step);
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border-color);
|
||||
border: var(--border-width) solid var(--border-color);
|
||||
@include border-radius(var(--border-radius));
|
||||
}
|
||||
}
|
||||
@@ -362,7 +361,7 @@ $callout-tokens: defaults(
|
||||
padding: var(--callout-padding-y) var(--callout-padding-x);
|
||||
margin-bottom: var(--callout-margin-bottom);
|
||||
background: var(--primary-lt);
|
||||
border: 1px solid var(--primary-200);
|
||||
border: var(--border-width) solid var(--primary-200);
|
||||
@include border-radius(var(--border-radius));
|
||||
|
||||
> :last-child {
|
||||
|
||||
@@ -37,7 +37,7 @@ Form check
|
||||
&.required {
|
||||
&::after {
|
||||
margin-inline-start: var(--form-check-label-required-gap);
|
||||
color: $red;
|
||||
color: var(--danger);
|
||||
content: '*';
|
||||
}
|
||||
}
|
||||
|
||||
@@ -23,10 +23,10 @@ Color Input
|
||||
display: block;
|
||||
width: var(--form-colorinput-size);
|
||||
height: var(--form-colorinput-size);
|
||||
color: $white;
|
||||
color: var(--white);
|
||||
border: var(--border-width) var(--border-style) $input-border-color-translucent;
|
||||
@include border-radius(var(--border-radius));
|
||||
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
||||
box-shadow: var(--shadow-input);
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
|
||||
@@ -42,7 +42,7 @@
|
||||
display: block;
|
||||
width: $form-check-input-width;
|
||||
height: $form-check-input-width;
|
||||
color: $white;
|
||||
color: var(--white);
|
||||
pointer-events: none;
|
||||
content: '';
|
||||
user-select: none;
|
||||
|
||||
@@ -57,6 +57,7 @@ Select group
|
||||
|
||||
&:hover {
|
||||
color: var(--body-color);
|
||||
border-color: var(--border-active-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -125,7 +125,7 @@ Add `list-group-hoverable` to the container to highlight the row under the point
|
||||
<div class="row align-items-center">
|
||||
<div class="col text-truncate">Change deprecated html tags</div>
|
||||
<div class="col-auto">
|
||||
<a href="#" class="list-group-item-actions" aria-label="Add to favorites"><Icon name="star" color="muted" /></a>
|
||||
<a href="#" class="list-group-item-actions" aria-label="Add to favorites"><Icon name="star" color="secondary" /></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -243,7 +243,7 @@ This pattern joins several variants: a flush list inside a card, hoverable rows,
|
||||
<div class="d-block text-secondary text-truncate mt-n1">The last deploy did not finish</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<a href="#" class="list-group-item-actions" aria-label="Add to favorites"><Icon name="star" color="muted" /></a>
|
||||
<a href="#" class="list-group-item-actions" aria-label="Add to favorites"><Icon name="star" color="secondary" /></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -13,11 +13,12 @@ classnames:
|
||||
desc: Rising value, paired with an arrow-up icon
|
||||
- class: text-red
|
||||
desc: Falling value, paired with an arrow-down icon
|
||||
- class: text-muted
|
||||
- class: text-secondary
|
||||
desc: No change, paired with a minus icon
|
||||
---
|
||||
import Example from '@components/Example.astro';
|
||||
import Icon from '@ui/Icon.astro';
|
||||
|
||||
import Example from '@components/Example.astro'
|
||||
import Icon from '@ui/Icon.astro'
|
||||
|
||||
## Overview
|
||||
|
||||
@@ -26,7 +27,10 @@ A trend indicator is a small inline element. It shows a number and an arrow next
|
||||
There is no dedicated class for it. Build it from utilities: `d-inline-flex` and `align-items-center` to keep the number and the icon in one line, `lh-1` to keep the line short, and a text color that matches the direction.
|
||||
|
||||
<Example centered>
|
||||
<span class="text-green d-inline-flex align-items-center lh-1"> 25% <Icon name="arrow-up" size="sm" class="ms-0" /> </span>
|
||||
<span class="text-green d-inline-flex align-items-center lh-1">
|
||||
{' '}
|
||||
25% <Icon name="arrow-up" size="sm" class="ms-0" />{' '}
|
||||
</span>
|
||||
</Example>
|
||||
|
||||
## Variants
|
||||
@@ -35,16 +39,25 @@ There is no dedicated class for it. Build it from utilities: `d-inline-flex` and
|
||||
|
||||
Use three states to describe the change. Pick the color and the icon together, so they always tell the same story.
|
||||
|
||||
| Change | Color | Icon |
|
||||
| --- | --- | --- |
|
||||
| Up | `text-green` | `arrow-up` |
|
||||
| No change | `text-secondary` | `minus` |
|
||||
| Down | `text-red` | `arrow-down` |
|
||||
| Change | Color | Icon |
|
||||
| --------- | ---------------- | ------------ |
|
||||
| Up | `text-green` | `arrow-up` |
|
||||
| No change | `text-secondary` | `minus` |
|
||||
| Down | `text-red` | `arrow-down` |
|
||||
|
||||
<Example centered>
|
||||
<span class="text-green d-inline-flex align-items-center lh-1"> 25% <Icon name="arrow-up" size="sm" class="ms-0" /> </span>
|
||||
<span class="text-secondary d-inline-flex align-items-center lh-1"> 0% <Icon name="minus" size="sm" class="ms-0" /> </span>
|
||||
<span class="text-red d-inline-flex align-items-center lh-1"> -12% <Icon name="arrow-down" size="sm" class="ms-0" /> </span>
|
||||
<span class="text-green d-inline-flex align-items-center lh-1">
|
||||
{' '}
|
||||
25% <Icon name="arrow-up" size="sm" class="ms-0" />{' '}
|
||||
</span>
|
||||
<span class="text-secondary d-inline-flex align-items-center lh-1">
|
||||
{' '}
|
||||
0% <Icon name="minus" size="sm" class="ms-0" />{' '}
|
||||
</span>
|
||||
<span class="text-red d-inline-flex align-items-center lh-1">
|
||||
{' '}
|
||||
-12% <Icon name="arrow-down" size="sm" class="ms-0" />{' '}
|
||||
</span>
|
||||
</Example>
|
||||
|
||||
### Unit
|
||||
@@ -52,9 +65,18 @@ Use three states to describe the change. Pick the color and the icon together, s
|
||||
The unit is only text after the number. Use a percent sign, a currency, or no unit at all.
|
||||
|
||||
<Example centered>
|
||||
<span class="text-green d-inline-flex align-items-center lh-1"> 8% <Icon name="arrow-up" size="sm" class="ms-0" /> </span>
|
||||
<span class="text-green d-inline-flex align-items-center lh-1"> 4.2K <Icon name="arrow-up" size="sm" class="ms-0" /> </span>
|
||||
<span class="text-red d-inline-flex align-items-center lh-1"> -3 <Icon name="arrow-down" size="sm" class="ms-0" /> </span>
|
||||
<span class="text-green d-inline-flex align-items-center lh-1">
|
||||
{' '}
|
||||
8% <Icon name="arrow-up" size="sm" class="ms-0" />{' '}
|
||||
</span>
|
||||
<span class="text-green d-inline-flex align-items-center lh-1">
|
||||
{' '}
|
||||
4.2K <Icon name="arrow-up" size="sm" class="ms-0" />{' '}
|
||||
</span>
|
||||
<span class="text-red d-inline-flex align-items-center lh-1">
|
||||
{' '}
|
||||
-3 <Icon name="arrow-down" size="sm" class="ms-0" />{' '}
|
||||
</span>
|
||||
</Example>
|
||||
|
||||
### Size
|
||||
@@ -62,9 +84,18 @@ The unit is only text after the number. Use a percent sign, a currency, or no un
|
||||
The indicator takes the font size of its parent. Put it in a heading or use a text size utility to make it bigger or smaller.
|
||||
|
||||
<Example centered vertical>
|
||||
<span class="text-green d-inline-flex align-items-center lh-1 small"> 15% <Icon name="arrow-up" size="sm" class="ms-0" /> </span>
|
||||
<span class="text-green d-inline-flex align-items-center lh-1"> 15% <Icon name="arrow-up" size="sm" class="ms-0" /> </span>
|
||||
<span class="text-green d-inline-flex align-items-center lh-1 h2 m-0"> 15% <Icon name="arrow-up" class="ms-0" /> </span>
|
||||
<span class="text-green d-inline-flex align-items-center lh-1 small">
|
||||
{' '}
|
||||
15% <Icon name="arrow-up" size="sm" class="ms-0" />{' '}
|
||||
</span>
|
||||
<span class="text-green d-inline-flex align-items-center lh-1">
|
||||
{' '}
|
||||
15% <Icon name="arrow-up" size="sm" class="ms-0" />{' '}
|
||||
</span>
|
||||
<span class="text-green d-inline-flex align-items-center lh-1 h2 m-0">
|
||||
{' '}
|
||||
15% <Icon name="arrow-up" class="ms-0" />{' '}
|
||||
</span>
|
||||
</Example>
|
||||
|
||||
## Examples
|
||||
@@ -74,13 +105,16 @@ The indicator takes the font size of its parent. Put it in a heading or use a te
|
||||
Place the indicator after the number. Use `align-items-baseline` on the wrapper, so the number and the indicator sit on the same line.
|
||||
|
||||
<Example>
|
||||
<div>
|
||||
<div class="text-secondary">Today's sales</div>
|
||||
<div class="d-flex align-items-baseline">
|
||||
<div class="h3 me-2 mb-0">6,782</div>
|
||||
<span class="text-green d-inline-flex align-items-center lh-1"> 7% <Icon name="arrow-up" size="sm" class="ms-0" /> </span>
|
||||
<div>
|
||||
<div class="text-secondary">Today's sales</div>
|
||||
<div class="d-flex align-items-baseline">
|
||||
<div class="h3 me-2 mb-0">6,782</div>
|
||||
<span class="text-green d-inline-flex align-items-center lh-1">
|
||||
{' '}
|
||||
7% <Icon name="arrow-up" size="sm" class="ms-0" />{' '}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Example>
|
||||
|
||||
### In a stats card
|
||||
@@ -88,19 +122,22 @@ Place the indicator after the number. Use `align-items-baseline` on the wrapper,
|
||||
This is the most common place for the indicator. The value stays on the left and the change on the right.
|
||||
|
||||
<Example column>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row align-items-center">
|
||||
<div class="col">
|
||||
<div class="text-secondary">New clients</div>
|
||||
<div class="h3 m-0">1,352</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<span class="text-red d-inline-flex align-items-center lh-1"> -4% <Icon name="arrow-down" size="sm" class="ms-0" /> </span>
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<div class="row align-items-center">
|
||||
<div class="col">
|
||||
<div class="text-secondary">New clients</div>
|
||||
<div class="h3 m-0">1,352</div>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<span class="text-red d-inline-flex align-items-center lh-1">
|
||||
{' '}
|
||||
-4% <Icon name="arrow-down" size="sm" class="ms-0" />{' '}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Example>
|
||||
|
||||
### In a table
|
||||
@@ -108,38 +145,47 @@ This is the most common place for the indicator. The value stays on the left and
|
||||
Use it in a table cell to compare rows quickly.
|
||||
|
||||
<Example>
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Product</th>
|
||||
<th>Sales</th>
|
||||
<th>Change</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Basic plan</td>
|
||||
<td>4,120</td>
|
||||
<td>
|
||||
<span class="text-green d-inline-flex align-items-center lh-1"> 12% <Icon name="arrow-up" size="sm" class="ms-0" /> </span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Pro plan</td>
|
||||
<td>2,043</td>
|
||||
<td>
|
||||
<span class="text-red d-inline-flex align-items-center lh-1"> -7% <Icon name="arrow-down" size="sm" class="ms-0" /> </span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Team plan</td>
|
||||
<td>986</td>
|
||||
<td>
|
||||
<span class="text-secondary d-inline-flex align-items-center lh-1"> 0% <Icon name="minus" size="sm" class="ms-0" /> </span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Product</th>
|
||||
<th>Sales</th>
|
||||
<th>Change</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Basic plan</td>
|
||||
<td>4,120</td>
|
||||
<td>
|
||||
<span class="text-green d-inline-flex align-items-center lh-1">
|
||||
{' '}
|
||||
12% <Icon name="arrow-up" size="sm" class="ms-0" />{' '}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Pro plan</td>
|
||||
<td>2,043</td>
|
||||
<td>
|
||||
<span class="text-red d-inline-flex align-items-center lh-1">
|
||||
{' '}
|
||||
-7% <Icon name="arrow-down" size="sm" class="ms-0" />{' '}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Team plan</td>
|
||||
<td>986</td>
|
||||
<td>
|
||||
<span class="text-secondary d-inline-flex align-items-center lh-1">
|
||||
{' '}
|
||||
0% <Icon name="minus" size="sm" class="ms-0" />{' '}
|
||||
</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</Example>
|
||||
|
||||
## Accessibility
|
||||
|
||||
@@ -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>.
|
||||
|
||||
@@ -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" />
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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) => (
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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} />
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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}
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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) => (
|
||||
|
||||
@@ -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">
|
||||
{
|
||||
|
||||
@@ -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 <a class="text-reset" target="_blank" href={site.previewUrl}>{site.previewUrl}</a><br />Redirect count 0<br />Name lookup time 3.4e-05<br />Connect time 0.000521<br />Pre-transfer time 0.0<br />Start-transfer time 0.0<br />App connect time 0.0<br />Redirect time 0.0<br />Total time 28.000601<br />Response code 0<br />Return keyword 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>
|
||||
|
||||
@@ -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 -->
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
@@ -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">
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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" />
|
||||
|
||||
@@ -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) => (
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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>)}
|
||||
|
||||
@@ -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">
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
+26
-31
@@ -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);
|
||||
}
|
||||
@@ -11,7 +11,7 @@ const person = requireIndex(people, 0)
|
||||
<form class="card card-md" action="./" method="get" novalidate>
|
||||
<div class="card-body text-center">
|
||||
<div class="mb-4">
|
||||
<CardTitle as="h1">Account Locked</CardTitle>
|
||||
<CardTitle as="h1">Account locked</CardTitle>
|
||||
<p class="text-secondary">Please enter your password to unlock your account</p>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -8,7 +8,7 @@ import OtpInput from '@ui/OtpInput.astro'
|
||||
|
||||
<form class="card card-md" action="#" method="get" autocomplete="off" novalidate>
|
||||
<div class="card-body">
|
||||
<CardTitle class="text-center mb-4">Authenticate Your Account</CardTitle>
|
||||
<CardTitle 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>.
|
||||
|
||||
@@ -9,7 +9,7 @@ const { height = 200, class: className } = Astro.props
|
||||
---
|
||||
|
||||
<div class={`card-body${className ? ` ${className}` : ''}`}>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-100 border rounded" preserveAspectRatio="none" width={width} height={height} viewBox={`0 0 ${width} ${height}`} fill="transparent" stroke="var(--tblr-border-color, #b8cef1)">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="w-100 border rounded" preserveAspectRatio="none" width={width} height={height} viewBox={`0 0 ${width} ${height}`} fill="transparent" stroke="var(--tblr-border-color)">
|
||||
<line x1="0" y1="0" x2={width} y2={height}></line>
|
||||
<line x1="0" y1={height} x2={width} y2="0"></line>
|
||||
</svg>
|
||||
|
||||
@@ -6,7 +6,7 @@ import Trending from '@ui/Trending.astro'
|
||||
interface Props {
|
||||
color?: string
|
||||
icon?: string
|
||||
/** light avatar background (bg-{color}-lt) instead of bg-{color} text-white */
|
||||
/** light avatar background (bg-{color}-lt) instead of bg-{color} text-{color}-fg */
|
||||
lt?: boolean
|
||||
title?: string
|
||||
description?: string
|
||||
@@ -19,7 +19,7 @@ interface Props {
|
||||
|
||||
const { color, icon, lt, title = '1700', description = 'Users', changeValue, changeValueUnit, class: className } = Astro.props
|
||||
|
||||
const avatarClass = [color ? `bg-${color}${lt ? '-lt' : ' text-white'}` : '', 'avatar', 'avatar-square']
|
||||
const avatarClass = [color ? (lt ? `bg-${color}-lt` : `bg-${color} text-${color}-fg`) : '', 'avatar', 'avatar-square']
|
||||
---
|
||||
|
||||
<div class:list={['card card-sm', className]}>
|
||||
|
||||
@@ -9,10 +9,10 @@ import CardTitle from '@ui/CardTitle.astro'
|
||||
<div class="mb-3">
|
||||
<PeopleAvatarList stacked={true} />
|
||||
</div>
|
||||
<CardTitle>No Team Members</CardTitle>
|
||||
<CardTitle>No team members</CardTitle>
|
||||
<p class="text-secondary">Invite your team to<br />collaborate on this project.</p>
|
||||
<div class="mt-4">
|
||||
<Button text="Invite Members" color="primary" icon="plus" />
|
||||
<Button text="Invite members" color="primary" icon="plus" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -32,8 +32,8 @@ const heartClass = (index > 2 && index < 9) || index === 10 ? 'icon-filled text-
|
||||
<div class="card card-sm">
|
||||
<a href="#" class="d-block"><img src={staticPath(`photos/${photo.file}`)} class="card-img-top" alt={photo.title} /></a>
|
||||
<div class="card-body">
|
||||
<div class="d-flex align-items-center">
|
||||
<Avatar person={person} class="me-3 rounded" />
|
||||
<div class="d-flex align-items-center gap-3">
|
||||
<Avatar person={person} class="rounded" />
|
||||
<div>
|
||||
<div>{person.full_name}</div>
|
||||
<div class="text-secondary">{timeagoLabel(index, 10)}</div>
|
||||
|
||||
@@ -29,63 +29,65 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<table class="table table-transparent table-responsive">
|
||||
<thead>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-transparent">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="text-center w-1"></th>
|
||||
<th>Product</th>
|
||||
<th class="text-center w-1">Qnt</th>
|
||||
<th class="text-end w-1">Unit</th>
|
||||
<th class="text-end w-1">Amount</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tr>
|
||||
<th class="text-center" style="width: 1%"></th>
|
||||
<th>Product</th>
|
||||
<th class="text-center" style="width: 1%">Qnt</th>
|
||||
<th class="text-end" style="width: 1%">Unit</th>
|
||||
<th class="text-end" style="width: 1%">Amount</th>
|
||||
<td class="text-center">1</td>
|
||||
<td>
|
||||
<p class="strong mb-1">Logo creation</p>
|
||||
<div class="text-secondary">Logo and business cards design</div>
|
||||
</td>
|
||||
<td class="text-center"> 1 </td>
|
||||
<td class="text-end">$1.800,00</td>
|
||||
<td class="text-end">$1.800,00</td>
|
||||
</tr>
|
||||
</thead>
|
||||
<tr>
|
||||
<td class="text-center">1</td>
|
||||
<td>
|
||||
<p class="strong mb-1">Logo Creation</p>
|
||||
<div class="text-secondary">Logo and business cards design</div>
|
||||
</td>
|
||||
<td class="text-center"> 1 </td>
|
||||
<td class="text-end">$1.800,00</td>
|
||||
<td class="text-end">$1.800,00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-center">2</td>
|
||||
<td>
|
||||
<p class="strong mb-1">Online Store Design & Development</p>
|
||||
<div class="text-secondary">Design/Development for all popular modern browsers</div>
|
||||
</td>
|
||||
<td class="text-center"> 1 </td>
|
||||
<td class="text-end">$20.000,00</td>
|
||||
<td class="text-end">$20.000,00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-center">3</td>
|
||||
<td>
|
||||
<p class="strong mb-1">App Design</p>
|
||||
<div class="text-secondary">Promotional mobile application</div>
|
||||
</td>
|
||||
<td class="text-center"> 1 </td>
|
||||
<td class="text-end">$3.200,00</td>
|
||||
<td class="text-end">$3.200,00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4" class="strong text-end">Subtotal</td>
|
||||
<td class="text-end">$25.000,00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4" class="strong text-end">Vat Rate</td>
|
||||
<td class="text-end">20%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4" class="strong text-end">Vat Due</td>
|
||||
<td class="text-end">$5.000,00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4" class="fw-semibold text-uppercase text-end">Total Due</td>
|
||||
<td class="fw-semibold text-end">$30.000,00</td>
|
||||
</tr>
|
||||
</table>
|
||||
<tr>
|
||||
<td class="text-center">2</td>
|
||||
<td>
|
||||
<p class="strong mb-1">Online store design & development</p>
|
||||
<div class="text-secondary">Design/Development for all popular modern browsers</div>
|
||||
</td>
|
||||
<td class="text-center"> 1 </td>
|
||||
<td class="text-end">$20.000,00</td>
|
||||
<td class="text-end">$20.000,00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-center">3</td>
|
||||
<td>
|
||||
<p class="strong mb-1">App design</p>
|
||||
<div class="text-secondary">Promotional mobile application</div>
|
||||
</td>
|
||||
<td class="text-center"> 1 </td>
|
||||
<td class="text-end">$3.200,00</td>
|
||||
<td class="text-end">$3.200,00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4" class="strong text-end">Subtotal</td>
|
||||
<td class="text-end">$25.000,00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4" class="strong text-end">VAT rate</td>
|
||||
<td class="text-end">20%</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4" class="strong text-end">VAT due</td>
|
||||
<td class="text-end">$5.000,00</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td colspan="4" class="fw-semibold text-end">Total due</td>
|
||||
<td class="fw-semibold text-end">$30.000,00</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<p class="text-secondary text-center mt-5">Thank you very much for doing business with us. We look forward to working with you again!</p>
|
||||
</div>
|
||||
|
||||
@@ -39,7 +39,7 @@ const countryNames = Object.fromEntries((countries as { code: string; name: stri
|
||||
<tr>
|
||||
<th class="w-1"><input class="form-check-input m-0 align-middle" type="checkbox" aria-label="Select all invoices" /></th>
|
||||
<th class="w-1">No. <Icon name="chevron-up" inline class="icon-sm" /></th>
|
||||
<th>Invoice Subject</th>
|
||||
<th>Invoice subject</th>
|
||||
<th>Client</th>
|
||||
<th>VAT No.</th>
|
||||
<th>Created</th>
|
||||
|
||||
@@ -8,7 +8,7 @@ import { formatNumber } from '@shared/lib/string-format'
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<CardTitle>Most Visited Pages</CardTitle>
|
||||
<CardTitle>Most visited pages</CardTitle>
|
||||
</div>
|
||||
<div class="card-table table-responsive">
|
||||
<table class="table table-vcenter">
|
||||
|
||||
@@ -1,19 +1,20 @@
|
||||
---
|
||||
// Feature names are a fixed list; the `features` string is split per-character into a 1/0 availability mask.
|
||||
import Icon from '@ui/Icon.astro'
|
||||
import Subheader from '@ui/Subheader.astro'
|
||||
|
||||
interface Props {
|
||||
price?: string
|
||||
users?: string | number
|
||||
category?: string
|
||||
features?: string
|
||||
/** ribbon + button color, e.g. "green" */
|
||||
/** ribbon color of the featured plan, e.g. "green"; the button is always primary */
|
||||
featuredColor?: string
|
||||
}
|
||||
|
||||
const { price = '79', users = 10, category = 'Enterprise', features = '1000', featuredColor } = Astro.props
|
||||
|
||||
const featureNames = ['Sharing Tools', 'Design Tools', 'Private Messages', 'Twitter API']
|
||||
const featureNames = ['Sharing tools', 'Design tools', 'Private messages', 'Twitter API']
|
||||
const availableFeatures = features.split('')
|
||||
---
|
||||
|
||||
@@ -27,9 +28,9 @@ const availableFeatures = features.split('')
|
||||
}
|
||||
|
||||
<div class="card-body text-center">
|
||||
<div class="text-uppercase text-secondary fw-medium">{category}</div>
|
||||
<Subheader>{category}</Subheader>
|
||||
|
||||
<div class="display-5 fw-bold my-3">${price}</div>
|
||||
<div class="display-5 my-3">${price}</div>
|
||||
|
||||
<ul class="list-unstyled lh-lg">
|
||||
<li><strong>{users}</strong> Users</li>
|
||||
@@ -44,7 +45,7 @@ const availableFeatures = features.split('')
|
||||
</ul>
|
||||
|
||||
<div class="text-center mt-4">
|
||||
<a href="#" class={`btn${featuredColor ? ` btn-${featuredColor}` : ''} w-100`}>Choose plan</a>
|
||||
<a href="#" class={`btn${featuredColor ? ' btn-primary' : ''} w-100`}>Choose plan</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -9,29 +9,29 @@ import Button from '@ui/Button.astro'
|
||||
<div class="subheader text-pink">Professional</div>
|
||||
<div class="d-flex align-items-baseline mt-5">
|
||||
<div class="display-5">$199</div>
|
||||
<div class="fs-1 text-secondary">/ month</div>
|
||||
<div class="text-secondary">/ month</div>
|
||||
</div>
|
||||
<ul class="list-unstyled mt-6 space-y space-y-2">
|
||||
<li class="d-flex gap-2">
|
||||
<div><Icon name="check" color="success" /></div>
|
||||
<div><strong>Unlimited</strong> Target Audience</div>
|
||||
<div><strong>Unlimited</strong> target audience</div>
|
||||
</li>
|
||||
<li class="d-flex gap-2">
|
||||
<div><Icon name="check" color="success" /></div>
|
||||
<div><strong>1</strong> User Account</div>
|
||||
<div><strong>1</strong> user account</div>
|
||||
</li>
|
||||
<li class="d-flex gap-2">
|
||||
<div><Icon name="check" color="success" /></div>
|
||||
<div><strong>100+</strong> Video Tuts</div>
|
||||
<div><strong>100+</strong> video tutorials</div>
|
||||
</li>
|
||||
<li class="d-flex gap-2">
|
||||
<div><Icon name="x" color="secondary" /></div>
|
||||
<div class="text-secondary">Public Displays</div>
|
||||
<div class="text-secondary">Public displays</div>
|
||||
</li>
|
||||
</ul>
|
||||
<p class="mt-4 text-muted">This plan is perfect for small businesses and startups. It includes all the features you need to get started.</p>
|
||||
<p class="mt-4 text-secondary">This plan is perfect for small businesses and startups. It includes all the features you need to get started.</p>
|
||||
<div class="mt-6">
|
||||
<Button text="Purchase Now" color="pink" block />
|
||||
<Button text="Purchase now" color="primary" block />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -20,7 +20,7 @@ const color = 'yellow'
|
||||
<div class={`card card-gradient card-gradient-${color}`}>
|
||||
<div class="card-body text-center py-6">
|
||||
<div class="position-absolute top-0 end-0 p-1">
|
||||
<div class="btn btn-action"><Icon name="star" color="yellow" filled /></div>
|
||||
<div class="btn btn-action"><Icon name="star" filled /></div>
|
||||
</div>
|
||||
<div>
|
||||
<Avatar size="2xl" person={person} shape="rounded" />
|
||||
|
||||
@@ -7,14 +7,14 @@ import crmDashboard from '@data/crm-dashboard.json'
|
||||
const activity = crmDashboard.recent_activity
|
||||
---
|
||||
|
||||
<div class="card" style="height: 28rem">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<CardTitle>{activity.title}</CardTitle>
|
||||
<CardActions>
|
||||
<a href="#" class="small fw-medium text-primary">{activity.view_all_text}</a>
|
||||
</CardActions>
|
||||
</div>
|
||||
<div class="card-body card-body-scrollable">
|
||||
<div class="card-body">
|
||||
<div class="divide-y">
|
||||
{
|
||||
activity.items.map((item) => (
|
||||
|
||||
@@ -26,7 +26,7 @@ interface Props {
|
||||
const { icon, color, lt, title, description, class: className, id, personId, chartType = 'line', chartPosition = 'right', chartData, smallIcon, descriptionValue, descriptionValueColor } = Astro.props
|
||||
|
||||
const chartColor = color ?? 'primary'
|
||||
const avatarClass = [color ? `bg-${color}${lt ? '-lt' : ' text-white'}` : '', 'avatar', 'avatar-square']
|
||||
const avatarClass = [color ? (lt ? `bg-${color}-lt` : `bg-${color} text-${color}-fg`) : '', 'avatar', 'avatar-square']
|
||||
---
|
||||
|
||||
<div class:list={['card card-sm', className]}>
|
||||
|
||||
@@ -10,7 +10,7 @@ const services = 'Instagram:3550,Twitter:1798,Facebook:1245,TikTok:986,Pinterest
|
||||
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<CardTitle>Social Media Traffic</CardTitle>
|
||||
<CardTitle>Social media traffic</CardTitle>
|
||||
</div>
|
||||
<table class="table card-table table-vcenter">
|
||||
<thead>
|
||||
|
||||
@@ -9,7 +9,7 @@ interface Props {
|
||||
const { rtl = false } = Astro.props
|
||||
---
|
||||
|
||||
<a href={site.githubSponsorsUrl} class="card border-primary" target="_blank" rel="noopener" aria-label="Sponsor Tabler!" style="background: color-mix(in srgb, var(--tblr-primary) 4%, var(--tblr-bg-surface))">
|
||||
<a href={site.githubSponsorsUrl} class="card border-primary bg-primary-lt" target="_blank" rel="noopener" aria-label="Sponsor Tabler!">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 480 373" class="position-absolute top-0 end-0 bottom-0 start-0 w-100 h-100">
|
||||
<path
|
||||
fill="var(--tblr-primary)"
|
||||
@@ -202,7 +202,7 @@ const { rtl = false } = Astro.props
|
||||
<div class="card-body d-flex flex-column justify-content-center p-5">
|
||||
<div class="row justify-content-end" dir="ltr">
|
||||
<div class="col-7 text-primary">
|
||||
<div class="h1 text-uppercase">Help Tabler Grow and Thrive</div>
|
||||
<div class="h1">Help Tabler grow and thrive</div>
|
||||
<p class="h3 fw-normal">Sponsor Tabler and help us make a difference!</p>
|
||||
<div class="mt-4">
|
||||
<span class="btn w-100 pe-none" dir="ltr">
|
||||
|
||||
Loaded 100 of 158 files, more files were not shown because too many files have changed in this diff.
Show more
Reference in new issue
Block a user