vui-design/src/style/components/pagination.less

A high quality UI Toolkit based on Vue.js

@vui-pagination: ~"@{vui}-pagination";

.@{vui-pagination} {
	display:block;
	box-sizing:border-box;
	margin:0;
	padding:0;
	font-size:@pagination-font-size;
	line-height:1;
	list-style:none;

	&-align-left {
		text-align:left;
	}
	&-align-center {
		text-align:center;
	}
	&-align-right {
		text-align:right;
	}

	&-total {
		display:inline-block;
		box-sizing:border-box;
		height:@pagination-item-size;
		margin:0 @pagination-item-margin * 2 0 0;
		padding:0;
		vertical-align:middle;
		line-height:@pagination-item-size;
	}

	&-button {
		position:relative;
		cursor:pointer;
		display:inline-block;
		box-sizing:border-box;
		min-width:@pagination-item-size;
		height:@pagination-item-size;
		border:1px solid @pagination-item-border-color;
		border-radius:@pagination-item-border-radius;
		background-color:@pagination-item-background-color;
		margin:0;
		padding:@pagination-item-padding;
		vertical-align:middle;
		color:@pagination-font-color;
		text-align:center;
		line-height:@pagination-item-size - 2px;
		user-select:none;
		transition:all @transition-duration @transition-timing-function;

		&-prev {
			margin-right:@pagination-item-margin / 2;
		}
		&-next {
			margin-left:@pagination-item-margin / 2;
		}

		&:hover {
			border-color:@pagination-item-hover-border-color;
			color:@pagination-item-hover-font-color;
		}
		&:focus {
			border-color:@pagination-item-hover-border-color;
			color:@pagination-item-hover-font-color;
		}
		&:active {
			border-color:@pagination-item-active-border-color;
			color:@pagination-item-active-font-color;
		}
		&&-disabled {
			cursor:not-allowed;
			border-color:@pagination-item-disabled-border-color;
			color:@pagination-item-disabled-font-color;
		}

		&-arrow {
			position:absolute;
			top:50%;
			left:50%;
			display:block;
			width:10px;
			height:10px;
			fill:currentColor;
			transform:translate(-50%, -50%);
		}
	}

	&-item {
		position:relative;
		cursor:pointer;
		display:inline-block;
		box-sizing:border-box;
		min-width:@pagination-item-size;
		height:@pagination-item-size;
		border:1px solid @pagination-item-border-color;
		border-radius:@pagination-item-border-radius;
		background-color:@pagination-item-background-color;
		margin:0 @pagination-item-margin / 2;
		padding:@pagination-item-padding;
		vertical-align:middle;
		color:@pagination-font-color;
		text-align:center;
		line-height:@pagination-item-size - 2px;
		user-select:none;
		transition:all @transition-duration @transition-timing-function;

		&:hover {
			border-color:@pagination-item-hover-border-color;
			color:@pagination-item-hover-font-color;
		}
		&:focus {
			border-color:@pagination-item-hover-border-color;
			color:@pagination-item-hover-font-color;
		}
		&:active,
		&&-active {
			border-color:@pagination-item-active-border-color;
			color:@pagination-item-active-font-color;
		}
	}

	&-ellipsis {
		position:relative;
		cursor:pointer;
		display:inline-block;
		box-sizing:border-box;
		min-width:@pagination-item-size;
		height:@pagination-item-size;
		border:1px solid transparent;
		border-radius:@pagination-item-border-radius;
		background-color:transparent;
		margin:0 @pagination-item-margin / 2;
		padding:@pagination-item-padding;
		vertical-align:middle;
		color:@pagination-font-color;
		text-align:center;
		line-height:@pagination-item-size - 2px;
		user-select:none;
		transition:all @transition-duration @transition-timing-function;

		& &-arrow {
			position:absolute;
			top:50%;
			left:50%;
			display:block;
			width:10px;
			height:10px;
			fill:currentColor;
			opacity:0;
			transform:translate(-50%, -50%);
			transition:opacity @transition-duration @transition-timing-function;
		}
		& &-icon {
			position:absolute;
			top:50%;
			left:50%;
			display:block;
			opacity:0.45;
			transform:translate(-50%, -50%);
			transition:opacity @transition-duration @transition-timing-function;
		}

		&:hover {
			color:@pagination-item-hover-font-color;
		}
		&:hover &-arrow {
			opacity:1;
		}
		&:hover &-icon {
			opacity:0;
		}
		&:focus {
			color:@pagination-item-hover-font-color;
		}
		&:focus &-arrow {
			opacity:1;
		}
		&:focus &-icon {
			opacity:0;
		}
		&:active {
			color:@pagination-item-active-font-color;
		}
		&:active &-arrow {
			opacity:1;
		}
		&:active &-icon {
			opacity:0;
		}
	}

	&-sizer {
		display:inline-block;
		box-sizing:border-box;
		height:@pagination-item-size;
		margin:0 0 0 @pagination-item-margin * 2;
		padding:0;
		vertical-align:middle;
	}

	&-elevator {
		display:inline-block;
		box-sizing:border-box;
		height:@pagination-item-size;
		margin:0 0 0 @pagination-item-margin * 2;
		padding:0;
		vertical-align:middle;
		line-height:@pagination-item-size;

		& span {
			float:left;
			display:block;
		}

		& .@{vui}-input {
			float:left;
			display:block;
			width:50px;
			margin:0 @pagination-item-margin;
		}
		& .@{vui}-input .@{vui}-input-input input {
			text-align:center;
		}
	}

	&-small {
		height:@pagination-item-size-sm;
	}
	&-small &-total {
		height:@pagination-item-size-sm;
		margin-right:@pagination-item-margin;
		line-height:@pagination-item-size-sm;
	}
	&-small &-button {
		min-width:@pagination-item-size-sm;
		height:@pagination-item-size-sm;
		border-width:0;
		background-color:transparent;
		padding:@pagination-item-padding-sm;
		line-height:@pagination-item-size-sm;
	}
	&-small &-button-prev {
		margin-right:0;
	}
	&-small &-button-next {
		margin-left:0;
	}
	&-small &-item {
		min-width:@pagination-item-size-sm;
		height:@pagination-item-size-sm;
		border-width:0;
		background-color:transparent;
		margin:0;
		padding:@pagination-item-padding-sm;
		line-height:@pagination-item-size-sm;
	}
	&-small &-ellipsis {
		min-width:@pagination-item-size-sm;
		height:@pagination-item-size-sm;
		border-width:0;
		background-color:transparent;
		margin:0;
		padding:@pagination-item-padding-sm;
		line-height:@pagination-item-size-sm;
	}
	&-small &-sizer {
		height:@pagination-item-size-sm;
		margin-left:@pagination-item-margin;
	}
	&-small &-elevator {
		height:@pagination-item-size-sm;
		margin-left:@pagination-item-margin;
		line-height:@pagination-item-size-sm;
	}
	&-small &-elevator .vui-input {
		width:40px;
		margin:0 6px;
	}

	&-simple {
		height:@pagination-item-size-sm;
	}
	&-simple &-button {
		min-width:@pagination-item-size-sm;
		height:@pagination-item-size-sm;
		border-width:0;
		background-color:transparent;
		padding:@pagination-item-padding-sm;
		line-height:@pagination-item-size-sm;
	}
	&-simple &-button-prev {
		margin-right:@pagination-item-margin;
	}
	&-simple &-button-next {
		margin-left:@pagination-item-margin;
	}
	&-simple &-elevator {
		height:@pagination-item-size-sm;
		margin:0;
		line-height:@pagination-item-size-sm;
	}
	&-simple &-elevator span {
		margin-left:6px;
	}
	&-simple &-elevator .vui-input {
		width:40px;
		margin:0;
	}
}