Copy disabled (too large)
Download .txt
Showing preview only (10,090K chars total). Download the full file to get everything.
Repository: executablebooks/sphinx-design
Branch: main
Commit: bbaf94a18f8d
Files: 182
Total size: 9.6 MB
Directory structure:
gitextract_mkpyc8g7/
├── .github/
│ ├── dependabot.yml
│ └── workflows/
│ ├── ci.yml
│ └── copilot-setup-steps.yml
├── .gitignore
├── .pre-commit-config.yaml
├── .readthedocs.yml
├── AGENTS.md
├── CHANGELOG.md
├── LICENSE
├── README.md
├── codecov.yml
├── docs/
│ ├── _static/
│ │ ├── furo.css
│ │ └── 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
│ ├── 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.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
│ ├── 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/
│ │ ├── test_material_outlined_.txt
│ │ ├── test_material_regular_.txt
│ │ ├── test_material_round_.txt
│ │ ├── test_material_sharp_.txt
│ │ ├── test_material_twotone_.txt
│ │ ├── test_octicons.txt
│ │ └── test_tab_set_with_invalid_children.xml
│ ├── test_misc.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
│ └── test_snippets.py
└── tox.ini
================================================
FILE CONTENTS
================================================
================================================
FILE: .github/dependabot.yml
================================================
# To get started with Dependabot version updates, you'll need to specify which
# package ecosystems to update and where the package manifests are located.
# Please see the documentation for all configuration options:
# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
version: 2
updates:
- package-ecosystem: github-actions
directory: /
commit-message:
prefix: ⬆️
schedule:
interval: monthly
- package-ecosystem: pip
directory: /
commit-message:
prefix: ⬆️
schedule:
interval: monthly
================================================
FILE: .github/workflows/ci.yml
================================================
name: continuous-integration
on:
push:
branches: [main]
tags:
- 'v*'
pull_request:
jobs:
pre-commit:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- name: Set up Python
uses: actions/setup-python@v5
with:
python-version: "3.11"
- uses: pre-commit/action@v3.0.1
tests:
strategy:
fail-fast: false
matrix:
os: [ubuntu-latest]
python-version: ["3.11", "3.12", "3.13", "3.14"]
sphinx-version: ["~=7.0", "~=8.0", "~=9.0"]
extras: ["testing"]
include:
- os: windows-latest
python-version: "3.11"
sphinx-version: "~=7.0"
extras: "testing"
- os: windows-latest
python-version: "3.13"
sphinx-version: "~=8.0"
extras: "testing"
- os: windows-latest
python-version: "3.14"
sphinx-version: "~=9.0"
extras: "testing"
runs-on: ${{ matrix.os }}
name: Tests (py${{ matrix.python-version }}, Sphinx${{ matrix.sphinx-version }}, on ${{ matrix.os }})
steps:
- uses: actions/checkout@v4
- name: Set up Python ${{ matrix.python-version }}
uses: actions/setup-python@v5
with:
python-version: ${{ matrix.python-version }}
cache: pip
- name: Install dependencies
run: |
python -m pip install --upgrade pip
pip install --upgrade "sphinx${{ matrix.sphinx-version }}" -e .[${{ matrix.extras}}]
- name: Run pytest
run: |
pytest --cov=sphinx_design --cov-report=xml --cov-report=term-missing
- name: Upload to Codecov
if: github.event.pull_request.head.repo.full_name == github.repository && matrix.python-version == '3.9' && matrix.os == 'ubuntu-latest'
uses: codecov/codecov-action@v3
with:
token: ${{ secrets.CODECOV_TOKEN }}
name: pytests
flags: pytests
file: ./coverage.xml
fail_ci_if_error: true
docs-build-format:
runs-on: ubuntu-latest
strategy:
matrix:
format: [html, latex, man]
steps:
- uses: actions/checkout@v4
- name: Set up Python
uses: actions/setup-python@v5
with:
python-version: "3.11"
cache: pip
- name: Install dependencies
run: |
python -m pip install --upgrade pip
pip install -e .[rtd]
- name: Build documentation
run: sphinx-build -nW --keep-going -b ${{ matrix.format }} docs/ docs/_build/${{ matrix.format }}
# https://github.com/marketplace/actions/alls-green#why
check: # This job does nothing and is only used for the branch protection
if: always()
needs:
- pre-commit
- tests
- docs-build-format
runs-on: ubuntu-latest
steps:
- name: Decide whether the needed jobs succeeded or failed
uses: re-actors/alls-green@release/v1
with:
jobs: ${{ toJSON(needs) }}
publish:
name: Publish to PyPi
needs: [pre-commit, tests]
if: github.event_name == 'push' && startsWith(github.event.ref, 'refs/tags')
runs-on: ubuntu-latest
steps:
- name: Checkout source
uses: actions/checkout@v4
- name: Set up Python
uses: actions/setup-python@v5
with:
python-version: "3.11"
- name: install flit
run: |
pip install flit~=3.4
- name: Build and publish
run: |
flit publish
env:
FLIT_USERNAME: __token__
FLIT_PASSWORD: ${{ secrets.PYPI_KEY }}
================================================
FILE: .github/workflows/copilot-setup-steps.yml
================================================
name: Copilot Setup Steps
# Automatically run the setup steps when they are changed to allow for easy validation, and
# allow manual testing through the repository's "Actions" tab
on:
workflow_dispatch:
push:
paths:
- .github/workflows/copilot-setup-steps.yml
pull_request:
paths:
- .github/workflows/copilot-setup-steps.yml
jobs:
# The job MUST be called `copilot-setup-steps` or it will not be picked up by Copilot.
copilot-setup-steps:
runs-on: ubuntu-latest
# Set the permissions to the lowest permissions possible needed for your steps.
# Copilot will be given its own token for its operations.
permissions:
contents: read
# You can define any steps you want, and they will run before the agent starts.
# If you do not check out your code, Copilot will do this for you.
steps:
- name: Checkout code
uses: actions/checkout@v4
- name: Set up Python
uses: actions/setup-python@v5
with:
python-version: "3.11"
cache: pip
- name: Set up Node.js
uses: actions/setup-node@v4
with:
node-version: "20"
cache: npm
- name: Install uv
run: pip install uv
- name: Install pre-commit and pre-commit-uv
run: pip install pre-commit pre-commit-uv
- name: Install tox and tox-uv
run: pip install tox tox-uv
- name: Install Node.js dependencies
run: npm install
================================================
FILE: .gitignore
================================================
# OS files
.DS_Store
# Byte-compiled / optimized / DLL files
__pycache__/
*.py[cod]
*$py.class
# C extensions
*.so
# Distribution / packaging
.Python
build/
develop-eggs/
dist/
downloads/
eggs/
.eggs/
lib/
lib64/
parts/
sdist/
var/
wheels/
share/python-wheels/
*.egg-info/
.installed.cfg
*.egg
MANIFEST
# PyInstaller
# Usually these files are written by a python script from a template
# before PyInstaller builds the exe, so as to inject date/other infos into it.
*.manifest
*.spec
# Installer logs
pip-log.txt
pip-delete-this-directory.txt
# Unit test / coverage reports
htmlcov/
.tox/
.nox/
.coverage
.coverage.*
.cache
nosetests.xml
coverage.xml
*.cover
*.py,cover
.hypothesis/
.pytest_cache/
cover/
# Translations
*.mo
*.pot
# Django stuff:
*.log
local_settings.py
db.sqlite3
db.sqlite3-journal
# Flask stuff:
instance/
.webassets-cache
# Scrapy stuff:
.scrapy
# Sphinx documentation
docs/_build/
# PyBuilder
.pybuilder/
target/
# Jupyter Notebook
.ipynb_checkpoints
# IPython
profile_default/
ipython_config.py
# pyenv
# For a library or package, you might want to ignore these files since the code is
# intended to run in multiple environments; otherwise, check them in:
# .python-version
# pipenv
# According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control.
# However, in case of collaboration, if having platform-specific dependencies or dependencies
# having no cross-platform support, pipenv may install dependencies that don't work, or not
# install all needed dependencies.
#Pipfile.lock
# PEP 582; used by e.g. github.com/David-OConnor/pyflow
__pypackages__/
# Celery stuff
celerybeat-schedule
celerybeat.pid
# SageMath parsed files
*.sage.py
# Environments
.env
.venv
env/
venv/
ENV/
env.bak/
venv.bak/
# Spyder project settings
.spyderproject
.spyproject
# Rope project settings
.ropeproject
# mkdocs documentation
/site
# mypy
.mypy_cache/
.dmypy.json
dmypy.json
# Pyre type checker
.pyre/
# pytype static type analyzer
.pytype/
# Cython debug symbols
cython_debug/
.vscode/
node_modules/
================================================
FILE: .pre-commit-config.yaml
================================================
# Install pre-commit hooks via
# pre-commit install
exclude: >
(?x)^(
\.vscode/settings\.json|
tests/.*xml|
tests/.*txt|
)$
repos:
- repo: https://github.com/pre-commit/pre-commit-hooks
rev: v6.0.0
hooks:
- id: check-json
- id: check-yaml
- id: end-of-file-fixer
- id: trailing-whitespace
- repo: https://github.com/astral-sh/ruff-pre-commit
rev: v0.14.13
hooks:
- id: ruff
args: [--fix]
- id: ruff-format
- repo: https://github.com/pre-commit/mirrors-mypy
rev: v1.19.1
hooks:
- id: mypy
additional_dependencies: []
- repo: local
hooks:
- id: css
name: css
description: Compile the SCSS/SASS files to CSS inside the python package
files: \.(scss|sass)$
language: node
additional_dependencies: ['sass@1.35.2']
# entry: sass
entry: npm run css
require_serial: true
pass_filenames: false
# args: [--style=compressed, --no-source-map, style/index.scss, sphinx_design/compiled/style.min.css]
- id: tsc
name: tsc (jsdoc)
entry: tsc
language: node
files: \.(js)$
types_or: [javascript]
args: [--allowJs, --noEmit, --strict]
additional_dependencies:
- typescript
================================================
FILE: .readthedocs.yml
================================================
version: 2
build:
os: ubuntu-22.04
tools:
python: "3.11"
python:
install:
- method: pip
path: .
extra_requirements:
- rtd
sphinx:
configuration: docs/conf.py
builder: html
fail_on_warning: true
================================================
FILE: AGENTS.md
================================================
# AGENTS.md
This file provides guidance for AI coding agents working on the **sphinx-design** repository.
## Project Overview
sphinx-design is a Sphinx extension for designing beautiful, view size responsive web components. It provides:
- Grids, cards, dropdowns, tabs, badges, buttons, and icons
- Responsive design inspired by [Bootstrap](https://getbootstrap.com/) (v5), [Material Design](https://material.io), and [Material-UI](https://material-ui.com/)
- Support for both reStructuredText and [MyST Markdown](https://myst-parser.readthedocs.io/) (via integration with myst-parser)
The extension works with multiple Sphinx themes including alabaster, sphinx-rtd-theme, pydata-sphinx-theme, sphinx-book-theme, furo, and sphinx-immaterial.
## Repository Structure
```
pyproject.toml # Project configuration and dependencies
tox.ini # Tox test environment configuration
package.json # Node.js config for SASS compilation
sphinx_design/ # Main source code
├── __init__.py # Package init with setup() entry point
├── _compat.py # Compatibility utilities
├── extension.py # Main Sphinx extension setup
├── shared.py # Shared constants and base classes
├── badges_buttons.py # Badge and button directives
├── cards.py # Card directives
├── dropdown.py # Dropdown directive
├── grids.py # Grid directives
├── tabs.py # Tab directives
├── icons.py # Icon roles (Material, FontAwesome, Octicons)
├── article_info.py # Article info directive
└── compiled/ # Compiled static assets (CSS, JS)
style/ # SASS source files
├── index.scss # Main SCSS entry point
├── _variables.scss # SCSS variables
├── _grids.scss # Grid styles
├── _cards.scss # Card styles
├── _tabs.scss # Tab styles
├── _dropdown.scss # Dropdown styles
└── ... # Other component styles
tests/ # Test suite
├── conftest.py # Pytest fixtures
├── test_snippets.py # Snippet-based tests
├── test_misc.py # Miscellaneous tests
├── test_snippets/ # Test fixture files for snippets
└── test_misc/ # Test fixture files for misc tests
docs/ # Documentation source (MyST Markdown)
├── conf.py # Sphinx configuration
├── index.md # Documentation index
├── get_started.md # Getting started guide
├── grids.md # Grid documentation
├── cards.md # Card documentation
├── tabs.md # Tab documentation
├── dropdowns.md # Dropdown documentation
├── badges_buttons.md # Badge and button documentation
└── snippets/ # Code snippets for docs (myst/, rst/)
```
## Development Commands
All commands should be run via [`tox`](https://tox.wiki) for consistency. The project uses `tox-uv` for faster environment creation.
### Testing
```bash
# Run all tests (default Python version)
tox
# Run tests with a specific Python version
tox -e py311
tox -e py312
# Run a specific test file
tox -- tests/test_snippets.py
# Run a specific test function
tox -- tests/test_snippets.py::test_function_name
# Run tests without myst-parser dependency
tox -e py311-no-myst
# Run with coverage
tox -- --cov=sphinx_design
# Update regression test fixtures
tox -- --force-regen
```
### Documentation
```bash
# Build docs with different themes
tox -e docs-alabaster
tox -e docs-rtd
tox -e docs-pydata
tox -e docs-sbt
tox -e docs-furo
tox -e docs-im
# Clean build (set CLEAN env var)
CLEAN=1 tox -e docs-furo
# Build with a different builder (e.g., linkcheck)
BUILDER=linkcheck tox -e docs-furo
```
### Code Quality
```bash
# Type checking with mypy
tox -e mypy
# Linting with ruff (auto-fix enabled)
tox -e ruff-check -- --fix
# Formatting with ruff
tox -e ruff-fmt
# Run pre-commit hooks on all files
pre-commit run --all-files
# Compile SASS to CSS
npm run css
# or via pre-commit
pre-commit run --all css
```
## Code Style Guidelines
- **Formatter/Linter**: Ruff (configured in `pyproject.toml`)
- **Type Checking**: Mypy (configured in `pyproject.toml`)
- **Pre-commit**: Use pre-commit hooks for consistent code style
### Best Practices
- **Type annotations**: Use complete type annotations for all function signatures.
- **Docstrings**: Use Sphinx-style docstrings (`:param:`, `:return:`, `:raises:`).
- **Directive classes**: Extend `SdDirective` (from `shared.py`) for new directives.
- **Warning messages**: Use `WARNING_TYPE = "design"` for consistent warning categorization.
- **Testing**: Write tests for all new functionality. Use `pytest-regressions` for output comparison.
### Docstring Example
```python
def create_component(
name: str,
rawtext: str,
*,
classes: Sequence[str] = (),
) -> nodes.container:
"""Create a component container node.
:param name: The component name.
:param rawtext: The raw text content.
:param classes: Additional CSS classes to apply.
:return: A container node with the component.
"""
...
```
## Testing Guidelines
### Test Structure
- Tests use `pytest` with fixtures from `conftest.py`
- Regression testing uses `pytest-regressions` for output comparison
- The `sphinx_builder` fixture creates temporary Sphinx projects for testing
### Writing Tests
1. Use the `sphinx_builder` fixture to create test Sphinx applications
2. Add test content as `.txt` files in `tests/test_snippets/` or `tests/test_misc/`
3. Use `file_regression` or `data_regression` fixtures for comparing output
### Example Test Pattern
`````python
def test_grid_basic(sphinx_builder, file_regression):
builder = sphinx_builder()
builder.src_path.joinpath("index.md").write_text(
"""
# Test
````{grid} 2
:gutter: 1
```{grid-item}
Item 1
```
```{grid-item}
Item 2
```
````
""",
encoding="utf8",
)
builder.build()
doctree = builder.get_doctree("index")
file_regression.check(doctree.pformat(), extension=".xml")
`````
## Commit Message Format
Use this format:
```
<EMOJI> <KEYWORD>: Summarize in 72 chars or less (#<PR>)
Optional detailed explanation.
```
Keywords:
- `✨ NEW:` – New feature
- `🐛 FIX:` – Bug fix
- `👌 IMPROVE:` – Improvement (no breaking changes)
- `‼️ BREAKING:` – Breaking change
- `📚 DOCS:` – Documentation
- `🔧 MAINTAIN:` – Maintenance changes only (typos, etc.)
- `🧪 TEST:` – Tests or CI changes only
- `♻️ REFACTOR:` – Refactoring
If the commit only makes changes to a single module,
consider including the name in the title.
## PR title and description format
Use the same as for the commit message format,
but for the title you can omit the `KEYWORD` and only use `EMOJI`
## Pull Request Requirements
When submitting changes:
1. **Description**: Include a meaningful description or link explaining the change
2. **Tests**: Include test cases for new functionality or bug fixes
3. **Documentation**: Update docs if behavior changes or new features are added
4. **Changelog**: Update `CHANGELOG.md` under the appropriate section
5. **Code Quality**: Ensure `pre-commit run --all-files` passes
## Architecture Overview
### Extension Setup
The extension follows a modular architecture where each component type has its own module:
```
setup() in __init__.py
└── setup_extension() in extension.py
├── setup_badges_and_buttons()
├── setup_cards()
├── setup_grids()
├── setup_dropdown()
├── setup_icons()
├── setup_tabs()
└── setup_article_info()
```
### Key Components
#### Base Classes (`sphinx_design/shared.py`)
- `SdDirective`: Base class for sphinx-design directives (extends `SphinxDirective`)
- `create_component()`: Factory function for creating component nodes
- `WARNING_TYPE`: Constant for warning categorization
#### Directives
Each component type has its own module with directives:
- **Grids** (`grids.py`): `grid`, `grid-item`, `grid-item-card` directives
- **Cards** (`cards.py`): `card`, `card-header`, `card-footer`, `card-carousel` directives
- **Tabs** (`tabs.py`): `tab-set`, `tab-item` directives
- **Dropdowns** (`dropdown.py`): `dropdown` directive
- **Badges/Buttons** (`badges_buttons.py`): `button-link`, `button-ref` directives and `bdg-*` roles
- **Icons** (`icons.py`): Icon roles for Material, FontAwesome, and Octicons
#### Static Assets
Compiled CSS and JS are stored in `sphinx_design/compiled/`:
- CSS is compiled from SASS sources in `style/`
- JavaScript for tab functionality
### Styling
The extension uses SASS for styling:
1. SASS source files are in `style/`
2. Compiled using `npm run css` (requires Node.js)
3. Output goes to `sphinx_design/compiled/style.min.css`
4. CSS is automatically copied to build output during Sphinx builds
## Key Files
- `pyproject.toml` - Project configuration, dependencies, and tool settings
- `sphinx_design/__init__.py` - Package entry point with `setup()` for Sphinx
- `sphinx_design/extension.py` - Main extension setup, CSS/JS handling
- `sphinx_design/shared.py` - Base classes and shared utilities
- `sphinx_design/grids.py` - Grid layout directives
- `sphinx_design/cards.py` - Card component directives
- `sphinx_design/tabs.py` - Tab component directives
## Debugging
- Build docs with `-v` flag for verbose output
- Check `docs/_build/html/<theme>/` for build outputs
- Use `tox -- -v --tb=long` for verbose test output with full tracebacks
- Inspect generated HTML to debug styling issues
## Common Patterns
### Adding a New Component
1. Create a new module in `sphinx_design/` (e.g., `my_component.py`)
2. Define directive class(es) extending `SdDirective`
3. Create a `setup_my_component(app: Sphinx)` function
4. Call the setup function from `setup_extension()` in `extension.py`
5. Add SASS styles in `style/_my_component.scss`
6. Import the SASS file in `style/index.scss`
7. Document in `docs/`
8. Add tests in `tests/`
### Adding a New Directive Option
1. Add the option to the directive's `option_spec` dictionary
2. Handle the option in the directive's `run()` method
3. Add appropriate CSS classes or attributes to the output node
4. Document the new option
5. Add tests for the new option
### Working with SASS
1. Edit SASS files in `style/`
2. Run `npm run css` to compile (or `pre-commit run --all css`)
3. Compiled output goes to `sphinx_design/compiled/style.min.css`
4. Test with different themes to ensure compatibility
## Reference Documentation
- [Docutils Repository](https://github.com/live-clones/docutils)
- [Docutils Documentation](https://docutils.sourceforge.io/)
- [Docutils Nodes](https://docutils.sourceforge.io/docs/ref/doctree.html)
- [Docutils release log](https://docutils.sourceforge.io/RELEASE-NOTES.html)
- [Sphinx Repository](https://github.com/sphinx-doc/sphinx)
- [Sphinx Extension Development](https://www.sphinx-doc.org/en/master/extdev/index.html)
- [Bootstrap Documentation](https://getbootstrap.com/docs/5.0/)
- [SASS Documentation](https://sass-lang.com/documentation)
================================================
FILE: CHANGELOG.md
================================================
# Change Log
## 0.7.0 - 2025-01-19
### Dependencies
- ⬆️ Drop Python 3.9 & 3.10, support Python 3.14 by {user}`chrisjsewell` in {pr}`250`
- ⬆️ Drop Sphinx v6, add Sphinx v9 support by {user}`chrisjsewell` in {pr}`250` and {pr}`255`
- ⬆️ Update Material Design Icons to v4.0.0-116-ge9da21 by {user}`2bndy5` in {pr}`223`
### Docs
- 📚 Document `muted`, `white`, and `black` semantic colors by {user}`agriyakhetarpal` in {pr}`216`
## 0.6.1 - 2024-08-02
- ⬆️ Update sphinx to >=6,<9 by {user}`chrisjsewell` in {pr}`212`
- 👌 Reduce right-padding of dropdown title by {user}`chrisjsewell` in {pr}`198`
## 0.6.0 - 2024-05-23
### Dependencies
* ⬆️ Python v3.9-3.12 by {user}`chrisjsewell` in {pr}`186`
* ⬆️ Octicon icons to v19.8.0 by {user}`ffvpor` in {pr}`171`
### New
#### ✨ Create custom directives
You can use the `sd_custom_directives` configuration option in your `conf.py` to add custom directives, with default option values:
```python
sd_custom_directives = {
"dropdown-syntax": {
"inherit": "dropdown",
"argument": "Syntax",
"options": {
"color": "primary",
"icon": "code",
},
}
}
```
The key is the new directive name to add, and the value is a dictionary with the following keys:
- `inherit`: The directive to inherit from (e.g. `dropdown`)
- `argument`: The default argument (optional, only for directives that take a single argument)
- `options`: A dictionary of default options for the directive (optional)
by {user}`chrisjsewell` in {pr}`194`
#### ✨ sync tabs by URL query parameters
Synchronised tabs can now be selected by adding a query parameter to the URL, for that sync-group, such as `?code=python` for
```restructuredtext
.. tab-set-code::
.. literalinclude:: snippet.py
:language: python
.. literalinclude:: snippet.js
:language: javascript
```
The last selected tab key, per group, is also persisted to `SessionStorage`
by {user}`mikemckiernan` and {user}`chrisjsewell` in {pr}`196`
### Improve
* 👌 Use reference name by default for internal link cards by {user}`gabalafou` in {pr}`183`
* 👌 Improve specificity of JS function name by {user}`danirus` in {pr}`153`
* 👌 Remove duplicate CSS hashing for sphinx >= 7.1 by {user}`chrisjsewell` in {pr}`193`
#### 👌 Improve `dropdown` title bar
There are three visible changes:
1. The "default" behaviour of the right chevron is to go from right-facing (closed) to down-facing (open), instead of down-facing (closed) to up-facing (open). There is also a rotate transition on opening/closing.
The old default behaviour can be retained by using the new `:chevron: down-up` directive option.
2. The prefix icon (optional), title text, and chevron state icon are now all better aligned
3. The top/bottom padding is now 0.5em instead of 1em
The PR also introduces three new CSS variables to control font sizes of the dropdown:
```css
--sd-fontsize-tabs-label: 1rem;
--sd-fontsize-dropdown-title: 1rem;
--sd-fontweight-dropdown-title: 700;
```
Internally, the HTML / CSS is changed, such that the title is now an `inline-flex` box, with three columns arranged with `justify-content: space-between`:
| icon (optional) | text (`flex-grow: 1`) | state chevron |
| -------------- | -------------------- | -------------- |
| | | |
Also, the state chevron was previously two distinct SVGs (with one hidden), but now is one that get rotated on open/close.
by {user}`chrisjsewell` in {pr}`192`
### Fix
* 🐛 Fix tab-item label with nested syntax by {user}`Praecordi` in {pr}`135`
* 🐛 Fix do not close `input` tag by {user}`chrisjsewell` in {pr}`195`
### Internal
* 📚 Update theme versions by {user}`chrisjsewell` in {pr}`189`
* 📚 Make octicon list a table by {user}`chrisjsewell` in {pr}`188`
* 📚 Add sphinx-immaterial to doc theme builds by {user}`chrisjsewell` in {pr}`190`
* 📚 Change syntax dropdown color by {user}`chrisjsewell` in {pr}`191`
* 🔧 Add FIPS compliant flag to md5 call by {user}`gabor-varga` in {pr}`162`
* 🔧 define `build.os` for RTD to fix build by {user}`sciencewhiz` in {pr}`176`
* 🔧 Move to ruff by {user}`chrisjsewell` in {pr}`185`
**Full Changelog**: <https://github.com/executablebooks/sphinx-design/compare/v0.5.0...v0.6.0>
## 0.5.0 - 2023-07-27
* ⬆️ Drop Python 3.7 support, by {user}`chrisjsewell` in {pr}`146`
* ⬆️ UPGRADE: sphinx>=5,<8, by {user}`chrisjsewell` in {pr}`148`
**Full Changelog**: <https://github.com/executablebooks/sphinx-design/compare/v0.4.1...v0.5.0>
## v0.4.0 - 2023-04-13
**Full Changelog**: <https://github.com/executablebooks/sphinx-design/compare/v0.3.0...v0.4.0>
### Enhancements made
- Make default blue color a11y friendly. {pr}`124` ({user}`feanil`, {user}`choldgraf`)
- Make card titles translatable {pr}`113` ({user}`jpmckinney`, {user}`chrisjsewell`)
### Version upgrades
- Sphinx 6.x. {pr}`106`
- Support for Python 3.11 {pr}`105`
### Contributors to this release
The following people contributed discussions, new ideas, code and documentation contributions, and review.
See [our definition of contributors](https://github-activity.readthedocs.io/en/latest/#how-does-this-tool-define-contributions-in-the-reports).
([GitHub contributors page for this release](https://github.com/executablebooks/sphinx-design/graphs/contributors?from=2022-08-22&to=2023-04-12&type=c))
## v0.3.0 - 2022-08-22
- ⬆️ Update Materials Design Icons to v4.0.0-46-gc9e5528, thanks to {user}`2bndy5` ({pr}`69`)
- 🐛 FIX: dropdown/tab-item `:name:` options ({pr}`91`)
- 🐛 FIX: Docs build against non-html formats ({pr}`88`)
- 👌 IMPROVE: Add card options `class-img-top`/`class-img-bottom` ({pr}`92`)
- 👌 IMPROVE: Add `link-alt` to fix card link accessibility ({pr}`89`)
- adds the `link-alt` option to `card` (and `grid-item-card`) directives, in order to assign a discernable name to the link (for screen readers).
- 👌 IMPROVE: Make tab ids deterministic ({pr}`93`)
- Use increasing indices, rather than UUIDs
- 🔧 MAINTAIN: Fix docutils `PendingDeprecationWarning` ({pr}`94`)
- 📚 DOCS: Update font awesome icons ({pr}`64`)
**Full Changelog**: <https://github.com/executablebooks/sphinx-design/compare/v0.2.0...v0.3.0>
## v0.2.0 - 2022-06-14
- ⬆️ Support Sphinx v5, drop v3
- ⬆️ Add Python 3.10 support
**Full Changelog**: <https://github.com/executablebooks/sphinx-design/compare/v0.1.0...v0.2.0>
## v0.1.0 - 2022-04-21
- ✨ NEW: Add material design icons roles, thanks to {user}`2bndy5` in {pr}`41`
- ⬆️ UPGRADE: octicons to v16.1.1, thanks to {user}`pocek` in {pr}`43`
- 🐛 FIX: Links in card titles by {user}`chrisjsewell` in {pr}`59`
- 🐛 FIX: Exception on missing card link by {user}`chrisjsewell` in {pr}`60`
- 🔧 MAINTAIN: Move from setuptools to flit for package build by {user}`chrisjsewell` in {pr}`58`
- 🔧 MAINTAIN: Drop furo-specific stylesheet, thanks to {user}`pradyunsg` in {pr}`22`
**Full Changelog**: <https://github.com/executablebooks/sphinx-design/compare/v0.0.13...v0.1.0>
## v0.0.13 - 2021-10-27
✨ NEW: add icon `far` role ({pr}`35`), thanks to {user}`OriolAbril`
👌 IMPROVE: Styling for tabs ({pr}`21`), thanks to {user}`pradyunsg`
👌 IMPROVE: Properly remove the border on dropdown card body ({pr}`23`), thanks to {user}`pradyunsg`
🐛 FIX: `sd-outline-*` classes color ({pr}`25`)
## v0.0.11 - 2021-09-08
✨ NEW: Add `ref-type` option to `button-ref` directive
## v0.0.10 - 2021-08-08
✨ NEW: Add `grid-item` directive `child-direction` and `child-align` options
✨ NEW: Add `card` directive `img-background` option
## v0.0.9 - 2021-06-08
♻️ REFACTOR: `test_sd_hide_root_title` to `sd_hide_title` front-matter
👌 IMPROVE: dropdown chevrons
## v0.0.8 - 2021-06-08
✨ NEW: Add `test_sd_hide_root_title` config option to hide the root title.
👌 IMPROVE: `sd-card-hover:hover` add scale 101%
📚 DOCS: Update landing page
## v0.0.7 - 2021-05-08
✨ NEW: Add `reverse` option for `grid` directive
✨ NEW: Add animations
## v0.0.6 - 2021-04-08
✨ NEW: Add `card-carousel` directive
## v0.0.5 - 2021-28-07
👌 IMPROVE: Make octicon's size variable
## v0.0.4 - 2021-28-07
👌 IMPROVE: Allow `auto` for grid columns
## v0.0.3 - 2021-26-07
👌 IMPROVE: Add more CSS classes and add documentation 📚
## v0.0.2 - 2021-23-07
Improve documentation 📚
## v0.0.1 - 2021-22-07
Initial release 🎉
================================================
FILE: LICENSE
================================================
MIT License Copyright (c) 2023 Chris Sewell
Permission is hereby granted, free
of charge, to any person obtaining a copy of this software and associated
documentation files (the "Software"), to deal in the Software without
restriction, including without limitation the rights to use, copy, modify, merge,
publish, distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to the
following conditions:
The above copyright notice and this permission notice
(including the next paragraph) shall be included in all copies or substantial
portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF
ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO
EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR
OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
================================================
FILE: README.md
================================================
# sphinx-design
[![Github-CI][github-ci]][github-link]
[![Coverage Status][codecov-badge]][codecov-link]
[![PyPI][pypi-badge]][pypi-link]
A sphinx extension for designing beautiful, view size responsive web components.
Created with inspiration from [Bootstrap](https://getbootstrap.com/) (v5), [Material Design](https://material.io) and [Material-UI](https://material-ui.com/) design frameworks.
## Usage
Simply pip install `sphinx-design` and add the extension to your `conf.py`:
```python
extensions = ["sphinx_design"]
```
## Supported browsers
- Chrome >= 60
- Firefox >= 60
- Firefox ESR
- iOS >= 12
- Safari >= 12
- Explorer >= 12
(Mirrors: <https://github.com/twbs/bootstrap/blob/v5.0.2/.browserslistrc>)
## Theme support
View the documentation in multiple themes:
- [alabaster](https://sphinx-design.readthedocs.io/en/alabaster-theme)
- [sphinx-book-theme](https://sphinx-design.readthedocs.io/en/sbt-theme)
- [pydata-sphinx-theme](https://sphinx-design.readthedocs.io/en/pydata-theme)
- [sphinx-rtd-theme](https://sphinx-design.readthedocs.io/en/rtd-theme)
- [furo](https://sphinx-design.readthedocs.io/en/furo-theme)
## Comparison to sphinx-panels
This package is an iteration on [sphinx-panels](https://github.com/executablebooks/sphinx-panels) and intends to replace it.
See [Migrating from sphinx-panels](./docs/get_started.md) for more information.
## Development
It is recommended to use [tox](https://tox.readthedocs.io/en/latest/) to run the tests and document builds.
Run `tox -va` to see all the available tox environments.
To run linting, formatting and SASS compilation, use [pre-commit](https://pre-commit.com/).
`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,
or you can directly run `npm run css`.
## TODO
- note design goal; to be flexible, but limit the amount of directive nesting required.
This factors in to
- card header/footer syntax? (don't really want to have to use separate directives for these, hence `^^^`/`+++` syntax)
- auto-wrap `grid-item` and `tab-item`, if not already inside `grid` or `tab-set`?
grids items cannot contain headers; is this in anyway possible with docutils structure?
naming of directives/roles: standard prefix?
why are cards setup with "word-wrap: break-word;"?
handle latex
Use autoprefixer when compiling SASS (see <https://getbootstrap.com/docs/5.0/getting-started/browsers-devices/#supported-browsers>)
horizontal card (grid row inside card, picture on left)
subtitle for card (see <https://material.io/components/cards#anatomy>)
[github-ci]: https://github.com/executablebooks/sphinx-design/workflows/continuous-integration/badge.svg?branch=main
[github-link]: https://github.com/executablebooks/sphinx-design
[codecov-badge]: https://codecov.io/gh/executablebooks/sphinx-design/branch/main/graph/badge.svg
[codecov-link]: https://codecov.io/gh/executablebooks/sphinx-design
[pypi-badge]: https://img.shields.io/pypi/v/sphinx-design.svg
[pypi-link]: https://pypi.org/project/sphinx-design
================================================
FILE: codecov.yml
================================================
coverage:
status:
project:
default:
target: 85%
threshold: 0.2%
patch:
default:
target: 75%
threshold: 0.2%
================================================
FILE: docs/_static/furo.css
================================================
body {
--sd-fontsize-dropdown: var(--admonition-font-size);
--sd-fontsize-dropdown-title: var(--admonition-title-font-size);
--sd-fontweight-dropdown-title: 500;
}
================================================
FILE: docs/_static/sphinx_immaterial.css
================================================
body {
--sd-fontsize-dropdown: .64rem;
--sd-fontsize-dropdown-title: .64rem;
--sd-fontweight-dropdown-title: 700;
}
details.sd-dropdown {
padding-left: 0;
padding-right: 0;
}
summary.sd-summary-title::after {
display: none;
right: 0 !important;
}
summary.sd-summary-title::before {
display: none;
left: 0 !important;
}
summary.sd-summary-title {
width: 100% !important;
margin-left: 0;
padding: .5em 1em !important;
}
summary.sd-summary-title svg.sd-octicon {
max-width: none !important;
}
================================================
FILE: docs/additional.md
================================================
(special)=
# Additional
These are additional components that are not part of the standard Materials Design or Bootstrap systems.
## `article-info`
This directive is used to display a block of information about an article,
normally positioned just below the title of the article (shown below with non-standard outline).
```{article-info}
:avatar: images/ebp-logo.png
:avatar-link: https://executablebooks.org/
:avatar-outline: muted
:author: Executable Books
:date: "Jul 24, 2021"
:read-time: "5 min read"
:class-container: sd-p-2 sd-outline-muted sd-rounded-1
```
`````{dropdown-syntax}
````{tab-set-code}
```{literalinclude} ./snippets/myst/article-info.txt
:language: markdown
```
```{literalinclude} ./snippets/rst/article-info.txt
:language: rst
```
````
`````
The `author`, `date`, and `read-time` options are parsed as syntax,
so you can use substitutions like:
- `date`
- MyST: `` :date: "{sub-ref}`today`" ``
- RST: `:data: |today|`
- `read-time`
- MyST: `` :read-time: "{sub-ref}`wordcount-minutes` min read" ``
### options
avatar
: A URI (relative file path or URL) to an image for use as the avatar (a user portrait, logo or branded graphic).
avatar-alt
: Alternative text for the avatar.
avatar-link
: A URL to link to if the avatar icon is clicked.
avatar-outline
: A semantic color to use for the outline of the avatar.
author
: Text to display in the author of of the article.
date
: Text to display in the date of the article.
read-time
: Text to indicate the time to read the article.
class-container
: Additional CSS classes for the container element.
class-avatar
: Additional CSS classes for the avatar element.
================================================
FILE: docs/badges_buttons.md
================================================
# Badges, Buttons & Icons {octicon}`rocket`
(badges)=
## Badges
Inline badges can be used as a labelling component.
Badges are available in each semantic color, with filled and outline variants:
- {bdg}`plain badge`
- {bdg-primary}`primary`, {bdg-primary-line}`primary-line`
- {bdg-secondary}`secondary`, {bdg-secondary-line}`secondary-line`
- {bdg-success}`success`, {bdg-success-line}`success-line`
- {bdg-info}`info`, {bdg-info-line}`info-line`
- {bdg-warning}`warning`, {bdg-warning-line}`warning-line`
- {bdg-danger}`danger`, {bdg-danger-line}`danger-line`
- {bdg-light}`light`, {bdg-light-line}`light-line`
- {bdg-muted}`muted`, {bdg-muted-line}`muted-line`
- {bdg-dark}`dark`, {bdg-dark-line}`dark-line`
- {bdg-white}`white`, {bdg-white-line}`white-line`
- {bdg-black}`black`, {bdg-black-line}`black-line`
`````{dropdown-syntax}
````{tab-set-code}
```{literalinclude} ./snippets/myst/badge-basic.txt
:language: markdown
```
```{literalinclude} ./snippets/rst/badge-basic.txt
:language: rst
```
````
`````
`bdg-link-` and `bdg-ref-` variants are also available for use with links and references.
The syntax is the same as for the `ref` role.
{bdg-link-primary}`https://example.com`
{bdg-link-primary-line}`explicit title <https://example.com>`
{bdg-ref-primary}`badges`
`````{dropdown-syntax}
````{tab-set-code}
```{literalinclude} ./snippets/myst/badge-link.txt
:language: markdown
```
```{literalinclude} ./snippets/rst/badge-link.txt
:language: rst
```
````
`````
See [Bootstrap badges](https://getbootstrap.com/docs/5.0/components/badge/) for more information, and related [Material Design chips](https://material.io/components/chip).
(buttons)=
## Buttons
Buttons allow users to navigate to external (`button-link`) / internal (`button-ref`) links with a single tap.
```{button-link} https://example.com
```
```{button-link} https://example.com
Button text
```
```{button-link} https://example.com
:color: primary
:shadow:
```
```{button-link} https://example.com
:color: primary
:outline:
```
```{button-link} https://example.com
:color: secondary
:expand:
```
```{button-ref} buttons
:color: info
```
```{button-ref} buttons
:color: info
Reference Button text
```
`````{dropdown-syntax}
````{tab-set-code}
```{literalinclude} ./snippets/myst/button-link.txt
:language: markdown
```
```{literalinclude} ./snippets/rst/button-link.txt
:language: rst
```
````
`````
Note that by default sphinx converts the content of references to raw text.
For example `**Bold text**` with `ref-type` set to `ref` will be rendered without bold:
```{button-ref} buttons
:ref-type: ref
:color: primary
**Bold text**
```
However, if using [myst-parser](https://myst-parser.readthedocs.io/), you can set the `ref-type` to `myst`, and the content will be properly rendered:
```{button-ref} buttons
:ref-type: myst
:color: primary
**Bold text**
```
Use the `click-parent` option to make the button's parent container also clickable.
:::{card} Card with an expanded button
```{button-link} https://example.com
:color: info
:expand:
:click-parent:
```
:::
See the [Material Design](https://material.io/components/buttons) and [Bootstrap](https://getbootstrap.com/docs/5.0/components/buttons/) descriptions for further details.
### `button-link` and `button-ref` options
ref-type (`button-ref` only)
: Type of reference to use; `any` (default), `ref`, `doc`, or `myst`
color
: Set the color of the button (background and font).
One of the semantic color names: `primary`, `secondary`, `success`, `danger`, `warning`, `info`, `light`, `dark`, `muted`.
outline
: Outline color variant
align
: Align the button on the page; `left`, `right`, `center` or `justify`
expand
: Expand to fit parent width
click-parent
: Make parent container also clickable
tooltip
: Add tooltip on hover
shadow
: Add shadow CSS
class
: Additional CSS classes
(icons)=
## Inline Icons
Inline icon roles are available for the [GitHub octicon](https://primer.style/octicons/), [Google Material Design Icons](https://github.com/google/material-design-icons), or [FontAwesome](https://fontawesome.com/icons?d=gallery&m=free) libraries.
Octicon icons and Material icons are added as SVG's directly into the page with the `octicon` and `material-<flavor>` roles. See below for the different flavors of Material Design Icons.
By default the icon will be of height `1em` (i.e. the height of the font).
A specific height can be set after a semi-colon (`;`) with units of either `px`, `em` or `rem`.
Additional CSS classes can also be added to the SVG after a second semi-colon (`;`) delimiter.
### Octicon Icons
A coloured icon: {octicon}`report;1em;sd-text-info`, some more text.
````{tab-set-code}
```{literalinclude} ./snippets/myst/icon-octicon.txt
:language: markdown
```
```{literalinclude} ./snippets/rst/icon-octicon.txt
:language: rst
```
````
````{dropdown} All Octicons
:open:
```{_all-octicon}
```
````
### Material Design Icons
Material Design icons come as several flavors. Each flavor represents a different role used in sphinx-design. These flavors are:
- `material-regular`
- `material-outlined`
- `material-round`
- `material-sharp`
- `material-twotone`
Not all icons are available for each flavor, but most are. Instead of displaying the 10660+ icons here, you are encouraged to browse the available icons from the [Material Design Icons' showcase](https://fonts.google.com/icons) hosted by Google.
- A regular icon: {material-regular}`data_exploration;2em`, some more text
- A coloured regular icon: {material-regular}`settings;3em;sd-text-success`, some more text.
- A coloured outline icon: {material-outlined}`settings;3em;sd-text-success`, some more text.
- A coloured sharp icon: {material-sharp}`settings;3em;sd-text-success`, some more text.
- A coloured round icon: {material-round}`settings;3em;sd-text-success`, some more text.
- A coloured two-tone icon: {material-twotone}`settings;3em;sd-text-success`, some more text.
````{tab-set-code}
```{literalinclude} ./snippets/myst/icon-material-design.txt
:language: markdown
```
```{literalinclude} ./snippets/rst/icon-material-design.txt
:language: rst
```
````
### FontAwesome Icons
FontAwesome icons are added via the Fontawesome CSS classes.
If the theme you are using does not already include the FontAwesome CSS, it should be loaded in your configuration from a [font-awesome CDN](https://cdnjs.com/libraries/font-awesome), with the [html_css_files](https://www.sphinx-doc.org/en/master/usage/configuration.html#confval-html_css_files) option, e.g.:
```python
html_css_files = [
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
]
```
Use either `fa` (deprecated in font-awesome v5), `fas`, `fab` or `far` for the role name.
Note that not all regular style icons are free, `far` role only works with free ones.
````{warning}
Since the FontAwesome icons are fetched directly from their distributed CSS, specifying a height/size to the `fa*` roles is not supported.
However, you can always add your custom CSS class that controls the `font-size` property.
If a height/size is supplied to a `fa*` role, then it will be interpreted as a CSS class.
There can only be a maximum of 1 `;` in the `fa*` roles' arguments
````
````{tab-set-code}
```markdown
- An icon {fas}`spinner;sd-text-primary`, some more text.
- An icon {fab}`github`, some more text.
- An icon {fab}`gitkraken;sd-text-success fa-xl`, some more text.
- An icon {fas}`skull;sd-text-danger`, some more text.
```
```rst
- An icon :fas:`spinner;sd-text-primary`, some more text.
- An icon :fab:`github`, some more text.
- An icon :fab:`gitkraken;sd-text-success fa-xl`, some more text.
- An icon :fas:`skull;sd-text-danger`, some more text.
```
````
- An icon {fas}`spinner;sd-text-primary`, some more text.
- An icon {fab}`github`, some more text.
- An icon {fab}`gitkraken;sd-text-success fa-xl`, some more text.
- An icon {fas}`skull;sd-text-danger`, some more text.
By default, icons will only be output in HTML formats. But if you want FontAwesome icons to be output on LaTeX, using the [fontawesome package](https://ctan.org/pkg/fontawesome), you can add to your configuration:
```python
sd_fontawesome_latex = True
```
================================================
FILE: docs/cards.md
================================================
(sd-cards)=
# Cards
Cards contain content and actions about a single subject.
A card is a flexible and extensible content container,
it can be formatted with components including headers and footers, titles and images.
:::{card} Card Title
Card content
:::
See the [Material Design](https://material.io/components/cards) and [Bootstrap card](https://getbootstrap.com/docs/5.0/layout/grid/) descriptions for further details.
`````{dropdown-syntax}
````{tab-set-code}
```{literalinclude} ./snippets/myst/card-basic.txt
:language: markdown
```
```{literalinclude} ./snippets/rst/card-basic.txt
:language: rst
```
````
`````
All content before the first occurrence of three or more `^^^` is considered as a header,
and all content after the final occurrence of three or more `+++` is considered as a footer:
:::{card} Card Title
Header
^^^
Card content
+++
Footer
:::
`````{dropdown-syntax}
````{tab-set-code}
```{literalinclude} ./snippets/myst/card-head-foot.txt
:language: markdown
```
```{literalinclude} ./snippets/rst/card-head-foot.txt
:language: rst
```
````
`````
When using cards in grids (see [`grid-item-card`](./grids.md)) footers can be aligned.
::::{grid} 2
:::{grid-item-card} Card Title
Header
^^^
Card content
+++
Footer
:::
:::{grid-item-card} Card Title
Header
^^^
Longer
Card content
+++
Footer
:::
::::
## Card images
You can also add an image as the background of a card or at the top/bottom of the card, with the `img-background`, `img-top`, `img-bottom` options:
:::::{grid} 2 3 3 4
::::{grid-item}
:::{card} Title
:img-background: images/particle_background.jpg
:class-card: sd-text-black
:img-alt: your desired alt text
Text
:::
::::
::::{grid-item-card} Title
:img-top: images/particle_background.jpg
:img-alt: your desired alt text
Header
^^^
Content
+++
Footer
::::
::::{grid-item-card} Title
:img-bottom: images/particle_background.jpg
:img-alt: your desired alt text
Header
^^^
Content
+++
Footer
::::
:::::
`````{dropdown-syntax}
````{tab-set-code}
```{literalinclude} ./snippets/myst/card-images.txt
:language: markdown
```
```{literalinclude} ./snippets/rst/card-images.txt
:language: rst
```
````
`````
(cards-clickable)=
## Clickable cards
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:
:::{card} Clickable Card (external)
:link: https://example.com
:link-alt: example.com
The entire card can be clicked to navigate to `https://example.com`.
:::
:::{card} Clickable Card (internal)
:link: cards-clickable
:link-type: ref
The entire card can be clicked to navigate to the `cards-clickable` reference target.
:::
`````{dropdown-syntax}
````{tab-set-code}
```{literalinclude} ./snippets/myst/card-link.txt
:language: markdown
```
```{literalinclude} ./snippets/rst/card-link.txt
:language: rst
```
````
`````
The **external link** created above is equivalent to using `<https://example.com>`
(<https://example.com>),
or if the `link-alt` option is provided, `[alt text](https://example.com)`
([alt text](https://example.com)).
:::{tip}
Using URLs as link text makes it harder
for disabled people and for search engines to digest your web page,
so it's best to provide link text via the `link-alt` option.
:::
The **internal link** created above is equivalent to using `` {ref}`cards-clickable` ``
({ref}`cards-clickable`),
or if the `link-alt` option is provided, `` {ref}`alt text <cards-clickable>` ``
({ref}`alt text <cards-clickable>`).
:::{note}
You cannot add additional links to the clickable card, neither in the card
title nor in the card body. The entire card becomes a single link to the
destination you specify, which overrides any other links inside the card.
:::
## Aligning cards
You can use the `text-align` option to align the text in a card,
and also `auto` margins to align the cards horizontally.
:::{card} Align Center
:width: 75%
:margin: 0 2 auto auto
:text-align: center
Content
:::
:::{card} Align Right
:width: 50%
:margin: 0 2 auto 0
:text-align: right
Content
:::
:::{card} Align Left
:width: 50%
:margin: 0 2 0 auto
:text-align: left
Content
:::
(cards:carousel)=
## Card carousels
The `card-carousel` directive can be used to create a single row of fixed width, scrollable cards.
The argument should be a number between 1 and 12, to denote the number of cards to display.
When scrolling a carousel, the scroll will snap to the start of the nearest card:
::::{card-carousel} 2
:::{card} card 1
content
:::
:::{card} card 2
Longer
content
:::
:::{card} card 3
:::
:::{card} card 4
:::
:::{card} card 5
:::
:::{card} card 6
:::
::::
`````{dropdown-syntax}
````{tab-set-code}
```{literalinclude} ./snippets/myst/card-carousel.txt
:language: markdown
```
```{literalinclude} ./snippets/rst/card-carousel.txt
:language: rst
```
````
`````
(cards:options)=
## `card` options
width
: The width that the card should take up (in %): auto, 25%, 50%, 75%, 100%.
margin
: Outer margin of grid.
One (all) or four (top bottom left right) values from: 0, 1, 2, 3, 4, 5, auto.
text-align
: Default horizontal text alignment: left, right, center or justify
img-background
: A URI (relative file path or URL) to an image to be placed below the content.
img-top
: A URI (relative file path or URL) to an image to be placed above the content.
img-bottom
: A URI (relative file path or URL) to an image to be placed below the content.
img-alt
: Alternative text for the image (that will be used by screen-readers).
link
: Turn the entire card into a clickable link to an external/internal target.
link-type
: Type of link: `url` (default), `ref`, `doc`, `any`.
link-alt
: Alternative text for the link (that will be used by screen-readers).
shadow
: The size of the shadow below the card: `none`, `sm` (default), `md`, `lg`.
class-card
: Additional CSS classes for the card container element.
class-header
: Additional CSS classes for the header element.
class-body
: Additional CSS classes for the body element.
class-title
: Additional CSS classes for the title element.
class-footer
: Additional CSS classes for the footer element.
class-img-top
: Additional CSS classes for the top image (if present).
class-img-bottom
: Additional CSS classes for the bottom image (if present).
================================================
FILE: docs/changelog.md
================================================
```{include} ../CHANGELOG.md
```
================================================
FILE: docs/conf.py
================================================
"""Configuration file for the Sphinx documentation builder."""
import os
project = "Sphinx Design"
copyright = "2021, Executable Book Project"
author = "Executable Book Project"
extensions = ["myst_parser", "sphinx_design", "sphinx.ext.extlinks"]
suppress_warnings = ["design.fa-build"]
sd_fontawesome_latex = True
sd_custom_directives = {
"dropdown-syntax": {
"inherit": "dropdown",
"argument": "Syntax",
"options": {
"color": "primary",
"icon": "code",
},
}
}
extlinks = {
"pr": ("https://github.com/executablebooks/sphinx-design/pull/%s", "PR #%s"),
"user": ("https://github.com/%s", "@%s"),
}
html_theme = os.environ.get("SPHINX_THEME", "alabaster")
html_title = f"Sphinx Design ({html_theme.replace('_', '-')})"
html_static_path = ["_static"]
html_logo = "_static/logo_wide.svg"
html_favicon = "_static/logo_square.svg"
if html_theme not in ("sphinx_book_theme", "pydata_sphinx_theme"):
html_css_files = [
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css"
]
if html_theme == "alabaster":
html_logo = ""
html_theme_options = {
"logo": "logo_wide.svg",
"logo_name": False,
"description": "(alabaster theme)",
"github_button": False,
"github_type": "star",
"github_banner": False,
"github_user": "executablebooks",
"github_repo": "sphinx-design",
}
if html_theme == "sphinx_book_theme":
html_theme_options = {
"repository_url": "https://github.com/executablebooks/sphinx-design",
"use_repository_button": True,
"use_edit_page_button": True,
"use_issues_button": True,
"repository_branch": "main",
"path_to_docs": "docs",
"home_page_in_toc": False,
}
if html_theme == "furo":
html_css_files = [
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/fontawesome.min.css",
"furo.css",
]
html_theme_options = {
"sidebar_hide_name": True,
}
if html_theme == "sphinx_rtd_theme":
html_theme_options = {
"logo_only": True,
}
if html_theme == "sphinx_immaterial":
extensions.append("sphinx_immaterial")
html_css_files = ["sphinx_immaterial.css"]
html_theme_options = {
"icon": {
"repo": "fontawesome/brands/github",
},
"site_url": "https://sphinx-design.readthedocs.io/",
"repo_url": "https://github.com/executablebooks/sphinx-design",
"repo_name": "Sphinx-Design",
"palette": [
{
"media": "(prefers-color-scheme: light)",
"scheme": "default",
"primary": "blue",
"accent": "light-blue",
"toggle": {
"icon": "material/weather-night",
"name": "Switch to dark mode",
},
},
{
"media": "(prefers-color-scheme: dark)",
"scheme": "slate",
"primary": "blue",
"accent": "yellow",
"toggle": {
"icon": "material/weather-sunny",
"name": "Switch to light mode",
},
},
],
}
exclude_patterns = ["_build", "Thumbs.db", ".DS_Store"]
myst_enable_extensions = [
"attrs_inline",
"colon_fence",
"deflist",
"substitution",
"html_image",
]
myst_substitutions = {
"loremipsum": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. "
"Sed iaculis arcu vitae odio gravida congue. Donec porttitor ac risus et condimentum. "
"Phasellus bibendum ac risus a sollicitudin. "
"Proin pulvinar risus ac mauris aliquet fermentum et varius nisi. "
"Etiam sit amet metus ac ipsum placerat congue semper non diam. "
"Nunc luctus tincidunt ipsum id eleifend. Ut sed faucibus ipsum. "
"Aliquam maximus dictum posuere. Nunc vitae libero nec enim tempus euismod. "
"Aliquam sed lectus ac nisl sollicitudin ultricies id at neque. "
"Aliquam fringilla odio vitae lorem ornare, sit amet scelerisque orci fringilla. "
"Nam sed arcu dignissim, ultrices quam sit amet, commodo ipsum. "
"Etiam quis nunc at ligula tincidunt eleifend."
}
================================================
FILE: docs/css_classes.md
================================================
# CSS Classes
For most roles/directive, it is preferentially recommended to use the available options to style components since, for example, this allows for better cross-output-format styling.
But for custom cases, these roles/directives also provide `class` options for adding CSS classes directly to element, or you can directly use the `div` directive.
All CSS classes that are part of sphinx-design are prefixed with `sd-`.
:::{div} sd-text-center sd-font-italic sd-text-primary
Some CSS styled text
:::
`````{dropdown-syntax}
````{tab-set-code}
```{literalinclude} ./snippets/myst/div-basic.txt
:language: markdown
```
```{literalinclude} ./snippets/rst/div-basic.txt
:language: rst
```
````
`````
If you find yourself using a class(es) often, consider opening an issue to request a new role/directive or option!
The `div` directive also has the `style` option, which allows you to add inline CSS styles, although it is not recommended to use this option for most cases.
## Text
Classes are available for styling and alignment:
- Alignment:
- `sd-text-justify`
- `sd-text-left`
- `sd-text-right`
- `sd-text-center`
- Size (size decreases from 1 to 6):
- `sd-fs-1`
- `sd-fs-2`
- `sd-fs-3`
- `sd-fs-4`
- `sd-fs-5`
- `sd-fs-6`
- Weight:
- `sd-font-weight-light`
- `sd-font-weight-lighter`
- `sd-font-weight-normal`
- `sd-font-weight-bold`
- `sd-font-weight-bolder`
- Style
- `sd-font-italic`
- `sd-text-decoration-none`
- `sd-text-lowercase`
- `sd-text-uppercase`
- `sd-text-capitalize`
- Wrapping
- `sd-text-wrap`
- `sd-text-nowrap`
- `sd-text-truncate` (requires `display: inline-block` or `display: block`)
- Color
- `sd-text-{semantic color name}` (uses `--sd-color-{semantic color name}` CSS variable)
- `sd-bg-text-{semantic color name}` (uses `--sd-color-{semantic color name}-text` CSS variable)
## Display
Define the layout of an element and its children (see [`display`](https://developer.mozilla.org/en-US/docs/Web/CSS/display)):
- `sd-d-none`
- `sd-d-inline`
- `sd-d-inline-block`
- `sd-d-block`
- `sd-d-grid`
- `sd-d-flex-row` (align items horizontally)
- `sd-d-flex-column` (align items vertically)
- `sd-d-inline-flex`
Variants are also available for screen-sizes (xs, sm, md, lg), e.g. `sd-d-sm-none`.
Items within a flex box can also be aligned along the major axis or minor axis, dependant on the flex-direction.
For example, using `sd-d-flex-column` and `sd-align-major-center` will center the items in the vertical direction.
- `sd-align-major-start`
- `sd-align-major-end`
- `sd-align-major-center`
- `sd-align-major-spaced` (spaced to fill the full axis)
- `sd-align-major-justify` (spaced to fill the full axis, with the first/last item on the edges of the axis)
- `sd-align-minor-start`
- `sd-align-minor-end`
- `sd-align-minor-center`
For more information, see [this guide to flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/).
## Sizing
Size objects width/height by percentage:
- `sd-width-25`, `sd-height-25`
- `sd-width-50`, `sd-height-50`
- `sd-width-75`, `sd-height-75`
- `sd-width-100`, `sd-height-100`
- `sd-width-auto`, `sd-height-auto`
## Spacing
Padding (`p`) and margins (`m`) can be controlled with these classes for; (`t`)op, (`r`)ight, (`b`)ottom, (`l`)eft, `x` (left and right), and `y` (top and bottom).
Spacing are defined on a scale of 0 to 5, for example `sd-px-1` or `sd-mt-5`.
Note, for grids the special gutter classes `sd-g-{screen-size}-{spacing}` are used to set margins, or for only `x`/`y`; `sd-gx-{screen-size}-{spacing}`.
## Colors
Colors can be set using [CSS variable](./css_variables.md), they are defined for the semantic color names: `primary`, `secondary`, `success`, `warning`, `danger`, `info`, `light`, `dark`, and `muted`, and specific colors `black` and `white`.
- `sd-bg-{name}`
- `sd-bg-text-{name}`
- `sd-text-{name}`
- `sd-outline-{name}`
Additional transparent colouring:
- `sd-bg-transparent`
- `sd-outline-transparent`
- `sd-text-transparent`
## Borders
Borders can be applied to elements of thickness 0 to 5, for all are a specific side:
- `sd-border-{thickness}`
- `sd-border-top-{thickness}`
- `sd-border-bottom-{thickness}`
- `sd-border-right-{thickness}`
- `sd-border-left-{thickness}`
````{grid} 1 2 3 3
:gutter: 1
```{grid-item-card}
:shadow: none
:class-card: sd-border-0
`sd-border-0`
```
```{grid-item-card}
:shadow: none
:class-card: sd-border-1
`sd-border-1`
```
```{grid-item-card}
:shadow: none
:class-card: sd-border-2
`sd-border-2`
```
```{grid-item-card}
:shadow: none
:class-card: sd-border-3
`sd-border-3`
```
```{grid-item-card}
:shadow: none
:class-card: sd-border-4
`sd-border-4`
```
```{grid-item-card}
:shadow: none
:class-card: sd-border-5
`sd-border-5`
```
````
Border can be rounded by different amounts using:
- `sd-rounded-0`
- `sd-rounded-1`
- `sd-rounded-2`
- `sd-rounded-3`
- `sd-rounded-pill`
- `sd-rounded-circle`
````{grid} 1 2 3 3
:gutter: 1
```{grid-item-card}
:shadow: none
:class-card: sd-rounded-0
`sd-rounded-0`
```
```{grid-item-card}
:shadow: none
:class-card: sd-rounded-1
`sd-rounded-1`
```
```{grid-item-card}
:shadow: none
:class-card: sd-rounded-2
`sd-rounded-2`
```
```{grid-item-card}
:shadow: none
:class-card: sd-rounded-3
`sd-rounded-3`
```
```{grid-item-card}
:shadow: none
:class-card: sd-rounded-pill
`sd-rounded-pill`
```
```{grid-item-card}
:shadow: none
:class-card: sd-rounded-circle
`sd-rounded-circle`
```
````
## Shadows
Shadows can be applied to box elements (the color of the shadow is defined using `--sd-color-shadow` CSS variable):
- `sd-shadow-none`
- `sd-shadow-sm`
- `sd-shadow-md`
- `sd-shadow-lg`
````{grid} 1 2 3 4
:gutter: 3
```{grid-item-card}
:shadow: none
`sd-shadow-none`
```
```{grid-item-card}
:shadow: sm
`sd-shadow-sm`
```
```{grid-item-card}
:shadow: md
`sd-shadow-md`
```
```{grid-item-card}
:shadow: lg
`sd-shadow-lg`
```
````
## Avatars
Avatars can represent a user or a brand,with a logo or branded graphic ([see Material Design imagery](https://material.io/design/communication/imagery.html#informational-imagery)).
These classes center an image, set their size and add a circular crop:
- `sd-avatar-xs`
- `sd-avatar-sm`
- `sd-avatar-md`
- `sd-avatar-lg`
- `sd-avatar-xl`
- `sd-avatar-inherit`
- `sd-avatar-initial`
````{grid} 1 2 3 3
:gutter: 1
```{grid-item-card} sd-avatar-xs
<img src="images/ebp-logo.png" class="sd-avatar-xs sd-border-1">
```
```{grid-item-card} sd-avatar-sm
<img src="images/ebp-logo.png" class="sd-avatar-sm sd-border-1">
```
```{grid-item-card} sd-avatar-md
<img src="images/ebp-logo.png" class="sd-avatar-md sd-border-1">
```
```{grid-item-card} sd-avatar-lg
<img src="images/ebp-logo.png" class="sd-avatar-lg sd-border-1">
```
```{grid-item-card} sd-avatar-xl
<img src="images/ebp-logo.png" class="sd-avatar-xl sd-border-1">
```
````
## Load Animations
Add CSS animations when loading elements using the `sd-animate-{name}` classes:
- `sd-animate-slide-from-left`
- `sd-animate-slide-from-right`
- `sd-animate-grow100`
- `sd-animate-grow50`
- `sd-animate-grow50-rot20`
See [uxdesign.cc](https://uxdesign.cc/the-ultimate-guide-to-proper-use-of-animation-in-ux-10bd98614fa9) and [material.io](https://material.io/design/motion/understanding-motion.html#user-education) for good guides to animation.
================================================
FILE: docs/css_variables.md
================================================
# CSS Variables
All colors used by sphinx-design are defined as [CSS variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties).
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)):
```python
html_static_path = ['_static']
html_css_files = ['custom.css']
```
For colors, there are nine semantic colors that can be defined.
For each of these colors you should define:
- `--sd-color-{name}` as the actual color
- `--sd-color-{name}-highlight` as the color used when the component is highlighted
(e.g. if hovering over a button). By default, this is a 15% darker version of the original color.
- `--sd-color-{name}-text` as the color to use for text displayed on top of the color.
By default, this is dark grey for light colors and white for dark colors.
The defaults are:
```css
:root {
--sd-color-primary: #007bff;
--sd-color-secondary: #6c757d;
--sd-color-success: #28a745;
--sd-color-info: #17a2b8;
--sd-color-warning: #f0b37e;
--sd-color-danger: #dc3545;
--sd-color-light: #f8f9fa;
--sd-color-muted: #6c757d;
--sd-color-dark: #212529;
--sd-color-primary-highlight: #0069d9;
--sd-color-secondary-highlight: #5c636a;
--sd-color-success-highlight: #228e3b;
--sd-color-info-highlight: #148a9c;
--sd-color-warning-highlight: #cc986b;
--sd-color-danger-highlight: #bb2d3b;
--sd-color-light-highlight: #d3d4d5;
--sd-color-muted-highlight: #5c636a;
--sd-color-dark-highlight: #1c1f23;
--sd-color-primary-text: #fff;
--sd-color-secondary-text: #fff;
--sd-color-success-text: #fff;
--sd-color-info-text: #fff;
--sd-color-warning-text: #212529;
--sd-color-danger-text: #fff;
--sd-color-light-text: #212529;
--sd-color-muted-text: #fff;
--sd-color-dark-text: #fff;
--sd-color-shadow: rgba(0, 0, 0, 0.15);
--sd-color-card-border: rgba(0, 0, 0, 0.125);
--sd-color-card-border-hover: hsla(231, 99%, 66%, 1);
--sd-color-card-background: transparent;
--sd-color-card-text: inherit;
--sd-color-card-header: transparent;
--sd-color-card-footer: transparent;
--sd-color-tabs-label-active: hsla(231, 99%, 66%, 1);
--sd-color-tabs-label-hover: hsla(231, 99%, 66%, 1);
--sd-color-tabs-label-inactive: hsl(0, 0%, 66%);
--sd-color-tabs-underline-active: hsla(231, 99%, 66%, 1);
--sd-color-tabs-underline-hover: rgba(178, 206, 245, 0.62);
--sd-color-tabs-underline-inactive: transparent;
--sd-color-tabs-overline: rgb(222, 222, 222);
--sd-color-tabs-underline: rgb(222, 222, 222);
--sd-fontsize-tabs-label: 1rem;
--sd-fontsize-dropdown-title: 1rem;
--sd-fontweight-dropdown-title: 700;
}
```
================================================
FILE: docs/dropdowns.md
================================================
(sd-dropdowns)=
# Dropdowns
Dropdowns can be used to toggle, usually *non-essential*, content and show it only when a user clicks on the header panel.
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.
:::{dropdown}
Dropdown content
:::
:::{dropdown} Dropdown title
Dropdown content
:::
:::{dropdown} Open dropdown
:open:
Dropdown content
:::
`````{dropdown-syntax}
````{tab-set-code}
```{literalinclude} ./snippets/myst/dropdown-basic.txt
:language: markdown
```
```{literalinclude} ./snippets/rst/dropdown-basic.txt
:language: rst
```
````
`````
## Opening animations
Use `:animate: fade-in` or `:animate: fade-in-slide-down` options to animate the reveal of the hidden content.
:::{dropdown} Dropdown `fade-in`
:animate: fade-in
{{ loremipsum }}
:::
:::{dropdown} Dropdown `fade-in-slide-down`
:animate: fade-in-slide-down
{{ loremipsum }}
:::
## More examples
:::{dropdown} Dropdown with icon
:icon: quote
Dropdown content
:::
:::{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*
:icon: quote
Dropdown content
:::
:::{dropdown} Using option `:chevron: down-up`
:chevron: down-up
Dropdown content
:::
## Dropdowns in other components
Dropdowns can be nested inside other components, such as inside parent dropdowns or within [grid items](./grids.md).
::::{admonition} Here is an admonition with a dropdown
Admonition content
:::{dropdown} Dropdown inside admonition
:icon: quote
{{ loremipsum }}
:::
::::
::::{dropdown} Parent dropdown title
:open:
:::{dropdown} Child dropdown title
:color: warning
:icon: alert
Dropdown content
:::
::::
:::::{grid} 1 1 2 2
:gutter: 1
::::{grid-item}
:::{dropdown} Dropdown Column 1
Dropdown content
:::
::::
::::{grid-item}
:::{dropdown} Dropdown Column 2
Dropdown content
:::
::::
:::::
## `dropdown` options
open
: Open the dropdown by default.
color
: Set the color of the dropdown header (background and font).
One of the semantic color names: `primary`, `secondary`, `success`, `danger`, `warning`, `info`, `light`, `dark`, `muted`.
icon
: Set an [octicon icon](icons) to prefix the dropdown header.
chevron
: The open-close direction of the chevron.
One of: `right-down`, `down-up`.
animate
: Animate the dropdown opening (`fade-in` or `fade-in-slide-down`).
margin
: Outer margin of grid.
One (all) or four (top bottom left right) values from: 0, 1, 2, 3, 4, 5, auto.
name
: Set a reference-able name for the dropdown container.
class-container
: Additional CSS classes for the container element.
class-title
: Additional CSS classes for the title element.
class-body
: Additional CSS classes for the body element.
================================================
FILE: docs/get_started.md
================================================
# Getting Started
```{article-info}
:avatar: images/ebp-logo.png
:avatar-link: https://executablebooks.org
:author: "[Chris Sewell](https://github.com/chrisjsewell)"
:date: "{sub-ref}`today`"
:read-time: "1 min read"
:class-avatar: sd-animate-grow50-rot20
```
## Usage
Simply pip install `sphinx-design` and add the extension to your `conf.py`:
```python
extensions = ["sphinx_design"]
```
For using with [MyST Parser](https://github.com/executablebooks/myst-parser), for Markdown documentation, it is recommended to use the `colon_fence` syntax extension:
```python
extensions = ["myst_parser", "sphinx_design"]
myst_enable_extensions = ["colon_fence"]
```
## Configuration
To hide the title header of a page, add to the top of the page:
::::{tab-set}
:::{tab-item} MyST Markdown
```markdown
---
sd_hide_title: true
---
```
:::
:::{tab-item} RestructuredText
```rst
:sd_hide_title:
```
:::
::::
### Creating custom directives
:::{versionadded} 0.6.0
:::
You can use the `sd_custom_directives` configuration option in your `conf.py` to add custom directives, with default option values:
```python
sd_custom_directives = {
"dropdown-syntax": {
"inherit": "dropdown",
"argument": "Syntax",
"options": {
"color": "primary",
"icon": "code",
},
}
}
```
The key is the new directive name to add, and the value is a dictionary with the following keys:
- `inherit`: The directive to inherit from (e.g. `dropdown`)
- `argument`: The default argument (optional, only for directives that take a single argument)
- `options`: A dictionary of default options for the directive (optional)
## Supported browsers
- Chrome >= 60
- Firefox >= 60
- Firefox ESR
- iOS >= 12
- Safari >= 12
- Explorer >= 12
(Mirrors: <https://github.com/twbs/bootstrap/blob/v5.0.2/.browserslistrc>)
## Migrating from sphinx-panels
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.
Notable changes:
### Reduce direct use of CSS classes
These are replaced by the use of directive options, which are:
- Easier to understand
- Easier to validate
- Easier to work with non-HTML outputs
- Easier to improve/refactor
### `panel` directive replaced
The `panel` directive is replaced by the use of the top-level `grid` directive,
then using `grid-item-card` directive children, rather than delimiting cards by `---`.
If no card is needed, then the `grid-item` directive can be used instead and `card` can be also used independently of grids.
Approximately, `.. panels::` is equivalent to `.. grid:: 1 2 2 2` with option `:gutter: 2`.
### `tabbed` directive replaced
The `tabbed` directive is replaced by the use of the top-level `tab-set` directive,
then using `tab-item` directive children.
The `:sync:` option allows to synchronize tab selection across sets.
The `tab-set-code` directive provides a shorthand for synced code examples.
### `link-button` directive replaced
The `link-button` directive is replaced by the use of `button-ref`/`button-link`.
Directive options have also been added to replace the use of classes:
- `stretched-link` -> `:click-parent:`
- `btn-block` -> `:expand:`
### `octicon` icon role
The default SVGs produced are now sized relative to the surrounding text (i.e. using `1em`).
The syntax for specifying a custom size and adding classes is also changed.
This is similar for favicon icons, where the `,` delimiter is also replaced by `;`, e.g. ``:fa:`name,class` `` -> ``:fa:`name;class` ``.
### Improved CSS
Updated Bootstrap CSS from v4 -> v5,
which in particular allows top-level grid to define both column numbers and gutter sizes.
All CSS classes are prefixed with `sd-` (no clash with other theme/extension CSS)
All colors use CSS variables (customisable)
================================================
FILE: docs/grids.md
================================================
(sd-grids)=
# Grids
## Introduction
Grids are based on a 12 column system, which can adapt to the size of the viewing screen.
A `grid` directive can be set with the number of default columns (1 to 12);
either a single number for all screen sizes, or four numbers for extra-small (<576px), small (768px), medium (992px) and large screens (>1200px),
then child `grid-item` directives should be set for each item.
Try re-sizing the screen to see the number of columns change:
::::{grid} 1 2 3 4
:outline:
:::{grid-item}
A
:::
:::{grid-item}
B
:::
:::{grid-item}
C
:::
:::{grid-item}
D
:::
::::
`````{dropdown-syntax}
````{tab-set-code}
```{literalinclude} ./snippets/myst/grid-basic.txt
:language: markdown
```
```{literalinclude} ./snippets/rst/grid-basic.txt
:language: rst
```
````
`````
You can also use the `auto` value for the column width(s), to size columns based on the natural width of their content.
::::{grid} auto
:::{grid-item}
:outline:
:padding: 2
short text content
:::
:::{grid-item}
:outline:
:padding: 2
some longer text content
:::
:::{grid-item}
:outline:
:padding: 2
short text content
:::
::::
## Placing a card in a grid
The `grid-item-card` directive is a short-hand for placing a card content container inside a grid item (see [Cards](./cards.md)). Most of the `card` directive's options can be used also here:
::::{grid} 2
:::{grid-item-card} Title 1
A
:::
:::{grid-item-card} Title 2
B
:::
::::
`````{dropdown-syntax}
````{tab-set-code}
```{literalinclude} ./snippets/myst/grid-card.txt
:language: markdown
```
```{literalinclude} ./snippets/rst/grid-card.txt
:language: rst
```
````
`````
## Controlling spacing between items
You can set the spacing between grid items with the `gutter` option.
Like for grid columns, you can either provide a single number or four for small, medium and large and extra-large screens.
::::{grid} 2
:gutter: 1
:::{grid-item-card}
A
:::
:::{grid-item-card}
B
:::
::::
::::{grid} 2
:gutter: 3 3 4 5
:::{grid-item-card}
A
:::
:::{grid-item-card}
B
:::
::::
`````{dropdown-syntax}
````{tab-set-code}
```{literalinclude} ./snippets/myst/grid-gutter.txt
:language: markdown
```
```{literalinclude} ./snippets/rst/grid-gutter.txt
:language: rst
```
````
`````
## Item level column width
You can override the number of columns a single item takes up by using the `columns` option of the `grid-item` directive.
Given the total columns are 12, this means 12 would indicate a single item takes up the entire grid row, or 6 half.
Alternatively, use `auto` to automatically decide how many columns to use based on the item content.
Like for grid columns, you can either provide a single number or four for small, medium and large and extra-large screens.
::::{grid} 2
:::{grid-item-card}
:columns: auto
A
:::
:::{grid-item-card}
:columns: 12 6 6 6
B
:::
:::{grid-item-card}
:columns: 12
C
:::
::::
`````{dropdown-syntax}
````{tab-set-code}
```{literalinclude} ./snippets/myst/grid-card-columns.txt
:language: markdown
```
```{literalinclude} ./snippets/rst/grid-card-columns.txt
:language: rst
```
````
`````
## Reversing the item order
Use the `grid` directive's `reverse` option to reverse the order of the items.
This can be useful if you want an item to be on the right side on large screens, but at the top on small screens.
::::{grid} 1 1 2 2
:reverse:
:::{grid-item}
```{image} ./images/ebp-logo.png
:width: 200px
:class: sd-m-auto
```
:::
:::{grid-item-card}
Some text
:::
::::
## Nesting grids
Grids can be nested in other grids to create complex, adaptive layouts:
::::::{grid} 1 1 2 2
:gutter: 1
:::::{grid-item}
::::{grid} 1 1 1 1
:gutter: 1
:::{grid-item-card} Item 1.1
Multi-line
content
:::
:::{grid-item-card} Item 1.2
Content
:::
::::
:::::
:::::{grid-item}
::::{grid} 1 1 1 1
:gutter: 1
:::{grid-item-card} Item 2.1
Content
:::
:::{grid-item-card} Item 2.2
Content
:::
:::{grid-item-card} Item 2.3
Content
:::
::::
:::::
::::::
`````{dropdown-syntax}
````{tab-set-code}
```{literalinclude} ./snippets/myst/grid-nested.txt
:language: markdown
```
```{literalinclude} ./snippets/rst/grid-nested.txt
:language: rst
```
````
`````
See the [Bootstrap Grid system](https://getbootstrap.com/docs/5.0/layout/grid/) for further details.
## `grid` options
gutter
: Spacing between items.
One or four integers (for "xs sm md lg") between 0 and 5.
margin
: Outer margin of grid.
One (all) or four (top bottom left right) values from: 0, 1, 2, 3, 4, 5, auto.
padding
: Inner padding of grid.
One (all) or four (top bottom left right) values from: 0, 1, 2, 3, 4, 5.
outline
: Create a border around the grid.
reverse
: Reverse the order of the grid items.
class-container
: Additional CSS classes for the grid container element.
class-row
: Additional CSS classes for the grid row element.
## `grid-item` options
columns
: The number of columns (out of 12) a grid-item will take up.
One or four integers (for "xs sm md lg") between 1 and 12 (or `auto` to adapt to the content).
margin
: Outer margin of grid item.
One (all) or four (top bottom left right) values from: 0, 1, 2, 3, 4, 5, auto.
padding
: Inner padding of grid item.
One (all) or four (top bottom left right) values from: 0, 1, 2, 3, 4, 5.
child-direction
: Direction of children in the grid item: `column` (default) or `row`.
child-align
: Alignment of children, along the `child-direction`: `start` (default), `end`, `center`, `justify` or `spaced`.
outline
: Create a border around the grid item.
class
: Additional CSS classes for the grid item element.
## `grid-item-card` options
columns
: The number of columns (out of 12) a grid-item will take up.
One or four integers (for "xs sm md lg") between 1 and 12 (or `auto` to adapt to the content).
margin
: Outer margin of grid item.
One (all) or four (top bottom left right) values from: 0, 1, 2, 3, 4, 5, auto.
padding
: Inner padding of grid item.
One (all) or four (top bottom left right) values from: 0, 1, 2, 3, 4, 5.
class-item
: Additional CSS classes for the grid item element.
Plus all options from [](cards:options).
================================================
FILE: docs/index.md
================================================
---
sd_hide_title: true
---
# sphinx-design
::::::{div} landing-title
: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));"
::::{grid}
:reverse:
:gutter: 2 3 3 3
:margin: 4 4 1 2
:::{grid-item}
:columns: 12 4 4 4
```{image} ./_static/logo_square.svg
:width: 200px
:class: sd-m-auto sd-animate-grow50-rot20
```
:::
:::{grid-item}
:columns: 12 8 8 8
:child-align: justify
:class: sd-text-white sd-fs-3
A sphinx extension for designing beautiful, screen-size responsive web-components.
```{button-ref} get_started
:ref-type: doc
:outline:
:color: white
:class: sd-px-4 sd-fs-5
Get Started
```
:::
::::
::::::
Conflict free CSS
: All CSS classes are prefixed, to avoid conflicts with other frameworks.
Works without JavaScript
: JavaScript is not required for any "essential" functionality.
Configurable
: All colors can be configured using CSS variables.
Supports non-HTML output formats
: Components degrade gracefully for non-HTML formats.
```{toctree}
:hidden:
get_started
```
```{toctree}
:caption: Components
:hidden:
grids
cards
dropdowns
tabs
badges_buttons
additional
```
```{toctree}
:caption: Styling
:hidden:
css_variables
css_classes
```
```{toctree}
:caption: Themes
:hidden:
alabaster <https://sphinx-design.readthedocs.io/en/alabaster-theme>
sphinx-book-theme <https://sphinx-design.readthedocs.io/en/sbt-theme>
pydata-sphinx-theme <https://sphinx-design.readthedocs.io/en/pydata-theme>
sphinx-rtd-theme <https://sphinx-design.readthedocs.io/en/rtd-theme>
furo <https://sphinx-design.readthedocs.io/en/furo-theme>
```
```{toctree}
:caption: Development
:hidden:
changelog
```
::::{grid} 1 2 2 3
:margin: 4 4 0 0
:gutter: 1
:::{grid-item-card} {octicon}`table` Grids
:link: grids
:link-type: doc
Screen size adaptable grid layouts.
:::
:::{grid-item-card} {octicon}`note` Cards
:link: cards
:link-type: doc
Flexible and extensible content containers.
:::
:::{grid-item-card} {octicon}`chevron-down` Dropdowns
:link: dropdowns
:link-type: doc
Hide content in expandable containers.
:::
:::{grid-item-card} {octicon}`duplicate` Tabs
:link: tabs
:link-type: doc
Synchronisable, tabbed content sets.
:::
:::{grid-item-card} {octicon}`plus-circle` Badges, Buttons & Icons
:link: badges_buttons
:link-type: doc
Roles and directives for {bdg-primary}`badges` and other components.
:::
:::{grid-item-card} {octicon}`image` CSS Styling
:link: css_variables
:link-type: doc
Change the default colors and other CSS.
:::
::::
-----------
Created with inspiration from [Bootstrap](https://getbootstrap.com/) (v5), [Material Design](https://material.io) and [Material-UI](https://material-ui.com/) design frameworks.
================================================
FILE: docs/snippets/myst/article-info.txt
================================================
```{article-info}
:avatar: images/ebp-logo.png
:avatar-link: https://executablebooks.org/
:avatar-outline: muted
:author: Executable Books
:date: Jul 24, 2021
:read-time: 5 min read
:class-container: sd-p-2 sd-outline-muted sd-rounded-1
```
================================================
FILE: docs/snippets/myst/badge-basic.txt
================================================
{bdg}`plain badge`
{bdg-primary}`primary`, {bdg-primary-line}`primary-line`
{bdg-secondary}`secondary`, {bdg-secondary-line}`secondary-line`
{bdg-success}`success`, {bdg-success-line}`success-line`
{bdg-info}`info`, {bdg-info-line}`info-line`
{bdg-warning}`warning`, {bdg-warning-line}`warning-line`
{bdg-danger}`danger`, {bdg-danger-line}`danger-line`
{bdg-light}`light`, {bdg-light-line}`light-line`
{bdg-muted}`muted`, {bdg-muted-line}`muted-line`
{bdg-dark}`dark`, {bdg-dark-line}`dark-line`
{bdg-white}`white`, {bdg-white-line}`white-line`
{bdg-black}`black`, {bdg-black-line}`black-line`
================================================
FILE: docs/snippets/myst/badge-link.txt
================================================
{bdg-link-primary}`https://example.com`
{bdg-link-primary-line}`explicit title <https://example.com>`
================================================
FILE: docs/snippets/myst/button-link.txt
================================================
```{button-link} https://example.com
```
```{button-link} https://example.com
Button text
```
```{button-link} https://example.com
:color: primary
:shadow:
```
```{button-link} https://example.com
:color: primary
:outline:
```
```{button-link} https://example.com
:color: secondary
:expand:
```
================================================
FILE: docs/snippets/myst/card-basic.txt
================================================
:::{card} Card Title
Card content
:::
================================================
FILE: docs/snippets/myst/card-carousel.txt
================================================
::::{card-carousel} 2
:::{card} card 1
content
:::
:::{card} card 2
Longer
content
:::
:::{card} card 3
:::
:::{card} card 4
:::
:::{card} card 5
:::
:::{card} card 6
:::
::::
================================================
FILE: docs/snippets/myst/card-head-foot.txt
================================================
:::{card} Card Title
Header
^^^
Card content
+++
Footer
:::
================================================
FILE: docs/snippets/myst/card-images.txt
================================================
:::::{grid} 2 3 3 4
::::{grid-item}
:::{card} Title
:img-background: images/particle_background.jpg
:class-card: sd-text-black
:img-alt: my text
Text
:::
::::
::::{grid-item-card} Title
:img-top: images/particle_background.jpg
:img-alt:
Header
^^^
Content
+++
Footer
::::
::::{grid-item-card} Title
:img-bottom: images/particle_background.jpg
Header
^^^
Content
+++
Footer
::::
:::::
================================================
FILE: docs/snippets/myst/card-link.txt
================================================
(cards-clickable)=
## Clickable cards
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:
:::{card} Clickable Card (external)
:link: https://example.com
The entire card can be clicked to navigate to <https://example.com>.
:::
:::{card} Clickable Card (external)
:link: https://example.com
:link-alt: example.com
The entire card can be clicked to navigate to <https://example.com>.
:::
:::{card} Clickable Card (internal)
:link: cards-clickable
:link-type: ref
The entire card can be clicked to navigate to the `cards-clickable` reference target.
:::
:::{card} Clickable Card (internal)
:link: cards-clickable
:link-type: ref
:link-alt: clickable cards
The entire card can be clicked to navigate to the `cards-clickable` reference target.
:::
================================================
FILE: docs/snippets/myst/card-title-link.txt
================================================
(target)=
:::{card} Card Title <https://example.com> {ref}`link <target>`
Card content
:::
================================================
FILE: docs/snippets/myst/div-basic.txt
================================================
:::{div} sd-text-center sd-font-italic sd-text-primary
Some CSS styled text
:::
================================================
FILE: docs/snippets/myst/dropdown-basic.txt
================================================
:::{dropdown}
Dropdown content
:::
:::{dropdown} Dropdown title
Dropdown content
:::
:::{dropdown} Open dropdown
:open:
Dropdown content
:::
================================================
FILE: docs/snippets/myst/dropdown-options.txt
================================================
:::{dropdown} Title
:name: target
:color: info
:icon: alert
:margin: 1
:class-container: class-container
:class-title: class-title
:class-body: class-body
Dropdown content
:::
{ref}`target`, {ref}`text <target>`
================================================
FILE: docs/snippets/myst/grid-basic.txt
================================================
::::{grid} 1 2 3 4
:outline:
:::{grid-item}
A
:::
:::{grid-item}
B
:::
:::{grid-item}
C
:::
:::{grid-item}
D
:::
::::
================================================
FILE: docs/snippets/myst/grid-card-columns.txt
================================================
::::{grid} 2
:::{grid-item-card}
:columns: auto
A
:::
:::{grid-item-card}
:columns: 12 6 6 6
B
:::
:::{grid-item-card}
:columns: 12
C
:::
::::
================================================
FILE: docs/snippets/myst/grid-card.txt
================================================
::::{grid} 2
:::{grid-item-card} Title 1
A
:::
:::{grid-item-card} Title 2
B
:::
::::
================================================
FILE: docs/snippets/myst/grid-gutter.txt
================================================
::::{grid} 2
:gutter: 1
:::{grid-item-card}
A
:::
:::{grid-item-card}
B
:::
::::
::::{grid} 2
:gutter: 3 3 4 5
:::{grid-item-card}
A
:::
:::{grid-item-card}
B
:::
::::
================================================
FILE: docs/snippets/myst/grid-nested.txt
================================================
::::::{grid} 1 1 2 2
:gutter: 1
:::::{grid-item}
::::{grid} 1 1 1 1
:gutter: 1
:::{grid-item-card} Item 1.1
Multi-line
content
:::
:::{grid-item-card} Item 1.2
Content
:::
::::
:::::
:::::{grid-item}
::::{grid} 1 1 1 1
:gutter: 1
:::{grid-item-card} Item 2.1
Content
:::
:::{grid-item-card} Item 2.2
Content
:::
:::{grid-item-card} Item 2.3
Content
:::
::::
:::::
::::::
================================================
FILE: docs/snippets/myst/icon-fontawesome.txt
================================================
An icon {fas}`spinner;sd-bg-primary sd-bg-text-primary`, some more text.
================================================
FILE: docs/snippets/myst/icon-material-design.txt
================================================
- A regular icon: {material-regular}`data_exploration;2em`, some more text
- A coloured regular icon: {material-regular}`settings;3em;sd-text-success`, some more text.
- A coloured outline icon: {material-outlined}`settings;3em;sd-text-success`, some more text.
- A coloured sharp icon: {material-sharp}`settings;3em;sd-text-success`, some more text.
- A coloured round icon: {material-round}`settings;3em;sd-text-success`, some more text.
- A coloured two-tone icon: {material-twotone}`settings;3em;sd-text-success`, some more text.
- A fixed size icon: {material-regular}`data_exploration;24px`, some more text.
================================================
FILE: docs/snippets/myst/icon-octicon.txt
================================================
A coloured icon: {octicon}`report;1em;sd-text-info`, some more text.
================================================
FILE: docs/snippets/myst/tab-basic.txt
================================================
::::{tab-set}
:::{tab-item} Label1
Content 1
:::
:::{tab-item} Label2
Content 2
:::
::::
================================================
FILE: docs/snippets/myst/tab-code-set.txt
================================================
````{tab-set-code}
```{literalinclude} ./snippet.py
:language: python
```
```{code-block} javascript
a = 1;
```
````
================================================
FILE: docs/snippets/myst/tab-options.txt
================================================
::::{tab-set}
:class: class-set
:::{tab-item} **Label**
:name: target
:selected:
:class-container: class-container
:class-label: class-label
:class-content: class-content
Content
:::
::::
{ref}`target`, {ref}`text <target>`
================================================
FILE: docs/snippets/myst/tab-sync.txt
================================================
::::{tab-set}
:sync-group: category
:::{tab-item} Label1
:sync: key1
Content 1
:::
:::{tab-item} Label2
:sync: key2
Content 2
:::
::::
::::{tab-set}
:sync-group: category
:::{tab-item} Label1
:sync: key1
Content 1
:::
:::{tab-item} Label2
:sync: key2
Content 2
:::
::::
================================================
FILE: docs/snippets/rst/article-info.txt
================================================
.. article-info::
:avatar: images/ebp-logo.png
:avatar-link: https://executablebooks.org/
:avatar-outline: muted
:author: Executable Books
:date: Jul 24, 2021
:read-time: 5 min read
:class-container: sd-p-2 sd-outline-muted sd-rounded-1
================================================
FILE: docs/snippets/rst/badge-basic.txt
================================================
:bdg:`plain badge`
:bdg-primary:`primary`, :bdg-primary-line:`primary-line`
:bdg-secondary:`secondary`, :bdg-secondary-line:`secondary-line`
:bdg-success:`success`, :bdg-success-line:`success-line`
:bdg-info:`info`, :bdg-info-line:`info-line`
:bdg-warning:`warning`, :bdg-warning-line:`warning-line`
:bdg-danger:`danger`, :bdg-danger-line:`danger-line`
:bdg-light:`light`, :bdg-light-line:`light-line`
:bdg-muted:`muted`, :bdg-muted-line:`muted-line`
:bdg-dark:`dark`, :bdg-dark-line:`dark-line`
:bdg-white:`white`, :bdg-white-line:`white-line`
:bdg-black:`black`, :bdg-black-line:`black-line`
================================================
FILE: docs/snippets/rst/badge-link.txt
================================================
:bdg-link-primary:`https://example.com`
:bdg-link-primary-line:`explicit title <https://example.com>`
================================================
FILE: docs/snippets/rst/button-link.txt
================================================
.. button-link:: https://example.com
.. button-link:: https://example.com
Button text
.. button-link:: https://example.com
:color: primary
:shadow:
.. button-link:: https://example.com
:color: primary
:outline:
.. button-link:: https://example.com
:color: secondary
:expand:
================================================
FILE: docs/snippets/rst/card-basic.txt
================================================
.. card:: Card Title
Card content
================================================
FILE: docs/snippets/rst/card-carousel.txt
================================================
.. card-carousel:: 2
.. card:: card 1
content
.. card:: card 2
Longer
content
.. card:: card 3
.. card:: card 4
.. card:: card 5
.. card:: card 6
================================================
FILE: docs/snippets/rst/card-head-foot.txt
================================================
.. card:: Card Title
Header
^^^
Card content
+++
Footer
================================================
FILE: docs/snippets/rst/card-images.txt
================================================
.. grid:: 2 3 3 4
.. grid-item::
.. card:: Title
:img-background: images/particle_background.jpg
:class-card: sd-text-black
:img-alt: my text
Text
.. grid-item-card:: Title
:img-top: images/particle_background.jpg
:img-alt:
Header
^^^
Content
+++
Footer
.. grid-item-card:: Title
:img-bottom: images/particle_background.jpg
Header
^^^
Content
+++
Footer
================================================
FILE: docs/snippets/rst/card-link.txt
================================================
.. _cards-clickable:
Clickable cards
...............
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:
.. card:: Clickable Card (external)
:link: https://example.com
The entire card can be clicked to navigate to https://example.com.
.. card:: Clickable Card (external)
:link: https://example.com
:link-alt: example.com
The entire card can be clicked to navigate to https://example.com.
.. card:: Clickable Card (internal)
:link: cards-clickable
:link-type: ref
The entire card can be clicked to navigate to the ``cards-clickable`` reference target.
.. card:: Clickable Card (internal)
:link: cards-clickable
:link-type: ref
:link-alt: clickable cards
The entire card can be clicked to navigate to the ``cards-clickable`` reference target.
================================================
FILE: docs/snippets/rst/card-title-link.txt
================================================
.. _target:
.. card:: Card Title https://example.com :ref:`link <target>`
Card content
================================================
FILE: docs/snippets/rst/div-basic.txt
================================================
.. div:: sd-text-center sd-font-italic sd-text-primary
Some CSS styled text
================================================
FILE: docs/snippets/rst/dropdown-basic.txt
================================================
.. dropdown::
Dropdown content
.. dropdown:: Dropdown title
Dropdown content
.. dropdown:: Open dropdown
:open:
Dropdown content
================================================
FILE: docs/snippets/rst/dropdown-options.txt
================================================
.. dropdown:: Title
:name: target
:color: info
:icon: alert
:margin: 1
:class-container: class-container
:class-title: class-title
:class-body: class-body
Dropdown content
:ref:`target`, :ref:`text <target>`
================================================
FILE: docs/snippets/rst/grid-basic.txt
================================================
.. grid:: 1 2 3 4
:outline:
.. grid-item::
A
.. grid-item::
B
.. grid-item::
C
.. grid-item::
D
================================================
FILE: docs/snippets/rst/grid-card-columns.txt
================================================
.. grid:: 2
.. grid-item-card::
:columns: auto
A
.. grid-item-card::
:columns: 12 6 6 6
B
.. grid-item-card::
:columns: 12
C
================================================
FILE: docs/snippets/rst/grid-card.txt
================================================
.. grid:: 2
.. grid-item-card:: Title 1
A
.. grid-item-card:: Title 2
B
================================================
FILE: docs/snippets/rst/grid-gutter.txt
================================================
.. grid:: 2
:gutter: 1
.. grid-item-card::
A
.. grid-item-card::
B
.. grid:: 2
:gutter: 3 3 4 5
.. grid-item-card::
A
.. grid-item-card::
B
================================================
FILE: docs/snippets/rst/grid-nested.txt
================================================
.. grid:: 1 1 2 2
:gutter: 1
.. grid-item::
.. grid:: 1 1 1 1
:gutter: 1
.. grid-item-card:: Item 1.1
Multi-line
content
.. grid-item-card:: Item 1.2
Content
.. grid-item::
.. grid:: 1 1 1 1
:gutter: 1
.. grid-item-card:: Item 2.1
Content
.. grid-item-card:: Item 2.2
Content
.. grid-item-card:: Item 2.3
Content
================================================
FILE: docs/snippets/rst/icon-fontawesome.txt
================================================
An icon :fas:`spinner;sd-bg-primary sd-bg-text-primary`, some more text.
================================================
FILE: docs/snippets/rst/icon-material-design.txt
================================================
- A regular icon: :material-regular:`data_exploration;2em`, some more text
- A coloured regular icon: :material-regular:`settings;3em;sd-text-success`, some more text.
- A coloured outline icon: :material-outlined:`settings;3em;sd-text-success`, some more text.
- A coloured sharp icon: :material-sharp:`settings;3em;sd-text-success`, some more text.
- A coloured round icon: :material-round:`settings;3em;sd-text-success`, some more text.
- A coloured two-tone icon: :material-twotone:`settings;3em;sd-text-success`, some more text.
- A fixed size icon: :material-regular:`data_exploration;24px`, some more text.
================================================
FILE: docs/snippets/rst/icon-octicon.txt
================================================
A coloured icon: :octicon:`report;1em;sd-text-info`, some more text.
================================================
FILE: docs/snippets/rst/tab-basic.txt
================================================
.. tab-set::
.. tab-item:: Label1
Content 1
.. tab-item:: Label2
Content 2
================================================
FILE: docs/snippets/rst/tab-code-set.txt
================================================
.. tab-set-code::
.. literalinclude:: ./snippet.py
:language: python
.. code-block:: javascript
a = 1;
================================================
FILE: docs/snippets/rst/tab-options.txt
================================================
.. tab-set::
:class: class-set
.. tab-item:: **Label**
:name: target
:selected:
:class-container: class-container
:class-label: class-label
:class-content: class-content
Content
:ref:`target`, :ref:`text <target>`
================================================
FILE: docs/snippets/rst/tab-sync.txt
================================================
.. tab-set::
:sync-group: category
.. tab-item:: Label1
:sync: key1
Content 1
.. tab-item:: Label2
:sync: key2
Content 2
.. tab-set::
:sync-group: category
.. tab-item:: Label1
:sync: key1
Content 1
.. tab-item:: Label2
:sync: key2
Content 2
================================================
FILE: docs/tabs.md
================================================
(sd-tabs)=
# Tabs
Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy.
Each tab should contain content that is distinct from other tabs in a set.
::::{tab-set}
:::{tab-item} Label1
Content 1
:::
:::{tab-item} Label2
Content 2
:::
::::
`````{dropdown-syntax}
````{tab-set-code}
```{literalinclude} ./snippets/myst/tab-basic.txt
:language: markdown
```
```{literalinclude} ./snippets/rst/tab-basic.txt
:language: rst
```
````
`````
See the [Material Design](https://material.io/components/tabs) description for further details.
## Synchronised Tabs
The Selection of tab items can be synchronised across multiple tab-sets.
For a `tab-item` to be synchronisable, add the `sync` option to the `tab-item` directive with a key unique to that set.
Now when you select a tab in one set, tabs in other sets with the same key will be selected.
:::{note}
Synchronisation requires that JavaScript is enabled.
:::
:::{versionadded} 0.6.0
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`.
You can also add an [HTML query string](https://en.wikipedia.org/wiki/Query_string) to the end of the page's URL,
to automatically select a tab with a specific key across all tab-sets of the group, for example:
- [`?category=key1#synchronised-tabs`](?category=key1#synchronised-tabs){.external}
- [`?category=key2#synchronised-tabs`](?category=key2#synchronised-tabs){.external}
:::
::::{tab-set}
:sync-group: category
:::{tab-item} Label1
:sync: key1
Content 1
:::
:::{tab-item} Label2
:sync: key2
Content 2
:::
::::
::::{tab-set}
:sync-group: category
:::{tab-item} Label1
:sync: key1
Content 1
:::
:::{tab-item} Label2
:sync: key2
Content 2
:::
::::
`````{dropdown-syntax}
````{tab-set-code}
```{literalinclude} ./snippets/myst/tab-sync.txt
:language: markdown
```
```{literalinclude} ./snippets/rst/tab-sync.txt
:language: rst
```
````
`````
## Tabbed code examples
The `tab-set-code` directive provides a shorthand for synced code examples.
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`.
Tabs will be labelled and synchronised by the `language` attribute (in upper-case).
:::{versionadded} 0.6.0
You can also add an [HTML query string](https://en.wikipedia.org/wiki/Query_string) to the end of the page's URL,
to automatically select a tab with a specific code across all tab-sets of the group, for example:
- [`?code=markdown#tabbed-code-examples`](?code=markdown#tabbed-code-examples){.external}
- [`?code=rst#tabbed-code-examples`](?code=rst#tabbed-code-examples){.external}
:::
```````{tab-set}
:sync-group: code
``````{tab-item} Markdown
:sync: markdown
````{literalinclude} ./snippets/myst/tab-code-set.txt
:language: markdown
````
``````
``````{tab-item} RST
:sync: rst
````{literalinclude} ./snippets/rst/tab-code-set.txt
:language: rst
````
``````
```````
## Tabs in other components
Tabs can be nested inside other components, such as inside [dropdowns](./dropdowns.md) or within [grid items](./grids.md).
:::::{dropdown} Tabs in dropdown
:open:
Paragraph
::::{tab-set}
:::{tab-item} Label1
:sync: label-1
Content 1
:::
:::{tab-item} Label2
:sync: label-2
Content 2
:::
::::
:::::
::::::{grid} 1 1 2 2
:::::{grid-item}
:outline:
Initial paragraph
::::{tab-set}
:::{tab-item} Label1
:sync: label-1
Content 1
:::
:::{tab-item} Label2
:sync: label-2
Content 2
:::
::::
:::::
:::::{grid-item}
:outline:
::::{tab-set}
:::{tab-item} Label1
:sync: label-1
Content 1
:::
:::{tab-item} Label2
:sync: label-2
Content 2
:::
::::
Ending paragraph
:::::
::::::
Tab set, within tab set:
::::::{tab-set}
:::::{tab-item} Label 1
::::{tab-set}
:::{tab-item} Label 1a
Content 1a
:::
:::{tab-item} Label 1b
Content 1b
:::
::::
:::::
:::::{tab-item} Label 2
Content 2
:::::
::::::
## `tab-set` options
sync-group
: A group name for synchronised tab sets (default `tab`).
class
: Additional CSS classes for the container element.
## `tab-set-code` options
no-sync
: Disable synchronisation of tabs.
sync-group
: A group name for synchronised tab sets (default `code`).
class-set
: Additional CSS classes for the set container element.
class-item
: Additional CSS classes for the item container element.
## `tab-item` options
selected
: a flag indicating whether the tab should be selected by default.
sync
: A key that is used to sync the selected tab across multiple tab-sets.
name
: Set a reference-able name for the dropdown container.
class-container
: Additional CSS classes for the container element.
class-label
: Additional CSS classes for the label element.
class-content
: Additional CSS classes for the content element.
================================================
FILE: git_rebase_theme_branches.sh
================================================
#!/bin/sh
set -e
fmt='
git checkout %(refname)
git rebase main
git push origin HEAD:%(refname:strip=3) --force
'
eval "$(git for-each-ref --shell --format="$fmt" refs/remotes/origin/*-theme)"
git checkout main
================================================
FILE: package.json
================================================
{
"name": "sphinx-design-compiler",
"version": "0.0.1",
"description": "Scripts for compiling the sphinx-design assets",
"scripts": {
"css": "sass --style=compressed --no-source-map style/index.scss sphinx_design/compiled/style.min.css"
},
"dependencies": {
"sass": "^1.35.2"
}
}
================================================
FILE: pyproject.toml
================================================
[build-system]
requires = ["flit_core >=3.4,<4"]
build-backend = "flit_core.buildapi"
[project]
name = "sphinx_design"
dynamic = ["version"]
description = "A sphinx extension for designing beautiful, view size responsive web components."
authors = [{name = "Chris Sewell", email = "chrisj_sewell@hotmail.com"}]
readme = "README.md"
license = {file = "LICENSE"}
classifiers = [
"Development Status :: 4 - Beta",
"Framework :: Sphinx :: Extension",
"Intended Audience :: Developers",
"License :: OSI Approved :: MIT License",
"Programming Language :: Python :: 3",
"Programming Language :: Python :: 3.11",
"Programming Language :: Python :: 3.12",
"Programming Language :: Python :: 3.13",
"Programming Language :: Python :: 3.14",
"Programming Language :: Python :: Implementation :: CPython",
"Topic :: Software Development :: Libraries :: Python Modules",
"Topic :: Text Processing :: Markup",
"Topic :: Text Processing :: Markup :: Markdown",
"Topic :: Text Processing :: Markup :: reStructuredText",
]
keywords = ["sphinx", "extension", "material design", "web components"]
requires-python = ">=3.11"
dependencies = ["sphinx>=7,<10"]
[project.urls]
Homepage = "https://github.com/executablebooks/sphinx-design"
Documentation = "https://sphinx-design.readthedocs.io"
[project.optional-dependencies]
code-style = ["pre-commit>=3,<4"]
rtd = ["myst-parser>=4,<6"]
testing = [
"myst-parser>=4,<6",
"pytest~=8.3",
"pytest-cov",
"pytest-regressions",
"defusedxml",
]
testing-no-myst = [
"pytest~=8.3",
"pytest-cov",
"pytest-regressions",
"defusedxml",
]
theme-furo = ["furo~=2024.7.18"]
theme-pydata = ["pydata-sphinx-theme~=0.15.2"]
theme-rtd = ["sphinx-rtd-theme~=2.0"]
theme-sbt = ["sphinx-book-theme~=1.1"]
theme-im = ["sphinx-immaterial~=0.12.2"]
[dependency-groups]
mypy = ["mypy==1.19.1"]
ruff = ["ruff==0.14.11"]
[tool.flit.sdist]
exclude = [
"docs/",
"style/",
"tests/",
]
[tool.ruff.lint]
extend-select = [
"B", # flake8-bugbear
"C4", # flake8-comprehensions
# "FURB",# refurb (modernising code)
"I", # isort
"ICN", # flake8-import-conventions
"ISC", # flake8-implicit-str-concat
"N", # pep8-naming
"PERF",# perflint (performance anti-patterns)
"PGH", # pygrep-hooks
"PIE", # flake8-pie
"PL", # pylint
"PTH", # flake8-use-pathlib
"RUF", # Ruff-specific rules
"SIM", # flake8-simplify
"UP", # pyupgrade
"T20", # flake8-print
]
extend-ignore = [
"ISC001", # implicit-str-concat
"PLR2004",
"RUF012",
]
# [tool.ruff.lint.per-file-ignores]
# "..." = ["N801"]
[tool.ruff.lint.isort]
force-sort-within-sections = true
[tool.mypy]
show_error_codes = true
warn_unused_ignores = true
warn_redundant_casts = true
no_implicit_optional = true
strict_equality = true
[[tool.mypy.overrides]]
module = ["docutils.*"]
ignore_missing_imports = true
================================================
FILE: sphinx_design/__init__.py
================================================
"""A sphinx extension for designing beautiful, view size responsive web components."""
from typing import TYPE_CHECKING
__version__ = "0.7.0"
if TYPE_CHECKING:
from sphinx.application import Sphinx
def setup(app: "Sphinx") -> dict:
from .extension import setup_extension # noqa: PLC0415
setup_extension(app)
return {
"version": __version__,
"parallel_read_safe": True,
"parallel_write_safe": True,
}
================================================
FILE: sphinx_design/_compat.py
================================================
"""Helpers for cross compatibility across dependency versions."""
from collections.abc import Callable, Iterable
from importlib import resources
from docutils.nodes import Element
def findall(node: Element) -> Callable[..., Iterable[Element]]:
"""Iterate through"""
# findall replaces traverse in docutils v0.18
# note a difference is that findall is an iterator
return getattr(node, "findall", node.traverse)
def read_text(module: resources.Package, filename: str) -> str:
return resources.files(module).joinpath(filename).read_text()
================================================
FILE: sphinx_design/article_info.py
================================================
from docutils import nodes
from docutils.parsers.rst import directives
from sphinx.application import Sphinx
from .icons import get_octicon
from .shared import SEMANTIC_COLORS, SdDirective, create_component, make_choice
def setup_article_info(app: Sphinx):
"""Setup the article information components."""
app.add_directive("article-info", ArticleInfoDirective)
class ArticleInfoDirective(SdDirective):
""" """
has_content = False
required_arguments = 0
optional_arguments = 0
option_spec = {
"avatar": directives.uri,
"avatar-alt": directives.unchanged,
"avatar-link": directives.uri,
"avatar-outline": make_choice(SEMANTIC_COLORS),
"author": directives.unchanged_required,
"date": directives.unchanged_required,
"read-time": directives.unchanged_required,
"class-container": directives.class_option,
"class-avatar": directives.class_option,
}
def _parse_text(
self, text: str, icon: nodes.Node | None = None, parse: bool = False
) -> nodes.Node:
"""Parse the text."""
if not parse:
output = ([icon] if icon else []) + [nodes.Text(text)]
else:
text_nodes, _ = self.state.inline_text(text, self.lineno)
text_nodes = ([icon] if icon else []) + text_nodes
# note certain nodes (like references) need to be nested in a TextElement node
# (e.g. a pargraph)
para = nodes.paragraph("", "", *text_nodes, classes=["sd-p-0", "sd-m-0"])
self.set_source_info(para)
output = [para]
return output
def run_with_defaults(self) -> list[nodes.Node]: # noqa: PLR0915
parse_fields = True # parse field text
top_grid = create_component(
"grid-container",
[
"sd-container-fluid",
"sd-sphinx-override",
"sd-p-0",
"sd-mt-2",
"sd-mb-4",
*self.options.get("class-container", []),
],
)
self.set_source_info(top_grid)
top_row = create_component(
"grid-row",
["sd-row", "sd-row-cols-2", "sd-gx-2", "sd-gy-1"],
)
self.set_source_info(top_row)
top_grid += top_row
avatar_uri = self.options.get("avatar")
if avatar_uri:
# TODO only in html (hide in latex)
avatar_column = create_component(
"grid-item",
["sd-col", "sd-col-auto", "sd-d-flex-row", "sd-align-minor-center"],
)
self.set_source_info(avatar_column)
avatar_classes = ["sd-avatar-sm"]
if "avatar-outline" in self.options:
avatar_classes.append(f"sd-outline-{self.options['avatar-outline']}")
if "class-avatar" in self.options:
avatar_classes += self.options["class-avatar"]
avatar_image = nodes.image(
"",
uri=avatar_uri,
alt=self.options.get("avatar-alt", ""),
classes=avatar_classes,
)
self.set_source_info(avatar_image)
if self.options.get("avatar-link"):
avatar_link = nodes.reference(
"", "", refuri=self.options.get("avatar-link")
)
avatar_link += avatar_image
avatar_image = avatar_link
avatar_column += avatar_image
top_row += avatar_column
info_column = create_component(
"grid-item",
["sd-col", "sd-d-flex-row", "sd-align-minor-center"],
)
self.set_source_info(info_column)
top_row += info_column
info_grid = create_component(
"grid-container",
[
"sd-container-fluid",
"sd-sphinx-override",
],
)
self.set_source_info(info_grid)
info_column += info_grid
info_row = create_component(
"grid-row",
[
"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",
],
)
self.set_source_info(info_row)
info_grid += info_row
author_text = self.options.get("author")
if author_text:
author_column = create_component(
"grid-item",
["sd-col", "sd-col-auto", "sd-d-flex-row", "sd-align-minor-center"],
)
self.set_source_info(author_column)
author_nodes = self._parse_text(author_text, parse=parse_fields)
author_column.extend(author_nodes)
info_row += author_column
date_text = self.options.get("date")
if date_text:
date_column = create_component(
"grid-item",
["sd-col", "sd-col-auto", "sd-d-flex-row", "sd-align-minor-center"],
)
self.set_source_info(date_column)
date_icon = nodes.raw(
"",
nodes.Text(get_octicon("calendar", height="16px")),
classes=["sd-pr-2"],
format="html",
)
date_nodes = self._parse_text(date_text, icon=date_icon, parse=parse_fields)
date_column.extend(date_nodes)
info_row += date_column
read_time_text = self.options.get("read-time")
if read_time_text:
read_time_column = create_component(
"grid-item",
["sd-col", "sd-col-auto", "sd-d-flex-row", "sd-align-minor-center"],
)
self.set_source_info(read_time_column)
read_time_icon = nodes.raw(
"",
nodes.Text(get_octicon("clock", height="16px")),
classes=["sd-pr-2"],
format="html",
)
read_time_nodes = self._parse_text(
read_time_text, icon=read_time_icon, parse=parse_fields
)
read_time_column.extend(read_time_nodes)
info_row += read_time_column
return [top_grid]
================================================
FILE: sphinx_design/badges_buttons.py
================================================
from docutils import nodes
from docutils.parsers.rst import directives
from sphinx import addnodes
from sphinx.application import Sphinx
from sphinx.util.docutils import ReferenceRole, SphinxRole
from sphinx_design.shared import SEMANTIC_COLORS, SdDirective, make_choice, text_align
ROLE_NAME_BADGE_PREFIX = "bdg"
ROLE_NAME_LINK_PREFIX = "bdg-link"
ROLE_NAME_REF_PREFIX = "bdg-ref"
DIRECTIVE_NAME_BUTTON_LINK = "button-link"
DIRECTIVE_NAME_BUTTON_REF = "button-ref"
# TODO defining arbitrary classes for badges
# (maybe split text right of last `;`, then split that by comma)
# in particular for rounded-pill class etc
def setup_badges_and_buttons(app: Sphinx) -> None:
"""Setup the badge components."""
app.add_role(ROLE_NAME_BADGE_PREFIX, BadgeRole())
app.add_role(ROLE_NAME_LINK_PREFIX, LinkBadgeRole())
app.add_role(ROLE_NAME_REF_PREFIX, XRefBadgeRole())
for color in SEMANTIC_COLORS:
app.add_role("-".join((ROLE_NAME_BADGE_PREFIX, color)), BadgeRole(color))
app.add_role(
"-".join((ROLE_NAME_BADGE_PREFIX, color, "line")),
BadgeRole(color, outline=True),
)
app.add_role("-".join((ROLE_NAME_LINK_PREFIX, color)), LinkBadgeRole(color))
app.add_role(
"-".join((ROLE_NAME_LINK_PREFIX, color, "line")),
LinkBadgeRole(color, outline=True),
)
app.add_role("-".join((ROLE_NAME_REF_PREFIX, color)), XRefBadgeRole(color))
app.add_role(
"-".join((ROLE_NAME_REF_PREFIX, color, "line")),
XRefBadgeRole(color, outline=True),
)
app.add_directive(DIRECTIVE_NAME_BUTTON_LINK, ButtonLinkDirective)
app.add_directive(DIRECTIVE_NAME_BUTTON_REF, ButtonRefDirective)
def create_bdg_classes(color: str | None, outline: bool) -> list[str]:
"""Create the badge classes."""
classes = [
"sd-sphinx-override",
"sd-badge",
]
if color is None:
return classes
if outline:
classes.extend([f"sd-outline-{color}", f"sd-text-{color}"])
else:
classes.extend([f"sd-bg-{color}", f"sd-bg-text-{color}"])
return classes
class BadgeRole(SphinxRole):
"""Role to display a badge."""
def __init__(self, color: str | None = None, *, outline: bool = False) -> None:
super().__init__()
self.color = color
self.outline = outline
def run(self) -> tuple[list[nodes.Node], list[nodes.system_message]]:
"""Run the role."""
node = nodes.inline(
self.rawtext,
self.text,
classes=create_bdg_classes(self.color, self.outline),
)
self.set_source_info(node)
return [node], []
class LinkBadgeRole(ReferenceRole):
"""Role to display a badge with an external link."""
def __init__(self, color: str | None = None, *, outline: bool = False) -> None:
super().__init__()
self.color = color
self.outline = outline
def run(self) -> tuple[list[nodes.Node], list[nodes.system_message]]:
"""Run the role."""
node = nodes.reference(
self.rawtext,
refuri=self.target,
classes=create_bdg_classes(self.color, self.outline),
)
# TODO open in new tab
self.set_source_info(node)
# if self.target != self.title:
# node["reftitle"] = self.target
node += nodes.inline(self.title, self.title)
return [node], []
class XRefBadgeRole(ReferenceRole):
"""Role to display a badge with an internal link."""
def __init__(self, color: str | None = None, *, outline: bool = False) -> None:
super().__init__()
self.color = color
self.outline = outline
def run(self) -> tuple[list[nodes.Node], list[nodes.system_message]]:
"""Run the role."""
options = {
"classes": create_bdg_classes(self.color, self.outline),
"reftarget": self.target,
"refdoc": self.env.docname,
"refdomain": "",
"reftype": "any",
"refexplicit": self.has_explicit_title,
"refwarn": True,
}
node = addnodes.pending_xref(self.rawtext, **options)
self.set_source_info(node)
node += nodes.inline(self.title, self.title, classes=["xref", "any"])
return [node], []
class _ButtonDirective(SdDirective):
"""A base button directive."""
required_arguments = 1
optional_arguments = 0
final_argument_whitespace = True
has_content = True
option_spec = {
"color": make_choice(SEMANTIC_COLORS),
"outline": directives.flag,
"align": text_align,
# expand to fit parent width
"expand": directives.flag,
# make parent also clickable
"click-parent": directives.flag,
"tooltip": directives.unchanged_required,
"shadow": directives.flag,
# ref button only
"ref-type": make_choice(["any", "ref", "doc", "myst"]),
"class": directives.class_option,
}
def create_ref_node(
self, rawtext: str, target: str, explicit_title: bool, classes: list[str]
) -> nodes.Node:
"""Create the reference node."""
raise NotImplementedError
def run_with_defaults(self) -> list[nodes.Node]:
rawtext = self.arguments[0]
target = directives.uri(rawtext)
classes = ["sd-sphinx-override", "sd-btn", "sd-text-wrap"]
if "color" in self.options:
if "outline" in self.options:
classes.append(f"sd-btn-outline-{self.options['color']}")
else:
classes.append(f"sd-btn-{self.options['color']}")
if "click-parent" in self.options:
classes.append("sd-stretched-link")
if "shadow" in self.options:
classes.append("sd-shadow-sm")
if "class" in self.options:
classes.extend(self.options["class"])
node = self.create_ref_node(rawtext, target, bool(self.content), classes)
# TODO open in new tab
self.set_source_info(node)
if "tooltip" in self.options:
node["reftitle"] = self.options["tooltip"] # TODO escape HTML
if self.content:
textnodes, _ = self.state.inline_text(
"\n".join(self.content), self.lineno + self.content_offset
)
content = nodes.inline("", "")
content.extend(textnodes)
else:
content = nodes.inline(target, target)
node.append(content)
if "expand" in self.options:
grid_container = nodes.inline(classes=["sd-d-grid"])
self.set_source_info(grid_container)
grid_container += node
node = grid_container
# `visit_reference` requires that a reference be inside a `TextElement` parent
container = nodes.paragraph(classes=self.options.get("align", []))
self.set_source_info(container)
container += node
return [container]
class ButtonLinkDirective(_ButtonDirective):
"""A button directive with an external link."""
def create_ref_node(
self, rawtext: str, target: str, explicit_title: bool, classes: list[str]
) -> nodes.Node:
"""Create the reference node."""
return nodes.reference(
rawtext,
refuri=target,
classes=classes,
)
class ButtonRefDirective(_ButtonDirective):
"""A button directive with an internal link."""
def create_ref_node(
self, rawtext: str, target: str, explicit_title: bool, classes: list[str]
) -> nodes.Node:
"""Create the reference node."""
ref_type = self.options.get("ref-type", "any")
options = {
# TODO the presence of classes raises an error if the link cannot be found
"classes": classes,
"reftarget": target,
"refdoc": self.env.docname,
"refdomain": "std" if ref_type in {"ref", "doc"} else "",
"reftype": ref_type,
"refexplicit": explicit_title,
"refwarn": True,
}
return addnodes.pending_xref(rawtext, **options)
================================================
FILE: sphinx_design/cards.py
================================================
import re
from typing import NamedTuple
from docutils import nodes
from docutils.parsers.rst import directives
from docutils.statemachine import StringList
from sphinx import addnodes
from sphinx.application import Sphinx
from sphinx.util.docutils import SphinxDirective
from sphinx.util.logging import getLogger
from ._compat import findall
from .shared import (
WARNING_TYPE,
PassthroughTextElement,
SdDirective,
create_component,
is_component,
make_choice,
margin_option,
text_align,
)
LOGGER = getLogger(__name__)
DIRECTIVE_NAME_CARD = "card"
DIRECTIVE_NAME_CAROUSEL = "card-carousel"
REGEX_HEADER = re.compile(r"^\^{3,}\s*$")
REGEX_FOOTER = re.compile(r"^\+{3,}\s*$")
def setup_cards(app: Sphinx) -> None:
"""Setup the card components."""
app.add_directive(DIRECTIVE_NAME_CARD, CardDirective)
app.add_directive(DIRECTIVE_NAME_CAROUSEL, CardCarouselDirective)
class CardContent(NamedTuple):
"""Split card into header (optional), body, footer (optional).
(offset, content)
"""
body: tuple[int, StringList]
header: tuple[int, StringList] | None = None
footer: tuple[int, StringList] | None = None
class CardDirective(SdDirective):
"""A card component."""
has_content = True
required_arguments = 0
optional_arguments = 1 # card title
final_argument_whitespace = True
option_spec = {
"width": make_choice(["auto", "25%", "50%", "75%", "100%"]),
"margin": margin_option,
"text-align": text_align,
"img-top": directives.uri,
"img-bottom": directives.uri,
"img-background": directives.uri,
"img-alt": directives.unchanged,
"link": directives.uri,
"link-type": make_choice(["url", "any", "ref", "doc"]),
"link-alt": directives.unchanged,
"shadow": make_choice(["none", "sm", "md", "lg"]),
"class-card": directives.class_option,
"class-header": directives.class_option,
"class-body": directives.class_option,
"class-title": directives.class_option,
"class-footer": directives.class_option,
"class-img-top": directives.class_option,
"class-img-bottom": directives.class_option,
}
def run_with_defaults(self) -> list[nodes.Node]:
return [self.create_card(self, self.arguments, self.options)]
@classmethod
def create_card( # noqa: PLR0915
cls, inst: SphinxDirective, arguments: list | None, options: dict
) -> nodes.Node:
"""Run the directive."""
# TODO better degradation for latex
card_classes = ["sd-card", "sd-sphinx-override"]
if "width" in options:
card_classes += [f"sd-w-{options['width'].rstrip('%')}"]
card_classes += options.get("margin", ["sd-mb-3"])
card_classes += [f"sd-shadow-{options.get('shadow', 'sm')}"]
if "link" in options:
card_classes += ["sd-card-hover"]
card = create_component(
"card",
card_classes
+ options.get("text-align", [])
+ options.get("class-card", []),
)
inst.set_source_info(card)
img_alt = options.get("img-alt") or ""
container = card
if "img-background" in options:
card.append(
nodes.image(
uri=options["img-background"],
classes=["sd-card-img"],
alt=img_alt,
)
)
overlay = create_component("card-overlay", ["sd-card-img-overlay"])
inst.set_source_info(overlay)
card += overlay
container = overlay
if "img-top" in options:
image_top = nodes.image(
"",
uri=options["img-top"],
alt=img_alt,
classes=["sd-card-img-top", *options.get("class-img-top", [])],
)
container.append(image_top)
components = cls.split_content(inst.content, inst.content_offset)
if components.header:
container.append(
cls._create_component(
inst, "header", options, components.header[0], components.header[1]
)
)
body = cls._create_component(
inst, "body", options, components.body[0], components.body[1]
)
if arguments:
title = create_component(
"card-title",
[
"sd-card-title",
"sd-font-weight-bold",
*options.get("class-title", []),
],
)
textnodes, _ = inst.state.inline_text(arguments[0], inst.lineno)
title_container = PassthroughTextElement()
title_container.extend(textnodes)
inst.set_source_info(title_container)
title.append(title_container)
body.insert(0, title)
container.append(body)
if components.footer:
container.append(
cls._create_component(
inst, "footer", options, components.footer[0], components.footer[1]
)
)
if "img-bottom" in options:
image_bottom = nodes.image(
"",
uri=options["img-bottom"],
alt=img_alt,
classes=["sd-card-img-bottom", *options.get("class-img-bottom", [])],
)
container.append(image_bottom)
if "link" in options:
link_container = PassthroughTextElement()
_classes = ["sd-stretched-link", "sd-hide-link-text"]
_rawtext = options.get("link-alt") or options["link"]
if options.get("link-type", "url") == "url":
link = nodes.reference(
_rawtext,
"",
nodes.inline(_rawtext, _rawtext),
refuri=options["link"],
classes=_classes,
)
else:
options = {
# TODO the presence of classes raises an error if the link cannot be found
"classes": _classes,
"reftarget": options["link"],
"refdoc": inst.env.docname,
"refdomain": "" if options["link-type"] == "any" else "std",
"reftype": options["link-type"],
"refexplicit": "link-alt" in options,
"refwarn": True,
}
link = addnodes.pending_xref(
_rawtext, nodes.inline(_rawtext, _rawtext), **options
)
inst.set_source_info(link)
link_container += link
container.append(link_container)
return card
@staticmethod
def split_content(content: StringList, offset: int) -> CardContent:
"""Split the content into header, body and footer."""
header_index, footer_index, header, footer = None, None, None, None
body_offset = offset
for index, line in enumerate(content):
# match the first occurrence of a header regex
if (header_index is None) and REGEX_HEADER.match(line):
header_index = index
# match the final occurrence of a footer regex
if REGEX_FOOTER.match(line):
footer_index = index
if header_index is not None:
header = (offset, content[:header_index])
body_offset += header_index + 1
if footer_index is not None:
footer = (offset + footer_index + 1, content[footer_index + 1 :])
body = (
body_offset,
content[
(header_index + 1 if header_index is not None else None) : footer_index
],
)
return CardContent(body, header, footer)
@classmethod
def _create_component(
cls,
inst: SphinxDirective,
name: str,
options: dict,
offset: int,
content: StringList,
) -> nodes.container:
"""Create the header, body, or footer."""
component = create_component(
f"card-{name}", [f"sd-card-{name}", *options.get(f"class-{name}", [])]
)
inst.set_source_info(component) # TODO set proper lines
inst.state.nested_parse(content, offset, component)
cls.add_card_child_classes(component)
return component
@staticmethod
def add_card_child_classes(node):
"""Add classes to specific child nodes."""
for para in findall(node)(nodes.paragraph):
para["classes"] = [*para.get("classes", []), "sd-card-text"]
# for title in findall(node)(nodes.title):
# title["classes"] = ([] if "classes" not in title else title["classes"]) + [
# "sd-card-title"
# ]
class CardCarouselDirective(SdDirective):
"""A component, which is a container for cards in a single scrollable row."""
has_content = True
required_arguments = 1 # columns
optional_arguments = 0
option_spec = {
"class": directives.class_option,
}
def run_with_defaults(self) -> list[nodes.Node]:
self.assert_has_content()
try:
cols = make_choice([str(i) for i in range(1, 13)])(
self.arguments[0].strip()
)
except ValueError as exc:
raise self.error(f"Invalid directive argument: {exc}") from exc
container = create_component(
"card-carousel",
[
"sd-sphinx-override",
"sd-cards-carousel",
f"sd-card-cols-{cols}",
*self.options.get("class", []),
],
)
self.set_source_info(container)
self.state.nested_parse(self.content, self.content_offset, container)
for item in container.children:
if not is_component(item, "card"):
LOGGER.warning(
"All children of a 'card-carousel' "
f"should be 'card' [{WARNING_TYPE}.card]",
location=item,
type=WARNING_TYPE,
subtype="card",
)
break
return [container]
================================================
FILE: sphinx_design/compiled/__init__.py
================================================
================================================
FILE: sphinx_design/compiled/material-icons_LICENSE
================================================
Copyright 2024 Google
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
================================================
FILE: sphinx_design/compiled/material-icons_VERSION.txt
================================================
using github.com/google/material-design-icons
v4.0.0-116-ge9da21
e9da2194e65080a829d670ae39a99c7b5fc09548
================================================
FILE: sphinx_design/compiled/material_outlined.json
================================================
{
"auto_delete": {
"name": "auto_delete",
"keywords": [
"alert"
],
"heights": {
"24": {
"width": 24,
"path": "<g><rect fill=\"none\" height=\"24\" width=\"24\"></rect></g><g><g><polygon points=\"15,2 11.5,2 10.5,1 5.5,1 4.5,2 1,2 1,4 15,4\"></polygon><path d=\"M16,9c-0.7,0-1.37,0.1-2,0.29V5H2v12c0,1.1,0.9,2,2,2h5.68c1.12,2.36,3.53,4,6.32,4c3.87,0,7-3.13,7-7 C23,12.13,19.87,9,16,9z M9,16c0,0.34,0.03,0.67,0.08,1H4V7h8v3.26C10.19,11.53,9,13.62,9,16z M16,21c-2.76,0-5-2.24-5-5 s2.24-5,5-5s5,2.24,5,5S18.76,21,16,21z\"></path><polygon points=\"16.5,12 15,12 15,17 18.6,19.1 19.4,17.9 16.5,16.2\"></polygon></g></g>"
},
"20": {
"width": 20,
"path": "<g><rect fill=\"none\" height=\"20\" width=\"20\" x=\"0\"></rect></g><g><g><polygon points=\"13,4 11,4 10,3 6,3 5,4 3,4 3,5 13,5\"></polygon><path d=\"M12.5,8c-0.17,0-0.33,0.03-0.5,0.05V6H4v8c0,0.55,0.45,1,1,1h3.76c0.81,1.21,2.18,2,3.74,2c2.49,0,4.5-2.01,4.5-4.5 S14.99,8,12.5,8z M8.28,14H5V7h6v1.28C9.26,8.9,8,10.54,8,12.5C8,13.03,8.11,13.53,8.28,14z M12.5,16C10.57,16,9,14.43,9,12.5 S10.57,9,12.5,9s3.5,1.57,3.5,3.5S14.43,16,12.5,16z\"></path><polygon points=\"13,12.42 13,10 12,10 12,13 14.6,14.5 15.1,13.63\"></polygon></g></g>"
}
}
},
"add_alert": {
"name": "add_alert",
"keywords": [
"alert"
],
"heights": {
"24": {
"width": 24,
"path": "<path d=\"M10.01 21.01c0 1.1.89 1.99 1.99 1.99s1.99-.89 1.99-1.99h-3.98zM12 6c2.76 0 5 2.24 5 5v7H7v-7c0-2.76 2.24-5 5-5zm0-4.5c-.83 0-1.5.67-1.5 1.5v1.17C7.36 4.85 5 7.65 5 11v6l-2 2v1h18v-1l-2-2v-6c0-3.35-2.36-6.15-5.5-6.83V3c0-.83-.67-1.5-1.5-1.5zM13 8h-2v3H8v2h3v3h2v-3h3v-2h-3z\"></path>"
}
}
},
"warning": {
"name": "warning",
"keywords": [
"alert"
],
"heights": {
"24": {
"width": 24,
"path": "<path d=\"M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z\"></path>"
}
}
},
"notification_important": {
"name": "notification_important",
"keywords": [
"alert"
],
"heights": {
"24": {
"width": 24,
"path": "<path d=\"M10.01 21.01c0 1.1.89 1.99 1.99 1.99s1.99-.89 1.99-1.99h-3.98zM12 6c2.76 0 5 2.24 5 5v7H7v-7c0-2.76 2.24-5 5-5zm0-4.5c-.83 0-1.5.67-1.5 1.5v1.17C7.36 4.85 5 7.65 5 11v6l-2 2v1h18v-1l-2-2v-6c0-3.35-2.36-6.15-5.5-6.83V3c0-.83-.67-1.5-1.5-1.5zM11 8h2v4h-2zm0 6h2v2h-2z\"></path>"
}
}
},
"error_outline": {
"name": "error_outline",
"keywords": [
"alert"
],
"heights": {
"24": {
"width": 24,
"path": "<path d=\"M11 15h2v2h-2v-2zm0-8h2v6h-2V7zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z\"></path>"
}
}
},
"error": {
"name": "error",
"keywords": [
"alert"
],
"heights": {
"24": {
"width": 24,
"path": "<path d=\"M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z\"></path>"
}
}
},
"warning_amber": {
"name": "warning_amber",
"keywords": [
"alert"
],
"heights": {
"24": {
"width": 24,
"path": "<path d=\"M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z\"></path>"
}
}
},
"recommend": {
"name": "recommend",
"keywords": [
"social"
],
"heights": {
"24": {
"width": 24,
"path": "<g><rect fill=\"none\" height=\"24\" width=\"24\"></rect></g><g><g><path d=\"M12,2C6.48,2,2,6.48,2,12s4.48,10,10,10s10-4.48,10-10S17.52,2,12,2z M12,20c-4.41,0-8-3.59-8-8s3.59-8,8-8s8,3.59,8,8 S16.41,20,12,20z\"></path><path d=\"M17,10h-4.59l0.58-3.41v-0.2c-0.01-0.26-0.12-0.51-0.3-0.7L12,5l-4.6,5c-0.27,0.26-0.42,0.62-0.4,1v5c0,1.1,0.9,2,2,2h5.5 c0.56,0.03,1.08-0.29,1.3-0.8l2.1-4.9c0.08-0.15,0.12-0.33,0.1-0.5V11C18,10.45,17.55,10,17,10z\"></path></g></g>"
}
}
},
"plus_one": {
"name": "plus_one",
"keywords": [
"social"
],
"heights": {
"24": {
"width": 24,
"path": "<path d=\"M0 0h24v24H0V0z\" fill=\"none\"></path><path d=\"M10 8H8v4H4v2h4v4h2v-4h4v-2h-4V8zm4.5-1.92V7.9l2.5-.5V18h2V5l-4.5 1.08z\"></path>"
}
}
},
"mood_bad": {
"name": "mood_bad",
"keywords": [
"social"
],
"heights": {
"24": {
"width": 24,
"path": "<path d=\"M0 0h24v24H0V0z\" fill=\"none\"></path><path d=\"M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 2.5c-2.33 0-4.31 1.46-5.11 3.5h10.22c-.8-2.04-2.78-3.5-5.11-3.5z\"></path>"
}
}
},
"sports_mma": {
"name": "sports_mma",
"keywords": [
"social"
],
"heights": {
"24": {
"width": 24,
"path": "<g><rect fill=\"none\" height=\"24\" width=\"24\"></rect></g><g><g><path d=\"M7,20c0,0.55,0.45,1,1,1h8c0.55,0,1-0.45,1-1v-3H7V20z\"></path><path d=\"M18,7c-0.55,0-1,0.45-1,1V5c0-1.1-0.9-2-2-2H7C5.9,3,5,3.9,5,5v5.8c0,0.13,0.01,0.26,0.04,0.39l0.8,4 c0.09,0.47,0.5,0.8,0.98,0.8H17c0.55,0,1.09-0.44,1.2-0.98l0.77-3.83C18.99,11.06,19,10.93,19,10.8V9V8C19,7.45,18.55,7,18,7z M17,10.6c0,0.13-0.64,3.4-0.64,3.4H7.64c0,0-0.64-3.26-0.64-3.4V5h8v5h2V10.6z\"></path><rect height=\"3\" width=\"6\" x=\"8\" y=\"7\"></rect></g></g>"
},
"20": {
"width": 20,
"path": "<g><rect fill=\"none\" height=\"20\" width=\"20\" x=\"0\"></rect></g><g><g><path d=\"M14,7c-0.55,0-1,0.45-1,1l-0.01-3c0-0.55-0.45-1-1-1H6C5.45,4,5,4.45,5,5v4.57c0.01,0.07,0.01,0.13,0.02,0.2l0.57,2.83 C5.63,12.83,5.84,13,6.08,13h7.85c0.24,0,0.44-0.17,0.49-0.4l0.57-2.83c0.01-0.07,0.01-0.13,0.02-0.2V8C15,7.45,14.55,7,14,7z M13.97,9.73l-0.37,1.87c-0.05,0.23-0.25,0.4-0.49,0.4H6.9c-0.24,0-0.44-0.17-0.49-0.4L6.03,9.73C6.02,9.62,6.01,9.51,6,9.4V5 h5.99L12,8v1h2C14,9,13.99,9.62,13.97,9.73z\"></path><path d=\"M6,15.5C6,15.78,6.22,16,6.5,16h7c0.28,0,0.5-0.22,0.5-0.5V14H6V15.5z\"></path><g><rect height=\"2\" width=\"4\" x=\"7\" y=\"7\"></rect></g></g></g>"
}
}
},
"compost": {
"name": "compost",
"keywords": [
"social"
],
"heights": {
"24": {
"width": 24,
"path": "<rect fill=\"none\" height=\"24\" width=\"24\"></rect><path d=\"M12.87,11.81c-0.23-0.38-0.37-0.83-0.37-1.31C12.5,9.12,13.62,8,15,8l1,0c1.51,0,2-1,2-1s0.55,6-3,6 c-0.49,0-0.94-0.14-1.32-0.38c-0.24,0.64-0.59,1.76-0.76,2.96c1.26,0.22,2.28,0.89,2.77,1.77c1.69-1.17,2.81-3.13,2.81-5.35h3 c0,5.24-4.26,9.5-9.5,9.5S2.5,17.24,2.5,12S6.76,2.5,12,2.5V0l4,4l-4,4V5.5c-3.58,0-6.5,2.92-6.5,6.5c0,2.21,1.11,4.17,2.81,5.35 c0.51-0.92,1.63-1.62,2.98-1.8c-0.09-0.69-0.26-1.42-0.49-2.03C10.45,13.82,10,14,9.5,14c-1.1,0-2-0.9-2-2v-0.99 c0-0.56-0.19-1.09-0.5-1.51c0,0,4.45-0.23,4.5,2.5c0,0.29-0.06,0.56-0.17,0.8C10.91,12.48,10.47,12.2,10,12 c0.58,0.43,1.37,1.37,2,2.6c0.67-1.62,1.68-3.27,3-4.6C14.24,10.52,13.53,11.12,12.87,11.81z\"></path>"
},
"20": {
"width": 20,
"path": "<rect fill=\"none\" height=\"20\" width=\"20\"></rect><g><path d=\"M9.4,10.69c0.07-0.18,0.1-0.37,0.1-0.57C9.5,8,6,8,6,8s0.25,0.27,0.24,1.25l0.01,0.88c0,0.9,0.73,1.62,1.62,1.62 c0.42,0,0.8-0.16,1.09-0.42c0.16,0.4,0.4,1.1,0.42,1.72c-1.06,0.16-1.96,0.73-2.46,1.51C5.46,13.57,4.5,11.9,4.5,10 c0-3.03,2.47-5.5,5.5-5.5h0v2l3.5-3.25L10,0v2h0c-4.42,0-8,3.58-8,8s3.58,8,8,8s8-3.58,8-8h-2.5c0,1.9-0.97,3.57-2.43,4.56 c-0.49-0.77-1.36-1.33-2.39-1.5c0.11-0.95,0.33-1.57,0.63-2.38C11.63,10.88,12,11,12.4,11C15,11,15,6.91,15,6c0,0-0.5,1-2,1h-0.6 c-1.1,0-2,0.9-2,2c0,0.38,0.11,0.74,0.29,1.04c0.14-0.15,1.05-1.09,1.81-1.54c-0.48,0.4-1.78,1.93-2.5,3.71 C9.42,11.08,8.51,10.17,8.25,10C8.69,10.17,9.24,10.58,9.4,10.69z\"></path></g>"
}
}
},
"front_hand": {
"name": "front_hand",
"keywords": [
"social"
],
"heights": {
"24": {
"width": 24,
"path": "<rect fill=\"none\" height=\"24\" width=\"24\"></rect><path d=\"M18.5,8c-0.17,0-0.34,0.02-0.5,0.05V4.5C18,3.12,16.88,2,15.5,2c-0.19,0-0.37,0.02-0.54,0.06C14.75,0.89,13.73,0,12.5,0 c-1.06,0-1.96,0.66-2.33,1.59C9.96,1.53,9.73,1.5,9.5,1.5C8.12,1.5,7,2.62,7,4v0.55C6.84,4.52,6.67,4.5,6.5,4.5C5.12,4.5,4,5.62,4,7 v8.5c0,4.69,3.81,8.5,8.5,8.5s8.5-3.81,8.5-8.5v-5C21,9.12,19.88,8,18.5,8z M19,15.5c0,3.59-2.91,6.5-6.5,6.5S6,19.09,6,15.5V7 c0-0.28,0.22-0.5,0.5-0.5S7,6.72,7,7v5h2V4c0-0.28,0.22-0.5,0.5-0.5S10,3.72,10,4v7h2V2.5C12,2.22,12.22,2,12.5,2S13,2.22,13,2.5V11 h2V4.5C15,4.22,15.22,4,15.5,4S16,4.22,16,4.5v8.92c-1.77,0.77-3,2.53-3,4.58h2c0-1.66,1.34-3,3-3v-4.5c0-0.28,0.22-0.5,0.5-0.5 s0.5,0.22,0.5,0.5V15.5z\"></path>"
},
"20": {
"width": 20,
"path": "<rect fill=\"none\" height=\"20\" width=\"20\"></rect><path d=\"M15.5,6.5c-0.17,0-0.34,0.02-0.5,0.06V3.5c0-1.1-0.9-2-2-2c-0.19,0-0.37,0.03-0.55,0.08C12.26,0.67,11.46,0,10.5,0 C9.62,0,8.88,0.56,8.61,1.34C8.42,1.28,8.21,1.25,8,1.25c-1.1,0-2,0.9-2,2v0.81C5.84,4.02,5.67,4,5.5,4c-1.1,0-2,0.9-2,2v7 c0,3.87,3.13,7,7,7s7-3.13,7-7V8.5C17.5,7.4,16.6,6.5,15.5,6.5z M16,13c0,3.04-2.46,5.5-5.5,5.5S5,16.04,5,13V6 c0-0.28,0.22-0.5,0.5-0.5S6,5.72,6,6v4h1.5V3.25c0-0.28,0.22-0.5,0.5-0.5s0.5,0.22,0.5,0.5V9H10V2c0-0.28,0.22-0.5,0.5-0.5 S11,1.72,11,2v7h1.5V3.5C12.5,3.22,12.72,3,13,3s0.5,0.22,0.5,0.5l0,7.79C12.03,11.88,11,13.32,11,15h1.5c0-1.38,1.12-2.5,2.5-2.5 v-4C15,8.22,15.22,8,15.5,8S16,8.22,16,8.5V13z\"></path>"
}
}
},
"safety_divider": {
"name": "safety_divider",
"keywords": [
"social"
],
"heights": {
"24": {
"width": 24,
"path": "<rect fill=\"none\" height=\"24\" width=\"24\"></rect><path d=\"M11,5h2v14h-2V5z M5,12c1.1,0,2-0.9,2-2c0-1.1-0.9-2-2-2s-2,0.9-2,2C3,11.1,3.9,12,5,12z M7.78,13.58 C6.93,13.21,5.99,13,5,13s-1.93,0.21-2.78,0.58C1.48,13.9,1,14.62,1,15.43L1,16h8l0-0.57C9,14.62,8.52,13.9,7.78,13.58z M19,12 c1.1,0,2-0.9,2-2c0-1.1-0.9-2-2-2s-2,0.9-2,2C17,11.1,17.9,12,19,12z M21.78,13.58C20.93,13.21,19.99,13,19,13s-1.93,0.21-2.78,0.58 C15.48,13.9,15,14.62,15,15.43L15,16h8l0-0.57C23,14.62,22.52,13.9,21.78,13.58z\"></path>"
}
}
},
"groups_2": {
"name": "groups_2",
"keywords": [
"social"
],
"heights": {
"24": {
"width": 24,
"path": "<g><rect fill=\"none\" height=\"24\" width=\"24\"></rect></g><g><g><path d=\"M10.27,12h3.46c0.93,0,1.63-0.83,1.48-1.75l-0.3-1.79C14.67,7.04,13.44,6,12,6S9.33,7.04,9.09,8.47l-0.3,1.79 C8.64,11.17,9.34,12,10.27,12z M11.06,8.79C11.14,8.33,11.53,8,12,8s0.86,0.33,0.94,0.79l0.2,1.21h-2.28L11.06,8.79z\"></path><path d=\"M1.66,11.11c-0.13,0.26-0.18,0.57-0.1,0.88c0.16,0.69,0.76,1.03,1.53,1c0,0,1.49,0,1.95,0c0.83,0,1.51-0.58,1.51-1.29 c0-0.14-0.03-0.27-0.07-0.4c-0.01-0.03-0.01-0.05,0.01-0.08c0.09-0.16,0.14-0.34,0.14-0.53c0-0.31-0.14-0.6-0.36-0.82 c-0.03-0.03-0.03-0.06-0.02-0.1c0.07-0.2,0.07-0.43,0.01-0.65C6.1,8.69,5.71,8.4,5.27,8.38c-0.03,0-0.05-0.01-0.07-0.03 C5.03,8.14,4.72,8,4.37,8C4.07,8,3.8,8.1,3.62,8.26C3.59,8.29,3.56,8.29,3.53,8.28c-0.14-0.06-0.3-0.09-0.46-0.09 c-0.65,0-1.18,0.49-1.24,1.12c0,0.02-0.01,0.04-0.03,0.06c-0.29,0.26-0.46,0.65-0.41,1.05c0.03,0.22,0.12,0.43,0.25,0.6 C1.67,11.04,1.67,11.08,1.66,11.11z\"></path><path d=\"M16.24,13.65c-1.17-0.52-2.61-0.9-4.24-0.9c-1.63,0-3.07,0.39-4.24,0.9C6.68,14.13,6,15.21,6,16.39V18h12v-1.61 C18,15.21,17.32,14.13,16.24,13.65z M8.07,16c0.09-0.23,0.27-0.42,0.49-0.52c1.1-0.49,2.26-0.73,3.43-0.73 c1.18,0,2.33,0.25,3.43,0.73c0.23,0.1,0.4,0.29,0.49,0.52H8.07z\"></path><path d=\"M1.22,14.58C0.48,14.9,0,15.62,0,16.43V18l4.5,0v-1.61c0-0.83,0.23-1.61,0.63-2.29C4.76,14.04,4.39,14,4,14 C3.01,14,2.07,14.21,1.22,14.58z\"></path><path d=\"M22.78,14.58C21.93,14.21,20.99,14,20,14c-0.39,0-0.76,0.04-1.13,0.1c0.4,0.68,0.63,1.46,0.63,2.29V18l4.5,0v-1.57 C24,15.62,23.52,14.9,22.78,14.58z\"></path><path d=\"M22,11v-0.5c0-1.1-0.9-2-2-2h-2c-0.42,0-0.65,0.48-0.39,0.81l0.7,0.63C18.12,10.25,18,10.61,18,11c0,1.1,0.9,2,2,2 S22,12.1,22,11z\"></path></g></g>"
},
"20": {
"width": 20,
"path": "<g><rect fill=\"none\" height=\"20\" width=\"20\" x=\"0\"></rect></g><g><g><path d=\"M8.22,10h3.56c0.63,0,1.1-0.58,0.98-1.2l-0.37-1.84C12.16,5.82,11.16,5,10,5S7.84,5.82,7.61,6.96L7.24,8.8 C7.12,9.42,7.59,10,8.22,10z M9.08,7.26C9.17,6.82,9.55,6.5,10,6.5s0.83,0.32,0.92,0.76l0.25,1.24H8.83L9.08,7.26z\"></path><path d=\"M1.63,9.49C1.52,9.7,1.49,9.95,1.54,10.2c0.13,0.55,0.61,0.83,1.22,0.8c0,0,1.19,0,1.56,0C5,11,5.54,10.54,5.54,9.97 c0-0.11-0.02-0.22-0.06-0.32c-0.01-0.02-0.01-0.04,0-0.06c0.07-0.13,0.11-0.27,0.11-0.42c0-0.25-0.11-0.48-0.29-0.66 C5.28,8.49,5.28,8.46,5.29,8.43c0.05-0.16,0.06-0.34,0.01-0.52C5.18,7.56,4.86,7.32,4.51,7.3c-0.02,0-0.04-0.01-0.05-0.03 C4.32,7.11,4.08,7,3.8,7c-0.24,0-0.46,0.08-0.6,0.21C3.18,7.23,3.15,7.23,3.12,7.22C3.01,7.18,2.89,7.15,2.76,7.15 c-0.52,0-0.94,0.39-0.99,0.9c0,0.02-0.01,0.03-0.02,0.05C1.51,8.31,1.38,8.62,1.42,8.94c0.02,0.18,0.09,0.34,0.2,0.48 C1.64,9.44,1.64,9.47,1.63,9.49z\"></path><path d=\"M16.5,11c0.83,0,1.5-0.67,1.5-1.5c0-0.04-0.01-0.07-0.01-0.11H18V9.01c0-0.83-0.68-1.51-1.51-1.51h-1.61 c-0.32,0-0.49,0.37-0.29,0.61l0.65,0.58C15.09,8.93,15,9.2,15,9.5C15,10.33,15.67,11,16.5,11z\"></path><path d=\"M13.9,11.93C12.87,11.41,11.54,11,10,11c-1.54,0-2.87,0.41-3.9,0.93C5.42,12.26,5,12.96,5,13.72L5,15h10l0-1.28 C15,12.96,14.58,12.26,13.9,11.93z M6.55,13.5c0.04-0.1,0.12-0.18,0.22-0.23C7.47,12.92,8.6,12.5,10,12.5 c1.39,0,2.53,0.42,3.23,0.77c0.1,0.05,0.18,0.13,0.22,0.23H6.55z\"></path><path d=\"M18.74,12.01c-0.64-0.25-1.4-0.41-2.24-0.41c-0.44,0-0.86,0.05-1.25,0.12c0.48,0.54,0.75,1.24,0.75,1.99L16,15h4l0-1.13 C20,13.05,19.5,12.31,18.74,12.01z\"></path><path d=\"M3.5,11.6c-0.85,0-1.6,0.16-2.24,0.41C0.5,12.31,0,13.05,0,13.87L0,15h4l0-1.28c0-0.76,0.28-1.45,0.75-1.99 C4.36,11.65,3.94,11.6,3.5,11.6z\"></path></g></g>"
}
}
},
"groups": {
"name": "groups",
"keywords": [
"social"
],
"heights": {
"24": {
"width": 24,
"path": "<rect fill=\"none\" height=\"24\" width=\"24\"></rect><g><path d=\"M4,13c1.1,0,2-0.9,2-2c0-1.1-0.9-2-2-2s-2,0.9-2,2C2,12.1,2.9,13,4,13z M5.13,14.1C4.76,14.04,4.39,14,4,14 c-0.99,0-1.93,0.21-2.78,0.58C0.48,14.9,0,15.62,0,16.43V18l4.5,0v-1.61C4.5,15.56,4.73,14.78,5.13,14.1z M20,13c1.1,0,2-0.9,2-2 c0-1.1-0.9-2-2-2s-2,0.9-2,2C18,12.1,18.9,13,20,13z M24,16.43c0-0.81-0.48-1.53-1.22-1.85C21.93,14.21,20.99,14,20,14 c-0.39,0-0.76,0.04-1.13,0.1c0.4,0.68,0.63,1.46,0.63,2.29V18l4.5,0V16.43z M16.24,13.65c-1.17-0.52-2.61-0.9-4.24-0.9 c-1.63,0-3.07,0.39-4.24,0.9C6.68,14.13,6,15.21,6,16.39V18h12v-1.61C18,15.21,17.32,14.13,16.24,13.65z M8.07,16 c0.09-0.23,0.13-0.39,0.91-0.69c0.97-0.38,1.99-0.56,3.02-0.56s2.05,0.18,3.02,0.56c0.77,0.3,0.81,0.46,0.91,0.69H8.07z M12,8 c0.55,0,1,0.45,1,1s-0.45,1-1,1s-1-0.45-1-1S11.45,8,12,8 M12,6c-1.66,0-3,1.34-3,3c0,1.66,1.34,3,3,3s3-1.34,3-3 C15,7.34,13.66,6,12,6L12,6z\"></path></g>"
}
}
},
"girl": {
"name": "girl",
"keywords": [
"social"
],
"heights": {
"24": {
"width": 24,
"path": "<g><rect fill=\"none\" height=\"24\" width=\"24\"></rect></g><g><g><path d=\"M12,7.5c0.97,0,1.75-0.78,1.75-1.75S12.97,4,12,4s-1.75,0.78-1.75,1.75S11.03,7.5,12,7.5z M14,16v4h-4v-4H8l2.38-6.38 C10.63,8.95,11.28,8.5,12,8.5s1.37,0.45,1.62,1.12L16,16H14z\"></path></g></g>"
},
"20": {
"width": 20,
"path": "<g><rect fill=\"none\" height=\"20\" width=\"20\" x=\"0\"></rect></g><g><g><path d=\"M10,6.5c0.69,0,1.25-0.56,1.25-1.25S10.69,4,10,4S8.75,4.56,8.75,5.25S9.31,6.5,10,6.5z M11.5,13v3h-3v-3H7l1.9-4.76 C9.08,7.79,9.52,7.5,10,7.5s0.92,0.29,1.1,0.74L13,13H11.5z\"></path></g></g>"
}
}
},
"piano": {
"name": "piano",
"keywords": [
"social"
],
"heights": {
"24": {
"width": 24,
"path": "<rect fill=\"none\" height=\"24\" width=\"24\"></rect><path d=\"M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M14,14.5h0.25V19h-4.5v-4.5H10 c0.55,0,1-0.45,1-1V5h2v8.5C13,14.05,13.45,14.5,14,14.5z M5,5h2v8.5c0,0.55,0.45,1,1,1h0.25V19H5V5z M19,19h-3.25v-4.5H16 c0.55,0,1-0.45,1-1V5h2V19z\"></path>"
},
"20": {
"width": 20,
"path": "<rect fill=\"none\" height=\"20\" width=\"20\"></rect><g><path d=\"M15.5,3h-11C3.67,3,3,3.67,3,4.5v11C3,16.33,3.67,17,4.5,17h11c0.83,0,1.5-0.67,1.5-1.5v-11C17,3.67,16.33,3,15.5,3z M7,15.5H4.5v-11H6v7C6,11.78,6.22,12,6.5,12H7V15.5z M12,15.5H8V12h0.5C8.78,12,9,11.78,9,11.5v-7h2v7c0,0.28,0.22,0.5,0.5,0.5H12 V15.5z M15.5,15.5H13V12h0.5c0.28,0,0.5-0.22,0.5-0.5v-7h1.5V15.5z\"></path></g>"
}
}
},
"people_outline": {
"name": "people_outline",
"keywords": [
"social"
],
"heights": {
"24": {
"width": 24,
"path": "<path d=\"M0 0h24v24H0V0z\" fill=\"none\"></path><path d=\"M9 13.75c-2.34 0-7 1.17-7 3.5V19h14v-1.75c0-2.33-4.66-3.5-7-3.5zM4.34 17c.84-.58 2.87-1.25 4.66-1.25s3.82.67 4.66 1.25H4.34zM9 12c1.93 0 3.5-1.57 3.5-3.5S10.93 5 9 5 5.5 6.57 5.5 8.5 7.07 12 9 12zm0-5c.83 0 1.5.67 1.5 1.5S9.83 10 9 10s-1.5-.67-1.5-1.5S8.17 7 9 7zm7.04 6.81c1.16.84 1.96 1.96 1.96 3.44V19h4v-1.75c0-2.02-3.5-3.17-5.96-3.44zM15 12c1.93 0 3.5-1.57 3.5-3.5S16.93 5 15 5c-.54 0-1.04.13-1.5.35.63.89 1 1.98 1 3.15s-.37 2.26-1 3.15c.46.22.96.35 1.5.35z\"></path>"
}
}
},
"group": {
"name": "group",
"keywords": [
"social"
],
"heights": {
"24": {
"width": 24,
"path": "<path d=\"M0 0h24v24H0V0z\" fill=\"none\"></path><path d=\"M9 13.75c-2.34 0-7 1.17-7 3.5V19h14v-1.75c0-2.33-4.66-3.5-7-3.5zM4.34 17c.84-.58 2.87-1.25 4.66-1.25s3.82.67 4.66 1.25H4.34zM9 12c1.93 0 3.5-1.57 3.5-3.5S10.93 5 9 5 5.5 6.57 5.5 8.5 7.07 12 9 12zm0-5c.83 0 1.5.67 1.5 1.5S9.83 10 9 10s-1.5-.67-1.5-1.5S8.17 7 9 7zm7.04 6.81c1.16.84 1.96 1.96 1.96 3.44V19h4v-1.75c0-2.02-3.5-3.17-5.96-3.44zM15 12c1.93 0 3.5-1.57 3.5-3.5S16.93 5 15 5c-.54 0-1.04.13-1.5.35.63.89 1 1.98 1 3.15s-.37 2.26-1 3.15c.46.22.96.35 1.5.35z\"></path>"
}
}
},
"notifications_off": {
"name": "notifications_off",
"keywords": [
"social"
],
"heights": {
"24": {
"width": 24,
"path": "<path d=\"M0 0h24v24H0V0z\" fill=\"none\"></path><path d=\"M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm0-15.5c2.49 0 4 2.02 4 4.5v.1l2 2V11c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68c-.24.06-.47.15-.69.23l1.64 1.64c.18-.02.36-.05.55-.05zM5.41 3.35L4 4.76l2.81 2.81C6.29 8.57 6 9.74 6 11v5l-2 2v1h14.24l1.74 1.74 1.41-1.41L5.41 3.35zM16 17H8v-6c0-.68.12-1.32.34-1.9L16 16.76V17z\"></path>"
}
}
},
"emoji_objects": {
"name": "emoji_objects",
"keywords": [
"social"
],
"heights": {
"24": {
"width": 24,
"path": "<g><rect fill=\"none\" height=\"24\" width=\"24\"></rect></g><g><g></rect><g><path d=\"M12,3c-0.46,0-0.93,0.04-1.4,0.14C7.84,3.67,5.64,5.9,5.12,8.66c-0.48,2.61,0.48,5.01,2.22,6.56 C7.77,15.6,8,16.13,8,16.69V19c0,1.1,0.9,2,2,2h0.28c0.35,0.6,0.98,1,1.72,1s1.38-0.4,1.72-1H14c1.1,0,2-0.9,2-2v-2.31 c0-0.55,0.22-1.09,0.64-1.46C18.09,13.95,19,12.08,19,10C19,6.13,15.87,3,12,3z M14,17h-4v-1h4V17z M10,19v-1h4v1H10z M15.31,13.74c-0.09,0.08-0.16,0.18-0.24,0.26H8.92c-0.08-0.09-0.15-0.19-0.24-0.27c-1.32-1.18-1.91-2.94-1.59-4.7 c0.36-1.94,1.96-3.55,3.89-3.93C11.32,5.03,11.66,5,12,5c2.76,0,5,2.24,5,5C17,11.43,16.39,12.79,15.31,13.74z\"></path></g><g><rect height=\"3\" width=\"1\" x=\"11.5\" y=\"11\"></rect><rect height=\"3\" transform=\"matrix(0.7071 -0.7071 0.7071 0.7071 -4.0312 10.8536)\" width=\"1\" x=\"10.59\" y=\"8.79\"></rect><rect height=\"3\" transform=\"matrix(-0.7071 -0.7071 0.7071 -0.7071 14.7678 26.7028)\" width=\"1\" x=\"12.41\" y=\"8.79\"></rect></g></g>"
},
"20": {
"width": 20,
"path": "<g><rect fill=\"none\" height=\"20\" width=\"20\" x=\"0\"></rect></g><g><g></rect><path d=\"M14.91,7.07c-0.01-0.04-0.01-0.08-0.02-0.12c-0.06-0.28-0.15-0.56-0.26-0.82c-0.02-0.05-0.04-0.09-0.06-0.14 c-0.11-0.26-0.25-0.5-0.4-0.74c-0.03-0.04-0.05-0.08-0.08-0.11c-0.16-0.23-0.34-0.46-0.55-0.66c-0.02-0.02-0.03-0.03-0.05-0.05 c-0.2-0.2-0.42-0.38-0.66-0.54c-0.02-0.02-0.04-0.03-0.06-0.05c-0.24-0.16-0.49-0.29-0.75-0.41c-0.04-0.02-0.09-0.04-0.13-0.06 c-0.26-0.11-0.53-0.19-0.81-0.25c-0.05-0.01-0.1-0.02-0.15-0.03C10.64,3.04,10.34,3.01,10.04,3C10.03,3,10.01,3,10,3 C9.9,3,9.79,3.01,9.69,3.02c-0.06,0-0.12,0-0.18,0.01C9.31,3.04,9.12,3.07,8.93,3.11c-1.94,0.4-3.49,2-3.84,3.95 c-0.31,1.72,0.26,3.3,1.33,4.4C6.78,11.84,7,12.34,7,12.87c0,0.77,0,1.6,0,2.14c0,0.55,0.45,1,1,1h0.28l0,0c0.35,0.6,0.98,1,1.72,1 s1.38-0.4,1.72-1l0,0H12c0.55,0,1-0.45,1-1v-2.13c0-0.52,0.21-1.02,0.58-1.4C14.45,10.57,15,9.35,15,8 C15,7.68,14.96,7.37,14.91,7.07z M12,15l-2,0l0,0l0,0l-2,0l0-1h4V15z M12,13H8h0l0-1h4V13z M12.86,10.77 c-0.07,0.07-0.12,0.15-0.19,0.23H7.32c-0.06-0.08-0.12-0.16-0.19-0.24c-0.91-0.94-1.3-2.22-1.06-3.52 c0.29-1.57,1.52-2.83,3.06-3.16C9.42,4.03,9.71,4,10,4c2.21,0,4,1.79,4,4C14,9.04,13.6,10.02,12.86,10.77z\"></path><g><g><g><rect height=\"2.5\" width=\"1\" x=\"9.5\" y=\"8.5\"></rect></g></g><g><g><rect height=\"2.5\" transform=\"matrix(0.7071 -0.7071 0.7071 0.7071 -2.9225 8.8839)\" width=\"1\" x=\"8.76\" y=\"6.72\"></rect></g></g><g><g><rect height=\"2.5\" transform=\"matrix(-0.7071 -0.7071 0.7071 -0.7071 12.6945 21.1976)\" width=\"1\" x=\"10.24\" y=\"6.72\"></rect></g></g></g></g>"
}
}
},
"edit_notifications": {
"name": "edit_notifications",
"keywords": [
"social"
],
"heights": {
"24": {
"width": 24,
"path": "<rect fill=\"none\" height=\"24\" width=\"24\"></rect><g><path d=\"M17.58,6.25l1.77,1.77L14.37,13H12.6v-1.77L17.58,6.25z M20.85,5.81l-1.06-1.06c-0.2-0.2-0.51-0.2-0.71,0l-0.85,0.85 l1.77,1.77l0.85-0.85C21.05,6.32,21.05,6,20.85,5.81z M18,12.2V17h2v2H4v-2h2v-7c0-2.79,1.91-5.14,4.5-5.8V3.5 C10.5,2.67,11.17,2,12,2s1.5,0.67,1.5,1.5v0.7c0.82,0.21,1.57,0.59,2.21,1.09l-1.43,1.43C13.64,6.26,12.85,6,12,6 c-2.21,0-4,1.79-4,4v7h8v-2.8L18,12.2z M10,20h4c0,1.1-0.9,2-2,2S10,21.1,10,20z\"></path></g>"
},
"20": {
"width": 20,
"path": "<rect fill=\"none\" height=\"20\" width=\"20\"></rect><path d=\"M13.5,11.03V14h-7V9c0-1.93,1.57-3.5,3.5-3.5c0.58,0,1.13,0.14,1.61,0.39l1.1-1.1C12.19,4.47,11.62,4.23,11,4.1V3 c0-0.55-0.45-1-1-1S9,2.45,9,3v1.1C6.72,4.56,5,6.58,5,9v5H4v1.5h12V14h-1V9.53L13.5,11.03z M10,18c0.83,0,1.5-0.67,1.5-1.5h-3 C8.5,17.33,9.17,18,10,18z M14.32,5.27l1.41,1.41l-3.82,3.82H10.5l0-1.41L14.32,5.27z M14.81,4.77l0.63-0.63 c0.2-0.2,0.51-0.2,0.71,0l0.71,0.71c0.2,0.2,0.2,0.51,0,0.71l-0.63,0.63L14.81,4.77z\"></path>"
}
}
},
"whatshot": {
"name": "whatshot",
"keywords": [
"social"
],
"heights": {
"24": {
"width": 24,
"path": "<path d=\"M0 0h24v24H0V0z\" fill=\"none\"></path><path d=\"M11.57 13.16c-1.36.28-2.17 1.16-2.17 2.41 0 1.34 1.11 2.42 2.49 2.42 2.05 0 3.71-1.66 3.71-3.71 0-1.07-.15-2.12-.46-3.12-.79 1.07-2.2 1.72-3.57 2zM13.5.67s.74 2.65.74 4.8c0 2.06-1.35 3.73-3.41 3.73-2.07 0-3.63-1.67-3.63-3.73l.03-.36C5.21 7.51 4 10.62 4 14c0 4.42 3.58 8 8 8s8-3.58 8-8C20 8.61 17.41 3.8 13.5.67zM12 20c-3.31 0-6-2.69-6-6 0-1.53.3-3.04.86-4.43 1.01 1.01 2.41 1.63 3.97 1.63 2.66 0 4.75-1.83 5.28-4.43C17.34 8.97 18 11.44 18 14c0 3.31-2.69 6-6 6z\"></path>"
}
}
},
"roller_skating": {
"name": "roller_skating",
"keywords": [
"social"
],
"heights": {
"24": {
"width": 24,
"path": "<g><rect fill=\"none\" height=\"24\" width=\"24\"></rect></g><g><g><g><path d=\"M20,12c0-1.79-1.19-3.34-2.91-3.82l-2.62-0.74C13.62,7.19,13,6.39,13,5.5V1H4v15h16V12z M18,14H6V3h5v1H9.5 C9.22,4,9,4.22,9,4.5C9,4.78,9.22,5,9.5,5H11l0.1,1H9.5C9.22,6,9,6.22,9,6.5C9,6.78,9.22,7,9.5,7h1.81 c0.45,1.12,1.4,2.01,2.6,2.36l2.62,0.73C17.4,10.33,18,11.1,18,12V14z M5,17c-1.66,0-3,1.34-3,3s1.34,3,3,3s3-1.34,3-3 S6.66,17,5,17z M5,21c-0.55,0-1-0.45-1-1c0-0.55,0.45-1,1-1s1,0.45,1,1C6,20.55,5.55,21,5,21z M19,17c-1.66,0-3,1.34-3,3 s1.34,3,3,3s3-1.34,3-3S20.66,17,19,17z M19,21c-0.55,0-1-0.45-1-1c0-0.55,0.45-1,1-1s1,0.45,1,1C20,20.55,19.55,21,19,21z M12,17c-1.66,0-3,1.34-3,3s1.34,3,3,3s3-1.34,3-3S13.66,17,12,17z M12,21c-0.55,0-1-0.45-1-1c0-0.55,0.45-1,1-1s1,0.45,1,1 C13,20.55,12.55,21,12,21z\"></path></g></g></g>"
},
"20": {
"width": 20,
"path": "<g><rect fill=\"none\" height=\"20\" width=\"20\" x=\"0\"></rect></g><g><path d=\"M16.5,10c0-1.35-0.89-2.49-2.2-2.85l-2.2-0.6C11.45,6.37,11,5.78,11,5.1V1H3.5v12.5h13V10z M15,12H5V2.5h4.5v1H8 C7.72,3.5,7.5,3.72,7.5,4c0,0.27,0.22,0.5,0.5,0.5h1.5c0,0.57-0.01,0.76,0.03,1H8C7.72,5.5,7.5,5.72,7.5,6c0,0.27,0.22,0.5,0.5,0.5 h1.85c0.38,0.72,1.04,1.28,1.86,1.5l2.19,0.6C14.55,8.78,15,9.33,15,10V12z M4.25,14.5C3.01,14.5,2,15.51,2,16.75 C2,17.99,3.01,19,4.25,19s2.25-1.01,2.25-2.25C6.5,15.51,5.49,14.5,4.25,14.5z M4.25,17.5c-0.41,0-0.75-0.34-0.75-0.75 C3.5,16.34,3.84,16,4.25,16S5,16.34,5,16.75C5,17.16,4.66,17.5,4.25,17.5z M15.75,14.5c-1.24,0-2.25,1.01-2.25,2.25 c0,1.24,1.01,2.25,2.25,2.25c1.24,0,2.25-1.01,2.25-2.25C18,15.51,16.99,14.5,15.75,14.5z M15.75,17.5c-0.41,0-0.75-0.34-0.75-0.75 c0-0.41,0.34-0.75,0.75-0.75c0.41,0,0.75,0.34,0.75,0.75C16.5,17.16,16.16,17.5,15.75,17.5z M10,14.5c-1.24,0-2.25,1.01-2.25,2.25 C7.75,17.99,8.76,19,10,19s2.25-1.01,2.25-2.25C12.25,15.51,11.24,14.5,10,14.5z M10,17.5c-0.41,0-0.75-0.34-0.75-0.75 C9.25,16.34,9.59,16,10,16s0.75,0.34,0.75,0.75C10.75,17.16,10.41,17.5,10,17.5z\"></path></g>"
}
}
},
"downhill_skiing": {
"name": "downhill_skiing",
"keywords": [
"social"
],
"heights": {
"24": {
"width": 24,
"path": "<rect fill=\"none\" height=\"24\" width=\"24\"></rect><path d=\"M18.5,4.5c0,1.1-0.9,2-2,2s-2-0.9-2-2s0.9-2,2-2S18.5,3.4,18.5,4.5z M15.78,20.9l0.76,0.27c0.62,0.21,1.27,0.33,1.96,0.33 c0.84,0,1.65-0.18,2.38-0.5L22,22.13C20.95,22.68,19.76,23,18.5,23c-0.86,0-1.68-0.14-2.45-0.41L2,17.47l0.5-1.41l6.9,2.51 l1.72-4.44L7.55,10.4C6.66,9.46,6.88,7.93,8,7.28l3.48-2.01c1.1-0.64,2.52-0.1,2.91,1.11l0.33,1.08c0.44,1.42,1.48,2.57,2.83,3.14 L18.07,9l1.43,0.46l-1.12,3.45c-2.45-0.4-4.48-2.07-5.38-4.32l-2.53,1.45l3.03,3.46l-2.22,5.76l3.09,1.12l2.1-6.44h0l0,0 c0.46,0.18,0.94,0.31,1.44,0.41L15.78,20.9z\"></path>"
},
"20": {
"width": 20,
"path": "<rect fill=\"none\" height=\"20\" width=\"20\"></rect><path d=\"M12,3.75C12,2.78,12.78,2,13.75,2s1.75,0.78,1.75,1.75c0,0.97-0.79,1.75-1.75,1.75C12.79,5.5,12,4.72,12,3.75z M6.83,6.38 c-0.89,0.5-1.13,1.7-0.37,2.43l3.1,2.94L8,15.8l-5.66-2.04L2,14.7l10.85,3.9C13.52,18.86,14.24,19,15,19c1.09,0,2.12-0.29,3-0.8 l-0.74-0.74C16.58,17.81,15.81,18,15,18c-0.6,0-1.14-0.1-1.67-0.29l-0.35-0.12l1.9-5.83c-0.34-0.04-0.67-0.11-0.98-0.2l0,0l0,0 l-1.85,5.7l-2.62-0.94l1.91-4.98L8.74,8.74L10.9,7.5c0.65,1.8,2.31,3.12,4.3,3.28L16,8.31L15.05,8l-0.38,1.17 c-1.22-0.34-2.17-1.31-2.47-2.55l-0.24-0.97C11.72,4.67,10.61,4.2,9.75,4.7L6.83,6.38z\"></path>"
}
}
},
"emoji_symbols": {
"name": "emoji_symbols",
"keywords": [
"social"
],
"heights": {
"24": {
"width": 24,
"path": "<g><rect fill=\"none\" height=\"24\" width=\"24\"></rect></g><g><g></rect><g><rect height=\"2\" width=\"8\" x=\"3\" y=\"2\"></rect><polygon points=\"6,11 8,11 8,7 11,7 11,5 3,5 3,7 6,7\"></polygon><rect height=\"2\" transform=\"matrix(0.7071 -0.7071 0.7071 0.7071 -7.0416 16.9999)\" width=\"11\" x=\"11.5\" y=\"16\"></rect><circle cx=\"14.5\" cy=\"14.5\" r=\"1.5\"></circle><circle cx=\"19.5\" cy=\"19.5\" r=\"1.5\"></circle><path d=\"M15.5,11c1.38,0,2.5-1.12,2.5-2.5V4h3V2h-4v4.51C16.58,6.19,16.07,6,15.5,6C14.12,6,13,7.12,13,8.5 C13,9.88,14.12,11,15.5,11z\"></path><path d=\"M9.74,15.96l-1.41,1.41l-0.71-0.71l0.35-0.35c0.98-0.98,0.98-2.56,0-3.54c-0.49-0.49-1.13-0.73-1.77-0.73 c-0.64,0-1.28,0.24-1.77,0.73c-0.98,0.98-0.98,2.56,0,3.54l0.35,0.35l-1.06,1.06c-0.98,0.98-0.98,2.56,0,3.54 C4.22,21.76,4.86,22,5.5,22s1.28-0.24,1.77-0.73l1.06-1.06l1.41,1.41l1.41-1.41l-1.41-1.41l1.41-1.41L9.74,15.96z M5.85,14.2 c0.12-0.12,0.26-0.15,0.35-0.15s0.23,0.03,0.35,0.15c0.19,0.2,0.19,0.51,0,0.71l-0.35,0.35L5.85,14.9 C5.66,14.71,5.66,14.39,5.85,14.2z M5.85,19.85C5.73,19.97,5.59,20,5.5,20s-0.23-0.03-0.35-0.15c-0.19-0.19-0.19-0.51,0-0.71 l1.06-1.06l0.71,0.71L5.85,19.85z\"></path></g></g>"
},
"20": {
"width": 20,
"path": "<g><rect fill=\"none\" height=\"20\" width=\"20\" x=\"0\"></rect></g><g><g></rect><g><path d=\"M5.21,14.09l-1.06,1.06C4.02,15.27,4,15.42,4,15.5s0.02,0.23,0.15,0.35C4.27,15.98,4.42,16,4.5,16 s0.23-0.02,0.35-0.15l0.35-0.35l0.71-0.71L5.21,14.09z\" fill=\"none\"></path><path d=\"M5.71,11.96c0-0.08-0.02-0.23-0.15-0.35s-0.28-0.15-0.35-0.15c-0.08,0-0.23,0.02-0.35,0.15 c-0.13,0.13-0.15,0.28-0.15,0.35c0,0.08,0.02,0.23,0.15,0.35l0.35,0.35l0.35-0.35C5.69,12.19,5.71,12.04,5.71,11.96z\" fill=\"none\"></path><rect height=\"1\" width=\"5\" x=\"4\" y=\"3\"></rect><polygon points=\"4,5 4,6 6,6 6,9 6.99,9 6.99,6 9,6 9,5\"></polygon><rect height=\".99\" transform=\"matrix(0.7071 -0.7071 0.7071 0.7071 -5.8428 13.8943)\" width=\"7.07\" x=\"10.31\" y=\"13.5\"></rect><path d=\"M12.71,12.71c0.39-0.39,0.39-1.02,0-1.41c-0.39-0.39-1.02-0.39-1.41,0c-0.39,0.39-0.39,1.02,0,1.41 C11.68,13.1,12.32,13.1,12.71,12.71z\"></path><path d=\"M16.71,15.29c-0.39-0.39-1.02-0.39-1.41,0c-0.39,0.39-0.39,1.02,0,1.41c0.39,0.39,1.02,0.39,1.41,0 C17.1,16.32,17.1,15.68,16.71,15.29z\"></path><path d=\"M12.5,9C13.33,9,14,8.33,14,7.5C14,7.47,14,4,14,4h2V3h-3v3.09C12.84,6.04,12.68,6,12.5,6C11.67,6,11,6.67,11,7.5 S11.67,9,12.5,9z\"></path><path d=\"M8.04,12.67l-1.41,1.41l-0.71-0.71l0.35-0.35c0.59-0.59,0.59-1.54,0-2.12c-0.29-0.29-0.68-0.44-1.06-0.44 c-0.38,0-0.77,0.15-1.06,0.44c-0.59,0.59-0.59,1.54,0,2.12l0.35,0.35l-1.06,1.06c-0.59,0.59-0.59,1.54,0,2.12 C3.73,16.85,4.12,17,4.5,17s0.77-0.15,1.06-0.44l1.06-1.06l1.41,1.41l0.71-0.71l-1.41-1.41v0l1.41-1.41L8.04,12.67z M4.85,12.32 c-0.13-0.13-0.15-0.28-0.15-0.35c0-0.08,0.02-0.23,0.15-0.35c0.13-0.13,0.28-0.15,0.35-0.15c0.08,0,0.23,0.02,0.35,0.15 s0.15,0.28,0.15,0.35c0,0.08-0.02,0.23-0.15,0.35l-0.35,0.35L4.85,12.32z M4.85,15.85C4.73,15.98,4.58,16,4.5,16 s-0.23-0.02-0.35-0.15C4.02,15.73,4,15.58,4,15.5s0.02-0.23,0.15-0.35l1.06-1.06l0.71,0.71L5.21,15.5L4.85,15.85z\"></path></g></g>"
}
}
},
"interests": {
"name": "interests",
"keywords": [
"social"
],
"heights": {
"24": {
"width": 24,
"path": "<rect fill=\"none\" height=\"24\" width=\"24\"></rect><path d=\"M7.02,13c-2.21,0-4,1.79-4,4s1.79,4,4,4s4-1.79,4-4S9.23,13,7.02,13z M7.02,19c-1.1,0-2-0.9-2-2s0.9-2,2-2s2,0.9,2,2 S8.12,19,7.02,19z M13,13v8h8v-8H13z M19,19h-4v-4h4V19z M7,2l-5,9h10L7,2z M7,6.12L8.6,9H5.4L7,6.12z M19.25,2.5 c-1.06,0-1.81,0.56-2.25,1.17c-0.44-0.61-1.19-1.17-2.25-1.17C13.19,2.5,12,3.78,12,5.25c0,2,2.42,3.42,5,5.75 c2.58-2.33,5-3.75,5-5.75C22,3.78,20.81,2.5,19.25,2.5z M17,8.35c-1.45-1.22-3-2.4-3-3.1c0-0.43,0.35-0.75,0.75-0.75 c0.31,0,0.52,0.17,0.73,0.37L17,6.3l1.52-1.43c0.21-0.2,0.42-0.37,0.73-0.37c0.4,0,0.75,0.32,0.75,0.75C20,5.95,18.45,7.13,17,8.35z\"></path>"
},
"20": {
"width": 20,
"path": "<rect fill=\"none\" height=\"20\" width=\"20\"></rect><path d=\"M6,11c-1.65,0-3,1.35-3,3s1.35,3,3,3s3-1.35,3-3S7.65,11,6,11z M6,15.5c-0.83,0-1.5-0.67-1.5-1.5s0.67-1.5,1.5-1.5 s1.5,0.67,1.5,1.5S6.83,15.5,6,15.5z M11,17h6v-6h-6V17z M12.5,12.5h3v3h-3V12.5z M7.4,7.5H4.6L6,5.03L7.4,7.5z M2.01,9H10L6,2 L2.01,9z M15.72,2.5c-0.81,0-1.39,0.43-1.72,0.89c-0.33-0.47-0.91-0.89-1.72-0.89c-1.19,0-2.1,0.98-2.1,2.1 c0,1.53,1.85,2.61,3.82,4.4c1.98-1.78,3.82-2.87,3.82-4.4C17.82,3.48,16.92,2.5,15.72,2.5z M14,7c-1.12-0.95-2.32-1.87-2.32-2.42 c0-0.33,0.27-0.58,0.58-0.58c0.24,0,0.4,0.13,0.57,0.29L14,5.4l1.18-1.11C15.34,4.14,15.5,4,15.74,4c0.31,0,0.58,0.25,0.58,0.58 C16.33,5.13,15.12,6.05,14,7z\"></path>"
}
}
},
"notifications_active": {
"name": "notifications_active",
"keywords": [
"social"
],
"heights": {
"24": {
"width": 24,
"path": "<path d=\"M0 0h24v24H0V0z\" fill=\"none\"></path><path d=\"M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.64 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2zm-2 1H8v-6c0-2.48 1.51-4.5 4-4.5s4 2.02 4 4.5v6zM7.58 4.08L6.15 2.65C3.75 4.48 2.17 7.3 2.03 10.5h2c.15-2.65 1.51-4.97 3.55-6.42zm12.39 6.42h2c-.15-3.2-1.73-6.02-4.12-7.85l-1.42 1.43c2.02 1.45 3.39 3.77 3.54 6.42z\"></path>"
}
}
},
"follow_the_signs": {
"name": "follow_the_signs",
"keywords": [
"social"
],
"heights": {
"24": {
"width": 24,
"path": "<rect fill=\"none\" height=\"24\" width=\"24\"></rect><path d=\"M9.5,5.5c1.1,0,2-0.9,2-2s-0.9-2-2-2s-2,0.9-2,2S8.4,5.5,9.5,5.5z M5.75,8.9L3,23h2.1l1.75-8L9,17v6h2v-7.55L8.95,13.4 l0.6-3C10.85,12,12.8,13,15,13v-2c-1.85,0-3.45-1-4.35-2.45L9.7,6.95C9.35,6.35,8.7,6,8,6C7.75,6,7.5,6.05,7.25,6.15L2,8.3V13h2 V9.65L5.75,8.9 M13,2v7h3.75v14h1.5V9H22V2H13z M18.01,8V6.25H14.5v-1.5h3.51V3l2.49,2.5L18.01,8z\"></path>"
}
}
},
"groups_3": {
"name": "groups_3",
"keywords": [
"social"
],
"heights": {
"24": {
"width": 24,
"path": "<g><rect fill=\"none\" height=\"24\" width=\"24\"></rect></g><g><g><path d=\"M16.24,13.65c-1.17-0.52-2.61-0.9-4.24-0.9c-1.63,0-3.07,0.39-4.24,0.9C6.68,14.13,6,15.21,6,16.39V18h12v-1.61 C18,15.21,17.32,14.13,16.24,13.65z M8.07,16c0.09-0.23,0.27-0.42,0.49-0.52c1.1-0.49,2.26-0.73,3.43-0.73 c1.18,0,2.33,0.25,3.43,0.73c0.23,0.1,0.4,0.29,0.49,0.52H8.07z\"></path><path d=\"M1.22,14.58C0.48,14.9,0,15.62,0,16.43V18l4.5,0v-1.61c0-0.83,0.23-1.61,0.63-2.29C4.76,14.04,4.39,14,4,14 C3.01,14,2.07,14.21,1.22,14.58z\"></path><path d=\"M22.78,14.58C21.93,14.21,20.99,14,20,14c-0.39,0-0.76,0.04-1.13,0.1c0.4,0.68,0.63,1.46,0.63,2.29V18l4.5,0v-1.57 C24,15.62,23.52,14.9,22.78,14.58z\"></path><path d=\"M12,12c1.66,0,3-1.34,3-3c0-1.66-1.34-3-3-3S9,7.34,9,9C9,10.66,10.34,12,12,12z M12,8c0.55,0,1,0.45,1,1s-0.45,1-1,1 s-1-0.45-1-1S11.45,8,12,8z\"></path><rect height=\"3.54\" transform=\"matrix(0.7071 -0.7071 0.7071 0.7071 -6.6066 6.0503)\" width=\"3.54\" x=\"2.23\" y=\"9.23\"></rect><polygon points=\"20,9 17.5,13 22.5,13\"></polygon></g></g>"
},
"20": {
"width": 20,
"path": "<g><rect fill=\"none\" height=\"20\" width=\"20\" x=\"0\"></rect></g><g><g><rect height=\"2.83\" transform=\"matrix(0.7071 -0.7071 0.7071 0.7071 -4.6317 4.818)\" width=\"2.83\" x=\"2.09\" y=\"6.59\"></rect><polygon points=\"16.5,6.5 14.5,10 18.5,10\"></polygon><path d=\"M13.9,10.93C12.87,10.41,11.54,10,10,10c-1.54,0-2.87,0.41-3.9,0.93C5.42,11.26,5,11.96,5,12.72L5,14h10l0-1.28 C15,11.96,14.58,11.26,13.9,10.93z M6.55,12.5c0.04-0.1,0.12-0.18,0.22-0.23C7.47,11.92,8.6,11.5,10,11.5 c1.39,0,2.53,0.42,3.23,0.77c0.1,0.05,0.18,0.13,0.22,0.23H6.55z\"></path><path d=\"M18.74,11.01c-0.64-0.25-1.4-0.41-2.24-0.41c-0.44,0-0.86,0.05-1.25,0.12c0.48,0.54,0.75,1.24,0.75,1.99L16,14h4l0-1.13 C20,12.05,19.5,11.31,18.74,11.01z\"></path><path d=\"M3.5,10.6c-0.85,0-1.6,0.16-2.24,0.41C0.5,11.31,0,12.05,0,12.87L0,14h4l0-1.28c0-0.76,0.28-1.45,0.75-1.99 C4.36,10.65,3.94,10.6,3.5,10.6z\"></path><path d=\"M10,9c1.38,0,2.5-1.12,2.5-2.5C12.5,5.12,11.38,4,10,4S7.5,5.12,7.5,6.5C7.5,7.88,8.62,9,10,9z M10,5.5c0.55,0,1,0.45,1,1 s-0.45,1-1,1s-1-0.45-1-1S9.45,5.5,10,5.5z\"></path></g></g>"
}
}
},
"notifications": {
"name": "notifications",
"keywords": [
"social"
],
"heights": {
"24": {
"width": 24,
"path": "<path d=\"M0 0h24v24H0V0z\" fill=\"none\"></path><path d=\"M12 22c1.1 0 2-.9 2-2h-4c0 1.1.9 2 2 2zm6-6v-5c0-3.07-1.63-5.64-4.5-6.32V4c0-.83-.67-1.5-1.5-1.5s-1.5.67-1.5 1.5v.68C7.64 5.36 6 7.92 6 11v5l-2 2v1h16v-1l-2-2zm-2 1H8v-6c0-2.48 1.51-4.5 4-4.5s4 2.02 4 4.5v6z\"></path>"
}
}
},
"emoji_food_beverage": {
"name": "emoji_food_beverage",
"keywords": [
"social"
],
"heights": {
"24": {
"width": 24,
"path": "<g><rect fill=\"none\" height=\"24\" width=\"24\"></rect></g><g><g></rect><g><rect height=\"2\" width=\"18\" x=\"2\" y=\"19\"></rect><path d=\"M20,3H4v10c0,2.21,1.79,4,4,4h6c2.21,0,4-1.79,4-4v-3h2c1.11,0,2-0.89,2-2V5C22,3.89,21.11,3,20,3z M16,13 c0,1.1-0.9,2-2,2H8c-1.1,0-2-0.9-2-2V5h3v1.4L7.19,7.85C7.07,7.94,7,8.09,7,8.24v4.26C7,12.78,7.22,13,7.5,13h4 c0.28,0,0.5-0.22,0.5-0.5V8.24c0-0.15-0.07-0.3-0.19-0.39L10,6.4V5h6V13z M9.5,7.28l1.5,1.2V12H8V8.48L9.5,7.28z M20,8h-2V5h2V8z\"></path></g></g>"
},
"20": {
"width": 20,
"path": "<g><rect fill=\"none\" height=\"20\" width=\"20\" x=\"0\"></rect></g><g><g></rect><g><g><path d=\"M15,5H5v7c0,1.1,0.9,2,2,2h5c1.1,0,2-0.9,2-2V9h1c0.55,0,1-0.45,1-1V6C16,5.45,15.55,5,15,5z M8.5,8.2L9,8.54V10H8V8.54 L8.5,8.2z M13,9v3c0,0.55-0.45,1-1,1H7c-0.55,0-1-0.45-1-1V6h2.25v1.17L7.11,7.93C7.04,7.97,7,8.05,7,8.13v2.62 C7,10.89,7.11,11,7.25,11h2.5C9.89,11,10,10.89,10,10.75V8.13c0-0.08-0.04-0.16-0.11-0.21L8.75,7.17V6H13V9z M15,8h-1V6h1V8z\"></path></g><g><rect height=\"1\" width=\"11\" x=\"4\" y=\"15\"></rect></g></g></g>"
}
}
},
"domain": {
"name": "domain",
"keywords": [
"social"
],
"heights": {
"24": {
"width": 24,
"path": "<path d=\"M0 0h24v24H0V0z\" fill=\"none\"></path><path d=\"M12 7V3H2v18h20V7H12zM6 19H4v-2h2v2zm0-4H4v-2h2v2zm0-4H4V9h2v2zm0-4H4V5h2v2zm4 12H8v-2h2v2zm0-4H8v-2h2v2zm0-4H8V9h2v2zm0-4H8V5h2v2zm10 12h-8v-2h2v-2h-2v-2h2v-2h-2V9h8v10zm-2-8h-2v2h2v-2zm0 4h-2v2h2v-2z\"></path>"
}
}
},
"person_off": {
"name": "person_off",
"keywords": [
"social"
],
"heights": {
"24": {
"width": 24,
"path": "<rect fill=\"none\" height=\"24\" width=\"24\"></rect><path d=\"M20,17.17l-3.37-3.38c0.64,0.22,1.23,0.48,1.77,0.76C19.37,15.06,19.98,16.07,20,17.17z M21.19,21.19l-1.41,1.41L17.17,20H4 v-2.78c0-1.12,0.61-2.15,1.61-2.66c1.29-0.66,2.87-1.22,4.67-1.45L1.39,4.22l1.41-1.41L21.19,21.19z M15.17,18l-3-3 c-0.06,0-0.11,0-0.17,0c-2.37,0-4.29,0.73-5.48,1.34C6.2,16.5,6,16.84,6,17.22V18H15.17z M12,6c1.1,0,2,0.9,2,2 c0,0.86-0.54,1.59-1.3,1.87l1.48,1.48C15.28,10.64,16,9.4,16,8c0-2.21-1.79-4-4-4c-1.4,0-2.64,0.72-3.35,1.82l1.48,1.48 C10.41,6.54,11.14,6,12,6z\"></path>"
},
"20": {
"width": 20,
"path": "<rect fill=\"none\" height=\"20\" width=\"20\"></rect><path d=\"M11.64,9.51C12.46,8.98,13,8.05,13,7c0-1.66-1.34-3-3-3C8.95,4,8.02,4.54,7.49,5.36L8.6,6.47C8.81,5.91,9.36,5.5,10,5.5 c0.83,0,1.5,0.67,1.5,1.5c0,0.64-0.41,1.19-0.97,1.4L11.64,9.51z M15.99,13.87c-0.07-0.62-0.41-1.18-0.95-1.5 c-0.35-0.21-0.72-0.39-1.1-0.56L15.99,13.87z M2.93,2.93L1.87,3.99l7.07,7.07c-1.44,0.15-2.78,0.62-3.97,1.31 C4.36,12.72,4,13.39,4,14.09V16h9.88l2.13,2.13l1.06-1.06L2.93,2.93z M5.5,14.5v-0.41c0-0.18,0.09-0.34,0.22-0.42 C7.02,12.9,8.5,12.5,10,12.5c0.13,0,0.26,0,0.39,0.01l1.99,1.99H5.5z\"></path>"
}
}
},
"assist_walker": {
"name": "assist_walker",
"keywords": [
"social"
],
"heights": {
"24": {
"width": 24,
"path": "<g><rect fill=\"none\" height=\"24\" width=\"24\"></rect></g><g><g><circle cx=\"12.5\" cy=\"4.5\" r=\"2\"></circle><path d=\"M19.77,17.72l-0.64-6.37C19.06,10.58,18.41,10,17.64,10H16c-1.5-0.02-2.86-0.54-3.76-1.44l-2-1.98 C10.08,6.42,9.62,6,8.83,6C8.32,6,7.81,6.2,7.42,6.59L4.08,9.91c-0.53,0.68-0.51,1.57-0.21,2.13l1.43,2.8l-3.15,4.05l1.57,1.24 l3.68-4.73l-0.17-1.36L8,14.75V20h2v-6.12l-2.12-2.12l2.36-2.36c0.94,0.94,1.72,1.82,3.59,2.32L13,20h1.5l0.41-3.5h3.18l0.14,1.22 c-0.44,0.26-0.73,0.74-0.73,1.28c0,0.83,0.67,1.5,1.5,1.5s1.5-0.67,1.5-1.5C20.5,18.46,20.21,17.98,19.77,17.72z M15.09,15 l0.41-3.5h2l0.41,3.5H15.09z\"></path></g></g>"
},
"20": {
"width": 20,
"path": "<g><rect fill=\"none\" height=\"20\" width=\"20\" x=\"0\"></rect></g><g><g><circle cx=\"10.5\" cy=\"4.5\" r=\"1.5\"></circle><path d=\"M15.25,15.05l-0.64-4.92c-0.06-0.5-0.49-0.88-0.99-0.88H12c-0.48-0.16-0.93-0.41-1.3-0.78L8.66,6.44c0,0-0.01,0-0.01-0.01 L8.64,6.42l0,0c-0.59-0.57-1.52-0.57-2.1,0.01l-2.31,2.3c-0.25,0.35-0.34,0.8-0.25,1.22l0.76,3.28l-2.32,3.09l1.22,0.88l2.68-3.59 l-0.19-1.19l1.11,1.08V17h1.5v-4.2l-2.2-2.2l2.08-2.08c1.09,1.09,1.34,1.42,2.23,1.87L10,17h1.01l0.39-3h2.71l0.16,1.26 c-0.31,0.23-0.52,0.57-0.52,0.99c0,0.69,0.56,1.25,1.25,1.25s1.25-0.56,1.25-1.25C16.25,15.65,15.81,15.17,15.25,15.05z M11.53,13 l0.36-2.75h1.73l0,0L13.97,13H11.53z\"></path></g></g>"
}
}
},
"thunderstorm": {
"name": "thunderstorm",
"keywords": [
"social"
],
"heights": {
"24": {
"width": 24,
"path": "<g><rect fill=\"none\" height=\"24\" width=\"24\"></rect></g><g><g><path d=\"M17.92,7.02C17.45,4.18,14.97,2,12,2C9.82,2,7.83,3.18,6.78,5.06C4.09,5.41,2,7.74,2,10.5C2,13.53,4.47,16,7.5,16h10 c2.48,0,4.5-2.02,4.5-4.5C22,9.16,20.21,7.23,17.92,7.02z M17.5,14h-10C5.57,14,4,12.43,4,10.5c0-1.74,1.31-3.23,3.04-3.46 l0.99-0.13l0.49-0.87C9.23,4.78,10.56,4,12,4c1.94,0,3.63,1.44,3.95,3.35l0.25,1.52l1.54,0.14C19.01,9.13,20,10.22,20,11.5 C20,12.88,18.88,14,17.5,14z\"></path><polygon points=\"14.8,17 11.9,20.32 13.9,21.32 11.55,24 14.2,24 17.1,20.68 15.1,19.68 17.45,17\"></polygon><polygon points=\"8.8,17 5.9,20.32 7.9,21.32 5.55,24 8.2,24 11.1,20.68 9.1,19.68 11.45,17\"></polygon></g></g>"
},
"20": {
"width": 20,
"path": "<g><rect fill=\"none\" height=\"20\" width=\"20\" x=\"0\"></rect></g><g><g><path d=\"M14.69,6.01c-0.35-2.23-2.25-3.95-4.58-4C10.07,2,10.04,2,10,2C8.19,2,6.6,3.02,5.8,4.52C3.71,4.74,2.05,6.49,2,8.65 C1.95,11,3.81,12.94,6.15,13l8.35,0c1.93,0,3.5-1.57,3.5-3.5C18,7.63,16.54,6.1,14.69,6.01z M14.5,11.5H6.25 c-1.52,0-2.75-1.23-2.75-2.75C3.5,7.23,4.73,6,6.25,6h0.5l0.29-0.59C7.55,4.28,8.68,3.5,10,3.5c1.62,0,2.96,1.19,3.21,2.74 L13.4,7.5h1.1c1.1,0,2,0.9,2,2C16.5,10.6,15.6,11.5,14.5,11.5z\"></path><polygon points=\"12.55,14 10.06,16.68 11.84,17.7 9.87,20 11.84,20 14.16,17.3 12.44,16.32 14.6,14\"></polygon><polygon points=\"7.55,14 5.06,16.68 6.84,17.7 4.87,20 6.84,20 9.16,17.3 7.44,16.32 9.6,14\"></polygon></g></g>"
}
}
},
"sports_football": {
"name": "sports_football",
"keywords": [
"social"
],
"heights": {
"24": {
"width": 24,
"path": "<g><rect fill=\"none\" height=\"24\" width=\"24\"></rect></g><g><g><path d=\"M20.31,3.69C19.99,3.36,18.37,3,16.26,3c-3.03,0-7.09,0.75-9.8,3.46C1.87,11.05,2.9,19.52,3.69,20.31 C4.01,20.64,5.63,21,7.74,21c3.03,0,7.09-0.75,9.8-3.46C22.13,12.95,21.1,4.48,20.31,3.69z M7.74,19c-1.14,0-2.02-0.12-2.53-0.23 c-0.18-0.79-0.3-2.21-0.17-3.83l4.01,4.01C8.53,18.99,8.08,19,7.74,19z M16.13,16.13c-1.33,1.33-3.06,2.05-4.66,2.44l-6.04-6.04 c0.42-1.68,1.16-3.37,2.45-4.65c1.32-1.32,3.05-2.04,4.64-2.43l6.05,6.05C18.15,13.17,17.4,14.85,16.13,16.13z M18.96,9.09 l-4.03-4.03C15.45,5.01,15.91,5,16.26,5c1.14,0,2.02,0.12,2.53,0.23C18.97,6.02,19.09,7.45,18.96,9.09z\"></path><rect height=\"1.98\" transform=\"matrix(0.7071 -0.7071 0.7071 0.7071 -4.9706 12.0001)\" width=\"7.92\" x=\"8.04\" y=\"11.01\"></rect></g></g>"
},
"20": {
"width": 20,
"path": "<g><rect fill=\"none\" height=\"20\" width=\"20\" x=\"0\"></rect></g><g><g><path d=\"M15.54,4.46C15.32,4.24,14.25,4,12.84,4c-2.02,0-4.73,0.5-6.53,2.31c-3.06,3.06-2.37,8.71-1.85,9.23 C4.68,15.76,5.75,16,7.16,16c2.02,0,4.73-0.5,6.53-2.31C16.75,10.63,16.07,4.99,15.54,4.46z M12.84,5c0.96,0,1.64,0.12,1.96,0.21 c0.14,0.46,0.26,1.48,0.18,2.69L12.1,5.03C12.38,5.01,12.64,5,12.84,5z M5.2,14.79c-0.14-0.46-0.26-1.48-0.18-2.69l2.87,2.87 C7.62,14.99,7.36,15,7.16,15C6.2,15,5.52,14.88,5.2,14.79z M12.99,12.99c-1.1,1.1-2.58,1.6-3.83,1.83l-3.98-3.98 c0.25-1.36,0.79-2.78,1.83-3.82c1.1-1.1,2.58-1.6,3.83-1.83l3.98,3.98C14.57,10.52,14.03,11.94,12.99,12.99z\"></path><rect height=\"1\" transform=\"matrix(0.7071 -0.7071 0.7071 0.7071 -4.1421 10)\" width=\"6\" x=\"7\" y=\"9.5\"></rect></g></g>"
}
}
},
"luggage": {
"name": "luggage",
"keywords": [
"social"
],
"heights": {
"24": {
"width": 24,
"path": "<rect fill=\"none\" height=\"24\" width=\"24\"></rect><g><path d=\"M9.5,18H8V9h1.5V18z M12.75,18h-1.5V9h1.5V18z M16,18h-1.5V9H16V18z M17,6h-2V3c0-0.55-0.45-1-1-1h-4C9.45,2,9,2.45,9,3v3 H7C5.9,6,5,6.9,5,8v11c0,1.1,0.9,2,2,2c0,0.55,0.45,1,1,1s1-0.45,1-1h6c0,0.55,0.45,1,1,1s1-0.45,1-1c1.1,0,2-0.9,2-2V8 C19,6.9,18.1,6,17,6z M10.5,3.5h3V6h-3V3.5z M17,19H7V8h10V19z\"></path></g>"
}
}
},
"vaccines": {
"name": "vaccines",
"keywords": [
"social"
],
"heights": {
"24": {
"width": 24,
"path": "<rect fill=\"none\" height=\"24\" width=\"24\"></rect><path d=\"M11,5.5H8V4h0.5c0.55,0,1-0.45,1-1c0-0.55-0.45-1-1-1h-3c-0.55,0-1,0.45-1,1c0,0.55,0.45,1,1,1H6v1.5H3c-0.55,0-1,0.45-1,1 c0,0.55,0.45,1,1,1V15c0,1.1,0.9,2,2,2h1v4l2,1.5V17h1c1.1,0,2-0.9,2-2V7.5c0.55,0,1-0.45,1-1C12,5.95,11.55,5.5,11,5.5z M9,9H7.25 C6.84,9,6.5,9.34,6.5,9.75c0,0.41,0.34,0.75,0.75,0.75H9V12H7.25c-0.41,0-0.75,0.34-0.75,0.75c0,0.41,0.34,0.75,0.75,0.75H9L9,15H5 V7.5h4V9z M19.5,10.5V10c0.55,0,1-0.45,1-1c0-0.55-0.45-1-1-1h-5c-0.55,0-1,0.45-1,1c0,0.55,0.45,1,1,1v0.5c0,0.5-1.5,1.16-1.5,3V20 c0,1.1,0.9,2,2,2h4c1.1,0,2-0.9,2-2v-6.5C21,11.66,19.5,11,19.5,10.5z M16.5,10.5V10h1v0.5c0,1.6,1.5,2,1.5,3V14h-4 c0-0.21,0-0.39,0-0.5C15,12.5,16.5,12.1,16.5,10.5z M19,15.5V17h-4c0-0.51,0-1.02,0-1.5H19z M15,20c0,0,0-0.63,0-1.5h4V20H15z\"></path>"
},
"20": {
"width": 20,
"path": "<rect fill=\"none\" height=\"20\" width=\"20\"></rect><path d=\"M15.75,9V8.5c0.41,0,0.75-0.34,0.75-0.75C16.5,7.34,16.16,7,15.75,7h-4C11.34,7,11,7.34,11,7.75c0,0.41,0.34,0.75,0.75,0.75 V9c0,0-1.25,1-1.25,2.5v5c0,0.83,0.67,1.5,1.5,1.5h3.5c0.83,0,1.5-0.67,1.5-1.5v-5.25C17,10,15.75,9,15.75,9z M15.5,16.5H12V15h3.5 V16.5z M15.5,14H12v-1h3.5V14z M15.5,12H12v-0.5c0-1.13,1.25-1.25,1.25-2.5V8.5h1V9c0,1.25,1.25,1.37,1.25,2.5V12z M6,10.5 C6,10.78,6.22,11,6.5,11H8v1.5H4.5v-6H8V8H6.5C6.22,8,6,8.22,6,8.5C6,8.78,6.22,9,6.5,9H8v1H6.5C6.22,10,6,10.22,6,10.5z M2.25,5.75 C2.25,6.16,2.59,6.5,3,6.5l0,6C3,13.33,3.67,14,4.5,14h1v3L7,18.5V14h1c0.83,0,1.5-0.67,1.5-1.5l0-6c0.41,0,0.75-0.34,0.75-0.75 C10.25,5.34,9.91,5,9.5,5H7V3.5h0.5c0.41,0,0.75-0.34,0.75-0.75C8.25,2.34,7.91,2,7.5,2H5C4.59,2,4.25,2.34,4.25,2.75 C4.25,3.16,4.59,3.5,5,3.5h0.5V5H3C2.59,5,2.25,5.34,2.25,5.75z\"></path>"
}
}
},
"boy": {
"name": "boy",
"keywords": [
"social"
],
"heights": {
"24": {
"width": 24,
"path": "<g><rect fill=\"none\" height=\"24\" width=\"24\"></rect></g><g><g><path d=\"M12,7.5c0.97,0,1.75-0.78,1.75-1.75S12.97,4,12,4s-1.75,0.78-1.75,1.75S11.03,7.5,12,7.5z M14,20v-5h1v-4.5 c0-1.1-0.9-2-2-2h-2c-1.1,0-2,0.9-2,2V15h1v5H14z\"></path></g></g>"
},
"20": {
"width": 20,
"path": "<g><rect fill=\"none\" height=\"20\" width=\"20\" x=\"0\"></rect></g><g><g><path d=\"M12.5,12.5h-1V16h-3v-3.5h-1V9c0-0.83,0.67-1.5,1.5-1.5h2c0.83,0,1.5,0.67,1.5,1.5V12.5z M10,6.5 c0.69,0,1.25-0.56,1.25-1.25S10.69,4,10,4S8.75,4.56,8.75,5.25S9.31,6.5,10,6.5z\"></path></g></g>"
}
}
},
"landslide": {
"name": "landslide",
"keywords": [
"social"
],
"heights": {
"24": {
"width": 24,
"path": "<g><rect fill=\"none\" height=\"24\" width=\"24\"></rect></g><g><g><path d=\"M11,12L8,8H2v14h20l-6-8L11,12z M12.53,14.77L6,16.95l-2-0.67v-1.89l2,0.67l3.95-1.32L12.53,14.77z M7,10l1.57,2.09 L6,12.95l-2-0.67V10H7z M4,20v-1.61l2,0.67l9.03-3.01L18,20H4z\"></path><path d=\"M17,6V1l-5-1L9,2v4l3,2L17,6z M11,3.07l1.42-0.95L15,2.64v2.01l-2.77,1.11L11,4.93V3.07z\"></path><path d=\"M18.5,7L16,9v3l2.5,2l4.5-2V8L18.5,7z M21,10.7l-2.2,0.98L18,11.04V9.96l1-0.8l2,0.44V10.7z\"></path></g></g>"
},
"20": {
"width": 20,
"path": "<g><rect fill=\"none\" height=\"20\" width=\"20\" x=\"0\"></rect></g><g><g><path d=\"M9,10L7,7H2v11h16l-5-6L9,10z M10.44,12.4l-5.38,1.79L3.5,13.41v-1.82l1.44,0.72l3.28-1.02L10.44,12.4z M6.2,8.5 l1.02,1.52l-2.15,0.67L3.5,9.91V8.5H6.2z M3.5,16.5v-1.41l1.44,0.72l7.26-2.42l2.59,3.11H3.5z\"></path><path d=\"M14,5V1l-4-1L7,2v3l3,2L14,5z M8.5,2.8l1.78-1.19l2.22,0.55v1.9l-2.39,1.2L8.5,4.2V2.8z\"></path><path d=\"M15,6l-2,1.5V10l2,2l4-2V7L15,6z M17.5,9.07l-2.2,1.1l-0.8-0.8V8.25l0.83-0.62l2.17,0.54V9.07z\"></path></g></g>"
}
}
},
"back_hand": {
"name": "back_hand",
"keywords": [
"social"
],
"heights": {
"24": {
"width": 24,
"path": "<rect fill=\"none\" height=\"24\" width=\"24\"></rect><path d=\"M21,7c0-1.38-1.12-2.5-2.5-2.5c-0.17,0-0.34,0.02-0.5,0.05V4c0-1.38-1.12-2.5-2.5-2.5c-0.23,0-0.46,0.03-0.67,0.09 C14.46,0.66,13.56,0,12.5,0c-1.23,0-2.25,0.89-2.46,2.06C9.87,2.02,9.69,2,9.5,2C8.12,2,7,3.12,7,4.5v5.89 c-0.34-0.31-0.76-0.54-1.22-0.66L5.01,9.52c-0.83-0.23-1.7,0.09-2.19,0.83c-0.38,0.57-0.4,1.31-0.15,1.95l2.56,6.43 C6.49,21.91,9.57,24,13,24h0c4.42,0,8-3.58,8-8V7z M19,16c0,3.31-2.69,6-6,6h0c-2.61,0-4.95-1.59-5.91-4.01l-2.6-6.54l0.53,0.14 c0.46,0.12,0.83,0.46,1,0.9L7,15h2V4.5C9,4.22,9.22,4,9.5,4S10,4.22,10,4.5V12h2V2.5C12,2.22,12.22,2,12.5,2S13,2.22,13,2.5V12h2V4 c0-0.28,0.22-0.5,0.5-0.5S16,3.72,16,4v8h2V7c0-0.28,0.22-0.5,0.5-0.5S19,6.72,19,7L19,16z\"></path>"
},
"20": {
"width": 20,
"path": "<rect fill=\"none\" height=\"20\" width=\"20\"></rect><path d=\"M15.5,4c-0.17,0-0.34,0.02-0.5,0.06V3.25c0-1.1-0.9-2-2-2c-0.21,0-0.42,0.03-0.61,0.09C12.12,0.56,11.38,0,10.5,0 C9.54,0,8.74,0.67,8.55,1.58C8.37,1.53,8.19,1.5,8,1.5c-1.1,0-2,0.9-2,2v5.4C5.79,8.7,5.55,8.55,5.27,8.45L4.24,8.09 C4.07,8.03,3.9,8,3.73,8c-1,0-1.79,1.03-1.39,2.05l2.18,5.54C5.57,18.25,8.14,20,11,20c3.59,0,6.5-2.91,6.5-6.5V6 C17.5,4.9,16.6,4,15.5,4z M16,13.5c0,2.76-2.24,5-5,5c-2.24,0-4.25-1.37-5.07-3.46L3.76,9.51l0.8,0.28c0.27,0.1,0.49,0.31,0.6,0.58 L6,12.5h1.5v-9C7.5,3.22,7.72,3,8,3s0.5,0.22,0.5,0.5V10H10V2c0-0.28,0.22-0.5,0.5-0.5S11,1.72,11,2v8h1.5V3.25 c0-0.28,0.22-0.5,0.5-0.5s0.5,0.22,0.5,0.5V10H15V6c0-0.28,0.22-0.5,0.5-0.5S16,5.72,16,6V13.5z\"></path>"
}
}
},
"woman_2": {
"name": "woman_2",
"keywords": [
"social"
],
"heights": {
"24": {
"width": 24,
"path": "<g><rect fill=\"none\" height=\"24\" width=\"24\"></rect></g><g><g><g><path d=\"M13.94,8.31C13.62,7.52,12.85,7,12,7s-1.62,0.52-1.94,1.31L7,16h3.5v6h3v-6H17L13.94,8.31z\"></path><circle cx=\"12\" cy=\"4\" r=\"2\"></circle></g></g></g>"
},
"20": {
"width": 20,
"path": "<g><rect fill=\"none\" height=\"20\" width=\"20\" x=\"0\"></rect></g><g><g><circle cx=\"10\" cy=\"3.75\" r=\"1.75\"></circle><path d=\"M11.39,7.92C11.15,7.36,10.61,7,10,7S8.85,7.36,8.61,7.92L6,14h3v4h2v-4h3L11.39,7.92z\"></path></g></g>"
}
}
},
"6_ft_apart": {
"name": "6_ft_apart",
"keywords": [
"social"
],
"heights": {
"24": {
"width": 24,
"path": "<rect fill=\"none\" height=\"24\" width=\"24\" x=\"0\"></rect><path d=\"M6,6c1.1,0,2-0.9,2-2S7.1,2,6,2S4,2.9,4,4S4.9,6,6,6z M10,9.43c0-0.81-0.48-1.53-1.22-1.85C7.93,7.21,6.99,7,6,7 C5.01,7,4.07,7.21,3.22,7.58C2.48,7.9,2,8.62,2,9.43V10h8V9.43z M18,6c1.1,0,2-0.9,2-2s-0.9-2-2-2s-2,0.9-2,2S16.9,6,18,6z M22,9.43 c0-0.81-0.48-1.53-1.22-1.85C19.93,7.21,18.99,7,18,7c-0.99,0-1.93,0.21-2.78,0.58C14.48,7.9,14,8.62,14,9.43V10h8V9.43z M19,17 v-2.01L5,15v2l-3-3l3-3v2.01L19,13v-2l3,3L19,17z M10,19v-1H7.5C7.22,18,7,18.22,7,18.5v3C7,21.78,7.22,22,7.5,22h2 c0.28,0,0.5-0.22,0.5-0.5V20c0-0.28-0.22-0.5-0.5-0.5H8V19H10z M9,20.5V21H8v-0.5H9z M17.5,19h-1v3h-1v-3h-1v-1h3V19z M12.5,19v0.5 h1v1h-1V22h-1v-4H14v1H12.5z\"></path>"
}
}
},
"fitbit": {
"name": "fitbit",
"keywords": [
"social"
],
"heights": {
"24": {
"width": 24,
"path": "<rect fill=\"none\" height=\"24\" width=\"24\"></rect><path d=\"M19.89,13.89c1.04,0,1.89-0.85,1.89-1.89s-0.85-1.89-1.89-1.89C18.85,10.11,18,10.96,18,12S18.85,13.89,19.89,13.89z M15.65,13.68c0.93,0,1.68-0.75,1.68-1.68s-0.75-1.68-1.68-1.68c-0.93,0-1.68,0.75-1.68,1.68S14.72,13.68,15.65,13.68z M15.65,9.42 c0.93,0,1.68-0.75,1.68-1.68c0-0.93-0.75-1.68-1.68-1.68c-0.93,0-1.68,0.75-1.68,1.68C13.97,8.67,14.72,9.42,15.65,9.42z M15.65,17.93c0.93,0,1.68-0.75,1.68-1.68c0-0.93-0.75-1.68-1.68-1.68c-0.93,0-1.68,0.75-1.68,1.68 C13.97,17.17,14.72,17.93,15.65,17.93z M11.41,13.47c0.81,0,1.47-0.66,1.47-1.47s-0.66-1.47-1.47-1.47c-0.81,0-1.47,0.66-1.47,1.47 S10.59,13.47,11.41,13.47z M11.41,9.21c0.81,0,1.47-0.66,1.47-1.47s-0.66-1.47-1.47-1.47c-0.81,0-1.47,0.66-1.47,1.47 S10.59,9.21,11.41,9.21z M11.41,17.73c0.81,0,1.47-0.66,1.47-1.47c0-0.81-0.66-1.47-1.47-1.47c-0.81,0-1.47,0.66-1.47,1.47 C9.93,17.07,10.59,17.73,11.41,17.73z M11.41,22c0.81,0,1.47-0.66,1.47-1.47c0-0.81-0.66-1.47-1.47-1.47 c-0.81,0-1.47,0.66-1.47,1.47C9.93,21.34,10.59,22,11.41,22z M11.41,4.94c0.81,0,1.47-0.66,1.47-1.47S12.22,2,11.41,2 c-0.81,0-1.47,0.66-1.47,1.47S10.59,4.94,11.41,4.94z M7.16,13.26c0.7,0,1.26-0.57,1.26-1.26s-0.57-1.26-1.26-1.26 c-0.7,0-1.26,0.57-1.26,1.26S6.46,13.26,7.16,13.26z M7.16,17.51c0.7,0,1.26-0.57,1.26-1.26c0-0.7-0.57-1.26-1.26-1.26 c-0.7,0-1.26,0.57-1.26,1.26C5.9,16.94,6.46,17.51,7.16,17.51z M7.16,9.02c0.7,0,1.26-0.57,1.26-1.26c0-0.7-0.57-1.26-1.26-1.26 c-0.7,0-1.26,0.57-1.26,1.26C5.9,8.45,6.46,9.02,7.16,9.02z M3.29,13.05c0.58,0,1.05-0.47,1.05-1.05s-0.47-1.05-1.05-1.05 c-0.58,0-1.05,0.47-1.05,1.05S2.71,13.05,3.29,13.05z\"></path>"
},
"20": {
"width": 20,
"path": "<rect fill=\"none\" height=\"20\" width=\"20\"></rect><path d=\"M16.31,11.51c0.83,0,1.51-0.68,1.51-1.51s-0.68-1.51-1.51-1.51c-0.83,0-1.51,0.68-1.51,1.51S15.48,11.51,16.31,11.51z M12.92,11.34c0.74,0,1.34-0.6,1.34-1.34s-0.6-1.34-1.34-1.34s-1.34,0.6-1.34,1.34S12.18,11.34,12.92,11.34z M12.92,7.94 c0.74,0,1.34-0.6,1.34-1.34c0-0.74-0.6-1.34-1.34-1.34s-1.34,0.6-1.34,1.34C11.58,7.33,12.18,7.94,12.92,7.94z M12.92,14.74 c0.74,0,1.34-0.6,1.34-1.34c0-0.74-0.6-1.34-1.34-1.34s-1.34,0.6-1.34,1.34C11.58,14.14,12.18,14.74,12.92,14.74z M9.52,11.18 c0.65,0,1.18-0.53,1.18-1.18s-0.53-1.18-1.18-1.18c-0.65,0-1.18,0.53-1.18,1.18S8.87,11.18,9.52,11.18z M9.52,7.77 c0.65,0,1.18-0.53,1.18-1.18s-0.53-1.18-1.18-1.18c-0.65,0-1.18,0.53-1.18,1.18S8.87,7.77,9.52,7.77z M9.52,14.59 c0.65,0,1.18-0.53,1.18-1.18c0-0.65-0.53-1.18-1.18-1.18c-0.65,0-1.18,0.53-1.18,1.18C8.35,14.06,8.87,14.59,9.52,14.59z M9.52,18 c0.65,0,1.18-0.53,1.18-1.18c0-0.65-0.53-1.18-1.18-1.18c-0.65,0-1.18,0.53-1.18,1.18C8.35,17.47,8.87,18,9.52,18z M9.52,4.36 c0.65,0,1.18-0.53,1.18-1.18S10.17,2,9.52,2C8.87,2,8.35,2.53,8.35,3.18S8.87,4.36,9.52,4.36z M6.13,11.01 c0.56,0,1.01-0.45,1.01-1.01S6.69,8.99,6.13,8.99c-0.56,0-1.01,0.45-1.01,1.01S5.57,11.01,6.13,11.01z M6.13,14.41 c0.56,0,1.01-0.45,1.01-1.01c0-0.56-0.45-1.01-1.01-1.01c-0.56,0-1.01,0.45-1.01,1.01C5.12,13.95,5.57,14.41,6.13,14.41z M6.13,7.61 c0.56,0,1.01-0.45,1.01-1.01c0-0.56-0.45-1.01-1.01-1.01c-0.56,0-1.01,0.45-1.01,1.01C5.12,7.16,5.57,7.61,6.13,7.61z M3.04,10.84 c0.46,0,0.84-0.38,0.84-0.84S3.5,9.16,3.04,9.16C2.57,9.16,2.2,9.54,2.2,10S2.57,10.84,3.04,10.84z\"></path>"
}
}
},
"precision_manufacturing": {
"name": "precision_manufacturing",
"keywords": [
"social"
],
"heights": {
"24": {
"width": 24,
"path": "<g><rect fill=\"none\" height=\"24\" width=\"24\"></rect></g><g><path d=\"M19.93,8.35l-3.6,1.68L14,7.7V6.3l2.33-2.33l3.6,1.68c0.38,0.18,0.82,0.01,1-0.36c0.18-0.38,0.01-0.82-0.36-1l-3.92-1.83 c-0.38-0.18-0.83-0.1-1.13,0.2L13.78,4.4C13.6,4.16,13.32,4,13,4c-0.55,0-1,0.45-1,1v1H8.82C8.4,4.84,7.3,4,6,4C4.34,4,3,5.34,3,7 c0,1.1,0.6,2.05,1.48,2.58L7.08,18H6c-1.1,0-2,0.9-2,2v1h13v-1c0-1.1-0.9-2-2-2h-1.62L8.41,8.77C8.58,8.53,8.72,8.28,8.82,8H12v1 c0,0.55,0.45,1,1,1c0.32,0,0.6-0.16,0.78-0.4l1.74,1.74c0.3,0.3,0.75,0.38,1.13,0.2l3.92-1.83c0.38-0.18,0.54-0.62,0.36-1 C20.75,8.34,20.31,8.17,19.93,8.35z M6,8C5.45,8,5,7.55,5,7c0-0.55,0.45-1,1-1s1,0.45,1,1C7,7.55,6.55,8,6,8z M11.11,18H9.17 l-2.46-8h0.1L11.11,18z\"></path></g>"
},
"20": {
"width": 20,
"path": "<g><rect fill=\"none\" height=\"20\" width=\"20\" x=\"0\"></rect></g><g><path d=\"M10.5,9C10.78,9,11,8.78,11,8.5V8.43l1.43,1.43c0.15,0.15,0.37,0.19,0.56,0.1l2.72-1.27c0.25-0.12,0.36-0.41,0.24-0.66v0 c-0.12-0.25-0.41-0.36-0.66-0.24l-2.4,1.12L11,7.01V6.99l1.89-1.89l2.4,1.12c0.25,0.12,0.55,0.01,0.66-0.24v0 c0.12-0.25,0.01-0.55-0.24-0.66l-2.72-1.27C12.8,3.96,12.58,4,12.43,4.15L11,5.57V5.5C11,5.22,10.78,5,10.5,5S10,5.22,10,5.5v1 H7.93c-0.26-1-1.27-1.71-2.4-1.45C4.8,5.22,4.21,5.82,4.05,6.54C3.83,7.56,4.37,8.47,5.21,8.84L6.5,14H6c-0.55,0-1,0.45-1,1v1h8v-1 c0-0.55-0.45-1-1-1h-1.14L7.56,8.23C7.73,8.02,7.86,7.77,7.93,7.5H10v1C10,8.78,10.22,9,10.5,9z M6,8C5.45,8,5,7.55,5,7 c0-0.55,0.45-1,1-1s1,0.45,1,1C7,7.55,6.55,8,6,8z M9.38,14H7.82L6.65,9.28h0.04L9.38,14z\"></path></g>"
}
}
},
"king_bed": {
"name": "king_bed",
"keywords": [
"social"
],
"heights": {
"24": {
"width": 24,
"path": "<g><rect fill=\"none\" height=\"24\" width=\"24\"></rect></g><g><path d=\"M22,12c0-1.1-0.9-2-2-2V7c0-1.1-0.9-2-2-2H6C4.9,5,4,5.9,4,7v3c-1.1,0-2,0.9-2,2v5h1.33L4,19h1l0.67-2h12.67L19,19h1 l0.67-2H22V12z M18,10h-5V7h5V10z M6,7h5v3H6V7z M4,12h16v3H4V12z\"></path></g>"
},
"20": {
"width": 20,
"path": "<g><rect fill=\"none\" height=\"20\" width=\"20\" x=\"0\"></rect></g><g><g><rect fill=\"none\" height=\"2\" width=\"4.5\" x=\"10.5\" y=\"6\"></rect><rect fill=\"none\" height=\"2\" width=\"4.5\" x=\"5\" y=\"6\"></rect><polygon fill=\"none\" points=\"9.5,9 4,9 4,12 16,12 16,9 10.5,9\"></polygon><path d=\"M16,8V6c0-0.55-0.45-1-1-1H5C4.45,5,4,5.45,4,6v2C3.45,8,3,8.45,3,9v4h1l0.75,2h0.5L6,13h8l0.75,2h0.5L16,13h1V9 C17,8.45,16.55,8,16,8z M10.5,6H15v2h-4.5V6z M5,6h4.5v2H5V6z M16,12H4V9h12V12z\"></path></g></g>"
}
}
},
"reduce_capacity": {
"name": "reduce_capacity",
"keywords": [
"social"
],
"heights": {
"24": {
"width": 24,
"path": "<rect fill=\"none\" height=\"24\" width=\"24\"></rect><path d=\"M16,4c0-1.1,0.9-2,2-2s2,0.9,2,2s-0.9,2-2,2S16,5.1,16,4z M20.78,7.58C19.93,7.21,18.99,7,18,7c-0.67,0-1.31,0.1-1.92,0.28 C16.66,7.83,17,8.6,17,9.43V10h5V9.43C22,8.62,21.52,7.9,20.78,7.58z M6,6c1.1,0,2-0.9,2-2S7.1,2,6,2S4,2.9,4,4S4.9,6,6,6z M7.92,7.28C7.31,7.1,6.67,7,6,7C5.01,7,4.07,7.21,3.22,7.58C2.48,7.9,2,8.62,2,9.43V10h5V9.43C7,8.6,7.34,7.83,7.92,7.28z M10,4 c0-1.1,0.9-2,2-2s2,0.9,2,2s-0.9,2-2,2S10,5.1,10,4z M16,10H8V9.43C8,8.62,8.48,7.9,9.22,7.58C10.07,7.21,11.01,7,12,7 c0.99,0,1.93,0.21,2.78,0.58C15.52,7.9,16,8.62,16,9.43V10z M15,16c0-1.1,0.9-2,2-2s2,0.9,2,2s-0.9,2-2,2S15,17.1,15,16z M21,22h-8 v-0.57c0-0.81,0.48-1.53,1.22-1.85C15.07,19.21,16.01,19,17,19c0.99,0,1.93,0.21,2.78,0.58C20.52,19.9,21,20.62,21,21.43V22z M5,16 c0-1.1,0.9-2,2-2s2,0.9,2,2s-0.9,2-2,2S5,17.1,5,16z M11,22H3v-0.57c0-0.81,0.48-1.53,1.22-1.85C5.07,19.21,6.01,19,7,19 c0.99,0,1.93,0.21,2.78,0.58C10.52,19.9,11,20.62,11,21.43V22z M12.75,13v-2h-1.5v2H9l3,3l3-3H12.75z\"></path>"
}
}
},
"face_3": {
"name": "face_3",
"keywords": [
"social"
],
"heights": {
"24": {
"width": 24,
"path": "<g><rect fill=\"none\" height=\"24\" width=\"24\"></rect></g><g><g><circle cx=\"9\" cy=\"13\" r=\"1.25\"></circle><circle cx=\"15\" cy=\"13\" r=\"1.25\"></circle><path d=\"M22.91,11.96C22.39,6.32,17.66,2,12,2S1.61,6.32,1.09,11.96l-0.9,9.86C0.09,22.99,1.01,24,2.19,24h19.62 c1.18,0,2.1-1.01,1.99-2.18L22.91,11.96z M13,4.07c2.26,0.28,4.22,1.51,5.49,3.28C17.91,7.75,17.23,8,16.5,8 C14.57,8,13,6.43,13,4.5V4.07z M11,4.07V4.5C11,6.43,9.43,8,7.5,8C6.77,8,6.09,7.75,5.51,7.35C6.78,5.58,8.74,4.35,11,4.07z M4.54,9.13C5.41,9.68,6.43,10,7.5,10C9.36,10,11,9.07,12,7.65C13,9.07,14.64,10,16.5,10c1.07,0,2.09-0.32,2.96-0.87 C19.8,10.02,20,10.99,20,12c0,4.41-3.59,8-8,8s-8-3.59-8-8C4,10.99,4.2,10.02,4.54,9.13z M12,22H2.19l0.56-6.2 C4.25,19.44,7.82,22,12,22s7.75-2.56,9.25-6.2l0.56,6.2H12z\"></path></g></g>"
},
"20": {
"width": 20,
"path": "<g><rect fill=\"none\" height=\"20\" width=\"20\" x=\"0\"></rect></g><g><g><circle cx=\"7.5\" cy=\"10.5\" r=\"1\"></circle><circle cx=\"12.5\" cy=\"10.5\" r=\"1\"></circle><path d=\"M19.81,18.33l-0.93-8.38C18.38,5.42,14.55,2,10,2C5.45,2,1.62,5.42,1.12,9.95l-0.93,8.38C0.09,19.22,0.78,20,1.68,20 h16.65C19.22,20,19.91,19.22,19.81,18.33z M16.5,10c0,3.58-2.92,6.5-6.5,6.5S3.5,13.58,3.5,10c0-0.78,0.15-1.53,0.4-2.22 C4.61,8.24,5.44,8.5,6.32,8.5C7.85,8.5,9.2,7.72,10,6.53c0.8,1.19,2.15,1.97,3.68,1.97c0.87,0,1.71-0.26,2.42-0.72 C16.35,8.47,16.5,9.22,16.5,10z M10.75,3.55c1.94,0.22,3.63,1.31,4.66,2.86C14.92,6.78,14.32,7,13.68,7 c-1.62,0-2.93-1.32-2.93-2.93V3.55z M9.25,3.55v0.52C9.25,5.68,7.94,7,6.32,7C5.68,7,5.08,6.78,4.59,6.41 C5.62,4.85,7.31,3.77,9.25,3.55z M1.68,18.5l0.68-6.13C3.37,15.63,6.41,18,10,18s6.63-2.37,7.64-5.63l0.68,6.13H1.68z\"></path></g></g>"
}
}
},
"public": {
"name": "public",
"keywords": [
"social"
],
"heights": {
"2
gitextract_mkpyc8g7/ ├── .github/ │ ├── dependabot.yml │ └── workflows/ │ ├── ci.yml │ └── copilot-setup-steps.yml ├── .gitignore ├── .pre-commit-config.yaml ├── .readthedocs.yml ├── AGENTS.md ├── CHANGELOG.md ├── LICENSE ├── README.md ├── codecov.yml ├── docs/ │ ├── _static/ │ │ ├── furo.css │ │ └── 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 │ ├── 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.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 │ ├── 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/ │ │ ├── test_material_outlined_.txt │ │ ├── test_material_regular_.txt │ │ ├── test_material_round_.txt │ │ ├── test_material_sharp_.txt │ │ ├── test_material_twotone_.txt │ │ ├── test_octicons.txt │ │ └── test_tab_set_with_invalid_children.xml │ ├── test_misc.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 │ └── test_snippets.py └── tox.ini
SYMBOL INDEX (141 symbols across 15 files)
FILE: sphinx_design/__init__.py
function setup (line 11) | def setup(app: "Sphinx") -> dict:
FILE: sphinx_design/_compat.py
function findall (line 9) | def findall(node: Element) -> Callable[..., Iterable[Element]]:
function read_text (line 16) | def read_text(module: resources.Package, filename: str) -> str:
FILE: sphinx_design/article_info.py
function setup_article_info (line 9) | def setup_article_info(app: Sphinx):
class ArticleInfoDirective (line 14) | class ArticleInfoDirective(SdDirective):
method _parse_text (line 32) | def _parse_text(
method run_with_defaults (line 48) | def run_with_defaults(self) -> list[nodes.Node]: # noqa: PLR0915
FILE: sphinx_design/badges_buttons.py
function setup_badges_and_buttons (line 20) | def setup_badges_and_buttons(app: Sphinx) -> None:
function create_bdg_classes (line 46) | def create_bdg_classes(color: str | None, outline: bool) -> list[str]:
class BadgeRole (line 61) | class BadgeRole(SphinxRole):
method __init__ (line 64) | def __init__(self, color: str | None = None, *, outline: bool = False)...
method run (line 69) | def run(self) -> tuple[list[nodes.Node], list[nodes.system_message]]:
class LinkBadgeRole (line 80) | class LinkBadgeRole(ReferenceRole):
method __init__ (line 83) | def __init__(self, color: str | None = None, *, outline: bool = False)...
method run (line 88) | def run(self) -> tuple[list[nodes.Node], list[nodes.system_message]]:
class XRefBadgeRole (line 103) | class XRefBadgeRole(ReferenceRole):
method __init__ (line 106) | def __init__(self, color: str | None = None, *, outline: bool = False)...
method run (line 111) | def run(self) -> tuple[list[nodes.Node], list[nodes.system_message]]:
class _ButtonDirective (line 128) | class _ButtonDirective(SdDirective):
method create_ref_node (line 150) | def create_ref_node(
method run_with_defaults (line 156) | def run_with_defaults(self) -> list[nodes.Node]:
class ButtonLinkDirective (line 201) | class ButtonLinkDirective(_ButtonDirective):
method create_ref_node (line 204) | def create_ref_node(
class ButtonRefDirective (line 215) | class ButtonRefDirective(_ButtonDirective):
method create_ref_node (line 218) | def create_ref_node(
FILE: sphinx_design/cards.py
function setup_cards (line 32) | def setup_cards(app: Sphinx) -> None:
class CardContent (line 38) | class CardContent(NamedTuple):
class CardDirective (line 49) | class CardDirective(SdDirective):
method run_with_defaults (line 77) | def run_with_defaults(self) -> list[nodes.Node]:
method create_card (line 81) | def create_card( # noqa: PLR0915
method split_content (line 204) | def split_content(content: StringList, offset: int) -> CardContent:
method _create_component (line 229) | def _create_component(
method add_card_child_classes (line 247) | def add_card_child_classes(node):
class CardCarouselDirective (line 257) | class CardCarouselDirective(SdDirective):
method run_with_defaults (line 267) | def run_with_defaults(self) -> list[nodes.Node]:
FILE: sphinx_design/compiled/sd_tabs.js
function create_key (line 18) | function create_key(el) {
function ready (line 29) | function ready() {
function onSDLabelClick (line 89) | function onSDLabelClick() {
FILE: sphinx_design/dropdown.py
function setup_dropdown (line 21) | def setup_dropdown(app: Sphinx) -> None:
class dropdown_main (line 28) | class dropdown_main(nodes.Element, nodes.General): # noqa: N801
class dropdown_title (line 32) | class dropdown_title(nodes.TextElement, nodes.General): # noqa: N801
function visit_dropdown_main (line 36) | def visit_dropdown_main(self, node):
function depart_dropdown_main (line 43) | def depart_dropdown_main(self, node):
function visit_dropdown_title (line 47) | def visit_dropdown_title(self, node):
function depart_dropdown_title (line 51) | def depart_dropdown_title(self, node):
class DropdownDirective (line 55) | class DropdownDirective(SdDirective):
method run_with_defaults (line 90) | def run_with_defaults(self) -> list[nodes.Node]:
class DropdownHtmlTransform (line 137) | class DropdownHtmlTransform(SphinxPostTransform):
method run (line 151) | def run(self) -> None:
FILE: sphinx_design/extension.py
function setup_extension (line 30) | def setup_extension(app: Sphinx) -> None:
function capture_directives (line 65) | def capture_directives(app: Sphinx):
function update_css_js (line 79) | def update_css_js(app: Sphinx):
function update_css_links (line 114) | def update_css_links(app: Sphinx, env: BuildEnvironment):
function visit_container (line 120) | def visit_container(self, node: nodes.Node):
function depart_container (line 131) | def depart_container(self, node: nodes.Node):
function visit_depart_null (line 135) | def visit_depart_null(self, node: nodes.Element) -> None:
class Div (line 139) | class Div(SdDirective):
method run_with_defaults (line 150) | def run_with_defaults(self) -> list[nodes.Node]:
class AddFirstTitleCss (line 170) | class AddFirstTitleCss(SphinxTransform):
method apply (line 175) | def apply(self):
FILE: sphinx_design/grids.py
function setup_grids (line 26) | def setup_grids(app: Sphinx):
function _media_option (line 33) | def _media_option(
function row_columns_option (line 71) | def row_columns_option(argument: str | None) -> list[str]:
function item_columns_option (line 79) | def item_columns_option(argument: str | None) -> list[str]:
function gutter_option (line 87) | def gutter_option(argument: str | None) -> list[str]:
class GridDirective (line 95) | class GridDirective(SdDirective):
method run_with_defaults (line 112) | def run_with_defaults(self) -> list[nodes.Node]:
class GridItemDirective (line 157) | class GridItemDirective(SdDirective):
method run_with_defaults (line 174) | def run_with_defaults(self) -> list[nodes.Node]:
class GridItemCardDirective (line 204) | class GridItemCardDirective(SdDirective):
method run_with_defaults (line 236) | def run_with_defaults(self) -> list[nodes.Node]:
FILE: sphinx_design/icons.py
function setup_icons (line 29) | def setup_icons(app: Sphinx) -> None:
function get_octicon_data (line 50) | def get_octicon_data() -> dict[str, Any]:
function list_octicons (line 56) | def list_octicons() -> list[str]:
function get_octicon (line 64) | def get_octicon(
class OcticonRole (line 118) | class OcticonRole(SphinxRole):
method run (line 124) | def run(self) -> tuple[list[nodes.Node], list[nodes.system_message]]:
class AllOcticons (line 145) | class AllOcticons(SdDirective):
method run_with_defaults (line 155) | def run_with_defaults(self) -> list[nodes.Node]:
class fontawesome (line 184) | class fontawesome(nodes.Element, nodes.General): # noqa: N801
class FontawesomeRole (line 188) | class FontawesomeRole(SphinxRole):
method __init__ (line 194) | def __init__(self, style: str) -> None:
method run (line 198) | def run(self) -> tuple[list[nodes.Node], list[nodes.system_message]]:
function visit_fontawesome_html (line 209) | def visit_fontawesome_html(self, node):
function depart_fontawesome_html (line 213) | def depart_fontawesome_html(self, node):
function add_fontawesome_pkg (line 217) | def add_fontawesome_pkg(app, config):
function visit_fontawesome_latex (line 222) | def visit_fontawesome_latex(self, node):
function visit_fontawesome_warning (line 237) | def visit_fontawesome_warning(self, node: nodes.Element) -> None:
function get_material_icon_data (line 250) | def get_material_icon_data(style: str) -> dict[str, Any]:
function get_material_icon (line 256) | def get_material_icon(
class MaterialRole (line 311) | class MaterialRole(SphinxRole):
method __init__ (line 317) | def __init__(self, style: str) -> None:
method run (line 321) | def run(self) -> tuple[list[nodes.Node], list[nodes.system_message]]:
FILE: sphinx_design/shared.py
function setup_custom_directives (line 34) | def setup_custom_directives(
class SdDirective (line 79) | class SdDirective(SphinxDirective):
method run (line 93) | def run(self) -> list[nodes.Node]:
method run_with_defaults (line 114) | def run_with_defaults(self) -> list[nodes.Node]:
function create_component (line 122) | def create_component(
function is_component (line 138) | def is_component(node: nodes.Node, name: str):
function make_choice (line 146) | def make_choice(choices: Sequence[str]):
function _margin_or_padding_option (line 151) | def _margin_or_padding_option(
function margin_option (line 177) | def margin_option(argument: str | None) -> list[str]:
function padding_option (line 186) | def padding_option(argument: str | None) -> list[str]:
function text_align (line 193) | def text_align(argument: str | None) -> list[str]:
class PassthroughTextElement (line 199) | class PassthroughTextElement(nodes.TextElement):
FILE: sphinx_design/tabs.py
function setup_tabs (line 13) | def setup_tabs(app: Sphinx) -> None:
class TabSetDirective (line 22) | class TabSetDirective(SdDirective):
method run_with_defaults (line 31) | def run_with_defaults(self) -> list[nodes.Node]:
class TabItemDirective (line 57) | class TabItemDirective(SdDirective):
method run_with_defaults (line 87) | def run_with_defaults(self) -> list[nodes.Node]:
class TabSetCodeDirective (line 126) | class TabSetCodeDirective(SdDirective):
method run_with_defaults (line 137) | def run_with_defaults(self) -> list[nodes.Node]:
class sd_tab_input (line 179) | class sd_tab_input(nodes.Element, nodes.General): # noqa: N801
class sd_tab_label (line 183) | class sd_tab_label(nodes.TextElement, nodes.General): # noqa: N801
function visit_tab_input (line 187) | def visit_tab_input(self, node):
function depart_tab_input (line 194) | def depart_tab_input(self, node):
function visit_tab_label (line 200) | def visit_tab_label(self, node):
function depart_tab_label (line 208) | def depart_tab_label(self, node):
class TabSetHtmlTransform (line 212) | class TabSetHtmlTransform(SphinxPostTransform):
method run (line 218) | def run(self) -> None:
FILE: tests/conftest.py
class SphinxBuilder (line 23) | class SphinxBuilder:
method __init__ (line 24) | def __init__(self, app: SphinxTestApp, src_path: Path):
method src_path (line 29) | def src_path(self) -> Path:
method out_path (line 33) | def out_path(self) -> Path:
method build (line 36) | def build(self, assert_pass=True):
method status (line 43) | def status(self):
method warnings (line 47) | def warnings(self):
method get_doctree (line 50) | def get_doctree(
function sphinx_builder (line 72) | def sphinx_builder(tmp_path: Path, make_app, monkeypatch):
function normalize_doctree_xml (line 99) | def normalize_doctree_xml():
FILE: tests/test_misc.py
function test_octicons (line 6) | def test_octicons(file_regression):
function test_material (line 21) | def test_material(style, file_regression):
function test_tab_set_with_invalid_children (line 35) | def test_tab_set_with_invalid_children(
FILE: tests/test_snippets.py
function write_assets (line 22) | def write_assets(src_path: Path):
function test_snippets_rst (line 35) | def test_snippets_rst(
function test_snippets_myst (line 63) | def test_snippets_myst(
function test_snippets_rst_post (line 90) | def test_snippets_rst_post(
function test_snippets_myst_post (line 118) | def test_snippets_myst_post(
function test_sd_hide_title_rst (line 140) | def test_sd_hide_title_rst(
function test_sd_hide_title_myst (line 159) | def test_sd_hide_title_myst(
function test_sd_custom_directives (line 178) | def test_sd_custom_directives(
Copy disabled (too large)
Download .json
Condensed preview — 182 files, each showing path, character count, and a content snippet. Download the .json file for the full structured content (10,853K chars).
[
{
"path": ".github/dependabot.yml",
"chars": 592,
"preview": "# To get started with Dependabot version updates, you'll need to specify which\n# package ecosystems to update and where "
},
{
"path": ".github/workflows/ci.yml",
"chars": 3507,
"preview": "name: continuous-integration\n\non:\n push:\n branches: [main]\n tags:\n - 'v*'\n pull_request:\n\njobs:\n\n pre-comm"
},
{
"path": ".github/workflows/copilot-setup-steps.yml",
"chars": 1436,
"preview": "name: Copilot Setup Steps\n\n# Automatically run the setup steps when they are changed to allow for easy validation, and\n#"
},
{
"path": ".gitignore",
"chars": 2081,
"preview": "# OS files\n.DS_Store\n\n# Byte-compiled / optimized / DLL files\n__pycache__/\n*.py[cod]\n*$py.class\n\n# C extensions\n*.so\n\n# "
},
{
"path": ".pre-commit-config.yaml",
"chars": 1280,
"preview": "# Install pre-commit hooks via\n# pre-commit install\n\nexclude: >\n (?x)^(\n \\.vscode/settings\\.json|\n tests/.*"
},
{
"path": ".readthedocs.yml",
"chars": 245,
"preview": "version: 2\n\nbuild:\n os: ubuntu-22.04\n tools:\n python: \"3.11\"\n\npython:\n install:\n - method: pip\n path: "
},
{
"path": "AGENTS.md",
"chars": 11076,
"preview": "# AGENTS.md\n\nThis file provides guidance for AI coding agents working on the **sphinx-design** repository.\n\n## Project O"
},
{
"path": "CHANGELOG.md",
"chars": 8257,
"preview": "# Change Log\n\n## 0.7.0 - 2025-01-19\n\n### Dependencies\n\n- ⬆️ Drop Python 3.9 & 3.10, support Python 3.14 by {user}`chrisj"
},
{
"path": "LICENSE",
"chars": 1099,
"preview": "MIT License Copyright (c) 2023 Chris Sewell\n\nPermission is hereby granted, free\nof charge, to any person obtaining a cop"
},
{
"path": "README.md",
"chars": 3093,
"preview": "# sphinx-design\n\n[![Github-CI][github-ci]][github-link]\n[![Coverage Status][codecov-badge]][codecov-link]\n[![PyPI][pypi-"
},
{
"path": "codecov.yml",
"chars": 162,
"preview": "coverage:\n status:\n project:\n default:\n target: 85%\n threshold: 0.2%\n patch:\n default:\n "
},
{
"path": "docs/_static/furo.css",
"chars": 176,
"preview": "body {\n --sd-fontsize-dropdown: var(--admonition-font-size);\n --sd-fontsize-dropdown-title: var(--admonition-title"
},
{
"path": "docs/_static/sphinx_immaterial.css",
"chars": 547,
"preview": "body {\n --sd-fontsize-dropdown: .64rem;\n --sd-fontsize-dropdown-title: .64rem;\n --sd-fontweight-dropdown-title:"
},
{
"path": "docs/additional.md",
"chars": 1657,
"preview": "(special)=\n\n# Additional\n\nThese are additional components that are not part of the standard Materials Design or Bootstra"
},
{
"path": "docs/badges_buttons.md",
"chars": 8222,
"preview": "# Badges, Buttons & Icons {octicon}`rocket`\n\n(badges)=\n\n## Badges\n\nInline badges can be used as a labelling component.\nB"
},
{
"path": "docs/cards.md",
"chars": 6301,
"preview": "(sd-cards)=\n\n# Cards\n\nCards contain content and actions about a single subject.\nA card is a flexible and extensible cont"
},
{
"path": "docs/changelog.md",
"chars": 33,
"preview": "```{include} ../CHANGELOG.md\n```\n"
},
{
"path": "docs/conf.py",
"chars": 4284,
"preview": "\"\"\"Configuration file for the Sphinx documentation builder.\"\"\"\n\nimport os\n\nproject = \"Sphinx Design\"\ncopyright = \"2021, "
},
{
"path": "docs/css_classes.md",
"chars": 7323,
"preview": "# CSS Classes\n\nFor most roles/directive, it is preferentially recommended to use the available options to style componen"
},
{
"path": "docs/css_variables.md",
"chars": 2864,
"preview": "# CSS Variables\n\nAll colors used by sphinx-design are defined as [CSS variables](https://developer.mozilla.org/en-US/doc"
},
{
"path": "docs/dropdowns.md",
"chars": 2871,
"preview": "(sd-dropdowns)=\n\n# Dropdowns\n\nDropdowns can be used to toggle, usually *non-essential*, content and show it only when a "
},
{
"path": "docs/get_started.md",
"chars": 3912,
"preview": "# Getting Started\n\n```{article-info}\n:avatar: images/ebp-logo.png\n:avatar-link: https://executablebooks.org\n:author: \"[C"
},
{
"path": "docs/grids.md",
"chars": 6108,
"preview": "(sd-grids)=\n\n# Grids\n\n## Introduction\n\nGrids are based on a 12 column system, which can adapt to the size of the viewing"
},
{
"path": "docs/index.md",
"chars": 2867,
"preview": "---\nsd_hide_title: true\n---\n\n# sphinx-design\n\n::::::{div} landing-title\n:style: \"padding: 0.1rem 0.5rem 0.6rem 0; backgr"
},
{
"path": "docs/snippets/myst/article-info.txt",
"chars": 241,
"preview": "```{article-info}\n:avatar: images/ebp-logo.png\n:avatar-link: https://executablebooks.org/\n:avatar-outline: muted\n:author"
},
{
"path": "docs/snippets/myst/badge-basic.txt",
"chars": 605,
"preview": "{bdg}`plain badge`\n\n{bdg-primary}`primary`, {bdg-primary-line}`primary-line`\n\n{bdg-secondary}`secondary`, {bdg-secondary"
},
{
"path": "docs/snippets/myst/badge-link.txt",
"chars": 103,
"preview": "{bdg-link-primary}`https://example.com`\n\n{bdg-link-primary-line}`explicit title <https://example.com>`\n"
},
{
"path": "docs/snippets/myst/button-link.txt",
"chars": 299,
"preview": "```{button-link} https://example.com\n```\n\n```{button-link} https://example.com\nButton text\n```\n\n```{button-link} https:/"
},
{
"path": "docs/snippets/myst/card-basic.txt",
"chars": 39,
"preview": ":::{card} Card Title\n\nCard content\n:::\n"
},
{
"path": "docs/snippets/myst/card-carousel.txt",
"chars": 178,
"preview": "::::{card-carousel} 2\n\n:::{card} card 1\ncontent\n:::\n:::{card} card 2\nLonger\n\ncontent\n:::\n:::{card} card 3\n:::\n:::{card} "
},
{
"path": "docs/snippets/myst/card-head-foot.txt",
"chars": 60,
"preview": ":::{card} Card Title\nHeader\n^^^\nCard content\n+++\nFooter\n:::\n"
},
{
"path": "docs/snippets/myst/card-images.txt",
"chars": 393,
"preview": ":::::{grid} 2 3 3 4\n\n::::{grid-item}\n\n:::{card} Title\n:img-background: images/particle_background.jpg\n:class-card: sd-te"
},
{
"path": "docs/snippets/myst/card-link.txt",
"chars": 845,
"preview": "(cards-clickable)=\n\n## Clickable cards\n\nUsing the `link` and `link-type` options, you can turn an entire card into a cli"
},
{
"path": "docs/snippets/myst/card-title-link.txt",
"chars": 92,
"preview": "(target)=\n:::{card} Card Title <https://example.com> {ref}`link <target>`\n\nCard content\n:::\n"
},
{
"path": "docs/snippets/myst/div-basic.txt",
"chars": 80,
"preview": ":::{div} sd-text-center sd-font-italic sd-text-primary\nSome CSS styled text\n:::\n"
},
{
"path": "docs/snippets/myst/dropdown-basic.txt",
"chars": 144,
"preview": ":::{dropdown}\nDropdown content\n:::\n\n:::{dropdown} Dropdown title\nDropdown content\n:::\n\n:::{dropdown} Open dropdown\n:open"
},
{
"path": "docs/snippets/myst/dropdown-options.txt",
"chars": 214,
"preview": ":::{dropdown} Title\n:name: target\n:color: info\n:icon: alert\n:margin: 1\n:class-container: class-container\n:class-title: c"
},
{
"path": "docs/snippets/myst/grid-basic.txt",
"chars": 119,
"preview": "::::{grid} 1 2 3 4\n:outline:\n\n:::{grid-item}\nA\n:::\n:::{grid-item}\nB\n:::\n:::{grid-item}\nC\n:::\n:::{grid-item}\nD\n:::\n::::\n"
},
{
"path": "docs/snippets/myst/grid-card-columns.txt",
"chars": 146,
"preview": "::::{grid} 2\n:::{grid-item-card}\n:columns: auto\n\nA\n:::\n:::{grid-item-card}\n:columns: 12 6 6 6\n\nB\n:::\n:::{grid-item-card}"
},
{
"path": "docs/snippets/myst/grid-card.txt",
"chars": 88,
"preview": "::::{grid} 2\n:::{grid-item-card} Title 1\nA\n:::\n:::{grid-item-card} Title 2\nB\n:::\n::::\n"
},
{
"path": "docs/snippets/myst/grid-gutter.txt",
"chars": 171,
"preview": "::::{grid} 2\n:gutter: 1\n\n:::{grid-item-card}\nA\n:::\n:::{grid-item-card}\nB\n:::\n::::\n\n::::{grid} 2\n:gutter: 3 3 4 5\n\n:::{gr"
},
{
"path": "docs/snippets/myst/grid-nested.txt",
"chars": 396,
"preview": "::::::{grid} 1 1 2 2\n:gutter: 1\n\n:::::{grid-item}\n\n::::{grid} 1 1 1 1\n:gutter: 1\n\n:::{grid-item-card} Item 1.1\n\nMulti-li"
},
{
"path": "docs/snippets/myst/icon-fontawesome.txt",
"chars": 73,
"preview": "An icon {fas}`spinner;sd-bg-primary sd-bg-text-primary`, some more text.\n"
},
{
"path": "docs/snippets/myst/icon-material-design.txt",
"chars": 614,
"preview": "- A regular icon: {material-regular}`data_exploration;2em`, some more text\n- A coloured regular icon: {material-regular}"
},
{
"path": "docs/snippets/myst/icon-octicon.txt",
"chars": 69,
"preview": "A coloured icon: {octicon}`report;1em;sd-text-info`, some more text.\n"
},
{
"path": "docs/snippets/myst/tab-basic.txt",
"chars": 92,
"preview": "::::{tab-set}\n\n:::{tab-item} Label1\nContent 1\n:::\n\n:::{tab-item} Label2\nContent 2\n:::\n\n::::\n"
},
{
"path": "docs/snippets/myst/tab-code-set.txt",
"chars": 120,
"preview": "````{tab-set-code}\n\n```{literalinclude} ./snippet.py\n:language: python\n```\n\n```{code-block} javascript\na = 1;\n```\n\n````\n"
},
{
"path": "docs/snippets/myst/tab-options.txt",
"chars": 228,
"preview": "::::{tab-set}\n:class: class-set\n\n:::{tab-item} **Label**\n:name: target\n:selected:\n:class-container: class-container\n:cla"
},
{
"path": "docs/snippets/myst/tab-sync.txt",
"chars": 281,
"preview": "::::{tab-set}\n:sync-group: category\n\n:::{tab-item} Label1\n:sync: key1\n\nContent 1\n:::\n\n:::{tab-item} Label2\n:sync: key2\n\n"
},
{
"path": "docs/snippets/rst/article-info.txt",
"chars": 265,
"preview": ".. article-info::\n :avatar: images/ebp-logo.png\n :avatar-link: https://executablebooks.org/\n :avatar-outline: m"
},
{
"path": "docs/snippets/rst/badge-basic.txt",
"chars": 605,
"preview": ":bdg:`plain badge`\n\n:bdg-primary:`primary`, :bdg-primary-line:`primary-line`\n\n:bdg-secondary:`secondary`, :bdg-secondary"
},
{
"path": "docs/snippets/rst/badge-link.txt",
"chars": 103,
"preview": ":bdg-link-primary:`https://example.com`\n\n:bdg-link-primary-line:`explicit title <https://example.com>`\n"
},
{
"path": "docs/snippets/rst/button-link.txt",
"chars": 308,
"preview": ".. button-link:: https://example.com\n\n.. button-link:: https://example.com\n\n Button text\n\n.. button-link:: https://ex"
},
{
"path": "docs/snippets/rst/card-basic.txt",
"chars": 39,
"preview": ".. card:: Card Title\n\n Card content\n"
},
{
"path": "docs/snippets/rst/card-carousel.txt",
"chars": 203,
"preview": ".. card-carousel:: 2\n\n .. card:: card 1\n\n content\n\n .. card:: card 2\n\n Longer\n\n content\n\n "
},
{
"path": "docs/snippets/rst/card-head-foot.txt",
"chars": 77,
"preview": ".. card:: Card Title\n\n Header\n ^^^\n Card content\n +++\n Footer\n"
},
{
"path": "docs/snippets/rst/card-images.txt",
"chars": 533,
"preview": ".. grid:: 2 3 3 4\n\n .. grid-item::\n\n .. card:: Title\n :img-background: images/particle_background.j"
},
{
"path": "docs/snippets/rst/card-link.txt",
"chars": 896,
"preview": ".. _cards-clickable:\n\nClickable cards\n...............\n\nUsing the ``link`` and ``link-type`` options, you can turn an ent"
},
{
"path": "docs/snippets/rst/card-title-link.txt",
"chars": 92,
"preview": ".. _target:\n.. card:: Card Title https://example.com :ref:`link <target>`\n\n Card content\n"
},
{
"path": "docs/snippets/rst/div-basic.txt",
"chars": 81,
"preview": ".. div:: sd-text-center sd-font-italic sd-text-primary\n\n Some CSS styled text\n"
},
{
"path": "docs/snippets/rst/dropdown-basic.txt",
"chars": 150,
"preview": ".. dropdown::\n\n Dropdown content\n\n.. dropdown:: Dropdown title\n\n Dropdown content\n\n.. dropdown:: Open dropdown\n "
},
{
"path": "docs/snippets/rst/dropdown-options.txt",
"chars": 242,
"preview": ".. dropdown:: Title\n :name: target\n :color: info\n :icon: alert\n :margin: 1\n :class-container: class-conta"
},
{
"path": "docs/snippets/rst/grid-basic.txt",
"chars": 156,
"preview": ".. grid:: 1 2 3 4\n :outline:\n\n .. grid-item::\n\n A\n\n .. grid-item::\n\n B\n\n .. grid-item::\n\n "
},
{
"path": "docs/snippets/rst/grid-card-columns.txt",
"chars": 191,
"preview": ".. grid:: 2\n\n .. grid-item-card::\n :columns: auto\n\n A\n\n .. grid-item-card::\n :columns: 12 6 6"
},
{
"path": "docs/snippets/rst/grid-card.txt",
"chars": 102,
"preview": ".. grid:: 2\n\n .. grid-item-card:: Title 1\n\n A\n\n .. grid-item-card:: Title 2\n\n B\n"
},
{
"path": "docs/snippets/rst/grid-gutter.txt",
"chars": 205,
"preview": ".. grid:: 2\n :gutter: 1\n\n .. grid-item-card::\n\n A\n\n .. grid-item-card::\n\n B\n\n.. grid:: 2\n :gut"
},
{
"path": "docs/snippets/rst/grid-nested.txt",
"chars": 536,
"preview": ".. grid:: 1 1 2 2\n :gutter: 1\n\n .. grid-item::\n\n .. grid:: 1 1 1 1\n :gutter: 1\n\n .. g"
},
{
"path": "docs/snippets/rst/icon-fontawesome.txt",
"chars": 73,
"preview": "An icon :fas:`spinner;sd-bg-primary sd-bg-text-primary`, some more text.\n"
},
{
"path": "docs/snippets/rst/icon-material-design.txt",
"chars": 614,
"preview": "- A regular icon: :material-regular:`data_exploration;2em`, some more text\n- A coloured regular icon: :material-regular:"
},
{
"path": "docs/snippets/rst/icon-octicon.txt",
"chars": 69,
"preview": "A coloured icon: :octicon:`report;1em;sd-text-info`, some more text.\n"
},
{
"path": "docs/snippets/rst/tab-basic.txt",
"chars": 103,
"preview": ".. tab-set::\n\n .. tab-item:: Label1\n\n Content 1\n\n .. tab-item:: Label2\n\n Content 2\n"
},
{
"path": "docs/snippets/rst/tab-code-set.txt",
"chars": 130,
"preview": ".. tab-set-code::\n\n .. literalinclude:: ./snippet.py\n :language: python\n\n .. code-block:: javascript\n\n "
},
{
"path": "docs/snippets/rst/tab-options.txt",
"chars": 273,
"preview": ".. tab-set::\n :class: class-set\n\n .. tab-item:: **Label**\n :name: target\n :selected:\n :class-"
},
{
"path": "docs/snippets/rst/tab-sync.txt",
"chars": 339,
"preview": ".. tab-set::\n :sync-group: category\n\n .. tab-item:: Label1\n :sync: key1\n\n Content 1\n\n .. tab-item"
},
{
"path": "docs/tabs.md",
"chars": 4885,
"preview": "(sd-tabs)=\n\n# Tabs\n\nTabs organize and allow navigation between groups of content that are related and at the same level "
},
{
"path": "git_rebase_theme_branches.sh",
"chars": 214,
"preview": "#!/bin/sh\n\nset -e\n\nfmt='\ngit checkout %(refname)\ngit rebase main\ngit push origin HEAD:%(refname:strip=3) --force\n'\n\neval"
},
{
"path": "package.json",
"chars": 302,
"preview": "{\n \"name\": \"sphinx-design-compiler\",\n \"version\": \"0.0.1\",\n \"description\": \"Scripts for compiling the sphinx-design as"
},
{
"path": "pyproject.toml",
"chars": 2941,
"preview": "[build-system]\nrequires = [\"flit_core >=3.4,<4\"]\nbuild-backend = \"flit_core.buildapi\"\n\n[project]\nname = \"sphinx_design\"\n"
},
{
"path": "sphinx_design/__init__.py",
"chars": 451,
"preview": "\"\"\"A sphinx extension for designing beautiful, view size responsive web components.\"\"\"\n\nfrom typing import TYPE_CHECKING"
},
{
"path": "sphinx_design/_compat.py",
"chars": 562,
"preview": "\"\"\"Helpers for cross compatibility across dependency versions.\"\"\"\n\nfrom collections.abc import Callable, Iterable\nfrom i"
},
{
"path": "sphinx_design/article_info.py",
"chars": 6334,
"preview": "from docutils import nodes\nfrom docutils.parsers.rst import directives\nfrom sphinx.application import Sphinx\n\nfrom .icon"
},
{
"path": "sphinx_design/badges_buttons.py",
"chars": 8171,
"preview": "from docutils import nodes\nfrom docutils.parsers.rst import directives\nfrom sphinx import addnodes\nfrom sphinx.applicati"
},
{
"path": "sphinx_design/cards.py",
"chars": 10350,
"preview": "import re\nfrom typing import NamedTuple\n\nfrom docutils import nodes\nfrom docutils.parsers.rst import directives\nfrom doc"
},
{
"path": "sphinx_design/compiled/__init__.py",
"chars": 0,
"preview": ""
},
{
"path": "sphinx_design/compiled/material-icons_LICENSE",
"chars": 577,
"preview": " Copyright 2024 Google\n\n Licensed under the Apache License, Version 2.0 (the \"License\");\n you may not use this fil"
},
{
"path": "sphinx_design/compiled/material-icons_VERSION.txt",
"chars": 106,
"preview": "using github.com/google/material-design-icons\nv4.0.0-116-ge9da21\ne9da2194e65080a829d670ae39a99c7b5fc09548\n"
},
{
"path": "sphinx_design/compiled/material_outlined.json",
"chars": 1615442,
"preview": "{\n \"auto_delete\": {\n \"name\": \"auto_delete\",\n \"keywords\": [\n \"alert\"\n ],\n \"heights\": {\n \"24\": {\n "
},
{
"path": "sphinx_design/compiled/material_regular.json",
"chars": 1517485,
"preview": "{\n \"auto_delete\": {\n \"name\": \"auto_delete\",\n \"keywords\": [\n \"alert\"\n ],\n \"heights\": {\n \"24\": {\n "
},
{
"path": "sphinx_design/compiled/material_round.json",
"chars": 2004880,
"preview": "{\n \"auto_delete\": {\n \"name\": \"auto_delete\",\n \"keywords\": [\n \"alert\"\n ],\n \"heights\": {\n \"24\": {\n "
},
{
"path": "sphinx_design/compiled/material_sharp.json",
"chars": 1373232,
"preview": "{\n \"auto_delete\": {\n \"name\": \"auto_delete\",\n \"keywords\": [\n \"alert\"\n ],\n \"heights\": {\n \"24\": {\n "
},
{
"path": "sphinx_design/compiled/material_twotone.json",
"chars": 1998322,
"preview": "{\n \"auto_delete\": {\n \"name\": \"auto_delete\",\n \"keywords\": [\n \"alert\"\n ],\n \"heights\": {\n \"24\": {\n "
},
{
"path": "sphinx_design/compiled/octicon_LICENSE",
"chars": 1068,
"preview": "MIT License\n\nCopyright (c) 2023 GitHub Inc.\n\nPermission is hereby granted, free of charge, to any person obtaining a cop"
},
{
"path": "sphinx_design/compiled/octicons.json",
"chars": 1016739,
"preview": "{\n \"accessibility\": {\n \"name\": \"accessibility\",\n \"keywords\": [],\n \"heights\": {\n \"16\": {\n \"width\": "
},
{
"path": "sphinx_design/compiled/sd_tabs.js",
"chars": 2780,
"preview": "// @ts-check\n\n// Extra JS capability for selected tabs to be synced\n// The selection is stored in local storage so that "
},
{
"path": "sphinx_design/dropdown.py",
"chars": 8007,
"preview": "\"\"\"Originally Adapted from sphinxcontrib.details.directive\"\"\"\n\nfrom docutils import nodes\nfrom docutils.parsers.rst impo"
},
{
"path": "sphinx_design/extension.py",
"chars": 6690,
"preview": "from contextlib import contextmanager\nfrom functools import partial\nimport hashlib\nfrom pathlib import Path\n\nfrom docuti"
},
{
"path": "sphinx_design/grids.py",
"chars": 9746,
"preview": "from docutils import nodes\nfrom docutils.parsers.rst import directives\nfrom sphinx.application import Sphinx\nfrom sphinx"
},
{
"path": "sphinx_design/icons.py",
"chars": 10807,
"preview": "from collections.abc import Sequence\nfrom functools import lru_cache\nimport json\nimport re\nfrom typing import Any\n\nfrom "
},
{
"path": "sphinx_design/py.typed",
"chars": 26,
"preview": "# Marker file for PEP 561\n"
},
{
"path": "sphinx_design/shared.py",
"chars": 7023,
"preview": "\"\"\"Shared constants and functions.\"\"\"\n\nfrom __future__ import annotations\n\nfrom collections.abc import Sequence\nfrom typ"
},
{
"path": "sphinx_design/tabs.py",
"chars": 10686,
"preview": "from docutils import nodes\nfrom docutils.parsers.rst import directives\nfrom sphinx.application import Sphinx\nfrom sphinx"
},
{
"path": "style/_animations.scss",
"chars": 1453,
"preview": "@keyframes sd-slide-from-left {\n 0% {\n transform: translateX(-100%);\n }\n 100% {\n transform: translateX(0);\n }\n"
},
{
"path": "style/_badge.scss",
"chars": 717,
"preview": "// Adapted from Bootstrap v5.0.2 (https://getbootstrap.com/)\n// Copyright 2011-2019 The Bootstrap Authors\n// Copyright 2"
},
{
"path": "style/_borders.scss",
"chars": 983,
"preview": "$borders: (\n 0: 0,\n 1: 1px,\n 2: 2px,\n 3: 3px,\n 4: 4px,\n 5: 5px,\n);\n\n@each $name, $value in $borders {\n .sd-border"
},
{
"path": "style/_button.scss",
"chars": 2411,
"preview": "// Adapted from Bootstrap v5.0.2 (https://getbootstrap.com/)\n// Copyright 2011-2019 The Bootstrap Authors\n// Copyright 2"
},
{
"path": "style/_cards.scss",
"chars": 3215,
"preview": "// Adapted from Bootstrap v5.0.2 (https://getbootstrap.com/)\n// Copyright 2011-2019 The Bootstrap Authors\n// Copyright 2"
},
{
"path": "style/_colors.scss",
"chars": 2568,
"preview": "$white: #fff !default;\n$white-50: rgba(255, 255, 255, .5) !default;\n$gray-100: #f8f9fa !default;\n$gray-200: #e9ecef !def"
},
{
"path": "style/_display.scss",
"chars": 1928,
"preview": "@use \"spacing\" as *;\n\n.sd-d-none {\n display: none !important;\n}\n\n.sd-d-inline {\n display: inline !important;\n}\n\n.sd-d-"
},
{
"path": "style/_dropdown.scss",
"chars": 3436,
"preview": "details.sd-dropdown {\n\n position: relative;\n font-size: var(--sd-fontsize-dropdown);\n\n &:hover {\n cursor: pointer;"
},
{
"path": "style/_grids.scss",
"chars": 3436,
"preview": "// Adapted from Bootstrap v5.0.2 (https://getbootstrap.com/)\n// See: dist/css/bootstrap-grid.css\n// Copyright 2011-2021 "
},
{
"path": "style/_icons.scss",
"chars": 490,
"preview": ".sd-octicon,\n.sd-material-icon {\n display: inline-block;\n fill: currentColor;\n vertical-align: middle;\n}\n\n$avatar-siz"
},
{
"path": "style/_overrides.scss",
"chars": 241,
"preview": "// Overrides for non-bootstrap themes (such as alabaster)\n\n.sd-sphinx-override,\n.sd-sphinx-override * {\n -moz-box-sizin"
},
{
"path": "style/_sizing.scss",
"chars": 256,
"preview": "// Width and height\n\n$sizes: (\n 25: 25%,\n 50: 50%,\n 75: 75%,\n 100: 100%,\n auto: auto,\n);\n\n@each $prop, $abbrev in ("
},
{
"path": "style/_spacing.scss",
"chars": 1529,
"preview": "$spacer: 1rem;\n$spacings: (\n 0: 0,\n 1: $spacer * 0.25,\n 2: $spacer * 0.5,\n 3: $spacer,\n 4: $spacer * 1.5,\n 5: $spa"
},
{
"path": "style/_tabs.scss",
"chars": 1812,
"preview": "// Tabbed block container\n.sd-tab-set {\n border-radius: 0.125rem;\n display: flex;\n flex-wrap: wrap;\n margin: 1em 0;\n"
},
{
"path": "style/_text.scss",
"chars": 1387,
"preview": ".sd-text-justify {\n text-align: justify !important;\n}\n\n.sd-text-left {\n text-align: left !important;\n}\n\n.sd-text-right"
},
{
"path": "style/_variables.scss",
"chars": 1519,
"preview": "@use \"colors\" as *;\n\n:root {\n // semantic colors\n @each $color, $value in $semantic-colors {\n --sd-color-#{$color}:"
},
{
"path": "style/index.scss",
"chars": 359,
"preview": "@use './colors' as *;\n@use './spacing' as *;\n@use './sizing' as *;\n@use './display' as *;\n@use './text' as *;\n@use './bo"
},
{
"path": "tests/__init__.py",
"chars": 0,
"preview": ""
},
{
"path": "tests/conftest.py",
"chars": 4094,
"preview": "import os\nfrom pathlib import Path\nimport re\nfrom typing import Any\n\nfrom docutils import __version_info__ as docutils_v"
},
{
"path": "tests/test_misc/test_material_outlined_.txt",
"chars": 37403,
"preview": "10k: 24\n10mp: 24\n11mp: 24\n123: 24,20\n12mp: 24\n13mp: 24\n14mp: 24\n15mp: 24\n16mp: 24\n17mp: 24\n18_up_rating: 24,20\n18mp: 24\n"
},
{
"path": "tests/test_misc/test_material_regular_.txt",
"chars": 38160,
"preview": "10k: 24\n10mp: 24\n11mp: 24\n123: 24,20\n12mp: 24\n13mp: 24\n14mp: 24\n15mp: 24\n16mp: 24\n17mp: 24\n18_up_rating: 24,20\n18mp: 24\n"
},
{
"path": "tests/test_misc/test_material_round_.txt",
"chars": 37505,
"preview": "10k: 24\n10mp: 24\n11mp: 24\n123: 24,20\n12mp: 24\n13mp: 24\n14mp: 24\n15mp: 24\n16mp: 24\n17mp: 24\n18_up_rating: 24,20\n18mp: 24\n"
},
{
"path": "tests/test_misc/test_material_sharp_.txt",
"chars": 37505,
"preview": "10k: 24\n10mp: 24\n11mp: 24\n123: 24,20\n12mp: 24\n13mp: 24\n14mp: 24\n15mp: 24\n16mp: 24\n17mp: 24\n18_up_rating: 24,20\n18mp: 24\n"
},
{
"path": "tests/test_misc/test_material_twotone_.txt",
"chars": 38640,
"preview": "10k: 24\n10mp: 24\n11mp: 24\n123: 24,20\n12mp: 24\n13mp: 24\n14mp: 24\n15mp: 24\n16mp: 24\n17mp: 24\n18_up_rating: 24,20\n18mp: 24\n"
},
{
"path": "tests/test_misc/test_octicons.txt",
"chars": 5629,
"preview": "accessibility: 16\naccessibility-inset: 16\nalert: 16,24\nalert-fill: 12,16,24\napps: 16\narchive: 16,24\narrow-both: 16,24\nar"
},
{
"path": "tests/test_misc/test_tab_set_with_invalid_children.xml",
"chars": 903,
"preview": "<document source=\"index\">\n <section ids=\"tab-test-document\" names=\"tab\\ test\\ document\">\n <title>\n "
},
{
"path": "tests/test_misc.py",
"chars": 2245,
"preview": "import pytest\n\nfrom sphinx_design.icons import get_material_icon_data, get_octicon_data\n\n\ndef test_octicons(file_regress"
},
{
"path": "tests/test_snippets/sd_custom_directives.xml",
"chars": 428,
"preview": "<document source=\"index\">\n <section ids=\"heading\" names=\"heading\">\n <title>\n Heading\n <conta"
},
{
"path": "tests/test_snippets/sd_hide_title.xml",
"chars": 166,
"preview": "<document source=\"index\">\n <section ids=\"heading\" names=\"heading\">\n <title classes=\"sd-d-none\">\n He"
},
{
"path": "tests/test_snippets/snippet_post_article-info.xml",
"chars": 3073,
"preview": "<document source=\"index\">\n <section ids=\"heading\" names=\"heading\">\n <title>\n Heading\n <conta"
},
{
"path": "tests/test_snippets/snippet_post_badge-basic.xml",
"chars": 3149,
"preview": "<document source=\"index\">\n <section ids=\"heading\" names=\"heading\">\n <title>\n Heading\n <parag"
},
{
"path": "tests/test_snippets/snippet_post_badge-link.xml",
"chars": 521,
"preview": "<document source=\"index\">\n <section ids=\"heading\" names=\"heading\">\n <title>\n Heading\n <parag"
},
{
"path": "tests/test_snippets/snippet_post_button-link.xml",
"chars": 1154,
"preview": "<document source=\"index\">\n <section ids=\"heading\" names=\"heading\">\n <title>\n Heading\n <parag"
},
{
"path": "tests/test_snippets/snippet_post_card-basic.xml",
"chars": 592,
"preview": "<document source=\"index\">\n <section ids=\"heading\" names=\"heading\">\n <title>\n Heading\n <conta"
},
{
"path": "tests/test_snippets/snippet_post_card-carousel.xml",
"chars": 3003,
"preview": "<document source=\"index\">\n <section ids=\"heading\" names=\"heading\">\n <title>\n Heading\n <conta"
},
{
"path": "tests/test_snippets/snippet_post_card-head-foot.xml",
"chars": 936,
"preview": "<document source=\"index\">\n <section ids=\"heading\" names=\"heading\">\n <title>\n Heading\n <conta"
},
{
"path": "tests/test_snippets/snippet_post_card-images.xml",
"chars": 3836,
"preview": "<document source=\"index\">\n <section ids=\"heading\" names=\"heading\">\n <title>\n Heading\n <conta"
},
{
"path": "tests/test_snippets/snippet_post_card-link.xml",
"chars": 4407,
"preview": "<document source=\"index\">\n <section ids=\"heading\" names=\"heading\">\n <title>\n Heading\n <targe"
},
{
"path": "tests/test_snippets/snippet_post_card-title-link.xml",
"chars": 955,
"preview": "<document source=\"index\">\n <section ids=\"heading\" names=\"heading\">\n <title>\n Heading\n <targe"
},
{
"path": "tests/test_snippets/snippet_post_div-basic.xml",
"chars": 280,
"preview": "<document source=\"index\">\n <section ids=\"heading\" names=\"heading\">\n <title>\n Heading\n <conta"
},
{
"path": "tests/test_snippets/snippet_post_dropdown-basic.xml",
"chars": 3274,
"preview": "<document source=\"index\">\n <section ids=\"heading\" names=\"heading\">\n <title>\n Heading\n <dropd"
},
{
"path": "tests/test_snippets/snippet_post_dropdown-options.xml",
"chars": 1960,
"preview": "<document source=\"index\">\n <section ids=\"heading\" names=\"heading\">\n <title>\n Heading\n <dropd"
},
{
"path": "tests/test_snippets/snippet_post_grid-basic.xml",
"chars": 1059,
"preview": "<document source=\"index\">\n <section ids=\"heading\" names=\"heading\">\n <title>\n Heading\n <conta"
},
{
"path": "tests/test_snippets/snippet_post_grid-card-columns.xml",
"chars": 1878,
"preview": "<document source=\"index\">\n <section ids=\"heading\" names=\"heading\">\n <title>\n Heading\n <conta"
},
{
"path": "tests/test_snippets/snippet_post_grid-card.xml",
"chars": 1713,
"preview": "<document source=\"index\">\n <section ids=\"heading\" names=\"heading\">\n <title>\n Heading\n <conta"
},
{
"path": "tests/test_snippets/snippet_post_grid-gutter.xml",
"chars": 2498,
"preview": "<document source=\"index\">\n <section ids=\"heading\" names=\"heading\">\n <title>\n Heading\n <conta"
},
{
"path": "tests/test_snippets/snippet_post_grid-nested.xml",
"chars": 5312,
"preview": "<document source=\"index\">\n <section ids=\"heading\" names=\"heading\">\n <title>\n Heading\n <conta"
},
{
"path": "tests/test_snippets/snippet_post_icon-fontawesome.xml",
"chars": 276,
"preview": "<document source=\"index\">\n <section ids=\"heading\" names=\"heading\">\n <title>\n Heading\n <parag"
},
{
"path": "tests/test_snippets/snippet_post_icon-material-design.xml",
"chars": 9305,
"preview": "<document source=\"index\">\n <section ids=\"heading\" names=\"heading\">\n <title>\n Heading\n <bulle"
},
{
"path": "tests/test_snippets/snippet_post_icon-octicon.xml",
"chars": 834,
"preview": "<document source=\"index\">\n <section ids=\"heading\" names=\"heading\">\n <title>\n Heading\n <parag"
},
{
"path": "tests/test_snippets/snippet_post_tab-basic.xml",
"chars": 881,
"preview": "<document source=\"index\">\n <section ids=\"heading\" names=\"heading\">\n <title>\n Heading\n <conta"
},
{
"path": "tests/test_snippets/snippet_post_tab-code-set.xml",
"chars": 1178,
"preview": "<document source=\"index\">\n <section ids=\"heading\" names=\"heading\">\n <title>\n Heading\n <conta"
},
{
"path": "tests/test_snippets/snippet_post_tab-options.xml",
"chars": 899,
"preview": "<document source=\"index\">\n <section ids=\"heading\" names=\"heading\">\n <title>\n Heading\n <conta"
},
{
"path": "tests/test_snippets/snippet_post_tab-sync.xml",
"chars": 1804,
"preview": "<document source=\"index\">\n <section ids=\"heading\" names=\"heading\">\n <title>\n Heading\n <conta"
},
{
"path": "tests/test_snippets/snippet_pre_article-info.xml",
"chars": 3073,
"preview": "<document source=\"index\">\n <section ids=\"heading\" names=\"heading\">\n <title>\n Heading\n <conta"
},
{
"path": "tests/test_snippets/snippet_pre_badge-basic.xml",
"chars": 3149,
"preview": "<document source=\"index\">\n <section ids=\"heading\" names=\"heading\">\n <title>\n Heading\n <parag"
},
{
"path": "tests/test_snippets/snippet_pre_badge-link.xml",
"chars": 521,
"preview": "<document source=\"index\">\n <section ids=\"heading\" names=\"heading\">\n <title>\n Heading\n <parag"
},
{
"path": "tests/test_snippets/snippet_pre_button-link.xml",
"chars": 1154,
"preview": "<document source=\"index\">\n <section ids=\"heading\" names=\"heading\">\n <title>\n Heading\n <parag"
},
{
"path": "tests/test_snippets/snippet_pre_card-basic.xml",
"chars": 592,
"preview": "<document source=\"index\">\n <section ids=\"heading\" names=\"heading\">\n <title>\n Heading\n <conta"
},
{
"path": "tests/test_snippets/snippet_pre_card-carousel.xml",
"chars": 3003,
"preview": "<document source=\"index\">\n <section ids=\"heading\" names=\"heading\">\n <title>\n Heading\n <conta"
},
{
"path": "tests/test_snippets/snippet_pre_card-head-foot.xml",
"chars": 936,
"preview": "<document source=\"index\">\n <section ids=\"heading\" names=\"heading\">\n <title>\n Heading\n <conta"
},
{
"path": "tests/test_snippets/snippet_pre_card-images.xml",
"chars": 3836,
"preview": "<document source=\"index\">\n <section ids=\"heading\" names=\"heading\">\n <title>\n Heading\n <conta"
},
{
"path": "tests/test_snippets/snippet_pre_card-link.xml",
"chars": 4504,
"preview": "<document source=\"index\">\n <section ids=\"heading\" names=\"heading\">\n <title>\n Heading\n <targe"
},
{
"path": "tests/test_snippets/snippet_pre_card-title-link.xml",
"chars": 1030,
"preview": "<document source=\"index\">\n <section ids=\"heading\" names=\"heading\">\n <title>\n Heading\n <targe"
},
{
"path": "tests/test_snippets/snippet_pre_div-basic.xml",
"chars": 280,
"preview": "<document source=\"index\">\n <section ids=\"heading\" names=\"heading\">\n <title>\n Heading\n <conta"
},
{
"path": "tests/test_snippets/snippet_pre_dropdown-basic.xml",
"chars": 974,
"preview": "<document source=\"index\">\n <section ids=\"heading\" names=\"heading\">\n <title>\n Heading\n <conta"
},
{
"path": "tests/test_snippets/snippet_pre_dropdown-options.xml",
"chars": 938,
"preview": "<document source=\"index\">\n <section ids=\"heading\" names=\"heading\">\n <title>\n Heading\n <conta"
},
{
"path": "tests/test_snippets/snippet_pre_grid-basic.xml",
"chars": 1059,
"preview": "<document source=\"index\">\n <section ids=\"heading\" names=\"heading\">\n <title>\n Heading\n <conta"
},
{
"path": "tests/test_snippets/snippet_pre_grid-card-columns.xml",
"chars": 1878,
"preview": "<document source=\"index\">\n <section ids=\"heading\" names=\"heading\">\n <title>\n Heading\n <conta"
},
{
"path": "tests/test_snippets/snippet_pre_grid-card.xml",
"chars": 1713,
"preview": "<document source=\"index\">\n <section ids=\"heading\" names=\"heading\">\n <title>\n Heading\n <conta"
},
{
"path": "tests/test_snippets/snippet_pre_grid-gutter.xml",
"chars": 2498,
"preview": "<document source=\"index\">\n <section ids=\"heading\" names=\"heading\">\n <title>\n Heading\n <conta"
},
{
"path": "tests/test_snippets/snippet_pre_grid-nested.xml",
"chars": 5312,
"preview": "<document source=\"index\">\n <section ids=\"heading\" names=\"heading\">\n <title>\n Heading\n <conta"
},
{
"path": "tests/test_snippets/snippet_pre_icon-fontawesome.xml",
"chars": 276,
"preview": "<document source=\"index\">\n <section ids=\"heading\" names=\"heading\">\n <title>\n Heading\n <parag"
},
{
"path": "tests/test_snippets/snippet_pre_icon-material-design.xml",
"chars": 9305,
"preview": "<document source=\"index\">\n <section ids=\"heading\" names=\"heading\">\n <title>\n Heading\n <bulle"
},
{
"path": "tests/test_snippets/snippet_pre_icon-octicon.xml",
"chars": 834,
"preview": "<document source=\"index\">\n <section ids=\"heading\" names=\"heading\">\n <title>\n Heading\n <parag"
},
{
"path": "tests/test_snippets/snippet_pre_tab-basic.xml",
"chars": 876,
"preview": "<document source=\"index\">\n <section ids=\"heading\" names=\"heading\">\n <title>\n Heading\n <conta"
},
{
"path": "tests/test_snippets/snippet_pre_tab-code-set.xml",
"chars": 1107,
"preview": "<document source=\"index\">\n <section ids=\"heading\" names=\"heading\">\n <title>\n Heading\n <conta"
},
{
"path": "tests/test_snippets/snippet_pre_tab-options.xml",
"chars": 1083,
"preview": "<document source=\"index\">\n <section ids=\"heading\" names=\"heading\">\n <title>\n Heading\n <conta"
},
{
"path": "tests/test_snippets/snippet_pre_tab-sync.xml",
"chars": 1794,
"preview": "<document source=\"index\">\n <section ids=\"heading\" names=\"heading\">\n <title>\n Heading\n <conta"
},
{
"path": "tests/test_snippets.py",
"chars": 7428,
"preview": "\"\"\"Test the documented snippets run correctly, and are the same for both RST and MyST.\"\"\"\n\nfrom collections.abc import C"
},
{
"path": "tox.ini",
"chars": 1810,
"preview": "# To use tox, see https://tox.readthedocs.io\n# (you may also want to install tox-uv)\n# then run `tox` or `tox -- {pytest"
}
]
About this extraction
This page contains the full source code of the executablebooks/sphinx-design GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 182 files (9.6 MB), approximately 2.5M tokens, and a symbol index with 141 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.