Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-08-05 01:44:41 +04:00
Code Issues Projects Releases Wiki Activity

Migrate core SCSS from @import to @use/@forward (#2709)

Browse Source
This commit is contained in:
Paweł Kuna
2026-07-22 23:33:04 +02:00
committed by GitHub
parent 7206717d1b
commit 9820d110f6
142 changed files with 863 additions and 586 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/scss-module-migration.md
+5
View File
@@ -0,0 +1,5 @@
---
"@tabler/core": minor
---
Updated core SCSS to the Sass module system with `@use`/`@forward`, including `_extends.scss` for cross-module `@extend` rules and a parameterized `utilities-api` mixin for marketing utilities.
core/scss/_core.scss
+101 -101
View File
@@ -1,109 +1,109 @@
@import 'config';
@forward 'config';
// Bootstrap components — managed by Tabler (see core/scss/bootstrap/)
@import 'bootstrap/root';
@import 'bootstrap/reboot';
@import 'bootstrap/type';
@import 'bootstrap/images';
@import 'bootstrap/containers';
@import 'bootstrap/grid';
@import 'bootstrap/tables';
@import 'bootstrap/forms';
@import 'bootstrap/buttons';
@import 'bootstrap/transitions';
@import 'bootstrap/dropdown';
@import 'bootstrap/button-group';
@import 'bootstrap/nav';
@import 'bootstrap/navbar';
@import 'bootstrap/card';
@import 'bootstrap/pagination';
@import 'bootstrap/progress';
@import 'bootstrap/list-group';
@import 'bootstrap/toasts';
@import 'bootstrap/modal';
@import 'bootstrap/tooltip';
@import 'bootstrap/popover';
@import 'bootstrap/carousel';
@import 'bootstrap/spinners';
@import 'bootstrap/offcanvas';
@import 'bootstrap/placeholders';
@import 'bootstrap/utilities/api';
@forward 'bootstrap/root';
@forward 'bootstrap/reboot';
@forward 'bootstrap/type';
@forward 'bootstrap/images';
@forward 'bootstrap/containers';
@forward 'bootstrap/grid';
@forward 'bootstrap/tables';
@forward 'bootstrap/forms';
@forward 'bootstrap/buttons';
@forward 'bootstrap/transitions';
@forward 'bootstrap/dropdown';
@forward 'bootstrap/button-group';
@forward 'bootstrap/nav';
@forward 'bootstrap/navbar';
@forward 'bootstrap/card';
@forward 'bootstrap/pagination';
@forward 'bootstrap/progress';
@forward 'bootstrap/list-group';
@forward 'bootstrap/toasts';
@forward 'bootstrap/modal';
@forward 'bootstrap/tooltip';
@forward 'bootstrap/popover';
@forward 'bootstrap/carousel';
@forward 'bootstrap/spinners';
@forward 'bootstrap/offcanvas';
@forward 'bootstrap/placeholders';
@forward 'bootstrap/utilities/api';
@import 'props';
@forward 'props';
@import 'fonts/webfonts';
@import 'fonts/geist';
@forward 'fonts/webfonts';
@forward 'fonts/geist';
@import 'layout/root';
@import 'layout/animations';
@import 'layout/core';
@import 'layout/navbar';
@import 'layout/page';
@import 'layout/footer';
@import 'layout/dark';
@forward 'layout/root';
@forward 'layout/animations';
@forward 'layout/core';
@forward 'layout/navbar';
@forward 'layout/page';
@forward 'layout/footer';
@forward 'layout/dark';
@import 'ui/accordion';
@import 'ui/alerts';
@import 'ui/avatars';
@import 'ui/badges';
@import 'ui/breadcrumbs';
@import 'ui/buttons';
@import 'ui/button-group';
@import 'ui/calendars';
@import 'ui/carousel';
@import 'ui/cards';
@import 'ui/close';
@import 'ui/dropdowns';
@import 'ui/datagrid';
@import 'ui/empty';
@import 'ui/grid';
@import 'ui/icons';
@import 'ui/images';
@import 'ui/forms';
@import 'ui/forms/form-icon';
@import 'ui/forms/form-colorinput';
@import 'ui/forms/form-imagecheck';
@import 'ui/forms/form-selectgroup';
@import 'ui/forms/form-custom';
@import 'ui/forms/form-check';
@import 'ui/forms/validation';
@import 'ui/legend';
@import 'ui/lists';
@import 'ui/loaders';
@import 'ui/login';
@import 'ui/modals';
@import 'ui/nav';
@import 'ui/stars';
@import 'ui/pagination';
@import 'ui/popovers';
@import 'ui/progress';
@import 'ui/ribbons';
@import 'ui/markdown';
@import 'ui/placeholder';
@import 'ui/segmented';
@import 'ui/steps';
@import 'ui/status';
@import 'ui/switch-icon';
@import 'ui/tables';
@import 'ui/tags';
@import 'ui/toasts';
@import 'ui/toolbar';
@import 'ui/tracking';
@import 'ui/timeline';
@import 'ui/type';
@import 'ui/charts';
@import 'ui/offcanvas';
@import 'ui/chat';
@import 'ui/signature';
@import 'ui/patterns';
@forward 'ui/accordion';
@forward 'ui/alerts';
@forward 'ui/avatars';
@forward 'ui/badges';
@forward 'ui/breadcrumbs';
@forward 'ui/buttons';
@forward 'ui/button-group';
@forward 'ui/calendars';
@forward 'ui/carousel';
@forward 'ui/cards';
@forward 'ui/close';
@forward 'ui/dropdowns';
@forward 'ui/datagrid';
@forward 'ui/empty';
@forward 'ui/grid';
@forward 'ui/icons';
@forward 'ui/images';
@forward 'ui/forms';
@forward 'ui/forms/form-icon';
@forward 'ui/forms/form-colorinput';
@forward 'ui/forms/form-imagecheck';
@forward 'ui/forms/form-selectgroup';
@forward 'ui/forms/form-custom';
@forward 'ui/forms/form-check';
@forward 'ui/forms/validation';
@forward 'ui/legend';
@forward 'ui/lists';
@forward 'ui/loaders';
@forward 'ui/login';
@forward 'ui/modals';
@forward 'ui/nav';
@forward 'ui/stars';
@forward 'ui/pagination';
@forward 'ui/popovers';
@forward 'ui/progress';
@forward 'ui/ribbons';
@forward 'ui/markdown';
@forward 'ui/placeholder';
@forward 'ui/segmented';
@forward 'ui/steps';
@forward 'ui/status';
@forward 'ui/switch-icon';
@forward 'ui/tables';
@forward 'ui/tags';
@forward 'ui/toasts';
@forward 'ui/toolbar';
@forward 'ui/tracking';
@forward 'ui/timeline';
@forward 'ui/type';
@forward 'ui/charts';
@forward 'ui/offcanvas';
@forward 'ui/chat';
@forward 'ui/signature';
@forward 'ui/patterns';
@import 'helpers/index';
@forward 'helpers/index';
@import 'utils/background';
@import 'utils/colors';
@import 'utils/scroll';
@import 'utils/sizing';
@import 'utils/opacity';
@import 'utils/shadow';
@import 'utils/text';
@import 'utils/hover';
@forward 'utils/background';
@forward 'utils/colors';
@forward 'utils/scroll';
@forward 'utils/sizing';
@forward 'utils/opacity';
@forward 'utils/shadow';
@forward 'utils/text';
@forward 'utils/hover';
core/scss/_extends.scss
+68
View File
@@ -0,0 +1,68 @@
// Cross-module `@extend` rules, loaded last from `tabler.scss`.
//
// With the Sass module system an extension only applies to upstream
// stylesheets — the modules the extending file loads, directly or
// transitively — never to sibling modules loaded elsewhere. The extends below
// target element selectors spread across many modules (`h1`–`h6`, `hr`,
// `.table`, `[data-bs-theme='dark']`), so they live here, with the whole
// `core` upstream.
//
// Rules containing only `@extend` emit no CSS of their own, so placing them
// here does not change the compiled output — each extension is applied
// in-place to the rules it extends.
@use 'config' as *;
@use 'core';
// Heading helpers (from `bootstrap/_type.scss`)
.h1 {
@extend h1;
}
.h2 {
@extend h2;
}
.h3 {
@extend h3;
}
.h4 {
@extend h4;
}
.h5 {
@extend h5;
}
.h6 {
@extend h6;
}
// Emphasis helpers (from `bootstrap/_type.scss`)
.small {
@extend small;
}
.mark {
@extend mark;
}
// Horizontal rule helper (from `ui/typo/_hr.scss`)
.hr {
@extend hr;
}
// Markdown tables pick up the styled table look (from `ui/_markdown.scss`)
.prose > table,
.markdown > table {
@extend .table, .table-bordered, .table-sm;
}
// Light-scoped subtrees inside a dark body inherit the dark styles
// (from `layout/_dark.scss`)
@if $enable-dark-mode {
body[data-bs-theme='dark'] [data-bs-theme='light'],
body[data-theme='dark'] [data-theme='light'] {
@extend [data-bs-theme='dark'];
}
}
core/scss/_utilities-marketing.scss
+6 -1
View File
@@ -1,8 +1,13 @@
@use 'sass:map';
@use 'config' as *;
$negative-spacers-extra: if(sass($enable-negative-margins): negativify-map(map.merge($spacers, $spacers-extra)); else: null);
$utilities: (
// Named differently from config's `$utilities`: with `@use 'config' as *`,
// assigning to `$utilities` would overwrite the config module's variable
// instead of declaring a local one.
$marketing-utilities: (
// Margin utilities
'margin': (
responsive: true,
core/scss/bootstrap/_button-group.scss
+16 -11
View File
@@ -1,4 +1,8 @@
// Make the div behave like a button
@use '../config' as *;
// Loaded for the `@extend .btn-sm/.btn-lg` targets below.
@use 'buttons';
.btn-group,
.btn-group-vertical {
position: relative;
@@ -64,17 +68,20 @@
//
// Remix the default button sizing classes into new ones for easier manipulation.
.btn-group-sm > .btn { @extend .btn-sm; }
.btn-group-lg > .btn { @extend .btn-lg; }
.btn-group-sm > .btn {
@extend .btn-sm;
}
.btn-group-lg > .btn {
@extend .btn-lg;
}
//
// Split button dropdowns
//
.dropdown-toggle-split {
padding-right: $btn-padding-x * .75;
padding-left: $btn-padding-x * .75;
padding-right: $btn-padding-x * 0.75;
padding-left: $btn-padding-x * 0.75;
&::after,
.dropup &::after,
@@ -88,16 +95,15 @@
}
.btn-sm + .dropdown-toggle-split {
padding-right: $btn-padding-x-sm * .75;
padding-left: $btn-padding-x-sm * .75;
padding-right: $btn-padding-x-sm * 0.75;
padding-left: $btn-padding-x-sm * 0.75;
}
.btn-lg + .dropdown-toggle-split {
padding-right: $btn-padding-x-lg * .75;
padding-left: $btn-padding-x-lg * .75;
padding-right: $btn-padding-x-lg * 0.75;
padding-left: $btn-padding-x-lg * 0.75;
}
// The clickable button for toggling the menu
// Set the same inset shadow as the :active state
.btn-group.show .dropdown-toggle {
@@ -109,7 +115,6 @@
}
}
//
// Vertical button groups
//
core/scss/bootstrap/_buttons.scss
+6 -14
View File
@@ -2,6 +2,8 @@
// Base styles
//
@use '../config' as *;
.btn {
// scss-docs-start btn-css-vars
--#{$prefix}btn-padding-x: #{$btn-padding-x};
@@ -18,7 +20,7 @@
--#{$prefix}btn-hover-border-color: transparent;
--#{$prefix}btn-box-shadow: #{$btn-box-shadow};
--#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity};
--#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), .5);
--#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), 0.5);
// scss-docs-end btn-css-vars
display: inline-block;
@@ -122,7 +124,6 @@
}
}
//
// Alternate buttons
//
@@ -130,7 +131,7 @@
// scss-docs-start btn-variant-loops
@each $color, $value in $theme-colors {
.btn-#{$color} {
@if $color == "light" {
@if $color == 'light' {
@include button-variant(
$value,
$value,
@@ -139,15 +140,8 @@
$active-background: shade-color($value, $btn-active-bg-shade-amount),
$active-border: shade-color($value, $btn-active-border-shade-amount)
);
} @else if $color == "dark" {
@include button-variant(
$value,
$value,
$hover-background: tint-color($value, $btn-hover-bg-tint-amount),
$hover-border: tint-color($value, $btn-hover-border-tint-amount),
$active-background: tint-color($value, $btn-active-bg-tint-amount),
$active-border: tint-color($value, $btn-active-border-tint-amount)
);
} @else if $color == 'dark' {
@include button-variant($value, $value, $hover-background: tint-color($value, $btn-hover-bg-tint-amount), $hover-border: tint-color($value, $btn-hover-border-tint-amount), $active-background: tint-color($value, $btn-active-bg-tint-amount), $active-border: tint-color($value, $btn-active-border-tint-amount));
} @else {
@include button-variant($value, $value);
}
@@ -161,7 +155,6 @@
}
// scss-docs-end btn-variant-loops
//
// Link buttons
//
@@ -202,7 +195,6 @@
// No need for an active state here
}
//
// Button Sizes
//
core/scss/bootstrap/_card.scss
+8 -8
View File
@@ -2,6 +2,8 @@
// Base styles
//
@use '../config' as *;
.card {
// scss-docs-start card-css-vars
--#{$prefix}card-spacer-y: #{$card-spacer-y};
@@ -52,7 +54,7 @@
@include border-top-radius(var(--#{$prefix}card-inner-border-radius));
}
&:last-child {
&:last-child {
border-bottom-width: 0;
@include border-bottom-radius(var(--#{$prefix}card-inner-border-radius));
}
@@ -80,7 +82,7 @@
}
.card-subtitle {
margin-top: calc(-.5 * var(--#{$prefix}card-title-spacer-y)); // stylelint-disable-line function-disallowed-list
margin-top: calc(-0.5 * var(--#{$prefix}card-title-spacer-y)); // stylelint-disable-line function-disallowed-list
margin-bottom: 0;
color: var(--#{$prefix}card-subtitle-color);
}
@@ -126,15 +128,14 @@
}
}
//
// Header navs
//
.card-header-tabs {
margin-right: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
margin-right: calc(-0.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
margin-bottom: calc(-1 * var(--#{$prefix}card-cap-padding-y)); // stylelint-disable-line function-disallowed-list
margin-left: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
margin-left: calc(-0.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
border-bottom: 0;
.nav-link.active {
@@ -144,8 +145,8 @@
}
.card-header-pills {
margin-right: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
margin-left: calc(-.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
margin-right: calc(-0.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
margin-left: calc(-0.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
}
// Card image
@@ -175,7 +176,6 @@
@include border-bottom-radius(var(--#{$prefix}card-inner-border-radius));
}
//
// Card groups
//
core/scss/bootstrap/_carousel.scss
+10 -11
View File
@@ -11,6 +11,8 @@
// 5. .carousel-item-next.carousel-item-start and .carousel-item-prev.carousel-item-end
// is the upcoming slide in transition.
@use '../config' as *;
.carousel {
position: relative;
}
@@ -52,7 +54,6 @@
transform: translateX(-100%);
}
//
// Alternate transitions
//
@@ -79,7 +80,6 @@
}
}
//
// Left/right controls for nav
//
@@ -115,11 +115,11 @@
}
.carousel-control-prev {
left: 0;
background-image: if(sass($enable-gradients): linear-gradient(90deg, rgba($black, .25), rgba($black, .001)); else: null);
background-image: if(sass($enable-gradients): linear-gradient(90deg, rgba($black, 0.25), rgba($black, 0.001)); else: null);
}
.carousel-control-next {
right: 0;
background-image: if(sass($enable-gradients): linear-gradient(270deg, rgba($black, .25), rgba($black, .001)); else: null);
background-image: if(sass($enable-gradients): linear-gradient(270deg, rgba($black, 0.25), rgba($black, 0.001)); else: null);
}
// Icons for within
@@ -134,10 +134,10 @@
}
.carousel-control-prev-icon {
background-image: escape-svg($carousel-control-prev-icon-bg) #{"/*rtl:" + escape-svg($carousel-control-next-icon-bg) + "*/"};
background-image: escape-svg($carousel-control-prev-icon-bg) #{'/*rtl:' + escape-svg($carousel-control-next-icon-bg) + '*/'};
}
.carousel-control-next-icon {
background-image: escape-svg($carousel-control-next-icon-bg) #{"/*rtl:" + escape-svg($carousel-control-prev-icon-bg) + "*/"};
background-image: escape-svg($carousel-control-next-icon-bg) #{'/*rtl:' + escape-svg($carousel-control-prev-icon-bg) + '*/'};
}
// Optional indicator pips/controls
@@ -185,16 +185,15 @@
}
}
// Optional captions
//
//
.carousel-caption {
position: absolute;
right: (100% - $carousel-caption-width) * .5;
right: (100% - $carousel-caption-width) * 0.5;
bottom: $carousel-caption-spacer;
left: (100% - $carousel-caption-width) * .5;
left: (100% - $carousel-caption-width) * 0.5;
padding-top: $carousel-caption-padding-y;
padding-bottom: $carousel-caption-padding-y;
color: var(--#{$prefix}carousel-caption-color);
@@ -214,8 +213,8 @@
}
:root,
[data-bs-theme="light"],
[data-theme="light"] {
[data-bs-theme='light'],
[data-theme='light'] {
--#{$prefix}carousel-indicator-active-bg: #{$carousel-indicator-active-bg};
--#{$prefix}carousel-caption-color: #{$carousel-caption-color};
--#{$prefix}carousel-control-icon-filter: #{$carousel-control-icon-filter};
core/scss/bootstrap/_containers.scss
+2
View File
@@ -2,6 +2,8 @@
//
// Set the container width, and override it for fixed navbars in media queries.
@use '../config' as *;
@if $enable-container-classes {
// Single container class with breakpoint max-widths
.container,
core/scss/bootstrap/_dropdown.scss
+3 -3
View File
@@ -1,6 +1,8 @@
@use "sass:map";
@use 'sass:map';
// The dropdown wrapper (`<div>`)
@use '../config' as *;
.dropup,
.dropend,
.dropdown,
@@ -80,7 +82,6 @@
> li:last-child .dropdown-item {
@include border-bottom-radius(var(--#{$prefix}dropdown-inner-border-radius));
}
}
}
@@ -167,7 +168,6 @@
}
}
// Dividers (basically an `<hr>`) within the dropdown
.dropdown-divider {
height: 0;
core/scss/bootstrap/_forms.scss
+9 -9
View File
@@ -1,9 +1,9 @@
@import "forms/labels";
@import "forms/form-text";
@import "forms/form-control";
@import "forms/form-select";
@import "forms/form-check";
@import "forms/form-range";
@import "forms/floating-labels";
@import "forms/input-group";
@import "forms/validation";
@forward 'forms/labels';
@forward 'forms/form-text';
@forward 'forms/form-control';
@forward 'forms/form-select';
@forward 'forms/form-check';
@forward 'forms/form-range';
@forward 'forms/floating-labels';
@forward 'forms/input-group';
@forward 'forms/validation';
core/scss/bootstrap/_grid.scss
+2 -1
View File
@@ -2,6 +2,8 @@
//
// Rows contain your columns.
@use '../config' as *;
:root {
@each $name, $value in $grid-breakpoints {
--#{$prefix}breakpoint-#{$name}: #{$value};
@@ -29,7 +31,6 @@
}
}
// Columns
//
// Common styles for small and large grid columns
core/scss/bootstrap/_images.scss
+3 -2
View File
@@ -5,11 +5,12 @@
// and abandoned it in Bootstrap v3 because it breaks lots of third-party widgets (including Google Maps)
// which weren't expecting the images within themselves to be involuntarily resized.
// See also https://github.com/twbs/bootstrap/issues/18178
@use '../config' as *;
.img-fluid {
@include img-fluid();
}
// Image thumbnails
.img-thumbnail {
padding: $thumbnail-padding;
@@ -32,7 +33,7 @@
}
.figure-img {
margin-bottom: $spacer * .5;
margin-bottom: $spacer * 0.5;
line-height: 1;
}
core/scss/bootstrap/_list-group.scss
+4 -4
View File
@@ -1,9 +1,11 @@
@use "sass:map";
@use 'sass:map';
// Base class
//
// Easily usable on <ul>, <ol>, or <div>.
@use '../config' as *;
.list-group {
// scss-docs-start list-group-css-vars
--#{$prefix}list-group-color: #{$list-group-color};
@@ -40,7 +42,7 @@
> .list-group-item::before {
// Increments only this instance of the section counter
content: counters(section, ".") ". ";
content: counters(section, '.') '. ';
counter-increment: section;
}
}
@@ -159,7 +161,6 @@
}
}
// Flush list items
//
// Remove borders and border-radius to keep list group items edge-to-edge. Most
@@ -177,7 +178,6 @@
}
}
// scss-docs-start list-group-modifiers
// List group contextual variants
//
core/scss/bootstrap/_modal.scss
+10 -9
View File
@@ -1,14 +1,15 @@
// stylelint-disable function-disallowed-list
@use "sass:map";
@use 'sass:map';
// .modal-open - body class for killing the scroll
// .modal - container to scroll within
// .modal-dialog - positioning shell for the actual modal
// .modal-content - actual modal w/ bg and corners and stuff
// Container that the modal scrolls within
@use '../config' as *;
.modal {
// scss-docs-start modal-css-vars
--#{$prefix}modal-zindex: #{$zindex-modal};
@@ -133,11 +134,11 @@
@include border-top-radius(var(--#{$prefix}modal-inner-border-radius));
.btn-close {
padding: calc(var(--#{$prefix}modal-header-padding-y) * .5) calc(var(--#{$prefix}modal-header-padding-x) * .5);
padding: calc(var(--#{$prefix}modal-header-padding-y) * 0.5) calc(var(--#{$prefix}modal-header-padding-x) * 0.5);
// Split properties to avoid invalid calc() function if value is 0
margin-top: calc(-.5 * var(--#{$prefix}modal-header-padding-y));
margin-right: calc(-.5 * var(--#{$prefix}modal-header-padding-x));
margin-bottom: calc(-.5 * var(--#{$prefix}modal-header-padding-y));
margin-top: calc(-0.5 * var(--#{$prefix}modal-header-padding-y));
margin-right: calc(-0.5 * var(--#{$prefix}modal-header-padding-x));
margin-bottom: calc(-0.5 * var(--#{$prefix}modal-header-padding-y));
margin-left: auto;
}
}
@@ -165,7 +166,7 @@
flex-wrap: wrap;
align-items: center; // vertically center
justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
padding: calc(var(--#{$prefix}modal-padding) - var(--#{$prefix}modal-footer-gap) * .5);
padding: calc(var(--#{$prefix}modal-padding) - var(--#{$prefix}modal-footer-gap) * 0.5);
background-color: var(--#{$prefix}modal-footer-bg);
border-top: var(--#{$prefix}modal-footer-border-width) solid var(--#{$prefix}modal-footer-border-color);
@include border-bottom-radius(var(--#{$prefix}modal-inner-border-radius));
@@ -174,7 +175,7 @@
// This solution is far from ideal because of the universal selector usage,
// but is needed to fix https://github.com/twbs/bootstrap/issues/24800
> * {
margin: calc(var(--#{$prefix}modal-footer-gap) * .5); // Todo in v6: replace with gap on parent class
margin: calc(var(--#{$prefix}modal-footer-gap) * 0.5); // Todo in v6: replace with gap on parent class
}
}
@@ -213,7 +214,7 @@
// scss-docs-start modal-fullscreen-loop
@each $breakpoint in map.keys($grid-breakpoints) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
$postfix: if(sass($infix != ""): $infix + "-down"; else: "");
$postfix: if(sass($infix != ''): $infix + '-down'; else: '');
@include media-breakpoint-down($breakpoint) {
.modal-fullscreen#{$postfix} {
core/scss/bootstrap/_nav.scss
+2 -4
View File
@@ -3,6 +3,8 @@
// Kickstart any navigation component with a set of style resets. Works with
// `<nav>`s, `<ul>`s or `<ol>`s.
@use '../config' as *;
.nav {
// scss-docs-start nav-css-vars
--#{$prefix}nav-link-padding-x: #{$nav-link-padding-x};
@@ -97,7 +99,6 @@
}
}
//
// Pills
//
@@ -120,7 +121,6 @@
}
}
//
// Underline
//
@@ -153,7 +153,6 @@
}
}
//
// Justified variants
//
@@ -182,7 +181,6 @@
}
}
// Tabbable tabs
//
// Hide tabbable panes to start, show them when `.active`
core/scss/bootstrap/_navbar.scss
+7 -9
View File
@@ -1,10 +1,12 @@
@use "sass:map";
@use 'sass:map';
// Navbar
//
// Provide a static navbar from which we expand to create full-width, fixed, and
// other navbar variations.
@use '../config' as *;
.navbar {
// scss-docs-start navbar-css-vars
--#{$prefix}navbar-padding-x: #{if(sass($navbar-padding-x == null): 0; else: $navbar-padding-x)};
@@ -59,7 +61,6 @@
}
}
// Navbar brand
//
// Used for brand, project, or site names.
@@ -80,7 +81,6 @@
}
}
// Navbar nav
//
// Custom navbar navigation (doesn't require `.nav`, but does make use of `.nav-link`).
@@ -114,7 +114,6 @@
}
}
// Navbar text
//
//
@@ -126,12 +125,11 @@
a,
a:hover,
a:focus {
a:focus {
color: var(--#{$prefix}navbar-active-color);
}
}
// Responsive navbar
//
// Custom styles for responsive collapsing and toggling of navbar contents.
@@ -265,12 +263,12 @@
// Styles for switching between navbars with light or dark background.
.navbar-light {
@include deprecate("`.navbar-light`", "v5.2.0", "v6.0.0", true);
@include deprecate('`.navbar-light`', 'v5.2.0', 'v6.0.0', true);
}
.navbar-dark,
.navbar[data-bs-theme="dark"],
.navbar[data-theme="dark"] {
.navbar[data-bs-theme='dark'],
.navbar[data-theme='dark'] {
// scss-docs-start navbar-dark-css-vars
--#{$prefix}navbar-color: #{$navbar-dark-color};
--#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color};
core/scss/bootstrap/_offcanvas.scss
+8 -6
View File
@@ -1,6 +1,8 @@
// stylelint-disable function-disallowed-list
@use "sass:map";
@use 'sass:map';
@use '../config' as *;
%offcanvas-css-vars {
// scss-docs-start offcanvas-css-vars
@@ -95,7 +97,7 @@
}
}
@if not ($infix == "") {
@if not($infix == '') {
@include media-breakpoint-up($next) {
--#{$prefix}offcanvas-height: auto;
--#{$prefix}offcanvas-border-width: 0;
@@ -128,11 +130,11 @@
padding: var(--#{$prefix}offcanvas-padding-y) var(--#{$prefix}offcanvas-padding-x);
.btn-close {
padding: calc(var(--#{$prefix}offcanvas-padding-y) * .5) calc(var(--#{$prefix}offcanvas-padding-x) * .5);
padding: calc(var(--#{$prefix}offcanvas-padding-y) * 0.5) calc(var(--#{$prefix}offcanvas-padding-x) * 0.5);
// Split properties to avoid invalid calc() function if value is 0
margin-top: calc(-.5 * var(--#{$prefix}offcanvas-padding-y));
margin-right: calc(-.5 * var(--#{$prefix}offcanvas-padding-x));
margin-bottom: calc(-.5 * var(--#{$prefix}offcanvas-padding-y));
margin-top: calc(-0.5 * var(--#{$prefix}offcanvas-padding-y));
margin-right: calc(-0.5 * var(--#{$prefix}offcanvas-padding-x));
margin-bottom: calc(-0.5 * var(--#{$prefix}offcanvas-padding-y));
margin-left: auto;
}
}
core/scss/bootstrap/_pagination.scss
+2 -1
View File
@@ -1,3 +1,5 @@
@use '../config' as *;
.pagination {
// scss-docs-start pagination-css-vars
--#{$prefix}pagination-padding-x: #{$pagination-padding-x};
@@ -95,7 +97,6 @@
}
}
//
// Sizing
//
core/scss/bootstrap/_placeholders.scss
+5 -3
View File
@@ -1,3 +1,5 @@
@use '../config' as *;
.placeholder {
display: inline-block;
min-height: 1em;
@@ -8,17 +10,17 @@
&.btn::before {
display: inline-block;
content: "";
content: '';
}
}
// Sizing
.placeholder-xs {
min-height: .6em;
min-height: 0.6em;
}
.placeholder-sm {
min-height: .8em;
min-height: 0.8em;
}
.placeholder-lg {
core/scss/bootstrap/_popover.scss
+13 -11
View File
@@ -1,3 +1,5 @@
@use '../config' as *;
.popover {
// scss-docs-start popover-css-vars
--#{$prefix}popover-zindex: #{$zindex-popover};
@@ -46,7 +48,7 @@
&::after {
position: absolute;
display: block;
content: "";
content: '';
border-color: transparent;
border-style: solid;
border-width: 0;
@@ -60,7 +62,7 @@
&::before,
&::after {
border-width: var(--#{$prefix}popover-arrow-height) calc(var(--#{$prefix}popover-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
border-width: var(--#{$prefix}popover-arrow-height) calc(var(--#{$prefix}popover-arrow-width) * 0.5) 0; // stylelint-disable-line function-disallowed-list
}
&::before {
@@ -84,7 +86,7 @@
&::before,
&::after {
border-width: calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height) calc(var(--#{$prefix}popover-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
border-width: calc(var(--#{$prefix}popover-arrow-width) * 0.5) var(--#{$prefix}popover-arrow-height) calc(var(--#{$prefix}popover-arrow-width) * 0.5) 0; // stylelint-disable-line function-disallowed-list
}
&::before {
@@ -107,7 +109,7 @@
&::before,
&::after {
border-width: 0 calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height); // stylelint-disable-line function-disallowed-list
border-width: 0 calc(var(--#{$prefix}popover-arrow-width) * 0.5) var(--#{$prefix}popover-arrow-height); // stylelint-disable-line function-disallowed-list
}
&::before {
@@ -128,8 +130,8 @@
left: 50%;
display: block;
width: var(--#{$prefix}popover-arrow-width);
margin-left: calc(-.5 * var(--#{$prefix}popover-arrow-width)); // stylelint-disable-line function-disallowed-list
content: "";
margin-left: calc(-0.5 * var(--#{$prefix}popover-arrow-width)); // stylelint-disable-line function-disallowed-list
content: '';
border-bottom: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-header-bg);
}
}
@@ -143,7 +145,7 @@
&::before,
&::after {
border-width: calc(var(--#{$prefix}popover-arrow-width) * .5) 0 calc(var(--#{$prefix}popover-arrow-width) * .5) var(--#{$prefix}popover-arrow-height); // stylelint-disable-line function-disallowed-list
border-width: calc(var(--#{$prefix}popover-arrow-width) * 0.5) 0 calc(var(--#{$prefix}popover-arrow-width) * 0.5) var(--#{$prefix}popover-arrow-height); // stylelint-disable-line function-disallowed-list
}
&::before {
@@ -161,16 +163,16 @@
/* rtl:end:ignore */
.bs-popover-auto {
&[data-popper-placement^="top"] {
&[data-popper-placement^='top'] {
@extend .bs-popover-top;
}
&[data-popper-placement^="right"] {
&[data-popper-placement^='right'] {
@extend .bs-popover-end;
}
&[data-popper-placement^="bottom"] {
&[data-popper-placement^='bottom'] {
@extend .bs-popover-bottom;
}
&[data-popper-placement^="left"] {
&[data-popper-placement^='left'] {
@extend .bs-popover-start;
}
}
core/scss/bootstrap/_progress.scss
+5 -1
View File
@@ -1,9 +1,13 @@
// Disable animation if transitions are disabled
// scss-docs-start progress-keyframes
@use '../config' as *;
@if $enable-transitions {
@keyframes progress-bar-stripes {
0% { background-position-x: var(--#{$prefix}progress-height); }
0% {
background-position-x: var(--#{$prefix}progress-height);
}
}
}
// scss-docs-end progress-keyframes
core/scss/bootstrap/_reboot.scss
+12 -30
View File
@@ -1,6 +1,5 @@
// stylelint-disable declaration-no-important, selector-no-qualifying-type, property-no-vendor-prefix
// Reboot
//
// Normalization of HTML elements, manually forked from Normalize.css to remove
@@ -8,18 +7,18 @@
//
// Normalize is licensed MIT. https://github.com/necolas/normalize.css
// Document
//
// Change from `box-sizing: content-box` so that `width` is not affected by `padding` or `border`.
@use '../config' as *;
*,
*::before,
*::after {
box-sizing: border-box;
}
// Root
//
// Ability to the value of the root font sizes, affecting the value of `rem`.
@@ -37,7 +36,6 @@
}
}
// Body
//
// 1. Remove the margin in all browsers.
@@ -60,7 +58,6 @@ body {
}
// scss-docs-end reboot-body-rules
// Content grouping
//
// 1. Reset Firefox's gray color
@@ -73,7 +70,6 @@ hr {
opacity: $hr-opacity;
}
// Typography
//
// 1. Remove top margins from headings
@@ -120,7 +116,6 @@ h6 {
@include font-size($h6-font-size);
}
// Reset margins on paragraphs
//
// Similarly, the top margin on `<p>`s get reset. However, we also reset the
@@ -131,7 +126,6 @@ p {
margin-bottom: $paragraph-margin-bottom;
}
// Abbreviations
//
// 1. Add the correct text decoration in Chrome, Edge, Opera, and Safari.
@@ -144,7 +138,6 @@ abbr[title] {
text-decoration-skip-ink: none; // 3
}
// Address
address {
@@ -153,7 +146,6 @@ address {
line-height: inherit;
}
// Lists
ol,
@@ -182,18 +174,16 @@ dt {
// 1. Undo browser default
dd {
margin-bottom: .5rem;
margin-bottom: 0.5rem;
margin-left: 0; // 1
}
// Blockquote
blockquote {
margin: 0 0 1rem;
}
// Strong
//
// Add the correct font weight in Chrome, Edge, and Safari
@@ -203,7 +193,6 @@ strong {
font-weight: $font-weight-bolder;
}
// Small
//
// Add the correct font size in all browsers
@@ -212,7 +201,6 @@ small {
@include font-size($small-font-size);
}
// Mark
mark {
@@ -221,7 +209,6 @@ mark {
background-color: var(--#{$prefix}highlight-bg);
}
// Sub and Sup
//
// Prevent `sub` and `sup` elements from affecting the line height in
@@ -235,9 +222,12 @@ sup {
vertical-align: baseline;
}
sub { bottom: -.25em; }
sup { top: -.5em; }
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
// Links
@@ -264,7 +254,6 @@ a:not([href]):not([class]) {
}
}
// Code
pre,
@@ -320,7 +309,6 @@ kbd {
}
}
// Figures
//
// Apply a consistent margin strategy (matches our type styles).
@@ -329,7 +317,6 @@ figure {
margin: 0 0 1rem;
}
// Images and content
img,
@@ -337,7 +324,6 @@ svg {
vertical-align: middle;
}
// Tables
//
// Prevent double borders
@@ -375,7 +361,6 @@ th {
border-width: 0;
}
// Forms
//
// 1. Allow labels to use `margin` for spacing.
@@ -422,7 +407,7 @@ select {
// Set the cursor for non-`<button>` buttons
//
// Details at https://github.com/twbs/bootstrap/pull/30562
[role="button"] {
[role='button'] {
cursor: pointer;
}
@@ -440,7 +425,7 @@ select {
// Remove the dropdown arrow only from text type inputs built with datalists in Chrome.
// See https://stackoverflow.com/a/54997118
[list]:not([type="date"]):not([type="datetime-local"]):not([type="month"]):not([type="week"]):not([type="time"])::-webkit-calendar-picker-indicator {
[list]:not([type='date']):not([type='datetime-local']):not([type='month']):not([type='week']):not([type='time'])::-webkit-calendar-picker-indicator {
display: none !important;
}
@@ -531,7 +516,7 @@ legend {
// https://github.com/twbs/bootstrap/issues/11586.
// 2. Correct the outline style in Safari.
[type="search"] {
[type='search'] {
-webkit-appearance: textfield; // 1
outline-offset: -2px; // 2
@@ -568,7 +553,6 @@ legend {
padding: 0;
}
// 1. Inherit font family and line height for file input buttons
// 2. Correct the inability to style clickable types in iOS and Safari.
@@ -598,7 +582,6 @@ summary {
cursor: pointer;
}
// Progress
//
// Add the correct vertical alignment in Chrome, Firefox, and Opera.
@@ -607,7 +590,6 @@ progress {
vertical-align: baseline;
}
// Hidden attribute
//
// Always hide an element with the `hidden` HTML attribute.
core/scss/bootstrap/_root.scss
+5 -3
View File
@@ -1,8 +1,10 @@
@use "sass:meta";
@use 'sass:meta';
@use '../config' as *;
:root,
[data-bs-theme="light"],
[data-theme="light"] {
[data-bs-theme='light'],
[data-theme='light'] {
// Note: Custom variable values only support SassScript inside `#{}`.
// Colors
core/scss/bootstrap/_spinners.scss
+5 -1
View File
@@ -2,6 +2,8 @@
// Rotating border
//
@use '../config' as *;
.spinner-grow,
.spinner-border {
display: inline-block;
@@ -16,7 +18,9 @@
// scss-docs-start spinner-border-keyframes
@keyframes spinner-border {
to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
to {
transform: rotate(360deg) #{'/* rtl:ignore */'};
}
}
// scss-docs-end spinner-border-keyframes
core/scss/bootstrap/_tables.scss
+3 -4
View File
@@ -1,9 +1,11 @@
@use "sass:map";
@use 'sass:map';
//
// Basic Bootstrap table
//
@use '../config' as *;
.table {
// Reset needed for nesting tables
--#{$prefix}table-color-type: initial;
@@ -62,7 +64,6 @@
caption-side: top;
}
//
// Condensed table w/ half padding
//
@@ -74,7 +75,6 @@
}
}
// Border versions
//
// Add or remove borders all around the table and between all the columns.
@@ -146,7 +146,6 @@
}
}
// Table variants
//
// Table variants set the table cell backgrounds, border colors
core/scss/bootstrap/_toasts.scss
+3 -1
View File
@@ -1,3 +1,5 @@
@use '../config' as *;
.toast {
// scss-docs-start toast-css-vars
--#{$prefix}toast-zindex: #{$zindex-toast};
@@ -62,7 +64,7 @@
@include border-top-radius(calc(var(--#{$prefix}toast-border-radius) - var(--#{$prefix}toast-border-width)));
.btn-close {
margin-right: calc(-.5 * var(--#{$prefix}toast-padding-x)); // stylelint-disable-line function-disallowed-list
margin-right: calc(-0.5 * var(--#{$prefix}toast-padding-x)); // stylelint-disable-line function-disallowed-list
margin-left: var(--#{$prefix}toast-padding-x);
}
}
core/scss/bootstrap/_tooltip.scss
+15 -11
View File
@@ -1,4 +1,6 @@
// Base class
@use '../config' as *;
.tooltip {
// scss-docs-start tooltip-css-vars
--#{$prefix}tooltip-zindex: #{$zindex-tooltip};
@@ -18,7 +20,7 @@
z-index: var(--#{$prefix}tooltip-zindex);
display: block;
margin: var(--#{$prefix}tooltip-margin);
@include deprecate("`$tooltip-margin`", "v5", "v5.x", true);
@include deprecate('`$tooltip-margin`', 'v5', 'v5.x', true);
// Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
// So reset our font and text properties to avoid inheriting weird values.
@include reset-text();
@@ -27,7 +29,9 @@
word-wrap: break-word;
opacity: 0;
&.show { opacity: var(--#{$prefix}tooltip-opacity); }
&.show {
opacity: var(--#{$prefix}tooltip-opacity);
}
.tooltip-arrow {
display: block;
@@ -36,7 +40,7 @@
&::before {
position: absolute;
content: "";
content: '';
border-color: transparent;
border-style: solid;
}
@@ -48,7 +52,7 @@
&::before {
top: -1px;
border-width: var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
border-width: var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * 0.5) 0; // stylelint-disable-line function-disallowed-list
border-top-color: var(--#{$prefix}tooltip-bg);
}
}
@@ -61,7 +65,7 @@
&::before {
right: -1px;
border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
border-width: calc(var(--#{$prefix}tooltip-arrow-width) * 0.5) var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * 0.5) 0; // stylelint-disable-line function-disallowed-list
border-right-color: var(--#{$prefix}tooltip-bg);
}
}
@@ -73,7 +77,7 @@
&::before {
bottom: -1px;
border-width: 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list
border-width: 0 calc(var(--#{$prefix}tooltip-arrow-width) * 0.5) var(--#{$prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list
border-bottom-color: var(--#{$prefix}tooltip-bg);
}
}
@@ -86,7 +90,7 @@
&::before {
left: -1px;
border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list
border-width: calc(var(--#{$prefix}tooltip-arrow-width) * 0.5) 0 calc(var(--#{$prefix}tooltip-arrow-width) * 0.5) var(--#{$prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list
border-left-color: var(--#{$prefix}tooltip-bg);
}
}
@@ -94,16 +98,16 @@
/* rtl:end:ignore */
.bs-tooltip-auto {
&[data-popper-placement^="top"] {
&[data-popper-placement^='top'] {
@extend .bs-tooltip-top;
}
&[data-popper-placement^="right"] {
&[data-popper-placement^='right'] {
@extend .bs-tooltip-end;
}
&[data-popper-placement^="bottom"] {
&[data-popper-placement^='bottom'] {
@extend .bs-tooltip-bottom;
}
&[data-popper-placement^="left"] {
&[data-popper-placement^='left'] {
@extend .bs-tooltip-start;
}
}
core/scss/bootstrap/_transitions.scss
+2
View File
@@ -1,3 +1,5 @@
@use '../config' as *;
.fade {
@include transition($transition-fade);
core/scss/bootstrap/_type.scss
+7 -32
View File
@@ -1,30 +1,11 @@
//
// Headings
//
.h1 {
@extend h1;
}
.h2 {
@extend h2;
}
.h3 {
@extend h3;
}
.h4 {
@extend h4;
}
.h5 {
@extend h5;
}
.h6 {
@extend h6;
}
@use '../config' as *;
// The `.h1`–`.h6` heading helpers live in `_extends.scss` — they extend the
// `h1`–`h6` element selectors across all modules, which with the module
// system requires the whole core to be upstream.
.lead {
@include font-size($lead-font-size);
@@ -45,13 +26,8 @@
//
// Emphasis
//
.small {
@extend small;
}
.mark {
@extend mark;
}
// The `.small` and `.mark` helpers live in `_extends.scss` (see the heading
// helpers note above).
//
// Lists
@@ -73,7 +49,6 @@
}
}
//
// Misc
//
@@ -101,6 +76,6 @@
color: $blockquote-footer-color;
&::before {
content: "\2014\00A0"; // em dash, nbsp
content: '\2014\00A0'; // em dash, nbsp
}
}
core/scss/bootstrap/forms/_floating-labels.scss
+6 -3
View File
@@ -1,3 +1,5 @@
@use '../../config' as *;
.form-floating {
position: relative;
@@ -72,10 +74,10 @@
> textarea:not(:placeholder-shown) {
~ label::after {
position: absolute;
inset: $form-floating-padding-y ($form-floating-padding-x * .5);
inset: $form-floating-padding-y ($form-floating-padding-x * 0.5);
z-index: -1;
height: $form-floating-label-height;
content: "";
content: '';
background-color: $input-bg;
@include border-radius($input-border-radius);
}
@@ -91,7 +93,8 @@
}
> :disabled ~ label,
> .form-control:disabled ~ label { // Required for `.form-control`s because of specificity
> .form-control:disabled ~ label {
// Required for `.form-control`s because of specificity
color: $form-floating-label-disabled-color;
}
}
core/scss/bootstrap/forms/_form-check.scss
+8 -6
View File
@@ -2,6 +2,8 @@
// Check/radio
//
@use '../../config' as *;
.form-check {
display: block;
min-height: $form-check-min-height;
@@ -32,7 +34,7 @@
flex-shrink: 0;
width: $form-check-input-width;
height: $form-check-input-width;
margin-top: ($line-height-base - $form-check-input-width) * .5; // line-height minus check height
margin-top: ($line-height-base - $form-check-input-width) * 0.5; // line-height minus check height
vertical-align: top;
appearance: none;
background-color: var(--#{$prefix}form-check-bg);
@@ -44,11 +46,11 @@
print-color-adjust: exact; // Keep themed appearance for print
@include transition($form-check-transition);
&[type="checkbox"] {
&[type='checkbox'] {
@include border-radius($form-check-input-border-radius);
}
&[type="radio"] {
&[type='radio'] {
// stylelint-disable-next-line property-disallowed-list
border-radius: $form-check-radio-border-radius;
}
@@ -67,7 +69,7 @@
background-color: $form-check-input-checked-bg-color;
border-color: $form-check-input-checked-border-color;
&[type="checkbox"] {
&[type='checkbox'] {
@if $enable-gradients {
--#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-checked-bg-image)}, var(--#{$prefix}gradient);
} @else {
@@ -75,7 +77,7 @@
}
}
&[type="radio"] {
&[type='radio'] {
@if $enable-gradients {
--#{$prefix}form-check-bg-image: #{escape-svg($form-check-radio-checked-bg-image)}, var(--#{$prefix}gradient);
} @else {
@@ -84,7 +86,7 @@
}
}
&[type="checkbox"]:indeterminate {
&[type='checkbox']:indeterminate {
background-color: $form-check-input-indeterminate-bg-color;
border-color: $form-check-input-indeterminate-border-color;
core/scss/bootstrap/forms/_form-control.scss
+11 -5
View File
@@ -1,9 +1,11 @@
@use "sass:math";
@use 'sass:math';
//
// General form controls (plus a few specific high-level interventions)
//
@use '../../config' as *;
.form-control {
display: block;
width: 100%;
@@ -24,7 +26,7 @@
@include box-shadow($input-box-shadow);
@include transition($input-transition);
&[type="file"] {
&[type='file'] {
overflow: hidden; // prevent pseudo element button overlap
&:not(:disabled):not([readonly]) {
@@ -58,7 +60,7 @@
// https://github.com/twbs/bootstrap/issues/23307
// TODO: we can remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=198959 is resolved
// Multiply line-height by 1em if it has no unit
height: if(sass(math.unit($input-line-height) == ""): $input-line-height * 1em; else: $input-line-height);
height: if(sass(math.unit($input-line-height) == ''): $input-line-height * 1em; else: $input-line-height);
// Android Chrome type="date" is taller than the other inputs
// because of "margin: 1px 24px 1px 4px" inside the shadow DOM
@@ -211,6 +213,10 @@ textarea {
@include border-radius($input-border-radius);
}
&.form-control-sm { height: $input-height-sm; }
&.form-control-lg { height: $input-height-lg; }
&.form-control-sm {
height: $input-height-sm;
}
&.form-control-lg {
height: $input-height-lg;
}
}
core/scss/bootstrap/forms/_form-range.scss
+9 -3
View File
@@ -4,6 +4,8 @@
// elements cannot be mixed. As such, there are no shared styles for focus or
// active states on prefixed selectors.
@use '../../config' as *;
.form-range {
width: 100%;
height: add($form-range-thumb-height, $form-range-thumb-focus-box-shadow-width * 2);
@@ -16,8 +18,12 @@
// Pseudo-elements must be split across multiple rulesets to have an effect.
// No box-shadow() mixin for focus accessibility.
&::-webkit-slider-thumb { box-shadow: $form-range-thumb-focus-box-shadow; }
&::-moz-range-thumb { box-shadow: $form-range-thumb-focus-box-shadow; }
&::-webkit-slider-thumb {
box-shadow: $form-range-thumb-focus-box-shadow;
}
&::-moz-range-thumb {
box-shadow: $form-range-thumb-focus-box-shadow;
}
}
&::-moz-focus-outer {
@@ -27,7 +33,7 @@
&::-webkit-slider-thumb {
width: $form-range-thumb-width;
height: $form-range-thumb-height;
margin-top: ($form-range-track-height - $form-range-thumb-height) * .5; // Webkit specific
margin-top: ($form-range-track-height - $form-range-thumb-height) * 0.5; // Webkit specific
appearance: none;
@include gradient-bg($form-range-thumb-bg);
border: $form-range-thumb-border;
core/scss/bootstrap/forms/_form-select.scss
+3 -1
View File
@@ -3,6 +3,8 @@
// Replaces the browser default select with a custom one, mostly pulled from
// https://primer.github.io/.
@use '../../config' as *;
.form-select {
--#{$prefix}form-select-bg-img: #{escape-svg($form-select-indicator)};
@@ -37,7 +39,7 @@
}
&[multiple],
&[size]:not([size="1"]) {
&[size]:not([size='1']) {
padding-right: $form-select-padding-x;
background-image: none;
}
core/scss/bootstrap/forms/_form-text.scss
+2
View File
@@ -2,6 +2,8 @@
// Form text
//
@use '../../config' as *;
.form-text {
margin-top: $form-text-margin-top;
@include font-size($form-text-font-size);
core/scss/bootstrap/forms/_input-group.scss
+6 -7
View File
@@ -1,10 +1,12 @@
@use "sass:map";
@use "sass:string";
@use 'sass:map';
@use 'sass:string';
//
// Base styles
//
@use '../../config' as *;
.input-group {
position: relative;
display: flex;
@@ -41,7 +43,6 @@
}
}
// Textual addons
//
// Serves as a catch-all element for any text or radio/checkbox input you wish
@@ -62,7 +63,6 @@
@include border-radius($input-border-radius);
}
// Sizing
//
// Remix the default form control sizing classes into new ones for easier
@@ -91,7 +91,6 @@
padding-right: $form-select-padding-x + $form-select-indicator-padding;
}
// Rounded corners
//
// These rulesets must come after the sizing ones to properly override sm and lg
@@ -118,9 +117,9 @@
}
}
$validation-messages: "";
$validation-messages: '';
@each $state in map.keys($form-validation-states) {
$validation-messages: $validation-messages + ":not(." + string.unquote($state) + "-tooltip)" + ":not(." + string.unquote($state) + "-feedback)";
$validation-messages: $validation-messages + ':not(.' + string.unquote($state) + '-tooltip)' + ':not(.' + string.unquote($state) + '-feedback)';
}
> :not(:first-child):not(.dropdown-menu)#{$validation-messages} {
core/scss/bootstrap/forms/_labels.scss
+2
View File
@@ -2,6 +2,8 @@
// Labels
//
@use '../../config' as *;
.form-label {
margin-bottom: $form-label-margin-bottom;
@include font-size($form-label-font-size);
core/scss/bootstrap/forms/_validation.scss
+2
View File
@@ -6,6 +6,8 @@
// server-side validation.
// scss-docs-start form-validation-states-loop
@use '../../config' as *;
@each $state, $data in $form-validation-states {
@include form-validation-state($state, $data...);
}
core/scss/bootstrap/utilities/_api.scss
+3 -49
View File
@@ -1,50 +1,4 @@
@use "sass:map";
@use "sass:meta";
@use '../../config' as *;
@use '../../mixins/utilities-api' as *;
// Loop over each breakpoint
@each $breakpoint in map.keys($grid-breakpoints) {
// Generate media query if needed
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
// Loop over each utility property
@each $key, $utility in $utilities {
// The utility can be disabled with `false`, thus check if the utility is a map first
// Only proceed if responsive media queries are enabled or if it's the base media query
@if meta.type-of($utility) == "map" and (map.get($utility, responsive) or $infix == "") {
@include generate-utility($utility, $infix);
}
}
}
}
// RFS rescaling
@media (min-width: $rfs-mq-value) {
@each $breakpoint in map.keys($grid-breakpoints) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
@if (map.get($grid-breakpoints, $breakpoint) < $rfs-breakpoint) {
// Loop over each utility property
@each $key, $utility in $utilities {
// The utility can be disabled with `false`, thus check if the utility is a map first
// Only proceed if responsive media queries are enabled or if it's the base media query
@if meta.type-of($utility) == "map" and map.get($utility, rfs) and (map.get($utility, responsive) or $infix == "") {
@include generate-utility($utility, $infix, true);
}
}
}
}
}
// Print utilities
@media print {
@each $key, $utility in $utilities {
// The utility can be disabled with `false`, thus check if the utility is a map first
// Then check if the utility needs print styles
@if meta.type-of($utility) == "map" and map.get($utility, print) == true {
@include generate-utility($utility, "-print");
}
}
}
@include utilities-api($utilities);
core/scss/fonts/_geist.scss
+2
View File
@@ -1,4 +1,6 @@
// Geist Sans Font Family
@use '../config' as *;
@font-face {
font-family: 'Geist';
src:
core/scss/fonts/_webfonts.scss
+2
View File
@@ -1,3 +1,5 @@
@use '../config' as *;
@if $font-google {
$google-font-url: 'https://fonts.googleapis.com/css2?family=' + str-replace($font-google, ' ', '+') + ':wght@300;400;500;600;700&display=swap' !default;
@import url($google-font-url);
core/scss/helpers/_index.scss
+2
View File
@@ -3,6 +3,8 @@
//
// Clearfix
//
@use '../config' as *;
.clearfix {
@include clearfix();
}
core/scss/layout/_animations.scss
+2
View File
@@ -1,3 +1,5 @@
@use '../config' as *;
@keyframes pulse {
0% {
transform: scale(1);
core/scss/layout/_core.scss
+2
View File
@@ -1,5 +1,7 @@
@use 'sass:map';
@use '../config' as *;
html {
scrollbar-gutter: stable;
core/scss/layout/_dark.scss
+5 -4
View File
@@ -2,6 +2,8 @@
// stylelint-disable declaration-no-important
@use '../config' as *;
@if $enable-dark-mode {
:root {
&:not(.theme-dark):not([data-bs-theme='dark'], [data-theme='dark']) {
@@ -64,8 +66,7 @@
}
}
body[data-bs-theme='dark'] [data-bs-theme='light'],
body[data-theme='dark'] [data-theme='light'] {
@extend [data-bs-theme='dark'];
}
// The global `@extend [data-bs-theme='dark']` for light-scoped subtrees
// inside a dark body lives in `_extends.scss` — with the module system it
// must have every dark-styling module upstream.
}
core/scss/layout/_footer.scss
+2
View File
@@ -1,3 +1,5 @@
@use '../config' as *;
.footer {
border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $footer-border-color;
background-color: $footer-bg;
core/scss/layout/_navbar.scss
+2
View File
@@ -1,5 +1,7 @@
@use 'sass:map';
@use '../config' as *;
@mixin navbar-vertical-nav {
.navbar-collapse {
flex-direction: column;
core/scss/layout/_page.scss
+2
View File
@@ -1,3 +1,5 @@
@use '../config' as *;
.page {
display: flex;
flex-direction: column;
core/scss/layout/_root.scss
+2
View File
@@ -1,3 +1,5 @@
@use '../config' as *;
:root,
:host {
font-size: 16px;
core/scss/marketing/_browser.scss
+2
View File
@@ -1,6 +1,8 @@
//
// Browser
//
@use '../config' as *;
.browser {
@include border-radius(var(--#{$prefix}border-radius-lg));
box-shadow: 0 0 0 1px var(--#{$prefix}border-color);
core/scss/marketing/_core.scss
+2
View File
@@ -1,3 +1,5 @@
@use '../config' as *;
.body-marketing {
--#{$prefix}body-font-size: 1rem;
--#{$prefix}body-line-height: 1.75;
core/scss/marketing/_filters.scss
+1
View File
@@ -0,0 +1 @@
@use '../config' as *;
core/scss/marketing/_hero.scss
+2
View File
@@ -1,6 +1,8 @@
//
// Hero
//
@use '../config' as *;
.hero {
text-align: center;
padding: 6.5rem 0;
core/scss/marketing/_pricing.scss
+2
View File
@@ -1,3 +1,5 @@
@use '../config' as *;
$pricing-card-width: 22rem;
.pricing {
core/scss/marketing/_sections.scss
+2
View File
@@ -1,3 +1,5 @@
@use '../config' as *;
@keyframes move-forever1 {
0% {
transform: translate(85px, 0%);
core/scss/marketing/_shape.scss
+2
View File
@@ -1,5 +1,7 @@
@use 'sass:map';
@use '../config' as *;
.shape {
--#{$prefix}shape-size: #{$avatar-size};
--#{$prefix}shape-icon-size: #{$avatar-icon-size};
core/scss/mixins/_utilities-api.scss
+57
View File
@@ -0,0 +1,57 @@
@use 'sass:map';
@use 'sass:meta';
// Not forwarded by `_mixins.scss` on purpose: this file uses `config`, so
// forwarding it there would create a circular module load.
@use '../config' as *;
// Emits the whole utilities API (responsive, RFS and print variants) for a
// given `$utilities` map. Parameterized so that bundles with their own map
// (e.g. tabler-marketing) can reuse the loops — with the module system a
// bundle can no longer swap the global `$utilities` before loading the API.
@mixin utilities-api($utilities) {
// Loop over each breakpoint
@each $breakpoint in map.keys($grid-breakpoints) {
// Generate media query if needed
@include media-breakpoint-up($breakpoint) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
// Loop over each utility property
@each $key, $utility in $utilities {
// The utility can be disabled with `false`, thus check if the utility is a map first
// Only proceed if responsive media queries are enabled or if it's the base media query
@if meta.type-of($utility) == 'map' and (map.get($utility, responsive) or $infix == '') {
@include generate-utility($utility, $infix);
}
}
}
}
// RFS rescaling
@media (min-width: $rfs-mq-value) {
@each $breakpoint in map.keys($grid-breakpoints) {
$infix: breakpoint-infix($breakpoint, $grid-breakpoints);
@if (map.get($grid-breakpoints, $breakpoint) < $rfs-breakpoint) {
// Loop over each utility property
@each $key, $utility in $utilities {
// The utility can be disabled with `false`, thus check if the utility is a map first
// Only proceed if responsive media queries are enabled or if it's the base media query
@if meta.type-of($utility) == 'map' and map.get($utility, rfs) and (map.get($utility, responsive) or $infix == '') {
@include generate-utility($utility, $infix, true);
}
}
}
}
}
// Print utilities
@media print {
@each $key, $utility in $utilities {
// The utility can be disabled with `false`, thus check if the utility is a map first
// Then check if the utility needs print styles
@if meta.type-of($utility) == 'map' and map.get($utility, print) == true {
@include generate-utility($utility, '-print');
}
}
}
}
core/scss/tabler-marketing.scss
+14 -10
View File
@@ -1,12 +1,16 @@
@import 'config';
@import 'utilities-marketing';
@forward 'config';
@import 'marketing/core';
@import 'marketing/hero';
@import 'marketing/browser';
@import 'marketing/sections';
@import 'marketing/filters';
@import 'marketing/pricing';
@import 'marketing/shape';
@forward 'marketing/core';
@forward 'marketing/hero';
@forward 'marketing/browser';
@forward 'marketing/sections';
@forward 'marketing/filters';
@forward 'marketing/pricing';
@forward 'marketing/shape';
@import 'bootstrap/utilities/api';
// This bundle uses its own utilities map instead of the global one, so the
// utilities API is emitted via the parameterized mixin (last, as before).
@use 'utilities-marketing' as um;
@use 'mixins/utilities-api' as *;
@include utilities-api(um.$marketing-utilities);
core/scss/tabler-vendors.scss
+15 -15
View File
@@ -1,16 +1,16 @@
@import 'config';
@forward 'config';
@import 'vendor/nouislider';
@import 'vendor/litepicker';
@import 'vendor/tom-select';
@import 'vendor/apexcharts';
@import 'vendor/jsvectormap';
@import 'vendor/dropzone';
@import 'vendor/fslightbox';
@import 'vendor/plyr';
@import 'vendor/wysiwyg';
@import 'vendor/stars-rating';
@import 'vendor/coloris';
@import 'vendor/typed';
@import 'vendor/turbo';
@import 'vendor/fullcalendar';
@forward 'vendor/nouislider';
@forward 'vendor/litepicker';
@forward 'vendor/tom-select';
@forward 'vendor/apexcharts';
@forward 'vendor/jsvectormap';
@forward 'vendor/dropzone';
@forward 'vendor/fslightbox';
@forward 'vendor/plyr';
@forward 'vendor/wysiwyg';
@forward 'vendor/stars-rating';
@forward 'vendor/coloris';
@forward 'vendor/typed';
@forward 'vendor/turbo';
@forward 'vendor/fullcalendar';
core/scss/tabler.scss
+3 -1
View File
@@ -1 +1,3 @@
@import 'core';
@forward 'core';
// Cross-module `@extend` rules — must load last, see the note in `_extends.scss`.
@forward 'extends';
core/scss/ui/_accordion.scss
+2
View File
@@ -1,3 +1,5 @@
@use '../config' as *;
.accordion {
--#{$prefix}accordion-color: var(--#{$prefix}body-color);
--#{$prefix}accordion-border-color: var(--#{$prefix}border-color);
core/scss/ui/_alerts.scss
+2
View File
@@ -1,3 +1,5 @@
@use '../config' as *;
.alert {
--#{$prefix}alert-variant-color: var(--#{$prefix}body-color);
--#{$prefix}alert-color: var(--#{$prefix}alert-variant-color);
core/scss/ui/_avatars.scss
+2
View File
@@ -1,5 +1,7 @@
@use 'sass:map';
@use '../config' as *;
.avatar {
--#{$prefix}avatar-size: var(--#{$prefix}avatar-list-size, #{$avatar-size});
--#{$prefix}avatar-status-size: #{$avatar-status-size};
core/scss/ui/_badges.scss
+2
View File
@@ -1,3 +1,5 @@
@use '../config' as *;
.badge {
--#{$prefix}badge-padding-x: #{$badge-padding-x};
--#{$prefix}badge-padding-y: #{$badge-padding-y};
core/scss/ui/_breadcrumbs.scss
+3 -1
View File
@@ -1,4 +1,6 @@
@use "sass:string";
@use 'sass:string';
@use '../config' as *;
.breadcrumb {
--#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x};
core/scss/ui/_button-group.scss
+2
View File
@@ -1,3 +1,5 @@
@use '../config' as *;
.btn-group,
.btn-group-vertical {
box-shadow: $input-box-shadow;
core/scss/ui/_buttons.scss
+2
View File
@@ -4,6 +4,8 @@
//
// Button
//
@use '../config' as *;
.btn {
--#{$prefix}btn-icon-size: #{$input-btn-icon-size};
--#{$prefix}btn-icon-color: inherit;
core/scss/ui/_calendars.scss
+2
View File
@@ -1,3 +1,5 @@
@use '../config' as *;
.calendar {
display: block;
font-size: $font-size-sm;
core/scss/ui/_cards.scss
+3 -1
View File
@@ -1,5 +1,7 @@
@use 'sass:map';
@use '../config' as *;
@property --tblr-card-gradient-direction {
syntax: '<angle>';
inherits: true;
@@ -654,7 +656,7 @@ Card list group
border-end-start-radius: var(--#{$prefix}card-border-radius);
border-start-start-radius: 0 !important;
}
.tab-content:has(+ .nav-tabs) .card {
border-start-start-radius: var(--#{$prefix}card-border-radius);
border-end-start-radius: 0 !important;
core/scss/ui/_carousel.scss
+2
View File
@@ -1,3 +1,5 @@
@use '../config' as *;
.carousel {
}
core/scss/ui/_charts.scss
+2
View File
@@ -1,3 +1,5 @@
@use '../config' as *;
.chart {
display: block;
min-height: 10rem;
core/scss/ui/_chat.scss
+2
View File
@@ -1,3 +1,5 @@
@use '../config' as *;
.chat {
}
core/scss/ui/_chips.scss
+1
View File
@@ -0,0 +1 @@
@use '../config' as *;
core/scss/ui/_close.scss
+2
View File
@@ -1,3 +1,5 @@
@use '../config' as *;
.btn-close {
--#{$prefix}btn-close-color: currentColor;
--#{$prefix}btn-close-bg: #{escape-svg($btn-close-bg)};
core/scss/ui/_datagrid.scss
+2
View File
@@ -2,6 +2,8 @@
// Base styles
//
@use '../config' as *;
.datagrid {
--#{$prefix}datagrid-padding: #{$datagrid-padding};
--#{$prefix}datagrid-item-width: #{$datagrid-item-width};
core/scss/ui/_dropdowns.scss
+2
View File
@@ -1,3 +1,5 @@
@use '../config' as *;
.dropdown-menu {
--#{$prefix}dropdown-item-gap: 0.5rem;
--#{$prefix}dropdown-item-icon-size: #{$icon-size};
core/scss/ui/_empty.scss
+2
View File
@@ -1,3 +1,5 @@
@use '../config' as *;
.empty {
display: flex;
flex-direction: column;
core/scss/ui/_flags.scss
+1
View File
@@ -1,6 +1,7 @@
@use 'sass:map';
@use '../config';
@use '../config' as *;
.flag {
position: relative;
core/scss/ui/_forms.scss
+2
View File
@@ -1,3 +1,5 @@
@use '../config' as *;
textarea {
&[cols] {
height: auto;
core/scss/ui/_grid.scss
+2
View File
@@ -1,5 +1,7 @@
@use 'sass:map';
@use '../config' as *;
.row > * {
min-width: 0;
}
core/scss/ui/_icons.scss
+2
View File
@@ -1,6 +1,8 @@
//
// Icon component
//
@use '../config' as *;
.icon {
--#{$prefix}icon-size: #{$font-size-base * $line-height-base};
width: var(--#{$prefix}icon-size);
core/scss/ui/_images.scss
+2
View File
@@ -1,5 +1,7 @@
@use 'sass:math';
@use '../config' as *;
.img-responsive {
--#{$prefix}img-responsive-ratio: #{math.percentage(0.75)};
background: no-repeat center/cover;
core/scss/ui/_legend.scss
+2
View File
@@ -1,6 +1,8 @@
/**
Legend
*/
@use '../config' as *;
.legend {
--#{$prefix}legend-size: #{$legend-size};
display: inline-block;
core/scss/ui/_lists.scss
+2
View File
@@ -1,3 +1,5 @@
@use '../config' as *;
.list-group {
margin-inline-start: 0;
margin-inline-end: 0;
core/scss/ui/_loaders.scss
+2
View File
@@ -1,3 +1,5 @@
@use '../config' as *;
.loader {
position: relative;
display: block;
core/scss/ui/_login.scss
+1
View File
@@ -1,3 +1,4 @@
//.col-login {
// max-width: 24rem;
//}
@use '../config' as *;
core/scss/ui/_markdown.scss
+4 -1
View File
@@ -1,3 +1,5 @@
@use '../config' as *;
$markdown-font-size: var(--#{$prefix}font-size-h3) !default;
$markdown-line-height: var(--#{$prefix}line-height-lg) !default;
@@ -45,8 +47,9 @@ Prose (formerly markdown)
}
> table {
// The `@extend .table, .table-bordered, .table-sm` part lives in
// `_extends.scss` — its targets span modules loaded after this one.
font-size: var(--#{$prefix}body-font-size);
@extend .table, .table-bordered, .table-sm;
}
> blockquote {
core/scss/ui/_modals.scss
+2
View File
@@ -1,3 +1,5 @@
@use '../config' as *;
.modal-content,
.modal-header {
> .btn-close {
core/scss/ui/_nav.scss
+2
View File
@@ -1,3 +1,5 @@
@use '../config' as *;
.nav {
--#{$prefix}nav-link-hover-bg: #{color-transparent(var(--#{$prefix}nav-link-color), 0.04)};
}
core/scss/ui/_offcanvas.scss
+2
View File
@@ -1,3 +1,5 @@
@use '../config' as *;
.offcanvas {
@include media-print {
display: none;
core/scss/ui/_pagination.scss
+2
View File
@@ -1,3 +1,5 @@
@use '../config' as *;
.pagination {
margin: 0;
--#{$prefix}pagination-gap: 0.25rem;
core/scss/ui/_patterns.scss
+173 -183
View File
@@ -1,240 +1,230 @@
@use '../config' as *;
.bg-pattern-diagonal {
--#{$prefix}pattern-color: var(--#{$prefix}body-color);
--#{$prefix}pattern-size: .5rem;
--#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
--#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
background-image: repeating-linear-gradient(-45deg, var(--#{$prefix}pattern-fill) 0 1px, transparent 0 50%);
background-clip: padding-box;
background-size: var(--#{$prefix}pattern-size) var(--#{$prefix}pattern-size);
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
--#{$prefix}pattern-color: var(--#{$prefix}body-color);
--#{$prefix}pattern-size: 0.5rem;
--#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
--#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
background-image: repeating-linear-gradient(-45deg, var(--#{$prefix}pattern-fill) 0 1px, transparent 0 50%);
background-clip: padding-box;
background-size: var(--#{$prefix}pattern-size) var(--#{$prefix}pattern-size);
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
}
.bg-pattern-diagonal-2 {
--#{$prefix}pattern-color: var(--#{$prefix}body-color);
--#{$prefix}pattern-size: .5rem;
--#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
--#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
background-image: repeating-linear-gradient(45deg, var(--#{$prefix}pattern-fill) 0 1px, transparent 0 50%);
background-clip: padding-box;
background-size: var(--#{$prefix}pattern-size) var(--#{$prefix}pattern-size);
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
--#{$prefix}pattern-color: var(--#{$prefix}body-color);
--#{$prefix}pattern-size: 0.5rem;
--#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
--#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
background-image: repeating-linear-gradient(45deg, var(--#{$prefix}pattern-fill) 0 1px, transparent 0 50%);
background-clip: padding-box;
background-size: var(--#{$prefix}pattern-size) var(--#{$prefix}pattern-size);
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
}
.bg-pattern-dots {
--#{$prefix}pattern-color: var(--#{$prefix}body-color);
--#{$prefix}pattern-size: 5px;
--#{$prefix}pattern-dot: .5px;
--#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 20%, transparent);
--#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
background-image: radial-gradient(circle, var(--#{$prefix}pattern-fill) var(--#{$prefix}pattern-dot), transparent var(--#{$prefix}pattern-dot)),
radial-gradient(circle, var(--#{$prefix}pattern-fill) var(--#{$prefix}pattern-dot), transparent var(--#{$prefix}pattern-dot));
background-position: 0 0,
calc(var(--#{$prefix}pattern-size) / 2) calc(var(--#{$prefix}pattern-size) / 2);
background-size: var(--#{$prefix}pattern-size) var(--#{$prefix}pattern-size);
background-clip: padding-box;
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
--#{$prefix}pattern-color: var(--#{$prefix}body-color);
--#{$prefix}pattern-size: 5px;
--#{$prefix}pattern-dot: 0.5px;
--#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 20%, transparent);
--#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
background-image: radial-gradient(circle, var(--#{$prefix}pattern-fill) var(--#{$prefix}pattern-dot), transparent var(--#{$prefix}pattern-dot)), radial-gradient(circle, var(--#{$prefix}pattern-fill) var(--#{$prefix}pattern-dot), transparent var(--#{$prefix}pattern-dot));
background-position:
0 0,
calc(var(--#{$prefix}pattern-size) / 2) calc(var(--#{$prefix}pattern-size) / 2);
background-size: var(--#{$prefix}pattern-size) var(--#{$prefix}pattern-size);
background-clip: padding-box;
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
}
.bg-pattern-rectangles {
--#{$prefix}pattern-color: var(--#{$prefix}body-color);
--#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 3%, transparent);
--#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
--#{$prefix}pattern-size: .5rem;
background-image: repeating-linear-gradient(45deg, var(--#{$prefix}pattern-fill) 25%, transparent 25%, transparent 75%, var(--#{$prefix}pattern-fill) 75%, var(--#{$prefix}pattern-fill)),
repeating-linear-gradient(45deg, var(--#{$prefix}pattern-fill) 25%, transparent 25%, transparent 75%, var(--#{$prefix}pattern-fill) 75%, var(--#{$prefix}pattern-fill));
background-position: -1px -1px,
calc(var(--#{$prefix}pattern-size) - 1px) calc(var(--#{$prefix}pattern-size) - 1px);
background-size: calc(var(--#{$prefix}pattern-size) * 2) calc(var(--#{$prefix}pattern-size) * 2);
background-clip: padding-box;
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
--#{$prefix}pattern-color: var(--#{$prefix}body-color);
--#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 3%, transparent);
--#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
--#{$prefix}pattern-size: 0.5rem;
background-image:
repeating-linear-gradient(45deg, var(--#{$prefix}pattern-fill) 25%, transparent 25%, transparent 75%, var(--#{$prefix}pattern-fill) 75%, var(--#{$prefix}pattern-fill)),
repeating-linear-gradient(45deg, var(--#{$prefix}pattern-fill) 25%, transparent 25%, transparent 75%, var(--#{$prefix}pattern-fill) 75%, var(--#{$prefix}pattern-fill));
background-position:
-1px -1px,
calc(var(--#{$prefix}pattern-size) - 1px) calc(var(--#{$prefix}pattern-size) - 1px);
background-size: calc(var(--#{$prefix}pattern-size) * 2) calc(var(--#{$prefix}pattern-size) * 2);
background-clip: padding-box;
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
}
.bg-pattern-lines {
--#{$prefix}pattern-color: var(--#{$prefix}body-color);
--#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 6%, transparent);
--#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
--#{$prefix}pattern-size: .5rem;
background-size: var(--#{$prefix}pattern-size) var(--#{$prefix}pattern-size);
background-image: repeating-linear-gradient(0deg, var(--#{$prefix}pattern-fill), var(--#{$prefix}pattern-fill) 1px, transparent 1px, transparent);
background-position: -1px -1px;
background-clip: padding-box;
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
--#{$prefix}pattern-color: var(--#{$prefix}body-color);
--#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 6%, transparent);
--#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
--#{$prefix}pattern-size: 0.5rem;
background-size: var(--#{$prefix}pattern-size) var(--#{$prefix}pattern-size);
background-image: repeating-linear-gradient(0deg, var(--#{$prefix}pattern-fill), var(--#{$prefix}pattern-fill) 1px, transparent 1px, transparent);
background-position: -1px -1px;
background-clip: padding-box;
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
}
.bg-pattern-lines-vertical {
--#{$prefix}pattern-color: var(--#{$prefix}body-color);
--#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 6%, transparent);
--#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
--#{$prefix}pattern-size: .5rem;
background-size: var(--#{$prefix}pattern-size) var(--#{$prefix}pattern-size);
background-image: repeating-linear-gradient(90deg, var(--#{$prefix}pattern-fill), var(--#{$prefix}pattern-fill) 1px, transparent 1px, transparent);
background-position: -1px -1px;
background-clip: padding-box;
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
--#{$prefix}pattern-color: var(--#{$prefix}body-color);
--#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 6%, transparent);
--#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
--#{$prefix}pattern-size: 0.5rem;
background-size: var(--#{$prefix}pattern-size) var(--#{$prefix}pattern-size);
background-image: repeating-linear-gradient(90deg, var(--#{$prefix}pattern-fill), var(--#{$prefix}pattern-fill) 1px, transparent 1px, transparent);
background-position: -1px -1px;
background-clip: padding-box;
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
}
.bg-pattern-grid {
--#{$prefix}pattern-color: var(--#{$prefix}body-color);
--#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 6%, transparent);
--#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
--#{$prefix}pattern-size: .5rem;
background-image: linear-gradient(to right, var(--#{$prefix}pattern-fill) 1px, transparent 1px),
linear-gradient(to bottom, var(--#{$prefix}pattern-fill) 1px, transparent 1px);
background-size: calc(var(--#{$prefix}pattern-size) * 2) calc(var(--#{$prefix}pattern-size) * 2);
background-position: -1px -1px, -1px -1px;
background-clip: padding-box;
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
--#{$prefix}pattern-color: var(--#{$prefix}body-color);
--#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 6%, transparent);
--#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
--#{$prefix}pattern-size: 0.5rem;
background-image: linear-gradient(to right, var(--#{$prefix}pattern-fill) 1px, transparent 1px), linear-gradient(to bottom, var(--#{$prefix}pattern-fill) 1px, transparent 1px);
background-size: calc(var(--#{$prefix}pattern-size) * 2) calc(var(--#{$prefix}pattern-size) * 2);
background-position:
-1px -1px,
-1px -1px;
background-clip: padding-box;
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
}
.bg-pattern-grid-diagonal {
--#{$prefix}pattern-color: var(--#{$prefix}body-color);
--#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
--#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
--#{$prefix}pattern-size: .5rem;
background-image: linear-gradient(45deg, transparent 49%, var(--#{$prefix}pattern-fill) 49%, var(--#{$prefix}pattern-fill) 51%, transparent 51%),
linear-gradient(-45deg, transparent 49%, var(--#{$prefix}pattern-fill) 49%, var(--#{$prefix}pattern-fill) 51%, transparent 51%);
background-size: calc(var(--#{$prefix}pattern-size) * 2) calc(var(--#{$prefix}pattern-size) * 2);
background-position: center center;
background-clip: padding-box;
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
--#{$prefix}pattern-color: var(--#{$prefix}body-color);
--#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
--#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
--#{$prefix}pattern-size: 0.5rem;
background-image: linear-gradient(45deg, transparent 49%, var(--#{$prefix}pattern-fill) 49%, var(--#{$prefix}pattern-fill) 51%, transparent 51%), linear-gradient(-45deg, transparent 49%, var(--#{$prefix}pattern-fill) 49%, var(--#{$prefix}pattern-fill) 51%, transparent 51%);
background-size: calc(var(--#{$prefix}pattern-size) * 2) calc(var(--#{$prefix}pattern-size) * 2);
background-position: center center;
background-clip: padding-box;
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
}
.bg-pattern-blueprint {
--#{$prefix}pattern-color: var(--#{$prefix}body-color);
--#{$prefix}pattern-size: .5rem;
--#{$prefix}pattern-line: color-mix(in oklch, var(--#{$prefix}pattern-color) 6%, transparent);
--#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
background-image: linear-gradient(var(--#{$prefix}pattern-line) 2px, transparent 2px),
linear-gradient(90deg, var(--#{$prefix}pattern-line) 2px, transparent 2px),
linear-gradient(var(--#{$prefix}pattern-line) 1px, transparent 1px),
linear-gradient(90deg, var(--#{$prefix}pattern-line) 1px, transparent 1px);
background-size: calc(var(--#{$prefix}pattern-size) * 10) calc(var(--#{$prefix}pattern-size) * 10),
calc(var(--#{$prefix}pattern-size) * 10) calc(var(--#{$prefix}pattern-size) * 10),
calc(var(--#{$prefix}pattern-size) * 2) calc(var(--#{$prefix}pattern-size) * 2),
calc(var(--#{$prefix}pattern-size) * 2) calc(var(--#{$prefix}pattern-size) * 2);
background-position: -3px -3px, -3px -3px, -2px -2px, -2px -2px;
background-clip: padding-box;
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
--#{$prefix}pattern-color: var(--#{$prefix}body-color);
--#{$prefix}pattern-size: 0.5rem;
--#{$prefix}pattern-line: color-mix(in oklch, var(--#{$prefix}pattern-color) 6%, transparent);
--#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
background-image: linear-gradient(var(--#{$prefix}pattern-line) 2px, transparent 2px), linear-gradient(90deg, var(--#{$prefix}pattern-line) 2px, transparent 2px), linear-gradient(var(--#{$prefix}pattern-line) 1px, transparent 1px), linear-gradient(90deg, var(--#{$prefix}pattern-line) 1px, transparent 1px);
background-size:
calc(var(--#{$prefix}pattern-size) * 10) calc(var(--#{$prefix}pattern-size) * 10),
calc(var(--#{$prefix}pattern-size) * 10) calc(var(--#{$prefix}pattern-size) * 10),
calc(var(--#{$prefix}pattern-size) * 2) calc(var(--#{$prefix}pattern-size) * 2),
calc(var(--#{$prefix}pattern-size) * 2) calc(var(--#{$prefix}pattern-size) * 2);
background-position:
-3px -3px,
-3px -3px,
-2px -2px,
-2px -2px;
background-clip: padding-box;
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
}
.bg-pattern-cross-dots {
--#{$prefix}pattern-color: var(--#{$prefix}body-color);
--#{$prefix}pattern-size: .5rem;
--#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
--#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
background-image: radial-gradient(var(--#{$prefix}pattern-fill) 1px, transparent 1px),
radial-gradient(var(--#{$prefix}pattern-fill) 1px, transparent 1px);
background-size: calc(var(--#{$prefix}pattern-size) * 2) calc(var(--#{$prefix}pattern-size) * 2);
background-position: 0 0,
var(--#{$prefix}pattern-size) var(--#{$prefix}pattern-size);
background-clip: padding-box;
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
--#{$prefix}pattern-color: var(--#{$prefix}body-color);
--#{$prefix}pattern-size: 0.5rem;
--#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
--#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
background-image: radial-gradient(var(--#{$prefix}pattern-fill) 1px, transparent 1px), radial-gradient(var(--#{$prefix}pattern-fill) 1px, transparent 1px);
background-size: calc(var(--#{$prefix}pattern-size) * 2) calc(var(--#{$prefix}pattern-size) * 2);
background-position:
0 0,
var(--#{$prefix}pattern-size) var(--#{$prefix}pattern-size);
background-clip: padding-box;
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
}
.bg-pattern-circles {
--#{$prefix}pattern-color: var(--#{$prefix}body-color);
--#{$prefix}pattern-size: .5rem;
--#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
--#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
background-image: radial-gradient(circle at center top, transparent 9%, var(--#{$prefix}pattern-fill) 10%, var(--#{$prefix}pattern-fill) 15%, transparent 16%),
radial-gradient(circle at center bottom, transparent 9%, var(--#{$prefix}pattern-fill) 10%, var(--#{$prefix}pattern-fill) 15%, transparent 16%),
radial-gradient(circle at right center, transparent 9%, var(--#{$prefix}pattern-fill) 10%, var(--#{$prefix}pattern-fill) 15%, transparent 16%),
radial-gradient(circle at left center, transparent 9%, var(--#{$prefix}pattern-fill) 10%, var(--#{$prefix}pattern-fill) 15%, transparent 16%);
background-position: 0 0;
background-size: calc(var(--#{$prefix}pattern-size) * 3) calc(var(--#{$prefix}pattern-size) * 3);
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
--#{$prefix}pattern-color: var(--#{$prefix}body-color);
--#{$prefix}pattern-size: 0.5rem;
--#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
--#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
background-image:
radial-gradient(circle at center top, transparent 9%, var(--#{$prefix}pattern-fill) 10%, var(--#{$prefix}pattern-fill) 15%, transparent 16%), radial-gradient(circle at center bottom, transparent 9%, var(--#{$prefix}pattern-fill) 10%, var(--#{$prefix}pattern-fill) 15%, transparent 16%),
radial-gradient(circle at right center, transparent 9%, var(--#{$prefix}pattern-fill) 10%, var(--#{$prefix}pattern-fill) 15%, transparent 16%), radial-gradient(circle at left center, transparent 9%, var(--#{$prefix}pattern-fill) 10%, var(--#{$prefix}pattern-fill) 15%, transparent 16%);
background-position: 0 0;
background-size: calc(var(--#{$prefix}pattern-size) * 3) calc(var(--#{$prefix}pattern-size) * 3);
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
}
.bg-pattern-diagonal-stripes {
--#{$prefix}pattern-color: var(--#{$prefix}body-color);
--#{$prefix}pattern-size: .5rem;
--#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 5%, transparent);
--#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
background-image: repeating-linear-gradient(45deg,
transparent,
transparent var(--#{$prefix}pattern-size),
var(--#{$prefix}pattern-fill) var(--#{$prefix}pattern-size),
var(--#{$prefix}pattern-fill) calc(2 * var(--#{$prefix}pattern-size)));
background-repeat: no-repeat;
background-clip: padding-box;
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
--#{$prefix}pattern-color: var(--#{$prefix}body-color);
--#{$prefix}pattern-size: 0.5rem;
--#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 5%, transparent);
--#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
background-image: repeating-linear-gradient(45deg, transparent, transparent var(--#{$prefix}pattern-size), var(--#{$prefix}pattern-fill) var(--#{$prefix}pattern-size), var(--#{$prefix}pattern-fill) calc(2 * var(--#{$prefix}pattern-size)));
background-repeat: no-repeat;
background-clip: padding-box;
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
}
.bg-pattern-diagonal-stripes-2 {
--#{$prefix}pattern-color: var(--#{$prefix}body-color);
--#{$prefix}pattern-size: .5rem;
--#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 5%, transparent);
--#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
background-image: repeating-linear-gradient(-45deg,
transparent,
transparent var(--#{$prefix}pattern-size),
var(--#{$prefix}pattern-fill) var(--#{$prefix}pattern-size),
var(--#{$prefix}pattern-fill) calc(2 * var(--#{$prefix}pattern-size)));
background-repeat: no-repeat;
background-clip: padding-box;
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
--#{$prefix}pattern-color: var(--#{$prefix}body-color);
--#{$prefix}pattern-size: 0.5rem;
--#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 5%, transparent);
--#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
background-image: repeating-linear-gradient(-45deg, transparent, transparent var(--#{$prefix}pattern-size), var(--#{$prefix}pattern-fill) var(--#{$prefix}pattern-size), var(--#{$prefix}pattern-fill) calc(2 * var(--#{$prefix}pattern-size)));
background-repeat: no-repeat;
background-clip: padding-box;
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
}
.bg-pattern-zigzag {
--#{$prefix}pattern-color: var(--#{$prefix}body-color);
--#{$prefix}pattern-size: .5rem;
--#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 5%, transparent);
--#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
background: linear-gradient(135deg, var(--#{$prefix}pattern-fill) 25%, transparent 25%) calc(-1 * var(--#{$prefix}pattern-size)) 0,
linear-gradient(225deg, var(--#{$prefix}pattern-fill) 25%, transparent 25%) calc(-1 * var(--#{$prefix}pattern-size)) 0,
linear-gradient(315deg, var(--#{$prefix}pattern-fill) 25%, transparent 25%),
linear-gradient(45deg, var(--#{$prefix}pattern-fill) 25%, transparent 25%);
background-size: calc(2 * var(--#{$prefix}pattern-size)) calc(2 * var(--#{$prefix}pattern-size));
background-clip: padding-box;
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
--#{$prefix}pattern-color: var(--#{$prefix}body-color);
--#{$prefix}pattern-size: 0.5rem;
--#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 5%, transparent);
--#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
background:
linear-gradient(135deg, var(--#{$prefix}pattern-fill) 25%, transparent 25%) calc(-1 * var(--#{$prefix}pattern-size)) 0,
linear-gradient(225deg, var(--#{$prefix}pattern-fill) 25%, transparent 25%) calc(-1 * var(--#{$prefix}pattern-size)) 0,
linear-gradient(315deg, var(--#{$prefix}pattern-fill) 25%, transparent 25%),
linear-gradient(45deg, var(--#{$prefix}pattern-fill) 25%, transparent 25%);
background-size: calc(2 * var(--#{$prefix}pattern-size)) calc(2 * var(--#{$prefix}pattern-size));
background-clip: padding-box;
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
}
.bg-pattern-vertical-stripes {
--#{$prefix}pattern-color: var(--#{$prefix}body-color);
--#{$prefix}pattern-size: .5rem;
--#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 5%, transparent);
--#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
background-image: repeating-linear-gradient(90deg,
transparent,
transparent var(--#{$prefix}pattern-size),
var(--#{$prefix}pattern-fill) var(--#{$prefix}pattern-size),
var(--#{$prefix}pattern-fill) calc(2 * var(--#{$prefix}pattern-size)));
background-clip: padding-box;
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
--#{$prefix}pattern-color: var(--#{$prefix}body-color);
--#{$prefix}pattern-size: 0.5rem;
--#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 5%, transparent);
--#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
background-image: repeating-linear-gradient(90deg, transparent, transparent var(--#{$prefix}pattern-size), var(--#{$prefix}pattern-fill) var(--#{$prefix}pattern-size), var(--#{$prefix}pattern-fill) calc(2 * var(--#{$prefix}pattern-size)));
background-clip: padding-box;
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
}
.bg-pattern-horizontal-stripes {
--#{$prefix}pattern-color: var(--#{$prefix}body-color);
--#{$prefix}pattern-size: .5rem;
--#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 5%, transparent);
--#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
background-image: repeating-linear-gradient(0deg,
transparent,
transparent var(--#{$prefix}pattern-size),
var(--#{$prefix}pattern-fill) var(--#{$prefix}pattern-size),
var(--#{$prefix}pattern-fill) calc(2 * var(--#{$prefix}pattern-size)));
background-position: -1px -1px;
background-clip: padding-box;
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
--#{$prefix}pattern-color: var(--#{$prefix}body-color);
--#{$prefix}pattern-size: 0.5rem;
--#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 5%, transparent);
--#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
background-image: repeating-linear-gradient(0deg, transparent, transparent var(--#{$prefix}pattern-size), var(--#{$prefix}pattern-fill) var(--#{$prefix}pattern-size), var(--#{$prefix}pattern-fill) calc(2 * var(--#{$prefix}pattern-size)));
background-position: -1px -1px;
background-clip: padding-box;
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
}
// Color variants
@each $color, $value in $theme-colors {
.bg-pattern-#{$color} {
--#{$prefix}pattern-color: #{$value};
}
.bg-pattern-#{$color} {
--#{$prefix}pattern-color: #{$value};
}
}
// Sizes
$sizes: (
'sm': .25rem,
'md': .5rem,
'lg': .75rem,
'xl': 1rem,
'sm': 0.25rem,
'md': 0.5rem,
'lg': 0.75rem,
'xl': 1rem,
);
@each $size, $value in $sizes {
.bg-pattern-#{$size} {
--#{$prefix}pattern-size: #{$value};
}
}
.bg-pattern-#{$size} {
--#{$prefix}pattern-size: #{$value};
}
}
core/scss/ui/_payments.scss
+2
View File
@@ -1,6 +1,8 @@
@use 'sass:map';
@use '../config';
@use '../config' as *;
.payment {
height: config.$avatar-size;
aspect-ratio: 1.66666;
core/scss/ui/_placeholder.scss
+2
View File
@@ -1,3 +1,5 @@
@use '../config' as *;
.placeholder {
&:not(.btn):not([class*='bg-']) {
background-color: currentColor !important;
core/scss/ui/_popovers.scss
+2
View File
@@ -1,3 +1,5 @@
@use '../config' as *;
.popover {
@include media-print {
display: none;
core/scss/ui/_progress.scss
+2
View File
@@ -1,3 +1,5 @@
@use '../config' as *;
@keyframes progress-indeterminate {
0% {
inset-inline-end: 100%;
core/scss/ui/_ribbons.scss
+2
View File
@@ -1,5 +1,7 @@
// stylelint-disable declaration-no-important
@use '../config' as *;
.ribbon {
--#{$prefix}ribbon-margin: #{$card-ribbon-margin};
--#{$prefix}ribbon-border-radius: #{$card-ribbon-border-radius};
core/scss/ui/_segmented.scss
+2
View File
@@ -1,3 +1,5 @@
@use '../config' as *;
.nav-segmented {
--#{$prefix}nav-bg: var(--#{$prefix}bg-surface-tertiary);
--#{$prefix}nav-padding: 2px;
core/scss/ui/_signature.scss
+2
View File
@@ -1,3 +1,5 @@
@use '../config' as *;
.signature {
--#{$prefix}signature-padding: var(--#{$prefix}spacer-1);
--#{$prefix}signature-border-radius: var(--#{$prefix}border-radius);

Some files were not shown because too many files have changed in this diff Show More