mirror of
https://github.com/tabler/tabler.git
synced 2025-12-21 17:34:25 +04:00
Compare commits
6 Commits
dev
...
dev-form-c
| Author | SHA1 | Date | |
|---|---|---|---|
|
f1d27158d9 | ||
|
|
e2cc7da8fe | ||
|
|
127448661b | ||
|
|
f90b7547fb | ||
|
|
e5585b65fb | ||
|
|
e292c201f0 |
15
core/js/src/bootstrap.js
vendored
15
core/js/src/bootstrap.js
vendored
@@ -1,20 +1,7 @@
|
||||
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'
|
||||
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'
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -33,12 +33,7 @@ $enable-deprecation-messages: true !default;
|
||||
$enable-important-utilities: true !default;
|
||||
|
||||
// Escaped Characters
|
||||
$escaped-characters: (
|
||||
('<', '%3c'),
|
||||
('>', '%3e'),
|
||||
('#', '%23'),
|
||||
('(', '%28'),
|
||||
(')', '%29')) !default;
|
||||
$escaped-characters: (('<', '%3c'), ('>', '%3e'), ('#', '%23'), ('(', '%28'), (')', '%29')) !default;
|
||||
|
||||
// Dark Mode
|
||||
$color-mode-type: data !default;
|
||||
@@ -560,11 +555,6 @@ $text-secondary-opacity: 0.7 !default;
|
||||
$text-secondary-light-opacity: 0.4 !default;
|
||||
$text-secondary-dark-opacity: 0.8 !default;
|
||||
|
||||
$border-opacity: 0.16 !default;
|
||||
$border-light-opacity: 0.08 !default;
|
||||
$border-dark-opacity: 0.24 !default;
|
||||
$border-active-opacity: 0.58 !default;
|
||||
|
||||
$bg-surface: var(--#{$prefix}white) !default;
|
||||
$bg-surface-secondary: var(--#{$prefix}gray-100) !default;
|
||||
$bg-surface-tertiary: var(--#{$prefix}gray-50) !default;
|
||||
@@ -572,7 +562,7 @@ $bg-surface-dark: var(--#{$prefix}dark) !default;
|
||||
|
||||
$body-text-align: null !default;
|
||||
$body-bg: $gray-50 !default;
|
||||
$body-color: $dark !default;
|
||||
$body-color: $gray-800 !default;
|
||||
$body-emphasis-color: $gray-700 !default;
|
||||
$body-secondary-color: rgba($body-color, 0.75) !default;
|
||||
$body-secondary-bg: $gray-200 !default;
|
||||
@@ -587,14 +577,21 @@ $text-secondary: $gray-500 !default;
|
||||
$text-secondary-light: $gray-400 !default;
|
||||
$text-secondary-dark: $gray-600 !default;
|
||||
|
||||
$border-color: $gray-200 !default;
|
||||
$border-color-translucent: rgba(4, 32, 69, 0.1);
|
||||
$border-light-color: var(--#{$prefix}gray-200) !default;
|
||||
$border-light-opacity: 4.7% !default;
|
||||
$border-light-color-translucent: color-mix(in srgb, var(--#{$prefix}gray-800) #{$border-light-opacity}, transparent) !default;
|
||||
|
||||
$border-dark-color: $gray-400 !default;
|
||||
$border-dark-color-translucent: rgba(4, 32, 69, 0.27);
|
||||
$border-color: var(--#{$prefix}gray-200) !default;
|
||||
$border-opacity: 11.9% !default;
|
||||
$border-color-translucent: color-mix(in srgb, var(--#{$prefix}gray-800) #{$border-opacity}, transparent) !default;
|
||||
|
||||
$border-active-color: color.mix($text-secondary, #ffffff, math.percentage($border-active-opacity)) !default;
|
||||
$border-active-color-translucent: rgba($text-secondary, $border-active-opacity) !default;
|
||||
$border-dark-color: var(--#{$prefix}gray-300) !default;
|
||||
$border-dark-opacity: 20.7% !default;
|
||||
$border-dark-color-translucent: color-mix(in srgb, var(--#{$prefix}gray-800) #{$border-dark-opacity}, transparent) !default;
|
||||
|
||||
$border-active-color: var(--#{$prefix}gray-400) !default;
|
||||
$border-active-opacity: 44.8% !default;
|
||||
$border-active-color-translucent: color-mix(in srgb, var(--#{$prefix}gray-800) #{$border-active-opacity}, transparent) !default;
|
||||
|
||||
$active-bg: rgba(var(--#{$prefix}primary-rgb), 0.04) !default;
|
||||
$active-color: var(--#{$prefix}primary) !default;
|
||||
@@ -880,7 +877,7 @@ $avatar-sizes: (
|
||||
brand-size: 2rem,
|
||||
),
|
||||
) !default;
|
||||
$avatar-border-radius: var(--#{$prefix}border-radius) !default;
|
||||
$avatar-border-radius: var(--#{$prefix}border-radius-pill) !default;
|
||||
$avatar-font-size: $h4-font-size !default;
|
||||
$avatar-box-shadow: var(--#{$prefix}shadow-border) !default;
|
||||
$avatar-list-spacing: -0.5;
|
||||
@@ -994,7 +991,7 @@ $box-shadow-lg: 0 1rem 3rem rgba($black, 0.175) !default;
|
||||
$box-shadow-transparent: 0 0 0 0 transparent !default;
|
||||
$box-shadow-border: inset 0 0 0 1px var(--#{$prefix}border-color-translucent) !default;
|
||||
$box-shadow-input: 0 1px 1px rgba(var(--#{$prefix}body-color-rgb), 0.06) !default;
|
||||
$box-shadow-card: 0 0 4px rgba(var(--#{$prefix}body-color-rgb), 0.04) !default;
|
||||
$box-shadow-card: 0px 1px 3px rgba(0, 0, 0, 0.08) !default;
|
||||
$box-shadow-card-hover: rgba(var(--#{$prefix}body-color-rgb), 0.16) 0 2px 16px 0 !default;
|
||||
$box-shadow-dropdown:
|
||||
0 16px 24px 2px rgba(0, 0, 0, 0.07),
|
||||
@@ -1166,9 +1163,9 @@ $btn-padding-y-lg: $input-btn-padding-y-lg !default;
|
||||
$btn-padding-x-lg: $input-btn-padding-x-lg !default;
|
||||
|
||||
// Inputs
|
||||
$input-bg: var(--#{$prefix}body-bg) !default;
|
||||
$input-bg: var(--#{$prefix}bg-forms) !default;
|
||||
$input-disabled-color: null !default;
|
||||
$input-disabled-bg: var(--#{$prefix}secondary-bg) !default;
|
||||
$input-disabled-bg: var(--#{$prefix}bg-surface-secondary) !default;
|
||||
$input-disabled-border-color: null !default;
|
||||
|
||||
$input-height: null !default;
|
||||
@@ -1865,16 +1862,16 @@ $form-select-font-size-lg: $input-font-size-lg !default;
|
||||
$form-select-border-radius-lg: $input-border-radius-lg !default;
|
||||
$form-select-transition: $input-transition !default;
|
||||
|
||||
$form-switch-color: rgba($black, 0.25) !default;
|
||||
$form-switch-color: white !default;
|
||||
$form-switch-width: 2rem !default;
|
||||
$form-switch-height: 1.25rem !default;
|
||||
$form-switch-padding-start: $form-switch-width + 0.5rem !default;
|
||||
$form-switch-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$border-color}'/></svg>") !default;
|
||||
$form-switch-bg-image: 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}'/></svg>") !default;
|
||||
$form-switch-border-radius: $form-switch-width !default;
|
||||
$form-switch-transition: background-position 0.15s ease-in-out !default;
|
||||
$form-switch-focus-color: $input-focus-border-color !default;
|
||||
$form-switch-focus-color: white !default;
|
||||
$form-switch-focus-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-focus-color}'/></svg>") !default;
|
||||
$form-switch-checked-color: $component-active-color !default;
|
||||
$form-switch-checked-color: white !default;
|
||||
$form-switch-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-checked-color}'/></svg>") !default;
|
||||
$form-switch-checked-bg-position: right center !default;
|
||||
$form-switch-bg-size: auto !default;
|
||||
|
||||
@@ -1,184 +1,203 @@
|
||||
// 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-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-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-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-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-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-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-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-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;
|
||||
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;
|
||||
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-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-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-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-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-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-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-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-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;
|
||||
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;
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
@@ -119,7 +119,7 @@
|
||||
content: '';
|
||||
}
|
||||
|
||||
>* {
|
||||
> * {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
inset-inline-start: 0;
|
||||
@@ -141,4 +141,4 @@
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -69,7 +69,7 @@
|
||||
.nav-item.active:after {
|
||||
border-bottom-width: 0;
|
||||
border-inline-start-width: 3px;
|
||||
inset-inline-end: auto;
|
||||
inset-inline-end: auto;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
@@ -118,7 +118,7 @@ Navbar
|
||||
.badge {
|
||||
position: absolute;
|
||||
top: 0.5rem;
|
||||
inset-inline-end: 0.5rem;
|
||||
inset-inline-end: 0.5rem;
|
||||
transform: translate(50%, -50%);
|
||||
}
|
||||
}
|
||||
@@ -151,8 +151,8 @@ Navbar
|
||||
&:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset-inline-start: 0;
|
||||
inset-inline-end: 0;
|
||||
inset-inline-start: 0;
|
||||
inset-inline-end: 0;
|
||||
bottom: -0.25rem;
|
||||
border: 0 var(--#{$prefix}border-style) var(--#{$prefix}navbar-active-border-color);
|
||||
border-bottom-width: 2px;
|
||||
@@ -235,7 +235,7 @@ Navbar toggler
|
||||
border-radius: inherit;
|
||||
background: inherit;
|
||||
position: absolute;
|
||||
inset-inline-start: 0;
|
||||
inset-inline-start: 0;
|
||||
@include transition(inherit);
|
||||
}
|
||||
|
||||
@@ -313,7 +313,7 @@ Navbar vertical
|
||||
width: $sidebar-width;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
inset-inline-start: 0;
|
||||
inset-inline-start: 0;
|
||||
bottom: 0;
|
||||
z-index: $zindex-fixed;
|
||||
align-items: start;
|
||||
@@ -323,8 +323,8 @@ Navbar vertical
|
||||
|
||||
&.navbar-right,
|
||||
&.navbar-end {
|
||||
inset-inline-start: auto;
|
||||
inset-inline-end: 0;
|
||||
inset-inline-start: auto;
|
||||
inset-inline-end: 0;
|
||||
}
|
||||
|
||||
.navbar-brand {
|
||||
@@ -384,8 +384,8 @@ Navbar vertical
|
||||
height: $navbar-overlap-height;
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
inset-inline-start: 0;
|
||||
inset-inline-end: 0;
|
||||
inset-inline-start: 0;
|
||||
inset-inline-end: 0;
|
||||
background: inherit;
|
||||
z-index: -1;
|
||||
box-shadow: inherit;
|
||||
|
||||
@@ -67,8 +67,8 @@
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
inset-inline-start: 0;
|
||||
inset-inline-end: 0;
|
||||
inset-inline-start: 0;
|
||||
inset-inline-end: 0;
|
||||
bottom: 0;
|
||||
background-image: $overlay-gradient;
|
||||
}
|
||||
|
||||
@@ -33,7 +33,10 @@
|
||||
--#{$prefix}border-color-translucent: #{$border-color-translucent};
|
||||
--#{$prefix}border-dark-color: #{$border-dark-color};
|
||||
--#{$prefix}border-dark-color-translucent: #{$border-dark-color-translucent};
|
||||
--#{$prefix}border-light-color: #{$border-light-color};
|
||||
--#{$prefix}border-light-color-translucent: #{$border-light-color-translucent};
|
||||
--#{$prefix}border-active-color: #{$border-active-color};
|
||||
--#{$prefix}border-active-color-translucent: #{$border-active-color-translucent};
|
||||
|
||||
--#{$prefix}icon-color: #{$icon-color};
|
||||
|
||||
|
||||
@@ -15,17 +15,17 @@
|
||||
}
|
||||
|
||||
[data-bs-theme-base='gray'] {
|
||||
--#{$prefix}gray-50: #f9fafb;
|
||||
--#{$prefix}gray-100: #f3f4f6;
|
||||
--#{$prefix}gray-200: #e5e7eb;
|
||||
--#{$prefix}gray-300: #d1d5db;
|
||||
--#{$prefix}gray-400: #9ca3af;
|
||||
--#{$prefix}gray-500: #6b7280;
|
||||
--#{$prefix}gray-600: #4b5563;
|
||||
--#{$prefix}gray-700: #374151;
|
||||
--#{$prefix}gray-800: #1f2937;
|
||||
--#{$prefix}gray-900: #111827;
|
||||
--#{$prefix}gray-950: #030712;
|
||||
--#{$prefix}gray-50: $gray-50;
|
||||
--#{$prefix}gray-100: $gray-100;
|
||||
--#{$prefix}gray-200: $gray-200;
|
||||
--#{$prefix}gray-300: $gray-300;
|
||||
--#{$prefix}gray-400: $gray-400;
|
||||
--#{$prefix}gray-500: $gray-500;
|
||||
--#{$prefix}gray-600: $gray-600;
|
||||
--#{$prefix}gray-700: $gray-700;
|
||||
--#{$prefix}gray-800: $gray-800;
|
||||
--#{$prefix}gray-900: $gray-900;
|
||||
--#{$prefix}gray-950: $gray-950;
|
||||
}
|
||||
|
||||
[data-bs-theme-base='zinc'] {
|
||||
|
||||
@@ -1,10 +1,12 @@
|
||||
.alert {
|
||||
--#{$prefix}alert-color: var(--#{$prefix}body-color);
|
||||
--#{$prefix}alert-bg: #{color-transparent(var(--#{$prefix}alert-color), 0.1)};
|
||||
--#{$prefix}alert-variant-color: var(--#{$prefix}body-color);
|
||||
--#{$prefix}alert-color: var(--#{$prefix}alert-variant-color);
|
||||
--#{$prefix}alert-bg: #{color-transparent(var(--#{$prefix}alert-variant-color), 0.16, var(--#{$prefix}bg-surface))};
|
||||
--#{$prefix}alert-padding-x: #{$alert-padding-x};
|
||||
--#{$prefix}alert-padding-y: #{$alert-padding-y};
|
||||
--#{$prefix}alert-margin-bottom: #{$alert-margin-bottom};
|
||||
--#{$prefix}alert-border-color: #{color-transparent(var(--#{$prefix}alert-color), 0.2)};
|
||||
--#{$prefix}alert-border-color: #{color-transparent(var(--#{$prefix}alert-variant-color), 0.2, var(--#{$prefix}bg-surface))};
|
||||
--#{$prefix}alert-border-color: var(--#{$prefix}border-color);
|
||||
--#{$prefix}alert-border: var(--#{$prefix}border-width) solid var(--#{$prefix}alert-border-color);
|
||||
--#{$prefix}alert-border-radius: var(--#{$prefix}border-radius);
|
||||
--#{$prefix}alert-link-color: inherit;
|
||||
@@ -16,6 +18,8 @@
|
||||
background-color: color-mix(in srgb, var(--#{$prefix}alert-bg), var(--#{$prefix}bg-surface));
|
||||
border-radius: var(--#{$prefix}alert-border-radius);
|
||||
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}alert-border-color);
|
||||
box-shadow: var(--#{$prefix}box-shadow);
|
||||
color: var(--#{$prefix}alert-color);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 1rem;
|
||||
@@ -66,15 +70,14 @@
|
||||
.btn-close {
|
||||
position: absolute;
|
||||
top: calc(var(--#{$prefix}alert-padding-x) / 2 - 1px);
|
||||
inset-inline-end: calc(var(--#{$prefix}alert-padding-y) / 2 - 1px);
|
||||
inset-inline-end: calc(var(--#{$prefix}alert-padding-y) / 2 - 1px);
|
||||
z-index: 1;
|
||||
padding: calc(var(--#{$prefix}alert-padding-y) * 1.25) var(--#{$prefix}alert-padding-x);
|
||||
}
|
||||
}
|
||||
|
||||
.alert-important {
|
||||
border-color: var(--#{$prefix}alert-color);
|
||||
background-color: var(--#{$prefix}alert-color);
|
||||
background-color: var(--#{$prefix}alert-variant-color);
|
||||
color: var(--#{$prefix}white);
|
||||
|
||||
.alert-description {
|
||||
@@ -93,6 +96,6 @@
|
||||
|
||||
@each $name, $color in $theme-colors {
|
||||
.alert-#{$name} {
|
||||
--#{$prefix}alert-color: var(--#{$prefix}#{$name});
|
||||
--#{$prefix}alert-variant-color: var(--#{$prefix}#{$name});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,6 +9,7 @@
|
||||
--#{$prefix}avatar-font-size: #{$avatar-font-size};
|
||||
--#{$prefix}avatar-icon-size: #{$avatar-icon-size};
|
||||
--#{$prefix}avatar-brand-size: #{$avatar-brand-size};
|
||||
--#{$prefix}avatar-border-radius: #{$avatar-border-radius};
|
||||
position: relative;
|
||||
width: var(--#{$prefix}avatar-size);
|
||||
height: var(--#{$prefix}avatar-size);
|
||||
@@ -24,7 +25,7 @@
|
||||
vertical-align: bottom;
|
||||
user-select: none;
|
||||
background: var(--#{$prefix}avatar-bg) no-repeat center/cover;
|
||||
border-radius: $avatar-border-radius;
|
||||
border-radius: var(--#{$prefix}avatar-border-radius);
|
||||
box-shadow: var(--#{$prefix}avatar-box-shadow);
|
||||
transition:
|
||||
color $transition-time,
|
||||
@@ -38,7 +39,7 @@
|
||||
|
||||
.badge {
|
||||
position: absolute;
|
||||
inset-inline-end: 0;
|
||||
inset-inline-end: 0;
|
||||
bottom: 0;
|
||||
border-radius: $border-radius-pill;
|
||||
box-shadow: 0 0 0 calc(var(--#{$prefix}avatar-status-size) / 4) $card-bg;
|
||||
@@ -58,6 +59,10 @@
|
||||
border-radius: $border-radius-pill;
|
||||
}
|
||||
|
||||
.avatar-square {
|
||||
border-radius: var(--#{$prefix}border-radius);
|
||||
}
|
||||
|
||||
@each $avatar-size, $size in $avatar-sizes {
|
||||
.avatar-#{$avatar-size} {
|
||||
--#{$prefix}avatar-size: #{map.get($size, size)};
|
||||
@@ -66,14 +71,14 @@
|
||||
--#{$prefix}avatar-icon-size: #{map.get($size, icon-size)};
|
||||
--#{$prefix}avatar-brand-size: #{map.get($size, brand-size)};
|
||||
|
||||
@if map.has-key($size, border-radius) {
|
||||
border-radius: map.get($size, border-radius);
|
||||
}
|
||||
|
||||
.badge:empty {
|
||||
width: map.get($size, status-size);
|
||||
height: map.get($size, status-size);
|
||||
}
|
||||
|
||||
&.avatar-square {
|
||||
--#{$prefix}avatar-border-radius: #{map.get($size, border-radius)};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -96,10 +101,13 @@
|
||||
--#{$prefix}list-gap: 0;
|
||||
|
||||
.avatar {
|
||||
margin-inline-end: calc(#{$avatar-list-spacing} * var(--#{$prefix}avatar-size)) !important;
|
||||
box-shadow:
|
||||
var(--#{$prefix}avatar-box-shadow),
|
||||
0 0 0 2px var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-inline-start: calc(#{$avatar-list-spacing} * var(--#{$prefix}avatar-size)) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -76,6 +76,15 @@
|
||||
//
|
||||
// Button color variations
|
||||
//
|
||||
.btn-ghost {
|
||||
--#{$prefix}btn-bg: transparent;
|
||||
--#{$prefix}btn-border-color: transparent;
|
||||
--#{$prefix}btn-box-shadow: none;
|
||||
--#{$prefix}btn-hover-bg: var(--#{$prefix}bg-surface-secondary);
|
||||
--#{$prefix}btn-hover-border-color: transparent;
|
||||
--#{$prefix}btn-hover-color: var(--#{$prefix}body-color);
|
||||
}
|
||||
|
||||
@each $color, $value in map.merge($theme-colors, $social-colors) {
|
||||
.btn-#{$color} {
|
||||
@if $color == 'dark' {
|
||||
@@ -114,15 +123,6 @@
|
||||
--#{$prefix}btn-disabled-border-color: var(--#{$prefix}#{$color});
|
||||
}
|
||||
|
||||
.btn-ghost {
|
||||
--#{$prefix}btn-bg: transparent;
|
||||
--#{$prefix}btn-border-color: transparent;
|
||||
--#{$prefix}btn-box-shadow: none;
|
||||
--#{$prefix}btn-hover-bg: var(--#{$prefix}bg-surface-secondary);
|
||||
--#{$prefix}btn-hover-border-color: transparent;
|
||||
--#{$prefix}btn-hover-color: var(--#{$prefix}body-color);
|
||||
}
|
||||
|
||||
.btn-ghost-#{$color},
|
||||
.btn-ghost.btn-#{$color} {
|
||||
--#{$prefix}btn-color: var(--#{$prefix}#{$color});
|
||||
@@ -250,7 +250,7 @@
|
||||
position: absolute;
|
||||
width: var(--#{$prefix}btn-icon-size);
|
||||
height: var(--#{$prefix}btn-icon-size);
|
||||
inset-inline-start: calc(50% - var(--#{$prefix}btn-icon-size) / 2);
|
||||
inset-inline-start: calc(50% - var(--#{$prefix}btn-icon-size) / 2);
|
||||
top: calc(50% - var(--#{$prefix}btn-icon-size) / 2);
|
||||
animation: spinner-border 0.75s linear infinite;
|
||||
}
|
||||
|
||||
@@ -77,8 +77,8 @@
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
inset-inline-end: 0;
|
||||
inset-inline-start: 0;
|
||||
inset-inline-end: 0;
|
||||
inset-inline-start: 0;
|
||||
height: 1.4rem;
|
||||
content: '';
|
||||
background: rgba(var(--#{$prefix}primary-rgb), 0.1);
|
||||
@@ -95,10 +95,10 @@
|
||||
}
|
||||
|
||||
&.range-start:before {
|
||||
inset-inline-start: 50%;
|
||||
inset-inline-start: 50%;
|
||||
}
|
||||
|
||||
&.range-end:before {
|
||||
inset-inline-end: 50%;
|
||||
inset-inline-end: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -40,7 +40,6 @@
|
||||
|
||||
// Card borderless
|
||||
.card-borderless {
|
||||
|
||||
&,
|
||||
.card-header,
|
||||
.card-footer {
|
||||
@@ -48,6 +47,18 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Card dashed
|
||||
.card-dashed {
|
||||
border: var(--#{$prefix}border-width) dashed var(--#{$prefix}border-color);
|
||||
}
|
||||
|
||||
// Card transparent
|
||||
.card-transparent {
|
||||
background: transparent;
|
||||
border: var(--#{$prefix}border-width) dashed var(--#{$prefix}border-color);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
// Card stamp
|
||||
.card-stamp {
|
||||
--#{$prefix}stamp-size: 7rem;
|
||||
@@ -141,7 +152,7 @@
|
||||
background: $active-bg;
|
||||
}
|
||||
|
||||
&+& {
|
||||
& + & {
|
||||
border-inline-start: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
|
||||
}
|
||||
}
|
||||
@@ -340,17 +351,17 @@ Stacked card
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.card-sm>& {
|
||||
.card-sm > & {
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.card-md>& {
|
||||
.card-md > & {
|
||||
@include media-breakpoint-up(md) {
|
||||
padding: 2.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.card-lg>& {
|
||||
.card-lg > & {
|
||||
@include media-breakpoint-up(md) {
|
||||
padding: 2rem;
|
||||
}
|
||||
@@ -364,7 +375,7 @@ Stacked card
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&+& {
|
||||
& + & {
|
||||
border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
|
||||
}
|
||||
}
|
||||
@@ -427,7 +438,6 @@ Card table
|
||||
margin-bottom: 0 !important;
|
||||
|
||||
tr {
|
||||
|
||||
td,
|
||||
th {
|
||||
&:first-child {
|
||||
@@ -456,11 +466,11 @@ Card table
|
||||
tfoot {
|
||||
&:last-child {
|
||||
tr:last-child {
|
||||
>*:last-child {
|
||||
> *:last-child {
|
||||
border-end-end-radius: calc(var(--#{$prefix}card-border-radius) - var(--#{$prefix}card-border-width));
|
||||
}
|
||||
|
||||
>*:first-child {
|
||||
> *:first-child {
|
||||
border-end-start-radius: calc(var(--#{$prefix}card-border-radius) - var(--#{$prefix}card-border-width));
|
||||
}
|
||||
}
|
||||
@@ -496,7 +506,7 @@ Card table
|
||||
}
|
||||
}
|
||||
|
||||
.card-body+& {
|
||||
.card-body + & {
|
||||
border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}table-border-color);
|
||||
}
|
||||
}
|
||||
@@ -541,7 +551,7 @@ Card avatar
|
||||
Card list group
|
||||
*/
|
||||
.card-list-group {
|
||||
.card-body+& {
|
||||
.card-body + & {
|
||||
border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
|
||||
}
|
||||
|
||||
@@ -600,7 +610,7 @@ Card list group
|
||||
}
|
||||
}
|
||||
|
||||
+.nav-item {
|
||||
+ .nav-item {
|
||||
margin-inline-start: calc(-1 * #{$card-border-width});
|
||||
}
|
||||
}
|
||||
@@ -640,7 +650,7 @@ Card list group
|
||||
border-end-start-radius: 0;
|
||||
}
|
||||
|
||||
.nav-tabs+.tab-content .card {
|
||||
.nav-tabs + .tab-content .card {
|
||||
border-end-start-radius: var(--#{$prefix}card-border-radius);
|
||||
border-start-start-radius: 0;
|
||||
}
|
||||
@@ -654,7 +664,6 @@ Card note
|
||||
--#{$prefix}card-border-color: #fff1c9;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
Card gradient
|
||||
*/
|
||||
@@ -663,10 +672,10 @@ Card gradient
|
||||
--#{$prefix}card-gradient-opacity: 86%;
|
||||
--#{$prefix}card-gradient: var(--tblr-primary), var(--tblr-primary);
|
||||
|
||||
background: radial-gradient(ellipse at center, var(--#{$prefix}card-bg) 0%, color-mix(in srgb, var(--#{$prefix}card-bg) 0%, transparent) 80%) border-box,
|
||||
linear-gradient(var(--#{$prefix}card-gradient-direction), color-mix(in srgb, var(--#{$prefix}card-bg) var(--#{$prefix}card-gradient-opacity), transparent) 0%, var(--#{$prefix}card-bg) 40%) border-box,
|
||||
linear-gradient(calc(270deg + var(--#{$prefix}card-gradient-direction)), var(--#{$prefix}card-gradient)) border-box;
|
||||
|
||||
background:
|
||||
radial-gradient(ellipse at center, var(--#{$prefix}card-bg) 0%, color-mix(in srgb, var(--#{$prefix}card-bg) 0%, transparent) 80%) border-box,
|
||||
linear-gradient(var(--#{$prefix}card-gradient-direction), color-mix(in srgb, var(--#{$prefix}card-bg) var(--#{$prefix}card-gradient-opacity), transparent) 0%, var(--#{$prefix}card-bg) 40%) border-box,
|
||||
linear-gradient(calc(270deg + var(--#{$prefix}card-gradient-direction)), var(--#{$prefix}card-gradient)) border-box;
|
||||
}
|
||||
|
||||
@each $name, $color in map.merge($colors, $theme-colors) {
|
||||
@@ -676,14 +685,7 @@ Card gradient
|
||||
}
|
||||
|
||||
.card-gradient-rainbow {
|
||||
--#{$prefix}card-gradient: #78C5D6,
|
||||
#459BA8,
|
||||
#79C267,
|
||||
#C5D647,
|
||||
#F5D63D,
|
||||
#F08B33,
|
||||
#E868A2,
|
||||
#BE61A5;
|
||||
--#{$prefix}card-gradient: #78c5d6, #459ba8, #79c267, #c5d647, #f5d63d, #f08b33, #e868a2, #be61a5;
|
||||
}
|
||||
|
||||
.card-gradient-sun {
|
||||
@@ -695,7 +697,7 @@ Card gradient
|
||||
}
|
||||
|
||||
.card-gradient-ocean {
|
||||
--#{$prefix}card-gradient: #1CB5E0, #000851;
|
||||
--#{$prefix}card-gradient: #1cb5e0, #000851;
|
||||
}
|
||||
|
||||
.card-gradient-mellow {
|
||||
@@ -703,7 +705,7 @@ Card gradient
|
||||
}
|
||||
|
||||
.card-gradient-disco {
|
||||
--#{$prefix}card-gradient: #FC466B, #3F5EFB;
|
||||
--#{$prefix}card-gradient: #fc466b, #3f5efb;
|
||||
}
|
||||
|
||||
.card-gradient-psychedelic {
|
||||
@@ -715,7 +717,7 @@ Card gradient
|
||||
}
|
||||
|
||||
.card-gradient-gold {
|
||||
--#{$prefix}card-gradient: #9d4100, #bf7122, #f59f00, #FFD700;
|
||||
--#{$prefix}card-gradient: #9d4100, #bf7122, #f59f00, #ffd700;
|
||||
}
|
||||
|
||||
.card-gradient-animated {
|
||||
@@ -732,4 +734,4 @@ Card gradient
|
||||
|
||||
.card-gradient-start {
|
||||
--#{$prefix}card-gradient-direction: 90deg;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -74,7 +74,7 @@
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -0.25rem;
|
||||
inset-inline-start: 0.75rem;
|
||||
inset-inline-start: 0.75rem;
|
||||
display: block;
|
||||
background: inherit;
|
||||
width: 14px;
|
||||
@@ -90,8 +90,8 @@
|
||||
|
||||
&.dropdown-menu-end {
|
||||
&:before {
|
||||
inset-inline-end: 0.75rem;
|
||||
inset-inline-start: auto;
|
||||
inset-inline-end: 0.75rem;
|
||||
inset-inline-start: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,7 +9,7 @@
|
||||
&:after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
inset-inline-start: 0;
|
||||
inset-inline-start: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
content: '';
|
||||
@@ -33,8 +33,8 @@ Dimmer
|
||||
.loader {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
inset-inline-end: 0;
|
||||
inset-inline-start: 0;
|
||||
inset-inline-end: 0;
|
||||
inset-inline-start: 0;
|
||||
display: none;
|
||||
margin: 0 auto;
|
||||
transform: translateY(-50%);
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
> .btn-close {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
inset-inline-end: 0;
|
||||
inset-inline-end: 0;
|
||||
width: $modal-header-height;
|
||||
height: $modal-header-height;
|
||||
margin: 0;
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
@keyframes progress-indeterminate {
|
||||
0% {
|
||||
inset-inline-end: 100%;
|
||||
inset-inline-start: -35%;
|
||||
inset-inline-end: 100%;
|
||||
inset-inline-start: -35%;
|
||||
}
|
||||
|
||||
100%,
|
||||
60% {
|
||||
inset-inline-end: -90%;
|
||||
inset-inline-start: 100%;
|
||||
inset-inline-end: -90%;
|
||||
inset-inline-start: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -64,7 +64,7 @@ Progress bar
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
inset-inline-start: 0;
|
||||
inset-inline-start: 0;
|
||||
content: '';
|
||||
background-color: inherit;
|
||||
will-change: left, right;
|
||||
@@ -93,6 +93,8 @@ Progressbg
|
||||
.progressbg-text {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@include text-truncate;
|
||||
}
|
||||
|
||||
|
||||
@@ -25,7 +25,7 @@
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
inset-inline-end: 0;
|
||||
inset-inline-end: 0;
|
||||
bottom: 100%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
@@ -65,7 +65,7 @@
|
||||
|
||||
&:before {
|
||||
top: 0;
|
||||
inset-inline-end: 100%;
|
||||
inset-inline-end: 100%;
|
||||
bottom: auto;
|
||||
border-color: inherit;
|
||||
border-top-color: transparent;
|
||||
@@ -73,13 +73,13 @@
|
||||
}
|
||||
|
||||
&.ribbon-start {
|
||||
inset-inline-end: auto;
|
||||
inset-inline-start: 0.75rem;
|
||||
inset-inline-end: auto;
|
||||
inset-inline-start: 0.75rem;
|
||||
|
||||
&:before {
|
||||
top: 0;
|
||||
inset-inline-end: 100%;
|
||||
inset-inline-start: auto;
|
||||
inset-inline-end: 100%;
|
||||
inset-inline-start: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -92,7 +92,7 @@
|
||||
&:before {
|
||||
top: auto;
|
||||
bottom: 100%;
|
||||
inset-inline-start: 0;
|
||||
inset-inline-start: 0;
|
||||
border-color: inherit;
|
||||
border-top-color: transparent;
|
||||
border-inline-start-color: transparent;
|
||||
@@ -111,7 +111,7 @@
|
||||
&:after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
inset-inline-end: 100%;
|
||||
inset-inline-end: 100%;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
@@ -127,8 +127,8 @@
|
||||
padding-inline-end: 0.5rem;
|
||||
|
||||
&:after {
|
||||
inset-inline-end: auto;
|
||||
inset-inline-start: 100%;
|
||||
inset-inline-end: auto;
|
||||
inset-inline-start: 100%;
|
||||
border-inline-end-color: transparent;
|
||||
|
||||
border-inline-end-width: 0.5rem;
|
||||
@@ -144,8 +144,8 @@
|
||||
|
||||
&:after {
|
||||
top: 100%;
|
||||
inset-inline-end: 0;
|
||||
inset-inline-start: 0;
|
||||
inset-inline-end: 0;
|
||||
inset-inline-start: 0;
|
||||
border-color: inherit;
|
||||
border-width: 1rem;
|
||||
border-top-width: 0;
|
||||
|
||||
@@ -52,7 +52,7 @@
|
||||
|
||||
&:not(:last-child):after {
|
||||
position: absolute;
|
||||
inset-inline-start: 50%;
|
||||
inset-inline-start: 50%;
|
||||
width: 100%;
|
||||
content: '';
|
||||
transform: translateY(-50%);
|
||||
@@ -67,7 +67,7 @@
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
inset-inline-start: 50%;
|
||||
inset-inline-start: 50%;
|
||||
z-index: 1;
|
||||
box-sizing: content-box;
|
||||
display: flex;
|
||||
@@ -137,7 +137,7 @@
|
||||
|
||||
&:before {
|
||||
top: var(--#{$prefix}steps-dot-offset);
|
||||
inset-inline-start: 0;
|
||||
inset-inline-start: 0;
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
|
||||
@@ -147,7 +147,7 @@
|
||||
content: '';
|
||||
transform: translateX(-50%);
|
||||
top: var(--#{$prefix}steps-dot-offset);
|
||||
inset-inline-start: calc(var(--#{$prefix}steps-dot-size) * 0.5);
|
||||
inset-inline-start: calc(var(--#{$prefix}steps-dot-size) * 0.5);
|
||||
width: var(--#{$prefix}steps-border-width);
|
||||
height: calc(100% + 1rem);
|
||||
}
|
||||
|
||||
@@ -39,7 +39,7 @@
|
||||
.switch-icon-b {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
inset-inline-start: 0;
|
||||
inset-inline-start: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: var(--#{$prefix}timeline-icon-size);
|
||||
inset-inline-start: calc(var(--#{$prefix}timeline-icon-size) / 2);
|
||||
inset-inline-start: calc(var(--#{$prefix}timeline-icon-size) / 2);
|
||||
bottom: calc(-1 * var(--#{$prefix}page-padding));
|
||||
width: var(--#{$prefix}border-width);
|
||||
background-color: var(--#{$prefix}border-color);
|
||||
|
||||
@@ -82,4 +82,4 @@ Form switch
|
||||
.form-check-label {
|
||||
padding-top: 0.125rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -27,7 +27,7 @@ Color Input
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
inset-inline-start: 0;
|
||||
inset-inline-start: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
content: '';
|
||||
|
||||
@@ -31,7 +31,7 @@ Icon input
|
||||
font-size: 1.2em;
|
||||
|
||||
&:last-child {
|
||||
inset-inline-end: 0;
|
||||
inset-inline-start: auto;
|
||||
inset-inline-end: 0;
|
||||
inset-inline-start: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -34,7 +34,7 @@ Image check
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: 0.25rem;
|
||||
inset-inline-start: 0.25rem;
|
||||
inset-inline-start: 0.25rem;
|
||||
z-index: 1;
|
||||
display: block;
|
||||
width: $form-check-input-width;
|
||||
|
||||
4
core/scss/vendor/_coloris.scss
vendored
4
core/scss/vendor/_coloris.scss
vendored
@@ -53,8 +53,8 @@ input.clr-color {
|
||||
button {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
inset-inline-start: 6px;
|
||||
inset-inline-end: auto;
|
||||
inset-inline-start: 6px;
|
||||
inset-inline-end: auto;
|
||||
border-radius: var(--#{$prefix}border-radius);
|
||||
|
||||
&:after {
|
||||
|
||||
@@ -714,25 +714,22 @@ permalink: all-elements.html
|
||||
<div class="card-body">
|
||||
<h4>Basic Segmented</h4>
|
||||
<div class="mb-3">
|
||||
{% include "ui/nav-segmented.html" %}
|
||||
{% include "ui/nav-segmented.html" items="Home,Profile,Settings" %}
|
||||
</div>
|
||||
|
||||
<h4>With Icons</h4>
|
||||
<div class="mb-3">
|
||||
<nav class="nav nav-segmented" role="tablist">
|
||||
<button class="nav-link active" role="tab">
|
||||
{% include "ui/icon.html" icon="home" class="nav-link-icon" %}
|
||||
Home
|
||||
</button>
|
||||
<button class="nav-link" role="tab">
|
||||
{% include "ui/icon.html" icon="user" class="nav-link-icon" %}
|
||||
Profile
|
||||
</button>
|
||||
<button class="nav-link" role="tab">
|
||||
{% include "ui/icon.html" icon="settings" class="nav-link-icon" %}
|
||||
Settings
|
||||
</button>
|
||||
</nav>
|
||||
{% include "ui/nav-segmented.html" icons="home,user,settings" %}
|
||||
</div>
|
||||
|
||||
<h4>With Emojis</h4>
|
||||
<div class="mb-3">
|
||||
{% include "ui/nav-segmented.html" items="👦,👦🏿,👦🏾,👦🏽,👦🏼,👦🏻" %}
|
||||
</div>
|
||||
|
||||
<h4>With Icons and Text</h4>
|
||||
<div class="mb-3">
|
||||
{% include "ui/nav-segmented.html" items="Home,Profile,Settings" icons="home,user,settings" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -108,17 +108,7 @@ permalink: cards.html
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="card bg-primary text-primary-fg">
|
||||
<div class="card-stamp">
|
||||
<div class="card-stamp-icon bg-white text-primary">
|
||||
{% include "ui/icon.html" icon="star" %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Card with background and icon</h3>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.</p>
|
||||
</div>
|
||||
</div>
|
||||
{% include "cards/card-background-icon.html" %}
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
{% include "cards/card.html" status-top="danger" title="Card with top status" %}
|
||||
@@ -131,22 +121,10 @@ permalink: cards.html
|
||||
</div>
|
||||
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="card">
|
||||
<div class="ribbon ribbon-top bg-yellow">{% include "ui/icon.html" icon="star" %}</div>
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Card with top ribbon</h3>
|
||||
<p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.</p>
|
||||
</div>
|
||||
</div>
|
||||
{% include "cards/card-ribbon-top.html" %}
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
<div class="card">
|
||||
<div class="ribbon bg-red">NEW</div>
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Card with text ribbon</h3>
|
||||
<p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.</p>
|
||||
</div>
|
||||
</div>
|
||||
{% include "cards/card-ribbon-text.html" %}
|
||||
</div>
|
||||
<div class="col-md-6 col-lg-3">
|
||||
{% include "cards/card.html" progress=true title="Card with progress bar" %}
|
||||
@@ -199,8 +177,8 @@ permalink: cards.html
|
||||
|
||||
<div class="col-md-6 col-lg-4">{% include "cards/card.html" header-tabs=true %}</div>
|
||||
<div class="col-md-6 col-lg-4">{% include "cards/card.html" header-pills=true %}</div>
|
||||
<div class="col-md-6 col-lg-4">{% include "cards/card-tabs.html" count=4 %}</div>
|
||||
<div class="col-md-6 col-lg-4">{% include "cards/card-tabs.html" count=4 bottom=true id="bottom" %}</div>
|
||||
<div class="col-md-6 col-lg-4">{% include "cards/card-tabs.html" %}</div>
|
||||
<div class="col-md-6 col-lg-4">{% include "cards/card-tabs.html" bottom=true id="bottom" %}</div>
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
@@ -278,5 +256,6 @@ permalink: cards.html
|
||||
</div>
|
||||
|
||||
<div class="col-lg-4">{% include "cards/card.html" empty=true %}</div>
|
||||
<div class="col-lg-4">{% include "cards/empty-team.html" %}</div>
|
||||
<div class="col-lg-4">{% include "cards/credit-card.html" %}</div>
|
||||
</div>
|
||||
@@ -21,7 +21,7 @@ permalink: colors.html
|
||||
<div class="col-12">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto">
|
||||
<div class="avatar bg-{{ color[0] }} text-{{ color[0] }}-fg">
|
||||
<div class="avatar bg-{{ color[0] }} text-{{ color[0] }}-fg avatar-square">
|
||||
{{ color[1].abbr }}
|
||||
</div>
|
||||
</div>
|
||||
@@ -44,7 +44,7 @@ permalink: colors.html
|
||||
<div class="col-12">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto">
|
||||
<div class="avatar bg-{{ color[0] }}-lt text-{{ color[0] }}-lt-fg">
|
||||
<div class="avatar bg-{{ color[0] }}-lt text-{{ color[0] }}-lt-fg avatar-square">
|
||||
{{ color[1].abbr }}
|
||||
</div>
|
||||
</div>
|
||||
@@ -67,7 +67,7 @@ permalink: colors.html
|
||||
<div class="col-12">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto">
|
||||
<div class="avatar bg-{{ color[0] }} text-{{ color[0] }}-fg">
|
||||
<div class="avatar bg-{{ color[0] }} text-{{ color[0] }}-fg avatar-square">
|
||||
{{ color[1].abbr }}
|
||||
</div>
|
||||
</div>
|
||||
@@ -90,7 +90,7 @@ permalink: colors.html
|
||||
<div class="col-12">
|
||||
<div class="row align-items-center">
|
||||
<div class="col-auto">
|
||||
<div class="avatar bg-{{ color[0] }} text-{{ color[0] }}-fg">
|
||||
<div class="avatar bg-{{ color[0] }} text-{{ color[0] }}-fg avatar-square">
|
||||
{% include "ui/icon.html" icon=color[1].icon %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -7,7 +7,7 @@ permalink: form-layout.html
|
||||
page-libs: [litepicker]
|
||||
---
|
||||
|
||||
<div class="row row-cards row-cols-1 row-cols-md-2">
|
||||
<div class="row row-cards row-cols-1 row-cols-md-3">
|
||||
<div class="col">
|
||||
<div class="row row-cards">
|
||||
<div class="col-12">
|
||||
@@ -360,4 +360,8 @@ page-libs: [litepicker]
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col">
|
||||
{% include "cards/form/payment.html" %}
|
||||
</div>
|
||||
</div>
|
||||
@@ -6,27 +6,63 @@ layout: default
|
||||
permalink: logs.html
|
||||
---
|
||||
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4>
|
||||
Checked URL
|
||||
</h4>
|
||||
<div>
|
||||
<pre><code>GET <a class="text-reset" target="_blank" href="{{ site.previewUrl }}">{{ site.previewUrl }}</a></code></pre>
|
||||
</div>
|
||||
|
||||
<h4>Request Timing</h4>
|
||||
<div>
|
||||
<pre>Effective URL <a class="text-reset" target="_blank" href="{{ site.previewUrl }}">{{ site.previewUrl }}</a><br>Redirect count 0<br>Name lookup time 3.4e-05<br>Connect time 0.000521<br>Pre-transfer time 0.0<br>Start-transfer time 0.0<br>App connect time 0.0<br>Redirect time 0.0<br>Total time 28.000601<br>Response code 0<br>Return keyword operation_timedout</pre>
|
||||
</div>
|
||||
|
||||
<h4>Response Headers</h4>
|
||||
<div>
|
||||
<pre>HTTP/1.1 200 Connection established</pre>
|
||||
<div class="row">
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4>
|
||||
Checked URL
|
||||
</h4>
|
||||
<div>
|
||||
<pre><code>GET <a class="text-reset" target="_blank" href="{{ site.previewUrl }}">{{ site.previewUrl }}</a></code></pre>
|
||||
</div>
|
||||
|
||||
<h4>Request Timing</h4>
|
||||
<div>
|
||||
<pre>Effective URL <a class="text-reset" target="_blank" href="{{ site.previewUrl }}">{{ site.previewUrl }}</a><br>Redirect count 0<br>Name lookup time 3.4e-05<br>Connect time 0.000521<br>Pre-transfer time 0.0<br>Start-transfer time 0.0<br>App connect time 0.0<br>Redirect time 0.0<br>Total time 28.000601<br>Response code 0<br>Return keyword operation_timedout</pre>
|
||||
</div>
|
||||
|
||||
<h4>Response Headers</h4>
|
||||
<div>
|
||||
<pre>HTTP/1.1 200 Connection established</pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<h4>Escalation</h4>
|
||||
<div>Entire team</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<h4>Escalation</h4>
|
||||
<div>Entire team</div>
|
||||
<div class="col-lg-6">
|
||||
<div class="card">
|
||||
<div class="card-body">
|
||||
<h4>
|
||||
Application Log
|
||||
</h4>
|
||||
<div>
|
||||
<pre><code>2024-01-15 14:23:45 [INFO] Application started successfully
|
||||
2024-01-15 14:23:46 [DEBUG] Database connection established
|
||||
2024-01-15 14:23:47 [INFO] User authentication successful: user_id=12345
|
||||
2024-01-15 14:23:48 [WARNING] Rate limit approaching: 85% of quota used
|
||||
2024-01-15 14:23:49 [ERROR] Failed to process payment: transaction_id=tx_789
|
||||
2024-01-15 14:23:50 [INFO] Cache cleared: keys=1523
|
||||
2024-01-15 14:23:51 [DEBUG] API request completed: endpoint=/api/users, duration=234ms</code></pre>
|
||||
</div>
|
||||
|
||||
<h4>Log Levels</h4>
|
||||
<div>
|
||||
<div class="mb-2">
|
||||
{% include "ui/badge.html" text="INFO" color="success" %}
|
||||
{% include "ui/badge.html" text="WARNING" color="warning" %}
|
||||
{% include "ui/badge.html" text="ERROR" color="disabled" %}
|
||||
{% include "ui/badge.html" text="DEBUG" color="disabled" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<h4>Log Source</h4>
|
||||
<div>Application Server (prod-01)</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -160,31 +160,36 @@ export function appFilters(eleventyConfig) {
|
||||
|
||||
// time ago from today
|
||||
eleventyConfig.addFilter("timeago", function (date) {
|
||||
const seconds = Math.floor((new Date() - date) / 1000);
|
||||
let seconds;
|
||||
if (typeof date === 'number') {
|
||||
seconds = date;
|
||||
} else {
|
||||
seconds = Math.floor((new Date() - date) / 1000);
|
||||
}
|
||||
|
||||
let interval = Math.floor(seconds / 31536000);
|
||||
|
||||
if (interval > 1) {
|
||||
return interval + " years ago";
|
||||
if (interval >= 1) {
|
||||
return `${interval} year${interval > 1 ? 's' : ''} ago`;
|
||||
}
|
||||
interval = Math.floor(seconds / 2592000);
|
||||
if (interval > 1) {
|
||||
return interval + " months ago";
|
||||
if (interval >= 1) {
|
||||
return `${interval} month${interval > 1 ? 's' : ''} ago`;
|
||||
}
|
||||
interval = Math.floor(seconds / 86400);
|
||||
if (interval > 1) {
|
||||
return interval + " days ago";
|
||||
if (interval >= 1) {
|
||||
return `${interval} day${interval > 1 ? 's' : ''} ago`;
|
||||
}
|
||||
interval = Math.floor(seconds / 3600);
|
||||
if (interval > 1) {
|
||||
return interval + " hours ago";
|
||||
if (interval >= 1) {
|
||||
return `${interval} hour${interval > 1 ? 's' : ''} ago`;
|
||||
}
|
||||
interval = Math.floor(seconds / 60);
|
||||
if (interval > 1) {
|
||||
return interval + " minutes ago";
|
||||
if (interval >= 1) {
|
||||
return `${interval} minute${interval > 1 ? 's' : ''} ago`;
|
||||
}
|
||||
if (seconds > 0) {
|
||||
return Math.floor(seconds) + " seconds ago";
|
||||
return `${Math.floor(seconds)} second${Math.floor(seconds) > 1 ? 's' : ''} ago`;
|
||||
}
|
||||
|
||||
return "now";
|
||||
|
||||
12
shared/includes/cards/card-background-icon.html
Normal file
12
shared/includes/cards/card-background-icon.html
Normal file
@@ -0,0 +1,12 @@
|
||||
<div class="card bg-primary text-primary-fg">
|
||||
<div class="card-stamp">
|
||||
<div class="card-stamp-icon bg-white text-primary">
|
||||
{% include "ui/icon.html" icon="star" %}
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Card with background and icon</h3>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
8
shared/includes/cards/card-ribbon-text.html
Normal file
8
shared/includes/cards/card-ribbon-text.html
Normal file
@@ -0,0 +1,8 @@
|
||||
<div class="card">
|
||||
<div class="ribbon bg-red">NEW</div>
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Card with text ribbon</h3>
|
||||
<p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
8
shared/includes/cards/card-ribbon-top.html
Normal file
8
shared/includes/cards/card-ribbon-top.html
Normal file
@@ -0,0 +1,8 @@
|
||||
<div class="card">
|
||||
<div class="ribbon ribbon-top bg-yellow">{% include "ui/icon.html" icon="star" %}</div>
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Card with top ribbon</h3>
|
||||
<p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto at consectetur culpa ducimus eum fuga fugiat, ipsa iusto, modi nostrum recusandae reiciendis saepe.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
{% assign tabs-count = include.count | default: 3 %}
|
||||
{% assign id = include.id | default: 'top' %}
|
||||
{% assign tabs = (1..tabs-count) %}
|
||||
{% assign tabs = 'Activity,Profile,Settings' | split: "," %}
|
||||
|
||||
{% capture tabs-html %}
|
||||
<!-- Cards navigation -->
|
||||
<ul class="nav nav-tabs{% if include.bottom %} nav-tabs-bottom{% endif %}">
|
||||
{% for tab in tabs %}
|
||||
<li class="nav-item"><a href="#tab-{{ id }}-{{ tab }}" class="nav-link{% if forloop.first %} active{% endif %}" data-bs-toggle="tab">Tab {{ tab }}</a></li>
|
||||
<li class="nav-item"><a href="#tab-{{ id }}-{{ forloop.index }}" class="nav-link{% if forloop.first %} active{% endif %}" data-bs-toggle="tab">{{ tab }}</a></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{%- endcapture %}
|
||||
@@ -15,9 +15,9 @@
|
||||
<div class="tab-content">
|
||||
{% for tab in tabs %}
|
||||
<!-- Content of card #{{ tab }} -->
|
||||
<div id="tab-{{ id }}-{{ tab }}" class="card tab-pane{% if forloop.first %} active show{% endif %}">
|
||||
<div id="tab-{{ id }}-{{ forloop.index }}" class="card tab-pane{% if forloop.first %} active show{% endif %}">
|
||||
<div class="card-body">
|
||||
<div class="card-title">Content of tab #{{ tab }}</div>
|
||||
<div class="card-title">{{ tab }}</div>
|
||||
<p class="text-secondary">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci, alias aliquid distinctio dolorem expedita, fugiat hic magni molestiae molestias odit.
|
||||
</p>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<{% if link %}a href="#"{% else %}div{% endif %} class="card{% if include.active %} card-active{% endif %}{% if include.inactive %} card-inactive{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
|
||||
|
||||
{% if include['empty'] %}
|
||||
{% include "ui/empty.html" illustration=true %}
|
||||
{% include "ui/empty.html" illustration="not-found" height=160 %}
|
||||
|
||||
{% else %}
|
||||
|
||||
@@ -78,7 +78,7 @@
|
||||
{% when "check" %}
|
||||
{% include "ui/form/check.html" empty=true checked=true class="m-0" %}
|
||||
{% when "avatars" %}
|
||||
{% include "ui/avatar-list.html" stacked=true text="+3" %}
|
||||
{% include "ui/avatar-list.html" stacked=true text="+3" size="sm" %}
|
||||
{% when "more" %}
|
||||
<a href="#">More information</a>
|
||||
{% endcase %}
|
||||
|
||||
@@ -13,5 +13,5 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% include "ui/chart.html" chart-id="revenue-bg" size="sm" class="rounded-bottom" %}
|
||||
{% include "ui/chart.html" chart-id="revenue-bg" size="sm" class="rounded-bottom-3" %}
|
||||
</div>
|
||||
|
||||
12
shared/includes/cards/empty-team.html
Normal file
12
shared/includes/cards/empty-team.html
Normal file
@@ -0,0 +1,12 @@
|
||||
<div class="card card-lg card-dashed card-transparent">
|
||||
<div class="card-body text-center">
|
||||
<div class="mb-3">
|
||||
{% include "ui/avatar-list.html" stacked %}
|
||||
</div>
|
||||
<h3 class="card-title">No Team Members</h3>
|
||||
<p class="text-secondary">Invite your team to<br>collaborate on this project.</p>
|
||||
<div class="mt-4">
|
||||
{% include "ui/button.html" text="Invite Members" color="primary" icon="plus" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
91
shared/includes/cards/form/payment.html
Normal file
91
shared/includes/cards/form/payment.html
Normal file
@@ -0,0 +1,91 @@
|
||||
<form class="card">
|
||||
<div class="card-body">
|
||||
<h3 class="card-title">Payment Method</h3>
|
||||
<p class="card-subtitle mb-4">All transactions are secure and encrypted</p>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Name on Card</label>
|
||||
<input type="text" class="form-control" placeholder="John Doe">
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-8">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Card Number</label>
|
||||
<input type="text" class="form-control" placeholder="1234 5678 9012 3456">
|
||||
<small class="form-hint">Enter your 16-digit number.</small>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-4">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">CVV</label>
|
||||
<input type="text" class="form-control" placeholder="123">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Month</label>
|
||||
<select class="form-select">
|
||||
<option value="">MM</option>
|
||||
<option value="1">January</option>
|
||||
<option value="2">February</option>
|
||||
<option value="3">March</option>
|
||||
<option value="4">April</option>
|
||||
<option value="5">May</option>
|
||||
<option value="6">June</option>
|
||||
<option value="7">July</option>
|
||||
<option value="8">August</option>
|
||||
<option value="9">September</option>
|
||||
<option value="10">October</option>
|
||||
<option value="11">November</option>
|
||||
<option value="12">December</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Year</label>
|
||||
<select class="form-select">
|
||||
<option value="">YYYY</option>
|
||||
<option value="2025">2025</option>
|
||||
<option value="2026">2026</option>
|
||||
<option value="2027">2027</option>
|
||||
<option value="2028">2028</option>
|
||||
<option value="2029">2029</option>
|
||||
<option value="2030">2030</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="my-4" />
|
||||
|
||||
<h3 class="card-title">Billing Address</h3>
|
||||
<p class="card-subtitle mb-4">The billing address associated with your payment method</p>
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-check">
|
||||
<input class="form-check-input" type="checkbox" checked>
|
||||
<span class="form-check-label">Same as shipping address</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<hr class="my-4" />
|
||||
|
||||
<div class="mb-3">
|
||||
<label class="form-label">Comments</label>
|
||||
<textarea class="form-control" rows="3" placeholder="Add any additional comments"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="mt-4">
|
||||
<div class="btn-list">
|
||||
{% include "ui/button.html" text="Submit" color="primary" %}
|
||||
{% include "ui/button.html" text="Cancel" %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@@ -1,11 +1,12 @@
|
||||
{% assign chart-type = include.chart-type | default: 'line' %}
|
||||
{% assign chart-position = include.chart-position | default: 'right' %}
|
||||
{% assign chart-color = include.color | default: 'primary' %}
|
||||
<div class="card card-sm{% if include.class %} {{ include.class }}{% endif %}">
|
||||
<div class="card-body">
|
||||
<div class="row align-items-center">
|
||||
{% if include.icon %}
|
||||
<div class="col-auto">
|
||||
<span class="{% if include.color %}bg-{{ include.color }}{% if include.lt %}-lt{% else %} text-white{% endif %}{% endif %} avatar">{% include "ui/icon.html" icon=include.icon %}</span>
|
||||
<span class="{% if include.color %}bg-{{ include.color }}{% if include.lt %}-lt{% else %} text-white{% endif %}{% endif %} avatar avatar-square">{% include "ui/icon.html" icon=include.icon %}</span>
|
||||
</div>
|
||||
{% elsif include.person-id %}
|
||||
<div class="col-auto">
|
||||
@@ -30,13 +31,24 @@
|
||||
</div>
|
||||
<div class="text-secondary">
|
||||
{{ include.description | default: "Users" }}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if include.chart-data and chart-position=="right" %}
|
||||
<div class="col-auto">
|
||||
{% include "ui/chart-sparkline.html" id=include.id data=include.chart-data type=chart-type color=include.color label=include.chart-label label-icon=include.chart-label-icon %}
|
||||
{% include "ui/chart-sparkline.html" id=include.id data=include.chart-data type=chart-type color=chart-color label=include.chart-label label-icon=include.chart-label-icon %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if include.trending %}
|
||||
<div class="col-auto">
|
||||
{% include "ui/trending.html" value=include.trending %}
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if include.button %}
|
||||
<div class="col-auto">
|
||||
{% include "ui/button.html" text=include.button size="sm" %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
@@ -10,12 +10,12 @@
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for url in urls %}
|
||||
{% for url in urls limit: 8 %}
|
||||
<tr>
|
||||
<td>
|
||||
{% include "ui/progressbg.html" value=url.bounce text=url.uri %}
|
||||
</td>
|
||||
<td class="w-1 fw-bold text-end">{{ url.visitors }}</td>
|
||||
<td class="w-1 fw-medium text-end">{{ url.visitors }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
|
||||
@@ -12,7 +12,7 @@
|
||||
{%- assign icon = 'info-circle' -%}
|
||||
{%- endif -%}
|
||||
{%- endunless -%}
|
||||
<div class="alert{% if include.important %} alert-important{% elsif include.minor %} alert-minor{% endif %} alert-{{ type }}{%if include.show-close %} alert-dismissible{% endif %}{% if include.avatar %} alert-avatar{% endif %}" role="alert">
|
||||
<div class="alert{% if include.important %} alert-important{% elsif include.minor %} alert-minor{% endif %} alert-{{ type }}{%if include.show-close %} alert-dismissible{% endif %}{% if include.avatar %} alert-avatar{% endif %}{% if include.class %} {{ include.class }}{% endif %}" role="alert">
|
||||
<div class="alert-icon">
|
||||
{%- include "ui/icon.html" icon=icon class="alert-icon" -%}
|
||||
</div>
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
{%- endif -%}
|
||||
{%- assign el = 'span' -%}
|
||||
{%- if link -%}{%- assign el = 'a' -%}{%- endif -%}
|
||||
<{{ el }} class="avatar{% if include.size %} avatar-{{ include['size'] }}{% endif %}{% if include.thumb %} avatar-thumb{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.shape %} {{ include.shape }}{% endif %}{% if include.color %} bg-{{ include.color }}-lt{% endif %}"{% if src %} style="background-image: url({{ page | relative }}/{{ src }})"{% endif %}{% if include.dropdown %} data-bs-toggle="dropdown"{% endif %}>
|
||||
<{{ el }} class="avatar{% if include.size %} avatar-{{ include['size'] }}{% endif %}{% if include.thumb %} avatar-thumb{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.shape %} avatar-{{ include.shape }}{% endif %}{% if include.color %} bg-{{ include.color }}-lt{% endif %}{% if include.square %} avatar-square{% endif %}"{% if src %} style="background-image: url({{ page | relative }}/{{ src }})"{% endif %}{% if include.dropdown %} data-bs-toggle="dropdown"{% endif %}>
|
||||
{%- if include.status -%}
|
||||
<span class="badge bg-{{ include.status }}">{% if include.status-text %}{{ include.status-text }}{% elsif include.status-icon %}{% include "ui/icon.html" icon=include.status-icon class="avatar-status-icon" %}{% endif %}</span>
|
||||
{%- endif -%}
|
||||
|
||||
@@ -18,7 +18,7 @@
|
||||
{% endif %}
|
||||
|
||||
{% assign e = include.element | default: 'a' %}
|
||||
<{{ e }}{% if e == 'a' %} href="{{ href }}"{% endif %}{% if include.type %} type="{{ include.type }}"{% endif %}{% if include.id %} id="{{ include.id }}"{% endif %} class="btn{% if include.height %} btn-{{ include.height }}{% endif %}{% if color %} btn-{% if include.outline %}outline-{% elsif include.ghost %}ghost-{% endif %}{{ color }}{% endif %}{% if include.disabled %} disabled{% endif %}{% if include.square %} btn-square{% endif %}{% if include.loading %} btn-loading{% endif %}{% if include.pill %} btn-pill{% endif %}{% if include['size'] %} btn-{{ include['size'] }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.block %} w-100{% endif %}{% if include.link %} btn-link{% endif %}{% if include.icon-only %} btn-icon{% endif %}"{% if include.external %} target="_blank" rel="noreferrer"{% endif %}{% if include.modal-id %} data-bs-toggle="modal" data-bs-target="#modal-{{ include.modal-id }}"{% endif %}{% if include.toast-id %} data-bs-toggle="toast" data-bs-target="#toast-{{ include.toast-id }}"{% endif %}{% if include.icon-only %} aria-label="{{ include.text | default: "Button" }}"{% endif %}{% if include.dismiss %} data-bs-dismiss="modal"{% endif %}>
|
||||
<{{ e }}{% if e == 'a' %} href="{{ href }}"{% endif %}{% if include.type %} type="{{ include.type }}"{% endif %}{% if include.id %} id="{{ include.id }}"{% endif %} class="btn{% if include.height %} btn-{{ include.height }}{% endif %}{% if color %} btn-{% if include.outline %}outline-{% elsif include.ghost %}ghost-{% endif %}{{ color }}{% endif %}{% if include.disabled %} disabled{% endif %}{% if include.square %} btn-square{% endif %}{% if include.loading %} btn-loading{% endif %}{% if include.action %} btn-action{% endif %}{% if include.pill %} btn-pill{% endif %}{% if include['size'] %} btn-{{ include['size'] }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.block %} w-100{% endif %}{% if include.link %} btn-link{% endif %}{% if include.icon-only %} btn-icon{% endif %}"{% if include.external %} target="_blank" rel="noreferrer"{% endif %}{% if include.modal-id %} data-bs-toggle="modal" data-bs-target="#modal-{{ include.modal-id }}"{% endif %}{% if include.toast-id %} data-bs-toggle="toast" data-bs-target="#toast-{{ include.toast-id }}"{% endif %}{% if include.icon-only %} aria-label="{{ include.text | default: "Button" }}"{% endif %}{% if include.dismiss %} data-bs-dismiss="modal"{% endif %}>
|
||||
{% if include.spinner %}
|
||||
{% include "ui/spinner.html" color=false size="sm" class=spinner-class element="span" %}{% endif %}
|
||||
{% if include.icon %}{% include "ui/icon.html" icon=include.icon color=include.icon-color %}{% endif %}
|
||||
|
||||
10
shared/includes/ui/card-title.html
Normal file
10
shared/includes/ui/card-title.html
Normal file
@@ -0,0 +1,10 @@
|
||||
<div class="d-flex">
|
||||
<h3 class="card-title{% if include.class %} {{ include.class }}{% endif %}">
|
||||
{{ include.text | default: include.title | default: 'Card title' }}
|
||||
</h3>
|
||||
{% if include.more %}
|
||||
<div class="ms-auto">
|
||||
{% include "ui/button.html" icon="dots" size="sm" icon-only action %}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
@@ -1,9 +1,10 @@
|
||||
{% assign icon = include.icon | default: "mood-sad" %}
|
||||
{% assign height = include.height | default: 256 %}
|
||||
<div class="empty{% if include.bordered %} empty-bordered{% endif %}{% if include.class %} {{ include.class }}{% endif %}">
|
||||
|
||||
{% if include.illustration %}
|
||||
{% assign illustration = include.illustration | default: 'boy-girl.svg' %}
|
||||
<div class="empty-img">{% include "ui/illustration.html" image=illustration height="256" %}</div>
|
||||
<div class="empty-img">{% include "ui/illustration.html" image=illustration height=height %}</div>
|
||||
{% elsif include.icon-text %}
|
||||
<div class="empty-header">{{ include.icon-text }}</div>
|
||||
{% else %}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
{% assign segmented-items = include.items | default: "First,Second,Third" | split: "," %}
|
||||
{% assign segmented-icons = include.icons | default: "" | split: "," %}
|
||||
{% assign segmented-items = include.items | default: "" | split: "," %}
|
||||
{% assign segmented-disabled = include.disabled | default: "" | split: "," %}
|
||||
{% assign segmented-hover = include.hover | default: "" %}
|
||||
{% assign segmented-default = include.default | default: 1 | plus: 0 %}
|
||||
@@ -18,7 +18,7 @@
|
||||
|
||||
{% if include.name %}<input type="radio" class="nav-link-input" name="{{ include.name }}" id="segmented-{{include.name }}-{{ index }}" {% if is-default %}checked{% endif %} />{% endif %}
|
||||
|
||||
<{% if include.name %}label for="segmented-{{include.name }}-{{ index }}"{% else %}button{% endif %} class="nav-link{% if disabled %} disabled{% endif %}{% if segmented-hover == index %} hover{% endif %}" role="tab"{% unless include.name %} data-bs-toggle="tab"{% endunless %} aria-selected="{% if is-default %}true{% else %}false{% endif %}" {% if disabled %} aria-disabled="true"{% endif %}{% if is-default %} aria-current="page"{% endif %}>
|
||||
<{% if include.name %}label for="segmented-{{include.name }}-{{ index }}"{% else %}button{% endif %} class="nav-link{% if disabled %} disabled{% endif %}{% if segmented-hover == index %} hover{% endif %}{% if is-default %} active{% endif %}" role="tab"{% unless include.name %} data-bs-toggle="tab"{% endunless %} aria-selected="{% if is-default %}true{% else %}false{% endif %}" {% if disabled %} aria-disabled="true"{% endif %}{% if is-default %} aria-current="page"{% endif %}>
|
||||
{% if segmented-icons[forloop.index0] %}
|
||||
{% include "ui/icon.html" icon=segmented-icons[forloop.index0] class="nav-link-icon" %}
|
||||
{% endif %}
|
||||
|
||||
@@ -2,6 +2,6 @@
|
||||
{% assign color = include.color | default: 'primary-lt' %}
|
||||
<div class="progressbg{% if include.class %} {{ include.class }}{% endif %}">
|
||||
{% include "ui/progress.html" value=percentage class="progressbg-progress" color=color %}
|
||||
{% if include.text %}<div class="progressbg-text">{{ include.text }}</div>{% endif %}
|
||||
{% if include.text %}<div class="progressbg-text">{% if include.flag %}{% include "ui/flag.html" flag=include.flag class="me-2" size="xs" %}{% endif %}{{ include.text }}</div>{% endif %}
|
||||
{% if include.show-value %}<div class="progressbg-value">{{ percentage }}%</div>{% endif %}
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user