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

WIP scss

Browse Source
This commit is contained in:
Mark Otto
2025-04-02 22:15:49 -07:00
parent 785c31f79b
commit bcb50912cd
5 changed files with 108 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
scss/_buttons.scss
View File

@@ -1,5 +1,6 @@
@use "config" as *;
@use "colors" as *;
@use "theme" as *;
@use "variables" as *;
@use "functions" as *;
@use "vendor/rfs" as *;
@@ -64,7 +65,7 @@ $button-variants: (
"border-color": "transparent"
),
"hover": (
"bg": "bg-subtle",
"bg": ("bg-muted", "bg-subtle"),
"color": "text"
),
"active": (
@@ -135,9 +136,22 @@ $button-variants: (
@if $value == "transparent" {
--#{$prefix}btn-hover-#{$property}: transparent;
// #{$property}: transparent;
} @else if type-of($value) == "list" {
// Handle two-value properties using color-mix
$first-value: nth($value, 1);
$second-value: nth($value, 2);
--#{$prefix}btn-hover-#{$property}: color-mix(in oklch, var(--#{$prefix}#{$color}-#{$first-value}) 50%, var(--#{$prefix}#{$color}-#{$second-value}));
} @else if $value == "bg-subtle" {
--#{$prefix}btn-hover-#{$property}: var(--#{$prefix}#{$color}-#{$value});
// #{$property}: var(#{$prefix}#{$color}-#{$value});
// @if type-of($value) == "list" {
// // Handle two-value properties using color-mix
// $first-value: nth($value, 1);
// $second-value: nth($value, 2);
// --#{$prefix}btn-hover-#{$property}: color-mix(in oklch, var(--#{$prefix}#{$color}-#{$first-value}) 50%, var(--#{$prefix}#{$color}-#{$second-value}));
// } @else {
// --#{$prefix}btn-hover-#{$property}: var(--#{$prefix}#{$color}-#{$value});
// }
} @else {
--#{$prefix}btn-hover-#{$property}: oklch(from var(--#{$prefix}#{$color}-#{$value}) calc(l * .95) calc(c * 1.1) h);
// #{$property}: oklch(
@@ -169,7 +183,7 @@ $button-variants: (
}
// Generate all button variants
@each $color, $_ in $theme-colors {
@each $color, $_ in $new-theme-colors {
@each $variant, $_ in $button-variants {
.btn-#{$color}-#{$variant} {
@include button-variant($color, $variant);

4
scss/_config.scss
View File

@@ -41,7 +41,7 @@ $breakpoints: (
md: 768px,
lg: 992px,
xl: 1200px,
2xl: 1400px
2xl: 1600px
) !default;
// scss-docs-end breakpoints
@@ -63,7 +63,7 @@ $container-max-widths: (
md: 720px,
lg: 960px,
xl: 1140px,
2xl: 1320px
2xl: 1440px
) !default;
// scss-docs-end container-max-widths

6
scss/_tooltip.scss
View File

@@ -15,10 +15,10 @@
--#{$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-color: var(--#{$prefix}bg-0);
--#{$prefix}tooltip-bg: var(--#{$prefix}fg-0);
--#{$prefix}tooltip-border-radius: #{$tooltip-border-radius};
--#{$prefix}tooltip-opacity: #{$tooltip-opacity};
--#{$prefix}tooltip-opacity: .95;
--#{$prefix}tooltip-arrow-width: #{$tooltip-arrow-width};
--#{$prefix}tooltip-arrow-height: #{$tooltip-arrow-height};
// scss-docs-end tooltip-css-vars

94
scss/_utilities.scss
View File

@@ -175,13 +175,27 @@ $utilities: map.merge(
0: 0,
)
),
"border-y": (
property: border-block,
values: (
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
0: 0,
)
),
"border-x": (
property: border-inline,
values: (
null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
0: 0,
)
),
"border-color": (
property: border-color,
class: border,
local-vars: (
"border-opacity": 1
),
// values: $utilities-border-colors
// local-vars: (
// "border-opacity": 1
// ),
values: theme-color-values("border")
),
// "subtle-border-color": (
// property: border-color,
@@ -309,6 +323,15 @@ $utilities: map.merge(
evenly: space-evenly,
)
),
"justify-self": (
responsive: true,
property: justify-self,
values: (
start: flex-start,
end: flex-end,
center: center,
)
),
"align-items": (
responsive: true,
property: align-items,
@@ -591,19 +614,30 @@ $utilities: map.merge(
local-vars: (
"text-opacity": 1
),
values: (
// values: map.merge(
// theme-color-values("text"),
// $theme-fgs
// ),
values: map.merge(
// $utilities-text-colors,
// (
"muted": var(--#{$prefix}secondary-color), // deprecated
"black-50": rgba($black, .5), // deprecated
"white-50": rgba($white, .5), // deprecated
"body-secondary": var(--#{$prefix}secondary-color),
"body-tertiary": var(--#{$prefix}tertiary-color),
"body-emphasis": var(--#{$prefix}emphasis-color),
"reset": inherit,
// )
theme-color-values("text"),
(
"muted": var(--#{$prefix}secondary-color), // deprecated
"black-50": rgba($black, .5), // deprecated
"white-50": rgba($white, .5), // deprecated
"body-secondary": var(--#{$prefix}secondary-color),
"body-tertiary": var(--#{$prefix}tertiary-color),
"body-emphasis": var(--#{$prefix}emphasis-color),
"reset": inherit,
)
)
),
"contrast-color": (
property: color,
class: text-on,
values: theme-color-values("contrast"),
),
// scss-docs-end utils-color
"text-opacity": (
// css-var: true,
property: --#{$prefix}text-opacity,
@@ -615,12 +649,12 @@ $utilities: map.merge(
100: 1
)
),
"text-color": (
property: color,
class: text,
values: theme-color-values("text"),
// values: $utilities-text-emphasis-colors
),
// "text-color": (
// property: color,
// class: text,
// values: theme-color-values("text"),
// // values: $utilities-text-emphasis-colors
// ),
// scss-docs-end utils-color
// scss-docs-start utils-links
"link-opacity": (
@@ -676,19 +710,18 @@ $utilities: map.merge(
// scss-docs-end utils-links
// scss-docs-start utils-bg-color
"bg-attr": (
selector: "attr-starts",
selector: "attr-includes",
class: "bg-",
property: background-color,
values: var(--#{$prefix}bg),
),
"bg-color": (
// css-var: true,
property: --#{$prefix}bg,
class: bg,
// local-vars: (
// "bg-opacity": 1
// ),
values: theme-color-values("bg"),
values: map.merge(
theme-color-values("bg"),
$theme-bgs
),
),
"bg-color-subtle": (
property: --#{$prefix}bg,
@@ -700,8 +733,6 @@ $utilities: map.merge(
class: bg-muted,
values: theme-color-values("bg-muted"),
),
"bg-opacity": (
class: bg,
property: background-color,
@@ -718,11 +749,6 @@ $utilities: map.merge(
100: var(--#{$prefix}bg),
)
),
// "subtle-background-color": (
// property: background-color,
// class: bg,
// // values: $utilities-bg-subtle
// ),
// scss-docs-end utils-bg-color
"gradient": (
property: background-image,
@@ -741,7 +767,7 @@ $utilities: map.merge(
),
// scss-docs-end utils-interaction
// scss-docs-start utils-border-radius
"rounded": (
"border-radius": (
property: border-radius,
class: rounded,
values: (

47
scss/_variables.scss
View File

@@ -160,7 +160,7 @@ $body-emphasis-color: light-dark($black, $white) !default;
//
// Style anchor elements.
$link-color: var(--#{$prefix}primary-text) !default;
$link-color: var(--#{$prefix}primary-base) !default;
$link-decoration: underline !default;
$link-shade-percentage: 20% !default;
$link-hover-color: color-mix(in srgb, #{$link-color}, $black #{$link-shade-percentage}) !default;
@@ -240,7 +240,7 @@ $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: 1px !default;
$border-widths: (
1: 1px,
2: 2px,
@@ -248,28 +248,35 @@ $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;
$border-style: solid !default;
$border-color: light-dark($gray-300, $gray-700) !default;
$border-color-translucent: rgba($black, .175) !default;
// scss-docs-end border-variables
// scss-docs-start border-radius-variables
$border-radius: .375rem !default;
$border-radius-sm: .25rem !default;
$border-radius-lg: .5rem !default;
$border-radius-xl: 1rem !default;
$border-radius-2xl: 2rem !default;
$border-radius-pill: 50rem !default;
$border-radius: var(--#{$prefix}border-radius) !default;
$border-radius-sm: var(--#{$prefix}border-radius-sm) !default;
$border-radius-lg: var(--#{$prefix}border-radius-lg) !default;
$border-radius-xl: var(--#{$prefix}border-radius-xl) !default;
$border-radius-2xl: var(--#{$prefix}border-radius-2xl) !default;
$border-radius-pill: var(--#{$prefix}border-radius-pill) !default;
// scss-docs-end border-radius-variables
// fusv-disable
$border-radius-2xl: $border-radius-2xl !default; // Deprecated in v5.3.0
// fusv-enable
$border-radii: (
"0": 0,
"sm": $border-radius-sm,
"md": $border-radius,
"lg": $border-radius-lg,
"xl": $border-radius-xl,
"2xl": $border-radius-2xl,
"pill": $border-radius-pill,
) !default;
// scss-docs-start box-shadow-variables
$box-shadow: 0 .5rem 1rem rgba($black, .15) !default;
$box-shadow-sm: 0 .125rem .25rem rgba($black, .075) !default;
$box-shadow-lg: 0 1rem 3rem rgba($black, .175) !default;
$box-shadow-inset: inset 0 1px 2px rgba($black, .075) !default;
$box-shadow: 0 .5rem 1rem rgba($black, .15) !default;
$box-shadow-sm: 0 .125rem .25rem rgba($black, .075) !default;
$box-shadow-lg: 0 1rem 3rem rgba($black, .175) !default;
$box-shadow-inset: inset 0 1px 2px rgba($black, .075) !default;
// scss-docs-end box-shadow-variables
$component-active-color: $white !default;
@@ -1113,9 +1120,9 @@ $accordion-button-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w
$tooltip-font-size: $font-size-sm !default;
$tooltip-max-width: 200px !default;
$tooltip-color: var(--#{$prefix}body-bg) !default;
$tooltip-bg: var(--#{$prefix}emphasis-color) !default;
$tooltip-bg: var(--#{$prefix}fg-) !default;
$tooltip-border-radius: var(--#{$prefix}border-radius) !default;
$tooltip-opacity: .9 !default;
$tooltip-opacity: .95 !default;
$tooltip-padding-y: $spacer * .25 !default;
$tooltip-padding-x: $spacer * .5 !default;
$tooltip-margin: null !default; // TODO: remove this in v6