Update old docs to new Pug templates

1 files changed, 84 insertions, 0 deletions

diff --git a/docs/src/contents/bars.pug b/docs/src/contents/bars.pug
new file mode 100644
index 0000000..58d7f3c
--- /dev/null
+++ b/docs/src/contents/bars.pug
@@ -0,0 +1,84 @@
+p
+  | Bars represent the progress of a task or the value within the known range.
+  | Bars are custom components for displaying HTML5 #{'<progress>'}, #{'<meter>'} and input range elements.
+
+.columns
+  .column.col-8.col-xs-12
+    .bar.bar-sm
+      .bar-item.tooltip(data-tooltip="25%" role="progressbar" style="width:25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100")
+.columns
+  .column.col-8.col-xs-12
+    .bar
+      .bar-item.tooltip(data-tooltip="50%" role="progressbar" style="width:50%;")
+.columns
+  .column.col-8.col-xs-12
+    .bar
+      .bar-item.tooltip(data-tooltip="25%" role="progressbar" style="width:25%;") 25%
+      .bar-item.tooltip(data-tooltip="15%" role="progressbar" style="width:15%;background:#817fe3;") 15%
+      .bar-item.tooltip(data-tooltip="10%" role="progressbar" style="width:10%;background:#aaa9eb;") 10%
+      .bar-item.tooltip(data-tooltip="15%" role="progressbar" style="width:15%;") 15%
+
+p
+  | Add a container element with the #[code bar] class.
+  | And add child elements with the #[code bar-item] class.
+  | The width percentage value is needed for every #[code bar-item].
+
+p
+  | There is the #[code bar-sm] class for thinner Bars.
+  | Also, you could use #[a(href="#tooltips") Tooltips] for any #[code bar-item].
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      <div class="bar bar-sm">
+        <div class="bar-item" role="progressbar" style="width:25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
+      </div>
+
+      <!-- multi-bars -->
+      <div class="bar">
+        <div class="bar-item tooltip" data-tooltip="25%" style="width:25%;">25%</div>
+        <div class="bar-item" style="width:15%;background:#818bd5;">15%</div>
+      </div>
+
++docs-subheading('bars-slider', 'Slider bars')
+
+.columns
+  .column.col-8.col-xs-12
+    .bar.bar-slider
+      .bar-item(role="progressbar" style="width:50%;")
+        button.bar-slider-btn.btn.tooltip(data-tooltip="50%" role="slider")
+.columns
+  .column.col-8.col-xs-12
+    .bar.bar-slider
+      .bar-item(role="progressbar" style="width:15%;")
+        button.bar-slider-btn.btn.tooltip(data-tooltip="25%" role="slider")
+      .bar-item(role="progressbar" style="width:65%;")
+        button.bar-slider-btn.btn.tooltip(data-tooltip="65%" role="slider")
+
+p
+  | You can add the #[code bar-slider] class to the Bars container.
+  | And add child elements with the #[code bar-item] class and #[code bar-slider-btn] inside bar-item.
+  | You need to set the #[code bar-item] width manually to have the slider point.
+
+p
+  | If there are two #[code bar-item] divs in one bar-slider, you will have a range slider.
+
+pre.code(data-lang='HTML')
+  code
+    :highlight(lang="html")
+      <!-- slider -->
+      <div class="bar bar-slider">
+        <div class="bar-item" role="progressbar" style="width:25%;">
+          <button class="bar-slider-btn btn" role="slider"></button>
+        </div>
+      </div>
+
+      <!-- range slider -->
+      <div class="bar bar-slider">
+        <div class="bar-item" role="progressbar" style="width:15%;">
+          <button class="bar-slider-btn btn" role="slider"></button>
+        </div>
+        <div class="bar-item" role="progressbar" style="width:65%;">
+          <button class="bar-slider-btn btn" role="slider"></button>
+        </div>
+      </div>
\ No newline at end of file