diff --git a/docs/components/pagination.md b/docs/components/pagination.md index c16f97cb6c981ec7c1d34072a15bc14042346aba..dacc653f7a1bd84841d8d72bc4e9bdd416600a79 100644 --- a/docs/components/pagination.md +++ b/docs/components/pagination.md @@ -63,7 +63,7 @@ Links are customizable for different circumstances. Use `.disabled` for unclicka </nav> {% endexample %} -You can optionally swap out active or disabled anchors for `<span>`, or omit the anchor in the case of the previous/next arrows, to remove click functionality while retaining intended styles. +You can optionally swap out active or disabled anchors for `<span>`, or omit the anchor in the case of the prev/next arrows, to remove click functionality while retaining intended styles. {% highlight html %} <nav> @@ -152,8 +152,8 @@ Alternatively, you can align each link to the sides: {% example html %} <nav> <ul class="pager"> - <li class="previous"><a href="#">Older</a></li> - <li class="next"><a href="#">Newer</a></li> + <li class="pager-prev"><a href="#">Older</a></li> + <li class="pager-next"><a href="#">Newer</a></li> </ul> </nav> {% endexample %} @@ -166,8 +166,8 @@ Pager links also use the `.disabled` class. {% highlight html %} <nav> <ul class="pager"> - <li class="previous disabled"><a href="#">Older</a></li> - <li class="next"><a href="#">Newer</a></li> + <li class="pager-prev disabled"><a href="#">Older</a></li> + <li class="pager-next"><a href="#">Newer</a></li> </ul> </nav> {% endhighlight %} diff --git a/scss/_pager.scss b/scss/_pager.scss index 9ae139ce72e19b19d8854b86fe0c8c643caad4db..4009c0946e1426f55bb859776e9ea191aa30a9eb 100644 --- a/scss/_pager.scss +++ b/scss/_pager.scss @@ -29,20 +29,6 @@ } } - .next { - > a, - > span { - float: right; - } - } - - .previous { - > a, - > span { - float: left; - } - } - .disabled { > a, > a:hover, @@ -54,3 +40,17 @@ } } } + +.pager-next { + > a, + > span { + float: right; + } +} + +.pager-prev { + > a, + > span { + float: left; + } +}