├── .github
└── workflows
│ └── main.yml
├── .gitignore
├── Gemfile
├── LICENSE
├── _config.yml
├── _includes
├── alert.md
├── footer.md
├── head.html
├── header.md
└── nav.md
├── _layouts
├── page.html
└── redirect.html
├── _sass
├── bootstrap
│ ├── LICENSE
│ └── scss
│ │ ├── _accordion.scss
│ │ ├── _alert.scss
│ │ ├── _badge.scss
│ │ ├── _breadcrumb.scss
│ │ ├── _button-group.scss
│ │ ├── _buttons.scss
│ │ ├── _card.scss
│ │ ├── _carousel.scss
│ │ ├── _close.scss
│ │ ├── _containers.scss
│ │ ├── _dropdown.scss
│ │ ├── _forms.scss
│ │ ├── _functions.scss
│ │ ├── _grid.scss
│ │ ├── _helpers.scss
│ │ ├── _images.scss
│ │ ├── _list-group.scss
│ │ ├── _maps.scss
│ │ ├── _mixins.scss
│ │ ├── _modal.scss
│ │ ├── _nav.scss
│ │ ├── _navbar.scss
│ │ ├── _offcanvas.scss
│ │ ├── _pagination.scss
│ │ ├── _placeholders.scss
│ │ ├── _popover.scss
│ │ ├── _progress.scss
│ │ ├── _reboot.scss
│ │ ├── _root.scss
│ │ ├── _spinners.scss
│ │ ├── _tables.scss
│ │ ├── _toasts.scss
│ │ ├── _tooltip.scss
│ │ ├── _transitions.scss
│ │ ├── _type.scss
│ │ ├── _utilities.scss
│ │ ├── _variables-dark.scss
│ │ ├── _variables.scss
│ │ ├── bootstrap-grid.scss
│ │ ├── bootstrap-reboot.scss
│ │ ├── bootstrap-utilities.scss
│ │ ├── bootstrap.scss
│ │ ├── forms
│ │ ├── _floating-labels.scss
│ │ ├── _form-check.scss
│ │ ├── _form-control.scss
│ │ ├── _form-range.scss
│ │ ├── _form-select.scss
│ │ ├── _form-text.scss
│ │ ├── _input-group.scss
│ │ ├── _labels.scss
│ │ └── _validation.scss
│ │ ├── helpers
│ │ ├── _clearfix.scss
│ │ ├── _color-bg.scss
│ │ ├── _colored-links.scss
│ │ ├── _focus-ring.scss
│ │ ├── _icon-link.scss
│ │ ├── _position.scss
│ │ ├── _ratio.scss
│ │ ├── _stacks.scss
│ │ ├── _stretched-link.scss
│ │ ├── _text-truncation.scss
│ │ ├── _visually-hidden.scss
│ │ └── _vr.scss
│ │ ├── mixins
│ │ ├── _alert.scss
│ │ ├── _backdrop.scss
│ │ ├── _banner.scss
│ │ ├── _border-radius.scss
│ │ ├── _box-shadow.scss
│ │ ├── _breakpoints.scss
│ │ ├── _buttons.scss
│ │ ├── _caret.scss
│ │ ├── _clearfix.scss
│ │ ├── _color-mode.scss
│ │ ├── _color-scheme.scss
│ │ ├── _container.scss
│ │ ├── _deprecate.scss
│ │ ├── _forms.scss
│ │ ├── _gradients.scss
│ │ ├── _grid.scss
│ │ ├── _image.scss
│ │ ├── _list-group.scss
│ │ ├── _lists.scss
│ │ ├── _pagination.scss
│ │ ├── _reset-text.scss
│ │ ├── _resize.scss
│ │ ├── _table-variants.scss
│ │ ├── _text-truncate.scss
│ │ ├── _transition.scss
│ │ ├── _utilities.scss
│ │ └── _visually-hidden.scss
│ │ ├── utilities
│ │ └── _api.scss
│ │ └── vendor
│ │ └── _rfs.scss
├── default.scss
├── github-dark.scss
├── jekyll-theme-cs50.scss
└── page.scss
├── assets
├── @fortawesome
│ └── fontawesome-free
│ │ ├── css
│ │ └── all.min.css
│ │ └── webfonts
│ │ ├── fa-brands-400.woff2
│ │ ├── fa-regular-400.woff2
│ │ ├── fa-solid-900.woff2
│ │ └── fa-v4compatibility.woff2
├── @iframe-resizer
│ └── parent
│ │ ├── LICENSE
│ │ └── index.umd.js
├── @mathjax
│ └── mathjax-newcm-font
│ │ └── chtml
│ │ ├── dynamic
│ │ ├── PUA.js
│ │ ├── accents-b-i.js
│ │ ├── accents.js
│ │ ├── arabic.js
│ │ ├── arrows.js
│ │ ├── braille-d.js
│ │ ├── braille.js
│ │ ├── calligraphic.js
│ │ ├── cherokee.js
│ │ ├── cyrillic-ss.js
│ │ ├── cyrillic.js
│ │ ├── devanagari.js
│ │ ├── double-struck.js
│ │ ├── fraktur.js
│ │ ├── greek-ss.js
│ │ ├── greek.js
│ │ ├── hebrew.js
│ │ ├── latin-b.js
│ │ ├── latin-bi.js
│ │ ├── latin-i.js
│ │ ├── latin.js
│ │ ├── marrows.js
│ │ ├── math.js
│ │ ├── monospace-ex.js
│ │ ├── monospace-l.js
│ │ ├── monospace.js
│ │ ├── mshapes.js
│ │ ├── phonetics-ss.js
│ │ ├── phonetics.js
│ │ ├── sans-serif-b.js
│ │ ├── sans-serif-bi.js
│ │ ├── sans-serif-ex.js
│ │ ├── sans-serif-i.js
│ │ ├── sans-serif-r.js
│ │ ├── sans-serif.js
│ │ ├── script.js
│ │ ├── shapes.js
│ │ ├── symbols-b-i.js
│ │ ├── symbols.js
│ │ └── variants.js
│ │ └── woff2
│ │ ├── mjx-ncm-ab.woff2
│ │ ├── mjx-ncm-abi.woff2
│ │ ├── mjx-ncm-ai.woff2
│ │ ├── mjx-ncm-ar.woff2
│ │ ├── mjx-ncm-arl.woff2
│ │ ├── mjx-ncm-b.woff2
│ │ ├── mjx-ncm-be.woff2
│ │ ├── mjx-ncm-bi.woff2
│ │ ├── mjx-ncm-br.woff2
│ │ ├── mjx-ncm-brd.woff2
│ │ ├── mjx-ncm-brk.woff2
│ │ ├── mjx-ncm-c.woff2
│ │ ├── mjx-ncm-cb.woff2
│ │ ├── mjx-ncm-ch.woff2
│ │ ├── mjx-ncm-chb.woff2
│ │ ├── mjx-ncm-chbi.woff2
│ │ ├── mjx-ncm-chi.woff2
│ │ ├── mjx-ncm-cy.woff2
│ │ ├── mjx-ncm-cyb.woff2
│ │ ├── mjx-ncm-cybi.woff2
│ │ ├── mjx-ncm-cyi.woff2
│ │ ├── mjx-ncm-cyss.woff2
│ │ ├── mjx-ncm-cyssb.woff2
│ │ ├── mjx-ncm-cyssbi.woff2
│ │ ├── mjx-ncm-cyssi.woff2
│ │ ├── mjx-ncm-ds.woff2
│ │ ├── mjx-ncm-dv.woff2
│ │ ├── mjx-ncm-em.woff2
│ │ ├── mjx-ncm-f.woff2
│ │ ├── mjx-ncm-fb.woff2
│ │ ├── mjx-ncm-gk.woff2
│ │ ├── mjx-ncm-gkb.woff2
│ │ ├── mjx-ncm-gkbi.woff2
│ │ ├── mjx-ncm-gki.woff2
│ │ ├── mjx-ncm-gkss.woff2
│ │ ├── mjx-ncm-gkssb.woff2
│ │ ├── mjx-ncm-gkssbi.woff2
│ │ ├── mjx-ncm-gkssi.woff2
│ │ ├── mjx-ncm-he.woff2
│ │ ├── mjx-ncm-heb.woff2
│ │ ├── mjx-ncm-hebi.woff2
│ │ ├── mjx-ncm-hei.woff2
│ │ ├── mjx-ncm-i.woff2
│ │ ├── mjx-ncm-lb.woff2
│ │ ├── mjx-ncm-li.woff2
│ │ ├── mjx-ncm-lib.woff2
│ │ ├── mjx-ncm-lo.woff2
│ │ ├── mjx-ncm-lr.woff2
│ │ ├── mjx-ncm-lt.woff2
│ │ ├── mjx-ncm-m.woff2
│ │ ├── mjx-ncm-mar.woff2
│ │ ├── mjx-ncm-mi.woff2
│ │ ├── mjx-ncm-ml.woff2
│ │ ├── mjx-ncm-mm.woff2
│ │ ├── mjx-ncm-msh.woff2
│ │ ├── mjx-ncm-mx.woff2
│ │ ├── mjx-ncm-n.woff2
│ │ ├── mjx-ncm-ob.woff2
│ │ ├── mjx-ncm-os.woff2
│ │ ├── mjx-ncm-ph.woff2
│ │ ├── mjx-ncm-phb.woff2
│ │ ├── mjx-ncm-phbi.woff2
│ │ ├── mjx-ncm-phi.woff2
│ │ ├── mjx-ncm-phss.woff2
│ │ ├── mjx-ncm-phssb.woff2
│ │ ├── mjx-ncm-phssbi.woff2
│ │ ├── mjx-ncm-phssi.woff2
│ │ ├── mjx-ncm-pu.woff2
│ │ ├── mjx-ncm-pub.woff2
│ │ ├── mjx-ncm-pubi.woff2
│ │ ├── mjx-ncm-pui.woff2
│ │ ├── mjx-ncm-rb.woff2
│ │ ├── mjx-ncm-s.woff2
│ │ ├── mjx-ncm-s3.woff2
│ │ ├── mjx-ncm-s4.woff2
│ │ ├── mjx-ncm-s5.woff2
│ │ ├── mjx-ncm-s6.woff2
│ │ ├── mjx-ncm-s7.woff2
│ │ ├── mjx-ncm-sb.woff2
│ │ ├── mjx-ncm-sh.woff2
│ │ ├── mjx-ncm-shb.woff2
│ │ ├── mjx-ncm-shbi.woff2
│ │ ├── mjx-ncm-shi.woff2
│ │ ├── mjx-ncm-so.woff2
│ │ ├── mjx-ncm-ss.woff2
│ │ ├── mjx-ncm-ssb.woff2
│ │ ├── mjx-ncm-ssbi.woff2
│ │ ├── mjx-ncm-ssbix.woff2
│ │ ├── mjx-ncm-ssbx.woff2
│ │ ├── mjx-ncm-ssi.woff2
│ │ ├── mjx-ncm-ssix.woff2
│ │ ├── mjx-ncm-sslb.woff2
│ │ ├── mjx-ncm-ssli.woff2
│ │ ├── mjx-ncm-sslib.woff2
│ │ ├── mjx-ncm-sslr.woff2
│ │ ├── mjx-ncm-ssx.woff2
│ │ ├── mjx-ncm-sy.woff2
│ │ ├── mjx-ncm-syb.woff2
│ │ ├── mjx-ncm-sybi.woff2
│ │ ├── mjx-ncm-syi.woff2
│ │ ├── mjx-ncm-u.woff2
│ │ ├── mjx-ncm-ue.woff2
│ │ ├── mjx-ncm-v.woff2
│ │ ├── mjx-ncm-vx.woff2
│ │ └── mjx-ncm-zero.woff2
├── @twemoji
│ └── api
│ │ ├── LICENSE
│ │ └── dist
│ │ └── twemoji.min.js
├── algolia-min.css
├── algoliasearch
│ └── dist
│ │ └── algoliasearch.umd.js
├── algoliasearchLite.min.js
├── bootstrap-table
│ ├── LICENSE
│ └── dist
│ │ ├── bootstrap-table.min.css
│ │ ├── bootstrap-table.min.js
│ │ └── extensions
│ │ └── mobile
│ │ └── bootstrap-table-mobile.min.js
├── bootstrap
│ ├── LICENSE
│ └── dist
│ │ └── js
│ │ ├── bootstrap.bundle.min.js
│ │ └── bootstrap.bundle.min.js.map
├── instantsearch.js
│ ├── LICENSE
│ └── dist
│ │ ├── instantsearch.production.min.js
│ │ └── instantsearch.production.min.js.map
├── instantsearch.production.min.js
├── intersection-observer
│ ├── intersection-observer.js
│ └── package.json
├── jekyll-theme-cs50.js
├── jquery
│ ├── LICENSE.txt
│ └── dist
│ │ └── jquery.min.js
├── luxon
│ ├── LICENSE.md
│ └── build
│ │ └── global
│ │ └── luxon.min.js
├── mathjax
│ ├── LICENSE
│ ├── sre
│ │ ├── mathmaps
│ │ │ ├── af.json
│ │ │ ├── base.json
│ │ │ ├── ca.json
│ │ │ ├── da.json
│ │ │ ├── de.json
│ │ │ ├── en.json
│ │ │ ├── es.json
│ │ │ ├── euro.json
│ │ │ ├── fr.json
│ │ │ ├── hi.json
│ │ │ ├── it.json
│ │ │ ├── ko.json
│ │ │ ├── nb.json
│ │ │ ├── nemeth.json
│ │ │ ├── nn.json
│ │ │ └── sv.json
│ │ └── speech-worker.js
│ └── tex-mml-chtml.js
├── mermaid
│ ├── dist
│ │ └── mermaid.min.js
│ └── package.json
├── page.js
├── page.scss
├── popper.js
│ └── dist
│ │ └── umd
│ │ └── popper.min.js
├── reset-min.css
├── scratchblocks.min.js
├── scratchblocks.min.js.map
└── vanilla-lazyload
│ ├── LICENSE
│ └── dist
│ └── lazyload.min.js
├── jekyll-theme-cs50.gemspec
├── lib
├── jekyll-theme-cs50.rb
├── jekyll-theme-cs50
│ └── constants.rb
└── liquid-tag-parser.rb
├── package-lock.json
└── package.json
/.github/workflows/main.yml:
--------------------------------------------------------------------------------
1 | on: push
2 | jobs:
3 | deploy:
4 | runs-on: ubuntu-latest
5 | steps:
6 | - name: Re-deploy dependents
7 | if: ${{ github.ref == 'refs/heads/develop' }}
8 | uses: actions/github-script@v7
9 | with:
10 | github-token: ${{ secrets.DEPLOY50_PAT }}
11 | script: |
12 | const dependents = [
13 | ['ai', '2024/x'],
14 | ['ai', '2025/fall'],
15 | ['ap', '2024'],
16 | ['business', '2017/x'],
17 | ['business', '2025/fall'],
18 | ['cs50.tf', 'main'],
19 | ['cybersecurity', '2023/x'],
20 | ['cybersecurity', '2025/fall'],
21 | ['games', '2018/x'],
22 | ['harvard', '2025/x'],
23 | ['harvard', '2025/fall'],
24 | ['hbap.io', 'main'],
25 | ['hls', '2025/winter'],
26 | ['law', '2019/x'],
27 | ['mobile', '2018/x'],
28 | ['oxford', '2025/michaelmas'],
29 | ['python', '2022/x'],
30 | ['r', '2024/x'],
31 | ['r', '2025/fall'],
32 | ['scratch', '2024/x'],
33 | ['sql', '2024/x'],
34 | ['sql', '2025/fall'],
35 | ['technology', '2017/x'],
36 | ['web', '2020/x'],
37 | ['web', '2025/fall']
38 | ];
39 | for (let dependent of dependents) {
40 | await github.rest.actions.createWorkflowDispatch({
41 | owner: 'cs50',
42 | repo: dependent[0],
43 | workflow_id: 'main.yml',
44 | ref: dependent[1]
45 | });
46 | }
47 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .*
2 | !/.github/
3 | !.gitignore
4 |
5 | *.gem
6 |
7 | # https://yehudakatz.com/2010/12/16/clarifying-the-roles-of-the-gemspec-and-gemfile/
8 | Gemfile.lock
9 |
10 | _sass/bootstrap/*
11 | !_sass/bootstrap/LICENSE
12 | !_sass/bootstrap/scss/
13 |
14 | _sass/primer-markdown/*
15 | !_sass/primer-markdown/LICENSE
16 | !_sass/primer-markdown/build/
17 | _sass/primer-markdown/build/*
18 | !_sass/primer-markdown/build/build.scss
19 |
20 | _site/
21 |
22 | assets/algoliasearch/*
23 | !assets/algoliasearch/dist/
24 | assets/algoliasearch/dist/*
25 | !assets/algoliasearch/dist/algoliasearch.umd.js
26 |
27 | assets/bootstrap/*
28 | !assets/bootstrap/LICENSE
29 | !assets/bootstrap/dist/
30 | assets/bootstrap/dist/*
31 | !assets/bootstrap/dist/js/
32 | assets/bootstrap/dist/js/*
33 | !assets/bootstrap/dist/js/bootstrap.bundle.min.js
34 | !assets/bootstrap/dist/js/bootstrap.bundle.min.js.map
35 |
36 | assets/bootstrap-table/*
37 | !assets/bootstrap-table/LICENSE
38 | !assets/bootstrap-table/dist/
39 | assets/bootstrap-table/dist/*
40 | !assets/bootstrap-table/dist/bootstrap-table.min.css
41 | !assets/bootstrap-table/dist/bootstrap-table.min.js
42 | !assets/bootstrap-table/dist/extensions/
43 | assets/bootstrap-table/dist/extensions/*
44 | !assets/bootstrap-table/dist/extensions/mobile/
45 | assets/bootstrap-table/dist/extensions/mobile/*
46 | !assets/bootstrap-table/dist/extensions/mobile/bootstrap-table-mobile.min.js
47 |
48 | assets/@fortawesome/*
49 | !assets/@fortawesome/fontawesome-free/
50 | assets/@fortawesome/fontawesome-free/*
51 | !assets/@fortawesome/fontawesome-free/css/
52 | assets/@fortawesome/fontawesome-free/css/*
53 | !assets/@fortawesome/fontawesome-free/css/all.min.css
54 | !assets/@fortawesome/fontawesome-free/webfonts/
55 |
56 | assets/@iframe-resizer/*
57 | !assets/@iframe-resizer/parent/
58 | assets/@iframe-resizer/parent/*
59 | !assets/@iframe-resizer/parent/index.umd.js
60 | !assets/@iframe-resizer/parent/LICENSE
61 |
62 | assets/instantsearch.js/*
63 | !assets/instantsearch.js/LICENSE
64 | !assets/instantsearch.js/dist/
65 | assets/instantsearch.js/dist/*
66 | !assets/instantsearch.js/dist/instantsearch.production.min.js
67 | !assets/instantsearch.js/dist/instantsearch.production.min.js.map
68 |
69 | assets/intersection-observer/*
70 | !assets/intersection-observer/intersection-observer.js
71 | !assets/intersection-observer/package.json
72 |
73 | assets/jquery/*
74 | !assets/jquery/LICENSE.txt
75 | !assets/jquery/dist/
76 | assets/jquery/dist/*
77 | !assets/jquery/dist/jquery.min.js
78 |
79 | assets/luxon/*
80 | !assets/luxon/LICENSE.md
81 | !assets/luxon/build/
82 | assets/luxon/build/*
83 | !assets/luxon/build/global/
84 | assets/luxon/build/global/*
85 | !assets/luxon/build/global/luxon.min.js
86 |
87 | assets/mathjax/*
88 | !assets/mathjax/LICENSE
89 | !assets/mathjax/tex-mml-chtml.js
90 | !assets/mathjax/sre/
91 | assets/mathjax/sre/*
92 | !assets/mathjax/sre/speech-worker.js
93 | !assets/mathjax/sre/mathmaps/
94 | assets/@mathjax/*
95 | !assets/@mathjax/mathjax-newcm-font/
96 | assets/@mathjax/mathjax-newcm-font/*
97 | !assets/@mathjax/mathjax-newcm-font/chtml/
98 | assets/@mathjax/mathjax-newcm-font/chtml/*
99 | !assets/@mathjax/mathjax-newcm-font/chtml/dynamic/
100 | !assets/@mathjax/mathjax-newcm-font/chtml/woff2/
101 |
102 | assets/mermaid/*
103 | !assets/mermaid/package.json
104 | !assets/mermaid/dist/
105 | assets/mermaid/dist/*
106 | !assets/mermaid/dist/mermaid.min.js
107 |
108 | assets/popper.js/*
109 | !assets/popper.js/dist/
110 | assets/popper.js/dist/*
111 | !assets/popper.js/dist/umd/
112 | assets/popper.js/dist/umd/*
113 | !assets/popper.js/dist/umd/popper.min.js
114 |
115 | assets/@twemoji/*
116 | !assets/@twemoji/api/
117 | assets/@twemoji/api/*
118 | !assets/@twemoji/api/LICENSE
119 | !assets/@twemoji/api/dist/
120 | assets/@twemoji/api/dist/*
121 | !assets/@twemoji/api/dist/twemoji.min.js
122 |
123 | assets/vanilla-lazyload/*
124 | !assets/vanilla-lazyload/LICENSE
125 | !assets/vanilla-lazyload/dist/
126 | assets/vanilla-lazyload/dist/*
127 | !assets/vanilla-lazyload/dist/lazyload.min.js
128 |
129 | node_modules/
130 |
--------------------------------------------------------------------------------
/Gemfile:
--------------------------------------------------------------------------------
1 | # frozen_string_literal: true
2 |
3 | source "https://rubygems.org"
4 | gemspec
5 |
--------------------------------------------------------------------------------
/_config.yml:
--------------------------------------------------------------------------------
1 | defaults:
2 | -
3 | scope:
4 | path: ""
5 | values:
6 | layout: "page"
7 |
8 | sass:
9 | load_paths:
10 | - _sass
11 | - _sass/node_modules
12 |
--------------------------------------------------------------------------------
/_includes/alert.md:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cs50/jekyll-theme-cs50/04ed1d3133f43664224db485c808fd2667e6f844/_includes/alert.md
--------------------------------------------------------------------------------
/_includes/footer.md:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cs50/jekyll-theme-cs50/04ed1d3133f43664224db485c808fd2667e6f844/_includes/footer.md
--------------------------------------------------------------------------------
/_includes/head.html:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cs50/jekyll-theme-cs50/04ed1d3133f43664224db485c808fd2667e6f844/_includes/head.html
--------------------------------------------------------------------------------
/_includes/header.md:
--------------------------------------------------------------------------------
1 | # [{{ site.cs50.title }}](/)
2 |
--------------------------------------------------------------------------------
/_includes/nav.md:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cs50/jekyll-theme-cs50/04ed1d3133f43664224db485c808fd2667e6f844/_includes/nav.md
--------------------------------------------------------------------------------
/_layouts/redirect.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 |
--------------------------------------------------------------------------------
/_sass/bootstrap/LICENSE:
--------------------------------------------------------------------------------
1 | The MIT License (MIT)
2 |
3 | Copyright (c) 2011-2025 The Bootstrap Authors
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.
22 |
--------------------------------------------------------------------------------
/_sass/bootstrap/scss/_alert.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Base styles
3 | //
4 |
5 | .alert {
6 | // scss-docs-start alert-css-vars
7 | --#{$prefix}alert-bg: transparent;
8 | --#{$prefix}alert-padding-x: #{$alert-padding-x};
9 | --#{$prefix}alert-padding-y: #{$alert-padding-y};
10 | --#{$prefix}alert-margin-bottom: #{$alert-margin-bottom};
11 | --#{$prefix}alert-color: inherit;
12 | --#{$prefix}alert-border-color: transparent;
13 | --#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color);
14 | --#{$prefix}alert-border-radius: #{$alert-border-radius};
15 | --#{$prefix}alert-link-color: inherit;
16 | // scss-docs-end alert-css-vars
17 |
18 | position: relative;
19 | padding: var(--#{$prefix}alert-padding-y) var(--#{$prefix}alert-padding-x);
20 | margin-bottom: var(--#{$prefix}alert-margin-bottom);
21 | color: var(--#{$prefix}alert-color);
22 | background-color: var(--#{$prefix}alert-bg);
23 | border: var(--#{$prefix}alert-border);
24 | @include border-radius(var(--#{$prefix}alert-border-radius));
25 | }
26 |
27 | // Headings for larger alerts
28 | .alert-heading {
29 | // Specified to prevent conflicts of changing $headings-color
30 | color: inherit;
31 | }
32 |
33 | // Provide class for links that match alerts
34 | .alert-link {
35 | font-weight: $alert-link-font-weight;
36 | color: var(--#{$prefix}alert-link-color);
37 | }
38 |
39 |
40 | // Dismissible alerts
41 | //
42 | // Expand the right padding and account for the close button's positioning.
43 |
44 | .alert-dismissible {
45 | padding-right: $alert-dismissible-padding-r;
46 |
47 | // Adjust close link position
48 | .btn-close {
49 | position: absolute;
50 | top: 0;
51 | right: 0;
52 | z-index: $stretched-link-z-index + 1;
53 | padding: $alert-padding-y * 1.25 $alert-padding-x;
54 | }
55 | }
56 |
57 |
58 | // scss-docs-start alert-modifiers
59 | // Generate contextual modifier classes for colorizing the alert
60 | @each $state in map-keys($theme-colors) {
61 | .alert-#{$state} {
62 | --#{$prefix}alert-color: var(--#{$prefix}#{$state}-text-emphasis);
63 | --#{$prefix}alert-bg: var(--#{$prefix}#{$state}-bg-subtle);
64 | --#{$prefix}alert-border-color: var(--#{$prefix}#{$state}-border-subtle);
65 | --#{$prefix}alert-link-color: var(--#{$prefix}#{$state}-text-emphasis);
66 | }
67 | }
68 | // scss-docs-end alert-modifiers
69 |
--------------------------------------------------------------------------------
/_sass/bootstrap/scss/_badge.scss:
--------------------------------------------------------------------------------
1 | // Base class
2 | //
3 | // Requires one of the contextual, color modifier classes for `color` and
4 | // `background-color`.
5 |
6 | .badge {
7 | // scss-docs-start badge-css-vars
8 | --#{$prefix}badge-padding-x: #{$badge-padding-x};
9 | --#{$prefix}badge-padding-y: #{$badge-padding-y};
10 | @include rfs($badge-font-size, --#{$prefix}badge-font-size);
11 | --#{$prefix}badge-font-weight: #{$badge-font-weight};
12 | --#{$prefix}badge-color: #{$badge-color};
13 | --#{$prefix}badge-border-radius: #{$badge-border-radius};
14 | // scss-docs-end badge-css-vars
15 |
16 | display: inline-block;
17 | padding: var(--#{$prefix}badge-padding-y) var(--#{$prefix}badge-padding-x);
18 | @include font-size(var(--#{$prefix}badge-font-size));
19 | font-weight: var(--#{$prefix}badge-font-weight);
20 | line-height: 1;
21 | color: var(--#{$prefix}badge-color);
22 | text-align: center;
23 | white-space: nowrap;
24 | vertical-align: baseline;
25 | @include border-radius(var(--#{$prefix}badge-border-radius));
26 | @include gradient-bg();
27 |
28 | // Empty badges collapse automatically
29 | &:empty {
30 | display: none;
31 | }
32 | }
33 |
34 | // Quick fix for badges in buttons
35 | .btn .badge {
36 | position: relative;
37 | top: -1px;
38 | }
39 |
--------------------------------------------------------------------------------
/_sass/bootstrap/scss/_breadcrumb.scss:
--------------------------------------------------------------------------------
1 | .breadcrumb {
2 | // scss-docs-start breadcrumb-css-vars
3 | --#{$prefix}breadcrumb-padding-x: #{$breadcrumb-padding-x};
4 | --#{$prefix}breadcrumb-padding-y: #{$breadcrumb-padding-y};
5 | --#{$prefix}breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom};
6 | @include rfs($breadcrumb-font-size, --#{$prefix}breadcrumb-font-size);
7 | --#{$prefix}breadcrumb-bg: #{$breadcrumb-bg};
8 | --#{$prefix}breadcrumb-border-radius: #{$breadcrumb-border-radius};
9 | --#{$prefix}breadcrumb-divider-color: #{$breadcrumb-divider-color};
10 | --#{$prefix}breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x};
11 | --#{$prefix}breadcrumb-item-active-color: #{$breadcrumb-active-color};
12 | // scss-docs-end breadcrumb-css-vars
13 |
14 | display: flex;
15 | flex-wrap: wrap;
16 | padding: var(--#{$prefix}breadcrumb-padding-y) var(--#{$prefix}breadcrumb-padding-x);
17 | margin-bottom: var(--#{$prefix}breadcrumb-margin-bottom);
18 | @include font-size(var(--#{$prefix}breadcrumb-font-size));
19 | list-style: none;
20 | background-color: var(--#{$prefix}breadcrumb-bg);
21 | @include border-radius(var(--#{$prefix}breadcrumb-border-radius));
22 | }
23 |
24 | .breadcrumb-item {
25 | // The separator between breadcrumbs (by default, a forward-slash: "/")
26 | + .breadcrumb-item {
27 | padding-left: var(--#{$prefix}breadcrumb-item-padding-x);
28 |
29 | &::before {
30 | float: left; // Suppress inline spacings and underlining of the separator
31 | padding-right: var(--#{$prefix}breadcrumb-item-padding-x);
32 | color: var(--#{$prefix}breadcrumb-divider-color);
33 | content: var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider)) #{"/* rtl:"} var(--#{$prefix}breadcrumb-divider, escape-svg($breadcrumb-divider-flipped)) #{"*/"};
34 | }
35 | }
36 |
37 | &.active {
38 | color: var(--#{$prefix}breadcrumb-item-active-color);
39 | }
40 | }
41 |
--------------------------------------------------------------------------------
/_sass/bootstrap/scss/_button-group.scss:
--------------------------------------------------------------------------------
1 | // Make the div behave like a button
2 | .btn-group,
3 | .btn-group-vertical {
4 | position: relative;
5 | display: inline-flex;
6 | vertical-align: middle; // match .btn alignment given font-size hack above
7 |
8 | > .btn {
9 | position: relative;
10 | flex: 1 1 auto;
11 | }
12 |
13 | // Bring the hover, focused, and "active" buttons to the front to overlay
14 | // the borders properly
15 | > .btn-check:checked + .btn,
16 | > .btn-check:focus + .btn,
17 | > .btn:hover,
18 | > .btn:focus,
19 | > .btn:active,
20 | > .btn.active {
21 | z-index: 1;
22 | }
23 | }
24 |
25 | // Optional: Group multiple button groups together for a toolbar
26 | .btn-toolbar {
27 | display: flex;
28 | flex-wrap: wrap;
29 | justify-content: flex-start;
30 |
31 | .input-group {
32 | width: auto;
33 | }
34 | }
35 |
36 | .btn-group {
37 | @include border-radius($btn-border-radius);
38 |
39 | // Prevent double borders when buttons are next to each other
40 | > :not(.btn-check:first-child) + .btn,
41 | > .btn-group:not(:first-child) {
42 | margin-left: calc(-1 * #{$btn-border-width}); // stylelint-disable-line function-disallowed-list
43 | }
44 |
45 | // Reset rounded corners
46 | > .btn:not(:last-child):not(.dropdown-toggle),
47 | > .btn.dropdown-toggle-split:first-child,
48 | > .btn-group:not(:last-child) > .btn {
49 | @include border-end-radius(0);
50 | }
51 |
52 | // The left radius should be 0 if the button is:
53 | // - the "third or more" child
54 | // - the second child and the previous element isn't `.btn-check` (making it the first child visually)
55 | // - part of a btn-group which isn't the first child
56 | > .btn:nth-child(n + 3),
57 | > :not(.btn-check) + .btn,
58 | > .btn-group:not(:first-child) > .btn {
59 | @include border-start-radius(0);
60 | }
61 | }
62 |
63 | // Sizing
64 | //
65 | // Remix the default button sizing classes into new ones for easier manipulation.
66 |
67 | .btn-group-sm > .btn { @extend .btn-sm; }
68 | .btn-group-lg > .btn { @extend .btn-lg; }
69 |
70 |
71 | //
72 | // Split button dropdowns
73 | //
74 |
75 | .dropdown-toggle-split {
76 | padding-right: $btn-padding-x * .75;
77 | padding-left: $btn-padding-x * .75;
78 |
79 | &::after,
80 | .dropup &::after,
81 | .dropend &::after {
82 | margin-left: 0;
83 | }
84 |
85 | .dropstart &::before {
86 | margin-right: 0;
87 | }
88 | }
89 |
90 | .btn-sm + .dropdown-toggle-split {
91 | padding-right: $btn-padding-x-sm * .75;
92 | padding-left: $btn-padding-x-sm * .75;
93 | }
94 |
95 | .btn-lg + .dropdown-toggle-split {
96 | padding-right: $btn-padding-x-lg * .75;
97 | padding-left: $btn-padding-x-lg * .75;
98 | }
99 |
100 |
101 | // The clickable button for toggling the menu
102 | // Set the same inset shadow as the :active state
103 | .btn-group.show .dropdown-toggle {
104 | @include box-shadow($btn-active-box-shadow);
105 |
106 | // Show no shadow for `.btn-link` since it has no other button styles.
107 | &.btn-link {
108 | @include box-shadow(none);
109 | }
110 | }
111 |
112 |
113 | //
114 | // Vertical button groups
115 | //
116 |
117 | .btn-group-vertical {
118 | flex-direction: column;
119 | align-items: flex-start;
120 | justify-content: center;
121 |
122 | > .btn,
123 | > .btn-group {
124 | width: 100%;
125 | }
126 |
127 | > .btn:not(:first-child),
128 | > .btn-group:not(:first-child) {
129 | margin-top: calc(-1 * #{$btn-border-width}); // stylelint-disable-line function-disallowed-list
130 | }
131 |
132 | // Reset rounded corners
133 | > .btn:not(:last-child):not(.dropdown-toggle),
134 | > .btn-group:not(:last-child) > .btn {
135 | @include border-bottom-radius(0);
136 | }
137 |
138 | // The top radius should be 0 if the button is:
139 | // - the "third or more" child
140 | // - the second child and the previous element isn't `.btn-check` (making it the first child visually)
141 | // - part of a btn-group which isn't the first child
142 | > .btn:nth-child(n + 3),
143 | > :not(.btn-check) + .btn,
144 | > .btn-group:not(:first-child) > .btn {
145 | @include border-top-radius(0);
146 | }
147 | }
148 |
--------------------------------------------------------------------------------
/_sass/bootstrap/scss/_close.scss:
--------------------------------------------------------------------------------
1 | // Transparent background and border properties included for button version.
2 | // iOS requires the button element instead of an anchor tag.
3 | // If you want the anchor version, it requires `href="#"`.
4 | // See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
5 |
6 | .btn-close {
7 | // scss-docs-start close-css-vars
8 | --#{$prefix}btn-close-color: #{$btn-close-color};
9 | --#{$prefix}btn-close-bg: #{ escape-svg($btn-close-bg) };
10 | --#{$prefix}btn-close-opacity: #{$btn-close-opacity};
11 | --#{$prefix}btn-close-hover-opacity: #{$btn-close-hover-opacity};
12 | --#{$prefix}btn-close-focus-shadow: #{$btn-close-focus-shadow};
13 | --#{$prefix}btn-close-focus-opacity: #{$btn-close-focus-opacity};
14 | --#{$prefix}btn-close-disabled-opacity: #{$btn-close-disabled-opacity};
15 | // scss-docs-end close-css-vars
16 |
17 | box-sizing: content-box;
18 | width: $btn-close-width;
19 | height: $btn-close-height;
20 | padding: $btn-close-padding-y $btn-close-padding-x;
21 | color: var(--#{$prefix}btn-close-color);
22 | background: transparent var(--#{$prefix}btn-close-bg) center / $btn-close-width auto no-repeat; // include transparent for button elements
23 | filter: var(--#{$prefix}btn-close-filter);
24 | border: 0; // for button elements
25 | @include border-radius();
26 | opacity: var(--#{$prefix}btn-close-opacity);
27 |
28 | // Override 's hover style
29 | &:hover {
30 | color: var(--#{$prefix}btn-close-color);
31 | text-decoration: none;
32 | opacity: var(--#{$prefix}btn-close-hover-opacity);
33 | }
34 |
35 | &:focus {
36 | outline: 0;
37 | box-shadow: var(--#{$prefix}btn-close-focus-shadow);
38 | opacity: var(--#{$prefix}btn-close-focus-opacity);
39 | }
40 |
41 | &:disabled,
42 | &.disabled {
43 | pointer-events: none;
44 | user-select: none;
45 | opacity: var(--#{$prefix}btn-close-disabled-opacity);
46 | }
47 | }
48 |
49 | @mixin btn-close-white() {
50 | --#{$prefix}btn-close-filter: #{$btn-close-filter-dark};
51 | }
52 |
53 | .btn-close-white {
54 | @include btn-close-white();
55 | }
56 |
57 | :root,
58 | [data-bs-theme="light"] {
59 | --#{$prefix}btn-close-filter: #{$btn-close-filter};
60 | }
61 |
62 | @if $enable-dark-mode {
63 | @include color-mode(dark, true) {
64 | @include btn-close-white();
65 | }
66 | }
67 |
--------------------------------------------------------------------------------
/_sass/bootstrap/scss/_containers.scss:
--------------------------------------------------------------------------------
1 | // Container widths
2 | //
3 | // Set the container width, and override it for fixed navbars in media queries.
4 |
5 | @if $enable-container-classes {
6 | // Single container class with breakpoint max-widths
7 | .container,
8 | // 100% wide container at all breakpoints
9 | .container-fluid {
10 | @include make-container();
11 | }
12 |
13 | // Responsive containers that are 100% wide until a breakpoint
14 | @each $breakpoint, $container-max-width in $container-max-widths {
15 | .container-#{$breakpoint} {
16 | @extend .container-fluid;
17 | }
18 |
19 | @include media-breakpoint-up($breakpoint, $grid-breakpoints) {
20 | %responsive-container-#{$breakpoint} {
21 | max-width: $container-max-width;
22 | }
23 |
24 | // Extend each breakpoint which is smaller or equal to the current breakpoint
25 | $extend-breakpoint: true;
26 |
27 | @each $name, $width in $grid-breakpoints {
28 | @if ($extend-breakpoint) {
29 | .container#{breakpoint-infix($name, $grid-breakpoints)} {
30 | @extend %responsive-container-#{$breakpoint};
31 | }
32 |
33 | // Once the current breakpoint is reached, stop extending
34 | @if ($breakpoint == $name) {
35 | $extend-breakpoint: false;
36 | }
37 | }
38 | }
39 | }
40 | }
41 | }
42 |
--------------------------------------------------------------------------------
/_sass/bootstrap/scss/_forms.scss:
--------------------------------------------------------------------------------
1 | @import "forms/labels";
2 | @import "forms/form-text";
3 | @import "forms/form-control";
4 | @import "forms/form-select";
5 | @import "forms/form-check";
6 | @import "forms/form-range";
7 | @import "forms/floating-labels";
8 | @import "forms/input-group";
9 | @import "forms/validation";
10 |
--------------------------------------------------------------------------------
/_sass/bootstrap/scss/_grid.scss:
--------------------------------------------------------------------------------
1 | // Row
2 | //
3 | // Rows contain your columns.
4 |
5 | :root {
6 | @each $name, $value in $grid-breakpoints {
7 | --#{$prefix}breakpoint-#{$name}: #{$value};
8 | }
9 | }
10 |
11 | @if $enable-grid-classes {
12 | .row {
13 | @include make-row();
14 |
15 | > * {
16 | @include make-col-ready();
17 | }
18 | }
19 | }
20 |
21 | @if $enable-cssgrid {
22 | .grid {
23 | display: grid;
24 | grid-template-rows: repeat(var(--#{$prefix}rows, 1), 1fr);
25 | grid-template-columns: repeat(var(--#{$prefix}columns, #{$grid-columns}), 1fr);
26 | gap: var(--#{$prefix}gap, #{$grid-gutter-width});
27 |
28 | @include make-cssgrid();
29 | }
30 | }
31 |
32 |
33 | // Columns
34 | //
35 | // Common styles for small and large grid columns
36 |
37 | @if $enable-grid-classes {
38 | @include make-grid-columns();
39 | }
40 |
--------------------------------------------------------------------------------
/_sass/bootstrap/scss/_helpers.scss:
--------------------------------------------------------------------------------
1 | @import "helpers/clearfix";
2 | @import "helpers/color-bg";
3 | @import "helpers/colored-links";
4 | @import "helpers/focus-ring";
5 | @import "helpers/icon-link";
6 | @import "helpers/ratio";
7 | @import "helpers/position";
8 | @import "helpers/stacks";
9 | @import "helpers/visually-hidden";
10 | @import "helpers/stretched-link";
11 | @import "helpers/text-truncation";
12 | @import "helpers/vr";
13 |
--------------------------------------------------------------------------------
/_sass/bootstrap/scss/_images.scss:
--------------------------------------------------------------------------------
1 | // Responsive images (ensure images don't scale beyond their parents)
2 | //
3 | // This is purposefully opt-in via an explicit class rather than being the default for all `
`s.
4 | // We previously tried the "images are responsive by default" approach in Bootstrap v2,
5 | // and abandoned it in Bootstrap v3 because it breaks lots of third-party widgets (including Google Maps)
6 | // which weren't expecting the images within themselves to be involuntarily resized.
7 | // See also https://github.com/twbs/bootstrap/issues/18178
8 | .img-fluid {
9 | @include img-fluid();
10 | }
11 |
12 |
13 | // Image thumbnails
14 | .img-thumbnail {
15 | padding: $thumbnail-padding;
16 | background-color: $thumbnail-bg;
17 | border: $thumbnail-border-width solid $thumbnail-border-color;
18 | @include border-radius($thumbnail-border-radius);
19 | @include box-shadow($thumbnail-box-shadow);
20 |
21 | // Keep them at most 100% wide
22 | @include img-fluid();
23 | }
24 |
25 | //
26 | // Figures
27 | //
28 |
29 | .figure {
30 | // Ensures the caption's text aligns with the image.
31 | display: inline-block;
32 | }
33 |
34 | .figure-img {
35 | margin-bottom: $spacer * .5;
36 | line-height: 1;
37 | }
38 |
39 | .figure-caption {
40 | @include font-size($figure-caption-font-size);
41 | color: $figure-caption-color;
42 | }
43 |
--------------------------------------------------------------------------------
/_sass/bootstrap/scss/_mixins.scss:
--------------------------------------------------------------------------------
1 | // Toggles
2 | //
3 | // Used in conjunction with global variables to enable certain theme features.
4 |
5 | // Vendor
6 | @import "vendor/rfs";
7 |
8 | // Deprecate
9 | @import "mixins/deprecate";
10 |
11 | // Helpers
12 | @import "mixins/breakpoints";
13 | @import "mixins/color-mode";
14 | @import "mixins/color-scheme";
15 | @import "mixins/image";
16 | @import "mixins/resize";
17 | @import "mixins/visually-hidden";
18 | @import "mixins/reset-text";
19 | @import "mixins/text-truncate";
20 |
21 | // Utilities
22 | @import "mixins/utilities";
23 |
24 | // Components
25 | @import "mixins/backdrop";
26 | @import "mixins/buttons";
27 | @import "mixins/caret";
28 | @import "mixins/pagination";
29 | @import "mixins/lists";
30 | @import "mixins/forms";
31 | @import "mixins/table-variants";
32 |
33 | // Skins
34 | @import "mixins/border-radius";
35 | @import "mixins/box-shadow";
36 | @import "mixins/gradients";
37 | @import "mixins/transition";
38 |
39 | // Layout
40 | @import "mixins/clearfix";
41 | @import "mixins/container";
42 | @import "mixins/grid";
43 |
--------------------------------------------------------------------------------
/_sass/bootstrap/scss/_offcanvas.scss:
--------------------------------------------------------------------------------
1 | // stylelint-disable function-disallowed-list
2 |
3 | %offcanvas-css-vars {
4 | // scss-docs-start offcanvas-css-vars
5 | --#{$prefix}offcanvas-zindex: #{$zindex-offcanvas};
6 | --#{$prefix}offcanvas-width: #{$offcanvas-horizontal-width};
7 | --#{$prefix}offcanvas-height: #{$offcanvas-vertical-height};
8 | --#{$prefix}offcanvas-padding-x: #{$offcanvas-padding-x};
9 | --#{$prefix}offcanvas-padding-y: #{$offcanvas-padding-y};
10 | --#{$prefix}offcanvas-color: #{$offcanvas-color};
11 | --#{$prefix}offcanvas-bg: #{$offcanvas-bg-color};
12 | --#{$prefix}offcanvas-border-width: #{$offcanvas-border-width};
13 | --#{$prefix}offcanvas-border-color: #{$offcanvas-border-color};
14 | --#{$prefix}offcanvas-box-shadow: #{$offcanvas-box-shadow};
15 | --#{$prefix}offcanvas-transition: #{transform $offcanvas-transition-duration ease-in-out};
16 | --#{$prefix}offcanvas-title-line-height: #{$offcanvas-title-line-height};
17 | // scss-docs-end offcanvas-css-vars
18 | }
19 |
20 | @each $breakpoint in map-keys($grid-breakpoints) {
21 | $next: breakpoint-next($breakpoint, $grid-breakpoints);
22 | $infix: breakpoint-infix($next, $grid-breakpoints);
23 |
24 | .offcanvas#{$infix} {
25 | @extend %offcanvas-css-vars;
26 | }
27 | }
28 |
29 | @each $breakpoint in map-keys($grid-breakpoints) {
30 | $next: breakpoint-next($breakpoint, $grid-breakpoints);
31 | $infix: breakpoint-infix($next, $grid-breakpoints);
32 |
33 | .offcanvas#{$infix} {
34 | @include media-breakpoint-down($next) {
35 | position: fixed;
36 | bottom: 0;
37 | z-index: var(--#{$prefix}offcanvas-zindex);
38 | display: flex;
39 | flex-direction: column;
40 | max-width: 100%;
41 | color: var(--#{$prefix}offcanvas-color);
42 | visibility: hidden;
43 | background-color: var(--#{$prefix}offcanvas-bg);
44 | background-clip: padding-box;
45 | outline: 0;
46 | @include box-shadow(var(--#{$prefix}offcanvas-box-shadow));
47 | @include transition(var(--#{$prefix}offcanvas-transition));
48 |
49 | &.offcanvas-start {
50 | top: 0;
51 | left: 0;
52 | width: var(--#{$prefix}offcanvas-width);
53 | border-right: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
54 | transform: translateX(-100%);
55 | }
56 |
57 | &.offcanvas-end {
58 | top: 0;
59 | right: 0;
60 | width: var(--#{$prefix}offcanvas-width);
61 | border-left: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
62 | transform: translateX(100%);
63 | }
64 |
65 | &.offcanvas-top {
66 | top: 0;
67 | right: 0;
68 | left: 0;
69 | height: var(--#{$prefix}offcanvas-height);
70 | max-height: 100%;
71 | border-bottom: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
72 | transform: translateY(-100%);
73 | }
74 |
75 | &.offcanvas-bottom {
76 | right: 0;
77 | left: 0;
78 | height: var(--#{$prefix}offcanvas-height);
79 | max-height: 100%;
80 | border-top: var(--#{$prefix}offcanvas-border-width) solid var(--#{$prefix}offcanvas-border-color);
81 | transform: translateY(100%);
82 | }
83 |
84 | &.showing,
85 | &.show:not(.hiding) {
86 | transform: none;
87 | }
88 |
89 | &.showing,
90 | &.hiding,
91 | &.show {
92 | visibility: visible;
93 | }
94 | }
95 |
96 | @if not ($infix == "") {
97 | @include media-breakpoint-up($next) {
98 | --#{$prefix}offcanvas-height: auto;
99 | --#{$prefix}offcanvas-border-width: 0;
100 | background-color: transparent !important; // stylelint-disable-line declaration-no-important
101 |
102 | .offcanvas-header {
103 | display: none;
104 | }
105 |
106 | .offcanvas-body {
107 | display: flex;
108 | flex-grow: 0;
109 | padding: 0;
110 | overflow-y: visible;
111 | // Reset `background-color` in case `.bg-*` classes are used in offcanvas
112 | background-color: transparent !important; // stylelint-disable-line declaration-no-important
113 | }
114 | }
115 | }
116 | }
117 | }
118 |
119 | .offcanvas-backdrop {
120 | @include overlay-backdrop($zindex-offcanvas-backdrop, $offcanvas-backdrop-bg, $offcanvas-backdrop-opacity);
121 | }
122 |
123 | .offcanvas-header {
124 | display: flex;
125 | align-items: center;
126 | padding: var(--#{$prefix}offcanvas-padding-y) var(--#{$prefix}offcanvas-padding-x);
127 |
128 | .btn-close {
129 | padding: calc(var(--#{$prefix}offcanvas-padding-y) * .5) calc(var(--#{$prefix}offcanvas-padding-x) * .5);
130 | // Split properties to avoid invalid calc() function if value is 0
131 | margin-top: calc(-.5 * var(--#{$prefix}offcanvas-padding-y));
132 | margin-right: calc(-.5 * var(--#{$prefix}offcanvas-padding-x));
133 | margin-bottom: calc(-.5 * var(--#{$prefix}offcanvas-padding-y));
134 | margin-left: auto;
135 | }
136 | }
137 |
138 | .offcanvas-title {
139 | margin-bottom: 0;
140 | line-height: var(--#{$prefix}offcanvas-title-line-height);
141 | }
142 |
143 | .offcanvas-body {
144 | flex-grow: 1;
145 | padding: var(--#{$prefix}offcanvas-padding-y) var(--#{$prefix}offcanvas-padding-x);
146 | overflow-y: auto;
147 | }
148 |
--------------------------------------------------------------------------------
/_sass/bootstrap/scss/_pagination.scss:
--------------------------------------------------------------------------------
1 | .pagination {
2 | // scss-docs-start pagination-css-vars
3 | --#{$prefix}pagination-padding-x: #{$pagination-padding-x};
4 | --#{$prefix}pagination-padding-y: #{$pagination-padding-y};
5 | @include rfs($pagination-font-size, --#{$prefix}pagination-font-size);
6 | --#{$prefix}pagination-color: #{$pagination-color};
7 | --#{$prefix}pagination-bg: #{$pagination-bg};
8 | --#{$prefix}pagination-border-width: #{$pagination-border-width};
9 | --#{$prefix}pagination-border-color: #{$pagination-border-color};
10 | --#{$prefix}pagination-border-radius: #{$pagination-border-radius};
11 | --#{$prefix}pagination-hover-color: #{$pagination-hover-color};
12 | --#{$prefix}pagination-hover-bg: #{$pagination-hover-bg};
13 | --#{$prefix}pagination-hover-border-color: #{$pagination-hover-border-color};
14 | --#{$prefix}pagination-focus-color: #{$pagination-focus-color};
15 | --#{$prefix}pagination-focus-bg: #{$pagination-focus-bg};
16 | --#{$prefix}pagination-focus-box-shadow: #{$pagination-focus-box-shadow};
17 | --#{$prefix}pagination-active-color: #{$pagination-active-color};
18 | --#{$prefix}pagination-active-bg: #{$pagination-active-bg};
19 | --#{$prefix}pagination-active-border-color: #{$pagination-active-border-color};
20 | --#{$prefix}pagination-disabled-color: #{$pagination-disabled-color};
21 | --#{$prefix}pagination-disabled-bg: #{$pagination-disabled-bg};
22 | --#{$prefix}pagination-disabled-border-color: #{$pagination-disabled-border-color};
23 | // scss-docs-end pagination-css-vars
24 |
25 | display: flex;
26 | @include list-unstyled();
27 | }
28 |
29 | .page-link {
30 | position: relative;
31 | display: block;
32 | padding: var(--#{$prefix}pagination-padding-y) var(--#{$prefix}pagination-padding-x);
33 | @include font-size(var(--#{$prefix}pagination-font-size));
34 | color: var(--#{$prefix}pagination-color);
35 | text-decoration: if($link-decoration == none, null, none);
36 | background-color: var(--#{$prefix}pagination-bg);
37 | border: var(--#{$prefix}pagination-border-width) solid var(--#{$prefix}pagination-border-color);
38 | @include transition($pagination-transition);
39 |
40 | &:hover {
41 | z-index: 2;
42 | color: var(--#{$prefix}pagination-hover-color);
43 | text-decoration: if($link-hover-decoration == underline, none, null);
44 | background-color: var(--#{$prefix}pagination-hover-bg);
45 | border-color: var(--#{$prefix}pagination-hover-border-color);
46 | }
47 |
48 | &:focus {
49 | z-index: 3;
50 | color: var(--#{$prefix}pagination-focus-color);
51 | background-color: var(--#{$prefix}pagination-focus-bg);
52 | outline: $pagination-focus-outline;
53 | box-shadow: var(--#{$prefix}pagination-focus-box-shadow);
54 | }
55 |
56 | &.active,
57 | .active > & {
58 | z-index: 3;
59 | color: var(--#{$prefix}pagination-active-color);
60 | @include gradient-bg(var(--#{$prefix}pagination-active-bg));
61 | border-color: var(--#{$prefix}pagination-active-border-color);
62 | }
63 |
64 | &.disabled,
65 | .disabled > & {
66 | color: var(--#{$prefix}pagination-disabled-color);
67 | pointer-events: none;
68 | background-color: var(--#{$prefix}pagination-disabled-bg);
69 | border-color: var(--#{$prefix}pagination-disabled-border-color);
70 | }
71 | }
72 |
73 | .page-item {
74 | &:not(:first-child) .page-link {
75 | margin-left: $pagination-margin-start;
76 | }
77 |
78 | @if $pagination-margin-start == calc(-1 * #{$pagination-border-width}) {
79 | &:first-child {
80 | .page-link {
81 | @include border-start-radius(var(--#{$prefix}pagination-border-radius));
82 | }
83 | }
84 |
85 | &:last-child {
86 | .page-link {
87 | @include border-end-radius(var(--#{$prefix}pagination-border-radius));
88 | }
89 | }
90 | } @else {
91 | // Add border-radius to all pageLinks in case they have left margin
92 | .page-link {
93 | @include border-radius(var(--#{$prefix}pagination-border-radius));
94 | }
95 | }
96 | }
97 |
98 |
99 | //
100 | // Sizing
101 | //
102 |
103 | .pagination-lg {
104 | @include pagination-size($pagination-padding-y-lg, $pagination-padding-x-lg, $font-size-lg, $pagination-border-radius-lg);
105 | }
106 |
107 | .pagination-sm {
108 | @include pagination-size($pagination-padding-y-sm, $pagination-padding-x-sm, $font-size-sm, $pagination-border-radius-sm);
109 | }
110 |
--------------------------------------------------------------------------------
/_sass/bootstrap/scss/_placeholders.scss:
--------------------------------------------------------------------------------
1 | .placeholder {
2 | display: inline-block;
3 | min-height: 1em;
4 | vertical-align: middle;
5 | cursor: wait;
6 | background-color: currentcolor;
7 | opacity: $placeholder-opacity-max;
8 |
9 | &.btn::before {
10 | display: inline-block;
11 | content: "";
12 | }
13 | }
14 |
15 | // Sizing
16 | .placeholder-xs {
17 | min-height: .6em;
18 | }
19 |
20 | .placeholder-sm {
21 | min-height: .8em;
22 | }
23 |
24 | .placeholder-lg {
25 | min-height: 1.2em;
26 | }
27 |
28 | // Animation
29 | .placeholder-glow {
30 | .placeholder {
31 | animation: placeholder-glow 2s ease-in-out infinite;
32 | }
33 | }
34 |
35 | @keyframes placeholder-glow {
36 | 50% {
37 | opacity: $placeholder-opacity-min;
38 | }
39 | }
40 |
41 | .placeholder-wave {
42 | mask-image: linear-gradient(130deg, $black 55%, rgba(0, 0, 0, (1 - $placeholder-opacity-min)) 75%, $black 95%);
43 | mask-size: 200% 100%;
44 | animation: placeholder-wave 2s linear infinite;
45 | }
46 |
47 | @keyframes placeholder-wave {
48 | 100% {
49 | mask-position: -200% 0%;
50 | }
51 | }
52 |
--------------------------------------------------------------------------------
/_sass/bootstrap/scss/_progress.scss:
--------------------------------------------------------------------------------
1 | // Disable animation if transitions are disabled
2 |
3 | // scss-docs-start progress-keyframes
4 | @if $enable-transitions {
5 | @keyframes progress-bar-stripes {
6 | 0% { background-position-x: var(--#{$prefix}progress-height); }
7 | }
8 | }
9 | // scss-docs-end progress-keyframes
10 |
11 | .progress,
12 | .progress-stacked {
13 | // scss-docs-start progress-css-vars
14 | --#{$prefix}progress-height: #{$progress-height};
15 | @include rfs($progress-font-size, --#{$prefix}progress-font-size);
16 | --#{$prefix}progress-bg: #{$progress-bg};
17 | --#{$prefix}progress-border-radius: #{$progress-border-radius};
18 | --#{$prefix}progress-box-shadow: #{$progress-box-shadow};
19 | --#{$prefix}progress-bar-color: #{$progress-bar-color};
20 | --#{$prefix}progress-bar-bg: #{$progress-bar-bg};
21 | --#{$prefix}progress-bar-transition: #{$progress-bar-transition};
22 | // scss-docs-end progress-css-vars
23 |
24 | display: flex;
25 | height: var(--#{$prefix}progress-height);
26 | overflow: hidden; // force rounded corners by cropping it
27 | @include font-size(var(--#{$prefix}progress-font-size));
28 | background-color: var(--#{$prefix}progress-bg);
29 | @include border-radius(var(--#{$prefix}progress-border-radius));
30 | @include box-shadow(var(--#{$prefix}progress-box-shadow));
31 | }
32 |
33 | .progress-bar {
34 | display: flex;
35 | flex-direction: column;
36 | justify-content: center;
37 | overflow: hidden;
38 | color: var(--#{$prefix}progress-bar-color);
39 | text-align: center;
40 | white-space: nowrap;
41 | background-color: var(--#{$prefix}progress-bar-bg);
42 | @include transition(var(--#{$prefix}progress-bar-transition));
43 | }
44 |
45 | .progress-bar-striped {
46 | @include gradient-striped();
47 | background-size: var(--#{$prefix}progress-height) var(--#{$prefix}progress-height);
48 | }
49 |
50 | .progress-stacked > .progress {
51 | overflow: visible;
52 | }
53 |
54 | .progress-stacked > .progress > .progress-bar {
55 | width: 100%;
56 | }
57 |
58 | @if $enable-transitions {
59 | .progress-bar-animated {
60 | animation: $progress-bar-animation-timing progress-bar-stripes;
61 |
62 | @if $enable-reduced-motion {
63 | @media (prefers-reduced-motion: reduce) {
64 | animation: none;
65 | }
66 | }
67 | }
68 | }
69 |
--------------------------------------------------------------------------------
/_sass/bootstrap/scss/_spinners.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Rotating border
3 | //
4 |
5 | .spinner-grow,
6 | .spinner-border {
7 | display: inline-block;
8 | flex-shrink: 0;
9 | width: var(--#{$prefix}spinner-width);
10 | height: var(--#{$prefix}spinner-height);
11 | vertical-align: var(--#{$prefix}spinner-vertical-align);
12 | // stylelint-disable-next-line property-disallowed-list
13 | border-radius: 50%;
14 | animation: var(--#{$prefix}spinner-animation-speed) linear infinite var(--#{$prefix}spinner-animation-name);
15 | }
16 |
17 | // scss-docs-start spinner-border-keyframes
18 | @keyframes spinner-border {
19 | to { transform: rotate(360deg) #{"/* rtl:ignore */"}; }
20 | }
21 | // scss-docs-end spinner-border-keyframes
22 |
23 | .spinner-border {
24 | // scss-docs-start spinner-border-css-vars
25 | --#{$prefix}spinner-width: #{$spinner-width};
26 | --#{$prefix}spinner-height: #{$spinner-height};
27 | --#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
28 | --#{$prefix}spinner-border-width: #{$spinner-border-width};
29 | --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
30 | --#{$prefix}spinner-animation-name: spinner-border;
31 | // scss-docs-end spinner-border-css-vars
32 |
33 | border: var(--#{$prefix}spinner-border-width) solid currentcolor;
34 | border-right-color: transparent;
35 | }
36 |
37 | .spinner-border-sm {
38 | // scss-docs-start spinner-border-sm-css-vars
39 | --#{$prefix}spinner-width: #{$spinner-width-sm};
40 | --#{$prefix}spinner-height: #{$spinner-height-sm};
41 | --#{$prefix}spinner-border-width: #{$spinner-border-width-sm};
42 | // scss-docs-end spinner-border-sm-css-vars
43 | }
44 |
45 | //
46 | // Growing circle
47 | //
48 |
49 | // scss-docs-start spinner-grow-keyframes
50 | @keyframes spinner-grow {
51 | 0% {
52 | transform: scale(0);
53 | }
54 | 50% {
55 | opacity: 1;
56 | transform: none;
57 | }
58 | }
59 | // scss-docs-end spinner-grow-keyframes
60 |
61 | .spinner-grow {
62 | // scss-docs-start spinner-grow-css-vars
63 | --#{$prefix}spinner-width: #{$spinner-width};
64 | --#{$prefix}spinner-height: #{$spinner-height};
65 | --#{$prefix}spinner-vertical-align: #{$spinner-vertical-align};
66 | --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed};
67 | --#{$prefix}spinner-animation-name: spinner-grow;
68 | // scss-docs-end spinner-grow-css-vars
69 |
70 | background-color: currentcolor;
71 | opacity: 0;
72 | }
73 |
74 | .spinner-grow-sm {
75 | --#{$prefix}spinner-width: #{$spinner-width-sm};
76 | --#{$prefix}spinner-height: #{$spinner-height-sm};
77 | }
78 |
79 | @if $enable-reduced-motion {
80 | @media (prefers-reduced-motion: reduce) {
81 | .spinner-border,
82 | .spinner-grow {
83 | --#{$prefix}spinner-animation-speed: #{$spinner-animation-speed * 2};
84 | }
85 | }
86 | }
87 |
--------------------------------------------------------------------------------
/_sass/bootstrap/scss/_toasts.scss:
--------------------------------------------------------------------------------
1 | .toast {
2 | // scss-docs-start toast-css-vars
3 | --#{$prefix}toast-zindex: #{$zindex-toast};
4 | --#{$prefix}toast-padding-x: #{$toast-padding-x};
5 | --#{$prefix}toast-padding-y: #{$toast-padding-y};
6 | --#{$prefix}toast-spacing: #{$toast-spacing};
7 | --#{$prefix}toast-max-width: #{$toast-max-width};
8 | @include rfs($toast-font-size, --#{$prefix}toast-font-size);
9 | --#{$prefix}toast-color: #{$toast-color};
10 | --#{$prefix}toast-bg: #{$toast-background-color};
11 | --#{$prefix}toast-border-width: #{$toast-border-width};
12 | --#{$prefix}toast-border-color: #{$toast-border-color};
13 | --#{$prefix}toast-border-radius: #{$toast-border-radius};
14 | --#{$prefix}toast-box-shadow: #{$toast-box-shadow};
15 | --#{$prefix}toast-header-color: #{$toast-header-color};
16 | --#{$prefix}toast-header-bg: #{$toast-header-background-color};
17 | --#{$prefix}toast-header-border-color: #{$toast-header-border-color};
18 | // scss-docs-end toast-css-vars
19 |
20 | width: var(--#{$prefix}toast-max-width);
21 | max-width: 100%;
22 | @include font-size(var(--#{$prefix}toast-font-size));
23 | color: var(--#{$prefix}toast-color);
24 | pointer-events: auto;
25 | background-color: var(--#{$prefix}toast-bg);
26 | background-clip: padding-box;
27 | border: var(--#{$prefix}toast-border-width) solid var(--#{$prefix}toast-border-color);
28 | box-shadow: var(--#{$prefix}toast-box-shadow);
29 | @include border-radius(var(--#{$prefix}toast-border-radius));
30 |
31 | &.showing {
32 | opacity: 0;
33 | }
34 |
35 | &:not(.show) {
36 | display: none;
37 | }
38 | }
39 |
40 | .toast-container {
41 | --#{$prefix}toast-zindex: #{$zindex-toast};
42 |
43 | position: absolute;
44 | z-index: var(--#{$prefix}toast-zindex);
45 | width: max-content;
46 | max-width: 100%;
47 | pointer-events: none;
48 |
49 | > :not(:last-child) {
50 | margin-bottom: var(--#{$prefix}toast-spacing);
51 | }
52 | }
53 |
54 | .toast-header {
55 | display: flex;
56 | align-items: center;
57 | padding: var(--#{$prefix}toast-padding-y) var(--#{$prefix}toast-padding-x);
58 | color: var(--#{$prefix}toast-header-color);
59 | background-color: var(--#{$prefix}toast-header-bg);
60 | background-clip: padding-box;
61 | border-bottom: var(--#{$prefix}toast-border-width) solid var(--#{$prefix}toast-header-border-color);
62 | @include border-top-radius(calc(var(--#{$prefix}toast-border-radius) - var(--#{$prefix}toast-border-width)));
63 |
64 | .btn-close {
65 | margin-right: calc(-.5 * var(--#{$prefix}toast-padding-x)); // stylelint-disable-line function-disallowed-list
66 | margin-left: var(--#{$prefix}toast-padding-x);
67 | }
68 | }
69 |
70 | .toast-body {
71 | padding: var(--#{$prefix}toast-padding-x);
72 | word-wrap: break-word;
73 | }
74 |
--------------------------------------------------------------------------------
/_sass/bootstrap/scss/_tooltip.scss:
--------------------------------------------------------------------------------
1 | // Base class
2 | .tooltip {
3 | // scss-docs-start tooltip-css-vars
4 | --#{$prefix}tooltip-zindex: #{$zindex-tooltip};
5 | --#{$prefix}tooltip-max-width: #{$tooltip-max-width};
6 | --#{$prefix}tooltip-padding-x: #{$tooltip-padding-x};
7 | --#{$prefix}tooltip-padding-y: #{$tooltip-padding-y};
8 | --#{$prefix}tooltip-margin: #{$tooltip-margin};
9 | @include rfs($tooltip-font-size, --#{$prefix}tooltip-font-size);
10 | --#{$prefix}tooltip-color: #{$tooltip-color};
11 | --#{$prefix}tooltip-bg: #{$tooltip-bg};
12 | --#{$prefix}tooltip-border-radius: #{$tooltip-border-radius};
13 | --#{$prefix}tooltip-opacity: #{$tooltip-opacity};
14 | --#{$prefix}tooltip-arrow-width: #{$tooltip-arrow-width};
15 | --#{$prefix}tooltip-arrow-height: #{$tooltip-arrow-height};
16 | // scss-docs-end tooltip-css-vars
17 |
18 | z-index: var(--#{$prefix}tooltip-zindex);
19 | display: block;
20 | margin: var(--#{$prefix}tooltip-margin);
21 | @include deprecate("`$tooltip-margin`", "v5", "v5.x", true);
22 | // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
23 | // So reset our font and text properties to avoid inheriting weird values.
24 | @include reset-text();
25 | @include font-size(var(--#{$prefix}tooltip-font-size));
26 | // Allow breaking very long words so they don't overflow the tooltip's bounds
27 | word-wrap: break-word;
28 | opacity: 0;
29 |
30 | &.show { opacity: var(--#{$prefix}tooltip-opacity); }
31 |
32 | .tooltip-arrow {
33 | display: block;
34 | width: var(--#{$prefix}tooltip-arrow-width);
35 | height: var(--#{$prefix}tooltip-arrow-height);
36 |
37 | &::before {
38 | position: absolute;
39 | content: "";
40 | border-color: transparent;
41 | border-style: solid;
42 | }
43 | }
44 | }
45 |
46 | .bs-tooltip-top .tooltip-arrow {
47 | bottom: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
48 |
49 | &::before {
50 | top: -1px;
51 | border-width: var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
52 | border-top-color: var(--#{$prefix}tooltip-bg);
53 | }
54 | }
55 |
56 | /* rtl:begin:ignore */
57 | .bs-tooltip-end .tooltip-arrow {
58 | left: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
59 | width: var(--#{$prefix}tooltip-arrow-height);
60 | height: var(--#{$prefix}tooltip-arrow-width);
61 |
62 | &::before {
63 | right: -1px;
64 | border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height) calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0; // stylelint-disable-line function-disallowed-list
65 | border-right-color: var(--#{$prefix}tooltip-bg);
66 | }
67 | }
68 |
69 | /* rtl:end:ignore */
70 |
71 | .bs-tooltip-bottom .tooltip-arrow {
72 | top: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
73 |
74 | &::before {
75 | bottom: -1px;
76 | border-width: 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list
77 | border-bottom-color: var(--#{$prefix}tooltip-bg);
78 | }
79 | }
80 |
81 | /* rtl:begin:ignore */
82 | .bs-tooltip-start .tooltip-arrow {
83 | right: calc(-1 * var(--#{$prefix}tooltip-arrow-height)); // stylelint-disable-line function-disallowed-list
84 | width: var(--#{$prefix}tooltip-arrow-height);
85 | height: var(--#{$prefix}tooltip-arrow-width);
86 |
87 | &::before {
88 | left: -1px;
89 | border-width: calc(var(--#{$prefix}tooltip-arrow-width) * .5) 0 calc(var(--#{$prefix}tooltip-arrow-width) * .5) var(--#{$prefix}tooltip-arrow-height); // stylelint-disable-line function-disallowed-list
90 | border-left-color: var(--#{$prefix}tooltip-bg);
91 | }
92 | }
93 |
94 | /* rtl:end:ignore */
95 |
96 | .bs-tooltip-auto {
97 | &[data-popper-placement^="top"] {
98 | @extend .bs-tooltip-top;
99 | }
100 | &[data-popper-placement^="right"] {
101 | @extend .bs-tooltip-end;
102 | }
103 | &[data-popper-placement^="bottom"] {
104 | @extend .bs-tooltip-bottom;
105 | }
106 | &[data-popper-placement^="left"] {
107 | @extend .bs-tooltip-start;
108 | }
109 | }
110 |
111 | // Wrapper for the tooltip content
112 | .tooltip-inner {
113 | max-width: var(--#{$prefix}tooltip-max-width);
114 | padding: var(--#{$prefix}tooltip-padding-y) var(--#{$prefix}tooltip-padding-x);
115 | color: var(--#{$prefix}tooltip-color);
116 | text-align: center;
117 | background-color: var(--#{$prefix}tooltip-bg);
118 | @include border-radius(var(--#{$prefix}tooltip-border-radius));
119 | }
120 |
--------------------------------------------------------------------------------
/_sass/bootstrap/scss/_transitions.scss:
--------------------------------------------------------------------------------
1 | .fade {
2 | @include transition($transition-fade);
3 |
4 | &:not(.show) {
5 | opacity: 0;
6 | }
7 | }
8 |
9 | // scss-docs-start collapse-classes
10 | .collapse {
11 | &:not(.show) {
12 | display: none;
13 | }
14 | }
15 |
16 | .collapsing {
17 | height: 0;
18 | overflow: hidden;
19 | @include transition($transition-collapse);
20 |
21 | &.collapse-horizontal {
22 | width: 0;
23 | height: auto;
24 | @include transition($transition-collapse-width);
25 | }
26 | }
27 | // scss-docs-end collapse-classes
28 |
--------------------------------------------------------------------------------
/_sass/bootstrap/scss/_type.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Headings
3 | //
4 | .h1 {
5 | @extend h1;
6 | }
7 |
8 | .h2 {
9 | @extend h2;
10 | }
11 |
12 | .h3 {
13 | @extend h3;
14 | }
15 |
16 | .h4 {
17 | @extend h4;
18 | }
19 |
20 | .h5 {
21 | @extend h5;
22 | }
23 |
24 | .h6 {
25 | @extend h6;
26 | }
27 |
28 |
29 | .lead {
30 | @include font-size($lead-font-size);
31 | font-weight: $lead-font-weight;
32 | }
33 |
34 | // Type display classes
35 | @each $display, $font-size in $display-font-sizes {
36 | .display-#{$display} {
37 | font-family: $display-font-family;
38 | font-style: $display-font-style;
39 | font-weight: $display-font-weight;
40 | line-height: $display-line-height;
41 | @include font-size($font-size);
42 | }
43 | }
44 |
45 | //
46 | // Emphasis
47 | //
48 | .small {
49 | @extend small;
50 | }
51 |
52 | .mark {
53 | @extend mark;
54 | }
55 |
56 | //
57 | // Lists
58 | //
59 |
60 | .list-unstyled {
61 | @include list-unstyled();
62 | }
63 |
64 | // Inline turns list items into inline-block
65 | .list-inline {
66 | @include list-unstyled();
67 | }
68 | .list-inline-item {
69 | display: inline-block;
70 |
71 | &:not(:last-child) {
72 | margin-right: $list-inline-padding;
73 | }
74 | }
75 |
76 |
77 | //
78 | // Misc
79 | //
80 |
81 | // Builds on `abbr`
82 | .initialism {
83 | @include font-size($initialism-font-size);
84 | text-transform: uppercase;
85 | }
86 |
87 | // Blockquotes
88 | .blockquote {
89 | margin-bottom: $blockquote-margin-y;
90 | @include font-size($blockquote-font-size);
91 |
92 | > :last-child {
93 | margin-bottom: 0;
94 | }
95 | }
96 |
97 | .blockquote-footer {
98 | margin-top: -$blockquote-margin-y;
99 | margin-bottom: $blockquote-margin-y;
100 | @include font-size($blockquote-footer-font-size);
101 | color: $blockquote-footer-color;
102 |
103 | &::before {
104 | content: "\2014\00A0"; // em dash, nbsp
105 | }
106 | }
107 |
--------------------------------------------------------------------------------
/_sass/bootstrap/scss/bootstrap-grid.scss:
--------------------------------------------------------------------------------
1 | @import "mixins/banner";
2 | @include bsBanner(Grid);
3 |
4 | $include-column-box-sizing: true !default;
5 |
6 | @import "functions";
7 | @import "variables";
8 | @import "variables-dark";
9 | @import "maps";
10 |
11 | @import "mixins/breakpoints";
12 | @import "mixins/container";
13 | @import "mixins/grid";
14 | @import "mixins/utilities";
15 |
16 | @import "vendor/rfs";
17 |
18 | @import "containers";
19 | @import "grid";
20 |
21 | @import "utilities";
22 | // Only use the utilities we need
23 | // stylelint-disable-next-line scss/dollar-variable-default
24 | $utilities: map-get-multiple(
25 | $utilities,
26 | (
27 | "display",
28 | "order",
29 | "flex",
30 | "flex-direction",
31 | "flex-grow",
32 | "flex-shrink",
33 | "flex-wrap",
34 | "justify-content",
35 | "align-items",
36 | "align-content",
37 | "align-self",
38 | "margin",
39 | "margin-x",
40 | "margin-y",
41 | "margin-top",
42 | "margin-end",
43 | "margin-bottom",
44 | "margin-start",
45 | "negative-margin",
46 | "negative-margin-x",
47 | "negative-margin-y",
48 | "negative-margin-top",
49 | "negative-margin-end",
50 | "negative-margin-bottom",
51 | "negative-margin-start",
52 | "padding",
53 | "padding-x",
54 | "padding-y",
55 | "padding-top",
56 | "padding-end",
57 | "padding-bottom",
58 | "padding-start",
59 | )
60 | );
61 |
62 | @import "utilities/api";
63 |
--------------------------------------------------------------------------------
/_sass/bootstrap/scss/bootstrap-reboot.scss:
--------------------------------------------------------------------------------
1 | @import "mixins/banner";
2 | @include bsBanner(Reboot);
3 |
4 | @import "functions";
5 | @import "variables";
6 | @import "variables-dark";
7 | @import "maps";
8 | @import "mixins";
9 | @import "root";
10 | @import "reboot";
11 |
--------------------------------------------------------------------------------
/_sass/bootstrap/scss/bootstrap-utilities.scss:
--------------------------------------------------------------------------------
1 | @import "mixins/banner";
2 | @include bsBanner(Utilities);
3 |
4 | // Configuration
5 | @import "functions";
6 | @import "variables";
7 | @import "variables-dark";
8 | @import "maps";
9 | @import "mixins";
10 | @import "utilities";
11 |
12 | // Layout & components
13 | @import "root";
14 |
15 | // Helpers
16 | @import "helpers";
17 |
18 | // Utilities
19 | @import "utilities/api";
20 |
--------------------------------------------------------------------------------
/_sass/bootstrap/scss/bootstrap.scss:
--------------------------------------------------------------------------------
1 | @import "mixins/banner";
2 | @include bsBanner("");
3 |
4 |
5 | // scss-docs-start import-stack
6 | // Configuration
7 | @import "functions";
8 | @import "variables";
9 | @import "variables-dark";
10 | @import "maps";
11 | @import "mixins";
12 | @import "utilities";
13 |
14 | // Layout & components
15 | @import "root";
16 | @import "reboot";
17 | @import "type";
18 | @import "images";
19 | @import "containers";
20 | @import "grid";
21 | @import "tables";
22 | @import "forms";
23 | @import "buttons";
24 | @import "transitions";
25 | @import "dropdown";
26 | @import "button-group";
27 | @import "nav";
28 | @import "navbar";
29 | @import "card";
30 | @import "accordion";
31 | @import "breadcrumb";
32 | @import "pagination";
33 | @import "badge";
34 | @import "alert";
35 | @import "progress";
36 | @import "list-group";
37 | @import "close";
38 | @import "toasts";
39 | @import "modal";
40 | @import "tooltip";
41 | @import "popover";
42 | @import "carousel";
43 | @import "spinners";
44 | @import "offcanvas";
45 | @import "placeholders";
46 |
47 | // Helpers
48 | @import "helpers";
49 |
50 | // Utilities
51 | @import "utilities/api";
52 | // scss-docs-end import-stack
53 |
--------------------------------------------------------------------------------
/_sass/bootstrap/scss/forms/_floating-labels.scss:
--------------------------------------------------------------------------------
1 | .form-floating {
2 | position: relative;
3 |
4 | > .form-control,
5 | > .form-control-plaintext,
6 | > .form-select {
7 | height: $form-floating-height;
8 | min-height: $form-floating-height;
9 | line-height: $form-floating-line-height;
10 | }
11 |
12 | > label {
13 | position: absolute;
14 | top: 0;
15 | left: 0;
16 | z-index: 2;
17 | max-width: 100%;
18 | height: 100%; // allow textareas
19 | padding: $form-floating-padding-y $form-floating-padding-x;
20 | overflow: hidden;
21 | color: rgba(var(--#{$prefix}body-color-rgb), #{$form-floating-label-opacity});
22 | text-align: start;
23 | text-overflow: ellipsis;
24 | white-space: nowrap;
25 | pointer-events: none;
26 | border: $input-border-width solid transparent; // Required for aligning label's text with the input as it affects inner box model
27 | transform-origin: 0 0;
28 | @include transition($form-floating-transition);
29 | }
30 |
31 | > .form-control,
32 | > .form-control-plaintext {
33 | padding: $form-floating-padding-y $form-floating-padding-x;
34 |
35 | &::placeholder {
36 | color: transparent;
37 | }
38 |
39 | &:focus,
40 | &:not(:placeholder-shown) {
41 | padding-top: $form-floating-input-padding-t;
42 | padding-bottom: $form-floating-input-padding-b;
43 | }
44 | // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
45 | &:-webkit-autofill {
46 | padding-top: $form-floating-input-padding-t;
47 | padding-bottom: $form-floating-input-padding-b;
48 | }
49 | }
50 |
51 | > .form-select {
52 | padding-top: $form-floating-input-padding-t;
53 | padding-bottom: $form-floating-input-padding-b;
54 | padding-left: $form-floating-padding-x;
55 | }
56 |
57 | > .form-control:focus,
58 | > .form-control:not(:placeholder-shown),
59 | > .form-control-plaintext,
60 | > .form-select {
61 | ~ label {
62 | transform: $form-floating-label-transform;
63 | }
64 | }
65 | // Duplicated because `:-webkit-autofill` invalidates other selectors when grouped
66 | > .form-control:-webkit-autofill {
67 | ~ label {
68 | transform: $form-floating-label-transform;
69 | }
70 | }
71 | > textarea:focus,
72 | > textarea:not(:placeholder-shown) {
73 | ~ label::after {
74 | position: absolute;
75 | inset: $form-floating-padding-y ($form-floating-padding-x * .5);
76 | z-index: -1;
77 | height: $form-floating-label-height;
78 | content: "";
79 | background-color: $input-bg;
80 | @include border-radius($input-border-radius);
81 | }
82 | }
83 | > textarea:disabled ~ label::after {
84 | background-color: $input-disabled-bg;
85 | }
86 |
87 | > .form-control-plaintext {
88 | ~ label {
89 | border-width: $input-border-width 0; // Required to properly position label text - as explained above
90 | }
91 | }
92 |
93 | > :disabled ~ label,
94 | > .form-control:disabled ~ label { // Required for `.form-control`s because of specificity
95 | color: $form-floating-label-disabled-color;
96 | }
97 | }
98 |
--------------------------------------------------------------------------------
/_sass/bootstrap/scss/forms/_form-range.scss:
--------------------------------------------------------------------------------
1 | // Range
2 | //
3 | // Style range inputs the same across browsers. Vendor-specific rules for pseudo
4 | // elements cannot be mixed. As such, there are no shared styles for focus or
5 | // active states on prefixed selectors.
6 |
7 | .form-range {
8 | width: 100%;
9 | height: add($form-range-thumb-height, $form-range-thumb-focus-box-shadow-width * 2);
10 | padding: 0; // Need to reset padding
11 | appearance: none;
12 | background-color: transparent;
13 |
14 | &:focus {
15 | outline: 0;
16 |
17 | // Pseudo-elements must be split across multiple rulesets to have an effect.
18 | // No box-shadow() mixin for focus accessibility.
19 | &::-webkit-slider-thumb { box-shadow: $form-range-thumb-focus-box-shadow; }
20 | &::-moz-range-thumb { box-shadow: $form-range-thumb-focus-box-shadow; }
21 | }
22 |
23 | &::-moz-focus-outer {
24 | border: 0;
25 | }
26 |
27 | &::-webkit-slider-thumb {
28 | width: $form-range-thumb-width;
29 | height: $form-range-thumb-height;
30 | margin-top: ($form-range-track-height - $form-range-thumb-height) * .5; // Webkit specific
31 | appearance: none;
32 | @include gradient-bg($form-range-thumb-bg);
33 | border: $form-range-thumb-border;
34 | @include border-radius($form-range-thumb-border-radius);
35 | @include box-shadow($form-range-thumb-box-shadow);
36 | @include transition($form-range-thumb-transition);
37 |
38 | &:active {
39 | @include gradient-bg($form-range-thumb-active-bg);
40 | }
41 | }
42 |
43 | &::-webkit-slider-runnable-track {
44 | width: $form-range-track-width;
45 | height: $form-range-track-height;
46 | color: transparent; // Why?
47 | cursor: $form-range-track-cursor;
48 | background-color: $form-range-track-bg;
49 | border-color: transparent;
50 | @include border-radius($form-range-track-border-radius);
51 | @include box-shadow($form-range-track-box-shadow);
52 | }
53 |
54 | &::-moz-range-thumb {
55 | width: $form-range-thumb-width;
56 | height: $form-range-thumb-height;
57 | appearance: none;
58 | @include gradient-bg($form-range-thumb-bg);
59 | border: $form-range-thumb-border;
60 | @include border-radius($form-range-thumb-border-radius);
61 | @include box-shadow($form-range-thumb-box-shadow);
62 | @include transition($form-range-thumb-transition);
63 |
64 | &:active {
65 | @include gradient-bg($form-range-thumb-active-bg);
66 | }
67 | }
68 |
69 | &::-moz-range-track {
70 | width: $form-range-track-width;
71 | height: $form-range-track-height;
72 | color: transparent;
73 | cursor: $form-range-track-cursor;
74 | background-color: $form-range-track-bg;
75 | border-color: transparent; // Firefox specific?
76 | @include border-radius($form-range-track-border-radius);
77 | @include box-shadow($form-range-track-box-shadow);
78 | }
79 |
80 | &:disabled {
81 | pointer-events: none;
82 |
83 | &::-webkit-slider-thumb {
84 | background-color: $form-range-thumb-disabled-bg;
85 | }
86 |
87 | &::-moz-range-thumb {
88 | background-color: $form-range-thumb-disabled-bg;
89 | }
90 | }
91 | }
92 |
--------------------------------------------------------------------------------
/_sass/bootstrap/scss/forms/_form-select.scss:
--------------------------------------------------------------------------------
1 | // Select
2 | //
3 | // Replaces the browser default select with a custom one, mostly pulled from
4 | // https://primer.github.io/.
5 |
6 | .form-select {
7 | --#{$prefix}form-select-bg-img: #{escape-svg($form-select-indicator)};
8 |
9 | display: block;
10 | width: 100%;
11 | padding: $form-select-padding-y $form-select-indicator-padding $form-select-padding-y $form-select-padding-x;
12 | font-family: $form-select-font-family;
13 | @include font-size($form-select-font-size);
14 | font-weight: $form-select-font-weight;
15 | line-height: $form-select-line-height;
16 | color: $form-select-color;
17 | appearance: none;
18 | background-color: $form-select-bg;
19 | background-image: var(--#{$prefix}form-select-bg-img), var(--#{$prefix}form-select-bg-icon, none);
20 | background-repeat: no-repeat;
21 | background-position: $form-select-bg-position;
22 | background-size: $form-select-bg-size;
23 | border: $form-select-border-width solid $form-select-border-color;
24 | @include border-radius($form-select-border-radius, 0);
25 | @include box-shadow($form-select-box-shadow);
26 | @include transition($form-select-transition);
27 |
28 | &:focus {
29 | border-color: $form-select-focus-border-color;
30 | outline: 0;
31 | @if $enable-shadows {
32 | @include box-shadow($form-select-box-shadow, $form-select-focus-box-shadow);
33 | } @else {
34 | // Avoid using mixin so we can pass custom focus shadow properly
35 | box-shadow: $form-select-focus-box-shadow;
36 | }
37 | }
38 |
39 | &[multiple],
40 | &[size]:not([size="1"]) {
41 | padding-right: $form-select-padding-x;
42 | background-image: none;
43 | }
44 |
45 | &:disabled {
46 | color: $form-select-disabled-color;
47 | background-color: $form-select-disabled-bg;
48 | border-color: $form-select-disabled-border-color;
49 | }
50 |
51 | // Remove outline from select box in FF
52 | &:-moz-focusring {
53 | color: transparent;
54 | text-shadow: 0 0 0 $form-select-color;
55 | }
56 | }
57 |
58 | .form-select-sm {
59 | padding-top: $form-select-padding-y-sm;
60 | padding-bottom: $form-select-padding-y-sm;
61 | padding-left: $form-select-padding-x-sm;
62 | @include font-size($form-select-font-size-sm);
63 | @include border-radius($form-select-border-radius-sm);
64 | }
65 |
66 | .form-select-lg {
67 | padding-top: $form-select-padding-y-lg;
68 | padding-bottom: $form-select-padding-y-lg;
69 | padding-left: $form-select-padding-x-lg;
70 | @include font-size($form-select-font-size-lg);
71 | @include border-radius($form-select-border-radius-lg);
72 | }
73 |
74 | @if $enable-dark-mode {
75 | @include color-mode(dark) {
76 | .form-select {
77 | --#{$prefix}form-select-bg-img: #{escape-svg($form-select-indicator-dark)};
78 | }
79 | }
80 | }
81 |
--------------------------------------------------------------------------------
/_sass/bootstrap/scss/forms/_form-text.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Form text
3 | //
4 |
5 | .form-text {
6 | margin-top: $form-text-margin-top;
7 | @include font-size($form-text-font-size);
8 | font-style: $form-text-font-style;
9 | font-weight: $form-text-font-weight;
10 | color: $form-text-color;
11 | }
12 |
--------------------------------------------------------------------------------
/_sass/bootstrap/scss/forms/_input-group.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Base styles
3 | //
4 |
5 | .input-group {
6 | position: relative;
7 | display: flex;
8 | flex-wrap: wrap; // For form validation feedback
9 | align-items: stretch;
10 | width: 100%;
11 |
12 | > .form-control,
13 | > .form-select,
14 | > .form-floating {
15 | position: relative; // For focus state's z-index
16 | flex: 1 1 auto;
17 | width: 1%;
18 | min-width: 0; // https://stackoverflow.com/questions/36247140/why-dont-flex-items-shrink-past-content-size
19 | }
20 |
21 | // Bring the "active" form control to the top of surrounding elements
22 | > .form-control:focus,
23 | > .form-select:focus,
24 | > .form-floating:focus-within {
25 | z-index: 5;
26 | }
27 |
28 | // Ensure buttons are always above inputs for more visually pleasing borders.
29 | // This isn't needed for `.input-group-text` since it shares the same border-color
30 | // as our inputs.
31 | .btn {
32 | position: relative;
33 | z-index: 2;
34 |
35 | &:focus {
36 | z-index: 5;
37 | }
38 | }
39 | }
40 |
41 |
42 | // Textual addons
43 | //
44 | // Serves as a catch-all element for any text or radio/checkbox input you wish
45 | // to prepend or append to an input.
46 |
47 | .input-group-text {
48 | display: flex;
49 | align-items: center;
50 | padding: $input-group-addon-padding-y $input-group-addon-padding-x;
51 | @include font-size($input-font-size); // Match inputs
52 | font-weight: $input-group-addon-font-weight;
53 | line-height: $input-line-height;
54 | color: $input-group-addon-color;
55 | text-align: center;
56 | white-space: nowrap;
57 | background-color: $input-group-addon-bg;
58 | border: $input-border-width solid $input-group-addon-border-color;
59 | @include border-radius($input-border-radius);
60 | }
61 |
62 |
63 | // Sizing
64 | //
65 | // Remix the default form control sizing classes into new ones for easier
66 | // manipulation.
67 |
68 | .input-group-lg > .form-control,
69 | .input-group-lg > .form-select,
70 | .input-group-lg > .input-group-text,
71 | .input-group-lg > .btn {
72 | padding: $input-padding-y-lg $input-padding-x-lg;
73 | @include font-size($input-font-size-lg);
74 | @include border-radius($input-border-radius-lg);
75 | }
76 |
77 | .input-group-sm > .form-control,
78 | .input-group-sm > .form-select,
79 | .input-group-sm > .input-group-text,
80 | .input-group-sm > .btn {
81 | padding: $input-padding-y-sm $input-padding-x-sm;
82 | @include font-size($input-font-size-sm);
83 | @include border-radius($input-border-radius-sm);
84 | }
85 |
86 | .input-group-lg > .form-select,
87 | .input-group-sm > .form-select {
88 | padding-right: $form-select-padding-x + $form-select-indicator-padding;
89 | }
90 |
91 |
92 | // Rounded corners
93 | //
94 | // These rulesets must come after the sizing ones to properly override sm and lg
95 | // border-radius values when extending. They're more specific than we'd like
96 | // with the `.input-group >` part, but without it, we cannot override the sizing.
97 |
98 | // stylelint-disable-next-line no-duplicate-selectors
99 | .input-group {
100 | &:not(.has-validation) {
101 | > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
102 | > .dropdown-toggle:nth-last-child(n + 3),
103 | > .form-floating:not(:last-child) > .form-control,
104 | > .form-floating:not(:last-child) > .form-select {
105 | @include border-end-radius(0);
106 | }
107 | }
108 |
109 | &.has-validation {
110 | > :nth-last-child(n + 3):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),
111 | > .dropdown-toggle:nth-last-child(n + 4),
112 | > .form-floating:nth-last-child(n + 3) > .form-control,
113 | > .form-floating:nth-last-child(n + 3) > .form-select {
114 | @include border-end-radius(0);
115 | }
116 | }
117 |
118 | $validation-messages: "";
119 | @each $state in map-keys($form-validation-states) {
120 | $validation-messages: $validation-messages + ":not(." + unquote($state) + "-tooltip)" + ":not(." + unquote($state) + "-feedback)";
121 | }
122 |
123 | > :not(:first-child):not(.dropdown-menu)#{$validation-messages} {
124 | margin-left: calc(-1 * #{$input-border-width}); // stylelint-disable-line function-disallowed-list
125 | @include border-start-radius(0);
126 | }
127 |
128 | > .form-floating:not(:first-child) > .form-control,
129 | > .form-floating:not(:first-child) > .form-select {
130 | @include border-start-radius(0);
131 | }
132 | }
133 |
--------------------------------------------------------------------------------
/_sass/bootstrap/scss/forms/_labels.scss:
--------------------------------------------------------------------------------
1 | //
2 | // Labels
3 | //
4 |
5 | .form-label {
6 | margin-bottom: $form-label-margin-bottom;
7 | @include font-size($form-label-font-size);
8 | font-style: $form-label-font-style;
9 | font-weight: $form-label-font-weight;
10 | color: $form-label-color;
11 | }
12 |
13 | // For use with horizontal and inline forms, when you need the label (or legend)
14 | // text to align with the form controls.
15 | .col-form-label {
16 | padding-top: add($input-padding-y, $input-border-width);
17 | padding-bottom: add($input-padding-y, $input-border-width);
18 | margin-bottom: 0; // Override the `