diff options
1 files changed, 0 insertions, 178 deletions
| -rw-r--r-- | docs/src/contents/buttons.pug | 178 |
diff --git a/docs/src/contents/buttons.pug b/docs/src/contents/buttons.pug deleted file mode 100644 index 3fbf5da..0000000 --- a/docs/src/contents/buttons.pug +++ /dev/null @@ -1,178 +0,0 @@ -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 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.circle - i.icon.icon-arrow-up - button.btn.btn-action.btn-primary.circle - i.icon.icon-arrow-up - button.btn.btn-action.btn-primary.btn-sm.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 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>
\ No newline at end of file |