8000 refactor: update Bootstrap to v5.3.3 · coreui/coreui@a5a63f4 · GitHub
[go: up one dir, main page]
Skip to content

Commit a5a63f4

Browse files
mrholekmrholek
committed
refactor: update Bootstrap to v5.3.3
1 parent ac95daa commit a5a63f4

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

48 files changed

+230
-99
lines changed

‎.eslintrc.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,7 @@
5151
"SwitchCase": 1
5252
}
5353
],
54+
"logical-assignment-operators": "off",
5455
"max-params": [
5556
"warn",
5657
5
@@ -75,6 +76,7 @@
7576
"error",
7677
"after"
7778
],
79+
"prefer-object-has-own": "off",
7880
"prefer-template": "error",
7981
"semi": [
8082
"error",

‎.github/workflows/bundlewatch.yml

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ on:
99

1010
env:
1111
FORCE_COLOR: 2
12-
NODE: 18
12+
NODE: 20
1313

1414
permissions:
1515
contents: read
@@ -25,7 +25,7 @@ jobs:
2525
persist-credentials: false
2626

2727
- name: Set up Node.js
28-
uses: actions/setup-node@v3
28+
uses: actions/setup-node@v4
2929
with:
3030
node-version: "${{ env.NODE }}"
3131
cache: npm

‎.github/workflows/codeql.yml

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -29,16 +29,16 @@ jobs:
2929
persist-credentials: false
3030

3131
- name: Initialize CodeQL
32-
uses: github/codeql-action/init@v2
32+
uses: github/codeql-action/init@v3
3333
with:
3434
config-file: ./.github/codeql/codeql-config.yml
3535
languages: "javascript"
3636
queries: +security-and-quality
3737

3838
- name: Autobuild
39-
uses: github/codeql-action/autobuild@v2
39+
uses: github/codeql-action/autobuild@v3
4040

4141
- name: Perform CodeQL Analysis
42-
uses: github/codeql-action/analyze@v2
42+
uses: github/codeql-action/analyze@v3
4343
with:
4444
category: "/language:javascript"
EED3

‎.github/workflows/css.yml

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ on:
99

1010
env:
1111
FORCE_COLOR: 2
12-
NODE: 18
12+
NODE: 20
1313

1414
permissions:
1515
contents: read
@@ -25,7 +25,7 @@ jobs:
2525
persist-credentials: false
2626

2727
- name: Set up Node.js
28-
uses: actions/setup-node@v3
28+
uses: actions/setup-node@v4
2929
with:
3030
node-version: "${{ env.NODE }}"
3131
cache: npm

‎.github/workflows/docs.yml

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ on:
99

1010
env:
1111
FORCE_COLOR: 2
12-
NODE: 18
12+
NODE: 20
1313

1414
permissions:
1515
contents: read
@@ -25,7 +25,7 @@ jobs:
2525
persist-credentials: false
2626

2727
- name: Set up Node.js
28-
uses: actions/setup-node@v3
28+
uses: actions/setup-node@v4
2929
with:
3030
node-version: "${{ env.NODE }}"
3131
cache: npm

‎.github/workflows/js.yml

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ on:
99

1010
env:
1111
FORCE_COLOR: 2
12-
NODE: 18
12+
NODE: 20
1313

1414
permissions:
1515
contents: read
@@ -30,7 +30,7 @@ jobs:
3030
persist-credentials: false
3131

3232
- name: Set up Node.js
33-
uses: actions/setup-node@v3
33+
uses: actions/setup-node@v4
3434
with:
3535
node-version: ${{ env.NODE }}
3636
cache: npm
@@ -46,6 +46,7 @@ jobs:
4646

4747
- name: Run Coveralls
4848
uses: coverallsapp/github-action@v2
49+
if: ${{ !github.event.repository.fork }}
4950
with:
5051
github-token: "${{ secrets.GITHUB_TOKEN }}"
5152
path-to-lcov: "./js/coverage/lcov.info"

‎.github/workflows/lint.yml

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ on:
99

1010
env:
1111
FORCE_COLOR: 2
12-
NODE: 18
12+
NODE: 20
1313

1414
permissions:
1515
contents: read
@@ -25,7 +25,7 @@ jobs:
2525
persist-credentials: false
2626

2727
- name: Set up Node.js
28-
uses: actions/setup-node@v3
28+
uses: actions/setup-node@v4
2929
with:
3030
node-version: "${{ env.NODE }}"
3131
cache: npm

‎.github/workflows/node-sass.yml

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ on:
99

1010
env:
1111
FORCE_COLOR: 2
12-
NODE: 18
12+
NODE: 20
1313

1414
permissions:
1515
contents: read
@@ -25,7 +25,7 @@ jobs:
2525
persist-credentials: false
2626

2727
- name: Set up Node.js
28-
uses: actions/setup-node@v3
28+
uses: actions/setup-node@v4
2929
with:
3030
node-version: "${{ env.NODE }}"
3131

‎build/build-plugins.mjs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
/*!
44
* Script to build our plugins to use them separately.
5-
* Copyright 2020-2023 The Bootstrap Authors
5+
* Copyright 2020-2024 The Bootstrap Authors
66
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
77
*/
88

‎build/change-version.mjs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
/*!
44
* Script to update version number references in the project.
5-
* Copyright 2017-2023 The Bootstrap Authors
5+
* Copyright 2017-2024 The Bootstrap Authors
66
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
77
*/
88

‎build/generate-sri.mjs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
* Remember to use the same vendor files as the CDN ones,
66
* otherwise the hashes won't match!
77
*
8-
* Copyright 2017-2023 The Bootstrap Authors
8+
* Copyright 2017-2024 The Bootstrap Authors
99
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
1010
*/
1111

‎build/vnu-jar.mjs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
/*!
44
* Script to run vnu-jar if Java is available.
5-
* Copyright 2017-2023 The Bootstrap Authors
5+
* Copyright 2017-2024 The Bootstrap Authors
66
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
77
*/
88

‎docs/content/components/accordion.md

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,16 +13,18 @@ other_frameworks: accordion
1313

1414
## How it works
1515

16-
The accordion uses [collapse]({{< docsref "/components/collapse" >}}) internally to make it collapsible. To render an accordion that's expanded, add the `.open` class on the `.accordion`.
16+
The accordion uses [collapse]({{< docsref "/components/collapse" >}}) internally to make it collapsible.
1717

1818
{{< callout info >}}
1919
{{< partial "callouts/info-prefersreducedmotion.md" >}}
2020
{{< /callout >}}
2121

22-
## Example
23-
2422
Click the accordions below to expand/collapse the accordion content.
2523

24+
To render an accordion that's expanded by default:
25+
- add the `.show` class on the `.accordion-collapse` element.
26+
- drop the `.collapsed` class from the `.accordion-button` element and set its `aria-expanded` attribute to `true`.
27+
2628
{{< example >}}
2729
<div class="accordion" id="accordionExample">
2830
<div class="accordion-item">

‎docs/content/components/badge.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -18,12 +18,12 @@ Bootstrap badge scale to suit the size of the parent element by using relative f
1818
### Headings
1919

2020
{{< example >}}
21-
<h1>Example heading <span class="badge bg-secondary">New</span></h1>
22-
<h2>Example heading <span class="badge bg-secondary">New</span></h2>
23-
<h3>Example heading <span class="badge bg-secondary">New</span></h3>
24-
<h4>Example heading <span class="badge bg-secondary">New</span></h4>
25-
<h5>Example heading <span class="badge bg-secondary">New</span></h5>
26-
<h6>Example heading <span class="badge bg-secondary">New</span></h6>
21+
<h1>Example heading <span class="badge text-bg-secondary">New</span></h1>
22+
<h2>Example heading <span class="badge text-bg-secondary">New</span></h2>
23+
<h3>Example heading <span class="badge text-bg-secondary">New</span></h3>
24+
<h4>Example heading <span class="badge text-bg-secondary">New</span></h4>
25+
<h5>Example heading <span class="badge text-bg-secondary">New</span></h5>
26+
<h6>Example heading <span class="badge text-bg-secondary">New</span></h6>
2727
{{< /example >}}
2828

2929
### Buttons

‎docs/content/components/card.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@ Subtitles are managed by adding a `.card-subtitle` to a `<h*>` tag. If the `.car
6969

7070
### Images
7171

72-
`.card-img-top` places a picture to the top of the card. With `.card-text`, text can be added to the card. Text within `.card-text` can additionally be styled with the regular HTML tags.
72+
`.card-img-top` and `.card-img-bottom` respectively set the top and bottom corners rounded to match the card's borders. Text within `.card-text` can additionally be styled with the regular HTML tags.
7373

7474
{{< example >}}
7575
<div class="card" style="width: 18rem;">

‎docs/content/components/list-group.md

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -122,21 +122,21 @@ These work great with custom content as well.
122122
<div class="fw-bold">Subheading</div>
123123
Content for list item
124124
</div>
125-
<span class="badge bg-primary rounded-pill">14</span>
125+
<span class="badge text-bg-primary rounded-pill">14</span>
126126
</li>
127127
<li class="list-group-item d-flex justify-content-between align-items-start">
128128
<div class="ms-2 me-auto">
129129
<div class="fw-bold">Subheading</div>
130130
Content for list item
131131
</div>
132-
<span class="badge bg-primary rounded-pill">14</span>
741A 132+
<span class="badge text-bg-primary rounded-pill">14</span>
133133
</li>
134134
<li class="list-group-item d-flex justify-content-between align-items-start">
135135
<div class="ms-2 me-auto">
136136
<div class="fw-bold">Subheading</div>
137137
Content for list item
138138
</div>
139-
<span class="badge bg-primary rounded-pill">14</span>
139+
<span class="badge text-bg-primary rounded-pill">14</span>
140140
</li>
141141
</ol>
142142
{{< /example >}}
@@ -199,15 +199,15 @@ Add badges to any list group item to show unread counts, activity, and more with
199199
<ul class="list-group">
200200
<li class="list-group-item d-flex justify-content-between align-items-center">
201201
A list item
202-
<span class="badge bg-primary rounded-pill">14</span>
202+
<span class="badge text-bg-primary rounded-pill">14</span>
203203
</li>
204204
<li class="list-group-item d-flex justify-content-between align-items-center">
205205
A second list item
206-
<span class="badge bg-primary rounded-pill">2</span>
206+
<span class="badge text-bg-primary rounded-pill">2</span>
207207
</li>
208208
<li class="list-group-item d-flex justify-content-between align-items-center">
209209
A third list item
210-
<span class="badge bg-primary rounded-pill">1</span>
210+
<span class="badge text-bg-primary rounded-pill">1</span>
211211
</li>
212212
</ul>
213213
{{< /example >}}

‎docs/content/customize/sass.md

Lines changed: 28 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,25 @@ npm install -g sass
9696
sass --watch ./scss/custom.scss ./css/custom.css
9797
```
9898

99+
## Including
100+
101+
Once your CSS is compiled, you can include it in your HTML files. Inside your `index.html` you'll want to include your compiled CSS file. Be sure to update the path to your compiled CSS file if you've changed it.
102+
103+
```html
104+
<!doctype html>
105+
<html lang="en">
106+
<head>
107+
<meta charset="utf-8">
108+
<meta name="viewport" content="width=device-width, initial-scale=1">
109+
<title>Custom CoreUI for Bootstrap</title>
110+
<link href="/css/custom.css" rel="stylesheet">
111+
</head>
112+
<body>
113+
<h1>Hello, world!</h1>
114+
</body>
115+
</html>
116+
```
117+
99118
## Variable defaults
100119

101120
Every Sass variable in CoreUI for Bootstrap includes the `!default` flag allowing you to override the variable's default value in your own Sass without modifying CoreUI for Bootstrap's source code. Copy and paste variables as needed, modify their values, and remove the `!default` flag. If a variable has already been assigned, then it won't be re-assigned by the default values in Bootstrap.
@@ -219,6 +238,11 @@ In practice, you'd call the function and pass in the color and weight parameters
219238
.custom-element-2 {
220239
color: shade-color($danger, 30%);
221240
}
241+
242+
.custom-element-3 {
243+
color: shift-color($success, 40%);
244+
background-color: shift-color($success, -60%);
245+
}
222246
```
223247

224248
### Color contrast
@@ -307,12 +331,12 @@ A shorthand mixin for the `prefers-color-scheme` media query is available with s
307331

308332
```scss
309333
.custom-element {
310-
@include color-scheme(dark) {
311-
// Insert dark mode styles here
334+
@include color-scheme(light) {
335+
// Insert light mode styles here
312336
}
313337

314-
@include color-scheme(custom-named-scheme) {
315-
// Insert custom color scheme styles here
338+
@include color-scheme(dark) {
339+
// Insert dark mode styles here
316340
}
317341
}
318342
```

‎docs/content/getting-started/vite.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -71,10 +71,10 @@ With dependencies installed and our project folder ready for us to start coding,
7171

7272
<!-- eslint-skip -->
7373
```js
74-
const path = require('path')
74+
import { resolve } from 'path'
7575

7676
export default {
77-
root: path.resolve(__dirname, 'src'),
77+
root: resolve(__dirname, 'src'),
7878
server: {
7979
port: 8080
8080
}
@@ -130,13 +130,13 @@ In the next and final section to this guide, we’ll import all of CoreUI’s CS
130130

131131
<!-- eslint-skip -->
132132
```js
133-
const path = require('path')
133+
import { resolve } from 'path'
134134

135135
export default {
136136
root: path.resolve(__dirname, 'src'),
137137
resolve: {
138138
alias: {
139-
'~coreui': path.resolve(__dirname, 'node_modules/@coreui/coreui'),
139+
'~coreui': resolve(__dirname, 'node_modules/@coreui/coreui'),
140140
}
141141
},
142142
server: {

‎docs/content/utilities/api.md

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,11 @@ layout: docs
33
title: Utility API
44
description: The utility API is a Sass-based tool to generate utility classes.
55
group: utilities
6-
aliases: "/4.1/utilities/"
6+
aliases:
7+
- "/utilities/"
8+
- "/4.0/utilities/api/"
9+
- "/4.0/utilities/"
10+
- "/4.1/utilities/"
711
toc: true
812
---
913

‎docs/content/utilities/position.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ Here are some real life examples of these classes:
9191

9292
{{< example class="docs-example-position-examples d-flex justify-content-around align-items-center" >}}
9393
<button type="button" class="btn btn-primary position-relative">
94-
Mails <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-secondary">+99 <span class="visually-hidden">unread messages</span></span>
94+
Mails <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill text-bg-secondary">+99 <span class="visually-hidden">unread messages</span></span>
9595
</button>
9696

9797
<div class="position-relative py-2 px-4 text-bg-secondary border border-secondary rounded-pill">

‎docs/content/utilities/text.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ Note that we don't provide utility classes for justified text. While, aesthetica
3232
Wrap text with a `.text-wrap` class.
3333

3434
{{< example >}}
35-
<div class="badge bg-primary text-wrap" style="width: 6rem;">
35+
<div class="badge text-bg-primary text-wrap" style="width: 6rem;">
3636
This text should wrap.
3737
</div>
3838
{{< /example >}}

0 commit comments

Comments
 (0)
0