added pagination support to event log
Change-Id: I18a21ba71679407bd512f1895ba91717c8ca5990
Signed-off-by: Michael Davis <michael.s.davis@ibm.com>
diff --git a/app/common/styles/elements/paginate.scss b/app/common/styles/elements/paginate.scss
new file mode 100644
index 0000000..2df88cc
--- /dev/null
+++ b/app/common/styles/elements/paginate.scss
@@ -0,0 +1,149 @@
+.pagination,
+.pagination li a {
+ display: -webkit-box;
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-wrap: wrap;
+ flex-wrap: wrap;
+ -webkit-box-pack: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+}
+
+.pagination li { background-color: transparent; list-style-type: none; }
+
+.pagination a {
+ font-weight: 300;
+ padding-top: 1px;
+ text-decoration:none;
+ border: 1px solid $medgrey;
+ border-left-width: 0;
+ min-width:44px;
+ min-height:44px;
+ color: $darkbg__primary;
+}
+
+.pagination li:not([class*="current"]) a:hover {
+ background-color: $primebtn__bg;
+ color: $white;
+}
+
+.pagination li:not([class*="current"]) a:focus,
+.pagination li:not([class*="current"]) a:active {;
+ //box-shadow: 0px 0px 10px 1px rgba(0,0,0,.25);
+ border-left-width:1px;
+}
+
+.pagination li:first-of-type a {
+ border-left-width: 1px;
+}
+
+.pagination li:first-of-type span,
+.pagination li:last-of-type span,
+.pagination li:nth-of-type(2) span,
+.pagination li:nth-last-of-type(2) span {
+ /* screen readers only */
+ position: absolute;
+ top: -9999px;
+ left: -9999px;
+}
+
+.pagination li:first-child a::before,
+.pagination li:last-child a::after,
+.pagination li:nth-of-type(2) a::before,
+.pagination li:nth-last-of-type(2) a::after {
+ display: inline-block;
+ text-rendering: auto;
+ font-size: 1.3em;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ -webkit-transform: translate(0, 0);
+ transform: translate(0, 0);
+}
+
+.pagination li:first-child a::before,
+.pagination li:last-child a::after { content: "\027A0"; }
+
+.pagination li:nth-of-type(2) a::before,
+.pagination li:nth-last-of-type(2) a::after { content: "\0279E"; }
+
+.pagination li:first-child a::before,
+.pagination li:nth-of-type(2) a::before { -webkit-transform: rotate(180deg); transform: rotate(180deg); }
+
+.pagination li.current a {
+ padding-top:.25em;
+ color: $white;
+ background-color: $lightbg__primary;
+ cursor: default;
+ pointer-events: none;
+ font-weight: 700;
+}
+
+@media only screen and ( max-width: 64.063em ) {
+ .pagination li:first-child,
+ .pagination li:last-child {
+ /* screen readers only */
+ position: absolute;
+ top: -9999px;
+ left: -9999px;
+ }
+
+ .pagination li:nth-of-type(2) a { border-left-width: 1px; }
+
+}
+
+@media only screen and ( max-width: 40.063em ) {
+ .pagination li {
+ /* screen readers only */
+ position: absolute;
+ top: -9999px;
+ left: -9999px;
+ }
+
+ .pagination li.current,
+ .pagination li:first-of-type,
+ .pagination li:last-of-type,
+ .pagination li:nth-of-type(2),
+ .pagination li:nth-last-of-type(2){
+ position: initial;
+ top: initial;
+ left: initial;
+ }
+
+ .pagination li:nth-of-type(2) a { border-left-width: 0; }
+
+}
+
+@media only screen and ( max-width: 30.063em ) {
+
+ h1 { font-size: 1.35em !important; }
+
+ .pagination li:first-child,
+ .pagination li:last-child {
+ /* screen readers only */
+ position: absolute;
+ top: -9999px;
+ left: -9999px;
+ }
+
+ .pagination li:nth-of-type(2) a { border-left-width: 1px; }
+
+}
+
+@media only screen and ( max-width: 15.063em ) { /* For watches? */
+
+ .pagination li { width: 50%;}
+
+ .pagination li.current {
+ -webkit-box-ordinal-group: 3;
+ -ms-flex-order: 2;
+ order: 2;
+ width: 100%;
+ border-left-width: 1px;
+
+ }
+
+}
\ No newline at end of file