Added vscode settings

This commit is contained in:
Kristofers Solo
2022-04-28 20:54:44 +03:00
parent 245c3ca779
commit 837a479d82
25004 changed files with 2499800 additions and 0 deletions

View File

@@ -0,0 +1,43 @@
<?xml version="1.0" encoding="utf-8"?>
<PackageManifest Version="2.0.0" xmlns="http://schemas.microsoft.com/developer/vsx-schema/2011" xmlns:d="http://schemas.microsoft.com/developer/vsx-schema-design/2011">
<Metadata>
<Identity Language="en-US" Id="css-flexbox-cheatsheet" Version="3.3.1" Publisher="dzhavat" />
<DisplayName>CSS Flexbox Cheatsheet</DisplayName>
<Description xml:space="preserve">Open a flexbox cheatsheet directly in VS Code.</Description>
<Tags>keybindings,css,less,sass,scss</Tags>
<Categories>Other,Programming Languages</Categories>
<GalleryFlags>Public</GalleryFlags>
<Properties>
<Property Id="Microsoft.VisualStudio.Code.Engine" Value="^1.58.0" />
<Property Id="Microsoft.VisualStudio.Code.ExtensionDependencies" Value="" />
<Property Id="Microsoft.VisualStudio.Code.ExtensionPack" Value="" />
<Property Id="Microsoft.VisualStudio.Code.ExtensionKind" Value="workspace" />
<Property Id="Microsoft.VisualStudio.Code.LocalizedLanguages" Value="" />
<Property Id="Microsoft.VisualStudio.Services.Links.Source" Value="https://github.com/dzhavat/css-flexbox-cheatsheet.git" />
<Property Id="Microsoft.VisualStudio.Services.Links.Getstarted" Value="https://github.com/dzhavat/css-flexbox-cheatsheet.git" />
<Property Id="Microsoft.VisualStudio.Services.Links.GitHub" Value="https://github.com/dzhavat/css-flexbox-cheatsheet.git" />
<Property Id="Microsoft.VisualStudio.Services.Links.Support" Value="https://github.com/dzhavat/css-flexbox-cheatsheet/issues" />
<Property Id="Microsoft.VisualStudio.Services.Links.Learn" Value="https://github.com/dzhavat/css-flexbox-cheatsheet#readme" />
<Property Id="Microsoft.VisualStudio.Services.GitHubFlavoredMarkdown" Value="true" />
</Properties>
<License>extension/LICENSE.md</License>
<Icon>extension/images/icon.png</Icon>
</Metadata>
<Installation>
<InstallationTarget Id="Microsoft.VisualStudio.Code"/>
</Installation>
<Dependencies/>
<Assets>
<Asset Type="Microsoft.VisualStudio.Code.Manifest" Path="extension/package.json" Addressable="true" />
<Asset Type="Microsoft.VisualStudio.Services.Content.Details" Path="extension/README.md" Addressable="true" />
<Asset Type="Microsoft.VisualStudio.Services.Content.Changelog" Path="extension/CHANGELOG.md" Addressable="true" />
<Asset Type="Microsoft.VisualStudio.Services.Content.License" Path="extension/LICENSE.md" Addressable="true" />
<Asset Type="Microsoft.VisualStudio.Services.Icons.Default" Path="extension/images/icon.png" Addressable="true" />
</Assets>
</PackageManifest>

View File

