elemental/less/components/Pagination.less

React UI Framework

// 
// Pagination
// ==============================




// Base
// ------------------------------

.Pagination {
	color: @gray-light;
	display: block;
	font-size: @font-size-base;
	line-height: floor((@font-size-base * 2.2) + 2);
	margin-bottom: 2em;
}




// Count
// ------------------------------

.Pagination__count {
	display: inline-block;
	margin-right: 1em;
	vertical-align: middle;
}




// List
// ------------------------------

.Pagination__list {
	display: inline-block;
	vertical-align: middle;
}




// Item
// ------------------------------

.Pagination__list__item {
	background: none;
	border: 1px solid transparent;
	border-radius: 3px;
	color: @pagination-color;
	cursor: pointer;
	display: inline-block;
	float: left; // Collapse white-space
	margin-right: .25em;
	padding: 0 .7em;
	position: relative;
	text-decoration: none;
	-webkit-appearance: none;

	
	// handle hover and focus

	&:hover,
	&:focus {
		background-color: @pagination-hover-bg;
		border-color: @pagination-hover-border;
		color: @pagination-hover-color;
		outline: none;
	}

	
	// selected page

	&.is-selected {
		&,
		&:hover,
		&:focus {
			background-color: @pagination-active-bg;
			border-color: @pagination-active-border;
			color: @pagination-active-color;
			cursor: default;
			z-index: 2;
		}
	}
	
	
	// disabled page

	&[disabled],
	&.is-disabled {
		background-color: @pagination-disabled-bg;
		border-color: @pagination-disabled-bg;
		color: @pagination-disabled-color;
		cursor: default;
	}
}