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

Support Bootstrap 5.2 #25

Merged
merged 13 commits into from
Jul 26, 2022
Merged

Support Bootstrap 5.2 #25

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
253426f
chore(deps): install 5.2 beta
danielmatthew May 17, 2022
a90360a
fix: include new maps partial
danielmatthew May 17, 2022
c8875c9
fix: set btn-lg border-radius
danielmatthew May 18, 2022
003d589
fix: customise prefix variable
danielmatthew May 18, 2022
410c780
fix: style .active focus state
danielmatthew May 18, 2022
cc026e9
docs: add responsive table example
danielmatthew May 18, 2022
94ea9c0
chore: install bootstrap 5.2
danielmatthew Jul 26, 2022
d659a4f
docs: update readme
danielmatthew Jul 26, 2022
3573a9d
chore: generate styles
danielmatthew Jul 26, 2022
facee18
fix: update table partial
danielmatthew Jul 26, 2022
8a8c923
docs: use new table-group-divider
danielmatthew Jul 26, 2022
8c4e66a
chore: generate styles
danielmatthew Jul 26, 2022
7a4395f
Merge branch 'main' into test-5-2-beta
danielmatthew Jul 26, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,8 +25,11 @@ $enable-shadows: false;
@import "bootstrap/scss/functions"; // Required

@import "variables"; // Talis customisations are here

@import "bootstrap/scss/variables"; // Required

// Map overrides go here
@import "bootstrap/scss/maps"; // Required

@import "bootstrap/scss/mixins"; // Required
@import "bootstrap/scss/utilities"; // Required

Expand Down
8 changes: 4 additions & 4 deletions docs/assets/css/custom-full.css
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/assets/css/custom-full.css.map
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/assets/css/custom.css
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion docs/assets/css/custom.css.map
View file
Open in desktop

Large diffs are not rendered by default.

184 changes: 179 additions & 5 deletions docs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -515,8 +515,11 @@ <h3>XS</h3>
<button class="btn btn-xs btn-default" disabled>XS button</button>
<hr>



<h2>Tables</h2>
<table class="table table-striped">
<caption class="visually-hidden">An example caption</caption>
<thead>
<tr>
<th>#</th>
Expand All @@ -526,7 +529,7 @@ <h2>Tables</h2>
<th class="text-end">Actions</th>
</tr>
</thead>
<tbody>
<tbody class="table-group-divider">
<tr>
<td>1</td>
<td>
Expand All @@ -536,7 +539,7 @@ <h2>Tables</h2>
<td>Daniel Matthew</td>
<td>
<div class="text-end">
<button data-bs-toggle="dropdown" class="btn btn-action">
<button data-bs-toggle="dropdown" class="btn btn-lg btn-default">
<span class="visually-hidden">Actions</span>
<i class="far fa-ellipsis-v"></i>
</button>
Expand Down Expand Up @@ -565,7 +568,7 @@ <h2>Tables</h2>
<td>Daniel Matthew</td>
<td>
<div class="text-end">
<button data-bs-toggle="dropdown" class="btn btn-action">
<button data-bs-toggle="dropdown" class="btn btn-lg btn-default">
<span class="visually-hidden">Actions</span>
<i class="far fa-ellipsis-v"></i>
</button>
Expand All @@ -592,7 +595,7 @@ <h2>Tables</h2>
<td>Daniel Matthew</td>
<td>
<div class="text-end">
<button data-bs-toggle="dropdown" class="btn btn-action">
<button data-bs-toggle="dropdown" class="btn btn-lg btn-default">
<span class="visually-hidden">Actions</span>
<i class="far fa-ellipsis-v"></i>
</button>
Expand Down Expand Up @@ -621,7 +624,7 @@ <h2>Tables</h2>
<td>Daniel Matthew</td>
<td>
<div class="text-end">
<button data-bs-toggle="dropdown" class="btn btn-action">
<button data-bs-toggle="dropdown" class="btn btn-lg btn-default">
<span class="visually-hidden">Actions</span>
<i class="far fa-ellipsis-v"></i>
</button>
Expand All @@ -641,6 +644,177 @@ <h2>Tables</h2>
</tr>
</tbody>
</table>

<div class="table-responsive">
<table class="table table-striped table-responsive">
<thead>
<tr>
<th>#</th>
<th>Status</th>
<th>Course</th>
<th>Requester</th>
<th class="text-end">Actions</th>
</tr>
</thead>
<tbody class="table-group-divider">

<tr>
<td>1</td>
<td>
<span class="label label-default">Alpha</span>
</td>
<td>Mathematics</td>
<td>One</td>
<td>
<div class="text-end">
<button data-bs-toggle="dropdown" class="btn btn-lg btn-default">
<span class="visually-hidden">Actions</span>
<i class="far fa-ellipsis-v"></i>
</button>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">View details</a>
</li>
<li>
<a class="dropdown-item" href="#">Upload document</a>
</li>
<li>
<a class="dropdown-item" href="#"
>Edit & resubmit</a
>
</li>
</ul>
</div>
</td>
</tr>


