Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2025-12-21 17:34:25 +04:00
Code Issues Projects Releases Wiki Activity

refactor: Consolidate SCSS utility definitions and improve Bootstrap component exports for consistency

Browse Source
This commit is contained in:
codecalm
2025-12-08 21:01:24 +01:00
parent 127448661b
commit e2cc7da8fe
27 changed files with 1059 additions and 1062 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
core/js/src/bootstrap.js vendored
View File

@@ -1,20 +1,7 @@
export * as Popper from '@popperjs/core' export * as Popper from '@popperjs/core'
// Export all Bootstrap components directly for consistent usage // Export all Bootstrap components directly for consistent usage
export { export { Alert, Button, Carousel, Collapse, Dropdown, Modal, Offcanvas, Popover, ScrollSpy, Tab, Toast, Tooltip } from 'bootstrap'
Alert,
Button,
Carousel,
Collapse,
Dropdown,
Modal,
Offcanvas,
Popover,
ScrollSpy,
Tab,
Toast,
Tooltip
} from 'bootstrap'
// Re-export everything as namespace for backward compatibility // Re-export everything as namespace for backward compatibility
export * as bootstrap from 'bootstrap' export * as bootstrap from 'bootstrap'

12
core/scss/_utilities.scss
View File

@@ -16,8 +16,12 @@ $utilities-border-colors: map-loop(
'border' 'border'
) !default; ) !default;
//Utilities // Utilities
$utilities: (
$utilities: () !default;
$utilities: map-merge(
(
'align': ( 'align': (
property: vertical-align, property: vertical-align,
class: align, class: align,
@@ -894,4 +898,6 @@ $utilities: (
class: z, class: z,
values: $zindex-levels, values: $zindex-levels,
), ),
) !default; ),
$utilities
);

9
core/scss/_variables.scss
View File

@@ -33,12 +33,7 @@ $enable-deprecation-messages: true !default;
$enable-important-utilities: true !default; $enable-important-utilities: true !default;
// Escaped Characters // Escaped Characters
$escaped-characters: ( $escaped-characters: (('<', '%3c'), ('>', '%3e'), ('#', '%23'), ('(', '%28'), (')', '%29')) !default;
('<', '%3c'),
('>', '%3e'),
('#', '%23'),
('(', '%28'),
(')', '%29')) !default;
// Dark Mode // Dark Mode
$color-mode-type: data !default; $color-mode-type: data !default;
@@ -1876,7 +1871,7 @@ $form-switch-border-radius: $form-switch-width !default;
$form-switch-transition: background-position 0.15s ease-in-out !default; $form-switch-transition: background-position 0.15s ease-in-out !default;
$form-switch-focus-color: white !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-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: white!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-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-checked-bg-position: right center !default;
$form-switch-bg-size: auto !default; $form-switch-bg-size: auto !default;

61
core/scss/fonts/_geist.scss
View File

@@ -1,7 +1,8 @@
// Geist Sans Font Family // Geist Sans Font Family
@font-face { @font-face {
font-family: 'Geist'; font-family: 'Geist';
src: url('#{$assets-base}/fonts/geist-sans/Geist-Thin.woff2') format('woff2'), src:
url('#{$assets-base}/fonts/geist-sans/Geist-Thin.woff2') format('woff2'),
url('#{$assets-base}/fonts/geist-sans/Geist-Thin.ttf') format('truetype'); url('#{$assets-base}/fonts/geist-sans/Geist-Thin.ttf') format('truetype');
font-weight: 100; font-weight: 100;
font-style: normal; font-style: normal;
@@ -10,7 +11,8 @@
@font-face { @font-face {
font-family: 'Geist'; font-family: 'Geist';
src: url('#{$assets-base}/fonts/geist-sans/Geist-UltraLight.woff2') format('woff2'), src:
url('#{$assets-base}/fonts/geist-sans/Geist-UltraLight.woff2') format('woff2'),
url('#{$assets-base}/fonts/geist-sans/Geist-UltraLight.ttf') format('truetype'); url('#{$assets-base}/fonts/geist-sans/Geist-UltraLight.ttf') format('truetype');
font-weight: 200; font-weight: 200;
font-style: normal; font-style: normal;
@@ -19,7 +21,8 @@
@font-face { @font-face {
font-family: 'Geist'; font-family: 'Geist';
src: url('#{$assets-base}/fonts/geist-sans/Geist-Light.woff2') format('woff2'), src:
url('#{$assets-base}/fonts/geist-sans/Geist-Light.woff2') format('woff2'),
url('#{$assets-base}/fonts/geist-sans/Geist-Light.ttf') format('truetype'); url('#{$assets-base}/fonts/geist-sans/Geist-Light.ttf') format('truetype');
font-weight: 300; font-weight: 300;
font-style: normal; font-style: normal;
@@ -28,7 +31,8 @@
@font-face { @font-face {
font-family: 'Geist'; font-family: 'Geist';
src: url('#{$assets-base}/fonts/geist-sans/Geist-Regular.woff2') format('woff2'), src:
url('#{$assets-base}/fonts/geist-sans/Geist-Regular.woff2') format('woff2'),
url('#{$assets-base}/fonts/geist-sans/Geist-Regular.ttf') format('truetype'); url('#{$assets-base}/fonts/geist-sans/Geist-Regular.ttf') format('truetype');
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
@@ -37,7 +41,8 @@
@font-face { @font-face {
font-family: 'Geist'; font-family: 'Geist';
src: url('#{$assets-base}/fonts/geist-sans/Geist-Medium.woff2') format('woff2'), src:
url('#{$assets-base}/fonts/geist-sans/Geist-Medium.woff2') format('woff2'),
url('#{$assets-base}/fonts/geist-sans/Geist-Medium.ttf') format('truetype'); url('#{$assets-base}/fonts/geist-sans/Geist-Medium.ttf') format('truetype');
font-weight: 500; font-weight: 500;
font-style: normal; font-style: normal;
@@ -46,7 +51,8 @@
@font-face { @font-face {
font-family: 'Geist'; font-family: 'Geist';
src: url('#{$assets-base}/fonts/geist-sans/Geist-SemiBold.woff2') format('woff2'), src:
url('#{$assets-base}/fonts/geist-sans/Geist-SemiBold.woff2') format('woff2'),
url('#{$assets-base}/fonts/geist-sans/Geist-SemiBold.ttf') format('truetype'); url('#{$assets-base}/fonts/geist-sans/Geist-SemiBold.ttf') format('truetype');
font-weight: 600; font-weight: 600;
font-style: normal; font-style: normal;
@@ -55,7 +61,8 @@
@font-face { @font-face {
font-family: 'Geist'; font-family: 'Geist';
src: url('#{$assets-base}/fonts/geist-sans/Geist-Bold.woff2') format('woff2'), src:
url('#{$assets-base}/fonts/geist-sans/Geist-Bold.woff2') format('woff2'),
url('#{$assets-base}/fonts/geist-sans/Geist-Bold.ttf') format('truetype'); url('#{$assets-base}/fonts/geist-sans/Geist-Bold.ttf') format('truetype');
font-weight: 700; font-weight: 700;
font-style: normal; font-style: normal;
@@ -64,7 +71,8 @@
@font-face { @font-face {
font-family: 'Geist'; font-family: 'Geist';
src: url('#{$assets-base}/fonts/geist-sans/Geist-Black.woff2') format('woff2'), src:
url('#{$assets-base}/fonts/geist-sans/Geist-Black.woff2') format('woff2'),
url('#{$assets-base}/fonts/geist-sans/Geist-Black.ttf') format('truetype'); url('#{$assets-base}/fonts/geist-sans/Geist-Black.ttf') format('truetype');
font-weight: 800; font-weight: 800;
font-style: normal; font-style: normal;
@@ -73,7 +81,8 @@
@font-face { @font-face {
font-family: 'Geist'; font-family: 'Geist';
src: url('#{$assets-base}/fonts/geist-sans/Geist-UltraBlack.woff2') format('woff2'), src:
url('#{$assets-base}/fonts/geist-sans/Geist-UltraBlack.woff2') format('woff2'),
url('#{$assets-base}/fonts/geist-sans/Geist-UltraBlack.ttf') format('truetype'); url('#{$assets-base}/fonts/geist-sans/Geist-UltraBlack.ttf') format('truetype');
font-weight: 900; font-weight: 900;
font-style: normal; font-style: normal;
@@ -83,7 +92,8 @@
// Geist Sans Variable Font // Geist Sans Variable Font
@font-face { @font-face {
font-family: 'Geist'; font-family: 'Geist';
src: url('#{$assets-base}/fonts/geist-sans/Geist-Variable.woff2') format('woff2'), src:
url('#{$assets-base}/fonts/geist-sans/Geist-Variable.woff2') format('woff2'),
url('#{$assets-base}/fonts/geist-sans/Geist-Variable.ttf') format('truetype'); url('#{$assets-base}/fonts/geist-sans/Geist-Variable.ttf') format('truetype');
font-weight: 100 900; font-weight: 100 900;
font-style: normal; font-style: normal;
@@ -93,7 +103,8 @@
// Geist Mono Font Family // Geist Mono Font Family
@font-face { @font-face {
font-family: 'Geist Mono'; font-family: 'Geist Mono';
src: url('#{$assets-base}/fonts/geist-mono/GeistMono-Thin.woff2') format('woff2'), src:
url('#{$assets-base}/fonts/geist-mono/GeistMono-Thin.woff2') format('woff2'),
url('#{$assets-base}/fonts/geist-mono/GeistMono-Thin.ttf') format('truetype'); url('#{$assets-base}/fonts/geist-mono/GeistMono-Thin.ttf') format('truetype');
font-weight: 100; font-weight: 100;
font-style: normal; font-style: normal;
@@ -102,7 +113,8 @@
@font-face { @font-face {
font-family: 'Geist Mono'; font-family: 'Geist Mono';
src: url('#{$assets-base}/fonts/geist-mono/GeistMono-UltraLight.woff2') format('woff2'), src:
url('#{$assets-base}/fonts/geist-mono/GeistMono-UltraLight.woff2') format('woff2'),
url('#{$assets-base}/fonts/geist-mono/GeistMono-UltraLight.ttf') format('truetype'); url('#{$assets-base}/fonts/geist-mono/GeistMono-UltraLight.ttf') format('truetype');
font-weight: 200; font-weight: 200;
font-style: normal; font-style: normal;
@@ -111,7 +123,8 @@
@font-face { @font-face {
font-family: 'Geist Mono'; font-family: 'Geist Mono';
src: url('#{$assets-base}/fonts/geist-mono/GeistMono-Light.woff2') format('woff2'), src:
url('#{$assets-base}/fonts/geist-mono/GeistMono-Light.woff2') format('woff2'),
url('#{$assets-base}/fonts/geist-mono/GeistMono-Light.ttf') format('truetype'); url('#{$assets-base}/fonts/geist-mono/GeistMono-Light.ttf') format('truetype');
font-weight: 300; font-weight: 300;
font-style: normal; font-style: normal;
@@ -120,7 +133,8 @@
@font-face { @font-face {
font-family: 'Geist Mono'; font-family: 'Geist Mono';
src: url('#{$assets-base}/fonts/geist-mono/GeistMono-Regular.woff2') format('woff2'), src:
url('#{$assets-base}/fonts/geist-mono/GeistMono-Regular.woff2') format('woff2'),
url('#{$assets-base}/fonts/geist-mono/GeistMono-Regular.ttf') format('truetype'); url('#{$assets-base}/fonts/geist-mono/GeistMono-Regular.ttf') format('truetype');
font-weight: 400; font-weight: 400;
font-style: normal; font-style: normal;
@@ -129,7 +143,8 @@
@font-face { @font-face {
font-family: 'Geist Mono'; font-family: 'Geist Mono';
src: url('#{$assets-base}/fonts/geist-mono/GeistMono-Medium.woff2') format('woff2'), src:
url('#{$assets-base}/fonts/geist-mono/GeistMono-Medium.woff2') format('woff2'),
url('#{$assets-base}/fonts/geist-mono/GeistMono-Medium.ttf') format('truetype'); url('#{$assets-base}/fonts/geist-mono/GeistMono-Medium.ttf') format('truetype');
font-weight: 500; font-weight: 500;
font-style: normal; font-style: normal;
@@ -138,7 +153,8 @@
@font-face { @font-face {
font-family: 'Geist Mono'; font-family: 'Geist Mono';
src: url('#{$assets-base}/fonts/geist-mono/GeistMono-SemiBold.woff2') format('woff2'), src:
url('#{$assets-base}/fonts/geist-mono/GeistMono-SemiBold.woff2') format('woff2'),
url('#{$assets-base}/fonts/geist-mono/GeistMono-SemiBold.ttf') format('truetype'); url('#{$assets-base}/fonts/geist-mono/GeistMono-SemiBold.ttf') format('truetype');
font-weight: 600; font-weight: 600;
font-style: normal; font-style: normal;
@@ -147,7 +163,8 @@
@font-face { @font-face {
font-family: 'Geist Mono'; font-family: 'Geist Mono';
src: url('#{$assets-base}/fonts/geist-mono/GeistMono-Bold.woff2') format('woff2'), src:
url('#{$assets-base}/fonts/geist-mono/GeistMono-Bold.woff2') format('woff2'),
url('#{$assets-base}/fonts/geist-mono/GeistMono-Bold.ttf') format('truetype'); url('#{$assets-base}/fonts/geist-mono/GeistMono-Bold.ttf') format('truetype');
font-weight: 700; font-weight: 700;
font-style: normal; font-style: normal;
@@ -156,7 +173,8 @@
@font-face { @font-face {
font-family: 'Geist Mono'; font-family: 'Geist Mono';
src: url('#{$assets-base}/fonts/geist-mono/GeistMono-Black.woff2') format('woff2'), src:
url('#{$assets-base}/fonts/geist-mono/GeistMono-Black.woff2') format('woff2'),
url('#{$assets-base}/fonts/geist-mono/GeistMono-Black.ttf') format('truetype'); url('#{$assets-base}/fonts/geist-mono/GeistMono-Black.ttf') format('truetype');
font-weight: 800; font-weight: 800;
font-style: normal; font-style: normal;
@@ -165,7 +183,8 @@
@font-face { @font-face {
font-family: 'Geist Mono'; font-family: 'Geist Mono';
src: url('#{$assets-base}/fonts/geist-mono/GeistMono-UltraBlack.woff2') format('woff2'), src:
url('#{$assets-base}/fonts/geist-mono/GeistMono-UltraBlack.woff2') format('woff2'),
url('#{$assets-base}/fonts/geist-mono/GeistMono-UltraBlack.ttf') format('truetype'); url('#{$assets-base}/fonts/geist-mono/GeistMono-UltraBlack.ttf') format('truetype');
font-weight: 900; font-weight: 900;
font-style: normal; font-style: normal;
@@ -175,10 +194,10 @@
// Geist Mono Variable Font // Geist Mono Variable Font
@font-face { @font-face {
font-family: 'Geist Mono'; font-family: 'Geist Mono';
src: url('#{$assets-base}/fonts/geist-mono/GeistMono-Variable.woff2') format('woff2'), src:
url('#{$assets-base}/fonts/geist-mono/GeistMono-Variable.woff2') format('woff2'),
url('#{$assets-base}/fonts/geist-mono/GeistMono-Variable.ttf') format('truetype'); url('#{$assets-base}/fonts/geist-mono/GeistMono-Variable.ttf') format('truetype');
font-weight: 100 900; font-weight: 100 900;
font-style: normal; font-style: normal;
font-display: swap; font-display: swap;
} }

2
core/scss/helpers/_index.scss
View File

@@ -119,7 +119,7 @@
content: ''; content: '';
} }
>* { > * {
position: absolute; position: absolute;
top: 0; top: 0;
inset-inline-start: 0; inset-inline-start: 0;

9
core/scss/ui/_alerts.scss
View File

@@ -1,12 +1,12 @@
.alert { .alert {
--#{$prefix}alert-variant-color: var(--#{$prefix}body-color); --#{$prefix}alert-variant-color: var(--#{$prefix}body-color);
--#{$prefix}alert-color: color-mix(in srgb, var(--#{$prefix}alert-variant-color) 50%, 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-bg: #{color-transparent(var(--#{$prefix}alert-variant-color), 0.16, var(--#{$prefix}bg-surface))};
--#{$prefix}alert-padding-x: #{$alert-padding-x}; --#{$prefix}alert-padding-x: #{$alert-padding-x};
--#{$prefix}alert-padding-y: #{$alert-padding-y}; --#{$prefix}alert-padding-y: #{$alert-padding-y};
--#{$prefix}alert-margin-bottom: #{$alert-margin-bottom}; --#{$prefix}alert-margin-bottom: #{$alert-margin-bottom};
--#{$prefix}alert-border-color: #{color-transparent(var(--#{$prefix}alert-variant-color), 0.2, --#{$prefix}alert-border-color: #{color-transparent(var(--#{$prefix}alert-variant-color), 0.2, var(--#{$prefix}bg-surface))};
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: var(--#{$prefix}border-width) solid var(--#{$prefix}alert-border-color);
--#{$prefix}alert-border-radius: var(--#{$prefix}border-radius); --#{$prefix}alert-border-radius: var(--#{$prefix}border-radius);
--#{$prefix}alert-link-color: inherit; --#{$prefix}alert-link-color: inherit;
@@ -77,8 +77,7 @@
} }
.alert-important { .alert-important {
border-color: var(--#{$prefix}alert-color); background-color: var(--#{$prefix}alert-variant-color);
background-color: var(--#{$prefix}alert-color);
color: var(--#{$prefix}white); color: var(--#{$prefix}white);
.alert-description { .alert-description {

3
core/scss/ui/_avatars.scss
View File

@@ -101,7 +101,8 @@
--#{$prefix}list-gap: 0; --#{$prefix}list-gap: 0;
.avatar { .avatar {
box-shadow: var(--#{$prefix}avatar-box-shadow), box-shadow:
var(--#{$prefix}avatar-box-shadow),
0 0 0 2px var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface)); 0 0 0 2px var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
&:not(:first-child) { &:not(:first-child) {

44
core/scss/ui/_cards.scss
View File

@@ -40,7 +40,6 @@
// Card borderless // Card borderless
.card-borderless { .card-borderless {
&, &,
.card-header, .card-header,
.card-footer { .card-footer {
@@ -153,7 +152,7 @@
background: $active-bg; background: $active-bg;
} }
&+& { & + & {
border-inline-start: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color); border-inline-start: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
} }
} }
@@ -352,17 +351,17 @@ Stacked card
margin-bottom: 0; margin-bottom: 0;
} }
.card-sm>& { .card-sm > & {
padding: 1rem; padding: 1rem;
} }
.card-md>& { .card-md > & {
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
padding: 2.5rem; padding: 2.5rem;
} }
} }
.card-lg>& { .card-lg > & {
@include media-breakpoint-up(md) { @include media-breakpoint-up(md) {
padding: 2rem; padding: 2rem;
} }
@@ -376,7 +375,7 @@ Stacked card
padding: 0; padding: 0;
} }
&+& { & + & {
border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color); border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
} }
} }
@@ -439,7 +438,6 @@ Card table
margin-bottom: 0 !important; margin-bottom: 0 !important;
tr { tr {
td, td,
th { th {
&:first-child { &:first-child {
@@ -468,11 +466,11 @@ Card table
tfoot { tfoot {
&:last-child { &:last-child {
tr:last-child { tr:last-child {
>*:last-child { > *:last-child {
border-end-end-radius: calc(var(--#{$prefix}card-border-radius) - var(--#{$prefix}card-border-width)); 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)); border-end-start-radius: calc(var(--#{$prefix}card-border-radius) - var(--#{$prefix}card-border-width));
} }
} }
@@ -508,7 +506,7 @@ Card table
} }
} }
.card-body+& { .card-body + & {
border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}table-border-color); border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}table-border-color);
} }
} }
@@ -553,7 +551,7 @@ Card avatar
Card list group Card list group
*/ */
.card-list-group { .card-list-group {
.card-body+& { .card-body + & {
border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color); border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
} }
@@ -612,7 +610,7 @@ Card list group
} }
} }
+.nav-item { + .nav-item {
margin-inline-start: calc(-1 * #{$card-border-width}); margin-inline-start: calc(-1 * #{$card-border-width});
} }
} }
@@ -652,7 +650,7 @@ Card list group
border-end-start-radius: 0; 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-end-start-radius: var(--#{$prefix}card-border-radius);
border-start-start-radius: 0; border-start-start-radius: 0;
} }
@@ -666,7 +664,6 @@ Card note
--#{$prefix}card-border-color: #fff1c9; --#{$prefix}card-border-color: #fff1c9;
} }
/** /**
Card gradient Card gradient
*/ */
@@ -675,10 +672,10 @@ Card gradient
--#{$prefix}card-gradient-opacity: 86%; --#{$prefix}card-gradient-opacity: 86%;
--#{$prefix}card-gradient: var(--tblr-primary), var(--tblr-primary); --#{$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, 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(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; linear-gradient(calc(270deg + var(--#{$prefix}card-gradient-direction)), var(--#{$prefix}card-gradient)) border-box;
} }
@each $name, $color in map.merge($colors, $theme-colors) { @each $name, $color in map.merge($colors, $theme-colors) {
@@ -688,14 +685,7 @@ Card gradient
} }
.card-gradient-rainbow { .card-gradient-rainbow {
--#{$prefix}card-gradient: #78C5D6, --#{$prefix}card-gradient: #78c5d6, #459ba8, #79c267, #c5d647, #f5d63d, #f08b33, #e868a2, #be61a5;
#459BA8,
#79C267,
#C5D647,
#F5D63D,
#F08B33,
#E868A2,
#BE61A5;
} }
.card-gradient-sun { .card-gradient-sun {
@@ -707,7 +697,7 @@ Card gradient
} }
.card-gradient-ocean { .card-gradient-ocean {
--#{$prefix}card-gradient: #1CB5E0, #000851; --#{$prefix}card-gradient: #1cb5e0, #000851;
} }
.card-gradient-mellow { .card-gradient-mellow {
@@ -715,7 +705,7 @@ Card gradient
} }
.card-gradient-disco { .card-gradient-disco {
--#{$prefix}card-gradient: #FC466B, #3F5EFB; --#{$prefix}card-gradient: #fc466b, #3f5efb;
} }
.card-gradient-psychedelic { .card-gradient-psychedelic {
@@ -727,7 +717,7 @@ Card gradient
} }
.card-gradient-gold { .card-gradient-gold {
--#{$prefix}card-gradient: #9d4100, #bf7122, #f59f00, #FFD700; --#{$prefix}card-gradient: #9d4100, #bf7122, #f59f00, #ffd700;
} }
.card-gradient-animated { .card-gradient-animated {

8
preview/pages/colors.html
View File

@@ -21,7 +21,7 @@ permalink: colors.html
<div class="col-12"> <div class="col-12">
<div class="row align-items-center"> <div class="row align-items-center">
<div class="col-auto"> <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 }} {{ color[1].abbr }}
</div> </div>
</div> </div>
@@ -44,7 +44,7 @@ permalink: colors.html
<div class="col-12"> <div class="col-12">
<div class="row align-items-center"> <div class="row align-items-center">
<div class="col-auto"> <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 }} {{ color[1].abbr }}
</div> </div>
</div> </div>
@@ -67,7 +67,7 @@ permalink: colors.html
<div class="col-12"> <div class="col-12">
<div class="row align-items-center"> <div class="row align-items-center">
<div class="col-auto"> <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 }} {{ color[1].abbr }}
</div> </div>
</div> </div>
@@ -90,7 +90,7 @@ permalink: colors.html
<div class="col-12"> <div class="col-12">
<div class="row align-items-center"> <div class="row align-items-center">
<div class="col-auto"> <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 %} {% include "ui/icon.html" icon=color[1].icon %}
</div> </div>
</div> </div>

2
shared/includes/ui/avatar.html
View File

@@ -20,7 +20,7 @@
{%- endif -%} {%- endif -%}
{%- assign el = 'span' -%} {%- assign el = 'span' -%}
{%- if link -%}{%- assign el = 'a' -%}{%- endif -%} {%- 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 %} avatar-{{ 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 -%} {%- 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> <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 -%} {%- endif -%}