mirror of
https://github.com/tabler/tabler-icons.git
synced 2025-08-31 17:42:15 +02:00
bold, italic, underline icons #11
This commit is contained in:
6
src/_icons/bold.svg
Normal file
6
src/_icons/bold.svg
Normal file
@@ -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>
|
7
src/_icons/italic.svg
Normal file
7
src/_icons/italic.svg
Normal file
@@ -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>
|
@@ -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>
|
||||
|
@@ -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>
|
||||
|
6
src/_icons/underline.svg
Normal file
6
src/_icons/underline.svg
Normal file
@@ -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>
|
@@ -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">
|
||||
|
@@ -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;
|
||||
}
|
||||
}
|
||||
|
Reference in New Issue
Block a user