@import "colors"; | |
/* | |
<div id="pagination"> | |
<a rel="prev"><span><i class="fa fa-caret-left"></i></span></a> | |
<a rel="self"><span>1</span></a> | |
<a href="/?ql=poliqarp&q=test&action=ok&p=2"><span>2</span></a> | |
<a href="/?ql=poliqarp&q=test&action=ok&p=3"><span>3</span></a> | |
<span><i class="fa fa-ellipsis-h"></i></span> | |
<a href="/?ql=poliqarp&q=test&action=ok&p=67"><span>67</span></a> | |
<a rel="next" href="/?ql=poliqarp&q=test&action=ok&p=2"><span><i class="fa fa-caret-right"></i></span></a> | |
</div> | |
*/ | |
#pagination { | |
position: fixed; | |
right: 20px; | |
bottom: 10px; | |
z-index: 400; | |
span { | |
display: inline-block; | |
background-color: $pagination-bg; | |
height: 1.5em; | |
line-height: 1.5em; | |
padding: { | |
left: .4em; | |
right: .4em; | |
} | |
text-align: center; | |
border: { | |
top-width: 2px; | |
top-style: solid; | |
bottom-width: 2px; | |
bottom-style: solid; | |
color: $pagination-border; | |
} | |
box-shadow: $pagination-box-shadow; | |
} | |
a { | |
text-shadow: $light-shadow; | |
&[rel=self] span { | |
border: { | |
color: $dark-orange; | |
left-style: solid; | |
right-style: solid; | |
left-width: 2px; | |
right-width: 2px; | |
} | |
background-color: $light-orange; | |
color: $darkest-orange; | |
} | |
&[rel=next] span { | |
border: { | |
right-width: 2px; | |
right-style: solid; | |
top-right-radius: 12px; | |
bottom-right-radius: 12px; | |
} | |
} | |
&[rel=prev] span { | |
border: { | |
left-width: 2px; | |
left-style: solid; | |
top-left-radius: 12px; | |
bottom-left-radius: 12px; | |
} | |
} | |
&[href] { | |
color: $light-green; | |
span:hover { | |
background-color: $light-green; | |
border-color: $dark-green; | |
color: $dark-green; | |
text-shadow: none; | |
} | |
} | |
} | |
} |