mirror of
https://github.com/tabler/tabler.git
synced 2025-12-21 17:34:25 +04:00
Compare commits
41 Commits
dev-css-la
...
dev-scss-i
| Author | SHA1 | Date | |
|---|---|---|---|
|
9f5748b683 | ||
|
|
612879c6a1 | ||
|
|
1ee0110205 | ||
|
|
ef23c7c1f6 | ||
|
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 |
5
.changeset/chilled-pans-cheer.md
Normal file
5
.changeset/chilled-pans-cheer.md
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
"@tabler/preview": minor
|
||||
---
|
||||
|
||||
Add a color palette in the signing component
|
||||
5
.changeset/fresh-rockets-retire.md
Normal file
5
.changeset/fresh-rockets-retire.md
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
"@tabler/core": patch
|
||||
---
|
||||
|
||||
Fix mixed declarations in SCSS
|
||||
5
.changeset/light-cooks-hug.md
Normal file
5
.changeset/light-cooks-hug.md
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
"@tabler/preview": patch
|
||||
---
|
||||
|
||||
Update icons to v3.34.1 (75 new icons)
|
||||
5
.changeset/modern-dots-bathe.md
Normal file
5
.changeset/modern-dots-bathe.md
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
"@tabler/preview": patch
|
||||
---
|
||||
|
||||
Update activity messages
|
||||
5
.changeset/tricky-moons-laugh.md
Normal file
5
.changeset/tricky-moons-laugh.md
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
"@tabler/docs": patch
|
||||
---
|
||||
|
||||
Fix Docs search in dark mode
|
||||
5
.changeset/twelve-tables-attack.md
Normal file
5
.changeset/twelve-tables-attack.md
Normal file
@@ -0,0 +1,5 @@
|
||||
---
|
||||
"@tabler/preview": patch
|
||||
---
|
||||
|
||||
Fix responsive layputs in 'Form Elements' page
|
||||
56
.cursor/rules/main.mdc
Normal file
56
.cursor/rules/main.mdc
Normal file
@@ -0,0 +1,56 @@
|
||||
---
|
||||
description: Tabler Project Rules
|
||||
globs:
|
||||
alwaysApply: true
|
||||
---
|
||||
|
||||
## Documentation Standards
|
||||
|
||||
- Always write documentation in English (not Polish) for technical content
|
||||
- Use clear, descriptive headings with proper hierarchy (##, ###)
|
||||
- Include practical examples with code snippets
|
||||
- Add explanations for each component's purpose and usage
|
||||
- Use consistent formatting for code blocks and examples
|
||||
|
||||
## CSS/SCSS Guidelines
|
||||
|
||||
- Follow Tabler's CSS custom properties pattern: `--#{$prefix}component-property`
|
||||
- Use semantic class names that describe purpose, not appearance
|
||||
- Maintain consistent spacing and indentation in SCSS files
|
||||
- Group related styles together with clear comments
|
||||
- Use Bootstrap-compatible class naming conventions
|
||||
|
||||
## Component Documentation Structure
|
||||
|
||||
- Start with a brief description of the component's purpose
|
||||
- Show basic usage examples first
|
||||
- Include variations and modifiers
|
||||
- Add accessibility considerations where relevant
|
||||
- Provide code examples that are copy-paste ready
|
||||
|
||||
## File Organization
|
||||
|
||||
- Keep documentation files in `docs/content/ui/components/`
|
||||
- Use consistent naming: lowercase with hyphens
|
||||
- Include frontmatter with title, summary, and description
|
||||
- Link to Bootstrap documentation when relevant
|
||||
|
||||
## Code Examples
|
||||
|
||||
- Use Liquid templating syntax for dynamic examples
|
||||
- Include both HTML and rendered output
|
||||
- Show responsive behavior where applicable
|
||||
- Demonstrate proper accessibility attributes
|
||||
|
||||
## Git Commit Messages
|
||||
|
||||
- Use English for commit messages
|
||||
- Follow conventional commit format when possible
|
||||
- Be descriptive about what was changed and why
|
||||
|
||||
## Project-Specific Conventions
|
||||
|
||||
- Tabler uses Bootstrap 5 as a foundation
|
||||
- Custom components extend Bootstrap functionality
|
||||
- Documentation should be comprehensive but concise
|
||||
- Examples should be practical and immediately usable
|
||||
5
.github/workflows/lockfiles.yaml
vendored
5
.github/workflows/lockfiles.yaml
vendored
@@ -13,10 +13,9 @@ jobs:
|
||||
steps:
|
||||
- name: Clone Tabler
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- name: Prevent lock file change
|
||||
uses: xalvarez/prevent-file-change-action@v2
|
||||
with:
|
||||
githubToken: ${{ secrets.GITHUB_TOKEN }}
|
||||
pattern: Gemfile.lock|pnpm-lock.json
|
||||
trustedAuthors: codecalm, dependabot
|
||||
pattern: Gemfile.lock|pnpm-lock.json|pnpm-lock.yaml
|
||||
trustedAuthors: codecalm, BG-Software-BG, dependabot
|
||||
|
||||
@@ -9,7 +9,10 @@ export default context => {
|
||||
autoprefixer: {
|
||||
cascade: false
|
||||
},
|
||||
rtlcss: context.env === 'RTL'
|
||||
rtlcss: context.env === 'RTL',
|
||||
'postcss-discard-comments': {
|
||||
removeAll: true
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,5 +1,24 @@
|
||||
# @tabler/core
|
||||
|
||||
## 1.4.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
- 9951fe9: Enhance button and hover animations
|
||||
- a200d30: Improve breadcrumb styles
|
||||
- 49ab9ea: Add new Tabler Illustrations
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- 6c4dd36: Update class names from `*-left`, `*-right` to `*-start`, `*-end`
|
||||
- 6fec73a: Fix relative line heights in buttons
|
||||
- db6200a: Remove `license_key` option from HugeRTE init object
|
||||
- e96f055: Add different favicon to development environment
|
||||
- 6c38a48: Update Bootstrap to v5.3.7
|
||||
- 2a12f72: Update CSS calculations to use `calc()`
|
||||
- 666a296: Fix list group item hoverable only with `.list-group-hoverable` class
|
||||
- cfd4cb6: Fix `.pagination-link` hover styles to non-active items
|
||||
|
||||
## 1.3.2
|
||||
|
||||
### Patch Changes
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@tabler/core",
|
||||
"version": "1.3.2",
|
||||
"version": "1.4.0",
|
||||
"description": "Premium and Open Source dashboard template with responsive and high quality UI.",
|
||||
"homepage": "https://tabler.io",
|
||||
"scripts": {
|
||||
@@ -8,7 +8,7 @@
|
||||
"build": "pnpm run clean && pnpm run css && pnpm run js && pnpm run copy && pnpm run generate-sri",
|
||||
"clean": "shx rm -rf dist demo",
|
||||
"css": "pnpm run css-compile && pnpm run css-prefix && pnpm run css-rtl && pnpm run css-minify && pnpm run css-banner",
|
||||
"css-compile": "sass scss/:dist/css/ --no-source-map --load-path=node_modules",
|
||||
"css-compile": "sass --no-source-map --load-path=node_modules --style expanded scss/:dist/css/",
|
||||
"css-banner": "node .build/add-banner.mjs",
|
||||
"css-prefix": "postcss --config .build/postcss.config.mjs --replace \"dist/css/*.css\" \"!dist/css/*.rtl*.css\" \"!dist/css/*.min.css\"",
|
||||
"css-rtl": "cross-env NODE_ENV=RTL postcss --config .build/postcss.config.mjs --dir \"dist/css\" --ext \".rtl.css\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*.rtl.css\"",
|
||||
@@ -146,28 +146,29 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@popperjs/core": "^2.11.8",
|
||||
"bootstrap": "5.3.6"
|
||||
"bootstrap": "5.3.7",
|
||||
"postcss-discard-comments": "^7.0.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@hotwired/turbo": "^8.0.13",
|
||||
"@melloware/coloris": "^0.24.2",
|
||||
"@melloware/coloris": "^0.25.0",
|
||||
"apexcharts": "3.54.1",
|
||||
"autosize": "^6.0.1",
|
||||
"choices.js": "^11.1.0",
|
||||
"clipboard": "^2.0.11",
|
||||
"countup.js": "^2.8.2",
|
||||
"countup.js": "^2.9.0",
|
||||
"dropzone": "^6.0.0-beta.2",
|
||||
"flatpickr": "^4.6.13",
|
||||
"fslightbox": "^3.6.0",
|
||||
"fullcalendar": "^6.1.17",
|
||||
"fslightbox": "^3.6.1",
|
||||
"fullcalendar": "^6.1.18",
|
||||
"hugerte": "^1.0.9",
|
||||
"imask": "^7.6.1",
|
||||
"jsvectormap": "^1.6.0",
|
||||
"jsvectormap": "^1.7.0",
|
||||
"list.js": "^2.3.1",
|
||||
"litepicker": "^2.0.12",
|
||||
"nouislider": "^15.8.1",
|
||||
"plyr": "^3.7.8",
|
||||
"signature_pad": "^5.0.7",
|
||||
"signature_pad": "^5.0.10",
|
||||
"star-rating.js": "^4.3.1",
|
||||
"tom-select": "^2.4.3",
|
||||
"typed.js": "^2.1.0"
|
||||
|
||||
@@ -14,7 +14,6 @@
|
||||
@import "bootstrap/scss/nav";
|
||||
@import "bootstrap/scss/navbar";
|
||||
@import "bootstrap/scss/card";
|
||||
@import "bootstrap/scss/breadcrumb";
|
||||
@import "bootstrap/scss/pagination";
|
||||
@import "bootstrap/scss/progress";
|
||||
@import "bootstrap/scss/list-group";
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
// Config
|
||||
@import "bootstrap/scss/functions";
|
||||
@import "bootstrap-functions";
|
||||
|
||||
@import "bootstrap/scss/variables";
|
||||
@import "bootstrap/scss/variables-dark";
|
||||
@import "bootstrap/scss/maps";
|
||||
|
||||
258
core/scss/_bootstrap-functions.scss
Normal file
258
core/scss/_bootstrap-functions.scss
Normal file
@@ -0,0 +1,258 @@
|
||||
@use "sass:color";
|
||||
@use "sass:map";
|
||||
@use "sass:math";
|
||||
@use "sass:meta";
|
||||
@use "sass:string";
|
||||
@use "sass:list";
|
||||
|
||||
/**
|
||||
* Converts a color value to RGB format
|
||||
*
|
||||
* @param {Color} $value - The color value to convert
|
||||
* @return {List} - RGB values as a list (red, green, blue)
|
||||
*
|
||||
* @example
|
||||
* to-rgb(#ff0000) // Returns: (255, 0, 0)
|
||||
*/
|
||||
@function to-rgb($value) {
|
||||
@return color.channel($value, "red", $space: rgb), color.channel($value, "green", $space: rgb), color.channel($value, "blue", $space: rgb);
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates an opaque color by mixing a foreground color with a background color
|
||||
*
|
||||
* @param {Color} $background - The background color
|
||||
* @param {Color} $foreground - The foreground color to make opaque
|
||||
* @return {Color} - The resulting opaque color
|
||||
*
|
||||
* @example
|
||||
* opaque(#ffffff, rgba(255, 0, 0, 0.5)) // Returns solid red color
|
||||
*/
|
||||
@function opaque($background, $foreground) {
|
||||
@return color.mix(rgba($foreground, 1), $background, opacity($foreground) * 100%);
|
||||
}
|
||||
|
||||
/**
|
||||
* Adjusts a color channel value for luminance calculation
|
||||
*
|
||||
* @param {Number} $channel - The color channel value (0-1)
|
||||
* @return {Number} - The adjusted channel value
|
||||
*
|
||||
* @example
|
||||
* adjust(0.5) // Returns adjusted value for luminance calculation
|
||||
*/
|
||||
@function adjust($channel) {
|
||||
@return if($channel < 0.03928, math.div($channel, 12.92), pow(($channel + 0.055) / 1.055, 2.4));
|
||||
}
|
||||
|
||||
/**
|
||||
* Calculates the relative luminance of a color using WCAG formula
|
||||
*
|
||||
* @param {Color} $color - The color to calculate luminance for
|
||||
* @return {Number} - The luminance value (0-1)
|
||||
*
|
||||
* @example
|
||||
* luminance(#ffffff) // Returns: 1
|
||||
* luminance(#000000) // Returns: 0
|
||||
*/
|
||||
@function luminance($color) {
|
||||
$r: math.div(color.channel($color, "red", $space: rgb), 255);
|
||||
$g: math.div(color.channel($color, "green", $space: rgb), 255);
|
||||
$b: math.div(color.channel($color, "blue", $space: rgb), 255);
|
||||
|
||||
$r: adjust($r);
|
||||
$g: adjust($g);
|
||||
$b: adjust($b);
|
||||
|
||||
@return 0.2126 * $r + 0.7152 * $g + 0.0722 * $b;
|
||||
}
|
||||
|
||||
/**
|
||||
* Determines the best contrasting color for a given background
|
||||
*
|
||||
* @param {Color} $background - The background color
|
||||
* @param {Color} $light - The light color option (default: #ffffff)
|
||||
* @param {Color} $dark - The dark color option (default: #000000)
|
||||
* @return {Color} - The contrasting color (light or dark)
|
||||
*
|
||||
* @example
|
||||
* color-contrast(#000000) // Returns: #ffffff
|
||||
* color-contrast(#ffffff) // Returns: #000000
|
||||
*/
|
||||
@function color-contrast($background, $light: #ffffff, $dark: #000000) {
|
||||
// Get relative luminance using WCAG formula
|
||||
|
||||
$bg-luminance: luminance($background);
|
||||
|
||||
// If background is dark, return light color, otherwise dark
|
||||
@return if($bg-luminance > 0.179, $dark, $light);
|
||||
}
|
||||
|
||||
/**
|
||||
* Adds two values together, handling different data types
|
||||
*
|
||||
* @param {*} $value1 - First value to add
|
||||
* @param {*} $value2 - Second value to add
|
||||
* @param {Boolean} $return-calc - Whether to return calc() function (default: true)
|
||||
* @return {*} - The result of addition or calc() expression
|
||||
*
|
||||
* @example
|
||||
* add(10px, 5px) // Returns: 15px
|
||||
* add(10px, 5px, false) // Returns: 10px + 5px
|
||||
*/
|
||||
@function add($value1, $value2, $return-calc: true) {
|
||||
@if $value1 == null {
|
||||
@return $value2;
|
||||
}
|
||||
|
||||
@if $value2 == null {
|
||||
@return $value1;
|
||||
}
|
||||
|
||||
@if meta.type-of($value1) == number and meta.type-of($value2) == number and math.compatible($value1, $value2) {
|
||||
@return $value1 + $value2;
|
||||
}
|
||||
|
||||
@return if($return-calc == true, calc(#{$value1} + #{$value2}), $value1 + string.unquote(" + ") + $value2);
|
||||
}
|
||||
|
||||
/**
|
||||
* Subtracts the second value from the first value
|
||||
*
|
||||
* @param {*} $value1 - The value to subtract from
|
||||
* @param {*} $value2 - The value to subtract
|
||||
* @param {Boolean} $return-calc - Whether to return calc() function (default: true)
|
||||
* @return {*} - The result of subtraction or calc() expression
|
||||
*
|
||||
* @example
|
||||
* subtract(10px, 5px) // Returns: 5px
|
||||
* subtract(10px, 5px, false) // Returns: 10px - 5px
|
||||
*/
|
||||
@function subtract($value1, $value2, $return-calc: true) {
|
||||
@if $value1 == null and $value2 == null {
|
||||
@return null;
|
||||
}
|
||||
|
||||
@if $value1 == null {
|
||||
@return -$value2;
|
||||
}
|
||||
|
||||
@if $value2 == null {
|
||||
@return $value1;
|
||||
}
|
||||
|
||||
@if meta.type-of($value1) == number and meta.type-of($value2) == number and math.compatible($value1, $value2) {
|
||||
@return $value1 - $value2;
|
||||
}
|
||||
|
||||
@if meta.type-of($value2) != number {
|
||||
$value2: string.unquote("(") + $value2 + string.unquote(")");
|
||||
}
|
||||
|
||||
@return if($return-calc == true, calc(#{$value1} - #{$value2}), $value1 + unquote(" - ") + $value2);
|
||||
}
|
||||
|
||||
/**
|
||||
* Divides the dividend by the divisor with specified precision
|
||||
*
|
||||
* @param {Number} $dividend - The number to be divided
|
||||
* @param {Number} $divisor - The number to divide by
|
||||
* @param {Number} $precision - The number of decimal places (default: 10)
|
||||
* @return {Number} - The result of division
|
||||
*
|
||||
* @example
|
||||
* divide(10, 2) // Returns: 5
|
||||
* divide(10px, 2) // Returns: 5px
|
||||
* divide(10, 3) // Returns: 3.3333333333
|
||||
*/
|
||||
@function divide($dividend, $divisor, $precision: 10) {
|
||||
$sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
|
||||
$dividend: abs($dividend);
|
||||
$divisor: abs($divisor);
|
||||
@if $dividend == 0 {
|
||||
@return 0;
|
||||
}
|
||||
@if $divisor == 0 {
|
||||
@error "Cannot divide by 0";
|
||||
}
|
||||
$remainder: $dividend;
|
||||
$result: 0;
|
||||
$factor: 10;
|
||||
@while ($remainder > 0 and $precision >= 0) {
|
||||
$quotient: 0;
|
||||
@while ($remainder >= $divisor) {
|
||||
$remainder: $remainder - $divisor;
|
||||
$quotient: $quotient + 1;
|
||||
}
|
||||
$result: $result * 10 + $quotient;
|
||||
$factor: $factor * 0.1;
|
||||
$remainder: $remainder * 10;
|
||||
$precision: $precision - 1;
|
||||
@if ($precision < 0 and $remainder >= $divisor * 5) {
|
||||
$result: $result + 1;
|
||||
}
|
||||
}
|
||||
$result: $result * $factor * $sign;
|
||||
$dividend-unit: math.unit($dividend);
|
||||
$divisor-unit: math.unit($divisor);
|
||||
$unit-map: (
|
||||
"px": 1px,
|
||||
"rem": 1rem,
|
||||
"em": 1em,
|
||||
"%": 1%,
|
||||
);
|
||||
@if ($dividend-unit != $divisor-unit and map.has-key($unit-map, $dividend-unit)) {
|
||||
$result: $result * map.get($unit-map, $dividend-unit);
|
||||
}
|
||||
@return $result;
|
||||
}
|
||||
|
||||
/**
|
||||
* Replaces all occurrences of a search string with a replace string
|
||||
*
|
||||
* @param {String} $string - The string to search in
|
||||
* @param {String} $search - The string to search for
|
||||
* @param {String} $replace - The string to replace with (default: "")
|
||||
* @return {String} - The string with replacements made
|
||||
*
|
||||
* @example
|
||||
* str-replace("hello world", "world", "universe") // Returns: "hello universe"
|
||||
* str-replace("hello world", "o") // Returns: "hell wrld"
|
||||
*/
|
||||
@function str-replace($string, $search, $replace: "") {
|
||||
$index: string.index($string, $search);
|
||||
|
||||
@if $index {
|
||||
@return string.slice($string, 1, $index - 1) + $replace + str-replace(string.slice($string, $index + string.length($search)), $search, $replace);
|
||||
}
|
||||
|
||||
@return $string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Applies a function to each key-value pair in a map
|
||||
*
|
||||
* @param {Map} $map - The map to iterate over
|
||||
* @param {String} $func - The name of the function to apply
|
||||
* @param {*} $args... - Additional arguments to pass to the function
|
||||
* @return {Map} - A new map with the function applied to each value
|
||||
*
|
||||
* @example
|
||||
* $colors: (primary: #007bff, secondary: #6c757d);
|
||||
* map-loop($colors, darken, 10%) // Returns map with darkened colors
|
||||
*/
|
||||
@function map-loop($map, $func, $args...) {
|
||||
$_map: ();
|
||||
|
||||
@each $key, $value in $map {
|
||||
// allow to pass the $key and $value of the map as an function argument
|
||||
$_args: ();
|
||||
@each $arg in $args {
|
||||
$_args: list.append($_args, if($arg == "$key", $key, if($arg == "$value", $value, $arg)));
|
||||
}
|
||||
|
||||
$_map: map.merge($_map, ($key: meta.call(meta.get-function($func), $_args...)));
|
||||
}
|
||||
|
||||
@return $_map;
|
||||
}
|
||||
@@ -70,9 +70,4 @@
|
||||
// Override bootstrap core
|
||||
}
|
||||
|
||||
//
|
||||
// TODO: remove when https://github.com/twbs/bootstrap/pull/37425/ will be released
|
||||
//
|
||||
@function opaque($background, $foreground) {
|
||||
@return mix(rgba($foreground, 1), $background, opacity($foreground) * 100%);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
@import "bootstrap/scss/functions";
|
||||
@import "bootstrap-functions";
|
||||
|
||||
@import "mixins";
|
||||
@import "variables";
|
||||
|
||||
@@ -76,6 +76,7 @@
|
||||
@import "utils/opacity";
|
||||
@import "utils/shadow";
|
||||
@import "utils/text";
|
||||
@import "utils/hover";
|
||||
|
||||
@import "debug";
|
||||
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
@use "sass:map";
|
||||
@import "config";
|
||||
|
||||
:root,
|
||||
@@ -30,7 +31,7 @@
|
||||
--#{$prefix}brand: #{$primary};
|
||||
|
||||
/** Theme colors */
|
||||
@each $name, $color in map-merge($theme-colors, $social-colors) {
|
||||
@each $name, $color in map.merge($theme-colors, $social-colors) {
|
||||
--#{$prefix}#{$name}: #{$color};
|
||||
--#{$prefix}#{$name}-rgb: #{to-rgb($color)};
|
||||
--#{$prefix}#{$name}-fg: #{if(contrast-ratio($color) > $min-contrast-ratio, var(--#{$prefix}light), var(--#{$prefix}dark))};
|
||||
|
||||
@@ -1,6 +1,8 @@
|
||||
@use "sass:map";
|
||||
|
||||
$negative-spacers-extra: if(
|
||||
$enable-negative-margins,
|
||||
negativify-map(map-merge($spacers, $spacers-extra)),
|
||||
negativify-map(map.merge($spacers, $spacers-extra)),
|
||||
null
|
||||
);
|
||||
|
||||
|
||||
@@ -1,3 +1,8 @@
|
||||
@use "sass:string";
|
||||
@use "sass:color";
|
||||
@use "sass:map";
|
||||
@use "sass:math";
|
||||
|
||||
$prefix: "tblr-" !default;
|
||||
|
||||
// BASE CONFIG
|
||||
@@ -23,10 +28,10 @@ $font-google-monospaced: null !default;
|
||||
$font-local: null !default;
|
||||
$font-icons: () !default;
|
||||
|
||||
$font-family-sans-serif: unquote("#{if($font-local, "#{$font-local}, ", ' ')}#{if($font-google, "#{$font-google}, ", ' ')}") 'Inter Var', Inter, -apple-system, BlinkMacSystemFont, San Francisco, Segoe UI, Roboto, Helvetica Neue, sans-serif !default;
|
||||
$font-family-monospace: unquote("#{if($font-google-monospaced, "#{$font-google-monospaced}, ", '')}") Monaco, Consolas, Liberation Mono, Courier New, monospace !default;
|
||||
$font-family-sans-serif: string.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: string.unquote("#{if($font-google-monospaced, "#{$font-google-monospaced}, ", '')}") Monaco, Consolas, Liberation Mono, Courier New, monospace !default;
|
||||
$font-family-serif: "Georgia", "Times New Roman", times, serif !default;
|
||||
$font-family-comic: "Comic Sans MS", "Comic Sans", 'Chalkboard SE', 'Comic Neue', sans-serif, cursive !default;
|
||||
$font-family-comic: "Comic Sans MS", "Comic Sans", "Chalkboard SE", "Comic Neue", sans-serif, cursive !default;
|
||||
|
||||
//Icons
|
||||
$icon-stroke-width: 1.5 !default;
|
||||
@@ -52,9 +57,9 @@ $line-height-700: 3rem !default;
|
||||
|
||||
$font-size-base: 0.875rem !default;
|
||||
|
||||
$spacing-wide: .04em !default;
|
||||
$spacing-wide: 0.04em !default;
|
||||
$spacing-normal: 0 !default;
|
||||
$spacing-tight: -.04em !default;
|
||||
$spacing-tight: -0.04em !default;
|
||||
|
||||
$body-letter-spacing: 0 !default;
|
||||
|
||||
@@ -68,12 +73,12 @@ $headings-font-weight: var(--#{$prefix}font-weight-bold) !default;
|
||||
$headings-margin-bottom: var(--#{$prefix}spacer) !default;
|
||||
|
||||
$font-weights: (
|
||||
'light': $font-weight-light,
|
||||
'normal': $font-weight-normal,
|
||||
'medium': $font-weight-medium,
|
||||
'bold': $font-weight-bold,
|
||||
'black': $font-weight-black,
|
||||
'headings': $headings-font-weight,
|
||||
"light": $font-weight-light,
|
||||
"normal": $font-weight-normal,
|
||||
"medium": $font-weight-medium,
|
||||
"bold": $font-weight-bold,
|
||||
"black": $font-weight-black,
|
||||
"headings": $headings-font-weight,
|
||||
) !default;
|
||||
|
||||
$line-height-base: divide(1.25rem, $font-size-base) !default;
|
||||
@@ -99,8 +104,8 @@ $h5-line-height: 1rem !default;
|
||||
$h6-font-size: 0.625rem !default;
|
||||
$h6-line-height: 1rem !default;
|
||||
|
||||
$font-size-reative-xs: .71428571em !default;
|
||||
$font-size-reative-sm: .85714285em !default;
|
||||
$font-size-reative-xs: 0.71428571em !default;
|
||||
$font-size-reative-sm: 0.85714285em !default;
|
||||
$font-size-reative-md: 1em !default;
|
||||
|
||||
$font-sizes: (
|
||||
@@ -146,7 +151,7 @@ $border-light-opacity: 0.08 !default;
|
||||
$border-dark-opacity: 0.24 !default;
|
||||
$border-active-opacity: 0.58 !default;
|
||||
|
||||
$gray-50: #f9fafb !default;
|
||||
$gray-50: #f9fafb !default;
|
||||
$gray-100: #f3f4f6 !default;
|
||||
$gray-200: #e5e7eb !default;
|
||||
$gray-300: #d1d5db !default;
|
||||
@@ -200,7 +205,7 @@ $border-color-translucent: rgba(4, 32, 69, 0.1);
|
||||
$border-dark-color: $gray-400 !default;
|
||||
$border-dark-color-translucent: rgba(4, 32, 69, 0.27);
|
||||
|
||||
$border-active-color: mix($text-secondary, #ffffff, percentage($border-active-opacity)) !default;
|
||||
$border-active-color: color.mix($text-secondary, #ffffff, math.percentage($border-active-opacity)) !default;
|
||||
$border-active-color-translucent: rgba($text-secondary, $border-active-opacity) !default;
|
||||
|
||||
$active-bg: rgba(var(--#{$prefix}primary-rgb), 0.04) !default;
|
||||
@@ -210,7 +215,7 @@ $active-border-color: var(--#{$prefix}primary) !default;
|
||||
$hover-bg: rgba(var(--#{$prefix}secondary-rgb), 0.08) !default;
|
||||
|
||||
$disabled-bg: var(--#{$prefix}bg-surface-secondary) !default;
|
||||
$disabled-color: color-transparent(var(--#{$prefix}body-color), .4) !default;
|
||||
$disabled-color: color-transparent(var(--#{$prefix}body-color), 0.4) !default;
|
||||
|
||||
$primary: $blue !default;
|
||||
$secondary: $text-secondary !default;
|
||||
@@ -282,7 +287,7 @@ $gray-colors: (
|
||||
gray-950: $gray-950,
|
||||
) !default;
|
||||
|
||||
$theme-colors: map-merge($theme-colors, map-merge($extra-colors, ()));
|
||||
$theme-colors: map.merge($theme-colors, map.merge($extra-colors, ()));
|
||||
|
||||
// BACKDROPS
|
||||
$backdrop-opacity: 24% !default;
|
||||
@@ -341,7 +346,7 @@ $kbd-border-radius: var(--#{$prefix}border-radius) !default;
|
||||
|
||||
// Avatars
|
||||
$avatar-size: 2.5rem !default;
|
||||
$avatar-status-size: .75rem !default;
|
||||
$avatar-status-size: 0.75rem !default;
|
||||
$avatar-font-size: 1rem !default;
|
||||
$avatar-icon-size: 1.5rem !default;
|
||||
$avatar-brand-size: 1.25rem !default;
|
||||
@@ -349,52 +354,52 @@ $avatar-bg: var(--#{$prefix}bg-surface-secondary) !default;
|
||||
$avatar-sizes: (
|
||||
"xxs": (
|
||||
size: 1rem,
|
||||
font-size: .5rem,
|
||||
icon-size: .5rem,
|
||||
status-size: .25rem,
|
||||
brand-size: .5rem
|
||||
font-size: 0.5rem,
|
||||
icon-size: 0.5rem,
|
||||
status-size: 0.25rem,
|
||||
brand-size: 0.5rem,
|
||||
),
|
||||
"xs": (
|
||||
size: 1.25rem,
|
||||
font-size: $h6-font-size,
|
||||
icon-size: .75rem,
|
||||
status-size: .375rem,
|
||||
brand-size: .75rem
|
||||
icon-size: 0.75rem,
|
||||
status-size: 0.375rem,
|
||||
brand-size: 0.75rem,
|
||||
),
|
||||
"sm": (
|
||||
size: 2rem,
|
||||
font-size: $h5-font-size,
|
||||
icon-size: 1.5rem,
|
||||
status-size: .5rem,
|
||||
brand-size: 1rem
|
||||
status-size: 0.5rem,
|
||||
brand-size: 1rem,
|
||||
),
|
||||
"md": (
|
||||
size: 2.5rem,
|
||||
font-size: $h4-font-size,
|
||||
icon-size: 1.5rem,
|
||||
status-size: .75rem,
|
||||
brand-size: 1.25rem
|
||||
status-size: 0.75rem,
|
||||
brand-size: 1.25rem,
|
||||
),
|
||||
"lg": (
|
||||
size: 3rem,
|
||||
font-size: $h2-font-size,
|
||||
icon-size: 2rem,
|
||||
status-size: .75rem,
|
||||
brand-size: 1.25rem
|
||||
status-size: 0.75rem,
|
||||
brand-size: 1.25rem,
|
||||
),
|
||||
"xl": (
|
||||
size: 5rem,
|
||||
font-size: 2rem,
|
||||
icon-size: 3rem,
|
||||
status-size: 1rem,
|
||||
brand-size: 1.25rem
|
||||
brand-size: 1.25rem,
|
||||
),
|
||||
"2xl": (
|
||||
size: 7rem,
|
||||
font-size: 3rem,
|
||||
icon-size: 5rem,
|
||||
status-size: 1rem,
|
||||
brand-size: 2rem
|
||||
brand-size: 2rem,
|
||||
),
|
||||
) !default;
|
||||
$avatar-border-radius: var(--#{$prefix}border-radius) !default;
|
||||
@@ -477,7 +482,7 @@ $size-spacers: (
|
||||
full: 100%,
|
||||
) !default;
|
||||
|
||||
$size-values: map-merge(
|
||||
$size-values: map.merge(
|
||||
$spacers,
|
||||
(
|
||||
25: 25%,
|
||||
@@ -586,41 +591,71 @@ $badge-color: var(--#{$prefix}secondary) !default;
|
||||
$badge-bg-color: var(--#{$prefix}bg-surface-secondary) !default;
|
||||
|
||||
// Buttons
|
||||
$input-btn-line-height: $line-height-base !default;
|
||||
$input-btn-font-size: $font-size-base !default;
|
||||
$input-btn-font-family: var(--#{$prefix}body-font-face) !default;
|
||||
$input-btn-padding-y: 0.5rem - 0.0625rem !default;
|
||||
$input-btn-icon-size: $icon-size !default;
|
||||
$input-btn-border-width: var(--#{$prefix}border-width) !default;
|
||||
$input-btn-font-family: var(--#{$prefix}body-font-family) !default;
|
||||
$input-btn-focus-width: 0.25rem !default;
|
||||
|
||||
$input-btn-padding-y-sm: 0.3125rem !default;
|
||||
$input-btn-padding-x-sm: 0.5rem !default;
|
||||
$input-btn-font-size-sm: $h5-font-size !default;
|
||||
$input-btn-padding-x-sm: 0.25rem !default;
|
||||
$input-btn-padding-y-sm: 0.125rem - 0.0625rem !default;
|
||||
$input-btn-line-height-sm: 1rem !default;
|
||||
$input-btn-line-height-sm: divide(1rem, $input-btn-font-size-sm) !default;
|
||||
$input-btn-icon-size-sm: 1rem !default;
|
||||
|
||||
$input-btn-font-size-lg: $h2-font-size !default;
|
||||
$input-btn-padding-x-lg: 1.5rem !default;
|
||||
$input-btn-padding-y-lg: 0.75rem - 0.0625rem !default;
|
||||
$input-btn-line-height-lg: 2rem !default;
|
||||
$input-btn-icon-size-lg: 2rem !default;
|
||||
$input-btn-padding-y: 0.5625rem !default;
|
||||
$input-btn-padding-x: 1rem !default;
|
||||
$input-btn-line-height: 1.25rem !default;
|
||||
$input-btn-font-size: $font-size-base !default;
|
||||
$input-btn-icon-size: $icon-size !default;
|
||||
|
||||
$input-btn-padding-y-lg: 0.6875rem !default;
|
||||
$input-btn-padding-x-lg: 1.5rem !default;
|
||||
$input-btn-line-height-lg: 1.5rem !default;
|
||||
$input-btn-font-size-lg: $h3-font-size !default;
|
||||
$input-btn-icon-size-lg: 1.5rem !default;
|
||||
|
||||
$input-btn-padding-y-xl: 0.6875rem !default;
|
||||
$input-btn-padding-x-xl: 2rem !default;
|
||||
$input-btn-font-size-xl: $h1-font-size !default;
|
||||
$input-btn-line-height-xl: divide(2rem, $input-btn-font-size-lg) !default;
|
||||
$input-btn-icon-size-xl: 2rem !default;
|
||||
|
||||
$input-btn-focus-width: 0.25rem !default;
|
||||
|
||||
// Inputs
|
||||
$input-height: null !default;
|
||||
$input-height-sm: null !default;
|
||||
$input-height-lg: null !default;
|
||||
$input-border-radius: var(--#{$prefix}border-radius) !default;
|
||||
$input-padding-y: $input-btn-padding-y !default;
|
||||
$input-padding-x: $input-btn-padding-x !default;
|
||||
$input-color: var(--#{$prefix}body-color) !default;
|
||||
$input-focus-color: var(--#{$prefix}body-color) !default;
|
||||
$input-box-shadow: var(--#{$prefix}shadow-input) !default;
|
||||
|
||||
$input-border-width: $input-btn-border-width !default;
|
||||
$input-line-height: $input-btn-line-height !default;
|
||||
$input-height-border: calc(#{$input-border-width} * 2) !default;
|
||||
|
||||
$input-padding-y-sm: $input-btn-padding-y-sm !default;
|
||||
$input-padding-x-sm: $input-btn-padding-x-sm !default;
|
||||
$input-font-size-sm: $input-btn-font-size-sm !default;
|
||||
|
||||
$input-padding-y-lg: $input-btn-padding-y-lg !default;
|
||||
$input-padding-x-lg: $input-btn-padding-x-lg !default;
|
||||
$input-font-size-lg: $input-btn-font-size-lg !default;
|
||||
|
||||
$input-height-inner: add($input-line-height, calc($input-padding-y * 2)) !default;
|
||||
$input-height-inner-half: add($input-line-height, $input-padding-y) !default;
|
||||
$input-height-inner-quarter: add($input-line-height, calc($input-padding-y * 0.5)) !default;
|
||||
|
||||
$input-height: add($input-line-height, add(calc($input-padding-y * 2), $input-height-border, false)) !default;
|
||||
$input-height-sm: add($input-line-height, add(calc($input-padding-y-sm * 2), $input-height-border, false)) !default;
|
||||
$input-height-lg: add($input-line-height, add(calc($input-padding-y-lg * 2), $input-height-border, false)) !default;
|
||||
|
||||
// Buttons
|
||||
$btn-border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
|
||||
$btn-border-radius-lg: var(--#{$prefix}border-radius-lg) !default;
|
||||
|
||||
$btn-disabled-opacity: .4 !default;
|
||||
$btn-padding-x: 1rem !default;
|
||||
$btn-disabled-opacity: 0.4 !default;
|
||||
$btn-font-weight: var(--#{$prefix}font-weight-medium) !default;
|
||||
$btn-border-color: var(--#{$prefix}border-color) !default;
|
||||
$btn-border-radius: var(--#{$prefix}border-radius) !default;
|
||||
@@ -811,7 +846,7 @@ $navbar-toggler-focus-width: 0 !default;
|
||||
$navbar-overlap-height: 9rem !default;
|
||||
|
||||
$navbar-nav-link-padding-x: $nav-link-padding-x !default;
|
||||
$navbar-nav-link-hover-bg: rgba(0, 0, 0, .04) !default;
|
||||
$navbar-nav-link-hover-bg: rgba(0, 0, 0, 0.04) !default;
|
||||
|
||||
$navbar-active-border-color: var(--#{$prefix}primary) !default;
|
||||
|
||||
@@ -828,8 +863,8 @@ $popover-bg: var(--#{$prefix}bg-surface) !default;
|
||||
$popover-header-bg: transparent !default;
|
||||
$popover-border-color: var(--#{$prefix}border-color) !default;
|
||||
$popover-body-color: inherit !default;
|
||||
$popover-body-padding-x: .5rem !default;
|
||||
$popover-body-padding-y: .5rem !default;
|
||||
$popover-body-padding-x: 0.5rem !default;
|
||||
$popover-body-padding-y: 0.5rem !default;
|
||||
$popover-box-shadow: var(--#{$prefix}shadow-lg) !default;
|
||||
|
||||
// Footer
|
||||
@@ -896,7 +931,7 @@ $table-sort-desc-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org
|
||||
// Toasts
|
||||
$toast-border-color: var(--#{$prefix}border-color) !default;
|
||||
$toast-header-color: var(--#{$prefix}gray-500) !default;
|
||||
$toast-background-color: var(--#{$prefix}bg-surface) !default;
|
||||
$toast-background-color: var(--#{$prefix}bg-surface) !default;
|
||||
|
||||
// Tracking
|
||||
$tracking-height: 1.5rem !default;
|
||||
|
||||
@@ -1,39 +1,50 @@
|
||||
@keyframes pulse {
|
||||
from {
|
||||
opacity: 1;
|
||||
transform: scale3d(.8, .8, .8)
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale3d(1, 1, 1);
|
||||
opacity: 1
|
||||
14% {
|
||||
transform: scale(1.25);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale3d(.8, .8, .8)
|
||||
28% {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
42% {
|
||||
transform: scale(1.25);
|
||||
}
|
||||
|
||||
70% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes tada {
|
||||
0% {
|
||||
transform: scale3d(1, 1, 1)
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
|
||||
10%, 5% {
|
||||
transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -5deg)
|
||||
10%,
|
||||
5% {
|
||||
transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -5deg);
|
||||
}
|
||||
|
||||
15%, 25%, 35%, 45% {
|
||||
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 5deg)
|
||||
15%,
|
||||
25%,
|
||||
35%,
|
||||
45% {
|
||||
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 5deg);
|
||||
}
|
||||
|
||||
20%, 30%, 40% {
|
||||
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -5deg)
|
||||
20%,
|
||||
30%,
|
||||
40% {
|
||||
transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -5deg);
|
||||
}
|
||||
|
||||
50% {
|
||||
transform: scale3d(1, 1, 1)
|
||||
transform: scale3d(1, 1, 1);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -61,3 +72,27 @@
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes shake {
|
||||
0% {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
|
||||
20% {
|
||||
transform: scale3d(0.9, 0.9, 0.9) rotate(-5deg);
|
||||
}
|
||||
|
||||
50%,
|
||||
70%,
|
||||
90% {
|
||||
transform: scale3d(1.25, 1.25, 1.25) rotate(5deg);
|
||||
}
|
||||
|
||||
60%,
|
||||
80% {
|
||||
transform: scale3d(1.25, 1.25, 1.25) rotate(-5deg);
|
||||
}
|
||||
|
||||
to {
|
||||
transform: scaleX(1);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -160,7 +160,8 @@ Navbar
|
||||
&.navbar-vertical {
|
||||
box-shadow: inset calc(-1 * var(--#{$prefix}navbar-border-width)) 0 0 0 var(--#{$prefix}navbar-border-color);
|
||||
|
||||
&.navbar-right {
|
||||
&.navbar-right,
|
||||
&.navbar-end {
|
||||
box-shadow: inset calc(1 * var(--#{$prefix}navbar-border-width)) 0 0 0 var(--#{$prefix}navbar-border-color);
|
||||
}
|
||||
}
|
||||
@@ -172,7 +173,8 @@ Navbar
|
||||
}
|
||||
}
|
||||
|
||||
&.navbar-vertical.navbar-right {
|
||||
&.navbar-vertical.navbar-right,
|
||||
&.navbar-vertical.navbar-end {
|
||||
~ .navbar,
|
||||
~ .page-wrapper {
|
||||
margin-left: 0;
|
||||
@@ -219,14 +221,14 @@ Navbar toggler
|
||||
width: 1.25em;
|
||||
background: currentColor;
|
||||
border-radius: 10px;
|
||||
position: relative;
|
||||
@include transition(
|
||||
top $navbar-toggler-animation-time $navbar-toggler-animation-time,
|
||||
bottom $navbar-toggler-animation-time $navbar-toggler-animation-time,
|
||||
transform $navbar-toggler-animation-time,
|
||||
opacity 0s $navbar-toggler-animation-time
|
||||
);
|
||||
position: relative;
|
||||
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: "";
|
||||
@@ -318,11 +320,12 @@ Navbar vertical
|
||||
bottom: 0;
|
||||
z-index: $zindex-fixed;
|
||||
align-items: flex-start;
|
||||
@include transition(transform $transition-time);
|
||||
overflow-y: scroll;
|
||||
padding: 0;
|
||||
@include transition(transform $transition-time);
|
||||
|
||||
&.navbar-right {
|
||||
&.navbar-right,
|
||||
&.navbar-end {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
@@ -364,7 +367,8 @@ Navbar vertical
|
||||
}
|
||||
}
|
||||
|
||||
&.navbar-right ~ .page {
|
||||
&.navbar-right ~ .page,
|
||||
&.navbar-end ~ .page {
|
||||
padding-left: 0;
|
||||
padding-right: $sidebar-width;
|
||||
}
|
||||
|
||||
@@ -1,24 +1,46 @@
|
||||
@use "sass:math";
|
||||
|
||||
/**
|
||||
* Creates a lighter version of a theme color by mixing it with a background color
|
||||
*
|
||||
* @param {Color} $color - The base color to lighten
|
||||
* @param {Color} $background - The background color to mix with (default: #fff)
|
||||
* @return {Color} - The lighter version of the color (10% mix)
|
||||
*
|
||||
* @example
|
||||
* theme-color-lighter(#007bff) // Returns lighter blue
|
||||
* theme-color-lighter(#dc3545, #f8f9fa) // Returns lighter red mixed with light gray
|
||||
*/
|
||||
@function theme-color-lighter($color, $background: #fff) {
|
||||
@return mix($color, $background, 10%);
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates a darker version of a theme color by shading it
|
||||
*
|
||||
* @param {Color} $color - The base color to darken
|
||||
* @return {Color} - The darker version of the color (10% shade)
|
||||
*
|
||||
* @example
|
||||
* theme-color-darker(#007bff) // Returns darker blue
|
||||
* theme-color-darker(#28a745) // Returns darker green
|
||||
*/
|
||||
@function theme-color-darker($color) {
|
||||
@return shade-color($color, 10%);
|
||||
}
|
||||
|
||||
//
|
||||
// Replace all occurrences of a substring within a string.
|
||||
//
|
||||
@function str-replace($string, $search, $replace: "") {
|
||||
$index: str-index($string, $search);
|
||||
|
||||
@if $index {
|
||||
@return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
|
||||
}
|
||||
|
||||
@return $string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Media query mixin for breakpoints smaller than the specified breakpoint
|
||||
*
|
||||
* @param {String} $name - The breakpoint name to target
|
||||
* @param {Map} $breakpoints - The breakpoints map (default: $grid-breakpoints)
|
||||
* @content - The CSS content to apply within the media query
|
||||
*
|
||||
* @example
|
||||
* @include media-breakpoint-down-than(lg) {
|
||||
* .container { max-width: 100%; }
|
||||
* }
|
||||
*/
|
||||
@mixin media-breakpoint-down-than($name, $breakpoints: $grid-breakpoints) {
|
||||
$prev: breakpoint-prev($name);
|
||||
|
||||
@@ -37,6 +59,19 @@
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Gets the previous breakpoint name in the breakpoints map
|
||||
*
|
||||
* @param {String} $name - The current breakpoint name
|
||||
* @param {Map} $breakpoints - The breakpoints map (default: $grid-breakpoints)
|
||||
* @param {List} $breakpoint-names - List of breakpoint names (default: map-keys($breakpoints))
|
||||
* @return {String|null} - The previous breakpoint name or null if none exists
|
||||
*
|
||||
* @example
|
||||
* breakpoint-prev(lg) // Returns: md
|
||||
* breakpoint-prev(sm) // Returns: xs
|
||||
* breakpoint-prev(xs) // Returns: null
|
||||
*/
|
||||
@function breakpoint-prev($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
|
||||
$n: index($breakpoint-names, $name);
|
||||
@if not $n {
|
||||
@@ -45,9 +80,15 @@
|
||||
@return if($n > 1, nth($breakpoint-names, $n - 1), null);
|
||||
}
|
||||
|
||||
//
|
||||
// Escape SVG strings.
|
||||
//
|
||||
/**
|
||||
* Escapes special characters in SVG strings for use in CSS
|
||||
*
|
||||
* @param {String} $string - The SVG string to escape
|
||||
* @return {String} - The escaped SVG string
|
||||
*
|
||||
* @example
|
||||
* escape-svg("data:image/svg+xml,<svg>...</svg>") // Returns escaped SVG
|
||||
*/
|
||||
@function escape-svg($string) {
|
||||
@if str-index($string, "data:image/svg+xml") {
|
||||
@each $char, $encoded in $escaped-characters {
|
||||
@@ -68,9 +109,13 @@
|
||||
*
|
||||
* @param {Number} $value - The value to be converted to a percentage.
|
||||
* @return {String} - The percentage representation of the value.
|
||||
*
|
||||
* @example
|
||||
* to-percentage(0.5) // Returns: 50%
|
||||
* to-percentage(0.25) // Returns: 25%
|
||||
*/
|
||||
@function to-percentage($value) {
|
||||
@return if(unitless($value), percentage($value), $value);
|
||||
@return if(math.is-unitless($value), math.percentage($value), $value);
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -78,7 +123,12 @@
|
||||
*
|
||||
* @param {Color} $color - The base color to be made transparent.
|
||||
* @param {Number} $alpha - The level of transparency, ranging from 0 (fully transparent) to 1 (fully opaque). Default is 1.
|
||||
* @param {Color} $background - The background color to mix with (default: transparent)
|
||||
* @return {Color} - The resulting color with the specified transparency.
|
||||
*
|
||||
* @example
|
||||
* color-transparent(#007bff, 0.5) // Returns semi-transparent blue
|
||||
* color-transparent(#dc3545, 0.8) // Returns mostly opaque red
|
||||
*/
|
||||
@function color-transparent($color, $alpha: 1, $background: transparent) {
|
||||
@if $alpha == 1 {
|
||||
@@ -88,9 +138,18 @@
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Converts an SVG string to a data URL format for use in CSS
|
||||
*
|
||||
* @param {String} $svg - The SVG markup to convert
|
||||
* @return {String} - The data URL formatted SVG
|
||||
*
|
||||
* @example
|
||||
* url-svg('<svg>...</svg>') // Returns: url('data:image/svg+xml;charset=UTF-8,...')
|
||||
*/
|
||||
@function url-svg($svg) {
|
||||
$svg: str-replace($svg, '#', '%23');
|
||||
$svg: str-replace($svg, '<svg', '<svg xmlns="http://www.w3.org/2000/svg"');
|
||||
|
||||
@return url('data:image/svg+xml;charset=UTF-8,#{$svg}');
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,23 @@
|
||||
.breadcrumb {
|
||||
--#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x};
|
||||
--#{$prefix}breadcrumb-padding-y: #{$breadcrumb-padding-y};
|
||||
--#{$prefix}breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom};
|
||||
--#{$prefix}breadcrumb-font-size: #{$breadcrumb-font-size};
|
||||
--#{$prefix}breadcrumb-bg: #{$breadcrumb-bg};
|
||||
--#{$prefix}breadcrumb-border-radius: #{$breadcrumb-border-radius};
|
||||
--#{$prefix}breadcrumb-divider-color: #{$breadcrumb-divider-color};
|
||||
--#{$prefix}breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x};
|
||||
--#{$prefix}breadcrumb-item-active-color: #{$breadcrumb-active-color};
|
||||
--#{$prefix}breadcrumb-item-active-font-weight: #{$breadcrumb-active-font-weight};
|
||||
--#{$prefix}breadcrumb-item-disabled-color: #{$breadcrumb-disabled-color};
|
||||
--#{$prefix}breadcrumb-link-color: #{$breadcrumb-link-color};
|
||||
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@include font-size(var(--#{$prefix}breadcrumb-font-size));
|
||||
list-style: none;
|
||||
background-color: var(--#{$prefix}breadcrumb-bg);
|
||||
@include border-radius(var(--#{$prefix}breadcrumb-border-radius));
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: transparent;
|
||||
@@ -21,6 +37,7 @@
|
||||
|
||||
.breadcrumb-item {
|
||||
&.active {
|
||||
color: var(--#{$prefix}breadcrumb-item-active-color);
|
||||
font-weight: var(--#{$prefix}breadcrumb-item-active-font-weight);
|
||||
|
||||
a {
|
||||
@@ -41,6 +58,20 @@
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
& + & {
|
||||
padding-left: var(--#{$prefix}breadcrumb-item-padding-x);
|
||||
|
||||
&::before {
|
||||
float: left;
|
||||
padding-right: var(--#{$prefix}breadcrumb-item-padding-x);
|
||||
color: var(--#{$prefix}breadcrumb-divider-color);
|
||||
content: var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider));
|
||||
/*rtl:raw:
|
||||
transform: scaleX(-1);
|
||||
*/
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $name, $symbol in $breadcrumb-variants {
|
||||
|
||||
@@ -1,16 +1,17 @@
|
||||
@use "sass:color";
|
||||
@use "sass:map";
|
||||
|
||||
//
|
||||
// Button
|
||||
//
|
||||
.btn {
|
||||
--#{$prefix}btn-icon-size: #{$input-btn-icon-size};
|
||||
--#{$prefix}btn-icon-color: inherit;
|
||||
--#{$prefix}btn-bg: var(--#{$prefix}bg-surface);
|
||||
--#{$prefix}btn-color: var(--#{$prefix}body-color);
|
||||
--#{$prefix}btn-border-color: #{$btn-border-color};
|
||||
--#{$prefix}btn-hover-bg: var(--#{$prefix}btn-bg);
|
||||
--#{$prefix}btn-hover-border-color: var(--#{$prefix}border-active-color);
|
||||
--#{$prefix}btn-box-shadow: var(--#{$prefix}shadow-input);
|
||||
--#{$prefix}btn-active-color: #{$active-color};
|
||||
--#{$prefix}btn-active-bg: #{$active-bg};
|
||||
--#{$prefix}btn-active-border-color: #{$active-border-color};
|
||||
@@ -21,6 +22,9 @@
|
||||
white-space: nowrap;
|
||||
box-shadow: var(--#{$prefix}btn-box-shadow);
|
||||
position: relative;
|
||||
min-width: calc((var(--#{$prefix}btn-line-height) * 1) + (var(--#{$prefix}btn-padding-y) * 2) + (var(--#{$prefix}btn-border-width) * 2));
|
||||
min-height: calc((var(--#{$prefix}btn-line-height) * 1) + (var(--#{$prefix}btn-padding-y) * 2) + (var(--#{$prefix}btn-border-width) * 2));
|
||||
|
||||
|
||||
.icon {
|
||||
width: var(--#{$prefix}btn-icon-size);
|
||||
@@ -29,7 +33,7 @@
|
||||
font-size: var(--#{$prefix}btn-icon-size);
|
||||
margin: 0 calc(var(--#{$prefix}btn-padding-x) / 2) 0 calc(var(--#{$prefix}btn-padding-x) / -4);
|
||||
vertical-align: bottom;
|
||||
color: inherit;
|
||||
color: var(--#{$prefix}btn-icon-color);
|
||||
}
|
||||
|
||||
.avatar {
|
||||
@@ -38,7 +42,8 @@
|
||||
margin: 0 calc(var(--#{$prefix}btn-padding-x) / 2) 0 calc(var(--#{$prefix}btn-padding-x) / -4);
|
||||
}
|
||||
|
||||
.icon-right {
|
||||
.icon-right,
|
||||
.icon-end {
|
||||
margin: 0 calc(var(--#{$prefix}btn-padding-x) / -4) 0 calc(var(--#{$prefix}btn-padding-x) / 2);
|
||||
}
|
||||
|
||||
@@ -72,9 +77,9 @@
|
||||
//
|
||||
// Button color variations
|
||||
//
|
||||
@each $color, $value in map-merge($theme-colors, $social-colors) {
|
||||
@each $color, $value in map.merge($theme-colors, $social-colors) {
|
||||
.btn-#{$color} {
|
||||
@if $color == 'dark' {
|
||||
@if $color == "dark" {
|
||||
--#{$prefix}btn-border-color: var(--#{$prefix}dark-mode-border-color);
|
||||
--#{$prefix}btn-hover-border-color: var(--#{$prefix}dark-mode-border-active-color);
|
||||
--#{$prefix}btn-active-border-color: var(--#{$prefix}dark-mode-border-active-color);
|
||||
@@ -95,7 +100,8 @@
|
||||
--#{$prefix}btn-box-shadow: var(--#{$prefix}shadow-input);
|
||||
}
|
||||
|
||||
.btn-outline-#{$color} {
|
||||
.btn-outline-#{$color},
|
||||
.btn-outline.btn-#{$color} {
|
||||
--#{$prefix}btn-color: var(--#{$prefix}#{$color});
|
||||
--#{$prefix}btn-bg: transparent;
|
||||
--#{$prefix}btn-border-color: var(--#{$prefix}#{$color});
|
||||
@@ -104,11 +110,13 @@
|
||||
--#{$prefix}btn-hover-bg: var(--#{$prefix}#{$color});
|
||||
--#{$prefix}btn-active-color: var(--#{$prefix}#{$color}-fg);
|
||||
--#{$prefix}btn-active-bg: var(--#{$prefix}#{$color});
|
||||
--#{$prefix}btn-active-border-color: var(--#{$prefix}#{$color});
|
||||
--#{$prefix}btn-disabled-color: var(--#{$prefix}#{$color});
|
||||
--#{$prefix}btn-disabled-border-color: var(--#{$prefix}#{$color});
|
||||
}
|
||||
|
||||
.btn-ghost-#{$color} {
|
||||
.btn-ghost-#{$color},
|
||||
.btn-ghost.btn-#{$color} {
|
||||
--#{$prefix}btn-color: var(--#{$prefix}#{$color});
|
||||
--#{$prefix}btn-bg: transparent;
|
||||
--#{$prefix}btn-border-color: transparent;
|
||||
@@ -130,16 +138,27 @@
|
||||
//
|
||||
// Button sizes
|
||||
//
|
||||
.btn-sm, .btn-group-sm > .btn {
|
||||
.btn-sm,
|
||||
.btn-group-sm > .btn {
|
||||
--#{$prefix}btn-line-height: #{$input-btn-line-height-sm};
|
||||
--#{$prefix}btn-icon-size: #{$input-btn-icon-size-sm};
|
||||
}
|
||||
|
||||
.btn-lg, .btn-group-lg > .btn {
|
||||
.btn-lg,
|
||||
.btn-group-lg > .btn {
|
||||
--#{$prefix}btn-line-height: #{$input-btn-line-height-lg};
|
||||
--#{$prefix}btn-icon-size: #{$input-btn-icon-size-lg};
|
||||
}
|
||||
|
||||
.btn-xl,
|
||||
.btn-group-xl > .btn {
|
||||
--#{$prefix}btn-line-height: #{$input-btn-line-height-xl};
|
||||
--#{$prefix}btn-icon-size: #{$input-btn-icon-size-xl};
|
||||
--#{$prefix}btn-padding-y: #{$input-btn-padding-y-xl};
|
||||
--#{$prefix}btn-padding-x: #{$input-btn-padding-x-xl};
|
||||
--#{$prefix}btn-font-size: #{$input-btn-font-size-xl};
|
||||
}
|
||||
|
||||
//
|
||||
// Button shapes
|
||||
//
|
||||
@@ -160,9 +179,8 @@
|
||||
//
|
||||
// Icon button
|
||||
//
|
||||
.btn-icon {
|
||||
min-width: calc((var(--#{$prefix}btn-line-height) * var(--#{$prefix}btn-font-size)) + (var(--#{$prefix}btn-padding-y) * 2) + (var(--#{$prefix}btn-border-width) * 2));
|
||||
min-height: calc((var(--#{$prefix}btn-line-height) * var(--#{$prefix}btn-font-size)) + (var(--#{$prefix}btn-padding-y) * 2) + (var(--#{$prefix}btn-border-width) * 2));
|
||||
.btn-icon,
|
||||
.btn-action {
|
||||
padding-left: 0;
|
||||
padding-right: 0;
|
||||
|
||||
@@ -215,7 +233,7 @@
|
||||
height: var(--#{$prefix}btn-icon-size);
|
||||
left: calc(50% - var(--#{$prefix}btn-icon-size) / 2);
|
||||
top: calc(50% - var(--#{$prefix}btn-icon-size) / 2);
|
||||
animation: spinner-border .75s linear infinite;
|
||||
animation: spinner-border 0.75s linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -224,14 +242,7 @@
|
||||
//
|
||||
.btn-action {
|
||||
--#{$prefix}border-color: transparent;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
color: var(--#{$prefix}secondary);
|
||||
display: inline-flex;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: var(--#{$prefix}border-radius);
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
@@ -249,6 +260,7 @@
|
||||
&.show {
|
||||
color: var(--#{$prefix}body-color);
|
||||
background: var(--#{$prefix}active-bg);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
&.show {
|
||||
@@ -258,4 +270,65 @@
|
||||
|
||||
.btn-actions {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-animate-icon {
|
||||
.icon {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus-visible {
|
||||
.icon {
|
||||
transform: translateX(4px);
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-animate-icon-rotate {
|
||||
&:hover,
|
||||
&:focus-visible {
|
||||
.icon {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-animate-icon-move-start {
|
||||
&:hover,
|
||||
&:focus-visible {
|
||||
.icon {
|
||||
transform: translateX(-4px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-animate-icon-pulse {
|
||||
&:hover,
|
||||
&:focus-visible {
|
||||
.icon {
|
||||
transform: none;
|
||||
animation: pulse 0.9s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-animate-icon-shake {
|
||||
&:hover,
|
||||
&:focus-visible {
|
||||
.icon {
|
||||
transform: none;
|
||||
animation: shake 0.9s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.btn-animate-icon-tada {
|
||||
&:hover,
|
||||
&:focus-visible {
|
||||
.icon {
|
||||
transform: none;
|
||||
animation: tada 0.9s;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -111,11 +111,11 @@
|
||||
justify-content: center;
|
||||
padding: $card-spacer-y $card-spacer-x;
|
||||
text-align: center;
|
||||
@include transition(background $transition-time);
|
||||
border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
|
||||
flex: 1;
|
||||
color: inherit;
|
||||
font-weight: var(--#{$prefix}font-weight-medium);
|
||||
@include transition(background $transition-time);
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
@@ -215,11 +215,13 @@ Stacked card
|
||||
}
|
||||
|
||||
// Card rotate
|
||||
.card-rotate-left {
|
||||
.card-rotate-left,
|
||||
.card-rotate-start {
|
||||
transform: rotate(-1.5deg);
|
||||
}
|
||||
|
||||
.card-rotate-right {
|
||||
.card-rotate-right,
|
||||
.card-rotate-end {
|
||||
transform: rotate(1.5deg);
|
||||
}
|
||||
|
||||
|
||||
@@ -96,7 +96,7 @@
|
||||
|
||||
.dropend {
|
||||
> .dropdown-menu {
|
||||
margin-top: subtract(-$dropdown-padding-y, 1px);
|
||||
margin-top: subtract(calc(-1 * $dropdown-padding-y), 1px);
|
||||
margin-left: -.25rem;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@use "sass:map";
|
||||
|
||||
.row > * {
|
||||
min-width: 0;
|
||||
}
|
||||
@@ -17,8 +19,8 @@
|
||||
|
||||
@each $name, $value in (0: 0, sm: .375rem, md: 1.5rem, lg: 3rem) {
|
||||
.row-#{$name} {
|
||||
margin-right: (-$value);
|
||||
margin-left: -($value);
|
||||
margin-right: calc(-1 * $value);
|
||||
margin-left: calc(-1 * $value);
|
||||
|
||||
> .col,
|
||||
> [class*="col-"] {
|
||||
@@ -54,7 +56,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@each $name, $size in map-merge((null: $spacer), $spacers) {
|
||||
@each $name, $size in map.merge((null: $spacer), $spacers) {
|
||||
$name-prefixed: if($name == null, null, '-#{$name}');
|
||||
|
||||
.space-y#{$name-prefixed} {
|
||||
@@ -69,7 +71,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@each $name, $size in map-merge((null: $spacer), $spacers) {
|
||||
@each $name, $size in map.merge((null: $spacer), $spacers) {
|
||||
$name-prefixed: if($name == null, null, '-#{$name}');
|
||||
|
||||
.divide-y#{$name-prefixed} {
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
@use "sass:math";
|
||||
|
||||
.img-responsive {
|
||||
--#{$prefix}img-responsive-ratio: #{percentage(.75)};
|
||||
--#{$prefix}img-responsive-ratio: #{math.percentage(.75)};
|
||||
background: no-repeat center/cover;
|
||||
padding-top: var(--#{$prefix}img-responsive-ratio);
|
||||
}
|
||||
|
||||
@@ -30,14 +30,6 @@
|
||||
border-left-width: $border-width-wide;
|
||||
}
|
||||
|
||||
.list-group-item {
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: $dropdown-link-hover-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.list-group-item {
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
@@ -58,6 +50,14 @@
|
||||
}
|
||||
|
||||
.list-group-hoverable {
|
||||
.list-group-item {
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background-color: $dropdown-link-hover-bg;
|
||||
}
|
||||
}
|
||||
|
||||
.list-group-item-actions {
|
||||
opacity: 0;
|
||||
@include transition(opacity $transition-time);
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
}
|
||||
|
||||
&.nav-pills {
|
||||
margin: 0 (-$nav-link-padding-x);
|
||||
margin: 0 calc(-1 * $nav-link-padding-x);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -65,8 +65,8 @@
|
||||
|
||||
.nav-link {
|
||||
display: flex;
|
||||
@include transition(color $transition-time, background-color $transition-time);
|
||||
align-items: center;
|
||||
@include transition(color $transition-time, background-color $transition-time);
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
|
||||
@@ -9,10 +9,10 @@
|
||||
.page-link {
|
||||
min-width: 2rem;
|
||||
border-radius: var(--#{$prefix}pagination-border-radius);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--#{$prefix}pagination-hover-bg);
|
||||
}
|
||||
.page-item:not(.active) .page-link:hover {
|
||||
background: var(--#{$prefix}pagination-hover-bg);
|
||||
}
|
||||
|
||||
.page-text {
|
||||
@@ -68,4 +68,4 @@
|
||||
|
||||
.pagination-circle {
|
||||
--#{$prefix}pagination-border-radius: var(--tblr-border-radius-pill);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -7,7 +7,3 @@
|
||||
margin-left: .25rem;
|
||||
}
|
||||
}
|
||||
|
||||
.star {
|
||||
|
||||
}
|
||||
|
||||
@@ -122,7 +122,9 @@
|
||||
// Slide variant
|
||||
.switch-icon-slide-up,
|
||||
.switch-icon-slide-left,
|
||||
.switch-icon-slide-start,
|
||||
.switch-icon-slide-right,
|
||||
.switch-icon-slide-end,
|
||||
.switch-icon-slide-down {
|
||||
overflow: hidden;
|
||||
|
||||
@@ -150,7 +152,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
.switch-icon-slide-left {
|
||||
.switch-icon-slide-left,
|
||||
.switch-icon-slide-start {
|
||||
.switch-icon-a {
|
||||
transform: translateX(0);
|
||||
}
|
||||
@@ -170,7 +173,8 @@
|
||||
}
|
||||
}
|
||||
|
||||
.switch-icon-slide-right {
|
||||
.switch-icon-slide-right,
|
||||
.switch-icon-slide-end {
|
||||
.switch-icon-a {
|
||||
transform: translateX(0);
|
||||
}
|
||||
|
||||
@@ -112,10 +112,9 @@ Table sort
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-align: inherit;
|
||||
@include transition(color $transition-time);
|
||||
|
||||
margin: (-$table-th-padding-y) (-$table-th-padding-x);
|
||||
margin: calc(-1 * $table-th-padding-y) calc(-1 * $table-th-padding-x);
|
||||
padding: $table-th-padding-y $table-th-padding-x;
|
||||
@include transition(color $transition-time);
|
||||
|
||||
&:hover,
|
||||
&.asc,
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
@use "sass:map";
|
||||
|
||||
// All colors
|
||||
@each $color, $value in map-merge($theme-colors, ( white: $white)) {
|
||||
@each $color, $value in map.merge($theme-colors, ( white: $white)) {
|
||||
.bg-#{"" + $color} {
|
||||
background-color: color-mix(in srgb, var(--#{$prefix}#{$color}) calc(var(--#{$prefix}bg-opacity, 1) * 100%), transparent) !important;
|
||||
}
|
||||
|
||||
47
core/scss/utils/_hover.scss
Normal file
47
core/scss/utils/_hover.scss
Normal file
@@ -0,0 +1,47 @@
|
||||
%hover-animation {
|
||||
transition: transform 0.3s ease;
|
||||
|
||||
&:hover {
|
||||
will-change: transform;
|
||||
}
|
||||
}
|
||||
|
||||
.hover-elevate-up {
|
||||
@extend %hover-animation;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
}
|
||||
|
||||
.hover-elevate-down {
|
||||
@extend %hover-animation;
|
||||
|
||||
&:hover {
|
||||
transform: translateY(4px);
|
||||
}
|
||||
}
|
||||
|
||||
.hover-scale {
|
||||
@extend %hover-animation;
|
||||
|
||||
&:hover {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
.hover-rotate-end {
|
||||
@extend %hover-animation;
|
||||
|
||||
&:hover {
|
||||
transform: rotate(4deg);
|
||||
}
|
||||
}
|
||||
|
||||
.hover-rotate-start {
|
||||
@extend %hover-animation;
|
||||
|
||||
&:hover {
|
||||
transform: rotate(-4deg);
|
||||
}
|
||||
}
|
||||
4
core/scss/vendor/_nouislider.scss
vendored
4
core/scss/vendor/_nouislider.scss
vendored
@@ -33,8 +33,8 @@
|
||||
.noUi-horizontal & {
|
||||
width: $form-range-thumb-width;
|
||||
height: $form-range-thumb-height;
|
||||
top: (-$form-range-thumb-height * .5);
|
||||
right: (-$form-range-thumb-height * .5);
|
||||
top: calc($form-range-thumb-height * -.5);
|
||||
right: calc($form-range-thumb-height * -.5);
|
||||
margin: 1px 1px 0 0;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,18 +1,24 @@
|
||||
# @tabler/docs
|
||||
# Tabler Documentation Changelog
|
||||
|
||||
## 1.3.2
|
||||
## 1.4.0
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [446c34e]
|
||||
- @tabler/core@1.3.2
|
||||
|
||||
## 1.3.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [a7f73d7]
|
||||
- @tabler/core@1.3.1
|
||||
- 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
|
||||
|
||||
@@ -38,59 +44,3 @@
|
||||
- 5fa662b: Use color-input examples in documentation
|
||||
- 5619b2d: Fix `src` links to images in README and getting-started docs page
|
||||
- f8075f6: Add documentation for 3rd-party libraries and resources
|
||||
- Updated dependencies [cac5d92]
|
||||
- Updated dependencies [f94b153]
|
||||
- Updated dependencies [c127d65]
|
||||
- Updated dependencies [b6e9b18]
|
||||
- Updated dependencies [8850f61]
|
||||
- Updated dependencies [9910dd0]
|
||||
- Updated dependencies [638f36c]
|
||||
- Updated dependencies [0d501e9]
|
||||
- Updated dependencies [a1af801]
|
||||
- Updated dependencies [3a02ef9]
|
||||
- Updated dependencies [b9d434d]
|
||||
- Updated dependencies [fd0fd47]
|
||||
- Updated dependencies [74e5d26]
|
||||
- Updated dependencies [72a1d67]
|
||||
- Updated dependencies [bb617b8]
|
||||
- Updated dependencies [d73d78e]
|
||||
- Updated dependencies [19a3d20]
|
||||
- Updated dependencies [b5e2f54]
|
||||
- Updated dependencies [a41c956]
|
||||
- Updated dependencies [79bd867]
|
||||
- Updated dependencies [e675389]
|
||||
- Updated dependencies [9007e73]
|
||||
- @tabler/core@1.3.0
|
||||
|
||||
## 1.0.1
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- Updated dependencies [c59bc9d]
|
||||
- Updated dependencies [f9e4da2]
|
||||
- Updated dependencies [aea3b0a]
|
||||
- Updated dependencies [92a3afe]
|
||||
- Updated dependencies [3fc7b84]
|
||||
- Updated dependencies [199f39a]
|
||||
- Updated dependencies [2f8a372]
|
||||
- Updated dependencies [9fceadd]
|
||||
- Updated dependencies [44250db]
|
||||
- Updated dependencies [be1f3d1]
|
||||
- Updated dependencies [c20d076]
|
||||
- Updated dependencies [042e50f]
|
||||
- Updated dependencies [473fa38]
|
||||
- Updated dependencies [8646192]
|
||||
- Updated dependencies [922bb03]
|
||||
- Updated dependencies [44250db]
|
||||
- Updated dependencies [9bbcb99]
|
||||
- Updated dependencies [b17b488]
|
||||
- Updated dependencies [ddcd3a7]
|
||||
- Updated dependencies [e3d68d6]
|
||||
- Updated dependencies [215eaa4]
|
||||
- Updated dependencies [4846828]
|
||||
- Updated dependencies [6b6617a]
|
||||
- Updated dependencies [94bea00]
|
||||
- Updated dependencies [e14e492]
|
||||
- Updated dependencies [6d6d1bd]
|
||||
- Updated dependencies [6c566cf]
|
||||
- @tabler/core@1.2.0
|
||||
|
||||
@@ -100,12 +100,12 @@ You can use icons in badges to make them more visually appealing. The example be
|
||||
You can also use an icon on the right side of the badge. The example below demonstrates how to use icons on the right side of badges.
|
||||
|
||||
{% capture html -%}
|
||||
{% include "ui/badge.html" text="Star" icon-right="arrow-right" -%}
|
||||
{% include "ui/badge.html" text="Heart" icon-right="arrow-right" -%}
|
||||
{% include "ui/badge.html" text="Check" icon-right="arrow-right" -%}
|
||||
{% include "ui/badge.html" text="X" icon-right="arrow-right" -%}
|
||||
{% include "ui/badge.html" text="Plus" icon-right="arrow-right" -%}
|
||||
{% include "ui/badge.html" text="Minus" icon-right="arrow-right" -%}
|
||||
{% include "ui/badge.html" text="Star" icon-end="arrow-right" -%}
|
||||
{% include "ui/badge.html" text="Heart" icon-end="arrow-right" -%}
|
||||
{% include "ui/badge.html" text="Check" icon-end="arrow-right" -%}
|
||||
{% include "ui/badge.html" text="X" icon-end="arrow-right" -%}
|
||||
{% include "ui/badge.html" text="Plus" icon-end="arrow-right" -%}
|
||||
{% include "ui/badge.html" text="Minus" icon-end="arrow-right" -%}
|
||||
{%- endcapture %}
|
||||
{% include "docs/example.html" html=html centered %}
|
||||
|
||||
|
||||
@@ -409,6 +409,16 @@ Add the `.btn-loading` class to show a button's loading state, which can be usef
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html centered %}
|
||||
|
||||
## Full width buttons
|
||||
|
||||
Add the `.w-100` class to make buttons span the full width of their container. This is useful for mobile-first designs or when you want buttons to take up the entire available space.
|
||||
|
||||
{% capture html -%}
|
||||
<a href="#" class="btn btn-primary w-100">Full width button</a>
|
||||
<a href="#" class="btn btn-outline-secondary w-100">Full width outline button</a>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html separated %}
|
||||
|
||||
## List of buttons
|
||||
|
||||
Create a list of buttons using the `.btn-list` container to display different actions a user can take. If you add additional styling, such as colors, you will be able to focus users' attention on a particular action or suggest the result.
|
||||
@@ -476,6 +486,26 @@ Use the `.text-center` or the `.text-end` modifiers to change the buttons' align
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html %}
|
||||
|
||||
## Buttons with badges
|
||||
|
||||
Add badges to buttons to display additional information like counts, notifications, or status indicators. Badges automatically position themselves within the button layout.
|
||||
|
||||
{% capture html -%}
|
||||
<a href="#" class="btn">
|
||||
Notifications
|
||||
<span class="badge ms-2">14</span>
|
||||
</a>
|
||||
<a href="#" class="btn">
|
||||
Messages
|
||||
<span class="badge ms-2">3</span>
|
||||
</a>
|
||||
<a href="#" class="btn">
|
||||
Alerts
|
||||
<span class="badge ms-2">7</span>
|
||||
</a>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html centered %}
|
||||
|
||||
## Buttons with avatars
|
||||
|
||||
Use buttons with avatars to simplify the process of interaction and make your design more personalized. Buttons can contain avatars and labels or only avatars, if displayed on a smaller space.
|
||||
@@ -508,3 +538,142 @@ Use buttons with avatars to simplify the process of interaction and make your de
|
||||
</a>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html centered %}
|
||||
|
||||
## Buttons with animations on hover
|
||||
|
||||
Add a subtle animation effect to your buttons when users hover over them. This can enhance the interactivity and provide visual feedback to improve the user experience.
|
||||
|
||||
{% capture html -%}
|
||||
<div class="btn-list">
|
||||
<a class="btn btn-animate-icon">
|
||||
Save {% include "ui/icon.html" icon="arrow-right" class="icon-end" %}
|
||||
</a>
|
||||
<a class="btn btn-animate-icon btn-animate-icon-rotate">
|
||||
{% include "ui/icon.html" icon="plus" %} Add
|
||||
</a>
|
||||
<a class="btn btn-animate-icon btn-animate-icon-shake">
|
||||
{% include "ui/icon.html" icon="bell" %} Notifications
|
||||
</a>
|
||||
<a class="btn btn-animate-icon btn-animate-icon-rotate">
|
||||
{% include "ui/icon.html" icon="settings" %} Settings
|
||||
</a>
|
||||
<a class="btn btn-animate-icon btn-animate-icon-pulse">
|
||||
{% include "ui/icon.html" icon="heart" %} Love
|
||||
</a>
|
||||
<a class="btn btn-animate-icon btn-animate-icon-rotate">
|
||||
{% include "ui/icon.html" icon="x" %} Close
|
||||
</a>
|
||||
<a class="btn btn-animate-icon btn-animate-icon-tada">
|
||||
{% include "ui/icon.html" icon="check" %} Confirm
|
||||
</a>
|
||||
<a class="btn btn-animate-icon">
|
||||
Next {% include "ui/icon.html" icon="chevron-right" class="icon-end" %}
|
||||
</a>
|
||||
<a class="btn btn-animate-icon btn-animate-icon-move-start">
|
||||
{% include "ui/icon.html" icon="chevron-left" %} Previous
|
||||
</a>
|
||||
</div>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html %}
|
||||
|
||||
## Button sizes
|
||||
|
||||
Use size modifiers to change the size of your buttons. Available sizes: `.btn-xs`, `.btn-sm`, default, `.btn-lg`, `.btn-xl`.
|
||||
|
||||
{% capture html -%}
|
||||
<button type="button" class="btn btn-sm">Small button</button>
|
||||
<button type="button" class="btn">Default button</button>
|
||||
<button type="button" class="btn btn-lg">Large button</button>
|
||||
<button type="button" class="btn btn-xl">Extra large button</button>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html separated centered vertical %}
|
||||
|
||||
## Link buttons
|
||||
|
||||
Use the `.btn-link` class to create buttons that look like links but maintain button functionality. These are useful for secondary actions that shouldn't compete with primary buttons for attention.
|
||||
|
||||
{% capture html -%}
|
||||
<a href="#" class="btn btn-link">Link button</a>
|
||||
<button type="button" class="btn btn-link">Link button</button>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html centered %}
|
||||
|
||||
## Action buttons
|
||||
|
||||
Use the `.btn-action` class to create subtle action buttons that are perfect for card headers, toolbars, or other interface elements where you want minimal visual impact.
|
||||
|
||||
{% capture html -%}
|
||||
<div class="btn-actions">
|
||||
<a href="#" class="btn btn-action" aria-label="Edit">
|
||||
{%- include "ui/icon.html" icon="edit" -%}
|
||||
</a>
|
||||
<a href="#" class="btn btn-action" aria-label="Copy">
|
||||
{%- include "ui/icon.html" icon="copy" -%}
|
||||
</a>
|
||||
<a href="#" class="btn btn-action" aria-label="Settings">
|
||||
{%- include "ui/icon.html" icon="settings" -%}
|
||||
</a>
|
||||
<a href="#" class="btn btn-action" aria-label="Delete">
|
||||
{%- include "ui/icon.html" icon="trash" -%}
|
||||
</a>
|
||||
</div>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html centered %}
|
||||
|
||||
## Action button groups
|
||||
|
||||
Use the `.btn-actions` container to group multiple action buttons together. This creates a cohesive set of related actions that work well in card headers, toolbars, or other interface elements.
|
||||
|
||||
{% capture html -%}
|
||||
<div class="btn-actions">
|
||||
<a href="#" class="btn btn-action">
|
||||
{%- include "ui/icon.html" icon="refresh" -%}
|
||||
</a>
|
||||
<a href="#" class="btn btn-action">
|
||||
{%- include "ui/icon.html" icon="chevron-up" -%}
|
||||
</a>
|
||||
<a href="#" class="btn btn-action">
|
||||
{%- include "ui/icon.html" icon="dots-vertical" -%}
|
||||
</a>
|
||||
<a href="#" class="btn btn-action">
|
||||
{%- include "ui/icon.html" icon="x" -%}
|
||||
</a>
|
||||
</div>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html centered %}
|
||||
|
||||
## Button groups
|
||||
|
||||
Use button groups to combine related buttons together. Button groups are perfect for creating toolbars, segmented controls, or any interface where multiple related actions should be visually grouped.
|
||||
|
||||
{% capture html -%}
|
||||
<div class="btn-group" role="group">
|
||||
<button type="button" class="btn">Left</button>
|
||||
<button type="button" class="btn">Middle</button>
|
||||
<button type="button" class="btn">Right</button>
|
||||
</div>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html centered %}
|
||||
|
||||
{% capture html -%}
|
||||
<div class="btn-group" role="group">
|
||||
<input type="radio" class="btn-check" name="btn-radio" id="btn-radio-1" autocomplete="off" checked>
|
||||
<label class="btn" for="btn-radio-1">Radio 1</label>
|
||||
|
||||
<input type="radio" class="btn-check" name="btn-radio" id="btn-radio-2" autocomplete="off">
|
||||
<label class="btn" for="btn-radio-2">Radio 2</label>
|
||||
|
||||
<input type="radio" class="btn-check" name="btn-radio" id="btn-radio-3" autocomplete="off">
|
||||
<label class="btn" for="btn-radio-3">Radio 3</label>
|
||||
</div>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html centered %}
|
||||
|
||||
{% capture html -%}
|
||||
<div class="btn-group-vertical" role="group">
|
||||
<button type="button" class="btn">Top</button>
|
||||
<button type="button" class="btn">Middle</button>
|
||||
<button type="button" class="btn">Bottom</button>
|
||||
</div>
|
||||
{%- endcapture -%}
|
||||
{%- include "docs/example.html" html=html centered %}
|
||||
|
||||
@@ -175,7 +175,7 @@ You can also add a fancy animation to add variety to your button. See demo below
|
||||
</svg>
|
||||
</span>
|
||||
</button>
|
||||
<button class="switch-icon switch-icon-slide-right" data-bs-toggle="switch-icon">
|
||||
<button class="switch-icon switch-icon-slide-end" data-bs-toggle="switch-icon">
|
||||
<span class="switch-icon-a text-secondary">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
|
||||
@@ -28,17 +28,9 @@ Install Tabler in your Node.js powered apps with the npm package:
|
||||
|
||||
{% include "docs/tabs-package.html" name="@tabler/core" %}
|
||||
|
||||
## 3rd-party Libraries
|
||||
|
||||
Tabler uses other packages to enhance its functionality - for example, charts and input masks. These are not automatically installed to avoid huge
|
||||
dependency trees and need to be installed by using npm install. We support the following packages as of writing.
|
||||
|
||||
- [apexcharts](https://apexcharts.com/)
|
||||
- [autosize](http://www.jacklmoore.com/autosize/)
|
||||
- [choices.js](https://github.com/Choices-js/Choices)
|
||||
- [countup.js](https://inorganik.github.io/countUp.js/)
|
||||
- [flatpickr](https://flatpickr.js.org/)
|
||||
- [imask](https://imask.js.org/)
|
||||
- [litepicker](https://litepicker.com/)
|
||||
- [nouislider](https://refreshless.com/nouislider/)
|
||||
- [tom-select](https://tom-select.js.org/)
|
||||
|
||||
For the complete list of supported packages you can check the peerDependencies section in our [package.json](https://github.com/tabler/tabler/blob/dev/package.json)
|
||||
dependency trees and need to be installed by using `npm install`. The full list of recommended libraries is available on the
|
||||
[3rd-party Libraries & Resources](/ui/getting-started/references) page.
|
||||
For the most recent list of supported packages, you can also check the [libs.json](https://github.com/tabler/tabler/blob/dev/core/libs.json) file.
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@tabler/docs",
|
||||
"version": "1.3.2",
|
||||
"version": "1.4.0",
|
||||
"description": "",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
@@ -25,11 +25,11 @@
|
||||
"author": "",
|
||||
"license": "ISC",
|
||||
"devDependencies": {
|
||||
"@11ty/eleventy": "^3.1.0",
|
||||
"@11ty/eleventy": "^3.1.2",
|
||||
"@docsearch/css": "^3.9.0",
|
||||
"@docsearch/js": "^3.9.0",
|
||||
"flat-cache": "^6.1.8",
|
||||
"shiki": "^3.2.2"
|
||||
"flat-cache": "^6.1.11",
|
||||
"shiki": "^3.7.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tabler/core": "workspace:*"
|
||||
|
||||
BIN
docs/public/favicon-dev.ico
Normal file
BIN
docs/public/favicon-dev.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
@@ -3,6 +3,7 @@
|
||||
:root {
|
||||
--docsearch-primary-color: var(--tblr-primary);
|
||||
--docsearch-searchbox-background: var(--tblr-bg-surface);
|
||||
--docsearch-searchbox-focus-background: var(--tblr-bg-surface);
|
||||
--docsearch-text-color: var(--tblr-body-text);
|
||||
--docsearch-key-shadow: 0 0 0 1px var(--tblr-border-color);
|
||||
--docsearch-key-gradient: var(--tblr-bg-surface-secondary);
|
||||
@@ -25,6 +26,80 @@
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.DocSearch-SearchBar {
|
||||
display: flex;
|
||||
padding: var(--docsearch-spacing) var(--docsearch-spacing) 0;
|
||||
background-color: var(--tblr-bg-surface) !important;
|
||||
}
|
||||
|
||||
.DocSearch-Hit-source {
|
||||
background: none !important;
|
||||
}
|
||||
|
||||
.DocSearch-Dropdown {
|
||||
background-color: var(--tblr-bg-surface) !important;
|
||||
}
|
||||
|
||||
.DocSearch-Hit a {
|
||||
background-color: var(--tblr-bg-surface-secondary) !important;
|
||||
border: 1px solid var(--tblr-border-color) !important;
|
||||
color: var(--tblr-body-color) !important;
|
||||
box-shadow: none !important;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--tblr-bg-surface-tertiary) !important;
|
||||
border-color: var(--tblr-border-color-active) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.DocSearch-Hit-Container {
|
||||
color: var(--tblr-body-color) !important;
|
||||
}
|
||||
|
||||
.DocSearch-Hit-title {
|
||||
color: var(--tblr-body-color) !important;
|
||||
}
|
||||
|
||||
.DocSearch-Hit-path {
|
||||
color: var(--tblr-muted) !important;
|
||||
}
|
||||
|
||||
.DocSearch-Hit[aria-selected="true"] a {
|
||||
background-color: var(--tblr-primary) !important;
|
||||
border-color: var(--tblr-primary) !important;
|
||||
color: var(--tblr-primary-fg) !important;
|
||||
}
|
||||
|
||||
.DocSearch-Hit[aria-selected="true"] .DocSearch-Hit-Container,
|
||||
.DocSearch-Hit[aria-selected="true"] .DocSearch-Hit-title,
|
||||
.DocSearch-Hit[aria-selected="true"] .DocSearch-Hit-path {
|
||||
color: var(--tblr-primary-fg) !important;
|
||||
}
|
||||
|
||||
.DocSearch-Modal {
|
||||
background-color: var(--tblr-bg-surface) !important;
|
||||
box-shadow: var(--tblr-shadow-dropdown) !important;
|
||||
}
|
||||
|
||||
.DocSearch-Form {
|
||||
background-color: var(--tblr-bg-surface-secondary) !important;
|
||||
border: 1px solid var(--tblr-border-color) !important;
|
||||
}
|
||||
|
||||
.DocSearch-Input {
|
||||
color: var(--tblr-body-color) !important;
|
||||
|
||||
&::placeholder {
|
||||
color: var(--tblr-muted) !important;
|
||||
}
|
||||
}
|
||||
|
||||
.DocSearch-Footer {
|
||||
background-color: var(--tblr-bg-surface) !important;
|
||||
border-top: 1px solid var(--tblr-border-color) !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
.DocSearch-Button-Key {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
34
package.json
34
package.json
@@ -14,37 +14,39 @@
|
||||
"zip-package": "node .build/zip-package.mjs",
|
||||
"start": "pnpm dev"
|
||||
},
|
||||
"packageManager": "pnpm@10.11.0",
|
||||
"packageManager": "pnpm@10.12.4",
|
||||
"dependencies": {
|
||||
"shx": "^0.4.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@argos-ci/playwright": "^5.0.3",
|
||||
"@argos-ci/playwright": "^5.0.5",
|
||||
"@changesets/changelog-github": "^0.5.1",
|
||||
"@changesets/cli": "^2.29.4",
|
||||
"@playwright/test": "^1.52.0",
|
||||
"@changesets/cli": "^2.29.5",
|
||||
"@playwright/test": "^1.53.2",
|
||||
"@rollup/plugin-babel": "^6.0.4",
|
||||
"@rollup/plugin-commonjs": "^28.0.3",
|
||||
"@rollup/plugin-commonjs": "^28.0.6",
|
||||
"@rollup/plugin-node-resolve": "^16.0.1",
|
||||
"@rollup/plugin-replace": "^6.0.2",
|
||||
"adm-zip": "^0.5.16",
|
||||
"autoprefixer": "^10.4.21",
|
||||
"bundlewatch": "^0.4.1",
|
||||
"clean-css-cli": "^5.6.3",
|
||||
"concurrently": "^9.1.2",
|
||||
"concurrently": "^9.2.0",
|
||||
"cross-env": "^7.0.3",
|
||||
"fs-extra": "^11.3.0",
|
||||
"glob": "^11.0.2",
|
||||
"glob": "^11.0.3",
|
||||
"js-beautify": "^1.15.4",
|
||||
"nodemon": "^3.1.10",
|
||||
"pnpm": "10.6.5",
|
||||
"postcss": "^8.5.3",
|
||||
"pnpm": "^10.6.5",
|
||||
"postcss": "^8.5.6",
|
||||
"postcss-cli": "^11.0.1",
|
||||
"prettier": "^3.5.3",
|
||||
"rollup": "4.40.2",
|
||||
"prettier": "^3.6.2",
|
||||
"rollup": "4.44.2",
|
||||
"rollup-plugin-dotenv": "^0.5.1",
|
||||
"rtlcss": "^4.3.0",
|
||||
"sass": "1.71.0",
|
||||
"sass": "1.89.2",
|
||||
"shelljs": "^0.10.0",
|
||||
"shx": "^0.4.0",
|
||||
"terser": "^5.39.2",
|
||||
"turbo": "^2.5.3"
|
||||
"terser": "^5.43.1",
|
||||
"turbo": "^2.5.4"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
1070
pnpm-lock.yaml
generated
1070
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@@ -1,5 +1,23 @@
|
||||
# @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
|
||||
@@ -19,26 +37,3 @@
|
||||
### Patch Changes
|
||||
|
||||
- 8850f61: Enhance pagination component with new styles
|
||||
- Updated dependencies [cac5d92]
|
||||
- Updated dependencies [f94b153]
|
||||
- Updated dependencies [c127d65]
|
||||
- Updated dependencies [b6e9b18]
|
||||
- Updated dependencies [8850f61]
|
||||
- Updated dependencies [9910dd0]
|
||||
- Updated dependencies [638f36c]
|
||||
- Updated dependencies [0d501e9]
|
||||
- Updated dependencies [a1af801]
|
||||
- Updated dependencies [3a02ef9]
|
||||
- Updated dependencies [b9d434d]
|
||||
- Updated dependencies [fd0fd47]
|
||||
- Updated dependencies [74e5d26]
|
||||
- Updated dependencies [72a1d67]
|
||||
- Updated dependencies [bb617b8]
|
||||
- Updated dependencies [d73d78e]
|
||||
- Updated dependencies [19a3d20]
|
||||
- Updated dependencies [b5e2f54]
|
||||
- Updated dependencies [a41c956]
|
||||
- Updated dependencies [79bd867]
|
||||
- Updated dependencies [e675389]
|
||||
- Updated dependencies [9007e73]
|
||||
- @tabler/core@1.3.0
|
||||
|
||||
@@ -22,6 +22,7 @@ export default function (eleventyConfig) {
|
||||
eleventyConfig.addPassthroughCopy({
|
||||
"node_modules/@tabler/core/dist": "dist",
|
||||
"pages/favicon.ico": "favicon.ico",
|
||||
"pages/favicon-dev.ico": "favicon-dev.ico",
|
||||
"static": "static",
|
||||
});
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@tabler/preview",
|
||||
"version": "1.3.2",
|
||||
"version": "1.4.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"build": "pnpm run clean && pnpm run css && pnpm run js && pnpm run html",
|
||||
@@ -31,13 +31,13 @@
|
||||
"zip": "mkdir -p packages-zip && zip -r packages-zip/tabler-$(node -p \"require('./package.json').version\").zip demo/*"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@11ty/eleventy": "^3.1.0",
|
||||
"@11ty/eleventy": "^3.1.1",
|
||||
"imageoptim-cli": "^3.1.9",
|
||||
"request": "^2.88.2"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tabler/core": "workspace:*",
|
||||
"@tabler/icons": "^3.31.0"
|
||||
"@tabler/icons": "^3.34.1"
|
||||
},
|
||||
"prettier": {
|
||||
"tabWidth": 2,
|
||||
|
||||
@@ -6,12 +6,12 @@ layout: default
|
||||
permalink: activity.html
|
||||
---
|
||||
|
||||
<div class="row justify-content-center">
|
||||
<div class="row">
|
||||
<div class="col-8">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
{% include "parts/activity.html" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -7,91 +7,177 @@ permalink: buttons.html
|
||||
---
|
||||
|
||||
<div class="row row-cards">
|
||||
<div class="col-12">
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Standard Buttons</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{% include "parts/buttons-table.html" show-link=true show-states=true %}
|
||||
<div class="btn-list">
|
||||
{% for color in site.themeColors %}
|
||||
<a class="btn btn-{{ color[0] }}">{% include "ui/icon.html" icon=color[1].icon %} {{ color[1].title }}</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Outline Buttons</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>Use <code>.btn-outline-*</code> class for outline buttons.
|
||||
</p>
|
||||
{% include "parts/buttons-table.html" prefix="btn-outline-" show-states=true %}
|
||||
<div class="btn-list">
|
||||
{% for color in site.themeColors %}
|
||||
<a class="btn btn-outline btn-{{ color[0] }}">{% include "ui/icon.html"
|
||||
icon=color[1].icon %} {{ color[1].title }}</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Ghost Buttons</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>Use <code>.btn-ghost-*</code> class for ghost buttons.
|
||||
</p>
|
||||
{% include "parts/buttons-table.html" prefix="btn-ghost-" show-states=true %}
|
||||
<div class="btn-list">
|
||||
{% for color in site.themeColors %}
|
||||
<a class="btn btn-ghost btn-{{ color[0] }}">{% include "ui/icon.html"
|
||||
icon=color[1].icon %} {{ color[1].title }}</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Square Buttons</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>Use <code>.btn-square</code> class for square buttons.
|
||||
</p>
|
||||
{% include "parts/buttons-table.html" class="btn-square" show-states=true %}
|
||||
<div class="btn-list">
|
||||
{% for color in site.themeColors %}
|
||||
<a class="btn btn-square btn-{{ color[0] }}">
|
||||
{% include "ui/icon.html" icon=color[1].icon %} {{ color[1].title }}
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Pill Buttons</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<p>Use <code>.btn-pill</code> class for pill buttons.
|
||||
</p>
|
||||
{% include "parts/buttons-table.html" class="btn-pill" show-states=true %}
|
||||
<div class="btn-list">
|
||||
{% for color in site.themeColors %}
|
||||
<a class="btn btn-pill btn-{{ color[0] }}">
|
||||
{% include "ui/icon.html" icon=color[1].icon %} {{ color[1].title }}
|
||||
</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Extra colors</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{% include "parts/buttons-table.html" variants=site.colors hide-labels=true icon="star" auto-columns=true %}
|
||||
<div class="btn-list">
|
||||
{% for color in site.colors %}
|
||||
<a class="btn btn-{{ color[0] }}">{% include "ui/icon.html"
|
||||
icon=color[1].icon %} {{ color[1].title }}</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Icon buttons</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{% include "parts/buttons-table.html" variants=site.socialColors hide-labels=true icon-only=true auto-columns=true %}
|
||||
<div class="btn-list">
|
||||
{% for app in site.socialColors %}
|
||||
<a class="btn btn-icon btn-{{ app[0] }}">{% include "ui/icon.html" icon=app[1].icon %}</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Social colors</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
{% include "parts/buttons-table.html" variants=site.socialColors hide-labels=true icon=true auto-columns=true %}
|
||||
<div class="btn-list">
|
||||
{% for app in site.socialColors %}
|
||||
<a class="btn btn-{{ app[0] }}">{% include "ui/icon.html" icon=app[1].icon %} {{ app[1].title }}</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% assign actions = 'edit,copy,settings,clipboard,x' | split: ',' %}
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Action buttons</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="btn-actions">
|
||||
{% for action in actions %}
|
||||
<a class="btn btn-action">{% include "ui/icon.html" icon=action %}</a>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Buttons with icon</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="btn-list">
|
||||
<a class="btn btn-animate-icon">Save {% include "ui/icon.html" icon="arrow-right" class="icon-end" %}</a>
|
||||
<a class="btn btn-animate-icon btn-animate-icon-rotate">{% include "ui/icon.html" icon="plus" %} Add</a>
|
||||
<a class="btn btn-animate-icon btn-animate-icon-shake">{% include "ui/icon.html" icon="bell" %} Notifications</a>
|
||||
<a class="btn btn-animate-icon btn-animate-icon-rotate">{% include "ui/icon.html" icon="settings" %} Settings</a>
|
||||
<a class="btn btn-animate-icon btn-animate-icon-pulse">{% include "ui/icon.html" icon="heart" %} Love</a>
|
||||
<a class="btn btn-animate-icon btn-animate-icon-rotate">{% include "ui/icon.html" icon="x" %} Close</a>
|
||||
<a class="btn btn-animate-icon btn-animate-icon-tada">{% include "ui/icon.html" icon="check" %} Confirm</a>
|
||||
<a class="btn btn-animate-icon">Next {% include "ui/icon.html" icon="chevron-right" class="icon-end" %}</a>
|
||||
<a class="btn btn-animate-icon btn-animate-icon-move-start">{% include "ui/icon.html" icon="chevron-left" %} Previous</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Buttons size</h3>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="space-y">
|
||||
{% assign sizes = 'sm,md,lg,xl' | split: ',' %}
|
||||
{% for size in sizes %}
|
||||
<div class="btn-list">
|
||||
{% include "ui/button.html" size=size text="Button" %}
|
||||
{% include "ui/button.html" size=size icon="star" icon-only %}
|
||||
{% include "ui/button.html" size=size icon="star" text="Button" %}
|
||||
{% include "ui/button.html" size=size icon-end="star" text="Button" %}
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -62,13 +62,13 @@ permalink: cards.html
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="card card-rotate-right">
|
||||
<div class="card-body">Card rotate right</div>
|
||||
<div class="card card-rotate-end">
|
||||
<div class="card-body">Card rotate end</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="card card-rotate-left">
|
||||
<div class="card-body">Card rotate left</div>
|
||||
<div class="card card-rotate-start">
|
||||
<div class="card-body">Card rotate start</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
@@ -127,7 +127,7 @@ permalink: cards.html
|
||||
{% include "cards/card.html" status-bottom="success" title="Card with bottom status" %}
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
{% include "cards/card.html" status-left="primary" title="Card with side status" %}
|
||||
{% include "cards/card.html" status-start="primary" title="Card with side status" %}
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-3">
|
||||
|
||||
@@ -57,7 +57,7 @@ permalink: emails.html
|
||||
<div class="row g-0">
|
||||
<div class="col-6">
|
||||
<div class="p-6 bg-surface-secondary rounded-start">
|
||||
<img src="" class="img-fluid rounded-left" data-email-image />
|
||||
<img src="" class="img-fluid rounded-start" data-email-image />
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
|
||||
BIN
preview/pages/favicon-dev.ico
Normal file
BIN
preview/pages/favicon-dev.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
@@ -45,7 +45,7 @@ permalink: form-elements.html
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="card">
|
||||
<div class="card h-100">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Project ID</h3>
|
||||
<p class="card-subtitle">Used when interacting with the API.</p>
|
||||
@@ -80,13 +80,13 @@ permalink: form-elements.html
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-6">
|
||||
<div class="col-12 col-lg-4">
|
||||
{% include "cards/form/layout.html" %}
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4">
|
||||
<div class="col-lg-8">
|
||||
<div class="row row-cards">
|
||||
<div class="col-12">
|
||||
<div class="col-12 col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">Input mask</h3>
|
||||
@@ -127,8 +127,8 @@ permalink: form-elements.html
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<form class="card">
|
||||
<div class="col-12 col-lg-6">
|
||||
<form class="card h-100">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">My Profile</h3>
|
||||
</div>
|
||||
@@ -168,9 +168,9 @@ permalink: form-elements.html
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-lg-8">
|
||||
<div class="col-lg-12">
|
||||
<div class="row row-cards">
|
||||
<div class="col-12">
|
||||
<div class="col-12 col-lg-6">
|
||||
<form class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Edit Profile</h3>
|
||||
@@ -250,8 +250,8 @@ But that's the difference in our opinions.</textarea>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="card">
|
||||
<div class="col-12 col-lg-6">
|
||||
<div class="card h-100">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">HTTP Request</h3>
|
||||
</div>
|
||||
|
||||
@@ -103,7 +103,7 @@ page-libs: [litepicker]
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{% include "ui/button.html" color="primary" block text="Send Message" icon-right="arrow-right" %}
|
||||
{% include "ui/button.html" color="primary" block text="Send Message" icon-end="arrow-right" %}
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
@@ -148,7 +148,7 @@ page-libs: [litepicker]
|
||||
{% include "ui/form/check.html" title="Remember me" class="m-0" %}
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
{% include "ui/button.html" color="primary" text="Create Account" icon-right="arrow-right" %}
|
||||
{% include "ui/button.html" color="primary" text="Create Account" icon-end="arrow-right" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
page-header: Right vertical layout
|
||||
page-menu: layout.vertical-right
|
||||
page-menu: layout.vertical-end
|
||||
layout-sidebar: true
|
||||
layout-sidebar-right: true
|
||||
layout-sidebar-end: true
|
||||
layout-hide-topbar: true
|
||||
layout: homepage
|
||||
permalink: layout-vertical-right.html
|
||||
|
||||
@@ -13,12 +13,6 @@ signaturePad.fromDataURL("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3
|
||||
|
||||
|
||||
{% capture advanced-js %}
|
||||
function randomColor() {
|
||||
const r = Math.round(Math.random() * 255);
|
||||
const g = Math.round(Math.random() * 255);
|
||||
const b = Math.round(Math.random() * 255);
|
||||
return `rgb(${r},${g},${b})`;
|
||||
}
|
||||
|
||||
function download(dataURL, filename) {
|
||||
const blob = dataURLToBlob(dataURL);
|
||||
@@ -49,9 +43,8 @@ function dataURLToBlob(dataURL) {
|
||||
return new Blob([uInt8Array], { type: contentType });
|
||||
}
|
||||
|
||||
|
||||
document.querySelector("#signature-advanced-color").addEventListener("click", function () {
|
||||
signaturePad.penColor = randomColor();
|
||||
document.querySelector("#signature-advanced-color").addEventListener("input", function (e) {
|
||||
signaturePad.penColor = e.target.value;
|
||||
});
|
||||
|
||||
document.querySelector("#signature-advanced-svg").addEventListener("click", function () {
|
||||
@@ -112,7 +105,7 @@ document.querySelector("#signature-advanced-png").addEventListener("click", func
|
||||
<div class="mt-4">
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<button href="" class="btn w-100" id="signature-advanced-color">Change color</button>
|
||||
<input href="" type="color" id="signature-advanced-color" class="w-100 form-control form-control-color" />
|
||||
</div>
|
||||
<div class="col">
|
||||
<button href="" class="btn w-100" id="signature-advanced-svg">Download SVG</button>
|
||||
|
||||
9
preview/scss/_config.scss
Normal file
9
preview/scss/_config.scss
Normal file
@@ -0,0 +1,9 @@
|
||||
$prefix: "tblr-";
|
||||
$demo-icon-size: 4rem;
|
||||
|
||||
$color-highlight-green: #b5f4a5;
|
||||
$color-highlight-yellow: #ffe484;
|
||||
$color-highlight-purple: #d9a9ff;
|
||||
$color-highlight-red: #ff8383;
|
||||
$color-highlight-blue: #93ddfd;
|
||||
$color-highlight-gray: #a0aec0;
|
||||
@@ -1,16 +1,11 @@
|
||||
$color-highlight-green: #b5f4a5;
|
||||
$color-highlight-yellow: #ffe484;
|
||||
$color-highlight-purple: #d9a9ff;
|
||||
$color-highlight-red: #ff8383;
|
||||
$color-highlight-blue: #93ddfd;
|
||||
$color-highlight-gray: #a0aec0;
|
||||
@use "config";
|
||||
|
||||
pre.highlight,
|
||||
.highlight pre {
|
||||
max-height: 30rem;
|
||||
margin: 1.5rem 0;
|
||||
overflow: auto;
|
||||
border-radius: var(--#{$prefix}border-radius);
|
||||
border-radius: var(--#{config.$prefix}border-radius);
|
||||
}
|
||||
|
||||
.highlight {
|
||||
@@ -21,10 +16,10 @@ pre.highlight,
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
.c, .c1 { color: $color-highlight-gray; }
|
||||
.nt, .nc, .nx { color: $color-highlight-red; }
|
||||
.na, .p { color: $color-highlight-yellow; }
|
||||
.s, .dl, .s2 { color: $color-highlight-green; }
|
||||
.k { color: $color-highlight-blue; }
|
||||
.s1, .mi { color: $color-highlight-purple; }
|
||||
.c, .c1 { color: config.$color-highlight-gray; }
|
||||
.nt, .nc, .nx { color: config.$color-highlight-red; }
|
||||
.na, .p { color: config.$color-highlight-yellow; }
|
||||
.s, .dl, .s2 { color: config.$color-highlight-green; }
|
||||
.k { color: config.$color-highlight-blue; }
|
||||
.s1, .mi { color: config.$color-highlight-purple; }
|
||||
}
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
$prefix: "tblr-";
|
||||
|
||||
@import "highlight";
|
||||
@use "config";
|
||||
@use "highlight";
|
||||
|
||||
.dropdown-menu-demo {
|
||||
display: inline-block;
|
||||
@@ -45,7 +44,6 @@ $prefix: "tblr-";
|
||||
}
|
||||
}
|
||||
|
||||
$demo-icon-size: 4rem;
|
||||
.demo-icons-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@@ -54,7 +52,7 @@ $demo-icon-size: 4rem;
|
||||
list-style: none;
|
||||
|
||||
> * {
|
||||
flex: 1 0 $demo-icon-size;
|
||||
flex: 1 0 config.$demo-icon-size;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -70,10 +68,8 @@ $demo-icon-size: 4rem;
|
||||
aspect-ratio: 1;
|
||||
text-align: center;
|
||||
padding: 0.5rem;
|
||||
border-right: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
|
||||
var(--#{$prefix}border-color);
|
||||
border-bottom: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
|
||||
var(--#{$prefix}border-color);
|
||||
border-right: var(--#{config.$prefix}border-width) var(--#{config.$prefix}border-style) var(--#{config.$prefix}border-color);
|
||||
border-bottom: var(--#{config.$prefix}border-width) var(--#{config.$prefix}border-style) var(--#{config.$prefix}border-color);
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
|
||||
@@ -86,4 +82,4 @@ $demo-icon-size: 4rem;
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,56 +1,162 @@
|
||||
[
|
||||
{
|
||||
"text": "<strong>%p</strong> commented on your <strong>\"I'm not a witch.\"</strong> post."
|
||||
"text": "<strong>%p</strong> commented on your post: <strong>Not everything is what it seems</strong>",
|
||||
"icon": "message-circle"
|
||||
},
|
||||
{
|
||||
"text": "It's <strong>%p</strong>'s birthday. Wish him well!"
|
||||
"text": "It's <strong>%p</strong>'s birthday today",
|
||||
"icon": "cake"
|
||||
},
|
||||
{
|
||||
"text": "<strong>%p</strong> posted <strong>\"Well, what do you want?\"</strong>."
|
||||
"text": "<strong>%p</strong> posted a status: <strong>Trying to figure things out one step at a time.</strong>",
|
||||
"icon": "pencil"
|
||||
},
|
||||
{
|
||||
"text": "<strong>%p</strong> created a new project <strong>Morning alarm clock</strong>."
|
||||
"text": "<strong>%p</strong> created a new project: <strong>Smart Morning Alarm</strong>",
|
||||
"icon": "alarm"
|
||||
},
|
||||
{
|
||||
"text": "<strong>%p</strong> liked your photo."
|
||||
"text": "<strong>%p</strong> liked your photo",
|
||||
"icon": "heart"
|
||||
},
|
||||
{
|
||||
"text": "<strong>%p</strong> registered new client as <strong>%c</strong>."
|
||||
"text": "<strong>%p</strong> registered a new client: <strong>Trilia Solutions</strong>",
|
||||
"icon": "user-plus"
|
||||
},
|
||||
{
|
||||
"text": "<strong>%p</strong> closed a new deal on project <strong>Pen Pineapple Apple Pen</strong>."
|
||||
"text": "<strong>%p</strong> closed a new deal on project: <strong>PPAP Campaign Strategy</strong>",
|
||||
"icon": "handshake"
|
||||
},
|
||||
{
|
||||
"text": "<strong>%p</strong> created a new project for <strong>%c</strong>."
|
||||
"text": "<strong>%p</strong> created a new project: <strong>Wikibox Knowledge Platform</strong>",
|
||||
"icon": "folder-plus"
|
||||
},
|
||||
{
|
||||
"text": "<strong>%p</strong> change status of <strong>Tabler Icons</strong> from <strong>open</strong> to <strong>closed</strong>."
|
||||
"text": "<strong>%p</strong> changed project status of <strong>Tabler Icons</strong> from <strong>open</strong> to <strong>closed</strong>",
|
||||
"icon": "check"
|
||||
},
|
||||
{
|
||||
"text": "<strong>%p</strong> liked <strong>Tabler UI Kit</strong>."
|
||||
"text": "<strong>%p</strong> liked the <strong>Tabler UI Kit</strong>",
|
||||
"icon": "thumb-up"
|
||||
},
|
||||
{
|
||||
"text": "<strong>%p</strong> posted new video."
|
||||
"text": "<strong>%p</strong> shared a new video: <strong>Design Tips for Busy Creators</strong>",
|
||||
"icon": "video"
|
||||
},
|
||||
{
|
||||
"text": "<strong>%p</strong> and 3 others followed you."
|
||||
"text": "<strong>%p</strong> and <strong>3 others</strong> followed you",
|
||||
"icon": "user-plus"
|
||||
},
|
||||
{
|
||||
"text": "<strong>%p</strong> upload 3 new photos to category <strong>Inspirations</strong>."
|
||||
"text": "<strong>%p</strong> uploaded <strong>3 new photos</strong> to category: <strong>Creative Inspirations</strong>",
|
||||
"icon": "photo"
|
||||
},
|
||||
{
|
||||
"text": "<strong>%p</strong> made a <strong>$10</strong> donation."
|
||||
"text": "<strong>%p</strong> made a <strong>$10 donation</strong>",
|
||||
"icon": "coin"
|
||||
},
|
||||
{
|
||||
"text": "<strong>%p</strong> created a profile."
|
||||
"text": "<strong>%p</strong> created a profile",
|
||||
"icon": "id"
|
||||
},
|
||||
{
|
||||
"text": "<strong>%p</strong> hosted the event <strong>Tabler UI Birthday</strong>."
|
||||
"text": "<strong>%p</strong> hosted the event: <strong>Tabler UI Anniversary</strong>",
|
||||
"icon": "calendar-event"
|
||||
},
|
||||
{
|
||||
"text": "<strong>%p</strong> mentioned you on <strong>Best of 2020</strong>."
|
||||
"text": "<strong>%p</strong> mentioned you in <strong>Best of 2020 Highlights</strong>",
|
||||
"icon": "at"
|
||||
},
|
||||
{
|
||||
"text": "<strong>%p</strong> sent a Review Request to <strong>Amanda Blake</strong>."
|
||||
"text": "<strong>%p</strong> sent a review request to <strong>Amanda Blake</strong>",
|
||||
"icon": "send"
|
||||
},
|
||||
{
|
||||
"text": "<strong>%p</strong> posted a photo from her vacation in <strong>Tuscany</strong>",
|
||||
"icon": "camera"
|
||||
},
|
||||
{
|
||||
"text": "<strong>%p</strong> shared an article: <strong>Top 10 productivity hacks</strong>",
|
||||
"icon": "book"
|
||||
},
|
||||
{
|
||||
"text": "<strong>%p</strong> commented on your photo",
|
||||
"icon": "message-circle"
|
||||
},
|
||||
{
|
||||
"text": "<strong>%p</strong> joined the group: <strong>UX Designers Hub</strong>",
|
||||
"icon": "users"
|
||||
},
|
||||
{
|
||||
"text": "<strong>%p</strong> uploaded new design mockups",
|
||||
"icon": "layout"
|
||||
},
|
||||
{
|
||||
"text": "<strong>%p</strong> reacted with ❤️ to your story",
|
||||
"icon": "emoji-heart-eyes"
|
||||
},
|
||||
{
|
||||
"text": "<strong>%p</strong> posted a video: <strong>Building Better Dashboards</strong>",
|
||||
"icon": "video"
|
||||
},
|
||||
{
|
||||
"text": "<strong>%p</strong> joined your webinar: <strong>Intro to TypeScript</strong>",
|
||||
"icon": "presentation"
|
||||
},
|
||||
{
|
||||
"text": "<strong>%p</strong> commented: <strong>This is so helpful!</strong>",
|
||||
"icon": "message-circle"
|
||||
},
|
||||
{
|
||||
"text": "<strong>%p</strong> updated her profile photo",
|
||||
"icon": "user-edit"
|
||||
},
|
||||
{
|
||||
"text": "<strong>%p</strong> posted a job listing: <strong>Frontend Developer</strong>",
|
||||
"icon": "briefcase"
|
||||
},
|
||||
{
|
||||
"text": "<strong>%p</strong> started following your project: <strong>Clean Code Patterns</strong>",
|
||||
"icon": "code"
|
||||
},
|
||||
{
|
||||
"text": "<strong>%p</strong> gave feedback on your latest design",
|
||||
"icon": "message-check"
|
||||
},
|
||||
{
|
||||
"text": "<strong>%p</strong> shared a playlist: <strong>Coding Flow</strong>",
|
||||
"icon": "music"
|
||||
},
|
||||
{
|
||||
"text": "<strong>%p</strong> joined the event: <strong>Night UI Meetup</strong>",
|
||||
"icon": "calendar-plus"
|
||||
},
|
||||
{
|
||||
"text": "<strong>%p</strong> shared a memory: <strong>2 years at Tabler!</strong>",
|
||||
"icon": "history"
|
||||
},
|
||||
{
|
||||
"text": "<strong>%p</strong> retweeted your latest post",
|
||||
"icon": "repeat"
|
||||
},
|
||||
{
|
||||
"text": "<strong>%p</strong> shared your story to their network",
|
||||
"icon": "share"
|
||||
},
|
||||
{
|
||||
"text": "<strong>%p</strong> invited you to collaborate on her workspace",
|
||||
"icon": "user-plus"
|
||||
},
|
||||
{
|
||||
"text": "<strong>%p</strong> published a new blog post: <strong>Dark Mode for All</strong>",
|
||||
"icon": "article"
|
||||
},
|
||||
{
|
||||
"text": "<strong>%p</strong> mentioned you in a comment",
|
||||
"icon": "at"
|
||||
},
|
||||
{
|
||||
"text": "<strong>%p</strong> shared a new design: <strong>Modern Dashboard UI</strong>",
|
||||
"icon": "layout"
|
||||
}
|
||||
]
|
||||
@@ -1 +1 @@
|
||||
{"version":"3.31.0","count":5880}
|
||||
{"version":"3.34.1","count":5945}
|
||||
File diff suppressed because one or more lines are too long
@@ -1 +1 @@
|
||||
["weightlifting","wait","vr","video","valentines-day-love","valentines-day-heart","valentines-day-gift","to-do","tiredness","telescope","snowman","shopping","shield","searching-for-a-signal","search","project","printer","payment","not-found","new-year","new-year-2","neutral-info","music","morning","mobile-computer","message","map-destination","loading","kite","icons","icons-workshop","icons-production","icons-ladder","icons-drawing","icons-drawing-run","ice-skates","halloween-pumpkin","guitar","good-news","good-info","girl-refresh","girl-phone","gift","ghost","folders","flowers","fingerprint","exit","error","email","electric-scooter","easter-egg","easter-bunny","discount","dart","dance","conversation","computer-fix","clock-and-cat","christmas-tree","christmas-gifts","christmas-fireplace","chill","chill-sofa","chart","chart-circle","cat","calendar","building","boy","boy-with-key","boy-refresh","boy-gives-flowers","boy-girl","boy-and-laptop","boy-and-cat","bicycle","bad-news","archive","ai"]
|
||||
["weightlifting","wait","vr","video","valentines-day-love","valentines-day-heart","valentines-day-gift","to-do","tiredness","telescope","snowman","shopping","shield","searching-for-a-signal","search","project","printer","podcast","payment","painting","not-found","new-year","new-year-2","neutral-info","music","morning","mobile-computer","message","map-destination","loading","kite","icons","icons-workshop","icons-production","icons-ladder","icons-drawing","icons-drawing-run","ice-skates","hybrid-work","halloween-pumpkin","guitar","good-news","good-info","girl-refresh","girl-phone","gift","ghost","folders","flowers","fingerprint","exit","error","email","electric-scooter","easter-egg","easter-bunny","discount","dart","dance","conversation","computer-fix","clock-and-cat","christmas-tree","christmas-gifts","christmas-fireplace","chill","chill-sofa","chart","chart-circle","cat","calendar","building","boy","boy-with-key","boy-refresh","boy-gives-flowers","boy-girl","boy-and-laptop","boy-and-cat","bicycle","bad-news","archive","ai","500","403"]
|
||||
@@ -1,22 +1,22 @@
|
||||
{
|
||||
"css": "sha384-p5xrK2AiivdjrNPtu162Vv179cyFHJY2I4Mb0NZVR8Wn2aqSGUm7zlFFjM8jAzeD",
|
||||
"css-rtl": "sha384-22IGd0xp1gk5BQwuhYqr8qUmsv65cwTzenvc19bvq5PYduXkWE8gUUruxIr/ZPsn",
|
||||
"css-flags": "sha384-fStl5MKxnUStSlpPiHGSFmUTTzr2KEY7jtgmvTswVDaQJ+sLbmEF+26m57M2sbCm",
|
||||
"css-flags-rtl": "sha384-i8KVpZYtpnZDkTYzaYlaeiF91VNnmyORipMLZh6hKGh5Jj80QN6962xlHQPkx/xr",
|
||||
"css-marketing": "sha384-IILX0Nea/+/hbVhEsrQ/djsqtSJmb4CM9hPzWd7Yh8hzbyYp4N/4hWMQL5kIPEuZ",
|
||||
"css-marketing-rtl": "sha384-7Dd3GLSNiOzFuAZAtMfOFdsgtQ2xiOowOOvPMaC9+sZ7t+9jzN2tajuQLPekqH2K",
|
||||
"css-payments": "sha384-ZRk1rNf2hqzIWoHspDzfWz8bKW1dr1odUHzmItwuijP60huklItYuva1cveYhRs5",
|
||||
"css-payments-rtl": "sha384-TI7r4R+53giBkEHQMbhBrUTK58fdyoNij2PR7ICQkIt9W3fW9aXoknm9oqyyU0TK",
|
||||
"css-socials": "sha384-rYtfgzcCz11iyODxSKx70JwR+bSIYiIcjSzvRMppIC/s3uSfW787ZBJpOI9mk2VD",
|
||||
"css-socials-rtl": "sha384-UpQExKWGunZHqL3L6jEETXHpj5JWIxk8bhxJJmAr8FP/hTUojs4GMCg7omu2DJ5n",
|
||||
"css-props": "sha384-nlhMcpecw2dK6NPM09rxtOrZVkLNoTrRsf7dSC65VBmWBJT5pIkTyeA1k2+qbq+V",
|
||||
"css-props-rtl": "sha384-Voq7oikM1MGBKKotIvWP3THYoINUMEQurBmKseurzXaiMzL3KPlbQXhbI4tHPKHU",
|
||||
"css-themes": "sha384-o3qxqNUMd6NW7wethAfo4ur0TF8cgmbdTRrUHwryoxEpy3DNmt5MWoCHRlJlX/zD",
|
||||
"css-themes-rtl": "sha384-er5SohDm2dJxg5UhUf1RI96jOlVA7RwgVm5++ribGoWmjds4MntkV6Mxg66xCQQg",
|
||||
"css-vendors-rtl": "sha384-tHbMgNpCKXcS6jHEZNTL3D8vphnCwUbnP37Mu3sihnvXRk47xUWU6VYDIO8kMyr3",
|
||||
"css-vendors": "sha384-Fo//Kmhz1EIFHbqRN5ZnLePKoXW3c4MjGg1DVOrvwTlQNfC2rKRflTBS1degq6n6",
|
||||
"js": "sha384-PHMhDo1ZcalIgfBhQzaXnIBa6xdPJ8iQTzHd+WVAeoI/O2Xq3OuElAo7PyEYTqMg",
|
||||
"js-theme": "sha384-3Z3TIkq5YSKOncCfiURX/S03AUHfI0nVzd39uRc9KLhtLi7M228qgWBjnRXwt2j0",
|
||||
"css": "sha384-cmnQUMuv5iff5IGgJhlGbkdjxkm5YhgCRNr0dnJCn7AzRfL4ZzLy40ErHuvOuHYd",
|
||||
"css-rtl": "sha384-bXCvE3Xmz3jclb6GLOrtqQmT4Pia0o7yhSVzS3rarqYvFojdIGn7vYUtl7BJPEAX",
|
||||
"css-flags": "sha384-kmvP0hkBXZ2hMSZlbvE1Q2HIXzPCQRL3ijUeqNiwaPd2nl2Aks+s3gW+V5fAHOX9",
|
||||
"css-flags-rtl": "sha384-Q/h6koANGclsGnwB8rvF8h84H54NKHDeNWFj6yiE4WLLEXyHcz+Zu6Afkh2ssYTC",
|
||||
"css-marketing": "sha384-4dAlYnPzCom9yeC/5++PFq2FG/szJRlUPsDSrjZ3EWP8IAzK7g7rrsnSfqrS67Se",
|
||||
"css-marketing-rtl": "sha384-c6gNhuNYjp+lqluSdArbL8ciLEBq7IVU00XnPM2Eogj8RAjMapccvOM/pGhk3vV6",
|
||||
"css-payments": "sha384-xWIXbKxPLGG/ZEGUKxDjJn3xmUgd2PC2CSZUKJ4PyTse49DiuvJx2WT5wSNJRyw9",
|
||||
"css-payments-rtl": "sha384-69CxgA+uEPtM07SLA8MMAdnBmwtVGndDJf8nIPdfvNrDayBfPqOK3wS3nvV5yyk+",
|
||||
"css-socials": "sha384-eWmz8gyiLzrDw3JcT/PJxjGyKizQjvByfHqocjrMMkIrbKFCnOuP/qMwAz3bHmsC",
|
||||
"css-socials-rtl": "sha384-yobKDIyTOxB1z7t/uZ2ImuXrcKWF24vDYg2vR1n7x2msF09iWnvyIxQtfEl9+OFl",
|
||||
"css-props": "sha384-B4d12qdv8aSJS3AgmNo1S5vyuwHi2+be2xN8QLM8OC1MSH9Qws/EgfHwaP7enhCE",
|
||||
"css-props-rtl": "sha384-y1dHdb/2gNZApz4MeXx3dEQ9jBWVpIoDfVp3AY7etyJjF/tMT333DoxOmgKzc2P+",
|
||||
"css-themes": "sha384-jTe/MdN6BlY4S3eYe6Qw++yTjuezmVnxWp/l7GAG1qXGC+jttphHqsAN/bGPvJOk",
|
||||
"css-themes-rtl": "sha384-WTp4aZ+OGqnkNR6Xe0sJwwfd0JHGq3dZTLU2ITKxTK2zjcJTBUMY/+Z4eXgm8ipF",
|
||||
"css-vendors-rtl": "sha384-V555LUGE2xyN4wNbzdVMgsajsKmJdlLFm20Ws72jEyPiSsTXXITV0PebNzVeBjnb",
|
||||
"css-vendors": "sha384-+X7+c/noY2B9ieq9daEaVStkUhIFyJTO5T6Occ6jZisx57sbECetvloLqcvGahUv",
|
||||
"js": "sha384-pku3birjgGovaJ9ngF7SaxKkF/eYUvBjiMJ+jTtWbNesIj2Rud2K63+4JD7EF4gk",
|
||||
"js-theme": "sha384-SoDJmj40r6f9Rfxi6Fq+bNS8ofhlZMyxHk9dq9Y8e1M17PZGkBRN/XUpx8swn0i5",
|
||||
"demo-css": "sha384-BUDq2P684xwRBf0GDlySvob+KJg4ko8y2K7njgvYBscmEuqoVVqJ75zcTDozwkFA",
|
||||
"demo-js": "sha384-UcTgbM9IZSOPHHuFa0R9H4TegQWoZkJKpeTjLV5hjem2k0CZ67Q4/bW2rT/Edf4Z"
|
||||
}
|
||||
@@ -14,8 +14,8 @@
|
||||
<div class="card-status-top bg-{{ include.status-top | default: 'blue' }}"></div>
|
||||
{% elsif include.status-bottom %}
|
||||
<div class="card-status-bottom bg-{{ include.status-bottom | default: 'blue' }}"></div>
|
||||
{% elsif include.status-left %}
|
||||
<div class="card-status-start bg-{{ include.status-left | default: 'blue' }}"></div>
|
||||
{% elsif include.status-start %}
|
||||
<div class="card-status-start bg-{{ include.status-start | default: 'blue' }}"></div>
|
||||
{% endif %}
|
||||
|
||||
{% if include.header or include.header-title or include.header-tabs or include.header-pills %}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{% assign horizontal = include.horizontal | default: false %}
|
||||
<form class="card">
|
||||
<form class="card h-100">
|
||||
<div class="card-header">
|
||||
<h3 class="card-title">{{ include.title | default: 'Basic form' }}</h3>
|
||||
</div>
|
||||
@@ -64,6 +64,9 @@
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<div class="text-end">
|
||||
<button type="submit" class="btn btn-primary">Submit</button>
|
||||
</div>
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
</div>
|
||||
<div class="flex-fill">
|
||||
<div>
|
||||
<small class="float-right text-secondary">4 min</small>
|
||||
<small class="float-end text-secondary">4 min</small>
|
||||
<h4>{{ people[4].first_name }} {{ people[4].last_name }}</h4>
|
||||
</div>
|
||||
|
||||
@@ -55,7 +55,7 @@
|
||||
</div>
|
||||
<div class="flex-fill">
|
||||
<div>
|
||||
<small class="float-right text-secondary">12 min</small>
|
||||
<small class="float-end text-secondary">12 min</small>
|
||||
<h4>{{ people[10].first_name }} {{ people[10].last_name }}</h4>
|
||||
</div>
|
||||
<div>
|
||||
@@ -72,7 +72,7 @@
|
||||
</div>
|
||||
<div class="flex-fill">
|
||||
<div>
|
||||
<small class="float-right text-secondary">34 min</small>
|
||||
<small class="float-end text-secondary">34 min</small>
|
||||
<h4>{{ people[14].first_name }} {{ people[14].last_name }}</h4>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
|
||||
<div class="card" data-color={{color}}>
|
||||
<div class="card-body">
|
||||
<div class="float-right avatar{% if include.color %} bg-{{ include.color }}{% if include.light %}-lt{% else %} text-white{% endif %}{% endif %}">
|
||||
<div class="float-end avatar{% if include.color %} bg-{{ include.color }}{% if include.light %}-lt{% else %} text-white{% endif %}{% endif %}">
|
||||
{% include "ui/icon.html" icon=icon %}
|
||||
</div>
|
||||
<div class="text-secondary fw-normal mt-0">{{ include.title | default: 'Customers' }}</div>
|
||||
|
||||
@@ -25,7 +25,7 @@
|
||||
{% include "ui/icon.html" icon=include.small-icon color=include.color class="icon-sm ms-1" %}
|
||||
{% endif %}
|
||||
{% if include.description-value %}
|
||||
<span class="float-right font-weight-medium text-{{ include.description-value-color | default: 'green' }}">{{ include.description-value }}</span>
|
||||
<span class="float-end font-weight-medium text-{{ include.description-value-color | default: 'green' }}">{{ include.description-value }}</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="text-secondary">
|
||||
|
||||
@@ -30,10 +30,10 @@
|
||||
</td>
|
||||
<td>
|
||||
<div class="clearfix">
|
||||
<div class="float-left">
|
||||
<div class="float-start">
|
||||
<strong>{{ percentage }}%</strong>
|
||||
</div>
|
||||
<div class="float-right">
|
||||
<div class="float-end">
|
||||
<small class="text-secondary">Jun 11, 2015 - Jul 10, 2015</small>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -12,5 +12,10 @@
|
||||
<!-- BEGIN DEMO SCRIPTS -->
|
||||
<script src="{{ page | relative }}/preview/js/demo{% if environment != 'development' %}.min{% endif %}.js{% if environment != 'development' %}?{{ 'now' | date: '%s' }}{% endif %}" defer></script>
|
||||
<!-- END DEMO SCRIPTS -->
|
||||
|
||||
{% if environment == 'preview' %}
|
||||
<script src="https://scripts.tabler.io/banner.js" defer data-tblr-ref="tabler-preview-top-banner"></script>
|
||||
{% endif %}
|
||||
|
||||
|
||||
{% scripts %}
|
||||
@@ -64,7 +64,7 @@
|
||||
{% include "ui/icon.html" icon="settings" %}
|
||||
</span>
|
||||
<span class="nav-link-title">
|
||||
Settings
|
||||
Theme Settings
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{% assign breakpoint = include.breakpoint | default: 'lg' %}
|
||||
|
||||
<aside class="navbar navbar-vertical{% if include.right %} navbar-right{% endif %} navbar-expand-{{ breakpoint }}{% if include.transparent %} navbar-transparent{% endif %}{% if include.background %} bg-{{ include.background }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}"{% if include.background-color %} style="background: {{ include.background-color }}"{% endif %}{% if include.dark %} data-bs-theme="dark"{% endif %}>
|
||||
<aside class="navbar navbar-vertical{% if include.end %} navbar-end{% endif %} navbar-expand-{{ breakpoint }}{% if include.transparent %} navbar-transparent{% endif %}{% if include.background %} bg-{{ include.background }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}"{% if include.background-color %} style="background: {{ include.background-color }}"{% endif %}{% if include.dark %} data-bs-theme="dark"{% endif %}>
|
||||
<div class="container-fluid">
|
||||
{% include "layout/navbar-toggler.html" target="sidebar-menu" %}
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<p class="text-secondary">Lorem ipsum dolor sit amet consectetur adipisicing elit. Sunt, ipsa? Voluptates sunt, ipsum esse quis obcaecati atque placeat consectetur beatae, tenetur ducimus iure minima expedita recusandae doloribus nam. Pariatur, facilis?</p>
|
||||
<div class="btn-list justify-content-center mt-6">
|
||||
{% include "ui/button.html" text="Get started" color="primary" %}
|
||||
{% include "ui/button.html" text="Learn more" ghost=true icon-right="chevron-right" %}
|
||||
{% include "ui/button.html" text="Learn more" ghost=true icon-end="chevron-right" %}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
@@ -1,34 +0,0 @@
|
||||
{% assign prefix = include.prefix | default: 'btn-' %}
|
||||
{% assign show-link = include.show-link | default: false %}
|
||||
{% assign show-states = include.show-states | default: false %}
|
||||
{% assign hide-labels = include.hide-labels | default: false %}
|
||||
{% assign variants = include.variants | default: site.themeColors %}
|
||||
|
||||
{% for state in site.buttonStates %}
|
||||
{% if show-states or state.class != 'active' and state.class != 'disabled' %}
|
||||
<div class="row g-2 align-items-center">
|
||||
{% unless hide-labels %}<div class="col-12 col-xl-2 font-weight-semibold">{{ state.title }}</div>{% endunless %}
|
||||
{% for variant in variants %}
|
||||
{% if show-link or variant[0] != 'link' %}
|
||||
<div class="col-6 col-sm-4 col-md-2 col-xl{% if include.auto-columns %}-auto{% endif %}{% if variant[0] == 'light' %} bg-dark{% endif %} py-3">
|
||||
{% if include.icon or include.icon-only %}
|
||||
{% assign icon = variant[1].icon %}
|
||||
{% endif %}
|
||||
|
||||
{% assign class = prefix | append: variant[0] %}
|
||||
{% if state.class %}
|
||||
{% assign class = class | append: ' ' | append: state.class %}
|
||||
{% endif %}
|
||||
{% if include.class %}
|
||||
{% assign class = class | append: ' ' | append: include.class %}
|
||||
{% endif %}
|
||||
|
||||
{% assign text = variant[1].title %}
|
||||
{% assign color = variant[0] %}
|
||||
{% include "ui/button.html" block=true color=false class=class icon=icon icon-only=include.icon-only text=text %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
@@ -12,7 +12,7 @@
|
||||
<div class="h-2 {% if config.topmenu-dark %}bg-dark{% else %}border-bottom bg-white{% endif %}"></div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if config.sidebar-right %}
|
||||
{% if config.sidebar-end %}
|
||||
<div class="{% if config.sidebar-narrow %}col-auto w-2{% else %}col-3{% endif %} {% if config.sidebar-dark %}bg-dark{% else %}border-start bg-white{% endif %}"></div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
<div class="settings">
|
||||
<a href="#" class="btn btn-floating btn-icon btn-primary" data-bs-toggle="offcanvas" data-bs-target="#offcanvasSettings" aria-controls="offcanvasSettings" aria-label="Theme Builder">
|
||||
<a href="#" class="btn btn-floating btn-icon btn-primary" data-bs-toggle="offcanvas" data-bs-target="#offcanvasSettings" aria-controls="offcanvasSettings" aria-label="Theme Settings">
|
||||
{% include "ui/icon.html" icon="brush" %}
|
||||
</a>
|
||||
|
||||
<form class="offcanvas offcanvas-start offcanvas-narrow" tabindex="-1" id="offcanvasSettings">
|
||||
<div class="offcanvas-header">
|
||||
<h2 class="offcanvas-title">Theme Builder</h2>
|
||||
<h2 class="offcanvas-title">Theme Settings</h2>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="offcanvas-body d-flex flex-column">
|
||||
@@ -96,8 +96,7 @@
|
||||
Reset changes
|
||||
</button>
|
||||
<a href="#" class="btn btn-primary w-100" data-bs-dismiss="offcanvas">
|
||||
{% include "ui/icon.html" icon="settings" %}
|
||||
Save settings
|
||||
Save
|
||||
</a>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -24,6 +24,6 @@
|
||||
{% if include.icon %}{% include "ui/icon.html" icon=include.icon color=include.icon-color %}{% endif %}
|
||||
{% unless include.icon-only %}
|
||||
{{ include.text | default: "Button" }}{% if include.dots %}<span class="animated-dots"></span>{% endif %}
|
||||
{% if include.icon-right %}{% include "ui/icon.html" icon=include.icon-right class="icon-right" %}{% endif %}
|
||||
{% if include.icon-end %}{% include "ui/icon.html" icon=include.icon-end class="icon-end" %}{% endif %}
|
||||
{% endunless %}
|
||||
</{{ e }}>
|
||||
@@ -13,7 +13,6 @@
|
||||
height: 300,
|
||||
menubar: false,
|
||||
statusbar: false,
|
||||
license_key: 'gpl',
|
||||
plugins: [
|
||||
'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview', 'anchor',
|
||||
'searchreplace', 'visualblocks', 'code', 'fullscreen',
|
||||
@@ -40,4 +39,4 @@
|
||||
{%- capture_script %}
|
||||
{{ script }}
|
||||
{% endcapture_script %}
|
||||
{% endremoveemptylines %}
|
||||
{% endremoveemptylines %}
|
||||
|
||||
@@ -22,14 +22,17 @@
|
||||
<meta name="HandheldFriendly" content="True"/>
|
||||
<meta name="MobileOptimized" content="320"/>
|
||||
|
||||
<link rel="icon" href="{{ page | relative }}/favicon.ico" type="image/x-icon"/>
|
||||
<link rel="icon" href="{{ page | relative }}/favicon.ico" type="image/x-icon" />
|
||||
<link rel="shortcut icon" href="{{ page | relative }}/favicon.ico" type="image/x-icon"/>
|
||||
|
||||
<meta name="description" content="{{ description | default: site.description | escape }}"/>
|
||||
|
||||
{% include "layout/og.html" %}
|
||||
{% elsif environment == 'development' %}
|
||||
<link rel="icon" href="{{ page | relative }}/favicon-dev.ico" type="image/x-icon" />
|
||||
<link rel="shortcut icon" href="{{ page | relative }}/favicon-dev.ico" type="image/x-icon" />
|
||||
{% endif %}
|
||||
|
||||
|
||||
{% include "layout/css.html" %}
|
||||
{% include "layout/js-libs.html" head %}
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@ layout: base
|
||||
<div class="page">
|
||||
{% if layout-sidebar %}
|
||||
<!-- BEGIN SIDEBAR -->
|
||||
{% include "layout/sidebar.html" dark=layout-sidebar-dark right=layout-sidebar-right transparent=layout-navbar-transparent breakpoint="lg" %}
|
||||
{% include "layout/sidebar.html" dark=layout-sidebar-dark end=layout-sidebar-end transparent=layout-navbar-transparent breakpoint="lg" %}
|
||||
<!-- END SIDEBAR -->
|
||||
{% endif %}
|
||||
|
||||
|
||||
@@ -5,30 +5,32 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
{% if environment == 'production' %}
|
||||
|
||||
{% assign pageSection = "" %}
|
||||
{% if page.url contains "/ui/" %}
|
||||
{% assign pageSection = "UI" %}
|
||||
{% assign pageSection = "UI" %}
|
||||
{% elsif page.url contains "/icons/" %}
|
||||
{% assign pageSection = "Icons" %}
|
||||
{% assign pageSection = "Icons" %}
|
||||
{% elsif page.url contains "/illustrations/" %}
|
||||
{% assign pageSection = "Illustrations" %}
|
||||
{% assign pageSection = "Illustrations" %}
|
||||
{% elsif page.url contains "/emails/" %}
|
||||
{% assign pageSection = "Emails" %}
|
||||
{% assign pageSection = "Emails" %}
|
||||
{% endif %}
|
||||
|
||||
{% assign metaTitle = title %}
|
||||
{% if seoTitle %}
|
||||
{% assign metaTitle = seoTitle %}
|
||||
{% assign metaTitle = seoTitle %}
|
||||
{% endif %}
|
||||
|
||||
{% assign metaDescription = description %}
|
||||
{% if seoDescription %}
|
||||
{% assign metaDescription = seoDescription %}
|
||||
{% assign metaDescription = seoDescription %}
|
||||
{% endif %}
|
||||
|
||||
{% assign siteName = "Tabler Documentation" %}
|
||||
{% if pageSection != "" %}
|
||||
{% assign siteName = "Tabler " | append: pageSection | append: " Documentation" %}
|
||||
{% assign siteName = "Tabler " | append: pageSection | append: " Documentation" %}
|
||||
{% endif %}
|
||||
|
||||
<title>{{ metaTitle }} | {{ siteName }}</title>
|
||||
@@ -48,6 +50,11 @@
|
||||
|
||||
<script defer data-api="/stats/event" data-domain="docs.tabler.io" src="/stats/js/script.js"></script>
|
||||
|
||||
{% elsif environment == 'development' %}
|
||||
<link rel="icon" href="{{ page | relative }}/favicon-dev.ico" type="image/x-icon" />
|
||||
<link rel="shortcut icon" href="{{ page | relative }}/favicon-dev.ico" type="image/x-icon" />
|
||||
{% endif %}
|
||||
|
||||
<link rel="stylesheet" href="/dist/css/tabler{% if environment != 'development' %}.min{% endif %}.css{% if environment != 'development' %}?{{ 'now' | date: '%s' }}{% endif %}" />
|
||||
{% for plugin in site.cssPlugins %}
|
||||
<link
|
||||
@@ -196,5 +203,9 @@
|
||||
|
||||
<script src="/dist/js/tabler{% if environment != 'development' %}.min{% endif %}.js"></script>
|
||||
<script src="/js/docs{% if environment != 'development' %}.min{% endif %}.js" defer></script>
|
||||
|
||||
{% if environment == 'production' %}
|
||||
<script src="https://scripts.tabler.io/banner.js" defer data-tblr-ref="tabler-docs"></script>
|
||||
{% endif %}
|
||||
</body>
|
||||
</html>
|
||||
|
||||
BIN
shared/static/illustrations/dark/403.png
Normal file
BIN
shared/static/illustrations/dark/403.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 103 KiB |
BIN
shared/static/illustrations/dark/500.png
Normal file
BIN
shared/static/illustrations/dark/500.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 110 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 63 KiB After Width: | Height: | Size: 96 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 125 KiB After Width: | Height: | Size: 125 KiB |
BIN
shared/static/illustrations/dark/hybrid-work.png
Normal file
BIN
shared/static/illustrations/dark/hybrid-work.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 128 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 79 KiB After Width: | Height: | Size: 99 KiB |
BIN
shared/static/illustrations/dark/painting.png
Normal file
BIN
shared/static/illustrations/dark/painting.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 105 KiB |
BIN
shared/static/illustrations/dark/podcast.png
Normal file
BIN
shared/static/illustrations/dark/podcast.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 84 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 106 KiB After Width: | Height: | Size: 106 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 78 KiB After Width: | Height: | Size: 101 KiB |
BIN
shared/static/illustrations/light/403.png
Normal file
BIN
shared/static/illustrations/light/403.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 102 KiB |
BIN
shared/static/illustrations/light/500.png
Normal file
BIN
shared/static/illustrations/light/500.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 107 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 63 KiB After Width: | Height: | Size: 96 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 121 KiB After Width: | Height: | Size: 121 KiB |
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user