From 3ab3a9d09955772ec56ddadbba49954b4edd6a3e Mon Sep 17 00:00:00 2001
From: Yan Zhu <picturepan2@hotmail.com>
Date: Tue, 6 Nov 2018 18:52:37 +0800
Subject: Update the Docs completely

---
 docs/src/elements/buttons.pug | 194 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 194 insertions(+)
 create mode 100644 docs/src/elements/buttons.pug

(limited to 'docs/src/elements/buttons.pug')

diff --git a/docs/src/elements/buttons.pug b/docs/src/elements/buttons.pug
new file mode 100644
index 0000000..04e3101
--- /dev/null
+++ b/docs/src/elements/buttons.pug
@@ -0,0 +1,194 @@
+extends ../_layout/_docs-layout.pug
+
+block variables
+  - var slug = 'buttons'
+  - var parent = 'elements'
+  - var title = 'Buttons - Elements - Spectre.css CSS Framework'
+  - var description = 'Spectre.css is a lightweight, responsive and modern CSS framework for faster and extensible development. Spectre provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.'
+
+block docs-content
+  +docs-heading('buttons', 'Buttons')
+    include ../_layout/_ad-g.pug
+
+    p Buttons include simple button styles for actions in different types and sizes.
+
+    .docs-demo.columns
+      .column.col-12
+        button.btn default button
+        button.btn.btn-primary primary button
+        button.btn.btn-link link button
+
+    p
+      | Add the #[code btn] class to #{'<a>'}, #{'<input>'} or #{'<button>'} elements for a default button. 
+      | There are classes #[code btn-primary] and #[code btn-link] for predefined primary and link buttons.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <button class="btn">default button</button>
+          <button class="btn btn-primary">primary button</button>
+          <button class="btn btn-link">link button</button>
+
+    +docs-subheading('buttons-colors', 'Button colors')
+
+    .docs-demo.columns
+      .column.col-12
+        button.btn.btn-success success button
+        button.btn.btn-error error button
+
+    p
+      | Add the #[code btn-success] or #[code btn-error] class for success (green) or error (red) button color.
+      | If you need more button colors, please use 
+      a(href="getting-started.html#variables-buttons") button mixins
+      |  to create your own button color variants.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <button class="btn btn-success">success button</button>
+          <button class="btn btn-error">error button</button>
+
+    +docs-subheading('buttons-sizes', 'Button sizes')
+
+    .docs-demo.columns
+      .column.col-12
+        button.btn.btn-primary.btn-lg
+          | large 
+          i.icon.icon-arrow-down
+        button.btn.btn-primary.btn-lg large button
+      .column.col-12
+        button.btn.btn-primary
+          | normal 
+          i.icon.icon-arrow-down
+        button.btn.btn-primary normal button
+      .column.col-12
+        button.btn.btn-primary.btn-sm
+          | small 
+          i.icon.icon-arrow-down
+        button.btn.btn-primary.btn-sm small button
+
+
+    p
+      | Add the #[code btn-sm] or #[code btn-lg] class for small or large button size. 
+      | Also, you can add the #[code btn-block] class for a full-width button.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <button class="btn btn-lg">large button</button>
+          <button class="btn btn-sm">small button</button>
+
+          <button class="btn btn-block">block button</button>
+
+          <button class="btn btn-primary btn-lg"><i class="icon icon-arrow-left"></i> large</button>
+          <button class="btn btn-primary"><i class="icon icon-arrow-left"></i> normal</button>
+          <button class="btn btn-primary btn-sm"><i class="icon icon-arrow-left"></i> small</button>
+
+    p
+      | Please note that you could use the #[code btn-action] class for a square button, or add another #[code s-circle] class for a round button, which is often used as a Float Action Button (FAB).
+
+    .docs-demo.columns
+      .column.col-xs-12
+        button.btn.btn-action.btn-primary.btn-lg
+          i.icon.icon-menu
+        button.btn.btn-action.btn-primary
+          i.icon.icon-menu
+        button.btn.btn-action.btn-primary.btn-sm
+          i.icon.icon-menu
+      .column.col-xs-12
+        button.btn.btn-action.btn-primary.btn-lg.s-circle
+          i.icon.icon-arrow-up
+        button.btn.btn-action.btn-primary.s-circle
+          i.icon.icon-arrow-up
+        button.btn.btn-action.btn-primary.btn-sm.s-circle
+          i.icon.icon-arrow-up
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <button class="btn btn-action"><i class="icon icon-arrow-left"></i></button>
+          <button class="btn btn-action s-circle"><i class="icon icon-arrow-left"></i></button>
+
+    +docs-subheading('buttons-states', 'Button states')
+
+    p
+      | Add the #[code active] class for active button state style.
+
+    .docs-demo.columns
+      .column.col-12
+        button.btn.active default active
+        button.btn.btn-primary.active primary active
+        button.btn.btn-link.active link active
+
+    p
+      | Add the #[code disabled] class or the #[code disabled] attribute for disabled button state style.
+
+    .docs-demo.columns
+      .column.col-12
+        button.btn.disabled(tabindex="-1") default disabled
+        button.btn.btn-primary(disabled="" tabindex="-1") primary disabled
+        button.btn.btn-link(disabled="" tabindex="-1") link disabled
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <!-- buttons with disabled state -->
+          <button class="btn disabled" tabindex="-1">disabled button</button>
+          <button class="btn" disabled tabindex="-1">disabled button</button>
+
+    p
+      | A button with the #[code loading] class can show loading indicator.
+
+    .docs-demo.columns
+      .column.col-12
+        button.btn.loading default button
+        button.btn.btn-primary.loading primary button
+        button.btn.btn-link.loading link button
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <!-- buttons with loading state -->
+          <button class="btn loading">button</button>
+          <button class="btn btn-primary loading">primary button</button>
+
+    +docs-subheading('buttons-groups', 'Button groups')
+
+    .docs-demo.columns
+      .column.col-6.col-md-12
+        .btn-group
+          button.btn first button
+          button.btn second button
+          button.btn third button
+      .column.col-6.col-md-12
+        .btn-group.btn-group-block
+          button.btn.btn-primary first button
+          button.btn.btn-primary second button
+          button.btn.btn-primary third button
+      .column.col-6.col-md-12
+        .btn-group
+          button.btn.btn-sm.active first button
+          button.btn.btn-sm second button
+          button.btn.btn-sm third button
+      .column.col-6.col-md-12
+        .btn-group.btn-group-block
+          button.btn.btn-primary.btn-sm.active first button
+          button.btn.btn-primary.btn-sm second button
+          button.btn.btn-primary.btn-sm third button
+        
+    p
+      | If you want to use buttons as a group, add the #[code btn-group] class to the container.
+      | You can add the #[code btn-group-block] class for a full-width button group.
+
+    pre.code(data-lang='HTML')
+      code
+        :highlight(lang="html")
+          <div class="btn-group btn-group-block">
+            <button class="btn">first button</button>
+            <button class="btn">second button</button>
+            <button class="btn">third button</button>
+          </div> 
+
+    include ../_layout/_ad-c.pug
+
+  include ../_layout/_footer.pug
\ No newline at end of file
-- 
cgit v1.3.1-23-gd82d