commit ea23674fb1d8457b1138596da151db2d746fc367
author Nils Diewald <nils@diewald-online.de> Thu Mar 26 21:55:36 2015 +0000
committer Nils Diewald <nils@diewald-online.de> Thu Mar 26 21:55:36 2015 +0000
tree 1d808dce2fe25e12b4fd3da3e9323b1a26361375
parent 2c8982ec41c6940aedba80d073fa241d4c671c3e

Add grunt and coherent styles

public/scss/pagination.scss

diff --git a/public/scss/pagination.scss b/public/scss/pagination.scss
new file mode 100644
index 0000000..c0cfdd1
--- /dev/null
+++ b/public/scss/pagination.scss
@@ -0,0 +1,85 @@
+@charset "utf-8";
+@import "colors";
+
+/**
+ * The pagination view
+ */
+/*
+<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&amp;q=test&amp;action=ok&amp;p=2"><span>2</span></a>
+  <a href="/?ql=poliqarp&amp;q=test&amp;action=ok&amp;p=3"><span>3</span></a>
+  <span><i class="fa fa-ellipsis-h"></i></span>
+  <a href="/?ql=poliqarp&amp;q=test&amp;action=ok&amp;p=67"><span>67</span></a>
+  <a rel="next" href="/?ql=poliqarp&amp;q=test&amp;action=ok&amp;p=2"><span><i class="fa fa-caret-right"></i></span></a>
+</div>
+*/
+#pagination {
+  /**
+   * Always in fixed position.
+   * This may need to be overwritten in case multiple
+   * paginations have to be activated.
+   */
+  position: fixed;
+  right: 20px;
+
+  bottom: 10px;
+  z-index: 400;
+
+  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 {
+      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;
+      }
+    }
+  }
+}