Mirrors/tabler
1
0
Fork 0
mirror of https://github.com/tabler/tabler.git synced 2026-08-27 12:36:28 +04:00
Code Issues Projects Releases Wiki Activity

Merge origin/dev and resolve SCSS conflicts

Browse Source 
Co-authored-by: codecalm <1282324+codecalm@users.noreply.github.com>
This commit is contained in:
copilot-swe-agent[bot]
2026-08-06 22:25:42 +00:00
committed by GitHub
co-authored by codecalm
parent e34bfa4e0a f2004da7b2
commit a44a9c9e08
99 changed files with 1600 additions and 877 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/card-header-footer-bg-vars.md
+5
View File
@@ -0,0 +1,5 @@
---
"@tabler/core": minor
---
Added `--card-header-bg` and `--card-footer-bg` CSS variables (with `$card-header-bg` and `$card-footer-bg` Sass defaults) so `.card-header` and `.card-footer` backgrounds can be overridden independently, and made `.card-header` transparent by default instead of using `--card-cap-bg`.
.changeset/fix-payment-icons-dark-mode.md
+5
View File
@@ -0,0 +1,5 @@
---
"@tabler/preview": patch
---
Fixed payment icons on the all-elements page by rendering light and dark variants with `hide-theme-dark` and `hide-theme-light` so the correct icon shows when the preview theme changes.
.changeset/fix-ribbon-example-background.md
+5
View File
@@ -0,0 +1,5 @@
---
"@tabler/preview": patch
---
Fixed ribbon examples background on the all-elements page by replacing hardcoded `#f8f9fa` with `var(--tblr-bg-surface-secondary)` so it adapts to dark mode.
.changeset/stylelint-scss-cleanup.md
+5
View File
@@ -0,0 +1,5 @@
---
"@tabler/core": patch
---
Added Stylelint for SCSS and cleaned up the issues it found: removed dead and duplicate rules, replaced named colors (`white`, `red`) with variables, simplified redundant `&` nesting selectors, and fixed a missing space in a `.form-switch` transition declaration.
.stylelintrc
-8
View File
@@ -1,8 +0,0 @@
{
"extends": [
"stylelint-config-twbs-bootstrap/scss"
],
"rules": {
"selector-no-qualifying-type": null
}
}
core/package.json
+4 -2
View File
@@ -11,7 +11,9 @@
"clean": "shx rm -rf dist demo",
"css": "tsx ../.build/build-css.ts scss dist/css --rtl --minify --banner",
"css-build": "tsx ../.build/build-css.ts scss dist/css",
"css-lint": "pnpm run css-lint-variables",
"css-lint": "pnpm run lint:scss && pnpm run css-lint-variables",
"lint:scss": "stylelint \"scss/**/*.scss\" --config ../stylelint.config.mjs",
"lint:scss:fix": "pnpm run lint:scss --fix",
"css-lint-variables": "find-unused-sass-variables scss/",
"js": "pnpm run js-build && pnpm run js-build-min",
"js-build": "concurrently \"pnpm run js-build-standalone\" \"pnpm run js-build-theme\"",
@@ -284,4 +286,4 @@
"directories": {
"doc": "docs"
}
}
}
core/scss/_settings.scss
+2 -2
View File
@@ -11,8 +11,8 @@
// 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-marketing.scss
View File
core/scss/_variables.scss
+9 -7
View File
@@ -628,12 +628,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,
@@ -727,8 +727,8 @@ $backdrop-opacity: 0.32 !default;
$backdrop-blur: 4px !default;
$backdrop-bg: light-dark(var(--gray-800), var(--black)) !default;
$backdrops: (
dark: color-mix(in srgb, var(--color-dark), transparent var(--backdrop-opacity)),
light: color-mix(in srgb, var(--color-light), transparent var(--backdrop-opacity)),
dark: color-mix(in sRGB, var(--color-dark), transparent var(--backdrop-opacity)),
light: color-mix(in sRGB, var(--color-light), transparent var(--backdrop-opacity)),
) !default;
// Gradient
@@ -1241,6 +1241,8 @@ $card-cap-padding-y: $card-spacer-y !default;
$card-cap-padding-x: $card-spacer-x !default;
$card-cap-bg: var(--bg-surface-tertiary) !default;
$card-cap-color: inherit !default;
$card-header-bg: transparent !default;
$card-footer-bg: null !default;
$card-height: null !default;
$card-color: inherit !default;
$card-bg: var(--bg-surface) !default;
@@ -1967,16 +1969,16 @@ $form-select-font-size-lg: $input-font-size-lg !default;
$form-select-border-radius-lg: $input-border-radius-lg !default;
$form-select-transition: $input-transition !default;
$form-switch-color: white !default;
$form-switch-color: $white !default;
$form-switch-width: 2rem !default;
$form-switch-height: 1.25rem !default;
$form-switch-padding-start: $form-switch-width + 0.5rem !default;
$form-switch-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color}'/></svg>") !default;
$form-switch-border-radius: $form-switch-width !default;
$form-switch-transition: background-position 0.15s ease-in-out !default;
$form-switch-focus-color: white !default;
$form-switch-focus-color: $white !default;
$form-switch-focus-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-focus-color}'/></svg>") !default;
$form-switch-checked-color: white !default;
$form-switch-checked-color: $white !default;
$form-switch-checked-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-checked-color}'/></svg>") !default;
$form-switch-checked-bg-position: right center !default;
core/scss/bootstrap/_card.scss
+8 -2
View File
@@ -106,10 +106,13 @@
//
.card-header {
@if $card-header-bg != null {
--card-header-bg: #{$card-header-bg};
}
padding: var(--card-cap-padding-y) var(--card-cap-padding-x);
margin-bottom: 0; // Removes the default margin-bottom of <hN>
color: var(--card-cap-color);
background-color: var(--card-cap-bg);
background-color: var(--card-header-bg, var(--card-cap-bg));
border-bottom: var(--card-border-width) solid var(--card-border-color);
&:first-child {
@@ -118,9 +121,12 @@
}
.card-footer {
@if $card-footer-bg != null {
--card-footer-bg: #{$card-footer-bg};
}
padding: var(--card-cap-padding-y) var(--card-cap-padding-x);
color: var(--card-cap-color);
background-color: var(--card-cap-bg);
background-color: var(--card-footer-bg, var(--card-cap-bg));
border-top: var(--card-border-width) solid var(--card-border-color);
&:last-child {
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(--dir) * 100%));
}
.carousel-item-prev:not(.carousel-item-end),
.active.carousel-item-start {
/*rtl:ignore*/
/* rtl:ignore */
transform: translateX(calc(var(--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(--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(--offcanvas-width);
border-inline-end: var(--offcanvas-border-width) solid var(--offcanvas-border-color);
/*rtl:ignore*/
/* rtl:ignore */
transform: translateX(calc(var(--dir) * -100%));
}
@@ -64,7 +65,8 @@
inset-inline-end: 0;
width: var(--offcanvas-width);
border-inline-start: var(--offcanvas-border-width) solid var(--offcanvas-border-color);
/*rtl:ignore*/
/* rtl:ignore */
transform: translateX(calc(var(--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
+2 -2
View File
@@ -34,7 +34,7 @@
--spinner-animation-name: spinner-border;
// scss-docs-end spinner-border-css-vars
border: var(--spinner-border-width) solid currentcolor;
border: var(--spinner-border-width) solid currentColor;
border-right-color: transparent;
}
@@ -71,7 +71,7 @@
--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 {
--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;
--theme-boxed-border-radius: #{$border-radius};
}
.page {
margin: 0 auto;
max-width: var(--theme-boxed-width);
@include border-radius(var(--theme-boxed-border-radius));
margin: 0 auto;
color: var(--body-color);
@include border-radius(var(--theme-boxed-border-radius));
@include media-breakpoint-up(md) {
border: var(--border-width) var(--border-style) var(--border-color);
background: var(--body-bg);
border: var(--border-width) var(--border-style) var(--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(--border-width) var(--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(--border-width) var(--border-style) $footer-border-color;
@include media-print {
@include media-print() {
display: none;
}
}
core/scss/layout/_navbar.scss
+61 -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;
@@ -59,21 +59,24 @@
padding-inline-start: add(calc(#{$container-padding-x} / 2), 3.25rem);
}
// Third-level submenu in the mobile vertical navbar — genuinely nested two
// dropdown-menu levels deep.
// stylelint-disable-next-line selector-max-class, selector-max-compound-selectors
.dropdown-menu .dropdown-menu .dropdown-item {
padding-inline-start: add(calc(#{$container-padding-x} / 2), 4.75rem);
}
}
.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 +93,9 @@ Navbar
--navbar-hover-color: #{$navbar-hover-color};
align-items: stretch;
min-height: $navbar-height;
box-shadow: inset 0 calc(-1 * var(--navbar-border-width)) 0 0 var(--navbar-border-color);
background: var(--navbar-bg);
color: var(--navbar-color);
background: var(--navbar-bg);
box-shadow: inset 0 calc(-1 * var(--navbar-border-width)) 0 0 var(--navbar-border-color);
.navbar-collapse & {
flex-grow: 1;
@@ -113,16 +116,17 @@ Navbar
.nav-link {
position: relative;
justify-content: center;
min-width: 2.5rem;
min-height: 2.5rem;
justify-content: center;
@include border-radius(var(--border-radius));
.badge {
position: absolute;
top: 0.5rem;
inset-inline-end: 0.5rem;
/*rtl:ignore*/
top: 0.5rem;
/* rtl:ignore */
transform: translate(calc(var(--dir) * 50%), -50%);
}
}
@@ -136,13 +140,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 +156,12 @@ Navbar
color: var(--navbar-active-color);
}
&:after {
content: '';
&::after {
position: absolute;
inset-inline-start: 0;
inset-inline-end: 0;
bottom: -0.25rem;
content: '';
border: 0 var(--border-style) var(--navbar-active-border-color);
border-bottom-width: 2px;
}
@@ -197,57 +201,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(--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 +259,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 +286,9 @@ Navbar nav
--nav-link-hover-bg: #{$navbar-nav-link-hover-bg};
--nav-link-icon-color: #{$nav-link-icon-color};
--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 +301,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 +320,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 +338,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 +347,8 @@ Navbar vertical
}
.navbar-nav {
flex-direction: column;
flex-grow: 1;
flex-direction: column;
min-height: auto;
.nav-link {
@@ -356,8 +360,8 @@ Navbar vertical
> [class^='container'] {
flex-direction: column;
align-items: stretch;
min-height: 100%;
justify-content: start;
min-height: 100%;
padding: 0;
}
@@ -376,7 +380,7 @@ Navbar vertical
padding-inline-end: $sidebar-width;
}
@include navbar-vertical-nav;
@include navbar-vertical-nav();
}
}
}
@@ -385,15 +389,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
+40 -44
View File
@@ -3,13 +3,13 @@
// Skip-to-content link: hidden via .visually-hidden-focusable until keyboard focus reveals it
.skip-link {
position: fixed;
top: 0;
inset-inline-start: 0;
top: 0;
z-index: $zindex-tooltip;
padding: 0.5rem 1rem;
background: var(--primary);
color: var(--primary-fg, #fff);
text-decoration: none;
background: var(--primary);
&:focus-visible {
outline: 2px solid var(--primary);
@@ -18,9 +18,9 @@
}
.page {
position: relative;
display: flex;
flex-direction: column;
position: relative;
min-height: 100%;
}
@@ -29,11 +29,11 @@
}
.page-wrapper {
flex: 1;
display: flex;
flex: 1;
flex-direction: column;
@include media-print {
@include media-print() {
margin: 0 !important;
}
}
@@ -47,59 +47,46 @@
// Content body
.page-body {
display: flex;
flex: 1;
flex-direction: column;
margin-top: var(--page-padding-y);
margin-bottom: var(--page-padding-y);
display: flex;
flex-direction: column;
flex: 1;
}
.page-body-card {
background: var(--bg-surface);
border-top: var(--border-width) var(--border-style) $card-border-color;
flex: 1;
padding: var(--page-padding) 0;
margin-bottom: 0;
flex: 1;
background: var(--bg-surface);
border-top: var(--border-width) var(--border-style) $card-border-color;
.page-body ~ & {
margin-top: 0;
}
}
.page-cover {
background: no-repeat center/cover;
min-height: 9rem;
@include media-breakpoint-up(md) {
min-height: 12rem;
}
@include media-breakpoint-up(lg) {
min-height: 15rem;
}
}
.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(--page-padding-y) 0 0;
@@ -107,24 +94,24 @@
}
.page-header-border {
border-bottom: var(--border-width) var(--border-style) var(--border-color);
padding: var(--page-padding-y) 0;
margin: 0 !important;
background-color: var(--bg-surface);
border-bottom: var(--border-width) var(--border-style) var(--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;
@@ -149,32 +136,41 @@
.page-cover {
--page-cover-blur: 20px;
--page-cover-padding: 1rem;
position: relative;
min-height: 6rem;
padding: var(--page-cover-padding) 0;
position: relative;
overflow: hidden;
background: no-repeat center/cover;
@include media-breakpoint-up(md) {
min-height: 12rem;
}
@include media-breakpoint-up(lg) {
min-height: 15rem;
}
}
.page-cover-img {
position: absolute;
top: calc(-2 * var(--page-cover-blur, 0));
inset-inline-start: calc(-2 * var(--page-cover-blur, 0));
inset-inline-end: calc(-2 * var(--page-cover-blur, 0));
top: calc(-2 * var(--page-cover-blur, 0));
bottom: calc(-2 * var(--page-cover-blur, 0));
pointer-events: none;
filter: blur(var(--page-cover-blur));
object-fit: cover;
background-size: cover;
background-position: center;
z-index: -1;
pointer-events: none;
object-fit: cover;
filter: blur(var(--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/marketing/_browser.scss
+10 -10
View File
@@ -5,9 +5,9 @@
.browser {
@include border-radius(var(--border-radius-lg));
box-shadow: 0 0 0 1px var(--border-color);
background: var(--bg-surface-secondary);
overflow: hidden;
background: var(--bg-surface-secondary);
box-shadow: 0 0 0 1px var(--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(--border-color);
@include border-radius(var(--border-radius-circle));
border: 1px solid var(--border-color-dark);
@include border-radius(var(--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(--secondary);
font-size: var(--font-size-h5);
@include border-radius(var(--border-radius));
line-height: 1;
color: var(--secondary);
text-decoration: none;
cursor: pointer;
background-image: linear-gradient(to bottom, var(--bg-surface), var(--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(--bg-surface), var(--bg-surface-secondary));
@include border-radius(var(--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(--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(--secondary);
max-width: 45rem;
margin: 0 auto;
font-size: var(--font-size-h2);
line-height: 1.5;
margin: 0 auto;
max-width: 45rem;
color: var(--secondary);
@include media-breakpoint-down(sm) {
font-size: var(--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(--bg-surface);
border: 1px solid $border-color;
padding: 2rem;
margin: 0 0 1rem;
position: relative;
box-shadow: var(--shadow-card);
text-align: center;
background: var(--bg-surface);
border: 1px solid $border-color;
box-shadow: var(--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(--primary);
order: -1;
border: 2px solid var(--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(--secondary);
margin-top: 1rem;
font-size: var(--font-size-h3);
line-height: var(--line-height-h3);
margin-top: 1rem;
color: var(--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 @@
--shape-size: #{$avatar-size};
--shape-icon-size: #{$avatar-icon-size};
--shape-border-radius: 35%;
background-color: var(--primary-lt);
color: var(--primary);
@include border-radius(var(--shape-border-radius));
display: inline-flex;
align-items: center;
justify-content: center;
height: var(--shape-size);
width: var(--shape-size);
height: var(--shape-size);
color: var(--primary);
background-color: var(--primary-lt);
@include border-radius(var(--shape-border-radius));
.icon {
width: var(--shape-icon-size);
@@ -30,7 +30,7 @@
@each $name, $color in $colors {
.shape-#{$name} {
background: var(--#{$name}-lt);
color: var(--#{$name});
background: var(--#{$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
+15 -16
View File
@@ -27,37 +27,37 @@
.accordion-button {
position: relative;
display: flex;
gap: var(--accordion-btn-gap);
align-items: center;
width: 100%;
padding: var(--accordion-btn-padding-y) var(--accordion-padding-x);
font-size: inherit;
font-weight: var(--accordion-btn-font-weight);
color: inherit;
text-align: inherit;
background-color: transparent;
border: 0;
font-size: inherit;
font-weight: var(--accordion-btn-font-weight);
gap: var(--accordion-btn-gap);
&:not(.collapsed) {
color: var(--accordion-active-color);
border-bottom-color: transparent;
box-shadow: none;
color: var(--accordion-active-color);
}
}
.accordion-header {
margin: 0;
position: relative;
display: flex;
gap: var(--accordion-header-gap);
align-items: center;
width: 100%;
margin: 0;
color: var(--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(--secondary);
width: var(--accordion-btn-toggle-width);
height: var(--accordion-btn-toggle-width);
margin-inline-start: auto;
margin-inline-end: 0;
line-height: 1;
color: var(--secondary);
transition: $transition-time transform;
.accordion-button:not(.collapsed) & {
transform: rotate(-180deg);
color: var(--accordion-active-color);
transform: rotate(-180deg);
}
path {
@@ -139,14 +139,14 @@
}
.accordion-body {
color: var(--secondary);
padding: 0 var(--accordion-body-padding-x) var(--accordion-body-padding-y);
color: var(--secondary);
}
.accordion-flush {
> .accordion-item {
border-inline-end: 0;
border-inline-start: 0;
border-inline-end: 0;
@include border-radius(0);
&:first-child {
@@ -157,8 +157,7 @@
}
> .accordion-collapse,
> .accordion-header .accordion-button,
> .accordion-header .accordion-button.collapsed {
> .accordion-header .accordion-button {
@include border-radius(0);
}
}
core/scss/ui/_alerts.scss
+11 -11
View File
@@ -18,22 +18,22 @@
--alert-gap: #{$alert-gap};
position: relative;
padding: var(--alert-padding-y) var(--alert-padding-x);
margin-bottom: var(--alert-margin-bottom);
background-color: var(--alert-bg);
@include border-radius(var(--alert-border-radius));
border: var(--border-width) var(--border-style) var(--alert-border-color);
box-shadow: var(--box-shadow);
color: var(--alert-color);
display: flex;
flex-direction: row;
gap: var(--alert-gap);
padding: var(--alert-padding-y) var(--alert-padding-x);
margin-bottom: var(--alert-margin-bottom);
color: var(--alert-color);
background-color: var(--alert-bg);
border: var(--border-width) var(--border-style) var(--alert-border-color);
box-shadow: var(--box-shadow);
@include border-radius(var(--alert-border-radius));
}
.alert-heading {
color: inherit;
margin-bottom: var(--alert-heading-margin-bottom);
font-weight: var(--alert-heading-font-weight);
color: inherit;
}
.alert-description {
@@ -41,9 +41,9 @@
}
.alert-icon {
color: var(--alert-color);
width: var(--alert-icon-size) !important;
height: var(--alert-icon-size) !important;
color: var(--alert-color);
}
.alert-action {
@@ -74,16 +74,16 @@
.btn-close {
position: absolute;
top: calc(var(--alert-padding-x) / 2 - 1px);
inset-inline-end: calc(var(--alert-padding-y) / 2 - 1px);
top: calc(var(--alert-padding-x) / 2 - 1px);
z-index: 1;
padding: calc(var(--alert-padding-y) * 1.25) var(--alert-padding-x);
}
}
.alert-important {
background-color: var(--alert-variant-color);
color: var(--white);
background-color: var(--alert-variant-color);
.alert-description {
color: inherit;
core/scss/ui/_avatars.scss
+12 -12
View File
@@ -13,26 +13,26 @@
--avatar-brand-size: #{$avatar-brand-size};
--avatar-border-radius: #{$avatar-border-radius};
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--avatar-size);
height: var(--avatar-size);
font-size: var(--avatar-font-size);
font-weight: var(--font-weight-medium);
line-height: 1;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--secondary);
text-align: center;
text-transform: uppercase;
vertical-align: bottom;
user-select: none;
background: var(--avatar-bg) no-repeat center/cover;
@include border-radius(var(--avatar-border-radius));
box-shadow: var(--avatar-box-shadow);
transition:
color $transition-time,
background-color $transition-time,
box-shadow $transition-time;
@include border-radius(var(--avatar-border-radius));
.icon {
width: var(--avatar-icon-size);
@@ -89,7 +89,7 @@
//
.avatar-list {
--avatar-list-size: #{$avatar-size};
@include elements-list;
@include elements-list();
a.avatar {
&:hover {
@@ -125,11 +125,11 @@
.avatar-upload {
--avatar-upload-icon-size: #{$avatar-upload-icon-size};
--avatar-upload-text-margin-top: #{$avatar-upload-text-margin-top};
flex-direction: column;
background: $form-check-input-bg;
border: var(--border-width) dashed var(--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(--primary);
color: var(--primary);
text-decoration: none;
border-color: var(--primary);
}
}
.avatar-upload-text {
margin-top: var(--avatar-upload-text-margin-top);
font-size: $h6-font-size;
line-height: 1;
margin-top: var(--avatar-upload-text-margin-top);
}
.avatar-cover {
@@ -160,13 +160,13 @@
.avatar-brand {
--avatar-brand-offset: #{$avatar-brand-offset};
width: var(--avatar-brand-size);
height: var(--avatar-brand-size);
position: absolute;
inset-inline-end: var(--avatar-brand-offset);
bottom: var(--avatar-brand-offset);
z-index: 1000;
width: var(--avatar-brand-size);
height: var(--avatar-brand-size);
background: var(--bg-surface);
@include border-radius(var(--border-radius));
border: 1px solid var(--border-color);
@include border-radius(var(--border-radius));
}
core/scss/ui/_badges.scss
+17 -16
View File
@@ -12,24 +12,24 @@
--badge-line-height: 1;
--badge-gap: #{$badge-gap};
display: inline-flex;
gap: var(--badge-gap);
align-items: center;
justify-content: center;
min-width: calc(1em + var(--badge-padding-y) * 2 + 2px);
padding: var(--badge-padding-y) var(--badge-padding-x);
font-weight: var(--badge-font-weight);
overflow: hidden;
font-size: var(--badge-font-size);
font-weight: var(--badge-font-weight);
line-height: var(--badge-line-height);
color: var(--badge-color);
text-align: center;
letter-spacing: 0.04em;
white-space: nowrap;
justify-content: center;
align-items: center;
gap: var(--badge-gap);
background: $badge-bg-color;
overflow: hidden;
vertical-align: bottom;
user-select: none;
background: $badge-bg-color;
border: var(--border-width) var(--border-style) transparent;
@include border-radius(var(--badge-border-radius));
min-width: calc(1em + var(--badge-padding-y) * 2 + 2px);
letter-spacing: 0.04em;
vertical-align: bottom;
line-height: var(--badge-line-height);
@at-root a#{&} {
background: var(--bg-surface-secondary);
@@ -47,12 +47,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(--border-radius-pill));
vertical-align: baseline;
@include border-radius(var(--border-radius-pill));
}
//
@@ -84,7 +84,7 @@
// Badges list
//
.badges-list {
@include elements-list;
@include elements-list();
}
//
@@ -92,11 +92,12 @@
//
.badge-notification {
position: absolute !important;
top: 0 !important;
inset-inline-end: 0 !important;
/*rtl:ignore*/
transform: translate(calc(var(--dir) * 50%), -50%);
top: 0 !important;
z-index: 1;
/* rtl:ignore */
transform: translate(calc(var(--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(--breadcrumb-font-size));
list-style: none;
background-color: var(--breadcrumb-bg);
@include border-radius(var(--breadcrumb-border-radius));
padding: 0;
margin: 0;
list-style: none;
background: transparent;
background-color: var(--breadcrumb-bg);
@include font-size(var(--breadcrumb-font-size));
@include border-radius(var(--breadcrumb-border-radius));
a {
color: var(--breadcrumb-link-color);
@@ -41,8 +41,8 @@
.breadcrumb-item {
&.active {
color: var(--breadcrumb-item-active-color);
font-weight: var(--breadcrumb-item-active-font-weight);
color: var(--breadcrumb-item-active-color);
a {
color: inherit;
@@ -53,7 +53,7 @@
&.disabled {
color: var(--breadcrumb-item-disabled-color);
&:before {
&::before {
color: inherit;
}
@@ -71,7 +71,8 @@
padding-inline-end: var(--breadcrumb-item-padding-x);
color: var(--breadcrumb-divider-color);
content: var(--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 @@
--btn-active-color: #{$active-color};
--btn-active-bg: #{$active-bg};
--btn-active-border-color: #{$active-border-color};
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
white-space: nowrap;
box-shadow: var(--btn-box-shadow);
position: relative;
min-width: calc((var(--btn-line-height) * 1) + (var(--btn-padding-y) * 2) + (var(--btn-border-width) * 2));
min-height: calc((var(--btn-line-height) * 1) + (var(--btn-padding-y) * 2) + (var(--btn-border-width) * 2));
white-space: nowrap;
box-shadow: var(--btn-box-shadow);
@include border-radius(var(--btn-border-radius));
.icon {
width: var(--btn-icon-size);
height: var(--btn-icon-size);
min-width: var(--btn-icon-size);
font-size: var(--btn-icon-size);
height: var(--btn-icon-size);
margin: 0 calc(var(--btn-padding-x) / 2) 0 calc(var(--btn-padding-x) / -4);
vertical-align: bottom;
font-size: var(--btn-icon-size);
color: var(--btn-icon-color);
vertical-align: bottom;
}
.avatar {
@@ -178,8 +178,8 @@
// Button shapes
//
.btn-pill {
padding-inline-end: 1.5em;
padding-inline-start: 1.5em;
padding-inline-end: 1.5em;
@include border-radius(var(--border-radius-pill));
&[class*='btn-icon'] {
@@ -198,23 +198,22 @@
//
.btn-icon,
.btn-action {
//[BUG] btn-sm and btn-xl with an icon looks broken
//issue #2470 fixed
min-width: calc(var(--btn-line-height) + (var(--btn-padding-y) * 2) + (var(--btn-border-width) * 2));
padding-inline-start: 0;
padding-inline-end: 0;
.icon {
margin: calc(-1 * var(--btn-padding-x));
}
//[BUG] btn-sm and btn-xl with an icon looks broken
//issue #2470 fixed
min-width: calc(var(--btn-line-height) + (var(--btn-padding-y) * 2) + (var(--btn-border-width) * 2));
}
//
// Button list
//
.btn-list {
@include elements-list;
@include elements-list();
}
.btn-list-center {
@@ -227,12 +226,12 @@
.btn-floating {
--btn-floating-offset: #{$btn-floating-offset};
position: fixed;
z-index: $zindex-fixed;
bottom: var(--btn-floating-offset);
inset-inline-start: var(--btn-floating-offset);
bottom: var(--btn-floating-offset);
z-index: $zindex-fixed;
box-shadow: var(--shadow-dropdown);
@include media-print {
@include media-print() {
display: none;
}
}
@@ -250,20 +249,20 @@
opacity: 0;
}
&:after {
content: '';
display: inline-block;
vertical-align: text-bottom;
border: $spinner-border-width var(--border-style) currentColor;
border-inline-end-color: transparent;
@include border-radius(var(--border-radius-pill));
color: var(--btn-color);
&::after {
position: absolute;
width: var(--btn-icon-size);
height: var(--btn-icon-size);
inset-inline-start: calc(50% - var(--btn-icon-size) / 2);
top: calc(50% - var(--btn-icon-size) / 2);
display: inline-block;
width: var(--btn-icon-size);
height: var(--btn-icon-size);
color: var(--btn-color);
vertical-align: text-bottom;
content: '';
border: $spinner-border-width var(--border-style) currentColor;
border-inline-end-color: transparent;
animation: spinner-border 0.75s linear infinite;
@include border-radius(var(--border-radius-pill));
}
}
@@ -277,7 +276,7 @@
background: transparent;
box-shadow: none;
&:after {
&::after {
content: none;
}
@@ -303,7 +302,7 @@
color: var(--primary);
}
@include media-print {
@include media-print() {
display: none;
}
}
@@ -311,7 +310,7 @@
.btn-actions {
display: flex;
@include media-print {
@include media-print() {
display: none;
}
}
@@ -324,7 +323,7 @@
&:hover,
&:focus-visible {
.icon {
/*rtl:ignore*/
/* rtl:ignore */
transform: translateX(calc(var(--dir) * 4px));
}
}
@@ -342,7 +341,7 @@
&:hover,
&:focus-visible {
.icon {
/*rtl:ignore*/
/* rtl:ignore */
transform: translateX(calc(var(--dir) * -4px));
}
}
core/scss/ui/_calendars.scss
+5 -5
View File
@@ -84,11 +84,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(--calendar-date-size);
content: '';
background: var(--primary-bg-subtle);
@@ -104,11 +104,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
+51 -46
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 {
--stamp-size: #{$card-stamp-size};
position: absolute;
top: 0;
inset-inline-end: 0;
top: 0;
width: calc(var(--stamp-size) * 1);
height: calc(var(--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(--secondary);
color: var(--card-bg, var(--bg-surface));
position: relative;
inset-inline-end: calc(var(--stamp-size) * -0.25);
top: calc(var(--stamp-size) * -0.25);
display: flex;
align-items: center;
justify-content: center;
@include border-radius(var(--border-radius-pill));
width: calc(var(--stamp-size) * 1);
height: calc(var(--stamp-size) * 1);
position: relative;
top: calc(var(--stamp-size) * -0.25);
inset-inline-end: calc(var(--stamp-size) * -0.25);
font-size: calc(var(--stamp-size) * 0.75);
color: var(--card-bg, var(--bg-surface));
background: var(--secondary);
transform: rotate(10deg);
@include border-radius(var(--border-radius-pill));
.icon {
stroke-width: 2;
width: calc(var(--stamp-size) * 0.75);
height: calc(var(--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(--font-weight-medium);
color: inherit;
text-align: center;
border-top: var(--border-width) var(--border-style) var(--border-color);
flex: 1;
color: inherit;
font-weight: var(--font-weight-medium);
@include transition(background $transition-time);
&:hover {
@@ -166,11 +166,11 @@ Stacked card
--card-stacked-offset: #{$card-stacked-offset};
position: relative;
&:after {
&::after {
position: absolute;
top: calc(-1 * var(--card-stacked-offset));
inset-inline-end: var(--card-stacked-offset);
inset-inline-start: var(--card-stacked-offset);
inset-inline-end: var(--card-stacked-offset);
top: calc(-1 * var(--card-stacked-offset));
height: var(--card-stacked-offset);
content: '';
background: var(--card-bg, var(--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 {
--card-actions-gutter: #{$card-actions-gutter};
margin: calc(-1 * var(--card-actions-gutter)) calc(-1 * var(--card-actions-gutter)) calc(-1 * var(--card-actions-gutter)) auto;
padding-inline-start: var(--card-actions-gutter);
margin: calc(-1 * var(--card-actions-gutter)) calc(-1 * var(--card-actions-gutter)) calc(-1 * var(--card-actions-gutter)) auto;
a {
text-decoration: none;
@@ -218,10 +218,10 @@ Stacked card
// Card header
.card-header {
color: inherit;
display: flex;
align-items: center;
background-color: var(--card-cap-bg);
color: inherit;
background-color: var(--card-header-bg, var(--card-cap-bg));
&:first-child {
@include border-radius(var(--card-border-radius) var(--card-border-radius) 0 0);
@@ -229,15 +229,15 @@ Stacked card
}
.card-header-light {
border-bottom-color: transparent;
background: var(--bg-surface-tertiary);
border-bottom-color: transparent;
}
.card-header-tabs {
background: $card-header-tabs-bg;
flex: 1;
margin: calc(var(--card-cap-padding-y) * -1) calc(var(--card-cap-padding-x) * -1) calc(var(--card-cap-padding-y) * -1);
padding: calc(var(--card-cap-padding-y) * 0.5) calc(var(--card-cap-padding-x) * 0.5) 0;
margin: calc(var(--card-cap-padding-y) * -1) calc(var(--card-cap-padding-x) * -1);
background: $card-header-tabs-bg;
@include border-radius(var(--card-border-radius) var(--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(--card-title-margin-bottom);
font-size: $h3-font-size;
font-weight: var(--font-weight-medium);
color: var(--heading-color);
line-height: var(--card-title-line-height);
color: var(--heading-color);
@at-root a#{&}:hover {
color: inherit;
@@ -339,8 +339,8 @@ Stacked card
.card-subtitle {
--card-subtitle-margin-start: #{$card-subtitle-margin-start};
margin-bottom: $card-title-spacer-y;
font-weight: 400;
color: var(--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 {
--card-options-top: #{$card-options-top};
--card-options-inset: #{$card-options-inset};
top: var(--card-options-top);
inset-inline-end: var(--card-options-inset);
top: var(--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(--card-border-radius) var(--card-border-radius) 0 0);
}
@@ -489,10 +489,14 @@ Card table
&:first-child {
border-top: 0;
// Plain semantic table markup (thead/tbody/tfoot > tr > td/th) has no class
// hooks to target instead.
// stylelint-disable selector-max-type
td,
th {
border-top: 0;
}
// stylelint-enable selector-max-type
}
}
}
@@ -500,6 +504,7 @@ Card table
tbody {
tr {
&:last-child {
// stylelint-disable-next-line selector-max-type
td {
border-bottom: 0;
}
@@ -554,8 +559,8 @@ Card avatar
--card-avatar-ring-width: #{$card-avatar-ring-width};
margin-inline-start: auto;
margin-inline-end: auto;
box-shadow: 0 0 0 var(--card-avatar-ring-width) var(--card-bg, var(--bg-surface));
margin-top: calc(-1 * calc(var(--avatar-size) * 0.5));
box-shadow: 0 0 0 var(--card-avatar-ring-width) var(--card-bg, var(--bg-surface));
}
/*
@@ -567,10 +572,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 +602,8 @@ Card list group
&.active,
&:active,
&:hover {
border-color: $card-border-color;
color: var(--body-color);
border-color: $card-border-color;
}
&.active {
@@ -662,8 +667,8 @@ Card list group
}
.nav-tabs + .tab-content .card {
border-end-start-radius: var(--card-border-radius);
border-start-start-radius: 0 !important;
border-end-start-radius: var(--card-border-radius);
}
.tab-content:has(+ .nav-tabs) .card {
@@ -689,8 +694,8 @@ Card gradient
--card-gradient: var(--primary), var(--primary);
background:
radial-gradient(ellipse at center, var(--card-bg) 0%, color-mix(in srgb, var(--card-bg) 0%, transparent) 80%) border-box,
linear-gradient(var(--card-gradient-direction), color-mix(in srgb, var(--card-bg) var(--card-gradient-opacity), transparent) 0%, var(--card-bg) 40%) border-box,
radial-gradient(ellipse at center, var(--card-bg) 0%, color-mix(in sRGB, var(--card-bg) 0%, transparent) 80%) border-box,
linear-gradient(var(--card-gradient-direction), color-mix(in sRGB, var(--card-bg) var(--card-gradient-opacity), transparent) 0%, var(--card-bg) 40%) border-box,
linear-gradient(calc(270deg + var(--card-gradient-direction)), var(--card-gradient)) border-box;
}
core/scss/ui/_carousel.scss
+10 -13
View File
@@ -1,21 +1,18 @@
@use '../config' as *;
.carousel {
}
.carousel-indicators-vertical {
--carousel-indicators-vertical-margin-inline-end: #{$carousel-indicators-vertical-margin-inline-end};
inset-inline-start: auto;
top: 0;
margin: 0 var(--carousel-indicators-vertical-margin-inline-end) 0 0;
flex-direction: column;
margin: 0 var(--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(--border-style) transparent;
border-inline-end: $carousel-indicator-hit-area-height var(--border-style) transparent;
@@ -27,9 +24,9 @@
[data-target] {
width: $carousel-indicator-dot-width;
height: $carousel-indicator-dot-width;
@include border-radius(var(--border-radius-pill));
border: $carousel-indicator-hit-area-height var(--border-style) transparent;
margin: 0;
border: $carousel-indicator-hit-area-height var(--border-style) transparent;
@include border-radius(var(--border-radius-pill));
}
}
@@ -38,21 +35,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(--border-radius));
box-shadow: $box-shadow;
margin: 0 $carousel-indicator-spacer;
opacity: $carousel-indicator-thumb-opacity;
@include border-radius(var(--border-radius));
@include media-breakpoint-up(lg) {
width: $carousel-indicator-thumb-width;
}
&:before {
content: '';
padding-top: var(--aspect-ratio, 100%);
&::before {
display: block;
padding-top: var(--aspect-ratio, 100%);
content: '';
}
}
@@ -65,11 +62,11 @@
}
.carousel-caption-background {
background: red;
position: absolute;
inset-inline-start: 0;
inset-inline-end: 0;
bottom: 0;
height: 90%;
background: $dark;
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(--chart-sparkline-width);
height: var(--chart-sparkline-height);
line-height: 1;
min-height: 0 !important;
line-height: 1;
}
.chart-sparkline-sm {
@@ -65,10 +65,10 @@ Chart sparkline
--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(--chat-bubble-padding);
background: var(--bg-surface-secondary);
@include border-radius(var(--border-radius-lg));
padding: var(--chat-bubble-padding);
position: relative;
}
.chat-bubble-me {
core/scss/ui/_close.scss
+9 -9
View File
@@ -9,36 +9,36 @@
--btn-close-focus-opacity: #{$btn-close-focus-opacity};
--btn-close-disabled-opacity: #{$btn-close-disabled-opacity};
--btn-close-size: #{$btn-close-width};
position: relative;
display: block;
width: var(--btn-close-size);
height: var(--btn-close-size);
padding: $btn-close-padding-y $btn-close-padding-x;
color: var(--btn-close-color);
mask: var(--btn-close-bg) no-repeat center/calc(var(--btn-close-size) * 0.75);
cursor: pointer;
background-color: var(--btn-close-color);
border: 0;
@include border-radius(var(--border-radius));
opacity: var(--btn-close-opacity);
cursor: pointer;
display: block;
position: relative;
mask: var(--btn-close-bg) no-repeat center/calc(var(--btn-close-size) * 0.75);
@include border-radius(var(--border-radius));
// Invisible overlay extending the hit area to a 24x24px minimum touch target
&:before {
content: '';
&::before {
position: absolute;
top: 50%;
left: 50%;
width: max(100%, 24px);
height: max(100%, 24px);
content: '';
transform: translate(-50%, -50%);
}
&:hover {
color: var(--btn-close-color);
text-decoration: none;
opacity: var(--btn-close-hover-opacity);
background-color: var(--btn-close-color);
opacity: var(--btn-close-hover-opacity);
}
&:focus {
@@ -54,7 +54,7 @@
opacity: var(--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 @@
--datagrid-title-margin-bottom: #{$datagrid-title-margin-bottom};
display: grid;
grid-gap: var(--datagrid-padding);
grid-template-columns: repeat(auto-fit, minmax(var(--datagrid-item-width), 1fr));
grid-gap: var(--datagrid-padding);
}
.datagrid-title {
@include subheader;
@include subheader();
margin-bottom: var(--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(--dropdown-item-gap);
align-items: center;
min-width: $dropdown-min-width;
margin: 0;
line-height: $line-height-base;
gap: var(--dropdown-item-gap);
}
.dropdown-item-icon {
@@ -45,15 +45,15 @@
}
.dropdown-item-indicator {
height: var(--dropdown-item-icon-size);
display: inline-flex;
align-items: center;
height: var(--dropdown-item-icon-size);
line-height: 1;
vertical-align: bottom;
align-items: center;
}
.dropdown-header {
@include subheader;
@include subheader();
padding-bottom: var(--dropdown-header-padding-bottom);
pointer-events: none;
}
@@ -78,48 +78,49 @@
}
.dropdown-menu-arrow {
&:before {
content: '';
&::before {
position: absolute;
top: calc(-1 * var(--dropdown-arrow-offset));
inset-inline-start: var(--dropdown-arrow-inset);
top: calc(-1 * var(--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(--dropdown-arrow-inset);
&::before {
inset-inline-start: auto;
inset-inline-end: var(--dropdown-arrow-inset);
}
}
}
.dropend {
> .dropdown-menu {
margin-top: subtract(calc(-1 * $dropdown-padding-y), 1px);
margin-inline-start: calc(-1 * var(--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(--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(--empty-icon-margin-bottom);
width: var(--empty-icon-size);
height: var(--empty-icon-size);
margin: 0 0 var(--empty-icon-margin-bottom);
line-height: 1;
color: var(--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
+10 -10
View File
@@ -17,10 +17,10 @@ Form label
font-weight: var(--font-weight-medium);
&.required {
&:after {
content: '*';
&::after {
margin-inline-start: var(--form-label-required-gap);
color: $red;
content: '*';
}
}
}
@@ -46,7 +46,7 @@ Form hint
margin-bottom: 0;
}
& + .form-control {
+ .form-control {
margin-top: var(--form-hint-margin-top);
}
@@ -76,8 +76,8 @@ Form control
*/
.form-control {
&:-webkit-autofill {
box-shadow: 0 0 0 1000px var(--bg-surface-secondary) inset;
color: var(--body-color);
box-shadow: 0 0 0 1000px var(--bg-surface-secondary) inset;
-webkit-text-fill-color: var(--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
--form-help-font-size: #{$form-help-font-size};
display: inline-flex;
font-weight: var(--font-weight-semibold);
align-items: center;
justify-content: center;
width: var(--form-help-size);
height: var(--form-help-size);
font-size: var(--form-help-font-size);
font-weight: var(--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} {
--grid-row-gutter: #{$value};
margin-inline-end: calc(-1 * var(--grid-row-gutter));
margin-inline-start: calc(-1 * var(--grid-row-gutter));
margin-inline-end: calc(-1 * var(--grid-row-gutter));
> .col,
> [class*='col-'] {
padding-inline-end: var(--grid-row-gutter);
padding-inline-start: var(--grid-row-gutter);
padding-inline-end: var(--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 {
--icon-size: #{$font-size-base * $line-height-base};
display: inline-block;
width: var(--icon-size);
height: var(--icon-size);
font-size: var(--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 {
--img-responsive-ratio: #{math.percentage(0.75)};
background: no-repeat center/cover;
padding-top: var(--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 {
--legend-size: #{$legend-size};
display: inline-block;
background: $legend-bg;
width: var(--legend-size);
height: var(--legend-size);
@include border-radius($legend-border-radius);
background: $legend-bg;
border: 1px solid var(--border-color-translucent);
@include border-radius($legend-border-radius);
}
core/scss/ui/_lists.scss
+11 -13
View File
@@ -8,13 +8,13 @@
}
.list-group-header {
background: $list-group-header-bg;
padding: var(--list-group-header-padding-y) $list-group-item-padding-x;
font-size: $h5-font-size;
font-weight: var(--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(--border-width) var(--border-style) var(--border-color);
.list-group-flush > & {
@@ -26,6 +26,12 @@
.list-group-item {
background-color: inherit;
&.disabled,
&:disabled {
color: $gray-500;
background-color: $dropdown-link-hover-bg;
}
}
.list-group-item.active {
@@ -34,18 +40,10 @@
border-inline-start-width: $border-width-wide;
}
.list-group-item {
&.disabled,
&:disabled {
color: $gray-500;
background-color: $dropdown-link-hover-bg;
}
}
.list-bordered {
.list-item {
border-top: var(--border-width) var(--border-style) var(--border-color);
margin-top: -1px;
border-top: var(--border-width) var(--border-style) var(--border-color);
&:first-child {
border-top: none;
@@ -119,8 +117,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(--border-style);
border-color: transparent;
border-top-color: currentColor;
border-inline-start-color: currentColor;
@include border-radius(var(--border-radius-pill));
border-top-color: currentColor;
animation: rotate-360 0.6s linear;
animation-iteration-count: infinite;
@include border-radius(var(--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(--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)
--markdown-blockquote-padding-y: #{$markdown-blockquote-padding-y};
--markdown-blockquote-padding-x: #{$markdown-blockquote-padding-x};
--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(--markdown-blockquote-margin-y) 0;
padding: var(--markdown-blockquote-padding-y) var(--markdown-blockquote-padding-x);
margin: var(--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(--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(--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 @@
--modal-body-title-margin-bottom: #{$modal-body-title-margin-bottom};
--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(--nav-vertical-nested-padding-start);
margin-inline-start: var(--nav-vertical-nested-margin-start);
border-inline-start: var(--border-width) var(--border-style) var(--border-color);
padding-inline-start: var(--nav-vertical-nested-padding-start);
}
.nav-link.active,
@@ -81,12 +81,12 @@
}
.nav-link-toggle {
margin-inline-start: auto;
padding: 0 var(--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(--pagination-gap);
margin: 0;
line-height: var(--body-line-height);
user-select: none;
--pagination-gap: #{$pagination-gap};
--pagination-link-min-width: #{$pagination-link-min-width};
--page-text-padding-x: #{$page-text-padding-x};
user-select: none;
gap: var(--pagination-gap);
line-height: var(--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(--pattern-size) / 2) calc(var(--pattern-size) / 2);
background-size: var(--pattern-size) var(--pattern-size);
background-clip: padding-box;
background-size: var(--pattern-size) var(--pattern-size);
border: var(--border-width) var(--border-style) var(--pattern-border);
}
@@ -46,8 +46,8 @@
background-position:
-1px -1px,
calc(var(--pattern-size) - 1px) calc(var(--pattern-size) - 1px);
background-size: calc(var(--pattern-size) * 2) calc(var(--pattern-size) * 2);
background-clip: padding-box;
background-size: calc(var(--pattern-size) * 2) calc(var(--pattern-size) * 2);
border: var(--border-width) var(--border-style) var(--pattern-border);
}
@@ -56,10 +56,10 @@
--pattern-fill: color-mix(in oklch, var(--pattern-color) 6%, transparent);
--pattern-border: color-mix(in oklch, var(--pattern-color) 10%, transparent);
--pattern-size: #{$pattern-size};
background-size: var(--pattern-size) var(--pattern-size);
background-image: repeating-linear-gradient(0deg, var(--pattern-fill), var(--pattern-fill) 1px, transparent 1px, transparent);
background-position: -1px -1px;
background-clip: padding-box;
background-size: var(--pattern-size) var(--pattern-size);
border: var(--border-width) var(--border-style) var(--pattern-border);
}
@@ -68,10 +68,10 @@
--pattern-fill: color-mix(in oklch, var(--pattern-color) 6%, transparent);
--pattern-border: color-mix(in oklch, var(--pattern-color) 10%, transparent);
--pattern-size: #{$pattern-size};
background-size: var(--pattern-size) var(--pattern-size);
background-image: repeating-linear-gradient(90deg, var(--pattern-fill), var(--pattern-fill) 1px, transparent 1px, transparent);
background-position: -1px -1px;
background-clip: padding-box;
background-size: var(--pattern-size) var(--pattern-size);
border: var(--border-width) var(--border-style) var(--pattern-border);
}
@@ -81,11 +81,11 @@
--pattern-border: color-mix(in oklch, var(--pattern-color) 10%, transparent);
--pattern-size: #{$pattern-size};
background-image: linear-gradient(to right, var(--pattern-fill) 1px, transparent 1px), linear-gradient(to bottom, var(--pattern-fill) 1px, transparent 1px);
background-size: calc(var(--pattern-size) * 2) calc(var(--pattern-size) * 2);
background-position:
-1px -1px,
-1px -1px;
background-clip: padding-box;
background-size: calc(var(--pattern-size) * 2) calc(var(--pattern-size) * 2);
border: var(--border-width) var(--border-style) var(--pattern-border);
}
@@ -95,9 +95,9 @@
--pattern-border: color-mix(in oklch, var(--pattern-color) 10%, transparent);
--pattern-size: #{$pattern-size};
background-image: linear-gradient(45deg, transparent 49%, var(--pattern-fill) 49%, var(--pattern-fill) 51%, transparent 51%), linear-gradient(-45deg, transparent 49%, var(--pattern-fill) 49%, var(--pattern-fill) 51%, transparent 51%);
background-size: calc(var(--pattern-size) * 2) calc(var(--pattern-size) * 2);
background-position: center center;
background-clip: padding-box;
background-size: calc(var(--pattern-size) * 2) calc(var(--pattern-size) * 2);
border: var(--border-width) var(--border-style) var(--pattern-border);
}
@@ -107,17 +107,17 @@
--pattern-line: color-mix(in oklch, var(--pattern-color) 6%, transparent);
--pattern-border: color-mix(in oklch, var(--pattern-color) 10%, transparent);
background-image: linear-gradient(var(--pattern-line) 2px, transparent 2px), linear-gradient(90deg, var(--pattern-line) 2px, transparent 2px), linear-gradient(var(--pattern-line) 1px, transparent 1px), linear-gradient(90deg, var(--pattern-line) 1px, transparent 1px);
background-size:
calc(var(--pattern-size) * 10) calc(var(--pattern-size) * 10),
calc(var(--pattern-size) * 10) calc(var(--pattern-size) * 10),
calc(var(--pattern-size) * 2) calc(var(--pattern-size) * 2),
calc(var(--pattern-size) * 2) calc(var(--pattern-size) * 2);
background-position:
-3px -3px,
-3px -3px,
-2px -2px,
-2px -2px;
background-clip: padding-box;
background-size:
calc(var(--pattern-size) * 10) calc(var(--pattern-size) * 10),
calc(var(--pattern-size) * 10) calc(var(--pattern-size) * 10),
calc(var(--pattern-size) * 2) calc(var(--pattern-size) * 2),
calc(var(--pattern-size) * 2) calc(var(--pattern-size) * 2);
border: var(--border-width) var(--border-style) var(--pattern-border);
}
@@ -127,11 +127,11 @@
--pattern-fill: color-mix(in oklch, var(--pattern-color) 10%, transparent);
--pattern-border: color-mix(in oklch, var(--pattern-color) 10%, transparent);
background-image: radial-gradient(var(--pattern-fill) 1px, transparent 1px), radial-gradient(var(--pattern-fill) 1px, transparent 1px);
background-size: calc(var(--pattern-size) * 2) calc(var(--pattern-size) * 2);
background-position:
0 0,
var(--pattern-size) var(--pattern-size);
background-clip: padding-box;
background-size: calc(var(--pattern-size) * 2) calc(var(--pattern-size) * 2);
border: var(--border-width) var(--border-style) var(--pattern-border);
}
@@ -180,8 +180,8 @@
linear-gradient(225deg, var(--pattern-fill) 25%, transparent 25%) calc(-1 * var(--pattern-size)) 0,
linear-gradient(315deg, var(--pattern-fill) 25%, transparent 25%),
linear-gradient(45deg, var(--pattern-fill) 25%, transparent 25%);
background-size: calc(2 * var(--pattern-size)) calc(2 * var(--pattern-size));
background-clip: padding-box;
background-size: calc(2 * var(--pattern-size)) calc(2 * var(--pattern-size));
border: var(--border-width) var(--border-style) var(--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(--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
--progressbg-padding-y: #{$progressbg-padding-y};
--progressbg-padding-x: #{$progressbg-padding-x};
position: relative;
padding: var(--progressbg-padding-y) var(--progressbg-padding-x);
display: flex;
padding: var(--progressbg-padding-y) var(--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 {
--progressbg-value-padding-start: #{$progressbg-value-padding-start};
font-weight: var(--font-weight-medium);
margin-inline-start: auto;
padding-inline-start: var(--progressbg-value-padding-start);
margin-inline-start: auto;
font-weight: var(--font-weight-medium);
}
/**
@@ -130,11 +130,11 @@ Progress steps
--progress-steps-gap: #{$progress-steps-gap};
display: flex;
flex-wrap: nowrap;
gap: var(--progress-steps-gap);
width: 100%;
padding: 0;
margin: 0;
list-style: none;
gap: var(--progress-steps-gap);
}
.progress-steps-item {
core/scss/ui/_ribbons.scss
+30 -30
View File
@@ -17,9 +17,14 @@
--ribbon-bookmark-notch-width: #{$ribbon-bookmark-notch-width};
position: absolute;
top: var(--ribbon-offset);
inset-inline-end: calc(-1 * var(--ribbon-margin));
top: var(--ribbon-offset);
z-index: 1;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: var(--ribbon-min-size);
min-height: var(--ribbon-min-size);
padding: var(--ribbon-padding-y) var(--ribbon-padding-x);
font-size: var(--ribbon-font-size);
font-weight: var(--font-weight-semibold);
@@ -30,13 +35,8 @@
background: var(--primary);
border-color: var(--primary);
@include border-radius(var(--ribbon-border-radius) 0 var(--ribbon-border-radius) var(--ribbon-border-radius));
display: inline-flex;
align-items: center;
justify-content: center;
min-height: var(--ribbon-min-size);
min-width: var(--ribbon-min-size);
&:before {
&::before {
position: absolute;
inset-inline-end: 0;
bottom: 100%;
@@ -46,8 +46,8 @@
filter: brightness(70%);
border: calc(var(--ribbon-margin) * 0.5) var(--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(--ribbon-margin));
inset-inline-end: var(--ribbon-offset);
top: calc(-1 * var(--ribbon-margin));
width: var(--ribbon-top-width);
padding: var(--ribbon-top-padding-y) 0;
@include border-radius(0 var(--ribbon-border-radius) var(--ribbon-border-radius) var(--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(--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(--ribbon-margin));
inset-inline-end: auto;
@include border-radius(0 var(--ribbon-border-radius) var(--ribbon-border-radius) var(--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(--ribbon-padding-y);
@include border-radius(0 0 var(--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(--ribbon-bookmark-border-size) var(--border-style);
border-color: inherit;
border-inline-end-width: 0;
border-inline-start-color: transparent;
border-inline-start-width: var(--ribbon-bookmark-notch-width);
border-inline-end-width: 0;
}
&.ribbon-left {
padding-inline-end: var(--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(--ribbon-bookmark-notch-width);
border-inline-start-width: 0;
}
}
&.ribbon-top {
padding-inline-start: 0;
padding-inline-end: 0;
padding-bottom: var(--ribbon-padding-y);
padding-inline-start: 0;
@include border-radius(0 var(--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(--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(--nav-link-gap));
align-items: center;
margin: 0;
font-size: var(--nav-font-size);
justify-content: center;
min-width: calc(var(--nav-height) - 2 * var(--nav-padding));
height: calc(var(--nav-height) - 2 * var(--nav-padding));
padding: 0 calc(var(--nav-link-padding-x) - 2px);
border: 1px solid transparent;
background: transparent;
margin: 0;
font-size: var(--nav-font-size);
color: var(--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(--nav-radius));
flex-grow: 1;
justify-content: center;
&:hover,
&.hover {
background: rgba(0, 0, 0, 0.04);
color: var(--body-color);
background: rgba(0, 0, 0, 0.04);
}
&.disabled,
core/scss/ui/_signature.scss
+4 -4
View File
@@ -4,19 +4,19 @@
--signature-padding: var(--spacer-1);
--signature-border-radius: var(--border-radius);
--signature-canvas-height: 12.5rem;
border: var(--border-width) solid var(--border-color);
padding: var(--signature-padding);
border: var(--border-width) solid var(--border-color);
@include border-radius(var(--border-radius));
}
.signature-canvas {
border: var(--border-width) dashed var(--border-color);
@include border-radius(calc(var(--signature-border-radius) - var(--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(--signature-canvas-height);
cursor: crosshair;
border: var(--border-width) dashed var(--border-color);
@include border-radius(calc(var(--signature-border-radius) - var(--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 @@
--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(--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 @@
--status-gap: #{$status-gap};
display: inline-flex;
gap: var(--status-gap);
align-items: center;
height: var(--status-height);
padding: var(--status-padding-y) var(--status-padding-x);
gap: var(--status-gap);
color: var(--status-color);
background: var(--status-bg);
margin: 0;
font-size: $font-size-base;
text-transform: none;
letter-spacing: normal;
@include border-radius(var(--border-radius-pill));
font-weight: var(--font-weight-medium);
line-height: 1;
margin: 0;
color: var(--status-color);
text-transform: none;
letter-spacing: normal;
background: var(--status-bg);
@include border-radius(var(--border-radius-pill));
.status-dot {
background: var(--status-color);
@@ -76,9 +76,9 @@
}
.status-lite {
border: var(--border-width) var(--border-style) var(--border-color) !important;
background: transparent !important;
color: var(--body-color) !important;
background: transparent !important;
border: var(--border-width) var(--border-style) var(--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 {
--status-indicator-size: #{$status-indicator-size};
--status-indicator-color: var(--status-color, #{$text-secondary});
display: block;
position: relative;
display: block;
width: var(--status-indicator-size);
height: var(--status-indicator-size);
}
@@ -132,11 +132,11 @@
position: absolute;
inset-inline-start: 50%;
top: 50%;
margin: calc(var(--status-circle-size) / -2) 0 0 calc(var(--status-circle-size) / -2);
width: var(--status-circle-size);
height: var(--status-circle-size);
@include border-radius(var(--border-radius-pill));
margin: calc(var(--status-circle-size) / -2) 0 0 calc(var(--status-circle-size) / -2);
background: var(--status-color);
@include border-radius(var(--border-radius-pill));
&:nth-child(1) {
z-index: 3;
core/scss/ui/_steps.scss
+29 -27
View File
@@ -40,11 +40,11 @@
position: relative;
flex: 1 1 0;
min-height: var(--step-item-min-height);
padding-top: calc(var(--steps-dot-size));
margin-top: 0;
color: inherit;
text-align: center;
cursor: default;
padding-top: calc(var(--steps-dot-size));
@at-root a#{&} {
cursor: pointer;
@@ -54,12 +54,12 @@
}
}
&:after,
&:before {
&::after,
&::before {
background: var(--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(--steps-dot-size) * 0.5);
height: var(--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(--border-radius-pill));
/*rtl:ignore*/
transform: translateX(calc(var(--dir) * -50%));
color: var(--white);
width: var(--steps-dot-size);
height: var(--steps-dot-size);
color: var(--white);
content: '';
/* rtl:ignore */
transform: translateX(calc(var(--dir) * -50%));
@include border-radius(var(--border-radius-pill));
}
&.active {
font-weight: var(--font-weight-semibold);
&:after {
&::after {
background: var(--steps-inactive-color);
}
& ~ .step-item {
~ .step-item {
color: var(--disabled-color);
&:after,
&:before {
&::after,
&::before {
background: var(--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(--steps-dot-size) + var(--steps-vertical-padding-start));
min-height: auto;
padding-inline-start: calc(var(--steps-dot-size) + var(--steps-vertical-padding-start));
padding-top: 0;
text-align: start;
&:not(:first-child) {
margin-top: var(--steps-vertical-item-gap);
}
&:before {
top: var(--steps-dot-offset);
&::before {
inset-inline-start: 0;
top: var(--steps-dot-offset);
transform: translate(0, 0);
}
&:not(:last-child) {
&:after {
&::after {
position: absolute;
content: '';
/*rtl:ignore*/
transform: translateX(calc(var(--dir) * -50%));
top: var(--steps-dot-offset);
inset-inline-start: calc(var(--steps-dot-size) * 0.5);
top: var(--steps-dot-offset);
width: var(--steps-border-width);
height: calc(100% + var(--steps-vertical-connector-gap));
content: '';
/* rtl:ignore */
transform: translateX(calc(var(--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;
@@ -45,8 +45,8 @@
.switch-icon-b {
position: absolute;
top: 0;
inset-inline-start: 0;
top: 0;
opacity: 0;
}
@@ -166,13 +166,13 @@
}
.switch-icon-b {
/*rtl:ignore*/
/* rtl:ignore */
transform: translateX(calc(var(--dir) * 100%));
}
&.active {
.switch-icon-a {
/*rtl:ignore*/
/* rtl:ignore */
transform: translateX(calc(var(--dir) * -100%));
}
@@ -189,13 +189,13 @@
}
.switch-icon-b {
/*rtl:ignore*/
/* rtl:ignore */
transform: translateX(calc(var(--dir) * -100%));
}
&.active {
.switch-icon-a {
/*rtl:ignore*/
/* rtl:ignore */
transform: translateX(calc(var(--dir) * 100%));
}
core/scss/ui/_tables.scss
+25 -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;
}
}
@@ -32,6 +32,9 @@
}
}
// Matches Bootstrap's own `.table > :not(caption) > * > *` idiom for targeting every
// cell regardless of thead/tbody/tfoot wrapping.
// stylelint-disable selector-max-universal
.table-nowrap {
> :not(caption) > * > * {
white-space: nowrap;
@@ -49,10 +52,11 @@
text-align: center;
}
}
// stylelint-enable selector-max-universal
.td-truncate {
max-width: 1px;
width: 100%;
max-width: 1px;
}
.table-mobile {
@@ -74,14 +78,14 @@
td {
display: block;
padding: $table-cell-padding-x $table-cell-padding-y !important;
border: none;
color: var(--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 +108,18 @@ Table sort
.table-sort {
--table-sort-icon-size: #{$table-sort-icon-size};
--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 +128,22 @@ Table sort
color: var(--body-color);
}
&:after {
content: '';
&::after {
display: inline-flex;
width: var(--table-sort-icon-size);
height: var(--table-sort-icon-size);
vertical-align: bottom;
mask-image: $table-sort-bg-image;
background: currentColor;
margin-inline-start: var(--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 @@
--tag-icon-margin-end: #{$tag-icon-margin-end};
--tag-icon-size: #{$tag-icon-size};
--tag-check-size: #{$tag-check-size};
border: $border-width solid var(--border-color);
display: inline-flex;
gap: var(--tag-gap);
align-items: center;
height: var(--tag-height);
@include border-radius(var(--border-radius));
padding: 0 var(--tag-padding-x);
background: var(--bg-surface);
border: $border-width solid var(--border-color);
box-shadow: var(--shadow-input);
gap: var(--tag-gap);
@include border-radius(var(--border-radius));
.btn-close {
margin-inline-end: var(--tag-close-margin-end);
margin-inline-start: var(--tag-close-margin-start);
padding: 0;
width: var(--tag-close-size);
height: var(--tag-close-size);
padding: 0;
margin-inline-start: var(--tag-close-margin-start);
margin-inline-end: var(--tag-close-margin-end);
font-size: var(--tag-close-font-size);
}
}
@@ -53,10 +53,10 @@
}
.tag-icon {
color: var(--secondary);
margin-inline-end: var(--tag-icon-margin-end);
width: var(--tag-icon-size);
height: var(--tag-icon-size);
margin-inline-end: var(--tag-icon-margin-end);
color: var(--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 {
--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(--page-padding);
&:before {
content: '';
&::before {
position: absolute;
top: var(--timeline-icon-size);
inset-inline-start: calc(var(--timeline-icon-size) / 2);
top: var(--timeline-icon-size);
bottom: calc(-1 * var(--page-padding));
width: var(--border-width);
content: '';
background-color: var(--border-color);
@include border-radius(var(--border-radius));
}
@@ -34,15 +34,15 @@
.timeline-event-icon {
position: absolute;
z-index: 5;
display: flex;
align-items: center;
justify-content: center;
width: var(--timeline-icon-size, $avatar-size);
height: var(--timeline-icon-size, $avatar-size);
background: var(--bg-surface-secondary);
color: var(--secondary);
background: var(--bg-surface-secondary);
@include border-radius(var(--border-radius));
z-index: 5;
}
.timeline-event-card {
core/scss/ui/_toasts.scss
+1 -1
View File
@@ -15,7 +15,7 @@
}
}
@include media-print {
@include media-print() {
display: none;
}
}
core/scss/ui/_toolbar.scss
+2 -2
View File
@@ -4,15 +4,15 @@
--toolbar-gutter: #{$toolbar-gutter};
display: flex;
flex-wrap: nowrap;
flex-shrink: 0;
flex-wrap: nowrap;
margin: 0 calc(-1 * var(--toolbar-gutter));
> * {
margin: 0 var(--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(--tracking-block-border-radius));
height: var(--tracking-height);
min-width: var(--tracking-block-min-width);
height: var(--tracking-height);
background: var(--border-color);
@include border-radius(var(--tracking-block-border-radius));
}
core/scss/ui/_type.scss
+44 -44
View File
@@ -3,16 +3,16 @@
@forward 'typo/hr';
.lead {
color: var(--secondary);
font-size: inherit;
color: var(--secondary);
}
a {
text-decoration-skip-ink: auto;
color: color-mix(in srgb, transparent, var(--link-color) var(--link-opacity, 100%));
color: color-mix(in sRGB, transparent, var(--link-color) var(--link-opacity, 100%));
&:hover {
color: color-mix(in srgb, transparent, var(--link-hover-color) var(--link-opacity, 100%));
color: color-mix(in sRGB, transparent, var(--link-hover-color) var(--link-opacity, 100%));
}
}
@@ -97,7 +97,7 @@ blockquote {
display: block;
text-align: end;
&:before {
&::before {
content: '— ';
}
}
@@ -125,22 +125,22 @@ dl {
pre {
--scrollbar-color: #{$pre-color};
padding: $pre-padding;
background: $pre-bg;
color: $pre-color;
@include border-radius(var(--border-radius));
line-height: $line-height-base;
color: $pre-color;
background: $pre-bg;
@include border-radius(var(--border-radius));
@include scrollbar;
@include scrollbar();
code {
background: transparent;
padding: 0;
background: transparent;
}
}
code {
background: var(--code-bg);
padding: 2px 4px;
background: var(--code-bg);
@include border-radius(var(--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(--primary);
text-decoration: none;
background: color-transparent(var(--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(--shadow-border);
@include border-radius(var(--border-radius-pill));
line-height: calc(16em / 12);
padding: calc(2em / 12) calc(8em / 12);
font-size: calc(12em / 14);
font-weight: var(--font-weight-medium);
line-height: calc(16em / 12);
color: var(--body-color);
background: var(--bg-surface-tertiary);
padding: calc(2em / 12) calc(8em / 12);
font-weight: var(--font-weight-medium);
box-shadow: var(--shadow-border);
@include border-radius(var(--border-radius-pill));
@at-root a#{&} {
cursor: pointer;
&:hover,
&.hover {
background: var(--bg-surface-secondary);
text-decoration: underline;
background: var(--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(--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(--shadow-border);
vertical-align: middle;
text-align: center;
@include border-radius(var(--border-radius-pill));
}
.mention-app {
box-shadow: none;
background: none;
border-radius: 0;
box-shadow: none;
}
.mention-count {
color: var(--secondary);
margin-inline-start: calc(8em / 12);
color: var(--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: (
--steps-margin-start: #{$steps-margin-start};
--steps-margin-bottom: #{$steps-margin-bottom};
--steps-heading-margin-top: #{$steps-heading-margin-top};
margin-inline-start: var(--steps-margin-start);
padding-inline-start: var(--steps-padding);
margin-inline-start: var(--steps-margin-start);
margin-bottom: var(--steps-margin-bottom);
counter-reset: step;
border-inline-start: 1px solid var(--border-color);
margin-bottom: var(--steps-margin-bottom);
h3 {
counter-increment: step;
@@ -301,22 +301,22 @@ $text-variants: (
margin-top: var(--steps-heading-margin-top) !important;
}
&:before {
content: counter(step);
display: inline-block;
&::before {
position: absolute;
margin-top: 1px;
margin-inline-start: calc(-1 * var(--steps-padding) - var(--steps-item-size) / 2);
display: inline-block;
width: var(--steps-item-size);
height: var(--steps-item-size);
text-align: center;
color: var(--body-color);
border: 1px solid var(--border-color);
background: var(--bg-surface);
@include border-radius(var(--border-radius));
line-height: calc(var(--steps-item-size) - 2px);
margin-inline-start: calc(-1 * var(--steps-padding) - var(--steps-item-size) / 2);
margin-top: 1px;
font-size: var(--font-size-h4);
font-weight: var(--font-weight-semibold);
line-height: calc(var(--steps-item-size) - 2px);
color: var(--body-color);
text-align: center;
content: counter(step);
background: var(--bg-surface);
border: 1px solid var(--border-color);
@include border-radius(var(--border-radius));
}
}
@@ -329,13 +329,13 @@ $text-variants: (
--callout-margin-bottom: #{$callout-margin-bottom};
--callout-padding-y: #{$callout-padding-y};
--callout-padding-x: #{$callout-padding-x};
padding: var(--callout-padding-y) var(--callout-padding-x);
margin-bottom: var(--callout-margin-bottom);
background: var(--primary-bg-subtle);
border: 1px solid var(--primary-bg-muted);
@include border-radius(var(--border-radius));
padding: var(--callout-padding-y) var(--callout-padding-x);
background: var(--primary-bg-subtle);
& > :last-child {
> :last-child {
margin-bottom: 0;
}
}
core/scss/ui/forms/_form-check.scss
+10 -13
View File
@@ -25,14 +25,10 @@ Form check
.form-check-input {
--form-check-input-width: #{$form-check-input-width};
margin-top: ($form-check-min-height - $form-check-input-width) * 0.5;
background-size: var(--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 & {
@include transition(background-color$transition-time, background-position $transition-time);
}
}
.form-check-label {
@@ -41,10 +37,10 @@ Form check
display: block;
&.required {
&:after {
content: '*';
&::after {
margin-inline-start: var(--form-check-label-required-gap);
color: $red;
content: '*';
}
}
}
@@ -53,9 +49,9 @@ Form check
--form-check-description-margin-top: #{$form-check-description-margin-top};
display: block;
color: var(--secondary);
font-size: $h5-font-size;
margin-top: var(--form-check-description-margin-top);
font-size: $h5-font-size;
color: var(--secondary);
}
.form-check-single {
@@ -73,6 +69,7 @@ Form switch
.form-check-input {
height: $form-switch-height;
margin-top: ($form-check-min-height - $form-switch-height) * 0.5;
@include transition(background-color $transition-time, background-position $transition-time);
}
}
@@ -84,15 +81,15 @@ Form switch
--form-switch-lg-bg-size: #{$form-switch-lg-bg-size};
--form-switch-lg-input-offset: #{$form-switch-lg-input-offset};
--form-switch-lg-label-padding-top: #{$form-switch-lg-label-padding-top};
padding-inline-start: var(--form-switch-lg-padding-start);
min-height: var(--form-switch-lg-min-height);
padding-inline-start: var(--form-switch-lg-padding-start);
.form-check-input {
height: var(--form-switch-lg-height);
width: var(--form-switch-lg-width);
background-size: var(--form-switch-lg-bg-size);
height: var(--form-switch-lg-height);
margin-inline-start: var(--form-switch-lg-input-offset);
background-size: var(--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(--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 {
--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(--input-icon-addon-width);
height: $input-height;
font-size: 1.2em;
color: var(--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(--primary);
}
&:before {
&::before {
position: absolute;
top: var(--form-imagecheck-check-offset);
inset-inline-start: var(--form-imagecheck-check-offset);
top: var(--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(--form-imagecheck-radius) - 1px);
border-end-start-radius: calc(var(--form-imagecheck-radius) - 1px);
border-end-end-radius: calc(var(--form-imagecheck-radius) - 1px);
}
.form-imagecheck:hover &,
core/scss/ui/forms/_form-selectgroup.scss
+9 -12
View File
@@ -7,9 +7,9 @@ Select group
--form-selectgroup-gap: #{$form-selectgroup-gap};
--form-selectgroup-icon-margin-x: #{$form-selectgroup-icon-margin-x};
display: inline-flex;
margin: 0;
flex-wrap: wrap;
gap: var(--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(--secondary);
background: $form-check-input-bg;
text-align: center;
cursor: pointer;
user-select: none;
background: $form-check-input-bg;
border: var(--border-width) var(--border-style) $input-border-color;
@include border-radius(var(--border-radius));
box-shadow: $input-box-shadow;
@include border-radius(var(--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 {
@@ -113,17 +113,14 @@ Select group
box-shadow: $input-btn-focus-box-shadow;
}
.form-selectgroup-label-content {
}
/**
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
+16 -16
View File
@@ -14,58 +14,58 @@ Hr text
--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(--border-color);
}
&:before {
content: '';
&::before {
margin-inline-end: var(--hr-text-gap);
content: '';
}
&:after {
content: '';
&::after {
margin-inline-start: var(--hr-text-gap);
content: '';
}
> *:first-child {
padding-inline-end: var(--hr-text-gap);
padding-inline-start: 0;
padding-inline-end: var(--hr-text-gap);
color: var(--secondary);
}
&.hr-text-left,
&.hr-text-start {
&:before {
&::before {
content: none;
}
& > *:first-child {
padding-inline-end: var(--hr-text-gap);
> *:first-child {
padding-inline-start: var(--hr-text-gap);
padding-inline-end: var(--hr-text-gap);
}
}
&.hr-text-right,
&.hr-text-end {
&:before {
&::before {
content: '';
}
&:after {
&::after {
content: none;
}
& > *:first-child {
padding-inline-end: 0;
> *:first-child {
padding-inline-start: var(--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/utils/_colors.scss
+2 -2
View File
@@ -52,7 +52,7 @@
&:focus {
$hover-color: if(sass(color-contrast($value) == $color-contrast-light): shade-color($value, $link-shade-percentage); else: tint-color($value, $link-shade-percentage));
color: RGBA(#{to-rgb($hover-color)}, var(--link-opacity, 1)) if(sass($enable-important-utilities): !important; else: null);
text-decoration-color: RGBA(to-rgb($hover-color), var(--link-underline-opacity, 1)) if(sass($enable-important-utilities): !important; else: null);
text-decoration-color: rgba(to-rgb($hover-color), var(--link-underline-opacity, 1)) if(sass($enable-important-utilities): !important; else: null);
}
}
}
@@ -97,7 +97,7 @@
.bg-inverted {
--bg-opacity: 1;
background-color: color-mix(in srgb, var(--bg-surface-inverted) calc(var(--bg-opacity) * 100%), transparent) !important;
background-color: color-mix(in sRGB, var(--bg-surface-inverted) calc(var(--bg-opacity) * 100%), transparent) !important;
}
.bg-surface {
background-color: var(--bg-surface) !important;
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(--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(--shadow-dropdown);
background-color: var(--bg-surface);
box-shadow: var(--shadow-dropdown);
@include border-radius(var(--border-radius));
}
@@ -13,8 +13,8 @@
input.clr-color {
@include border-radius(var(--border-radius));
color: var(--body-color);
border-color: var(--border-color);
background: transparent;
border-color: var(--border-color);
&:focus {
@include focus-ring(true);
@@ -24,10 +24,10 @@ input.clr-color {
.clr-swatches {
button {
@include border-radius(var(--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(--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(--border-radius));
&:after {
&::after {
box-shadow: inset 0 0 0 1px var(--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(--border-width) dashed var(--border-color) !important;
color: var(--secondary) !important;
padding: 1rem !important;
color: var(--secondary) !important;
border: var(--border-width) dashed var(--border-color) !important;
&.dz-drag-hover {
border: var(--border-width) dashed var(--primary);
background: color-transparent(var(--primary), 0.01);
color: var(--primary);
background: color-transparent(var(--primary), 0.01);
border: var(--border-width) dashed var(--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(--bg-surface-secondary);
color: var(--secondary);
text-transform: uppercase;
font-weight: var(--font-weight-medium);
font-size: var(--font-size-h5);
padding-top: 0.5rem !important;
padding-bottom: 0.5rem !important;
font-size: var(--font-size-h5);
font-weight: var(--font-weight-medium);
line-height: 1;
color: var(--secondary);
text-transform: uppercase;
background-color: var(--bg-surface-secondary);
}
.fc-event-time {
@@ -50,8 +50,8 @@
}
.fc-button {
font-weight: var(--font-weight-medium) !important;
color: var(--body-color) !important;
background-color: transparent !important;
border-color: var(--border-color) !important;
font-weight: var(--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(--bg-surface-inverted);
color: var(--text-inverted);
font-family: inherit;
font-size: $h5-font-size;
color: var(--text-inverted);
background: var(--bg-surface-inverted);
box-shadow: $card-box-shadow;
}
.jvm-series-container .jvm-legend .jvm-legend-title {
border-bottom: 0;
font-weight: var(--font-weight-medium);
border-bottom: 0;
}
.jvm-series-container .jvm-legend {
min-width: 8rem;
background-color: var(--card-bg, var(--bg-surface));
border: var(--border-width) var(--border-style) var(--border-color);
min-width: 8rem;
.jvm-legend-inner .jvm-legend-tick {
display: flex;
@@ -30,17 +30,17 @@
}
.jvm-zoom-btn {
border: var(--border-width) var(--border-style) var(--border-color);
background: var(--card-bg, var(--bg-surface));
color: var(--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(--body-color);
background: var(--card-bg, var(--bg-surface));
border: var(--border-width) var(--border-style) var(--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(--bg-forms);
box-shadow: none;
@include border-radius(calc(var(--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(--bg-surface);
color: var(--body-color);
box-shadow: var(--shadow-dropdown);
z-index: $zindex-dropdown;
color: var(--body-color);
background: var(--bg-surface);
box-shadow: var(--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(--active-bg);
color: var(--body-color);
background-color: var(--active-bg);
}
.active.create {
@@ -61,8 +61,8 @@ $input-border-width: 1px;
}
.optgroup-header {
background: var(--bg-surface);
color: var(--body-color);
background: var(--bg-surface);
}
}
@@ -80,15 +80,15 @@ $input-border-width: 1px;
.ts-wrapper.multi,
.ts-wrapper.multi.disabled {
.ts-control > div {
color: var(--body-color);
background: var(--bg-surface-secondary);
border: 1px solid var(--border-color);
color: var(--body-color);
}
}
.ts-wrapper.disabled .ts-control {
opacity: 1;
background-color: var(--secondary-bg);
opacity: 1;
& > div.item {
color: var(--gray-500);
core/scss/vendor/_wysiwyg.scss
Vendored
+3 -3
View File
@@ -1,13 +1,13 @@
@use '../config' as *;
.tox-hugerte {
font-family: var(--font-sans-serif) !important;
border: var(--border-width) var(--border-style) var(--border-color) !important;
@include border-radius($border-radius);
font-family: var(--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(--border-width) var(--border-style) var(--border-color) !important;
box-shadow: none !important;
padding: 0 !important;
}
}
package.json
+6 -1
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 || true) && (pnpm run lint:scss:fix || true) && (pnpm run format-prettier || true)",
"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,6 +36,7 @@
"devDependencies": {
"@changesets/changelog-github": "^0.7.0",
"@changesets/cli": "^2.31.1",
"@stylistic/stylelint-config": "^2.0.0",
"adm-zip": "^0.6.0",
"autoprefixer": "^10.5.4",
"bundlewatch": "^0.4.2",
@@ -53,6 +56,8 @@
"rtlcss": "^4.3.0",
"sass": "1.102.0",
"shelljs": "^0.10.0",
"stylelint": "^16.26.1",
"stylelint-config-twbs-bootstrap": "^16.1.0",
"terser": "^5.49.0",
"tsx": "^4.23.1",
"turbo": "2.10.7",
pnpm-lock.yaml
Generated
+649
View File
File diff suppressed because it is too large Load Diff
preview/pages/all-elements.astro
+10 -18
View File
@@ -539,10 +539,10 @@ function greetUser(name) {
</div>
<h4>Ribbons</h4>
<div class="position-relative mb-4" style="height: 100px; background: #f8f9fa; border-radius: 8px;">
<div class="position-relative mb-4" style="height: 100px; background-color: var(--tblr-bg-surface-secondary); border-radius: 8px;">
<Ribbon text="New" color="success" />
</div>
<div class="position-relative mb-3" style="height: 100px; background: #f8f9fa; border-radius: 8px;">
<div class="position-relative mb-3" style="height: 100px; background: var(--tblr-bg-surface-secondary); border-radius: 8px;">
<Ribbon text="Sale" color="danger" top />
</div>
</CardBody>
@@ -573,22 +573,14 @@ function greetUser(name) {
<h4>Payment Icons</h4>
<div class="mb-3">
<div class="d-flex flex-wrap gap-2">
<Payment payment="visa" label={paymentNames.visa} />
<Payment payment="mastercard" label={paymentNames.mastercard} />
<Payment payment="paypal" label={paymentNames.paypal} />
<Payment payment="americanexpress" label={paymentNames.americanexpress} />
<Payment payment="applepay" label={paymentNames.applepay} />
<Payment payment="google-pay" label={paymentNames['google-pay']} />
<Payment payment="stripe" label={paymentNames.stripe} />
<Payment payment="discover" label={paymentNames.discover} />
<Payment payment="jcb" label={paymentNames.jcb} />
<Payment payment="maestro" label={paymentNames.maestro} />
<Payment payment="dinersclub" label={paymentNames.dinersclub} />
<Payment payment="bitcoin" label={paymentNames.bitcoin} />
<Payment payment="ethereum" label={paymentNames.ethereum} />
<Payment payment="klarna" label={paymentNames.klarna} />
<Payment payment="venmo" label={paymentNames.venmo} />
<Payment payment="square" label={paymentNames.square} />
{
(['visa', 'mastercard', 'paypal', 'americanexpress', 'applepay', 'google-pay', 'stripe', 'discover', 'jcb', 'maestro', 'dinersclub', 'bitcoin', 'ethereum', 'klarna', 'venmo', 'square'] as const).map((payment) => (
<>
<Payment payment={payment} label={paymentNames[payment]} class="hide-theme-dark" />
<Payment payment={payment} label={paymentNames[payment]} dark class="hide-theme-light" />
</>
))
}
</div>
</div>
</CardBody>
stylelint.config.mjs
+52
View File
@@ -0,0 +1,52 @@
// 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/**',
// 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,
'scss/dollar-variable-colon-space-after': null,
'selector-no-qualifying-type': null,
'scss/at-function-named-arguments': null,
'import-notation': null,
'value-keyword-case': ['lower', { ignoreProperties: ['/^\\$font-family/', '/^--.*font/'], camelCaseSvgKeywords: true }],
'declaration-no-important': null,
},
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, '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,
'selector-class-pattern': null,
'selector-max-class': null,
'selector-max-compound-selectors': null,
'custom-property-no-missing-var-function': null,
'scss/selector-no-redundant-nesting-selector': null,
},
},
],
}