1
0
mirror of https://github.com/tabler/tabler.git synced 2025-12-23 10:24:24 +04:00

Compare commits

..

6 Commits

Author SHA1 Message Date
codecalm
fa8fff6ed5 Enhance build scripts, update SCSS variables for typography, and improve documentation navigation 2025-11-25 00:29:28 +01:00
codecalm
ae2f15183c Init Geist font 2025-11-24 23:43:49 +01:00
codecalm
c3fa9524ea Remove old vercel.json configuration and migrate redirects to docs/vercel.json 2025-11-24 23:14:11 +01:00
codecalm
49e766da8b update package-lock.json 2025-11-24 23:12:28 +01:00
codecalm
5c8a98788c Update icon counts, enhance menu navigation, and add new filters 2025-11-24 23:11:04 +01:00
codecalm
2a474ef935 docs: docs improvements 2025-11-24 22:42:21 +01:00
130 changed files with 1575 additions and 2422 deletions

View File

@@ -1,5 +0,0 @@
---
"@tabler/core": patch
---
Refactored Bootstrap exports to use single source of truth in `bootstrap.js` and removed duplicate exports from `tabler.js` for better maintainability.

View File

@@ -1,6 +0,0 @@
---
"@tabler/core": minor
---
Added `.card-gradient` component with gradient variants, direction modifiers, and animated backgrounds.

View File

@@ -1,6 +0,0 @@
---
"@tabler/preview": minor
---
Added new `card-gradients.html` page showcasing various gradient card styles and components.

View File

@@ -1,5 +0,0 @@
---
"@tabler/core": patch
---
Updated `$border-color-translucent-dark` from `rgba(72, 110, 149, 0.14)` to `rgba(128, 150, 172, 0.2)` to improve visibility of form checkboxes and other form elements in dark mode.

View File

@@ -1,5 +0,0 @@
---
"@tabler/core": patch
---
Fixed status color classes to use CSS variables instead of hardcoded values and include social colors (bitbucket, facebook, etc.) in status class generation.

View File

@@ -1,5 +0,0 @@
---
"@tabler/core": patch
---
Fixed white space on left side when scrollbar is present by replacing `margin-inline-start: calc(100vw - 100%)` with `scrollbar-gutter: stable` on `html` element, with `overflow-y: scroll` fallback for unsupported browsers.

View File

@@ -1,7 +0,0 @@
---
"@tabler/core": minor
"@tabler/docs": patch
---
Added Geist font family integration.

View File

@@ -1,6 +0,0 @@
---
"@tabler/core": patch
---
Added `border-top-left-radius` and `border-top-right-radius` to first and last child elements in `.card-table` for proper corner rounding.

View File

@@ -1,6 +0,0 @@
---
"@tabler/core": patch
---
Removed redundant nullish coalescing operator from `html` option in popover and tooltip initialization.

View File

@@ -1,7 +0,0 @@
---
"@tabler/core": patch
"@tabler/preview": patch
---
Added Driver.js library integration and Tour demo page for interactive product tours and onboarding guides.

View File

@@ -1,7 +0,0 @@
---
"@tabler/core": minor
"@tabler/preview": minor
---
Upgraded `apexcharts` from `3.54.1` to `5.3.6` and added CSS variables (`--chart-{id}-color-{index}`) for dynamic chart colors to fix compatibility with the new version.

View File

@@ -26,7 +26,7 @@ jobs:
if: false if: false
steps: steps:
- name: Clone repository - name: Clone repository
uses: actions/checkout@v6 uses: actions/checkout@v5
- name: Cache turbo build setup - name: Cache turbo build setup
uses: actions/cache@v4 uses: actions/cache@v4

View File

@@ -17,7 +17,7 @@ jobs:
steps: steps:
- name: Clone repository - name: Clone repository
uses: actions/checkout@v6 uses: actions/checkout@v5
- name: Cache turbo build setup - name: Cache turbo build setup
uses: actions/cache@v4 uses: actions/cache@v4

View File

@@ -16,7 +16,7 @@ jobs:
runs-on: ubuntu-latest runs-on: ubuntu-latest
steps: steps:
- name: Checkout Repo - name: Checkout Repo
uses: actions/checkout@v6 uses: actions/checkout@v5
with: with:
persist-credentials: false persist-credentials: false

View File

@@ -12,7 +12,7 @@ jobs:
name: Verify lock file integrity name: Verify lock file integrity
steps: steps:
- name: Clone Tabler - name: Clone Tabler
uses: actions/checkout@v6 uses: actions/checkout@v5
- name: Prevent lock file change - name: Prevent lock file change
uses: xalvarez/prevent-file-change-action@v3 uses: xalvarez/prevent-file-change-action@v3
with: with:

View File

@@ -21,7 +21,7 @@ jobs:
pull-requests: write # to create pull request pull-requests: write # to create pull request
steps: steps:
- name: Checkout Repo - name: Checkout Repo
uses: actions/checkout@v6 uses: actions/checkout@v5
- name: Install PNPM - name: Install PNPM
uses: pnpm/action-setup@v4 uses: pnpm/action-setup@v4

View File

@@ -14,7 +14,7 @@ jobs:
runs-on: ubuntu-latest runs-on: ubuntu-latest
steps: steps:
- name: Clone repository - name: Clone repository
uses: actions/checkout@v6 uses: actions/checkout@v5
- name: Cache turbo build setup - name: Cache turbo build setup
uses: actions/cache@v4 uses: actions/cache@v4

View File

@@ -1,7 +1,3 @@
export * as Popper from '@popperjs/core' export * as Popper from '@popperjs/core'
// Export all Bootstrap components directly for consistent usage export { Dropdown, Tooltip, Popover, Tab, Toast } from 'bootstrap'
export { Alert, Button, Carousel, Collapse, Dropdown, Modal, Offcanvas, Popover, ScrollSpy, Tab, Toast, Tooltip } from 'bootstrap'
// Re-export everything as namespace for backward compatibility
export * as bootstrap from 'bootstrap'

View File

