Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Don't redefine $border-color in table-variant mixin #37239

Merged
merged 2 commits into from
Oct 2, 2022
Merged

Don't redefine $border-color in table-variant mixin #37239

merged 2 commits into from
Oct 2, 2022

Conversation

julien-deramond
Copy link
Member

@julien-deramond julien-deramond commented Oct 2, 2022 •
edited
Loading

Related issues

Closes #37225

Description

Avoid redefining $border-color in table-variant mixin.

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)
  • All new and existing tests passed

Live previews

How to test locally

  • Create a local project thanks to our Vite guide
  • Change the content of styles.scss by:
html.light {
  $border-color: #dbe6ee;

  @debug ('light border color before bootstrap #{$border-color}');
  @import '~bootstrap/scss/bootstrap';
  @debug ('light border color after bootstrap #{$border-color}');

  .side-menu {
    border: 1px solid $border-color;
  }
}

html.dark {
  $border-color: #313131;

  @debug ('dark border color before bootstrap #{$border-color}');
  @import '~bootstrap/scss/bootstrap';
  @debug ('dark border color after bootstrap #{$border-color}');

  .side-menu {
    border: 1px solid $border-color;
  }
}
  • Change the content of src/index.html by:
<!DOCTYPE html>
<html class="dark" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Bootstrap w/ Vite</title>
    <link rel="stylesheet" href="scss/styles.scss" />
    <script type="module" src="./js/main.js"></script>
  </head>
  <body>
    <div class="side-menu">test</div>

    <table class="table mt-5">
      <thead>
        <tr>
          <th scope="col">#</th>
          <th scope="col">First</th>
          <th scope="col">Last</th>
          <th scope="col">Handle</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Mark</td>
          <td>Otto</td>
          <td>@mdo</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td colspan="2">Larry the Bird</td>
          <td>@twitter</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>
  • Modify node_modules/bootstrap/scss/mixins/_table-variants.scss to apply the modification in this PR
  • Expected: right overriden color when html.dark and html.light when .side-menu is used

@julien-deramond julien-deramond marked this pull request as ready for review October 2, 2022 08:29
@julien-deramond julien-deramond requested a review from a team as a code owner October 2, 2022 08:29
@julien-deramond julien-deramond mentioned this pull request Oct 2, 2022
Closed
3 tasks
@julien-deramond julien-deramond requested a review from mdo October 2, 2022 08:32
mdo
mdo approved these changes Oct 2, 2022
View reviewed changes
Copy link
Member

@mdo mdo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Great catch, thanks!

@mdo mdo merged commit 9edfed8 into main Oct 2, 2022
@mdo mdo deleted the main-jd-fix-table-variant-mixin branch October 2, 2022 14:33
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@patrickhlauke patrickhlauke patrickhlauke approved these changes

@mdo mdo mdo approved these changes

Assignees
No one assigned
Labels
css v5
Projects
No open projects
v5.2.2
Status: Done
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Unable to use overriden $border-color variable in bootstrap overriden application styles
4 participants
@julien-deramond @mdo @patrickhlauke @XhmikosR