Skip to content
GitLab

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

Merged Julien Déramond requested to merge main-jd-fix-table-variant-mixin into main

Related issues

Closes #37225 (closed)

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