mirror of
https://github.com/tabler/tabler.git
synced 2025-12-22 18:04:26 +04:00
Compare commits
4 Commits
changeset-
...
dev-scss-i
| Author | SHA1 | Date | |
|---|---|---|---|
|
9f5748b683 | ||
|
|
612879c6a1 | ||
|
|
1ee0110205 | ||
|
|
ef23c7c1f6 |
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
|
||||
@@ -1,100 +0,0 @@
|
||||
---
|
||||
description: Cursor Rules for Tabler Changesets
|
||||
globs:
|
||||
alwaysApply: true
|
||||
---
|
||||
|
||||
|
||||
### File Structure
|
||||
|
||||
- Each change must be in a separate changeset file in `.changeset/` directory
|
||||
- Use descriptive kebab-case filenames (e.g., `progress-sizes.md`, `button-ghost.md`)
|
||||
- Follow the standard changeset format with frontmatter and description
|
||||
|
||||
### Change Description Format
|
||||
|
||||
- **One sentence per changeset** - keep descriptions concise and focused
|
||||
- Use **backticks for code elements**: classes (`.btn-ghost`), properties (`stroke-width`), values (`1.5`), icons (`arrow-up`)
|
||||
- Start with action verbs: "Added", "Updated", "Fixed", "Removed"
|
||||
- Be specific about what was changed
|
||||
|
||||
### Version Bump Guidelines
|
||||
|
||||
- **Major**: Breaking changes, complete rewrites
|
||||
- **Minor**: New features, new components, new pages, significant enhancements
|
||||
- **Patch**: Bug fixes, small improvements, style updates, accessibility fixes
|
||||
|
||||
### Package Selection
|
||||
|
||||
- `"@tabler/core"`: Changes to SCSS, core functionality, CSS classes
|
||||
- `"@tabler/preview"`: New pages, demo updates, preview-specific changes
|
||||
- `"@tabler/docs"`: Documentation updates
|
||||
- Use multiple packages when change affects multiple areas
|
||||
|
||||
### Examples
|
||||
|
||||
#### New Feature (Minor)
|
||||
|
||||
```md
|
||||
---
|
||||
"@tabler/core": minor
|
||||
"@tabler/preview": minor
|
||||
---
|
||||
|
||||
Added Progress Steps component for step-by-step navigation indicators.
|
||||
```
|
||||
|
||||
#### Bug Fix (Patch)
|
||||
|
||||
```md
|
||||
---
|
||||
"@tabler/core": patch
|
||||
---
|
||||
|
||||
Updated `stroke-width` for `.icon-sm` from `1` to `1.5` for better visibility.
|
||||
```
|
||||
|
||||
#### New Page (Minor)
|
||||
|
||||
```md
|
||||
---
|
||||
"@tabler/preview": minor
|
||||
---
|
||||
|
||||
Added new onboarding page with progress indicator and navigation layout.
|
||||
```
|
||||
|
||||
#### Style Enhancement (Patch)
|
||||
|
||||
```md
|
||||
---
|
||||
"@tabler/core": patch
|
||||
---
|
||||
|
||||
Added smooth transitions for progress bar width and background color changes.
|
||||
```
|
||||
|
||||
### Code Formatting Rules
|
||||
|
||||
- Class names: `.btn-ghost`, `.progress-lg`, `.icon-sm`
|
||||
- CSS properties: `stroke-width`, `background-color`, `width`
|
||||
- Values: `1.5`, `transparent`, `100%`
|
||||
- Icon names: `arrow-up`, `arrow-down`, `trending-up`
|
||||
- HTML attributes: `aria-label`, `role`, `data-*`
|
||||
- JavaScript functions: `addEventListener()`, `querySelector()`
|
||||
|
||||
### Common Patterns
|
||||
|
||||
- **Component additions**: "Added [ComponentName] component for [purpose]"
|
||||
- **Size variants**: "Added [size] size variant for [component] (`.class-size`)"
|
||||
- **Style fixes**: "Fixed [issue] in [component/element]"
|
||||
- **Icon updates**: "Updated [component] to use `new-icon` instead of `old-icon`"
|
||||
- **Accessibility**: "Improved accessibility by [specific change]"
|
||||
|
||||
### Commit Message Format
|
||||
|
||||
Use English for commit messages following conventional commit format when possible:
|
||||
|
||||
- `feat: add progress steps component`
|
||||
- `fix: update icon stroke width for better visibility`
|
||||
- `style: add smooth transitions to progress bars`
|
||||
@@ -1,171 +0,0 @@
|
||||
---
|
||||
description: Tabler Project HTML Elements Guidelines
|
||||
globs: ["**/*.html", "**/*.liquid", "**/*.md"]
|
||||
alwaysApply: true
|
||||
---
|
||||
|
||||
## HTML Elements Guidelines
|
||||
|
||||
### 1. Icons
|
||||
|
||||
When you need to use an icon, always use the Tabler icon include syntax:
|
||||
|
||||
```html
|
||||
{% include "ui/icon.html" icon="ICON_NAME" %}
|
||||
```
|
||||
|
||||
**Examples:**
|
||||
|
||||
- `{% include "ui/icon.html" icon="home" %}`
|
||||
- `{% include "ui/icon.html" icon="building-community" %}`
|
||||
- `{% include "ui/icon.html" icon="map-pin" %}`
|
||||
|
||||
### 2. Page Links
|
||||
|
||||
When linking to other pages, always use the relative page syntax:
|
||||
|
||||
```html
|
||||
href="{{ page | relative }}/url.html"
|
||||
```
|
||||
|
||||
**Examples:**
|
||||
|
||||
- `href="{{ page | relative }}/job-post.html"`
|
||||
- `href="{{ page | relative }}/job-listing.html"`
|
||||
- `href="{{ page | relative }}/marketing/index.html"`
|
||||
|
||||
### 3. Static Generation
|
||||
|
||||
All pages are statically generated to HTML using Eleventy (11ty). Keep this in mind when:
|
||||
|
||||
- Writing frontmatter (must be static YAML, no Liquid templating)
|
||||
- Creating dynamic content (use Liquid templating in the body, not frontmatter)
|
||||
- Linking between pages (use relative paths)
|
||||
|
||||
### 4. Additional Guidelines
|
||||
|
||||
#### Frontmatter Rules
|
||||
|
||||
- Frontmatter must be static YAML
|
||||
- Cannot use Liquid templating in frontmatter
|
||||
- Use static values for title, permalink, etc.
|
||||
|
||||
#### Liquid Templating
|
||||
|
||||
- Use Liquid templating only in the HTML body
|
||||
- Access data using `{{ variable }}` syntax
|
||||
- Use `{% for %}` loops for dynamic content
|
||||
- Use `{% if %}` conditions for conditional rendering
|
||||
|
||||
#### File Structure
|
||||
|
||||
- Pages go in `preview/pages/`
|
||||
- Includes go in `shared/includes/`
|
||||
- Data files go in `shared/data/`
|
||||
- Documentation goes in `docs/content/`
|
||||
|
||||
#### CSS Classes
|
||||
|
||||
- Use Bootstrap 5 classes
|
||||
- Use Tabler's custom CSS classes
|
||||
- Follow the pattern: `--#{$prefix}component-property`
|
||||
|
||||
#### Accessibility
|
||||
|
||||
- Include proper ARIA labels
|
||||
- Use semantic HTML elements
|
||||
- Ensure proper heading hierarchy
|
||||
- Add alt text for images
|
||||
|
||||
### 5. Component Usage
|
||||
|
||||
#### Cards
|
||||
|
||||
- Use `card` class for main containers
|
||||
- Use `card-body` for content areas
|
||||
- Use `card-header` for card headers
|
||||
- Use `card-title` for card title
|
||||
|
||||
#### Buttons
|
||||
|
||||
- Use `btn` class for all buttons
|
||||
- Use `btn-primary` for primary actions
|
||||
- Use `btn` for secondary actions, don't use `btn-outline-secondary`
|
||||
- Use `btn-sm` for smaller buttons
|
||||
- Use `w-100` for full-width buttons
|
||||
|
||||
#### Forms
|
||||
|
||||
- Use `form-control` for input fields
|
||||
- Use `form-label` for labels
|
||||
- Use `form-check` for checkboxes/radio buttons
|
||||
- Use `form-select` for dropdowns
|
||||
|
||||
#### Layout
|
||||
|
||||
- Use Bootstrap grid system (`row`, `col-*`)
|
||||
- Use `container-xl` for main containers
|
||||
- Use `page-wrapper` for page structure
|
||||
- Use `page-body` for main content area
|
||||
|
||||
#### Badges
|
||||
|
||||
- Use `badge` class for badges
|
||||
- Don't use `badge-outline` for badges, use `badge` class instead
|
||||
- Don't use `badge-primary` for badges, use `badge` class instead
|
||||
- Don't change the text color of badges
|
||||
|
||||
#### Markdown
|
||||
|
||||
- Use `markdown` class for markdown content
|
||||
- Apply to containers that render markdown content
|
||||
- Example: `<div class="markdown">...</div>`
|
||||
|
||||
#### Rest of the rules
|
||||
|
||||
- Read the rest of the rules in the `docs/content/ui/` folder
|
||||
|
||||
### 6. Data Integration
|
||||
|
||||
#### Using JSON Data
|
||||
|
||||
```liquid
|
||||
{% for item in items %}
|
||||
<div>{{ item.name }}</div>
|
||||
{% endfor %}
|
||||
```
|
||||
|
||||
#### Conditional Rendering
|
||||
|
||||
```liquid
|
||||
{% if condition %}
|
||||
<div>Content</div>
|
||||
{% endif %}
|
||||
```
|
||||
|
||||
#### Including Components
|
||||
|
||||
```liquid
|
||||
{% include "ui/button.html" color="primary" text="Click me" %}
|
||||
```
|
||||
|
||||
### 7. Best Practices
|
||||
|
||||
#### Performance
|
||||
|
||||
- Minimize nested loops
|
||||
- Use `limit` filters when iterating large datasets
|
||||
- Optimize images for web use
|
||||
|
||||
#### Code Organization
|
||||
|
||||
- Keep components modular and reusable
|
||||
- Use consistent naming conventions
|
||||
- Comment complex logic
|
||||
- Group related functionality together
|
||||
|
||||
#### Error Handling
|
||||
|
||||
- Always check if data exists before using it
|
||||
- Provide fallback content for missing data
|
||||
- Use `{% if %}` guards for optional content
|
||||
11
.github/workflows/argos.yml
vendored
11
.github/workflows/argos.yml
vendored
@@ -26,7 +26,7 @@ jobs:
|
||||
if: false
|
||||
steps:
|
||||
- name: Clone repository
|
||||
uses: actions/checkout@v6
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- name: Cache turbo build setup
|
||||
uses: actions/cache@v4
|
||||
@@ -36,14 +36,13 @@ jobs:
|
||||
restore-keys: |
|
||||
${{ runner.os }}-turbo-
|
||||
|
||||
- name: Install PNPM
|
||||
uses: pnpm/action-setup@v4
|
||||
|
||||
- name: Set up Node.js
|
||||
uses: actions/setup-node@v6
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: "${{ env.NODE }}"
|
||||
cache: 'pnpm'
|
||||
|
||||
- name: Install PNPM
|
||||
uses: pnpm/action-setup@v4
|
||||
|
||||
- name: Get installed Playwright version
|
||||
id: playwright-version
|
||||
|
||||
11
.github/workflows/bundlewatch.yml
vendored
11
.github/workflows/bundlewatch.yml
vendored
@@ -17,7 +17,7 @@ jobs:
|
||||
|
||||
steps:
|
||||
- name: Clone repository
|
||||
uses: actions/checkout@v6
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- name: Cache turbo build setup
|
||||
uses: actions/cache@v4
|
||||
@@ -27,14 +27,13 @@ jobs:
|
||||
restore-keys: |
|
||||
${{ runner.os }}-turbo-
|
||||
|
||||
- name: Install PNPM
|
||||
uses: pnpm/action-setup@v4
|
||||
|
||||
- name: Set up Node.js
|
||||
uses: actions/setup-node@v6
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: "${{ env.NODE }}"
|
||||
cache: 'pnpm'
|
||||
|
||||
- name: Install PNPM
|
||||
uses: pnpm/action-setup@v4
|
||||
|
||||
- name: Set up Bundler
|
||||
uses: ruby/setup-ruby@v1
|
||||
|
||||
@@ -16,7 +16,7 @@ jobs:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Checkout Repo
|
||||
uses: actions/checkout@v6
|
||||
uses: actions/checkout@v4
|
||||
with:
|
||||
persist-credentials: false
|
||||
|
||||
|
||||
2
.github/workflows/close_inactive.yml
vendored
2
.github/workflows/close_inactive.yml
vendored
@@ -11,7 +11,7 @@ jobs:
|
||||
pull-requests: write
|
||||
issues: write
|
||||
steps:
|
||||
- uses: actions/stale@v10
|
||||
- uses: actions/stale@v9
|
||||
with:
|
||||
days-before-issue-stale: 360
|
||||
days-before-issue-close: 14
|
||||
|
||||
4
.github/workflows/lockfiles.yaml
vendored
4
.github/workflows/lockfiles.yaml
vendored
@@ -12,9 +12,9 @@ jobs:
|
||||
name: Verify lock file integrity
|
||||
steps:
|
||||
- name: Clone Tabler
|
||||
uses: actions/checkout@v6
|
||||
uses: actions/checkout@v4
|
||||
- name: Prevent lock file change
|
||||
uses: xalvarez/prevent-file-change-action@v3
|
||||
uses: xalvarez/prevent-file-change-action@v2
|
||||
with:
|
||||
githubToken: ${{ secrets.GITHUB_TOKEN }}
|
||||
pattern: Gemfile.lock|pnpm-lock.json|pnpm-lock.yaml
|
||||
|
||||
13
.github/workflows/release.yml
vendored
13
.github/workflows/release.yml
vendored
@@ -21,17 +21,16 @@ jobs:
|
||||
pull-requests: write # to create pull request
|
||||
steps:
|
||||
- name: Checkout Repo
|
||||
uses: actions/checkout@v6
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- name: Setup Node.js 18
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: 20
|
||||
|
||||
- name: Install PNPM
|
||||
uses: pnpm/action-setup@v4
|
||||
|
||||
- name: Setup Node.js 18
|
||||
uses: actions/setup-node@v6
|
||||
with:
|
||||
node-version: "${{ env.NODE }}"
|
||||
cache: 'pnpm'
|
||||
|
||||
- name: Install Dependencies
|
||||
run: pnpm install
|
||||
|
||||
|
||||
11
.github/workflows/test.yml
vendored
11
.github/workflows/test.yml
vendored
@@ -14,7 +14,7 @@ jobs:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Clone repository
|
||||
uses: actions/checkout@v6
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- name: Cache turbo build setup
|
||||
uses: actions/cache@v4
|
||||
@@ -24,14 +24,13 @@ jobs:
|
||||
restore-keys: |
|
||||
${{ runner.os }}-turbo-
|
||||
|
||||
- name: Install PNPM
|
||||
uses: pnpm/action-setup@v4
|
||||
|
||||
- name: Set up Node.js
|
||||
uses: actions/setup-node@v6
|
||||
uses: actions/setup-node@v4
|
||||
with:
|
||||
node-version: "${{ env.NODE }}"
|
||||
cache: 'pnpm'
|
||||
|
||||
- name: Install PNPM
|
||||
uses: pnpm/action-setup@v4
|
||||
|
||||
- run: node --version
|
||||
|
||||
|
||||
14
.prettierrc
14
.prettierrc
@@ -4,17 +4,7 @@
|
||||
"printWidth": 320,
|
||||
"proseWrap": "always",
|
||||
"semi": false,
|
||||
"singleQuote": true,
|
||||
"quoteProps": "consistent",
|
||||
"singleQuote": false,
|
||||
"tabWidth": 2,
|
||||
"useTabs": false,
|
||||
"trailingComma": "all",
|
||||
"overrides": [
|
||||
{
|
||||
"files": "*.scss",
|
||||
"options": {
|
||||
"parser": "scss"
|
||||
}
|
||||
}
|
||||
]
|
||||
"trailingComma": "all"
|
||||
}
|
||||
|
||||
@@ -1,82 +0,0 @@
|
||||
import fs from 'fs';
|
||||
import path from 'path';
|
||||
import { fileURLToPath } from 'url';
|
||||
|
||||
// Get __dirname in ES modules
|
||||
const __filename = fileURLToPath(import.meta.url);
|
||||
const __dirname = path.dirname(__filename);
|
||||
|
||||
// File paths (relative to core/.build directory)
|
||||
const bootstrapPath = path.join(__dirname, '../node_modules/bootstrap/scss/_variables.scss');
|
||||
const tablerPath = path.join(__dirname, '../scss/_variables.scss');
|
||||
|
||||
// Function to extract variable names from SCSS file
|
||||
function extractVariables(filePath) {
|
||||
const content = fs.readFileSync(filePath, 'utf8');
|
||||
const variables = new Set();
|
||||
|
||||
// Regex to find SCSS variables
|
||||
// Looks for patterns like: $variable-name: value
|
||||
// Includes variables in maps and lists
|
||||
const variableRegex = /\$([a-zA-Z0-9_-]+)\s*[:=]/g;
|
||||
|
||||
let match;
|
||||
while ((match = variableRegex.exec(content)) !== null) {
|
||||
const varName = match[1];
|
||||
variables.add(varName);
|
||||
}
|
||||
|
||||
return variables;
|
||||
}
|
||||
|
||||
// Main function
|
||||
function compareVariables() {
|
||||
console.log('Analyzing Bootstrap variables...');
|
||||
const bootstrapVars = extractVariables(bootstrapPath);
|
||||
console.log(`Found ${bootstrapVars.size} variables in Bootstrap\n`);
|
||||
|
||||
console.log('Analyzing Tabler variables...');
|
||||
const tablerVars = extractVariables(tablerPath);
|
||||
console.log(`Found ${tablerVars.size} variables in Tabler\n`);
|
||||
|
||||
// Find variables that are in Bootstrap but not in Tabler
|
||||
const missingInTabler = [];
|
||||
for (const varName of bootstrapVars) {
|
||||
if (!tablerVars.has(varName)) {
|
||||
missingInTabler.push(varName);
|
||||
}
|
||||
}
|
||||
|
||||
// Sort alphabetically
|
||||
missingInTabler.sort();
|
||||
|
||||
console.log('='.repeat(60));
|
||||
console.log(`Variables in Bootstrap that are missing in Tabler: ${missingInTabler.length}`);
|
||||
console.log('='.repeat(60));
|
||||
|
||||
if (missingInTabler.length === 0) {
|
||||
console.log('All Bootstrap variables are present in Tabler!');
|
||||
} else {
|
||||
console.log('\nList of missing variables:\n');
|
||||
missingInTabler.forEach((varName, index) => {
|
||||
console.log(`${(index + 1).toString().padStart(4)}. $${varName}`);
|
||||
});
|
||||
}
|
||||
|
||||
// Optionally: show statistics
|
||||
console.log('\n' + '='.repeat(60));
|
||||
console.log('Statistics:');
|
||||
console.log(` Bootstrap: ${bootstrapVars.size} variables`);
|
||||
console.log(` Tabler: ${tablerVars.size} variables`);
|
||||
console.log(` Missing: ${missingInTabler.length} variables`);
|
||||
console.log(` Coverage: ${((1 - missingInTabler.length / bootstrapVars.size) * 100).toFixed(1)}%`);
|
||||
console.log('='.repeat(60));
|
||||
}
|
||||
|
||||
// Run analysis
|
||||
try {
|
||||
compareVariables();
|
||||
} catch (error) {
|
||||
console.error('Error during analysis:', error.message);
|
||||
process.exit(1);
|
||||
}
|
||||
@@ -1,55 +0,0 @@
|
||||
#!/usr/bin/env node
|
||||
|
||||
'use strict'
|
||||
|
||||
import { existsSync, mkdirSync } from 'fs'
|
||||
import { copySync } from 'fs-extra/esm'
|
||||
import { fileURLToPath } from 'url'
|
||||
import { join, dirname } from 'node:path'
|
||||
|
||||
const __dirname = dirname(fileURLToPath(import.meta.url))
|
||||
|
||||
const fromDir = join(__dirname, '..', 'node_modules/geist/dist/fonts')
|
||||
const toDir = join(__dirname, '..', 'fonts')
|
||||
|
||||
// Create fonts directory if it doesn't exist
|
||||
if (!existsSync(toDir)) {
|
||||
mkdirSync(toDir, { recursive: true })
|
||||
}
|
||||
|
||||
// Copy geist-mono fonts
|
||||
const monoFrom = join(fromDir, 'geist-mono')
|
||||
const monoTo = join(toDir, 'geist-mono')
|
||||
|
||||
if (existsSync(monoFrom)) {
|
||||
if (!existsSync(monoTo)) {
|
||||
mkdirSync(monoTo, { recursive: true })
|
||||
}
|
||||
|
||||
copySync(monoFrom, monoTo, {
|
||||
dereference: true,
|
||||
})
|
||||
|
||||
console.log(`Successfully copied geist-mono fonts`)
|
||||
} else {
|
||||
console.warn(`Warning: geist-mono fonts not found at ${monoFrom}`)
|
||||
}
|
||||
|
||||
// Copy geist-sans fonts
|
||||
const sansFrom = join(fromDir, 'geist-sans')
|
||||
const sansTo = join(toDir, 'geist-sans')
|
||||
|
||||
if (existsSync(sansFrom)) {
|
||||
if (!existsSync(sansTo)) {
|
||||
mkdirSync(sansTo, { recursive: true })
|
||||
}
|
||||
|
||||
copySync(sansFrom, sansTo, {
|
||||
dereference: true,
|
||||
})
|
||||
|
||||
console.log(`Successfully copied geist-sans fonts`)
|
||||
} else {
|
||||
console.warn(`Warning: geist-sans fonts not found at ${sansFrom}`)
|
||||
}
|
||||
|
||||
@@ -9,7 +9,10 @@ export default context => {
|
||||
autoprefixer: {
|
||||
cascade: false
|
||||
},
|
||||
rtlcss: context.env === 'RTL'
|
||||
rtlcss: context.env === 'RTL',
|
||||
'postcss-discard-comments': {
|
||||
removeAll: true
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,45 +1,5 @@
|
||||
# @tabler/core
|
||||
|
||||
## 1.5.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
- 5e119d4: Added Pay page with dedicated layout, navigation link, and card/PayPal payment form.
|
||||
- 9c5d729: Added `.btn-ghost` button variant with transparent background and hover effects.
|
||||
- ec94693: Added `.card-gradient` component with gradient variants, direction modifiers, and animated backgrounds.
|
||||
- a198b0c: Added Geist font family integration.
|
||||
- 8d8727f: Added language selector dropdown to navbar with flag indicators for multilingual support.
|
||||
- 4ce08ca: Refactored navbar-side component by consolidating separate include files (apps, language, notifications, theme, user) into a single `navbar-side.html` file for better maintainability.
|
||||
- 9c5d729: Added Progress Background component with text labels and value display.
|
||||
- 9c5d729: Added `.progress-lg` and `.progress-xl` size variants for the progress component.
|
||||
- 9c5d729: Added Progress Steps component for step-by-step navigation indicators.
|
||||
- e3d86c5: Upgraded `apexcharts` from `3.54.1` to `5.3.6` and added CSS variables (`--chart-{id}-color-{index}`) for dynamic chart colors to fix compatibility with the new version.
|
||||
|
||||
### Patch Changes
|
||||
|
||||
- 059bae1: Refactored Bootstrap exports to use single source of truth in `bootstrap.js` and removed duplicate exports from `tabler.js` for better maintainability.
|
||||
- 5018aa9: Fixed `.btn-icon` to be square by aligning `min-width` calculation with base `.btn` formula.
|
||||
- c860288: Fixed icon alignment for `.btn-sm` and `.btn-xl` sizes.
|
||||
- 2dc7eda: Updated `$border-color-translucent-dark` from `rgba(72, 110, 149, 0.14)` to `rgba(128, 150, 172, 0.2)` to improve visibility of form checkboxes and other form elements in dark mode.
|
||||
- 6e656ad: Fixed `.input-icon-addon` z-index issue with form validation feedback and added default height.
|
||||
- 8bc6fa7: Fixed status color classes to use CSS variables instead of hardcoded values and include social colors (bitbucket, facebook, etc.) in status class generation.
|
||||
- e206d7a: Fixed white space on left side when scrollbar is present by replacing `margin-inline-start: calc(100vw - 100%)` with `scrollbar-gutter: stable` on `html` element, with `overflow-y: scroll` fallback for unsupported browsers.
|
||||
- 4ce08ca: Updated flags and avatars styling for better visual consistency.
|
||||
- b8b63d7: Fixed mixed declarations in SCSS.
|
||||
- 0106d6b: Update SCSS to use logical properties
|
||||
- 9c5d729: Updated `stroke-width` for `.icon-sm` from `1` to `1.5` for better visibility.
|
||||
- 5e119d4: Added `bg-blur` utility and increased `container-tight` width for layout flexibility.
|
||||
- 3aba62e: Added `border-top-left-radius` and `border-top-right-radius` to first and last child elements in `.card-table` for proper corner rounding.
|
||||
- 0c79963: Added `media-print` mixin and print styles to hide interactive components during printing.
|
||||
- 9a3361f: Fixed double bottom border in tables.
|
||||
- 9c5d729: Added smooth transitions for progress bar `width` and `background-color` changes.
|
||||
- 41ed22a: Removed redundant nullish coalescing operator from `html` option in popover and tooltip initialization.
|
||||
- 83ec6f8: Added Driver.js library integration and Tour demo page for interactive product tours and onboarding guides.
|
||||
- 9c5d729: Updated skip-link to use `visually-hidden` for improved accessibility.
|
||||
- 736e604: Updated deprecated global Sass functions to module equivalents (`map.merge`, `string.slice`, `math.percentage`, etc.).
|
||||
- f8dee0a: Updated Bootstrap to v5.3.8.
|
||||
- 9c5d729: Updated trending component to use `arrow-up`/`arrow-down` instead of `trending-up`/`trending-down`.
|
||||
|
||||
## 1.4.0
|
||||
|
||||
### Minor Changes
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -1 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="15" fill="none" viewBox="0 0 20 15"><path fill="#3d58db" fill-rule="evenodd" d="M0 0v15h20V0z" clip-rule="evenodd"/><path fill="#ffd018" fill-rule="evenodd" d="m9.407 2.442-.14.818.733-.385.735.386-.14-.818.594-.64h-.821L10 1l-.367.804h-.822zm0 10.855-.14.819.734-.387.735.387-.14-.819.594-.639h-.821L10 11.855l-.367.804h-.822l.595.64zM3.484 8.743l.14-.818-.594-.64h.822l.367-.803.367.804h.822l-.595.639.14.818-.734-.386zm1.352 1.77-.14.818.734-.386.735.386-.14-.818.594-.64h-.821L5.43 9.07l-.367.804H4.24zm9.009.818.14-.818-.595-.64h.822l.367-.803.368.804h.821l-.594.639.14.818-.735-.386zm-9.01-6.062-.14.818.735-.386.735.386-.14-.818.594-.639h-.821l-.368-.804-.367.804H4.24zm9.01.818.14-.818-.595-.639h.822l.367-.804.368.804h.821l-.594.64.14.817-.735-.386zM6.66 12.595l-.14.819.735-.387.734.386-.14-.818.595-.639h-.822l-.367-.804-.368.804h-.821zm5.418.819.14-.819-.594-.639h.821l.367-.804.368.804h.821l-.594.64.14.817-.735-.386zM6.52 3.971l.735-.387.734.387-.14-.818.595-.64h-.822l-.367-.804-.368.804h-.821l.594.64zm5.558 0 .14-.818-.594-.64h.821l.367-.804.368.804h.821l-.594.64.14.818-.735-.387zM15.14 7.85l-.14.818.735-.386.735.386-.14-.818.593-.64h-.82l-.368-.803-.368.804h-.821z" clip-rule="evenodd"/></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="16" fill="none"><mask id="a" width="21" height="16" x="0" y="0" mask-type="alpha" maskUnits="userSpaceOnUse"><path fill="#fff" d="M.001.927h20v15h-20z"/></mask><g mask="url(#a)"><path fill="#F7FCFF" fill-rule="evenodd" d="M.001.927v15h20v-15h-20Z" clip-rule="evenodd"/><mask id="b" width="21" height="16" x="0" y="0" mask-type="alpha" maskUnits="userSpaceOnUse"><path fill="#fff" fill-rule="evenodd" d="M.001.927v15h20v-15h-20Z" clip-rule="evenodd"/></mask><g fill-rule="evenodd" clip-rule="evenodd" mask="url(#b)"><path fill="#3D58DB" d="M.001.927v15h20v-15h-20Z"/><path fill="#FFD018" d="m9.407 3.137-.14.818L10 3.57l.735.386-.14-.818.594-.64h-.821L10 1.695l-.367.804h-.822l.595.639Zm0 10.855-.14.819.734-.387.735.387-.14-.819.594-.639h-.821L10 12.55l-.367.804h-.822l.595.64ZM3.484 9.438l.14-.818-.594-.64h.822l.367-.803.367.804h.822l-.595.639.14.818-.734-.386-.735.386Zm1.352 1.77-.14.818.734-.386.735.386-.14-.818.594-.64h-.821l-.368-.803-.367.804H4.24l.595.639Zm9.009.818.14-.818-.595-.64h.822l.367-.803.368.804h.821l-.594.639.14.818-.735-.386-.734.386Zm-9.01-6.062-.14.818.735-.386.735.386-.14-.818.594-.639h-.821l-.368-.804-.367.804H4.24l.595.64Zm9.01.818.14-.818-.595-.639h.822l.367-.804.368.804h.821l-.594.64.14.817-.735-.386-.734.386ZM6.66 13.29l-.14.819.735-.387.734.386-.14-.818.595-.639h-.822l-.367-.804-.368.804h-.821l.594.64Zm5.418.819.14-.819-.594-.639h.821l.367-.804.368.804h.821l-.594.64.14.817-.735-.386-.734.386ZM6.52 4.666l.735-.387.734.387-.14-.818.595-.64h-.822l-.367-.804-.368.804h-.821l.594.64-.14.818Zm5.558 0 .14-.818-.594-.64h.821l.367-.804.368.804h.821l-.594.64.14.818-.735-.387-.734.387Zm3.062 3.879-.14.818.735-.386.735.386-.14-.818.593-.64h-.82l-.368-.803-.368.804h-.821l.594.639Z"/></g></g></svg>
|
||||
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.7 KiB |
@@ -1,8 +1,7 @@
|
||||
// Autosize plugin
|
||||
const elements = document.querySelectorAll('[data-bs-toggle="autosize"]')
|
||||
|
||||
const elements = document.querySelectorAll('[data-bs-toggle="autosize"]');
|
||||
if (elements.length) {
|
||||
elements.forEach(function (element) {
|
||||
window.autosize && window.autosize(element)
|
||||
})
|
||||
}
|
||||
elements.forEach(function (element) {
|
||||
window.autosize && window.autosize(element);
|
||||
});
|
||||
}
|
||||
21
core/js/src/bootstrap.js
vendored
21
core/js/src/bootstrap.js
vendored
@@ -1,20 +1,3 @@
|
||||
export * as Popper from '@popperjs/core'
|
||||
export * as Popper from '@popperjs/core';
|
||||
|
||||
// Export all Bootstrap components directly for consistent usage
|
||||
export {
|
||||
Alert,
|
||||
Button,
|
||||
Carousel,
|
||||
Collapse,
|
||||
Dropdown,
|
||||
Modal,
|
||||
Offcanvas,
|
||||
Popover,
|
||||
ScrollSpy,
|
||||
Tab,
|
||||
Toast,
|
||||
Tooltip
|
||||
} from 'bootstrap'
|
||||
|
||||
// Re-export everything as namespace for backward compatibility
|
||||
export * as bootstrap from 'bootstrap'
|
||||
export { Dropdown, Tooltip, Popover, Tab, Toast } from 'bootstrap';
|
||||
@@ -1,25 +1,23 @@
|
||||
const elements = document.querySelectorAll('[data-countup]')
|
||||
const elements = document.querySelectorAll('[data-countup]');
|
||||
|
||||
if (elements.length) {
|
||||
elements.forEach(function (element) {
|
||||
let options = {}
|
||||
try {
|
||||
const dataOptions = element.getAttribute('data-countup') ? JSON.parse(element.getAttribute('data-countup')) : {}
|
||||
options = Object.assign(
|
||||
{
|
||||
enableScrollSpy: true,
|
||||
},
|
||||
dataOptions,
|
||||
)
|
||||
} catch (error) {}
|
||||
elements.forEach(function (element) {
|
||||
let options = {};
|
||||
try {
|
||||
const dataOptions = element.getAttribute('data-countup') ? JSON.parse(element.getAttribute('data-countup')) : {};
|
||||
options = Object.assign({
|
||||
'enableScrollSpy': true
|
||||
}, dataOptions);
|
||||
|
||||
} catch (error) {}
|
||||
|
||||
const value = parseInt(element.innerHTML, 10)
|
||||
const value = parseInt(element.innerHTML, 10);
|
||||
|
||||
if (window.countUp && window.countUp.CountUp) {
|
||||
const countUp = new window.countUp.CountUp(element, value, options)
|
||||
if (!countUp.error) {
|
||||
countUp.start()
|
||||
}
|
||||
}
|
||||
})
|
||||
if (window.countUp && window.countUp.CountUp) {
|
||||
const countUp = new window.countUp.CountUp(element, value, options);
|
||||
if (!countUp.error) {
|
||||
countUp.start();
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
import { Dropdown } from './bootstrap'
|
||||
import { Dropdown } from './bootstrap';
|
||||
|
||||
/*
|
||||
Core dropdowns
|
||||
*/
|
||||
let dropdownTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="dropdown"]'))
|
||||
let dropdownTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="dropdown"]'));
|
||||
dropdownTriggerList.map(function (dropdownTriggerEl) {
|
||||
let options = {
|
||||
boundary: dropdownTriggerEl.getAttribute('data-bs-boundary') === 'viewport' ? document.querySelector('.btn') : 'clippingParents',
|
||||
}
|
||||
return new Dropdown(dropdownTriggerEl, options)
|
||||
})
|
||||
let options = {
|
||||
boundary: dropdownTriggerEl.getAttribute('data-bs-boundary') === 'viewport' ? document.querySelector('.btn') : 'clippingParents',
|
||||
}
|
||||
return new Dropdown(dropdownTriggerEl, options);
|
||||
});
|
||||
|
||||
@@ -1,10 +1,9 @@
|
||||
// Input mask plugin
|
||||
|
||||
var maskElementList = [].slice.call(document.querySelectorAll('[data-mask]'))
|
||||
var maskElementList = [].slice.call(document.querySelectorAll('[data-mask]'));
|
||||
maskElementList.map(function (maskEl) {
|
||||
window.IMask &&
|
||||
new window.IMask(maskEl, {
|
||||
mask: maskEl.dataset.mask,
|
||||
lazy: maskEl.dataset['mask-visible'] === 'true',
|
||||
})
|
||||
})
|
||||
window.IMask && new window.IMask(maskEl, {
|
||||
mask: maskEl.dataset.mask,
|
||||
lazy: maskEl.dataset['mask-visible'] === 'true'
|
||||
})
|
||||
});
|
||||
@@ -1,14 +1,14 @@
|
||||
import { Popover } from './bootstrap'
|
||||
import { Popover } from './bootstrap';
|
||||
|
||||
/*
|
||||
Core popovers
|
||||
*/
|
||||
let popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
|
||||
let popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
|
||||
popoverTriggerList.map(function (popoverTriggerEl) {
|
||||
let options = {
|
||||
delay: { show: 50, hide: 50 },
|
||||
html: popoverTriggerEl.getAttribute('data-bs-html') === 'true',
|
||||
placement: popoverTriggerEl.getAttribute('data-bs-placement') ?? 'auto',
|
||||
}
|
||||
return new Popover(popoverTriggerEl, options)
|
||||
})
|
||||
let options = {
|
||||
delay: {show: 50, hide: 50},
|
||||
html: popoverTriggerEl.getAttribute('data-bs-html') === "true" ?? false,
|
||||
placement: popoverTriggerEl.getAttribute('data-bs-placement') ?? 'auto'
|
||||
};
|
||||
return new Popover(popoverTriggerEl, options);
|
||||
});
|
||||
@@ -1,23 +0,0 @@
|
||||
// SortableJS plugin
|
||||
// Initializes Sortable on elements marked with [data-sortable]
|
||||
// Allows options via JSON in data attribute: data-sortable='{"animation":150}'
|
||||
|
||||
const sortableElements = document.querySelectorAll('[data-sortable]')
|
||||
|
||||
if (sortableElements.length) {
|
||||
sortableElements.forEach(function (element) {
|
||||
let options = {}
|
||||
|
||||
try {
|
||||
const rawOptions = element.getAttribute('data-sortable')
|
||||
options = rawOptions ? JSON.parse(rawOptions) : {}
|
||||
} catch (e) {
|
||||
// ignore invalid JSON
|
||||
}
|
||||
|
||||
if (window.Sortable) {
|
||||
// eslint-disable-next-line no-new
|
||||
new window.Sortable(element, options)
|
||||
}
|
||||
})
|
||||
}
|
||||
@@ -1,11 +1,11 @@
|
||||
/*
|
||||
Switch icons
|
||||
*/
|
||||
let switchesTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="switch-icon"]'))
|
||||
let switchesTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="switch-icon"]'));
|
||||
switchesTriggerList.map(function (switchTriggerEl) {
|
||||
switchTriggerEl.addEventListener('click', (e) => {
|
||||
e.stopPropagation()
|
||||
switchTriggerEl.addEventListener('click', (e) => {
|
||||
e.stopPropagation();
|
||||
|
||||
switchTriggerEl.classList.toggle('active')
|
||||
})
|
||||
})
|
||||
switchTriggerEl.classList.toggle('active');
|
||||
});
|
||||
});
|
||||
@@ -1,15 +1,15 @@
|
||||
import { Tab } from './bootstrap'
|
||||
import { Tab } from './bootstrap';
|
||||
|
||||
export const EnableActivationTabsFromLocationHash = () => {
|
||||
const locationHash = window.location.hash
|
||||
const locationHash = window.location.hash;
|
||||
|
||||
if (locationHash) {
|
||||
const tabsList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tab"]'))
|
||||
const matchedTabs = tabsList.filter((tab) => tab.hash === locationHash)
|
||||
const tabsList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tab"]'));
|
||||
const matchedTabs = tabsList.filter(tab => tab.hash === locationHash);
|
||||
|
||||
matchedTabs.map((tab) => {
|
||||
new Tab(tab).show()
|
||||
})
|
||||
matchedTabs.map(tab => {
|
||||
new Tab(tab).show();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -10,8 +10,8 @@ export const getColor = (color, opacity = 1) => {
|
||||
const c = getComputedStyle(document.body).getPropertyValue(`--${prefix}${color}`).trim()
|
||||
|
||||
if (opacity !== 1) {
|
||||
return hexToRgba(c, opacity)
|
||||
return hexToRgba(c, opacity)
|
||||
}
|
||||
|
||||
return c
|
||||
}
|
||||
}
|
||||
@@ -1,17 +1,17 @@
|
||||
import { Toast } from './bootstrap'
|
||||
import { Toast } from './bootstrap';
|
||||
|
||||
/*
|
||||
Toasts
|
||||
*/
|
||||
let toastsTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="toast"]'))
|
||||
let toastsTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="toast"]'));
|
||||
toastsTriggerList.map(function (toastTriggerEl) {
|
||||
if (!toastTriggerEl.hasAttribute('data-bs-target')) {
|
||||
return
|
||||
}
|
||||
if (!toastTriggerEl.hasAttribute('data-bs-target')) {
|
||||
return;
|
||||
}
|
||||
|
||||
const toastEl = new Toast(toastTriggerEl.getAttribute('data-bs-target'))
|
||||
const toastEl = new Toast(toastTriggerEl.getAttribute('data-bs-target'));
|
||||
|
||||
toastTriggerEl.addEventListener('click', () => {
|
||||
toastEl.show()
|
||||
})
|
||||
})
|
||||
toastTriggerEl.addEventListener('click', () => {
|
||||
toastEl.show()
|
||||
});
|
||||
});
|
||||
@@ -1,11 +1,11 @@
|
||||
import { Tooltip } from './bootstrap'
|
||||
import { Tooltip } from './bootstrap';
|
||||
|
||||
let tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'))
|
||||
let tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
|
||||
tooltipTriggerList.map(function (tooltipTriggerEl) {
|
||||
let options = {
|
||||
delay: { show: 50, hide: 50 },
|
||||
html: tooltipTriggerEl.getAttribute('data-bs-html') === 'true',
|
||||
placement: tooltipTriggerEl.getAttribute('data-bs-placement') ?? 'auto',
|
||||
}
|
||||
return new Tooltip(tooltipTriggerEl, options)
|
||||
})
|
||||
let options = {
|
||||
delay: {show: 50, hide: 50},
|
||||
html: tooltipTriggerEl.getAttribute("data-bs-html") === "true" ?? false,
|
||||
placement: tooltipTriggerEl.getAttribute('data-bs-placement') ?? 'auto'
|
||||
};
|
||||
return new Tooltip(tooltipTriggerEl, options);
|
||||
});
|
||||
@@ -4,32 +4,32 @@
|
||||
* This will prevent any flashes of the light theme (default) before switching.
|
||||
*/
|
||||
const themeConfig = {
|
||||
'theme': 'light',
|
||||
'theme-base': 'gray',
|
||||
'theme-font': 'sans-serif',
|
||||
'theme-primary': 'blue',
|
||||
'theme-radius': '1',
|
||||
"theme": "light",
|
||||
"theme-base": "gray",
|
||||
"theme-font": "sans-serif",
|
||||
"theme-primary": "blue",
|
||||
"theme-radius": "1",
|
||||
}
|
||||
|
||||
const params = new Proxy(new URLSearchParams(window.location.search), {
|
||||
get: (searchParams, prop) => searchParams.get(prop),
|
||||
get: (searchParams, prop) => searchParams.get(prop),
|
||||
})
|
||||
|
||||
for (const key in themeConfig) {
|
||||
const param = params[key]
|
||||
let selectedValue
|
||||
const param = params[key]
|
||||
let selectedValue
|
||||
|
||||
if (!!param) {
|
||||
localStorage.setItem('tabler-' + key, param)
|
||||
selectedValue = param
|
||||
} else {
|
||||
const storedTheme = localStorage.getItem('tabler-' + key)
|
||||
selectedValue = storedTheme ? storedTheme : themeConfig[key]
|
||||
}
|
||||
if (!!param) {
|
||||
localStorage.setItem('tabler-' + key, param)
|
||||
selectedValue = param
|
||||
} else {
|
||||
const storedTheme = localStorage.getItem('tabler-' + key)
|
||||
selectedValue = storedTheme ? storedTheme : themeConfig[key]
|
||||
}
|
||||
|
||||
if (selectedValue !== themeConfig[key]) {
|
||||
document.documentElement.setAttribute('data-bs-' + key, selectedValue)
|
||||
} else {
|
||||
document.documentElement.removeAttribute('data-bs-' + key)
|
||||
}
|
||||
}
|
||||
if (selectedValue !== themeConfig[key]) {
|
||||
document.documentElement.setAttribute('data-bs-' + key, selectedValue)
|
||||
} else {
|
||||
document.documentElement.removeAttribute('data-bs-' + key)
|
||||
}
|
||||
}
|
||||
@@ -1,16 +1,27 @@
|
||||
import './src/autosize'
|
||||
import './src/countup'
|
||||
import './src/input-mask'
|
||||
import './src/dropdown'
|
||||
import './src/tooltip'
|
||||
import './src/popover'
|
||||
import './src/switch-icon'
|
||||
import './src/tab'
|
||||
import './src/toast'
|
||||
import './src/sortable'
|
||||
import "./src/autosize"
|
||||
import "./src/countup"
|
||||
import "./src/input-mask"
|
||||
import "./src/dropdown"
|
||||
import "./src/tooltip"
|
||||
import "./src/popover"
|
||||
import "./src/switch-icon"
|
||||
import "./src/tab"
|
||||
import "./src/toast"
|
||||
|
||||
// Re-export everything from bootstrap.js (single source of truth)
|
||||
export * from './src/bootstrap'
|
||||
export * as bootstrap from "bootstrap"
|
||||
export * as tabler from "./src/tabler"
|
||||
|
||||
// Re-export tabler namespace
|
||||
export * as tabler from './src/tabler'
|
||||
export {
|
||||
Alert,
|
||||
Modal,
|
||||
Toast,
|
||||
Tooltip,
|
||||
Tab,
|
||||
Button,
|
||||
Carousel,
|
||||
Collapse,
|
||||
Dropdown,
|
||||
Popover,
|
||||
ScrollSpy,
|
||||
Offcanvas
|
||||
} from 'bootstrap'
|
||||
|
||||
@@ -38,12 +38,6 @@
|
||||
"dist/list.min.js"
|
||||
]
|
||||
},
|
||||
"sortablejs": {
|
||||
"npm": "sortablejs",
|
||||
"js": [
|
||||
"Sortable.min.js"
|
||||
]
|
||||
},
|
||||
"masonry": {
|
||||
"js": [
|
||||
"https://cdnjs.cloudflare.com/ajax/libs/masonry/4.2.2/masonry.pkgd.min.js"
|
||||
@@ -166,14 +160,5 @@
|
||||
"dist/turbo.es2017-umd.js"
|
||||
],
|
||||
"head": true
|
||||
},
|
||||
"driver.js": {
|
||||
"npm": "driver.js",
|
||||
"js": [
|
||||
"dist/driver.js.iife.js"
|
||||
],
|
||||
"css": [
|
||||
"dist/driver.css"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,46 +1,41 @@
|
||||
{
|
||||
"name": "@tabler/core",
|
||||
"version": "1.5.0",
|
||||
"version": "1.4.0",
|
||||
"description": "Premium and Open Source dashboard template with responsive and high quality UI.",
|
||||
"homepage": "https://tabler.io",
|
||||
"scripts": {
|
||||
"dev": "pnpm run clean && pnpm run copy && pnpm run watch",
|
||||
"build": "pnpm run clean && pnpm run build-assets && pnpm run copy && pnpm run generate-sri",
|
||||
"build-assets": "concurrently \"pnpm run css\" \"pnpm run js\"",
|
||||
"build": "pnpm run clean && pnpm run css && pnpm run js && pnpm run copy && pnpm run generate-sri",
|
||||
"clean": "shx rm -rf dist demo",
|
||||
"css": "pnpm run css-compile && pnpm run css-prefix && pnpm run css-rtl && pnpm run css-minify && pnpm run css-banner",
|
||||
"css-compile": "sass --no-source-map --load-path=node_modules --style expanded scss/:dist/css/",
|
||||
"css-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\"",
|
||||
"css-minify": "concurrently \"pnpm run css-minify-main\" \"pnpm run css-minify-rtl\"",
|
||||
"css-minify": "pnpm run css-minify-main && pnpm run css-minify-rtl",
|
||||
"css-minify-main": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*.css\" \"!dist/css/*.min.css\" \"!dist/css/*rtl*.css\"",
|
||||
"css-minify-rtl": "cleancss -O1 --format breakWith=lf --with-rebase --source-map --source-map-inline-sources --output dist/css/ --batch --batch-suffix \".min\" \"dist/css/*rtl.css\" \"!dist/css/*.min.css\"",
|
||||
"css-lint": "pnpm run css-lint-variables",
|
||||
"css-lint-variables": "find-unused-sass-variables scss/ node_modules/bootstrap/scss/",
|
||||
"js": "pnpm run js-compile && pnpm run js-minify",
|
||||
"js-compile": "concurrently \"pnpm run js-compile-standalone\" \"pnpm run js-compile-standalone-esm\" \"pnpm run js-compile-theme\" \"pnpm run js-compile-theme-esm\"",
|
||||
"js-compile": "pnpm run js-compile-standalone && pnpm run js-compile-standalone-esm && pnpm run js-compile-theme && pnpm run js-compile-theme-esm",
|
||||
"js-compile-theme-esm": "rollup --environment THEME:true --environment ESM:true --config .build/rollup.config.mjs --sourcemap",
|
||||
"js-compile-theme": "rollup --environment THEME:true --config .build/rollup.config.mjs --sourcemap",
|
||||
"js-compile-standalone": "rollup --config .build/rollup.config.mjs --sourcemap",
|
||||
"js-compile-standalone-esm": "rollup --environment ESM:true --config .build/rollup.config.mjs --sourcemap",
|
||||
"js-minify": "concurrently \"pnpm run js-minify-standalone\" \"pnpm run js-minify-standalone-esm\" \"pnpm run js-minify-theme\" \"pnpm run js-minify-theme-esm\"",
|
||||
"js-minify": "pnpm run js-minify-standalone && pnpm run js-minify-standalone-esm && pnpm run js-minify-theme && pnpm run js-minify-theme-esm",
|
||||
"js-minify-standalone": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/tabler.js.map,includeSources,url=tabler.min.js.map\" --output dist/js/tabler.min.js dist/js/tabler.js",
|
||||
"js-minify-standalone-esm": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/tabler.esm.js.map,includeSources,url=tabler.esm.min.js.map\" --output dist/js/tabler.esm.min.js dist/js/tabler.esm.js",
|
||||
"js-minify-theme": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/tabler-theme.js.map,includeSources,url=tabler-theme.min.js.map\" --output dist/js/tabler-theme.min.js dist/js/tabler-theme.js",
|
||||
"js-minify-theme-esm": "terser --compress passes=2 --mangle --comments \"/^!/\" --source-map \"content=dist/js/tabler-theme.esm.js.map,includeSources,url=tabler-theme.esm.min.js.map\" --output dist/js/tabler-theme.esm.min.js dist/js/tabler-theme.esm.js",
|
||||
"copy": "concurrently \"pnpm run copy-img\" \"pnpm run copy-libs\" \"pnpm run copy-fonts\"",
|
||||
"copy": "pnpm run copy-img && pnpm run copy-libs",
|
||||
"copy-img": "shx mkdir -p dist/img && shx cp -rf img/* dist/img",
|
||||
"copy-libs": "node .build/copy-libs.mjs",
|
||||
"copy-fonts": "shx mkdir -p dist/fonts && shx cp -rf fonts/* dist/fonts",
|
||||
"import-fonts": "node .build/import-fonts.mjs",
|
||||
"watch": "concurrently \"pnpm run watch-css\" \"pnpm run watch-js\"",
|
||||
"watch-css": "nodemon --watch scss/ --ext scss --exec \"pnpm run css-compile && pnpm run css-prefix\"",
|
||||
"watch-js": "nodemon --watch js/ --ext js --exec \"pnpm run js-compile\"",
|
||||
"bundlewatch": "bundlewatch",
|
||||
"generate-sri": "node .build/generate-sri.js",
|
||||
"format:check": "prettier --check \"scss/**/*.scss\" \"js/**/*.js\" --cache",
|
||||
"format:write": "prettier --write \"scss/**/*.scss\" \"js/**/*.js\" --cache"
|
||||
"format:check": "prettier --check src/**/*.{js,scss} --cache",
|
||||
"format:write": "prettier --write src/**/*.{js,scss} --cache"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
@@ -151,35 +146,32 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@popperjs/core": "^2.11.8",
|
||||
"bootstrap": "5.3.8"
|
||||
"bootstrap": "5.3.7",
|
||||
"postcss-discard-comments": "^7.0.4"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@hotwired/turbo": "^8.0.18",
|
||||
"@hotwired/turbo": "^8.0.13",
|
||||
"@melloware/coloris": "^0.25.0",
|
||||
"apexcharts": "^5.3.6",
|
||||
"apexcharts": "3.54.1",
|
||||
"autosize": "^6.0.1",
|
||||
"choices.js": "^11.1.0",
|
||||
"clipboard": "^2.0.11",
|
||||
"countup.js": "^2.9.0",
|
||||
"dropzone": "^6.0.0-beta.2",
|
||||
"find-unused-sass-variables": "^6.1.0",
|
||||
"flatpickr": "^4.6.13",
|
||||
"fslightbox": "^3.7.4",
|
||||
"fullcalendar": "^6.1.19",
|
||||
"geist": "^1.5.1",
|
||||
"fslightbox": "^3.6.1",
|
||||
"fullcalendar": "^6.1.18",
|
||||
"hugerte": "^1.0.9",
|
||||
"imask": "^7.6.1",
|
||||
"jsvectormap": "^1.7.0",
|
||||
"list.js": "^2.3.1",
|
||||
"litepicker": "^2.0.12",
|
||||
"nouislider": "^15.8.1",
|
||||
"plyr": "^3.8.3",
|
||||
"signature_pad": "^5.1.1",
|
||||
"sortablejs": "^1.15.6",
|
||||
"plyr": "^3.7.8",
|
||||
"signature_pad": "^5.0.10",
|
||||
"star-rating.js": "^4.3.1",
|
||||
"tom-select": "^2.4.3",
|
||||
"typed.js": "^2.1.0",
|
||||
"driver.js": "^1.0.0"
|
||||
"typed.js": "^2.1.0"
|
||||
},
|
||||
"directories": {
|
||||
"doc": "docs"
|
||||
|
||||
@@ -1,30 +1,30 @@
|
||||
// Layout & components
|
||||
@import 'bootstrap/scss/root';
|
||||
@import 'bootstrap/scss/reboot';
|
||||
@import 'bootstrap/scss/type';
|
||||
@import 'bootstrap/scss/images';
|
||||
@import 'bootstrap/scss/containers';
|
||||
@import 'bootstrap/scss/grid';
|
||||
@import 'bootstrap/scss/tables';
|
||||
@import 'bootstrap/scss/forms';
|
||||
@import 'bootstrap/scss/buttons';
|
||||
@import 'bootstrap/scss/transitions';
|
||||
@import 'bootstrap/scss/dropdown';
|
||||
@import 'bootstrap/scss/button-group';
|
||||
@import 'bootstrap/scss/nav';
|
||||
@import 'bootstrap/scss/navbar';
|
||||
@import 'bootstrap/scss/card';
|
||||
@import 'bootstrap/scss/pagination';
|
||||
@import 'bootstrap/scss/progress';
|
||||
@import 'bootstrap/scss/list-group';
|
||||
@import 'bootstrap/scss/toasts';
|
||||
@import 'bootstrap/scss/modal';
|
||||
@import 'bootstrap/scss/tooltip';
|
||||
@import 'bootstrap/scss/popover';
|
||||
@import 'bootstrap/scss/carousel';
|
||||
@import 'bootstrap/scss/spinners';
|
||||
@import 'bootstrap/scss/offcanvas';
|
||||
@import 'bootstrap/scss/placeholders';
|
||||
@import "bootstrap/scss/root";
|
||||
@import "bootstrap/scss/reboot";
|
||||
@import "bootstrap/scss/type";
|
||||
@import "bootstrap/scss/images";
|
||||
@import "bootstrap/scss/containers";
|
||||
@import "bootstrap/scss/grid";
|
||||
@import "bootstrap/scss/tables";
|
||||
@import "bootstrap/scss/forms";
|
||||
@import "bootstrap/scss/buttons";
|
||||
@import "bootstrap/scss/transitions";
|
||||
@import "bootstrap/scss/dropdown";
|
||||
@import "bootstrap/scss/button-group";
|
||||
@import "bootstrap/scss/nav";
|
||||
@import "bootstrap/scss/navbar";
|
||||
@import "bootstrap/scss/card";
|
||||
@import "bootstrap/scss/pagination";
|
||||
@import "bootstrap/scss/progress";
|
||||
@import "bootstrap/scss/list-group";
|
||||
@import "bootstrap/scss/toasts";
|
||||
@import "bootstrap/scss/modal";
|
||||
@import "bootstrap/scss/tooltip";
|
||||
@import "bootstrap/scss/popover";
|
||||
@import "bootstrap/scss/carousel";
|
||||
@import "bootstrap/scss/spinners";
|
||||
@import "bootstrap/scss/offcanvas";
|
||||
@import "bootstrap/scss/placeholders";
|
||||
|
||||
// Utilities
|
||||
@import 'bootstrap/scss/utilities/api';
|
||||
@import "bootstrap/scss/utilities/api";
|
||||
|
||||
@@ -1,6 +1,9 @@
|
||||
// Config
|
||||
// @import "bootstrap/scss/variables";
|
||||
// @import "bootstrap/scss/variables-dark";
|
||||
// @import "bootstrap/scss/maps";
|
||||
@import 'bootstrap/scss/mixins';
|
||||
// @import "bootstrap/scss/utilities";
|
||||
@import "bootstrap/scss/functions";
|
||||
@import "bootstrap-functions";
|
||||
|
||||
@import "bootstrap/scss/variables";
|
||||
@import "bootstrap/scss/variables-dark";
|
||||
@import "bootstrap/scss/maps";
|
||||
@import "bootstrap/scss/mixins";
|
||||
@import "bootstrap/scss/utilities";
|
||||
|
||||
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;
|
||||
}
|
||||
@@ -1,26 +1,24 @@
|
||||
@use 'sass:color';
|
||||
|
||||
@mixin caret($direction: down) {
|
||||
$selector: 'after';
|
||||
$selector: "after";
|
||||
|
||||
@if $direction == 'left' {
|
||||
$selector: 'before';
|
||||
@if $direction == "left" {
|
||||
$selector: "before";
|
||||
}
|
||||
|
||||
&:#{$selector} {
|
||||
content: '';
|
||||
content: "";
|
||||
display: inline-block;
|
||||
vertical-align: $caret-vertical-align;
|
||||
width: $caret-width;
|
||||
height: $caret-width;
|
||||
border-bottom: 1px var(--#{$prefix}border-style);
|
||||
border-inline-start: 1px var(--#{$prefix}border-style);
|
||||
margin-inline-end: 0.1em;
|
||||
border-left: 1px var(--#{$prefix}border-style);
|
||||
margin-right: 0.1em;
|
||||
|
||||
@if $direction != 'left' {
|
||||
margin-inline-start: $caret-spacing;
|
||||
@if $direction != "left" {
|
||||
margin-left: $caret-spacing;
|
||||
} @else {
|
||||
margin-inline-end: $caret-spacing;
|
||||
margin-right: $caret-spacing;
|
||||
}
|
||||
|
||||
@if $direction == down {
|
||||
@@ -34,7 +32,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
@if $direction == 'left' {
|
||||
@if $direction == "left" {
|
||||
&:after {
|
||||
content: none;
|
||||
}
|
||||
@@ -45,17 +43,31 @@
|
||||
// Override bootstrap core
|
||||
}
|
||||
|
||||
@mixin button-variant($background: null, $border: null, $color: null, $hover-background: null, $hover-border: null, $hover-color: null, $active-background: null, $active-border: null, $active-color: null, $disabled-background: null, $disabled-border: null, $disabled-color: null) {
|
||||
@mixin button-variant(
|
||||
$background: null,
|
||||
$border: null,
|
||||
$color: null,
|
||||
$hover-background: null,
|
||||
$hover-border: null,
|
||||
$hover-color: null,
|
||||
$active-background: null,
|
||||
$active-border: null,
|
||||
$active-color: null,
|
||||
$disabled-background: null,
|
||||
$disabled-border: null,
|
||||
$disabled-color: null
|
||||
) {
|
||||
// Override bootstrap core
|
||||
}
|
||||
|
||||
@mixin button-outline-variant($color: null, $color-hover: null, $active-background: null, $active-border: null, $active-color: null) {
|
||||
@mixin button-outline-variant(
|
||||
$color: null,
|
||||
$color-hover: null,
|
||||
$active-background: null,
|
||||
$active-border: null,
|
||||
$active-color: null
|
||||
) {
|
||||
// Override bootstrap core
|
||||
}
|
||||
|
||||
//
|
||||
// TODO: remove when https://github.com/twbs/bootstrap/pull/37425/ will be released
|
||||
//
|
||||
@function opaque($background, $foreground) {
|
||||
@return color.mix(rgba($foreground, 1), $background, color.alpha($foreground) * 100%);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,8 +1,10 @@
|
||||
@import 'mixins';
|
||||
@import 'variables';
|
||||
@import 'variables-dark';
|
||||
@import 'maps';
|
||||
@import 'utilities';
|
||||
@import "bootstrap/scss/functions";
|
||||
@import "bootstrap-functions";
|
||||
|
||||
@import 'bootstrap-config';
|
||||
@import 'bootstrap-override';
|
||||
@import "mixins";
|
||||
@import "variables";
|
||||
@import "variables-dark";
|
||||
@import "utilities";
|
||||
|
||||
@import "bootstrap-config";
|
||||
@import "bootstrap-override";
|
||||
|
||||
@@ -1,80 +1,84 @@
|
||||
@import 'config';
|
||||
@import 'bootstrap-components';
|
||||
@import "config";
|
||||
@import "bootstrap-components";
|
||||
|
||||
@import 'props';
|
||||
@import "props";
|
||||
|
||||
@import 'fonts/webfonts';
|
||||
@import 'fonts/geist';
|
||||
@import "fonts/webfonts";
|
||||
|
||||
@import 'layout/root';
|
||||
@import 'layout/animations';
|
||||
@import 'layout/core';
|
||||
@import 'layout/navbar';
|
||||
@import 'layout/page';
|
||||
@import 'layout/footer';
|
||||
@import 'layout/dark';
|
||||
@import "layout/root";
|
||||
@import "layout/animations";
|
||||
@import "layout/core";
|
||||
@import "layout/navbar";
|
||||
@import "layout/page";
|
||||
@import "layout/footer";
|
||||
@import "layout/dark";
|
||||
|
||||
@import 'ui/accordion';
|
||||
@import 'ui/alerts';
|
||||
@import 'ui/avatars';
|
||||
@import 'ui/badges';
|
||||
@import 'ui/breadcrumbs';
|
||||
@import 'ui/buttons';
|
||||
@import 'ui/button-group';
|
||||
@import 'ui/calendars';
|
||||
@import 'ui/carousel';
|
||||
@import 'ui/cards';
|
||||
@import 'ui/close';
|
||||
@import 'ui/dropdowns';
|
||||
@import 'ui/datagrid';
|
||||
@import 'ui/empty';
|
||||
@import 'ui/grid';
|
||||
@import 'ui/icons';
|
||||
@import 'ui/images';
|
||||
@import 'ui/forms';
|
||||
@import 'ui/forms/form-icon';
|
||||
@import 'ui/forms/form-colorinput';
|
||||
@import 'ui/forms/form-imagecheck';
|
||||
@import 'ui/forms/form-selectgroup';
|
||||
@import 'ui/forms/form-custom';
|
||||
@import 'ui/forms/form-check';
|
||||
@import 'ui/forms/validation';
|
||||
@import 'ui/legend';
|
||||
@import 'ui/lists';
|
||||
@import 'ui/loaders';
|
||||
@import 'ui/login';
|
||||
@import 'ui/modals';
|
||||
@import 'ui/nav';
|
||||
@import 'ui/stars';
|
||||
@import 'ui/pagination';
|
||||
@import 'ui/popovers';
|
||||
@import 'ui/progress';
|
||||
@import 'ui/ribbons';
|
||||
@import 'ui/markdown';
|
||||
@import 'ui/placeholder';
|
||||
@import 'ui/segmented';
|
||||
@import 'ui/steps';
|
||||
@import 'ui/status';
|
||||
@import 'ui/switch-icon';
|
||||
@import 'ui/tables';
|
||||
@import 'ui/tags';
|
||||
@import 'ui/toasts';
|
||||
@import 'ui/toolbar';
|
||||
@import 'ui/tracking';
|
||||
@import 'ui/timeline';
|
||||
@import 'ui/type';
|
||||
@import 'ui/charts';
|
||||
@import 'ui/offcanvas';
|
||||
@import 'ui/chat';
|
||||
@import 'ui/signature';
|
||||
@import "ui/accordion";
|
||||
@import "ui/alerts";
|
||||
@import "ui/avatars";
|
||||
@import "ui/badges";
|
||||
@import "ui/breadcrumbs";
|
||||
@import "ui/buttons";
|
||||
@import "ui/button-group";
|
||||
@import "ui/calendars";
|
||||
@import "ui/carousel";
|
||||
@import "ui/cards";
|
||||
@import "ui/close";
|
||||
@import "ui/dropdowns";
|
||||
@import "ui/datagrid";
|
||||
@import "ui/empty";
|
||||
@import "ui/grid";
|
||||
@import "ui/icons";
|
||||
@import "ui/images";
|
||||
@import "ui/forms";
|
||||
@import "ui/forms/form-icon";
|
||||
@import "ui/forms/form-colorinput";
|
||||
@import "ui/forms/form-imagecheck";
|
||||
@import "ui/forms/form-selectgroup";
|
||||
@import "ui/forms/form-custom";
|
||||
@import "ui/forms/form-check";
|
||||
@import "ui/forms/validation";
|
||||
@import "ui/legend";
|
||||
@import "ui/lists";
|
||||
@import "ui/loaders";
|
||||
@import "ui/login";
|
||||
@import "ui/modals";
|
||||
@import "ui/nav";
|
||||
@import "ui/stars";
|
||||
@import "ui/pagination";
|
||||
@import "ui/popovers";
|
||||
@import "ui/progress";
|
||||
@import "ui/ribbons";
|
||||
@import "ui/markdown";
|
||||
@import "ui/placeholder";
|
||||
@import "ui/segmented";
|
||||
@import "ui/steps";
|
||||
@import "ui/status";
|
||||
@import "ui/switch-icon";
|
||||
@import "ui/tables";
|
||||
@import "ui/tags";
|
||||
@import "ui/toasts";
|
||||
@import "ui/toolbar";
|
||||
@import "ui/tracking";
|
||||
@import "ui/timeline";
|
||||
@import "ui/type";
|
||||
@import "ui/charts";
|
||||
@import "ui/offcanvas";
|
||||
@import "ui/chat";
|
||||
@import "ui/signature";
|
||||
|
||||
@import 'helpers/index';
|
||||
@import "helpers/index";
|
||||
|
||||
@import 'utils/background';
|
||||
@import 'utils/colors';
|
||||
@import 'utils/scroll';
|
||||
@import 'utils/sizing';
|
||||
@import 'utils/opacity';
|
||||
@import 'utils/shadow';
|
||||
@import 'utils/text';
|
||||
@import 'utils/hover';
|
||||
@import "utils/background";
|
||||
@import "utils/colors";
|
||||
@import "utils/scroll";
|
||||
@import "utils/sizing";
|
||||
@import "utils/opacity";
|
||||
@import "utils/shadow";
|
||||
@import "utils/text";
|
||||
@import "utils/hover";
|
||||
|
||||
@import "debug";
|
||||
|
||||
|
||||
@import "debug";
|
||||
49
core/scss/_debug.scss
Normal file
49
core/scss/_debug.scss
Normal file
@@ -0,0 +1,49 @@
|
||||
$debug: false;
|
||||
|
||||
@if $debug {
|
||||
$colors: (
|
||||
"blue": $blue,
|
||||
"azure": $azure,
|
||||
"indigo": $indigo,
|
||||
"purple": $purple,
|
||||
"pink": $pink,
|
||||
"red": $red,
|
||||
"orange": $orange,
|
||||
"yellow": $yellow,
|
||||
"lime": $lime,
|
||||
"green": $green,
|
||||
"teal": $teal,
|
||||
"cyan": $cyan,
|
||||
);
|
||||
|
||||
@each $name, $color in $colors {
|
||||
@debug ("#{$name}: '#{$color}'");
|
||||
@debug ("#{$name}-100: '#{tint-color($color, 8)}'");
|
||||
@debug ("#{$name}-200: '#{tint-color($color, 6)}'");
|
||||
@debug ("#{$name}-300: '#{tint-color($color, 4)}'");
|
||||
@debug ("#{$name}-400: '#{tint-color($color, 2)}'");
|
||||
@debug ("#{$name}-500: '#{$color}'");
|
||||
@debug ("#{$name}-600: '#{shade-color($color, 2)}'");
|
||||
@debug ("#{$name}-700: '#{shade-color($color, 4)}'");
|
||||
@debug ("#{$name}-800: '#{shade-color($color, 6)}'");
|
||||
@debug ("#{$name}-900: '#{shade-color($color, 8)}'");
|
||||
}
|
||||
|
||||
@debug ("gray: '#{$gray-500}'");
|
||||
@debug ("gray-100: '#{$gray-100}'");
|
||||
@debug ("gray-200: '#{$gray-200}'");
|
||||
@debug ("gray-300: '#{$gray-300}'");
|
||||
@debug ("gray-400: '#{$gray-400}'");
|
||||
@debug ("gray-500: '#{$gray-500}'");
|
||||
@debug ("gray-600: '#{$gray-600}'");
|
||||
@debug ("gray-700: '#{$gray-700}'");
|
||||
@debug ("gray-800: '#{$gray-800}'");
|
||||
@debug ("gray-900: '#{$gray-900}'");
|
||||
|
||||
@debug ("border-color: '#{$border-color}'");
|
||||
@debug ("text-secondary: '#{$text-secondary}'");
|
||||
|
||||
@each $name, $color in $social-colors {
|
||||
@debug ("#{$name}: '#{$color}'");
|
||||
}
|
||||
}
|
||||
@@ -1,155 +0,0 @@
|
||||
@use 'sass:map';
|
||||
|
||||
// Re-assigned maps
|
||||
//
|
||||
// Placed here so that others can override the default Sass maps and see automatic updates to utilities and more.
|
||||
|
||||
$theme-colors-rgb: map-loop($theme-colors, to-rgb, '$value') !default;
|
||||
|
||||
$theme-colors-text: (
|
||||
'primary': $primary-text-emphasis,
|
||||
'secondary': $secondary-text-emphasis,
|
||||
'success': $success-text-emphasis,
|
||||
'info': $info-text-emphasis,
|
||||
'warning': $warning-text-emphasis,
|
||||
'danger': $danger-text-emphasis,
|
||||
'light': $light-text-emphasis,
|
||||
'dark': $dark-text-emphasis,
|
||||
) !default;
|
||||
|
||||
$theme-colors-bg-subtle: (
|
||||
'primary': $primary-bg-subtle,
|
||||
'secondary': $secondary-bg-subtle,
|
||||
'success': $success-bg-subtle,
|
||||
'info': $info-bg-subtle,
|
||||
'warning': $warning-bg-subtle,
|
||||
'danger': $danger-bg-subtle,
|
||||
'light': $light-bg-subtle,
|
||||
'dark': $dark-bg-subtle,
|
||||
) !default;
|
||||
|
||||
$theme-colors-border-subtle: (
|
||||
'primary': $primary-border-subtle,
|
||||
'secondary': $secondary-border-subtle,
|
||||
'success': $success-border-subtle,
|
||||
'info': $info-border-subtle,
|
||||
'warning': $warning-border-subtle,
|
||||
'danger': $danger-border-subtle,
|
||||
'light': $light-border-subtle,
|
||||
'dark': $dark-border-subtle,
|
||||
) !default;
|
||||
|
||||
$theme-colors-text-dark: null !default;
|
||||
$theme-colors-bg-subtle-dark: null !default;
|
||||
$theme-colors-border-subtle-dark: null !default;
|
||||
|
||||
@if $enable-dark-mode {
|
||||
$theme-colors-text-dark: (
|
||||
'primary': $primary-text-emphasis-dark,
|
||||
'secondary': $secondary-text-emphasis-dark,
|
||||
'success': $success-text-emphasis-dark,
|
||||
'info': $info-text-emphasis-dark,
|
||||
'warning': $warning-text-emphasis-dark,
|
||||
'danger': $danger-text-emphasis-dark,
|
||||
'light': $light-text-emphasis-dark,
|
||||
'dark': $dark-text-emphasis-dark,
|
||||
) !default;
|
||||
|
||||
$theme-colors-bg-subtle-dark: (
|
||||
'primary': $primary-bg-subtle-dark,
|
||||
'secondary': $secondary-bg-subtle-dark,
|
||||
'success': $success-bg-subtle-dark,
|
||||
'info': $info-bg-subtle-dark,
|
||||
'warning': $warning-bg-subtle-dark,
|
||||
'danger': $danger-bg-subtle-dark,
|
||||
'light': $light-bg-subtle-dark,
|
||||
'dark': $dark-bg-subtle-dark,
|
||||
) !default;
|
||||
|
||||
$theme-colors-border-subtle-dark: (
|
||||
'primary': $primary-border-subtle-dark,
|
||||
'secondary': $secondary-border-subtle-dark,
|
||||
'success': $success-border-subtle-dark,
|
||||
'info': $info-border-subtle-dark,
|
||||
'warning': $warning-border-subtle-dark,
|
||||
'danger': $danger-border-subtle-dark,
|
||||
'light': $light-border-subtle-dark,
|
||||
'dark': $dark-border-subtle-dark,
|
||||
) !default;
|
||||
}
|
||||
|
||||
// Utilities maps
|
||||
//
|
||||
// Extends the default `$theme-colors` maps to help create our utilities.
|
||||
|
||||
// Come v6, we'll de-dupe these variables. Until then, for backward compatibility, we keep them to reassign.
|
||||
|
||||
$utilities-colors: $theme-colors-rgb !default;
|
||||
|
||||
$utilities-text: map.merge(
|
||||
$utilities-colors,
|
||||
(
|
||||
'black': to-rgb($black),
|
||||
'white': to-rgb($white),
|
||||
'body': to-rgb($body-color),
|
||||
)
|
||||
) !default;
|
||||
$utilities-text-colors: map-loop($utilities-text, rgba-css-var, '$key', 'text') !default;
|
||||
|
||||
$utilities-text-emphasis-colors: (
|
||||
'primary-emphasis': var(--#{$prefix}primary-text-emphasis),
|
||||
'secondary-emphasis': var(--#{$prefix}secondary-text-emphasis),
|
||||
'success-emphasis': var(--#{$prefix}success-text-emphasis),
|
||||
'info-emphasis': var(--#{$prefix}info-text-emphasis),
|
||||
'warning-emphasis': var(--#{$prefix}warning-text-emphasis),
|
||||
'danger-emphasis': var(--#{$prefix}danger-text-emphasis),
|
||||
'light-emphasis': var(--#{$prefix}light-text-emphasis),
|
||||
'dark-emphasis': var(--#{$prefix}dark-text-emphasis),
|
||||
) !default;
|
||||
|
||||
$utilities-bg: map.merge(
|
||||
$utilities-colors,
|
||||
(
|
||||
'black': to-rgb($black),
|
||||
'white': to-rgb($white),
|
||||
'body': to-rgb($body-bg),
|
||||
)
|
||||
) !default;
|
||||
$utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, '$key', 'bg') !default;
|
||||
|
||||
$utilities-bg-subtle: (
|
||||
'primary-subtle': var(--#{$prefix}primary-bg-subtle),
|
||||
'secondary-subtle': var(--#{$prefix}secondary-bg-subtle),
|
||||
'success-subtle': var(--#{$prefix}success-bg-subtle),
|
||||
'info-subtle': var(--#{$prefix}info-bg-subtle),
|
||||
'warning-subtle': var(--#{$prefix}warning-bg-subtle),
|
||||
'danger-subtle': var(--#{$prefix}danger-bg-subtle),
|
||||
'light-subtle': var(--#{$prefix}light-bg-subtle),
|
||||
'dark-subtle': var(--#{$prefix}dark-bg-subtle),
|
||||
) !default;
|
||||
|
||||
$utilities-border: map.merge(
|
||||
$utilities-colors,
|
||||
(
|
||||
'black': to-rgb($black),
|
||||
'white': to-rgb($white),
|
||||
)
|
||||
) !default;
|
||||
$utilities-border-colors: map-loop($utilities-border, rgba-css-var, '$key', 'border') !default;
|
||||
|
||||
$utilities-border-subtle: (
|
||||
'primary-subtle': var(--#{$prefix}primary-border-subtle),
|
||||
'secondary-subtle': var(--#{$prefix}secondary-border-subtle),
|
||||
'success-subtle': var(--#{$prefix}success-border-subtle),
|
||||
'info-subtle': var(--#{$prefix}info-border-subtle),
|
||||
'warning-subtle': var(--#{$prefix}warning-border-subtle),
|
||||
'danger-subtle': var(--#{$prefix}danger-border-subtle),
|
||||
'light-subtle': var(--#{$prefix}light-border-subtle),
|
||||
'dark-subtle': var(--#{$prefix}dark-border-subtle),
|
||||
) !default;
|
||||
|
||||
$utilities-links-underline: map-loop($utilities-colors, rgba-css-var, '$key', 'link-underline') !default;
|
||||
|
||||
$negative-spacers: if($enable-negative-margins, negativify-map($spacers), null) !default;
|
||||
|
||||
$gutters: $spacers !default;
|
||||
@@ -1,2 +1,2 @@
|
||||
@import 'mixins/mixins';
|
||||
@import 'mixins/functions';
|
||||
@import "mixins/mixins";
|
||||
@import "mixins/functions";
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
@use 'sass:map';
|
||||
@import 'config';
|
||||
@use "sass:map";
|
||||
@import "config";
|
||||
|
||||
:root,
|
||||
:host {
|
||||
@@ -32,7 +32,6 @@
|
||||
|
||||
/** Theme colors */
|
||||
@each $name, $color in map.merge($theme-colors, $social-colors) {
|
||||
@debug contrast-ratio($color, white), $name, $min-contrast-ratio;
|
||||
--#{$prefix}#{$name}: #{$color};
|
||||
--#{$prefix}#{$name}-rgb: #{to-rgb($color)};
|
||||
--#{$prefix}#{$name}-fg: #{if(contrast-ratio($color) > $min-contrast-ratio, var(--#{$prefix}light), var(--#{$prefix}dark))};
|
||||
|
||||
@@ -1,158 +1,167 @@
|
||||
@use 'sass:map';
|
||||
@use "sass:map";
|
||||
|
||||
$negative-spacers-extra: if($enable-negative-margins, negativify-map(map.merge($spacers, $spacers-extra)), null);
|
||||
$negative-spacers-extra: if(
|
||||
$enable-negative-margins,
|
||||
negativify-map(map.merge($spacers, $spacers-extra)),
|
||||
null
|
||||
);
|
||||
|
||||
$utilities: (
|
||||
// Margin utilities
|
||||
'margin': (
|
||||
"margin":
|
||||
(
|
||||
responsive: true,
|
||||
property: margin,
|
||||
class: m,
|
||||
values: $spacers-extra,
|
||||
),
|
||||
'margin-x': (
|
||||
"margin-x": (
|
||||
responsive: true,
|
||||
property: margin-inline-end margin-inline-start,
|
||||
property: margin-right margin-left,
|
||||
class: mx,
|
||||
values: $spacers-extra,
|
||||
),
|
||||
'margin-y': (
|
||||
"margin-y": (
|
||||
responsive: true,
|
||||
property: margin-top margin-bottom,
|
||||
class: my,
|
||||
values: $spacers-extra,
|
||||
),
|
||||
'margin-top': (
|
||||
"margin-top": (
|
||||
responsive: true,
|
||||
property: margin-top,
|
||||
class: mt,
|
||||
values: $spacers-extra,
|
||||
),
|
||||
'margin-end': (
|
||||
"margin-end": (
|
||||
responsive: true,
|
||||
property: margin-inline-end,
|
||||
property: margin-right,
|
||||
class: me,
|
||||
values: $spacers-extra,
|
||||
),
|
||||
'margin-bottom': (
|
||||
"margin-bottom": (
|
||||
responsive: true,
|
||||
property: margin-bottom,
|
||||
class: mb,
|
||||
values: $spacers-extra,
|
||||
),
|
||||
'margin-start': (
|
||||
"margin-start": (
|
||||
responsive: true,
|
||||
property: margin-inline-start,
|
||||
property: margin-left,
|
||||
class: ms,
|
||||
values: $spacers-extra,
|
||||
),
|
||||
// Negative margin utilities
|
||||
'negative-margin': (
|
||||
"negative-margin":
|
||||
(
|
||||
responsive: true,
|
||||
property: margin,
|
||||
class: m,
|
||||
values: $negative-spacers-extra,
|
||||
),
|
||||
'negative-margin-x': (
|
||||
"negative-margin-x": (
|
||||
responsive: true,
|
||||
property: margin-inline-end margin-inline-start,
|
||||
property: margin-right margin-left,
|
||||
class: mx,
|
||||
values: $negative-spacers-extra,
|
||||
),
|
||||
'negative-margin-y': (
|
||||
"negative-margin-y": (
|
||||
responsive: true,
|
||||
property: margin-top margin-bottom,
|
||||
class: my,
|
||||
values: $negative-spacers-extra,
|
||||
),
|
||||
'negative-margin-top': (
|
||||
"negative-margin-top": (
|
||||
responsive: true,
|
||||
property: margin-top,
|
||||
class: mt,
|
||||
values: $negative-spacers-extra,
|
||||
),
|
||||
'negative-margin-end': (
|
||||
"negative-margin-end": (
|
||||
responsive: true,
|
||||
property: margin-inline-end,
|
||||
property: margin-right,
|
||||
class: me,
|
||||
values: $negative-spacers-extra,
|
||||
),
|
||||
'negative-margin-bottom': (
|
||||
"negative-margin-bottom": (
|
||||
responsive: true,
|
||||
property: margin-bottom,
|
||||
class: mb,
|
||||
values: $negative-spacers-extra,
|
||||
),
|
||||
'negative-margin-start': (
|
||||
"negative-margin-start": (
|
||||
responsive: true,
|
||||
property: margin-inline-start,
|
||||
property: margin-left,
|
||||
class: ms,
|
||||
values: $negative-spacers-extra,
|
||||
),
|
||||
// Padding utilities
|
||||
'padding': (
|
||||
"padding":
|
||||
(
|
||||
responsive: true,
|
||||
property: padding,
|
||||
class: p,
|
||||
values: $spacers-extra,
|
||||
),
|
||||
'padding-x': (
|
||||
"padding-x": (
|
||||
responsive: true,
|
||||
property: padding-inline-end padding-inline-start,
|
||||
property: padding-right padding-left,
|
||||
class: px,
|
||||
values: $spacers-extra,
|
||||
),
|
||||
'padding-y': (
|
||||
"padding-y": (
|
||||
responsive: true,
|
||||
property: padding-top padding-bottom,
|
||||
class: py,
|
||||
values: $spacers-extra,
|
||||
),
|
||||
'padding-top': (
|
||||
"padding-top": (
|
||||
responsive: true,
|
||||
property: padding-top,
|
||||
class: pt,
|
||||
values: $spacers-extra,
|
||||
),
|
||||
'padding-end': (
|
||||
"padding-end": (
|
||||
responsive: true,
|
||||
property: padding-inline-end,
|
||||
property: padding-right,
|
||||
class: pe,
|
||||
values: $spacers-extra,
|
||||
),
|
||||
'padding-bottom': (
|
||||
"padding-bottom": (
|
||||
responsive: true,
|
||||
property: padding-bottom,
|
||||
class: pb,
|
||||
values: $spacers-extra,
|
||||
),
|
||||
'padding-start': (
|
||||
"padding-start": (
|
||||
responsive: true,
|
||||
property: padding-inline-start,
|
||||
property: padding-left,
|
||||
class: ps,
|
||||
values: $spacers-extra,
|
||||
),
|
||||
// Gap utility
|
||||
'gap': (
|
||||
"gap":
|
||||
(
|
||||
responsive: true,
|
||||
property: gap,
|
||||
class: gap,
|
||||
values: $spacers-extra,
|
||||
),
|
||||
'row-gap': (
|
||||
"row-gap": (
|
||||
responsive: true,
|
||||
property: row-gap,
|
||||
class: row-gap,
|
||||
values: $spacers-extra,
|
||||
),
|
||||
'column-gap': (
|
||||
"column-gap": (
|
||||
responsive: true,
|
||||
property: column-gap,
|
||||
class: column-gap,
|
||||
values: $spacers-extra,
|
||||
),
|
||||
// Letter spacing
|
||||
'spacing': (
|
||||
"spacing":
|
||||
(
|
||||
property: letter-spacing,
|
||||
class: tracking,
|
||||
values: (
|
||||
@@ -161,38 +170,38 @@ $utilities: (
|
||||
wide: $spacing-wide,
|
||||
),
|
||||
),
|
||||
'width': (
|
||||
"width": (
|
||||
property: width,
|
||||
class: w,
|
||||
values: $spacers-extra,
|
||||
),
|
||||
'height': (
|
||||
"height": (
|
||||
property: height,
|
||||
class: h,
|
||||
values: $spacers-extra,
|
||||
),
|
||||
'filter': (
|
||||
"filter": (
|
||||
property: filter,
|
||||
class: filter,
|
||||
values: (
|
||||
grayscale: grayscale(100%),
|
||||
),
|
||||
),
|
||||
'gutter-x': (
|
||||
"gutter-x": (
|
||||
responsive: true,
|
||||
css-var: true,
|
||||
css-variable-name: gutter-x,
|
||||
class: gx,
|
||||
values: $spacers-extra,
|
||||
),
|
||||
'gutter-y': (
|
||||
"gutter-y": (
|
||||
responsive: true,
|
||||
css-var: true,
|
||||
css-variable-name: gutter-y,
|
||||
class: gy,
|
||||
values: $spacers-extra,
|
||||
),
|
||||
'gutter': (
|
||||
"gutter": (
|
||||
responsive: true,
|
||||
css-var: true,
|
||||
css-variable-name: gutter-x,
|
||||
|
||||
@@ -1,127 +1,19 @@
|
||||
@use 'sass:map';
|
||||
|
||||
$border-values: (
|
||||
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color-translucent),
|
||||
wide: $border-width-wide var(--#{$prefix}border-style) var(--#{$prefix}border-color-translucent),
|
||||
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style)
|
||||
var(--#{$prefix}border-color-translucent),
|
||||
wide: $border-width-wide var(--#{$prefix}border-style)
|
||||
var(--#{$prefix}border-color-translucent),
|
||||
0: 0,
|
||||
);
|
||||
|
||||
$utilities-border-colors: map-loop(
|
||||
(
|
||||
'red': red,
|
||||
'green': green,
|
||||
),
|
||||
rgba-css-var,
|
||||
'$key',
|
||||
'border'
|
||||
) !default;
|
||||
$utilities-border-colors: map-loop((
|
||||
"red": red,
|
||||
"green": green,
|
||||
), rgba-css-var, "$key", "border") !default;
|
||||
|
||||
//Utilities
|
||||
$utilities: (
|
||||
'align': (
|
||||
property: vertical-align,
|
||||
class: align,
|
||||
values: baseline top middle bottom text-bottom text-top,
|
||||
),
|
||||
'float': (
|
||||
responsive: true,
|
||||
property: float,
|
||||
values: (
|
||||
start: left,
|
||||
end: right,
|
||||
none: none,
|
||||
),
|
||||
),
|
||||
// Object Fit utilities
|
||||
'object-fit': (
|
||||
responsive: true,
|
||||
property: object-fit,
|
||||
values: (
|
||||
contain: contain,
|
||||
cover: cover,
|
||||
fill: fill,
|
||||
scale: scale-down,
|
||||
none: none,
|
||||
),
|
||||
),
|
||||
// Opacity utilities
|
||||
'opacity': (
|
||||
property: opacity,
|
||||
values: (
|
||||
0: 0,
|
||||
25: 0.25,
|
||||
50: 0.5,
|
||||
75: 0.75,
|
||||
100: 1,
|
||||
),
|
||||
),
|
||||
'overflow': (
|
||||
property: overflow,
|
||||
values: auto hidden visible scroll,
|
||||
),
|
||||
'overflow-x': (
|
||||
property: overflow-x,
|
||||
values: auto hidden visible scroll,
|
||||
),
|
||||
'overflow-y': (
|
||||
property: overflow-y,
|
||||
values: auto hidden visible scroll,
|
||||
),
|
||||
'display': (
|
||||
responsive: true,
|
||||
print: true,
|
||||
property: display,
|
||||
class: d,
|
||||
values: inline inline-block block grid inline-grid table table-row table-cell flex inline-flex none,
|
||||
),
|
||||
'shadow': (
|
||||
property: box-shadow,
|
||||
class: shadow,
|
||||
values: (
|
||||
null: var(--#{$prefix}box-shadow),
|
||||
sm: var(--#{$prefix}box-shadow-sm),
|
||||
lg: var(--#{$prefix}box-shadow-lg),
|
||||
none: none,
|
||||
),
|
||||
),
|
||||
'focus-ring': (
|
||||
css-var: true,
|
||||
css-variable-name: focus-ring-color,
|
||||
class: focus-ring,
|
||||
values: map-loop($theme-colors-rgb, rgba-css-var, '$key', 'focus-ring'),
|
||||
),
|
||||
'position': (
|
||||
property: position,
|
||||
values: static relative absolute fixed sticky,
|
||||
),
|
||||
'top': (
|
||||
property: top,
|
||||
values: $position-values,
|
||||
),
|
||||
'bottom': (
|
||||
property: bottom,
|
||||
values: $position-values,
|
||||
),
|
||||
'start': (
|
||||
property: left,
|
||||
class: start,
|
||||
values: $position-values,
|
||||
),
|
||||
'end': (
|
||||
property: right,
|
||||
class: end,
|
||||
values: $position-values,
|
||||
),
|
||||
'translate-middle': (
|
||||
property: transform,
|
||||
class: translate-middle,
|
||||
values: (
|
||||
null: translate(-50%, -50%),
|
||||
x: translateX(-50%),
|
||||
y: translateY(-50%),
|
||||
),
|
||||
),
|
||||
'object': (
|
||||
"object": (
|
||||
property: object-fit,
|
||||
class: object,
|
||||
values: (
|
||||
@@ -132,7 +24,7 @@ $utilities: (
|
||||
none: none,
|
||||
),
|
||||
),
|
||||
'cursor': (
|
||||
"cursor": (
|
||||
property: cursor,
|
||||
class: cursor,
|
||||
values: (
|
||||
@@ -153,430 +45,72 @@ $utilities: (
|
||||
grabbing: grabbing,
|
||||
crosshair: crosshair,
|
||||
),
|
||||
),
|
||||
'border': (
|
||||
),
|
||||
"border": (
|
||||
property: border,
|
||||
values: $border-values,
|
||||
),
|
||||
'border-top': (
|
||||
"border-top": (
|
||||
property: border-top,
|
||||
values: $border-values,
|
||||
),
|
||||
'border-end': (
|
||||
"border-end": (
|
||||
class: border-end,
|
||||
property: border-inline-end,
|
||||
property: border-right,
|
||||
values: $border-values,
|
||||
),
|
||||
'border-bottom': (
|
||||
"border-bottom": (
|
||||
property: border-bottom,
|
||||
values: $border-values,
|
||||
),
|
||||
'border-start': (
|
||||
"border-start": (
|
||||
class: border-start,
|
||||
property: border-inline-start,
|
||||
property: border-left,
|
||||
values: $border-values,
|
||||
),
|
||||
'border-x': (
|
||||
"border-x": (
|
||||
class: border-x,
|
||||
property: border-inline-start border-inline-end,
|
||||
property: border-left border-right,
|
||||
values: $border-values,
|
||||
),
|
||||
'border-y': (
|
||||
"border-y": (
|
||||
class: border-y,
|
||||
property: border-top border-bottom,
|
||||
values: $border-values,
|
||||
),
|
||||
'border-color': (
|
||||
property: border-color,
|
||||
class: border,
|
||||
local-vars: (
|
||||
'border-opacity': 1,
|
||||
),
|
||||
values: $utilities-border-colors,
|
||||
),
|
||||
'subtle-border-color': (
|
||||
property: border-color,
|
||||
class: border,
|
||||
values: $utilities-border-subtle,
|
||||
),
|
||||
'border-width': (
|
||||
property: border-width,
|
||||
class: border,
|
||||
values: $border-widths,
|
||||
),
|
||||
'border-opacity': (
|
||||
css-var: true,
|
||||
class: border-opacity,
|
||||
values: (
|
||||
10: 0.1,
|
||||
25: 0.25,
|
||||
50: 0.5,
|
||||
75: 0.75,
|
||||
100: 1,
|
||||
),
|
||||
),
|
||||
'width': (
|
||||
"width": (
|
||||
property: width,
|
||||
class: w,
|
||||
values: $size-values,
|
||||
),
|
||||
'max-width': (
|
||||
property: max-width,
|
||||
class: mw,
|
||||
values: (
|
||||
100: 100%,
|
||||
),
|
||||
),
|
||||
'viewport-width': (
|
||||
property: width,
|
||||
class: vw,
|
||||
values: (
|
||||
100: 100vw,
|
||||
),
|
||||
),
|
||||
'min-viewport-width': (
|
||||
property: min-width,
|
||||
class: min-vw,
|
||||
values: (
|
||||
100: 100vw,
|
||||
),
|
||||
),
|
||||
'height': (
|
||||
"height": (
|
||||
property: height,
|
||||
class: h,
|
||||
values: $size-values,
|
||||
),
|
||||
'max-height': (
|
||||
property: max-height,
|
||||
class: mh,
|
||||
values: (
|
||||
100: 100%,
|
||||
),
|
||||
),
|
||||
'viewport-height': (
|
||||
property: height,
|
||||
class: vh,
|
||||
values: (
|
||||
100: 100vh,
|
||||
),
|
||||
),
|
||||
'min-viewport-height': (
|
||||
property: min-height,
|
||||
class: min-vh,
|
||||
values: (
|
||||
100: 100vh,
|
||||
),
|
||||
),
|
||||
'columns': (
|
||||
"columns": (
|
||||
property: columns,
|
||||
class: columns,
|
||||
responsive: true,
|
||||
values: 2 3 4,
|
||||
),
|
||||
// Flex utilities
|
||||
'flex': (
|
||||
responsive: true,
|
||||
property: flex,
|
||||
values: (
|
||||
fill: 1 1 auto,
|
||||
),
|
||||
),
|
||||
'flex-direction': (
|
||||
responsive: true,
|
||||
property: flex-direction,
|
||||
class: flex,
|
||||
values: row column row-reverse column-reverse,
|
||||
),
|
||||
'flex-grow': (
|
||||
responsive: true,
|
||||
property: flex-grow,
|
||||
class: flex,
|
||||
values: (
|
||||
grow-0: 0,
|
||||
grow-1: 1,
|
||||
),
|
||||
),
|
||||
'flex-shrink': (
|
||||
responsive: true,
|
||||
property: flex-shrink,
|
||||
class: flex,
|
||||
values: (
|
||||
shrink-0: 0,
|
||||
shrink-1: 1,
|
||||
),
|
||||
),
|
||||
'flex-wrap': (
|
||||
responsive: true,
|
||||
property: flex-wrap,
|
||||
class: flex,
|
||||
values: wrap nowrap wrap-reverse,
|
||||
),
|
||||
'justify-content': (
|
||||
responsive: true,
|
||||
property: justify-content,
|
||||
values: (
|
||||
start: flex-start,
|
||||
end: flex-end,
|
||||
center: center,
|
||||
between: space-between,
|
||||
around: space-around,
|
||||
evenly: space-evenly,
|
||||
),
|
||||
),
|
||||
'align-items': (
|
||||
responsive: true,
|
||||
property: align-items,
|
||||
values: (
|
||||
start: flex-start,
|
||||
end: flex-end,
|
||||
center: center,
|
||||
baseline: baseline,
|
||||
stretch: stretch,
|
||||
),
|
||||
),
|
||||
'align-content': (
|
||||
responsive: true,
|
||||
property: align-content,
|
||||
values: (
|
||||
start: flex-start,
|
||||
end: flex-end,
|
||||
center: center,
|
||||
between: space-between,
|
||||
around: space-around,
|
||||
stretch: stretch,
|
||||
),
|
||||
),
|
||||
'align-self': (
|
||||
responsive: true,
|
||||
property: align-self,
|
||||
values: (
|
||||
auto: auto,
|
||||
start: flex-start,
|
||||
end: flex-end,
|
||||
center: center,
|
||||
baseline: baseline,
|
||||
stretch: stretch,
|
||||
),
|
||||
),
|
||||
'order': (
|
||||
responsive: true,
|
||||
property: order,
|
||||
values: (
|
||||
first: -1,
|
||||
0: 0,
|
||||
1: 1,
|
||||
2: 2,
|
||||
3: 3,
|
||||
4: 4,
|
||||
5: 5,
|
||||
last: 6,
|
||||
),
|
||||
),
|
||||
// Margin utilities
|
||||
'margin': (
|
||||
responsive: true,
|
||||
property: margin,
|
||||
class: m,
|
||||
values: map.merge(
|
||||
$spacers,
|
||||
(
|
||||
auto: auto,
|
||||
)
|
||||
),
|
||||
),
|
||||
'margin-x': (
|
||||
responsive: true,
|
||||
property: margin-right margin-left,
|
||||
class: mx,
|
||||
values: map.merge(
|
||||
$spacers,
|
||||
(
|
||||
auto: auto,
|
||||
)
|
||||
),
|
||||
),
|
||||
'margin-y': (
|
||||
responsive: true,
|
||||
property: margin-top margin-bottom,
|
||||
class: my,
|
||||
values: map.merge(
|
||||
$spacers,
|
||||
(
|
||||
auto: auto,
|
||||
)
|
||||
),
|
||||
),
|
||||
'margin-top': (
|
||||
responsive: true,
|
||||
property: margin-top,
|
||||
class: mt,
|
||||
values: map.merge(
|
||||
$spacers,
|
||||
(
|
||||
auto: auto,
|
||||
)
|
||||
),
|
||||
),
|
||||
'margin-end': (
|
||||
responsive: true,
|
||||
property: margin-right,
|
||||
class: me,
|
||||
values: map.merge(
|
||||
$spacers,
|
||||
(
|
||||
auto: auto,
|
||||
)
|
||||
),
|
||||
),
|
||||
'margin-bottom': (
|
||||
responsive: true,
|
||||
property: margin-bottom,
|
||||
class: mb,
|
||||
values: map.merge(
|
||||
$spacers,
|
||||
(
|
||||
auto: auto,
|
||||
)
|
||||
),
|
||||
),
|
||||
'margin-start': (
|
||||
responsive: true,
|
||||
property: margin-left,
|
||||
class: ms,
|
||||
values: map.merge(
|
||||
$spacers,
|
||||
(
|
||||
auto: auto,
|
||||
)
|
||||
),
|
||||
),
|
||||
// Negative margin utilities
|
||||
'negative-margin': (
|
||||
responsive: true,
|
||||
property: margin,
|
||||
class: m,
|
||||
values: $negative-spacers,
|
||||
),
|
||||
'negative-margin-x': (
|
||||
responsive: true,
|
||||
property: margin-right margin-left,
|
||||
class: mx,
|
||||
values: $negative-spacers,
|
||||
),
|
||||
'negative-margin-y': (
|
||||
responsive: true,
|
||||
property: margin-top margin-bottom,
|
||||
class: my,
|
||||
values: $negative-spacers,
|
||||
),
|
||||
'negative-margin-top': (
|
||||
responsive: true,
|
||||
property: margin-top,
|
||||
class: mt,
|
||||
values: $negative-spacers,
|
||||
),
|
||||
'negative-margin-end': (
|
||||
responsive: true,
|
||||
property: margin-right,
|
||||
class: me,
|
||||
values: $negative-spacers,
|
||||
),
|
||||
'negative-margin-bottom': (
|
||||
responsive: true,
|
||||
property: margin-bottom,
|
||||
class: mb,
|
||||
values: $negative-spacers,
|
||||
),
|
||||
'negative-margin-start': (
|
||||
responsive: true,
|
||||
property: margin-left,
|
||||
class: ms,
|
||||
values: $negative-spacers,
|
||||
),
|
||||
// Padding utilities
|
||||
'padding': (
|
||||
responsive: true,
|
||||
property: padding,
|
||||
class: p,
|
||||
values: $spacers,
|
||||
),
|
||||
'padding-x': (
|
||||
responsive: true,
|
||||
property: padding-right padding-left,
|
||||
class: px,
|
||||
values: $spacers,
|
||||
),
|
||||
'padding-y': (
|
||||
responsive: true,
|
||||
property: padding-top padding-bottom,
|
||||
class: py,
|
||||
values: $spacers,
|
||||
),
|
||||
'padding-top': (
|
||||
responsive: true,
|
||||
property: padding-top,
|
||||
class: pt,
|
||||
values: $spacers,
|
||||
),
|
||||
'padding-end': (
|
||||
responsive: true,
|
||||
property: padding-right,
|
||||
class: pe,
|
||||
values: $spacers,
|
||||
),
|
||||
'padding-bottom': (
|
||||
responsive: true,
|
||||
property: padding-bottom,
|
||||
class: pb,
|
||||
values: $spacers,
|
||||
),
|
||||
'padding-start': (
|
||||
responsive: true,
|
||||
property: padding-left,
|
||||
class: ps,
|
||||
values: $spacers,
|
||||
),
|
||||
// Gap utility
|
||||
'gap': (
|
||||
responsive: true,
|
||||
property: gap,
|
||||
class: gap,
|
||||
values: $spacers,
|
||||
),
|
||||
'row-gap': (
|
||||
responsive: true,
|
||||
property: row-gap,
|
||||
class: row-gap,
|
||||
values: $spacers,
|
||||
),
|
||||
'column-gap': (
|
||||
responsive: true,
|
||||
property: column-gap,
|
||||
class: column-gap,
|
||||
values: $spacers,
|
||||
),
|
||||
'bg-pattern': (
|
||||
"bg-pattern": (
|
||||
property: background,
|
||||
class: bg-pattern,
|
||||
values: (
|
||||
transparent: #{url-svg('<svg width="16" height="16" viewBox="0 0 16 16"><rect x="0" y="0" width="8" height="8" fill="rgba(130, 130, 130, .1)" /><rect x="8" y="8" width="8" height="8" fill="rgba(130, 130, 130, .1)" /></svg>')} repeat center/16px 16px,
|
||||
),
|
||||
transparent: #{url-svg(
|
||||
'<svg width="16" height="16" viewBox="0 0 16 16"><rect x="0" y="0" width="8" height="8" fill="rgba(130, 130, 130, .1)" /><rect x="8" y="8" width="8" height="8" fill="rgba(130, 130, 130, .1)" /></svg>'
|
||||
)} repeat center/16px 16px,
|
||||
)
|
||||
),
|
||||
'bg-gradient': (
|
||||
"bg-gradient": (
|
||||
property: background,
|
||||
class: bg-gradient,
|
||||
values: (
|
||||
null: linear-gradient(var(--#{$prefix}gradient-direction, to right), var(--#{$prefix}gradient-stops, var(--#{$prefix}gradient-from, transparent), var(--#{$prefix}gradient-to, transparent))) no-repeat,
|
||||
),
|
||||
),
|
||||
'bg-blur': (
|
||||
property: backdrop-filter,
|
||||
class: bg-blur,
|
||||
values: (
|
||||
null: blur($backdrop-blur),
|
||||
),
|
||||
),
|
||||
'bg-gradient-direction': (
|
||||
"bg-gradient-direction": (
|
||||
property: --#{$prefix}gradient-direction,
|
||||
class: bg-gradient,
|
||||
values: (
|
||||
@@ -590,7 +124,7 @@ $utilities: (
|
||||
to-ts: to top left,
|
||||
),
|
||||
),
|
||||
'table-layout': (
|
||||
"table-layout": (
|
||||
property: table-layout,
|
||||
class: table,
|
||||
values: (
|
||||
@@ -598,300 +132,4 @@ $utilities: (
|
||||
fixed: fixed,
|
||||
),
|
||||
),
|
||||
// Text
|
||||
'font-family': (
|
||||
property: font-family,
|
||||
class: font,
|
||||
values: (
|
||||
monospace: var(--#{$prefix}font-monospace),
|
||||
),
|
||||
),
|
||||
'font-size': (
|
||||
property: font-size,
|
||||
class: fs,
|
||||
values: $font-sizes,
|
||||
),
|
||||
'font-style': (
|
||||
property: font-style,
|
||||
class: fst,
|
||||
values: italic normal,
|
||||
),
|
||||
'font-weight': (
|
||||
property: font-weight,
|
||||
class: fw,
|
||||
values: (
|
||||
lighter: $font-weight-lighter,
|
||||
light: $font-weight-light,
|
||||
normal: $font-weight-normal,
|
||||
medium: $font-weight-medium,
|
||||
semibold: $font-weight-semibold,
|
||||
bold: $font-weight-bold,
|
||||
bolder: $font-weight-bolder,
|
||||
),
|
||||
),
|
||||
'line-height': (
|
||||
property: line-height,
|
||||
class: lh,
|
||||
values: (
|
||||
1: 1,
|
||||
sm: $line-height-sm,
|
||||
base: $line-height-base,
|
||||
lg: $line-height-lg,
|
||||
),
|
||||
),
|
||||
'text-align': (
|
||||
responsive: true,
|
||||
property: text-align,
|
||||
class: text,
|
||||
values: (
|
||||
start: left,
|
||||
end: right,
|
||||
center: center,
|
||||
),
|
||||
),
|
||||
'text-decoration': (
|
||||
property: text-decoration,
|
||||
values: none underline line-through,
|
||||
),
|
||||
'text-transform': (
|
||||
property: text-transform,
|
||||
class: text,
|
||||
values: lowercase uppercase capitalize,
|
||||
),
|
||||
'white-space': (
|
||||
property: white-space,
|
||||
class: text,
|
||||
values: (
|
||||
wrap: normal,
|
||||
nowrap: nowrap,
|
||||
),
|
||||
),
|
||||
'word-wrap': (
|
||||
property: word-wrap word-break,
|
||||
class: text,
|
||||
values: (
|
||||
break: break-word,
|
||||
),
|
||||
rtl: false,
|
||||
),
|
||||
'color': (
|
||||
property: color,
|
||||
class: text,
|
||||
local-vars: (
|
||||
'text-opacity': 1,
|
||||
),
|
||||
values: map.merge(
|
||||
$utilities-text-colors,
|
||||
(
|
||||
'muted': var(--#{$prefix}secondary-color),
|
||||
// deprecated
|
||||
'black-50': rgba($black, 0.5),
|
||||
// deprecated
|
||||
'white-50': rgba($white, 0.5),
|
||||
// deprecated
|
||||
'body-secondary': var(--#{$prefix}secondary-color),
|
||||
'body-tertiary': var(--#{$prefix}tertiary-color),
|
||||
'body-emphasis': var(--#{$prefix}emphasis-color),
|
||||
'reset': inherit,
|
||||
)
|
||||
),
|
||||
),
|
||||
'text-opacity': (
|
||||
css-var: true,
|
||||
class: text-opacity,
|
||||
values: (
|
||||
25: 0.25,
|
||||
50: 0.5,
|
||||
75: 0.75,
|
||||
100: 1,
|
||||
),
|
||||
),
|
||||
'text-color': (
|
||||
property: color,
|
||||
class: text,
|
||||
values: $utilities-text-emphasis-colors,
|
||||
),
|
||||
'link-opacity': (
|
||||
css-var: true,
|
||||
class: link-opacity,
|
||||
state: hover,
|
||||
values: (
|
||||
10: 0.1,
|
||||
25: 0.25,
|
||||
50: 0.5,
|
||||
75: 0.75,
|
||||
100: 1,
|
||||
),
|
||||
),
|
||||
'link-offset': (
|
||||
property: text-underline-offset,
|
||||
class: link-offset,
|
||||
state: hover,
|
||||
values: (
|
||||
1: 0.125em,
|
||||
2: 0.25em,
|
||||
3: 0.375em,
|
||||
),
|
||||
),
|
||||
'link-underline': (
|
||||
property: text-decoration-color,
|
||||
class: link-underline,
|
||||
local-vars: (
|
||||
'link-underline-opacity': 1,
|
||||
),
|
||||
values: map.merge(
|
||||
$utilities-links-underline,
|
||||
(
|
||||
null: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-underline-opacity, 1)),
|
||||
)
|
||||
),
|
||||
),
|
||||
'link-underline-opacity': (
|
||||
css-var: true,
|
||||
class: link-underline-opacity,
|
||||
state: hover,
|
||||
values: (
|
||||
0: 0,
|
||||
10: 0.1,
|
||||
25: 0.25,
|
||||
50: 0.5,
|
||||
75: 0.75,
|
||||
100: 1,
|
||||
),
|
||||
),
|
||||
'background-color': (
|
||||
property: background-color,
|
||||
class: bg,
|
||||
local-vars: (
|
||||
'bg-opacity': 1,
|
||||
),
|
||||
values: map.merge(
|
||||
$utilities-bg-colors,
|
||||
(
|
||||
'transparent': transparent,
|
||||
'body-secondary': rgba(var(--#{$prefix}secondary-bg-rgb), var(--#{$prefix}bg-opacity)),
|
||||
'body-tertiary': rgba(var(--#{$prefix}tertiary-bg-rgb), var(--#{$prefix}bg-opacity)),
|
||||
)
|
||||
),
|
||||
),
|
||||
'bg-opacity': (
|
||||
css-var: true,
|
||||
class: bg-opacity,
|
||||
values: (
|
||||
10: 0.1,
|
||||
25: 0.25,
|
||||
50: 0.5,
|
||||
75: 0.75,
|
||||
100: 1,
|
||||
),
|
||||
),
|
||||
'subtle-background-color': (
|
||||
property: background-color,
|
||||
class: bg,
|
||||
values: $utilities-bg-subtle,
|
||||
),
|
||||
'gradient': (
|
||||
property: background-image,
|
||||
class: bg,
|
||||
values: (
|
||||
gradient: var(--#{$prefix}gradient),
|
||||
),
|
||||
),
|
||||
'user-select': (
|
||||
property: user-select,
|
||||
values: all auto none,
|
||||
),
|
||||
'pointer-events': (
|
||||
property: pointer-events,
|
||||
class: pe,
|
||||
values: none auto,
|
||||
),
|
||||
'rounded': (
|
||||
property: border-radius,
|
||||
class: rounded,
|
||||
values: (
|
||||
null: var(--#{$prefix}border-radius),
|
||||
0: 0,
|
||||
1: var(--#{$prefix}border-radius-sm),
|
||||
2: var(--#{$prefix}border-radius),
|
||||
3: var(--#{$prefix}border-radius-lg),
|
||||
4: var(--#{$prefix}border-radius-xl),
|
||||
5: var(--#{$prefix}border-radius-xxl),
|
||||
circle: 50%,
|
||||
pill: var(--#{$prefix}border-radius-pill),
|
||||
),
|
||||
),
|
||||
'rounded-top': (
|
||||
property: border-start-start-radius border-start-end-radius,
|
||||
class: rounded-top,
|
||||
values: (
|
||||
null: var(--#{$prefix}border-radius),
|
||||
0: 0,
|
||||
1: var(--#{$prefix}border-radius-sm),
|
||||
2: var(--#{$prefix}border-radius),
|
||||
3: var(--#{$prefix}border-radius-lg),
|
||||
4: var(--#{$prefix}border-radius-xl),
|
||||
5: var(--#{$prefix}border-radius-xxl),
|
||||
circle: 50%,
|
||||
pill: var(--#{$prefix}border-radius-pill),
|
||||
),
|
||||
),
|
||||
'rounded-end': (
|
||||
property: border-end-end-radius border-end-start-radius,
|
||||
class: rounded-end,
|
||||
values: (
|
||||
null: var(--#{$prefix}border-radius),
|
||||
0: 0,
|
||||
1: var(--#{$prefix}border-radius-sm),
|
||||
2: var(--#{$prefix}border-radius),
|
||||
3: var(--#{$prefix}border-radius-lg),
|
||||
4: var(--#{$prefix}border-radius-xl),
|
||||
5: var(--#{$prefix}border-radius-xxl),
|
||||
circle: 50%,
|
||||
pill: var(--#{$prefix}border-radius-pill),
|
||||
),
|
||||
),
|
||||
'rounded-bottom': (
|
||||
property: border-end-end-radius border-end-start-radius,
|
||||
class: rounded-bottom,
|
||||
values: (
|
||||
null: var(--#{$prefix}border-radius),
|
||||
0: 0,
|
||||
1: var(--#{$prefix}border-radius-sm),
|
||||
2: var(--#{$prefix}border-radius),
|
||||
3: var(--#{$prefix}border-radius-lg),
|
||||
4: var(--#{$prefix}border-radius-xl),
|
||||
5: var(--#{$prefix}border-radius-xxl),
|
||||
circle: 50%,
|
||||
pill: var(--#{$prefix}border-radius-pill),
|
||||
),
|
||||
),
|
||||
'rounded-start': (
|
||||
property: border-start-start-radius border-start-end-radius,
|
||||
class: rounded-start,
|
||||
values: (
|
||||
null: var(--#{$prefix}border-radius),
|
||||
0: 0,
|
||||
1: var(--#{$prefix}border-radius-sm),
|
||||
2: var(--#{$prefix}border-radius),
|
||||
3: var(--#{$prefix}border-radius-lg),
|
||||
4: var(--#{$prefix}border-radius-xl),
|
||||
5: var(--#{$prefix}border-radius-xxl),
|
||||
circle: 50%,
|
||||
pill: var(--#{$prefix}border-radius-pill),
|
||||
),
|
||||
),
|
||||
'visibility': (
|
||||
property: visibility,
|
||||
class: null,
|
||||
values: (
|
||||
visible: visible,
|
||||
invisible: hidden,
|
||||
),
|
||||
),
|
||||
'z-index': (
|
||||
property: z-index,
|
||||
class: z,
|
||||
values: $zindex-levels,
|
||||
),
|
||||
) !default;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@use 'sass:color';
|
||||
@use "sass:color";
|
||||
|
||||
//
|
||||
// Dark mode
|
||||
@@ -6,107 +6,14 @@
|
||||
$darken-dark: color.adjust($dark, $lightness: -2%) !default;
|
||||
$lighten-dark: color.adjust($dark, $lightness: 2%) !default;
|
||||
$border-color-dark: color.adjust($dark, $lightness: 8%) !default;
|
||||
$border-color-translucent-dark: rgba(128, 150, 172, 0.2) !default;
|
||||
$border-color-translucent-dark: rgba(72, 110, 149, .14) !default;
|
||||
$border-dark-color-dark: color.adjust($dark, $lightness: 4%) !default;
|
||||
$border-active-color-dark: color.adjust($dark, $lightness: 12%) !default;
|
||||
|
||||
//new bootsrap variables
|
||||
$body-color-dark: $gray-200 !default;
|
||||
$body-color-dark: $gray-200 !default;
|
||||
$body-emphasis-color-dark: $white !default;
|
||||
|
||||
$code-color-dark: var(--#{$prefix}gray-300) !default;
|
||||
$text-secondary-dark: rgba(153, 159, 164, 1) !default;
|
||||
|
||||
// Theme text emphasis dark
|
||||
$primary-text-emphasis-dark: tint-color($primary, 40%) !default;
|
||||
$secondary-text-emphasis-dark: tint-color($secondary, 40%) !default;
|
||||
$success-text-emphasis-dark: tint-color($success, 40%) !default;
|
||||
$info-text-emphasis-dark: tint-color($info, 40%) !default;
|
||||
$warning-text-emphasis-dark: tint-color($warning, 40%) !default;
|
||||
$danger-text-emphasis-dark: tint-color($danger, 40%) !default;
|
||||
$light-text-emphasis-dark: $gray-100 !default;
|
||||
$dark-text-emphasis-dark: $gray-300 !default;
|
||||
|
||||
// Theme bg subtle dark
|
||||
$primary-bg-subtle-dark: shade-color($primary, 80%) !default;
|
||||
$secondary-bg-subtle-dark: shade-color($secondary, 80%) !default;
|
||||
$success-bg-subtle-dark: shade-color($success, 80%) !default;
|
||||
$info-bg-subtle-dark: shade-color($info, 80%) !default;
|
||||
$warning-bg-subtle-dark: shade-color($warning, 80%) !default;
|
||||
$danger-bg-subtle-dark: shade-color($danger, 80%) !default;
|
||||
$light-bg-subtle-dark: $gray-800 !default;
|
||||
$dark-bg-subtle-dark: color.mix($gray-800, $black) !default;
|
||||
|
||||
// Theme border subtle dark
|
||||
$primary-border-subtle-dark: shade-color($primary, 40%) !default;
|
||||
$secondary-border-subtle-dark: shade-color($secondary, 40%) !default;
|
||||
$success-border-subtle-dark: shade-color($success, 40%) !default;
|
||||
$info-border-subtle-dark: shade-color($info, 40%) !default;
|
||||
$warning-border-subtle-dark: shade-color($warning, 40%) !default;
|
||||
$danger-border-subtle-dark: shade-color($danger, 40%) !default;
|
||||
$light-border-subtle-dark: $gray-700 !default;
|
||||
$dark-border-subtle-dark: $gray-800 !default;
|
||||
|
||||
// Body dark
|
||||
$body-bg-dark: $gray-900 !default;
|
||||
$body-secondary-color-dark: rgba($body-color-dark, 0.75) !default;
|
||||
$body-secondary-bg-dark: $gray-800 !default;
|
||||
$body-tertiary-color-dark: rgba($body-color-dark, 0.5) !default;
|
||||
$body-tertiary-bg-dark: color.mix($gray-800, $gray-900, 50%) !default;
|
||||
|
||||
// Headings dark
|
||||
$headings-color-dark: inherit !default;
|
||||
|
||||
// Link dark
|
||||
$link-color-dark: tint-color($primary, 40%) !default;
|
||||
$link-hover-color-dark: shift-color($link-color-dark, -$link-shade-percentage) !default;
|
||||
|
||||
// Mark dark
|
||||
$mark-color-dark: $body-color-dark !default;
|
||||
$mark-bg-dark: shade-color($yellow, 60%) !default;
|
||||
|
||||
//
|
||||
// Forms dark
|
||||
//
|
||||
|
||||
$form-select-indicator-color-dark: $body-color-dark !default;
|
||||
$form-select-indicator-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color-dark}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>") !default;
|
||||
|
||||
$form-switch-color-dark: rgba($white, 0.25) !default;
|
||||
$form-switch-bg-image-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color-dark}'/></svg>") !default;
|
||||
|
||||
// Form validation colors dark
|
||||
$form-valid-color-dark: tint-color($green, 40%) !default;
|
||||
$form-valid-border-color-dark: tint-color($green, 40%) !default;
|
||||
$form-invalid-color-dark: tint-color($red, 40%) !default;
|
||||
$form-invalid-border-color-dark: tint-color($red, 40%) !default;
|
||||
|
||||
//
|
||||
// Accordion dark
|
||||
//
|
||||
|
||||
$accordion-icon-color-dark: $primary-text-emphasis-dark !default;
|
||||
$accordion-icon-active-color-dark: $primary-text-emphasis-dark !default;
|
||||
|
||||
$accordion-button-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/></svg>") !default;
|
||||
$accordion-button-active-icon-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/></svg>") !default;
|
||||
|
||||
//
|
||||
// Carousel dark
|
||||
//
|
||||
|
||||
$carousel-dark-indicator-active-bg: $black !default; // Deprecated in v5.3.4
|
||||
$carousel-dark-caption-color: $black !default; // Deprecated in v5.3.4
|
||||
$carousel-dark-control-icon-filter: invert(1) grayscale(100) !default; // Deprecated in v5.3.4
|
||||
|
||||
$carousel-indicator-active-bg-dark: $carousel-dark-indicator-active-bg !default;
|
||||
$carousel-caption-color-dark: $carousel-dark-caption-color !default;
|
||||
$carousel-control-icon-filter-dark: $carousel-dark-control-icon-filter !default;
|
||||
|
||||
//
|
||||
// Close button dark
|
||||
//
|
||||
|
||||
$btn-close-white-filter: invert(1) grayscale(100%) brightness(200%) !default; // Deprecated in v5.3.4
|
||||
|
||||
$btn-close-filter-dark: $btn-close-white-filter !default;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -1,184 +0,0 @@
|
||||
// Geist Sans Font Family
|
||||
@font-face {
|
||||
font-family: 'Geist';
|
||||
src: url('#{$assets-base}/fonts/geist-sans/Geist-Thin.woff2') format('woff2'),
|
||||
url('#{$assets-base}/fonts/geist-sans/Geist-Thin.ttf') format('truetype');
|
||||
font-weight: 100;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Geist';
|
||||
src: url('#{$assets-base}/fonts/geist-sans/Geist-UltraLight.woff2') format('woff2'),
|
||||
url('#{$assets-base}/fonts/geist-sans/Geist-UltraLight.ttf') format('truetype');
|
||||
font-weight: 200;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Geist';
|
||||
src: url('#{$assets-base}/fonts/geist-sans/Geist-Light.woff2') format('woff2'),
|
||||
url('#{$assets-base}/fonts/geist-sans/Geist-Light.ttf') format('truetype');
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Geist';
|
||||
src: url('#{$assets-base}/fonts/geist-sans/Geist-Regular.woff2') format('woff2'),
|
||||
url('#{$assets-base}/fonts/geist-sans/Geist-Regular.ttf') format('truetype');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Geist';
|
||||
src: url('#{$assets-base}/fonts/geist-sans/Geist-Medium.woff2') format('woff2'),
|
||||
url('#{$assets-base}/fonts/geist-sans/Geist-Medium.ttf') format('truetype');
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Geist';
|
||||
src: url('#{$assets-base}/fonts/geist-sans/Geist-SemiBold.woff2') format('woff2'),
|
||||
url('#{$assets-base}/fonts/geist-sans/Geist-SemiBold.ttf') format('truetype');
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Geist';
|
||||
src: url('#{$assets-base}/fonts/geist-sans/Geist-Bold.woff2') format('woff2'),
|
||||
url('#{$assets-base}/fonts/geist-sans/Geist-Bold.ttf') format('truetype');
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Geist';
|
||||
src: url('#{$assets-base}/fonts/geist-sans/Geist-Black.woff2') format('woff2'),
|
||||
url('#{$assets-base}/fonts/geist-sans/Geist-Black.ttf') format('truetype');
|
||||
font-weight: 800;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Geist';
|
||||
src: url('#{$assets-base}/fonts/geist-sans/Geist-UltraBlack.woff2') format('woff2'),
|
||||
url('#{$assets-base}/fonts/geist-sans/Geist-UltraBlack.ttf') format('truetype');
|
||||
font-weight: 900;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
// Geist Sans Variable Font
|
||||
@font-face {
|
||||
font-family: 'Geist';
|
||||
src: url('#{$assets-base}/fonts/geist-sans/Geist-Variable.woff2') format('woff2'),
|
||||
url('#{$assets-base}/fonts/geist-sans/Geist-Variable.ttf') format('truetype');
|
||||
font-weight: 100 900;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
// Geist Mono Font Family
|
||||
@font-face {
|
||||
font-family: 'Geist Mono';
|
||||
src: url('#{$assets-base}/fonts/geist-mono/GeistMono-Thin.woff2') format('woff2'),
|
||||
url('#{$assets-base}/fonts/geist-mono/GeistMono-Thin.ttf') format('truetype');
|
||||
font-weight: 100;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Geist Mono';
|
||||
src: url('#{$assets-base}/fonts/geist-mono/GeistMono-UltraLight.woff2') format('woff2'),
|
||||
url('#{$assets-base}/fonts/geist-mono/GeistMono-UltraLight.ttf') format('truetype');
|
||||
font-weight: 200;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Geist Mono';
|
||||
src: url('#{$assets-base}/fonts/geist-mono/GeistMono-Light.woff2') format('woff2'),
|
||||
url('#{$assets-base}/fonts/geist-mono/GeistMono-Light.ttf') format('truetype');
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Geist Mono';
|
||||
src: url('#{$assets-base}/fonts/geist-mono/GeistMono-Regular.woff2') format('woff2'),
|
||||
url('#{$assets-base}/fonts/geist-mono/GeistMono-Regular.ttf') format('truetype');
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Geist Mono';
|
||||
src: url('#{$assets-base}/fonts/geist-mono/GeistMono-Medium.woff2') format('woff2'),
|
||||
url('#{$assets-base}/fonts/geist-mono/GeistMono-Medium.ttf') format('truetype');
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Geist Mono';
|
||||
src: url('#{$assets-base}/fonts/geist-mono/GeistMono-SemiBold.woff2') format('woff2'),
|
||||
url('#{$assets-base}/fonts/geist-mono/GeistMono-SemiBold.ttf') format('truetype');
|
||||
font-weight: 600;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Geist Mono';
|
||||
src: url('#{$assets-base}/fonts/geist-mono/GeistMono-Bold.woff2') format('woff2'),
|
||||
url('#{$assets-base}/fonts/geist-mono/GeistMono-Bold.ttf') format('truetype');
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Geist Mono';
|
||||
src: url('#{$assets-base}/fonts/geist-mono/GeistMono-Black.woff2') format('woff2'),
|
||||
url('#{$assets-base}/fonts/geist-mono/GeistMono-Black.ttf') format('truetype');
|
||||
font-weight: 800;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Geist Mono';
|
||||
src: url('#{$assets-base}/fonts/geist-mono/GeistMono-UltraBlack.woff2') format('woff2'),
|
||||
url('#{$assets-base}/fonts/geist-mono/GeistMono-UltraBlack.ttf') format('truetype');
|
||||
font-weight: 900;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
// Geist Mono Variable Font
|
||||
@font-face {
|
||||
font-family: 'Geist Mono';
|
||||
src: url('#{$assets-base}/fonts/geist-mono/GeistMono-Variable.woff2') format('woff2'),
|
||||
url('#{$assets-base}/fonts/geist-mono/GeistMono-Variable.ttf') format('truetype');
|
||||
font-weight: 100 900;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
@if $font-google {
|
||||
$google-font-url: 'https://fonts.googleapis.com/css2?family=' + str-replace($font-google, ' ', '+') + ':wght@300;400;500;600;700&display=swap' !default;
|
||||
$google-font-url: "https://fonts.googleapis.com/css2?family=" + str-replace($font-google, " ", "+") + ":wght@300;400;500;600;700&display=swap" !default;
|
||||
@import url($google-font-url);
|
||||
}
|
||||
|
||||
@if $font-google-monospaced {
|
||||
$google-font-monospaced-url: 'https://fonts.googleapis.com/css2?family=' + str-replace($font-google-monospaced, ' ', '+') + ':wght@300;400;500;600;700&display=swap' !default;
|
||||
$google-font-monospaced-url: "https://fonts.googleapis.com/css2?family=" + str-replace($font-google-monospaced, " ", "+") + ":wght@300;400;500;600;700&display=swap" !default;
|
||||
@import url($google-font-monospaced-url);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
@use 'sass:map';
|
||||
|
||||
//
|
||||
// Clearfix
|
||||
//
|
||||
@@ -30,14 +28,14 @@
|
||||
// Stretched link
|
||||
//
|
||||
.stretched-link {
|
||||
&::after {
|
||||
&::#{$stretched-link-pseudo-element} {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
inset-inline-end: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
inset-inline-start: 0;
|
||||
z-index: 1;
|
||||
content: '';
|
||||
left: 0;
|
||||
z-index: $stretched-link-z-index;
|
||||
content: "";
|
||||
}
|
||||
}
|
||||
|
||||
@@ -74,21 +72,21 @@
|
||||
.fixed-top {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
inset-inline-end: 0;
|
||||
inset-inline-start: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: $zindex-fixed;
|
||||
}
|
||||
|
||||
.fixed-bottom {
|
||||
position: fixed;
|
||||
inset-inline-end: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
inset-inline-start: 0;
|
||||
left: 0;
|
||||
z-index: $zindex-fixed;
|
||||
}
|
||||
|
||||
// Responsive sticky top and bottom
|
||||
@each $breakpoint in map.keys($grid-breakpoints) {
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
@include media-breakpoint-up($breakpoint) {
|
||||
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
|
||||
|
||||
@@ -116,13 +114,13 @@
|
||||
&::before {
|
||||
display: block;
|
||||
padding-top: var(--#{$prefix}aspect-ratio);
|
||||
content: '';
|
||||
content: "";
|
||||
}
|
||||
|
||||
>* {
|
||||
> * {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
inset-inline-start: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
@@ -141,4 +139,5 @@
|
||||
outline: 0;
|
||||
// By default, there is no `--bs-focus-ring-x`, `--bs-focus-ring-y`, or `--bs-focus-ring-blur`, but we provide CSS variables with fallbacks to initial `0` values
|
||||
box-shadow: var(--#{$prefix}focus-ring-x, 0) var(--#{$prefix}focus-ring-y, 0) var(--#{$prefix}focus-ring-blur, 0) var(--#{$prefix}focus-ring-width) var(--#{$prefix}focus-ring-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,23 +1,9 @@
|
||||
@use 'sass:map';
|
||||
|
||||
html {
|
||||
scrollbar-gutter: stable;
|
||||
|
||||
@supports not (scrollbar-gutter: stable) {
|
||||
overflow-y: scroll;
|
||||
}
|
||||
}
|
||||
|
||||
// stylelint-disable property-no-vendor-prefix
|
||||
body {
|
||||
letter-spacing: $body-letter-spacing;
|
||||
touch-action: manipulation;
|
||||
text-rendering: optimizeLegibility;
|
||||
font-feature-settings:
|
||||
'liga' 0,
|
||||
'cv03',
|
||||
'cv04',
|
||||
'cv11';
|
||||
font-feature-settings: "liga" 0, "cv03", "cv04", "cv11";
|
||||
position: relative;
|
||||
min-height: 100%;
|
||||
height: 100%;
|
||||
@@ -26,7 +12,7 @@ body {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
|
||||
@include media-print {
|
||||
@media print {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
@@ -38,8 +24,8 @@ body {
|
||||
//
|
||||
.layout-fluid {
|
||||
.container,
|
||||
[class^='container-'],
|
||||
[class*=' container-'] {
|
||||
[class^="container-"],
|
||||
[class*=" container-"] {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
@@ -49,10 +35,10 @@ body {
|
||||
//
|
||||
.layout-boxed {
|
||||
--#{$prefix}theme-boxed-border-radius: 0;
|
||||
--#{$prefix}theme-boxed-width: #{map.get($container-max-widths, xxl)};
|
||||
--#{$prefix}theme-boxed-width: #{map-get($container-max-widths, xxl)};
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
background: $dark linear-gradient(to right, rgba(#fff, 0.1), transparent) fixed;
|
||||
background: $dark linear-gradient(to right, rgba(#fff, .1), transparent) fixed;
|
||||
padding: 1rem;
|
||||
--#{$prefix}theme-boxed-border-radius: #{$border-radius};
|
||||
}
|
||||
@@ -69,8 +55,8 @@ body {
|
||||
}
|
||||
|
||||
> .navbar:first-child {
|
||||
border-start-start-radius: var(--#{$prefix}theme-boxed-border-radius);
|
||||
border-start-end-radius: var(--#{$prefix}theme-boxed-border-radius);
|
||||
border-top-left-radius: var(--#{$prefix}theme-boxed-border-radius);
|
||||
border-top-right-radius: var(--#{$prefix}theme-boxed-border-radius);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,10 +1,10 @@
|
||||
@use 'sass:color';
|
||||
@use "sass:color";
|
||||
|
||||
// stylelint-disable declaration-no-important
|
||||
|
||||
@if $enable-dark-mode {
|
||||
:root {
|
||||
&:not(.theme-dark):not([data-bs-theme='dark']) {
|
||||
&:not(.theme-dark):not([data-bs-theme="dark"]) {
|
||||
.hide-theme-light {
|
||||
display: none !important;
|
||||
}
|
||||
@@ -15,7 +15,7 @@
|
||||
}
|
||||
|
||||
&.theme-dark,
|
||||
&[data-bs-theme='dark'] {
|
||||
&[data-bs-theme="dark"] {
|
||||
.hide-theme-dark {
|
||||
display: none !important;
|
||||
}
|
||||
@@ -26,6 +26,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@include color-mode(dark, true) {
|
||||
color-scheme: dark;
|
||||
--#{$prefix}body-color: var(--#{$prefix}gray-200);
|
||||
@@ -47,12 +48,16 @@
|
||||
--#{$prefix}link-hover-color: color-mix(in srgb, var(--#{$prefix}primary), black 20%);
|
||||
|
||||
--#{$prefix}active-bg: #{$lighten-dark};
|
||||
--#{$prefix}disabled-color: #{color-transparent(var(--#{$prefix}body-color), 0.4)};
|
||||
--#{$prefix}disabled-color: #{color-transparent(var(--#{$prefix}body-color), .4)};
|
||||
|
||||
--#{$prefix}border-color: var(--#{$prefix}gray-700);
|
||||
--#{$prefix}border-color-translucent: var(--#{$prefix}dark-mode-border-color-translucent);
|
||||
--#{$prefix}border-color-translucent: var(
|
||||
--#{$prefix}dark-mode-border-color-translucent
|
||||
);
|
||||
--#{$prefix}border-dark-color: var(--#{$prefix}dark-mode-border-dark-color);
|
||||
--#{$prefix}border-active-color: var(--#{$prefix}dark-mode-border-active-color);
|
||||
--#{$prefix}border-active-color: var(
|
||||
--#{$prefix}dark-mode-border-active-color
|
||||
);
|
||||
|
||||
--#{$prefix}btn-color: #{$darken-dark};
|
||||
|
||||
@@ -63,7 +68,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
body[data-bs-theme='dark'] [data-bs-theme='light'] {
|
||||
@extend [data-bs-theme='dark'];
|
||||
body[data-bs-theme=dark] [data-bs-theme=light] {
|
||||
@extend [data-bs-theme=dark];
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,13 +4,9 @@
|
||||
padding: $footer-padding-y 0;
|
||||
color: $footer-color;
|
||||
margin-top: auto;
|
||||
|
||||
@include media-print {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-transparent {
|
||||
background-color: transparent;
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
@@ -1,22 +1,20 @@
|
||||
@use 'sass:map';
|
||||
|
||||
@mixin navbar-vertical-nav {
|
||||
.navbar-collapse {
|
||||
flex-direction: column;
|
||||
|
||||
[class^='container'] {
|
||||
[class^="container"] {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
margin-inline-start: 0;
|
||||
margin-inline-end: 0;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
|
||||
.nav-link {
|
||||
padding: 0.5rem calc(#{$container-padding-x} / 2);
|
||||
justify-content: start;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -38,7 +36,7 @@
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
width: auto;
|
||||
padding-inline-start: add(calc(#{$container-padding-x} / 2), 1.75rem);
|
||||
padding-left: add(calc(#{$container-padding-x} / 2), 1.75rem);
|
||||
color: inherit;
|
||||
|
||||
&.disabled {
|
||||
@@ -54,22 +52,22 @@
|
||||
}
|
||||
|
||||
.dropdown-menu .dropdown-item {
|
||||
padding-inline-start: add(calc(#{$container-padding-x} / 2), 3.25rem);
|
||||
padding-left: add(calc(#{$container-padding-x} / 2), 3.25rem);
|
||||
}
|
||||
|
||||
.dropdown-menu .dropdown-menu .dropdown-item {
|
||||
padding-inline-start: add(calc(#{$container-padding-x} / 2), 4.75rem);
|
||||
padding-left: add(calc(#{$container-padding-x} / 2), 4.75rem);
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown-toggle:after {
|
||||
margin-inline-start: auto;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.nav-item.active:after {
|
||||
border-bottom-width: 0;
|
||||
border-inline-start-width: 3px;
|
||||
inset-inline-end: auto;
|
||||
border-left-width: 3px;
|
||||
right: auto;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
@@ -117,8 +115,8 @@ Navbar
|
||||
|
||||
.badge {
|
||||
position: absolute;
|
||||
top: 0.5rem;
|
||||
inset-inline-end: 0.5rem;
|
||||
top: 0.375rem;
|
||||
right: 0.375rem;
|
||||
transform: translate(50%, -50%);
|
||||
}
|
||||
}
|
||||
@@ -126,7 +124,7 @@ Navbar
|
||||
}
|
||||
|
||||
.navbar-expand {
|
||||
@each $breakpoint in map.keys($grid-breakpoints) {
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
$next: breakpoint-next($breakpoint, $grid-breakpoints);
|
||||
$infix: breakpoint-infix($next, $grid-breakpoints);
|
||||
|
||||
@@ -149,10 +147,10 @@ Navbar
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset-inline-start: 0;
|
||||
inset-inline-end: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: -0.25rem;
|
||||
border: 0 var(--#{$prefix}border-style) var(--#{$prefix}navbar-active-border-color);
|
||||
border-bottom-width: 2px;
|
||||
@@ -171,7 +169,7 @@ Navbar
|
||||
&.navbar-vertical {
|
||||
~ .navbar,
|
||||
~ .page-wrapper {
|
||||
margin-inline-start: $sidebar-width;
|
||||
margin-left: $sidebar-width;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -179,8 +177,8 @@ Navbar
|
||||
&.navbar-vertical.navbar-end {
|
||||
~ .navbar,
|
||||
~ .page-wrapper {
|
||||
margin-inline-start: 0;
|
||||
margin-inline-end: $sidebar-width;
|
||||
margin-left: 0;
|
||||
margin-right: $sidebar-width;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -224,18 +222,23 @@ Navbar toggler
|
||||
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);
|
||||
|
||||
@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
|
||||
);
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: '';
|
||||
content: "";
|
||||
display: block;
|
||||
height: inherit;
|
||||
width: inherit;
|
||||
border-radius: inherit;
|
||||
background: inherit;
|
||||
position: absolute;
|
||||
inset-inline-start: 0;
|
||||
left: 0;
|
||||
@include transition(inherit);
|
||||
}
|
||||
|
||||
@@ -247,7 +250,7 @@ Navbar toggler
|
||||
bottom: -0.45em;
|
||||
}
|
||||
|
||||
.navbar-toggler[aria-expanded='true'] & {
|
||||
.navbar-toggler[aria-expanded="true"] & {
|
||||
transform: rotate(45deg);
|
||||
@include transition(top $transition-time, bottom $transition-time, transform $transition-time $transition-time, opacity 0s $transition-time);
|
||||
|
||||
@@ -304,7 +307,7 @@ Navbar vertical
|
||||
@if $enable-navbar-vertical {
|
||||
.navbar-vertical {
|
||||
&.navbar-expand {
|
||||
@each $breakpoint in map.keys($grid-breakpoints) {
|
||||
@each $breakpoint in map-keys($grid-breakpoints) {
|
||||
$next: breakpoint-next($breakpoint, $grid-breakpoints);
|
||||
$infix: breakpoint-infix($next, $grid-breakpoints);
|
||||
|
||||
@@ -313,18 +316,18 @@ Navbar vertical
|
||||
width: $sidebar-width;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
inset-inline-start: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
z-index: $zindex-fixed;
|
||||
align-items: start;
|
||||
align-items: flex-start;
|
||||
overflow-y: scroll;
|
||||
padding: 0;
|
||||
@include transition(transform $transition-time);
|
||||
|
||||
&.navbar-right,
|
||||
&.navbar-end {
|
||||
inset-inline-start: auto;
|
||||
inset-inline-end: 0;
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
@@ -347,27 +350,27 @@ Navbar vertical
|
||||
}
|
||||
}
|
||||
|
||||
> [class^='container'] {
|
||||
> [class^="container"] {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
min-height: 100%;
|
||||
justify-content: start;
|
||||
justify-content: flex-start;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
~ .page {
|
||||
padding-inline-start: $sidebar-width;
|
||||
padding-left: $sidebar-width;
|
||||
|
||||
[class^='container'] {
|
||||
padding-inline-start: 1.5rem;
|
||||
padding-inline-end: 1.5rem;
|
||||
[class^="container"] {
|
||||
padding-left: 1.5rem;
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
&.navbar-right ~ .page,
|
||||
&.navbar-end ~ .page {
|
||||
padding-inline-start: 0;
|
||||
padding-inline-end: $sidebar-width;
|
||||
padding-left: 0;
|
||||
padding-right: $sidebar-width;
|
||||
}
|
||||
|
||||
@include navbar-vertical-nav;
|
||||
@@ -380,12 +383,12 @@ Navbar vertical
|
||||
|
||||
.navbar-overlap {
|
||||
&:after {
|
||||
content: '';
|
||||
content: "";
|
||||
height: $navbar-overlap-height;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
inset-inline-start: 0;
|
||||
inset-inline-end: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: inherit;
|
||||
z-index: -1;
|
||||
box-shadow: inherit;
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
@include media-print {
|
||||
@media print {
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
@@ -64,16 +64,17 @@
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
content: '';
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
inset-inline-start: 0;
|
||||
inset-inline-end: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-image: $overlay-gradient;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@@ -110,7 +111,7 @@
|
||||
svg {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
margin-inline-end: 0.25rem;
|
||||
margin-right: .25rem;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -120,7 +121,7 @@
|
||||
}
|
||||
|
||||
.page-subtitle {
|
||||
margin-top: 0.25rem;
|
||||
margin-top: .25rem;
|
||||
color: var(--#{$prefix}secondary);
|
||||
}
|
||||
|
||||
@@ -139,8 +140,8 @@
|
||||
.page-cover-img {
|
||||
position: absolute;
|
||||
top: calc(-2 * var(--#{$prefix}page-cover-blur, 0));
|
||||
inset-inline-start: calc(-2 * var(--#{$prefix}page-cover-blur, 0));
|
||||
inset-inline-end: calc(-2 * var(--#{$prefix}page-cover-blur, 0));
|
||||
left: calc(-2 * var(--#{$prefix}page-cover-blur, 0));
|
||||
right: calc(-2 * var(--#{$prefix}page-cover-blur, 0));
|
||||
bottom: calc(-2 * var(--#{$prefix}page-cover-blur, 0));
|
||||
pointer-events: none;
|
||||
filter: blur(var(--#{$prefix}page-cover-blur));
|
||||
@@ -154,7 +155,7 @@
|
||||
// Page tabs
|
||||
//
|
||||
.page-tabs {
|
||||
margin-top: 0.5rem;
|
||||
margin-top: .5rem;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
@@ -166,4 +167,4 @@
|
||||
+ .page-body-card {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -2,11 +2,16 @@
|
||||
:host {
|
||||
font-size: 16px;
|
||||
height: 100%;
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
margin-left: calc(100vw - 100%);
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
:root,
|
||||
:host,
|
||||
[data-bs-theme='light'] {
|
||||
[data-bs-theme="light"] {
|
||||
color-scheme: light;
|
||||
--#{$prefix}spacer: var(--#{$prefix}spacer-2);
|
||||
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user