Skip to content

Commit e828954

Browse files
louismaximepitonjulien-deramond
louismaximepiton
and
julien-deramond
committed
Dark mode: Close button (#2317)
Co-authored-by: Julien Déramond <julien.deramond@orange.com>
1 parent 10436fa commit e828954

File tree

2 files changed

+120
-3
lines changed

2 files changed

+120
-3
lines changed

‎scss/_variables.scss

+3-3
Original file line numberDiff line numberDiff line change
@@ -2191,9 +2191,9 @@ $btn-close-focus-shadow: $btn-focus-box-shadow !default; // Deprecated in
21912191

21922192
// Boosted mod
21932193
$btn-close-hover-color: $btn-close-color !default;
2194-
$btn-close-active-color: $primary !default;
2195-
$btn-close-active-border-color: $gray-500 !default;
2196-
$btn-close-disabled-color: $gray-500 !default;
2194+
$btn-close-active-color: var(--#{$prefix}link-hover-color) !default;
2195+
$btn-close-active-border-color: var(--#{$prefix}border-color-translucent) !default;
2196+
$btn-close-disabled-color: var(--#{$prefix}disabled-color) !default;
21972197

21982198
$btn-close-icon-size: 1rem auto !default;
21992199
$btn-close-padding-sm: subtract($btn-icon-padding-x, $spacer * .25) !default;

‎site/content/docs/5.3/dark-mode.md

+117
Original file line numberDiff line numberDiff line change
@@ -783,6 +783,123 @@ sitemap_exclude: true
783783
<div class="btn-group"><button class="btn btn-outline-secondary" type="button" disabled data-bs-theme="light">Large split button</button><button type="button" class="btn btn-outline-secondary dropdown-toggle dropdown-toggle-split" disabled data-bs-theme="light"><span class="visually-hidden">Toggle Dropdown</span></button></div>
784784
</div>
785785

786+
### Close button
787+
788+
<h4 class="mt-3">No theme</h4>
789+
790+
<div class="border border-tertiary p-3">
791+
<button type="button" class="btn-close" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close"><span class="visually-hidden">Close</span></button>
792+
<button type="button" class="btn-close" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close" disabled><span class="visually-hidden">Close</span></button>
793+
<button type="button" class="btn btn-icon btn-no-outline" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close">
794+
<svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#delete"></use></svg>
795+
<span class="visually-hidden">Close</span>
796+
</button>
797+
<button type="button" class="btn btn-icon btn-no-outline" disabled data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close">
798+
<svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#delete"></use></svg>
799+
<span class="visually-hidden">Close</span>
800+
</button>
801+
<button type="button" class="btn btn-icon btn-outline-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close">
802+
<svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#delete"></use></svg>
803+
<span class="visually-hidden">Close</span>
804+
</button>
805+
<button type="button" class="btn btn-icon btn-outline-secondary" disabled data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close">
806+
<svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#delete"></use></svg>
807+
<span class="visually-hidden">Close</span>
808+
</button>
809+
</div>
810+
811+
<h4 class="mt-3">Dark theme on container</h4>
812+
813+
<div class="border border-tertiary p-3 bg-body" data-bs-theme="dark">
814+
<button type="button" class="btn-close" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close"><span class="visually-hidden">Close</span></button>
815+
<button type="button" class="btn-close" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close" disabled><span class="visually-hidden">Close</span></button>
816+
<button type="button" class="btn btn-icon btn-no-outline" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close">
817+
<svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#delete"></use></svg>
818+
<span class="visually-hidden">Close</span>
819+
</button>
820+
<button type="button" class="btn btn-icon btn-no-outline" disabled data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close">
821+
<svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#delete"></use></svg>
822+
<span class="visually-hidden">Close</span>
823+
</button>
824+
<button type="button" class="btn btn-icon btn-outline-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close">
825+
<svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#delete"></use></svg>
826+
<span class="visually-hidden">Close</span>
827+
</button>
828+
<button type="button" class="btn btn-icon btn-outline-secondary" disabled data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close">
829+
<svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#delete"></use></svg>
830+
<span class="visually-hidden">Close</span>
831+
</button>
832+
</div>
833+
834+
<h4 class="mt-3">Light theme on container</h4>
835+
836+
<div class="border border-tertiary p-3 bg-body" data-bs-theme="light">
837+
<button type="button" class="btn-close" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close"><span class="visually-hidden">Close</span></button>
838+
<button type="button" class="btn-close" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close" disabled><span class="visually-hidden">Close</span></button>
839+
<button type="button" class="btn btn-icon btn-no-outline" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close">
840+
<svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#delete"></use></svg>
841+
<span class="visually-hidden">Close</span>
842+
</button>
843+
<button type="button" class="btn btn-icon btn-no-outline" disabled data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close">
844+
<svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#delete"></use></svg>
845+
<span class="visually-hidden">Close</span>
846+
</button>
847+
<button type="button" class="btn btn-icon btn-outline-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close">
848+
<svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#delete"></use></svg>
849+
<span class="visually-hidden">Close</span>
850+
</button>
851+
<button type="button" class="btn btn-icon btn-outline-secondary" disabled data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close">
852+
<svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#delete"></use></svg>
853+
<span class="visually-hidden">Close</span>
854+
</button>
855+
</div>
856+
857+
<h4 class="mt-3">Dark theme on component</h4>
858+
859+
<div class="border border-tertiary p-3" style="background-color: #282d55;">
860+
<button type="button" class="btn-close" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close" data-bs-theme="dark"><span class="visually-hidden">Close</span></button>
861+
<button type="button" class="btn-close" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close" data-bs-theme="dark" disabled><span class="visually-hidden">Close</span></button>
862+
<button type="button" class="btn btn-icon btn-no-outline" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close" data-bs-theme="dark">
863+
<svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#delete"></use></svg>
864+
<span class="visually-hidden">Close</span>
865+
</button>
866+
<button type="button" class="btn btn-icon btn-no-outline" disabled data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close" data-bs-theme="dark">
867+
<svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#delete"></use></svg>
868+
<span class="visually-hidden">Close</span>
869+
</button>
870+
<button type="button" class="btn btn-icon btn-outline-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close" data-bs-theme="dark">
871+
<svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#delete"></use></svg>
872+
<span class="visually-hidden">Close</span>
873+
</button>
874+
<button type="button" class="btn btn-icon btn-outline-secondary" disabled data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close" data-bs-theme="dark">
875+
<svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#delete"></use></svg>
876+
<span class="visually-hidden">Close</span>
877+
</button>
878+
</div>
879+
880+
<h4 class="mt-3">Light theme on component</h4>
881+
882+
<div class="border border-tertiary p-3" style="background-color: #b5e8f7">
883+
<button type="button" class="btn-close" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close" data-bs-theme="light"><span class="visually-hidden">Close</span></button>
884+
<button type="button" class="btn-close" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close" data-bs-theme="light" disabled><span class="visually-hidden">Close</span></button>
885+
<button type="button" class="btn btn-icon btn-no-outline" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close" data-bs-theme="light">
886+
<svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#delete"></use></svg>
887+
<span class="visually-hidden">Close</span>
888+
</button>
889+
<button type="button" class="btn btn-icon btn-no-outline" disabled data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close" data-bs-theme="light">
890+
<svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#delete"></use></svg>
891+
<span class="visually-hidden">Close</span>
892+
</button>
893+
<button type="button" class="btn btn-icon btn-outline-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close" data-bs-theme="light">
894+
<svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#delete"></use></svg>
895+
<span class="visually-hidden">Close</span>
896+
</button>
897+
<button type="button" class="btn btn-icon btn-outline-secondary" disabled data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-title="Close" data-bs-theme="light">
898+
<svg width="1.25rem" height="1.25rem" fill="currentColor" aria-hidden="true" focusable="false"><use xlink:href="/docs/5.3/assets/img/boosted-sprite.svg#delete"></use></svg>
899+
<span class="visually-hidden">Close</span>
900+
</button>
901+
</div>
902+
786903
### Dropdowns
787904

788905
<h4 class="mt-3">No theme</h4>

0 commit comments

Comments
 (0)