Merge pull request #4 from codidact/luap42/icon-only-buttons

Add CSS for icon only buttons. codidact.css needs to be rebuild afterwards.

docs/components.buttons.html

@@ -112,6 +112,23 @@ <h5 id="sizes-example">Example</h5>
         <button class="button is-extremely-large">extremely large button</button>
       </div>
 
+      <h2 id="icon-only">Icon only buttons</h2>
+      <p>Sometimes you have buttons, which consist <em>only</em> of an icon. These are often used for vote buttons. You can mark a button as icon only, by giving it the class <code>.is-icon-only</code>. As normal buttons, they appear as primary/danger/muted buttons and they, too, have different sizes.</p>
+      <p>Icon only buttons should have a descriptive <code>title="..."</code> attribute for accessibility reasons</p>
+
+      <h5 id="icon-only-example">Example</h5>
+
+      <pre class="has-margin-0 has-border-width-0 has-border-radius-0 has-background-color-black has-color-white"><code>&lt;button class="button is-icon-only-button"&gt;...&lt;/button&gt;
+&lt;button class="button is-icon-only-button is-extremely-large"&gt;...&lt;/button&gt;
+&lt;button class="button is-icon-only-button is-danger"&gt;...&lt;/button&gt;
+&lt;button class="button is-icon-only-button is-muted"&gt;...&lt;/button&gt;</code></pre>
+      <div class="has-border-width-1 has-border-style-solid has-padding-4 has-border-color-tertiary-050">
+        <button class="button is-icon-only-button">&#x2764;</button>
+        <button class="button is-icon-only-button is-extremely-large">&#x2764;</button>
+        <button class="button is-icon-only-button is-danger">&#x2764;</button>
+        <button class="button is-icon-only-button is-muted">&#x2764;</button>
+      </div>
+
       <h2 id="active">Active buttons</h2>
 
       <p>It's possible to mark buttons as active (i.e. pressed), by adding the class <code>.is-active</code>.</p>