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.

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

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

Merged
merged 2 commits into from Oct 2, 2022

Conversation

julien-deramond
Copy link
Member

@julien-deramond julien-deramond commented Oct 2, 2022

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

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
Labels
Projects
No open projects
Status: Done
Development

Successfully merging this pull request may close these issues.

Unable to use overriden $border-color variable in bootstrap overriden application styles
4 participants