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

Update Stylelint configuration and dependencies for improved linting support; adjust SCSS variables and properties for consistency and RTL compatibility.

Browse Source
This commit is contained in:
Bartek
2026-08-05 11:03:01 +02:00
parent 9f1a31734b
commit 6b6129d390
90 changed files with 944 additions and 1000 deletions
Download Patch File Download Diff File Expand all files Collapse all files
core/scss/_settings.scss
+2 -2
View File
@@ -12,8 +12,8 @@ $prefix: 'tblr-' !default;
// Characters which are escaped by the escape-svg function
$escaped-characters: (('<', '%3c'), ('>', '%3e'), ('#', '%23'), ('(', '%28'), (')', '%29')) !default;
$black: #000000 !default;
$white: #ffffff !default;
$black: #000 !default;
$white: #fff !default;
// The contrast ratio to reach against white, to determine if color changes from "light" to "dark".
$min-contrast-ratio: 2 !default;
core/scss/_variables.scss
+2 -2
View File
@@ -631,12 +631,12 @@ $extra-colors: (
) !default;
$social-colors: (
'x': #000000,
'x': #000,
'facebook': #1877f2,
'twitter': #1da1f2,
'linkedin': #0a66c2,
'google': #dc4e41,
'youtube': #ff0000,
'youtube': #f00,
'vimeo': #1ab7ea,
'dribbble': #ea4c89,
'github': #181717,
core/scss/bootstrap/_carousel.scss
+2 -2
View File
@@ -46,13 +46,13 @@
.carousel-item-next:not(.carousel-item-start),
.active.carousel-item-end {
/*rtl:ignore*/
/* rtl:ignore */
transform: translateX(calc(var(--#{$prefix}dir) * 100%));
}
.carousel-item-prev:not(.carousel-item-end),
.active.carousel-item-start {
/*rtl:ignore*/
/* rtl:ignore */
transform: translateX(calc(var(--#{$prefix}dir) * -100%));
}
core/scss/bootstrap/_nav.scss
+2 -2
View File
@@ -141,7 +141,7 @@
&:hover,
&:focus {
border-bottom-color: currentcolor;
border-bottom-color: currentColor;
}
}
@@ -149,7 +149,7 @@
.show > .nav-link {
font-weight: $font-weight-bold;
color: var(--#{$prefix}nav-underline-link-active-color);
border-bottom-color: currentcolor;
border-bottom-color: currentColor;
}
}
core/scss/bootstrap/_offcanvas.scss
+4 -2
View File
@@ -55,7 +55,8 @@
inset-inline-start: 0;
width: var(--#{$prefix}offcanvas-width);
border-inline-end: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
/*rtl:ignore*/
/* rtl:ignore */
transform: translateX(calc(var(--#{$prefix}dir) * -100%));
}
@@ -64,7 +65,8 @@
inset-inline-end: 0;
width: var(--#{$prefix}offcanvas-width);
border-inline-start: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
/*rtl:ignore*/
/* rtl:ignore */
transform: translateX(calc(var(--#{$prefix}dir) * 100%));
}
core/scss/bootstrap/_placeholders.scss
+1 -1
View File
@@ -5,7 +5,7 @@
min-height: 1em;
vertical-align: middle;
cursor: wait;
background-color: currentcolor;
background-color: currentColor;
opacity: $placeholder-opacity-max;
&.btn::before {
core/scss/bootstrap/_spinners.scss
+1 -1
View File
@@ -71,7 +71,7 @@
--#{$prefix}spinner-animation-name: spinner-grow;
// scss-docs-end spinner-grow-css-vars
background-color: currentcolor;
background-color: currentColor;
opacity: 0;
}
core/scss/fonts/_geist.scss
+50 -50
View File
@@ -2,204 +2,204 @@
@use '../config' as *;
@font-face {
font-family: 'Geist';
font-family: Geist;
font-style: normal;
font-weight: 100;
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';
font-family: Geist;
font-style: normal;
font-weight: 200;
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';
font-family: Geist;
font-style: normal;
font-weight: 300;
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';
font-family: Geist;
font-style: normal;
font-weight: 400;
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';
font-family: Geist;
font-style: normal;
font-weight: 500;
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';
font-family: Geist;
font-style: normal;
font-weight: 600;
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';
font-family: Geist;
font-style: normal;
font-weight: 700;
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';
font-family: Geist;
font-style: normal;
font-weight: 800;
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';
font-family: Geist;
font-style: normal;
font-weight: 900;
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';
font-family: Geist;
font-style: normal;
font-weight: 100 900;
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';
font-style: normal;
font-weight: 100;
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';
font-style: normal;
font-weight: 200;
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';
font-style: normal;
font-weight: 300;
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';
font-style: normal;
font-weight: 400;
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';
font-style: normal;
font-weight: 500;
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';
font-style: normal;
font-weight: 600;
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';
font-style: normal;
font-weight: 700;
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';
font-style: normal;
font-weight: 800;
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';
font-style: normal;
font-weight: 900;
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';
font-style: normal;
font-weight: 100 900;
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;
}
core/scss/helpers/_index.scss
+8 -8
View File
@@ -24,7 +24,7 @@
align-self: stretch;
width: $vr-border-width;
min-height: 1em;
background-color: currentcolor;
background-color: currentColor;
opacity: $hr-opacity;
}
@@ -34,10 +34,10 @@
.stretched-link {
&::after {
position: absolute;
top: 0;
inset-inline-end: 0;
bottom: 0;
inset-inline-start: 0;
inset-inline-end: 0;
top: 0;
bottom: 0;
z-index: 1;
content: '';
}
@@ -75,17 +75,17 @@
.fixed-top {
position: fixed;
top: 0;
inset-inline-end: 0;
inset-inline-start: 0;
inset-inline-end: 0;
top: 0;
z-index: $zindex-fixed;
}
.fixed-bottom {
position: fixed;
inset-inline-start: 0;
inset-inline-end: 0;
bottom: 0;
inset-inline-start: 0;
z-index: $zindex-fixed;
}
@@ -123,8 +123,8 @@
> * {
position: absolute;
top: 0;
inset-inline-start: 0;
top: 0;
width: 100%;
height: 100%;
}
core/scss/layout/_animations.scss
+3 -3
View File
@@ -61,7 +61,7 @@
}
@keyframes blink {
from {
0% {
opacity: 0;
}
@@ -69,7 +69,7 @@
opacity: 1;
}
to {
100% {
opacity: 0;
}
}
@@ -94,7 +94,7 @@
transform: scale3d(1.25, 1.25, 1.25) rotate(-5deg);
}
to {
100% {
transform: scaleX(1);
}
}
core/scss/layout/_core.scss
+13 -13
View File
@@ -12,28 +12,28 @@ html {
// stylelint-disable property-no-vendor-prefix
body {
letter-spacing: $body-letter-spacing;
touch-action: manipulation;
text-rendering: optimizeLegibility;
position: relative;
height: 100%;
min-height: 100%;
padding: 0;
font-feature-settings:
'liga' 0,
'cv03',
'cv04',
'cv11';
position: relative;
min-height: 100%;
height: 100%;
padding: 0;
letter-spacing: $body-letter-spacing;
touch-action: manipulation;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
@include media-print {
@include media-print() {
background: transparent;
}
}
@include scrollbar;
@include scrollbar();
//
// Fluid container
@@ -54,20 +54,20 @@ body {
--#{$prefix}theme-boxed-width: #{map.get($container-max-widths, xxl)};
@include media-breakpoint-up(md) {
background: $dark linear-gradient(to right, rgba(#fff, 0.1), transparent) fixed;
padding: 1rem;
background: $dark linear-gradient(to right, rgba(#fff, 0.1), transparent) fixed;
--#{$prefix}theme-boxed-border-radius: #{$border-radius};
}
.page {
margin: 0 auto;
max-width: var(--#{$prefix}theme-boxed-width);
@include border-radius(var(--#{$prefix}theme-boxed-border-radius));
margin: 0 auto;
color: var(--#{$prefix}body-color);
@include border-radius(var(--#{$prefix}theme-boxed-border-radius));
@include media-breakpoint-up(md) {
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
background: var(--#{$prefix}body-bg);
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
}
> .navbar:first-child {
core/scss/layout/_dark.scss
+1 -1
View File
@@ -40,7 +40,7 @@
.navbar-brand-autodark {
.navbar-brand-image {
@include autodark-image;
@include autodark-image();
}
}
}
core/scss/layout/_footer.scss
+4 -4
View File
@@ -1,13 +1,13 @@
@use '../config' as *;
.footer {
border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $footer-border-color;
background-color: $footer-bg;
padding: $footer-padding-y 0;
color: $footer-color;
margin-top: auto;
color: $footer-color;
background-color: $footer-bg;
border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $footer-border-color;
@include media-print {
@include media-print() {
display: none;
}
}
core/scss/layout/_navbar.scss
+58 -57
View File
@@ -17,8 +17,8 @@
margin-inline-end: 0;
.nav-link {
padding: 0.5rem calc(#{$container-padding-x} / 2);
justify-content: start;
padding: 0.5rem calc(#{$container-padding-x} / 2);
}
}
@@ -27,19 +27,19 @@
}
.dropdown-menu {
padding: 0;
background: transparent;
position: static;
color: inherit;
box-shadow: none;
border: none;
min-width: 0;
padding: 0;
margin: 0;
color: inherit;
background: transparent;
border: none;
box-shadow: none;
.dropdown-item {
min-width: 0;
display: flex;
width: auto;
min-width: 0;
padding-inline-start: add(calc(#{$container-padding-x} / 2), 1.75rem);
color: inherit;
@@ -64,16 +64,16 @@
}
}
.dropdown-toggle:after {
.dropdown-toggle::after {
margin-inline-start: auto;
}
.nav-item.active:after {
border-bottom-width: 0;
border-inline-start-width: 3px;
.nav-item.active::after {
inset-inline-end: auto;
top: 0;
bottom: 0;
border-inline-start-width: 3px;
border-bottom-width: 0;
}
}
}
@@ -90,9 +90,9 @@ Navbar
--#{$prefix}navbar-hover-color: #{$navbar-hover-color};
align-items: stretch;
min-height: $navbar-height;
box-shadow: inset 0 calc(-1 * var(--#{$prefix}navbar-border-width)) 0 0 var(--#{$prefix}navbar-border-color);
background: var(--#{$prefix}navbar-bg);
color: var(--#{$prefix}navbar-color);
background: var(--#{$prefix}navbar-bg);
box-shadow: inset 0 calc(-1 * var(--#{$prefix}navbar-border-width)) 0 0 var(--#{$prefix}navbar-border-color);
.navbar-collapse & {
flex-grow: 1;
@@ -113,16 +113,17 @@ Navbar
.nav-link {
position: relative;
justify-content: center;
min-width: 2.5rem;
min-height: 2.5rem;
justify-content: center;
@include border-radius(var(--#{$prefix}border-radius));
.badge {
position: absolute;
top: 0.5rem;
inset-inline-end: 0.5rem;
/*rtl:ignore*/
top: 0.5rem;
/* rtl:ignore */
transform: translate(calc(var(--#{$prefix}dir) * 50%), -50%);
}
}
@@ -136,13 +137,13 @@ Navbar
&#{$infix} {
@include media-breakpoint-down(breakpoint-next($breakpoint)) {
@include navbar-vertical-nav;
@include navbar-vertical-nav();
}
@include media-breakpoint-up($next) {
.navbar-collapse {
width: auto;
flex: 1 1 auto;
width: auto;
}
.nav-item.active {
@@ -152,12 +153,12 @@ Navbar
color: var(--#{$prefix}navbar-active-color);
}
&:after {
content: '';
&::after {
position: absolute;
inset-inline-start: 0;
inset-inline-end: 0;
bottom: -0.25rem;
content: '';
border: 0 var(--#{$prefix}border-style) var(--#{$prefix}navbar-active-border-color);
border-bottom-width: 2px;
}
@@ -197,57 +198,57 @@ Navbar brand
*/
.navbar-brand {
display: inline-flex;
align-items: center;
font-weight: $navbar-brand-font-weight;
margin: 0;
line-height: 1;
gap: $spacer-2;
align-items: center;
margin: 0;
font-weight: $navbar-brand-font-weight;
line-height: 1;
}
.navbar-brand-image {
height: $navbar-brand-image-height;
width: auto;
height: $navbar-brand-image-height;
}
/**
Navbar toggler
*/
.navbar-toggler {
border: 0;
width: $navbar-brand-image-height;
height: $navbar-brand-image-height;
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: $navbar-brand-image-height;
height: $navbar-brand-image-height;
border: 0;
}
.navbar-toggler-icon {
height: 2px;
position: relative;
width: 1.25em;
height: 2px;
background: currentColor;
@include border-radius(var(--#{$prefix}border-radius-pill));
position: relative;
@include transition(top $navbar-toggler-animation-time $navbar-toggler-animation-time, bottom $navbar-toggler-animation-time $navbar-toggler-animation-time, transform $navbar-toggler-animation-time, opacity 0s $navbar-toggler-animation-time);
&:before,
&:after {
content: '';
display: block;
height: inherit;
width: inherit;
border-radius: inherit;
background: inherit;
&::before,
&::after {
position: absolute;
inset-inline-start: 0;
display: block;
width: inherit;
height: inherit;
content: '';
background: inherit;
border-radius: inherit;
@include transition(inherit);
}
&:before {
&::before {
top: -0.45em;
}
&:after {
&::after {
bottom: -0.45em;
}
@@ -255,12 +256,12 @@ Navbar toggler
transform: rotate(45deg);
@include transition(top $transition-time, bottom $transition-time, transform $transition-time $transition-time, opacity 0s $transition-time);
&:before {
&::before {
top: 0;
transform: rotate(-90deg);
}
&:after {
&::after {
bottom: 0;
opacity: 0;
}
@@ -282,9 +283,9 @@ Navbar nav
--#{$prefix}nav-link-hover-bg: #{$navbar-nav-link-hover-bg};
--#{$prefix}nav-link-icon-color: #{$nav-link-icon-color};
--#{$prefix}nav-link-hover-icon-color: #{$nav-link-hover-icon-color};
margin: 0;
padding: 0;
align-items: stretch;
padding: 0;
margin: 0;
.nav-item {
display: flex;
@@ -297,11 +298,11 @@ Navbar nav
Navbar side
*/
.navbar-side {
margin: 0;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
margin: 0;
}
/**
@@ -316,15 +317,15 @@ Navbar vertical
&#{$infix} {
@include media-breakpoint-up($next) {
width: $sidebar-width;
position: fixed;
top: 0;
inset-inline-start: 0;
top: 0;
bottom: 0;
z-index: $zindex-fixed;
align-items: start;
overflow-y: scroll;
width: $sidebar-width;
padding: 0;
overflow-y: scroll;
@include transition(transform $transition-time);
&.navbar-right,
@@ -334,8 +335,8 @@ Navbar vertical
}
.navbar-brand {
padding: (($navbar-height - $navbar-brand-image-height) * 0.5) 0;
justify-content: center;
padding: (($navbar-height - $navbar-brand-image-height) * 0.5) 0;
}
.navbar-collapse {
@@ -343,8 +344,8 @@ Navbar vertical
}
.navbar-nav {
flex-direction: column;
flex-grow: 1;
flex-direction: column;
min-height: auto;
.nav-link {
@@ -356,8 +357,8 @@ Navbar vertical
> [class^='container'] {
flex-direction: column;
align-items: stretch;
min-height: 100%;
justify-content: start;
min-height: 100%;
padding: 0;
}
@@ -376,7 +377,7 @@ Navbar vertical
padding-inline-end: $sidebar-width;
}
@include navbar-vertical-nav;
@include navbar-vertical-nav();
}
}
}
@@ -385,15 +386,15 @@ Navbar vertical
}
.navbar-overlap {
&:after {
content: '';
height: $navbar-overlap-height;
&::after {
position: absolute;
top: 100%;
inset-inline-start: 0;
inset-inline-end: 0;
background: inherit;
top: 100%;
z-index: -1;
height: $navbar-overlap-height;
content: '';
background: inherit;
box-shadow: inherit;
}
}
core/scss/layout/_page.scss
+30 -30
View File
@@ -1,9 +1,9 @@
@use '../config' as *;
.page {
position: relative;
display: flex;
flex-direction: column;
position: relative;
min-height: 100%;
}
@@ -12,11 +12,11 @@
}
.page-wrapper {
flex: 1;
display: flex;
flex: 1;
flex-direction: column;
@include media-print {
@include media-print() {
margin: 0 !important;
}
}
@@ -30,19 +30,19 @@
// Content body
.page-body {
display: flex;
flex: 1;
flex-direction: column;
margin-top: var(--#{$prefix}page-padding-y);
margin-bottom: var(--#{$prefix}page-padding-y);
display: flex;
flex-direction: column;
flex: 1;
}
.page-body-card {
background: var(--#{$prefix}bg-surface);
border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $card-border-color;
flex: 1;
padding: var(--#{$prefix}page-padding) 0;
margin-bottom: 0;
flex: 1;
background: var(--#{$prefix}bg-surface);
border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $card-border-color;
.page-body ~ & {
margin-top: 0;
@@ -50,8 +50,8 @@
}
.page-cover {
background: no-repeat center/cover;
min-height: 9rem;
background: no-repeat center/cover;
@include media-breakpoint-up(md) {
min-height: 12rem;
@@ -65,24 +65,24 @@
.page-cover-overlay {
position: relative;
&:after {
content: '';
&::after {
position: absolute;
top: 0;
inset-inline-start: 0;
inset-inline-end: 0;
top: 0;
bottom: 0;
content: '';
background-image: $overlay-gradient;
}
}
.page-header {
display: flex;
flex-wrap: wrap;
min-height: 2.25rem;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
max-width: 100%;
min-height: 2.25rem;
.page-wrapper & {
margin: var(--#{$prefix}page-padding-y) 0 0;
@@ -90,24 +90,24 @@
}
.page-header-border {
border-bottom: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
padding: var(--#{$prefix}page-padding-y) 0;
margin: 0 !important;
background-color: var(--#{$prefix}bg-surface);
border-bottom: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
}
.page-pretitle {
@include subheader;
@include subheader();
}
.page-title {
margin: 0;
font-size: $page-title-font-size;
line-height: $page-title-line-height;
font-weight: $page-title-font-weight;
color: inherit;
display: flex;
align-items: center;
margin: 0;
font-size: $page-title-font-size;
font-weight: $page-title-font-weight;
line-height: $page-title-line-height;
color: inherit;
svg {
width: 1.5rem;
@@ -132,32 +132,32 @@
.page-cover {
--#{$prefix}page-cover-blur: 20px;
--#{$prefix}page-cover-padding: 1rem;
position: relative;
min-height: 6rem;
padding: var(--#{$prefix}page-cover-padding) 0;
position: relative;
overflow: hidden;
}
.page-cover-img {
position: absolute;
top: calc(-2 * var(--#{$prefix}page-cover-blur, 0));
inset-inline-start: calc(-2 * var(--#{$prefix}page-cover-blur, 0));
inset-inline-end: calc(-2 * var(--#{$prefix}page-cover-blur, 0));
top: calc(-2 * var(--#{$prefix}page-cover-blur, 0));
bottom: calc(-2 * var(--#{$prefix}page-cover-blur, 0));
pointer-events: none;
filter: blur(var(--#{$prefix}page-cover-blur));
object-fit: cover;
background-size: cover;
background-position: center;
z-index: -1;
pointer-events: none;
object-fit: cover;
filter: blur(var(--#{$prefix}page-cover-blur));
background-position: center;
background-size: cover;
}
//
// Page tabs
//
.page-tabs {
margin-top: 0.5rem;
position: relative;
margin-top: 0.5rem;
}
.page-header-tabs {
core/scss/layout/_root.scss
+1 -1
View File
@@ -2,8 +2,8 @@
:root,
:host {
font-size: 16px;
height: 100%;
font-size: 16px;
}
:root,
core/scss/marketing/_browser.scss
+10 -10
View File
@@ -5,9 +5,9 @@
.browser {
@include border-radius(var(--#{$prefix}border-radius-lg));
box-shadow: 0 0 0 1px var(--#{$prefix}border-color);
background: var(--#{$prefix}bg-surface-secondary);
overflow: hidden;
background: var(--#{$prefix}bg-surface-secondary);
box-shadow: 0 0 0 1px var(--#{$prefix}border-color);
}
.browser-header {
@@ -18,8 +18,8 @@
}
.browser-dots {
margin-inline-end: 3rem;
display: flex;
margin-inline-end: 3rem;
}
.browser-dots-colored {
@@ -39,31 +39,31 @@
}
.browser-dot {
margin-inline-end: 0.5rem;
width: 0.75rem;
min-width: 0.75rem;
height: 0.75rem;
margin-inline-end: 0.5rem;
background: var(--#{$prefix}border-color);
@include border-radius(var(--#{$prefix}border-radius-circle));
border: 1px solid var(--#{$prefix}border-color-dark);
@include border-radius(var(--#{$prefix}border-radius-circle));
}
.browser-input {
flex: 1;
display: flex;
flex: 1;
align-items: center;
justify-content: center;
text-decoration: none;
padding: 0.25rem;
color: var(--#{$prefix}secondary);
font-size: var(--#{$prefix}font-size-h5);
@include border-radius(var(--#{$prefix}border-radius));
line-height: 1;
color: var(--#{$prefix}secondary);
text-decoration: none;
cursor: pointer;
background-image: linear-gradient(to bottom, var(--#{$prefix}bg-surface), var(--#{$prefix}bg-surface-secondary));
box-shadow:
0 0 0 1px rgba(0, 0, 0, 0.05),
0 1px 2px 0 rgba(0, 0, 0, 0.05);
background-image: linear-gradient(to bottom, var(--#{$prefix}bg-surface), var(--#{$prefix}bg-surface-secondary));
@include border-radius(var(--#{$prefix}border-radius));
&:hover {
text-decoration: none;
core/scss/marketing/_hero.scss
+11 -11
View File
@@ -4,15 +4,15 @@
@use '../config' as *;
.hero {
text-align: center;
padding: 6.5rem 0;
text-align: center;
}
.hero-title {
font-size: 3rem;
font-weight: var(--#{$prefix}font-weight-black);
letter-spacing: $spacing-tight;
line-height: $headings-line-height;
letter-spacing: $spacing-tight;
@include media-breakpoint-down(md) {
font-size: 2rem;
@@ -20,11 +20,11 @@
}
.hero-description {
color: var(--#{$prefix}secondary);
max-width: 45rem;
margin: 0 auto;
font-size: var(--#{$prefix}font-size-h2);
line-height: 1.5;
margin: 0 auto;
max-width: 45rem;
color: var(--#{$prefix}secondary);
@include media-breakpoint-down(sm) {
font-size: var(--#{$prefix}font-size-h3);
@@ -39,25 +39,25 @@
// Hero subheader
//
.hero-subheader {
@include subheader;
@include subheader();
margin-bottom: 0.5rem;
}
.hero-img {
margin: 4rem auto;
max-width: 65rem;
@include border-radius($border-radius-lg);
position: relative;
z-index: 1;
max-width: 65rem;
margin: 4rem auto;
@include border-radius($border-radius-lg);
//box-shadow: 0 10px 15px -3px rgba($color-text, 0.1),
// 0 4px 6px -2px rgba($color-text, 0.05);
img,
svg {
position: relative;
display: block;
max-width: 100%;
height: auto;
display: block;
position: relative;
}
}
//
core/scss/marketing/_pricing.scss
+23 -23
View File
@@ -5,8 +5,8 @@ $pricing-card-width: 22rem;
.pricing {
display: flex;
flex-direction: column;
margin: 0 auto;
justify-content: center;
margin: 0 auto;
@include media-breakpoint-up(md) {
flex-direction: row;
@@ -14,21 +14,21 @@ $pricing-card-width: 22rem;
}
.pricing-card {
flex: 1;
position: relative;
display: flex;
flex: 1;
flex-direction: column;
background: var(--#{$prefix}bg-surface);
border: 1px solid $border-color;
padding: 2rem;
margin: 0 0 1rem;
position: relative;
box-shadow: var(--#{$prefix}shadow-card);
text-align: center;
background: var(--#{$prefix}bg-surface);
border: 1px solid $border-color;
box-shadow: var(--#{$prefix}shadow-card);
@include border-radius($border-radius-lg);
@include media-breakpoint-up(md) {
margin: 1rem -1px;
max-width: $pricing-card-width;
margin: 1rem -1px;
&:first-child {
@include border-radius($border-radius-lg 0 0 $border-radius-lg);
@@ -41,8 +41,8 @@ $pricing-card-width: 22rem;
&.featured {
z-index: 1;
border: 2px solid var(--#{$prefix}primary);
order: -1;
border: 2px solid var(--#{$prefix}primary);
@include media-breakpoint-up(md) {
order: unset;
@@ -61,51 +61,51 @@ $pricing-card-width: 22rem;
.pricing-label {
position: absolute;
top: 0;
inset-inline-start: 0;
transform: translateY(-50%);
vertical-align: bottom;
inset-inline-end: 0;
top: 0;
display: flex;
align-items: center;
justify-content: center;
vertical-align: bottom;
transform: translateY(-50%);
}
.pricing-btn {
margin-top: auto;
padding-top: 2rem;
margin-top: auto;
}
.pricing-price {
display: flex;
justify-content: center;
font-size: 2.5rem;
line-height: 1;
font-weight: $font-weight-semibold;
margin: 0.75rem 0;
font-size: 2.5rem;
font-weight: $font-weight-semibold;
line-height: 1;
}
.pricing-price-currency {
font-size: $h2-font-size;
line-height: 1.5;
margin-inline-end: 0.25rem;
font-size: $h2-font-size;
font-weight: $font-weight-semibold;
line-height: 1.5;
}
.pricing-price-description {
font-size: $h4-font-size;
line-height: $h4-line-height;
font-weight: $font-weight-normal;
color: $text-secondary;
align-self: center;
margin-inline-start: 0.5rem;
font-size: $h4-font-size;
font-weight: $font-weight-normal;
line-height: $h4-line-height;
color: $text-secondary;
}
.pricing-features {
margin: 1rem 0 0;
padding: 0;
list-style: none;
margin: 1rem 0 0;
text-align: start;
list-style: none;
> li:not(:first-child) {
margin-top: 0.25rem;
core/scss/marketing/_sections.scss
+8 -8
View File
@@ -35,9 +35,9 @@
//
.section {
--section-bg: transparent;
background: var(--section-bg);
position: relative;
padding: 5rem 0;
background: var(--section-bg);
}
.section-sm {
@@ -63,9 +63,9 @@
}
.section-header {
text-align: center;
max-width: 45rem;
margin: 0 auto 5rem;
text-align: center;
@at-root .section-sm & {
margin-bottom: 4rem;
@@ -83,10 +83,10 @@
}
.section-description {
color: var(--#{$prefix}secondary);
margin-top: 1rem;
font-size: var(--#{$prefix}font-size-h3);
line-height: var(--#{$prefix}line-height-h3);
margin-top: 1rem;
color: var(--#{$prefix}secondary);
}
//
@@ -95,9 +95,9 @@
.section-divider {
position: absolute;
bottom: 100%;
pointer-events: none;
height: 5rem;
width: 100%;
height: 5rem;
pointer-events: none;
path {
fill: var(--section-bg);
@@ -109,14 +109,14 @@
}
.wave-2 {
animation: move-forever2 24s linear infinite;
opacity: 0.5;
animation: move-forever2 24s linear infinite;
animation-delay: -2s;
}
.wave-3 {
animation: move-forever3 18s linear infinite;
opacity: 0.3;
animation: move-forever3 18s linear infinite;
animation-delay: -2s;
}
}
core/scss/marketing/_shape.scss
+5 -5
View File
@@ -6,14 +6,14 @@
--#{$prefix}shape-size: #{$avatar-size};
--#{$prefix}shape-icon-size: #{$avatar-icon-size};
--#{$prefix}shape-border-radius: 35%;
background-color: var(--#{$prefix}primary-lt);
color: var(--#{$prefix}primary);
@include border-radius(var(--#{$prefix}shape-border-radius));
display: inline-flex;
align-items: center;
justify-content: center;
height: var(--#{$prefix}shape-size);
width: var(--#{$prefix}shape-size);
height: var(--#{$prefix}shape-size);
color: var(--#{$prefix}primary);
background-color: var(--#{$prefix}primary-lt);
@include border-radius(var(--#{$prefix}shape-border-radius));
.icon {
width: var(--#{$prefix}shape-icon-size);
@@ -30,7 +30,7 @@
@each $name, $color in $colors {
.shape-#{$name} {
background: var(--#{$prefix}#{$name}-lt);
color: var(--#{$prefix}#{$name});
background: var(--#{$prefix}#{$name}-lt);
}
}
core/scss/mixins/bootstrap/_caret.scss
+1 -1
View File
@@ -65,7 +65,7 @@
}
@if $direction == 'left' {
&:after {
&::after {
content: none;
}
}
core/scss/tests/_caret.test.scss
+1 -1
View File
@@ -106,7 +106,7 @@
margin-inline-end: 0.306em;
transform: rotate(45deg);
}
.t:after {
.t::after {
content: none;
}
}
core/scss/ui/_accordion.scss
+14 -14
View File
@@ -27,37 +27,37 @@
.accordion-button {
position: relative;
display: flex;
gap: var(--#{$prefix}accordion-btn-gap);
align-items: center;
width: 100%;
padding: var(--#{$prefix}accordion-btn-padding-y) var(--#{$prefix}accordion-padding-x);
font-size: inherit;
font-weight: var(--#{$prefix}accordion-btn-font-weight);
color: inherit;
text-align: inherit;
background-color: transparent;
border: 0;
font-size: inherit;
font-weight: var(--#{$prefix}accordion-btn-font-weight);
gap: var(--#{$prefix}accordion-btn-gap);
&:not(.collapsed) {
color: var(--#{$prefix}accordion-active-color);
border-bottom-color: transparent;
box-shadow: none;
color: var(--#{$prefix}accordion-active-color);
}
}
.accordion-header {
margin: 0;
position: relative;
display: flex;
gap: var(--#{$prefix}accordion-header-gap);
align-items: center;
width: 100%;
margin: 0;
color: var(--#{$prefix}accordion-btn-color);
text-align: start;
background-color: transparent;
border: 0;
overflow-anchor: none;
transition: transform $transition-time;
overflow-anchor: none;
&:hover {
z-index: 2;
@@ -81,17 +81,17 @@
.accordion-button-toggle {
display: flex;
line-height: 1;
transition: $transition-time transform;
margin-inline-start: auto;
margin-inline-end: 0;
color: var(--#{$prefix}secondary);
width: var(--#{$prefix}accordion-btn-toggle-width);
height: var(--#{$prefix}accordion-btn-toggle-width);
margin-inline-start: auto;
margin-inline-end: 0;
line-height: 1;
color: var(--#{$prefix}secondary);
transition: $transition-time transform;
.accordion-button:not(.collapsed) & {
transform: rotate(-180deg);
color: var(--#{$prefix}accordion-active-color);
transform: rotate(-180deg);
}
path {
@@ -139,14 +139,14 @@
}
.accordion-body {
color: var(--#{$prefix}secondary);
padding: 0 var(--#{$prefix}accordion-body-padding-x) var(--#{$prefix}accordion-body-padding-y);
color: var(--#{$prefix}secondary);
}
.accordion-flush {
> .accordion-item {
border-inline-end: 0;
border-inline-start: 0;
border-inline-end: 0;
@include border-radius(0);
&:first-child {
core/scss/ui/_alerts.scss
+11 -11
View File
@@ -19,22 +19,22 @@
--#{$prefix}alert-gap: #{$alert-gap};
position: relative;
padding: var(--#{$prefix}alert-padding-y) var(--#{$prefix}alert-padding-x);
margin-bottom: var(--#{$prefix}alert-margin-bottom);
background-color: color-mix(in srgb, var(--#{$prefix}alert-bg), var(--#{$prefix}bg-surface));
@include border-radius(var(--#{$prefix}alert-border-radius));
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}alert-border-color);
box-shadow: var(--#{$prefix}box-shadow);
color: var(--#{$prefix}alert-color);
display: flex;
flex-direction: row;
gap: var(--#{$prefix}alert-gap);
padding: var(--#{$prefix}alert-padding-y) var(--#{$prefix}alert-padding-x);
margin-bottom: var(--#{$prefix}alert-margin-bottom);
color: var(--#{$prefix}alert-color);
background-color: color-mix(in srgb, var(--#{$prefix}alert-bg), var(--#{$prefix}bg-surface));
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}alert-border-color);
box-shadow: var(--#{$prefix}box-shadow);
@include border-radius(var(--#{$prefix}alert-border-radius));
}
.alert-heading {
color: inherit;
margin-bottom: var(--#{$prefix}alert-heading-margin-bottom);
font-weight: var(--#{$prefix}alert-heading-font-weight);
color: inherit;
}
.alert-description {
@@ -42,9 +42,9 @@
}
.alert-icon {
color: var(--#{$prefix}alert-color);
width: var(--#{$prefix}alert-icon-size) !important;
height: var(--#{$prefix}alert-icon-size) !important;
color: var(--#{$prefix}alert-color);
}
.alert-action {
@@ -75,16 +75,16 @@
.btn-close {
position: absolute;
top: calc(var(--#{$prefix}alert-padding-x) / 2 - 1px);
inset-inline-end: calc(var(--#{$prefix}alert-padding-y) / 2 - 1px);
top: calc(var(--#{$prefix}alert-padding-x) / 2 - 1px);
z-index: 1;
padding: calc(var(--#{$prefix}alert-padding-y) * 1.25) var(--#{$prefix}alert-padding-x);
}
}
.alert-important {
background-color: var(--#{$prefix}alert-variant-color);
color: var(--#{$prefix}white);
background-color: var(--#{$prefix}alert-variant-color);
.alert-description {
color: inherit;
core/scss/ui/_avatars.scss
+12 -12
View File
@@ -13,26 +13,26 @@
--#{$prefix}avatar-brand-size: #{$avatar-brand-size};
--#{$prefix}avatar-border-radius: #{$avatar-border-radius};
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--#{$prefix}avatar-size);
height: var(--#{$prefix}avatar-size);
font-size: var(--#{$prefix}avatar-font-size);
font-weight: var(--#{$prefix}font-weight-medium);
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--#{$prefix}secondary);
text-align: center;
text-transform: uppercase;
vertical-align: bottom;
user-select: none;
background: var(--#{$prefix}avatar-bg) no-repeat center/cover;
@include border-radius(var(--#{$prefix}avatar-border-radius));
box-shadow: var(--#{$prefix}avatar-box-shadow);
transition:
color $transition-time,
background-color $transition-time,
box-shadow $transition-time;
@include border-radius(var(--#{$prefix}avatar-border-radius));
.icon {
width: var(--#{$prefix}avatar-icon-size);
@@ -89,7 +89,7 @@
//
.avatar-list {
--#{$prefix}avatar-list-size: #{$avatar-size};
@include elements-list;
@include elements-list();
a.avatar {
&:hover {
@@ -125,11 +125,11 @@
.avatar-upload {
--#{$prefix}avatar-upload-icon-size: #{$avatar-upload-icon-size};
--#{$prefix}avatar-upload-text-margin-top: #{$avatar-upload-text-margin-top};
flex-direction: column;
background: $form-check-input-bg;
border: var(--#{$prefix}border-width) dashed var(--#{$prefix}border-color);
background: $form-check-input-bg;
box-shadow: none;
flex-direction: column;
@include transition(color $transition-time, background-color $transition-time);
svg {
@@ -139,16 +139,16 @@
}
&:hover {
border-color: var(--#{$prefix}primary);
color: var(--#{$prefix}primary);
text-decoration: none;
border-color: var(--#{$prefix}primary);
}
}
.avatar-upload-text {
margin-top: var(--#{$prefix}avatar-upload-text-margin-top);
font-size: $h6-font-size;
line-height: 1;
margin-top: var(--#{$prefix}avatar-upload-text-margin-top);
}
.avatar-cover {
@@ -160,13 +160,13 @@
.avatar-brand {
--#{$prefix}avatar-brand-offset: #{$avatar-brand-offset};
width: var(--#{$prefix}avatar-brand-size);
height: var(--#{$prefix}avatar-brand-size);
position: absolute;
inset-inline-end: var(--#{$prefix}avatar-brand-offset);
bottom: var(--#{$prefix}avatar-brand-offset);
z-index: 1000;
width: var(--#{$prefix}avatar-brand-size);
height: var(--#{$prefix}avatar-brand-size);
background: var(--#{$prefix}bg-surface);
@include border-radius(var(--#{$prefix}border-radius));
border: 1px solid var(--#{$prefix}border-color);
@include border-radius(var(--#{$prefix}border-radius));
}
core/scss/ui/_badges.scss
+17 -16
View File
@@ -11,24 +11,24 @@
--#{$prefix}badge-line-height: 1;
--#{$prefix}badge-gap: #{$badge-gap};
display: inline-flex;
gap: var(--#{$prefix}badge-gap);
align-items: center;
justify-content: center;
min-width: calc(1em + var(--#{$prefix}badge-padding-y) * 2 + 2px);
padding: var(--#{$prefix}badge-padding-y) var(--#{$prefix}badge-padding-x);
font-weight: var(--#{$prefix}badge-font-weight);
overflow: hidden;
font-size: var(--#{$prefix}badge-font-size);
font-weight: var(--#{$prefix}badge-font-weight);
line-height: var(--#{$prefix}badge-line-height);
color: var(--#{$prefix}badge-color);
text-align: center;
letter-spacing: 0.04em;
white-space: nowrap;
justify-content: center;
align-items: center;
gap: var(--#{$prefix}badge-gap);
background: $badge-bg-color;
overflow: hidden;
vertical-align: bottom;
user-select: none;
background: $badge-bg-color;
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) transparent;
@include border-radius(var(--#{$prefix}badge-border-radius));
min-width: calc(1em + var(--#{$prefix}badge-padding-y) * 2 + 2px);
letter-spacing: 0.04em;
vertical-align: bottom;
line-height: var(--#{$prefix}badge-line-height);
@at-root a#{&} {
background: var(--#{$prefix}bg-surface-secondary);
@@ -46,12 +46,12 @@
.badge-dot {
display: inline-block;
width: $badge-empty-size;
height: $badge-empty-size;
min-width: 0;
height: $badge-empty-size;
min-height: auto;
padding: 0;
@include border-radius(var(--#{$prefix}border-radius-pill));
vertical-align: baseline;
@include border-radius(var(--#{$prefix}border-radius-pill));
}
//
@@ -73,7 +73,7 @@
// Badges list
//
.badges-list {
@include elements-list;
@include elements-list();
}
//
@@ -81,11 +81,12 @@
//
.badge-notification {
position: absolute !important;
top: 0 !important;
inset-inline-end: 0 !important;
/*rtl:ignore*/
transform: translate(calc(var(--#{$prefix}dir) * 50%), -50%);
top: 0 !important;
z-index: 1;
/* rtl:ignore */
transform: translate(calc(var(--#{$prefix}dir) * 50%), -50%);
}
.badge-blink {
core/scss/ui/_breadcrumbs.scss
+8 -7
View File
@@ -18,13 +18,13 @@
display: flex;
flex-wrap: wrap;
@include font-size(var(--#{$prefix}breadcrumb-font-size));
list-style: none;
background-color: var(--#{$prefix}breadcrumb-bg);
@include border-radius(var(--#{$prefix}breadcrumb-border-radius));
padding: 0;
margin: 0;
list-style: none;
background: transparent;
background-color: var(--#{$prefix}breadcrumb-bg);
@include font-size(var(--#{$prefix}breadcrumb-font-size));
@include border-radius(var(--#{$prefix}breadcrumb-border-radius));
a {
color: var(--#{$prefix}breadcrumb-link-color);
@@ -41,8 +41,8 @@
.breadcrumb-item {
&.active {
color: var(--#{$prefix}breadcrumb-item-active-color);
font-weight: var(--#{$prefix}breadcrumb-item-active-font-weight);
color: var(--#{$prefix}breadcrumb-item-active-color);
a {
color: inherit;
@@ -53,7 +53,7 @@
&.disabled {
color: var(--#{$prefix}breadcrumb-item-disabled-color);
&:before {
&::before {
color: inherit;
}
@@ -71,7 +71,8 @@
padding-inline-end: var(--#{$prefix}breadcrumb-item-padding-x);
color: var(--#{$prefix}breadcrumb-divider-color);
content: var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider));
/*rtl:raw:
/* rtl:raw:
transform: scaleX(-1);
*/
}
core/scss/ui/_buttons.scss
+29 -30
View File
@@ -17,26 +17,26 @@
--#{$prefix}btn-active-color: #{$active-color};
--#{$prefix}btn-active-bg: #{$active-bg};
--#{$prefix}btn-active-border-color: #{$active-border-color};
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
white-space: nowrap;
box-shadow: var(--#{$prefix}btn-box-shadow);
position: relative;
min-width: calc((var(--#{$prefix}btn-line-height) * 1) + (var(--#{$prefix}btn-padding-y) * 2) + (var(--#{$prefix}btn-border-width) * 2));
min-height: calc((var(--#{$prefix}btn-line-height) * 1) + (var(--#{$prefix}btn-padding-y) * 2) + (var(--#{$prefix}btn-border-width) * 2));
white-space: nowrap;
box-shadow: var(--#{$prefix}btn-box-shadow);
@include border-radius(var(--#{$prefix}btn-border-radius));
.icon {
width: var(--#{$prefix}btn-icon-size);
height: var(--#{$prefix}btn-icon-size);
min-width: var(--#{$prefix}btn-icon-size);
font-size: var(--#{$prefix}btn-icon-size);
height: var(--#{$prefix}btn-icon-size);
margin: 0 calc(var(--#{$prefix}btn-padding-x) / 2) 0 calc(var(--#{$prefix}btn-padding-x) / -4);
vertical-align: bottom;
font-size: var(--#{$prefix}btn-icon-size);
color: var(--#{$prefix}btn-icon-color);
vertical-align: bottom;
}
.avatar {
@@ -175,8 +175,8 @@
// Button shapes
//
.btn-pill {
padding-inline-end: 1.5em;
padding-inline-start: 1.5em;
padding-inline-end: 1.5em;
@include border-radius(var(--#{$prefix}border-radius-pill));
&[class*='btn-icon'] {
@@ -195,23 +195,22 @@
//
.btn-icon,
.btn-action {
//[BUG] btn-sm and btn-xl with an icon looks broken
//issue #2470 fixed
min-width: calc(var(--#{$prefix}btn-line-height) + (var(--#{$prefix}btn-padding-y) * 2) + (var(--#{$prefix}btn-border-width) * 2));
padding-inline-start: 0;
padding-inline-end: 0;
.icon {
margin: calc(-1 * var(--#{$prefix}btn-padding-x));
}
//[BUG] btn-sm and btn-xl with an icon looks broken
//issue #2470 fixed
min-width: calc(var(--#{$prefix}btn-line-height) + (var(--#{$prefix}btn-padding-y) * 2) + (var(--#{$prefix}btn-border-width) * 2));
}
//
// Button list
//
.btn-list {
@include elements-list;
@include elements-list();
}
.btn-list-center {
@@ -224,12 +223,12 @@
.btn-floating {
--#{$prefix}btn-floating-offset: #{$btn-floating-offset};
position: fixed;
z-index: $zindex-fixed;
bottom: var(--#{$prefix}btn-floating-offset);
inset-inline-start: var(--#{$prefix}btn-floating-offset);
bottom: var(--#{$prefix}btn-floating-offset);
z-index: $zindex-fixed;
box-shadow: var(--#{$prefix}shadow-dropdown);
@include media-print {
@include media-print() {
display: none;
}
}
@@ -247,20 +246,20 @@
opacity: 0;
}
&:after {
content: '';
display: inline-block;
vertical-align: text-bottom;
border: $spinner-border-width var(--#{$prefix}border-style) currentColor;
border-inline-end-color: transparent;
@include border-radius(var(--#{$prefix}border-radius-pill));
color: var(--#{$prefix}btn-color);
&::after {
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);
top: calc(50% - var(--#{$prefix}btn-icon-size) / 2);
display: inline-block;
width: var(--#{$prefix}btn-icon-size);
height: var(--#{$prefix}btn-icon-size);
color: var(--#{$prefix}btn-color);
vertical-align: text-bottom;
content: '';
border: $spinner-border-width var(--#{$prefix}border-style) currentColor;
border-inline-end-color: transparent;
animation: spinner-border 0.75s linear infinite;
@include border-radius(var(--#{$prefix}border-radius-pill));
}
}
@@ -274,7 +273,7 @@
background: transparent;
box-shadow: none;
&:after {
&::after {
content: none;
}
@@ -294,7 +293,7 @@
color: var(--#{$prefix}primary);
}
@include media-print {
@include media-print() {
display: none;
}
}
@@ -302,7 +301,7 @@
.btn-actions {
display: flex;
@include media-print {
@include media-print() {
display: none;
}
}
@@ -315,7 +314,7 @@
&:hover,
&:focus-visible {
.icon {
/*rtl:ignore*/
/* rtl:ignore */
transform: translateX(calc(var(--#{$prefix}dir) * 4px));
}
}
@@ -333,7 +332,7 @@
&:hover,
&:focus-visible {
.icon {
/*rtl:ignore*/
/* rtl:ignore */
transform: translateX(calc(var(--#{$prefix}dir) * -4px));
}
}
core/scss/ui/_calendars.scss
+5 -5
View File
@@ -79,11 +79,11 @@
.calendar-range {
position: relative;
&:before {
&::before {
position: absolute;
top: 50%;
inset-inline-end: 0;
inset-inline-start: 0;
inset-inline-end: 0;
top: 50%;
height: var(--#{$prefix}calendar-date-size);
content: '';
background: color-transparent(var(--#{$prefix}primary), 0.1);
@@ -99,11 +99,11 @@
}
}
&.range-start:before {
&.range-start::before {
inset-inline-start: 50%;
}
&.range-end:before {
&.range-end::before {
inset-inline-end: 50%;
}
}
core/scss/ui/_cards.scss
+43 -43
View File
@@ -21,7 +21,7 @@
.card {
@include transition(transform $transition-time ease-out, opacity $transition-time ease-out, box-shadow $transition-time ease-out);
@include media-print {
@include media-print() {
border: none;
box-shadow: none;
}
@@ -65,15 +65,15 @@
.card-stamp {
--#{$prefix}stamp-size: #{$card-stamp-size};
position: absolute;
top: 0;
inset-inline-end: 0;
top: 0;
width: calc(var(--#{$prefix}stamp-size) * 1);
height: calc(var(--#{$prefix}stamp-size) * 1);
max-height: 100%;
border-start-end-radius: $border-radius;
opacity: $card-stamp-opacity;
overflow: hidden;
pointer-events: none;
border-start-end-radius: $border-radius;
opacity: $card-stamp-opacity;
}
.card-stamp-lg {
@@ -81,24 +81,24 @@
}
.card-stamp-icon {
background: var(--#{$prefix}secondary);
color: var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
position: relative;
inset-inline-end: calc(var(--#{$prefix}stamp-size) * -0.25);
top: calc(var(--#{$prefix}stamp-size) * -0.25);
display: flex;
align-items: center;
justify-content: center;
@include border-radius(var(--#{$prefix}border-radius-pill));
width: calc(var(--#{$prefix}stamp-size) * 1);
height: calc(var(--#{$prefix}stamp-size) * 1);
position: relative;
top: calc(var(--#{$prefix}stamp-size) * -0.25);
inset-inline-end: calc(var(--#{$prefix}stamp-size) * -0.25);
font-size: calc(var(--#{$prefix}stamp-size) * 0.75);
color: var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
background: var(--#{$prefix}secondary);
transform: rotate(10deg);
@include border-radius(var(--#{$prefix}border-radius-pill));
.icon {
stroke-width: 2;
width: calc(var(--#{$prefix}stamp-size) * 0.75);
height: calc(var(--#{$prefix}stamp-size) * 0.75);
stroke-width: 2;
}
}
@@ -139,14 +139,14 @@
.card-btn {
display: flex;
flex: 1;
align-items: center;
justify-content: center;
padding: $card-spacer-y $card-spacer-x;
font-weight: var(--#{$prefix}font-weight-medium);
color: inherit;
text-align: center;
border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
flex: 1;
color: inherit;
font-weight: var(--#{$prefix}font-weight-medium);
@include transition(background $transition-time);
&:hover {
@@ -166,11 +166,11 @@ Stacked card
--#{$prefix}card-stacked-offset: #{$card-stacked-offset};
position: relative;
&:after {
&::after {
position: absolute;
top: calc(-1 * var(--#{$prefix}card-stacked-offset));
inset-inline-end: var(--#{$prefix}card-stacked-offset);
inset-inline-start: var(--#{$prefix}card-stacked-offset);
inset-inline-end: var(--#{$prefix}card-stacked-offset);
top: calc(-1 * var(--#{$prefix}card-stacked-offset));
height: var(--#{$prefix}card-stacked-offset);
content: '';
background: var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
@@ -182,34 +182,34 @@ Stacked card
.card-cover {
position: relative;
padding: $card-spacer-y $card-spacer-x;
background: #666666 no-repeat center/cover;
background: #666 no-repeat center/cover;
&:before {
&::before {
position: absolute;
top: 0;
inset-inline-end: 0;
bottom: 0;
inset-inline-start: 0;
inset-inline-end: 0;
top: 0;
bottom: 0;
content: '';
background: rgba($dark, 0.48);
}
&:first-child,
&:first-child:before {
&:first-child::before {
@include border-radius($border-radius $border-radius 0 0);
}
}
.card-cover-blurred {
&:before {
&::before {
backdrop-filter: blur(2px);
}
}
.card-actions {
--#{$prefix}card-actions-gutter: #{$card-actions-gutter};
margin: calc(-1 * var(--#{$prefix}card-actions-gutter)) calc(-1 * var(--#{$prefix}card-actions-gutter)) calc(-1 * var(--#{$prefix}card-actions-gutter)) auto;
padding-inline-start: var(--#{$prefix}card-actions-gutter);
margin: calc(-1 * var(--#{$prefix}card-actions-gutter)) calc(-1 * var(--#{$prefix}card-actions-gutter)) calc(-1 * var(--#{$prefix}card-actions-gutter)) auto;
a {
text-decoration: none;
@@ -218,9 +218,9 @@ Stacked card
// Card header
.card-header {
color: inherit;
display: flex;
align-items: center;
color: inherit;
background-color: var(--#{$prefix}card-cap-bg);
&:first-child {
@@ -229,15 +229,15 @@ Stacked card
}
.card-header-light {
border-bottom-color: transparent;
background: var(--#{$prefix}bg-surface-tertiary);
border-bottom-color: transparent;
}
.card-header-tabs {
background: $card-header-tabs-bg;
flex: 1;
margin: calc(var(--#{$prefix}card-cap-padding-y) * -1) calc(var(--#{$prefix}card-cap-padding-x) * -1) calc(var(--#{$prefix}card-cap-padding-y) * -1);
padding: calc(var(--#{$prefix}card-cap-padding-y) * 0.5) calc(var(--#{$prefix}card-cap-padding-x) * 0.5) 0;
margin: calc(var(--#{$prefix}card-cap-padding-y) * -1) calc(var(--#{$prefix}card-cap-padding-x) * -1) calc(var(--#{$prefix}card-cap-padding-y) * -1);
background: $card-header-tabs-bg;
@include border-radius(var(--#{$prefix}card-border-radius) var(--#{$prefix}card-border-radius) 0 0);
}
@@ -271,13 +271,13 @@ Stacked card
}
.card-link-rotate:hover {
transform: rotate(1.5deg);
opacity: 1;
transform: rotate(1.5deg);
}
.card-link-pop:hover {
transform: translateY(-2px);
opacity: 1;
transform: translateY(-2px);
}
// Card footer
@@ -290,9 +290,9 @@ Stacked card
}
.card-footer-transparent {
padding-top: 0;
background: transparent;
border-color: transparent;
padding-top: 0;
}
.card-footer-borderless {
@@ -324,8 +324,8 @@ Stacked card
margin: 0 0 var(--#{$prefix}card-title-margin-bottom);
font-size: $h3-font-size;
font-weight: var(--#{$prefix}font-weight-medium);
color: var(--#{$prefix}heading-color);
line-height: var(--#{$prefix}card-title-line-height);
color: var(--#{$prefix}heading-color);
@at-root a#{&}:hover {
color: inherit;
@@ -339,8 +339,8 @@ Stacked card
.card-subtitle {
--#{$prefix}card-subtitle-margin-start: #{$card-subtitle-margin-start};
margin-bottom: $card-title-spacer-y;
font-weight: 400;
color: var(--#{$prefix}secondary);
font-weight: normal;
.card-header & {
margin: 0;
@@ -383,7 +383,7 @@ Stacked card
}
}
@include media-print {
@include media-print() {
padding: 0;
}
@@ -402,8 +402,8 @@ Card optinos
.card-options {
--#{$prefix}card-options-top: #{$card-options-top};
--#{$prefix}card-options-inset: #{$card-options-inset};
top: var(--#{$prefix}card-options-top);
inset-inline-end: var(--#{$prefix}card-options-inset);
top: var(--#{$prefix}card-options-top);
display: flex;
margin-inline-start: auto;
}
@@ -422,9 +422,9 @@ Card status
*/
.card-status-top {
position: absolute;
top: 0;
inset-inline-end: 0;
inset-inline-start: 0;
inset-inline-end: 0;
top: 0;
height: $card-status-size;
@include border-radius(var(--#{$prefix}card-border-radius) var(--#{$prefix}card-border-radius) 0 0);
}
@@ -554,8 +554,8 @@ Card avatar
--#{$prefix}card-avatar-ring-width: #{$card-avatar-ring-width};
margin-inline-start: auto;
margin-inline-end: auto;
box-shadow: 0 0 0 var(--#{$prefix}card-avatar-ring-width) var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
margin-top: calc(-1 * calc(var(--#{$prefix}avatar-size) * 0.5));
box-shadow: 0 0 0 var(--#{$prefix}card-avatar-ring-width) var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
}
/*
@@ -567,10 +567,10 @@ Card list group
}
.list-group-item {
padding-inline-end: $card-spacer-x;
padding-inline-start: $card-spacer-x;
border-inline-end: 0;
padding-inline-end: $card-spacer-x;
border-inline-start: 0;
border-inline-end: 0;
border-radius: 0;
&:last-child {
@@ -597,8 +597,8 @@ Card list group
&.active,
&:active,
&:hover {
border-color: $card-border-color;
color: var(--#{$prefix}body-color);
border-color: $card-border-color;
}
&.active {
@@ -662,8 +662,8 @@ Card list group
}
.nav-tabs + .tab-content .card {
border-end-start-radius: var(--#{$prefix}card-border-radius);
border-start-start-radius: 0 !important;
border-end-start-radius: var(--#{$prefix}card-border-radius);
}
.tab-content:has(+ .nav-tabs) .card {
core/scss/ui/_carousel.scss
+10 -10
View File
@@ -8,14 +8,14 @@
inset-inline-start: auto;
top: 0;
margin: 0 var(--#{$prefix}carousel-indicators-vertical-margin-inline-end) 0 0;
flex-direction: column;
margin: 0 var(--#{$prefix}carousel-indicators-vertical-margin-inline-end) 0 0;
[data-bs-target],
[data-target] {
margin: $carousel-indicator-spacer 0 $carousel-indicator-spacer;
width: $carousel-indicator-height;
height: $carousel-indicator-width;
margin: $carousel-indicator-spacer 0 $carousel-indicator-spacer;
border: 0;
border-inline-start: $carousel-indicator-hit-area-height var(--#{$prefix}border-style) transparent;
border-inline-end: $carousel-indicator-hit-area-height var(--#{$prefix}border-style) transparent;
@@ -27,9 +27,9 @@
[data-target] {
width: $carousel-indicator-dot-width;
height: $carousel-indicator-dot-width;
@include border-radius(var(--#{$prefix}border-radius-pill));
border: $carousel-indicator-hit-area-height var(--#{$prefix}border-style) transparent;
margin: 0;
border: $carousel-indicator-hit-area-height var(--#{$prefix}border-style) transparent;
@include border-radius(var(--#{$prefix}border-radius-pill));
}
}
@@ -38,21 +38,21 @@
[data-target] {
width: $carousel-indicator-thumb-width * 0.5;
height: auto;
margin: 0 $carousel-indicator-spacer;
background: no-repeat center/cover;
border: 0;
@include border-radius(var(--#{$prefix}border-radius));
box-shadow: $box-shadow;
margin: 0 $carousel-indicator-spacer;
opacity: $carousel-indicator-thumb-opacity;
@include border-radius(var(--#{$prefix}border-radius));
@include media-breakpoint-up(lg) {
width: $carousel-indicator-thumb-width;
}
&:before {
content: '';
padding-top: var(--#{$prefix}aspect-ratio, 100%);
&::before {
display: block;
padding-top: var(--#{$prefix}aspect-ratio, 100%);
content: '';
}
}
@@ -65,11 +65,11 @@
}
.carousel-caption-background {
background: red;
position: absolute;
inset-inline-start: 0;
inset-inline-end: 0;
bottom: 0;
height: 90%;
background: red;
background: linear-gradient(0deg, rgba($dark, 0.9), rgba($dark, 0));
}
core/scss/ui/_charts.scss
+4 -4
View File
@@ -39,8 +39,8 @@ Chart sparkline
position: relative;
width: var(--#{$prefix}chart-sparkline-width);
height: var(--#{$prefix}chart-sparkline-height);
line-height: 1;
min-height: 0 !important;
line-height: 1;
}
.chart-sparkline-sm {
@@ -65,10 +65,10 @@ Chart sparkline
--#{$prefix}chart-sparkline-label-icon-size: #{$chart-sparkline-label-icon-size};
position: absolute;
top: 0;
inset-inline-end: 0;
bottom: 0;
inset-inline-start: 0;
inset-inline-end: 0;
top: 0;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
core/scss/ui/_chat.scss
+2 -2
View File
@@ -13,10 +13,10 @@
}
.chat-bubble {
position: relative;
padding: var(--#{$prefix}chat-bubble-padding);
background: var(--#{$prefix}bg-surface-secondary);
@include border-radius(var(--#{$prefix}border-radius-lg));
padding: var(--#{$prefix}chat-bubble-padding);
position: relative;
}
.chat-bubble-me {
core/scss/ui/_close.scss
+6 -6
View File
@@ -9,24 +9,24 @@
--#{$prefix}btn-close-focus-opacity: #{$btn-close-focus-opacity};
--#{$prefix}btn-close-disabled-opacity: #{$btn-close-disabled-opacity};
--#{$prefix}btn-close-size: #{$btn-close-width};
display: block;
width: var(--#{$prefix}btn-close-size);
height: var(--#{$prefix}btn-close-size);
padding: $btn-close-padding-y $btn-close-padding-x;
color: var(--#{$prefix}btn-close-color);
mask: var(--#{$prefix}btn-close-bg) no-repeat center/calc(var(--#{$prefix}btn-close-size) * 0.75);
cursor: pointer;
background-color: var(--#{$prefix}btn-close-color);
border: 0;
@include border-radius(var(--tblr-border-radius));
opacity: var(--#{$prefix}btn-close-opacity);
cursor: pointer;
display: block;
mask: var(--#{$prefix}btn-close-bg) no-repeat center/calc(var(--#{$prefix}btn-close-size) * 0.75);
@include border-radius(var(--tblr-border-radius));
&:hover {
color: var(--#{$prefix}btn-close-color);
text-decoration: none;
opacity: var(--#{$prefix}btn-close-hover-opacity);
background-color: var(--#{$prefix}btn-close-color);
opacity: var(--#{$prefix}btn-close-hover-opacity);
}
&:focus {
@@ -42,7 +42,7 @@
opacity: var(--#{$prefix}btn-close-disabled-opacity);
}
@include media-print {
@include media-print() {
display: none;
}
}
core/scss/ui/_datagrid.scss
+2 -2
View File
@@ -10,11 +10,11 @@
--#{$prefix}datagrid-title-margin-bottom: #{$datagrid-title-margin-bottom};
display: grid;
grid-gap: var(--#{$prefix}datagrid-padding);
grid-template-columns: repeat(auto-fit, minmax(var(--#{$prefix}datagrid-item-width), 1fr));
grid-gap: var(--#{$prefix}datagrid-padding);
}
.datagrid-title {
@include subheader;
@include subheader();
margin-bottom: var(--#{$prefix}datagrid-title-margin-bottom);
}
core/scss/ui/_dropdowns.scss
+23 -22
View File
@@ -14,27 +14,27 @@
background-clip: border-box;
&.card {
padding: 0;
min-width: $dropdown-max-width;
display: none;
min-width: $dropdown-max-width;
padding: 0;
&.show {
display: flex;
}
}
@include media-print {
@include media-print() {
display: none;
}
}
.dropdown-item {
min-width: $dropdown-min-width;
display: flex;
gap: var(--#{$prefix}dropdown-item-gap);
align-items: center;
min-width: $dropdown-min-width;
margin: 0;
line-height: $line-height-base;
gap: var(--#{$prefix}dropdown-item-gap);
}
.dropdown-item-icon {
@@ -45,15 +45,15 @@
}
.dropdown-item-indicator {
height: var(--#{$prefix}dropdown-item-icon-size);
display: inline-flex;
align-items: center;
height: var(--#{$prefix}dropdown-item-icon-size);
line-height: 1;
vertical-align: bottom;
align-items: center;
}
.dropdown-header {
@include subheader;
@include subheader();
padding-bottom: var(--#{$prefix}dropdown-header-padding-bottom);
pointer-events: none;
}
@@ -78,48 +78,49 @@
}
.dropdown-menu-arrow {
&:before {
content: '';
&::before {
position: absolute;
top: calc(-1 * var(--#{$prefix}dropdown-arrow-offset));
inset-inline-start: var(--#{$prefix}dropdown-arrow-inset);
top: calc(-1 * var(--#{$prefix}dropdown-arrow-offset));
z-index: -1;
display: block;
background: inherit;
width: 14px;
height: 14px;
/*rtl:ignore*/
transform: rotate(45deg);
transform-origin: center;
clip: rect(0, 9px, 9px, 0);
content: '';
background: inherit;
border: 1px solid;
border-color: inherit;
z-index: -1;
clip: rect(0px, 9px, 9px, 0px);
/* rtl:ignore */
transform: rotate(45deg);
transform-origin: center;
}
&.dropdown-menu-end {
&:before {
inset-inline-end: var(--#{$prefix}dropdown-arrow-inset);
&::before {
inset-inline-start: auto;
inset-inline-end: var(--#{$prefix}dropdown-arrow-inset);
}
}
}
.dropend {
> .dropdown-menu {
margin-top: subtract(calc(-1 * $dropdown-padding-y), 1px);
margin-inline-start: calc(-1 * var(--#{$prefix}dropdown-dropend-offset));
margin-top: subtract(calc(-1 * $dropdown-padding-y), 1px);
}
.dropdown-toggle {
&:after {
&::after {
margin-inline-start: auto;
}
}
}
.dropdown-menu-card {
padding: 0;
min-width: var(--#{$prefix}dropdown-menu-card-min-width);
padding: 0;
> .card {
margin: 0;
core/scss/ui/_empty.scss
+2 -2
View File
@@ -25,9 +25,9 @@
}
.empty-icon {
margin: 0 0 var(--#{$prefix}empty-icon-margin-bottom);
width: var(--#{$prefix}empty-icon-size);
height: var(--#{$prefix}empty-icon-size);
margin: 0 0 var(--#{$prefix}empty-icon-margin-bottom);
line-height: 1;
color: var(--#{$prefix}secondary);
@@ -52,8 +52,8 @@
.empty-title {
font-size: $h2-font-size;
line-height: $h2-line-height;
font-weight: $headings-font-weight;
line-height: $h2-line-height;
}
.empty-title,
core/scss/ui/_flags.scss
+2 -2
View File
@@ -8,14 +8,14 @@
display: inline-block;
width: config.$avatar-size;
aspect-ratio: 1.33333;
vertical-align: bottom;
background: no-repeat center/cover;
box-shadow: config.$flag-box-shadow;
@include config.border-radius(config.$flag-border-radius);
vertical-align: bottom;
&.flag-country-np {
box-shadow: none;
border-radius: 0;
box-shadow: none;
}
}
core/scss/ui/_forms.scss
+9 -9
View File
@@ -17,10 +17,10 @@ Form label
font-weight: var(--#{$prefix}font-weight-medium);
&.required {
&:after {
content: '*';
&::after {
margin-inline-start: var(--#{$prefix}form-label-required-gap);
color: $red;
content: '*';
}
}
}
@@ -76,8 +76,8 @@ Form control
*/
.form-control {
&:-webkit-autofill {
box-shadow: 0 0 0 1000px var(--#{$prefix}bg-surface-secondary) inset;
color: var(--#{$prefix}body-color);
box-shadow: 0 0 0 1000px var(--#{$prefix}bg-surface-secondary) inset;
-webkit-text-fill-color: var(--#{$prefix}body-color);
}
@@ -98,14 +98,14 @@ Form control
}
.form-control-dark {
background-color: rgba($black, 0.1);
color: $white;
background-color: rgba($black, 0.1);
border-color: transparent;
&:focus {
background-color: rgba($black, 0.1);
box-shadow: none;
border-color: rgba($white, 0.24);
box-shadow: none;
}
&::placeholder {
@@ -119,11 +119,11 @@ Form control
.form-control-flush {
padding: 0;
line-height: inherit;
resize: none;
background: none !important;
border-color: transparent !important;
resize: none;
box-shadow: none !important;
line-height: inherit;
}
.form-footer {
@@ -155,12 +155,12 @@ Form help
--#{$prefix}form-help-font-size: #{$form-help-font-size};
display: inline-flex;
font-weight: var(--#{$prefix}font-weight-semibold);
align-items: center;
justify-content: center;
width: var(--#{$prefix}form-help-size);
height: var(--#{$prefix}form-help-size);
font-size: var(--#{$prefix}form-help-font-size);
font-weight: var(--#{$prefix}font-weight-semibold);
color: $form-secondary-color;
text-align: center;
text-decoration: none;
@@ -222,8 +222,8 @@ Input group
}
.input-group-text {
background: $form-check-input-bg;
z-index: 10;
background: $form-check-input-bg;
@include transition($input-transition);
&:first-child {
core/scss/ui/_grid.scss
+4 -4
View File
@@ -22,13 +22,13 @@
@each $name, $value in (0: 0, sm: $grid-row-gutter-sm, md: $grid-row-gutter-md, lg: $grid-row-gutter-lg) {
.row-#{$name} {
--#{$prefix}grid-row-gutter: #{$value};
margin-inline-end: calc(-1 * var(--#{$prefix}grid-row-gutter));
margin-inline-start: calc(-1 * var(--#{$prefix}grid-row-gutter));
margin-inline-end: calc(-1 * var(--#{$prefix}grid-row-gutter));
> .col,
> [class*='col-'] {
padding-inline-end: var(--#{$prefix}grid-row-gutter);
padding-inline-start: var(--#{$prefix}grid-row-gutter);
padding-inline-end: var(--#{$prefix}grid-row-gutter);
}
.card {
@@ -128,9 +128,9 @@
height: 100%;
> :not(template) {
flex: 1;
display: flex;
justify-content: center;
flex: 1;
flex-direction: column;
justify-content: center;
}
}
core/scss/ui/_icons.scss
+1 -1
View File
@@ -5,11 +5,11 @@
.icon {
--#{$prefix}icon-size: #{$font-size-base * $line-height-base};
display: inline-block;
width: var(--#{$prefix}icon-size);
height: var(--#{$prefix}icon-size);
font-size: var(--#{$prefix}icon-size);
vertical-align: bottom;
display: inline-block;
transform-origin: center;
@if $icon-stroke-width {
core/scss/ui/_images.scss
+1 -1
View File
@@ -4,8 +4,8 @@
.img-responsive {
--#{$prefix}img-responsive-ratio: #{math.percentage(0.75)};
background: no-repeat center/cover;
padding-top: var(--#{$prefix}img-responsive-ratio);
background: no-repeat center/cover;
}
.img-responsive-grid {
core/scss/ui/_legend.scss
+2 -2
View File
@@ -6,9 +6,9 @@ Legend
.legend {
--#{$prefix}legend-size: #{$legend-size};
display: inline-block;
background: $legend-bg;
width: var(--#{$prefix}legend-size);
height: var(--#{$prefix}legend-size);
@include border-radius($legend-border-radius);
background: $legend-bg;
border: 1px solid var(--#{$prefix}border-color-translucent);
@include border-radius($legend-border-radius);
}
core/scss/ui/_lists.scss
+5 -5
View File
@@ -8,13 +8,13 @@
}
.list-group-header {
background: $list-group-header-bg;
padding: var(--#{$prefix}list-group-header-padding-y) $list-group-item-padding-x;
font-size: $h5-font-size;
font-weight: var(--#{$prefix}font-weight-medium);
line-height: 1;
text-transform: uppercase;
color: $list-group-header-color;
text-transform: uppercase;
background: $list-group-header-bg;
border-bottom: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
.list-group-flush > & {
@@ -44,8 +44,8 @@
.list-bordered {
.list-item {
border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
margin-top: -1px;
border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
&:first-child {
border-top: none;
@@ -119,8 +119,8 @@ Inline list
}
.list-inline-dots {
.list-inline-item + .list-inline-item:before {
content: ' · ';
.list-inline-item + .list-inline-item::before {
margin-inline-end: $list-inline-padding;
content: ' · ';
}
}
core/scss/ui/_loaders.scss
+9 -9
View File
@@ -8,21 +8,21 @@
color: $blue;
vertical-align: middle;
&:after {
&::after {
position: absolute;
top: 0;
inset-inline-start: 0;
top: 0;
width: 100%;
height: 100%;
content: '';
border: 1px var(--#{$prefix}border-style);
border-color: transparent;
border-top-color: currentColor;
border-inline-start-color: currentColor;
@include border-radius(var(--#{$prefix}border-radius-pill));
border-top-color: currentColor;
animation: rotate-360 0.6s linear;
animation-iteration-count: infinite;
@include border-radius(var(--#{$prefix}border-radius-pill));
}
}
@@ -34,9 +34,9 @@ Dimmer
.loader {
position: absolute;
top: 50%;
inset-inline-end: 0;
inset-inline-start: 0;
inset-inline-end: 0;
top: 50%;
display: none;
margin: 0 auto;
transform: translateY(-50%);
@@ -56,7 +56,7 @@ Dimmer
@keyframes animated-dots {
0% {
/*rtl:ignore*/
/* rtl:ignore */
transform: translateX(calc(var(--#{$prefix}dir) * -100%));
}
}
@@ -66,7 +66,7 @@ Dimmer
overflow: hidden;
vertical-align: bottom;
&:after {
&::after {
display: inline-block;
content: '...';
animation: animated-dots 1.2s steps(4, jump-none) infinite;
core/scss/ui/_markdown.scss
+3 -3
View File
@@ -13,8 +13,8 @@ Prose (formerly markdown)
--#{$prefix}markdown-blockquote-padding-y: #{$markdown-blockquote-padding-y};
--#{$prefix}markdown-blockquote-padding-x: #{$markdown-blockquote-padding-x};
--#{$prefix}markdown-pre-max-height: #{$markdown-pre-max-height};
line-height: $markdown-line-height;
font-size: $markdown-font-size;
line-height: $markdown-line-height;
> :first-child {
margin-top: 0;
@@ -58,9 +58,9 @@ Prose (formerly markdown)
}
> blockquote {
font-size: $h3-font-size;
margin: var(--#{$prefix}markdown-blockquote-margin-y) 0;
padding: var(--#{$prefix}markdown-blockquote-padding-y) var(--#{$prefix}markdown-blockquote-padding-x);
margin: var(--#{$prefix}markdown-blockquote-margin-y) 0;
font-size: $h3-font-size;
}
> img,
core/scss/ui/_modals.scss
+8 -8
View File
@@ -4,18 +4,18 @@
.modal-header {
> .btn-close {
position: absolute;
top: 0;
inset-inline-end: 0;
top: 0;
z-index: 10;
width: $modal-header-height;
height: $modal-header-height;
margin: 0;
padding: 0;
z-index: 10;
margin: 0;
}
}
.modal-body {
@include scrollbar;
@include scrollbar();
.modal-title {
margin-bottom: var(--#{$prefix}modal-body-title-margin-bottom);
@@ -28,9 +28,9 @@
.modal-status {
position: absolute;
top: 0;
inset-inline-start: 0;
inset-inline-end: 0;
top: 0;
height: $modal-status-size;
background: var(--#{$prefix}secondary);
@include border-radius($modal-content-border-radius $modal-content-border-radius 0 0);
@@ -39,15 +39,15 @@
.modal-header {
align-items: center;
min-height: $modal-header-height;
background: $modal-header-bg;
padding: 0 $modal-header-height 0 $modal-inner-padding;
background: $modal-header-bg;
}
.modal-title {
font-size: $h3-font-size;
font-weight: $headings-font-weight;
color: $headings-color;
line-height: $line-height-base;
color: $headings-color;
}
.modal-footer {
@@ -73,7 +73,7 @@
--#{$prefix}modal-body-title-margin-bottom: #{$modal-body-title-margin-bottom};
--#{$prefix}modal-footer-padding-y: #{$modal-footer-padding-y};
@include media-print {
@include media-print() {
display: none !important;
}
}
core/scss/ui/_nav.scss
+3 -3
View File
@@ -16,9 +16,9 @@
}
.nav {
padding-inline-start: var(--#{$prefix}nav-vertical-nested-padding-start);
margin-inline-start: var(--#{$prefix}nav-vertical-nested-margin-start);
border-inline-start: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
padding-inline-start: var(--#{$prefix}nav-vertical-nested-padding-start);
}
.nav-link.active,
@@ -81,12 +81,12 @@
}
.nav-link-toggle {
margin-inline-start: auto;
padding: 0 var(--#{$prefix}nav-link-toggle-padding-x);
margin-inline-start: auto;
@include transition(transform $transition-time);
@include caret();
&:after {
&::after {
margin: 0;
}
core/scss/ui/_offcanvas.scss
+1 -1
View File
@@ -1,7 +1,7 @@
@use '../config' as *;
.offcanvas {
@include media-print {
@include media-print() {
display: none;
}
}
core/scss/ui/_pagination.scss
+4 -4
View File
@@ -1,15 +1,15 @@
@use '../config' as *;
.pagination {
gap: var(--#{$prefix}pagination-gap);
margin: 0;
line-height: var(--#{$prefix}body-line-height);
user-select: none;
--#{$prefix}pagination-gap: #{$pagination-gap};
--#{$prefix}pagination-link-min-width: #{$pagination-link-min-width};
--#{$prefix}page-text-padding-x: #{$page-text-padding-x};
user-select: none;
gap: var(--#{$prefix}pagination-gap);
line-height: var(--#{$prefix}body-line-height);
@include media-print {
@include media-print() {
display: none;
}
}
core/scss/ui/_patterns.scss
+13 -13
View File
@@ -32,8 +32,8 @@
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;
background-size: var(--#{$prefix}pattern-size) var(--#{$prefix}pattern-size);
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
}
@@ -48,8 +48,8 @@
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;
background-size: calc(var(--#{$prefix}pattern-size) * 2) calc(var(--#{$prefix}pattern-size) * 2);
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
}
@@ -58,10 +58,10 @@
--#{$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: #{$pattern-size};
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;
background-size: var(--#{$prefix}pattern-size) var(--#{$prefix}pattern-size);
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
}
@@ -70,10 +70,10 @@
--#{$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: #{$pattern-size};
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;
background-size: var(--#{$prefix}pattern-size) var(--#{$prefix}pattern-size);
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
}
@@ -83,11 +83,11 @@
--#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
--#{$prefix}pattern-size: #{$pattern-size};
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;
background-size: calc(var(--#{$prefix}pattern-size) * 2) calc(var(--#{$prefix}pattern-size) * 2);
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
}
@@ -97,9 +97,9 @@
--#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
--#{$prefix}pattern-size: #{$pattern-size};
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;
background-size: calc(var(--#{$prefix}pattern-size) * 2) calc(var(--#{$prefix}pattern-size) * 2);
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
}
@@ -109,17 +109,17 @@
--#{$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;
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);
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
}
@@ -129,11 +129,11 @@
--#{$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;
background-size: calc(var(--#{$prefix}pattern-size) * 2) calc(var(--#{$prefix}pattern-size) * 2);
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
}
@@ -182,8 +182,8 @@
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;
background-size: calc(2 * var(--#{$prefix}pattern-size)) calc(2 * var(--#{$prefix}pattern-size));
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
}
core/scss/ui/_payments.scss
+3 -3
View File
@@ -4,12 +4,12 @@
@use '../config' as *;
.payment {
display: inline-block;
height: config.$avatar-size;
aspect-ratio: 1.66666;
display: inline-block;
background: no-repeat center/100% 100%;
vertical-align: bottom;
font-style: normal;
vertical-align: bottom;
background: no-repeat center/100% 100%;
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
@include config.border-radius(var(--#{config.$prefix}border-radius));
}
core/scss/ui/_popovers.scss
+1 -1
View File
@@ -1,7 +1,7 @@
@use '../config' as *;
.popover {
@include media-print {
@include media-print() {
display: none;
}
}
core/scss/ui/_progress.scss
+15 -15
View File
@@ -2,14 +2,14 @@
@keyframes progress-indeterminate {
0% {
inset-inline-end: 100%;
inset-inline-start: -35%;
inset-inline-end: 100%;
}
100%,
60% {
inset-inline-end: -90%;
inset-inline-start: 100%;
inset-inline-end: -90%;
}
}
@@ -61,18 +61,18 @@ Progress bar
}
.progress-bar-indeterminate {
&:after,
&:before {
&::after,
&::before {
position: absolute;
inset-inline-start: 0;
top: 0;
bottom: 0;
inset-inline-start: 0;
content: '';
background-color: inherit;
will-change: left, right;
}
&:before {
&::before {
animation: progress-indeterminate 1.5s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
}
}
@@ -92,8 +92,8 @@ Progressbg
--#{$prefix}progressbg-padding-y: #{$progressbg-padding-y};
--#{$prefix}progressbg-padding-x: #{$progressbg-padding-x};
position: relative;
padding: var(--#{$prefix}progressbg-padding-y) var(--#{$prefix}progressbg-padding-x);
display: flex;
padding: var(--#{$prefix}progressbg-padding-y) var(--#{$prefix}progressbg-padding-x);
}
.progressbg-text {
@@ -101,26 +101,26 @@ Progressbg
z-index: 1;
display: flex;
align-items: center;
@include text-truncate;
@include text-truncate();
}
.progressbg-progress {
position: absolute;
top: 0;
inset-inline-end: 0;
bottom: 0;
inset-inline-start: 0;
inset-inline-end: 0;
top: 0;
bottom: 0;
z-index: 0;
height: 100%;
background: transparent;
pointer-events: none;
background: transparent;
}
.progressbg-value {
--#{$prefix}progressbg-value-padding-start: #{$progressbg-value-padding-start};
font-weight: var(--#{$prefix}font-weight-medium);
margin-inline-start: auto;
padding-inline-start: var(--#{$prefix}progressbg-value-padding-start);
margin-inline-start: auto;
font-weight: var(--#{$prefix}font-weight-medium);
}
/**
@@ -130,11 +130,11 @@ Progress steps
--#{$prefix}progress-steps-gap: #{$progress-steps-gap};
display: flex;
flex-wrap: nowrap;
gap: var(--#{$prefix}progress-steps-gap);
width: 100%;
padding: 0;
margin: 0;
list-style: none;
gap: var(--#{$prefix}progress-steps-gap);
}
.progress-steps-item {
core/scss/ui/_ribbons.scss
+30 -30
View File
@@ -17,9 +17,14 @@
--#{$prefix}ribbon-bookmark-notch-width: #{$ribbon-bookmark-notch-width};
position: absolute;
top: var(--#{$prefix}ribbon-offset);
inset-inline-end: calc(-1 * var(--#{$prefix}ribbon-margin));
top: var(--#{$prefix}ribbon-offset);
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: var(--#{$prefix}ribbon-min-size);
min-height: var(--#{$prefix}ribbon-min-size);
padding: var(--#{$prefix}ribbon-padding-y) var(--#{$prefix}ribbon-padding-x);
font-size: var(--#{$prefix}ribbon-font-size);
font-weight: var(--#{$prefix}font-weight-semibold);
@@ -30,13 +35,8 @@
background: var(--#{$prefix}primary);
border-color: var(--#{$prefix}primary);
@include border-radius(var(--#{$prefix}ribbon-border-radius) 0 var(--#{$prefix}ribbon-border-radius) var(--#{$prefix}ribbon-border-radius));
display: inline-flex;
align-items: center;
justify-content: center;
min-height: var(--#{$prefix}ribbon-min-size);
min-width: var(--#{$prefix}ribbon-min-size);
&:before {
&::before {
position: absolute;
inset-inline-end: 0;
bottom: 100%;
@@ -46,8 +46,8 @@
filter: brightness(70%);
border: calc(var(--#{$prefix}ribbon-margin) * 0.5) var(--#{$prefix}border-style);
border-color: inherit;
border-top-color: transparent;
border-inline-end-color: transparent;
border-top-color: transparent;
}
@if $enable-extra-colors {
@@ -70,45 +70,45 @@
}
.ribbon-top {
top: calc(-1 * var(--#{$prefix}ribbon-margin));
inset-inline-end: var(--#{$prefix}ribbon-offset);
top: calc(-1 * var(--#{$prefix}ribbon-margin));
width: var(--#{$prefix}ribbon-top-width);
padding: var(--#{$prefix}ribbon-top-padding-y) 0;
@include border-radius(0 var(--#{$prefix}ribbon-border-radius) var(--#{$prefix}ribbon-border-radius) var(--#{$prefix}ribbon-border-radius));
&:before {
top: 0;
&::before {
inset-inline-end: 100%;
top: 0;
bottom: auto;
border-color: inherit;
border-top-color: transparent;
border-inline-start-color: transparent;
border-top-color: transparent;
}
&.ribbon-start {
inset-inline-end: auto;
inset-inline-start: var(--#{$prefix}ribbon-offset);
inset-inline-end: auto;
&:before {
top: 0;
inset-inline-end: 100%;
&::before {
inset-inline-start: auto;
inset-inline-end: 100%;
top: 0;
}
}
}
.ribbon-start {
inset-inline-end: auto;
inset-inline-start: calc(-1 * var(--#{$prefix}ribbon-margin));
inset-inline-end: auto;
@include border-radius(0 var(--#{$prefix}ribbon-border-radius) var(--#{$prefix}ribbon-border-radius) var(--#{$prefix}ribbon-border-radius));
&:before {
&::before {
inset-inline-start: 0;
top: auto;
bottom: 100%;
inset-inline-start: 0;
border-color: inherit;
border-top-color: transparent;
border-inline-start-color: transparent;
border-top-color: transparent;
}
}
@@ -121,44 +121,44 @@
padding-inline-start: var(--#{$prefix}ribbon-padding-y);
@include border-radius(0 0 var(--#{$prefix}ribbon-border-radius) 0);
&:after {
&::after {
position: absolute;
top: 0;
inset-inline-end: 100%;
top: 0;
display: block;
width: 0;
height: 0;
content: '';
border: var(--#{$prefix}ribbon-bookmark-border-size) var(--#{$prefix}border-style);
border-color: inherit;
border-inline-end-width: 0;
border-inline-start-color: transparent;
border-inline-start-width: var(--#{$prefix}ribbon-bookmark-notch-width);
border-inline-end-width: 0;
}
&.ribbon-left {
padding-inline-end: var(--#{$prefix}ribbon-bookmark-notch-width);
&:after {
inset-inline-end: auto;
&::after {
inset-inline-start: 100%;
inset-inline-end: auto;
border-inline-start-width: 0;
border-inline-end-color: transparent;
border-inline-end-width: var(--#{$prefix}ribbon-bookmark-notch-width);
border-inline-start-width: 0;
}
}
&.ribbon-top {
padding-inline-start: 0;
padding-inline-end: 0;
padding-bottom: var(--#{$prefix}ribbon-padding-y);
padding-inline-start: 0;
@include border-radius(0 var(--#{$prefix}ribbon-border-radius) 0 0);
&:after {
top: 100%;
inset-inline-end: 0;
&::after {
inset-inline-start: 0;
inset-inline-end: 0;
top: 100%;
border-color: inherit;
border-width: var(--#{$prefix}ribbon-bookmark-border-size);
border-top-width: 0;
core/scss/ui/_segmented.scss
+7 -7
View File
@@ -25,31 +25,31 @@
.nav-link {
display: inline-flex;
flex-grow: 1;
gap: calc(#{$nav-segmented-link-gap} + var(--#{$prefix}nav-link-gap));
align-items: center;
margin: 0;
font-size: var(--#{$prefix}nav-font-size);
justify-content: center;
min-width: calc(var(--#{$prefix}nav-height) - 2 * var(--#{$prefix}nav-padding));
height: calc(var(--#{$prefix}nav-height) - 2 * var(--#{$prefix}nav-padding));
padding: 0 calc(var(--#{$prefix}nav-link-padding-x) - 2px);
border: 1px solid transparent;
background: transparent;
margin: 0;
font-size: var(--#{$prefix}nav-font-size);
color: var(--#{$prefix}secondary);
text-align: center;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
background: transparent;
border: 1px solid transparent;
transition:
background-color $transition-time,
color $transition-time;
@include border-radius(var(--#{$prefix}nav-radius));
flex-grow: 1;
justify-content: center;
&:hover,
&.hover {
background: rgba(0, 0, 0, 0.04);
color: var(--#{$prefix}body-color);
background: rgba(0, 0, 0, 0.04);
}
&.disabled,
core/scss/ui/_signature.scss
+4 -4
View File
@@ -4,19 +4,19 @@
--#{$prefix}signature-padding: var(--#{$prefix}spacer-1);
--#{$prefix}signature-border-radius: var(--#{$prefix}border-radius);
--#{$prefix}signature-canvas-height: 12.5rem;
border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
padding: var(--#{$prefix}signature-padding);
border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
@include border-radius(var(--#{$prefix}border-radius));
}
.signature-canvas {
border: var(--#{$prefix}border-width) dashed var(--#{$prefix}border-color);
@include border-radius(calc(var(--#{$prefix}signature-border-radius) - var(--#{$prefix}signature-padding)));
display: block;
cursor: crosshair;
width: 100%;
// A fixed height is required: without it the canvas height comes from its own
// width/height attributes, which `resizeCanvas()` rewrites on every resize —
// each run then measures a different `offsetHeight` and the pad drifts.
height: var(--#{$prefix}signature-canvas-height);
cursor: crosshair;
border: var(--#{$prefix}border-width) dashed var(--#{$prefix}border-color);
@include border-radius(calc(var(--#{$prefix}signature-border-radius) - var(--#{$prefix}signature-padding)));
}
core/scss/ui/_social.scss
+1 -1
View File
@@ -8,8 +8,8 @@
display: inline-block;
height: config.$avatar-size;
aspect-ratio: 1;
background: no-repeat center/cover;
vertical-align: bottom;
background: no-repeat center/cover;
}
@each $app in config.$social-apps {
core/scss/ui/_stars.scss
+1 -1
View File
@@ -4,8 +4,8 @@
--#{$prefix}stars-gap: #{$stars-gap};
display: inline-flex;
color: $gray-400;
font-size: $h5-font-size;
color: $gray-400;
.star:not(:first-child) {
margin-inline-start: var(--#{$prefix}stars-gap);
core/scss/ui/_status.scss
+16 -16
View File
@@ -31,12 +31,12 @@
transform: scale(1, 1);
}
80% {
transform: scale(3, 3);
opacity: 0;
transform: scale(3, 3);
}
100% {
transform: scale(3, 3);
opacity: 0;
transform: scale(3, 3);
}
}
@@ -52,19 +52,19 @@
--#{$prefix}status-gap: #{$status-gap};
display: inline-flex;
gap: var(--#{$prefix}status-gap);
align-items: center;
height: var(--#{$prefix}status-height);
padding: var(--#{$prefix}status-padding-y) var(--#{$prefix}status-padding-x);
gap: var(--#{$prefix}status-gap);
color: var(--#{$prefix}status-color);
background: color-transparent(var(--#{$prefix}status-color), 0.1);
margin: 0;
font-size: $font-size-base;
text-transform: none;
letter-spacing: normal;
@include border-radius(var(--#{$prefix}border-radius-pill));
font-weight: var(--#{$prefix}font-weight-medium);
line-height: 1;
margin: 0;
color: var(--#{$prefix}status-color);
text-transform: none;
letter-spacing: normal;
background: color-transparent(var(--#{$prefix}status-color), 0.1);
@include border-radius(var(--#{$prefix}border-radius-pill));
.status-dot {
background: var(--#{$prefix}status-color);
@@ -76,9 +76,9 @@
}
.status-lite {
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color) !important;
background: transparent !important;
color: var(--#{$prefix}body-color) !important;
background: transparent !important;
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color) !important;
}
@each $name, $color in map.merge($theme-colors, $social-colors) {
@@ -103,11 +103,11 @@
}
.status-dot-animated {
&:before {
content: '';
&::before {
position: absolute;
inset: 0;
z-index: 0;
content: '';
background: inherit;
border-radius: inherit;
opacity: 0.6;
@@ -121,8 +121,8 @@
.status-indicator {
--#{$prefix}status-indicator-size: #{$status-indicator-size};
--#{$prefix}status-indicator-color: var(--#{$prefix}status-color, #{$text-secondary});
display: block;
position: relative;
display: block;
width: var(--#{$prefix}status-indicator-size);
height: var(--#{$prefix}status-indicator-size);
}
@@ -132,11 +132,11 @@
position: absolute;
inset-inline-start: 50%;
top: 50%;
margin: calc(var(--#{$prefix}status-circle-size) / -2) 0 0 calc(var(--#{$prefix}status-circle-size) / -2);
width: var(--#{$prefix}status-circle-size);
height: var(--#{$prefix}status-circle-size);
@include border-radius(var(--#{$prefix}border-radius-pill));
margin: calc(var(--#{$prefix}status-circle-size) / -2) 0 0 calc(var(--#{$prefix}status-circle-size) / -2);
background: var(--#{$prefix}status-color);
@include border-radius(var(--#{$prefix}border-radius-pill));
&:nth-child(1) {
z-index: 3;
core/scss/ui/_steps.scss
+28 -26
View File
@@ -40,11 +40,11 @@
position: relative;
flex: 1 1 0;
min-height: var(--#{$prefix}step-item-min-height);
padding-top: calc(var(--#{$prefix}steps-dot-size));
margin-top: 0;
color: inherit;
text-align: center;
cursor: default;
padding-top: calc(var(--#{$prefix}steps-dot-size));
@at-root a#{&} {
cursor: pointer;
@@ -54,12 +54,12 @@
}
}
&:after,
&:before {
&::after,
&::before {
background: var(--#{$prefix}steps-color);
}
&:not(:last-child):after {
&:not(:last-child)::after {
position: absolute;
inset-inline-start: 50%;
width: 100%;
@@ -67,41 +67,42 @@
transform: translateY(-50%);
}
&:after {
&::after {
top: calc(var(--#{$prefix}steps-dot-size) * 0.5);
height: var(--#{$prefix}steps-border-width);
}
&:before {
content: '';
&::before {
position: absolute;
top: 0;
inset-inline-start: 50%;
top: 0;
z-index: 1;
box-sizing: content-box;
display: flex;
align-items: center;
justify-content: center;
@include border-radius(var(--#{$prefix}border-radius-pill));
/*rtl:ignore*/
transform: translateX(calc(var(--#{$prefix}dir) * -50%));
color: var(--#{$prefix}white);
width: var(--#{$prefix}steps-dot-size);
height: var(--#{$prefix}steps-dot-size);
color: var(--#{$prefix}white);
content: '';
/* rtl:ignore */
transform: translateX(calc(var(--#{$prefix}dir) * -50%));
@include border-radius(var(--#{$prefix}border-radius-pill));
}
&.active {
font-weight: var(--#{$prefix}font-weight-semibold);
&:after {
&::after {
background: var(--#{$prefix}steps-inactive-color);
}
& ~ .step-item {
color: var(--#{$prefix}disabled-color);
&:after,
&:before {
&::after,
&::before {
background: var(--#{$prefix}steps-inactive-color);
}
}
@@ -118,7 +119,7 @@
.step-item {
counter-increment: steps;
&:before {
&::before {
content: counter(steps);
}
}
@@ -139,31 +140,32 @@
}
.step-item {
text-align: start;
padding-top: 0;
padding-inline-start: calc(var(--#{$prefix}steps-dot-size) + var(--#{$prefix}steps-vertical-padding-start));
min-height: auto;
padding-inline-start: calc(var(--#{$prefix}steps-dot-size) + var(--#{$prefix}steps-vertical-padding-start));
padding-top: 0;
text-align: start;
&:not(:first-child) {
margin-top: var(--#{$prefix}steps-vertical-item-gap);
}
&:before {
top: var(--#{$prefix}steps-dot-offset);
&::before {
inset-inline-start: 0;
top: var(--#{$prefix}steps-dot-offset);
transform: translate(0, 0);
}
&:not(:last-child) {
&:after {
&::after {
position: absolute;
content: '';
/*rtl:ignore*/
transform: translateX(calc(var(--#{$prefix}dir) * -50%));
top: var(--#{$prefix}steps-dot-offset);
inset-inline-start: calc(var(--#{$prefix}steps-dot-size) * 0.5);
top: var(--#{$prefix}steps-dot-offset);
width: var(--#{$prefix}steps-border-width);
height: calc(100% + var(--#{$prefix}steps-vertical-connector-gap));
content: '';
/* rtl:ignore */
transform: translateX(calc(var(--#{$prefix}dir) * -50%));
}
}
}
core/scss/ui/_switch-icon.scss
+10 -10
View File
@@ -1,16 +1,16 @@
@use '../config' as *;
.switch-icon {
position: relative;
display: inline-block;
line-height: 1;
border: 0;
padding: 0;
background: transparent;
width: $icon-size;
height: $icon-size;
padding: 0;
line-height: 1;
vertical-align: bottom;
position: relative;
cursor: pointer;
background: transparent;
border: 0;
&.disabled {
pointer-events: none;
@@ -40,8 +40,8 @@
.switch-icon-b {
position: absolute;
top: 0;
inset-inline-start: 0;
top: 0;
opacity: 0;
}
@@ -161,13 +161,13 @@
}
.switch-icon-b {
/*rtl:ignore*/
/* rtl:ignore */
transform: translateX(calc(var(--#{$prefix}dir) * 100%));
}
&.active {
.switch-icon-a {
/*rtl:ignore*/
/* rtl:ignore */
transform: translateX(calc(var(--#{$prefix}dir) * -100%));
}
@@ -184,13 +184,13 @@
}
.switch-icon-b {
/*rtl:ignore*/
/* rtl:ignore */
transform: translateX(calc(var(--#{$prefix}dir) * -100%));
}
&.active {
.switch-icon-a {
/*rtl:ignore*/
/* rtl:ignore */
transform: translateX(calc(var(--#{$prefix}dir) * 100%));
}
core/scss/ui/_tables.scss
+21 -21
View File
@@ -5,13 +5,13 @@
thead {
th {
background: $table-th-bg;
@include subheader;
padding-top: $table-th-padding-y;
padding-bottom: $table-th-padding-y;
white-space: nowrap;
background: $table-th-bg;
@include subheader();
@include media-print {
@include media-print() {
background: transparent;
}
}
@@ -51,8 +51,8 @@
}
.td-truncate {
max-width: 1px;
width: 100%;
max-width: 1px;
}
.table-mobile {
@@ -74,14 +74,14 @@
td {
display: block;
padding: $table-cell-padding-x $table-cell-padding-y !important;
border: none;
color: var(--#{$prefix}body-color) !important;
border: none;
&[data-label] {
&:before {
@include subheader;
content: attr(data-label);
&::before {
@include subheader();
display: block;
content: attr(data-label);
}
}
}
@@ -104,18 +104,18 @@ Table sort
.table-sort {
--#{$prefix}table-sort-icon-size: #{$table-sort-icon-size};
--#{$prefix}table-sort-icon-margin-start: #{$table-sort-icon-margin-start};
display: block;
width: 100%;
padding: $table-th-padding-y $table-th-padding-x;
margin: calc(-1 * $table-th-padding-y) calc(-1 * $table-th-padding-x);
font: inherit;
color: inherit;
text-align: inherit;
text-transform: inherit;
letter-spacing: inherit;
border: 0;
background: inherit;
display: block;
width: 100%;
text-align: inherit;
margin: calc(-1 * $table-th-padding-y) calc(-1 * $table-th-padding-x);
padding: $table-th-padding-y $table-th-padding-x;
border: 0;
@include transition(color $transition-time);
&:hover,
@@ -124,22 +124,22 @@ Table sort
color: var(--#{$prefix}body-color);
}
&:after {
content: '';
&::after {
display: inline-flex;
width: var(--#{$prefix}table-sort-icon-size);
height: var(--#{$prefix}table-sort-icon-size);
vertical-align: bottom;
mask-image: $table-sort-bg-image;
background: currentColor;
margin-inline-start: var(--#{$prefix}table-sort-icon-margin-start);
vertical-align: bottom;
content: '';
background: currentColor;
mask-image: $table-sort-bg-image;
}
&.asc:after {
&.asc::after {
mask-image: $table-sort-desc-bg-image;
}
&.desc:after {
&.desc::after {
mask-image: $table-sort-asc-bg-image;
}
}
core/scss/ui/_tags.scss
+10 -10
View File
@@ -12,23 +12,23 @@
--#{$prefix}tag-icon-margin-end: #{$tag-icon-margin-end};
--#{$prefix}tag-icon-size: #{$tag-icon-size};
--#{$prefix}tag-check-size: #{$tag-check-size};
border: $border-width solid var(--#{$prefix}border-color);
display: inline-flex;
gap: var(--#{$prefix}tag-gap);
align-items: center;
height: var(--#{$prefix}tag-height);
@include border-radius(var(--#{$prefix}border-radius));
padding: 0 var(--#{$prefix}tag-padding-x);
background: var(--#{$prefix}bg-surface);
border: $border-width solid var(--#{$prefix}border-color);
box-shadow: var(--#{$prefix}shadow-input);
gap: var(--#{$prefix}tag-gap);
@include border-radius(var(--#{$prefix}border-radius));
.btn-close {
margin-inline-end: var(--#{$prefix}tag-close-margin-end);
margin-inline-start: var(--#{$prefix}tag-close-margin-start);
padding: 0;
width: var(--#{$prefix}tag-close-size);
height: var(--#{$prefix}tag-close-size);
padding: 0;
margin-inline-start: var(--#{$prefix}tag-close-margin-start);
margin-inline-end: var(--#{$prefix}tag-close-margin-end);
font-size: var(--#{$prefix}tag-close-font-size);
}
}
@@ -53,10 +53,10 @@
}
.tag-icon {
color: var(--#{$prefix}secondary);
margin-inline-end: var(--#{$prefix}tag-icon-margin-end);
width: var(--#{$prefix}tag-icon-size);
height: var(--#{$prefix}tag-icon-size);
margin-inline-end: var(--#{$prefix}tag-icon-margin-end);
color: var(--#{$prefix}secondary);
}
.tag-check {
@@ -69,5 +69,5 @@
// Tags list
//
.tags-list {
@include elements-list;
@include elements-list();
}
core/scss/ui/_timeline.scss
+6 -6
View File
@@ -6,8 +6,8 @@
.timeline {
--#{$prefix}timeline-icon-size: #{$avatar-size};
position: relative;
list-style: none;
padding: 0;
list-style: none;
}
//
@@ -19,13 +19,13 @@
&:not(:last-child) {
margin-bottom: var(--#{$prefix}page-padding);
&:before {
content: '';
&::before {
position: absolute;
top: var(--#{$prefix}timeline-icon-size);
inset-inline-start: calc(var(--#{$prefix}timeline-icon-size) / 2);
top: var(--#{$prefix}timeline-icon-size);
bottom: calc(-1 * var(--#{$prefix}page-padding));
width: var(--#{$prefix}border-width);
content: '';
background-color: var(--#{$prefix}border-color);
@include border-radius(var(--#{$prefix}border-radius));
}
@@ -34,15 +34,15 @@
.timeline-event-icon {
position: absolute;
z-index: 5;
display: flex;
align-items: center;
justify-content: center;
width: var(--#{$prefix}timeline-icon-size, $avatar-size);
height: var(--#{$prefix}timeline-icon-size, $avatar-size);
background: var(--#{$prefix}bg-surface-secondary);
color: var(--#{$prefix}secondary);
background: var(--#{$prefix}bg-surface-secondary);
@include border-radius(var(--#{$prefix}border-radius));
z-index: 5;
}
.timeline-event-card {
core/scss/ui/_toasts.scss
+1 -1
View File
@@ -13,7 +13,7 @@
outline: none;
}
@include media-print {
@include media-print() {
display: none;
}
}
core/scss/ui/_toolbar.scss
+2 -2
View File
@@ -4,15 +4,15 @@
--#{$prefix}toolbar-gutter: #{$toolbar-gutter};
display: flex;
flex-wrap: nowrap;
flex-shrink: 0;
flex-wrap: nowrap;
margin: 0 calc(-1 * var(--#{$prefix}toolbar-gutter));
> * {
margin: 0 var(--#{$prefix}toolbar-gutter);
}
@include media-print {
@include media-print() {
display: none;
}
}
core/scss/ui/_tracking.scss
+4 -4
View File
@@ -15,18 +15,18 @@
.tracking-block {
height: auto;
&:before {
content: '';
&::before {
display: block;
padding-top: 100%;
content: '';
}
}
}
.tracking-block {
flex: 1;
@include border-radius(var(--#{$prefix}tracking-block-border-radius));
height: var(--#{$prefix}tracking-height);
min-width: var(--#{$prefix}tracking-block-min-width);
height: var(--#{$prefix}tracking-height);
background: var(--#{$prefix}border-color);
@include border-radius(var(--#{$prefix}tracking-block-border-radius));
}
core/scss/ui/_type.scss
+41 -41
View File
@@ -3,8 +3,8 @@
@forward 'typo/hr';
.lead {
color: var(--#{$prefix}secondary);
font-size: inherit;
color: var(--#{$prefix}secondary);
}
a {
@@ -97,7 +97,7 @@ blockquote {
display: block;
text-align: end;
&:before {
&::before {
content: '— ';
}
}
@@ -125,22 +125,22 @@ dl {
pre {
--#{$prefix}scrollbar-color: #{$pre-color};
padding: $pre-padding;
background: $pre-bg;
color: $pre-color;
@include border-radius(var(--#{$prefix}border-radius));
line-height: $line-height-base;
color: $pre-color;
background: $pre-bg;
@include border-radius(var(--#{$prefix}border-radius));
@include scrollbar;
@include scrollbar();
code {
background: transparent;
padding: 0;
background: transparent;
}
}
code {
background: var(--#{$prefix}code-bg);
padding: 2px 4px;
background: var(--#{$prefix}code-bg);
@include border-radius(var(--#{$prefix}border-radius));
}
@@ -152,14 +152,14 @@ abbr {
kbd,
.kbd {
border: $kbd-border;
display: inline-block;
box-sizing: border-box;
display: inline-block;
max-width: 100%;
font-size: $kbd-font-size;
font-weight: $kbd-font-weight;
line-height: 1;
vertical-align: baseline;
border: $kbd-border;
@include border-radius($kbd-border-radius);
}
@@ -204,8 +204,8 @@ a:hover:has(.icon) {
transition: background-color 0.15s ease-in-out;
&:hover {
text-decoration: none;
color: var(--#{$prefix}primary);
text-decoration: none;
background: color-transparent(var(--#{$prefix}secondary), 0.04);
}
}
@@ -214,7 +214,7 @@ a:hover:has(.icon) {
Subheader
*/
.subheader {
@include subheader;
@include subheader();
}
/**
@@ -222,22 +222,22 @@ Mentions
*/
.mention {
display: inline-block;
box-shadow: var(--#{$prefix}shadow-border);
@include border-radius(var(--#{$prefix}border-radius-pill));
line-height: calc(16em / 12);
padding: calc(2em / 12) calc(8em / 12);
font-size: calc(12em / 14);
font-weight: var(--#{$prefix}font-weight-medium);
line-height: calc(16em / 12);
color: var(--#{$prefix}body-color);
background: var(--#{$prefix}bg-surface-tertiary);
padding: calc(2em / 12) calc(8em / 12);
font-weight: var(--#{$prefix}font-weight-medium);
box-shadow: var(--#{$prefix}shadow-border);
@include border-radius(var(--#{$prefix}border-radius-pill));
@at-root a#{&} {
cursor: pointer;
&:hover,
&.hover {
background: var(--#{$prefix}bg-surface-secondary);
text-decoration: underline;
background: var(--#{$prefix}bg-surface-secondary);
}
}
}
@@ -245,26 +245,26 @@ Mentions
.mention-avatar,
.mention-app,
.mention-color {
display: inline-flex;
width: calc(14em / 12);
height: calc(14em / 12);
@include border-radius(var(--#{$prefix}border-radius-pill));
margin: calc(-2em / 12) calc(4em / 12) 0 calc(-4em / 12);
display: inline-flex;
text-align: center;
vertical-align: middle;
background: no-repeat center center/cover;
box-shadow: var(--#{$prefix}shadow-border);
vertical-align: middle;
text-align: center;
@include border-radius(var(--#{$prefix}border-radius-pill));
}
.mention-app {
box-shadow: none;
background: none;
border-radius: 0;
box-shadow: none;
}
.mention-count {
color: var(--#{$prefix}secondary);
margin-inline-start: calc(8em / 12);
color: var(--#{$prefix}secondary);
}
$text-variants: (
@@ -274,11 +274,11 @@ $text-variants: (
@each $variant, $color in $text-variants {
.text-#{$variant} {
background: color-transparent($color, 0.04);
background: color-transparent($color, 4%);
text-decoration: underline;
text-decoration-thickness: 1px;
text-decoration-color: $color;
background: color-transparent($color, 0.04);
background: color-transparent($color, 4%);
}
}
@@ -288,11 +288,11 @@ $text-variants: (
--#{$prefix}steps-margin-start: #{$steps-margin-start};
--#{$prefix}steps-margin-bottom: #{$steps-margin-bottom};
--#{$prefix}steps-heading-margin-top: #{$steps-heading-margin-top};
margin-inline-start: var(--#{$prefix}steps-margin-start);
padding-inline-start: var(--#{$prefix}steps-padding);
margin-inline-start: var(--#{$prefix}steps-margin-start);
margin-bottom: var(--#{$prefix}steps-margin-bottom);
counter-reset: step;
border-inline-start: 1px solid var(--#{$prefix}border-color);
margin-bottom: var(--#{$prefix}steps-margin-bottom);
h3 {
counter-increment: step;
@@ -301,22 +301,22 @@ $text-variants: (
margin-top: var(--#{$prefix}steps-heading-margin-top) !important;
}
&:before {
content: counter(step);
display: inline-block;
&::before {
position: absolute;
margin-top: 1px;
margin-inline-start: calc(-1 * var(--#{$prefix}steps-padding) - var(--#{$prefix}steps-item-size) / 2);
display: inline-block;
width: var(--#{$prefix}steps-item-size);
height: var(--#{$prefix}steps-item-size);
text-align: center;
color: var(--#{$prefix}body-color);
border: 1px solid var(--#{$prefix}border-color);
background: var(--#{$prefix}bg-surface);
@include border-radius(var(--#{$prefix}border-radius));
line-height: calc(var(--#{$prefix}steps-item-size) - 2px);
margin-inline-start: calc(-1 * var(--#{$prefix}steps-padding) - var(--#{$prefix}steps-item-size) / 2);
margin-top: 1px;
font-size: var(--#{$prefix}font-size-h4);
font-weight: var(--#{$prefix}font-weight-semibold);
line-height: calc(var(--#{$prefix}steps-item-size) - 2px);
color: var(--#{$prefix}body-color);
text-align: center;
content: counter(step);
background: var(--#{$prefix}bg-surface);
border: 1px solid var(--#{$prefix}border-color);
@include border-radius(var(--#{$prefix}border-radius));
}
}
@@ -329,11 +329,11 @@ $text-variants: (
--#{$prefix}callout-margin-bottom: #{$callout-margin-bottom};
--#{$prefix}callout-padding-y: #{$callout-padding-y};
--#{$prefix}callout-padding-x: #{$callout-padding-x};
padding: var(--#{$prefix}callout-padding-y) var(--#{$prefix}callout-padding-x);
margin-bottom: var(--#{$prefix}callout-margin-bottom);
background: var(--#{$prefix}primary-lt);
border: 1px solid var(--#{$prefix}primary-200);
@include border-radius(var(--#{$prefix}border-radius));
padding: var(--#{$prefix}callout-padding-y) var(--#{$prefix}callout-padding-x);
background: var(--#{$prefix}primary-lt);
& > :last-child {
margin-bottom: 0;
core/scss/ui/forms/_form-check.scss
+9 -9
View File
@@ -25,9 +25,9 @@ Form check
.form-check-input {
--#{$prefix}form-check-input-width: #{$form-check-input-width};
margin-top: ($form-check-min-height - $form-check-input-width) * 0.5;
background-size: var(--#{$prefix}form-check-input-width);
margin-top: ($form-check-min-height - $form-check-input-width) * 0.5;
box-shadow: $form-check-input-box-shadow;
.form-switch & {
@@ -41,10 +41,10 @@ Form check
display: block;
&.required {
&:after {
content: '*';
&::after {
margin-inline-start: var(--#{$prefix}form-check-label-required-gap);
color: $red;
content: '*';
}
}
}
@@ -53,9 +53,9 @@ Form check
--#{$prefix}form-check-description-margin-top: #{$form-check-description-margin-top};
display: block;
color: var(--#{$prefix}secondary);
font-size: $h5-font-size;
margin-top: var(--#{$prefix}form-check-description-margin-top);
font-size: $h5-font-size;
color: var(--#{$prefix}secondary);
}
.form-check-single {
@@ -84,15 +84,15 @@ Form switch
--#{$prefix}form-switch-lg-bg-size: #{$form-switch-lg-bg-size};
--#{$prefix}form-switch-lg-input-offset: #{$form-switch-lg-input-offset};
--#{$prefix}form-switch-lg-label-padding-top: #{$form-switch-lg-label-padding-top};
padding-inline-start: var(--#{$prefix}form-switch-lg-padding-start);
min-height: var(--#{$prefix}form-switch-lg-min-height);
padding-inline-start: var(--#{$prefix}form-switch-lg-padding-start);
.form-check-input {
height: var(--#{$prefix}form-switch-lg-height);
width: var(--#{$prefix}form-switch-lg-width);
background-size: var(--#{$prefix}form-switch-lg-bg-size);
height: var(--#{$prefix}form-switch-lg-height);
margin-inline-start: var(--#{$prefix}form-switch-lg-input-offset);
background-size: var(--#{$prefix}form-switch-lg-bg-size);
}
.form-check-label {
core/scss/ui/forms/_form-colorinput.scss
+3 -3
View File
@@ -27,10 +27,10 @@ Color Input
@include border-radius(var(--#{$prefix}border-radius));
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
&:before {
&::before {
position: absolute;
top: 0;
inset-inline-start: 0;
top: 0;
width: 100%;
height: 100%;
content: '';
@@ -50,7 +50,7 @@ Color Input
}
@at-root .form-colorinput-light & {
&:before {
&::before {
background-image: escape-svg($form-check-input-checked-bg-image-dark);
}
}
core/scss/ui/forms/_form-custom.scss
+1 -1
View File
@@ -13,7 +13,7 @@ Bootstrap color input
Remove the cancel buttons in Chrome and Safari on macOS.
*/
[type='search']::-webkit-search-cancel-button {
-webkit-appearance: none;
appearance: none;
}
/**
core/scss/ui/forms/_form-icon.scss
+3 -3
View File
@@ -22,21 +22,21 @@ Icon input
.input-icon-addon {
--#{$prefix}input-icon-addon-width: #{$input-icon-addon-width};
position: absolute;
inset-inline-start: 0;
top: 0;
bottom: 0;
inset-inline-start: 0;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
min-width: var(--#{$prefix}input-icon-addon-width);
height: $input-height;
font-size: 1.2em;
color: var(--#{$prefix}icon-color);
pointer-events: none;
font-size: 1.2em;
&:last-child {
inset-inline-end: 0;
inset-inline-start: auto;
inset-inline-end: 0;
}
}
core/scss/ui/forms/_form-imagecheck.scss
+4 -4
View File
@@ -35,10 +35,10 @@ Image check
border-color: var(--#{$prefix}primary);
}
&:before {
&::before {
position: absolute;
top: var(--#{$prefix}form-imagecheck-check-offset);
inset-inline-start: var(--#{$prefix}form-imagecheck-check-offset);
top: var(--#{$prefix}form-imagecheck-check-offset);
z-index: 1;
display: block;
width: $form-check-input-width;
@@ -72,8 +72,8 @@ Image check
}
.form-imagecheck-image {
max-width: 100%;
display: block;
max-width: 100%;
opacity: 0.64;
@include transition(opacity $transition-time);
@@ -83,8 +83,8 @@ Image check
}
&:last-child {
border-end-end-radius: calc(var(--#{$prefix}form-imagecheck-radius) - 1px);
border-end-start-radius: calc(var(--#{$prefix}form-imagecheck-radius) - 1px);
border-end-end-radius: calc(var(--#{$prefix}form-imagecheck-radius) - 1px);
}
.form-imagecheck:hover &,
core/scss/ui/forms/_form-selectgroup.scss
+9 -9
View File
@@ -7,9 +7,9 @@ Select group
--#{$prefix}form-selectgroup-gap: #{$form-selectgroup-gap};
--#{$prefix}form-selectgroup-icon-margin-x: #{$form-selectgroup-icon-margin-x};
display: inline-flex;
margin: 0;
flex-wrap: wrap;
gap: var(--#{$prefix}form-selectgroup-gap);
margin: 0;
.form-selectgroup-item {
margin: 0;
@@ -21,14 +21,14 @@ Select group
}
.form-selectgroup-item {
display: block;
position: relative;
display: block;
}
.form-selectgroup-input {
position: absolute;
top: 0;
inset-inline-start: 0;
top: 0;
z-index: -1;
opacity: 0;
}
@@ -37,18 +37,18 @@ Select group
position: relative;
display: block;
min-width: $input-height;
margin: 0;
padding: $input-btn-padding-y $input-btn-padding-x;
margin: 0;
font-size: $input-btn-font-size;
line-height: $input-line-height;
color: var(--#{$prefix}secondary);
background: $form-check-input-bg;
text-align: center;
cursor: pointer;
user-select: none;
background: $form-check-input-bg;
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $input-border-color;
@include border-radius(var(--#{$prefix}border-radius));
box-shadow: $input-box-shadow;
@include border-radius(var(--#{$prefix}border-radius));
@include transition(border-color $transition-time, background $transition-time, color $transition-time);
.icon:only-child {
@@ -64,8 +64,8 @@ Select group
display: inline-block;
width: $form-check-input-width;
height: $form-check-input-width;
border: $form-check-input-border;
vertical-align: middle;
border: $form-check-input-border;
box-shadow: $form-check-input-box-shadow;
.form-selectgroup-input[type='checkbox'] + .form-selectgroup-label & {
@@ -95,8 +95,8 @@ Select group
.form-selectgroup-check-floated {
position: absolute;
top: $input-btn-padding-y;
inset-inline-end: $input-btn-padding-y;
top: $input-btn-padding-y;
}
.form-selectgroup-input:checked + .form-selectgroup-label {
@@ -121,9 +121,9 @@ Alternate version of form select group
*/
.form-selectgroup-boxes {
.form-selectgroup-label {
text-align: start;
padding: $card-spacer-x $card-spacer-y;
color: inherit;
text-align: start;
}
.form-selectgroup-input:checked {
core/scss/ui/typo/_hr.scss
+14 -14
View File
@@ -14,58 +14,58 @@ Hr text
--#{$prefix}hr-text-gap: #{$hr-text-gap};
display: flex;
align-items: center;
margin: $hr-margin-y 0;
@include subheader;
height: 1px;
margin: $hr-margin-y 0;
@include subheader();
&:after,
&:before {
&::after,
&::before {
flex: 1 1 auto;
height: 1px;
background-color: var(--#{$prefix}border-color);
}
&:before {
content: '';
&::before {
margin-inline-end: var(--#{$prefix}hr-text-gap);
content: '';
}
&:after {
content: '';
&::after {
margin-inline-start: var(--#{$prefix}hr-text-gap);
content: '';
}
> *:first-child {
padding-inline-end: var(--#{$prefix}hr-text-gap);
padding-inline-start: 0;
padding-inline-end: var(--#{$prefix}hr-text-gap);
color: var(--#{$prefix}secondary);
}
&.hr-text-left,
&.hr-text-start {
&:before {
&::before {
content: none;
}
& > *:first-child {
padding-inline-end: var(--#{$prefix}hr-text-gap);
padding-inline-start: var(--#{$prefix}hr-text-gap);
padding-inline-end: var(--#{$prefix}hr-text-gap);
}
}
&.hr-text-right,
&.hr-text-end {
&:before {
&::before {
content: '';
}
&:after {
&::after {
content: none;
}
& > *:first-child {
padding-inline-end: 0;
padding-inline-start: var(--#{$prefix}hr-text-gap);
padding-inline-end: 0;
}
}
core/scss/utils/_background.scss
+1 -1
View File
@@ -12,6 +12,6 @@
.bg-cover {
background-repeat: no-repeat;
background-size: cover;
background-position: center;
background-size: cover;
}
core/scss/vendor/_apexcharts.scss
Vendored
+7 -7
View File
@@ -1,19 +1,19 @@
@use '../config' as *;
.apexcharts-tooltip {
padding: 0.25rem !important;
font-size: $tooltip-font-size !important;
color: $tooltip-color !important;
background: $tooltip-bg !important;
font-size: $tooltip-font-size !important;
padding: 0.25rem !important;
box-shadow: none !important;
}
.apexcharts-tooltip-title {
background: transparent !important;
border: 0 !important;
padding: 0.25rem 0.5rem !important;
margin: 0 !important;
font-weight: var(--#{$prefix}font-weight-semibold);
padding: 0.25rem 0.5rem !important;
background: transparent !important;
border: 0 !important;
}
.apexcharts-tooltip-y-group {
@@ -21,10 +21,10 @@
}
.apexcharts-tooltip-series-group {
padding: 0 0.5rem 0 !important;
padding: 0 0.5rem !important;
}
.apexcharts-tooltip-marker:before {
.apexcharts-tooltip-marker::before {
font-size: 16px !important;
}
core/scss/vendor/_coloris.scss
Vendored
+11 -11
View File
@@ -1,8 +1,8 @@
@use '../config' as *;
.clr-picker {
box-shadow: var(--#{$prefix}shadow-dropdown);
background-color: var(--#{$prefix}bg-surface);
box-shadow: var(--#{$prefix}shadow-dropdown);
@include border-radius(var(--#{$prefix}border-radius));
}
@@ -13,8 +13,8 @@
input.clr-color {
@include border-radius(var(--#{$prefix}border-radius));
color: var(--#{$prefix}body-color);
border-color: var(--#{$prefix}border-color);
background: transparent;
border-color: var(--#{$prefix}border-color);
&:focus {
@include focus-ring(true);
@@ -24,10 +24,10 @@ input.clr-color {
.clr-swatches {
button {
@include border-radius(var(--#{$prefix}border-radius));
padding: 0 2px 4px 2px;
padding: 0 2px 4px;
&:focus {
@include focus-ring;
@include focus-ring();
}
}
}
@@ -37,14 +37,14 @@ input.clr-color {
overflow: visible;
button,
&:before,
&:after {
&::before,
&::after {
@include border-radius(var(--#{$prefix}border-radius));
}
button {
&:focus {
@include focus-ring;
@include focus-ring();
}
}
}
@@ -53,18 +53,18 @@ input.clr-color {
display: block;
button {
width: 1.5rem;
height: 1.5rem;
inset-inline-start: 6px;
inset-inline-end: auto;
width: 1.5rem;
height: 1.5rem;
@include border-radius(var(--#{$prefix}border-radius));
&:after {
&::after {
box-shadow: inset 0 0 0 1px var(--#{$prefix}border-color-translucent);
}
&:focus {
@include focus-ring;
@include focus-ring();
}
}
core/scss/vendor/_dropzone.scss
Vendored
+4 -4
View File
@@ -1,14 +1,14 @@
@use '../config' as *;
.dropzone {
border: var(--#{$prefix}border-width) dashed var(--#{$prefix}border-color) !important;
color: var(--#{$prefix}secondary) !important;
padding: 1rem !important;
color: var(--#{$prefix}secondary) !important;
border: var(--#{$prefix}border-width) dashed var(--#{$prefix}border-color) !important;
&.dz-drag-hover {
border: var(--#{$prefix}border-width) dashed var(--#{$prefix}primary);
background: color-transparent(var(--#{$prefix}primary), 0.01);
color: var(--#{$prefix}primary);
background: color-transparent(var(--#{$prefix}primary), 0.01);
border: var(--#{$prefix}border-width) dashed var(--#{$prefix}primary);
.dz-message {
opacity: 1;
core/scss/vendor/_fullcalendar.scss
Vendored
+9 -9
View File
@@ -15,11 +15,11 @@
}
.fc-daygrid-dot-event {
background-color: var(--fc-event-bg-color);
border: 1px solid var(--fc-event-border-color);
color: var(--fc-event-text-color);
padding-top: 1px;
padding-bottom: 1px;
color: var(--fc-event-text-color);
background-color: var(--fc-event-bg-color);
border: 1px solid var(--fc-event-border-color);
.fc-event-title {
font-weight: inherit;
@@ -27,14 +27,14 @@
}
.fc-col-header-cell {
background-color: var(--#{$prefix}bg-surface-secondary);
color: var(--#{$prefix}secondary);
text-transform: uppercase;
font-weight: var(--#{$prefix}font-weight-medium);
font-size: var(--#{$prefix}font-size-h5);
padding-top: 0.5rem !important;
padding-bottom: 0.5rem !important;
font-size: var(--#{$prefix}font-size-h5);
font-weight: var(--#{$prefix}font-weight-medium);
line-height: 1;
color: var(--#{$prefix}secondary);
text-transform: uppercase;
background-color: var(--#{$prefix}bg-surface-secondary);
}
.fc-event-time {
@@ -50,8 +50,8 @@
}
.fc-button {
font-weight: var(--#{$prefix}font-weight-medium) !important;
color: var(--#{$prefix}body-color) !important;
background-color: transparent !important;
border-color: var(--#{$prefix}border-color) !important;
font-weight: var(--#{$prefix}font-weight-medium) !important;
}
core/scss/vendor/_jsvectormap.scss
Vendored
+9 -9
View File
@@ -1,22 +1,22 @@
@use '../config' as *;
.jvm-tooltip {
background: var(--#{$prefix}bg-surface-inverted);
color: var(--#{$prefix}text-inverted);
font-family: inherit;
font-size: $h5-font-size;
color: var(--#{$prefix}text-inverted);
background: var(--#{$prefix}bg-surface-inverted);
box-shadow: $card-box-shadow;
}
.jvm-series-container .jvm-legend .jvm-legend-title {
border-bottom: 0;
font-weight: var(--#{$prefix}font-weight-medium);
border-bottom: 0;
}
.jvm-series-container .jvm-legend {
min-width: 8rem;
background-color: var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
min-width: 8rem;
.jvm-legend-inner .jvm-legend-tick {
display: flex;
@@ -30,17 +30,17 @@
}
.jvm-zoom-btn {
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
background: var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
color: var(--#{$prefix}body-color);
padding: 0;
display: flex;
align-items: center;
justify-content: center;
line-height: 1;
width: 1.5rem;
height: 1.5rem;
padding: 0;
font-size: 1rem;
line-height: 1;
color: var(--#{$prefix}body-color);
background: var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
box-shadow: $card-box-shadow;
&.jvm-zoomout {
core/scss/vendor/_litepicker.scss
Vendored
+2 -2
View File
@@ -52,8 +52,8 @@
.container__days {
.day-item {
cursor: pointer !important;
padding: 0.5rem 0 !important;
cursor: pointer !important;
@include transition(color $transition-time, background-color $transition-time, border-color $transition-time);
}
}
@@ -62,8 +62,8 @@
box-shadow: $input-box-shadow;
.container__months {
box-shadow: none;
background-color: var(--#{$prefix}bg-forms);
box-shadow: none;
@include border-radius(calc(var(--#{$prefix}border-radius) - 1px));
}
}
core/scss/vendor/_nouislider.scss
Vendored
+8 -8
View File
@@ -1,11 +1,11 @@
@use '../config' as *;
.noUi-target {
color: $form-range-thumb-bg;
background: none;
border: 0;
box-shadow: none;
background: none;
@include border-radius(0);
color: $form-range-thumb-bg;
}
.noUi-horizontal {
@@ -21,22 +21,22 @@
.noUi-handle {
width: $form-range-thumb-width;
height: $form-range-thumb-height;
background: currentColor;
border: $form-range-thumb-border;
outline: 0;
box-shadow: $form-range-thumb-box-shadow;
@include border-radius($form-range-thumb-border-radius);
background: currentColor;
outline: 0;
&:before,
&:after {
&::before,
&::after {
content: none;
}
.noUi-horizontal & {
inset-inline-end: calc($form-range-thumb-height * -0.5);
top: calc($form-range-thumb-height * -0.5);
width: $form-range-thumb-width;
height: $form-range-thumb-height;
top: calc($form-range-thumb-height * -0.5);
inset-inline-end: calc($form-range-thumb-height * -0.5);
margin: 1px 1px 0 0;
}
core/scss/vendor/_tom-select.scss
Vendored
+7 -7
View File
@@ -41,10 +41,10 @@ $input-border-width: 1px;
}
.ts-dropdown {
background: var(--#{$prefix}bg-surface);
color: var(--#{$prefix}body-color);
box-shadow: var(--#{$prefix}shadow-dropdown);
z-index: $zindex-dropdown;
color: var(--#{$prefix}body-color);
background: var(--#{$prefix}bg-surface);
box-shadow: var(--#{$prefix}shadow-dropdown);
.option {
padding: $dropdown-item-padding-y $dropdown-item-padding-x;
@@ -52,8 +52,8 @@ $input-border-width: 1px;
// Override TomSelect's bootstrap5 preset which references --bs- vars not available in Tabler (#2600)
.active {
background-color: var(--#{$prefix}active-bg);
color: var(--#{$prefix}body-color);
background-color: var(--#{$prefix}active-bg);
}
.active.create {
@@ -61,8 +61,8 @@ $input-border-width: 1px;
}
.optgroup-header {
background: var(--#{$prefix}bg-surface);
color: var(--#{$prefix}body-color);
background: var(--#{$prefix}bg-surface);
}
}
@@ -80,15 +80,15 @@ $input-border-width: 1px;
.ts-wrapper.multi,
.ts-wrapper.multi.disabled {
.ts-control > div {
color: var(--#{$prefix}body-color);
background: var(--#{$prefix}bg-surface-secondary);
border: 1px solid var(--#{$prefix}border-color);
color: var(--#{$prefix}body-color);
}
}
.ts-wrapper.disabled .ts-control {
opacity: 1;
background-color: var(--#{$prefix}secondary-bg);
opacity: 1;
& > div.item {
color: var(--#{$prefix}gray-500);
core/scss/vendor/_wysiwyg.scss
Vendored
+3 -3
View File
@@ -1,13 +1,13 @@
@use '../config' as *;
.tox-hugerte {
font-family: var(--#{$prefix}font-sans-serif) !important;
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color) !important;
@include border-radius($border-radius);
font-family: var(--#{$prefix}font-sans-serif) !important;
}
.tox-toolbar__group {
padding: 0 0.5rem 0;
padding: 0 0.5rem;
}
.tox .tox-toolbar__primary {
@@ -16,9 +16,9 @@
.tox:not(.tox-hugerte-inline) {
.tox-editor-header {
padding: 0 !important;
border-bottom: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color) !important;
box-shadow: none !important;
padding: 0 !important;
}
}
package.json
+5 -3
View File
@@ -15,7 +15,9 @@
"publish": "changeset publish",
"reformat-md": "tsx .build/reformat-mdx.ts",
"lint": "pnpm run lint-md && pnpm run lint-prettier && pnpm run lint-scss-vars",
"lint:fix": "pnpm run lint-md-fix && pnpm run format-prettier",
"lint:fix": "pnpm run lint-md-fix && pnpm run lint:scss:fix && pnpm run format-prettier",
"lint:scss": "pnpm --filter @tabler/core lint:scss",
"lint:scss:fix": "pnpm --filter @tabler/core lint:scss:fix",
"lint-md": "markdownlint --config .markdownlint-docs.json \"docs/pages/**/*.mdx\"",
"lint-md-fix": "markdownlint --fix --config .markdownlint-docs.json \"docs/pages/**/*.mdx\"",
"lint-prettier": "prettier --check \"core/scss/**/*.scss\" \"core/js/**/*.{js,ts}\" \"core/.build/**/*.{ts,mts,mjs}\" \".build/**/*.ts\" \"preview/scss/**/*.scss\" \"preview/js/**/*.{js,ts}\" \"{preview,docs,shared}/**/*.astro\" \"{preview,docs}/**/*.{mjs,mts}\" \"shared/**/*.{js,mjs,mts,ts}\" --cache",
@@ -34,7 +36,7 @@
"devDependencies": {
"@changesets/changelog-github": "^0.7.0",
"@changesets/cli": "^2.31.1",
"@stylistic/stylelint-config": "^5.0.0",
"@stylistic/stylelint-config": "^2.0.0",
"adm-zip": "^0.6.0",
"autoprefixer": "^10.5.4",
"bundlewatch": "^0.4.2",
@@ -53,7 +55,7 @@
"rtlcss": "^4.3.0",
"sass": "1.102.0",
"shelljs": "^0.10.0",
"stylelint": "^17.14.1",
"stylelint": "^16.26.1",
"stylelint-config-twbs-bootstrap": "^16.1.0",
"terser": "^5.49.0",
"tsx": "^4.23.1",
pnpm-lock.yaml
Generated
+107 -199
View File
@@ -22,8 +22,8 @@ importers:
specifier: ^2.31.1
version: 2.31.1(@types/node@26.1.1)
'@stylistic/stylelint-config':
specifier: ^5.0.0
version: 5.0.0(stylelint@17.14.1(supports-color@5.5.0)(typescript@7.0.2))
specifier: ^2.0.0
version: 2.0.0(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2))
adm-zip:
specifier: ^0.6.0
version: 0.6.0
@@ -79,11 +79,11 @@ importers:
specifier: ^0.10.0
version: 0.10.0
stylelint:
specifier: ^17.14.1
version: 17.14.1(supports-color@5.5.0)(typescript@7.0.2)
specifier: ^16.26.1
version: 16.26.1(supports-color@5.5.0)(typescript@7.0.2)
stylelint-config-twbs-bootstrap:
specifier: ^16.1.0
version: 16.1.0(postcss@8.5.23)(stylelint@17.14.1(supports-color@5.5.0)(typescript@7.0.2))
version: 16.1.0(postcss@8.5.23)(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2))
terser:
specifier: ^5.49.0
version: 5.49.0
@@ -706,25 +706,12 @@ packages:
resolution: {integrity: sha512-y7/yvZ2TPAnR9+jnc00klvNNLkJiXFFrQA/hlLCcxA9a2A4zQIOimyFQ9XfwYKiGD1fb5GY8vbKIIgO8d5Tb2A==}
engines: {node: '>= 20.12.0'}
'@csstools/css-calc@3.3.0':
resolution: {integrity: sha512-c5ihYsPkdG6JCkU2zTMm4+k6r7RXuGxtWYhu5DHMIiF1FHzrfmHL5so11AoFpUv/tu61xfcmT4AmKoFfMPoqdQ==}
engines: {node: '>=20.19.0'}
peerDependencies:
'@csstools/css-parser-algorithms': ^4.0.0
'@csstools/css-tokenizer': ^4.0.0
'@csstools/css-parser-algorithms@3.0.5':
resolution: {integrity: sha512-DaDeUkXZKjdGhgYaHNJTV9pV7Y9B3b644jCLs9Upc3VeNGg6LWARAT6O+Q+/COo+2gg/bM5rhpMAtf70WqfBdQ==}
engines: {node: '>=18'}
peerDependencies:
'@csstools/css-tokenizer': ^3.0.4
'@csstools/css-parser-algorithms@4.0.0':
resolution: {integrity: sha512-+B87qS7fIG3L5h3qwJ/IFbjoVoOe/bpOdh9hAjXbvx0o8ImEmUsGXN0inFOnk2ChCFgqkkGFQ+TpM5rbhkKe4w==}
engines: {node: '>=20.19.0'}
peerDependencies:
'@csstools/css-tokenizer': ^4.0.0
'@csstools/css-syntax-patches-for-csstree@1.1.7':
resolution: {integrity: sha512-fQ+05118eQS1cofO3aJpB5efgpBZMvIzwr/sbC8kDLVA5XLG8q1kJV5yzrUAI1f7lvhPnm8fgIjzFB8/O/5Dig==}
peerDependencies:
@@ -737,10 +724,6 @@ packages:
resolution: {integrity: sha512-Vd/9EVDiu6PPJt9yAh6roZP6El1xHrdvIVGjyBsHR0RYwNHgL7FJPyIIW4fANJNG6FtyZfvlRPpFI4ZM/lubvw==}
engines: {node: '>=18'}
'@csstools/css-tokenizer@4.0.0':
resolution: {integrity: sha512-QxULHAm7cNu72w97JUNCBFODFaXpbDg+dP8b/oWFAZ2MTRppA3U00Y2L1HqaS4J6yBqxwa/Y3nMBaxVKbB/NsA==}
engines: {node: '>=20.19.0'}
'@csstools/media-query-list-parser@3.0.1':
resolution: {integrity: sha512-HNo8gGD02kHmcbX6PvCoUuOQvn4szyB9ca63vZHKX5A81QytgDG4oxG4IaEfHTlEZSZ6MjPEMWIVU+zF2PZcgw==}
engines: {node: '>=18'}
@@ -748,24 +731,21 @@ packages:
'@csstools/css-parser-algorithms': ^3.0.1
'@csstools/css-tokenizer': ^3.0.1
'@csstools/media-query-list-parser@5.0.0':
resolution: {integrity: sha512-T9lXmZOfnam3eMERPsszjY5NK0jX8RmThmmm99FZ8b7z8yMaFZWKwLWGZuTwdO3ddRY5fy13GmmEYZXB4I98Eg==}
engines: {node: '>=20.19.0'}
'@csstools/media-query-list-parser@4.0.3':
resolution: {integrity: sha512-HAYH7d3TLRHDOUQK4mZKf9k9Ph/m8Akstg66ywKR4SFAigjs3yBiUeZtFxywiTm5moZMAp/5W/ZuFnNXXYLuuQ==}
engines: {node: '>=18'}
peerDependencies:
'@csstools/css-parser-algorithms': ^4.0.0
'@csstools/css-tokenizer': ^4.0.0
'@csstools/css-parser-algorithms': ^3.0.5
'@csstools/css-tokenizer': ^3.0.4
'@csstools/selector-resolve-nested@4.0.1':
resolution: {integrity: sha512-j3vdQu0XwLME5qOTWxm8cnmvsf423R2YL6DbKklCHZwkDm7UdKNu6RPlw4REIJhSlKBICY3B70/7QZdicLqZgg==}
engines: {node: '>=20.19.0'}
'@csstools/selector-specificity@5.0.0':
resolution: {integrity: sha512-PCqQV3c4CoVm3kdPhyeZ07VmBRdH2EpMFA/pd9OASpOEC3aXNGoqPDAZ80D0cLpMBxnmk0+yNhGsEx31hq7Gtw==}
engines: {node: '>=18'}
peerDependencies:
postcss-selector-parser: ^7.1.1
postcss-selector-parser: ^7.0.0
'@csstools/selector-specificity@6.0.0':
resolution: {integrity: sha512-4sSgl78OtOXEX/2d++8A83zHNTgwCJMaR24FvsYL7Uf/VS8HZk9PTwR51elTbGqMuwH3szLvvOXEaVnqn0Z3zA==}
engines: {node: '>=20.19.0'}
peerDependencies:
postcss-selector-parser: ^7.1.1
'@dual-bundle/import-meta-resolve@4.2.1':
resolution: {integrity: sha512-id+7YRUgoUX6CgV0DtuhirQWodeeA7Lf4i2x71JS/vtA5pRb/hIGWlw+G6MeXvsM+MXrz0VAydTGElX1rAfgPg==}
'@emmetio/abbreviation@2.3.3':
resolution: {integrity: sha512-mgv58UrU3rh4YgbE/TzgLQwJ3pFsHHhCLqY20aJq+9comytTXUDNGG/SMtSeMJdkpxgXSXunBGLD8Boka3JyVA==}
@@ -1793,10 +1773,6 @@ packages:
'@sinclair/typebox@0.34.52':
resolution: {integrity: sha512-XiMQh7qqVlxZzcVD+kkGMNGMzcTrDMLWI7S4x7z1MkCkbDPrekpZXEUK0eZqZFMuHQg2a2DZOcDIh9o5v3Gonw==}
'@sindresorhus/merge-streams@4.0.0':
resolution: {integrity: sha512-tlqY9xq5ukxTUZBmoOp+m61cqwQD5pHJtFY3Mn8CA8ps6yghLH/Hw8UPdqg4OLmFW3IFlcXnQNmo/dh8HzXYIQ==}
engines: {node: '>=18'}
'@standard-schema/spec@1.1.0':
resolution: {integrity: sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==}
@@ -1806,23 +1782,12 @@ packages:
peerDependencies:
stylelint: ^16.8.0
'@stylistic/stylelint-config@5.0.0':
resolution: {integrity: sha512-AW6S27wEm4DzB+uOZMvRkONIu0ba50VRbFte7qYJgGP4dacS8kAuj8HZJ+s+8kE4GK3XXBcSKLb75a+NfJlbiQ==}
engines: {node: '>=20.19.0'}
peerDependencies:
stylelint: ^17.6.0
'@stylistic/stylelint-plugin@3.1.3':
resolution: {integrity: sha512-85fsmzgsIVmyG3/GFrjuYj6Cz8rAM7IZiPiXCMiSMfoDOC1lOrzrXPDk24WqviAghnPqGpx8b0caK2PuewWGFg==}
engines: {node: ^18.12 || >=20.9}
peerDependencies:
stylelint: ^16.8.0
'@stylistic/stylelint-plugin@5.2.1':
resolution: {integrity: sha512-BMRWJVtO16uADJmKcGi6mreei/QYdOviABXuaCeHEc3T3pxo4wFYYSvnxIoyiPVfDJqX+DxQdnGkuc6KxsRaSw==}
peerDependencies:
stylelint: ^17.6.0
'@swc/helpers@0.2.14':
resolution: {integrity: sha512-wpCQMhf5p5GhNg2MmGKXzUNwxe7zRiCsmqYsamez2beP7mKPCSiu+BjZcdN95yYSzO857kr0VfQewmGpS77nqA==}
@@ -2254,6 +2219,9 @@ packages:
balanced-match@1.0.2:
resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
balanced-match@2.0.0:
resolution: {integrity: sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==}
balanced-match@4.0.4:
resolution: {integrity: sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA==}
engines: {node: 18 || 20 || >=22}
@@ -2934,10 +2902,6 @@ packages:
resolution: {integrity: sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==}
engines: {node: '>=10'}
globby@16.2.2:
resolution: {integrity: sha512-NLvV9ubZ6NDsJaOpKPy3cQeJpKi9DcWiyCiFUpJPA0YihRqiE6RWaLUmgNNPr8MgPpLZjnBjSmou7uZBRJv9wA==}
engines: {node: '>=20'}
globjoin@0.1.4:
resolution: {integrity: sha512-xYfnw62CKG8nLkZBfWbhWwDw02CHty86jfPcc2cr3ZfeuK9ysoVPPEUxf21bAD/rWAgk52SuBrLJlefNy8mvFg==}
@@ -2966,10 +2930,6 @@ packages:
resolution: {integrity: sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==}
engines: {node: '>=8'}
has-flag@5.0.1:
resolution: {integrity: sha512-CsNUt5x9LUdx6hnk/E2SZLsDyvfqANZSUq4+D3D8RzDJ2M+HDTIkF60ibS1vHaK55vzgiZw1bEPFG9yH7l33wA==}
engines: {node: '>=12'}
has-symbols@1.1.0:
resolution: {integrity: sha512-1cDNdwJ2Jaohmb3sg4OmKaMBwuC48sYni5HUw2DvsC8LjGTLK9h+eb1X6RyuOHe4hT0ULCW68iomhjUoKUqlPQ==}
engines: {node: '>= 0.4'}
@@ -3037,9 +2997,9 @@ packages:
html-escaper@3.0.3:
resolution: {integrity: sha512-RuMffC89BOWQoY0WKGpIhn5gX3iI54O6nRA0yC124NYVtzjmFWBIiFd8M0x+ZdX0P9R4lADg1mgP8C7PxGOWuQ==}
html-tags@5.1.0:
resolution: {integrity: sha512-n6l5uca7/y5joxZ3LUePhzmBFUJ+U2YWzhMa8XUTecSeSlQiZdF5XAd/Q3/WUl0VsXgUwWi8I7CNIwdI5WN1SQ==}
engines: {node: '>=20.10'}
html-tags@3.3.1:
resolution: {integrity: sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==}
engines: {node: '>=8'}
html-void-elements@3.0.0:
resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==}
@@ -3084,8 +3044,9 @@ packages:
resolution: {integrity: sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==}
engines: {node: '>=6'}
import-meta-resolve@4.2.0:
resolution: {integrity: sha512-Iqv2fzaTQN28s/FwZAoFq0ZSs/7hMAHJVX+w8PZl3cY19Pxk6jFFalxQoIfW2826i/fDLXv8IiEZRIT0lDuWcg==}
imurmurhash@0.1.4:
resolution: {integrity: sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==}
engines: {node: '>=0.8.19'}
inflight@1.0.6:
resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
@@ -3155,10 +3116,6 @@ packages:
resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==}
engines: {node: '>=0.12.0'}
is-path-inside@4.0.0:
resolution: {integrity: sha512-lJJV/5dYS+RcL8uQdBDW9c9uWFLLBNRyFhnAKXw5tVqLlKZ4RMGZKv+YQ/IA3OhD+RpbJa1LLFM1FQPGyIXvOA==}
engines: {node: '>=12'}
is-plain-obj@4.1.0:
resolution: {integrity: sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==}
engines: {node: '>=12'}
@@ -3437,8 +3394,8 @@ packages:
resolution: {integrity: sha512-/IXtbwEk5HTPyEwyKX6hGkYXxM9nbj64B+ilVJnC/R6B0pH5G4V3b0pVbL7DBj4tkhBAppbQUlf6F6Xl9LHu1g==}
engines: {node: '>= 0.4'}
mathml-tag-names@4.0.0:
resolution: {integrity: sha512-aa6AU2Pcx0VP/XWnh8IGL0SYSgQHDT6Ucror2j2mXeFAlN3ahaNs8EZtG1YiticMkSLj3Gt6VPFfZogt7G5iFQ==}
mathml-tag-names@2.1.3:
resolution: {integrity: sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==}
mdast-util-definitions@6.0.0:
resolution: {integrity: sha512-scTllyX6pnYNZH/AIp/0ePz6s4cZtARxImwoPJ7kS42n+MnVsI4XbnG6d4ibehRIldYMWM2LD7ImQblVhUejVQ==}
@@ -3500,9 +3457,9 @@ packages:
mdurl@2.0.0:
resolution: {integrity: sha512-Lf+9+2r+Tdp5wXDXC4PcIBjTDtq4UKjCPMQhKIuzpJNW0b96kVqSwW0bT7FhRSfmAiFYgP+SCRvdrDozfh0U5w==}
meow@14.1.0:
resolution: {integrity: sha512-EDYo6VlmtnumlcBCbh1gLJ//9jvM/ndXHfVXIFrZVr6fGcwTUyCTFNTLCKuY3ffbK8L/+3Mzqnd58RojiZqHVw==}
engines: {node: '>=20'}
meow@13.2.0:
resolution: {integrity: sha512-pxQJQzB6djGPXh08dacEloMFopsOqGVRKFPYvPOt9XDZ1HasbgDZA74CJGreSU4G3Ak7EFJGoiH2auq+yXISgA==}
engines: {node: '>=18'}
merge-stream@2.0.0:
resolution: {integrity: sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==}
@@ -4316,10 +4273,6 @@ packages:
resolution: {integrity: sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==}
engines: {node: '>=8'}
slash@5.1.0:
resolution: {integrity: sha512-ZA6oR3T/pEyuqwMgAKT0/hAv8oAXckzbkmR0UkUosQ+Mc4RxGoJkRmwHgHufaenlyAgE1Mxgpdcrf75y6XcnDg==}
engines: {node: '>=14.16'}
slice-ansi@4.0.0:
resolution: {integrity: sha512-qMCMfhY040cVHT43K9BFygqYbUPFZKHOg7K73mtTWJRb8pyP3fzf4Ixd5SzdEJQ6MRUg/WBnOLxghZtKKurENQ==}
engines: {node: '>=10'}
@@ -4498,9 +4451,9 @@ packages:
peerDependencies:
stylelint: ^16.8.2
stylelint@17.14.1:
resolution: {integrity: sha512-xVQwyiuxALUBNB2fBe0tmNemg9KqLtdj3T64mioFDar79B2cU8LIyz+3KL6LdiHs9NkeNfwxpKSaIVOY8f112g==}
engines: {node: '>=20.19.0'}
stylelint@16.26.1:
resolution: {integrity: sha512-v20V59/crfc8sVTAtge0mdafI3AdnzQ2KsWe6v523L4OA1bJO02S7MO2oyXDCS6iWb9ckIPnqAFVItqSBQr7jw==}
engines: {node: '>=18.12.0'}
hasBin: true
suf-log@2.5.3:
@@ -4518,9 +4471,9 @@ packages:
resolution: {integrity: sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==}
engines: {node: '>=8'}
supports-hyperlinks@4.5.0:
resolution: {integrity: sha512-ZW2OvfeCXrNTbLakPUzjQG922EeGCOteFSVoek5DKStTh898wf7zgtuFlzQN8HfZCxC3Eh02yJVrRW51hADf+w==}
engines: {node: '>=20'}
supports-hyperlinks@3.2.0:
resolution: {integrity: sha512-zFObLMyZeEwzAoKCyu1B91U79K2t7ApXuQfo8OuxwXLDgcKxuwM+YvcbIhm6QWqz7mHUH1TVytR1PwVVjEuMig==}
engines: {node: '>=14.18'}
supports-preserve-symlinks-flag@1.0.0:
resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
@@ -4657,10 +4610,6 @@ packages:
undici-types@8.3.0:
resolution: {integrity: sha512-j375ScV60dom+YkPFIfTLcOiPxkN/buHz5GobjLhixFuANaNs3C9l4GmrWqejgXWJ7BbJcFYpTEUkS1Ge8bpZQ==}
unicorn-magic@0.4.0:
resolution: {integrity: sha512-wH590V9VNgYH9g3lH9wWjTrUoKsjLF6sGLjhR4sH1LWpLmCOH0Zf7PukhDA8BiS7KHe4oPNkcTHqYkj7SOGUOw==}
engines: {node: '>=20'}
unified@11.0.5:
resolution: {integrity: sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==}
@@ -5058,9 +5007,9 @@ packages:
wrappy@1.0.2:
resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
write-file-atomic@7.0.1:
resolution: {integrity: sha512-OTIk8iR8/aCRWBqvxrzxR0hgxWpnYBblY1S5hDWBQfk/VFmJwzmJgQFN3WsoUKHISv2eAwe+PpbUzyL1CKTLXg==}
engines: {node: ^20.17.0 || >=22.9.0}
write-file-atomic@5.0.1:
resolution: {integrity: sha512-+QU2zd6OTD8XWIJCbffaiQeH9U73qIqafo1x6V1snCWYGJf6cVE0cDR4D8xRzcEnfI21IFrUPzPGtcPf8AC+Rw==}
engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0}
ws@8.21.0:
resolution: {integrity: sha512-Vsp28b7DRcimFQvrqu2Wek3z1iYxDCWqHYB8Qsnk/S4RfaCQzPGPyBNuVjJV3cd6UiKtUtp6sNM77gWvzcCH+g==}
@@ -5687,44 +5636,31 @@ snapshots:
fast-wrap-ansi: 0.2.2
sisteransi: 1.0.5
'@csstools/css-calc@3.3.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)':
dependencies:
'@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
'@csstools/css-tokenizer': 4.0.0
'@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4)':
dependencies:
'@csstools/css-tokenizer': 3.0.4
'@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0)':
dependencies:
'@csstools/css-tokenizer': 4.0.0
'@csstools/css-syntax-patches-for-csstree@1.1.7(css-tree@3.2.1)':
optionalDependencies:
css-tree: 3.2.1
'@csstools/css-tokenizer@3.0.4': {}
'@csstools/css-tokenizer@4.0.0': {}
'@csstools/media-query-list-parser@3.0.1(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)':
dependencies:
'@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
'@csstools/css-tokenizer': 3.0.4
'@csstools/media-query-list-parser@5.0.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)':
'@csstools/media-query-list-parser@4.0.3(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)':
dependencies:
'@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
'@csstools/css-tokenizer': 4.0.0
'@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
'@csstools/css-tokenizer': 3.0.4
'@csstools/selector-resolve-nested@4.0.1(postcss-selector-parser@7.1.4)':
'@csstools/selector-specificity@5.0.0(postcss-selector-parser@7.1.4)':
dependencies:
postcss-selector-parser: 7.1.4
'@csstools/selector-specificity@6.0.0(postcss-selector-parser@7.1.4)':
dependencies:
postcss-selector-parser: 7.1.4
'@dual-bundle/import-meta-resolve@4.2.1': {}
'@emmetio/abbreviation@2.3.3':
dependencies:
@@ -6453,21 +6389,14 @@ snapshots:
'@sinclair/typebox@0.34.52': {}
'@sindresorhus/merge-streams@4.0.0': {}
'@standard-schema/spec@1.1.0': {}
'@stylistic/stylelint-config@2.0.0(stylelint@17.14.1(supports-color@5.5.0)(typescript@7.0.2))':
'@stylistic/stylelint-config@2.0.0(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2))':
dependencies:
'@stylistic/stylelint-plugin': 3.1.3(stylelint@17.14.1(supports-color@5.5.0)(typescript@7.0.2))
stylelint: 17.14.1(supports-color@5.5.0)(typescript@7.0.2)
'@stylistic/stylelint-plugin': 3.1.3(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2))
stylelint: 16.26.1(supports-color@5.5.0)(typescript@7.0.2)
'@stylistic/stylelint-config@5.0.0(stylelint@17.14.1(supports-color@5.5.0)(typescript@7.0.2))':
dependencies:
'@stylistic/stylelint-plugin': 5.2.1(stylelint@17.14.1(supports-color@5.5.0)(typescript@7.0.2))
stylelint: 17.14.1(supports-color@5.5.0)(typescript@7.0.2)
'@stylistic/stylelint-plugin@3.1.3(stylelint@17.14.1(supports-color@5.5.0)(typescript@7.0.2))':
'@stylistic/stylelint-plugin@3.1.3(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2))':
dependencies:
'@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
'@csstools/css-tokenizer': 3.0.4
@@ -6477,18 +6406,7 @@ snapshots:
postcss-selector-parser: 6.1.4
postcss-value-parser: 4.2.0
style-search: 0.1.0
stylelint: 17.14.1(supports-color@5.5.0)(typescript@7.0.2)
'@stylistic/stylelint-plugin@5.2.1(stylelint@17.14.1(supports-color@5.5.0)(typescript@7.0.2))':
dependencies:
'@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
'@csstools/css-tokenizer': 4.0.0
'@csstools/media-query-list-parser': 5.0.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
postcss: 8.5.23
postcss-selector-parser: 7.1.4
postcss-value-parser: 4.2.0
style-search: 0.1.0
stylelint: 17.14.1(supports-color@5.5.0)(typescript@7.0.2)
stylelint: 16.26.1(supports-color@5.5.0)(typescript@7.0.2)
'@swc/helpers@0.2.14': {}
@@ -7048,6 +6966,8 @@ snapshots:
balanced-match@1.0.2: {}
balanced-match@2.0.0: {}
balanced-match@4.0.4: {}
baseline-browser-mapping@2.11.6: {}
@@ -7768,15 +7688,6 @@ snapshots:
merge2: 1.4.1
slash: 3.0.0
globby@16.2.2:
dependencies:
'@sindresorhus/merge-streams': 4.0.0
fast-glob: 3.3.3
ignore: 7.0.6
is-path-inside: 4.0.0
slash: 5.1.0
unicorn-magic: 0.4.0
globjoin@0.1.4: {}
good-listener@1.2.2:
@@ -7807,8 +7718,6 @@ snapshots:
has-flag@4.0.0: {}
has-flag@5.0.1: {}
has-symbols@1.1.0: {}
has-tostringtag@1.0.2:
@@ -7961,7 +7870,7 @@ snapshots:
html-escaper@3.0.3: {}
html-tags@5.1.0: {}
html-tags@3.3.1: {}
html-void-elements@3.0.0: {}
@@ -7994,7 +7903,7 @@ snapshots:
parent-module: 1.0.1
resolve-from: 4.0.0
import-meta-resolve@4.2.0: {}
imurmurhash@0.1.4: {}
inflight@1.0.6:
dependencies:
@@ -8046,8 +7955,6 @@ snapshots:
is-number@7.0.0: {}
is-path-inside@4.0.0: {}
is-plain-obj@4.1.0: {}
is-plain-object@5.0.0: {}
@@ -8300,7 +8207,7 @@ snapshots:
math-intrinsics@1.1.0: {}
mathml-tag-names@4.0.0: {}
mathml-tag-names@2.1.3: {}
mdast-util-definitions@6.0.0:
dependencies:
@@ -8477,7 +8384,7 @@ snapshots:
mdurl@2.0.0: {}
meow@14.1.0: {}
meow@13.2.0: {}
merge-stream@2.0.0: {}
@@ -9572,8 +9479,6 @@ snapshots:
slash@3.0.0: {}
slash@5.1.0: {}
slice-ansi@4.0.0:
dependencies:
ansi-styles: 4.3.0
@@ -9685,56 +9590,56 @@ snapshots:
optionalDependencies:
'@babel/core': 7.29.7(supports-color@10.2.2)
stylelint-config-recess-order@5.1.1(stylelint@17.14.1(supports-color@5.5.0)(typescript@7.0.2)):
stylelint-config-recess-order@5.1.1(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2)):
dependencies:
stylelint: 17.14.1(supports-color@5.5.0)(typescript@7.0.2)
stylelint-order: 6.0.4(stylelint@17.14.1(supports-color@5.5.0)(typescript@7.0.2))
stylelint: 16.26.1(supports-color@5.5.0)(typescript@7.0.2)
stylelint-order: 6.0.4(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2))
stylelint-config-recommended-scss@14.1.0(postcss@8.5.23)(stylelint@17.14.1(supports-color@5.5.0)(typescript@7.0.2)):
stylelint-config-recommended-scss@14.1.0(postcss@8.5.23)(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2)):
dependencies:
postcss-scss: 4.0.9(postcss@8.5.23)
stylelint: 17.14.1(supports-color@5.5.0)(typescript@7.0.2)
stylelint-config-recommended: 14.0.1(stylelint@17.14.1(supports-color@5.5.0)(typescript@7.0.2))
stylelint-scss: 6.14.0(stylelint@17.14.1(supports-color@5.5.0)(typescript@7.0.2))
stylelint: 16.26.1(supports-color@5.5.0)(typescript@7.0.2)
stylelint-config-recommended: 14.0.1(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2))
stylelint-scss: 6.14.0(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2))
optionalDependencies:
postcss: 8.5.23
stylelint-config-recommended@14.0.1(stylelint@17.14.1(supports-color@5.5.0)(typescript@7.0.2)):
stylelint-config-recommended@14.0.1(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2)):
dependencies:
stylelint: 17.14.1(supports-color@5.5.0)(typescript@7.0.2)
stylelint: 16.26.1(supports-color@5.5.0)(typescript@7.0.2)
stylelint-config-standard-scss@14.0.0(postcss@8.5.23)(stylelint@17.14.1(supports-color@5.5.0)(typescript@7.0.2)):
stylelint-config-standard-scss@14.0.0(postcss@8.5.23)(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2)):
dependencies:
stylelint: 17.14.1(supports-color@5.5.0)(typescript@7.0.2)
stylelint-config-recommended-scss: 14.1.0(postcss@8.5.23)(stylelint@17.14.1(supports-color@5.5.0)(typescript@7.0.2))
stylelint-config-standard: 36.0.1(stylelint@17.14.1(supports-color@5.5.0)(typescript@7.0.2))
stylelint: 16.26.1(supports-color@5.5.0)(typescript@7.0.2)
stylelint-config-recommended-scss: 14.1.0(postcss@8.5.23)(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2))
stylelint-config-standard: 36.0.1(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2))
optionalDependencies:
postcss: 8.5.23
stylelint-config-standard@36.0.1(stylelint@17.14.1(supports-color@5.5.0)(typescript@7.0.2)):
stylelint-config-standard@36.0.1(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2)):
dependencies:
stylelint: 17.14.1(supports-color@5.5.0)(typescript@7.0.2)
stylelint-config-recommended: 14.0.1(stylelint@17.14.1(supports-color@5.5.0)(typescript@7.0.2))
stylelint: 16.26.1(supports-color@5.5.0)(typescript@7.0.2)
stylelint-config-recommended: 14.0.1(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2))
stylelint-config-twbs-bootstrap@16.1.0(postcss@8.5.23)(stylelint@17.14.1(supports-color@5.5.0)(typescript@7.0.2)):
stylelint-config-twbs-bootstrap@16.1.0(postcss@8.5.23)(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2)):
dependencies:
'@stylistic/stylelint-config': 2.0.0(stylelint@17.14.1(supports-color@5.5.0)(typescript@7.0.2))
'@stylistic/stylelint-plugin': 3.1.3(stylelint@17.14.1(supports-color@5.5.0)(typescript@7.0.2))
stylelint: 17.14.1(supports-color@5.5.0)(typescript@7.0.2)
stylelint-config-recess-order: 5.1.1(stylelint@17.14.1(supports-color@5.5.0)(typescript@7.0.2))
stylelint-config-standard: 36.0.1(stylelint@17.14.1(supports-color@5.5.0)(typescript@7.0.2))
stylelint-config-standard-scss: 14.0.0(postcss@8.5.23)(stylelint@17.14.1(supports-color@5.5.0)(typescript@7.0.2))
stylelint-scss: 6.14.0(stylelint@17.14.1(supports-color@5.5.0)(typescript@7.0.2))
'@stylistic/stylelint-config': 2.0.0(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2))
'@stylistic/stylelint-plugin': 3.1.3(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2))
stylelint: 16.26.1(supports-color@5.5.0)(typescript@7.0.2)
stylelint-config-recess-order: 5.1.1(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2))
stylelint-config-standard: 36.0.1(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2))
stylelint-config-standard-scss: 14.0.0(postcss@8.5.23)(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2))
stylelint-scss: 6.14.0(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2))
transitivePeerDependencies:
- postcss
stylelint-order@6.0.4(stylelint@17.14.1(supports-color@5.5.0)(typescript@7.0.2)):
stylelint-order@6.0.4(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2)):
dependencies:
postcss: 8.5.23
postcss-sorting: 8.0.2(postcss@8.5.23)
stylelint: 17.14.1(supports-color@5.5.0)(typescript@7.0.2)
stylelint: 16.26.1(supports-color@5.5.0)(typescript@7.0.2)
stylelint-scss@6.14.0(stylelint@17.14.1(supports-color@5.5.0)(typescript@7.0.2)):
stylelint-scss@6.14.0(stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2)):
dependencies:
css-tree: 3.2.1
is-plain-object: 5.0.0
@@ -9744,17 +9649,17 @@ snapshots:
postcss-resolve-nested-selector: 0.1.6
postcss-selector-parser: 7.1.4
postcss-value-parser: 4.2.0
stylelint: 17.14.1(supports-color@5.5.0)(typescript@7.0.2)
stylelint: 16.26.1(supports-color@5.5.0)(typescript@7.0.2)
stylelint@17.14.1(supports-color@5.5.0)(typescript@7.0.2):
stylelint@16.26.1(supports-color@5.5.0)(typescript@7.0.2):
dependencies:
'@csstools/css-calc': 3.3.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
'@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
'@csstools/css-parser-algorithms': 3.0.5(@csstools/css-tokenizer@3.0.4)
'@csstools/css-syntax-patches-for-csstree': 1.1.7(css-tree@3.2.1)
'@csstools/css-tokenizer': 4.0.0
'@csstools/media-query-list-parser': 5.0.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
'@csstools/selector-resolve-nested': 4.0.1(postcss-selector-parser@7.1.4)
'@csstools/selector-specificity': 6.0.0(postcss-selector-parser@7.1.4)
'@csstools/css-tokenizer': 3.0.4
'@csstools/media-query-list-parser': 4.0.3(@csstools/css-parser-algorithms@3.0.5(@csstools/css-tokenizer@3.0.4))(@csstools/css-tokenizer@3.0.4)
'@csstools/selector-specificity': 5.0.0(postcss-selector-parser@7.1.4)
'@dual-bundle/import-meta-resolve': 4.2.1
balanced-match: 2.0.0
colord: 2.9.3
cosmiconfig: 9.0.2(typescript@7.0.2)
css-functions-list: 3.3.3
@@ -9764,25 +9669,29 @@ snapshots:
fastest-levenshtein: 1.0.16
file-entry-cache: 11.1.5
global-modules: 2.0.0
globby: 16.2.2
globby: 11.1.0
globjoin: 0.1.4
html-tags: 5.1.0
html-tags: 3.3.1
ignore: 7.0.6
import-meta-resolve: 4.2.0
mathml-tag-names: 4.0.0
meow: 14.1.0
imurmurhash: 0.1.4
is-plain-object: 5.0.0
known-css-properties: 0.37.0
mathml-tag-names: 2.1.3
meow: 13.2.0
micromatch: 4.0.8
normalize-path: 3.0.0
picocolors: 1.1.1
postcss: 8.5.23
postcss-resolve-nested-selector: 0.1.6
postcss-safe-parser: 7.0.1(postcss@8.5.23)
postcss-selector-parser: 7.1.4
postcss-value-parser: 4.2.0
string-width: 8.2.1
supports-hyperlinks: 4.5.0
resolve-from: 5.0.0
string-width: 4.2.3
supports-hyperlinks: 3.2.0
svg-tags: 1.0.0
table: 6.9.0
write-file-atomic: 7.0.1
write-file-atomic: 5.0.1
transitivePeerDependencies:
- supports-color
- typescript
@@ -9801,10 +9710,10 @@ snapshots:
dependencies:
has-flag: 4.0.0
supports-hyperlinks@4.5.0:
supports-hyperlinks@3.2.0:
dependencies:
has-flag: 5.0.1
supports-color: 10.2.2
has-flag: 4.0.0
supports-color: 7.2.0
supports-preserve-symlinks-flag@1.0.0: {}
@@ -9941,8 +9850,6 @@ snapshots:
undici-types@8.3.0: {}
unicorn-magic@0.4.0: {}
unified@11.0.5:
dependencies:
'@types/unist': 3.0.3
@@ -10251,8 +10158,9 @@ snapshots:
wrappy@1.0.2: {}
write-file-atomic@7.0.1:
write-file-atomic@5.0.1:
dependencies:
imurmurhash: 0.1.4
signal-exit: 4.1.0
ws@8.21.0: {}
stylelint.config.mjs
+33 -6
View File
@@ -1,26 +1,53 @@
// Keep this dependency on the same major as stylelint-config-twbs-bootstrap uses
// (currently @stylistic/stylelint-config@^2 / @stylistic/stylelint-plugin@^3). A newer
// major lists rule names the plugin twbs loads does not register, and stylelint then
// fails every file with "Unknown rule @stylistic/…".
import stylistic from '@stylistic/stylelint-config'
// Prettier already owns SCSS formatting in this repo (`pnpm lint-prettier`), so every
// purely stylistic rule that stylelint-config-twbs-bootstrap pulls in through @stylistic
// is switched off — otherwise the two tools fight over quotes, indentation and zeros.
const prettierOwned = Object.fromEntries(Object.keys(stylistic.rules).map((rule) => [rule, null]))
export default {
extends: ['stylelint-config-twbs-bootstrap'],
ignoreFiles: ['**/node_modules/**', '**/dist/**'],
ignoreFiles: [
'**/node_modules/**',
'**/dist/**',
// sass-true fixtures spell out the exact CSS a mixin must emit, so any autofix here
// (property order, `!important`, hex length) rewrites the assertion and breaks
// `pnpm test:scss`. Bootstrap excludes its own `**/tests/` for the same reason.
'core/scss/tests/**',
],
rules: {
...prettierOwned,
// Prettier breaks long Sass maps onto separate lines, which this rule reads
// as a missing space after the `$variable:` colon.
'scss/dollar-variable-colon-space-after': null,
// Tabler intentionally qualifies type selectors (e.g. `a.card`).
'selector-no-qualifying-type': null,
// Named arguments are used on purpose for readability.
'scss/at-function-named-arguments': null,
// The autofix rewrites `@import url($var)` into `@import '$var'`, turning the Sass
// variable into a literal string — see scss/fonts/_webfonts.scss, which builds the
// Google Fonts URL at compile time. Sass has no `url()`-free form for that.
'import-notation': null,
// Font stacks live in Sass variables and CSS custom properties, which stylelint sees
// as ordinary declarations — without this the autofix lowercases real family names
// (`BlinkMacSystemFont` → `blinkmacsystemfont`).
// `camelCaseSvgKeywords` keeps `text-rendering: optimizeLegibility` intact.
'value-keyword-case': ['lower', { ignoreProperties: ['/^\\$font-family/', '/^--.*font/'], camelCaseSvgKeywords: true }],
},
overrides: [
{
// Copied from upstream Bootstrap, which lints them under its own scss/vendor/ exclusion.
// Their declaration order is upstream's and is asserted by scss/tests — reordering it
// creates sync noise on every Bootstrap bump for no gain.
files: ['core/scss/bootstrap/**/*.scss', 'core/scss/mixins/bootstrap/**/*.scss'],
rules: { 'scss/operator-no-unspaced': null },
},
{
files: ['core/scss/tests/**/*.scss'],
rules: { 'declaration-no-important': null, 'color-named': null },
rules: { 'scss/operator-no-unspaced': null, 'order/properties-order': null },
},
{
// Overrides for third-party widgets — their class names and specificity aren't ours.
files: ['core/scss/vendor/**/*.scss'],
rules: {
'declaration-no-important': null,