added buttons page

This commit is contained in:
Kevin Ross 2015-12-15 19:31:21 -06:00
parent e3e21db4f4
commit 4f243cd3e6
5 changed files with 163 additions and 11 deletions

View File

@ -26,6 +26,7 @@
- title: Material Design
pages:
- title: Test
- title: Buttons
- title: Forms
- title: Labels
- title: Selections

View File

@ -13,6 +13,10 @@
{% endif %}
</title>
<!-- Material Design fonts -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<!-- Material Design for Bootstrap CSS (includes a compiled/customized version of Bootstrap) -->
<!--<link href="{{ site.baseurl }}/dist/css/bootstrap-material-design.min.css" rel="stylesheet">-->

View File

@ -0,0 +1,148 @@
---
layout: docs
title: Buttons
group: material-design
---
## Contents
* Will be replaced with the ToC, excluding the "Contents" header
{:toc}
## Flat
{% example html %}
<button type="button" class="btn"><code>btn</code> only</button>
<button type="button" class="btn active"><code>.active</code></button>
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>
{% endexample %}
### Disabled
{% example html %}
<fieldset disabled>
<button type="button" class="btn"><code>btn</code> only</button>
<button type="button" class="btn btn-default">Default</button>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-link">Link</button>
</fieldset>
{% endexample %}
## Raised
{% example html %}
<button type="button" class="btn btn-raised active"><code>.active</code></button>
<button type="button" class="btn btn-raised btn-default">Default</button>
<button type="button" class="btn btn-raised btn-primary">Primary</button>
<button type="button" class="btn btn-raised btn-success">Success</button>
<button type="button" class="btn btn-raised btn-info">Info</button>
<button type="button" class="btn btn-raised btn-warning">Warning</button>
<button type="button" class="btn btn-raised btn-danger">Danger</button>
<button type="button" class="btn btn-raised btn-link">Link</button>
{% endexample %}
### Disabled
{% example html %}
<fieldset disabled>
<button type="button" class="btn btn-raised btn-default">Default</button>
<button type="button" class="btn btn-raised btn-primary">Primary</button>
<button type="button" class="btn btn-raised btn-success">Success</button>
<button type="button" class="btn btn-raised btn-info">Info</button>
<button type="button" class="btn btn-raised btn-warning">Warning</button>
<button type="button" class="btn btn-raised btn-danger">Danger</button>
<button type="button" class="btn btn-raised btn-link">Link</button>
</fieldset>
{% endexample %}
## Floating Action
{% example html %}
<button type="button" class="btn btn-default btn-fab">
<i class="material-icons">grade</i>
</button>
<button type="button" class="btn btn-primary btn-fab">
<i class="material-icons">grade</i>
</button>
<button type="button" class="btn btn-success btn-fab">
<i class="material-icons">grade</i>
</button>
<button type="button" class="btn btn-info btn-fab">
<i class="material-icons">grade</i>
</button>
<button type="button" class="btn btn-warning btn-fab">
<i class="material-icons">grade</i>
</button>
<button type="button" class="btn btn-danger btn-fab">
<i class="material-icons">grade</i>
</button>
{% endexample %}
### Disabled
{% example html %}
<fieldset disabled>
<button type="button" class="btn btn-default btn-fab">
<i class="material-icons">grade</i>
</button>
<button type="button" class="btn btn-primary btn-fab">
<i class="material-icons">grade</i>
</button>
<button type="button" class="btn btn-success btn-fab">
<i class="material-icons">grade</i>
</button>
<button type="button" class="btn btn-info btn-fab">
<i class="material-icons">grade</i>
</button>
<button type="button" class="btn btn-warning btn-fab">
<i class="material-icons">grade</i>
</button>
<button type="button" class="btn btn-danger btn-fab">
<i class="material-icons">grade</i>
</button>
</fieldset>
{% endexample %}
### Mini
{% example html %}
<fieldset class="btn-group-sm">
<button type="button" class="btn btn-default btn-fab">
<i class="material-icons">grade</i>
</button>
<button type="button" class="btn btn-primary btn-fab">
<i class="material-icons">grade</i>
</button>
<button type="button" class="btn btn-success btn-fab">
<i class="material-icons">grade</i>
</button>
<button type="button" class="btn btn-info btn-fab">
<i class="material-icons">grade</i>
</button>
<button type="button" class="btn btn-warning btn-fab">
<i class="material-icons">grade</i>
</button>
<button type="button" class="btn btn-danger btn-fab">
<i class="material-icons">grade</i>
</button>
</fieldset>
{% endexample %}
## Sizes
{% example html %}
<button type="button" class="btn btn-raised btn-lg">Large button</button>
<button type="button" class="btn btn-raised">Default button</button>
<button type="button" class="btn btn-raised btn-sm">Small button</button>
{% endexample %}
## x
{% example html %}
{% endexample %}

View File

@ -62,16 +62,16 @@ const Util = (($) => {
return true
} else if (typeof event.which === 'number' && event.which > 0) {
return (
!evt.ctrlKey
&& !evt.metaKey
&& !evt.altKey
&& evt.which != 8 // backspace
&& evt.which != 9 // tab
&& evt.which != 13 // enter
&& evt.which != 16 // shift
&& evt.which != 17 // ctrl
&& evt.which != 20 // caps lock
&& evt.which != 27 // escape
!event.ctrlKey
&& !event.metaKey
&& !event.altKey
&& event.which != 8 // backspace
&& event.which != 9 // tab
&& event.which != 13 // enter
&& event.which != 16 // shift
&& event.which != 17 // ctrl
&& event.which != 20 // caps lock
&& event.which != 27 // escape
)
}
return false

View File

@ -13,7 +13,6 @@
}
// mdb default buttons are flat by default
// synchronized with mdl 11/23/15
.btn,
.input-group-btn .btn {
position: relative;