mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-18 11:21:23 +02:00
Code Issues Releases Wiki Activity

fix some docs Sass

Browse Source
This commit is contained in:
Mark Otto
2025-03-07 09:45:15 -08:00
parent 02c1e34645
commit 9f8967d470
10 changed files with 166 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
site/src/layouts/DocsLayout.astro
View File

@@ -85,7 +85,7 @@ if (frontmatter.toc) {
{ {
frontmatter.toc && headings && ( frontmatter.toc && headings && (
<button <button
class="btn btn-link p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-md-none" class="btn btn-link p-md-0 mb-2 mb-md-0 text-decoration-none bd-toc-toggle d-flex align-items-center d-md-none"
type="button" type="button"
data-bs-toggle="collapse" data-bs-toggle="collapse"
data-bs-target="#tocContents" data-bs-target="#tocContents"
@@ -97,7 +97,7 @@ if (frontmatter.toc) {
<use xlink:href="#chevron-expand" /> <use xlink:href="#chevron-expand" />
</svg> </svg>
</button> </button>
<strong class="d-none d-md-block h6 my-2 ms-3" id="docs-tocs">On this page</strong> <div class="d-none d-md-block h6 my-2 ms-3" id="docs-tocs">On this page</div>
<hr class="d-none d-md-block my-2 ms-3" /> <hr class="d-none d-md-block my-2 ms-3" />
<div class="collapse bd-toc-collapse" id="tocContents"> <div class="collapse bd-toc-collapse" id="tocContents">
<nav id="TableOfContents" aria-labelledby="docs-tocs"> <nav id="TableOfContents" aria-labelledby="docs-tocs">

2
site/src/scss/_buttons.scss
View File

@@ -36,7 +36,7 @@
} }
.btn-bd-light { .btn-bd-light {
--btn-custom-color: #{mix($bd-violet, $white, 75%)}; --btn-custom-color: color-mix(in srgb, #{$bd-violet}, #{$white} 75%);
--bs-btn-color: var(--bs-gray-600); --bs-btn-color: var(--bs-gray-600);
--bs-btn-border-color: var(--bs-border-color); --bs-btn-border-color: var(--bs-border-color);

6
site/src/scss/_callouts.scss
View File

@@ -7,7 +7,7 @@
// //
.bd-callout { .bd-callout {
--#{$prefix}link-color-rgb: var(--bd-callout-link); --#{$prefix}link-color: var(--bd-callout-link);
--#{$prefix}code-color: var(--bd-callout-code-color); --#{$prefix}code-color: var(--bd-callout-code-color);
padding: 1.25rem; padding: 1.25rem;
@@ -37,8 +37,8 @@
// Variations // Variations
@each $variant in $bd-callout-variants { @each $variant in $bd-callout-variants {
.bd-callout-#{$variant} { .bd-callout-#{$variant} {
--bd-callout-color: var(--bs-#{$variant}-text-emphasis); --bd-callout-color: var(--bs-#{$variant}-text);
--bd-callout-bg: var(--bs-#{$variant}-bg-subtle); --bd-callout-bg: var(--bs-#{$variant}-bg-subtle);
--bd-callout-border: var(--bs-#{$variant}-border-subtle); --bd-callout-border: var(--bs-#{$variant}-border);
} }
} }

14
site/src/scss/_colors.scss
View File

@@ -14,9 +14,9 @@
background-color: #{$value}; background-color: #{$value};
&::after { &::after {
$contrast-ratio: "#{contrast-ratio($value, color-contrast($value))}"; // $contrast-ratio: "#{contrast-ratio($value, color-contrast($value))}";
$against-white: "#{contrast-ratio($value, $white)}"; // $against-white: "#{contrast-ratio($value, $white)}";
$against-black: "#{contrast-ratio($value, $black)}"; // $against-black: "#{contrast-ratio($value, $black)}";
position: absolute; position: absolute;
top: 1rem; top: 1rem;
right: 1rem; right: 1rem;
@@ -24,10 +24,10 @@
font-size: .75rem; font-size: .75rem;
line-height: 1.35; line-height: 1.35;
white-space: pre; white-space: pre;
content: // content:
str-slice($contrast-ratio, 1, 4) "\A" // str-slice($contrast-ratio, 1, 4) "\A"
str-slice($against-white, 1, 4) "\A" // str-slice($against-white, 1, 4) "\A"
str-slice($against-black, 1, 4); // str-slice($against-black, 1, 4);
background-color: $value; background-color: $value;
background-image: background-image:
linear-gradient( linear-gradient(

16
site/src/scss/_content.scss
View File

@@ -149,25 +149,27 @@
// scss-docs-start custom-color-mode // scss-docs-start custom-color-mode
[data-bs-theme="blue"] { [data-bs-theme="blue"] {
--bs-body-color: var(--bs-white); --bs-body-color: var(--bs-white);
--bs-body-color-rgb: #{to-rgb($white)}; // --bs-body-color-rgb: #{to-rgb($white)};
--bs-body-bg: var(--bs-blue); --bs-body-bg: var(--bs-blue);
--bs-body-bg-rgb: #{to-rgb($blue)}; // --bs-body-bg-rgb: #{to-rgb($blue)};
--bs-tertiary-bg: #{$blue-600}; --bs-tertiary-bg: #{$blue-600};
.dropdown-menu { .dropdown-menu {
--bs-dropdown-bg: #{mix($blue-500, $blue-600)}; --bs-dropdown-bg: color-mix(in srgb, #{$blue-500}, #{$blue-600});
--bs-dropdown-link-active-bg: #{$blue-700}; --bs-dropdown-link-active-bg: #{$blue-700};
} }
.btn-secondary { .btn-secondary {
--bs-btn-bg: #{mix($gray-600, $blue-400, .5)}; --bs-btn-bg: #{color-mix(in srgb, #{$gray-600}, #{$blue-400})};
--bs-btn-border-color: #{rgba($white, .25)}; --bs-btn-border-color: #{rgba($white, .25)};
--bs-btn-hover-bg: #{darken(mix($gray-600, $blue-400, .5), 5%)}; // --bs-btn-hover-bg: #{darken(color-mix(in srgb, #{$gray-600}, #{$blue-400}, .5), 5%)};
--bs-btn-hover-bg: color-mix(in srgb, #{$gray-600}, #{$blue-400});
--bs-btn-hover-border-color: #{rgba($white, .25)}; --bs-btn-hover-border-color: #{rgba($white, .25)};
--bs-btn-active-bg: #{darken(mix($gray-600, $blue-400, .5), 10%)}; // --bs-btn-active-bg: #{darken(color-mix(in srgb, #{$gray-600}, #{$blue-400}, .5), 10%)};
--bs-btn-active-bg: color-mix(in srgb, #{$gray-600}, #{$blue-400});
--bs-btn-active-border-color: #{rgba($white, .5)}; --bs-btn-active-border-color: #{rgba($white, .5)};
--bs-btn-focus-border-color: #{rgba($white, .5)}; --bs-btn-focus-border-color: #{rgba($white, .5)};
--bs-btn-focus-box-shadow: 0 0 0 .25rem rgba(255, 255, 255, .2); --bs-btn-focus-box-shadow: 0 0 0 .25rem rgb(255, 255, 255, .2);
} }
} }
// scss-docs-end custom-color-mode // scss-docs-end custom-color-mode

12
site/src/scss/_masthead.scss
View File

@@ -8,14 +8,14 @@
@use "../../../scss/mixins/color-mode" as *; @use "../../../scss/mixins/color-mode" as *;
.bd-masthead { .bd-masthead {
--bd-pink: $pink; // --bd-pink: #{$pink};
padding: 3rem 0; padding: 3rem 0;
// stylelint-disable // stylelint-disable
background-image: linear-gradient(180deg, color-mix(in srgb, var(--bs-body-bg) 1%, transparent), color-mix(in srgb, var(--bs-body-bg) 85%, transparent)), // background-image: linear-gradient(180deg, color-mix(in srgb, var(--bs-body-bg) 1%, transparent), color-mix(in srgb, var(--bs-body-bg) 85%, transparent)),
radial-gradient(ellipse at top left, color-mix(in srgb, var(--bs-primary) 50%, transparent), transparent 50%), // radial-gradient(ellipse at top left, color-mix(in srgb, var(--bs-primary), transparent)),
radial-gradient(ellipse at top right, color-mix(in srgb, var(--bd-accent) 50%, transparent), transparent 50%), // radial-gradient(ellipse at top right, color-mix(in srgb, var(--bd-accent), transparent)),
radial-gradient(ellipse at center right, color-mix(in srgb, var(--bd-violet) 50%, transparent), transparent 50%), // radial-gradient(ellipse at center right, color-mix(in srgb, var(--bd-violet), transparent)),
radial-gradient(ellipse at center left, color-mix(in srgb, var(--bd-pink) 50%, transparent), transparent 50%); // radial-gradient(ellipse at center left, color-mix(in srgb, var(--bd-pink), transparent));
// stylelint-enable // stylelint-enable
h1 { h1 {

188
site/src/scss/_navbar.scss
View File

@@ -6,80 +6,72 @@
@use "../../../scss/layout/breakpoints" as *; @use "../../../scss/layout/breakpoints" as *;
@use "../../../scss/vendor/rfs" as *; @use "../../../scss/vendor/rfs" as *;
.bd-navbar { @layer custom {
padding: .75rem 0; .bd-navbar {
background-color: transparent; padding: .75rem 0;
box-shadow: 0 .5rem 1rem rgba($black, .15), inset 0 -1px 0 rgba($white, .15); background-color: transparent;
box-shadow: 0 .5rem 1rem rgba($black, .15), inset 0 -1px 0 rgba($white, .15);
@media (forced-colors) { @media (forced-colors) {
background-color: Canvas; background-color: Canvas;
}
&::after {
position: absolute;
inset: 0;
z-index: -1;
display: block;
content: "";
background-image: linear-gradient(rgba(var(--bd-violet-rgb), 1), rgba(var(--bd-violet-rgb), .95));
}
.bd-navbar-toggle {
@include media-breakpoint-down(lg) {
width: 4.25rem;
}
}
.navbar-toggler {
padding: 0;
margin-right: -.5rem;
border: 0;
&:first-child {
margin-left: -.5rem;
} }
.bi { &::after {
width: 1.5rem; position: absolute;
height: 1.5rem; inset: 0;
z-index: -1;
display: block;
content: "";
background-image: linear-gradient(var(--bd-violet), color-mix(in srgb, var(--bd-violet), transparent 5%));
// background-image: linear-gradient(color-mix(in srgb, var(--bs-gray-900), $black 10%), color-mix(in srgb, var(--bs-gray-900), $black 15%));
} }
&:focus { .bd-navbar-toggle {
box-shadow: none; @include media-breakpoint-down(lg) {
width: 4.25rem;
}
} }
}
.navbar-brand { .navbar-toggler {
color: $white; padding: 0;
@include transition(transform .2s ease-in-out); margin-right: -.5rem;
border: 0;
&:hover { &:first-child {
transform: rotate(-5deg) scale(1.1); margin-left: -.5rem;
}
.bi {
width: 1.5rem;
height: 1.5rem;
}
&:focus {
box-shadow: none;
}
} }
}
.navbar-toggler, .navbar-brand {
.nav-link {
padding-right: $spacer * .25;
padding-left: $spacer * .25;
color: rgba($white, .85);
&:hover,
&:focus {
color: $white; color: $white;
@include transition(transform .2s ease-in-out);
&:hover {
transform: rotate(-5deg) scale(1.1);
}
} }
&.active { .navbar-toggler,
font-weight: 600; .nav-link {
color: $white; padding-right: $spacer * .25;
} padding-left: $spacer * .25;
} color: rgba($white, .85);
.navbar-nav-svg { &:hover,
display: inline-block; &:focus {
vertical-align: -.125rem; color: $white;
} }
<<<<<<< HEAD
.offcanvas-lg { .offcanvas-lg {
background-color: var(--bd-violet-bg); background-color: var(--bd-violet-bg);
border-left: 0; border-left: 0;
@@ -108,34 +100,76 @@
li + li { li + li {
margin-top: .125rem; margin-top: .125rem;
=======
&.active {
font-weight: 600;
color: $white;
}
>>>>>>> 9c2140328 (fix some docs Sass)
} }
.dropdown-item { .navbar-nav-svg {
@include border-radius(.25rem); display: inline-block;
vertical-align: -.125rem;
}
.offcanvas-lg {
background-color: var(--bd-violet-bg);
border-left: 0;
@include media-breakpoint-down(lg) {
box-shadow: $box-shadow-lg;
}
}
.dropdown-toggle {
&:focus:not(:focus-visible) {
outline: 0;
}
}
.dropdown-menu {
--bs-dropdown-min-width: 12rem;
--bs-dropdown-padding-x: .25rem;
--bs-dropdown-padding-y: .25rem;
--bs-dropdown-link-hover-bg: rgba(var(--bd-violet-rgb), .1);
--bs-dropdown-link-active-bg: rgba(var(--bd-violet-rgb), 1);
@include rfs(.875rem, --bs-dropdown-font-size);
@include font-size(.875rem);
@include border-radius(.5rem);
box-shadow: $dropdown-box-shadow;
li + li {
margin-top: .125rem;
}
.dropdown-item {
@include border-radius(.25rem);
&:active {
.bi {
color: inherit !important; // stylelint-disable-line declaration-no-important
}
}
}
.active {
font-weight: 600;
&:active {
.bi { .bi {
color: inherit !important; // stylelint-disable-line declaration-no-important display: block !important; // stylelint-disable-line declaration-no-important
} }
} }
} }
.active { .dropdown-menu-end {
font-weight: 600; --bs-dropdown-min-width: 8rem;
.bi {
display: block !important; // stylelint-disable-line declaration-no-important
}
} }
} }
.dropdown-menu-end { @include color-mode(dark) {
--bs-dropdown-min-width: 8rem; .bd-navbar {
} box-shadow: 0 .5rem 1rem rgba($black, .15), inset 0 -1px 0 rgba($white, .15);
} }
@include color-mode(dark) {
.bd-navbar {
box-shadow: 0 .5rem 1rem rgba($black, .15), inset 0 -1px 0 rgba($white, .15);
} }
} }

2
site/src/scss/_syntax.scss
View File

@@ -14,7 +14,7 @@
--base05: #333; --base05: #333;
--base06: #fff; --base06: #fff;
--base07: #{$teal-700}; // #9a6700 --base07: #{$teal-700}; // #9a6700
--base08: #{mix($red-500, $red-600, 50%)}; // #bc4c00 --base08: color-mix(in srgb, #{$red-500}, #{$red-600} 50%); // #bc4c00
--base09: #{$cyan-700}; // #087990 --base09: #{$cyan-700}; // #087990
--base0A: #{$purple-500}; // #795da3 --base0A: #{$purple-500}; // #795da3
--base0B: #{$blue-700}; // #183691 --base0B: #{$blue-700}; // #183691

3
site/src/scss/_toc.scss
View File

@@ -54,9 +54,6 @@
} }
.bd-toc-toggle { .bd-toc-toggle {
display: flex;
align-items: center;
@include media-breakpoint-down(sm) { @include media-breakpoint-down(sm) {
justify-content: space-between; justify-content: space-between;
width: 100%; width: 100%;

50
site/src/scss/_variables.scss
View File

@@ -12,29 +12,31 @@ $bd-accent: #ffe484;
$bd-gutter-x: 3rem; $bd-gutter-x: 3rem;
$bd-callout-variants: info, warning, danger !default; $bd-callout-variants: info, warning, danger !default;
:root, @layer custom {
[data-bs-theme="light"] { :root,
--bd-purple: #{$bd-purple}; [data-bs-theme="light"] {
--bd-violet: #{$bd-violet}; --bd-purple: #{$bd-purple};
--bd-accent: #{$bd-accent}; --bd-violet: #{$bd-violet};
--bd-violet-rgb: #{to-rgb($bd-violet)}; --bd-accent: #{$bd-accent};
--bd-accent-rgb: #{to-rgb($bd-accent)}; // --bd-violet-rgb: #{to-rgb($bd-violet)};
--bd-pink-rgb: #{to-rgb($pink-500)}; // --bd-accent-rgb: #{to-rgb($bd-accent)};
--bd-teal-rgb: #{to-rgb($teal-500)}; // --bd-pink-rgb: #{to-rgb($pink-500)};
--bd-violet-bg: var(--bd-violet); // --bd-teal-rgb: #{to-rgb($teal-500)};
--bd-toc-color: var(--bd-violet); --bd-violet-bg: var(--bd-violet);
--bd-sidebar-link-bg: rgba(var(--bd-violet-rgb), .1); --bd-toc-color: var(--bd-violet);
--bd-callout-link: #{to-rgb($blue-600)}; --bd-sidebar-link-bg: color-mix(in srgb, var(--bd-violet), transparent 90%);
--bd-callout-code-color: #{$pink-600}; --bd-callout-link: #{$blue-600};
--bd-pre-bg: var(--bs-tertiary-bg); --bd-callout-code-color: #{$pink-600};
} --bd-pre-bg: light-dark(var(--bs-gray-100), color-mix(in srgb, var(--bs-gray-900), var(--bs-black) 25%));
}
@include color-mode(dark, true) { // @include color-mode(dark, true) {
--bd-violet: #{mix($bd-violet, $white, 75%)}; // --bd-violet: #{mix($bd-violet, $white, 75%)};
--bd-violet-bg: #{$bd-violet}; // --bd-violet-bg: #{$bd-violet};
--bd-toc-color: var(--#{$prefix}emphasis-color); // --bd-toc-color: var(--#{$prefix}emphasis-color);
--bd-sidebar-link-bg: rgba(#{to-rgb(mix($bd-violet, $black, 75%))}, .5); // --bd-sidebar-link-bg: rgba(#{to-rgb(mix($bd-violet, $black, 75%))}, .5);
--bd-callout-link: #{to-rgb($blue-300)}; // --bd-callout-link: #{to-rgb($blue-300)};
--bd-callout-code-color: #{$pink-300}; // --bd-callout-code-color: #{$pink-300};
--bd-pre-bg: #{adjust-color($gray-900, $lightness: -2.5%)}; // stylelint-disable-line scss/at-function-named-arguments // --bd-pre-bg: #{adjust-color($gray-900, $lightness: -2.5%)}; // stylelint-disable-line scss/at-function-named-arguments
// }
} }