Major redesign of JS and Sass assets
diff --git a/public/scss/pagination.scss b/public/scss/pagination.scss
index c0cfdd1..0e099ac 100644
--- a/public/scss/pagination.scss
+++ b/public/scss/pagination.scss
@@ -1,5 +1,7 @@
@charset "utf-8";
-@import "colors";
+@import "util";
+
+$border-size : 2px;
/**
* The pagination view
@@ -8,11 +10,11 @@
<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>
+ <a href="#p=2"><span>2</span></a>
+ <a href="#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>
+ <a href="#67"><span>67</span></a>
+ <a rel="next" href="#2"><span><i class="fa fa-caret-right"></i></span></a>
</div>
*/
#pagination {
@@ -21,65 +23,92 @@
* This may need to be overwritten in case multiple
* paginations have to be activated.
*/
+ font-size: 0;
position: fixed;
right: 20px;
-
bottom: 10px;
z-index: 400;
+ padding: 0;
+ height: auto;
+ line-height: 0;
- span {
- display: inline-block;
- background-color: $pagination-bg;
- height: 1.5em;
- line-height: 1.5em;
- @include standard-text-padding;
- 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 {
+ > a {
+ margin: 0;
+ font-size: 10pt;
+ padding: 0;
+
+ > span {
+ box-shadow: $choose-box-shadow;
+ @include standard-text-padding;
+ @include choose-item;
+ display: inline-block;
+ line-height: 2em;
+ text-align: center;
border: {
- color: $dark-orange;
+ top-width: $border-size;
+ bottom-width: $border-size;
+ top-style: solid;
+ bottom-style: solid;
+ }
+ }
+
+ &:not(:link):not([rel=self]) span {
+ color: $choose-blind-color;
+ }
+
+ &.ellipsis > span {
+ > span {
+ @include blind;
+ }
+ &::after {
+ font-family: 'FontAwesome';
+ content: '\f141';
+ }
+ }
+
+ &[rel=self] > span {
+ @include choose-active;
+ border {
+ left-width: $border-size;
+ right-width: $border-size;
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 {
+
+ &[rel=prev] > span {
border: {
- left-width: 2px;
+ top-left-radius: $standard-border-radius;
+ bottom-left-radius: $standard-border-radius;
+ left-width: $border-size;
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;
}
+ > span {
+ @include blind;
+ }
+ &::after {
+ font-family: 'FontAwesome';
+ content: '\f0d9';
+ }
+ }
+
+ &[rel=next] > span {
+ border: {
+ top-right-radius: $standard-border-radius;
+ bottom-right-radius: $standard-border-radius;
+ right-width: $border-size;
+ right-style: solid;
+ }
+ > span {
+ @include blind;
+ }
+ &::after {
+ font-family: 'FontAwesome';
+ content: '\f0da';
+ }
+ }
+ &:link:hover span {
+ @include choose-hover;
}
}
-}
+}
\ No newline at end of file