mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-12 08:34:08 +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 "config" as *;
@use "colors" as *; @use "colors" as *;
@use "theme" as *;
@use "variables" as *; @use "variables" as *;
@use "functions" as *; @use "functions" as *;
@use "vendor/rfs" as *; @use "vendor/rfs" as *;
@@ -64,7 +65,7 @@ $button-variants: (
"border-color": "transparent" "border-color": "transparent"
), ),
"hover": ( "hover": (
"bg": "bg-subtle", "bg": ("bg-muted", "bg-subtle"),
"color": "text" "color": "text"
), ),
"active": ( "active": (
@@ -135,9 +136,22 @@ $button-variants: (
@if $value == "transparent" { @if $value == "transparent" {
--#{$prefix}btn-hover-#{$property}: transparent; --#{$prefix}btn-hover-#{$property}: transparent;
// #{$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" { } @else if $value == "bg-subtle" {
--#{$prefix}btn-hover-#{$property}: var(--#{$prefix}#{$color}-#{$value}); --#{$prefix}btn-hover-#{$property}: var(--#{$prefix}#{$color}-#{$value});
// #{$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 { } @else {
--#{$prefix}btn-hover-#{$property}: oklch(from var(--#{$prefix}#{$color}-#{$value}) calc(l * .95) calc(c * 1.1) h); --#{$prefix}btn-hover-#{$property}: oklch(from var(--#{$prefix}#{$color}-#{$value}) calc(l * .95) calc(c * 1.1) h);
// #{$property}: oklch( // #{$property}: oklch(
@@ -169,7 +183,7 @@ $button-variants: (
} }
// Generate all button variants // Generate all button variants
@each $color, $_ in $theme-colors { @each $color, $_ in $new-theme-colors {
@each $variant, $_ in $button-variants { @each $variant, $_ in $button-variants {
.btn-#{$color}-#{$variant} { .btn-#{$color}-#{$variant} {
@include button-variant($color, $variant); @include button-variant($color, $variant);

4
scss/_config.scss
View File

@@ -41,7 +41,7 @@ $breakpoints: (
md: 768px, md: 768px,
lg: 992px, lg: 992px,
xl: 1200px, xl: 1200px,
2xl: 1400px 2xl: 1600px
) !default; ) !default;
// scss-docs-end breakpoints // scss-docs-end breakpoints
@@ -63,7 +63,7 @@ $container-max-widths: (
md: 720px, md: 720px,
lg: 960px, lg: 960px,
xl: 1140px, xl: 1140px,
2xl: 1320px 2xl: 1440px
) !default; ) !default;
// scss-docs-end container-max-widths // 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-padding-y: #{$tooltip-padding-y};
--#{$prefix}tooltip-margin: #{$tooltip-margin}; --#{$prefix}tooltip-margin: #{$tooltip-margin};
@include rfs($tooltip-font-size, --#{$prefix}tooltip-font-size); @include rfs($tooltip-font-size, --#{$prefix}tooltip-font-size);
--#{$prefix}tooltip-color: #{$tooltip-color}; --#{$prefix}tooltip-color: var(--#{$prefix}bg-0);
--#{$prefix}tooltip-bg: #{$tooltip-bg}; --#{$prefix}tooltip-bg: var(--#{$prefix}fg-0);
--#{$prefix}tooltip-border-radius: #{$tooltip-border-radius}; --#{$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-width: #{$tooltip-arrow-width};
--#{$prefix}tooltip-arrow-height: #{$tooltip-arrow-height}; --#{$prefix}tooltip-arrow-height: #{$tooltip-arrow-height};
// scss-docs-end tooltip-css-vars // scss-docs-end tooltip-css-vars

94
scss/_utilities.scss
View File

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

47
scss/_variables.scss
View File

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