@ustack/uskin
Version:
A graceful framework which provides developers another chance to build an amazing site.
81 lines (75 loc) • 2.08 kB
text/less
@pagination_item_color: @color_grey_700;
@pagination_item_hover_color: @color_info;
@pagination_item_active_color: @color_info_600;
@pagination_item_selected_color: @color_info;
@pagination_next_color: @color_grey_700;
@pagination_next_hover_color: #fff;
@pagination_next_hover_bg_color: @color_info;
@pagination_next_disabled_color: @color_disabled_700;
@pagination_next_disabled_bg_color: @color_disabled_400;
.pagination {
display: inline-block;
> li {
display: inline;
a {
float: left;
display: block;
padding: 0;
width: 22px;
height: 22px;
line-height: 22px;
text-align: center;
border-radius: 2px;
border: 1px solid;
margin: 0 4px;
user-select: none;
cursor: pointer;
}
.item {
color: @pagination_item_color;
&:hover {
color: @pagination_item_hover_color;
}
&:active {
color: @pagination_item_active_color;
}
&.active {
color: white;
background-color: @pagination_item_selected_color;
border-color: @pagination_item_selected_color;
cursor: default;
}
}
.omit {
color: @pagination_item_color;
cursor: default;
border: 0;
height: 24px;
line-height: 24px;
}
.first,
.prev,
.next,
.last {
background-color: @pagination_next_hover_color;
color: @pagination_next_color;
border: 1px solid @pagination_next_color;
&:hover {
color: @pagination_next_hover_color;
border-color: @pagination_next_hover_bg_color;
background-color: @pagination_next_hover_bg_color;
}
&.disabled, &.disabled:hover {
cursor: not-allowed ;
color: @pagination_next_disabled_color ;
border-color: @pagination_next_disabled_color ;
background-color: @pagination_next_disabled_bg_color ;
}
}
.prev,
.next {
color: @pagination_next_hover_bg_color;
border-color: @pagination_next_hover_bg_color;
}
}
}