mirror of
https://github.com/tabler/tabler.git
synced 2025-12-23 02:14:26 +04:00
Compare commits
2 Commits
main
...
dev-css-la
| Author | SHA1 | Date | |
|---|---|---|---|
|
b639b0ea2c | ||
|
|
6674c2cf98 |
@@ -1,56 +0,0 @@
|
||||
---
|
||||
description: Tabler Project Rules
|
||||
globs:
|
||||
alwaysApply: true
|
||||
---
|
||||
|
||||
## Documentation Standards
|
||||
|
||||
- Always write documentation in English (not Polish) for technical content
|
||||
- Use clear, descriptive headings with proper hierarchy (##, ###)
|
||||
- Include practical examples with code snippets
|
||||
- Add explanations for each component's purpose and usage
|
||||
- Use consistent formatting for code blocks and examples
|
||||
|
||||
## CSS/SCSS Guidelines
|
||||
|
||||
- Follow Tabler's CSS custom properties pattern: `--#{$prefix}component-property`
|
||||
- Use semantic class names that describe purpose, not appearance
|
||||
- Maintain consistent spacing and indentation in SCSS files
|
||||
- Group related styles together with clear comments
|
||||
- Use Bootstrap-compatible class naming conventions
|
||||
|
||||
## Component Documentation Structure
|
||||
|
||||
- Start with a brief description of the component's purpose
|
||||
- Show basic usage examples first
|
||||
- Include variations and modifiers
|
||||
- Add accessibility considerations where relevant
|
||||
- Provide code examples that are copy-paste ready
|
||||
|
||||
## File Organization
|
||||
|
||||
- Keep documentation files in `docs/content/ui/components/`
|
||||
- Use consistent naming: lowercase with hyphens
|
||||
- Include frontmatter with title, summary, and description
|
||||
- Link to Bootstrap documentation when relevant
|
||||
|
||||
## Code Examples
|
||||
|
||||
- Use Liquid templating syntax for dynamic examples
|
||||
- Include both HTML and rendered output
|
||||
- Show responsive behavior where applicable
|
||||
- Demonstrate proper accessibility attributes
|
||||
|
||||
## Git Commit Messages
|
||||
|
||||
- Use English for commit messages
|
||||
- Follow conventional commit format when possible
|
||||
- Be descriptive about what was changed and why
|
||||
|
||||
## Project-Specific Conventions
|
||||
|
||||
- Tabler uses Bootstrap 5 as a foundation
|
||||
- Custom components extend Bootstrap functionality
|
||||
- Documentation should be comprehensive but concise
|
||||
- Examples should be practical and immediately usable
|
||||
5
.github/workflows/lockfiles.yaml
vendored
5
.github/workflows/lockfiles.yaml
vendored
@@ -13,9 +13,10 @@ jobs:
|
||||
steps:
|
||||
- name: Clone Tabler
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- name: Prevent lock file change
|
||||
uses: xalvarez/prevent-file-change-action@v2
|
||||
with:
|
||||
githubToken: ${{ secrets.GITHUB_TOKEN }}
|
||||
pattern: Gemfile.lock|pnpm-lock.json|pnpm-lock.yaml
|
||||
trustedAuthors: codecalm, BG-Software-BG, dependabot
|
||||
pattern: Gemfile.lock|pnpm-lock.json
|
||||
trustedAuthors: codecalm, dependabot
|
||||
|
||||
@@ -1,24 +1,5 @@
|
||||
# @tabler/core
|
||||
|
||||
## 1.4.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
- 9951fe9: Enhance button and hover animations
|
||||
- a200d30: Improve breadcrumb styles
|
||||
- 49ab9ea: Add new Tabler Illustrations
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- 6c4dd36: Update class names from `*-left`, `*-right` to `*-start`, `*-end`
|
||||
- 6fec73a: Fix relative line heights in buttons
|
||||
- db6200a: Remove `license_key` option from HugeRTE init object
|
||||
- e96f055: Add different favicon to development environment
|
||||
- 6c38a48: Update Bootstrap to v5.3.7
|
||||
- 2a12f72: Update CSS calculations to use `calc()`
|
||||
- 666a296: Fix list group item hoverable only with `.list-group-hoverable` class
|
||||
- cfd4cb6: Fix `.pagination-link` hover styles to non-active items
|
||||
|
||||
## 1.3.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@tabler/core",
|
||||
"version": "1.4.0",
|
||||
"version": "1.3.2",
|
||||
"description": "Premium and Open Source dashboard template with responsive and high quality UI.",
|
||||
"homepage": "https://tabler.io",
|
||||
"scripts": {
|
||||
@@ -8,7 +8,7 @@
|
||||
"build": "pnpm run clean && pnpm run css && pnpm run js && pnpm run copy && pnpm run generate-sri",
|
||||
"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-compile": "sass --no-source-map --load-path=node_modules --style expanded scss/:dist/css/",
|
||||
"css-compile": "sass scss/:dist/css/ --no-source-map --load-path=node_modules",
|
||||
"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-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\"",
|
||||
@@ -146,28 +146,28 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@popperjs/core": "^2.11.8",
|
||||
"bootstrap": "5.3.7"
|
||||
"bootstrap": "5.3.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@hotwired/turbo": "^8.0.13",
|
||||
"@melloware/coloris": "^0.25.0",
|
||||
"@melloware/coloris": "^0.24.2",
|
||||
"apexcharts": "3.54.1",
|
||||
"autosize": "^6.0.1",
|
||||
"choices.js": "^11.1.0",
|
||||
"clipboard": "^2.0.11",
|
||||
"countup.js": "^2.9.0",
|
||||
"countup.js": "^2.8.2",
|
||||
"dropzone": "^6.0.0-beta.2",
|
||||
"flatpickr": "^4.6.13",
|
||||
"fslightbox": "^3.6.1",
|
||||
"fullcalendar": "^6.1.18",
|
||||
"fslightbox": "^3.6.0",
|
||||
"fullcalendar": "^6.1.17",
|
||||
"hugerte": "^1.0.9",
|
||||
"imask": "^7.6.1",
|
||||
"jsvectormap": "^1.7.0",
|
||||
"jsvectormap": "^1.6.0",
|
||||
"list.js": "^2.3.1",
|
||||
"litepicker": "^2.0.12",
|
||||
"nouislider": "^15.8.1",
|
||||
"plyr": "^3.7.8",
|
||||
"signature_pad": "^5.0.10",
|
||||
"signature_pad": "^5.0.7",
|
||||
"star-rating.js": "^4.3.1",
|
||||
"tom-select": "^2.4.3",
|
||||
"typed.js": "^2.1.0"
|
||||
|
||||
@@ -1,30 +1,41 @@
|
||||
// Layout & components
|
||||
@import "bootstrap/scss/root";
|
||||
@import "bootstrap/scss/reboot";
|
||||
@import "bootstrap/scss/type";
|
||||
@import "bootstrap/scss/images";
|
||||
@import "bootstrap/scss/containers";
|
||||
@import "bootstrap/scss/grid";
|
||||
@import "bootstrap/scss/tables";
|
||||
@import "bootstrap/scss/forms";
|
||||
@import "bootstrap/scss/buttons";
|
||||
@import "bootstrap/scss/transitions";
|
||||
@import "bootstrap/scss/dropdown";
|
||||
@import "bootstrap/scss/button-group";
|
||||
@import "bootstrap/scss/nav";
|
||||
@import "bootstrap/scss/navbar";
|
||||
@import "bootstrap/scss/card";
|
||||
@import "bootstrap/scss/pagination";
|
||||
@import "bootstrap/scss/progress";
|
||||
@import "bootstrap/scss/list-group";
|
||||
@import "bootstrap/scss/toasts";
|
||||
@import "bootstrap/scss/modal";
|
||||
@import "bootstrap/scss/tooltip";
|
||||
@import "bootstrap/scss/popover";
|
||||
@import "bootstrap/scss/carousel";
|
||||
@import "bootstrap/scss/spinners";
|
||||
@import "bootstrap/scss/offcanvas";
|
||||
@import "bootstrap/scss/placeholders";
|
||||
@layer props {
|
||||
@import "bootstrap/scss/root";
|
||||
}
|
||||
|
||||
@layer reset {
|
||||
@import "bootstrap/scss/reboot";
|
||||
@import "bootstrap/scss/type";
|
||||
}
|
||||
|
||||
@layer components {
|
||||
@import "bootstrap/scss/images";
|
||||
@import "bootstrap/scss/containers";
|
||||
@import "bootstrap/scss/grid";
|
||||
@import "bootstrap/scss/tables";
|
||||
@import "bootstrap/scss/forms";
|
||||
@import "bootstrap/scss/buttons";
|
||||
@import "bootstrap/scss/transitions";
|
||||
@import "bootstrap/scss/dropdown";
|
||||
@import "bootstrap/scss/button-group";
|
||||
@import "bootstrap/scss/nav";
|
||||
@import "bootstrap/scss/navbar";
|
||||
@import "bootstrap/scss/card";
|
||||
@import "bootstrap/scss/breadcrumb";
|
||||
@import "bootstrap/scss/pagination";
|
||||
@import "bootstrap/scss/progress";
|
||||
@import "bootstrap/scss/list-group";
|
||||
@import "bootstrap/scss/toasts";
|
||||
@import "bootstrap/scss/modal";
|
||||
@import "bootstrap/scss/tooltip";
|
||||
@import "bootstrap/scss/popover";
|
||||
@import "bootstrap/scss/carousel";
|
||||
@import "bootstrap/scss/spinners";
|
||||
@import "bootstrap/scss/offcanvas";
|
||||
@import "bootstrap/scss/placeholders";
|
||||
}
|
||||
|
||||
// Utilities
|
||||
@import "bootstrap/scss/utilities/api";
|
||||
@layer utilities {
|
||||
@import "bootstrap/scss/utilities/api";
|
||||
}
|
||||
@@ -1,84 +1,87 @@
|
||||
@layer props, reset, layout, components, themes, vendors, utils;
|
||||
|
||||
@import "config";
|
||||
|
||||
@layer props {
|
||||
@import "props";
|
||||
}
|
||||
|
||||
@import "bootstrap-components";
|
||||
|
||||
@import "props";
|
||||
@layer layout {
|
||||
@import "fonts/webfonts";
|
||||
@import "layout/root";
|
||||
@import "layout/animations";
|
||||
@import "layout/core";
|
||||
@import "layout/navbar";
|
||||
@import "layout/page";
|
||||
@import "layout/footer";
|
||||
@import "layout/dark";
|
||||
}
|
||||
|
||||
@import "fonts/webfonts";
|
||||
@layer components {
|
||||
@import "ui/accordion";
|
||||
@import "ui/alerts";
|
||||
@import "ui/avatars";
|
||||
@import "ui/badges";
|
||||
@import "ui/breadcrumbs";
|
||||
@import "ui/buttons";
|
||||
@import "ui/button-group";
|
||||
@import "ui/calendars";
|
||||
@import "ui/carousel";
|
||||
@import "ui/cards";
|
||||
@import "ui/close";
|
||||
@import "ui/dropdowns";
|
||||
@import "ui/datagrid";
|
||||
@import "ui/empty";
|
||||
@import "ui/grid";
|
||||
@import "ui/icons";
|
||||
@import "ui/images";
|
||||
@import "ui/forms";
|
||||
@import "ui/forms/form-icon";
|
||||
@import "ui/forms/form-colorinput";
|
||||
@import "ui/forms/form-imagecheck";
|
||||
@import "ui/forms/form-selectgroup";
|
||||
@import "ui/forms/form-custom";
|
||||
@import "ui/forms/form-check";
|
||||
@import "ui/forms/validation";
|
||||
@import "ui/legend";
|
||||
@import "ui/lists";
|
||||
@import "ui/loaders";
|
||||
@import "ui/login";
|
||||
@import "ui/modals";
|
||||
@import "ui/nav";
|
||||
@import "ui/stars";
|
||||
@import "ui/pagination";
|
||||
@import "ui/popovers";
|
||||
@import "ui/progress";
|
||||
@import "ui/ribbons";
|
||||
@import "ui/markdown";
|
||||
@import "ui/placeholder";
|
||||
@import "ui/segmented";
|
||||
@import "ui/steps";
|
||||
@import "ui/status";
|
||||
@import "ui/switch-icon";
|
||||
@import "ui/tables";
|
||||
@import "ui/tags";
|
||||
@import "ui/toasts";
|
||||
@import "ui/toolbar";
|
||||
@import "ui/tracking";
|
||||
@import "ui/timeline";
|
||||
@import "ui/type";
|
||||
@import "ui/charts";
|
||||
@import "ui/offcanvas";
|
||||
@import "ui/chat";
|
||||
@import "ui/signature";
|
||||
@import "helpers/index";
|
||||
}
|
||||
|
||||
@import "layout/root";
|
||||
@import "layout/animations";
|
||||
@import "layout/core";
|
||||
@import "layout/navbar";
|
||||
@import "layout/page";
|
||||
@import "layout/footer";
|
||||
@import "layout/dark";
|
||||
|
||||
@import "ui/accordion";
|
||||
@import "ui/alerts";
|
||||
@import "ui/avatars";
|
||||
@import "ui/badges";
|
||||
@import "ui/breadcrumbs";
|
||||
@import "ui/buttons";
|
||||
@import "ui/button-group";
|
||||
@import "ui/calendars";
|
||||
@import "ui/carousel";
|
||||
@import "ui/cards";
|
||||
@import "ui/close";
|
||||
@import "ui/dropdowns";
|
||||
@import "ui/datagrid";
|
||||
@import "ui/empty";
|
||||
@import "ui/grid";
|
||||
@import "ui/icons";
|
||||
@import "ui/images";
|
||||
@import "ui/forms";
|
||||
@import "ui/forms/form-icon";
|
||||
@import "ui/forms/form-colorinput";
|
||||
@import "ui/forms/form-imagecheck";
|
||||
@import "ui/forms/form-selectgroup";
|
||||
@import "ui/forms/form-custom";
|
||||
@import "ui/forms/form-check";
|
||||
@import "ui/forms/validation";
|
||||
@import "ui/legend";
|
||||
@import "ui/lists";
|
||||
@import "ui/loaders";
|
||||
@import "ui/login";
|
||||
@import "ui/modals";
|
||||
@import "ui/nav";
|
||||
@import "ui/stars";
|
||||
@import "ui/pagination";
|
||||
@import "ui/popovers";
|
||||
@import "ui/progress";
|
||||
@import "ui/ribbons";
|
||||
@import "ui/markdown";
|
||||
@import "ui/placeholder";
|
||||
@import "ui/segmented";
|
||||
@import "ui/steps";
|
||||
@import "ui/status";
|
||||
@import "ui/switch-icon";
|
||||
@import "ui/tables";
|
||||
@import "ui/tags";
|
||||
@import "ui/toasts";
|
||||
@import "ui/toolbar";
|
||||
@import "ui/tracking";
|
||||
@import "ui/timeline";
|
||||
@import "ui/type";
|
||||
@import "ui/charts";
|
||||
@import "ui/offcanvas";
|
||||
@import "ui/chat";
|
||||
@import "ui/signature";
|
||||
|
||||
@import "helpers/index";
|
||||
|
||||
@import "utils/background";
|
||||
@import "utils/colors";
|
||||
@import "utils/scroll";
|
||||
@import "utils/sizing";
|
||||
@import "utils/opacity";
|
||||
@import "utils/shadow";
|
||||
@import "utils/text";
|
||||
@import "utils/hover";
|
||||
|
||||
@import "debug";
|
||||
|
||||
|
||||
@import "debug";
|
||||
@layer utilities {
|
||||
@import "utils/background";
|
||||
@import "utils/colors";
|
||||
@import "utils/scroll";
|
||||
@import "utils/sizing";
|
||||
@import "utils/opacity";
|
||||
@import "utils/shadow";
|
||||
@import "utils/text";
|
||||
}
|
||||
@@ -1,49 +0,0 @@
|
||||
$debug: false;
|
||||
|
||||
@if $debug {
|
||||
$colors: (
|
||||
"blue": $blue,
|
||||
"azure": $azure,
|
||||
"indigo": $indigo,
|
||||
"purple": $purple,
|
||||
"pink": $pink,
|
||||
"red": $red,
|
||||
"orange": $orange,
|
||||
"yellow": $yellow,
|
||||
"lime": $lime,
|
||||
"green": $green,
|
||||
"teal": $teal,
|
||||
"cyan": $cyan,
|
||||
);
|
||||
|
||||
@each $name, $color in $colors {
|
||||
@debug ("#{$name}: '#{$color}'");
|
||||
@debug ("#{$name}-100: '#{tint-color($color, 8)}'");
|
||||
@debug ("#{$name}-200: '#{tint-color($color, 6)}'");
|
||||
@debug ("#{$name}-300: '#{tint-color($color, 4)}'");
|
||||
@debug ("#{$name}-400: '#{tint-color($color, 2)}'");
|
||||
@debug ("#{$name}-500: '#{$color}'");
|
||||
@debug ("#{$name}-600: '#{shade-color($color, 2)}'");
|
||||
@debug ("#{$name}-700: '#{shade-color($color, 4)}'");
|
||||
@debug ("#{$name}-800: '#{shade-color($color, 6)}'");
|
||||
@debug ("#{$name}-900: '#{shade-color($color, 8)}'");
|
||||
}
|
||||
|
||||
@debug ("gray: '#{$gray-500}'");
|
||||
@debug ("gray-100: '#{$gray-100}'");
|
||||
@debug ("gray-200: '#{$gray-200}'");
|
||||
@debug ("gray-300: '#{$gray-300}'");
|
||||
@debug ("gray-400: '#{$gray-400}'");
|
||||
@debug ("gray-500: '#{$gray-500}'");
|
||||
@debug ("gray-600: '#{$gray-600}'");
|
||||
@debug ("gray-700: '#{$gray-700}'");
|
||||
@debug ("gray-800: '#{$gray-800}'");
|
||||
@debug ("gray-900: '#{$gray-900}'");
|
||||
|
||||
@debug ("border-color: '#{$border-color}'");
|
||||
@debug ("text-secondary: '#{$text-secondary}'");
|
||||
|
||||
@each $name, $color in $social-colors {
|
||||
@debug ("#{$name}: '#{$color}'");
|
||||
}
|
||||
}
|
||||
@@ -26,7 +26,7 @@ $font-icons: () !default;
|
||||
$font-family-sans-serif: unquote("#{if($font-local, "#{$font-local}, ", ' ')}#{if($font-google, "#{$font-google}, ", ' ')}") 'Inter Var', Inter, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif !default;
|
||||
$font-family-monospace: unquote("#{if($font-google-monospaced, "#{$font-google-monospaced}, ", '')}") Monaco, Consolas, Liberation Mono, Courier New, monospace !default;
|
||||
$font-family-serif: "Georgia", "Times New Roman", times, serif !default;
|
||||
$font-family-comic: "Comic Sans MS", "Comic Sans", "Chalkboard SE", "Comic Neue", sans-serif, cursive !default;
|
||||
$font-family-comic: "Comic Sans MS", "Comic Sans", 'Chalkboard SE', 'Comic Neue', sans-serif, cursive !default;
|
||||
|
||||
//Icons
|
||||
$icon-stroke-width: 1.5 !default;
|
||||
@@ -52,9 +52,9 @@ $line-height-700: 3rem !default;
|
||||
|
||||
$font-size-base: 0.875rem !default;
|
||||
|
||||
$spacing-wide: 0.04em !default;
|
||||
$spacing-wide: .04em !default;
|
||||
$spacing-normal: 0 !default;
|
||||
$spacing-tight: -0.04em !default;
|
||||
$spacing-tight: -.04em !default;
|
||||
|
||||
$body-letter-spacing: 0 !default;
|
||||
|
||||
@@ -68,12 +68,12 @@ $headings-font-weight: var(--#{$prefix}font-weight-bold) !default;
|
||||
$headings-margin-bottom: var(--#{$prefix}spacer) !default;
|
||||
|
||||
$font-weights: (
|
||||
"light": $font-weight-light,
|
||||
"normal": $font-weight-normal,
|
||||
"medium": $font-weight-medium,
|
||||
"bold": $font-weight-bold,
|
||||
"black": $font-weight-black,
|
||||
"headings": $headings-font-weight,
|
||||
'light': $font-weight-light,
|
||||
'normal': $font-weight-normal,
|
||||
'medium': $font-weight-medium,
|
||||
'bold': $font-weight-bold,
|
||||
'black': $font-weight-black,
|
||||
'headings': $headings-font-weight,
|
||||
) !default;
|
||||
|
||||
$line-height-base: divide(1.25rem, $font-size-base) !default;
|
||||
@@ -99,8 +99,8 @@ $h5-line-height: 1rem !default;
|
||||
$h6-font-size: 0.625rem !default;
|
||||
$h6-line-height: 1rem !default;
|
||||
|
||||
$font-size-reative-xs: 0.71428571em !default;
|
||||
$font-size-reative-sm: 0.85714285em !default;
|
||||
$font-size-reative-xs: .71428571em !default;
|
||||
$font-size-reative-sm: .85714285em !default;
|
||||
$font-size-reative-md: 1em !default;
|
||||
|
||||
$font-sizes: (
|
||||
@@ -210,7 +210,7 @@ $active-border-color: var(--#{$prefix}primary) !default;
|
||||
$hover-bg: rgba(var(--#{$prefix}secondary-rgb), 0.08) !default;
|
||||
|
||||
$disabled-bg: var(--#{$prefix}bg-surface-secondary) !default;
|
||||
$disabled-color: color-transparent(var(--#{$prefix}body-color), 0.4) !default;
|
||||
$disabled-color: color-transparent(var(--#{$prefix}body-color), .4) !default;
|
||||
|
||||
$primary: $blue !default;
|
||||
$secondary: $text-secondary !default;
|
||||
@@ -341,7 +341,7 @@ $kbd-border-radius: var(--#{$prefix}border-radius) !default;
|
||||
|
||||
// Avatars
|
||||
$avatar-size: 2.5rem !default;
|
||||
$avatar-status-size: 0.75rem !default;
|
||||
$avatar-status-size: .75rem !default;
|
||||
$avatar-font-size: 1rem !default;
|
||||
$avatar-icon-size: 1.5rem !default;
|
||||
$avatar-brand-size: 1.25rem !default;
|
||||
@@ -349,52 +349,52 @@ $avatar-bg: var(--#{$prefix}bg-surface-secondary) !default;
|
||||
$avatar-sizes: (
|
||||
"xxs": (
|
||||
size: 1rem,
|
||||
font-size: 0.5rem,
|
||||
icon-size: 0.5rem,
|
||||
status-size: 0.25rem,
|
||||
brand-size: 0.5rem,
|
||||
font-size: .5rem,
|
||||
icon-size: .5rem,
|
||||
status-size: .25rem,
|
||||
brand-size: .5rem
|
||||
),
|
||||
"xs": (
|
||||
size: 1.25rem,
|
||||
font-size: $h6-font-size,
|
||||
icon-size: 0.75rem,
|
||||
status-size: 0.375rem,
|
||||
brand-size: 0.75rem,
|
||||
icon-size: .75rem,
|
||||
status-size: .375rem,
|
||||
brand-size: .75rem
|
||||
),
|
||||
"sm": (
|
||||
size: 2rem,
|
||||
font-size: $h5-font-size,
|
||||
icon-size: 1.5rem,
|
||||
status-size: 0.5rem,
|
||||
brand-size: 1rem,
|
||||
status-size: .5rem,
|
||||
brand-size: 1rem
|
||||
),
|
||||
"md": (
|
||||
size: 2.5rem,
|
||||
font-size: $h4-font-size,
|
||||
icon-size: 1.5rem,
|
||||
status-size: 0.75rem,
|
||||
brand-size: 1.25rem,
|
||||
status-size: .75rem,
|
||||
brand-size: 1.25rem
|
||||
),
|
||||
"lg": (
|
||||
size: 3rem,
|
||||
font-size: $h2-font-size,
|
||||
icon-size: 2rem,
|
||||
status-size: 0.75rem,
|
||||
brand-size: 1.25rem,
|
||||
status-size: .75rem,
|
||||
brand-size: 1.25rem
|
||||
),
|
||||
"xl": (
|
||||
size: 5rem,
|
||||
font-size: 2rem,
|
||||
icon-size: 3rem,
|
||||
status-size: 1rem,
|
||||
brand-size: 1.25rem,
|
||||
brand-size: 1.25rem
|
||||
),
|
||||
"2xl": (
|
||||
size: 7rem,
|
||||
font-size: 3rem,
|
||||
icon-size: 5rem,
|
||||
status-size: 1rem,
|
||||
brand-size: 2rem,
|
||||
brand-size: 2rem
|
||||
),
|
||||
) !default;
|
||||
$avatar-border-radius: var(--#{$prefix}border-radius) !default;
|
||||
@@ -586,71 +586,41 @@ $badge-color: var(--#{$prefix}secondary) !default;
|
||||
$badge-bg-color: var(--#{$prefix}bg-surface-secondary) !default;
|
||||
|
||||
// Buttons
|
||||
$input-btn-border-width: var(--#{$prefix}border-width) !default;
|
||||
$input-btn-font-family: var(--#{$prefix}body-font-family) !default;
|
||||
$input-btn-focus-width: 0.25rem !default;
|
||||
|
||||
$input-btn-padding-y-sm: 0.3125rem !default;
|
||||
$input-btn-padding-x-sm: 0.5rem !default;
|
||||
$input-btn-font-size-sm: $h5-font-size !default;
|
||||
$input-btn-line-height-sm: divide(1rem, $input-btn-font-size-sm) !default;
|
||||
$input-btn-icon-size-sm: 1rem !default;
|
||||
|
||||
$input-btn-padding-y: 0.5625rem !default;
|
||||
$input-btn-padding-x: 1rem !default;
|
||||
$input-btn-line-height: 1.25rem !default;
|
||||
$input-btn-line-height: $line-height-base !default;
|
||||
$input-btn-font-size: $font-size-base !default;
|
||||
$input-btn-font-family: var(--#{$prefix}body-font-face) !default;
|
||||
$input-btn-padding-y: 0.5rem - 0.0625rem !default;
|
||||
$input-btn-icon-size: $icon-size !default;
|
||||
|
||||
$input-btn-padding-y-lg: 0.6875rem !default;
|
||||
$input-btn-font-size-sm: $h5-font-size !default;
|
||||
$input-btn-padding-x-sm: 0.25rem !default;
|
||||
$input-btn-padding-y-sm: 0.125rem - 0.0625rem !default;
|
||||
$input-btn-line-height-sm: 1rem !default;
|
||||
$input-btn-icon-size-sm: 1rem !default;
|
||||
|
||||
$input-btn-font-size-lg: $h2-font-size !default;
|
||||
$input-btn-padding-x-lg: 1.5rem !default;
|
||||
$input-btn-line-height-lg: 1.5rem !default;
|
||||
$input-btn-font-size-lg: $h3-font-size !default;
|
||||
$input-btn-icon-size-lg: 1.5rem !default;
|
||||
|
||||
$input-btn-padding-y-xl: 0.6875rem !default;
|
||||
$input-btn-padding-x-xl: 2rem !default;
|
||||
$input-btn-font-size-xl: $h1-font-size !default;
|
||||
$input-btn-line-height-xl: divide(2rem, $input-btn-font-size-lg) !default;
|
||||
$input-btn-icon-size-xl: 2rem !default;
|
||||
$input-btn-padding-y-lg: 0.75rem - 0.0625rem !default;
|
||||
$input-btn-line-height-lg: 2rem !default;
|
||||
$input-btn-icon-size-lg: 2rem !default;
|
||||
|
||||
$input-btn-focus-width: 0.25rem !default;
|
||||
|
||||
// Inputs
|
||||
$input-height: null !default;
|
||||
$input-height-sm: null !default;
|
||||
$input-height-lg: null !default;
|
||||
$input-border-radius: var(--#{$prefix}border-radius) !default;
|
||||
$input-padding-y: $input-btn-padding-y !default;
|
||||
$input-padding-x: $input-btn-padding-x !default;
|
||||
$input-color: var(--#{$prefix}body-color) !default;
|
||||
$input-focus-color: var(--#{$prefix}body-color) !default;
|
||||
$input-box-shadow: var(--#{$prefix}shadow-input) !default;
|
||||
|
||||
$input-border-width: $input-btn-border-width !default;
|
||||
$input-line-height: $input-btn-line-height !default;
|
||||
$input-height-border: calc(#{$input-border-width} * 2) !default;
|
||||
|
||||
$input-padding-y-sm: $input-btn-padding-y-sm !default;
|
||||
$input-padding-x-sm: $input-btn-padding-x-sm !default;
|
||||
$input-font-size-sm: $input-btn-font-size-sm !default;
|
||||
|
||||
$input-padding-y-lg: $input-btn-padding-y-lg !default;
|
||||
$input-padding-x-lg: $input-btn-padding-x-lg !default;
|
||||
$input-font-size-lg: $input-btn-font-size-lg !default;
|
||||
|
||||
$input-height-inner: add($input-line-height, calc($input-padding-y * 2)) !default;
|
||||
$input-height-inner-half: add($input-line-height, $input-padding-y) !default;
|
||||
$input-height-inner-quarter: add($input-line-height, calc($input-padding-y * 0.5)) !default;
|
||||
|
||||
$input-height: add($input-line-height, add(calc($input-padding-y * 2), $input-height-border, false)) !default;
|
||||
$input-height-sm: add($input-line-height, add(calc($input-padding-y-sm * 2), $input-height-border, false)) !default;
|
||||
$input-height-lg: add($input-line-height, add(calc($input-padding-y-lg * 2), $input-height-border, false)) !default;
|
||||
|
||||
// Buttons
|
||||
$btn-border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
|
||||
$btn-border-radius-lg: var(--#{$prefix}border-radius-lg) !default;
|
||||
|
||||
$btn-disabled-opacity: 0.4 !default;
|
||||
$btn-disabled-opacity: .4 !default;
|
||||
$btn-padding-x: 1rem !default;
|
||||
$btn-font-weight: var(--#{$prefix}font-weight-medium) !default;
|
||||
$btn-border-color: var(--#{$prefix}border-color) !default;
|
||||
$btn-border-radius: var(--#{$prefix}border-radius) !default;
|
||||
@@ -841,7 +811,7 @@ $navbar-toggler-focus-width: 0 !default;
|
||||
$navbar-overlap-height: 9rem !default;
|
||||
|
||||
$navbar-nav-link-padding-x: $nav-link-padding-x !default;
|
||||
$navbar-nav-link-hover-bg: rgba(0, 0, 0, 0.04) !default;
|
||||
$navbar-nav-link-hover-bg: rgba(0, 0, 0, .04) !default;
|
||||
|
||||
$navbar-active-border-color: var(--#{$prefix}primary) !default;
|
||||
|
||||
@@ -858,8 +828,8 @@ $popover-bg: var(--#{$prefix}bg-surface) !default;
|
||||
$popover-header-bg: transparent !default;
|
||||
$popover-border-color: var(--#{$prefix}border-color) !default;
|
||||
$popover-body-color: inherit !default;
|
||||
$popover-body-padding-x: 0.5rem !default;
|
||||
$popover-body-padding-y: 0.5rem !default;
|
||||
$popover-body-padding-x: .5rem !default;
|
||||
$popover-body-padding-y: .5rem !default;
|
||||
$popover-box-shadow: var(--#{$prefix}shadow-lg) !default;
|
||||
|
||||
// Footer
|
||||
|
||||
@@ -1,50 +1,39 @@
|
||||
@keyframes pulse {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: scale3d(.8, .8, .8)
|
||||
}
|
||||
|
||||
14% {
|
||||
transform: scale(1.25);
|
||||
50% {
|
||||
transform: scale3d(1, 1, 1);
|
||||
opacity: 1
|
||||
}
|
||||
|
||||
28% {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
42% {
|
||||
transform: scale(1.25);
|
||||
}
|
||||
|
||||
70% {
|
||||
transform: scale(1);
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale3d(.8, .8, .8)
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes tada {
|
||||
0% {
|
||||
transform: scale3d(1, 1, 1);
|
||||
transform: scale3d(1, 1, 1)
|
||||
}
|
||||
|
||||
10%,
|
||||
5% {
|
||||
transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -5deg);
|
||||
10%, 5% {
|
||||
transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -5deg)
|
||||
}
|
||||
|
||||
15%,
|
||||
25%,
|
||||
35%,
|
||||
45% {
|
||||
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 5deg);
|
||||
15%, 25%, 35%, 45% {
|
||||
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 5deg)
|
||||
}
|
||||
|
||||
20%,
|
||||
30%,
|
||||
40% {
|
||||
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -5deg);
|
||||
20%, 30%, 40% {
|
||||
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -5deg)
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale3d(1, 1, 1);
|
||||
transform: scale3d(1, 1, 1)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -72,27 +61,3 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shake {
|
||||
0% {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
20% {
|
||||
transform: scale3d(0.9, 0.9, 0.9) rotate(-5deg);
|
||||
}
|
||||
|
||||
50%,
|
||||
70%,
|
||||
90% {
|
||||
transform: scale3d(1.25, 1.25, 1.25) rotate(5deg);
|
||||
}
|
||||
|
||||
60%,
|
||||
80% {
|
||||
transform: scale3d(1.25, 1.25, 1.25) rotate(-5deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -160,8 +160,7 @@ Navbar
|
||||
&.navbar-vertical {
|
||||
box-shadow: inset calc(-1 * var(--#{$prefix}navbar-border-width)) 0 0 0 var(--#{$prefix}navbar-border-color);
|
||||
|
||||
&.navbar-right,
|
||||
&.navbar-end {
|
||||
&.navbar-right {
|
||||
box-shadow: inset calc(1 * var(--#{$prefix}navbar-border-width)) 0 0 0 var(--#{$prefix}navbar-border-color);
|
||||
}
|
||||
}
|
||||
@@ -173,8 +172,7 @@ Navbar
|
||||
}
|
||||
}
|
||||
|
||||
&.navbar-vertical.navbar-right,
|
||||
&.navbar-vertical.navbar-end {
|
||||
&.navbar-vertical.navbar-right {
|
||||
~ .navbar,
|
||||
~ .page-wrapper {
|
||||
margin-left: 0;
|
||||
@@ -324,8 +322,7 @@ Navbar vertical
|
||||
overflow-y: scroll;
|
||||
padding: 0;
|
||||
|
||||
&.navbar-right,
|
||||
&.navbar-end {
|
||||
&.navbar-right {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
@@ -367,8 +364,7 @@ Navbar vertical
|
||||
}
|
||||
}
|
||||
|
||||
&.navbar-right ~ .page,
|
||||
&.navbar-end ~ .page {
|
||||
&.navbar-right ~ .page {
|
||||
padding-left: 0;
|
||||
padding-right: $sidebar-width;
|
||||
}
|
||||
|
||||
@@ -1,2 +1,5 @@
|
||||
@import "config";
|
||||
@import "ui/flags";
|
||||
|
||||
@layer components {
|
||||
@import "ui/flags";
|
||||
}
|
||||
@@ -1,13 +1,16 @@
|
||||
@import "config";
|
||||
@import "variables";
|
||||
@import "utilities-marketing";
|
||||
|
||||
@import "marketing/core";
|
||||
@import "marketing/hero";
|
||||
@import "marketing/browser";
|
||||
@import "marketing/sections";
|
||||
@import "marketing/filters";
|
||||
@import "marketing/pricing";
|
||||
@import "marketing/shape";
|
||||
@layer components {
|
||||
@import "marketing/core";
|
||||
@import "marketing/hero";
|
||||
@import "marketing/browser";
|
||||
@import "marketing/sections";
|
||||
@import "marketing/filters";
|
||||
@import "marketing/pricing";
|
||||
@import "marketing/shape";
|
||||
}
|
||||
|
||||
@import "bootstrap/scss/utilities/api";
|
||||
@layer utilities {
|
||||
@import "bootstrap/scss/utilities/api";
|
||||
}
|
||||
@@ -1,2 +1,5 @@
|
||||
@import "config";
|
||||
@import "ui/payments";
|
||||
|
||||
@layer components {
|
||||
@import "ui/payments";
|
||||
}
|
||||
|
||||
@@ -1,2 +1,5 @@
|
||||
@import "config";
|
||||
@import "ui/social";
|
||||
|
||||
@layer components {
|
||||
@import "ui/social";
|
||||
}
|
||||
@@ -1,6 +1,7 @@
|
||||
@import "config";
|
||||
|
||||
[data-bs-theme-base="slate"] {
|
||||
@layer themes {
|
||||
[data-bs-theme-base="slate"] {
|
||||
--#{$prefix}gray-50: #f8fafc;
|
||||
--#{$prefix}gray-100: #f1f5f9;
|
||||
--#{$prefix}gray-200: #e2e8f0;
|
||||
@@ -12,9 +13,9 @@
|
||||
--#{$prefix}gray-800: #1e293b;
|
||||
--#{$prefix}gray-900: #0f172a;
|
||||
--#{$prefix}gray-950: #020617;
|
||||
}
|
||||
}
|
||||
|
||||
[data-bs-theme-base="gray"] {
|
||||
[data-bs-theme-base="gray"] {
|
||||
--#{$prefix}gray-50: #f9fafb;
|
||||
--#{$prefix}gray-100: #f3f4f6;
|
||||
--#{$prefix}gray-200: #e5e7eb;
|
||||
@@ -26,9 +27,9 @@
|
||||
--#{$prefix}gray-800: #1f2937;
|
||||
--#{$prefix}gray-900: #111827;
|
||||
--#{$prefix}gray-950: #030712;
|
||||
}
|
||||
}
|
||||
|
||||
[data-bs-theme-base="zinc"] {
|
||||
[data-bs-theme-base="zinc"] {
|
||||
--#{$prefix}gray-50: #fafafa;
|
||||
--#{$prefix}gray-100: #f4f4f5;
|
||||
--#{$prefix}gray-200: #e4e4e7;
|
||||
@@ -40,9 +41,9 @@
|
||||
--#{$prefix}gray-800: #27272a;
|
||||
--#{$prefix}gray-900: #18181b;
|
||||
--#{$prefix}gray-950: #09090b;
|
||||
}
|
||||
}
|
||||
|
||||
[data-bs-theme-base="neutral"] {
|
||||
[data-bs-theme-base="neutral"] {
|
||||
--#{$prefix}gray-50: #fafafa;
|
||||
--#{$prefix}gray-100: #f5f5f5;
|
||||
--#{$prefix}gray-200: #e5e5e5;
|
||||
@@ -54,9 +55,9 @@
|
||||
--#{$prefix}gray-800: #262626;
|
||||
--#{$prefix}gray-900: #171717;
|
||||
--#{$prefix}gray-950: #0a0a0a;
|
||||
}
|
||||
}
|
||||
|
||||
[data-bs-theme-base="stone"] {
|
||||
[data-bs-theme-base="stone"] {
|
||||
--#{$prefix}gray-50: #fafaf9;
|
||||
--#{$prefix}gray-100: #f5f5f4;
|
||||
--#{$prefix}gray-200: #e7e5e4;
|
||||
@@ -68,9 +69,9 @@
|
||||
--#{$prefix}gray-800: #292524;
|
||||
--#{$prefix}gray-900: #1c1917;
|
||||
--#{$prefix}gray-950: #0c0a09;
|
||||
}
|
||||
}
|
||||
|
||||
[data-bs-theme-base="pink"] {
|
||||
[data-bs-theme-base="pink"] {
|
||||
--#{$prefix}gray-50: #fdf2f8;
|
||||
--#{$prefix}gray-100: #fce7f3;
|
||||
--#{$prefix}gray-200: #fbcfe8;
|
||||
@@ -82,22 +83,22 @@
|
||||
--#{$prefix}gray-800: #9d174d;
|
||||
--#{$prefix}gray-900: #831843;
|
||||
--#{$prefix}gray-950: #500724;
|
||||
}
|
||||
}
|
||||
|
||||
@each $name, $value in $extra-colors {
|
||||
@each $name, $value in $extra-colors {
|
||||
[data-bs-theme-primary="#{$name}"] {
|
||||
--#{$prefix}primary: #{$value};
|
||||
--#{$prefix}primary-rgb: #{to-rgb($value)};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $value in (0, .5, 1, 1.5, 2) {
|
||||
@each $value in (0, .5, 1, 1.5, 2) {
|
||||
[data-bs-theme-radius="#{$value}"] {
|
||||
--#{$prefix}border-radius-scale: #{$value};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[data-bs-theme-primary="inverted"] {
|
||||
[data-bs-theme-primary="inverted"] {
|
||||
--#{$prefix}primary: var(--#{$prefix}gray-800);
|
||||
--#{$prefix}primary-fg: var(--#{$prefix}light);
|
||||
--#{$prefix}primary-rgb: #{to-rgb($dark)};
|
||||
@@ -108,9 +109,9 @@
|
||||
--#{$prefix}primary-fg: var(--#{$prefix}dark);
|
||||
--#{$prefix}primary-rgb: #{to-rgb($light)};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $name, $value in (monospace: $font-family-monospace, sans-serif: $font-family-sans-serif, serif: $font-family-serif, comic: $font-family-comic) {
|
||||
@each $name, $value in (monospace: $font-family-monospace, sans-serif: $font-family-sans-serif, serif: $font-family-serif, comic: $font-family-comic) {
|
||||
[data-bs-theme-font="#{$name}"] {
|
||||
--#{$prefix}body-font-family: var(--#{$prefix}font-#{$name});
|
||||
|
||||
@@ -118,4 +119,5 @@
|
||||
--#{$prefix}body-font-size: 80%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,16 +1,18 @@
|
||||
@import "config";
|
||||
|
||||
@import "vendor/nouislider";
|
||||
@import "vendor/litepicker";
|
||||
@import "vendor/tom-select";
|
||||
@import "vendor/apexcharts";
|
||||
@import "vendor/jsvectormap";
|
||||
@import "vendor/dropzone";
|
||||
@import "vendor/fslightbox";
|
||||
@import "vendor/plyr";
|
||||
@import "vendor/wysiwyg";
|
||||
@import "vendor/stars-rating";
|
||||
@import "vendor/coloris";
|
||||
@import "vendor/typed";
|
||||
@import "vendor/turbo";
|
||||
@import "vendor/fullcalendar";
|
||||
@layer vendors {
|
||||
@import "vendor/nouislider";
|
||||
@import "vendor/litepicker";
|
||||
@import "vendor/tom-select";
|
||||
@import "vendor/apexcharts";
|
||||
@import "vendor/jsvectormap";
|
||||
@import "vendor/dropzone";
|
||||
@import "vendor/fslightbox";
|
||||
@import "vendor/plyr";
|
||||
@import "vendor/wysiwyg";
|
||||
@import "vendor/stars-rating";
|
||||
@import "vendor/coloris";
|
||||
@import "vendor/typed";
|
||||
@import "vendor/turbo";
|
||||
@import "vendor/fullcalendar";
|
||||
}
|
||||
@@ -1,23 +1,7 @@
|
||||
.breadcrumb {
|
||||
--#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x};
|
||||
--#{$prefix}breadcrumb-padding-y: #{$breadcrumb-padding-y};
|
||||
--#{$prefix}breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom};
|
||||
--#{$prefix}breadcrumb-font-size: #{$breadcrumb-font-size};
|
||||
--#{$prefix}breadcrumb-bg: #{$breadcrumb-bg};
|
||||
--#{$prefix}breadcrumb-border-radius: #{$breadcrumb-border-radius};
|
||||
--#{$prefix}breadcrumb-divider-color: #{$breadcrumb-divider-color};
|
||||
--#{$prefix}breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x};
|
||||
--#{$prefix}breadcrumb-item-active-color: #{$breadcrumb-active-color};
|
||||
--#{$prefix}breadcrumb-item-active-font-weight: #{$breadcrumb-active-font-weight};
|
||||
--#{$prefix}breadcrumb-item-disabled-color: #{$breadcrumb-disabled-color};
|
||||
--#{$prefix}breadcrumb-link-color: #{$breadcrumb-link-color};
|
||||
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@include font-size(var(--#{$prefix}breadcrumb-font-size));
|
||||
list-style: none;
|
||||
background-color: var(--#{$prefix}breadcrumb-bg);
|
||||
@include border-radius(var(--#{$prefix}breadcrumb-border-radius));
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: transparent;
|
||||
@@ -37,7 +21,6 @@
|
||||
|
||||
.breadcrumb-item {
|
||||
&.active {
|
||||
color: var(--#{$prefix}breadcrumb-item-active-color);
|
||||
font-weight: var(--#{$prefix}breadcrumb-item-active-font-weight);
|
||||
|
||||
a {
|
||||
@@ -58,20 +41,6 @@
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
& + & {
|
||||
padding-left: var(--#{$prefix}breadcrumb-item-padding-x);
|
||||
|
||||
&::before {
|
||||
float: left;
|
||||
padding-right: var(--#{$prefix}breadcrumb-item-padding-x);
|
||||
color: var(--#{$prefix}breadcrumb-divider-color);
|
||||
content: var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider));
|
||||
/*rtl:raw:
|
||||
transform: scaleX(-1);
|
||||
*/
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $name, $symbol in $breadcrumb-variants {
|
||||
|
||||
@@ -5,12 +5,12 @@
|
||||
//
|
||||
.btn {
|
||||
--#{$prefix}btn-icon-size: #{$input-btn-icon-size};
|
||||
--#{$prefix}btn-icon-color: inherit;
|
||||
--#{$prefix}btn-bg: var(--#{$prefix}bg-surface);
|
||||
--#{$prefix}btn-color: var(--#{$prefix}body-color);
|
||||
--#{$prefix}btn-border-color: #{$btn-border-color};
|
||||
--#{$prefix}btn-hover-bg: var(--#{$prefix}btn-bg);
|
||||
--#{$prefix}btn-hover-border-color: var(--#{$prefix}border-active-color);
|
||||
--#{$prefix}btn-box-shadow: var(--#{$prefix}shadow-input);
|
||||
--#{$prefix}btn-active-color: #{$active-color};
|
||||
--#{$prefix}btn-active-bg: #{$active-bg};
|
||||
--#{$prefix}btn-active-border-color: #{$active-border-color};
|
||||
@@ -21,9 +21,6 @@
|
||||
white-space: nowrap;
|
||||
box-shadow: var(--#{$prefix}btn-box-shadow);
|
||||
position: relative;
|
||||
min-width: calc((var(--#{$prefix}btn-line-height) * 1) + (var(--#{$prefix}btn-padding-y) * 2) + (var(--#{$prefix}btn-border-width) * 2));
|
||||
min-height: calc((var(--#{$prefix}btn-line-height) * 1) + (var(--#{$prefix}btn-padding-y) * 2) + (var(--#{$prefix}btn-border-width) * 2));
|
||||
|
||||
|
||||
.icon {
|
||||
width: var(--#{$prefix}btn-icon-size);
|
||||
@@ -32,7 +29,7 @@
|
||||
font-size: var(--#{$prefix}btn-icon-size);
|
||||
margin: 0 calc(var(--#{$prefix}btn-padding-x) / 2) 0 calc(var(--#{$prefix}btn-padding-x) / -4);
|
||||
vertical-align: bottom;
|
||||
color: var(--#{$prefix}btn-icon-color);
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
@@ -41,8 +38,7 @@
|
||||
margin: 0 calc(var(--#{$prefix}btn-padding-x) / 2) 0 calc(var(--#{$prefix}btn-padding-x) / -4);
|
||||
}
|
||||
|
||||
.icon-right,
|
||||
.icon-end {
|
||||
.icon-right {
|
||||
margin: 0 calc(var(--#{$prefix}btn-padding-x) / -4) 0 calc(var(--#{$prefix}btn-padding-x) / 2);
|
||||
}
|
||||
|
||||
@@ -78,7 +74,7 @@
|
||||
//
|
||||
@each $color, $value in map-merge($theme-colors, $social-colors) {
|
||||
.btn-#{$color} {
|
||||
@if $color == "dark" {
|
||||
@if $color == 'dark' {
|
||||
--#{$prefix}btn-border-color: var(--#{$prefix}dark-mode-border-color);
|
||||
--#{$prefix}btn-hover-border-color: var(--#{$prefix}dark-mode-border-active-color);
|
||||
--#{$prefix}btn-active-border-color: var(--#{$prefix}dark-mode-border-active-color);
|
||||
@@ -99,8 +95,7 @@
|
||||
--#{$prefix}btn-box-shadow: var(--#{$prefix}shadow-input);
|
||||
}
|
||||
|
||||
.btn-outline-#{$color},
|
||||
.btn-outline.btn-#{$color} {
|
||||
.btn-outline-#{$color} {
|
||||
--#{$prefix}btn-color: var(--#{$prefix}#{$color});
|
||||
--#{$prefix}btn-bg: transparent;
|
||||
--#{$prefix}btn-border-color: var(--#{$prefix}#{$color});
|
||||
@@ -109,13 +104,11 @@
|
||||
--#{$prefix}btn-hover-bg: var(--#{$prefix}#{$color});
|
||||
--#{$prefix}btn-active-color: var(--#{$prefix}#{$color}-fg);
|
||||
--#{$prefix}btn-active-bg: var(--#{$prefix}#{$color});
|
||||
--#{$prefix}btn-active-border-color: var(--#{$prefix}#{$color});
|
||||
--#{$prefix}btn-disabled-color: var(--#{$prefix}#{$color});
|
||||
--#{$prefix}btn-disabled-border-color: var(--#{$prefix}#{$color});
|
||||
}
|
||||
|
||||
.btn-ghost-#{$color},
|
||||
.btn-ghost.btn-#{$color} {
|
||||
.btn-ghost-#{$color} {
|
||||
--#{$prefix}btn-color: var(--#{$prefix}#{$color});
|
||||
--#{$prefix}btn-bg: transparent;
|
||||
--#{$prefix}btn-border-color: transparent;
|
||||
@@ -137,27 +130,16 @@
|
||||
//
|
||||
// Button sizes
|
||||
//
|
||||
.btn-sm,
|
||||
.btn-group-sm > .btn {
|
||||
.btn-sm, .btn-group-sm > .btn {
|
||||
--#{$prefix}btn-line-height: #{$input-btn-line-height-sm};
|
||||
--#{$prefix}btn-icon-size: #{$input-btn-icon-size-sm};
|
||||
}
|
||||
|
||||
.btn-lg,
|
||||
.btn-group-lg > .btn {
|
||||
.btn-lg, .btn-group-lg > .btn {
|
||||
--#{$prefix}btn-line-height: #{$input-btn-line-height-lg};
|
||||
--#{$prefix}btn-icon-size: #{$input-btn-icon-size-lg};
|
||||
}
|
||||
|
||||
.btn-xl,
|
||||
.btn-group-xl > .btn {
|
||||
--#{$prefix}btn-line-height: #{$input-btn-line-height-xl};
|
||||
--#{$prefix}btn-icon-size: #{$input-btn-icon-size-xl};
|
||||
--#{$prefix}btn-padding-y: #{$input-btn-padding-y-xl};
|
||||
--#{$prefix}btn-padding-x: #{$input-btn-padding-x-xl};
|
||||
--#{$prefix}btn-font-size: #{$input-btn-font-size-xl};
|
||||
}
|
||||
|
||||
//
|
||||
// Button shapes
|
||||
//
|
||||
@@ -178,8 +160,9 @@
|
||||
//
|
||||
// Icon button
|
||||
//
|
||||
.btn-icon,
|
||||
.btn-action {
|
||||
.btn-icon {
|
||||
min-width: calc((var(--#{$prefix}btn-line-height) * var(--#{$prefix}btn-font-size)) + (var(--#{$prefix}btn-padding-y) * 2) + (var(--#{$prefix}btn-border-width) * 2));
|
||||
min-height: calc((var(--#{$prefix}btn-line-height) * var(--#{$prefix}btn-font-size)) + (var(--#{$prefix}btn-padding-y) * 2) + (var(--#{$prefix}btn-border-width) * 2));
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
|
||||
@@ -232,7 +215,7 @@
|
||||
height: var(--#{$prefix}btn-icon-size);
|
||||
left: 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 .75s linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -241,7 +224,14 @@
|
||||
//
|
||||
.btn-action {
|
||||
--#{$prefix}border-color: transparent;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
color: var(--#{$prefix}secondary);
|
||||
display: inline-flex;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: var(--#{$prefix}border-radius);
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
@@ -259,7 +249,6 @@
|
||||
&.show {
|
||||
color: var(--#{$prefix}body-color);
|
||||
background: var(--#{$prefix}active-bg);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
&.show {
|
||||
@@ -270,64 +259,3 @@
|
||||
.btn-actions {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.btn-animate-icon {
|
||||
.icon {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus-visible {
|
||||
.icon {
|
||||
transform: translateX(4px);
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-animate-icon-rotate {
|
||||
&:hover,
|
||||
&:focus-visible {
|
||||
.icon {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-animate-icon-move-start {
|
||||
&:hover,
|
||||
&:focus-visible {
|
||||
.icon {
|
||||
transform: translateX(-4px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-animate-icon-pulse {
|
||||
&:hover,
|
||||
&:focus-visible {
|
||||
.icon {
|
||||
transform: none;
|
||||
animation: pulse 0.9s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-animate-icon-shake {
|
||||
&:hover,
|
||||
&:focus-visible {
|
||||
.icon {
|
||||
transform: none;
|
||||
animation: shake 0.9s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-animate-icon-tada {
|
||||
&:hover,
|
||||
&:focus-visible {
|
||||
.icon {
|
||||
transform: none;
|
||||
animation: tada 0.9s;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -215,13 +215,11 @@ Stacked card
|
||||
}
|
||||
|
||||
// Card rotate
|
||||
.card-rotate-left,
|
||||
.card-rotate-start {
|
||||
.card-rotate-left {
|
||||
transform: rotate(-1.5deg);
|
||||
}
|
||||
|
||||
.card-rotate-right,
|
||||
.card-rotate-end {
|
||||
.card-rotate-right {
|
||||
transform: rotate(1.5deg);
|
||||
}
|
||||
|
||||
|
||||
@@ -96,7 +96,7 @@
|
||||
|
||||
.dropend {
|
||||
> .dropdown-menu {
|
||||
margin-top: subtract(calc(-1 * $dropdown-padding-y), 1px);
|
||||
margin-top: subtract(-$dropdown-padding-y, 1px);
|
||||
margin-left: -.25rem;
|
||||
}
|
||||
|
||||
|
||||
@@ -17,8 +17,8 @@
|
||||
|
||||
@each $name, $value in (0: 0, sm: .375rem, md: 1.5rem, lg: 3rem) {
|
||||
.row-#{$name} {
|
||||
margin-right: calc(-1 * $value);
|
||||
margin-left: calc(-1 * $value);
|
||||
margin-right: (-$value);
|
||||
margin-left: -($value);
|
||||
|
||||
> .col,
|
||||
> [class*="col-"] {
|
||||
|
||||
@@ -30,6 +30,14 @@
|
||||
border-left-width: $border-width-wide;
|
||||
}
|
||||
|
||||
.list-group-item {
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: $dropdown-link-hover-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.list-group-item {
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
@@ -50,14 +58,6 @@
|
||||
}
|
||||
|
||||
.list-group-hoverable {
|
||||
.list-group-item {
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: $dropdown-link-hover-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.list-group-item-actions {
|
||||
opacity: 0;
|
||||
@include transition(opacity $transition-time);
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
}
|
||||
|
||||
&.nav-pills {
|
||||
margin: 0 calc(-1 * $nav-link-padding-x);
|
||||
margin: 0 (-$nav-link-padding-x);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -9,10 +9,10 @@
|
||||
.page-link {
|
||||
min-width: 2rem;
|
||||
border-radius: var(--#{$prefix}pagination-border-radius);
|
||||
}
|
||||
|
||||
.page-item:not(.active) .page-link:hover {
|
||||
&:hover {
|
||||
background: var(--#{$prefix}pagination-hover-bg);
|
||||
}
|
||||
}
|
||||
|
||||
.page-text {
|
||||
|
||||
@@ -7,3 +7,7 @@
|
||||
margin-left: .25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.star {
|
||||
|
||||
}
|
||||
|
||||
@@ -122,9 +122,7 @@
|
||||
// Slide variant
|
||||
.switch-icon-slide-up,
|
||||
.switch-icon-slide-left,
|
||||
.switch-icon-slide-start,
|
||||
.switch-icon-slide-right,
|
||||
.switch-icon-slide-end,
|
||||
.switch-icon-slide-down {
|
||||
overflow: hidden;
|
||||
|
||||
@@ -152,8 +150,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.switch-icon-slide-left,
|
||||
.switch-icon-slide-start {
|
||||
.switch-icon-slide-left {
|
||||
.switch-icon-a {
|
||||
transform: translateX(0);
|
||||
}
|
||||
@@ -173,8 +170,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.switch-icon-slide-right,
|
||||
.switch-icon-slide-end {
|
||||
.switch-icon-slide-right {
|
||||
.switch-icon-a {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
@@ -114,7 +114,7 @@ Table sort
|
||||
text-align: inherit;
|
||||
@include transition(color $transition-time);
|
||||
|
||||
margin: calc(-1 * $table-th-padding-y) calc(-1 * $table-th-padding-x);
|
||||
margin: (-$table-th-padding-y) (-$table-th-padding-x);
|
||||
padding: $table-th-padding-y $table-th-padding-x;
|
||||
|
||||
&:hover,
|
||||
|
||||
@@ -1,47 +0,0 @@
|
||||
%hover-animation {
|
||||
transition: transform 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
will-change: transform;
|
||||
}
|
||||
}
|
||||
|
||||
.hover-elevate-up {
|
||||
@extend %hover-animation;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
}
|
||||
|
||||
.hover-elevate-down {
|
||||
@extend %hover-animation;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(4px);
|
||||
}
|
||||
}
|
||||
|
||||
.hover-scale {
|
||||
@extend %hover-animation;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
.hover-rotate-end {
|
||||
@extend %hover-animation;
|
||||
|
||||
&:hover {
|
||||
transform: rotate(4deg);
|
||||
}
|
||||
}
|
||||
|
||||
.hover-rotate-start {
|
||||
@extend %hover-animation;
|
||||
|
||||
&:hover {
|
||||
transform: rotate(-4deg);
|
||||
}
|
||||
}
|
||||
4
core/scss/vendor/_nouislider.scss
vendored
4
core/scss/vendor/_nouislider.scss
vendored
@@ -33,8 +33,8 @@
|
||||
.noUi-horizontal & {
|
||||
width: $form-range-thumb-width;
|
||||
height: $form-range-thumb-height;
|
||||
top: calc($form-range-thumb-height * -.5);
|
||||
right: calc($form-range-thumb-height * -.5);
|
||||
top: (-$form-range-thumb-height * .5);
|
||||
right: (-$form-range-thumb-height * .5);
|
||||
margin: 1px 1px 0 0;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,24 +1,18 @@
|
||||
# Tabler Documentation Changelog
|
||||
# @tabler/docs
|
||||
|
||||
## 1.4.0
|
||||
## 1.3.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- 6c38a48: Update Bootstrap to v5.3.7
|
||||
- 6c47b5f: Change `package.json` to `core/libs.json` as a source of libraries
|
||||
- 70a41e4: Replace a package list in `download.md` with a link to the 3rd-party libraries page
|
||||
- Updated dependencies [6c4dd36]
|
||||
- Updated dependencies [6fec73a]
|
||||
- Updated dependencies [9951fe9]
|
||||
- Updated dependencies [db6200a]
|
||||
- Updated dependencies [e96f055]
|
||||
- Updated dependencies [a200d30]
|
||||
- Updated dependencies [6c38a48]
|
||||
- Updated dependencies [2a12f72]
|
||||
- Updated dependencies [49ab9ea]
|
||||
- Updated dependencies [666a296]
|
||||
- Updated dependencies [cfd4cb6]
|
||||
- @tabler/core@1.4.0
|
||||
- Updated dependencies [446c34e]
|
||||
- @tabler/core@1.3.2
|
||||
|
||||
## 1.3.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [a7f73d7]
|
||||
- @tabler/core@1.3.1
|
||||
|
||||
## 1.3.0
|
||||
|
||||
@@ -44,3 +38,59 @@
|
||||
- 5fa662b: Use color-input examples in documentation
|
||||
- 5619b2d: Fix `src` links to images in README and getting-started docs page
|
||||
- f8075f6: Add documentation for 3rd-party libraries and resources
|
||||
- Updated dependencies [cac5d92]
|
||||
- Updated dependencies [f94b153]
|
||||
- Updated dependencies [c127d65]
|
||||
- Updated dependencies [b6e9b18]
|
||||
- Updated dependencies [8850f61]
|
||||
- Updated dependencies [9910dd0]
|
||||
- Updated dependencies [638f36c]
|
||||
- Updated dependencies [0d501e9]
|
||||
- Updated dependencies [a1af801]
|
||||
- Updated dependencies [3a02ef9]
|
||||
- Updated dependencies [b9d434d]
|
||||
- Updated dependencies [fd0fd47]
|
||||
- Updated dependencies [74e5d26]
|
||||
- Updated dependencies [72a1d67]
|
||||
- Updated dependencies [bb617b8]
|
||||
- Updated dependencies [d73d78e]
|
||||
- Updated dependencies [19a3d20]
|
||||
- Updated dependencies [b5e2f54]
|
||||
- Updated dependencies [a41c956]
|
||||
- Updated dependencies [79bd867]
|
||||
- Updated dependencies [e675389]
|
||||
- Updated dependencies [9007e73]
|
||||
- @tabler/core@1.3.0
|
||||
|
||||
## 1.0.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [c59bc9d]
|
||||
- Updated dependencies [f9e4da2]
|
||||
- Updated dependencies [aea3b0a]
|
||||
- Updated dependencies [92a3afe]
|
||||
- Updated dependencies [3fc7b84]
|
||||
- Updated dependencies [199f39a]
|
||||
- Updated dependencies [2f8a372]
|
||||
- Updated dependencies [9fceadd]
|
||||
- Updated dependencies [44250db]
|
||||
- Updated dependencies [be1f3d1]
|
||||
- Updated dependencies [c20d076]
|
||||
- Updated dependencies [042e50f]
|
||||
- Updated dependencies [473fa38]
|
||||
- Updated dependencies [8646192]
|
||||
- Updated dependencies [922bb03]
|
||||
- Updated dependencies [44250db]
|
||||
- Updated dependencies [9bbcb99]
|
||||
- Updated dependencies [b17b488]
|
||||
- Updated dependencies [ddcd3a7]
|
||||
- Updated dependencies [e3d68d6]
|
||||
- Updated dependencies [215eaa4]
|
||||
- Updated dependencies [4846828]
|
||||
- Updated dependencies [6b6617a]
|
||||
- Updated dependencies [94bea00]
|
||||
- Updated dependencies [e14e492]
|
||||
- Updated dependencies [6d6d1bd]
|
||||
- Updated dependencies [6c566cf]
|
||||
- @tabler/core@1.2.0
|
||||
|
||||
@@ -100,12 +100,12 @@ You can use icons in badges to make them more visually appealing. The example be
|
||||
You can also use an icon on the right side of the badge. The example below demonstrates how to use icons on the right side of badges.
|
||||
|
||||
{% capture html -%}
|
||||
{% include "ui/badge.html" text="Star" icon-end="arrow-right" -%}
|
||||
{% include "ui/badge.html" text="Heart" icon-end="arrow-right" -%}
|
||||
{% include "ui/badge.html" text="Check" icon-end="arrow-right" -%}
|
||||
{% include "ui/badge.html" text="X" icon-end="arrow-right" -%}
|
||||
{% include "ui/badge.html" text="Plus" icon-end="arrow-right" -%}
|
||||
{% include "ui/badge.html" text="Minus" icon-end="arrow-right" -%}
|
||||
{% include "ui/badge.html" text="Star" icon-right="arrow-right" -%}
|
||||
{% include "ui/badge.html" text="Heart" icon-right="arrow-right" -%}
|
||||
{% include "ui/badge.html" text="Check" icon-right="arrow-right" -%}
|
||||
{% include "ui/badge.html" text="X" icon-right="arrow-right" -%}
|
||||
{% include "ui/badge.html" text="Plus" icon-right="arrow-right" -%}
|
||||
{% include "ui/badge.html" text="Minus" icon-right="arrow-right" -%}
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html centered %}
|
||||
|
||||
|
||||
@@ -409,16 +409,6 @@ Add the `.btn-loading` class to show a button's loading state, which can be usef
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html centered %}
|
||||
|
||||
## Full width buttons
|
||||
|
||||
Add the `.w-100` class to make buttons span the full width of their container. This is useful for mobile-first designs or when you want buttons to take up the entire available space.
|
||||
|
||||
{% capture html -%}
|
||||
<a href="#" class="btn btn-primary w-100">Full width button</a>
|
||||
<a href="#" class="btn btn-outline-secondary w-100">Full width outline button</a>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html separated %}
|
||||
|
||||
## List of buttons
|
||||
|
||||
Create a list of buttons using the `.btn-list` container to display different actions a user can take. If you add additional styling, such as colors, you will be able to focus users' attention on a particular action or suggest the result.
|
||||
@@ -486,26 +476,6 @@ Use the `.text-center` or the `.text-end` modifiers to change the buttons' align
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html %}
|
||||
|
||||
## Buttons with badges
|
||||
|
||||
Add badges to buttons to display additional information like counts, notifications, or status indicators. Badges automatically position themselves within the button layout.
|
||||
|
||||
{% capture html -%}
|
||||
<a href="#" class="btn">
|
||||
Notifications
|
||||
<span class="badge ms-2">14</span>
|
||||
</a>
|
||||
<a href="#" class="btn">
|
||||
Messages
|
||||
<span class="badge ms-2">3</span>
|
||||
</a>
|
||||
<a href="#" class="btn">
|
||||
Alerts
|
||||
<span class="badge ms-2">7</span>
|
||||
</a>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html centered %}
|
||||
|
||||
## Buttons with avatars
|
||||
|
||||
Use buttons with avatars to simplify the process of interaction and make your design more personalized. Buttons can contain avatars and labels or only avatars, if displayed on a smaller space.
|
||||
@@ -538,142 +508,3 @@ Use buttons with avatars to simplify the process of interaction and make your de
|
||||
</a>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html centered %}
|
||||
|
||||
## Buttons with animations on hover
|
||||
|
||||
Add a subtle animation effect to your buttons when users hover over them. This can enhance the interactivity and provide visual feedback to improve the user experience.
|
||||
|
||||
{% capture html -%}
|
||||
<div class="btn-list">
|
||||
<a class="btn btn-animate-icon">
|
||||
Save {% include "ui/icon.html" icon="arrow-right" class="icon-end" %}
|
||||
</a>
|
||||
<a class="btn btn-animate-icon btn-animate-icon-rotate">
|
||||
{% include "ui/icon.html" icon="plus" %} Add
|
||||
</a>
|
||||
<a class="btn btn-animate-icon btn-animate-icon-shake">
|
||||
{% include "ui/icon.html" icon="bell" %} Notifications
|
||||
</a>
|
||||
<a class="btn btn-animate-icon btn-animate-icon-rotate">
|
||||
{% include "ui/icon.html" icon="settings" %} Settings
|
||||
</a>
|
||||
<a class="btn btn-animate-icon btn-animate-icon-pulse">
|
||||
{% include "ui/icon.html" icon="heart" %} Love
|
||||
</a>
|
||||
<a class="btn btn-animate-icon btn-animate-icon-rotate">
|
||||
{% include "ui/icon.html" icon="x" %} Close
|
||||
</a>
|
||||
<a class="btn btn-animate-icon btn-animate-icon-tada">
|
||||
{% include "ui/icon.html" icon="check" %} Confirm
|
||||
</a>
|
||||
<a class="btn btn-animate-icon">
|
||||
Next {% include "ui/icon.html" icon="chevron-right" class="icon-end" %}
|
||||
</a>
|
||||
<a class="btn btn-animate-icon btn-animate-icon-move-start">
|
||||
{% include "ui/icon.html" icon="chevron-left" %} Previous
|
||||
</a>
|
||||
</div>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html %}
|
||||
|
||||
## Button sizes
|
||||
|
||||
Use size modifiers to change the size of your buttons. Available sizes: `.btn-xs`, `.btn-sm`, default, `.btn-lg`, `.btn-xl`.
|
||||
|
||||
{% capture html -%}
|
||||
<button type="button" class="btn btn-sm">Small button</button>
|
||||
<button type="button" class="btn">Default button</button>
|
||||
<button type="button" class="btn btn-lg">Large button</button>
|
||||
<button type="button" class="btn btn-xl">Extra large button</button>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html separated centered vertical %}
|
||||
|
||||
## Link buttons
|
||||
|
||||
Use the `.btn-link` class to create buttons that look like links but maintain button functionality. These are useful for secondary actions that shouldn't compete with primary buttons for attention.
|
||||
|
||||
{% capture html -%}
|
||||
<a href="#" class="btn btn-link">Link button</a>
|
||||
<button type="button" class="btn btn-link">Link button</button>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html centered %}
|
||||
|
||||
## Action buttons
|
||||
|
||||
Use the `.btn-action` class to create subtle action buttons that are perfect for card headers, toolbars, or other interface elements where you want minimal visual impact.
|
||||
|
||||
{% capture html -%}
|
||||
<div class="btn-actions">
|
||||
<a href="#" class="btn btn-action" aria-label="Edit">
|
||||
{%- include "ui/icon.html" icon="edit" -%}
|
||||
</a>
|
||||
<a href="#" class="btn btn-action" aria-label="Copy">
|
||||
{%- include "ui/icon.html" icon="copy" -%}
|
||||
</a>
|
||||
<a href="#" class="btn btn-action" aria-label="Settings">
|
||||
{%- include "ui/icon.html" icon="settings" -%}
|
||||
</a>
|
||||
<a href="#" class="btn btn-action" aria-label="Delete">
|
||||
{%- include "ui/icon.html" icon="trash" -%}
|
||||
</a>
|
||||
</div>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html centered %}
|
||||
|
||||
## Action button groups
|
||||
|
||||
Use the `.btn-actions` container to group multiple action buttons together. This creates a cohesive set of related actions that work well in card headers, toolbars, or other interface elements.
|
||||
|
||||
{% capture html -%}
|
||||
<div class="btn-actions">
|
||||
<a href="#" class="btn btn-action">
|
||||
{%- include "ui/icon.html" icon="refresh" -%}
|
||||
</a>
|
||||
<a href="#" class="btn btn-action">
|
||||
{%- include "ui/icon.html" icon="chevron-up" -%}
|
||||
</a>
|
||||
<a href="#" class="btn btn-action">
|
||||
{%- include "ui/icon.html" icon="dots-vertical" -%}
|
||||
</a>
|
||||
<a href="#" class="btn btn-action">
|
||||
{%- include "ui/icon.html" icon="x" -%}
|
||||
</a>
|
||||
</div>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html centered %}
|
||||
|
||||
## Button groups
|
||||
|
||||
Use button groups to combine related buttons together. Button groups are perfect for creating toolbars, segmented controls, or any interface where multiple related actions should be visually grouped.
|
||||
|
||||
{% capture html -%}
|
||||
<div class="btn-group" role="group">
|
||||
<button type="button" class="btn">Left</button>
|
||||
<button type="button" class="btn">Middle</button>
|
||||
<button type="button" class="btn">Right</button>
|
||||
</div>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html centered %}
|
||||
|
||||
{% capture html -%}
|
||||
<div class="btn-group" role="group">
|
||||
<input type="radio" class="btn-check" name="btn-radio" id="btn-radio-1" autocomplete="off" checked>
|
||||
<label class="btn" for="btn-radio-1">Radio 1</label>
|
||||
|
||||
<input type="radio" class="btn-check" name="btn-radio" id="btn-radio-2" autocomplete="off">
|
||||
<label class="btn" for="btn-radio-2">Radio 2</label>
|
||||
|
||||
<input type="radio" class="btn-check" name="btn-radio" id="btn-radio-3" autocomplete="off">
|
||||
<label class="btn" for="btn-radio-3">Radio 3</label>
|
||||
</div>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html centered %}
|
||||
|
||||
{% capture html -%}
|
||||
<div class="btn-group-vertical" role="group">
|
||||
<button type="button" class="btn">Top</button>
|
||||
<button type="button" class="btn">Middle</button>
|
||||
<button type="button" class="btn">Bottom</button>
|
||||
</div>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html centered %}
|
||||
|
||||
@@ -175,7 +175,7 @@ You can also add a fancy animation to add variety to your button. See demo below
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
<button class="switch-icon switch-icon-slide-end" data-bs-toggle="switch-icon">
|
||||
<button class="switch-icon switch-icon-slide-right" data-bs-toggle="switch-icon">
|
||||
<span class="switch-icon-a text-secondary">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
||||
@@ -28,9 +28,17 @@ Install Tabler in your Node.js powered apps with the npm package:
|
||||
|
||||
{% include "docs/tabs-package.html" name="@tabler/core" %}
|
||||
|
||||
## 3rd-party Libraries
|
||||
|
||||
Tabler uses other packages to enhance its functionality - for example, charts and input masks. These are not automatically installed to avoid huge
|
||||
dependency trees and need to be installed by using `npm install`. The full list of recommended libraries is available on the
|
||||
[3rd-party Libraries & Resources](/ui/getting-started/references) page.
|
||||
For the most recent list of supported packages, you can also check the [libs.json](https://github.com/tabler/tabler/blob/dev/core/libs.json) file.
|
||||
dependency trees and need to be installed by using npm install. We support the following packages as of writing.
|
||||
|
||||
- [apexcharts](https://apexcharts.com/)
|
||||
- [autosize](http://www.jacklmoore.com/autosize/)
|
||||
- [choices.js](https://github.com/Choices-js/Choices)
|
||||
- [countup.js](https://inorganik.github.io/countUp.js/)
|
||||
- [flatpickr](https://flatpickr.js.org/)
|
||||
- [imask](https://imask.js.org/)
|
||||
- [litepicker](https://litepicker.com/)
|
||||
- [nouislider](https://refreshless.com/nouislider/)
|
||||
- [tom-select](https://tom-select.js.org/)
|
||||
|
||||
For the complete list of supported packages you can check the peerDependencies section in our [package.json](https://github.com/tabler/tabler/blob/dev/package.json)
|
||||
@@ -216,20 +216,13 @@ export default function (eleventyConfig) {
|
||||
});
|
||||
|
||||
const generateUniqueId = (text) => {
|
||||
let id = text
|
||||
return text
|
||||
.replace(/<[^>]+>/g, "")
|
||||
.replace(/\s/g, "-")
|
||||
.replace(/[^\w-]+/g, "")
|
||||
.replace(/--+/g, "-")
|
||||
.replace(/^-+|-+$/g, "")
|
||||
.toLowerCase();
|
||||
|
||||
// Ensure ID doesn't start with a number (invalid HTML)
|
||||
if (/^[0-9]/.test(id)) {
|
||||
id = "h" + id;
|
||||
}
|
||||
|
||||
return id;
|
||||
}
|
||||
|
||||
eleventyConfig.addFilter("headings-id", function (content) {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@tabler/docs",
|
||||
"version": "1.4.0",
|
||||
"version": "1.3.2",
|
||||
"description": "",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
@@ -25,11 +25,11 @@
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"devDependencies": {
|
||||
"@11ty/eleventy": "^3.1.2",
|
||||
"@11ty/eleventy": "^3.1.0",
|
||||
"@docsearch/css": "^3.9.0",
|
||||
"@docsearch/js": "^3.9.0",
|
||||
"flat-cache": "^6.1.11",
|
||||
"shiki": "^3.7.0"
|
||||
"flat-cache": "^6.1.8",
|
||||
"shiki": "^3.2.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tabler/core": "workspace:*"
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
@@ -9,14 +9,6 @@
|
||||
"source": "/stats/event",
|
||||
"destination": "https://plausible.io/api/event"
|
||||
},
|
||||
{
|
||||
"source": "/eat/static/:path(.*)",
|
||||
"destination": "https://eu-assets.i.posthog.com/static/:path*"
|
||||
},
|
||||
{
|
||||
"source": "/eat/:path(.*)",
|
||||
"destination": "https://eu.i.posthog.com/:path*"
|
||||
},
|
||||
{
|
||||
"source": "/(.*)",
|
||||
"destination": "/error-404.html"
|
||||
|
||||
30
package.json
30
package.json
@@ -14,39 +14,37 @@
|
||||
"zip-package": "node .build/zip-package.mjs",
|
||||
"start": "pnpm dev"
|
||||
},
|
||||
"packageManager": "pnpm@10.12.4",
|
||||
"dependencies": {
|
||||
"shx": "^0.4.0"
|
||||
},
|
||||
"packageManager": "pnpm@10.11.0",
|
||||
"devDependencies": {
|
||||
"@argos-ci/playwright": "^5.0.5",
|
||||
"@argos-ci/playwright": "^5.0.3",
|
||||
"@changesets/changelog-github": "^0.5.1",
|
||||
"@changesets/cli": "^2.29.5",
|
||||
"@playwright/test": "^1.53.2",
|
||||
"@changesets/cli": "^2.29.4",
|
||||
"@playwright/test": "^1.52.0",
|
||||
"@rollup/plugin-babel": "^6.0.4",
|
||||
"@rollup/plugin-commonjs": "^28.0.6",
|
||||
"@rollup/plugin-commonjs": "^28.0.3",
|
||||
"@rollup/plugin-node-resolve": "^16.0.1",
|
||||
"@rollup/plugin-replace": "^6.0.2",
|
||||
"adm-zip": "^0.5.16",
|
||||
"autoprefixer": "^10.4.21",
|
||||
"bundlewatch": "^0.4.1",
|
||||
"clean-css-cli": "^5.6.3",
|
||||
"concurrently": "^9.2.0",
|
||||
"concurrently": "^9.1.2",
|
||||
"cross-env": "^7.0.3",
|
||||
"fs-extra": "^11.3.0",
|
||||
"glob": "^11.0.3",
|
||||
"glob": "^11.0.2",
|
||||
"js-beautify": "^1.15.4",
|
||||
"nodemon": "^3.1.10",
|
||||
"pnpm": "10.6.5",
|
||||
"postcss": "^8.5.6",
|
||||
"postcss": "^8.5.3",
|
||||
"postcss-cli": "^11.0.1",
|
||||
"prettier": "^3.6.2",
|
||||
"rollup": "4.44.2",
|
||||
"prettier": "^3.5.3",
|
||||
"rollup": "4.40.2",
|
||||
"rollup-plugin-dotenv": "^0.5.1",
|
||||
"rtlcss": "^4.3.0",
|
||||
"sass": "1.89.2",
|
||||
"sass": "1.71.0",
|
||||
"shelljs": "^0.10.0",
|
||||
"terser": "^5.43.1",
|
||||
"turbo": "^2.5.4"
|
||||
"shx": "^0.4.0",
|
||||
"terser": "^5.39.2",
|
||||
"turbo": "^2.5.3"
|
||||
}
|
||||
}
|
||||
1023
pnpm-lock.yaml
generated
1023
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@@ -1,25 +0,0 @@
|
||||
// remove-prettier-ignore.js
|
||||
import { readFileSync, writeFileSync } from 'fs';
|
||||
import { sync } from 'glob';
|
||||
|
||||
const patterns = [
|
||||
/\/\/ prettier-ignore[\s]*/g,
|
||||
];
|
||||
|
||||
sync('dist/**/*.html').forEach(file => {
|
||||
let content = readFileSync(file, 'utf8');
|
||||
let modified = false;
|
||||
|
||||
patterns.forEach(pattern => {
|
||||
const newContent = content.replace(pattern, '');
|
||||
if (newContent !== content) {
|
||||
content = newContent;
|
||||
modified = true;
|
||||
}
|
||||
});
|
||||
|
||||
if (modified) {
|
||||
writeFileSync(file, content);
|
||||
console.log(`Cleaned: ${file}`);
|
||||
}
|
||||
});
|
||||
@@ -1,23 +1,5 @@
|
||||
# @tabler/preview
|
||||
|
||||
## 1.4.0
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- 6c38a48: Update Bootstrap to v5.3.7
|
||||
- Updated dependencies [6c4dd36]
|
||||
- Updated dependencies [6fec73a]
|
||||
- Updated dependencies [9951fe9]
|
||||
- Updated dependencies [db6200a]
|
||||
- Updated dependencies [e96f055]
|
||||
- Updated dependencies [a200d30]
|
||||
- Updated dependencies [6c38a48]
|
||||
- Updated dependencies [2a12f72]
|
||||
- Updated dependencies [49ab9ea]
|
||||
- Updated dependencies [666a296]
|
||||
- Updated dependencies [cfd4cb6]
|
||||
- @tabler/core@1.4.0
|
||||
|
||||
## 1.3.2
|
||||
|
||||
### Patch Changes
|
||||
@@ -37,3 +19,26 @@
|
||||
### Patch Changes
|
||||
|
||||
- 8850f61: Enhance pagination component with new styles
|
||||
- Updated dependencies [cac5d92]
|
||||
- Updated dependencies [f94b153]
|
||||
- Updated dependencies [c127d65]
|
||||
- Updated dependencies [b6e9b18]
|
||||
- Updated dependencies [8850f61]
|
||||
- Updated dependencies [9910dd0]
|
||||
- Updated dependencies [638f36c]
|
||||
- Updated dependencies [0d501e9]
|
||||
- Updated dependencies [a1af801]
|
||||
- Updated dependencies [3a02ef9]
|
||||
- Updated dependencies [b9d434d]
|
||||
- Updated dependencies [fd0fd47]
|
||||
- Updated dependencies [74e5d26]
|
||||
- Updated dependencies [72a1d67]
|
||||
- Updated dependencies [bb617b8]
|
||||
- Updated dependencies [d73d78e]
|
||||
- Updated dependencies [19a3d20]
|
||||
- Updated dependencies [b5e2f54]
|
||||
- Updated dependencies [a41c956]
|
||||
- Updated dependencies [79bd867]
|
||||
- Updated dependencies [e675389]
|
||||
- Updated dependencies [9007e73]
|
||||
- @tabler/core@1.3.0
|
||||
|
||||
@@ -22,7 +22,6 @@ export default function (eleventyConfig) {
|
||||
eleventyConfig.addPassthroughCopy({
|
||||
"node_modules/@tabler/core/dist": "dist",
|
||||
"pages/favicon.ico": "favicon.ico",
|
||||
"pages/favicon-dev.ico": "favicon-dev.ico",
|
||||
"static": "static",
|
||||
});
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@tabler/preview",
|
||||
"version": "1.4.0",
|
||||
"version": "1.3.2",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "pnpm run clean && pnpm run css && pnpm run js && pnpm run html",
|
||||
@@ -18,10 +18,9 @@
|
||||
"js-minify": "pnpm run js-minify-demo",
|
||||
"js-minify-demo": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/preview/js/demo.js.map,includeSources,url=demo.min.js.map\" --output dist/preview/js/demo.min.js dist/preview/js/demo.js",
|
||||
"clean": "shx rm -rf dist demo",
|
||||
"html": "pnpm run html-build && pnpm run html-prettify && pnpm run html-remove-prettier-ignore",
|
||||
"html": "pnpm run html-build && pnpm run html-prettify",
|
||||
"html-build": "eleventy",
|
||||
"html-prettify": "prettier --write \"dist/**/*.html\" \"!dist/dist/**\"",
|
||||
"html-remove-prettier-ignore": "node .build/remove-prettier-ignore.mjs",
|
||||
"svg-optimize": "svgo -f svg/brand --pretty",
|
||||
"unused-files": "node .build/unused-files.mjs",
|
||||
"download-images": "node .build/download-images.mjs",
|
||||
@@ -32,7 +31,7 @@
|
||||
"zip": "mkdir -p packages-zip && zip -r packages-zip/tabler-$(node -p \"require('./package.json').version\").zip demo/*"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@11ty/eleventy": "^3.1.1",
|
||||
"@11ty/eleventy": "^3.1.0",
|
||||
"imageoptim-cli": "^3.1.9",
|
||||
"request": "^2.88.2"
|
||||
},
|
||||
|
||||
@@ -7,177 +7,91 @@ permalink: buttons.html
|
||||
---
|
||||
|
||||
<div class="row row-cards">
|
||||
<div class="col-md-6">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Standard Buttons</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="btn-list">
|
||||
{% for color in site.themeColors %}
|
||||
<a class="btn btn-{{ color[0] }}">{% include "ui/icon.html" icon=color[1].icon %} {{ color[1].title }}</a>
|
||||
{% endfor %}
|
||||
{% include "parts/buttons-table.html" show-link=true show-states=true %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Outline Buttons</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="btn-list">
|
||||
{% for color in site.themeColors %}
|
||||
<a class="btn btn-outline btn-{{ color[0] }}">{% include "ui/icon.html"
|
||||
icon=color[1].icon %} {{ color[1].title }}</a>
|
||||
{% endfor %}
|
||||
<p>Use <code>.btn-outline-*</code> class for outline buttons.
|
||||
</p>
|
||||
{% include "parts/buttons-table.html" prefix="btn-outline-" show-states=true %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Ghost Buttons</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="btn-list">
|
||||
{% for color in site.themeColors %}
|
||||
<a class="btn btn-ghost btn-{{ color[0] }}">{% include "ui/icon.html"
|
||||
icon=color[1].icon %} {{ color[1].title }}</a>
|
||||
{% endfor %}
|
||||
<p>Use <code>.btn-ghost-*</code> class for ghost buttons.
|
||||
</p>
|
||||
{% include "parts/buttons-table.html" prefix="btn-ghost-" show-states=true %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Square Buttons</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="btn-list">
|
||||
{% for color in site.themeColors %}
|
||||
<a class="btn btn-square btn-{{ color[0] }}">
|
||||
{% include "ui/icon.html" icon=color[1].icon %} {{ color[1].title }}
|
||||
</a>
|
||||
{% endfor %}
|
||||
<p>Use <code>.btn-square</code> class for square buttons.
|
||||
</p>
|
||||
{% include "parts/buttons-table.html" class="btn-square" show-states=true %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Pill Buttons</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="btn-list">
|
||||
{% for color in site.themeColors %}
|
||||
<a class="btn btn-pill btn-{{ color[0] }}">
|
||||
{% include "ui/icon.html" icon=color[1].icon %} {{ color[1].title }}
|
||||
</a>
|
||||
{% endfor %}
|
||||
<p>Use <code>.btn-pill</code> class for pill buttons.
|
||||
</p>
|
||||
{% include "parts/buttons-table.html" class="btn-pill" show-states=true %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Extra colors</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="btn-list">
|
||||
{% for color in site.colors %}
|
||||
<a class="btn btn-{{ color[0] }}">{% include "ui/icon.html"
|
||||
icon=color[1].icon %} {{ color[1].title }}</a>
|
||||
{% endfor %}
|
||||
{% include "parts/buttons-table.html" variants=site.colors hide-labels=true icon="star" auto-columns=true %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Icon buttons</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="btn-list">
|
||||
{% for app in site.socialColors %}
|
||||
<a class="btn btn-icon btn-{{ app[0] }}">{% include "ui/icon.html" icon=app[1].icon %}</a>
|
||||
{% endfor %}
|
||||
{% include "parts/buttons-table.html" variants=site.socialColors hide-labels=true icon-only=true auto-columns=true %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Social colors</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="btn-list">
|
||||
{% for app in site.socialColors %}
|
||||
<a class="btn btn-{{ app[0] }}">{% include "ui/icon.html" icon=app[1].icon %} {{ app[1].title }}</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% assign actions = 'edit,copy,settings,clipboard,x' | split: ',' %}
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Action buttons</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="btn-actions">
|
||||
{% for action in actions %}
|
||||
<a class="btn btn-action">{% include "ui/icon.html" icon=action %}</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Buttons with icon</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="btn-list">
|
||||
<a class="btn btn-animate-icon">Save {% include "ui/icon.html" icon="arrow-right" class="icon-end" %}</a>
|
||||
<a class="btn btn-animate-icon btn-animate-icon-rotate">{% include "ui/icon.html" icon="plus" %} Add</a>
|
||||
<a class="btn btn-animate-icon btn-animate-icon-shake">{% include "ui/icon.html" icon="bell" %} Notifications</a>
|
||||
<a class="btn btn-animate-icon btn-animate-icon-rotate">{% include "ui/icon.html" icon="settings" %} Settings</a>
|
||||
<a class="btn btn-animate-icon btn-animate-icon-pulse">{% include "ui/icon.html" icon="heart" %} Love</a>
|
||||
<a class="btn btn-animate-icon btn-animate-icon-rotate">{% include "ui/icon.html" icon="x" %} Close</a>
|
||||
<a class="btn btn-animate-icon btn-animate-icon-tada">{% include "ui/icon.html" icon="check" %} Confirm</a>
|
||||
<a class="btn btn-animate-icon">Next {% include "ui/icon.html" icon="chevron-right" class="icon-end" %}</a>
|
||||
<a class="btn btn-animate-icon btn-animate-icon-move-start">{% include "ui/icon.html" icon="chevron-left" %} Previous</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Buttons size</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="space-y">
|
||||
{% assign sizes = 'sm,md,lg,xl' | split: ',' %}
|
||||
{% for size in sizes %}
|
||||
<div class="btn-list">
|
||||
{% include "ui/button.html" size=size text="Button" %}
|
||||
{% include "ui/button.html" size=size icon="star" icon-only %}
|
||||
{% include "ui/button.html" size=size icon="star" text="Button" %}
|
||||
{% include "ui/button.html" size=size icon-end="star" text="Button" %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% include "parts/buttons-table.html" variants=site.socialColors hide-labels=true icon=true auto-columns=true %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -62,13 +62,13 @@ permalink: cards.html
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="card card-rotate-end">
|
||||
<div class="card-body">Card rotate end</div>
|
||||
<div class="card card-rotate-right">
|
||||
<div class="card-body">Card rotate right</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="card card-rotate-start">
|
||||
<div class="card-body">Card rotate start</div>
|
||||
<div class="card card-rotate-left">
|
||||
<div class="card-body">Card rotate left</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
@@ -127,7 +127,7 @@ permalink: cards.html
|
||||
{% include "cards/card.html" status-bottom="success" title="Card with bottom status" %}
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
{% include "cards/card.html" status-start="primary" title="Card with side status" %}
|
||||
{% include "cards/card.html" status-left="primary" title="Card with side status" %}
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-3">
|
||||
|
||||
@@ -57,7 +57,7 @@ permalink: emails.html
|
||||
<div class="row g-0">
|
||||
<div class="col-6">
|
||||
<div class="p-6 bg-surface-secondary rounded-start">
|
||||
<img src="" class="img-fluid rounded-start" data-email-image />
|
||||
<img src="" class="img-fluid rounded-left" data-email-image />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 15 KiB |
@@ -103,7 +103,7 @@ page-libs: [litepicker]
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{% include "ui/button.html" color="primary" block text="Send Message" icon-end="arrow-right" %}
|
||||
{% include "ui/button.html" color="primary" block text="Send Message" icon-right="arrow-right" %}
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
@@ -148,7 +148,7 @@ page-libs: [litepicker]
|
||||
{% include "ui/form/check.html" title="Remember me" class="m-0" %}
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
{% include "ui/button.html" color="primary" text="Create Account" icon-end="arrow-right" %}
|
||||
{% include "ui/button.html" color="primary" text="Create Account" icon-right="arrow-right" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
page-header: Right vertical layout
|
||||
page-menu: layout.vertical-end
|
||||
page-menu: layout.vertical-right
|
||||
layout-sidebar: true
|
||||
layout-sidebar-end: true
|
||||
layout-sidebar-right: true
|
||||
layout-hide-topbar: true
|
||||
layout: homepage
|
||||
permalink: layout-vertical-right.html
|
||||
|
||||
@@ -8,14 +8,6 @@
|
||||
"source": "/stats/event",
|
||||
"destination": "https://plausible.io/api/event"
|
||||
},
|
||||
{
|
||||
"source": "/eat/static/:path(.*)",
|
||||
"destination": "https://eu-assets.i.posthog.com/static/:path*"
|
||||
},
|
||||
{
|
||||
"source": "/eat/:path(.*)",
|
||||
"destination": "https://eu.i.posthog.com/:path*"
|
||||
},
|
||||
{
|
||||
"source": "/(.*)",
|
||||
"destination": "/error-404.html"
|
||||
|
||||
@@ -1 +1 @@
|
||||
["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"]
|
||||
["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","payment","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","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"]
|
||||
@@ -1,22 +1,22 @@
|
||||
{
|
||||
"css": "sha384-LUZmhPrA9DuvV+PENAthWDl8vR3wEHZ2mxCp6V4VEbbCIDjvxx2RlvvYjfSZZ+Fe",
|
||||
"css-rtl": "sha384-R+1hmp3uvF0kkOZyoxDNAnLplv2bfSkdzNMujFi7fbvcu+l5L15NMKg50UT7SHD0",
|
||||
"css-flags": "sha384-H7p4Cgh2RM3r9apL63WdIpPu9BtIhbGngx0f3WrqyCpunfY+X7M4apXpQQcZqA5c",
|
||||
"css-flags-rtl": "sha384-tzddSAu/YEPdL4FEjR4HwaKan3DhU5kQ+ifJOWa0kR7eb1RUmPKr8PHEx1Hmgx+t",
|
||||
"css-marketing": "sha384-jdZv/iHkc5OuAPy1SD9QancYje5FHhs4s1GL7AOvKdb6ZMiC+Zwya8pCGDBb7tIf",
|
||||
"css-marketing-rtl": "sha384-MfCU8754hWY2IAkf1SVH5helVjarYxM1zeyxecKh2AuQcacQzKz+7dxQoWN074ca",
|
||||
"css-payments": "sha384-sCkGfjP5FkkIIL7H3FNIhYK1ZvUwMQeOLVSfOblaDQoKZX8k71BHZk1LMHMPRjbx",
|
||||
"css-payments-rtl": "sha384-gZtxDQ2AdE1j/+cmuiPWY+AJ0jtnsk2C3Z65u+uyzQkqfISW1V7Blezfumdm/mfj",
|
||||
"css-socials": "sha384-bujgRtkeNSwK8hFfCUO6SyIyWngJuWblefHIViyjq5XbDAEeCi1YRlIqggw9Vcqu",
|
||||
"css-socials-rtl": "sha384-SIYJowkbADF1DNCVS7QnO0WDOPI7xOulE2iUJ5do1VveCIHslxNnE7lYyXbHMqtH",
|
||||
"css-props": "sha384-eFBhxMcWpvjSKfWwkdzIeMzXUt2j6d0od1+xwAYsUAtAlBK0SK/tZl9xbx624xxx",
|
||||
"css-props-rtl": "sha384-ifUxJ+Cmg0A/0cl51AAiC0TsP2kvHrBMyGxIsHWT3sPmZzu0PGHf0Pc3YwmoUWkT",
|
||||
"css-themes": "sha384-EWgzD0j3PnZ9hhq/YFnSNV/Hm54BB0hWYSSCEj6OR1YxP0BVDEM7Enp+UAJDMqBx",
|
||||
"css-themes-rtl": "sha384-rzVwsvFoVNK25vTMMkUuO71ndLJIhoMtvnaA9BKDBa2s+lboMuDmnHX/ikLmdgqv",
|
||||
"css-vendors-rtl": "sha384-bD4REzS6v/hyJgKgmqVmDd/HSu5y3dsZ4hQYcdYQqEOKQDLUEyqiWAWYq/NObB8B",
|
||||
"css-vendors": "sha384-yYQlhpXu43M9F6EsDV1V/GQBPy9gQSKTTkvRiSnKEbUjI3/RhmpARqgI9pUTU6Z9",
|
||||
"js": "sha384-2WdYXbwTs+5LXi+OUvcthfGsTS1s8P9lt6uUbrglmYVhAsPSh1ItGCmXkpzSR34u",
|
||||
"js-theme": "sha384-owIUMWnQZ6WJM5sJcZYopxE42XrqqKivlpxysxQYM+RXYbaHGAWVo2aniM4Wyhxq",
|
||||
"css": "sha384-p5xrK2AiivdjrNPtu162Vv179cyFHJY2I4Mb0NZVR8Wn2aqSGUm7zlFFjM8jAzeD",
|
||||
"css-rtl": "sha384-22IGd0xp1gk5BQwuhYqr8qUmsv65cwTzenvc19bvq5PYduXkWE8gUUruxIr/ZPsn",
|
||||
"css-flags": "sha384-fStl5MKxnUStSlpPiHGSFmUTTzr2KEY7jtgmvTswVDaQJ+sLbmEF+26m57M2sbCm",
|
||||
"css-flags-rtl": "sha384-i8KVpZYtpnZDkTYzaYlaeiF91VNnmyORipMLZh6hKGh5Jj80QN6962xlHQPkx/xr",
|
||||
"css-marketing": "sha384-IILX0Nea/+/hbVhEsrQ/djsqtSJmb4CM9hPzWd7Yh8hzbyYp4N/4hWMQL5kIPEuZ",
|
||||
"css-marketing-rtl": "sha384-7Dd3GLSNiOzFuAZAtMfOFdsgtQ2xiOowOOvPMaC9+sZ7t+9jzN2tajuQLPekqH2K",
|
||||
"css-payments": "sha384-ZRk1rNf2hqzIWoHspDzfWz8bKW1dr1odUHzmItwuijP60huklItYuva1cveYhRs5",
|
||||
"css-payments-rtl": "sha384-TI7r4R+53giBkEHQMbhBrUTK58fdyoNij2PR7ICQkIt9W3fW9aXoknm9oqyyU0TK",
|
||||
"css-socials": "sha384-rYtfgzcCz11iyODxSKx70JwR+bSIYiIcjSzvRMppIC/s3uSfW787ZBJpOI9mk2VD",
|
||||
"css-socials-rtl": "sha384-UpQExKWGunZHqL3L6jEETXHpj5JWIxk8bhxJJmAr8FP/hTUojs4GMCg7omu2DJ5n",
|
||||
"css-props": "sha384-nlhMcpecw2dK6NPM09rxtOrZVkLNoTrRsf7dSC65VBmWBJT5pIkTyeA1k2+qbq+V",
|
||||
"css-props-rtl": "sha384-Voq7oikM1MGBKKotIvWP3THYoINUMEQurBmKseurzXaiMzL3KPlbQXhbI4tHPKHU",
|
||||
"css-themes": "sha384-o3qxqNUMd6NW7wethAfo4ur0TF8cgmbdTRrUHwryoxEpy3DNmt5MWoCHRlJlX/zD",
|
||||
"css-themes-rtl": "sha384-er5SohDm2dJxg5UhUf1RI96jOlVA7RwgVm5++ribGoWmjds4MntkV6Mxg66xCQQg",
|
||||
"css-vendors-rtl": "sha384-tHbMgNpCKXcS6jHEZNTL3D8vphnCwUbnP37Mu3sihnvXRk47xUWU6VYDIO8kMyr3",
|
||||
"css-vendors": "sha384-Fo//Kmhz1EIFHbqRN5ZnLePKoXW3c4MjGg1DVOrvwTlQNfC2rKRflTBS1degq6n6",
|
||||
"js": "sha384-PHMhDo1ZcalIgfBhQzaXnIBa6xdPJ8iQTzHd+WVAeoI/O2Xq3OuElAo7PyEYTqMg",
|
||||
"js-theme": "sha384-3Z3TIkq5YSKOncCfiURX/S03AUHfI0nVzd39uRc9KLhtLi7M228qgWBjnRXwt2j0",
|
||||
"demo-css": "sha384-BUDq2P684xwRBf0GDlySvob+KJg4ko8y2K7njgvYBscmEuqoVVqJ75zcTDozwkFA",
|
||||
"demo-js": "sha384-UcTgbM9IZSOPHHuFa0R9H4TegQWoZkJKpeTjLV5hjem2k0CZ67Q4/bW2rT/Edf4Z"
|
||||
}
|
||||
@@ -5,8 +5,4 @@ export function appData(eleventyConfig) {
|
||||
eleventyConfig.addGlobalData("package", JSON.parse(readFileSync(join("..", "core", "package.json"), "utf-8")));
|
||||
eleventyConfig.addGlobalData("changelog", readFileSync(join("..", "core", "CHANGELOG.md"), "utf-8"));
|
||||
eleventyConfig.addGlobalData("libs", JSON.parse(readFileSync(join("..", "core", "libs.json"), "utf-8")));
|
||||
|
||||
// Analytics Environment Variables
|
||||
eleventyConfig.addGlobalData("posthogApiKey", process.env.NEXT_PUBLIC_POSTHOG_KEY);
|
||||
eleventyConfig.addGlobalData("posthogHost", process.env.NEXT_PUBLIC_POSTHOG_HOST);
|
||||
}
|
||||
@@ -14,8 +14,8 @@
|
||||
<div class="card-status-top bg-{{ include.status-top | default: 'blue' }}"></div>
|
||||
{% elsif include.status-bottom %}
|
||||
<div class="card-status-bottom bg-{{ include.status-bottom | default: 'blue' }}"></div>
|
||||
{% elsif include.status-start %}
|
||||
<div class="card-status-start bg-{{ include.status-start | default: 'blue' }}"></div>
|
||||
{% elsif include.status-left %}
|
||||
<div class="card-status-start bg-{{ include.status-left | default: 'blue' }}"></div>
|
||||
{% endif %}
|
||||
|
||||
{% if include.header or include.header-title or include.header-tabs or include.header-pills %}
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
</div>
|
||||
<div class="flex-fill">
|
||||
<div>
|
||||
<small class="float-end text-secondary">4 min</small>
|
||||
<small class="float-right text-secondary">4 min</small>
|
||||
<h4>{{ people[4].first_name }} {{ people[4].last_name }}</h4>
|
||||
</div>
|
||||
|
||||
@@ -55,7 +55,7 @@
|
||||
</div>
|
||||
<div class="flex-fill">
|
||||
<div>
|
||||
<small class="float-end text-secondary">12 min</small>
|
||||
<small class="float-right text-secondary">12 min</small>
|
||||
<h4>{{ people[10].first_name }} {{ people[10].last_name }}</h4>
|
||||
</div>
|
||||
<div>
|
||||
@@ -72,7 +72,7 @@
|
||||
</div>
|
||||
<div class="flex-fill">
|
||||
<div>
|
||||
<small class="float-end text-secondary">34 min</small>
|
||||
<small class="float-right text-secondary">34 min</small>
|
||||
<h4>{{ people[14].first_name }} {{ people[14].last_name }}</h4>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
|
||||
<div class="card" data-color={{color}}>
|
||||
<div class="card-body">
|
||||
<div class="float-end avatar{% if include.color %} bg-{{ include.color }}{% if include.light %}-lt{% else %} text-white{% endif %}{% endif %}">
|
||||
<div class="float-right avatar{% if include.color %} bg-{{ include.color }}{% if include.light %}-lt{% else %} text-white{% endif %}{% endif %}">
|
||||
{% include "ui/icon.html" icon=icon %}
|
||||
</div>
|
||||
<div class="text-secondary fw-normal mt-0">{{ include.title | default: 'Customers' }}</div>
|
||||
|
||||
@@ -25,7 +25,7 @@
|
||||
{% include "ui/icon.html" icon=include.small-icon color=include.color class="icon-sm ms-1" %}
|
||||
{% endif %}
|
||||
{% if include.description-value %}
|
||||
<span class="float-end font-weight-medium text-{{ include.description-value-color | default: 'green' }}">{{ include.description-value }}</span>
|
||||
<span class="float-right font-weight-medium text-{{ include.description-value-color | default: 'green' }}">{{ include.description-value }}</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="text-secondary">
|
||||
|
||||
@@ -30,10 +30,10 @@
|
||||
</td>
|
||||
<td>
|
||||
<div class="clearfix">
|
||||
<div class="float-start">
|
||||
<div class="float-left">
|
||||
<strong>{{ percentage }}%</strong>
|
||||
</div>
|
||||
<div class="float-end">
|
||||
<div class="float-right">
|
||||
<small class="text-secondary">Jun 11, 2015 - Jul 10, 2015</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,10 +1 @@
|
||||
{% if posthogApiKey %}
|
||||
<script>
|
||||
/**
|
||||
* This script is used to track user interactions and page views.
|
||||
* It is only for demo purposes. Don't use it in production.
|
||||
*/
|
||||
// prettier-ignore
|
||||
!function (t, e) { var o, n, p, r; e.__SV || (window.posthog = e, e._i = [], e.init = function (i, s, a) { function g(t, e) { var o = e.split("."); 2 == o.length && (t = t[o[0]], e = o[1]), t[e] = function () { t.push([e].concat(Array.prototype.slice.call(arguments, 0))) } } (p = t.createElement("script")).type = "text/javascript", p.crossOrigin = "anonymous", p.async = !0, p.src = s.api_host.replace(".i.posthog.com", "-assets.i.posthog.com") + "/static/array.js", (r = t.getElementsByTagName("script")[0]).parentNode.insertBefore(p, r); var u = e; for (void 0 !== a ? u = e[a] = [] : a = "posthog", u.people = u.people || [], u.toString = function (t) { var e = "posthog"; return "posthog" !== a && (e += "." + a), t || (e += " (stub)"), e }, u.people.toString = function () { return u.toString(1) + ".people (stub)" }, o = "init capture register register_once register_for_session unregister unregister_for_session getFeatureFlag getFeatureFlagPayload isFeatureEnabled reloadFeatureFlags updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures on onFeatureFlags onSessionId getSurveys getActiveMatchingSurveys renderSurvey canRenderSurvey getNextSurveyStep identify setPersonProperties group resetGroups setPersonPropertiesForFlags resetPersonPropertiesForFlags setGroupPropertiesForFlags resetGroupPropertiesForFlags reset get_distinct_id getGroups get_session_id get_session_replay_url alias set_config startSessionRecording stopSessionRecording sessionRecordingStarted captureException loadToolbar get_property getSessionProperty createPersonProfile opt_in_capturing opt_out_capturing has_opted_in_capturing has_opted_out_capturing clear_opt_in_out_capturing debug".split(" "), n = 0; n < o.length; n++)g(u, o[n]); e._i.push([i, s, a]) }, e.__SV = 1) }(document, window.posthog || []);const currentDomain = window.location.hostname;if (['docs.tabler.io', 'preview.tabler.io', 'dev.tabler.io'].includes(currentDomain)) {posthog.init('{{ posthogApiKey }}', {api_host: `/eat`,person_profiles: 'identified_only',capture_pageview: true,capture_pageleave: true,loaded: function (posthog) {console.log('PostHog initialized on', currentDomain);}});}
|
||||
</script>
|
||||
{% endif %}
|
||||
<script defer data-api="/stats/event" data-domain="preview.tabler.io" src="/stats/js/script.js"></script>
|
||||
@@ -13,9 +13,4 @@
|
||||
<script src="{{ page | relative }}/preview/js/demo{% if environment != 'development' %}.min{% endif %}.js{% if environment != 'development' %}?{{ 'now' | date: '%s' }}{% endif %}" defer></script>
|
||||
<!-- END DEMO SCRIPTS -->
|
||||
|
||||
{% if environment == 'preview' %}
|
||||
<script src="https://scripts.tabler.io/banner.js" defer data-tblr-ref="tabler-preview-top-banner"></script>
|
||||
{% endif %}
|
||||
|
||||
|
||||
{% scripts %}
|
||||
@@ -64,7 +64,7 @@
|
||||
{% include "ui/icon.html" icon="settings" %}
|
||||
</span>
|
||||
<span class="nav-link-title">
|
||||
Theme Settings
|
||||
Settings
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{% assign breakpoint = include.breakpoint | default: 'lg' %}
|
||||
|
||||
<aside class="navbar navbar-vertical{% if include.end %} navbar-end{% endif %} navbar-expand-{{ breakpoint }}{% if include.transparent %} navbar-transparent{% endif %}{% if include.background %} bg-{{ include.background }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}"{% if include.background-color %} style="background: {{ include.background-color }}"{% endif %}{% if include.dark %} data-bs-theme="dark"{% endif %}>
|
||||
<aside class="navbar navbar-vertical{% if include.right %} navbar-right{% endif %} navbar-expand-{{ breakpoint }}{% if include.transparent %} navbar-transparent{% endif %}{% if include.background %} bg-{{ include.background }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}"{% if include.background-color %} style="background: {{ include.background-color }}"{% endif %}{% if include.dark %} data-bs-theme="dark"{% endif %}>
|
||||
<div class="container-fluid">
|
||||
{% include "layout/navbar-toggler.html" target="sidebar-menu" %}
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<p class="text-secondary">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt, ipsa? Voluptates sunt, ipsum esse quis obcaecati atque placeat consectetur beatae, tenetur ducimus iure minima expedita recusandae doloribus nam. Pariatur, facilis?</p>
|
||||
<div class="btn-list justify-content-center mt-6">
|
||||
{% include "ui/button.html" text="Get started" color="primary" %}
|
||||
{% include "ui/button.html" text="Learn more" ghost=true icon-end="chevron-right" %}
|
||||
{% include "ui/button.html" text="Learn more" ghost=true icon-right="chevron-right" %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
34
shared/includes/parts/buttons-table.html
Normal file
34
shared/includes/parts/buttons-table.html
Normal file
@@ -0,0 +1,34 @@
|
||||
{% assign prefix = include.prefix | default: 'btn-' %}
|
||||
{% assign show-link = include.show-link | default: false %}
|
||||
{% assign show-states = include.show-states | default: false %}
|
||||
{% assign hide-labels = include.hide-labels | default: false %}
|
||||
{% assign variants = include.variants | default: site.themeColors %}
|
||||
|
||||
{% for state in site.buttonStates %}
|
||||
{% if show-states or state.class != 'active' and state.class != 'disabled' %}
|
||||
<div class="row g-2 align-items-center">
|
||||
{% unless hide-labels %}<div class="col-12 col-xl-2 font-weight-semibold">{{ state.title }}</div>{% endunless %}
|
||||
{% for variant in variants %}
|
||||
{% if show-link or variant[0] != 'link' %}
|
||||
<div class="col-6 col-sm-4 col-md-2 col-xl{% if include.auto-columns %}-auto{% endif %}{% if variant[0] == 'light' %} bg-dark{% endif %} py-3">
|
||||
{% if include.icon or include.icon-only %}
|
||||
{% assign icon = variant[1].icon %}
|
||||
{% endif %}
|
||||
|
||||
{% assign class = prefix | append: variant[0] %}
|
||||
{% if state.class %}
|
||||
{% assign class = class | append: ' ' | append: state.class %}
|
||||
{% endif %}
|
||||
{% if include.class %}
|
||||
{% assign class = class | append: ' ' | append: include.class %}
|
||||
{% endif %}
|
||||
|
||||
{% assign text = variant[1].title %}
|
||||
{% assign color = variant[0] %}
|
||||
{% include "ui/button.html" block=true color=false class=class icon=icon icon-only=include.icon-only text=text %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
@@ -12,7 +12,7 @@
|
||||
<div class="h-2 {% if config.topmenu-dark %}bg-dark{% else %}border-bottom bg-white{% endif %}"></div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if config.sidebar-end %}
|
||||
{% if config.sidebar-right %}
|
||||
<div class="{% if config.sidebar-narrow %}col-auto w-2{% else %}col-3{% endif %} {% if config.sidebar-dark %}bg-dark{% else %}border-start bg-white{% endif %}"></div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
<div class="settings">
|
||||
<a href="#" class="btn btn-floating btn-icon btn-primary" data-bs-toggle="offcanvas" data-bs-target="#offcanvasSettings" aria-controls="offcanvasSettings" aria-label="Theme Settings">
|
||||
<a href="#" class="btn btn-floating btn-icon btn-primary" data-bs-toggle="offcanvas" data-bs-target="#offcanvasSettings" aria-controls="offcanvasSettings" aria-label="Theme Builder">
|
||||
{% include "ui/icon.html" icon="brush" %}
|
||||
</a>
|
||||
|
||||
<form class="offcanvas offcanvas-start offcanvas-narrow" tabindex="-1" id="offcanvasSettings">
|
||||
<div class="offcanvas-header">
|
||||
<h2 class="offcanvas-title">Theme Settings</h2>
|
||||
<h2 class="offcanvas-title">Theme Builder</h2>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="offcanvas-body d-flex flex-column">
|
||||
@@ -96,7 +96,8 @@
|
||||
Reset changes
|
||||
</button>
|
||||
<a href="#" class="btn btn-primary w-100" data-bs-dismiss="offcanvas">
|
||||
Save
|
||||
{% include "ui/icon.html" icon="settings" %}
|
||||
Save settings
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -24,6 +24,6 @@
|
||||
{% if include.icon %}{% include "ui/icon.html" icon=include.icon color=include.icon-color %}{% endif %}
|
||||
{% unless include.icon-only %}
|
||||
{{ include.text | default: "Button" }}{% if include.dots %}<span class="animated-dots"></span>{% endif %}
|
||||
{% if include.icon-end %}{% include "ui/icon.html" icon=include.icon-end class="icon-end" %}{% endif %}
|
||||
{% if include.icon-right %}{% include "ui/icon.html" icon=include.icon-right class="icon-right" %}{% endif %}
|
||||
{% endunless %}
|
||||
</{{ e }}>
|
||||
@@ -13,6 +13,7 @@
|
||||
height: 300,
|
||||
menubar: false,
|
||||
statusbar: false,
|
||||
license_key: 'gpl',
|
||||
plugins: [
|
||||
'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview', 'anchor',
|
||||
'searchreplace', 'visualblocks', 'code', 'fullscreen',
|
||||
|
||||
@@ -22,17 +22,14 @@
|
||||
<meta name="HandheldFriendly" content="True"/>
|
||||
<meta name="MobileOptimized" content="320"/>
|
||||
|
||||
<link rel="icon" href="{{ page | relative }}/favicon.ico" type="image/x-icon" />
|
||||
<link rel="icon" href="{{ page | relative }}/favicon.ico" type="image/x-icon"/>
|
||||
<link rel="shortcut icon" href="{{ page | relative }}/favicon.ico" type="image/x-icon"/>
|
||||
|
||||
<meta name="description" content="{{ description | default: site.description | escape }}"/>
|
||||
|
||||
{% include "layout/og.html" %}
|
||||
{% elsif environment == 'development' %}
|
||||
<link rel="icon" href="{{ page | relative }}/favicon-dev.ico" type="image/x-icon" />
|
||||
<link rel="shortcut icon" href="{{ page | relative }}/favicon-dev.ico" type="image/x-icon" />
|
||||
{% endif %}
|
||||
|
||||
|
||||
{% include "layout/css.html" %}
|
||||
{% include "layout/js-libs.html" head %}
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ layout: base
|
||||
<div class="page">
|
||||
{% if layout-sidebar %}
|
||||
<!-- BEGIN SIDEBAR -->
|
||||
{% include "layout/sidebar.html" dark=layout-sidebar-dark end=layout-sidebar-end transparent=layout-navbar-transparent breakpoint="lg" %}
|
||||
{% include "layout/sidebar.html" dark=layout-sidebar-dark right=layout-sidebar-right transparent=layout-navbar-transparent breakpoint="lg" %}
|
||||
<!-- END SIDEBAR -->
|
||||
{% endif %}
|
||||
|
||||
|
||||
@@ -5,8 +5,6 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
{% if environment == 'production' %}
|
||||
|
||||
{% assign pageSection = "" %}
|
||||
{% if page.url contains "/ui/" %}
|
||||
{% assign pageSection = "UI" %}
|
||||
@@ -48,14 +46,7 @@
|
||||
<meta name="twitter:title" content="{{ metaTitle }}">
|
||||
{% if metaDescription %}<meta name="twitter:description" content="{{ metaDescription }}">{% endif %}
|
||||
|
||||
{% elsif environment == 'development' %}
|
||||
<link rel="icon" href="{{ page | relative }}/favicon-dev.ico" type="image/x-icon" />
|
||||
<link rel="shortcut icon" href="{{ page | relative }}/favicon-dev.ico" type="image/x-icon" />
|
||||
{% endif %}
|
||||
|
||||
{% if environment == 'production' %}
|
||||
{% include "layout/analytics.html" %}
|
||||
{% endif %}
|
||||
<script defer data-api="/stats/event" data-domain="docs.tabler.io" src="/stats/js/script.js"></script>
|
||||
|
||||
<link rel="stylesheet" href="/dist/css/tabler{% if environment != 'development' %}.min{% endif %}.css{% if environment != 'development' %}?{{ 'now' | date: '%s' }}{% endif %}" />
|
||||
{% for plugin in site.cssPlugins %}
|
||||
@@ -205,9 +196,5 @@
|
||||
|
||||
<script src="/dist/js/tabler{% if environment != 'development' %}.min{% endif %}.js"></script>
|
||||
<script src="/js/docs{% if environment != 'development' %}.min{% endif %}.js" defer></script>
|
||||
|
||||
{% if environment == 'production' %}
|
||||
<script src="https://scripts.tabler.io/banner.js" defer data-tblr-ref="tabler-docs"></script>
|
||||
{% endif %}
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 103 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 110 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 96 KiB After Width: | Height: | Size: 63 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 125 KiB After Width: | Height: | Size: 125 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 128 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 99 KiB After Width: | Height: | Size: 79 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 105 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 84 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 106 KiB After Width: | Height: | Size: 106 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 101 KiB After Width: | Height: | Size: 78 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 102 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 107 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 96 KiB After Width: | Height: | Size: 63 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 121 KiB After Width: | Height: | Size: 121 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 125 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 97 KiB After Width: | Height: | Size: 78 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 104 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 83 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 104 KiB After Width: | Height: | Size: 104 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 98 KiB After Width: | Height: | Size: 75 KiB |
@@ -1,9 +1,7 @@
|
||||
{
|
||||
"$schema": "https://turbo.build/schema.json",
|
||||
"globalEnv": [
|
||||
"NODE_ENV",
|
||||
"NEXT_PUBLIC_POSTHOG_KEY",
|
||||
"NEXT_PUBLIC_POSTHOG_HOST"
|
||||
"NODE_ENV"
|
||||
],
|
||||
"tasks": {
|
||||
"build": {
|
||||
|
||||
Reference in New Issue
Block a user