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'

1646
core/scss/_utilities.scss
View File

File diff suppressed because it is too large Load Diff

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;

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

@@ -1,184 +1,203 @@
// 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.ttf') format('truetype'); url('#{$assets-base}/fonts/geist-sans/Geist-Thin.woff2') format('woff2'),
font-weight: 100; url('#{$assets-base}/fonts/geist-sans/Geist-Thin.ttf') format('truetype');
font-style: normal; font-weight: 100;
font-display: swap; font-style: normal;
font-display: swap;
} }
@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.ttf') format('truetype'); url('#{$assets-base}/fonts/geist-sans/Geist-UltraLight.woff2') format('woff2'),
font-weight: 200; url('#{$assets-base}/fonts/geist-sans/Geist-UltraLight.ttf') format('truetype');
font-style: normal; font-weight: 200;
font-display: swap; font-style: normal;
font-display: swap;
} }
@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.ttf') format('truetype'); url('#{$assets-base}/fonts/geist-sans/Geist-Light.woff2') format('woff2'),
font-weight: 300; url('#{$assets-base}/fonts/geist-sans/Geist-Light.ttf') format('truetype');
font-style: normal; font-weight: 300;
font-display: swap; font-style: normal;
font-display: swap;
} }
@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.ttf') format('truetype'); url('#{$assets-base}/fonts/geist-sans/Geist-Regular.woff2') format('woff2'),
font-weight: 400; url('#{$assets-base}/fonts/geist-sans/Geist-Regular.ttf') format('truetype');
font-style: normal; font-weight: 400;
font-display: swap; font-style: normal;
font-display: swap;
} }
@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.ttf') format('truetype'); url('#{$assets-base}/fonts/geist-sans/Geist-Medium.woff2') format('woff2'),
font-weight: 500; url('#{$assets-base}/fonts/geist-sans/Geist-Medium.ttf') format('truetype');
font-style: normal; font-weight: 500;
font-display: swap; font-style: normal;
font-display: swap;
} }
@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.ttf') format('truetype'); url('#{$assets-base}/fonts/geist-sans/Geist-SemiBold.woff2') format('woff2'),
font-weight: 600; url('#{$assets-base}/fonts/geist-sans/Geist-SemiBold.ttf') format('truetype');
font-style: normal; font-weight: 600;
font-display: swap; font-style: normal;
font-display: swap;
} }
@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.ttf') format('truetype'); url('#{$assets-base}/fonts/geist-sans/Geist-Bold.woff2') format('woff2'),
font-weight: 700; url('#{$assets-base}/fonts/geist-sans/Geist-Bold.ttf') format('truetype');
font-style: normal; font-weight: 700;
font-display: swap; font-style: normal;
font-display: swap;
} }
@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.ttf') format('truetype'); url('#{$assets-base}/fonts/geist-sans/Geist-Black.woff2') format('woff2'),
font-weight: 800; url('#{$assets-base}/fonts/geist-sans/Geist-Black.ttf') format('truetype');
font-style: normal; font-weight: 800;
font-display: swap; font-style: normal;
font-display: swap;
} }
@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.ttf') format('truetype'); url('#{$assets-base}/fonts/geist-sans/Geist-UltraBlack.woff2') format('woff2'),
font-weight: 900; url('#{$assets-base}/fonts/geist-sans/Geist-UltraBlack.ttf') format('truetype');
font-style: normal; font-weight: 900;
font-display: swap; font-style: normal;
font-display: swap;
} }
// 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.ttf') format('truetype'); url('#{$assets-base}/fonts/geist-sans/Geist-Variable.woff2') format('woff2'),
font-weight: 100 900; url('#{$assets-base}/fonts/geist-sans/Geist-Variable.ttf') format('truetype');
font-style: normal; font-weight: 100 900;
font-display: swap; font-style: normal;
font-display: swap;
} }
// 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.ttf') format('truetype'); url('#{$assets-base}/fonts/geist-mono/GeistMono-Thin.woff2') format('woff2'),
font-weight: 100; url('#{$assets-base}/fonts/geist-mono/GeistMono-Thin.ttf') format('truetype');
font-style: normal; font-weight: 100;
font-display: swap; font-style: normal;
font-display: swap;
} }
@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.ttf') format('truetype'); url('#{$assets-base}/fonts/geist-mono/GeistMono-UltraLight.woff2') format('woff2'),
font-weight: 200; url('#{$assets-base}/fonts/geist-mono/GeistMono-UltraLight.ttf') format('truetype');
font-style: normal; font-weight: 200;
font-display: swap; font-style: normal;
font-display: swap;
} }
@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.ttf') format('truetype'); url('#{$assets-base}/fonts/geist-mono/GeistMono-Light.woff2') format('woff2'),
font-weight: 300; url('#{$assets-base}/fonts/geist-mono/GeistMono-Light.ttf') format('truetype');
font-style: normal; font-weight: 300;
font-display: swap; font-style: normal;
font-display: swap;
} }
@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.ttf') format('truetype'); url('#{$assets-base}/fonts/geist-mono/GeistMono-Regular.woff2') format('woff2'),
font-weight: 400; url('#{$assets-base}/fonts/geist-mono/GeistMono-Regular.ttf') format('truetype');
font-style: normal; font-weight: 400;
font-display: swap; font-style: normal;
font-display: swap;
} }
@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.ttf') format('truetype'); url('#{$assets-base}/fonts/geist-mono/GeistMono-Medium.woff2') format('woff2'),
font-weight: 500; url('#{$assets-base}/fonts/geist-mono/GeistMono-Medium.ttf') format('truetype');
font-style: normal; font-weight: 500;
font-display: swap; font-style: normal;
font-display: swap;
} }
@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.ttf') format('truetype'); url('#{$assets-base}/fonts/geist-mono/GeistMono-SemiBold.woff2') format('woff2'),
font-weight: 600; url('#{$assets-base}/fonts/geist-mono/GeistMono-SemiBold.ttf') format('truetype');
font-style: normal; font-weight: 600;
font-display: swap; font-style: normal;
font-display: swap;
} }
@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.ttf') format('truetype'); url('#{$assets-base}/fonts/geist-mono/GeistMono-Bold.woff2') format('woff2'),
font-weight: 700; url('#{$assets-base}/fonts/geist-mono/GeistMono-Bold.ttf') format('truetype');
font-style: normal; font-weight: 700;
font-display: swap; font-style: normal;
font-display: swap;
} }
@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.ttf') format('truetype'); url('#{$assets-base}/fonts/geist-mono/GeistMono-Black.woff2') format('woff2'),
font-weight: 800; url('#{$assets-base}/fonts/geist-mono/GeistMono-Black.ttf') format('truetype');
font-style: normal; font-weight: 800;
font-display: swap; font-style: normal;
font-display: swap;
} }
@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.ttf') format('truetype'); url('#{$assets-base}/fonts/geist-mono/GeistMono-UltraBlack.woff2') format('woff2'),
font-weight: 900; url('#{$assets-base}/fonts/geist-mono/GeistMono-UltraBlack.ttf') format('truetype');
font-style: normal; font-weight: 900;
font-display: swap; font-style: normal;
font-display: swap;
} }
// 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.ttf') format('truetype'); url('#{$assets-base}/fonts/geist-mono/GeistMono-Variable.woff2') format('woff2'),
font-weight: 100 900; url('#{$assets-base}/fonts/geist-mono/GeistMono-Variable.ttf') format('truetype');
font-style: normal; font-weight: 100 900;
font-display: swap; font-style: normal;
font-display: swap;
} }

