{
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"
<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">
}
.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);
//
.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;
// 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);
}
}
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;
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(
// 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
@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 {
@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);
-
- @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;
+@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);
- &: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;
+ }
- .navbar-toggler,
- .nav-link {
- padding-right: $spacer * .25;
- padding-left: $spacer * .25;
- color: rgba($white, .85);
+ .bi {
+ width: 1.5rem;
+ height: 1.5rem;
+ }
- &:hover,
- &:focus {
- color: $white;
+ &:focus {
+ box-shadow: none;
+ }
}
- &.active {
- font-weight: 600;
+ .navbar-brand {
color: $white;
+ @include transition(transform .2s ease-in-out);
+
+ &:hover {
+ transform: rotate(-5deg) scale(1.1);
+ }
}
- }
- .navbar-nav-svg {
- display: inline-block;
- vertical-align: -.125rem;
- }
+ .navbar-toggler,
+ .nav-link {
+ padding-right: $spacer * .25;
+ padding-left: $spacer * .25;
+ color: rgba($white, .85);
+ &:hover,
+ &:focus {
+ color: $white;
+ }
+
+<<<<<<< HEAD
.offcanvas-lg {
background-color: var(--bd-violet-bg);
border-left: 0;
li + li {
margin-top: .125rem;
+=======
+ &.active {
+ font-weight: 600;
+ color: $white;
+ }
+>>>>>>> 9c2140328 (fix some docs Sass)
+ }
+
+ .navbar-nav-svg {
+ display: inline-block;
+ vertical-align: -.125rem;
}
- .dropdown-item {
- @include border-radius(.25rem);
+ .offcanvas-lg {
+ background-color: var(--bd-violet-bg);
+ border-left: 0;
- &:active {
- .bi {
- color: inherit !important; // stylelint-disable-line declaration-no-important
- }
+ @include media-breakpoint-down(lg) {
+ box-shadow: $box-shadow-lg;
}
}
- .active {
- font-weight: 600;
+ .dropdown-toggle {
+ &:focus:not(:focus-visible) {
+ outline: 0;
+ }
+ }
- .bi {
- display: block !important; // stylelint-disable-line declaration-no-important
+ .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;
+
+ .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);
+ }
}
}
--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
}
.bd-toc-toggle {
- display: flex;
- align-items: center;
-
@include media-breakpoint-down(sm) {
justify-content: space-between;
width: 100%;
$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
+ // }
}
projects / thirdparty / bootstrap.git / commitdiff