@@ -0,0 +1,154 @@
# Changelog
## [3.3.1](https://github.com/dzhavat/css-flexbox-cheatsheet/compare/3.3.0...3.3.1) - 2021-12-20
### Changed
- Fix a typo
- Set the minimum supported VS Code version to 1.58.0
- Update dependencies
## [3.3.0](https://github.com/dzhavat/css-flexbox-cheatsheet/compare/3.2.4...3.3.0) - 2021-11-08
### Added
- Add `@vscode/webview-ui-toolkit` package to the project
### Changed
- Use `radio-group` and `radio` elements from “Webview UI Toolkit”
- Set the minimum supported VS Code version to 1.57.0
- Update dependencies
## [3.2.4](https://github.com/dzhavat/css-flexbox-cheatsheet/compare/3.2.3...3.2.4) - 2021-10-27
### Changed
- Set the minimum supported VS Code version to 1.56.0
- Update dependencies
## [3.2.3](https://github.com/dzhavat/css-flexbox-cheatsheet/compare/3.2.2...3.2.3) - 2021-06-17
### Changed
- Set the minimum supported VS Code version to 1.52.0
- Update dependencies
## [3.2.2](https://github.com/dzhavat/css-flexbox-cheatsheet/compare/3.2.1...3.2.2) - 2021-02-19
### Fixed
- Fix links to demo gifs
## [3.2.1](https://github.com/dzhavat/css-flexbox-cheatsheet/compare/3.2.0...3.2.1) - 2021-02-19
### Changed
- Set the minimum supported VS Code version to 1.47.0
- Update dependencies
- Rename default git branch from `master` to `main`
## [3.2.0](https://github.com/dzhavat/css-flexbox-cheatsheet/compare/3.1.0...3.2.0) - 2020-10-29
### Added
- Keyboard shortcut to open the cheatsheet - `Ctrl + K K` (Win, Linux) / `Cmd + K K` (Mac)
## [3.1.0](https://github.com/dzhavat/css-flexbox-cheatsheet/compare/3.0.2...3.1.0) - 2020-10-21
### Added
- Support for selecting directionality to be used in the interactive playgrounds
### Changed
- Rename command title used for opening the cheatsheet from `Open Flexbox Cheatsheet` to `Open CSS Flexbox Cheatsheet`
- Migrate TSLint to ESLint
## [3.0.2](https://github.com/dzhavat/css-flexbox-cheatsheet/compare/3.0.1...3.0.2) - 2020-09-24
### Changed
- Add `dir` attribute with a value of `ltr` to each playground
### Fixed
- Update the links in the _Resources_ section
## [3.0.1](https://github.com/dzhavat/css-flexbox-cheatsheet/compare/3.0.0...3.0.1) - 2020-09-12
### Changed
- Add missing headings to property groups
## [3.0.0](https://github.com/dzhavat/css-flexbox-cheatsheet/compare/2.0.1...3.0.0) - 2020-09-09
### Added
- Interactive demos to most properties
- Adopt `asWebviewUri` API so the extension will work properly in future versions of VS Code
- Content security policy (CSP) when loading local resources
### Changed
- Set the minimum supported VS Code version to 1.44.0
- Update dependencies
### Fixed
- Decrease package size
## [2.0.1](https://github.com/dzhavat/css-flexbox-cheatsheet/compare/2.0.0...2.0.1) - 2020-03-19
### Fixed
- Fix broken image in hover popup
### Changed
- Update dependencies
## [2.0.0](https://github.com/dzhavat/css-flexbox-cheatsheet/compare/1.2.1...2.0.0) - 2020-03-16
### Added
- Show an image for each flexbox property in the hover popup
### Changed
- Set the minimum supported VS Code version to 1.33.0
## [1.2.1](https://github.com/dzhavat/css-flexbox-cheatsheet/compare/1.2.0...1.2.1) - 2019-11-16
### Changed
- Set the minimum supported VS Code version to 1.31.0
- Add title to command link
- Update resources
## [1.2.0](https://github.com/dzhavat/css-flexbox-cheatsheet/compare/1.1.0...1.2.0) - 2019-09-23
### Added
- Adjust colors based on the selected theme
- Use the users preferred font family
## [1.1.0](https://github.com/dzhavat/css-flexbox-cheatsheet/compare/1.0.0...1.1.0) - 2019-09-16
### Added
- Add icon before `flex` value
- Add `space-evently` to `justify-content`
- Add two more links to resources
- Add [Content security policy](https://code.visualstudio.com/api/extension-guides/webview#content-security-policy)
## [1.0.0](https://github.com/dzhavat/css-flexbox-cheatsheet/releases/tag/1.0.0) - 2019-09-04
- Initial release
### Added
The cheatsheet can be opened in two ways:
- Press `Ctrl+Shift+P` (Win, Linux) / `Cmd+Shift+P` (Mac) and search for the `Open Flexbox Cheatsheet` command.
- Hover any `display: flex` declaration and click the `Open Flexbox Cheatsheet` link in the popup.

View File

@@ -0,0 +1,21 @@
MIT License
Copyright (c) 2020 Dzhavat Ushev
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.

View File

@@ -0,0 +1,60 @@
# CSS Flexbox Cheatsheet ([link](https://marketplace.visualstudio.com/items?itemName=dzhavat.css-flexbox-cheatsheet))
VS Code extension that lets you open a flexbox cheatsheet directly in the editor.
## Features
The cheatsheet can be opened in a few ways:
- Press `Ctrl + Shift + P` (Win, Linux) / `Cmd + Shift + P` (Mac) and search for the `Open CSS Flexbox Cheatsheet` command.
- Press `Ctrl + K K` (Win, Linux) / `Cmd + K K` (Mac) keyboard shortcut.
- Hover any `display: flex` declaration and click the `Open CSS Flexbox Cheatsheet` link in the popup.
Besides the `Open CSS Flexbox Cheatsheet` link in the hover popup, theres also an image shown for each flexbox property. This aims to make it easier to understand how each property works without opening the cheatsheet. This is available for the following file types:
- CSS
- Less
- Sass
- Scss
Most properties also have interactive playgrounds that are part of the cheatsheet.
## Settings
After opening the cheatsheet, you can select the directionality to be used in the interactive playgrounds. This is especially useful for languages that write from right-to-left (e.g. Arabic). [Learn more](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir).
## Font and colors
The colors of the cheatsheet automatically adapt to the selected theme. The font is based on the users preferred font.
## Support my work
If you find this extension useful and would like to support my work, you can [buy me a cup of tea](https://www.buymeacoffee.com/dzhavat). Thank you!
[![Buy Me A Cup Of Tea](https://github.com/dzhavat/css-flexbox-cheatsheet/raw/main/images/buy-me-a-cup-of-tea.png)](https://www.buymeacoffee.com/dzhavat)
## Demo
#### Using the `Open CSS Flexbox Cheatsheet` command
![Demo using "Open CSS Flexbox Cheatsheet" the command](https://github.com/dzhavat/css-flexbox-cheatsheet/raw/main/images/demo/command.gif)
#### Clicking the `Open CSS Flexbox Cheatsheet` link on hover
![Demo opening the cheatsheet by clicking the "Open CSS Flexbox Cheatsheet" command](https://github.com/dzhavat/css-flexbox-cheatsheet/raw/main/images/demo/hover.gif)
#### Trying the interactive playgrounds
![Trying the interactive playgrounds](https://github.com/dzhavat/css-flexbox-cheatsheet/raw/main/images/demo/interactive-playgrounds.gif)
#### Changing directionality in the interactive playgrounds
![Demo changing directionality](https://github.com/dzhavat/css-flexbox-cheatsheet/raw/main/images/demo/changing-directionality.gif)
#### Showing an image on hover
![Demo showing an image on hover](https://github.com/dzhavat/css-flexbox-cheatsheet/raw/main/images/demo/hover-image.gif)
## Credit
The cheatsheet in this extension is based on the excellent [Flexbox Cheatsheet](https://darekkay.com/dev/flexbox-cheatsheet.html) by [Darek Kay](https://darekkay.com/).

View File

@@ -0,0 +1 @@
<svg width="110" viewBox="0 0 37 21" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="M0 0h37v21H0z"/></defs><g fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><use xlink:href="#a"/><path d="M.005 1.995v17.01A2 2 0 002 21h33.005A2 2 0 0037 19.005V1.995A2 2 0 0035.005 0H2A2 2 0 00.005 1.995zm35-.995a1 1 0 01.995.995v17.01a1 1 0 01-.995.995H1.995A1 1 0 011 19.005V1.995A1 1 0 011.995 1h33.01z" fill="#A6E22D" mask="url(#b)"/><g mask="url(#b)" fill="#75715E"><path d="M12 6h16v2H12zM2 6h9v2H2zM29 6h6v2h-6zM2 12h9v2H2zM12 12h6v2h-6zM9 9h16v2H9zM26 9h9v2h-9zM2 9h6v2H2z"/></g></g></svg>

After

Width:  |  Height:  |  Size: 673 B

View File

@@ -0,0 +1 @@
<svg width="110" viewBox="0 0 37 21" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="M0 0h37v21H0z"/></defs><g fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><use xlink:href="#a"/><g mask="url(#b)" fill="#75715E"><path d="M12 11h16v2H12zM2 11h9v2H2zM29 11h6v2h-6zM2 17h9v2H2zM12 17h6v2h-6zM9 14h16v2H9zM26 14h9v2h-9zM2 14h6v2H2z"/></g><path d="M.005 1.995v17.01A2 2 0 002 21h33.005A2 2 0 0037 19.005V1.995A2 2 0 0035.005 0H2A2 2 0 00.005 1.995zm35-.995a1 1 0 01.995.995v17.01a1 1 0 01-.995.995H1.995A1 1 0 011 19.005V1.995A1 1 0 011.995 1h33.01z" fill="#A6E22D" mask="url(#b)"/></g></svg>

After

Width:  |  Height:  |  Size: 679 B

View File

@@ -0,0 +1 @@
<svg width="110" viewBox="0 0 37 21" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="M0 0h37v21H0z"/></defs><g fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><use xlink:href="#a"/><g mask="url(#b)" fill="#75715E"><path d="M12 2h16v2H12zM2 2h9v2H2zM29 2h6v2h-6zM2 8h9v2H2zM12 8h6v2h-6zM9 5h16v2H9zM26 5h9v2h-9zM2 5h6v2H2z"/></g><path d="M.005 1.995v17.01A2 2 0 002 21h33.005A2 2 0 0037 19.005V1.995A2 2 0 0035.005 0H2A2 2 0 00.005 1.995zm35-.995a1 1 0 01.995.995v17.01a1 1 0 01-.995.995H1.995A1 1 0 011 19.005V1.995A1 1 0 011.995 1h33.01z" fill="#A6E22D" mask="url(#b)"/></g></svg>

After

Width:  |  Height:  |  Size: 671 B

View File

@@ -0,0 +1 @@
<svg width="110" viewBox="0 0 37 21" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="M0 0h37v21H0z"/></defs><g fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><use xlink:href="#a"/><g mask="url(#b)" fill="#75715E"><path d="M2 14h9v2H2zM12 14h6v2h-6zM12 4h16v2H12zM9 9h16v2H9zM26 9h9v2h-9zM2 9h6v2H2zM29 4h6v2h-6zM2 4h9v2H2z"/></g><path d="M.005 1.995v17.01A2 2 0 002 21h33.005A2 2 0 0037 19.005V1.995A2 2 0 0035.005 0H2A2 2 0 00.005 1.995zm35-.995a1 1 0 01.995.995v17.01a1 1 0 01-.995.995H1.995A1 1 0 011 19.005V1.995A1 1 0 011.995 1h33.01z" fill="#A6E22D" mask="url(#b)"/></g></svg>

After

Width:  |  Height:  |  Size: 673 B

View File

@@ -0,0 +1 @@
<svg width="110" viewBox="0 0 37 21" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="M0 0h37v21H0z"/></defs><g fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><use xlink:href="#a"/><g mask="url(#b)" fill="#75715E"><path d="M2 17h9v2H2zM12 17h6v2h-6zM12 2h16v2H12zM9 9h16v2H9zM26 9h9v2h-9zM2 9h6v2H2zM29 2h6v2h-6zM2 2h9v2H2z"/></g><path d="M.005 1.995v17.01A2 2 0 002 21h33.005A2 2 0 0037 19.005V1.995A2 2 0 0035.005 0H2A2 2 0 00.005 1.995zm35-.995a1 1 0 01.995.995v17.01a1 1 0 01-.995.995H1.995A1 1 0 011 19.005V1.995A1 1 0 011.995 1h33.01z" fill="#A6E22D" mask="url(#b)"/></g></svg>

After

Width:  |  Height:  |  Size: 673 B

View File

@@ -0,0 +1 @@
<svg width="110" viewBox="0 0 37 21" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="M0 0h37v21H0z"/></defs><g fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><use xlink:href="#a"/><g mask="url(#b)" fill="#75715E"><path d="M2 14h9v5H2zM12 14h6v5h-6zM12 2h16v5H12zM9 8h16v5H9zM26 8h9v5h-9zM2 8h6v5H2zM29 2h6v5h-6zM2 2h9v5H2z"/></g><path d="M.005 1.995v17.01A2 2 0 002 21h33.005A2 2 0 0037 19.005V1.995A2 2 0 0035.005 0H2A2 2 0 00.005 1.995zm35-.995a1 1 0 01.995.995v17.01a1 1 0 01-.995.995H1.995A1 1 0 011 19.005V1.995A1 1 0 011.995 1h33.01z" fill="#A6E22D" mask="url(#b)"/></g></svg>

After

Width:  |  Height:  |  Size: 673 B

View File

@@ -0,0 +1 @@
<svg width="110" viewBox="0 0 37 21" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="M0 0h37v21H0z"/></defs><g fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><use xlink:href="#a"/><path d="M12 8V6h16v2H12zm0 3v5h16v-5H12zM2 9V5h9v3H2v1zm27-1V6h6v7h-6v-2h6V8h-6z" fill="#75715E" mask="url(#b)"/><path fill="#66D9EF" mask="url(#b)" d="M2 10h33V9H2z"/><path d="M.005 1.995v17.01A2 2 0 002 21h33.005A2 2 0 0037 19.005V1.995A2 2 0 0035.005 0H2A2 2 0 00.005 1.995zm35-.995a1 1 0 01.995.995v17.01a1 1 0 01-.995.995H1.995A1 1 0 011 19.005V1.995A1 1 0 011.995 1h33.01z" fill="#A6E22D" mask="url(#b)"/></g></svg>

After

Width:  |  Height:  |  Size: 693 B

View File

@@ -0,0 +1 @@
<svg width="110" viewBox="0 0 37 21" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="M0 0h37v21H0z"/></defs><g fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><use xlink:href="#a"/><g mask="url(#b)" fill="#75715E"><path d="M12 7h16v7H12zM2 9h9v3H2zM29 8h6v5h-6z"/></g><path d="M.005 1.995v17.01A2 2 0 002 21h33.005A2 2 0 0037 19.005V1.995A2 2 0 0035.005 0H2A2 2 0 00.005 1.995zm35-.995a1 1 0 01.995.995v17.01a1 1 0 01-.995.995H1.995A1 1 0 011 19.005V1.995A1 1 0 011.995 1h33.01z" fill="#A6E22D" mask="url(#b)"/></g></svg>

After

Width:  |  Height:  |  Size: 611 B

View File

@@ -0,0 +1 @@
<svg width="110" viewBox="0 0 37 21" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="M0 0h37v21H0z"/></defs><g fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><use xlink:href="#a"/><g mask="url(#b)" fill="#75715E"><path d="M12 12h16v7H12zM2 16h9v3H2zM29 14h6v5h-6z"/></g><path d="M.005 1.995v17.01A2 2 0 002 21h33.005A2 2 0 0037 19.005V1.995A2 2 0 0035.005 0H2A2 2 0 00.005 1.995zm35-.995a1 1 0 01.995.995v17.01a1 1 0 01-.995.995H1.995A1 1 0 011 19.005V1.995A1 1 0 011.995 1h33.01z" fill="#A6E22D" mask="url(#b)"/></g></svg>

After

Width:  |  Height:  |  Size: 614 B

View File

@@ -0,0 +1 @@
<svg width="110" viewBox="0 0 37 21" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="M0 0h37v21H0z"/></defs><g fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><use xlink:href="#a"/><g mask="url(#b)" fill="#75715E"><path d="M12 2h16v7H12zM2 2h9v3H2zM29 2h6v5h-6z"/></g><path d="M.005 1.995v17.01A2 2 0 002 21h33.005A2 2 0 0037 19.005V1.995A2 2 0 0035.005 0H2A2 2 0 00.005 1.995zm35-.995a1 1 0 01.995.995v17.01a1 1 0 01-.995.995H1.995A1 1 0 011 19.005V1.995A1 1 0 011.995 1h33.01z" fill="#A6E22D" mask="url(#b)"/></g></svg>

After

Width:  |  Height:  |  Size: 611 B

View File

@@ -0,0 +1 @@
<svg width="110" viewBox="0 0 37 21" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="M0 0h37v21H0z"/></defs><g fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><use xlink:href="#a"/><g mask="url(#b)" fill="#75715E"><path d="M12 2h16v17H12zM2 2h9v17H2zM29 2h6v17h-6z"/></g><path d="M.005 1.995v17.01A2 2 0 002 21h33.005A2 2 0 0037 19.005V1.995A2 2 0 0035.005 0H2A2 2 0 00.005 1.995zm35-.995a1 1 0 01.995.995v17.01a1 1 0 01-.995.995H1.995A1 1 0 011 19.005V1.995A1 1 0 011.995 1h33.01z" fill="#A6E22D" mask="url(#b)"/></g></svg>

After

Width:  |  Height:  |  Size: 614 B

View File

@@ -0,0 +1 @@
<svg width="110" viewBox="0 0 37 21" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="M0 0h37v21H0z"/></defs><g fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><use xlink:href="#a"/><g mask="url(#b)" fill="#75715E"><path d="M2 2.999v1.002c0 .552.446.999.998.999h7.004c.551 0 .998-.443.998-.999V2.999A.998.998 0 0010.002 2H2.998A.995.995 0 002 2.999zM10.002 3L10 4.001C10 4.003 2.998 4 2.998 4L3 2.999C3 2.997 10.002 3 10.002 3zM29 3v3a1 1 0 00.99 1h4.02c.546 0 .99-.444.99-1V3a1 1 0 00-.99-1h-4.02A.993.993 0 0029 3zm5.01 0C33.997 3 34 6 34 6c0 .004-4.01 0-4.01 0 .012 0 .01-3 .01-3 0-.004 4.01 0 4.01 0zM12 3.003v4.994A1 1 0 0013 9h14c.552 0 1-.438 1-1.003V3.003A1 1 0 0027 2H13c-.552 0-1 .438-1 1.003zM27 3v4.997C27 8.005 13 8 13 8V3.003C13 2.995 27 3 27 3z"/></g></g></svg>

After

Width:  |  Height:  |  Size: 865 B

View File

@@ -0,0 +1 @@
<svg width="110" viewBox="0 0 37 21" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="M0 0h37v21H0z"/></defs><g fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><use xlink:href="#a"/><path d="M2 2.999v1.002c0 .552.446.999.998.999h7.004c.551 0 .998-.443.998-.999V2.999A.998.998 0 0010.002 2H2.998A.995.995 0 002 2.999zM10.002 3L10 4.001C10 4.003 2.998 4 2.998 4L3 2.999C3 2.997 10.002 3 10.002 3zM29 3v3a1 1 0 00.99 1h4.02c.546 0 .99-.444.99-1V3a1 1 0 00-.99-1h-4.02A.993.993 0 0029 3zm5.01 0C33.997 3 34 6 34 6c0 .004-4.01 0-4.01 0 .012 0 .01-3 .01-3 0-.004 4.01 0 4.01 0z" fill="#75715E" mask="url(#b)"/><path d="M12 8.003v4.994A1 1 0 0013 14h14c.552 0 1-.438 1-1.003V8.003A1 1 0 0027 7H13c-.552 0-1 .438-1 1.003zM27 8v4.997C27 13.005 13 13 13 13V8.003C13 7.995 27 8 27 8z" fill="#A6E22D" mask="url(#b)"/><path d="M2 9.5h33" stroke="#66D9EF" mask="url(#b)"/><path fill="#66D9EF" mask="url(#b)" d="M2 10h33V9H2z"/></g></svg>

After

Width:  |  Height:  |  Size: 1012 B

View File

@@ -0,0 +1 @@
<svg width="110" viewBox="0 0 37 21" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="M0 0h37v21H0z"/></defs><g fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><use xlink:href="#a"/><g mask="url(#b)"><path d="M12 8.003v4.994A1 1 0 0013 14h14c.552 0 1-.438 1-1.003V8.003A1 1 0 0027 7H13c-.552 0-1 .438-1 1.003zM27 8v4.997C27 13.005 13 13 13 13V8.003C13 7.995 27 8 27 8z" fill="#A6E22D"/><path d="M2 2.999v1.002c0 .552.446.999.998.999h7.004c.551 0 .998-.443.998-.999V2.999A.998.998 0 0010.002 2H2.998A.995.995 0 002 2.999zM10.002 3L10 4.001C10 4.003 2.998 4 2.998 4L3 2.999C3 2.997 10.002 3 10.002 3zM29 3v3a1 1 0 00.99 1h4.02c.546 0 .99-.444.99-1V3a1 1 0 00-.99-1h-4.02A.993.993 0 0029 3zm5.01 0C33.997 3 34 6 34 6c0 .004-4.01 0-4.01 0 .012 0 .01-3 .01-3 0-.004 4.01 0 4.01 0z" fill="#75715E"/></g></g></svg>

After

Width:  |  Height:  |  Size: 896 B

View File

@@ -0,0 +1 @@
<svg width="110" viewBox="0 0 37 21" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="M0 0h37v21H0z"/></defs><g fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><use xlink:href="#a"/><g mask="url(#b)" fill="#75715E"><path d="M2 2.999v1.002c0 .552.446.999.998.999h7.004c.551 0 .998-.443.998-.999V2.999A.998.998 0 0010.002 2H2.998A.995.995 0 002 2.999zM10.002 3L10 4.001C10 4.003 2.998 4 2.998 4L3 2.999C3 2.997 10.002 3 10.002 3zM29 3v3a1 1 0 00.99 1h4.02c.546 0 .99-.444.99-1V3a1 1 0 00-.99-1h-4.02A.993.993 0 0029 3zm5.01 0C33.997 3 34 6 34 6c0 .004-4.01 0-4.01 0 .012 0 .01-3 .01-3 0-.004 4.01 0 4.01 0z"/></g><g mask="url(#b)" fill="#A6E22D"><path d="M12 13.003v4.994A1 1 0 0013 19h14c.552 0 1-.438 1-1.003v-4.994A1 1 0 0027 12H13c-.552 0-1 .438-1 1.003zM27 13v4.997C27 18.005 13 18 13 18v-4.997C13 12.995 27 13 27 13z"/></g></g></svg>

After

Width:  |  Height:  |  Size: 926 B

View File

@@ -0,0 +1 @@
<svg width="110" viewBox="0 0 37 21" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="M0 0h37v21H0z"/></defs><g fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><use xlink:href="#a"/><g mask="url(#b)" fill="#75715E"><path d="M2 2.999v1.002c0 .552.446.999.998.999h7.004c.551 0 .998-.443.998-.999V2.999A.998.998 0 0010.002 2H2.998A.995.995 0 002 2.999zM10.002 3L10 4.001C10 4.003 2.998 4 2.998 4L3 2.999C3 2.997 10.002 3 10.002 3zM29 3v3a1 1 0 00.99 1h4.02c.546 0 .99-.444.99-1V3a1 1 0 00-.99-1h-4.02A.993.993 0 0029 3zm5.01 0C33.997 3 34 6 34 6c0 .004-4.01 0-4.01 0 .012 0 .01-3 .01-3 0-.004 4.01 0 4.01 0z"/></g><g mask="url(#b)" fill="#A6E22D"><path d="M12 3.003v4.994A1 1 0 0013 9h14c.552 0 1-.438 1-1.003V3.003A1 1 0 0027 2H13c-.552 0-1 .438-1 1.003zM27 3v4.997C27 8.005 13 8 13 8V3.003C13 2.995 27 3 27 3z"/></g></g></svg>

After

Width:  |  Height:  |  Size: 914 B

View File

@@ -0,0 +1 @@
<svg width="110" viewBox="0 0 37 21" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="M0 0h37v21H0z"/></defs><g fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><use xlink:href="#a"/><g mask="url(#b)" fill="#75715E"><path d="M2 2.999v1.002c0 .552.446.999.998.999h7.004c.551 0 .998-.443.998-.999V2.999A.998.998 0 0010.002 2H2.998A.995.995 0 002 2.999zM10.002 3L10 4.001C10 4.003 2.998 4 2.998 4L3 2.999C3 2.997 10.002 3 10.002 3zM29 3v3a1 1 0 00.99 1h4.02c.546 0 .99-.444.99-1V3a1 1 0 00-.99-1h-4.02A.993.993 0 0029 3zm5.01 0C33.997 3 34 6 34 6c0 .004-4.01 0-4.01 0 .012 0 .01-3 .01-3 0-.004 4.01 0 4.01 0z"/></g><g mask="url(#b)" fill="#A6E22D"><path d="M12 3v15c0 .552.445 1 1 1h14c.552 0 1-.455 1-1V3c0-.552-.445-1-1-1H13c-.552 0-1 .455-1 1zm15 0c.002 0 0 15 0 15 0-.004-14 0-14 0-.002 0 0-15 0-15 0 .004 14 0 14 0z"/></g></g></svg>

After

Width:  |  Height:  |  Size: 922 B

View File

@@ -0,0 +1 @@
<svg width="110" viewBox="0 0 37 21" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="M0 0h37v21H0z"/></defs><g fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><use xlink:href="#a"/><g mask="url(#b)" fill="#75715E"><path d="M0 0h37v1H0zM0 20h37v1H0z"/></g><path d="M4 6.009v8.982C4 16.101 4.902 17 5.995 17h25.01A2.003 2.003 0 0033 14.991V6.01C33 4.899 32.098 4 31.005 4H5.995A2.003 2.003 0 004 6.009zM31.005 5c.543 0 .995.454.995 1.009v8.982c0 .557-.448 1.009-.995 1.009H5.995C5.452 16 5 15.546 5 14.991V6.01C5 5.452 5.448 5 5.995 5h25.01z" fill="#A6E22D" mask="url(#b)"/></g></svg>

After

Width:  |  Height:  |  Size: 672 B

View File

@@ -0,0 +1 @@
<svg width="110" viewBox="0 0 37 21" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="M0 0h37v21H0z"/></defs><g fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><use xlink:href="#a"/><g mask="url(#b)" fill="#75715E"><path d="M1 16h36v1H1zM5 9.998v2.004A2 2 0 006.998 14h3.004A2 2 0 0012 12.002V9.998A2 2 0 0010.002 8H6.998A2 2 0 005 9.998zM10.002 9a1 1 0 01.998.998v2.004a1 1 0 01-.998.998H6.998A1 1 0 016 12.002V9.998A1 1 0 016.998 9h3.004zM26 11.005v.99c0 1.107.898 2.005 1.998 2.005h3.004A1.999 1.999 0 0033 11.995v-.99A2.004 2.004 0 0031.002 9h-3.004A1.999 1.999 0 0026 11.005zM31.002 10c.548 0 .998.45.998 1.005v.99A1 1 0 0131.002 13h-3.004c-.548 0-.998-.45-.998-1.005v-.99A1 1 0 0127.998 10h3.004z"/></g><path d="M14 7.998v4.004c0 1.103.887 1.998 2.006 1.998h5.988A1.997 1.997 0 0024 12.002V7.998A1.995 1.995 0 0021.994 6h-5.988A1.997 1.997 0 0014 7.998zM21.994 7A.995.995 0 0123 7.998v4.004a.997.997 0 01-1.006.998h-5.988A.995.995 0 0115 12.002V7.998A.997.997 0 0116.006 7h5.988z" fill="#A6E22D" mask="url(#b)"/></g></svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@@ -0,0 +1 @@
<svg width="110" viewBox="0 0 37 21" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="M0 0h37v21H0z"/></defs><g fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><use xlink:href="#a"/><path fill="#66D9EF" mask="url(#b)" d="M29 17.5v.5h1V7h3l-3.5-4L26 7h3z"/><g mask="url(#b)" fill="#75715E"><path opacity=".4" d="M3 14h20v5H3z"/><path opacity=".7" d="M3 8h20v5H3z"/><path d="M3 2h20v5H3z"/></g><path d="M.005 1.995v17.01A2 2 0 002 21h33.005A2 2 0 0037 19.005V1.995A2 2 0 0035.005 0H2A2 2 0 00.005 1.995zm35-.995a1 1 0 01.995.995v17.01a1 1 0 01-.995.995H1.995A1 1 0 011 19.005V1.995A1 1 0 011.995 1h33.01z" fill="#A6E22D" mask="url(#b)"/></g></svg>

After

Width:  |  Height:  |  Size: 734 B

View File

@@ -0,0 +1 @@
<svg width="110" viewBox="0 0 37 21" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="M0 0h37v21H0z"/></defs><g fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><use xlink:href="#a"/><path fill="#66D9EF" mask="url(#b)" d="M29 3.5V3h1v11h3l-3.5 4-3.5-4h3z"/><g mask="url(#b)" fill="#75715E"><path d="M3 14h20v5H3z"/><path opacity=".7" d="M3 8h20v5H3z"/><path opacity=".4" d="M3 2h20v5H3z"/></g><path d="M.005 1.995v17.01A2 2 0 002 21h33.005A2 2 0 0037 19.005V1.995A2 2 0 0035.005 0H2A2 2 0 00.005 1.995zm35-.995a1 1 0 01.995.995v17.01a1 1 0 01-.995.995H1.995A1 1 0 011 19.005V1.995A1 1 0 011.995 1h33.01z" fill="#A6E22D" mask="url(#b)"/></g></svg>

After

Width:  |  Height:  |  Size: 734 B

View File

@@ -0,0 +1 @@
<svg width="110" viewBox="0 0 37 21" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="M0 0h37v21H0z"/></defs><g fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><use xlink:href="#a"/><path fill="#66D9EF" mask="url(#b)" d="M32.5 14h.5v-1H9v-3l-4 3.5L9 17v-3z"/><g mask="url(#b)" fill="#75715E"><path opacity=".4" d="M27 3h7v5h-7z"/><path opacity=".6" d="M19 3h7v5h-7z"/><path opacity=".8" d="M11 3h7v5h-7z"/><path d="M3 3h7v5H3z"/></g><path d="M.005 1.995v17.01A2 2 0 002 21h33.005A2 2 0 0037 19.005V1.995A2 2 0 0035.005 0H2A2 2 0 00.005 1.995zm35-.995a1 1 0 01.995.995v17.01a1 1 0 01-.995.995H1.995A1 1 0 011 19.005V1.995A1 1 0 011.995 1h33.01z" fill="#A6E22D" mask="url(#b)"/></g></svg>

After

Width:  |  Height:  |  Size: 775 B

View File

@@ -0,0 +1 @@
<svg width="110" viewBox="0 0 37 21" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="M0 0h37v21H0z"/></defs><g fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><use xlink:href="#a"/><path fill="#66D9EF" mask="url(#b)" d="M4.5 14H4v-1h24v-3l4 3.5-4 3.5v-3z"/><g mask="url(#b)" fill="#75715E"><path opacity=".4" d="M3 3h7v5H3z"/><path opacity=".6" d="M11 3h7v5h-7z"/><path opacity=".8" d="M19 3h7v5h-7z"/><path d="M27 3h7v5h-7z"/></g><path d="M.005 1.995v17.01A2 2 0 002 21h33.005A2 2 0 0037 19.005V1.995A2 2 0 0035.005 0H2A2 2 0 00.005 1.995zm35-.995a1 1 0 01.995.995v17.01a1 1 0 01-.995.995H1.995A1 1 0 011 19.005V1.995A1 1 0 011.995 1h33.01z" fill="#A6E22D" mask="url(#b)"/></g></svg>

After

Width:  |  Height:  |  Size: 774 B

View File

@@ -0,0 +1 @@
<svg width="110" viewBox="0 0 37 21" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="M0 0h37v21H0z"/></defs><g fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><use xlink:href="#a"/><g mask="url(#b)" fill="#75715E"><path d="M31 3v15a1 1 0 001.01 1h1.98A1.01 1.01 0 0035 18V3a1 1 0 00-1.01-1h-1.98A1.01 1.01 0 0031 3zm2.99 0c.012 0 .01-.002.01 0v15c0-.006-.006 0-.01 0h-1.98c-.012 0-.01.002-.01 0V3c0 .006.006 0 .01 0h1.98zM26 3v15a1 1 0 001.01 1h1.98A1.01 1.01 0 0030 18V3a1 1 0 00-1.01-1h-1.98A1.01 1.01 0 0026 3zm2.99 0c.012 0 .01-.002.01 0v15c0-.006-.006 0-.01 0h-1.98c-.012 0-.01.002-.01 0V3c0 .006.006 0 .01 0h1.98z"/></g><path d="M2 3v15c0 .552.439 1 1.003 1h20.994C24.55 19 25 18.545 25 18V3c0-.552-.439-1-1.003-1H3.003C2.45 2 2 2.455 2 3zm21.997 0C24.004 3 24 18 24 18c0-.004-20.997 0-20.997 0C2.996 18 3 3 3 3c0 .004 20.997 0 20.997 0z" fill="#A6E22D" mask="url(#b)"/><path d="M16 10V7l4 3.5-4 3.5v-3h-5v3l-4-3.5L11 7v3h5zM5 7h1v7H5V7zm16 0h1v7h-1V7z" fill="#66D9EF" mask="url(#b)"/></g></svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@@ -0,0 +1 @@
<svg width="110" viewBox="0 0 37 21" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="M0 0h37v21H0z"/></defs><g fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><use xlink:href="#a"/><g mask="url(#b)" fill="#75715E"><path d="M31 3v15a1 1 0 001.01 1h1.98A1.01 1.01 0 0035 18V3a1 1 0 00-1.01-1h-1.98A1.01 1.01 0 0031 3zm2.99 0c.012 0 .01-.002.01 0v15c0-.006-.006 0-.01 0h-1.98c-.012 0-.01.002-.01 0V3c0 .006.006 0 .01 0h1.98zM26 3v15a1 1 0 001.01 1h1.98A1.01 1.01 0 0030 18V3a1 1 0 00-1.01-1h-1.98A1.01 1.01 0 0026 3zm2.99 0c.012 0 .01-.002.01 0v15c0-.006-.006 0-.01 0h-1.98c-.012 0-.01.002-.01 0V3c0 .006.006 0 .01 0h1.98z"/></g><path d="M2 3v15c0 .552.439 1 1.003 1h20.994C24.55 19 25 18.545 25 18V3c0-.552-.439-1-1.003-1H3.003C2.45 2 2 2.455 2 3zm21.997 0C24.004 3 24 18 24 18c0-.004-20.997 0-20.997 0C2.996 18 3 3 3 3c0 .004 20.997 0 20.997 0z" fill="#A6E22D" mask="url(#b)"/><path fill="#66D9EF" mask="url(#b)" d="M19 10V7l4 3.5-4 3.5v-3H8v3l-4-3.5L8 7v3z"/></g></svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

View File

@@ -0,0 +1 @@
<svg width="110" viewBox="0 0 37 21" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="M0 0h37v21H0z"/></defs><g fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><use xlink:href="#a"/><g mask="url(#b)" fill="#75715E"><path d="M24 3v15a1 1 0 001.01 1h2.98A1.01 1.01 0 0029 18V3a1 1 0 00-1.01-1h-2.98A1.01 1.01 0 0024 3zm3.986 0c.017 0 .014-.002.014 0v15c0-.006-.009 0-.014 0h-2.972c-.017 0-.014.002-.014 0V3c0 .006.009 0 .014 0h2.972zM30 3v15a1 1 0 001.01 1h2.98A1.01 1.01 0 0035 18V3a1 1 0 00-1.01-1h-2.98A1.01 1.01 0 0030 3zm3.986 0c.017 0 .014-.002.014 0v15c0-.006-.009 0-.014 0h-2.972c-.017 0-.014.002-.014 0V3c0 .006.009 0 .014 0h2.972z"/></g><path d="M2 3v15c0 .552.439 1 1.003 1h18.994C22.55 19 23 18.545 23 18V3c0-.552-.439-1-1.003-1H3.003C2.45 2 2 2.455 2 3zm19.996 0C22.003 3 22 18 22 18c0-.004-18.996 0-18.996 0C2.996 18 3 3 3 3c0 .004 18.996 0 18.996 0z" fill="#A6E22D" mask="url(#b)"/><path d="M23 10v1h-2v3l-4-3.5L21 7v3h2zm-7-4h1v9h-1V6zM8 6h1v9H8V6zm-6 4v1h2v3l4-3.5L4 7v3H2z" fill="#66D9EF" mask="url(#b)"/></g></svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@@ -0,0 +1 @@
<svg width="110" viewBox="0 0 37 21" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="M0 0h37v21H0z"/></defs><g fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><use xlink:href="#a"/><g mask="url(#b)" fill="#75715E"><path d="M24 3v15a1 1 0 001.01 1h2.98A1.01 1.01 0 0029 18V3a1 1 0 00-1.01-1h-2.98A1.01 1.01 0 0024 3zm3.986 0c.017 0 .014-.002.014 0v15c0-.006-.009 0-.014 0h-2.972c-.017 0-.014.002-.014 0V3c0 .006.009 0 .014 0h2.972zM30 3v15a1 1 0 001.01 1h2.98A1.01 1.01 0 0035 18V3a1 1 0 00-1.01-1h-2.98A1.01 1.01 0 0030 3zm3.986 0c.017 0 .014-.002.014 0v15c0-.006-.009 0-.014 0h-2.972c-.017 0-.014.002-.014 0V3c0 .006.009 0 .014 0h2.972z"/></g><path d="M2 3v15c0 .552.439 1 1.003 1h18.994C22.55 19 23 18.545 23 18V3c0-.552-.439-1-1.003-1H3.003C2.45 2 2 2.455 2 3zm19.996 0C22.003 3 22 18 22 18c0-.004-18.996 0-18.996 0C2.996 18 3 3 3 3c0 .004 18.996 0 18.996 0z" fill="#A6E22D" mask="url(#b)"/><path d="M23 10v1h-4v3l-4-3.5L19 7v3h4zM2 10v1h4v3l4-3.5L6 7v3H2z" fill="#66D9EF" mask="url(#b)"/></g></svg>

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

@@ -0,0 +1 @@
<svg width="110" viewBox="0 0 37 21" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="M0 0h37v21H0z"/></defs><g fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><use xlink:href="#a"/><g mask="url(#b)" fill="#75715E"><path d="M12 3h16v5H12zM2 3h9v5H2zM29 3h8v5h-8z"/></g><path d="M37 10v9.005A2 2 0 0135.005 21H2a2 2 0 01-1.995-1.995V1.995A2 2 0 012 0h33.005a2 2 0 011.728 1H1.995A1 1 0 001 1.995v17.01a1 1 0 00.995.995h33.01a1 1 0 00.995-.995V10h1z" fill="#A6E22D" mask="url(#b)"/></g></svg>

After

Width:  |  Height:  |  Size: 579 B

View File

@@ -0,0 +1 @@
<svg width="110" viewBox="0 0 37 21" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="M0 0h37v21H0z"/></defs><g fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><use xlink:href="#a"/><g mask="url(#b)" fill="#75715E"><path opacity=".3" d="M12 13h5v5h-5z"/><path opacity=".5" d="M18 13h5v5h-5z"/><path opacity=".7" d="M24 13h5v5h-5z"/><path d="M19 3h5v5h-5z"/><path d="M13 3.75V3h5v5h-5v-.75l2-1.75-2-1.75z" opacity=".8"/></g><g mask="url(#b)"><path fill="#66D9EF" d="M8 9l4-3.5L8 2z"/><path d="M8.5 5.5C2 5 3.5 12 8.5 12s18.5-2.5 22-2.5 5.5 6 0 6" stroke="#66D9EF"/></g><path d="M.005 1.995v17.01A2 2 0 002 21h33.005A2 2 0 0037 19.005V1.995A2 2 0 0035.005 0H2A2 2 0 00.005 1.995zm35-.995a1 1 0 01.995.995v17.01a1 1 0 01-.995.995H1.995A1 1 0 011 19.005V1.995A1 1 0 011.995 1h33.01z" fill="#A6E22D" mask="url(#b)"/></g></svg>

After

Width:  |  Height:  |  Size: 910 B

View File

@@ -0,0 +1 @@
<svg width="110" viewBox="0 0 37 21" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="M0 0h37v21H0z"/></defs><g fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><use xlink:href="#a"/><path d="M13 13.75V13h5v5h-5v-.75l2-1.75-2-1.75z" fill="#75715E" opacity=".8" mask="url(#b)"/><path fill="#75715E" mask="url(#b)" d="M19 13h5v5h-5z"/><path fill="#75715E" opacity=".3" mask="url(#b)" d="M12 3h5v5h-5z"/><path fill="#75715E" opacity=".5" mask="url(#b)" d="M18 3h5v5h-5z"/><path fill="#75715E" opacity=".7" mask="url(#b)" d="M24 3h5v5h-5z"/><g mask="url(#b)"><path fill="#66D9EF" d="M8 12l4 3.5L8 19z"/><path d="M8.5 15.5C2 16 3.5 9 8.5 9s18.5 2.5 22 2.5 5.5-6 0-6" stroke="#66D9EF"/></g><path d="M.005 1.995v17.01A2 2 0 002 21h33.005A2 2 0 0037 19.005V1.995A2 2 0 0035.005 0H2A2 2 0 00.005 1.995zm35-.995a1 1 0 01.995.995v17.01a1 1 0 01-.995.995H1.995A1 1 0 011 19.005V1.995A1 1 0 011.995 1h33.01z" fill="#A6E22D" mask="url(#b)"/></g></svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

View File

@@ -0,0 +1,8 @@
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 11" fill="none" stroke="black" stroke-width="1" stroke-linejoin="round">
<rect x="0.5" y="0.5" width="12" height="10" stroke-dasharray="1 1" stroke-dashoffset="0.5" />
<rect x="2.5" y="3.5" width="8" height="4"/>
<line x1="6.5" x2="6.5" y1="3" y2="8"/>
</svg>

After

Width:  |  Height:  |  Size: 542 B

View File

@@ -0,0 +1,8 @@
<!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 13 11" fill="none" stroke="white" stroke-width="1" stroke-linejoin="round">
<rect x="0.5" y="0.5" width="12" height="10" stroke-dasharray="1 1" stroke-dashoffset="0.5" />
<rect x="2.5" y="3.5" width="8" height="4"/>
<line x1="6.5" x2="6.5" y1="3" y2="8"/>
</svg>

After

Width:  |  Height:  |  Size: 542 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.9 KiB

View File

@@ -0,0 +1 @@
<svg width="110" viewBox="0 0 37 21" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="M0 0h37v21H0z"/></defs><g fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><use xlink:href="#a"/><g mask="url(#b)" fill="#75715E"><path d="M10 8h5v5h-5zM16 8h5v5h-5zM22 8h5v5h-5z"/></g><path d="M.005 1.995v17.01A2 2 0 002 21h33.005A2 2 0 0037 19.005V1.995A2 2 0 0035.005 0H2A2 2 0 00.005 1.995zm35-.995a1 1 0 01.995.995v17.01a1 1 0 01-.995.995H1.995A1 1 0 011 19.005V1.995A1 1 0 011.995 1h33.01z" fill="#A6E22D" mask="url(#b)"/></g></svg>

After

Width:  |  Height:  |  Size: 612 B

View File

@@ -0,0 +1 @@
<svg width="110" viewBox="0 0 37 21" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="M0 0h37v21H0z"/></defs><g fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><use xlink:href="#a"/><g mask="url(#b)" fill="#75715E"><path d="M17 8h5v5h-5zM23 8h5v5h-5zM29 8h5v5h-5z"/></g><path d="M.005 1.995v17.01A2 2 0 002 21h33.005A2 2 0 0037 19.005V1.995A2 2 0 0035.005 0H2A2 2 0 00.005 1.995zm35-.995a1 1 0 01.995.995v17.01a1 1 0 01-.995.995H1.995A1 1 0 011 19.005V1.995A1 1 0 011.995 1h33.01z" fill="#A6E22D" mask="url(#b)"/></g></svg>

After

Width:  |  Height:  |  Size: 612 B

View File

@@ -0,0 +1 @@
<svg width="110" viewBox="0 0 37 21" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="M0 0h37v21H0z"/></defs><g fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><use xlink:href="#a"/><g mask="url(#b)" fill="#75715E"><path d="M3 8h5v5H3zM9 8h5v5H9zM15 8h5v5h-5z"/></g><path d="M.005 1.995v17.01A2 2 0 002 21h33.005A2 2 0 0037 19.005V1.995A2 2 0 0035.005 0H2A2 2 0 00.005 1.995zm35-.995a1 1 0 01.995.995v17.01a1 1 0 01-.995.995H1.995A1 1 0 011 19.005V1.995A1 1 0 011.995 1h33.01z" fill="#A6E22D" mask="url(#b)"/></g></svg>

After

Width:  |  Height:  |  Size: 608 B

View File

@@ -0,0 +1 @@
<svg width="110" viewBox="0 0 37 21" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="M0 0h37v21H0z"/></defs><g fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><use xlink:href="#a"/><g mask="url(#b)" fill="#75715E"><path d="M5.5 8h5v5h-5zM16 8h5v5h-5zM26.5 8h5v5h-5z"/></g><path d="M.005 1.995v17.01A2 2 0 002 21h33.005A2 2 0 0037 19.005V1.995A2 2 0 0035.005 0H2A2 2 0 00.005 1.995zm35-.995a1 1 0 01.995.995v17.01a1 1 0 01-.995.995H1.995A1 1 0 011 19.005V1.995A1 1 0 011.995 1h33.01z" fill="#A6E22D" mask="url(#b)"/></g></svg>

After

Width:  |  Height:  |  Size: 615 B

View File

@@ -0,0 +1 @@
<svg width="110" viewBox="0 0 37 21" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="M0 0h37v21H0z"/></defs><g transform="matrix(-1 0 0 1 37 0)" fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><use xlink:href="#a"/><g mask="url(#b)" fill="#75715E"><path d="M3 8h5v5H3zM16 8h5v5h-5zM29 8h5v5h-5z"/></g><path d="M.005 1.995v17.01A2 2 0 002 21h33.005A2 2 0 0037 19.005V1.995A2 2 0 0035.005 0H2A2 2 0 00.005 1.995zm35-.995a1 1 0 01.995.995v17.01a1 1 0 01-.995.995H1.995A1 1 0 011 19.005V1.995A1 1 0 011.995 1h33.01z" fill="#A6E22D" mask="url(#b)"/></g></svg>

After

Width:  |  Height:  |  Size: 644 B

View File

@@ -0,0 +1 @@
<svg width="110" viewBox="0 0 37 21" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="M0 0h37v21H0z"/></defs><g fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><use xlink:href="#a"/><g mask="url(#b)" fill="#75715E"><path d="M6 8h5v5H6zM16 8h5v5h-5zM26 8h5v5h-5z"/></g><path d="M.005 1.995v17.01A2 2 0 002 21h33.005A2 2 0 0037 19.005V1.995A2 2 0 0035.005 0H2A2 2 0 00.005 1.995zm35-.995a1 1 0 01.995.995v17.01a1 1 0 01-.995.995H1.995A1 1 0 011 19.005V1.995A1 1 0 011.995 1h33.01z" fill="#A6E22D" mask="url(#b)"/></g></svg>

After

Width:  |  Height:  |  Size: 610 B

View File

@@ -0,0 +1 @@
<svg width="110" viewBox="0 0 37 21" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs><path id="a" d="M0 0h37v21H0z"/></defs><g fill="none" fill-rule="evenodd"><mask id="b" fill="#fff"><use xlink:href="#a"/></mask><use xlink:href="#a"/><g mask="url(#b)"><path d="M2 2.999v3.002c0 .552.446.999.998.999h7.004c.551 0 .998-.443.998-.999V2.999A.998.998 0 0010.002 2H2.998A.995.995 0 002 2.999zM10.002 3L10 6.001C10 6.003 2.998 6 2.998 6L3 2.999C3 2.997 10.002 3 10.002 3zM29 3v3a1 1 0 00.99 1h4.02c.546 0 .99-.444.99-1V3a1 1 0 00-.99-1h-4.02A.993.993 0 0029 3zm5.01 0C33.997 3 34 6 34 6c0 .004-4.01 0-4.01 0 .012 0 .01-3 .01-3 0-.004 4.01 0 4.01 0z" fill="#75715E"/><path fill="#66D9EF" d="M8.122 10.67L3.378 8.271l-1.746 5.02z"/><path d="M4.853 11.915c.789 1.905 2.243 5.794 7.195 5.794s8.103-2.81 8.32-7.157" stroke="#66D9EF"/></g><path d="M12 3.003v4.994A1 1 0 0013 9h14c.552 0 1-.438 1-1.003V3.003A1 1 0 0027 2H13c-.552 0-1 .438-1 1.003zM27 3v4.997C27 8.005 13 8 13 8V3.003C13 2.995 27 3 27 3z" fill="#A6E22D" mask="url(#b)"/></g></svg>

After

Width:  |  Height:  |  Size: 1.0 KiB

View File

@@ -0,0 +1,128 @@
// @ts-check
(function () {
const interactiveFlexContainerPlaygrounds = document.querySelectorAll(
'.interactive-playground.flex-container'
);
interactiveFlexContainerPlaygrounds.forEach((playground) => {
playground.addEventListener('click', flexContainerPlayground);
});
const interactiveFlexItemPlaygrounds = document.querySelectorAll(
'.interactive-playground.flex-item'
);
interactiveFlexItemPlaygrounds.forEach((playground) => {
playground.addEventListener('click', flexItemPlayground);
});
/**
* @type {Element}
*/
const directionalityRadioGroup = document.querySelector(
'[name="js-directionality-radio-group"]'
);
directionalityRadioGroup.addEventListener('change', (event) => {
/**
* @type {string}
*/
// @ts-ignore
const directionality = event.target.value;
updateDirectionality(directionality);
});
/**
*
* @param {Event} event
*/
function flexContainerPlayground(event) {
// @ts-ignore
if (event.target.nodeName !== 'BUTTON') {
return;
}
/**
* @type {HTMLDivElement}
*/
// @ts-ignore
const playgroundContainer = event.currentTarget;
const buttons = [...playgroundContainer.querySelectorAll('button')];
buttons.forEach((button) => button.classList.remove('selected'));
/**
* @type {HTMLButtonElement}
*/
// @ts-ignore
const selectedButton = event.target;
selectedButton.classList.add('selected');
const selectedButtonDataClass = selectedButton.dataset.jsClass;
const flexboxContainer =
playgroundContainer.querySelector('.flexbox-container');
flexboxContainer.className = 'flexbox-container js-flexbox-container';
flexboxContainer.classList.add(selectedButtonDataClass);
}
/**
* @param {Event} event
*/
function flexItemPlayground(event) {
// @ts-ignore
if (event.target.nodeName !== 'BUTTON') {
return;
}
/**
* @type {HTMLDivElement}
*/
// @ts-ignore
const playgroundContainer = event.currentTarget;
const buttons = [...playgroundContainer.querySelectorAll('button')];
buttons.forEach((button) => button.classList.remove('selected'));
/**
* @type {HTMLButtonElement}
*/
// @ts-ignore
const selectedButton = event.target;
selectedButton.classList.add('selected');
const selectedButtonDataClass = selectedButton.dataset.jsClass;
const secondElement = playgroundContainer.querySelector(
'.flexbox-container > div:nth-child(2)'
);
secondElement.className = '';
secondElement.classList.add(selectedButtonDataClass);
}
/**
* @param {string} selectedDirectionality
*/
function updateDirectionality(selectedDirectionality) {
/**
* @type {NodeListOf<HTMLDivElement>}
*/
const flexboxContainers = document.querySelectorAll(
'.js-flexbox-container'
);
flexboxContainers.forEach(
(element) => (element.dir = selectedDirectionality)
);
/**
* @type {NodeListOf<HTMLElement>}
*/
const directionalityCodeContainers = document.querySelectorAll(
'.js-directionality-code'
);
directionalityCodeContainers.forEach(
(element) => (element.innerHTML = `dir="${selectedDirectionality}"`)
);
}
})();

File diff suppressed because one or more lines are too long

View File

@@ -0,0 +1,17 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
const data = {
'display-flex': 'display-flex',
'display-inline-flex': 'display-inline-flex',
'display-flex1': 'display-flex',
'display-flex2': 'display-flex',
'display-flex3': 'display-flex',
'display-flex4': 'display-flex',
'display-flex5': 'display-flex',
'display-flex6': 'display-flex',
'display-flex7': 'display-flex',
'display-flex8': 'display-flex',
'display-flex9': 'display-flex',
};
exports.default = data;
//# sourceMappingURL=data.js.map

View File

@@ -0,0 +1,161 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.deactivate = exports.activate = void 0;
const vscode = require("vscode");
const path_1 = require("path");
const fs_1 = require("fs");
const webviewContent_1 = require("./webviewContent");
const flexboxPatterns = require("./flexboxPatterns");
const supportedFiles = ['css', 'less', 'sass', 'scss'];
let decorationType;
function activate(context) {
decorationType = vscode.window.createTextEditorDecorationType({
after: {
margin: '0 0.2rem 0 0',
width: '.8125rem',
},
dark: {
after: {
contentIconPath: context.asAbsolutePath('/images/flexbox-icon-light.svg'),
},
},
light: {
after: {
contentIconPath: context.asAbsolutePath('/images/flexbox-icon-dark.svg'),
},
},
});
const activeEditor = vscode.window.activeTextEditor;
if (activeEditor) {
decorate(activeEditor);
}
const disposableCommand = vscode.commands.registerCommand('flexbox.cheatsheet', () => {
const styleRoot = vscode.Uri.file((0, path_1.join)(context.extensionPath, 'style'));
const imagesRoot = vscode.Uri.file((0, path_1.join)(context.extensionPath, 'images'));
const scriptRoot = vscode.Uri.file((0, path_1.join)(context.extensionPath, 'js'));
// Create and show a new webview
const panel = vscode.window.createWebviewPanel('flexboxCheatsheet', 'CSS Flexbox Cheatsheet', vscode.ViewColumn.Beside, {
localResourceRoots: [styleRoot, imagesRoot, scriptRoot],
enableScripts: true,
});
const stylePath = panel.webview.asWebviewUri(styleRoot);
const imagesPath = panel.webview.asWebviewUri(imagesRoot);
const scriptPath = panel.webview.asWebviewUri(scriptRoot);
const cspSource = panel.webview.cspSource;
panel.webview.html = (0, webviewContent_1.getWebviewContent)(cspSource, scriptPath, stylePath, imagesPath);
});
const disposableVisibleTextEditors = vscode.window.onDidChangeVisibleTextEditors((event) => {
let editor = vscode.window.activeTextEditor;
if (editor && supportedFiles.includes(editor.document.languageId)) {
decorate(editor);
}
});
const disposableChangeDocument = vscode.workspace.onDidChangeTextDocument((event) => {
const openEditor = vscode.window.visibleTextEditors.filter((editor) => editor.document.uri === event.document.uri)[0];
if (openEditor &&
supportedFiles.includes(openEditor.document.languageId)) {
decorate(openEditor);
}
});
const hoverProvider = {
provideHover(doc, pos, token) {
const range = getPropertyRangeAtPosition(doc, pos);
if (range === undefined) {
return;
}
const property = getPropertyAtRange(doc, range);
const markdownString = buildMarkdownString(context, property);
return new vscode.Hover(markdownString, range);
},
};
const disposableHoverProvider = vscode.languages.registerHoverProvider(supportedFiles, hoverProvider);
context.subscriptions.push(disposableCommand, disposableHoverProvider, disposableChangeDocument, disposableVisibleTextEditors);
}
exports.activate = activate;
function decorate(editor) {
const sourceCode = editor.document.getText();
let decorationsArray = [];
const sourceCodeArr = sourceCode.split('\n');
for (let line = 0; line < sourceCodeArr.length; line++) {
const sourceCode = sourceCodeArr[line];
let matches = matchAll(flexboxPatterns.displayFlexPattern, sourceCode);
if (matches.length > 0) {
matches.forEach((match) => {
if (match.index !== undefined) {
const flexIndex = sourceCode.indexOf('flex', match.index);
let range = new vscode.Range(new vscode.Position(line, match.index), new vscode.Position(line, flexIndex));
let decoration = { range };
decorationsArray.push(decoration);
}
});
}
}
editor.setDecorations(decorationType, decorationsArray);
}
function matchAll(pattern, text) {
const out = [];
let match;
pattern.lastIndex = 0;
while ((match = pattern.exec(text))) {
out.push(match);
}
return out;
}
function buildMarkdownString(context, property) {
let markdownString = [];
const commandUri = vscode.Uri.parse('command:flexbox.cheatsheet');
const flexboxCommand = new vscode.MarkdownString(`[Open CSS Flexbox Cheatsheet](${commandUri} "Open CSS Flexbox Cheatsheet")`);
// To enable command URIs in Markdown content, you must set the `isTrusted` flag.
// When creating trusted Markdown string, make sure to properly sanitize all the
// input content so that only expected command URIs can be executed
flexboxCommand.isTrusted = true;
markdownString.push(flexboxCommand);
const filePath = (0, path_1.join)(context.extensionPath, 'images', `${property}.svg`);
const isFile = doesFileExist(filePath);
if (isFile) {
const onDiskPath = vscode.Uri.file(filePath);
const propertyIllustration = new vscode.MarkdownString(`![${property}](${onDiskPath.toString()})`);
markdownString.push(propertyIllustration);
}
return markdownString;
}
function getPropertyRangeAtPosition(doc, pos) {
let propertyRange;
for (const pattern of flexboxPatterns.allFlexboxPatterns) {
const range = doc.getWordRangeAtPosition(pos, pattern);
if (range) {
propertyRange = range;
break;
}
}
return propertyRange;
}
function doesFileExist(filePath) {
try {
const stats = (0, fs_1.lstatSync)(filePath);
return stats.isFile();
}
catch (_a) {
return false;
}
}
function getPropertyAtRange(doc, range) {
let property = doc.getText(range);
if (flexboxPatterns.flexGrowBiggerThanZero.test(property)) {
return 'flex-grow-1';
}
else if (flexboxPatterns.flexShrinkBiggerThanZero.test(property)) {
return 'flex-shrink-1';
}
else if (flexboxPatterns.order.test(property)) {
return 'order';
}
return property
.split(':')
.map((elem) => elem.trim())
.join('-')
.replace(';', '');
}
function deactivate() { }
exports.deactivate = deactivate;
//# sourceMappingURL=extension.js.map

View File

@@ -0,0 +1,49 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.allFlexboxPatterns = exports.order = exports.flexShrinkBiggerThanZero = exports.flexGrowBiggerThanZero = exports.displayFlexPattern = void 0;
/**
* Matches `display: flex` property
*/
exports.displayFlexPattern = /display:\s*flex;?/g;
/**
* Matches `display: inline-flex` property
*/
const displayInlineFlexPattern = /display:\s*inline-flex;?/g;
/**
* Matches all `align-items`, `align-content` and `align-self` properties
*/
const alignPattern = /align-[\w]+:\s*[\w-]+;?/g;
/**
* Matches all `justify-content` properties
*/
const justifyPattern = /justify-[\w]+:\s*[\w-]+;?/g;
/**
* Matches all `flex-direction` and `flex-wrap` properties
*/
const flexWrapAndDirectionPattern = /flex-(wrap|direction):\s*[\w-]+;?/g;
/**
* Matches all `flex-grow` and `flex-shrink` properties
*/
const flexGrowAndShrinkPattern = /flex-(grow|shrink):\s*\d+;?/g;
/**
* Matches `flex-grow` values bigger than 0
*/
exports.flexGrowBiggerThanZero = /flex-grow:\s*(?!0)\d+;?/;
/**
* Matches `flex-shrink` values bigger than 0
*/
exports.flexShrinkBiggerThanZero = /flex-shrink:\s*(?!0)\d+;?/;
/**
* Matches `order` property
*/
exports.order = /order:\s*?-?\d+;?/g;
exports.allFlexboxPatterns = [
exports.displayFlexPattern,
displayInlineFlexPattern,
alignPattern,
justifyPattern,
flexWrapAndDirectionPattern,
flexGrowAndShrinkPattern,
exports.order
];
//# sourceMappingURL=flexboxPatterns.js.map

View File

@@ -0,0 +1,481 @@
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.getWebviewContent = void 0;
const webviewUiToolkitHash = 'sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU=';
function getWebviewContent(cspSource, scriptPath, stylePath, imagesPath) {
return /*html*/ `<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; script-src ${cspSource}; style-src ${cspSource} '${webviewUiToolkitHash}'; img-src ${cspSource};">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Flexbox Cheatsheet</title>
<link rel="stylesheet" href="${stylePath}/custom.css">
</head>
<body>
<main>
<div class="container">
<h1>CSS Flexbox Cheatsheet</h1>
<h2>Settings</h2>
<div class="directionality-settings">
<p>Select the <i>directionality</i> to be used in the interactive playgrounds. (<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir">Learn more</a>)</p>
<vscode-radio-group orientation="vertical" name="js-directionality-radio-group">
<label slot="label">Directionality</label>
<vscode-radio value="ltr" checked>LTR (left-to-right)</vscode-radio>
<vscode-radio value="rtl">RTL (right-to-left)</vscode-radio>
</vscode-radio-group>
</div>
<h2>Flex Container</h2>
<div class="group">
<h3>Display</h3>
<div class="row">
<div>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/display" target="_blank" rel="noopener">display</a>: flex;
</div>
<img src="${imagesPath}/display-flex.svg" alt="display: flex;">
</div>
<div class="row">
<div>display: inline-flex;</div>
<img src="${imagesPath}/display-inline-flex.svg" alt="display: inline-flex;">
</div>
</div>
<div class="group">
<h3>Flex flow (shorthand)</h3>
<div class="row">
<div><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-flow" target="_blank" rel="noopener">flex-flow</a>:
<span class="default">row nowrap;</span> <span class="shorthand-hint">(flex-direction flex-wrap)</span>
</div>
</div>
</div>
<div class="group">
<h3>Flex direction</h3>
<div class="row">
<div>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction" target="_blank" rel="noopener">flex-direction</a>: <span class="default">row</span>;
</div>
<img src="${imagesPath}/flex-direction-row.svg" alt="flex-direction: row;">
</div>
<div class="row">
<div>flex-direction: row-reverse;</div>
<img src="${imagesPath}/flex-direction-row-reverse.svg" alt="flex-direction: row-reverse;">
</div>
<div class="row">
<div>flex-direction: column;</div>
<img src="${imagesPath}/flex-direction-column.svg" alt="flex-direction: column;">
</div>
<div class="row">
<div>flex-direction: column-reverse;</div>
<img src="${imagesPath}/flex-direction-column-reverse.svg" alt="flex-direction: column-reverse;">
</div>
<h4>Try it out</h4>
<div class="interactive-playground flex-container">
<button class="button selected" data-js-class="flex-direction-row" type="button">row</button>
<button class="button" data-js-class="flex-direction-row-reverse" type="button">row-reverse</button>
<button class="button" data-js-class="flex-direction-column" type="button">column</button>
<button class="button" data-js-class="flex-direction-column-reverse" type="button">column-reverse</button>
<div class="directionality align-right">
<code class="js-directionality-code">dir="ltr"</code>
</div>
<div class="flexbox-container js-flexbox-container" dir="ltr">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
</div>
</div>
</div>
<div class="group">
<h3>Flex wrap</h3>
<div class="row">
<div>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap" target="_blank" rel="noopener">flex-wrap</a>: <span class="default">nowrap</span>;
</div>
<img src="${imagesPath}/flex-wrap-nowrap.svg" alt="flex-wrap: nowrap;">
</div>
<div class="row">
<div>flex-wrap: wrap;</div>
<img src="${imagesPath}/flex-wrap-wrap.svg" alt="flex-wrap: wrap;">
</div>
<div class="row">
<div>flex-wrap: wrap-reverse;</div>
<img src="${imagesPath}/flex-wrap-wrap-reverse.svg" alt="flex-wrap: wrap-reverse;">
</div>
<h4>Try it out</h4>
<div class="interactive-playground flex-container">
<button class="button selected" data-js-class="flex-wrap-nowrap" type="button">nowrap</button>
<button class="button" data-js-class="flex-wrap-flex-wrap" type="button">wrap</button>
<button class="button" data-js-class="flex-wrap-wrap-reverse" type="button">wrap-reverse</button>
<div class="directionality align-right">
<code class="js-directionality-code">dir="ltr"</code>
</div>
<div class="flexbox-container js-flexbox-container" dir="ltr">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
<div>Six</div>
<div>Seven</div>
<div>Eight</div>
</div>
</div>
</div>
<div class="group">
<h3>Justify content</h3>
<div class="row">
<div>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content" target="_blank" rel="noopener">justify-content</a>: <span class="default">flex-start</span>;
</div>
<img src="${imagesPath}/justify-content-flex-start.svg" alt="justify-content: flex-start;">
</div>
<div class="row">
<div>justify-content: center;</div>
<img src="${imagesPath}/justify-content-center.svg" alt="justify-content: center;">
</div>
<div class="row">
<div>justify-content: flex-end;</div>
<img src="${imagesPath}/justify-content-flex-end.svg" alt="justify-content: flex-end;">
</div>
<div class="row">
<div>justify-content: space-between;</div>
<img src="${imagesPath}/justify-content-space-between.svg" alt="justify-content: space-between;">
</div>
<div class="row">
<div>justify-content: space-around;</div>
<img src="${imagesPath}/justify-content-space-around.svg" alt="justify-content: space-around;">
</div>
<div class="row">
<div>justify-content: space-evenly;</div>
<img src="${imagesPath}/justify-content-space-evenly.svg" alt="justify-content: space-evenly;">
</div>
<h4>Try it out</h4>
<div class="interactive-playground flex-container">
<button class="button selected" data-js-class="justify-content-flex-start" type="button">flex-start</button>
<button class="button" data-js-class="justify-content-center" type="button">center</button>
<button class="button" data-js-class="justify-content-flex-end" type="button">flex-end</button>
<button class="button" data-js-class="justify-content-space-between" type="button">space-between</button>
<button class="button" data-js-class="justify-content-space-around" type="button">space-around</button>
<button class="button" data-js-class="justify-content-space-evenly" type="button">space-evenly</button>
<div class="directionality align-right">
<code class="js-directionality-code">dir="ltr"</code>
</div>
<div class="flexbox-container js-flexbox-container" dir="ltr">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
</div>
</div>
</div>
<div class="group">
<h3>Align items</h3>
<div class="row">
<div>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/align-items" target="_blank" rel="noopener">align-items</a>: <span class="default">stretch</span>;
</div>
<img src="${imagesPath}/align-items-stretch.svg" alt="align-items: stretch;">
</div>
<div class="row">
<div>align-items: flex-start;</div>
<img src="${imagesPath}/align-items-flex-start.svg" alt="align-items: flex-start;">
</div>
<div class="row">
<div>align-items: center;</div>
<img src="${imagesPath}/align-items-center.svg" alt="align-items: center;">
</div>
<div class="row">
<div>align-items: flex-end;</div>
<img src="${imagesPath}/align-items-flex-end.svg" alt="align-items: flex-end;">
</div>
<div class="row">
<div>align-items: baseline;</div>
<img src="${imagesPath}/align-items-baseline.svg" alt="align-items: baseline;">
</div>
<h4>Try it out</h4>
<div class="interactive-playground flex-container has-height">
<button class="button selected" data-js-class="align-items-stretch" type="button">stretch</button>
<button class="button" data-js-class="align-items-flex-start" type="button">flex-start</button>
<button class="button" data-js-class="align-items-center" type="button">center</button>
<button class="button" data-js-class="align-items-flex-end" type="button">flex-end</button>
<button class="button" data-js-class="align-items-baseline" type="button">baseline</button>
<div class="directionality align-right">
<code class="js-directionality-code">dir="ltr"</code>
</div>
<div class="flexbox-container js-flexbox-container" dir="ltr">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
</div>
</div>
</div>
<div class="group">
<h3>Align content</h3>
<div class="row">
<div>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/align-content" target="_blank" rel="noopener">align-content</a>: <span class="default">stretch</span>;
</div>
<img src="${imagesPath}/align-content-stretch.svg" alt="align-content: stretch;">
</div>
<div class="row">
<div>align-content: flex-start;</div>
<img src="${imagesPath}/align-content-flex-start.svg" alt="align-content: flex-start;">
</div>
<div class="row">
<div>align-content: center;</div>
<img src="${imagesPath}/align-content-center.svg" alt="align-content: center;">
</div>
<div class="row">
<div>align-content: flex-end;</div>
<img src="${imagesPath}/align-content-flex-end.svg" alt="align-content: flex-end;">
</div>
<div class="row">
<div>align-content: space-between;</div>
<img src="${imagesPath}/align-content-space-between.svg" alt="align-content: space-between;">
</div>
<div class="row">
<div>align-content: space-around;</div>
<img src="${imagesPath}/align-content-space-around.svg" alt="align-content: space-around;">
</div>
<h4>Try it out</h4>
<div class="interactive-playground flex-container has-height has-width flex-wrap">
<button class="button selected" data-js-class="align-content-stretch" type="button">stretch</button>
<button class="button" data-js-class="align-content-flex-start" type="button">flex-start</button>
<button class="button" data-js-class="align-content-center" type="button">center</button>
<button class="button" data-js-class="align-content-flex-end" type="button">flex-end</button>
<button class="button" data-js-class="align-content-space-between" type="button">space-between</button>
<button class="button" data-js-class="align-content-space-around" type="button">space-around</button>
<div class="directionality align-right">
<code class="js-directionality-code">dir="ltr"</code>
</div>
<div class="flexbox-container js-flexbox-container" dir="ltr">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
<div>Six</div>
<div>Seven</div>
<div>Eight</div>
</div>
</div>
</div>
</div>
<div class="container">
<h2>Flex Item</h2>
<div class="group">
<h3>Order</h3>
<div class="row">
<div>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/order" target="_blank" rel="noopener">order</a>: <span class="default">0</span>;
</div>
<img src="${imagesPath}/order.svg" alt="order: 0;">
</div>
</div>
<div class="group">
<h3>Flex (shorthand)</h3>
<div class="row">
<div>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex" target="_blank" rel="noopener">flex</a>: <span class="default">0 1 auto;</span> <span class="shorthand-hint">(flex-grow flex-shrink flex-basis)</span>
</div>
</div>
</div>
<div class="group">
<h3>Flex grow</h3>
<div class="row">
<div><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow" target="_blank" rel="noopener">flex-grow</a>:
<span class="default">0</span>;
</div>
<img src="${imagesPath}/flex-grow-0.svg" alt="flex-grow: 0;">
</div>
<div class="row">
<div>flex-grow: 1;</div>
<img src="${imagesPath}/flex-grow-1.svg" alt="flex-grow: 1;">
</div>
<h4>Try it out</h4>
<div class="interactive-playground flex-item">
<button class="button selected" data-js-class="flex-grow-0" type="button">0</button>
<button class="button" data-js-class="flex-grow-1" type="button">1</button>
<div class="directionality align-right">
<code class="js-directionality-code">dir="ltr"</code>
</div>
<div class="flexbox-container js-flexbox-container" dir="ltr">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
</div>
</div>
</div>
<div class="group">
<h3>Flex shrink</h3>
<div class="row">
<div>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-grow" target="_blank" rel="noopener">flex-shrink</a>: <span class="default">0</span>;
</div>
<img src="${imagesPath}/flex-shrink-0.svg" alt="flex-shrink: 0;">
</div>
<div class="row">
<div>flex-shrink: 1;</div>
<img src="${imagesPath}/flex-shrink-1.svg" alt="flex-shrink: 1;">
</div>
</div>
<div class="group">
<h3>Flex basis</h3>
<div class="row">
<div>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis" target="_blank" rel="noopener">flex-basis</a>: <span class="default">auto</span>;
</div>
</div>
</div>
<div class="group">
<h3>Align self</h3>
<div class="row">
<div>
<a href="https://developer.mozilla.org/en-US/docs/Web/CSS/align-self" target="_blank" rel="noopener">align-self</a>: <span class="default">auto</span>;
</div>
<img src="${imagesPath}/align-self-auto.svg" alt="align-self: auto;">
</div>
<div class="row">
<div>align-self: flex-start;</div>
<img src="${imagesPath}/align-self-flex-start.svg" alt="align-self: flex-start;">
</div>
<div class="row">
<div>align-self: center;</div>
<img src="${imagesPath}/align-self-center.svg" alt="align-self: center;">
</div>
<div class="row">
<div>align-self: flex-end;</div>
<img src="${imagesPath}/align-self-flex-end.svg" alt="align-self: flex-end;">
</div>
<div class="row">
<div>align-self: baseline;</div>
<img src="${imagesPath}/align-self-baseline.svg" alt="align-self: baseline;">
</div>
<div class="row">
<div>align-self: stretch;</div>
<img src="${imagesPath}/align-self-stretch.svg" alt="align-self: stretch;">
</div>
<h4>Try it out</h4>
<div class="interactive-playground flex-item has-height">
<button class="button selected" data-js-class="align-self-auto" type="button">auto</button>
<button class="button" data-js-class="align-self-flex-start" type="button">flex-start</button>
<button class="button" data-js-class="align-self-center" type="button">center</button>
<button class="button" data-js-class="align-self-flex-end" type="button">flex-end</button>
<button class="button" data-js-class="align-self-baseline" type="button">baseline</button>
<button class="button" data-js-class="align-self-stretch" type="button">stretch</button>
<div class="directionality align-right">
<code class="js-directionality-code">dir="ltr"</code>
</div>
<div class="flexbox-container js-flexbox-container" dir="ltr">
<div>One</div>
<div>Two</div>
<div>Three</div>
<div>Four</div>
<div>Five</div>
</div>
</div>
</div>
</div>
<div class="container">
<h2>Resources</h2>
<ul>
<li><a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" target="_blank" rel="noopener">A Complete Guide to Flexbox</a></li>
<li><a href="https://www.samanthaming.com/flexbox30/" target="_blank" rel="noopener">Learn Flexbox with 30 Code Tidbits</a></li>
<li><a href="https://flexboxfroggy.com/" target="_blank" rel="noopener">Flexbox Froggy</a></li>
<li><a href="https://flexboxzombies.com/p/flexbox-zombies" target="_blank" rel="noopener">Flexbox Zombies</a></li>
<li><a href="https://codingfantasy.com/games/flexboxadventure" target="_blank" rel="noopener">Flex Box Adventure</a></li>
<li><a href="https://www.flexboxpatterns.com/" target="_blank" rel="noopener">Flexbox Patterns</a></li>
</ul>
</div>
</main>
<script type="module" src="${scriptPath}/webview-ui-toolkit/toolkit.min.js"></script>
<script src="${scriptPath}/custom.js"></script>
</body>
</html>
`;
}
exports.getWebviewContent = getWebviewContent;
//# sourceMappingURL=webviewContent.js.map

View File

@@ -0,0 +1,76 @@
{
"name": "css-flexbox-cheatsheet",
"displayName": "CSS Flexbox Cheatsheet",
"description": "Open a flexbox cheatsheet directly in VS Code.",
"version": "3.3.1",
"engines": {
"vscode": "^1.58.0"
},
"categories": [
"Other",
"Programming Languages"
],
"license": "MIT",
"icon": "images/icon.png",
"main": "./out/extension.js",
"contributes": {
"keybindings": [
{
"command": "flexbox.cheatsheet",
"key": "Ctrl+K K",
"mac": "Cmd+K K"
}
],
"commands": [
{
"command": "flexbox.cheatsheet",
"title": "Open CSS Flexbox Cheatsheet"
}
]
},
"activationEvents": [
"onCommand:flexbox.cheatsheet",
"onLanguage:css",
"onLanguage:less",
"onLanguage:sass",
"onLanguage:scss"
],
"publisher": "dzhavat",
"repository": {
"type": "git",
"url": "https://github.com/dzhavat/css-flexbox-cheatsheet"
},
"vsce": {
"githubBranch": "main"
},
"scripts": {
"vscode:prepublish": "npm run compile",
"compile": "tsc -p ./",
"watch": "tsc -watch -p ./",
"pretest": "npm run compile",
"test": "node ./out/test/runTest.js",
"lint": "eslint src --ext ts"
},
"devDependencies": {
"@types/glob": "^7.2.0",
"@types/mocha": "^9.0.0",
"@types/node": "14.14.31",
"@types/vscode": "1.58.0",
"@typescript-eslint/eslint-plugin": "^5.8.0",
"@typescript-eslint/parser": "^5.8.0",
"@vscode/webview-ui-toolkit": "^0.8.4",
"eslint": "^8.5.0",
"glob": "^7.2.0",
"mocha": "^9.1.3",
"typescript": "^4.5.4",
"vsce": "^2.5.3",
"vscode-test": "^1.6.1"
},
"__metadata": {
"id": "5f70f405-914a-43f6-b8ff-740495ee6b34",
"publisherId": "2797277f-872f-4cae-81df-5756e648c817",
"publisherDisplayName": "Dzhavat Ushev",
"isPreReleaseVersion": false,
"installedTimestamp": 1641229758879
}
}

View File

@@ -0,0 +1,204 @@
body {
font-family: var(--vscode-editor-font-family);
}
a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.align-right {
text-align: right;
}
main {
align-items: center;
display: flex;
flex-direction: column;
}
h1 {
padding-bottom: 1.25rem;
}
.container {
margin: 20px;
width: 26rem;
}
.group {
padding: 1rem 0;
}
.row {
align-items: center;
display: flex;
justify-content: space-between;
min-height: 42px;
}
.row + .row {
margin-top: 8px;
}
.default {
font-weight: bold;
}
.shorthand-hint {
color: #797979;
font-size: 12px;
}
img {
width: 74px;
}
button {
background-color: var(--vscode-button-background);
border: 1px solid transparent;
border-radius: 0.15rem;
color: var(--vscode-button-foreground);
margin-bottom: 0.5rem;
padding: 0.25rem 0.75rem;
}
button:hover,
button.selected {
background-color: var(--vscode-button-hoverBackground);
cursor: pointer;
}
.interactive-playground.has-height .flexbox-container {
height: 175px;
}
.interactive-playground.has-width .flexbox-container > div {
width: 50px;
}
.interactive-playground.flex-wrap .flexbox-container {
flex-wrap: wrap;
}
.directionality-settings {
margin-bottom: 2rem;
}
.directionality {
margin-top: 0.5rem;
}
.flexbox-container {
border: 1px solid #a6e22d;
border-radius: 3px;
display: flex;
margin: 0.5rem 0 1rem;
}
.flexbox-container > div {
background-color: tomato;
border-radius: 2px;
color: black;
margin: 0.25rem;
padding: 0.5rem;
text-align: center;
}
.flexbox-container.flex-direction-row {
flex-direction: row;
}
.flexbox-container.flex-direction-row-reverse {
flex-direction: row-reverse;
}
.flexbox-container.flex-direction-column {
flex-direction: column;
}
.flexbox-container.flex-direction-column-reverse {
flex-direction: column-reverse;
}
.flexbox-container.justify-content-flex-start {
justify-content: flex-start;
}
.flexbox-container.justify-content-center {
justify-content: center;
}
.flexbox-container.justify-content-flex-end {
justify-content: flex-end;
}
.flexbox-container.justify-content-space-between {
justify-content: space-between;
}
.flexbox-container.justify-content-space-around {
justify-content: space-around;
}
.flexbox-container.justify-content-space-evenly {
justify-content: space-evenly;
}
.flexbox-container.align-items-stretch {
align-items: stretch;
}
.flexbox-container.align-items-flex-start {
align-items: flex-start;
}
.flexbox-container.align-items-center {
align-items: center;
}
.flexbox-container.align-items-flex-end {
align-items: flex-end;
}
.flexbox-container.align-items-baseline {
align-items: baseline;
}
.flexbox-container.align-content-stretch {
align-content: stretch;
}
.flexbox-container.align-content-flex-start {
align-content: flex-start;
}
.flexbox-container.align-content-center {
align-content: center;
}
.flexbox-container.align-content-flex-end {
align-content: flex-end;
}
.flexbox-container.align-content-space-between {
align-content: space-between;
}
.flexbox-container.align-content-space-around {
align-content: space-around;
}
.flexbox-container.flex-wrap-nowrap {
flex-wrap: nowrap;
}
.flexbox-container.flex-wrap-flex-wrap {
flex-wrap: wrap;
}
.flexbox-container.flex-wrap-wrap-reverse {
flex-wrap: wrap-reverse;
}
.align-self-auto {
align-self: auto;
}
.align-self-flex-start {
align-self: flex-start;
}
.align-self-center {
align-self: center;
}
.align-self-flex-end {
align-self: flex-end;
}
.align-self-baseline {
align-self: baseline;
}
.align-self-stretch {
align-self: stretch;
}
.flex-grow-0 {
flex-grow: 0;
}
.flex-grow-1 {
flex-grow: 1;
}