<tr>
<td>2</td>
<td>
<span class="label label-default">Beta</span>
</td>
<td>Mathematics</td>
<td>Two</td>
<td>
<div class="text-end">
<button data-bs-toggle="dropdown" class="btn btn-lg btn-default">
<span class="visually-hidden">Actions</span>
<i class="far fa-ellipsis-v"></i>
</button>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">View details</a>
</li>
<li>
<a class="dropdown-item" href="#">Upload document</a>
</li>
<li>
<a class="dropdown-item" href="#"
>Edit & resubmit</a
>
</li>
</ul>
</div>
</td>
</tr>


<tr>
<td>3</td>
<td>
<span class="label label-default">Delta</span>
</td>
<td>Mathematics</td>
<td>Three</td>
<td>
<div class="text-end">
<button data-bs-toggle="dropdown" class="btn btn-lg btn-default">
<span class="visually-hidden">Actions</span>
<i class="far fa-ellipsis-v"></i>
</button>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">View details</a>
</li>
<li>
<a class="dropdown-item" href="#">Upload document</a>
</li>
<li>
<a class="dropdown-item" href="#"
>Edit & resubmit</a
>
</li>
</ul>
</div>
</td>
</tr>


<tr>
<td>4</td>
<td>
<span class="label label-default">Epsilon</span>
</td>
<td>Mathematics</td>
<td>Four</td>
<td>
<div class="text-end">
<button data-bs-toggle="dropdown" class="btn btn-lg btn-default">
<span class="visually-hidden">Actions</span>
<i class="far fa-ellipsis-v"></i>
</button>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">View details</a>
</li>
<li>
<a class="dropdown-item" href="#">Upload document</a>
</li>
<li>
<a class="dropdown-item" href="#"
>Edit & resubmit</a
>
</li>
</ul>
</div>
</td>
</tr>


<tr>
<td>5</td>
<td>
<span class="label label-default">Gamma</span>
</td>
<td>Mathematics</td>
<td>Five</td>
<td>
<div class="text-end">
<button data-bs-toggle="dropdown" class="btn btn-lg btn-default">
<span class="visually-hidden">Actions</span>
<i class="far fa-ellipsis-v"></i>
</button>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">View details</a>
</li>
<li>
<a class="dropdown-item" href="#">Upload document</a>
</li>
<li>
<a class="dropdown-item" href="#"
>Edit & resubmit</a
>
</li>
</ul>
</div>
</td>
</tr>

</tbody>
</table>
</div>
<hr>

<h2>Forms</h2>
Expand Down
30 changes: 18 additions & 12 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@
"prepare": "husky install"
},
"peerDependencies": {
"bootstrap": "^5.1.3",
"bootstrap": "5.2.0",
"popper.js": "^1.16.1"
},
"devDependencies": {
Expand Down
4 changes: 3 additions & 1 deletion scss/_buttons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,9 @@
background-color: $gray-200;
}

&:active {
&:active,
&.active,
&.show {
&:focus {
box-shadow: 0 0 0 $btn-focus-width $accent;
}
Expand Down
9 changes: 0 additions & 9 deletions scss/_tables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,3 @@
.table > :not(:first-child) {
border-top: none;
}

// Temp override while we wait for https://github.com/twbs/bootstrap/pull/35200 to end up in live
.table > :not(caption):not(colgroup) + * {
border-top: (2 * $table-border-width) solid $table-group-separator-color !important;
}

th,
.o-table__sort-btn {
color: $black;
Expand Down
5 changes: 4 additions & 1 deletion scss/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@ $enable-gradients: false;
$enable-shadows: false;
$enable-rounded: true;

$prefix: talis-;

$gray-100: #f8f9fa;
$gray-200: #e9ecef;
$gray-300: #dee2e6;
Expand Down Expand Up @@ -67,7 +69,8 @@ $border-widths: (
5: 5px,
);

$border-radius: 3px;
$border-radius: .1875rem;
$border-radius-lg: .3125rem;

$spacer: .9375rem;

Expand Down
1 change: 1 addition & 0 deletions scss/custom.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ $enable-shadows: false;
@import "variables";

@import "bootstrap/scss/variables";
@import "bootstrap/scss/maps";
@import "bootstrap/scss/mixins";
@import "bootstrap/scss/utilities";

Expand Down
31 changes: 31 additions & 0 deletions src/docs/_includes/macros/tables.njk
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
{% macro tableRow( id = '1', data = { label: 'default'}) %}
<tr>
<td>{{ id }}</td>
<td>
<span class="label label-default">{{ data.label }}</span>
</td>
<td>{{ data.subject }}</td>
<td>{{ data.student }}</td>
<td>
<div class="text-end">
<button data-bs-toggle="dropdown" class="btn btn-lg btn-default">
<span class="visually-hidden">Actions</span>
<i class="far fa-ellipsis-v"></i>
</button>
<ul class="dropdown-menu">
<li>
<a class="dropdown-item" href="#">View details</a>
</li>
<li>
<a class="dropdown-item" href="#">Upload document</a>
</li>
<li>
<a class="dropdown-item" href="#"
>Edit & resubmit</a
>
</li>
</ul>
</div>
</td>
</tr>
{% endmacro %}
Loading