Skip to content
Browse files

Added download and fork buttons to example

  • Loading branch information...
1 parent 08f1c48 commit 98c2cb7236d1e84489e18e7263f25fa9e183488d @beneverard committed Aug 31, 2011
Showing with 141 additions and 2 deletions.
  1. +69 −1 demo/css/demo.css
  2. +71 −1 demo/css/demo.less
  3. +1 −0 index.html
View
70 demo/css/demo.css
@@ -128,7 +128,7 @@ pre {
width: 100%;
}
#footer-wrapper {
- font-size: 14px;
+ font-size: 16px;
width: 900px;
padding: 20px 20px 30px 20px;
margin: 0 auto;
@@ -154,3 +154,71 @@ header h2 {
width: 900px;
margin: 0 auto;
}
+/* button
+---------------------------------------------- */
+.button {
+ display: inline-block;
+ zoom: 1;
+ /* zoom and *display = ie7 hack for display:inline-block */
+
+ *display: inline;
+ vertical-align: baseline;
+ margin: 0 2px;
+ outline: none;
+ cursor: pointer;
+ text-align: center;
+ text-decoration: none;
+ font: 14px/100% Arial, Helvetica, sans-serif;
+ padding: .5em 2em .55em;
+ text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
+ -webkit-border-radius: .4em;
+ -moz-border-radius: .4em;
+ border-radius: .4em;
+ -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+ -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
+}
+.button:hover {
+ text-decoration: none;
+}
+.button:active {
+ position: relative;
+ top: 1px;
+}
+.bigrounded {
+ -webkit-border-radius: 2em;
+ -moz-border-radius: 2em;
+ border-radius: 2em;
+}
+.large {
+ font-size: 18px;
+ font-weight: bold;
+}
+.medium {
+ font-size: 12px;
+ padding: .4em 1.5em .42em;
+}
+.small {
+ font-size: 11px;
+ padding: .2em 1em .275em;
+}
+/* color styles
+---------------------------------------------- */
+/* blue */
+.blue {
+ color: #FFF;
+ border: solid 1px #0076a3;
+ background: #0095cd;
+ background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
+ background: -moz-linear-gradient(top, #00adee, #0078a5);
+}
+.blue:hover {
+ background: #007ead;
+ background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
+ background: -moz-linear-gradient(top, #0095cc, #00678e);
+}
+.blue:active {
+ color: #80bed6;
+ background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
+ background: -moz-linear-gradient(top, #0078a5, #00adee);
+}
View
72 demo/css/demo.less
@@ -140,7 +140,7 @@ pre {
}
#footer-wrapper {
- font-size: 14px;
+ font-size: 16px;
width: 900px;
padding: 20px 20px 30px 20px;
margin: 0 auto;
@@ -167,4 +167,74 @@ header {
padding: 20px;
width: 900px;
margin: 0 auto;
+}
+
+/* button
+---------------------------------------------- */
+.button {
+ display: inline-block;
+ zoom: 1; /* zoom and *display = ie7 hack for display:inline-block */
+ *display: inline;
+ vertical-align: baseline;
+ margin: 0 2px;
+ outline: none;
+ cursor: pointer;
+ text-align: center;
+ text-decoration: none;
+ font: 14px/100% Arial, Helvetica, sans-serif;
+ padding: .5em 2em .55em;
+ text-shadow: 0 1px 1px rgba(0,0,0,.3);
+ -webkit-border-radius: .4em;
+ -moz-border-radius: .4em;
+ border-radius: .4em;
+ -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.2);
+ -moz-box-shadow: 0 1px 2px rgba(0,0,0,.2);
+ box-shadow: 0 1px 2px rgba(0,0,0,.2);
+}
+.button:hover {
+ text-decoration: none;
+}
+.button:active {
+ position: relative;
+ top: 1px;
+}
+
+.bigrounded {
+ -webkit-border-radius: 2em;
+ -moz-border-radius: 2em;
+ border-radius: 2em;
+}
+.large {
+ font-size: 18px;
+ font-weight: bold;
+}
+.medium {
+ font-size: 12px;
+ padding: .4em 1.5em .42em;
+}
+.small {
+ font-size: 11px;
+ padding: .2em 1em .275em;
+}
+
+/* color styles
+---------------------------------------------- */
+
+/* blue */
+.blue {
+ color: #FFF;
+ border: solid 1px #0076a3;
+ background: #0095cd;
+ background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
+ background: -moz-linear-gradient(top, #00adee, #0078a5);
+}
+.blue:hover {
+ background: #007ead;
+ background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e));
+ background: -moz-linear-gradient(top, #0095cc, #00678e);
+}
+.blue:active {
+ color: #80bed6;
+ background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
+ background: -moz-linear-gradient(top, #0078a5, #00adee);
}
View
1 index.html
@@ -36,6 +36,7 @@
<div id="wrapper">
<h2 id="intro">Introduction</h2>
<p>jqPagination is a jQuery plugin that provides a newer method of pagination for your web site or application. Instead of displaying a list of page numbers like traditional pagination methods jqPagination uses an interactive 'Page 1 of 5' input that, when selected, allows the user to enter their desired page number. The plugin will ensure that only valid pages can be selected, a valid request will result in the paged callback. First, previous, next and last buttons work out of the box, but are optional.</p>
+ <p><a href="https://github.com/beneverard/jqPagination/zipball/master" class="large blue button">Download</a> <a href="https://github.com/beneverard/jqPagination/" class="large blue button">Fork on GitHub</a></p>
<p>Here are a few key points:</p>
<ul>
<li>Design agnostic</li>

0 comments on commit 98c2cb7

Please sign in to comment.
Something went wrong with that request. Please try again.