diff options
Diffstat (limited to 'shared/style/buttons')
| -rw-r--r-- | shared/style/buttons/images/icons/dialog.png | bin | 0 -> 1167 bytes | |||
| -rw-r--r-- | shared/style/buttons/images/icons/view.png | bin | 0 -> 1235 bytes | |||
| -rw-r--r-- | shared/style/buttons/images/ui/danger-disabled.png | bin | 0 -> 1020 bytes | |||
| -rw-r--r-- | shared/style/buttons/images/ui/danger-press.png | bin | 0 -> 1015 bytes | |||
| -rw-r--r-- | shared/style/buttons/images/ui/danger.png | bin | 0 -> 1031 bytes | |||
| -rw-r--r-- | shared/style/buttons/images/ui/default.png | bin | 0 -> 1014 bytes | |||
| -rw-r--r-- | shared/style/buttons/images/ui/disabled.png | bin | 0 -> 1013 bytes | |||
| -rw-r--r-- | shared/style/buttons/images/ui/recommend.png | bin | 0 -> 1020 bytes | |||
| -rw-r--r-- | shared/style/buttons/images/ui/shadow.png | bin | 0 -> 146 bytes | |||
| -rw-r--r-- | shared/style/buttons/index.html | 126 |
10 files changed, 126 insertions, 0 deletions
diff --git a/shared/style/buttons/images/icons/dialog.png b/shared/style/buttons/images/icons/dialog.png Binary files differnew file mode 100644 index 0000000..6cda241 --- /dev/null +++ b/shared/style/buttons/images/icons/dialog.png diff --git a/shared/style/buttons/images/icons/view.png b/shared/style/buttons/images/icons/view.png Binary files differnew file mode 100644 index 0000000..de62f59 --- /dev/null +++ b/shared/style/buttons/images/icons/view.png diff --git a/shared/style/buttons/images/ui/danger-disabled.png b/shared/style/buttons/images/ui/danger-disabled.png Binary files differnew file mode 100644 index 0000000..2a14bfb --- /dev/null +++ b/shared/style/buttons/images/ui/danger-disabled.png diff --git a/shared/style/buttons/images/ui/danger-press.png b/shared/style/buttons/images/ui/danger-press.png Binary files differnew file mode 100644 index 0000000..d7529b5 --- /dev/null +++ b/shared/style/buttons/images/ui/danger-press.png diff --git a/shared/style/buttons/images/ui/danger.png b/shared/style/buttons/images/ui/danger.png Binary files differnew file mode 100644 index 0000000..400e3ae --- /dev/null +++ b/shared/style/buttons/images/ui/danger.png diff --git a/shared/style/buttons/images/ui/default.png b/shared/style/buttons/images/ui/default.png Binary files differnew file mode 100644 index 0000000..2ff298a --- /dev/null +++ b/shared/style/buttons/images/ui/default.png diff --git a/shared/style/buttons/images/ui/disabled.png b/shared/style/buttons/images/ui/disabled.png Binary files differnew file mode 100644 index 0000000..2e97135 --- /dev/null +++ b/shared/style/buttons/images/ui/disabled.png diff --git a/shared/style/buttons/images/ui/recommend.png b/shared/style/buttons/images/ui/recommend.png Binary files differnew file mode 100644 index 0000000..42aed39 --- /dev/null +++ b/shared/style/buttons/images/ui/recommend.png diff --git a/shared/style/buttons/images/ui/shadow.png b/shared/style/buttons/images/ui/shadow.png Binary files differnew file mode 100644 index 0000000..acc799f --- /dev/null +++ b/shared/style/buttons/images/ui/shadow.png diff --git a/shared/style/buttons/index.html b/shared/style/buttons/index.html new file mode 100644 index 0000000..c97cbd6 --- /dev/null +++ b/shared/style/buttons/index.html @@ -0,0 +1,126 @@ +<!DOCTYPE html> +<html> +<head> + <meta charset="utf-8"> + + <title>Buttons</title> + <meta name="description" content="You can use button tag or also anchor tag with role button"> + + <link rel="stylesheet" href="../buttons.css"> + + <!-- + - This <style> and <link> is only used for the example preview, + - it isn't needed for the real use case. + --> + <style> + html, body { + margin: 0; + padding: 0; + font-size: 10px; + background-color: #fff; + } + + h2.bb-docs { + font-size: 1.8rem; + font-family: "MozTT", Sans-serif; + font-weight: lighter; + color: #666; + margin: -0.1rem 0 0; + background-color: #f5f5f5; + padding: 0.4rem 0.4rem 0.4rem 3rem; + border: solid 0.1rem #e8e8e8; + } + + div.bb-docs { + padding: 1rem; + } + + div.bb-docs.dark { + background: #000; + } + + ul { + padding: 0; + margin: 0; + list-style: none; + } + + body[role="application"] > [role="region"] { + height: 100%; + position: relative; + } + </style> +</head> +<body role="application"> + <h2 class="bb-docs">Normal</h2> + <div class="bb-docs"> + <button>Default</button> + <button class="recommend">Recommend</button> + <button class="danger">Danger</button> + </div> + + <h2 class="bb-docs">Disabled</h2> + <div class="bb-docs"> + <button disabled>Default</button> + <a href="#" role="button" aria-disabled="true" class="recommend">Recommend</a> + <button disabled class="danger">Danger</button> + </div> + + <h2 class="bb-docs">Disabled with dark background</h2> + <div class="bb-docs dark"> + <button disabled>Default</button> + <a href="#" role="button" aria-disabled="true" class="recommend">Recommend</a> + <button disabled class="danger">Danger</button> + </div> + + <h2 class="bb-docs">Button List </h2> + <div class="bb-docs"> + <ul> + <li> + <button>Default</button> + </li> + <li> + <button disabled="disabled">Disabled</button> + </li> + <li> + <button class="icon icon-view"> + View Name + </button> + </li> + <li> + <button disabled="disabled" class="icon icon-view"> + View Name + </button> + </li> + <li> + <a role="button" class="icon icon-dialog"> + Tuesday September 18, 2012 + </a> + </li> + <li> + <a role="button" aria-disabled="true" class="icon icon-dialog"> + Tuesday September 18, 2012 + </a> + </li> + </ul> + </div> + + <h2 class="bb-docs">Button list (compact mode)</h2> + <div class="bb-docs"> + <ul class="compact"> + <li><button>Action 1</button></li> + <li><button>Action 2</button></li> + <li><button disabled >Action 3 (disabled)</button></li> + <li><button>Action 4</button></li> + <li><button>Action 5</button></li> + <li> + <button> + <span class="end tick"></span> + Action 6 + </button> + </li> + </ul> + </div> +</body> +</html> + |
