mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-12 16:44:17 +02:00
Code Issues Releases Wiki Activity

border utils, css/sass vars, and more

Browse Source
This commit is contained in:
Mark Otto
2025-06-10 09:10:46 -07:00
parent 5668e10473
commit a9df5dd0e3
6 changed files with 127 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
scss/_root.scss
View File

@@ -95,10 +95,10 @@
// --#{$prefix}font-size-base: 1rem; // --#{$prefix}font-size-base: 1rem;
// scss-docs-start root-border-var // scss-docs-start root-border-var
--#{$prefix}border-width: #{$border-width}; --#{$prefix}border-width: 1px;
--#{$prefix}border-style: #{$border-style}; --#{$prefix}border-style: solid;
--#{$prefix}border-color: #{$border-color}; --#{$prefix}border-color: light-dark(#{$gray-300}, #{$gray-700});
--#{$prefix}border-color-translucent: #{$border-color-translucent}; --#{$prefix}border-color-translucent: light-dark(rgba($black, .175), rgba($white, .15));
--#{$prefix}border-radius: .5rem; --#{$prefix}border-radius: .5rem;
--#{$prefix}border-radius-sm: .375rem; --#{$prefix}border-radius-sm: .375rem;
@@ -108,10 +108,12 @@
--#{$prefix}border-radius-pill: 50rem; --#{$prefix}border-radius-pill: 50rem;
// scss-docs-end root-border-var // scss-docs-end root-border-var
--#{$prefix}box-shadow: light-dark(0 .5rem 1rem rgb(0 0 0 / 15%), 0 .5rem 1rem rgb(255 0 0 / 50%)); // scss-docs-start root-shadow-vars
--#{$prefix}box-shadow-sm: 0 .125rem .25rem rgb(0 0 0 / 7.5%); --#{$prefix}box-shadow: 0 .5rem 1rem rgb(0 0 0 / .15);
--#{$prefix}box-shadow-lg: 0 1rem 3rem rgb(0 0 0 / 17.5%); --#{$prefix}box-shadow-sm: 0 .125rem .25rem rgb(0 0 0 / .075);
--#{$prefix}box-shadow-inset: inset 0 1px 2px rgb(0 0 0 / 7.5%); --#{$prefix}box-shadow-lg: 0 1rem 3rem rgb(0 0 0 / .175);
--#{$prefix}box-shadow-inset: inset 0 1px 2px rgb(0 0 0 / .075);
// scss-docs-end root-shadow-vars
// Focus styles // Focus styles
// scss-docs-start root-focus-variables // scss-docs-start root-focus-variables

130
scss/_utilities.scss
View File

