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;
// scss-docs-start root-border-var
--#{$prefix}border-width: #{$border-width};
--#{$prefix}border-style: #{$border-style};
--#{$prefix}border-color: #{$border-color};
--#{$prefix}border-color-translucent: #{$border-color-translucent};
--#{$prefix}border-width: 1px;
--#{$prefix}border-style: solid;
--#{$prefix}border-color: light-dark(#{$gray-300}, #{$gray-700});
--#{$prefix}border-color-translucent: light-dark(rgba($black, .175), rgba($white, .15));
--#{$prefix}border-radius: .5rem;
--#{$prefix}border-radius-sm: .375rem;
@@ -108,10 +108,12 @@
--#{$prefix}border-radius-pill: 50rem;
// 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%));
--#{$prefix}box-shadow-sm: 0 .125rem .25rem rgb(0 0 0 / 7.5%);
--#{$prefix}box-shadow-lg: 0 1rem 3rem rgb(0 0 0 / 17.5%);
--#{$prefix}box-shadow-inset: inset 0 1px 2px rgb(0 0 0 / 7.5%);
// scss-docs-start root-shadow-vars
--#{$prefix}box-shadow: 0 .5rem 1rem rgb(0 0 0 / .15);
--#{$prefix}box-shadow-sm: 0 .125rem .25rem rgb(0 0 0 / .075);
--#{$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
// 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-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,
values: (
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
0: 0,
)
class: border,
values: map.merge($borders, (0: 0))
),
"border-top": (
class: border-top,
// "borders": (
// class: border,
// property: '--#{$prefix}border-width',
// values: map.merge($border-widths, (0: 0))
// ),
"border-t": (
class: border-t,
property: border-block-start,
values: (
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
0: 0,
)
values: map.merge($borders, (0: 0))
),
"border-end": (
"border-e": (
property: border-inline-end,
class: border-end,
values: (
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
0: 0,
)
class: border-e,
values: map.merge($borders, (0: 0))
),
"border-bottom": (
"border-b": (
property: border-block-end,
class: border-bottom,
values: (
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
0: 0,
)
class: border-b,
values: map.merge($borders, (0: 0))
),
"border-start": (
"border-s": (
property: border-inline-start,
class: border-start,
values: (
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
0: 0,
)
class: border-s,
values: map.merge($borders, (0: 0))
),
"border-y": (
property: border-block,
values: (
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
0: 0,
)
values: map.merge($borders, (0: 0))
),
"border-x": (
property: border-inline,
values: (
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
0: 0,
)
values: map.merge($borders, (0: 0))
),
"border-color": (
property: border-color,
property: --#{$prefix}border-color,
class: border,
values: theme-color-values("border")
),
"border-width": (
property: border-width,
"dividers-x": (
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,
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": (
// css-var: true,
@@ -666,16 +685,15 @@ $utilities: map.merge(
// scss-docs-end utils-color
// scss-docs-start utils-links
"link-opacity": (
property: --#{$prefix}link-opacity,
// css-var: true,
property: color,
class: link-opacity,
state: hover,
values: (
10: .1,
25: .25,
50: .5,
75: .75,
100: 1
10: color-mix(in oklch, var(--#{$prefix}link-color) 10%, transparent),
25: color-mix(in oklch, var(--#{$prefix}link-color) 25%, transparent),
50: color-mix(in oklch, var(--#{$prefix}link-color) 50%, transparent),
75: color-mix(in oklch, var(--#{$prefix}link-color) 75%, transparent),
100: var(--#{$prefix}link-color),
)
),
"link-offset": (
@@ -694,6 +712,7 @@ $utilities: map.merge(
local-vars: (
"link-underline-opacity": 1
),
values: theme-color-values("text"),
// values: map.merge(
// $utilities-links-underline,
// (
@@ -703,16 +722,17 @@ $utilities: map.merge(
),
"link-underline-opacity": (
// css-var: true,
property: --#{$prefix}link-underline-opacity,
// property: --#{$prefix}link-underline-opacity,
property: text-decoration-color,
class: link-underline-opacity,
state: hover,
values: (
0: 0,
10: .1,
25: .25,
50: .5,
75: .75,
100: 1
0: color-mix(in oklch, var(--#{$prefix}link-color) 0%, transparent),
10: color-mix(in oklch, var(--#{$prefix}link-color) 10%, transparent),
25: color-mix(in oklch, var(--#{$prefix}link-color) 25%, transparent),
50: color-mix(in oklch, var(--#{$prefix}link-color) 50%, transparent),
75: color-mix(in oklch, var(--#{$prefix}link-color) 75%, transparent),
100: var(--#{$prefix}link-color),
),
),
// 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.
// 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: (
1: 1px,
2: 2px,
@@ -249,9 +253,15 @@ $border-widths: (
4: 4px,
5: 5px
) !default;
$border-style: solid !default;
$border-color: light-dark($gray-300, $gray-700) !default;
$border-color-translucent: rgba($black, .175) !default;
$borders: (
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-start border-radius-variables

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

@@ -6,17 +6,18 @@
@layer helpers {
@each $color, $value in $theme-colors {
.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));
@if $link-shade-percentage != 0 {
&:hover,
&:focus {
$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));
text-decoration-color: color-mix(in srgb, $hover-color, transparent var(--#{$prefix}link-underline-opacity));
}
}
// @if $link-shade-percentage != 0 {
// &:hover,
// &:focus {
// $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));
// 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
// - Utilities can three different types of selectors:
// - Utilities can four different types of selectors:
// - class: .class
// - attr-starts: [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 be responsive or not
// - Utilities can have a state (e.g., :hover, :focus, :active, etc.)
@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");
// 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);
@@ -73,6 +74,9 @@
$selector: "[class^=\"#{$selectorClass}\"]";
} @else if $selectorType == "attr-includes" {
$selector: "[class*=\"#{$selectorClass}\"]";
} @else {
// Use the selector value directly as a custom selector string
$selector: $selectorType;
}
// @debug $utility;

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

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