mirror of
https://github.com/tabler/tabler.git
synced 2026-08-06 19:32:22 +04:00
Move --tblr- custom-property prefixing from Sass to PostCSS (#2795)
Co-authored-by: codecalm <codecalm@gmail.com>
This commit is contained in:
Bartosz-Do
GitHub
@@ -35,7 +35,7 @@ Shared instructions for all AI agents (Claude Code, Cursor, etc.). Canonical age
|
||||
### CSS classes
|
||||
|
||||
- Use Bootstrap 5 classes plus Tabler's custom classes.
|
||||
- Follow Tabler's CSS custom properties pattern: `--#{$prefix}component-property`.
|
||||
- Follow Tabler's CSS custom properties pattern: `--component-property`.
|
||||
- Cards: `card` for containers, `card-body` for content, `card-header` / `card-title` for headers.
|
||||
- Buttons: `btn` for all buttons; `btn-primary` for primary actions; plain `btn` for secondary actions (do not use `btn-outline-secondary`); `btn-sm` for small buttons; `w-100` for full width.
|
||||
- Forms: `form-control` for inputs, `form-label` for labels, `form-check` for checkboxes/radios, `form-select` for dropdowns.
|
||||
|
||||
+9
-1
@@ -31,9 +31,11 @@ import { basename, join, resolve } from 'node:path'
|
||||
import { compile as compileSass } from 'sass'
|
||||
import postcss, { type Result } from 'postcss'
|
||||
import autoprefixer from 'autoprefixer'
|
||||
import prefixCustomProperties from 'postcss-prefix-custom-properties'
|
||||
import rtlcss from 'rtlcss'
|
||||
import CleanCSS from 'clean-css'
|
||||
import { addBanner } from '../shared/banner/index.mjs'
|
||||
import { cssVarIgnore, cssVarPrefix, inlineValueComments } from './css-var-prefix'
|
||||
|
||||
const args = process.argv.slice(2)
|
||||
const flags = args.filter((arg) => arg.startsWith('--'))
|
||||
@@ -47,6 +49,7 @@ const withMinify = flags.includes('--minify')
|
||||
const withBanner = flags.includes('--banner')
|
||||
|
||||
const mapOptions = { inline: false, annotation: true, sourcesContent: true }
|
||||
|
||||
const written: string[] = []
|
||||
const pendingWrites: { file: string; content: string }[] = []
|
||||
|
||||
@@ -68,7 +71,12 @@ async function compile(entry: string): Promise<{ outFile: string; result: Result
|
||||
// Banner goes in before postcss runs, so the map it generates already counts
|
||||
// the banner's lines — and so does the rtl map chained onto it below.
|
||||
const input = withBanner ? addBanner(css, outFile) : css
|
||||
const result = await postcss([autoprefixer({ cascade: false })]).process(input, {
|
||||
// Prefixing is its own pass, ahead of the one that generates the map:
|
||||
// postcss maps generated positions back to *its own input*, so renaming
|
||||
// inside the map-generating pass would leave every mapping — and the
|
||||
// embedded sourcesContent — describing css that no longer exists on disk.
|
||||
const { css: prefixed } = await postcss([inlineValueComments, prefixCustomProperties({ prefix: cssVarPrefix, ignore: cssVarIgnore })]).process(input, { from: outFile, to: outFile, map: false })
|
||||
const result = await postcss([autoprefixer({ cascade: false })]).process(prefixed, {
|
||||
from: outFile,
|
||||
to: outFile,
|
||||
map: mapOptions,
|
||||
|
||||
@@ -0,0 +1,42 @@
|
||||
// The `--tblr-` custom-property prefix, applied at build time.
|
||||
//
|
||||
// Custom properties are authored bare in scss (`--card-bg`) rather than through
|
||||
// a Sass interpolation on every declaration and every var() call; the public
|
||||
// prefix is added here, in the css pipeline (see build-css.ts).
|
||||
//
|
||||
// Lives in its own module so scss/tests/css-var-prefix.test.mjs asserts against
|
||||
// the same configuration the build uses.
|
||||
import type { Root } from 'postcss'
|
||||
|
||||
export const cssVarPrefix = 'tblr-'
|
||||
|
||||
// Names that must survive unprefixed. Everything here belongs to a third-party
|
||||
// stylesheet we theme, and those libraries read their variables by their own
|
||||
// name — prefixing one detaches the theming with no error anywhere, in css or
|
||||
// at build time. Add an entry whenever a vendor override introduces a new
|
||||
// foreign name.
|
||||
export const cssVarIgnore = [
|
||||
/^--tblr-/, // already prefixed, e.g. names that cannot round-trip postcss (see $navbar-light-icon-color)
|
||||
/^--bs-/, // bootstrap
|
||||
/^--fc-/, // fullcalendar
|
||||
/^--gl-/, // star-rating.js
|
||||
/^--litepicker-/, // litepicker
|
||||
/^--plyr-/, // plyr
|
||||
/^--ts-/, // tom-select
|
||||
'--section-bg', // marketing sections, unprefixed since it was introduced
|
||||
]
|
||||
|
||||
// postcss parks a comment trailing a declaration value in `raws.value.raw` and
|
||||
// hands plugins the cleaned `value`, so any plugin that writes `decl.value`
|
||||
// back drops the comment. That silently ate every `/*rtl:ignore*/` marker — the
|
||||
// ones rtlcss reads to leave a declaration alone in the .rtl build. Folding raw
|
||||
// into value first costs nothing (it stringifies identically) and leaves the
|
||||
// comment in the value proper, where postcss-value-parser round-trips it.
|
||||
export const inlineValueComments = {
|
||||
postcssPlugin: 'tabler-inline-value-comments',
|
||||
Once(root: Root) {
|
||||
root.walkDecls((decl) => {
|
||||
if (decl.raws.value) decl.value = decl.raws.value.raw
|
||||
})
|
||||
},
|
||||
}
|
||||
Vendored
+5
@@ -5,6 +5,11 @@ declare module 'rtlcss' {
|
||||
export default function rtlcss(config?: unknown): Plugin
|
||||
}
|
||||
|
||||
declare module 'postcss-prefix-custom-properties' {
|
||||
import type { Plugin } from 'postcss'
|
||||
export default function prefixCustomProperties(options?: { prefix?: string; ignore?: (string | RegExp)[] }): Plugin
|
||||
}
|
||||
|
||||
declare module 'clean-css' {
|
||||
interface MinifyResult {
|
||||
styles: string
|
||||
|
||||
@@ -2,5 +2,5 @@
|
||||
"@tabler/core": patch
|
||||
---
|
||||
|
||||
Migrated `rgba()` functions to modern CSS color functions (`color-mix()` and `color-transparent()`) for better browser support and cleaner code. Replaced `rgba(var(--#{$prefix}*-rgb), ...)` with `color-mix(in srgb, var(--#{$prefix}*) ..., transparent)`, static percentage `color-mix()` with `color-transparent()`, and `rgba($variable, ...)` with `color-transparent($variable, ...)`.
|
||||
Migrated `rgba()` functions to modern CSS color functions (`color-mix()` and `color-transparent()`) for better browser support and cleaner code. Replaced `rgba(var(*-rgb), ...)` with `color-mix(in srgb, var(*) ..., transparent)`, static percentage `color-mix()` with `color-transparent()`, and `rgba($variable, ...)` with `color-transparent($variable, ...)`.
|
||||
|
||||
|
||||
@@ -0,0 +1,5 @@
|
||||
---
|
||||
"@tabler/core": minor
|
||||
---
|
||||
|
||||
Removed the `$prefix` Sass variable and its `--#{$prefix}` interpolations; the `--tblr-` custom property prefix is now applied at build time by `postcss-prefix-custom-properties`. Compiled CSS is unchanged, but the prefix can no longer be customised by overriding `$prefix` before importing the Sass sources.
|
||||
+1
-1
@@ -32,7 +32,7 @@ Do not edit `dist/` folders - they are generated by the build.
|
||||
|
||||
## Code style
|
||||
|
||||
- Use Bootstrap 5 conventions and Tabler's CSS custom properties pattern: `--#{$prefix}component-property`.
|
||||
- Use Bootstrap 5 conventions and Tabler's CSS custom properties pattern: `--component-property`. Write custom properties without a prefix — the build adds the public `--tblr-` prefix. Names owned by a third-party library you are theming must be listed in `cssVarIgnore` in `.build/css-var-prefix.ts` so they stay untouched.
|
||||
- Write documentation in simple English: short sentences, common words, direct instructions.
|
||||
- Ensure changes work in all supported browsers (see the [browser support docs](https://docs.tabler.io/ui/getting-started/browser-support/)).
|
||||
|
||||
|
||||
+24
-24
@@ -101,14 +101,14 @@ $utilities-text: map.merge(
|
||||
$utilities-text-colors: map-loop($utilities-text, rgba-css-var, '$key', 'text') !default;
|
||||
|
||||
$utilities-text-emphasis-colors: (
|
||||
'primary-emphasis': var(--#{$prefix}primary-text-emphasis),
|
||||
'secondary-emphasis': var(--#{$prefix}secondary-text-emphasis),
|
||||
'success-emphasis': var(--#{$prefix}success-text-emphasis),
|
||||
'info-emphasis': var(--#{$prefix}info-text-emphasis),
|
||||
'warning-emphasis': var(--#{$prefix}warning-text-emphasis),
|
||||
'danger-emphasis': var(--#{$prefix}danger-text-emphasis),
|
||||
'light-emphasis': var(--#{$prefix}light-text-emphasis),
|
||||
'dark-emphasis': var(--#{$prefix}dark-text-emphasis),
|
||||
'primary-emphasis': var(--primary-text-emphasis),
|
||||
'secondary-emphasis': var(--secondary-text-emphasis),
|
||||
'success-emphasis': var(--success-text-emphasis),
|
||||
'info-emphasis': var(--info-text-emphasis),
|
||||
'warning-emphasis': var(--warning-text-emphasis),
|
||||
'danger-emphasis': var(--danger-text-emphasis),
|
||||
'light-emphasis': var(--light-text-emphasis),
|
||||
'dark-emphasis': var(--dark-text-emphasis),
|
||||
) !default;
|
||||
|
||||
$utilities-bg: map.merge(
|
||||
@@ -122,14 +122,14 @@ $utilities-bg: map.merge(
|
||||
$utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, '$key', 'bg') !default;
|
||||
|
||||
$utilities-bg-subtle: (
|
||||
'primary-subtle': var(--#{$prefix}primary-bg-subtle),
|
||||
'secondary-subtle': var(--#{$prefix}secondary-bg-subtle),
|
||||
'success-subtle': var(--#{$prefix}success-bg-subtle),
|
||||
'info-subtle': var(--#{$prefix}info-bg-subtle),
|
||||
'warning-subtle': var(--#{$prefix}warning-bg-subtle),
|
||||
'danger-subtle': var(--#{$prefix}danger-bg-subtle),
|
||||
'light-subtle': var(--#{$prefix}light-bg-subtle),
|
||||
'dark-subtle': var(--#{$prefix}dark-bg-subtle),
|
||||
'primary-subtle': var(--primary-bg-subtle),
|
||||
'secondary-subtle': var(--secondary-bg-subtle),
|
||||
'success-subtle': var(--success-bg-subtle),
|
||||
'info-subtle': var(--info-bg-subtle),
|
||||
'warning-subtle': var(--warning-bg-subtle),
|
||||
'danger-subtle': var(--danger-bg-subtle),
|
||||
'light-subtle': var(--light-bg-subtle),
|
||||
'dark-subtle': var(--dark-bg-subtle),
|
||||
) !default;
|
||||
|
||||
$utilities-border: map.merge(
|
||||
@@ -142,14 +142,14 @@ $utilities-border: map.merge(
|
||||
$utilities-border-colors: map-loop($utilities-border, rgba-css-var, '$key', 'border') !default;
|
||||
|
||||
$utilities-border-subtle: (
|
||||
'primary-subtle': var(--#{$prefix}primary-border-subtle),
|
||||
'secondary-subtle': var(--#{$prefix}secondary-border-subtle),
|
||||
'success-subtle': var(--#{$prefix}success-border-subtle),
|
||||
'info-subtle': var(--#{$prefix}info-border-subtle),
|
||||
'warning-subtle': var(--#{$prefix}warning-border-subtle),
|
||||
'danger-subtle': var(--#{$prefix}danger-border-subtle),
|
||||
'light-subtle': var(--#{$prefix}light-border-subtle),
|
||||
'dark-subtle': var(--#{$prefix}dark-border-subtle),
|
||||
'primary-subtle': var(--primary-border-subtle),
|
||||
'secondary-subtle': var(--secondary-border-subtle),
|
||||
'success-subtle': var(--success-border-subtle),
|
||||
'info-subtle': var(--info-border-subtle),
|
||||
'warning-subtle': var(--warning-border-subtle),
|
||||
'danger-subtle': var(--danger-border-subtle),
|
||||
'light-subtle': var(--light-border-subtle),
|
||||
'dark-subtle': var(--dark-border-subtle),
|
||||
) !default;
|
||||
|
||||
$utilities-links-underline: map-loop($utilities-colors, rgba-css-var, '$key', 'link-underline') !default;
|
||||
|
||||
+46
-46
@@ -4,100 +4,100 @@
|
||||
:root,
|
||||
:host {
|
||||
/** Direction multiplier for physical transforms (1 = LTR, -1 = RTL) */
|
||||
--#{$prefix}dir: 1;
|
||||
--dir: 1;
|
||||
|
||||
/** Fonts */
|
||||
--#{$prefix}font-monospace: #{$font-family-monospace};
|
||||
--#{$prefix}font-sans-serif: #{$font-family-sans-serif};
|
||||
--#{$prefix}font-serif: #{$font-family-serif};
|
||||
--#{$prefix}font-comic: #{$font-family-comic};
|
||||
--font-monospace: #{$font-family-monospace};
|
||||
--font-sans-serif: #{$font-family-sans-serif};
|
||||
--font-serif: #{$font-family-serif};
|
||||
--font-comic: #{$font-family-comic};
|
||||
|
||||
/** Gray colors */
|
||||
--#{$prefix}gray-50: #{$gray-50};
|
||||
--#{$prefix}gray-100: #{$gray-100};
|
||||
--#{$prefix}gray-200: #{$gray-200};
|
||||
--#{$prefix}gray-300: #{$gray-300};
|
||||
--#{$prefix}gray-400: #{$gray-400};
|
||||
--#{$prefix}gray-500: #{$gray-500};
|
||||
--#{$prefix}gray-600: #{$gray-600};
|
||||
--#{$prefix}gray-700: #{$gray-700};
|
||||
--#{$prefix}gray-800: #{$gray-800};
|
||||
--#{$prefix}gray-900: #{$gray-900};
|
||||
--#{$prefix}gray-950: #{$gray-950};
|
||||
--gray-50: #{$gray-50};
|
||||
--gray-100: #{$gray-100};
|
||||
--gray-200: #{$gray-200};
|
||||
--gray-300: #{$gray-300};
|
||||
--gray-400: #{$gray-400};
|
||||
--gray-500: #{$gray-500};
|
||||
--gray-600: #{$gray-600};
|
||||
--gray-700: #{$gray-700};
|
||||
--gray-800: #{$gray-800};
|
||||
--gray-900: #{$gray-900};
|
||||
--gray-950: #{$gray-950};
|
||||
|
||||
--#{$prefix}white: #{$white};
|
||||
--#{$prefix}black: #{$black};
|
||||
--#{$prefix}dark: #{$dark};
|
||||
--#{$prefix}light: #{$light};
|
||||
--white: #{$white};
|
||||
--black: #{$black};
|
||||
--dark: #{$dark};
|
||||
--light: #{$light};
|
||||
|
||||
/** Brand colors */
|
||||
--#{$prefix}brand: #{$primary};
|
||||
--brand: #{$primary};
|
||||
|
||||
/** Theme colors */
|
||||
@each $name, $color in map.merge($theme-colors, $social-colors) {
|
||||
--#{$prefix}#{$name}: #{$color};
|
||||
--#{$prefix}#{$name}-rgb: #{to-rgb($color)};
|
||||
--#{$prefix}#{$name}-fg: #{if(sass(contrast-ratio($color) > $min-contrast-ratio): var(--#{$prefix}light); else: var(--#{$prefix}dark))};
|
||||
--#{$prefix}#{$name}-darken: #{theme-color-darker($color)};
|
||||
--#{$prefix}#{$name}-darken: color-mix(in oklab, var(--#{$prefix}#{$name}), transparent 20%);
|
||||
--#{$prefix}#{$name}-lt: #{theme-color-lighter($color)};
|
||||
--#{$prefix}#{$name}-lt: color-mix(in oklab, var(--#{$prefix}#{$name}) 10%, transparent);
|
||||
--#{$prefix}#{$name}-200: color-mix(in oklab, var(--#{$prefix}#{$name}) 20%, transparent);
|
||||
--#{$prefix}#{$name}-lt-rgb: #{to-rgb(theme-color-lighter($color))};
|
||||
--#{$name}: #{$color};
|
||||
--#{$name}-rgb: #{to-rgb($color)};
|
||||
--#{$name}-fg: #{if(sass(contrast-ratio($color) > $min-contrast-ratio): var(--light); else: var(--dark))};
|
||||
--#{$name}-darken: #{theme-color-darker($color)};
|
||||
--#{$name}-darken: color-mix(in oklab, var(--#{$name}), transparent 20%);
|
||||
--#{$name}-lt: #{theme-color-lighter($color)};
|
||||
--#{$name}-lt: color-mix(in oklab, var(--#{$name}) 10%, transparent);
|
||||
--#{$name}-200: color-mix(in oklab, var(--#{$name}) 20%, transparent);
|
||||
--#{$name}-lt-rgb: #{to-rgb(theme-color-lighter($color))};
|
||||
}
|
||||
|
||||
/** Gray colors */
|
||||
@each $name, $color in $gray-colors {
|
||||
--#{$prefix}#{$name}-fg: var(--#{$prefix}#{$name});
|
||||
--#{$name}-fg: var(--#{$name});
|
||||
}
|
||||
|
||||
/** Spacers */
|
||||
@each $name, $value in $spacers {
|
||||
--#{$prefix}spacer-#{$name}: #{$value};
|
||||
--spacer-#{$name}: #{$value};
|
||||
}
|
||||
|
||||
/** Font sizes */
|
||||
@each $name, $value in $font-weights {
|
||||
--#{$prefix}font-weight-#{$name}: #{$value};
|
||||
--font-weight-#{$name}: #{$value};
|
||||
}
|
||||
|
||||
@each $name, $value in $font-sizes {
|
||||
--#{$prefix}font-size-h#{$name}: #{$value};
|
||||
--font-size-h#{$name}: #{$value};
|
||||
}
|
||||
|
||||
@each $name, $value in $line-heights {
|
||||
--#{$prefix}line-height-#{$name}: #{$value};
|
||||
--line-height-#{$name}: #{$value};
|
||||
}
|
||||
|
||||
/** Shadows */
|
||||
@each $name, $value in $box-shadows {
|
||||
--#{$prefix}shadow#{if(sass($name): '-#{$name}'; else: '')}: #{$value};
|
||||
--shadow#{if(sass($name): '-#{$name}'; else: '')}: #{$value};
|
||||
}
|
||||
|
||||
/** Border radiuses */
|
||||
--#{$prefix}border-radius-scale: 1;
|
||||
--border-radius-scale: 1;
|
||||
@each $name, $value in $border-radiuses {
|
||||
@if $name {
|
||||
--#{$prefix}border-radius-#{$name}: calc(#{$value} * var(--#{$prefix}border-radius-scale, 1));
|
||||
--border-radius-#{$name}: calc(#{$value} * var(--border-radius-scale, 1));
|
||||
} @else {
|
||||
--#{$prefix}border-radius: #{$value};
|
||||
--border-radius: #{$value};
|
||||
}
|
||||
}
|
||||
|
||||
/** Backdrops */
|
||||
--#{$prefix}backdrop-opacity: #{$backdrop-opacity};
|
||||
--#{$prefix}backdrop-bg: var(--#{$prefix}bg-surface-dark);
|
||||
--backdrop-opacity: #{$backdrop-opacity};
|
||||
--backdrop-bg: var(--bg-surface-dark);
|
||||
@each $name, $value in $backdrops {
|
||||
--#{$prefix}backdrop-bg#{if(sass($name): '-#{$name}'; else: '')}: #{$value};
|
||||
--backdrop-bg#{if(sass($name): '-#{$name}'; else: '')}: #{$value};
|
||||
}
|
||||
--#{$prefix}backdrop-blur: #{$backdrop-blur};
|
||||
--#{$prefix}backdrop-filter: blur(var(--#{$prefix}backdrop-blur));
|
||||
--backdrop-blur: #{$backdrop-blur};
|
||||
--backdrop-filter: blur(var(--backdrop-blur));
|
||||
}
|
||||
|
||||
[dir='ltr'] {
|
||||
--#{$prefix}dir: 1;
|
||||
--dir: 1;
|
||||
}
|
||||
|
||||
[dir='rtl'] {
|
||||
--#{$prefix}dir: -1;
|
||||
--dir: -1;
|
||||
}
|
||||
|
||||
@@ -7,7 +7,6 @@
|
||||
// through `_config.scss`, so overriding them works exactly as before.
|
||||
|
||||
// Prefixes
|
||||
$prefix: 'tblr-' !default;
|
||||
|
||||
// Characters which are escaped by the escape-svg function
|
||||
$escaped-characters: (('<', '%3c'), ('>', '%3e'), ('#', '%23'), ('(', '%28'), (')', '%29')) !default;
|
||||
|
||||
+52
-52
@@ -6,8 +6,8 @@
|
||||
@use 'mixins/functions' as *;
|
||||
|
||||
$border-values: (
|
||||
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color-translucent),
|
||||
wide: $border-width-wide var(--#{$prefix}border-style) var(--#{$prefix}border-color-translucent),
|
||||
null: var(--border-width) var(--border-style) var(--border-color-translucent),
|
||||
wide: $border-width-wide var(--border-style) var(--border-color-translucent),
|
||||
0: 0,
|
||||
);
|
||||
|
||||
@@ -87,9 +87,9 @@ $utilities: map.merge(
|
||||
property: box-shadow,
|
||||
class: shadow,
|
||||
values: (
|
||||
null: var(--#{$prefix}box-shadow),
|
||||
sm: var(--#{$prefix}box-shadow-sm),
|
||||
lg: var(--#{$prefix}box-shadow-lg),
|
||||
null: var(--box-shadow),
|
||||
sm: var(--box-shadow-sm),
|
||||
lg: var(--box-shadow-lg),
|
||||
none: none,
|
||||
),
|
||||
),
|
||||
@@ -125,8 +125,8 @@ $utilities: map.merge(
|
||||
property: transform,
|
||||
class: translate-middle,
|
||||
values: (
|
||||
null: translate(calc(var(--#{$prefix}dir) * -50%), -50%) #{'/*rtl:ignore*/'},
|
||||
x: translateX(calc(var(--#{$prefix}dir) * -50%)) #{'/*rtl:ignore*/'},
|
||||
null: translate(calc(var(--dir) * -50%), -50%) #{'/*rtl:ignore*/'},
|
||||
x: translateX(calc(var(--dir) * -50%)) #{'/*rtl:ignore*/'},
|
||||
y: translateY(-50%),
|
||||
),
|
||||
),
|
||||
@@ -575,7 +575,7 @@ $utilities: map.merge(
|
||||
property: background,
|
||||
class: bg-gradient,
|
||||
values: (
|
||||
null: linear-gradient(var(--#{$prefix}gradient-direction, to right), var(--#{$prefix}gradient-stops, var(--#{$prefix}gradient-from, transparent), var(--#{$prefix}gradient-to, transparent))) no-repeat,
|
||||
null: linear-gradient(var(--gradient-direction, to right), var(--gradient-stops, var(--gradient-from, transparent), var(--gradient-to, transparent))) no-repeat,
|
||||
),
|
||||
),
|
||||
'bg-blur': (
|
||||
@@ -586,7 +586,7 @@ $utilities: map.merge(
|
||||
),
|
||||
),
|
||||
'bg-gradient-direction': (
|
||||
property: --#{$prefix}gradient-direction,
|
||||
property: --gradient-direction,
|
||||
class: bg-gradient,
|
||||
values: (
|
||||
to-t: to top,
|
||||
@@ -612,7 +612,7 @@ $utilities: map.merge(
|
||||
property: font-family,
|
||||
class: font,
|
||||
values: (
|
||||
monospace: var(--#{$prefix}font-monospace),
|
||||
monospace: var(--font-monospace),
|
||||
),
|
||||
),
|
||||
'font-size': (
|
||||
@@ -692,15 +692,15 @@ $utilities: map.merge(
|
||||
values: map.merge(
|
||||
$utilities-text-colors,
|
||||
(
|
||||
'muted': var(--#{$prefix}secondary-color),
|
||||
'muted': var(--secondary-color),
|
||||
// deprecated
|
||||
'black-50': rgba($black, 0.5),
|
||||
// deprecated
|
||||
'white-50': rgba($white, 0.5),
|
||||
// deprecated
|
||||
'body-secondary': var(--#{$prefix}secondary-color),
|
||||
'body-tertiary': var(--#{$prefix}tertiary-color),
|
||||
'body-emphasis': var(--#{$prefix}emphasis-color),
|
||||
'body-secondary': var(--secondary-color),
|
||||
'body-tertiary': var(--tertiary-color),
|
||||
'body-emphasis': var(--emphasis-color),
|
||||
'reset': inherit,
|
||||
)
|
||||
),
|
||||
@@ -751,7 +751,7 @@ $utilities: map.merge(
|
||||
values: map.merge(
|
||||
$utilities-links-underline,
|
||||
(
|
||||
null: color-mix(in srgb, var(--#{$prefix}link-color) calc(var(--#{$prefix}link-underline-opacity, 1) * 100%), transparent),
|
||||
null: color-mix(in srgb, var(--link-color) calc(var(--link-underline-opacity, 1) * 100%), transparent),
|
||||
)
|
||||
),
|
||||
),
|
||||
@@ -778,8 +778,8 @@ $utilities: map.merge(
|
||||
$utilities-bg-colors,
|
||||
(
|
||||
'transparent': transparent,
|
||||
'body-secondary': color-mix(in srgb, var(--#{$prefix}secondary-bg) calc(var(--#{$prefix}bg-opacity) * 100%), transparent),
|
||||
'body-tertiary': color-mix(in srgb, var(--#{$prefix}tertiary-bg) calc(var(--#{$prefix}bg-opacity) * 100%), transparent),
|
||||
'body-secondary': color-mix(in srgb, var(--secondary-bg) calc(var(--bg-opacity) * 100%), transparent),
|
||||
'body-tertiary': color-mix(in srgb, var(--tertiary-bg) calc(var(--bg-opacity) * 100%), transparent),
|
||||
)
|
||||
),
|
||||
),
|
||||
@@ -812,75 +812,75 @@ $utilities: map.merge(
|
||||
property: border-radius,
|
||||
class: rounded,
|
||||
values: (
|
||||
null: var(--#{$prefix}border-radius),
|
||||
null: var(--border-radius),
|
||||
0: 0,
|
||||
1: var(--#{$prefix}border-radius-sm),
|
||||
2: var(--#{$prefix}border-radius),
|
||||
3: var(--#{$prefix}border-radius-lg),
|
||||
4: var(--#{$prefix}border-radius-xl),
|
||||
5: var(--#{$prefix}border-radius-xxl),
|
||||
1: var(--border-radius-sm),
|
||||
2: var(--border-radius),
|
||||
3: var(--border-radius-lg),
|
||||
4: var(--border-radius-xl),
|
||||
5: var(--border-radius-xxl),
|
||||
circle: 50%,
|
||||
pill: var(--#{$prefix}border-radius-pill),
|
||||
pill: var(--border-radius-pill),
|
||||
),
|
||||
),
|
||||
'rounded-top': (
|
||||
property: border-start-start-radius border-start-end-radius,
|
||||
class: rounded-top,
|
||||
values: (
|
||||
null: var(--#{$prefix}border-radius),
|
||||
null: var(--border-radius),
|
||||
0: 0,
|
||||
1: var(--#{$prefix}border-radius-sm),
|
||||
2: var(--#{$prefix}border-radius),
|
||||
3: var(--#{$prefix}border-radius-lg),
|
||||
4: var(--#{$prefix}border-radius-xl),
|
||||
5: var(--#{$prefix}border-radius-xxl),
|
||||
1: var(--border-radius-sm),
|
||||
2: var(--border-radius),
|
||||
3: var(--border-radius-lg),
|
||||
4: var(--border-radius-xl),
|
||||
5: var(--border-radius-xxl),
|
||||
circle: 50%,
|
||||
pill: var(--#{$prefix}border-radius-pill),
|
||||
pill: var(--border-radius-pill),
|
||||
),
|
||||
),
|
||||
'rounded-end': (
|
||||
property: border-end-end-radius border-end-start-radius,
|
||||
class: rounded-end,
|
||||
values: (
|
||||
null: var(--#{$prefix}border-radius),
|
||||
null: var(--border-radius),
|
||||
0: 0,
|
||||
1: var(--#{$prefix}border-radius-sm),
|
||||
2: var(--#{$prefix}border-radius),
|
||||
3: var(--#{$prefix}border-radius-lg),
|
||||
4: var(--#{$prefix}border-radius-xl),
|
||||
5: var(--#{$prefix}border-radius-xxl),
|
||||
1: var(--border-radius-sm),
|
||||
2: var(--border-radius),
|
||||
3: var(--border-radius-lg),
|
||||
4: var(--border-radius-xl),
|
||||
5: var(--border-radius-xxl),
|
||||
circle: 50%,
|
||||
pill: var(--#{$prefix}border-radius-pill),
|
||||
pill: var(--border-radius-pill),
|
||||
),
|
||||
),
|
||||
'rounded-bottom': (
|
||||
property: border-end-end-radius border-end-start-radius,
|
||||
class: rounded-bottom,
|
||||
values: (
|
||||
null: var(--#{$prefix}border-radius),
|
||||
null: var(--border-radius),
|
||||
0: 0,
|
||||
1: var(--#{$prefix}border-radius-sm),
|
||||
2: var(--#{$prefix}border-radius),
|
||||
3: var(--#{$prefix}border-radius-lg),
|
||||
4: var(--#{$prefix}border-radius-xl),
|
||||
5: var(--#{$prefix}border-radius-xxl),
|
||||
1: var(--border-radius-sm),
|
||||
2: var(--border-radius),
|
||||
3: var(--border-radius-lg),
|
||||
4: var(--border-radius-xl),
|
||||
5: var(--border-radius-xxl),
|
||||
circle: 50%,
|
||||
pill: var(--#{$prefix}border-radius-pill),
|
||||
pill: var(--border-radius-pill),
|
||||
),
|
||||
),
|
||||
'rounded-start': (
|
||||
property: border-start-start-radius border-start-end-radius,
|
||||
class: rounded-start,
|
||||
values: (
|
||||
null: var(--#{$prefix}border-radius),
|
||||
null: var(--border-radius),
|
||||
0: 0,
|
||||
1: var(--#{$prefix}border-radius-sm),
|
||||
2: var(--#{$prefix}border-radius),
|
||||
3: var(--#{$prefix}border-radius-lg),
|
||||
4: var(--#{$prefix}border-radius-xl),
|
||||
5: var(--#{$prefix}border-radius-xxl),
|
||||
1: var(--border-radius-sm),
|
||||
2: var(--border-radius),
|
||||
3: var(--border-radius-lg),
|
||||
4: var(--border-radius-xl),
|
||||
5: var(--border-radius-xxl),
|
||||
circle: 50%,
|
||||
pill: var(--#{$prefix}border-radius-pill),
|
||||
pill: var(--border-radius-pill),
|
||||
),
|
||||
),
|
||||
'visibility': (
|
||||
|
||||
+254
-254
File diff suppressed because it is too large
Load Diff
@@ -6,77 +6,77 @@
|
||||
|
||||
.btn {
|
||||
// scss-docs-start btn-css-vars
|
||||
--#{$prefix}btn-padding-x: #{$btn-padding-x};
|
||||
--#{$prefix}btn-padding-y: #{$btn-padding-y};
|
||||
--#{$prefix}btn-font-family: #{$btn-font-family};
|
||||
@include rfs($btn-font-size, --#{$prefix}btn-font-size);
|
||||
--#{$prefix}btn-font-weight: #{$btn-font-weight};
|
||||
--#{$prefix}btn-line-height: #{$btn-line-height};
|
||||
--#{$prefix}btn-color: #{$btn-color};
|
||||
--#{$prefix}btn-bg: transparent;
|
||||
--#{$prefix}btn-border-width: #{$btn-border-width};
|
||||
--#{$prefix}btn-border-color: transparent;
|
||||
--#{$prefix}btn-border-radius: #{$btn-border-radius};
|
||||
--#{$prefix}btn-hover-border-color: transparent;
|
||||
--#{$prefix}btn-box-shadow: #{$btn-box-shadow};
|
||||
--#{$prefix}btn-disabled-opacity: #{$btn-disabled-opacity};
|
||||
--#{$prefix}btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--#{$prefix}btn-focus-shadow-rgb), 0.5);
|
||||
--btn-padding-x: #{$btn-padding-x};
|
||||
--btn-padding-y: #{$btn-padding-y};
|
||||
--btn-font-family: #{$btn-font-family};
|
||||
@include rfs($btn-font-size, --btn-font-size);
|
||||
--btn-font-weight: #{$btn-font-weight};
|
||||
--btn-line-height: #{$btn-line-height};
|
||||
--btn-color: #{$btn-color};
|
||||
--btn-bg: transparent;
|
||||
--btn-border-width: #{$btn-border-width};
|
||||
--btn-border-color: transparent;
|
||||
--btn-border-radius: #{$btn-border-radius};
|
||||
--btn-hover-border-color: transparent;
|
||||
--btn-box-shadow: #{$btn-box-shadow};
|
||||
--btn-disabled-opacity: #{$btn-disabled-opacity};
|
||||
--btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--btn-focus-shadow-rgb), 0.5);
|
||||
// scss-docs-end btn-css-vars
|
||||
|
||||
display: inline-block;
|
||||
padding: var(--#{$prefix}btn-padding-y) var(--#{$prefix}btn-padding-x);
|
||||
font-family: var(--#{$prefix}btn-font-family);
|
||||
@include font-size(var(--#{$prefix}btn-font-size));
|
||||
font-weight: var(--#{$prefix}btn-font-weight);
|
||||
line-height: var(--#{$prefix}btn-line-height);
|
||||
color: var(--#{$prefix}btn-color);
|
||||
padding: var(--btn-padding-y) var(--btn-padding-x);
|
||||
font-family: var(--btn-font-family);
|
||||
@include font-size(var(--btn-font-size));
|
||||
font-weight: var(--btn-font-weight);
|
||||
line-height: var(--btn-line-height);
|
||||
color: var(--btn-color);
|
||||
text-align: center;
|
||||
text-decoration: if(sass($link-decoration == none): null; else: none);
|
||||
white-space: $btn-white-space;
|
||||
vertical-align: middle;
|
||||
cursor: if(sass($enable-button-pointers): pointer; else: null);
|
||||
user-select: none;
|
||||
border: var(--#{$prefix}btn-border-width) solid var(--#{$prefix}btn-border-color);
|
||||
@include border-radius(var(--#{$prefix}btn-border-radius));
|
||||
@include gradient-bg(var(--#{$prefix}btn-bg));
|
||||
@include box-shadow(var(--#{$prefix}btn-box-shadow));
|
||||
border: var(--btn-border-width) solid var(--btn-border-color);
|
||||
@include border-radius(var(--btn-border-radius));
|
||||
@include gradient-bg(var(--btn-bg));
|
||||
@include box-shadow(var(--btn-box-shadow));
|
||||
@include transition($btn-transition);
|
||||
|
||||
&:hover {
|
||||
color: var(--#{$prefix}btn-hover-color);
|
||||
color: var(--btn-hover-color);
|
||||
text-decoration: if(sass($link-hover-decoration == underline): none; else: null);
|
||||
background-color: var(--#{$prefix}btn-hover-bg);
|
||||
border-color: var(--#{$prefix}btn-hover-border-color);
|
||||
background-color: var(--btn-hover-bg);
|
||||
border-color: var(--btn-hover-border-color);
|
||||
}
|
||||
|
||||
.btn-check + &:hover {
|
||||
// override for the checkbox/radio buttons
|
||||
color: var(--#{$prefix}btn-color);
|
||||
background-color: var(--#{$prefix}btn-bg);
|
||||
border-color: var(--#{$prefix}btn-border-color);
|
||||
color: var(--btn-color);
|
||||
background-color: var(--btn-bg);
|
||||
border-color: var(--btn-border-color);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
color: var(--#{$prefix}btn-hover-color);
|
||||
@include gradient-bg(var(--#{$prefix}btn-hover-bg));
|
||||
border-color: var(--#{$prefix}btn-hover-border-color);
|
||||
color: var(--btn-hover-color);
|
||||
@include gradient-bg(var(--btn-hover-bg));
|
||||
border-color: var(--btn-hover-border-color);
|
||||
outline: 0;
|
||||
// Avoid using mixin so we can pass custom focus shadow properly
|
||||
@if $enable-shadows {
|
||||
box-shadow: var(--#{$prefix}btn-box-shadow), var(--#{$prefix}btn-focus-box-shadow);
|
||||
box-shadow: var(--btn-box-shadow), var(--btn-focus-box-shadow);
|
||||
} @else {
|
||||
box-shadow: var(--#{$prefix}btn-focus-box-shadow);
|
||||
box-shadow: var(--btn-focus-box-shadow);
|
||||
}
|
||||
}
|
||||
|
||||
.btn-check:focus-visible + & {
|
||||
border-color: var(--#{$prefix}btn-hover-border-color);
|
||||
border-color: var(--btn-hover-border-color);
|
||||
outline: 0;
|
||||
// Avoid using mixin so we can pass custom focus shadow properly
|
||||
@if $enable-shadows {
|
||||
box-shadow: var(--#{$prefix}btn-box-shadow), var(--#{$prefix}btn-focus-box-shadow);
|
||||
box-shadow: var(--btn-box-shadow), var(--btn-focus-box-shadow);
|
||||
} @else {
|
||||
box-shadow: var(--#{$prefix}btn-focus-box-shadow);
|
||||
box-shadow: var(--btn-focus-box-shadow);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -85,19 +85,19 @@
|
||||
&:first-child:active,
|
||||
&.active,
|
||||
&.show {
|
||||
color: var(--#{$prefix}btn-active-color);
|
||||
background-color: var(--#{$prefix}btn-active-bg);
|
||||
color: var(--btn-active-color);
|
||||
background-color: var(--btn-active-bg);
|
||||
// Remove CSS gradients if they're enabled
|
||||
background-image: if(sass($enable-gradients): none; else: null);
|
||||
border-color: var(--#{$prefix}btn-active-border-color);
|
||||
@include box-shadow(var(--#{$prefix}btn-active-shadow));
|
||||
border-color: var(--btn-active-border-color);
|
||||
@include box-shadow(var(--btn-active-shadow));
|
||||
|
||||
&:focus-visible {
|
||||
// Avoid using mixin so we can pass custom focus shadow properly
|
||||
@if $enable-shadows {
|
||||
box-shadow: var(--#{$prefix}btn-active-shadow), var(--#{$prefix}btn-focus-box-shadow);
|
||||
box-shadow: var(--btn-active-shadow), var(--btn-focus-box-shadow);
|
||||
} @else {
|
||||
box-shadow: var(--#{$prefix}btn-focus-box-shadow);
|
||||
box-shadow: var(--btn-focus-box-shadow);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -105,21 +105,21 @@
|
||||
.btn-check:checked:focus-visible + & {
|
||||
// Avoid using mixin so we can pass custom focus shadow properly
|
||||
@if $enable-shadows {
|
||||
box-shadow: var(--#{$prefix}btn-active-shadow), var(--#{$prefix}btn-focus-box-shadow);
|
||||
box-shadow: var(--btn-active-shadow), var(--btn-focus-box-shadow);
|
||||
} @else {
|
||||
box-shadow: var(--#{$prefix}btn-focus-box-shadow);
|
||||
box-shadow: var(--btn-focus-box-shadow);
|
||||
}
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&.disabled,
|
||||
fieldset:disabled & {
|
||||
color: var(--#{$prefix}btn-disabled-color);
|
||||
color: var(--btn-disabled-color);
|
||||
pointer-events: none;
|
||||
background-color: var(--#{$prefix}btn-disabled-bg);
|
||||
background-color: var(--btn-disabled-bg);
|
||||
background-image: if(sass($enable-gradients): none; else: null);
|
||||
border-color: var(--#{$prefix}btn-disabled-border-color);
|
||||
opacity: var(--#{$prefix}btn-disabled-opacity);
|
||||
border-color: var(--btn-disabled-border-color);
|
||||
opacity: var(--btn-disabled-opacity);
|
||||
@include box-shadow(none);
|
||||
}
|
||||
}
|
||||
@@ -161,18 +161,18 @@
|
||||
|
||||
// Make a button look and behave like a link
|
||||
.btn-link {
|
||||
--#{$prefix}btn-font-weight: #{$font-weight-normal};
|
||||
--#{$prefix}btn-color: #{$btn-link-color};
|
||||
--#{$prefix}btn-bg: transparent;
|
||||
--#{$prefix}btn-border-color: transparent;
|
||||
--#{$prefix}btn-hover-color: #{$btn-link-hover-color};
|
||||
--#{$prefix}btn-hover-border-color: transparent;
|
||||
--#{$prefix}btn-active-color: #{$btn-link-hover-color};
|
||||
--#{$prefix}btn-active-border-color: transparent;
|
||||
--#{$prefix}btn-disabled-color: #{$btn-link-disabled-color};
|
||||
--#{$prefix}btn-disabled-border-color: transparent;
|
||||
--#{$prefix}btn-box-shadow: 0 0 0 #000; // Can't use `none` as keyword negates all values when used with multiple shadows
|
||||
--#{$prefix}btn-focus-shadow-rgb: #{$btn-link-focus-shadow-rgb};
|
||||
--btn-font-weight: #{$font-weight-normal};
|
||||
--btn-color: #{$btn-link-color};
|
||||
--btn-bg: transparent;
|
||||
--btn-border-color: transparent;
|
||||
--btn-hover-color: #{$btn-link-hover-color};
|
||||
--btn-hover-border-color: transparent;
|
||||
--btn-active-color: #{$btn-link-hover-color};
|
||||
--btn-active-border-color: transparent;
|
||||
--btn-disabled-color: #{$btn-link-disabled-color};
|
||||
--btn-disabled-border-color: transparent;
|
||||
--btn-box-shadow: 0 0 0 #000; // Can't use `none` as keyword negates all values when used with multiple shadows
|
||||
--btn-focus-shadow-rgb: #{$btn-link-focus-shadow-rgb};
|
||||
|
||||
text-decoration: $link-decoration;
|
||||
@if $enable-gradients {
|
||||
@@ -185,11 +185,11 @@
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
color: var(--#{$prefix}btn-color);
|
||||
color: var(--btn-color);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--#{$prefix}btn-hover-color);
|
||||
color: var(--btn-hover-color);
|
||||
}
|
||||
|
||||
// No need for an active state here
|
||||
|
||||
@@ -6,39 +6,39 @@
|
||||
|
||||
.card {
|
||||
// scss-docs-start card-css-vars
|
||||
--#{$prefix}card-spacer-y: #{$card-spacer-y};
|
||||
--#{$prefix}card-spacer-x: #{$card-spacer-x};
|
||||
--#{$prefix}card-title-spacer-y: #{$card-title-spacer-y};
|
||||
--#{$prefix}card-title-color: #{$card-title-color};
|
||||
--#{$prefix}card-subtitle-color: #{$card-subtitle-color};
|
||||
--#{$prefix}card-border-width: #{$card-border-width};
|
||||
--#{$prefix}card-border-color: #{$card-border-color};
|
||||
--#{$prefix}card-border-radius: #{$card-border-radius};
|
||||
--#{$prefix}card-box-shadow: #{$card-box-shadow};
|
||||
--#{$prefix}card-inner-border-radius: #{$card-inner-border-radius};
|
||||
--#{$prefix}card-cap-padding-y: #{$card-cap-padding-y};
|
||||
--#{$prefix}card-cap-padding-x: #{$card-cap-padding-x};
|
||||
--#{$prefix}card-cap-bg: #{$card-cap-bg};
|
||||
--#{$prefix}card-cap-color: #{$card-cap-color};
|
||||
--#{$prefix}card-height: #{$card-height};
|
||||
--#{$prefix}card-color: #{$card-color};
|
||||
--#{$prefix}card-bg: #{$card-bg};
|
||||
--#{$prefix}card-img-overlay-padding: #{$card-img-overlay-padding};
|
||||
--#{$prefix}card-group-margin: #{$card-group-margin};
|
||||
--card-spacer-y: #{$card-spacer-y};
|
||||
--card-spacer-x: #{$card-spacer-x};
|
||||
--card-title-spacer-y: #{$card-title-spacer-y};
|
||||
--card-title-color: #{$card-title-color};
|
||||
--card-subtitle-color: #{$card-subtitle-color};
|
||||
--card-border-width: #{$card-border-width};
|
||||
--card-border-color: #{$card-border-color};
|
||||
--card-border-radius: #{$card-border-radius};
|
||||
--card-box-shadow: #{$card-box-shadow};
|
||||
--card-inner-border-radius: #{$card-inner-border-radius};
|
||||
--card-cap-padding-y: #{$card-cap-padding-y};
|
||||
--card-cap-padding-x: #{$card-cap-padding-x};
|
||||
--card-cap-bg: #{$card-cap-bg};
|
||||
--card-cap-color: #{$card-cap-color};
|
||||
--card-height: #{$card-height};
|
||||
--card-color: #{$card-color};
|
||||
--card-bg: #{$card-bg};
|
||||
--card-img-overlay-padding: #{$card-img-overlay-padding};
|
||||
--card-group-margin: #{$card-group-margin};
|
||||
// scss-docs-end card-css-vars
|
||||
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
min-width: 0; // See https://github.com/twbs/bootstrap/pull/22740#issuecomment-305868106
|
||||
height: var(--#{$prefix}card-height);
|
||||
color: var(--#{$prefix}body-color);
|
||||
height: var(--card-height);
|
||||
color: var(--body-color);
|
||||
word-wrap: break-word;
|
||||
background-color: var(--#{$prefix}card-bg);
|
||||
background-color: var(--card-bg);
|
||||
background-clip: border-box;
|
||||
border: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
|
||||
@include border-radius(var(--#{$prefix}card-border-radius));
|
||||
@include box-shadow(var(--#{$prefix}card-box-shadow));
|
||||
border: var(--card-border-width) solid var(--card-border-color);
|
||||
@include border-radius(var(--card-border-radius));
|
||||
@include box-shadow(var(--card-box-shadow));
|
||||
|
||||
> hr {
|
||||
margin-inline-end: 0;
|
||||
@@ -51,12 +51,12 @@
|
||||
|
||||
&:first-child {
|
||||
border-top-width: 0;
|
||||
@include border-top-radius(var(--#{$prefix}card-inner-border-radius));
|
||||
@include border-top-radius(var(--card-inner-border-radius));
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom-width: 0;
|
||||
@include border-bottom-radius(var(--#{$prefix}card-inner-border-radius));
|
||||
@include border-bottom-radius(var(--card-inner-border-radius));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -72,19 +72,19 @@
|
||||
// Enable `flex-grow: 1` for decks and groups so that card blocks take up
|
||||
// as much space as possible, ensuring footers are aligned to the bottom.
|
||||
flex: 1 1 auto;
|
||||
padding: var(--#{$prefix}card-spacer-y) var(--#{$prefix}card-spacer-x);
|
||||
color: var(--#{$prefix}card-color);
|
||||
padding: var(--card-spacer-y) var(--card-spacer-x);
|
||||
color: var(--card-color);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
margin-bottom: var(--#{$prefix}card-title-spacer-y);
|
||||
color: var(--#{$prefix}card-title-color);
|
||||
margin-bottom: var(--card-title-spacer-y);
|
||||
color: var(--card-title-color);
|
||||
}
|
||||
|
||||
.card-subtitle {
|
||||
margin-top: calc(-0.5 * var(--#{$prefix}card-title-spacer-y)); // stylelint-disable-line function-disallowed-list
|
||||
margin-top: calc(-0.5 * var(--card-title-spacer-y)); // stylelint-disable-line function-disallowed-list
|
||||
margin-bottom: 0;
|
||||
color: var(--#{$prefix}card-subtitle-color);
|
||||
color: var(--card-subtitle-color);
|
||||
}
|
||||
|
||||
.card-text:last-child {
|
||||
@@ -97,7 +97,7 @@
|
||||
}
|
||||
|
||||
+ .card-link {
|
||||
margin-inline-start: var(--#{$prefix}card-spacer-x);
|
||||
margin-inline-start: var(--card-spacer-x);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -106,25 +106,25 @@
|
||||
//
|
||||
|
||||
.card-header {
|
||||
padding: var(--#{$prefix}card-cap-padding-y) var(--#{$prefix}card-cap-padding-x);
|
||||
padding: var(--card-cap-padding-y) var(--card-cap-padding-x);
|
||||
margin-bottom: 0; // Removes the default margin-bottom of <hN>
|
||||
color: var(--#{$prefix}card-cap-color);
|
||||
background-color: var(--#{$prefix}card-cap-bg);
|
||||
border-bottom: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
|
||||
color: var(--card-cap-color);
|
||||
background-color: var(--card-cap-bg);
|
||||
border-bottom: var(--card-border-width) solid var(--card-border-color);
|
||||
|
||||
&:first-child {
|
||||
@include border-radius(var(--#{$prefix}card-inner-border-radius) var(--#{$prefix}card-inner-border-radius) 0 0);
|
||||
@include border-radius(var(--card-inner-border-radius) var(--card-inner-border-radius) 0 0);
|
||||
}
|
||||
}
|
||||
|
||||
.card-footer {
|
||||
padding: var(--#{$prefix}card-cap-padding-y) var(--#{$prefix}card-cap-padding-x);
|
||||
color: var(--#{$prefix}card-cap-color);
|
||||
background-color: var(--#{$prefix}card-cap-bg);
|
||||
border-top: var(--#{$prefix}card-border-width) solid var(--#{$prefix}card-border-color);
|
||||
padding: var(--card-cap-padding-y) var(--card-cap-padding-x);
|
||||
color: var(--card-cap-color);
|
||||
background-color: var(--card-cap-bg);
|
||||
border-top: var(--card-border-width) solid var(--card-border-color);
|
||||
|
||||
&:last-child {
|
||||
@include border-radius(0 0 var(--#{$prefix}card-inner-border-radius) var(--#{$prefix}card-inner-border-radius));
|
||||
@include border-radius(0 0 var(--card-inner-border-radius) var(--card-inner-border-radius));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -133,28 +133,28 @@
|
||||
//
|
||||
|
||||
.card-header-tabs {
|
||||
margin-inline-end: calc(-0.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
|
||||
margin-bottom: calc(-1 * var(--#{$prefix}card-cap-padding-y)); // stylelint-disable-line function-disallowed-list
|
||||
margin-inline-start: calc(-0.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
|
||||
margin-inline-end: calc(-0.5 * var(--card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
|
||||
margin-bottom: calc(-1 * var(--card-cap-padding-y)); // stylelint-disable-line function-disallowed-list
|
||||
margin-inline-start: calc(-0.5 * var(--card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
|
||||
border-bottom: 0;
|
||||
|
||||
.nav-link.active {
|
||||
background-color: var(--#{$prefix}card-bg);
|
||||
border-bottom-color: var(--#{$prefix}card-bg);
|
||||
background-color: var(--card-bg);
|
||||
border-bottom-color: var(--card-bg);
|
||||
}
|
||||
}
|
||||
|
||||
.card-header-pills {
|
||||
margin-inline-end: calc(-0.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
|
||||
margin-inline-start: calc(-0.5 * var(--#{$prefix}card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
|
||||
margin-inline-end: calc(-0.5 * var(--card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
|
||||
margin-inline-start: calc(-0.5 * var(--card-cap-padding-x)); // stylelint-disable-line function-disallowed-list
|
||||
}
|
||||
|
||||
// Card image
|
||||
.card-img-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
padding: var(--#{$prefix}card-img-overlay-padding);
|
||||
@include border-radius(var(--#{$prefix}card-inner-border-radius));
|
||||
padding: var(--card-img-overlay-padding);
|
||||
@include border-radius(var(--card-inner-border-radius));
|
||||
}
|
||||
|
||||
.card-img,
|
||||
@@ -165,12 +165,12 @@
|
||||
|
||||
.card-img,
|
||||
.card-img-top {
|
||||
@include border-top-radius(var(--#{$prefix}card-inner-border-radius));
|
||||
@include border-top-radius(var(--card-inner-border-radius));
|
||||
}
|
||||
|
||||
.card-img,
|
||||
.card-img-bottom {
|
||||
@include border-bottom-radius(var(--#{$prefix}card-inner-border-radius));
|
||||
@include border-bottom-radius(var(--card-inner-border-radius));
|
||||
}
|
||||
|
||||
//
|
||||
@@ -181,7 +181,7 @@
|
||||
// The child selector allows nested `.card` within `.card-group`
|
||||
// to display properly.
|
||||
> .card {
|
||||
margin-bottom: var(--#{$prefix}card-group-margin);
|
||||
margin-bottom: var(--card-group-margin);
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
|
||||
@@ -47,13 +47,13 @@
|
||||
.carousel-item-next:not(.carousel-item-start),
|
||||
.active.carousel-item-end {
|
||||
/*rtl:ignore*/
|
||||
transform: translateX(calc(var(--#{$prefix}dir) * 100%));
|
||||
transform: translateX(calc(var(--dir) * 100%));
|
||||
}
|
||||
|
||||
.carousel-item-prev:not(.carousel-item-end),
|
||||
.active.carousel-item-start {
|
||||
/*rtl:ignore*/
|
||||
transform: translateX(calc(var(--#{$prefix}dir) * -100%));
|
||||
transform: translateX(calc(var(--dir) * -100%));
|
||||
}
|
||||
|
||||
//
|
||||
@@ -101,7 +101,7 @@
|
||||
color: $carousel-control-color;
|
||||
text-align: center;
|
||||
background: none;
|
||||
filter: var(--#{$prefix}carousel-control-icon-filter);
|
||||
filter: var(--carousel-control-icon-filter);
|
||||
border: 0;
|
||||
opacity: $carousel-control-opacity;
|
||||
@include transition($carousel-control-transition);
|
||||
@@ -171,7 +171,7 @@
|
||||
margin-inline-start: $carousel-indicator-spacer;
|
||||
text-indent: -999px;
|
||||
cursor: pointer;
|
||||
background-color: var(--#{$prefix}carousel-indicator-active-bg);
|
||||
background-color: var(--carousel-indicator-active-bg);
|
||||
background-clip: padding-box;
|
||||
border: 0;
|
||||
// Use transparent borders to increase the hit area by 10px on top and bottom.
|
||||
@@ -196,16 +196,16 @@
|
||||
bottom: $carousel-caption-spacer;
|
||||
padding-top: $carousel-caption-padding-y;
|
||||
padding-bottom: $carousel-caption-padding-y;
|
||||
color: var(--#{$prefix}carousel-caption-color);
|
||||
color: var(--carousel-caption-color);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// Dark mode carousel
|
||||
|
||||
@mixin carousel-dark() {
|
||||
--#{$prefix}carousel-indicator-active-bg: #{$carousel-indicator-active-bg-dark};
|
||||
--#{$prefix}carousel-caption-color: #{$carousel-caption-color-dark};
|
||||
--#{$prefix}carousel-control-icon-filter: #{$carousel-control-icon-filter-dark};
|
||||
--carousel-indicator-active-bg: #{$carousel-indicator-active-bg-dark};
|
||||
--carousel-caption-color: #{$carousel-caption-color-dark};
|
||||
--carousel-control-icon-filter: #{$carousel-control-icon-filter-dark};
|
||||
}
|
||||
|
||||
.carousel-dark {
|
||||
@@ -215,9 +215,9 @@
|
||||
:root,
|
||||
[data-bs-theme='light'],
|
||||
[data-theme='light'] {
|
||||
--#{$prefix}carousel-indicator-active-bg: #{$carousel-indicator-active-bg};
|
||||
--#{$prefix}carousel-caption-color: #{$carousel-caption-color};
|
||||
--#{$prefix}carousel-control-icon-filter: #{$carousel-control-icon-filter};
|
||||
--carousel-indicator-active-bg: #{$carousel-indicator-active-bg};
|
||||
--carousel-caption-color: #{$carousel-caption-color};
|
||||
--carousel-control-icon-filter: #{$carousel-control-icon-filter};
|
||||
}
|
||||
|
||||
@if $enable-dark-mode {
|
||||
|
||||
@@ -22,65 +22,65 @@
|
||||
// The dropdown menu
|
||||
.dropdown-menu {
|
||||
// scss-docs-start dropdown-css-vars
|
||||
--#{$prefix}dropdown-zindex: #{$zindex-dropdown};
|
||||
--#{$prefix}dropdown-min-width: #{$dropdown-min-width};
|
||||
--#{$prefix}dropdown-padding-x: #{$dropdown-padding-x};
|
||||
--#{$prefix}dropdown-padding-y: #{$dropdown-padding-y};
|
||||
--#{$prefix}dropdown-spacer: #{$dropdown-spacer};
|
||||
@include rfs($dropdown-font-size, --#{$prefix}dropdown-font-size);
|
||||
--#{$prefix}dropdown-color: #{$dropdown-color};
|
||||
--#{$prefix}dropdown-bg: #{$dropdown-bg};
|
||||
--#{$prefix}dropdown-border-color: #{$dropdown-border-color};
|
||||
--#{$prefix}dropdown-border-radius: #{$dropdown-border-radius};
|
||||
--#{$prefix}dropdown-border-width: #{$dropdown-border-width};
|
||||
--#{$prefix}dropdown-inner-border-radius: #{$dropdown-inner-border-radius};
|
||||
--#{$prefix}dropdown-divider-bg: #{$dropdown-divider-bg};
|
||||
--#{$prefix}dropdown-divider-margin-y: #{$dropdown-divider-margin-y};
|
||||
--#{$prefix}dropdown-box-shadow: #{$dropdown-box-shadow};
|
||||
--#{$prefix}dropdown-link-color: #{$dropdown-link-color};
|
||||
--#{$prefix}dropdown-link-hover-color: #{$dropdown-link-hover-color};
|
||||
--#{$prefix}dropdown-link-hover-bg: #{$dropdown-link-hover-bg};
|
||||
--#{$prefix}dropdown-link-active-color: #{$dropdown-link-active-color};
|
||||
--#{$prefix}dropdown-link-active-bg: #{$dropdown-link-active-bg};
|
||||
--#{$prefix}dropdown-link-disabled-color: #{$dropdown-link-disabled-color};
|
||||
--#{$prefix}dropdown-item-padding-x: #{$dropdown-item-padding-x};
|
||||
--#{$prefix}dropdown-item-padding-y: #{$dropdown-item-padding-y};
|
||||
--#{$prefix}dropdown-header-color: #{$dropdown-header-color};
|
||||
--#{$prefix}dropdown-header-padding-x: #{$dropdown-header-padding-x};
|
||||
--#{$prefix}dropdown-header-padding-y: #{$dropdown-header-padding-y};
|
||||
--dropdown-zindex: #{$zindex-dropdown};
|
||||
--dropdown-min-width: #{$dropdown-min-width};
|
||||
--dropdown-padding-x: #{$dropdown-padding-x};
|
||||
--dropdown-padding-y: #{$dropdown-padding-y};
|
||||
--dropdown-spacer: #{$dropdown-spacer};
|
||||
@include rfs($dropdown-font-size, --dropdown-font-size);
|
||||
--dropdown-color: #{$dropdown-color};
|
||||
--dropdown-bg: #{$dropdown-bg};
|
||||
--dropdown-border-color: #{$dropdown-border-color};
|
||||
--dropdown-border-radius: #{$dropdown-border-radius};
|
||||
--dropdown-border-width: #{$dropdown-border-width};
|
||||
--dropdown-inner-border-radius: #{$dropdown-inner-border-radius};
|
||||
--dropdown-divider-bg: #{$dropdown-divider-bg};
|
||||
--dropdown-divider-margin-y: #{$dropdown-divider-margin-y};
|
||||
--dropdown-box-shadow: #{$dropdown-box-shadow};
|
||||
--dropdown-link-color: #{$dropdown-link-color};
|
||||
--dropdown-link-hover-color: #{$dropdown-link-hover-color};
|
||||
--dropdown-link-hover-bg: #{$dropdown-link-hover-bg};
|
||||
--dropdown-link-active-color: #{$dropdown-link-active-color};
|
||||
--dropdown-link-active-bg: #{$dropdown-link-active-bg};
|
||||
--dropdown-link-disabled-color: #{$dropdown-link-disabled-color};
|
||||
--dropdown-item-padding-x: #{$dropdown-item-padding-x};
|
||||
--dropdown-item-padding-y: #{$dropdown-item-padding-y};
|
||||
--dropdown-header-color: #{$dropdown-header-color};
|
||||
--dropdown-header-padding-x: #{$dropdown-header-padding-x};
|
||||
--dropdown-header-padding-y: #{$dropdown-header-padding-y};
|
||||
// scss-docs-end dropdown-css-vars
|
||||
|
||||
position: absolute;
|
||||
z-index: var(--#{$prefix}dropdown-zindex);
|
||||
z-index: var(--dropdown-zindex);
|
||||
display: none; // none by default, but block on "open" of the menu
|
||||
min-width: var(--#{$prefix}dropdown-min-width);
|
||||
padding: var(--#{$prefix}dropdown-padding-y) var(--#{$prefix}dropdown-padding-x);
|
||||
min-width: var(--dropdown-min-width);
|
||||
padding: var(--dropdown-padding-y) var(--dropdown-padding-x);
|
||||
margin: 0; // Override default margin of ul
|
||||
@include font-size(var(--#{$prefix}dropdown-font-size));
|
||||
color: var(--#{$prefix}dropdown-color);
|
||||
@include font-size(var(--dropdown-font-size));
|
||||
color: var(--dropdown-color);
|
||||
text-align: start; // Ensures proper alignment if parent has it changed (e.g., modal footer)
|
||||
list-style: none;
|
||||
background-color: var(--#{$prefix}dropdown-bg);
|
||||
background-color: var(--dropdown-bg);
|
||||
background-clip: padding-box;
|
||||
border: var(--#{$prefix}dropdown-border-width) solid var(--#{$prefix}dropdown-border-color);
|
||||
@include border-radius(var(--#{$prefix}dropdown-border-radius));
|
||||
@include box-shadow(var(--#{$prefix}dropdown-box-shadow));
|
||||
border: var(--dropdown-border-width) solid var(--dropdown-border-color);
|
||||
@include border-radius(var(--dropdown-border-radius));
|
||||
@include box-shadow(var(--dropdown-box-shadow));
|
||||
|
||||
&[data-bs-popper],
|
||||
&[data-tblr-popper] {
|
||||
top: 100%;
|
||||
inset-inline-start: 0;
|
||||
margin-top: var(--#{$prefix}dropdown-spacer);
|
||||
margin-top: var(--dropdown-spacer);
|
||||
}
|
||||
|
||||
@if $dropdown-padding-y == 0 {
|
||||
> .dropdown-item:first-child,
|
||||
> li:first-child .dropdown-item {
|
||||
@include border-top-radius(var(--#{$prefix}dropdown-inner-border-radius));
|
||||
@include border-top-radius(var(--dropdown-inner-border-radius));
|
||||
}
|
||||
> .dropdown-item:last-child,
|
||||
> li:last-child .dropdown-item {
|
||||
@include border-bottom-radius(var(--#{$prefix}dropdown-inner-border-radius));
|
||||
@include border-bottom-radius(var(--dropdown-inner-border-radius));
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -124,7 +124,7 @@
|
||||
top: auto;
|
||||
bottom: 100%;
|
||||
margin-top: 0;
|
||||
margin-bottom: var(--#{$prefix}dropdown-spacer);
|
||||
margin-bottom: var(--dropdown-spacer);
|
||||
}
|
||||
|
||||
.dropdown-toggle {
|
||||
@@ -139,7 +139,7 @@
|
||||
inset-inline-end: auto;
|
||||
inset-inline-start: 100%;
|
||||
margin-top: 0;
|
||||
margin-inline-start: var(--#{$prefix}dropdown-spacer);
|
||||
margin-inline-start: var(--dropdown-spacer);
|
||||
}
|
||||
|
||||
.dropdown-toggle {
|
||||
@@ -157,7 +157,7 @@
|
||||
inset-inline-end: 100%;
|
||||
inset-inline-start: auto;
|
||||
margin-top: 0;
|
||||
margin-inline-end: var(--#{$prefix}dropdown-spacer);
|
||||
margin-inline-end: var(--dropdown-spacer);
|
||||
}
|
||||
|
||||
.dropdown-toggle {
|
||||
@@ -171,9 +171,9 @@
|
||||
// Dividers (basically an `<hr>`) within the dropdown
|
||||
.dropdown-divider {
|
||||
height: 0;
|
||||
margin: var(--#{$prefix}dropdown-divider-margin-y) 0;
|
||||
margin: var(--dropdown-divider-margin-y) 0;
|
||||
overflow: hidden;
|
||||
border-top: 1px solid var(--#{$prefix}dropdown-divider-bg);
|
||||
border-top: 1px solid var(--dropdown-divider-bg);
|
||||
opacity: 1; // Revisit in v6 to de-dupe styles that conflict with <hr> element
|
||||
}
|
||||
|
||||
@@ -183,34 +183,34 @@
|
||||
.dropdown-item {
|
||||
display: block;
|
||||
width: 100%; // For `<button>`s
|
||||
padding: var(--#{$prefix}dropdown-item-padding-y) var(--#{$prefix}dropdown-item-padding-x);
|
||||
padding: var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);
|
||||
clear: both;
|
||||
font-weight: $font-weight-normal;
|
||||
color: var(--#{$prefix}dropdown-link-color);
|
||||
color: var(--dropdown-link-color);
|
||||
text-align: inherit; // For `<button>`s
|
||||
text-decoration: if(sass($link-decoration == none): null; else: none);
|
||||
white-space: nowrap; // prevent links from randomly breaking onto new lines
|
||||
background-color: transparent; // For `<button>`s
|
||||
border: 0; // For `<button>`s
|
||||
@include border-radius(var(--#{$prefix}dropdown-item-border-radius, 0));
|
||||
@include border-radius(var(--dropdown-item-border-radius, 0));
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: var(--#{$prefix}dropdown-link-hover-color);
|
||||
color: var(--dropdown-link-hover-color);
|
||||
text-decoration: if(sass($link-hover-decoration == underline): none; else: null);
|
||||
@include gradient-bg(var(--#{$prefix}dropdown-link-hover-bg));
|
||||
@include gradient-bg(var(--dropdown-link-hover-bg));
|
||||
}
|
||||
|
||||
&.active,
|
||||
&:active {
|
||||
color: var(--#{$prefix}dropdown-link-active-color);
|
||||
color: var(--dropdown-link-active-color);
|
||||
text-decoration: none;
|
||||
@include gradient-bg(var(--#{$prefix}dropdown-link-active-bg));
|
||||
@include gradient-bg(var(--dropdown-link-active-bg));
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
color: var(--#{$prefix}dropdown-link-disabled-color);
|
||||
color: var(--dropdown-link-disabled-color);
|
||||
pointer-events: none;
|
||||
background-color: transparent;
|
||||
// Remove CSS gradients if they're enabled
|
||||
@@ -225,34 +225,34 @@
|
||||
// Dropdown section headers
|
||||
.dropdown-header {
|
||||
display: block;
|
||||
padding: var(--#{$prefix}dropdown-header-padding-y) var(--#{$prefix}dropdown-header-padding-x);
|
||||
padding: var(--dropdown-header-padding-y) var(--dropdown-header-padding-x);
|
||||
margin-bottom: 0; // for use with heading elements
|
||||
@include font-size($font-size-sm);
|
||||
color: var(--#{$prefix}dropdown-header-color);
|
||||
color: var(--dropdown-header-color);
|
||||
white-space: nowrap; // as with > li > a
|
||||
}
|
||||
|
||||
// Dropdown text
|
||||
.dropdown-item-text {
|
||||
display: block;
|
||||
padding: var(--#{$prefix}dropdown-item-padding-y) var(--#{$prefix}dropdown-item-padding-x);
|
||||
color: var(--#{$prefix}dropdown-link-color);
|
||||
padding: var(--dropdown-item-padding-y) var(--dropdown-item-padding-x);
|
||||
color: var(--dropdown-link-color);
|
||||
}
|
||||
|
||||
// Dark dropdowns
|
||||
.dropdown-menu-dark {
|
||||
// scss-docs-start dropdown-dark-css-vars
|
||||
--#{$prefix}dropdown-color: #{$dropdown-dark-color};
|
||||
--#{$prefix}dropdown-bg: #{$dropdown-dark-bg};
|
||||
--#{$prefix}dropdown-border-color: #{$dropdown-dark-border-color};
|
||||
--#{$prefix}dropdown-box-shadow: #{$dropdown-dark-box-shadow};
|
||||
--#{$prefix}dropdown-link-color: #{$dropdown-dark-link-color};
|
||||
--#{$prefix}dropdown-link-hover-color: #{$dropdown-dark-link-hover-color};
|
||||
--#{$prefix}dropdown-divider-bg: #{$dropdown-dark-divider-bg};
|
||||
--#{$prefix}dropdown-link-hover-bg: #{$dropdown-dark-link-hover-bg};
|
||||
--#{$prefix}dropdown-link-active-color: #{$dropdown-dark-link-active-color};
|
||||
--#{$prefix}dropdown-link-active-bg: #{$dropdown-dark-link-active-bg};
|
||||
--#{$prefix}dropdown-link-disabled-color: #{$dropdown-dark-link-disabled-color};
|
||||
--#{$prefix}dropdown-header-color: #{$dropdown-dark-header-color};
|
||||
--dropdown-color: #{$dropdown-dark-color};
|
||||
--dropdown-bg: #{$dropdown-dark-bg};
|
||||
--dropdown-border-color: #{$dropdown-dark-border-color};
|
||||
--dropdown-box-shadow: #{$dropdown-dark-box-shadow};
|
||||
--dropdown-link-color: #{$dropdown-dark-link-color};
|
||||
--dropdown-link-hover-color: #{$dropdown-dark-link-hover-color};
|
||||
--dropdown-divider-bg: #{$dropdown-dark-divider-bg};
|
||||
--dropdown-link-hover-bg: #{$dropdown-dark-link-hover-bg};
|
||||
--dropdown-link-active-color: #{$dropdown-dark-link-active-color};
|
||||
--dropdown-link-active-bg: #{$dropdown-dark-link-active-bg};
|
||||
--dropdown-link-disabled-color: #{$dropdown-dark-link-disabled-color};
|
||||
--dropdown-header-color: #{$dropdown-dark-header-color};
|
||||
// scss-docs-end dropdown-dark-css-vars
|
||||
}
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
|
||||
:root {
|
||||
@each $name, $value in $grid-breakpoints {
|
||||
--#{$prefix}breakpoint-#{$name}: #{$value};
|
||||
--breakpoint-#{$name}: #{$value};
|
||||
}
|
||||
}
|
||||
|
||||
@@ -23,9 +23,9 @@
|
||||
@if $enable-cssgrid {
|
||||
.grid {
|
||||
display: grid;
|
||||
grid-template-rows: repeat(var(--#{$prefix}rows, 1), 1fr);
|
||||
grid-template-columns: repeat(var(--#{$prefix}columns, #{$grid-columns}), 1fr);
|
||||
gap: var(--#{$prefix}gap, #{$grid-gutter-width});
|
||||
grid-template-rows: repeat(var(--rows, 1), 1fr);
|
||||
grid-template-columns: repeat(var(--columns, #{$grid-columns}), 1fr);
|
||||
gap: var(--gap, #{$grid-gutter-width});
|
||||
|
||||
@include make-cssgrid();
|
||||
}
|
||||
|
||||
@@ -8,23 +8,23 @@
|
||||
|
||||
.list-group {
|
||||
// scss-docs-start list-group-css-vars
|
||||
--#{$prefix}list-group-color: #{$list-group-color};
|
||||
--#{$prefix}list-group-bg: #{$list-group-bg};
|
||||
--#{$prefix}list-group-border-color: #{$list-group-border-color};
|
||||
--#{$prefix}list-group-border-width: #{$list-group-border-width};
|
||||
--#{$prefix}list-group-border-radius: #{$list-group-border-radius};
|
||||
--#{$prefix}list-group-item-padding-x: #{$list-group-item-padding-x};
|
||||
--#{$prefix}list-group-item-padding-y: #{$list-group-item-padding-y};
|
||||
--#{$prefix}list-group-action-color: #{$list-group-action-color};
|
||||
--#{$prefix}list-group-action-hover-color: #{$list-group-action-hover-color};
|
||||
--#{$prefix}list-group-action-hover-bg: #{$list-group-hover-bg};
|
||||
--#{$prefix}list-group-action-active-color: #{$list-group-action-active-color};
|
||||
--#{$prefix}list-group-action-active-bg: #{$list-group-action-active-bg};
|
||||
--#{$prefix}list-group-disabled-color: #{$list-group-disabled-color};
|
||||
--#{$prefix}list-group-disabled-bg: #{$list-group-disabled-bg};
|
||||
--#{$prefix}list-group-active-color: #{$list-group-active-color};
|
||||
--#{$prefix}list-group-active-bg: #{$list-group-active-bg};
|
||||
--#{$prefix}list-group-active-border-color: #{$list-group-active-border-color};
|
||||
--list-group-color: #{$list-group-color};
|
||||
--list-group-bg: #{$list-group-bg};
|
||||
--list-group-border-color: #{$list-group-border-color};
|
||||
--list-group-border-width: #{$list-group-border-width};
|
||||
--list-group-border-radius: #{$list-group-border-radius};
|
||||
--list-group-item-padding-x: #{$list-group-item-padding-x};
|
||||
--list-group-item-padding-y: #{$list-group-item-padding-y};
|
||||
--list-group-action-color: #{$list-group-action-color};
|
||||
--list-group-action-hover-color: #{$list-group-action-hover-color};
|
||||
--list-group-action-hover-bg: #{$list-group-hover-bg};
|
||||
--list-group-action-active-color: #{$list-group-action-active-color};
|
||||
--list-group-action-active-bg: #{$list-group-action-active-bg};
|
||||
--list-group-disabled-color: #{$list-group-disabled-color};
|
||||
--list-group-disabled-bg: #{$list-group-disabled-bg};
|
||||
--list-group-active-color: #{$list-group-active-color};
|
||||
--list-group-active-bg: #{$list-group-active-bg};
|
||||
--list-group-active-border-color: #{$list-group-active-border-color};
|
||||
// scss-docs-end list-group-css-vars
|
||||
|
||||
display: flex;
|
||||
@@ -33,7 +33,7 @@
|
||||
// No need to set list-style: none; since .list-group-item is block level
|
||||
padding-inline-start: 0; // reset padding because ul and ol
|
||||
margin-bottom: 0;
|
||||
@include border-radius(var(--#{$prefix}list-group-border-radius));
|
||||
@include border-radius(var(--list-group-border-radius));
|
||||
}
|
||||
|
||||
.list-group-numbered {
|
||||
@@ -54,11 +54,11 @@
|
||||
.list-group-item {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: var(--#{$prefix}list-group-item-padding-y) var(--#{$prefix}list-group-item-padding-x);
|
||||
color: var(--#{$prefix}list-group-color);
|
||||
padding: var(--list-group-item-padding-y) var(--list-group-item-padding-x);
|
||||
color: var(--list-group-color);
|
||||
text-decoration: if(sass($link-decoration == none): null; else: none);
|
||||
background-color: var(--#{$prefix}list-group-bg);
|
||||
border: var(--#{$prefix}list-group-border-width) solid var(--#{$prefix}list-group-border-color);
|
||||
background-color: var(--list-group-bg);
|
||||
border: var(--list-group-border-width) solid var(--list-group-border-color);
|
||||
|
||||
&:first-child {
|
||||
@include border-top-radius(inherit);
|
||||
@@ -70,17 +70,17 @@
|
||||
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
color: var(--#{$prefix}list-group-disabled-color);
|
||||
color: var(--list-group-disabled-color);
|
||||
pointer-events: none;
|
||||
background-color: var(--#{$prefix}list-group-disabled-bg);
|
||||
background-color: var(--list-group-disabled-bg);
|
||||
}
|
||||
|
||||
// Include both here for `<a>`s and `<button>`s
|
||||
&.active {
|
||||
z-index: 2; // Place active items above their siblings for proper border styling
|
||||
color: var(--#{$prefix}list-group-active-color);
|
||||
background-color: var(--#{$prefix}list-group-active-bg);
|
||||
border-color: var(--#{$prefix}list-group-active-border-color);
|
||||
color: var(--list-group-active-color);
|
||||
background-color: var(--list-group-active-bg);
|
||||
border-color: var(--list-group-active-border-color);
|
||||
}
|
||||
|
||||
// stylelint-disable-next-line scss/selector-no-redundant-nesting-selector
|
||||
@@ -88,8 +88,8 @@
|
||||
border-top-width: 0;
|
||||
|
||||
&.active {
|
||||
margin-top: calc(-1 * var(--#{$prefix}list-group-border-width)); // stylelint-disable-line function-disallowed-list
|
||||
border-top-width: var(--#{$prefix}list-group-border-width);
|
||||
margin-top: calc(-1 * var(--list-group-border-width)); // stylelint-disable-line function-disallowed-list
|
||||
border-top-width: var(--list-group-border-width);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -101,7 +101,7 @@
|
||||
|
||||
.list-group-item-action {
|
||||
width: 100%; // For `<button>`s (anchors become 100% by default though)
|
||||
color: var(--#{$prefix}list-group-action-color);
|
||||
color: var(--list-group-action-color);
|
||||
text-align: inherit; // For `<button>`s (anchors inherit)
|
||||
|
||||
&:not(.active) {
|
||||
@@ -109,14 +109,14 @@
|
||||
&:hover,
|
||||
&:focus {
|
||||
z-index: 1; // Place hover/focus items above their siblings for proper border styling
|
||||
color: var(--#{$prefix}list-group-action-hover-color);
|
||||
color: var(--list-group-action-hover-color);
|
||||
text-decoration: none;
|
||||
background-color: var(--#{$prefix}list-group-action-hover-bg);
|
||||
background-color: var(--list-group-action-hover-bg);
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: var(--#{$prefix}list-group-action-active-color);
|
||||
background-color: var(--#{$prefix}list-group-action-active-bg);
|
||||
color: var(--list-group-action-active-color);
|
||||
background-color: var(--list-group-action-active-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -134,12 +134,12 @@
|
||||
|
||||
> .list-group-item {
|
||||
&:first-child:not(:last-child) {
|
||||
@include border-bottom-start-radius(var(--#{$prefix}list-group-border-radius));
|
||||
@include border-bottom-start-radius(var(--list-group-border-radius));
|
||||
@include border-top-end-radius(0);
|
||||
}
|
||||
|
||||
&:last-child:not(:first-child) {
|
||||
@include border-top-end-radius(var(--#{$prefix}list-group-border-radius));
|
||||
@include border-top-end-radius(var(--list-group-border-radius));
|
||||
@include border-bottom-start-radius(0);
|
||||
}
|
||||
|
||||
@@ -148,12 +148,12 @@
|
||||
}
|
||||
|
||||
+ .list-group-item {
|
||||
border-top-width: var(--#{$prefix}list-group-border-width);
|
||||
border-top-width: var(--list-group-border-width);
|
||||
border-inline-start-width: 0;
|
||||
|
||||
&.active {
|
||||
margin-inline-start: calc(-1 * var(--#{$prefix}list-group-border-width)); // stylelint-disable-line function-disallowed-list
|
||||
border-inline-start-width: var(--#{$prefix}list-group-border-width);
|
||||
margin-inline-start: calc(-1 * var(--list-group-border-width)); // stylelint-disable-line function-disallowed-list
|
||||
border-inline-start-width: var(--list-group-border-width);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -170,7 +170,7 @@
|
||||
@include border-radius(0);
|
||||
|
||||
> .list-group-item {
|
||||
border-width: 0 0 var(--#{$prefix}list-group-border-width);
|
||||
border-width: 0 0 var(--list-group-border-width);
|
||||
|
||||
&:last-child {
|
||||
border-bottom-width: 0;
|
||||
@@ -186,16 +186,16 @@
|
||||
|
||||
@each $state in map.keys($theme-colors) {
|
||||
.list-group-item-#{$state} {
|
||||
--#{$prefix}list-group-color: var(--#{$prefix}#{$state}-text-emphasis);
|
||||
--#{$prefix}list-group-bg: var(--#{$prefix}#{$state}-bg-subtle);
|
||||
--#{$prefix}list-group-border-color: var(--#{$prefix}#{$state}-border-subtle);
|
||||
--#{$prefix}list-group-action-hover-color: var(--#{$prefix}emphasis-color);
|
||||
--#{$prefix}list-group-action-hover-bg: var(--#{$prefix}#{$state}-border-subtle);
|
||||
--#{$prefix}list-group-action-active-color: var(--#{$prefix}emphasis-color);
|
||||
--#{$prefix}list-group-action-active-bg: var(--#{$prefix}#{$state}-border-subtle);
|
||||
--#{$prefix}list-group-active-color: var(--#{$prefix}#{$state}-bg-subtle);
|
||||
--#{$prefix}list-group-active-bg: var(--#{$prefix}#{$state}-text-emphasis);
|
||||
--#{$prefix}list-group-active-border-color: var(--#{$prefix}#{$state}-text-emphasis);
|
||||
--list-group-color: var(--#{$state}-text-emphasis);
|
||||
--list-group-bg: var(--#{$state}-bg-subtle);
|
||||
--list-group-border-color: var(--#{$state}-border-subtle);
|
||||
--list-group-action-hover-color: var(--emphasis-color);
|
||||
--list-group-action-hover-bg: var(--#{$state}-border-subtle);
|
||||
--list-group-action-active-color: var(--emphasis-color);
|
||||
--list-group-action-active-bg: var(--#{$state}-border-subtle);
|
||||
--list-group-active-color: var(--#{$state}-bg-subtle);
|
||||
--list-group-active-bg: var(--#{$state}-text-emphasis);
|
||||
--list-group-active-border-color: var(--#{$state}-text-emphasis);
|
||||
}
|
||||
}
|
||||
// scss-docs-end list-group-modifiers
|
||||
|
||||
@@ -12,33 +12,33 @@
|
||||
|
||||
.modal {
|
||||
// scss-docs-start modal-css-vars
|
||||
--#{$prefix}modal-zindex: #{$zindex-modal};
|
||||
--#{$prefix}modal-width: #{$modal-md};
|
||||
--#{$prefix}modal-padding: #{$modal-inner-padding};
|
||||
--#{$prefix}modal-margin: #{$modal-dialog-margin};
|
||||
--#{$prefix}modal-color: #{$modal-content-color};
|
||||
--#{$prefix}modal-bg: #{$modal-content-bg};
|
||||
--#{$prefix}modal-border-color: #{$modal-content-border-color};
|
||||
--#{$prefix}modal-border-width: #{$modal-content-border-width};
|
||||
--#{$prefix}modal-border-radius: #{$modal-content-border-radius};
|
||||
--#{$prefix}modal-box-shadow: #{$modal-content-box-shadow-xs};
|
||||
--#{$prefix}modal-inner-border-radius: #{$modal-content-inner-border-radius};
|
||||
--#{$prefix}modal-header-padding-x: #{$modal-header-padding-x};
|
||||
--#{$prefix}modal-header-padding-y: #{$modal-header-padding-y};
|
||||
--#{$prefix}modal-header-padding: #{$modal-header-padding}; // Todo in v6: Split this padding into x and y
|
||||
--#{$prefix}modal-header-border-color: #{$modal-header-border-color};
|
||||
--#{$prefix}modal-header-border-width: #{$modal-header-border-width};
|
||||
--#{$prefix}modal-title-line-height: #{$modal-title-line-height};
|
||||
--#{$prefix}modal-footer-gap: #{$modal-footer-margin-between};
|
||||
--#{$prefix}modal-footer-bg: #{$modal-footer-bg};
|
||||
--#{$prefix}modal-footer-border-color: #{$modal-footer-border-color};
|
||||
--#{$prefix}modal-footer-border-width: #{$modal-footer-border-width};
|
||||
--modal-zindex: #{$zindex-modal};
|
||||
--modal-width: #{$modal-md};
|
||||
--modal-padding: #{$modal-inner-padding};
|
||||
--modal-margin: #{$modal-dialog-margin};
|
||||
--modal-color: #{$modal-content-color};
|
||||
--modal-bg: #{$modal-content-bg};
|
||||
--modal-border-color: #{$modal-content-border-color};
|
||||
--modal-border-width: #{$modal-content-border-width};
|
||||
--modal-border-radius: #{$modal-content-border-radius};
|
||||
--modal-box-shadow: #{$modal-content-box-shadow-xs};
|
||||
--modal-inner-border-radius: #{$modal-content-inner-border-radius};
|
||||
--modal-header-padding-x: #{$modal-header-padding-x};
|
||||
--modal-header-padding-y: #{$modal-header-padding-y};
|
||||
--modal-header-padding: #{$modal-header-padding}; // Todo in v6: Split this padding into x and y
|
||||
--modal-header-border-color: #{$modal-header-border-color};
|
||||
--modal-header-border-width: #{$modal-header-border-width};
|
||||
--modal-title-line-height: #{$modal-title-line-height};
|
||||
--modal-footer-gap: #{$modal-footer-margin-between};
|
||||
--modal-footer-bg: #{$modal-footer-bg};
|
||||
--modal-footer-border-color: #{$modal-footer-border-color};
|
||||
--modal-footer-border-width: #{$modal-footer-border-width};
|
||||
// scss-docs-end modal-css-vars
|
||||
|
||||
position: fixed;
|
||||
inset-inline-start: 0;
|
||||
top: 0;
|
||||
z-index: var(--#{$prefix}modal-zindex);
|
||||
z-index: var(--modal-zindex);
|
||||
display: none;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
@@ -56,7 +56,7 @@
|
||||
.modal-dialog {
|
||||
position: relative;
|
||||
width: auto;
|
||||
margin: var(--#{$prefix}modal-margin);
|
||||
margin: var(--modal-margin);
|
||||
// allow clicks to pass through for custom click handling to close modal
|
||||
pointer-events: none;
|
||||
|
||||
@@ -76,7 +76,7 @@
|
||||
}
|
||||
|
||||
.modal-dialog-scrollable {
|
||||
height: calc(100% - var(--#{$prefix}modal-margin) * 2);
|
||||
height: calc(100% - var(--modal-margin) * 2);
|
||||
|
||||
.modal-content {
|
||||
max-height: 100%;
|
||||
@@ -91,7 +91,7 @@
|
||||
.modal-dialog-centered {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: calc(100% - var(--#{$prefix}modal-margin) * 2);
|
||||
min-height: calc(100% - var(--modal-margin) * 2);
|
||||
}
|
||||
|
||||
// Actual modal
|
||||
@@ -101,13 +101,13 @@
|
||||
flex-direction: column;
|
||||
width: 100%; // Ensure `.modal-content` extends the full width of the parent `.modal-dialog`
|
||||
// counteract the pointer-events: none; in the .modal-dialog
|
||||
color: var(--#{$prefix}modal-color);
|
||||
color: var(--modal-color);
|
||||
pointer-events: auto;
|
||||
background-color: var(--#{$prefix}modal-bg);
|
||||
background-color: var(--modal-bg);
|
||||
background-clip: padding-box;
|
||||
border: var(--#{$prefix}modal-border-width) solid var(--#{$prefix}modal-border-color);
|
||||
@include border-radius(var(--#{$prefix}modal-border-radius));
|
||||
@include box-shadow(var(--#{$prefix}modal-box-shadow));
|
||||
border: var(--modal-border-width) solid var(--modal-border-color);
|
||||
@include border-radius(var(--modal-border-radius));
|
||||
@include box-shadow(var(--modal-box-shadow));
|
||||
// Remove focus outline from opened modal
|
||||
outline: 0;
|
||||
}
|
||||
@@ -115,12 +115,12 @@
|
||||
// Modal background
|
||||
.modal-backdrop {
|
||||
// scss-docs-start modal-backdrop-css-vars
|
||||
--#{$prefix}backdrop-zindex: #{$zindex-modal-backdrop};
|
||||
--#{$prefix}backdrop-bg: #{$modal-backdrop-bg};
|
||||
--#{$prefix}backdrop-opacity: #{$modal-backdrop-opacity};
|
||||
--backdrop-zindex: #{$zindex-modal-backdrop};
|
||||
--backdrop-bg: #{$modal-backdrop-bg};
|
||||
--backdrop-opacity: #{$modal-backdrop-opacity};
|
||||
// scss-docs-end modal-backdrop-css-vars
|
||||
|
||||
@include overlay-backdrop(var(--#{$prefix}backdrop-zindex), var(--#{$prefix}backdrop-bg), var(--#{$prefix}backdrop-opacity));
|
||||
@include overlay-backdrop(var(--backdrop-zindex), var(--backdrop-bg), var(--backdrop-opacity));
|
||||
}
|
||||
|
||||
// Modal header
|
||||
@@ -129,16 +129,16 @@
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
padding: var(--#{$prefix}modal-header-padding);
|
||||
border-bottom: var(--#{$prefix}modal-header-border-width) solid var(--#{$prefix}modal-header-border-color);
|
||||
@include border-top-radius(var(--#{$prefix}modal-inner-border-radius));
|
||||
padding: var(--modal-header-padding);
|
||||
border-bottom: var(--modal-header-border-width) solid var(--modal-header-border-color);
|
||||
@include border-top-radius(var(--modal-inner-border-radius));
|
||||
|
||||
.btn-close {
|
||||
padding: calc(var(--#{$prefix}modal-header-padding-y) * 0.5) calc(var(--#{$prefix}modal-header-padding-x) * 0.5);
|
||||
padding: calc(var(--modal-header-padding-y) * 0.5) calc(var(--modal-header-padding-x) * 0.5);
|
||||
// Split properties to avoid invalid calc() function if value is 0
|
||||
margin-top: calc(-0.5 * var(--#{$prefix}modal-header-padding-y));
|
||||
margin-inline-end: calc(-0.5 * var(--#{$prefix}modal-header-padding-x));
|
||||
margin-bottom: calc(-0.5 * var(--#{$prefix}modal-header-padding-y));
|
||||
margin-top: calc(-0.5 * var(--modal-header-padding-y));
|
||||
margin-inline-end: calc(-0.5 * var(--modal-header-padding-x));
|
||||
margin-bottom: calc(-0.5 * var(--modal-header-padding-y));
|
||||
margin-inline-start: auto;
|
||||
}
|
||||
}
|
||||
@@ -146,7 +146,7 @@
|
||||
// Title text within header
|
||||
.modal-title {
|
||||
margin-bottom: 0;
|
||||
line-height: var(--#{$prefix}modal-title-line-height);
|
||||
line-height: var(--modal-title-line-height);
|
||||
}
|
||||
|
||||
// Modal body
|
||||
@@ -156,7 +156,7 @@
|
||||
// Enable `flex-grow: 1` so that the body take up as much space as possible
|
||||
// when there should be a fixed height on `.modal-dialog`.
|
||||
flex: 1 1 auto;
|
||||
padding: var(--#{$prefix}modal-padding);
|
||||
padding: var(--modal-padding);
|
||||
}
|
||||
|
||||
// Footer (for actions)
|
||||
@@ -166,48 +166,48 @@
|
||||
flex-wrap: wrap;
|
||||
align-items: center; // vertically center
|
||||
justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
|
||||
padding: calc(var(--#{$prefix}modal-padding) - var(--#{$prefix}modal-footer-gap) * 0.5);
|
||||
background-color: var(--#{$prefix}modal-footer-bg);
|
||||
border-top: var(--#{$prefix}modal-footer-border-width) solid var(--#{$prefix}modal-footer-border-color);
|
||||
@include border-bottom-radius(var(--#{$prefix}modal-inner-border-radius));
|
||||
padding: calc(var(--modal-padding) - var(--modal-footer-gap) * 0.5);
|
||||
background-color: var(--modal-footer-bg);
|
||||
border-top: var(--modal-footer-border-width) solid var(--modal-footer-border-color);
|
||||
@include border-bottom-radius(var(--modal-inner-border-radius));
|
||||
|
||||
// Place margin between footer elements
|
||||
// This solution is far from ideal because of the universal selector usage,
|
||||
// but is needed to fix https://github.com/twbs/bootstrap/issues/24800
|
||||
> * {
|
||||
margin: calc(var(--#{$prefix}modal-footer-gap) * 0.5); // Todo in v6: replace with gap on parent class
|
||||
margin: calc(var(--modal-footer-gap) * 0.5); // Todo in v6: replace with gap on parent class
|
||||
}
|
||||
}
|
||||
|
||||
// Scale up the modal
|
||||
@include media-breakpoint-up(sm) {
|
||||
.modal {
|
||||
--#{$prefix}modal-margin: #{$modal-dialog-margin-y-sm-up};
|
||||
--#{$prefix}modal-box-shadow: #{$modal-content-box-shadow-sm-up};
|
||||
--modal-margin: #{$modal-dialog-margin-y-sm-up};
|
||||
--modal-box-shadow: #{$modal-content-box-shadow-sm-up};
|
||||
}
|
||||
|
||||
// Automatically set modal's width for larger viewports
|
||||
.modal-dialog {
|
||||
max-width: var(--#{$prefix}modal-width);
|
||||
max-width: var(--modal-width);
|
||||
margin-inline-end: auto;
|
||||
margin-inline-start: auto;
|
||||
}
|
||||
|
||||
.modal-sm {
|
||||
--#{$prefix}modal-width: #{$modal-sm};
|
||||
--modal-width: #{$modal-sm};
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
.modal-lg,
|
||||
.modal-xl {
|
||||
--#{$prefix}modal-width: #{$modal-lg};
|
||||
--modal-width: #{$modal-lg};
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(xl) {
|
||||
.modal-xl {
|
||||
--#{$prefix}modal-width: #{$modal-xl};
|
||||
--modal-width: #{$modal-xl};
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -7,13 +7,13 @@
|
||||
|
||||
.nav {
|
||||
// scss-docs-start nav-css-vars
|
||||
--#{$prefix}nav-link-padding-x: #{$nav-link-padding-x};
|
||||
--#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
|
||||
@include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
|
||||
--#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
|
||||
--#{$prefix}nav-link-color: #{$nav-link-color};
|
||||
--#{$prefix}nav-link-hover-color: #{$nav-link-hover-color};
|
||||
--#{$prefix}nav-link-disabled-color: #{$nav-link-disabled-color};
|
||||
--nav-link-padding-x: #{$nav-link-padding-x};
|
||||
--nav-link-padding-y: #{$nav-link-padding-y};
|
||||
@include rfs($nav-link-font-size, --nav-link-font-size);
|
||||
--nav-link-font-weight: #{$nav-link-font-weight};
|
||||
--nav-link-color: #{$nav-link-color};
|
||||
--nav-link-hover-color: #{$nav-link-hover-color};
|
||||
--nav-link-disabled-color: #{$nav-link-disabled-color};
|
||||
// scss-docs-end nav-css-vars
|
||||
|
||||
display: flex;
|
||||
@@ -25,10 +25,10 @@
|
||||
|
||||
.nav-link {
|
||||
display: block;
|
||||
padding: var(--#{$prefix}nav-link-padding-y) var(--#{$prefix}nav-link-padding-x);
|
||||
@include font-size(var(--#{$prefix}nav-link-font-size));
|
||||
font-weight: var(--#{$prefix}nav-link-font-weight);
|
||||
color: var(--#{$prefix}nav-link-color);
|
||||
padding: var(--nav-link-padding-y) var(--nav-link-padding-x);
|
||||
@include font-size(var(--nav-link-font-size));
|
||||
font-weight: var(--nav-link-font-weight);
|
||||
color: var(--nav-link-color);
|
||||
text-decoration: if(sass($link-decoration == none): null; else: none);
|
||||
background: none;
|
||||
border: 0;
|
||||
@@ -36,7 +36,7 @@
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: var(--#{$prefix}nav-link-hover-color);
|
||||
color: var(--nav-link-hover-color);
|
||||
text-decoration: if(sass($link-hover-decoration == underline): none; else: null);
|
||||
}
|
||||
|
||||
@@ -48,7 +48,7 @@
|
||||
// Disabled state lightens text
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
color: var(--#{$prefix}nav-link-disabled-color);
|
||||
color: var(--nav-link-disabled-color);
|
||||
pointer-events: none;
|
||||
cursor: default;
|
||||
}
|
||||
@@ -60,40 +60,40 @@
|
||||
|
||||
.nav-tabs {
|
||||
// scss-docs-start nav-tabs-css-vars
|
||||
--#{$prefix}nav-tabs-border-width: #{$nav-tabs-border-width};
|
||||
--#{$prefix}nav-tabs-border-color: #{$nav-tabs-border-color};
|
||||
--#{$prefix}nav-tabs-border-radius: #{$nav-tabs-border-radius};
|
||||
--#{$prefix}nav-tabs-link-hover-border-color: #{$nav-tabs-link-hover-border-color};
|
||||
--#{$prefix}nav-tabs-link-active-color: #{$nav-tabs-link-active-color};
|
||||
--#{$prefix}nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg};
|
||||
--#{$prefix}nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color};
|
||||
--nav-tabs-border-width: #{$nav-tabs-border-width};
|
||||
--nav-tabs-border-color: #{$nav-tabs-border-color};
|
||||
--nav-tabs-border-radius: #{$nav-tabs-border-radius};
|
||||
--nav-tabs-link-hover-border-color: #{$nav-tabs-link-hover-border-color};
|
||||
--nav-tabs-link-active-color: #{$nav-tabs-link-active-color};
|
||||
--nav-tabs-link-active-bg: #{$nav-tabs-link-active-bg};
|
||||
--nav-tabs-link-active-border-color: #{$nav-tabs-link-active-border-color};
|
||||
// scss-docs-end nav-tabs-css-vars
|
||||
|
||||
border-bottom: var(--#{$prefix}nav-tabs-border-width) solid var(--#{$prefix}nav-tabs-border-color);
|
||||
border-bottom: var(--nav-tabs-border-width) solid var(--nav-tabs-border-color);
|
||||
|
||||
.nav-link {
|
||||
margin-bottom: calc(-1 * var(--#{$prefix}nav-tabs-border-width)); // stylelint-disable-line function-disallowed-list
|
||||
border: var(--#{$prefix}nav-tabs-border-width) solid transparent;
|
||||
@include border-top-radius(var(--#{$prefix}nav-tabs-border-radius));
|
||||
margin-bottom: calc(-1 * var(--nav-tabs-border-width)); // stylelint-disable-line function-disallowed-list
|
||||
border: var(--nav-tabs-border-width) solid transparent;
|
||||
@include border-top-radius(var(--nav-tabs-border-radius));
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
// Prevents active .nav-link tab overlapping focus outline of previous/next .nav-link
|
||||
isolation: isolate;
|
||||
border-color: var(--#{$prefix}nav-tabs-link-hover-border-color);
|
||||
border-color: var(--nav-tabs-link-hover-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link.active,
|
||||
.nav-item.show .nav-link {
|
||||
color: var(--#{$prefix}nav-tabs-link-active-color);
|
||||
background-color: var(--#{$prefix}nav-tabs-link-active-bg);
|
||||
border-color: var(--#{$prefix}nav-tabs-link-active-border-color);
|
||||
color: var(--nav-tabs-link-active-color);
|
||||
background-color: var(--nav-tabs-link-active-bg);
|
||||
border-color: var(--nav-tabs-link-active-border-color);
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
// Make dropdown border overlap tab border
|
||||
margin-top: calc(-1 * var(--#{$prefix}nav-tabs-border-width)); // stylelint-disable-line function-disallowed-list
|
||||
margin-top: calc(-1 * var(--nav-tabs-border-width)); // stylelint-disable-line function-disallowed-list
|
||||
// Remove the top rounded corners here since there is a hard edge above the menu
|
||||
@include border-top-radius(0);
|
||||
}
|
||||
@@ -105,19 +105,19 @@
|
||||
|
||||
.nav-pills {
|
||||
// scss-docs-start nav-pills-css-vars
|
||||
--#{$prefix}nav-pills-border-radius: #{$nav-pills-border-radius};
|
||||
--#{$prefix}nav-pills-link-active-color: #{$nav-pills-link-active-color};
|
||||
--#{$prefix}nav-pills-link-active-bg: #{$nav-pills-link-active-bg};
|
||||
--nav-pills-border-radius: #{$nav-pills-border-radius};
|
||||
--nav-pills-link-active-color: #{$nav-pills-link-active-color};
|
||||
--nav-pills-link-active-bg: #{$nav-pills-link-active-bg};
|
||||
// scss-docs-end nav-pills-css-vars
|
||||
|
||||
.nav-link {
|
||||
@include border-radius(var(--#{$prefix}nav-pills-border-radius));
|
||||
@include border-radius(var(--nav-pills-border-radius));
|
||||
}
|
||||
|
||||
.nav-link.active,
|
||||
.show > .nav-link {
|
||||
color: var(--#{$prefix}nav-pills-link-active-color);
|
||||
@include gradient-bg(var(--#{$prefix}nav-pills-link-active-bg));
|
||||
color: var(--nav-pills-link-active-color);
|
||||
@include gradient-bg(var(--nav-pills-link-active-bg));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -127,17 +127,17 @@
|
||||
|
||||
.nav-underline {
|
||||
// scss-docs-start nav-underline-css-vars
|
||||
--#{$prefix}nav-underline-gap: #{$nav-underline-gap};
|
||||
--#{$prefix}nav-underline-border-width: #{$nav-underline-border-width};
|
||||
--#{$prefix}nav-underline-link-active-color: #{$nav-underline-link-active-color};
|
||||
--nav-underline-gap: #{$nav-underline-gap};
|
||||
--nav-underline-border-width: #{$nav-underline-border-width};
|
||||
--nav-underline-link-active-color: #{$nav-underline-link-active-color};
|
||||
// scss-docs-end nav-underline-css-vars
|
||||
|
||||
gap: var(--#{$prefix}nav-underline-gap);
|
||||
gap: var(--nav-underline-gap);
|
||||
|
||||
.nav-link {
|
||||
padding-inline-end: 0;
|
||||
padding-inline-start: 0;
|
||||
border-bottom: var(--#{$prefix}nav-underline-border-width) solid transparent;
|
||||
border-bottom: var(--nav-underline-border-width) solid transparent;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
@@ -148,7 +148,7 @@
|
||||
.nav-link.active,
|
||||
.show > .nav-link {
|
||||
font-weight: $font-weight-bold;
|
||||
color: var(--#{$prefix}nav-underline-link-active-color);
|
||||
color: var(--nav-underline-link-active-color);
|
||||
border-bottom-color: currentcolor;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,26 +9,26 @@
|
||||
|
||||
.navbar {
|
||||
// scss-docs-start navbar-css-vars
|
||||
--#{$prefix}navbar-padding-x: #{if(sass($navbar-padding-x == null): 0; else: $navbar-padding-x)};
|
||||
--#{$prefix}navbar-padding-y: #{$navbar-padding-y};
|
||||
--#{$prefix}navbar-color: #{$navbar-light-color};
|
||||
--#{$prefix}navbar-hover-color: #{$navbar-light-hover-color};
|
||||
--#{$prefix}navbar-disabled-color: #{$navbar-light-disabled-color};
|
||||
--#{$prefix}navbar-active-color: #{$navbar-light-active-color};
|
||||
--#{$prefix}navbar-brand-padding-y: #{$navbar-brand-padding-y};
|
||||
--#{$prefix}navbar-brand-margin-end: #{$navbar-brand-margin-end};
|
||||
--#{$prefix}navbar-brand-font-size: #{$navbar-brand-font-size};
|
||||
--#{$prefix}navbar-brand-color: #{$navbar-light-brand-color};
|
||||
--#{$prefix}navbar-brand-hover-color: #{$navbar-light-brand-hover-color};
|
||||
--#{$prefix}navbar-nav-link-padding-x: #{$navbar-nav-link-padding-x};
|
||||
--#{$prefix}navbar-toggler-padding-y: #{$navbar-toggler-padding-y};
|
||||
--#{$prefix}navbar-toggler-padding-x: #{$navbar-toggler-padding-x};
|
||||
--#{$prefix}navbar-toggler-font-size: #{$navbar-toggler-font-size};
|
||||
--#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
|
||||
--#{$prefix}navbar-toggler-border-color: #{$navbar-light-toggler-border-color};
|
||||
--#{$prefix}navbar-toggler-border-radius: #{$navbar-toggler-border-radius};
|
||||
--#{$prefix}navbar-toggler-focus-width: #{$navbar-toggler-focus-width};
|
||||
--#{$prefix}navbar-toggler-transition: #{$navbar-toggler-transition};
|
||||
--navbar-padding-x: #{if(sass($navbar-padding-x == null): 0; else: $navbar-padding-x)};
|
||||
--navbar-padding-y: #{$navbar-padding-y};
|
||||
--navbar-color: #{$navbar-light-color};
|
||||
--navbar-hover-color: #{$navbar-light-hover-color};
|
||||
--navbar-disabled-color: #{$navbar-light-disabled-color};
|
||||
--navbar-active-color: #{$navbar-light-active-color};
|
||||
--navbar-brand-padding-y: #{$navbar-brand-padding-y};
|
||||
--navbar-brand-margin-end: #{$navbar-brand-margin-end};
|
||||
--navbar-brand-font-size: #{$navbar-brand-font-size};
|
||||
--navbar-brand-color: #{$navbar-light-brand-color};
|
||||
--navbar-brand-hover-color: #{$navbar-light-brand-hover-color};
|
||||
--navbar-nav-link-padding-x: #{$navbar-nav-link-padding-x};
|
||||
--navbar-toggler-padding-y: #{$navbar-toggler-padding-y};
|
||||
--navbar-toggler-padding-x: #{$navbar-toggler-padding-x};
|
||||
--navbar-toggler-font-size: #{$navbar-toggler-font-size};
|
||||
--navbar-toggler-icon-bg: #{escape-svg($navbar-light-toggler-icon-bg)};
|
||||
--navbar-toggler-border-color: #{$navbar-light-toggler-border-color};
|
||||
--navbar-toggler-border-radius: #{$navbar-toggler-border-radius};
|
||||
--navbar-toggler-focus-width: #{$navbar-toggler-focus-width};
|
||||
--navbar-toggler-transition: #{$navbar-toggler-transition};
|
||||
// scss-docs-end navbar-css-vars
|
||||
|
||||
position: relative;
|
||||
@@ -36,7 +36,7 @@
|
||||
flex-wrap: wrap; // allow us to do the line break for collapsing content
|
||||
align-items: center;
|
||||
justify-content: space-between; // space out brand from logo
|
||||
padding: var(--#{$prefix}navbar-padding-y) var(--#{$prefix}navbar-padding-x);
|
||||
padding: var(--navbar-padding-y) var(--navbar-padding-x);
|
||||
@include gradient-bg();
|
||||
|
||||
// Because flex properties aren't inherited, we need to redeclare these first
|
||||
@@ -66,17 +66,17 @@
|
||||
// Used for brand, project, or site names.
|
||||
|
||||
.navbar-brand {
|
||||
padding-top: var(--#{$prefix}navbar-brand-padding-y);
|
||||
padding-bottom: var(--#{$prefix}navbar-brand-padding-y);
|
||||
margin-inline-end: var(--#{$prefix}navbar-brand-margin-end);
|
||||
@include font-size(var(--#{$prefix}navbar-brand-font-size));
|
||||
color: var(--#{$prefix}navbar-brand-color);
|
||||
padding-top: var(--navbar-brand-padding-y);
|
||||
padding-bottom: var(--navbar-brand-padding-y);
|
||||
margin-inline-end: var(--navbar-brand-margin-end);
|
||||
@include font-size(var(--navbar-brand-font-size));
|
||||
color: var(--navbar-brand-color);
|
||||
text-decoration: if(sass($link-decoration == none): null; else: none);
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: var(--#{$prefix}navbar-brand-hover-color);
|
||||
color: var(--navbar-brand-hover-color);
|
||||
text-decoration: if(sass($link-hover-decoration == underline): none; else: null);
|
||||
}
|
||||
}
|
||||
@@ -87,13 +87,13 @@
|
||||
|
||||
.navbar-nav {
|
||||
// scss-docs-start navbar-nav-css-vars
|
||||
--#{$prefix}nav-link-padding-x: 0;
|
||||
--#{$prefix}nav-link-padding-y: #{$nav-link-padding-y};
|
||||
@include rfs($nav-link-font-size, --#{$prefix}nav-link-font-size);
|
||||
--#{$prefix}nav-link-font-weight: #{$nav-link-font-weight};
|
||||
--#{$prefix}nav-link-color: var(--#{$prefix}navbar-color);
|
||||
--#{$prefix}nav-link-hover-color: var(--#{$prefix}navbar-hover-color);
|
||||
--#{$prefix}nav-link-disabled-color: var(--#{$prefix}navbar-disabled-color);
|
||||
--nav-link-padding-x: 0;
|
||||
--nav-link-padding-y: #{$nav-link-padding-y};
|
||||
@include rfs($nav-link-font-size, --nav-link-font-size);
|
||||
--nav-link-font-weight: #{$nav-link-font-weight};
|
||||
--nav-link-color: var(--navbar-color);
|
||||
--nav-link-hover-color: var(--navbar-hover-color);
|
||||
--nav-link-disabled-color: var(--navbar-disabled-color);
|
||||
// scss-docs-end navbar-nav-css-vars
|
||||
|
||||
display: flex;
|
||||
@@ -105,7 +105,7 @@
|
||||
.nav-link {
|
||||
&.active,
|
||||
&.show {
|
||||
color: var(--#{$prefix}navbar-active-color);
|
||||
color: var(--navbar-active-color);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -121,12 +121,12 @@
|
||||
.navbar-text {
|
||||
padding-top: $nav-link-padding-y;
|
||||
padding-bottom: $nav-link-padding-y;
|
||||
color: var(--#{$prefix}navbar-color);
|
||||
color: var(--navbar-color);
|
||||
|
||||
a,
|
||||
a:hover,
|
||||
a:focus {
|
||||
color: var(--#{$prefix}navbar-active-color);
|
||||
color: var(--navbar-active-color);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -148,14 +148,14 @@
|
||||
|
||||
// Button for toggling the navbar when in its collapsed state
|
||||
.navbar-toggler {
|
||||
padding: var(--#{$prefix}navbar-toggler-padding-y) var(--#{$prefix}navbar-toggler-padding-x);
|
||||
@include font-size(var(--#{$prefix}navbar-toggler-font-size));
|
||||
padding: var(--navbar-toggler-padding-y) var(--navbar-toggler-padding-x);
|
||||
@include font-size(var(--navbar-toggler-font-size));
|
||||
line-height: 1;
|
||||
color: var(--#{$prefix}navbar-color);
|
||||
color: var(--navbar-color);
|
||||
background-color: transparent; // remove default button style
|
||||
border: var(--#{$prefix}border-width) solid var(--#{$prefix}navbar-toggler-border-color); // remove default button style
|
||||
@include border-radius(var(--#{$prefix}navbar-toggler-border-radius));
|
||||
@include transition(var(--#{$prefix}navbar-toggler-transition));
|
||||
border: var(--border-width) solid var(--navbar-toggler-border-color); // remove default button style
|
||||
@include border-radius(var(--navbar-toggler-border-radius));
|
||||
@include transition(var(--navbar-toggler-transition));
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
@@ -164,7 +164,7 @@
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
outline: 0;
|
||||
box-shadow: 0 0 0 var(--#{$prefix}navbar-toggler-focus-width);
|
||||
box-shadow: 0 0 0 var(--navbar-toggler-focus-width);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -175,14 +175,14 @@
|
||||
width: 1.5em;
|
||||
height: 1.5em;
|
||||
vertical-align: middle;
|
||||
background-image: var(--#{$prefix}navbar-toggler-icon-bg);
|
||||
background-image: var(--navbar-toggler-icon-bg);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
.navbar-nav-scroll {
|
||||
max-height: var(--#{$prefix}scroll-height, 75vh);
|
||||
max-height: var(--scroll-height, 75vh);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
@@ -208,8 +208,8 @@
|
||||
}
|
||||
|
||||
.nav-link {
|
||||
padding-inline-end: var(--#{$prefix}navbar-nav-link-padding-x);
|
||||
padding-inline-start: var(--#{$prefix}navbar-nav-link-padding-x);
|
||||
padding-inline-end: var(--navbar-nav-link-padding-x);
|
||||
padding-inline-start: var(--navbar-nav-link-padding-x);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -270,21 +270,21 @@
|
||||
.navbar[data-bs-theme='dark'],
|
||||
.navbar[data-theme='dark'] {
|
||||
// scss-docs-start navbar-dark-css-vars
|
||||
--#{$prefix}navbar-color: #{$navbar-dark-color};
|
||||
--#{$prefix}navbar-hover-color: #{$navbar-dark-hover-color};
|
||||
--#{$prefix}navbar-disabled-color: #{$navbar-dark-disabled-color};
|
||||
--#{$prefix}navbar-active-color: #{$navbar-dark-active-color};
|
||||
--#{$prefix}navbar-brand-color: #{$navbar-dark-brand-color};
|
||||
--#{$prefix}navbar-brand-hover-color: #{$navbar-dark-brand-hover-color};
|
||||
--#{$prefix}navbar-toggler-border-color: #{$navbar-dark-toggler-border-color};
|
||||
--#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
|
||||
--navbar-color: #{$navbar-dark-color};
|
||||
--navbar-hover-color: #{$navbar-dark-hover-color};
|
||||
--navbar-disabled-color: #{$navbar-dark-disabled-color};
|
||||
--navbar-active-color: #{$navbar-dark-active-color};
|
||||
--navbar-brand-color: #{$navbar-dark-brand-color};
|
||||
--navbar-brand-hover-color: #{$navbar-dark-brand-hover-color};
|
||||
--navbar-toggler-border-color: #{$navbar-dark-toggler-border-color};
|
||||
--navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
|
||||
// scss-docs-end navbar-dark-css-vars
|
||||
}
|
||||
|
||||
@if $enable-dark-mode {
|
||||
@include color-mode(dark) {
|
||||
.navbar-toggler-icon {
|
||||
--#{$prefix}navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
|
||||
--navbar-toggler-icon-bg: #{escape-svg($navbar-dark-toggler-icon-bg)};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,18 +6,18 @@
|
||||
|
||||
%offcanvas-css-vars {
|
||||
// scss-docs-start offcanvas-css-vars
|
||||
--#{$prefix}offcanvas-zindex: #{$zindex-offcanvas};
|
||||
--#{$prefix}offcanvas-width: #{$offcanvas-horizontal-width};
|
||||
--#{$prefix}offcanvas-height: #{$offcanvas-vertical-height};
|
||||
--#{$prefix}offcanvas-padding-x: #{$offcanvas-padding-x};
|
||||
--#{$prefix}offcanvas-padding-y: #{$offcanvas-padding-y};
|
||||
--#{$prefix}offcanvas-color: #{$offcanvas-color};
|
||||
--#{$prefix}offcanvas-bg: #{$offcanvas-bg-color};
|
||||
--#{$prefix}offcanvas-border-width: #{$offcanvas-border-width};
|
||||
--#{$prefix}offcanvas-border-color: #{$offcanvas-border-color};
|
||||
--#{$prefix}offcanvas-box-shadow: #{$offcanvas-box-shadow};
|
||||
--#{$prefix}offcanvas-transition: #{transform $offcanvas-transition-duration ease-in-out};
|
||||
--#{$prefix}offcanvas-title-line-height: #{$offcanvas-title-line-height};
|
||||
--offcanvas-zindex: #{$zindex-offcanvas};
|
||||
--offcanvas-width: #{$offcanvas-horizontal-width};
|
||||
--offcanvas-height: #{$offcanvas-vertical-height};
|
||||
--offcanvas-padding-x: #{$offcanvas-padding-x};
|
||||
--offcanvas-padding-y: #{$offcanvas-padding-y};
|
||||
--offcanvas-color: #{$offcanvas-color};
|
||||
--offcanvas-bg: #{$offcanvas-bg-color};
|
||||
--offcanvas-border-width: #{$offcanvas-border-width};
|
||||
--offcanvas-border-color: #{$offcanvas-border-color};
|
||||
--offcanvas-box-shadow: #{$offcanvas-box-shadow};
|
||||
--offcanvas-transition: #{transform $offcanvas-transition-duration ease-in-out};
|
||||
--offcanvas-title-line-height: #{$offcanvas-title-line-height};
|
||||
// scss-docs-end offcanvas-css-vars
|
||||
}
|
||||
|
||||
@@ -38,50 +38,50 @@
|
||||
@include media-breakpoint-down($next) {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
z-index: var(--#{$prefix}offcanvas-zindex);
|
||||
z-index: var(--offcanvas-zindex);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-width: 100%;
|
||||
color: var(--#{$prefix}offcanvas-color);
|
||||
color: var(--offcanvas-color);
|
||||
visibility: hidden;
|
||||
background-color: var(--#{$prefix}offcanvas-bg);
|
||||
background-color: var(--offcanvas-bg);
|
||||
background-clip: padding-box;
|
||||
outline: 0;
|
||||
@include box-shadow(var(--#{$prefix}offcanvas-box-shadow));
|
||||
@include transition(var(--#{$prefix}offcanvas-transition));
|
||||
@include box-shadow(var(--offcanvas-box-shadow));
|
||||
@include transition(var(--offcanvas-transition));
|
||||
|
||||
&.offcanvas-start {
|
||||
top: 0;
|
||||
inset-inline-start: 0;
|
||||
width: var(--#{$prefix}offcanvas-width);
|
||||
border-inline-end: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
|
||||
width: var(--offcanvas-width);
|
||||
border-inline-end: var(--offcanvas-border-width) solid var(--offcanvas-border-color);
|
||||
/*rtl:ignore*/
|
||||
transform: translateX(calc(var(--#{$prefix}dir) * -100%));
|
||||
transform: translateX(calc(var(--dir) * -100%));
|
||||
}
|
||||
|
||||
&.offcanvas-end {
|
||||
top: 0;
|
||||
inset-inline-end: 0;
|
||||
width: var(--#{$prefix}offcanvas-width);
|
||||
border-inline-start: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
|
||||
width: var(--offcanvas-width);
|
||||
border-inline-start: var(--offcanvas-border-width) solid var(--offcanvas-border-color);
|
||||
/*rtl:ignore*/
|
||||
transform: translateX(calc(var(--#{$prefix}dir) * 100%));
|
||||
transform: translateX(calc(var(--dir) * 100%));
|
||||
}
|
||||
|
||||
&.offcanvas-top {
|
||||
top: 0;
|
||||
inset-inline: 0;
|
||||
height: var(--#{$prefix}offcanvas-height);
|
||||
height: var(--offcanvas-height);
|
||||
max-height: 100%;
|
||||
border-bottom: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
|
||||
border-bottom: var(--offcanvas-border-width) solid var(--offcanvas-border-color);
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
|
||||
&.offcanvas-bottom {
|
||||
inset-inline: 0;
|
||||
height: var(--#{$prefix}offcanvas-height);
|
||||
height: var(--offcanvas-height);
|
||||
max-height: 100%;
|
||||
border-top: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
|
||||
border-top: var(--offcanvas-border-width) solid var(--offcanvas-border-color);
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
@@ -99,8 +99,8 @@
|
||||
|
||||
@if not($infix == '') {
|
||||
@include media-breakpoint-up($next) {
|
||||
--#{$prefix}offcanvas-height: auto;
|
||||
--#{$prefix}offcanvas-border-width: 0;
|
||||
--offcanvas-height: auto;
|
||||
--offcanvas-border-width: 0;
|
||||
background-color: transparent !important; // stylelint-disable-line declaration-no-important
|
||||
|
||||
.offcanvas-header {
|
||||
@@ -127,25 +127,25 @@
|
||||
.offcanvas-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: var(--#{$prefix}offcanvas-padding-y) var(--#{$prefix}offcanvas-padding-x);
|
||||
padding: var(--offcanvas-padding-y) var(--offcanvas-padding-x);
|
||||
|
||||
.btn-close {
|
||||
padding: calc(var(--#{$prefix}offcanvas-padding-y) * 0.5) calc(var(--#{$prefix}offcanvas-padding-x) * 0.5);
|
||||
padding: calc(var(--offcanvas-padding-y) * 0.5) calc(var(--offcanvas-padding-x) * 0.5);
|
||||
// Split properties to avoid invalid calc() function if value is 0
|
||||
margin-top: calc(-0.5 * var(--#{$prefix}offcanvas-padding-y));
|
||||
margin-inline-end: calc(-0.5 * var(--#{$prefix}offcanvas-padding-x));
|
||||
margin-bottom: calc(-0.5 * var(--#{$prefix}offcanvas-padding-y));
|
||||
margin-top: calc(-0.5 * var(--offcanvas-padding-y));
|
||||
margin-inline-end: calc(-0.5 * var(--offcanvas-padding-x));
|
||||
margin-bottom: calc(-0.5 * var(--offcanvas-padding-y));
|
||||
margin-inline-start: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.offcanvas-title {
|
||||
margin-bottom: 0;
|
||||
line-height: var(--#{$prefix}offcanvas-title-line-height);
|
||||
line-height: var(--offcanvas-title-line-height);
|
||||
}
|
||||
|
||||
.offcanvas-body {
|
||||
flex-grow: 1;
|
||||
padding: var(--#{$prefix}offcanvas-padding-y) var(--#{$prefix}offcanvas-padding-x);
|
||||
padding: var(--offcanvas-padding-y) var(--offcanvas-padding-x);
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
@@ -2,26 +2,26 @@
|
||||
|
||||
.pagination {
|
||||
// scss-docs-start pagination-css-vars
|
||||
--#{$prefix}pagination-padding-x: #{$pagination-padding-x};
|
||||
--#{$prefix}pagination-padding-y: #{$pagination-padding-y};
|
||||
@include rfs($pagination-font-size, --#{$prefix}pagination-font-size);
|
||||
--#{$prefix}pagination-color: #{$pagination-color};
|
||||
--#{$prefix}pagination-bg: #{$pagination-bg};
|
||||
--#{$prefix}pagination-border-width: #{$pagination-border-width};
|
||||
--#{$prefix}pagination-border-color: #{$pagination-border-color};
|
||||
--#{$prefix}pagination-border-radius: #{$pagination-border-radius};
|
||||
--#{$prefix}pagination-hover-color: #{$pagination-hover-color};
|
||||
--#{$prefix}pagination-hover-bg: #{$pagination-hover-bg};
|
||||
--#{$prefix}pagination-hover-border-color: #{$pagination-hover-border-color};
|
||||
--#{$prefix}pagination-focus-color: #{$pagination-focus-color};
|
||||
--#{$prefix}pagination-focus-bg: #{$pagination-focus-bg};
|
||||
--#{$prefix}pagination-focus-box-shadow: #{$pagination-focus-box-shadow};
|
||||
--#{$prefix}pagination-active-color: #{$pagination-active-color};
|
||||
--#{$prefix}pagination-active-bg: #{$pagination-active-bg};
|
||||
--#{$prefix}pagination-active-border-color: #{$pagination-active-border-color};
|
||||
--#{$prefix}pagination-disabled-color: #{$pagination-disabled-color};
|
||||
--#{$prefix}pagination-disabled-bg: #{$pagination-disabled-bg};
|
||||
--#{$prefix}pagination-disabled-border-color: #{$pagination-disabled-border-color};
|
||||
--pagination-padding-x: #{$pagination-padding-x};
|
||||
--pagination-padding-y: #{$pagination-padding-y};
|
||||
@include rfs($pagination-font-size, --pagination-font-size);
|
||||
--pagination-color: #{$pagination-color};
|
||||
--pagination-bg: #{$pagination-bg};
|
||||
--pagination-border-width: #{$pagination-border-width};
|
||||
--pagination-border-color: #{$pagination-border-color};
|
||||
--pagination-border-radius: #{$pagination-border-radius};
|
||||
--pagination-hover-color: #{$pagination-hover-color};
|
||||
--pagination-hover-bg: #{$pagination-hover-bg};
|
||||
--pagination-hover-border-color: #{$pagination-hover-border-color};
|
||||
--pagination-focus-color: #{$pagination-focus-color};
|
||||
--pagination-focus-bg: #{$pagination-focus-bg};
|
||||
--pagination-focus-box-shadow: #{$pagination-focus-box-shadow};
|
||||
--pagination-active-color: #{$pagination-active-color};
|
||||
--pagination-active-bg: #{$pagination-active-bg};
|
||||
--pagination-active-border-color: #{$pagination-active-border-color};
|
||||
--pagination-disabled-color: #{$pagination-disabled-color};
|
||||
--pagination-disabled-bg: #{$pagination-disabled-bg};
|
||||
--pagination-disabled-border-color: #{$pagination-disabled-border-color};
|
||||
// scss-docs-end pagination-css-vars
|
||||
|
||||
display: flex;
|
||||
@@ -31,44 +31,44 @@
|
||||
.page-link {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: var(--#{$prefix}pagination-padding-y) var(--#{$prefix}pagination-padding-x);
|
||||
@include font-size(var(--#{$prefix}pagination-font-size));
|
||||
color: var(--#{$prefix}pagination-color);
|
||||
padding: var(--pagination-padding-y) var(--pagination-padding-x);
|
||||
@include font-size(var(--pagination-font-size));
|
||||
color: var(--pagination-color);
|
||||
text-decoration: if(sass($link-decoration == none): null; else: none);
|
||||
background-color: var(--#{$prefix}pagination-bg);
|
||||
border: var(--#{$prefix}pagination-border-width) solid var(--#{$prefix}pagination-border-color);
|
||||
background-color: var(--pagination-bg);
|
||||
border: var(--pagination-border-width) solid var(--pagination-border-color);
|
||||
@include transition($pagination-transition);
|
||||
|
||||
&:hover {
|
||||
z-index: 2;
|
||||
color: var(--#{$prefix}pagination-hover-color);
|
||||
color: var(--pagination-hover-color);
|
||||
text-decoration: if(sass($link-hover-decoration == underline): none; else: null);
|
||||
background-color: var(--#{$prefix}pagination-hover-bg);
|
||||
border-color: var(--#{$prefix}pagination-hover-border-color);
|
||||
background-color: var(--pagination-hover-bg);
|
||||
border-color: var(--pagination-hover-border-color);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
z-index: 3;
|
||||
color: var(--#{$prefix}pagination-focus-color);
|
||||
background-color: var(--#{$prefix}pagination-focus-bg);
|
||||
color: var(--pagination-focus-color);
|
||||
background-color: var(--pagination-focus-bg);
|
||||
outline: $pagination-focus-outline;
|
||||
box-shadow: var(--#{$prefix}pagination-focus-box-shadow);
|
||||
box-shadow: var(--pagination-focus-box-shadow);
|
||||
}
|
||||
|
||||
&.active,
|
||||
.active > & {
|
||||
z-index: 3;
|
||||
color: var(--#{$prefix}pagination-active-color);
|
||||
@include gradient-bg(var(--#{$prefix}pagination-active-bg));
|
||||
border-color: var(--#{$prefix}pagination-active-border-color);
|
||||
color: var(--pagination-active-color);
|
||||
@include gradient-bg(var(--pagination-active-bg));
|
||||
border-color: var(--pagination-active-border-color);
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
.disabled > & {
|
||||
color: var(--#{$prefix}pagination-disabled-color);
|
||||
color: var(--pagination-disabled-color);
|
||||
pointer-events: none;
|
||||
background-color: var(--#{$prefix}pagination-disabled-bg);
|
||||
border-color: var(--#{$prefix}pagination-disabled-border-color);
|
||||
background-color: var(--pagination-disabled-bg);
|
||||
border-color: var(--pagination-disabled-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -80,19 +80,19 @@
|
||||
@if $pagination-margin-start == calc(-1 * #{$pagination-border-width}) {
|
||||
&:first-child {
|
||||
.page-link {
|
||||
@include border-start-radius(var(--#{$prefix}pagination-border-radius));
|
||||
@include border-start-radius(var(--pagination-border-radius));
|
||||
}
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
.page-link {
|
||||
@include border-end-radius(var(--#{$prefix}pagination-border-radius));
|
||||
@include border-end-radius(var(--pagination-border-radius));
|
||||
}
|
||||
}
|
||||
} @else {
|
||||
// Add border-radius to all pageLinks in case they have left margin
|
||||
.page-link {
|
||||
@include border-radius(var(--#{$prefix}pagination-border-radius));
|
||||
@include border-radius(var(--pagination-border-radius));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,47 +2,47 @@
|
||||
|
||||
.popover {
|
||||
// scss-docs-start popover-css-vars
|
||||
--#{$prefix}popover-zindex: #{$zindex-popover};
|
||||
--#{$prefix}popover-max-width: #{$popover-max-width};
|
||||
@include rfs($popover-font-size, --#{$prefix}popover-font-size);
|
||||
--#{$prefix}popover-bg: #{$popover-bg};
|
||||
--#{$prefix}popover-border-width: #{$popover-border-width};
|
||||
--#{$prefix}popover-border-color: #{$popover-border-color};
|
||||
--#{$prefix}popover-border-radius: #{$popover-border-radius};
|
||||
--#{$prefix}popover-inner-border-radius: #{$popover-inner-border-radius};
|
||||
--#{$prefix}popover-box-shadow: #{$popover-box-shadow};
|
||||
--#{$prefix}popover-header-padding-x: #{$popover-header-padding-x};
|
||||
--#{$prefix}popover-header-padding-y: #{$popover-header-padding-y};
|
||||
@include rfs($popover-header-font-size, --#{$prefix}popover-header-font-size);
|
||||
--#{$prefix}popover-header-color: #{$popover-header-color};
|
||||
--#{$prefix}popover-header-bg: #{$popover-header-bg};
|
||||
--#{$prefix}popover-body-padding-x: #{$popover-body-padding-x};
|
||||
--#{$prefix}popover-body-padding-y: #{$popover-body-padding-y};
|
||||
--#{$prefix}popover-body-color: #{$popover-body-color};
|
||||
--#{$prefix}popover-arrow-width: #{$popover-arrow-width};
|
||||
--#{$prefix}popover-arrow-height: #{$popover-arrow-height};
|
||||
--#{$prefix}popover-arrow-border: var(--#{$prefix}popover-border-color);
|
||||
--popover-zindex: #{$zindex-popover};
|
||||
--popover-max-width: #{$popover-max-width};
|
||||
@include rfs($popover-font-size, --popover-font-size);
|
||||
--popover-bg: #{$popover-bg};
|
||||
--popover-border-width: #{$popover-border-width};
|
||||
--popover-border-color: #{$popover-border-color};
|
||||
--popover-border-radius: #{$popover-border-radius};
|
||||
--popover-inner-border-radius: #{$popover-inner-border-radius};
|
||||
--popover-box-shadow: #{$popover-box-shadow};
|
||||
--popover-header-padding-x: #{$popover-header-padding-x};
|
||||
--popover-header-padding-y: #{$popover-header-padding-y};
|
||||
@include rfs($popover-header-font-size, --popover-header-font-size);
|
||||
--popover-header-color: #{$popover-header-color};
|
||||
--popover-header-bg: #{$popover-header-bg};
|
||||
--popover-body-padding-x: #{$popover-body-padding-x};
|
||||
--popover-body-padding-y: #{$popover-body-padding-y};
|
||||
--popover-body-color: #{$popover-body-color};
|
||||
--popover-arrow-width: #{$popover-arrow-width};
|
||||
--popover-arrow-height: #{$popover-arrow-height};
|
||||
--popover-arrow-border: var(--popover-border-color);
|
||||
// scss-docs-end popover-css-vars
|
||||
|
||||
z-index: var(--#{$prefix}popover-zindex);
|
||||
z-index: var(--popover-zindex);
|
||||
display: block;
|
||||
max-width: var(--#{$prefix}popover-max-width);
|
||||
max-width: var(--popover-max-width);
|
||||
// Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
|
||||
// So reset our font and text properties to avoid inheriting weird values.
|
||||
@include reset-text();
|
||||
@include font-size(var(--#{$prefix}popover-font-size));
|
||||
@include font-size(var(--popover-font-size));
|
||||
// Allow breaking very long words so they don't overflow the popover's bounds
|
||||
word-wrap: break-word;
|
||||
background-color: var(--#{$prefix}popover-bg);
|
||||
background-color: var(--popover-bg);
|
||||
background-clip: padding-box;
|
||||
border: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-border-color);
|
||||
@include border-radius(var(--#{$prefix}popover-border-radius));
|
||||
@include box-shadow(var(--#{$prefix}popover-box-shadow));
|
||||
border: var(--popover-border-width) solid var(--popover-border-color);
|
||||
@include border-radius(var(--popover-border-radius));
|
||||
@include box-shadow(var(--popover-box-shadow));
|
||||
|
||||
.popover-arrow {
|
||||
display: block;
|
||||
width: var(--#{$prefix}popover-arrow-width);
|
||||
height: var(--#{$prefix}popover-arrow-height);
|
||||
width: var(--popover-arrow-width);
|
||||
height: var(--popover-arrow-height);
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
@@ -58,21 +58,21 @@
|
||||
|
||||
.bs-popover-top {
|
||||
> .popover-arrow {
|
||||
bottom: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
|
||||
bottom: calc(-1 * (var(--popover-arrow-height)) - var(--popover-border-width)); // stylelint-disable-line function-disallowed-list
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
border-width: var(--#{$prefix}popover-arrow-height) calc(var(--#{$prefix}popover-arrow-width) * 0.5) 0; // stylelint-disable-line function-disallowed-list
|
||||
border-width: var(--popover-arrow-height) calc(var(--popover-arrow-width) * 0.5) 0; // stylelint-disable-line function-disallowed-list
|
||||
}
|
||||
|
||||
&::before {
|
||||
bottom: 0;
|
||||
border-top-color: var(--#{$prefix}popover-arrow-border);
|
||||
border-top-color: var(--popover-arrow-border);
|
||||
}
|
||||
|
||||
&::after {
|
||||
bottom: var(--#{$prefix}popover-border-width);
|
||||
border-top-color: var(--#{$prefix}popover-bg);
|
||||
bottom: var(--popover-border-width);
|
||||
border-top-color: var(--popover-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -80,23 +80,23 @@
|
||||
/* rtl:begin:ignore */
|
||||
.bs-popover-end {
|
||||
> .popover-arrow {
|
||||
left: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
|
||||
width: var(--#{$prefix}popover-arrow-height);
|
||||
height: var(--#{$prefix}popover-arrow-width);
|
||||
left: calc(-1 * (var(--popover-arrow-height)) - var(--popover-border-width)); // stylelint-disable-line function-disallowed-list
|
||||
width: var(--popover-arrow-height);
|
||||
height: var(--popover-arrow-width);
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
border-width: calc(var(--#{$prefix}popover-arrow-width) * 0.5) var(--#{$prefix}popover-arrow-height) calc(var(--#{$prefix}popover-arrow-width) * 0.5) 0; // stylelint-disable-line function-disallowed-list
|
||||
border-width: calc(var(--popover-arrow-width) * 0.5) var(--popover-arrow-height) calc(var(--popover-arrow-width) * 0.5) 0; // stylelint-disable-line function-disallowed-list
|
||||
}
|
||||
|
||||
&::before {
|
||||
left: 0;
|
||||
border-right-color: var(--#{$prefix}popover-arrow-border);
|
||||
border-right-color: var(--popover-arrow-border);
|
||||
}
|
||||
|
||||
&::after {
|
||||
left: var(--#{$prefix}popover-border-width);
|
||||
border-right-color: var(--#{$prefix}popover-bg);
|
||||
left: var(--popover-border-width);
|
||||
border-right-color: var(--popover-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -105,21 +105,21 @@
|
||||
|
||||
.bs-popover-bottom {
|
||||
> .popover-arrow {
|
||||
top: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
|
||||
top: calc(-1 * (var(--popover-arrow-height)) - var(--popover-border-width)); // stylelint-disable-line function-disallowed-list
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
border-width: 0 calc(var(--#{$prefix}popover-arrow-width) * 0.5) var(--#{$prefix}popover-arrow-height); // stylelint-disable-line function-disallowed-list
|
||||
border-width: 0 calc(var(--popover-arrow-width) * 0.5) var(--popover-arrow-height); // stylelint-disable-line function-disallowed-list
|
||||
}
|
||||
|
||||
&::before {
|
||||
top: 0;
|
||||
border-bottom-color: var(--#{$prefix}popover-arrow-border);
|
||||
border-bottom-color: var(--popover-arrow-border);
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: var(--#{$prefix}popover-border-width);
|
||||
border-bottom-color: var(--#{$prefix}popover-bg);
|
||||
top: var(--popover-border-width);
|
||||
border-bottom-color: var(--popover-bg);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -129,33 +129,33 @@
|
||||
top: 0;
|
||||
inset-inline-start: 50%;
|
||||
display: block;
|
||||
width: var(--#{$prefix}popover-arrow-width);
|
||||
margin-inline-start: calc(-0.5 * var(--#{$prefix}popover-arrow-width)); // stylelint-disable-line function-disallowed-list
|
||||
width: var(--popover-arrow-width);
|
||||
margin-inline-start: calc(-0.5 * var(--popover-arrow-width)); // stylelint-disable-line function-disallowed-list
|
||||
content: '';
|
||||
border-bottom: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-header-bg);
|
||||
border-bottom: var(--popover-border-width) solid var(--popover-header-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/* rtl:begin:ignore */
|
||||
.bs-popover-start {
|
||||
> .popover-arrow {
|
||||
right: calc(-1 * (var(--#{$prefix}popover-arrow-height)) - var(--#{$prefix}popover-border-width)); // stylelint-disable-line function-disallowed-list
|
||||
width: var(--#{$prefix}popover-arrow-height);
|
||||
height: var(--#{$prefix}popover-arrow-width);
|
||||
right: calc(-1 * (var(--popover-arrow-height)) - var(--popover-border-width)); // stylelint-disable-line function-disallowed-list
|
||||
width: var(--popover-arrow-height);
|
||||
height: var(--popover-arrow-width);
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
border-width: calc(var(--#{$prefix}popover-arrow-width) * 0.5) 0 calc(var(--#{$prefix}popover-arrow-width) * 0.5) var(--#{$prefix}popover-arrow-height); // stylelint-disable-line function-disallowed-list
|
||||
border-width: calc(var(--popover-arrow-width) * 0.5) 0 calc(var(--popover-arrow-width) * 0.5) var(--popover-arrow-height); // stylelint-disable-line function-disallowed-list
|
||||
}
|
||||
|
||||
&::before {
|
||||
right: 0;
|
||||
border-left-color: var(--#{$prefix}popover-arrow-border);
|
||||
border-left-color: var(--popover-arrow-border);
|
||||
}
|
||||
|
||||
&::after {
|
||||
right: var(--#{$prefix}popover-border-width);
|
||||
border-left-color: var(--#{$prefix}popover-bg);
|
||||
right: var(--popover-border-width);
|
||||
border-left-color: var(--popover-bg);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -179,13 +179,13 @@
|
||||
|
||||
// Offset the popover to account for the popover arrow
|
||||
.popover-header {
|
||||
padding: var(--#{$prefix}popover-header-padding-y) var(--#{$prefix}popover-header-padding-x);
|
||||
padding: var(--popover-header-padding-y) var(--popover-header-padding-x);
|
||||
margin-bottom: 0; // Reset the default from Reboot
|
||||
@include font-size(var(--#{$prefix}popover-header-font-size));
|
||||
color: var(--#{$prefix}popover-header-color);
|
||||
background-color: var(--#{$prefix}popover-header-bg);
|
||||
border-bottom: var(--#{$prefix}popover-border-width) solid var(--#{$prefix}popover-border-color);
|
||||
@include border-top-radius(var(--#{$prefix}popover-inner-border-radius));
|
||||
@include font-size(var(--popover-header-font-size));
|
||||
color: var(--popover-header-color);
|
||||
background-color: var(--popover-header-bg);
|
||||
border-bottom: var(--popover-border-width) solid var(--popover-border-color);
|
||||
@include border-top-radius(var(--popover-inner-border-radius));
|
||||
|
||||
&:empty {
|
||||
display: none;
|
||||
@@ -193,6 +193,6 @@
|
||||
}
|
||||
|
||||
.popover-body {
|
||||
padding: var(--#{$prefix}popover-body-padding-y) var(--#{$prefix}popover-body-padding-x);
|
||||
color: var(--#{$prefix}popover-body-color);
|
||||
padding: var(--popover-body-padding-y) var(--popover-body-padding-x);
|
||||
color: var(--popover-body-color);
|
||||
}
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
@if $enable-transitions {
|
||||
@keyframes progress-bar-stripes {
|
||||
0% {
|
||||
background-position-x: var(--#{$prefix}progress-height);
|
||||
background-position-x: var(--progress-height);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -15,23 +15,23 @@
|
||||
.progress,
|
||||
.progress-stacked {
|
||||
// scss-docs-start progress-css-vars
|
||||
--#{$prefix}progress-height: #{$progress-height};
|
||||
@include rfs($progress-font-size, --#{$prefix}progress-font-size);
|
||||
--#{$prefix}progress-bg: #{$progress-bg};
|
||||
--#{$prefix}progress-border-radius: #{$progress-border-radius};
|
||||
--#{$prefix}progress-box-shadow: #{$progress-box-shadow};
|
||||
--#{$prefix}progress-bar-color: #{$progress-bar-color};
|
||||
--#{$prefix}progress-bar-bg: #{$progress-bar-bg};
|
||||
--#{$prefix}progress-bar-transition: #{$progress-bar-transition};
|
||||
--progress-height: #{$progress-height};
|
||||
@include rfs($progress-font-size, --progress-font-size);
|
||||
--progress-bg: #{$progress-bg};
|
||||
--progress-border-radius: #{$progress-border-radius};
|
||||
--progress-box-shadow: #{$progress-box-shadow};
|
||||
--progress-bar-color: #{$progress-bar-color};
|
||||
--progress-bar-bg: #{$progress-bar-bg};
|
||||
--progress-bar-transition: #{$progress-bar-transition};
|
||||
// scss-docs-end progress-css-vars
|
||||
|
||||
display: flex;
|
||||
height: var(--#{$prefix}progress-height);
|
||||
height: var(--progress-height);
|
||||
overflow: hidden; // force rounded corners by cropping it
|
||||
@include font-size(var(--#{$prefix}progress-font-size));
|
||||
background-color: var(--#{$prefix}progress-bg);
|
||||
@include border-radius(var(--#{$prefix}progress-border-radius));
|
||||
@include box-shadow(var(--#{$prefix}progress-box-shadow));
|
||||
@include font-size(var(--progress-font-size));
|
||||
background-color: var(--progress-bg);
|
||||
@include border-radius(var(--progress-border-radius));
|
||||
@include box-shadow(var(--progress-box-shadow));
|
||||
}
|
||||
|
||||
.progress-bar {
|
||||
@@ -39,16 +39,16 @@
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
color: var(--#{$prefix}progress-bar-color);
|
||||
color: var(--progress-bar-color);
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
background-color: var(--#{$prefix}progress-bar-bg);
|
||||
@include transition(var(--#{$prefix}progress-bar-transition));
|
||||
background-color: var(--progress-bar-bg);
|
||||
@include transition(var(--progress-bar-transition));
|
||||
}
|
||||
|
||||
.progress-bar-striped {
|
||||
@include gradient-striped();
|
||||
background-size: var(--#{$prefix}progress-height) var(--#{$prefix}progress-height);
|
||||
background-size: var(--progress-height) var(--progress-height);
|
||||
}
|
||||
|
||||
.progress-stacked > .progress {
|
||||
|
||||
@@ -26,7 +26,7 @@
|
||||
|
||||
:root {
|
||||
@if $font-size-root != null {
|
||||
@include font-size(var(--#{$prefix}root-font-size));
|
||||
@include font-size(var(--root-font-size));
|
||||
}
|
||||
|
||||
@if $enable-smooth-scroll {
|
||||
@@ -46,13 +46,13 @@
|
||||
// scss-docs-start reboot-body-rules
|
||||
body {
|
||||
margin: 0; // 1
|
||||
font-family: var(--#{$prefix}body-font-family);
|
||||
@include font-size(var(--#{$prefix}body-font-size));
|
||||
font-weight: var(--#{$prefix}body-font-weight);
|
||||
line-height: var(--#{$prefix}body-line-height);
|
||||
color: var(--#{$prefix}body-color);
|
||||
text-align: var(--#{$prefix}body-text-align);
|
||||
background-color: var(--#{$prefix}body-bg); // 2
|
||||
font-family: var(--body-font-family);
|
||||
@include font-size(var(--body-font-size));
|
||||
font-weight: var(--body-font-weight);
|
||||
line-height: var(--body-line-height);
|
||||
color: var(--body-color);
|
||||
text-align: var(--body-text-align);
|
||||
background-color: var(--body-bg); // 2
|
||||
-webkit-text-size-adjust: 100%; // 3
|
||||
-webkit-tap-highlight-color: rgba($black, 0); // 4
|
||||
}
|
||||
@@ -83,7 +83,7 @@ hr {
|
||||
font-style: $headings-font-style;
|
||||
font-weight: $headings-font-weight;
|
||||
line-height: $headings-line-height;
|
||||
color: var(--#{$prefix}heading-color);
|
||||
color: var(--heading-color);
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -205,8 +205,8 @@ small {
|
||||
|
||||
mark {
|
||||
padding: $mark-padding;
|
||||
color: var(--#{$prefix}highlight-color);
|
||||
background-color: var(--#{$prefix}highlight-bg);
|
||||
color: var(--highlight-color);
|
||||
background-color: var(--highlight-bg);
|
||||
}
|
||||
|
||||
// Sub and Sup
|
||||
@@ -232,11 +232,11 @@ sup {
|
||||
// Links
|
||||
|
||||
a {
|
||||
color: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-opacity, 1));
|
||||
color: rgba(var(--link-color-rgb), var(--link-opacity, 1));
|
||||
text-decoration: $link-decoration;
|
||||
|
||||
&:hover {
|
||||
--#{$prefix}link-color-rgb: var(--#{$prefix}link-hover-color-rgb);
|
||||
--link-color-rgb: var(--link-hover-color-rgb);
|
||||
text-decoration: $link-hover-decoration;
|
||||
}
|
||||
}
|
||||
@@ -286,7 +286,7 @@ pre {
|
||||
|
||||
code {
|
||||
@include font-size($code-font-size);
|
||||
color: var(--#{$prefix}code-color);
|
||||
color: var(--code-color);
|
||||
word-wrap: break-word;
|
||||
|
||||
// Streamline the style when inside anchors to avoid broken underline and more
|
||||
|
||||
@@ -13,144 +13,144 @@
|
||||
// Generate palettes for full colors, grays, and theme colors.
|
||||
|
||||
@each $color, $value in $colors {
|
||||
--#{$prefix}#{$color}: #{$value};
|
||||
--#{$color}: #{$value};
|
||||
}
|
||||
|
||||
@each $color, $value in $grays {
|
||||
--#{$prefix}gray-#{$color}: #{$value};
|
||||
--gray-#{$color}: #{$value};
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors {
|
||||
--#{$prefix}#{$color}: #{$value};
|
||||
--#{$color}: #{$value};
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors-rgb {
|
||||
--#{$prefix}#{$color}-rgb: #{$value};
|
||||
--#{$color}-rgb: #{$value};
|
||||
}
|
||||
|
||||
// $theme-colors-*-dark maps are only populated when $enable-dark-mode is true (see _maps.scss)
|
||||
@if $enable-dark-mode {
|
||||
@each $color, $value in $theme-colors-text {
|
||||
--#{$prefix}#{$color}-text-emphasis: light-dark(#{$value}, #{map.get($theme-colors-text-dark, $color)});
|
||||
--#{$color}-text-emphasis: light-dark(#{$value}, #{map.get($theme-colors-text-dark, $color)});
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors-bg-subtle {
|
||||
--#{$prefix}#{$color}-bg-subtle: light-dark(#{$value}, #{map.get($theme-colors-bg-subtle-dark, $color)});
|
||||
--#{$color}-bg-subtle: light-dark(#{$value}, #{map.get($theme-colors-bg-subtle-dark, $color)});
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors-border-subtle {
|
||||
--#{$prefix}#{$color}-border-subtle: light-dark(#{$value}, #{map.get($theme-colors-border-subtle-dark, $color)});
|
||||
--#{$color}-border-subtle: light-dark(#{$value}, #{map.get($theme-colors-border-subtle-dark, $color)});
|
||||
}
|
||||
} @else {
|
||||
@each $color, $value in $theme-colors-text {
|
||||
--#{$prefix}#{$color}-text-emphasis: #{$value};
|
||||
--#{$color}-text-emphasis: #{$value};
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors-bg-subtle {
|
||||
--#{$prefix}#{$color}-bg-subtle: #{$value};
|
||||
--#{$color}-bg-subtle: #{$value};
|
||||
}
|
||||
|
||||
@each $color, $value in $theme-colors-border-subtle {
|
||||
--#{$prefix}#{$color}-border-subtle: #{$value};
|
||||
--#{$color}-border-subtle: #{$value};
|
||||
}
|
||||
}
|
||||
|
||||
--#{$prefix}white-rgb: #{to-rgb($white)};
|
||||
--#{$prefix}black-rgb: #{to-rgb($black)};
|
||||
--white-rgb: #{to-rgb($white)};
|
||||
--black-rgb: #{to-rgb($black)};
|
||||
|
||||
// Fonts
|
||||
|
||||
// Note: Use `inspect` for lists so that quoted items keep the quotes.
|
||||
// See https://github.com/sass/sass/issues/2383#issuecomment-336349172
|
||||
--#{$prefix}font-sans-serif: #{meta.inspect($font-family-sans-serif)};
|
||||
--#{$prefix}font-monospace: #{meta.inspect($font-family-monospace)};
|
||||
--#{$prefix}gradient: #{$gradient};
|
||||
--font-sans-serif: #{meta.inspect($font-family-sans-serif)};
|
||||
--font-monospace: #{meta.inspect($font-family-monospace)};
|
||||
--gradient: #{$gradient};
|
||||
|
||||
// Root and body
|
||||
// scss-docs-start root-body-variables
|
||||
@if $font-size-root != null {
|
||||
--#{$prefix}root-font-size: #{$font-size-root};
|
||||
--root-font-size: #{$font-size-root};
|
||||
}
|
||||
--#{$prefix}body-font-family: #{meta.inspect($font-family-base)};
|
||||
@include rfs($font-size-base, --#{$prefix}body-font-size);
|
||||
--#{$prefix}body-font-weight: #{$font-weight-base};
|
||||
--#{$prefix}body-line-height: #{$line-height-base};
|
||||
--body-font-family: #{meta.inspect($font-family-base)};
|
||||
@include rfs($font-size-base, --body-font-size);
|
||||
--body-font-weight: #{$font-weight-base};
|
||||
--body-line-height: #{$line-height-base};
|
||||
@if $body-text-align != null {
|
||||
--#{$prefix}body-text-align: #{$body-text-align};
|
||||
--body-text-align: #{$body-text-align};
|
||||
}
|
||||
|
||||
--#{$prefix}body-color: light-dark(#{$body-color}, #{$body-color-dark});
|
||||
--#{$prefix}body-color-rgb: #{to-rgb($body-color)};
|
||||
--#{$prefix}body-bg: light-dark(#{$body-bg}, #{$body-bg-dark});
|
||||
--#{$prefix}body-bg-rgb: #{to-rgb($body-bg)};
|
||||
--body-color: light-dark(#{$body-color}, #{$body-color-dark});
|
||||
--body-color-rgb: #{to-rgb($body-color)};
|
||||
--body-bg: light-dark(#{$body-bg}, #{$body-bg-dark});
|
||||
--body-bg-rgb: #{to-rgb($body-bg)};
|
||||
|
||||
--#{$prefix}emphasis-color: light-dark(#{$body-emphasis-color}, #{$body-emphasis-color-dark});
|
||||
--#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color)};
|
||||
--emphasis-color: light-dark(#{$body-emphasis-color}, #{$body-emphasis-color-dark});
|
||||
--emphasis-color-rgb: #{to-rgb($body-emphasis-color)};
|
||||
|
||||
--#{$prefix}secondary-color: light-dark(#{$body-secondary-color}, #{$body-secondary-color-dark});
|
||||
--#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color)};
|
||||
--#{$prefix}secondary-bg: light-dark(#{$body-secondary-bg}, #{$body-secondary-bg-dark});
|
||||
--#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg)};
|
||||
--secondary-color: light-dark(#{$body-secondary-color}, #{$body-secondary-color-dark});
|
||||
--secondary-color-rgb: #{to-rgb($body-secondary-color)};
|
||||
--secondary-bg: light-dark(#{$body-secondary-bg}, #{$body-secondary-bg-dark});
|
||||
--secondary-bg-rgb: #{to-rgb($body-secondary-bg)};
|
||||
|
||||
--#{$prefix}tertiary-color: light-dark(#{$body-tertiary-color}, #{$body-tertiary-color-dark});
|
||||
--#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color)};
|
||||
--#{$prefix}tertiary-bg: light-dark(#{$body-tertiary-bg}, #{$body-tertiary-bg-dark});
|
||||
--#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg)};
|
||||
--tertiary-color: light-dark(#{$body-tertiary-color}, #{$body-tertiary-color-dark});
|
||||
--tertiary-color-rgb: #{to-rgb($body-tertiary-color)};
|
||||
--tertiary-bg: light-dark(#{$body-tertiary-bg}, #{$body-tertiary-bg-dark});
|
||||
--tertiary-bg-rgb: #{to-rgb($body-tertiary-bg)};
|
||||
// scss-docs-end root-body-variables
|
||||
|
||||
// $headings-color is itself light-dark(gray-900, white); the dark-mode block below
|
||||
// overrides it to `inherit`, which can't be expressed as a light-dark() branch.
|
||||
--#{$prefix}heading-color: #{$headings-color};
|
||||
--heading-color: #{$headings-color};
|
||||
|
||||
--#{$prefix}link-color: light-dark(#{$link-color}, #{$link-color-dark});
|
||||
--#{$prefix}link-color-rgb: #{to-rgb($link-color)};
|
||||
--#{$prefix}link-decoration: #{$link-decoration};
|
||||
--link-color: light-dark(#{$link-color}, #{$link-color-dark});
|
||||
--link-color-rgb: #{to-rgb($link-color)};
|
||||
--link-decoration: #{$link-decoration};
|
||||
|
||||
--#{$prefix}link-hover-color: light-dark(#{$link-hover-color}, #{$link-hover-color-dark});
|
||||
--#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color)};
|
||||
--link-hover-color: light-dark(#{$link-hover-color}, #{$link-hover-color-dark});
|
||||
--link-hover-color-rgb: #{to-rgb($link-hover-color)};
|
||||
|
||||
@if $link-hover-decoration != null {
|
||||
--#{$prefix}link-hover-decoration: #{$link-hover-decoration};
|
||||
--link-hover-decoration: #{$link-hover-decoration};
|
||||
}
|
||||
|
||||
// $code-color is itself light-dark(gray-600, gray-400); layout/_root.scss re-declares
|
||||
// --code-color afterwards and is the one that actually wins in the compiled cascade.
|
||||
--#{$prefix}code-color: #{$code-color};
|
||||
--#{$prefix}highlight-color: light-dark(#{$mark-color}, #{$mark-color-dark});
|
||||
--#{$prefix}highlight-bg: light-dark(#{$mark-bg}, #{$mark-bg-dark});
|
||||
--code-color: #{$code-color};
|
||||
--highlight-color: light-dark(#{$mark-color}, #{$mark-color-dark});
|
||||
--highlight-bg: light-dark(#{$mark-bg}, #{$mark-bg-dark});
|
||||
|
||||
// scss-docs-start root-border-var
|
||||
--#{$prefix}border-width: #{$border-width};
|
||||
--#{$prefix}border-style: #{$border-style};
|
||||
--#{$prefix}border-color: light-dark(#{$border-color}, #{$border-color-dark});
|
||||
--#{$prefix}border-color-translucent: light-dark(#{$border-color-translucent}, #{$border-color-translucent-dark});
|
||||
--border-width: #{$border-width};
|
||||
--border-style: #{$border-style};
|
||||
--border-color: light-dark(#{$border-color}, #{$border-color-dark});
|
||||
--border-color-translucent: light-dark(#{$border-color-translucent}, #{$border-color-translucent-dark});
|
||||
|
||||
--#{$prefix}border-radius: #{$border-radius};
|
||||
--#{$prefix}border-radius-sm: #{$border-radius-sm};
|
||||
--#{$prefix}border-radius-lg: #{$border-radius-lg};
|
||||
--#{$prefix}border-radius-xl: #{$border-radius-xl};
|
||||
--#{$prefix}border-radius-xxl: #{$border-radius-xxl};
|
||||
--#{$prefix}border-radius-2xl: var(--#{$prefix}border-radius-xxl); // Deprecated in v5.3.0 for consistency
|
||||
--#{$prefix}border-radius-pill: #{$border-radius-pill};
|
||||
--border-radius: #{$border-radius};
|
||||
--border-radius-sm: #{$border-radius-sm};
|
||||
--border-radius-lg: #{$border-radius-lg};
|
||||
--border-radius-xl: #{$border-radius-xl};
|
||||
--border-radius-xxl: #{$border-radius-xxl};
|
||||
--border-radius-2xl: var(--border-radius-xxl); // Deprecated in v5.3.0 for consistency
|
||||
--border-radius-pill: #{$border-radius-pill};
|
||||
// scss-docs-end root-border-var
|
||||
|
||||
--#{$prefix}box-shadow: #{$box-shadow};
|
||||
--#{$prefix}box-shadow-sm: #{$box-shadow-sm};
|
||||
--#{$prefix}box-shadow-lg: #{$box-shadow-lg};
|
||||
--#{$prefix}box-shadow-inset: #{$box-shadow-inset};
|
||||
--box-shadow: #{$box-shadow};
|
||||
--box-shadow-sm: #{$box-shadow-sm};
|
||||
--box-shadow-lg: #{$box-shadow-lg};
|
||||
--box-shadow-inset: #{$box-shadow-inset};
|
||||
|
||||
// Focus styles
|
||||
// scss-docs-start root-focus-variables
|
||||
--#{$prefix}focus-ring-width: #{$focus-ring-width};
|
||||
--#{$prefix}focus-ring-opacity: #{$focus-ring-opacity};
|
||||
--#{$prefix}focus-ring-color: #{$focus-ring-color};
|
||||
--focus-ring-width: #{$focus-ring-width};
|
||||
--focus-ring-opacity: #{$focus-ring-opacity};
|
||||
--focus-ring-color: #{$focus-ring-color};
|
||||
// scss-docs-end root-focus-variables
|
||||
|
||||
// scss-docs-start root-form-validation-variables
|
||||
--#{$prefix}form-valid-color: light-dark(#{$form-valid-color}, #{$form-valid-color-dark});
|
||||
--#{$prefix}form-valid-border-color: light-dark(#{$form-valid-border-color}, #{$form-valid-border-color-dark});
|
||||
--#{$prefix}form-invalid-color: light-dark(#{$form-invalid-color}, #{$form-invalid-color-dark});
|
||||
--#{$prefix}form-invalid-border-color: light-dark(#{$form-invalid-border-color}, #{$form-invalid-border-color-dark});
|
||||
--form-valid-color: light-dark(#{$form-valid-color}, #{$form-valid-color-dark});
|
||||
--form-valid-border-color: light-dark(#{$form-valid-border-color}, #{$form-valid-border-color-dark});
|
||||
--form-invalid-color: light-dark(#{$form-invalid-color}, #{$form-invalid-color-dark});
|
||||
--form-invalid-border-color: light-dark(#{$form-invalid-border-color}, #{$form-invalid-border-color-dark});
|
||||
// scss-docs-end root-form-validation-variables
|
||||
}
|
||||
|
||||
@@ -158,18 +158,18 @@
|
||||
@include color-mode(dark, true) {
|
||||
// scss-docs-start root-dark-mode-vars
|
||||
// -rgb triplets and non-color overrides can't be expressed inside light-dark(), so they stay here.
|
||||
--#{$prefix}body-color-rgb: #{to-rgb($body-color-dark)};
|
||||
--#{$prefix}body-bg-rgb: #{to-rgb($body-bg-dark)};
|
||||
--#{$prefix}emphasis-color-rgb: #{to-rgb($body-emphasis-color-dark)};
|
||||
--#{$prefix}secondary-color-rgb: #{to-rgb($body-secondary-color-dark)};
|
||||
--#{$prefix}secondary-bg-rgb: #{to-rgb($body-secondary-bg-dark)};
|
||||
--#{$prefix}tertiary-color-rgb: #{to-rgb($body-tertiary-color-dark)};
|
||||
--#{$prefix}tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};
|
||||
--body-color-rgb: #{to-rgb($body-color-dark)};
|
||||
--body-bg-rgb: #{to-rgb($body-bg-dark)};
|
||||
--emphasis-color-rgb: #{to-rgb($body-emphasis-color-dark)};
|
||||
--secondary-color-rgb: #{to-rgb($body-secondary-color-dark)};
|
||||
--secondary-bg-rgb: #{to-rgb($body-secondary-bg-dark)};
|
||||
--tertiary-color-rgb: #{to-rgb($body-tertiary-color-dark)};
|
||||
--tertiary-bg-rgb: #{to-rgb($body-tertiary-bg-dark)};
|
||||
|
||||
--#{$prefix}heading-color: #{$headings-color-dark};
|
||||
--heading-color: #{$headings-color-dark};
|
||||
|
||||
--#{$prefix}link-color-rgb: #{to-rgb($link-color-dark)};
|
||||
--#{$prefix}link-hover-color-rgb: #{to-rgb($link-hover-color-dark)};
|
||||
--link-color-rgb: #{to-rgb($link-color-dark)};
|
||||
--link-hover-color-rgb: #{to-rgb($link-hover-color-dark)};
|
||||
// scss-docs-end root-dark-mode-vars
|
||||
}
|
||||
}
|
||||
|
||||
@@ -8,12 +8,12 @@
|
||||
.spinner-border {
|
||||
display: inline-block;
|
||||
flex-shrink: 0;
|
||||
width: var(--#{$prefix}spinner-width);
|
||||
height: var(--#{$prefix}spinner-height);
|
||||
vertical-align: var(--#{$prefix}spinner-vertical-align);
|
||||
width: var(--spinner-width);
|
||||
height: var(--spinner-height);
|
||||
vertical-align: var(--spinner-vertical-align);
|
||||
// stylelint-disable-next-line property-disallowed-list
|
||||
border-radius: 50%;
|
||||
animation: var(--#{$prefix}spinner-animation-speed) linear infinite var(--#{$prefix}spinner-animation-name);
|
||||
animation: var(--spinner-animation-speed) linear infinite var(--spinner-animation-name);
|
||||
}
|
||||
|
||||
// scss-docs-start spinner-border-keyframes
|
||||
@@ -26,23 +26,23 @@
|
||||
|
||||
.spinner-border {
|
||||
// scss-docs-start spinner-border-css-vars
|
||||
--#{$prefix}spinner-width: #{$spinner-width};
|
||||
--#{$prefix}spinner-height: #{$spinner-height};
|
||||
--#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
|
||||
--#{$prefix}spinner-border-width: #{$spinner-border-width};
|
||||
--#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
|
||||
--#{$prefix}spinner-animation-name: spinner-border;
|
||||
--spinner-width: #{$spinner-width};
|
||||
--spinner-height: #{$spinner-height};
|
||||
--spinner-vertical-align: #{$spinner-vertical-align};
|
||||
--spinner-border-width: #{$spinner-border-width};
|
||||
--spinner-animation-speed: #{$spinner-animation-speed};
|
||||
--spinner-animation-name: spinner-border;
|
||||
// scss-docs-end spinner-border-css-vars
|
||||
|
||||
border: var(--#{$prefix}spinner-border-width) solid currentcolor;
|
||||
border: var(--spinner-border-width) solid currentcolor;
|
||||
border-right-color: transparent;
|
||||
}
|
||||
|
||||
.spinner-border-sm {
|
||||
// scss-docs-start spinner-border-sm-css-vars
|
||||
--#{$prefix}spinner-width: #{$spinner-width-sm};
|
||||
--#{$prefix}spinner-height: #{$spinner-height-sm};
|
||||
--#{$prefix}spinner-border-width: #{$spinner-border-width-sm};
|
||||
--spinner-width: #{$spinner-width-sm};
|
||||
--spinner-height: #{$spinner-height-sm};
|
||||
--spinner-border-width: #{$spinner-border-width-sm};
|
||||
// scss-docs-end spinner-border-sm-css-vars
|
||||
}
|
||||
|
||||
@@ -64,11 +64,11 @@
|
||||
|
||||
.spinner-grow {
|
||||
// scss-docs-start spinner-grow-css-vars
|
||||
--#{$prefix}spinner-width: #{$spinner-width};
|
||||
--#{$prefix}spinner-height: #{$spinner-height};
|
||||
--#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
|
||||
--#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
|
||||
--#{$prefix}spinner-animation-name: spinner-grow;
|
||||
--spinner-width: #{$spinner-width};
|
||||
--spinner-height: #{$spinner-height};
|
||||
--spinner-vertical-align: #{$spinner-vertical-align};
|
||||
--spinner-animation-speed: #{$spinner-animation-speed};
|
||||
--spinner-animation-name: spinner-grow;
|
||||
// scss-docs-end spinner-grow-css-vars
|
||||
|
||||
background-color: currentcolor;
|
||||
@@ -76,15 +76,15 @@
|
||||
}
|
||||
|
||||
.spinner-grow-sm {
|
||||
--#{$prefix}spinner-width: #{$spinner-width-sm};
|
||||
--#{$prefix}spinner-height: #{$spinner-height-sm};
|
||||
--spinner-width: #{$spinner-width-sm};
|
||||
--spinner-height: #{$spinner-height-sm};
|
||||
}
|
||||
|
||||
@if $enable-reduced-motion {
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.spinner-border,
|
||||
.spinner-grow {
|
||||
--#{$prefix}spinner-animation-speed: #{$spinner-animation-speed * 2};
|
||||
--spinner-animation-speed: #{$spinner-animation-speed * 2};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -8,26 +8,26 @@
|
||||
|
||||
.table {
|
||||
// Reset needed for nesting tables
|
||||
--#{$prefix}table-color-type: initial;
|
||||
--#{$prefix}table-bg-type: initial;
|
||||
--#{$prefix}table-color-state: initial;
|
||||
--#{$prefix}table-bg-state: initial;
|
||||
--table-color-type: initial;
|
||||
--table-bg-type: initial;
|
||||
--table-color-state: initial;
|
||||
--table-bg-state: initial;
|
||||
// End of reset
|
||||
--#{$prefix}table-color: #{$table-color};
|
||||
--#{$prefix}table-bg: #{$table-bg};
|
||||
--#{$prefix}table-border-color: #{$table-border-color};
|
||||
--#{$prefix}table-accent-bg: #{$table-accent-bg};
|
||||
--#{$prefix}table-striped-color: #{$table-striped-color};
|
||||
--#{$prefix}table-striped-bg: #{$table-striped-bg};
|
||||
--#{$prefix}table-active-color: #{$table-active-color};
|
||||
--#{$prefix}table-active-bg: #{$table-active-bg};
|
||||
--#{$prefix}table-hover-color: #{$table-hover-color};
|
||||
--#{$prefix}table-hover-bg: #{$table-hover-bg};
|
||||
--table-color: #{$table-color};
|
||||
--table-bg: #{$table-bg};
|
||||
--table-border-color: #{$table-border-color};
|
||||
--table-accent-bg: #{$table-accent-bg};
|
||||
--table-striped-color: #{$table-striped-color};
|
||||
--table-striped-bg: #{$table-striped-bg};
|
||||
--table-active-color: #{$table-active-color};
|
||||
--table-active-bg: #{$table-active-bg};
|
||||
--table-hover-color: #{$table-hover-color};
|
||||
--table-hover-bg: #{$table-hover-bg};
|
||||
|
||||
width: 100%;
|
||||
margin-bottom: $spacer;
|
||||
vertical-align: $table-cell-vertical-align;
|
||||
border-color: var(--#{$prefix}table-border-color);
|
||||
border-color: var(--table-border-color);
|
||||
|
||||
// Target th & td
|
||||
// We need the child combinator to prevent styles leaking to nested tables which doesn't have a `.table` class.
|
||||
@@ -37,10 +37,10 @@
|
||||
> :not(caption) > * > * {
|
||||
padding: $table-cell-padding-y $table-cell-padding-x;
|
||||
// Following the precept of cascades: https://codepen.io/miriamsuzanne/full/vYNgodb
|
||||
color: var(--#{$prefix}table-color-state, var(--#{$prefix}table-color-type, var(--#{$prefix}table-color)));
|
||||
background-color: var(--#{$prefix}table-bg);
|
||||
color: var(--table-color-state, var(--table-color-type, var(--table-color)));
|
||||
background-color: var(--table-bg);
|
||||
border-bottom-width: $table-border-width;
|
||||
box-shadow: inset 0 0 0 9999px var(--#{$prefix}table-bg-state, var(--#{$prefix}table-bg-type, var(--#{$prefix}table-accent-bg)));
|
||||
box-shadow: inset 0 0 0 9999px var(--table-bg-state, var(--table-bg-type, var(--table-accent-bg)));
|
||||
}
|
||||
|
||||
> tbody {
|
||||
@@ -113,16 +113,16 @@
|
||||
// For rows
|
||||
.table-striped {
|
||||
> tbody > tr:nth-of-type(#{$table-striped-order}) > * {
|
||||
--#{$prefix}table-color-type: var(--#{$prefix}table-striped-color);
|
||||
--#{$prefix}table-bg-type: var(--#{$prefix}table-striped-bg);
|
||||
--table-color-type: var(--table-striped-color);
|
||||
--table-bg-type: var(--table-striped-bg);
|
||||
}
|
||||
}
|
||||
|
||||
// For columns
|
||||
.table-striped-columns {
|
||||
> :not(caption) > tr > :nth-child(#{$table-striped-columns-order}) {
|
||||
--#{$prefix}table-color-type: var(--#{$prefix}table-striped-color);
|
||||
--#{$prefix}table-bg-type: var(--#{$prefix}table-striped-bg);
|
||||
--table-color-type: var(--table-striped-color);
|
||||
--table-bg-type: var(--table-striped-bg);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -131,8 +131,8 @@
|
||||
// The `.table-active` class can be added to highlight rows or cells
|
||||
|
||||
.table-active {
|
||||
--#{$prefix}table-color-state: var(--#{$prefix}table-active-color);
|
||||
--#{$prefix}table-bg-state: var(--#{$prefix}table-active-bg);
|
||||
--table-color-state: var(--table-active-color);
|
||||
--table-bg-state: var(--table-active-bg);
|
||||
}
|
||||
|
||||
// Hover effect
|
||||
@@ -141,8 +141,8 @@
|
||||
|
||||
.table-hover {
|
||||
> tbody > tr:hover > * {
|
||||
--#{$prefix}table-color-state: var(--#{$prefix}table-hover-color);
|
||||
--#{$prefix}table-bg-state: var(--#{$prefix}table-hover-bg);
|
||||
--table-color-state: var(--table-hover-color);
|
||||
--table-bg-state: var(--table-hover-bg);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -2,33 +2,33 @@
|
||||
|
||||
.toast {
|
||||
// scss-docs-start toast-css-vars
|
||||
--#{$prefix}toast-zindex: #{$zindex-toast};
|
||||
--#{$prefix}toast-padding-x: #{$toast-padding-x};
|
||||
--#{$prefix}toast-padding-y: #{$toast-padding-y};
|
||||
--#{$prefix}toast-spacing: #{$toast-spacing};
|
||||
--#{$prefix}toast-max-width: #{$toast-max-width};
|
||||
@include rfs($toast-font-size, --#{$prefix}toast-font-size);
|
||||
--#{$prefix}toast-color: #{$toast-color};
|
||||
--#{$prefix}toast-bg: #{$toast-background-color};
|
||||
--#{$prefix}toast-border-width: #{$toast-border-width};
|
||||
--#{$prefix}toast-border-color: #{$toast-border-color};
|
||||
--#{$prefix}toast-border-radius: #{$toast-border-radius};
|
||||
--#{$prefix}toast-box-shadow: #{$toast-box-shadow};
|
||||
--#{$prefix}toast-header-color: #{$toast-header-color};
|
||||
--#{$prefix}toast-header-bg: #{$toast-header-background-color};
|
||||
--#{$prefix}toast-header-border-color: #{$toast-header-border-color};
|
||||
--toast-zindex: #{$zindex-toast};
|
||||
--toast-padding-x: #{$toast-padding-x};
|
||||
--toast-padding-y: #{$toast-padding-y};
|
||||
--toast-spacing: #{$toast-spacing};
|
||||
--toast-max-width: #{$toast-max-width};
|
||||
@include rfs($toast-font-size, --toast-font-size);
|
||||
--toast-color: #{$toast-color};
|
||||
--toast-bg: #{$toast-background-color};
|
||||
--toast-border-width: #{$toast-border-width};
|
||||
--toast-border-color: #{$toast-border-color};
|
||||
--toast-border-radius: #{$toast-border-radius};
|
||||
--toast-box-shadow: #{$toast-box-shadow};
|
||||
--toast-header-color: #{$toast-header-color};
|
||||
--toast-header-bg: #{$toast-header-background-color};
|
||||
--toast-header-border-color: #{$toast-header-border-color};
|
||||
// scss-docs-end toast-css-vars
|
||||
|
||||
width: var(--#{$prefix}toast-max-width);
|
||||
width: var(--toast-max-width);
|
||||
max-width: 100%;
|
||||
@include font-size(var(--#{$prefix}toast-font-size));
|
||||
color: var(--#{$prefix}toast-color);
|
||||
@include font-size(var(--toast-font-size));
|
||||
color: var(--toast-color);
|
||||
pointer-events: auto;
|
||||
background-color: var(--#{$prefix}toast-bg);
|
||||
background-color: var(--toast-bg);
|
||||
background-clip: padding-box;
|
||||
border: var(--#{$prefix}toast-border-width) solid var(--#{$prefix}toast-border-color);
|
||||
box-shadow: var(--#{$prefix}toast-box-shadow);
|
||||
@include border-radius(var(--#{$prefix}toast-border-radius));
|
||||
border: var(--toast-border-width) solid var(--toast-border-color);
|
||||
box-shadow: var(--toast-box-shadow);
|
||||
@include border-radius(var(--toast-border-radius));
|
||||
|
||||
&.showing {
|
||||
opacity: 0;
|
||||
@@ -40,36 +40,36 @@
|
||||
}
|
||||
|
||||
.toast-container {
|
||||
--#{$prefix}toast-zindex: #{$zindex-toast};
|
||||
--toast-zindex: #{$zindex-toast};
|
||||
|
||||
position: absolute;
|
||||
z-index: var(--#{$prefix}toast-zindex);
|
||||
z-index: var(--toast-zindex);
|
||||
width: max-content;
|
||||
max-width: 100%;
|
||||
pointer-events: none;
|
||||
|
||||
> :not(:last-child) {
|
||||
margin-bottom: var(--#{$prefix}toast-spacing);
|
||||
margin-bottom: var(--toast-spacing);
|
||||
}
|
||||
}
|
||||
|
||||
.toast-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: var(--#{$prefix}toast-padding-y) var(--#{$prefix}toast-padding-x);
|
||||
color: var(--#{$prefix}toast-header-color);
|
||||
background-color: var(--#{$prefix}toast-header-bg);
|
||||
padding: var(--toast-padding-y) var(--toast-padding-x);
|
||||
color: var(--toast-header-color);
|
||||
background-color: var(--toast-header-bg);
|
||||
background-clip: padding-box;
|
||||
border-bottom: var(--#{$prefix}toast-border-width) solid var(--#{$prefix}toast-header-border-color);
|
||||
@include border-top-radius(calc(var(--#{$prefix}toast-border-radius) - var(--#{$prefix}toast-border-width)));
|
||||
border-bottom: var(--toast-border-width) solid var(--toast-header-border-color);
|
||||
@include border-top-radius(calc(var(--toast-border-radius) - var(--toast-border-width)));
|
||||
|
||||
.btn-close {
|
||||
margin-inline-end: calc(-0.5 * var(--#{$prefix}toast-padding-x)); // stylelint-disable-line function-disallowed-list
|
||||
margin-inline-start: var(--#{$prefix}toast-padding-x);
|
||||
margin-inline-end: calc(-0.5 * var(--toast-padding-x)); // stylelint-disable-line function-disallowed-list
|
||||
margin-inline-start: var(--toast-padding-x);
|
||||
}
|
||||
}
|
||||
|
||||
.toast-body {
|
||||
padding: var(--#{$prefix}toast-padding-x);
|
||||
padding: var(--toast-padding-x);
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
@@ -3,40 +3,40 @@
|
||||
|
||||
.tooltip {
|
||||
// scss-docs-start tooltip-css-vars
|
||||
--#{$prefix}tooltip-zindex: #{$zindex-tooltip};
|
||||
--#{$prefix}tooltip-max-width: #{$tooltip-max-width};
|
||||
--#{$prefix}tooltip-padding-x: #{$tooltip-padding-x};
|
||||
--#{$prefix}tooltip-padding-y: #{$tooltip-padding-y};
|
||||
--#{$prefix}tooltip-margin: #{$tooltip-margin};
|
||||
@include rfs($tooltip-font-size, --#{$prefix}tooltip-font-size);
|
||||
--#{$prefix}tooltip-color: #{$tooltip-color};
|
||||
--#{$prefix}tooltip-bg: #{$tooltip-bg};
|
||||
--#{$prefix}tooltip-border-radius: #{$tooltip-border-radius};
|
||||
--#{$prefix}tooltip-opacity: #{$tooltip-opacity};
|
||||
--#{$prefix}tooltip-arrow-width: #{$tooltip-arrow-width};
|
||||
--#{$prefix}tooltip-arrow-height: #{$tooltip-arrow-height};
|
||||
--tooltip-zindex: #{$zindex-tooltip};
|
||||
--tooltip-max-width: #{$tooltip-max-width};
|
||||
--tooltip-padding-x: #{$tooltip-padding-x};
|
||||
--tooltip-padding-y: #{$tooltip-padding-y};
|
||||
--tooltip-margin: #{$tooltip-margin};
|
||||
@include rfs($tooltip-font-size, --tooltip-font-size);
|
||||
--tooltip-color: #{$tooltip-color};
|
||||
--tooltip-bg: #{$tooltip-bg};
|
||||
--tooltip-border-radius: #{$tooltip-border-radius};
|
||||
--tooltip-opacity: #{$tooltip-opacity};
|
||||
--tooltip-arrow-width: #{$tooltip-arrow-width};
|
||||
--tooltip-arrow-height: #{$tooltip-arrow-height};
|
||||
// scss-docs-end tooltip-css-vars
|
||||
|
||||
z-index: var(--#{$prefix}tooltip-zindex);
|
||||
z-index: var(--tooltip-zindex);
|
||||
display: block;
|
||||
margin: var(--#{$prefix}tooltip-margin);
|
||||
margin: var(--tooltip-margin);
|
||||
@include deprecate('`$tooltip-margin`', 'v5', 'v5.x', true);
|
||||
// Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
|
||||
// So reset our font and text properties to avoid inheriting weird values.
|
||||
@include reset-text();
|
||||
@include font-size(var(--#{$prefix}tooltip-font-size));
|
||||
@include font-size(var(--tooltip-font-size));
|
||||
// Allow breaking very long words so they don't overflow the tooltip's bounds
|
||||
word-wrap: break-word;
|
||||
opacity: 0;
|
||||
|
||||
&.show {
|
||||
opacity: var(--#{$prefix}tooltip-opacity);
|
||||
opacity: var(--tooltip-opacity);
|
||||
}
|
||||
|
||||
.tooltip-arrow {
|
||||
display: block;
|
||||
width: var(--#{$prefix}tooltip-arrow-width);
|
||||
height: var(--#{$prefix}tooltip-arrow-height);
|
||||
width: var(--tooltip-arrow-width);
|
||||
height: var(--tooltip-arrow-height);
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
@@ -48,50 +48,50 @@
|
||||
}
|
||||
|
||||
.bs-tooltip-top .tooltip-arrow {
|
||||
bottom: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
|
||||
bottom: calc(-1 * var(--tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
|
||||
|
||||
&::before {
|
||||
top: -1px;
|
||||
border-width: var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * 0.5) 0; // stylelint-disable-line function-disallowed-list
|
||||
border-top-color: var(--#{$prefix}tooltip-bg);
|
||||
border-width: var(--tooltip-arrow-height) calc(var(--tooltip-arrow-width) * 0.5) 0; // stylelint-disable-line function-disallowed-list
|
||||
border-top-color: var(--tooltip-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/* rtl:begin:ignore */
|
||||
.bs-tooltip-end .tooltip-arrow {
|
||||
left: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
|
||||
width: var(--#{$prefix}tooltip-arrow-height);
|
||||
height: var(--#{$prefix}tooltip-arrow-width);
|
||||
left: calc(-1 * var(--tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
|
||||
width: var(--tooltip-arrow-height);
|
||||
height: var(--tooltip-arrow-width);
|
||||
|
||||
&::before {
|
||||
right: -1px;
|
||||
border-width: calc(var(--#{$prefix}tooltip-arrow-width) * 0.5) var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * 0.5) 0; // stylelint-disable-line function-disallowed-list
|
||||
border-right-color: var(--#{$prefix}tooltip-bg);
|
||||
border-width: calc(var(--tooltip-arrow-width) * 0.5) var(--tooltip-arrow-height) calc(var(--tooltip-arrow-width) * 0.5) 0; // stylelint-disable-line function-disallowed-list
|
||||
border-right-color: var(--tooltip-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/* rtl:end:ignore */
|
||||
|
||||
.bs-tooltip-bottom .tooltip-arrow {
|
||||
top: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
|
||||
top: calc(-1 * var(--tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
|
||||
|
||||
&::before {
|
||||
bottom: -1px;
|
||||
border-width: 0 calc(var(--#{$prefix}tooltip-arrow-width) * 0.5) var(--#{$prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list
|
||||
border-bottom-color: var(--#{$prefix}tooltip-bg);
|
||||
border-width: 0 calc(var(--tooltip-arrow-width) * 0.5) var(--tooltip-arrow-height); // stylelint-disable-line function-disallowed-list
|
||||
border-bottom-color: var(--tooltip-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/* rtl:begin:ignore */
|
||||
.bs-tooltip-start .tooltip-arrow {
|
||||
right: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
|
||||
width: var(--#{$prefix}tooltip-arrow-height);
|
||||
height: var(--#{$prefix}tooltip-arrow-width);
|
||||
right: calc(-1 * var(--tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
|
||||
width: var(--tooltip-arrow-height);
|
||||
height: var(--tooltip-arrow-width);
|
||||
|
||||
&::before {
|
||||
left: -1px;
|
||||
border-width: calc(var(--#{$prefix}tooltip-arrow-width) * 0.5) 0 calc(var(--#{$prefix}tooltip-arrow-width) * 0.5) var(--#{$prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list
|
||||
border-left-color: var(--#{$prefix}tooltip-bg);
|
||||
border-width: calc(var(--tooltip-arrow-width) * 0.5) 0 calc(var(--tooltip-arrow-width) * 0.5) var(--tooltip-arrow-height); // stylelint-disable-line function-disallowed-list
|
||||
border-left-color: var(--tooltip-bg);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -114,10 +114,10 @@
|
||||
|
||||
// Wrapper for the tooltip content
|
||||
.tooltip-inner {
|
||||
max-width: var(--#{$prefix}tooltip-max-width);
|
||||
padding: var(--#{$prefix}tooltip-padding-y) var(--#{$prefix}tooltip-padding-x);
|
||||
color: var(--#{$prefix}tooltip-color);
|
||||
max-width: var(--tooltip-max-width);
|
||||
padding: var(--tooltip-padding-y) var(--tooltip-padding-x);
|
||||
color: var(--tooltip-color);
|
||||
text-align: center;
|
||||
background-color: var(--#{$prefix}tooltip-bg);
|
||||
@include border-radius(var(--#{$prefix}tooltip-border-radius));
|
||||
background-color: var(--tooltip-bg);
|
||||
@include border-radius(var(--tooltip-border-radius));
|
||||
}
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
height: 100%; // allow textareas
|
||||
padding: $form-floating-padding-y $form-floating-padding-x;
|
||||
overflow: hidden;
|
||||
color: rgba(var(--#{$prefix}body-color-rgb), #{$form-floating-label-opacity});
|
||||
color: rgba(var(--body-color-rgb), #{$form-floating-label-opacity});
|
||||
text-align: start;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
@@ -29,7 +29,7 @@
|
||||
}
|
||||
|
||||
.form-check-input {
|
||||
--#{$prefix}form-check-bg: #{$form-check-input-bg};
|
||||
--form-check-bg: #{$form-check-input-bg};
|
||||
|
||||
flex-shrink: 0;
|
||||
width: $form-check-input-width;
|
||||
@@ -37,8 +37,8 @@
|
||||
margin-top: ($line-height-base - $form-check-input-width) * 0.5; // line-height minus check height
|
||||
vertical-align: top;
|
||||
appearance: none;
|
||||
background-color: var(--#{$prefix}form-check-bg);
|
||||
background-image: var(--#{$prefix}form-check-bg-image);
|
||||
background-color: var(--form-check-bg);
|
||||
background-image: var(--form-check-bg-image);
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
@@ -71,17 +71,17 @@
|
||||
|
||||
&[type='checkbox'] {
|
||||
@if $enable-gradients {
|
||||
--#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-checked-bg-image)}, var(--#{$prefix}gradient);
|
||||
--form-check-bg-image: #{escape-svg($form-check-input-checked-bg-image)}, var(--gradient);
|
||||
} @else {
|
||||
--#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-checked-bg-image)};
|
||||
--form-check-bg-image: #{escape-svg($form-check-input-checked-bg-image)};
|
||||
}
|
||||
}
|
||||
|
||||
&[type='radio'] {
|
||||
@if $enable-gradients {
|
||||
--#{$prefix}form-check-bg-image: #{escape-svg($form-check-radio-checked-bg-image)}, var(--#{$prefix}gradient);
|
||||
--form-check-bg-image: #{escape-svg($form-check-radio-checked-bg-image)}, var(--gradient);
|
||||
} @else {
|
||||
--#{$prefix}form-check-bg-image: #{escape-svg($form-check-radio-checked-bg-image)};
|
||||
--form-check-bg-image: #{escape-svg($form-check-radio-checked-bg-image)};
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -91,9 +91,9 @@
|
||||
border-color: $form-check-input-indeterminate-border-color;
|
||||
|
||||
@if $enable-gradients {
|
||||
--#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-indeterminate-bg-image)}, var(--#{$prefix}gradient);
|
||||
--form-check-bg-image: #{escape-svg($form-check-input-indeterminate-bg-image)}, var(--gradient);
|
||||
} @else {
|
||||
--#{$prefix}form-check-bg-image: #{escape-svg($form-check-input-indeterminate-bg-image)};
|
||||
--form-check-bg-image: #{escape-svg($form-check-input-indeterminate-bg-image)};
|
||||
}
|
||||
}
|
||||
|
||||
@@ -127,26 +127,26 @@
|
||||
padding-inline-start: $form-switch-padding-start;
|
||||
|
||||
.form-check-input {
|
||||
--#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image)};
|
||||
--form-switch-bg: #{escape-svg($form-switch-bg-image)};
|
||||
|
||||
width: $form-switch-width;
|
||||
margin-inline-start: $form-switch-padding-start * -1;
|
||||
background-image: var(--#{$prefix}form-switch-bg);
|
||||
background-image: var(--form-switch-bg);
|
||||
background-position: left center;
|
||||
@include border-radius($form-switch-border-radius, 0);
|
||||
@include transition($form-switch-transition);
|
||||
|
||||
&:focus {
|
||||
--#{$prefix}form-switch-bg: #{escape-svg($form-switch-focus-bg-image)};
|
||||
--form-switch-bg: #{escape-svg($form-switch-focus-bg-image)};
|
||||
}
|
||||
|
||||
&:checked {
|
||||
background-position: $form-switch-checked-bg-position;
|
||||
|
||||
@if $enable-gradients {
|
||||
--#{$prefix}form-switch-bg: #{escape-svg($form-switch-checked-bg-image)}, var(--#{$prefix}gradient);
|
||||
--form-switch-bg: #{escape-svg($form-switch-checked-bg-image)}, var(--gradient);
|
||||
} @else {
|
||||
--#{$prefix}form-switch-bg: #{escape-svg($form-switch-checked-bg-image)};
|
||||
--form-switch-bg: #{escape-svg($form-switch-checked-bg-image)};
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -185,7 +185,7 @@
|
||||
@if $enable-dark-mode {
|
||||
@include color-mode(dark) {
|
||||
.form-switch .form-check-input:not(:checked):not(:focus) {
|
||||
--#{$prefix}form-switch-bg: #{escape-svg($form-switch-bg-image-dark)};
|
||||
--form-switch-bg: #{escape-svg($form-switch-bg-image-dark)};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
@use '../../config' as *;
|
||||
|
||||
.form-select {
|
||||
--#{$prefix}form-select-bg-img: #{escape-svg($form-select-indicator)};
|
||||
--form-select-bg-img: #{escape-svg($form-select-indicator)};
|
||||
|
||||
display: block;
|
||||
width: 100%;
|
||||
@@ -18,7 +18,7 @@
|
||||
color: $form-select-color;
|
||||
appearance: none;
|
||||
background-color: $form-select-bg;
|
||||
background-image: var(--#{$prefix}form-select-bg-img), var(--#{$prefix}form-select-bg-icon, none);
|
||||
background-image: var(--form-select-bg-img), var(--form-select-bg-icon, none);
|
||||
background-repeat: no-repeat;
|
||||
background-position: $form-select-bg-position;
|
||||
background-size: $form-select-bg-size;
|
||||
@@ -76,7 +76,7 @@
|
||||
@if $enable-dark-mode {
|
||||
@include color-mode(dark) {
|
||||
.form-select {
|
||||
--#{$prefix}form-select-bg-img: #{escape-svg($form-select-indicator-dark)};
|
||||
--form-select-bg-img: #{escape-svg($form-select-indicator-dark)};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -117,7 +117,7 @@
|
||||
|
||||
&::before {
|
||||
display: block;
|
||||
padding-top: var(--#{$prefix}aspect-ratio);
|
||||
padding-top: var(--aspect-ratio);
|
||||
content: '';
|
||||
}
|
||||
|
||||
@@ -132,7 +132,7 @@
|
||||
|
||||
@each $key, $ratio in $aspect-ratios {
|
||||
.ratio-#{$key} {
|
||||
--#{$prefix}aspect-ratio: #{$ratio};
|
||||
--aspect-ratio: #{$ratio};
|
||||
}
|
||||
}
|
||||
|
||||
@@ -142,5 +142,5 @@
|
||||
.focus-ring:focus {
|
||||
outline: 0;
|
||||
// By default, there is no `--bs-focus-ring-x`, `--bs-focus-ring-y`, or `--bs-focus-ring-blur`, but we provide CSS variables with fallbacks to initial `0` values
|
||||
box-shadow: var(--#{$prefix}focus-ring-x, 0) var(--#{$prefix}focus-ring-y, 0) var(--#{$prefix}focus-ring-blur, 0) var(--#{$prefix}focus-ring-width) var(--#{$prefix}focus-ring-color);
|
||||
box-shadow: var(--focus-ring-x, 0) var(--focus-ring-y, 0) var(--focus-ring-blur, 0) var(--focus-ring-width) var(--focus-ring-color);
|
||||
}
|
||||
|
||||
+10
-10
@@ -50,29 +50,29 @@ body {
|
||||
// Boxed container
|
||||
//
|
||||
.layout-boxed {
|
||||
--#{$prefix}theme-boxed-border-radius: 0;
|
||||
--#{$prefix}theme-boxed-width: #{map.get($container-max-widths, xxl)};
|
||||
--theme-boxed-border-radius: 0;
|
||||
--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;
|
||||
--#{$prefix}theme-boxed-border-radius: #{$border-radius};
|
||||
--theme-boxed-border-radius: #{$border-radius};
|
||||
}
|
||||
|
||||
.page {
|
||||
margin: 0 auto;
|
||||
max-width: var(--#{$prefix}theme-boxed-width);
|
||||
@include border-radius(var(--#{$prefix}theme-boxed-border-radius));
|
||||
color: var(--#{$prefix}body-color);
|
||||
max-width: var(--theme-boxed-width);
|
||||
@include border-radius(var(--theme-boxed-border-radius));
|
||||
color: var(--body-color);
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
|
||||
background: var(--#{$prefix}body-bg);
|
||||
border: var(--border-width) var(--border-style) var(--border-color);
|
||||
background: var(--body-bg);
|
||||
}
|
||||
|
||||
> .navbar:first-child {
|
||||
border-start-start-radius: var(--#{$prefix}theme-boxed-border-radius);
|
||||
border-start-end-radius: var(--#{$prefix}theme-boxed-border-radius);
|
||||
border-start-start-radius: var(--theme-boxed-border-radius);
|
||||
border-start-end-radius: var(--theme-boxed-border-radius);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -36,7 +36,7 @@
|
||||
|
||||
// Everything else here has been folded into light-dark() declarations in
|
||||
// layout/_root.scss; only genuinely dark-only, non-paired values remain.
|
||||
--#{$prefix}btn-color: #{$darken-dark};
|
||||
--btn-color: #{$darken-dark};
|
||||
|
||||
.navbar-brand-autodark {
|
||||
.navbar-brand-image {
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
@use '../config' as *;
|
||||
|
||||
.footer {
|
||||
border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $footer-border-color;
|
||||
border-top: var(--border-width) var(--border-style) $footer-border-color;
|
||||
background-color: $footer-bg;
|
||||
padding: $footer-padding-y 0;
|
||||
color: $footer-color;
|
||||
|
||||
@@ -44,14 +44,14 @@
|
||||
color: inherit;
|
||||
|
||||
&.disabled {
|
||||
color: var(--#{$prefix}disabled-color);
|
||||
color: var(--disabled-color);
|
||||
pointer-events: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
&.active,
|
||||
&:active {
|
||||
background: var(--#{$prefix}navbar-active-bg);
|
||||
background: var(--navbar-active-bg);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -82,17 +82,17 @@
|
||||
Navbar
|
||||
*/
|
||||
.navbar {
|
||||
--#{$prefix}navbar-bg: var(--#{$prefix}bg-surface);
|
||||
--#{$prefix}navbar-border-width: #{$navbar-border-width};
|
||||
--#{$prefix}navbar-active-border-color: #{$navbar-active-border-color};
|
||||
--#{$prefix}navbar-active-bg: #{$navbar-light-active-bg};
|
||||
--#{$prefix}navbar-border-color: #{$navbar-border-color};
|
||||
--#{$prefix}navbar-hover-color: #{$navbar-hover-color};
|
||||
--navbar-bg: var(--bg-surface);
|
||||
--navbar-border-width: #{$navbar-border-width};
|
||||
--navbar-active-border-color: #{$navbar-active-border-color};
|
||||
--navbar-active-bg: #{$navbar-light-active-bg};
|
||||
--navbar-border-color: #{$navbar-border-color};
|
||||
--navbar-hover-color: #{$navbar-hover-color};
|
||||
align-items: stretch;
|
||||
min-height: $navbar-height;
|
||||
box-shadow: inset 0 calc(-1 * var(--#{$prefix}navbar-border-width)) 0 0 var(--#{$prefix}navbar-border-color);
|
||||
background: var(--#{$prefix}navbar-bg);
|
||||
color: var(--#{$prefix}navbar-color);
|
||||
box-shadow: inset 0 calc(-1 * var(--navbar-border-width)) 0 0 var(--navbar-border-color);
|
||||
background: var(--navbar-bg);
|
||||
color: var(--navbar-color);
|
||||
|
||||
.navbar-collapse & {
|
||||
flex-grow: 1;
|
||||
@@ -108,7 +108,7 @@ Navbar
|
||||
}
|
||||
|
||||
.navbar-nav {
|
||||
--#{$prefix}nav-link-icon-margin-end: #{$nav-link-icon-margin-end};
|
||||
--nav-link-icon-margin-end: #{$nav-link-icon-margin-end};
|
||||
min-height: subtract($navbar-height, 2 * $navbar-padding-y);
|
||||
|
||||
.nav-link {
|
||||
@@ -116,14 +116,14 @@ Navbar
|
||||
min-width: 2.5rem;
|
||||
min-height: 2.5rem;
|
||||
justify-content: center;
|
||||
@include border-radius(var(--#{$prefix}border-radius));
|
||||
@include border-radius(var(--border-radius));
|
||||
|
||||
.badge {
|
||||
position: absolute;
|
||||
top: 0.5rem;
|
||||
inset-inline-end: 0.5rem;
|
||||
/*rtl:ignore*/
|
||||
transform: translate(calc(var(--#{$prefix}dir) * 50%), -50%);
|
||||
transform: translate(calc(var(--dir) * 50%), -50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -149,7 +149,7 @@ Navbar
|
||||
position: relative;
|
||||
|
||||
.nav-link {
|
||||
color: var(--#{$prefix}navbar-active-color);
|
||||
color: var(--navbar-active-color);
|
||||
}
|
||||
|
||||
&:after {
|
||||
@@ -158,17 +158,17 @@ Navbar
|
||||
inset-inline-start: 0;
|
||||
inset-inline-end: 0;
|
||||
bottom: -0.25rem;
|
||||
border: 0 var(--#{$prefix}border-style) var(--#{$prefix}navbar-active-border-color);
|
||||
border: 0 var(--border-style) var(--navbar-active-border-color);
|
||||
border-bottom-width: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
&.navbar-vertical {
|
||||
box-shadow: inset calc(-1 * var(--#{$prefix}navbar-border-width)) 0 0 0 var(--#{$prefix}navbar-border-color);
|
||||
box-shadow: inset calc(-1 * var(--navbar-border-width)) 0 0 0 var(--navbar-border-color);
|
||||
|
||||
&.navbar-right,
|
||||
&.navbar-end {
|
||||
box-shadow: inset calc(1 * var(--#{$prefix}navbar-border-width)) 0 0 0 var(--#{$prefix}navbar-border-color);
|
||||
box-shadow: inset calc(1 * var(--navbar-border-width)) 0 0 0 var(--navbar-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -226,7 +226,7 @@ Navbar toggler
|
||||
height: 2px;
|
||||
width: 1.25em;
|
||||
background: currentColor;
|
||||
@include border-radius(var(--#{$prefix}border-radius-pill));
|
||||
@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);
|
||||
|
||||
@@ -271,7 +271,7 @@ Navbar toggler
|
||||
Navbar transparent
|
||||
*/
|
||||
.navbar-transparent {
|
||||
--#{$prefix}navbar-border-color: transparent !important;
|
||||
--navbar-border-color: transparent !important;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
@@ -279,9 +279,9 @@ Navbar transparent
|
||||
Navbar nav
|
||||
*/
|
||||
.navbar-nav {
|
||||
--#{$prefix}nav-link-hover-bg: #{$navbar-nav-link-hover-bg};
|
||||
--#{$prefix}nav-link-icon-color: #{$nav-link-icon-color};
|
||||
--#{$prefix}nav-link-hover-icon-color: #{$nav-link-hover-icon-color};
|
||||
--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;
|
||||
|
||||
+21
-21
@@ -7,12 +7,12 @@
|
||||
inset-inline-start: 0;
|
||||
z-index: $zindex-tooltip;
|
||||
padding: 0.5rem 1rem;
|
||||
background: var(--#{$prefix}primary);
|
||||
color: var(--#{$prefix}primary-fg, #fff);
|
||||
background: var(--primary);
|
||||
color: var(--primary-fg, #fff);
|
||||
text-decoration: none;
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--#{$prefix}primary);
|
||||
outline: 2px solid var(--primary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
@@ -47,17 +47,17 @@
|
||||
|
||||
// Content body
|
||||
.page-body {
|
||||
margin-top: var(--#{$prefix}page-padding-y);
|
||||
margin-bottom: var(--#{$prefix}page-padding-y);
|
||||
margin-top: var(--page-padding-y);
|
||||
margin-bottom: var(--page-padding-y);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.page-body-card {
|
||||
background: var(--#{$prefix}bg-surface);
|
||||
border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) $card-border-color;
|
||||
padding: var(--#{$prefix}page-padding) 0;
|
||||
background: var(--bg-surface);
|
||||
border-top: var(--border-width) var(--border-style) $card-border-color;
|
||||
padding: var(--page-padding) 0;
|
||||
margin-bottom: 0;
|
||||
flex: 1;
|
||||
|
||||
@@ -102,15 +102,15 @@
|
||||
max-width: 100%;
|
||||
|
||||
.page-wrapper & {
|
||||
margin: var(--#{$prefix}page-padding-y) 0 0;
|
||||
margin: var(--page-padding-y) 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.page-header-border {
|
||||
border-bottom: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
|
||||
padding: var(--#{$prefix}page-padding-y) 0;
|
||||
border-bottom: var(--border-width) var(--border-style) var(--border-color);
|
||||
padding: var(--page-padding-y) 0;
|
||||
margin: 0 !important;
|
||||
background-color: var(--#{$prefix}bg-surface);
|
||||
background-color: var(--bg-surface);
|
||||
}
|
||||
|
||||
.page-pretitle {
|
||||
@@ -140,29 +140,29 @@
|
||||
|
||||
.page-subtitle {
|
||||
margin-top: 0.25rem;
|
||||
color: var(--#{$prefix}secondary);
|
||||
color: var(--secondary);
|
||||
}
|
||||
|
||||
//
|
||||
// Page cover
|
||||
//
|
||||
.page-cover {
|
||||
--#{$prefix}page-cover-blur: 20px;
|
||||
--#{$prefix}page-cover-padding: 1rem;
|
||||
--page-cover-blur: 20px;
|
||||
--page-cover-padding: 1rem;
|
||||
min-height: 6rem;
|
||||
padding: var(--#{$prefix}page-cover-padding) 0;
|
||||
padding: var(--page-cover-padding) 0;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.page-cover-img {
|
||||
position: absolute;
|
||||
top: calc(-2 * var(--#{$prefix}page-cover-blur, 0));
|
||||
inset-inline-start: calc(-2 * var(--#{$prefix}page-cover-blur, 0));
|
||||
inset-inline-end: calc(-2 * var(--#{$prefix}page-cover-blur, 0));
|
||||
bottom: calc(-2 * var(--#{$prefix}page-cover-blur, 0));
|
||||
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));
|
||||
bottom: calc(-2 * var(--page-cover-blur, 0));
|
||||
pointer-events: none;
|
||||
filter: blur(var(--#{$prefix}page-cover-blur));
|
||||
filter: blur(var(--page-cover-blur));
|
||||
object-fit: cover;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
|
||||
+37
-37
@@ -11,59 +11,59 @@
|
||||
[data-bs-theme='light'],
|
||||
[data-theme='light'] {
|
||||
color-scheme: light;
|
||||
--#{$prefix}spacer: var(--#{$prefix}spacer-2);
|
||||
--spacer: var(--spacer-2);
|
||||
|
||||
--#{$prefix}bg-surface: light-dark(var(--#{$prefix}bg-surface-primary), var(--#{$prefix}gray-800));
|
||||
--#{$prefix}bg-surface-primary: var(--#{$prefix}white);
|
||||
--#{$prefix}bg-surface-secondary: light-dark(var(--#{$prefix}gray-50), var(--#{$prefix}gray-900));
|
||||
--#{$prefix}bg-surface-tertiary: light-dark(var(--#{$prefix}gray-50), var(--#{$prefix}gray-800));
|
||||
--#{$prefix}bg-surface-dark: var(--#{$prefix}gray-900);
|
||||
--#{$prefix}bg-surface-inverted: light-dark(var(--#{$prefix}gray-900), var(--#{$prefix}gray-100));
|
||||
--#{$prefix}bg-forms: light-dark(var(--#{$prefix}bg-surface), var(--#{$prefix}gray-900));
|
||||
--#{$prefix}bg-forms-disabled: light-dark(var(--#{$prefix}bg-surface-secondary), var(--#{$prefix}gray-800));
|
||||
--bg-surface: light-dark(var(--bg-surface-primary), var(--gray-800));
|
||||
--bg-surface-primary: var(--white);
|
||||
--bg-surface-secondary: light-dark(var(--gray-50), var(--gray-900));
|
||||
--bg-surface-tertiary: light-dark(var(--gray-50), var(--gray-800));
|
||||
--bg-surface-dark: var(--gray-900);
|
||||
--bg-surface-inverted: light-dark(var(--gray-900), var(--gray-100));
|
||||
--bg-forms: light-dark(var(--bg-surface), var(--gray-900));
|
||||
--bg-forms-disabled: light-dark(var(--bg-surface-secondary), var(--gray-800));
|
||||
|
||||
--#{$prefix}text-inverted: light-dark(var(--#{$prefix}gray-100), var(--#{$prefix}gray-800));
|
||||
--text-inverted: light-dark(var(--gray-100), var(--gray-800));
|
||||
|
||||
--#{$prefix}body-color: light-dark(var(--#{$prefix}gray-700), var(--#{$prefix}gray-200));
|
||||
--#{$prefix}body-bg: light-dark(var(--#{$prefix}bg-surface-secondary), var(--#{$prefix}gray-900));
|
||||
--body-color: light-dark(var(--gray-700), var(--gray-200));
|
||||
--body-bg: light-dark(var(--bg-surface-secondary), var(--gray-900));
|
||||
|
||||
// Same color-mix() expression in both modes — no light-dark() needed.
|
||||
--#{$prefix}link-color: var(--#{$prefix}primary);
|
||||
--#{$prefix}link-hover-color: color-mix(in srgb, var(--#{$prefix}primary), #000 20%);
|
||||
--link-color: var(--primary);
|
||||
--link-hover-color: color-mix(in srgb, var(--primary), #000 20%);
|
||||
|
||||
--#{$prefix}secondary: light-dark(var(--#{$prefix}gray-500), var(--#{$prefix}gray-400));
|
||||
--#{$prefix}tertiary: var(--#{$prefix}gray-400);
|
||||
--secondary: light-dark(var(--gray-500), var(--gray-400));
|
||||
--tertiary: var(--gray-400);
|
||||
|
||||
--#{$prefix}border-color: light-dark(#{$border-color}, var(--#{$prefix}gray-700));
|
||||
--#{$prefix}border-color-translucent: light-dark(#{$border-color-translucent}, var(--#{$prefix}dark-mode-border-color-translucent));
|
||||
--#{$prefix}border-dark-color: light-dark(#{$border-dark-color}, var(--#{$prefix}dark-mode-border-dark-color));
|
||||
--#{$prefix}border-dark-color-translucent: #{$border-dark-color-translucent};
|
||||
--#{$prefix}border-light-color: #{$border-light-color};
|
||||
--#{$prefix}border-light-color-translucent: #{$border-light-color-translucent};
|
||||
--#{$prefix}border-active-color: light-dark(#{$border-active-color}, var(--#{$prefix}dark-mode-border-active-color));
|
||||
--#{$prefix}border-active-color-translucent: #{$border-active-color-translucent};
|
||||
--border-color: light-dark(#{$border-color}, var(--gray-700));
|
||||
--border-color-translucent: light-dark(#{$border-color-translucent}, var(--dark-mode-border-color-translucent));
|
||||
--border-dark-color: light-dark(#{$border-dark-color}, var(--dark-mode-border-dark-color));
|
||||
--border-dark-color-translucent: #{$border-dark-color-translucent};
|
||||
--border-light-color: #{$border-light-color};
|
||||
--border-light-color-translucent: #{$border-light-color-translucent};
|
||||
--border-active-color: light-dark(#{$border-active-color}, var(--dark-mode-border-active-color));
|
||||
--border-active-color-translucent: #{$border-active-color-translucent};
|
||||
|
||||
--#{$prefix}icon-color: #{$icon-color};
|
||||
--icon-color: #{$icon-color};
|
||||
|
||||
--#{$prefix}active-bg: light-dark(#{$active-bg}, #{$lighten-dark});
|
||||
--active-bg: light-dark(#{$active-bg}, #{$lighten-dark});
|
||||
|
||||
--#{$prefix}disabled-bg: #{$disabled-bg};
|
||||
--disabled-bg: #{$disabled-bg};
|
||||
// $disabled-color already derives from var(--body-color) at compute time, so it
|
||||
// adapts to dark mode on its own — no light-dark() or dark-block override needed.
|
||||
--#{$prefix}disabled-color: #{$disabled-color};
|
||||
--disabled-color: #{$disabled-color};
|
||||
|
||||
--#{$prefix}code-color: #{$code-color};
|
||||
--#{$prefix}code-bg: #{$code-bg};
|
||||
--code-color: #{$code-color};
|
||||
--code-bg: #{$code-bg};
|
||||
|
||||
--#{$prefix}dark-mode-border-color: #{$border-color-dark};
|
||||
--#{$prefix}dark-mode-border-color-translucent: #{$border-color-translucent-dark};
|
||||
--#{$prefix}dark-mode-border-active-color: #{$border-active-color-dark};
|
||||
--#{$prefix}dark-mode-border-dark-color: #{$border-dark-color-dark};
|
||||
--dark-mode-border-color: #{$border-color-dark};
|
||||
--dark-mode-border-color-translucent: #{$border-color-translucent-dark};
|
||||
--dark-mode-border-active-color: #{$border-active-color-dark};
|
||||
--dark-mode-border-dark-color: #{$border-dark-color-dark};
|
||||
|
||||
--#{$prefix}page-padding: #{$page-padding};
|
||||
--#{$prefix}page-padding-y: #{$page-padding-y};
|
||||
--page-padding: #{$page-padding};
|
||||
--page-padding-y: #{$page-padding-y};
|
||||
|
||||
@include media-breakpoint-down($cards-grid-breakpoint) {
|
||||
--#{$prefix}page-padding: #{$page-padding-sm};
|
||||
--page-padding: #{$page-padding-sm};
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,17 +4,17 @@
|
||||
@use '../config' as *;
|
||||
|
||||
.browser {
|
||||
@include border-radius(var(--#{$prefix}border-radius-lg));
|
||||
box-shadow: 0 0 0 1px var(--#{$prefix}border-color);
|
||||
background: var(--#{$prefix}bg-surface-secondary);
|
||||
@include border-radius(var(--border-radius-lg));
|
||||
box-shadow: 0 0 0 1px var(--border-color);
|
||||
background: var(--bg-surface-secondary);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.browser-header {
|
||||
padding: 0.25rem 1rem;
|
||||
background: var(--#{$prefix}border-color-light) linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.03));
|
||||
border-bottom: 1px solid var(--#{$prefix}border-color);
|
||||
@include border-radius(calc(var(--#{$prefix}border-radius-lg) - 1px) calc(var(--#{$prefix}border-radius-lg) - 1px) 0 0);
|
||||
background: var(--border-color-light) linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.03));
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
@include border-radius(calc(var(--border-radius-lg) - 1px) calc(var(--border-radius-lg) - 1px) 0 0);
|
||||
}
|
||||
|
||||
.browser-dots {
|
||||
@@ -43,9 +43,9 @@
|
||||
width: 0.75rem;
|
||||
min-width: 0.75rem;
|
||||
height: 0.75rem;
|
||||
background: var(--#{$prefix}border-color);
|
||||
@include border-radius(var(--#{$prefix}border-radius-circle));
|
||||
border: 1px solid var(--#{$prefix}border-color-dark);
|
||||
background: var(--border-color);
|
||||
@include border-radius(var(--border-radius-circle));
|
||||
border: 1px solid var(--border-color-dark);
|
||||
}
|
||||
|
||||
.browser-input {
|
||||
@@ -55,15 +55,15 @@
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
padding: 0.25rem;
|
||||
color: var(--#{$prefix}secondary);
|
||||
font-size: var(--#{$prefix}font-size-h5);
|
||||
@include border-radius(var(--#{$prefix}border-radius));
|
||||
color: var(--secondary);
|
||||
font-size: var(--font-size-h5);
|
||||
@include border-radius(var(--border-radius));
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(0, 0, 0, 0.05),
|
||||
0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
||||
background-image: linear-gradient(to bottom, var(--#{$prefix}bg-surface), var(--#{$prefix}bg-surface-secondary));
|
||||
background-image: linear-gradient(to bottom, var(--bg-surface), var(--bg-surface-secondary));
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
@use '../config' as *;
|
||||
|
||||
.body-marketing {
|
||||
--#{$prefix}body-font-size: 1rem;
|
||||
--#{$prefix}body-line-height: 1.75;
|
||||
--body-font-size: 1rem;
|
||||
--body-line-height: 1.75;
|
||||
}
|
||||
|
||||
.body-gradient {
|
||||
background: var(--#{$prefix}bg-surface) linear-gradient(to bottom, var(--#{$prefix}bg-surface-secondary) 12%, var(--#{$prefix}bg-surface) 99%) repeat-x top center/100% 100vh;
|
||||
background: var(--bg-surface) linear-gradient(to bottom, var(--bg-surface-secondary) 12%, var(--bg-surface) 99%) repeat-x top center/100% 100vh;
|
||||
}
|
||||
|
||||
@@ -10,7 +10,7 @@
|
||||
|
||||
.hero-title {
|
||||
font-size: 3rem;
|
||||
font-weight: var(--#{$prefix}font-weight-black);
|
||||
font-weight: var(--font-weight-black);
|
||||
letter-spacing: $spacing-tight;
|
||||
line-height: $headings-line-height;
|
||||
|
||||
@@ -20,14 +20,14 @@
|
||||
}
|
||||
|
||||
.hero-description {
|
||||
color: var(--#{$prefix}secondary);
|
||||
font-size: var(--#{$prefix}font-size-h2);
|
||||
color: var(--secondary);
|
||||
font-size: var(--font-size-h2);
|
||||
line-height: 1.5;
|
||||
margin: 0 auto;
|
||||
max-width: 45rem;
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
font-size: var(--#{$prefix}font-size-h3);
|
||||
font-size: var(--font-size-h3);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -17,12 +17,12 @@ $pricing-card-width: 22rem;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: var(--#{$prefix}bg-surface);
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid $border-color;
|
||||
padding: 2rem;
|
||||
margin: 0 0 1rem;
|
||||
position: relative;
|
||||
box-shadow: var(--#{$prefix}shadow-card);
|
||||
box-shadow: var(--shadow-card);
|
||||
text-align: center;
|
||||
@include border-radius($border-radius-lg);
|
||||
|
||||
@@ -41,14 +41,14 @@ $pricing-card-width: 22rem;
|
||||
|
||||
&.featured {
|
||||
z-index: 1;
|
||||
border: 2px solid var(--#{$prefix}primary);
|
||||
border: 2px solid var(--primary);
|
||||
order: -1;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
order: unset;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
box-shadow: var(--#{$prefix}shadow-card);
|
||||
box-shadow: var(--shadow-card);
|
||||
@include border-radius($border-radius-lg);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -45,20 +45,20 @@
|
||||
}
|
||||
|
||||
.section-white {
|
||||
--section-bg: var(--#{$prefix}bg-surface);
|
||||
--section-bg: var(--bg-surface);
|
||||
}
|
||||
|
||||
.section-light {
|
||||
--section-bg: var(--#{$prefix}bg-surface-secondary);
|
||||
--section-bg: var(--bg-surface-secondary);
|
||||
}
|
||||
|
||||
.section-primary {
|
||||
--section-bg: var(--#{$prefix}primary);
|
||||
--section-bg: var(--primary);
|
||||
color: $white;
|
||||
}
|
||||
|
||||
.section-dark {
|
||||
--section-bg: var(--#{$prefix}dark);
|
||||
--section-bg: var(--dark);
|
||||
color: $white;
|
||||
}
|
||||
|
||||
@@ -73,8 +73,8 @@
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: var(--#{$prefix}font-size-h1);
|
||||
font-weight: var(--#{$prefix}font-weight-semibold);
|
||||
font-size: var(--font-size-h1);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
line-height: 1.2;
|
||||
}
|
||||
|
||||
@@ -83,9 +83,9 @@
|
||||
}
|
||||
|
||||
.section-description {
|
||||
color: var(--#{$prefix}secondary);
|
||||
font-size: var(--#{$prefix}font-size-h3);
|
||||
line-height: var(--#{$prefix}line-height-h3);
|
||||
color: var(--secondary);
|
||||
font-size: var(--font-size-h3);
|
||||
line-height: var(--line-height-h3);
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
|
||||
@@ -3,34 +3,34 @@
|
||||
@use '../config' as *;
|
||||
|
||||
.shape {
|
||||
--#{$prefix}shape-size: #{$avatar-size};
|
||||
--#{$prefix}shape-icon-size: #{$avatar-icon-size};
|
||||
--#{$prefix}shape-border-radius: 35%;
|
||||
background-color: var(--#{$prefix}primary-lt);
|
||||
color: var(--#{$prefix}primary);
|
||||
@include border-radius(var(--#{$prefix}shape-border-radius));
|
||||
--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(--#{$prefix}shape-size);
|
||||
width: var(--#{$prefix}shape-size);
|
||||
height: var(--shape-size);
|
||||
width: var(--shape-size);
|
||||
|
||||
.icon {
|
||||
width: var(--#{$prefix}shape-icon-size);
|
||||
height: var(--#{$prefix}shape-icon-size);
|
||||
width: var(--shape-icon-size);
|
||||
height: var(--shape-icon-size);
|
||||
}
|
||||
}
|
||||
|
||||
@each $avatar-size, $size in $avatar-sizes {
|
||||
.shape-#{$avatar-size} {
|
||||
--#{$prefix}shape-size: #{map.get($size, size)};
|
||||
--#{$prefix}shape-icon-size: #{map.get($size, icon-size)};
|
||||
--shape-size: #{map.get($size, size)};
|
||||
--shape-icon-size: #{map.get($size, icon-size)};
|
||||
}
|
||||
}
|
||||
|
||||
@each $name, $color in $colors {
|
||||
.shape-#{$name} {
|
||||
background: var(--#{$prefix}#{$name}-lt);
|
||||
color: var(--#{$prefix}#{$name});
|
||||
background: var(--#{$name}-lt);
|
||||
color: var(--#{$name});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -121,12 +121,12 @@
|
||||
// stylelint-disable scss/dollar-variable-pattern
|
||||
@function rgba-css-var($identifier, $target) {
|
||||
@if $identifier == 'body' and $target == 'bg' {
|
||||
@return color-mix(in srgb, var(--#{$prefix}#{$identifier}-bg) calc(var(--#{$prefix}#{$target}-opacity) * 100%), transparent);
|
||||
@return color-mix(in srgb, var(--#{$identifier}-bg) calc(var(--#{$target}-opacity) * 100%), transparent);
|
||||
}
|
||||
@if $identifier == 'body' and $target == 'text' {
|
||||
@return color-mix(in srgb, var(--#{$prefix}#{$identifier}-color) calc(var(--#{$prefix}#{$target}-opacity) * 100%), transparent);
|
||||
@return color-mix(in srgb, var(--#{$identifier}-color) calc(var(--#{$target}-opacity) * 100%), transparent);
|
||||
} @else {
|
||||
@return color-mix(in srgb, var(--#{$prefix}#{$identifier}) calc(var(--#{$prefix}#{$target}-opacity) * 100%), transparent);
|
||||
@return color-mix(in srgb, var(--#{$identifier}) calc(var(--#{$target}-opacity) * 100%), transparent);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -155,7 +155,7 @@
|
||||
@function varify($list) {
|
||||
$result: null;
|
||||
@each $entry in $list {
|
||||
$result: list.append($result, var(--#{$prefix}#{$entry}), space);
|
||||
$result: list.append($result, var(--#{$entry}), space);
|
||||
}
|
||||
@return $result;
|
||||
}
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
|
||||
@mixin subheader($include-color: true, $include-line-height: true) {
|
||||
font-size: $h5-font-size;
|
||||
font-weight: var(--#{$prefix}font-weight-medium);
|
||||
font-weight: var(--font-weight-medium);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
|
||||
@@ -16,14 +16,14 @@
|
||||
}
|
||||
|
||||
@if ($include-color) {
|
||||
color: var(--#{$prefix}secondary);
|
||||
color: var(--secondary);
|
||||
}
|
||||
}
|
||||
|
||||
@mixin scrollbar {
|
||||
$selector: if(sass(meta.type-of(&) != 'null'): '&'; else: '*');
|
||||
#{$selector} {
|
||||
scrollbar-color: color-transparent(var(--#{$prefix}scrollbar-color, var(--#{$prefix}body-color)), 0.2) transparent;
|
||||
scrollbar-color: color-transparent(var(--scrollbar-color, var(--body-color)), 0.2) transparent;
|
||||
}
|
||||
|
||||
#{$selector}::-webkit-scrollbar {
|
||||
@@ -35,7 +35,7 @@
|
||||
#{$selector}::-webkit-scrollbar-thumb {
|
||||
@include border-radius(1rem);
|
||||
border: 5px solid transparent;
|
||||
box-shadow: inset 0 0 0 1rem color-transparent(var(--#{$prefix}scrollbar-color, var(--#{$prefix}body-color)), 0.2);
|
||||
box-shadow: inset 0 0 0 1rem color-transparent(var(--scrollbar-color, var(--body-color)), 0.2);
|
||||
}
|
||||
|
||||
#{$selector}::-webkit-scrollbar-track {
|
||||
@@ -43,7 +43,7 @@
|
||||
}
|
||||
|
||||
#{$selector}:hover::-webkit-scrollbar-thumb {
|
||||
box-shadow: inset 0 0 0 1rem color-transparent(var(--#{$prefix}scrollbar-color, var(--#{$prefix}body-color)), 0.4);
|
||||
box-shadow: inset 0 0 0 1rem color-transparent(var(--scrollbar-color, var(--body-color)), 0.4);
|
||||
}
|
||||
|
||||
#{$selector}::-webkit-scrollbar-corner {
|
||||
@@ -59,20 +59,20 @@
|
||||
// Elements list
|
||||
//
|
||||
@mixin elements-list($gap: 0.5rem) {
|
||||
--#{$prefix}list-gap: #{$gap};
|
||||
--list-gap: #{$gap};
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--#{$prefix}list-gap);
|
||||
gap: var(--list-gap);
|
||||
}
|
||||
|
||||
@mixin focus-ring($show-border: false) {
|
||||
outline: 0;
|
||||
box-shadow:
|
||||
0 0 0 2px var(--#{$prefix}primary),
|
||||
0 0 $focus-ring-blur $focus-ring-width color-transparent(var(--#{$prefix}primary), 0.25);
|
||||
0 0 0 2px var(--primary),
|
||||
0 0 $focus-ring-blur $focus-ring-width color-transparent(var(--primary), 0.25);
|
||||
|
||||
@if ($show-border) {
|
||||
border-color: color-transparent(var(--#{$prefix}primary), 0.25);
|
||||
border-color: color-transparent(var(--primary), 0.25);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -17,8 +17,8 @@
|
||||
}
|
||||
|
||||
@mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
|
||||
--#{$prefix}btn-padding-y: #{$padding-y};
|
||||
--#{$prefix}btn-padding-x: #{$padding-x};
|
||||
@include rfs($font-size, --#{$prefix}btn-font-size);
|
||||
--#{$prefix}btn-border-radius: #{$border-radius};
|
||||
--btn-padding-y: #{$padding-y};
|
||||
--btn-padding-x: #{$padding-x};
|
||||
@include rfs($font-size, --btn-font-size);
|
||||
--btn-border-radius: #{$border-radius};
|
||||
}
|
||||
|
||||
@@ -43,8 +43,8 @@
|
||||
vertical-align: $caret-vertical-align;
|
||||
width: $caret-width;
|
||||
height: $caret-width;
|
||||
border-bottom: 1px var(--#{$prefix}border-style);
|
||||
border-inline-start: 1px var(--#{$prefix}border-style);
|
||||
border-bottom: 1px var(--border-style);
|
||||
border-inline-start: 1px var(--border-style);
|
||||
margin-inline-end: 0.1em;
|
||||
|
||||
@if $direction != 'left' {
|
||||
|
||||
@@ -5,11 +5,11 @@
|
||||
// Container mixins
|
||||
|
||||
@mixin make-container($gutter: $container-padding-x) {
|
||||
--#{$prefix}gutter-x: #{$gutter};
|
||||
--#{$prefix}gutter-y: 0;
|
||||
--gutter-x: #{$gutter};
|
||||
--gutter-y: 0;
|
||||
width: 100%;
|
||||
padding-inline-end: calc(var(--#{$prefix}gutter-x) * 0.5); // stylelint-disable-line function-disallowed-list
|
||||
padding-inline-start: calc(var(--#{$prefix}gutter-x) * 0.5); // stylelint-disable-line function-disallowed-list
|
||||
padding-inline-end: calc(var(--gutter-x) * 0.5); // stylelint-disable-line function-disallowed-list
|
||||
padding-inline-start: calc(var(--gutter-x) * 0.5); // stylelint-disable-line function-disallowed-list
|
||||
margin-inline-end: auto;
|
||||
margin-inline-start: auto;
|
||||
}
|
||||
|
||||
@@ -93,7 +93,7 @@
|
||||
@if $enable-validation-icons {
|
||||
&:not([multiple]):not([size]),
|
||||
&:not([multiple])[size='1'] {
|
||||
--#{$prefix}form-select-bg-icon: #{escape-svg($icon)};
|
||||
--form-select-bg-icon: #{escape-svg($icon)};
|
||||
padding-inline-end: $form-select-feedback-icon-padding-end;
|
||||
background-position: $form-select-bg-position, $form-select-feedback-icon-position;
|
||||
background-size: $form-select-bg-size, $form-select-feedback-icon-size;
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
background-color: $color;
|
||||
|
||||
@if $enable-gradients {
|
||||
background-image: var(--#{$prefix}gradient);
|
||||
background-image: var(--gradient);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -12,13 +12,13 @@
|
||||
// Generate semantic grid columns with these mixins.
|
||||
|
||||
@mixin make-row($gutter: $grid-gutter-width) {
|
||||
--#{$prefix}gutter-x: #{$gutter};
|
||||
--#{$prefix}gutter-y: 0;
|
||||
--gutter-x: #{$gutter};
|
||||
--gutter-y: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: calc(-1 * var(--#{$prefix}gutter-y)); // stylelint-disable-line function-disallowed-list
|
||||
margin-inline-end: calc(-0.5 * var(--#{$prefix}gutter-x)); // stylelint-disable-line function-disallowed-list
|
||||
margin-inline-start: calc(-0.5 * var(--#{$prefix}gutter-x)); // stylelint-disable-line function-disallowed-list
|
||||
margin-top: calc(-1 * var(--gutter-y)); // stylelint-disable-line function-disallowed-list
|
||||
margin-inline-end: calc(-0.5 * var(--gutter-x)); // stylelint-disable-line function-disallowed-list
|
||||
margin-inline-start: calc(-0.5 * var(--gutter-x)); // stylelint-disable-line function-disallowed-list
|
||||
}
|
||||
|
||||
@mixin make-col-ready() {
|
||||
@@ -26,9 +26,9 @@
|
||||
flex-shrink: 0;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
padding-inline-end: calc(var(--#{$prefix}gutter-x) * 0.5); // stylelint-disable-line function-disallowed-list
|
||||
padding-inline-start: calc(var(--#{$prefix}gutter-x) * 0.5); // stylelint-disable-line function-disallowed-list
|
||||
margin-top: var(--#{$prefix}gutter-y);
|
||||
padding-inline-end: calc(var(--gutter-x) * 0.5); // stylelint-disable-line function-disallowed-list
|
||||
padding-inline-start: calc(var(--gutter-x) * 0.5); // stylelint-disable-line function-disallowed-list
|
||||
margin-top: var(--gutter-y);
|
||||
}
|
||||
|
||||
@mixin make-col($size: false, $columns: $grid-columns) {
|
||||
@@ -102,12 +102,12 @@
|
||||
@each $key, $value in $gutters {
|
||||
.g#{$infix}-#{$key},
|
||||
.gx#{$infix}-#{$key} {
|
||||
--#{$prefix}gutter-x: #{$value};
|
||||
--gutter-x: #{$value};
|
||||
}
|
||||
|
||||
.g#{$infix}-#{$key},
|
||||
.gy#{$infix}-#{$key} {
|
||||
--#{$prefix}gutter-y: #{$value};
|
||||
--gutter-y: #{$value};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,8 +6,8 @@
|
||||
// Pagination
|
||||
|
||||
@mixin pagination-size($padding-y, $padding-x, $font-size, $border-radius) {
|
||||
--#{$prefix}pagination-padding-x: #{$padding-x};
|
||||
--#{$prefix}pagination-padding-y: #{$padding-y};
|
||||
@include rfs($font-size, --#{$prefix}pagination-font-size);
|
||||
--#{$prefix}pagination-border-radius: #{$border-radius};
|
||||
--pagination-padding-x: #{$padding-x};
|
||||
--pagination-padding-y: #{$padding-y};
|
||||
@include rfs($font-size, --pagination-font-size);
|
||||
--pagination-border-radius: #{$border-radius};
|
||||
}
|
||||
|
||||
@@ -13,17 +13,17 @@
|
||||
$active-bg: color.mix($color, $background, math.percentage($table-active-bg-factor));
|
||||
$table-border-color: color.mix($color, $background, math.percentage($table-border-factor));
|
||||
|
||||
--#{$prefix}table-color: #{$color};
|
||||
--#{$prefix}table-bg: #{$background};
|
||||
--#{$prefix}table-border-color: #{$table-border-color};
|
||||
--#{$prefix}table-striped-bg: #{$striped-bg};
|
||||
--#{$prefix}table-striped-color: #{color-contrast($striped-bg)};
|
||||
--#{$prefix}table-active-bg: #{$active-bg};
|
||||
--#{$prefix}table-active-color: #{color-contrast($active-bg)};
|
||||
--#{$prefix}table-hover-bg: #{$hover-bg};
|
||||
--#{$prefix}table-hover-color: #{color-contrast($hover-bg)};
|
||||
--table-color: #{$color};
|
||||
--table-bg: #{$background};
|
||||
--table-border-color: #{$table-border-color};
|
||||
--table-striped-bg: #{$striped-bg};
|
||||
--table-striped-color: #{color-contrast($striped-bg)};
|
||||
--table-active-bg: #{$active-bg};
|
||||
--table-active-color: #{color-contrast($active-bg)};
|
||||
--table-hover-bg: #{$hover-bg};
|
||||
--table-hover-color: #{color-contrast($hover-bg)};
|
||||
|
||||
color: var(--#{$prefix}table-color);
|
||||
border-color: var(--#{$prefix}table-border-color);
|
||||
color: var(--table-color);
|
||||
border-color: var(--table-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -64,12 +64,12 @@
|
||||
|
||||
@if $is-css-var {
|
||||
.#{$property-class + $infix + $property-class-modifier} {
|
||||
--#{$prefix}#{$css-variable-name}: #{$value};
|
||||
--#{$css-variable-name}: #{$value};
|
||||
}
|
||||
|
||||
@each $pseudo in $state {
|
||||
.#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
|
||||
--#{$prefix}#{$css-variable-name}: #{$value};
|
||||
--#{$css-variable-name}: #{$value};
|
||||
}
|
||||
}
|
||||
} @else {
|
||||
@@ -77,7 +77,7 @@
|
||||
@each $property in $properties {
|
||||
@if $is-local-vars {
|
||||
@each $local-var, $variable in $is-local-vars {
|
||||
--#{$prefix}#{$local-var}: #{$variable};
|
||||
--#{$local-var}: #{$variable};
|
||||
}
|
||||
}
|
||||
#{$property}: $value if(sass($enable-important-utilities): !important; else: null);
|
||||
@@ -89,7 +89,7 @@
|
||||
@each $property in $properties {
|
||||
@if $is-local-vars {
|
||||
@each $local-var, $variable in $is-local-vars {
|
||||
--#{$prefix}#{$local-var}: #{$variable};
|
||||
--#{$local-var}: #{$variable};
|
||||
}
|
||||
}
|
||||
#{$property}: $value if(sass($enable-important-utilities): !important; else: null);
|
||||
|
||||
@@ -2,133 +2,133 @@
|
||||
|
||||
[data-bs-theme-base='slate'],
|
||||
[data-theme-base='slate'] {
|
||||
--#{$prefix}gray-50: #f8fafc;
|
||||
--#{$prefix}gray-100: #f1f5f9;
|
||||
--#{$prefix}gray-200: #e2e8f0;
|
||||
--#{$prefix}gray-300: #cbd5e1;
|
||||
--#{$prefix}gray-400: #94a3b8;
|
||||
--#{$prefix}gray-500: #64748b;
|
||||
--#{$prefix}gray-600: #475569;
|
||||
--#{$prefix}gray-700: #334155;
|
||||
--#{$prefix}gray-800: #1e293b;
|
||||
--#{$prefix}gray-900: #0f172a;
|
||||
--#{$prefix}gray-950: #020617;
|
||||
--gray-50: #f8fafc;
|
||||
--gray-100: #f1f5f9;
|
||||
--gray-200: #e2e8f0;
|
||||
--gray-300: #cbd5e1;
|
||||
--gray-400: #94a3b8;
|
||||
--gray-500: #64748b;
|
||||
--gray-600: #475569;
|
||||
--gray-700: #334155;
|
||||
--gray-800: #1e293b;
|
||||
--gray-900: #0f172a;
|
||||
--gray-950: #020617;
|
||||
}
|
||||
|
||||
[data-bs-theme-base='gray'],
|
||||
[data-theme-base='gray'] {
|
||||
--#{$prefix}gray-50: #{$gray-50};
|
||||
--#{$prefix}gray-100: #{$gray-100};
|
||||
--#{$prefix}gray-200: #{$gray-200};
|
||||
--#{$prefix}gray-300: #{$gray-300};
|
||||
--#{$prefix}gray-400: #{$gray-400};
|
||||
--#{$prefix}gray-500: #{$gray-500};
|
||||
--#{$prefix}gray-600: #{$gray-600};
|
||||
--#{$prefix}gray-700: #{$gray-700};
|
||||
--#{$prefix}gray-800: #{$gray-800};
|
||||
--#{$prefix}gray-900: #{$gray-900};
|
||||
--#{$prefix}gray-950: #{$gray-950};
|
||||
--gray-50: #{$gray-50};
|
||||
--gray-100: #{$gray-100};
|
||||
--gray-200: #{$gray-200};
|
||||
--gray-300: #{$gray-300};
|
||||
--gray-400: #{$gray-400};
|
||||
--gray-500: #{$gray-500};
|
||||
--gray-600: #{$gray-600};
|
||||
--gray-700: #{$gray-700};
|
||||
--gray-800: #{$gray-800};
|
||||
--gray-900: #{$gray-900};
|
||||
--gray-950: #{$gray-950};
|
||||
}
|
||||
|
||||
[data-bs-theme-base='zinc'],
|
||||
[data-theme-base='zinc'] {
|
||||
--#{$prefix}gray-50: #fafafa;
|
||||
--#{$prefix}gray-100: #f4f4f5;
|
||||
--#{$prefix}gray-200: #e4e4e7;
|
||||
--#{$prefix}gray-300: #d4d4d8;
|
||||
--#{$prefix}gray-400: #a1a1aa;
|
||||
--#{$prefix}gray-500: #71717a;
|
||||
--#{$prefix}gray-600: #52525b;
|
||||
--#{$prefix}gray-700: #3f3f46;
|
||||
--#{$prefix}gray-800: #27272a;
|
||||
--#{$prefix}gray-900: #18181b;
|
||||
--#{$prefix}gray-950: #09090b;
|
||||
--gray-50: #fafafa;
|
||||
--gray-100: #f4f4f5;
|
||||
--gray-200: #e4e4e7;
|
||||
--gray-300: #d4d4d8;
|
||||
--gray-400: #a1a1aa;
|
||||
--gray-500: #71717a;
|
||||
--gray-600: #52525b;
|
||||
--gray-700: #3f3f46;
|
||||
--gray-800: #27272a;
|
||||
--gray-900: #18181b;
|
||||
--gray-950: #09090b;
|
||||
}
|
||||
|
||||
[data-bs-theme-base='neutral'],
|
||||
[data-theme-base='neutral'] {
|
||||
--#{$prefix}gray-50: #fafafa;
|
||||
--#{$prefix}gray-100: #f5f5f5;
|
||||
--#{$prefix}gray-200: #e5e5e5;
|
||||
--#{$prefix}gray-300: #d4d4d4;
|
||||
--#{$prefix}gray-400: #a3a3a3;
|
||||
--#{$prefix}gray-500: #737373;
|
||||
--#{$prefix}gray-600: #525252;
|
||||
--#{$prefix}gray-700: #404040;
|
||||
--#{$prefix}gray-800: #262626;
|
||||
--#{$prefix}gray-900: #171717;
|
||||
--#{$prefix}gray-950: #0a0a0a;
|
||||
--gray-50: #fafafa;
|
||||
--gray-100: #f5f5f5;
|
||||
--gray-200: #e5e5e5;
|
||||
--gray-300: #d4d4d4;
|
||||
--gray-400: #a3a3a3;
|
||||
--gray-500: #737373;
|
||||
--gray-600: #525252;
|
||||
--gray-700: #404040;
|
||||
--gray-800: #262626;
|
||||
--gray-900: #171717;
|
||||
--gray-950: #0a0a0a;
|
||||
}
|
||||
|
||||
[data-bs-theme-base='stone'],
|
||||
[data-theme-base='stone'] {
|
||||
--#{$prefix}gray-50: #fafaf9;
|
||||
--#{$prefix}gray-100: #f5f5f4;
|
||||
--#{$prefix}gray-200: #e7e5e4;
|
||||
--#{$prefix}gray-300: #d6d3d1;
|
||||
--#{$prefix}gray-400: #a8a29e;
|
||||
--#{$prefix}gray-500: #78716c;
|
||||
--#{$prefix}gray-600: #57534e;
|
||||
--#{$prefix}gray-700: #44403c;
|
||||
--#{$prefix}gray-800: #292524;
|
||||
--#{$prefix}gray-900: #1c1917;
|
||||
--#{$prefix}gray-950: #0c0a09;
|
||||
--gray-50: #fafaf9;
|
||||
--gray-100: #f5f5f4;
|
||||
--gray-200: #e7e5e4;
|
||||
--gray-300: #d6d3d1;
|
||||
--gray-400: #a8a29e;
|
||||
--gray-500: #78716c;
|
||||
--gray-600: #57534e;
|
||||
--gray-700: #44403c;
|
||||
--gray-800: #292524;
|
||||
--gray-900: #1c1917;
|
||||
--gray-950: #0c0a09;
|
||||
}
|
||||
|
||||
// Easter egg: not listed in the theme settings panel, enable with `data-bs-theme-base="pink"` or `?theme-base=pink`
|
||||
[data-bs-theme-base='pink'],
|
||||
[data-theme-base='pink'] {
|
||||
--#{$prefix}gray-50: #fdf2f8;
|
||||
--#{$prefix}gray-100: #fce7f3;
|
||||
--#{$prefix}gray-200: #fbcfe8;
|
||||
--#{$prefix}gray-300: #f9a8d4;
|
||||
--#{$prefix}gray-400: #f472b6;
|
||||
--#{$prefix}gray-500: #ec4899;
|
||||
--#{$prefix}gray-600: #db2777;
|
||||
--#{$prefix}gray-700: #be185d;
|
||||
--#{$prefix}gray-800: #9d174d;
|
||||
--#{$prefix}gray-900: #831843;
|
||||
--#{$prefix}gray-950: #500724;
|
||||
--gray-50: #fdf2f8;
|
||||
--gray-100: #fce7f3;
|
||||
--gray-200: #fbcfe8;
|
||||
--gray-300: #f9a8d4;
|
||||
--gray-400: #f472b6;
|
||||
--gray-500: #ec4899;
|
||||
--gray-600: #db2777;
|
||||
--gray-700: #be185d;
|
||||
--gray-800: #9d174d;
|
||||
--gray-900: #831843;
|
||||
--gray-950: #500724;
|
||||
}
|
||||
|
||||
@each $name, $value in $extra-colors {
|
||||
[data-bs-theme-primary='#{$name}'],
|
||||
[data-theme-primary='#{$name}'] {
|
||||
--#{$prefix}primary: #{$value};
|
||||
--#{$prefix}primary-rgb: #{to-rgb($value)};
|
||||
--primary: #{$value};
|
||||
--primary-rgb: #{to-rgb($value)};
|
||||
}
|
||||
}
|
||||
|
||||
@each $value in (0, 0.5, 1, 1.5, 2) {
|
||||
[data-bs-theme-radius='#{$value}'],
|
||||
[data-theme-radius='#{$value}'] {
|
||||
--#{$prefix}border-radius-scale: #{$value};
|
||||
--border-radius-scale: #{$value};
|
||||
}
|
||||
}
|
||||
|
||||
[data-bs-theme-primary='inverted'],
|
||||
[data-theme-primary='inverted'] {
|
||||
--#{$prefix}primary: var(--#{$prefix}gray-800);
|
||||
--#{$prefix}primary-fg: var(--#{$prefix}light);
|
||||
--#{$prefix}primary-rgb: #{to-rgb($dark)};
|
||||
--primary: var(--gray-800);
|
||||
--primary-fg: var(--light);
|
||||
--primary-rgb: #{to-rgb($dark)};
|
||||
|
||||
&[data-bs-theme='dark'],
|
||||
[data-bs-theme='dark'],
|
||||
&[data-theme='dark'],
|
||||
[data-theme='dark'] {
|
||||
--#{$prefix}primary: #{$light};
|
||||
--#{$prefix}primary-fg: var(--#{$prefix}dark);
|
||||
--#{$prefix}primary-rgb: #{to-rgb($light)};
|
||||
--primary: #{$light};
|
||||
--primary-fg: var(--dark);
|
||||
--primary-rgb: #{to-rgb($light)};
|
||||
}
|
||||
}
|
||||
|
||||
@each $name, $value in (monospace: $font-family-monospace, sans-serif: $font-family-sans-serif, serif: $font-family-serif, comic: $font-family-comic) {
|
||||
[data-bs-theme-font='#{$name}'],
|
||||
[data-theme-font='#{$name}'] {
|
||||
--#{$prefix}body-font-family: var(--#{$prefix}font-#{$name});
|
||||
--body-font-family: var(--font-#{$name});
|
||||
|
||||
@if $name == 'monospace' {
|
||||
--#{$prefix}body-font-size: 80%;
|
||||
--body-font-size: 80%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,64 @@
|
||||
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
|
||||
|
||||
exports[`css custom-property prefixing > leaves vendor-owned names alone and prefixes everything else 1`] = `
|
||||
[
|
||||
"--fc-border-color",
|
||||
"--fc-daygrid-event-dot-width",
|
||||
"--fc-event-bg-color",
|
||||
"--fc-event-border-color",
|
||||
"--fc-event-text-color",
|
||||
"--gl-star-color",
|
||||
"--gl-star-color-inactive",
|
||||
"--gl-star-size",
|
||||
"--litepicker-button-next-month-color",
|
||||
"--litepicker-button-next-month-color-hover",
|
||||
"--litepicker-button-prev-month-color",
|
||||
"--litepicker-button-prev-month-color-hover",
|
||||
"--litepicker-container-months-color-bg",
|
||||
"--litepicker-day-color",
|
||||
"--litepicker-day-color-hover",
|
||||
"--litepicker-is-end-color-bg",
|
||||
"--litepicker-is-in-range-color",
|
||||
"--litepicker-is-start-color-bg",
|
||||
"--litepicker-is-today-color",
|
||||
"--litepicker-month-header-color",
|
||||
"--litepicker-month-weekday-color",
|
||||
"--plyr-color-main",
|
||||
"--tblr-active-bg",
|
||||
"--tblr-backdrop-bg",
|
||||
"--tblr-bg-forms",
|
||||
"--tblr-bg-surface",
|
||||
"--tblr-bg-surface-inverted",
|
||||
"--tblr-bg-surface-secondary",
|
||||
"--tblr-body-bg",
|
||||
"--tblr-body-color",
|
||||
"--tblr-border-color",
|
||||
"--tblr-border-color-translucent",
|
||||
"--tblr-border-radius",
|
||||
"--tblr-border-style",
|
||||
"--tblr-border-width",
|
||||
"--tblr-card-bg",
|
||||
"--tblr-font-sans-serif",
|
||||
"--tblr-font-size-h3",
|
||||
"--tblr-font-size-h5",
|
||||
"--tblr-font-weight-medium",
|
||||
"--tblr-font-weight-semibold",
|
||||
"--tblr-gray-500",
|
||||
"--tblr-icon-size",
|
||||
"--tblr-info",
|
||||
"--tblr-light",
|
||||
"--tblr-primary",
|
||||
"--tblr-primary-200",
|
||||
"--tblr-primary-lt",
|
||||
"--tblr-secondary",
|
||||
"--tblr-secondary-bg",
|
||||
"--tblr-shadow-card",
|
||||
"--tblr-shadow-dropdown",
|
||||
"--tblr-shadow-input",
|
||||
"--tblr-tertiary",
|
||||
"--tblr-text-inverted",
|
||||
"--tblr-yellow",
|
||||
"--ts-pr-caret",
|
||||
"--ts-pr-clear-button",
|
||||
]
|
||||
`;
|
||||
@@ -76,8 +76,8 @@
|
||||
vertical-align: 0.306em;
|
||||
width: 0.36em;
|
||||
height: 0.36em;
|
||||
border-bottom: 1px var(--tblr-border-style);
|
||||
border-inline-start: 1px var(--tblr-border-style);
|
||||
border-bottom: 1px var(--border-style);
|
||||
border-inline-start: 1px var(--border-style);
|
||||
margin-inline-end: 0.1em;
|
||||
margin-inline-start: 0.306em;
|
||||
transform: rotate(-45deg);
|
||||
@@ -100,8 +100,8 @@
|
||||
vertical-align: 0.306em;
|
||||
width: 0.36em;
|
||||
height: 0.36em;
|
||||
border-bottom: 1px var(--tblr-border-style);
|
||||
border-inline-start: 1px var(--tblr-border-style);
|
||||
border-bottom: 1px var(--border-style);
|
||||
border-inline-start: 1px var(--border-style);
|
||||
margin-inline-end: 0.1em;
|
||||
margin-inline-end: 0.306em;
|
||||
transform: rotate(45deg);
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
// Tests for the CSS custom-property builders in scss/mixins/_functions.scss:
|
||||
// `varify()` and `rgba-css-var()`. Both read the global `$prefix`, which lives
|
||||
// in scss/_settings.scss (already `@use`d by functions.scss), so a plain `@use`
|
||||
// of the functions module is enough — no fixtures.
|
||||
// `varify()` and `rgba-css-var()`. A plain `@use` of the functions module is
|
||||
// enough — no fixtures. Both emit unprefixed names: the `--tblr-` prefix is
|
||||
// added later, by the css pipeline (.build/css-var-prefix.ts).
|
||||
|
||||
@use 'sass:meta';
|
||||
@use '../mixins/functions' as *;
|
||||
@@ -19,7 +19,7 @@
|
||||
}
|
||||
@include expect() {
|
||||
.t {
|
||||
padding: var(--tblr-gutter-x) var(--tblr-gutter-y);
|
||||
padding: var(--gutter-x) var(--gutter-y);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -28,10 +28,10 @@
|
||||
|
||||
@include describe('rgba-css-var') {
|
||||
@include it('builds a color-mix() from the identifier and target opacity') {
|
||||
@include assert-equal(meta.inspect(rgba-css-var('primary', 'bg')), 'color-mix(in srgb, var(--tblr-primary) calc(var(--tblr-bg-opacity) * 100%), transparent)');
|
||||
@include assert-equal(meta.inspect(rgba-css-var('primary', 'bg')), 'color-mix(in srgb, var(--primary) calc(var(--bg-opacity) * 100%), transparent)');
|
||||
}
|
||||
|
||||
@include it('special-cases the body background') {
|
||||
@include assert-equal(meta.inspect(rgba-css-var('body', 'bg')), 'color-mix(in srgb, var(--tblr-body-bg) calc(var(--tblr-bg-opacity) * 100%), transparent)');
|
||||
@include assert-equal(meta.inspect(rgba-css-var('body', 'bg')), 'color-mix(in srgb, var(--body-bg) calc(var(--bg-opacity) * 100%), transparent)');
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
// Output tests for the `generate-utility` mixin from
|
||||
// scss/mixins/bootstrap/_utilities.scss — the engine behind Tabler's utility
|
||||
// classes. `@use "../mixins/bootstrap/utilities"` pulls in the real
|
||||
// settings/variables chain, so `$prefix` = "tblr-" and
|
||||
// `$enable-important-utilities` = true (hence the `!important` in the output).
|
||||
// settings/variables chain, so `$enable-important-utilities` = true (hence the
|
||||
// `!important` in the output). Custom properties are expected unprefixed: the
|
||||
// `--tblr-` prefix is added later, by the css pipeline (.build/css-var-prefix.ts).
|
||||
//
|
||||
// Each `it` feeds the mixin a hand-built utility map and asserts the generated
|
||||
// classes, covering the branches that shape the output: map vs list values,
|
||||
@@ -106,7 +107,7 @@
|
||||
}
|
||||
@include expect() {
|
||||
.opacity-50 {
|
||||
--tblr-opacity: 0.5;
|
||||
--opacity: 0.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -117,13 +117,13 @@
|
||||
}
|
||||
@include expect() {
|
||||
.t {
|
||||
--tblr-gutter-x: 1rem;
|
||||
--tblr-gutter-y: 0;
|
||||
--gutter-x: 1rem;
|
||||
--gutter-y: 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: calc(-1 * var(--tblr-gutter-y));
|
||||
margin-inline-end: calc(-0.5 * var(--tblr-gutter-x));
|
||||
margin-inline-start: calc(-0.5 * var(--tblr-gutter-x));
|
||||
margin-top: calc(-1 * var(--gutter-y));
|
||||
margin-inline-end: calc(-0.5 * var(--gutter-x));
|
||||
margin-inline-start: calc(-0.5 * var(--gutter-x));
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -143,9 +143,9 @@
|
||||
flex-shrink: 0;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
padding-inline-end: calc(var(--tblr-gutter-x) * 0.5);
|
||||
padding-inline-start: calc(var(--tblr-gutter-x) * 0.5);
|
||||
margin-top: var(--tblr-gutter-y);
|
||||
padding-inline-end: calc(var(--gutter-x) * 0.5);
|
||||
padding-inline-start: calc(var(--gutter-x) * 0.5);
|
||||
margin-top: var(--gutter-y);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,8 +2,9 @@
|
||||
//
|
||||
// `@use "../mixins/mixins"` transitively pulls in the real settings/variables
|
||||
// chain (all relative to that file, so no extra load paths are needed), which
|
||||
// means the assertions run against real values — `$prefix` = "tblr-", the real
|
||||
// `$h5-font-size`, etc. — instead of fixtures.
|
||||
// means the assertions run against real values — the real `$h5-font-size`,
|
||||
// etc. — instead of fixtures. Custom properties are expected unprefixed: the
|
||||
// `--tblr-` prefix is added later, by the css pipeline (.build/css-var-prefix.ts).
|
||||
|
||||
@use '../mixins/mixins' as *;
|
||||
|
||||
@@ -18,11 +19,11 @@
|
||||
@include expect() {
|
||||
.t {
|
||||
font-size: 0.75rem;
|
||||
font-weight: var(--tblr-font-weight-medium);
|
||||
font-weight: var(--font-weight-medium);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
line-height: 1rem;
|
||||
color: var(--tblr-secondary);
|
||||
color: var(--secondary);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -38,7 +39,7 @@
|
||||
@include expect() {
|
||||
.t {
|
||||
font-size: 0.75rem;
|
||||
font-weight: var(--tblr-font-weight-medium);
|
||||
font-weight: var(--font-weight-medium);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
@@ -74,10 +75,10 @@
|
||||
}
|
||||
@include expect() {
|
||||
.t {
|
||||
--tblr-list-gap: 0.5rem;
|
||||
--list-gap: 0.5rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--tblr-list-gap);
|
||||
gap: var(--list-gap);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -92,10 +93,10 @@
|
||||
}
|
||||
@include expect() {
|
||||
.t {
|
||||
--tblr-list-gap: 1rem;
|
||||
--list-gap: 1rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--tblr-list-gap);
|
||||
gap: var(--list-gap);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -114,8 +115,8 @@
|
||||
.t {
|
||||
outline: 0;
|
||||
box-shadow:
|
||||
0 0 0 2px var(--tblr-primary),
|
||||
0 0 0 0.25rem color-mix(in srgb, var(--tblr-primary) 25%, transparent);
|
||||
0 0 0 2px var(--primary),
|
||||
0 0 0 0.25rem color-mix(in srgb, var(--primary) 25%, transparent);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -132,9 +133,9 @@
|
||||
.t {
|
||||
outline: 0;
|
||||
box-shadow:
|
||||
0 0 0 2px var(--tblr-primary),
|
||||
0 0 0 0.25rem color-mix(in srgb, var(--tblr-primary) 25%, transparent);
|
||||
border-color: color-mix(in srgb, var(--tblr-primary) 25%, transparent);
|
||||
0 0 0 2px var(--primary),
|
||||
0 0 0 0.25rem color-mix(in srgb, var(--primary) 25%, transparent);
|
||||
border-color: color-mix(in srgb, var(--primary) 25%, transparent);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -175,7 +176,7 @@
|
||||
}
|
||||
@include expect() {
|
||||
.scroll {
|
||||
scrollbar-color: color-mix(in srgb, var(--tblr-scrollbar-color, var(--tblr-body-color)) 20%, transparent) transparent;
|
||||
scrollbar-color: color-mix(in srgb, var(--scrollbar-color, var(--body-color)) 20%, transparent) transparent;
|
||||
}
|
||||
.scroll::-webkit-scrollbar {
|
||||
width: 1rem;
|
||||
@@ -190,13 +191,13 @@
|
||||
.scroll::-webkit-scrollbar-thumb {
|
||||
border-radius: 1rem;
|
||||
border: 5px solid transparent;
|
||||
box-shadow: inset 0 0 0 1rem color-mix(in srgb, var(--tblr-scrollbar-color, var(--tblr-body-color)) 20%, transparent);
|
||||
box-shadow: inset 0 0 0 1rem color-mix(in srgb, var(--scrollbar-color, var(--body-color)) 20%, transparent);
|
||||
}
|
||||
.scroll::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
.scroll:hover::-webkit-scrollbar-thumb {
|
||||
box-shadow: inset 0 0 0 1rem color-mix(in srgb, var(--tblr-scrollbar-color, var(--tblr-body-color)) 40%, transparent);
|
||||
box-shadow: inset 0 0 0 1rem color-mix(in srgb, var(--scrollbar-color, var(--body-color)) 40%, transparent);
|
||||
}
|
||||
.scroll::-webkit-scrollbar-corner {
|
||||
background: transparent;
|
||||
|
||||
@@ -0,0 +1,61 @@
|
||||
// Guards the build-time `--tblr-` prefixing configured in .build/css-var-prefix.ts.
|
||||
//
|
||||
// Custom properties are authored bare in scss, so a name Tabler owns and a name
|
||||
// a vendor library owns look identical in source — only `cssVarIgnore` tells
|
||||
// them apart. Get that wrong and nothing fails: the vendor's variable quietly
|
||||
// becomes `--tblr-fc-border-color`, the library never reads it, and the theming
|
||||
// is simply gone.
|
||||
//
|
||||
// tabler-vendors.scss is where every foreign name lives, so its full set of
|
||||
// custom-property names is snapshotted. A vendor override added without the
|
||||
// matching `cssVarIgnore` entry shows up in the snapshot diff as a `--tblr-`
|
||||
// name that plainly belongs to someone else.
|
||||
import { describe, expect, it } from 'vitest'
|
||||
import { readdirSync } from 'node:fs'
|
||||
import path from 'node:path'
|
||||
import { fileURLToPath } from 'node:url'
|
||||
import { compile as compileSass } from 'sass'
|
||||
import postcss from 'postcss'
|
||||
import prefixCustomProperties from 'postcss-prefix-custom-properties'
|
||||
import { cssVarIgnore, cssVarPrefix, inlineValueComments } from '../../../.build/css-var-prefix.ts'
|
||||
|
||||
const scssDir = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..')
|
||||
|
||||
// The same two passes build-css.ts runs before autoprefixer.
|
||||
async function buildCustomPropertyNames(entry) {
|
||||
const { css } = compileSass(path.join(scssDir, entry), { loadPaths: ['node_modules'], style: 'expanded' })
|
||||
const result = await postcss([
|
||||
inlineValueComments,
|
||||
prefixCustomProperties({ prefix: cssVarPrefix, ignore: cssVarIgnore }),
|
||||
]).process(css, { from: undefined })
|
||||
|
||||
const names = new Set()
|
||||
result.root.walkDecls((decl) => {
|
||||
if (decl.prop.startsWith('--')) names.add(decl.prop)
|
||||
for (const [, name] of decl.value.matchAll(/var\(\s*(--[\w-]+)/g)) names.add(name)
|
||||
})
|
||||
result.root.walkAtRules('property', (atRule) => names.add(atRule.params.trim()))
|
||||
|
||||
return [...names].sort()
|
||||
}
|
||||
|
||||
describe('css custom-property prefixing', () => {
|
||||
it('leaves vendor-owned names alone and prefixes everything else', async () => {
|
||||
await expect(buildCustomPropertyNames('tabler-vendors.scss')).resolves.toMatchSnapshot()
|
||||
})
|
||||
|
||||
it('has no dead entries in the ignore list', async () => {
|
||||
// A pattern matching nothing means the vendor it protected is gone, or the
|
||||
// name drifted — either way the entry no longer guards anything.
|
||||
// Every entry point, since foreign names are spread across the bundles.
|
||||
const entries = readdirSync(scssDir).filter((file) => file.endsWith('.scss') && !file.startsWith('_'))
|
||||
const perEntry = await Promise.all(entries.map(buildCustomPropertyNames))
|
||||
const all = [...new Set(perEntry.flat())]
|
||||
|
||||
for (const pattern of cssVarIgnore) {
|
||||
const matches =
|
||||
pattern instanceof RegExp ? all.some((name) => pattern.test(name)) : all.includes(pattern)
|
||||
expect(matches, `unused cssVarIgnore entry: ${pattern}`).toBe(true)
|
||||
}
|
||||
})
|
||||
})
|
||||
@@ -1,27 +1,27 @@
|
||||
@use '../config' as *;
|
||||
|
||||
.accordion {
|
||||
--#{$prefix}accordion-color: var(--#{$prefix}body-color);
|
||||
--#{$prefix}accordion-border-color: var(--#{$prefix}border-color);
|
||||
--#{$prefix}accordion-border-radius: #{$accordion-border-radius};
|
||||
--#{$prefix}accordion-inner-border-radius: #{$accordion-inner-border-radius};
|
||||
--#{$prefix}accordion-padding-x: #{$accordion-body-padding-x};
|
||||
--#{$prefix}accordion-gap: 0;
|
||||
--#{$prefix}accordion-active-color: #{$accordion-button-active-color};
|
||||
--#{$prefix}accordion-btn-color: var(--#{$prefix}accordion-color);
|
||||
--#{$prefix}accordion-btn-bg: #{$accordion-button-bg};
|
||||
--#{$prefix}accordion-btn-toggle-width: #{$accordion-btn-toggle-width};
|
||||
--#{$prefix}accordion-btn-padding-x: var(--#{$prefix}accordion-padding-x);
|
||||
--#{$prefix}accordion-btn-padding-y: #{$accordion-button-padding-y};
|
||||
--#{$prefix}accordion-btn-font-weight: var(--#{$prefix}font-weight-medium);
|
||||
--#{$prefix}accordion-body-padding-x: var(--#{$prefix}accordion-padding-x);
|
||||
--#{$prefix}accordion-body-padding-y: #{$accordion-body-padding-y};
|
||||
--#{$prefix}accordion-btn-gap: #{$accordion-btn-gap};
|
||||
--#{$prefix}accordion-header-gap: #{$accordion-header-gap};
|
||||
--accordion-color: var(--body-color);
|
||||
--accordion-border-color: var(--border-color);
|
||||
--accordion-border-radius: #{$accordion-border-radius};
|
||||
--accordion-inner-border-radius: #{$accordion-inner-border-radius};
|
||||
--accordion-padding-x: #{$accordion-body-padding-x};
|
||||
--accordion-gap: 0;
|
||||
--accordion-active-color: #{$accordion-button-active-color};
|
||||
--accordion-btn-color: var(--accordion-color);
|
||||
--accordion-btn-bg: #{$accordion-button-bg};
|
||||
--accordion-btn-toggle-width: #{$accordion-btn-toggle-width};
|
||||
--accordion-btn-padding-x: var(--accordion-padding-x);
|
||||
--accordion-btn-padding-y: #{$accordion-button-padding-y};
|
||||
--accordion-btn-font-weight: var(--font-weight-medium);
|
||||
--accordion-body-padding-x: var(--accordion-padding-x);
|
||||
--accordion-body-padding-y: #{$accordion-body-padding-y};
|
||||
--accordion-btn-gap: #{$accordion-btn-gap};
|
||||
--accordion-header-gap: #{$accordion-header-gap};
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--#{$prefix}accordion-gap);
|
||||
gap: var(--accordion-gap);
|
||||
}
|
||||
|
||||
.accordion-button {
|
||||
@@ -29,19 +29,19 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
padding: var(--#{$prefix}accordion-btn-padding-y) var(--#{$prefix}accordion-padding-x);
|
||||
padding: var(--accordion-btn-padding-y) var(--accordion-padding-x);
|
||||
color: inherit;
|
||||
text-align: inherit;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
font-size: inherit;
|
||||
font-weight: var(--#{$prefix}accordion-btn-font-weight);
|
||||
gap: var(--#{$prefix}accordion-btn-gap);
|
||||
font-weight: var(--accordion-btn-font-weight);
|
||||
gap: var(--accordion-btn-gap);
|
||||
|
||||
&:not(.collapsed) {
|
||||
border-bottom-color: transparent;
|
||||
box-shadow: none;
|
||||
color: var(--#{$prefix}accordion-active-color);
|
||||
color: var(--accordion-active-color);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -49,10 +49,10 @@
|
||||
margin: 0;
|
||||
position: relative;
|
||||
display: flex;
|
||||
gap: var(--#{$prefix}accordion-header-gap);
|
||||
gap: var(--accordion-header-gap);
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
color: var(--#{$prefix}accordion-btn-color);
|
||||
color: var(--accordion-btn-color);
|
||||
text-align: start;
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
@@ -66,7 +66,7 @@
|
||||
&:focus {
|
||||
z-index: 3;
|
||||
outline: 0;
|
||||
box-shadow: var(--#{$prefix}accordion-btn-focus-box-shadow);
|
||||
box-shadow: var(--accordion-btn-focus-box-shadow);
|
||||
|
||||
&:not(:focus-visible) {
|
||||
outline: none;
|
||||
@@ -76,7 +76,7 @@
|
||||
}
|
||||
|
||||
.accordion-button-icon {
|
||||
color: var(--#{$prefix}secondary);
|
||||
color: var(--secondary);
|
||||
}
|
||||
|
||||
.accordion-button-toggle {
|
||||
@@ -85,13 +85,13 @@
|
||||
transition: $transition-time transform;
|
||||
margin-inline-start: auto;
|
||||
margin-inline-end: 0;
|
||||
color: var(--#{$prefix}secondary);
|
||||
width: var(--#{$prefix}accordion-btn-toggle-width);
|
||||
height: var(--#{$prefix}accordion-btn-toggle-width);
|
||||
color: var(--secondary);
|
||||
width: var(--accordion-btn-toggle-width);
|
||||
height: var(--accordion-btn-toggle-width);
|
||||
|
||||
.accordion-button:not(.collapsed) & {
|
||||
transform: rotate(-180deg);
|
||||
color: var(--#{$prefix}accordion-active-color);
|
||||
color: var(--accordion-active-color);
|
||||
}
|
||||
|
||||
path {
|
||||
@@ -108,14 +108,14 @@
|
||||
}
|
||||
|
||||
.accordion-item {
|
||||
color: var(--#{$prefix}accordion-color);
|
||||
border: var(--#{$prefix}border-width) solid var(--#{$prefix}accordion-border-color);
|
||||
color: var(--accordion-color);
|
||||
border: var(--border-width) solid var(--accordion-border-color);
|
||||
|
||||
&:first-of-type {
|
||||
@include border-top-radius(var(--#{$prefix}accordion-border-radius));
|
||||
@include border-top-radius(var(--accordion-border-radius));
|
||||
|
||||
> .accordion-header {
|
||||
@include border-top-radius(var(--#{$prefix}accordion-inner-border-radius));
|
||||
@include border-top-radius(var(--accordion-inner-border-radius));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -124,23 +124,23 @@
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
@include border-bottom-radius(var(--#{$prefix}accordion-border-radius));
|
||||
@include border-bottom-radius(var(--accordion-border-radius));
|
||||
|
||||
> .accordion-header {
|
||||
&.collapsed {
|
||||
@include border-bottom-radius(var(--#{$prefix}accordion-inner-border-radius));
|
||||
@include border-bottom-radius(var(--accordion-inner-border-radius));
|
||||
}
|
||||
}
|
||||
|
||||
> .accordion-collapse {
|
||||
@include border-bottom-radius(var(--#{$prefix}accordion-border-radius));
|
||||
@include border-bottom-radius(var(--accordion-border-radius));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.accordion-body {
|
||||
color: var(--#{$prefix}secondary);
|
||||
padding: 0 var(--#{$prefix}accordion-body-padding-x) var(--#{$prefix}accordion-body-padding-y);
|
||||
color: var(--secondary);
|
||||
padding: 0 var(--accordion-body-padding-x) var(--accordion-body-padding-y);
|
||||
}
|
||||
|
||||
.accordion-flush {
|
||||
@@ -165,11 +165,11 @@
|
||||
}
|
||||
|
||||
.accordion-tabs {
|
||||
--#{$prefix}accordion-gap: #{$accordion-tabs-gap};
|
||||
--accordion-gap: #{$accordion-tabs-gap};
|
||||
|
||||
> .accordion-item {
|
||||
border: var(--#{$prefix}border-width) solid var(--#{$prefix}accordion-border-color);
|
||||
@include border-radius(var(--#{$prefix}accordion-border-radius));
|
||||
border: var(--border-width) solid var(--accordion-border-color);
|
||||
@include border-radius(var(--accordion-border-radius));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
+41
-41
@@ -1,54 +1,54 @@
|
||||
@use '../config' as *;
|
||||
|
||||
.alert {
|
||||
--#{$prefix}alert-variant-color: var(--#{$prefix}body-color);
|
||||
--#{$prefix}alert-color: var(--#{$prefix}alert-variant-color);
|
||||
--#{$prefix}alert-bg: #{color-transparent(var(--#{$prefix}alert-variant-color), 0.16, var(--#{$prefix}bg-surface))};
|
||||
--#{$prefix}alert-padding-x: #{$alert-padding-x};
|
||||
--#{$prefix}alert-padding-y: #{$alert-padding-y};
|
||||
--#{$prefix}alert-margin-bottom: #{$alert-margin-bottom};
|
||||
--#{$prefix}alert-border-color: #{color-transparent(var(--#{$prefix}alert-variant-color), 0.2, var(--#{$prefix}bg-surface))};
|
||||
--#{$prefix}alert-border-color: var(--#{$prefix}border-color);
|
||||
--#{$prefix}alert-border: var(--#{$prefix}border-width) solid var(--#{$prefix}alert-border-color);
|
||||
--#{$prefix}alert-border-radius: var(--#{$prefix}border-radius);
|
||||
--#{$prefix}alert-link-color: inherit;
|
||||
--#{$prefix}alert-heading-font-weight: var(--#{$prefix}font-weight-medium);
|
||||
--#{$prefix}alert-heading-margin-bottom: #{$alert-heading-margin-bottom};
|
||||
--#{$prefix}alert-icon-size: #{$alert-icon-size};
|
||||
--#{$prefix}alert-padding-inline-end: #{$alert-padding-inline-end};
|
||||
--#{$prefix}alert-gap: #{$alert-gap};
|
||||
--alert-variant-color: var(--body-color);
|
||||
--alert-color: var(--alert-variant-color);
|
||||
--alert-bg: #{color-transparent(var(--alert-variant-color), 0.16, var(--bg-surface))};
|
||||
--alert-padding-x: #{$alert-padding-x};
|
||||
--alert-padding-y: #{$alert-padding-y};
|
||||
--alert-margin-bottom: #{$alert-margin-bottom};
|
||||
--alert-border-color: #{color-transparent(var(--alert-variant-color), 0.2, var(--bg-surface))};
|
||||
--alert-border-color: var(--border-color);
|
||||
--alert-border: var(--border-width) solid var(--alert-border-color);
|
||||
--alert-border-radius: var(--border-radius);
|
||||
--alert-link-color: inherit;
|
||||
--alert-heading-font-weight: var(--font-weight-medium);
|
||||
--alert-heading-margin-bottom: #{$alert-heading-margin-bottom};
|
||||
--alert-icon-size: #{$alert-icon-size};
|
||||
--alert-padding-inline-end: #{$alert-padding-inline-end};
|
||||
--alert-gap: #{$alert-gap};
|
||||
|
||||
position: relative;
|
||||
padding: var(--#{$prefix}alert-padding-y) var(--#{$prefix}alert-padding-x);
|
||||
margin-bottom: var(--#{$prefix}alert-margin-bottom);
|
||||
background-color: color-mix(in srgb, var(--#{$prefix}alert-bg), var(--#{$prefix}bg-surface));
|
||||
@include border-radius(var(--#{$prefix}alert-border-radius));
|
||||
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}alert-border-color);
|
||||
box-shadow: var(--#{$prefix}box-shadow);
|
||||
color: var(--#{$prefix}alert-color);
|
||||
padding: var(--alert-padding-y) var(--alert-padding-x);
|
||||
margin-bottom: var(--alert-margin-bottom);
|
||||
background-color: color-mix(in srgb, var(--alert-bg), var(--bg-surface));
|
||||
@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(--#{$prefix}alert-gap);
|
||||
gap: var(--alert-gap);
|
||||
}
|
||||
|
||||
.alert-heading {
|
||||
color: inherit;
|
||||
margin-bottom: var(--#{$prefix}alert-heading-margin-bottom);
|
||||
font-weight: var(--#{$prefix}alert-heading-font-weight);
|
||||
margin-bottom: var(--alert-heading-margin-bottom);
|
||||
font-weight: var(--alert-heading-font-weight);
|
||||
}
|
||||
|
||||
.alert-description {
|
||||
color: var(--#{$prefix}secondary);
|
||||
color: var(--secondary);
|
||||
}
|
||||
|
||||
.alert-icon {
|
||||
color: var(--#{$prefix}alert-color);
|
||||
width: var(--#{$prefix}alert-icon-size) !important;
|
||||
height: var(--#{$prefix}alert-icon-size) !important;
|
||||
color: var(--alert-color);
|
||||
width: var(--alert-icon-size) !important;
|
||||
height: var(--alert-icon-size) !important;
|
||||
}
|
||||
|
||||
.alert-action {
|
||||
color: var(--#{$prefix}alert-color);
|
||||
color: var(--alert-color);
|
||||
text-decoration: underline;
|
||||
|
||||
&:hover {
|
||||
@@ -62,29 +62,29 @@
|
||||
|
||||
.alert-link {
|
||||
font-weight: $alert-link-font-weight;
|
||||
color: var(--#{$prefix}alert-link-color);
|
||||
color: var(--alert-link-color);
|
||||
|
||||
&,
|
||||
&:hover {
|
||||
color: var(--#{$prefix}alert-color);
|
||||
color: var(--alert-color);
|
||||
}
|
||||
}
|
||||
|
||||
.alert-dismissible {
|
||||
padding-inline-end: var(--#{$prefix}alert-padding-inline-end);
|
||||
padding-inline-end: var(--alert-padding-inline-end);
|
||||
|
||||
.btn-close {
|
||||
position: absolute;
|
||||
top: calc(var(--#{$prefix}alert-padding-x) / 2 - 1px);
|
||||
inset-inline-end: calc(var(--#{$prefix}alert-padding-y) / 2 - 1px);
|
||||
top: calc(var(--alert-padding-x) / 2 - 1px);
|
||||
inset-inline-end: calc(var(--alert-padding-y) / 2 - 1px);
|
||||
z-index: 1;
|
||||
padding: calc(var(--#{$prefix}alert-padding-y) * 1.25) var(--#{$prefix}alert-padding-x);
|
||||
padding: calc(var(--alert-padding-y) * 1.25) var(--alert-padding-x);
|
||||
}
|
||||
}
|
||||
|
||||
.alert-important {
|
||||
background-color: var(--#{$prefix}alert-variant-color);
|
||||
color: var(--#{$prefix}white);
|
||||
background-color: var(--alert-variant-color);
|
||||
color: var(--white);
|
||||
|
||||
.alert-description {
|
||||
color: inherit;
|
||||
@@ -97,11 +97,11 @@
|
||||
|
||||
.alert-minor {
|
||||
background: transparent;
|
||||
border-color: var(--tblr-border-color);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
@each $name, $color in $theme-colors {
|
||||
.alert-#{$name} {
|
||||
--#{$prefix}alert-variant-color: var(--#{$prefix}#{$name});
|
||||
--alert-variant-color: var(--#{$name});
|
||||
}
|
||||
}
|
||||
|
||||
+55
-55
@@ -3,75 +3,75 @@
|
||||
@use '../config' as *;
|
||||
|
||||
.avatar {
|
||||
--#{$prefix}avatar-size: var(--#{$prefix}avatar-list-size, #{$avatar-size});
|
||||
--#{$prefix}avatar-status-size: #{$avatar-status-size};
|
||||
--#{$prefix}avatar-bg: #{$avatar-bg};
|
||||
--#{$prefix}avatar-box-shadow-color: var(--#{$prefix}border-color-translucent);
|
||||
--#{$prefix}avatar-box-shadow: inset 0 0 0 1px var(--#{$prefix}avatar-box-shadow-color);
|
||||
--#{$prefix}avatar-font-size: #{$avatar-font-size};
|
||||
--#{$prefix}avatar-icon-size: #{$avatar-icon-size};
|
||||
--#{$prefix}avatar-brand-size: #{$avatar-brand-size};
|
||||
--#{$prefix}avatar-border-radius: #{$avatar-border-radius};
|
||||
--avatar-size: var(--avatar-list-size, #{$avatar-size});
|
||||
--avatar-status-size: #{$avatar-status-size};
|
||||
--avatar-bg: #{$avatar-bg};
|
||||
--avatar-box-shadow-color: var(--border-color-translucent);
|
||||
--avatar-box-shadow: inset 0 0 0 1px var(--avatar-box-shadow-color);
|
||||
--avatar-font-size: #{$avatar-font-size};
|
||||
--avatar-icon-size: #{$avatar-icon-size};
|
||||
--avatar-brand-size: #{$avatar-brand-size};
|
||||
--avatar-border-radius: #{$avatar-border-radius};
|
||||
position: relative;
|
||||
width: var(--#{$prefix}avatar-size);
|
||||
height: var(--#{$prefix}avatar-size);
|
||||
font-size: var(--#{$prefix}avatar-font-size);
|
||||
font-weight: var(--#{$prefix}font-weight-medium);
|
||||
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(--#{$prefix}secondary);
|
||||
color: var(--secondary);
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
vertical-align: bottom;
|
||||
user-select: none;
|
||||
background: var(--#{$prefix}avatar-bg) no-repeat center/cover;
|
||||
@include border-radius(var(--#{$prefix}avatar-border-radius));
|
||||
box-shadow: var(--#{$prefix}avatar-box-shadow);
|
||||
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;
|
||||
|
||||
.icon {
|
||||
width: var(--#{$prefix}avatar-icon-size);
|
||||
height: var(--#{$prefix}avatar-icon-size);
|
||||
width: var(--avatar-icon-size);
|
||||
height: var(--avatar-icon-size);
|
||||
}
|
||||
|
||||
.badge {
|
||||
position: absolute;
|
||||
inset-inline-end: 0;
|
||||
bottom: 0;
|
||||
@include border-radius(var(--#{$prefix}border-radius-pill));
|
||||
box-shadow: 0 0 0 calc(var(--#{$prefix}avatar-status-size) / 4) $card-bg;
|
||||
@include border-radius(var(--border-radius-pill));
|
||||
box-shadow: 0 0 0 calc(var(--avatar-status-size) / 4) $card-bg;
|
||||
}
|
||||
|
||||
@at-root a#{&} {
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: var(--#{$prefix}primary);
|
||||
--#{$prefix}avatar-box-shadow-color: var(--#{$prefix}primary);
|
||||
color: var(--primary);
|
||||
--avatar-box-shadow-color: var(--primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.avatar-rounded {
|
||||
@include border-radius(var(--#{$prefix}border-radius-pill));
|
||||
@include border-radius(var(--border-radius-pill));
|
||||
}
|
||||
|
||||
.avatar-square {
|
||||
@include border-radius(var(--#{$prefix}border-radius));
|
||||
@include border-radius(var(--border-radius));
|
||||
}
|
||||
|
||||
@each $avatar-size, $size in $avatar-sizes {
|
||||
.avatar-#{$avatar-size} {
|
||||
--#{$prefix}avatar-size: #{map.get($size, size)};
|
||||
--#{$prefix}avatar-status-size: #{map.get($size, status-size)};
|
||||
--#{$prefix}avatar-font-size: #{map.get($size, font-size)};
|
||||
--#{$prefix}avatar-icon-size: #{map.get($size, icon-size)};
|
||||
--#{$prefix}avatar-brand-size: #{map.get($size, brand-size)};
|
||||
--avatar-size: #{map.get($size, size)};
|
||||
--avatar-status-size: #{map.get($size, status-size)};
|
||||
--avatar-font-size: #{map.get($size, font-size)};
|
||||
--avatar-icon-size: #{map.get($size, icon-size)};
|
||||
--avatar-brand-size: #{map.get($size, brand-size)};
|
||||
|
||||
.badge:empty {
|
||||
width: map.get($size, status-size);
|
||||
@@ -88,7 +88,7 @@
|
||||
// Avatar list
|
||||
//
|
||||
.avatar-list {
|
||||
--#{$prefix}avatar-list-size: #{$avatar-size};
|
||||
--avatar-list-size: #{$avatar-size};
|
||||
@include elements-list;
|
||||
|
||||
a.avatar {
|
||||
@@ -100,22 +100,22 @@
|
||||
|
||||
.avatar-list-stacked {
|
||||
display: block;
|
||||
--#{$prefix}list-gap: 0;
|
||||
--list-gap: 0;
|
||||
|
||||
.avatar {
|
||||
box-shadow:
|
||||
var(--#{$prefix}avatar-box-shadow),
|
||||
0 0 0 2px var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
|
||||
var(--avatar-box-shadow),
|
||||
0 0 0 2px var(--card-bg, var(--bg-surface));
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-inline-start: calc(#{$avatar-list-spacing} * var(--#{$prefix}avatar-size)) !important;
|
||||
margin-inline-start: calc(#{$avatar-list-spacing} * var(--avatar-size)) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@each $avatar-size, $size in $avatar-sizes {
|
||||
.avatar-list-#{$avatar-size} {
|
||||
--#{$prefix}avatar-list-size: #{map.get($size, size)};
|
||||
--avatar-list-size: #{map.get($size, size)};
|
||||
}
|
||||
}
|
||||
|
||||
@@ -123,24 +123,24 @@
|
||||
// Avatar upload
|
||||
//
|
||||
.avatar-upload {
|
||||
--#{$prefix}avatar-upload-icon-size: #{$avatar-upload-icon-size};
|
||||
--#{$prefix}avatar-upload-text-margin-top: #{$avatar-upload-text-margin-top};
|
||||
--avatar-upload-icon-size: #{$avatar-upload-icon-size};
|
||||
--avatar-upload-text-margin-top: #{$avatar-upload-text-margin-top};
|
||||
|
||||
border: var(--#{$prefix}border-width) dashed var(--#{$prefix}border-color);
|
||||
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 {
|
||||
width: var(--#{$prefix}avatar-upload-icon-size);
|
||||
height: var(--#{$prefix}avatar-upload-icon-size);
|
||||
width: var(--avatar-upload-icon-size);
|
||||
height: var(--avatar-upload-icon-size);
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: var(--#{$prefix}primary);
|
||||
color: var(--#{$prefix}primary);
|
||||
border-color: var(--primary);
|
||||
color: var(--primary);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
@@ -148,25 +148,25 @@
|
||||
.avatar-upload-text {
|
||||
font-size: $h6-font-size;
|
||||
line-height: 1;
|
||||
margin-top: var(--#{$prefix}avatar-upload-text-margin-top);
|
||||
margin-top: var(--avatar-upload-text-margin-top);
|
||||
}
|
||||
|
||||
.avatar-cover {
|
||||
--#{$prefix}avatar-cover-ring-width: #{$avatar-cover-ring-width};
|
||||
--avatar-cover-ring-width: #{$avatar-cover-ring-width};
|
||||
|
||||
margin-top: calc(-0.5 * var(--#{$prefix}avatar-size));
|
||||
box-shadow: 0 0 0 var(--#{$prefix}avatar-cover-ring-width) var(--#{$prefix}card-bg, var(--#{$prefix}body-bg));
|
||||
margin-top: calc(-0.5 * var(--avatar-size));
|
||||
box-shadow: 0 0 0 var(--avatar-cover-ring-width) var(--card-bg, var(--body-bg));
|
||||
}
|
||||
|
||||
.avatar-brand {
|
||||
--#{$prefix}avatar-brand-offset: #{$avatar-brand-offset};
|
||||
width: var(--#{$prefix}avatar-brand-size);
|
||||
height: var(--#{$prefix}avatar-brand-size);
|
||||
--avatar-brand-offset: #{$avatar-brand-offset};
|
||||
width: var(--avatar-brand-size);
|
||||
height: var(--avatar-brand-size);
|
||||
position: absolute;
|
||||
inset-inline-end: var(--#{$prefix}avatar-brand-offset);
|
||||
bottom: var(--#{$prefix}avatar-brand-offset);
|
||||
inset-inline-end: var(--avatar-brand-offset);
|
||||
bottom: var(--avatar-brand-offset);
|
||||
z-index: 1000;
|
||||
background: var(--#{$prefix}bg-surface);
|
||||
@include border-radius(var(--#{$prefix}border-radius));
|
||||
border: 1px solid var(--#{$prefix}border-color);
|
||||
background: var(--bg-surface);
|
||||
@include border-radius(var(--border-radius));
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
+33
-33
@@ -1,43 +1,43 @@
|
||||
@use '../config' as *;
|
||||
|
||||
.badge {
|
||||
--#{$prefix}badge-padding-x: #{$badge-padding-x};
|
||||
--#{$prefix}badge-padding-y: #{$badge-padding-y};
|
||||
--#{$prefix}badge-font-size: #{$badge-font-size};
|
||||
--#{$prefix}badge-font-weight: #{$badge-font-weight};
|
||||
--#{$prefix}badge-color: #{$badge-color};
|
||||
--#{$prefix}badge-border-radius: #{$badge-border-radius};
|
||||
--#{$prefix}badge-icon-size: 1em;
|
||||
--#{$prefix}badge-line-height: 1;
|
||||
--#{$prefix}badge-gap: #{$badge-gap};
|
||||
--badge-padding-x: #{$badge-padding-x};
|
||||
--badge-padding-y: #{$badge-padding-y};
|
||||
--badge-font-size: #{$badge-font-size};
|
||||
--badge-font-weight: #{$badge-font-weight};
|
||||
--badge-color: #{$badge-color};
|
||||
--badge-border-radius: #{$badge-border-radius};
|
||||
--badge-icon-size: 1em;
|
||||
--badge-line-height: 1;
|
||||
--badge-gap: #{$badge-gap};
|
||||
display: inline-flex;
|
||||
padding: var(--#{$prefix}badge-padding-y) var(--#{$prefix}badge-padding-x);
|
||||
font-weight: var(--#{$prefix}badge-font-weight);
|
||||
font-size: var(--#{$prefix}badge-font-size);
|
||||
color: var(--#{$prefix}badge-color);
|
||||
padding: var(--badge-padding-y) var(--badge-padding-x);
|
||||
font-weight: var(--badge-font-weight);
|
||||
font-size: var(--badge-font-size);
|
||||
color: var(--badge-color);
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
gap: var(--#{$prefix}badge-gap);
|
||||
gap: var(--badge-gap);
|
||||
background: $badge-bg-color;
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) transparent;
|
||||
@include border-radius(var(--#{$prefix}badge-border-radius));
|
||||
min-width: calc(1em + var(--#{$prefix}badge-padding-y) * 2 + 2px);
|
||||
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(--#{$prefix}badge-line-height);
|
||||
line-height: var(--badge-line-height);
|
||||
|
||||
@at-root a#{&} {
|
||||
background: var(--#{$prefix}bg-surface-secondary);
|
||||
background: var(--bg-surface-secondary);
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
font-size: var(--#{$prefix}badge-icon-size);
|
||||
font-size: var(--badge-icon-size);
|
||||
stroke-width: 2;
|
||||
}
|
||||
}
|
||||
@@ -50,7 +50,7 @@
|
||||
min-width: 0;
|
||||
min-height: auto;
|
||||
padding: 0;
|
||||
@include border-radius(var(--#{$prefix}border-radius-pill));
|
||||
@include border-radius(var(--border-radius-pill));
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
@@ -59,14 +59,14 @@
|
||||
//
|
||||
.badge-outline {
|
||||
background-color: transparent;
|
||||
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) currentColor;
|
||||
border: var(--border-width) var(--border-style) currentColor;
|
||||
}
|
||||
|
||||
//
|
||||
// Pill badge
|
||||
//
|
||||
.badge-pill {
|
||||
@include border-radius(var(--#{$prefix}border-radius-pill));
|
||||
@include border-radius(var(--border-radius-pill));
|
||||
}
|
||||
|
||||
//
|
||||
@@ -84,7 +84,7 @@
|
||||
top: 0 !important;
|
||||
inset-inline-end: 0 !important;
|
||||
/*rtl:ignore*/
|
||||
transform: translate(calc(var(--#{$prefix}dir) * 50%), -50%);
|
||||
transform: translate(calc(var(--dir) * 50%), -50%);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
@@ -96,22 +96,22 @@
|
||||
// Badge sizes
|
||||
//
|
||||
.badge-sm {
|
||||
--#{$prefix}badge-font-size: #{$badge-font-size-sm};
|
||||
--#{$prefix}badge-icon-size: 1em;
|
||||
--#{$prefix}badge-padding-y: 2px;
|
||||
--#{$prefix}badge-padding-x: #{$badge-padding-x-sm};
|
||||
--badge-font-size: #{$badge-font-size-sm};
|
||||
--badge-icon-size: 1em;
|
||||
--badge-padding-y: 2px;
|
||||
--badge-padding-x: #{$badge-padding-x-sm};
|
||||
}
|
||||
|
||||
.badge-lg {
|
||||
--#{$prefix}badge-font-size: #{$badge-font-size-lg};
|
||||
--#{$prefix}badge-icon-size: 1em;
|
||||
--#{$prefix}badge-padding-y: #{$badge-padding-y-lg};
|
||||
--#{$prefix}badge-padding-x: #{$badge-padding-x-lg};
|
||||
--badge-font-size: #{$badge-font-size-lg};
|
||||
--badge-icon-size: 1em;
|
||||
--badge-padding-y: #{$badge-padding-y-lg};
|
||||
--badge-padding-x: #{$badge-padding-x-lg};
|
||||
}
|
||||
|
||||
//
|
||||
// Badge with only icon
|
||||
//
|
||||
.badge-icononly {
|
||||
--#{$prefix}badge-padding-x: 0;
|
||||
--badge-padding-x: 0;
|
||||
}
|
||||
|
||||
@@ -3,31 +3,31 @@
|
||||
@use '../config' as *;
|
||||
|
||||
.breadcrumb {
|
||||
--#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x};
|
||||
--#{$prefix}breadcrumb-padding-y: #{$breadcrumb-padding-y};
|
||||
--#{$prefix}breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom};
|
||||
--#{$prefix}breadcrumb-font-size: #{$breadcrumb-font-size};
|
||||
--#{$prefix}breadcrumb-bg: #{$breadcrumb-bg};
|
||||
--#{$prefix}breadcrumb-border-radius: #{$breadcrumb-border-radius};
|
||||
--#{$prefix}breadcrumb-divider-color: #{$breadcrumb-divider-color};
|
||||
--#{$prefix}breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x};
|
||||
--#{$prefix}breadcrumb-item-active-color: #{$breadcrumb-active-color};
|
||||
--#{$prefix}breadcrumb-item-active-font-weight: #{$breadcrumb-active-font-weight};
|
||||
--#{$prefix}breadcrumb-item-disabled-color: #{$breadcrumb-disabled-color};
|
||||
--#{$prefix}breadcrumb-link-color: #{$breadcrumb-link-color};
|
||||
--breadcrumb-padding-x: #{$breadcrumb-padding-x};
|
||||
--breadcrumb-padding-y: #{$breadcrumb-padding-y};
|
||||
--breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom};
|
||||
--breadcrumb-font-size: #{$breadcrumb-font-size};
|
||||
--breadcrumb-bg: #{$breadcrumb-bg};
|
||||
--breadcrumb-border-radius: #{$breadcrumb-border-radius};
|
||||
--breadcrumb-divider-color: #{$breadcrumb-divider-color};
|
||||
--breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x};
|
||||
--breadcrumb-item-active-color: #{$breadcrumb-active-color};
|
||||
--breadcrumb-item-active-font-weight: #{$breadcrumb-active-font-weight};
|
||||
--breadcrumb-item-disabled-color: #{$breadcrumb-disabled-color};
|
||||
--breadcrumb-link-color: #{$breadcrumb-link-color};
|
||||
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
@include font-size(var(--#{$prefix}breadcrumb-font-size));
|
||||
@include font-size(var(--breadcrumb-font-size));
|
||||
list-style: none;
|
||||
background-color: var(--#{$prefix}breadcrumb-bg);
|
||||
@include border-radius(var(--#{$prefix}breadcrumb-border-radius));
|
||||
background-color: var(--breadcrumb-bg);
|
||||
@include border-radius(var(--breadcrumb-border-radius));
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: transparent;
|
||||
|
||||
a {
|
||||
color: var(--#{$prefix}breadcrumb-link-color);
|
||||
color: var(--breadcrumb-link-color);
|
||||
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
@@ -36,13 +36,13 @@
|
||||
}
|
||||
|
||||
.breadcrumb-muted {
|
||||
--#{$prefix}breadcrumb-link-color: var(--#{$prefix}secondary);
|
||||
--breadcrumb-link-color: var(--secondary);
|
||||
}
|
||||
|
||||
.breadcrumb-item {
|
||||
&.active {
|
||||
color: var(--#{$prefix}breadcrumb-item-active-color);
|
||||
font-weight: var(--#{$prefix}breadcrumb-item-active-font-weight);
|
||||
color: var(--breadcrumb-item-active-color);
|
||||
font-weight: var(--breadcrumb-item-active-font-weight);
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
@@ -51,7 +51,7 @@
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
color: var(--#{$prefix}breadcrumb-item-disabled-color);
|
||||
color: var(--breadcrumb-item-disabled-color);
|
||||
|
||||
&:before {
|
||||
color: inherit;
|
||||
@@ -64,13 +64,13 @@
|
||||
}
|
||||
|
||||
& + & {
|
||||
padding-inline-start: var(--#{$prefix}breadcrumb-item-padding-x);
|
||||
padding-inline-start: var(--breadcrumb-item-padding-x);
|
||||
|
||||
&::before {
|
||||
float: inline-start;
|
||||
padding-inline-end: var(--#{$prefix}breadcrumb-item-padding-x);
|
||||
color: var(--#{$prefix}breadcrumb-divider-color);
|
||||
content: var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider));
|
||||
padding-inline-end: var(--breadcrumb-item-padding-x);
|
||||
color: var(--breadcrumb-divider-color);
|
||||
content: var(--breadcrumb-divider, escape-svg($breadcrumb-divider));
|
||||
/*rtl:raw:
|
||||
transform: scaleX(-1);
|
||||
*/
|
||||
@@ -80,6 +80,6 @@
|
||||
|
||||
@each $name, $symbol in $breadcrumb-variants {
|
||||
.breadcrumb-#{$name} {
|
||||
--#{$prefix}breadcrumb-divider: '#{string.quote($symbol)}';
|
||||
--breadcrumb-divider: '#{string.quote($symbol)}';
|
||||
}
|
||||
}
|
||||
|
||||
+109
-109
@@ -7,47 +7,47 @@
|
||||
@use '../config' as *;
|
||||
|
||||
.btn {
|
||||
--#{$prefix}btn-icon-size: #{$input-btn-icon-size};
|
||||
--#{$prefix}btn-icon-color: inherit;
|
||||
--#{$prefix}btn-bg: var(--#{$prefix}bg-surface);
|
||||
--#{$prefix}btn-color: var(--#{$prefix}body-color);
|
||||
--#{$prefix}btn-border-color: #{$btn-border-color};
|
||||
--#{$prefix}btn-hover-bg: var(--#{$prefix}btn-bg);
|
||||
--#{$prefix}btn-hover-border-color: var(--#{$prefix}border-active-color);
|
||||
--#{$prefix}btn-active-color: #{$active-color};
|
||||
--#{$prefix}btn-active-bg: #{$active-bg};
|
||||
--#{$prefix}btn-active-border-color: #{$active-border-color};
|
||||
--btn-icon-size: #{$input-btn-icon-size};
|
||||
--btn-icon-color: inherit;
|
||||
--btn-bg: var(--bg-surface);
|
||||
--btn-color: var(--body-color);
|
||||
--btn-border-color: #{$btn-border-color};
|
||||
--btn-hover-bg: var(--btn-bg);
|
||||
--btn-hover-border-color: var(--border-active-color);
|
||||
--btn-active-color: #{$active-color};
|
||||
--btn-active-bg: #{$active-bg};
|
||||
--btn-active-border-color: #{$active-border-color};
|
||||
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
white-space: nowrap;
|
||||
box-shadow: var(--#{$prefix}btn-box-shadow);
|
||||
box-shadow: var(--btn-box-shadow);
|
||||
position: relative;
|
||||
min-width: calc((var(--#{$prefix}btn-line-height) * 1) + (var(--#{$prefix}btn-padding-y) * 2) + (var(--#{$prefix}btn-border-width) * 2));
|
||||
min-height: calc((var(--#{$prefix}btn-line-height) * 1) + (var(--#{$prefix}btn-padding-y) * 2) + (var(--#{$prefix}btn-border-width) * 2));
|
||||
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));
|
||||
|
||||
@include border-radius(var(--#{$prefix}btn-border-radius));
|
||||
@include border-radius(var(--btn-border-radius));
|
||||
|
||||
.icon {
|
||||
width: var(--#{$prefix}btn-icon-size);
|
||||
height: var(--#{$prefix}btn-icon-size);
|
||||
min-width: var(--#{$prefix}btn-icon-size);
|
||||
font-size: var(--#{$prefix}btn-icon-size);
|
||||
margin: 0 calc(var(--#{$prefix}btn-padding-x) / 2) 0 calc(var(--#{$prefix}btn-padding-x) / -4);
|
||||
width: var(--btn-icon-size);
|
||||
height: var(--btn-icon-size);
|
||||
min-width: var(--btn-icon-size);
|
||||
font-size: var(--btn-icon-size);
|
||||
margin: 0 calc(var(--btn-padding-x) / 2) 0 calc(var(--btn-padding-x) / -4);
|
||||
vertical-align: bottom;
|
||||
color: var(--#{$prefix}btn-icon-color);
|
||||
color: var(--btn-icon-color);
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: var(--#{$prefix}btn-icon-size);
|
||||
height: var(--#{$prefix}btn-icon-size);
|
||||
margin: 0 calc(var(--#{$prefix}btn-padding-x) / 2) 0 calc(var(--#{$prefix}btn-padding-x) / -4);
|
||||
width: var(--btn-icon-size);
|
||||
height: var(--btn-icon-size);
|
||||
margin: 0 calc(var(--btn-padding-x) / 2) 0 calc(var(--btn-padding-x) / -4);
|
||||
}
|
||||
|
||||
.icon-right,
|
||||
.icon-end {
|
||||
margin: 0 calc(var(--#{$prefix}btn-padding-x) / -4) 0 calc(var(--#{$prefix}btn-padding-x) / 2);
|
||||
margin: 0 calc(var(--btn-padding-x) / -4) 0 calc(var(--btn-padding-x) / 2);
|
||||
}
|
||||
|
||||
.badge {
|
||||
@@ -55,9 +55,9 @@
|
||||
}
|
||||
|
||||
.btn-check + &:hover {
|
||||
color: var(--#{$prefix}btn-hover-color);
|
||||
background-color: var(--#{$prefix}btn-hover-bg);
|
||||
border-color: var(--#{$prefix}btn-hover-border-color);
|
||||
color: var(--btn-hover-color);
|
||||
background-color: var(--btn-hover-bg);
|
||||
border-color: var(--btn-hover-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -81,69 +81,69 @@
|
||||
// Button color variations
|
||||
//
|
||||
.btn-ghost {
|
||||
--#{$prefix}btn-bg: transparent;
|
||||
--#{$prefix}btn-border-color: transparent;
|
||||
--#{$prefix}btn-box-shadow: none;
|
||||
--#{$prefix}btn-hover-bg: var(--#{$prefix}bg-surface-secondary);
|
||||
--#{$prefix}btn-hover-border-color: transparent;
|
||||
--#{$prefix}btn-hover-color: var(--#{$prefix}body-color);
|
||||
--btn-bg: transparent;
|
||||
--btn-border-color: transparent;
|
||||
--btn-box-shadow: none;
|
||||
--btn-hover-bg: var(--bg-surface-secondary);
|
||||
--btn-hover-border-color: transparent;
|
||||
--btn-hover-color: var(--body-color);
|
||||
}
|
||||
|
||||
@each $color, $value in map.merge($theme-colors, $social-colors) {
|
||||
.btn-#{$color} {
|
||||
@if $color == 'dark' {
|
||||
--#{$prefix}btn-border-color: var(--#{$prefix}dark-mode-border-color);
|
||||
--#{$prefix}btn-hover-border-color: var(--#{$prefix}dark-mode-border-active-color);
|
||||
--#{$prefix}btn-active-border-color: var(--#{$prefix}dark-mode-border-active-color);
|
||||
--btn-border-color: var(--dark-mode-border-color);
|
||||
--btn-hover-border-color: var(--dark-mode-border-active-color);
|
||||
--btn-active-border-color: var(--dark-mode-border-active-color);
|
||||
} @else {
|
||||
--#{$prefix}btn-border-color: transparent;
|
||||
--#{$prefix}btn-hover-border-color: transparent;
|
||||
--#{$prefix}btn-active-border-color: transparent;
|
||||
--btn-border-color: transparent;
|
||||
--btn-hover-border-color: transparent;
|
||||
--btn-active-border-color: transparent;
|
||||
}
|
||||
|
||||
--#{$prefix}btn-color: var(--#{$prefix}#{$color}-fg, #{$white});
|
||||
--#{$prefix}btn-bg: var(--#{$prefix}#{$color});
|
||||
--#{$prefix}btn-hover-color: var(--#{$prefix}#{$color}-fg);
|
||||
--#{$prefix}btn-hover-bg: var(--#{$prefix}#{$color}-darken);
|
||||
--#{$prefix}btn-active-color: var(--#{$prefix}#{$color}-fg);
|
||||
--#{$prefix}btn-active-bg: var(--#{$prefix}#{$color}-darken);
|
||||
--#{$prefix}btn-disabled-bg: var(--#{$prefix}#{$color});
|
||||
--#{$prefix}btn-disabled-color: var(--#{$prefix}#{$color}-fg);
|
||||
--#{$prefix}btn-box-shadow: var(--#{$prefix}shadow-input);
|
||||
--btn-color: var(--#{$color}-fg, #{$white});
|
||||
--btn-bg: var(--#{$color});
|
||||
--btn-hover-color: var(--#{$color}-fg);
|
||||
--btn-hover-bg: var(--#{$color}-darken);
|
||||
--btn-active-color: var(--#{$color}-fg);
|
||||
--btn-active-bg: var(--#{$color}-darken);
|
||||
--btn-disabled-bg: var(--#{$color});
|
||||
--btn-disabled-color: var(--#{$color}-fg);
|
||||
--btn-box-shadow: var(--shadow-input);
|
||||
}
|
||||
|
||||
.btn-outline-#{$color},
|
||||
.btn-outline.btn-#{$color} {
|
||||
--#{$prefix}btn-color: var(--#{$prefix}#{$color});
|
||||
--#{$prefix}btn-bg: transparent;
|
||||
--#{$prefix}btn-border-color: var(--#{$prefix}#{$color});
|
||||
--#{$prefix}btn-hover-color: var(--#{$prefix}#{$color}-fg);
|
||||
--#{$prefix}btn-hover-border-color: transparent;
|
||||
--#{$prefix}btn-hover-bg: var(--#{$prefix}#{$color});
|
||||
--#{$prefix}btn-active-color: var(--#{$prefix}#{$color}-fg);
|
||||
--#{$prefix}btn-active-bg: var(--#{$prefix}#{$color});
|
||||
--#{$prefix}btn-active-border-color: var(--#{$prefix}#{$color});
|
||||
--#{$prefix}btn-disabled-color: var(--#{$prefix}#{$color});
|
||||
--#{$prefix}btn-disabled-border-color: var(--#{$prefix}#{$color});
|
||||
--btn-color: var(--#{$color});
|
||||
--btn-bg: transparent;
|
||||
--btn-border-color: var(--#{$color});
|
||||
--btn-hover-color: var(--#{$color}-fg);
|
||||
--btn-hover-border-color: transparent;
|
||||
--btn-hover-bg: var(--#{$color});
|
||||
--btn-active-color: var(--#{$color}-fg);
|
||||
--btn-active-bg: var(--#{$color});
|
||||
--btn-active-border-color: var(--#{$color});
|
||||
--btn-disabled-color: var(--#{$color});
|
||||
--btn-disabled-border-color: var(--#{$color});
|
||||
}
|
||||
|
||||
.btn-ghost-#{$color},
|
||||
.btn-ghost.btn-#{$color} {
|
||||
--#{$prefix}btn-color: var(--#{$prefix}#{$color});
|
||||
--#{$prefix}btn-bg: transparent;
|
||||
--#{$prefix}btn-border-color: transparent;
|
||||
--#{$prefix}btn-hover-color: var(--#{$prefix}#{$color}-fg);
|
||||
--#{$prefix}btn-hover-bg: var(--#{$prefix}#{$color});
|
||||
--#{$prefix}btn-hover-border-color: var(--#{$prefix}#{$color});
|
||||
--#{$prefix}btn-active-color: var(--#{$prefix}#{$color}-fg);
|
||||
--#{$prefix}btn-active-bg: var(--#{$prefix}#{$color});
|
||||
--#{$prefix}btn-active-border-color: transparent;
|
||||
--#{$prefix}btn-active-shadow: #{$btn-active-box-shadow};
|
||||
--#{$prefix}btn-disabled-color: var(--#{$prefix}#{$color});
|
||||
--#{$prefix}btn-disabled-bg: transparent;
|
||||
--#{$prefix}btn-disabled-border-color: transparent;
|
||||
--#{$prefix}gradient: none;
|
||||
--#{$prefix}btn-box-shadow: none;
|
||||
--btn-color: var(--#{$color});
|
||||
--btn-bg: transparent;
|
||||
--btn-border-color: transparent;
|
||||
--btn-hover-color: var(--#{$color}-fg);
|
||||
--btn-hover-bg: var(--#{$color});
|
||||
--btn-hover-border-color: var(--#{$color});
|
||||
--btn-active-color: var(--#{$color}-fg);
|
||||
--btn-active-bg: var(--#{$color});
|
||||
--btn-active-border-color: transparent;
|
||||
--btn-active-shadow: #{$btn-active-box-shadow};
|
||||
--btn-disabled-color: var(--#{$color});
|
||||
--btn-disabled-bg: transparent;
|
||||
--btn-disabled-border-color: transparent;
|
||||
--gradient: none;
|
||||
--btn-box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -152,23 +152,23 @@
|
||||
//
|
||||
.btn-sm,
|
||||
.btn-group-sm > .btn {
|
||||
--#{$prefix}btn-line-height: #{$input-btn-line-height-sm};
|
||||
--#{$prefix}btn-icon-size: #{$input-btn-icon-size-sm};
|
||||
--btn-line-height: #{$input-btn-line-height-sm};
|
||||
--btn-icon-size: #{$input-btn-icon-size-sm};
|
||||
}
|
||||
|
||||
.btn-lg,
|
||||
.btn-group-lg > .btn {
|
||||
--#{$prefix}btn-line-height: #{$input-btn-line-height-lg};
|
||||
--#{$prefix}btn-icon-size: #{$input-btn-icon-size-lg};
|
||||
--btn-line-height: #{$input-btn-line-height-lg};
|
||||
--btn-icon-size: #{$input-btn-icon-size-lg};
|
||||
}
|
||||
|
||||
.btn-xl,
|
||||
.btn-group-xl > .btn {
|
||||
--#{$prefix}btn-line-height: #{$input-btn-line-height-xl};
|
||||
--#{$prefix}btn-icon-size: #{$input-btn-icon-size-xl};
|
||||
--#{$prefix}btn-padding-y: #{$input-btn-padding-y-xl};
|
||||
--#{$prefix}btn-padding-x: #{$input-btn-padding-x-xl};
|
||||
--#{$prefix}btn-font-size: #{$input-btn-font-size-xl};
|
||||
--btn-line-height: #{$input-btn-line-height-xl};
|
||||
--btn-icon-size: #{$input-btn-icon-size-xl};
|
||||
--btn-padding-y: #{$input-btn-padding-y-xl};
|
||||
--btn-padding-x: #{$input-btn-padding-x-xl};
|
||||
--btn-font-size: #{$input-btn-font-size-xl};
|
||||
}
|
||||
|
||||
//
|
||||
@@ -177,12 +177,12 @@
|
||||
.btn-pill {
|
||||
padding-inline-end: 1.5em;
|
||||
padding-inline-start: 1.5em;
|
||||
@include border-radius(var(--#{$prefix}border-radius-pill));
|
||||
@include border-radius(var(--border-radius-pill));
|
||||
|
||||
&[class*='btn-icon'] {
|
||||
--#{$prefix}btn-pill-icon-padding-y: #{$btn-pill-icon-padding-y};
|
||||
--#{$prefix}btn-pill-icon-padding-x: #{$btn-pill-icon-padding-x};
|
||||
padding: var(--#{$prefix}btn-pill-icon-padding-y) var(--#{$prefix}btn-pill-icon-padding-x);
|
||||
--btn-pill-icon-padding-y: #{$btn-pill-icon-padding-y};
|
||||
--btn-pill-icon-padding-x: #{$btn-pill-icon-padding-x};
|
||||
padding: var(--btn-pill-icon-padding-y) var(--btn-pill-icon-padding-x);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -199,12 +199,12 @@
|
||||
padding-inline-end: 0;
|
||||
|
||||
.icon {
|
||||
margin: calc(-1 * var(--#{$prefix}btn-padding-x));
|
||||
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(--#{$prefix}btn-line-height) + (var(--#{$prefix}btn-padding-y) * 2) + (var(--#{$prefix}btn-border-width) * 2));
|
||||
min-width: calc(var(--btn-line-height) + (var(--btn-padding-y) * 2) + (var(--btn-border-width) * 2));
|
||||
}
|
||||
|
||||
//
|
||||
@@ -222,12 +222,12 @@
|
||||
// Button floating
|
||||
//
|
||||
.btn-floating {
|
||||
--#{$prefix}btn-floating-offset: #{$btn-floating-offset};
|
||||
--btn-floating-offset: #{$btn-floating-offset};
|
||||
position: fixed;
|
||||
z-index: $zindex-fixed;
|
||||
bottom: var(--#{$prefix}btn-floating-offset);
|
||||
inset-inline-start: var(--#{$prefix}btn-floating-offset);
|
||||
box-shadow: var(--#{$prefix}shadow-dropdown);
|
||||
bottom: var(--btn-floating-offset);
|
||||
inset-inline-start: var(--btn-floating-offset);
|
||||
box-shadow: var(--shadow-dropdown);
|
||||
|
||||
@include media-print {
|
||||
display: none;
|
||||
@@ -251,15 +251,15 @@
|
||||
content: '';
|
||||
display: inline-block;
|
||||
vertical-align: text-bottom;
|
||||
border: $spinner-border-width var(--#{$prefix}border-style) currentColor;
|
||||
border: $spinner-border-width var(--border-style) currentColor;
|
||||
border-inline-end-color: transparent;
|
||||
@include border-radius(var(--#{$prefix}border-radius-pill));
|
||||
color: var(--#{$prefix}btn-color);
|
||||
@include border-radius(var(--border-radius-pill));
|
||||
color: var(--btn-color);
|
||||
position: absolute;
|
||||
width: var(--#{$prefix}btn-icon-size);
|
||||
height: var(--#{$prefix}btn-icon-size);
|
||||
inset-inline-start: calc(50% - var(--#{$prefix}btn-icon-size) / 2);
|
||||
top: calc(50% - var(--#{$prefix}btn-icon-size) / 2);
|
||||
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);
|
||||
animation: spinner-border 0.75s linear infinite;
|
||||
}
|
||||
}
|
||||
@@ -268,9 +268,9 @@
|
||||
// Action button
|
||||
//
|
||||
.btn-action {
|
||||
--#{$prefix}border-color: transparent;
|
||||
color: var(--#{$prefix}secondary);
|
||||
@include border-radius(var(--#{$prefix}border-radius));
|
||||
--border-color: transparent;
|
||||
color: var(--secondary);
|
||||
@include border-radius(var(--border-radius));
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
|
||||
@@ -284,20 +284,20 @@
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--#{$prefix}primary);
|
||||
outline: 2px solid var(--primary);
|
||||
outline-offset: -2px;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.show {
|
||||
color: var(--#{$prefix}body-color);
|
||||
background: var(--#{$prefix}active-bg);
|
||||
color: var(--body-color);
|
||||
background: var(--active-bg);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
&.show {
|
||||
color: var(--#{$prefix}primary);
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
@include media-print {
|
||||
@@ -322,7 +322,7 @@
|
||||
&:focus-visible {
|
||||
.icon {
|
||||
/*rtl:ignore*/
|
||||
transform: translateX(calc(var(--#{$prefix}dir) * 4px));
|
||||
transform: translateX(calc(var(--dir) * 4px));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -340,7 +340,7 @@
|
||||
&:focus-visible {
|
||||
.icon {
|
||||
/*rtl:ignore*/
|
||||
transform: translateX(calc(var(--#{$prefix}dir) * -4px));
|
||||
transform: translateX(calc(var(--dir) * -4px));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,13 +1,13 @@
|
||||
@use '../config' as *;
|
||||
|
||||
.calendar {
|
||||
--#{$prefix}calendar-padding-y: #{$calendar-padding-y};
|
||||
--#{$prefix}calendar-date-padding: #{$calendar-date-padding};
|
||||
--#{$prefix}calendar-date-size: #{$calendar-date-size};
|
||||
--calendar-padding-y: #{$calendar-padding-y};
|
||||
--calendar-date-padding: #{$calendar-date-padding};
|
||||
--calendar-date-size: #{$calendar-date-size};
|
||||
display: block;
|
||||
font-size: $font-size-sm;
|
||||
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
|
||||
@include border-radius(var(--#{$prefix}border-radius));
|
||||
border: var(--border-width) var(--border-style) var(--border-color);
|
||||
@include border-radius(var(--border-radius));
|
||||
}
|
||||
|
||||
.calendar-nav {
|
||||
@@ -25,17 +25,17 @@
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: start;
|
||||
padding: var(--#{$prefix}calendar-padding-y) 0;
|
||||
padding: var(--calendar-padding-y) 0;
|
||||
}
|
||||
|
||||
.calendar-header {
|
||||
color: var(--#{$prefix}secondary);
|
||||
color: var(--secondary);
|
||||
}
|
||||
|
||||
.calendar-date {
|
||||
flex: 0 0 calc(100% / 7);
|
||||
max-width: calc(100% / 7);
|
||||
padding: var(--#{$prefix}calendar-date-padding);
|
||||
padding: var(--calendar-date-padding);
|
||||
text-align: center;
|
||||
border: 0;
|
||||
|
||||
@@ -47,9 +47,9 @@
|
||||
.date-item {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
width: var(--#{$prefix}calendar-date-size);
|
||||
height: var(--#{$prefix}calendar-date-size);
|
||||
line-height: var(--#{$prefix}calendar-date-size);
|
||||
width: var(--calendar-date-size);
|
||||
height: var(--calendar-date-size);
|
||||
line-height: var(--calendar-date-size);
|
||||
color: #66758c;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
@@ -57,26 +57,27 @@
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
background: 0 0;
|
||||
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) transparent;
|
||||
@include border-radius(var(--#{$prefix}border-radius-pill));
|
||||
border: var(--border-width) var(--border-style) transparent;
|
||||
@include border-radius(var(--border-radius-pill));
|
||||
outline: 0;
|
||||
@include transition(background $transition-time, border $transition-time, box-shadow 0.32s, color $transition-time);
|
||||
|
||||
&:hover {
|
||||
color: var(--#{$prefix}primary);
|
||||
color: var(--primary);
|
||||
text-decoration: none;
|
||||
background: #fefeff;
|
||||
border-color: var(--#{$prefix}border-color);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
outline: 2px solid var(--#{$prefix}primary);
|
||||
outline: 2px solid var(--primary);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
.date-today {
|
||||
color: var(--#{$prefix}primary);
|
||||
border-color: var(--#{$prefix}border-color);
|
||||
color: var(--primary);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -88,9 +89,9 @@
|
||||
top: 50%;
|
||||
inset-inline-end: 0;
|
||||
inset-inline-start: 0;
|
||||
height: var(--#{$prefix}calendar-date-size);
|
||||
height: var(--calendar-date-size);
|
||||
content: '';
|
||||
background: color-transparent(var(--#{$prefix}primary), 0.1);
|
||||
background: color-transparent(var(--primary), 0.1);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
@@ -98,8 +99,8 @@
|
||||
&.range-end {
|
||||
.date-item {
|
||||
color: $white;
|
||||
background: var(--#{$prefix}primary);
|
||||
border-color: var(--#{$prefix}primary);
|
||||
background: var(--primary);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
+117
-117
@@ -2,7 +2,7 @@
|
||||
|
||||
@use '../config' as *;
|
||||
|
||||
@property --tblr-card-gradient-direction {
|
||||
@property --card-gradient-direction {
|
||||
syntax: '<angle>';
|
||||
inherits: true;
|
||||
initial-value: 180deg;
|
||||
@@ -10,11 +10,11 @@
|
||||
|
||||
@keyframes gradient-animation {
|
||||
0% {
|
||||
--#{$prefix}card-gradient-direction: 180deg;
|
||||
--card-gradient-direction: 180deg;
|
||||
}
|
||||
|
||||
100% {
|
||||
--#{$prefix}card-gradient-direction: 540deg;
|
||||
--card-gradient-direction: 540deg;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -31,7 +31,7 @@
|
||||
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
box-shadow: var(--#{$prefix}shadow-card-hover);
|
||||
box-shadow: var(--shadow-card-hover);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -51,24 +51,24 @@
|
||||
|
||||
// Card dashed
|
||||
.card-dashed {
|
||||
border: var(--#{$prefix}border-width) dashed var(--#{$prefix}border-color);
|
||||
border: var(--border-width) dashed var(--border-color);
|
||||
}
|
||||
|
||||
// Card transparent
|
||||
.card-transparent {
|
||||
background: transparent;
|
||||
border: var(--#{$prefix}border-width) dashed var(--#{$prefix}border-color);
|
||||
border: var(--border-width) dashed var(--border-color);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
// Card stamp
|
||||
.card-stamp {
|
||||
--#{$prefix}stamp-size: #{$card-stamp-size};
|
||||
--stamp-size: #{$card-stamp-size};
|
||||
position: absolute;
|
||||
top: 0;
|
||||
inset-inline-end: 0;
|
||||
width: calc(var(--#{$prefix}stamp-size) * 1);
|
||||
height: calc(var(--#{$prefix}stamp-size) * 1);
|
||||
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;
|
||||
@@ -77,28 +77,28 @@
|
||||
}
|
||||
|
||||
.card-stamp-lg {
|
||||
--#{$prefix}stamp-size: #{$card-stamp-size-lg};
|
||||
--stamp-size: #{$card-stamp-size-lg};
|
||||
}
|
||||
|
||||
.card-stamp-icon {
|
||||
background: var(--#{$prefix}secondary);
|
||||
color: var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
|
||||
background: var(--secondary);
|
||||
color: var(--card-bg, var(--bg-surface));
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
@include border-radius(var(--#{$prefix}border-radius-pill));
|
||||
width: calc(var(--#{$prefix}stamp-size) * 1);
|
||||
height: calc(var(--#{$prefix}stamp-size) * 1);
|
||||
@include border-radius(var(--border-radius-pill));
|
||||
width: calc(var(--stamp-size) * 1);
|
||||
height: calc(var(--stamp-size) * 1);
|
||||
position: relative;
|
||||
top: calc(var(--#{$prefix}stamp-size) * -0.25);
|
||||
inset-inline-end: calc(var(--#{$prefix}stamp-size) * -0.25);
|
||||
font-size: calc(var(--#{$prefix}stamp-size) * 0.75);
|
||||
top: calc(var(--stamp-size) * -0.25);
|
||||
inset-inline-end: calc(var(--stamp-size) * -0.25);
|
||||
font-size: calc(var(--stamp-size) * 0.75);
|
||||
transform: rotate(10deg);
|
||||
|
||||
.icon {
|
||||
stroke-width: 2;
|
||||
width: calc(var(--#{$prefix}stamp-size) * 0.75);
|
||||
height: calc(var(--#{$prefix}stamp-size) * 0.75);
|
||||
width: calc(var(--stamp-size) * 0.75);
|
||||
height: calc(var(--stamp-size) * 0.75);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -133,8 +133,8 @@
|
||||
}
|
||||
|
||||
.card-active {
|
||||
--#{$prefix}card-border-color: var(--#{$prefix}primary);
|
||||
--#{$prefix}card-bg: var(--#{$prefix}active-bg);
|
||||
--card-border-color: var(--primary);
|
||||
--card-bg: var(--active-bg);
|
||||
}
|
||||
|
||||
.card-btn {
|
||||
@@ -143,10 +143,10 @@
|
||||
justify-content: center;
|
||||
padding: $card-spacer-y $card-spacer-x;
|
||||
text-align: center;
|
||||
border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
|
||||
border-top: var(--border-width) var(--border-style) var(--border-color);
|
||||
flex: 1;
|
||||
color: inherit;
|
||||
font-weight: var(--#{$prefix}font-weight-medium);
|
||||
font-weight: var(--font-weight-medium);
|
||||
@include transition(background $transition-time);
|
||||
|
||||
&:hover {
|
||||
@@ -155,7 +155,7 @@
|
||||
}
|
||||
|
||||
& + & {
|
||||
border-inline-start: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
|
||||
border-inline-start: var(--border-width) var(--border-style) var(--border-color);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -163,19 +163,19 @@
|
||||
Stacked card
|
||||
*/
|
||||
.card-stacked {
|
||||
--#{$prefix}card-stacked-offset: #{$card-stacked-offset};
|
||||
--card-stacked-offset: #{$card-stacked-offset};
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
top: calc(-1 * var(--#{$prefix}card-stacked-offset));
|
||||
inset-inline-end: var(--#{$prefix}card-stacked-offset);
|
||||
inset-inline-start: var(--#{$prefix}card-stacked-offset);
|
||||
height: var(--#{$prefix}card-stacked-offset);
|
||||
top: calc(-1 * var(--card-stacked-offset));
|
||||
inset-inline-end: var(--card-stacked-offset);
|
||||
inset-inline-start: var(--card-stacked-offset);
|
||||
height: var(--card-stacked-offset);
|
||||
content: '';
|
||||
background: var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
|
||||
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}card-border-color);
|
||||
@include border-radius(var(--#{$prefix}card-border-radius) var(--#{$prefix}card-border-radius) 0 0);
|
||||
background: var(--card-bg, var(--bg-surface));
|
||||
border: var(--border-width) var(--border-style) var(--card-border-color);
|
||||
@include border-radius(var(--card-border-radius) var(--card-border-radius) 0 0);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -207,9 +207,9 @@ Stacked card
|
||||
}
|
||||
|
||||
.card-actions {
|
||||
--#{$prefix}card-actions-gutter: #{$card-actions-gutter};
|
||||
margin: calc(-1 * var(--#{$prefix}card-actions-gutter)) calc(-1 * var(--#{$prefix}card-actions-gutter)) calc(-1 * var(--#{$prefix}card-actions-gutter)) auto;
|
||||
padding-inline-start: var(--#{$prefix}card-actions-gutter);
|
||||
--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);
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
@@ -221,31 +221,31 @@ Stacked card
|
||||
color: inherit;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background-color: var(--#{$prefix}card-cap-bg);
|
||||
background-color: var(--card-cap-bg);
|
||||
|
||||
&:first-child {
|
||||
@include border-radius(var(--#{$prefix}card-border-radius) var(--#{$prefix}card-border-radius) 0 0);
|
||||
@include border-radius(var(--card-border-radius) var(--card-border-radius) 0 0);
|
||||
}
|
||||
}
|
||||
|
||||
.card-header-light {
|
||||
border-bottom-color: transparent;
|
||||
background: var(--#{$prefix}bg-surface-tertiary);
|
||||
background: var(--bg-surface-tertiary);
|
||||
}
|
||||
|
||||
.card-header-tabs {
|
||||
background: $card-header-tabs-bg;
|
||||
flex: 1;
|
||||
margin: calc(var(--#{$prefix}card-cap-padding-y) * -1) calc(var(--#{$prefix}card-cap-padding-x) * -1) calc(var(--#{$prefix}card-cap-padding-y) * -1);
|
||||
padding: calc(var(--#{$prefix}card-cap-padding-y) * 0.5) calc(var(--#{$prefix}card-cap-padding-x) * 0.5) 0;
|
||||
@include border-radius(var(--#{$prefix}card-border-radius) var(--#{$prefix}card-border-radius) 0 0);
|
||||
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;
|
||||
@include border-radius(var(--card-border-radius) var(--card-border-radius) 0 0);
|
||||
}
|
||||
|
||||
.card-header-pills {
|
||||
--#{$prefix}card-header-pills-margin: #{$card-header-pills-margin};
|
||||
--card-header-pills-margin: #{$card-header-pills-margin};
|
||||
flex: 1;
|
||||
margin-top: calc(-1 * var(--#{$prefix}card-header-pills-margin));
|
||||
margin-bottom: calc(-1 * var(--#{$prefix}card-header-pills-margin));
|
||||
margin-top: calc(-1 * var(--card-header-pills-margin));
|
||||
margin-bottom: calc(-1 * var(--card-header-pills-margin));
|
||||
}
|
||||
|
||||
// Card rotate
|
||||
@@ -285,7 +285,7 @@ Stacked card
|
||||
margin-top: auto;
|
||||
|
||||
&:last-child {
|
||||
@include border-radius(0 0 var(--#{$prefix}card-border-radius) var(--#{$prefix}card-border-radius));
|
||||
@include border-radius(0 0 var(--card-border-radius) var(--card-border-radius));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -301,8 +301,8 @@ Stacked card
|
||||
|
||||
// Card progress
|
||||
.card-progress {
|
||||
--#{$prefix}card-progress-height: #{$card-progress-height};
|
||||
height: var(--#{$prefix}card-progress-height);
|
||||
--card-progress-height: #{$card-progress-height};
|
||||
height: var(--card-progress-height);
|
||||
|
||||
&:last-child {
|
||||
@include border-radius(0 0 2px 2px);
|
||||
@@ -314,18 +314,18 @@ Stacked card
|
||||
}
|
||||
|
||||
.card-meta {
|
||||
color: var(--#{$prefix}secondary);
|
||||
color: var(--secondary);
|
||||
}
|
||||
|
||||
.card-title {
|
||||
--#{$prefix}card-title-margin-bottom: #{$card-title-margin-bottom};
|
||||
--#{$prefix}card-title-line-height: #{$card-title-line-height};
|
||||
--card-title-margin-bottom: #{$card-title-margin-bottom};
|
||||
--card-title-line-height: #{$card-title-line-height};
|
||||
display: block;
|
||||
margin: 0 0 var(--#{$prefix}card-title-margin-bottom);
|
||||
margin: 0 0 var(--card-title-margin-bottom);
|
||||
font-size: $h3-font-size;
|
||||
font-weight: var(--#{$prefix}font-weight-medium);
|
||||
color: var(--#{$prefix}heading-color);
|
||||
line-height: var(--#{$prefix}card-title-line-height);
|
||||
font-weight: var(--font-weight-medium);
|
||||
color: var(--heading-color);
|
||||
line-height: var(--card-title-line-height);
|
||||
|
||||
@at-root a#{&}:hover {
|
||||
color: inherit;
|
||||
@@ -337,9 +337,9 @@ Stacked card
|
||||
}
|
||||
|
||||
.card-subtitle {
|
||||
--#{$prefix}card-subtitle-margin-start: #{$card-subtitle-margin-start};
|
||||
--card-subtitle-margin-start: #{$card-subtitle-margin-start};
|
||||
margin-bottom: $card-title-spacer-y;
|
||||
color: var(--#{$prefix}secondary);
|
||||
color: var(--secondary);
|
||||
font-weight: normal;
|
||||
|
||||
.card-header & {
|
||||
@@ -347,16 +347,16 @@ Stacked card
|
||||
}
|
||||
|
||||
.card-title & {
|
||||
margin: 0 0 0 var(--#{$prefix}card-subtitle-margin-start);
|
||||
margin: 0 0 0 var(--card-subtitle-margin-start);
|
||||
font-size: $h4-font-size;
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
--#{$prefix}card-body-padding-sm: #{$card-body-padding-sm};
|
||||
--#{$prefix}card-body-padding-md: #{$card-body-padding-md};
|
||||
--#{$prefix}card-body-padding-lg: #{$card-body-padding-lg};
|
||||
--#{$prefix}card-body-padding-lg-up: #{$card-body-padding-lg-up};
|
||||
--card-body-padding-sm: #{$card-body-padding-sm};
|
||||
--card-body-padding-md: #{$card-body-padding-md};
|
||||
--card-body-padding-lg: #{$card-body-padding-lg};
|
||||
--card-body-padding-lg-up: #{$card-body-padding-lg-up};
|
||||
position: relative;
|
||||
|
||||
> :last-child {
|
||||
@@ -364,22 +364,22 @@ Stacked card
|
||||
}
|
||||
|
||||
.card-sm > & {
|
||||
padding: var(--#{$prefix}card-body-padding-sm);
|
||||
padding: var(--card-body-padding-sm);
|
||||
}
|
||||
|
||||
.card-md > & {
|
||||
@include media-breakpoint-up(md) {
|
||||
padding: var(--#{$prefix}card-body-padding-md);
|
||||
padding: var(--card-body-padding-md);
|
||||
}
|
||||
}
|
||||
|
||||
.card-lg > & {
|
||||
@include media-breakpoint-up(md) {
|
||||
padding: var(--#{$prefix}card-body-padding-lg);
|
||||
padding: var(--card-body-padding-lg);
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
padding: var(--#{$prefix}card-body-padding-lg-up);
|
||||
padding: var(--card-body-padding-lg-up);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -388,7 +388,7 @@ Stacked card
|
||||
}
|
||||
|
||||
& + & {
|
||||
border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
|
||||
border-top: var(--border-width) var(--border-style) var(--border-color);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -400,21 +400,21 @@ Stacked card
|
||||
Card optinos
|
||||
*/
|
||||
.card-options {
|
||||
--#{$prefix}card-options-top: #{$card-options-top};
|
||||
--#{$prefix}card-options-inset: #{$card-options-inset};
|
||||
top: var(--#{$prefix}card-options-top);
|
||||
inset-inline-end: var(--#{$prefix}card-options-inset);
|
||||
--card-options-top: #{$card-options-top};
|
||||
--card-options-inset: #{$card-options-inset};
|
||||
top: var(--card-options-top);
|
||||
inset-inline-end: var(--card-options-inset);
|
||||
display: flex;
|
||||
margin-inline-start: auto;
|
||||
}
|
||||
|
||||
.card-options-link {
|
||||
--#{$prefix}card-options-link-min-width: #{$card-options-link-min-width};
|
||||
--#{$prefix}card-options-link-margin-start: #{$card-options-link-margin-start};
|
||||
--card-options-link-min-width: #{$card-options-link-min-width};
|
||||
--card-options-link-margin-start: #{$card-options-link-margin-start};
|
||||
display: inline-block;
|
||||
min-width: var(--#{$prefix}card-options-link-min-width);
|
||||
margin-inline-start: var(--#{$prefix}card-options-link-margin-start);
|
||||
color: var(--#{$prefix}secondary);
|
||||
min-width: var(--card-options-link-min-width);
|
||||
margin-inline-start: var(--card-options-link-margin-start);
|
||||
color: var(--secondary);
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -426,7 +426,7 @@ Card status
|
||||
inset-inline-end: 0;
|
||||
inset-inline-start: 0;
|
||||
height: $card-status-size;
|
||||
@include border-radius(var(--#{$prefix}card-border-radius) var(--#{$prefix}card-border-radius) 0 0);
|
||||
@include border-radius(var(--card-border-radius) var(--card-border-radius) 0 0);
|
||||
}
|
||||
|
||||
.card-status-start {
|
||||
@@ -435,7 +435,7 @@ Card status
|
||||
bottom: 0;
|
||||
width: $card-status-size;
|
||||
height: 100%;
|
||||
@include border-radius(var(--#{$prefix}card-border-radius) 0 0 var(--#{$prefix}card-border-radius));
|
||||
@include border-radius(var(--card-border-radius) 0 0 var(--card-border-radius));
|
||||
}
|
||||
|
||||
.card-status-bottom {
|
||||
@@ -444,7 +444,7 @@ Card status
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: $card-status-size;
|
||||
@include border-radius(0 0 var(--#{$prefix}card-border-radius) var(--#{$prefix}card-border-radius));
|
||||
@include border-radius(0 0 var(--card-border-radius) var(--card-border-radius));
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -459,13 +459,13 @@ Card table
|
||||
&:first-child {
|
||||
padding-inline-start: $card-spacer-x;
|
||||
border-inline-start: 0;
|
||||
border-start-start-radius: var(--#{$prefix}card-border-radius);
|
||||
border-start-start-radius: var(--card-border-radius);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-inline-end: $card-spacer-x;
|
||||
border-inline-end: 0;
|
||||
border-start-end-radius: var(--#{$prefix}card-border-radius);
|
||||
border-start-end-radius: var(--card-border-radius);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -476,11 +476,11 @@ Card table
|
||||
&:last-child {
|
||||
tr:last-child {
|
||||
> *:last-child {
|
||||
border-end-end-radius: calc(var(--#{$prefix}card-border-radius) - var(--#{$prefix}card-border-width));
|
||||
border-end-end-radius: calc(var(--card-border-radius) - var(--card-border-width));
|
||||
}
|
||||
|
||||
> *:first-child {
|
||||
border-end-start-radius: calc(var(--#{$prefix}card-border-radius) - var(--#{$prefix}card-border-width));
|
||||
border-end-start-radius: calc(var(--card-border-radius) - var(--card-border-width));
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -516,7 +516,7 @@ Card table
|
||||
}
|
||||
|
||||
.card-body + & {
|
||||
border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}table-border-color);
|
||||
border-top: var(--border-width) var(--border-style) var(--table-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -541,21 +541,21 @@ Card code
|
||||
Card chart
|
||||
*/
|
||||
.card-chart {
|
||||
--#{$prefix}card-avatar-height: #{$card-avatar-height};
|
||||
--card-avatar-height: #{$card-avatar-height};
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
height: var(--#{$prefix}card-avatar-height);
|
||||
height: var(--card-avatar-height);
|
||||
}
|
||||
|
||||
/**
|
||||
Card avatar
|
||||
*/
|
||||
.card-avatar {
|
||||
--#{$prefix}card-avatar-ring-width: #{$card-avatar-ring-width};
|
||||
--card-avatar-ring-width: #{$card-avatar-ring-width};
|
||||
margin-inline-start: auto;
|
||||
margin-inline-end: auto;
|
||||
box-shadow: 0 0 0 var(--#{$prefix}card-avatar-ring-width) var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
|
||||
margin-top: calc(-1 * calc(var(--#{$prefix}avatar-size) * 0.5));
|
||||
box-shadow: 0 0 0 var(--card-avatar-ring-width) var(--card-bg, var(--bg-surface));
|
||||
margin-top: calc(-1 * calc(var(--avatar-size) * 0.5));
|
||||
}
|
||||
|
||||
/*
|
||||
@@ -563,7 +563,7 @@ Card list group
|
||||
*/
|
||||
.card-list-group {
|
||||
.card-body + & {
|
||||
border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
|
||||
border-top: var(--border-width) var(--border-style) var(--border-color);
|
||||
}
|
||||
|
||||
.list-group-item {
|
||||
@@ -592,18 +592,18 @@ Card list group
|
||||
|
||||
.nav-link {
|
||||
background: $card-cap-bg;
|
||||
border: $card-border-width var(--#{$prefix}border-style) $card-border-color;
|
||||
border: $card-border-width var(--border-style) $card-border-color;
|
||||
|
||||
&.active,
|
||||
&:active,
|
||||
&:hover {
|
||||
border-color: $card-border-color;
|
||||
color: var(--#{$prefix}body-color);
|
||||
color: var(--body-color);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: $headings-color;
|
||||
background: var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
|
||||
background: var(--card-bg, var(--bg-surface));
|
||||
border-bottom-color: transparent;
|
||||
}
|
||||
}
|
||||
@@ -643,7 +643,7 @@ Card list group
|
||||
margin-bottom: 0;
|
||||
|
||||
.nav-link {
|
||||
border-bottom: $card-border-width var(--#{$prefix}border-style) $card-border-color;
|
||||
border-bottom: $card-border-width var(--border-style) $card-border-color;
|
||||
@include border-radius(0 0 $card-border-radius $card-border-radius);
|
||||
}
|
||||
|
||||
@@ -662,12 +662,12 @@ Card list group
|
||||
}
|
||||
|
||||
.nav-tabs + .tab-content .card {
|
||||
border-end-start-radius: var(--#{$prefix}card-border-radius);
|
||||
border-end-start-radius: var(--card-border-radius);
|
||||
border-start-start-radius: 0 !important;
|
||||
}
|
||||
|
||||
.tab-content:has(+ .nav-tabs) .card {
|
||||
border-start-start-radius: var(--#{$prefix}card-border-radius);
|
||||
border-start-start-radius: var(--card-border-radius);
|
||||
border-end-start-radius: 0 !important;
|
||||
}
|
||||
}
|
||||
@@ -676,64 +676,64 @@ Card list group
|
||||
Card note
|
||||
*/
|
||||
.card-note {
|
||||
--#{$prefix}card-bg: #fff7dd;
|
||||
--#{$prefix}card-border-color: #fff1c9;
|
||||
--card-bg: #fff7dd;
|
||||
--card-border-color: #fff1c9;
|
||||
}
|
||||
|
||||
/**
|
||||
Card gradient
|
||||
*/
|
||||
.card-gradient {
|
||||
--#{$prefix}card-gradient-direction: 180deg;
|
||||
--#{$prefix}card-gradient-opacity: 86%;
|
||||
--#{$prefix}card-gradient: var(--tblr-primary), var(--tblr-primary);
|
||||
--card-gradient-direction: 180deg;
|
||||
--card-gradient-opacity: 86%;
|
||||
--card-gradient: var(--primary), var(--primary);
|
||||
|
||||
background:
|
||||
radial-gradient(ellipse at center, var(--#{$prefix}card-bg) 0%, color-mix(in srgb, var(--#{$prefix}card-bg) 0%, transparent) 80%) border-box,
|
||||
linear-gradient(var(--#{$prefix}card-gradient-direction), color-mix(in srgb, var(--#{$prefix}card-bg) var(--#{$prefix}card-gradient-opacity), transparent) 0%, var(--#{$prefix}card-bg) 40%) border-box,
|
||||
linear-gradient(calc(270deg + var(--#{$prefix}card-gradient-direction)), var(--#{$prefix}card-gradient)) border-box;
|
||||
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;
|
||||
}
|
||||
|
||||
@each $name, $color in map.merge($colors, $theme-colors) {
|
||||
.card-gradient-#{$name} {
|
||||
--#{$prefix}card-gradient: var(--tblr-#{$name}), var(--tblr-#{$name});
|
||||
--card-gradient: var(--#{$name}), var(--#{$name});
|
||||
}
|
||||
}
|
||||
|
||||
.card-gradient-rainbow {
|
||||
--#{$prefix}card-gradient: #78c5d6, #459ba8, #79c267, #c5d647, #f5d63d, #f08b33, #e868a2, #be61a5;
|
||||
--card-gradient: #78c5d6, #459ba8, #79c267, #c5d647, #f5d63d, #f08b33, #e868a2, #be61a5;
|
||||
}
|
||||
|
||||
.card-gradient-sun {
|
||||
--#{$prefix}card-gradient: #fd1d1d, #fcb045;
|
||||
--card-gradient: #fd1d1d, #fcb045;
|
||||
}
|
||||
|
||||
.card-gradient-snow {
|
||||
--#{$prefix}card-gradient: #333, #e9ecef;
|
||||
--card-gradient: #333, #e9ecef;
|
||||
}
|
||||
|
||||
.card-gradient-ocean {
|
||||
--#{$prefix}card-gradient: #1cb5e0, #000851;
|
||||
--card-gradient: #1cb5e0, #000851;
|
||||
}
|
||||
|
||||
.card-gradient-mellow {
|
||||
--#{$prefix}card-gradient: #f8ff00, #3ad59f;
|
||||
--card-gradient: #f8ff00, #3ad59f;
|
||||
}
|
||||
|
||||
.card-gradient-disco {
|
||||
--#{$prefix}card-gradient: #fc466b, #3f5efb;
|
||||
--card-gradient: #fc466b, #3f5efb;
|
||||
}
|
||||
|
||||
.card-gradient-psychedelic {
|
||||
--#{$prefix}card-gradient: #fcc5e4, #fda34b, #ff7882, #c8699e, #7046aa, #0c1db8, #020f75;
|
||||
--card-gradient: #fcc5e4, #fda34b, #ff7882, #c8699e, #7046aa, #0c1db8, #020f75;
|
||||
}
|
||||
|
||||
.card-gradient-love {
|
||||
--#{$prefix}card-gradient: #f235e6, #bc0707;
|
||||
--card-gradient: #f235e6, #bc0707;
|
||||
}
|
||||
|
||||
.card-gradient-gold {
|
||||
--#{$prefix}card-gradient: #9d4100, #bf7122, #f59f00, #ffd700;
|
||||
--card-gradient: #9d4100, #bf7122, #f59f00, #ffd700;
|
||||
}
|
||||
|
||||
.card-gradient-animated {
|
||||
@@ -741,13 +741,13 @@ Card gradient
|
||||
}
|
||||
|
||||
.card-gradient-bottom {
|
||||
--#{$prefix}card-gradient-direction: 0deg;
|
||||
--card-gradient-direction: 0deg;
|
||||
}
|
||||
|
||||
.card-gradient-end {
|
||||
--#{$prefix}card-gradient-direction: 270deg;
|
||||
--card-gradient-direction: 270deg;
|
||||
}
|
||||
|
||||
.card-gradient-start {
|
||||
--#{$prefix}card-gradient-direction: 90deg;
|
||||
--card-gradient-direction: 90deg;
|
||||
}
|
||||
|
||||
@@ -4,11 +4,11 @@
|
||||
}
|
||||
|
||||
.carousel-indicators-vertical {
|
||||
--#{$prefix}carousel-indicators-vertical-margin-inline-end: #{$carousel-indicators-vertical-margin-inline-end};
|
||||
--carousel-indicators-vertical-margin-inline-end: #{$carousel-indicators-vertical-margin-inline-end};
|
||||
|
||||
inset-inline-start: auto;
|
||||
top: 0;
|
||||
margin: 0 var(--#{$prefix}carousel-indicators-vertical-margin-inline-end) 0 0;
|
||||
margin: 0 var(--carousel-indicators-vertical-margin-inline-end) 0 0;
|
||||
flex-direction: column;
|
||||
|
||||
[data-bs-target],
|
||||
@@ -17,8 +17,8 @@
|
||||
width: $carousel-indicator-height;
|
||||
height: $carousel-indicator-width;
|
||||
border: 0;
|
||||
border-inline-start: $carousel-indicator-hit-area-height var(--#{$prefix}border-style) transparent;
|
||||
border-inline-end: $carousel-indicator-hit-area-height var(--#{$prefix}border-style) transparent;
|
||||
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,8 +27,8 @@
|
||||
[data-target] {
|
||||
width: $carousel-indicator-dot-width;
|
||||
height: $carousel-indicator-dot-width;
|
||||
@include border-radius(var(--#{$prefix}border-radius-pill));
|
||||
border: $carousel-indicator-hit-area-height var(--#{$prefix}border-style) transparent;
|
||||
@include border-radius(var(--border-radius-pill));
|
||||
border: $carousel-indicator-hit-area-height var(--border-style) transparent;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
@@ -40,7 +40,7 @@
|
||||
height: auto;
|
||||
background: no-repeat center/cover;
|
||||
border: 0;
|
||||
@include border-radius(var(--#{$prefix}border-radius));
|
||||
@include border-radius(var(--border-radius));
|
||||
box-shadow: $box-shadow;
|
||||
margin: 0 $carousel-indicator-spacer;
|
||||
opacity: $carousel-indicator-thumb-opacity;
|
||||
@@ -51,7 +51,7 @@
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
padding-top: var(--#{$prefix}aspect-ratio, 100%);
|
||||
padding-top: var(--aspect-ratio, 100%);
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
+22
-22
@@ -1,10 +1,10 @@
|
||||
@use '../config' as *;
|
||||
|
||||
.chart {
|
||||
--#{$prefix}chart-min-height: #{$chart-min-height};
|
||||
--chart-min-height: #{$chart-min-height};
|
||||
|
||||
display: block;
|
||||
min-height: var(--#{$prefix}chart-min-height);
|
||||
min-height: var(--chart-min-height);
|
||||
|
||||
text {
|
||||
font-family: inherit;
|
||||
@@ -12,57 +12,57 @@
|
||||
}
|
||||
|
||||
.chart-sm {
|
||||
--#{$prefix}chart-height-sm: #{$chart-height-sm};
|
||||
--chart-height-sm: #{$chart-height-sm};
|
||||
|
||||
height: var(--#{$prefix}chart-height-sm);
|
||||
height: var(--chart-height-sm);
|
||||
}
|
||||
|
||||
.chart-lg {
|
||||
--#{$prefix}chart-height-lg: #{$chart-height-lg};
|
||||
--chart-height-lg: #{$chart-height-lg};
|
||||
|
||||
height: var(--#{$prefix}chart-height-lg);
|
||||
height: var(--chart-height-lg);
|
||||
}
|
||||
|
||||
.chart-square {
|
||||
--#{$prefix}chart-height-square: #{$chart-height-square};
|
||||
--chart-height-square: #{$chart-height-square};
|
||||
|
||||
height: var(--#{$prefix}chart-height-square);
|
||||
height: var(--chart-height-square);
|
||||
}
|
||||
|
||||
/**
|
||||
Chart sparkline
|
||||
*/
|
||||
.chart-sparkline {
|
||||
--#{$prefix}chart-sparkline-width: #{$chart-sparkline-width};
|
||||
--#{$prefix}chart-sparkline-height: #{$chart-sparkline-height};
|
||||
--chart-sparkline-width: #{$chart-sparkline-width};
|
||||
--chart-sparkline-height: #{$chart-sparkline-height};
|
||||
|
||||
position: relative;
|
||||
width: var(--#{$prefix}chart-sparkline-width);
|
||||
height: var(--#{$prefix}chart-sparkline-height);
|
||||
width: var(--chart-sparkline-width);
|
||||
height: var(--chart-sparkline-height);
|
||||
line-height: 1;
|
||||
min-height: 0 !important;
|
||||
}
|
||||
|
||||
.chart-sparkline-sm {
|
||||
--#{$prefix}chart-sparkline-height-sm: #{$chart-sparkline-height-sm};
|
||||
--chart-sparkline-height-sm: #{$chart-sparkline-height-sm};
|
||||
|
||||
height: var(--#{$prefix}chart-sparkline-height-sm);
|
||||
height: var(--chart-sparkline-height-sm);
|
||||
}
|
||||
|
||||
.chart-sparkline-square {
|
||||
--#{$prefix}chart-sparkline-width-square: #{$chart-sparkline-width-square};
|
||||
--chart-sparkline-width-square: #{$chart-sparkline-width-square};
|
||||
|
||||
width: var(--#{$prefix}chart-sparkline-width-square);
|
||||
width: var(--chart-sparkline-width-square);
|
||||
}
|
||||
|
||||
.chart-sparkline-wide {
|
||||
--#{$prefix}chart-sparkline-width-wide: #{$chart-sparkline-width-wide};
|
||||
--chart-sparkline-width-wide: #{$chart-sparkline-width-wide};
|
||||
|
||||
width: var(--#{$prefix}chart-sparkline-width-wide);
|
||||
width: var(--chart-sparkline-width-wide);
|
||||
}
|
||||
|
||||
.chart-sparkline-label {
|
||||
--#{$prefix}chart-sparkline-label-icon-size: #{$chart-sparkline-label-icon-size};
|
||||
--chart-sparkline-label-icon-size: #{$chart-sparkline-label-icon-size};
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
@@ -75,8 +75,8 @@ Chart sparkline
|
||||
font-size: $h6-font-size;
|
||||
|
||||
.icon {
|
||||
width: var(--#{$prefix}chart-sparkline-label-icon-size);
|
||||
height: var(--#{$prefix}chart-sparkline-label-icon-size);
|
||||
font-size: var(--#{$prefix}chart-sparkline-label-icon-size);
|
||||
width: var(--chart-sparkline-label-icon-size);
|
||||
height: var(--chart-sparkline-label-icon-size);
|
||||
font-size: var(--chart-sparkline-label-icon-size);
|
||||
}
|
||||
}
|
||||
|
||||
+10
-10
@@ -1,31 +1,31 @@
|
||||
@use '../config' as *;
|
||||
|
||||
.chat {
|
||||
--#{$prefix}chat-bubbles-gap: #{$chat-bubbles-gap};
|
||||
--#{$prefix}chat-bubble-padding: #{$chat-bubble-padding};
|
||||
--#{$prefix}chat-bubble-title-margin-bottom: #{$chat-bubble-title-margin-bottom};
|
||||
--chat-bubbles-gap: #{$chat-bubbles-gap};
|
||||
--chat-bubble-padding: #{$chat-bubble-padding};
|
||||
--chat-bubble-title-margin-bottom: #{$chat-bubble-title-margin-bottom};
|
||||
}
|
||||
|
||||
.chat-bubbles {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--#{$prefix}chat-bubbles-gap);
|
||||
gap: var(--chat-bubbles-gap);
|
||||
}
|
||||
|
||||
.chat-bubble {
|
||||
background: var(--#{$prefix}bg-surface-secondary);
|
||||
@include border-radius(var(--#{$prefix}border-radius-lg));
|
||||
padding: var(--#{$prefix}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 {
|
||||
background-color: var(--#{$prefix}primary-lt);
|
||||
background-color: var(--primary-lt);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.chat-bubble-title {
|
||||
margin-bottom: var(--#{$prefix}chat-bubble-title-margin-bottom);
|
||||
margin-bottom: var(--chat-bubble-title-margin-bottom);
|
||||
}
|
||||
|
||||
.chat-bubble-author {
|
||||
@@ -33,7 +33,7 @@
|
||||
}
|
||||
|
||||
.chat-bubble-date {
|
||||
color: var(--#{$prefix}secondary);
|
||||
color: var(--secondary);
|
||||
}
|
||||
|
||||
.chat-bubble-body {
|
||||
|
||||
+23
-23
@@ -1,24 +1,24 @@
|
||||
@use '../config' as *;
|
||||
|
||||
.btn-close {
|
||||
--#{$prefix}btn-close-color: currentColor;
|
||||
--#{$prefix}btn-close-bg: #{escape-svg($btn-close-bg)};
|
||||
--#{$prefix}btn-close-opacity: #{$btn-close-opacity};
|
||||
--#{$prefix}btn-close-hover-opacity: #{$btn-close-hover-opacity};
|
||||
--#{$prefix}btn-close-focus-shadow: #{$btn-close-focus-shadow};
|
||||
--#{$prefix}btn-close-focus-opacity: #{$btn-close-focus-opacity};
|
||||
--#{$prefix}btn-close-disabled-opacity: #{$btn-close-disabled-opacity};
|
||||
--#{$prefix}btn-close-size: #{$btn-close-width};
|
||||
--btn-close-color: currentColor;
|
||||
--btn-close-bg: #{escape-svg($btn-close-bg)};
|
||||
--btn-close-opacity: #{$btn-close-opacity};
|
||||
--btn-close-hover-opacity: #{$btn-close-hover-opacity};
|
||||
--btn-close-focus-shadow: #{$btn-close-focus-shadow};
|
||||
--btn-close-focus-opacity: #{$btn-close-focus-opacity};
|
||||
--btn-close-disabled-opacity: #{$btn-close-disabled-opacity};
|
||||
--btn-close-size: #{$btn-close-width};
|
||||
|
||||
width: var(--#{$prefix}btn-close-size);
|
||||
height: var(--#{$prefix}btn-close-size);
|
||||
width: var(--btn-close-size);
|
||||
height: var(--btn-close-size);
|
||||
padding: $btn-close-padding-y $btn-close-padding-x;
|
||||
color: var(--#{$prefix}btn-close-color);
|
||||
mask: var(--#{$prefix}btn-close-bg) no-repeat center/calc(var(--#{$prefix}btn-close-size) * 0.75);
|
||||
background-color: var(--#{$prefix}btn-close-color);
|
||||
color: var(--btn-close-color);
|
||||
mask: var(--btn-close-bg) no-repeat center/calc(var(--btn-close-size) * 0.75);
|
||||
background-color: var(--btn-close-color);
|
||||
border: 0;
|
||||
@include border-radius(var(--tblr-border-radius));
|
||||
opacity: var(--#{$prefix}btn-close-opacity);
|
||||
@include border-radius(var(--border-radius));
|
||||
opacity: var(--btn-close-opacity);
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
position: relative;
|
||||
@@ -35,23 +35,23 @@
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--#{$prefix}btn-close-color);
|
||||
color: var(--btn-close-color);
|
||||
text-decoration: none;
|
||||
opacity: var(--#{$prefix}btn-close-hover-opacity);
|
||||
background-color: var(--#{$prefix}btn-close-color);
|
||||
opacity: var(--btn-close-hover-opacity);
|
||||
background-color: var(--btn-close-color);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline: 0;
|
||||
box-shadow: var(--#{$prefix}btn-close-focus-shadow);
|
||||
opacity: var(--#{$prefix}btn-close-focus-opacity);
|
||||
box-shadow: var(--btn-close-focus-shadow);
|
||||
opacity: var(--btn-close-focus-opacity);
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&.disabled {
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
opacity: var(--#{$prefix}btn-close-disabled-opacity);
|
||||
opacity: var(--btn-close-disabled-opacity);
|
||||
}
|
||||
|
||||
@include media-print {
|
||||
@@ -60,7 +60,7 @@
|
||||
}
|
||||
|
||||
// @mixin btn-close-white() {
|
||||
// --#{$prefix}btn-close-filter: #{$btn-close-filter-dark};
|
||||
// --btn-close-filter: #{$btn-close-filter-dark};
|
||||
// }
|
||||
|
||||
// .btn-close-white {
|
||||
@@ -69,7 +69,7 @@
|
||||
|
||||
// :root,
|
||||
// [data-bs-theme="light"] {
|
||||
// --#{$prefix}btn-close-filter: #{$btn-close-filter};
|
||||
// --btn-close-filter: #{$btn-close-filter};
|
||||
// }
|
||||
|
||||
// @if $enable-dark-mode {
|
||||
|
||||
@@ -5,16 +5,16 @@
|
||||
@use '../config' as *;
|
||||
|
||||
.datagrid {
|
||||
--#{$prefix}datagrid-padding: #{$datagrid-padding};
|
||||
--#{$prefix}datagrid-item-width: #{$datagrid-item-width};
|
||||
--#{$prefix}datagrid-title-margin-bottom: #{$datagrid-title-margin-bottom};
|
||||
--datagrid-padding: #{$datagrid-padding};
|
||||
--datagrid-item-width: #{$datagrid-item-width};
|
||||
--datagrid-title-margin-bottom: #{$datagrid-title-margin-bottom};
|
||||
|
||||
display: grid;
|
||||
grid-gap: var(--#{$prefix}datagrid-padding);
|
||||
grid-template-columns: repeat(auto-fit, minmax(var(--#{$prefix}datagrid-item-width), 1fr));
|
||||
grid-gap: var(--datagrid-padding);
|
||||
grid-template-columns: repeat(auto-fit, minmax(var(--datagrid-item-width), 1fr));
|
||||
}
|
||||
|
||||
.datagrid-title {
|
||||
@include subheader;
|
||||
margin-bottom: var(--#{$prefix}datagrid-title-margin-bottom);
|
||||
margin-bottom: var(--datagrid-title-margin-bottom);
|
||||
}
|
||||
|
||||
@@ -1,15 +1,15 @@
|
||||
@use '../config' as *;
|
||||
|
||||
.dropdown-menu {
|
||||
--#{$prefix}dropdown-item-gap: #{$dropdown-item-gap};
|
||||
--#{$prefix}dropdown-item-icon-size: #{$icon-size};
|
||||
--#{$prefix}dropdown-item-icon-color: var(--#{$prefix}tertiary);
|
||||
--#{$prefix}dropdown-header-padding-bottom: #{$dropdown-header-padding-bottom};
|
||||
--#{$prefix}dropdown-menu-columns-gap: #{$dropdown-menu-columns-gap};
|
||||
--#{$prefix}dropdown-arrow-offset: #{$dropdown-arrow-offset};
|
||||
--#{$prefix}dropdown-arrow-inset: #{$dropdown-arrow-inset};
|
||||
--#{$prefix}dropdown-dropend-offset: #{$dropdown-dropend-offset};
|
||||
--#{$prefix}dropdown-menu-card-min-width: #{$dropdown-menu-card-min-width};
|
||||
--dropdown-item-gap: #{$dropdown-item-gap};
|
||||
--dropdown-item-icon-size: #{$icon-size};
|
||||
--dropdown-item-icon-color: var(--tertiary);
|
||||
--dropdown-header-padding-bottom: #{$dropdown-header-padding-bottom};
|
||||
--dropdown-menu-columns-gap: #{$dropdown-menu-columns-gap};
|
||||
--dropdown-arrow-offset: #{$dropdown-arrow-offset};
|
||||
--dropdown-arrow-inset: #{$dropdown-arrow-inset};
|
||||
--dropdown-dropend-offset: #{$dropdown-dropend-offset};
|
||||
--dropdown-menu-card-min-width: #{$dropdown-menu-card-min-width};
|
||||
user-select: none;
|
||||
background-clip: border-box;
|
||||
|
||||
@@ -34,18 +34,18 @@
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
line-height: $line-height-base;
|
||||
gap: var(--#{$prefix}dropdown-item-gap);
|
||||
gap: var(--dropdown-item-gap);
|
||||
}
|
||||
|
||||
.dropdown-item-icon {
|
||||
width: var(--#{$prefix}dropdown-item-icon-size) !important;
|
||||
height: var(--#{$prefix}dropdown-item-icon-size) !important;
|
||||
color: var(--#{$prefix}dropdown-item-icon-color);
|
||||
width: var(--dropdown-item-icon-size) !important;
|
||||
height: var(--dropdown-item-icon-size) !important;
|
||||
color: var(--dropdown-item-icon-color);
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.dropdown-item-indicator {
|
||||
height: var(--#{$prefix}dropdown-item-icon-size);
|
||||
height: var(--dropdown-item-icon-size);
|
||||
display: inline-flex;
|
||||
line-height: 1;
|
||||
vertical-align: bottom;
|
||||
@@ -54,7 +54,7 @@
|
||||
|
||||
.dropdown-header {
|
||||
@include subheader;
|
||||
padding-bottom: var(--#{$prefix}dropdown-header-padding-bottom);
|
||||
padding-bottom: var(--dropdown-header-padding-bottom);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@@ -74,15 +74,15 @@
|
||||
|
||||
.dropdown-menu-columns {
|
||||
display: flex;
|
||||
flex: 0 var(--#{$prefix}dropdown-menu-columns-gap);
|
||||
flex: 0 var(--dropdown-menu-columns-gap);
|
||||
}
|
||||
|
||||
.dropdown-menu-arrow {
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: calc(-1 * var(--#{$prefix}dropdown-arrow-offset));
|
||||
inset-inline-start: var(--#{$prefix}dropdown-arrow-inset);
|
||||
top: calc(-1 * var(--dropdown-arrow-offset));
|
||||
inset-inline-start: var(--dropdown-arrow-inset);
|
||||
display: block;
|
||||
background: inherit;
|
||||
width: 14px;
|
||||
@@ -98,7 +98,7 @@
|
||||
|
||||
&.dropdown-menu-end {
|
||||
&:before {
|
||||
inset-inline-end: var(--#{$prefix}dropdown-arrow-inset);
|
||||
inset-inline-end: var(--dropdown-arrow-inset);
|
||||
inset-inline-start: auto;
|
||||
}
|
||||
}
|
||||
@@ -107,7 +107,7 @@
|
||||
.dropend {
|
||||
> .dropdown-menu {
|
||||
margin-top: subtract(calc(-1 * $dropdown-padding-y), 1px);
|
||||
margin-inline-start: calc(-1 * var(--#{$prefix}dropdown-dropend-offset));
|
||||
margin-inline-start: calc(-1 * var(--dropdown-dropend-offset));
|
||||
}
|
||||
|
||||
.dropdown-toggle {
|
||||
@@ -119,7 +119,7 @@
|
||||
|
||||
.dropdown-menu-card {
|
||||
padding: 0;
|
||||
min-width: var(--#{$prefix}dropdown-menu-card-min-width);
|
||||
min-width: var(--dropdown-menu-card-min-width);
|
||||
|
||||
> .card {
|
||||
margin: 0;
|
||||
|
||||
+24
-24
@@ -1,35 +1,35 @@
|
||||
@use '../config' as *;
|
||||
|
||||
.empty {
|
||||
--#{$prefix}empty-padding: #{$empty-padding};
|
||||
--#{$prefix}empty-padding-md: #{$empty-padding-md};
|
||||
--#{$prefix}empty-icon-size: #{$empty-icon-size};
|
||||
--#{$prefix}empty-icon-margin-bottom: #{$empty-icon-margin-bottom};
|
||||
--#{$prefix}empty-img-margin-bottom: #{$empty-img-margin-bottom};
|
||||
--#{$prefix}empty-header-margin-bottom: #{$empty-header-margin-bottom};
|
||||
--#{$prefix}empty-header-font-size: #{$empty-header-font-size};
|
||||
--#{$prefix}empty-title-margin-bottom: #{$empty-title-margin-bottom};
|
||||
--#{$prefix}empty-action-margin-top: #{$empty-action-margin-top};
|
||||
--empty-padding: #{$empty-padding};
|
||||
--empty-padding-md: #{$empty-padding-md};
|
||||
--empty-icon-size: #{$empty-icon-size};
|
||||
--empty-icon-margin-bottom: #{$empty-icon-margin-bottom};
|
||||
--empty-img-margin-bottom: #{$empty-img-margin-bottom};
|
||||
--empty-header-margin-bottom: #{$empty-header-margin-bottom};
|
||||
--empty-header-font-size: #{$empty-header-font-size};
|
||||
--empty-title-margin-bottom: #{$empty-title-margin-bottom};
|
||||
--empty-action-margin-top: #{$empty-action-margin-top};
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100%;
|
||||
padding: var(--#{$prefix}empty-padding);
|
||||
padding: var(--empty-padding);
|
||||
text-align: center;
|
||||
|
||||
@include media-breakpoint-up(md) {
|
||||
padding: var(--#{$prefix}empty-padding-md);
|
||||
padding: var(--empty-padding-md);
|
||||
}
|
||||
}
|
||||
|
||||
.empty-icon {
|
||||
margin: 0 0 var(--#{$prefix}empty-icon-margin-bottom);
|
||||
width: var(--#{$prefix}empty-icon-size);
|
||||
height: var(--#{$prefix}empty-icon-size);
|
||||
margin: 0 0 var(--empty-icon-margin-bottom);
|
||||
width: var(--empty-icon-size);
|
||||
height: var(--empty-icon-size);
|
||||
line-height: 1;
|
||||
color: var(--#{$prefix}secondary);
|
||||
color: var(--secondary);
|
||||
|
||||
svg {
|
||||
width: 100%;
|
||||
@@ -38,16 +38,16 @@
|
||||
}
|
||||
|
||||
.empty-img {
|
||||
margin: 0 0 var(--#{$prefix}empty-img-margin-bottom);
|
||||
margin: 0 0 var(--empty-img-margin-bottom);
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.empty-header {
|
||||
margin: 0 0 var(--#{$prefix}empty-header-margin-bottom);
|
||||
font-size: var(--#{$prefix}empty-header-font-size);
|
||||
font-weight: var(--#{$prefix}font-weight-light);
|
||||
margin: 0 0 var(--empty-header-margin-bottom);
|
||||
font-size: var(--empty-header-font-size);
|
||||
font-weight: var(--font-weight-light);
|
||||
line-height: 1;
|
||||
color: var(--#{$prefix}secondary);
|
||||
color: var(--secondary);
|
||||
}
|
||||
|
||||
.empty-title {
|
||||
@@ -58,14 +58,14 @@
|
||||
|
||||
.empty-title,
|
||||
.empty-subtitle {
|
||||
margin: 0 0 var(--#{$prefix}empty-title-margin-bottom);
|
||||
margin: 0 0 var(--empty-title-margin-bottom);
|
||||
}
|
||||
|
||||
.empty-action {
|
||||
margin-top: var(--#{$prefix}empty-action-margin-top);
|
||||
margin-top: var(--empty-action-margin-top);
|
||||
}
|
||||
|
||||
.empty-bordered {
|
||||
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
|
||||
@include border-radius(var(--#{$prefix}border-radius));
|
||||
border: var(--border-width) var(--border-style) var(--border-color);
|
||||
@include border-radius(var(--border-radius));
|
||||
}
|
||||
|
||||
+36
-36
@@ -11,15 +11,15 @@ Form label
|
||||
*/
|
||||
.col-form-label,
|
||||
.form-label {
|
||||
--#{$prefix}form-label-required-gap: #{$form-label-required-gap};
|
||||
--form-label-required-gap: #{$form-label-required-gap};
|
||||
|
||||
display: block;
|
||||
font-weight: var(--#{$prefix}font-weight-medium);
|
||||
font-weight: var(--font-weight-medium);
|
||||
|
||||
&.required {
|
||||
&:after {
|
||||
content: '*';
|
||||
margin-inline-start: var(--#{$prefix}form-label-required-gap);
|
||||
margin-inline-start: var(--form-label-required-gap);
|
||||
color: $red;
|
||||
}
|
||||
}
|
||||
@@ -27,7 +27,7 @@ Form label
|
||||
|
||||
.form-label-description {
|
||||
float: inline-end;
|
||||
font-weight: var(--#{$prefix}font-weight-normal);
|
||||
font-weight: var(--font-weight-normal);
|
||||
color: $form-secondary-color;
|
||||
}
|
||||
|
||||
@@ -35,9 +35,9 @@ Form label
|
||||
Form hint
|
||||
*/
|
||||
.form-hint {
|
||||
--#{$prefix}form-hint-margin-top: #{$form-hint-margin-top};
|
||||
--#{$prefix}form-hint-label-offset: #{$form-hint-label-offset};
|
||||
--#{$prefix}form-hint-control-margin-top: #{$form-hint-control-margin-top};
|
||||
--form-hint-margin-top: #{$form-hint-margin-top};
|
||||
--form-hint-label-offset: #{$form-hint-label-offset};
|
||||
--form-hint-control-margin-top: #{$form-hint-control-margin-top};
|
||||
|
||||
display: block;
|
||||
color: $form-secondary-color;
|
||||
@@ -47,17 +47,17 @@ Form hint
|
||||
}
|
||||
|
||||
& + .form-control {
|
||||
margin-top: var(--#{$prefix}form-hint-margin-top);
|
||||
margin-top: var(--form-hint-margin-top);
|
||||
}
|
||||
|
||||
.form-label + & {
|
||||
margin-top: var(--#{$prefix}form-hint-label-offset);
|
||||
margin-top: var(--form-hint-label-offset);
|
||||
}
|
||||
|
||||
.input-group + &,
|
||||
.form-control + &,
|
||||
.form-select + & {
|
||||
margin-top: var(--#{$prefix}form-hint-control-margin-top);
|
||||
margin-top: var(--form-hint-control-margin-top);
|
||||
color: $form-secondary-color;
|
||||
}
|
||||
}
|
||||
@@ -67,7 +67,7 @@ Form select
|
||||
*/
|
||||
.form-select {
|
||||
&:-moz-focusring {
|
||||
color: var(--#{$prefix}body-color);
|
||||
color: var(--body-color);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -76,9 +76,9 @@ Form control
|
||||
*/
|
||||
.form-control {
|
||||
&:-webkit-autofill {
|
||||
box-shadow: 0 0 0 1000px var(--#{$prefix}bg-surface-secondary) inset;
|
||||
color: var(--#{$prefix}body-color);
|
||||
-webkit-text-fill-color: var(--#{$prefix}body-color);
|
||||
box-shadow: 0 0 0 1000px var(--bg-surface-secondary) inset;
|
||||
color: var(--body-color);
|
||||
-webkit-text-fill-color: var(--body-color);
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
@@ -93,7 +93,7 @@ Form control
|
||||
}
|
||||
|
||||
.form-control-light {
|
||||
background-color: var(--#{$prefix}gray-100);
|
||||
background-color: var(--gray-100);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
@@ -114,7 +114,7 @@ Form control
|
||||
}
|
||||
|
||||
.form-control-rounded {
|
||||
@include border-radius(var(--#{$prefix}border-radius-pill));
|
||||
@include border-radius(var(--border-radius-pill));
|
||||
}
|
||||
|
||||
.form-control-flush {
|
||||
@@ -127,20 +127,20 @@ Form control
|
||||
}
|
||||
|
||||
.form-footer {
|
||||
--#{$prefix}form-footer-margin-top: #{$form-footer-margin-top};
|
||||
--form-footer-margin-top: #{$form-footer-margin-top};
|
||||
|
||||
margin-top: var(--#{$prefix}form-footer-margin-top);
|
||||
margin-top: var(--form-footer-margin-top);
|
||||
}
|
||||
|
||||
.form-fieldset {
|
||||
--#{$prefix}form-fieldset-padding: #{$form-fieldset-padding};
|
||||
--#{$prefix}form-fieldset-margin-bottom: #{$form-fieldset-margin-bottom};
|
||||
--form-fieldset-padding: #{$form-fieldset-padding};
|
||||
--form-fieldset-margin-bottom: #{$form-fieldset-margin-bottom};
|
||||
|
||||
padding: var(--#{$prefix}form-fieldset-padding);
|
||||
margin-bottom: var(--#{$prefix}form-fieldset-margin-bottom);
|
||||
background: var(--#{$prefix}bg-surface-secondary);
|
||||
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
|
||||
@include border-radius(var(--#{$prefix}border-radius));
|
||||
padding: var(--form-fieldset-padding);
|
||||
margin-bottom: var(--form-fieldset-margin-bottom);
|
||||
background: var(--bg-surface-secondary);
|
||||
border: var(--border-width) var(--border-style) var(--border-color);
|
||||
@include border-radius(var(--border-radius));
|
||||
}
|
||||
|
||||
fieldset:empty {
|
||||
@@ -151,29 +151,29 @@ fieldset:empty {
|
||||
Form help
|
||||
*/
|
||||
.form-help {
|
||||
--#{$prefix}form-help-size: #{$form-help-size};
|
||||
--#{$prefix}form-help-font-size: #{$form-help-font-size};
|
||||
--form-help-size: #{$form-help-size};
|
||||
--form-help-font-size: #{$form-help-font-size};
|
||||
|
||||
display: inline-flex;
|
||||
font-weight: var(--#{$prefix}font-weight-semibold);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: var(--#{$prefix}form-help-size);
|
||||
height: var(--#{$prefix}form-help-size);
|
||||
font-size: var(--#{$prefix}form-help-font-size);
|
||||
width: var(--form-help-size);
|
||||
height: var(--form-help-size);
|
||||
font-size: var(--form-help-font-size);
|
||||
color: $form-secondary-color;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
background: var(--#{$prefix}gray-100);
|
||||
@include border-radius(var(--#{$prefix}border-radius-pill));
|
||||
background: var(--gray-100);
|
||||
@include border-radius(var(--border-radius-pill));
|
||||
@include transition(background-color $transition-time, color $transition-time);
|
||||
|
||||
&:hover,
|
||||
&[aria-describedby] {
|
||||
color: $white;
|
||||
background: var(--#{$prefix}primary);
|
||||
background: var(--primary);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -262,9 +262,9 @@ Forms on mobile devices
|
||||
*/
|
||||
.form-control,
|
||||
.form-select {
|
||||
--#{$prefix}form-control-mobile-font-size: #{$form-control-mobile-font-size};
|
||||
--form-control-mobile-font-size: #{$form-control-mobile-font-size};
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
font-size: var(--#{$prefix}form-control-mobile-font-size);
|
||||
font-size: var(--form-control-mobile-font-size);
|
||||
}
|
||||
}
|
||||
|
||||
+11
-11
@@ -7,7 +7,7 @@
|
||||
}
|
||||
|
||||
.col-separator {
|
||||
border-inline-start: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
|
||||
border-inline-start: var(--border-width) var(--border-style) var(--border-color);
|
||||
}
|
||||
|
||||
.container {
|
||||
@@ -21,18 +21,18 @@
|
||||
|
||||
@each $name, $value in (0: 0, sm: $grid-row-gutter-sm, md: $grid-row-gutter-md, lg: $grid-row-gutter-lg) {
|
||||
.row-#{$name} {
|
||||
--#{$prefix}grid-row-gutter: #{$value};
|
||||
margin-inline-end: calc(-1 * var(--#{$prefix}grid-row-gutter));
|
||||
margin-inline-start: calc(-1 * var(--#{$prefix}grid-row-gutter));
|
||||
--grid-row-gutter: #{$value};
|
||||
margin-inline-end: calc(-1 * var(--grid-row-gutter));
|
||||
margin-inline-start: calc(-1 * var(--grid-row-gutter));
|
||||
|
||||
> .col,
|
||||
> [class*='col-'] {
|
||||
padding-inline-end: var(--#{$prefix}grid-row-gutter);
|
||||
padding-inline-start: var(--#{$prefix}grid-row-gutter);
|
||||
padding-inline-end: var(--grid-row-gutter);
|
||||
padding-inline-start: var(--grid-row-gutter);
|
||||
}
|
||||
|
||||
.card {
|
||||
margin-bottom: calc(2 * var(--#{$prefix}grid-row-gutter));
|
||||
margin-bottom: calc(2 * var(--grid-row-gutter));
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -50,8 +50,8 @@
|
||||
}
|
||||
|
||||
.row-cards {
|
||||
--#{$prefix}gutter-x: #{$cards-grid-gap};
|
||||
--#{$prefix}gutter-y: #{$cards-grid-gap};
|
||||
--gutter-x: #{$cards-grid-gap};
|
||||
--gutter-y: #{$cards-grid-gap};
|
||||
min-width: 0;
|
||||
|
||||
.row-cards {
|
||||
@@ -95,7 +95,7 @@
|
||||
|
||||
.divide-y#{$name-prefixed} {
|
||||
> :not(template) ~ :not(template) {
|
||||
border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color-translucent) !important;
|
||||
border-top: var(--border-width) var(--border-style) var(--border-color-translucent) !important;
|
||||
}
|
||||
|
||||
> :not(template):not(:first-child) {
|
||||
@@ -109,7 +109,7 @@
|
||||
|
||||
.divide-x#{$name-prefixed} {
|
||||
> :not(template) ~ :not(template) {
|
||||
border-inline-start: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color-translucent) !important;
|
||||
border-inline-start: var(--border-width) var(--border-style) var(--border-color-translucent) !important;
|
||||
}
|
||||
|
||||
> :not(template):not(:first-child) {
|
||||
|
||||
+10
-10
@@ -4,10 +4,10 @@
|
||||
@use '../config' as *;
|
||||
|
||||
.icon {
|
||||
--#{$prefix}icon-size: #{$font-size-base * $line-height-base};
|
||||
width: var(--#{$prefix}icon-size);
|
||||
height: var(--#{$prefix}icon-size);
|
||||
font-size: var(--#{$prefix}icon-size);
|
||||
--icon-size: #{$font-size-base * $line-height-base};
|
||||
width: var(--icon-size);
|
||||
height: var(--icon-size);
|
||||
font-size: var(--icon-size);
|
||||
vertical-align: bottom;
|
||||
display: inline-block;
|
||||
transform-origin: center;
|
||||
@@ -25,9 +25,9 @@
|
||||
// Inline icon
|
||||
//
|
||||
.icon-inline {
|
||||
--#{$prefix}icon-size: #{$icon-inline-size};
|
||||
--#{$prefix}icon-inline-vertical-align: #{$icon-inline-vertical-align};
|
||||
vertical-align: var(--#{$prefix}icon-inline-vertical-align);
|
||||
--icon-size: #{$icon-inline-size};
|
||||
--icon-inline-vertical-align: #{$icon-inline-vertical-align};
|
||||
vertical-align: var(--icon-inline-vertical-align);
|
||||
}
|
||||
|
||||
//
|
||||
@@ -41,17 +41,17 @@
|
||||
// Icon size
|
||||
//
|
||||
.icon-sm {
|
||||
--#{$prefix}icon-size: #{$icon-sm-size};
|
||||
--icon-size: #{$icon-sm-size};
|
||||
stroke-width: 1.5;
|
||||
}
|
||||
|
||||
.icon-md {
|
||||
--#{$prefix}icon-size: #{$icon-md-size};
|
||||
--icon-size: #{$icon-md-size};
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
.icon-lg {
|
||||
--#{$prefix}icon-size: #{$icon-lg-size};
|
||||
--icon-size: #{$icon-lg-size};
|
||||
stroke-width: 1;
|
||||
}
|
||||
|
||||
|
||||
@@ -3,18 +3,18 @@
|
||||
@use '../config' as *;
|
||||
|
||||
.img-responsive {
|
||||
--#{$prefix}img-responsive-ratio: #{math.percentage(0.75)};
|
||||
--img-responsive-ratio: #{math.percentage(0.75)};
|
||||
background: no-repeat center/cover;
|
||||
padding-top: var(--#{$prefix}img-responsive-ratio);
|
||||
padding-top: var(--img-responsive-ratio);
|
||||
}
|
||||
|
||||
.img-responsive-grid {
|
||||
padding-top: calc(var(--#{$prefix}img-responsive-ratio) - calc(var(--#{$prefix}gutter-y) / 2));
|
||||
padding-top: calc(var(--img-responsive-ratio) - calc(var(--gutter-y) / 2));
|
||||
}
|
||||
|
||||
@each $key, $ratio in $aspect-ratios {
|
||||
.img-responsive-#{$key} {
|
||||
--#{$prefix}img-responsive-ratio: #{$ratio};
|
||||
--img-responsive-ratio: #{$ratio};
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -4,11 +4,11 @@ Legend
|
||||
@use '../config' as *;
|
||||
|
||||
.legend {
|
||||
--#{$prefix}legend-size: #{$legend-size};
|
||||
--legend-size: #{$legend-size};
|
||||
display: inline-block;
|
||||
background: $legend-bg;
|
||||
width: var(--#{$prefix}legend-size);
|
||||
height: var(--#{$prefix}legend-size);
|
||||
width: var(--legend-size);
|
||||
height: var(--legend-size);
|
||||
@include border-radius($legend-border-radius);
|
||||
border: 1px solid var(--#{$prefix}border-color-translucent);
|
||||
border: 1px solid var(--border-color-translucent);
|
||||
}
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
@use '../config' as *;
|
||||
|
||||
.list-group {
|
||||
--#{$prefix}list-group-header-padding-y: #{$list-group-header-padding-y};
|
||||
--list-group-header-padding-y: #{$list-group-header-padding-y};
|
||||
|
||||
margin-inline-start: 0;
|
||||
margin-inline-end: 0;
|
||||
@@ -9,13 +9,13 @@
|
||||
|
||||
.list-group-header {
|
||||
background: $list-group-header-bg;
|
||||
padding: var(--#{$prefix}list-group-header-padding-y) $list-group-item-padding-x;
|
||||
padding: var(--list-group-header-padding-y) $list-group-item-padding-x;
|
||||
font-size: $h5-font-size;
|
||||
font-weight: var(--#{$prefix}font-weight-medium);
|
||||
font-weight: var(--font-weight-medium);
|
||||
line-height: 1;
|
||||
text-transform: uppercase;
|
||||
color: $list-group-header-color;
|
||||
border-bottom: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
|
||||
border-bottom: var(--border-width) var(--border-style) var(--border-color);
|
||||
|
||||
.list-group-flush > & {
|
||||
&:last-child {
|
||||
@@ -44,7 +44,7 @@
|
||||
|
||||
.list-bordered {
|
||||
.list-item {
|
||||
border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
|
||||
border-top: var(--border-width) var(--border-style) var(--border-color);
|
||||
margin-top: -1px;
|
||||
|
||||
&:first-child {
|
||||
@@ -74,7 +74,7 @@
|
||||
}
|
||||
|
||||
.list-group-transparent {
|
||||
--#{$prefix}list-group-border-radius: 0;
|
||||
--list-group-border-radius: 0;
|
||||
margin: 0 (-$list-group-item-padding-x);
|
||||
|
||||
.list-group-item {
|
||||
@@ -82,11 +82,11 @@
|
||||
border: 0;
|
||||
|
||||
.icon {
|
||||
color: var(--#{$prefix}secondary);
|
||||
color: var(--secondary);
|
||||
}
|
||||
|
||||
&.active {
|
||||
font-weight: var(--#{$prefix}font-weight-semibold);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: inherit;
|
||||
background: $list-group-active-bg;
|
||||
|
||||
|
||||
@@ -15,12 +15,12 @@
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
content: '';
|
||||
border: 1px var(--#{$prefix}border-style);
|
||||
border: 1px var(--border-style);
|
||||
border-color: transparent;
|
||||
border-top-color: currentColor;
|
||||
border-inline-start-color: currentColor;
|
||||
|
||||
@include border-radius(var(--#{$prefix}border-radius-pill));
|
||||
@include border-radius(var(--border-radius-pill));
|
||||
animation: rotate-360 0.6s linear;
|
||||
animation-iteration-count: infinite;
|
||||
}
|
||||
@@ -57,7 +57,7 @@ Dimmer
|
||||
@keyframes animated-dots {
|
||||
0% {
|
||||
/*rtl:ignore*/
|
||||
transform: translateX(calc(var(--#{$prefix}dir) * -100%));
|
||||
transform: translateX(calc(var(--dir) * -100%));
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
+14
-14
@@ -1,18 +1,18 @@
|
||||
@use '../config' as *;
|
||||
|
||||
$markdown-font-size: var(--#{$prefix}font-size-h3) !default;
|
||||
$markdown-line-height: var(--#{$prefix}line-height-lg) !default;
|
||||
$markdown-font-size: var(--font-size-h3) !default;
|
||||
$markdown-line-height: var(--line-height-lg) !default;
|
||||
|
||||
/**
|
||||
Prose (formerly markdown)
|
||||
*/
|
||||
.prose,
|
||||
.markdown {
|
||||
--#{$prefix}markdown-heading-margin-top: #{$markdown-heading-margin-top};
|
||||
--#{$prefix}markdown-blockquote-margin-y: #{$markdown-blockquote-margin-y};
|
||||
--#{$prefix}markdown-blockquote-padding-y: #{$markdown-blockquote-padding-y};
|
||||
--#{$prefix}markdown-blockquote-padding-x: #{$markdown-blockquote-padding-x};
|
||||
--#{$prefix}markdown-pre-max-height: #{$markdown-pre-max-height};
|
||||
--markdown-heading-margin-top: #{$markdown-heading-margin-top};
|
||||
--markdown-blockquote-margin-y: #{$markdown-blockquote-margin-y};
|
||||
--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;
|
||||
|
||||
@@ -47,29 +47,29 @@ Prose (formerly markdown)
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
margin-top: var(--#{$prefix}markdown-heading-margin-top);
|
||||
margin-top: var(--markdown-heading-margin-top);
|
||||
}
|
||||
}
|
||||
|
||||
> table {
|
||||
// The `@extend .table, .table-bordered, .table-sm` part lives in
|
||||
// `_extends.scss` — its targets span modules loaded after this one.
|
||||
font-size: var(--#{$prefix}body-font-size);
|
||||
font-size: var(--body-font-size);
|
||||
}
|
||||
|
||||
> blockquote {
|
||||
font-size: $h3-font-size;
|
||||
margin: var(--#{$prefix}markdown-blockquote-margin-y) 0;
|
||||
padding: var(--#{$prefix}markdown-blockquote-padding-y) var(--#{$prefix}markdown-blockquote-padding-x);
|
||||
margin: var(--markdown-blockquote-margin-y) 0;
|
||||
padding: var(--markdown-blockquote-padding-y) var(--markdown-blockquote-padding-x);
|
||||
}
|
||||
|
||||
> img,
|
||||
> p > img {
|
||||
@include border-radius(var(--#{$prefix}border-radius));
|
||||
border: 1px solid var(--#{$prefix}border-color);
|
||||
@include border-radius(var(--border-radius));
|
||||
border: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
pre {
|
||||
max-height: var(--#{$prefix}markdown-pre-max-height);
|
||||
max-height: var(--markdown-pre-max-height);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -18,11 +18,11 @@
|
||||
@include scrollbar;
|
||||
|
||||
.modal-title {
|
||||
margin-bottom: var(--#{$prefix}modal-body-title-margin-bottom);
|
||||
margin-bottom: var(--modal-body-title-margin-bottom);
|
||||
}
|
||||
|
||||
& + & {
|
||||
border-top: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
|
||||
border-top: var(--border-width) var(--border-style) var(--border-color);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -32,7 +32,7 @@
|
||||
inset-inline-start: 0;
|
||||
inset-inline-end: 0;
|
||||
height: $modal-status-size;
|
||||
background: var(--#{$prefix}secondary);
|
||||
background: var(--secondary);
|
||||
@include border-radius($modal-content-border-radius $modal-content-border-radius 0 0);
|
||||
}
|
||||
|
||||
@@ -54,10 +54,10 @@
|
||||
@if $modal-footer-border-width == 0 {
|
||||
padding-top: 0;
|
||||
} @else {
|
||||
padding-top: var(--#{$prefix}modal-footer-padding-y);
|
||||
padding-top: var(--modal-footer-padding-y);
|
||||
}
|
||||
|
||||
padding-bottom: var(--#{$prefix}modal-footer-padding-y);
|
||||
padding-bottom: var(--modal-footer-padding-y);
|
||||
}
|
||||
|
||||
.modal-blur {
|
||||
@@ -70,8 +70,8 @@
|
||||
}
|
||||
|
||||
.modal {
|
||||
--#{$prefix}modal-body-title-margin-bottom: #{$modal-body-title-margin-bottom};
|
||||
--#{$prefix}modal-footer-padding-y: #{$modal-footer-padding-y};
|
||||
--modal-body-title-margin-bottom: #{$modal-body-title-margin-bottom};
|
||||
--modal-footer-padding-y: #{$modal-footer-padding-y};
|
||||
|
||||
@include media-print {
|
||||
display: none !important;
|
||||
|
||||
+16
-16
@@ -1,11 +1,11 @@
|
||||
@use '../config' as *;
|
||||
|
||||
.nav {
|
||||
--#{$prefix}nav-link-hover-bg: #{color-transparent(var(--#{$prefix}nav-link-color), 0.04)};
|
||||
--#{$prefix}nav-vertical-nested-margin-start: #{$nav-vertical-nested-margin-start};
|
||||
--#{$prefix}nav-vertical-nested-padding-start: #{$nav-vertical-nested-padding-start};
|
||||
--#{$prefix}nav-link-toggle-padding-x: #{$nav-link-toggle-padding-x};
|
||||
--#{$prefix}nav-link-icon-margin-end: #{$nav-link-icon-margin-end};
|
||||
--nav-link-hover-bg: #{color-transparent(var(--nav-link-color), 0.04)};
|
||||
--nav-vertical-nested-margin-start: #{$nav-vertical-nested-margin-start};
|
||||
--nav-vertical-nested-padding-start: #{$nav-vertical-nested-padding-start};
|
||||
--nav-link-toggle-padding-x: #{$nav-link-toggle-padding-x};
|
||||
--nav-link-icon-margin-end: #{$nav-link-icon-margin-end};
|
||||
}
|
||||
|
||||
.nav-vertical {
|
||||
@@ -16,15 +16,15 @@
|
||||
}
|
||||
|
||||
.nav {
|
||||
margin-inline-start: var(--#{$prefix}nav-vertical-nested-margin-start);
|
||||
border-inline-start: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
|
||||
padding-inline-start: var(--#{$prefix}nav-vertical-nested-padding-start);
|
||||
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,
|
||||
.nav-item.show .nav-link {
|
||||
font-weight: var(--#{$prefix}font-weight-semibold);
|
||||
color: var(--#{$prefix}nav-link-active-color);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--nav-link-active-color);
|
||||
}
|
||||
|
||||
&.nav-pills {
|
||||
@@ -36,7 +36,7 @@
|
||||
// Nav bordered
|
||||
//
|
||||
.nav-bordered {
|
||||
border-bottom: $nav-bordered-border-width var(--#{$prefix}border-style) $nav-bordered-border-color;
|
||||
border-bottom: $nav-bordered-border-width var(--border-style) $nav-bordered-border-color;
|
||||
|
||||
.nav-item {
|
||||
+ .nav-item {
|
||||
@@ -49,7 +49,7 @@
|
||||
padding-inline-end: 0;
|
||||
margin: 0 0 calc(-1 * #{$nav-bordered-border-width});
|
||||
border: 0;
|
||||
border-bottom: $nav-bordered-link-active-border-width var(--#{$prefix}border-style) transparent;
|
||||
border-bottom: $nav-bordered-link-active-border-width var(--border-style) transparent;
|
||||
|
||||
&:hover {
|
||||
background-color: transparent;
|
||||
@@ -76,13 +76,13 @@
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: var(--#{$prefix}nav-link-hover-bg);
|
||||
background-color: var(--nav-link-hover-bg);
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link-toggle {
|
||||
margin-inline-start: auto;
|
||||
padding: 0 var(--#{$prefix}nav-link-toggle-padding-x);
|
||||
padding: 0 var(--nav-link-toggle-padding-x);
|
||||
@include transition(transform $transition-time);
|
||||
@include caret();
|
||||
|
||||
@@ -98,7 +98,7 @@
|
||||
.nav-link-icon {
|
||||
width: $nav-link-icon-size;
|
||||
height: $nav-link-icon-size;
|
||||
margin-inline-end: var(--#{$prefix}nav-link-icon-margin-end);
|
||||
margin-inline-end: var(--nav-link-icon-margin-end);
|
||||
color: $nav-link-icon-color;
|
||||
|
||||
svg {
|
||||
@@ -107,7 +107,7 @@
|
||||
}
|
||||
|
||||
.nav-link:hover & {
|
||||
color: var(--#{$prefix}nav-link-hover-icon-color);
|
||||
color: var(--nav-link-hover-icon-color);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
}
|
||||
|
||||
.offcanvas-header {
|
||||
border-bottom: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color);
|
||||
border-bottom: var(--border-width) var(--border-style) var(--border-color);
|
||||
}
|
||||
|
||||
.offcanvas-footer {
|
||||
@@ -15,15 +15,15 @@
|
||||
}
|
||||
|
||||
.offcanvas-title {
|
||||
--#{$prefix}offcanvas-title-line-height: #{$offcanvas-title-line-height};
|
||||
--offcanvas-title-line-height: #{$offcanvas-title-line-height};
|
||||
|
||||
font-size: $h3-font-size;
|
||||
font-weight: var(--#{$prefix}font-weight-medium);
|
||||
line-height: var(--#{$prefix}offcanvas-title-line-height);
|
||||
font-weight: var(--font-weight-medium);
|
||||
line-height: var(--offcanvas-title-line-height);
|
||||
}
|
||||
|
||||
.offcanvas-narrow {
|
||||
--#{$prefix}offcanvas-narrow-width: #{$offcanvas-narrow-width};
|
||||
--offcanvas-narrow-width: #{$offcanvas-narrow-width};
|
||||
|
||||
width: var(--#{$prefix}offcanvas-narrow-width);
|
||||
width: var(--offcanvas-narrow-width);
|
||||
}
|
||||
|
||||
@@ -2,12 +2,12 @@
|
||||
|
||||
.pagination {
|
||||
margin: 0;
|
||||
--#{$prefix}pagination-gap: #{$pagination-gap};
|
||||
--#{$prefix}pagination-link-min-width: #{$pagination-link-min-width};
|
||||
--#{$prefix}page-text-padding-x: #{$page-text-padding-x};
|
||||
--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(--#{$prefix}pagination-gap);
|
||||
line-height: var(--#{$prefix}body-line-height);
|
||||
gap: var(--pagination-gap);
|
||||
line-height: var(--body-line-height);
|
||||
|
||||
@include media-print {
|
||||
display: none;
|
||||
@@ -15,17 +15,17 @@
|
||||
}
|
||||
|
||||
.page-link {
|
||||
min-width: var(--#{$prefix}pagination-link-min-width);
|
||||
@include border-radius(var(--#{$prefix}pagination-border-radius));
|
||||
min-width: var(--pagination-link-min-width);
|
||||
@include border-radius(var(--pagination-border-radius));
|
||||
}
|
||||
|
||||
.page-item:not(.active) .page-link:hover {
|
||||
background: var(--#{$prefix}pagination-hover-bg);
|
||||
background: var(--pagination-hover-bg);
|
||||
}
|
||||
|
||||
.page-text {
|
||||
padding-inline-start: var(--#{$prefix}page-text-padding-x);
|
||||
padding-inline-end: var(--#{$prefix}page-text-padding-x);
|
||||
padding-inline-start: var(--page-text-padding-x);
|
||||
padding-inline-end: var(--page-text-padding-x);
|
||||
}
|
||||
|
||||
.page-item {
|
||||
@@ -44,11 +44,11 @@
|
||||
}
|
||||
|
||||
.page-item-subtitle {
|
||||
--#{$prefix}page-item-subtitle-margin-bottom: #{$page-item-subtitle-margin-bottom};
|
||||
--#{$prefix}page-item-subtitle-font-size: #{$page-item-subtitle-font-size};
|
||||
margin-bottom: var(--#{$prefix}page-item-subtitle-margin-bottom);
|
||||
font-size: var(--#{$prefix}page-item-subtitle-font-size);
|
||||
color: var(--#{$prefix}secondary);
|
||||
--page-item-subtitle-margin-bottom: #{$page-item-subtitle-margin-bottom};
|
||||
--page-item-subtitle-font-size: #{$page-item-subtitle-font-size};
|
||||
margin-bottom: var(--page-item-subtitle-margin-bottom);
|
||||
font-size: var(--page-item-subtitle-font-size);
|
||||
color: var(--secondary);
|
||||
text-transform: uppercase;
|
||||
|
||||
.page-item.disabled & {
|
||||
@@ -58,8 +58,8 @@
|
||||
|
||||
.page-item-title {
|
||||
font-size: $h3-font-size;
|
||||
font-weight: var(--#{$prefix}font-weight-normal);
|
||||
color: var(--#{$prefix}body-color);
|
||||
font-weight: var(--font-weight-normal);
|
||||
color: var(--body-color);
|
||||
|
||||
.page-link:hover & {
|
||||
color: $link-color;
|
||||
@@ -71,11 +71,11 @@
|
||||
}
|
||||
|
||||
.pagination-outline {
|
||||
--#{$prefix}pagination-border-color: var(--#{$prefix}border-color);
|
||||
--#{$prefix}pagination-disabled-border-color: var(--#{$prefix}border-color);
|
||||
--#{$prefix}pagination-border-width: 1px;
|
||||
--pagination-border-color: var(--border-color);
|
||||
--pagination-disabled-border-color: var(--border-color);
|
||||
--pagination-border-width: 1px;
|
||||
}
|
||||
|
||||
.pagination-circle {
|
||||
--#{$prefix}pagination-border-radius: var(--tblr-border-radius-pill);
|
||||
--pagination-border-radius: var(--border-radius-pill);
|
||||
}
|
||||
|
||||
+121
-123
@@ -1,217 +1,215 @@
|
||||
@use '../config' as *;
|
||||
|
||||
.bg-pattern-diagonal {
|
||||
--#{$prefix}pattern-color: var(--#{$prefix}body-color);
|
||||
--#{$prefix}pattern-size: #{$pattern-size};
|
||||
--#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
|
||||
--#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
|
||||
background-image: repeating-linear-gradient(-45deg, var(--#{$prefix}pattern-fill) 0 1px, transparent 0 50%);
|
||||
--pattern-color: var(--body-color);
|
||||
--pattern-size: #{$pattern-size};
|
||||
--pattern-fill: color-mix(in oklch, var(--pattern-color) 10%, transparent);
|
||||
--pattern-border: color-mix(in oklch, var(--pattern-color) 10%, transparent);
|
||||
background-image: repeating-linear-gradient(-45deg, var(--pattern-fill) 0 1px, transparent 0 50%);
|
||||
background-clip: padding-box;
|
||||
background-size: var(--#{$prefix}pattern-size) var(--#{$prefix}pattern-size);
|
||||
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
|
||||
background-size: var(--pattern-size) var(--pattern-size);
|
||||
border: var(--border-width) var(--border-style) var(--pattern-border);
|
||||
}
|
||||
|
||||
.bg-pattern-diagonal-2 {
|
||||
--#{$prefix}pattern-color: var(--#{$prefix}body-color);
|
||||
--#{$prefix}pattern-size: #{$pattern-size};
|
||||
--#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
|
||||
--#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
|
||||
background-image: repeating-linear-gradient(45deg, var(--#{$prefix}pattern-fill) 0 1px, transparent 0 50%);
|
||||
--pattern-color: var(--body-color);
|
||||
--pattern-size: #{$pattern-size};
|
||||
--pattern-fill: color-mix(in oklch, var(--pattern-color) 10%, transparent);
|
||||
--pattern-border: color-mix(in oklch, var(--pattern-color) 10%, transparent);
|
||||
background-image: repeating-linear-gradient(45deg, var(--pattern-fill) 0 1px, transparent 0 50%);
|
||||
background-clip: padding-box;
|
||||
background-size: var(--#{$prefix}pattern-size) var(--#{$prefix}pattern-size);
|
||||
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
|
||||
background-size: var(--pattern-size) var(--pattern-size);
|
||||
border: var(--border-width) var(--border-style) var(--pattern-border);
|
||||
}
|
||||
|
||||
.bg-pattern-dots {
|
||||
--#{$prefix}pattern-color: var(--#{$prefix}body-color);
|
||||
--#{$prefix}pattern-size: 5px;
|
||||
--#{$prefix}pattern-dot: 0.5px;
|
||||
--#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 20%, transparent);
|
||||
--#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
|
||||
background-image: radial-gradient(circle, var(--#{$prefix}pattern-fill) var(--#{$prefix}pattern-dot), transparent var(--#{$prefix}pattern-dot)), radial-gradient(circle, var(--#{$prefix}pattern-fill) var(--#{$prefix}pattern-dot), transparent var(--#{$prefix}pattern-dot));
|
||||
--pattern-color: var(--body-color);
|
||||
--pattern-size: 5px;
|
||||
--pattern-dot: 0.5px;
|
||||
--pattern-fill: color-mix(in oklch, var(--pattern-color) 20%, transparent);
|
||||
--pattern-border: color-mix(in oklch, var(--pattern-color) 10%, transparent);
|
||||
background-image: radial-gradient(circle, var(--pattern-fill) var(--pattern-dot), transparent var(--pattern-dot)), radial-gradient(circle, var(--pattern-fill) var(--pattern-dot), transparent var(--pattern-dot));
|
||||
background-position:
|
||||
0 0,
|
||||
calc(var(--#{$prefix}pattern-size) / 2) calc(var(--#{$prefix}pattern-size) / 2);
|
||||
background-size: var(--#{$prefix}pattern-size) var(--#{$prefix}pattern-size);
|
||||
calc(var(--pattern-size) / 2) calc(var(--pattern-size) / 2);
|
||||
background-size: var(--pattern-size) var(--pattern-size);
|
||||
background-clip: padding-box;
|
||||
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
|
||||
border: var(--border-width) var(--border-style) var(--pattern-border);
|
||||
}
|
||||
|
||||
.bg-pattern-rectangles {
|
||||
--#{$prefix}pattern-color: var(--#{$prefix}body-color);
|
||||
--#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 3%, transparent);
|
||||
--#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
|
||||
--#{$prefix}pattern-size: #{$pattern-size};
|
||||
background-image:
|
||||
repeating-linear-gradient(45deg, var(--#{$prefix}pattern-fill) 25%, transparent 25%, transparent 75%, var(--#{$prefix}pattern-fill) 75%, var(--#{$prefix}pattern-fill)),
|
||||
repeating-linear-gradient(45deg, var(--#{$prefix}pattern-fill) 25%, transparent 25%, transparent 75%, var(--#{$prefix}pattern-fill) 75%, var(--#{$prefix}pattern-fill));
|
||||
--pattern-color: var(--body-color);
|
||||
--pattern-fill: color-mix(in oklch, var(--pattern-color) 3%, transparent);
|
||||
--pattern-border: color-mix(in oklch, var(--pattern-color) 10%, transparent);
|
||||
--pattern-size: #{$pattern-size};
|
||||
background-image: repeating-linear-gradient(45deg, var(--pattern-fill) 25%, transparent 25%, transparent 75%, var(--pattern-fill) 75%, var(--pattern-fill)), repeating-linear-gradient(45deg, var(--pattern-fill) 25%, transparent 25%, transparent 75%, var(--pattern-fill) 75%, var(--pattern-fill));
|
||||
background-position:
|
||||
-1px -1px,
|
||||
calc(var(--#{$prefix}pattern-size) - 1px) calc(var(--#{$prefix}pattern-size) - 1px);
|
||||
background-size: calc(var(--#{$prefix}pattern-size) * 2) calc(var(--#{$prefix}pattern-size) * 2);
|
||||
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;
|
||||
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
|
||||
border: var(--border-width) var(--border-style) var(--pattern-border);
|
||||
}
|
||||
|
||||
.bg-pattern-lines {
|
||||
--#{$prefix}pattern-color: var(--#{$prefix}body-color);
|
||||
--#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 6%, transparent);
|
||||
--#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
|
||||
--#{$prefix}pattern-size: #{$pattern-size};
|
||||
background-size: var(--#{$prefix}pattern-size) var(--#{$prefix}pattern-size);
|
||||
background-image: repeating-linear-gradient(0deg, var(--#{$prefix}pattern-fill), var(--#{$prefix}pattern-fill) 1px, transparent 1px, transparent);
|
||||
--pattern-color: var(--body-color);
|
||||
--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;
|
||||
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
|
||||
border: var(--border-width) var(--border-style) var(--pattern-border);
|
||||
}
|
||||
|
||||
.bg-pattern-lines-vertical {
|
||||
--#{$prefix}pattern-color: var(--#{$prefix}body-color);
|
||||
--#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 6%, transparent);
|
||||
--#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
|
||||
--#{$prefix}pattern-size: #{$pattern-size};
|
||||
background-size: var(--#{$prefix}pattern-size) var(--#{$prefix}pattern-size);
|
||||
background-image: repeating-linear-gradient(90deg, var(--#{$prefix}pattern-fill), var(--#{$prefix}pattern-fill) 1px, transparent 1px, transparent);
|
||||
--pattern-color: var(--body-color);
|
||||
--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;
|
||||
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
|
||||
border: var(--border-width) var(--border-style) var(--pattern-border);
|
||||
}
|
||||
|
||||
.bg-pattern-grid {
|
||||
--#{$prefix}pattern-color: var(--#{$prefix}body-color);
|
||||
--#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 6%, transparent);
|
||||
--#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
|
||||
--#{$prefix}pattern-size: #{$pattern-size};
|
||||
background-image: linear-gradient(to right, var(--#{$prefix}pattern-fill) 1px, transparent 1px), linear-gradient(to bottom, var(--#{$prefix}pattern-fill) 1px, transparent 1px);
|
||||
background-size: calc(var(--#{$prefix}pattern-size) * 2) calc(var(--#{$prefix}pattern-size) * 2);
|
||||
--pattern-color: var(--body-color);
|
||||
--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-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;
|
||||
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
|
||||
border: var(--border-width) var(--border-style) var(--pattern-border);
|
||||
}
|
||||
|
||||
.bg-pattern-grid-diagonal {
|
||||
--#{$prefix}pattern-color: var(--#{$prefix}body-color);
|
||||
--#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
|
||||
--#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
|
||||
--#{$prefix}pattern-size: #{$pattern-size};
|
||||
background-image: linear-gradient(45deg, transparent 49%, var(--#{$prefix}pattern-fill) 49%, var(--#{$prefix}pattern-fill) 51%, transparent 51%), linear-gradient(-45deg, transparent 49%, var(--#{$prefix}pattern-fill) 49%, var(--#{$prefix}pattern-fill) 51%, transparent 51%);
|
||||
background-size: calc(var(--#{$prefix}pattern-size) * 2) calc(var(--#{$prefix}pattern-size) * 2);
|
||||
--pattern-color: var(--body-color);
|
||||
--pattern-fill: color-mix(in oklch, var(--pattern-color) 10%, transparent);
|
||||
--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;
|
||||
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
|
||||
border: var(--border-width) var(--border-style) var(--pattern-border);
|
||||
}
|
||||
|
||||
.bg-pattern-blueprint {
|
||||
--#{$prefix}pattern-color: var(--#{$prefix}body-color);
|
||||
--#{$prefix}pattern-size: #{$pattern-size};
|
||||
--#{$prefix}pattern-line: color-mix(in oklch, var(--#{$prefix}pattern-color) 6%, transparent);
|
||||
--#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
|
||||
background-image: linear-gradient(var(--#{$prefix}pattern-line) 2px, transparent 2px), linear-gradient(90deg, var(--#{$prefix}pattern-line) 2px, transparent 2px), linear-gradient(var(--#{$prefix}pattern-line) 1px, transparent 1px), linear-gradient(90deg, var(--#{$prefix}pattern-line) 1px, transparent 1px);
|
||||
--pattern-color: var(--body-color);
|
||||
--pattern-size: #{$pattern-size};
|
||||
--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(--#{$prefix}pattern-size) * 10) calc(var(--#{$prefix}pattern-size) * 10),
|
||||
calc(var(--#{$prefix}pattern-size) * 10) calc(var(--#{$prefix}pattern-size) * 10),
|
||||
calc(var(--#{$prefix}pattern-size) * 2) calc(var(--#{$prefix}pattern-size) * 2),
|
||||
calc(var(--#{$prefix}pattern-size) * 2) calc(var(--#{$prefix}pattern-size) * 2);
|
||||
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;
|
||||
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
|
||||
border: var(--border-width) var(--border-style) var(--pattern-border);
|
||||
}
|
||||
|
||||
.bg-pattern-cross-dots {
|
||||
--#{$prefix}pattern-color: var(--#{$prefix}body-color);
|
||||
--#{$prefix}pattern-size: #{$pattern-size};
|
||||
--#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
|
||||
--#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
|
||||
background-image: radial-gradient(var(--#{$prefix}pattern-fill) 1px, transparent 1px), radial-gradient(var(--#{$prefix}pattern-fill) 1px, transparent 1px);
|
||||
background-size: calc(var(--#{$prefix}pattern-size) * 2) calc(var(--#{$prefix}pattern-size) * 2);
|
||||
--pattern-color: var(--body-color);
|
||||
--pattern-size: #{$pattern-size};
|
||||
--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(--#{$prefix}pattern-size) var(--#{$prefix}pattern-size);
|
||||
var(--pattern-size) var(--pattern-size);
|
||||
background-clip: padding-box;
|
||||
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
|
||||
border: var(--border-width) var(--border-style) var(--pattern-border);
|
||||
}
|
||||
|
||||
.bg-pattern-circles {
|
||||
--#{$prefix}pattern-color: var(--#{$prefix}body-color);
|
||||
--#{$prefix}pattern-size: #{$pattern-size};
|
||||
--#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
|
||||
--#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
|
||||
--pattern-color: var(--body-color);
|
||||
--pattern-size: #{$pattern-size};
|
||||
--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(circle at center top, transparent 9%, var(--#{$prefix}pattern-fill) 10%, var(--#{$prefix}pattern-fill) 15%, transparent 16%), radial-gradient(circle at center bottom, transparent 9%, var(--#{$prefix}pattern-fill) 10%, var(--#{$prefix}pattern-fill) 15%, transparent 16%),
|
||||
radial-gradient(circle at right center, transparent 9%, var(--#{$prefix}pattern-fill) 10%, var(--#{$prefix}pattern-fill) 15%, transparent 16%), radial-gradient(circle at left center, transparent 9%, var(--#{$prefix}pattern-fill) 10%, var(--#{$prefix}pattern-fill) 15%, transparent 16%);
|
||||
radial-gradient(circle at center top, transparent 9%, var(--pattern-fill) 10%, var(--pattern-fill) 15%, transparent 16%), radial-gradient(circle at center bottom, transparent 9%, var(--pattern-fill) 10%, var(--pattern-fill) 15%, transparent 16%),
|
||||
radial-gradient(circle at right center, transparent 9%, var(--pattern-fill) 10%, var(--pattern-fill) 15%, transparent 16%), radial-gradient(circle at left center, transparent 9%, var(--pattern-fill) 10%, var(--pattern-fill) 15%, transparent 16%);
|
||||
background-position: 0 0;
|
||||
background-size: calc(var(--#{$prefix}pattern-size) * 3) calc(var(--#{$prefix}pattern-size) * 3);
|
||||
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
|
||||
background-size: calc(var(--pattern-size) * 3) calc(var(--pattern-size) * 3);
|
||||
border: var(--border-width) var(--border-style) var(--pattern-border);
|
||||
}
|
||||
|
||||
.bg-pattern-diagonal-stripes {
|
||||
--#{$prefix}pattern-color: var(--#{$prefix}body-color);
|
||||
--#{$prefix}pattern-size: #{$pattern-size};
|
||||
--#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 5%, transparent);
|
||||
--#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
|
||||
background-image: repeating-linear-gradient(45deg, transparent, transparent var(--#{$prefix}pattern-size), var(--#{$prefix}pattern-fill) var(--#{$prefix}pattern-size), var(--#{$prefix}pattern-fill) calc(2 * var(--#{$prefix}pattern-size)));
|
||||
--pattern-color: var(--body-color);
|
||||
--pattern-size: #{$pattern-size};
|
||||
--pattern-fill: color-mix(in oklch, var(--pattern-color) 5%, transparent);
|
||||
--pattern-border: color-mix(in oklch, var(--pattern-color) 10%, transparent);
|
||||
background-image: repeating-linear-gradient(45deg, transparent, transparent var(--pattern-size), var(--pattern-fill) var(--pattern-size), var(--pattern-fill) calc(2 * var(--pattern-size)));
|
||||
background-repeat: no-repeat;
|
||||
background-clip: padding-box;
|
||||
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
|
||||
border: var(--border-width) var(--border-style) var(--pattern-border);
|
||||
}
|
||||
|
||||
.bg-pattern-diagonal-stripes-2 {
|
||||
--#{$prefix}pattern-color: var(--#{$prefix}body-color);
|
||||
--#{$prefix}pattern-size: #{$pattern-size};
|
||||
--#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 5%, transparent);
|
||||
--#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
|
||||
background-image: repeating-linear-gradient(-45deg, transparent, transparent var(--#{$prefix}pattern-size), var(--#{$prefix}pattern-fill) var(--#{$prefix}pattern-size), var(--#{$prefix}pattern-fill) calc(2 * var(--#{$prefix}pattern-size)));
|
||||
--pattern-color: var(--body-color);
|
||||
--pattern-size: #{$pattern-size};
|
||||
--pattern-fill: color-mix(in oklch, var(--pattern-color) 5%, transparent);
|
||||
--pattern-border: color-mix(in oklch, var(--pattern-color) 10%, transparent);
|
||||
background-image: repeating-linear-gradient(-45deg, transparent, transparent var(--pattern-size), var(--pattern-fill) var(--pattern-size), var(--pattern-fill) calc(2 * var(--pattern-size)));
|
||||
background-repeat: no-repeat;
|
||||
background-clip: padding-box;
|
||||
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
|
||||
border: var(--border-width) var(--border-style) var(--pattern-border);
|
||||
}
|
||||
|
||||
.bg-pattern-zigzag {
|
||||
--#{$prefix}pattern-color: var(--#{$prefix}body-color);
|
||||
--#{$prefix}pattern-size: #{$pattern-size};
|
||||
--#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 5%, transparent);
|
||||
--#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
|
||||
--pattern-color: var(--body-color);
|
||||
--pattern-size: #{$pattern-size};
|
||||
--pattern-fill: color-mix(in oklch, var(--pattern-color) 5%, transparent);
|
||||
--pattern-border: color-mix(in oklch, var(--pattern-color) 10%, transparent);
|
||||
background:
|
||||
linear-gradient(135deg, var(--#{$prefix}pattern-fill) 25%, transparent 25%) calc(-1 * var(--#{$prefix}pattern-size)) 0,
|
||||
linear-gradient(225deg, var(--#{$prefix}pattern-fill) 25%, transparent 25%) calc(-1 * var(--#{$prefix}pattern-size)) 0,
|
||||
linear-gradient(315deg, var(--#{$prefix}pattern-fill) 25%, transparent 25%),
|
||||
linear-gradient(45deg, var(--#{$prefix}pattern-fill) 25%, transparent 25%);
|
||||
background-size: calc(2 * var(--#{$prefix}pattern-size)) calc(2 * var(--#{$prefix}pattern-size));
|
||||
linear-gradient(135deg, var(--pattern-fill) 25%, transparent 25%) calc(-1 * var(--pattern-size)) 0,
|
||||
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;
|
||||
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
|
||||
border: var(--border-width) var(--border-style) var(--pattern-border);
|
||||
}
|
||||
|
||||
.bg-pattern-vertical-stripes {
|
||||
--#{$prefix}pattern-color: var(--#{$prefix}body-color);
|
||||
--#{$prefix}pattern-size: #{$pattern-size};
|
||||
--#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 5%, transparent);
|
||||
--#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
|
||||
background-image: repeating-linear-gradient(90deg, transparent, transparent var(--#{$prefix}pattern-size), var(--#{$prefix}pattern-fill) var(--#{$prefix}pattern-size), var(--#{$prefix}pattern-fill) calc(2 * var(--#{$prefix}pattern-size)));
|
||||
--pattern-color: var(--body-color);
|
||||
--pattern-size: #{$pattern-size};
|
||||
--pattern-fill: color-mix(in oklch, var(--pattern-color) 5%, transparent);
|
||||
--pattern-border: color-mix(in oklch, var(--pattern-color) 10%, transparent);
|
||||
background-image: repeating-linear-gradient(90deg, transparent, transparent var(--pattern-size), var(--pattern-fill) var(--pattern-size), var(--pattern-fill) calc(2 * var(--pattern-size)));
|
||||
background-clip: padding-box;
|
||||
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
|
||||
border: var(--border-width) var(--border-style) var(--pattern-border);
|
||||
}
|
||||
|
||||
.bg-pattern-horizontal-stripes {
|
||||
--#{$prefix}pattern-color: var(--#{$prefix}body-color);
|
||||
--#{$prefix}pattern-size: #{$pattern-size};
|
||||
--#{$prefix}pattern-fill: color-mix(in oklch, var(--#{$prefix}pattern-color) 5%, transparent);
|
||||
--#{$prefix}pattern-border: color-mix(in oklch, var(--#{$prefix}pattern-color) 10%, transparent);
|
||||
background-image: repeating-linear-gradient(0deg, transparent, transparent var(--#{$prefix}pattern-size), var(--#{$prefix}pattern-fill) var(--#{$prefix}pattern-size), var(--#{$prefix}pattern-fill) calc(2 * var(--#{$prefix}pattern-size)));
|
||||
--pattern-color: var(--body-color);
|
||||
--pattern-size: #{$pattern-size};
|
||||
--pattern-fill: color-mix(in oklch, var(--pattern-color) 5%, transparent);
|
||||
--pattern-border: color-mix(in oklch, var(--pattern-color) 10%, transparent);
|
||||
background-image: repeating-linear-gradient(0deg, transparent, transparent var(--pattern-size), var(--pattern-fill) var(--pattern-size), var(--pattern-fill) calc(2 * var(--pattern-size)));
|
||||
background-position: -1px -1px;
|
||||
background-clip: padding-box;
|
||||
border: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}pattern-border);
|
||||
border: var(--border-width) var(--border-style) var(--pattern-border);
|
||||
}
|
||||
|
||||
// Color variants
|
||||
@each $color, $value in $theme-colors {
|
||||
.bg-pattern-#{$color} {
|
||||
--#{$prefix}pattern-color: #{$value};
|
||||
--pattern-color: #{$value};
|
||||
}
|
||||
}
|
||||
|
||||
@@ -225,6 +223,6 @@ $sizes: (
|
||||
|
||||
@each $size, $value in $sizes {
|
||||
.bg-pattern-#{$size} {
|
||||
--#{$prefix}pattern-size: #{$value};
|
||||
--pattern-size: #{$value};
|
||||
}
|
||||
}
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
vertical-align: bottom;
|
||||
font-style: normal;
|
||||
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
|
||||
@include config.border-radius(var(--#{config.$prefix}border-radius));
|
||||
@include config.border-radius(var(--border-radius));
|
||||
}
|
||||
|
||||
@each $payment in config.$payment-providers {
|
||||
|
||||
@@ -6,6 +6,6 @@
|
||||
}
|
||||
|
||||
&:not(.avatar):not([class*='card-img-']) {
|
||||
@include border-radius(var(--#{$prefix}border-radius));
|
||||
@include border-radius(var(--border-radius));
|
||||
}
|
||||
}
|
||||
|
||||
+21
-21
@@ -23,33 +23,33 @@ Progress
|
||||
appearance: none;
|
||||
|
||||
&::-webkit-progress-bar {
|
||||
background: var(--#{$prefix}progress-bg);
|
||||
background: var(--progress-bg);
|
||||
}
|
||||
|
||||
&::-webkit-progress-value {
|
||||
background-color: var(--#{$prefix}primary);
|
||||
background-color: var(--primary);
|
||||
}
|
||||
|
||||
&::-moz-progress-bar {
|
||||
background-color: var(--#{$prefix}primary);
|
||||
background-color: var(--primary);
|
||||
}
|
||||
|
||||
&::-ms-fill {
|
||||
background-color: var(--#{$prefix}primary);
|
||||
background-color: var(--primary);
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.progress-sm {
|
||||
--#{$prefix}progress-height: #{$progress-height-sm};
|
||||
--progress-height: #{$progress-height-sm};
|
||||
}
|
||||
|
||||
.progress-lg {
|
||||
--#{$prefix}progress-height: #{$progress-height-lg};
|
||||
--progress-height: #{$progress-height-lg};
|
||||
}
|
||||
|
||||
.progress-xl {
|
||||
--#{$prefix}progress-height: #{$progress-height-xl};
|
||||
--progress-height: #{$progress-height-xl};
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -78,10 +78,10 @@ Progress bar
|
||||
}
|
||||
|
||||
.progress-separated {
|
||||
--#{$prefix}progress-separated-ring-width: #{$progress-separated-ring-width};
|
||||
--progress-separated-ring-width: #{$progress-separated-ring-width};
|
||||
|
||||
.progress-bar {
|
||||
box-shadow: 0 0 0 var(--#{$prefix}progress-separated-ring-width) var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface));
|
||||
box-shadow: 0 0 0 var(--progress-separated-ring-width) var(--card-bg, var(--bg-surface));
|
||||
}
|
||||
}
|
||||
|
||||
@@ -89,10 +89,10 @@ Progress bar
|
||||
Progressbg
|
||||
*/
|
||||
.progressbg {
|
||||
--#{$prefix}progressbg-padding-y: #{$progressbg-padding-y};
|
||||
--#{$prefix}progressbg-padding-x: #{$progressbg-padding-x};
|
||||
--progressbg-padding-y: #{$progressbg-padding-y};
|
||||
--progressbg-padding-x: #{$progressbg-padding-x};
|
||||
position: relative;
|
||||
padding: var(--#{$prefix}progressbg-padding-y) var(--#{$prefix}progressbg-padding-x);
|
||||
padding: var(--progressbg-padding-y) var(--progressbg-padding-x);
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@@ -117,36 +117,36 @@ Progressbg
|
||||
}
|
||||
|
||||
.progressbg-value {
|
||||
--#{$prefix}progressbg-value-padding-start: #{$progressbg-value-padding-start};
|
||||
font-weight: var(--#{$prefix}font-weight-medium);
|
||||
--progressbg-value-padding-start: #{$progressbg-value-padding-start};
|
||||
font-weight: var(--font-weight-medium);
|
||||
margin-inline-start: auto;
|
||||
padding-inline-start: var(--#{$prefix}progressbg-value-padding-start);
|
||||
padding-inline-start: var(--progressbg-value-padding-start);
|
||||
}
|
||||
|
||||
/**
|
||||
Progress steps
|
||||
*/
|
||||
.progress-steps {
|
||||
--#{$prefix}progress-steps-gap: #{$progress-steps-gap};
|
||||
--progress-steps-gap: #{$progress-steps-gap};
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
gap: var(--#{$prefix}progress-steps-gap);
|
||||
gap: var(--progress-steps-gap);
|
||||
}
|
||||
|
||||
.progress-steps-item {
|
||||
--#{$prefix}progress-steps-item-height: #{$progress-steps-item-height};
|
||||
--progress-steps-item-height: #{$progress-steps-item-height};
|
||||
flex: 1 1 0;
|
||||
min-height: var(--#{$prefix}progress-steps-item-height);
|
||||
min-height: var(--progress-steps-item-height);
|
||||
margin-top: 0;
|
||||
color: inherit;
|
||||
text-align: center;
|
||||
cursor: default;
|
||||
background-color: var(--tblr-border-color);
|
||||
@include border-radius(var(--#{$prefix}border-radius-pill));
|
||||
background-color: var(--border-color);
|
||||
@include border-radius(var(--border-radius-pill));
|
||||
|
||||
@at-root a#{&} {
|
||||
cursor: pointer;
|
||||
|
||||
+47
-47
@@ -3,38 +3,38 @@
|
||||
@use '../config' as *;
|
||||
|
||||
.ribbon {
|
||||
--#{$prefix}ribbon-margin: #{$card-ribbon-margin};
|
||||
--#{$prefix}ribbon-border-radius: #{$card-ribbon-border-radius};
|
||||
--#{$prefix}ribbon-font-size: #{$card-ribbon-font-size};
|
||||
--#{$prefix}ribbon-icon-size: #{$card-ribbon-icon-size};
|
||||
--#{$prefix}ribbon-offset: #{$ribbon-offset};
|
||||
--#{$prefix}ribbon-padding-y: #{$ribbon-padding-y};
|
||||
--#{$prefix}ribbon-padding-x: #{$ribbon-padding-x};
|
||||
--#{$prefix}ribbon-min-size: #{$ribbon-min-size};
|
||||
--#{$prefix}ribbon-top-width: #{$ribbon-top-width};
|
||||
--#{$prefix}ribbon-top-padding-y: #{$ribbon-top-padding-y};
|
||||
--#{$prefix}ribbon-bookmark-border-size: #{$ribbon-bookmark-border-size};
|
||||
--#{$prefix}ribbon-bookmark-notch-width: #{$ribbon-bookmark-notch-width};
|
||||
--ribbon-margin: #{$card-ribbon-margin};
|
||||
--ribbon-border-radius: #{$card-ribbon-border-radius};
|
||||
--ribbon-font-size: #{$card-ribbon-font-size};
|
||||
--ribbon-icon-size: #{$card-ribbon-icon-size};
|
||||
--ribbon-offset: #{$ribbon-offset};
|
||||
--ribbon-padding-y: #{$ribbon-padding-y};
|
||||
--ribbon-padding-x: #{$ribbon-padding-x};
|
||||
--ribbon-min-size: #{$ribbon-min-size};
|
||||
--ribbon-top-width: #{$ribbon-top-width};
|
||||
--ribbon-top-padding-y: #{$ribbon-top-padding-y};
|
||||
--ribbon-bookmark-border-size: #{$ribbon-bookmark-border-size};
|
||||
--ribbon-bookmark-notch-width: #{$ribbon-bookmark-notch-width};
|
||||
|
||||
position: absolute;
|
||||
top: var(--#{$prefix}ribbon-offset);
|
||||
inset-inline-end: calc(-1 * var(--#{$prefix}ribbon-margin));
|
||||
top: var(--ribbon-offset);
|
||||
inset-inline-end: calc(-1 * var(--ribbon-margin));
|
||||
z-index: 1;
|
||||
padding: var(--#{$prefix}ribbon-padding-y) var(--#{$prefix}ribbon-padding-x);
|
||||
font-size: var(--#{$prefix}ribbon-font-size);
|
||||
font-weight: var(--#{$prefix}font-weight-semibold);
|
||||
padding: var(--ribbon-padding-y) var(--ribbon-padding-x);
|
||||
font-size: var(--ribbon-font-size);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
line-height: 1;
|
||||
color: $white;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
background: var(--#{$prefix}primary);
|
||||
border-color: var(--#{$prefix}primary);
|
||||
@include border-radius(var(--#{$prefix}ribbon-border-radius) 0 var(--#{$prefix}ribbon-border-radius) var(--#{$prefix}ribbon-border-radius));
|
||||
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(--#{$prefix}ribbon-min-size);
|
||||
min-width: var(--#{$prefix}ribbon-min-size);
|
||||
min-height: var(--ribbon-min-size);
|
||||
min-width: var(--ribbon-min-size);
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
@@ -44,7 +44,7 @@
|
||||
height: 0;
|
||||
content: '';
|
||||
filter: brightness(70%);
|
||||
border: calc(var(--#{$prefix}ribbon-margin) * 0.5) var(--#{$prefix}border-style);
|
||||
border: calc(var(--ribbon-margin) * 0.5) var(--border-style);
|
||||
border-color: inherit;
|
||||
border-top-color: transparent;
|
||||
border-inline-end-color: transparent;
|
||||
@@ -53,28 +53,28 @@
|
||||
@if $enable-extra-colors {
|
||||
@each $color, $value in $extra-colors {
|
||||
&.bg-#{$color} {
|
||||
border-color: var(--#{$prefix}#{$color});
|
||||
border-color: var(--#{$color});
|
||||
}
|
||||
|
||||
&.bg-#{$color}-lt {
|
||||
border-color: color-transparent(var(--#{$prefix}#{$color}), 0.1) !important;
|
||||
border-color: color-transparent(var(--#{$color}), 0.1) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: var(--#{$prefix}ribbon-icon-size);
|
||||
height: var(--#{$prefix}ribbon-icon-size);
|
||||
font-size: var(--#{$prefix}ribbon-icon-size);
|
||||
width: var(--ribbon-icon-size);
|
||||
height: var(--ribbon-icon-size);
|
||||
font-size: var(--ribbon-icon-size);
|
||||
}
|
||||
}
|
||||
|
||||
.ribbon-top {
|
||||
top: calc(-1 * var(--#{$prefix}ribbon-margin));
|
||||
inset-inline-end: var(--#{$prefix}ribbon-offset);
|
||||
width: var(--#{$prefix}ribbon-top-width);
|
||||
padding: var(--#{$prefix}ribbon-top-padding-y) 0;
|
||||
@include border-radius(0 var(--#{$prefix}ribbon-border-radius) var(--#{$prefix}ribbon-border-radius) var(--#{$prefix}ribbon-border-radius));
|
||||
top: calc(-1 * var(--ribbon-margin));
|
||||
inset-inline-end: var(--ribbon-offset);
|
||||
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;
|
||||
@@ -87,7 +87,7 @@
|
||||
|
||||
&.ribbon-start {
|
||||
inset-inline-end: auto;
|
||||
inset-inline-start: var(--#{$prefix}ribbon-offset);
|
||||
inset-inline-start: var(--ribbon-offset);
|
||||
|
||||
&:before {
|
||||
top: 0;
|
||||
@@ -99,8 +99,8 @@
|
||||
|
||||
.ribbon-start {
|
||||
inset-inline-end: auto;
|
||||
inset-inline-start: calc(-1 * var(--#{$prefix}ribbon-margin));
|
||||
@include border-radius(0 var(--#{$prefix}ribbon-border-radius) var(--#{$prefix}ribbon-border-radius) var(--#{$prefix}ribbon-border-radius));
|
||||
inset-inline-start: calc(-1 * var(--ribbon-margin));
|
||||
@include border-radius(0 var(--ribbon-border-radius) var(--ribbon-border-radius) var(--ribbon-border-radius));
|
||||
|
||||
&:before {
|
||||
top: auto;
|
||||
@@ -114,12 +114,12 @@
|
||||
|
||||
.ribbon-bottom {
|
||||
top: auto;
|
||||
bottom: var(--#{$prefix}ribbon-offset);
|
||||
bottom: var(--ribbon-offset);
|
||||
}
|
||||
|
||||
.ribbon-bookmark {
|
||||
padding-inline-start: var(--#{$prefix}ribbon-padding-y);
|
||||
@include border-radius(0 0 var(--#{$prefix}ribbon-border-radius) 0);
|
||||
padding-inline-start: var(--ribbon-padding-y);
|
||||
@include border-radius(0 0 var(--ribbon-border-radius) 0);
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
@@ -129,41 +129,41 @@
|
||||
width: 0;
|
||||
height: 0;
|
||||
content: '';
|
||||
border: var(--#{$prefix}ribbon-bookmark-border-size) var(--#{$prefix}border-style);
|
||||
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(--#{$prefix}ribbon-bookmark-notch-width);
|
||||
border-inline-start-width: var(--ribbon-bookmark-notch-width);
|
||||
}
|
||||
|
||||
&.ribbon-left {
|
||||
padding-inline-end: var(--#{$prefix}ribbon-bookmark-notch-width);
|
||||
padding-inline-end: var(--ribbon-bookmark-notch-width);
|
||||
|
||||
&:after {
|
||||
inset-inline-end: auto;
|
||||
inset-inline-start: 100%;
|
||||
border-inline-end-color: transparent;
|
||||
|
||||
border-inline-end-width: var(--#{$prefix}ribbon-bookmark-notch-width);
|
||||
border-inline-end-width: var(--ribbon-bookmark-notch-width);
|
||||
border-inline-start-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&.ribbon-top {
|
||||
padding-inline-end: 0;
|
||||
padding-bottom: var(--#{$prefix}ribbon-padding-y);
|
||||
padding-bottom: var(--ribbon-padding-y);
|
||||
padding-inline-start: 0;
|
||||
@include border-radius(0 var(--#{$prefix}ribbon-border-radius) 0 0);
|
||||
@include border-radius(0 var(--ribbon-border-radius) 0 0);
|
||||
|
||||
&:after {
|
||||
top: 100%;
|
||||
inset-inline-end: 0;
|
||||
inset-inline-start: 0;
|
||||
border-color: inherit;
|
||||
border-width: var(--#{$prefix}ribbon-bookmark-border-size);
|
||||
border-width: var(--ribbon-bookmark-border-size);
|
||||
border-top-width: 0;
|
||||
border-bottom-color: transparent;
|
||||
border-bottom-width: var(--#{$prefix}ribbon-bookmark-notch-width);
|
||||
border-bottom-width: var(--ribbon-bookmark-notch-width);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,40 +1,40 @@
|
||||
@use '../config' as *;
|
||||
|
||||
.nav-segmented {
|
||||
--#{$prefix}nav-bg: var(--#{$prefix}bg-surface-tertiary);
|
||||
--#{$prefix}nav-padding: #{$nav-segmented-padding};
|
||||
--#{$prefix}nav-height: #{$nav-segmented-height};
|
||||
--#{$prefix}nav-gap: #{$nav-segmented-gap};
|
||||
--#{$prefix}nav-active-bg: var(--#{$prefix}bg-surface);
|
||||
--#{$prefix}nav-font-size: inherit;
|
||||
--#{$prefix}nav-radius: #{$nav-segmented-radius};
|
||||
--nav-bg: var(--bg-surface-tertiary);
|
||||
--nav-padding: #{$nav-segmented-padding};
|
||||
--nav-height: #{$nav-segmented-height};
|
||||
--nav-gap: #{$nav-segmented-gap};
|
||||
--nav-active-bg: var(--bg-surface);
|
||||
--nav-font-size: inherit;
|
||||
--nav-radius: #{$nav-segmented-radius};
|
||||
|
||||
--#{$prefix}nav-link-disabled-color: var(--#{$prefix}disabled-color);
|
||||
--#{$prefix}nav-link-gap: #{$nav-segmented-link-gap};
|
||||
--#{$prefix}nav-link-padding-x: #{$nav-segmented-link-padding-x};
|
||||
--#{$prefix}nav-link-icon-size: #{$nav-segmented-link-icon-size};
|
||||
--#{$prefix}nav-link-icon-margin: #{$nav-segmented-icon-margin};
|
||||
--nav-link-disabled-color: var(--disabled-color);
|
||||
--nav-link-gap: #{$nav-segmented-link-gap};
|
||||
--nav-link-padding-x: #{$nav-segmented-link-padding-x};
|
||||
--nav-link-icon-size: #{$nav-segmented-link-icon-size};
|
||||
--nav-link-icon-margin: #{$nav-segmented-icon-margin};
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--#{$prefix}nav-gap);
|
||||
padding: var(--#{$prefix}nav-padding);
|
||||
gap: var(--nav-gap);
|
||||
padding: var(--nav-padding);
|
||||
list-style: none;
|
||||
background: var(--#{$prefix}nav-bg);
|
||||
@include border-radius(calc(var(--#{$prefix}nav-radius) + var(--#{$prefix}nav-padding)));
|
||||
background: var(--nav-bg);
|
||||
@include border-radius(calc(var(--nav-radius) + var(--nav-padding)));
|
||||
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.04);
|
||||
|
||||
.nav-link {
|
||||
display: inline-flex;
|
||||
gap: calc(#{$nav-segmented-link-gap} + var(--#{$prefix}nav-link-gap));
|
||||
gap: calc(#{$nav-segmented-link-gap} + var(--nav-link-gap));
|
||||
align-items: center;
|
||||
margin: 0;
|
||||
font-size: var(--#{$prefix}nav-font-size);
|
||||
min-width: calc(var(--#{$prefix}nav-height) - 2 * var(--#{$prefix}nav-padding));
|
||||
height: calc(var(--#{$prefix}nav-height) - 2 * var(--#{$prefix}nav-padding));
|
||||
padding: 0 calc(var(--#{$prefix}nav-link-padding-x) - 2px);
|
||||
font-size: var(--nav-font-size);
|
||||
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;
|
||||
color: var(--#{$prefix}secondary);
|
||||
color: var(--secondary);
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
@@ -42,28 +42,28 @@
|
||||
transition:
|
||||
background-color $transition-time,
|
||||
color $transition-time;
|
||||
@include border-radius(var(--#{$prefix}nav-radius));
|
||||
@include border-radius(var(--nav-radius));
|
||||
flex-grow: 1;
|
||||
justify-content: center;
|
||||
|
||||
&:hover,
|
||||
&.hover {
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
color: var(--#{$prefix}body-color);
|
||||
color: var(--body-color);
|
||||
}
|
||||
|
||||
&.disabled,
|
||||
&:disabled {
|
||||
color: var(--#{$prefix}nav-link-disabled-color);
|
||||
color: var(--nav-link-disabled-color);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-link-input:checked + .nav-link,
|
||||
.nav-link.active {
|
||||
color: var(--#{$prefix}body-color);
|
||||
background: var(--#{$prefix}nav-active-bg);
|
||||
border-color: var(--#{$prefix}border-color);
|
||||
color: var(--body-color);
|
||||
background: var(--nav-active-bg);
|
||||
border-color: var(--border-color);
|
||||
}
|
||||
|
||||
.nav-link-input {
|
||||
@@ -71,9 +71,9 @@
|
||||
}
|
||||
|
||||
.nav-link-icon {
|
||||
width: var(--#{$prefix}nav-link-icon-size);
|
||||
height: var(--#{$prefix}nav-link-icon-size);
|
||||
margin: 0 var(--#{$prefix}nav-link-icon-margin);
|
||||
width: var(--nav-link-icon-size);
|
||||
height: var(--nav-link-icon-size);
|
||||
margin: 0 var(--nav-link-icon-margin);
|
||||
color: inherit;
|
||||
}
|
||||
}
|
||||
@@ -87,19 +87,19 @@
|
||||
}
|
||||
|
||||
.nav-sm {
|
||||
--#{$prefix}nav-height: #{$nav-segmented-height-sm};
|
||||
--#{$prefix}nav-font-size: var(--tblr-font-size-h5);
|
||||
--#{$prefix}nav-radius: #{$nav-segmented-radius-sm};
|
||||
--#{$prefix}nav-link-padding-x: #{$nav-segmented-link-padding-x-sm};
|
||||
--#{$prefix}nav-link-gap: #{$nav-segmented-link-gap-sm};
|
||||
--#{$prefix}nav-link-icon-size: #{$nav-segmented-link-icon-size-sm};
|
||||
--nav-height: #{$nav-segmented-height-sm};
|
||||
--nav-font-size: var(--font-size-h5);
|
||||
--nav-radius: #{$nav-segmented-radius-sm};
|
||||
--nav-link-padding-x: #{$nav-segmented-link-padding-x-sm};
|
||||
--nav-link-gap: #{$nav-segmented-link-gap-sm};
|
||||
--nav-link-icon-size: #{$nav-segmented-link-icon-size-sm};
|
||||
}
|
||||
|
||||
.nav-lg {
|
||||
--#{$prefix}nav-height: #{$nav-segmented-height-lg};
|
||||
--#{$prefix}nav-font-size: var(--tblr-font-size-h3);
|
||||
--#{$prefix}nav-radius: #{$nav-segmented-radius-lg};
|
||||
--#{$prefix}nav-link-padding-x: #{$nav-segmented-link-padding-x-lg};
|
||||
--#{$prefix}nav-link-gap: #{$nav-segmented-link-gap-lg};
|
||||
--#{$prefix}nav-link-icon-size: #{$nav-segmented-link-icon-size-lg};
|
||||
--nav-height: #{$nav-segmented-height-lg};
|
||||
--nav-font-size: var(--font-size-h3);
|
||||
--nav-radius: #{$nav-segmented-radius-lg};
|
||||
--nav-link-padding-x: #{$nav-segmented-link-padding-x-lg};
|
||||
--nav-link-gap: #{$nav-segmented-link-gap-lg};
|
||||
--nav-link-icon-size: #{$nav-segmented-link-icon-size-lg};
|
||||
}
|
||||
|
||||
@@ -1,22 +1,22 @@
|
||||
@use '../config' as *;
|
||||
|
||||
.signature {
|
||||
--#{$prefix}signature-padding: var(--#{$prefix}spacer-1);
|
||||
--#{$prefix}signature-border-radius: var(--#{$prefix}border-radius);
|
||||
--#{$prefix}signature-canvas-height: 12.5rem;
|
||||
border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
|
||||
padding: var(--#{$prefix}signature-padding);
|
||||
@include border-radius(var(--#{$prefix}border-radius));
|
||||
--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);
|
||||
@include border-radius(var(--border-radius));
|
||||
}
|
||||
|
||||
.signature-canvas {
|
||||
border: var(--#{$prefix}border-width) dashed var(--#{$prefix}border-color);
|
||||
@include border-radius(calc(var(--#{$prefix}signature-border-radius) - var(--#{$prefix}signature-padding)));
|
||||
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(--#{$prefix}signature-canvas-height);
|
||||
height: var(--signature-canvas-height);
|
||||
}
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user