generator-chisel 2.0.0-alpha.14 → 2.0.0-alpha.15
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +10 -0
- package/lib/commands/create/creators/app/chisel-starter-theme/assets/icons-source/arrow-left.svg +3 -0
- package/lib/commands/create/creators/app/chisel-starter-theme/assets/icons-source/arrow-right.svg +3 -0
- package/lib/commands/create/creators/app/chisel-starter-theme/assets/icons-source/chisel-icon.svg +1 -0
- package/lib/commands/create/creators/app/chisel-starter-theme/assets/icons-source/chisel-logo.svg +1 -0
- package/lib/commands/create/creators/app/chisel-starter-theme/assets/icons-source/close-line.svg +1 -0
- package/lib/commands/create/creators/app/chisel-starter-theme/assets/icons-source/color/chisel-icon.svg +1 -0
- package/lib/commands/create/creators/app/chisel-starter-theme/assets/icons-source/color/chisel-logo.svg +1 -0
- package/lib/commands/create/creators/app/chisel-starter-theme/assets/icons-source/color/facebook-logo.svg +10 -0
- package/lib/commands/create/creators/app/chisel-starter-theme/assets/icons-source/color/instagram-logo.svg +14 -0
- package/lib/commands/create/creators/app/chisel-starter-theme/assets/icons-source/x-logo.svg +1 -0
- package/lib/commands/create/creators/app/chisel-starter-theme/inc/WP/Assets.php +4 -2
- package/lib/commands/create/creators/app/chisel-starter-theme/inc/WP/Components.php +36 -0
- package/lib/commands/create/creators/app/chisel-starter-theme/inc/WP/Twig.php +13 -0
- package/lib/commands/create/creators/app/chisel-starter-theme/src/blocks/accordion/accordion-item.js +2 -2
- package/lib/commands/create/creators/app/chisel-starter-theme/src/blocks/accordion/style.scss +12 -5
- package/lib/commands/create/creators/app/chisel-starter-theme/src/design/settings/_index.scss +2 -1
- package/lib/commands/create/creators/app/chisel-starter-theme/src/design/tools/_buttons.scss +1 -1
- package/lib/commands/create/creators/app/chisel-starter-theme/src/design/tools/_icon.scss +39 -7
- package/lib/commands/create/creators/app/chisel-starter-theme/src/styles/blocks/_core-button.scss +14 -13
- package/lib/commands/create/creators/app/chisel-starter-theme/src/styles/components/_buttons.scss +14 -13
- package/lib/commands/create/creators/app/chisel-starter-theme/src/styles/components/_icons-preview.scss +97 -0
- package/lib/commands/create/creators/app/chisel-starter-theme/src/styles/objects/_icon.scss +51 -0
- package/lib/commands/create/creators/app/chisel-starter-theme/views/objects/icon.twig +37 -0
- package/lib/commands/create/creators/app/chisel-starter-theme/views/partials/icons-preview.twig +81 -0
- package/lib/commands/create/packages-versions.js +2 -2
- package/package.json +2 -2
- package/lib/commands/create/creators/app/chisel-starter-theme/src/styles/components/_icon.scss +0 -19
- package/lib/commands/create/creators/app/chisel-starter-theme/views/components/icon.twig +0 -1
- /package/lib/commands/create/creators/app/chisel-starter-theme/assets/icons/{loader.svg → animated/loader.svg} +0 -0
- /package/lib/commands/create/creators/app/chisel-starter-theme/assets/{icons → icons-source}/minus.svg +0 -0
- /package/lib/commands/create/creators/app/chisel-starter-theme/assets/{icons → icons-source}/plus.svg +0 -0
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,16 @@
|
|
|
2
2
|
|
|
3
3
|
<!-- INSERT-NEW-ENTRIES-HERE -->
|
|
4
4
|
|
|
5
|
+
## 2.0.0-alpha.15 (2024-12-06)
|
|
6
|
+
|
|
7
|
+
- icons add color param and improve caching keys ([9619163](https://github.com/xfiveco/generator-chisel/commit/9619163))
|
|
8
|
+
- integrate icons feature, get_icon twig function with cache ([3612fe9](https://github.com/xfiveco/generator-chisel/commit/3612fe9))
|
|
9
|
+
- Merge branch 'v2-feature-icons-improved' of github.com:xfiveco/generator-chisel into v2-feature-icon ([cc45f09](https://github.com/xfiveco/generator-chisel/commit/cc45f09))
|
|
10
|
+
- feature: added missing files for icons ([772d4c4](https://github.com/xfiveco/generator-chisel/commit/772d4c4))
|
|
11
|
+
- feature: icons - improved icon.twig, updated examples preview, styles adjustments ([7b31431](https://github.com/xfiveco/generator-chisel/commit/7b31431))
|
|
12
|
+
- refactor: icons.mjs - updated preview generation ([16f7792](https://github.com/xfiveco/generator-chisel/commit/16f7792))
|
|
13
|
+
- fix: added missing files ([fd93bac](https://github.com/xfiveco/generator-chisel/commit/fd93bac))
|
|
14
|
+
|
|
5
15
|
## 2.0.0-alpha.14 (2024-12-04)
|
|
6
16
|
|
|
7
17
|
- adjust base version logic, remove compose version ([69f340e](https://github.com/xfiveco/generator-chisel/commit/69f340e))
|
package/lib/commands/create/creators/app/chisel-starter-theme/assets/icons-source/arrow-left.svg
ADDED
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
|
|
2
|
+
<path d="M12.141 13.418c0.268 0.271 0.268 0.709 0 0.978s-0.701 0.272-0.969 0l-3.83-3.908c-0.268-0.27-0.268-0.707 0-0.979l3.83-3.908c0.267-0.27 0.701-0.27 0.969 0s0.268 0.709 0 0.978l-3.141 3.421 3.141 3.418z"></path>
|
|
3
|
+
</svg>
|
package/lib/commands/create/creators/app/chisel-starter-theme/assets/icons-source/arrow-right.svg
ADDED
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
|
|
2
|
+
<path d="M11 10l-3.141-3.42c-0.268-0.27-0.268-0.707 0-0.978 0.268-0.27 0.701-0.27 0.969 0l3.83 3.908c0.268 0.271 0.268 0.709 0 0.979l-3.83 3.908c-0.267 0.272-0.701 0.27-0.969 0s-0.268-0.707 0-0.978l3.141-3.419z"></path>
|
|
3
|
+
</svg>
|
package/lib/commands/create/creators/app/chisel-starter-theme/assets/icons-source/chisel-icon.svg
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" class="c-logo__icon" viewBox="0 0 44.16 44.16"><path fill="#000" d="M22.08 0a22 22 0 0 0-12 3.55.83.83 0 0 0-.25 1.16A.84.84 0 0 0 11 5a20.41 20.41 0 1 1-2.63 2 .84.84 0 1 0-1.14-1.26A22.08 22.08 0 1 0 22.08 0Zm15 12.07a.84.84 0 1 0-1.4.93 16.3 16.3 0 1 1-2.16-2.61.84.84 0 0 0 1.19 0 .85.85 0 0 0 0-1.19 18.14 18.14 0 1 0 2.38 2.88Zm-15-2.86a12.83 12.83 0 0 0-7.65 2.52.85.85 0 0 0-.17 1.18.84.84 0 0 0 1.18.18 11.18 11.18 0 1 1 9.36 19.84.84.84 0 0 0 .2 1.66h.2a12.87 12.87 0 0 0-3.12-25.38ZM15 30.74a11.19 11.19 0 0 1-2-15.12.84.84 0 1 0-1.37-1 12.86 12.86 0 0 0 2.36 17.4.84.84 0 0 0 .53.19.86.86 0 0 0 .66-.31.85.85 0 0 0-.18-1.16Z"/><path fill="#000" d="M28.49 25.69a.85.85 0 0 0-1.18.19 6.46 6.46 0 1 1-1.43-9 .84.84 0 1 0 1-1.36 8.15 8.15 0 1 0 1.8 11.38.85.85 0 0 0-.19-1.21Zm-6.41-7a3.43 3.43 0 1 0 3.43 3.43 3.44 3.44 0 0 0-3.43-3.47Zm0 5.17a1.74 1.74 0 1 1 1.74-1.74 1.74 1.74 0 0 1-1.74 1.7Z"/></svg>
|
package/lib/commands/create/creators/app/chisel-starter-theme/assets/icons-source/chisel-logo.svg
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" class="c-logo__icon" viewBox="0 0 150 44.16"><path d="M22.77 0a22 22 0 0 0-12 3.55.83.83 0 0 0-.25 1.16.84.84 0 0 0 1.17.29 20.41 20.41 0 1 1-2.63 2 .85.85 0 1 0-1.14-1.26A22.08 22.08 0 1 0 22.77 0Zm15 12.07a.84.84 0 1 0-1.4.93 16.3 16.3 0 1 1-2.16-2.61.84.84 0 0 0 1.19 0 .85.85 0 0 0 0-1.19 18.14 18.14 0 1 0 2.38 2.88zm-15-2.86a12.83 12.83 0 0 0-7.65 2.52.85.85 0 0 0-.17 1.18.84.84 0 0 0 1.18.18 11.18 11.18 0 1 1 9.36 19.84.84.84 0 0 0 .2 1.66h.2a12.87 12.87 0 0 0-3.12-25.38zm-7.08 21.53a11.19 11.19 0 0 1-2-15.12.848.848 0 1 0-1.37-1 12.86 12.86 0 0 0 2.36 17.4.84.84 0 0 0 .53.19.86.86 0 0 0 .66-.31.85.85 0 0 0-.18-1.16z"/><path d="M28.49 25.69a.85.85 0 0 0-1.18.19 6.46 6.46 0 1 1-1.43-9 .844.844 0 1 0 1-1.36 8.15 8.15 0 1 0 1.8 11.38.85.85 0 0 0-.19-1.21zm-6.41-7a3.43 3.43 0 1 0 3.43 3.43 3.44 3.44 0 0 0-3.43-3.47zm0 5.17a1.74 1.74 0 1 1 1.74-1.74 1.74 1.74 0 0 1-1.74 1.7zm46.33-10.823q.687.338.78 1.045.126.706-.343 1.29-.344.46-.906.522-.532.06-1.063-.215-.906-.461-1.906-.738-1-.276-2.125-.276-1.782 0-3.22.584-1.405.552-2.437 1.627-1.031 1.044-1.594 2.488-.53 1.443-.53 3.194 0 1.935.593 3.44.594 1.474 1.625 2.518 1.063 1.014 2.469 1.536 1.437.491 3.094.491 1.062 0 2.062-.246 1.032-.245 1.938-.737.562-.276 1.094-.184.562.061.906.522.531.645.375 1.32-.125.646-.781.983-.782.43-1.72.738-.937.307-1.905.491-.97.184-1.97.184-2.25 0-4.25-.737t-3.562-2.15q-1.563-1.412-2.469-3.47-.875-2.058-.875-4.699 0-2.365.813-4.361.843-2.027 2.343-3.47 1.532-1.475 3.563-2.273 2.031-.83 4.438-.83 1.5 0 2.906.37 1.438.368 2.657 1.043zm12.281 3.839q2.157 0 3.344.922 1.188.89 1.657 2.426.5 1.535.5 3.378v8.139q0 .675-.47 1.136-.437.43-1.093.43-.687 0-1.125-.43-.438-.46-.438-1.136v-8.139q0-1.075-.312-1.965-.281-.891-1.031-1.413-.72-.522-2.032-.522-1.219 0-2.187.522-.938.522-1.47 1.413-.5.89-.5 1.965v8.139q0 .675-.468 1.136-.437.43-1.094.43-.687 0-1.125-.43-.437-.46-.437-1.136V12.147q0-.676.437-1.106.438-.46 1.125-.46.657 0 1.094.46.469.43.469 1.106v8.384l-.563.307q.22-.676.72-1.382.53-.706 1.28-1.29.782-.583 1.72-.921.937-.369 2-.369zM93.473 31.74q0 .676-.437 1.137-.438.43-1.125.43-.657 0-1.125-.43-.438-.46-.438-1.136V18.596q0-.676.438-1.105.468-.461 1.125-.461.687 0 1.125.46.437.43.437 1.106zM91.88 15.004q-.906 0-1.312-.307-.406-.338-.406-1.106V13.1q0-.768.437-1.075.438-.307 1.313-.307.937 0 1.343.338.407.307.407 1.044v.491q0 .799-.438 1.106-.406.307-1.344.307zm4.843 15.785q-.281-.43-.25-.983.032-.584.657-.983.437-.276.906-.215.5.03.937.46.875.953 1.938 1.506 1.094.553 2.625.553.625-.031 1.281-.185.657-.184 1.126-.614.468-.46.468-1.32 0-.768-.5-1.229-.5-.46-1.312-.737-.813-.307-1.75-.553-1-.276-2.032-.614-1-.338-1.812-.86-.813-.553-1.344-1.413-.5-.86-.5-2.119 0-1.443.812-2.488.844-1.044 2.157-1.627 1.344-.584 2.906-.584.906 0 1.906.246 1 .215 1.938.706.938.492 1.625 1.29.313.4.344.952.062.553-.5.983-.375.307-.906.276-.532-.03-.875-.337-.594-.738-1.532-1.137-.937-.43-2.125-.43-.594 0-1.25.185-.625.153-1.063.583-.437.43-.437 1.26 0 .767.5 1.228.531.46 1.375.767.844.308 1.844.553.969.246 1.906.584.969.338 1.72.89.78.523 1.25 1.383.5.829.5 2.119 0 1.505-.907 2.58-.875 1.044-2.25 1.596-1.344.553-2.844.553-1.781 0-3.563-.614-1.75-.645-2.969-2.211zm23.564 2.825q-2.594 0-4.5-1.044-1.907-1.075-2.97-2.918-1.03-1.873-1.03-4.269 0-2.702 1.093-4.606 1.125-1.935 2.907-2.949 1.781-1.044 3.781-1.044 1.531 0 2.907.614 1.375.584 2.437 1.659 1.094 1.044 1.719 2.487.625 1.413.656 3.102-.031.615-.5 1.014-.469.4-1.094.4h-12.156l-.75-2.611h11.75l-.594.552v-.767q-.062-1.075-.718-1.874-.657-.829-1.626-1.259-.968-.46-2.03-.46-.938 0-1.813.306-.844.277-1.532.922-.656.645-1.062 1.72-.375 1.044-.375 2.61 0 1.69.718 2.949.72 1.259 1.938 1.965 1.219.676 2.688.676 1.156 0 1.906-.215.75-.246 1.25-.584.5-.338.875-.645.469-.276.938-.276.562 0 .937.4.375.368.375.89 0 .675-.687 1.228-.844.799-2.344 1.413-1.469.614-3.094.614zm13.907-1.874q0 .676-.469 1.137-.438.43-1.094.43-.656 0-1.125-.43-.437-.46-.437-1.136V12.147q0-.676.468-1.106.47-.46 1.125-.46.688 0 1.094.46.438.43.438 1.106z"/></svg>
|
package/lib/commands/create/creators/app/chisel-starter-theme/assets/icons-source/close-line.svg
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<?xml version="1.0" encoding="UTF-8"?><svg id="a" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12,13.41l5.66,5.66c.4,.38,1.03,.37,1.41-.02,.37-.39,.37-1,0-1.39l-5.66-5.66,5.66-5.66c.38-.4,.37-1.03-.02-1.41-.39-.37-1-.37-1.39,0l-5.66,5.66L6.34,4.93c-.4-.38-1.04-.36-1.41,.05-.36,.38-.36,.98,0,1.37l5.66,5.66-5.66,5.66c-.4,.38-.41,1.02-.02,1.41,.38,.4,1.02,.41,1.41,.02,0,0,.02-.02,.02-.02l5.66-5.66Z" fill="#09244b" fill-rule="evenodd"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" class="c-logo__icon" viewBox="0 0 44.16 44.16"><path fill="#2a1468" d="M22.08 0a22 22 0 0 0-12 3.55.83.83 0 0 0-.25 1.16A.84.84 0 0 0 11 5a20.41 20.41 0 1 1-2.63 2 .84.84 0 1 0-1.14-1.26A22.08 22.08 0 1 0 22.08 0Zm15 12.07a.84.84 0 1 0-1.4.93 16.3 16.3 0 1 1-2.16-2.61.84.84 0 0 0 1.19 0 .85.85 0 0 0 0-1.19 18.14 18.14 0 1 0 2.38 2.88Zm-15-2.86a12.83 12.83 0 0 0-7.65 2.52.85.85 0 0 0-.17 1.18.84.84 0 0 0 1.18.18 11.18 11.18 0 1 1 9.36 19.84.84.84 0 0 0 .2 1.66h.2a12.87 12.87 0 0 0-3.12-25.38ZM15 30.74a11.19 11.19 0 0 1-2-15.12.84.84 0 1 0-1.37-1 12.86 12.86 0 0 0 2.36 17.4.84.84 0 0 0 .53.19.86.86 0 0 0 .66-.31.85.85 0 0 0-.18-1.16Z"/><path fill="#ff6d54" d="M28.49 25.69a.85.85 0 0 0-1.18.19 6.46 6.46 0 1 1-1.43-9 .84.84 0 1 0 1-1.36 8.15 8.15 0 1 0 1.8 11.38.85.85 0 0 0-.19-1.21Zm-6.41-7a3.43 3.43 0 1 0 3.43 3.43 3.44 3.44 0 0 0-3.43-3.47Zm0 5.17a1.74 1.74 0 1 1 1.74-1.74 1.74 1.74 0 0 1-1.74 1.7Z"/></svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" class="c-logo__icon" viewBox="0 0 150 44.16"><path fill="#2a1468" d="M22.77 0a22 22 0 0 0-12 3.55.83.83 0 0 0-.25 1.16.84.84 0 0 0 1.17.29 20.41 20.41 0 1 1-2.63 2 .85.85 0 1 0-1.14-1.26A22.08 22.08 0 1 0 22.77 0Zm15 12.07a.84.84 0 1 0-1.4.93 16.3 16.3 0 1 1-2.16-2.61.84.84 0 0 0 1.19 0 .85.85 0 0 0 0-1.19 18.14 18.14 0 1 0 2.38 2.88zm-15-2.86a12.83 12.83 0 0 0-7.65 2.52.85.85 0 0 0-.17 1.18.84.84 0 0 0 1.18.18 11.18 11.18 0 1 1 9.36 19.84.84.84 0 0 0 .2 1.66h.2a12.87 12.87 0 0 0-3.12-25.38zm-7.08 21.53a11.19 11.19 0 0 1-2-15.12.848.848 0 1 0-1.37-1 12.86 12.86 0 0 0 2.36 17.4.84.84 0 0 0 .53.19.86.86 0 0 0 .66-.31.85.85 0 0 0-.18-1.16z"/><path fill="#ff6d54" d="M28.49 25.69a.85.85 0 0 0-1.18.19 6.46 6.46 0 1 1-1.43-9 .844.844 0 1 0 1-1.36 8.15 8.15 0 1 0 1.8 11.38.85.85 0 0 0-.19-1.21zm-6.41-7a3.43 3.43 0 1 0 3.43 3.43 3.44 3.44 0 0 0-3.43-3.47zm0 5.17a1.74 1.74 0 1 1 1.74-1.74 1.74 1.74 0 0 1-1.74 1.7z"/><path fill="#ff6d54" d="M68.41 13.037q.687.338.78 1.045.126.706-.343 1.29-.344.46-.906.522-.532.06-1.063-.215-.906-.461-1.906-.738-1-.276-2.125-.276-1.782 0-3.22.584-1.405.552-2.437 1.627-1.031 1.044-1.594 2.488-.53 1.443-.53 3.194 0 1.935.593 3.44.594 1.474 1.625 2.518 1.063 1.014 2.469 1.536 1.437.491 3.094.491 1.062 0 2.062-.246 1.032-.245 1.938-.737.562-.276 1.094-.184.562.061.906.522.531.645.375 1.32-.125.646-.781.983-.782.43-1.72.738-.937.307-1.905.491-.97.184-1.97.184-2.25 0-4.25-.737t-3.562-2.15q-1.563-1.412-2.469-3.47-.875-2.058-.875-4.699 0-2.365.813-4.361.843-2.027 2.343-3.47 1.532-1.475 3.563-2.273 2.031-.83 4.438-.83 1.5 0 2.906.37 1.438.368 2.657 1.043zm12.281 3.839q2.157 0 3.344.922 1.188.89 1.657 2.426.5 1.535.5 3.378v8.139q0 .675-.47 1.136-.437.43-1.093.43-.687 0-1.125-.43-.438-.46-.438-1.136v-8.139q0-1.075-.312-1.965-.281-.891-1.031-1.413-.72-.522-2.032-.522-1.219 0-2.187.522-.938.522-1.47 1.413-.5.89-.5 1.965v8.139q0 .675-.468 1.136-.437.43-1.094.43-.687 0-1.125-.43-.437-.46-.437-1.136V12.147q0-.676.437-1.106.438-.46 1.125-.46.657 0 1.094.46.469.43.469 1.106v8.384l-.563.307q.22-.676.72-1.382.53-.706 1.28-1.29.782-.583 1.72-.921.937-.369 2-.369zM93.473 31.74q0 .676-.437 1.137-.438.43-1.125.43-.657 0-1.125-.43-.438-.46-.438-1.136V18.596q0-.676.438-1.105.468-.461 1.125-.461.687 0 1.125.46.437.43.437 1.106zM91.88 15.004q-.906 0-1.312-.307-.406-.338-.406-1.106V13.1q0-.768.437-1.075.438-.307 1.313-.307.937 0 1.343.338.407.307.407 1.044v.491q0 .799-.438 1.106-.406.307-1.344.307zm4.843 15.785q-.281-.43-.25-.983.032-.584.657-.983.437-.276.906-.215.5.03.937.46.875.953 1.938 1.506 1.094.553 2.625.553.625-.031 1.281-.185.657-.184 1.126-.614.468-.46.468-1.32 0-.768-.5-1.229-.5-.46-1.312-.737-.813-.307-1.75-.553-1-.276-2.032-.614-1-.338-1.812-.86-.813-.553-1.344-1.413-.5-.86-.5-2.119 0-1.443.812-2.488.844-1.044 2.157-1.627 1.344-.584 2.906-.584.906 0 1.906.246 1 .215 1.938.706.938.492 1.625 1.29.313.4.344.952.062.553-.5.983-.375.307-.906.276-.532-.03-.875-.337-.594-.738-1.532-1.137-.937-.43-2.125-.43-.594 0-1.25.185-.625.153-1.063.583-.437.43-.437 1.26 0 .767.5 1.228.531.46 1.375.767.844.308 1.844.553.969.246 1.906.584.969.338 1.72.89.78.523 1.25 1.383.5.829.5 2.119 0 1.505-.907 2.58-.875 1.044-2.25 1.596-1.344.553-2.844.553-1.781 0-3.563-.614-1.75-.645-2.969-2.211zm23.564 2.825q-2.594 0-4.5-1.044-1.907-1.075-2.97-2.918-1.03-1.873-1.03-4.269 0-2.702 1.093-4.606 1.125-1.935 2.907-2.949 1.781-1.044 3.781-1.044 1.531 0 2.907.614 1.375.584 2.437 1.659 1.094 1.044 1.719 2.487.625 1.413.656 3.102-.031.615-.5 1.014-.469.4-1.094.4h-12.156l-.75-2.611h11.75l-.594.552v-.767q-.062-1.075-.718-1.874-.657-.829-1.626-1.259-.968-.46-2.03-.46-.938 0-1.813.306-.844.277-1.532.922-.656.645-1.062 1.72-.375 1.044-.375 2.61 0 1.69.718 2.949.72 1.259 1.938 1.965 1.219.676 2.688.676 1.156 0 1.906-.215.75-.246 1.25-.584.5-.338.875-.645.469-.276.938-.276.562 0 .937.4.375.368.375.89 0 .675-.687 1.228-.844.799-2.344 1.413-1.469.614-3.094.614zm13.907-1.874q0 .676-.469 1.137-.438.43-1.094.43-.656 0-1.125-.43-.437-.46-.437-1.136V12.147q0-.676.468-1.106.47-.46 1.125-.46.688 0 1.094.46.438.43.438 1.106z" aria-label="Chisel"/></svg>
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12Z" fill="url(#paint0_linear_8002_5831)"/>
|
|
3
|
+
<path d="M10.6163 22.8932V14.9503H8V11.8199H10.6163V9.36025C10.6163 6.56522 12.2907 5 14.6977 5C15.4302 5 16.2674 5.1118 17 5.2236V8.07453H15.6395C14.3837 8.07453 14.0698 8.74534 14.0698 9.63975V11.8199H16.843L16.3721 14.9503H14.0698V22.7587C13.402 22.9168 12.7096 23 12 23C11.5305 23 11.0686 22.9636 10.6163 22.8932Z" fill="white"/>
|
|
4
|
+
<defs>
|
|
5
|
+
<linearGradient id="paint0_linear_8002_5831" x1="12.0004" y1="22.2178" x2="12.0007" y2="0.995951" gradientUnits="userSpaceOnUse">
|
|
6
|
+
<stop stop-color="#0062aa"/>
|
|
7
|
+
<stop offset="1" stop-color="#19AFDD"/>
|
|
8
|
+
</linearGradient>
|
|
9
|
+
</defs>
|
|
10
|
+
</svg>
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M6.99857 2C4.23715 2 2.00007 4.23856 2.00005 6.99997L2 17C1.99998 19.7614 4.23857 22 7.00001 22H17C19.7614 22 22 19.7614 22 17V7C22 4.23858 19.7634 2 17.0019 2C14.0164 2 10.1956 2 6.99857 2Z" fill="url(#paint0_radial_8002_5833)"/>
|
|
3
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 8.26135C9.93889 8.26135 8.27158 9.93376 8.27158 11.9898C8.27158 14.0458 9.944 15.7182 12 15.7182C14.056 15.7182 15.7284 14.0458 15.7284 11.9898C15.7284 9.93376 14.0611 8.26135 12 8.26135ZM12 14.414C10.66 14.414 9.58088 13.3298 9.58088 11.9949C9.58088 10.6549 10.6651 9.57576 12 9.57576C13.3349 9.57576 14.4191 10.66 14.4191 11.9949C14.4242 13.3298 13.34 14.414 12 14.414Z" fill="white"/>
|
|
4
|
+
<path d="M16.7513 8.11815C16.7513 8.59833 16.362 8.9876 15.8819 8.9876C15.4017 8.9876 15.0124 8.59833 15.0124 8.11815C15.0124 7.63796 15.4017 7.24869 15.8819 7.24869C16.362 7.24869 16.7513 7.63796 16.7513 8.11815Z" fill="white"/>
|
|
5
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 4.72727C10.0258 4.72727 9.78034 4.7375 9.00295 4.7733C8.23066 4.8091 7.70387 4.93185 7.23847 5.11086C6.76282 5.29497 6.35367 5.54558 5.94962 5.94962C5.54558 6.35367 5.29498 6.7577 5.11086 7.23846C4.93185 7.69876 4.80911 8.23066 4.7733 9.00294C4.7375 9.78034 4.72727 10.0258 4.72727 12C4.72727 13.9742 4.7375 14.2197 4.7733 14.9971C4.80911 15.7693 4.93185 16.2961 5.11086 16.7615C5.29498 17.2372 5.54558 17.6463 5.94962 18.0504C6.35367 18.4544 6.7577 18.705 7.23847 18.8891C7.69876 19.0682 8.23066 19.1909 9.00295 19.2267C9.78034 19.2625 10.0258 19.2727 12 19.2727C13.9742 19.2727 14.2197 19.2625 14.9971 19.2267C15.7693 19.1909 16.2961 19.0682 16.7615 18.8891C17.2372 18.705 17.6463 18.4544 18.0504 18.0504C18.4544 17.6463 18.705 17.2423 18.8891 16.7615C19.0681 16.3012 19.1909 15.7693 19.2267 14.9971C19.2625 14.2197 19.2727 13.9742 19.2727 12C19.2727 10.0258 19.2625 9.78034 19.2267 9.00294C19.1909 8.23066 19.0681 7.70387 18.8891 7.23846C18.705 6.76282 18.4544 6.35367 18.0504 5.94962C17.6463 5.54558 17.2423 5.29497 16.7615 5.11086C16.3012 4.93185 15.7693 4.8091 14.9971 4.7733C14.2197 4.7375 13.9742 4.72727 12 4.72727ZM12 6.03657C13.9384 6.03657 14.1685 6.04168 14.9357 6.07749C15.6415 6.10817 16.0302 6.2258 16.2859 6.32809C16.6234 6.46107 16.8689 6.61961 17.1196 6.87022C17.3753 7.12594 17.5287 7.36632 17.6617 7.70387C17.7589 7.95959 17.8816 8.34318 17.9123 9.05408C17.9481 9.82125 17.9532 10.0514 17.9532 11.9898C17.9532 13.9281 17.9481 14.1583 17.9123 14.9255C17.8816 15.6312 17.764 16.0199 17.6617 16.2757C17.5287 16.6132 17.3702 16.8587 17.1196 17.1093C16.8638 17.365 16.6234 17.5185 16.2859 17.6514C16.0302 17.7486 15.6466 17.8714 14.9357 17.9021C14.1685 17.9379 13.9384 17.943 12 17.943C10.0616 17.943 9.83148 17.9379 9.06432 17.9021C8.35852 17.8714 7.96982 17.7537 7.7141 17.6514C7.37655 17.5185 7.13106 17.3599 6.88046 17.1093C6.62473 16.8536 6.4713 16.6132 6.33832 16.2757C6.24115 16.0199 6.1184 15.6364 6.08772 14.9255C6.05191 14.1583 6.0468 13.9281 6.0468 11.9898C6.0468 10.0514 6.05191 9.82125 6.08772 9.05408C6.1184 8.3483 6.23603 7.95959 6.33832 7.70387C6.4713 7.36632 6.62984 7.12083 6.88046 6.87022C7.13618 6.6145 7.37655 6.46107 7.7141 6.32809C7.96982 6.23092 8.3534 6.10817 9.06432 6.07749L9.09401 6.0763C9.83776 6.04654 10.0869 6.03657 12 6.03657Z" fill="white"/>
|
|
6
|
+
<defs>
|
|
7
|
+
<radialGradient id="paint0_radial_8002_5833" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(2.3628 20.1666) rotate(-3.00072) scale(28.9125 24.5805)">
|
|
8
|
+
<stop stop-color="#FED576"/>
|
|
9
|
+
<stop offset="0.2634" stop-color="#F47133"/>
|
|
10
|
+
<stop offset="0.6091" stop-color="#BC3081"/>
|
|
11
|
+
<stop offset="1" stop-color="#4C63D2"/>
|
|
12
|
+
</radialGradient>
|
|
13
|
+
</defs>
|
|
14
|
+
</svg>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13.905 10.47 21.35 2h-1.764L13.12 9.353 7.956 2H2l7.809 11.12L2 22h1.764l6.827-7.766L16.044 22H22M4.4 3.302h2.71l12.476 17.46h-2.71"/></svg>
|
|
@@ -176,8 +176,10 @@ class Assets implements InstanceInterface, HooksInterface {
|
|
|
176
176
|
'name' => 'chiselEditorScripts',
|
|
177
177
|
'data' => array(
|
|
178
178
|
'icons' => array(
|
|
179
|
-
'
|
|
180
|
-
'
|
|
179
|
+
'arrow-left' => __( 'Arrow Left', 'chisel' ),
|
|
180
|
+
'arrow-right' => __( 'Arrow Right', 'chisel' ),
|
|
181
|
+
'minus' => __( 'Minus', 'chisel' ),
|
|
182
|
+
'plus' => __( 'Plus', 'chisel' ),
|
|
181
183
|
),
|
|
182
184
|
),
|
|
183
185
|
),
|
|
@@ -5,6 +5,7 @@ namespace Chisel\WP;
|
|
|
5
5
|
use Timber\Timber;
|
|
6
6
|
use Chisel\Helper\ImageHelpers;
|
|
7
7
|
use Chisel\Helper\AcfHelpers;
|
|
8
|
+
use Chisel\Helper\CacheHelpers;
|
|
8
9
|
|
|
9
10
|
/**
|
|
10
11
|
* Use this class to get site components.
|
|
@@ -48,6 +49,13 @@ class Components {
|
|
|
48
49
|
*/
|
|
49
50
|
private static $the_title = array();
|
|
50
51
|
|
|
52
|
+
/**
|
|
53
|
+
* The svg icons.
|
|
54
|
+
*
|
|
55
|
+
* @var array
|
|
56
|
+
*/
|
|
57
|
+
private static $icons = array();
|
|
58
|
+
|
|
51
59
|
/**
|
|
52
60
|
* Get the site nav menus.
|
|
53
61
|
*
|
|
@@ -231,4 +239,32 @@ class Components {
|
|
|
231
239
|
|
|
232
240
|
return self::$the_title;
|
|
233
241
|
}
|
|
242
|
+
|
|
243
|
+
/**
|
|
244
|
+
* Get svg icon. The arguments are described in objects/icon.twig file
|
|
245
|
+
*
|
|
246
|
+
* @param array $args
|
|
247
|
+
*
|
|
248
|
+
* @return html
|
|
249
|
+
*/
|
|
250
|
+
public static function get_icon( $args ) {
|
|
251
|
+
$icon_slug = sanitize_title( $args['name'] );
|
|
252
|
+
|
|
253
|
+
$icon_key = '';
|
|
254
|
+
foreach ( $args as $key => $value ) {
|
|
255
|
+
if ( is_bool( $value ) ) {
|
|
256
|
+
$value = $value ? 'yes' : 'no';
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
$icon_key .= sanitize_title( $key . $value );
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
if ( isset( self::$icons[$icon_key] ) ) {
|
|
263
|
+
return self::$icons[$icon_key];
|
|
264
|
+
}
|
|
265
|
+
|
|
266
|
+
self::$icons[$icon_key] = Timber::compile( 'objects/icon.twig', $args, CacheHelpers::expiry() );
|
|
267
|
+
|
|
268
|
+
return self::$icons[$icon_key];
|
|
269
|
+
}
|
|
234
270
|
}
|
|
@@ -13,6 +13,7 @@ use Chisel\Helper\ImageHelpers;
|
|
|
13
13
|
use Chisel\Helper\ThemeHelpers;
|
|
14
14
|
use Chisel\Helper\WoocommerceHelpers;
|
|
15
15
|
use Chisel\Helper\YoastHelpers;
|
|
16
|
+
use Chisel\WP\Components;
|
|
16
17
|
|
|
17
18
|
/**
|
|
18
19
|
* Class used to extend Timber functionality.
|
|
@@ -80,6 +81,7 @@ class Twig implements InstanceInterface, HooksInterface {
|
|
|
80
81
|
$this->register_function( $twig, 'comments_template', array( $this, 'comments_template' ) );
|
|
81
82
|
$this->register_function( $twig, 'bem', array( $this, 'bem' ) );
|
|
82
83
|
$this->register_function( $twig, 'breadcrumbs', array( $this, 'breadcrumbs' ) );
|
|
84
|
+
$this->register_function( $twig, 'get_icon', array( $this, 'get_icon' ) );
|
|
83
85
|
|
|
84
86
|
return $twig;
|
|
85
87
|
}
|
|
@@ -300,4 +302,15 @@ class Twig implements InstanceInterface, HooksInterface {
|
|
|
300
302
|
public function breadcrumbs() {
|
|
301
303
|
return YoastHelpers::breadcrumbs();
|
|
302
304
|
}
|
|
305
|
+
|
|
306
|
+
/**
|
|
307
|
+
* Get svg icon. The arguments are described in objects/icon.twig file
|
|
308
|
+
*
|
|
309
|
+
* @param array $args
|
|
310
|
+
*
|
|
311
|
+
* @return html
|
|
312
|
+
*/
|
|
313
|
+
public function get_icon( $args ) {
|
|
314
|
+
return Components::get_icon( $args );
|
|
315
|
+
}
|
|
303
316
|
}
|
package/lib/commands/create/creators/app/chisel-starter-theme/src/blocks/accordion/accordion-item.js
CHANGED
|
@@ -66,8 +66,8 @@ registerBlockType('chisel/accordion-item', {
|
|
|
66
66
|
<RichText.Content tagName={titleTag} className="b-accordion__item-title" value={title} />
|
|
67
67
|
|
|
68
68
|
<span className="b-accordion__icons" aria-hidden="true">
|
|
69
|
-
<i className="
|
|
70
|
-
<i className="
|
|
69
|
+
<i className="o-icon is-css o-icon--icon-plus"></i>
|
|
70
|
+
<i className="o-icon is-css o-icon--icon-minus"></i>
|
|
71
71
|
</span>
|
|
72
72
|
</summary>
|
|
73
73
|
<div className="b-accordion__item-content js-accordion-content">
|
package/lib/commands/create/creators/app/chisel-starter-theme/src/blocks/accordion/style.scss
CHANGED
|
@@ -57,24 +57,31 @@
|
|
|
57
57
|
height: px-rem(24);
|
|
58
58
|
margin-left: get-margin('small');
|
|
59
59
|
|
|
60
|
-
.
|
|
60
|
+
.o-icon {
|
|
61
|
+
width: 100%;
|
|
62
|
+
height: 100%;
|
|
61
63
|
color: get-color('black');
|
|
64
|
+
|
|
65
|
+
&::before {
|
|
66
|
+
width: 100%;
|
|
67
|
+
height: 100%;
|
|
68
|
+
}
|
|
62
69
|
}
|
|
63
70
|
|
|
64
|
-
.
|
|
71
|
+
.o-icon--icon-plus {
|
|
65
72
|
display: block;
|
|
66
73
|
}
|
|
67
74
|
|
|
68
|
-
.
|
|
75
|
+
.o-icon--icon-minus {
|
|
69
76
|
display: none;
|
|
70
77
|
}
|
|
71
78
|
|
|
72
79
|
.b-accordion__item[open] & {
|
|
73
|
-
.
|
|
80
|
+
.o-icon--icon-plus {
|
|
74
81
|
display: none;
|
|
75
82
|
}
|
|
76
83
|
|
|
77
|
-
.
|
|
84
|
+
.o-icon--icon-minus {
|
|
78
85
|
display: block;
|
|
79
86
|
}
|
|
80
87
|
}
|
|
@@ -1,11 +1,43 @@
|
|
|
1
|
-
@
|
|
2
|
-
|
|
1
|
+
@use 'sass:map';
|
|
2
|
+
@use '../settings/icon-settings' as *;
|
|
3
3
|
|
|
4
|
-
|
|
5
|
-
|
|
4
|
+
@mixin icon-svg($name, $multicolor: false, $animated: false) {
|
|
5
|
+
display: block;
|
|
6
|
+
height: 1em;
|
|
7
|
+
line-height: 1em;
|
|
8
|
+
content: '';
|
|
9
|
+
|
|
10
|
+
$icons-path: '../../assets/icons';
|
|
11
|
+
|
|
12
|
+
@if $multicolor {
|
|
13
|
+
background-image: url('#{$icons-path}/icons.svg#icon-#{$name}-view');
|
|
14
|
+
background-repeat: no-repeat;
|
|
15
|
+
background-size: contain;
|
|
16
|
+
} @else {
|
|
17
|
+
background-color: var(--o-icon-color, currentcolor);
|
|
18
|
+
@if $animated {
|
|
19
|
+
mask: url('#{$icons-path}/animated/#{$name}.svg');
|
|
20
|
+
} @else {
|
|
21
|
+
mask: url('#{$icons-path}/icons.svg#icon-#{$name}-view');
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
mask-repeat: no-repeat;
|
|
25
|
+
mask-size: contain;
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
@if map.has-key($o-icon-icons, 'icon-#{$name}') {
|
|
29
|
+
width: map.get($o-icon-icons, 'icon-#{$name}') * 1em;
|
|
30
|
+
} @else {
|
|
31
|
+
width: 1em;
|
|
6
32
|
}
|
|
33
|
+
}
|
|
7
34
|
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
35
|
+
@mixin icon($name, $multicolor: false, $animated: false) {
|
|
36
|
+
height: 1em;
|
|
37
|
+
font-size: var(--o-icon-size, 1em);
|
|
38
|
+
line-height: 1em;
|
|
39
|
+
|
|
40
|
+
&::before {
|
|
41
|
+
@include icon-svg($name, $multicolor, $animated);
|
|
42
|
+
}
|
|
11
43
|
}
|
package/lib/commands/create/creators/app/chisel-starter-theme/src/styles/blocks/_core-button.scss
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
@use '~design' as *;
|
|
2
2
|
@use '../../design/settings';
|
|
3
3
|
|
|
4
|
-
$
|
|
4
|
+
$_static-icons: settings.$static-icons;
|
|
5
5
|
|
|
6
6
|
.wp-block-button {
|
|
7
7
|
.wp-block-button__link {
|
|
@@ -86,6 +86,15 @@ $_buttons-icons: settings.$buttons-icons;
|
|
|
86
86
|
@include button-large;
|
|
87
87
|
}
|
|
88
88
|
|
|
89
|
+
@each $icon in $_static-icons {
|
|
90
|
+
&.has-icon-#{$icon} .wp-block-button__link {
|
|
91
|
+
&::after,
|
|
92
|
+
&::before {
|
|
93
|
+
@include icon-svg($icon);
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
|
|
89
98
|
&.has-icon {
|
|
90
99
|
.wp-block-button__link {
|
|
91
100
|
@include button-icon;
|
|
@@ -103,7 +112,8 @@ $_buttons-icons: settings.$buttons-icons;
|
|
|
103
112
|
display: block;
|
|
104
113
|
width: px-rem(24);
|
|
105
114
|
height: px-rem(24);
|
|
106
|
-
margin-
|
|
115
|
+
margin-right: px-rem(-6);
|
|
116
|
+
margin-left: px-rem(6);
|
|
107
117
|
content: '';
|
|
108
118
|
}
|
|
109
119
|
|
|
@@ -115,8 +125,8 @@ $_buttons-icons: settings.$buttons-icons;
|
|
|
115
125
|
&.has-icon-left .wp-block-button__link {
|
|
116
126
|
&::before {
|
|
117
127
|
display: block;
|
|
118
|
-
margin-right: px-rem(
|
|
119
|
-
margin-left:
|
|
128
|
+
margin-right: px-rem(6);
|
|
129
|
+
margin-left: px-rem(-6);
|
|
120
130
|
}
|
|
121
131
|
|
|
122
132
|
&::after {
|
|
@@ -124,13 +134,4 @@ $_buttons-icons: settings.$buttons-icons;
|
|
|
124
134
|
}
|
|
125
135
|
}
|
|
126
136
|
}
|
|
127
|
-
|
|
128
|
-
@each $button-icon in $_buttons-icons {
|
|
129
|
-
&.has-icon-#{$button-icon} .wp-block-button__link {
|
|
130
|
-
&::after,
|
|
131
|
-
&::before {
|
|
132
|
-
@include get-icon($button-icon);
|
|
133
|
-
}
|
|
134
|
-
}
|
|
135
|
-
}
|
|
136
137
|
}
|
package/lib/commands/create/creators/app/chisel-starter-theme/src/styles/components/_buttons.scss
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
@use '~design' as *;
|
|
2
2
|
@use '../../design/settings';
|
|
3
3
|
|
|
4
|
-
$
|
|
4
|
+
$_static-icons: settings.$static-icons;
|
|
5
5
|
|
|
6
6
|
.c-btn {
|
|
7
7
|
@include button;
|
|
@@ -84,6 +84,15 @@ $_buttons-icons: settings.$buttons-icons;
|
|
|
84
84
|
@include button-large;
|
|
85
85
|
}
|
|
86
86
|
|
|
87
|
+
@each $icon in $_static-icons {
|
|
88
|
+
.c-btn.has-icon-#{$icon} {
|
|
89
|
+
&::after,
|
|
90
|
+
&::before {
|
|
91
|
+
@include icon-svg($icon);
|
|
92
|
+
}
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
|
|
87
96
|
.c-btn.has-icon {
|
|
88
97
|
@include button-icon;
|
|
89
98
|
|
|
@@ -100,7 +109,8 @@ $_buttons-icons: settings.$buttons-icons;
|
|
|
100
109
|
display: block;
|
|
101
110
|
width: px-rem(24);
|
|
102
111
|
height: px-rem(24);
|
|
103
|
-
margin-
|
|
112
|
+
margin-right: px-rem(-6);
|
|
113
|
+
margin-left: px-rem(6);
|
|
104
114
|
content: '';
|
|
105
115
|
}
|
|
106
116
|
|
|
@@ -111,8 +121,8 @@ $_buttons-icons: settings.$buttons-icons;
|
|
|
111
121
|
&.has-icon-left {
|
|
112
122
|
&::before {
|
|
113
123
|
display: block;
|
|
114
|
-
margin-right: px-rem(
|
|
115
|
-
margin-left:
|
|
124
|
+
margin-right: px-rem(6);
|
|
125
|
+
margin-left: px-rem(-6);
|
|
116
126
|
}
|
|
117
127
|
|
|
118
128
|
&::after {
|
|
@@ -120,12 +130,3 @@ $_buttons-icons: settings.$buttons-icons;
|
|
|
120
130
|
}
|
|
121
131
|
}
|
|
122
132
|
}
|
|
123
|
-
|
|
124
|
-
@each $button-icon in $_buttons-icons {
|
|
125
|
-
.c-btn.has-icon-#{$button-icon} {
|
|
126
|
-
&::after,
|
|
127
|
-
&::before {
|
|
128
|
-
@include get-icon($button-icon);
|
|
129
|
-
}
|
|
130
|
-
}
|
|
131
|
-
}
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
@use '~design' as *;
|
|
2
|
+
|
|
3
|
+
.c-icons-preview {
|
|
4
|
+
display: block;
|
|
5
|
+
width: 100%;
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
.c-icons-preview__h4 {
|
|
9
|
+
font-size: 1.5rem;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.c-icons-preview__article {
|
|
13
|
+
margin: 2rem 0;
|
|
14
|
+
background: rgba(0,0,0, 2%);
|
|
15
|
+
padding: 1rem;
|
|
16
|
+
border-radius: 0.5rem;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.c-icons-preview__section {
|
|
20
|
+
margin: 1rem 0;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
// CSS Usage of icons
|
|
26
|
+
// -----------------------------------------------------------------------------
|
|
27
|
+
|
|
28
|
+
// Mono
|
|
29
|
+
.c-icons-preview__css-icon1{
|
|
30
|
+
@include icon('chisel-logo');
|
|
31
|
+
display: block;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.c-icons-preview__css-icon2 {
|
|
35
|
+
@include icon('x-logo');
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.c-icons-preview__css-icon3 {
|
|
39
|
+
@include icon('color-pallet');
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.c-icons-preview__css-icon4 {
|
|
43
|
+
@include icon('chisel-icon');
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
.c-icons-preview__css-icon5 {
|
|
47
|
+
@include icon('chisel-icon');
|
|
48
|
+
font-size: 4rem;
|
|
49
|
+
}
|
|
50
|
+
|
|
51
|
+
.c-icons-preview__css-icon6 {
|
|
52
|
+
@include icon('chisel-icon');
|
|
53
|
+
background: rgba(0, 0, 255, 20%);
|
|
54
|
+
width: auto;
|
|
55
|
+
height: auto;
|
|
56
|
+
padding: 1rem;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.c-icons-preview__css-icon7 {
|
|
60
|
+
@include icon('chisel-icon');
|
|
61
|
+
color: green;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.c-icons-preview__css-icon8 {
|
|
65
|
+
@include icon('chisel-icon');
|
|
66
|
+
color: blue;
|
|
67
|
+
--o-icon-color: red;
|
|
68
|
+
--o-icon-size: 2rem;
|
|
69
|
+
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
// Color
|
|
73
|
+
.c-icons-preview__css-color-icon1 {
|
|
74
|
+
@include icon('color-chisel-logo', true);
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.c-icons-preview__css-color-icon2 {
|
|
78
|
+
@include icon('color-facebook-logo', true);
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.c-icons-preview__css-color-icon3 {
|
|
82
|
+
@include icon('color-chisel-icon', true);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.c-icons-preview__css-color-icon4 {
|
|
86
|
+
@include icon('color-chisel-icon', true);
|
|
87
|
+
font-size: 4rem;
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.c-icons-preview__css-color-icon5 {
|
|
91
|
+
@include icon('color-chisel-icon', true);
|
|
92
|
+
background: rgba(0, 0, 255, 20%);
|
|
93
|
+
width: auto;
|
|
94
|
+
height: auto;
|
|
95
|
+
padding: 1rem;
|
|
96
|
+
}
|
|
97
|
+
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
@use 'sass:math';
|
|
2
|
+
@use 'sass:map';
|
|
3
|
+
@use '~design' as *;
|
|
4
|
+
@use '../../design/settings';
|
|
5
|
+
@use '../../design/settings/icon-settings' as *;
|
|
6
|
+
|
|
7
|
+
$_static-icons: settings.$static-icons;
|
|
8
|
+
$_animated-icons: settings.$animated-icons;
|
|
9
|
+
|
|
10
|
+
.o-icon {
|
|
11
|
+
display: flex;
|
|
12
|
+
align-items: center;
|
|
13
|
+
justify-content: center;
|
|
14
|
+
width: 1em;
|
|
15
|
+
height: 1em;
|
|
16
|
+
font-size: var(--o-icon-size, 1em);
|
|
17
|
+
line-height: 1em;
|
|
18
|
+
|
|
19
|
+
&--color {
|
|
20
|
+
background-repeat: no-repeat;
|
|
21
|
+
background-size: contain;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
&--mono {
|
|
25
|
+
background-color: var(--o-icon-color, currentcolor);
|
|
26
|
+
mask-repeat: no-repeat;
|
|
27
|
+
mask-size: contain;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
&--inline {
|
|
31
|
+
display: inline-flex;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
@each $icon, $width-ratio in $o-icon-icons {
|
|
35
|
+
&--#{$icon} {
|
|
36
|
+
width: $width-ratio * 1em;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
@each $static-icon in $_static-icons {
|
|
41
|
+
&--icon-#{$static-icon}.is-css {
|
|
42
|
+
@include icon($static-icon);
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
@each $animated-icon in $_animated-icons {
|
|
47
|
+
&--icon-#{$animated-icon}.is-css {
|
|
48
|
+
@include icon($animated-icon, false, true);
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
}
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
{#
|
|
2
|
+
Input Data:
|
|
3
|
+
name: string // name of the icon
|
|
4
|
+
inline: boolean // required for icons that should be displayed as an inline element and not a block
|
|
5
|
+
rectangle: boolean // required for icons that are rectangles (not squares) to be properly sized
|
|
6
|
+
force_mono: boolean // use in case the monochromatic icons name starts with "color-"
|
|
7
|
+
alt: string
|
|
8
|
+
is_css: boolean // whether the icon should be loaded with css. This requires adding the icon to the css map in css settings file.
|
|
9
|
+
color: string // css color for the icon
|
|
10
|
+
#}
|
|
11
|
+
|
|
12
|
+
{% set name_hint_is_color = name matches '/^color-.*/' %}
|
|
13
|
+
{% set is_color = force_mono ? false : name_hint_is_color %}
|
|
14
|
+
{% set inline_class = inline ? 'o-icon--inline' : '' %}
|
|
15
|
+
{% set icon_variant_class = is_color ? 'o-icon--color' : 'o-icon--mono' %}
|
|
16
|
+
{% set rectangle_class = rectangle ? 'o-icon--icon-' ~ name : '' %}
|
|
17
|
+
{% set icon_prefix = 'icon-' %}
|
|
18
|
+
{% set icon_name = icon_prefix ~ name %}
|
|
19
|
+
{% set icon_path = fn('get_template_directory_uri') ~ '/assets/icons/icons.svg' ~ '#' ~ icon_name ~ '-view' %}
|
|
20
|
+
{% set bg_style_variant = is_color ? 'background-image' : 'mask-image' %}
|
|
21
|
+
{% set color_style_variant = is_css ? 'color' : 'color' %}
|
|
22
|
+
{% set color_style = color ? color_style_variant ~ ': ' ~ color ~ ';' : '' %}
|
|
23
|
+
|
|
24
|
+
{% if is_css %}
|
|
25
|
+
{% set icon_variant_class = '' %}
|
|
26
|
+
{% set inline_class = 'is-css ' ~ inline_class %}
|
|
27
|
+
{% set inline_style = color_style %}
|
|
28
|
+
{% else %}
|
|
29
|
+
{% set inline_style = bg_style_variant ~ ': url(' ~ icon_path ~ ');' ~ color_style %}
|
|
30
|
+
{% endif %}
|
|
31
|
+
|
|
32
|
+
{% set style = inline_style ? 'style="' ~ inline_style ~ '"' : '' %}
|
|
33
|
+
|
|
34
|
+
<i class="o-icon o-icon--{{ icon_name }} {{ [inline_class, rectangle_class, icon_variant_class]|filter(v => v|length)|join(' ') }}"
|
|
35
|
+
{{ alt ? 'role="img"' : '' }}
|
|
36
|
+
{{ alt ? 'aria-label="' ~ alt ~ '"' : 'aria-hidden="true"' }}
|
|
37
|
+
{{ style }}></i>
|
package/lib/commands/create/creators/app/chisel-starter-theme/views/partials/icons-preview.twig
ADDED
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
<section class="o-wrapper__inner c-icons-preview">
|
|
2
|
+
<h2>Icons preview</h2>
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
<article class="c-icons-preview__article">
|
|
6
|
+
<h3>Icons HTML usage example</h3>
|
|
7
|
+
|
|
8
|
+
<section class="c-icons-preview__section">
|
|
9
|
+
<h4 class="c-icons-preview__h4">Monochromatic</h4>
|
|
10
|
+
<div style="font-size: 2rem;">
|
|
11
|
+
{% include 'objects/icon.twig' with {name: 'chisel-logo', rectangle: true, alt: 'Chisel logo'} %}
|
|
12
|
+
{% include 'objects/icon.twig' with {name: 'x-logo', inline: true} %}
|
|
13
|
+
{% include 'objects/icon.twig' with {name: 'color-pallet', forceMono: true, inline: true} %}
|
|
14
|
+
{% include 'objects/icon.twig' with {name: 'chisel-icon', forceMono: true, inline: true} %}
|
|
15
|
+
<span style="font-size: 4rem">{% include 'objects/icon.twig' with {name: 'chisel-icon', forceMono: true, inline: true} %}</span>
|
|
16
|
+
<span style="display: inline-block;padding: 1rem; background: rgba(0, 0, 255, 20%);">
|
|
17
|
+
{% include 'objects/icon.twig' with {name: 'chisel-icon'} %}
|
|
18
|
+
</span>
|
|
19
|
+
<span style="display: inline-block; color: green">
|
|
20
|
+
{% include 'objects/icon.twig' with {name: 'chisel-icon'} %}
|
|
21
|
+
</span>
|
|
22
|
+
<span style="display: block; color: blue; font-size: 1.2rem; --o-icon-color: red; --o-icon-size: 2rem">
|
|
23
|
+
Blue text with red icon: {% include 'objects/icon.twig' with {name: 'chisel-icon', inline: true} %}
|
|
24
|
+
</span>
|
|
25
|
+
</div>
|
|
26
|
+
</section>
|
|
27
|
+
|
|
28
|
+
<section class="c-icons-preview__section">
|
|
29
|
+
<h4 class="c-icons-preview__h4">Multicolor</h4>
|
|
30
|
+
<div style="font-size: 2rem;">
|
|
31
|
+
{% include 'objects/icon.twig' with {name: 'color-chisel-logo', alt: 'Chisel logo ALT', rectangle: true, inline: true} %}
|
|
32
|
+
{% include 'objects/icon.twig' with {name: 'color-facebook-logo', inline: true} %}
|
|
33
|
+
{% include 'objects/icon.twig' with {name: 'color-chisel-icon', inline: true} %}
|
|
34
|
+
<span style="font-size: 4rem">
|
|
35
|
+
{% include 'objects/icon.twig' with {name: 'color-chisel-icon', inline: true} %}
|
|
36
|
+
</span>
|
|
37
|
+
<span style="display: inline-block;padding: 1rem; background: rgba(0, 0, 255, 20%);">
|
|
38
|
+
{% include 'objects/icon.twig' with {name: 'color-chisel-icon', inline: false} %}
|
|
39
|
+
</span>
|
|
40
|
+
</div>
|
|
41
|
+
</section>
|
|
42
|
+
</article>
|
|
43
|
+
|
|
44
|
+
<article class="c-icons-preview__article">
|
|
45
|
+
<h3>Icons CSS usage example</h3>
|
|
46
|
+
|
|
47
|
+
<section class="c-icons-preview__section">
|
|
48
|
+
<h4 class="c-icons-preview__h4">Monochromatic</h4>
|
|
49
|
+
<div style="font-size: 2rem;">
|
|
50
|
+
<i class="c-icons-preview__css-icon1"></i>
|
|
51
|
+
<i class="c-icons-preview__css-icon2"></i>
|
|
52
|
+
<i class="c-icons-preview__css-icon3"></i>
|
|
53
|
+
<i class="c-icons-preview__css-icon4"></i>
|
|
54
|
+
<i class="c-icons-preview__css-icon5"></i>
|
|
55
|
+
<i class="c-icons-preview__css-icon6"></i>
|
|
56
|
+
<i class="c-icons-preview__css-icon7"></i>
|
|
57
|
+
<div style="display: block; color: blue; font-size: 1.2rem;">
|
|
58
|
+
Blue text with red icon: <i class="c-icons-preview__css-icon8"></i>
|
|
59
|
+
</div>
|
|
60
|
+
</div>
|
|
61
|
+
</section>
|
|
62
|
+
|
|
63
|
+
<section class="c-icons-preview__section">
|
|
64
|
+
<h4 class="c-icons-preview__h4">Multicolor</h4>
|
|
65
|
+
<div style="font-size: 2rem;">
|
|
66
|
+
<i class="c-icons-preview__css-color-icon1"></i>
|
|
67
|
+
<i class="c-icons-preview__css-color-icon2"></i>
|
|
68
|
+
<i class="c-icons-preview__css-color-icon3"></i>
|
|
69
|
+
<i class="c-icons-preview__css-color-icon4"></i>
|
|
70
|
+
<i class="c-icons-preview__css-color-icon5"></i>
|
|
71
|
+
</div>
|
|
72
|
+
</section>
|
|
73
|
+
</article>
|
|
74
|
+
|
|
75
|
+
<!-- TODO: list all of the available icons -->
|
|
76
|
+
<article class="c-icons-preview__article">
|
|
77
|
+
<h3>All available icons</h3>
|
|
78
|
+
<section class="c-icons-preview__section">TODO :)</section>
|
|
79
|
+
</article>
|
|
80
|
+
|
|
81
|
+
</section>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "generator-chisel",
|
|
3
|
-
"version": "2.0.0-alpha.
|
|
3
|
+
"version": "2.0.0-alpha.15",
|
|
4
4
|
"description": "A generator for scaffolding front-end and WordPress projects",
|
|
5
5
|
"bin": {
|
|
6
6
|
"chisel": "bin/chisel.js"
|
|
@@ -37,5 +37,5 @@
|
|
|
37
37
|
"tinyqueue": "^2.0.3",
|
|
38
38
|
"update-notifier": "^4.1.0"
|
|
39
39
|
},
|
|
40
|
-
"gitHead": "
|
|
40
|
+
"gitHead": "ff07de0aef0e36462f67305e7f35199e35c1dbca"
|
|
41
41
|
}
|
package/lib/commands/create/creators/app/chisel-starter-theme/src/styles/components/_icon.scss
DELETED
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
@use '../../design/settings';
|
|
2
|
-
@use '~design' as *;
|
|
3
|
-
|
|
4
|
-
$_buttons-icons: settings.$buttons-icons;
|
|
5
|
-
|
|
6
|
-
.c-icon {
|
|
7
|
-
display: inline-block;
|
|
8
|
-
width: px-rem(24);
|
|
9
|
-
height: px-rem(24);
|
|
10
|
-
font-style: normal;
|
|
11
|
-
vertical-align: middle;
|
|
12
|
-
background-color: get-color('black');
|
|
13
|
-
|
|
14
|
-
@each $button-icon in $_buttons-icons {
|
|
15
|
-
&--#{$button-icon} {
|
|
16
|
-
@include get-icon($button-icon);
|
|
17
|
-
}
|
|
18
|
-
}
|
|
19
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
<i class="{{ bem('c-icon', icon) }}"></i>
|
|
File without changes
|
|
File without changes
|
|
File without changes
|