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 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'

12
core/scss/_utilities.scss
View File

@@ -16,8 +16,12 @@ $utilities-border-colors: map-loop(
'border'
) !default;
//Utilities
$utilities: (
// Utilities
$utilities: () !default;
$utilities: map-merge(
(
'align': (
property: vertical-align,
class: align,
@@ -894,4 +898,6 @@ $utilities: (
class: z,
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;
// 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;
@@ -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-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: 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-position: right center !default;
$form-switch-bg-size: auto !default;

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

@@ -1,7 +1,8 @@
// Geist Sans Font Family
@font-face {
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');
font-weight: 100;
font-style: normal;
@@ -10,7 +11,8 @@
@font-face {
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');
font-weight: 200;
font-style: normal;
@@ -19,7 +21,8 @@
@font-face {
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');
font-weight: 300;
font-style: normal;
@@ -28,7 +31,8 @@
@font-face {
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');
font-weight: 400;
font-style: normal;
@@ -37,7 +41,8 @@
@font-face {
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');
font-weight: 500;
font-style: normal;
@@ -46,7 +51,8 @@
@font-face {
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');
font-weight: 600;
font-style: normal;
@@ -55,7 +61,8 @@
@font-face {
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');
font-weight: 700;
font-style: normal;
@@ -64,7 +71,8 @@
@font-face {
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');
font-weight: 800;
font-style: normal;
@@ -73,7 +81,8 @@
@font-face {
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');
font-weight: 900;
font-style: normal;
@@ -83,7 +92,8 @@
// Geist Sans Variable Font
@font-face {
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');
font-weight: 100 900;
font-style: normal;
@@ -93,7 +103,8 @@
// Geist Mono Font Family
@font-face {
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');
font-weight: 100;
font-style: normal;
@@ -102,7 +113,8 @@
@font-face {
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');
font-weight: 200;
font-style: normal;
@@ -111,7 +123,8 @@
@font-face {
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');
font-weight: 300;
font-style: normal;
@@ -120,7 +133,8 @@
@font-face {
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');
font-weight: 400;
font-style: normal;
@@ -129,7 +143,8 @@
@font-face {
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');
font-weight: 500;
font-style: normal;
@@ -138,7 +153,8 @@
@font-face {
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');
font-weight: 600;
font-style: normal;
@@ -147,7 +163,8 @@
@font-face {
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');
font-weight: 700;
font-style: normal;
@@ -156,7 +173,8 @@
@font-face {
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');
font-weight: 800;
font-style: normal;
@@ -165,7 +183,8 @@
@font-face {
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');
font-weight: 900;
font-style: normal;
@@ -175,10 +194,10 @@
// Geist Mono Variable Font
@font-face {
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');
font-weight: 100 900;
font-style: normal;
font-display: swap;
}

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

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

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

@@ -1,12 +1,12 @@
.alert {
--#{$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-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-variant-color), 0.2,
var(--#{$prefix}bg-surface))};
--#{$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;
@@ -77,8 +77,7 @@
}
.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 {

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

@@ -101,7 +101,8 @@
--#{$prefix}list-gap: 0;
.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));
&:not(:first-child) {

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

@@ -40,7 +40,6 @@
// Card borderless
.card-borderless {
&,
.card-header,
.card-footer {
@@ -153,7 +152,7 @@
background: $active-bg;
}
&+& {
& + & {
border-inline-start: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
}
}
@@ -352,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;
}
@@ -376,7 +375,7 @@ Stacked card
padding: 0;
}
&+& {
& + & {
border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
}
}
@@ -439,7 +438,6 @@ Card table
margin-bottom: 0 !important;
tr {
td,
th {
&:first-child {
@@ -468,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));
}
}
@@ -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);
}
}
@@ -553,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);
}
@@ -612,7 +610,7 @@ Card list group
}
}
+.nav-item {
+ .nav-item {
margin-inline-start: calc(-1 * #{$card-border-width});
}
}
@@ -652,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;
}
@@ -666,7 +664,6 @@ Card note
--#{$prefix}card-border-color: #fff1c9;
}
/**
Card gradient
*/
@@ -675,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,
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) {
@@ -688,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 {
@@ -707,7 +697,7 @@ Card gradient
}
.card-gradient-ocean {
--#{$prefix}card-gradient: #1CB5E0, #000851;
--#{$prefix}card-gradient: #1cb5e0, #000851;
}
.card-gradient-mellow {
@@ -715,7 +705,7 @@ Card gradient
}
.card-gradient-disco {
--#{$prefix}card-gradient: #FC466B, #3F5EFB;
--#{$prefix}card-gradient: #fc466b, #3f5efb;
}
.card-gradient-psychedelic {
@@ -727,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 {

8
preview/pages/colors.html
View File

@@ -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>

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

@@ -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 %} 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 -%}
<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 -%}