2
0
mirror of https://github.com/tenrok/bootstrap.git synced 2026-06-14 18:42:30 +03:00

fix some docs colors

This commit is contained in:
Mark Otto
2022-04-17 17:21:22 -07:00
parent ad2e2d7e69
commit f6e1be0e62
4 changed files with 19 additions and 17 deletions
+2
View File
@@ -40,6 +40,8 @@
} }
.highlight-toolbar { .highlight-toolbar {
background-color: var(--bs-tertiary-bg);
.btn-clipboard { .btn-clipboard {
margin-top: 0; margin-top: 0;
margin-right: 0; margin-right: 0;
+15 -15
View File
@@ -8,8 +8,8 @@
> [class^="col-"] { > [class^="col-"] {
padding-top: .75rem; padding-top: .75rem;
padding-bottom: .75rem; padding-bottom: .75rem;
background-color: rgba(39, 41, 43, .03); background-color: var(--bs-tertiary-bg);
border: 1px solid rgba(39, 41, 43, .1); border: 1px solid var(--bs-secondary-bg);
} }
} }
@@ -20,7 +20,7 @@
.bd-example-row-flex-cols .row { .bd-example-row-flex-cols .row {
min-height: 10rem; min-height: 10rem;
background-color: rgba(255, 0, 0, .1); background-color: rgba(var(--bs-danger-rgb), .1);
} }
.bd-example-cssgrid { .bd-example-cssgrid {
@@ -33,14 +33,14 @@
.grid > * { .grid > * {
padding-top: .75rem; padding-top: .75rem;
padding-bottom: .75rem; padding-bottom: .75rem;
background-color: rgba(255, 0, 255, .1); background-color: rgba(var(--bd-pink-rgb), .1);
border: 1px solid rgba(255, 0, 255, .25); border: 1px solid rgba(var(--bd-pink-rgb), .25);
} }
} }
.bd-highlight { .bd-highlight {
background-color: rgba($bd-purple, .15); background-color: rgba(var(--bd-violet-rgb), .15);
border: 1px solid rgba($bd-purple, .15); border: 1px solid rgba(var(--bd-violet-rgb), .15);
} }
// Grid mixins // Grid mixins
@@ -182,8 +182,8 @@
.ratio { .ratio {
display: inline-block; display: inline-block;
width: 10rem; width: 10rem;
color: $gray-600; color: var(--bs-secondary-color);
background-color: $gray-100; background-color: var(--bs-tertiary-bg);
border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color); border: var(--#{$prefix}border-width) solid var(--#{$prefix}border-color);
> div { > div {
@@ -278,7 +278,7 @@
width: 5rem; width: 5rem;
height: 5rem; height: 5rem;
margin: .25rem; margin: .25rem;
background-color: #f5f5f5; background-color: var(--bs-tertiary-bg);
} }
} }
@@ -296,17 +296,17 @@
.bd-example-position-utils { .bd-example-position-utils {
position: relative; position: relative;
padding: 3em; padding: 2rem;
.position-relative { .position-relative {
height: 200px; height: 200px;
background-color: #f5f5f5; background-color: var(--bs-tertiary-bg);
} }
.position-absolute { .position-absolute {
width: 2em; width: 2rem;
height: 2em; height: 2rem;
background-color: $dark; background-color: var(--bs-body-color);
@include border-radius(); @include border-radius();
} }
} }
+1 -1
View File
@@ -94,7 +94,7 @@ Here are some real life examples of these classes:
</button> </button>
<button type="button" class="btn btn-dark position-relative"> <button type="button" class="btn btn-dark position-relative">
Marker <svg width="1em" height="1em" viewBox="0 0 16 16" class="position-absolute top-100 start-50 translate-middle mt-1 bi bi-caret-down-fill" fill="#212529" xmlns="http://www.w3.org/2000/svg"><path d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg> Marker <svg width="1em" height="1em" viewBox="0 0 16 16" class="position-absolute top-100 start-50 translate-middle mt-1" fill="inherit" xmlns="http://www.w3.org/2000/svg"><path d="M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>
</button> </button>
<button type="button" class="btn btn-primary position-relative"> <button type="button" class="btn btn-primary position-relative">
+1 -1
View File
@@ -24,7 +24,7 @@
{{- if eq $show_markup true -}} {{- if eq $show_markup true -}}
{{- if eq $show_preview true -}} {{- if eq $show_preview true -}}
<div class="d-flex align-items-center highlight-toolbar bg-light ps-3 pe-2 py-1"> <div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1">
<small class="font-monospace text-muted text-uppercase">{{- $lang -}}</small> <small class="font-monospace text-muted text-uppercase">{{- $lang -}}</small>
<div class="d-flex ms-auto"> <div class="d-flex ms-auto">
<button type="button" class="btn-edit text-nowrap" title="Try it on StackBlitz"> <button type="button" class="btn-edit text-nowrap" title="Try it on StackBlitz">