Skip to content
GitLab
    • Explore Projects Groups Snippets
Projects Groups Snippets
  • /
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in / Register
  • B bootstrap
  • Project information
    • Project information
    • Activity
    • Labels
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 263
    • Issues 263
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 114
    • Merge requests 114
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Packages and registries
    • Packages and registries
    • Package Registry
    • Infrastructure Registry
  • Monitor
    • Monitor
    • Incidents
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Bootstrap
  • bootstrap
  • Merge requests
  • !37797

Fix carousel caption heading colors

  • Review changes

  • Download
  • Email patches
  • Plain diff
Closed Julien Déramond requested to merge main-jd-fix-carousel-captions-heading into main 2 years ago
  • Overview 2
  • Commits 1
  • Pipelines 0
  • Changes 2

Description

This PR suggests to set --bs-heading-color to black in dark mode or when .carousel-dark is used. TBH I'm not a big fan of this modification so far but headers have a color set by --bs-heading-color which has a bigger priority compared to .carousel-caption color. So I haven't found a more elegant way of doing it for now. Thoughts to improve this PR?

Motivation & Context

Color consistency between header and text colors within .carousel-caption.

Type of changes

  • Bug fix (non-breaking change which fixes an issue)

Checklist

  • I have read the contributing guidelines
  • My code follows the code style of the project (using npm run lint)
  • My change introduces changes to the documentation
  • I have updated the documentation accordingly
  • (NA) I have added tests to cover my changes
  • All new and existing tests passed

Live previews

Please check the following URLs in light and dark modes:

  • https://deploy-preview-37797--twbs-bootstrap.netlify.app/docs/5.3/components/carousel/#captions
  • https://deploy-preview-37797--twbs-bootstrap.netlify.app/docs/5.3/components/carousel/#dark-variant

Related issues

Closes #37795 (closed)

Compare
  • main (base)

and
  • latest version
    96c9ed06
    1 commit, 2 years ago

2 files
+ 3
- 1

    Preferences

    File browser
    Compare changes
sc‎ss‎
_carous‎el.scss‎ +2 -0
_variables‎-dark.scss‎ +1 -1
scss/_carousel.scss
+ 2
- 0
  • View file @ 96c9ed06


@@ -211,6 +211,8 @@
// Dark mode carousel
@mixin carousel-dark() {
--#{$prefix}heading-color: $black;
.carousel-control-prev-icon,
.carousel-control-next-icon {
filter: $carousel-dark-control-icon-filter;
scss/_variables-dark.scss
+ 1
- 1
  • View file @ 96c9ed06


@@ -44,7 +44,7 @@ $body-tertiary-bg-dark: mix($gray-800, $gray-900, 50%) !default;
$emphasis-color-dark: $white !default;
$border-color-dark: $gray-700 !default;
$border-color-translucent-dark: rgba($white, .15) !default;
$headings-color-dark: #fff !default;
$headings-color-dark: $white !default;
$link-color-dark: $blue-300 !default;
$link-hover-color-dark: $blue-200 !default;
$code-color-dark: $pink-300 !default;
0 Assignees
None
Assign to
0 Reviewers
None
Request review from
Labels
3
color mode css v5
3
color mode css v5
    Assign labels
  • Manage project labels

Milestone
No milestone
None
None
Time tracking
No estimate or time spent
Lock merge request
Unlocked
3
3 participants
Julien Déramond
Mark Otto
Ghost User
Reference: twbs/bootstrap!37797
Source branch: main-jd-fix-carousel-captions-heading

Menu

Explore Projects Groups Snippets