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'

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;
// 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;

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

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

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

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

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

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

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

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

11
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;
@@ -70,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 {

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

@@ -101,8 +101,9 @@
--#{$prefix}list-gap: 0;
.avatar {
box-shadow: var(--#{$prefix}avatar-box-shadow),
0 0 0 2px var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
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;

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

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

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

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

48
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,
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) {
@@ -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 {

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

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

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

@@ -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%);

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

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

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

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

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

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

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

@@ -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);
}

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

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

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

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

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

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

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

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

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

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

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

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