├── .github ├── dependabot.yml └── workflows │ └── ci.yml ├── .gitignore ├── .pre-commit-config.yaml ├── .readthedocs.yml ├── CHANGELOG.md ├── LICENSE ├── README.md ├── codecov.yml ├── docs ├── _static │ ├── furo.css │ ├── logo_square.svg │ ├── logo_wide.svg │ └── sphinx_immaterial.css ├── additional.md ├── badges_buttons.md ├── cards.md ├── changelog.md ├── conf.py ├── css_classes.md ├── css_variables.md ├── dropdowns.md ├── get_started.md ├── grids.md ├── images │ ├── ebp-logo.png │ ├── fun-fish.png │ ├── mugshot.jpeg │ └── particle_background.jpg ├── index.md ├── snippets │ ├── myst │ │ ├── article-info.txt │ │ ├── badge-basic.txt │ │ ├── badge-link.txt │ │ ├── button-link.txt │ │ ├── card-basic.txt │ │ ├── card-carousel.txt │ │ ├── card-head-foot.txt │ │ ├── card-images.txt │ │ ├── card-link.txt │ │ ├── card-title-link.txt │ │ ├── div-basic.txt │ │ ├── dropdown-basic.txt │ │ ├── dropdown-options.txt │ │ ├── grid-basic.txt │ │ ├── grid-card-columns.txt │ │ ├── grid-card.txt │ │ ├── grid-gutter.txt │ │ ├── grid-nested.txt │ │ ├── icon-fontawesome.txt │ │ ├── icon-material-design.txt │ │ ├── icon-octicon.txt │ │ ├── tab-basic.txt │ │ ├── tab-code-set.txt │ │ ├── tab-options.txt │ │ └── tab-sync.txt │ └── rst │ │ ├── article-info.txt │ │ ├── badge-basic.txt │ │ ├── badge-link.txt │ │ ├── button-link.txt │ │ ├── card-basic.txt │ │ ├── card-carousel.txt │ │ ├── card-head-foot.txt │ │ ├── card-images.txt │ │ ├── card-link.txt │ │ ├── card-title-link.txt │ │ ├── div-basic.txt │ │ ├── dropdown-basic.txt │ │ ├── dropdown-options.txt │ │ ├── grid-basic.txt │ │ ├── grid-card-columns.txt │ │ ├── grid-card.txt │ │ ├── grid-gutter.txt │ │ ├── grid-nested.txt │ │ ├── icon-fontawesome.txt │ │ ├── icon-material-design.txt │ │ ├── icon-octicon.txt │ │ ├── tab-basic.txt │ │ ├── tab-code-set.txt │ │ ├── tab-options.txt │ │ └── tab-sync.txt └── tabs.md ├── git_rebase_theme_branches.sh ├── package-lock.json ├── package.json ├── pyproject.toml ├── sphinx_design ├── __init__.py ├── _compat.py ├── article_info.py ├── badges_buttons.py ├── cards.py ├── compiled │ ├── __init__.py │ ├── material-icons_LICENSE │ ├── material-icons_VERSION.txt │ ├── material_outlined.json │ ├── material_regular.json │ ├── material_round.json │ ├── material_sharp.json │ ├── material_twotone.json │ ├── octicon_LICENSE │ ├── octicons.json │ ├── sd_tabs.js │ └── style.min.css ├── dropdown.py ├── extension.py ├── grids.py ├── icons.py ├── py.typed ├── shared.py └── tabs.py ├── style ├── _animations.scss ├── _badge.scss ├── _borders.scss ├── _button.scss ├── _cards.scss ├── _colors.scss ├── _display.scss ├── _dropdown.scss ├── _grids.scss ├── _icons.scss ├── _overrides.scss ├── _sizing.scss ├── _spacing.scss ├── _tabs.scss ├── _text.scss ├── _variables.scss └── index.scss ├── tests ├── __init__.py ├── conftest.py ├── test_misc.py ├── test_misc │ ├── test_material_outlined_.txt │ ├── test_material_regular_.txt │ ├── test_material_round_.txt │ ├── test_material_sharp_.txt │ ├── test_material_twotone_.txt │ └── test_octicons.txt ├── test_snippets.py └── test_snippets │ ├── sd_custom_directives.xml │ ├── sd_hide_title.xml │ ├── snippet_post_article-info.xml │ ├── snippet_post_badge-basic.xml │ ├── snippet_post_badge-link.xml │ ├── snippet_post_button-link.xml │ ├── snippet_post_card-basic.xml │ ├── snippet_post_card-carousel.xml │ ├── snippet_post_card-head-foot.xml │ ├── snippet_post_card-images.xml │ ├── snippet_post_card-link.xml │ ├── snippet_post_card-title-link.xml │ ├── snippet_post_div-basic.xml │ ├── snippet_post_dropdown-basic.xml │ ├── snippet_post_dropdown-options.xml │ ├── snippet_post_grid-basic.xml │ ├── snippet_post_grid-card-columns.xml │ ├── snippet_post_grid-card.xml │ ├── snippet_post_grid-gutter.xml │ ├── snippet_post_grid-nested.xml │ ├── snippet_post_icon-fontawesome.xml │ ├── snippet_post_icon-material-design.xml │ ├── snippet_post_icon-octicon.xml │ ├── snippet_post_tab-basic.xml │ ├── snippet_post_tab-code-set.xml │ ├── snippet_post_tab-options.xml │ ├── snippet_post_tab-sync.xml │ ├── snippet_pre_article-info.xml │ ├── snippet_pre_badge-basic.xml │ ├── snippet_pre_badge-link.xml │ ├── snippet_pre_button-link.xml │ ├── snippet_pre_card-basic.xml │ ├── snippet_pre_card-carousel.xml │ ├── snippet_pre_card-head-foot.xml │ ├── snippet_pre_card-images.xml │ ├── snippet_pre_card-link.xml │ ├── snippet_pre_card-title-link.xml │ ├── snippet_pre_div-basic.xml │ ├── snippet_pre_dropdown-basic.xml │ ├── snippet_pre_dropdown-options.xml │ ├── snippet_pre_grid-basic.xml │ ├── snippet_pre_grid-card-columns.xml │ ├── snippet_pre_grid-card.xml │ ├── snippet_pre_grid-gutter.xml │ ├── snippet_pre_grid-nested.xml │ ├── snippet_pre_icon-fontawesome.xml │ ├── snippet_pre_icon-material-design.xml │ ├── snippet_pre_icon-octicon.xml │ ├── snippet_pre_tab-basic.xml │ ├── snippet_pre_tab-code-set.xml │ ├── snippet_pre_tab-options.xml │ └── snippet_pre_tab-sync.xml └── tox.ini /.github/dependabot.yml: -------------------------------------------------------------------------------- 1 | # To get started with Dependabot version updates, you'll need to specify which 2 | # package ecosystems to update and where the package manifests are located. 3 | # Please see the documentation for all configuration options: 4 | # https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates 5 | 6 | version: 2 7 | updates: 8 | - package-ecosystem: github-actions 9 | directory: / 10 | commit-message: 11 | prefix: ⬆️ 12 | schedule: 13 | interval: monthly 14 | - package-ecosystem: pip 15 | directory: / 16 | commit-message: 17 | prefix: ⬆️ 18 | schedule: 19 | interval: monthly 20 | -------------------------------------------------------------------------------- /.github/workflows/ci.yml: -------------------------------------------------------------------------------- 1 | name: continuous-integration 2 | 3 | on: 4 | push: 5 | branches: [main] 6 | tags: 7 | - 'v*' 8 | pull_request: 9 | 10 | jobs: 11 | 12 | pre-commit: 13 | 14 | runs-on: ubuntu-latest 15 | 16 | steps: 17 | - uses: actions/checkout@v4 18 | - name: Set up Python 3.9 19 | uses: actions/setup-python@v5 20 | with: 21 | python-version: 3.9 22 | - uses: pre-commit/action@v3.0.1 23 | 24 | tests: 25 | 26 | strategy: 27 | fail-fast: false 28 | matrix: 29 | os: [ubuntu-latest] 30 | python-version: ["3.9", "3.10", "3.11", "3.12"] 31 | sphinx-version: ["~=7.0"] 32 | extras: ["testing"] 33 | include: 34 | - os: ubuntu-latest 35 | python-version: "3.9" 36 | sphinx-version: "~=6.0" 37 | extras: "testing" 38 | - os: ubuntu-latest 39 | python-version: "3.10" 40 | sphinx-version: "~=8.0" 41 | extras: "testing-no-myst" # TODO myst does not yet support Sphinx 8.0 42 | - os: windows-latest 43 | python-version: "3.9" 44 | sphinx-version: "~=7.0" 45 | extras: "testing" 46 | 47 | runs-on: ${{ matrix.os }} 48 | 49 | name: Tests (py${{ matrix.python-version }}, Sphinx${{ matrix.sphinx-version }}, on ${{ matrix.os }}) 50 | 51 | steps: 52 | - uses: actions/checkout@v4 53 | - name: Set up Python ${{ matrix.python-version }} 54 | uses: actions/setup-python@v5 55 | with: 56 | python-version: ${{ matrix.python-version }} 57 | cache: pip 58 | - name: Install dependencies 59 | run: | 60 | python -m pip install --upgrade pip 61 | pip install --upgrade "sphinx${{ matrix.sphinx-version }}" -e .[${{ matrix.extras}}] 62 | - name: Run pytest 63 | run: | 64 | pytest --cov=sphinx_design --cov-report=xml --cov-report=term-missing 65 | - name: Upload to Codecov 66 | if: github.event.pull_request.head.repo.full_name == github.repository && matrix.python-version == '3.9' && matrix.os == 'ubuntu-latest' 67 | uses: codecov/codecov-action@v3 68 | with: 69 | token: ${{ secrets.CODECOV_TOKEN }} 70 | name: pytests 71 | flags: pytests 72 | file: ./coverage.xml 73 | fail_ci_if_error: true 74 | 75 | docs-build-format: 76 | 77 | runs-on: ubuntu-latest 78 | strategy: 79 | matrix: 80 | format: [html, latex, man] 81 | 82 | steps: 83 | - uses: actions/checkout@v4 84 | - name: Set up Python 3.9 85 | uses: actions/setup-python@v5 86 | with: 87 | python-version: "3.9" 88 | cache: pip 89 | - name: Install dependencies 90 | run: | 91 | python -m pip install --upgrade pip 92 | pip install -e .[rtd] 93 | - name: Build documentation 94 | run: sphinx-build -nW --keep-going -b ${{ matrix.format }} docs/ docs/_build/${{ matrix.format }} 95 | 96 | # https://github.com/marketplace/actions/alls-green#why 97 | check: # This job does nothing and is only used for the branch protection 98 | 99 | if: always() 100 | 101 | needs: 102 | - pre-commit 103 | - tests 104 | - docs-build-format 105 | 106 | runs-on: ubuntu-latest 107 | 108 | steps: 109 | - name: Decide whether the needed jobs succeeded or failed 110 | uses: re-actors/alls-green@release/v1 111 | with: 112 | jobs: ${{ toJSON(needs) }} 113 | 114 | publish: 115 | 116 | name: Publish to PyPi 117 | needs: [pre-commit, tests] 118 | if: github.event_name == 'push' && startsWith(github.event.ref, 'refs/tags') 119 | runs-on: ubuntu-latest 120 | steps: 121 | - name: Checkout source 122 | uses: actions/checkout@v4 123 | - name: Set up Python 124 | uses: actions/setup-python@v5 125 | with: 126 | python-version: 3.9 127 | - name: install flit 128 | run: | 129 | pip install flit~=3.4 130 | - name: Build and publish 131 | run: | 132 | flit publish 133 | env: 134 | FLIT_USERNAME: __token__ 135 | FLIT_PASSWORD: ${{ secrets.PYPI_KEY }} 136 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # OS files 2 | .DS_Store 3 | 4 | # Byte-compiled / optimized / DLL files 5 | __pycache__/ 6 | *.py[cod] 7 | *$py.class 8 | 9 | # C extensions 10 | *.so 11 | 12 | # Distribution / packaging 13 | .Python 14 | build/ 15 | develop-eggs/ 16 | dist/ 17 | downloads/ 18 | eggs/ 19 | .eggs/ 20 | lib/ 21 | lib64/ 22 | parts/ 23 | sdist/ 24 | var/ 25 | wheels/ 26 | share/python-wheels/ 27 | *.egg-info/ 28 | .installed.cfg 29 | *.egg 30 | MANIFEST 31 | 32 | # PyInstaller 33 | # Usually these files are written by a python script from a template 34 | # before PyInstaller builds the exe, so as to inject date/other infos into it. 35 | *.manifest 36 | *.spec 37 | 38 | # Installer logs 39 | pip-log.txt 40 | pip-delete-this-directory.txt 41 | 42 | # Unit test / coverage reports 43 | htmlcov/ 44 | .tox/ 45 | .nox/ 46 | .coverage 47 | .coverage.* 48 | .cache 49 | nosetests.xml 50 | coverage.xml 51 | *.cover 52 | *.py,cover 53 | .hypothesis/ 54 | .pytest_cache/ 55 | cover/ 56 | 57 | # Translations 58 | *.mo 59 | *.pot 60 | 61 | # Django stuff: 62 | *.log 63 | local_settings.py 64 | db.sqlite3 65 | db.sqlite3-journal 66 | 67 | # Flask stuff: 68 | instance/ 69 | .webassets-cache 70 | 71 | # Scrapy stuff: 72 | .scrapy 73 | 74 | # Sphinx documentation 75 | docs/_build/ 76 | 77 | # PyBuilder 78 | .pybuilder/ 79 | target/ 80 | 81 | # Jupyter Notebook 82 | .ipynb_checkpoints 83 | 84 | # IPython 85 | profile_default/ 86 | ipython_config.py 87 | 88 | # pyenv 89 | # For a library or package, you might want to ignore these files since the code is 90 | # intended to run in multiple environments; otherwise, check them in: 91 | # .python-version 92 | 93 | # pipenv 94 | # According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control. 95 | # However, in case of collaboration, if having platform-specific dependencies or dependencies 96 | # having no cross-platform support, pipenv may install dependencies that don't work, or not 97 | # install all needed dependencies. 98 | #Pipfile.lock 99 | 100 | # PEP 582; used by e.g. github.com/David-OConnor/pyflow 101 | __pypackages__/ 102 | 103 | # Celery stuff 104 | celerybeat-schedule 105 | celerybeat.pid 106 | 107 | # SageMath parsed files 108 | *.sage.py 109 | 110 | # Environments 111 | .env 112 | .venv 113 | env/ 114 | venv/ 115 | ENV/ 116 | env.bak/ 117 | venv.bak/ 118 | 119 | # Spyder project settings 120 | .spyderproject 121 | .spyproject 122 | 123 | # Rope project settings 124 | .ropeproject 125 | 126 | # mkdocs documentation 127 | /site 128 | 129 | # mypy 130 | .mypy_cache/ 131 | .dmypy.json 132 | dmypy.json 133 | 134 | # Pyre type checker 135 | .pyre/ 136 | 137 | # pytype static type analyzer 138 | .pytype/ 139 | 140 | # Cython debug symbols 141 | cython_debug/ 142 | 143 | .vscode/ 144 | node_modules/ 145 | -------------------------------------------------------------------------------- /.pre-commit-config.yaml: -------------------------------------------------------------------------------- 1 | # Install pre-commit hooks via 2 | # pre-commit install 3 | 4 | exclude: > 5 | (?x)^( 6 | \.vscode/settings\.json| 7 | tests/.*xml| 8 | tests/.*txt| 9 | )$ 10 | 11 | repos: 12 | 13 | - repo: https://github.com/pre-commit/pre-commit-hooks 14 | rev: v4.6.0 15 | hooks: 16 | - id: check-json 17 | - id: check-yaml 18 | - id: end-of-file-fixer 19 | - id: trailing-whitespace 20 | 21 | - repo: https://github.com/astral-sh/ruff-pre-commit 22 | rev: v0.5.5 23 | hooks: 24 | - id: ruff 25 | args: [--fix] 26 | - id: ruff-format 27 | 28 | - repo: https://github.com/pre-commit/mirrors-mypy 29 | rev: v1.11.1 30 | hooks: 31 | - id: mypy 32 | additional_dependencies: [] 33 | 34 | - repo: local 35 | hooks: 36 | - id: css 37 | name: css 38 | description: Compile the SCSS/SASS files to CSS inside the python package 39 | files: \.(scss|sass)$ 40 | language: node 41 | additional_dependencies: ['sass@1.35.2'] 42 | # entry: sass 43 | entry: npm run css 44 | require_serial: true 45 | pass_filenames: false 46 | # args: [--style=compressed, --no-source-map, style/index.scss, sphinx_design/compiled/style.min.css] 47 | 48 | - id: tsc 49 | name: tsc (jsdoc) 50 | entry: tsc 51 | language: node 52 | files: \.(js)$ 53 | types_or: [javascript] 54 | args: [--allowJs, --noEmit, --strict] 55 | additional_dependencies: 56 | - typescript 57 | -------------------------------------------------------------------------------- /.readthedocs.yml: -------------------------------------------------------------------------------- 1 | version: 2 2 | 3 | build: 4 | os: ubuntu-22.04 5 | tools: 6 | python: "3.10" 7 | 8 | python: 9 | install: 10 | - method: pip 11 | path: . 12 | extra_requirements: 13 | - rtd 14 | 15 | sphinx: 16 | builder: html 17 | fail_on_warning: true 18 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License Copyright (c) 2023 Chris Sewell 2 | 3 | Permission is hereby granted, free 4 | of charge, to any person obtaining a copy of this software and associated 5 | documentation files (the "Software"), to deal in the Software without 6 | restriction, including without limitation the rights to use, copy, modify, merge, 7 | publish, distribute, sublicense, and/or sell copies of the Software, and to 8 | permit persons to whom the Software is furnished to do so, subject to the 9 | following conditions: 10 | 11 | The above copyright notice and this permission notice 12 | (including the next paragraph) shall be included in all copies or substantial 13 | portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF 16 | ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 17 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO 18 | EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR 19 | OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 20 | FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # sphinx-design 2 | 3 | [![Github-CI][github-ci]][github-link] 4 | [![Coverage Status][codecov-badge]][codecov-link] 5 | [![PyPI][pypi-badge]][pypi-link] 6 | 7 | A sphinx extension for designing beautiful, view size responsive web components. 8 | 9 | Created with inspiration from [Bootstrap](https://getbootstrap.com/) (v5), [Material Design](https://material.io) and [Material-UI](https://material-ui.com/) design frameworks. 10 | 11 | ## Usage 12 | 13 | Simply pip install `sphinx-design` and add the extension to your `conf.py`: 14 | 15 | ```python 16 | extensions = ["sphinx_design"] 17 | ``` 18 | 19 | ## Supported browsers 20 | 21 | - Chrome >= 60 22 | - Firefox >= 60 23 | - Firefox ESR 24 | - iOS >= 12 25 | - Safari >= 12 26 | - Explorer >= 12 27 | 28 | (Mirrors: ) 29 | 30 | ## Theme support 31 | 32 | View the documentation in multiple themes: 33 | 34 | - [alabaster](https://sphinx-design.readthedocs.io/en/alabaster-theme) 35 | - [sphinx-book-theme](https://sphinx-design.readthedocs.io/en/sbt-theme) 36 | - [pydata-sphinx-theme](https://sphinx-design.readthedocs.io/en/pydata-theme) 37 | - [sphinx-rtd-theme](https://sphinx-design.readthedocs.io/en/rtd-theme) 38 | - [furo](https://sphinx-design.readthedocs.io/en/furo-theme) 39 | 40 | ## Comparison to sphinx-panels 41 | 42 | This package is an iteration on [sphinx-panels](https://github.com/executablebooks/sphinx-panels) and intends to replace it. 43 | See [Migrating from sphinx-panels](./docs/get_started.md) for more information. 44 | 45 | ## Development 46 | 47 | It is recommended to use [tox](https://tox.readthedocs.io/en/latest/) to run the tests and document builds. 48 | Run `tox -va` to see all the available tox environments. 49 | 50 | To run linting, formatting and SASS compilation, use [pre-commit](https://pre-commit.com/). 51 | `pre-commit run --all css` will run the SASS compiler, for which you will need [node](https://nodejs.org) and [npm](https://www.npmjs.com/) installed, 52 | or you can directly run `npm run css`. 53 | 54 | ## TODO 55 | 56 | - note design goal; to be flexible, but limit the amount of directive nesting required. 57 | This factors in to 58 | - card header/footer syntax? (don't really want to have to use separate directives for these, hence `^^^`/`+++` syntax) 59 | - auto-wrap `grid-item` and `tab-item`, if not already inside `grid` or `tab-set`? 60 | 61 | grids items cannot contain headers; is this in anyway possible with docutils structure? 62 | 63 | naming of directives/roles: standard prefix? 64 | 65 | why are cards setup with "word-wrap: break-word;"? 66 | 67 | handle latex 68 | 69 | Use autoprefixer when compiling SASS (see ) 70 | 71 | horizontal card (grid row inside card, picture on left) 72 | 73 | subtitle for card (see ) 74 | 75 | 76 | [github-ci]: https://github.com/executablebooks/sphinx-design/workflows/continuous-integration/badge.svg?branch=main 77 | [github-link]: https://github.com/executablebooks/sphinx-design 78 | [codecov-badge]: https://codecov.io/gh/executablebooks/sphinx-design/branch/main/graph/badge.svg 79 | [codecov-link]: https://codecov.io/gh/executablebooks/sphinx-design 80 | [pypi-badge]: https://img.shields.io/pypi/v/sphinx-design.svg 81 | [pypi-link]: https://pypi.org/project/sphinx-design 82 | -------------------------------------------------------------------------------- /codecov.yml: -------------------------------------------------------------------------------- 1 | coverage: 2 | status: 3 | project: 4 | default: 5 | target: 85% 6 | threshold: 0.2% 7 | patch: 8 | default: 9 | target: 75% 10 | threshold: 0.2% 11 | -------------------------------------------------------------------------------- /docs/_static/furo.css: -------------------------------------------------------------------------------- 1 | body { 2 | --sd-fontsize-dropdown: var(--admonition-font-size); 3 | --sd-fontsize-dropdown-title: var(--admonition-title-font-size); 4 | --sd-fontweight-dropdown-title: 500; 5 | } 6 | -------------------------------------------------------------------------------- /docs/_static/logo_square.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /docs/_static/sphinx_immaterial.css: -------------------------------------------------------------------------------- 1 | body { 2 | --sd-fontsize-dropdown: .64rem; 3 | --sd-fontsize-dropdown-title: .64rem; 4 | --sd-fontweight-dropdown-title: 700; 5 | } 6 | 7 | details.sd-dropdown { 8 | padding-left: 0; 9 | padding-right: 0; 10 | } 11 | 12 | summary.sd-summary-title::after { 13 | display: none; 14 | right: 0 !important; 15 | } 16 | 17 | summary.sd-summary-title::before { 18 | display: none; 19 | left: 0 !important; 20 | } 21 | 22 | summary.sd-summary-title { 23 | width: 100% !important; 24 | margin-left: 0; 25 | padding: .5em 1em !important; 26 | } 27 | 28 | summary.sd-summary-title svg.sd-octicon { 29 | max-width: none !important; 30 | } 31 | -------------------------------------------------------------------------------- /docs/additional.md: -------------------------------------------------------------------------------- 1 | (special)= 2 | 3 | # Additional 4 | 5 | These are additional components that are not part of the standard Materials Design or Bootstrap systems. 6 | 7 | ## `article-info` 8 | 9 | This directive is used to display a block of information about an article, 10 | normally positioned just below the title of the article (shown below with non-standard outline). 11 | 12 | ```{article-info} 13 | :avatar: images/ebp-logo.png 14 | :avatar-link: https://executablebooks.org/ 15 | :avatar-outline: muted 16 | :author: Executable Books 17 | :date: "Jul 24, 2021" 18 | :read-time: "5 min read" 19 | :class-container: sd-p-2 sd-outline-muted sd-rounded-1 20 | ``` 21 | 22 | `````{dropdown-syntax} 23 | 24 | ````{tab-set-code} 25 | ```{literalinclude} ./snippets/myst/article-info.txt 26 | :language: markdown 27 | ``` 28 | ```{literalinclude} ./snippets/rst/article-info.txt 29 | :language: rst 30 | ``` 31 | ```` 32 | ````` 33 | 34 | The `author`, `date`, and `read-time` options are parsed as syntax, 35 | so you can use substitutions like: 36 | 37 | - `date` 38 | - MyST: `` :date: "{sub-ref}`today`" `` 39 | - RST: `:data: |today|` 40 | - `read-time` 41 | - MyST: `` :read-time: "{sub-ref}`wordcount-minutes` min read" `` 42 | 43 | ### options 44 | 45 | avatar 46 | : A URI (relative file path or URL) to an image for use as the avatar (a user portrait, logo or branded graphic). 47 | 48 | avatar-alt 49 | : Alternative text for the avatar. 50 | 51 | avatar-link 52 | : A URL to link to if the avatar icon is clicked. 53 | 54 | avatar-outline 55 | : A semantic color to use for the outline of the avatar. 56 | 57 | author 58 | : Text to display in the author of of the article. 59 | 60 | date 61 | : Text to display in the date of the article. 62 | 63 | read-time 64 | : Text to indicate the time to read the article. 65 | 66 | class-container 67 | : Additional CSS classes for the container element. 68 | 69 | class-avatar 70 | : Additional CSS classes for the avatar element. 71 | -------------------------------------------------------------------------------- /docs/changelog.md: -------------------------------------------------------------------------------- 1 | ```{include} ../CHANGELOG.md 2 | ``` 3 | -------------------------------------------------------------------------------- /docs/conf.py: -------------------------------------------------------------------------------- 1 | """Configuration file for the Sphinx documentation builder.""" 2 | 3 | import os 4 | 5 | project = "Sphinx Design" 6 | copyright = "2021, Executable Book Project" 7 | author = "Executable Book Project" 8 | 9 | extensions = ["myst_parser", "sphinx_design", "sphinx.ext.extlinks"] 10 | 11 | suppress_warnings = ["design.fa-build"] 12 | sd_fontawesome_latex = True 13 | sd_custom_directives = { 14 | "dropdown-syntax": { 15 | "inherit": "dropdown", 16 | "argument": "Syntax", 17 | "options": { 18 | "color": "primary", 19 | "icon": "code", 20 | }, 21 | } 22 | } 23 | 24 | extlinks = { 25 | "pr": ("https://github.com/executablebooks/sphinx-design/pull/%s", "PR #%s"), 26 | "user": ("https://github.com/%s", "@%s"), 27 | } 28 | 29 | html_theme = os.environ.get("SPHINX_THEME", "alabaster") 30 | html_title = f"Sphinx Design ({html_theme.replace('_', '-')})" 31 | 32 | html_static_path = ["_static"] 33 | html_logo = "_static/logo_wide.svg" 34 | html_favicon = "_static/logo_square.svg" 35 | 36 | if html_theme not in ("sphinx_book_theme", "pydata_sphinx_theme"): 37 | html_css_files = [ 38 | "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" 39 | ] 40 | if html_theme == "alabaster": 41 | html_logo = "" 42 | html_theme_options = { 43 | "logo": "logo_wide.svg", 44 | "logo_name": False, 45 | "description": "(alabaster theme)", 46 | "github_button": False, 47 | "github_type": "star", 48 | "github_banner": False, 49 | "github_user": "executablebooks", 50 | "github_repo": "sphinx-design", 51 | } 52 | if html_theme == "sphinx_book_theme": 53 | html_theme_options = { 54 | "repository_url": "https://github.com/executablebooks/sphinx-design", 55 | "use_repository_button": True, 56 | "use_edit_page_button": True, 57 | "use_issues_button": True, 58 | "repository_branch": "main", 59 | "path_to_docs": "docs", 60 | "home_page_in_toc": False, 61 | } 62 | if html_theme == "furo": 63 | html_css_files = [ 64 | "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/fontawesome.min.css", 65 | "furo.css", 66 | ] 67 | html_theme_options = { 68 | "sidebar_hide_name": True, 69 | } 70 | if html_theme == "sphinx_rtd_theme": 71 | html_theme_options = { 72 | "logo_only": True, 73 | } 74 | if html_theme == "sphinx_immaterial": 75 | extensions.append("sphinx_immaterial") 76 | html_css_files = ["sphinx_immaterial.css"] 77 | html_theme_options = { 78 | "icon": { 79 | "repo": "fontawesome/brands/github", 80 | }, 81 | "site_url": "https://sphinx-design.readthedocs.io/", 82 | "repo_url": "https://github.com/executablebooks/sphinx-design", 83 | "repo_name": "Sphinx-Design", 84 | "palette": [ 85 | { 86 | "media": "(prefers-color-scheme: light)", 87 | "scheme": "default", 88 | "primary": "blue", 89 | "accent": "light-blue", 90 | "toggle": { 91 | "icon": "material/weather-night", 92 | "name": "Switch to dark mode", 93 | }, 94 | }, 95 | { 96 | "media": "(prefers-color-scheme: dark)", 97 | "scheme": "slate", 98 | "primary": "blue", 99 | "accent": "yellow", 100 | "toggle": { 101 | "icon": "material/weather-sunny", 102 | "name": "Switch to light mode", 103 | }, 104 | }, 105 | ], 106 | } 107 | 108 | exclude_patterns = ["_build", "Thumbs.db", ".DS_Store"] 109 | myst_enable_extensions = [ 110 | "attrs_inline", 111 | "colon_fence", 112 | "deflist", 113 | "substitution", 114 | "html_image", 115 | ] 116 | 117 | myst_substitutions = { 118 | "loremipsum": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. " 119 | "Sed iaculis arcu vitae odio gravida congue. Donec porttitor ac risus et condimentum. " 120 | "Phasellus bibendum ac risus a sollicitudin. " 121 | "Proin pulvinar risus ac mauris aliquet fermentum et varius nisi. " 122 | "Etiam sit amet metus ac ipsum placerat congue semper non diam. " 123 | "Nunc luctus tincidunt ipsum id eleifend. Ut sed faucibus ipsum. " 124 | "Aliquam maximus dictum posuere. Nunc vitae libero nec enim tempus euismod. " 125 | "Aliquam sed lectus ac nisl sollicitudin ultricies id at neque. " 126 | "Aliquam fringilla odio vitae lorem ornare, sit amet scelerisque orci fringilla. " 127 | "Nam sed arcu dignissim, ultrices quam sit amet, commodo ipsum. " 128 | "Etiam quis nunc at ligula tincidunt eleifend." 129 | } 130 | -------------------------------------------------------------------------------- /docs/css_variables.md: -------------------------------------------------------------------------------- 1 | # CSS Variables 2 | 3 | All colors used by sphinx-design are defined as [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties). 4 | Therefore they can be overriden by adding a `.css` file in a `_static` folder in your projects source folder (see [the sphinx documentation](https://www.sphinx-doc.org/en/master/usage/configuration.html#confval-html_css_files)): 5 | 6 | ```python 7 | html_static_path = ['_static'] 8 | html_css_files = ['custom.css'] 9 | ``` 10 | 11 | For colors, there are nine semantic colors that can be defined. 12 | For each of these colors you should define: 13 | 14 | - `--sd-color-{name}` as the actual color 15 | - `--sd-color-{name}-highlight` as the color used when the component is highlighted 16 | (e.g. if hovering over a button). By default, this is a 15% darker version of the original color. 17 | - `--sd-color-{name}-text` as the color to use for text displayed on top of the color. 18 | By default, this is dark grey for light colors and white for dark colors. 19 | 20 | The defaults are: 21 | 22 | ```css 23 | :root { 24 | --sd-color-primary: #007bff; 25 | --sd-color-secondary: #6c757d; 26 | --sd-color-success: #28a745; 27 | --sd-color-info: #17a2b8; 28 | --sd-color-warning: #f0b37e; 29 | --sd-color-danger: #dc3545; 30 | --sd-color-light: #f8f9fa; 31 | --sd-color-muted: #6c757d; 32 | --sd-color-dark: #212529; 33 | --sd-color-primary-highlight: #0069d9; 34 | --sd-color-secondary-highlight: #5c636a; 35 | --sd-color-success-highlight: #228e3b; 36 | --sd-color-info-highlight: #148a9c; 37 | --sd-color-warning-highlight: #cc986b; 38 | --sd-color-danger-highlight: #bb2d3b; 39 | --sd-color-light-highlight: #d3d4d5; 40 | --sd-color-muted-highlight: #5c636a; 41 | --sd-color-dark-highlight: #1c1f23; 42 | --sd-color-primary-text: #fff; 43 | --sd-color-secondary-text: #fff; 44 | --sd-color-success-text: #fff; 45 | --sd-color-info-text: #fff; 46 | --sd-color-warning-text: #212529; 47 | --sd-color-danger-text: #fff; 48 | --sd-color-light-text: #212529; 49 | --sd-color-muted-text: #fff; 50 | --sd-color-dark-text: #fff; 51 | --sd-color-shadow: rgba(0, 0, 0, 0.15); 52 | --sd-color-card-border: rgba(0, 0, 0, 0.125); 53 | --sd-color-card-border-hover: hsla(231, 99%, 66%, 1); 54 | --sd-color-card-background: transparent; 55 | --sd-color-card-text: inherit; 56 | --sd-color-card-header: transparent; 57 | --sd-color-card-footer: transparent; 58 | --sd-color-tabs-label-active: hsla(231, 99%, 66%, 1); 59 | --sd-color-tabs-label-hover: hsla(231, 99%, 66%, 1); 60 | --sd-color-tabs-label-inactive: hsl(0, 0%, 66%); 61 | --sd-color-tabs-underline-active: hsla(231, 99%, 66%, 1); 62 | --sd-color-tabs-underline-hover: rgba(178, 206, 245, 0.62); 63 | --sd-color-tabs-underline-inactive: transparent; 64 | --sd-color-tabs-overline: rgb(222, 222, 222); 65 | --sd-color-tabs-underline: rgb(222, 222, 222); 66 | --sd-fontsize-tabs-label: 1rem; 67 | --sd-fontsize-dropdown-title: 1rem; 68 | --sd-fontweight-dropdown-title: 700; 69 | } 70 | ``` 71 | -------------------------------------------------------------------------------- /docs/dropdowns.md: -------------------------------------------------------------------------------- 1 | (sd-dropdowns)= 2 | 3 | # Dropdowns 4 | 5 | Dropdowns can be used to toggle, usually *non-essential*, content and show it only when a user clicks on the header panel. 6 | 7 | The dropdown can have a title, as the directive argument, and the `open` option can be used to initialise the dropdown in the open state. 8 | 9 | :::{dropdown} 10 | Dropdown content 11 | ::: 12 | 13 | :::{dropdown} Dropdown title 14 | Dropdown content 15 | ::: 16 | 17 | :::{dropdown} Open dropdown 18 | :open: 19 | 20 | Dropdown content 21 | ::: 22 | 23 | `````{dropdown-syntax} 24 | 25 | ````{tab-set-code} 26 | ```{literalinclude} ./snippets/myst/dropdown-basic.txt 27 | :language: markdown 28 | ``` 29 | ```{literalinclude} ./snippets/rst/dropdown-basic.txt 30 | :language: rst 31 | ``` 32 | ```` 33 | ````` 34 | 35 | ## Opening animations 36 | 37 | Use `:animate: fade-in` or `:animate: fade-in-slide-down` options to animate the reveal of the hidden content. 38 | 39 | :::{dropdown} Dropdown `fade-in` 40 | :animate: fade-in 41 | 42 | {{ loremipsum }} 43 | ::: 44 | 45 | :::{dropdown} Dropdown `fade-in-slide-down` 46 | :animate: fade-in-slide-down 47 | 48 | {{ loremipsum }} 49 | ::: 50 | 51 | ## More examples 52 | 53 | :::{dropdown} Dropdown with icon 54 | :icon: quote 55 | 56 | Dropdown content 57 | ::: 58 | 59 | :::{dropdown} Dropdown with icon and very long title, *lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor, nunc nec fermentum ultricies, nunc sapien ultricies nunc, nec ultricies sapien sapien nec sapien* 60 | :icon: quote 61 | 62 | Dropdown content 63 | ::: 64 | 65 | :::{dropdown} Using option `:chevron: down-up` 66 | :chevron: down-up 67 | 68 | Dropdown content 69 | ::: 70 | 71 | ## Dropdowns in other components 72 | 73 | Dropdowns can be nested inside other components, such as inside parent dropdowns or within [grid items](./grids.md). 74 | 75 | ::::{admonition} Here is an admonition with a dropdown 76 | 77 | Admonition content 78 | 79 | :::{dropdown} Dropdown inside admonition 80 | :icon: quote 81 | 82 | {{ loremipsum }} 83 | ::: 84 | :::: 85 | 86 | ::::{dropdown} Parent dropdown title 87 | :open: 88 | 89 | :::{dropdown} Child dropdown title 90 | :color: warning 91 | :icon: alert 92 | 93 | Dropdown content 94 | ::: 95 | :::: 96 | 97 | :::::{grid} 1 1 2 2 98 | :gutter: 1 99 | 100 | ::::{grid-item} 101 | :::{dropdown} Dropdown Column 1 102 | Dropdown content 103 | ::: 104 | :::: 105 | 106 | ::::{grid-item} 107 | :::{dropdown} Dropdown Column 2 108 | Dropdown content 109 | ::: 110 | :::: 111 | 112 | ::::: 113 | 114 | ## `dropdown` options 115 | 116 | open 117 | : Open the dropdown by default. 118 | 119 | color 120 | : Set the color of the dropdown header (background and font). 121 | One of the semantic color names: `primary`, `secondary`, `success`, `danger`, `warning`, `info`, `light`, `dark`, `muted`. 122 | 123 | icon 124 | : Set an [octicon icon](icons) to prefix the dropdown header. 125 | 126 | chevron 127 | : The open-close direction of the chevron. 128 | One of: `right-down`, `down-up`. 129 | 130 | animate 131 | : Animate the dropdown opening (`fade-in` or `fade-in-slide-down`). 132 | 133 | margin 134 | : Outer margin of grid. 135 | One (all) or four (top bottom left right) values from: 0, 1, 2, 3, 4, 5, auto. 136 | 137 | name 138 | : Set a reference-able name for the dropdown container. 139 | 140 | class-container 141 | : Additional CSS classes for the container element. 142 | 143 | class-title 144 | : Additional CSS classes for the title element. 145 | 146 | class-body 147 | : Additional CSS classes for the body element. 148 | -------------------------------------------------------------------------------- /docs/get_started.md: -------------------------------------------------------------------------------- 1 | # Getting Started 2 | 3 | ```{article-info} 4 | :avatar: images/ebp-logo.png 5 | :avatar-link: https://executablebooks.org 6 | :author: "[Chris Sewell](https://github.com/chrisjsewell)" 7 | :date: "{sub-ref}`today`" 8 | :read-time: "1 min read" 9 | :class-avatar: sd-animate-grow50-rot20 10 | ``` 11 | 12 | ## Usage 13 | 14 | Simply pip install `sphinx-design` and add the extension to your `conf.py`: 15 | 16 | ```python 17 | extensions = ["sphinx_design"] 18 | ``` 19 | 20 | For using with [MyST Parser](https://github.com/executablebooks/myst-parser), for Markdown documentation, it is recommended to use the `colon_fence` syntax extension: 21 | 22 | ```python 23 | extensions = ["myst_parser", "sphinx_design"] 24 | myst_enable_extensions = ["colon_fence"] 25 | ``` 26 | 27 | ## Configuration 28 | 29 | To hide the the title header of a page, add to the top of the page: 30 | 31 | ::::{tab-set} 32 | :::{tab-item} MyST Markdown 33 | ```markdown 34 | --- 35 | sd_hide_title: true 36 | --- 37 | ``` 38 | ::: 39 | :::{tab-item} RestructuredText 40 | ```rst 41 | :sd_hide_title: 42 | ``` 43 | ::: 44 | :::: 45 | 46 | ### Creating custom directives 47 | 48 | :::{versionadded} 0.6.0 49 | ::: 50 | 51 | You can use the `sd_custom_directives` configuration option in your `conf.py` to add custom directives, with default option values: 52 | 53 | ```python 54 | sd_custom_directives = { 55 | "dropdown-syntax": { 56 | "inherit": "dropdown", 57 | "argument": "Syntax", 58 | "options": { 59 | "color": "primary", 60 | "icon": "code", 61 | }, 62 | } 63 | } 64 | ``` 65 | 66 | The key is the new directive name to add, and the value is a dictionary with the following keys: 67 | 68 | - `inherit`: The directive to inherit from (e.g. `dropdown`) 69 | - `argument`: The default argument (optional, only for directives that take a single argument) 70 | - `options`: A dictionary of default options for the directive (optional) 71 | 72 | ## Supported browsers 73 | 74 | - Chrome >= 60 75 | - Firefox >= 60 76 | - Firefox ESR 77 | - iOS >= 12 78 | - Safari >= 12 79 | - Explorer >= 12 80 | 81 | (Mirrors: ) 82 | 83 | ## Migrating from sphinx-panels 84 | 85 | This package arose as an iteration on [sphinx-panels](https://github.com/executablebooks/sphinx-panels), with the intention to make it more flexible, easier to use, and minimise CSS clashes wth sphinx themes. 86 | 87 | Notable changes: 88 | 89 | ### Reduce direct use of CSS classes 90 | 91 | These are replaced by the use of directive options, which are: 92 | 93 | - Easier to understand 94 | - Easier to validate 95 | - Easier to work with non-HTML outputs 96 | - Easier to improve/refactor 97 | 98 | ### `panel` directive replaced 99 | 100 | The `panel` directive is replaced by the use of the top-level `grid` directive, 101 | then using `grid-item-card` directive children, rather than delimiting cards by `---`. 102 | 103 | If no card is needed, then the `grid-item` directive can be used instead and `card` can be also used independently of grids. 104 | 105 | Approximately, `.. panels::` is equivalent to `.. grid:: 1 2 2 2` with option `:gutter: 2`. 106 | 107 | ### `tabbed` directive replaced 108 | 109 | The `tabbed` directive is replaced by the use of the top-level `tab-set` directive, 110 | then using `tab-item` directive children. 111 | 112 | The `:sync:` option allows to synchronize tab selection across sets. 113 | 114 | The `tab-set-code` directive provides a shorthand for synced code examples. 115 | 116 | ### `link-button` directive replaced 117 | 118 | The `link-button` directive is replaced by the use of `button-ref`/`button-link`. 119 | 120 | Directive options have also been added to replace the use of classes: 121 | 122 | - `stretched-link` -> `:click-parent:` 123 | - `btn-block` -> `:expand:` 124 | 125 | ### `octicon` icon role 126 | 127 | The default SVGs produced are now sized relative to the surrounding text (i.e. using `1em`). 128 | The syntax for specifying a custom size and adding classes is also changed. 129 | 130 | This is similar for favicon icons, where the `,` delimiter is also replaced by `;`, e.g. ``:fa:`name,class` `` -> ``:fa:`name;class` ``. 131 | 132 | ### Improved CSS 133 | 134 | Updated Bootstrap CSS from v4 -> v5, 135 | which in particular allows top-level grid to define both column numbers and gutter sizes. 136 | 137 | All CSS classes are prefixed with `sd-` (no clash with other theme/extension CSS) 138 | 139 | All colors use CSS variables (customisable) 140 | -------------------------------------------------------------------------------- /docs/images/ebp-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/executablebooks/sphinx-design/b3d6eddc5bf436e35c213a29f0dda3c8ffb716f7/docs/images/ebp-logo.png -------------------------------------------------------------------------------- /docs/images/fun-fish.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/executablebooks/sphinx-design/b3d6eddc5bf436e35c213a29f0dda3c8ffb716f7/docs/images/fun-fish.png -------------------------------------------------------------------------------- /docs/images/mugshot.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/executablebooks/sphinx-design/b3d6eddc5bf436e35c213a29f0dda3c8ffb716f7/docs/images/mugshot.jpeg -------------------------------------------------------------------------------- /docs/images/particle_background.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/executablebooks/sphinx-design/b3d6eddc5bf436e35c213a29f0dda3c8ffb716f7/docs/images/particle_background.jpg -------------------------------------------------------------------------------- /docs/index.md: -------------------------------------------------------------------------------- 1 | --- 2 | sd_hide_title: true 3 | --- 4 | 5 | # sphinx-design 6 | 7 | ::::::{div} landing-title 8 | :style: "padding: 0.1rem 0.5rem 0.6rem 0; background-image: linear-gradient(315deg, #438ff9 0%, #1572f4 74%); clip-path: polygon(0px 0px, 100% 0%, 100% 100%, 0% calc(100% - 1.5rem)); -webkit-clip-path: polygon(0px 0px, 100% 0%, 100% 100%, 0% calc(100% - 1.5rem));" 9 | 10 | ::::{grid} 11 | :reverse: 12 | :gutter: 2 3 3 3 13 | :margin: 4 4 1 2 14 | 15 | :::{grid-item} 16 | :columns: 12 4 4 4 17 | 18 | ```{image} ./_static/logo_square.svg 19 | :width: 200px 20 | :class: sd-m-auto sd-animate-grow50-rot20 21 | ``` 22 | ::: 23 | 24 | :::{grid-item} 25 | :columns: 12 8 8 8 26 | :child-align: justify 27 | :class: sd-text-white sd-fs-3 28 | 29 | A sphinx extension for designing beautiful, screen-size responsive web-components. 30 | 31 | ```{button-ref} get_started 32 | :ref-type: doc 33 | :outline: 34 | :color: white 35 | :class: sd-px-4 sd-fs-5 36 | 37 | Get Started 38 | ``` 39 | 40 | ::: 41 | :::: 42 | 43 | :::::: 44 | 45 | Conflict free CSS 46 | : All CSS classes are prefixed, to avoid conflicts with other frameworks. 47 | 48 | Works without JavaScript 49 | : JavaScript is not required for any "essential" functionality. 50 | 51 | Configurable 52 | : All colors can be configured using CSS variables. 53 | 54 | Supports non-HTML output formats 55 | : Components degrade gracefully for non-HTML formats. 56 | 57 | ```{toctree} 58 | :hidden: 59 | 60 | get_started 61 | ``` 62 | 63 | ```{toctree} 64 | :caption: Components 65 | :hidden: 66 | 67 | grids 68 | cards 69 | dropdowns 70 | tabs 71 | badges_buttons 72 | additional 73 | ``` 74 | 75 | ```{toctree} 76 | :caption: Styling 77 | :hidden: 78 | 79 | css_variables 80 | css_classes 81 | ``` 82 | 83 | ```{toctree} 84 | :caption: Themes 85 | :hidden: 86 | 87 | alabaster 88 | sphinx-book-theme 89 | pydata-sphinx-theme 90 | sphinx-rtd-theme 91 | furo 92 | ``` 93 | 94 | 95 | ```{toctree} 96 | :caption: Development 97 | :hidden: 98 | 99 | changelog 100 | ``` 101 | 102 | ::::{grid} 1 2 2 3 103 | :margin: 4 4 0 0 104 | :gutter: 1 105 | 106 | :::{grid-item-card} {octicon}`table` Grids 107 | :link: grids 108 | :link-type: doc 109 | 110 | Screen size adaptable grid layouts. 111 | ::: 112 | 113 | :::{grid-item-card} {octicon}`note` Cards 114 | :link: cards 115 | :link-type: doc 116 | 117 | Flexible and extensible content containers. 118 | ::: 119 | 120 | :::{grid-item-card} {octicon}`chevron-down` Dropdowns 121 | :link: dropdowns 122 | :link-type: doc 123 | 124 | Hide content in expandable containers. 125 | ::: 126 | 127 | :::{grid-item-card} {octicon}`duplicate` Tabs 128 | :link: tabs 129 | :link-type: doc 130 | 131 | Synchronisable, tabbed content sets. 132 | ::: 133 | 134 | :::{grid-item-card} {octicon}`plus-circle` Badges, Buttons & Icons 135 | :link: badges_buttons 136 | :link-type: doc 137 | 138 | Roles and directives for {bdg-primary}`badges` and other components. 139 | ::: 140 | 141 | :::{grid-item-card} {octicon}`image` CSS Styling 142 | :link: css_variables 143 | :link-type: doc 144 | 145 | Change the default colors and other CSS. 146 | ::: 147 | 148 | :::: 149 | 150 | ----------- 151 | 152 | Created with inspiration from [Bootstrap](https://getbootstrap.com/) (v5), [Material Design](https://material.io) and [Material-UI](https://material-ui.com/) design frameworks. 153 | -------------------------------------------------------------------------------- /docs/snippets/myst/article-info.txt: -------------------------------------------------------------------------------- 1 | ```{article-info} 2 | :avatar: images/ebp-logo.png 3 | :avatar-link: https://executablebooks.org/ 4 | :avatar-outline: muted 5 | :author: Executable Books 6 | :date: Jul 24, 2021 7 | :read-time: 5 min read 8 | :class-container: sd-p-2 sd-outline-muted sd-rounded-1 9 | ``` 10 | -------------------------------------------------------------------------------- /docs/snippets/myst/badge-basic.txt: -------------------------------------------------------------------------------- 1 | {bdg}`plain badge` 2 | 3 | {bdg-primary}`primary`, {bdg-primary-line}`primary-line` 4 | 5 | {bdg-secondary}`secondary`, {bdg-secondary-line}`secondary-line` 6 | 7 | {bdg-success}`success`, {bdg-success-line}`success-line` 8 | 9 | {bdg-info}`info`, {bdg-info-line}`info-line` 10 | 11 | {bdg-warning}`warning`, {bdg-warning-line}`warning-line` 12 | 13 | {bdg-danger}`danger`, {bdg-danger-line}`danger-line` 14 | 15 | {bdg-light}`light`, {bdg-light-line}`light-line` 16 | 17 | {bdg-muted}`muted`, {bdg-muted-line}`muted-line` 18 | 19 | {bdg-dark}`dark`, {bdg-dark-line}`dark-line` 20 | 21 | {bdg-white}`white`, {bdg-white-line}`white-line` 22 | 23 | {bdg-black}`black`, {bdg-black-line}`black-line` 24 | -------------------------------------------------------------------------------- /docs/snippets/myst/badge-link.txt: -------------------------------------------------------------------------------- 1 | {bdg-link-primary}`https://example.com` 2 | 3 | {bdg-link-primary-line}`explicit title ` 4 | -------------------------------------------------------------------------------- /docs/snippets/myst/button-link.txt: -------------------------------------------------------------------------------- 1 | ```{button-link} https://example.com 2 | ``` 3 | 4 | ```{button-link} https://example.com 5 | Button text 6 | ``` 7 | 8 | ```{button-link} https://example.com 9 | :color: primary 10 | :shadow: 11 | ``` 12 | 13 | ```{button-link} https://example.com 14 | :color: primary 15 | :outline: 16 | ``` 17 | 18 | ```{button-link} https://example.com 19 | :color: secondary 20 | :expand: 21 | ``` 22 | -------------------------------------------------------------------------------- /docs/snippets/myst/card-basic.txt: -------------------------------------------------------------------------------- 1 | :::{card} Card Title 2 | 3 | Card content 4 | ::: 5 | -------------------------------------------------------------------------------- /docs/snippets/myst/card-carousel.txt: -------------------------------------------------------------------------------- 1 | ::::{card-carousel} 2 2 | 3 | :::{card} card 1 4 | content 5 | ::: 6 | :::{card} card 2 7 | Longer 8 | 9 | content 10 | ::: 11 | :::{card} card 3 12 | ::: 13 | :::{card} card 4 14 | ::: 15 | :::{card} card 5 16 | ::: 17 | :::{card} card 6 18 | ::: 19 | :::: 20 | -------------------------------------------------------------------------------- /docs/snippets/myst/card-head-foot.txt: -------------------------------------------------------------------------------- 1 | :::{card} Card Title 2 | Header 3 | ^^^ 4 | Card content 5 | +++ 6 | Footer 7 | ::: 8 | -------------------------------------------------------------------------------- /docs/snippets/myst/card-images.txt: -------------------------------------------------------------------------------- 1 | :::::{grid} 2 3 3 4 2 | 3 | ::::{grid-item} 4 | 5 | :::{card} Title 6 | :img-background: images/particle_background.jpg 7 | :class-card: sd-text-black 8 | :img-alt: my text 9 | 10 | Text 11 | ::: 12 | 13 | :::: 14 | 15 | ::::{grid-item-card} Title 16 | :img-top: images/particle_background.jpg 17 | :img-alt: 18 | 19 | Header 20 | ^^^ 21 | Content 22 | +++ 23 | Footer 24 | :::: 25 | 26 | ::::{grid-item-card} Title 27 | :img-bottom: images/particle_background.jpg 28 | 29 | Header 30 | ^^^ 31 | Content 32 | +++ 33 | Footer 34 | :::: 35 | 36 | ::::: 37 | -------------------------------------------------------------------------------- /docs/snippets/myst/card-link.txt: -------------------------------------------------------------------------------- 1 | (cards-clickable)= 2 | 3 | ## Clickable cards 4 | 5 | Using the `link` and `link-type` options, you can turn an entire card into a clickable link. Try hovering over then clicking on the cards below: 6 | 7 | :::{card} Clickable Card (external) 8 | :link: https://example.com 9 | 10 | The entire card can be clicked to navigate to . 11 | ::: 12 | 13 | :::{card} Clickable Card (external) 14 | :link: https://example.com 15 | :link-alt: example.com 16 | 17 | The entire card can be clicked to navigate to . 18 | ::: 19 | 20 | :::{card} Clickable Card (internal) 21 | :link: cards-clickable 22 | :link-type: ref 23 | 24 | The entire card can be clicked to navigate to the `cards-clickable` reference target. 25 | ::: 26 | 27 | :::{card} Clickable Card (internal) 28 | :link: cards-clickable 29 | :link-type: ref 30 | :link-alt: clickable cards 31 | 32 | The entire card can be clicked to navigate to the `cards-clickable` reference target. 33 | ::: 34 | -------------------------------------------------------------------------------- /docs/snippets/myst/card-title-link.txt: -------------------------------------------------------------------------------- 1 | (target)= 2 | :::{card} Card Title {ref}`link ` 3 | 4 | Card content 5 | ::: 6 | -------------------------------------------------------------------------------- /docs/snippets/myst/div-basic.txt: -------------------------------------------------------------------------------- 1 | :::{div} sd-text-center sd-font-italic sd-text-primary 2 | Some CSS styled text 3 | ::: 4 | -------------------------------------------------------------------------------- /docs/snippets/myst/dropdown-basic.txt: -------------------------------------------------------------------------------- 1 | :::{dropdown} 2 | Dropdown content 3 | ::: 4 | 5 | :::{dropdown} Dropdown title 6 | Dropdown content 7 | ::: 8 | 9 | :::{dropdown} Open dropdown 10 | :open: 11 | 12 | Dropdown content 13 | ::: 14 | -------------------------------------------------------------------------------- /docs/snippets/myst/dropdown-options.txt: -------------------------------------------------------------------------------- 1 | :::{dropdown} Title 2 | :name: target 3 | :color: info 4 | :icon: alert 5 | :margin: 1 6 | :class-container: class-container 7 | :class-title: class-title 8 | :class-body: class-body 9 | 10 | Dropdown content 11 | ::: 12 | 13 | {ref}`target`, {ref}`text ` 14 | -------------------------------------------------------------------------------- /docs/snippets/myst/grid-basic.txt: -------------------------------------------------------------------------------- 1 | ::::{grid} 1 2 3 4 2 | :outline: 3 | 4 | :::{grid-item} 5 | A 6 | ::: 7 | :::{grid-item} 8 | B 9 | ::: 10 | :::{grid-item} 11 | C 12 | ::: 13 | :::{grid-item} 14 | D 15 | ::: 16 | :::: 17 | -------------------------------------------------------------------------------- /docs/snippets/myst/grid-card-columns.txt: -------------------------------------------------------------------------------- 1 | ::::{grid} 2 2 | :::{grid-item-card} 3 | :columns: auto 4 | 5 | A 6 | ::: 7 | :::{grid-item-card} 8 | :columns: 12 6 6 6 9 | 10 | B 11 | ::: 12 | :::{grid-item-card} 13 | :columns: 12 14 | 15 | C 16 | ::: 17 | :::: 18 | -------------------------------------------------------------------------------- /docs/snippets/myst/grid-card.txt: -------------------------------------------------------------------------------- 1 | ::::{grid} 2 2 | :::{grid-item-card} Title 1 3 | A 4 | ::: 5 | :::{grid-item-card} Title 2 6 | B 7 | ::: 8 | :::: 9 | -------------------------------------------------------------------------------- /docs/snippets/myst/grid-gutter.txt: -------------------------------------------------------------------------------- 1 | ::::{grid} 2 2 | :gutter: 1 3 | 4 | :::{grid-item-card} 5 | A 6 | ::: 7 | :::{grid-item-card} 8 | B 9 | ::: 10 | :::: 11 | 12 | ::::{grid} 2 13 | :gutter: 3 3 4 5 14 | 15 | :::{grid-item-card} 16 | A 17 | ::: 18 | :::{grid-item-card} 19 | B 20 | ::: 21 | :::: 22 | -------------------------------------------------------------------------------- /docs/snippets/myst/grid-nested.txt: -------------------------------------------------------------------------------- 1 | ::::::{grid} 1 1 2 2 2 | :gutter: 1 3 | 4 | :::::{grid-item} 5 | 6 | ::::{grid} 1 1 1 1 7 | :gutter: 1 8 | 9 | :::{grid-item-card} Item 1.1 10 | 11 | Multi-line 12 | 13 | content 14 | 15 | ::: 16 | 17 | :::{grid-item-card} Item 1.2 18 | 19 | Content 20 | 21 | ::: 22 | 23 | :::: 24 | 25 | ::::: 26 | 27 | :::::{grid-item} 28 | 29 | ::::{grid} 1 1 1 1 30 | :gutter: 1 31 | 32 | :::{grid-item-card} Item 2.1 33 | 34 | Content 35 | 36 | ::: 37 | 38 | :::{grid-item-card} Item 2.2 39 | 40 | Content 41 | 42 | ::: 43 | 44 | :::{grid-item-card} Item 2.3 45 | 46 | Content 47 | 48 | ::: 49 | 50 | :::: 51 | 52 | ::::: 53 | 54 | :::::: 55 | -------------------------------------------------------------------------------- /docs/snippets/myst/icon-fontawesome.txt: -------------------------------------------------------------------------------- 1 | An icon {fas}`spinner;sd-bg-primary sd-bg-text-primary`, some more text. 2 | -------------------------------------------------------------------------------- /docs/snippets/myst/icon-material-design.txt: -------------------------------------------------------------------------------- 1 | - A regular icon: {material-regular}`data_exploration;2em`, some more text 2 | - A coloured regular icon: {material-regular}`settings;3em;sd-text-success`, some more text. 3 | - A coloured outline icon: {material-outlined}`settings;3em;sd-text-success`, some more text. 4 | - A coloured sharp icon: {material-sharp}`settings;3em;sd-text-success`, some more text. 5 | - A coloured round icon: {material-round}`settings;3em;sd-text-success`, some more text. 6 | - A coloured two-tone icon: {material-twotone}`settings;3em;sd-text-success`, some more text. 7 | - A fixed size icon: {material-regular}`data_exploration;24px`, some more text. 8 | -------------------------------------------------------------------------------- /docs/snippets/myst/icon-octicon.txt: -------------------------------------------------------------------------------- 1 | A coloured icon: {octicon}`report;1em;sd-text-info`, some more text. 2 | -------------------------------------------------------------------------------- /docs/snippets/myst/tab-basic.txt: -------------------------------------------------------------------------------- 1 | ::::{tab-set} 2 | 3 | :::{tab-item} Label1 4 | Content 1 5 | ::: 6 | 7 | :::{tab-item} Label2 8 | Content 2 9 | ::: 10 | 11 | :::: 12 | -------------------------------------------------------------------------------- /docs/snippets/myst/tab-code-set.txt: -------------------------------------------------------------------------------- 1 | ````{tab-set-code} 2 | 3 | ```{literalinclude} ./snippet.py 4 | :language: python 5 | ``` 6 | 7 | ```{code-block} javascript 8 | a = 1; 9 | ``` 10 | 11 | ```` 12 | -------------------------------------------------------------------------------- /docs/snippets/myst/tab-options.txt: -------------------------------------------------------------------------------- 1 | ::::{tab-set} 2 | :class: class-set 3 | 4 | :::{tab-item} **Label** 5 | :name: target 6 | :selected: 7 | :class-container: class-container 8 | :class-label: class-label 9 | :class-content: class-content 10 | 11 | Content 12 | ::: 13 | 14 | :::: 15 | 16 | {ref}`target`, {ref}`text ` 17 | -------------------------------------------------------------------------------- /docs/snippets/myst/tab-sync.txt: -------------------------------------------------------------------------------- 1 | ::::{tab-set} 2 | :sync-group: category 3 | 4 | :::{tab-item} Label1 5 | :sync: key1 6 | 7 | Content 1 8 | ::: 9 | 10 | :::{tab-item} Label2 11 | :sync: key2 12 | 13 | Content 2 14 | ::: 15 | 16 | :::: 17 | 18 | ::::{tab-set} 19 | :sync-group: category 20 | 21 | :::{tab-item} Label1 22 | :sync: key1 23 | 24 | Content 1 25 | ::: 26 | 27 | :::{tab-item} Label2 28 | :sync: key2 29 | 30 | Content 2 31 | ::: 32 | 33 | :::: 34 | -------------------------------------------------------------------------------- /docs/snippets/rst/article-info.txt: -------------------------------------------------------------------------------- 1 | .. article-info:: 2 | :avatar: images/ebp-logo.png 3 | :avatar-link: https://executablebooks.org/ 4 | :avatar-outline: muted 5 | :author: Executable Books 6 | :date: Jul 24, 2021 7 | :read-time: 5 min read 8 | :class-container: sd-p-2 sd-outline-muted sd-rounded-1 9 | -------------------------------------------------------------------------------- /docs/snippets/rst/badge-basic.txt: -------------------------------------------------------------------------------- 1 | :bdg:`plain badge` 2 | 3 | :bdg-primary:`primary`, :bdg-primary-line:`primary-line` 4 | 5 | :bdg-secondary:`secondary`, :bdg-secondary-line:`secondary-line` 6 | 7 | :bdg-success:`success`, :bdg-success-line:`success-line` 8 | 9 | :bdg-info:`info`, :bdg-info-line:`info-line` 10 | 11 | :bdg-warning:`warning`, :bdg-warning-line:`warning-line` 12 | 13 | :bdg-danger:`danger`, :bdg-danger-line:`danger-line` 14 | 15 | :bdg-light:`light`, :bdg-light-line:`light-line` 16 | 17 | :bdg-muted:`muted`, :bdg-muted-line:`muted-line` 18 | 19 | :bdg-dark:`dark`, :bdg-dark-line:`dark-line` 20 | 21 | :bdg-white:`white`, :bdg-white-line:`white-line` 22 | 23 | :bdg-black:`black`, :bdg-black-line:`black-line` 24 | -------------------------------------------------------------------------------- /docs/snippets/rst/badge-link.txt: -------------------------------------------------------------------------------- 1 | :bdg-link-primary:`https://example.com` 2 | 3 | :bdg-link-primary-line:`explicit title ` 4 | -------------------------------------------------------------------------------- /docs/snippets/rst/button-link.txt: -------------------------------------------------------------------------------- 1 | .. button-link:: https://example.com 2 | 3 | .. button-link:: https://example.com 4 | 5 | Button text 6 | 7 | .. button-link:: https://example.com 8 | :color: primary 9 | :shadow: 10 | 11 | .. button-link:: https://example.com 12 | :color: primary 13 | :outline: 14 | 15 | .. button-link:: https://example.com 16 | :color: secondary 17 | :expand: 18 | -------------------------------------------------------------------------------- /docs/snippets/rst/card-basic.txt: -------------------------------------------------------------------------------- 1 | .. card:: Card Title 2 | 3 | Card content 4 | -------------------------------------------------------------------------------- /docs/snippets/rst/card-carousel.txt: -------------------------------------------------------------------------------- 1 | .. card-carousel:: 2 2 | 3 | .. card:: card 1 4 | 5 | content 6 | 7 | .. card:: card 2 8 | 9 | Longer 10 | 11 | content 12 | 13 | .. card:: card 3 14 | 15 | .. card:: card 4 16 | 17 | .. card:: card 5 18 | 19 | .. card:: card 6 20 | -------------------------------------------------------------------------------- /docs/snippets/rst/card-head-foot.txt: -------------------------------------------------------------------------------- 1 | .. card:: Card Title 2 | 3 | Header 4 | ^^^ 5 | Card content 6 | +++ 7 | Footer 8 | -------------------------------------------------------------------------------- /docs/snippets/rst/card-images.txt: -------------------------------------------------------------------------------- 1 | .. grid:: 2 3 3 4 2 | 3 | .. grid-item:: 4 | 5 | .. card:: Title 6 | :img-background: images/particle_background.jpg 7 | :class-card: sd-text-black 8 | :img-alt: my text 9 | 10 | Text 11 | 12 | .. grid-item-card:: Title 13 | :img-top: images/particle_background.jpg 14 | :img-alt: 15 | 16 | Header 17 | ^^^ 18 | Content 19 | +++ 20 | Footer 21 | 22 | .. grid-item-card:: Title 23 | :img-bottom: images/particle_background.jpg 24 | 25 | Header 26 | ^^^ 27 | Content 28 | +++ 29 | Footer 30 | -------------------------------------------------------------------------------- /docs/snippets/rst/card-link.txt: -------------------------------------------------------------------------------- 1 | .. _cards-clickable: 2 | 3 | Clickable cards 4 | ............... 5 | 6 | Using the ``link`` and ``link-type`` options, you can turn an entire card into a clickable link. Try hovering over then clicking on the cards below: 7 | 8 | .. card:: Clickable Card (external) 9 | :link: https://example.com 10 | 11 | The entire card can be clicked to navigate to https://example.com. 12 | 13 | .. card:: Clickable Card (external) 14 | :link: https://example.com 15 | :link-alt: example.com 16 | 17 | The entire card can be clicked to navigate to https://example.com. 18 | 19 | .. card:: Clickable Card (internal) 20 | :link: cards-clickable 21 | :link-type: ref 22 | 23 | The entire card can be clicked to navigate to the ``cards-clickable`` reference target. 24 | 25 | .. card:: Clickable Card (internal) 26 | :link: cards-clickable 27 | :link-type: ref 28 | :link-alt: clickable cards 29 | 30 | The entire card can be clicked to navigate to the ``cards-clickable`` reference target. 31 | -------------------------------------------------------------------------------- /docs/snippets/rst/card-title-link.txt: -------------------------------------------------------------------------------- 1 | .. _target: 2 | .. card:: Card Title https://example.com :ref:`link ` 3 | 4 | Card content 5 | -------------------------------------------------------------------------------- /docs/snippets/rst/div-basic.txt: -------------------------------------------------------------------------------- 1 | .. div:: sd-text-center sd-font-italic sd-text-primary 2 | 3 | Some CSS styled text 4 | -------------------------------------------------------------------------------- /docs/snippets/rst/dropdown-basic.txt: -------------------------------------------------------------------------------- 1 | .. dropdown:: 2 | 3 | Dropdown content 4 | 5 | .. dropdown:: Dropdown title 6 | 7 | Dropdown content 8 | 9 | .. dropdown:: Open dropdown 10 | :open: 11 | 12 | Dropdown content 13 | -------------------------------------------------------------------------------- /docs/snippets/rst/dropdown-options.txt: -------------------------------------------------------------------------------- 1 | .. dropdown:: Title 2 | :name: target 3 | :color: info 4 | :icon: alert 5 | :margin: 1 6 | :class-container: class-container 7 | :class-title: class-title 8 | :class-body: class-body 9 | 10 | Dropdown content 11 | 12 | :ref:`target`, :ref:`text ` 13 | -------------------------------------------------------------------------------- /docs/snippets/rst/grid-basic.txt: -------------------------------------------------------------------------------- 1 | .. grid:: 1 2 3 4 2 | :outline: 3 | 4 | .. grid-item:: 5 | 6 | A 7 | 8 | .. grid-item:: 9 | 10 | B 11 | 12 | .. grid-item:: 13 | 14 | C 15 | 16 | .. grid-item:: 17 | 18 | D 19 | -------------------------------------------------------------------------------- /docs/snippets/rst/grid-card-columns.txt: -------------------------------------------------------------------------------- 1 | .. grid:: 2 2 | 3 | .. grid-item-card:: 4 | :columns: auto 5 | 6 | A 7 | 8 | .. grid-item-card:: 9 | :columns: 12 6 6 6 10 | 11 | B 12 | 13 | .. grid-item-card:: 14 | :columns: 12 15 | 16 | C 17 | -------------------------------------------------------------------------------- /docs/snippets/rst/grid-card.txt: -------------------------------------------------------------------------------- 1 | .. grid:: 2 2 | 3 | .. grid-item-card:: Title 1 4 | 5 | A 6 | 7 | .. grid-item-card:: Title 2 8 | 9 | B 10 | -------------------------------------------------------------------------------- /docs/snippets/rst/grid-gutter.txt: -------------------------------------------------------------------------------- 1 | .. grid:: 2 2 | :gutter: 1 3 | 4 | .. grid-item-card:: 5 | 6 | A 7 | 8 | .. grid-item-card:: 9 | 10 | B 11 | 12 | .. grid:: 2 13 | :gutter: 3 3 4 5 14 | 15 | .. grid-item-card:: 16 | 17 | A 18 | 19 | .. grid-item-card:: 20 | 21 | B 22 | -------------------------------------------------------------------------------- /docs/snippets/rst/grid-nested.txt: -------------------------------------------------------------------------------- 1 | .. grid:: 1 1 2 2 2 | :gutter: 1 3 | 4 | .. grid-item:: 5 | 6 | .. grid:: 1 1 1 1 7 | :gutter: 1 8 | 9 | .. grid-item-card:: Item 1.1 10 | 11 | Multi-line 12 | 13 | content 14 | 15 | .. grid-item-card:: Item 1.2 16 | 17 | Content 18 | 19 | .. grid-item:: 20 | 21 | .. grid:: 1 1 1 1 22 | :gutter: 1 23 | 24 | .. grid-item-card:: Item 2.1 25 | 26 | Content 27 | 28 | .. grid-item-card:: Item 2.2 29 | 30 | Content 31 | 32 | .. grid-item-card:: Item 2.3 33 | 34 | Content 35 | -------------------------------------------------------------------------------- /docs/snippets/rst/icon-fontawesome.txt: -------------------------------------------------------------------------------- 1 | An icon :fas:`spinner;sd-bg-primary sd-bg-text-primary`, some more text. 2 | -------------------------------------------------------------------------------- /docs/snippets/rst/icon-material-design.txt: -------------------------------------------------------------------------------- 1 | - A regular icon: :material-regular:`data_exploration;2em`, some more text 2 | - A coloured regular icon: :material-regular:`settings;3em;sd-text-success`, some more text. 3 | - A coloured outline icon: :material-outlined:`settings;3em;sd-text-success`, some more text. 4 | - A coloured sharp icon: :material-sharp:`settings;3em;sd-text-success`, some more text. 5 | - A coloured round icon: :material-round:`settings;3em;sd-text-success`, some more text. 6 | - A coloured two-tone icon: :material-twotone:`settings;3em;sd-text-success`, some more text. 7 | - A fixed size icon: :material-regular:`data_exploration;24px`, some more text. 8 | -------------------------------------------------------------------------------- /docs/snippets/rst/icon-octicon.txt: -------------------------------------------------------------------------------- 1 | A coloured icon: :octicon:`report;1em;sd-text-info`, some more text. 2 | -------------------------------------------------------------------------------- /docs/snippets/rst/tab-basic.txt: -------------------------------------------------------------------------------- 1 | .. tab-set:: 2 | 3 | .. tab-item:: Label1 4 | 5 | Content 1 6 | 7 | .. tab-item:: Label2 8 | 9 | Content 2 10 | -------------------------------------------------------------------------------- /docs/snippets/rst/tab-code-set.txt: -------------------------------------------------------------------------------- 1 | .. tab-set-code:: 2 | 3 | .. literalinclude:: ./snippet.py 4 | :language: python 5 | 6 | .. code-block:: javascript 7 | 8 | a = 1; 9 | -------------------------------------------------------------------------------- /docs/snippets/rst/tab-options.txt: -------------------------------------------------------------------------------- 1 | .. tab-set:: 2 | :class: class-set 3 | 4 | .. tab-item:: **Label** 5 | :name: target 6 | :selected: 7 | :class-container: class-container 8 | :class-label: class-label 9 | :class-content: class-content 10 | 11 | Content 12 | 13 | :ref:`target`, :ref:`text ` 14 | -------------------------------------------------------------------------------- /docs/snippets/rst/tab-sync.txt: -------------------------------------------------------------------------------- 1 | .. tab-set:: 2 | :sync-group: category 3 | 4 | .. tab-item:: Label1 5 | :sync: key1 6 | 7 | Content 1 8 | 9 | .. tab-item:: Label2 10 | :sync: key2 11 | 12 | Content 2 13 | 14 | .. tab-set:: 15 | :sync-group: category 16 | 17 | .. tab-item:: Label1 18 | :sync: key1 19 | 20 | Content 1 21 | 22 | .. tab-item:: Label2 23 | :sync: key2 24 | 25 | Content 2 26 | -------------------------------------------------------------------------------- /docs/tabs.md: -------------------------------------------------------------------------------- 1 | (sd-tabs)= 2 | 3 | # Tabs 4 | 5 | Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy. 6 | Each tab should contain content that is distinct from other tabs in a set. 7 | 8 | ::::{tab-set} 9 | 10 | :::{tab-item} Label1 11 | Content 1 12 | ::: 13 | 14 | :::{tab-item} Label2 15 | Content 2 16 | ::: 17 | 18 | :::: 19 | 20 | `````{dropdown-syntax} 21 | 22 | ````{tab-set-code} 23 | ```{literalinclude} ./snippets/myst/tab-basic.txt 24 | :language: markdown 25 | ``` 26 | ```{literalinclude} ./snippets/rst/tab-basic.txt 27 | :language: rst 28 | ``` 29 | ```` 30 | ````` 31 | 32 | See the [Material Design](https://material.io/components/tabs) description for further details. 33 | 34 | ## Synchronised Tabs 35 | 36 | The Selection of tab items can be synchronised across multiple tab-sets. 37 | For a `tab-item` to be synchronisable, add the `sync` option to the `tab-item` directive with a key unique to that set. 38 | Now when you select a tab in one set, tabs in other sets with the same key will be selected. 39 | 40 | :::{note} 41 | Synchronisation requires that JavaScript is enabled. 42 | ::: 43 | 44 | :::{versionadded} 0.6.0 45 | To synchronise tabs only across certain tab-sets, add the `:sync-group:` option to each `tab-set` directive with the same group name, such as `:sync-group: category`. 46 | 47 | You can also add an [HTML query string](https://en.wikipedia.org/wiki/Query_string) to the end of the page's URL, 48 | to automatically select a tab with a specific key across all tab-sets of the group, for example: 49 | 50 | - [`?category=key1#synchronised-tabs`](?category=key1#synchronised-tabs){.external} 51 | - [`?category=key2#synchronised-tabs`](?category=key2#synchronised-tabs){.external} 52 | ::: 53 | 54 | ::::{tab-set} 55 | :sync-group: category 56 | 57 | :::{tab-item} Label1 58 | :sync: key1 59 | 60 | Content 1 61 | ::: 62 | 63 | :::{tab-item} Label2 64 | :sync: key2 65 | 66 | Content 2 67 | ::: 68 | 69 | :::: 70 | 71 | ::::{tab-set} 72 | :sync-group: category 73 | 74 | :::{tab-item} Label1 75 | :sync: key1 76 | 77 | Content 1 78 | ::: 79 | 80 | :::{tab-item} Label2 81 | :sync: key2 82 | 83 | Content 2 84 | ::: 85 | 86 | :::: 87 | 88 | `````{dropdown-syntax} 89 | 90 | ````{tab-set-code} 91 | ```{literalinclude} ./snippets/myst/tab-sync.txt 92 | :language: markdown 93 | ``` 94 | ```{literalinclude} ./snippets/rst/tab-sync.txt 95 | :language: rst 96 | ``` 97 | ```` 98 | ````` 99 | 100 | ## Tabbed code examples 101 | 102 | The `tab-set-code` directive provides a shorthand for synced code examples. 103 | You can place any directives in a `tab-set-code` that produce a `literal_block` node with a `language` attribute, for example `code`, `code-block` and `literalinclude`. 104 | Tabs will be labelled and synchronised by the `language` attribute (in upper-case). 105 | 106 | :::{versionadded} 0.6.0 107 | You can also add an [HTML query string](https://en.wikipedia.org/wiki/Query_string) to the end of the page's URL, 108 | to automatically select a tab with a specific code across all tab-sets of the group, for example: 109 | 110 | - [`?code=markdown#tabbed-code-examples`](?code=markdown#tabbed-code-examples){.external} 111 | - [`?code=rst#tabbed-code-examples`](?code=rst#tabbed-code-examples){.external} 112 | ::: 113 | 114 | ```````{tab-set} 115 | :sync-group: code 116 | 117 | ``````{tab-item} Markdown 118 | :sync: markdown 119 | 120 | ````{literalinclude} ./snippets/myst/tab-code-set.txt 121 | :language: markdown 122 | ```` 123 | `````` 124 | 125 | ``````{tab-item} RST 126 | :sync: rst 127 | 128 | ````{literalinclude} ./snippets/rst/tab-code-set.txt 129 | :language: rst 130 | ```` 131 | `````` 132 | 133 | ``````` 134 | 135 | ## Tabs in other components 136 | 137 | Tabs can be nested inside other components, such as inside [dropdowns](./dropdowns.md) or within [grid items](./grids.md). 138 | 139 | :::::{dropdown} Tabs in dropdown 140 | :open: 141 | 142 | Paragraph 143 | 144 | ::::{tab-set} 145 | 146 | :::{tab-item} Label1 147 | :sync: label-1 148 | 149 | Content 1 150 | ::: 151 | 152 | :::{tab-item} Label2 153 | :sync: label-2 154 | 155 | Content 2 156 | ::: 157 | 158 | :::: 159 | ::::: 160 | 161 | ::::::{grid} 1 1 2 2 162 | 163 | :::::{grid-item} 164 | :outline: 165 | 166 | Initial paragraph 167 | 168 | ::::{tab-set} 169 | 170 | :::{tab-item} Label1 171 | :sync: label-1 172 | 173 | Content 1 174 | ::: 175 | 176 | :::{tab-item} Label2 177 | :sync: label-2 178 | 179 | Content 2 180 | ::: 181 | 182 | :::: 183 | 184 | ::::: 185 | 186 | :::::{grid-item} 187 | :outline: 188 | 189 | ::::{tab-set} 190 | 191 | :::{tab-item} Label1 192 | :sync: label-1 193 | 194 | Content 1 195 | ::: 196 | 197 | :::{tab-item} Label2 198 | :sync: label-2 199 | 200 | Content 2 201 | ::: 202 | 203 | :::: 204 | 205 | Ending paragraph 206 | 207 | ::::: 208 | 209 | :::::: 210 | 211 | Tab set, within tab set: 212 | 213 | ::::::{tab-set} 214 | :::::{tab-item} Label 1 215 | ::::{tab-set} 216 | :::{tab-item} Label 1a 217 | Content 1a 218 | ::: 219 | :::{tab-item} Label 1b 220 | Content 1b 221 | ::: 222 | :::: 223 | ::::: 224 | :::::{tab-item} Label 2 225 | Content 2 226 | ::::: 227 | :::::: 228 | 229 | ## `tab-set` options 230 | 231 | sync-group 232 | : A group name for synchronised tab sets (default `tab`). 233 | 234 | class 235 | : Additional CSS classes for the container element. 236 | 237 | ## `tab-set-code` options 238 | 239 | no-sync 240 | : Disable synchronisation of tabs. 241 | 242 | sync-group 243 | : A group name for synchronised tab sets (default `code`). 244 | 245 | class-set 246 | : Additional CSS classes for the set container element. 247 | 248 | class-item 249 | : Additional CSS classes for the item container element. 250 | 251 | ## `tab-item` options 252 | 253 | selected 254 | : a flag indicating whether the tab should be selected by default. 255 | 256 | sync 257 | : A key that is used to sync the selected tab across multiple tab-sets. 258 | 259 | name 260 | : Set a reference-able name for the dropdown container. 261 | 262 | class-container 263 | : Additional CSS classes for the container element. 264 | 265 | class-label 266 | : Additional CSS classes for the label element. 267 | 268 | class-content 269 | : Additional CSS classes for the content element. 270 | -------------------------------------------------------------------------------- /git_rebase_theme_branches.sh: -------------------------------------------------------------------------------- 1 | #!/bin/sh 2 | 3 | set -e 4 | 5 | fmt=' 6 | git checkout %(refname) 7 | git rebase main 8 | git push origin HEAD:%(refname:strip=3) --force 9 | ' 10 | 11 | eval "$(git for-each-ref --shell --format="$fmt" refs/remotes/origin/*-theme)" 12 | 13 | git checkout main 14 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "sphinx-design-compiler", 3 | "version": "0.0.1", 4 | "description": "Scripts for compiling the sphinx-design assets", 5 | "scripts": { 6 | "css": "sass --style=compressed --no-source-map style/index.scss sphinx_design/compiled/style.min.css" 7 | }, 8 | "dependencies": { 9 | "sass": "^1.35.2" 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /pyproject.toml: -------------------------------------------------------------------------------- 1 | [build-system] 2 | requires = ["flit_core >=3.4,<4"] 3 | build-backend = "flit_core.buildapi" 4 | 5 | [project] 6 | name = "sphinx_design" 7 | dynamic = ["version"] 8 | description = "A sphinx extension for designing beautiful, view size responsive web components." 9 | authors = [{name = "Chris Sewell", email = "chrisj_sewell@hotmail.com"}] 10 | readme = "README.md" 11 | license = {file = "LICENSE"} 12 | classifiers = [ 13 | "Development Status :: 4 - Beta", 14 | "Framework :: Sphinx :: Extension", 15 | "Intended Audience :: Developers", 16 | "License :: OSI Approved :: MIT License", 17 | "Programming Language :: Python :: 3", 18 | "Programming Language :: Python :: 3.9", 19 | "Programming Language :: Python :: 3.10", 20 | "Programming Language :: Python :: 3.11", 21 | "Programming Language :: Python :: 3.12", 22 | "Programming Language :: Python :: 3.13", 23 | "Programming Language :: Python :: Implementation :: CPython", 24 | "Topic :: Software Development :: Libraries :: Python Modules", 25 | "Topic :: Text Processing :: Markup", 26 | "Topic :: Text Processing :: Markup :: Markdown", 27 | "Topic :: Text Processing :: Markup :: reStructuredText", 28 | ] 29 | keywords = ["sphinx", "extension", "material design", "web components"] 30 | requires-python = ">=3.9" 31 | dependencies = ["sphinx>=6,<9"] 32 | 33 | [project.urls] 34 | Homepage = "https://github.com/executablebooks/sphinx-design" 35 | Documentation = "https://sphinx-design.readthedocs.io" 36 | 37 | [project.optional-dependencies] 38 | code-style = ["pre-commit>=3,<4"] 39 | rtd = ["myst-parser>=2,<4"] 40 | testing = [ 41 | "myst-parser>=2,<4", 42 | "pytest~=8.3", 43 | "pytest-cov", 44 | "pytest-regressions", 45 | "defusedxml", 46 | ] 47 | testing-no-myst = [ 48 | "pytest~=8.3", 49 | "pytest-cov", 50 | "pytest-regressions", 51 | "defusedxml", 52 | ] 53 | 54 | theme-furo = ["furo~=2024.7.18"] 55 | theme-pydata = ["pydata-sphinx-theme~=0.15.2"] 56 | theme-rtd = ["sphinx-rtd-theme~=2.0"] 57 | theme-sbt = ["sphinx-book-theme~=1.1"] 58 | theme-im = ["sphinx-immaterial~=0.12.2"] 59 | 60 | [tool.flit.sdist] 61 | exclude = [ 62 | "docs/", 63 | "style/", 64 | "tests/", 65 | ] 66 | 67 | [tool.ruff.lint] 68 | extend-select = [ 69 | "B", # flake8-bugbear 70 | "C4", # flake8-comprehensions 71 | # "FURB",# refurb (modernising code) 72 | "I", # isort 73 | "ICN", # flake8-import-conventions 74 | "ISC", # flake8-implicit-str-concat 75 | "N", # pep8-naming 76 | "PERF",# perflint (performance anti-patterns) 77 | "PGH", # pygrep-hooks 78 | "PIE", # flake8-pie 79 | "PL", # pylint 80 | "PTH", # flake8-use-pathlib 81 | "RUF", # Ruff-specific rules 82 | "SIM", # flake8-simplify 83 | "UP", # pyupgrade 84 | "T20", # flake8-print 85 | ] 86 | extend-ignore = [ 87 | "ISC001", # implicit-str-concat 88 | "PLR2004", 89 | "RUF012", 90 | ] 91 | 92 | # [tool.ruff.lint.per-file-ignores] 93 | # "..." = ["N801"] 94 | 95 | [tool.ruff.lint.isort] 96 | force-sort-within-sections = true 97 | 98 | [tool.mypy] 99 | show_error_codes = true 100 | warn_unused_ignores = true 101 | warn_redundant_casts = true 102 | no_implicit_optional = true 103 | strict_equality = true 104 | 105 | [[tool.mypy.overrides]] 106 | module = ["docutils.*"] 107 | ignore_missing_imports = true 108 | -------------------------------------------------------------------------------- /sphinx_design/__init__.py: -------------------------------------------------------------------------------- 1 | """A sphinx extension for designing beautiful, view size responsive web components.""" 2 | 3 | from typing import TYPE_CHECKING 4 | 5 | __version__ = "0.6.1" 6 | 7 | if TYPE_CHECKING: 8 | from sphinx.application import Sphinx 9 | 10 | 11 | def setup(app: "Sphinx") -> dict: 12 | from .extension import setup_extension 13 | 14 | setup_extension(app) 15 | return { 16 | "version": __version__, 17 | "parallel_read_safe": True, 18 | "parallel_write_safe": True, 19 | } 20 | -------------------------------------------------------------------------------- /sphinx_design/_compat.py: -------------------------------------------------------------------------------- 1 | """Helpers for cross compatibility across dependency versions.""" 2 | 3 | from collections.abc import Iterable 4 | from importlib import resources 5 | from typing import Callable 6 | 7 | from docutils.nodes import Element 8 | 9 | 10 | def findall(node: Element) -> Callable[..., Iterable[Element]]: 11 | """Iterate through""" 12 | # findall replaces traverse in docutils v0.18 13 | # note a difference is that findall is an iterator 14 | return getattr(node, "findall", node.traverse) 15 | 16 | 17 | # TODO: >= Python 3.9, only use `resources.files` and drop `resources.read_text` 18 | def read_text(module: resources.Package, filename: str) -> str: 19 | if hasattr(resources, "files"): 20 | return resources.files(module).joinpath(filename).read_text() 21 | return resources.read_text(module, filename) 22 | -------------------------------------------------------------------------------- /sphinx_design/compiled/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/executablebooks/sphinx-design/b3d6eddc5bf436e35c213a29f0dda3c8ffb716f7/sphinx_design/compiled/__init__.py -------------------------------------------------------------------------------- /sphinx_design/compiled/material-icons_LICENSE: -------------------------------------------------------------------------------- 1 | Copyright 2024 Google 2 | 3 | Licensed under the Apache License, Version 2.0 (the "License"); 4 | you may not use this file except in compliance with the License. 5 | You may obtain a copy of the License at 6 | 7 | http://www.apache.org/licenses/LICENSE-2.0 8 | 9 | Unless required by applicable law or agreed to in writing, software 10 | distributed under the License is distributed on an "AS IS" BASIS, 11 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | See the License for the specific language governing permissions and 13 | limitations under the License. 14 | -------------------------------------------------------------------------------- /sphinx_design/compiled/material-icons_VERSION.txt: -------------------------------------------------------------------------------- 1 | using github.com/google/material-design-icons 2 | v4.0.0-116-ge9da21 3 | e9da2194e65080a829d670ae39a99c7b5fc09548 4 | -------------------------------------------------------------------------------- /sphinx_design/compiled/octicon_LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 GitHub Inc. 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 all 13 | 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 THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /sphinx_design/compiled/sd_tabs.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | 3 | // Extra JS capability for selected tabs to be synced 4 | // The selection is stored in local storage so that it persists across page loads. 5 | 6 | /** 7 | * @type {Record} 8 | */ 9 | let sd_id_to_elements = {}; 10 | const storageKeyPrefix = "sphinx-design-tab-id-"; 11 | 12 | /** 13 | * Create a key for a tab element. 14 | * @param {HTMLElement} el - The tab element. 15 | * @returns {[string, string, string] | null} - The key. 16 | * 17 | */ 18 | function create_key(el) { 19 | let syncId = el.getAttribute("data-sync-id"); 20 | let syncGroup = el.getAttribute("data-sync-group"); 21 | if (!syncId || !syncGroup) return null; 22 | return [syncGroup, syncId, syncGroup + "--" + syncId]; 23 | } 24 | 25 | /** 26 | * Initialize the tab selection. 27 | * 28 | */ 29 | function ready() { 30 | // Find all tabs with sync data 31 | 32 | /** @type {string[]} */ 33 | let groups = []; 34 | 35 | document.querySelectorAll(".sd-tab-label").forEach((label) => { 36 | if (label instanceof HTMLElement) { 37 | let data = create_key(label); 38 | if (data) { 39 | let [group, id, key] = data; 40 | 41 | // add click event listener 42 | // @ts-ignore 43 | label.onclick = onSDLabelClick; 44 | 45 | // store map of key to elements 46 | if (!sd_id_to_elements[key]) { 47 | sd_id_to_elements[key] = []; 48 | } 49 | sd_id_to_elements[key].push(label); 50 | 51 | if (groups.indexOf(group) === -1) { 52 | groups.push(group); 53 | // Check if a specific tab has been selected via URL parameter 54 | const tabParam = new URLSearchParams(window.location.search).get( 55 | group 56 | ); 57 | if (tabParam) { 58 | console.log( 59 | "sphinx-design: Selecting tab id for group '" + 60 | group + 61 | "' from URL parameter: " + 62 | tabParam 63 | ); 64 | window.sessionStorage.setItem(storageKeyPrefix + group, tabParam); 65 | } 66 | } 67 | 68 | // Check is a specific tab has been selected previously 69 | let previousId = window.sessionStorage.getItem( 70 | storageKeyPrefix + group 71 | ); 72 | if (previousId === id) { 73 | // console.log( 74 | // "sphinx-design: Selecting tab from session storage: " + id 75 | // ); 76 | // @ts-ignore 77 | label.previousElementSibling.checked = true; 78 | } 79 | } 80 | } 81 | }); 82 | } 83 | 84 | /** 85 | * Activate other tabs with the same sync id. 86 | * 87 | * @this {HTMLElement} - The element that was clicked. 88 | */ 89 | function onSDLabelClick() { 90 | let data = create_key(this); 91 | if (!data) return; 92 | let [group, id, key] = data; 93 | for (const label of sd_id_to_elements[key]) { 94 | if (label === this) continue; 95 | // @ts-ignore 96 | label.previousElementSibling.checked = true; 97 | } 98 | window.sessionStorage.setItem(storageKeyPrefix + group, id); 99 | } 100 | 101 | document.addEventListener("DOMContentLoaded", ready, false); 102 | -------------------------------------------------------------------------------- /sphinx_design/py.typed: -------------------------------------------------------------------------------- 1 | # Marker file for PEP 561 2 | -------------------------------------------------------------------------------- /style/_animations.scss: -------------------------------------------------------------------------------- 1 | @keyframes sd-slide-from-left { 2 | 0% { 3 | transform: translateX(-100%); 4 | } 5 | 100% { 6 | transform: translateX(0); 7 | } 8 | } 9 | 10 | @keyframes sd-slide-from-right { 11 | 0% { 12 | transform: translateX(200%); 13 | } 14 | 100% { 15 | transform: translateX(0); 16 | } 17 | } 18 | 19 | @keyframes sd-grow100 { 20 | 0% { 21 | transform: scale(0); 22 | opacity: 0.5; 23 | } 24 | 100% { 25 | transform: scale(1); 26 | opacity: 1; 27 | } 28 | } 29 | 30 | @keyframes sd-grow50 { 31 | 0% { 32 | transform: scale(0.5); 33 | opacity: 0.5; 34 | } 35 | 100% { 36 | transform: scale(1); 37 | opacity: 1; 38 | } 39 | } 40 | 41 | @keyframes sd-grow50-rot20 { 42 | 0% { 43 | transform: scale(0.5) rotateZ(-20deg); 44 | opacity: 0.5; 45 | } 46 | 75% { 47 | transform: scale(1) rotateZ(5deg); 48 | opacity: 1; 49 | } 50 | 95% { 51 | transform: scale(1) rotateZ(-1deg); 52 | opacity: 1; 53 | } 54 | 100% { 55 | transform: scale(1) rotateZ(0); 56 | opacity: 1; 57 | } 58 | } 59 | 60 | // animation is shorthand for 'animation-' properties: 61 | // duration | easing-function | delay | iteration-count | direction | fill-mode | play-state | name 62 | 63 | .sd-animate-slide-from-left { 64 | animation: 1s ease-out 0s 1 normal none running sd-slide-from-left; 65 | } 66 | 67 | .sd-animate-slide-from-right { 68 | animation: 1s ease-out 0s 1 normal none running sd-slide-from-right; 69 | } 70 | 71 | .sd-animate-grow100 { 72 | animation: 1s ease-out 0s 1 normal none running sd-grow100; 73 | } 74 | 75 | .sd-animate-grow50 { 76 | animation: 1s ease-out 0s 1 normal none running sd-grow50; 77 | } 78 | 79 | .sd-animate-grow50-rot20 { 80 | animation: 1s ease-out 0s 1 normal none running sd-grow50-rot20; 81 | } 82 | -------------------------------------------------------------------------------- /style/_badge.scss: -------------------------------------------------------------------------------- 1 | // Adapted from Bootstrap v5.0.2 (https://getbootstrap.com/) 2 | // Copyright 2011-2019 The Bootstrap Authors 3 | // Copyright 2011-2019 Twitter, Inc. 4 | // Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) 5 | 6 | .sd-badge { 7 | display: inline-block; 8 | padding: 0.35em 0.65em; 9 | font-size: 0.75em; 10 | font-weight: 700; 11 | line-height: 1; 12 | text-align: center; 13 | white-space: nowrap; 14 | vertical-align: baseline; 15 | border-radius: 0.25rem; 16 | 17 | // Empty badges collapse automatically 18 | &:empty { 19 | display: none; 20 | } 21 | } 22 | 23 | // Remove underline 24 | a.sd-badge { 25 | text-decoration: none; 26 | } 27 | 28 | // Quick fix for badges in buttons 29 | .sd-btn .sd-badge { 30 | position: relative; 31 | top: -1px; 32 | } 33 | 34 | // note badge colors were removed in v5 35 | -------------------------------------------------------------------------------- /style/_borders.scss: -------------------------------------------------------------------------------- 1 | $borders: ( 2 | 0: 0, 3 | 1: 1px, 4 | 2: 2px, 5 | 3: 3px, 6 | 4: 4px, 7 | 5: 5px, 8 | ); 9 | 10 | @each $name, $value in $borders { 11 | .sd-border-#{$name} { 12 | border: $value solid !important; 13 | } 14 | .sd-border-top-#{$name} { 15 | border-top: $value solid !important; 16 | } 17 | .sd-border-bottom-#{$name} { 18 | border-bottom: $value solid !important; 19 | } 20 | .sd-border-right-#{$name} { 21 | border-right: $value solid !important; 22 | } 23 | .sd-border-left-#{$name} { 24 | border-left: $value solid !important; 25 | } 26 | } 27 | 28 | $rounded: ( 29 | 0: 0, 30 | 1: 0.2rem, 31 | 2: 0.3rem, 32 | 3: 0.5rem, 33 | pill: 50rem, 34 | circle: 50%, 35 | ); 36 | 37 | @each $name, $value in $rounded { 38 | .sd-rounded-#{$name} { 39 | border-radius: $value !important; 40 | } 41 | } 42 | 43 | // shadows 44 | .shadow-none { 45 | box-shadow: none !important; 46 | } 47 | 48 | .sd-shadow-sm { 49 | box-shadow: 0 .125rem 0.25rem var(--sd-color-shadow) !important; 50 | } 51 | 52 | .sd-shadow-md { 53 | box-shadow: 0 .5rem 1rem var(--sd-color-shadow) !important; 54 | } 55 | 56 | .sd-shadow-lg { 57 | box-shadow: 0 1rem 3rem var(--sd-color-shadow) !important; 58 | } 59 | -------------------------------------------------------------------------------- /style/_button.scss: -------------------------------------------------------------------------------- 1 | // Adapted from Bootstrap v5.0.2 (https://getbootstrap.com/) 2 | // Copyright 2011-2019 The Bootstrap Authors 3 | // Copyright 2011-2019 Twitter, Inc. 4 | // Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) 5 | 6 | .sd-btn { 7 | background-color: transparent; 8 | border: 1px solid transparent; 9 | border-radius: 0.25rem; 10 | // color: var(--sd-color-dark); 11 | cursor: pointer; 12 | display: inline-block; 13 | font-weight: 400; 14 | font-size: 1rem; 15 | line-height: 1.5; 16 | padding: 0.375rem 0.75rem; 17 | text-align: center; 18 | text-decoration: none; 19 | transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, 20 | border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; 21 | vertical-align: middle; 22 | user-select: none; 23 | -moz-user-select: none; 24 | -ms-user-select: none; 25 | -webkit-user-select: none; 26 | 27 | &:hover { 28 | text-decoration: none; 29 | } 30 | 31 | // &:focus { 32 | // box-shadow: 0 0 0 0.2rem rgba(mix($blue, $blue, 15%), .25); 33 | // outline: 0; 34 | // } 35 | 36 | // &:visited { 37 | // color: var(--sd-color-dark); 38 | // } 39 | 40 | // // override alabaster theme 41 | // &.reference { 42 | // border-bottom: inherit; 43 | // } 44 | // &.reference:hover { 45 | // border-bottom: inherit; 46 | // } 47 | } 48 | 49 | @media (prefers-reduced-motion: reduce) { 50 | .sd-btn { 51 | transition: none; 52 | } 53 | } 54 | 55 | @each $color, $value in $semantic-colors { 56 | .sd-btn-#{$color}, 57 | .sd-btn-outline-#{$color}:hover, 58 | .sd-btn-outline-#{$color}:focus { 59 | color: var(--sd-color-#{$color}-text) !important; 60 | background-color: var(--sd-color-#{$color}) !important; 61 | border-color: var(--sd-color-#{$color}) !important; 62 | border-width: 1px !important; 63 | border-style: solid !important; 64 | } 65 | .sd-btn-#{$color}:hover, 66 | .sd-btn-#{$color}:focus { 67 | color: var(--sd-color-#{$color}-text) !important; 68 | background-color: var(--sd-color-#{$color}-highlight) !important; 69 | border-color: var(--sd-color-#{$color}-highlight) !important; 70 | border-width: 1px !important; 71 | border-style: solid !important; 72 | } 73 | .sd-btn-outline-#{$color} { 74 | color: var(--sd-color-#{$color}) !important; 75 | border-color: var(--sd-color-#{$color}) !important; 76 | border-width: 1px !important; 77 | border-style: solid !important; 78 | } 79 | } 80 | 81 | // make parent clickable 82 | .sd-stretched-link::after { 83 | position: absolute; 84 | top: 0; 85 | right: 0; 86 | bottom: 0; 87 | left: 0; 88 | z-index: 1; 89 | content: ""; 90 | } 91 | 92 | .sd-hide-link-text { 93 | font-size: 0; 94 | } 95 | -------------------------------------------------------------------------------- /style/_cards.scss: -------------------------------------------------------------------------------- 1 | // Adapted from Bootstrap v5.0.2 (https://getbootstrap.com/) 2 | // Copyright 2011-2019 The Bootstrap Authors 3 | // Copyright 2011-2019 Twitter, Inc. 4 | // Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) 5 | @use 'sass:math'; 6 | 7 | .sd-card { 8 | background-clip: border-box; 9 | background-color: var(--sd-color-card-background); 10 | border: 1px solid var(--sd-color-card-border); 11 | border-radius: 0.25rem; 12 | color: var(--sd-color-card-text); 13 | display: -ms-flexbox; 14 | display: flex; 15 | -ms-flex-direction: column; 16 | flex-direction: column; 17 | min-width: 0; 18 | position: relative; 19 | word-wrap: break-word; 20 | 21 | > hr { 22 | margin-left: 0; 23 | margin-right: 0; 24 | } 25 | } 26 | 27 | .sd-card-hover:hover { 28 | border-color: var(--sd-color-card-border-hover); 29 | transform: scale(1.01); 30 | } 31 | 32 | .sd-card-body { 33 | -ms-flex: 1 1 auto; 34 | flex: 1 1 auto; 35 | padding: 1rem 1rem; 36 | } 37 | 38 | .sd-card-title { 39 | margin-bottom: 0.5rem; 40 | } 41 | 42 | .sd-card-subtitle { 43 | margin-top: -0.25rem; 44 | margin-bottom: 0; 45 | } 46 | 47 | .sd-card-text:last-child { 48 | margin-bottom: 0; 49 | } 50 | 51 | .sd-card-link:hover { 52 | text-decoration: none; 53 | } 54 | 55 | .sd-card-link + .card-link { 56 | margin-left: 1rem; 57 | } 58 | 59 | .sd-card-header { 60 | padding: 0.5rem 1rem; 61 | margin-bottom: 0; 62 | background-color: var(--sd-color-card-header); 63 | border-bottom: 1px solid var(--sd-color-card-border); 64 | } 65 | 66 | .sd-card-header:first-child { 67 | border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0; 68 | } 69 | 70 | .sd-card-footer { 71 | padding: 0.5rem 1rem; 72 | background-color: var(--sd-color-card-footer); 73 | border-top: 1px solid var(--sd-color-card-border); 74 | } 75 | 76 | .sd-card-footer:last-child { 77 | border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px); 78 | } 79 | 80 | .sd-card-header-tabs { 81 | margin-right: -0.5rem; 82 | margin-bottom: -0.5rem; 83 | margin-left: -0.5rem; 84 | border-bottom: 0; 85 | } 86 | 87 | .sd-card-header-pills { 88 | margin-right: -0.5rem; 89 | margin-left: -0.5rem; 90 | } 91 | 92 | .sd-card-img-overlay { 93 | position: absolute; 94 | top: 0; 95 | right: 0; 96 | bottom: 0; 97 | left: 0; 98 | padding: 1rem; 99 | border-radius: calc(0.25rem - 1px); 100 | } 101 | 102 | .sd-card-img, 103 | .sd-card-img-bottom, 104 | .sd-card-img-top { 105 | width: 100%; 106 | } 107 | 108 | .sd-card-img, 109 | .sd-card-img-top { 110 | border-top-left-radius: calc(0.25rem - 1px); 111 | border-top-right-radius: calc(0.25rem - 1px); 112 | } 113 | 114 | .sd-card-img, 115 | .sd-card-img-bottom { 116 | border-bottom-left-radius: calc(0.25rem - 1px); 117 | border-bottom-right-radius: calc(0.25rem - 1px); 118 | } 119 | 120 | // sd-cards-carousel is not part of bootstrap 121 | // it is intended to create a single row of scrollable cards 122 | // with a standard width for each card 123 | 124 | .sd-cards-carousel { 125 | width: 100%; 126 | display: flex; 127 | flex-wrap: nowrap; 128 | -ms-flex-direction: row; 129 | flex-direction: row; 130 | overflow-x: hidden; 131 | scroll-snap-type: x mandatory; 132 | } 133 | 134 | // use to always show the scroll bar 135 | .sd-cards-carousel.sd-show-scrollbar { 136 | overflow-x: auto; 137 | } 138 | 139 | .sd-cards-carousel:hover, .sd-cards-carousel:focus { 140 | overflow-x: auto; 141 | } 142 | 143 | .sd-cards-carousel > .sd-card { 144 | flex-shrink: 0; 145 | scroll-snap-align: start; 146 | } 147 | 148 | .sd-cards-carousel > .sd-card:not(:last-child) { 149 | margin-right: 3px; 150 | } 151 | 152 | @for $i from 1 through 12 { 153 | .sd-card-cols-#{$i} > .sd-card { 154 | // we use less than 100% here, so that the (i+1)th card will be slightly visible, 155 | // so the user is aware that there are more cards available 156 | width: math.div(90%, $i); 157 | } 158 | } 159 | -------------------------------------------------------------------------------- /style/_colors.scss: -------------------------------------------------------------------------------- 1 | $white: #fff !default; 2 | $white-50: rgba(255, 255, 255, .5) !default; 3 | $gray-100: #f8f9fa !default; 4 | $gray-200: #e9ecef !default; 5 | $gray-300: #dee2e6 !default; 6 | $gray-400: #ced4da !default; 7 | $gray-500: #adb5bd !default; 8 | $gray-600: #6c757d !default; 9 | $gray-700: #495057 !default; 10 | $gray-800: #343a40 !default; 11 | $gray-900: #212529 !default; 12 | $black: #000 !default; 13 | $black-0: rgba(0, 0, 0, 0) !default; 14 | $black-3: rgba(0, 0, 0, .03) !default; 15 | $black-12-5: rgba(0, 0, 0, .125) !default; 16 | $black-15: rgba(0, 0, 0, .15) !default; 17 | $black-25: rgba(0, 0, 0, .25) !default; 18 | $black-50: rgba(0, 0, 0, .5) !default; 19 | 20 | $blue: #0071bc !default; 21 | $indigo: #6610f2 !default; 22 | $purple: #6f42c1 !default; 23 | $pink: #d63384 !default; 24 | $red: #dc3545 !default; 25 | $orange: #fd7e14 !default; 26 | $yellow: #ffc107 !default; 27 | $green: #28a745 !default; 28 | $teal: #20c997 !default; 29 | $cyan: #17a2b8 !default; 30 | 31 | $semantic-colors: ( 32 | "primary": $blue, 33 | "secondary": $gray-600, 34 | "success": $green, 35 | "info": $cyan, 36 | "warning": #f0b37e, 37 | "danger": $red, 38 | "light": $gray-100, 39 | "muted": $gray-600, 40 | "dark": $gray-900, 41 | "black": black, 42 | "white": white, 43 | ) !default; 44 | 45 | @function text-color($value) { 46 | @return if(lightness($value) > 70, $gray-900, $white); 47 | } 48 | 49 | @each $color, $value in $semantic-colors { 50 | .sd-bg-#{$color} { 51 | background-color: var(--sd-color-#{$color}) !important; 52 | } 53 | .sd-bg-text-#{$color} { 54 | color: var(--sd-color-#{$color}-text) !important; 55 | } 56 | button { 57 | &.sd-bg-#{$color}:focus, 58 | &.sd-bg-#{$color}:hover { 59 | background-color: var(--sd-color-#{$color}-highlight) !important; 60 | } 61 | } 62 | a { 63 | &.sd-bg-#{$color}:focus, 64 | &.sd-bg-#{$color}:hover { 65 | background-color: var(--sd-color-#{$color}-highlight) !important; 66 | } 67 | } 68 | } 69 | 70 | @each $color, $value in $semantic-colors { 71 | .sd-text-#{$color}, .sd-text-#{$color} > p { 72 | color: var(--sd-color-#{$color}) !important; 73 | } 74 | a { 75 | &.sd-text-#{$color}:focus, 76 | &.sd-text-#{$color}:hover { 77 | color: var(--sd-color-#{$color}-highlight) !important; 78 | } 79 | } 80 | } 81 | 82 | @each $color, $value in $semantic-colors { 83 | .sd-outline-#{$color} { 84 | border-color: var(--sd-color-#{$color}) !important; 85 | border-style: solid !important; 86 | border-width: 1px !important; 87 | } 88 | a { 89 | &.sd-outline-#{$color}:focus, 90 | &.sd-outline-#{$color}:hover { 91 | border-color: var(--sd-color-#{$color}-highlight) !important; 92 | } 93 | } 94 | } 95 | 96 | // transparent color 97 | .sd-bg-transparent { 98 | background-color: transparent !important; 99 | } 100 | .sd-outline-transparent { 101 | border-color: transparent !important; 102 | } 103 | .sd-text-transparent { 104 | color: transparent !important; 105 | } 106 | -------------------------------------------------------------------------------- /style/_display.scss: -------------------------------------------------------------------------------- 1 | .sd-d-none { 2 | display: none !important; 3 | } 4 | 5 | .sd-d-inline { 6 | display: inline !important; 7 | } 8 | 9 | .sd-d-inline-block { 10 | display: inline-block !important; 11 | } 12 | 13 | .sd-d-block { 14 | display: block !important; 15 | } 16 | 17 | .sd-d-grid { 18 | display: grid !important; 19 | } 20 | 21 | .sd-d-flex-row { 22 | display: -ms-flexbox !important; 23 | display: flex !important; 24 | flex-direction: row !important; 25 | } 26 | 27 | .sd-d-flex-column { 28 | display: -ms-flexbox !important; 29 | display: flex !important; 30 | flex-direction: column !important; 31 | } 32 | 33 | .sd-d-inline-flex { 34 | display: -ms-inline-flexbox !important; 35 | display: inline-flex !important; 36 | } 37 | 38 | @each $cat, $width in $media-widths { 39 | @media (min-width: $width) { 40 | .sd-d-#{$cat}-none { 41 | display: none !important; 42 | } 43 | 44 | .sd-d-#{$cat}-inline { 45 | display: inline !important; 46 | } 47 | 48 | .sd-d-#{$cat}-inline-block { 49 | display: inline-block !important; 50 | } 51 | 52 | .sd-d-#{$cat}-block { 53 | display: block !important; 54 | } 55 | 56 | .sd-d-#{$cat}-grid { 57 | display: grid !important; 58 | } 59 | 60 | .sd-d-#{$cat}-flex { 61 | display: -ms-flexbox !important; 62 | display: flex !important; 63 | } 64 | 65 | .sd-d-#{$cat}-inline-flex { 66 | display: -ms-inline-flexbox !important; 67 | display: inline-flex !important; 68 | } 69 | } 70 | } 71 | 72 | // will align on major axis of flex 73 | .sd-align-major-start { 74 | justify-content: flex-start !important; 75 | } 76 | 77 | .sd-align-major-end { 78 | justify-content: flex-end !important; 79 | } 80 | 81 | .sd-align-major-center { 82 | justify-content: center !important; 83 | } 84 | 85 | .sd-align-major-justify { 86 | justify-content: space-between !important; 87 | } 88 | 89 | .sd-align-major-spaced { 90 | justify-content: space-evenly !important; 91 | } 92 | 93 | // will align on minor axis of flex 94 | .sd-align-minor-start { 95 | align-items: flex-start !important; 96 | } 97 | 98 | .sd-align-minor-end { 99 | align-items: flex-end !important; 100 | } 101 | 102 | .sd-align-minor-center { 103 | align-items: center !important; 104 | } 105 | 106 | // default 107 | .sd-align-minor-stretch { 108 | align-items: stretch !important; 109 | } 110 | -------------------------------------------------------------------------------- /style/_dropdown.scss: -------------------------------------------------------------------------------- 1 | details.sd-dropdown { 2 | 3 | position: relative; 4 | font-size: var(--sd-fontsize-dropdown); 5 | 6 | &:hover { 7 | cursor: pointer; 8 | } 9 | 10 | .sd-summary-content { 11 | cursor: default; 12 | } 13 | 14 | summary.sd-summary-title { 15 | padding: 0.5em 0.6em 0.5em 1em; 16 | font-size: var(--sd-fontsize-dropdown-title); 17 | font-weight: var(--sd-fontweight-dropdown-title); 18 | 19 | // make the text un-selectable 20 | user-select: none; 21 | -moz-user-select: none; 22 | -ms-user-select: none; 23 | -webkit-user-select: none; 24 | 25 | // hide the default triangle marker 26 | list-style: none; 27 | // chrome doesn't yet support list-style 28 | &::-webkit-details-marker { 29 | display: none; 30 | } 31 | 32 | &:focus { 33 | outline: none; 34 | } 35 | 36 | // The title is split into three parts: 37 | // 1. The icon (optional), which should be on the left 38 | // 2. The text, which should be in the middle, and take all available space 39 | // 3. The state marker, which should be on the right 40 | 41 | display: inline-flex; 42 | justify-content: space-between; 43 | 44 | .sd-summary-icon { 45 | margin-right: 0.6em; 46 | // align the icon vertically within its container 47 | display: inline-flex; 48 | align-items: center; 49 | } 50 | 51 | .sd-summary-icon svg { 52 | opacity: 0.8; 53 | } 54 | 55 | .sd-summary-text { 56 | flex-grow: 1; 57 | line-height: 1.5; 58 | // note, we add right padding to the text, rather than a left margin to the state marker, 59 | // because when you rotate the state marker, left is no longer left 60 | padding-right: 0.5rem; 61 | } 62 | 63 | .sd-summary-state-marker { 64 | pointer-events: none; 65 | // align the icon vertically within its container 66 | display: inline-flex; 67 | align-items: center; 68 | } 69 | 70 | // make the state marker a bit more prominent when hovered 71 | .sd-summary-state-marker svg { 72 | opacity: 0.6; 73 | } 74 | &:hover .sd-summary-state-marker svg { 75 | opacity: 1; 76 | transform: scale(1.1); 77 | } 78 | 79 | } 80 | 81 | // Hide the octicon added as a placeholder for when no title is provided, 82 | // but only when the summary is open 83 | &[open] summary .sd-octicon.no-title { 84 | visibility: hidden; 85 | } 86 | 87 | // setup how state marker changes on open/close of the dropdown 88 | .sd-summary-chevron-right { 89 | transition: 0.25s; 90 | } 91 | &[open] > .sd-summary-title .sd-summary-chevron-right { 92 | transform: rotate(90deg); 93 | } 94 | &[open] > .sd-summary-title .sd-summary-chevron-down { 95 | transform: rotate(180deg); 96 | } 97 | 98 | // Hide the card body border when not open 99 | &:not([open]).sd-card { 100 | border: none; 101 | } 102 | &:not([open]) > .sd-card-header { 103 | border: 1px solid var(--sd-color-card-border); 104 | border-radius: 0.25rem; 105 | } 106 | 107 | // Transition animation 108 | &.sd-fade-in[open] summary ~ * { 109 | -moz-animation: sd-fade-in 0.5s ease-in-out; 110 | -webkit-animation: sd-fade-in 0.5s ease-in-out; 111 | animation: sd-fade-in 0.5s ease-in-out; 112 | } 113 | 114 | &.sd-fade-in-slide-down[open] summary ~ * { 115 | -moz-animation: sd-fade-in 0.5s ease-in-out, sd-slide-down 0.5s ease-in-out; 116 | -webkit-animation: sd-fade-in 0.5s ease-in-out, 117 | sd-slide-down 0.5s ease-in-out; 118 | animation: sd-fade-in 0.5s ease-in-out, sd-slide-down 0.5s ease-in-out; 119 | } 120 | } 121 | 122 | .sd-col > .sd-dropdown { 123 | width: 100%; 124 | } 125 | 126 | .sd-summary-content > .sd-tab-set:first-child { 127 | margin-top: 0; 128 | } 129 | 130 | @keyframes sd-fade-in { 131 | 0% { 132 | opacity: 0; 133 | } 134 | 135 | 100% { 136 | opacity: 1; 137 | } 138 | } 139 | 140 | @keyframes sd-slide-down { 141 | 0% { 142 | transform: translate(0, -10px); 143 | } 144 | 145 | 100% { 146 | transform: translate(0, 0); 147 | } 148 | } 149 | -------------------------------------------------------------------------------- /style/_grids.scss: -------------------------------------------------------------------------------- 1 | // Adapted from Bootstrap v5.0.2 (https://getbootstrap.com/) 2 | // See: dist/css/bootstrap-grid.css 3 | // Copyright 2011-2021 The Bootstrap Authors 4 | // Copyright 2011-2019 Twitter, Inc. 5 | // Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) 6 | @use 'sass:math'; 7 | 8 | $gutter-widths: $spacings; 9 | 10 | .sd-container, 11 | .sd-container-fluid, 12 | .sd-container-lg, 13 | .sd-container-md, 14 | .sd-container-sm, 15 | .sd-container-xl { 16 | margin-left: auto; 17 | margin-right: auto; 18 | padding-left: var(--sd-gutter-x, 0.75rem); 19 | padding-right: var(--sd-gutter-x, 0.75rem); 20 | width: 100%; 21 | } 22 | 23 | @media (min-width: $media-min-sm) { 24 | .sd-container-sm, 25 | .sd-container { 26 | max-width: $media-max-sm; 27 | } 28 | } 29 | 30 | @media (min-width: $media-min-md) { 31 | .sd-container-md, 32 | .sd-container-sm, 33 | .sd-container { 34 | max-width: $media-max-md; 35 | } 36 | } 37 | 38 | @media (min-width: $media-min-lg) { 39 | .sd-container-lg, 40 | .sd-container-md, 41 | .sd-container-sm, 42 | .sd-container { 43 | max-width: $media-max-lg; 44 | } 45 | } 46 | 47 | @media (min-width: $media-min-xl) { 48 | .sd-container-xl, 49 | .sd-container-lg, 50 | .sd-container-md, 51 | .sd-container-sm, 52 | .sd-container { 53 | max-width: $media-max-xl; 54 | } 55 | } 56 | 57 | .sd-row { 58 | --sd-gutter-x: 1.5rem; 59 | --sd-gutter-y: 0; 60 | display: -ms-flexbox; 61 | display: flex; 62 | -ms-flex-wrap: wrap; 63 | flex-wrap: wrap; 64 | margin-top: calc(var(--sd-gutter-y) * -1); 65 | margin-right: calc(var(--sd-gutter-x) * -0.5); 66 | margin-left: calc(var(--sd-gutter-x) * -0.5); 67 | } 68 | 69 | .sd-row > * { 70 | box-sizing: border-box; 71 | flex-shrink: 0; 72 | width: 100%; 73 | max-width: 100%; 74 | padding-right: calc(var(--sd-gutter-x) * 0.5); 75 | padding-left: calc(var(--sd-gutter-x) * 0.5); 76 | margin-top: var(--sd-gutter-y); 77 | } 78 | 79 | .sd-col { 80 | flex: 1 0 0%; 81 | -ms-flex: 1 0 0%; 82 | } 83 | 84 | .sd-row-cols-auto > * { 85 | flex: 0 0 auto; 86 | width: auto; 87 | } 88 | 89 | @for $i from 1 through 12 { 90 | .sd-row-cols-#{$i} { 91 | > * { 92 | flex: 0 0 auto; 93 | -ms-flex: 0 0 auto; 94 | width: math.div(100%, $i); 95 | } 96 | } 97 | } 98 | 99 | @each $cat, $width in $media-widths { 100 | @media (min-width: $width) { 101 | .sd-col-#{$cat} { 102 | flex: 1 0 0%; 103 | -ms-flex: 1 0 0%; 104 | } 105 | 106 | .sd-row-cols-#{$cat}-auto { 107 | flex: 1 0 auto; 108 | -ms-flex: 1 0 auto; 109 | width: 100%; 110 | } 111 | 112 | @for $i from 1 through 12 { 113 | .sd-row-cols-#{$cat}-#{$i} { 114 | > * { 115 | flex: 0 0 auto; 116 | -ms-flex: 0 0 auto; 117 | width: math.div(100%, $i); 118 | } 119 | } 120 | } 121 | } 122 | } 123 | 124 | .sd-col-auto { 125 | flex: 0 0 auto; 126 | -ms-flex: 0 0 auto; 127 | width: auto; 128 | } 129 | 130 | @for $i from 1 through 12 { 131 | .sd-col-#{$i} { 132 | flex: 0 0 auto; 133 | -ms-flex: 0 0 auto; 134 | width: 100% * math.div($i, 12); 135 | } 136 | } 137 | 138 | @each $cat, $width in $gutter-widths { 139 | .sd-g-#{$cat}, 140 | .sd-gy-#{$cat} { 141 | --sd-gutter-y: #{$width}; 142 | } 143 | .sd-g-#{$cat}, 144 | .sd-gx-#{$cat} { 145 | --sd-gutter-x: #{$width}; 146 | } 147 | } 148 | 149 | @each $cat, $width in $media-widths { 150 | @media (min-width: $width) { 151 | .sd-col-#{$cat}-auto { 152 | -ms-flex: 0 0 auto; 153 | flex: 0 0 auto; 154 | width: auto; 155 | } 156 | @for $i from 1 through 12 { 157 | .sd-col-#{$cat}-#{$i} { 158 | -ms-flex: 0 0 auto; 159 | flex: 0 0 auto; 160 | width: 100% * math.div($i, 12); 161 | } 162 | } 163 | @each $gcat, $gwidth in $gutter-widths { 164 | .sd-g-#{$cat}-#{$gcat}, 165 | .sd-gy-#{$cat}-#{$gcat} { 166 | --sd-gutter-y: #{$gwidth}; 167 | } 168 | .sd-g-#{$cat}-#{$gcat}, 169 | .sd-gx-#{$cat}-#{$gcat} { 170 | --sd-gutter-x: #{$gwidth}; 171 | } 172 | } 173 | } 174 | } 175 | 176 | .sd-flex-row-reverse { 177 | flex-direction: row-reverse !important; 178 | } 179 | -------------------------------------------------------------------------------- /style/_icons.scss: -------------------------------------------------------------------------------- 1 | .sd-octicon, 2 | .sd-material-icon { 3 | display: inline-block; 4 | fill: currentColor; 5 | vertical-align: middle; 6 | } 7 | 8 | $avatar-sizes: ( 9 | xs: 1rem, 10 | sm: 3rem, 11 | md: 5rem, 12 | lg: 7rem, 13 | xl: 10rem, 14 | inherit: inherit, 15 | initial: initial 16 | ); 17 | 18 | @each $size, $value in $avatar-sizes { 19 | .sd-avatar-#{$size} { 20 | border-radius: 50%; 21 | object-fit: cover; /* Keep the image aspect ratio */ 22 | object-position: center; /* Center the image within the element */ 23 | width: $value; 24 | height: $value; 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /style/_overrides.scss: -------------------------------------------------------------------------------- 1 | // Overrides for non-bootstrap themes (such as alabaster) 2 | 3 | .sd-sphinx-override, 4 | .sd-sphinx-override * { 5 | -moz-box-sizing: border-box; 6 | -webkit-box-sizing: border-box; 7 | box-sizing: border-box; 8 | } 9 | 10 | .sd-sphinx-override p { 11 | margin-top: 0; 12 | } 13 | -------------------------------------------------------------------------------- /style/_sizing.scss: -------------------------------------------------------------------------------- 1 | // Width and height 2 | 3 | $sizes: ( 4 | 25: 25%, 5 | 50: 50%, 6 | 75: 75%, 7 | 100: 100%, 8 | auto: auto, 9 | ); 10 | 11 | @each $prop, $abbrev in (width: w, height: h) { 12 | @each $size, $length in $sizes { 13 | .sd-#{$abbrev}-#{$size} { 14 | #{$prop}: $length !important; 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /style/_spacing.scss: -------------------------------------------------------------------------------- 1 | $spacer: 1rem; 2 | $spacings: ( 3 | 0: 0, 4 | 1: $spacer * 0.25, 5 | 2: $spacer * 0.5, 6 | 3: $spacer, 7 | 4: $spacer * 1.5, 8 | 5: $spacer * 3, 9 | ) !default; 10 | 11 | $media-min-sm: 576px; 12 | $media-min-md: 768px; 13 | $media-min-lg: 992px; 14 | $media-min-xl: 1200px; 15 | 16 | $media-max-sm: 540px; 17 | $media-max-md: 720px; 18 | $media-max-lg: 960px; 19 | $media-max-xl: 1140px; 20 | 21 | $media-widths: ( 22 | "sm": $media-min-sm, 23 | "md": $media-min-md, 24 | "lg": $media-min-lg, 25 | "xl": $media-min-xl, 26 | ) !default; 27 | 28 | @each $id, $value in $spacings { 29 | .sd-p-#{$id} { 30 | padding: $value !important; 31 | } 32 | 33 | .sd-pt-#{$id}, 34 | .sd-py-#{$id} { 35 | padding-top: $value !important; 36 | } 37 | 38 | .sd-pr-#{$id}, 39 | .sd-px-#{$id} { 40 | padding-right: $value !important; 41 | } 42 | 43 | .sd-pb-#{$id}, 44 | .sd-py-#{$id} { 45 | padding-bottom: $value !important; 46 | } 47 | 48 | .sd-pl-#{$id}, 49 | .sd-px-#{$id} { 50 | padding-left: $value !important; 51 | } 52 | } 53 | 54 | .sd-m-auto { 55 | margin: auto !important; 56 | } 57 | 58 | .sd-mt-auto, 59 | .sd-my-auto { 60 | margin-top: auto !important; 61 | } 62 | 63 | .sd-mr-auto, 64 | .sd-mx-auto { 65 | margin-right: auto !important; 66 | } 67 | 68 | .sd-mb-auto, 69 | .sd-my-auto { 70 | margin-bottom: auto !important; 71 | } 72 | 73 | .sd-ml-auto, 74 | .sd-mx-auto { 75 | margin-left: auto !important; 76 | } 77 | 78 | @each $id, $value in $spacings { 79 | .sd-m-#{$id} { 80 | margin: $value !important; 81 | } 82 | 83 | .sd-mt-#{$id}, 84 | .sd-my-#{$id} { 85 | margin-top: $value !important; 86 | } 87 | 88 | .sd-mr-#{$id}, 89 | .sd-mx-#{$id} { 90 | margin-right: $value !important; 91 | } 92 | 93 | .sd-mb-#{$id}, 94 | .sd-my-#{$id} { 95 | margin-bottom: $value !important; 96 | } 97 | 98 | .sd-ml-#{$id}, 99 | .sd-mx-#{$id} { 100 | margin-left: $value !important; 101 | } 102 | } 103 | -------------------------------------------------------------------------------- /style/_tabs.scss: -------------------------------------------------------------------------------- 1 | // Tabbed block container 2 | .sd-tab-set { 3 | border-radius: 0.125rem; 4 | display: flex; 5 | flex-wrap: wrap; 6 | margin: 1em 0; 7 | position: relative; 8 | 9 | // Hide radio buttons 10 | > input { 11 | opacity: 0; 12 | position: absolute; 13 | 14 | // Active tab label 15 | &:checked + label { 16 | border-color: var(--sd-color-tabs-underline-active); 17 | color: var(--sd-color-tabs-label-active); 18 | 19 | // Show tabbed block content 20 | + .sd-tab-content { 21 | display: block; 22 | } 23 | } 24 | 25 | &:not(:checked) + label:hover { 26 | color: var(--sd-color-tabs-label-hover); 27 | border-color: var(--sd-color-tabs-underline-hover); 28 | } 29 | 30 | // Focused tab label 31 | &:focus + label { 32 | outline-style: auto; 33 | } 34 | 35 | // Disable focus indicator for pointer devices 36 | &:not(.focus-visible) + label { 37 | outline: none; 38 | -webkit-tap-highlight-color: transparent; 39 | } 40 | } 41 | 42 | // Tab label 43 | > label { 44 | border-bottom: 0.125rem solid transparent; 45 | margin-bottom: 0; 46 | color: var(--sd-color-tabs-label-inactive); 47 | border-color: var(--sd-color-tabs-underline-inactive); 48 | cursor: pointer; 49 | font-size: var(--sd-fontsize-tabs-label); 50 | font-weight: 700; 51 | padding: 1em 1.25em 0.5em; 52 | transition: color 250ms; 53 | width: auto; 54 | z-index: 1; 55 | 56 | // Hovered label 57 | html &:hover { 58 | color: var(--sd-color-tabs-label-active); 59 | } 60 | } 61 | } 62 | 63 | .sd-col > .sd-tab-set { 64 | width: 100%; 65 | } 66 | 67 | // Tabbed block content 68 | .sd-tab-content { 69 | box-shadow: 0 -0.0625rem var(--sd-color-tabs-overline), 70 | 0 0.0625rem var(--sd-color-tabs-underline); 71 | display: none; 72 | order: 99; 73 | padding-bottom: 0.75rem; 74 | padding-top: 0.75rem; 75 | width: 100%; 76 | 77 | > :first-child { 78 | margin-top: 0 !important; 79 | } 80 | 81 | > :last-child { 82 | margin-bottom: 0 !important; 83 | } 84 | 85 | // Nested tabs 86 | > .sd-tab-set { 87 | margin: 0; 88 | } 89 | } 90 | -------------------------------------------------------------------------------- /style/_text.scss: -------------------------------------------------------------------------------- 1 | .sd-text-justify { 2 | text-align: justify !important; 3 | } 4 | 5 | .sd-text-left { 6 | text-align: left !important; 7 | } 8 | 9 | .sd-text-right { 10 | text-align: right !important; 11 | } 12 | 13 | .sd-text-center { 14 | text-align: center !important; 15 | } 16 | 17 | .sd-font-weight-light { 18 | font-weight: 300 !important; 19 | } 20 | 21 | .sd-font-weight-lighter { 22 | font-weight: lighter !important; 23 | } 24 | 25 | .sd-font-weight-normal { 26 | font-weight: 400 !important; 27 | } 28 | 29 | .sd-font-weight-bold { 30 | font-weight: 700 !important; 31 | } 32 | 33 | .sd-font-weight-bolder { 34 | font-weight: bolder !important; 35 | } 36 | 37 | .sd-font-italic { 38 | font-style: italic !important; 39 | } 40 | 41 | .sd-text-decoration-none { 42 | text-decoration: none !important; 43 | } 44 | 45 | .sd-text-lowercase { 46 | text-transform: lowercase !important; 47 | } 48 | 49 | .sd-text-uppercase { 50 | text-transform: uppercase !important; 51 | } 52 | 53 | .sd-text-capitalize { 54 | text-transform: capitalize !important; 55 | } 56 | 57 | .sd-text-wrap { 58 | white-space: normal !important; 59 | } 60 | 61 | .sd-text-nowrap { 62 | white-space: nowrap !important; 63 | } 64 | 65 | // requires `display: inline-block` or `display: block` 66 | .sd-text-truncate { 67 | overflow: hidden; 68 | text-overflow: ellipsis; 69 | white-space: nowrap; 70 | } 71 | 72 | $font-sizes: ( 73 | 1: calc(1.375rem + 1.5vw), 74 | 2: calc(1.325rem + 0.9vw), 75 | 3: calc(1.3rem + 0.6vw), 76 | 4: calc(1.275rem + 0.3vw), 77 | 5: 1.25rem, 78 | 6: 1rem 79 | ); 80 | 81 | @each $id, $value in $font-sizes { 82 | .sd-fs-#{$id}, .sd-fs-#{$id} > p { 83 | font-size: $value !important; 84 | line-height: unset !important; 85 | } 86 | } 87 | -------------------------------------------------------------------------------- /style/_variables.scss: -------------------------------------------------------------------------------- 1 | :root { 2 | // semantic colors 3 | @each $color, $value in $semantic-colors { 4 | --sd-color-#{$color}: #{$value}; 5 | } 6 | // semantic colors for highlighting (e.g. focus/hover) 7 | @each $color, $value in $semantic-colors { 8 | --sd-color-#{$color}-highlight: #{mix(black, $value, 15%)}; 9 | } 10 | // semantic colors for backgrounds 11 | @each $color, $value in $semantic-colors { 12 | --sd-color-#{$color}-bg: #{rgba($value, 0.2)}; 13 | } 14 | // colors for text on top of a semantic color background 15 | @each $color, $value in $semantic-colors { 16 | --sd-color-#{$color}-text: #{text-color($value)}; 17 | } 18 | // shadow 19 | --sd-color-shadow: #{$black-15}; 20 | // cards 21 | --sd-color-card-border: #{$black-12-5}; 22 | --sd-color-card-border-hover: hsla(231, 99%, 66%, 1); 23 | --sd-color-card-background: transparent; 24 | --sd-color-card-text: inherit; 25 | --sd-color-card-header: transparent; 26 | --sd-color-card-footer: transparent; 27 | // tabs 28 | --sd-color-tabs-label-active: hsla(231, 99%, 66%, 1); 29 | --sd-color-tabs-label-hover: hsla(231, 99%, 66%, 1); 30 | --sd-color-tabs-label-inactive: hsl(0, 0%, 66%); 31 | --sd-color-tabs-underline-active: hsla(231, 99%, 66%, 1); 32 | --sd-color-tabs-underline-hover: rgba(178, 206, 245, 0.62); 33 | --sd-color-tabs-underline-inactive: transparent; 34 | --sd-color-tabs-overline: rgb(222, 222, 222); 35 | --sd-color-tabs-underline: rgb(222, 222, 222); 36 | --sd-fontsize-tabs-label: 1rem; 37 | // dropdown 38 | --sd-fontsize-dropdown: inherit; 39 | --sd-fontsize-dropdown-title: 1rem; 40 | --sd-fontweight-dropdown-title: 700; 41 | } 42 | -------------------------------------------------------------------------------- /style/index.scss: -------------------------------------------------------------------------------- 1 | @import './colors'; 2 | @import './spacing'; 3 | @import './sizing'; 4 | @import './display'; 5 | @import './text'; 6 | @import './borders'; 7 | @import './animations'; 8 | @import './badge'; 9 | @import './button'; 10 | @import './icons'; 11 | @import './cards'; 12 | @import './grids'; 13 | @import './dropdown'; 14 | @import './tabs'; 15 | @import './overrides'; 16 | @import './variables' 17 | -------------------------------------------------------------------------------- /tests/__init__.py: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/executablebooks/sphinx-design/b3d6eddc5bf436e35c213a29f0dda3c8ffb716f7/tests/__init__.py -------------------------------------------------------------------------------- /tests/conftest.py: -------------------------------------------------------------------------------- 1 | import os 2 | from pathlib import Path 3 | from typing import Any, Optional 4 | 5 | from docutils import nodes 6 | import pytest 7 | from sphinx import version_info 8 | from sphinx.testing.util import SphinxTestApp 9 | 10 | from sphinx_design._compat import findall 11 | 12 | pytest_plugins = "sphinx.testing.fixtures" 13 | 14 | if version_info >= (7, 2): 15 | # see https://github.com/sphinx-doc/sphinx/pull/11526 16 | from pathlib import Path as sphinx_path # noqa: N813 17 | else: 18 | from sphinx.testing.path import path as sphinx_path # type: ignore[no-redef] 19 | 20 | 21 | class SphinxBuilder: 22 | def __init__(self, app: SphinxTestApp, src_path: Path): 23 | self.app = app 24 | self._src_path = src_path 25 | 26 | @property 27 | def src_path(self) -> Path: 28 | return self._src_path 29 | 30 | @property 31 | def out_path(self) -> Path: 32 | return Path(self.app.outdir) 33 | 34 | def build(self, assert_pass=True): 35 | self.app.build() 36 | if assert_pass: 37 | assert self.warnings == "", self.status 38 | return self 39 | 40 | @property 41 | def status(self): 42 | return self.app._status.getvalue() 43 | 44 | @property 45 | def warnings(self): 46 | return self.app._warning.getvalue() 47 | 48 | def get_doctree( 49 | self, docname: str, post_transforms: bool = False 50 | ) -> nodes.document: 51 | doctree = self.app.env.get_doctree(docname) 52 | if post_transforms: 53 | self.app.env.apply_post_transforms(doctree, docname) 54 | # make source path consistent for test comparisons 55 | for node in findall(doctree)(include_self=True): 56 | if not (hasattr(node, "get") and node.get("source")): 57 | continue 58 | node["source"] = Path(node["source"]).relative_to(self.src_path).as_posix() 59 | if node["source"].endswith(".rst"): 60 | node["source"] = node["source"][:-4] 61 | elif node["source"].endswith(".md"): 62 | node["source"] = node["source"][:-3] 63 | # remove mathjax classes added by myst parser 64 | if doctree.children and isinstance(doctree.children[0], nodes.section): 65 | doctree.children[0]["classes"] = [] 66 | return doctree 67 | 68 | 69 | @pytest.fixture() 70 | def sphinx_builder(tmp_path: Path, make_app, monkeypatch): 71 | def _create_project( 72 | buildername: str = "html", conf_kwargs: Optional[dict[str, Any]] = None 73 | ): 74 | src_path = tmp_path / "srcdir" 75 | src_path.mkdir() 76 | conf_kwargs = conf_kwargs or { 77 | "extensions": ["myst_parser", "sphinx_design"], 78 | "myst_enable_extensions": ["colon_fence"], 79 | } 80 | content = "\n".join( 81 | [f"{key} = {value!r}" for key, value in conf_kwargs.items()] 82 | ) 83 | src_path.joinpath("conf.py").write_text(content, encoding="utf8") 84 | app = make_app( 85 | srcdir=sphinx_path(os.path.abspath(str(src_path))), # noqa: PTH100 86 | buildername=buildername, 87 | ) 88 | return SphinxBuilder(app, src_path) 89 | 90 | yield _create_project 91 | -------------------------------------------------------------------------------- /tests/test_misc.py: -------------------------------------------------------------------------------- 1 | import pytest 2 | 3 | from sphinx_design.icons import get_material_icon_data, get_octicon_data 4 | 5 | 6 | def test_octicons(file_regression): 7 | """Test the available octicon names. 8 | 9 | This is intended to provide a diff of the octicons available, 10 | when the octicons are updated, to check if we are removing any 11 | (and hence breaking back-compatibility). 12 | """ 13 | data = get_octicon_data() 14 | content = "" 15 | for octicon in sorted(data): 16 | content += f"{octicon}: {','.join(data[octicon]['heights'])}\n" 17 | file_regression.check(content) 18 | 19 | 20 | @pytest.mark.parametrize("style", ["regular", "outlined", "round", "sharp", "twotone"]) 21 | def test_material(style, file_regression): 22 | """Test the available material icons names. 23 | 24 | This is intended to provide a diff of the octicons available, 25 | when the octicons are updated, to check if we are removing any 26 | (and hence breaking back-compatibility). 27 | """ 28 | data = get_material_icon_data(style) 29 | content = "" 30 | for name in sorted(data): 31 | content += f"{name}: {','.join(data[name]['heights'])}\n" 32 | file_regression.check(content) 33 | -------------------------------------------------------------------------------- /tests/test_snippets/sd_custom_directives.xml: -------------------------------------------------------------------------------- 1 | 2 |
3 | 4 | Heading 5 | <container body_classes="" chevron="True" container_classes="sd-mb-3" design_component="dropdown" has_title="True" icon="code" is_div="True" opened="False" title_classes="sd-bg-primary sd-bg-text-primary" type="dropdown"> 6 | <rubric> 7 | Syntax 8 | <paragraph> 9 | content 10 | -------------------------------------------------------------------------------- /tests/test_snippets/sd_hide_title.xml: -------------------------------------------------------------------------------- 1 | <document source="index"> 2 | <section ids="heading" names="heading"> 3 | <title classes="sd-d-none"> 4 | Heading 5 | <paragraph> 6 | content 7 | -------------------------------------------------------------------------------- /tests/test_snippets/snippet_post_article-info.xml: -------------------------------------------------------------------------------- 1 | <document source="index"> 2 | <section ids="heading" names="heading"> 3 | <title> 4 | Heading 5 | <container classes="sd-container-fluid sd-sphinx-override sd-p-0 sd-mt-2 sd-mb-4 sd-p-2 sd-outline-muted sd-rounded-1" design_component="grid-container" is_div="True"> 6 | <container classes="sd-row sd-row-cols-2 sd-gx-2 sd-gy-1" design_component="grid-row" is_div="True"> 7 | <container classes="sd-col sd-col-auto sd-d-flex-row sd-align-minor-center" design_component="grid-item" is_div="True"> 8 | <reference refuri="https://executablebooks.org/"> 9 | <image alt="" candidates="{'*': 'images/ebp-logo.png'}" classes="sd-avatar-sm sd-outline-muted" uri="images/ebp-logo.png"> 10 | <container classes="sd-col sd-d-flex-row sd-align-minor-center" design_component="grid-item" is_div="True"> 11 | <container classes="sd-container-fluid sd-sphinx-override" design_component="grid-container" is_div="True"> 12 | <container classes="sd-row sd-row-cols-2 sd-row-cols-xs-2 sd-row-cols-sm-3 sd-row-cols-md-3 sd-row-cols-lg-3 sd-gx-3 sd-gy-1" design_component="grid-row" is_div="True"> 13 | <container classes="sd-col sd-col-auto sd-d-flex-row sd-align-minor-center" design_component="grid-item" is_div="True"> 14 | <paragraph classes="sd-p-0 sd-m-0"> 15 | Executable Books 16 | <container classes="sd-col sd-col-auto sd-d-flex-row sd-align-minor-center" design_component="grid-item" is_div="True"> 17 | <paragraph classes="sd-p-0 sd-m-0"> 18 | <raw classes="sd-pr-2" format="html" xml:space="preserve"> 19 | <svg version="1.1" width="16.0px" height="16.0px" class="sd-octicon sd-octicon-calendar" viewBox="0 0 16 16" aria-hidden="true"><path d="M4.75 0a.75.75 0 0 1 .75.75V2h5V.75a.75.75 0 0 1 1.5 0V2h1.25c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0 1 13.25 16H2.75A1.75 1.75 0 0 1 1 14.25V3.75C1 2.784 1.784 2 2.75 2H4V.75A.75.75 0 0 1 4.75 0ZM2.5 7.5v6.75c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25V7.5Zm10.75-4H2.75a.25.25 0 0 0-.25.25V6h11V3.75a.25.25 0 0 0-.25-.25Z"></path></svg> 20 | Jul 24, 2021 21 | <container classes="sd-col sd-col-auto sd-d-flex-row sd-align-minor-center" design_component="grid-item" is_div="True"> 22 | <paragraph classes="sd-p-0 sd-m-0"> 23 | <raw classes="sd-pr-2" format="html" xml:space="preserve"> 24 | <svg version="1.1" width="16.0px" height="16.0px" class="sd-octicon sd-octicon-clock" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm7-3.25v2.992l2.028.812a.75.75 0 0 1-.557 1.392l-2.5-1A.751.751 0 0 1 7 8.25v-3.5a.75.75 0 0 1 1.5 0Z"></path></svg> 25 | 5 min read 26 | -------------------------------------------------------------------------------- /tests/test_snippets/snippet_post_badge-basic.xml: -------------------------------------------------------------------------------- 1 | <document source="index"> 2 | <section ids="heading" names="heading"> 3 | <title> 4 | Heading 5 | <paragraph> 6 | <inline classes="sd-sphinx-override sd-badge"> 7 | plain badge 8 | <paragraph> 9 | <inline classes="sd-sphinx-override sd-badge sd-bg-primary sd-bg-text-primary"> 10 | primary 11 | , 12 | <inline classes="sd-sphinx-override sd-badge sd-outline-primary sd-text-primary"> 13 | primary-line 14 | <paragraph> 15 | <inline classes="sd-sphinx-override sd-badge sd-bg-secondary sd-bg-text-secondary"> 16 | secondary 17 | , 18 | <inline classes="sd-sphinx-override sd-badge sd-outline-secondary sd-text-secondary"> 19 | secondary-line 20 | <paragraph> 21 | <inline classes="sd-sphinx-override sd-badge sd-bg-success sd-bg-text-success"> 22 | success 23 | , 24 | <inline classes="sd-sphinx-override sd-badge sd-outline-success sd-text-success"> 25 | success-line 26 | <paragraph> 27 | <inline classes="sd-sphinx-override sd-badge sd-bg-info sd-bg-text-info"> 28 | info 29 | , 30 | <inline classes="sd-sphinx-override sd-badge sd-outline-info sd-text-info"> 31 | info-line 32 | <paragraph> 33 | <inline classes="sd-sphinx-override sd-badge sd-bg-warning sd-bg-text-warning"> 34 | warning 35 | , 36 | <inline classes="sd-sphinx-override sd-badge sd-outline-warning sd-text-warning"> 37 | warning-line 38 | <paragraph> 39 | <inline classes="sd-sphinx-override sd-badge sd-bg-danger sd-bg-text-danger"> 40 | danger 41 | , 42 | <inline classes="sd-sphinx-override sd-badge sd-outline-danger sd-text-danger"> 43 | danger-line 44 | <paragraph> 45 | <inline classes="sd-sphinx-override sd-badge sd-bg-light sd-bg-text-light"> 46 | light 47 | , 48 | <inline classes="sd-sphinx-override sd-badge sd-outline-light sd-text-light"> 49 | light-line 50 | <paragraph> 51 | <inline classes="sd-sphinx-override sd-badge sd-bg-muted sd-bg-text-muted"> 52 | muted 53 | , 54 | <inline classes="sd-sphinx-override sd-badge sd-outline-muted sd-text-muted"> 55 | muted-line 56 | <paragraph> 57 | <inline classes="sd-sphinx-override sd-badge sd-bg-dark sd-bg-text-dark"> 58 | dark 59 | , 60 | <inline classes="sd-sphinx-override sd-badge sd-outline-dark sd-text-dark"> 61 | dark-line 62 | <paragraph> 63 | <inline classes="sd-sphinx-override sd-badge sd-bg-white sd-bg-text-white"> 64 | white 65 | , 66 | <inline classes="sd-sphinx-override sd-badge sd-outline-white sd-text-white"> 67 | white-line 68 | <paragraph> 69 | <inline classes="sd-sphinx-override sd-badge sd-bg-black sd-bg-text-black"> 70 | black 71 | , 72 | <inline classes="sd-sphinx-override sd-badge sd-outline-black sd-text-black"> 73 | black-line 74 | -------------------------------------------------------------------------------- /tests/test_snippets/snippet_post_badge-link.xml: -------------------------------------------------------------------------------- 1 | <document source="index"> 2 | <section ids="heading" names="heading"> 3 | <title> 4 | Heading 5 | <paragraph> 6 | <reference classes="sd-sphinx-override sd-badge sd-bg-primary sd-bg-text-primary" refuri="https://example.com"> 7 | <inline> 8 | https://example.com 9 | <paragraph> 10 | <reference classes="sd-sphinx-override sd-badge sd-outline-primary sd-text-primary" refuri="https://example.com"> 11 | <inline> 12 | explicit title 13 | -------------------------------------------------------------------------------- /tests/test_snippets/snippet_post_button-link.xml: -------------------------------------------------------------------------------- 1 | <document source="index"> 2 | <section ids="heading" names="heading"> 3 | <title> 4 | Heading 5 | <paragraph> 6 | <reference classes="sd-sphinx-override sd-btn sd-text-wrap" refuri="https://example.com"> 7 | <inline> 8 | https://example.com 9 | <paragraph> 10 | <reference classes="sd-sphinx-override sd-btn sd-text-wrap" refuri="https://example.com"> 11 | <inline> 12 | Button text 13 | <paragraph> 14 | <reference classes="sd-sphinx-override sd-btn sd-text-wrap sd-btn-primary sd-shadow-sm" refuri="https://example.com"> 15 | <inline> 16 | https://example.com 17 | <paragraph> 18 | <reference classes="sd-sphinx-override sd-btn sd-text-wrap sd-btn-outline-primary" refuri="https://example.com"> 19 | <inline> 20 | https://example.com 21 | <paragraph> 22 | <inline classes="sd-d-grid"> 23 | <reference classes="sd-sphinx-override sd-btn sd-text-wrap sd-btn-secondary" refuri="https://example.com"> 24 | <inline> 25 | https://example.com 26 | -------------------------------------------------------------------------------- /tests/test_snippets/snippet_post_card-basic.xml: -------------------------------------------------------------------------------- 1 | <document source="index"> 2 | <section ids="heading" names="heading"> 3 | <title> 4 | Heading 5 | <container classes="sd-card sd-sphinx-override sd-mb-3 sd-shadow-sm" design_component="card" is_div="True"> 6 | <container classes="sd-card-body" design_component="card-body" is_div="True"> 7 | <container classes="sd-card-title sd-font-weight-bold" design_component="card-title" is_div="True"> 8 | <PassthroughTextElement> 9 | Card Title 10 | <paragraph classes="sd-card-text"> 11 | Card content 12 | -------------------------------------------------------------------------------- /tests/test_snippets/snippet_post_card-carousel.xml: -------------------------------------------------------------------------------- 1 | <document source="index"> 2 | <section ids="heading" names="heading"> 3 | <title> 4 | Heading 5 | <container classes="sd-sphinx-override sd-cards-carousel sd-card-cols-2" design_component="card-carousel" is_div="True"> 6 | <container classes="sd-card sd-sphinx-override sd-mb-3 sd-shadow-sm" design_component="card" is_div="True"> 7 | <container classes="sd-card-body" design_component="card-body" is_div="True"> 8 | <container classes="sd-card-title sd-font-weight-bold" design_component="card-title" is_div="True"> 9 | <PassthroughTextElement> 10 | card 1 11 | <paragraph classes="sd-card-text"> 12 | content 13 | <container classes="sd-card sd-sphinx-override sd-mb-3 sd-shadow-sm" design_component="card" is_div="True"> 14 | <container classes="sd-card-body" design_component="card-body" is_div="True"> 15 | <container classes="sd-card-title sd-font-weight-bold" design_component="card-title" is_div="True"> 16 | <PassthroughTextElement> 17 | card 2 18 | <paragraph classes="sd-card-text"> 19 | Longer 20 | <paragraph classes="sd-card-text"> 21 | content 22 | <container classes="sd-card sd-sphinx-override sd-mb-3 sd-shadow-sm" design_component="card" is_div="True"> 23 | <container classes="sd-card-body" design_component="card-body" is_div="True"> 24 | <container classes="sd-card-title sd-font-weight-bold" design_component="card-title" is_div="True"> 25 | <PassthroughTextElement> 26 | card 3 27 | <container classes="sd-card sd-sphinx-override sd-mb-3 sd-shadow-sm" design_component="card" is_div="True"> 28 | <container classes="sd-card-body" design_component="card-body" is_div="True"> 29 | <container classes="sd-card-title sd-font-weight-bold" design_component="card-title" is_div="True"> 30 | <PassthroughTextElement> 31 | card 4 32 | <container classes="sd-card sd-sphinx-override sd-mb-3 sd-shadow-sm" design_component="card" is_div="True"> 33 | <container classes="sd-card-body" design_component="card-body" is_div="True"> 34 | <container classes="sd-card-title sd-font-weight-bold" design_component="card-title" is_div="True"> 35 | <PassthroughTextElement> 36 | card 5 37 | <container classes="sd-card sd-sphinx-override sd-mb-3 sd-shadow-sm" design_component="card" is_div="True"> 38 | <container classes="sd-card-body" design_component="card-body" is_div="True"> 39 | <container classes="sd-card-title sd-font-weight-bold" design_component="card-title" is_div="True"> 40 | <PassthroughTextElement> 41 | card 6 42 | -------------------------------------------------------------------------------- /tests/test_snippets/snippet_post_card-head-foot.xml: -------------------------------------------------------------------------------- 1 | <document source="index"> 2 | <section ids="heading" names="heading"> 3 | <title> 4 | Heading 5 | <container classes="sd-card sd-sphinx-override sd-mb-3 sd-shadow-sm" design_component="card" is_div="True"> 6 | <container classes="sd-card-header" design_component="card-header" is_div="True"> 7 | <paragraph classes="sd-card-text"> 8 | Header 9 | <container classes="sd-card-body" design_component="card-body" is_div="True"> 10 | <container classes="sd-card-title sd-font-weight-bold" design_component="card-title" is_div="True"> 11 | <PassthroughTextElement> 12 | Card Title 13 | <paragraph classes="sd-card-text"> 14 | Card content 15 | <container classes="sd-card-footer" design_component="card-footer" is_div="True"> 16 | <paragraph classes="sd-card-text"> 17 | Footer 18 | -------------------------------------------------------------------------------- /tests/test_snippets/snippet_post_card-images.xml: -------------------------------------------------------------------------------- 1 | <document source="index"> 2 | <section ids="heading" names="heading"> 3 | <title> 4 | Heading 5 | <container classes="sd-container-fluid sd-sphinx-override sd-mb-4" design_component="grid-container" is_div="True"> 6 | <container classes="sd-row sd-row-cols-2 sd-row-cols-xs-2 sd-row-cols-sm-3 sd-row-cols-md-3 sd-row-cols-lg-4" design_component="grid-row" is_div="True"> 7 | <container classes="sd-col sd-d-flex-column" design_component="grid-item" is_div="True"> 8 | <container classes="sd-card sd-sphinx-override sd-mb-3 sd-shadow-sm sd-text-black" design_component="card" is_div="True"> 9 | <image alt="my text" candidates="{'*': 'images/particle_background.jpg'}" classes="sd-card-img" uri="images/particle_background.jpg"> 10 | <container classes="sd-card-img-overlay" design_component="card-overlay" is_div="True"> 11 | <container classes="sd-card-body" design_component="card-body" is_div="True"> 12 | <container classes="sd-card-title sd-font-weight-bold" design_component="card-title" is_div="True"> 13 | <PassthroughTextElement> 14 | Title 15 | <paragraph classes="sd-card-text"> 16 | Text 17 | <container classes="sd-col sd-d-flex-row" design_component="grid-item" is_div="True"> 18 | <container classes="sd-card sd-sphinx-override sd-w-100 sd-shadow-sm" design_component="card" is_div="True"> 19 | <image alt="" candidates="{'*': 'images/particle_background.jpg'}" classes="sd-card-img-top" uri="images/particle_background.jpg"> 20 | <container classes="sd-card-header" design_component="card-header" is_div="True"> 21 | <paragraph classes="sd-card-text"> 22 | Header 23 | <container classes="sd-card-body" design_component="card-body" is_div="True"> 24 | <container classes="sd-card-title sd-font-weight-bold" design_component="card-title" is_div="True"> 25 | <PassthroughTextElement> 26 | Title 27 | <paragraph classes="sd-card-text"> 28 | Content 29 | <container classes="sd-card-footer" design_component="card-footer" is_div="True"> 30 | <paragraph classes="sd-card-text"> 31 | Footer 32 | <container classes="sd-col sd-d-flex-row" design_component="grid-item" is_div="True"> 33 | <container classes="sd-card sd-sphinx-override sd-w-100 sd-shadow-sm" design_component="card" is_div="True"> 34 | <container classes="sd-card-header" design_component="card-header" is_div="True"> 35 | <paragraph classes="sd-card-text"> 36 | Header 37 | <container classes="sd-card-body" design_component="card-body" is_div="True"> 38 | <container classes="sd-card-title sd-font-weight-bold" design_component="card-title" is_div="True"> 39 | <PassthroughTextElement> 40 | Title 41 | <paragraph classes="sd-card-text"> 42 | Content 43 | <container classes="sd-card-footer" design_component="card-footer" is_div="True"> 44 | <paragraph classes="sd-card-text"> 45 | Footer 46 | <image alt="" candidates="{'*': 'images/particle_background.jpg'}" classes="sd-card-img-bottom" uri="images/particle_background.jpg"> 47 | -------------------------------------------------------------------------------- /tests/test_snippets/snippet_post_card-link.xml: -------------------------------------------------------------------------------- 1 | <document source="index"> 2 | <section ids="heading" names="heading"> 3 | <title> 4 | Heading 5 | <target refid="cards-clickable"> 6 | <section ids="clickable-cards cards-clickable" names="clickable\ cards cards-clickable"> 7 | <title> 8 | Clickable cards 9 | <paragraph> 10 | Using the 11 | <literal> 12 | link 13 | and 14 | <literal> 15 | link-type 16 | options, you can turn an entire card into a clickable link. Try hovering over then clicking on the cards below: 17 | <container classes="sd-card sd-sphinx-override sd-mb-3 sd-shadow-sm sd-card-hover" design_component="card" is_div="True"> 18 | <container classes="sd-card-body" design_component="card-body" is_div="True"> 19 | <container classes="sd-card-title sd-font-weight-bold" design_component="card-title" is_div="True"> 20 | <PassthroughTextElement> 21 | Clickable Card (external) 22 | <paragraph classes="sd-card-text"> 23 | The entire card can be clicked to navigate to 24 | <reference refuri="https://example.com"> 25 | https://example.com 26 | . 27 | <PassthroughTextElement> 28 | <reference classes="sd-stretched-link sd-hide-link-text" refuri="https://example.com"> 29 | <inline> 30 | https://example.com 31 | <container classes="sd-card sd-sphinx-override sd-mb-3 sd-shadow-sm sd-card-hover" design_component="card" is_div="True"> 32 | <container classes="sd-card-body" design_component="card-body" is_div="True"> 33 | <container classes="sd-card-title sd-font-weight-bold" design_component="card-title" is_div="True"> 34 | <PassthroughTextElement> 35 | Clickable Card (external) 36 | <paragraph classes="sd-card-text"> 37 | The entire card can be clicked to navigate to 38 | <reference refuri="https://example.com"> 39 | https://example.com 40 | . 41 | <PassthroughTextElement> 42 | <reference classes="sd-stretched-link sd-hide-link-text" refuri="https://example.com"> 43 | <inline> 44 | example.com 45 | <container classes="sd-card sd-sphinx-override sd-mb-3 sd-shadow-sm sd-card-hover" design_component="card" is_div="True"> 46 | <container classes="sd-card-body" design_component="card-body" is_div="True"> 47 | <container classes="sd-card-title sd-font-weight-bold" design_component="card-title" is_div="True"> 48 | <PassthroughTextElement> 49 | Clickable Card (internal) 50 | <paragraph classes="sd-card-text"> 51 | The entire card can be clicked to navigate to the 52 | <literal> 53 | cards-clickable 54 | reference target. 55 | <PassthroughTextElement> 56 | <reference classes="sd-stretched-link sd-hide-link-text" internal="True" refid="cards-clickable"> 57 | <inline classes="std std-ref"> 58 | Clickable cards 59 | <container classes="sd-card sd-sphinx-override sd-mb-3 sd-shadow-sm sd-card-hover" design_component="card" is_div="True"> 60 | <container classes="sd-card-body" design_component="card-body" is_div="True"> 61 | <container classes="sd-card-title sd-font-weight-bold" design_component="card-title" is_div="True"> 62 | <PassthroughTextElement> 63 | Clickable Card (internal) 64 | <paragraph classes="sd-card-text"> 65 | The entire card can be clicked to navigate to the 66 | <literal> 67 | cards-clickable 68 | reference target. 69 | <PassthroughTextElement> 70 | <reference classes="sd-stretched-link sd-hide-link-text" internal="True" refid="cards-clickable"> 71 | <inline classes="std std-ref"> 72 | clickable cards 73 | -------------------------------------------------------------------------------- /tests/test_snippets/snippet_post_card-title-link.xml: -------------------------------------------------------------------------------- 1 | <document source="index"> 2 | <section ids="heading" names="heading"> 3 | <title> 4 | Heading 5 | <target refid="target"> 6 | <container classes="sd-card sd-sphinx-override sd-mb-3 sd-shadow-sm" design_component="card" ids="target" is_div="True" names="target"> 7 | <container classes="sd-card-body" design_component="card-body" is_div="True"> 8 | <container classes="sd-card-title sd-font-weight-bold" design_component="card-title" is_div="True"> 9 | <PassthroughTextElement> 10 | Card Title 11 | <reference refuri="https://example.com"> 12 | https://example.com 13 | 14 | <reference internal="True" refid="target"> 15 | <inline classes="std std-ref"> 16 | link 17 | <paragraph classes="sd-card-text"> 18 | Card content 19 | -------------------------------------------------------------------------------- /tests/test_snippets/snippet_post_div-basic.xml: -------------------------------------------------------------------------------- 1 | <document source="index"> 2 | <section ids="heading" names="heading"> 3 | <title> 4 | Heading 5 | <container classes="sd-text-center sd-font-italic sd-text-primary" design_component="div" is_div="True"> 6 | <paragraph> 7 | Some CSS styled text 8 | -------------------------------------------------------------------------------- /tests/test_snippets/snippet_post_dropdown-basic.xml: -------------------------------------------------------------------------------- 1 | <document source="index"> 2 | <section ids="heading" names="heading"> 3 | <title> 4 | Heading 5 | <dropdown_main classes="sd-sphinx-override sd-dropdown sd-card sd-mb-3" opened="False"> 6 | <dropdown_title classes="sd-summary-title sd-card-header"> 7 | <inline classes="sd-summary-text"> 8 | <raw format="html" xml:space="preserve"> 9 | <svg version="1.1" width="1.5em" height="1.5em" class="sd-octicon sd-octicon-kebab-horizontal no-title" viewBox="0 0 24 24" aria-hidden="true"><path d="M20 14a2 2 0 1 1-.001-3.999A2 2 0 0 1 20 14ZM6 12a2 2 0 1 1-3.999.001A2 2 0 0 1 6 12Zm8 0a2 2 0 1 1-3.999.001A2 2 0 0 1 14 12Z"></path></svg> 10 | <inline classes="sd-summary-state-marker sd-summary-chevron-right"> 11 | <raw format="html" xml:space="preserve"> 12 | <svg version="1.1" width="1.5em" height="1.5em" class="sd-octicon sd-octicon-chevron-right" viewBox="0 0 24 24" aria-hidden="true"><path d="M8.72 18.78a.75.75 0 0 1 0-1.06L14.44 12 8.72 6.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018l6.25 6.25a.75.75 0 0 1 0 1.06l-6.25 6.25a.75.75 0 0 1-1.06 0Z"></path></svg> 13 | <container classes="sd-summary-content sd-card-body" design_component="dropdown-body" is_div="True"> 14 | <paragraph classes="sd-card-text"> 15 | Dropdown content 16 | <dropdown_main classes="sd-sphinx-override sd-dropdown sd-card sd-mb-3" opened="False"> 17 | <dropdown_title classes="sd-summary-title sd-card-header"> 18 | <inline classes="sd-summary-text"> 19 | Dropdown title 20 | <inline classes="sd-summary-state-marker sd-summary-chevron-right"> 21 | <raw format="html" xml:space="preserve"> 22 | <svg version="1.1" width="1.5em" height="1.5em" class="sd-octicon sd-octicon-chevron-right" viewBox="0 0 24 24" aria-hidden="true"><path d="M8.72 18.78a.75.75 0 0 1 0-1.06L14.44 12 8.72 6.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018l6.25 6.25a.75.75 0 0 1 0 1.06l-6.25 6.25a.75.75 0 0 1-1.06 0Z"></path></svg> 23 | <container classes="sd-summary-content sd-card-body" design_component="dropdown-body" is_div="True"> 24 | <paragraph classes="sd-card-text"> 25 | Dropdown content 26 | <dropdown_main classes="sd-sphinx-override sd-dropdown sd-card sd-mb-3" opened="True"> 27 | <dropdown_title classes="sd-summary-title sd-card-header"> 28 | <inline classes="sd-summary-text"> 29 | Open dropdown 30 | <inline classes="sd-summary-state-marker sd-summary-chevron-right"> 31 | <raw format="html" xml:space="preserve"> 32 | <svg version="1.1" width="1.5em" height="1.5em" class="sd-octicon sd-octicon-chevron-right" viewBox="0 0 24 24" aria-hidden="true"><path d="M8.72 18.78a.75.75 0 0 1 0-1.06L14.44 12 8.72 6.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018l6.25 6.25a.75.75 0 0 1 0 1.06l-6.25 6.25a.75.75 0 0 1-1.06 0Z"></path></svg> 33 | <container classes="sd-summary-content sd-card-body" design_component="dropdown-body" is_div="True"> 34 | <paragraph classes="sd-card-text"> 35 | Dropdown content 36 | -------------------------------------------------------------------------------- /tests/test_snippets/snippet_post_dropdown-options.xml: -------------------------------------------------------------------------------- 1 | <document source="index"> 2 | <section ids="heading" names="heading"> 3 | <title> 4 | Heading 5 | <dropdown_main classes="sd-sphinx-override sd-dropdown sd-card sd-m-1 class-container" ids="target" opened="False"> 6 | <dropdown_title classes="sd-summary-title sd-card-header class-title sd-bg-info sd-bg-text-info"> 7 | <raw classes="sd-summary-icon" format="html" xml:space="preserve"> 8 | <svg version="1.1" width="1.0em" height="1.0em" class="sd-octicon sd-octicon-alert" viewBox="0 0 16 16" aria-hidden="true"><path d="M6.457 1.047c.659-1.234 2.427-1.234 3.086 0l6.082 11.378A1.75 1.75 0 0 1 14.082 15H1.918a1.75 1.75 0 0 1-1.543-2.575Zm1.763.707a.25.25 0 0 0-.44 0L1.698 13.132a.25.25 0 0 0 .22.368h12.164a.25.25 0 0 0 .22-.368Zm.53 3.996v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 11a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path></svg> 9 | <inline classes="sd-summary-text"> 10 | Title 11 | <inline classes="sd-summary-state-marker sd-summary-chevron-right"> 12 | <raw format="html" xml:space="preserve"> 13 | <svg version="1.1" width="1.5em" height="1.5em" class="sd-octicon sd-octicon-chevron-right" viewBox="0 0 24 24" aria-hidden="true"><path d="M8.72 18.78a.75.75 0 0 1 0-1.06L14.44 12 8.72 6.28a.751.751 0 0 1 .018-1.042.751.751 0 0 1 1.042-.018l6.25 6.25a.75.75 0 0 1 0 1.06l-6.25 6.25a.75.75 0 0 1-1.06 0Z"></path></svg> 14 | <container classes="sd-summary-content sd-card-body class-body" design_component="dropdown-body" is_div="True"> 15 | <paragraph classes="sd-card-text"> 16 | Dropdown content 17 | <paragraph> 18 | <reference internal="True" refid="target"> 19 | <inline classes="std std-ref"> 20 | Title 21 | , 22 | <reference internal="True" refid="target"> 23 | <inline classes="std std-ref"> 24 | text 25 | -------------------------------------------------------------------------------- /tests/test_snippets/snippet_post_grid-basic.xml: -------------------------------------------------------------------------------- 1 | <document source="index"> 2 | <section ids="heading" names="heading"> 3 | <title> 4 | Heading 5 | <container classes="sd-container-fluid sd-sphinx-override sd-mb-4 sd-border-1" design_component="grid-container" is_div="True"> 6 | <container classes="sd-row sd-row-cols-1 sd-row-cols-xs-1 sd-row-cols-sm-2 sd-row-cols-md-3 sd-row-cols-lg-4" design_component="grid-row" is_div="True"> 7 | <container classes="sd-col sd-d-flex-column" design_component="grid-item" is_div="True"> 8 | <paragraph> 9 | A 10 | <container classes="sd-col sd-d-flex-column" design_component="grid-item" is_div="True"> 11 | <paragraph> 12 | B 13 | <container classes="sd-col sd-d-flex-column" design_component="grid-item" is_div="True"> 14 | <paragraph> 15 | C 16 | <container classes="sd-col sd-d-flex-column" design_component="grid-item" is_div="True"> 17 | <paragraph> 18 | D 19 | -------------------------------------------------------------------------------- /tests/test_snippets/snippet_post_grid-card-columns.xml: -------------------------------------------------------------------------------- 1 | <document source="index"> 2 | <section ids="heading" names="heading"> 3 | <title> 4 | Heading 5 | <container classes="sd-container-fluid sd-sphinx-override sd-mb-4" design_component="grid-container" is_div="True"> 6 | <container classes="sd-row sd-row-cols-2 sd-row-cols-xs-2 sd-row-cols-sm-2 sd-row-cols-md-2 sd-row-cols-lg-2" design_component="grid-row" is_div="True"> 7 | <container classes="sd-col sd-d-flex-row sd-col-auto sd-col-xs-auto sd-col-sm-auto sd-col-md-auto sd-col-lg-auto" design_component="grid-item" is_div="True"> 8 | <container classes="sd-card sd-sphinx-override sd-w-100 sd-shadow-sm" design_component="card" is_div="True"> 9 | <container classes="sd-card-body" design_component="card-body" is_div="True"> 10 | <paragraph classes="sd-card-text"> 11 | A 12 | <container classes="sd-col sd-d-flex-row sd-col-12 sd-col-xs-12 sd-col-sm-6 sd-col-md-6 sd-col-lg-6" design_component="grid-item" is_div="True"> 13 | <container classes="sd-card sd-sphinx-override sd-w-100 sd-shadow-sm" design_component="card" is_div="True"> 14 | <container classes="sd-card-body" design_component="card-body" is_div="True"> 15 | <paragraph classes="sd-card-text"> 16 | B 17 | <container classes="sd-col sd-d-flex-row sd-col-12 sd-col-xs-12 sd-col-sm-12 sd-col-md-12 sd-col-lg-12" design_component="grid-item" is_div="True"> 18 | <container classes="sd-card sd-sphinx-override sd-w-100 sd-shadow-sm" design_component="card" is_div="True"> 19 | <container classes="sd-card-body" design_component="card-body" is_div="True"> 20 | <paragraph classes="sd-card-text"> 21 | C 22 | -------------------------------------------------------------------------------- /tests/test_snippets/snippet_post_grid-card.xml: -------------------------------------------------------------------------------- 1 | <document source="index"> 2 | <section ids="heading" names="heading"> 3 | <title> 4 | Heading 5 | <container classes="sd-container-fluid sd-sphinx-override sd-mb-4" design_component="grid-container" is_div="True"> 6 | <container classes="sd-row sd-row-cols-2 sd-row-cols-xs-2 sd-row-cols-sm-2 sd-row-cols-md-2 sd-row-cols-lg-2" design_component="grid-row" is_div="True"> 7 | <container classes="sd-col sd-d-flex-row" design_component="grid-item" is_div="True"> 8 | <container classes="sd-card sd-sphinx-override sd-w-100 sd-shadow-sm" design_component="card" is_div="True"> 9 | <container classes="sd-card-body" design_component="card-body" is_div="True"> 10 | <container classes="sd-card-title sd-font-weight-bold" design_component="card-title" is_div="True"> 11 | <PassthroughTextElement> 12 | Title 1 13 | <paragraph classes="sd-card-text"> 14 | A 15 | <container classes="sd-col sd-d-flex-row" design_component="grid-item" is_div="True"> 16 | <container classes="sd-card sd-sphinx-override sd-w-100 sd-shadow-sm" design_component="card" is_div="True"> 17 | <container classes="sd-card-body" design_component="card-body" is_div="True"> 18 | <container classes="sd-card-title sd-font-weight-bold" design_component="card-title" is_div="True"> 19 | <PassthroughTextElement> 20 | Title 2 21 | <paragraph classes="sd-card-text"> 22 | B 23 | -------------------------------------------------------------------------------- /tests/test_snippets/snippet_post_grid-gutter.xml: -------------------------------------------------------------------------------- 1 | <document source="index"> 2 | <section ids="heading" names="heading"> 3 | <title> 4 | Heading 5 | <container classes="sd-container-fluid sd-sphinx-override sd-mb-4" design_component="grid-container" is_div="True"> 6 | <container classes="sd-row sd-row-cols-2 sd-row-cols-xs-2 sd-row-cols-sm-2 sd-row-cols-md-2 sd-row-cols-lg-2 sd-g-1 sd-g-xs-1 sd-g-sm-1 sd-g-md-1 sd-g-lg-1" design_component="grid-row" is_div="True"> 7 | <container classes="sd-col sd-d-flex-row" design_component="grid-item" is_div="True"> 8 | <container classes="sd-card sd-sphinx-override sd-w-100 sd-shadow-sm" design_component="card" is_div="True"> 9 | <container classes="sd-card-body" design_component="card-body" is_div="True"> 10 | <paragraph classes="sd-card-text"> 11 | A 12 | <container classes="sd-col sd-d-flex-row" design_component="grid-item" is_div="True"> 13 | <container classes="sd-card sd-sphinx-override sd-w-100 sd-shadow-sm" design_component="card" is_div="True"> 14 | <container classes="sd-card-body" design_component="card-body" is_div="True"> 15 | <paragraph classes="sd-card-text"> 16 | B 17 | <container classes="sd-container-fluid sd-sphinx-override sd-mb-4" design_component="grid-container" is_div="True"> 18 | <container classes="sd-row sd-row-cols-2 sd-row-cols-xs-2 sd-row-cols-sm-2 sd-row-cols-md-2 sd-row-cols-lg-2 sd-g-3 sd-g-xs-3 sd-g-sm-3 sd-g-md-4 sd-g-lg-5" design_component="grid-row" is_div="True"> 19 | <container classes="sd-col sd-d-flex-row" design_component="grid-item" is_div="True"> 20 | <container classes="sd-card sd-sphinx-override sd-w-100 sd-shadow-sm" design_component="card" is_div="True"> 21 | <container classes="sd-card-body" design_component="card-body" is_div="True"> 22 | <paragraph classes="sd-card-text"> 23 | A 24 | <container classes="sd-col sd-d-flex-row" design_component="grid-item" is_div="True"> 25 | <container classes="sd-card sd-sphinx-override sd-w-100 sd-shadow-sm" design_component="card" is_div="True"> 26 | <container classes="sd-card-body" design_component="card-body" is_div="True"> 27 | <paragraph classes="sd-card-text"> 28 | B 29 | -------------------------------------------------------------------------------- /tests/test_snippets/snippet_post_grid-nested.xml: -------------------------------------------------------------------------------- 1 | <document source="index"> 2 | <section ids="heading" names="heading"> 3 | <title> 4 | Heading 5 | <container classes="sd-container-fluid sd-sphinx-override sd-mb-4" design_component="grid-container" is_div="True"> 6 | <container classes="sd-row sd-row-cols-1 sd-row-cols-xs-1 sd-row-cols-sm-1 sd-row-cols-md-2 sd-row-cols-lg-2 sd-g-1 sd-g-xs-1 sd-g-sm-1 sd-g-md-1 sd-g-lg-1" design_component="grid-row" is_div="True"> 7 | <container classes="sd-col sd-d-flex-column" design_component="grid-item" is_div="True"> 8 | <container classes="sd-container-fluid sd-sphinx-override sd-mb-4" design_component="grid-container" is_div="True"> 9 | <container classes="sd-row sd-row-cols-1 sd-row-cols-xs-1 sd-row-cols-sm-1 sd-row-cols-md-1 sd-row-cols-lg-1 sd-g-1 sd-g-xs-1 sd-g-sm-1 sd-g-md-1 sd-g-lg-1" design_component="grid-row" is_div="True"> 10 | <container classes="sd-col sd-d-flex-row" design_component="grid-item" is_div="True"> 11 | <container classes="sd-card sd-sphinx-override sd-w-100 sd-shadow-sm" design_component="card" is_div="True"> 12 | <container classes="sd-card-body" design_component="card-body" is_div="True"> 13 | <container classes="sd-card-title sd-font-weight-bold" design_component="card-title" is_div="True"> 14 | <PassthroughTextElement> 15 | Item 1.1 16 | <paragraph classes="sd-card-text"> 17 | Multi-line 18 | <paragraph classes="sd-card-text"> 19 | content 20 | <container classes="sd-col sd-d-flex-row" design_component="grid-item" is_div="True"> 21 | <container classes="sd-card sd-sphinx-override sd-w-100 sd-shadow-sm" design_component="card" is_div="True"> 22 | <container classes="sd-card-body" design_component="card-body" is_div="True"> 23 | <container classes="sd-card-title sd-font-weight-bold" design_component="card-title" is_div="True"> 24 | <PassthroughTextElement> 25 | Item 1.2 26 | <paragraph classes="sd-card-text"> 27 | Content 28 | <container classes="sd-col sd-d-flex-column" design_component="grid-item" is_div="True"> 29 | <container classes="sd-container-fluid sd-sphinx-override sd-mb-4" design_component="grid-container" is_div="True"> 30 | <container classes="sd-row sd-row-cols-1 sd-row-cols-xs-1 sd-row-cols-sm-1 sd-row-cols-md-1 sd-row-cols-lg-1 sd-g-1 sd-g-xs-1 sd-g-sm-1 sd-g-md-1 sd-g-lg-1" design_component="grid-row" is_div="True"> 31 | <container classes="sd-col sd-d-flex-row" design_component="grid-item" is_div="True"> 32 | <container classes="sd-card sd-sphinx-override sd-w-100 sd-shadow-sm" design_component="card" is_div="True"> 33 | <container classes="sd-card-body" design_component="card-body" is_div="True"> 34 | <container classes="sd-card-title sd-font-weight-bold" design_component="card-title" is_div="True"> 35 | <PassthroughTextElement> 36 | Item 2.1 37 | <paragraph classes="sd-card-text"> 38 | Content 39 | <container classes="sd-col sd-d-flex-row" design_component="grid-item" is_div="True"> 40 | <container classes="sd-card sd-sphinx-override sd-w-100 sd-shadow-sm" design_component="card" is_div="True"> 41 | <container classes="sd-card-body" design_component="card-body" is_div="True"> 42 | <container classes="sd-card-title sd-font-weight-bold" design_component="card-title" is_div="True"> 43 | <PassthroughTextElement> 44 | Item 2.2 45 | <paragraph classes="sd-card-text"> 46 | Content 47 | <container classes="sd-col sd-d-flex-row" design_component="grid-item" is_div="True"> 48 | <container classes="sd-card sd-sphinx-override sd-w-100 sd-shadow-sm" design_component="card" is_div="True"> 49 | <container classes="sd-card-body" design_component="card-body" is_div="True"> 50 | <container classes="sd-card-title sd-font-weight-bold" design_component="card-title" is_div="True"> 51 | <PassthroughTextElement> 52 | Item 2.3 53 | <paragraph classes="sd-card-text"> 54 | Content 55 | -------------------------------------------------------------------------------- /tests/test_snippets/snippet_post_icon-fontawesome.xml: -------------------------------------------------------------------------------- 1 | <document source="index"> 2 | <section ids="heading" names="heading"> 3 | <title> 4 | Heading 5 | <paragraph> 6 | An icon 7 | <fontawesome classes="fas fa-spinner sd-bg-primary sd-bg-text-primary" icon="spinner"> 8 | , some more text. 9 | -------------------------------------------------------------------------------- /tests/test_snippets/snippet_post_icon-octicon.xml: -------------------------------------------------------------------------------- 1 | <document source="index"> 2 | <section ids="heading" names="heading"> 3 | <title> 4 | Heading 5 | <paragraph> 6 | A coloured icon: 7 | <raw format="html" xml:space="preserve"> 8 | <svg version="1.1" width="1.0em" height="1.0em" class="sd-octicon sd-octicon-report sd-text-info" viewBox="0 0 16 16" aria-hidden="true"><path d="M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v9.5A1.75 1.75 0 0 1 14.25 13H8.06l-2.573 2.573A1.458 1.458 0 0 1 3 14.543V13H1.75A1.75 1.75 0 0 1 0 11.25Zm1.75-.25a.25.25 0 0 0-.25.25v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25Zm7 2.25v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path></svg> 9 | , some more text. 10 | -------------------------------------------------------------------------------- /tests/test_snippets/snippet_post_tab-basic.xml: -------------------------------------------------------------------------------- 1 | <document source="index"> 2 | <section ids="heading" names="heading"> 3 | <title> 4 | Heading 5 | <container classes="sd-tab-set" design_component="tab-set" is_div="True"> 6 | <sd_tab_input checked="True" id="sd-tab-item-0" set_id="sd-tab-set-0" type="radio"> 7 | <sd_tab_label classes="sd-tab-label" input_id="sd-tab-item-0"> 8 | Label1 9 | <container classes="sd-tab-content" design_component="tab-content" is_div="True"> 10 | <paragraph> 11 | Content 1 12 | <sd_tab_input checked="False" id="sd-tab-item-1" set_id="sd-tab-set-0" type="radio"> 13 | <sd_tab_label classes="sd-tab-label" input_id="sd-tab-item-1"> 14 | Label2 15 | <container classes="sd-tab-content" design_component="tab-content" is_div="True"> 16 | <paragraph> 17 | Content 2 18 | -------------------------------------------------------------------------------- /tests/test_snippets/snippet_post_tab-code-set.xml: -------------------------------------------------------------------------------- 1 | <document source="index"> 2 | <section ids="heading" names="heading"> 3 | <title> 4 | Heading 5 | <container classes="sd-tab-set" design_component="tab-set" is_div="True"> 6 | <sd_tab_input checked="True" id="sd-tab-item-0" set_id="sd-tab-set-0" type="radio"> 7 | <sd_tab_label classes="sd-tab-label" input_id="sd-tab-item-0" sync_group="code" sync_id="python"> 8 | PYTHON 9 | <container classes="sd-tab-content" design_component="tab-content" is_div="True"> 10 | <literal_block force="False" highlight_args="{'linenostart': 1}" language="python" linenos="False" source="snippet.py" xml:space="preserve"> 11 | a = 1 12 | <sd_tab_input checked="False" id="sd-tab-item-1" set_id="sd-tab-set-0" type="radio"> 13 | <sd_tab_label classes="sd-tab-label" input_id="sd-tab-item-1" sync_group="code" sync_id="javascript"> 14 | JAVASCRIPT 15 | <container classes="sd-tab-content" design_component="tab-content" is_div="True"> 16 | <literal_block force="False" highlight_args="{}" language="javascript" linenos="False" xml:space="preserve"> 17 | a = 1; 18 | -------------------------------------------------------------------------------- /tests/test_snippets/snippet_post_tab-options.xml: -------------------------------------------------------------------------------- 1 | <document source="index"> 2 | <section ids="heading" names="heading"> 3 | <title> 4 | Heading 5 | <container classes="sd-tab-set class-set" design_component="tab-set" is_div="True"> 6 | <sd_tab_input checked="True" id="sd-tab-item-0" set_id="sd-tab-set-0" type="radio"> 7 | <sd_tab_label classes="sd-tab-label class-label" ids="target" input_id="sd-tab-item-0"> 8 | <strong> 9 | Label 10 | <container classes="sd-tab-content class-content" design_component="tab-content" is_div="True"> 11 | <paragraph> 12 | Content 13 | <paragraph> 14 | <reference internal="True" refid="target"> 15 | <inline classes="std std-ref"> 16 | Label 17 | , 18 | <reference internal="True" refid="target"> 19 | <inline classes="std std-ref"> 20 | text 21 | -------------------------------------------------------------------------------- /tests/test_snippets/snippet_post_tab-sync.xml: -------------------------------------------------------------------------------- 1 | <document source="index"> 2 | <section ids="heading" names="heading"> 3 | <title> 4 | Heading 5 | <container classes="sd-tab-set" design_component="tab-set" is_div="True"> 6 | <sd_tab_input checked="True" id="sd-tab-item-0" set_id="sd-tab-set-0" type="radio"> 7 | <sd_tab_label classes="sd-tab-label" input_id="sd-tab-item-0" sync_group="category" sync_id="key1"> 8 | Label1 9 | <container classes="sd-tab-content" design_component="tab-content" is_div="True"> 10 | <paragraph> 11 | Content 1 12 | <sd_tab_input checked="False" id="sd-tab-item-1" set_id="sd-tab-set-0" type="radio"> 13 | <sd_tab_label classes="sd-tab-label" input_id="sd-tab-item-1" sync_group="category" sync_id="key2"> 14 | Label2 15 | <container classes="sd-tab-content" design_component="tab-content" is_div="True"> 16 | <paragraph> 17 | Content 2 18 | <container classes="sd-tab-set" design_component="tab-set" is_div="True"> 19 | <sd_tab_input checked="True" id="sd-tab-item-2" set_id="sd-tab-set-1" type="radio"> 20 | <sd_tab_label classes="sd-tab-label" input_id="sd-tab-item-2" sync_group="category" sync_id="key1"> 21 | Label1 22 | <container classes="sd-tab-content" design_component="tab-content" is_div="True"> 23 | <paragraph> 24 | Content 1 25 | <sd_tab_input checked="False" id="sd-tab-item-3" set_id="sd-tab-set-1" type="radio"> 26 | <sd_tab_label classes="sd-tab-label" input_id="sd-tab-item-3" sync_group="category" sync_id="key2"> 27 | Label2 28 | <container classes="sd-tab-content" design_component="tab-content" is_div="True"> 29 | <paragraph> 30 | Content 2 31 | -------------------------------------------------------------------------------- /tests/test_snippets/snippet_pre_article-info.xml: -------------------------------------------------------------------------------- 1 | <document source="index"> 2 | <section ids="heading" names="heading"> 3 | <title> 4 | Heading 5 | <container classes="sd-container-fluid sd-sphinx-override sd-p-0 sd-mt-2 sd-mb-4 sd-p-2 sd-outline-muted sd-rounded-1" design_component="grid-container" is_div="True"> 6 | <container classes="sd-row sd-row-cols-2 sd-gx-2 sd-gy-1" design_component="grid-row" is_div="True"> 7 | <container classes="sd-col sd-col-auto sd-d-flex-row sd-align-minor-center" design_component="grid-item" is_div="True"> 8 | <reference refuri="https://executablebooks.org/"> 9 | <image alt="" candidates="{'*': 'images/ebp-logo.png'}" classes="sd-avatar-sm sd-outline-muted" uri="images/ebp-logo.png"> 10 | <container classes="sd-col sd-d-flex-row sd-align-minor-center" design_component="grid-item" is_div="True"> 11 | <container classes="sd-container-fluid sd-sphinx-override" design_component="grid-container" is_div="True"> 12 | <container classes="sd-row sd-row-cols-2 sd-row-cols-xs-2 sd-row-cols-sm-3 sd-row-cols-md-3 sd-row-cols-lg-3 sd-gx-3 sd-gy-1" design_component="grid-row" is_div="True"> 13 | <container classes="sd-col sd-col-auto sd-d-flex-row sd-align-minor-center" design_component="grid-item" is_div="True"> 14 | <paragraph classes="sd-p-0 sd-m-0"> 15 | Executable Books 16 | <container classes="sd-col sd-col-auto sd-d-flex-row sd-align-minor-center" design_component="grid-item" is_div="True"> 17 | <paragraph classes="sd-p-0 sd-m-0"> 18 | <raw classes="sd-pr-2" format="html" xml:space="preserve"> 19 | <svg version="1.1" width="16.0px" height="16.0px" class="sd-octicon sd-octicon-calendar" viewBox="0 0 16 16" aria-hidden="true"><path d="M4.75 0a.75.75 0 0 1 .75.75V2h5V.75a.75.75 0 0 1 1.5 0V2h1.25c.966 0 1.75.784 1.75 1.75v10.5A1.75 1.75 0 0 1 13.25 16H2.75A1.75 1.75 0 0 1 1 14.25V3.75C1 2.784 1.784 2 2.75 2H4V.75A.75.75 0 0 1 4.75 0ZM2.5 7.5v6.75c0 .138.112.25.25.25h10.5a.25.25 0 0 0 .25-.25V7.5Zm10.75-4H2.75a.25.25 0 0 0-.25.25V6h11V3.75a.25.25 0 0 0-.25-.25Z"></path></svg> 20 | Jul 24, 2021 21 | <container classes="sd-col sd-col-auto sd-d-flex-row sd-align-minor-center" design_component="grid-item" is_div="True"> 22 | <paragraph classes="sd-p-0 sd-m-0"> 23 | <raw classes="sd-pr-2" format="html" xml:space="preserve"> 24 | <svg version="1.1" width="16.0px" height="16.0px" class="sd-octicon sd-octicon-clock" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm7-3.25v2.992l2.028.812a.75.75 0 0 1-.557 1.392l-2.5-1A.751.751 0 0 1 7 8.25v-3.5a.75.75 0 0 1 1.5 0Z"></path></svg> 25 | 5 min read 26 | -------------------------------------------------------------------------------- /tests/test_snippets/snippet_pre_badge-basic.xml: -------------------------------------------------------------------------------- 1 | <document source="index"> 2 | <section ids="heading" names="heading"> 3 | <title> 4 | Heading 5 | <paragraph> 6 | <inline classes="sd-sphinx-override sd-badge"> 7 | plain badge 8 | <paragraph> 9 | <inline classes="sd-sphinx-override sd-badge sd-bg-primary sd-bg-text-primary"> 10 | primary 11 | , 12 | <inline classes="sd-sphinx-override sd-badge sd-outline-primary sd-text-primary"> 13 | primary-line 14 | <paragraph> 15 | <inline classes="sd-sphinx-override sd-badge sd-bg-secondary sd-bg-text-secondary"> 16 | secondary 17 | , 18 | <inline classes="sd-sphinx-override sd-badge sd-outline-secondary sd-text-secondary"> 19 | secondary-line 20 | <paragraph> 21 | <inline classes="sd-sphinx-override sd-badge sd-bg-success sd-bg-text-success"> 22 | success 23 | , 24 | <inline classes="sd-sphinx-override sd-badge sd-outline-success sd-text-success"> 25 | success-line 26 | <paragraph> 27 | <inline classes="sd-sphinx-override sd-badge sd-bg-info sd-bg-text-info"> 28 | info 29 | , 30 | <inline classes="sd-sphinx-override sd-badge sd-outline-info sd-text-info"> 31 | info-line 32 | <paragraph> 33 | <inline classes="sd-sphinx-override sd-badge sd-bg-warning sd-bg-text-warning"> 34 | warning 35 | , 36 | <inline classes="sd-sphinx-override sd-badge sd-outline-warning sd-text-warning"> 37 | warning-line 38 | <paragraph> 39 | <inline classes="sd-sphinx-override sd-badge sd-bg-danger sd-bg-text-danger"> 40 | danger 41 | , 42 | <inline classes="sd-sphinx-override sd-badge sd-outline-danger sd-text-danger"> 43 | danger-line 44 | <paragraph> 45 | <inline classes="sd-sphinx-override sd-badge sd-bg-light sd-bg-text-light"> 46 | light 47 | , 48 | <inline classes="sd-sphinx-override sd-badge sd-outline-light sd-text-light"> 49 | light-line 50 | <paragraph> 51 | <inline classes="sd-sphinx-override sd-badge sd-bg-muted sd-bg-text-muted"> 52 | muted 53 | , 54 | <inline classes="sd-sphinx-override sd-badge sd-outline-muted sd-text-muted"> 55 | muted-line 56 | <paragraph> 57 | <inline classes="sd-sphinx-override sd-badge sd-bg-dark sd-bg-text-dark"> 58 | dark 59 | , 60 | <inline classes="sd-sphinx-override sd-badge sd-outline-dark sd-text-dark"> 61 | dark-line 62 | <paragraph> 63 | <inline classes="sd-sphinx-override sd-badge sd-bg-white sd-bg-text-white"> 64 | white 65 | , 66 | <inline classes="sd-sphinx-override sd-badge sd-outline-white sd-text-white"> 67 | white-line 68 | <paragraph> 69 | <inline classes="sd-sphinx-override sd-badge sd-bg-black sd-bg-text-black"> 70 | black 71 | , 72 | <inline classes="sd-sphinx-override sd-badge sd-outline-black sd-text-black"> 73 | black-line 74 | -------------------------------------------------------------------------------- /tests/test_snippets/snippet_pre_badge-link.xml: -------------------------------------------------------------------------------- 1 | <document source="index"> 2 | <section ids="heading" names="heading"> 3 | <title> 4 | Heading 5 | <paragraph> 6 | <reference classes="sd-sphinx-override sd-badge sd-bg-primary sd-bg-text-primary" refuri="https://example.com"> 7 | <inline> 8 | https://example.com 9 | <paragraph> 10 | <reference classes="sd-sphinx-override sd-badge sd-outline-primary sd-text-primary" refuri="https://example.com"> 11 | <inline> 12 | explicit title 13 | -------------------------------------------------------------------------------- /tests/test_snippets/snippet_pre_button-link.xml: -------------------------------------------------------------------------------- 1 | <document source="index"> 2 | <section ids="heading" names="heading"> 3 | <title> 4 | Heading 5 | <paragraph> 6 | <reference classes="sd-sphinx-override sd-btn sd-text-wrap" refuri="https://example.com"> 7 | <inline> 8 | https://example.com 9 | <paragraph> 10 | <reference classes="sd-sphinx-override sd-btn sd-text-wrap" refuri="https://example.com"> 11 | <inline> 12 | Button text 13 | <paragraph> 14 | <reference classes="sd-sphinx-override sd-btn sd-text-wrap sd-btn-primary sd-shadow-sm" refuri="https://example.com"> 15 | <inline> 16 | https://example.com 17 | <paragraph> 18 | <reference classes="sd-sphinx-override sd-btn sd-text-wrap sd-btn-outline-primary" refuri="https://example.com"> 19 | <inline> 20 | https://example.com 21 | <paragraph> 22 | <inline classes="sd-d-grid"> 23 | <reference classes="sd-sphinx-override sd-btn sd-text-wrap sd-btn-secondary" refuri="https://example.com"> 24 | <inline> 25 | https://example.com 26 | -------------------------------------------------------------------------------- /tests/test_snippets/snippet_pre_card-basic.xml: -------------------------------------------------------------------------------- 1 | <document source="index"> 2 | <section ids="heading" names="heading"> 3 | <title> 4 | Heading 5 | <container classes="sd-card sd-sphinx-override sd-mb-3 sd-shadow-sm" design_component="card" is_div="True"> 6 | <container classes="sd-card-body" design_component="card-body" is_div="True"> 7 | <container classes="sd-card-title sd-font-weight-bold" design_component="card-title" is_div="True"> 8 | <PassthroughTextElement> 9 | Card Title 10 | <paragraph classes="sd-card-text"> 11 | Card content 12 | -------------------------------------------------------------------------------- /tests/test_snippets/snippet_pre_card-carousel.xml: -------------------------------------------------------------------------------- 1 | <document source="index"> 2 | <section ids="heading" names="heading"> 3 | <title> 4 | Heading 5 | <container classes="sd-sphinx-override sd-cards-carousel sd-card-cols-2" design_component="card-carousel" is_div="True"> 6 | <container classes="sd-card sd-sphinx-override sd-mb-3 sd-shadow-sm" design_component="card" is_div="True"> 7 | <container classes="sd-card-body" design_component="card-body" is_div="True"> 8 | <container classes="sd-card-title sd-font-weight-bold" design_component="card-title" is_div="True"> 9 | <PassthroughTextElement> 10 | card 1 11 | <paragraph classes="sd-card-text"> 12 | content 13 | <container classes="sd-card sd-sphinx-override sd-mb-3 sd-shadow-sm" design_component="card" is_div="True"> 14 | <container classes="sd-card-body" design_component="card-body" is_div="True"> 15 | <container classes="sd-card-title sd-font-weight-bold" design_component="card-title" is_div="True"> 16 | <PassthroughTextElement> 17 | card 2 18 | <paragraph classes="sd-card-text"> 19 | Longer 20 | <paragraph classes="sd-card-text"> 21 | content 22 | <container classes="sd-card sd-sphinx-override sd-mb-3 sd-shadow-sm" design_component="card" is_div="True"> 23 | <container classes="sd-card-body" design_component="card-body" is_div="True"> 24 | <container classes="sd-card-title sd-font-weight-bold" design_component="card-title" is_div="True"> 25 | <PassthroughTextElement> 26 | card 3 27 | <container classes="sd-card sd-sphinx-override sd-mb-3 sd-shadow-sm" design_component="card" is_div="True"> 28 | <container classes="sd-card-body" design_component="card-body" is_div="True"> 29 | <container classes="sd-card-title sd-font-weight-bold" design_component="card-title" is_div="True"> 30 | <PassthroughTextElement> 31 | card 4 32 | <container classes="sd-card sd-sphinx-override sd-mb-3 sd-shadow-sm" design_component="card" is_div="True"> 33 | <container classes="sd-card-body" design_component="card-body" is_div="True"> 34 | <container classes="sd-card-title sd-font-weight-bold" design_component="card-title" is_div="True"> 35 | <PassthroughTextElement> 36 | card 5 37 | <container classes="sd-card sd-sphinx-override sd-mb-3 sd-shadow-sm" design_component="card" is_div="True"> 38 | <container classes="sd-card-body" design_component="card-body" is_div="True"> 39 | <container classes="sd-card-title sd-font-weight-bold" design_component="card-title" is_div="True"> 40 | <PassthroughTextElement> 41 | card 6 42 | -------------------------------------------------------------------------------- /tests/test_snippets/snippet_pre_card-head-foot.xml: -------------------------------------------------------------------------------- 1 | <document source="index"> 2 | <section ids="heading" names="heading"> 3 | <title> 4 | Heading 5 | <container classes="sd-card sd-sphinx-override sd-mb-3 sd-shadow-sm" design_component="card" is_div="True"> 6 | <container classes="sd-card-header" design_component="card-header" is_div="True"> 7 | <paragraph classes="sd-card-text"> 8 | Header 9 | <container classes="sd-card-body" design_component="card-body" is_div="True"> 10 | <container classes="sd-card-title sd-font-weight-bold" design_component="card-title" is_div="True"> 11 | <PassthroughTextElement> 12 | Card Title 13 | <paragraph classes="sd-card-text"> 14 | Card content 15 | <container classes="sd-card-footer" design_component="card-footer" is_div="True"> 16 | <paragraph classes="sd-card-text"> 17 | Footer 18 | -------------------------------------------------------------------------------- /tests/test_snippets/snippet_pre_card-images.xml: -------------------------------------------------------------------------------- 1 | <document source="index"> 2 | <section ids="heading" names="heading"> 3 | <title> 4 | Heading 5 | <container classes="sd-container-fluid sd-sphinx-override sd-mb-4" design_component="grid-container" is_div="True"> 6 | <container classes="sd-row sd-row-cols-2 sd-row-cols-xs-2 sd-row-cols-sm-3 sd-row-cols-md-3 sd-row-cols-lg-4" design_component="grid-row" is_div="True"> 7 | <container classes="sd-col sd-d-flex-column" design_component="grid-item" is_div="True"> 8 | <container classes="sd-card sd-sphinx-override sd-mb-3 sd-shadow-sm sd-text-black" design_component="card" is_div="True"> 9 | <image alt="my text" candidates="{'*': 'images/particle_background.jpg'}" classes="sd-card-img" uri="images/particle_background.jpg"> 10 | <container classes="sd-card-img-overlay" design_component="card-overlay" is_div="True"> 11 | <container classes="sd-card-body" design_component="card-body" is_div="True"> 12 | <container classes="sd-card-title sd-font-weight-bold" design_component="card-title" is_div="True"> 13 | <PassthroughTextElement> 14 | Title 15 | <paragraph classes="sd-card-text"> 16 | Text 17 | <container classes="sd-col sd-d-flex-row" design_component="grid-item" is_div="True"> 18 | <container classes="sd-card sd-sphinx-override sd-w-100 sd-shadow-sm" design_component="card" is_div="True"> 19 | <image alt="" candidates="{'*': 'images/particle_background.jpg'}" classes="sd-card-img-top" uri="images/particle_background.jpg"> 20 | <container classes="sd-card-header" design_component="card-header" is_div="True"> 21 | <paragraph classes="sd-card-text"> 22 | Header 23 | <container classes="sd-card-body" design_component="card-body" is_div="True"> 24 | <container classes="sd-card-title sd-font-weight-bold" design_component="card-title" is_div="True"> 25 | <PassthroughTextElement> 26 | Title 27 | <paragraph classes="sd-card-text"> 28 | Content 29 | <container classes="sd-card-footer" design_component="card-footer" is_div="True"> 30 | <paragraph classes="sd-card-text"> 31 | Footer 32 | <container classes="sd-col sd-d-flex-row" design_component="grid-item" is_div="True"> 33 | <container classes="sd-card sd-sphinx-override sd-w-100 sd-shadow-sm" design_component="card" is_div="True"> 34 | <container classes="sd-card-header" design_component="card-header" is_div="True"> 35 | <paragraph classes="sd-card-text"> 36 | Header 37 | <container classes="sd-card-body" design_component="card-body" is_div="True"> 38 | <container classes="sd-card-title sd-font-weight-bold" design_component="card-title" is_div="True"> 39 | <PassthroughTextElement> 40 | Title 41 | <paragraph classes="sd-card-text"> 42 | Content 43 | <container classes="sd-card-footer" design_component="card-footer" is_div="True"> 44 | <paragraph classes="sd-card-text"> 45 | Footer 46 | <image alt="" candidates="{'*': 'images/particle_background.jpg'}" classes="sd-card-img-bottom" uri="images/particle_background.jpg"> 47 | -------------------------------------------------------------------------------- /tests/test_snippets/snippet_pre_card-link.xml: -------------------------------------------------------------------------------- 1 | <document source="index"> 2 | <section ids="heading" names="heading"> 3 | <title> 4 | Heading 5 | <target refid="cards-clickable"> 6 | <section ids="clickable-cards cards-clickable" names="clickable\ cards cards-clickable"> 7 | <title> 8 | Clickable cards 9 | <paragraph> 10 | Using the 11 | <literal> 12 | link 13 | and 14 | <literal> 15 | link-type 16 | options, you can turn an entire card into a clickable link. Try hovering over then clicking on the cards below: 17 | <container classes="sd-card sd-sphinx-override sd-mb-3 sd-shadow-sm sd-card-hover" design_component="card" is_div="True"> 18 | <container classes="sd-card-body" design_component="card-body" is_div="True"> 19 | <container classes="sd-card-title sd-font-weight-bold" design_component="card-title" is_div="True"> 20 | <PassthroughTextElement> 21 | Clickable Card (external) 22 | <paragraph classes="sd-card-text"> 23 | The entire card can be clicked to navigate to 24 | <reference refuri="https://example.com"> 25 | https://example.com 26 | . 27 | <PassthroughTextElement> 28 | <reference classes="sd-stretched-link sd-hide-link-text" refuri="https://example.com"> 29 | <inline> 30 | https://example.com 31 | <container classes="sd-card sd-sphinx-override sd-mb-3 sd-shadow-sm sd-card-hover" design_component="card" is_div="True"> 32 | <container classes="sd-card-body" design_component="card-body" is_div="True"> 33 | <container classes="sd-card-title sd-font-weight-bold" design_component="card-title" is_div="True"> 34 | <PassthroughTextElement> 35 | Clickable Card (external) 36 | <paragraph classes="sd-card-text"> 37 | The entire card can be clicked to navigate to 38 | <reference refuri="https://example.com"> 39 | https://example.com 40 | . 41 | <PassthroughTextElement> 42 | <reference classes="sd-stretched-link sd-hide-link-text" refuri="https://example.com"> 43 | <inline> 44 | example.com 45 | <container classes="sd-card sd-sphinx-override sd-mb-3 sd-shadow-sm sd-card-hover" design_component="card" is_div="True"> 46 | <container classes="sd-card-body" design_component="card-body" is_div="True"> 47 | <container classes="sd-card-title sd-font-weight-bold" design_component="card-title" is_div="True"> 48 | <PassthroughTextElement> 49 | Clickable Card (internal) 50 | <paragraph classes="sd-card-text"> 51 | The entire card can be clicked to navigate to the 52 | <literal> 53 | cards-clickable 54 | reference target. 55 | <PassthroughTextElement> 56 | <pending_xref classes="sd-stretched-link sd-hide-link-text" refdoc="index" refdomain="std" refexplicit="False" reftarget="cards-clickable" reftype="ref" refwarn="True"> 57 | <inline> 58 | cards-clickable 59 | <container classes="sd-card sd-sphinx-override sd-mb-3 sd-shadow-sm sd-card-hover" design_component="card" is_div="True"> 60 | <container classes="sd-card-body" design_component="card-body" is_div="True"> 61 | <container classes="sd-card-title sd-font-weight-bold" design_component="card-title" is_div="True"> 62 | <PassthroughTextElement> 63 | Clickable Card (internal) 64 | <paragraph classes="sd-card-text"> 65 | The entire card can be clicked to navigate to the 66 | <literal> 67 | cards-clickable 68 | reference target. 69 | <PassthroughTextElement> 70 | <pending_xref classes="sd-stretched-link sd-hide-link-text" refdoc="index" refdomain="std" refexplicit="True" reftarget="cards-clickable" reftype="ref" refwarn="True"> 71 | <inline> 72 | clickable cards 73 | -------------------------------------------------------------------------------- /tests/test_snippets/snippet_pre_card-title-link.xml: -------------------------------------------------------------------------------- 1 | <document source="index"> 2 | <section ids="heading" names="heading"> 3 | <title> 4 | Heading 5 | <target refid="target"> 6 | <container classes="sd-card sd-sphinx-override sd-mb-3 sd-shadow-sm" design_component="card" ids="target" is_div="True" names="target"> 7 | <container classes="sd-card-body" design_component="card-body" is_div="True"> 8 | <container classes="sd-card-title sd-font-weight-bold" design_component="card-title" is_div="True"> 9 | <PassthroughTextElement> 10 | Card Title 11 | <reference refuri="https://example.com"> 12 | https://example.com 13 | 14 | <pending_xref refdoc="index" refdomain="std" refexplicit="True" reftarget="target" reftype="ref" refwarn="True"> 15 | <inline classes="xref std std-ref"> 16 | link 17 | <paragraph classes="sd-card-text"> 18 | Card content 19 | -------------------------------------------------------------------------------- /tests/test_snippets/snippet_pre_div-basic.xml: -------------------------------------------------------------------------------- 1 | <document source="index"> 2 | <section ids="heading" names="heading"> 3 | <title> 4 | Heading 5 | <container classes="sd-text-center sd-font-italic sd-text-primary" design_component="div" is_div="True"> 6 | <paragraph> 7 | Some CSS styled text 8 | -------------------------------------------------------------------------------- /tests/test_snippets/snippet_pre_dropdown-basic.xml: -------------------------------------------------------------------------------- 1 | <document source="index"> 2 | <section ids="heading" names="heading"> 3 | <title> 4 | Heading 5 | <container body_classes="" chevron="True" container_classes="sd-mb-3" design_component="dropdown" has_title="False" icon="True" is_div="True" opened="False" title_classes="" type="dropdown"> 6 | <paragraph> 7 | Dropdown content 8 | <container body_classes="" chevron="True" container_classes="sd-mb-3" design_component="dropdown" has_title="True" icon="True" is_div="True" opened="False" title_classes="" type="dropdown"> 9 | <rubric> 10 | Dropdown title 11 | <paragraph> 12 | Dropdown content 13 | <container body_classes="" chevron="True" container_classes="sd-mb-3" design_component="dropdown" has_title="True" icon="True" is_div="True" opened="True" title_classes="" type="dropdown"> 14 | <rubric> 15 | Open dropdown 16 | <paragraph> 17 | Dropdown content 18 | -------------------------------------------------------------------------------- /tests/test_snippets/snippet_pre_dropdown-options.xml: -------------------------------------------------------------------------------- 1 | <document source="index"> 2 | <section ids="heading" names="heading"> 3 | <title> 4 | Heading 5 | <container body_classes="class-body" chevron="True" container_classes="sd-m-1 class-container" design_component="dropdown" has_title="True" icon="alert" is_div="True" opened="False" title_classes="class-title sd-bg-info sd-bg-text-info" type="dropdown"> 6 | <rubric ids="target" names="target"> 7 | Title 8 | <paragraph> 9 | Dropdown content 10 | <paragraph> 11 | <pending_xref refdoc="index" refdomain="std" refexplicit="False" reftarget="target" reftype="ref" refwarn="True"> 12 | <inline classes="xref std std-ref"> 13 | target 14 | , 15 | <pending_xref refdoc="index" refdomain="std" refexplicit="True" reftarget="target" reftype="ref" refwarn="True"> 16 | <inline classes="xref std std-ref"> 17 | text 18 | -------------------------------------------------------------------------------- /tests/test_snippets/snippet_pre_grid-basic.xml: -------------------------------------------------------------------------------- 1 | <document source="index"> 2 | <section ids="heading" names="heading"> 3 | <title> 4 | Heading 5 | <container classes="sd-container-fluid sd-sphinx-override sd-mb-4 sd-border-1" design_component="grid-container" is_div="True"> 6 | <container classes="sd-row sd-row-cols-1 sd-row-cols-xs-1 sd-row-cols-sm-2 sd-row-cols-md-3 sd-row-cols-lg-4" design_component="grid-row" is_div="True"> 7 | <container classes="sd-col sd-d-flex-column" design_component="grid-item" is_div="True"> 8 | <paragraph> 9 | A 10 | <container classes="sd-col sd-d-flex-column" design_component="grid-item" is_div="True"> 11 | <paragraph> 12 | B 13 | <container classes="sd-col sd-d-flex-column" design_component="grid-item" is_div="True"> 14 | <paragraph> 15 | C 16 | <container classes="sd-col sd-d-flex-column" design_component="grid-item" is_div="True"> 17 | <paragraph> 18 | D 19 | -------------------------------------------------------------------------------- /tests/test_snippets/snippet_pre_grid-card-columns.xml: -------------------------------------------------------------------------------- 1 | <document source="index"> 2 | <section ids="heading" names="heading"> 3 | <title> 4 | Heading 5 | <container classes="sd-container-fluid sd-sphinx-override sd-mb-4" design_component="grid-container" is_div="True"> 6 | <container classes="sd-row sd-row-cols-2 sd-row-cols-xs-2 sd-row-cols-sm-2 sd-row-cols-md-2 sd-row-cols-lg-2" design_component="grid-row" is_div="True"> 7 | <container classes="sd-col sd-d-flex-row sd-col-auto sd-col-xs-auto sd-col-sm-auto sd-col-md-auto sd-col-lg-auto" design_component="grid-item" is_div="True"> 8 | <container classes="sd-card sd-sphinx-override sd-w-100 sd-shadow-sm" design_component="card" is_div="True"> 9 | <container classes="sd-card-body" design_component="card-body" is_div="True"> 10 | <paragraph classes="sd-card-text"> 11 | A 12 | <container classes="sd-col sd-d-flex-row sd-col-12 sd-col-xs-12 sd-col-sm-6 sd-col-md-6 sd-col-lg-6" design_component="grid-item" is_div="True"> 13 | <container classes="sd-card sd-sphinx-override sd-w-100 sd-shadow-sm" design_component="card" is_div="True"> 14 | <container classes="sd-card-body" design_component="card-body" is_div="True"> 15 | <paragraph classes="sd-card-text"> 16 | B 17 | <container classes="sd-col sd-d-flex-row sd-col-12 sd-col-xs-12 sd-col-sm-12 sd-col-md-12 sd-col-lg-12" design_component="grid-item" is_div="True"> 18 | <container classes="sd-card sd-sphinx-override sd-w-100 sd-shadow-sm" design_component="card" is_div="True"> 19 | <container classes="sd-card-body" design_component="card-body" is_div="True"> 20 | <paragraph classes="sd-card-text"> 21 | C 22 | -------------------------------------------------------------------------------- /tests/test_snippets/snippet_pre_grid-card.xml: -------------------------------------------------------------------------------- 1 | <document source="index"> 2 | <section ids="heading" names="heading"> 3 | <title> 4 | Heading 5 | <container classes="sd-container-fluid sd-sphinx-override sd-mb-4" design_component="grid-container" is_div="True"> 6 | <container classes="sd-row sd-row-cols-2 sd-row-cols-xs-2 sd-row-cols-sm-2 sd-row-cols-md-2 sd-row-cols-lg-2" design_component="grid-row" is_div="True"> 7 | <container classes="sd-col sd-d-flex-row" design_component="grid-item" is_div="True"> 8 | <container classes="sd-card sd-sphinx-override sd-w-100 sd-shadow-sm" design_component="card" is_div="True"> 9 | <container classes="sd-card-body" design_component="card-body" is_div="True"> 10 | <container classes="sd-card-title sd-font-weight-bold" design_component="card-title" is_div="True"> 11 | <PassthroughTextElement> 12 | Title 1 13 | <paragraph classes="sd-card-text"> 14 | A 15 | <container classes="sd-col sd-d-flex-row" design_component="grid-item" is_div="True"> 16 | <container classes="sd-card sd-sphinx-override sd-w-100 sd-shadow-sm" design_component="card" is_div="True"> 17 | <container classes="sd-card-body" design_component="card-body" is_div="True"> 18 | <container classes="sd-card-title sd-font-weight-bold" design_component="card-title" is_div="True"> 19 | <PassthroughTextElement> 20 | Title 2 21 | <paragraph classes="sd-card-text"> 22 | B 23 | -------------------------------------------------------------------------------- /tests/test_snippets/snippet_pre_grid-gutter.xml: -------------------------------------------------------------------------------- 1 | <document source="index"> 2 | <section ids="heading" names="heading"> 3 | <title> 4 | Heading 5 | <container classes="sd-container-fluid sd-sphinx-override sd-mb-4" design_component="grid-container" is_div="True"> 6 | <container classes="sd-row sd-row-cols-2 sd-row-cols-xs-2 sd-row-cols-sm-2 sd-row-cols-md-2 sd-row-cols-lg-2 sd-g-1 sd-g-xs-1 sd-g-sm-1 sd-g-md-1 sd-g-lg-1" design_component="grid-row" is_div="True"> 7 | <container classes="sd-col sd-d-flex-row" design_component="grid-item" is_div="True"> 8 | <container classes="sd-card sd-sphinx-override sd-w-100 sd-shadow-sm" design_component="card" is_div="True"> 9 | <container classes="sd-card-body" design_component="card-body" is_div="True"> 10 | <paragraph classes="sd-card-text"> 11 | A 12 | <container classes="sd-col sd-d-flex-row" design_component="grid-item" is_div="True"> 13 | <container classes="sd-card sd-sphinx-override sd-w-100 sd-shadow-sm" design_component="card" is_div="True"> 14 | <container classes="sd-card-body" design_component="card-body" is_div="True"> 15 | <paragraph classes="sd-card-text"> 16 | B 17 | <container classes="sd-container-fluid sd-sphinx-override sd-mb-4" design_component="grid-container" is_div="True"> 18 | <container classes="sd-row sd-row-cols-2 sd-row-cols-xs-2 sd-row-cols-sm-2 sd-row-cols-md-2 sd-row-cols-lg-2 sd-g-3 sd-g-xs-3 sd-g-sm-3 sd-g-md-4 sd-g-lg-5" design_component="grid-row" is_div="True"> 19 | <container classes="sd-col sd-d-flex-row" design_component="grid-item" is_div="True"> 20 | <container classes="sd-card sd-sphinx-override sd-w-100 sd-shadow-sm" design_component="card" is_div="True"> 21 | <container classes="sd-card-body" design_component="card-body" is_div="True"> 22 | <paragraph classes="sd-card-text"> 23 | A 24 | <container classes="sd-col sd-d-flex-row" design_component="grid-item" is_div="True"> 25 | <container classes="sd-card sd-sphinx-override sd-w-100 sd-shadow-sm" design_component="card" is_div="True"> 26 | <container classes="sd-card-body" design_component="card-body" is_div="True"> 27 | <paragraph classes="sd-card-text"> 28 | B 29 | -------------------------------------------------------------------------------- /tests/test_snippets/snippet_pre_grid-nested.xml: -------------------------------------------------------------------------------- 1 | <document source="index"> 2 | <section ids="heading" names="heading"> 3 | <title> 4 | Heading 5 | <container classes="sd-container-fluid sd-sphinx-override sd-mb-4" design_component="grid-container" is_div="True"> 6 | <container classes="sd-row sd-row-cols-1 sd-row-cols-xs-1 sd-row-cols-sm-1 sd-row-cols-md-2 sd-row-cols-lg-2 sd-g-1 sd-g-xs-1 sd-g-sm-1 sd-g-md-1 sd-g-lg-1" design_component="grid-row" is_div="True"> 7 | <container classes="sd-col sd-d-flex-column" design_component="grid-item" is_div="True"> 8 | <container classes="sd-container-fluid sd-sphinx-override sd-mb-4" design_component="grid-container" is_div="True"> 9 | <container classes="sd-row sd-row-cols-1 sd-row-cols-xs-1 sd-row-cols-sm-1 sd-row-cols-md-1 sd-row-cols-lg-1 sd-g-1 sd-g-xs-1 sd-g-sm-1 sd-g-md-1 sd-g-lg-1" design_component="grid-row" is_div="True"> 10 | <container classes="sd-col sd-d-flex-row" design_component="grid-item" is_div="True"> 11 | <container classes="sd-card sd-sphinx-override sd-w-100 sd-shadow-sm" design_component="card" is_div="True"> 12 | <container classes="sd-card-body" design_component="card-body" is_div="True"> 13 | <container classes="sd-card-title sd-font-weight-bold" design_component="card-title" is_div="True"> 14 | <PassthroughTextElement> 15 | Item 1.1 16 | <paragraph classes="sd-card-text"> 17 | Multi-line 18 | <paragraph classes="sd-card-text"> 19 | content 20 | <container classes="sd-col sd-d-flex-row" design_component="grid-item" is_div="True"> 21 | <container classes="sd-card sd-sphinx-override sd-w-100 sd-shadow-sm" design_component="card" is_div="True"> 22 | <container classes="sd-card-body" design_component="card-body" is_div="True"> 23 | <container classes="sd-card-title sd-font-weight-bold" design_component="card-title" is_div="True"> 24 | <PassthroughTextElement> 25 | Item 1.2 26 | <paragraph classes="sd-card-text"> 27 | Content 28 | <container classes="sd-col sd-d-flex-column" design_component="grid-item" is_div="True"> 29 | <container classes="sd-container-fluid sd-sphinx-override sd-mb-4" design_component="grid-container" is_div="True"> 30 | <container classes="sd-row sd-row-cols-1 sd-row-cols-xs-1 sd-row-cols-sm-1 sd-row-cols-md-1 sd-row-cols-lg-1 sd-g-1 sd-g-xs-1 sd-g-sm-1 sd-g-md-1 sd-g-lg-1" design_component="grid-row" is_div="True"> 31 | <container classes="sd-col sd-d-flex-row" design_component="grid-item" is_div="True"> 32 | <container classes="sd-card sd-sphinx-override sd-w-100 sd-shadow-sm" design_component="card" is_div="True"> 33 | <container classes="sd-card-body" design_component="card-body" is_div="True"> 34 | <container classes="sd-card-title sd-font-weight-bold" design_component="card-title" is_div="True"> 35 | <PassthroughTextElement> 36 | Item 2.1 37 | <paragraph classes="sd-card-text"> 38 | Content 39 | <container classes="sd-col sd-d-flex-row" design_component="grid-item" is_div="True"> 40 | <container classes="sd-card sd-sphinx-override sd-w-100 sd-shadow-sm" design_component="card" is_div="True"> 41 | <container classes="sd-card-body" design_component="card-body" is_div="True"> 42 | <container classes="sd-card-title sd-font-weight-bold" design_component="card-title" is_div="True"> 43 | <PassthroughTextElement> 44 | Item 2.2 45 | <paragraph classes="sd-card-text"> 46 | Content 47 | <container classes="sd-col sd-d-flex-row" design_component="grid-item" is_div="True"> 48 | <container classes="sd-card sd-sphinx-override sd-w-100 sd-shadow-sm" design_component="card" is_div="True"> 49 | <container classes="sd-card-body" design_component="card-body" is_div="True"> 50 | <container classes="sd-card-title sd-font-weight-bold" design_component="card-title" is_div="True"> 51 | <PassthroughTextElement> 52 | Item 2.3 53 | <paragraph classes="sd-card-text"> 54 | Content 55 | -------------------------------------------------------------------------------- /tests/test_snippets/snippet_pre_icon-fontawesome.xml: -------------------------------------------------------------------------------- 1 | <document source="index"> 2 | <section ids="heading" names="heading"> 3 | <title> 4 | Heading 5 | <paragraph> 6 | An icon 7 | <fontawesome classes="fas fa-spinner sd-bg-primary sd-bg-text-primary" icon="spinner"> 8 | , some more text. 9 | -------------------------------------------------------------------------------- /tests/test_snippets/snippet_pre_icon-octicon.xml: -------------------------------------------------------------------------------- 1 | <document source="index"> 2 | <section ids="heading" names="heading"> 3 | <title> 4 | Heading 5 | <paragraph> 6 | A coloured icon: 7 | <raw format="html" xml:space="preserve"> 8 | <svg version="1.1" width="1.0em" height="1.0em" class="sd-octicon sd-octicon-report sd-text-info" viewBox="0 0 16 16" aria-hidden="true"><path d="M0 1.75C0 .784.784 0 1.75 0h12.5C15.216 0 16 .784 16 1.75v9.5A1.75 1.75 0 0 1 14.25 13H8.06l-2.573 2.573A1.458 1.458 0 0 1 3 14.543V13H1.75A1.75 1.75 0 0 1 0 11.25Zm1.75-.25a.25.25 0 0 0-.25.25v9.5c0 .138.112.25.25.25h2a.75.75 0 0 1 .75.75v2.19l2.72-2.72a.749.749 0 0 1 .53-.22h6.5a.25.25 0 0 0 .25-.25v-9.5a.25.25 0 0 0-.25-.25Zm7 2.25v2.5a.75.75 0 0 1-1.5 0v-2.5a.75.75 0 0 1 1.5 0ZM9 9a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"></path></svg> 9 | , some more text. 10 | -------------------------------------------------------------------------------- /tests/test_snippets/snippet_pre_tab-basic.xml: -------------------------------------------------------------------------------- 1 | <document source="index"> 2 | <section ids="heading" names="heading"> 3 | <title> 4 | Heading 5 | <container classes="sd-tab-set" design_component="tab-set" is_div="True"> 6 | <container classes="sd-tab-item" design_component="tab-item" is_div="True" selected="False"> 7 | <rubric classes="sd-tab-label"> 8 | Label1 9 | <container classes="sd-tab-content" design_component="tab-content" is_div="True"> 10 | <paragraph> 11 | Content 1 12 | <container classes="sd-tab-item" design_component="tab-item" is_div="True" selected="False"> 13 | <rubric classes="sd-tab-label"> 14 | Label2 15 | <container classes="sd-tab-content" design_component="tab-content" is_div="True"> 16 | <paragraph> 17 | Content 2 18 | -------------------------------------------------------------------------------- /tests/test_snippets/snippet_pre_tab-code-set.xml: -------------------------------------------------------------------------------- 1 | <document source="index"> 2 | <section ids="heading" names="heading"> 3 | <title> 4 | Heading 5 | <container classes="sd-tab-set" design_component="tab-set" is_div="True"> 6 | <container classes="sd-tab-item" design_component="tab-item" is_div="True"> 7 | <rubric classes="sd-tab-label" sync_group="code" sync_id="python"> 8 | PYTHON 9 | <container classes="sd-tab-content" design_component="tab-content" is_div="True"> 10 | <literal_block force="False" highlight_args="{'linenostart': 1}" language="python" source="snippet.py" xml:space="preserve"> 11 | a = 1 12 | <container classes="sd-tab-item" design_component="tab-item" is_div="True"> 13 | <rubric classes="sd-tab-label" sync_group="code" sync_id="javascript"> 14 | JAVASCRIPT 15 | <container classes="sd-tab-content" design_component="tab-content" is_div="True"> 16 | <literal_block force="False" highlight_args="{}" language="javascript" xml:space="preserve"> 17 | a = 1; 18 | -------------------------------------------------------------------------------- /tests/test_snippets/snippet_pre_tab-options.xml: -------------------------------------------------------------------------------- 1 | <document source="index"> 2 | <section ids="heading" names="heading"> 3 | <title> 4 | Heading 5 | <container classes="sd-tab-set class-set" design_component="tab-set" is_div="True"> 6 | <container classes="sd-tab-item class-container" design_component="tab-item" is_div="True" selected="True"> 7 | <rubric classes="sd-tab-label class-label" ids="target" names="target"> 8 | <strong> 9 | Label 10 | <container classes="sd-tab-content class-content" design_component="tab-content" is_div="True"> 11 | <paragraph> 12 | Content 13 | <paragraph> 14 | <pending_xref refdoc="index" refdomain="std" refexplicit="False" reftarget="target" reftype="ref" refwarn="True"> 15 | <inline classes="xref std std-ref"> 16 | target 17 | , 18 | <pending_xref refdoc="index" refdomain="std" refexplicit="True" reftarget="target" reftype="ref" refwarn="True"> 19 | <inline classes="xref std std-ref"> 20 | text 21 | -------------------------------------------------------------------------------- /tests/test_snippets/snippet_pre_tab-sync.xml: -------------------------------------------------------------------------------- 1 | <document source="index"> 2 | <section ids="heading" names="heading"> 3 | <title> 4 | Heading 5 | <container classes="sd-tab-set" design_component="tab-set" is_div="True"> 6 | <container classes="sd-tab-item" design_component="tab-item" is_div="True" selected="False"> 7 | <rubric classes="sd-tab-label" sync_group="category" sync_id="key1"> 8 | Label1 9 | <container classes="sd-tab-content" design_component="tab-content" is_div="True"> 10 | <paragraph> 11 | Content 1 12 | <container classes="sd-tab-item" design_component="tab-item" is_div="True" selected="False"> 13 | <rubric classes="sd-tab-label" sync_group="category" sync_id="key2"> 14 | Label2 15 | <container classes="sd-tab-content" design_component="tab-content" is_div="True"> 16 | <paragraph> 17 | Content 2 18 | <container classes="sd-tab-set" design_component="tab-set" is_div="True"> 19 | <container classes="sd-tab-item" design_component="tab-item" is_div="True" selected="False"> 20 | <rubric classes="sd-tab-label" sync_group="category" sync_id="key1"> 21 | Label1 22 | <container classes="sd-tab-content" design_component="tab-content" is_div="True"> 23 | <paragraph> 24 | Content 1 25 | <container classes="sd-tab-item" design_component="tab-item" is_div="True" selected="False"> 26 | <rubric classes="sd-tab-label" sync_group="category" sync_id="key2"> 27 | Label2 28 | <container classes="sd-tab-content" design_component="tab-content" is_div="True"> 29 | <paragraph> 30 | Content 2 31 | -------------------------------------------------------------------------------- /tox.ini: -------------------------------------------------------------------------------- 1 | # To use tox, see https://tox.readthedocs.io 2 | # (you may also want to install tox-uv) 3 | # then run `tox` or `tox -- {pytest args}` 4 | # run in parallel using `tox -p` 5 | [tox] 6 | envlist = py39 7 | 8 | [testenv] 9 | usedevelop = true 10 | 11 | [testenv:py{39,310,311,312,313}] 12 | description = Run unit tests with this Python version 13 | extras = 14 | testing 15 | commands = pytest {posargs} 16 | 17 | [testenv:py{39,310,311,312,313}-no-myst] 18 | description = Run unit tests with this Python version 19 | extras = 20 | testing-no-myst 21 | commands = pytest {posargs} 22 | 23 | [testenv:docs-{alabaster,rtd,pydata,sbt,furo,im}] 24 | description = 25 | Run documentation build for this theme 26 | extras = 27 | rtd 28 | rtd: theme_rtd 29 | pydata: theme_pydata 30 | sbt: theme_sbt 31 | furo: theme_furo 32 | im: theme_im 33 | allowlist_externals = echo 34 | passenv = 35 | BUILDER 36 | CLEAN 37 | TERM 38 | setenv = 39 | alabaster: SPHINX_THEME = alabaster 40 | rtd: SPHINX_THEME = sphinx_rtd_theme 41 | pydata: SPHINX_THEME = pydata_sphinx_theme 42 | sbt: SPHINX_THEME = sphinx_book_theme 43 | furo: SPHINX_THEME = furo 44 | im: SPHINX_THEME = sphinx_immaterial 45 | commands_pre = 46 | python -c "import shutil; shutil.rmtree('docs/_build/{env:BUILDER:html}/{env:SPHINX_THEME:}', ignore_errors=True) if '{env:CLEAN:}' else None" 47 | commands = 48 | sphinx-build -nW --keep-going {posargs} -b {env:BUILDER:html} docs/ docs/_build/{env:BUILDER:html}/{env:SPHINX_THEME:} 49 | commands_post = echo "open docs/_build//{env:BUILDER:html}/{env:SPHINX_THEME:}/index.html" 50 | --------------------------------------------------------------------------------