Skip to content

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

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
Merged
mdo merged 2 commits into from
Oct 2, 2022
Merged

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

mdo 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

@mdo mdo mdo approved these changes

@patrickhlauke patrickhlauke patrickhlauke 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

5 participants

@julien-deramond @mdo @patrickhlauke @XhmikosR