mirror of
https://github.com/tabler/tabler.git
synced 2025-12-21 17:34:25 +04:00
Compare commits
43 Commits
@tabler/co
...
dev-depend
| Author | SHA1 | Date | |
|---|---|---|---|
|
620e3f6dc7 | ||
|
8947d7c7b7 | ||
|
|
399a5c59f9 | ||
|
ad22d046c3 | ||
|
|
b8b63d7e94 | ||
|
ab8009b771 | ||
|
|
bd35fd39cf | ||
|
|
4b65380293 | ||
|
2c73788cd1 | ||
|
|
a967970419 | ||
|
64baa141e7 | ||
|
|
49ab9ea931 | ||
|
|
a8c41914c4 | ||
|
|
9951fe9b1d | ||
|
cfd4cb6624 | ||
|
6fec73a3c4 | ||
|
29cc0cd378 | ||
|
6c47b5f868 | ||
|
|
6c38a48af1 | ||
|
|
6c4dd3670d | ||
|
|
2a12f72b28 | ||
|
|
f91b0f7cfa | ||
|
|
af816227bc | ||
|
|
59b6f73a06 | ||
|
|
266d5ad773 | ||
|
db6200a998 | ||
|
|
70a41e4fc2 | ||
|
|
e96f055238 | ||
|
|
a200d30f04 | ||
|
666a296a62 | ||
|
|
545defc852 | ||
|
|
1b0f8206ee | ||
|
|
c2cb3d3255 | ||
|
|
a0377f9752 | ||
|
|
c914ecfb05 | ||
|
|
57afd0bb11 | ||
|
|
8db1c08744 | ||
|
|
08e4919ae1 | ||
|
|
ef9d75f32f | ||
|
|
3e35545edc | ||
|
|
446c34eceb | ||
|
|
90285704e4 | ||
|
|
a7f73d7f7e |
5
.changeset/chilled-pans-cheer.md
Normal file
5
.changeset/chilled-pans-cheer.md
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
"@tabler/preview": minor
|
||||
---
|
||||
|
||||
Add a color palette in the signing component
|
||||
5
.changeset/fresh-rockets-retire.md
Normal file
5
.changeset/fresh-rockets-retire.md
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
"@tabler/core": patch
|
||||
---
|
||||
|
||||
Fix mixed declarations in SCSS
|
||||
5
.changeset/light-cooks-hug.md
Normal file
5
.changeset/light-cooks-hug.md
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
"@tabler/preview": patch
|
||||
---
|
||||
|
||||
Update icons to v3.34.1 (75 new icons)
|
||||
5
.changeset/modern-dots-bathe.md
Normal file
5
.changeset/modern-dots-bathe.md
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
"@tabler/preview": patch
|
||||
---
|
||||
|
||||
Update activity messages
|
||||
5
.changeset/tricky-moons-laugh.md
Normal file
5
.changeset/tricky-moons-laugh.md
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
"@tabler/docs": patch
|
||||
---
|
||||
|
||||
Fix Docs search in dark mode
|
||||
5
.changeset/twelve-tables-attack.md
Normal file
5
.changeset/twelve-tables-attack.md
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
"@tabler/preview": patch
|
||||
---
|
||||
|
||||
Fix responsive layputs in 'Form Elements' page
|
||||
56
.cursor/rules/main.mdc
Normal file
56
.cursor/rules/main.mdc
Normal file
@@ -0,0 +1,56 @@
|
||||
---
|
||||
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,10 +13,9 @@ 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
|
||||
trustedAuthors: codecalm, dependabot
|
||||
pattern: Gemfile.lock|pnpm-lock.json|pnpm-lock.yaml
|
||||
trustedAuthors: codecalm, BG-Software-BG, dependabot
|
||||
|
||||
16
README.md
16
README.md
@@ -23,24 +23,8 @@ A premium and open source dashboard template with a responsive and high-quality
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<p align="center">
|
||||
<a href="https://github.com/sponsors/codecalm" target="_blank">
|
||||
<img src="https://raw.githubusercontent.com/tabler/tabler/dev/shared/static/sponsor-banner-homepage.svg" alt="Sponsor Banner">
|
||||
</a>
|
||||
</p>
|
||||
|
||||
## Testing
|
||||
|
||||
<p align="center">Visual testing with:</p>
|
||||
|
||||
<p align="center">
|
||||
<a href="https://argos-ci.com/" target="_blank">
|
||||
<picture>
|
||||
<img src="https://github.com/user-attachments/assets/7d231a26-eff5-4fc5-8392-b2a679a7c572" alt="Argos-CI" height="164" />
|
||||
</picture>
|
||||
</a>
|
||||
</p>
|
||||
|
||||
<p align="center">Browser testing via:</p>
|
||||
|
||||
<p align="center">
|
||||
|
||||
@@ -1,5 +1,36 @@
|
||||
# @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
|
||||
|
||||
- 446c34e: Fix README file in core package
|
||||
|
||||
## 1.3.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- a7f73d7: Fix README file in core package
|
||||
|
||||
## 1.3.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
42
core/README.md
Normal file
42
core/README.md
Normal file
@@ -0,0 +1,42 @@
|
||||
# Tabler Core
|
||||
|
||||
Tabler Core is a set of components and utilities for building web applications. It provides a collection of pre-designed components, such as buttons, forms, modals, and more, that can be easily customized and integrated into your projects.
|
||||
|
||||
## 🔎 Preview
|
||||
|
||||
Tabler is fully responsive and compatible with all modern browsers. Thanks to its modern and user-friendly design you can create a fully functional interface that users will love! Choose the layouts and components you need and customize them to make your design consistent and eye-catching. Every component has been created with attention to detail to make your interface beautiful!
|
||||
|
||||
<p align="center">
|
||||
<a href="https://preview.tabler.io" target="_blank">
|
||||
<img src="https://raw.githubusercontent.com/tabler/tabler/dev/shared/static/tabler-preview.png" alt="Tabler Preview">
|
||||
</a>
|
||||
</p>
|
||||
|
||||
## Installation
|
||||
|
||||
To install Tabler Core, you can use npm or yarn. Run one of the following commands in your terminal:
|
||||
|
||||
```bash
|
||||
npm install @tabler/core
|
||||
```
|
||||
|
||||
or
|
||||
|
||||
```bash
|
||||
pnpm add @tabler/core
|
||||
```
|
||||
|
||||
## Sponsors
|
||||
|
||||
**If you want to support our project and help us grow it, you can [become a sponsor on GitHub](https://github.com/sponsors/codecalm) or just [donate on PayPal](https://paypal.me/codecalm) :)**
|
||||
|
||||
<p align="center">
|
||||
<a href="https://github.com/sponsors/codecalm">
|
||||
<img src="https://cdn.jsdelivr.net/gh/tabler/sponsors@latest/sponsors.svg" alt="Tabler sponsors">
|
||||
</a>
|
||||
</p>
|
||||
|
||||
|
||||
## License
|
||||
|
||||
See the [LICENSE](https://github.com/tabler/tabler/blob/master/LICENSE) file.
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@tabler/core",
|
||||
"version": "1.3.0",
|
||||
"version": "1.4.0",
|
||||
"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 scss/:dist/css/ --no-source-map --load-path=node_modules",
|
||||
"css-compile": "sass --no-source-map --load-path=node_modules --style expanded scss/:dist/css/",
|
||||
"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.6"
|
||||
"bootstrap": "5.3.7"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@hotwired/turbo": "^8.0.13",
|
||||
"@melloware/coloris": "^0.24.2",
|
||||
"@melloware/coloris": "^0.25.0",
|
||||
"apexcharts": "3.54.1",
|
||||
"autosize": "^6.0.1",
|
||||
"choices.js": "^11.1.0",
|
||||
"clipboard": "^2.0.11",
|
||||
"countup.js": "^2.8.2",
|
||||
"countup.js": "^2.9.0",
|
||||
"dropzone": "^6.0.0-beta.2",
|
||||
"flatpickr": "^4.6.13",
|
||||
"fslightbox": "^3.6.0",
|
||||
"fullcalendar": "^6.1.17",
|
||||
"fslightbox": "^3.6.2",
|
||||
"fullcalendar": "^6.1.18",
|
||||
"hugerte": "^1.0.9",
|
||||
"imask": "^7.6.1",
|
||||
"jsvectormap": "^1.6.0",
|
||||
"jsvectormap": "^1.7.0",
|
||||
"list.js": "^2.3.1",
|
||||
"litepicker": "^2.0.12",
|
||||
"nouislider": "^15.8.1",
|
||||
"plyr": "^3.7.8",
|
||||
"signature_pad": "^5.0.7",
|
||||
"signature_pad": "^5.0.10",
|
||||
"star-rating.js": "^4.3.1",
|
||||
"tom-select": "^2.4.3",
|
||||
"typed.js": "^2.1.0"
|
||||
|
||||
@@ -14,7 +14,6 @@
|
||||
@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";
|
||||
|
||||
@@ -76,6 +76,7 @@
|
||||
@import "utils/opacity";
|
||||
@import "utils/shadow";
|
||||
@import "utils/text";
|
||||
@import "utils/hover";
|
||||
|
||||
@import "debug";
|
||||
|
||||
|
||||
@@ -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: .04em !default;
|
||||
$spacing-wide: 0.04em !default;
|
||||
$spacing-normal: 0 !default;
|
||||
$spacing-tight: -.04em !default;
|
||||
$spacing-tight: -0.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: .71428571em !default;
|
||||
$font-size-reative-sm: .85714285em !default;
|
||||
$font-size-reative-xs: 0.71428571em !default;
|
||||
$font-size-reative-sm: 0.85714285em !default;
|
||||
$font-size-reative-md: 1em !default;
|
||||
|
||||
$font-sizes: (
|
||||
@@ -146,7 +146,7 @@ $border-light-opacity: 0.08 !default;
|
||||
$border-dark-opacity: 0.24 !default;
|
||||
$border-active-opacity: 0.58 !default;
|
||||
|
||||
$gray-50: #f9fafb !default;
|
||||
$gray-50: #f9fafb !default;
|
||||
$gray-100: #f3f4f6 !default;
|
||||
$gray-200: #e5e7eb !default;
|
||||
$gray-300: #d1d5db !default;
|
||||
@@ -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), .4) !default;
|
||||
$disabled-color: color-transparent(var(--#{$prefix}body-color), 0.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: .75rem !default;
|
||||
$avatar-status-size: 0.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: .5rem,
|
||||
icon-size: .5rem,
|
||||
status-size: .25rem,
|
||||
brand-size: .5rem
|
||||
font-size: 0.5rem,
|
||||
icon-size: 0.5rem,
|
||||
status-size: 0.25rem,
|
||||
brand-size: 0.5rem,
|
||||
),
|
||||
"xs": (
|
||||
size: 1.25rem,
|
||||
font-size: $h6-font-size,
|
||||
icon-size: .75rem,
|
||||
status-size: .375rem,
|
||||
brand-size: .75rem
|
||||
icon-size: 0.75rem,
|
||||
status-size: 0.375rem,
|
||||
brand-size: 0.75rem,
|
||||
),
|
||||
"sm": (
|
||||
size: 2rem,
|
||||
font-size: $h5-font-size,
|
||||
icon-size: 1.5rem,
|
||||
status-size: .5rem,
|
||||
brand-size: 1rem
|
||||
status-size: 0.5rem,
|
||||
brand-size: 1rem,
|
||||
),
|
||||
"md": (
|
||||
size: 2.5rem,
|
||||
font-size: $h4-font-size,
|
||||
icon-size: 1.5rem,
|
||||
status-size: .75rem,
|
||||
brand-size: 1.25rem
|
||||
status-size: 0.75rem,
|
||||
brand-size: 1.25rem,
|
||||
),
|
||||
"lg": (
|
||||
size: 3rem,
|
||||
font-size: $h2-font-size,
|
||||
icon-size: 2rem,
|
||||
status-size: .75rem,
|
||||
brand-size: 1.25rem
|
||||
status-size: 0.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,41 +586,71 @@ $badge-color: var(--#{$prefix}secondary) !default;
|
||||
$badge-bg-color: var(--#{$prefix}bg-surface-secondary) !default;
|
||||
|
||||
// Buttons
|
||||
$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-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-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-line-height-sm: divide(1rem, $input-btn-font-size-sm) !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-padding-y-lg: 0.75rem - 0.0625rem !default;
|
||||
$input-btn-line-height-lg: 2rem !default;
|
||||
$input-btn-icon-size-lg: 2rem !default;
|
||||
$input-btn-padding-y: 0.5625rem !default;
|
||||
$input-btn-padding-x: 1rem !default;
|
||||
$input-btn-line-height: 1.25rem !default;
|
||||
$input-btn-font-size: $font-size-base !default;
|
||||
$input-btn-icon-size: $icon-size !default;
|
||||
|
||||
$input-btn-padding-y-lg: 0.6875rem !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-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: .4 !default;
|
||||
$btn-padding-x: 1rem !default;
|
||||
$btn-disabled-opacity: 0.4 !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;
|
||||
@@ -811,7 +841,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, .04) !default;
|
||||
$navbar-nav-link-hover-bg: rgba(0, 0, 0, 0.04) !default;
|
||||
|
||||
$navbar-active-border-color: var(--#{$prefix}primary) !default;
|
||||
|
||||
@@ -828,8 +858,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: .5rem !default;
|
||||
$popover-body-padding-y: .5rem !default;
|
||||
$popover-body-padding-x: 0.5rem !default;
|
||||
$popover-body-padding-y: 0.5rem !default;
|
||||
$popover-box-shadow: var(--#{$prefix}shadow-lg) !default;
|
||||
|
||||
// Footer
|
||||
@@ -896,7 +926,7 @@ $table-sort-desc-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org
|
||||
// Toasts
|
||||
$toast-border-color: var(--#{$prefix}border-color) !default;
|
||||
$toast-header-color: var(--#{$prefix}gray-500) !default;
|
||||
$toast-background-color: var(--#{$prefix}bg-surface) !default;
|
||||
$toast-background-color: var(--#{$prefix}bg-surface) !default;
|
||||
|
||||
// Tracking
|
||||
$tracking-height: 1.5rem !default;
|
||||
|
||||
@@ -1,39 +1,50 @@
|
||||
@keyframes pulse {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: scale3d(.8, .8, .8)
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale3d(1, 1, 1);
|
||||
opacity: 1
|
||||
14% {
|
||||
transform: scale(1.25);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale3d(.8, .8, .8)
|
||||
28% {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
42% {
|
||||
transform: scale(1.25);
|
||||
}
|
||||
|
||||
70% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes tada {
|
||||
0% {
|
||||
transform: scale3d(1, 1, 1)
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
|
||||
10%, 5% {
|
||||
transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -5deg)
|
||||
10%,
|
||||
5% {
|
||||
transform: scale3d(0.9, 0.9, 0.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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -61,3 +72,27 @@
|
||||
}
|
||||
}
|
||||
|
||||
@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,7 +160,8 @@ Navbar
|
||||
&.navbar-vertical {
|
||||
box-shadow: inset calc(-1 * var(--#{$prefix}navbar-border-width)) 0 0 0 var(--#{$prefix}navbar-border-color);
|
||||
|
||||
&.navbar-right {
|
||||
&.navbar-right,
|
||||
&.navbar-end {
|
||||
box-shadow: inset calc(1 * var(--#{$prefix}navbar-border-width)) 0 0 0 var(--#{$prefix}navbar-border-color);
|
||||
}
|
||||
}
|
||||
@@ -172,7 +173,8 @@ Navbar
|
||||
}
|
||||
}
|
||||
|
||||
&.navbar-vertical.navbar-right {
|
||||
&.navbar-vertical.navbar-right,
|
||||
&.navbar-vertical.navbar-end {
|
||||
~ .navbar,
|
||||
~ .page-wrapper {
|
||||
margin-left: 0;
|
||||
@@ -219,14 +221,14 @@ Navbar toggler
|
||||
width: 1.25em;
|
||||
background: currentColor;
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
@include transition(
|
||||
top $navbar-toggler-animation-time $navbar-toggler-animation-time,
|
||||
bottom $navbar-toggler-animation-time $navbar-toggler-animation-time,
|
||||
transform $navbar-toggler-animation-time,
|
||||
opacity 0s $navbar-toggler-animation-time
|
||||
);
|
||||
position: relative;
|
||||
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: "";
|
||||
@@ -318,11 +320,12 @@ Navbar vertical
|
||||
bottom: 0;
|
||||
z-index: $zindex-fixed;
|
||||
align-items: flex-start;
|
||||
@include transition(transform $transition-time);
|
||||
overflow-y: scroll;
|
||||
padding: 0;
|
||||
@include transition(transform $transition-time);
|
||||
|
||||
&.navbar-right {
|
||||
&.navbar-right,
|
||||
&.navbar-end {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
@@ -364,7 +367,8 @@ Navbar vertical
|
||||
}
|
||||
}
|
||||
|
||||
&.navbar-right ~ .page {
|
||||
&.navbar-right ~ .page,
|
||||
&.navbar-end ~ .page {
|
||||
padding-left: 0;
|
||||
padding-right: $sidebar-width;
|
||||
}
|
||||
|
||||
@@ -1,7 +1,23 @@
|
||||
.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;
|
||||
@@ -21,6 +37,7 @@
|
||||
|
||||
.breadcrumb-item {
|
||||
&.active {
|
||||
color: var(--#{$prefix}breadcrumb-item-active-color);
|
||||
font-weight: var(--#{$prefix}breadcrumb-item-active-font-weight);
|
||||
|
||||
a {
|
||||
@@ -41,6 +58,20 @@
|
||||
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,6 +21,9 @@
|
||||
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);
|
||||
@@ -29,7 +32,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: inherit;
|
||||
color: var(--#{$prefix}btn-icon-color);
|
||||
}
|
||||
|
||||
.avatar {
|
||||
@@ -38,7 +41,8 @@
|
||||
margin: 0 calc(var(--#{$prefix}btn-padding-x) / 2) 0 calc(var(--#{$prefix}btn-padding-x) / -4);
|
||||
}
|
||||
|
||||
.icon-right {
|
||||
.icon-right,
|
||||
.icon-end {
|
||||
margin: 0 calc(var(--#{$prefix}btn-padding-x) / -4) 0 calc(var(--#{$prefix}btn-padding-x) / 2);
|
||||
}
|
||||
|
||||
@@ -74,7 +78,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);
|
||||
@@ -95,7 +99,8 @@
|
||||
--#{$prefix}btn-box-shadow: var(--#{$prefix}shadow-input);
|
||||
}
|
||||
|
||||
.btn-outline-#{$color} {
|
||||
.btn-outline-#{$color},
|
||||
.btn-outline.btn-#{$color} {
|
||||
--#{$prefix}btn-color: var(--#{$prefix}#{$color});
|
||||
--#{$prefix}btn-bg: transparent;
|
||||
--#{$prefix}btn-border-color: var(--#{$prefix}#{$color});
|
||||
@@ -104,11 +109,13 @@
|
||||
--#{$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-#{$color},
|
||||
.btn-ghost.btn-#{$color} {
|
||||
--#{$prefix}btn-color: var(--#{$prefix}#{$color});
|
||||
--#{$prefix}btn-bg: transparent;
|
||||
--#{$prefix}btn-border-color: transparent;
|
||||
@@ -130,16 +137,27 @@
|
||||
//
|
||||
// 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
|
||||
//
|
||||
@@ -160,9 +178,8 @@
|
||||
//
|
||||
// Icon button
|
||||
//
|
||||
.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));
|
||||
.btn-icon,
|
||||
.btn-action {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
|
||||
@@ -215,7 +232,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 .75s linear infinite;
|
||||
animation: spinner-border 0.75s linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -224,14 +241,7 @@
|
||||
//
|
||||
.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;
|
||||
@@ -249,6 +259,7 @@
|
||||
&.show {
|
||||
color: var(--#{$prefix}body-color);
|
||||
background: var(--#{$prefix}active-bg);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
&.show {
|
||||
@@ -258,4 +269,65 @@
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -111,11 +111,11 @@
|
||||
justify-content: center;
|
||||
padding: $card-spacer-y $card-spacer-x;
|
||||
text-align: center;
|
||||
@include transition(background $transition-time);
|
||||
border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
|
||||
flex: 1;
|
||||
color: inherit;
|
||||
font-weight: var(--#{$prefix}font-weight-medium);
|
||||
@include transition(background $transition-time);
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
@@ -215,11 +215,13 @@ Stacked card
|
||||
}
|
||||
|
||||
// Card rotate
|
||||
.card-rotate-left {
|
||||
.card-rotate-left,
|
||||
.card-rotate-start {
|
||||
transform: rotate(-1.5deg);
|
||||
}
|
||||
|
||||
.card-rotate-right {
|
||||
.card-rotate-right,
|
||||
.card-rotate-end {
|
||||
transform: rotate(1.5deg);
|
||||
}
|
||||
|
||||
|
||||
@@ -96,7 +96,7 @@
|
||||
|
||||
.dropend {
|
||||
> .dropdown-menu {
|
||||
margin-top: subtract(-$dropdown-padding-y, 1px);
|
||||
margin-top: subtract(calc(-1 * $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: (-$value);
|
||||
margin-left: -($value);
|
||||
margin-right: calc(-1 * $value);
|
||||
margin-left: calc(-1 * $value);
|
||||
|
||||
> .col,
|
||||
> [class*="col-"] {
|
||||
|
||||
@@ -30,14 +30,6 @@
|
||||
border-left-width: $border-width-wide;
|
||||
}
|
||||
|
||||
.list-group-item {
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: $dropdown-link-hover-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.list-group-item {
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
@@ -58,6 +50,14 @@
|
||||
}
|
||||
|
||||
.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 (-$nav-link-padding-x);
|
||||
margin: 0 calc(-1 * $nav-link-padding-x);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -65,8 +65,8 @@
|
||||
|
||||
.nav-link {
|
||||
display: flex;
|
||||
@include transition(color $transition-time, background-color $transition-time);
|
||||
align-items: center;
|
||||
@include transition(color $transition-time, background-color $transition-time);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
|
||||
@@ -9,10 +9,10 @@
|
||||
.page-link {
|
||||
min-width: 2rem;
|
||||
border-radius: var(--#{$prefix}pagination-border-radius);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--#{$prefix}pagination-hover-bg);
|
||||
}
|
||||
.page-item:not(.active) .page-link:hover {
|
||||
background: var(--#{$prefix}pagination-hover-bg);
|
||||
}
|
||||
|
||||
.page-text {
|
||||
@@ -68,4 +68,4 @@
|
||||
|
||||
.pagination-circle {
|
||||
--#{$prefix}pagination-border-radius: var(--tblr-border-radius-pill);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,7 +7,3 @@
|
||||
margin-left: .25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.star {
|
||||
|
||||
}
|
||||
|
||||
@@ -122,7 +122,9 @@
|
||||
// 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;
|
||||
|
||||
@@ -150,7 +152,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
.switch-icon-slide-left {
|
||||
.switch-icon-slide-left,
|
||||
.switch-icon-slide-start {
|
||||
.switch-icon-a {
|
||||
transform: translateX(0);
|
||||
}
|
||||
@@ -170,7 +173,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
.switch-icon-slide-right {
|
||||
.switch-icon-slide-right,
|
||||
.switch-icon-slide-end {
|
||||
.switch-icon-a {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
@@ -112,10 +112,9 @@ Table sort
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: inherit;
|
||||
@include transition(color $transition-time);
|
||||
|
||||
margin: (-$table-th-padding-y) (-$table-th-padding-x);
|
||||
margin: calc(-1 * $table-th-padding-y) calc(-1 * $table-th-padding-x);
|
||||
padding: $table-th-padding-y $table-th-padding-x;
|
||||
@include transition(color $transition-time);
|
||||
|
||||
&:hover,
|
||||
&.asc,
|
||||
|
||||
47
core/scss/utils/_hover.scss
Normal file
47
core/scss/utils/_hover.scss
Normal file
@@ -0,0 +1,47 @@
|
||||
%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: (-$form-range-thumb-height * .5);
|
||||
right: (-$form-range-thumb-height * .5);
|
||||
top: calc($form-range-thumb-height * -.5);
|
||||
right: calc($form-range-thumb-height * -.5);
|
||||
margin: 1px 1px 0 0;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,4 +1,24 @@
|
||||
# @tabler/docs
|
||||
# Tabler Documentation Changelog
|
||||
|
||||
## 1.4.0
|
||||
|
||||
### 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
|
||||
|
||||
## 1.3.0
|
||||
|
||||
@@ -24,59 +44,3 @@
|
||||
- 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-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" -%}
|
||||
{% 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" -%}
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html centered %}
|
||||
|
||||
|
||||
@@ -409,6 +409,16 @@ 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.
|
||||
@@ -476,6 +486,26 @@ 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.
|
||||
@@ -508,3 +538,142 @@ 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-right" data-bs-toggle="switch-icon">
|
||||
<button class="switch-icon switch-icon-slide-end" data-bs-toggle="switch-icon">
|
||||
<span class="switch-icon-a text-secondary">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
||||
@@ -28,17 +28,9 @@ 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. 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)
|
||||
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.
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@tabler/docs",
|
||||
"version": "1.3.0",
|
||||
"version": "1.4.0",
|
||||
"description": "",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
@@ -25,11 +25,11 @@
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"devDependencies": {
|
||||
"@11ty/eleventy": "^3.1.0",
|
||||
"@11ty/eleventy": "^3.1.2",
|
||||
"@docsearch/css": "^3.9.0",
|
||||
"@docsearch/js": "^3.9.0",
|
||||
"flat-cache": "^6.1.8",
|
||||
"shiki": "^3.2.2"
|
||||
"flat-cache": "^6.1.12",
|
||||
"shiki": "^3.8.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tabler/core": "workspace:*"
|
||||
|
||||
BIN
docs/public/favicon-dev.ico
Normal file
BIN
docs/public/favicon-dev.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
@@ -3,6 +3,7 @@
|
||||
:root {
|
||||
--docsearch-primary-color: var(--tblr-primary);
|
||||
--docsearch-searchbox-background: var(--tblr-bg-surface);
|
||||
--docsearch-searchbox-focus-background: var(--tblr-bg-surface);
|
||||
--docsearch-text-color: var(--tblr-body-text);
|
||||
--docsearch-key-shadow: 0 0 0 1px var(--tblr-border-color);
|
||||
--docsearch-key-gradient: var(--tblr-bg-surface-secondary);
|
||||
@@ -25,6 +26,80 @@
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.DocSearch-SearchBar {
|
||||
display: flex;
|
||||
padding: var(--docsearch-spacing) var(--docsearch-spacing) 0;
|
||||
background-color: var(--tblr-bg-surface) !important;
|
||||
}
|
||||
|
||||
.DocSearch-Hit-source {
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
.DocSearch-Dropdown {
|
||||
background-color: var(--tblr-bg-surface) !important;
|
||||
}
|
||||
|
||||
.DocSearch-Hit a {
|
||||
background-color: var(--tblr-bg-surface-secondary) !important;
|
||||
border: 1px solid var(--tblr-border-color) !important;
|
||||
color: var(--tblr-body-color) !important;
|
||||
box-shadow: none !important;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--tblr-bg-surface-tertiary) !important;
|
||||
border-color: var(--tblr-border-color-active) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.DocSearch-Hit-Container {
|
||||
color: var(--tblr-body-color) !important;
|
||||
}
|
||||
|
||||
.DocSearch-Hit-title {
|
||||
color: var(--tblr-body-color) !important;
|
||||
}
|
||||
|
||||
.DocSearch-Hit-path {
|
||||
color: var(--tblr-muted) !important;
|
||||
}
|
||||
|
||||
.DocSearch-Hit[aria-selected="true"] a {
|
||||
background-color: var(--tblr-primary) !important;
|
||||
border-color: var(--tblr-primary) !important;
|
||||
color: var(--tblr-primary-fg) !important;
|
||||
}
|
||||
|
||||
.DocSearch-Hit[aria-selected="true"] .DocSearch-Hit-Container,
|
||||
.DocSearch-Hit[aria-selected="true"] .DocSearch-Hit-title,
|
||||
.DocSearch-Hit[aria-selected="true"] .DocSearch-Hit-path {
|
||||
color: var(--tblr-primary-fg) !important;
|
||||
}
|
||||
|
||||
.DocSearch-Modal {
|
||||
background-color: var(--tblr-bg-surface) !important;
|
||||
box-shadow: var(--tblr-shadow-dropdown) !important;
|
||||
}
|
||||
|
||||
.DocSearch-Form {
|
||||
background-color: var(--tblr-bg-surface-secondary) !important;
|
||||
border: 1px solid var(--tblr-border-color) !important;
|
||||
}
|
||||
|
||||
.DocSearch-Input {
|
||||
color: var(--tblr-body-color) !important;
|
||||
|
||||
&::placeholder {
|
||||
color: var(--tblr-muted) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.DocSearch-Footer {
|
||||
background-color: var(--tblr-bg-surface) !important;
|
||||
border-top: 1px solid var(--tblr-border-color) !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.DocSearch-Button-Key {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
34
package.json
34
package.json
@@ -14,37 +14,39 @@
|
||||
"zip-package": "node .build/zip-package.mjs",
|
||||
"start": "pnpm dev"
|
||||
},
|
||||
"packageManager": "pnpm@10.11.0",
|
||||
"packageManager": "pnpm@10.13.1",
|
||||
"dependencies": {
|
||||
"shx": "^0.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@argos-ci/playwright": "^5.0.3",
|
||||
"@argos-ci/playwright": "^5.0.8",
|
||||
"@changesets/changelog-github": "^0.5.1",
|
||||
"@changesets/cli": "^2.29.4",
|
||||
"@playwright/test": "^1.52.0",
|
||||
"@changesets/cli": "^2.29.5",
|
||||
"@playwright/test": "^1.54.1",
|
||||
"@rollup/plugin-babel": "^6.0.4",
|
||||
"@rollup/plugin-commonjs": "^28.0.3",
|
||||
"@rollup/plugin-commonjs": "^28.0.6",
|
||||
"@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.1.2",
|
||||
"concurrently": "^9.2.0",
|
||||
"cross-env": "^7.0.3",
|
||||
"fs-extra": "^11.3.0",
|
||||
"glob": "^11.0.2",
|
||||
"glob": "^11.0.3",
|
||||
"js-beautify": "^1.15.4",
|
||||
"nodemon": "^3.1.10",
|
||||
"pnpm": "10.6.5",
|
||||
"postcss": "^8.5.3",
|
||||
"pnpm": "^10.6.5",
|
||||
"postcss": "^8.5.6",
|
||||
"postcss-cli": "^11.0.1",
|
||||
"prettier": "^3.5.3",
|
||||
"rollup": "4.40.2",
|
||||
"prettier": "^3.6.2",
|
||||
"rollup": "4.45.1",
|
||||
"rollup-plugin-dotenv": "^0.5.1",
|
||||
"rtlcss": "^4.3.0",
|
||||
"sass": "1.71.0",
|
||||
"sass": "1.89.2",
|
||||
"shelljs": "^0.10.0",
|
||||
"shx": "^0.4.0",
|
||||
"terser": "^5.39.2",
|
||||
"turbo": "^2.5.3"
|
||||
"terser": "^5.43.1",
|
||||
"turbo": "^2.5.5"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
1091
pnpm-lock.yaml
generated
1091
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@@ -1,30 +1,39 @@
|
||||
# @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
|
||||
|
||||
- Updated dependencies [446c34e]
|
||||
- @tabler/core@1.3.2
|
||||
|
||||
## 1.3.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [a7f73d7]
|
||||
- @tabler/core@1.3.1
|
||||
|
||||
## 1.3.0
|
||||
|
||||
### 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,6 +22,7 @@ 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.3.0",
|
||||
"version": "1.4.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "pnpm run clean && pnpm run css && pnpm run js && pnpm run html",
|
||||
@@ -31,13 +31,13 @@
|
||||
"zip": "mkdir -p packages-zip && zip -r packages-zip/tabler-$(node -p \"require('./package.json').version\").zip demo/*"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@11ty/eleventy": "^3.1.0",
|
||||
"@11ty/eleventy": "^3.1.2",
|
||||
"imageoptim-cli": "^3.1.9",
|
||||
"request": "^2.88.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tabler/core": "workspace:*",
|
||||
"@tabler/icons": "^3.31.0"
|
||||
"@tabler/icons": "^3.34.1"
|
||||
},
|
||||
"prettier": {
|
||||
"tabWidth": 2,
|
||||
|
||||
@@ -6,12 +6,12 @@ layout: default
|
||||
permalink: activity.html
|
||||
---
|
||||
|
||||
<div class="row justify-content-center">
|
||||
<div class="row">
|
||||
<div class="col-8">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
{% include "parts/activity.html" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -7,91 +7,177 @@ permalink: buttons.html
|
||||
---
|
||||
|
||||
<div class="row row-cards">
|
||||
<div class="col-12">
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Standard Buttons</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{% include "parts/buttons-table.html" show-link=true show-states=true %}
|
||||
<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 %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Outline Buttons</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>Use <code>.btn-outline-*</code> class for outline buttons.
|
||||
</p>
|
||||
{% include "parts/buttons-table.html" prefix="btn-outline-" show-states=true %}
|
||||
<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 %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Ghost Buttons</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>Use <code>.btn-ghost-*</code> class for ghost buttons.
|
||||
</p>
|
||||
{% include "parts/buttons-table.html" prefix="btn-ghost-" show-states=true %}
|
||||
<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 %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Square Buttons</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>Use <code>.btn-square</code> class for square buttons.
|
||||
</p>
|
||||
{% include "parts/buttons-table.html" class="btn-square" show-states=true %}
|
||||
<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 %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Pill Buttons</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>Use <code>.btn-pill</code> class for pill buttons.
|
||||
</p>
|
||||
{% include "parts/buttons-table.html" class="btn-pill" show-states=true %}
|
||||
<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 %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Extra colors</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{% include "parts/buttons-table.html" variants=site.colors hide-labels=true icon="star" auto-columns=true %}
|
||||
<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 %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Icon buttons</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{% include "parts/buttons-table.html" variants=site.socialColors hide-labels=true icon-only=true auto-columns=true %}
|
||||
<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 %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Social colors</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{% include "parts/buttons-table.html" variants=site.socialColors hide-labels=true icon=true auto-columns=true %}
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -62,13 +62,13 @@ permalink: cards.html
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="card card-rotate-right">
|
||||
<div class="card-body">Card rotate right</div>
|
||||
<div class="card card-rotate-end">
|
||||
<div class="card-body">Card rotate end</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="card card-rotate-left">
|
||||
<div class="card-body">Card rotate left</div>
|
||||
<div class="card card-rotate-start">
|
||||
<div class="card-body">Card rotate start</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-left="primary" title="Card with side status" %}
|
||||
{% include "cards/card.html" status-start="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-left" data-email-image />
|
||||
<img src="" class="img-fluid rounded-start" data-email-image />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
|
||||
BIN
preview/pages/favicon-dev.ico
Normal file
BIN
preview/pages/favicon-dev.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
@@ -45,7 +45,7 @@ permalink: form-elements.html
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card h-100">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Project ID</h3>
|
||||
<p class="card-subtitle">Used when interacting with the API.</p>
|
||||
@@ -80,13 +80,13 @@ permalink: form-elements.html
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="col-12 col-lg-4">
|
||||
{% include "cards/form/layout.html" %}
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4">
|
||||
<div class="col-lg-8">
|
||||
<div class="row row-cards">
|
||||
<div class="col-12">
|
||||
<div class="col-12 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Input mask</h3>
|
||||
@@ -127,8 +127,8 @@ permalink: form-elements.html
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<form class="card">
|
||||
<div class="col-12 col-lg-6">
|
||||
<form class="card h-100">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">My Profile</h3>
|
||||
</div>
|
||||
@@ -168,9 +168,9 @@ permalink: form-elements.html
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-8">
|
||||
<div class="col-lg-12">
|
||||
<div class="row row-cards">
|
||||
<div class="col-12">
|
||||
<div class="col-12 col-lg-6">
|
||||
<form class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Edit Profile</h3>
|
||||
@@ -250,8 +250,8 @@ But that's the difference in our opinions.</textarea>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="col-12 col-lg-6">
|
||||
<div class="card h-100">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">HTTP Request</h3>
|
||||
</div>
|
||||
|
||||
@@ -103,7 +103,7 @@ page-libs: [litepicker]
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{% include "ui/button.html" color="primary" block text="Send Message" icon-right="arrow-right" %}
|
||||
{% include "ui/button.html" color="primary" block text="Send Message" icon-end="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-right="arrow-right" %}
|
||||
{% include "ui/button.html" color="primary" text="Create Account" icon-end="arrow-right" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
page-header: Right vertical layout
|
||||
page-menu: layout.vertical-right
|
||||
page-menu: layout.vertical-end
|
||||
layout-sidebar: true
|
||||
layout-sidebar-right: true
|
||||
layout-sidebar-end: true
|
||||
layout-hide-topbar: true
|
||||
layout: homepage
|
||||
permalink: layout-vertical-right.html
|
||||
|
||||
@@ -13,12 +13,6 @@ signaturePad.fromDataURL("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3
|
||||
|
||||
|
||||
{% capture advanced-js %}
|
||||
function randomColor() {
|
||||
const r = Math.round(Math.random() * 255);
|
||||
const g = Math.round(Math.random() * 255);
|
||||
const b = Math.round(Math.random() * 255);
|
||||
return `rgb(${r},${g},${b})`;
|
||||
}
|
||||
|
||||
function download(dataURL, filename) {
|
||||
const blob = dataURLToBlob(dataURL);
|
||||
@@ -49,9 +43,8 @@ function dataURLToBlob(dataURL) {
|
||||
return new Blob([uInt8Array], { type: contentType });
|
||||
}
|
||||
|
||||
|
||||
document.querySelector("#signature-advanced-color").addEventListener("click", function () {
|
||||
signaturePad.penColor = randomColor();
|
||||
document.querySelector("#signature-advanced-color").addEventListener("input", function (e) {
|
||||
signaturePad.penColor = e.target.value;
|
||||
});
|
||||
|
||||
document.querySelector("#signature-advanced-svg").addEventListener("click", function () {
|
||||
@@ -112,7 +105,7 @@ document.querySelector("#signature-advanced-png").addEventListener("click", func
|
||||
<div class="mt-4">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<button href="" class="btn w-100" id="signature-advanced-color">Change color</button>
|
||||
<input href="" type="color" id="signature-advanced-color" class="w-100 form-control form-control-color" />
|
||||
</div>
|
||||
<div class="col">
|
||||
<button href="" class="btn w-100" id="signature-advanced-svg">Download SVG</button>
|
||||
|
||||
@@ -1,56 +1,162 @@
|
||||
[
|
||||
{
|
||||
"text": "<strong>%p</strong> commented on your <strong>\"I'm not a witch.\"</strong> post."
|
||||
"text": "<strong>%p</strong> commented on your post: <strong>Not everything is what it seems</strong>",
|
||||
"icon": "message-circle"
|
||||
},
|
||||
{
|
||||
"text": "It's <strong>%p</strong>'s birthday. Wish him well!"
|
||||
"text": "It's <strong>%p</strong>'s birthday today",
|
||||
"icon": "cake"
|
||||
},
|
||||
{
|
||||
"text": "<strong>%p</strong> posted <strong>\"Well, what do you want?\"</strong>."
|
||||
"text": "<strong>%p</strong> posted a status: <strong>Trying to figure things out one step at a time.</strong>",
|
||||
"icon": "pencil"
|
||||
},
|
||||
{
|
||||
"text": "<strong>%p</strong> created a new project <strong>Morning alarm clock</strong>."
|
||||
"text": "<strong>%p</strong> created a new project: <strong>Smart Morning Alarm</strong>",
|
||||
"icon": "alarm"
|
||||
},
|
||||
{
|
||||
"text": "<strong>%p</strong> liked your photo."
|
||||
"text": "<strong>%p</strong> liked your photo",
|
||||
"icon": "heart"
|
||||
},
|
||||
{
|
||||
"text": "<strong>%p</strong> registered new client as <strong>%c</strong>."
|
||||
"text": "<strong>%p</strong> registered a new client: <strong>Trilia Solutions</strong>",
|
||||
"icon": "user-plus"
|
||||
},
|
||||
{
|
||||
"text": "<strong>%p</strong> closed a new deal on project <strong>Pen Pineapple Apple Pen</strong>."
|
||||
"text": "<strong>%p</strong> closed a new deal on project: <strong>PPAP Campaign Strategy</strong>",
|
||||
"icon": "handshake"
|
||||
},
|
||||
{
|
||||
"text": "<strong>%p</strong> created a new project for <strong>%c</strong>."
|
||||
"text": "<strong>%p</strong> created a new project: <strong>Wikibox Knowledge Platform</strong>",
|
||||
"icon": "folder-plus"
|
||||
},
|
||||
{
|
||||
"text": "<strong>%p</strong> change status of <strong>Tabler Icons</strong> from <strong>open</strong> to <strong>closed</strong>."
|
||||
"text": "<strong>%p</strong> changed project status of <strong>Tabler Icons</strong> from <strong>open</strong> to <strong>closed</strong>",
|
||||
"icon": "check"
|
||||
},
|
||||
{
|
||||
"text": "<strong>%p</strong> liked <strong>Tabler UI Kit</strong>."
|
||||
"text": "<strong>%p</strong> liked the <strong>Tabler UI Kit</strong>",
|
||||
"icon": "thumb-up"
|
||||
},
|
||||
{
|
||||
"text": "<strong>%p</strong> posted new video."
|
||||
"text": "<strong>%p</strong> shared a new video: <strong>Design Tips for Busy Creators</strong>",
|
||||
"icon": "video"
|
||||
},
|
||||
{
|
||||
"text": "<strong>%p</strong> and 3 others followed you."
|
||||
"text": "<strong>%p</strong> and <strong>3 others</strong> followed you",
|
||||
"icon": "user-plus"
|
||||
},
|
||||
{
|
||||
"text": "<strong>%p</strong> upload 3 new photos to category <strong>Inspirations</strong>."
|
||||
"text": "<strong>%p</strong> uploaded <strong>3 new photos</strong> to category: <strong>Creative Inspirations</strong>",
|
||||
"icon": "photo"
|
||||
},
|
||||
{
|
||||
"text": "<strong>%p</strong> made a <strong>$10</strong> donation."
|
||||
"text": "<strong>%p</strong> made a <strong>$10 donation</strong>",
|
||||
"icon": "coin"
|
||||
},
|
||||
{
|
||||
"text": "<strong>%p</strong> created a profile."
|
||||
"text": "<strong>%p</strong> created a profile",
|
||||
"icon": "id"
|
||||
},
|
||||
{
|
||||
"text": "<strong>%p</strong> hosted the event <strong>Tabler UI Birthday</strong>."
|
||||
"text": "<strong>%p</strong> hosted the event: <strong>Tabler UI Anniversary</strong>",
|
||||
"icon": "calendar-event"
|
||||
},
|
||||
{
|
||||
"text": "<strong>%p</strong> mentioned you on <strong>Best of 2020</strong>."
|
||||
"text": "<strong>%p</strong> mentioned you in <strong>Best of 2020 Highlights</strong>",
|
||||
"icon": "at"
|
||||
},
|
||||
{
|
||||
"text": "<strong>%p</strong> sent a Review Request to <strong>Amanda Blake</strong>."
|
||||
"text": "<strong>%p</strong> sent a review request to <strong>Amanda Blake</strong>",
|
||||
"icon": "send"
|
||||
},
|
||||
{
|
||||
"text": "<strong>%p</strong> posted a photo from her vacation in <strong>Tuscany</strong>",
|
||||
"icon": "camera"
|
||||
},
|
||||
{
|
||||
"text": "<strong>%p</strong> shared an article: <strong>Top 10 productivity hacks</strong>",
|
||||
"icon": "book"
|
||||
},
|
||||
{
|
||||
"text": "<strong>%p</strong> commented on your photo",
|
||||
"icon": "message-circle"
|
||||
},
|
||||
{
|
||||
"text": "<strong>%p</strong> joined the group: <strong>UX Designers Hub</strong>",
|
||||
"icon": "users"
|
||||
},
|
||||
{
|
||||
"text": "<strong>%p</strong> uploaded new design mockups",
|
||||
"icon": "layout"
|
||||
},
|
||||
{
|
||||
"text": "<strong>%p</strong> reacted with ❤️ to your story",
|
||||
"icon": "emoji-heart-eyes"
|
||||
},
|
||||
{
|
||||
"text": "<strong>%p</strong> posted a video: <strong>Building Better Dashboards</strong>",
|
||||
"icon": "video"
|
||||
},
|
||||
{
|
||||
"text": "<strong>%p</strong> joined your webinar: <strong>Intro to TypeScript</strong>",
|
||||
"icon": "presentation"
|
||||
},
|
||||
{
|
||||
"text": "<strong>%p</strong> commented: <strong>This is so helpful!</strong>",
|
||||
"icon": "message-circle"
|
||||
},
|
||||
{
|
||||
"text": "<strong>%p</strong> updated her profile photo",
|
||||
"icon": "user-edit"
|
||||
},
|
||||
{
|
||||
"text": "<strong>%p</strong> posted a job listing: <strong>Frontend Developer</strong>",
|
||||
"icon": "briefcase"
|
||||
},
|
||||
{
|
||||
"text": "<strong>%p</strong> started following your project: <strong>Clean Code Patterns</strong>",
|
||||
"icon": "code"
|
||||
},
|
||||
{
|
||||
"text": "<strong>%p</strong> gave feedback on your latest design",
|
||||
"icon": "message-check"
|
||||
},
|
||||
{
|
||||
"text": "<strong>%p</strong> shared a playlist: <strong>Coding Flow</strong>",
|
||||
"icon": "music"
|
||||
},
|
||||
{
|
||||
"text": "<strong>%p</strong> joined the event: <strong>Night UI Meetup</strong>",
|
||||
"icon": "calendar-plus"
|
||||
},
|
||||
{
|
||||
"text": "<strong>%p</strong> shared a memory: <strong>2 years at Tabler!</strong>",
|
||||
"icon": "history"
|
||||
},
|
||||
{
|
||||
"text": "<strong>%p</strong> retweeted your latest post",
|
||||
"icon": "repeat"
|
||||
},
|
||||
{
|
||||
"text": "<strong>%p</strong> shared your story to their network",
|
||||
"icon": "share"
|
||||
},
|
||||
{
|
||||
"text": "<strong>%p</strong> invited you to collaborate on her workspace",
|
||||
"icon": "user-plus"
|
||||
},
|
||||
{
|
||||
"text": "<strong>%p</strong> published a new blog post: <strong>Dark Mode for All</strong>",
|
||||
"icon": "article"
|
||||
},
|
||||
{
|
||||
"text": "<strong>%p</strong> mentioned you in a comment",
|
||||
"icon": "at"
|
||||
},
|
||||
{
|
||||
"text": "<strong>%p</strong> shared a new design: <strong>Modern Dashboard UI</strong>",
|
||||
"icon": "layout"
|
||||
}
|
||||
]
|
||||
@@ -1 +1 @@
|
||||
{"version":"3.31.0","count":5880}
|
||||
{"version":"3.34.1","count":5945}
|
||||
File diff suppressed because one or more lines are too long
@@ -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","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"]
|
||||
["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"]
|
||||
@@ -1,22 +1,22 @@
|
||||
{
|
||||
"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",
|
||||
"css": "sha384-An/wz3SdsHjVEyb1y+Q7MwPz3YdJoVxmt+/CB0OdqSGBDnOWO+UL/hvgkrtlj4jo",
|
||||
"css-rtl": "sha384-RprtnnPRNE70SYFqGqYumwyYBsm4TWkKMjpRIG83xjdXJHtahpr3eRKHB6xhq7X8",
|
||||
"css-flags": "sha384-kmvP0hkBXZ2hMSZlbvE1Q2HIXzPCQRL3ijUeqNiwaPd2nl2Aks+s3gW+V5fAHOX9",
|
||||
"css-flags-rtl": "sha384-Q/h6koANGclsGnwB8rvF8h84H54NKHDeNWFj6yiE4WLLEXyHcz+Zu6Afkh2ssYTC",
|
||||
"css-marketing": "sha384-4dAlYnPzCom9yeC/5++PFq2FG/szJRlUPsDSrjZ3EWP8IAzK7g7rrsnSfqrS67Se",
|
||||
"css-marketing-rtl": "sha384-c6gNhuNYjp+lqluSdArbL8ciLEBq7IVU00XnPM2Eogj8RAjMapccvOM/pGhk3vV6",
|
||||
"css-payments": "sha384-xWIXbKxPLGG/ZEGUKxDjJn3xmUgd2PC2CSZUKJ4PyTse49DiuvJx2WT5wSNJRyw9",
|
||||
"css-payments-rtl": "sha384-69CxgA+uEPtM07SLA8MMAdnBmwtVGndDJf8nIPdfvNrDayBfPqOK3wS3nvV5yyk+",
|
||||
"css-socials": "sha384-eWmz8gyiLzrDw3JcT/PJxjGyKizQjvByfHqocjrMMkIrbKFCnOuP/qMwAz3bHmsC",
|
||||
"css-socials-rtl": "sha384-yobKDIyTOxB1z7t/uZ2ImuXrcKWF24vDYg2vR1n7x2msF09iWnvyIxQtfEl9+OFl",
|
||||
"css-props": "sha384-yctdHmQqHsVGkRviR41l44mMU+tmJq7aIvUiRG05pnl2kIjaX1e9yuT6SdYTVMg/",
|
||||
"css-props-rtl": "sha384-xMuKYM+iQpCesX0ZyyH7tW8KJgLkUOyHlPwNjEY8ZepdiAXhT9+psV8ohJ4xqlkg",
|
||||
"css-themes": "sha384-jTe/MdN6BlY4S3eYe6Qw++yTjuezmVnxWp/l7GAG1qXGC+jttphHqsAN/bGPvJOk",
|
||||
"css-themes-rtl": "sha384-WTp4aZ+OGqnkNR6Xe0sJwwfd0JHGq3dZTLU2ITKxTK2zjcJTBUMY/+Z4eXgm8ipF",
|
||||
"css-vendors-rtl": "sha384-V555LUGE2xyN4wNbzdVMgsajsKmJdlLFm20Ws72jEyPiSsTXXITV0PebNzVeBjnb",
|
||||
"css-vendors": "sha384-+X7+c/noY2B9ieq9daEaVStkUhIFyJTO5T6Occ6jZisx57sbECetvloLqcvGahUv",
|
||||
"js": "sha384-pku3birjgGovaJ9ngF7SaxKkF/eYUvBjiMJ+jTtWbNesIj2Rud2K63+4JD7EF4gk",
|
||||
"js-theme": "sha384-SoDJmj40r6f9Rfxi6Fq+bNS8ofhlZMyxHk9dq9Y8e1M17PZGkBRN/XUpx8swn0i5",
|
||||
"demo-css": "sha384-BUDq2P684xwRBf0GDlySvob+KJg4ko8y2K7njgvYBscmEuqoVVqJ75zcTDozwkFA",
|
||||
"demo-js": "sha384-UcTgbM9IZSOPHHuFa0R9H4TegQWoZkJKpeTjLV5hjem2k0CZ67Q4/bW2rT/Edf4Z"
|
||||
}
|
||||
@@ -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-left %}
|
||||
<div class="card-status-start bg-{{ include.status-left | default: 'blue' }}"></div>
|
||||
{% elsif include.status-start %}
|
||||
<div class="card-status-start bg-{{ include.status-start | default: 'blue' }}"></div>
|
||||
{% endif %}
|
||||
|
||||
{% if include.header or include.header-title or include.header-tabs or include.header-pills %}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{% assign horizontal = include.horizontal | default: false %}
|
||||
<form class="card">
|
||||
<form class="card h-100">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">{{ include.title | default: 'Basic form' }}</h3>
|
||||
</div>
|
||||
@@ -64,6 +64,9 @@
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<div class="text-end">
|
||||
<button type="submit" class="btn btn-primary">Submit</button>
|
||||
</div>
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
</div>
|
||||
<div class="flex-fill">
|
||||
<div>
|
||||
<small class="float-right text-secondary">4 min</small>
|
||||
<small class="float-end 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-right text-secondary">12 min</small>
|
||||
<small class="float-end 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-right text-secondary">34 min</small>
|
||||
<small class="float-end 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-right avatar{% if include.color %} bg-{{ include.color }}{% if include.light %}-lt{% else %} text-white{% endif %}{% endif %}">
|
||||
<div class="float-end 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-right font-weight-medium text-{{ include.description-value-color | default: 'green' }}">{{ include.description-value }}</span>
|
||||
<span class="float-end 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-left">
|
||||
<div class="float-start">
|
||||
<strong>{{ percentage }}%</strong>
|
||||
</div>
|
||||
<div class="float-right">
|
||||
<div class="float-end">
|
||||
<small class="text-secondary">Jun 11, 2015 - Jul 10, 2015</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
All rights reserved.
|
||||
</li>
|
||||
<li class="list-inline-item">
|
||||
{% if environment == 'production' %}
|
||||
{% if environment == 'production' or environment == 'preview' %}
|
||||
<a href="{{ page | relative }}/changelog.html" class="link-secondary" rel="noopener">
|
||||
v{{ package.version }}
|
||||
</a>
|
||||
|
||||
@@ -12,5 +12,10 @@
|
||||
<!-- BEGIN DEMO SCRIPTS -->
|
||||
<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">
|
||||
Settings
|
||||
Theme Settings
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{% assign breakpoint = include.breakpoint | default: 'lg' %}
|
||||
|
||||
<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 %}>
|
||||
<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 %}>
|
||||
<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-right="chevron-right" %}
|
||||
{% include "ui/button.html" text="Learn more" ghost=true icon-end="chevron-right" %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -1,34 +0,0 @@
|
||||
{% 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-right %}
|
||||
{% if config.sidebar-end %}
|
||||
<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 Builder">
|
||||
<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">
|
||||
{% 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 Builder</h2>
|
||||
<h2 class="offcanvas-title">Theme Settings</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,8 +96,7 @@
|
||||
Reset changes
|
||||
</button>
|
||||
<a href="#" class="btn btn-primary w-100" data-bs-dismiss="offcanvas">
|
||||
{% include "ui/icon.html" icon="settings" %}
|
||||
Save settings
|
||||
Save
|
||||
</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-right %}{% include "ui/icon.html" icon=include.icon-right class="icon-right" %}{% endif %}
|
||||
{% if include.icon-end %}{% include "ui/icon.html" icon=include.icon-end class="icon-end" %}{% endif %}
|
||||
{% endunless %}
|
||||
</{{ e }}>
|
||||
@@ -13,7 +13,6 @@
|
||||
height: 300,
|
||||
menubar: false,
|
||||
statusbar: false,
|
||||
license_key: 'gpl',
|
||||
plugins: [
|
||||
'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview', 'anchor',
|
||||
'searchreplace', 'visualblocks', 'code', 'fullscreen',
|
||||
@@ -40,4 +39,4 @@
|
||||
{%- capture_script %}
|
||||
{{ script }}
|
||||
{% endcapture_script %}
|
||||
{% endremoveemptylines %}
|
||||
{% endremoveemptylines %}
|
||||
|
||||
@@ -22,14 +22,17 @@
|
||||
<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 right=layout-sidebar-right transparent=layout-navbar-transparent breakpoint="lg" %}
|
||||
{% include "layout/sidebar.html" dark=layout-sidebar-dark end=layout-sidebar-end transparent=layout-navbar-transparent breakpoint="lg" %}
|
||||
<!-- END SIDEBAR -->
|
||||
{% endif %}
|
||||
|
||||
|
||||
@@ -5,30 +5,32 @@
|
||||
<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" %}
|
||||
{% assign pageSection = "UI" %}
|
||||
{% elsif page.url contains "/icons/" %}
|
||||
{% assign pageSection = "Icons" %}
|
||||
{% assign pageSection = "Icons" %}
|
||||
{% elsif page.url contains "/illustrations/" %}
|
||||
{% assign pageSection = "Illustrations" %}
|
||||
{% assign pageSection = "Illustrations" %}
|
||||
{% elsif page.url contains "/emails/" %}
|
||||
{% assign pageSection = "Emails" %}
|
||||
{% assign pageSection = "Emails" %}
|
||||
{% endif %}
|
||||
|
||||
{% assign metaTitle = title %}
|
||||
{% if seoTitle %}
|
||||
{% assign metaTitle = seoTitle %}
|
||||
{% assign metaTitle = seoTitle %}
|
||||
{% endif %}
|
||||
|
||||
{% assign metaDescription = description %}
|
||||
{% if seoDescription %}
|
||||
{% assign metaDescription = seoDescription %}
|
||||
{% assign metaDescription = seoDescription %}
|
||||
{% endif %}
|
||||
|
||||
{% assign siteName = "Tabler Documentation" %}
|
||||
{% if pageSection != "" %}
|
||||
{% assign siteName = "Tabler " | append: pageSection | append: " Documentation" %}
|
||||
{% assign siteName = "Tabler " | append: pageSection | append: " Documentation" %}
|
||||
{% endif %}
|
||||
|
||||
<title>{{ metaTitle }} | {{ siteName }}</title>
|
||||
@@ -48,6 +50,11 @@
|
||||
|
||||
<script defer data-api="/stats/event" data-domain="docs.tabler.io" src="/stats/js/script.js"></script>
|
||||
|
||||
{% 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 %}
|
||||
|
||||
<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 %}
|
||||
<link
|
||||
@@ -196,5 +203,9 @@
|
||||
|
||||
<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>
|
||||
|
||||
BIN
shared/static/illustrations/dark/403.png
Normal file
BIN
shared/static/illustrations/dark/403.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 103 KiB |
BIN
shared/static/illustrations/dark/500.png
Normal file
BIN
shared/static/illustrations/dark/500.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 110 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 63 KiB After Width: | Height: | Size: 96 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 125 KiB After Width: | Height: | Size: 125 KiB |
BIN
shared/static/illustrations/dark/hybrid-work.png
Normal file
BIN
shared/static/illustrations/dark/hybrid-work.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 128 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 79 KiB After Width: | Height: | Size: 99 KiB |
BIN
shared/static/illustrations/dark/painting.png
Normal file
BIN
shared/static/illustrations/dark/painting.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 105 KiB |
BIN
shared/static/illustrations/dark/podcast.png
Normal file
BIN
shared/static/illustrations/dark/podcast.png
Normal file
Binary file not shown.
|
After 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: 78 KiB After Width: | Height: | Size: 101 KiB |
BIN
shared/static/illustrations/light/403.png
Normal file
BIN
shared/static/illustrations/light/403.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 102 KiB |
BIN
shared/static/illustrations/light/500.png
Normal file
BIN
shared/static/illustrations/light/500.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 107 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 63 KiB After Width: | Height: | Size: 96 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 121 KiB After Width: | Height: | Size: 121 KiB |
BIN
shared/static/illustrations/light/hybrid-work.png
Normal file
BIN
shared/static/illustrations/light/hybrid-work.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 125 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 78 KiB After Width: | Height: | Size: 97 KiB |
BIN
shared/static/illustrations/light/painting.png
Normal file
BIN
shared/static/illustrations/light/painting.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 104 KiB |
BIN
shared/static/illustrations/light/podcast.png
Normal file
BIN
shared/static/illustrations/light/podcast.png
Normal file
Binary file not shown.
|
After 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: 75 KiB After Width: | Height: | Size: 98 KiB |
Reference in New Issue
Block a user