mirror of
https://github.com/tabler/tabler.git
synced 2025-12-22 01:44: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:
|
steps:
|
||||||
- name: Clone Tabler
|
- name: Clone Tabler
|
||||||
uses: actions/checkout@v4
|
uses: actions/checkout@v4
|
||||||
|
|
||||||
- name: Prevent lock file change
|
- name: Prevent lock file change
|
||||||
uses: xalvarez/prevent-file-change-action@v2
|
uses: xalvarez/prevent-file-change-action@v2
|
||||||
with:
|
with:
|
||||||
githubToken: ${{ secrets.GITHUB_TOKEN }}
|
githubToken: ${{ secrets.GITHUB_TOKEN }}
|
||||||
pattern: Gemfile.lock|pnpm-lock.json
|
pattern: Gemfile.lock|pnpm-lock.json|pnpm-lock.yaml
|
||||||
trustedAuthors: codecalm, dependabot
|
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>
|
</a>
|
||||||
</p>
|
</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
|
## 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">Browser testing via:</p>
|
||||||
|
|
||||||
<p align="center">
|
<p align="center">
|
||||||
|
|||||||
@@ -1,5 +1,36 @@
|
|||||||
# @tabler/core
|
# @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
|
## 1.3.0
|
||||||
|
|
||||||
### Minor Changes
|
### 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",
|
"name": "@tabler/core",
|
||||||
"version": "1.3.0",
|
"version": "1.4.0",
|
||||||
"description": "Premium and Open Source dashboard template with responsive and high quality UI.",
|
"description": "Premium and Open Source dashboard template with responsive and high quality UI.",
|
||||||
"homepage": "https://tabler.io",
|
"homepage": "https://tabler.io",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
@@ -8,7 +8,7 @@
|
|||||||
"build": "pnpm run clean && pnpm run css && pnpm run js && pnpm run copy && pnpm run generate-sri",
|
"build": "pnpm run clean && pnpm run css && pnpm run js && pnpm run copy && pnpm run generate-sri",
|
||||||
"clean": "shx rm -rf dist demo",
|
"clean": "shx rm -rf dist demo",
|
||||||
"css": "pnpm run css-compile && pnpm run css-prefix && pnpm run css-rtl && pnpm run css-minify && pnpm run css-banner",
|
"css": "pnpm run css-compile && pnpm run css-prefix && pnpm run css-rtl && pnpm run css-minify && pnpm run css-banner",
|
||||||
"css-compile": "sass 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-banner": "node .build/add-banner.mjs",
|
||||||
"css-prefix": "postcss --config .build/postcss.config.mjs --replace \"dist/css/*.css\" \"!dist/css/*.rtl*.css\" \"!dist/css/*.min.css\"",
|
"css-prefix": "postcss --config .build/postcss.config.mjs --replace \"dist/css/*.css\" \"!dist/css/*.rtl*.css\" \"!dist/css/*.min.css\"",
|
||||||
"css-rtl": "cross-env NODE_ENV=RTL postcss --config .build/postcss.config.mjs --dir \"dist/css\" --ext \".rtl.css\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*.rtl.css\"",
|
"css-rtl": "cross-env NODE_ENV=RTL postcss --config .build/postcss.config.mjs --dir \"dist/css\" --ext \".rtl.css\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*.rtl.css\"",
|
||||||
@@ -146,28 +146,28 @@
|
|||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@popperjs/core": "^2.11.8",
|
"@popperjs/core": "^2.11.8",
|
||||||
"bootstrap": "5.3.6"
|
"bootstrap": "5.3.7"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@hotwired/turbo": "^8.0.13",
|
"@hotwired/turbo": "^8.0.13",
|
||||||
"@melloware/coloris": "^0.24.2",
|
"@melloware/coloris": "^0.25.0",
|
||||||
"apexcharts": "3.54.1",
|
"apexcharts": "3.54.1",
|
||||||
"autosize": "^6.0.1",
|
"autosize": "^6.0.1",
|
||||||
"choices.js": "^11.1.0",
|
"choices.js": "^11.1.0",
|
||||||
"clipboard": "^2.0.11",
|
"clipboard": "^2.0.11",
|
||||||
"countup.js": "^2.8.2",
|
"countup.js": "^2.9.0",
|
||||||
"dropzone": "^6.0.0-beta.2",
|
"dropzone": "^6.0.0-beta.2",
|
||||||
"flatpickr": "^4.6.13",
|
"flatpickr": "^4.6.13",
|
||||||
"fslightbox": "^3.6.0",
|
"fslightbox": "^3.6.2",
|
||||||
"fullcalendar": "^6.1.17",
|
"fullcalendar": "^6.1.18",
|
||||||
"hugerte": "^1.0.9",
|
"hugerte": "^1.0.9",
|
||||||
"imask": "^7.6.1",
|
"imask": "^7.6.1",
|
||||||
"jsvectormap": "^1.6.0",
|
"jsvectormap": "^1.7.0",
|
||||||
"list.js": "^2.3.1",
|
"list.js": "^2.3.1",
|
||||||
"litepicker": "^2.0.12",
|
"litepicker": "^2.0.12",
|
||||||
"nouislider": "^15.8.1",
|
"nouislider": "^15.8.1",
|
||||||
"plyr": "^3.7.8",
|
"plyr": "^3.7.8",
|
||||||
"signature_pad": "^5.0.7",
|
"signature_pad": "^5.0.10",
|
||||||
"star-rating.js": "^4.3.1",
|
"star-rating.js": "^4.3.1",
|
||||||
"tom-select": "^2.4.3",
|
"tom-select": "^2.4.3",
|
||||||
"typed.js": "^2.1.0"
|
"typed.js": "^2.1.0"
|
||||||
|
|||||||
@@ -14,7 +14,6 @@
|
|||||||
@import "bootstrap/scss/nav";
|
@import "bootstrap/scss/nav";
|
||||||
@import "bootstrap/scss/navbar";
|
@import "bootstrap/scss/navbar";
|
||||||
@import "bootstrap/scss/card";
|
@import "bootstrap/scss/card";
|
||||||
@import "bootstrap/scss/breadcrumb";
|
|
||||||
@import "bootstrap/scss/pagination";
|
@import "bootstrap/scss/pagination";
|
||||||
@import "bootstrap/scss/progress";
|
@import "bootstrap/scss/progress";
|
||||||
@import "bootstrap/scss/list-group";
|
@import "bootstrap/scss/list-group";
|
||||||
|
|||||||
@@ -76,6 +76,7 @@
|
|||||||
@import "utils/opacity";
|
@import "utils/opacity";
|
||||||
@import "utils/shadow";
|
@import "utils/shadow";
|
||||||
@import "utils/text";
|
@import "utils/text";
|
||||||
|
@import "utils/hover";
|
||||||
|
|
||||||
@import "debug";
|
@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-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-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-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
|
//Icons
|
||||||
$icon-stroke-width: 1.5 !default;
|
$icon-stroke-width: 1.5 !default;
|
||||||
@@ -52,9 +52,9 @@ $line-height-700: 3rem !default;
|
|||||||
|
|
||||||
$font-size-base: 0.875rem !default;
|
$font-size-base: 0.875rem !default;
|
||||||
|
|
||||||
$spacing-wide: .04em !default;
|
$spacing-wide: 0.04em !default;
|
||||||
$spacing-normal: 0 !default;
|
$spacing-normal: 0 !default;
|
||||||
$spacing-tight: -.04em !default;
|
$spacing-tight: -0.04em !default;
|
||||||
|
|
||||||
$body-letter-spacing: 0 !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;
|
$headings-margin-bottom: var(--#{$prefix}spacer) !default;
|
||||||
|
|
||||||
$font-weights: (
|
$font-weights: (
|
||||||
'light': $font-weight-light,
|
"light": $font-weight-light,
|
||||||
'normal': $font-weight-normal,
|
"normal": $font-weight-normal,
|
||||||
'medium': $font-weight-medium,
|
"medium": $font-weight-medium,
|
||||||
'bold': $font-weight-bold,
|
"bold": $font-weight-bold,
|
||||||
'black': $font-weight-black,
|
"black": $font-weight-black,
|
||||||
'headings': $headings-font-weight,
|
"headings": $headings-font-weight,
|
||||||
) !default;
|
) !default;
|
||||||
|
|
||||||
$line-height-base: divide(1.25rem, $font-size-base) !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-font-size: 0.625rem !default;
|
||||||
$h6-line-height: 1rem !default;
|
$h6-line-height: 1rem !default;
|
||||||
|
|
||||||
$font-size-reative-xs: .71428571em !default;
|
$font-size-reative-xs: 0.71428571em !default;
|
||||||
$font-size-reative-sm: .85714285em !default;
|
$font-size-reative-sm: 0.85714285em !default;
|
||||||
$font-size-reative-md: 1em !default;
|
$font-size-reative-md: 1em !default;
|
||||||
|
|
||||||
$font-sizes: (
|
$font-sizes: (
|
||||||
@@ -210,7 +210,7 @@ $active-border-color: var(--#{$prefix}primary) !default;
|
|||||||
$hover-bg: rgba(var(--#{$prefix}secondary-rgb), 0.08) !default;
|
$hover-bg: rgba(var(--#{$prefix}secondary-rgb), 0.08) !default;
|
||||||
|
|
||||||
$disabled-bg: var(--#{$prefix}bg-surface-secondary) !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;
|
$primary: $blue !default;
|
||||||
$secondary: $text-secondary !default;
|
$secondary: $text-secondary !default;
|
||||||
@@ -341,7 +341,7 @@ $kbd-border-radius: var(--#{$prefix}border-radius) !default;
|
|||||||
|
|
||||||
// Avatars
|
// Avatars
|
||||||
$avatar-size: 2.5rem !default;
|
$avatar-size: 2.5rem !default;
|
||||||
$avatar-status-size: .75rem !default;
|
$avatar-status-size: 0.75rem !default;
|
||||||
$avatar-font-size: 1rem !default;
|
$avatar-font-size: 1rem !default;
|
||||||
$avatar-icon-size: 1.5rem !default;
|
$avatar-icon-size: 1.5rem !default;
|
||||||
$avatar-brand-size: 1.25rem !default;
|
$avatar-brand-size: 1.25rem !default;
|
||||||
@@ -349,52 +349,52 @@ $avatar-bg: var(--#{$prefix}bg-surface-secondary) !default;
|
|||||||
$avatar-sizes: (
|
$avatar-sizes: (
|
||||||
"xxs": (
|
"xxs": (
|
||||||
size: 1rem,
|
size: 1rem,
|
||||||
font-size: .5rem,
|
font-size: 0.5rem,
|
||||||
icon-size: .5rem,
|
icon-size: 0.5rem,
|
||||||
status-size: .25rem,
|
status-size: 0.25rem,
|
||||||
brand-size: .5rem
|
brand-size: 0.5rem,
|
||||||
),
|
),
|
||||||
"xs": (
|
"xs": (
|
||||||
size: 1.25rem,
|
size: 1.25rem,
|
||||||
font-size: $h6-font-size,
|
font-size: $h6-font-size,
|
||||||
icon-size: .75rem,
|
icon-size: 0.75rem,
|
||||||
status-size: .375rem,
|
status-size: 0.375rem,
|
||||||
brand-size: .75rem
|
brand-size: 0.75rem,
|
||||||
),
|
),
|
||||||
"sm": (
|
"sm": (
|
||||||
size: 2rem,
|
size: 2rem,
|
||||||
font-size: $h5-font-size,
|
font-size: $h5-font-size,
|
||||||
icon-size: 1.5rem,
|
icon-size: 1.5rem,
|
||||||
status-size: .5rem,
|
status-size: 0.5rem,
|
||||||
brand-size: 1rem
|
brand-size: 1rem,
|
||||||
),
|
),
|
||||||
"md": (
|
"md": (
|
||||||
size: 2.5rem,
|
size: 2.5rem,
|
||||||
font-size: $h4-font-size,
|
font-size: $h4-font-size,
|
||||||
icon-size: 1.5rem,
|
icon-size: 1.5rem,
|
||||||
status-size: .75rem,
|
status-size: 0.75rem,
|
||||||
brand-size: 1.25rem
|
brand-size: 1.25rem,
|
||||||
),
|
),
|
||||||
"lg": (
|
"lg": (
|
||||||
size: 3rem,
|
size: 3rem,
|
||||||
font-size: $h2-font-size,
|
font-size: $h2-font-size,
|
||||||
icon-size: 2rem,
|
icon-size: 2rem,
|
||||||
status-size: .75rem,
|
status-size: 0.75rem,
|
||||||
brand-size: 1.25rem
|
brand-size: 1.25rem,
|
||||||
),
|
),
|
||||||
"xl": (
|
"xl": (
|
||||||
size: 5rem,
|
size: 5rem,
|
||||||
font-size: 2rem,
|
font-size: 2rem,
|
||||||
icon-size: 3rem,
|
icon-size: 3rem,
|
||||||
status-size: 1rem,
|
status-size: 1rem,
|
||||||
brand-size: 1.25rem
|
brand-size: 1.25rem,
|
||||||
),
|
),
|
||||||
"2xl": (
|
"2xl": (
|
||||||
size: 7rem,
|
size: 7rem,
|
||||||
font-size: 3rem,
|
font-size: 3rem,
|
||||||
icon-size: 5rem,
|
icon-size: 5rem,
|
||||||
status-size: 1rem,
|
status-size: 1rem,
|
||||||
brand-size: 2rem
|
brand-size: 2rem,
|
||||||
),
|
),
|
||||||
) !default;
|
) !default;
|
||||||
$avatar-border-radius: var(--#{$prefix}border-radius) !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;
|
$badge-bg-color: var(--#{$prefix}bg-surface-secondary) !default;
|
||||||
|
|
||||||
// Buttons
|
// Buttons
|
||||||
$input-btn-line-height: $line-height-base !default;
|
$input-btn-border-width: var(--#{$prefix}border-width) !default;
|
||||||
$input-btn-font-size: $font-size-base !default;
|
$input-btn-font-family: var(--#{$prefix}body-font-family) !default;
|
||||||
$input-btn-font-family: var(--#{$prefix}body-font-face) !default;
|
$input-btn-focus-width: 0.25rem !default;
|
||||||
$input-btn-padding-y: 0.5rem - 0.0625rem !default;
|
|
||||||
$input-btn-icon-size: $icon-size !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-font-size-sm: $h5-font-size !default;
|
||||||
$input-btn-padding-x-sm: 0.25rem !default;
|
$input-btn-line-height-sm: divide(1rem, $input-btn-font-size-sm) !default;
|
||||||
$input-btn-padding-y-sm: 0.125rem - 0.0625rem !default;
|
|
||||||
$input-btn-line-height-sm: 1rem !default;
|
|
||||||
$input-btn-icon-size-sm: 1rem !default;
|
$input-btn-icon-size-sm: 1rem !default;
|
||||||
|
|
||||||
$input-btn-font-size-lg: $h2-font-size !default;
|
$input-btn-padding-y: 0.5625rem !default;
|
||||||
$input-btn-padding-x-lg: 1.5rem !default;
|
$input-btn-padding-x: 1rem !default;
|
||||||
$input-btn-padding-y-lg: 0.75rem - 0.0625rem !default;
|
$input-btn-line-height: 1.25rem !default;
|
||||||
$input-btn-line-height-lg: 2rem !default;
|
$input-btn-font-size: $font-size-base !default;
|
||||||
$input-btn-icon-size-lg: 2rem !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
|
// Inputs
|
||||||
$input-height: null !default;
|
$input-height: null !default;
|
||||||
$input-height-sm: null !default;
|
$input-height-sm: null !default;
|
||||||
$input-height-lg: null !default;
|
$input-height-lg: null !default;
|
||||||
$input-border-radius: var(--#{$prefix}border-radius) !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-color: var(--#{$prefix}body-color) !default;
|
||||||
$input-focus-color: var(--#{$prefix}body-color) !default;
|
$input-focus-color: var(--#{$prefix}body-color) !default;
|
||||||
$input-box-shadow: var(--#{$prefix}shadow-input) !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
|
// Buttons
|
||||||
$btn-border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
|
$btn-border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
|
||||||
$btn-border-radius-lg: var(--#{$prefix}border-radius-lg) !default;
|
$btn-border-radius-lg: var(--#{$prefix}border-radius-lg) !default;
|
||||||
|
|
||||||
$btn-disabled-opacity: .4 !default;
|
$btn-disabled-opacity: 0.4 !default;
|
||||||
$btn-padding-x: 1rem !default;
|
|
||||||
$btn-font-weight: var(--#{$prefix}font-weight-medium) !default;
|
$btn-font-weight: var(--#{$prefix}font-weight-medium) !default;
|
||||||
$btn-border-color: var(--#{$prefix}border-color) !default;
|
$btn-border-color: var(--#{$prefix}border-color) !default;
|
||||||
$btn-border-radius: var(--#{$prefix}border-radius) !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-overlap-height: 9rem !default;
|
||||||
|
|
||||||
$navbar-nav-link-padding-x: $nav-link-padding-x !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;
|
$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-header-bg: transparent !default;
|
||||||
$popover-border-color: var(--#{$prefix}border-color) !default;
|
$popover-border-color: var(--#{$prefix}border-color) !default;
|
||||||
$popover-body-color: inherit !default;
|
$popover-body-color: inherit !default;
|
||||||
$popover-body-padding-x: .5rem !default;
|
$popover-body-padding-x: 0.5rem !default;
|
||||||
$popover-body-padding-y: .5rem !default;
|
$popover-body-padding-y: 0.5rem !default;
|
||||||
$popover-box-shadow: var(--#{$prefix}shadow-lg) !default;
|
$popover-box-shadow: var(--#{$prefix}shadow-lg) !default;
|
||||||
|
|
||||||
// Footer
|
// Footer
|
||||||
|
|||||||
@@ -1,39 +1,50 @@
|
|||||||
@keyframes pulse {
|
@keyframes pulse {
|
||||||
from {
|
0% {
|
||||||
opacity: 1;
|
transform: scale(1);
|
||||||
transform: scale3d(.8, .8, .8)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
50% {
|
14% {
|
||||||
transform: scale3d(1, 1, 1);
|
transform: scale(1.25);
|
||||||
opacity: 1
|
|
||||||
}
|
}
|
||||||
|
|
||||||
to {
|
28% {
|
||||||
opacity: 1;
|
transform: scale(1);
|
||||||
transform: scale3d(.8, .8, .8)
|
}
|
||||||
|
|
||||||
|
42% {
|
||||||
|
transform: scale(1.25);
|
||||||
|
}
|
||||||
|
|
||||||
|
70% {
|
||||||
|
transform: scale(1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@keyframes tada {
|
@keyframes tada {
|
||||||
0% {
|
0% {
|
||||||
transform: scale3d(1, 1, 1)
|
transform: scale3d(1, 1, 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
10%, 5% {
|
10%,
|
||||||
transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -5deg)
|
5% {
|
||||||
|
transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -5deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
15%, 25%, 35%, 45% {
|
15%,
|
||||||
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 5deg)
|
25%,
|
||||||
|
35%,
|
||||||
|
45% {
|
||||||
|
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 5deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
20%, 30%, 40% {
|
20%,
|
||||||
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -5deg)
|
30%,
|
||||||
|
40% {
|
||||||
|
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -5deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
50% {
|
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 {
|
&.navbar-vertical {
|
||||||
box-shadow: inset calc(-1 * var(--#{$prefix}navbar-border-width)) 0 0 0 var(--#{$prefix}navbar-border-color);
|
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);
|
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,
|
~ .navbar,
|
||||||
~ .page-wrapper {
|
~ .page-wrapper {
|
||||||
margin-left: 0;
|
margin-left: 0;
|
||||||
@@ -219,13 +221,13 @@ Navbar toggler
|
|||||||
width: 1.25em;
|
width: 1.25em;
|
||||||
background: currentColor;
|
background: currentColor;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
|
position: relative;
|
||||||
@include transition(
|
@include transition(
|
||||||
top $navbar-toggler-animation-time $navbar-toggler-animation-time,
|
top $navbar-toggler-animation-time $navbar-toggler-animation-time,
|
||||||
bottom $navbar-toggler-animation-time $navbar-toggler-animation-time,
|
bottom $navbar-toggler-animation-time $navbar-toggler-animation-time,
|
||||||
transform $navbar-toggler-animation-time,
|
transform $navbar-toggler-animation-time,
|
||||||
opacity 0s $navbar-toggler-animation-time
|
opacity 0s $navbar-toggler-animation-time
|
||||||
);
|
);
|
||||||
position: relative;
|
|
||||||
|
|
||||||
&:before,
|
&:before,
|
||||||
&:after {
|
&:after {
|
||||||
@@ -318,11 +320,12 @@ Navbar vertical
|
|||||||
bottom: 0;
|
bottom: 0;
|
||||||
z-index: $zindex-fixed;
|
z-index: $zindex-fixed;
|
||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
@include transition(transform $transition-time);
|
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
@include transition(transform $transition-time);
|
||||||
|
|
||||||
&.navbar-right {
|
&.navbar-right,
|
||||||
|
&.navbar-end {
|
||||||
left: auto;
|
left: auto;
|
||||||
right: 0;
|
right: 0;
|
||||||
}
|
}
|
||||||
@@ -364,7 +367,8 @@ Navbar vertical
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.navbar-right ~ .page {
|
&.navbar-right ~ .page,
|
||||||
|
&.navbar-end ~ .page {
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
padding-right: $sidebar-width;
|
padding-right: $sidebar-width;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,7 +1,23 @@
|
|||||||
.breadcrumb {
|
.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-active-font-weight: #{$breadcrumb-active-font-weight};
|
||||||
--#{$prefix}breadcrumb-item-disabled-color: #{$breadcrumb-disabled-color};
|
--#{$prefix}breadcrumb-item-disabled-color: #{$breadcrumb-disabled-color};
|
||||||
--#{$prefix}breadcrumb-link-color: #{$breadcrumb-link-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;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
@@ -21,6 +37,7 @@
|
|||||||
|
|
||||||
.breadcrumb-item {
|
.breadcrumb-item {
|
||||||
&.active {
|
&.active {
|
||||||
|
color: var(--#{$prefix}breadcrumb-item-active-color);
|
||||||
font-weight: var(--#{$prefix}breadcrumb-item-active-font-weight);
|
font-weight: var(--#{$prefix}breadcrumb-item-active-font-weight);
|
||||||
|
|
||||||
a {
|
a {
|
||||||
@@ -41,6 +58,20 @@
|
|||||||
pointer-events: none;
|
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 {
|
@each $name, $symbol in $breadcrumb-variants {
|
||||||
|
|||||||
@@ -5,12 +5,12 @@
|
|||||||
//
|
//
|
||||||
.btn {
|
.btn {
|
||||||
--#{$prefix}btn-icon-size: #{$input-btn-icon-size};
|
--#{$prefix}btn-icon-size: #{$input-btn-icon-size};
|
||||||
|
--#{$prefix}btn-icon-color: inherit;
|
||||||
--#{$prefix}btn-bg: var(--#{$prefix}bg-surface);
|
--#{$prefix}btn-bg: var(--#{$prefix}bg-surface);
|
||||||
--#{$prefix}btn-color: var(--#{$prefix}body-color);
|
--#{$prefix}btn-color: var(--#{$prefix}body-color);
|
||||||
--#{$prefix}btn-border-color: #{$btn-border-color};
|
--#{$prefix}btn-border-color: #{$btn-border-color};
|
||||||
--#{$prefix}btn-hover-bg: var(--#{$prefix}btn-bg);
|
--#{$prefix}btn-hover-bg: var(--#{$prefix}btn-bg);
|
||||||
--#{$prefix}btn-hover-border-color: var(--#{$prefix}border-active-color);
|
--#{$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-color: #{$active-color};
|
||||||
--#{$prefix}btn-active-bg: #{$active-bg};
|
--#{$prefix}btn-active-bg: #{$active-bg};
|
||||||
--#{$prefix}btn-active-border-color: #{$active-border-color};
|
--#{$prefix}btn-active-border-color: #{$active-border-color};
|
||||||
@@ -21,6 +21,9 @@
|
|||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
box-shadow: var(--#{$prefix}btn-box-shadow);
|
box-shadow: var(--#{$prefix}btn-box-shadow);
|
||||||
position: relative;
|
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 {
|
.icon {
|
||||||
width: var(--#{$prefix}btn-icon-size);
|
width: var(--#{$prefix}btn-icon-size);
|
||||||
@@ -29,7 +32,7 @@
|
|||||||
font-size: var(--#{$prefix}btn-icon-size);
|
font-size: var(--#{$prefix}btn-icon-size);
|
||||||
margin: 0 calc(var(--#{$prefix}btn-padding-x) / 2) 0 calc(var(--#{$prefix}btn-padding-x) / -4);
|
margin: 0 calc(var(--#{$prefix}btn-padding-x) / 2) 0 calc(var(--#{$prefix}btn-padding-x) / -4);
|
||||||
vertical-align: bottom;
|
vertical-align: bottom;
|
||||||
color: inherit;
|
color: var(--#{$prefix}btn-icon-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.avatar {
|
.avatar {
|
||||||
@@ -38,7 +41,8 @@
|
|||||||
margin: 0 calc(var(--#{$prefix}btn-padding-x) / 2) 0 calc(var(--#{$prefix}btn-padding-x) / -4);
|
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);
|
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) {
|
@each $color, $value in map-merge($theme-colors, $social-colors) {
|
||||||
.btn-#{$color} {
|
.btn-#{$color} {
|
||||||
@if $color == 'dark' {
|
@if $color == "dark" {
|
||||||
--#{$prefix}btn-border-color: var(--#{$prefix}dark-mode-border-color);
|
--#{$prefix}btn-border-color: var(--#{$prefix}dark-mode-border-color);
|
||||||
--#{$prefix}btn-hover-border-color: var(--#{$prefix}dark-mode-border-active-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);
|
--#{$prefix}btn-active-border-color: var(--#{$prefix}dark-mode-border-active-color);
|
||||||
@@ -95,7 +99,8 @@
|
|||||||
--#{$prefix}btn-box-shadow: var(--#{$prefix}shadow-input);
|
--#{$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-color: var(--#{$prefix}#{$color});
|
||||||
--#{$prefix}btn-bg: transparent;
|
--#{$prefix}btn-bg: transparent;
|
||||||
--#{$prefix}btn-border-color: var(--#{$prefix}#{$color});
|
--#{$prefix}btn-border-color: var(--#{$prefix}#{$color});
|
||||||
@@ -104,11 +109,13 @@
|
|||||||
--#{$prefix}btn-hover-bg: var(--#{$prefix}#{$color});
|
--#{$prefix}btn-hover-bg: var(--#{$prefix}#{$color});
|
||||||
--#{$prefix}btn-active-color: var(--#{$prefix}#{$color}-fg);
|
--#{$prefix}btn-active-color: var(--#{$prefix}#{$color}-fg);
|
||||||
--#{$prefix}btn-active-bg: var(--#{$prefix}#{$color});
|
--#{$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-color: var(--#{$prefix}#{$color});
|
||||||
--#{$prefix}btn-disabled-border-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-color: var(--#{$prefix}#{$color});
|
||||||
--#{$prefix}btn-bg: transparent;
|
--#{$prefix}btn-bg: transparent;
|
||||||
--#{$prefix}btn-border-color: transparent;
|
--#{$prefix}btn-border-color: transparent;
|
||||||
@@ -130,16 +137,27 @@
|
|||||||
//
|
//
|
||||||
// Button sizes
|
// 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-line-height: #{$input-btn-line-height-sm};
|
||||||
--#{$prefix}btn-icon-size: #{$input-btn-icon-size-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-line-height: #{$input-btn-line-height-lg};
|
||||||
--#{$prefix}btn-icon-size: #{$input-btn-icon-size-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
|
// Button shapes
|
||||||
//
|
//
|
||||||
@@ -160,9 +178,8 @@
|
|||||||
//
|
//
|
||||||
// Icon button
|
// Icon button
|
||||||
//
|
//
|
||||||
.btn-icon {
|
.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));
|
.btn-action {
|
||||||
min-height: calc((var(--#{$prefix}btn-line-height) * var(--#{$prefix}btn-font-size)) + (var(--#{$prefix}btn-padding-y) * 2) + (var(--#{$prefix}btn-border-width) * 2));
|
|
||||||
padding-left: 0;
|
padding-left: 0;
|
||||||
padding-right: 0;
|
padding-right: 0;
|
||||||
|
|
||||||
@@ -215,7 +232,7 @@
|
|||||||
height: var(--#{$prefix}btn-icon-size);
|
height: var(--#{$prefix}btn-icon-size);
|
||||||
left: calc(50% - var(--#{$prefix}btn-icon-size) / 2);
|
left: calc(50% - var(--#{$prefix}btn-icon-size) / 2);
|
||||||
top: calc(50% - var(--#{$prefix}btn-icon-size) / 2);
|
top: calc(50% - var(--#{$prefix}btn-icon-size) / 2);
|
||||||
animation: spinner-border .75s linear infinite;
|
animation: spinner-border 0.75s linear infinite;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -224,14 +241,7 @@
|
|||||||
//
|
//
|
||||||
.btn-action {
|
.btn-action {
|
||||||
--#{$prefix}border-color: transparent;
|
--#{$prefix}border-color: transparent;
|
||||||
padding: 0;
|
|
||||||
border: 0;
|
|
||||||
color: var(--#{$prefix}secondary);
|
color: var(--#{$prefix}secondary);
|
||||||
display: inline-flex;
|
|
||||||
width: 2rem;
|
|
||||||
height: 2rem;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
border-radius: var(--#{$prefix}border-radius);
|
border-radius: var(--#{$prefix}border-radius);
|
||||||
background: transparent;
|
background: transparent;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
@@ -249,6 +259,7 @@
|
|||||||
&.show {
|
&.show {
|
||||||
color: var(--#{$prefix}body-color);
|
color: var(--#{$prefix}body-color);
|
||||||
background: var(--#{$prefix}active-bg);
|
background: var(--#{$prefix}active-bg);
|
||||||
|
border-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
&.show {
|
&.show {
|
||||||
@@ -259,3 +270,64 @@
|
|||||||
.btn-actions {
|
.btn-actions {
|
||||||
display: flex;
|
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;
|
justify-content: center;
|
||||||
padding: $card-spacer-y $card-spacer-x;
|
padding: $card-spacer-y $card-spacer-x;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@include transition(background $transition-time);
|
|
||||||
border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
|
border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
|
||||||
flex: 1;
|
flex: 1;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
font-weight: var(--#{$prefix}font-weight-medium);
|
font-weight: var(--#{$prefix}font-weight-medium);
|
||||||
|
@include transition(background $transition-time);
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
@@ -215,11 +215,13 @@ Stacked card
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Card rotate
|
// Card rotate
|
||||||
.card-rotate-left {
|
.card-rotate-left,
|
||||||
|
.card-rotate-start {
|
||||||
transform: rotate(-1.5deg);
|
transform: rotate(-1.5deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-rotate-right {
|
.card-rotate-right,
|
||||||
|
.card-rotate-end {
|
||||||
transform: rotate(1.5deg);
|
transform: rotate(1.5deg);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -96,7 +96,7 @@
|
|||||||
|
|
||||||
.dropend {
|
.dropend {
|
||||||
> .dropdown-menu {
|
> .dropdown-menu {
|
||||||
margin-top: subtract(-$dropdown-padding-y, 1px);
|
margin-top: subtract(calc(-1 * $dropdown-padding-y), 1px);
|
||||||
margin-left: -.25rem;
|
margin-left: -.25rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -17,8 +17,8 @@
|
|||||||
|
|
||||||
@each $name, $value in (0: 0, sm: .375rem, md: 1.5rem, lg: 3rem) {
|
@each $name, $value in (0: 0, sm: .375rem, md: 1.5rem, lg: 3rem) {
|
||||||
.row-#{$name} {
|
.row-#{$name} {
|
||||||
margin-right: (-$value);
|
margin-right: calc(-1 * $value);
|
||||||
margin-left: -($value);
|
margin-left: calc(-1 * $value);
|
||||||
|
|
||||||
> .col,
|
> .col,
|
||||||
> [class*="col-"] {
|
> [class*="col-"] {
|
||||||
|
|||||||
@@ -30,14 +30,6 @@
|
|||||||
border-left-width: $border-width-wide;
|
border-left-width: $border-width-wide;
|
||||||
}
|
}
|
||||||
|
|
||||||
.list-group-item {
|
|
||||||
&:active,
|
|
||||||
&:focus,
|
|
||||||
&:hover {
|
|
||||||
background-color: $dropdown-link-hover-bg;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.list-group-item {
|
.list-group-item {
|
||||||
&.disabled,
|
&.disabled,
|
||||||
&:disabled {
|
&:disabled {
|
||||||
@@ -58,6 +50,14 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.list-group-hoverable {
|
.list-group-hoverable {
|
||||||
|
.list-group-item {
|
||||||
|
&:active,
|
||||||
|
&:focus,
|
||||||
|
&:hover {
|
||||||
|
background-color: $dropdown-link-hover-bg;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.list-group-item-actions {
|
.list-group-item-actions {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
@include transition(opacity $transition-time);
|
@include transition(opacity $transition-time);
|
||||||
|
|||||||
@@ -22,7 +22,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
&.nav-pills {
|
&.nav-pills {
|
||||||
margin: 0 (-$nav-link-padding-x);
|
margin: 0 calc(-1 * $nav-link-padding-x);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -65,8 +65,8 @@
|
|||||||
|
|
||||||
.nav-link {
|
.nav-link {
|
||||||
display: flex;
|
display: flex;
|
||||||
@include transition(color $transition-time, background-color $transition-time);
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
@include transition(color $transition-time, background-color $transition-time);
|
||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
&:focus {
|
&:focus {
|
||||||
|
|||||||
@@ -9,10 +9,10 @@
|
|||||||
.page-link {
|
.page-link {
|
||||||
min-width: 2rem;
|
min-width: 2rem;
|
||||||
border-radius: var(--#{$prefix}pagination-border-radius);
|
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 {
|
.page-text {
|
||||||
|
|||||||
@@ -7,7 +7,3 @@
|
|||||||
margin-left: .25rem;
|
margin-left: .25rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.star {
|
|
||||||
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -122,7 +122,9 @@
|
|||||||
// Slide variant
|
// Slide variant
|
||||||
.switch-icon-slide-up,
|
.switch-icon-slide-up,
|
||||||
.switch-icon-slide-left,
|
.switch-icon-slide-left,
|
||||||
|
.switch-icon-slide-start,
|
||||||
.switch-icon-slide-right,
|
.switch-icon-slide-right,
|
||||||
|
.switch-icon-slide-end,
|
||||||
.switch-icon-slide-down {
|
.switch-icon-slide-down {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
@@ -150,7 +152,8 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.switch-icon-slide-left {
|
.switch-icon-slide-left,
|
||||||
|
.switch-icon-slide-start {
|
||||||
.switch-icon-a {
|
.switch-icon-a {
|
||||||
transform: translateX(0);
|
transform: translateX(0);
|
||||||
}
|
}
|
||||||
@@ -170,7 +173,8 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.switch-icon-slide-right {
|
.switch-icon-slide-right,
|
||||||
|
.switch-icon-slide-end {
|
||||||
.switch-icon-a {
|
.switch-icon-a {
|
||||||
transform: translateX(0);
|
transform: translateX(0);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -112,10 +112,9 @@ Table sort
|
|||||||
display: block;
|
display: block;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-align: inherit;
|
text-align: inherit;
|
||||||
@include transition(color $transition-time);
|
margin: calc(-1 * $table-th-padding-y) calc(-1 * $table-th-padding-x);
|
||||||
|
|
||||||
margin: (-$table-th-padding-y) (-$table-th-padding-x);
|
|
||||||
padding: $table-th-padding-y $table-th-padding-x;
|
padding: $table-th-padding-y $table-th-padding-x;
|
||||||
|
@include transition(color $transition-time);
|
||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
&.asc,
|
&.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 & {
|
.noUi-horizontal & {
|
||||||
width: $form-range-thumb-width;
|
width: $form-range-thumb-width;
|
||||||
height: $form-range-thumb-height;
|
height: $form-range-thumb-height;
|
||||||
top: (-$form-range-thumb-height * .5);
|
top: calc($form-range-thumb-height * -.5);
|
||||||
right: (-$form-range-thumb-height * .5);
|
right: calc($form-range-thumb-height * -.5);
|
||||||
margin: 1px 1px 0 0;
|
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
|
## 1.3.0
|
||||||
|
|
||||||
@@ -24,59 +44,3 @@
|
|||||||
- 5fa662b: Use color-input examples in documentation
|
- 5fa662b: Use color-input examples in documentation
|
||||||
- 5619b2d: Fix `src` links to images in README and getting-started docs page
|
- 5619b2d: Fix `src` links to images in README and getting-started docs page
|
||||||
- f8075f6: Add documentation for 3rd-party libraries and resources
|
- 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.
|
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 -%}
|
{% capture html -%}
|
||||||
{% include "ui/badge.html" text="Star" icon-right="arrow-right" -%}
|
{% include "ui/badge.html" text="Star" icon-end="arrow-right" -%}
|
||||||
{% include "ui/badge.html" text="Heart" icon-right="arrow-right" -%}
|
{% include "ui/badge.html" text="Heart" icon-end="arrow-right" -%}
|
||||||
{% include "ui/badge.html" text="Check" icon-right="arrow-right" -%}
|
{% include "ui/badge.html" text="Check" icon-end="arrow-right" -%}
|
||||||
{% include "ui/badge.html" text="X" icon-right="arrow-right" -%}
|
{% include "ui/badge.html" text="X" icon-end="arrow-right" -%}
|
||||||
{% include "ui/badge.html" text="Plus" icon-right="arrow-right" -%}
|
{% include "ui/badge.html" text="Plus" icon-end="arrow-right" -%}
|
||||||
{% include "ui/badge.html" text="Minus" icon-right="arrow-right" -%}
|
{% include "ui/badge.html" text="Minus" icon-end="arrow-right" -%}
|
||||||
{%- endcapture %}
|
{%- endcapture %}
|
||||||
{% include "docs/example.html" html=html centered %}
|
{% 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 -%}
|
{%- endcapture -%}
|
||||||
{%- include "docs/example.html" html=html centered %}
|
{%- 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
|
## 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.
|
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 -%}
|
{%- endcapture -%}
|
||||||
{%- include "docs/example.html" html=html %}
|
{%- 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
|
## 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.
|
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>
|
</a>
|
||||||
{%- endcapture -%}
|
{%- endcapture -%}
|
||||||
{%- include "docs/example.html" html=html centered %}
|
{%- 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>
|
</svg>
|
||||||
</span>
|
</span>
|
||||||
</button>
|
</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">
|
<span class="switch-icon-a text-secondary">
|
||||||
<svg
|
<svg
|
||||||
xmlns="http://www.w3.org/2000/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" %}
|
{% 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
|
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.
|
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.
|
||||||
- [apexcharts](https://apexcharts.com/)
|
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.
|
||||||
- [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)
|
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@tabler/docs",
|
"name": "@tabler/docs",
|
||||||
"version": "1.3.0",
|
"version": "1.4.0",
|
||||||
"description": "",
|
"description": "",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
@@ -25,11 +25,11 @@
|
|||||||
"author": "",
|
"author": "",
|
||||||
"license": "ISC",
|
"license": "ISC",
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@11ty/eleventy": "^3.1.0",
|
"@11ty/eleventy": "^3.1.2",
|
||||||
"@docsearch/css": "^3.9.0",
|
"@docsearch/css": "^3.9.0",
|
||||||
"@docsearch/js": "^3.9.0",
|
"@docsearch/js": "^3.9.0",
|
||||||
"flat-cache": "^6.1.8",
|
"flat-cache": "^6.1.12",
|
||||||
"shiki": "^3.2.2"
|
"shiki": "^3.8.1"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@tabler/core": "workspace:*"
|
"@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 {
|
:root {
|
||||||
--docsearch-primary-color: var(--tblr-primary);
|
--docsearch-primary-color: var(--tblr-primary);
|
||||||
--docsearch-searchbox-background: var(--tblr-bg-surface);
|
--docsearch-searchbox-background: var(--tblr-bg-surface);
|
||||||
|
--docsearch-searchbox-focus-background: var(--tblr-bg-surface);
|
||||||
--docsearch-text-color: var(--tblr-body-text);
|
--docsearch-text-color: var(--tblr-body-text);
|
||||||
--docsearch-key-shadow: 0 0 0 1px var(--tblr-border-color);
|
--docsearch-key-shadow: 0 0 0 1px var(--tblr-border-color);
|
||||||
--docsearch-key-gradient: var(--tblr-bg-surface-secondary);
|
--docsearch-key-gradient: var(--tblr-bg-surface-secondary);
|
||||||
@@ -25,6 +26,80 @@
|
|||||||
transition: all 0.2s ease-in-out;
|
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 {
|
.DocSearch-Button-Key {
|
||||||
top: 0;
|
top: 0;
|
||||||
}
|
}
|
||||||
|
|||||||
32
package.json
32
package.json
@@ -14,37 +14,39 @@
|
|||||||
"zip-package": "node .build/zip-package.mjs",
|
"zip-package": "node .build/zip-package.mjs",
|
||||||
"start": "pnpm dev"
|
"start": "pnpm dev"
|
||||||
},
|
},
|
||||||
"packageManager": "pnpm@10.11.0",
|
"packageManager": "pnpm@10.13.1",
|
||||||
|
"dependencies": {
|
||||||
|
"shx": "^0.4.0"
|
||||||
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@argos-ci/playwright": "^5.0.3",
|
"@argos-ci/playwright": "^5.0.8",
|
||||||
"@changesets/changelog-github": "^0.5.1",
|
"@changesets/changelog-github": "^0.5.1",
|
||||||
"@changesets/cli": "^2.29.4",
|
"@changesets/cli": "^2.29.5",
|
||||||
"@playwright/test": "^1.52.0",
|
"@playwright/test": "^1.54.1",
|
||||||
"@rollup/plugin-babel": "^6.0.4",
|
"@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-node-resolve": "^16.0.1",
|
||||||
"@rollup/plugin-replace": "^6.0.2",
|
"@rollup/plugin-replace": "^6.0.2",
|
||||||
"adm-zip": "^0.5.16",
|
"adm-zip": "^0.5.16",
|
||||||
"autoprefixer": "^10.4.21",
|
"autoprefixer": "^10.4.21",
|
||||||
"bundlewatch": "^0.4.1",
|
"bundlewatch": "^0.4.1",
|
||||||
"clean-css-cli": "^5.6.3",
|
"clean-css-cli": "^5.6.3",
|
||||||
"concurrently": "^9.1.2",
|
"concurrently": "^9.2.0",
|
||||||
"cross-env": "^7.0.3",
|
"cross-env": "^7.0.3",
|
||||||
"fs-extra": "^11.3.0",
|
"fs-extra": "^11.3.0",
|
||||||
"glob": "^11.0.2",
|
"glob": "^11.0.3",
|
||||||
"js-beautify": "^1.15.4",
|
"js-beautify": "^1.15.4",
|
||||||
"nodemon": "^3.1.10",
|
"nodemon": "^3.1.10",
|
||||||
"pnpm": "10.6.5",
|
"pnpm": "^10.6.5",
|
||||||
"postcss": "^8.5.3",
|
"postcss": "^8.5.6",
|
||||||
"postcss-cli": "^11.0.1",
|
"postcss-cli": "^11.0.1",
|
||||||
"prettier": "^3.5.3",
|
"prettier": "^3.6.2",
|
||||||
"rollup": "4.40.2",
|
"rollup": "4.45.1",
|
||||||
"rollup-plugin-dotenv": "^0.5.1",
|
"rollup-plugin-dotenv": "^0.5.1",
|
||||||
"rtlcss": "^4.3.0",
|
"rtlcss": "^4.3.0",
|
||||||
"sass": "1.71.0",
|
"sass": "1.89.2",
|
||||||
"shelljs": "^0.10.0",
|
"shelljs": "^0.10.0",
|
||||||
"shx": "^0.4.0",
|
"terser": "^5.43.1",
|
||||||
"terser": "^5.39.2",
|
"turbo": "^2.5.5"
|
||||||
"turbo": "^2.5.3"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
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
|
# @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
|
## 1.3.0
|
||||||
|
|
||||||
### Patch Changes
|
### Patch Changes
|
||||||
|
|
||||||
- 8850f61: Enhance pagination component with new styles
|
- 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({
|
eleventyConfig.addPassthroughCopy({
|
||||||
"node_modules/@tabler/core/dist": "dist",
|
"node_modules/@tabler/core/dist": "dist",
|
||||||
"pages/favicon.ico": "favicon.ico",
|
"pages/favicon.ico": "favicon.ico",
|
||||||
|
"pages/favicon-dev.ico": "favicon-dev.ico",
|
||||||
"static": "static",
|
"static": "static",
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "@tabler/preview",
|
"name": "@tabler/preview",
|
||||||
"version": "1.3.0",
|
"version": "1.4.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"build": "pnpm run clean && pnpm run css && pnpm run js && pnpm run html",
|
"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/*"
|
"zip": "mkdir -p packages-zip && zip -r packages-zip/tabler-$(node -p \"require('./package.json').version\").zip demo/*"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@11ty/eleventy": "^3.1.0",
|
"@11ty/eleventy": "^3.1.2",
|
||||||
"imageoptim-cli": "^3.1.9",
|
"imageoptim-cli": "^3.1.9",
|
||||||
"request": "^2.88.2"
|
"request": "^2.88.2"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@tabler/core": "workspace:*",
|
"@tabler/core": "workspace:*",
|
||||||
"@tabler/icons": "^3.31.0"
|
"@tabler/icons": "^3.34.1"
|
||||||
},
|
},
|
||||||
"prettier": {
|
"prettier": {
|
||||||
"tabWidth": 2,
|
"tabWidth": 2,
|
||||||
|
|||||||
@@ -6,7 +6,7 @@ layout: default
|
|||||||
permalink: activity.html
|
permalink: activity.html
|
||||||
---
|
---
|
||||||
|
|
||||||
<div class="row justify-content-center">
|
<div class="row">
|
||||||
<div class="col-8">
|
<div class="col-8">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
|
|||||||
@@ -7,91 +7,177 @@ permalink: buttons.html
|
|||||||
---
|
---
|
||||||
|
|
||||||
<div class="row row-cards">
|
<div class="row row-cards">
|
||||||
<div class="col-12">
|
<div class="col-md-6">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-header">
|
<div class="card-header">
|
||||||
<h3 class="card-title">Standard Buttons</h3>
|
<h3 class="card-title">Standard Buttons</h3>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-body">
|
<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>
|
</div>
|
||||||
<div class="col-12">
|
</div>
|
||||||
|
<div class="col-md-6">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-header">
|
<div class="card-header">
|
||||||
<h3 class="card-title">Outline Buttons</h3>
|
<h3 class="card-title">Outline Buttons</h3>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<p>Use <code>.btn-outline-*</code> class for outline buttons.
|
<div class="btn-list">
|
||||||
</p>
|
{% for color in site.themeColors %}
|
||||||
{% include "parts/buttons-table.html" prefix="btn-outline-" show-states=true %}
|
<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>
|
</div>
|
||||||
<div class="col-12">
|
</div>
|
||||||
|
<div class="col-md-6">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-header">
|
<div class="card-header">
|
||||||
<h3 class="card-title">Ghost Buttons</h3>
|
<h3 class="card-title">Ghost Buttons</h3>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<p>Use <code>.btn-ghost-*</code> class for ghost buttons.
|
<div class="btn-list">
|
||||||
</p>
|
{% for color in site.themeColors %}
|
||||||
{% include "parts/buttons-table.html" prefix="btn-ghost-" show-states=true %}
|
<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>
|
</div>
|
||||||
<div class="col-12">
|
</div>
|
||||||
|
<div class="col-md-6">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-header">
|
<div class="card-header">
|
||||||
<h3 class="card-title">Square Buttons</h3>
|
<h3 class="card-title">Square Buttons</h3>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<p>Use <code>.btn-square</code> class for square buttons.
|
<div class="btn-list">
|
||||||
</p>
|
{% for color in site.themeColors %}
|
||||||
{% include "parts/buttons-table.html" class="btn-square" show-states=true %}
|
<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>
|
</div>
|
||||||
<div class="col-12">
|
</div>
|
||||||
|
<div class="col-md-6">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-header">
|
<div class="card-header">
|
||||||
<h3 class="card-title">Pill Buttons</h3>
|
<h3 class="card-title">Pill Buttons</h3>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<p>Use <code>.btn-pill</code> class for pill buttons.
|
<div class="btn-list">
|
||||||
</p>
|
{% for color in site.themeColors %}
|
||||||
{% include "parts/buttons-table.html" class="btn-pill" show-states=true %}
|
<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>
|
</div>
|
||||||
<div class="col-12">
|
</div>
|
||||||
|
<div class="col-md-6">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-header">
|
<div class="card-header">
|
||||||
<h3 class="card-title">Extra colors</h3>
|
<h3 class="card-title">Extra colors</h3>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-body">
|
<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>
|
</div>
|
||||||
<div class="col-12">
|
</div>
|
||||||
|
<div class="col-md-6">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-header">
|
<div class="card-header">
|
||||||
<h3 class="card-title">Icon buttons</h3>
|
<h3 class="card-title">Icon buttons</h3>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-body">
|
<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>
|
</div>
|
||||||
<div class="col-12">
|
</div>
|
||||||
|
<div class="col-md-6">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-header">
|
<div class="card-header">
|
||||||
<h3 class="card-title">Social colors</h3>
|
<h3 class="card-title">Social colors</h3>
|
||||||
</div>
|
</div>
|
||||||
<div class="card-body">
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -62,13 +62,13 @@ permalink: cards.html
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-md-6 col-lg-3">
|
<div class="col-md-6 col-lg-3">
|
||||||
<div class="card card-rotate-right">
|
<div class="card card-rotate-end">
|
||||||
<div class="card-body">Card rotate right</div>
|
<div class="card-body">Card rotate end</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-6 col-lg-3">
|
<div class="col-md-6 col-lg-3">
|
||||||
<div class="card card-rotate-left">
|
<div class="card card-rotate-start">
|
||||||
<div class="card-body">Card rotate left</div>
|
<div class="card-body">Card rotate start</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-6 col-lg-3">
|
<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" %}
|
{% include "cards/card.html" status-bottom="success" title="Card with bottom status" %}
|
||||||
</div>
|
</div>
|
||||||
<div class="col-md-6 col-lg-3">
|
<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>
|
||||||
|
|
||||||
<div class="col-md-6 col-lg-3">
|
<div class="col-md-6 col-lg-3">
|
||||||
|
|||||||
@@ -57,7 +57,7 @@ permalink: emails.html
|
|||||||
<div class="row g-0">
|
<div class="row g-0">
|
||||||
<div class="col-6">
|
<div class="col-6">
|
||||||
<div class="p-6 bg-surface-secondary rounded-start">
|
<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>
|
</div>
|
||||||
<div class="col-6">
|
<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>
|
||||||
|
|
||||||
<div class="col-md-6">
|
<div class="col-md-6">
|
||||||
<div class="card">
|
<div class="card h-100">
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<h3 class="card-title">Project ID</h3>
|
<h3 class="card-title">Project ID</h3>
|
||||||
<p class="card-subtitle">Used when interacting with the API.</p>
|
<p class="card-subtitle">Used when interacting with the API.</p>
|
||||||
@@ -80,13 +80,13 @@ permalink: form-elements.html
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-md-6">
|
<div class="col-12 col-lg-4">
|
||||||
{% include "cards/form/layout.html" %}
|
{% include "cards/form/layout.html" %}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-lg-4">
|
<div class="col-lg-8">
|
||||||
<div class="row row-cards">
|
<div class="row row-cards">
|
||||||
<div class="col-12">
|
<div class="col-12 col-lg-6">
|
||||||
<div class="card">
|
<div class="card">
|
||||||
<div class="card-header">
|
<div class="card-header">
|
||||||
<h3 class="card-title">Input mask</h3>
|
<h3 class="card-title">Input mask</h3>
|
||||||
@@ -127,8 +127,8 @@ permalink: form-elements.html
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-12">
|
<div class="col-12 col-lg-6">
|
||||||
<form class="card">
|
<form class="card h-100">
|
||||||
<div class="card-header">
|
<div class="card-header">
|
||||||
<h3 class="card-title">My Profile</h3>
|
<h3 class="card-title">My Profile</h3>
|
||||||
</div>
|
</div>
|
||||||
@@ -168,9 +168,9 @@ permalink: form-elements.html
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="col-lg-8">
|
<div class="col-lg-12">
|
||||||
<div class="row row-cards">
|
<div class="row row-cards">
|
||||||
<div class="col-12">
|
<div class="col-12 col-lg-6">
|
||||||
<form class="card">
|
<form class="card">
|
||||||
<div class="card-body">
|
<div class="card-body">
|
||||||
<h3 class="card-title">Edit Profile</h3>
|
<h3 class="card-title">Edit Profile</h3>
|
||||||
@@ -250,8 +250,8 @@ But that's the difference in our opinions.</textarea>
|
|||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-12">
|
<div class="col-12 col-lg-6">
|
||||||
<div class="card">
|
<div class="card h-100">
|
||||||
<div class="card-header">
|
<div class="card-header">
|
||||||
<h3 class="card-title">HTTP Request</h3>
|
<h3 class="card-title">HTTP Request</h3>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -103,7 +103,7 @@ page-libs: [litepicker]
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<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>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
@@ -148,7 +148,7 @@ page-libs: [litepicker]
|
|||||||
{% include "ui/form/check.html" title="Remember me" class="m-0" %}
|
{% include "ui/form/check.html" title="Remember me" class="m-0" %}
|
||||||
</div>
|
</div>
|
||||||
<div class="col-auto">
|
<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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,8 +1,8 @@
|
|||||||
---
|
---
|
||||||
page-header: Right vertical layout
|
page-header: Right vertical layout
|
||||||
page-menu: layout.vertical-right
|
page-menu: layout.vertical-end
|
||||||
layout-sidebar: true
|
layout-sidebar: true
|
||||||
layout-sidebar-right: true
|
layout-sidebar-end: true
|
||||||
layout-hide-topbar: true
|
layout-hide-topbar: true
|
||||||
layout: homepage
|
layout: homepage
|
||||||
permalink: layout-vertical-right.html
|
permalink: layout-vertical-right.html
|
||||||
|
|||||||
@@ -13,12 +13,6 @@ signaturePad.fromDataURL("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3
|
|||||||
|
|
||||||
|
|
||||||
{% capture advanced-js %}
|
{% 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) {
|
function download(dataURL, filename) {
|
||||||
const blob = dataURLToBlob(dataURL);
|
const blob = dataURLToBlob(dataURL);
|
||||||
@@ -49,9 +43,8 @@ function dataURLToBlob(dataURL) {
|
|||||||
return new Blob([uInt8Array], { type: contentType });
|
return new Blob([uInt8Array], { type: contentType });
|
||||||
}
|
}
|
||||||
|
|
||||||
|
document.querySelector("#signature-advanced-color").addEventListener("input", function (e) {
|
||||||
document.querySelector("#signature-advanced-color").addEventListener("click", function () {
|
signaturePad.penColor = e.target.value;
|
||||||
signaturePad.penColor = randomColor();
|
|
||||||
});
|
});
|
||||||
|
|
||||||
document.querySelector("#signature-advanced-svg").addEventListener("click", function () {
|
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="mt-4">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col">
|
<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>
|
||||||
<div class="col">
|
<div class="col">
|
||||||
<button href="" class="btn w-100" id="signature-advanced-svg">Download SVG</button>
|
<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": "sha384-An/wz3SdsHjVEyb1y+Q7MwPz3YdJoVxmt+/CB0OdqSGBDnOWO+UL/hvgkrtlj4jo",
|
||||||
"css-rtl": "sha384-22IGd0xp1gk5BQwuhYqr8qUmsv65cwTzenvc19bvq5PYduXkWE8gUUruxIr/ZPsn",
|
"css-rtl": "sha384-RprtnnPRNE70SYFqGqYumwyYBsm4TWkKMjpRIG83xjdXJHtahpr3eRKHB6xhq7X8",
|
||||||
"css-flags": "sha384-fStl5MKxnUStSlpPiHGSFmUTTzr2KEY7jtgmvTswVDaQJ+sLbmEF+26m57M2sbCm",
|
"css-flags": "sha384-kmvP0hkBXZ2hMSZlbvE1Q2HIXzPCQRL3ijUeqNiwaPd2nl2Aks+s3gW+V5fAHOX9",
|
||||||
"css-flags-rtl": "sha384-i8KVpZYtpnZDkTYzaYlaeiF91VNnmyORipMLZh6hKGh5Jj80QN6962xlHQPkx/xr",
|
"css-flags-rtl": "sha384-Q/h6koANGclsGnwB8rvF8h84H54NKHDeNWFj6yiE4WLLEXyHcz+Zu6Afkh2ssYTC",
|
||||||
"css-marketing": "sha384-IILX0Nea/+/hbVhEsrQ/djsqtSJmb4CM9hPzWd7Yh8hzbyYp4N/4hWMQL5kIPEuZ",
|
"css-marketing": "sha384-4dAlYnPzCom9yeC/5++PFq2FG/szJRlUPsDSrjZ3EWP8IAzK7g7rrsnSfqrS67Se",
|
||||||
"css-marketing-rtl": "sha384-7Dd3GLSNiOzFuAZAtMfOFdsgtQ2xiOowOOvPMaC9+sZ7t+9jzN2tajuQLPekqH2K",
|
"css-marketing-rtl": "sha384-c6gNhuNYjp+lqluSdArbL8ciLEBq7IVU00XnPM2Eogj8RAjMapccvOM/pGhk3vV6",
|
||||||
"css-payments": "sha384-ZRk1rNf2hqzIWoHspDzfWz8bKW1dr1odUHzmItwuijP60huklItYuva1cveYhRs5",
|
"css-payments": "sha384-xWIXbKxPLGG/ZEGUKxDjJn3xmUgd2PC2CSZUKJ4PyTse49DiuvJx2WT5wSNJRyw9",
|
||||||
"css-payments-rtl": "sha384-TI7r4R+53giBkEHQMbhBrUTK58fdyoNij2PR7ICQkIt9W3fW9aXoknm9oqyyU0TK",
|
"css-payments-rtl": "sha384-69CxgA+uEPtM07SLA8MMAdnBmwtVGndDJf8nIPdfvNrDayBfPqOK3wS3nvV5yyk+",
|
||||||
"css-socials": "sha384-rYtfgzcCz11iyODxSKx70JwR+bSIYiIcjSzvRMppIC/s3uSfW787ZBJpOI9mk2VD",
|
"css-socials": "sha384-eWmz8gyiLzrDw3JcT/PJxjGyKizQjvByfHqocjrMMkIrbKFCnOuP/qMwAz3bHmsC",
|
||||||
"css-socials-rtl": "sha384-UpQExKWGunZHqL3L6jEETXHpj5JWIxk8bhxJJmAr8FP/hTUojs4GMCg7omu2DJ5n",
|
"css-socials-rtl": "sha384-yobKDIyTOxB1z7t/uZ2ImuXrcKWF24vDYg2vR1n7x2msF09iWnvyIxQtfEl9+OFl",
|
||||||
"css-props": "sha384-nlhMcpecw2dK6NPM09rxtOrZVkLNoTrRsf7dSC65VBmWBJT5pIkTyeA1k2+qbq+V",
|
"css-props": "sha384-yctdHmQqHsVGkRviR41l44mMU+tmJq7aIvUiRG05pnl2kIjaX1e9yuT6SdYTVMg/",
|
||||||
"css-props-rtl": "sha384-Voq7oikM1MGBKKotIvWP3THYoINUMEQurBmKseurzXaiMzL3KPlbQXhbI4tHPKHU",
|
"css-props-rtl": "sha384-xMuKYM+iQpCesX0ZyyH7tW8KJgLkUOyHlPwNjEY8ZepdiAXhT9+psV8ohJ4xqlkg",
|
||||||
"css-themes": "sha384-o3qxqNUMd6NW7wethAfo4ur0TF8cgmbdTRrUHwryoxEpy3DNmt5MWoCHRlJlX/zD",
|
"css-themes": "sha384-jTe/MdN6BlY4S3eYe6Qw++yTjuezmVnxWp/l7GAG1qXGC+jttphHqsAN/bGPvJOk",
|
||||||
"css-themes-rtl": "sha384-er5SohDm2dJxg5UhUf1RI96jOlVA7RwgVm5++ribGoWmjds4MntkV6Mxg66xCQQg",
|
"css-themes-rtl": "sha384-WTp4aZ+OGqnkNR6Xe0sJwwfd0JHGq3dZTLU2ITKxTK2zjcJTBUMY/+Z4eXgm8ipF",
|
||||||
"css-vendors-rtl": "sha384-tHbMgNpCKXcS6jHEZNTL3D8vphnCwUbnP37Mu3sihnvXRk47xUWU6VYDIO8kMyr3",
|
"css-vendors-rtl": "sha384-V555LUGE2xyN4wNbzdVMgsajsKmJdlLFm20Ws72jEyPiSsTXXITV0PebNzVeBjnb",
|
||||||
"css-vendors": "sha384-Fo//Kmhz1EIFHbqRN5ZnLePKoXW3c4MjGg1DVOrvwTlQNfC2rKRflTBS1degq6n6",
|
"css-vendors": "sha384-+X7+c/noY2B9ieq9daEaVStkUhIFyJTO5T6Occ6jZisx57sbECetvloLqcvGahUv",
|
||||||
"js": "sha384-PHMhDo1ZcalIgfBhQzaXnIBa6xdPJ8iQTzHd+WVAeoI/O2Xq3OuElAo7PyEYTqMg",
|
"js": "sha384-pku3birjgGovaJ9ngF7SaxKkF/eYUvBjiMJ+jTtWbNesIj2Rud2K63+4JD7EF4gk",
|
||||||
"js-theme": "sha384-3Z3TIkq5YSKOncCfiURX/S03AUHfI0nVzd39uRc9KLhtLi7M228qgWBjnRXwt2j0",
|
"js-theme": "sha384-SoDJmj40r6f9Rfxi6Fq+bNS8ofhlZMyxHk9dq9Y8e1M17PZGkBRN/XUpx8swn0i5",
|
||||||
"demo-css": "sha384-BUDq2P684xwRBf0GDlySvob+KJg4ko8y2K7njgvYBscmEuqoVVqJ75zcTDozwkFA",
|
"demo-css": "sha384-BUDq2P684xwRBf0GDlySvob+KJg4ko8y2K7njgvYBscmEuqoVVqJ75zcTDozwkFA",
|
||||||
"demo-js": "sha384-UcTgbM9IZSOPHHuFa0R9H4TegQWoZkJKpeTjLV5hjem2k0CZ67Q4/bW2rT/Edf4Z"
|
"demo-js": "sha384-UcTgbM9IZSOPHHuFa0R9H4TegQWoZkJKpeTjLV5hjem2k0CZ67Q4/bW2rT/Edf4Z"
|
||||||
}
|
}
|
||||||
@@ -14,8 +14,8 @@
|
|||||||
<div class="card-status-top bg-{{ include.status-top | default: 'blue' }}"></div>
|
<div class="card-status-top bg-{{ include.status-top | default: 'blue' }}"></div>
|
||||||
{% elsif include.status-bottom %}
|
{% elsif include.status-bottom %}
|
||||||
<div class="card-status-bottom bg-{{ include.status-bottom | default: 'blue' }}"></div>
|
<div class="card-status-bottom bg-{{ include.status-bottom | default: 'blue' }}"></div>
|
||||||
{% elsif include.status-left %}
|
{% elsif include.status-start %}
|
||||||
<div class="card-status-start bg-{{ include.status-left | default: 'blue' }}"></div>
|
<div class="card-status-start bg-{{ include.status-start | default: 'blue' }}"></div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
{% if include.header or include.header-title or include.header-tabs or include.header-pills %}
|
{% 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 %}
|
{% assign horizontal = include.horizontal | default: false %}
|
||||||
<form class="card">
|
<form class="card h-100">
|
||||||
<div class="card-header">
|
<div class="card-header">
|
||||||
<h3 class="card-title">{{ include.title | default: 'Basic form' }}</h3>
|
<h3 class="card-title">{{ include.title | default: 'Basic form' }}</h3>
|
||||||
</div>
|
</div>
|
||||||
@@ -64,6 +64,9 @@
|
|||||||
</label>
|
</label>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="card-footer">
|
||||||
<div class="text-end">
|
<div class="text-end">
|
||||||
<button type="submit" class="btn btn-primary">Submit</button>
|
<button type="submit" class="btn btn-primary">Submit</button>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -13,7 +13,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="flex-fill">
|
<div class="flex-fill">
|
||||||
<div>
|
<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>
|
<h4>{{ people[4].first_name }} {{ people[4].last_name }}</h4>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -55,7 +55,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="flex-fill">
|
<div class="flex-fill">
|
||||||
<div>
|
<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>
|
<h4>{{ people[10].first_name }} {{ people[10].last_name }}</h4>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
@@ -72,7 +72,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="flex-fill">
|
<div class="flex-fill">
|
||||||
<div>
|
<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>
|
<h4>{{ people[14].first_name }} {{ people[14].last_name }}</h4>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -13,7 +13,7 @@
|
|||||||
|
|
||||||
<div class="card" data-color={{color}}>
|
<div class="card" data-color={{color}}>
|
||||||
<div class="card-body">
|
<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 %}
|
{% include "ui/icon.html" icon=icon %}
|
||||||
</div>
|
</div>
|
||||||
<div class="text-secondary fw-normal mt-0">{{ include.title | default: 'Customers' }}</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" %}
|
{% include "ui/icon.html" icon=include.small-icon color=include.color class="icon-sm ms-1" %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% if include.description-value %}
|
{% 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 %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
<div class="text-secondary">
|
<div class="text-secondary">
|
||||||
|
|||||||
@@ -30,10 +30,10 @@
|
|||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
<div class="clearfix">
|
<div class="clearfix">
|
||||||
<div class="float-left">
|
<div class="float-start">
|
||||||
<strong>{{ percentage }}%</strong>
|
<strong>{{ percentage }}%</strong>
|
||||||
</div>
|
</div>
|
||||||
<div class="float-right">
|
<div class="float-end">
|
||||||
<small class="text-secondary">Jun 11, 2015 - Jul 10, 2015</small>
|
<small class="text-secondary">Jun 11, 2015 - Jul 10, 2015</small>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -23,7 +23,7 @@
|
|||||||
All rights reserved.
|
All rights reserved.
|
||||||
</li>
|
</li>
|
||||||
<li class="list-inline-item">
|
<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">
|
<a href="{{ page | relative }}/changelog.html" class="link-secondary" rel="noopener">
|
||||||
v{{ package.version }}
|
v{{ package.version }}
|
||||||
</a>
|
</a>
|
||||||
|
|||||||
@@ -13,4 +13,9 @@
|
|||||||
<script src="{{ page | relative }}/preview/js/demo{% if environment != 'development' %}.min{% endif %}.js{% if environment != 'development' %}?{{ 'now' | date: '%s' }}{% endif %}" defer></script>
|
<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 -->
|
<!-- 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 %}
|
{% scripts %}
|
||||||
@@ -64,7 +64,7 @@
|
|||||||
{% include "ui/icon.html" icon="settings" %}
|
{% include "ui/icon.html" icon="settings" %}
|
||||||
</span>
|
</span>
|
||||||
<span class="nav-link-title">
|
<span class="nav-link-title">
|
||||||
Settings
|
Theme Settings
|
||||||
</span>
|
</span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
{% assign breakpoint = include.breakpoint | default: 'lg' %}
|
{% 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">
|
<div class="container-fluid">
|
||||||
{% include "layout/navbar-toggler.html" target="sidebar-menu" %}
|
{% 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>
|
<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">
|
<div class="btn-list justify-content-center mt-6">
|
||||||
{% include "ui/button.html" text="Get started" color="primary" %}
|
{% 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>
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</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>
|
<div class="h-2 {% if config.topmenu-dark %}bg-dark{% else %}border-bottom bg-white{% endif %}"></div>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</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>
|
<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 %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -1,11 +1,11 @@
|
|||||||
<div class="settings">
|
<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" %}
|
{% include "ui/icon.html" icon="brush" %}
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<form class="offcanvas offcanvas-start offcanvas-narrow" tabindex="-1" id="offcanvasSettings">
|
<form class="offcanvas offcanvas-start offcanvas-narrow" tabindex="-1" id="offcanvasSettings">
|
||||||
<div class="offcanvas-header">
|
<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>
|
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||||||
</div>
|
</div>
|
||||||
<div class="offcanvas-body d-flex flex-column">
|
<div class="offcanvas-body d-flex flex-column">
|
||||||
@@ -96,8 +96,7 @@
|
|||||||
Reset changes
|
Reset changes
|
||||||
</button>
|
</button>
|
||||||
<a href="#" class="btn btn-primary w-100" data-bs-dismiss="offcanvas">
|
<a href="#" class="btn btn-primary w-100" data-bs-dismiss="offcanvas">
|
||||||
{% include "ui/icon.html" icon="settings" %}
|
Save
|
||||||
Save settings
|
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|||||||
@@ -24,6 +24,6 @@
|
|||||||
{% if include.icon %}{% include "ui/icon.html" icon=include.icon color=include.icon-color %}{% endif %}
|
{% if include.icon %}{% include "ui/icon.html" icon=include.icon color=include.icon-color %}{% endif %}
|
||||||
{% unless include.icon-only %}
|
{% unless include.icon-only %}
|
||||||
{{ include.text | default: "Button" }}{% if include.dots %}<span class="animated-dots"></span>{% endif %}
|
{{ 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 %}
|
{% endunless %}
|
||||||
</{{ e }}>
|
</{{ e }}>
|
||||||
@@ -13,7 +13,6 @@
|
|||||||
height: 300,
|
height: 300,
|
||||||
menubar: false,
|
menubar: false,
|
||||||
statusbar: false,
|
statusbar: false,
|
||||||
license_key: 'gpl',
|
|
||||||
plugins: [
|
plugins: [
|
||||||
'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview', 'anchor',
|
'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview', 'anchor',
|
||||||
'searchreplace', 'visualblocks', 'code', 'fullscreen',
|
'searchreplace', 'visualblocks', 'code', 'fullscreen',
|
||||||
|
|||||||
@@ -24,12 +24,15 @@
|
|||||||
|
|
||||||
<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"/>
|
<link rel="shortcut icon" href="{{ page | relative }}/favicon.ico" type="image/x-icon"/>
|
||||||
|
|
||||||
<meta name="description" content="{{ description | default: site.description | escape }}"/>
|
<meta name="description" content="{{ description | default: site.description | escape }}"/>
|
||||||
|
|
||||||
{% include "layout/og.html" %}
|
{% 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 %}
|
{% endif %}
|
||||||
|
|
||||||
|
|
||||||
{% include "layout/css.html" %}
|
{% include "layout/css.html" %}
|
||||||
{% include "layout/js-libs.html" head %}
|
{% include "layout/js-libs.html" head %}
|
||||||
|
|
||||||
|
|||||||
@@ -7,7 +7,7 @@ layout: base
|
|||||||
<div class="page">
|
<div class="page">
|
||||||
{% if layout-sidebar %}
|
{% if layout-sidebar %}
|
||||||
<!-- BEGIN 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 -->
|
<!-- END SIDEBAR -->
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
|
|||||||
@@ -5,6 +5,8 @@
|
|||||||
<meta charset="UTF-8">
|
<meta charset="UTF-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
|
||||||
|
{% if environment == 'production' %}
|
||||||
|
|
||||||
{% assign pageSection = "" %}
|
{% assign pageSection = "" %}
|
||||||
{% if page.url contains "/ui/" %}
|
{% if page.url contains "/ui/" %}
|
||||||
{% assign pageSection = "UI" %}
|
{% assign pageSection = "UI" %}
|
||||||
@@ -48,6 +50,11 @@
|
|||||||
|
|
||||||
<script defer data-api="/stats/event" data-domain="docs.tabler.io" src="/stats/js/script.js"></script>
|
<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 %}" />
|
<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 %}
|
{% for plugin in site.cssPlugins %}
|
||||||
<link
|
<link
|
||||||
@@ -196,5 +203,9 @@
|
|||||||
|
|
||||||
<script src="/dist/js/tabler{% if environment != 'development' %}.min{% endif %}.js"></script>
|
<script src="/dist/js/tabler{% if environment != 'development' %}.min{% endif %}.js"></script>
|
||||||
<script src="/js/docs{% if environment != 'development' %}.min{% endif %}.js" defer></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>
|
</body>
|
||||||
</html>
|
</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