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 && (
<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"
data-bs-toggle="collapse"
data-bs-target="#tocContents"
@@ -97,7 +97,7 @@ if (frontmatter.toc) {
<use xlink:href="#chevron-expand" />
</svg>
</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" />
<div class="collapse bd-toc-collapse" id="tocContents">
<nav id="TableOfContents" aria-labelledby="docs-tocs">

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

@@ -36,7 +36,7 @@
}
.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-border-color: var(--bs-border-color);

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

@@ -7,7 +7,7 @@
//
.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);
padding: 1.25rem;
@@ -37,8 +37,8 @@
// Variations
@each $variant in $bd-callout-variants {
.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-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};
&::after {
$contrast-ratio: "#{contrast-ratio($value, color-contrast($value))}";
$against-white: "#{contrast-ratio($value, $white)}";
$against-black: "#{contrast-ratio($value, $black)}";
// $contrast-ratio: "#{contrast-ratio($value, color-contrast($value))}";
// $against-white: "#{contrast-ratio($value, $white)}";
// $against-black: "#{contrast-ratio($value, $black)}";
position: absolute;
top: 1rem;
right: 1rem;
@@ -24,10 +24,10 @@
font-size: .75rem;
line-height: 1.35;
white-space: pre;
content:
str-slice($contrast-ratio, 1, 4) "\A"
str-slice($against-white, 1, 4) "\A"
str-slice($against-black, 1, 4);
// content:
// str-slice($contrast-ratio, 1, 4) "\A"
// str-slice($against-white, 1, 4) "\A"
// str-slice($against-black, 1, 4);
background-color: $value;
background-image:
linear-gradient(

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

@@ -149,25 +149,27 @@
// scss-docs-start custom-color-mode
[data-bs-theme="blue"] {
--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-rgb: #{to-rgb($blue)};
// --bs-body-bg-rgb: #{to-rgb($blue)};
--bs-tertiary-bg: #{$blue-600};
.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};
}
.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-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-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-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

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

@@ -8,14 +8,14 @@
@use "../../../scss/mixins/color-mode" as *;
.bd-masthead {
--bd-pink: $pink;
// --bd-pink: #{$pink};
padding: 3rem 0;
// 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)),
radial-gradient(ellipse at top left, color-mix(in srgb, var(--bs-primary) 50%, transparent), transparent 50%),
radial-gradient(ellipse at top right, color-mix(in srgb, var(--bd-accent) 50%, transparent), transparent 50%),
radial-gradient(ellipse at center right, color-mix(in srgb, var(--bd-violet) 50%, transparent), transparent 50%),
radial-gradient(ellipse at center left, color-mix(in srgb, var(--bd-pink) 50%, transparent), transparent 50%);
// 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), transparent)),
// 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), transparent)),
// radial-gradient(ellipse at center left, color-mix(in srgb, var(--bd-pink), transparent));
// stylelint-enable
h1 {

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

@@ -6,80 +6,72 @@
@use "../../../scss/layout/breakpoints" as *;
@use "../../../scss/vendor/rfs" as *;
.bd-navbar {
padding: .75rem 0;
background-color: transparent;
box-shadow: 0 .5rem 1rem rgba($black, .15), inset 0 -1px 0 rgba($white, .15);
@layer custom {
.bd-navbar {
padding: .75rem 0;
background-color: transparent;
box-shadow: 0 .5rem 1rem rgba($black, .15), inset 0 -1px 0 rgba($white, .15);
@media (forced-colors) {
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;
@media (forced-colors) {
background-color: Canvas;
}
.bi {
width: 1.5rem;
height: 1.5rem;
&::after {
position: absolute;
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 {
box-shadow: none;
.bd-navbar-toggle {
@include media-breakpoint-down(lg) {
width: 4.25rem;
}
}
}
.navbar-brand {
color: $white;
@include transition(transform .2s ease-in-out);
.navbar-toggler {
padding: 0;
margin-right: -.5rem;
border: 0;
&:hover {
transform: rotate(-5deg) scale(1.1);
&:first-child {
margin-left: -.5rem;
}
.bi {
width: 1.5rem;
height: 1.5rem;
}
&:focus {
box-shadow: none;
}
}
}
.navbar-toggler,
.nav-link {
padding-right: $spacer * .25;
padding-left: $spacer * .25;
color: rgba($white, .85);
&:hover,
&:focus {
.navbar-brand {
color: $white;
@include transition(transform .2s ease-in-out);
&:hover {
transform: rotate(-5deg) scale(1.1);
}
}
&.active {
font-weight: 600;
color: $white;
}
}
.navbar-toggler,
.nav-link {
padding-right: $spacer * .25;
padding-left: $spacer * .25;
color: rgba($white, .85);
.navbar-nav-svg {
display: inline-block;
vertical-align: -.125rem;
}
&:hover,
&:focus {
color: $white;
}
<<<<<<< HEAD
.offcanvas-lg {
background-color: var(--bd-violet-bg);
border-left: 0;
@@ -108,34 +100,76 @@
li + li {
margin-top: .125rem;
=======
&.active {
font-weight: 600;
color: $white;
}
>>>>>>> 9c2140328 (fix some docs Sass)
}
.dropdown-item {
@include border-radius(.25rem);
.navbar-nav-svg {
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 {
color: inherit !important; // stylelint-disable-line declaration-no-important
display: block !important; // stylelint-disable-line declaration-no-important
}
}
}
.active {
font-weight: 600;
.bi {
display: block !important; // stylelint-disable-line declaration-no-important
}
.dropdown-menu-end {
--bs-dropdown-min-width: 8rem;
}
}
.dropdown-menu-end {
--bs-dropdown-min-width: 8rem;
}
}
@include color-mode(dark) {
.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;
--base06: #fff;
--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
--base0A: #{$purple-500}; // #795da3
--base0B: #{$blue-700}; // #183691

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

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

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

@@ -12,29 +12,31 @@ $bd-accent: #ffe484;
$bd-gutter-x: 3rem;
$bd-callout-variants: info, warning, danger !default;
:root,
[data-bs-theme="light"] {
--bd-purple: #{$bd-purple};
--bd-violet: #{$bd-violet};
--bd-accent: #{$bd-accent};
--bd-violet-rgb: #{to-rgb($bd-violet)};
--bd-accent-rgb: #{to-rgb($bd-accent)};
--bd-pink-rgb: #{to-rgb($pink-500)};
--bd-teal-rgb: #{to-rgb($teal-500)};
--bd-violet-bg: var(--bd-violet);
--bd-toc-color: var(--bd-violet);
--bd-sidebar-link-bg: rgba(var(--bd-violet-rgb), .1);
--bd-callout-link: #{to-rgb($blue-600)};
--bd-callout-code-color: #{$pink-600};
--bd-pre-bg: var(--bs-tertiary-bg);
}
@layer custom {
:root,
[data-bs-theme="light"] {
--bd-purple: #{$bd-purple};
--bd-violet: #{$bd-violet};
--bd-accent: #{$bd-accent};
// --bd-violet-rgb: #{to-rgb($bd-violet)};
// --bd-accent-rgb: #{to-rgb($bd-accent)};
// --bd-pink-rgb: #{to-rgb($pink-500)};
// --bd-teal-rgb: #{to-rgb($teal-500)};
--bd-violet-bg: var(--bd-violet);
--bd-toc-color: var(--bd-violet);
--bd-sidebar-link-bg: color-mix(in srgb, var(--bd-violet), transparent 90%);
--bd-callout-link: #{$blue-600};
--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) {
--bd-violet: #{mix($bd-violet, $white, 75%)};
--bd-violet-bg: #{$bd-violet};
--bd-toc-color: var(--#{$prefix}emphasis-color);
--bd-sidebar-link-bg: rgba(#{to-rgb(mix($bd-violet, $black, 75%))}, .5);
--bd-callout-link: #{to-rgb($blue-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
// @include color-mode(dark, true) {
// --bd-violet: #{mix($bd-violet, $white, 75%)};
// --bd-violet-bg: #{$bd-violet};
// --bd-toc-color: var(--#{$prefix}emphasis-color);
// --bd-sidebar-link-bg: rgba(#{to-rgb(mix($bd-violet, $black, 75%))}, .5);
// --bd-callout-link: #{to-rgb($blue-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
// }
}