aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--src/_icons/bold.svg6
-rw-r--r--src/_icons/italic.svg7
-rw-r--r--src/_icons/plane-arrival.svg2
-rw-r--r--src/_icons/plane-departure.svg2
-rw-r--r--src/_icons/underline.svg6
-rw-r--r--src/editor.html17
-rw-r--r--src/style.scss31
7 files changed, 69 insertions, 2 deletions
diff --git a/src/_icons/bold.svg b/src/_icons/bold.svg
new file mode 100644
index 00000000..4624d0f3
--- /dev/null
+++ b/src/_icons/bold.svg
@@ -0,0 +1,6 @@
+---
+---
+<svg>
+ <path d="M7 5h6a3.5 3.5 0 0 1 0 7h-6z" />
+ <path d="M13 12h1a3.5 3.5 0 0 1 0 7h-7v-7" />
+</svg>
diff --git a/src/_icons/italic.svg b/src/_icons/italic.svg
new file mode 100644
index 00000000..fcf4e2e7
--- /dev/null
+++ b/src/_icons/italic.svg
@@ -0,0 +1,7 @@
+---
+---
+<svg>
+ <line x1="11" y1="5" x2="17" y2="5" />
+ <line x1="7" y1="19" x2="13" y2="19" />
+ <line x1="14" y1="5" x2="10" y2="19" />
+</svg>
diff --git a/src/_icons/plane-arrival.svg b/src/_icons/plane-arrival.svg
index 2c8a64f8..15a63569 100644
--- a/src/_icons/plane-arrival.svg
+++ b/src/_icons/plane-arrival.svg
@@ -1,5 +1,5 @@
---
---
<svg>
- <path d="M15 12h5a2 2 0 0 1 0 4h-15l-3 -6h3l2 2h3l-2 -7h3z" transform="rotate(26.5 12 12)"/>
+ <path d="M15 12h5a2 2 0 0 1 0 4h-15l-3 -6h3l2 2h3l-2 -7h3z" transform="rotate(26.5 12 12)" />
</svg>
diff --git a/src/_icons/plane-departure.svg b/src/_icons/plane-departure.svg
index c06d2121..ba3fcc43 100644
--- a/src/_icons/plane-departure.svg
+++ b/src/_icons/plane-departure.svg
@@ -1,5 +1,5 @@
---
---
<svg>
- <path d="M15 12h5a2 2 0 0 1 0 4h-15l-3 -6h3l2 2h3l-2 -7h3z" transform="rotate(-26.5 12 12)"/>
+ <path d="M15 12h5a2 2 0 0 1 0 4h-15l-3 -6h3l2 2h3l-2 -7h3z" transform="rotate(-26.5 12 12)" />
</svg>
diff --git a/src/_icons/underline.svg b/src/_icons/underline.svg
new file mode 100644
index 00000000..94a68c25
--- /dev/null
+++ b/src/_icons/underline.svg
@@ -0,0 +1,6 @@
+---
+---
+<svg>
+ <line x1="7" y1="19" x2="17" y2="19" />
+ <path d="M8 5v6a4 4 0 0 0 8 0v-6" />
+</svg>
diff --git a/src/editor.html b/src/editor.html
index 3a928f28..688cf5e3 100644
--- a/src/editor.html
+++ b/src/editor.html
@@ -1,6 +1,10 @@
---
layout: default
---
+
+{% assign toolbar = 'bold,italic,underline|align-left,align-center,align-right,align-justified|list,list-check' | split: '|' %}
+
+
<div class="container">
<div class="box">
@@ -69,6 +73,19 @@ layout: default
</div>
</div>
+ <div class="mb">
+ <div class="toolbar">
+ {% for group in toolbar %}
+ {% assign buttons = group | split: ',' %}
+ <div class="buttons">
+ {% for button in buttons %}
+ <div class="button js-icon" data-icon="{{ name }}">{% include icon.html name=button %}</div>
+ {% endfor %}
+ </div>
+ {% endfor %}
+ </div>
+ </div>
+
<h2 class="icon-subtitle">{{ site.icons.size }} icons</h2>
<div class="mb">
diff --git a/src/style.scss b/src/style.scss
index fd237267..698a803a 100644
--- a/src/style.scss
+++ b/src/style.scss
@@ -395,3 +395,34 @@ Components
.td-1 {
width: 1%;
}
+
+$border-color: #e0e0e0;
+
+.toolbar {
+ display: flex;
+}
+
+.buttons {
+ display: flex;
+ margin-right: .5rem;
+ border: 1px solid $border-color;
+ border-radius: 3px;
+
+ .button + .button {
+ border-left: 1px solid $border-color;
+ }
+}
+
+.button {
+ display: inline-flex;
+ width: 2rem;
+ height: 2rem;
+ align-items: center;
+ justify-content: center;
+ color: mix($dark, #fff, 75%);
+
+ svg {
+ width: 1.25rem;
+ height: 1.25rem;
+ }
+}