@@ -7,7 +7,7 @@ let popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggl
popoverTriggerList.map(function (popoverTriggerEl) { popoverTriggerList.map(function (popoverTriggerEl) {
let options = { let options = {
delay: { show: 50, hide: 50 }, delay: { show: 50, hide: 50 },
html: popoverTriggerEl.getAttribute('data-bs-html') === 'true', html: popoverTriggerEl.getAttribute('data-bs-html') === 'true' ?? false,
placement: popoverTriggerEl.getAttribute('data-bs-placement') ?? 'auto', placement: popoverTriggerEl.getAttribute('data-bs-placement') ?? 'auto',
} }
return new Popover(popoverTriggerEl, options) return new Popover(popoverTriggerEl, options)

View File

@@ -4,7 +4,7 @@ let tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggl
tooltipTriggerList.map(function (tooltipTriggerEl) { tooltipTriggerList.map(function (tooltipTriggerEl) {
let options = { let options = {
delay: { show: 50, hide: 50 }, delay: { show: 50, hide: 50 },
html: tooltipTriggerEl.getAttribute('data-bs-html') === 'true', html: tooltipTriggerEl.getAttribute('data-bs-html') === 'true' ?? false,
placement: tooltipTriggerEl.getAttribute('data-bs-placement') ?? 'auto', placement: tooltipTriggerEl.getAttribute('data-bs-placement') ?? 'auto',
} }
return new Tooltip(tooltipTriggerEl, options) return new Tooltip(tooltipTriggerEl, options)

View File

@@ -9,8 +9,7 @@ import './src/tab'
import './src/toast' import './src/toast'
import './src/sortable' import './src/sortable'
// Re-export everything from bootstrap.js (single source of truth) export * as bootstrap from 'bootstrap'
export * from './src/bootstrap'
// Re-export tabler namespace
export * as tabler from './src/tabler' export * as tabler from './src/tabler'
export { Alert, Modal, Toast, Tooltip, Tab, Button, Carousel, Collapse, Dropdown, Popover, ScrollSpy, Offcanvas } from 'bootstrap'

View File

@@ -166,14 +166,5 @@
"dist/turbo.es2017-umd.js" "dist/turbo.es2017-umd.js"
], ],
"head": true "head": true
},
"driver.js": {
"npm": "driver.js",
"js": [
"dist/driver.js.iife.js"
],
"css": [
"dist/driver.css"
]
} }
} }

View File

@@ -5,31 +5,30 @@
"homepage": "https://tabler.io", "homepage": "https://tabler.io",
"scripts": { "scripts": {
"dev": "pnpm run clean && pnpm run copy && pnpm run watch", "dev": "pnpm run clean && pnpm run copy && pnpm run watch",
"build": "pnpm run clean && pnpm run build-assets && pnpm run copy && pnpm run generate-sri", "build": "pnpm run clean && pnpm run css && pnpm run js && pnpm run copy && pnpm run generate-sri",
"build-assets": "concurrently \"pnpm run css\" \"pnpm run js\"",
"clean": "shx rm -rf dist demo", "clean": "shx rm -rf dist demo",
"css": "pnpm run css-compile && pnpm run css-prefix && pnpm run css-rtl && pnpm run css-minify && pnpm run css-banner", "css": "pnpm run css-compile && pnpm run css-prefix && pnpm run css-rtl && pnpm run css-minify && pnpm run css-banner",
"css-compile": "sass --no-source-map --load-path=node_modules --style expanded scss/:dist/css/", "css-compile": "sass --no-source-map --load-path=node_modules --style expanded scss/:dist/css/",
"css-banner": "node .build/add-banner.mjs", "css-banner": "node .build/add-banner.mjs",
"css-prefix": "postcss --config .build/postcss.config.mjs --replace \"dist/css/*.css\" \"!dist/css/*.rtl*.css\" \"!dist/css/*.min.css\"", "css-prefix": "postcss --config .build/postcss.config.mjs --replace \"dist/css/*.css\" \"!dist/css/*.rtl*.css\" \"!dist/css/*.min.css\"",
"css-rtl": "cross-env NODE_ENV=RTL postcss --config .build/postcss.config.mjs --dir \"dist/css\" --ext \".rtl.css\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*.rtl.css\"", "css-rtl": "cross-env NODE_ENV=RTL postcss --config .build/postcss.config.mjs --dir \"dist/css\" --ext \".rtl.css\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*.rtl.css\"",
"css-minify": "concurrently \"pnpm run css-minify-main\" \"pnpm run css-minify-rtl\"", "css-minify": "pnpm run css-minify-main && pnpm run css-minify-rtl",
"css-minify-main": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*rtl*.css\"", "css-minify-main": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*rtl*.css\"",
"css-minify-rtl": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*rtl.css\" \"!dist/css/*.min.css\"", "css-minify-rtl": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*rtl.css\" \"!dist/css/*.min.css\"",
"css-lint": "pnpm run css-lint-variables", "css-lint": "pnpm run css-lint-variables",
"css-lint-variables": "find-unused-sass-variables scss/ node_modules/bootstrap/scss/", "css-lint-variables": "find-unused-sass-variables scss/ node_modules/bootstrap/scss/",
"js": "pnpm run js-compile && pnpm run js-minify", "js": "pnpm run js-compile && pnpm run js-minify",
"js-compile": "concurrently \"pnpm run js-compile-standalone\" \"pnpm run js-compile-standalone-esm\" \"pnpm run js-compile-theme\" \"pnpm run js-compile-theme-esm\"", "js-compile": "pnpm run js-compile-standalone && pnpm run js-compile-standalone-esm && pnpm run js-compile-theme && pnpm run js-compile-theme-esm",
"js-compile-theme-esm": "rollup --environment THEME:true --environment ESM:true --config .build/rollup.config.mjs --sourcemap", "js-compile-theme-esm": "rollup --environment THEME:true --environment ESM:true --config .build/rollup.config.mjs --sourcemap",
"js-compile-theme": "rollup --environment THEME:true --config .build/rollup.config.mjs --sourcemap", "js-compile-theme": "rollup --environment THEME:true --config .build/rollup.config.mjs --sourcemap",
"js-compile-standalone": "rollup --config .build/rollup.config.mjs --sourcemap", "js-compile-standalone": "rollup --config .build/rollup.config.mjs --sourcemap",
"js-compile-standalone-esm": "rollup --environment ESM:true --config .build/rollup.config.mjs --sourcemap", "js-compile-standalone-esm": "rollup --environment ESM:true --config .build/rollup.config.mjs --sourcemap",
"js-minify": "concurrently \"pnpm run js-minify-standalone\" \"pnpm run js-minify-standalone-esm\" \"pnpm run js-minify-theme\" \"pnpm run js-minify-theme-esm\"", "js-minify": "pnpm run js-minify-standalone && pnpm run js-minify-standalone-esm && pnpm run js-minify-theme && pnpm run js-minify-theme-esm",
"js-minify-standalone": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/tabler.js.map,includeSources,url=tabler.min.js.map\" --output dist/js/tabler.min.js dist/js/tabler.js", "js-minify-standalone": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/tabler.js.map,includeSources,url=tabler.min.js.map\" --output dist/js/tabler.min.js dist/js/tabler.js",
"js-minify-standalone-esm": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/tabler.esm.js.map,includeSources,url=tabler.esm.min.js.map\" --output dist/js/tabler.esm.min.js dist/js/tabler.esm.js", "js-minify-standalone-esm": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/tabler.esm.js.map,includeSources,url=tabler.esm.min.js.map\" --output dist/js/tabler.esm.min.js dist/js/tabler.esm.js",
"js-minify-theme": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/tabler-theme.js.map,includeSources,url=tabler-theme.min.js.map\" --output dist/js/tabler-theme.min.js dist/js/tabler-theme.js", "js-minify-theme": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/tabler-theme.js.map,includeSources,url=tabler-theme.min.js.map\" --output dist/js/tabler-theme.min.js dist/js/tabler-theme.js",
"js-minify-theme-esm": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/tabler-theme.esm.js.map,includeSources,url=tabler-theme.esm.min.js.map\" --output dist/js/tabler-theme.esm.min.js dist/js/tabler-theme.esm.js", "js-minify-theme-esm": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/tabler-theme.esm.js.map,includeSources,url=tabler-theme.esm.min.js.map\" --output dist/js/tabler-theme.esm.min.js dist/js/tabler-theme.esm.js",
"copy": "concurrently \"pnpm run copy-img\" \"pnpm run copy-libs\" \"pnpm run copy-fonts\"", "copy": "pnpm run copy-img && pnpm run copy-libs && pnpm run copy-fonts",
"copy-img": "shx mkdir -p dist/img && shx cp -rf img/* dist/img", "copy-img": "shx mkdir -p dist/img && shx cp -rf img/* dist/img",
"copy-libs": "node .build/copy-libs.mjs", "copy-libs": "node .build/copy-libs.mjs",
"copy-fonts": "shx mkdir -p dist/fonts && shx cp -rf fonts/* dist/fonts", "copy-fonts": "shx mkdir -p dist/fonts && shx cp -rf fonts/* dist/fonts",
@@ -151,12 +150,13 @@
}, },
"dependencies": { "dependencies": {
"@popperjs/core": "^2.11.8", "@popperjs/core": "^2.11.8",
"bootstrap": "5.3.8" "bootstrap": "5.3.8",
"geist": "^1.5.1"
}, },
"devDependencies": { "devDependencies": {
"@hotwired/turbo": "^8.0.18", "@hotwired/turbo": "^8.0.18",
"@melloware/coloris": "^0.25.0", "@melloware/coloris": "^0.25.0",
"apexcharts": "^5.3.6", "apexcharts": "3.54.1",
"autosize": "^6.0.1", "autosize": "^6.0.1",
"choices.js": "^11.1.0", "choices.js": "^11.1.0",
"clipboard": "^2.0.11", "clipboard": "^2.0.11",
@@ -166,7 +166,6 @@
"flatpickr": "^4.6.13", "flatpickr": "^4.6.13",
"fslightbox": "^3.7.4", "fslightbox": "^3.7.4",
"fullcalendar": "^6.1.19", "fullcalendar": "^6.1.19",
"geist": "^1.5.1",
"hugerte": "^1.0.9", "hugerte": "^1.0.9",
"imask": "^7.6.1", "imask": "^7.6.1",
"jsvectormap": "^1.7.0", "jsvectormap": "^1.7.0",
@@ -178,8 +177,7 @@
"sortablejs": "^1.15.6", "sortablejs": "^1.15.6",
"star-rating.js": "^4.3.1", "star-rating.js": "^4.3.1",
"tom-select": "^2.4.3", "tom-select": "^2.4.3",
"typed.js": "^2.1.0", "typed.js": "^2.1.0"
"driver.js": "^1.0.0"
}, },
"directories": { "directories": {
"doc": "docs" "doc": "docs"

View File

@@ -32,7 +32,6 @@
/** Theme colors */ /** Theme colors */
@each $name, $color in map.merge($theme-colors, $social-colors) { @each $name, $color in map.merge($theme-colors, $social-colors) {
@debug contrast-ratio($color, white), $name, $min-contrast-ratio;
--#{$prefix}#{$name}: #{$color}; --#{$prefix}#{$name}: #{$color};
--#{$prefix}#{$name}-rgb: #{to-rgb($color)}; --#{$prefix}#{$name}-rgb: #{to-rgb($color)};
--#{$prefix}#{$name}-fg: #{if(contrast-ratio($color) > $min-contrast-ratio, var(--#{$prefix}light), var(--#{$prefix}dark))}; --#{$prefix}#{$name}-fg: #{if(contrast-ratio($color) > $min-contrast-ratio, var(--#{$prefix}light), var(--#{$prefix}dark))};

File diff suppressed because it is too large Load Diff

View File

@@ -6,7 +6,7 @@
$darken-dark: color.adjust($dark, $lightness: -2%) !default; $darken-dark: color.adjust($dark, $lightness: -2%) !default;
$lighten-dark: color.adjust($dark, $lightness: 2%) !default; $lighten-dark: color.adjust($dark, $lightness: 2%) !default;
$border-color-dark: color.adjust($dark, $lightness: 8%) !default; $border-color-dark: color.adjust($dark, $lightness: 8%) !default;
$border-color-translucent-dark: rgba(128, 150, 172, 0.2) !default; $border-color-translucent-dark: rgba(72, 110, 149, 0.14) !default;
$border-dark-color-dark: color.adjust($dark, $lightness: 4%) !default; $border-dark-color-dark: color.adjust($dark, $lightness: 4%) !default;
$border-active-color-dark: color.adjust($dark, $lightness: 12%) !default; $border-active-color-dark: color.adjust($dark, $lightness: 12%) !default;

View File

@@ -33,7 +33,12 @@ $enable-deprecation-messages: true !default;
$enable-important-utilities: true !default; $enable-important-utilities: true !default;
// Escaped Characters // Escaped Characters
$escaped-characters: (('<', '%3c'), ('>', '%3e'), ('#', '%23'), ('(', '%28'), (')', '%29')) !default; $escaped-characters: (
('<', '%3c'),
('>', '%3e'),
('#', '%23'),
('(', '%28'),
(')', '%29')) !default;
// Dark Mode // Dark Mode
$color-mode-type: data !default; $color-mode-type: data !default;
@@ -101,7 +106,7 @@ $colors: (
'gray-dark': $gray-800, 'gray-dark': $gray-800,
) !default; ) !default;
$min-contrast-ratio: 2 !default; $min-contrast-ratio: 4.5 !default;
$color-contrast-dark: $black !default; $color-contrast-dark: $black !default;
$color-contrast-light: $white !default; $color-contrast-light: $white !default;
@@ -439,7 +444,7 @@ $headings-font-style: null !default;
$headings-line-height: 1.2 !default; $headings-line-height: 1.2 !default;
$headings-font-weight: var(--#{$prefix}font-weight-semibold) !default; $headings-font-weight: var(--#{$prefix}font-weight-semibold) !default;
$headings-margin-bottom: var(--#{$prefix}spacer) !default; $headings-margin-bottom: var(--#{$prefix}spacer) !default;
$headings-color: light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}white)) !default; $headings-color: inherit !default;
$font-weights: ( $font-weights: (
'light': $font-weight-light, 'light': $font-weight-light,
@@ -523,7 +528,7 @@ $initialism-font-size: $small-font-size !default;
$sub-sup-font-size: 0.75em !default; $sub-sup-font-size: 0.75em !default;
$dt-font-weight: $font-weight-semibold !default; $dt-font-weight: $font-weight-bold !default;
$list-inline-padding: 0.5rem !default; $list-inline-padding: 0.5rem !default;
@@ -551,10 +556,16 @@ $zindex-levels: (
3: 3, 3: 3,
) !default; ) !default;
$min-contrast-ratio: 1.5 !default;
$text-secondary-opacity: 0.7 !default; $text-secondary-opacity: 0.7 !default;
$text-secondary-light-opacity: 0.4 !default; $text-secondary-light-opacity: 0.4 !default;
$text-secondary-dark-opacity: 0.8 !default; $text-secondary-dark-opacity: 0.8 !default;
$border-opacity: 0.16 !default;
$border-light-opacity: 0.08 !default;
$border-dark-opacity: 0.24 !default;
$border-active-opacity: 0.58 !default;
$bg-surface: var(--#{$prefix}white) !default; $bg-surface: var(--#{$prefix}white) !default;
$bg-surface-secondary: var(--#{$prefix}gray-100) !default; $bg-surface-secondary: var(--#{$prefix}gray-100) !default;
$bg-surface-tertiary: var(--#{$prefix}gray-50) !default; $bg-surface-tertiary: var(--#{$prefix}gray-50) !default;
@@ -562,7 +573,7 @@ $bg-surface-dark: var(--#{$prefix}dark) !default;
$body-text-align: null !default; $body-text-align: null !default;
$body-bg: $gray-50 !default; $body-bg: $gray-50 !default;
$body-color: $gray-800 !default; $body-color: $dark !default;
$body-emphasis-color: $gray-700 !default; $body-emphasis-color: $gray-700 !default;
$body-secondary-color: rgba($body-color, 0.75) !default; $body-secondary-color: rgba($body-color, 0.75) !default;
$body-secondary-bg: $gray-200 !default; $body-secondary-bg: $gray-200 !default;
@@ -577,21 +588,14 @@ $text-secondary: $gray-500 !default;
$text-secondary-light: $gray-400 !default; $text-secondary-light: $gray-400 !default;
$text-secondary-dark: $gray-600 !default; $text-secondary-dark: $gray-600 !default;
$border-light-color: var(--#{$prefix}gray-200) !default; $border-color: $gray-200 !default;
$border-light-opacity: 4.7% !default; $border-color-translucent: rgba(4, 32, 69, 0.1);
$border-light-color-translucent: color-mix(in srgb, var(--#{$prefix}gray-800) #{$border-light-opacity}, transparent) !default;
$border-color: var(--#{$prefix}gray-200) !default; $border-dark-color: $gray-400 !default;
$border-opacity: 11.9% !default; $border-dark-color-translucent: rgba(4, 32, 69, 0.27);
$border-color-translucent: color-mix(in srgb, var(--#{$prefix}gray-800) #{$border-opacity}, transparent) !default;
$border-dark-color: var(--#{$prefix}gray-300) !default; $border-active-color: color.mix($text-secondary, #ffffff, math.percentage($border-active-opacity)) !default;
$border-dark-opacity: 20.7% !default; $border-active-color-translucent: rgba($text-secondary, $border-active-opacity) !default;
$border-dark-color-translucent: color-mix(in srgb, var(--#{$prefix}gray-800) #{$border-dark-opacity}, transparent) !default;
$border-active-color: var(--#{$prefix}gray-400) !default;
$border-active-opacity: 44.8% !default;
$border-active-color-translucent: color-mix(in srgb, var(--#{$prefix}gray-800) #{$border-active-opacity}, transparent) !default;
$active-bg: rgba(var(--#{$prefix}primary-rgb), 0.04) !default; $active-bg: rgba(var(--#{$prefix}primary-rgb), 0.04) !default;
$active-color: var(--#{$prefix}primary) !default; $active-color: var(--#{$prefix}primary) !default;
@@ -801,8 +805,8 @@ $icon-color: var(--#{$prefix}gray-400) !default;
// Code // Code
$code-color: light-dark(var(--#{$prefix}gray-600), var(--#{$prefix}gray-400)) !default; $code-color: light-dark(var(--#{$prefix}gray-600), var(--#{$prefix}gray-400)) !default;
$code-bg: light-dark(var(--#{$prefix}gray-100), var(--#{$prefix}gray-900)) !default; $code-bg: light-dark(var(--#{$prefix}gray-100), var(--#{$prefix}gray-900)) !default;
$code-font-size: $font-size-reative-sm !default; $code-font-size: $font-size-reative-md !default;
$code-line-height: 1.25rem !default; $code-line-height: 1.7142857em !default;
$pre-padding: 1rem !default; $pre-padding: 1rem !default;
$pre-bg: var(--#{$prefix}bg-surface-dark) !default; $pre-bg: var(--#{$prefix}bg-surface-dark) !default;
@@ -877,7 +881,7 @@ $avatar-sizes: (
brand-size: 2rem, brand-size: 2rem,
), ),
) !default; ) !default;
$avatar-border-radius: var(--#{$prefix}border-radius-pill) !default; $avatar-border-radius: var(--#{$prefix}border-radius) !default;
$avatar-font-size: $h4-font-size !default; $avatar-font-size: $h4-font-size !default;
$avatar-box-shadow: var(--#{$prefix}shadow-border) !default; $avatar-box-shadow: var(--#{$prefix}shadow-border) !default;
$avatar-list-spacing: -0.5; $avatar-list-spacing: -0.5;
@@ -991,7 +995,7 @@ $box-shadow-lg: 0 1rem 3rem rgba($black, 0.175) !default;
$box-shadow-transparent: 0 0 0 0 transparent !default; $box-shadow-transparent: 0 0 0 0 transparent !default;
$box-shadow-border: inset 0 0 0 1px var(--#{$prefix}border-color-translucent) !default; $box-shadow-border: inset 0 0 0 1px var(--#{$prefix}border-color-translucent) !default;
$box-shadow-input: 0 1px 1px rgba(var(--#{$prefix}body-color-rgb), 0.06) !default; $box-shadow-input: 0 1px 1px rgba(var(--#{$prefix}body-color-rgb), 0.06) !default;
$box-shadow-card: 0px 1px 3px rgba(0, 0, 0, 0.08) !default; $box-shadow-card: 0 0 4px rgba(var(--#{$prefix}body-color-rgb), 0.04) !default;
$box-shadow-card-hover: rgba(var(--#{$prefix}body-color-rgb), 0.16) 0 2px 16px 0 !default; $box-shadow-card-hover: rgba(var(--#{$prefix}body-color-rgb), 0.16) 0 2px 16px 0 !default;
$box-shadow-dropdown: $box-shadow-dropdown:
0 16px 24px 2px rgba(0, 0, 0, 0.07), 0 16px 24px 2px rgba(0, 0, 0, 0.07),
@@ -1036,7 +1040,7 @@ $alert-padding-y: 0.75rem !default;
$alert-padding-x: 1rem !default; $alert-padding-x: 1rem !default;
$alert-margin-bottom: 1rem !default; $alert-margin-bottom: 1rem !default;
$alert-border-radius: var(--#{$prefix}border-radius) !default; $alert-border-radius: var(--#{$prefix}border-radius) !default;
$alert-link-font-weight: var(--#{$prefix}font-weight-semibold) !default; $alert-link-font-weight: var(--#{$prefix}font-weight-bold) !default;
$alert-border-width: var(--#{$prefix}border-width) !default; $alert-border-width: var(--#{$prefix}border-width) !default;
$alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side $alert-dismissible-padding-r: $alert-padding-x * 3 !default; // 3x covers width of x plus default padding on either side
$alert-border-color: var(--#{$prefix}border-color-translucent) !default; $alert-border-color: var(--#{$prefix}border-color-translucent) !default;
@@ -1058,7 +1062,7 @@ $breadcrumb-divider: string.quote('/') !default;
$breadcrumb-divider-flipped: $breadcrumb-divider !default; $breadcrumb-divider-flipped: $breadcrumb-divider !default;
$breadcrumb-border-radius: null !default; $breadcrumb-border-radius: null !default;
$breadcrumb-link-color: var(--#{$prefix}link-color) !default; $breadcrumb-link-color: var(--#{$prefix}link-color) !default;
$breadcrumb-active-font-weight: var(--#{$prefix}font-weight-semibold) !default; $breadcrumb-active-font-weight: var(--#{$prefix}font-weight-bold) !default;
$breadcrumb-disabled-color: var(--#{$prefix}disabled-color) !default; $breadcrumb-disabled-color: var(--#{$prefix}disabled-color) !default;
$breadcrumb-variants: ( $breadcrumb-variants: (
@@ -1163,9 +1167,9 @@ $btn-padding-y-lg: $input-btn-padding-y-lg !default;
$btn-padding-x-lg: $input-btn-padding-x-lg !default; $btn-padding-x-lg: $input-btn-padding-x-lg !default;
// Inputs // Inputs
$input-bg: var(--#{$prefix}bg-forms) !default; $input-bg: var(--#{$prefix}body-bg) !default;
$input-disabled-color: null !default; $input-disabled-color: null !default;
$input-disabled-bg: var(--#{$prefix}bg-surface-secondary) !default; $input-disabled-bg: var(--#{$prefix}secondary-bg) !default;
$input-disabled-border-color: null !default; $input-disabled-border-color: null !default;
$input-height: null !default; $input-height: null !default;
@@ -1536,7 +1540,7 @@ $navbar-brand-padding-y: $nav-link-padding-y !default;
$navbar-brand-image-height: 2rem !default; $navbar-brand-image-height: 2rem !default;
$navbar-brand-margin-right: 0 !default; $navbar-brand-margin-right: 0 !default;
$navbar-brand-margin-end: 1rem !default; $navbar-brand-margin-end: 1rem !default;
$navbar-brand-font-weight: var(--#{$prefix}font-weight-semibold) !default; $navbar-brand-font-weight: var(--#{$prefix}font-weight-bold) !default;
$navbar-toggler-padding-y: 0.25rem !default; $navbar-toggler-padding-y: 0.25rem !default;
$navbar-toggler-padding-x: 0.75rem !default; $navbar-toggler-padding-x: 0.75rem !default;
@@ -1862,16 +1866,16 @@ $form-select-font-size-lg: $input-font-size-lg !default;
$form-select-border-radius-lg: $input-border-radius-lg !default; $form-select-border-radius-lg: $input-border-radius-lg !default;
$form-select-transition: $input-transition !default; $form-select-transition: $input-transition !default;
$form-switch-color: white !default; $form-switch-color: rgba($black, 0.25) !default;
$form-switch-width: 2rem !default; $form-switch-width: 2rem !default;
$form-switch-height: 1.25rem !default; $form-switch-height: 1.25rem !default;
$form-switch-padding-start: $form-switch-width + 0.5rem !default; $form-switch-padding-start: $form-switch-width + 0.5rem !default;
$form-switch-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color}'/></svg>") !default; $form-switch-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$border-color}'/></svg>") !default;
$form-switch-border-radius: $form-switch-width !default; $form-switch-border-radius: $form-switch-width !default;
$form-switch-transition: background-position 0.15s ease-in-out !default; $form-switch-transition: background-position 0.15s ease-in-out !default;
$form-switch-focus-color: white !default; $form-switch-focus-color: $input-focus-border-color !default;
$form-switch-focus-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-focus-color}'/></svg>") !default; $form-switch-focus-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-focus-color}'/></svg>") !default;
$form-switch-checked-color: white !default; $form-switch-checked-color: $component-active-color !default;
$form-switch-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-checked-color}'/></svg>") !default; $form-switch-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-checked-color}'/></svg>") !default;
$form-switch-checked-bg-position: right center !default; $form-switch-checked-bg-position: right center !default;
$form-switch-bg-size: auto !default; $form-switch-bg-size: auto !default;

View File

@@ -1,203 +1,184 @@
// Geist Sans Font Family // Geist Sans Font Family
@font-face { @font-face {
font-family: 'Geist'; font-family: 'Geist';
src: src: url('#{$assets-base}/fonts/geist-sans/Geist-Thin.woff2') format('woff2'),
url('#{$assets-base}/fonts/geist-sans/Geist-Thin.woff2') format('woff2'), url('#{$assets-base}/fonts/geist-sans/Geist-Thin.ttf') format('truetype');
url('#{$assets-base}/fonts/geist-sans/Geist-Thin.ttf') format('truetype'); font-weight: 100;
font-weight: 100; font-style: normal;
font-style: normal; font-display: swap;
font-display: swap;
} }
@font-face { @font-face {
font-family: 'Geist'; font-family: 'Geist';
src: src: url('#{$assets-base}/fonts/geist-sans/Geist-UltraLight.woff2') format('woff2'),
url('#{$assets-base}/fonts/geist-sans/Geist-UltraLight.woff2') format('woff2'), url('#{$assets-base}/fonts/geist-sans/Geist-UltraLight.ttf') format('truetype');
url('#{$assets-base}/fonts/geist-sans/Geist-UltraLight.ttf') format('truetype'); font-weight: 200;
font-weight: 200; font-style: normal;
font-style: normal; font-display: swap;
font-display: swap;
} }
@font-face { @font-face {
font-family: 'Geist'; font-family: 'Geist';
src: src: url('#{$assets-base}/fonts/geist-sans/Geist-Light.woff2') format('woff2'),
url('#{$assets-base}/fonts/geist-sans/Geist-Light.woff2') format('woff2'), url('#{$assets-base}/fonts/geist-sans/Geist-Light.ttf') format('truetype');
url('#{$assets-base}/fonts/geist-sans/Geist-Light.ttf') format('truetype'); font-weight: 300;
font-weight: 300; font-style: normal;
font-style: normal; font-display: swap;
font-display: swap;
} }
@font-face { @font-face {
font-family: 'Geist'; font-family: 'Geist';
src: src: url('#{$assets-base}/fonts/geist-sans/Geist-Regular.woff2') format('woff2'),
url('#{$assets-base}/fonts/geist-sans/Geist-Regular.woff2') format('woff2'), url('#{$assets-base}/fonts/geist-sans/Geist-Regular.ttf') format('truetype');
url('#{$assets-base}/fonts/geist-sans/Geist-Regular.ttf') format('truetype'); font-weight: 400;
font-weight: 400; font-style: normal;
font-style: normal; font-display: swap;
font-display: swap;
} }
@font-face { @font-face {
font-family: 'Geist'; font-family: 'Geist';
src: src: url('#{$assets-base}/fonts/geist-sans/Geist-Medium.woff2') format('woff2'),
url('#{$assets-base}/fonts/geist-sans/Geist-Medium.woff2') format('woff2'), url('#{$assets-base}/fonts/geist-sans/Geist-Medium.ttf') format('truetype');
url('#{$assets-base}/fonts/geist-sans/Geist-Medium.ttf') format('truetype'); font-weight: 500;
font-weight: 500; font-style: normal;
font-style: normal; font-display: swap;
font-display: swap;
} }
@font-face { @font-face {
font-family: 'Geist'; font-family: 'Geist';
src: src: url('#{$assets-base}/fonts/geist-sans/Geist-SemiBold.woff2') format('woff2'),
url('#{$assets-base}/fonts/geist-sans/Geist-SemiBold.woff2') format('woff2'), url('#{$assets-base}/fonts/geist-sans/Geist-SemiBold.ttf') format('truetype');
url('#{$assets-base}/fonts/geist-sans/Geist-SemiBold.ttf') format('truetype'); font-weight: 600;
font-weight: 600; font-style: normal;
font-style: normal; font-display: swap;
font-display: swap;
} }
@font-face { @font-face {
font-family: 'Geist'; font-family: 'Geist';
src: src: url('#{$assets-base}/fonts/geist-sans/Geist-Bold.woff2') format('woff2'),
url('#{$assets-base}/fonts/geist-sans/Geist-Bold.woff2') format('woff2'), url('#{$assets-base}/fonts/geist-sans/Geist-Bold.ttf') format('truetype');
url('#{$assets-base}/fonts/geist-sans/Geist-Bold.ttf') format('truetype'); font-weight: 700;
font-weight: 700; font-style: normal;
font-style: normal; font-display: swap;
font-display: swap;
} }
@font-face { @font-face {
font-family: 'Geist'; font-family: 'Geist';
src: src: url('#{$assets-base}/fonts/geist-sans/Geist-Black.woff2') format('woff2'),
url('#{$assets-base}/fonts/geist-sans/Geist-Black.woff2') format('woff2'), url('#{$assets-base}/fonts/geist-sans/Geist-Black.ttf') format('truetype');
url('#{$assets-base}/fonts/geist-sans/Geist-Black.ttf') format('truetype'); font-weight: 800;
font-weight: 800; font-style: normal;
font-style: normal; font-display: swap;
font-display: swap;
} }
@font-face { @font-face {
font-family: 'Geist'; font-family: 'Geist';
src: src: url('#{$assets-base}/fonts/geist-sans/Geist-UltraBlack.woff2') format('woff2'),
url('#{$assets-base}/fonts/geist-sans/Geist-UltraBlack.woff2') format('woff2'), url('#{$assets-base}/fonts/geist-sans/Geist-UltraBlack.ttf') format('truetype');
url('#{$assets-base}/fonts/geist-sans/Geist-UltraBlack.ttf') format('truetype'); font-weight: 900;
font-weight: 900; font-style: normal;
font-style: normal; font-display: swap;
font-display: swap;
} }
// Geist Sans Variable Font // Geist Sans Variable Font
@font-face { @font-face {
font-family: 'Geist'; font-family: 'Geist';
src: src: url('#{$assets-base}/fonts/geist-sans/Geist-Variable.woff2') format('woff2'),
url('#{$assets-base}/fonts/geist-sans/Geist-Variable.woff2') format('woff2'), url('#{$assets-base}/fonts/geist-sans/Geist-Variable.ttf') format('truetype');
url('#{$assets-base}/fonts/geist-sans/Geist-Variable.ttf') format('truetype'); font-weight: 100 900;
font-weight: 100 900; font-style: normal;
font-style: normal; font-display: swap;
font-display: swap;
} }
// Geist Mono Font Family // Geist Mono Font Family
@font-face { @font-face {
font-family: 'Geist Mono'; font-family: 'Geist Mono';
src: src: url('#{$assets-base}/fonts/geist-mono/GeistMono-Thin.woff2') format('woff2'),
url('#{$assets-base}/fonts/geist-mono/GeistMono-Thin.woff2') format('woff2'), url('#{$assets-base}/fonts/geist-mono/GeistMono-Thin.ttf') format('truetype');
url('#{$assets-base}/fonts/geist-mono/GeistMono-Thin.ttf') format('truetype'); font-weight: 100;
font-weight: 100; font-style: normal;
font-style: normal; font-display: swap;
font-display: swap;
} }
@font-face { @font-face {
font-family: 'Geist Mono'; font-family: 'Geist Mono';
src: src: url('#{$assets-base}/fonts/geist-mono/GeistMono-UltraLight.woff2') format('woff2'),
url('#{$assets-base}/fonts/geist-mono/GeistMono-UltraLight.woff2') format('woff2'), url('#{$assets-base}/fonts/geist-mono/GeistMono-UltraLight.ttf') format('truetype');
url('#{$assets-base}/fonts/geist-mono/GeistMono-UltraLight.ttf') format('truetype'); font-weight: 200;
font-weight: 200; font-style: normal;
font-style: normal; font-display: swap;
font-display: swap;
} }
@font-face { @font-face {
font-family: 'Geist Mono'; font-family: 'Geist Mono';
src: src: url('#{$assets-base}/fonts/geist-mono/GeistMono-Light.woff2') format('woff2'),
url('#{$assets-base}/fonts/geist-mono/GeistMono-Light.woff2') format('woff2'), url('#{$assets-base}/fonts/geist-mono/GeistMono-Light.ttf') format('truetype');
url('#{$assets-base}/fonts/geist-mono/GeistMono-Light.ttf') format('truetype'); font-weight: 300;
font-weight: 300; font-style: normal;
font-style: normal; font-display: swap;
font-display: swap;
} }
@font-face { @font-face {
font-family: 'Geist Mono'; font-family: 'Geist Mono';
src: src: url('#{$assets-base}/fonts/geist-mono/GeistMono-Regular.woff2') format('woff2'),
url('#{$assets-base}/fonts/geist-mono/GeistMono-Regular.woff2') format('woff2'), url('#{$assets-base}/fonts/geist-mono/GeistMono-Regular.ttf') format('truetype');
url('#{$assets-base}/fonts/geist-mono/GeistMono-Regular.ttf') format('truetype'); font-weight: 400;
font-weight: 400; font-style: normal;
font-style: normal; font-display: swap;
font-display: swap;
} }
@font-face { @font-face {
font-family: 'Geist Mono'; font-family: 'Geist Mono';
src: src: url('#{$assets-base}/fonts/geist-mono/GeistMono-Medium.woff2') format('woff2'),
url('#{$assets-base}/fonts/geist-mono/GeistMono-Medium.woff2') format('woff2'), url('#{$assets-base}/fonts/geist-mono/GeistMono-Medium.ttf') format('truetype');
url('#{$assets-base}/fonts/geist-mono/GeistMono-Medium.ttf') format('truetype'); font-weight: 500;
font-weight: 500; font-style: normal;
font-style: normal; font-display: swap;
font-display: swap;
} }
@font-face { @font-face {
font-family: 'Geist Mono'; font-family: 'Geist Mono';
src: src: url('#{$assets-base}/fonts/geist-mono/GeistMono-SemiBold.woff2') format('woff2'),
url('#{$assets-base}/fonts/geist-mono/GeistMono-SemiBold.woff2') format('woff2'), url('#{$assets-base}/fonts/geist-mono/GeistMono-SemiBold.ttf') format('truetype');
url('#{$assets-base}/fonts/geist-mono/GeistMono-SemiBold.ttf') format('truetype'); font-weight: 600;
font-weight: 600; font-style: normal;
font-style: normal; font-display: swap;
font-display: swap;
} }
@font-face { @font-face {
font-family: 'Geist Mono'; font-family: 'Geist Mono';
src: src: url('#{$assets-base}/fonts/geist-mono/GeistMono-Bold.woff2') format('woff2'),
url('#{$assets-base}/fonts/geist-mono/GeistMono-Bold.woff2') format('woff2'), url('#{$assets-base}/fonts/geist-mono/GeistMono-Bold.ttf') format('truetype');
url('#{$assets-base}/fonts/geist-mono/GeistMono-Bold.ttf') format('truetype'); font-weight: 700;
font-weight: 700; font-style: normal;
font-style: normal; font-display: swap;
font-display: swap;
} }
@font-face { @font-face {
font-family: 'Geist Mono'; font-family: 'Geist Mono';
src: src: url('#{$assets-base}/fonts/geist-mono/GeistMono-Black.woff2') format('woff2'),
url('#{$assets-base}/fonts/geist-mono/GeistMono-Black.woff2') format('woff2'), url('#{$assets-base}/fonts/geist-mono/GeistMono-Black.ttf') format('truetype');
url('#{$assets-base}/fonts/geist-mono/GeistMono-Black.ttf') format('truetype'); font-weight: 800;
font-weight: 800; font-style: normal;
font-style: normal; font-display: swap;
font-display: swap;
} }
@font-face { @font-face {
font-family: 'Geist Mono'; font-family: 'Geist Mono';
src: src: url('#{$assets-base}/fonts/geist-mono/GeistMono-UltraBlack.woff2') format('woff2'),
url('#{$assets-base}/fonts/geist-mono/GeistMono-UltraBlack.woff2') format('woff2'), url('#{$assets-base}/fonts/geist-mono/GeistMono-UltraBlack.ttf') format('truetype');
url('#{$assets-base}/fonts/geist-mono/GeistMono-UltraBlack.ttf') format('truetype'); font-weight: 900;
font-weight: 900; font-style: normal;
font-style: normal; font-display: swap;
font-display: swap;
} }
// Geist Mono Variable Font // Geist Mono Variable Font
@font-face { @font-face {
font-family: 'Geist Mono'; font-family: 'Geist Mono';
src: src: url('#{$assets-base}/fonts/geist-mono/GeistMono-Variable.woff2') format('woff2'),
url('#{$assets-base}/fonts/geist-mono/GeistMono-Variable.woff2') format('woff2'), url('#{$assets-base}/fonts/geist-mono/GeistMono-Variable.ttf') format('truetype');
url('#{$assets-base}/fonts/geist-mono/GeistMono-Variable.ttf') format('truetype'); font-weight: 100 900;
font-weight: 100 900; font-style: normal;
font-style: normal; font-display: swap;
font-display: swap;
} }

View File

@@ -119,7 +119,7 @@
content: ''; content: '';
} }
> * { >* {
position: absolute; position: absolute;
top: 0; top: 0;
inset-inline-start: 0; inset-inline-start: 0;

View File

@@ -1,13 +1,5 @@
@use 'sass:map'; @use 'sass:map';
html {
scrollbar-gutter: stable;
@supports not (scrollbar-gutter: stable) {
overflow-y: scroll;
}
}
// stylelint-disable property-no-vendor-prefix // stylelint-disable property-no-vendor-prefix
body { body {
letter-spacing: $body-letter-spacing; letter-spacing: $body-letter-spacing;

View File

@@ -69,7 +69,7 @@
.nav-item.active:after { .nav-item.active:after {
border-bottom-width: 0; border-bottom-width: 0;
border-inline-start-width: 3px; border-inline-start-width: 3px;
inset-inline-end: auto; inset-inline-end: auto;
top: 0; top: 0;
bottom: 0; bottom: 0;
} }
@@ -118,7 +118,7 @@ Navbar
.badge { .badge {
position: absolute; position: absolute;
top: 0.5rem; top: 0.5rem;
inset-inline-end: 0.5rem; inset-inline-end: 0.5rem;
transform: translate(50%, -50%); transform: translate(50%, -50%);
} }
} }
@@ -151,8 +151,8 @@ Navbar
&:after { &:after {
content: ''; content: '';
position: absolute; position: absolute;
inset-inline-start: 0; inset-inline-start: 0;
inset-inline-end: 0; inset-inline-end: 0;
bottom: -0.25rem; bottom: -0.25rem;
border: 0 var(--#{$prefix}border-style) var(--#{$prefix}navbar-active-border-color); border: 0 var(--#{$prefix}border-style) var(--#{$prefix}navbar-active-border-color);
border-bottom-width: 2px; border-bottom-width: 2px;
@@ -235,7 +235,7 @@ Navbar toggler
border-radius: inherit; border-radius: inherit;
background: inherit; background: inherit;
position: absolute; position: absolute;
inset-inline-start: 0; inset-inline-start: 0;
@include transition(inherit); @include transition(inherit);
} }
@@ -313,7 +313,7 @@ Navbar vertical
width: $sidebar-width; width: $sidebar-width;
position: fixed; position: fixed;
top: 0; top: 0;
inset-inline-start: 0; inset-inline-start: 0;
bottom: 0; bottom: 0;
z-index: $zindex-fixed; z-index: $zindex-fixed;
align-items: start; align-items: start;
@@ -323,8 +323,8 @@ Navbar vertical
&.navbar-right, &.navbar-right,
&.navbar-end { &.navbar-end {
inset-inline-start: auto; inset-inline-start: auto;
inset-inline-end: 0; inset-inline-end: 0;
} }
.navbar-brand { .navbar-brand {
@@ -384,8 +384,8 @@ Navbar vertical
height: $navbar-overlap-height; height: $navbar-overlap-height;
position: absolute; position: absolute;
top: 100%; top: 100%;
inset-inline-start: 0; inset-inline-start: 0;
inset-inline-end: 0; inset-inline-end: 0;
background: inherit; background: inherit;
z-index: -1; z-index: -1;
box-shadow: inherit; box-shadow: inherit;

View File

@@ -67,8 +67,8 @@
content: ''; content: '';
position: absolute; position: absolute;
top: 0; top: 0;
inset-inline-start: 0; inset-inline-start: 0;
inset-inline-end: 0; inset-inline-end: 0;
bottom: 0; bottom: 0;
background-image: $overlay-gradient; background-image: $overlay-gradient;
} }

View File

@@ -2,6 +2,11 @@
:host { :host {
font-size: 16px; font-size: 16px;
height: 100%; height: 100%;
@include media-breakpoint-up(lg) {
margin-inline-start: calc(100vw - 100%);
margin-inline-end: 0;
}
} }
:root, :root,
@@ -33,10 +38,7 @@
--#{$prefix}border-color-translucent: #{$border-color-translucent}; --#{$prefix}border-color-translucent: #{$border-color-translucent};
--#{$prefix}border-dark-color: #{$border-dark-color}; --#{$prefix}border-dark-color: #{$border-dark-color};
--#{$prefix}border-dark-color-translucent: #{$border-dark-color-translucent}; --#{$prefix}border-dark-color-translucent: #{$border-dark-color-translucent};
--#{$prefix}border-light-color: #{$border-light-color};
--#{$prefix}border-light-color-translucent: #{$border-light-color-translucent};
--#{$prefix}border-active-color: #{$border-active-color}; --#{$prefix}border-active-color: #{$border-active-color};
--#{$prefix}border-active-color-translucent: #{$border-active-color-translucent};
--#{$prefix}icon-color: #{$icon-color}; --#{$prefix}icon-color: #{$icon-color};

View File

@@ -79,7 +79,7 @@ $pricing-card-width: 22rem;
justify-content: center; justify-content: center;
font-size: 2.5rem; font-size: 2.5rem;
line-height: 1; line-height: 1;
font-weight: $font-weight-semibold; font-weight: $font-weight-bold;
margin: 0.75rem 0; margin: 0.75rem 0;
} }
@@ -87,7 +87,7 @@ $pricing-card-width: 22rem;
font-size: $h2-font-size; font-size: $h2-font-size;
line-height: 1.5; line-height: 1.5;
margin-inline-end: 0.25rem; margin-inline-end: 0.25rem;
font-weight: $font-weight-semibold; font-weight: $font-weight-bold;
} }
.pricing-price-description { .pricing-price-description {

View File

@@ -72,7 +72,7 @@
.section-title { .section-title {
font-size: var(--#{$prefix}font-size-h1); font-size: var(--#{$prefix}font-size-h1);
font-weight: var(--#{$prefix}font-weight-semibold); font-weight: var(--#{$prefix}font-weight-bold);
line-height: 1.2; line-height: 1.2;
} }

View File

@@ -15,17 +15,17 @@
} }
[data-bs-theme-base='gray'] { [data-bs-theme-base='gray'] {
--#{$prefix}gray-50: $gray-50; --#{$prefix}gray-50: #f9fafb;
--#{$prefix}gray-100: $gray-100; --#{$prefix}gray-100: #f3f4f6;
--#{$prefix}gray-200: $gray-200; --#{$prefix}gray-200: #e5e7eb;
--#{$prefix}gray-300: $gray-300; --#{$prefix}gray-300: #d1d5db;
--#{$prefix}gray-400: $gray-400; --#{$prefix}gray-400: #9ca3af;
--#{$prefix}gray-500: $gray-500; --#{$prefix}gray-500: #6b7280;
--#{$prefix}gray-600: $gray-600; --#{$prefix}gray-600: #4b5563;
--#{$prefix}gray-700: $gray-700; --#{$prefix}gray-700: #374151;
--#{$prefix}gray-800: $gray-800; --#{$prefix}gray-800: #1f2937;
--#{$prefix}gray-900: $gray-900; --#{$prefix}gray-900: #111827;
--#{$prefix}gray-950: $gray-950; --#{$prefix}gray-950: #030712;
} }
[data-bs-theme-base='zinc'] { [data-bs-theme-base='zinc'] {

View File

@@ -1,12 +1,10 @@
.alert { .alert {
--#{$prefix}alert-variant-color: var(--#{$prefix}body-color); --#{$prefix}alert-color: var(--#{$prefix}body-color);
--#{$prefix}alert-color: var(--#{$prefix}alert-variant-color); --#{$prefix}alert-bg: #{color-transparent(var(--#{$prefix}alert-color), 0.1)};
--#{$prefix}alert-bg: #{color-transparent(var(--#{$prefix}alert-variant-color), 0.16, var(--#{$prefix}bg-surface))};
--#{$prefix}alert-padding-x: #{$alert-padding-x}; --#{$prefix}alert-padding-x: #{$alert-padding-x};
--#{$prefix}alert-padding-y: #{$alert-padding-y}; --#{$prefix}alert-padding-y: #{$alert-padding-y};
--#{$prefix}alert-margin-bottom: #{$alert-margin-bottom}; --#{$prefix}alert-margin-bottom: #{$alert-margin-bottom};
--#{$prefix}alert-border-color: #{color-transparent(var(--#{$prefix}alert-variant-color), 0.2, var(--#{$prefix}bg-surface))}; --#{$prefix}alert-border-color: #{color-transparent(var(--#{$prefix}alert-color), 0.2)};
--#{$prefix}alert-border-color: var(--#{$prefix}border-color);
--#{$prefix}alert-border: var(--#{$prefix}border-width) solid var(--#{$prefix}alert-border-color); --#{$prefix}alert-border: var(--#{$prefix}border-width) solid var(--#{$prefix}alert-border-color);
--#{$prefix}alert-border-radius: var(--#{$prefix}border-radius); --#{$prefix}alert-border-radius: var(--#{$prefix}border-radius);
--#{$prefix}alert-link-color: inherit; --#{$prefix}alert-link-color: inherit;
@@ -18,8 +16,6 @@
background-color: color-mix(in srgb, var(--#{$prefix}alert-bg), var(--#{$prefix}bg-surface)); background-color: color-mix(in srgb, var(--#{$prefix}alert-bg), var(--#{$prefix}bg-surface));
border-radius: var(--#{$prefix}alert-border-radius); border-radius: var(--#{$prefix}alert-border-radius);
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}alert-border-color); border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}alert-border-color);
box-shadow: var(--#{$prefix}box-shadow);
color: var(--#{$prefix}alert-color);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
gap: 1rem; gap: 1rem;
@@ -70,14 +66,15 @@
.btn-close { .btn-close {
position: absolute; position: absolute;
top: calc(var(--#{$prefix}alert-padding-x) / 2 - 1px); top: calc(var(--#{$prefix}alert-padding-x) / 2 - 1px);
inset-inline-end: calc(var(--#{$prefix}alert-padding-y) / 2 - 1px); inset-inline-end: calc(var(--#{$prefix}alert-padding-y) / 2 - 1px);
z-index: 1; z-index: 1;
padding: calc(var(--#{$prefix}alert-padding-y) * 1.25) var(--#{$prefix}alert-padding-x); padding: calc(var(--#{$prefix}alert-padding-y) * 1.25) var(--#{$prefix}alert-padding-x);
} }
} }
.alert-important { .alert-important {
background-color: var(--#{$prefix}alert-variant-color); border-color: var(--#{$prefix}alert-color);
background-color: var(--#{$prefix}alert-color);
color: var(--#{$prefix}white); color: var(--#{$prefix}white);
.alert-description { .alert-description {
@@ -96,6 +93,6 @@
@each $name, $color in $theme-colors { @each $name, $color in $theme-colors {
.alert-#{$name} { .alert-#{$name} {
--#{$prefix}alert-variant-color: var(--#{$prefix}#{$name}); --#{$prefix}alert-color: var(--#{$prefix}#{$name});
} }
} }

View File

@@ -9,7 +9,6 @@
--#{$prefix}avatar-font-size: #{$avatar-font-size}; --#{$prefix}avatar-font-size: #{$avatar-font-size};
--#{$prefix}avatar-icon-size: #{$avatar-icon-size}; --#{$prefix}avatar-icon-size: #{$avatar-icon-size};
--#{$prefix}avatar-brand-size: #{$avatar-brand-size}; --#{$prefix}avatar-brand-size: #{$avatar-brand-size};
--#{$prefix}avatar-border-radius: #{$avatar-border-radius};
position: relative; position: relative;
width: var(--#{$prefix}avatar-size); width: var(--#{$prefix}avatar-size);
height: var(--#{$prefix}avatar-size); height: var(--#{$prefix}avatar-size);
@@ -25,7 +24,7 @@
vertical-align: bottom; vertical-align: bottom;
user-select: none; user-select: none;
background: var(--#{$prefix}avatar-bg) no-repeat center/cover; background: var(--#{$prefix}avatar-bg) no-repeat center/cover;
border-radius: var(--#{$prefix}avatar-border-radius); border-radius: $avatar-border-radius;
box-shadow: var(--#{$prefix}avatar-box-shadow); box-shadow: var(--#{$prefix}avatar-box-shadow);
transition: transition:
color $transition-time, color $transition-time,
@@ -39,7 +38,7 @@
.badge { .badge {
position: absolute; position: absolute;
inset-inline-end: 0; inset-inline-end: 0;
bottom: 0; bottom: 0;
border-radius: $border-radius-pill; border-radius: $border-radius-pill;
box-shadow: 0 0 0 calc(var(--#{$prefix}avatar-status-size) / 4) $card-bg; box-shadow: 0 0 0 calc(var(--#{$prefix}avatar-status-size) / 4) $card-bg;
@@ -59,10 +58,6 @@
border-radius: $border-radius-pill; border-radius: $border-radius-pill;
} }
.avatar-square {
border-radius: var(--#{$prefix}border-radius);
}
@each $avatar-size, $size in $avatar-sizes { @each $avatar-size, $size in $avatar-sizes {
.avatar-#{$avatar-size} { .avatar-#{$avatar-size} {
--#{$prefix}avatar-size: #{map.get($size, size)}; --#{$prefix}avatar-size: #{map.get($size, size)};
@@ -71,14 +66,14 @@
--#{$prefix}avatar-icon-size: #{map.get($size, icon-size)}; --#{$prefix}avatar-icon-size: #{map.get($size, icon-size)};
--#{$prefix}avatar-brand-size: #{map.get($size, brand-size)}; --#{$prefix}avatar-brand-size: #{map.get($size, brand-size)};
@if map.has-key($size, border-radius) {
border-radius: map.get($size, border-radius);
}
.badge:empty { .badge:empty {
width: map.get($size, status-size); width: map.get($size, status-size);
height: map.get($size, status-size); height: map.get($size, status-size);
} }
&.avatar-square {
--#{$prefix}avatar-border-radius: #{map.get($size, border-radius)};
}
} }
} }
@@ -101,13 +96,10 @@
--#{$prefix}list-gap: 0; --#{$prefix}list-gap: 0;
.avatar { .avatar {
margin-inline-end: calc(#{$avatar-list-spacing} * var(--#{$prefix}avatar-size)) !important;
box-shadow: box-shadow:
var(--#{$prefix}avatar-box-shadow), var(--#{$prefix}avatar-box-shadow),
0 0 0 2px var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface)); 0 0 0 2px var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
&:not(:first-child) {
margin-inline-start: calc(#{$avatar-list-spacing} * var(--#{$prefix}avatar-size)) !important;
}
} }
} }

View File

@@ -76,15 +76,6 @@
// //
// Button color variations // Button color variations
// //
.btn-ghost {
--#{$prefix}btn-bg: transparent;
--#{$prefix}btn-border-color: transparent;
--#{$prefix}btn-box-shadow: none;
--#{$prefix}btn-hover-bg: var(--#{$prefix}bg-surface-secondary);
--#{$prefix}btn-hover-border-color: transparent;
--#{$prefix}btn-hover-color: var(--#{$prefix}body-color);
}
@each $color, $value in map.merge($theme-colors, $social-colors) { @each $color, $value in map.merge($theme-colors, $social-colors) {
.btn-#{$color} { .btn-#{$color} {
@if $color == 'dark' { @if $color == 'dark' {
@@ -123,6 +114,15 @@
--#{$prefix}btn-disabled-border-color: var(--#{$prefix}#{$color}); --#{$prefix}btn-disabled-border-color: var(--#{$prefix}#{$color});
} }
.btn-ghost {
--#{$prefix}btn-bg: transparent;
--#{$prefix}btn-border-color: transparent;
--#{$prefix}btn-box-shadow: none;
--#{$prefix}btn-hover-bg: var(--#{$prefix}bg-surface-secondary);
--#{$prefix}btn-hover-border-color: transparent;
--#{$prefix}btn-hover-color: var(--#{$prefix}body-color);
}
.btn-ghost-#{$color}, .btn-ghost-#{$color},
.btn-ghost.btn-#{$color} { .btn-ghost.btn-#{$color} {
--#{$prefix}btn-color: var(--#{$prefix}#{$color}); --#{$prefix}btn-color: var(--#{$prefix}#{$color});
@@ -207,10 +207,6 @@
@include elements-list; @include elements-list;
} }
.btn-list-center {
justify-content: center;
}
// //
// Button floating // Button floating
// //
@@ -250,7 +246,7 @@
position: absolute; position: absolute;
width: var(--#{$prefix}btn-icon-size); width: var(--#{$prefix}btn-icon-size);
height: var(--#{$prefix}btn-icon-size); height: var(--#{$prefix}btn-icon-size);
inset-inline-start: calc(50% - var(--#{$prefix}btn-icon-size) / 2); inset-inline-start: calc(50% - var(--#{$prefix}btn-icon-size) / 2);
top: calc(50% - var(--#{$prefix}btn-icon-size) / 2); top: calc(50% - var(--#{$prefix}btn-icon-size) / 2);
animation: spinner-border 0.75s linear infinite; animation: spinner-border 0.75s linear infinite;
} }

View File

@@ -77,8 +77,8 @@
&:before { &:before {
position: absolute; position: absolute;
top: 50%; top: 50%;
inset-inline-end: 0; inset-inline-end: 0;
inset-inline-start: 0; inset-inline-start: 0;
height: 1.4rem; height: 1.4rem;
content: ''; content: '';
background: rgba(var(--#{$prefix}primary-rgb), 0.1); background: rgba(var(--#{$prefix}primary-rgb), 0.1);
@@ -95,10 +95,10 @@
} }
&.range-start:before { &.range-start:before {
inset-inline-start: 50%; inset-inline-start: 50%;
} }
&.range-end:before { &.range-end:before {
inset-inline-end: 50%; inset-inline-end: 50%;
} }
} }

View File

@@ -1,21 +1,3 @@
@use 'sass:map';
@property --tblr-card-gradient-direction {
syntax: '<angle>';
inherits: true;
initial-value: 180deg;
}
@keyframes gradient-animation {
0% {
--#{$prefix}card-gradient-direction: 180deg;
}
100% {
--#{$prefix}card-gradient-direction: 540deg;
}
}
.card { .card {
@include transition(transform $transition-time ease-out, opacity $transition-time ease-out, box-shadow $transition-time ease-out); @include transition(transform $transition-time ease-out, opacity $transition-time ease-out, box-shadow $transition-time ease-out);
@@ -47,18 +29,6 @@
} }
} }
// Card dashed
.card-dashed {
border: var(--#{$prefix}border-width) dashed var(--#{$prefix}border-color);
}
// Card transparent
.card-transparent {
background: transparent;
border: var(--#{$prefix}border-width) dashed var(--#{$prefix}border-color);
box-shadow: none;
}
// Card stamp // Card stamp
.card-stamp { .card-stamp {
--#{$prefix}stamp-size: 7rem; --#{$prefix}stamp-size: 7rem;
@@ -167,8 +137,8 @@ Stacked card
&:after { &:after {
position: absolute; position: absolute;
top: calc(-1 * var(--#{$prefix}card-stacked-offset)); top: calc(-1 * var(--#{$prefix}card-stacked-offset));
inset-inline-end: var(--#{$prefix}card-stacked-offset); inset-inline-end: var(--#{$prefix}card-stacked-offset);
inset-inline-start: var(--#{$prefix}card-stacked-offset); inset-inline-start: var(--#{$prefix}card-stacked-offset);
height: var(--#{$prefix}card-stacked-offset); height: var(--#{$prefix}card-stacked-offset);
content: ''; content: '';
background: var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface)); background: var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
@@ -185,9 +155,9 @@ Stacked card
&:before { &:before {
position: absolute; position: absolute;
top: 0; top: 0;
inset-inline-end: 0; inset-inline-end: 0;
bottom: 0; bottom: 0;
inset-inline-start: 0; inset-inline-start: 0;
content: ''; content: '';
background: rgba($dark, 0.48); background: rgba($dark, 0.48);
} }
@@ -317,7 +287,7 @@ Stacked card
margin: 0 0 1rem; margin: 0 0 1rem;
font-size: $h3-font-size; font-size: $h3-font-size;
font-weight: var(--#{$prefix}font-weight-medium); font-weight: var(--#{$prefix}font-weight-medium);
color: var(--#{$prefix}heading-color); color: $headings-color;
line-height: 1.5rem; line-height: 1.5rem;
@at-root a#{&}:hover { @at-root a#{&}:hover {
@@ -441,15 +411,6 @@ Card table
td, td,
th { th {
&:first-child { &:first-child {
padding-left: $card-spacer-x;
border-left: 0;
border-top-left-radius: var(--#{$prefix}card-border-radius);
}
&:last-child {
padding-right: $card-spacer-x;
border-right: 0;
border-top-right-radius: var(--#{$prefix}card-border-radius);
padding-inline-start: $card-spacer-x; padding-inline-start: $card-spacer-x;
border-inline-start: 0; border-inline-start: 0;
} }
@@ -663,75 +624,3 @@ Card note
--#{$prefix}card-bg: #fff7dd; --#{$prefix}card-bg: #fff7dd;
--#{$prefix}card-border-color: #fff1c9; --#{$prefix}card-border-color: #fff1c9;
} }
/**
Card gradient
*/
.card-gradient {
--#{$prefix}card-gradient-direction: 180deg;
--#{$prefix}card-gradient-opacity: 86%;
--#{$prefix}card-gradient: var(--tblr-primary), var(--tblr-primary);
background:
radial-gradient(ellipse at center, var(--#{$prefix}card-bg) 0%, color-mix(in srgb, var(--#{$prefix}card-bg) 0%, transparent) 80%) border-box,
linear-gradient(var(--#{$prefix}card-gradient-direction), color-mix(in srgb, var(--#{$prefix}card-bg) var(--#{$prefix}card-gradient-opacity), transparent) 0%, var(--#{$prefix}card-bg) 40%) border-box,
linear-gradient(calc(270deg + var(--#{$prefix}card-gradient-direction)), var(--#{$prefix}card-gradient)) border-box;
}
@each $name, $color in map.merge($colors, $theme-colors) {
.card-gradient-#{$name} {
--#{$prefix}card-gradient: var(--tblr-#{$name}), var(--tblr-#{$name});
}
}
.card-gradient-rainbow {
--#{$prefix}card-gradient: #78c5d6, #459ba8, #79c267, #c5d647, #f5d63d, #f08b33, #e868a2, #be61a5;
}
.card-gradient-sun {
--#{$prefix}card-gradient: #fd1d1d, #fcb045;
}
.card-gradient-snow {
--#{$prefix}card-gradient: #333, #e9ecef;
}
.card-gradient-ocean {
--#{$prefix}card-gradient: #1cb5e0, #000851;
}
.card-gradient-mellow {
--#{$prefix}card-gradient: #f8ff00, #3ad59f;
}
.card-gradient-disco {
--#{$prefix}card-gradient: #fc466b, #3f5efb;
}
.card-gradient-psychedelic {
--#{$prefix}card-gradient: #fcc5e4, #fda34b, #ff7882, #c8699e, #7046aa, #0c1db8, #020f75;
}
.card-gradient-love {
--#{$prefix}card-gradient: #f235e6, #bc0707;
}
.card-gradient-gold {
--#{$prefix}card-gradient: #9d4100, #bf7122, #f59f00, #ffd700;
}
.card-gradient-animated {
animation: gradient-animation 15s linear infinite;
}
.card-gradient-bottom {
--#{$prefix}card-gradient-direction: 0deg;
}
.card-gradient-end {
--#{$prefix}card-gradient-direction: 270deg;
}
.card-gradient-start {
--#{$prefix}card-gradient-direction: 90deg;
}

View File

@@ -74,7 +74,7 @@
content: ''; content: '';
position: absolute; position: absolute;
top: -0.25rem; top: -0.25rem;
inset-inline-start: 0.75rem; inset-inline-start: 0.75rem;
display: block; display: block;
background: inherit; background: inherit;
width: 14px; width: 14px;
@@ -90,8 +90,8 @@
&.dropdown-menu-end { &.dropdown-menu-end {
&:before { &:before {
inset-inline-end: 0.75rem; inset-inline-end: 0.75rem;
inset-inline-start: auto; inset-inline-start: auto;
} }
} }
} }

View File

@@ -139,7 +139,7 @@ Form help
*/ */
.form-help { .form-help {
display: inline-flex; display: inline-flex;
font-weight: var(--#{$prefix}font-weight-semibold); font-weight: var(--#{$prefix}font-weight-bold);
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 1.125rem; width: 1.125rem;

View File

@@ -82,7 +82,7 @@
} }
&.active { &.active {
font-weight: var(--#{$prefix}font-weight-semibold); font-weight: var(--#{$prefix}font-weight-bold);
color: inherit; color: inherit;
background: $list-group-active-bg; background: $list-group-active-bg;

View File

@@ -9,7 +9,7 @@
&:after { &:after {
position: absolute; position: absolute;
top: 0; top: 0;
inset-inline-start: 0; inset-inline-start: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
content: ''; content: '';
@@ -33,8 +33,8 @@ Dimmer
.loader { .loader {
position: absolute; position: absolute;
top: 50%; top: 50%;
inset-inline-end: 0; inset-inline-end: 0;
inset-inline-start: 0; inset-inline-start: 0;
display: none; display: none;
margin: 0 auto; margin: 0 auto;
transform: translateY(-50%); transform: translateY(-50%);

View File

@@ -3,7 +3,7 @@
> .btn-close { > .btn-close {
position: absolute; position: absolute;
top: 0; top: 0;
inset-inline-end: 0; inset-inline-end: 0;
width: $modal-header-height; width: $modal-header-height;
height: $modal-header-height; height: $modal-header-height;
margin: 0; margin: 0;

View File

@@ -17,12 +17,12 @@
.nav-link.active, .nav-link.active,
.nav-item.show .nav-link { .nav-item.show .nav-link {
font-weight: var(--#{$prefix}font-weight-semibold); font-weight: var(--#{$prefix}nav-link-font-weight);
color: var(--#{$prefix}nav-link-active-color); color: var(--#{$prefix}nav-link-active-color);
} }
&.nav-pills { &.nav-pills {
margin: 0 calc(-1 * $nav-link-padding-x); margin: 0 calc(-1 * var(--#{$prefix}nav-link-padding-x));
} }
} }

View File

@@ -9,7 +9,7 @@
vertical-align: bottom; vertical-align: bottom;
font-style: normal; font-style: normal;
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1); box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
border-radius: var(--#{config.$prefix}border-radius); border-radius: 2px;
} }
@each $payment in config.$payment-providers { @each $payment in config.$payment-providers {

View File

@@ -1,13 +1,13 @@
@keyframes progress-indeterminate { @keyframes progress-indeterminate {
0% { 0% {
inset-inline-end: 100%; inset-inline-end: 100%;
inset-inline-start: -35%; inset-inline-start: -35%;
} }
100%, 100%,
60% { 60% {
inset-inline-end: -90%; inset-inline-end: -90%;
inset-inline-start: 100%; inset-inline-start: 100%;
} }
} }
@@ -64,7 +64,7 @@ Progress bar
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
inset-inline-start: 0; inset-inline-start: 0;
content: ''; content: '';
background-color: inherit; background-color: inherit;
will-change: left, right; will-change: left, right;
@@ -93,8 +93,6 @@ Progressbg
.progressbg-text { .progressbg-text {
position: relative; position: relative;
z-index: 1; z-index: 1;
display: flex;
align-items: center;
@include text-truncate; @include text-truncate;
} }

View File

@@ -9,7 +9,7 @@
z-index: 1; z-index: 1;
padding: 0.25rem 0.75rem; padding: 0.25rem 0.75rem;
font-size: $card-ribbon-font-size; font-size: $card-ribbon-font-size;
font-weight: var(--#{$prefix}font-weight-semibold); font-weight: var(--#{$prefix}font-weight-bold);
line-height: 1; line-height: 1;
color: $white; color: $white;
text-align: center; text-align: center;
@@ -25,7 +25,7 @@
&:before { &:before {
position: absolute; position: absolute;
inset-inline-end: 0; inset-inline-end: 0;
bottom: 100%; bottom: 100%;
width: 0; width: 0;
height: 0; height: 0;
@@ -65,7 +65,7 @@
&:before { &:before {
top: 0; top: 0;
inset-inline-end: 100%; inset-inline-end: 100%;
bottom: auto; bottom: auto;
border-color: inherit; border-color: inherit;
border-top-color: transparent; border-top-color: transparent;
@@ -73,13 +73,13 @@
} }
&.ribbon-start { &.ribbon-start {
inset-inline-end: auto; inset-inline-end: auto;
inset-inline-start: 0.75rem; inset-inline-start: 0.75rem;
&:before { &:before {
top: 0; top: 0;
inset-inline-end: 100%; inset-inline-end: 100%;
inset-inline-start: auto; inset-inline-start: auto;
} }
} }
} }
@@ -92,7 +92,7 @@
&:before { &:before {
top: auto; top: auto;
bottom: 100%; bottom: 100%;
inset-inline-start: 0; inset-inline-start: 0;
border-color: inherit; border-color: inherit;
border-top-color: transparent; border-top-color: transparent;
border-inline-start-color: transparent; border-inline-start-color: transparent;
@@ -111,7 +111,7 @@
&:after { &:after {
position: absolute; position: absolute;
top: 0; top: 0;
inset-inline-end: 100%; inset-inline-end: 100%;
display: block; display: block;
width: 0; width: 0;
height: 0; height: 0;
@@ -127,8 +127,8 @@
padding-inline-end: 0.5rem; padding-inline-end: 0.5rem;
&:after { &:after {
inset-inline-end: auto; inset-inline-end: auto;
inset-inline-start: 100%; inset-inline-start: 100%;
border-inline-end-color: transparent; border-inline-end-color: transparent;
border-inline-end-width: 0.5rem; border-inline-end-width: 0.5rem;
@@ -144,8 +144,8 @@
&:after { &:after {
top: 100%; top: 100%;
inset-inline-end: 0; inset-inline-end: 0;
inset-inline-start: 0; inset-inline-start: 0;
border-color: inherit; border-color: inherit;
border-width: 1rem; border-width: 1rem;
border-top-width: 0; border-top-width: 0;

View File

@@ -1,5 +1,3 @@
@use 'sass:map';
@keyframes status-pulsate-main { @keyframes status-pulsate-main {
40% { 40% {
transform: scale(1.25, 1.25); transform: scale(1.25, 1.25);
@@ -76,10 +74,10 @@
color: var(--#{$prefix}body-color) !important; color: var(--#{$prefix}body-color) !important;
} }
@each $name, $color in map.merge($theme-colors, $social-colors) { @each $name, $color in $theme-colors {
.status-#{$name} { .status-#{$name} {
--#{$prefix}status-color: var(--#{$prefix}#{$name}); --#{$prefix}status-color: #{$color};
--#{$prefix}status-color-rgb: var(--#{$prefix}#{$name}-rgb); --#{$prefix}status-color-rgb: #{to-rgb($color)};
} }
} }

View File

@@ -52,7 +52,7 @@
&:not(:last-child):after { &:not(:last-child):after {
position: absolute; position: absolute;
inset-inline-start: 50%; inset-inline-start: 50%;
width: 100%; width: 100%;
content: ''; content: '';
transform: translateY(-50%); transform: translateY(-50%);
@@ -67,7 +67,7 @@
content: ''; content: '';
position: absolute; position: absolute;
top: 0; top: 0;
inset-inline-start: 50%; inset-inline-start: 50%;
z-index: 1; z-index: 1;
box-sizing: content-box; box-sizing: content-box;
display: flex; display: flex;
@@ -81,7 +81,7 @@
} }
&.active { &.active {
font-weight: var(--#{$prefix}font-weight-semibold); font-weight: var(--#{$prefix}font-weight-bold);
&:after { &:after {
background: var(--#{$prefix}steps-inactive-color); background: var(--#{$prefix}steps-inactive-color);
@@ -137,7 +137,7 @@
&:before { &:before {
top: var(--#{$prefix}steps-dot-offset); top: var(--#{$prefix}steps-dot-offset);
inset-inline-start: 0; inset-inline-start: 0;
transform: translate(0, 0); transform: translate(0, 0);
} }
@@ -147,7 +147,7 @@
content: ''; content: '';
transform: translateX(-50%); transform: translateX(-50%);
top: var(--#{$prefix}steps-dot-offset); top: var(--#{$prefix}steps-dot-offset);
inset-inline-start: calc(var(--#{$prefix}steps-dot-size) * 0.5); inset-inline-start: calc(var(--#{$prefix}steps-dot-size) * 0.5);
width: var(--#{$prefix}steps-border-width); width: var(--#{$prefix}steps-border-width);
height: calc(100% + 1rem); height: calc(100% + 1rem);
} }

View File

@@ -39,7 +39,7 @@
.switch-icon-b { .switch-icon-b {
position: absolute; position: absolute;
top: 0; top: 0;
inset-inline-start: 0; inset-inline-start: 0;
opacity: 0; opacity: 0;
} }

View File

@@ -1,6 +1,4 @@
.table { .table {
font: inherit;
thead { thead {
th { th {
background: $table-th-bg; background: $table-th-bg;

View File

@@ -21,7 +21,7 @@
content: ''; content: '';
position: absolute; position: absolute;
top: var(--#{$prefix}timeline-icon-size); top: var(--#{$prefix}timeline-icon-size);
inset-inline-start: calc(var(--#{$prefix}timeline-icon-size) / 2); inset-inline-start: calc(var(--#{$prefix}timeline-icon-size) / 2);
bottom: calc(-1 * var(--#{$prefix}page-padding)); bottom: calc(-1 * var(--#{$prefix}page-padding));
width: var(--#{$prefix}border-width); width: var(--#{$prefix}border-width);
background-color: var(--#{$prefix}border-color); background-color: var(--#{$prefix}border-color);

View File

@@ -122,7 +122,7 @@ pre {
background: $pre-bg; background: $pre-bg;
color: $pre-color; color: $pre-color;
border-radius: var(--#{$prefix}border-radius); border-radius: var(--#{$prefix}border-radius);
line-height: $line-height-base; line-height: $code-line-height;
@include scrollbar; @include scrollbar;
@@ -307,7 +307,7 @@ $text-variants: (
border-radius: var(--#{$prefix}border-radius); border-radius: var(--#{$prefix}border-radius);
line-height: calc(var(--#{$prefix}steps-item-size) - 2px); line-height: calc(var(--#{$prefix}steps-item-size) - 2px);
font-size: var(--#{$prefix}font-size-h4); font-size: var(--#{$prefix}font-size-h4);
font-weight: var(--#{$prefix}font-weight-semibold); font-weight: var(--#{$prefix}font-weight-bold);
} }
} }

View File

@@ -83,3 +83,8 @@ Form switch
padding-top: 0.125rem; padding-top: 0.125rem;
} }
} }
/*Correction of Form-check position*/
.form-check-input:checked {
border: none;
}

View File

@@ -27,7 +27,7 @@ Color Input
&:before { &:before {
position: absolute; position: absolute;
top: 0; top: 0;
inset-inline-start: 0; inset-inline-start: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
content: ''; content: '';

View File

@@ -31,7 +31,7 @@ Icon input
font-size: 1.2em; font-size: 1.2em;
&:last-child { &:last-child {
inset-inline-end: 0; inset-inline-end: 0;
inset-inline-start: auto; inset-inline-start: auto;
} }
} }

View File

@@ -34,7 +34,7 @@ Image check
&:before { &:before {
position: absolute; position: absolute;
top: 0.25rem; top: 0.25rem;
inset-inline-start: 0.25rem; inset-inline-start: 0.25rem;
z-index: 1; z-index: 1;
display: block; display: block;
width: $form-check-input-width; width: $form-check-input-width;

View File

@@ -10,7 +10,7 @@
background: transparent !important; background: transparent !important;
border: 0 !important; border: 0 !important;
margin: 0 !important; margin: 0 !important;
font-weight: var(--#{$prefix}font-weight-semibold); font-weight: var(--#{$prefix}font-weight-bold);
padding: 0.25rem 0.5rem !important; padding: 0.25rem 0.5rem !important;
} }

View File

@@ -53,8 +53,8 @@ input.clr-color {
button { button {
width: 1.5rem; width: 1.5rem;
height: 1.5rem; height: 1.5rem;
inset-inline-start: 6px; inset-inline-start: 6px;
inset-inline-end: auto; inset-inline-end: auto;
border-radius: var(--#{$prefix}border-radius); border-radius: var(--#{$prefix}border-radius);
&:after { &:after {

View File

@@ -36,7 +36,7 @@
} }
.fc-event-time { .fc-event-time {
font-weight: var(--#{$prefix}font-weight-semibold) !important; font-weight: var(--#{$prefix}font-weight-bold) !important;
} }
.fc-col-header-cell-cushion { .fc-col-header-cell-cushion {

View File

@@ -1,6 +1,8 @@
--- ---
title: Tabler Emails title: Tabler Emails
menu-title: Emails
seoTitle: Tabler Emails - premium email templates seoTitle: Tabler Emails - premium email templates
icon: mail
order: 4 order: 4
description: Customizable email templates for over 90 clients and devices. description: Customizable email templates for over 90 clients and devices.
summary: Tabler Emails is a set of 80 eye-catching, customizable HTML templates. They are compatible with over 90 email clients and devices. summary: Tabler Emails is a set of 80 eye-catching, customizable HTML templates. They are compatible with over 90 email clients and devices.

View File

@@ -1,6 +1,8 @@
--- ---
title: Tabler Icons title: Tabler Icons
menu-title: Icons
summary: Tabler Icons is a powerful and versatile icon library that offers a huge collection of high quality icons suitable for a wide range of applications. With its clean and modern aesthetic, extensive customization options, and user-friendly website and plugins, Tabler Icons is an excellent resource for designers and developers looking to enhance their projects with high-quality icons. summary: Tabler Icons is a powerful and versatile icon library that offers a huge collection of high quality icons suitable for a wide range of applications. With its clean and modern aesthetic, extensive customization options, and user-friendly website and plugins, Tabler Icons is an excellent resource for designers and developers looking to enhance their projects with high-quality icons.
icon: ghost
order: 2 order: 2
description: Over 5000 pixel-perfect icons for web design and development description: Over 5000 pixel-perfect icons for web design and development
--- ---
@@ -9,5 +11,5 @@ description: Over 5000 pixel-perfect icons for web design and development
Tabler Icons is a comprehensive icon library that features {{ iconsCount }} high-quality icons. These icons are designed with a clean and modern aesthetic, making them suitable for a wide range of applications. Tabler Icons is a comprehensive icon library that features {{ iconsCount }} high-quality icons. These icons are designed with a clean and modern aesthetic, making them suitable for a wide range of applications.
To use Tabler Icons, you can visit their website at https://tabler-icons.io. From there, you can browse the full collection of icons by category or search for a specific icon using the search bar. Once you have found an icon you like, you can download it in various file formats, including SVG, PNG, and Icon Font. To use Tabler Icons, you can visit their website at [Tabler Icons Official Website]({{ site.icons.link }}). From there, you can browse the full collection of icons by category or search for a specific icon using the search bar. Once you have found an icon you like, you can download it in various file formats, including SVG, PNG, and Icon Font.

View File

@@ -1,6 +1,8 @@
--- ---
title: Tabler Illustrations title: Tabler Illustrations
menu-title: Illustrations
order: 3 order: 3
icon: paint
description: Customizable illustrations for modern web and mobile designs. description: Customizable illustrations for modern web and mobile designs.
summary: Tabler Illustrations is a collection of customizable SVG illustrations for your web project. Explore our library of illustrations to enhance your web development experience. summary: Tabler Illustrations is a collection of customizable SVG illustrations for your web project. Explore our library of illustrations to enhance your web development experience.
--- ---

View File

@@ -10,11 +10,10 @@ To create an offcanvas, add the `.offcanvas` class to a container element. You c
{% capture html -%} {% capture html -%}
<div <div
class="offcanvas offcanvas-start" class="offcanvas offcanvas-start show"
tabindex="-1" tabindex="-1"
id="offcanvas" id="offcanvas"
aria-labelledby="offcanvasLabel" aria-labelledby="offcanvasLabel"
data-bs-scroll="true"
> >
<div class="offcanvas-body"> <div class="offcanvas-body">
Content for the offcanvas goes here. You can place just about any Tabler component or custom Content for the offcanvas goes here. You can place just about any Tabler component or custom
@@ -30,12 +29,11 @@ The offcanvas component is used to display a cookies banner. It is a great way t
{% capture html -%} {% capture html -%}
<div <div
class="offcanvas offcanvas-bottom h-auto" class="offcanvas offcanvas-bottom h-auto show"
tabindex="-1" tabindex="-1"
id="offcanvasBottom" id="offcanvasBottom"
aria-modal="true" aria-modal="true"
role="dialog" role="dialog"
data-bs-scroll="true"
> >
<div class="offcanvas-body"> <div class="offcanvas-body">
<div class="container"> <div class="container">
@@ -61,11 +59,3 @@ The offcanvas component is used to display a cookies banner. It is a great way t
</div> </div>
{%- endcapture %} {%- endcapture %}
{% include "docs/example.html" html=html raw %} {% include "docs/example.html" html=html raw %}
<script>
document.addEventListener('DOMContentLoaded', function() {
document.querySelectorAll('[data-bs-scroll="true"]').forEach(el => {
new bootstrap.Offcanvas(el, { scroll: true }).show();
});
});
</script>

View File

@@ -1,6 +1,8 @@
--- ---
title: Tabler UI title: Tabler UI
menu-title: Admin Template
order: 1 order: 1
icon: layout
description: Free and open source web application UI kit based on Bootstrap description: Free and open source web application UI kit based on Bootstrap
summary: Tabler UI is a carefully crafted collection of modern and responsive user interface components. Built on top of Bootstrap, it helps developers create stunning and functional web applications quickly and efficiently. summary: Tabler UI is a carefully crafted collection of modern and responsive user interface components. Built on top of Bootstrap, it helps developers create stunning and functional web applications quickly and efficiently.
--- ---

View File

@@ -274,9 +274,9 @@ export default function (eleventyConfig) {
eleventyConfig.addGlobalData("posthogHost", process.env.POSTHOG_HOST || "https://us.i.posthog.com"); eleventyConfig.addGlobalData("posthogHost", process.env.POSTHOG_HOST || "https://us.i.posthog.com");
const data = { const data = {
iconsCount: () => 123, iconsCount: () => 5963,
emailsCount: () => 123, emailsCount: () => 80,
illustrationsCount: () => 123 illustrationsCount: () => 105
}; };
for (const [key, value] of Object.entries(data)) { for (const [key, value] of Object.entries(data)) {

View File

@@ -4,8 +4,7 @@
"description": "", "description": "",
"private": true, "private": true,
"scripts": { "scripts": {
"build": "pnpm run clean && pnpm run build-assets && pnpm run html", "build": "pnpm run clean && pnpm run js && pnpm run css && pnpm run html ",
"build-assets": "concurrently \"pnpm run js\" \"pnpm run css\"",
"html": "eleventy", "html": "eleventy",
"js": "pnpm run js-compile && pnpm run js-minify", "js": "pnpm run js-compile && pnpm run js-minify",
"js-compile": "rollup --config .build/rollup.config.mjs --sourcemap", "js-compile": "rollup --config .build/rollup.config.mjs --sourcemap",

View File

@@ -2,11 +2,13 @@
:root { :root {
--docsearch-primary-color: var(--tblr-primary); --docsearch-primary-color: var(--tblr-primary);
--docsearch-searchbox-background: var(--tblr-bg-surface); --docsearch-searchbox-background: var(--tblr-bg-surface-secondary);
--docsearch-searchbox-focus-background: var(--tblr-bg-surface); --docsearch-searchbox-focus-background: var(--tblr-bg-surface-secondary);
--docsearch-text-color: var(--tblr-body-text); --docsearch-text-color: var(--tblr-body-text);
--docsearch-key-shadow: 0 0 0 1px var(--tblr-border-color); --docsearch-key-shadow: none;
--docsearch-key-gradient: var(--tblr-bg-surface-secondary); --docsearch-key-gradient: var(--tblr-bg-surface-secondary);
--docsearch-searchbox-shadow: 0 0 0 1px var(--tblr-border-color);
--docsearch-searchbox-focus-background: var(--tblr-bg-surface-tertiary);
} }
.col-docs { .col-docs {
@@ -24,6 +26,11 @@
box-shadow: 0 0 0 1px var(--tblr-border-color); box-shadow: 0 0 0 1px var(--tblr-border-color);
font-weight: var(--tblr-font-weight-normal); font-weight: var(--tblr-font-weight-normal);
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
border-radius: var(--tblr-border-radius);
}
.DocSearch-Button-Placeholder {
font-size: var(--tblr-font-size);
} }
.DocSearch-SearchBar { .DocSearch-SearchBar {
@@ -32,6 +39,11 @@
background-color: var(--tblr-bg-surface) !important; background-color: var(--tblr-bg-surface) !important;
} }
.DocSearch-Search-Icon {
width: 1rem;
height: 1rem;
}
.DocSearch-Hit-source { .DocSearch-Hit-source {
background: none !important; background: none !important;
} }
@@ -100,8 +112,20 @@
box-shadow: none !important; box-shadow: none !important;
} }
.DocSearch-Button-Keys {
min-width: 0;
gap: .25rem;
margin-right: .25rem;
}
.DocSearch-Button-Key { .DocSearch-Button-Key {
top: 0; top: 0;
box-shadow: none;
background: none;
padding: 0;
margin: 0;
width: auto;
font-size: var(--tblr-font-size);
} }
.DocSearch-Container { .DocSearch-Container {
@@ -114,13 +138,13 @@
} }
} }
.example > .modal, .example>.modal,
.example > .offcanvas { .example>.offcanvas {
display: block !important; display: block !important;
position: relative !important; position: relative !important;
} }
.example > .offcanvas-backdrop { .example>.offcanvas-backdrop {
position: absolute !important; position: absolute !important;
} }

View File

@@ -1,5 +1,12 @@
{ {
"trailingSlash": false, "trailingSlash": false,
"redirects": [
{
"source": "/",
"destination": "/ui",
"permanent": false
}
],
"rewrites": [ "rewrites": [
{ {
"source": "/stats/js/script.js", "source": "/stats/js/script.js",
@@ -17,6 +24,7 @@
"source": "/eat/:path(.*)", "source": "/eat/:path(.*)",
"destination": "https://eu.i.posthog.com/:path*" "destination": "https://eu.i.posthog.com/:path*"
}, },
{ {
"source": "/(.*)", "source": "/(.*)",
"destination": "/error-404.html" "destination": "/error-404.html"

151
pnpm-lock.yaml generated
View File

@@ -108,6 +108,9 @@ importers:
bootstrap: bootstrap:
specifier: 5.3.8 specifier: 5.3.8
version: 5.3.8(@popperjs/core@2.11.8) version: 5.3.8(@popperjs/core@2.11.8)
geist:
specifier: ^1.5.1
version: 1.5.1(next@16.0.4(@babel/core@7.27.1)(@playwright/test@1.53.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(sass@1.89.2))
devDependencies: devDependencies:
'@hotwired/turbo': '@hotwired/turbo':
specifier: ^8.0.18 specifier: ^8.0.18
@@ -116,8 +119,8 @@ importers:
specifier: ^0.25.0 specifier: ^0.25.0
version: 0.25.0 version: 0.25.0
apexcharts: apexcharts:
specifier: ^5.3.6 specifier: 3.54.1
version: 5.3.6 version: 3.54.1
autosize: autosize:
specifier: ^6.0.1 specifier: ^6.0.1
version: 6.0.1 version: 6.0.1
@@ -130,9 +133,6 @@ importers:
countup.js: countup.js:
specifier: ^2.9.0 specifier: ^2.9.0
version: 2.9.0 version: 2.9.0
driver.js:
specifier: ^1.0.0
version: 1.4.0
dropzone: dropzone:
specifier: ^6.0.0-beta.2 specifier: ^6.0.0-beta.2
version: 6.0.0-beta.2 version: 6.0.0-beta.2
@@ -148,9 +148,6 @@ importers:
fullcalendar: fullcalendar:
specifier: ^6.1.19 specifier: ^6.1.19
version: 6.1.19 version: 6.1.19
geist:
specifier: ^1.5.1
version: 1.5.1(next@16.0.4(@babel/core@7.27.1)(@playwright/test@1.53.2)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)(sass@1.89.2))
hugerte: hugerte:
specifier: ^1.0.9 specifier: ^1.0.9
version: 1.0.9 version: 1.0.9
@@ -1268,31 +1265,6 @@ packages:
resolution: {integrity: sha512-doH1gimEu3A46VX6aVxpHTeHrytJAG6HgdxntYnCFiIFHEM/ZGpG8KiZGBChchjQmG0XFIBL552kBTjVcMZXwQ==} resolution: {integrity: sha512-doH1gimEu3A46VX6aVxpHTeHrytJAG6HgdxntYnCFiIFHEM/ZGpG8KiZGBChchjQmG0XFIBL552kBTjVcMZXwQ==}
engines: {node: '>=12'} engines: {node: '>=12'}
'@svgdotjs/svg.draggable.js@3.0.6':
resolution: {integrity: sha512-7iJFm9lL3C40HQcqzEfezK2l+dW2CpoVY3b77KQGqc8GXWa6LhhmX5Ckv7alQfUXBuZbjpICZ+Dvq1czlGx7gA==}
peerDependencies:
'@svgdotjs/svg.js': ^3.2.4
'@svgdotjs/svg.filter.js@3.0.9':
resolution: {integrity: sha512-/69XMRCDoam2HgC4ldHIaDgeQf1ViHIsa0Ld4uWgiXtZ+E24DWHe/9Ib6kbNiZ7WRIdlVokUDR1Fg0kjIpkfbw==}
engines: {node: '>= 0.8.0'}
'@svgdotjs/svg.js@3.2.5':
resolution: {integrity: sha512-/VNHWYhNu+BS7ktbYoVGrCmsXDh+chFMaONMwGNdIBcFHrWqk2jY8fNyr3DLdtQUIalvkPfM554ZSFa3dm3nxQ==}
'@svgdotjs/svg.resize.js@2.0.5':
resolution: {integrity: sha512-4heRW4B1QrJeENfi7326lUPYBCevj78FJs8kfeDxn5st0IYPIRXoTtOSYvTzFWgaWWXd3YCDE6ao4fmv91RthA==}
engines: {node: '>= 14.18'}
peerDependencies:
'@svgdotjs/svg.js': ^3.2.4
'@svgdotjs/svg.select.js': ^4.0.1
'@svgdotjs/svg.select.js@4.0.3':
resolution: {integrity: sha512-qkMgso1sd2hXKd1FZ1weO7ANq12sNmQJeGDjs46QwDVsxSRcHmvWKL2NDF7Yimpwf3sl5esOLkPqtV2bQ3v/Jg==}
engines: {node: '>= 14.18'}
peerDependencies:
'@svgdotjs/svg.js': ^3.2.4
'@swc/helpers@0.2.14': '@swc/helpers@0.2.14':
resolution: {integrity: sha512-wpCQMhf5p5GhNg2MmGKXzUNwxe7zRiCsmqYsamez2beP7mKPCSiu+BjZcdN95yYSzO857kr0VfQewmGpS77nqA==} resolution: {integrity: sha512-wpCQMhf5p5GhNg2MmGKXzUNwxe7zRiCsmqYsamez2beP7mKPCSiu+BjZcdN95yYSzO857kr0VfQewmGpS77nqA==}
@@ -1388,8 +1360,8 @@ packages:
resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==} resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
engines: {node: '>= 8'} engines: {node: '>= 8'}
apexcharts@5.3.6: apexcharts@3.54.1:
resolution: {integrity: sha512-sVEPw+J0Gp0IHQabKu8cfdsxlfME0e36Wid7RIaPclGM2OUt+O7O4+6mfAmTUYhy5bDk8cNHzEhPfVtLCIXEJA==} resolution: {integrity: sha512-E4et0h/J1U3r3EwS/WlqJCQIbepKbp6wGUmaAwJOMjHUP4Ci0gxanLa7FR3okx6p9coi4st6J853/Cb1NP0vpA==}
argparse@1.0.10: argparse@1.0.10:
resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==} resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==}
@@ -1795,9 +1767,6 @@ packages:
resolution: {integrity: sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g==} resolution: {integrity: sha512-IrPdXQsk2BbzvCBGBOTmmSH5SodmqZNt4ERAZDmW4CT+tL8VtvinqywuANaFu4bOMWki16nqf0e4oC0QIaDr/g==}
engines: {node: '>=10'} engines: {node: '>=10'}
driver.js@1.4.0:
resolution: {integrity: sha512-Gm64jm6PmcU+si21sQhBrTAM1JvUrR0QhNmjkprNLxohOBzul9+pNHXgQaT9lW84gwg9GMLB3NZGuGolsz5uew==}
dropzone@6.0.0-beta.2: dropzone@6.0.0-beta.2:
resolution: {integrity: sha512-k44yLuFFhRk53M8zP71FaaNzJYIzr99SKmpbO/oZKNslDjNXQsBTdfLs+iONd0U0L94zzlFzRnFdqbLcs7h9fQ==} resolution: {integrity: sha512-k44yLuFFhRk53M8zP71FaaNzJYIzr99SKmpbO/oZKNslDjNXQsBTdfLs+iONd0U0L94zzlFzRnFdqbLcs7h9fQ==}
@@ -1825,8 +1794,8 @@ packages:
electron-to-chromium@1.5.149: electron-to-chromium@1.5.149:
resolution: {integrity: sha512-UyiO82eb9dVOx8YO3ajDf9jz2kKyt98DEITRdeLPstOEuTlLzDA4Gyq5K9he71TQziU5jUVu2OAu5N48HmQiyQ==} resolution: {integrity: sha512-UyiO82eb9dVOx8YO3ajDf9jz2kKyt98DEITRdeLPstOEuTlLzDA4Gyq5K9he71TQziU5jUVu2OAu5N48HmQiyQ==}
electron-to-chromium@1.5.262: electron-to-chromium@1.5.259:
resolution: {integrity: sha512-NlAsMteRHek05jRUxUR0a5jpjYq9ykk6+kO0yRaMi5moe7u0fVIOeQ3Y30A8dIiWFBNUoQGi1ljb1i5VtS9WQQ==} resolution: {integrity: sha512-I+oLXgpEJzD6Cwuwt1gYjxsDmu/S/Kd41mmLA3O+/uH2pFRO/DvOjUyGozL8j3KeLV6WyZ7ssPwELMsXCcsJAQ==}
emoji-regex@8.0.0: emoji-regex@8.0.0:
resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==} resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
@@ -3294,6 +3263,37 @@ packages:
resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==} resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
engines: {node: '>= 0.4'} engines: {node: '>= 0.4'}
svg.draggable.js@2.2.2:
resolution: {integrity: sha512-JzNHBc2fLQMzYCZ90KZHN2ohXL0BQJGQimK1kGk6AvSeibuKcIdDX9Kr0dT9+UJ5O8nYA0RB839Lhvk4CY4MZw==}
engines: {node: '>= 0.8.0'}
svg.easing.js@2.0.0:
resolution: {integrity: sha512-//ctPdJMGy22YoYGV+3HEfHbm6/69LJUTAqI2/5qBvaNHZ9uUFVC82B0Pl299HzgH13rKrBgi4+XyXXyVWWthA==}
engines: {node: '>= 0.8.0'}
svg.filter.js@2.0.2:
resolution: {integrity: sha512-xkGBwU+dKBzqg5PtilaTb0EYPqPfJ9Q6saVldX+5vCRy31P6TlRCP3U9NxH3HEufkKkpNgdTLBJnmhDHeTqAkw==}
engines: {node: '>= 0.8.0'}
svg.js@2.7.1:
resolution: {integrity: sha512-ycbxpizEQktk3FYvn/8BH+6/EuWXg7ZpQREJvgacqn46gIddG24tNNe4Son6omdXCnSOaApnpZw6MPCBA1dODA==}
svg.pathmorphing.js@0.1.3:
resolution: {integrity: sha512-49HWI9X4XQR/JG1qXkSDV8xViuTLIWm/B/7YuQELV5KMOPtXjiwH4XPJvr/ghEDibmLQ9Oc22dpWpG0vUDDNww==}
engines: {node: '>= 0.8.0'}
svg.resize.js@1.4.3:
resolution: {integrity: sha512-9k5sXJuPKp+mVzXNvxz7U0uC9oVMQrrf7cFsETznzUDDm0x8+77dtZkWdMfRlmbkEEYvUn9btKuZ3n41oNA+uw==}
engines: {node: '>= 0.8.0'}
svg.select.js@2.1.2:
resolution: {integrity: sha512-tH6ABEyJsAOVAhwcCjF8mw4crjXSI1aa7j2VQR8ZuJ37H2MBUbyeqYr5nEO7sSN3cy9AR9DUwNg0t/962HlDbQ==}
engines: {node: '>= 0.8.0'}
svg.select.js@3.0.1:
resolution: {integrity: sha512-h5IS/hKkuVCbKSieR9uQCj9w+zLHoPh+ce19bBYyqF53g6mnPB8sAtIbe1s9dh2S2fCmYX2xel1Ln3PJBbK4kw==}
engines: {node: '>= 0.8.0'}
term-size@2.2.1: term-size@2.2.1:
resolution: {integrity: sha512-wK0Ri4fOGjv/XPy8SBHZChl8CM7uMc5VML7SqiQ0zG7+J5Vr+RMQDoHa2CNT6KHUnTGIXH34UDMkPzAUyapBZg==} resolution: {integrity: sha512-wK0Ri4fOGjv/XPy8SBHZChl8CM7uMc5VML7SqiQ0zG7+J5Vr+RMQDoHa2CNT6KHUnTGIXH34UDMkPzAUyapBZg==}
engines: {node: '>=8'} engines: {node: '>=8'}
@@ -4695,25 +4695,6 @@ snapshots:
dependencies: dependencies:
escape-string-regexp: 5.0.0 escape-string-regexp: 5.0.0
'@svgdotjs/svg.draggable.js@3.0.6(@svgdotjs/svg.js@3.2.5)':
dependencies:
'@svgdotjs/svg.js': 3.2.5
'@svgdotjs/svg.filter.js@3.0.9':
dependencies:
'@svgdotjs/svg.js': 3.2.5
'@svgdotjs/svg.js@3.2.5': {}
'@svgdotjs/svg.resize.js@2.0.5(@svgdotjs/svg.js@3.2.5)(@svgdotjs/svg.select.js@4.0.3(@svgdotjs/svg.js@3.2.5))':
dependencies:
'@svgdotjs/svg.js': 3.2.5
'@svgdotjs/svg.select.js': 4.0.3(@svgdotjs/svg.js@3.2.5)
'@svgdotjs/svg.select.js@4.0.3(@svgdotjs/svg.js@3.2.5)':
dependencies:
'@svgdotjs/svg.js': 3.2.5
'@swc/helpers@0.2.14': {} '@swc/helpers@0.2.14': {}
'@swc/helpers@0.5.15': '@swc/helpers@0.5.15':
@@ -4800,14 +4781,15 @@ snapshots:
normalize-path: 3.0.0 normalize-path: 3.0.0
picomatch: 2.3.1 picomatch: 2.3.1
apexcharts@5.3.6: apexcharts@3.54.1:
dependencies: dependencies:
'@svgdotjs/svg.draggable.js': 3.0.6(@svgdotjs/svg.js@3.2.5)
'@svgdotjs/svg.filter.js': 3.0.9
'@svgdotjs/svg.js': 3.2.5
'@svgdotjs/svg.resize.js': 2.0.5(@svgdotjs/svg.js@3.2.5)(@svgdotjs/svg.select.js@4.0.3(@svgdotjs/svg.js@3.2.5))
'@svgdotjs/svg.select.js': 4.0.3(@svgdotjs/svg.js@3.2.5)
'@yr/monotone-cubic-spline': 1.0.3 '@yr/monotone-cubic-spline': 1.0.3
svg.draggable.js: 2.2.2
svg.easing.js: 2.0.0
svg.filter.js: 2.0.2
svg.pathmorphing.js: 0.1.3
svg.resize.js: 1.4.3
svg.select.js: 3.0.1
argparse@1.0.10: argparse@1.0.10:
dependencies: dependencies:
@@ -4924,7 +4906,7 @@ snapshots:
dependencies: dependencies:
baseline-browser-mapping: 2.8.31 baseline-browser-mapping: 2.8.31
caniuse-lite: 1.0.30001757 caniuse-lite: 1.0.30001757
electron-to-chromium: 1.5.262 electron-to-chromium: 1.5.259
node-releases: 2.0.27 node-releases: 2.0.27
update-browserslist-db: 1.1.4(browserslist@4.28.0) update-browserslist-db: 1.1.4(browserslist@4.28.0)
@@ -5197,8 +5179,6 @@ snapshots:
dotenv@8.6.0: {} dotenv@8.6.0: {}
driver.js@1.4.0: {}
dropzone@6.0.0-beta.2: dropzone@6.0.0-beta.2:
dependencies: dependencies:
'@swc/helpers': 0.2.14 '@swc/helpers': 0.2.14
@@ -5230,7 +5210,7 @@ snapshots:
electron-to-chromium@1.5.149: {} electron-to-chromium@1.5.149: {}
electron-to-chromium@1.5.262: {} electron-to-chromium@1.5.259: {}
emoji-regex@8.0.0: {} emoji-regex@8.0.0: {}
@@ -5962,7 +5942,7 @@ snapshots:
dependencies: dependencies:
'@next/env': 16.0.4 '@next/env': 16.0.4
'@swc/helpers': 0.5.15 '@swc/helpers': 0.5.15
caniuse-lite: 1.0.30001717 caniuse-lite: 1.0.30001757
postcss: 8.4.31 postcss: 8.4.31
react: 19.2.0 react: 19.2.0
react-dom: 19.2.0(react@19.2.0) react-dom: 19.2.0(react@19.2.0)
@@ -6709,6 +6689,37 @@ snapshots:
supports-preserve-symlinks-flag@1.0.0: {} supports-preserve-symlinks-flag@1.0.0: {}
svg.draggable.js@2.2.2:
dependencies:
svg.js: 2.7.1
svg.easing.js@2.0.0:
dependencies:
svg.js: 2.7.1
svg.filter.js@2.0.2:
dependencies:
svg.js: 2.7.1
svg.js@2.7.1: {}
svg.pathmorphing.js@0.1.3:
dependencies:
svg.js: 2.7.1
svg.resize.js@1.4.3:
dependencies:
svg.js: 2.7.1
svg.select.js: 2.1.2
svg.select.js@2.1.2:
dependencies:
svg.js: 2.7.1
svg.select.js@3.0.1:
dependencies:
svg.js: 2.7.1
term-size@2.2.1: {} term-size@2.2.1: {}
terser@5.44.0: terser@5.44.0:

View File

@@ -11,7 +11,6 @@ const illustrations = sync(join(__dirname, `../../shared/static/illustrations/li
.map((file) => { .map((file) => {
return basename(file, '.png') return basename(file, '.png')
}) })
.sort((a, b) => a.localeCompare(b));
writeFileSync( writeFileSync(
join(__dirname, `../../shared/data/illustrations.json`), join(__dirname, `../../shared/data/illustrations.json`),

View File

@@ -3,8 +3,7 @@
"version": "1.4.0", "version": "1.4.0",
"private": true, "private": true,
"scripts": { "scripts": {
"build": "pnpm run clean && pnpm run build-assets && pnpm run html", "build": "pnpm run clean && pnpm run css && pnpm run js && pnpm run html",
"build-assets": "concurrently \"pnpm run css\" \"pnpm run js\"",
"dev": "pnpm run clean && pnpm run watch", "dev": "pnpm run clean && pnpm run watch",
"watch": "concurrently \"pnpm run watch-html\" \"pnpm run watch-css\" \"pnpm run watch-js\"", "watch": "concurrently \"pnpm run watch-html\" \"pnpm run watch-css\" \"pnpm run watch-js\"",
"watch-html": "cross-env NODE_ENV=development eleventy --serve --port=3000 --watch --incremental", "watch-html": "cross-env NODE_ENV=development eleventy --serve --port=3000 --watch --incremental",

View File

@@ -714,22 +714,25 @@ permalink: all-elements.html
<div class="card-body"> <div class="card-body">
<h4>Basic Segmented</h4> <h4>Basic Segmented</h4>
<div class="mb-3"> <div class="mb-3">
{% include "ui/nav-segmented.html" items="Home,Profile,Settings" %} {% include "ui/nav-segmented.html" %}
</div> </div>
<h4>With Icons</h4> <h4>With Icons</h4>
<div class="mb-3"> <div class="mb-3">
{% include "ui/nav-segmented.html" icons="home,user,settings" %} <nav class="nav nav-segmented" role="tablist">
</div> <button class="nav-link active" role="tab">
{% include "ui/icon.html" icon="home" class="nav-link-icon" %}
<h4>With Emojis</h4> Home
<div class="mb-3"> </button>
{% include "ui/nav-segmented.html" items="👦,👦🏿,👦🏾,👦🏽,👦🏼,👦🏻" %} <button class="nav-link" role="tab">
</div> {% include "ui/icon.html" icon="user" class="nav-link-icon" %}
Profile
<h4>With Icons and Text</h4> </button>
<div class="mb-3"> <button class="nav-link" role="tab">
{% include "ui/nav-segmented.html" items="Home,Profile,Settings" icons="home,user,settings" %} {% include "ui/icon.html" icon="settings" class="nav-link-icon" %}
Settings
</button>
</nav>
</div> </div>
</div> </div>
</div> </div>

View File

@@ -1,97 +0,0 @@
---
title: Card Gradients
page-header: Card Gradients
page-menu: base.cards.gradients
layout: default
permalink: card-gradients.html
page-libs: [apexcharts]
---
{% assign gradients = 'sunset,rainbow,ocean,mellow,disco,psychedelic' | split: ',' %}
<div class="row row-cards">
<div class="col-md-6">
<div class="row row-cards">
<div class="col-12">
{% include "cards/welcome.html" %}
</div>
<div class="col-12">
<div class="row">
<div class="col-6">
<div class="row row-cards">
<div class="col-12">
{% include "cards/delete-confirm.html" %}
</div>
<div class="col-12">
{% include "cards/success-message.html" %}
</div>
</div>
</div>
<div class="col-6">
<div class="row row-cards">
<div class="col-12">
{% include "cards/pricing-plan.html" %}
</div>
<div class="col-12">
{% include "cards/stat-gradient.html" title="Earned" value="$2,847" icon="credit-card" color="success"
progress=75 %}
</div>
<div class="col-12">
{% include "cards/stat-gradient.html" title="Pending Orders" value="47" icon="clock" color="yellow"
progress=38 %}
</div>
<div class="col-12">
{% include "cards/stat-gradient.html" title="Cancelled Orders" value="12" icon="shopping-cart-x" color="red"
progress=8 %}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-3">
<div class="row row-cards">
<div class="col-12">
{% include "cards/happy-birthday.html" %}
</div>
<div class="col-12">
{% include "cards/you-win.html" %}
</div>
</div>
</div>
<div class="col-3">
<div class="row row-cards">
<div class="col-12">
{% include "cards/weather.html" city="Warsaw, PL" temperature=3 color="rain" icon="cloud-rain"
description="Cloudy morning" %}
</div>
<div class="col-12">
{% include "cards/weather.html" city="Oslo, NO" temperature="-5" color="snow" icon="cloud"
description="Snowy day" %}
</div>
<div class="col-12">
{% include "cards/weather.html" city="Dubai, AE" temperature="32" color="sun" icon="sun" description="Sunny
day" %}
</div>
<div class="col-12">
{% include "cards/profile-contact.html" person=people[6] %}
</div>
<div class="col-12">
{% include "cards/small-stats.html" chart-type="line" chart-data="11,16,13,20,17,24,19,23,16,20,13,17,11,19"
color="primary" id="chart1" class="card-gradient card-gradient-end card-gradient-primary" %}
</div>
<div class="col-12">
{% include "cards/small-stats.html" id="sales" icon="arrow-up" color="green" title="$5,256.99"
description="Revenue last 30 days" description-value="+4%" class="card-gradient card-gradient-end
card-gradient-green" %}
</div>
<div class="col-12">
{% include "cards/small-stats.html" id="orders" icon="arrow-down" color="red" title="342" description="Sales
last 30 days" description-value="-4.3%" description-value-color="red" class="card-gradient card-gradient-end
card-gradient-red" %}
</div>
</div>
</div>
</div>

View File

@@ -108,7 +108,17 @@ permalink: cards.html
</div> </div>
</div> </div>
<div class="col-md-6 col-lg-3"> <div class="col-md-6 col-lg-3">
{% include "cards/card-background-icon.html" %} <div class="card bg-primary text-primary-fg">
<div class="card-stamp">
<div class="card-stamp-icon bg-white text-primary">
{% include "ui/icon.html" icon="star" %}
</div>
</div>
<div class="card-body">
<h3 class="card-title">Card with background and icon</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.</p>
</div>
</div>
</div> </div>
<div class="col-md-6 col-lg-3"> <div class="col-md-6 col-lg-3">
{% include "cards/card.html" status-top="danger" title="Card with top status" %} {% include "cards/card.html" status-top="danger" title="Card with top status" %}
@@ -121,10 +131,22 @@ permalink: cards.html
</div> </div>
<div class="col-md-6 col-lg-3"> <div class="col-md-6 col-lg-3">
{% include "cards/card-ribbon-top.html" %} <div class="card">
<div class="ribbon ribbon-top bg-yellow">{% include "ui/icon.html" icon="star" %}</div>
<div class="card-body">
<h3 class="card-title">Card with top ribbon</h3>
<p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.</p>
</div>
</div>
</div> </div>
<div class="col-md-6 col-lg-3"> <div class="col-md-6 col-lg-3">
{% include "cards/card-ribbon-text.html" %} <div class="card">
<div class="ribbon bg-red">NEW</div>
<div class="card-body">
<h3 class="card-title">Card with text ribbon</h3>
<p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.</p>
</div>
</div>
</div> </div>
<div class="col-md-6 col-lg-3"> <div class="col-md-6 col-lg-3">
{% include "cards/card.html" progress=true title="Card with progress bar" %} {% include "cards/card.html" progress=true title="Card with progress bar" %}
@@ -177,8 +199,8 @@ permalink: cards.html
<div class="col-md-6 col-lg-4">{% include "cards/card.html" header-tabs=true %}</div> <div class="col-md-6 col-lg-4">{% include "cards/card.html" header-tabs=true %}</div>
<div class="col-md-6 col-lg-4">{% include "cards/card.html" header-pills=true %}</div> <div class="col-md-6 col-lg-4">{% include "cards/card.html" header-pills=true %}</div>
<div class="col-md-6 col-lg-4">{% include "cards/card-tabs.html" %}</div> <div class="col-md-6 col-lg-4">{% include "cards/card-tabs.html" count=4 %}</div>
<div class="col-md-6 col-lg-4">{% include "cards/card-tabs.html" bottom=true id="bottom" %}</div> <div class="col-md-6 col-lg-4">{% include "cards/card-tabs.html" count=4 bottom=true id="bottom" %}</div>
<div class="col-12"> <div class="col-12">
@@ -256,6 +278,5 @@ permalink: cards.html
</div> </div>
<div class="col-lg-4">{% include "cards/card.html" empty=true %}</div> <div class="col-lg-4">{% include "cards/card.html" empty=true %}</div>
<div class="col-lg-4">{% include "cards/empty-team.html" %}</div>
<div class="col-lg-4">{% include "cards/credit-card.html" %}</div> <div class="col-lg-4">{% include "cards/credit-card.html" %}</div>
</div> </div>

View File

@@ -13,7 +13,17 @@ permalink: charts.html
</div> </div>
<div class="col-12"> <div class="col-12">
{% include "cards/charts/social-referrals.html" %} <div class="card">
<div class="card-body">
<div class="d-flex">
<h3 class="card-title">Social referrals</h3>
<div class="ms-auto">
{% include "parts/dropdown/days.html" id="social-referrals" label="Select time range for sales data" %}
</div>
</div>
{% include "ui/chart.html" chart-id="social-referrals" legend=true %}
</div>
</div>
</div> </div>
<div class="col-12"> <div class="col-12">

View File

@@ -21,7 +21,7 @@ permalink: colors.html
<div class="col-12"> <div class="col-12">
<div class="row align-items-center"> <div class="row align-items-center">
<div class="col-auto"> <div class="col-auto">
<div class="avatar bg-{{ color[0] }} text-{{ color[0] }}-fg avatar-square"> <div class="avatar bg-{{ color[0] }} text-{{ color[0] }}-fg">
{{ color[1].abbr }} {{ color[1].abbr }}
</div> </div>
</div> </div>
@@ -44,7 +44,7 @@ permalink: colors.html
<div class="col-12"> <div class="col-12">
<div class="row align-items-center"> <div class="row align-items-center">
<div class="col-auto"> <div class="col-auto">
<div class="avatar bg-{{ color[0] }}-lt text-{{ color[0] }}-lt-fg avatar-square"> <div class="avatar bg-{{ color[0] }}-lt text-{{ color[0] }}-lt-fg">
{{ color[1].abbr }} {{ color[1].abbr }}
</div> </div>
</div> </div>
@@ -67,7 +67,7 @@ permalink: colors.html
<div class="col-12"> <div class="col-12">
<div class="row align-items-center"> <div class="row align-items-center">
<div class="col-auto"> <div class="col-auto">
<div class="avatar bg-{{ color[0] }} text-{{ color[0] }}-fg avatar-square"> <div class="avatar bg-{{ color[0] }} text-{{ color[0] }}-fg">
{{ color[1].abbr }} {{ color[1].abbr }}
</div> </div>
</div> </div>
@@ -90,7 +90,7 @@ permalink: colors.html
<div class="col-12"> <div class="col-12">
<div class="row align-items-center"> <div class="row align-items-center">
<div class="col-auto"> <div class="col-auto">
<div class="avatar bg-{{ color[0] }} text-{{ color[0] }}-fg avatar-square"> <div class="avatar bg-{{ color[0] }} text-{{ color[0] }}-fg">
{% include "ui/icon.html" icon=color[1].icon %} {% include "ui/icon.html" icon=color[1].icon %}
</div> </div>
</div> </div>

View File

@@ -7,7 +7,7 @@ permalink: form-layout.html
page-libs: [litepicker] page-libs: [litepicker]
--- ---
<div class="row row-cards row-cols-1 row-cols-md-3"> <div class="row row-cards row-cols-1 row-cols-md-2">
<div class="col"> <div class="col">
<div class="row row-cards"> <div class="row row-cards">
<div class="col-12"> <div class="col-12">
@@ -360,8 +360,4 @@ page-libs: [litepicker]
</div> </div>
</div> </div>
</div> </div>
<div class="col">
{% include "cards/form/payment.html" %}
</div>
</div> </div>

View File

@@ -6,63 +6,27 @@ layout: default
permalink: logs.html permalink: logs.html
--- ---
<div class="row"> <div class="card">
<div class="col-lg-6"> <div class="card-body">
<div class="card"> <h4>
<div class="card-body"> Checked URL
<h4> </h4>
Checked URL <div>
</h4> <pre><code>GET <a class="text-reset" target="_blank" href="{{ site.previewUrl }}">{{ site.previewUrl }}</a></code></pre>
<div> </div>
<pre><code>GET <a class="text-reset" target="_blank" href="{{ site.previewUrl }}">{{ site.previewUrl }}</a></code></pre>
</div>
<h4>Request Timing</h4> <h4>Request Timing</h4>
<div> <div>
<pre>Effective URL&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a class="text-reset" target="_blank" href="{{ site.previewUrl }}">{{ site.previewUrl }}</a><br>Redirect count&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0<br>Name lookup time&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3.4e-05<br>Connect time&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0.000521<br>Pre-transfer time&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0.0<br>Start-transfer time&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0.0<br>App connect time&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0.0<br>Redirect time&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0.0<br>Total time&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;28.000601<br>Response code&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0<br>Return keyword&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;operation_timedout</pre> <pre>Effective URL&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a class="text-reset" target="_blank" href="{{ site.previewUrl }}">{{ site.previewUrl }}</a><br>Redirect count&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0<br>Name lookup time&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;3.4e-05<br>Connect time&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0.000521<br>Pre-transfer time&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0.0<br>Start-transfer time&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0.0<br>App connect time&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0.0<br>Redirect time&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0.0<br>Total time&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;28.000601<br>Response code&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;0<br>Return keyword&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;operation_timedout</pre>
</div> </div>
<h4>Response Headers</h4> <h4>Response Headers</h4>
<div> <div>
<pre>HTTP/1.1 200 Connection established</pre> <pre>HTTP/1.1 200 Connection established</pre>
</div>
</div>
<div class="card-footer">
<h4>Escalation</h4>
<div>Entire team</div>
</div>
</div> </div>
</div> </div>
<div class="col-lg-6"> <div class="card-footer">
<div class="card"> <h4>Escalation</h4>
<div class="card-body"> <div>Entire team</div>
<h4>
Application Log
</h4>
<div>
<pre><code>2024-01-15 14:23:45 [INFO] Application started successfully
2024-01-15 14:23:46 [DEBUG] Database connection established
2024-01-15 14:23:47 [INFO] User authentication successful: user_id=12345
2024-01-15 14:23:48 [WARNING] Rate limit approaching: 85% of quota used
2024-01-15 14:23:49 [ERROR] Failed to process payment: transaction_id=tx_789
2024-01-15 14:23:50 [INFO] Cache cleared: keys=1523
2024-01-15 14:23:51 [DEBUG] API request completed: endpoint=/api/users, duration=234ms</code></pre>
</div>
<h4>Log Levels</h4>
<div>
<div class="mb-2">
{% include "ui/badge.html" text="INFO" color="success" %}
{% include "ui/badge.html" text="WARNING" color="warning" %}
{% include "ui/badge.html" text="ERROR" color="disabled" %}
{% include "ui/badge.html" text="DEBUG" color="disabled" %}
</div>
</div>
</div>
<div class="card-footer">
<h4>Log Source</h4>
<div>Application Server (prod-01)</div>
</div>
</div>
</div> </div>
</div> </div>

View File

@@ -1,223 +0,0 @@
---
title: Driver Tour
page-header: Driver Tour
page-libs: [driver.js]
page-menu: plugins.tour
layout: default
permalink: tour.html
---
<div class="row row-cards">
<div class="col-12">
<div class="card">
<div class="card-header">
<h3 class="card-title">Product Tour Example</h3>
<div class="card-actions">
{% include "ui/button.html" id="start-tour" text="Start Tour" icon="play" color="primary" element="button" %}
</div>
</div>
<div class="card-body">
<p>
Click the "Start Tour" button to begin an interactive tour of this page.
The tour will guide you through different elements and features.
</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card" id="tour-card-1">
<div class="card-header">
<h3 class="card-title">Welcome Section</h3>
</div>
<div class="card-body">
<p>This is the first card in our tour. It demonstrates how Driver.js highlights elements on the page.</p>
<div class="btn-list">
{% include "ui/button.html" text="Action Button" color="primary" element="button" %}
{% include "ui/button.html" text="Secondary" element="button" %}
</div>
</div>
</div>
</div>
<div class="col-md-6">
<div class="card" id="tour-card-2">
<div class="card-header">
<h3 class="card-title">Features Section</h3>
</div>
<div class="card-body">
<p>This card shows additional features and demonstrates the tour's ability to navigate between different
elements.</p>
<div class="form-selectgroup">
<label class="form-selectgroup-item">
<input type="radio" name="options" value="1" class="form-selectgroup-input" checked>
<span class="form-selectgroup-label">Option 1</span>
</label>
<label class="form-selectgroup-item">
<input type="radio" name="options" value="2" class="form-selectgroup-input">
<span class="form-selectgroup-label">Option 2</span>
</label>
</div>
</div>
</div>
</div>
<div class="col-12">
<div class="card" id="tour-card-3">
<div class="card-header">
<h3 class="card-title">Navigation Example</h3>
</div>
<div class="card-body">
<p>This is a full-width card that demonstrates how the tour works with larger elements.</p>
<div class="table-responsive">
<table class="table table-vcenter">
<thead>
<tr>
<th>Name</th>
<th>Status</th>
<th>Role</th>
<th class="w-1"></th>
</tr>
</thead>
<tbody>
<tr>
<td>John Doe</td>
<td>{% include "ui/badge.html" text="Active" color="success" %}</td>
<td>Developer</td>
<td>
{% include "ui/button.html" text="Edit" size="sm" href="#" %}
</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>{% include "ui/badge.html" text="Pending" color="warning" %}</td>
<td>Designer</td>
<td>
{% include "ui/button.html" text="Edit" size="sm" href="#" %}
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card" id="tour-card-4">
<div class="card-body text-center">
<div class="mb-3">
{% include "ui/icon.html" icon="settings" size="48" %}
</div>
<h3 class="card-title">Settings</h3>
<p class="text-secondary">Configure your application settings here.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card" id="tour-card-5">
<div class="card-body text-center">
<div class="mb-3">
{% include "ui/icon.html" icon="users" size="48" %}
</div>
<h3 class="card-title">Users</h3>
<p class="text-secondary">Manage your team members and permissions.</p>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card" id="tour-card-6">
<div class="card-body text-center">
<div class="mb-3">
{% include "ui/icon.html" icon="chart-bar" size="48" %}
</div>
<h3 class="card-title">Analytics</h3>
<p class="text-secondary">View your application statistics and reports.</p>
</div>
</div>
</div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const driverObj = driver.js.driver({
allowClose: true,
overlayClickNext: true,
showButtons: ['next', 'previous', 'close'],
showProgress: true,
steps: [
{
element: '#start-tour',
popover: {
title: 'Welcome to the Tour!',
description: 'This button starts the interactive tour. Click it to begin exploring the page.',
side: 'bottom',
align: 'start'
}
},
{
element: '#tour-card-1',
popover: {
title: 'Welcome Section',
description: 'This is the first card in our tour. It demonstrates how Driver.js highlights elements on the page.',
side: 'right',
align: 'start'
}
},
{
element: '#tour-card-2',
popover: {
title: 'Features Section',
description: 'This card shows additional features and demonstrates the tour\'s ability to navigate between different elements.',
side: 'left',
align: 'start'
}
},
{
element: '#tour-card-3',
popover: {
title: 'Data Table',
description: 'This table shows how Driver.js works with larger elements. You can highlight entire sections of your page.',
side: 'top',
align: 'center'
}
},
{
element: '#tour-card-4',
popover: {
title: 'Settings Card',
description: 'This card demonstrates how the tour works with smaller, centered elements.',
side: 'top',
align: 'center'
}
},
{
element: '#tour-card-5',
popover: {
title: 'Users Card',
description: 'Another example card showing user management features.',
side: 'top',
align: 'center'
}
},
{
element: '#tour-card-6',
popover: {
title: 'Analytics Card',
description: 'The final step of the tour. This card shows analytics features.',
side: 'top',
align: 'center'
}
}
]
});
const startButton = document.getElementById('start-tour');
if (startButton) {
startButton.addEventListener('click', function () {
driverObj.drive();
});
}
});
</script>

View File

@@ -1 +1 @@
["403","500","504","ai","archive","bad-news","bicycle","boy","boy-and-cat","boy-and-laptop","boy-girl","boy-gives-flowers","boy-refresh","boy-with-key","building","calendar","camping","cat","chart","chart-circle","chatbot","chill","chill-sofa","christmas-fireplace","christmas-gifts","christmas-tree","clock-and-cat","computer-fix","contract","conversation","dance","dart","discount","download","easter-bunny","easter-egg","electric-scooter","email","error","exit","fingerprint","flowers","folders","game","ghost","ghost-2","gift","girl-phone","girl-refresh","good-info","good-news","graduation","guitar","halloween","halloween-pumpkin","hybrid-work","ice-skates","icons","icons-drawing","icons-drawing-run","icons-ladder","icons-production","icons-workshop","kite","loading","map-destination","message","mobile-computer","morning","music","neutral-info","new-year","new-year-2","not-found","painting","payment","podcast","printer","project","reading","search","searching-for-a-signal","shield","shopping","snowman","telescope","tiredness","to-do","valentines-day-gift","valentines-day-heart","valentines-day-love","vampire","version-control","video","vr","wait","weightlifting","welcome-on-board","witch","witch-2"] ["weightlifting","wait","vr","video","valentines-day-love","valentines-day-heart","valentines-day-gift","to-do","tiredness","telescope","snowman","shopping","shield","searching-for-a-signal","search","project","printer","podcast","payment","painting","not-found","new-year","new-year-2","neutral-info","music","morning","mobile-computer","message","map-destination","loading","kite","icons","icons-workshop","icons-production","icons-ladder","icons-drawing","icons-drawing-run","ice-skates","hybrid-work","halloween-pumpkin","guitar","good-news","good-info","girl-refresh","girl-phone","gift","ghost","folders","flowers","fingerprint","exit","error","email","electric-scooter","easter-egg","easter-bunny","discount","dart","dance","conversation","computer-fix","clock-and-cat","christmas-tree","christmas-gifts","christmas-fireplace","chill","chill-sofa","chart","chart-circle","cat","calendar","building","boy","boy-with-key","boy-refresh","boy-gives-flowers","boy-girl","boy-and-laptop","boy-and-cat","bicycle","bad-news","archive","ai","500","403"]

View File

@@ -105,11 +105,6 @@
"title": "Card actions", "title": "Card actions",
"badge": "New" "badge": "New"
}, },
"gradients": {
"url": "card-gradients.html",
"title": "Card gradients",
"badge": "New"
},
"masonry": { "masonry": {
"url": "cards-masonry.html", "url": "cards-masonry.html",
"title": "Cards Masonry" "title": "Cards Masonry"
@@ -479,10 +474,6 @@
"url": "maps-vector.html", "url": "maps-vector.html",
"title": "Map vector" "title": "Map vector"
}, },
"tour": {
"url": "tour.html",
"title": "Tour"
},
"turbo": { "turbo": {
"url": "turbo-loader.html", "url": "turbo-loader.html",
"title": "Turbo loader" "title": "Turbo loader"

View File

@@ -1,21 +1,21 @@
{ {
"css": "sha384-8CTJ1aEYI+cbgqgYVub8YVfKOnKa/men0DZ4qZqmwvgzNGG1/anW0L4o7/8G171h", "css": "sha384-b08Yxo9kzlsLLcHA4bMBkC8EAIBeP3G8rhhIT584owzLn88bcWJkSVtGZMc78Rax",
"css-rtl": "sha384-c4pkMIjCDw9LwOOYLU2NkDMg4rsDpqEj+xqDXhrTVRtDiAvk2083ZRDsxMOl9Qpw", "css-rtl": "sha384-EVH/sV9+QVa/y7Vl1JFsVYjru0/gKkqDf8zBqdfu2R8t84BwCBeV7jsu7kQ93abg",
"css-flags": "sha384-Z+NVuLczJm4wqbXhRrVWeCqKJzY3VmwtOZTMpek7tjmZJU9Yqu+6F7aPT0KDBTvS", "css-flags": "sha384-kmvP0hkBXZ2hMSZlbvE1Q2HIXzPCQRL3ijUeqNiwaPd2nl2Aks+s3gW+V5fAHOX9",
"css-flags-rtl": "sha384-9zdt+TQAk+aAdQAyWQ158584Cr9KDLcgJMDG5iDvrYE2Ha/sZdG6l3FcjWyHAFx8", "css-flags-rtl": "sha384-Q/h6koANGclsGnwB8rvF8h84H54NKHDeNWFj6yiE4WLLEXyHcz+Zu6Afkh2ssYTC",
"css-marketing": "sha384-O1oTT08rQgRZEq0WgPfYFyGadtTu90+tM9zTv+9yYv1qgNw8ldbGTr6levIIXXNl", "css-marketing": "sha384-4dAlYnPzCom9yeC/5++PFq2FG/szJRlUPsDSrjZ3EWP8IAzK7g7rrsnSfqrS67Se",
"css-marketing-rtl": "sha384-jU6iDpXSyHHkiqBvDtPRuDWr+4ccgr3SNjNYMN0FtyaDaIi4Qe6WNn5Ir1+jr/aZ", "css-marketing-rtl": "sha384-c6gNhuNYjp+lqluSdArbL8ciLEBq7IVU00XnPM2Eogj8RAjMapccvOM/pGhk3vV6",
"css-payments": "sha384-xWIXbKxPLGG/ZEGUKxDjJn3xmUgd2PC2CSZUKJ4PyTse49DiuvJx2WT5wSNJRyw9", "css-payments": "sha384-xWIXbKxPLGG/ZEGUKxDjJn3xmUgd2PC2CSZUKJ4PyTse49DiuvJx2WT5wSNJRyw9",
"css-payments-rtl": "sha384-69CxgA+uEPtM07SLA8MMAdnBmwtVGndDJf8nIPdfvNrDayBfPqOK3wS3nvV5yyk+", "css-payments-rtl": "sha384-69CxgA+uEPtM07SLA8MMAdnBmwtVGndDJf8nIPdfvNrDayBfPqOK3wS3nvV5yyk+",
"css-socials": "sha384-eWmz8gyiLzrDw3JcT/PJxjGyKizQjvByfHqocjrMMkIrbKFCnOuP/qMwAz3bHmsC", "css-socials": "sha384-eWmz8gyiLzrDw3JcT/PJxjGyKizQjvByfHqocjrMMkIrbKFCnOuP/qMwAz3bHmsC",
"css-socials-rtl": "sha384-yobKDIyTOxB1z7t/uZ2ImuXrcKWF24vDYg2vR1n7x2msF09iWnvyIxQtfEl9+OFl", "css-socials-rtl": "sha384-yobKDIyTOxB1z7t/uZ2ImuXrcKWF24vDYg2vR1n7x2msF09iWnvyIxQtfEl9+OFl",
"css-props": "sha384-41GCSlvwCdfsb6AHZx7QXQq17CAqXvvToJCecMxqvUUsap3aYqIvR3ARxb5ug/o7", "css-props": "sha384-HpzBfAj1xJcNLtdedYZunJBHqgdO12KqrCrc6/7pmKDiP8YmUF71cm+iGBtVawWM",
"css-props-rtl": "sha384-JgFdeK5dAxT/nZPtUTt3cnBng9TLxoF6ZetumffFIzqF/4XXLEQIemFDshpleF/f", "css-props-rtl": "sha384-/vKK+yuQsAI8lJmR4uothydKQAHFK+fp1QrbJnfk2deAzII9WUj3h5rXUxZPyUAo",
"css-themes": "sha384-jTe/MdN6BlY4S3eYe6Qw++yTjuezmVnxWp/l7GAG1qXGC+jttphHqsAN/bGPvJOk", "css-themes": "sha384-jTe/MdN6BlY4S3eYe6Qw++yTjuezmVnxWp/l7GAG1qXGC+jttphHqsAN/bGPvJOk",
"css-themes-rtl": "sha384-WTp4aZ+OGqnkNR6Xe0sJwwfd0JHGq3dZTLU2ITKxTK2zjcJTBUMY/+Z4eXgm8ipF", "css-themes-rtl": "sha384-WTp4aZ+OGqnkNR6Xe0sJwwfd0JHGq3dZTLU2ITKxTK2zjcJTBUMY/+Z4eXgm8ipF",
"css-vendors-rtl": "sha384-fHhTRXlGYaUjLAbSnADjVs2DrSBSKbnTDhjiOgVT0+aWDjKbwtPZU6y54bLo2FCm", "css-vendors-rtl": "sha384-V555LUGE2xyN4wNbzdVMgsajsKmJdlLFm20Ws72jEyPiSsTXXITV0PebNzVeBjnb",
"css-vendors": "sha384-9R1luLy+gN6Ob3LEWsGiGo3nyPVDzVGyEBcDlat6sH2lF7zHZhnpDILTEgEvalsh", "css-vendors": "sha384-+X7+c/noY2B9ieq9daEaVStkUhIFyJTO5T6Occ6jZisx57sbECetvloLqcvGahUv",
"js": "sha384-dUqGQ2Iu2WGMnF+glqmZxV78vxbRuwGaM3diaq+Wp0a6mek1k5samXVe60XqZcTT", "js": "sha384-pku3birjgGovaJ9ngF7SaxKkF/eYUvBjiMJ+jTtWbNesIj2Rud2K63+4JD7EF4gk",
"js-theme": "sha384-SoDJmj40r6f9Rfxi6Fq+bNS8ofhlZMyxHk9dq9Y8e1M17PZGkBRN/XUpx8swn0i5", "js-theme": "sha384-SoDJmj40r6f9Rfxi6Fq+bNS8ofhlZMyxHk9dq9Y8e1M17PZGkBRN/XUpx8swn0i5",
"demo-css": "sha384-BUDq2P684xwRBf0GDlySvob+KJg4ko8y2K7njgvYBscmEuqoVVqJ75zcTDozwkFA", "demo-css": "sha384-BUDq2P684xwRBf0GDlySvob+KJg4ko8y2K7njgvYBscmEuqoVVqJ75zcTDozwkFA",
"demo-js": "sha384-UcTgbM9IZSOPHHuFa0R9H4TegQWoZkJKpeTjLV5hjem2k0CZ67Q4/bW2rT/Edf4Z" "demo-js": "sha384-UcTgbM9IZSOPHHuFa0R9H4TegQWoZkJKpeTjLV5hjem2k0CZ67Q4/bW2rT/Edf4Z"

View File

@@ -1,16 +1,10 @@
import { readFileSync } from "fs"; import { readFileSync } from "fs";
import { join, dirname } from "path"; import { join } from "path";
import { fileURLToPath } from "url";
export function appData(eleventyConfig) { export function appData(eleventyConfig) {
const currentDir = dirname(fileURLToPath(import.meta.url)); eleventyConfig.addGlobalData("package", JSON.parse(readFileSync(join("..", "core", "package.json"), "utf-8")));
eleventyConfig.addGlobalData("changelog", readFileSync(join("..", "core", "CHANGELOG.md"), "utf-8"));
console.log('currentDir', currentDir); eleventyConfig.addGlobalData("libs", JSON.parse(readFileSync(join("..", "core", "libs.json"), "utf-8")));
eleventyConfig.addGlobalData("package", JSON.parse(readFileSync(join(currentDir, "..", "..", "core", "package.json"), "utf-8"))) ;
eleventyConfig.addGlobalData("changelog", readFileSync(join(currentDir, "..", "..", "core", "CHANGELOG.md"), "utf-8"));
eleventyConfig.addGlobalData("libs", JSON.parse(readFileSync(join(currentDir, "..", "..", "core", "libs.json"), "utf-8")));
// Analytics Environment Variables // Analytics Environment Variables
eleventyConfig.addGlobalData("posthogApiKey", process.env.NEXT_PUBLIC_POSTHOG_KEY); eleventyConfig.addGlobalData("posthogApiKey", process.env.NEXT_PUBLIC_POSTHOG_KEY);

View File

@@ -29,6 +29,14 @@ export function appFilters(eleventyConfig) {
.replace(/[\r\n]/g, '&#13;'); .replace(/[\r\n]/g, '&#13;');
}); });
eleventyConfig.addFilter("strip_trailing_slash", (text) => {
return text?.replace(/\/$/, '');
});
eleventyConfig.addFilter("strip_leading_slash", (text) => {
return text?.replace(/^\//, '');
});
eleventyConfig.addFilter("contains", (items, item) => { eleventyConfig.addFilter("contains", (items, item) => {
return items && Array.isArray(items) && items.includes(item); return items && Array.isArray(items) && items.includes(item);
}); });
@@ -138,6 +146,11 @@ export function appFilters(eleventyConfig) {
return 0; return 0;
}) })
eleventyConfig.addFilter("debug", function (elem) {
console.log(elem);
return elem;
})
eleventyConfig.addFilter("first", function (elem) { eleventyConfig.addFilter("first", function (elem) {
if (elem instanceof Object) { if (elem instanceof Object) {
return elem[Object.keys(elem)[0]]; return elem[Object.keys(elem)[0]];
@@ -160,36 +173,31 @@ export function appFilters(eleventyConfig) {
// time ago from today // time ago from today
eleventyConfig.addFilter("timeago", function (date) { eleventyConfig.addFilter("timeago", function (date) {
let seconds; const seconds = Math.floor((new Date() - date) / 1000);
if (typeof date === 'number') {
seconds = date;
} else {
seconds = Math.floor((new Date() - date) / 1000);
}
let interval = Math.floor(seconds / 31536000); let interval = Math.floor(seconds / 31536000);
if (interval >= 1) { if (interval > 1) {
return `${interval} year${interval > 1 ? 's' : ''} ago`; return interval + " years ago";
} }
interval = Math.floor(seconds / 2592000); interval = Math.floor(seconds / 2592000);
if (interval >= 1) { if (interval > 1) {
return `${interval} month${interval > 1 ? 's' : ''} ago`; return interval + " months ago";
} }
interval = Math.floor(seconds / 86400); interval = Math.floor(seconds / 86400);
if (interval >= 1) { if (interval > 1) {
return `${interval} day${interval > 1 ? 's' : ''} ago`; return interval + " days ago";
} }
interval = Math.floor(seconds / 3600); interval = Math.floor(seconds / 3600);
if (interval >= 1) { if (interval > 1) {
return `${interval} hour${interval > 1 ? 's' : ''} ago`; return interval + " hours ago";
} }
interval = Math.floor(seconds / 60); interval = Math.floor(seconds / 60);
if (interval >= 1) { if (interval > 1) {
return `${interval} minute${interval > 1 ? 's' : ''} ago`; return interval + " minutes ago";
} }
if (seconds > 0) { if (seconds > 0) {
return `${Math.floor(seconds)} second${Math.floor(seconds) > 1 ? 's' : ''} ago`; return Math.floor(seconds) + " seconds ago";
} }
return "now"; return "now";

View File

@@ -1,5 +1,5 @@
{% assign width = include.width | default: 400 %} {% assign width = include.width | default: 400 %}
{% assign height = include.height | default: 200 %} {% assign height = include.height | default: 200 %}
<div class="card-body{% if include.class %} {{ include.class }}{% endif %}"> <div class="card-body p-0{% if include.class %} {{ include.class }}{% endif %}">
{% include "ui/svg.html" width=width height=height ratio=include.ratio class="w-100 border rounded" %} {% include "ui/svg.html" width=width height=height ratio=include.ratio class="w-100" %}
</div> </div>

View File

@@ -1,12 +0,0 @@
<div class="card bg-primary text-primary-fg">
<div class="card-stamp">
<div class="card-stamp-icon bg-white text-primary">
{% include "ui/icon.html" icon="star" %}
</div>
</div>
<div class="card-body">
<h3 class="card-title">Card with background and icon</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.</p>
</div>
</div>

View File

@@ -1,8 +0,0 @@
<div class="card">
<div class="ribbon bg-red">NEW</div>
<div class="card-body">
<h3 class="card-title">Card with text ribbon</h3>
<p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.</p>
</div>
</div>

View File

@@ -1,8 +0,0 @@
<div class="card">
<div class="ribbon ribbon-top bg-yellow">{% include "ui/icon.html" icon="star" %}</div>
<div class="card-body">
<h3 class="card-title">Card with top ribbon</h3>
<p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.</p>
</div>
</div>

View File

@@ -1,12 +1,12 @@
{% assign tabs-count = include.count | default: 3 %} {% assign tabs-count = include.count | default: 3 %}
{% assign id = include.id | default: 'top' %} {% assign id = include.id | default: 'top' %}
{% assign tabs = 'Activity,Profile,Settings' | split: "," %} {% assign tabs = (1..tabs-count) %}
{% capture tabs-html %} {% capture tabs-html %}
<!-- Cards navigation --> <!-- Cards navigation -->
<ul class="nav nav-tabs{% if include.bottom %} nav-tabs-bottom{% endif %}"> <ul class="nav nav-tabs{% if include.bottom %} nav-tabs-bottom{% endif %}">
{% for tab in tabs %} {% for tab in tabs %}
<li class="nav-item"><a href="#tab-{{ id }}-{{ forloop.index }}" class="nav-link{% if forloop.first %} active{% endif %}" data-bs-toggle="tab">{{ tab }}</a></li> <li class="nav-item"><a href="#tab-{{ id }}-{{ tab }}" class="nav-link{% if forloop.first %} active{% endif %}" data-bs-toggle="tab">Tab {{ tab }}</a></li>
{% endfor %} {% endfor %}
</ul> </ul>
{%- endcapture %} {%- endcapture %}
@@ -15,9 +15,9 @@
<div class="tab-content"> <div class="tab-content">
{% for tab in tabs %} {% for tab in tabs %}
<!-- Content of card #{{ tab }} --> <!-- Content of card #{{ tab }} -->
<div id="tab-{{ id }}-{{ forloop.index }}" class="card tab-pane{% if forloop.first %} active show{% endif %}"> <div id="tab-{{ id }}-{{ tab }}" class="card tab-pane{% if forloop.first %} active show{% endif %}">
<div class="card-body"> <div class="card-body">
<div class="card-title">{{ tab }}</div> <div class="card-title">Content of tab #{{ tab }}</div>
<p class="text-secondary"> <p class="text-secondary">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
</p> </p>

View File

@@ -2,7 +2,7 @@
<{% if link %}a href="#"{% else %}div{% endif %} class="card{% if include.active %} card-active{% endif %}{% if include.inactive %} card-inactive{% endif %}{% if include.class %} {{ include.class }}{% endif %}"> <{% if link %}a href="#"{% else %}div{% endif %} class="card{% if include.active %} card-active{% endif %}{% if include.inactive %} card-inactive{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
{% if include['empty'] %} {% if include['empty'] %}
{% include "ui/empty.html" illustration="not-found" height=160 %} {% include "ui/empty.html" illustration=true %}
{% else %} {% else %}
@@ -78,7 +78,7 @@
{% when "check" %} {% when "check" %}
{% include "ui/form/check.html" empty=true checked=true class="m-0" %} {% include "ui/form/check.html" empty=true checked=true class="m-0" %}
{% when "avatars" %} {% when "avatars" %}
{% include "ui/avatar-list.html" stacked=true text="+3" size="sm" %} {% include "ui/avatar-list.html" stacked=true text="+3" %}
{% when "more" %} {% when "more" %}
<a href="#">More information</a> <a href="#">More information</a>
{% endcase %} {% endcase %}

View File

@@ -1,13 +0,0 @@
<div class="card">
<div class="card-body">
<div class="subheader">Active Users</div>
<div class="d-flex align-items-baseline mb-2">
<div class="h1 mb-0 me-2">25,782</div>
<div class="me-auto">
{% include "ui/trending.html" value=-1 %}
</div>
</div>
{% include "ui/chart.html" chart-id="active-users-3" height="12" %}
</div>
</div>

View File

@@ -13,5 +13,5 @@
</div> </div>
</div> </div>
</div> </div>
{% include "ui/chart.html" chart-id="revenue-bg" size="sm" class="rounded-bottom-3" %} {% include "ui/chart.html" chart-id="revenue-bg" size="sm" class="rounded-bottom" %}
</div> </div>

View File

@@ -1,12 +0,0 @@
<div class="card">
<div class="card-body">
<div class="d-flex">
<h3 class="card-title">Social referrals</h3>
<div class="ms-auto">
{% include "parts/dropdown/days.html" id="social-referrals" label="Select time range for sales data" %}
</div>
</div>
{% include "ui/chart.html" chart-id="social-referrals" legend=true %}
</div>
</div>

View File

@@ -1,14 +0,0 @@
<div class="card">
<div class="card-body">
<div class="subheader">Total Users</div>
<div class="d-flex align-items-baseline">
<div class="h1 mb-0 me-2">75,782</div>
<div class="me-auto">
{% include "ui/trending.html" value=2 %}
</div>
</div>
<div class="text-secondary mt-2">24,635 users increased from last month</div>
</div>
{% include "ui/chart.html" chart-id="visitors" height="6" %}
</div>

View File

@@ -1,12 +0,0 @@
<div class="card card-gradient card-gradient-danger">
<div class="card-body p-5 text-center">
<h3 class="card-title">Are you sure to delete this card?</h3>
<p class="text-secondary">If you delete this card, you will not be able to recover it.</p>
<div class="btn-list btn-list-center mt-5">
{% include "ui/button.html" text="Yes, delete it" color="danger" %}
{% include "ui/button.html" text="Cancel" %}
</div>
</div>
</div>

Some files were not shown because too many files have changed in this diff Show More