4
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;
@@ -141,4 +141,4 @@
outline: 0; 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 // 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); 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);
} }

20
core/scss/layout/_navbar.scss
View File

@@ -69,7 +69,7 @@
.nav-item.active:after { .nav-item.active:after {
border-bottom-width: 0; border-bottom-width: 0;
border-inline-start-width: 3px; border-inline-start-width: 3px;
inset-inline-end: auto; inset-inline-end: auto;
top: 0; top: 0;
bottom: 0; bottom: 0;
} }
@@ -118,7 +118,7 @@ Navbar
.badge { .badge {
position: absolute; position: absolute;
top: 0.5rem; top: 0.5rem;
inset-inline-end: 0.5rem; inset-inline-end: 0.5rem;
transform: translate(50%, -50%); transform: translate(50%, -50%);
} }
} }
@@ -151,8 +151,8 @@ Navbar
&:after { &:after {
content: ''; content: '';
position: absolute; position: absolute;
inset-inline-start: 0; inset-inline-start: 0;
inset-inline-end: 0; inset-inline-end: 0;
bottom: -0.25rem; bottom: -0.25rem;
border: 0 var(--#{$prefix}border-style) var(--#{$prefix}navbar-active-border-color); border: 0 var(--#{$prefix}border-style) var(--#{$prefix}navbar-active-border-color);
border-bottom-width: 2px; border-bottom-width: 2px;
@@ -235,7 +235,7 @@ Navbar toggler
border-radius: inherit; border-radius: inherit;
background: inherit; background: inherit;
position: absolute; position: absolute;
inset-inline-start: 0; inset-inline-start: 0;
@include transition(inherit); @include transition(inherit);
} }
@@ -313,7 +313,7 @@ Navbar vertical
width: $sidebar-width; width: $sidebar-width;
position: fixed; position: fixed;
top: 0; top: 0;
inset-inline-start: 0; inset-inline-start: 0;
bottom: 0; bottom: 0;
z-index: $zindex-fixed; z-index: $zindex-fixed;
align-items: start; align-items: start;
@@ -323,8 +323,8 @@ Navbar vertical
&.navbar-right, &.navbar-right,
&.navbar-end { &.navbar-end {
inset-inline-start: auto; inset-inline-start: auto;
inset-inline-end: 0; inset-inline-end: 0;
} }
.navbar-brand { .navbar-brand {
@@ -384,8 +384,8 @@ Navbar vertical
height: $navbar-overlap-height; height: $navbar-overlap-height;
position: absolute; position: absolute;
top: 100%; top: 100%;
inset-inline-start: 0; inset-inline-start: 0;
inset-inline-end: 0; inset-inline-end: 0;
background: inherit; background: inherit;
z-index: -1; z-index: -1;
box-shadow: inherit; box-shadow: inherit;

4
core/scss/layout/_page.scss
View File

@@ -67,8 +67,8 @@
content: ''; content: '';
position: absolute; position: absolute;
top: 0; top: 0;
inset-inline-start: 0; inset-inline-start: 0;
inset-inline-end: 0; inset-inline-end: 0;
bottom: 0; bottom: 0;
background-image: $overlay-gradient; background-image: $overlay-gradient;
} }

11
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;
@@ -70,15 +70,14 @@
.btn-close { .btn-close {
position: absolute; position: absolute;
top: calc(var(--#{$prefix}alert-padding-x) / 2 - 1px); 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; z-index: 1;
padding: calc(var(--#{$prefix}alert-padding-y) * 1.25) var(--#{$prefix}alert-padding-x); padding: calc(var(--#{$prefix}alert-padding-y) * 1.25) var(--#{$prefix}alert-padding-x);
} }
} }
.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 {

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

@@ -101,8 +101,9 @@
--#{$prefix}list-gap: 0; --#{$prefix}list-gap: 0;
.avatar { .avatar {
box-shadow: var(--#{$prefix}avatar-box-shadow), box-shadow:
0 0 0 2px var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface)); var(--#{$prefix}avatar-box-shadow),
0 0 0 2px var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
&:not(:first-child) { &:not(:first-child) {
margin-inline-start: calc(#{$avatar-list-spacing} * var(--#{$prefix}avatar-size)) !important; margin-inline-start: calc(#{$avatar-list-spacing} * var(--#{$prefix}avatar-size)) !important;
@@ -160,4 +161,4 @@
background: var(--#{$prefix}bg-surface); background: var(--#{$prefix}bg-surface);
border-radius: var(--#{$prefix}border-radius); border-radius: var(--#{$prefix}border-radius);
border: 1px solid var(--#{$prefix}border-color); border: 1px solid var(--#{$prefix}border-color);
} }

2
core/scss/ui/_buttons.scss
View File

@@ -250,7 +250,7 @@
position: absolute; position: absolute;
width: var(--#{$prefix}btn-icon-size); width: var(--#{$prefix}btn-icon-size);
height: 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); top: calc(50% - var(--#{$prefix}btn-icon-size) / 2);
animation: spinner-border 0.75s linear infinite; animation: spinner-border 0.75s linear infinite;
} }

8
core/scss/ui/_calendars.scss
View File

@@ -77,8 +77,8 @@
&:before { &:before {
position: absolute; position: absolute;
top: 50%; top: 50%;
inset-inline-end: 0; inset-inline-end: 0;
inset-inline-start: 0; inset-inline-start: 0;
height: 1.4rem; height: 1.4rem;
content: ''; content: '';
background: rgba(var(--#{$prefix}primary-rgb), 0.1); background: rgba(var(--#{$prefix}primary-rgb), 0.1);
@@ -95,10 +95,10 @@
} }
&.range-start:before { &.range-start:before {
inset-inline-start: 50%; inset-inline-start: 50%;
} }
&.range-end:before { &.range-end:before {
inset-inline-end: 50%; inset-inline-end: 50%;
} }
} }

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

@@ -26,7 +26,7 @@
@at-root a#{&} { @at-root a#{&} {
color: inherit; color: inherit;
&:hover { &:hover {
text-decoration: none; text-decoration: none;
box-shadow: $box-shadow-card-hover; box-shadow: $box-shadow-card-hover;
@@ -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:
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, 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(calc(270deg + var(--#{$prefix}card-gradient-direction)), var(--#{$prefix}card-gradient)) 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) { @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 {

6
core/scss/ui/_dropdowns.scss
View File

@@ -74,7 +74,7 @@
content: ''; content: '';
position: absolute; position: absolute;
top: -0.25rem; top: -0.25rem;
inset-inline-start: 0.75rem; inset-inline-start: 0.75rem;
display: block; display: block;
background: inherit; background: inherit;
width: 14px; width: 14px;
@@ -90,8 +90,8 @@
&.dropdown-menu-end { &.dropdown-menu-end {
&:before { &:before {
inset-inline-end: 0.75rem; inset-inline-end: 0.75rem;
inset-inline-start: auto; inset-inline-start: auto;
} }
} }
} }

6
core/scss/ui/_loaders.scss
View File

@@ -9,7 +9,7 @@
&:after { &:after {
position: absolute; position: absolute;
top: 0; top: 0;
inset-inline-start: 0; inset-inline-start: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
content: ''; content: '';
@@ -33,8 +33,8 @@ Dimmer
.loader { .loader {
position: absolute; position: absolute;
top: 50%; top: 50%;
inset-inline-end: 0; inset-inline-end: 0;
inset-inline-start: 0; inset-inline-start: 0;
display: none; display: none;
margin: 0 auto; margin: 0 auto;
transform: translateY(-50%); transform: translateY(-50%);

2
core/scss/ui/_modals.scss
View File

@@ -3,7 +3,7 @@
> .btn-close { > .btn-close {
position: absolute; position: absolute;
top: 0; top: 0;
inset-inline-end: 0; inset-inline-end: 0;
width: $modal-header-height; width: $modal-header-height;
height: $modal-header-height; height: $modal-header-height;
margin: 0; margin: 0;

10
core/scss/ui/_progress.scss
View File

@@ -1,13 +1,13 @@
@keyframes progress-indeterminate { @keyframes progress-indeterminate {
0% { 0% {
inset-inline-end: 100%; inset-inline-end: 100%;
inset-inline-start: -35%; inset-inline-start: -35%;
} }
100%, 100%,
60% { 60% {
inset-inline-end: -90%; inset-inline-end: -90%;
inset-inline-start: 100%; inset-inline-start: 100%;
} }
} }
@@ -64,7 +64,7 @@ Progress bar
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
inset-inline-start: 0; inset-inline-start: 0;
content: ''; content: '';
background-color: inherit; background-color: inherit;
will-change: left, right; will-change: left, right;

24
core/scss/ui/_ribbons.scss
View File

@@ -25,7 +25,7 @@
&:before { &:before {
position: absolute; position: absolute;
inset-inline-end: 0; inset-inline-end: 0;
bottom: 100%; bottom: 100%;
width: 0; width: 0;
height: 0; height: 0;
@@ -65,7 +65,7 @@
&:before { &:before {
top: 0; top: 0;
inset-inline-end: 100%; inset-inline-end: 100%;
bottom: auto; bottom: auto;
border-color: inherit; border-color: inherit;
border-top-color: transparent; border-top-color: transparent;
@@ -73,13 +73,13 @@
} }
&.ribbon-start { &.ribbon-start {
inset-inline-end: auto; inset-inline-end: auto;
inset-inline-start: 0.75rem; inset-inline-start: 0.75rem;
&:before { &:before {
top: 0; top: 0;
inset-inline-end: 100%; inset-inline-end: 100%;
inset-inline-start: auto; inset-inline-start: auto;
} }
} }
} }
@@ -92,7 +92,7 @@
&:before { &:before {
top: auto; top: auto;
bottom: 100%; bottom: 100%;
inset-inline-start: 0; inset-inline-start: 0;
border-color: inherit; border-color: inherit;
border-top-color: transparent; border-top-color: transparent;
border-inline-start-color: transparent; border-inline-start-color: transparent;
@@ -111,7 +111,7 @@
&:after { &:after {
position: absolute; position: absolute;
top: 0; top: 0;
inset-inline-end: 100%; inset-inline-end: 100%;
display: block; display: block;
width: 0; width: 0;
height: 0; height: 0;
@@ -127,8 +127,8 @@
padding-inline-end: 0.5rem; padding-inline-end: 0.5rem;
&:after { &:after {
inset-inline-end: auto; inset-inline-end: auto;
inset-inline-start: 100%; inset-inline-start: 100%;
border-inline-end-color: transparent; border-inline-end-color: transparent;
border-inline-end-width: 0.5rem; border-inline-end-width: 0.5rem;
@@ -144,8 +144,8 @@
&:after { &:after {
top: 100%; top: 100%;
inset-inline-end: 0; inset-inline-end: 0;
inset-inline-start: 0; inset-inline-start: 0;
border-color: inherit; border-color: inherit;
border-width: 1rem; border-width: 1rem;
border-top-width: 0; border-top-width: 0;

8
core/scss/ui/_steps.scss
View File

@@ -52,7 +52,7 @@
&:not(:last-child):after { &:not(:last-child):after {
position: absolute; position: absolute;
inset-inline-start: 50%; inset-inline-start: 50%;
width: 100%; width: 100%;
content: ''; content: '';
transform: translateY(-50%); transform: translateY(-50%);
@@ -67,7 +67,7 @@
content: ''; content: '';
position: absolute; position: absolute;
top: 0; top: 0;
inset-inline-start: 50%; inset-inline-start: 50%;
z-index: 1; z-index: 1;
box-sizing: content-box; box-sizing: content-box;
display: flex; display: flex;
@@ -137,7 +137,7 @@
&:before { &:before {
top: var(--#{$prefix}steps-dot-offset); top: var(--#{$prefix}steps-dot-offset);
inset-inline-start: 0; inset-inline-start: 0;
transform: translate(0, 0); transform: translate(0, 0);
} }
@@ -147,7 +147,7 @@
content: ''; content: '';
transform: translateX(-50%); transform: translateX(-50%);
top: var(--#{$prefix}steps-dot-offset); 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); width: var(--#{$prefix}steps-border-width);
height: calc(100% + 1rem); height: calc(100% + 1rem);
} }

2
core/scss/ui/_switch-icon.scss
View File

@@ -39,7 +39,7 @@
.switch-icon-b { .switch-icon-b {
position: absolute; position: absolute;
top: 0; top: 0;
inset-inline-start: 0; inset-inline-start: 0;
opacity: 0; opacity: 0;
} }

2
core/scss/ui/_timeline.scss
View File

@@ -21,7 +21,7 @@
content: ''; content: '';
position: absolute; position: absolute;
top: var(--#{$prefix}timeline-icon-size); 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)); bottom: calc(-1 * var(--#{$prefix}page-padding));
width: var(--#{$prefix}border-width); width: var(--#{$prefix}border-width);
background-color: var(--#{$prefix}border-color); background-color: var(--#{$prefix}border-color);

2
core/scss/ui/forms/_form-check.scss
View File

@@ -82,4 +82,4 @@ Form switch
.form-check-label { .form-check-label {
padding-top: 0.125rem; padding-top: 0.125rem;
} }
} }

2
core/scss/ui/forms/_form-colorinput.scss
View File

@@ -27,7 +27,7 @@ Color Input
&:before { &:before {
position: absolute; position: absolute;
top: 0; top: 0;
inset-inline-start: 0; inset-inline-start: 0;
width: 100%; width: 100%;
height: 100%; height: 100%;
content: ''; content: '';

4
core/scss/ui/forms/_form-icon.scss
View File

@@ -31,7 +31,7 @@ Icon input
font-size: 1.2em; font-size: 1.2em;
&:last-child { &:last-child {
inset-inline-end: 0; inset-inline-end: 0;
inset-inline-start: auto; inset-inline-start: auto;
} }
} }

2
core/scss/ui/forms/_form-imagecheck.scss
View File

@@ -34,7 +34,7 @@ Image check
&:before { &:before {
position: absolute; position: absolute;
top: 0.25rem; top: 0.25rem;
inset-inline-start: 0.25rem; inset-inline-start: 0.25rem;
z-index: 1; z-index: 1;
display: block; display: block;
width: $form-check-input-width; width: $form-check-input-width;

4
core/scss/vendor/_coloris.scss vendored
View File

@@ -53,8 +53,8 @@ input.clr-color {
button { button {
width: 1.5rem; width: 1.5rem;
height: 1.5rem; height: 1.5rem;
inset-inline-start: 6px; inset-inline-start: 6px;
inset-inline-end: auto; inset-inline-end: auto;
border-radius: var(--#{$prefix}border-radius); border-radius: var(--#{$prefix}border-radius);
&:after { &:after {

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