diff options
| -rw-r--r-- | src/_icons/bold.svg | 6 | ||||
| -rw-r--r-- | src/_icons/italic.svg | 7 | ||||
| -rw-r--r-- | src/_icons/plane-arrival.svg | 2 | ||||
| -rw-r--r-- | src/_icons/plane-departure.svg | 2 | ||||
| -rw-r--r-- | src/_icons/underline.svg | 6 | ||||
| -rw-r--r-- | src/editor.html | 17 | ||||
| -rw-r--r-- | src/style.scss | 31 |
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; + } +} |
