Skip to content

Commit

Permalink
Add color mode on back to top
Browse files Browse the repository at this point in the history
  • Loading branch information
louismaximepiton authored and julien-deramond committed Oct 27, 2023
1 parent 74dcca2 commit c898416
Show file tree
Hide file tree
Showing 3 changed files with 84 additions and 3 deletions.
4 changes: 3 additions & 1 deletion scss/_back-to-top.scss
Original file line number Diff line number Diff line change
Expand Up @@ -16,9 +16,10 @@
--#{$prefix}back-to-top-link-icon: #{$back-to-top-icon};
--#{$prefix}back-to-top-link-width: #{$back-to-top-icon-width};
--#{$prefix}back-to-top-link-height: #{$back-to-top-icon-height};
--#{$prefix}back-to-top-link-bg: #{$back-to-top-bg};
--#{$prefix}back-to-top-title-offset-right: #{$back-to-top-title-offset-right};
--#{$prefix}back-to-top-title-padding: #{$back-to-top-title-padding};
--#{$prefix}back-to-top-title-color: #{color-contrast($back-to-top-title-bg-color)};
--#{$prefix}back-to-top-title-color: #{$back-to-top-title-color};
--#{$prefix}back-to-top-title-bg-color: #{$back-to-top-title-bg-color};
--#{$prefix}back-to-top-title-active-decoration: #{$link-decoration};
// scss-docs-end back-to-top-css-vars
Expand All @@ -43,6 +44,7 @@
position: sticky;
top: var(--#{$prefix}back-to-top-link-offset-top);
pointer-events: all;
background-color: var(--#{$prefix}back-to-top-link-bg);
@include button-icon(var(--#{$prefix}back-to-top-link-icon), $size: var(--#{$prefix}back-to-top-link-width) var(--#{$prefix}back-to-top-link-height), $pseudo: "after", $position: calc(50% - 1px));

&::after {
Expand Down
4 changes: 3 additions & 1 deletion scss/_variables.scss
Original file line number Diff line number Diff line change
Expand Up @@ -2245,7 +2245,9 @@ $back-to-top-link-offset-top: subtract(100vh, $back-to-top-offset * 4) !defau
$back-to-top-link-offset-top-xl: subtract(100vh, $spacer * 5) !default;
$back-to-top-title-offset-right: add(100%, var(--#{$prefix}border-width)) !default;
$back-to-top-title-padding: subtract($btn-padding-y, 1px) $btn-padding-x add($btn-padding-y, 1px) !default;
$back-to-top-title-bg-color: $white !default;
$back-to-top-title-color: var(--#{$prefix}body-color) !default;
$back-to-top-title-bg-color: var(--#{$prefix}body-bg) !default;
$back-to-top-bg: var(--#{$prefix}highlight-color) !default;
$back-to-top-icon: var(--#{$prefix}chevron-icon) !default;
$back-to-top-icon-width: add(.5rem, 1px) !default;
$back-to-top-icon-height: subtract(1rem, 1px) !default;
Expand Down
79 changes: 78 additions & 1 deletion site/content/docs/5.3/dark-mode.md
Original file line number Diff line number Diff line change
Expand Up @@ -444,6 +444,83 @@ sitemap_exclude: true
</div>
</div>

### Back to top

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

<div class="d-flex gap-2 flex-wrap border border-tertiary p-3">
<nav aria-label="Standard back to top example" class="back-to-top position-static ps-5 ms-5">
<a href="#" class="back-to-top-link btn btn-icon btn-outline-secondary position-relative top-0" data-bs-label="Back to top">
<span class="visually-hidden">Back to top</span>
</a>
</nav>
<nav aria-label="Icon only back to top example" class="back-to-top position-static">
<a href="#" class="back-to-top-link position-static btn btn-icon btn-outline-secondary" title="Back to top">
<span class="visually-hidden">Back to top</span>
</a>
</nav>
</div>

<h4 class="mt-3">Dark theme on container</h4>

<div class="d-flex gap-2 flex-wrap border border-tertiary p-3 bg-body" data-bs-theme="dark">
<nav aria-label="Standard back to top example2" class="back-to-top position-static ps-5 ms-5">
<a href="#" class="back-to-top-link btn btn-icon btn-outline-secondary position-relative top-0" data-bs-label="Back to top">
<span class="visually-hidden">Back to top</span>
</a>
</nav>
<nav aria-label="Icon only back to top example2" class="back-to-top position-static">
<a href="#" class="back-to-top-link position-static btn btn-icon btn-outline-secondary" title="Back to top">
<span class="visually-hidden">Back to top</span>
</a>
</nav>
</div>

<h4 class="mt-3">Light theme on container</h4>

<div class="d-flex gap-2 flex-wrap border border-tertiary p-3 bg-body" data-bs-theme="light">
<nav aria-label="Standard back to top example3" class="back-to-top position-static ps-5 ms-5">
<a href="#" class="back-to-top-link btn btn-icon btn-outline-secondary position-relative top-0" data-bs-label="Back to top">
<span class="visually-hidden">Back to top</span>
</a>
</nav>
<nav aria-label="Icon only back to top example3" class="back-to-top position-static">
<a href="#" class="back-to-top-link position-static btn btn-icon btn-outline-secondary" title="Back to top">
<span class="visually-hidden">Back to top</span>
</a>
</nav>
</div>

<h4 class="mt-3">Dark theme on component</h4>

<div class="d-flex gap-2 flex-wrap border border-tertiary p-3" style="background-color: #282d55;">
<nav aria-label="Standard back to top example4" class="back-to-top position-static ps-5 ms-5" data-bs-theme="dark">
<a href="#" class="back-to-top-link btn btn-icon btn-outline-secondary position-relative top-0" data-bs-label="Back to top">
<span class="visually-hidden">Back to top</span>
</a>
</nav>
<nav aria-label="Icon only back to top example4" class="back-to-top position-static" data-bs-theme="dark">
<a href="#" class="back-to-top-link position-static btn btn-icon btn-outline-secondary" title="Back to top">
<span class="visually-hidden">Back to top</span>
</a>
</nav>
</div>

<h4 class="mt-3">Light theme on component</h4>

<div class="d-flex gap-2 flex-wrap border border-tertiary p-3" style="background-color: #b5e8f7">
<nav aria-label="Standard back to top example5" class="back-to-top position-static ps-5 ms-5" data-bs-theme="light">
<a href="#" class="back-to-top-link btn btn-icon btn-outline-secondary position-relative top-0" data-bs-label="Back to top">
<span class="visually-hidden">Back to top</span>
</a>
</nav>
<nav aria-label="Icon only back to top example5" class="back-to-top position-static" data-bs-theme="light">
<a href="#" class="back-to-top-link position-static btn btn-icon btn-outline-secondary" title="Back to top">
<span class="visually-hidden">Back to top</span>
</a>
</nav>
</div>

### Breadcrumb

<h4 class="mt-3">No theme</h4>
Expand Down Expand Up @@ -3273,7 +3350,7 @@ sitemap_exclude: true
</div>
</div>

### Form validation
### Validation

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

Expand Down

0 comments on commit c898416

Please sign in to comment.