Skip to content

Instantly share code, notes, and snippets.

@mundry

mundry/index.html

Last active December 31, 2015 08:29
Show Gist options
  • Save mundry/7960722 to your computer and use it in GitHub Desktop.
Save mundry/7960722 to your computer and use it in GitHub Desktop.
Download ZIP
Pagination
Raw
index.html
<!DOCTYPE html>
<html class="no-js">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Pagination</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css" type="text/css">
<style>
body {
font-family: sans-serif;
}
</style>
</head>
<body>
<div class="pagination">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">7</a>
<a href="#">8</a>
<a href="#">9</a>
<a href="#">10</a>
</div>
</body>
</html>
Raw
style.css
.pagination {
*zoom: 1;
}
.pagination a {
background-color: white;
background-repeat: repeat-x;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f1f1f1), to(white));
background-image: -webkit-linear-gradient(top, white, #f1f1f1);
background-image: -moz-linear-gradient(top, white, #f1f1f1);
background-image: -ms-linear-gradient(top, white, #f1f1f1);
background-image: -o-linear-gradient(top, white, #f1f1f1);
background-image: linear-gradient(to bottom, white, #f1f1f1);
width: .85em;
float: left;
padding: 6px 10px 5px;
border-top: 1px solid #FAFAFA;
border-bottom: 1px solid #DADADA;
border-left: 1px solid rgba(255, 255, 255, 0.702);
border-right: 1px solid rgba(0, 0, 0, 0.039);
color: #777777;
font-size: .7em;
text-align: center;
text-decoration: none;
text-shadow: 0 1px 0 #FFFFFF;
}
.pagination a:hover {
border-bottom: 1px solid #FFAA00;
}
.pagination:before, .pagination:after {
content: " ";
display: table;
}
.pagination:after {
clear: both;
}
Raw
style.scss
// A linear gradient from top to bottom.
@mixin tb-linear-gradient($top-color, $bottom-color, $fallback-color: $top-color) {
background-color: $fallback-color; // fallback
background-repeat: repeat-x;
background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from($bottom-color), to($top-color)); // Safari 4-5, Chrome 1-9
background-image: -webkit-linear-gradient(top, $top-color, $bottom-color); // Safari 5.1, Chrome 10+
background-image: -moz-linear-gradient(top, $top-color, $bottom-color); // Firefox 3.6+
background-image: -ms-linear-gradient(top, $top-color, $bottom-color); // IE 10
background-image: -o-linear-gradient(top, $top-color, $bottom-color); // Opera 11.10+
background-image: linear-gradient(to bottom, $top-color, $bottom-color); // Chrome 26, Firefox 16+, IE 10+, Opera 12.10+
}
.pagination {
a {
@include tb-linear-gradient(#FFFFFF, #F1F1F1);
width: .85em;
float: left;
padding: 6px 10px 5px;
border-top: 1px solid #FAFAFA;
border-bottom: 1px solid #DADADA;
border-left: 1px solid rgba(255, 255, 255, 0.702);
border-right: 1px solid rgba(0, 0, 0, 0.039);
color: #777777;
font-size: .7em;
text-align: center;
text-decoration: none;
text-shadow: 0 1px 0 #FFFFFF;
&:hover {
border-bottom: 1px solid #FFAA00;
}
}
*zoom: 1;
&:before,
&:after {
content: " ";
display: table;
}
&:after {
clear: both;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment