Progress, radios & checkboxes

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

developer_manual/design/html.rst

@@ -5,3 +5,73 @@
 ===============
 Html elements
 ===============
+
+Progress bar
+=============
+
+Nextcloud support and provides an already themed progress bar.
+
+Please use the html5 ``progress`` element.
+
+.. figure:: ../images/progress.png
+   :alt: Progress html5
+   :figclass: figure-with-code
+
+.. code-block:: html
+
+    <progress value="42.79" max="100"></progress>
+
+Checkboxes and radios
+======================
+
+As default html5 checkboxes & radios are **not** customisable, we created an override using label and ``::after`` elements.
+
+There is 2 colors:
+
+* Default themed with the primary color.
+* White colored.
+
+Requirements:
+
+* You need to have a ``label`` element **directly** after the ``input`` element.
+* The input **must** have the ``checkbox`` or ``radio`` class.
+* To use the white theme, you **need** to also add the ``checkbox--white`` or ``radio--white`` class.
+* Your label **must** have an associated text for accessibility.
+
+.. figure:: ../images/checkboxes.png
+   :alt: Nextcloud's themed checkboxes
+   :figclass: figure-with-code
+
+.. code-block:: html
+
+    <input type="checkbox" id="test1" class="checkbox"
+           checked="checked">
+    <label for="test1">Selected</label><br>
+    <input type="checkbox" id="test2" class="checkbox">
+    <label for="test2">Unselected</label><br>
+    <input type="checkbox" id="test3" class="checkbox"
+           disabled="disabled">
+    <label for="test3">Disabled</label><br>
+    <input type="checkbox" id="test4" class="checkbox">
+    <label for="test4">Hovered</label><br>
+
+.. figure:: ../images/radios.png
+   :alt: Nextcloud's themed radios
+   :figclass: figure-with-code
+
+.. code-block:: html
+
+    <input type="radio" id="test1" class="radio"
+           checked="checked">
+    <label for="test1">Selected</label><br>
+    <input type="radio" id="test2" class="radio">
+    <label for="test2">Unselected</label><br>
+    <input type="radio" id="test3" class="radio"
+           disabled="disabled">
+    <label for="test3">Disabled</label><br>
+    <input type="radio" id="test4" class="radio">
+    <label for="test4">Hovered</label><br>
+
+
+Buttons
+==================

developer_manual/design/icons.rst

@@ -0,0 +1,7 @@
+.. sectionauthor:: John Molakvoæ <skjnldsv@protonmail.com>
+.. codeauthor:: John Molakvoæ <skjnldsv@protonmail.com>
+..  _icons:
+
+========
+Icons
+========

developer_manual/design/index.rst

@@ -10,3 +10,4 @@ Design Guidelines
    content
    popovermenu
    html
+   icons