Merge pull request #522 from picturepan2/0.5.5 v0.5.5

0.5.5

1 files changed, 194 insertions, 0 deletions

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