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
- https://deploy-preview-37239--twbs-bootstrap.netlify.app/: check for non-regression in all of our tables
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
andhtml.light
when.side-menu
is used