@@ -145,68 +145,87 @@ $utilities: map.merge(
), ),
// scss-docs-end utils-position // scss-docs-end utils-position
// scss-docs-start utils-borders // scss-docs-start utils-borders
"border": ( // "border": (
// // selector: "attr-includes",
// class: border,
// property: border,
// values: (
// null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
// // 0: 0,
// )
// ),
"borders": (
property: border, property: border,
values: ( class: border,
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color), values: map.merge($borders, (0: 0))
0: 0,
)
), ),
"border-top": ( // "borders": (
class: border-top, // class: border,
// property: '--#{$prefix}border-width',
// values: map.merge($border-widths, (0: 0))
// ),
"border-t": (
class: border-t,
property: border-block-start, property: border-block-start,
values: ( values: map.merge($borders, (0: 0))
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
0: 0,
)
), ),
"border-end": ( "border-e": (
property: border-inline-end, property: border-inline-end,
class: border-end, class: border-e,
values: ( values: map.merge($borders, (0: 0))
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
0: 0,
)
), ),
"border-bottom": ( "border-b": (
property: border-block-end, property: border-block-end,
class: border-bottom, class: border-b,
values: ( values: map.merge($borders, (0: 0))
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
0: 0,
)
), ),
"border-start": ( "border-s": (
property: border-inline-start, property: border-inline-start,
class: border-start, class: border-s,
values: ( values: map.merge($borders, (0: 0))
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
0: 0,
)
), ),
"border-y": ( "border-y": (
property: border-block, property: border-block,
values: ( values: map.merge($borders, (0: 0))
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
0: 0,
)
), ),
"border-x": ( "border-x": (
property: border-inline, property: border-inline,
values: ( values: map.merge($borders, (0: 0))
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
0: 0,
)
), ),
"border-color": ( "border-color": (
property: border-color, property: --#{$prefix}border-color,
class: border, class: border,
values: theme-color-values("border") values: theme-color-values("border")
), ),
"border-width": ( "dividers-x": (
property: border-width, selector: ".dividers-x > :not(:first-child)",
property: border-inline-start,
values: (
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
)
),
"dividers-y": (
selector: ".dividers-y > :not(:first-child)",
property: border-block-start,
values: (
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
)
),
"border-opacity": (
class: border, class: border,
values: $border-widths property: border-color,
values: (
10: color-mix(in oklch, var(--#{$prefix}border-color) 10%, transparent),
20: color-mix(in oklch, var(--#{$prefix}border-color) 20%, transparent),
30: color-mix(in oklch, var(--#{$prefix}border-color) 30%, transparent),
40: color-mix(in oklch, var(--#{$prefix}border-color) 40%, transparent),
50: color-mix(in oklch, var(--#{$prefix}border-color) 50%, transparent),
60: color-mix(in oklch, var(--#{$prefix}border-color) 60%, transparent),
70: color-mix(in oklch, var(--#{$prefix}border-color) 70%, transparent),
80: color-mix(in oklch, var(--#{$prefix}border-color) 80%, transparent),
90: color-mix(in oklch, var(--#{$prefix}border-color) 90%, transparent),
100: var(--#{$prefix}border-color),
)
), ),
// "border-opacity": ( // "border-opacity": (
// css-var: true, // css-var: true,
@@ -666,16 +685,15 @@ $utilities: map.merge(
// scss-docs-end utils-color // scss-docs-end utils-color
// scss-docs-start utils-links // scss-docs-start utils-links
"link-opacity": ( "link-opacity": (
property: --#{$prefix}link-opacity, property: color,
// css-var: true,
class: link-opacity, class: link-opacity,
state: hover, state: hover,
values: ( values: (
10: .1, 10: color-mix(in oklch, var(--#{$prefix}link-color) 10%, transparent),
25: .25, 25: color-mix(in oklch, var(--#{$prefix}link-color) 25%, transparent),
50: .5, 50: color-mix(in oklch, var(--#{$prefix}link-color) 50%, transparent),
75: .75, 75: color-mix(in oklch, var(--#{$prefix}link-color) 75%, transparent),
100: 1 100: var(--#{$prefix}link-color),
) )
), ),
"link-offset": ( "link-offset": (
@@ -694,6 +712,7 @@ $utilities: map.merge(
local-vars: ( local-vars: (
"link-underline-opacity": 1 "link-underline-opacity": 1
), ),
values: theme-color-values("text"),
// values: map.merge( // values: map.merge(
// $utilities-links-underline, // $utilities-links-underline,
// ( // (
@@ -703,16 +722,17 @@ $utilities: map.merge(
), ),
"link-underline-opacity": ( "link-underline-opacity": (
// css-var: true, // css-var: true,
property: --#{$prefix}link-underline-opacity, // property: --#{$prefix}link-underline-opacity,
property: text-decoration-color,
class: link-underline-opacity, class: link-underline-opacity,
state: hover, state: hover,
values: ( values: (
0: 0, 0: color-mix(in oklch, var(--#{$prefix}link-color) 0%, transparent),
10: .1, 10: color-mix(in oklch, var(--#{$prefix}link-color) 10%, transparent),
25: .25, 25: color-mix(in oklch, var(--#{$prefix}link-color) 25%, transparent),
50: .5, 50: color-mix(in oklch, var(--#{$prefix}link-color) 50%, transparent),
75: .75, 75: color-mix(in oklch, var(--#{$prefix}link-color) 75%, transparent),
100: 1 100: var(--#{$prefix}link-color),
), ),
), ),
// scss-docs-end utils-links // scss-docs-end utils-links

18
scss/_variables.scss
View File

@@ -241,7 +241,11 @@ $paragraph-margin-bottom: 1rem !default;
// Define common padding and border radius sizes and more. // Define common padding and border radius sizes and more.
// scss-docs-start border-variables // scss-docs-start border-variables
$border-width: 1px !default; $border-width: var(--#{$prefix}border-width) !default;
$border-style: var(--#{$prefix}border-style) !default;
$border-color: var(--#{$prefix}border-color) !default;
$border-color-translucent: var(--#{$prefix}border-color-translucent) !default;
$border-widths: ( $border-widths: (
1: 1px, 1: 1px,
2: 2px, 2: 2px,
@@ -249,9 +253,15 @@ $border-widths: (
4: 4px, 4: 4px,
5: 5px 5: 5px
) !default; ) !default;
$border-style: solid !default;
$border-color: light-dark($gray-300, $gray-700) !default; $borders: (
$border-color-translucent: rgba($black, .175) !default; 0: 0,
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
2: 2px var(--#{$prefix}border-style) var(--#{$prefix}border-color),
3: 3px var(--#{$prefix}border-style) var(--#{$prefix}border-color),
4: 4px var(--#{$prefix}border-style) var(--#{$prefix}border-color),
5: 5px var(--#{$prefix}border-style) var(--#{$prefix}border-color),
) !default;
// scss-docs-end border-variables // scss-docs-end border-variables
// scss-docs-start border-radius-variables // scss-docs-start border-radius-variables

19
scss/helpers/_colored-links.scss
View File

@@ -6,17 +6,18 @@
@layer helpers { @layer helpers {
@each $color, $value in $theme-colors { @each $color, $value in $theme-colors {
.link-#{$color} { .link-#{$color} {
color: color-mix(in srgb, var(--#{$prefix}#{$color}), transparent var(--#{$prefix}link-opacity)); --#{$prefix}link-color: var(--#{$prefix}#{$color});
// color: var(--#{$prefix}#{$color});
text-decoration-color: color-mix(in srgb, var(--#{$prefix}#{$color}), transparent var(--#{$prefix}link-underline-opacity)); text-decoration-color: color-mix(in srgb, var(--#{$prefix}#{$color}), transparent var(--#{$prefix}link-underline-opacity));
@if $link-shade-percentage != 0 { // @if $link-shade-percentage != 0 {
&:hover, // &:hover,
&:focus { // &:focus {
$hover-color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage)); // $hover-color: if(color-contrast($value) == $color-contrast-light, shade-color($value, $link-shade-percentage), tint-color($value, $link-shade-percentage));
color: color-mix(in srgb, $hover-color, transparent var(--#{$prefix}link-opacity)); // color: color-mix(in srgb, $hover-color, transparent var(--#{$prefix}link-opacity));
text-decoration-color: color-mix(in srgb, $hover-color, transparent var(--#{$prefix}link-underline-opacity)); // text-decoration-color: color-mix(in srgb, $hover-color, transparent var(--#{$prefix}link-underline-opacity));
} // }
} // }
} }
} }

8
scss/mixins/_utilities.scss
View File

@@ -6,16 +6,17 @@
// Utility generator // Utility generator
// - Utilities can three different types of selectors: // - Utilities can four different types of selectors:
// - class: .class // - class: .class
// - attr-starts: [class^="class"] // - attr-starts: [class^="class"]
// - attr-includes: [class*="class"] // - attr-includes: [class*="class"]
// - any other string: used directly as a custom selector (e.g., "& > :not(:last-child)")
// - Utilities can generate a regular CSS property or a CSS custom property // - Utilities can generate a regular CSS property or a CSS custom property
// - Utilities can be responsive or not // - Utilities can be responsive or not
// - Utilities can have a state (e.g., :hover, :focus, :active, etc.) // - Utilities can have a state (e.g., :hover, :focus, :active, etc.)
@mixin generate-utility($utility, $infix: "", $is-rfs-media-query: false) { @mixin generate-utility($utility, $infix: "", $is-rfs-media-query: false) {
// Determine if we're generating a class, or an attribute selector // Determine if we're generating a class, or an attribute selector, or using a custom selector
$selectorType: if(map.has-key($utility, selector), map.get($utility, selector), "class"); $selectorType: if(map.has-key($utility, selector), map.get($utility, selector), "class");
// Then get the class name to use in a class (e.g., .class) or in a attribute selector (e.g., [class^="class"]) // Then get the class name to use in a class (e.g., .class) or in a attribute selector (e.g., [class^="class"])
$selectorClass: map.get($utility, class); $selectorClass: map.get($utility, class);
@@ -73,6 +74,9 @@
$selector: "[class^=\"#{$selectorClass}\"]"; $selector: "[class^=\"#{$selectorClass}\"]";
} @else if $selectorType == "attr-includes" { } @else if $selectorType == "attr-includes" {
$selector: "[class*=\"#{$selectorClass}\"]"; $selector: "[class*=\"#{$selectorClass}\"]";
} @else {
// Use the selector value directly as a custom selector string
$selector: $selectorType;
} }
// @debug $utility; // @debug $utility;

18
site/src/scss/_component-examples.scss
View File

@@ -254,12 +254,18 @@
} }
.bd-example-border-utils { .bd-example-border-utils {
display: flex;
flex-wrap: wrap;
gap: 1rem;
[class^="border"] { [class^="border"] {
display: inline-block; display: inline-flex;
align-items: center;
justify-content: center;
width: 5rem; width: 5rem;
height: 5rem; height: 5rem;
margin: .25rem; color: var(--bs-fg-3);
background-color: var(--bs-tertiary-bg); background-color: var(--bs-bg-1);
} }
} }
@@ -275,13 +281,13 @@
.position-relative { .position-relative {
height: 200px; height: 200px;
background-color: var(--bs-tertiary-bg); background-color: var(--bs-bg-1);
} }
.position-absolute { .position-absolute {
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
background-color: var(--bs-body-color); background-color: var(--bs-fg);
@include border-radius(); @include border-radius();
} }
} }
@@ -384,7 +390,7 @@
.highlight-toolbar { .highlight-toolbar {
background-color: var(--bd-pre-bg); background-color: var(--bd-pre-bg);
border-bottom: 1px solid var(--bs-border-color); border-block: 1px solid var(--bs-border-color);
} }
.bd-file-ref { .bd-file-ref {