kopia lustrzana https://github.com/shoelace-style/shoelace
Porównaj commity
No commits in common. "1.0.0-beta1" and "next" have entirely different histories.
1.0.0-beta
...
next
|
|
@ -1,9 +1,15 @@
|
|||
# https://editorconfig.org
|
||||
|
||||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
end_of_line = lf
|
||||
charset = utf-8
|
||||
trim_trailing_whitespace = true
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
|
||||
[*.md]
|
||||
insert_final_newline = false
|
||||
trim_trailing_whitespace = false
|
||||
|
|
|
|||
|
|
@ -0,0 +1,10 @@
|
|||
.cache
|
||||
docs/dist
|
||||
docs/search.json
|
||||
docs/**/*.min.js
|
||||
dist
|
||||
examples
|
||||
node_modules
|
||||
src/react
|
||||
scripts
|
||||
|
||||
18
.eslintrc
18
.eslintrc
|
|
@ -1,18 +0,0 @@
|
|||
{
|
||||
"rules": {
|
||||
"comma-dangle": ["warn"],
|
||||
"eqeqeq": ["warn"],
|
||||
"no-console": ["off"],
|
||||
"indent": ["error", 2],
|
||||
"quotes": ["error", "single"],
|
||||
"linebreak-style": ["error", "unix"],
|
||||
"no-unused-vars": ["warn", { "vars": "all", "args": "after-used" }],
|
||||
"prefer-arrow-callback": ["warn"],
|
||||
"semi": ["error", "always"]
|
||||
},
|
||||
"env": {
|
||||
"node": true,
|
||||
"es6": true
|
||||
},
|
||||
"extends": "eslint:recommended"
|
||||
}
|
||||
|
|
@ -0,0 +1,211 @@
|
|||
/* eslint-env node */
|
||||
|
||||
module.exports = {
|
||||
plugins: [
|
||||
'@typescript-eslint',
|
||||
'wc',
|
||||
'lit',
|
||||
'lit-a11y',
|
||||
'chai-expect',
|
||||
'chai-friendly',
|
||||
'import',
|
||||
'sort-imports-es6-autofix'
|
||||
],
|
||||
extends: [
|
||||
'eslint:recommended',
|
||||
'plugin:wc/recommended',
|
||||
'plugin:wc/best-practice',
|
||||
'plugin:lit/recommended',
|
||||
'plugin:lit-a11y/recommended'
|
||||
],
|
||||
env: {
|
||||
es2021: true,
|
||||
browser: true
|
||||
},
|
||||
parserOptions: {
|
||||
sourceType: 'module'
|
||||
},
|
||||
overrides: [
|
||||
{
|
||||
extends: [
|
||||
'plugin:@typescript-eslint/eslint-recommended',
|
||||
'plugin:@typescript-eslint/recommended',
|
||||
'plugin:@typescript-eslint/recommended-requiring-type-checking'
|
||||
],
|
||||
parser: '@typescript-eslint/parser',
|
||||
parserOptions: {
|
||||
sourceType: 'module',
|
||||
project: './tsconfig.json',
|
||||
tsconfigRootDir: __dirname
|
||||
},
|
||||
files: ['*.ts'],
|
||||
rules: {
|
||||
'default-param-last': 'off',
|
||||
'@typescript-eslint/default-param-last': 'error',
|
||||
'no-empty-function': 'off',
|
||||
'@typescript-eslint/no-empty-function': 'warn',
|
||||
'no-implied-eval': 'off',
|
||||
'@typescript-eslint/no-implied-eval': 'error',
|
||||
'no-invalid-this': 'off',
|
||||
'@typescript-eslint/no-invalid-this': 'error',
|
||||
'no-shadow': 'off',
|
||||
'@typescript-eslint/no-shadow': 'error',
|
||||
'no-throw-literal': 'off',
|
||||
'@typescript-eslint/no-throw-literal': 'error',
|
||||
'no-unused-expressions': 'off',
|
||||
'@typescript-eslint/prefer-regexp-exec': 'off',
|
||||
'@typescript-eslint/no-unused-expressions': 'error',
|
||||
'@typescript-eslint/unbound-method': 'off',
|
||||
'@typescript-eslint/no-non-null-assertion': 'off',
|
||||
'@typescript-eslint/no-floating-promises': 'off',
|
||||
'@typescript-eslint/no-misused-promises': [
|
||||
'error',
|
||||
{
|
||||
checksVoidReturn: false
|
||||
}
|
||||
],
|
||||
'@typescript-eslint/consistent-type-assertions': [
|
||||
'warn',
|
||||
{
|
||||
assertionStyle: 'as',
|
||||
objectLiteralTypeAssertions: 'never'
|
||||
}
|
||||
],
|
||||
'@typescript-eslint/consistent-type-imports': 'warn',
|
||||
'@typescript-eslint/no-base-to-string': 'error',
|
||||
'@typescript-eslint/no-confusing-non-null-assertion': 'error',
|
||||
'@typescript-eslint/no-invalid-void-type': 'error',
|
||||
'@typescript-eslint/no-require-imports': 'error',
|
||||
'@typescript-eslint/no-unnecessary-boolean-literal-compare': 'warn',
|
||||
'@typescript-eslint/no-unnecessary-condition': 'off',
|
||||
'@typescript-eslint/no-unnecessary-qualifier': 'warn',
|
||||
'@typescript-eslint/non-nullable-type-assertion-style': 'warn',
|
||||
'@typescript-eslint/prefer-for-of': 'warn',
|
||||
'@typescript-eslint/prefer-optional-chain': 'warn',
|
||||
'@typescript-eslint/prefer-ts-expect-error': 'warn',
|
||||
'@typescript-eslint/prefer-return-this-type': 'error',
|
||||
'@typescript-eslint/prefer-string-starts-ends-with': 'warn',
|
||||
'@typescript-eslint/require-array-sort-compare': 'error',
|
||||
'@typescript-eslint/unified-signatures': 'warn',
|
||||
'@typescript-eslint/array-type': 'warn',
|
||||
'@typescript-eslint/consistent-type-definitions': ['warn', 'interface'],
|
||||
'@typescript-eslint/member-delimiter-style': 'warn',
|
||||
'@typescript-eslint/method-signature-style': 'warn',
|
||||
'@typescript-eslint/no-extraneous-class': 'error',
|
||||
'@typescript-eslint/no-redundant-type-constituents': 'off',
|
||||
'@typescript-eslint/parameter-properties': 'error',
|
||||
'@typescript-eslint/strict-boolean-expressions': 'off'
|
||||
}
|
||||
},
|
||||
{
|
||||
files: ['**/*.cjs'],
|
||||
env: {
|
||||
node: true
|
||||
}
|
||||
},
|
||||
{
|
||||
extends: ['plugin:chai-expect/recommended', 'plugin:chai-friendly/recommended'],
|
||||
files: ['*.test.ts'],
|
||||
rules: {
|
||||
'@typescript-eslint/no-unsafe-call': 'off',
|
||||
'@typescript-eslint/no-unused-expressions': 'off'
|
||||
}
|
||||
}
|
||||
],
|
||||
rules: {
|
||||
'no-template-curly-in-string': 'error',
|
||||
'array-callback-return': 'error',
|
||||
'comma-dangle': 'off',
|
||||
'consistent-return': 'error',
|
||||
curly: 'off',
|
||||
'default-param-last': 'error',
|
||||
eqeqeq: 'error',
|
||||
'lit-a11y/click-events-have-key-events': 'off',
|
||||
'no-constructor-return': 'error',
|
||||
'no-empty-function': 'warn',
|
||||
'no-eval': 'error',
|
||||
'no-extend-native': 'error',
|
||||
'no-extra-bind': 'error',
|
||||
'no-floating-decimal': 'error',
|
||||
'no-implicit-coercion': 'off',
|
||||
'no-implicit-globals': 'error',
|
||||
'no-implied-eval': 'error',
|
||||
'no-invalid-this': 'error',
|
||||
'no-labels': 'error',
|
||||
'no-lone-blocks': 'error',
|
||||
'no-new': 'error',
|
||||
'no-new-func': 'error',
|
||||
'no-new-wrappers': 'error',
|
||||
'no-octal-escape': 'error',
|
||||
'no-proto': 'error',
|
||||
'no-return-assign': 'warn',
|
||||
'no-script-url': 'error',
|
||||
'no-self-compare': 'warn',
|
||||
'no-sequences': 'warn',
|
||||
'no-throw-literal': 'error',
|
||||
'no-unmodified-loop-condition': 'error',
|
||||
'no-unused-expressions': 'warn',
|
||||
'no-useless-call': 'error',
|
||||
'no-useless-concat': 'error',
|
||||
'no-useless-return': 'warn',
|
||||
'prefer-promise-reject-errors': 'error',
|
||||
radix: 'off',
|
||||
'require-await': 'error',
|
||||
'wrap-iife': ['warn', 'inside'],
|
||||
'no-shadow': 'error',
|
||||
'no-array-constructor': 'error',
|
||||
'no-bitwise': 'error',
|
||||
'no-multi-assign': 'warn',
|
||||
'no-new-object': 'error',
|
||||
'no-useless-computed-key': 'warn',
|
||||
'no-useless-rename': 'warn',
|
||||
'no-var': 'error',
|
||||
'prefer-const': 'warn',
|
||||
'prefer-numeric-literals': 'warn',
|
||||
'prefer-object-spread': 'warn',
|
||||
'prefer-rest-params': 'warn',
|
||||
'prefer-spread': 'warn',
|
||||
'prefer-template': 'off',
|
||||
'no-else-return': 'off',
|
||||
'func-names': ['warn', 'never'],
|
||||
'one-var': ['warn', 'never'],
|
||||
'operator-assignment': 'warn',
|
||||
'prefer-arrow-callback': 'warn',
|
||||
'no-restricted-imports': [
|
||||
'warn',
|
||||
{
|
||||
paths: [
|
||||
{
|
||||
name: '.',
|
||||
message: 'Usage of local index imports is not allowed.'
|
||||
},
|
||||
{
|
||||
name: './index',
|
||||
message: 'Import from the source file instead.'
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
'import/extensions': [
|
||||
'error',
|
||||
'always',
|
||||
{
|
||||
ignorePackages: true,
|
||||
pattern: {
|
||||
js: 'always',
|
||||
ts: 'never'
|
||||
}
|
||||
}
|
||||
],
|
||||
'import/no-duplicates': 'warn',
|
||||
'sort-imports-es6-autofix/sort-imports-es6': [
|
||||
2,
|
||||
{
|
||||
ignoreCase: true,
|
||||
ignoreMemberSort: false,
|
||||
memberSyntaxSortOrder: ['none', 'all', 'multiple', 'single']
|
||||
}
|
||||
],
|
||||
'wc/guard-super-call': 'off'
|
||||
}
|
||||
};
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
|
||||
# Contributor Covenant Code of Conduct
|
||||
|
||||
## Our Pledge
|
||||
|
||||
In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to make participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, sex characteristics, gender identity and expression, level of experience, education, socio-economic status, nationality, personal appearance, race, religion, or sexual identity and orientation.
|
||||
|
||||
## Our Standards
|
||||
|
||||
Examples of behavior that contributes to creating a positive environment include:
|
||||
|
||||
- Using welcoming and inclusive language
|
||||
- Being respectful of differing viewpoints and experiences
|
||||
- Gracefully accepting constructive criticism
|
||||
- Focusing on what is best for the community
|
||||
- Showing empathy towards other community members
|
||||
|
||||
Examples of unacceptable behavior by participants include:
|
||||
|
||||
- The use of sexualized language or imagery and unwelcome sexual attention or advances
|
||||
- Trolling, insulting/derogatory comments, and personal or political attacks
|
||||
- Public or private harassment
|
||||
- Publishing others' private information, such as a physical or electronic address, without explicit permission
|
||||
- Other conduct which could reasonably be considered inappropriate in a professional setting
|
||||
|
||||
## Our Responsibilities
|
||||
|
||||
Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
|
||||
|
||||
Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
|
||||
|
||||
## Scope
|
||||
|
||||
This Code of Conduct applies within all project spaces, and it also applies when an individual is representing the project or its community in public spaces. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
|
||||
|
||||
## Enforcement
|
||||
|
||||
Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at cory@abeautifulsite.net. All complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
|
||||
|
||||
Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
|
||||
|
||||
## Attribution
|
||||
|
||||
This Code of Conduct is adapted from the [Contributor Covenant](https://www.contributor-covenant.org), version 1.4.
|
||||
|
|
@ -0,0 +1 @@
|
|||
github: [claviska]
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
---
|
||||
name: Bug Report
|
||||
about: Create a bug report to help us fix a demonstrable problem with code in the library.
|
||||
title: ''
|
||||
labels: bug
|
||||
assignees:
|
||||
---
|
||||
|
||||
### Describe the bug
|
||||
A bug is _a demonstrable problem_ caused by code in the library. Please provide a clear and concise description of what the bug is here.
|
||||
|
||||
### To Reproduce
|
||||
Steps to reproduce the behavior:
|
||||
|
||||
1. Go to '...'
|
||||
2. Click on '...'
|
||||
3. Scroll down to '...'
|
||||
4. See error
|
||||
|
||||
### Demo
|
||||
|
||||
If the bug isn't obvious, please provide a link to a CodePen or Fiddle with a minimal reproduction. Bugs that have repros get attention faster than those that don't.
|
||||
|
||||
Tip: use the CodePen button on any example in the docs!
|
||||
|
||||
### Screenshots
|
||||
If applicable, add screenshots to help explain the bug.
|
||||
|
||||
### Browser / OS
|
||||
- OS: [e.g. Mac, Windows]
|
||||
- Browser: [e.g. Chrome, Firefox, Safari]
|
||||
- Browser version: [e.g. 22]
|
||||
|
||||
### Additional information
|
||||
Provide any additional information about the bug here.
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
contact_links:
|
||||
- name: Feature Requests
|
||||
url: https://github.com/shoelace-style/shoelace/discussions/categories/ideas
|
||||
about: All requests for new features should go here.
|
||||
- name: Help & Support
|
||||
url: https://github.com/shoelace-style/shoelace/discussions/categories/help
|
||||
about: Please don't create issues for personal help requests. Instead, ask your question on the discussion forum.
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
# Reporting Security Issues
|
||||
|
||||
We take security issues in Shoelace very seriously and appreciate your efforts to disclose your findings responsibly.
|
||||
|
||||
To report a security issue, email [cory@abeautifulsite.net](mailto:cory@abeautifulsite.net) and include "SHOELACE SECURITY" in the subject line.
|
||||
|
||||
We'll respond as soon as possible and keep you updated throughout the process.
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
# This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node
|
||||
# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
|
||||
|
||||
name: Node.js CI
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: [next]
|
||||
pull_request:
|
||||
branches: [next]
|
||||
|
||||
jobs:
|
||||
build:
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
strategy:
|
||||
matrix:
|
||||
node-version: [18.x]
|
||||
# See supported Node.js release schedule at https://nodejs.org/en/about/releases/
|
||||
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- name: Use Node.js ${{ matrix.node-version }}
|
||||
uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: ${{ matrix.node-version }}
|
||||
cache: 'npm'
|
||||
- run: npx playwright install --with-deps
|
||||
- run: npm ci
|
||||
- run: npm run verify
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
# This workflow will create a GitHub release every time a tag is pushed
|
||||
name: Create GitHub Release
|
||||
|
||||
on:
|
||||
push:
|
||||
tags:
|
||||
- "v2.*"
|
||||
- "v3.*"
|
||||
|
||||
jobs:
|
||||
release:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: "marvinpinto/action-automatic-releases@v1.2.1"
|
||||
with:
|
||||
repo_token: "${{ secrets.GITHUB_TOKEN }}"
|
||||
prerelease: false
|
||||
|
|
@ -1,3 +1,8 @@
|
|||
_site
|
||||
.cache
|
||||
.DS_Store
|
||||
|
||||
node_modules/
|
||||
cdn
|
||||
dist
|
||||
docs/assets/images/sprite.svg
|
||||
node_modules
|
||||
src/react
|
||||
|
|
|
|||
|
|
@ -0,0 +1,28 @@
|
|||
tasks:
|
||||
- init: npm install && npm run build
|
||||
command: npm run start
|
||||
|
||||
ports:
|
||||
- port: 3001
|
||||
onOpen: ignore
|
||||
- port: 4000-4999
|
||||
onOpen: open-preview
|
||||
|
||||
github:
|
||||
prebuilds:
|
||||
# enable for the master/default branch (defaults to true)
|
||||
master: true
|
||||
# enable for all branches in this repo (defaults to false)
|
||||
branches: true
|
||||
# enable for pull requests coming from this repo (defaults to true)
|
||||
pullRequests: true
|
||||
# enable for pull requests coming from forks (defaults to false)
|
||||
pullRequestsFromForks: true
|
||||
# add a check to pull requests (defaults to true)
|
||||
addCheck: true
|
||||
# add a "Review in Gitpod" button as a comment to pull requests (defaults to false)
|
||||
addComment: false
|
||||
# add a "Review in Gitpod" button to the pull request's description (defaults to false)
|
||||
addBadge: true
|
||||
# add a label once the prebuild is ready to pull requests (defaults to false)
|
||||
addLabel: true
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
#!/bin/sh
|
||||
. "$(dirname "$0")/_/husky.sh"
|
||||
|
||||
npx --no-install lint-staged
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
*.hbs
|
||||
.cache
|
||||
.github
|
||||
cspell.json
|
||||
dist
|
||||
docs/search.json
|
||||
src/components/icon/icons
|
||||
src/react/index.ts
|
||||
node_modules
|
||||
package.json
|
||||
package-lock.json
|
||||
tsconfig.json
|
||||
cdn
|
||||
_site
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
{
|
||||
"recommendations": [
|
||||
"dbaeumer.vscode-eslint",
|
||||
"esbenp.prettier-vscode",
|
||||
"bierner.lit-html",
|
||||
"bashmish.es6-string-css",
|
||||
"streetsidesoftware.code-spell-checker"
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"editor.formatOnSave": true,
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode",
|
||||
"editor.codeActionsOnSave": {
|
||||
"source.fixAll.eslint": "explicit"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
# Contributing to Shoelace
|
||||
|
||||
Before contributing, please review the contributions guidelines at:
|
||||
|
||||
[shoelace.style/resources/contributing](https://shoelace.style/resources/contributing)
|
||||
|
|
@ -1,4 +1,4 @@
|
|||
Copyright (c) 2017 A Beautiful Site, LLC
|
||||
Copyright (c) 2020 A Beautiful Site, LLC
|
||||
|
||||
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:
|
||||
|
||||
|
|
|
|||
81
README.md
81
README.md
|
|
@ -1,13 +1,82 @@
|
|||
# 👟 Shoelace.css
|
||||
# Shoelace
|
||||
|
||||
A back to the basics CSS starter kit. For when you don’t need the whole boot.
|
||||
A forward-thinking library of web components.
|
||||
|
||||
- Works with all frameworks 🧩
|
||||
- Works with CDNs 🚛
|
||||
- Fully customizable with CSS 🎨
|
||||
- Includes an official dark theme 🌛
|
||||
- Built with accessibility in mind ♿️
|
||||
- Open source 😸
|
||||
|
||||
Designed in New Hampshire by [Cory LaViska](https://twitter.com/claviska).
|
||||
|
||||
---
|
||||
|
||||
Shoelace is a starter kit, not a framework. Think of it as a CSS reset sprinkled with helpful components. Bootstrap users will find it familiar, yet refreshing.
|
||||
Documentation: [shoelace.style](https://shoelace.style)
|
||||
|
||||
Just link to the stylesheet, add your customizations, and start building stuff.
|
||||
Source: [github.com/shoelace-style/shoelace](https://github.com/shoelace-style/shoelace)
|
||||
|
||||
Shoelace is highly customizable through CSS variables. It doesn’t require Less, Sass, or any preprocessing at all. The minified version is only 31KB.
|
||||
Twitter: [@shoelace_style](https://twitter.com/shoelace_style)
|
||||
|
||||
[Documentation & Examples](https://labs.abeautifulsite.net/shoelace-css/docs/)
|
||||
---
|
||||
|
||||
## Shoemakers 🥾
|
||||
|
||||
Shoemakers, or "Shoelace developers," can use this documentation to learn how to build Shoelace from source. You will need Node >= 14.17 to build and run the project locally.
|
||||
|
||||
**You don't need to do any of this to use Shoelace!** This page is for people who want to contribute to the project, tinker with the source, or create a custom build of Shoelace.
|
||||
|
||||
If that's not what you're trying to do, the [documentation website](https://shoelace.style) is where you want to be.
|
||||
|
||||
### What are you using to build Shoelace?
|
||||
|
||||
Components are built with [LitElement](https://lit-element.polymer-project.org/), a custom elements base class that provides an intuitive API and reactive data binding. The build is a custom script with bundling powered by [esbuild](https://esbuild.github.io/).
|
||||
|
||||
### Forking the Repo
|
||||
|
||||
Start by [forking the repo](https://github.com/shoelace-style/shoelace/fork) on GitHub, then clone it locally and install dependencies.
|
||||
|
||||
```bash
|
||||
git clone https://github.com/YOUR_GITHUB_USERNAME/shoelace
|
||||
cd shoelace
|
||||
npm install
|
||||
```
|
||||
|
||||
### Developing
|
||||
|
||||
Once you've cloned the repo, run the following command.
|
||||
|
||||
```bash
|
||||
npm start
|
||||
```
|
||||
|
||||
This will spin up the dev server. After the initial build, a browser will open automatically. There is currently no hot module reloading (HMR), as browser's don't provide a way to reregister custom elements, but most changes to the source will reload the browser automatically.
|
||||
|
||||
### Building
|
||||
|
||||
To generate a production build, run the following command.
|
||||
|
||||
```bash
|
||||
npm run build
|
||||
```
|
||||
|
||||
### Creating New Components
|
||||
|
||||
To scaffold a new component, run the following command, replacing `sl-tag-name` with the desired tag name.
|
||||
|
||||
```bash
|
||||
npm run create sl-tag-name
|
||||
```
|
||||
|
||||
This will generate a source file, a stylesheet, and a docs page for you. When you start the dev server, you'll find the new component in the "Components" section of the sidebar.
|
||||
|
||||
### Contributing
|
||||
|
||||
Shoelace is an open source project and contributions are encouraged! If you're interesting in contributing, please review the [contribution guidelines](CONTRIBUTING.md) first.
|
||||
|
||||
## License
|
||||
|
||||
Shoelace was created by [Cory LaViska](https://twitter.com/claviska) and is available under the terms of the MIT license.
|
||||
|
||||
Whether you're building Shoelace or building something _with_ Shoelace — have fun creating! 🥾
|
||||
|
|
|
|||
|
|
@ -0,0 +1,186 @@
|
|||
{
|
||||
"version": "0.2",
|
||||
"words": [
|
||||
"activedescendant",
|
||||
"allowfullscreen",
|
||||
"animationend",
|
||||
"Animista",
|
||||
"apos",
|
||||
"atrule",
|
||||
"autocorrect",
|
||||
"autofix",
|
||||
"autoload",
|
||||
"autoloader",
|
||||
"autoloading",
|
||||
"autoplay",
|
||||
"bezier",
|
||||
"boxicons",
|
||||
"CACHEABLE",
|
||||
"callout",
|
||||
"callouts",
|
||||
"cdndir",
|
||||
"chatbubble",
|
||||
"checkmark",
|
||||
"claviska",
|
||||
"Clippy",
|
||||
"codebases",
|
||||
"codepen",
|
||||
"colocated",
|
||||
"colour",
|
||||
"combobox",
|
||||
"Commonmark",
|
||||
"Composability",
|
||||
"Consolas",
|
||||
"contenteditable",
|
||||
"copydir",
|
||||
"Cotte",
|
||||
"coverpage",
|
||||
"crossorigin",
|
||||
"crutchcorn",
|
||||
"csspart",
|
||||
"cssproperty",
|
||||
"datetime",
|
||||
"describedby",
|
||||
"Docsify",
|
||||
"dogfood",
|
||||
"dropdowns",
|
||||
"easings",
|
||||
"endraw",
|
||||
"enterkeyhint",
|
||||
"eqeqeq",
|
||||
"erroneou",
|
||||
"errormessage",
|
||||
"esbuild",
|
||||
"exportmaps",
|
||||
"exportparts",
|
||||
"fieldsets",
|
||||
"formaction",
|
||||
"formdata",
|
||||
"formenctype",
|
||||
"formmethod",
|
||||
"formnovalidate",
|
||||
"formtarget",
|
||||
"FOUC",
|
||||
"FOUCE",
|
||||
"fullscreen",
|
||||
"gestern",
|
||||
"giga",
|
||||
"globby",
|
||||
"Grayscale",
|
||||
"haspopup",
|
||||
"heroicons",
|
||||
"hexa",
|
||||
"Iconoir",
|
||||
"Iframes",
|
||||
"iife",
|
||||
"inputmode",
|
||||
"ionicon",
|
||||
"ionicons",
|
||||
"jsDelivr",
|
||||
"jsfiddle",
|
||||
"jsonata",
|
||||
"keydown",
|
||||
"keyframes",
|
||||
"Kool",
|
||||
"labelledby",
|
||||
"Laravel",
|
||||
"LaViska",
|
||||
"linkify",
|
||||
"listbox",
|
||||
"listitem",
|
||||
"litelement",
|
||||
"lowercasing",
|
||||
"Lucide",
|
||||
"maxlength",
|
||||
"Menlo",
|
||||
"menuitemcheckbox",
|
||||
"menuitemradio",
|
||||
"middlewares",
|
||||
"minlength",
|
||||
"monospace",
|
||||
"mousedown",
|
||||
"mousemove",
|
||||
"mouseout",
|
||||
"mouseup",
|
||||
"multiselectable",
|
||||
"nextjs",
|
||||
"nocheck",
|
||||
"noopener",
|
||||
"noreferrer",
|
||||
"novalidate",
|
||||
"npmdir",
|
||||
"Numberish",
|
||||
"onscrollend",
|
||||
"outdir",
|
||||
"ParamagicDev",
|
||||
"peta",
|
||||
"petabit",
|
||||
"prismjs",
|
||||
"progressbar",
|
||||
"radiogroup",
|
||||
"Railsbyte",
|
||||
"remixicon",
|
||||
"reregister",
|
||||
"resizer",
|
||||
"resizers",
|
||||
"retargeted",
|
||||
"RETRYABLE",
|
||||
"rgba",
|
||||
"roadmap",
|
||||
"Roboto",
|
||||
"roledescription",
|
||||
"Sapan",
|
||||
"saturationl",
|
||||
"Schilp",
|
||||
"scrollbars",
|
||||
"scrollend",
|
||||
"scroller",
|
||||
"Segoe",
|
||||
"semibold",
|
||||
"sitedir",
|
||||
"slotchange",
|
||||
"smartquotes",
|
||||
"spacebar",
|
||||
"stylesheet",
|
||||
"Tabbable",
|
||||
"tabindex",
|
||||
"tabler",
|
||||
"tablist",
|
||||
"tabpanel",
|
||||
"templating",
|
||||
"tera",
|
||||
"testid",
|
||||
"textareas",
|
||||
"textfield",
|
||||
"tinycolor",
|
||||
"transitionend",
|
||||
"treeitem",
|
||||
"treeshaking",
|
||||
"Triaging",
|
||||
"turbolinks",
|
||||
"typeof",
|
||||
"unbundles",
|
||||
"unbundling",
|
||||
"unicons",
|
||||
"unsanitized",
|
||||
"unsupportive",
|
||||
"valpha",
|
||||
"valuenow",
|
||||
"valuetext",
|
||||
"WEBP",
|
||||
"Webpacker",
|
||||
"wordmark"
|
||||
],
|
||||
"ignorePaths": [
|
||||
"package.json",
|
||||
"package-lock.json",
|
||||
"docs/assets/examples/include.html",
|
||||
".vscode/**",
|
||||
"src/translations/!(en).ts",
|
||||
"**/*.min.js"
|
||||
],
|
||||
"ignoreRegExpList": [
|
||||
"(^|[^a-z])sl[a-z]*(^|[^a-z])"
|
||||
],
|
||||
"useGitignore": true
|
||||
}
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
/*! Shoelace alerts */
|
||||
|
||||
.alert {
|
||||
color: var(--alert-color);
|
||||
background-color: var(--alert-bg-color-primary);
|
||||
border-radius: var(--alert-border-radius);
|
||||
padding: var(--alert-spacing-y) var(--alert-spacing-x);
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.alert:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.alert-success { background-color: var(--alert-bg-color-success); }
|
||||
.alert-info { background-color: var(--alert-bg-color-info); }
|
||||
.alert-warning { background-color: var(--alert-bg-color-warning); }
|
||||
.alert-danger { background-color: var(--alert-bg-color-danger); }
|
||||
.alert-inverse { background-color: var(--alert-bg-color-inverse); }
|
||||
|
||||
.alert a {
|
||||
color: inherit;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.alert :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
/*! Shoelace badges */
|
||||
|
||||
.badge {
|
||||
font-size: var(--badge-font-size);
|
||||
color: var(--badge-color);
|
||||
background-color: var(--badge-bg-color-primary);
|
||||
border-radius: var(--badge-border-radius);
|
||||
padding: var(--badge-spacing-y) var(--badge-spacing-x);
|
||||
vertical-align: baseline;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.badge:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.badge-success { background-color: var(--badge-bg-color-success); }
|
||||
.badge-info { background-color: var(--badge-bg-color-info); }
|
||||
.badge-warning { background-color: var(--badge-bg-color-warning); }
|
||||
.badge-danger { background-color: var(--badge-bg-color-danger); }
|
||||
.badge-inverse { background-color: var(--badge-bg-color-inverse); }
|
||||
|
|
@ -1,92 +0,0 @@
|
|||
/*! Shoelace buttons */
|
||||
|
||||
button,
|
||||
.button {
|
||||
font-family: var(--button-font-family);
|
||||
font-size: var(--button-font-size);
|
||||
font-weight: var(--button-font-weight);
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
color: var(--button-color);
|
||||
background-color: var(--button-bg-color-primary);
|
||||
border-radius: var(--button-border-radius);
|
||||
border: none;
|
||||
height: var(--input-height);
|
||||
line-height: 1;
|
||||
user-select: none;
|
||||
vertical-align: middle;
|
||||
white-space: nowrap;
|
||||
padding: calc(var(--component-spacing) * .5) calc(var(--component-spacing) * .75);
|
||||
box-shadow: var(--button-box-shadow);
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
transition: .1s box-shadow, .1s background-color, .1s color;
|
||||
}
|
||||
|
||||
.button-small {
|
||||
font-size: calc(var(--button-font-size) * .8);
|
||||
height: var(--input-height-small);
|
||||
padding: calc(var(--component-spacing) * .25) calc(var(--component-spacing) * .5);
|
||||
}
|
||||
|
||||
.button-big {
|
||||
font-size: calc(var(--button-font-size) * 1.2);
|
||||
height: var(--input-height-big);
|
||||
padding: calc(var(--component-spacing) * .75) calc(var(--component-spacing) * 1);
|
||||
}
|
||||
|
||||
.button-block {
|
||||
width: 100% !important;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.button-block + .button-block {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
button:hover,
|
||||
.button:hover {
|
||||
color: var(--button-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
button:hover:not(:disabled),
|
||||
.button:hover:not(.disabled) {
|
||||
box-shadow: var(--button-box-shadow-hover);
|
||||
}
|
||||
|
||||
button:active:not(:disabled),
|
||||
.button.active:not(.disabled) {
|
||||
color: var(--button-color);
|
||||
box-shadow: var(--button-box-shadow-active);
|
||||
}
|
||||
|
||||
button:disabled,
|
||||
.button.disabled {
|
||||
opacity: .5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.button-success { background-color: var(--button-bg-color-success); }
|
||||
.button-info { background-color: var(--button-bg-color-info); }
|
||||
.button-warning { background-color: var(--button-bg-color-warning); }
|
||||
.button-danger { background-color: var(--button-bg-color-danger); }
|
||||
.button-inverse { background-color: var(--button-bg-color-inverse); }
|
||||
|
||||
.button-link {
|
||||
background-color: transparent;
|
||||
color: var(--link-color);
|
||||
text-decoration: var(--link-text-decoration);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
.button-link:hover:not(:disabled) {
|
||||
background-color: transparent;
|
||||
color: var(--link-color-hover);
|
||||
text-decoration: var(--link-text-decoration-hover);
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
label.button input[type="file"] {
|
||||
display: none;
|
||||
}
|
||||
200
css/content.css
200
css/content.css
|
|
@ -1,200 +0,0 @@
|
|||
/*! Shoelace content */
|
||||
|
||||
/* Box sizing reset */
|
||||
html {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
*, *:before, *:after {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
|
||||
/***************************************************************************************************
|
||||
* The basics
|
||||
***************************************************************************************************/
|
||||
|
||||
body {
|
||||
background: var(--body-bg-color);
|
||||
font-family: var(--font-family);
|
||||
font-weight: var(--font-weight);
|
||||
font-size: var(--font-size);
|
||||
font-weight: var(--font-weight-normal);
|
||||
color: var(--body-color);
|
||||
line-height: var(--line-height);
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--link-color);
|
||||
text-decoration: var(--link-text-decoration);
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: var(--link-color-hover);
|
||||
text-decoration: var(--link-text-decoration-hover);
|
||||
}
|
||||
|
||||
abbr[title] {
|
||||
text-decoration: none;
|
||||
border-bottom: dashed 2px currentcolor;
|
||||
}
|
||||
|
||||
b, strong {
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
|
||||
big {
|
||||
font-size: var(--font-size-big);
|
||||
}
|
||||
|
||||
blockquote {
|
||||
font-size: var(--font-size-big);
|
||||
border-left: solid .4rem var(--component-border-color);
|
||||
padding: .5rem .5rem .5rem 1rem;
|
||||
margin-bottom: 1rem;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
code {
|
||||
font-family: var(--font-family-monospace);
|
||||
font-size: var(--code-font-size);
|
||||
color: var(--code-color);
|
||||
background-color: var(--code-bg-color);
|
||||
border-radius: var(--code-border-radius);
|
||||
padding: var(--code-spacing-y) var(--code-spacing-x);
|
||||
}
|
||||
|
||||
del {
|
||||
color: var(--color-red);
|
||||
}
|
||||
|
||||
figure {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-family: var(--headings-font-family);
|
||||
font-weight: var(--headings-font-weight);
|
||||
line-height: var(--headings-line-height);
|
||||
color: var(--headings-color);
|
||||
margin-top: 0;
|
||||
margin-bottom: var(--headings-margin-bottom);
|
||||
}
|
||||
|
||||
h1 { font-size: var(--headings-font-size-h1); }
|
||||
h2 { font-size: var(--headings-font-size-h2); }
|
||||
h3 { font-size: var(--headings-font-size-h3); }
|
||||
h4 { font-size: var(--headings-font-size-h4); }
|
||||
h5 { font-size: var(--headings-font-size-h5); }
|
||||
h6 { font-size: var(--headings-font-size-h6); }
|
||||
|
||||
hr {
|
||||
border: none;
|
||||
border-top: solid var(--hr-width) var(--component-border-color);
|
||||
margin-top: var(--component-spacing-big);
|
||||
margin-bottom: var(--component-spacing-big);
|
||||
}
|
||||
|
||||
img {
|
||||
height: auto;
|
||||
max-width: 100%;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
ins {
|
||||
color: var(--color-green);
|
||||
}
|
||||
|
||||
kbd {
|
||||
font-family: var(--font-family-monospace);
|
||||
font-size: var(--kbd-font-size);
|
||||
color: var(--kbd-color);
|
||||
background-color: var(--kbd-bg-color);
|
||||
border-radius: var(--kbd-border-radius);
|
||||
padding: var(--kbd-spacing-y) var(--kbd-spacing-x);
|
||||
}
|
||||
|
||||
mark {
|
||||
color: var(--mark-color);
|
||||
background-color: var(--mark-bg-color);
|
||||
padding: var(--mark-spacing-y) var(--mark-spacing-x);
|
||||
}
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
pre {
|
||||
max-height: var(--pre-max-height);
|
||||
overflow-y: auto;
|
||||
font-family: var(--font-family-monospace);
|
||||
color: var(--pre-color);
|
||||
background-color: var(--pre-bg-color);
|
||||
border-radius: var(--pre-border-radius);
|
||||
padding: 1rem;
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: var(--font-size-small);
|
||||
}
|
||||
|
||||
/***************************************************************************************************
|
||||
* Lists
|
||||
***************************************************************************************************/
|
||||
|
||||
dl,
|
||||
ol,
|
||||
ul {
|
||||
line-height: var(--line-height);
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
dt {
|
||||
font-weight: var(--font-weight-bold);
|
||||
}
|
||||
|
||||
dd {
|
||||
margin-left: 0;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
ol ol,
|
||||
ol ul,
|
||||
ul ol,
|
||||
ul ul {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
/***************************************************************************************************
|
||||
* Placeholders
|
||||
***************************************************************************************************/
|
||||
|
||||
::-webkit-input-placeholder { color: var(--placeholder-color); }
|
||||
::-moz-placeholder { color: var(--placeholder-color); }
|
||||
:-ms-input-placeholder { color: var(--placeholder-color); }
|
||||
:-moz-placeholder { color: var(--placeholder-color); }
|
||||
|
||||
/***************************************************************************************************
|
||||
* Selections
|
||||
***************************************************************************************************/
|
||||
|
||||
::-moz-selection {
|
||||
background-color: var(--selection-bg-color);
|
||||
color: var(--selection-color);
|
||||
text-shadow: none !important;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background-color: var(--selection-bg-color);
|
||||
color: var(--selection-color);
|
||||
text-shadow: none !important;
|
||||
}
|
||||
320
css/forms.css
320
css/forms.css
|
|
@ -1,320 +0,0 @@
|
|||
/*! Shoelace forms */
|
||||
|
||||
fieldset {
|
||||
border: solid var(--fieldset-border-width) var(--fieldset-border-color);
|
||||
border-radius: var(--fieldset-border-radius);
|
||||
padding: var(--component-spacing) calc(var(--component-spacing) * 1.5);
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
fieldset legend {
|
||||
font-weight: var(--font-weight-bold);
|
||||
padding: 0 .25rem;
|
||||
}
|
||||
|
||||
label {
|
||||
display: inline-block;
|
||||
margin-bottom: .25rem;
|
||||
}
|
||||
|
||||
label + label {
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
input[type="color"],
|
||||
input[type="date"],
|
||||
input[type="datetime-local"],
|
||||
input[type="email"],
|
||||
input[type="month"],
|
||||
input[type="number"],
|
||||
input[type="password"],
|
||||
input[type="search"],
|
||||
input[type="tel"],
|
||||
input[type="text"],
|
||||
input[type="time"],
|
||||
input[type="url"],
|
||||
input[type="week"],
|
||||
select,
|
||||
textarea {
|
||||
width: 100%;
|
||||
font-family: var(--input-font-family);
|
||||
font-size: var(--input-font-size);
|
||||
font-weight: var(--input-font-weight);
|
||||
color: var(--input-color);
|
||||
border: solid var(--input-border-width) var(--input-border-color);
|
||||
border-radius: var(--input-border-radius);
|
||||
box-shadow: var(--input-box-shadow);
|
||||
background-color: var(--input-bg-color);
|
||||
height: var(--input-height);
|
||||
line-height: 1;
|
||||
vertical-align: middle;
|
||||
display: block;
|
||||
padding: calc(var(--component-spacing) * .5);
|
||||
margin: 0;
|
||||
transition: .1s border-color, .1s background-color, .1s color;
|
||||
-moz-appearance: none;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
input[type="color"]:focus,
|
||||
input[type="date"]:focus,
|
||||
input[type="datetime-local"]:focus,
|
||||
input[type="email"]:focus,
|
||||
input[type="month"]:focus,
|
||||
input[type="number"]:focus,
|
||||
input[type="password"]:focus,
|
||||
input[type="search"]:focus,
|
||||
input[type="tel"]:focus,
|
||||
input[type="text"]:focus,
|
||||
input[type="time"]:focus,
|
||||
input[type="url"]:focus,
|
||||
input[type="week"]:focus,
|
||||
select:focus,
|
||||
textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--input-border-focus-color);
|
||||
}
|
||||
|
||||
select {
|
||||
position: relative;
|
||||
background-image: url('data:image/svg+xml;charset=utf8,%3C?xml version="1.0" encoding="utf-8"?%3E%3Csvg width="1792" height="1792" fill="#000" viewBox="0 0 1792 1792" xmlns="http://www.w3.org/2000/svg"%3E%3Cpath d="M1408 704q0 26-19 45l-448 448q-19 19-45 19t-45-19l-448-448q-19-19-19-45t19-45 45-19h896q26 0 45 19t19 45z"/%3E%3C/svg%3E');
|
||||
background-position: right .4rem center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: .8rem;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
padding-right: calc(var(--component-spacing) * .5 + 1rem);
|
||||
}
|
||||
|
||||
textarea {
|
||||
height: auto;
|
||||
resize: vertical;
|
||||
line-height: var(--line-height);
|
||||
}
|
||||
|
||||
input[type="checkbox"],
|
||||
input[type="radio"] {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
input[disabled] {
|
||||
opacity: .5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
input[readonly] {
|
||||
background-color: var(--input-readonly-bg-color);
|
||||
}
|
||||
|
||||
input.input-small,
|
||||
select.input-small {
|
||||
font-size: calc(var(--input-font-size) * .8);
|
||||
height: var(--input-height-small);
|
||||
}
|
||||
|
||||
textarea.input-small {
|
||||
font-size: calc(var(--input-font-size) * .8);
|
||||
}
|
||||
|
||||
input.input-big,
|
||||
select.input-big {
|
||||
font-size: calc(var(--input-font-size) * 1.2);
|
||||
height: var(--input-height-big);
|
||||
}
|
||||
|
||||
textarea.input-big {
|
||||
font-size: calc(var(--input-font-size) * 1.2);
|
||||
}
|
||||
|
||||
/* Range styles courtesy of http://danielstern.ca/range.css/ */
|
||||
input[type=range] {
|
||||
-webkit-appearance: none;
|
||||
width: 100%;
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
input[type=range]:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
input[type=range]::-webkit-slider-runnable-track {
|
||||
width: 100%;
|
||||
height: .5rem;
|
||||
cursor: pointer;
|
||||
background: var(--input-range-track-color);
|
||||
border-radius: var(--input-border-radius);
|
||||
border: none;
|
||||
box-shadow: var(--input-range-track-box-shadow);
|
||||
}
|
||||
|
||||
input[type=range]::-webkit-slider-thumb {
|
||||
border: none;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
border-radius: 50%;
|
||||
background: var(--input-range-thumb-color);
|
||||
cursor: pointer;
|
||||
-webkit-appearance: none;
|
||||
margin-top: -.5rem;
|
||||
}
|
||||
|
||||
input[type=range]:focus::-webkit-slider-runnable-track {
|
||||
background: var(--input-range-track-color);
|
||||
}
|
||||
|
||||
input[type=range]::-moz-range-track {
|
||||
width: 100%;
|
||||
height: .5rem;
|
||||
cursor: pointer;
|
||||
background: var(--input-range-track-color);
|
||||
border-radius: var(--input-border-radius);
|
||||
border: none;
|
||||
box-shadow: var(--input-range-track-box-shadow);
|
||||
}
|
||||
|
||||
input[type=range]::-moz-range-thumb {
|
||||
border: none;
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
border-radius: 50%;
|
||||
background: var(--input-range-thumb-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input[type=range]::-ms-track {
|
||||
width: 100%;
|
||||
height: .5rem;
|
||||
cursor: pointer;
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
input[type=range]::-ms-fill-lower {
|
||||
background: #2f6ea5;
|
||||
border: none;
|
||||
border-radius: var(--input-border-radius);
|
||||
}
|
||||
|
||||
input[type=range]::-ms-fill-upper {
|
||||
background: var(--input-range-track-color);
|
||||
border: none;
|
||||
border-radius: var(--input-border-radius);
|
||||
}
|
||||
|
||||
input[type=range]::-ms-thumb {
|
||||
border: none;
|
||||
height: .5rem;
|
||||
width: .5rem;
|
||||
border-radius: 50%;
|
||||
background: var(--input-range-thumb-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
input[type=range]:focus::-ms-fill-lower {
|
||||
background: var(--input-range-track-color);
|
||||
}
|
||||
|
||||
input[type=range]:focus::-ms-fill-upper {
|
||||
background: var(--input-range-track-color);
|
||||
}
|
||||
|
||||
/* Input fields */
|
||||
.input-block {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* Input groups */
|
||||
.input-group {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.input-group > input,
|
||||
.input-group > button,
|
||||
.input-group > .button {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.input-group > input:first-child,
|
||||
.input-group > button:first-child,
|
||||
.input-group > .button:first-child {
|
||||
border-top-left-radius: var(--input-border-radius);
|
||||
border-bottom-left-radius: var(--input-border-radius);
|
||||
}
|
||||
|
||||
.input-group > input:last-child,
|
||||
.input-group > button:last-child,
|
||||
.input-group > .button:last-child {
|
||||
border-top-right-radius: var(--input-border-radius);
|
||||
border-bottom-right-radius: var(--input-border-radius);
|
||||
}
|
||||
|
||||
.input-group > input + input {
|
||||
border-left-width: 0;
|
||||
}
|
||||
|
||||
.input-group > input + input:focus {
|
||||
border-left-width: var(--input-border-width);
|
||||
margin-left: calc(var(--input-border-width) * -1);
|
||||
}
|
||||
|
||||
/* Input addons */
|
||||
.input-addon {
|
||||
color: var(--text-muted);
|
||||
height: var(--input-height);
|
||||
line-height: var(--input-height);
|
||||
border-top: solid var(--input-border-width) var(--input-border-color);
|
||||
border-bottom: solid var(--input-border-width) var(--input-border-color);
|
||||
background: #f8f8f8;
|
||||
padding: 0 calc(var(--component-spacing) * .5);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.input-addon-small {
|
||||
font-size: calc(var(--input-font-size) * .8);
|
||||
height: var(--input-height-small);
|
||||
line-height: var(--input-height-small);
|
||||
}
|
||||
|
||||
.input-addon-big {
|
||||
font-size: calc(var(--input-font-size) * 1.2);
|
||||
height: var(--input-height-big);
|
||||
line-height: var(--input-height-big);
|
||||
}
|
||||
|
||||
.input-addon:first-child {
|
||||
border-left: solid var(--input-border-width) var(--input-border-color);
|
||||
border-top-left-radius: var(--input-border-radius);
|
||||
border-bottom-left-radius: var(--input-border-radius);
|
||||
}
|
||||
|
||||
.input-addon:last-child {
|
||||
border-right: solid var(--input-border-width) var(--input-border-color);
|
||||
border-top-right-radius: var(--input-border-radius);
|
||||
border-bottom-right-radius: var(--input-border-radius);
|
||||
}
|
||||
|
||||
/* Validation */
|
||||
.input-invalid label {
|
||||
color: var(--input-invalid-color) !important;
|
||||
}
|
||||
|
||||
.input-invalid,
|
||||
.input-invalid input,
|
||||
.input-invalid select {
|
||||
color: var(--input-invalid-color) !important;
|
||||
border-color: var(--input-invalid-border-color) !important;
|
||||
}
|
||||
|
||||
.input-valid label {
|
||||
color: var(--input-valid-color) !important;
|
||||
}
|
||||
|
||||
.input-valid,
|
||||
.input-valid input,
|
||||
.input-valid select {
|
||||
color: var(--input-valid-color) !important;
|
||||
border-color: var(--input-valid-border-color) !important;
|
||||
}
|
||||
|
|
@ -1,58 +0,0 @@
|
|||
/*! Shoelace loaders */
|
||||
|
||||
@keyframes loader {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.loader,
|
||||
.loader-bg::after {
|
||||
width: var(--loader-size);
|
||||
height: var(--loader-size);
|
||||
border-radius: 50%;
|
||||
border: solid var(--loader-width) var(--loader-bg-color);
|
||||
border-top-color: var(--loader-color);
|
||||
border-left-color: var(--loader-color);
|
||||
display: inline-block;
|
||||
animation: loader var(--loader-speed) linear infinite;
|
||||
vertical-align: middle;
|
||||
margin: var(--loader-spacing-y) var(--loader-spacing-x);
|
||||
}
|
||||
|
||||
.loader-small,
|
||||
.loader-bg-small::after {
|
||||
border-width: calc(var(--loader-width) / 2);
|
||||
width: calc(var(--loader-size) / 2);
|
||||
height: calc(var(--loader-size) / 2);
|
||||
}
|
||||
|
||||
.loader-big,
|
||||
.loader-bg-big::after {
|
||||
border-width: calc(var(--loader-width) * 1.5);
|
||||
width: calc(var(--loader-size) * 2);
|
||||
height: calc(var(--loader-size) * 2);
|
||||
}
|
||||
|
||||
.loader-bg {
|
||||
position: relative !important;
|
||||
}
|
||||
|
||||
.loader-bg::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: calc(50% - var(--loader-size) / 2);
|
||||
left: calc(50% - var(--loader-size) / 2);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.loader-bg-small::after {
|
||||
position: absolute;
|
||||
top: calc(50% - var(--loader-size) / 4);
|
||||
left: calc(50% - var(--loader-size) / 4);
|
||||
}
|
||||
|
||||
.loader-bg-big::after {
|
||||
position: absolute;
|
||||
top: calc(50% - var(--loader-size) / 1);
|
||||
left: calc(50% - var(--loader-size) / 1);
|
||||
}
|
||||
|
|
@ -1,447 +0,0 @@
|
|||
/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */
|
||||
|
||||
/* Document
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Correct the line height in all browsers.
|
||||
* 2. Prevent adjustments of font size after orientation changes in
|
||||
* IE on Windows Phone and in iOS.
|
||||
*/
|
||||
|
||||
html {
|
||||
line-height: 1.15; /* 1 */
|
||||
-ms-text-size-adjust: 100%; /* 2 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
}
|
||||
|
||||
/* Sections
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Remove the margin in all browsers (opinionated).
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 9-.
|
||||
*/
|
||||
|
||||
article,
|
||||
aside,
|
||||
footer,
|
||||
header,
|
||||
nav,
|
||||
section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the font size and margin on `h1` elements within `section` and
|
||||
* `article` contexts in Chrome, Firefox, and Safari.
|
||||
*/
|
||||
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
margin: 0.67em 0;
|
||||
}
|
||||
|
||||
/* Grouping content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 9-.
|
||||
* 1. Add the correct display in IE.
|
||||
*/
|
||||
|
||||
figcaption,
|
||||
figure,
|
||||
main { /* 1 */
|
||||
display: block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct margin in IE 8.
|
||||
*/
|
||||
|
||||
figure {
|
||||
margin: 1em 40px;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in Firefox.
|
||||
* 2. Show the overflow in Edge and IE.
|
||||
*/
|
||||
|
||||
hr {
|
||||
box-sizing: content-box; /* 1 */
|
||||
height: 0; /* 1 */
|
||||
overflow: visible; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
pre {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/* Text-level semantics
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Remove the gray background on active links in IE 10.
|
||||
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
|
||||
*/
|
||||
|
||||
a {
|
||||
background-color: transparent; /* 1 */
|
||||
-webkit-text-decoration-skip: objects; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Remove the bottom border in Chrome 57- and Firefox 39-.
|
||||
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
||||
*/
|
||||
|
||||
abbr[title] {
|
||||
border-bottom: none; /* 1 */
|
||||
text-decoration: underline; /* 2 */
|
||||
text-decoration: underline dotted; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent the duplicate application of `bolder` by the next rule in Safari 6.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font weight in Chrome, Edge, and Safari.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||
* 2. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
samp {
|
||||
font-family: monospace, monospace; /* 1 */
|
||||
font-size: 1em; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font style in Android 4.3-.
|
||||
*/
|
||||
|
||||
dfn {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct background and color in IE 9-.
|
||||
*/
|
||||
|
||||
mark {
|
||||
background-color: #ff0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/**
|
||||
* Prevent `sub` and `sup` elements from affecting the line height in
|
||||
* all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
/* Embedded content
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 9-.
|
||||
*/
|
||||
|
||||
audio,
|
||||
video {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in iOS 4-7.
|
||||
*/
|
||||
|
||||
audio:not([controls]) {
|
||||
display: none;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the border on images inside links in IE 10-.
|
||||
*/
|
||||
|
||||
img {
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* Hide the overflow in IE.
|
||||
*/
|
||||
|
||||
svg:not(:root) {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/* Forms
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* 1. Change the font styles in all browsers (opinionated).
|
||||
* 2. Remove the margin in Firefox and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: sans-serif; /* 1 */
|
||||
font-size: 100%; /* 1 */
|
||||
line-height: 1.15; /* 1 */
|
||||
margin: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Show the overflow in IE.
|
||||
* 1. Show the overflow in Edge.
|
||||
*/
|
||||
|
||||
button,
|
||||
input { /* 1 */
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inheritance of text transform in Edge, Firefox, and IE.
|
||||
* 1. Remove the inheritance of text transform in Firefox.
|
||||
*/
|
||||
|
||||
button,
|
||||
select { /* 1 */
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
|
||||
* controls in Android 4.
|
||||
* 2. Correct the inability to style clickable types in iOS and Safari.
|
||||
*/
|
||||
|
||||
button,
|
||||
html [type="button"], /* 1 */
|
||||
[type="reset"],
|
||||
[type="submit"] {
|
||||
-webkit-appearance: button; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner border and padding in Firefox.
|
||||
*/
|
||||
|
||||
button::-moz-focus-inner,
|
||||
[type="button"]::-moz-focus-inner,
|
||||
[type="reset"]::-moz-focus-inner,
|
||||
[type="submit"]::-moz-focus-inner {
|
||||
border-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/**
|
||||
* Restore the focus styles unset by the previous rule.
|
||||
*/
|
||||
|
||||
button:-moz-focusring,
|
||||
[type="button"]:-moz-focusring,
|
||||
[type="reset"]:-moz-focusring,
|
||||
[type="submit"]:-moz-focusring {
|
||||
outline: 1px dotted ButtonText;
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the padding in Firefox.
|
||||
*/
|
||||
|
||||
fieldset {
|
||||
padding: 0.35em 0.75em 0.625em;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the text wrapping in Edge and IE.
|
||||
* 2. Correct the color inheritance from `fieldset` elements in IE.
|
||||
* 3. Remove the padding so developers are not caught out when they zero out
|
||||
* `fieldset` elements in all browsers.
|
||||
*/
|
||||
|
||||
legend {
|
||||
box-sizing: border-box; /* 1 */
|
||||
color: inherit; /* 2 */
|
||||
display: table; /* 1 */
|
||||
max-width: 100%; /* 1 */
|
||||
padding: 0; /* 3 */
|
||||
white-space: normal; /* 1 */
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Add the correct display in IE 9-.
|
||||
* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||
*/
|
||||
|
||||
progress {
|
||||
display: inline-block; /* 1 */
|
||||
vertical-align: baseline; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the default vertical scrollbar in IE.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Add the correct box sizing in IE 10-.
|
||||
* 2. Remove the padding in IE 10-.
|
||||
*/
|
||||
|
||||
[type="checkbox"],
|
||||
[type="radio"] {
|
||||
box-sizing: border-box; /* 1 */
|
||||
padding: 0; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Correct the cursor style of increment and decrement buttons in Chrome.
|
||||
*/
|
||||
|
||||
[type="number"]::-webkit-inner-spin-button,
|
||||
[type="number"]::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the odd appearance in Chrome and Safari.
|
||||
* 2. Correct the outline style in Safari.
|
||||
*/
|
||||
|
||||
[type="search"] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
outline-offset: -2px; /* 2 */
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
|
||||
*/
|
||||
|
||||
[type="search"]::-webkit-search-cancel-button,
|
||||
[type="search"]::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/**
|
||||
* 1. Correct the inability to style clickable types in iOS and Safari.
|
||||
* 2. Change font properties to `inherit` in Safari.
|
||||
*/
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button; /* 1 */
|
||||
font: inherit; /* 2 */
|
||||
}
|
||||
|
||||
/* Interactive
|
||||
========================================================================== */
|
||||
|
||||
/*
|
||||
* Add the correct display in IE 9-.
|
||||
* 1. Add the correct display in Edge, IE, and Firefox.
|
||||
*/
|
||||
|
||||
details, /* 1 */
|
||||
menu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/*
|
||||
* Add the correct display in all browsers.
|
||||
*/
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
/* Scripting
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 9-.
|
||||
*/
|
||||
|
||||
canvas {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
/**
|
||||
* Add the correct display in IE.
|
||||
*/
|
||||
|
||||
template {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Hidden
|
||||
========================================================================== */
|
||||
|
||||
/**
|
||||
* Add the correct display in IE 10-.
|
||||
*/
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
/*!
|
||||
Shoelace.css - 1.0.0-beta1
|
||||
(c) A Beautiful Site, LLC
|
||||
|
||||
Released under the MIT license
|
||||
Source: https://github.com/claviska/shoelace-css
|
||||
*/
|
||||
|
||||
/* Reset */
|
||||
@import url('normalize.css');
|
||||
|
||||
/* Shoelace variables and base styles */
|
||||
@import url('variables.css');
|
||||
@import url('content.css');
|
||||
|
||||
/* Components */
|
||||
@import url('alerts.css');
|
||||
@import url('badges.css');
|
||||
@import url('buttons.css');
|
||||
@import url('forms.css');
|
||||
@import url('loaders.css');
|
||||
@import url('tabs.css');
|
||||
@import url('tables.css');
|
||||
@import url('utilities.css');
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
/*! Shoelace tables */
|
||||
|
||||
.table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.table caption {
|
||||
caption-side: bottom;
|
||||
font-size: var(--font-size-small);
|
||||
color: var(--text-muted);
|
||||
text-align: center;
|
||||
padding-top: var(--table-spacing-y);
|
||||
}
|
||||
|
||||
.table th {
|
||||
text-align: left;
|
||||
background: var(--table-header-bg-color);
|
||||
border-bottom: solid calc(var(--table-border-width) * 2) var(--table-border-color);
|
||||
padding: var(--table-spacing-y) var(--table-spacing-x);
|
||||
}
|
||||
|
||||
.table td {
|
||||
border-bottom: solid var(--table-border-width) var(--table-border-color);
|
||||
padding: var(--table-spacing-y) var(--table-spacing-x);
|
||||
}
|
||||
|
||||
.table.table-striped tr:nth-child(odd) td {
|
||||
background-color: var(--table-stripe-bg-color);
|
||||
}
|
||||
|
||||
.table.table-bordered {
|
||||
border: solid var(--table-border-width) var(--table-border-color);
|
||||
}
|
||||
|
||||
.table.table-bordered th,
|
||||
.table.table-bordered td {
|
||||
border-style: solid;
|
||||
border-width: var(--table-border-width);
|
||||
border-color: var(--table-border-color);
|
||||
}
|
||||
52
css/tabs.css
52
css/tabs.css
|
|
@ -1,52 +0,0 @@
|
|||
/*! Shoelace tabs */
|
||||
|
||||
.tabs {
|
||||
width: 100%;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.tabs-nav {
|
||||
margin-bottom: 1rem;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.tabs-nav a {
|
||||
color: var(--tab-color);
|
||||
text-decoration: none;
|
||||
background-color: var(--tab-bg-color);
|
||||
border-radius: var(--tab-border-radius);
|
||||
padding: var(--tab-spacing-y) var(--tab-spacing-x);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.tabs-nav a:hover {
|
||||
color: var(--tab-color-hover);
|
||||
background-color: var(--tab-bg-color-hover);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.tabs-nav a.active {
|
||||
color: var(--tab-color-active);
|
||||
background-color: var(--tab-bg-color-active);
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.tabs-nav a.disabled {
|
||||
color: var(--tab-color-disabled);
|
||||
background-color: var(--tab-bg-color-disabled);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.tabs-pane {
|
||||
border: solid var(--tab-pane-border-width) var(--tab-pane-border-color);
|
||||
border-radius: .25rem;
|
||||
padding: var(--tab-pane-spacing-y) var(--tab-pane-spacing-x);
|
||||
}
|
||||
|
||||
.tabs-pane:not(.active) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tabs-pane :last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
|
@ -1,174 +0,0 @@
|
|||
/*! Shoelace utilties */
|
||||
|
||||
/***************************************************************************************************
|
||||
* Float utilities
|
||||
***************************************************************************************************/
|
||||
|
||||
.clearfix::before,
|
||||
.clearfix::after {
|
||||
content: '';
|
||||
display: table;
|
||||
}
|
||||
|
||||
.clearfix::after {
|
||||
clear: both;
|
||||
}
|
||||
|
||||
.float-left {
|
||||
float: left !important;
|
||||
}
|
||||
|
||||
.float-right {
|
||||
float: right !important;
|
||||
}
|
||||
|
||||
/***************************************************************************************************
|
||||
* Sizing utilities
|
||||
***************************************************************************************************/
|
||||
|
||||
.width-0 { width: 0% !important; }
|
||||
.width-5 { width: 5% !important; }
|
||||
.width-10 { width: 10% !important; }
|
||||
.width-15 { width: 15% !important; }
|
||||
.width-20 { width: 10% !important; }
|
||||
.width-25 { width: 25% !important; }
|
||||
.width-30 { width: 30% !important; }
|
||||
.width-35 { width: 35% !important; }
|
||||
.width-40 { width: 40% !important; }
|
||||
.width-45 { width: 45% !important; }
|
||||
.width-50 { width: 50% !important; }
|
||||
.width-55 { width: 55% !important; }
|
||||
.width-60 { width: 60% !important; }
|
||||
.width-65 { width: 65% !important; }
|
||||
.width-70 { width: 70% !important; }
|
||||
.width-75 { width: 75% !important; }
|
||||
.width-80 { width: 80% !important; }
|
||||
.width-85 { width: 85% !important; }
|
||||
.width-90 { width: 90% !important; }
|
||||
.width-95 { width: 95% !important; }
|
||||
.width-100 { width: 100% !important; }
|
||||
|
||||
.height-0 { height: 0% !important; }
|
||||
.height-5 { height: 5% !important; }
|
||||
.height-10 { height: 10% !important; }
|
||||
.height-15 { height: 15% !important; }
|
||||
.height-20 { height: 10% !important; }
|
||||
.height-25 { height: 25% !important; }
|
||||
.height-30 { height: 30% !important; }
|
||||
.height-35 { height: 35% !important; }
|
||||
.height-40 { height: 40% !important; }
|
||||
.height-45 { height: 45% !important; }
|
||||
.height-50 { height: 50% !important; }
|
||||
.height-55 { height: 55% !important; }
|
||||
.height-60 { height: 60% !important; }
|
||||
.height-65 { height: 65% !important; }
|
||||
.height-70 { height: 70% !important; }
|
||||
.height-75 { height: 75% !important; }
|
||||
.height-80 { height: 80% !important; }
|
||||
.height-85 { height: 85% !important; }
|
||||
.height-90 { height: 90% !important; }
|
||||
.height-95 { height: 95% !important; }
|
||||
.height-100 { height: 100% !important; }
|
||||
|
||||
/***************************************************************************************************
|
||||
* Spacing utilities
|
||||
***************************************************************************************************/
|
||||
|
||||
.m-none { margin: 0 !important; }
|
||||
.m-x-none { margin-left: 0 !important; margin-right: 0 !important; }
|
||||
.m-y-none { margin-top: 0 !important; margin-bottom: 0 !important; }
|
||||
.m-t-none { margin-top: 0 !important; }
|
||||
.m-r-none { margin-right: 0 !important; }
|
||||
.m-b-none { margin-bottom: 0 !important; }
|
||||
.m-l-none { margin-left: 0 !important; }
|
||||
|
||||
.m-small { margin: var(--spacing-small) !important; }
|
||||
.m-x-small { margin-left: var(--spacing-small) !important; margin-right: var(--spacing-small) !important; }
|
||||
.m-y-small { margin-top: var(--spacing-small) !important; margin-bottom: var(--spacing-small) !important; }
|
||||
.m-t-small { margin-top: var(--spacing-small) !important; }
|
||||
.m-r-small { margin-right: var(--spacing-small) !important; }
|
||||
.m-b-small { margin-bottom: var(--spacing-small) !important; }
|
||||
.m-l-small { margin-left: var(--spacing-small) !important; }
|
||||
|
||||
.m-medium { margin: var(--spacing-medium) !important; }
|
||||
.m-x-medium { margin-left: var(--spacing-medium) !important; margin-right: var(--spacing-medium) !important; }
|
||||
.m-y-medium { margin-top: var(--spacing-medium) !important; margin-bottom: var(--spacing-medium) !important; }
|
||||
.m-t-medium { margin-top: var(--spacing-medium) !important; }
|
||||
.m-r-medium { margin-right: var(--spacing-medium) !important; }
|
||||
.m-b-medium { margin-bottom: var(--spacing-medium) !important; }
|
||||
.m-l-medium { margin-left: var(--spacing-medium) !important; }
|
||||
|
||||
.m-big { margin: var(--spacing-big) !important; }
|
||||
.m-x-big { margin-left: var(--spacing-big) !important; margin-right: var(--spacing-big) !important; }
|
||||
.m-y-big { margin-top: var(--spacing-big) !important; margin-bottom: var(--spacing-big) !important; }
|
||||
.m-t-big { margin-top: var(--spacing-big) !important; }
|
||||
.m-r-big { margin-right: var(--spacing-big) !important; }
|
||||
.m-b-big { margin-bottom: var(--spacing-big) !important; }
|
||||
.m-l-big { margin-left: var(--spacing-big) !important; }
|
||||
|
||||
.p-none { padding: 0 !important; }
|
||||
.p-x-none { padding-left: 0 !important; padding-right: 0 !important; }
|
||||
.p-y-none { padding-top: 0 !important; padding-bottom: 0 !important; }
|
||||
.p-t-none { padding-top: 0 !important; }
|
||||
.p-r-none { padding-right: 0 !important; }
|
||||
.p-b-none { padding-bottom: 0 !important; }
|
||||
.p-l-none { padding-left: 0 !important; }
|
||||
|
||||
.p-small { padding: var(--spacing-small) !important; }
|
||||
.p-x-small { padding-left: var(--spacing-small) !important; padding-right: var(--spacing-small) !important; }
|
||||
.p-y-small { padding-top: var(--spacing-small) !important; padding-bottom: var(--spacing-small) !important; }
|
||||
.p-t-small { padding-top: var(--spacing-small) !important; }
|
||||
.p-r-small { padding-right: var(--spacing-small) !important; }
|
||||
.p-b-small { padding-bottom: var(--spacing-small) !important; }
|
||||
.p-l-small { padding-left: var(--spacing-small) !important; }
|
||||
|
||||
.p-medium { padding: var(--spacing-medium) !important; }
|
||||
.p-x-medium { padding-left: var(--spacing-medium) !important; padding-right: var(--spacing-medium) !important; }
|
||||
.p-y-medium { padding-top: var(--spacing-medium) !important; padding-bottom: var(--spacing-medium) !important; }
|
||||
.p-t-medium { padding-top: var(--spacing-medium) !important; }
|
||||
.p-r-medium { padding-right: var(--spacing-medium) !important; }
|
||||
.p-b-medium { padding-bottom: var(--spacing-medium) !important; }
|
||||
.p-l-medium { padding-left: var(--spacing-medium) !important; }
|
||||
|
||||
.p-big { padding: var(--spacing-big) !important; }
|
||||
.p-x-big { padding-left: var(--spacing-big) !important; padding-right: var(--spacing-big) !important; }
|
||||
.p-y-big { padding-top: var(--spacing-big) !important; padding-bottom: var(--spacing-big) !important; }
|
||||
.p-t-big { padding-top: var(--spacing-big) !important; }
|
||||
.p-r-big { padding-right: var(--spacing-big) !important; }
|
||||
.p-b-big { padding-bottom: var(--spacing-big) !important; }
|
||||
.p-l-big { padding-left: var(--spacing-big) !important; }
|
||||
|
||||
.m-x-auto { margin-left: auto !important; margin-right: auto !important; }
|
||||
|
||||
/***************************************************************************************************
|
||||
* Text utilities
|
||||
***************************************************************************************************/
|
||||
|
||||
/* Text color */
|
||||
.text-success { color: var(--state-success) !important; }
|
||||
.text-info { color: var(--state-info) !important; }
|
||||
.text-warning { color: var(--state-warning) !important; }
|
||||
.text-danger { color: var(--state-danger) !important; }
|
||||
.text-muted { color: var(--text-muted) !important; }
|
||||
|
||||
/* Text size */
|
||||
.text-small { font-size: var(--font-size-small) !important; }
|
||||
.text-big { font-size: var(--font-size-big) !important; }
|
||||
|
||||
/* Text style */
|
||||
.text-bold { font-weight: var(--font-weight-bold) !important; }
|
||||
.text-italic { font-style: italic !important; }
|
||||
|
||||
/* Text alignment */
|
||||
.text-left { text-align: left !important; }
|
||||
.text-right { text-align: right !important; }
|
||||
.text-center { text-align: center !important; }
|
||||
.text-justify { text-align: justify !important; }
|
||||
|
||||
/* Text case */
|
||||
.text-lowercase { text-transform: lowercase !important; }
|
||||
.text-uppercase { text-transform: uppercase !important; }
|
||||
.text-capitalize { text-transform: capitalize !important; }
|
||||
|
||||
/* Text wrapping */
|
||||
.text-nowrap { white-space: nowrap !important; }
|
||||
|
|
@ -1,219 +0,0 @@
|
|||
/*! Shoelace variables */
|
||||
|
||||
:root {
|
||||
/* Fonts */
|
||||
--font-family-sans-serif: sans-serif;
|
||||
--font-family-serif: serif;
|
||||
--font-family-system: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
|
||||
--font-family-monospace: Menlo, Consolas, "DejaVu Sans Mono", monospace;
|
||||
|
||||
/* Colors (most courtesy of http://clrs.cc/) */
|
||||
--color-primary: tomato;
|
||||
--color-white: white;
|
||||
--color-navy: #001f3f;
|
||||
--color-blue: #0074d9;
|
||||
--color-aqua: #7fdbff;
|
||||
--color-teal: #39cccc;
|
||||
--color-olive: #3d9970;
|
||||
--color-green: #2ecc40;
|
||||
--color-lime: #01ff70;
|
||||
--color-yellow: #ffdc00;
|
||||
--color-orange: #ff851b;
|
||||
--color-red: #ff4136;
|
||||
--color-maroon: #85144b;
|
||||
--color-fuchsia: #f012be;
|
||||
--color-purple: #b10dc9;
|
||||
--color-black: #111;
|
||||
--color-gray: #aaa;
|
||||
--color-silver: #ddd;
|
||||
|
||||
/* States */
|
||||
--state-success: var(--color-green);
|
||||
--state-info: var(--color-aqua);
|
||||
--state-warning: var(--color-orange);
|
||||
--state-danger: var(--color-red);
|
||||
--state-inverse: var(--color-black);
|
||||
|
||||
/* Components */
|
||||
--component-bg-color: #f2f2f2;
|
||||
--component-border-color: #ddd;
|
||||
--component-border-radius: .25rem;
|
||||
--component-border-width: 1px;
|
||||
--component-spacing: 1rem;
|
||||
--component-spacing-big: 2rem;
|
||||
--component-spacing-small: .5rem;
|
||||
|
||||
/* Content */
|
||||
--body-bg-color: var(--color-white);
|
||||
--body-color: var(--color-black);
|
||||
--font-family: var(--font-family-system);
|
||||
--font-size: 1rem; /* Most browsers use a default font size of 16px */
|
||||
--font-size-big: 1.25rem;
|
||||
--font-size-small: .875rem;
|
||||
--font-weight-light: 300;
|
||||
--font-weight: 400;
|
||||
--font-weight-bold: 700;
|
||||
--line-height: 1.5;
|
||||
--text-muted: var(--color-gray);
|
||||
|
||||
--code-font-size: 90%;
|
||||
--code-color: var(--color-olive);
|
||||
--code-border-radius: var(--component-border-radius);
|
||||
--code-bg-color: var(--component-bg-color);
|
||||
--code-spacing-x: calc(var(--font-size) * .4);
|
||||
--code-spacing-y: calc(var(--font-size) * .2);
|
||||
|
||||
--headings-font-family: var(--font-family-system);
|
||||
--headings-font-weight: var(--font-weight-light);
|
||||
--headings-line-height: 1.1;
|
||||
--headings-margin-bottom: .5rem;
|
||||
--headings-color: inherit;
|
||||
--headings-font-size-h1: 2.5rem;
|
||||
--headings-font-size-h2: 2rem;
|
||||
--headings-font-size-h3: 1.75rem;
|
||||
--headings-font-size-h4: 1.5rem;
|
||||
--headings-font-size-h5: 1.25rem;
|
||||
--headings-font-size-h6: 1rem;
|
||||
|
||||
--hr-width: 1px;
|
||||
|
||||
--kbd-font-size: 90%;
|
||||
--kbd-color: var(--color-white);
|
||||
--kbd-border-radius: var(--component-border-radius);
|
||||
--kbd-bg-color: var(--color-black);
|
||||
--kbd-spacing-x: calc(var(--font-size) * .4);
|
||||
--kbd-spacing-y: calc(var(--font-size) * .2);
|
||||
|
||||
--link-color: var(--color-primary);
|
||||
--link-text-decoration: none;
|
||||
--link-color-hover: var(--link-color);
|
||||
--link-text-decoration-hover: underline;
|
||||
|
||||
--mark-color: inherit;
|
||||
--mark-bg-color: var(--color-yellow);
|
||||
--mark-spacing-x: calc(var(--font-size) * .4);
|
||||
--mark-spacing-y: calc(var(--font-size) * .2);
|
||||
|
||||
--placeholder-color: var(--text-muted);
|
||||
|
||||
--pre-color: var(--code-color);
|
||||
--pre-border-radius: var(--component-border-radius);
|
||||
--pre-bg-color: var(--code-bg-color);
|
||||
--pre-max-height: none;
|
||||
|
||||
--selection-color: var(--color-white);
|
||||
--selection-bg-color: var(--color-primary);
|
||||
|
||||
/* Alerts */
|
||||
--alert-color: var(--color-white);
|
||||
--alert-border-radius: var(--component-border-radius);
|
||||
--alert-bg-color-primary: var(--color-primary);
|
||||
--alert-bg-color-success: var(--state-success);
|
||||
--alert-bg-color-info: var(--state-info);
|
||||
--alert-bg-color-warning: var(--state-warning);
|
||||
--alert-bg-color-danger: var(--state-danger);
|
||||
--alert-bg-color-inverse: var(--state-inverse);
|
||||
--alert-spacing-x: var(--component-spacing);
|
||||
--alert-spacing-y: var(--component-spacing);
|
||||
|
||||
/* Badges */
|
||||
--badge-font-size: .9rem;
|
||||
--badge-color: var(--color-white);
|
||||
--badge-border-radius: var(--component-border-radius);
|
||||
--badge-bg-color-primary: var(--color-primary);
|
||||
--badge-bg-color-success: var(--state-success);
|
||||
--badge-bg-color-info: var(--state-info);
|
||||
--badge-bg-color-warning: var(--state-warning);
|
||||
--badge-bg-color-danger: var(--state-danger);
|
||||
--badge-bg-color-inverse: var(--state-inverse);
|
||||
--badge-spacing-x: calc(var(--component-spacing) * .4);
|
||||
--badge-spacing-y: calc(var(--component-spacing) * .15);
|
||||
|
||||
/* Buttons */
|
||||
--button-font-family: inherit;
|
||||
--button-font-weight: inherit;
|
||||
--button-font-size: var(--font-size);
|
||||
--button-color: var(--color-white);
|
||||
--button-border-radius: var(--component-border-radius);
|
||||
--button-box-shadow: inset 0 2px 0 rgba(255, 255, 255, .1), inset 0 -2px 0 rgba(0, 0, 0, .1);
|
||||
--button-box-shadow-hover: inset 0 2px 5rem rgba(0, 0, 0, .1), inset 0 -2px 0 rgba(0, 0, 0, .1);
|
||||
--button-box-shadow-active: inset 0 2px 5rem rgba(0, 0, 0, .1), inset 0 2px 0 rgba(0, 0, 0, .1);
|
||||
--button-bg-color-primary: var(--color-primary);
|
||||
--button-bg-color-success: var(--state-success);
|
||||
--button-bg-color-info: var(--state-info);
|
||||
--button-bg-color-warning: var(--state-warning);
|
||||
--button-bg-color-danger: var(--state-danger);
|
||||
--button-bg-color-inverse: var(--state-inverse);
|
||||
|
||||
/* Forms */
|
||||
--fieldset-border-color: var(--component-border-color);
|
||||
--fieldset-border-width: var(--component-border-width);
|
||||
--fieldset-border-radius: var(--component-border-radius);
|
||||
--fieldset-spacing-x: var(--component-spacing);
|
||||
--fieldset-spacing-y: var(--component-spacing);
|
||||
|
||||
--input-font-family: inherit;
|
||||
--input-font-size: var(--font-size);
|
||||
--input-font-weight: inherit;
|
||||
--input-height: 2rem;
|
||||
--input-height-big: 2.75rem;
|
||||
--input-height-small: 1.25rem;
|
||||
--input-color: var(--body-color);
|
||||
--input-border-color: var(--component-border-color);
|
||||
--input-border-focus-color: var(--color-primary);
|
||||
--input-border-width: 1px;
|
||||
--input-border-radius: var(--component-border-radius);
|
||||
--input-bg-color: var(--color-white);
|
||||
--input-box-shadow: inset 0 1px 0 rgba(0, 0, 0, .05);
|
||||
--input-readonly-bg-color: var(--component-bg-color);
|
||||
--input-range-track-color: var(--component-bg-color);
|
||||
--input-range-track-box-shadow: inset 0 1px 0 rgba(0, 0, 0, .05);
|
||||
--input-range-thumb-color: var(--color-primary);
|
||||
--input-range-thumb-height: 2rem;
|
||||
|
||||
--input-invalid-color: var(--state-danger);
|
||||
--input-invalid-border-color: var(--state-danger);
|
||||
--input-valid-color: var(--state-success);
|
||||
--input-valid-border-color: var(--state-success);
|
||||
|
||||
/* Loaders */
|
||||
--loader-bg-color: var(--component-bg-color);
|
||||
--loader-color: var(--color-primary);
|
||||
--loader-size: 2rem;
|
||||
--loader-width: .25rem;
|
||||
--loader-speed: 750ms;
|
||||
--loader-spacing-x: var(--component-spacing-small);
|
||||
--loader-spacing-y: 0;
|
||||
|
||||
/* Spacing Utilties */
|
||||
--spacing-small: var(--component-spacing);
|
||||
--spacing-medium: calc(var(--component-spacing) * 2);
|
||||
--spacing-big: calc(var(--component-spacing) * 4);
|
||||
|
||||
/* Tabs */
|
||||
--tab-bg-color: var(--body-bg);
|
||||
--tab-bg-color-hover: var(--body-bg);
|
||||
--tab-bg-color-active: var(--link-color);
|
||||
--tab-bg-color-disabled: var(--body-bg);
|
||||
--tab-border-radius: var(--component-border-radius);
|
||||
--tab-color: var(--link-color);
|
||||
--tab-color-hover: var(--link-color-hover);
|
||||
--tab-color-active: var(--color-white);
|
||||
--tab-color-disabled: var(--text-muted);
|
||||
--tab-spacing-x: var(--component-spacing);
|
||||
--tab-spacing-y: calc(var(--component-spacing) / 2);
|
||||
|
||||
--tab-pane-border-color: var(--component-border-color);
|
||||
--tab-pane-border-radius: var(--component-border-radius);
|
||||
--tab-pane-border-width: var(--component-border-width);
|
||||
--tab-pane-spacing-x: var(--component-spacing);
|
||||
--tab-pane-spacing-y: var(--component-spacing);
|
||||
|
||||
/* Tables */
|
||||
--table-border-color: var(--component-border-color);
|
||||
--table-border-width: var(--component-border-width);
|
||||
--table-header-bg-color: transparent;
|
||||
--table-stripe-bg-color: var(--component-bg-color);
|
||||
--table-spacing-x: calc(var(--component-spacing-small) * 1.5);
|
||||
--table-spacing-y: var(--component-spacing-small);
|
||||
}
|
||||
|
|
@ -0,0 +1,230 @@
|
|||
import * as path from 'path';
|
||||
import { customElementJetBrainsPlugin } from 'custom-element-jet-brains-integration';
|
||||
import { customElementVsCodePlugin } from 'custom-element-vs-code-integration';
|
||||
import { customElementVuejsPlugin } from 'custom-element-vuejs-integration';
|
||||
import { parse } from 'comment-parser';
|
||||
import { pascalCase } from 'pascal-case';
|
||||
import commandLineArgs from 'command-line-args';
|
||||
import fs from 'fs';
|
||||
|
||||
const packageData = JSON.parse(fs.readFileSync('./package.json', 'utf8'));
|
||||
const { name, description, version, author, homepage, license } = packageData;
|
||||
|
||||
const { outdir } = commandLineArgs([
|
||||
{ name: 'litelement', type: String },
|
||||
{ name: 'analyze', defaultOption: true },
|
||||
{ name: 'outdir', type: String }
|
||||
]);
|
||||
|
||||
function noDash(string) {
|
||||
return string.replace(/^\s?-/, '').trim();
|
||||
}
|
||||
|
||||
function replace(string, terms) {
|
||||
terms.forEach(({ from, to }) => {
|
||||
string = string?.replace(from, to);
|
||||
});
|
||||
|
||||
return string;
|
||||
}
|
||||
|
||||
export default {
|
||||
globs: ['src/components/**/*.component.ts'],
|
||||
exclude: ['**/*.styles.ts', '**/*.test.ts'],
|
||||
plugins: [
|
||||
// Append package data
|
||||
{
|
||||
name: 'shoelace-package-data',
|
||||
packageLinkPhase({ customElementsManifest }) {
|
||||
customElementsManifest.package = { name, description, version, author, homepage, license };
|
||||
}
|
||||
},
|
||||
|
||||
// Infer tag names because we no longer use @customElement decorators.
|
||||
{
|
||||
name: 'shoelace-infer-tag-names',
|
||||
analyzePhase({ ts, node, moduleDoc }) {
|
||||
switch (node.kind) {
|
||||
case ts.SyntaxKind.ClassDeclaration: {
|
||||
const className = node.name.getText();
|
||||
const classDoc = moduleDoc?.declarations?.find(declaration => declaration.name === className);
|
||||
|
||||
const importPath = moduleDoc.path;
|
||||
|
||||
// This is kind of a best guess at components. "thing.component.ts"
|
||||
if (!importPath.endsWith('.component.ts')) {
|
||||
return;
|
||||
}
|
||||
|
||||
const tagNameWithoutPrefix = path.basename(importPath, '.component.ts');
|
||||
const tagName = 'sl-' + tagNameWithoutPrefix;
|
||||
|
||||
classDoc.tagNameWithoutPrefix = tagNameWithoutPrefix;
|
||||
classDoc.tagName = tagName;
|
||||
|
||||
// This used to be set to true by @customElement
|
||||
classDoc.customElement = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// Parse custom jsDoc tags
|
||||
{
|
||||
name: 'shoelace-custom-tags',
|
||||
analyzePhase({ ts, node, moduleDoc }) {
|
||||
switch (node.kind) {
|
||||
case ts.SyntaxKind.ClassDeclaration: {
|
||||
const className = node.name.getText();
|
||||
const classDoc = moduleDoc?.declarations?.find(declaration => declaration.name === className);
|
||||
const customTags = ['animation', 'dependency', 'documentation', 'since', 'status', 'title'];
|
||||
let customComments = '/**';
|
||||
|
||||
node.jsDoc?.forEach(jsDoc => {
|
||||
jsDoc?.tags?.forEach(tag => {
|
||||
const tagName = tag.tagName.getText();
|
||||
|
||||
if (customTags.includes(tagName)) {
|
||||
customComments += `\n * @${tagName} ${tag.comment}`;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// This is what allows us to map JSDOC comments to ReactWrappers.
|
||||
classDoc['jsDoc'] = node.jsDoc?.map(jsDoc => jsDoc.getFullText()).join('\n');
|
||||
|
||||
const parsed = parse(`${customComments}\n */`);
|
||||
parsed[0].tags?.forEach(t => {
|
||||
switch (t.tag) {
|
||||
// Animations
|
||||
case 'animation':
|
||||
if (!Array.isArray(classDoc['animations'])) {
|
||||
classDoc['animations'] = [];
|
||||
}
|
||||
classDoc['animations'].push({
|
||||
name: t.name,
|
||||
description: noDash(t.description)
|
||||
});
|
||||
break;
|
||||
|
||||
// Dependencies
|
||||
case 'dependency':
|
||||
if (!Array.isArray(classDoc['dependencies'])) {
|
||||
classDoc['dependencies'] = [];
|
||||
}
|
||||
classDoc['dependencies'].push(t.name);
|
||||
break;
|
||||
|
||||
// Value-only metadata tags
|
||||
case 'documentation':
|
||||
case 'since':
|
||||
case 'status':
|
||||
case 'title':
|
||||
classDoc[t.tag] = t.name;
|
||||
break;
|
||||
|
||||
// All other tags
|
||||
default:
|
||||
if (!Array.isArray(classDoc[t.tag])) {
|
||||
classDoc[t.tag] = [];
|
||||
}
|
||||
|
||||
classDoc[t.tag].push({
|
||||
name: t.name,
|
||||
description: t.description,
|
||||
type: t.type || undefined
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
name: 'shoelace-react-event-names',
|
||||
analyzePhase({ ts, node, moduleDoc }) {
|
||||
switch (node.kind) {
|
||||
case ts.SyntaxKind.ClassDeclaration: {
|
||||
const className = node.name.getText();
|
||||
const classDoc = moduleDoc?.declarations?.find(declaration => declaration.name === className);
|
||||
|
||||
if (classDoc?.events) {
|
||||
classDoc.events.forEach(event => {
|
||||
event.reactName = `on${pascalCase(event.name)}`;
|
||||
event.eventName = `${pascalCase(event.name)}Event`;
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
{
|
||||
name: 'shoelace-translate-module-paths',
|
||||
packageLinkPhase({ customElementsManifest }) {
|
||||
customElementsManifest?.modules?.forEach(mod => {
|
||||
//
|
||||
// CEM paths look like this:
|
||||
//
|
||||
// src/components/button/button.ts
|
||||
//
|
||||
// But we want them to look like this:
|
||||
//
|
||||
// components/button/button.js
|
||||
//
|
||||
const terms = [
|
||||
{ from: /^src\//, to: '' }, // Strip the src/ prefix
|
||||
{ from: /\.component.(t|j)sx?$/, to: '.js' } // Convert .ts to .js
|
||||
];
|
||||
|
||||
mod.path = replace(mod.path, terms);
|
||||
|
||||
for (const ex of mod.exports ?? []) {
|
||||
ex.declaration.module = replace(ex.declaration.module, terms);
|
||||
}
|
||||
|
||||
for (const dec of mod.declarations ?? []) {
|
||||
if (dec.kind === 'class') {
|
||||
for (const member of dec.members ?? []) {
|
||||
if (member.inheritedFrom) {
|
||||
member.inheritedFrom.module = replace(member.inheritedFrom.module, terms);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// Generate custom VS Code data
|
||||
customElementVsCodePlugin({
|
||||
outdir,
|
||||
cssFileName: null,
|
||||
referencesTemplate: (_, tag) => [
|
||||
{
|
||||
name: 'Documentation',
|
||||
url: `https://shoelace.style/components/${tag.replace('sl-', '')}`
|
||||
}
|
||||
]
|
||||
}),
|
||||
|
||||
customElementJetBrainsPlugin({
|
||||
outdir: './dist',
|
||||
excludeCss: true,
|
||||
packageJson: false,
|
||||
referencesTemplate: (_, tag) => {
|
||||
return {
|
||||
name: 'Documentation',
|
||||
url: `https://shoelace.style/components/${tag.replace('sl-', '')}`
|
||||
};
|
||||
}
|
||||
}),
|
||||
|
||||
customElementVuejsPlugin({
|
||||
outdir: './dist/types/vue',
|
||||
fileName: 'index.d.ts',
|
||||
componentTypePath: (_, tag) => `../../components/${tag.replace('sl-', '')}/${tag.replace('sl-', '')}.component.js`
|
||||
})
|
||||
]
|
||||
};
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,349 @@
|
|||
{% extends "default.njk" %}
|
||||
|
||||
{# Find the component based on the `tag` front matter #}
|
||||
{% set component = getComponent('sl-' + page.fileSlug) %}
|
||||
|
||||
{% block content %}
|
||||
{# Determine the badge variant #}
|
||||
{% if component.status == 'stable' %}
|
||||
{% set badgeVariant = 'primary' %}
|
||||
{% elseif component.status == 'experimental' %}
|
||||
{% set badgeVariant = 'warning' %}
|
||||
{% elseif component.status == 'planned' %}
|
||||
{% set badgeVariant = 'neutral' %}
|
||||
{% elseif component.status == 'deprecated' %}
|
||||
{% set badgeVariant = 'danger' %}
|
||||
{% else %}
|
||||
{% set badgeVariant = 'neutral' %}
|
||||
{% endif %}
|
||||
|
||||
{# Header #}
|
||||
<header class="component-header">
|
||||
<h1>{{ component.name | classNameToComponentName }}</h1>
|
||||
|
||||
<div class="component-header__tag">
|
||||
<code><{{ component.tagName }}> | {{ component.name }}</code>
|
||||
</div>
|
||||
|
||||
<div class="component-header__info">
|
||||
<sl-badge variant="neutral" pill>
|
||||
Since {{component.since or '?' }}
|
||||
</sl-badge>
|
||||
<sl-badge variant="{{ badgeVariant }}" pill style="text-transform: capitalize;">
|
||||
{{ component.status }}
|
||||
</sl-badge>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<p class="component-summary">
|
||||
{% if component.summary %}
|
||||
{{ component.summary | markdownInline | safe }}
|
||||
{% endif %}
|
||||
</p>
|
||||
|
||||
{# Markdown content #}
|
||||
{{ content | safe }}
|
||||
|
||||
{# Importing #}
|
||||
<h2>Importing</h2>
|
||||
<p>
|
||||
If you're using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use
|
||||
any of the following snippets to <a href="/getting-started/installation#cherry-picking">cherry pick</a> this component.
|
||||
</p>
|
||||
|
||||
<sl-tab-group>
|
||||
<sl-tab slot="nav" panel="script">Script</sl-tab>
|
||||
<sl-tab slot="nav" panel="import">Import</sl-tab>
|
||||
<sl-tab slot="nav" panel="bundler">Bundler</sl-tab>
|
||||
<sl-tab slot="nav" panel="react">React</sl-tab>
|
||||
|
||||
<sl-tab-panel name="script">
|
||||
<p>
|
||||
To import this component from <a href="https://www.jsdelivr.com/package/npm/@shoelace-style/shoelace">the CDN</a>
|
||||
using a script tag:
|
||||
</p>
|
||||
<pre><code class="language-html"><script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@{{ meta.version }}/{{ meta.cdndir }}/{{ component.path }}"></script></code></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="import">
|
||||
<p>
|
||||
To import this component from <a href="https://www.jsdelivr.com/package/npm/@shoelace-style/shoelace">the CDN</a>
|
||||
using a JavaScript import:
|
||||
</p>
|
||||
<pre><code class="language-js">import 'https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@{{ meta.version }}/{{ meta.cdndir }}/{{ component.path }}';</code></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="bundler">
|
||||
<p>
|
||||
To import this component using <a href="{{ rootUrl('/getting-started/installation#bundling') }}">a bundler</a>:
|
||||
</p>
|
||||
<pre><code class="language-js">import '@shoelace-style/shoelace/{{ meta.npmdir }}/{{ component.path }}';</code></pre>
|
||||
</sl-tab-panel>
|
||||
|
||||
<sl-tab-panel name="react">
|
||||
<p>
|
||||
To import this component as a <a href="/frameworks/react">React component</a>:
|
||||
</p>
|
||||
<pre><code class="language-js">import {{ component.name }} from '@shoelace-style/shoelace/{{ meta.npmdir }}/react/{{ component.tagNameWithoutPrefix }}';</code></pre>
|
||||
</sl-tab-panel>
|
||||
</sl-tab-group>
|
||||
|
||||
{# Slots #}
|
||||
{% if component.slots.length %}
|
||||
<h2>Slots</h2>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="table-name">Name</th>
|
||||
<th class="table-description">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for slot in component.slots %}
|
||||
<tr>
|
||||
<td class="nowrap">
|
||||
{% if slot.name %}
|
||||
<code>{{ slot.name }}</code>
|
||||
{% else %}
|
||||
(default)
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>{{ slot.description | markdownInline | safe }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p><em>Learn more about <a href="{{ rootUrl('/getting-started/usage#slots') }}">using slots</a>.</em></p>
|
||||
{% endif %}
|
||||
|
||||
{# Properties #}
|
||||
{% if component.properties.length %}
|
||||
<h2>Properties</h2>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="table-name">Name</th>
|
||||
<th class="table-description">Description</th>
|
||||
<th class="table-reflects">Reflects</th>
|
||||
<th class="table-type">Type</th>
|
||||
<th class="table-default">Default</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for prop in component.properties %}
|
||||
<tr>
|
||||
<td>
|
||||
<code class="nowrap">{{ prop.name }}</code>
|
||||
{% if prop.attribute | length > 0 %}
|
||||
{% if prop.attribute != prop.name %}
|
||||
<br>
|
||||
<sl-tooltip content="This attribute is different from its property">
|
||||
<small>
|
||||
<code class="nowrap">
|
||||
{{ prop.attribute }}
|
||||
</code>
|
||||
</small>
|
||||
</sl-tooltip>
|
||||
{% endif %}
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
{{ prop.description | markdownInline | safe }}
|
||||
</td>
|
||||
<td style="text-align: center;">
|
||||
{% if prop.reflects %}
|
||||
<sl-icon label="yes" name="check-lg"></sl-icon>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
{% if prop.type.text %}
|
||||
<code>{{ prop.type.text | trimPipes | markdownInline | safe }}</code>
|
||||
{% else %}
|
||||
-
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
{% if prop.default %}
|
||||
<code>{{ prop.default | markdownInline | safe }}</code>
|
||||
{% else %}
|
||||
-
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
<tr>
|
||||
<td class="nowrap"><code>updateComplete</code></td>
|
||||
<td>
|
||||
A read-only promise that resolves when the component has
|
||||
<a href="/getting-started/usage?#component-rendering-and-updating">finished updating</a>.
|
||||
</td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p><em>Learn more about <a href="{{ rootUrl('/getting-started/usage#attributes-and-properties') }}">attributes and properties</a>.</em></p>
|
||||
{% endif %}
|
||||
|
||||
{# Events #}
|
||||
{% if component.events.length %}
|
||||
<h2>Events</h2>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="table-name" data-flavor="html">Name</th>
|
||||
<th class="table-name" data-flavor="react">React Event</th>
|
||||
<th class="table-description">Description</th>
|
||||
<th class="table-event-detail">Event Detail</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for event in component.events %}
|
||||
<tr>
|
||||
<td data-flavor="html"><code class="nowrap">{{ event.name }}</code></td>
|
||||
<td data-flavor="react"><code class="nowrap">{{ event.reactName }}</code></td>
|
||||
<td>{{ event.description | markdownInline | safe }}</td>
|
||||
<td>
|
||||
{% if event.type.text %}
|
||||
<code>{{ event.type.text | trimPipes }}</code>
|
||||
{% else %}
|
||||
-
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p><em>Learn more about <a href="{{ rootUrl('/getting-started/usage#events') }}">events</a>.</em></p>
|
||||
{% endif %}
|
||||
|
||||
{# Methods #}
|
||||
{% if component.methods.length %}
|
||||
<h2>Methods</h2>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="table-name">Name</th>
|
||||
<th class="table-description">Description</th>
|
||||
<th class="table-arguments">Arguments</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for method in component.methods %}
|
||||
<tr>
|
||||
<td class="nowrap"><code>{{ method.name }}()</code></td>
|
||||
<td>{{ method.description | markdownInline | safe }}</td>
|
||||
<td>
|
||||
{% if method.parameters.length %}
|
||||
<code>
|
||||
{% for param in method.parameters %}
|
||||
{{ param.name }}: {{ param.type.text | trimPipes }}{% if not loop.last %},{% endif %}
|
||||
{% endfor %}
|
||||
</code>
|
||||
{% else %}
|
||||
-
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p><em>Learn more about <a href="{{ rootUrl('/getting-started/usage#methods') }}">methods</a>.</em></p>
|
||||
{% endif %}
|
||||
|
||||
{# Custom Properties #}
|
||||
{% if component.cssProperties.length %}
|
||||
<h2>Custom Properties</h2>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="table-name">Name</th>
|
||||
<th class="table-description">Description</th>
|
||||
<th class="table-default">Default</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for cssProperty in component.cssProperties %}
|
||||
<tr>
|
||||
<td class="nowrap"><code>{{ cssProperty.name }}</code></td>
|
||||
<td>{{ cssProperty.description | markdownInline | safe }}</td>
|
||||
<td>{{ cssProperty.default }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p><em>Learn more about <a href="{{ rootUrl('/getting-started/usage#custom-properties') }}">customizing CSS custom properties</a>.</em></p>
|
||||
{% endif %}
|
||||
|
||||
{# CSS Parts #}
|
||||
{% if component.cssParts.length %}
|
||||
<h2>Parts</h2>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="table-name">Name</th>
|
||||
<th class="table-description">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for cssPart in component.cssParts %}
|
||||
<tr>
|
||||
<td class="nowrap"><code>{{ cssPart.name }}</code></td>
|
||||
<td>{{ cssPart.description | markdownInline | safe }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p><em>Learn more about <a href="{{ rootUrl('/getting-started/customizing/#css-parts') }}">customizing CSS parts</a>.</em></p>
|
||||
{% endif %}
|
||||
|
||||
{# Animations #}
|
||||
{% if component.animations.length %}
|
||||
<h2>Animations</h2>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="table-name">Name</th>
|
||||
<th class="table-description">Description</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for animation in component.animations %}
|
||||
<tr>
|
||||
<td class="nowrap"><code>{{ animation.name }}</code></td>
|
||||
<td>{{ animation.description | markdownInline | safe }}</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<p><em>Learn more about <a href="{{ rootUrl('/getting-started/customizing#animations') }}">customizing animations</a>.</em></p>
|
||||
{% endif %}
|
||||
|
||||
{# Dependencies #}
|
||||
{% if component.dependencies.length %}
|
||||
<h2>Dependencies</h2>
|
||||
|
||||
<p>This component automatically imports the following dependencies.</p>
|
||||
|
||||
<ul>
|
||||
{% for dependency in component.dependencies %}
|
||||
<li><code><{{ dependency }}></code></li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
|
@ -0,0 +1,167 @@
|
|||
<!DOCTYPE html>
|
||||
<html
|
||||
lang="en"
|
||||
data-layout="{{ layout }}"
|
||||
data-shoelace-version="{{ meta.version }}"
|
||||
>
|
||||
<head>
|
||||
{# Metadata #}
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<meta name="description" content="{{ meta.description }}" />
|
||||
<title>{{ meta.title }}</title>
|
||||
|
||||
{# Opt out of Turbo caching #}
|
||||
<meta name="turbo-cache-control">
|
||||
|
||||
{# Stylesheets #}
|
||||
<link rel="stylesheet" href="{{ assetUrl('styles/docs.css') }}" />
|
||||
<link rel="stylesheet" href="{{ assetUrl('styles/code-previews.css') }}" />
|
||||
<link rel="stylesheet" href="{{ assetUrl('styles/search.css') }}" />
|
||||
|
||||
{# Favicons #}
|
||||
<link rel="icon" href="{{ assetUrl('images/logo.svg') }}" type="image/x-icon" />
|
||||
|
||||
{# Twitter Cards #}
|
||||
<meta name="twitter:card" content="summary" />
|
||||
<meta name="twitter:creator" content="shoelace_style" />
|
||||
<meta name="twitter:image" content="{{ assetUrl(meta.image, true) }}" />
|
||||
|
||||
{# OpenGraph #}
|
||||
<meta property="og:url" content="{{ rootUrl(page.url, true) }}" />
|
||||
<meta property="og:title" content="{{ meta.title }}" />
|
||||
<meta property="og:description" content="{{ meta.description }}" />
|
||||
<meta property="og:image" content="{{ assetUrl(meta.image, true) }}" />
|
||||
|
||||
{# Shoelace #}
|
||||
<link rel="stylesheet" href="/dist/themes/light.css" />
|
||||
<link rel="stylesheet" href="/dist/themes/dark.css" />
|
||||
<script type="module" src="/dist/shoelace-autoloader.js"></script>
|
||||
|
||||
{# Set the initial theme and menu states here to prevent flashing #}
|
||||
<script>
|
||||
(() => {
|
||||
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
const theme = localStorage.getItem('theme') || 'auto';
|
||||
document.documentElement.classList.toggle('sl-theme-dark', theme === 'dark' || (theme === 'auto' && prefersDark));
|
||||
})();
|
||||
</script>
|
||||
|
||||
{# Turbo + Scroll positioning #}
|
||||
<script src="{{ assetUrl('scripts/turbo.js') }}" type="module"></script>
|
||||
<script src="{{ assetUrl('scripts/docs.js') }}" defer></script>
|
||||
<script src="{{ assetUrl('scripts/code-previews.js') }}" defer></script>
|
||||
<script src="{{ assetUrl('scripts/lunr.js') }}" defer></script>
|
||||
<script src="{{ assetUrl('scripts/search.js') }}" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<a id="skip-to-main" class="visually-hidden" href="#main-content" data-smooth-link="false">
|
||||
Skip to main content
|
||||
</a>
|
||||
|
||||
{# Menu toggle #}
|
||||
<button id="menu-toggle" type="button" aria-label="Menu">
|
||||
<svg width="148" height="148" viewBox="0 0 148 148" xmlns="http://www.w3.org/2000/svg">
|
||||
<g stroke="currentColor" stroke-width="18" fill="none" fill-rule="evenodd" stroke-linecap="round">
|
||||
<path d="M9.5 125.5h129M9.5 74.5h129M9.5 23.5h129"></path>
|
||||
</g>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
{# Icon toolbar #}
|
||||
<div id="icon-toolbar">
|
||||
{# GitHub #}
|
||||
<a href="https://github.com/shoelace-style/shoelace" title="View Shoelace on GitHub">
|
||||
<sl-icon name="github"></sl-icon>
|
||||
</a>
|
||||
|
||||
{# Twitter #}
|
||||
<a href="https://twitter.com/shoelace_style" title="Follow Shoelace on Twitter">
|
||||
<sl-icon name="twitter"></sl-icon>
|
||||
</a>
|
||||
|
||||
{# Theme selector #}
|
||||
<sl-dropdown id="theme-selector" placement="bottom-end" distance="3">
|
||||
<sl-button slot="trigger" size="small" variant="text" caret title="Press \ to toggle">
|
||||
<sl-icon class="only-light" name="sun-fill"></sl-icon>
|
||||
<sl-icon class="only-dark" name="moon-fill"></sl-icon>
|
||||
</sl-button>
|
||||
<sl-menu>
|
||||
<sl-menu-item type="checkbox" value="light">Light</sl-menu-item>
|
||||
<sl-menu-item type="checkbox" value="dark">Dark</sl-menu-item>
|
||||
<sl-divider></sl-divider>
|
||||
<sl-menu-item type="checkbox" value="auto">System</sl-menu-item>
|
||||
</sl-menu>
|
||||
</sl-dropdown>
|
||||
</div>
|
||||
|
||||
<a
|
||||
class="ks-banner{% if toc %} with-toc{% endif %}"
|
||||
href="https://www.kickstarter.com/projects/fontawesome/web-awesome?ref=71ihfk"
|
||||
target="_blank"
|
||||
>
|
||||
<span>
|
||||
<svg viewBox="0 0 20 16" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill="#f36944" d="M11.63 1.625C11.63 2.27911 11.2435 2.84296 10.6865 3.10064L14 6L17.2622 5.34755C17.0968 5.10642 17 4.81452 17 4.5C17 3.67157 17.6716 3 18.5 3C19.3284 3 20 3.67157 20 4.5C20 5.31157 19.3555 5.9726 18.5504 5.99917L15.0307 13.8207C14.7077 14.5384 13.9939 15 13.2068 15H6.79317C6.00615 15 5.29229 14.5384 4.96933 13.8207L1.44963 5.99917C0.64452 5.9726 0 5.31157 0 4.5C0 3.67157 0.671573 3 1.5 3C2.32843 3 3 3.67157 3 4.5C3 4.81452 2.9032 5.10642 2.73777 5.34755L6 6L9.31702 3.09761C8.76346 2.83855 8.38 2.27656 8.38 1.625C8.38 0.727537 9.10754 0 10.005 0C10.9025 0 11.63 0.727537 11.63 1.625Z"/>
|
||||
</svg>
|
||||
<span>
|
||||
<strong style="white-space: nowrap;">Get ready for more awesome!</strong>
|
||||
Web Awesome, the next iteration of Shoelace, is on Kickstarter.
|
||||
</span>
|
||||
</span>
|
||||
<span class="faux-button">Read Our Story</span>
|
||||
</a>
|
||||
|
||||
<aside id="sidebar" data-preserve-scroll>
|
||||
<header>
|
||||
<a href="/">
|
||||
<img src="{{ assetUrl('images/wordmark.svg') }}" alt="Shoelace" />
|
||||
</a>
|
||||
<div class="sidebar-version">
|
||||
{{ meta.version }}
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="sidebar-buttons">
|
||||
<sl-button size="small" class="repo-button repo-button--github" href="https://github.com/shoelace-style/shoelace" target="_blank">
|
||||
<sl-icon slot="prefix" name="github"></sl-icon> Code
|
||||
</sl-button>
|
||||
<sl-button size="small" class="repo-button repo-button--star" href="https://github.com/shoelace-style/shoelace/stargazers" target="_blank">
|
||||
<sl-icon slot="prefix" name="star-fill"></sl-icon> Star
|
||||
</sl-button>
|
||||
<sl-button size="small" class="repo-button repo-button--twitter" href="https://twitter.com/shoelace_style" target="_blank">
|
||||
<sl-icon slot="prefix" name="twitter"></sl-icon> Follow
|
||||
</sl-button>
|
||||
</div>
|
||||
|
||||
<button class="search-box" type="button" title="Press / to search" aria-label="Search" data-plugin="search">
|
||||
<sl-icon name="search"></sl-icon>
|
||||
<span>Search</span>
|
||||
</button>
|
||||
|
||||
<nav>
|
||||
{% include 'sidebar.njk' %}
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
{# Content #}
|
||||
<main>
|
||||
<a id="main-content"></a>
|
||||
<article id="content" class="content{% if toc %} content--with-toc{% endif %}">
|
||||
{% if toc %}
|
||||
<div class="content__toc">
|
||||
<ul>
|
||||
<li class="top"><a href="#">{{ meta.title }}</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="content__body">
|
||||
{% block content %}
|
||||
{{ content | safe }}
|
||||
{% endblock %}
|
||||
</div>
|
||||
</article>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
<ul>
|
||||
<li>
|
||||
<h2>Getting Started</h2>
|
||||
<ul>
|
||||
<li><a href="/">Home</a></li>
|
||||
<li><a href="/getting-started/installation">Installation</a></li>
|
||||
<li><a href="/getting-started/usage">Usage</a></li>
|
||||
<li><a href="/getting-started/themes">Themes</a></li>
|
||||
<li><a href="/getting-started/customizing">Customizing</a></li>
|
||||
<li><a href="/getting-started/form-controls">Form Controls</a></li>
|
||||
<li><a href="/getting-started/localization">Localization</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<h2>Frameworks</h2>
|
||||
<ul>
|
||||
<li><a href="/frameworks/react">React</a></li>
|
||||
<li><a href="/frameworks/vue">Vue</a></li>
|
||||
<li><a href="/frameworks/angular">Angular</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<h2>Resources</h2>
|
||||
<ul>
|
||||
<li><a href="/resources/community">Community</a></li>
|
||||
<li><a href="https://github.com/shoelace-style/shoelace/discussions">Help & Support</a></li>
|
||||
<li><a href="/resources/accessibility">Accessibility</a></li>
|
||||
<li><a href="/resources/contributing">Contributing</a></li>
|
||||
<li><a href="/resources/changelog">Changelog</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<h2>Components</h2>
|
||||
<ul>
|
||||
{% for component in meta.components %}
|
||||
<li>
|
||||
<a href="/components/{{ component.tagName | removeSlPrefix }}">
|
||||
{{ component.name | classNameToComponentName }}
|
||||
</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<h2>Design Tokens</h2>
|
||||
<ul>
|
||||
<li><a href="/tokens/typography">Typography</a></li>
|
||||
<li><a href="/tokens/color">Color</a></li>
|
||||
<li><a href="/tokens/spacing">Spacing</a></li>
|
||||
<li><a href="/tokens/elevation">Elevation</a></li>
|
||||
<li><a href="/tokens/border-radius">Border Radius</a></li>
|
||||
<li><a href="/tokens/transition">Transition</a></li>
|
||||
<li><a href="/tokens/z-index">Z-index</a></li>
|
||||
<li><a href="/tokens/more">More Tokens</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<h2>Tutorials</h2>
|
||||
<ul>
|
||||
<li><a href="/tutorials/integrating-with-laravel">Integrating with Laravel</a></li>
|
||||
<li><a href="/tutorials/integrating-with-nextjs">Integrating with NextJS</a></li>
|
||||
<li><a href="/tutorials/integrating-with-rails">Integrating with Rails</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
function normalizePathname(pathname) {
|
||||
// Remove /index.html
|
||||
if (pathname.endsWith('/index.html')) {
|
||||
pathname = pathname.replace(/\/index\.html/, '');
|
||||
}
|
||||
|
||||
// Remove trailing slashes
|
||||
return pathname.replace(/\/$/, '');
|
||||
}
|
||||
|
||||
/**
|
||||
* Adds a class name to links that are currently active.
|
||||
*/
|
||||
module.exports = function (doc, options) {
|
||||
options = {
|
||||
className: 'active-link', // the class to add to active links
|
||||
pathname: undefined, // the current pathname to compare
|
||||
within: 'body', // element containing the target links
|
||||
...options
|
||||
};
|
||||
|
||||
const within = doc.querySelector(options.within);
|
||||
|
||||
if (!within) {
|
||||
return doc;
|
||||
}
|
||||
|
||||
within.querySelectorAll('a').forEach(link => {
|
||||
if (normalizePathname(options.pathname) === normalizePathname(link.pathname)) {
|
||||
link.classList.add(options.className);
|
||||
}
|
||||
});
|
||||
|
||||
return doc;
|
||||
};
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
const { createSlug } = require('./strings.cjs');
|
||||
|
||||
/**
|
||||
* Turns headings into clickable, deep linkable anchors. The provided doc should be a document object provided by JSDOM.
|
||||
* The same document will be returned with the appropriate DOM manipulations.
|
||||
*/
|
||||
module.exports = function (doc, options) {
|
||||
options = {
|
||||
levels: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'], // the headings to convert
|
||||
className: 'anchor-heading', // the class name to add
|
||||
within: 'body', // the element containing the target headings
|
||||
...options
|
||||
};
|
||||
|
||||
const within = doc.querySelector(options.within);
|
||||
|
||||
if (!within) {
|
||||
return doc;
|
||||
}
|
||||
|
||||
within.querySelectorAll('h1, h2, h3, h4, h5, h6').forEach(heading => {
|
||||
const hasAnchor = heading.querySelector('a');
|
||||
const anchor = doc.createElement('a');
|
||||
let id = heading.textContent ?? '';
|
||||
let suffix = 0;
|
||||
|
||||
// Skip heading levels we don't care about
|
||||
if (!options.levels?.includes(heading.tagName.toLowerCase())) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Convert dots to underscores
|
||||
id = id.replace(/\./g, '_');
|
||||
|
||||
// Turn it into a slug
|
||||
id = createSlug(id);
|
||||
|
||||
// Make sure it starts with a letter
|
||||
if (!/^[a-z]/i.test(id)) {
|
||||
id = `id_${id}`;
|
||||
}
|
||||
|
||||
// Make sure the id is unique
|
||||
const originalId = id;
|
||||
while (doc.getElementById(id) !== null) {
|
||||
id = `${originalId}-${++suffix}`;
|
||||
}
|
||||
|
||||
if (hasAnchor || !id) return;
|
||||
|
||||
heading.setAttribute('id', id);
|
||||
anchor.setAttribute('href', `#${encodeURIComponent(id)}`);
|
||||
anchor.setAttribute('aria-label', `Direct link to "${heading.textContent}"`);
|
||||
|
||||
if (options.className) {
|
||||
heading.classList.add(options.className);
|
||||
}
|
||||
|
||||
// Append the anchor
|
||||
heading.append(anchor);
|
||||
});
|
||||
|
||||
return doc;
|
||||
};
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
const customElementsManifest = require('../../dist/custom-elements.json');
|
||||
|
||||
//
|
||||
// Export it here so we can import it elsewhere and use the same version
|
||||
//
|
||||
module.exports.customElementsManifest = customElementsManifest;
|
||||
|
||||
//
|
||||
// Gets all components from custom-elements.json and returns them in a more documentation-friendly format.
|
||||
//
|
||||
module.exports.getAllComponents = function () {
|
||||
const allComponents = [];
|
||||
|
||||
customElementsManifest.modules?.forEach(module => {
|
||||
module.declarations?.forEach(declaration => {
|
||||
if (declaration.customElement) {
|
||||
// Generate the dist path based on the src path and attach it to the component
|
||||
declaration.path = module.path.replace(/^src\//, 'dist/').replace(/\.ts$/, '.js');
|
||||
|
||||
// Remove members that are private or don't have a description
|
||||
const members = declaration.members?.filter(member => member.description && member.privacy !== 'private');
|
||||
const methods = members?.filter(prop => prop.kind === 'method' && prop.privacy !== 'private');
|
||||
const properties = members?.filter(prop => {
|
||||
// Look for a corresponding attribute
|
||||
const attribute = declaration.attributes?.find(attr => attr.fieldName === prop.name);
|
||||
if (attribute) {
|
||||
prop.attribute = attribute.name || attribute.fieldName;
|
||||
}
|
||||
|
||||
return prop.kind === 'field' && prop.privacy !== 'private';
|
||||
});
|
||||
allComponents.push({
|
||||
...declaration,
|
||||
methods,
|
||||
properties
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Build dependency graphs
|
||||
allComponents.forEach(component => {
|
||||
const dependencies = [];
|
||||
|
||||
// Recursively fetch sub-dependencies
|
||||
function getDependencies(tag) {
|
||||
const cmp = allComponents.find(c => c.tagName === tag);
|
||||
if (!cmp || !Array.isArray(component.dependencies)) {
|
||||
return;
|
||||
}
|
||||
|
||||
cmp.dependencies?.forEach(dependentTag => {
|
||||
if (!dependencies.includes(dependentTag)) {
|
||||
dependencies.push(dependentTag);
|
||||
}
|
||||
getDependencies(dependentTag);
|
||||
});
|
||||
}
|
||||
|
||||
getDependencies(component.tagName);
|
||||
|
||||
component.dependencies = dependencies.sort();
|
||||
});
|
||||
|
||||
// Sort by name
|
||||
return allComponents.sort((a, b) => {
|
||||
if (a.name < b.name) return -1;
|
||||
if (a.name > b.name) return 1;
|
||||
return 0;
|
||||
});
|
||||
};
|
||||
|
|
@ -0,0 +1,138 @@
|
|||
let count = 1;
|
||||
|
||||
function escapeHtml(str) {
|
||||
return String(str).replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>').replace(/"/g, '"');
|
||||
}
|
||||
|
||||
/**
|
||||
* Turns code fields with the :preview suffix into interactive code previews.
|
||||
*/
|
||||
module.exports = function (doc, options) {
|
||||
options = {
|
||||
within: 'body', // the element containing the code fields to convert
|
||||
...options
|
||||
};
|
||||
|
||||
const within = doc.querySelector(options.within);
|
||||
if (!within) {
|
||||
return doc;
|
||||
}
|
||||
|
||||
within.querySelectorAll('[class*=":preview"]').forEach(code => {
|
||||
const pre = code.closest('pre');
|
||||
if (!pre) {
|
||||
return;
|
||||
}
|
||||
const adjacentPre = pre.nextElementSibling?.tagName.toLowerCase() === 'pre' ? pre.nextElementSibling : null;
|
||||
const reactCode = adjacentPre?.querySelector('code[class$="react"]');
|
||||
const sourceGroupId = `code-preview-source-group-${count}`;
|
||||
const isExpanded = code.getAttribute('class').includes(':expanded');
|
||||
const noCodePen = code.getAttribute('class').includes(':no-codepen');
|
||||
|
||||
count++;
|
||||
|
||||
const htmlButton = `
|
||||
<button type="button"
|
||||
title="Show HTML code"
|
||||
class="code-preview__button code-preview__button--html"
|
||||
>
|
||||
HTML
|
||||
</button>
|
||||
`;
|
||||
|
||||
const reactButton = `
|
||||
<button type="button" title="Show React code" class="code-preview__button code-preview__button--react">
|
||||
React
|
||||
</button>
|
||||
`;
|
||||
|
||||
const codePenButton = `
|
||||
<button type="button" class="code-preview__button code-preview__button--codepen" title="Edit on CodePen">
|
||||
<svg
|
||||
width="138"
|
||||
height="26"
|
||||
viewBox="0 0 138 26"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2.3"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<path d="M80 6h-9v14h9 M114 6h-9 v14h9 M111 13h-6 M77 13h-6 M122 20V6l11 14V6 M22 16.7L33 24l11-7.3V9.3L33 2L22 9.3V16.7z M44 16.7L33 9.3l-11 7.4 M22 9.3l11 7.3 l11-7.3 M33 2v7.3 M33 16.7V24 M88 14h6c2.2 0 4-1.8 4-4s-1.8-4-4-4h-6v14 M15 8c-1.3-1.3-3-2-5-2c-4 0-7 3-7 7s3 7 7 7 c2 0 3.7-0.8 5-2 M64 13c0 4-3 7-7 7h-5V6h5C61 6 64 9 64 13z" />
|
||||
</svg>
|
||||
</button>
|
||||
`;
|
||||
|
||||
const codePreview = `
|
||||
<div class="code-preview ${isExpanded ? 'code-preview--expanded' : ''}">
|
||||
<div class="code-preview__preview">
|
||||
${code.textContent}
|
||||
<div class="code-preview__resizer">
|
||||
<sl-icon name="grip-vertical"></sl-icon>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="code-preview__source-group" id="${sourceGroupId}">
|
||||
<div class="code-preview__source code-preview__source--html" ${reactCode ? 'data-flavor="html"' : ''}>
|
||||
<pre><code class="language-html">${escapeHtml(code.textContent)}</code></pre>
|
||||
</div>
|
||||
|
||||
${
|
||||
reactCode
|
||||
? `
|
||||
<div class="code-preview__source code-preview__source--react" data-flavor="react">
|
||||
<pre><code class="language-jsx">${escapeHtml(reactCode.textContent)}</code></pre>
|
||||
</div>
|
||||
`
|
||||
: ''
|
||||
}
|
||||
</div>
|
||||
|
||||
<div class="code-preview__buttons">
|
||||
<button
|
||||
type="button"
|
||||
class="code-preview__button code-preview__toggle"
|
||||
aria-expanded="${isExpanded ? 'true' : 'false'}"
|
||||
aria-controls="${sourceGroupId}"
|
||||
>
|
||||
Source
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
>
|
||||
<polyline points="6 9 12 15 18 9"></polyline>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
${reactCode ? ` ${htmlButton} ${reactButton} ` : ''}
|
||||
|
||||
${noCodePen ? '' : codePenButton}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
pre.insertAdjacentHTML('afterend', codePreview);
|
||||
pre.remove();
|
||||
|
||||
if (adjacentPre) {
|
||||
adjacentPre.remove();
|
||||
}
|
||||
});
|
||||
|
||||
// Wrap code preview scripts in anonymous functions so they don't run in the global scope
|
||||
doc.querySelectorAll('.code-preview__preview script').forEach(script => {
|
||||
if (script.type === 'module') {
|
||||
// Modules are already scoped
|
||||
script.textContent = script.innerHTML;
|
||||
} else {
|
||||
// Wrap non-modules in an anonymous function so they don't run in the global scope
|
||||
script.textContent = `(() => { ${script.innerHTML} })();`;
|
||||
}
|
||||
});
|
||||
|
||||
return doc;
|
||||
};
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
let codeBlockId = 0;
|
||||
|
||||
/**
|
||||
* Adds copy code buttons to code fields. The provided doc should be a document object provided by JSDOM. The same
|
||||
* document will be returned with the appropriate DOM manipulations.
|
||||
*/
|
||||
module.exports = function (doc) {
|
||||
doc.querySelectorAll('pre > code').forEach(code => {
|
||||
const pre = code.closest('pre');
|
||||
const button = doc.createElement('sl-copy-button');
|
||||
|
||||
if (!code.id) {
|
||||
code.id = `code-block-${++codeBlockId}`;
|
||||
}
|
||||
|
||||
button.classList.add('copy-code-button');
|
||||
button.setAttribute('from', code.id);
|
||||
|
||||
pre.append(button);
|
||||
});
|
||||
|
||||
return doc;
|
||||
};
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
const { isExternalLink } = require('./strings.cjs');
|
||||
|
||||
/**
|
||||
* Transforms external links to make them safer and optionally add a target. The provided doc should be a document
|
||||
* object provided by JSDOM. The same document will be returned with the appropriate DOM manipulations.
|
||||
*/
|
||||
module.exports = function (doc, options) {
|
||||
options = {
|
||||
className: 'external-link', // the class name to add to links
|
||||
noopener: true, // sets rel="noopener"
|
||||
noreferrer: true, // sets rel="noreferrer"
|
||||
ignore: () => false, // callback function to filter links that should be ignored
|
||||
within: 'body', // element that contains the target links
|
||||
target: '', // sets the target attribute
|
||||
...options
|
||||
};
|
||||
|
||||
const within = doc.querySelector(options.within);
|
||||
|
||||
if (within) {
|
||||
within.querySelectorAll('a').forEach(link => {
|
||||
if (isExternalLink(link) && !options.ignore(link)) {
|
||||
link.classList.add(options.className);
|
||||
|
||||
const rel = [];
|
||||
if (options.noopener) rel.push('noopener');
|
||||
if (options.noreferrer) rel.push('noreferrer');
|
||||
|
||||
if (rel.length) {
|
||||
link.setAttribute('rel', rel.join(' '));
|
||||
}
|
||||
|
||||
if (options.target) {
|
||||
link.setAttribute('target', options.target);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return doc;
|
||||
};
|
||||
|
|
@ -0,0 +1,63 @@
|
|||
const Prism = require('prismjs');
|
||||
const PrismLoader = require('prismjs/components/index.js');
|
||||
|
||||
PrismLoader('diff');
|
||||
PrismLoader.silent = true;
|
||||
|
||||
/** Highlights a code string. */
|
||||
function highlight(code, language) {
|
||||
const alias = language.replace(/^diff-/, '');
|
||||
const isDiff = /^diff-/i.test(language);
|
||||
|
||||
// Auto-load the target language
|
||||
if (!Prism.languages[alias]) {
|
||||
PrismLoader(alias);
|
||||
|
||||
if (!Prism.languages[alias]) {
|
||||
throw new Error(`Unsupported language for code highlighting: "${language}"`);
|
||||
}
|
||||
}
|
||||
|
||||
// Register diff-* languages to use the diff grammar
|
||||
if (isDiff) {
|
||||
Prism.languages[language] = Prism.languages.diff;
|
||||
}
|
||||
|
||||
return Prism.highlight(code, Prism.languages[language], language);
|
||||
}
|
||||
|
||||
/**
|
||||
* Highlights all code fields that have a language parameter. If the language has a colon in its name, the first chunk
|
||||
* will be the language used and additional chunks will be applied as classes to the `<pre>`. For example, a code field
|
||||
* tagged with "html:preview" will be rendered as `<pre class="language-html preview">`.
|
||||
*
|
||||
* The provided doc should be a document object provided by JSDOM. The same document will be returned with the
|
||||
* appropriate DOM manipulations.
|
||||
*/
|
||||
module.exports = function (doc) {
|
||||
doc.querySelectorAll('pre > code[class]').forEach(code => {
|
||||
// Look for class="language-*" and split colons into separate classes
|
||||
code.classList.forEach(className => {
|
||||
if (className.startsWith('language-')) {
|
||||
//
|
||||
// We use certain suffixes to indicate code previews, expanded states, etc. The class might look something like
|
||||
// this:
|
||||
//
|
||||
// class="language-html:preview:expanded"
|
||||
//
|
||||
// The language will always come first, so we need to drop the "language-" prefix and everything after the first
|
||||
// color to get the highlighter language.
|
||||
//
|
||||
const language = className.replace(/^language-/, '').split(':')[0];
|
||||
|
||||
try {
|
||||
code.innerHTML = highlight(code.textContent ?? '', language);
|
||||
} catch (err) {
|
||||
// Language not found, skip it
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
return doc;
|
||||
};
|
||||
|
|
@ -0,0 +1,67 @@
|
|||
const MarkdownIt = require('markdown-it');
|
||||
const markdownItContainer = require('markdown-it-container');
|
||||
const markdownItIns = require('markdown-it-ins');
|
||||
const markdownItKbd = require('markdown-it-kbd');
|
||||
const markdownItMark = require('markdown-it-mark');
|
||||
const markdownItReplaceIt = require('markdown-it-replace-it');
|
||||
|
||||
const markdown = MarkdownIt({
|
||||
html: true,
|
||||
xhtmlOut: false,
|
||||
breaks: false,
|
||||
langPrefix: 'language-',
|
||||
linkify: false,
|
||||
typographer: false
|
||||
});
|
||||
|
||||
// Third-party plugins
|
||||
markdown.use(markdownItContainer);
|
||||
markdown.use(markdownItIns);
|
||||
markdown.use(markdownItKbd);
|
||||
markdown.use(markdownItMark);
|
||||
markdown.use(markdownItReplaceIt);
|
||||
|
||||
// Callouts
|
||||
['tip', 'warning', 'danger'].forEach(type => {
|
||||
markdown.use(markdownItContainer, type, {
|
||||
render: function (tokens, idx) {
|
||||
if (tokens[idx].nesting === 1) {
|
||||
return `<div role="alert" class="callout callout--${type}">`;
|
||||
}
|
||||
return '</div>\n';
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Asides
|
||||
markdown.use(markdownItContainer, 'aside', {
|
||||
render: function (tokens, idx) {
|
||||
if (tokens[idx].nesting === 1) {
|
||||
return `<aside>`;
|
||||
}
|
||||
return '</aside>\n';
|
||||
}
|
||||
});
|
||||
|
||||
// Details
|
||||
markdown.use(markdownItContainer, 'details', {
|
||||
validate: params => params.trim().match(/^details\s+(.*)$/),
|
||||
render: (tokens, idx) => {
|
||||
const m = tokens[idx].info.trim().match(/^details\s+(.*)$/);
|
||||
if (tokens[idx].nesting === 1) {
|
||||
return `<details>\n<summary><span>${markdown.utils.escapeHtml(m[1])}</span></summary>\n`;
|
||||
}
|
||||
return '</details>\n';
|
||||
}
|
||||
});
|
||||
|
||||
// Replace [#1234] with a link to GitHub issues
|
||||
markdownItReplaceIt.replacements.push({
|
||||
name: 'github-issues',
|
||||
re: /\[#([0-9]+)\]/gs,
|
||||
sub: '<a href="https://github.com/shoelace-style/shoelace/issues/$1">#$1</a>',
|
||||
html: true,
|
||||
default: true
|
||||
});
|
||||
|
||||
module.exports = markdown;
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
const { format } = require('prettier');
|
||||
|
||||
/** Formats markup using prettier. */
|
||||
module.exports = function (content, options) {
|
||||
options = {
|
||||
arrowParens: 'avoid',
|
||||
bracketSpacing: true,
|
||||
htmlWhitespaceSensitivity: 'css',
|
||||
insertPragma: false,
|
||||
bracketSameLine: false,
|
||||
jsxSingleQuote: false,
|
||||
parser: 'html',
|
||||
printWidth: 120,
|
||||
proseWrap: 'preserve',
|
||||
quoteProps: 'as-needed',
|
||||
requirePragma: false,
|
||||
semi: true,
|
||||
singleQuote: true,
|
||||
tabWidth: 2,
|
||||
trailingComma: 'none',
|
||||
useTabs: false,
|
||||
...options
|
||||
};
|
||||
|
||||
return format(content, options);
|
||||
};
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
/**
|
||||
* @typedef {object} Replacement
|
||||
* @property {string | RegExp} pattern
|
||||
* @property {string} replacement
|
||||
*/
|
||||
|
||||
/**
|
||||
* @typedef {Array<Replacement>} Replacements
|
||||
*/
|
||||
|
||||
/**
|
||||
* @param {String} rawContent
|
||||
* @param {Replacements} replacements
|
||||
*/
|
||||
module.exports = function (rawContent, replacements) {
|
||||
let content = rawContent;
|
||||
replacements.forEach(replacement => {
|
||||
content = content.replaceAll(replacement.pattern, replacement.replacement);
|
||||
});
|
||||
|
||||
return content;
|
||||
};
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
/**
|
||||
* Turns headings into clickable, deep linkable anchors. The provided doc should be a document object provided by JSDOM.
|
||||
* The same document will be returned with the appropriate DOM manipulations.
|
||||
*/
|
||||
module.exports = function (doc, options) {
|
||||
const tables = [...doc.querySelectorAll('table')];
|
||||
|
||||
options = {
|
||||
className: 'table-scroll', // the class name to add to the table's container
|
||||
...options
|
||||
};
|
||||
|
||||
tables.forEach(table => {
|
||||
const div = doc.createElement('div');
|
||||
div.classList.add(options.className);
|
||||
table.insertAdjacentElement('beforebegin', div);
|
||||
div.append(table);
|
||||
});
|
||||
|
||||
return doc;
|
||||
};
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
const slugify = require('slugify');
|
||||
|
||||
/** Creates a slug from an arbitrary string of text. */
|
||||
module.exports.createSlug = function (text) {
|
||||
return slugify(String(text), {
|
||||
remove: /[^\w|\s]/g,
|
||||
lower: true
|
||||
});
|
||||
};
|
||||
|
||||
/** Determines whether or not a link is external. */
|
||||
module.exports.isExternalLink = function (link) {
|
||||
// We use the "internal" hostname when initializing JSDOM so we know that those are local links
|
||||
if (!link.hostname || link.hostname === 'internal') return false;
|
||||
return true;
|
||||
};
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
/**
|
||||
* Generates an in-page table of contents based on headings.
|
||||
*/
|
||||
module.exports = function (doc, options) {
|
||||
options = {
|
||||
levels: ['h2'], // headings to include (they must have an id)
|
||||
container: 'nav', // the container to append links to
|
||||
listItem: true, // if true, links will be wrapped in <li>
|
||||
within: 'body', // the element containing the headings to summarize
|
||||
...options
|
||||
};
|
||||
|
||||
const container = doc.querySelector(options.container);
|
||||
const within = doc.querySelector(options.within);
|
||||
const headingSelector = options.levels.map(h => `${h}[id]`).join(', ');
|
||||
|
||||
if (!container || !within) {
|
||||
return doc;
|
||||
}
|
||||
|
||||
within.querySelectorAll(headingSelector).forEach(heading => {
|
||||
const listItem = doc.createElement('li');
|
||||
const link = doc.createElement('a');
|
||||
const level = heading.tagName.slice(1);
|
||||
|
||||
link.href = `#${heading.id}`;
|
||||
link.textContent = heading.textContent;
|
||||
|
||||
if (options.listItem) {
|
||||
// List item + link
|
||||
listItem.setAttribute('data-level', level);
|
||||
listItem.append(link);
|
||||
container.append(listItem);
|
||||
} else {
|
||||
// Link only
|
||||
link.setAttribute('data-level', level);
|
||||
container.append(link);
|
||||
}
|
||||
});
|
||||
|
||||
return doc;
|
||||
};
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
const smartquotes = require('smartquotes');
|
||||
|
||||
smartquotes.replacements.push([/---/g, '\u2014']); // em dash
|
||||
smartquotes.replacements.push([/--/g, '\u2013']); // en dash
|
||||
smartquotes.replacements.push([/\.\.\./g, '\u2026']); // ellipsis
|
||||
smartquotes.replacements.push([/\(c\)/gi, '\u00A9']); // copyright
|
||||
smartquotes.replacements.push([/\(r\)/gi, '\u00AE']); // registered trademark
|
||||
smartquotes.replacements.push([/\?!/g, '\u2048']); // ?!
|
||||
smartquotes.replacements.push([/!!/g, '\u203C']); // !!
|
||||
smartquotes.replacements.push([/\?\?/g, '\u2047']); // ??
|
||||
smartquotes.replacements.push([/([0-9]\s?)-(\s?[0-9])/g, '$1\u2013$2']); // number ranges use en dash
|
||||
|
||||
/**
|
||||
* Improves typography by adding smart quotes and similar corrections within the specified element(s).
|
||||
*
|
||||
* The provided doc should be a document object provided by JSDOM. The same document will be returned with the
|
||||
* appropriate DOM manipulations.
|
||||
*/
|
||||
module.exports = function (doc, selector = 'body') {
|
||||
const elements = [...doc.querySelectorAll(selector)];
|
||||
elements.forEach(el => smartquotes.element(el));
|
||||
return doc;
|
||||
};
|
||||
Plik binarny nie jest wyświetlany.
|
Po Szerokość: | Wysokość: | Rozmiar: 91 KiB |
Plik binarny nie jest wyświetlany.
|
Po Szerokość: | Wysokość: | Rozmiar: 69 KiB |
Plik binarny nie jest wyświetlany.
|
Po Szerokość: | Wysokość: | Rozmiar: 100 KiB |
Plik binarny nie jest wyświetlany.
|
Po Szerokość: | Wysokość: | Rozmiar: 53 KiB |
Plik binarny nie jest wyświetlany.
|
Po Szerokość: | Wysokość: | Rozmiar: 175 KiB |
|
|
@ -0,0 +1,19 @@
|
|||
<p style="margin-top: 0">
|
||||
The content in this example was included from
|
||||
<a href="/assets/examples/include.html" target="_blank">a separate file</a>. 🤯
|
||||
</p>
|
||||
<p>
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
|
||||
aliqua. Lectus vestibulum mattis ullamcorper velit sed ullamcorper morbi. Fringilla urna porttitor rhoncus dolor purus
|
||||
non enim. Nullam vehicula ipsum a arcu cursus vitae congue mauris. Gravida in fermentum et sollicitudin.
|
||||
</p>
|
||||
<p>
|
||||
Cursus sit amet dictum sit amet justo donec enim. Sed id semper risus in hendrerit gravida. Viverra accumsan in nisl
|
||||
nisi scelerisque eu ultrices vitae. Et molestie ac feugiat sed lectus vestibulum mattis ullamcorper velit. Nec
|
||||
ullamcorper sit amet risus nullam. Et egestas quis ipsum suspendisse ultrices gravida dictum. Lorem donec massa sapien
|
||||
faucibus et molestie. A cras semper auctor neque vitae.
|
||||
</p>
|
||||
|
||||
<script>
|
||||
console.log('This will only execute if the `allow-scripts` prop is present');
|
||||
</script>
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
<svg width="733" xmlns="http://www.w3.org/2000/svg" height="733">
|
||||
<circle cy="366.5" cx="366.5" r="366.5"/>
|
||||
<circle cy="366.5" cx="366.5" r="336.5" fill="#fede58"/>
|
||||
<path d="M325 665c-121-21-194-115-212-233v-8l-25-1-1-18h481c6 13 10 27 13 41 13 94-38 146-114 193-45 23-93 29-142 26z"/>
|
||||
<path d="M372 647c52-6 98-28 138-62 28-25 46-56 51-87 4-20 1-57-5-70l-423-1c-2 56 39 118 74 157 31 34 72 54 116 63 11 2 38 2 49 0z" fill="#871945"/>
|
||||
<path d="M76 342c-13-26-13-57-9-85 6-27 18-52 35-68 21-20 50-23 77-18 15 4 28 12 39 23 18 17 30 40 36 67 4 20 4 41 0 60l-6 21z"/>
|
||||
<path d="M234 323c5-6 6-40 2-58-3-16-4-16-10-10-14 14-38 14-52 0-15-18-12-41 6-55 3-3 5-5 5-6-1-4-22-8-34-7-42 4-57.6 40-66.2 77-3 17-1 53 4 59H234z" fill="#fff"/>
|
||||
<path d="M378 343c-2-3-6-20-7-29-5-28-1-57 11-83 15-30 41-52 72-60 29-7 57 0 82 15 26 17 45 49 50 82 2 12 2 33 0 45-1 10-5 26-8 30z"/>
|
||||
<path d="M565 324c4-5 5-34 4-50-2-14-6-24-8-24-1 0-3 2-6 5-17 17-47 13-58-9-7-16-4-31 8-43 4-4 7-8 7-9 0 0-4-2-8-3-51-17-105 20-115 80-3 15 0 43 3 53z" fill="#fff"/>
|
||||
<path d="M504 590s-46 40-105 53c-66 15-114-7-114-7s14-76 93-95c76-18 126 49 126 49z" fill="#f9bedd"/>
|
||||
</svg>
|
||||
|
Po Szerokość: | Wysokość: | Rozmiar: 1.1 KiB |
Plik binarny nie jest wyświetlany.
|
Po Szerokość: | Wysokość: | Rozmiar: 12 KiB |
Plik binarny nie jest wyświetlany.
|
Po Szerokość: | Wysokość: | Rozmiar: 11 KiB |
Plik binarny nie jest wyświetlany.
|
Po Szerokość: | Wysokość: | Rozmiar: 15 KiB |
|
|
@ -0,0 +1,23 @@
|
|||
<svg width="160" height="45" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g filter="url(#filter0_d)">
|
||||
<rect x="2" y="2" width="156" height="40" rx="16" fill="#F9F9F9"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M30.425 11.174c.604 1.114.233 2.53-.83 3.164l-6.986 4.166a.378.378 0 00-.18.325v6.748c0 .134.069.258.18.325l5.714 3.407c.11.066.244.066.354 0l5.714-3.407a.378.378 0 00.18-.325V21.29l-4.986 2.936c-1.067.628-2.416.231-3.015-.886-.6-1.118-.22-2.532.846-3.16l7.008-4.127c2.048-1.206 4.576.345 4.576 2.806v6.718c0 1.803-.924 3.467-2.42 4.36l-5.713 3.407a4.596 4.596 0 01-4.734 0l-5.714-3.408C18.924 29.044 18 27.38 18 25.576V18.83c0-1.803.924-3.467 2.42-4.36l6.985-4.165c1.063-.634 2.415-.245 3.02.87z" fill="url(#paint0_linear)"/>
|
||||
<path fill="#F9F9F9" d="M47 12.5h95v-1H47z"/>
|
||||
<path d="M52.538 27.752c2.744 0 4.844-1.876 4.844-5.152 0-3.108-2.1-5.152-4.844-5.152s-4.802 2.002-4.802 5.152c0 3.29 2.058 5.152 4.802 5.152zm0-1.554c-1.736 0-2.912-1.316-2.912-3.598 0-2.226 1.162-3.598 2.912-3.598s2.954 1.4 2.954 3.598c0 2.31-1.218 3.598-2.954 3.598zm7.89 4.158V27.22c0-.196-.013-.378-.055-.658.434.7 1.022 1.19 2.17 1.19 1.736 0 3.066-1.414 3.066-3.626 0-2.17-1.19-3.682-2.996-3.682-1.078 0-1.806.476-2.24 1.204.042-.28.056-.462.056-.672v-.308H58.72v9.688h1.708zm1.695-3.948c-1.036 0-1.764-.938-1.764-2.31 0-1.414.742-2.296 1.764-2.296 1.092 0 1.75.952 1.75 2.296 0 1.372-.7 2.31-1.75 2.31zm7.866 1.344c1.848 0 3.052-1.078 3.192-2.478h-1.736c-.112.714-.714 1.134-1.456 1.134-1.036 0-1.722-.826-1.736-1.904h4.97v-.378c0-2.226-1.204-3.682-3.29-3.682-1.988 0-3.43 1.47-3.43 3.626 0 2.366 1.442 3.682 3.486 3.682zm-1.75-4.48c.098-.896.756-1.554 1.68-1.554.924 0 1.526.63 1.554 1.554H68.24zm8.006 4.228v-4.004c0-.952.616-1.694 1.456-1.694.798 0 1.288.63 1.288 1.638v4.06h1.708v-4.312c0-1.68-.896-2.744-2.408-2.744-1.078 0-1.722.518-2.1 1.204.042-.266.056-.476.056-.672v-.308h-1.708V27.5h1.708zm8.911-7.868h1.792V17.84h-1.792v1.792zm.042 1.036V27.5h1.708v-6.832h-1.708zm5.097 6.832v-4.004c0-.952.616-1.694 1.456-1.694.798 0 1.288.63 1.288 1.638v4.06h1.708v-4.312c0-1.68-.896-2.744-2.408-2.744-1.078 0-1.722.518-2.1 1.204.042-.266.056-.476.056-.672v-.308h-1.708V27.5h1.708zm13.238.252c1.526 0 2.52-.658 2.982-1.54-.07.322-.098.644-.098.98v.308h1.68v-5.222h-4.34v1.554h2.66v.07c0 1.4-1.134 2.296-2.59 2.296-1.792 0-3.024-1.372-3.024-3.598s1.26-3.598 3.066-3.598c1.302 0 2.17.756 2.296 1.736h1.89c-.182-1.904-1.764-3.29-4.214-3.29-2.954 0-4.928 2.128-4.928 5.152 0 3.136 1.848 5.152 4.62 5.152zm6.063-8.12h1.792V17.84h-1.792v1.792zm.042 1.036V27.5h1.708v-6.832h-1.708zm6.413 6.958c.434 0 .84-.07 1.008-.126v-1.288c-.168.028-.35.042-.518.042-.728 0-1.008-.42-1.008-1.134v-3.094h1.68v-1.358h-1.68v-2.464h-1.708v2.464h-1.554v1.358h1.554v3.346c0 1.526.77 2.254 2.226 2.254zm3.961 2.73V27.22c0-.196-.014-.378-.056-.658.434.7 1.022 1.19 2.17 1.19 1.736 0 3.066-1.414 3.066-3.626 0-2.17-1.19-3.682-2.996-3.682-1.078 0-1.806.476-2.24 1.204.042-.28.056-.462.056-.672v-.308h-1.708v9.688h1.708zm1.694-3.948c-1.036 0-1.764-.938-1.764-2.31 0-1.414.742-2.296 1.764-2.296 1.092 0 1.75.952 1.75 2.296 0 1.372-.7 2.31-1.75 2.31zm7.88 1.344c2.058 0 3.514-1.372 3.514-3.64 0-2.24-1.456-3.668-3.514-3.668-2.044 0-3.5 1.428-3.5 3.668 0 2.268 1.442 3.64 3.5 3.64zm0-1.344c-1.064 0-1.764-.84-1.764-2.296 0-1.484.728-2.31 1.764-2.31 1.05 0 1.778.826 1.778 2.31 0 1.456-.714 2.296-1.778 2.296zm7.551 1.344c1.26 0 1.876-.686 2.142-1.19-.056.238-.056.42-.056.658v.28h1.708v-9.8h-1.708v3.276c0 .21 0 .42.056.672-.392-.658-1.05-1.204-2.114-1.204-1.596 0-3.15 1.218-3.15 3.668 0 2.408 1.316 3.64 3.122 3.64zm.406-1.344c-1.022 0-1.792-.896-1.792-2.31 0-1.358.77-2.296 1.792-2.296s1.778.896 1.778 2.296c0 1.372-.756 2.31-1.778 2.31z" fill="#12100C"/>
|
||||
</g>
|
||||
<defs>
|
||||
<linearGradient id="paint0_linear" x1="33.806" y1="13.629" x2="22.389" y2="30.86" gradientUnits="userSpaceOnUse">
|
||||
<stop stop-color="#FFB45B"/>
|
||||
<stop offset="1" stop-color="#FF8A00"/>
|
||||
</linearGradient>
|
||||
<filter id="filter0_d" x="0" y=".5" width="160" height="44" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
|
||||
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
|
||||
<feColorMatrix in="SourceAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/>
|
||||
<feOffset dy=".5"/>
|
||||
<feGaussianBlur stdDeviation="1"/>
|
||||
<feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
|
||||
<feBlend in2="BackgroundImageFix" result="effect1_dropShadow"/>
|
||||
<feBlend in="SourceGraphic" in2="effect1_dropShadow" result="shape"/>
|
||||
</filter>
|
||||
</defs>
|
||||
</svg>
|
||||
|
Po Szerokość: | Wysokość: | Rozmiar: 4.5 KiB |
|
|
@ -0,0 +1,7 @@
|
|||
<svg viewBox="0 0 127 141" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g fill-rule="nonzero" fill="#0ea5e9">
|
||||
<path d="M102.375,90.85 C102.979,90.557 103.57,90.215 104.15,89.826 L106.425,88.501 C106.848,88.19 107.64,87.573 108.8,86.65 L108.95,86.501 C109.883,85.567 110.916,85.117 112.05,85.15 C112.55,85.15 113.133,85.284 113.8,85.55 L122.3,78 C122.533,77.8 122.767,77.633 123,77.5 L123.05,77.5 C123.95,76.967 124.7,77 125.3,77.6 C126.367,78.166 126.45,79.133 125.55,80.5 L116.65,88.399 C116.717,88.533 116.75,88.666 116.75,88.799 C116.883,89.399 116.833,89.999 116.6,90.599 C116.4,90.999 116.117,91.382 115.75,91.749 C115.379,92.145 114.996,92.528 114.6,92.898 L109.45,96.648 C108.99,96.97 108.523,97.27 108.05,97.548 C107.46,97.906 106.86,98.232 106.25,98.523 C105.985,98.644 105.718,98.76 105.45,98.874 C103.841,99.559 102.174,100.017 100.45,100.249 C99.65,106.982 97.35,113.183 93.55,118.849 C88.75,125.915 82.183,131.299 73.85,134.999 C65.55,138.699 56.567,140.549 46.9,140.549 C33.567,140.415 22.75,137.415 14.45,131.549 C4.817,124.75 0,115.7 0,104.399 L0,102.849 C0.333,95.149 2.6,87.849 6.8,80.95 C10.933,74.116 16.983,69.5 24.95,67.1 C29.05,65.9 33.166,65.3 37.3,65.3 C41.567,65.3 45.967,66.083 50.5,67.65 C55.033,69.216 60.15,71.916 65.85,75.75 L80.7,85.7 C84.833,88.399 88.6,90.233 92,91.2 C91.3,84.3 88.8,78.399 84.5,73.5 C80.2,68.533 74.717,64.9 68.05,62.6 L61.65,60.4 C55.783,58.333 51.417,56.3 48.55,54.3 C40.817,49.067 36.517,41.883 35.65,32.75 L35.5,30.05 C35.5,21.25 39.067,13.883 46.2,7.95 C52.567,2.65 60.133,0 68.9,0 C75.5,0 81.417,1.9 86.65,5.7 C91.917,9.533 94.9,14.967 95.6,22 L95.75,24.75 C95.75,29.85 94.433,34.216 91.8,37.85 C89.1,41.483 86.717,43.3 84.65,43.3 C84.21,43.269 83.802,43.21 83.425,43.125 L74.1,51.9 C72.6,52.733 71.583,52.583 71.05,51.45 C70.517,50.85 70.567,50.1 71.2,49.2 L71.25,49.15 C71.383,48.95 71.567,48.733 71.8,48.5 L80.475,40.275 C80.376,39.872 80.318,39.431 80.3,38.95 C80.3,37.817 80.75,36.867 81.65,36.1 C85.45,32.7 87.35,28.784 87.35,24.35 C87.35,19.95 85.683,16.25 82.35,13.25 C79.017,10.25 74.467,8.716 68.7,8.65 C61.5,8.65 55.583,10.817 50.95,15.15 C46.317,19.483 44,24.683 44,30.75 C44,35.65 45.883,40.066 49.65,44 C53.383,47.9 59.15,50.966 66.95,53.2 C77.883,56.367 86.233,61.7 92,69.2 C97.133,75.833 100,83.283 100.6,91.55 C101.199,91.365 101.791,91.132 102.375,90.85 Z M71.95,49.05 C71.95,49.35 72.117,49.5 72.45,49.5 C72.483,49.5 75.117,47.066 80.35,42.2 C80.35,41.533 78.95,42.45 76.15,44.95 C73.35,47.483 71.95,48.85 71.95,49.05 Z M74.15,50.8 C74.15,50.533 74.017,50.4 73.75,50.4 C73.45,50.4 73.183,50.55 72.95,50.85 C72.416,50.817 72.033,50.884 71.8,51.05 C71.7,51.117 71.65,51.183 71.65,51.25 C71.65,51.45 71.783,51.6 72.05,51.7 L72.95,51.7 C73.75,51.4 74.15,51.1 74.15,50.8 Z M80.35,45.35 C80.35,44.583 79.9,44.583 79,45.35 C78.567,45.75 78.017,46.317 77.35,47.05 C77.117,47.217 76.633,47.667 75.9,48.4 C75.133,49.2 74.75,49.683 74.75,49.85 L74.8,50.2 C75,50.267 75.133,50.3 75.2,50.3 C75.233,50.3 76.1,49.5 77.8,47.9 C79.5,46.3 80.35,45.45 80.35,45.35 Z M124.2,78.3 L115.8,85.7 C116.3,85.967 116.667,86.349 116.9,86.849 L125.2,79.45 C125.266,79.116 125.217,78.849 125.05,78.649 C124.883,78.517 124.6,78.399 124.2,78.3 Z M123.75,78.05 L123.55,77.85 L116.15,83.85 L116.6,84.4 L123.75,78.05 Z M91.85,99.899 C89.65,99.333 87.617,98.649 85.75,97.849 C81.55,96.149 76.333,93.183 70.1,88.95 L59.85,82 C55.517,79.233 51.567,77.166 48,75.8 C44.4,74.467 40.867,73.8 37.4,73.8 L35.9,73.8 C27.067,74.267 20.2,77.583 15.3,83.75 C10.734,89.45 8.45,96.184 8.45,103.95 C8.45,112.683 11.95,119.516 18.95,124.45 C25.916,129.416 35.467,131.899 47.6,131.899 C57.133,131.899 65.166,130.2 71.7,126.799 C78.2,123.399 83.25,118.899 86.85,113.299 C89.55,109.033 91.217,104.566 91.85,99.899 Z"></path>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Po Szerokość: | Wysokość: | Rozmiar: 3.8 KiB |
Plik binarny nie jest wyświetlany.
|
Po Szerokość: | Wysokość: | Rozmiar: 28 KiB |
Plik binarny nie jest wyświetlany.
|
Po Szerokość: | Wysokość: | Rozmiar: 5.6 KiB |
Plik binarny nie jest wyświetlany.
|
Po Szerokość: | Wysokość: | Rozmiar: 24 KiB |
|
|
@ -0,0 +1,134 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
<svg xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:cc="http://creativecommons.org/ns#" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" id="svg4301" viewBox="0 0 307.58 261.84" version="1.0" inkscape:version="0.48.4 r9939" sodipodi:docname="chaussures.svg">
|
||||
<sodipodi:namedview pagecolor="#ffffff" bordercolor="#666666" borderopacity="1" objecttolerance="10" gridtolerance="10" guidetolerance="10" inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:window-width="1366" inkscape:window-height="719" id="namedview90" showgrid="false" inkscape:zoom="0.90131378" inkscape:cx="560.67485" inkscape:cy="151.01783" inkscape:window-x="0" inkscape:window-y="25" inkscape:window-maximized="1" inkscape:current-layer="svg4301"/>
|
||||
<defs id="defs4303">
|
||||
<linearGradient id="linearGradient3321" y2="156.59" gradientUnits="userSpaceOnUse" x2="319.39" gradientTransform="translate(71.83 210.51)" y1="249.49" x1="327.13">
|
||||
<stop id="stop2445" style="stop-color:#4e4e4e;stop-opacity:1;" offset="0"/>
|
||||
<stop id="stop2447" style="stop-color:#cdcdcd;stop-opacity:1;" offset="1"/>
|
||||
</linearGradient>
|
||||
<radialGradient id="radialGradient3323" gradientUnits="userSpaceOnUse" cy="305.17" cx="161.26" gradientTransform="matrix(.6108 0 0 .6108 215.8 352.93)" r="37.761">
|
||||
<stop id="stop2460" style="stop-color:#cdcdcd;stop-opacity:1;" offset="0"/>
|
||||
<stop id="stop2462" style="stop-color:#cfcfcf;stop-opacity:1;" offset="0.2703"/>
|
||||
<stop id="stop2464" style="stop-color:#d3d3d3;stop-opacity:1;" offset="0.4603"/>
|
||||
<stop id="stop2466" style="stop-color:#dcdcdc;stop-opacity:1;" offset="0.62559998"/>
|
||||
<stop id="stop2468" style="stop-color:#e7e7e7;stop-opacity:1;" offset="0.77679998"/>
|
||||
<stop id="stop2470" style="stop-color:#f7f7f7;stop-opacity:1;" offset="0.91720003"/>
|
||||
<stop id="stop2472" style="stop-color:#ffffff;stop-opacity:1;" offset="1"/>
|
||||
</radialGradient>
|
||||
<linearGradient id="linearGradient3325" y2="315.57" gradientUnits="userSpaceOnUse" x2="185.59" gradientTransform="translate(71.83 210.51)" y1="315.57" x1="163.05">
|
||||
<stop id="stop2477" style="stop-color:#cdcdcd;stop-opacity:1;" offset="0"/>
|
||||
<stop id="stop2479" style="stop-color:#ffffff" offset="1"/>
|
||||
</linearGradient>
|
||||
<linearGradient id="linearGradient3327" y2="149.16" gradientUnits="userSpaceOnUse" x2="312.09" y1="239.51" x1="303.03">
|
||||
<stop id="stop2651" style="stop-color:#cdcdcd;stop-opacity:1;" offset="0"/>
|
||||
<stop id="stop2653" style="stop-color:#ffffff" offset="1"/>
|
||||
</linearGradient>
|
||||
<radialGradient inkscape:collect="always" xlink:href="#radialGradient3323" id="radialGradient3846" cx="-252.96408" cy="92.035866" fx="-252.96408" fy="92.035866" r="45.934406" gradientTransform="matrix(1.1352297,-1.0627683,0.60088776,0.64185731,-21.094963,-239.15678)" gradientUnits="userSpaceOnUse"/>
|
||||
</defs>
|
||||
<g id="layer1" transform="translate(-218.26 -395.26)">
|
||||
<g id="g4403" transform="translate(-5.0956 59.533)">
|
||||
<path id="path3529_2_" style="fill:#ffffff" d="m299.45 339.2c-6.14 0.41-24.15 2.87-31.52 5.33s-13.51 5.27-12.28 8.14 3.82 2.87 3.82 2.87-5.07 56.14-8.75 64.74c-3.69 8.6-11.65 20.2-17.2 33.16-7.45 17.41-6.79 33.96-5.97 42.15 0.81 8.19 1.91 16.16 8.46 16.98l0.02 0.02-0.46 16.79s6.22 4.84 20.16 9.61c16.34 5.6 22.04 5.44 40.35 5.27 5.46-0.05 12.41-0.63 17.55 0.23l22.11 13.43c19.39 13.91 27.21 16.49 49.43 25.37 10.71 4.22 12.66 2.1 15.61 1.8 1.32 0.8 5.16 8.65 20.52 4.81 8.99 5.08 17.69 4.99 24.86 2.04 13.42 4.08 21.92 2.52 27.61-2.53 11.48 3.49 23.78 1.9 29.18-5.52 10.23-0.47 12.79-1.88 17.89-9.24 5.13-1.92 7.69-4.44 7.69-10.2-0.33-7.94-1.93-15.12-3.85-22.11 0 0-2.41-6.72-7.21-6.72 0 0 3.32-25.54-36.98-42.73-2-0.85-6.73-1-8.66-1.84-29.72-12.92-38.96-24.28-38.96-24.28l-20.65-15.85c-7.07-7.85-13.09-12.1-16.93-42.18-3.71-29.08 6.88-58.01 6.88-58.01s-1.71-2.51-5.39-2.51c-3.69 0-4.49 1.22-4.49 1.22s-28.65 1.25-33.86-1.64c-3.9-2.16-5.15-7.37-18.02-8.6-13.61-1.09-27.33-0.71-40.96 0z"/>
|
||||
<path id="path2415" style="fill:#409EFE;fill-opacity:1" d="m325.11 347.4c-27.5-0.28-67.53 7.38-67.53 7.38l0.25 14.75-5.28 39.12-6.94 21.32-5.34 8.4-1.47 3.35-9.03 14.87-1.31 8.94-1.97 4.53v8.94l-1.19 8.12h1.19v9.03l5.97 14.54 8.18 3.34 25.72 7.84 21.63 0.38 18.28-1.5 5.22 2.25 15.28 5.97 26.09 14.53 36.16 16.78 10.81 2.22 1.5-1.85 2.25-20.5 6.69-17.53 14.56-16.78 20.5-11.56 22.38-4.09-7.85-5.97-4.28-1.63-10.59-5.94-33.44-26.21-12.62-26.1-5.04-32.5s5.5-32.67 5.5-34.84-13.31-1.38-18.56-1.38c-5.24 0-15.74 1.86-36.72-5.75-4.59-1.66-11.29-2.39-19-2.47z"/>
|
||||
<path id="path2449" style="fill:url(#linearGradient3321)" d="m359.61 351.33l7.99 64.43s4.74 26.72 11.98 37.96c7.25 11.23 13.99 17.58 28.72 25.72 14.74 8.14 18.98 8.14 18.98 8.14s6.62-4.02 2.5-8.14-19.73-14.48-22.23-16.98-15.48-18.98-16.48-22.73c-1-3.74-6.51-16.34-6.51-41.55s5.36-39.37 5.36-39.37l2.15-6.73-32.46-0.75z"/>
|
||||
<path id="path2451" style="fill:#2e3436" d="m358.47 351.47l7.99 64.43c0.2 1.16 4.88 27.14 12.16 38.44 7.58 11.77 14.66 18.11 29.13 26.1 14.57 8.06 19.07 8.29 19.53 8.29h0.32l0.28-0.17c0.4-0.25 3.98-2.5 4.36-5.71 0.13-1.04-0.06-2.63-1.65-4.22-2.38-2.38-8.35-6.69-13.61-10.48-3.9-2.82-7.59-5.47-8.62-6.51-2.78-2.78-15.3-18.9-16.18-22.2l-0.69-2.22c-1.73-5.27-5.78-17.61-5.78-39.04 0-24.67 5.24-38.83 5.29-38.97l2.63-8.25-35.33-0.81 0.17 1.32zm50.39 126.97c-14.09-7.78-20.97-13.94-28.31-25.34-7.04-10.92-11.78-37.28-11.82-37.54 0 0-7.51-60.52-7.82-63.05 2.32 0.05 26.94 0.62 29.6 0.68-0.57 1.79-1.68 5.27-1.68 5.27-0.2 0.52-5.42 14.59-5.42 39.72 0 21.8 4.13 34.38 5.9 39.76l0.65 2.09c1.12 4.18 14.4 20.86 16.78 23.24 1.16 1.16 4.74 3.74 8.9 6.74 5.19 3.75 11.07 7.99 13.33 10.24 0.68 0.68 1.01 1.36 1.01 2.06 0 0.09 0 0.18-0.02 0.27-0.19 1.62-2.02 3.15-2.98 3.81-1.21-0.19-6.14-1.33-18.12-7.95z"/>
|
||||
<path id="path2457" style="fill:#d3d7cf" d="m489.55 505.94s18.34 2.45 22.79 27.53c0.57 10.4-4.36 6.85-4.36 4.1-1.05-4.16-4.18-21.14-18.43-31.63z"/>
|
||||
<path id="path2474" style="fill:url(#radialGradient3323)" d="m287.17 522.78l1.21 23.54 25.12-0.46 18.64 11.59 9.27-20.03-33.28-16.22-20.96 1.58z"/>
|
||||
<path id="path2481" style="fill:url(#linearGradient3325)" d="m236.58 510.93l20.52 8.72 0.32 21.58-22.54-10.21 1.7-20.09z"/>
|
||||
<path id="path2483" style="fill:#d3d7cf" d="m516.48 536.36l9.06 11.87 0.86 21.35-5.39 3.02s0.75-20.49-5.29-36.23"/>
|
||||
<path id="path2485" style="fill:#d3d7cf" d="m506.25 543.91l7.55 0.65 5.39 31.27-6.9 5.82s1.72-29.11-6.04-37.74z"/>
|
||||
<path id="path2487" style="fill:#d3d7cf" d="m490.07 550.6l8.85 3.67 3.37 29.89-8.33 5.26s3.23-36.23-3.89-38.82"/>
|
||||
<path id="path2489" style="fill:#d3d7cf" d="m466.45 555.56l6.04 4.96-1.08 30.41-7.98 2.15s8.2-9.27 3.02-37.52"/>
|
||||
<path id="path2491" style="fill:#d3d7cf" d="m439.18 556.73l7.76 4.53s-2.37 12.08-2.37 12.73c0 0.64 0.43 14.88 0.43 14.88l-8.84 4.1s8.84-10.57 3.02-36.24z"/>
|
||||
<path id="path2493" style="fill:#d3d7cf" d="m396.48 567.2l3.23 1.51v16.18l-4.74 0.22s4.09-5.61 1.51-17.91"/>
|
||||
<path id="path2497" style="fill:#d3d7cf" d="m419.12 558.36l3.67 3.24-2.65 5.6-0.57 21.89-7.56 0.11s3.45-0.65 7.11-30.84z"/>
|
||||
<path id="path2580" style="fill:#2e3436" d="m298.63 336.41h-0.04c-6.05 0.41-24.52 2.9-32.29 5.49-8.67 2.89-12.75 5.27-14.07 8.21-0.31 0.68-0.46 1.38-0.46 2.09 0 0.66 0.14 1.32 0.4 1.94 0.82 1.91 2.09 3.1 3.37 3.81-2.07 22.42-5.82 55.62-8.3 61.39-1.58 3.71-4.11 8.19-6.78 12.94-3.42 6.06-7.28 12.92-10.41 20.23-4.43 10.34-6.7 21.92-6.7 33.95 0 3.21 0.16 6.44 0.49 9.7 0.7 6.98 1.64 16.24 8.41 18.99-0.1 3.51-0.44 15.96-0.44 15.96l1.22 0.96c0.27 0.21 6.79 5.2 21.05 10.08 16.55 5.67 22.56 5.61 40.43 5.44l0.94-0.01 4.54-0.11c4.21-0.13 8.52-0.25 11.97 0.25 1.08 0.66 21.26 12.92 21.44 13.03 18.09 12.96 26.52 16.31 44.95 23.65l5.02 2c8.76 3.45 12.45 3.05 15.73 2.27 2.37 2.53 8.01 7.64 21.17 4.71 8.26 4.31 17.17 5.04 25.35 2.03 12.19 3.51 21.45 2.74 28.2-2.38 12.31 3.27 23.95 0.95 29.96-5.91 9.66-0.59 13.21-2.48 18.36-9.71 4.49-1.83 8.79-4.9 8.79-12.7v-0.06-0.07c-0.37-8.77-2.21-16.44-3.96-22.79l-0.03-0.1-0.04-0.11c-0.92-2.58-3.3-6.53-6.97-8.08-0.27-7.49-4.28-28.39-38.9-43.16-1.36-0.58-3.18-0.85-5.11-1.13-1.24-0.19-2.94-0.44-3.53-0.7-28.45-12.37-37.73-23.31-37.82-23.42l-0.22-0.26-0.28-0.22s-20.02-15.36-20.43-15.69c-0.32-0.34-1.52-1.65-1.52-1.65-6.18-6.69-11.05-11.97-14.46-38.65-0.53-4.17-0.76-8.34-0.76-12.43 0-23.35 7.4-43.91 7.48-44.15l0.54-1.47-0.88-1.3c-0.27-0.39-2.77-3.84-7.92-3.84-2.76 0-4.48 0.59-5.56 1.25-13.17 0.53-28.62 0.2-31.31-1.29-0.72-0.4-1.4-1.04-2.26-1.85-2.75-2.58-6.52-6.12-16.95-7.12-14.5-1.16-29.07-0.65-41.41-0.01zm40.88 6.11c8.29 0.79 10.95 3.29 13.3 5.49 1.02 0.96 2.09 1.96 3.48 2.73 5.53 3.07 28.55 2.33 35.47 2.02l1.28-0.05s0.38-0.44 0.72-0.82c0.07-0.05 0.68-0.34 2.36-0.34 0.79 0 1.36 0.2 1.82 0.43-1.92 5.87-7.17 23.7-7.17 44.02 0 4.38 0.25 8.88 0.82 13.39 3.66 28.63 9.39 34.84 16.03 42.03l1.85 2.02 0.23 0.18s19.92 15.29 20.4 15.66c1.7 1.93 12.03 12.75 39.84 24.84 1.34 0.58 3.16 0.85 5.08 1.14 1.32 0.19 2.97 0.44 3.61 0.71 32.9 14.03 35.2 33.23 35.2 38.3 0 0.7-0.04 1.13-0.06 1.25l-0.39 3.41 3.43 0.02c1.94 0 3.7 3.06 4.29 4.62 1.65 5.97 3.36 13.14 3.71 21.21-0.02 3.98-1.3 5.62-5.7 7.27l-0.9 0.34-0.55 0.78c-4.38 6.32-5.92 7.48-15.51 7.93l-1.47 0.07-0.87 1.19c-4.29 5.9-14.91 7.71-25.81 4.39l-1.64-0.49-1.28 1.13c-5.31 4.71-13.38 5.33-24.69 1.89l-1.05-0.31-1 0.41c-4.99 2.05-12.89 3.39-22.19-1.88l-1.07-0.6-1.18 0.3c-11.29 2.82-14.96-1.19-16.72-3.13l-2.6-2.34-0.77 0.59-2.1 0.39c-1.95 0.47-4.38 1.04-12.09-1.99 0.02 0-5.01-2-5.01-2-18.53-7.38-26.2-10.43-43.75-23.02l-0.1-0.06-22.7-13.8-0.58-0.1c-4.12-0.69-9.2-0.53-13.69-0.38l-4.4 0.11-0.95 0.01c-17.53 0.16-22.83 0.21-38.38-5.12-9.82-3.36-15.68-6.76-18.05-8.29 0.07-2.7 0.49-17.9 0.49-17.9l-2.77-0.37c-3.73-0.46-4.92-5.36-5.8-14.24-0.31-3.06-0.46-6.1-0.46-9.11 0-11.19 2.1-21.95 6.2-31.53 3-7 6.78-13.72 10.12-19.64 2.75-4.89 5.36-9.52 7.08-13.53 3.76-8.79 8.46-59.87 8.99-65.66l0.29-3.24s-2.99-0.09-3.21-0.1c-0.16-0.01-0.5-0.1-0.81-0.47 0.72-0.68 2.99-2.21 10.1-4.58 6.78-2.26 24.22-4.74 30.75-5.18 12.13-0.63 26.44-1.13 40.53 0z"/>
|
||||
<path style="fill:#2e3436" d="M 13.40625 174.5 L 12.21875 176.46875 C 32.228749 188.40875 51.296251 189.33125 83.90625 186.78125 C 94.56625 189.67125 104.36375 195.21375 113.84375 200.59375 C 118.76375 203.39375 123.87 206.28 129 208.75 C 157.51142 222.9319 163.05796 225.54474 177.5625 227.96875 C 176.97616 228.96111 176.47871 230.05592 176.0625 231.25 L 176.03125 231.34375 L 176 231.40625 C 175.12232 230.74911 173.9157 230.06765 172.21875 229.6875 L 172.15625 229.6875 L 172.09375 229.6875 C 165.49375 228.9475 160.72625 231.2125 158.65625 236.0625 L 158.625 236.125 L 158.59375 236.21875 C 157.68375 239.78875 157.6725 243.64375 158.5625 248.34375 L 160.84375 247.90625 C 160.42375 245.71625 160.21875 243.74625 160.21875 241.90625 C 160.21875 240.11625 160.4125 238.455 160.8125 236.875 C 162.4725 233.055 166.24 231.36875 171.75 231.96875 C 173.98435 232.47884 175.10023 233.5158 175.5625 234.09375 C 174.874 239.05235 175.01123 244.43196 176 250.8125 L 178.28125 250.46875 C 177.71125 246.82875 177.4375 243.5175 177.4375 240.4375 C 177.4375 237.4175 177.7 234.6175 178.25 231.9375 C 180.55 225.3975 185.74125 222.49 193.28125 223.5 C 196.92386 224.5123 198.39914 226.72513 198.84375 227.5625 C 198.02304 228.93811 197.33544 230.47205 196.78125 232.1875 L 196.75 232.28125 L 196.75 232.34375 C 195.4 239.38375 195.4 247.00375 196.75 256.34375 L 199 256 C 198.34 251.45 198 247.34 198 243.5 C 198 239.71 198.36 236.20375 199 232.84375 C 201.7 224.58375 207.74125 220.88625 216.53125 222.15625 C 220.35647 223.30308 222.21461 225.77974 222.9375 227.0625 C 222.37942 228.19593 221.91063 229.42222 221.5 230.75 L 221.46875 230.8125 L 221.46875 230.90625 C 220.10875 238.25625 220.0875 246.20875 221.4375 255.96875 L 223.71875 255.65625 C 223.05875 250.89625 222.71875 246.5825 222.71875 242.5625 C 222.71875 238.5925 223.0475 234.895 223.6875 231.375 C 226.3875 222.715 232.47 218.8675 241.25 220.1875 C 246.2917 221.77506 248.40986 226.12107 248.59375 226.5 C 248.55888 226.60813 248.50259 226.70306 248.46875 226.8125 L 248.4375 226.96875 L 248.40625 227.125 C 248.12625 232.795 248.2225 238.3925 248.3125 243.8125 L 248.40625 251.875 L 250.71875 251.875 L 250.625 243.78125 C 250.585 241.06125 250.53125 238.32125 250.53125 235.53125 C 250.53125 232.84125 250.58875 230.095 250.71875 227.375 C 253.42875 218.755 259.49 214.89875 268.25 216.21875 C 272.80875 217.645 274.44139 220.00773 274.84375 220.6875 C 274.92127 221.41844 275.01239 222.20846 275.125 223.1875 C 275.605 227.3775 276.43375 234.40875 277.34375 246.96875 L 279.625 246.8125 C 278.705 234.2025 277.89625 227.1575 277.40625 222.9375 C 277.09625 220.3175 276.9375 218.7875 276.9375 217.6875 C 276.9375 217.1375 276.9625 216.70125 277.0625 216.28125 C 278.2625 213.09125 280.08875 210.9925 282.46875 210.0625 C 285.34651 208.92711 288.41554 209.72238 289.96875 210.28125 C 290.80024 215.92606 292.44227 226.28561 292.53125 226.84375 L 294.34375 238.1875 L 296.625 237.8125 L 294.8125 226.46875 C 294.7925 226.29875 292.14125 209.71 291.78125 206.75 C 291.47125 204.16 292.605 202.02 292.625 202 L 290.625 200.90625 C 290.565 201.01625 289.1 203.69125 289.5 207.03125 C 289.51583 207.16362 289.56984 207.60059 289.59375 207.78125 C 287.57406 207.21222 284.57689 206.75501 281.625 207.90625 C 278.585 209.09625 276.315 211.6825 274.875 215.5625 L 274.875 215.625 L 274.84375 215.6875 C 274.73609 216.14297 274.6814 216.62015 274.65625 217.125 C 273.37099 216.02782 271.51706 214.8302 268.8125 214 L 268.75 214 L 268.65625 213.96875 C 259.77355 212.59945 253.1278 216.05741 249.625 223.75 C 248.33814 221.8835 245.88727 219.17921 241.84375 217.9375 L 241.75 217.9375 L 241.6875 217.90625 C 233.98912 216.71832 227.9672 219.18454 224.21875 224.875 C 223.02733 223.20051 220.87545 221.03333 217.125 219.9375 L 217.03125 219.90625 L 216.96875 219.90625 C 209.76924 218.8458 204.02926 220.81365 200.25 225.53125 C 199.23637 224.13241 197.29552 222.19139 193.84375 221.25 L 193.75 221.21875 L 193.6875 221.21875 C 186.99056 220.30273 181.74959 222.2084 178.46875 226.625 L 178.59375 225.84375 C 164.31375 223.50375 159.7 221.4675 130 206.6875 C 124.92 204.2475 119.89 201.37375 115 198.59375 C 105.35 193.11375 95.35375 187.46 84.34375 184.5 L 84.15625 184.4375 L 83.9375 184.46875 C 51.697501 187.00875 32.926249 186.14 13.40625 174.5 z " transform="translate(223.3556,335.727)" id="path2582"/>
|
||||
<path id="path2598" style="fill:#2e3436" d="m419.3 506.98c-10.88 9.7-23.31 27.27-20.82 55.92l6.09-0.53c-2.27-26.12 8.97-42.06 18.8-50.82 15.94-14.22 38.54-19.04 51.7-16.36l1.22-5.99c-14.99-3.06-39.38 2.07-56.99 17.78z"/>
|
||||
<path id="path2600" style="fill:#2e3436" d="m232.82 519.57c-0.93 1.44-0.51 3.35 0.94 4.28 20.61 13.17 45.09 17.69 79.24 14.62 4.6 2.5 7.81 4.51 11.14 6.62 4.93 3.11 10.52 6.64 21.91 12.57 1.52 0.79 3.39 0.2 4.18-1.32s0.2-3.39-1.32-4.18c-11.16-5.81-16.63-9.26-21.46-12.31-3.63-2.29-7.06-4.46-12.3-7.28-0.54-0.29-1.15-0.41-1.76-0.35-33.19 3.11-56.73-1.08-76.3-13.59-1.44-0.93-3.35-0.51-4.27 0.94z"/>
|
||||
<path id="path2731_2_" style="fill:#8cc2d7" d="m356.17 362.56c0 2.93-2.14 5.3-4.77 5.3-2.64 0-4.77-2.37-4.77-5.3 0-2.92 2.13-5.29 4.77-5.29 2.63 0 4.77 2.37 4.77 5.29z"/>
|
||||
<path id="path2603" style="fill:#2e3436" d="m345.52 362.56c0 3.53 2.64 6.4 5.88 6.4s5.87-2.87 5.87-6.4c0-3.52-2.63-6.39-5.87-6.39s-5.88 2.87-5.88 6.39zm2.21 0c0-2.31 1.64-4.19 3.67-4.19 2.02 0 3.66 1.88 3.66 4.19s-1.64 4.19-3.66 4.19-3.67-1.88-3.67-4.19z"/>
|
||||
<path id="path3503_2_" style="fill:#babdb6" d="m360.14 395.34c0 2.93-2.14 5.3-4.77 5.3-2.64 0-4.78-2.37-4.78-5.3 0-2.92 2.14-5.29 4.78-5.29 2.63 0 4.77 2.37 4.77 5.29z"/>
|
||||
<path id="path2606" style="fill:#2e3436" d="m349.49 395.34c0 3.53 2.63 6.4 5.87 6.4s5.88-2.87 5.88-6.4c0-3.52-2.64-6.39-5.88-6.39s-5.87 2.87-5.87 6.39zm2.2 0c0-2.31 1.65-4.19 3.67-4.19 2.03 0 3.67 1.88 3.67 4.19s-1.64 4.19-3.67 4.19c-2.02 0-3.67-1.88-3.67-4.19z"/>
|
||||
<path id="path3505_2_" style="fill:#babdb6" d="m364.57 429.35c0 2.92-2.14 5.29-4.78 5.29-2.63 0-4.77-2.37-4.77-5.29s2.14-5.29 4.77-5.29c2.64 0 4.78 2.37 4.78 5.29z"/>
|
||||
<path id="path2609" style="fill:#2e3436" d="m353.92 429.35c0 3.53 2.64 6.4 5.87 6.4 3.24 0 5.88-2.87 5.88-6.4s-2.64-6.4-5.88-6.4c-3.23 0-5.87 2.87-5.87 6.4zm2.21 0c0-2.31 1.64-4.19 3.66-4.19 2.03 0 3.67 1.88 3.67 4.19s-1.64 4.19-3.67 4.19c-2.02 0-3.66-1.88-3.66-4.19z"/>
|
||||
<path id="path3507_2_" style="fill:#babdb6" d="m376.58 463.6c0 2.93-2.14 5.29-4.77 5.29-2.64 0-4.77-2.36-4.77-5.29 0-2.92 2.13-5.29 4.77-5.29 2.63 0 4.77 2.37 4.77 5.29z"/>
|
||||
<path id="path2612" style="fill:#2e3436" d="m365.93 463.6c0 3.53 2.64 6.4 5.88 6.4s5.88-2.87 5.88-6.4c0-3.52-2.64-6.39-5.88-6.39s-5.88 2.87-5.88 6.39zm2.21 0c0-2.31 1.65-4.19 3.67-4.19s3.67 1.88 3.67 4.19-1.65 4.19-3.67 4.19-3.67-1.88-3.67-4.19z"/>
|
||||
<path id="path3509_2_" style="fill:#babdb6" d="m403.97 487.08c0 2.92-2.14 5.29-4.77 5.29-2.64 0-4.78-2.37-4.78-5.29 0-2.93 2.14-5.3 4.78-5.3 2.63 0 4.77 2.37 4.77 5.3z"/>
|
||||
<path id="path2615" style="fill:#2e3436" d="m393.32 487.08c0 3.52 2.63 6.39 5.87 6.39s5.88-2.87 5.88-6.39c0-3.53-2.64-6.4-5.88-6.4s-5.87 2.87-5.87 6.4zm2.21 0c0-2.31 1.64-4.19 3.66-4.19 2.03 0 3.67 1.88 3.67 4.19s-1.64 4.19-3.67 4.19c-2.02 0-3.66-1.88-3.66-4.19z"/>
|
||||
<path id="path3511_2_" style="fill:#eeeeec" d="m401.44 361.21l-1.37 9.15c2.52 5.76 4.4 13.74 4.21 19.56-0.68 21.52 0.92 38.64 2.23 45.24 1.83 9.31 2.77 9.36 3.76 10.2l5.05 5.4s-2.57-3.54-5.27-24.11c-2.69-20.57 1.64-30.07-2.84-50.28-1.65-7.41-3.75-12.15-5.77-15.16z"/>
|
||||
<path id="path2618" style="fill:#2e3436" d="m401.05 361.15l-1.39 9.26 0.04 0.11c2.68 6.12 4.36 13.91 4.19 19.39-0.74 23.2 1.13 39.8 2.23 45.33 1.71 8.7 2.66 9.45 3.66 10.24l0.23 0.18 5.02 5.37 0.61-0.51c-0.02-0.03-2.57-3.85-5.19-23.92-1.2-9.14-1-16.07-0.81-22.78 0.23-8.37 0.45-16.29-2.04-27.53-1.46-6.56-3.42-11.71-5.83-15.3l-0.57-0.86-0.15 1.02zm0.62 1.24c2.09 3.46 3.83 8.14 5.15 14.07 1.75 7.92 2.15 14.18 2.15 20.12 0 2.43-0.06 4.81-0.13 7.22-0.07 2.5-0.14 5.03-0.14 7.7 0 4.51 0.2 9.41 0.96 15.2 1.7 13.04 3.36 19.25 4.36 22.09-1.49-1.59-3.46-3.7-3.46-3.7-0.04-0.03-0.28-0.23-0.28-0.23-0.81-0.64-1.72-1.36-3.38-9.77-0.92-4.64-2.39-17.1-2.39-34.74 0-3.3 0.05-6.78 0.17-10.42 0.01-0.26 0.01-0.53 0.01-0.81 0-5.49-1.65-12.9-4.21-18.81 0.03-0.18 0.93-6.21 1.19-7.92z"/>
|
||||
<path id="path3518_2_" style="fill:#2e3436" d="m273.51 560.51l-0.26 3.04-15.56-1.4c-2.43-0.22-1.81-3.68 0.26-3.44l15.56 1.8z"/>
|
||||
<path id="path2624" style="fill:#2e3436" d="m256.17 559.12c-0.48 0.65-0.59 1.56-0.27 2.27 0.31 0.67 0.93 1.08 1.76 1.15l15.95 1.44 0.33-3.83-15.94-1.84c-0.73-0.08-1.4 0.21-1.83 0.81zm1.56 2.63c-0.54-0.05-0.92-0.29-1.1-0.69-0.08-0.17-0.11-0.36-0.11-0.55 0-0.33 0.1-0.66 0.29-0.92 0.15-0.21 0.5-0.55 1.1-0.48 0 0 14.44 1.66 15.17 1.75-0.04 0.5-0.15 1.74-0.19 2.26-0.76-0.07-15.16-1.37-15.16-1.37z"/>
|
||||
<path id="path3528_2_" style="fill:#ffffff" d="m384.63 383.23l-0.13 10.48-20.62-15.69-1.95-11.69 22.7 16.9z"/>
|
||||
<path id="path2627" style="fill:#2e3436" d="m361.54 366.4l1.97 11.84 21.37 16.26 0.15-11.47-23.65-17.61 0.16 0.98zm0.95 0.84c1.46 1.09 21.43 15.96 21.74 16.19 0 0.36-0.1 8.16-0.12 9.48-1.18-0.9-19.62-14.93-19.86-15.11-0.05-0.28-1.49-8.95-1.76-10.56z"/>
|
||||
<path id="path3530_2_" style="fill:#dcecf3" d="m385.34 415.37l-19.39-14.93 1.29 9.57 19.49 14.81-1.39-9.45z"/>
|
||||
<path id="path2630" style="fill:#2e3436" d="m365.56 400.49l1.31 9.74 20.4 15.5-1.55-10.57-20.29-15.63 0.13 0.96zm0.91 0.85c1.41 1.09 18.26 14.06 18.5 14.25 0.04 0.28 1 6.8 1.23 8.32-1.43-1.08-18.34-13.92-18.59-14.11-0.04-0.29-0.93-6.93-1.14-8.46z"/>
|
||||
<path id="path3532_2_" style="fill:#babdb6" d="m393.26 445.42l-21.08-12.13 2.16 8.12 26.83 14.77-7.91-10.76z"/>
|
||||
<path id="path2633" style="fill:#2e3436" d="m371.8 433.39l2.2 8.28 26.98 14.86 0.51-0.59-7.96-10.83-21.98-12.65 0.25 0.93zm1.01 0.72c1.53 0.88 20.04 11.53 20.18 11.61 0.08 0.12 5.2 7.07 6.79 9.23-2.79-1.53-24.82-13.66-25.1-13.81-0.07-0.28-1.49-5.61-1.87-7.03z"/>
|
||||
<path id="path3534_2_" style="fill:#babdb6" d="m413.5 467.82l-28.37-6.06 7.56 7.4 28.28 4.67-7.47-6.01z"/>
|
||||
<path id="path2636" style="fill:#2e3436" d="m384.85 462.05l7.65 7.48 29.9 4.94-8.72-7.02-29.81-6.36 0.98 0.96zm1.54 0.39c2.43 0.52 26.76 5.71 26.94 5.75 0.12 0.09 4.56 3.67 6.21 5-2.67-0.44-26.43-4.37-26.66-4.4-0.15-0.15-5.02-4.91-6.49-6.35z"/>
|
||||
<path id="path3546_2_" style="fill:#ffffff" d="m397.83 483.74c9.2-8.52 19.96-13.21 38.83-16.79 2.36 0.89 5.66 3.26 4.87 6.21-8.45 3.04-22.7 5.05-40.02 17.06-2.79-1.45-4.23-3.06-3.68-6.48z"/>
|
||||
<path id="path2639" style="fill:#2e3436" d="m436.59 466.56c-18.81 3.56-29.76 8.3-39.03 16.89l-0.1 0.09-0.03 0.14c-0.59 3.74 1.13 5.46 3.9 6.89l0.21 0.11 0.2-0.13c13.31-9.23 24.82-12.54 33.23-14.95 2.55-0.74 4.75-1.37 6.69-2.07l0.2-0.07 0.05-0.2c0.92-3.41-2.94-5.86-5.11-6.68l-0.1-0.04-0.11 0.02zm0.03 0.8c2.01 0.79 4.63 2.64 4.63 4.91 0 0.19-0.04 0.39-0.08 0.59-1.87 0.66-3.97 1.27-6.42 1.97-8.41 2.42-19.92 5.73-33.25 14.92-2.1-1.13-3.39-2.34-3.39-4.67 0-0.35 0.04-0.74 0.1-1.14 9.11-8.39 19.91-13.05 38.41-16.58z"/>
|
||||
<g id="layer1_3_" transform="translate(71.83 210.51)">
|
||||
<path id="path2600_2_" style="fill:url(#linearGradient3327)" d="m318.35 147.12c-9.02-0.46-11.89 6.38-14.26 14.03-4.86 23.71-1.7 47.64 0 71.51 0.46 5.52 5.75 11.73 5.75 11.73l-0.69-9.89c-1.1-24.04-3.82-48.14 0.92-71.97 0.75-3.39 3.91-9.2 5.29-9.2s2.3-5.97 2.99-6.21z"/>
|
||||
<path id="path2656" style="fill:#2e3436" d="m303.71 161.03c-4.14 20.18-2.48 40.77-0.87 60.69l0.86 10.97c0.46 5.59 5.62 11.7 5.84 11.96l0.78 0.92-0.77-11.1-0.69-12.9c-1.12-19.39-2.28-39.45 1.6-58.96 0.77-3.48 3.91-8.88 4.9-8.88 1.04 0 1.63-1.66 2.41-4.19 0.25-0.8 0.59-1.9 0.77-2.07l1.26-0.67-1.43-0.07c-9.29-0.48-12.23 6.49-14.66 14.3zm0.78 71.6l-0.85-10.97c-0.86-10.62-1.73-21.43-1.73-32.24 0-9.43 0.66-18.86 2.57-28.19 2.25-7.25 4.98-13.78 13.14-13.73-0.17 0.41-0.36 0.98-0.61 1.8-0.33 1.09-1.12 3.63-1.65 3.63-1.74 0-4.94 6.19-5.68 9.51-2.04 10.28-2.7 20.68-2.7 31.05 0 9.44 0.54 18.86 1.08 28.12l0.69 12.91s0.47 6.65 0.6 8.6c-1.47-1.95-4.52-6.44-4.86-10.49z"/>
|
||||
</g>
|
||||
<path id="path3540_2_" style="fill:#ffffff" d="m355.48 391.38c12.41-2.3 25.67-3.52 41.51-1.47 1.66 1.89 1.76 6.53-0.32 8.77-8.89-1.27-20.12-1.8-41.05 0.71-1.79-2.59-2.22-5.24-0.14-8.01z"/>
|
||||
<path id="path2659" style="fill:#2e3436" d="m355.41 390.99l-0.15 0.02-0.1 0.13c-2.01 2.68-1.97 5.45 0.13 8.48l0.14 0.2 0.23-0.03c21.97-2.64 33.03-1.84 40.96-0.72l0.2 0.03 0.14-0.15c2.25-2.43 2.09-7.3 0.33-9.3l-0.1-0.12-0.15-0.02c-13.71-1.77-26.55-1.32-41.63 1.48zm41.36-0.7c0.69 0.85 1.07 2.26 1.07 3.73 0 1.55-0.43 3.15-1.35 4.23-7.92-1.11-18.98-1.87-40.65 0.72-0.88-1.34-1.36-2.59-1.36-3.8 0-1.17 0.44-2.3 1.25-3.43 14.85-2.74 27.53-3.18 41.04-1.45z"/>
|
||||
<path id="path3542_2_" style="fill:#ffffff" d="m359.69 425.5c12.16-3.35 25.27-5.7 41.22-5.02 1.47 1.53 2.32 6.35 0.44 8.76-8.97-0.49-20.21-0.06-40.84 4.24-2.01-2.43-2.66-5.04-0.82-7.98z"/>
|
||||
<path id="path2662" style="fill:#2e3436" d="m359.58 425.12l-0.15 0.04-0.08 0.13c-1.77 2.85-1.5 5.61 0.85 8.44l0.15 0.19 0.24-0.05c21.66-4.52 32.75-4.67 40.74-4.23l0.21 0.01 0.12-0.16c2.02-2.59 1.14-7.62-0.46-9.29l-0.11-0.11-0.16-0.01c-13.82-0.59-26.57 0.96-41.35 5.04zm41.13-4.25c0.77 0.89 1.32 2.74 1.32 4.58 0 1.26-0.28 2.49-0.9 3.38-7.98-0.43-19.07-0.23-40.45 4.21-1.11-1.4-1.68-2.75-1.68-4.1 0-1.02 0.33-2.05 0.96-3.1 14.56-4 27.14-5.53 40.75-4.97z"/>
|
||||
<path id="path3544_2_" style="fill:#ffffff" d="m371.37 459.04c12.19-5.33 25.55-9.82 42.47-11.79 4.61-0.1 7.63 4.18 6.1 6.87-9.54 0.99-25.31 4.99-46.24 12.65-2.56-2.06-3.98-2.9-2.33-7.73z"/>
|
||||
<path id="path2665" style="fill:#2e3436" d="m413.83 446.85c-14.69 1.71-27.82 5.35-42.62 11.82l-0.16 0.07-0.06 0.17c-1.67 4.87-0.24 6.01 2.12 7.89l0.52 0.42 0.21-0.08c19.24-7.04 35.62-11.53 46.14-12.63l0.21-0.02 0.1-0.18c0.68-1.19 0.58-2.76-0.26-4.18-0.97-1.63-3.11-3.34-6.2-3.28zm0.05 0.79c2.23-0.04 4.39 1.1 5.46 2.9 0.4 0.68 0.61 1.37 0.61 2.01 0 0.43-0.13 0.83-0.32 1.2-10.54 1.15-26.8 5.6-45.85 12.57l-0.18-0.14c-1.56-1.25-2.55-2.04-2.55-3.78 0-0.78 0.22-1.78 0.65-3.07 14.65-6.39 27.67-10 42.18-11.69z"/>
|
||||
<path id="path4266" style="fill-rule:evenodd;fill:#2e3436" d="m327.18 345.75c-2.97-0.01-6.77 0.04-10.88 0.15-8.21 0.23-17.54 0.69-23.47 1.35-11.83 1.31-33.78 5.97-33.78 5.97l0.59 2.93s22.07-4.63 33.54-5.9c5.72-0.64 15.02-1.12 23.18-1.35 4.09-0.11 7.89-0.16 10.82-0.15 1.46 0 2.71 0.03 3.65 0.06 0.95 0.03 1.69 0.11 1.75 0.13h0.03 0.03c6.78 0.97 14.56 4.48 21.04 6.43h0.06l0.06 0.03c1.15 0.24 2.12 0.25 3-0.09 0.89-0.34 1.5-1.03 1.88-1.66 0.74-1.24 1.01-2.34 1.96-3.37l-2.21-2.03c-1.46 1.57-1.93 3.2-2.32 3.84-0.19 0.32-0.24 0.36-0.37 0.41s-0.53 0.12-1.31-0.03c-0.01-0.01-0.03 0-0.04 0-6.1-1.86-13.85-5.39-21.21-6.47v-0.03c-0.03-0.01-0.07 0-0.1 0-0.56-0.11-1.17-0.13-2.12-0.16-1-0.03-2.3-0.06-3.78-0.06z"/>
|
||||
<path id="path4268" style="fill-rule:evenodd;fill:#2e3436" d="m335.93 350.9h2l-0.04-4h-2l0.04 4zm0.06 4.04l0.03 1.5v0.03l0.06 2.47 2-0.07-0.06-2.47-0.03-1.5-2 0.04zm0.19 8v0.21l0.12 3.79 2-0.07-0.12-3.78v-0.22l-2 0.07zm0.28 8v0.21l0.15 3.79 2-0.1-0.15-3.75v-0.03l-0.03-0.19-1.97 0.07zm0.34 8l0.06 1.25v0.03l0.16 2.72 2-0.1-0.16-2.75-0.06-1.25-2 0.1zm0.44 8l0.19 3.06v0.03l0.06 0.91 2-0.13-0.1-0.91v-0.03l-0.15-3.03-2 0.1zm0.53 8l0.28 4 2-0.16-0.28-4-2 0.16zm0.62 8l0.22 2.65v0.03l0.13 1.32 2-0.22-0.13-1.28-0.25-2.69-1.97 0.19zm0.72 7.96l0.44 4 1.97-0.21-0.41-3.97-2 0.18zm0.91 7.97l0.28 2.57 0.22 1.43 1.97-0.28-0.19-1.4v-0.04l-0.31-2.5-1.97 0.22zm1.03 7.97l0.59 3.97 1.97-0.31-0.59-3.97-1.97 0.31zm1.25 7.91l0.31 1.81v0.03l0.41 2.13 1.97-0.38-0.41-2.12-0.31-1.78-1.97 0.31zm1.53 7.9l0.69 3.19v0.03h0.03l0.16 0.72 1.93-0.5-0.15-0.65v-0.04l-0.72-3.18-1.94 0.43zm1.88 7.85l1.06 3.69h0.03v0.03l0.06 0.15 1.88-0.62-0.03-0.13-0.03-0.06-1.04-3.62-1.93 0.56zm2.47 7.72l0.53 1.43h0.03v0.04l0.69 1.62v0.03l0.31 0.63 1.81-0.85-0.28-0.59-0.03-0.03-0.66-1.56v-0.04l-0.56-1.4-1.84 0.72zm3.43 7.37l0.07 0.1v0.03h0.03l0.78 1.22v0.03l0.03 0.03 0.78 1.09 0.03 0.03 0.03 0.03 0.69 0.82 1.53-1.28-0.65-0.75-0.04-0.07-0.75-1-0.03-0.06-0.72-1.12-0.03-0.04-0.03-0.06-1.72 1zm5.25 6.35l1 1 1.88 1.78 1.37-1.44-1.84-1.75-0.03-0.03-0.97-0.97-1.41 1.41zm5.91 5.5l1.22 1.06h0.03l1.81 1.53 1.28-1.53-1.81-1.53-1.22-1.07-1.31 1.54zm6.22 5.09l1.72 1.34 0.03 0.03 1.44 1.07 1.21-1.6-1.46-1.09v0.03l-1.69-1.34-1.25 1.56zm6.44 4.84l3.25 2.32 1.15-1.66-3.25-2.28-1.15 1.62zm6.59 4.6l2.66 1.78 0.68 0.44 1.07-1.69-0.66-0.44v0.03l-2.66-1.81-1.09 1.69zm6.69 4.37l0.47 0.31 2.93 1.85 1.07-1.72-2.91-1.81h-0.03l-0.44-0.28-1.09 1.65zm6.81 4.25l1.94 1.16h0.03l1.5 0.87 1-1.72-1.5-0.87-1.91-1.16-1.06 1.72zm6.94 4.06l1.78 1.04 1.69 0.93 1-1.75-1.69-0.9-0.03-0.03-1.75-1.04-1 1.75zm7 3.91l1 0.56 2.53 1.35 0.94-1.78-2.54-1.35-1-0.53-0.93 1.75zm7.06 3.78l2.97 1.6 0.94-1.79-2.97-1.59-0.94 1.78z"/>
|
||||
<path id="path3516_2_" style="fill:#ffffff" d="m351.81 359.95c2.9 0.24 3.25 3.63 3.54 6.16 1.41 12.17-3.45 28.98-13.5 42.7-9.52 13-12.08 23.88-9.66 34.57 3.02 13.36 10.03 23.53 11.86 34.38 1.84 10.89-0.44 27.15-2.32 33.54-1.94 6.62-10.11 60.87-38.8 58.48-23.75-2-27.17-5.02-27.17-5.02l-2.62-1.21 0.16-3.05s6.87-1.24 8.98-0.38 19.07 4.43 22.52 4.26c4.25-0.2 7.36-0.45 12.6-5.84s9.97-15.61 9.97-15.61c6.82-21.87 13.25-39.24 10.11-66.82-2.86-15.15-18.12-29.3-10.36-54.2 4.44-12.26 14.52-23.19 18.86-35.47 2.38-6.75 3.39-11.65 2.61-17.9-0.2-1.59-0.76-2-0.55-5.61 0.13-2.14 1.83-3.14 3.77-2.98z"/>
|
||||
<path id="path2621" style="fill:#2e3436" d="m348.79 360.43c-0.69 0.6-1.09 1.46-1.15 2.48-0.15 2.6 0.1 3.61 0.32 4.51l0.23 1.17c0.8 6.42-0.34 11.36-2.59 17.72-2.17 6.16-5.87 12.09-9.45 17.83-3.54 5.67-7.19 11.52-9.41 17.63-5.36 17.22 0.19 29.38 5.09 40.12 2.24 4.92 4.37 9.57 5.26 14.29 2.89 25.44-2.44 42.32-8.61 61.87l-1.5 4.76c-0.02 0.06-4.73 10.18-9.86 15.45-5.23 5.38-8.37 5.53-12.34 5.73-3.49 0.17-20.42-3.45-22.35-4.24-2.19-0.89-8.92 0.31-9.2 0.36l-0.31 0.06-0.19 3.63s2.74 1.27 2.82 1.31c0.5 0.38 4.89 3.18 27.35 5.07 25.75 2.15 35.19-40.72 38.29-54.81l0.93-3.96c1.72-5.86 4.26-22.3 2.33-33.71-0.94-5.54-3.2-10.88-5.6-16.54-2.35-5.56-4.79-11.3-6.27-17.87-2.5-11.02 0.55-21.9 9.59-34.24 9.73-13.29 15.06-30.16 13.58-42.98l-0.02-0.12c-0.3-2.59-0.7-6.14-3.89-6.4-1.2-0.09-2.28 0.22-3.05 0.88zm-43.97 204.35c4.15-0.2 7.42-0.36 12.87-5.96 5.22-5.37 9.99-15.62 10.04-15.72 0.02-0.05 1.51-4.81 1.51-4.81 6.2-19.63 11.55-36.59 8.64-62.23-0.92-4.85-3.06-9.54-5.33-14.5-4.83-10.61-10.32-22.62-5.05-39.53 2.18-6.02 5.81-11.84 9.32-17.47 3.61-5.77 7.33-11.75 9.53-17.98 2.29-6.47 3.45-11.51 2.63-18.09l-0.25-1.26c-0.21-0.88-0.44-1.79-0.29-4.27 0.05-0.82 0.34-1.46 0.87-1.92 0.6-0.53 1.48-0.77 2.47-0.69 2.53 0.2 2.88 3.25 3.16 5.69l0.02 0.12c0.16 1.4 0.24 2.85 0.24 4.34 0 11.94-5.12 26.4-13.67 38.08-7.13 9.73-10.59 18.59-10.59 27.33 0 2.52 0.29 5.04 0.86 7.56 1.5 6.63 3.95 12.41 6.32 18 2.37 5.61 4.62 10.92 5.54 16.36 0.48 2.87 0.68 6.05 0.68 9.31 0 9.56-1.72 19.71-2.99 24.04l-0.94 4.02c-3.06 13.92-12.39 56.27-37.44 54.19-23.11-1.95-26.92-4.9-26.96-4.93l-0.04-0.03-0.05-0.03s-1.97-0.91-2.37-1.1c0.02-0.39 0.11-1.99 0.13-2.46 2.06-0.35 6.88-0.99 8.45-0.35 2.16 0.88 19.1 4.47 22.69 4.29z"/>
|
||||
<path id="path4270" style="fill-rule:evenodd;fill:#2e3436" d="m233.24 455.06l0.34 0.09 1.13 0.38 0.03 0.03 1.69 0.69v0.03h0.06l0.03 0.03 0.81-1.66-0.09-0.03-0.03-0.03h-0.03l-1.79-0.75h-0.03l-1.15-0.4-0.03-0.04-0.41-0.12-0.53 1.78zm6.5 2.88l0.28 0.15 0.03 0.03 1.34 0.82h0.04l1.37 0.9 1-1.53-1.41-0.91v-0.03h-0.03l-1.4-0.84-0.03-0.03-0.29-0.16-0.9 1.6zm5.97 4.03l0.31 0.22 0.03 0.03 1.63 1.34 0.03 0.03 0.75 0.69 1.25-1.38-0.82-0.71h-0.03l-1.65-1.41h-0.03v-0.03l-0.35-0.25-1.12 1.47zm5.34 4.78l1.69 1.84 0.03 0.03 0.69 0.85 1.4-1.19-0.72-0.88-0.03-0.03-1.72-1.84-1.34 1.22zm4.69 5.56l0.34 0.47 0.03 0.03 1.6 2.34 0.03 0.04 0.03 0.06 1.56-0.97-0.06-0.09v-0.04l-1.66-2.4-0.03-0.03v-0.03l-0.4-0.5-1.44 1.12zm3.9 6.03l1.19 2.13 0.03 0.03 0.5 1.03 1.66-0.81-0.53-1.07v-0.03h-0.03l-1.19-2.18-1.63 0.9zm3.25 6.47l0.79 1.81v0.03l0.59 1.54 1.72-0.66-0.6-1.56v-0.03h-0.03l-0.78-1.85-1.69 0.72zm2.57 6.78l0.65 2.03v0.07l0.38 1.37 1.78-0.47-0.38-1.44v-0.03h-0.03l-0.65-2.09-1.75 0.56zm1.93 7l0.69 3h-0.03l0.13 0.53 1.78-0.31-0.1-0.53v-0.03l-0.68-3.06-1.79 0.4zm1.38 7.13l0.06 0.25 0.31 2.25v0.03l0.13 1.06 1.81-0.19-0.12-1.12-0.32-2.31-0.06-0.25-1.81 0.28zm0.87 7.25l0.19 2.47 0.06 1.15 1.85-0.12-0.06-1.16-0.19-2.5v-0.03l-1.85 0.19zm0.41 7.25v0.37l1.84-0.06v-0.38l-1.84 0.07z"/>
|
||||
<path id="path4293" style="fill:#ffffff" d="m303.98 661.1c0 15.3-9.7 27.71-21.67 27.71s-21.68-12.41-21.67-27.71c-0.01-15.29 9.7-27.7 21.67-27.7s21.67 12.41 21.67 27.7z" transform="matrix(1.003 0 0 .87191 -4.7828 -148.61)"/>
|
||||
<path id="path4272" style="fill:#2e3436" d="m277.34 402.92l-1.1 0.08h-0.06l-1.1 0.16h-0.06l-1.07 0.22-0.06 0.03h-0.09l-0.66 0.54 0.09 0.79 0.79 0.38 0.34-0.02h0.03l0.06-0.03 0.94-0.19h0.07l0.97-0.16v0.02l1.03-0.11h0.07 0.28l0.81-0.38 0.13-0.76-0.66-0.55-0.34-0.05h-0.35l-0.06 0.03zm3.48 0.43l-0.28 0.74 0.5 0.65 0.31 0.08 0.28 0.06h0.06l0.95 0.19 0.06 0.03 0.94 0.21 0.06 0.03 0.91 0.27v0.03h0.06l0.07 0.03 0.87-0.06 0.5-0.65-0.31-0.74-0.28-0.16-0.1-0.03-0.06-0.02-1.03-0.33h-0.07l-1.03-0.27-0.06-0.03-1.07-0.22h-0.06l-0.35-0.05-0.87 0.24zm-10.69 1.28l-0.47 0.22-0.06 0.03-0.98 0.49-0.03 0.03-0.94 0.54-0.06 0.03-0.75 0.49-0.44 0.68 0.41 0.71 0.87 0.13 0.32-0.13 0.75-0.46 0.03-0.03 0.85-0.49 0.06-0.03 0.85-0.41 0.06-0.03 0.44-0.19 0.53-0.62-0.25-0.77-0.85-0.27-0.34 0.08zm17.33 1.5l0.16 0.76 0.25 0.22 0.44 0.25 0.06 0.03 0.82 0.51 0.03 0.03 0.81 0.57 0.03 0.03 0.63 0.52 0.88 0.22 0.72-0.5-0.03-0.76-0.22-0.24-0.66-0.55-0.03-0.03-0.88-0.62-0.06-0.03-0.91-0.57-0.03-0.03-0.47-0.27-0.91-0.11-0.63 0.57zm-23.29 2.45l-0.28 0.17-0.69 0.68-0.03 0.03-0.75 0.81-0.03 0.03-0.72 0.85-0.04 0.02-0.18 0.22-0.1 0.79 0.63 0.55 0.91-0.14 0.22-0.22 0.15-0.19 0.04-0.03 0.65-0.79 0.04-0.02 0.69-0.74 0.03-0.03 0.69-0.65 0.22-0.74-0.54-0.62-0.91 0.02zm28.9 1.72l-0.12 0.79 0.15 0.25 0.04 0.02 0.68 0.79v0.03l0.66 0.82v0.03l0.6 0.84 0.03 0.03 0.03 0.02 0.72 0.44 0.88-0.24 0.25-0.74-0.09-0.3-0.07-0.05v-0.03l-0.65-0.93-0.04-0.03-0.65-0.87-0.04-0.02-0.72-0.85-0.03-0.03-0.03-0.02-0.81-0.33-0.79 0.38zm-33.38 3.73l-0.22 0.25-0.41 0.71v0.02l-0.53 1.01-0.03 0.03-0.47 1.04v0.05l-0.13 0.24 0.13 0.77 0.78 0.38 0.82-0.3 0.19-0.27 0.09-0.22v-0.03l0.44-0.98 0.03-0.03 0.47-0.95 0.03-0.03 0.38-0.65v-0.79l-0.72-0.46-0.85 0.21zm37.36 1.69l-0.37 0.71 0.06 0.3 0.47 0.98v0.03l0.41 1.01 0.37 1.01 0.6 0.54 0.91-0.08 0.44-0.68-0.03-0.3-0.38-1.01v-0.03l-0.44-1.06v-0.05l-0.47-0.99-0.69-0.51-0.88 0.13zm-40.12 4.58l-0.12 0.3-0.28 1.06v0.03l-0.25 1.17v0.03l-0.16 0.98 0.28 0.74 0.85 0.24 0.75-0.44 0.09-0.29 0.16-0.93v-0.06l0.25-1.11h-0.03l0.28-1.04-0.22-0.76-0.81-0.3-0.79 0.38zm41.85 2.21v0.32l0.06 0.3 0.22 1.18h-0.03l0.15 1.17v0.02l0.04 0.47 0.43 0.65 0.91 0.11 0.6-0.57 0.06-0.3-0.03-0.49v-0.03l-0.16-1.22v-0.03l-0.18-1.2v-0.03l-0.1-0.35-0.53-0.63h-0.91l-0.53 0.63zm-42.88 4.41l-0.06 0.3-0.04 0.66v0.02l0.04 1.26v0.02l0.09 1.23v0.03l0.03 0.16 0.47 0.65 0.91 0.06 0.56-0.6 0.04-0.3v-0.11-0.03l-0.1-1.17v-0.03l-0.03-1.17v-0.02l0.03-0.63-0.37-0.68-0.91-0.17-0.66 0.52zm43.44 0.66l-0.06 0.3-0.03 1.19v0.03l-0.07 1.17v0.03l-0.09 0.76 0.31 0.71 0.88 0.22 0.72-0.46 0.1-0.3 0.09-0.79v-0.03l0.06-1.23v-0.02l0.03-1.26-0.37-0.71-0.88-0.16-0.69 0.55zm-42.85 5.99v0.33l0.04 0.16v0.05l0.28 1.15 0.03 0.03 0.34 1.11v0.03l0.25 0.71 0.63 0.57 0.88-0.11 0.44-0.65-0.03-0.33-0.25-0.65v-0.06l-0.32-1.03v-0.03l-0.31-1.09h0.03l-0.03-0.19-0.57-0.63h-0.87l-0.54 0.63zm42.16 0.33l-0.12 0.27-0.19 0.68v0.03l-0.32 1.03-0.03 0.06-0.34 1.01-0.03 0.05-0.07 0.19 0.1 0.76 0.78 0.39 0.82-0.3 0.19-0.28 0.09-0.21v-0.03l0.41-1.12v-0.03l0.34-1.11v-0.03l0.19-0.71-0.22-0.76-0.81-0.3-0.79 0.41zm-39.59 5.36l-0.34 0.74 0.09 0.3 0.25 0.46v0.03l0.57 0.98 0.03 0.03 0.6 0.95 0.03 0.03 0.34 0.49 0.75 0.41 0.85-0.27 0.25-0.77-0.16-0.3-0.31-0.43-0.03-0.03-0.56-0.9v-0.03l-0.54-0.9-0.03-0.05-0.22-0.44-0.69-0.49-0.88 0.19zm37.33 0.63l-0.21 0.25-0.47 0.81-0.04 0.03-0.56 0.9-0.03 0.03-0.6 0.84v0.03l-0.09 0.08-0.1 0.79 0.63 0.55 0.91-0.14 0.22-0.22 0.09-0.11 0.04-0.02 0.65-0.93v-0.03l0.63-0.95v-0.03l0.5-0.87v-0.76l-0.72-0.49-0.85 0.24zm-33.56 5.07l-0.1 0.79 0.16 0.27 0.28 0.27 0.03 0.06 0.79 0.73 0.03 0.06 0.81 0.71 0.06 0.02 0.73 0.58 0.84 0.21 0.72-0.49v-0.76l-0.22-0.24-0.69-0.55-0.03-0.03-0.75-0.65-0.03-0.05-0.75-0.69-0.03-0.02-0.22-0.28-0.85-0.32-0.78 0.38zm29.68 0.22l-0.28 0.19-0.57 0.52-0.03 0.05-0.75 0.65-0.03 0.03-0.79 0.6-0.03 0.03-0.41 0.3-0.34 0.71 0.44 0.68 0.88 0.11 0.31-0.17 0.44-0.3 0.03-0.02 0.85-0.69 0.03-0.02 0.84-0.71 0.04-0.06 0.56-0.54 0.25-0.76-0.56-0.63-0.88 0.03zm-24.2 4.33l0.22 0.76 0.25 0.22 0.82 0.38 0.06 0.03 0.97 0.43 0.06 0.03 1.01 0.38 0.06 0.03 0.56 0.16 0.91-0.08 0.44-0.68-0.34-0.71-0.32-0.16-0.53-0.16-0.03-0.03-0.91-0.33-0.06-0.03-0.88-0.38-0.06-0.02-0.76-0.39-0.87-0.02-0.6 0.57zm18.37-0.22l-0.13 0.06-0.03 0.02-0.91 0.38-0.03 0.03-0.91 0.33-0.06 0.03-0.97 0.3-0.19 0.05-0.66 0.55 0.1 0.76 0.78 0.41 0.34-0.03 0.25-0.08h0.07l1.03-0.33 0.06-0.03 1.01-0.38 0.06-0.03 0.97-0.43 0.06-0.03 0.16-0.08 0.5-0.63-0.31-0.73-0.88-0.25-0.31 0.11zm-10.25 1.77l-0.82 0.22-0.28 0.74 0.5 0.65 0.32 0.08h0.03l0.06 0.03 1.1 0.08h0.06l1.13 0.03h0.06l1.13-0.03h0.06l0.38-0.03 0.75-0.41 0.1-0.79-0.69-0.51-0.35-0.03-0.34 0.03h-0.07l-0.97 0.02h-0.03-0.03l-1-0.02h-0.07l-0.97-0.08h-0.06v0.02z"/>
|
||||
</g>
|
||||
</g>
|
||||
<metadata id="metadata88">
|
||||
<rdf:RDF>
|
||||
<cc:Work>
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/>
|
||||
<cc:license rdf:resource="http://creativecommons.org/licenses/publicdomain/"/>
|
||||
<dc:publisher>
|
||||
<cc:Agent rdf:about="http://openclipart.org/">
|
||||
<dc:title>Openclipart</dc:title>
|
||||
</cc:Agent>
|
||||
</dc:publisher>
|
||||
<dc:title>blue boot</dc:title>
|
||||
<dc:date>2009-06-18T11:16:58</dc:date>
|
||||
<dc:description>A draw of a boot</dc:description>
|
||||
<dc:source>https://openclipart.org/detail/26707/blue-boot-by-badaman</dc:source>
|
||||
<dc:creator>
|
||||
<cc:Agent>
|
||||
<dc:title>badaman</dc:title>
|
||||
</cc:Agent>
|
||||
</dc:creator>
|
||||
<dc:subject>
|
||||
<rdf:Bag>
|
||||
<rdf:li>azul</rdf:li>
|
||||
<rdf:li>blue</rdf:li>
|
||||
<rdf:li>boot</rdf:li>
|
||||
<rdf:li>bota</rdf:li>
|
||||
<rdf:li>deporte</rdf:li>
|
||||
<rdf:li>inkscape</rdf:li>
|
||||
<rdf:li>line art</rdf:li>
|
||||
<rdf:li>monochrome</rdf:li>
|
||||
<rdf:li>sport</rdf:li>
|
||||
<rdf:li>vectorial</rdf:li>
|
||||
</rdf:Bag>
|
||||
</dc:subject>
|
||||
</cc:Work>
|
||||
<cc:License rdf:about="http://creativecommons.org/licenses/publicdomain/">
|
||||
<cc:permits rdf:resource="http://creativecommons.org/ns#Reproduction"/>
|
||||
<cc:permits rdf:resource="http://creativecommons.org/ns#Distribution"/>
|
||||
<cc:permits rdf:resource="http://creativecommons.org/ns#DerivativeWorks"/>
|
||||
</cc:License>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
</svg>
|
||||
|
Po Szerokość: | Wysokość: | Rozmiar: 36 KiB |
Plik binarny nie jest wyświetlany.
|
Po Szerokość: | Wysokość: | Rozmiar: 1.2 MiB |
Plik binarny nie jest wyświetlany.
|
Po Szerokość: | Wysokość: | Rozmiar: 7.3 KiB |
Plik binarny nie jest wyświetlany.
|
Po Szerokość: | Wysokość: | Rozmiar: 55 KiB |
|
|
@ -0,0 +1,80 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<svg width="879px" height="553px" viewBox="0 0 879 553" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<!-- Generator: Sketch 53.2 (72643) - https://sketchapp.com -->
|
||||
<title>undraw-content-team</title>
|
||||
<desc>Created with Sketch.</desc>
|
||||
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
|
||||
<g id="undraw-content-team" transform="translate(-3.000000, 0.000000)">
|
||||
<rect id="Rectangle" fill-opacity="0.25" fill="#fff" x="180" y="16" width="579" height="343" rx="20"></rect>
|
||||
<path d="M840.86295,552.21468 L98.22937,552.21468 C84.4769827,552.21468 73.32847,541.066167 73.32847,527.31378 L73.32847,527.31378 C342.533003,496.02706 606.678133,496.02706 865.76386,527.31378 L865.76386,527.31378 C865.763854,541.066169 854.615339,552.21468 840.86295,552.21468 Z" id="Path" fill="#CCCCCC" fill-rule="nonzero"></path>
|
||||
<path d="M865.76386,528.77851 L73.32847,527.31375 L165.16896,372.78153 L165.60837,372.04915 L165.60837,31.47769 C165.607672,23.1290737 168.923838,15.1221947 174.827202,9.21883153 C180.730565,3.31546831 188.737444,-0.00069762467 197.08606,2.84217094e-14 L737.61198,2.84217094e-14 C745.960596,-0.00069762467 753.967475,3.31546831 759.870838,9.21883153 C765.774202,15.1221947 769.090368,23.1290737 769.08967,31.47769 L769.08967,374.39269 L865.76386,528.77851 Z M196.36834,21.97141 C190.70822,21.9777587 186.121369,26.5646095 186.11502,32.22473 L186.11502,342.75394 C186.121622,348.413956 190.708324,353.000658 196.36834,353.00726 L742.72398,353.00726 C748.383893,353.000411 752.970451,348.413853 752.9773,342.75394 L752.9773,32.22473 C752.970704,26.5647122 748.383998,21.9780061 742.72398,21.97141 L196.36834,21.97141 Z" id="Combined-Shape" fill="#E6E6E6" fill-rule="nonzero"></path>
|
||||
<path d="M199.95903,394.02055 C198.24391,394.023463 196.686317,395.021305 195.9667,396.57816 L167.66779,458.0981 C167.041726,459.458563 167.151668,461.044211 167.959498,462.305253 C168.767328,463.566295 170.161797,464.32907 171.6594,464.3291 L766.77054,464.3291 C768.293506,464.329083 769.707849,463.540407 770.508355,462.244793 C771.308862,460.949179 771.381351,459.331427 770.69993,457.96941 L739.93993,396.44947 C739.199697,394.957483 737.676056,394.015676 736.01054,394.0206 L199.95903,394.02055 Z" id="Path" fill="#CCCCCC" fill-rule="nonzero"></path>
|
||||
<circle id="Oval" fill="#FFFFFF" fill-rule="nonzero" cx="467.34902" cy="10.25332" r="6.59142"></circle>
|
||||
<path d="M408.85444,476.04714 C406.86865,476.049642 405.130517,477.381666 404.61179,479.29851 L397.51328,505.66419 C397.15753,506.984241 397.436508,508.39467 398.26801,509.479887 C399.099513,510.565104 400.388783,511.201438 401.75593,511.20139 L536.75349,511.20139 C538.174875,511.201399 539.508438,510.513737 540.332692,509.355747 C541.156947,508.197757 541.370032,506.712543 540.9046,505.36952 L531.77845,479.00384 C531.165175,477.234516 529.498505,476.04781 527.62591,476.04714 L408.85444,476.04714 Z" id="Path" fill="#CCCCCC" fill-rule="nonzero"></path>
|
||||
<polygon id="Path" fill="#CCCCCC" fill-rule="nonzero" points="769.09 366.922 769.09 372.782 165.169 372.782 165.623 372.049 165.623 366.922"></polygon>
|
||||
<path d="M694.54732,380.34397 C694.063752,380.344578 693.640491,380.668942 693.51417,381.13572 L691.78557,387.55617 C691.698952,387.877623 691.766894,388.221078 691.969377,388.485341 C692.17186,388.749605 692.485812,388.904563 692.81873,388.90456 L725.69267,388.90456 C726.038798,388.904561 726.36354,388.737104 726.564256,388.455115 C726.764973,388.173127 726.816861,387.811455 726.70352,387.48441 L724.48117,381.06397 C724.331826,380.633113 723.925966,380.344133 723.46996,380.34397 L694.54732,380.34397 Z" id="Path" fill="#CCCCCC" fill-rule="nonzero"></path>
|
||||
<path d="M646.54732,380.34397 C646.063752,380.344578 645.640491,380.668942 645.51417,381.13572 L643.78557,387.55617 C643.698952,387.877623 643.766894,388.221078 643.969377,388.485341 C644.17186,388.749605 644.485812,388.904563 644.81873,388.90456 L677.69267,388.90456 C678.038798,388.904561 678.36354,388.737104 678.564256,388.455115 C678.764973,388.173127 678.816861,387.811455 678.70352,387.48441 L676.48117,381.06397 C676.331826,380.633113 675.925966,380.344133 675.46996,380.34397 L646.54732,380.34397 Z" id="Path" fill="#CCCCCC" fill-rule="nonzero"></path>
|
||||
<path d="M507.48137,421.13959 L510.05784,421.13959 L504.90484,76.75135 L502.32836,76.75135 L502.43115,83.62195 L444.68449,83.62195 L444.78727,76.75135 L442.2108,76.75135 L437.0578,421.13959 L439.63428,421.13959 L439.96839,398.81019 L507.14722,398.81019 L507.48137,421.13959 Z M503.76762,172.93959 L443.34807,172.93959 L443.9777,130.85725 L503.13798,130.85725 L503.76762,172.93959 Z M503.8062,175.51607 L504.43583,217.5984 L442.67983,217.5984 L443.30947,175.51607 L503.8062,175.51607 Z M504.47441,220.17488 L505.10405,262.25722 L442.01164,262.25722 L442.64128,220.17488 L504.47441,220.17488 Z M505.14262,264.83369 L505.77226,306.91603 L441.34343,306.91603 L441.97307,264.83369 L505.14262,264.83369 Z M505.81083,309.49251 L506.44047,351.5749 L440.67517,351.5749 L441.30481,309.49251 L505.81083,309.49251 Z M502.46977,86.19843 L503.09941,128.28077 L444.01628,128.28077 L444.64592,86.19843 L502.46977,86.19843 Z M440.007,396.23371 L440.63664,354.15137 L506.47905,354.15137 L507.10869,396.23371 L440.007,396.23371 Z" id="Shape" fill="#3F3D56" fill-rule="nonzero"></path>
|
||||
<circle id="Oval" fill="#2F2E41" fill-rule="nonzero" cx="460.7944" cy="153.35761" r="42.01233"></circle>
|
||||
<rect id="Rectangle" fill="#2F2E41" fill-rule="nonzero" transform="translate(481.263536, 194.779340) rotate(-10.261060) translate(-481.263536, -194.779340) " x="474.881916" y="183.345595" width="12.76324" height="22.86749"></rect>
|
||||
<rect id="Rectangle" fill="#2F2E41" fill-rule="nonzero" transform="translate(456.145380, 199.326392) rotate(-10.261060) translate(-456.145380, -199.326392) " x="449.76376" y="187.892647" width="12.76324" height="22.86749"></rect>
|
||||
<ellipse id="Oval" fill="#2F2E41" fill-rule="nonzero" transform="translate(455.991944, 213.405824) rotate(-40.261060) translate(-455.991944, -213.405824) " cx="455.991944" cy="213.405824" rx="10.63602" ry="3.98853"></ellipse>
|
||||
<ellipse id="Oval" fill="#2F2E41" fill-rule="nonzero" transform="translate(480.586874, 208.953401) rotate(-40.261060) translate(-480.586874, -208.953401) " cx="480.586874" cy="208.953401" rx="10.63605" ry="3.98853"></ellipse>
|
||||
<circle id="Oval" fill="#FFFFFF" fill-rule="nonzero" cx="457.85318" cy="143.08115" r="14.35864"></circle>
|
||||
<circle id="Oval" fill="#3F3D56" fill-rule="nonzero" cx="451.95181" cy="137.93436" r="4.78622"></circle>
|
||||
<path d="M493.93625,107.65269 C494.56802,92.0991 481.16312,78.92509 463.99545,78.22776 C446.82778,77.53043 432.39853,89.57376 431.76672,105.12736 C431.13491,120.68096 443.06863,124.21482 460.23627,124.91221 C477.40391,125.6096 493.30447,123.20627 493.93625,107.65269 Z" id="Path" fill="#0ea5e9" fill-rule="nonzero"></path>
|
||||
<ellipse id="Oval" fill="#2F2E41" fill-rule="nonzero" transform="translate(422.001785, 145.703659) rotate(-77.089900) translate(-422.001785, -145.703659) " cx="422.001785" cy="145.703659" rx="6.59448" ry="21.00616"></ellipse>
|
||||
<ellipse id="Oval" fill="#2F2E41" fill-rule="nonzero" transform="translate(504.470422, 159.418119) rotate(-77.089900) translate(-504.470422, -159.418119) " cx="504.470422" cy="159.418119" rx="6.59448" ry="21.00616"></ellipse>
|
||||
<path d="M472.3331,169.91416 C472.9488,173.280144 471.720947,176.718794 469.112518,178.933525 C466.504089,181.148255 462.911834,181.802199 459.690258,180.648779 C456.468682,179.495358 454.107795,176.710012 453.4978,173.34299 L453.49445,173.3245 C452.5527,168.12235 456.57483,166.2815 461.77701,165.33976 C466.97919,164.39802 471.39139,164.71201 472.3331,169.91416 Z" id="Path" fill="#FFFFFF" fill-rule="nonzero"></path>
|
||||
<ellipse id="Oval" fill="#2F2E41" fill-rule="nonzero" transform="translate(312.185926, 293.633672) rotate(-69.082170) translate(-312.185926, -293.633672) " cx="312.185926" cy="293.633672" rx="21.53369" ry="6.76007"></ellipse>
|
||||
<circle id="Oval" fill="#2F2E41" fill-rule="nonzero" transform="translate(272.378778, 326.155721) rotate(-80.782520) translate(-272.378778, -326.155721) " cx="272.378778" cy="326.155721" r="43.06735"></circle>
|
||||
<rect id="Rectangle" fill="#2F2E41" fill-rule="nonzero" x="252.75315" y="359.95537" width="13.08374" height="23.44171"></rect>
|
||||
<rect id="Rectangle" fill="#2F2E41" fill-rule="nonzero" x="278.92063" y="359.95537" width="13.08374" height="23.44171"></rect>
|
||||
<ellipse id="Oval" fill="#2F2E41" fill-rule="nonzero" cx="263.65629" cy="383.66967" rx="10.90314" ry="4.08868"></ellipse>
|
||||
<ellipse id="Oval" fill="#2F2E41" fill-rule="nonzero" cx="289.82377" cy="383.12453" rx="10.90314" ry="4.08868"></ellipse>
|
||||
<path d="M230.60203,286.10434 C227.12455,270.53055 238.2407,254.79388 255.43064,250.9555 C272.62058,247.11712 289.37486,256.63058 292.85233,272.20438 C296.3298,287.77818 284.93742,293.52203 267.74748,297.36038 C250.55754,301.19873 234.07951,301.67812 230.60203,286.10434 Z" id="Path" fill="#0ea5e9" fill-rule="nonzero"></path>
|
||||
<ellipse id="Oval" fill="#2F2E41" fill-rule="nonzero" transform="translate(223.870603, 306.172293) rotate(-64.625740) translate(-223.870603, -306.172293) " cx="223.870603" cy="306.172293" rx="6.76007" ry="21.53368"></ellipse>
|
||||
<circle id="Oval" fill="#2F2E41" fill-rule="nonzero" cx="85.9008" cy="369.76318" r="43.06733"></circle>
|
||||
<rect id="Rectangle" fill="#2F2E41" fill-rule="nonzero" x="66.27519" y="403.56287" width="13.08374" height="23.44171"></rect>
|
||||
<rect id="Rectangle" fill="#2F2E41" fill-rule="nonzero" x="92.44267" y="403.56287" width="13.08374" height="23.44171"></rect>
|
||||
<ellipse id="Oval" fill="#2F2E41" fill-rule="nonzero" cx="77.17827" cy="427.27716" rx="10.90314" ry="4.08868"></ellipse>
|
||||
<ellipse id="Oval" fill="#2F2E41" fill-rule="nonzero" cx="103.34581" cy="426.732" rx="10.90314" ry="4.08868"></ellipse>
|
||||
<circle id="Oval" fill="#FFFFFF" fill-rule="nonzero" cx="86.99113" cy="358.86008" r="14.71922"></circle>
|
||||
<circle id="Oval" fill="#3F3D56" fill-rule="nonzero" cx="86.99113" cy="358.86008" r="4.90642"></circle>
|
||||
<path d="M44.12401,329.71183 C40.64653,314.13804 51.76268,298.4014 68.95262,294.56302 C86.14256,290.72464 102.89683,300.23813 106.37431,315.81192 C109.85179,331.38571 98.45939,337.12961 81.26945,340.96792 C64.07951,344.80623 47.60154,345.28568 44.12401,329.71183 Z" id="Path" fill="#12a5e9" fill-rule="nonzero"></path>
|
||||
<ellipse id="Oval" fill="#2F2E41" fill-rule="nonzero" transform="translate(110.988725, 213.490755) rotate(-69.082170) translate(-110.988725, -213.490755) " cx="110.988725" cy="213.490755" rx="21.53369" ry="6.76007"></ellipse>
|
||||
<circle id="Oval" fill="#2F2E41" fill-rule="nonzero" transform="translate(71.181568, 246.012788) rotate(-80.782520) translate(-71.181568, -246.012788) " cx="71.1815681" cy="246.012788" r="43.06735"></circle>
|
||||
<rect id="Rectangle" fill="#2F2E41" fill-rule="nonzero" x="51.55595" y="279.81244" width="13.08374" height="23.44171"></rect>
|
||||
<rect id="Rectangle" fill="#2F2E41" fill-rule="nonzero" x="77.72343" y="279.81244" width="13.08374" height="23.44171"></rect>
|
||||
<ellipse id="Oval" fill="#2F2E41" fill-rule="nonzero" cx="62.45909" cy="303.52674" rx="10.90314" ry="4.08868"></ellipse>
|
||||
<ellipse id="Oval" fill="#2F2E41" fill-rule="nonzero" cx="88.62657" cy="302.9816" rx="10.90314" ry="4.08868"></ellipse>
|
||||
<circle id="Oval" fill="#FFFFFF" fill-rule="nonzero" cx="72.27189" cy="235.10965" r="14.71922"></circle>
|
||||
<circle id="Oval" fill="#3F3D56" fill-rule="nonzero" cx="72.27189" cy="235.10965" r="4.90642"></circle>
|
||||
<path d="M29.40483,205.96134 C25.92735,190.38755 37.0435,174.65088 54.23344,170.8125 C71.42338,166.97412 88.17766,176.48758 91.65513,192.06138 C95.1326,207.63518 83.74022,213.37903 66.55028,217.21738 C49.36034,221.05573 32.88231,221.53519 29.40483,205.96134 Z" id="Path" fill="#0ea5e9" fill-rule="nonzero"></path>
|
||||
<ellipse id="Oval" fill="#2F2E41" fill-rule="nonzero" transform="translate(22.673401, 226.029366) rotate(-64.625740) translate(-22.673401, -226.029366) " cx="22.6734006" cy="226.029366" rx="6.76007" ry="21.53368"></ellipse>
|
||||
<path d="M50.02702,261.54972 C50.02702,265.76487 60.88029,274.08829 72.92357,274.08829 C84.96685,274.08829 96.25871,262.22129 96.25871,258.0062 C96.25871,253.79111 84.96678,258.82395 72.92357,258.82395 C60.88036,258.82395 50.02702,257.33457 50.02702,261.54972 Z" id="Path" fill="#FFFFFF" fill-rule="nonzero"></path>
|
||||
<path d="M113.52376,81.56869 C111.867655,81.5704977 110.525568,82.9125851 110.52376,84.56869 L110.52376,208.56869 C110.525568,210.224795 111.867655,211.566882 113.52376,211.56869 L400.52376,211.56869 C402.179865,211.566882 403.521952,210.224795 403.52376,208.56869 L403.52376,84.56869 C403.521952,82.9125851 402.179865,81.5704977 400.52376,81.56869 L113.52376,81.56869 Z" id="Path" fill="#fbc024" fill-rule="nonzero"></path>
|
||||
<circle id="Oval" fill="#FFFFFF" fill-rule="nonzero" cx="191.01816" cy="146.56869" r="29.1211"></circle>
|
||||
<path d="M256.7436,142.69417 C254.884983,142.724723 253.39428,144.240132 253.39428,146.099 C253.39428,147.957868 254.884983,149.473277 256.7436,149.50383 L348.68926,149.50383 C349.906316,149.524778 351.042001,148.894505 351.668119,147.850647 C352.294237,146.806789 352.31556,145.508108 351.72405,144.444258 C351.132539,143.380407 350.018157,142.713189 348.80107,142.69417 C348.763797,142.693537 348.726527,142.693537 348.68926,142.69417 L256.7436,142.69417 Z" id="b71acdfd-6a55-428e-917a-53f192cb0203" fill="#FFFFFF" fill-rule="nonzero"></path>
|
||||
<path d="M256.7436,122.96697 C254.884983,122.997523 253.39428,124.512932 253.39428,126.3718 C253.39428,128.230668 254.884983,129.746077 256.7436,129.77663 L302.65917,129.77663 C303.876249,129.797613 305.011971,129.167347 305.638111,128.123473 C306.26425,127.0796 306.285572,125.78089 305.694037,124.717025 C305.102503,123.65316 303.988082,122.985951 302.77097,122.96697 C302.733703,122.966337 302.696437,122.966337 302.65917,122.96697 L256.7436,122.96697 Z" id="ad4fbcfa-41b0-45f9-a593-23b6dc3fe165" fill="#FFFFFF" fill-rule="nonzero"></path>
|
||||
<path d="M256.7436,163.36076 C254.884983,163.391313 253.39428,164.906722 253.39428,166.76559 C253.39428,168.624458 254.884983,170.139867 256.7436,170.17042 L348.68926,170.17042 C349.906316,170.191368 351.042001,169.561095 351.668119,168.517237 C352.294237,167.473379 352.31556,166.174698 351.72405,165.110848 C351.132539,164.046997 350.018157,163.379779 348.80107,163.36076 C348.763797,163.360093 348.726527,163.360093 348.68926,163.36076 L256.7436,163.36076 Z" id="bce2a7cd-a325-424d-9b3a-f63d1dad5aba" fill="#FFFFFF" fill-rule="nonzero"></path>
|
||||
<ellipse id="Oval" fill="#2F2E41" fill-rule="nonzero" transform="translate(695.602650, 372.610085) rotate(-20.917830) translate(-695.602650, -372.610085) " cx="695.60265" cy="372.610085" rx="6.76007" ry="21.53369"></ellipse>
|
||||
<circle id="Oval" fill="#2F2E41" fill-rule="nonzero" transform="translate(726.409811, 414.132115) rotate(-9.217470) translate(-726.409811, -414.132115) " cx="726.409811" cy="414.132115" r="43.06733"></circle>
|
||||
<polygon id="Path" fill="#2F2E41" fill-rule="nonzero" points="746.035 447.932 732.952 447.932 735.512 476.005 746.058 473.14"></polygon>
|
||||
<polygon id="Path" fill="#2F2E41" fill-rule="nonzero" points="717.512 448.005 704.428 448.005 706.988 476.078 717.058 473.14"></polygon>
|
||||
<ellipse id="Oval" fill="#2F2E41" fill-rule="nonzero" transform="translate(706.318056, 473.319125) rotate(-4.181640) translate(-706.318056, -473.319125) " cx="706.318056" cy="473.319125" rx="10.90314" ry="4.08868"></ellipse>
|
||||
<circle id="Oval" fill="#FFFFFF" fill-rule="nonzero" cx="725.31949" cy="403.22896" r="14.71922"></circle>
|
||||
<circle id="Oval" fill="#3F3D56" fill-rule="nonzero" cx="725.31949" cy="403.22896" r="4.90642"></circle>
|
||||
<ellipse id="Oval" fill="#2F2E41" fill-rule="nonzero" transform="translate(771.918005, 384.148727) rotate(-53.549900) translate(-771.918005, -384.148727) " cx="771.918005" cy="384.148727" rx="21.53368" ry="6.76007"></ellipse>
|
||||
<path d="M705.39698,436.33866 C705.39698,432.86466 714.34198,426.00466 724.26778,426.00466 C734.19358,426.00466 743.50006,435.78516 743.50006,439.25914 C743.50006,442.73312 734.19351,438.58514 724.26778,438.58514 C714.34205,438.58514 705.39698,439.81268 705.39698,436.33866 Z" id="Path" fill="#FFFFFF" fill-rule="nonzero" transform="translate(724.448520, 433.325266) rotate(-180.000000) translate(-724.448520, -433.325266) "></path>
|
||||
<path d="M847.1767,378.54172 L611.43117,345.86064 C607.604361,345.32541 604.932725,341.793834 605.45868,337.96574 L631.96057,146.79396 C632.495641,142.967058 636.027329,140.295337 639.85547,140.82147 L875.60098,173.50256 C879.427885,174.037626 882.099609,177.569318 881.57347,181.39746 L855.0716,372.56924 C854.536375,376.396051 851.004794,379.067687 847.1767,378.54172 L847.1767,378.54172 Z" id="Path" fill="#9358ff" fill-rule="nonzero"></path>
|
||||
<path d="M762.72231,318.87957 L642.36784,302.19498 C642.216871,302.176045 642.067969,302.14324 641.92302,302.09698 L712.51355,211.39072 C713.394132,210.238632 714.82651,209.649483 716.262854,209.8486 C717.699198,210.047717 718.917295,211.004295 719.45127,212.35248 L748.48059,283.8148 L749.87186,287.23459 L762.72231,318.87957 Z" id="Path" fill="#FFFFFF" fill-rule="nonzero"></path>
|
||||
<polygon id="Path" fill="#000000" fill-rule="nonzero" opacity="0.2" points="762.722 318.879 721.63 313.183 745.864 286.679 747.609 284.77 748.481 283.815 749.872 287.235"></polygon>
|
||||
<path d="M829.73481,328.16942 L725.63807,313.73863 L749.87186,287.23463 L751.61612,285.32515 L783.19533,250.78503 C784.29885,249.735613 785.796059,249.204111 787.314261,249.322828 C788.832463,249.441546 790.228856,250.199316 791.15584,251.40751 C791.271244,251.575507 791.375823,251.750689 791.46894,251.93199 L829.73481,328.16942 Z" id="Path" fill="#FFFFFF" fill-rule="nonzero"></path>
|
||||
<circle id="Oval" fill="#FFFFFF" fill-rule="nonzero" cx="764.18602" cy="224.18353" r="18"></circle>
|
||||
<rect id="Rectangle" fill="#FFFFFF" fill-rule="nonzero" transform="translate(653.262165, 167.923576) rotate(7.892770) translate(-653.262165, -167.923576) " x="642.262129" y="156.923541" width="22.0000711" height="22.0000711"></rect>
|
||||
<path d="M768.18655,374.08068 C771.66403,358.50689 760.54788,342.77022 743.35794,338.93184 C726.168,335.09346 709.41373,344.60692 705.93625,360.18071 C702.45877,375.7545 713.85117,381.49837 731.04111,385.33671 C748.23105,389.17505 764.70908,389.6545 768.18655,374.08068 Z" id="Path" fill="#12a5e9" fill-rule="nonzero"></path>
|
||||
<ellipse id="Oval" fill="#2F2E41" fill-rule="nonzero" transform="translate(735.010556, 473.249892) rotate(-4.181640) translate(-735.010556, -473.249892) " cx="735.010556" cy="473.249892" rx="10.90314" ry="4.08868"></ellipse>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
Po Szerokość: | Wysokość: | Rozmiar: 19 KiB |
File diff suppressed because one or more lines are too long
|
Po Szerokość: | Wysokość: | Rozmiar: 6.8 KiB |
|
|
@ -0,0 +1,32 @@
|
|||
<svg width="673" height="739" viewBox="0 0 673 739" xmlns="http://www.w3.org/2000/svg">
|
||||
<g fill-rule="nonzero" fill="none">
|
||||
<path d="M467 149.805c-46.62-7.44-99.71-11.41-155-11.41-50.6 0-99.35 3.32-142.98 9.58.01-.67.02-1.34.05-2.01C171.475 65.082 237.996.903 318.914 1.398c80.917.494 146.649 65.48 148.066 146.387.01.68.02 1.35.02 2.02Z" fill="#0BA5E9"/>
|
||||
<path d="M337.55 1.342a149.047 149.047 0 0 0-168.93 143.229c-.031.67-.04 1.34-.05 2.01 12.961-1.86 26.384-3.454 40.164-4.784 3.478-71.745 57.64-130.8 128.816-140.455Z" opacity=".1" fill="#FFF"/>
|
||||
<path d="M532.18 161.625a600.121 600.121 0 0 0-65.2-13.84 943.364 943.364 0 0 0-108.74-10.45 1133.608 1133.608 0 0 0-83.01-.34 973.29 973.29 0 0 0-106.16 8.97 624.292 624.292 0 0 0-77.25 15.66C32.61 177.995 0 199.935 0 223.395s32.61 45.4 91.82 61.77c41.64 11.52 92.98 19.37 148.92 22.97 23.09 1.5 46.96 2.26 71.26 2.26 24.38 0 48.33-.77 71.49-2.27 50.91-3.29 98.01-10.1 137.43-20 .21-.06.41-.11.62-.16 2.66-.66 5.28-1.35 7.87-2.04.93-.26 1.85-.51 2.77-.76a.978.978 0 0 1 .16-.05c.88-.24 1.75-.49 2.62-.73 1.74-.5 3.46-.99 5.15-1.5.08-.02.15-.04.22-.06 1.47-.44 2.91-.88 4.34-1.32 1.17-.37 2.33-.73 3.48-1.1.84-.27 1.67-.54 2.49-.81.6-.2 1.19-.39 1.77-.59.79-.26 1.58-.53 2.36-.8.33-.11.66-.22.98-.34.75-.25 1.48-.51 2.21-.77.79-.28 1.58-.57 2.36-.85.65-.23 1.3-.47 1.94-.71.54-.21 1.07-.41 1.61-.61 1.47-.55 2.91-1.12 4.33-1.68.71-.29 1.42-.57 2.12-.86.69-.28 1.39-.57 2.07-.86 1.12-.47 2.22-.94 3.3-1.41.52-.24 1.05-.47 1.56-.69.39-.18.77-.35 1.16-.53.28-.12.56-.25.83-.38 1.01-.46 2.01-.93 2.99-1.4 3.76-1.8 7.27-3.64 10.53-5.52 20.45-11.71 31.24-24.7 31.24-38.2 0-23.46-32.61-45.4-91.82-61.77Zm-.54 121.62c-41.69 11.53-93.17 19.38-149.26 22.95-22.81 1.45-46.39 2.2-70.38 2.2-23.91 0-47.41-.74-70.15-2.19-56.18-3.56-107.74-11.41-149.49-22.96C34.09 267.125 2 245.875 2 223.395c0-1.986.252-3.965.74-5.89 5.1-20.28 36.47-39.26 89.62-53.96a623.806 623.806 0 0 1 76.66-15.57 976.027 976.027 0 0 1 106.8-9c11.92-.39 23.98-.583 36.18-.58 15.41 0 30.65.31 45.63.91a941.367 941.367 0 0 1 109.37 10.5 598.858 598.858 0 0 1 64.64 13.74c53.14 14.7 84.5 33.67 89.61 53.94.496 1.93.75 3.916.75 5.91 0 22.48-32.09 43.73-90.36 59.85Z" fill="#3F3D56"/>
|
||||
<path d="M623.43 224.305c0 13.36-11.01 26-30.67 37.29-3.27 1.88-6.79 3.72-10.53 5.52-.98.47-1.98.94-2.99 1.4-.27.13-.55.26-.83.38-.39.18-.77.35-1.16.53-.51.22-1.04.45-1.56.69-1.08.47-2.18.94-3.3 1.41-.68.29-1.38.58-2.07.86-.7.29-1.41.57-2.12.86-1.42.56-2.86 1.13-4.33 1.68-.54.2-1.07.4-1.61.61-.64.24-1.29.48-1.94.71-.78.28-1.57.57-2.36.85-.73.26-1.46.52-2.21.77-.32.12-.65.23-.98.34-.78.27-1.57.54-2.36.8-.58.2-1.17.39-1.77.59-.82.27-1.65.54-2.49.81-1.15.37-2.31.73-3.48 1.1-1.43.44-2.87.88-4.34 1.32-.07.02-.14.04-.22.06-1.69.51-3.41 1-5.15 1.5-.87.24-1.74.49-2.62.73a.978.978 0 0 0-.16.05c-.92.25-1.84.5-2.77.76-2.58.68-5.21 1.37-7.87 2.04-.21.05-.41.1-.62.16-38.35 9.58-85.4 16.56-137.47 19.93-22.81 1.47-46.59 2.25-71.02 2.25-24.65 0-48.63-.79-71.62-2.29-137.24-8.95-239.38-43.03-239.38-83.71.01-2.475.388-4.936 1.12-7.3.06.17.12.33.19.5 14.27 37.48 115.54 67.77 246.94 75.16 20.13 1.14 40.98 1.73 62.32 1.73 21.43 0 42.36-.6 62.57-1.74 131.29-7.42 232.46-37.72 246.68-75.17.24-.6.45-1.2.63-1.8a25.304 25.304 0 0 1 1.55 8.62ZM91.67 213.54c-16.643 0-34.331-3.58-34.331-10.216 0-6.636 17.688-10.217 34.33-10.217 16.643 0 34.331 3.58 34.331 10.217 0 6.636-17.688 10.217-34.33 10.217Zm0-18.433c-19.054 0-32.331 4.33-32.331 8.217 0 3.886 13.277 8.217 32.33 8.217 19.053 0 32.331-4.33 32.331-8.217 0-3.886-13.278-8.217-32.33-8.217Z" fill="#3F3D56"/>
|
||||
<path d="M162.67 260.54c-16.643 0-34.331-3.58-34.331-10.216 0-6.636 17.688-10.217 34.33-10.217 16.643 0 34.331 3.58 34.331 10.217 0 6.636-17.688 10.217-34.33 10.217Zm0-18.433c-19.054 0-32.331 4.33-32.331 8.217 0 3.886 13.277 8.217 32.33 8.217 19.053 0 32.331-4.33 32.331-8.217 0-3.886-13.278-8.217-32.33-8.217ZM531.67 213.54c-16.643 0-34.331-3.58-34.331-10.216 0-6.636 17.688-10.217 34.33-10.217 16.643 0 34.331 3.58 34.331 10.217 0 6.636-17.688 10.217-34.33 10.217Zm0-18.433c-19.054 0-32.331 4.33-32.331 8.217 0 3.886 13.277 8.217 32.33 8.217 19.053 0 32.331-4.33 32.331-8.217 0-3.886-13.278-8.217-32.33-8.217ZM460.67 260.54c-16.643 0-34.331-3.58-34.331-10.216 0-6.636 17.688-10.217 34.33-10.217 16.643 0 34.331 3.58 34.331 10.217 0 6.636-17.688 10.217-34.33 10.217Zm0-18.433c-19.054 0-32.331 4.33-32.331 8.217 0 3.886 13.277 8.217 32.33 8.217 19.053 0 32.331-4.33 32.331-8.217 0-3.886-13.278-8.217-32.33-8.217ZM311.67 282.54c-16.643 0-34.331-3.58-34.331-10.216 0-6.636 17.688-10.217 34.33-10.217 16.643 0 34.331 3.58 34.331 10.217 0 6.636-17.688 10.217-34.33 10.217Zm0-18.433c-19.054 0-32.331 4.33-32.331 8.217 0 3.886 13.277 8.217 32.33 8.217 19.053 0 32.331-4.33 32.331-8.217 0-3.886-13.278-8.217-32.33-8.217Z" fill="#3F3D56"/>
|
||||
<circle fill="#2F2E41" cx="336.978" cy="450.705" r="42.012"/>
|
||||
<path fill="#2F2E41" d="m300.555 488.547 20.447-10.24 5.715 11.413-20.447 10.24z"/>
|
||||
<ellipse fill="#2F2E41" transform="rotate(-56.601 300.086 492.946)" cx="300.086" cy="492.946" rx="3.989" ry="10.636"/>
|
||||
<path fill="#2F2E41" d="m347.239 489.72 5.715-11.412 20.447 10.24-5.715 11.412z"/>
|
||||
<ellipse fill="#2F2E41" transform="rotate(-33.399 373.87 492.946)" cx="373.87" cy="492.946" rx="10.636" ry="3.989"/>
|
||||
<circle fill="#FFF" cx="334.037" cy="440.429" r="14.359"/>
|
||||
<ellipse fill="#3F3D56" transform="rotate(-45 334.135 434.282)" cx="334.135" cy="434.282" rx="4.766" ry="4.8"/>
|
||||
<path d="M370.12 405c.632-15.553-12.773-28.727-29.941-29.425-17.168-.697-31.597 11.346-32.229 26.9-.632 15.553 11.302 19.087 28.47 19.785 17.167.697 33.068-1.706 33.7-17.26Z" fill="#0BA5E9"/>
|
||||
<ellipse fill="#2F2E41" transform="rotate(-40.645 380.654 456.766)" cx="380.654" cy="456.766" rx="6.594" ry="21.006"/>
|
||||
<ellipse fill="#2F2E41" transform="rotate(-49.355 293.42 456.766)" cx="293.419" cy="456.766" rx="21.006" ry="6.594"/>
|
||||
<path d="M348.517 467.262a9.572 9.572 0 1 1-18.836 3.428l-.003-.018c-.942-5.202 3.08-7.043 8.282-7.985 5.203-.942 9.615-.628 10.557 4.575Z" fill="#FFF"/>
|
||||
<path d="M266 495.395a2 2 0 0 1-2-2v-118a2 2 0 0 1 4 0v118a2 2 0 0 1-2 2ZM236 601.395a2 2 0 0 1-2-2v-86a2 2 0 0 1 4 0v86a2 2 0 0 1-2 2ZM313 530.395a2 2 0 0 1-2-2v-118a2 2 0 0 1 4 0v118a2 2 0 0 1-2 2ZM284 615.395a2 2 0 0 1-2-2v-48a2 2 0 0 1 4 0v48a2 2 0 0 1-2 2ZM325 369.395a2 2 0 0 1-2-2v-48a2 2 0 0 1 4 0v48a2 2 0 0 1-2 2ZM225 390.395a2 2 0 0 1-2-2v-48a2 2 0 0 1 4 0v48a2 2 0 0 1-2 2ZM399 395.395a2 2 0 0 1-2-2v-48a2 2 0 0 1 4 0v48a2 2 0 0 1-2 2ZM395 545.395a2 2 0 0 1-2-2v-58a2 2 0 0 1 4 0v58a2 2 0 0 1-2 2ZM355 596.395a2 2 0 0 1-2-2v-86a2 2 0 0 1 4 0v86a2 2 0 0 1-2 2ZM363 449.395a2 2 0 0 1-2-2v-118a2 2 0 0 1 4 0v118a2 2 0 0 1-2 2Z" fill="#CCC"/>
|
||||
<ellipse fill="#2F2E41" transform="rotate(-39.938 594.37 683.981)" cx="594.369" cy="683.981" rx="6.76" ry="21.534"/>
|
||||
<circle fill="#2F2E41" transform="rotate(-71.565 548.562 676.503)" cx="548.562" cy="676.503" r="43.067"/>
|
||||
<path fill="#2F2E41" d="M553.707 710.303h13.084v23.442h-13.084zM527.54 710.303h13.084v23.442H527.54z"/>
|
||||
<ellipse fill="#2F2E41" cx="555.888" cy="734.017" rx="10.903" ry="4.089"/>
|
||||
<ellipse fill="#2F2E41" cx="529.72" cy="733.472" rx="10.903" ry="4.089"/>
|
||||
<path d="M535.04 622.366c3.845-15.487 20.82-24.6 37.914-20.356 17.094 4.245 27.834 20.24 23.989 35.727-3.846 15.487-16.604 15.537-33.698 11.293-17.094-4.245-32.051-11.177-28.206-26.664Z" fill="#0BA5E9"/>
|
||||
<ellipse fill="#2F2E41" transform="rotate(-64.626 500.054 656.52)" cx="500.054" cy="656.52" rx="6.76" ry="21.534"/>
|
||||
<circle fill="#FFF" cx="542.124" cy="667.416" r="14.359"/>
|
||||
<circle fill="#3F3D56" cx="536.222" cy="662.269" r="4.786"/>
|
||||
<circle fill="#FFF" cx="542" cy="697.395" r="6"/>
|
||||
<path d="M671.531 738.395h-236a1 1 0 1 1 0-2h236a1 1 0 0 1 0 2Z" fill="#3F3D56"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Po Szerokość: | Wysokość: | Rozmiar: 7.6 KiB |
Plik binarny nie jest wyświetlany.
|
Po Szerokość: | Wysokość: | Rozmiar: 1.5 MiB |
File diff suppressed because one or more lines are too long
|
Po Szerokość: | Wysokość: | Rozmiar: 21 KiB |
|
|
@ -0,0 +1,249 @@
|
|||
(() => {
|
||||
function convertModuleLinks(html) {
|
||||
html = html
|
||||
.replace(/@shoelace-style\/shoelace/g, `https://esm.sh/@shoelace-style/shoelace@${shoelaceVersion}`)
|
||||
.replace(/from 'react'/g, `from 'https://esm.sh/react@${reactVersion}'`)
|
||||
.replace(/from "react"/g, `from "https://esm.sh/react@${reactVersion}"`);
|
||||
|
||||
return html;
|
||||
}
|
||||
|
||||
function getAdjacentExample(name, pre) {
|
||||
let currentPre = pre.nextElementSibling;
|
||||
|
||||
while (currentPre?.tagName.toLowerCase() === 'pre') {
|
||||
if (currentPre?.getAttribute('data-lang').split(' ').includes(name)) {
|
||||
return currentPre;
|
||||
}
|
||||
|
||||
currentPre = currentPre.nextElementSibling;
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
function runScript(script) {
|
||||
const newScript = document.createElement('script');
|
||||
|
||||
if (script.type === 'module') {
|
||||
newScript.type = 'module';
|
||||
newScript.textContent = script.innerHTML;
|
||||
} else {
|
||||
newScript.appendChild(document.createTextNode(`(() => { ${script.innerHTML} })();`));
|
||||
}
|
||||
|
||||
script.parentNode.replaceChild(newScript, script);
|
||||
}
|
||||
|
||||
function getFlavor() {
|
||||
return sessionStorage.getItem('flavor') || 'html';
|
||||
}
|
||||
|
||||
function setFlavor(newFlavor) {
|
||||
flavor = ['html', 'react'].includes(newFlavor) ? newFlavor : 'html';
|
||||
sessionStorage.setItem('flavor', flavor);
|
||||
|
||||
// Set the flavor class on the body
|
||||
document.documentElement.classList.toggle('flavor-html', flavor === 'html');
|
||||
document.documentElement.classList.toggle('flavor-react', flavor === 'react');
|
||||
}
|
||||
|
||||
function syncFlavor() {
|
||||
setFlavor(getFlavor());
|
||||
|
||||
document.querySelectorAll('.code-preview__button--html').forEach(preview => {
|
||||
if (flavor === 'html') {
|
||||
preview.classList.add('code-preview__button--selected');
|
||||
}
|
||||
});
|
||||
|
||||
document.querySelectorAll('.code-preview__button--react').forEach(preview => {
|
||||
if (flavor === 'react') {
|
||||
preview.classList.add('code-preview__button--selected');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
const shoelaceVersion = document.documentElement.getAttribute('data-shoelace-version');
|
||||
const reactVersion = '18.2.0';
|
||||
const cdndir = 'cdn';
|
||||
const npmdir = 'dist';
|
||||
let flavor = getFlavor();
|
||||
let count = 1;
|
||||
|
||||
// We need the version to open
|
||||
if (!shoelaceVersion) {
|
||||
throw new Error('The data-shoelace-version attribute is missing from <html>.');
|
||||
}
|
||||
|
||||
// Sync flavor UI on page load
|
||||
syncFlavor();
|
||||
|
||||
//
|
||||
// Resizing previews
|
||||
//
|
||||
document.addEventListener('mousedown', handleResizerDrag);
|
||||
document.addEventListener('touchstart', handleResizerDrag, { passive: true });
|
||||
|
||||
function handleResizerDrag(event) {
|
||||
const resizer = event.target.closest('.code-preview__resizer');
|
||||
const preview = event.target.closest('.code-preview__preview');
|
||||
|
||||
if (!resizer || !preview) return;
|
||||
|
||||
let startX = event.changedTouches ? event.changedTouches[0].pageX : event.clientX;
|
||||
let startWidth = parseInt(document.defaultView.getComputedStyle(preview).width, 10);
|
||||
|
||||
event.preventDefault();
|
||||
preview.classList.add('code-preview__preview--dragging');
|
||||
document.documentElement.addEventListener('mousemove', dragMove);
|
||||
document.documentElement.addEventListener('touchmove', dragMove);
|
||||
document.documentElement.addEventListener('mouseup', dragStop);
|
||||
document.documentElement.addEventListener('touchend', dragStop);
|
||||
|
||||
function dragMove(event) {
|
||||
const width = startWidth + (event.changedTouches ? event.changedTouches[0].pageX : event.pageX) - startX;
|
||||
preview.style.width = `${width}px`;
|
||||
}
|
||||
|
||||
function dragStop() {
|
||||
preview.classList.remove('code-preview__preview--dragging');
|
||||
document.documentElement.removeEventListener('mousemove', dragMove);
|
||||
document.documentElement.removeEventListener('touchmove', dragMove);
|
||||
document.documentElement.removeEventListener('mouseup', dragStop);
|
||||
document.documentElement.removeEventListener('touchend', dragStop);
|
||||
}
|
||||
}
|
||||
|
||||
//
|
||||
// Toggle source mode
|
||||
//
|
||||
document.addEventListener('click', event => {
|
||||
const button = event.target.closest('.code-preview__button');
|
||||
const codeBlock = button?.closest('.code-preview');
|
||||
|
||||
if (button?.classList.contains('code-preview__button--html')) {
|
||||
// Show HTML
|
||||
setFlavor('html');
|
||||
toggleSource(codeBlock, true);
|
||||
} else if (button?.classList.contains('code-preview__button--react')) {
|
||||
// Show React
|
||||
setFlavor('react');
|
||||
toggleSource(codeBlock, true);
|
||||
} else if (button?.classList.contains('code-preview__toggle')) {
|
||||
// Toggle source
|
||||
toggleSource(codeBlock);
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
|
||||
// Update flavor buttons
|
||||
[...document.querySelectorAll('.code-preview')].forEach(cb => {
|
||||
cb.querySelector('.code-preview__button--html')?.classList.toggle(
|
||||
'code-preview__button--selected',
|
||||
flavor === 'html'
|
||||
);
|
||||
cb.querySelector('.code-preview__button--react')?.classList.toggle(
|
||||
'code-preview__button--selected',
|
||||
flavor === 'react'
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
function toggleSource(codeBlock, force) {
|
||||
codeBlock.classList.toggle('code-preview--expanded', force);
|
||||
event.target.setAttribute('aria-expanded', codeBlock.classList.contains('code-preview--expanded'));
|
||||
}
|
||||
|
||||
//
|
||||
// Open in CodePen
|
||||
//
|
||||
document.addEventListener('click', event => {
|
||||
const button = event.target.closest('button');
|
||||
|
||||
if (button?.classList.contains('code-preview__button--codepen')) {
|
||||
const codeBlock = button.closest('.code-preview');
|
||||
const htmlExample = codeBlock.querySelector('.code-preview__source--html > pre > code')?.textContent;
|
||||
const reactExample = codeBlock.querySelector('.code-preview__source--react > pre > code')?.textContent;
|
||||
const isReact = flavor === 'react' && typeof reactExample === 'string';
|
||||
const theme = document.documentElement.classList.contains('sl-theme-dark') ? 'dark' : 'light';
|
||||
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
const isDark = theme === 'dark' || (theme === 'auto' && prefersDark);
|
||||
const editors = isReact ? '0010' : '1000';
|
||||
let htmlTemplate = '';
|
||||
let jsTemplate = '';
|
||||
let cssTemplate = '';
|
||||
|
||||
const form = document.createElement('form');
|
||||
form.action = 'https://codepen.io/pen/define';
|
||||
form.method = 'POST';
|
||||
form.target = '_blank';
|
||||
|
||||
// HTML templates
|
||||
if (!isReact) {
|
||||
htmlTemplate =
|
||||
`<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@${shoelaceVersion}/${cdndir}/shoelace.js"></script>\n` +
|
||||
`\n${htmlExample}`;
|
||||
jsTemplate = '';
|
||||
}
|
||||
|
||||
// React templates
|
||||
if (isReact) {
|
||||
htmlTemplate = '<div id="root"></div>';
|
||||
jsTemplate =
|
||||
`import React from 'https://esm.sh/react@${reactVersion}';\n` +
|
||||
`import ReactDOM from 'https://esm.sh/react-dom@${reactVersion}';\n` +
|
||||
`import { setBasePath } from 'https://esm.sh/@shoelace-style/shoelace@${shoelaceVersion}/${cdndir}/utilities/base-path';\n` +
|
||||
`\n` +
|
||||
`// Set the base path for Shoelace assets\n` +
|
||||
`setBasePath('https://esm.sh/@shoelace-style/shoelace@${shoelaceVersion}/${npmdir}/')\n` +
|
||||
`\n${convertModuleLinks(reactExample)}\n` +
|
||||
`\n` +
|
||||
`ReactDOM.render(<App />, document.getElementById('root'));`;
|
||||
}
|
||||
|
||||
// CSS templates
|
||||
cssTemplate =
|
||||
`@import 'https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@${shoelaceVersion}/${cdndir}/themes/${
|
||||
isDark ? 'dark' : 'light'
|
||||
}.css';\n` +
|
||||
'\n' +
|
||||
'body {\n' +
|
||||
' font: 16px sans-serif;\n' +
|
||||
' background-color: var(--sl-color-neutral-0);\n' +
|
||||
' color: var(--sl-color-neutral-900);\n' +
|
||||
' padding: 1rem;\n' +
|
||||
'}';
|
||||
|
||||
// Docs: https://blog.codepen.io/documentation/prefill/
|
||||
const data = {
|
||||
title: '',
|
||||
description: '',
|
||||
tags: ['shoelace', 'web components'],
|
||||
editors,
|
||||
head: `<meta name="viewport" content="width=device-width">`,
|
||||
html_classes: `sl-theme-${isDark ? 'dark' : 'light'}`,
|
||||
css_external: ``,
|
||||
js_external: ``,
|
||||
js_module: true,
|
||||
js_pre_processor: isReact ? 'babel' : 'none',
|
||||
html: htmlTemplate,
|
||||
css: cssTemplate,
|
||||
js: jsTemplate
|
||||
};
|
||||
|
||||
const input = document.createElement('input');
|
||||
input.type = 'hidden';
|
||||
input.name = 'data';
|
||||
input.value = JSON.stringify(data);
|
||||
form.append(input);
|
||||
|
||||
document.documentElement.append(form);
|
||||
form.submit();
|
||||
form.remove();
|
||||
}
|
||||
});
|
||||
|
||||
// Set the initial flavor
|
||||
window.addEventListener('turbo:load', syncFlavor);
|
||||
})();
|
||||
|
|
@ -0,0 +1,272 @@
|
|||
//
|
||||
// Sidebar
|
||||
//
|
||||
// When the sidebar is hidden, we apply the inert attribute to prevent focus from reaching it. Due to the many states
|
||||
// the sidebar can have (e.g. static, hidden, expanded), we test for visibility by checking to see if it's placed
|
||||
// offscreen or not. Then, on resize/transition we make sure to update the attribute accordingly.
|
||||
//
|
||||
(() => {
|
||||
function getSidebar() {
|
||||
return document.getElementById('sidebar');
|
||||
}
|
||||
|
||||
function isSidebarOpen() {
|
||||
return document.documentElement.classList.contains('sidebar-open');
|
||||
}
|
||||
|
||||
function isSidebarVisible() {
|
||||
return getSidebar().getBoundingClientRect().x >= 0;
|
||||
}
|
||||
|
||||
function toggleSidebar(force) {
|
||||
const isOpen = typeof force === 'boolean' ? force : !isSidebarOpen();
|
||||
return document.documentElement.classList.toggle('sidebar-open', isOpen);
|
||||
}
|
||||
|
||||
function updateInert() {
|
||||
getSidebar().inert = !isSidebarVisible();
|
||||
}
|
||||
|
||||
// Toggle the menu
|
||||
document.addEventListener('click', event => {
|
||||
const menuToggle = event.target.closest('#menu-toggle');
|
||||
if (!menuToggle) return;
|
||||
toggleSidebar();
|
||||
});
|
||||
|
||||
// Update the sidebar's inert state when the window resizes and when the sidebar transitions
|
||||
window.addEventListener('resize', () => toggleSidebar(false));
|
||||
|
||||
document.addEventListener('transitionend', event => {
|
||||
const sidebar = event.target.closest('#sidebar');
|
||||
if (!sidebar) return;
|
||||
updateInert();
|
||||
});
|
||||
|
||||
// Close when a menu item is selected on mobile
|
||||
document.addEventListener('click', event => {
|
||||
const sidebar = event.target.closest('#sidebar');
|
||||
const link = event.target.closest('a');
|
||||
if (!sidebar || !link) return;
|
||||
|
||||
if (isSidebarOpen()) {
|
||||
toggleSidebar();
|
||||
}
|
||||
});
|
||||
|
||||
// Close when open and escape is pressed
|
||||
document.addEventListener('keydown', event => {
|
||||
if (event.key === 'Escape' && isSidebarOpen()) {
|
||||
event.stopImmediatePropagation();
|
||||
toggleSidebar();
|
||||
}
|
||||
});
|
||||
|
||||
// Close when clicking outside of the sidebar
|
||||
document.addEventListener('mousedown', event => {
|
||||
if (isSidebarOpen() & !event.target?.closest('#sidebar, #menu-toggle')) {
|
||||
event.stopImmediatePropagation();
|
||||
toggleSidebar();
|
||||
}
|
||||
});
|
||||
|
||||
updateInert();
|
||||
})();
|
||||
|
||||
//
|
||||
// Theme selector
|
||||
//
|
||||
(() => {
|
||||
function getTheme() {
|
||||
return localStorage.getItem('theme') || 'auto';
|
||||
}
|
||||
|
||||
function isDark() {
|
||||
if (theme === 'auto') {
|
||||
return window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
}
|
||||
return theme === 'dark';
|
||||
}
|
||||
|
||||
function setTheme(newTheme) {
|
||||
theme = newTheme;
|
||||
localStorage.setItem('theme', theme);
|
||||
|
||||
// Update the UI
|
||||
updateSelection();
|
||||
|
||||
// Toggle the dark mode class
|
||||
document.documentElement.classList.toggle('sl-theme-dark', isDark());
|
||||
}
|
||||
|
||||
function updateSelection() {
|
||||
const menu = document.querySelector('#theme-selector sl-menu');
|
||||
if (!menu) return;
|
||||
[...menu.querySelectorAll('sl-menu-item')].map(item => (item.checked = item.getAttribute('value') === theme));
|
||||
}
|
||||
|
||||
let theme = getTheme();
|
||||
|
||||
// Selection is not preserved when changing page, so update when opening dropdown
|
||||
document.addEventListener('sl-show', event => {
|
||||
const themeSelector = event.target.closest('#theme-selector');
|
||||
if (!themeSelector) return;
|
||||
updateSelection();
|
||||
});
|
||||
|
||||
// Listen for selections
|
||||
document.addEventListener('sl-select', event => {
|
||||
const menu = event.target.closest('#theme-selector sl-menu');
|
||||
if (!menu) return;
|
||||
setTheme(event.detail.item.value);
|
||||
});
|
||||
|
||||
// Update the theme when the preference changes
|
||||
window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => setTheme(theme));
|
||||
|
||||
// Toggle with backslash
|
||||
document.addEventListener('keydown', event => {
|
||||
if (
|
||||
event.key === '\\' &&
|
||||
!event.composedPath().some(el => ['input', 'textarea'].includes(el?.tagName?.toLowerCase()))
|
||||
) {
|
||||
event.preventDefault();
|
||||
setTheme(isDark() ? 'light' : 'dark');
|
||||
}
|
||||
});
|
||||
|
||||
// Set the initial theme and sync the UI
|
||||
setTheme(theme);
|
||||
})();
|
||||
|
||||
//
|
||||
// Open details when printing
|
||||
//
|
||||
(() => {
|
||||
const detailsOpenOnPrint = new Set();
|
||||
|
||||
window.addEventListener('beforeprint', () => {
|
||||
detailsOpenOnPrint.clear();
|
||||
document.querySelectorAll('details').forEach(details => {
|
||||
if (details.open) {
|
||||
detailsOpenOnPrint.add(details);
|
||||
}
|
||||
details.open = true;
|
||||
});
|
||||
});
|
||||
|
||||
window.addEventListener('afterprint', () => {
|
||||
document.querySelectorAll('details').forEach(details => {
|
||||
details.open = detailsOpenOnPrint.has(details);
|
||||
});
|
||||
detailsOpenOnPrint.clear();
|
||||
});
|
||||
})();
|
||||
|
||||
//
|
||||
// Smooth links
|
||||
//
|
||||
(() => {
|
||||
document.addEventListener('click', event => {
|
||||
const link = event.target.closest('a');
|
||||
const id = (link?.hash ?? '').substr(1);
|
||||
const isFragment = link?.hasAttribute('href') && link?.getAttribute('href').startsWith('#');
|
||||
|
||||
if (!link || !isFragment || link.getAttribute('data-smooth-link') === 'false') {
|
||||
return;
|
||||
}
|
||||
|
||||
// Scroll to the top
|
||||
if (link.hash === '') {
|
||||
event.preventDefault();
|
||||
window.scroll({ top: 0, behavior: 'smooth' });
|
||||
history.pushState(undefined, undefined, location.pathname);
|
||||
}
|
||||
|
||||
// Scroll to an id
|
||||
if (id) {
|
||||
const target = document.getElementById(id);
|
||||
|
||||
if (target) {
|
||||
event.preventDefault();
|
||||
window.scroll({ top: target.offsetTop, behavior: 'smooth' });
|
||||
history.pushState(undefined, undefined, `#${id}`);
|
||||
}
|
||||
}
|
||||
});
|
||||
})();
|
||||
|
||||
//
|
||||
// Table of Contents scrollspy
|
||||
//
|
||||
(() => {
|
||||
// This will be stale if its not a function.
|
||||
const getLinks = () => [...document.querySelectorAll('.content__toc a')];
|
||||
const linkTargets = new WeakMap();
|
||||
const visibleTargets = new WeakSet();
|
||||
const observer = new IntersectionObserver(handleIntersect, { rootMargin: '0px 0px' });
|
||||
let debounce;
|
||||
|
||||
function handleIntersect(entries) {
|
||||
entries.forEach(entry => {
|
||||
// Remember which targets are visible
|
||||
if (entry.isIntersecting) {
|
||||
visibleTargets.add(entry.target);
|
||||
} else {
|
||||
visibleTargets.delete(entry.target);
|
||||
}
|
||||
});
|
||||
|
||||
updateActiveLinks();
|
||||
}
|
||||
|
||||
function updateActiveLinks() {
|
||||
const links = getLinks();
|
||||
// Find the first visible target and activate the respective link
|
||||
links.find(link => {
|
||||
const target = linkTargets.get(link);
|
||||
|
||||
if (target && visibleTargets.has(target)) {
|
||||
links.forEach(el => el.classList.toggle('active', el === link));
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
});
|
||||
}
|
||||
|
||||
// Observe link targets
|
||||
function observeLinks() {
|
||||
getLinks().forEach(link => {
|
||||
const hash = link.hash.slice(1);
|
||||
const target = hash ? document.querySelector(`.content__body #${hash}`) : null;
|
||||
|
||||
if (target) {
|
||||
linkTargets.set(link, target);
|
||||
observer.observe(target);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
observeLinks();
|
||||
|
||||
document.addEventListener('turbo:load', updateActiveLinks);
|
||||
document.addEventListener('turbo:load', observeLinks);
|
||||
})();
|
||||
|
||||
//
|
||||
// Show custom versions in the sidebar
|
||||
//
|
||||
(() => {
|
||||
function updateVersion() {
|
||||
const el = document.querySelector('.sidebar-version');
|
||||
if (!el) return;
|
||||
|
||||
if (location.hostname === 'next.shoelace.style') el.textContent = 'Next';
|
||||
if (location.hostname === 'localhost') el.textContent = 'Development';
|
||||
}
|
||||
|
||||
updateVersion();
|
||||
|
||||
document.addEventListener('turbo:load', updateVersion);
|
||||
})();
|
||||
|
|
@ -0,0 +1,384 @@
|
|||
(() => {
|
||||
// Append the search dialog to the body
|
||||
const siteSearch = document.createElement('div');
|
||||
const scrollbarWidth = Math.abs(window.innerWidth - document.documentElement.clientWidth);
|
||||
|
||||
siteSearch.classList.add('search');
|
||||
siteSearch.innerHTML = `
|
||||
<div class="search__overlay"></div>
|
||||
<dialog id="search-dialog" class="search__dialog">
|
||||
<div class="search__content">
|
||||
<div class="search__header">
|
||||
<div id="search-combobox" class="search__input-wrapper">
|
||||
<sl-icon name="search"></sl-icon>
|
||||
<input
|
||||
id="search-input"
|
||||
class="search__input"
|
||||
type="search"
|
||||
placeholder="Search"
|
||||
autocomplete="off"
|
||||
autocorrect="off"
|
||||
autocapitalize="off"
|
||||
enterkeyhint="go"
|
||||
spellcheck="false"
|
||||
maxlength="100"
|
||||
role="combobox"
|
||||
aria-autocomplete="list"
|
||||
aria-expanded="true"
|
||||
aria-controls="search-listbox"
|
||||
aria-haspopup="listbox"
|
||||
aria-activedescendant
|
||||
>
|
||||
<button type="button" class="search__clear-button" aria-label="Clear entry" tabindex="-1" hidden>
|
||||
<sl-icon name="x-circle-fill"></sl-icon>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="search__body">
|
||||
<ul
|
||||
id="search-listbox"
|
||||
class="search__results"
|
||||
role="listbox"
|
||||
aria-label="Search results"
|
||||
></ul>
|
||||
<div class="search__empty">No matching pages</div>
|
||||
</div>
|
||||
<footer class="search__footer">
|
||||
<small><kbd>↑</kbd> <kbd>↓</kbd> Navigate</small>
|
||||
<small><kbd>↲</kbd> Select</small>
|
||||
<small><kbd>Esc</kbd> Close</small>
|
||||
</footer>
|
||||
</div>
|
||||
</dialog>
|
||||
`;
|
||||
|
||||
const overlay = siteSearch.querySelector('.search__overlay');
|
||||
const dialog = siteSearch.querySelector('.search__dialog');
|
||||
const input = siteSearch.querySelector('.search__input');
|
||||
const clearButton = siteSearch.querySelector('.search__clear-button');
|
||||
const results = siteSearch.querySelector('.search__results');
|
||||
const version = document.documentElement.getAttribute('data-shoelace-version');
|
||||
const key = `search_${version}`;
|
||||
const searchDebounce = 50;
|
||||
const animationDuration = 150;
|
||||
let isShowing = false;
|
||||
let searchTimeout;
|
||||
let searchIndex;
|
||||
let map;
|
||||
|
||||
const loadSearchIndex = new Promise(resolve => {
|
||||
const cache = localStorage.getItem(key);
|
||||
const wait = 'requestIdleCallback' in window ? requestIdleCallback : requestAnimationFrame;
|
||||
|
||||
// Cleanup older search indices (everything before this version)
|
||||
try {
|
||||
const items = { ...localStorage };
|
||||
|
||||
Object.keys(items).forEach(k => {
|
||||
if (key > k) {
|
||||
localStorage.removeItem(k);
|
||||
}
|
||||
});
|
||||
} catch {
|
||||
/* do nothing */
|
||||
}
|
||||
|
||||
// Look for a cached index
|
||||
try {
|
||||
if (cache) {
|
||||
const data = JSON.parse(cache);
|
||||
|
||||
searchIndex = window.lunr.Index.load(data.searchIndex);
|
||||
map = data.map;
|
||||
|
||||
return resolve();
|
||||
}
|
||||
} catch {
|
||||
/* do nothing */
|
||||
}
|
||||
|
||||
// Wait until idle to fetch the index
|
||||
wait(() => {
|
||||
fetch('/assets/search.json')
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
if (!window.lunr) {
|
||||
console.error('The Lunr search client has not yet been loaded.');
|
||||
}
|
||||
|
||||
searchIndex = window.lunr.Index.load(data.searchIndex);
|
||||
map = data.map;
|
||||
|
||||
// Cache the search index for this version
|
||||
if (version) {
|
||||
try {
|
||||
localStorage.setItem(key, JSON.stringify(data));
|
||||
} catch (err) {
|
||||
console.warn(`Unable to cache the search index: ${err}`);
|
||||
}
|
||||
}
|
||||
|
||||
resolve();
|
||||
});
|
||||
});
|
||||
});
|
||||
|
||||
async function show() {
|
||||
isShowing = true;
|
||||
document.body.append(siteSearch);
|
||||
document.body.classList.add('search-visible');
|
||||
document.body.style.setProperty('--docs-search-scroll-lock-size', `${scrollbarWidth}px`);
|
||||
clearButton.hidden = true;
|
||||
requestAnimationFrame(() => input.focus());
|
||||
updateResults();
|
||||
|
||||
dialog.showModal();
|
||||
|
||||
await Promise.all([
|
||||
dialog.animate(
|
||||
[
|
||||
{ opacity: 0, transform: 'scale(.9)', transformOrigin: 'top' },
|
||||
{ opacity: 1, transform: 'scale(1)', transformOrigin: 'top' }
|
||||
],
|
||||
{ duration: animationDuration }
|
||||
).finished,
|
||||
overlay.animate([{ opacity: 0 }, { opacity: 1 }], { duration: animationDuration }).finished
|
||||
]);
|
||||
|
||||
dialog.addEventListener('mousedown', handleMouseDown);
|
||||
dialog.addEventListener('keydown', handleKeyDown);
|
||||
}
|
||||
|
||||
async function hide() {
|
||||
isShowing = false;
|
||||
|
||||
await Promise.all([
|
||||
dialog.animate(
|
||||
[
|
||||
{ opacity: 1, transform: 'scale(1)', transformOrigin: 'top' },
|
||||
{ opacity: 0, transform: 'scale(.9)', transformOrigin: 'top' }
|
||||
],
|
||||
{ duration: animationDuration }
|
||||
).finished,
|
||||
overlay.animate([{ opacity: 1 }, { opacity: 0 }], { duration: animationDuration }).finished
|
||||
]);
|
||||
|
||||
dialog.close();
|
||||
|
||||
input.blur(); // otherwise Safari will scroll to the bottom of the page on close
|
||||
input.value = '';
|
||||
document.body.classList.remove('search-visible');
|
||||
document.body.style.removeProperty('--docs-search-scroll-lock-size');
|
||||
siteSearch.remove();
|
||||
updateResults();
|
||||
|
||||
dialog.removeEventListener('mousedown', handleMouseDown);
|
||||
dialog.removeEventListener('keydown', handleKeyDown);
|
||||
}
|
||||
|
||||
function handleInput() {
|
||||
clearButton.hidden = input.value === '';
|
||||
|
||||
// Debounce search queries
|
||||
clearTimeout(searchTimeout);
|
||||
searchTimeout = setTimeout(() => updateResults(input.value), searchDebounce);
|
||||
}
|
||||
|
||||
function handleClear() {
|
||||
clearButton.hidden = true;
|
||||
input.value = '';
|
||||
input.focus();
|
||||
updateResults();
|
||||
}
|
||||
|
||||
function handleMouseDown(event) {
|
||||
if (!event.target.closest('.search__content')) {
|
||||
hide();
|
||||
}
|
||||
}
|
||||
|
||||
function handleKeyDown(event) {
|
||||
// Close when pressing escape
|
||||
if (event.key === 'Escape') {
|
||||
event.preventDefault(); // prevent <dialog> from closing immediately so it can animate
|
||||
event.stopImmediatePropagation();
|
||||
hide();
|
||||
return;
|
||||
}
|
||||
|
||||
// Handle keyboard selections
|
||||
if (['ArrowDown', 'ArrowUp', 'Home', 'End', 'Enter'].includes(event.key)) {
|
||||
event.preventDefault();
|
||||
|
||||
const currentEl = results.querySelector('[data-selected="true"]');
|
||||
const items = [...results.querySelectorAll('li')];
|
||||
const index = items.indexOf(currentEl);
|
||||
let nextEl;
|
||||
|
||||
if (items.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
switch (event.key) {
|
||||
case 'ArrowUp':
|
||||
nextEl = items[Math.max(0, index - 1)];
|
||||
break;
|
||||
case 'ArrowDown':
|
||||
nextEl = items[Math.min(items.length - 1, index + 1)];
|
||||
break;
|
||||
case 'Home':
|
||||
nextEl = items[0];
|
||||
break;
|
||||
case 'End':
|
||||
nextEl = items[items.length - 1];
|
||||
break;
|
||||
case 'Enter':
|
||||
currentEl?.querySelector('a')?.click();
|
||||
break;
|
||||
}
|
||||
|
||||
// Update the selected item
|
||||
items.forEach(item => {
|
||||
if (item === nextEl) {
|
||||
input.setAttribute('aria-activedescendant', item.id);
|
||||
item.setAttribute('data-selected', 'true');
|
||||
nextEl.scrollIntoView({ block: 'nearest' });
|
||||
} else {
|
||||
item.setAttribute('data-selected', 'false');
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
async function updateResults(query = '') {
|
||||
try {
|
||||
await loadSearchIndex;
|
||||
|
||||
const hasQuery = query.length > 0;
|
||||
const searchTerms = query
|
||||
.split(' ')
|
||||
.map((term, index, arr) => {
|
||||
// Search API: https://lunrjs.com/guides/searching.html
|
||||
if (index === arr.length - 1) {
|
||||
// The last term is not mandatory and 1x fuzzy. We also duplicate it with a wildcard to match partial words
|
||||
// as the user types.
|
||||
return `${term}~1 ${term}*`;
|
||||
} else {
|
||||
// All other terms are mandatory and 1x fuzzy
|
||||
return `+${term}~1`;
|
||||
}
|
||||
})
|
||||
.join(' ');
|
||||
const matches = hasQuery ? searchIndex.search(searchTerms) : [];
|
||||
const hasResults = hasQuery && matches.length > 0;
|
||||
|
||||
siteSearch.classList.toggle('search--has-results', hasQuery && hasResults);
|
||||
siteSearch.classList.toggle('search--no-results', hasQuery && !hasResults);
|
||||
|
||||
input.setAttribute('aria-activedescendant', '');
|
||||
results.innerHTML = '';
|
||||
|
||||
matches.forEach((match, index) => {
|
||||
const page = map[match.ref];
|
||||
const li = document.createElement('li');
|
||||
const a = document.createElement('a');
|
||||
const displayTitle = page.title ?? '';
|
||||
const displayDescription = page.description ?? '';
|
||||
const displayUrl = page.url.replace(/^\//, '').replace(/\/$/, '');
|
||||
let icon = 'file-text';
|
||||
|
||||
a.setAttribute('role', 'option');
|
||||
a.setAttribute('id', `search-result-item-${match.ref}`);
|
||||
|
||||
if (page.url.includes('getting-started/')) {
|
||||
icon = 'lightbulb';
|
||||
}
|
||||
if (page.url.includes('resources/')) {
|
||||
icon = 'book';
|
||||
}
|
||||
if (page.url.includes('components/')) {
|
||||
icon = 'puzzle';
|
||||
}
|
||||
if (page.url.includes('tokens/')) {
|
||||
icon = 'palette2';
|
||||
}
|
||||
if (page.url.includes('utilities/')) {
|
||||
icon = 'wrench';
|
||||
}
|
||||
if (page.url.includes('tutorials/')) {
|
||||
icon = 'joystick';
|
||||
}
|
||||
|
||||
li.classList.add('search__result');
|
||||
li.setAttribute('role', 'option');
|
||||
li.setAttribute('id', `search-result-item-${match.ref}`);
|
||||
li.setAttribute('data-selected', index === 0 ? 'true' : 'false');
|
||||
|
||||
a.href = page.url;
|
||||
a.innerHTML = `
|
||||
<div class="search__result-icon" aria-hidden="true">
|
||||
<sl-icon name="${icon}"></sl-icon>
|
||||
</div>
|
||||
<div class="search__result__details">
|
||||
<div class="search__result-title"></div>
|
||||
<div class="search__result-description"></div>
|
||||
<div class="search__result-url"></div>
|
||||
</div>
|
||||
`;
|
||||
a.querySelector('.search__result-title').textContent = displayTitle;
|
||||
a.querySelector('.search__result-description').textContent = displayDescription;
|
||||
a.querySelector('.search__result-url').textContent = displayUrl;
|
||||
|
||||
li.appendChild(a);
|
||||
results.appendChild(li);
|
||||
});
|
||||
} catch {
|
||||
// Ignore query errors as the user types
|
||||
}
|
||||
}
|
||||
|
||||
// Show the search dialog when clicking on data-plugin="search"
|
||||
document.addEventListener('click', event => {
|
||||
const searchButton = event.target.closest('[data-plugin="search"]');
|
||||
if (searchButton) {
|
||||
show();
|
||||
}
|
||||
});
|
||||
|
||||
// Show the search dialog when slash (or CMD+K) is pressed and focus is not inside a form element
|
||||
document.addEventListener('keydown', event => {
|
||||
if (
|
||||
!isShowing &&
|
||||
(event.key === '/' || (event.key === 'k' && (event.metaKey || event.ctrlKey))) &&
|
||||
!event.composedPath().some(el => ['input', 'textarea'].includes(el?.tagName?.toLowerCase()))
|
||||
) {
|
||||
event.preventDefault();
|
||||
show();
|
||||
}
|
||||
});
|
||||
|
||||
// Purge cache when we press CMD+CTRL+R
|
||||
document.addEventListener('keydown', event => {
|
||||
if ((event.metaKey || event.ctrlKey) && event.shiftKey && event.key === 'r') {
|
||||
localStorage.clear();
|
||||
}
|
||||
});
|
||||
|
||||
input.addEventListener('input', handleInput);
|
||||
clearButton.addEventListener('click', handleClear);
|
||||
|
||||
// Close when a result is selected
|
||||
results.addEventListener('click', event => {
|
||||
if (event.target.closest('a')) {
|
||||
hide();
|
||||
}
|
||||
});
|
||||
|
||||
// We're using Turbo, so when a user searches for something, visits a result, and presses the back button, the search
|
||||
// UI will still be visible but not interactive. This removes the search UI when Turbo renders a page so they don't
|
||||
// get trapped.
|
||||
window.addEventListener('turbo:render', () => {
|
||||
document.body.classList.remove('search-visible');
|
||||
document.querySelectorAll('.search__overlay, .search__dialog').forEach(el => el.remove());
|
||||
});
|
||||
})();
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
import * as Turbo from 'https://cdn.jsdelivr.net/npm/@hotwired/turbo@7.3.0/+esm';
|
||||
|
||||
(() => {
|
||||
if (!window.scrollPositions) {
|
||||
window.scrollPositions = {};
|
||||
}
|
||||
|
||||
function preserveScroll() {
|
||||
document.querySelectorAll('[data-preserve-scroll').forEach(element => {
|
||||
scrollPositions[element.id] = element.scrollTop;
|
||||
});
|
||||
}
|
||||
|
||||
function restoreScroll(event) {
|
||||
document.querySelectorAll('[data-preserve-scroll').forEach(element => {
|
||||
element.scrollTop = scrollPositions[element.id];
|
||||
});
|
||||
|
||||
if (event.detail && event.detail.newBody) {
|
||||
event.detail.newBody.querySelectorAll('[data-preserve-scroll').forEach(element => {
|
||||
element.scrollTop = scrollPositions[element.id];
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
window.addEventListener('turbo:before-cache', preserveScroll);
|
||||
window.addEventListener('turbo:before-render', restoreScroll);
|
||||
window.addEventListener('turbo:render', restoreScroll);
|
||||
})();
|
||||
|
|
@ -0,0 +1,173 @@
|
|||
/* Interactive code blocks */
|
||||
.code-preview {
|
||||
position: relative;
|
||||
border-radius: 3px;
|
||||
background-color: var(--sl-color-neutral-50);
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.code-preview__preview {
|
||||
position: relative;
|
||||
border: solid 1px var(--sl-color-neutral-200);
|
||||
border-bottom: none;
|
||||
border-top-left-radius: 3px;
|
||||
border-top-right-radius: 3px;
|
||||
background-color: var(--sl-color-neutral-0);
|
||||
min-width: 20rem;
|
||||
max-width: 100%;
|
||||
padding: 1.5rem 3.25rem 1.5rem 1.5rem;
|
||||
}
|
||||
|
||||
/* Block the preview while dragging to prevent iframes from intercepting drag events */
|
||||
.code-preview__preview--dragging:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
cursor: ew-resize;
|
||||
}
|
||||
|
||||
.code-preview__resizer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 1.75rem;
|
||||
font-size: 20px;
|
||||
color: var(--sl-color-neutral-600);
|
||||
background-color: var(--sl-color-neutral-0);
|
||||
border-left: solid 1px var(--sl-color-neutral-200);
|
||||
border-top-right-radius: 3px;
|
||||
cursor: ew-resize;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
.code-preview__preview {
|
||||
padding-right: 1.5rem;
|
||||
}
|
||||
|
||||
.code-preview__resizer {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.code-preview__source {
|
||||
border: solid 1px var(--sl-color-neutral-200);
|
||||
border-bottom: none;
|
||||
border-radius: 0 !important;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.code-preview--expanded .code-preview__source {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.code-preview__source pre {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.code-preview__buttons {
|
||||
position: relative;
|
||||
border: solid 1px var(--sl-color-neutral-200);
|
||||
border-bottom-left-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.code-preview__button {
|
||||
flex: 0 0 auto;
|
||||
height: 2.5rem;
|
||||
min-width: 2.5rem;
|
||||
border: none;
|
||||
border-radius: 0;
|
||||
background: var(--sl-color-neutral-0);
|
||||
font: inherit;
|
||||
font-size: 0.7rem;
|
||||
font-weight: 500;
|
||||
text-transform: uppercase;
|
||||
color: var(--sl-color-neutral-600);
|
||||
padding: 0 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.code-preview__button:not(:last-of-type) {
|
||||
border-right: solid 1px var(--sl-color-neutral-200);
|
||||
}
|
||||
|
||||
.code-preview__button--html,
|
||||
.code-preview__button--react {
|
||||
width: 70px;
|
||||
display: flex;
|
||||
place-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.code-preview__button--selected {
|
||||
font-weight: 700;
|
||||
color: var(--sl-color-primary-600);
|
||||
}
|
||||
|
||||
.code-preview__button--codepen {
|
||||
display: flex;
|
||||
place-items: center;
|
||||
width: 6rem;
|
||||
}
|
||||
|
||||
.code-preview__button:first-of-type {
|
||||
border-bottom-left-radius: 3px;
|
||||
}
|
||||
|
||||
.code-preview__button:last-of-type {
|
||||
border-bottom-right-radius: 3px;
|
||||
}
|
||||
|
||||
.code-preview__button:hover,
|
||||
.code-preview__button:active {
|
||||
box-shadow: 0 0 0 1px var(--sl-color-primary-400);
|
||||
border-right-color: transparent;
|
||||
background-color: var(--sl-color-primary-50);
|
||||
color: var(--sl-color-primary-600);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.code-preview__button:focus-visible {
|
||||
outline: none;
|
||||
outline: var(--sl-focus-ring);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.code-preview__toggle {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex: 1 1 auto;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
color: var(--sl-color-neutral-600);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.code-preview__toggle svg {
|
||||
width: 1em;
|
||||
height: 1em;
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
|
||||
.code-preview--expanded .code-preview__toggle svg {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
/* We can apply data-flavor="html|react" to any element on the page to toggle it when the flavor changes */
|
||||
.flavor-html [data-flavor]:not([data-flavor='html']) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.flavor-react [data-flavor]:not([data-flavor='react']) {
|
||||
display: none;
|
||||
}
|
||||
Plik diff jest za duży
Load Diff
|
|
@ -0,0 +1,347 @@
|
|||
/* Search plugin */
|
||||
:root,
|
||||
:root.sl-theme-dark {
|
||||
--docs-search-box-background: var(--sl-color-neutral-0);
|
||||
--docs-search-box-border-width: 1px;
|
||||
--docs-search-box-border-color: var(--sl-color-neutral-300);
|
||||
--docs-search-box-color: var(--sl-color-neutral-600);
|
||||
--docs-search-dialog-background: var(--sl-color-neutral-0);
|
||||
--docs-search-border-width: var(--docs-border-width);
|
||||
--docs-search-border-color: var(--docs-border-color);
|
||||
--docs-search-text-color: var(--sl-color-neutral-900);
|
||||
--docs-search-text-color-muted: var(--sl-color-neutral-500);
|
||||
--docs-search-font-weight-normal: var(--sl-font-weight-normal);
|
||||
--docs-search-font-weight-semibold: var(--sl-font-weight-semibold);
|
||||
--docs-search-border-radius: calc(2 * var(--docs-border-radius));
|
||||
--docs-search-accent-color: var(--sl-color-primary-600);
|
||||
--docs-search-icon-color: var(--sl-color-neutral-500);
|
||||
--docs-search-icon-color-active: var(--sl-color-neutral-600);
|
||||
--docs-search-shadow: var(--docs-shadow-x-large);
|
||||
--docs-search-result-background-hover: var(--sl-color-neutral-100);
|
||||
--docs-search-result-color-hover: var(--sl-color-neutral-900);
|
||||
--docs-search-result-background-active: var(--sl-color-primary-600);
|
||||
--docs-search-result-color-active: var(--sl-color-neutral-0);
|
||||
--docs-search-focus-ring: var(--sl-focus-ring);
|
||||
--docs-search-overlay-background: rgb(0 0 0 / 0.33);
|
||||
}
|
||||
|
||||
:root.sl-theme-dark {
|
||||
--docs-search-overlay-background: rgb(71 71 71 / 0.33);
|
||||
}
|
||||
|
||||
body.search-visible {
|
||||
padding-right: var(--docs-search-scroll-lock-size) !important;
|
||||
overflow: hidden !important;
|
||||
}
|
||||
|
||||
/* Search box */
|
||||
.search-box {
|
||||
flex: 1 1 auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
border: none;
|
||||
border-radius: 9999px;
|
||||
background: var(--docs-search-box-background);
|
||||
border: solid var(--docs-search-box-border-width) var(--docs-search-box-border-color);
|
||||
font: inherit;
|
||||
color: var(--docs-search-box-color);
|
||||
padding: 0.75rem 1rem;
|
||||
margin: var(--sl-spacing-large) 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.search-box span {
|
||||
flex: 1 1 auto;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
text-align: left;
|
||||
line-height: 1;
|
||||
margin: 0 0.75rem;
|
||||
}
|
||||
|
||||
.search-box:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.search-box:focus-visible {
|
||||
outline: var(--docs-search-focus-ring);
|
||||
}
|
||||
|
||||
/* Site search */
|
||||
.search {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.search[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.search__overlay {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: var(--docs-search-overlay-background);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.search__dialog {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-width: none;
|
||||
max-height: none;
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.search__dialog:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.search__dialog::backdrop {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Fixes an iOS Safari 16.4 bug that draws the parent element's border radius incorrectly when showing/hiding results */
|
||||
.search__header {
|
||||
background-color: var(--docs-search-dialog-background);
|
||||
border-radius: var(--docs-search-border-radius);
|
||||
}
|
||||
|
||||
.search--has-results .search__header {
|
||||
border-top-left-radius: var(--docs-search-border-radius);
|
||||
border-top-right-radius: var(--docs-search-border-radius);
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.search__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
max-height: calc(100vh - 20rem);
|
||||
background-color: var(--docs-search-dialog-background);
|
||||
border-radius: var(--docs-search-border-radius);
|
||||
box-shadow: var(--docs-search-shadow);
|
||||
padding: 0;
|
||||
margin: 10rem auto;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 900px) {
|
||||
.search__content {
|
||||
max-width: calc(100% - 2rem);
|
||||
max-height: calc(90svh);
|
||||
margin: 4vh 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.search__input-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.search__input-wrapper sl-icon {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
flex: 0 0 auto;
|
||||
color: var(--docs-search-icon-color);
|
||||
margin: 0 1.5rem;
|
||||
}
|
||||
|
||||
.search__clear-button {
|
||||
display: flex;
|
||||
background: none;
|
||||
border: none;
|
||||
font: inherit;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.search__clear-button[hidden] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.search__clear-button:active sl-icon {
|
||||
color: var(--docs-search-icon-color-active);
|
||||
}
|
||||
|
||||
.search__input {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
border: none;
|
||||
font: inherit;
|
||||
font-size: 1.5rem;
|
||||
font-weight: var(--docs-search-font-weight-normal);
|
||||
color: var(--docs-search-text-color);
|
||||
background: transparent;
|
||||
padding: 1rem 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.search__input::placeholder {
|
||||
color: var(--docs-search-text-color-muted);
|
||||
}
|
||||
|
||||
.search__input::-webkit-search-decoration,
|
||||
.search__input::-webkit-search-cancel-button,
|
||||
.search__input::-webkit-search-results-button,
|
||||
.search__input::-webkit-search-results-decoration {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.search__input:focus,
|
||||
.search__input:focus-visible {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.search__body {
|
||||
flex: 1 1 auto;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.search--has-results .search__body {
|
||||
border-top: solid var(--docs-search-border-width) var(--docs-search-border-color);
|
||||
}
|
||||
|
||||
.search__results {
|
||||
display: none;
|
||||
line-height: 1.2;
|
||||
list-style: none;
|
||||
padding: 0.5rem 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.search--has-results .search__results {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.search__results a {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
padding: 0.5rem 1.5rem;
|
||||
}
|
||||
|
||||
.search__results a:focus-visible {
|
||||
outline: var(--docs-search-focus-ring);
|
||||
}
|
||||
|
||||
.search__results li a:hover,
|
||||
.search__results li a:hover small {
|
||||
background-color: var(--docs-search-result-background-hover);
|
||||
color: var(--docs-search-result-color-hover);
|
||||
}
|
||||
|
||||
.search__results li[data-selected='true'] a,
|
||||
.search__results li[data-selected='true'] a * {
|
||||
outline: none;
|
||||
background-color: var(--docs-search-result-background-active);
|
||||
color: var(--docs-search-result-color-active);
|
||||
}
|
||||
|
||||
.search__results h3 {
|
||||
font-weight: var(--docs-search-font-weight-semibold);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.search__results small {
|
||||
display: block;
|
||||
color: var(--docs-search-text-color-muted);
|
||||
}
|
||||
|
||||
.search__result {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.search__result a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.search__result-icon {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
color: var(--docs-search-text-color-muted);
|
||||
}
|
||||
|
||||
.search__result-icon sl-icon {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.search__result__details {
|
||||
width: calc(100% - 3rem);
|
||||
}
|
||||
|
||||
.search__result-title,
|
||||
.search__result-description,
|
||||
.search__result-url {
|
||||
max-width: 400px;
|
||||
line-height: 1.3;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.search__result-title {
|
||||
font-size: 1.2rem;
|
||||
font-weight: var(--docs-search-font-weight-semibold);
|
||||
color: var(--docs-search-accent-color);
|
||||
}
|
||||
|
||||
.search__result-description {
|
||||
font-size: 0.875rem;
|
||||
color: var(--docs-search-text-color);
|
||||
}
|
||||
|
||||
.search__result-url {
|
||||
font-size: 0.875rem;
|
||||
color: var(--docs-search-text-color-muted);
|
||||
}
|
||||
|
||||
.search__empty {
|
||||
display: none;
|
||||
border-top: solid var(--docs-search-border-width) var(--docs-search-border-color);
|
||||
text-align: center;
|
||||
color: var(--docs-search-text-color-muted);
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
.search--no-results .search__empty {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.search__footer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
gap: 2rem;
|
||||
border-top: solid var(--docs-search-border-width) var(--docs-search-border-color);
|
||||
border-bottom-left-radius: inherit;
|
||||
border-bottom-right-radius: inherit;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.search__footer small {
|
||||
color: var(--docs-search-text-color-muted);
|
||||
}
|
||||
|
||||
.search__footer small kbd:last-of-type {
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 900px) {
|
||||
.search__footer {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
110
docs/docs.css
110
docs/docs.css
|
|
@ -1,110 +0,0 @@
|
|||
body {
|
||||
border-top: solid .3rem var(--color-primary);
|
||||
}
|
||||
|
||||
.body-wrap {
|
||||
max-width: 44rem;
|
||||
padding: 1rem;
|
||||
margin: 2rem auto;
|
||||
}
|
||||
|
||||
h1[id]:not(:first-child),
|
||||
h2[id]:not(:first-child),
|
||||
h3[id]:not(:first-child),
|
||||
h4[id]:not(:first-child) {
|
||||
margin-top: 3rem;
|
||||
}
|
||||
|
||||
h3[id],
|
||||
h4[id] {
|
||||
color: var(--color-gray);
|
||||
}
|
||||
|
||||
header {
|
||||
border-bottom: solid var(--component-border-width) var(--component-border-color);
|
||||
padding-bottom: var(--component-spacing);
|
||||
margin-bottom: var(--component-spacing-big);
|
||||
}
|
||||
|
||||
footer {
|
||||
border-top: solid var(--component-border-width) var(--component-border-color);
|
||||
text-align: center;
|
||||
padding-top: var(--component-spacing-big);
|
||||
margin-top: var(--component-spacing-big);
|
||||
}
|
||||
|
||||
h2[id] {
|
||||
border-bottom: solid var(--component-border-width) var(--component-border-color);
|
||||
padding-bottom: .25rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* Column helpers */
|
||||
.two-column {
|
||||
column-count: 2;
|
||||
column-gap: 2rem;
|
||||
}
|
||||
|
||||
@media (max-width: 50rem) {
|
||||
.two-column {
|
||||
column-count: 1;
|
||||
column-gap: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Sizing examples */
|
||||
.width-sizing-example {
|
||||
border: solid 1px var(--component-border-color);
|
||||
padding: 1rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.width-sizing-example div {
|
||||
background: var(--color-primary);
|
||||
color: white;
|
||||
text-align: center;
|
||||
padding: .25rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.width-sizing-example div:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.height-sizing-example {
|
||||
border: solid 1px var(--component-border-color);
|
||||
height: 15rem;
|
||||
padding: 1rem .5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.height-sizing-example div {
|
||||
width: calc(25% - 1rem);
|
||||
float: left;
|
||||
background: var(--color-primary);
|
||||
color: white;
|
||||
text-align: center;
|
||||
padding: .25rem;
|
||||
margin: 0 .5rem;
|
||||
}
|
||||
|
||||
/* Loader example */
|
||||
.loader-example div {
|
||||
float: left;
|
||||
width: 6rem;
|
||||
height: 6rem;
|
||||
border: dashed 1px var(--component-border-color);
|
||||
margin-right: .5rem;
|
||||
}
|
||||
|
||||
/* Tabs example */
|
||||
.tabs-vertical-example {
|
||||
display: grid;
|
||||
grid-template-columns: 25% 75%;
|
||||
grid-gap: 2rem;
|
||||
padding-right: 2rem;
|
||||
}
|
||||
|
||||
.tabs-vertical-example .tabs-nav a {
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -0,0 +1,246 @@
|
|||
/* eslint-disable no-invalid-this */
|
||||
const fs = require('fs');
|
||||
const path = require('path');
|
||||
const lunr = require('lunr');
|
||||
const { capitalCase } = require('change-case');
|
||||
const { JSDOM } = require('jsdom');
|
||||
const { customElementsManifest, getAllComponents } = require('./_utilities/cem.cjs');
|
||||
const shoelaceFlavoredMarkdown = require('./_utilities/markdown.cjs');
|
||||
const activeLinks = require('./_utilities/active-links.cjs');
|
||||
const anchorHeadings = require('./_utilities/anchor-headings.cjs');
|
||||
const codePreviews = require('./_utilities/code-previews.cjs');
|
||||
const copyCodeButtons = require('./_utilities/copy-code-buttons.cjs');
|
||||
const externalLinks = require('./_utilities/external-links.cjs');
|
||||
const highlightCodeBlocks = require('./_utilities/highlight-code.cjs');
|
||||
const tableOfContents = require('./_utilities/table-of-contents.cjs');
|
||||
const prettier = require('./_utilities/prettier.cjs');
|
||||
const scrollingTables = require('./_utilities/scrolling-tables.cjs');
|
||||
const typography = require('./_utilities/typography.cjs');
|
||||
const replacer = require('./_utilities/replacer.cjs');
|
||||
|
||||
const assetsDir = 'assets';
|
||||
const cdndir = 'cdn';
|
||||
const npmdir = 'dist';
|
||||
const allComponents = getAllComponents();
|
||||
let hasBuiltSearchIndex = false;
|
||||
|
||||
module.exports = function (eleventyConfig) {
|
||||
//
|
||||
// Global data
|
||||
//
|
||||
eleventyConfig.addGlobalData('baseUrl', 'https://shoelace.style/'); // the production URL
|
||||
eleventyConfig.addGlobalData('layout', 'default'); // make 'default' the default layout
|
||||
eleventyConfig.addGlobalData('toc', true); // enable the table of contents
|
||||
eleventyConfig.addGlobalData('meta', {
|
||||
title: 'Shoelace',
|
||||
description: 'A forward-thinking library of web components.',
|
||||
image: 'images/og-image.png',
|
||||
version: customElementsManifest.package.version,
|
||||
components: allComponents,
|
||||
cdndir,
|
||||
npmdir
|
||||
});
|
||||
|
||||
//
|
||||
// Layout aliases
|
||||
//
|
||||
eleventyConfig.addLayoutAlias('default', 'default.njk');
|
||||
|
||||
//
|
||||
// Copy assets
|
||||
//
|
||||
eleventyConfig.addPassthroughCopy(assetsDir);
|
||||
eleventyConfig.setServerPassthroughCopyBehavior('passthrough'); // emulates passthrough copy during --serve
|
||||
|
||||
//
|
||||
// Functions
|
||||
//
|
||||
|
||||
// Generates a URL relative to the site's root
|
||||
eleventyConfig.addNunjucksGlobal('rootUrl', (value = '', absolute = false) => {
|
||||
value = path.join('/', value);
|
||||
return absolute ? new URL(value, eleventyConfig.globalData.baseUrl).toString() : value;
|
||||
});
|
||||
|
||||
// Generates a URL relative to the site's asset directory
|
||||
eleventyConfig.addNunjucksGlobal('assetUrl', (value = '', absolute = false) => {
|
||||
value = path.join(`/${assetsDir}`, value);
|
||||
return absolute ? new URL(value, eleventyConfig.globalData.baseUrl).toString() : value;
|
||||
});
|
||||
|
||||
// Fetches a specific component's metadata
|
||||
eleventyConfig.addNunjucksGlobal('getComponent', tagName => {
|
||||
const component = allComponents.find(c => c.tagName === tagName);
|
||||
if (!component) {
|
||||
throw new Error(
|
||||
`Unable to find a component called "${tagName}". Make sure the file name is the same as the component's tag ` +
|
||||
`name (minus the sl- prefix).`
|
||||
);
|
||||
}
|
||||
return component;
|
||||
});
|
||||
|
||||
//
|
||||
// Custom markdown syntaxes
|
||||
//
|
||||
eleventyConfig.setLibrary('md', shoelaceFlavoredMarkdown);
|
||||
|
||||
//
|
||||
// Filters
|
||||
//
|
||||
eleventyConfig.addFilter('markdown', content => {
|
||||
return shoelaceFlavoredMarkdown.render(content);
|
||||
});
|
||||
|
||||
eleventyConfig.addFilter('markdownInline', content => {
|
||||
return shoelaceFlavoredMarkdown.renderInline(content);
|
||||
});
|
||||
|
||||
// Trims whitespace and pipes from the start and end of a string. Useful for CEM types, which can be pipe-delimited.
|
||||
// With Prettier 3, this means a leading pipe will exist if the line wraps.
|
||||
eleventyConfig.addFilter('trimPipes', content => {
|
||||
return typeof content === 'string' ? content.replace(/^(\s|\|)/g, '').replace(/(\s|\|)$/g, '') : content;
|
||||
});
|
||||
|
||||
eleventyConfig.addFilter('classNameToComponentName', className => {
|
||||
let name = capitalCase(className.replace(/^Sl/, ''));
|
||||
if (name === 'Qr Code') name = 'QR Code'; // manual override
|
||||
return name;
|
||||
});
|
||||
|
||||
eleventyConfig.addFilter('removeSlPrefix', tagName => {
|
||||
return tagName.replace(/^sl-/, '');
|
||||
});
|
||||
|
||||
//
|
||||
// Transforms
|
||||
//
|
||||
eleventyConfig.addTransform('html-transform', function (rawContent) {
|
||||
let content = replacer(rawContent, [
|
||||
{ pattern: '%VERSION%', replacement: customElementsManifest.package.version },
|
||||
{ pattern: '%CDNDIR%', replacement: cdndir },
|
||||
{ pattern: '%NPMDIR%', replacement: npmdir }
|
||||
]);
|
||||
|
||||
// Parse the template and get a Document object
|
||||
const doc = new JSDOM(content, {
|
||||
// We must set a default URL so links are parsed with a hostname. Let's use a bogus TLD so we can easily
|
||||
// identify which ones are internal and which ones are external.
|
||||
url: `https://internal/`
|
||||
}).window.document;
|
||||
|
||||
// DOM transforms
|
||||
activeLinks(doc, { pathname: this.page.url });
|
||||
anchorHeadings(doc, {
|
||||
within: '#content .content__body',
|
||||
levels: ['h2', 'h3', 'h4', 'h5']
|
||||
});
|
||||
tableOfContents(doc, {
|
||||
levels: ['h2', 'h3'],
|
||||
container: '#content .content__toc > ul',
|
||||
within: '#content .content__body'
|
||||
});
|
||||
codePreviews(doc);
|
||||
externalLinks(doc, { target: '_blank' });
|
||||
highlightCodeBlocks(doc);
|
||||
scrollingTables(doc);
|
||||
copyCodeButtons(doc); // must be after codePreviews + highlightCodeBlocks
|
||||
typography(doc, '#content');
|
||||
|
||||
// Serialize the Document object to an HTML string and prepend the doctype
|
||||
content = `<!DOCTYPE html>\n${doc.documentElement.outerHTML}`;
|
||||
|
||||
// String transforms
|
||||
content = prettier(content);
|
||||
|
||||
return content;
|
||||
});
|
||||
|
||||
//
|
||||
// Build a search index
|
||||
//
|
||||
eleventyConfig.on('eleventy.after', ({ results }) => {
|
||||
// We only want to build the search index on the first run so all pages get indexed.
|
||||
if (hasBuiltSearchIndex) {
|
||||
return;
|
||||
}
|
||||
|
||||
const map = {};
|
||||
const searchIndexFilename = path.join(eleventyConfig.dir.output, assetsDir, 'search.json');
|
||||
const lunrInput = path.resolve('../node_modules/lunr/lunr.min.js');
|
||||
const lunrOutput = path.join(eleventyConfig.dir.output, assetsDir, 'scripts/lunr.js');
|
||||
const searchIndex = lunr(function () {
|
||||
// The search index uses these field names extensively, so shortening them can save some serious bytes. The
|
||||
// initial index file went from 468 KB => 401 KB by using single-character names!
|
||||
this.ref('id'); // id
|
||||
this.field('t', { boost: 50 }); // title
|
||||
this.field('h', { boost: 25 }); // headings
|
||||
this.field('c'); // content
|
||||
|
||||
results.forEach((result, index) => {
|
||||
const url = path
|
||||
.join('/', path.relative(eleventyConfig.dir.output, result.outputPath))
|
||||
.replace(/\\/g, '/') // convert backslashes to forward slashes
|
||||
.replace(/\/index.html$/, '/'); // convert trailing /index.html to /
|
||||
const doc = new JSDOM(result.content, {
|
||||
// We must set a default URL so links are parsed with a hostname. Let's use a bogus TLD so we can easily
|
||||
// identify which ones are internal and which ones are external.
|
||||
url: `https://internal/`
|
||||
}).window.document;
|
||||
const content = doc.querySelector('#content');
|
||||
|
||||
// Get title and headings
|
||||
const title = (doc.querySelector('title')?.textContent || path.basename(result.outputPath)).trim();
|
||||
const headings = [...content.querySelectorAll('h1, h2, h3, h4')]
|
||||
.map(heading => heading.textContent)
|
||||
.join(' ')
|
||||
.replace(/\s+/g, ' ')
|
||||
.trim();
|
||||
|
||||
// Remove code blocks and whitespace from content
|
||||
[...content.querySelectorAll('code[class|=language]')].forEach(code => code.remove());
|
||||
const textContent = content.textContent.replace(/\s+/g, ' ').trim();
|
||||
|
||||
// Update the index and map
|
||||
this.add({ id: index, t: title, h: headings, c: textContent });
|
||||
map[index] = { title, url };
|
||||
});
|
||||
});
|
||||
|
||||
// Copy the Lunr search client and write the index
|
||||
fs.mkdirSync(path.dirname(lunrOutput), { recursive: true });
|
||||
fs.copyFileSync(lunrInput, lunrOutput);
|
||||
fs.writeFileSync(searchIndexFilename, JSON.stringify({ searchIndex, map }), 'utf-8');
|
||||
|
||||
hasBuiltSearchIndex = true;
|
||||
});
|
||||
|
||||
//
|
||||
// Send a signal to stdout that let's the build know we've reached this point
|
||||
//
|
||||
eleventyConfig.on('eleventy.after', () => {
|
||||
console.log('[eleventy.after]');
|
||||
});
|
||||
|
||||
//
|
||||
// Dev server options (see https://www.11ty.dev/docs/dev-server/#options)
|
||||
//
|
||||
eleventyConfig.setServerOptions({
|
||||
domDiff: false, // disable dom diffing so custom elements don't break on reload,
|
||||
port: 4000, // if port 4000 is taken, 11ty will use the next one available
|
||||
watch: ['cdn/**/*'] // additional files to watch that will trigger server updates (array of paths or globs)
|
||||
});
|
||||
|
||||
//
|
||||
// 11ty config
|
||||
//
|
||||
return {
|
||||
dir: {
|
||||
input: 'pages',
|
||||
output: '../_site',
|
||||
includes: '../_includes' // resolved relative to the input dir
|
||||
},
|
||||
markdownTemplateEngine: 'njk', // use Nunjucks instead of Liquid for markdown files
|
||||
templateEngineOverride: ['njk'] // just Nunjucks and then markdown
|
||||
};
|
||||
};
|
||||
1259
docs/index.html
1259
docs/index.html
Plik diff jest za duży
Load Diff
|
|
@ -0,0 +1,19 @@
|
|||
---
|
||||
meta:
|
||||
title: Page Not Found
|
||||
description: "The page you were looking for couldn't be found."
|
||||
permalink: 404.html
|
||||
toc: false
|
||||
---
|
||||
|
||||
<div style="text-align: center;">
|
||||
|
||||
# Page Not Found
|
||||
|
||||
|
||||
|
||||
The page you were looking for couldn't be found.
|
||||
|
||||
Press [[/]] to search, or [head back to the homepage](/).
|
||||
|
||||
</div>
|
||||
|
|
@ -0,0 +1,443 @@
|
|||
---
|
||||
meta:
|
||||
title: Alert
|
||||
description: Alerts are used to display important messages inline or as toast notifications.
|
||||
layout: component
|
||||
---
|
||||
|
||||
```html:preview
|
||||
<sl-alert open>
|
||||
<sl-icon slot="icon" name="info-circle"></sl-icon>
|
||||
This is a standard alert. You can customize its content and even the icon.
|
||||
</sl-alert>
|
||||
```
|
||||
|
||||
```jsx:react
|
||||
import SlAlert from '@shoelace-style/shoelace/dist/react/alert';
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
|
||||
|
||||
const App = () => (
|
||||
<SlAlert open>
|
||||
<SlIcon slot="icon" name="info-circle" />
|
||||
This is a standard alert. You can customize its content and even the icon.
|
||||
</SlAlert>
|
||||
);
|
||||
```
|
||||
|
||||
:::tip
|
||||
Alerts will not be visible if the `open` attribute is not present.
|
||||
:::
|
||||
|
||||
## Examples
|
||||
|
||||
### Variants
|
||||
|
||||
Set the `variant` attribute to change the alert's variant.
|
||||
|
||||
```html:preview
|
||||
<sl-alert variant="primary" open>
|
||||
<sl-icon slot="icon" name="info-circle"></sl-icon>
|
||||
<strong>This is super informative</strong><br />
|
||||
You can tell by how pretty the alert is.
|
||||
</sl-alert>
|
||||
|
||||
<br />
|
||||
|
||||
<sl-alert variant="success" open>
|
||||
<sl-icon slot="icon" name="check2-circle"></sl-icon>
|
||||
<strong>Your changes have been saved</strong><br />
|
||||
You can safely exit the app now.
|
||||
</sl-alert>
|
||||
|
||||
<br />
|
||||
|
||||
<sl-alert variant="neutral" open>
|
||||
<sl-icon slot="icon" name="gear"></sl-icon>
|
||||
<strong>Your settings have been updated</strong><br />
|
||||
Settings will take effect on next login.
|
||||
</sl-alert>
|
||||
|
||||
<br />
|
||||
|
||||
<sl-alert variant="warning" open>
|
||||
<sl-icon slot="icon" name="exclamation-triangle"></sl-icon>
|
||||
<strong>Your session has ended</strong><br />
|
||||
Please login again to continue.
|
||||
</sl-alert>
|
||||
|
||||
<br />
|
||||
|
||||
<sl-alert variant="danger" open>
|
||||
<sl-icon slot="icon" name="exclamation-octagon"></sl-icon>
|
||||
<strong>Your account has been deleted</strong><br />
|
||||
We're very sorry to see you go!
|
||||
</sl-alert>
|
||||
```
|
||||
|
||||
```jsx:react
|
||||
import SlAlert from '@shoelace-style/shoelace/dist/react/alert';
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlAlert variant="primary" open>
|
||||
<SlIcon slot="icon" name="info-circle" />
|
||||
<strong>This is super informative</strong>
|
||||
<br />
|
||||
You can tell by how pretty the alert is.
|
||||
</SlAlert>
|
||||
|
||||
<br />
|
||||
|
||||
<SlAlert variant="success" open>
|
||||
<SlIcon slot="icon" name="check2-circle" />
|
||||
<strong>Your changes have been saved</strong>
|
||||
<br />
|
||||
You can safely exit the app now.
|
||||
</SlAlert>
|
||||
|
||||
<br />
|
||||
|
||||
<SlAlert variant="neutral" open>
|
||||
<SlIcon slot="icon" name="gear" />
|
||||
<strong>Your settings have been updated</strong>
|
||||
<br />
|
||||
Settings will take effect on next login.
|
||||
</SlAlert>
|
||||
|
||||
<br />
|
||||
|
||||
<SlAlert variant="warning" open>
|
||||
<SlIcon slot="icon" name="exclamation-triangle" />
|
||||
<strong>Your session has ended</strong>
|
||||
<br />
|
||||
Please login again to continue.
|
||||
</SlAlert>
|
||||
|
||||
<br />
|
||||
|
||||
<SlAlert variant="danger" open>
|
||||
<SlIcon slot="icon" name="exclamation-octagon" />
|
||||
<strong>Your account has been deleted</strong>
|
||||
<br />
|
||||
We're very sorry to see you go!
|
||||
</SlAlert>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### Closable
|
||||
|
||||
Add the `closable` attribute to show a close button that will hide the alert.
|
||||
|
||||
```html:preview
|
||||
<sl-alert variant="primary" open closable class="alert-closable">
|
||||
<sl-icon slot="icon" name="info-circle"></sl-icon>
|
||||
You can close this alert any time!
|
||||
</sl-alert>
|
||||
|
||||
<script>
|
||||
const alert = document.querySelector('.alert-closable');
|
||||
alert.addEventListener('sl-after-hide', () => {
|
||||
setTimeout(() => (alert.open = true), 2000);
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
```jsx:react
|
||||
import { useState } from 'react';
|
||||
import SlAlert from '@shoelace-style/shoelace/dist/react/alert';
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
|
||||
|
||||
const App = () => {
|
||||
const [open, setOpen] = useState(true);
|
||||
|
||||
function handleHide() {
|
||||
setOpen(false);
|
||||
setTimeout(() => setOpen(true), 2000);
|
||||
}
|
||||
|
||||
return (
|
||||
<SlAlert open={open} closable onSlAfterHide={handleHide}>
|
||||
<SlIcon slot="icon" name="info-circle" />
|
||||
You can close this alert any time!
|
||||
</SlAlert>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### Without Icons
|
||||
|
||||
Icons are optional. Simply omit the `icon` slot if you don't want them.
|
||||
|
||||
```html:preview
|
||||
<sl-alert variant="primary" open> Nothing fancy here, just a simple alert. </sl-alert>
|
||||
```
|
||||
|
||||
```jsx:react
|
||||
import SlAlert from '@shoelace-style/shoelace/dist/react/alert';
|
||||
|
||||
const App = () => (
|
||||
<SlAlert variant="primary" open>
|
||||
Nothing fancy here, just a simple alert.
|
||||
</SlAlert>
|
||||
);
|
||||
```
|
||||
|
||||
### Duration
|
||||
|
||||
Set the `duration` attribute to automatically hide an alert after a period of time. This is useful for alerts that don't require acknowledgement.
|
||||
|
||||
```html:preview
|
||||
<div class="alert-duration">
|
||||
<sl-button variant="primary">Show Alert</sl-button>
|
||||
|
||||
<sl-alert variant="primary" duration="3000" closable>
|
||||
<sl-icon slot="icon" name="info-circle"></sl-icon>
|
||||
This alert will automatically hide itself after three seconds, unless you interact with it.
|
||||
</sl-alert>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const container = document.querySelector('.alert-duration');
|
||||
const button = container.querySelector('sl-button');
|
||||
const alert = container.querySelector('sl-alert');
|
||||
|
||||
button.addEventListener('click', () => alert.show());
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.alert-duration sl-alert {
|
||||
margin-top: var(--sl-spacing-medium);
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
```jsx:react
|
||||
import { useState } from 'react';
|
||||
import SlAlert from '@shoelace-style/shoelace/dist/react/alert';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
|
||||
|
||||
const css = `
|
||||
.alert-duration sl-alert {
|
||||
margin-top: var(--sl-spacing-medium);
|
||||
}
|
||||
`;
|
||||
|
||||
const App = () => {
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="alert-duration">
|
||||
<SlButton variant="primary" onClick={() => setOpen(true)}>
|
||||
Show Alert
|
||||
</SlButton>
|
||||
|
||||
<SlAlert variant="primary" duration="3000" open={open} closable onSlAfterHide={() => setOpen(false)}>
|
||||
<SlIcon slot="icon" name="info-circle" />
|
||||
This alert will automatically hide itself after three seconds, unless you interact with it.
|
||||
</SlAlert>
|
||||
</div>
|
||||
|
||||
<style>{css}</style>
|
||||
</>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### Toast Notifications
|
||||
|
||||
To display an alert as a toast notification, or "toast", create the alert and call its `toast()` method. This will move the alert out of its position in the DOM and into [the toast stack](#the-toast-stack) where it will be shown. Once dismissed, it will be removed from the DOM completely. To reuse a toast, store a reference to it and call `toast()` again later on.
|
||||
|
||||
You should always use the `closable` attribute so users can dismiss the notification. It's also common to set a reasonable `duration` when the notification doesn't require acknowledgement.
|
||||
|
||||
```html:preview
|
||||
<div class="alert-toast">
|
||||
<sl-button variant="primary">Primary</sl-button>
|
||||
<sl-button variant="success">Success</sl-button>
|
||||
<sl-button variant="neutral">Neutral</sl-button>
|
||||
<sl-button variant="warning">Warning</sl-button>
|
||||
<sl-button variant="danger">Danger</sl-button>
|
||||
|
||||
<sl-alert variant="primary" duration="3000" closable>
|
||||
<sl-icon slot="icon" name="info-circle"></sl-icon>
|
||||
<strong>This is super informative</strong><br />
|
||||
You can tell by how pretty the alert is.
|
||||
</sl-alert>
|
||||
|
||||
<sl-alert variant="success" duration="3000" closable>
|
||||
<sl-icon slot="icon" name="check2-circle"></sl-icon>
|
||||
<strong>Your changes have been saved</strong><br />
|
||||
You can safely exit the app now.
|
||||
</sl-alert>
|
||||
|
||||
<sl-alert variant="neutral" duration="3000" closable>
|
||||
<sl-icon slot="icon" name="gear"></sl-icon>
|
||||
<strong>Your settings have been updated</strong><br />
|
||||
Settings will take effect on next login.
|
||||
</sl-alert>
|
||||
|
||||
<sl-alert variant="warning" duration="3000" closable>
|
||||
<sl-icon slot="icon" name="exclamation-triangle"></sl-icon>
|
||||
<strong>Your session has ended</strong><br />
|
||||
Please login again to continue.
|
||||
</sl-alert>
|
||||
|
||||
<sl-alert variant="danger" duration="3000" closable>
|
||||
<sl-icon slot="icon" name="exclamation-octagon"></sl-icon>
|
||||
<strong>Your account has been deleted</strong><br />
|
||||
We're very sorry to see you go!
|
||||
</sl-alert>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const container = document.querySelector('.alert-toast');
|
||||
|
||||
['primary', 'success', 'neutral', 'warning', 'danger'].map(variant => {
|
||||
const button = container.querySelector(`sl-button[variant="${variant}"]`);
|
||||
const alert = container.querySelector(`sl-alert[variant="${variant}"]`);
|
||||
|
||||
button.addEventListener('click', () => alert.toast());
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
```jsx:react
|
||||
import { useRef } from 'react';
|
||||
import SlAlert from '@shoelace-style/shoelace/dist/react/alert';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
|
||||
|
||||
function showToast(alert) {
|
||||
alert.toast();
|
||||
}
|
||||
|
||||
const App = () => {
|
||||
const primary = useRef(null);
|
||||
const success = useRef(null);
|
||||
const neutral = useRef(null);
|
||||
const warning = useRef(null);
|
||||
const danger = useRef(null);
|
||||
|
||||
return (
|
||||
<>
|
||||
<SlButton variant="primary" onClick={() => primary.current.toast()}>
|
||||
Primary
|
||||
</SlButton>
|
||||
|
||||
<SlButton variant="success" onClick={() => success.current.toast()}>
|
||||
Success
|
||||
</SlButton>
|
||||
|
||||
<SlButton variant="neutral" onClick={() => neutral.current.toast()}>
|
||||
Neutral
|
||||
</SlButton>
|
||||
|
||||
<SlButton variant="warning" onClick={() => warning.current.toast()}>
|
||||
Warning
|
||||
</SlButton>
|
||||
|
||||
<SlButton variant="danger" onClick={() => danger.current.toast()}>
|
||||
Danger
|
||||
</SlButton>
|
||||
|
||||
<SlAlert ref={primary} variant="primary" duration="3000" closable>
|
||||
<SlIcon slot="icon" name="info-circle" />
|
||||
<strong>This is super informative</strong>
|
||||
<br />
|
||||
You can tell by how pretty the alert is.
|
||||
</SlAlert>
|
||||
|
||||
<SlAlert ref={success} variant="success" duration="3000" closable>
|
||||
<SlIcon slot="icon" name="check2-circle" />
|
||||
<strong>Your changes have been saved</strong>
|
||||
<br />
|
||||
You can safely exit the app now.
|
||||
</SlAlert>
|
||||
|
||||
<SlAlert ref={neutral} variant="neutral" duration="3000" closable>
|
||||
<SlIcon slot="icon" name="gear" />
|
||||
<strong>Your settings have been updated</strong>
|
||||
<br />
|
||||
Settings will take effect on next login.
|
||||
</SlAlert>
|
||||
|
||||
<SlAlert ref={warning} variant="warning" duration="3000" closable>
|
||||
<SlIcon slot="icon" name="exclamation-triangle" />
|
||||
<strong>Your session has ended</strong>
|
||||
<br />
|
||||
Please login again to continue.
|
||||
</SlAlert>
|
||||
|
||||
<SlAlert ref={danger} variant="danger" duration="3000" closable>
|
||||
<SlIcon slot="icon" name="exclamation-octagon" />
|
||||
<strong>Your account has been deleted</strong>
|
||||
<br />
|
||||
We're very sorry to see you go!
|
||||
</SlAlert>
|
||||
</>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### Creating Toasts Imperatively
|
||||
|
||||
For convenience, you can create a utility that emits toast notifications with a function call rather than composing them in your HTML. To do this, generate the alert with JavaScript, append it to the body, and call the `toast()` method as shown in the example below.
|
||||
|
||||
```html:preview
|
||||
<div class="alert-toast-wrapper">
|
||||
<sl-button variant="primary">Create Toast</sl-button>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const container = document.querySelector('.alert-toast-wrapper');
|
||||
const button = container.querySelector('sl-button');
|
||||
let count = 0;
|
||||
|
||||
// Always escape HTML for text arguments!
|
||||
function escapeHtml(html) {
|
||||
const div = document.createElement('div');
|
||||
div.textContent = html;
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
// Custom function to emit toast notifications
|
||||
function notify(message, variant = 'primary', icon = 'info-circle', duration = 3000) {
|
||||
const alert = Object.assign(document.createElement('sl-alert'), {
|
||||
variant,
|
||||
closable: true,
|
||||
duration: duration,
|
||||
innerHTML: `
|
||||
<sl-icon name="${icon}" slot="icon"></sl-icon>
|
||||
${escapeHtml(message)}
|
||||
`
|
||||
});
|
||||
|
||||
document.body.append(alert);
|
||||
return alert.toast();
|
||||
}
|
||||
|
||||
button.addEventListener('click', () => {
|
||||
notify(`This is custom toast #${++count}`);
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
### The Toast Stack
|
||||
|
||||
The toast stack is a fixed position singleton element created and managed internally by the alert component. It will be added and removed from the DOM as needed when toasts are shown. When more than one toast is visible, they will stack vertically in the toast stack.
|
||||
|
||||
By default, the toast stack is positioned at the top-right of the viewport. You can change its position by targeting `.sl-toast-stack` in your stylesheet. To make toasts appear at the top-left of the viewport, for example, use the following styles.
|
||||
|
||||
```css
|
||||
.sl-toast-stack {
|
||||
left: 0;
|
||||
right: auto;
|
||||
}
|
||||
```
|
||||
|
||||
:::tip
|
||||
By design, it is not possible to show toasts in more than one stack simultaneously. Such behavior is confusing and makes for a poor user experience.
|
||||
:::
|
||||
|
|
@ -0,0 +1,130 @@
|
|||
---
|
||||
meta:
|
||||
title: Animated Image
|
||||
description: A component for displaying animated GIFs and WEBPs that play and pause on interaction.
|
||||
layout: component
|
||||
---
|
||||
|
||||
```html:preview
|
||||
<sl-animated-image
|
||||
src="https://shoelace.style/assets/images/walk.gif"
|
||||
alt="Animation of untied shoes walking on pavement"
|
||||
></sl-animated-image>
|
||||
```
|
||||
|
||||
```jsx:react
|
||||
import SlAnimatedImage from '@shoelace-style/shoelace/dist/react/animated-image';
|
||||
|
||||
const App = () => (
|
||||
<SlAnimatedImage
|
||||
src="https://shoelace.style/assets/images/walk.gif"
|
||||
alt="Animation of untied shoes walking on pavement"
|
||||
/>
|
||||
);
|
||||
```
|
||||
|
||||
:::tip
|
||||
This component uses `<canvas>` to draw freeze frames, so images are subject to [cross-origin restrictions](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image).
|
||||
:::
|
||||
|
||||
## Examples
|
||||
|
||||
### WEBP Images
|
||||
|
||||
Both GIF and WEBP images are supported.
|
||||
|
||||
```html:preview
|
||||
<sl-animated-image
|
||||
src="https://shoelace.style/assets/images/tie.webp"
|
||||
alt="Animation of a shoe being tied"
|
||||
></sl-animated-image>
|
||||
```
|
||||
|
||||
```jsx:react
|
||||
import SlAnimatedImage from '@shoelace-style/shoelace/dist/react/animated-image';
|
||||
|
||||
const App = () => (
|
||||
<SlAnimatedImage src="https://shoelace.style/assets/images/tie.webp" alt="Animation of a shoe being tied" />
|
||||
);
|
||||
```
|
||||
|
||||
### Setting a Width and Height
|
||||
|
||||
To set a custom size, apply a width and/or height to the host element.
|
||||
|
||||
```html:preview
|
||||
<sl-animated-image
|
||||
src="https://shoelace.style/assets/images/walk.gif"
|
||||
alt="Animation of untied shoes walking on pavement"
|
||||
style="width: 150px; height: 200px;"
|
||||
>
|
||||
</sl-animated-image>
|
||||
```
|
||||
|
||||
{% raw %}
|
||||
|
||||
```jsx:react
|
||||
import SlAnimatedImage from '@shoelace-style/shoelace/dist/react/animated-image';
|
||||
|
||||
const App = () => (
|
||||
<SlAnimatedImage
|
||||
src="https://shoelace.style/assets/images/walk.gif"
|
||||
alt="Animation of untied shoes walking on pavement"
|
||||
style={{ width: '150px', height: '200px' }}
|
||||
/>
|
||||
);
|
||||
```
|
||||
|
||||
{% endraw %}
|
||||
|
||||
### Customizing the Control Box
|
||||
|
||||
You can change the appearance and location of the control box by targeting the `control-box` part in your styles.
|
||||
|
||||
```html:preview
|
||||
<sl-animated-image
|
||||
src="https://shoelace.style/assets/images/walk.gif"
|
||||
alt="Animation of untied shoes walking on pavement"
|
||||
class="animated-image-custom-control-box"
|
||||
></sl-animated-image>
|
||||
|
||||
<style>
|
||||
.animated-image-custom-control-box::part(control-box) {
|
||||
top: auto;
|
||||
right: auto;
|
||||
bottom: 1rem;
|
||||
left: 1rem;
|
||||
background-color: deeppink;
|
||||
border: none;
|
||||
color: pink;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
```jsx:react
|
||||
import SlAnimatedImage from '@shoelace-style/shoelace/dist/react/animated-image';
|
||||
|
||||
const css = `
|
||||
.animated-image-custom-control-box::part(control-box) {
|
||||
top: auto;
|
||||
right: auto;
|
||||
bottom: 1rem;
|
||||
left: 1rem;
|
||||
background-color: deeppink;
|
||||
border: none;
|
||||
color: pink;
|
||||
}
|
||||
`;
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlAnimatedImage
|
||||
className="animated-image-custom-control-box"
|
||||
src="https://shoelace.style/assets/images/walk.gif"
|
||||
alt="Animation of untied shoes walking on pavement"
|
||||
/>
|
||||
|
||||
<style>{css}</style>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
|
@ -0,0 +1,348 @@
|
|||
---
|
||||
meta:
|
||||
title: Animation
|
||||
description: Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes.
|
||||
layout: component
|
||||
---
|
||||
|
||||
To animate an element, wrap it in `<sl-animation>` and set an animation `name`. The animation will not start until you add the `play` attribute. Refer to the [properties table](#properties) for a list of all animation options.
|
||||
|
||||
```html:preview
|
||||
<div class="animation-overview">
|
||||
<sl-animation name="bounce" duration="2000" play><div class="box"></div></sl-animation>
|
||||
<sl-animation name="jello" duration="2000" play><div class="box"></div></sl-animation>
|
||||
<sl-animation name="heartBeat" duration="2000" play><div class="box"></div></sl-animation>
|
||||
<sl-animation name="flip" duration="2000" play><div class="box"></div></sl-animation>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.animation-overview .box {
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: var(--sl-color-primary-600);
|
||||
margin: 1.5rem;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
```jsx:react
|
||||
import SlAnimation from '@shoelace-style/shoelace/dist/react/animation';
|
||||
|
||||
const css = `
|
||||
.animation-overview .box {
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: var(--sl-color-primary-600);
|
||||
margin: 1.5rem;
|
||||
}
|
||||
`;
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<div class="animation-overview">
|
||||
<SlAnimation name="bounce" duration={2000} play>
|
||||
<div class="box" />
|
||||
</SlAnimation>
|
||||
<SlAnimation name="jello" duration={2000} play>
|
||||
<div class="box" />
|
||||
</SlAnimation>
|
||||
<SlAnimation name="heartBeat" duration={2000} play>
|
||||
<div class="box" />
|
||||
</SlAnimation>
|
||||
<SlAnimation name="flip" duration={2000} play>
|
||||
<div class="box" />
|
||||
</SlAnimation>
|
||||
</div>
|
||||
|
||||
<style>{css}</style>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
:::tip
|
||||
The animation will only be applied to the first child element found in `<sl-animation>`.
|
||||
:::
|
||||
|
||||
## Examples
|
||||
|
||||
### Animations & Easings
|
||||
|
||||
This example demonstrates all of the baked-in animations and easings. Animations are based on those found in the popular [Animate.css](https://animate.style/) library.
|
||||
|
||||
```html:preview
|
||||
<div class="animation-sandbox">
|
||||
<sl-animation name="bounce" easing="ease-in-out" duration="2000" play>
|
||||
<div class="box"></div>
|
||||
</sl-animation>
|
||||
|
||||
<div class="controls">
|
||||
<sl-select label="Animation" value="bounce"></sl-select>
|
||||
<sl-select label="Easing" value="linear"></sl-select>
|
||||
<sl-input label="Playback Rate" type="number" min="0" max="2" step=".25" value="1"></sl-input>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
import { getAnimationNames, getEasingNames } from '/dist/utilities/animation.js';
|
||||
|
||||
const container = document.querySelector('.animation-sandbox');
|
||||
const animation = container.querySelector('sl-animation');
|
||||
const animationName = container.querySelector('.controls sl-select:nth-child(1)');
|
||||
const easingName = container.querySelector('.controls sl-select:nth-child(2)');
|
||||
const playbackRate = container.querySelector('sl-input[type="number"]');
|
||||
const animations = getAnimationNames();
|
||||
const easings = getEasingNames();
|
||||
|
||||
animations.map(name => {
|
||||
const option = Object.assign(document.createElement('sl-option'), {
|
||||
textContent: name,
|
||||
value: name
|
||||
});
|
||||
animationName.appendChild(option);
|
||||
});
|
||||
|
||||
easings.map(name => {
|
||||
const option = Object.assign(document.createElement('sl-option'), {
|
||||
textContent: name,
|
||||
value: name
|
||||
});
|
||||
easingName.appendChild(option);
|
||||
});
|
||||
|
||||
animationName.addEventListener('sl-change', () => (animation.name = animationName.value));
|
||||
easingName.addEventListener('sl-change', () => (animation.easing = easingName.value));
|
||||
playbackRate.addEventListener('sl-input', () => (animation.playbackRate = playbackRate.value));
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.animation-sandbox .box {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: var(--sl-color-primary-600);
|
||||
}
|
||||
|
||||
.animation-sandbox .controls {
|
||||
max-width: 300px;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.animation-sandbox .controls sl-select {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### Using Intersection Observer
|
||||
|
||||
Use an [Intersection Observer](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API) to control the animation when an element enters or exits the viewport. For example, scroll the box below in and out of your screen. The animation stops when the box exits the viewport and restarts each time it enters the viewport.
|
||||
|
||||
```html:preview
|
||||
<div class="animation-scroll">
|
||||
<sl-animation name="jackInTheBox" duration="2000" iterations="1"><div class="box"></div></sl-animation>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const container = document.querySelector('.animation-scroll');
|
||||
const animation = container.querySelector('sl-animation');
|
||||
const box = animation.querySelector('.box');
|
||||
|
||||
// Watch for the box to enter and exit the viewport. Note that we're observing the box, not the animation element!
|
||||
const observer = new IntersectionObserver(entries => {
|
||||
if (entries[0].isIntersecting) {
|
||||
// Start the animation when the box enters the viewport
|
||||
animation.play = true;
|
||||
} else {
|
||||
animation.play = false;
|
||||
animation.currentTime = 0;
|
||||
}
|
||||
});
|
||||
observer.observe(box);
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.animation-scroll .box {
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: var(--sl-color-primary-600);
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
```jsx:react
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import SlAnimation from '@shoelace-style/shoelace/dist/react/animation';
|
||||
|
||||
const css = `
|
||||
.animation-scroll {
|
||||
height: calc(100vh + 100px);
|
||||
}
|
||||
|
||||
.animation-scroll .box {
|
||||
display: inline-block;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: var(--sl-color-primary-600);
|
||||
}
|
||||
`;
|
||||
|
||||
const App = () => {
|
||||
const animation = useRef(null);
|
||||
const box = useRef(null);
|
||||
|
||||
useEffect(() => {
|
||||
const observer = new IntersectionObserver(entries => {
|
||||
if (entries[0].isIntersecting) {
|
||||
animation.current.play = true;
|
||||
} else {
|
||||
animation.current.play = false;
|
||||
animation.current.currentTime = 0;
|
||||
}
|
||||
});
|
||||
|
||||
if (box.current) {
|
||||
observer.observe(box.current);
|
||||
}
|
||||
}, [box]);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div class="animation-scroll">
|
||||
<SlAnimation ref={animation} name="jackInTheBox" duration={2000} iterations={1}>
|
||||
<div ref={box} class="box" />
|
||||
</SlAnimation>
|
||||
</div>
|
||||
|
||||
<style>{css}</style>
|
||||
</>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
### Custom Keyframe Formats
|
||||
|
||||
Supply your own [keyframe formats](https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API/Keyframe_Formats) to build custom animations.
|
||||
|
||||
```html:preview
|
||||
<div class="animation-keyframes">
|
||||
<sl-animation easing="ease-in-out" duration="2000" play>
|
||||
<div class="box"></div>
|
||||
</sl-animation>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const animation = document.querySelector('.animation-keyframes sl-animation');
|
||||
animation.keyframes = [
|
||||
{
|
||||
offset: 0,
|
||||
easing: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)',
|
||||
fillMode: 'both',
|
||||
transformOrigin: 'center center',
|
||||
transform: 'rotate(0)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
easing: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)',
|
||||
fillMode: 'both',
|
||||
transformOrigin: 'center center',
|
||||
transform: 'rotate(90deg)'
|
||||
}
|
||||
];
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.animation-keyframes .box {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: var(--sl-color-primary-600);
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
```jsx:react
|
||||
import SlAnimation from '@shoelace-style/shoelace/dist/react/animation';
|
||||
|
||||
const css = `
|
||||
.animation-keyframes .box {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-color: var(--sl-color-primary-600);
|
||||
}
|
||||
`;
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<div class="animation-keyframes">
|
||||
<SlAnimation
|
||||
easing="ease-in-out"
|
||||
duration={2000}
|
||||
play
|
||||
keyframes={[
|
||||
{
|
||||
offset: 0,
|
||||
easing: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)',
|
||||
fillMode: 'both',
|
||||
transformOrigin: 'center center',
|
||||
transform: 'rotate(0)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
easing: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)',
|
||||
fillMode: 'both',
|
||||
transformOrigin: 'center center',
|
||||
transform: 'rotate(90deg)'
|
||||
}
|
||||
]}
|
||||
>
|
||||
<div class="box" />
|
||||
</SlAnimation>
|
||||
</div>
|
||||
|
||||
<style>{css}</style>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### Playing Animations on Demand
|
||||
|
||||
Animations won't play until you apply the `play` attribute. You can omit it initially, then apply it on demand such as after a user interaction. In this example, the button will animate once every time the button is clicked.
|
||||
|
||||
```html:preview
|
||||
<div class="animation-form">
|
||||
<sl-animation name="rubberBand" duration="1000" iterations="1">
|
||||
<sl-button variant="primary">Click me</sl-button>
|
||||
</sl-animation>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const container = document.querySelector('.animation-form');
|
||||
const animation = container.querySelector('sl-animation');
|
||||
const button = container.querySelector('sl-button');
|
||||
|
||||
button.addEventListener('click', () => {
|
||||
animation.play = true;
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
```jsx:react
|
||||
import { useState } from 'react';
|
||||
import SlAnimation from '@shoelace-style/shoelace/dist/react/animation';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
|
||||
const App = () => {
|
||||
const [play, setPlay] = useState(false);
|
||||
|
||||
return (
|
||||
<div class="animation-form">
|
||||
<SlAnimation name="rubberBand" duration={1000} iterations={1} play={play} onSlFinish={() => setPlay(false)}>
|
||||
<SlButton variant="primary" onClick={() => setPlay(true)}>
|
||||
Click me
|
||||
</SlButton>
|
||||
</SlAnimation>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
|
@ -0,0 +1,210 @@
|
|||
---
|
||||
meta:
|
||||
title: Avatar
|
||||
description: Avatars are used to represent a person or object.
|
||||
layout: component
|
||||
---
|
||||
|
||||
By default, a generic icon will be shown. You can personalize avatars by adding custom icons, initials, and images. You should always provide a `label` for assistive devices.
|
||||
|
||||
```html:preview
|
||||
<sl-avatar label="User avatar"></sl-avatar>
|
||||
```
|
||||
|
||||
```jsx:react
|
||||
import SlAvatar from '@shoelace-style/shoelace/dist/react/avatar';
|
||||
|
||||
const App = () => <SlAvatar label="User avatar" />;
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
### Images
|
||||
|
||||
To use an image for the avatar, set the `image` and `label` attributes. This will take priority and be shown over initials and icons.
|
||||
Avatar images can be lazily loaded by setting the `loading` attribute to `lazy`.
|
||||
|
||||
```html:preview
|
||||
<sl-avatar
|
||||
image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80"
|
||||
label="Avatar of a gray tabby kitten looking down"
|
||||
></sl-avatar>
|
||||
<sl-avatar
|
||||
image="https://images.unsplash.com/photo-1591871937573-74dbba515c4c?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80"
|
||||
label="Avatar of a white and grey kitten on grey textile"
|
||||
loading="lazy"
|
||||
></sl-avatar>
|
||||
```
|
||||
|
||||
```jsx:react
|
||||
import SlAvatar from '@shoelace-style/shoelace/dist/react/avatar';
|
||||
|
||||
const App = () => (
|
||||
<SlAvatar
|
||||
image="https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80"
|
||||
label="Avatar of a gray tabby kitten looking down"
|
||||
/>
|
||||
<SlAvatar
|
||||
image="https://images.unsplash.com/photo-1591871937573-74dbba515c4c?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80"
|
||||
label="Avatar of a white and grey kitten on grey textile"
|
||||
loading="lazy"
|
||||
/>
|
||||
);
|
||||
```
|
||||
|
||||
### Initials
|
||||
|
||||
When you don't have an image to use, you can set the `initials` attribute to show something more personalized than an icon.
|
||||
|
||||
```html:preview
|
||||
<sl-avatar initials="SL" label="Avatar with initials: SL"></sl-avatar>
|
||||
```
|
||||
|
||||
```jsx:react
|
||||
import SlAvatar from '@shoelace-style/shoelace/dist/react/avatar';
|
||||
|
||||
const App = () => <SlAvatar initials="SL" label="Avatar with initials: SL" />;
|
||||
```
|
||||
|
||||
### Custom Icons
|
||||
|
||||
When no image or initials are set, an icon will be shown. The default avatar shows a generic "user" icon, but you can customize this with the `icon` slot.
|
||||
|
||||
```html:preview
|
||||
<sl-avatar label="Avatar with an image icon">
|
||||
<sl-icon slot="icon" name="image"></sl-icon>
|
||||
</sl-avatar>
|
||||
|
||||
<sl-avatar label="Avatar with an archive icon">
|
||||
<sl-icon slot="icon" name="archive"></sl-icon>
|
||||
</sl-avatar>
|
||||
|
||||
<sl-avatar label="Avatar with a briefcase icon">
|
||||
<sl-icon slot="icon" name="briefcase"></sl-icon>
|
||||
</sl-avatar>
|
||||
```
|
||||
|
||||
```jsx:react
|
||||
import SlAvatar from '@shoelace-style/shoelace/dist/react/avatar';
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlAvatar label="Avatar with an image icon">
|
||||
<SlIcon slot="icon" name="image" />
|
||||
</SlAvatar>
|
||||
|
||||
<SlAvatar label="Avatar with an archive icon">
|
||||
<SlIcon slot="icon" name="archive" />
|
||||
</SlAvatar>
|
||||
|
||||
<SlAvatar label="Avatar with a briefcase icon">
|
||||
<SlIcon slot="icon" name="briefcase" />
|
||||
</SlAvatar>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### Shapes
|
||||
|
||||
Avatars can be shaped using the `shape` attribute.
|
||||
|
||||
```html:preview
|
||||
<sl-avatar shape="square" label="Square avatar"></sl-avatar>
|
||||
<sl-avatar shape="rounded" label="Rounded avatar"></sl-avatar>
|
||||
<sl-avatar shape="circle" label="Circle avatar"></sl-avatar>
|
||||
```
|
||||
|
||||
```jsx:react
|
||||
import SlAvatar from '@shoelace-style/shoelace/dist/react/avatar';
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlAvatar shape="square" label="Square avatar" />
|
||||
<SlAvatar shape="rounded" label="Rounded avatar" />
|
||||
<SlAvatar shape="circle" label="Circle avatar" />
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### Avatar Groups
|
||||
|
||||
You can group avatars with a few lines of CSS.
|
||||
|
||||
```html:preview
|
||||
<div class="avatar-group">
|
||||
<sl-avatar
|
||||
image="https://images.unsplash.com/photo-1490150028299-bf57d78394e0?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&q=80&crop=right"
|
||||
label="Avatar 1 of 4"
|
||||
></sl-avatar>
|
||||
|
||||
<sl-avatar
|
||||
image="https://images.unsplash.com/photo-1503454537195-1dcabb73ffb9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&crop=left&q=80"
|
||||
label="Avatar 2 of 4"
|
||||
></sl-avatar>
|
||||
|
||||
<sl-avatar
|
||||
image="https://images.unsplash.com/photo-1456439663599-95b042d50252?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&crop=left&q=80"
|
||||
label="Avatar 3 of 4"
|
||||
></sl-avatar>
|
||||
|
||||
<sl-avatar
|
||||
image="https://images.unsplash.com/flagged/photo-1554078875-e37cb8b0e27d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&crop=top&q=80"
|
||||
label="Avatar 4 of 4"
|
||||
></sl-avatar>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.avatar-group sl-avatar:not(:first-of-type) {
|
||||
margin-left: -1rem;
|
||||
}
|
||||
|
||||
.avatar-group sl-avatar::part(base) {
|
||||
border: solid 2px var(--sl-color-neutral-0);
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
```jsx:react
|
||||
import SlAvatar from '@shoelace-style/shoelace/dist/react/avatar';
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
|
||||
|
||||
const css = `
|
||||
.avatar-group sl-avatar:not(:first-of-type) {
|
||||
margin-left: -1rem;
|
||||
}
|
||||
|
||||
.avatar-group sl-avatar::part(base) {
|
||||
border: solid 2px var(--sl-color-neutral-0);
|
||||
}
|
||||
`;
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<div className="avatar-group">
|
||||
<SlAvatar
|
||||
image="https://images.unsplash.com/photo-1490150028299-bf57d78394e0?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&q=80&crop=right"
|
||||
label="Avatar 1 of 4"
|
||||
/>
|
||||
|
||||
<SlAvatar
|
||||
image="https://images.unsplash.com/photo-1503454537195-1dcabb73ffb9?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&crop=left&q=80"
|
||||
label="Avatar 2 of 4"
|
||||
/>
|
||||
|
||||
<SlAvatar
|
||||
image="https://images.unsplash.com/photo-1456439663599-95b042d50252?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&crop=left&q=80"
|
||||
label="Avatar 3 of 4"
|
||||
/>
|
||||
|
||||
<SlAvatar
|
||||
image="https://images.unsplash.com/flagged/photo-1554078875-e37cb8b0e27d?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=256&h=256&crop=top&q=80"
|
||||
label="Avatar 4 of 4"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<style>{css}</style>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
|
@ -0,0 +1,235 @@
|
|||
---
|
||||
meta:
|
||||
title: Badge
|
||||
description: Badges are used to draw attention and display statuses or counts.
|
||||
layout: component
|
||||
---
|
||||
|
||||
```html:preview
|
||||
<sl-badge>Badge</sl-badge>
|
||||
```
|
||||
|
||||
```jsx:react
|
||||
import SlBadge from '@shoelace-style/shoelace/dist/react/badge';
|
||||
|
||||
const App = () => <SlBadge>Badge</SlBadge>;
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
### Variants
|
||||
|
||||
Set the `variant` attribute to change the badge's variant.
|
||||
|
||||
```html:preview
|
||||
<sl-badge variant="primary">Primary</sl-badge>
|
||||
<sl-badge variant="success">Success</sl-badge>
|
||||
<sl-badge variant="neutral">Neutral</sl-badge>
|
||||
<sl-badge variant="warning">Warning</sl-badge>
|
||||
<sl-badge variant="danger">Danger</sl-badge>
|
||||
```
|
||||
|
||||
```jsx:react
|
||||
import SlBadge from '@shoelace-style/shoelace/dist/react/badge';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlBadge variant="primary">Primary</SlBadge>
|
||||
<SlBadge variant="success">Success</SlBadge>
|
||||
<SlBadge variant="neutral">Neutral</SlBadge>
|
||||
<SlBadge variant="warning">Warning</SlBadge>
|
||||
<SlBadge variant="danger">Danger</SlBadge>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### Pill Badges
|
||||
|
||||
Use the `pill` attribute to give badges rounded edges.
|
||||
|
||||
```html:preview
|
||||
<sl-badge variant="primary" pill>Primary</sl-badge>
|
||||
<sl-badge variant="success" pill>Success</sl-badge>
|
||||
<sl-badge variant="neutral" pill>Neutral</sl-badge>
|
||||
<sl-badge variant="warning" pill>Warning</sl-badge>
|
||||
<sl-badge variant="danger" pill>Danger</sl-badge>
|
||||
```
|
||||
|
||||
```jsx:react
|
||||
import SlBadge from '@shoelace-style/shoelace/dist/react/badge';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlBadge variant="primary" pill>
|
||||
Primary
|
||||
</SlBadge>
|
||||
<SlBadge variant="success" pill>
|
||||
Success
|
||||
</SlBadge>
|
||||
<SlBadge variant="neutral" pill>
|
||||
Neutral
|
||||
</SlBadge>
|
||||
<SlBadge variant="warning" pill>
|
||||
Warning
|
||||
</SlBadge>
|
||||
<SlBadge variant="danger" pill>
|
||||
Danger
|
||||
</SlBadge>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### Pulsating Badges
|
||||
|
||||
Use the `pulse` attribute to draw attention to the badge with a subtle animation.
|
||||
|
||||
```html:preview
|
||||
<div class="badge-pulse">
|
||||
<sl-badge variant="primary" pill pulse>1</sl-badge>
|
||||
<sl-badge variant="success" pill pulse>1</sl-badge>
|
||||
<sl-badge variant="neutral" pill pulse>1</sl-badge>
|
||||
<sl-badge variant="warning" pill pulse>1</sl-badge>
|
||||
<sl-badge variant="danger" pill pulse>1</sl-badge>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.badge-pulse sl-badge:not(:last-of-type) {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
```jsx:react
|
||||
import SlBadge from '@shoelace-style/shoelace/dist/react/badge';
|
||||
|
||||
const css = `
|
||||
.badge-pulse sl-badge:not(:last-of-type) {
|
||||
margin-right: 1rem;
|
||||
}
|
||||
`;
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<div className="badge-pulse">
|
||||
<SlBadge variant="primary" pill pulse>
|
||||
1
|
||||
</SlBadge>
|
||||
<SlBadge variant="success" pill pulse>
|
||||
1
|
||||
</SlBadge>
|
||||
<SlBadge variant="neutral" pill pulse>
|
||||
1
|
||||
</SlBadge>
|
||||
<SlBadge variant="warning" pill pulse>
|
||||
1
|
||||
</SlBadge>
|
||||
<SlBadge variant="danger" pill pulse>
|
||||
1
|
||||
</SlBadge>
|
||||
</div>
|
||||
|
||||
<style>{css}</style>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### With Buttons
|
||||
|
||||
One of the most common use cases for badges is attaching them to buttons. To make this easier, badges will be automatically positioned at the top-right when they're a child of a button.
|
||||
|
||||
```html:preview
|
||||
<sl-button>
|
||||
Requests
|
||||
<sl-badge pill>30</sl-badge>
|
||||
</sl-button>
|
||||
|
||||
<sl-button style="margin-inline-start: 1rem;">
|
||||
Warnings
|
||||
<sl-badge variant="warning" pill>8</sl-badge>
|
||||
</sl-button>
|
||||
|
||||
<sl-button style="margin-inline-start: 1rem;">
|
||||
Errors
|
||||
<sl-badge variant="danger" pill>6</sl-badge>
|
||||
</sl-button>
|
||||
```
|
||||
|
||||
{% raw %}
|
||||
|
||||
```jsx:react
|
||||
import SlBadge from '@shoelace-style/shoelace/dist/react/badge';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlButton>
|
||||
Requests
|
||||
<SlBadge pill>30</SlBadge>
|
||||
</SlButton>
|
||||
|
||||
<SlButton style={{ marginInlineStart: '1rem' }}>
|
||||
Warnings
|
||||
<SlBadge variant="warning" pill>
|
||||
8
|
||||
</SlBadge>
|
||||
</SlButton>
|
||||
|
||||
<SlButton style={{ marginInlineStart: '1rem' }}>
|
||||
Errors
|
||||
<SlBadge variant="danger" pill>
|
||||
6
|
||||
</SlBadge>
|
||||
</SlButton>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
{% endraw %}
|
||||
|
||||
### With Menu Items
|
||||
|
||||
When including badges in menu items, use the `suffix` slot to make sure they're aligned correctly.
|
||||
|
||||
```html:preview
|
||||
<sl-menu style="max-width: 240px;">
|
||||
<sl-menu-label>Messages</sl-menu-label>
|
||||
<sl-menu-item>Comments <sl-badge slot="suffix" variant="neutral" pill>4</sl-badge></sl-menu-item>
|
||||
<sl-menu-item>Replies <sl-badge slot="suffix" variant="neutral" pill>12</sl-badge></sl-menu-item>
|
||||
</sl-menu>
|
||||
```
|
||||
|
||||
{% raw %}
|
||||
|
||||
```jsx:react
|
||||
import SlBadge from '@shoelace-style/shoelace/dist/react/badge';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
import SlMenu from '@shoelace-style/shoelace/dist/react/menu';
|
||||
import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
|
||||
import SlMenuLabel from '@shoelace-style/shoelace/dist/react/menu-label';
|
||||
|
||||
const App = () => (
|
||||
<SlMenu
|
||||
style={{
|
||||
maxWidth: '240px',
|
||||
border: 'solid 1px var(--sl-panel-border-color)',
|
||||
borderRadius: 'var(--sl-border-radius-medium)'
|
||||
}}
|
||||
>
|
||||
<SlMenuLabel>Messages</SlMenuLabel>
|
||||
<SlMenuItem>
|
||||
Comments
|
||||
<SlBadge slot="suffix" variant="neutral" pill>
|
||||
4
|
||||
</SlBadge>
|
||||
</SlMenuItem>
|
||||
<SlMenuItem>
|
||||
Replies
|
||||
<SlBadge slot="suffix" variant="neutral" pill>
|
||||
12
|
||||
</SlBadge>
|
||||
</SlMenuItem>
|
||||
</SlMenu>
|
||||
);
|
||||
```
|
||||
|
||||
{% endraw %}
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
---
|
||||
meta:
|
||||
title: Breadcrumb Item
|
||||
description: Breadcrumb Items are used inside breadcrumbs to represent different links.
|
||||
layout: component
|
||||
---
|
||||
|
||||
```html:preview
|
||||
<sl-breadcrumb>
|
||||
<sl-breadcrumb-item>
|
||||
<sl-icon slot="prefix" name="house"></sl-icon>
|
||||
Home
|
||||
</sl-breadcrumb-item>
|
||||
<sl-breadcrumb-item>Clothing</sl-breadcrumb-item>
|
||||
<sl-breadcrumb-item>Shirts</sl-breadcrumb-item>
|
||||
</sl-breadcrumb>
|
||||
```
|
||||
|
||||
```jsx:react
|
||||
import SlBreadcrumb from '@shoelace-style/shoelace/dist/react/breadcrumb';
|
||||
import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/breadcrumb-item';
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
|
||||
|
||||
const App = () => (
|
||||
<SlBreadcrumb>
|
||||
<SlBreadcrumbItem>
|
||||
<SlIcon slot="prefix" name="house"></SlIcon>
|
||||
Home
|
||||
</SlBreadcrumbItem>
|
||||
<SlBreadcrumbItem>Clothing</SlBreadcrumbItem>
|
||||
<SlBreadcrumbItem>Shirts</SlBreadcrumbItem>
|
||||
</SlBreadcrumb>
|
||||
);
|
||||
```
|
||||
|
||||
:::tip
|
||||
Additional demonstrations can be found in the [breadcrumb examples](/components/breadcrumb).
|
||||
:::
|
||||
|
|
@ -0,0 +1,258 @@
|
|||
---
|
||||
meta:
|
||||
title: Breadcrumb
|
||||
description: Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
|
||||
layout: component
|
||||
---
|
||||
|
||||
Breadcrumbs are usually placed before a page's main content with the current page shown last to indicate the user's position in the navigation.
|
||||
|
||||
```html:preview
|
||||
<sl-breadcrumb>
|
||||
<sl-breadcrumb-item>Catalog</sl-breadcrumb-item>
|
||||
<sl-breadcrumb-item>Clothing</sl-breadcrumb-item>
|
||||
<sl-breadcrumb-item>Women's</sl-breadcrumb-item>
|
||||
<sl-breadcrumb-item>Shirts & Tops</sl-breadcrumb-item>
|
||||
</sl-breadcrumb>
|
||||
```
|
||||
|
||||
```jsx:react
|
||||
import SlBreadcrumb from '@shoelace-style/shoelace/dist/react/breadcrumb';
|
||||
import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/breadcrumb-item';
|
||||
|
||||
const App = () => (
|
||||
<SlBreadcrumb>
|
||||
<SlBreadcrumbItem>Catalog</SlBreadcrumbItem>
|
||||
<SlBreadcrumbItem>Clothing</SlBreadcrumbItem>
|
||||
<SlBreadcrumbItem>Women's</SlBreadcrumbItem>
|
||||
<SlBreadcrumbItem>Shirts & Tops</SlBreadcrumbItem>
|
||||
</SlBreadcrumb>
|
||||
);
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
### Breadcrumb Links
|
||||
|
||||
By default, breadcrumb items are rendered as buttons so you can use them to navigate single-page applications. In this case, you'll need to add event listeners to handle clicks.
|
||||
|
||||
For websites, you'll probably want to use links instead. You can make any breadcrumb item a link by applying an `href` attribute to it. Now, when the user activates it, they'll be taken to the corresponding page — no event listeners required.
|
||||
|
||||
```html:preview
|
||||
<sl-breadcrumb>
|
||||
<sl-breadcrumb-item href="https://example.com/home">Homepage</sl-breadcrumb-item>
|
||||
|
||||
<sl-breadcrumb-item href="https://example.com/home/services">Our Services</sl-breadcrumb-item>
|
||||
|
||||
<sl-breadcrumb-item href="https://example.com/home/services/digital">Digital Media</sl-breadcrumb-item>
|
||||
|
||||
<sl-breadcrumb-item href="https://example.com/home/services/digital/web-design">Web Design</sl-breadcrumb-item>
|
||||
</sl-breadcrumb>
|
||||
```
|
||||
|
||||
```jsx:react
|
||||
import SlBreadcrumb from '@shoelace-style/shoelace/dist/react/breadcrumb';
|
||||
import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/breadcrumb-item';
|
||||
|
||||
const App = () => (
|
||||
<SlBreadcrumb>
|
||||
<SlBreadcrumbItem href="https://example.com/home">Homepage</SlBreadcrumbItem>
|
||||
|
||||
<SlBreadcrumbItem href="https://example.com/home/services">Our Services</SlBreadcrumbItem>
|
||||
|
||||
<SlBreadcrumbItem href="https://example.com/home/services/digital">Digital Media</SlBreadcrumbItem>
|
||||
|
||||
<SlBreadcrumbItem href="https://example.com/home/services/digital/web-design">Web Design</SlBreadcrumbItem>
|
||||
</SlBreadcrumb>
|
||||
);
|
||||
```
|
||||
|
||||
### Custom Separators
|
||||
|
||||
Use the `separator` slot to change the separator that goes between breadcrumb items. Icons work well, but you can also use text or an image.
|
||||
|
||||
```html:preview
|
||||
<sl-breadcrumb>
|
||||
<sl-icon name="dot" slot="separator"></sl-icon>
|
||||
<sl-breadcrumb-item>First</sl-breadcrumb-item>
|
||||
<sl-breadcrumb-item>Second</sl-breadcrumb-item>
|
||||
<sl-breadcrumb-item>Third</sl-breadcrumb-item>
|
||||
</sl-breadcrumb>
|
||||
|
||||
<br />
|
||||
|
||||
<sl-breadcrumb>
|
||||
<sl-icon name="arrow-right" slot="separator"></sl-icon>
|
||||
<sl-breadcrumb-item>First</sl-breadcrumb-item>
|
||||
<sl-breadcrumb-item>Second</sl-breadcrumb-item>
|
||||
<sl-breadcrumb-item>Third</sl-breadcrumb-item>
|
||||
</sl-breadcrumb>
|
||||
|
||||
<br />
|
||||
|
||||
<sl-breadcrumb>
|
||||
<span slot="separator">/</span>
|
||||
<sl-breadcrumb-item>First</sl-breadcrumb-item>
|
||||
<sl-breadcrumb-item>Second</sl-breadcrumb-item>
|
||||
<sl-breadcrumb-item>Third</sl-breadcrumb-item>
|
||||
</sl-breadcrumb>
|
||||
```
|
||||
|
||||
```jsx:react
|
||||
import '@shoelace-style/shoelace/dist/components/icon/icon.js';
|
||||
import SlBreadcrumb from '@shoelace-style/shoelace/dist/react/breadcrumb';
|
||||
import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/breadcrumb-item';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlBreadcrumb>
|
||||
<sl-icon name="dot" slot="separator" />
|
||||
<SlBreadcrumbItem>First</SlBreadcrumbItem>
|
||||
<SlBreadcrumbItem>Second</SlBreadcrumbItem>
|
||||
<SlBreadcrumbItem>Third</SlBreadcrumbItem>
|
||||
</SlBreadcrumb>
|
||||
|
||||
<br />
|
||||
|
||||
<SlBreadcrumb>
|
||||
<sl-icon name="arrow-right" slot="separator" />
|
||||
<SlBreadcrumbItem>First</SlBreadcrumbItem>
|
||||
<SlBreadcrumbItem>Second</SlBreadcrumbItem>
|
||||
<SlBreadcrumbItem>Third</SlBreadcrumbItem>
|
||||
</SlBreadcrumb>
|
||||
|
||||
<br />
|
||||
|
||||
<SlBreadcrumb>
|
||||
<span slot="separator">/</span>
|
||||
<SlBreadcrumbItem>First</SlBreadcrumbItem>
|
||||
<SlBreadcrumbItem>Second</SlBreadcrumbItem>
|
||||
<SlBreadcrumbItem>Third</SlBreadcrumbItem>
|
||||
</SlBreadcrumb>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### Prefixes
|
||||
|
||||
Use the `prefix` slot to add content before any breadcrumb item.
|
||||
|
||||
```html:preview
|
||||
<sl-breadcrumb>
|
||||
<sl-breadcrumb-item>
|
||||
<sl-icon slot="prefix" name="house"></sl-icon>
|
||||
Home
|
||||
</sl-breadcrumb-item>
|
||||
<sl-breadcrumb-item>Articles</sl-breadcrumb-item>
|
||||
<sl-breadcrumb-item>Traveling</sl-breadcrumb-item>
|
||||
</sl-breadcrumb>
|
||||
```
|
||||
|
||||
```jsx:react
|
||||
import SlBreadcrumb from '@shoelace-style/shoelace/dist/react/breadcrumb';
|
||||
import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/breadcrumb-item';
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
|
||||
|
||||
const App = () => (
|
||||
<SlBreadcrumb>
|
||||
<SlBreadcrumbItem>
|
||||
<SlIcon slot="prefix" name="house" />
|
||||
Home
|
||||
</SlBreadcrumbItem>
|
||||
<SlBreadcrumbItem>Articles</SlBreadcrumbItem>
|
||||
<SlBreadcrumbItem>Traveling</SlBreadcrumbItem>
|
||||
</SlBreadcrumb>
|
||||
);
|
||||
```
|
||||
|
||||
### Suffixes
|
||||
|
||||
Use the `suffix` slot to add content after any breadcrumb item.
|
||||
|
||||
```html:preview
|
||||
<sl-breadcrumb>
|
||||
<sl-breadcrumb-item>Documents</sl-breadcrumb-item>
|
||||
<sl-breadcrumb-item>Policies</sl-breadcrumb-item>
|
||||
<sl-breadcrumb-item>
|
||||
Security
|
||||
<sl-icon slot="suffix" name="shield-lock"></sl-icon>
|
||||
</sl-breadcrumb-item>
|
||||
</sl-breadcrumb>
|
||||
```
|
||||
|
||||
```jsx:react
|
||||
import SlBreadcrumb from '@shoelace-style/shoelace/dist/react/breadcrumb';
|
||||
import SlBreadcrumbItem from '@shoelace-style/shoelace/dist/react/breadcrumb-item';
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
|
||||
|
||||
const App = () => (
|
||||
<SlBreadcrumb>
|
||||
<SlBreadcrumbItem>Documents</SlBreadcrumbItem>
|
||||
<SlBreadcrumbItem>Policies</SlBreadcrumbItem>
|
||||
<SlBreadcrumbItem>
|
||||
Security
|
||||
<SlIcon slot="suffix" name="shield-lock"></SlIcon>
|
||||
</SlBreadcrumbItem>
|
||||
</SlBreadcrumb>
|
||||
);
|
||||
```
|
||||
|
||||
### With Dropdowns
|
||||
|
||||
Dropdown menus can be placed in a prefix or suffix slot to provide additional options.
|
||||
|
||||
```html:preview
|
||||
<sl-breadcrumb>
|
||||
<sl-breadcrumb-item>Homepage</sl-breadcrumb-item>
|
||||
<sl-breadcrumb-item>Our Services</sl-breadcrumb-item>
|
||||
<sl-breadcrumb-item>Digital Media</sl-breadcrumb-item>
|
||||
<sl-breadcrumb-item>
|
||||
Web Design
|
||||
<sl-dropdown slot="suffix">
|
||||
<sl-button slot="trigger" size="small" circle>
|
||||
<sl-icon label="More options" name="three-dots"></sl-icon>
|
||||
</sl-button>
|
||||
<sl-menu>
|
||||
<sl-menu-item type="checkbox" checked>Web Design</sl-menu-item>
|
||||
<sl-menu-item type="checkbox">Web Development</sl-menu-item>
|
||||
<sl-menu-item type="checkbox">Marketing</sl-menu-item>
|
||||
</sl-menu>
|
||||
</sl-dropdown>
|
||||
</sl-breadcrumb-item>
|
||||
</sl-breadcrumb>
|
||||
```
|
||||
|
||||
```jsx:react
|
||||
import {
|
||||
SlBreadcrumb,
|
||||
SlBreadcrumbItem,
|
||||
SlButton,
|
||||
SlDropdown,
|
||||
SlIcon,
|
||||
SlMenu,
|
||||
SlMenuItem
|
||||
} from '@shoelace-style/shoelace/dist/react';
|
||||
|
||||
const App = () => (
|
||||
<SlBreadcrumb>
|
||||
<SlBreadcrumbItem>Homepage</SlBreadcrumbItem>
|
||||
<SlBreadcrumbItem>Our Services</SlBreadcrumbItem>
|
||||
<SlBreadcrumbItem>Digital Media</SlBreadcrumbItem>
|
||||
<SlBreadcrumbItem>
|
||||
Web Design
|
||||
<SlDropdown slot="suffix">
|
||||
<SlButton slot="trigger" size="small" circle>
|
||||
<SlIcon label="More options" name="three-dots"></SlIcon>
|
||||
</SlButton>
|
||||
<SlMenu>
|
||||
<SlMenuItem type="checkbox" checked>
|
||||
Web Design
|
||||
</SlMenuItem>
|
||||
<SlMenuItem type="checkbox">Web Development</SlMenuItem>
|
||||
<SlMenuItem type="checkbox">Marketing</SlMenuItem>
|
||||
</SlMenu>
|
||||
</SlDropdown>
|
||||
</SlBreadcrumbItem>
|
||||
</SlBreadcrumb>
|
||||
);
|
||||
```
|
||||
|
|
@ -0,0 +1,511 @@
|
|||
---
|
||||
meta:
|
||||
title: Button Group
|
||||
description: Button groups can be used to group related buttons into sections.
|
||||
layout: component
|
||||
---
|
||||
|
||||
```html:preview
|
||||
<sl-button-group label="Alignment">
|
||||
<sl-button>Left</sl-button>
|
||||
<sl-button>Center</sl-button>
|
||||
<sl-button>Right</sl-button>
|
||||
</sl-button-group>
|
||||
```
|
||||
|
||||
```jsx:react
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
import SlButtonGroup from '@shoelace-style/shoelace/dist/react/button-group';
|
||||
|
||||
const App = () => (
|
||||
<SlButtonGroup label="Alignment">
|
||||
<SlButton>Left</SlButton>
|
||||
<SlButton>Center</SlButton>
|
||||
<SlButton>Right</SlButton>
|
||||
</SlButtonGroup>
|
||||
);
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
### Button Sizes
|
||||
|
||||
All button sizes are supported, but avoid mixing sizes within the same button group.
|
||||
|
||||
```html:preview
|
||||
<sl-button-group label="Alignment">
|
||||
<sl-button size="small">Left</sl-button>
|
||||
<sl-button size="small">Center</sl-button>
|
||||
<sl-button size="small">Right</sl-button>
|
||||
</sl-button-group>
|
||||
|
||||
<br /><br />
|
||||
|
||||
<sl-button-group label="Alignment">
|
||||
<sl-button size="medium">Left</sl-button>
|
||||
<sl-button size="medium">Center</sl-button>
|
||||
<sl-button size="medium">Right</sl-button>
|
||||
</sl-button-group>
|
||||
|
||||
<br /><br />
|
||||
|
||||
<sl-button-group label="Alignment">
|
||||
<sl-button size="large">Left</sl-button>
|
||||
<sl-button size="large">Center</sl-button>
|
||||
<sl-button size="large">Right</sl-button>
|
||||
</sl-button-group>
|
||||
```
|
||||
|
||||
```jsx:react
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
import SlButtonGroup from '@shoelace-style/shoelace/dist/react/button-group';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlButtonGroup label="Alignment">
|
||||
<SlButton size="small">Left</SlButton>
|
||||
<SlButton size="small">Center</SlButton>
|
||||
<SlButton size="small">Right</SlButton>
|
||||
</SlButtonGroup>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<SlButtonGroup label="Alignment">
|
||||
<SlButton size="medium">Left</SlButton>
|
||||
<SlButton size="medium">Center</SlButton>
|
||||
<SlButton size="medium">Right</SlButton>
|
||||
</SlButtonGroup>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<SlButtonGroup label="Alignment">
|
||||
<SlButton size="large">Left</SlButton>
|
||||
<SlButton size="large">Center</SlButton>
|
||||
<SlButton size="large">Right</SlButton>
|
||||
</SlButtonGroup>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### Theme Buttons
|
||||
|
||||
Theme buttons are supported through the button's `variant` attribute.
|
||||
|
||||
```html:preview
|
||||
<sl-button-group label="Alignment">
|
||||
<sl-button variant="primary">Left</sl-button>
|
||||
<sl-button variant="primary">Center</sl-button>
|
||||
<sl-button variant="primary">Right</sl-button>
|
||||
</sl-button-group>
|
||||
|
||||
<br /><br />
|
||||
|
||||
<sl-button-group label="Alignment">
|
||||
<sl-button variant="success">Left</sl-button>
|
||||
<sl-button variant="success">Center</sl-button>
|
||||
<sl-button variant="success">Right</sl-button>
|
||||
</sl-button-group>
|
||||
|
||||
<br /><br />
|
||||
|
||||
<sl-button-group label="Alignment">
|
||||
<sl-button variant="neutral">Left</sl-button>
|
||||
<sl-button variant="neutral">Center</sl-button>
|
||||
<sl-button variant="neutral">Right</sl-button>
|
||||
</sl-button-group>
|
||||
|
||||
<br /><br />
|
||||
|
||||
<sl-button-group label="Alignment">
|
||||
<sl-button variant="warning">Left</sl-button>
|
||||
<sl-button variant="warning">Center</sl-button>
|
||||
<sl-button variant="warning">Right</sl-button>
|
||||
</sl-button-group>
|
||||
|
||||
<br /><br />
|
||||
|
||||
<sl-button-group label="Alignment">
|
||||
<sl-button variant="danger">Left</sl-button>
|
||||
<sl-button variant="danger">Center</sl-button>
|
||||
<sl-button variant="danger">Right</sl-button>
|
||||
</sl-button-group>
|
||||
```
|
||||
|
||||
```jsx:react
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
import SlButtonGroup from '@shoelace-style/shoelace/dist/react/button-group';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlButtonGroup label="Alignment">
|
||||
<SlButton variant="primary">Left</SlButton>
|
||||
<SlButton variant="primary">Center</SlButton>
|
||||
<SlButton variant="primary">Right</SlButton>
|
||||
</SlButtonGroup>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<SlButtonGroup label="Alignment">
|
||||
<SlButton variant="success">Left</SlButton>
|
||||
<SlButton variant="success">Center</SlButton>
|
||||
<SlButton variant="success">Right</SlButton>
|
||||
</SlButtonGroup>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<SlButtonGroup label="Alignment">
|
||||
<SlButton variant="neutral">Left</SlButton>
|
||||
<SlButton variant="neutral">Center</SlButton>
|
||||
<SlButton variant="neutral">Right</SlButton>
|
||||
</SlButtonGroup>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<SlButtonGroup label="Alignment">
|
||||
<SlButton variant="warning">Left</SlButton>
|
||||
<SlButton variant="warning">Center</SlButton>
|
||||
<SlButton variant="warning">Right</SlButton>
|
||||
</SlButtonGroup>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<SlButtonGroup label="Alignment">
|
||||
<SlButton variant="danger">Left</SlButton>
|
||||
<SlButton variant="danger">Center</SlButton>
|
||||
<SlButton variant="danger">Right</SlButton>
|
||||
</SlButtonGroup>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### Pill Buttons
|
||||
|
||||
Pill buttons are supported through the button's `pill` attribute.
|
||||
|
||||
```html:preview
|
||||
<sl-button-group label="Alignment">
|
||||
<sl-button size="small" pill>Left</sl-button>
|
||||
<sl-button size="small" pill>Center</sl-button>
|
||||
<sl-button size="small" pill>Right</sl-button>
|
||||
</sl-button-group>
|
||||
|
||||
<br /><br />
|
||||
|
||||
<sl-button-group label="Alignment">
|
||||
<sl-button size="medium" pill>Left</sl-button>
|
||||
<sl-button size="medium" pill>Center</sl-button>
|
||||
<sl-button size="medium" pill>Right</sl-button>
|
||||
</sl-button-group>
|
||||
|
||||
<br /><br />
|
||||
|
||||
<sl-button-group label="Alignment">
|
||||
<sl-button size="large" pill>Left</sl-button>
|
||||
<sl-button size="large" pill>Center</sl-button>
|
||||
<sl-button size="large" pill>Right</sl-button>
|
||||
</sl-button-group>
|
||||
```
|
||||
|
||||
```jsx:react
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
import SlButtonGroup from '@shoelace-style/shoelace/dist/react/button-group';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlButtonGroup label="Alignment">
|
||||
<SlButton size="small" pill>
|
||||
Left
|
||||
</SlButton>
|
||||
<SlButton size="small" pill>
|
||||
Center
|
||||
</SlButton>
|
||||
<SlButton size="small" pill>
|
||||
Right
|
||||
</SlButton>
|
||||
</SlButtonGroup>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<SlButtonGroup label="Alignment">
|
||||
<SlButton size="medium" pill>
|
||||
Left
|
||||
</SlButton>
|
||||
<SlButton size="medium" pill>
|
||||
Center
|
||||
</SlButton>
|
||||
<SlButton size="medium" pill>
|
||||
Right
|
||||
</SlButton>
|
||||
</SlButtonGroup>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<SlButtonGroup label="Alignment">
|
||||
<SlButton size="large" pill>
|
||||
Left
|
||||
</SlButton>
|
||||
<SlButton size="large" pill>
|
||||
Center
|
||||
</SlButton>
|
||||
<SlButton size="large" pill>
|
||||
Right
|
||||
</SlButton>
|
||||
</SlButtonGroup>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### Dropdowns in Button Groups
|
||||
|
||||
Dropdowns can be placed inside button groups as long as the trigger is an `<sl-button>` element.
|
||||
|
||||
```html:preview
|
||||
<sl-button-group label="Example Button Group">
|
||||
<sl-button>Button</sl-button>
|
||||
<sl-button>Button</sl-button>
|
||||
<sl-dropdown>
|
||||
<sl-button slot="trigger" caret>Dropdown</sl-button>
|
||||
<sl-menu>
|
||||
<sl-menu-item>Item 1</sl-menu-item>
|
||||
<sl-menu-item>Item 2</sl-menu-item>
|
||||
<sl-menu-item>Item 3</sl-menu-item>
|
||||
</sl-menu>
|
||||
</sl-dropdown>
|
||||
</sl-button-group>
|
||||
```
|
||||
|
||||
```jsx:react
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
import SlButtonGroup from '@shoelace-style/shoelace/dist/react/button-group';
|
||||
import SlDropdown from '@shoelace-style/shoelace/dist/react/dropdown';
|
||||
import SlMenu from '@shoelace-style/shoelace/dist/react/menu';
|
||||
import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
|
||||
|
||||
const App = () => (
|
||||
<SlButtonGroup label="Example Button Group">
|
||||
<SlButton>Button</SlButton>
|
||||
<SlButton>Button</SlButton>
|
||||
<SlDropdown>
|
||||
<SlButton slot="trigger" caret>
|
||||
Dropdown
|
||||
</SlButton>
|
||||
<SlMenu>
|
||||
<SlMenuItem>Item 1</SlMenuItem>
|
||||
<SlMenuItem>Item 2</SlMenuItem>
|
||||
<SlMenuItem>Item 3</SlMenuItem>
|
||||
</SlMenu>
|
||||
</SlDropdown>
|
||||
</SlButtonGroup>
|
||||
);
|
||||
```
|
||||
|
||||
### Split Buttons
|
||||
|
||||
Create a split button using a button and a dropdown. Use a [visually hidden](/components/visually-hidden) label to ensure the dropdown is accessible to users with assistive devices.
|
||||
|
||||
```html:preview
|
||||
<sl-button-group label="Example Button Group">
|
||||
<sl-button variant="primary">Save</sl-button>
|
||||
<sl-dropdown placement="bottom-end">
|
||||
<sl-button slot="trigger" variant="primary" caret>
|
||||
<sl-visually-hidden>More options</sl-visually-hidden>
|
||||
</sl-button>
|
||||
<sl-menu>
|
||||
<sl-menu-item>Save</sl-menu-item>
|
||||
<sl-menu-item>Save as…</sl-menu-item>
|
||||
<sl-menu-item>Save all</sl-menu-item>
|
||||
</sl-menu>
|
||||
</sl-dropdown>
|
||||
</sl-button-group>
|
||||
```
|
||||
|
||||
```jsx:react
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
import SlButtonGroup from '@shoelace-style/shoelace/dist/react/button-group';
|
||||
import SlDropdown from '@shoelace-style/shoelace/dist/react/dropdown';
|
||||
import SlMenu from '@shoelace-style/shoelace/dist/react/menu';
|
||||
import SlMenuItem from '@shoelace-style/shoelace/dist/react/menu-item';
|
||||
|
||||
const App = () => (
|
||||
<SlButtonGroup label="Example Button Group">
|
||||
<SlButton variant="primary">Save</SlButton>
|
||||
<SlDropdown placement="bottom-end">
|
||||
<SlButton slot="trigger" variant="primary" caret></SlButton>
|
||||
<SlMenu>
|
||||
<SlMenuItem>Save</SlMenuItem>
|
||||
<SlMenuItem>Save as…</SlMenuItem>
|
||||
<SlMenuItem>Save all</SlMenuItem>
|
||||
</SlMenu>
|
||||
</SlDropdown>
|
||||
</SlButtonGroup>
|
||||
);
|
||||
```
|
||||
|
||||
### Tooltips in Button Groups
|
||||
|
||||
Buttons can be wrapped in tooltips to provide more detail when the user interacts with them.
|
||||
|
||||
```html:preview
|
||||
<sl-button-group label="Alignment">
|
||||
<sl-tooltip content="I'm on the left">
|
||||
<sl-button>Left</sl-button>
|
||||
</sl-tooltip>
|
||||
|
||||
<sl-tooltip content="I'm in the middle">
|
||||
<sl-button>Center</sl-button>
|
||||
</sl-tooltip>
|
||||
|
||||
<sl-tooltip content="I'm on the right">
|
||||
<sl-button>Right</sl-button>
|
||||
</sl-tooltip>
|
||||
</sl-button-group>
|
||||
```
|
||||
|
||||
```jsx:react
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
import SlButtonGroup from '@shoelace-style/shoelace/dist/react/button-group';
|
||||
import SlTooltip from '@shoelace-style/shoelace/dist/react/tooltip';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlButtonGroup label="Alignment">
|
||||
<SlTooltip content="I'm on the left">
|
||||
<SlButton>Left</SlButton>
|
||||
</SlTooltip>
|
||||
|
||||
<SlTooltip content="I'm in the middle">
|
||||
<SlButton>Center</SlButton>
|
||||
</SlTooltip>
|
||||
|
||||
<SlTooltip content="I'm on the right">
|
||||
<SlButton>Right</SlButton>
|
||||
</SlTooltip>
|
||||
</SlButtonGroup>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### Toolbar Example
|
||||
|
||||
Create interactive toolbars with button groups.
|
||||
|
||||
```html:preview
|
||||
<div class="button-group-toolbar">
|
||||
<sl-button-group label="History">
|
||||
<sl-tooltip content="Undo">
|
||||
<sl-button><sl-icon name="arrow-counterclockwise" label="Undo"></sl-icon></sl-button>
|
||||
</sl-tooltip>
|
||||
<sl-tooltip content="Redo">
|
||||
<sl-button><sl-icon name="arrow-clockwise" label="Redo"></sl-icon></sl-button>
|
||||
</sl-tooltip>
|
||||
</sl-button-group>
|
||||
|
||||
<sl-button-group label="Formatting">
|
||||
<sl-tooltip content="Bold">
|
||||
<sl-button><sl-icon name="type-bold" label="Bold"></sl-icon></sl-button>
|
||||
</sl-tooltip>
|
||||
<sl-tooltip content="Italic">
|
||||
<sl-button><sl-icon name="type-italic" label="Italic"></sl-icon></sl-button>
|
||||
</sl-tooltip>
|
||||
<sl-tooltip content="Underline">
|
||||
<sl-button><sl-icon name="type-underline" label="Underline"></sl-icon></sl-button>
|
||||
</sl-tooltip>
|
||||
</sl-button-group>
|
||||
|
||||
<sl-button-group label="Alignment">
|
||||
<sl-tooltip content="Align Left">
|
||||
<sl-button><sl-icon name="justify-left" label="Align Left"></sl-icon></sl-button>
|
||||
</sl-tooltip>
|
||||
<sl-tooltip content="Align Center">
|
||||
<sl-button><sl-icon name="justify" label="Align Center"></sl-icon></sl-button>
|
||||
</sl-tooltip>
|
||||
<sl-tooltip content="Align Right">
|
||||
<sl-button><sl-icon name="justify-right" label="Align Right"></sl-icon></sl-button>
|
||||
</sl-tooltip>
|
||||
</sl-button-group>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.button-group-toolbar sl-button-group:not(:last-of-type) {
|
||||
margin-right: var(--sl-spacing-x-small);
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
```jsx:react
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
import SlButtonGroup from '@shoelace-style/shoelace/dist/react/button-group';
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
|
||||
import SlTooltip from '@shoelace-style/shoelace/dist/react/tooltip';
|
||||
|
||||
const css = `
|
||||
.button-group-toolbar sl-button-group:not(:last-of-type) {
|
||||
margin-right: var(--sl-spacing-x-small);
|
||||
}
|
||||
`;
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<div className="button-group-toolbar">
|
||||
<SlButtonGroup label="History">
|
||||
<SlTooltip content="Undo">
|
||||
<SlButton>
|
||||
<SlIcon name="arrow-counterclockwise"></SlIcon>
|
||||
</SlButton>
|
||||
</SlTooltip>
|
||||
<SlTooltip content="Redo">
|
||||
<SlButton>
|
||||
<SlIcon name="arrow-clockwise"></SlIcon>
|
||||
</SlButton>
|
||||
</SlTooltip>
|
||||
</SlButtonGroup>
|
||||
|
||||
<SlButtonGroup label="Formatting">
|
||||
<SlTooltip content="Bold">
|
||||
<SlButton>
|
||||
<SlIcon name="type-bold"></SlIcon>
|
||||
</SlButton>
|
||||
</SlTooltip>
|
||||
<SlTooltip content="Italic">
|
||||
<SlButton>
|
||||
<SlIcon name="type-italic"></SlIcon>
|
||||
</SlButton>
|
||||
</SlTooltip>
|
||||
<SlTooltip content="Underline">
|
||||
<SlButton>
|
||||
<SlIcon name="type-underline"></SlIcon>
|
||||
</SlButton>
|
||||
</SlTooltip>
|
||||
</SlButtonGroup>
|
||||
|
||||
<SlButtonGroup label="Alignment">
|
||||
<SlTooltip content="Align Left">
|
||||
<SlButton>
|
||||
<SlIcon name="justify-left"></SlIcon>
|
||||
</SlButton>
|
||||
</SlTooltip>
|
||||
<SlTooltip content="Align Center">
|
||||
<SlButton>
|
||||
<SlIcon name="justify"></SlIcon>
|
||||
</SlButton>
|
||||
</SlTooltip>
|
||||
<SlTooltip content="Align Right">
|
||||
<SlButton>
|
||||
<SlIcon name="justify-right"></SlIcon>
|
||||
</SlButton>
|
||||
</SlTooltip>
|
||||
</SlButtonGroup>
|
||||
</div>
|
||||
|
||||
<style>{css}</style>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
|
@ -0,0 +1,545 @@
|
|||
---
|
||||
meta:
|
||||
title: Button
|
||||
description: Buttons represent actions that are available to the user.
|
||||
layout: component
|
||||
---
|
||||
|
||||
```html:preview
|
||||
<sl-button>Button</sl-button>
|
||||
```
|
||||
|
||||
```jsx:react
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
|
||||
const App = () => <SlButton>Button</SlButton>;
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
### Variants
|
||||
|
||||
Use the `variant` attribute to set the button's variant.
|
||||
|
||||
```html:preview
|
||||
<sl-button variant="default">Default</sl-button>
|
||||
<sl-button variant="primary">Primary</sl-button>
|
||||
<sl-button variant="success">Success</sl-button>
|
||||
<sl-button variant="neutral">Neutral</sl-button>
|
||||
<sl-button variant="warning">Warning</sl-button>
|
||||
<sl-button variant="danger">Danger</sl-button>
|
||||
```
|
||||
|
||||
```jsx:react
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlButton variant="default">Default</SlButton>
|
||||
<SlButton variant="primary">Primary</SlButton>
|
||||
<SlButton variant="success">Success</SlButton>
|
||||
<SlButton variant="neutral">Neutral</SlButton>
|
||||
<SlButton variant="warning">Warning</SlButton>
|
||||
<SlButton variant="danger">Danger</SlButton>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### Sizes
|
||||
|
||||
Use the `size` attribute to change a button's size.
|
||||
|
||||
```html:preview
|
||||
<sl-button size="small">Small</sl-button>
|
||||
<sl-button size="medium">Medium</sl-button>
|
||||
<sl-button size="large">Large</sl-button>
|
||||
```
|
||||
|
||||
```jsx:react
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlButton size="small">Small</SlButton>
|
||||
<SlButton size="medium">Medium</SlButton>
|
||||
<SlButton size="large">Large</SlButton>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### Outline Buttons
|
||||
|
||||
Use the `outline` attribute to draw outlined buttons with transparent backgrounds.
|
||||
|
||||
```html:preview
|
||||
<sl-button variant="default" outline>Default</sl-button>
|
||||
<sl-button variant="primary" outline>Primary</sl-button>
|
||||
<sl-button variant="success" outline>Success</sl-button>
|
||||
<sl-button variant="neutral" outline>Neutral</sl-button>
|
||||
<sl-button variant="warning" outline>Warning</sl-button>
|
||||
<sl-button variant="danger" outline>Danger</sl-button>
|
||||
```
|
||||
|
||||
```jsx:react
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlButton variant="default" outline>
|
||||
Default
|
||||
</SlButton>
|
||||
<SlButton variant="primary" outline>
|
||||
Primary
|
||||
</SlButton>
|
||||
<SlButton variant="success" outline>
|
||||
Success
|
||||
</SlButton>
|
||||
<SlButton variant="neutral" outline>
|
||||
Neutral
|
||||
</SlButton>
|
||||
<SlButton variant="warning" outline>
|
||||
Warning
|
||||
</SlButton>
|
||||
<SlButton variant="danger" outline>
|
||||
Danger
|
||||
</SlButton>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### Pill Buttons
|
||||
|
||||
Use the `pill` attribute to give buttons rounded edges.
|
||||
|
||||
```html:preview
|
||||
<sl-button size="small" pill>Small</sl-button>
|
||||
<sl-button size="medium" pill>Medium</sl-button>
|
||||
<sl-button size="large" pill>Large</sl-button>
|
||||
```
|
||||
|
||||
```jsx:react
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlButton size="small" pill>
|
||||
Small
|
||||
</SlButton>
|
||||
<SlButton size="medium" pill>
|
||||
Medium
|
||||
</SlButton>
|
||||
<SlButton size="large" pill>
|
||||
Large
|
||||
</SlButton>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### Circle Buttons
|
||||
|
||||
Use the `circle` attribute to create circular icon buttons. When this attribute is set, the button expects a single `<sl-icon>` in the default slot.
|
||||
|
||||
```html:preview
|
||||
<sl-button variant="default" size="small" circle>
|
||||
<sl-icon name="gear" label="Settings"></sl-icon>
|
||||
</sl-button>
|
||||
|
||||
<sl-button variant="default" size="medium" circle>
|
||||
<sl-icon name="gear" label="Settings"></sl-icon>
|
||||
</sl-button>
|
||||
|
||||
<sl-button variant="default" size="large" circle>
|
||||
<sl-icon name="gear" label="Settings"></sl-icon>
|
||||
</sl-button>
|
||||
```
|
||||
|
||||
```jsx:react
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlButton variant="default" size="small" circle>
|
||||
<SlIcon name="gear" />
|
||||
</SlButton>
|
||||
<SlButton variant="default" size="medium" circle>
|
||||
<SlIcon name="gear" />
|
||||
</SlButton>
|
||||
<SlButton variant="default" size="large" circle>
|
||||
<SlIcon name="gear" />
|
||||
</SlButton>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### Text Buttons
|
||||
|
||||
Use the `text` variant to create text buttons that share the same size as regular buttons but don't have backgrounds or borders.
|
||||
|
||||
```html:preview
|
||||
<sl-button variant="text" size="small">Text</sl-button>
|
||||
<sl-button variant="text" size="medium">Text</sl-button>
|
||||
<sl-button variant="text" size="large">Text</sl-button>
|
||||
```
|
||||
|
||||
```jsx:react
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlButton variant="text" size="small">
|
||||
Text
|
||||
</SlButton>
|
||||
<SlButton variant="text" size="medium">
|
||||
Text
|
||||
</SlButton>
|
||||
<SlButton variant="text" size="large">
|
||||
Text
|
||||
</SlButton>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### Link Buttons
|
||||
|
||||
It's often helpful to have a button that works like a link. This is possible by setting the `href` attribute, which will make the component render an `<a>` under the hood. This gives you all the default link behavior the browser provides (e.g. [[CMD/CTRL/SHIFT]] + [[CLICK]]) and exposes the `target` and `download` attributes.
|
||||
|
||||
```html:preview
|
||||
<sl-button href="https://example.com/">Link</sl-button>
|
||||
<sl-button href="https://example.com/" target="_blank">New Window</sl-button>
|
||||
<sl-button href="/assets/images/wordmark.svg" download="shoelace.svg">Download</sl-button>
|
||||
<sl-button href="https://example.com/" disabled>Disabled</sl-button>
|
||||
```
|
||||
|
||||
```jsx:react
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlButton href="https://example.com/">Link</SlButton>
|
||||
<SlButton href="https://example.com/" target="_blank">
|
||||
New Window
|
||||
</SlButton>
|
||||
<SlButton href="/assets/images/wordmark.svg" download="shoelace.svg">
|
||||
Download
|
||||
</SlButton>
|
||||
<SlButton href="https://example.com/" disabled>
|
||||
Disabled
|
||||
</SlButton>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
:::tip
|
||||
When a `target` is set, the link will receive `rel="noreferrer noopener"` for [security reasons](https://mathiasbynens.github.io/rel-noopener/).
|
||||
:::
|
||||
|
||||
### Setting a Custom Width
|
||||
|
||||
As expected, buttons can be given a custom width by passing inline styles to the component (or using a class). This is useful for making buttons span the full width of their container on smaller screens.
|
||||
|
||||
```html:preview
|
||||
<sl-button variant="default" size="small" style="width: 100%; margin-bottom: 1rem;">Small</sl-button>
|
||||
<sl-button variant="default" size="medium" style="width: 100%; margin-bottom: 1rem;">Medium</sl-button>
|
||||
<sl-button variant="default" size="large" style="width: 100%;">Large</sl-button>
|
||||
```
|
||||
|
||||
{% raw %}
|
||||
|
||||
```jsx:react
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlButton variant="default" size="small" style={{ width: '100%', marginBottom: '1rem' }}>
|
||||
Small
|
||||
</SlButton>
|
||||
<SlButton variant="default" size="medium" style={{ width: '100%', marginBottom: '1rem' }}>
|
||||
Medium
|
||||
</SlButton>
|
||||
<SlButton variant="default" size="large" style={{ width: '100%' }}>
|
||||
Large
|
||||
</SlButton>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
{% endraw %}
|
||||
|
||||
### Prefix and Suffix Icons
|
||||
|
||||
Use the `prefix` and `suffix` slots to add icons.
|
||||
|
||||
```html:preview
|
||||
<sl-button variant="default" size="small">
|
||||
<sl-icon slot="prefix" name="gear"></sl-icon>
|
||||
Settings
|
||||
</sl-button>
|
||||
|
||||
<sl-button variant="default" size="small">
|
||||
<sl-icon slot="suffix" name="arrow-counterclockwise"></sl-icon>
|
||||
Refresh
|
||||
</sl-button>
|
||||
|
||||
<sl-button variant="default" size="small">
|
||||
<sl-icon slot="prefix" name="link-45deg"></sl-icon>
|
||||
<sl-icon slot="suffix" name="box-arrow-up-right"></sl-icon>
|
||||
Open
|
||||
</sl-button>
|
||||
|
||||
<br /><br />
|
||||
|
||||
<sl-button variant="default">
|
||||
<sl-icon slot="prefix" name="gear"></sl-icon>
|
||||
Settings
|
||||
</sl-button>
|
||||
|
||||
<sl-button variant="default">
|
||||
<sl-icon slot="suffix" name="arrow-counterclockwise"></sl-icon>
|
||||
Refresh
|
||||
</sl-button>
|
||||
|
||||
<sl-button variant="default">
|
||||
<sl-icon slot="prefix" name="link-45deg"></sl-icon>
|
||||
<sl-icon slot="suffix" name="box-arrow-up-right"></sl-icon>
|
||||
Open
|
||||
</sl-button>
|
||||
|
||||
<br /><br />
|
||||
|
||||
<sl-button variant="default" size="large">
|
||||
<sl-icon slot="prefix" name="gear"></sl-icon>
|
||||
Settings
|
||||
</sl-button>
|
||||
|
||||
<sl-button variant="default" size="large">
|
||||
<sl-icon slot="suffix" name="arrow-counterclockwise"></sl-icon>
|
||||
Refresh
|
||||
</sl-button>
|
||||
|
||||
<sl-button variant="default" size="large">
|
||||
<sl-icon slot="prefix" name="link-45deg"></sl-icon>
|
||||
<sl-icon slot="suffix" name="box-arrow-up-right"></sl-icon>
|
||||
Open
|
||||
</sl-button>
|
||||
```
|
||||
|
||||
```jsx:react
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlButton variant="default" size="small">
|
||||
<SlIcon slot="prefix" name="gear"></SlIcon>
|
||||
Settings
|
||||
</SlButton>
|
||||
|
||||
<SlButton variant="default" size="small">
|
||||
<SlIcon slot="suffix" name="arrow-counterclockwise"></SlIcon>
|
||||
Refresh
|
||||
</SlButton>
|
||||
|
||||
<SlButton variant="default" size="small">
|
||||
<SlIcon slot="prefix" name="link-45deg"></SlIcon>
|
||||
<SlIcon slot="suffix" name="box-arrow-up-right"></SlIcon>
|
||||
Open
|
||||
</SlButton>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<SlButton variant="default">
|
||||
<SlIcon slot="prefix" name="gear"></SlIcon>
|
||||
Settings
|
||||
</SlButton>
|
||||
|
||||
<SlButton variant="default">
|
||||
<SlIcon slot="suffix" name="arrow-counterclockwise"></SlIcon>
|
||||
Refresh
|
||||
</SlButton>
|
||||
|
||||
<SlButton variant="default">
|
||||
<SlIcon slot="prefix" name="link-45deg"></SlIcon>
|
||||
<SlIcon slot="suffix" name="box-arrow-up-right"></SlIcon>
|
||||
Open
|
||||
</SlButton>
|
||||
|
||||
<br />
|
||||
<br />
|
||||
|
||||
<SlButton variant="default" size="large">
|
||||
<SlIcon slot="prefix" name="gear"></SlIcon>
|
||||
Settings
|
||||
</SlButton>
|
||||
|
||||
<SlButton variant="default" size="large">
|
||||
<SlIcon slot="suffix" name="arrow-counterclockwise"></SlIcon>
|
||||
Refresh
|
||||
</SlButton>
|
||||
|
||||
<SlButton variant="default" size="large">
|
||||
<SlIcon slot="prefix" name="link-45deg"></SlIcon>
|
||||
<SlIcon slot="suffix" name="box-arrow-up-right"></SlIcon>
|
||||
Open
|
||||
</SlButton>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### Caret
|
||||
|
||||
Use the `caret` attribute to add a dropdown indicator when a button will trigger a dropdown, menu, or popover.
|
||||
|
||||
```html:preview
|
||||
<sl-button size="small" caret>Small</sl-button>
|
||||
<sl-button size="medium" caret>Medium</sl-button>
|
||||
<sl-button size="large" caret>Large</sl-button>
|
||||
```
|
||||
|
||||
```jsx:react
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlButton size="small" caret>
|
||||
Small
|
||||
</SlButton>
|
||||
<SlButton size="medium" caret>
|
||||
Medium
|
||||
</SlButton>
|
||||
<SlButton size="large" caret>
|
||||
Large
|
||||
</SlButton>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### Loading
|
||||
|
||||
Use the `loading` attribute to make a button busy. The width will remain the same as before, preventing adjacent elements from moving around.
|
||||
|
||||
```html:preview
|
||||
<sl-button variant="default" loading>Default</sl-button>
|
||||
<sl-button variant="primary" loading>Primary</sl-button>
|
||||
<sl-button variant="success" loading>Success</sl-button>
|
||||
<sl-button variant="neutral" loading>Neutral</sl-button>
|
||||
<sl-button variant="warning" loading>Warning</sl-button>
|
||||
<sl-button variant="danger" loading>Danger</sl-button>
|
||||
```
|
||||
|
||||
```jsx:react
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlButton variant="default" loading>
|
||||
Default
|
||||
</SlButton>
|
||||
<SlButton variant="primary" loading>
|
||||
Primary
|
||||
</SlButton>
|
||||
<SlButton variant="success" loading>
|
||||
Success
|
||||
</SlButton>
|
||||
<SlButton variant="neutral" loading>
|
||||
Neutral
|
||||
</SlButton>
|
||||
<SlButton variant="warning" loading>
|
||||
Warning
|
||||
</SlButton>
|
||||
<SlButton variant="danger" loading>
|
||||
Danger
|
||||
</SlButton>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### Disabled
|
||||
|
||||
Use the `disabled` attribute to disable a button.
|
||||
|
||||
```html:preview
|
||||
<sl-button variant="default" disabled>Default</sl-button>
|
||||
<sl-button variant="primary" disabled>Primary</sl-button>
|
||||
<sl-button variant="success" disabled>Success</sl-button>
|
||||
<sl-button variant="neutral" disabled>Neutral</sl-button>
|
||||
<sl-button variant="warning" disabled>Warning</sl-button>
|
||||
<sl-button variant="danger" disabled>Danger</sl-button>
|
||||
```
|
||||
|
||||
```jsx:react
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlButton variant="default" disabled>
|
||||
Default
|
||||
</SlButton>
|
||||
|
||||
<SlButton variant="primary" disabled>
|
||||
Primary
|
||||
</SlButton>
|
||||
|
||||
<SlButton variant="success" disabled>
|
||||
Success
|
||||
</SlButton>
|
||||
|
||||
<SlButton variant="neutral" disabled>
|
||||
Neutral
|
||||
</SlButton>
|
||||
|
||||
<SlButton variant="warning" disabled>
|
||||
Warning
|
||||
</SlButton>
|
||||
|
||||
<SlButton variant="danger" disabled>
|
||||
Danger
|
||||
</SlButton>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### Styling Buttons
|
||||
|
||||
This example demonstrates how to style buttons using a custom class. This is the recommended approach if you need to add additional variations. To customize an existing variation, modify the selector to target the button's `variant` attribute instead of a class (e.g. `sl-button[variant="primary"]`).
|
||||
|
||||
```html:preview
|
||||
<sl-button class="pink">Pink Button</sl-button>
|
||||
|
||||
<style>
|
||||
sl-button.pink::part(base) {
|
||||
/* Set design tokens for height and border width */
|
||||
--sl-input-height-medium: 48px;
|
||||
--sl-input-border-width: 4px;
|
||||
|
||||
border-radius: 0;
|
||||
background-color: #ff1493;
|
||||
border-top-color: #ff7ac1;
|
||||
border-left-color: #ff7ac1;
|
||||
border-bottom-color: #ad005c;
|
||||
border-right-color: #ad005c;
|
||||
color: white;
|
||||
font-size: 1.125rem;
|
||||
box-shadow: 0 2px 10px #0002;
|
||||
transition: var(--sl-transition-medium) transform ease, var(--sl-transition-medium) border ease;
|
||||
}
|
||||
|
||||
sl-button.pink::part(base):hover {
|
||||
transform: scale(1.05) rotate(-1deg);
|
||||
}
|
||||
|
||||
sl-button.pink::part(base):active {
|
||||
border-top-color: #ad005c;
|
||||
border-right-color: #ff7ac1;
|
||||
border-bottom-color: #ff7ac1;
|
||||
border-left-color: #ad005c;
|
||||
transform: scale(1.05) rotate(-1deg) translateY(2px);
|
||||
}
|
||||
|
||||
sl-button.pink::part(base):focus-visible {
|
||||
outline: dashed 2px deeppink;
|
||||
outline-offset: 4px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
|
@ -0,0 +1,307 @@
|
|||
---
|
||||
meta:
|
||||
title: Card
|
||||
description: Cards can be used to group related subjects in a container.
|
||||
layout: component
|
||||
---
|
||||
|
||||
```html:preview
|
||||
<sl-card class="card-overview">
|
||||
<img
|
||||
slot="image"
|
||||
src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
|
||||
alt="A kitten sits patiently between a terracotta pot and decorative grasses."
|
||||
/>
|
||||
|
||||
<strong>Mittens</strong><br />
|
||||
This kitten is as cute as he is playful. Bring him home today!<br />
|
||||
<small>6 weeks old</small>
|
||||
|
||||
<div slot="footer">
|
||||
<sl-button variant="primary" pill>More Info</sl-button>
|
||||
<sl-rating></sl-rating>
|
||||
</div>
|
||||
</sl-card>
|
||||
|
||||
<style>
|
||||
.card-overview {
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.card-overview small {
|
||||
color: var(--sl-color-neutral-500);
|
||||
}
|
||||
|
||||
.card-overview [slot='footer'] {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
```jsx:react
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
import SlCard from '@shoelace-style/shoelace/dist/react/card';
|
||||
import SlRating from '@shoelace-style/shoelace/dist/react/rating';
|
||||
|
||||
const css = `
|
||||
.card-overview {
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.card-overview small {
|
||||
color: var(--sl-color-neutral-500);
|
||||
}
|
||||
|
||||
.card-overview [slot="footer"] {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
`;
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlCard className="card-overview">
|
||||
<img
|
||||
slot="image"
|
||||
src="https://images.unsplash.com/photo-1559209172-0ff8f6d49ff7?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=80"
|
||||
alt="A kitten sits patiently between a terracotta pot and decorative grasses."
|
||||
/>
|
||||
<strong>Mittens</strong>
|
||||
<br />
|
||||
This kitten is as cute as he is playful. Bring him home today!
|
||||
<br />
|
||||
<small>6 weeks old</small>
|
||||
<div slot="footer">
|
||||
<SlButton variant="primary" pill>
|
||||
More Info
|
||||
</SlButton>
|
||||
<SlRating></SlRating>
|
||||
</div>
|
||||
</SlCard>
|
||||
|
||||
<style>{css}</style>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
### Basic Card
|
||||
|
||||
Basic cards aren't very exciting, but they can display any content you want them to.
|
||||
|
||||
```html:preview
|
||||
<sl-card class="card-basic">
|
||||
This is just a basic card. No image, no header, and no footer. Just your content.
|
||||
</sl-card>
|
||||
|
||||
<style>
|
||||
.card-basic {
|
||||
max-width: 300px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
```jsx:react
|
||||
import SlCard from '@shoelace-style/shoelace/dist/react/card';
|
||||
|
||||
const css = `
|
||||
.card-basic {
|
||||
max-width: 300px;
|
||||
}
|
||||
`;
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlCard className="card-basic">
|
||||
This is just a basic card. No image, no header, and no footer. Just your content.
|
||||
</SlCard>
|
||||
|
||||
<style>{css}</style>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### Card with Header
|
||||
|
||||
Headers can be used to display titles and more.
|
||||
|
||||
```html:preview
|
||||
<sl-card class="card-header">
|
||||
<div slot="header">
|
||||
Header Title
|
||||
<sl-icon-button name="gear" label="Settings"></sl-icon-button>
|
||||
</div>
|
||||
|
||||
This card has a header. You can put all sorts of things in it!
|
||||
</sl-card>
|
||||
|
||||
<style>
|
||||
.card-header {
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.card-header [slot='header'] {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.card-header h3 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.card-header sl-icon-button {
|
||||
font-size: var(--sl-font-size-medium);
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
```jsx:react
|
||||
import SlCard from '@shoelace-style/shoelace/dist/react/card';
|
||||
import SlIconButton from '@shoelace-style/shoelace/dist/react/icon-button';
|
||||
|
||||
const css = `
|
||||
.card-header {
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.card-header [slot="header"] {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.card-header h3 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.card-header sl-icon-button {
|
||||
font-size: var(--sl-font-size-medium);
|
||||
}
|
||||
`;
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlCard className="card-header">
|
||||
<div slot="header">
|
||||
Header Title
|
||||
<SlIconButton name="gear"></SlIconButton>
|
||||
</div>
|
||||
This card has a header. You can put all sorts of things in it!
|
||||
</SlCard>
|
||||
|
||||
<style>{css}</style>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### Card with Footer
|
||||
|
||||
Footers can be used to display actions, summaries, or other relevant content.
|
||||
|
||||
```html:preview
|
||||
<sl-card class="card-footer">
|
||||
This card has a footer. You can put all sorts of things in it!
|
||||
|
||||
<div slot="footer">
|
||||
<sl-rating></sl-rating>
|
||||
<sl-button variant="primary">Preview</sl-button>
|
||||
</div>
|
||||
</sl-card>
|
||||
|
||||
<style>
|
||||
.card-footer {
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.card-footer [slot='footer'] {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
```jsx:react
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
import SlCard from '@shoelace-style/shoelace/dist/react/card';
|
||||
import SlRating from '@shoelace-style/shoelace/dist/react/rating';
|
||||
|
||||
const css = `
|
||||
.card-footer {
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.card-footer [slot="footer"] {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
`;
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlCard className="card-footer">
|
||||
This card has a footer. You can put all sorts of things in it!
|
||||
<div slot="footer">
|
||||
<SlRating></SlRating>
|
||||
<SlButton slot="footer" variant="primary">
|
||||
Preview
|
||||
</SlButton>
|
||||
</div>
|
||||
</SlCard>
|
||||
|
||||
<style>{css}</style>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### Images
|
||||
|
||||
Cards accept an `image` slot. The image is displayed atop the card and stretches to fit.
|
||||
|
||||
```html:preview
|
||||
<sl-card class="card-image">
|
||||
<img
|
||||
slot="image"
|
||||
src="https://images.unsplash.com/photo-1547191783-94d5f8f6d8b1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=80"
|
||||
alt="A kitten walks towards camera on top of pallet."
|
||||
/>
|
||||
This is a kitten, but not just any kitten. This kitten likes walking along pallets.
|
||||
</sl-card>
|
||||
|
||||
<style>
|
||||
.card-image {
|
||||
max-width: 300px;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
```jsx:react
|
||||
import SlCard from '@shoelace-style/shoelace/dist/react/card';
|
||||
|
||||
const css = `
|
||||
.card-image {
|
||||
max-width: 300px;
|
||||
}
|
||||
`;
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlCard className="card-image">
|
||||
<img
|
||||
slot="image"
|
||||
src="https://images.unsplash.com/photo-1547191783-94d5f8f6d8b1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=400&q=80"
|
||||
alt="A kitten walks towards camera on top of pallet."
|
||||
/>
|
||||
This is a kitten, but not just any kitten. This kitten likes walking along pallets.
|
||||
</SlCard>
|
||||
|
||||
<style>{css}</style>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
---
|
||||
meta:
|
||||
title: Carousel Item
|
||||
description: A carousel item represent a slide within a carousel.
|
||||
layout: component
|
||||
---
|
||||
|
||||
```html:preview
|
||||
<sl-carousel pagination>
|
||||
<sl-carousel-item>
|
||||
<img
|
||||
alt="The sun shines on the mountains and trees - Photo by Adam Kool on Unsplash"
|
||||
src="/assets/examples/carousel/mountains.jpg"
|
||||
/>
|
||||
</sl-carousel-item>
|
||||
<sl-carousel-item>
|
||||
<img
|
||||
alt="A waterfall in the middle of a forest - Photo by Thomas Kelly on Unsplash"
|
||||
src="/assets/examples/carousel/waterfall.jpg"
|
||||
/>
|
||||
</sl-carousel-item>
|
||||
<sl-carousel-item>
|
||||
<img
|
||||
alt="The sun is setting over a lavender field - Photo by Leonard Cotte on Unsplash"
|
||||
src="/assets/examples/carousel/sunset.jpg"
|
||||
/>
|
||||
</sl-carousel-item>
|
||||
<sl-carousel-item>
|
||||
<img
|
||||
alt="A field of grass with the sun setting in the background - Photo by Sapan Patel on Unsplash"
|
||||
src="/assets/examples/carousel/field.jpg"
|
||||
/>
|
||||
</sl-carousel-item>
|
||||
<sl-carousel-item>
|
||||
<img
|
||||
alt="A scenic view of a mountain with clouds rolling in - Photo by V2osk on Unsplash"
|
||||
src="/assets/examples/carousel/valley.jpg"
|
||||
/>
|
||||
</sl-carousel-item>
|
||||
</sl-carousel>
|
||||
```
|
||||
|
||||
```jsx:react
|
||||
import SlCarousel from '@shoelace-style/shoelace/dist/react/carousel';
|
||||
import SlCarouselItem from '@shoelace-style/shoelace/dist/react/carousel-item';
|
||||
|
||||
const App = () => (
|
||||
<SlCarousel pagination>
|
||||
<SlCarouselItem>
|
||||
<img
|
||||
alt="The sun shines on the mountains and trees - Photo by Adam Kool on Unsplash"
|
||||
src="/assets/examples/carousel/mountains.jpg"
|
||||
/>
|
||||
</SlCarouselItem>
|
||||
<SlCarouselItem>
|
||||
<img
|
||||
alt="A waterfall in the middle of a forest - Photo by Thomas Kelly on Unsplash"
|
||||
src="/assets/examples/carousel/waterfall.jpg"
|
||||
/>
|
||||
</SlCarouselItem>
|
||||
<SlCarouselItem>
|
||||
<img
|
||||
alt="The sun is setting over a lavender field - Photo by Leonard Cotte on Unsplash"
|
||||
src="/assets/examples/carousel/sunset.jpg"
|
||||
/>
|
||||
</SlCarouselItem>
|
||||
<SlCarouselItem>
|
||||
<img
|
||||
alt="A field of grass with the sun setting in the background - Photo by Sapan Patel on Unsplash"
|
||||
src="/assets/examples/carousel/field.jpg"
|
||||
/>
|
||||
</SlCarouselItem>
|
||||
<SlCarouselItem>
|
||||
<img
|
||||
alt="A scenic view of a mountain with clouds rolling in - Photo by V2osk on Unsplash"
|
||||
src="/assets/examples/carousel/valley.jpg"
|
||||
/>
|
||||
</SlCarouselItem>
|
||||
</SlCarousel>
|
||||
);
|
||||
```
|
||||
|
||||
:::tip
|
||||
Additional demonstrations can be found in the [carousel examples](/components/carousel).
|
||||
:::
|
||||
Plik diff jest za duży
Load Diff
|
|
@ -0,0 +1,178 @@
|
|||
---
|
||||
meta:
|
||||
title: Checkbox
|
||||
description: Checkboxes allow the user to toggle an option on or off.
|
||||
layout: component
|
||||
---
|
||||
|
||||
```html:preview
|
||||
<sl-checkbox>Checkbox</sl-checkbox>
|
||||
```
|
||||
|
||||
```jsx:react
|
||||
import SlCheckbox from '@shoelace-style/shoelace/dist/react/checkbox';
|
||||
|
||||
const App = () => <SlCheckbox>Checkbox</SlCheckbox>;
|
||||
```
|
||||
|
||||
:::tip
|
||||
This component works with standard `<form>` elements. Please refer to the section on [form controls](/getting-started/form-controls) to learn more about form submission and client-side validation.
|
||||
:::
|
||||
|
||||
## Examples
|
||||
|
||||
### Checked
|
||||
|
||||
Use the `checked` attribute to activate the checkbox.
|
||||
|
||||
```html:preview
|
||||
<sl-checkbox checked>Checked</sl-checkbox>
|
||||
```
|
||||
|
||||
```jsx:react
|
||||
import SlCheckbox from '@shoelace-style/shoelace/dist/react/checkbox';
|
||||
|
||||
const App = () => <SlCheckbox checked>Checked</SlCheckbox>;
|
||||
```
|
||||
|
||||
### Indeterminate
|
||||
|
||||
Use the `indeterminate` attribute to make the checkbox indeterminate.
|
||||
|
||||
```html:preview
|
||||
<sl-checkbox indeterminate>Indeterminate</sl-checkbox>
|
||||
```
|
||||
|
||||
```jsx:react
|
||||
import SlCheckbox from '@shoelace-style/shoelace/dist/react/checkbox';
|
||||
|
||||
const App = () => <SlCheckbox indeterminate>Indeterminate</SlCheckbox>;
|
||||
```
|
||||
|
||||
### Disabled
|
||||
|
||||
Use the `disabled` attribute to disable the checkbox.
|
||||
|
||||
```html:preview
|
||||
<sl-checkbox disabled>Disabled</sl-checkbox>
|
||||
```
|
||||
|
||||
```jsx:react
|
||||
import SlCheckbox from '@shoelace-style/shoelace/dist/react/checkbox';
|
||||
|
||||
const App = () => <SlCheckbox disabled>Disabled</SlCheckbox>;
|
||||
```
|
||||
|
||||
### Sizes
|
||||
|
||||
Use the `size` attribute to change a checkbox's size.
|
||||
|
||||
```html:preview
|
||||
<sl-checkbox size="small">Small</sl-checkbox>
|
||||
<br />
|
||||
<sl-checkbox size="medium">Medium</sl-checkbox>
|
||||
<br />
|
||||
<sl-checkbox size="large">Large</sl-checkbox>
|
||||
```
|
||||
|
||||
```jsx:react
|
||||
import SlCheckbox from '@shoelace-style/shoelace/dist/react/checkbox';
|
||||
|
||||
const App = () => (
|
||||
<>
|
||||
<SlCheckbox size="small">Small</SlCheckbox>
|
||||
<br />
|
||||
<SlCheckbox size="medium">Medium</SlCheckbox>
|
||||
<br />
|
||||
<SlCheckbox size="large">Large</SlCheckbox>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
### Help Text
|
||||
|
||||
Add descriptive help text to a switch with the `help-text` attribute. For help texts that contain HTML, use the `help-text` slot instead.
|
||||
|
||||
```html:preview
|
||||
<sl-checkbox help-text="What should the user know about the checkbox?">Label</sl-checkbox>
|
||||
```
|
||||
|
||||
```jsx:react
|
||||
import SlCheckbox from '@shoelace-style/shoelace/dist/react/checkbox';
|
||||
|
||||
const App = () => <SlCheckbox help-text="What should the user know about the switch?">Label</SlCheckbox>;
|
||||
```
|
||||
|
||||
### Custom Validity
|
||||
|
||||
Use the `setCustomValidity()` method to set a custom validation message. This will prevent the form from submitting and make the browser display the error message you provide. To clear the error, call this function with an empty string.
|
||||
|
||||
```html:preview
|
||||
<form class="custom-validity">
|
||||
<sl-checkbox>Check me</sl-checkbox>
|
||||
<br />
|
||||
<sl-button type="submit" variant="primary" style="margin-top: 1rem;">Submit</sl-button>
|
||||
</form>
|
||||
<script>
|
||||
const form = document.querySelector('.custom-validity');
|
||||
const checkbox = form.querySelector('sl-checkbox');
|
||||
const errorMessage = `Don't forget to check me!`;
|
||||
|
||||
// Set initial validity as soon as the element is defined
|
||||
customElements.whenDefined('sl-checkbox').then(async () => {
|
||||
await checkbox.updateComplete;
|
||||
checkbox.setCustomValidity(errorMessage);
|
||||
});
|
||||
|
||||
// Update validity on change
|
||||
checkbox.addEventListener('sl-change', () => {
|
||||
checkbox.setCustomValidity(checkbox.checked ? '' : errorMessage);
|
||||
});
|
||||
|
||||
// Handle submit
|
||||
form.addEventListener('submit', event => {
|
||||
event.preventDefault();
|
||||
alert('All fields are valid!');
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
{% raw %}
|
||||
|
||||
```jsx:react
|
||||
import { useEffect, useRef } from 'react';
|
||||
import SlButton from '@shoelace-style/shoelace/dist/react/button';
|
||||
import SlCheckbox from '@shoelace-style/shoelace/dist/react/checkbox';
|
||||
|
||||
const App = () => {
|
||||
const checkbox = useRef(null);
|
||||
const errorMessage = `Don't forget to check me!`;
|
||||
|
||||
function handleChange() {
|
||||
checkbox.current.setCustomValidity(checkbox.current.checked ? '' : errorMessage);
|
||||
}
|
||||
|
||||
function handleSubmit(event) {
|
||||
event.preventDefault();
|
||||
alert('All fields are valid!');
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
checkbox.current.setCustomValidity(errorMessage);
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<form class="custom-validity" onSubmit={handleSubmit}>
|
||||
<SlCheckbox ref={checkbox} onSlChange={handleChange}>
|
||||
Check me
|
||||
</SlCheckbox>
|
||||
<br />
|
||||
<SlButton type="submit" variant="primary" style={{ marginTop: '1rem' }}>
|
||||
Submit
|
||||
</SlButton>
|
||||
</form>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
{% endraw %}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Ładowanie…
Reference in New Issue