Turn pagination into button group
Change-Id: I73e7b1355baf7e6b7da63e917eceb8346e405b0f
diff --git a/dev/scss/main/pagination.scss b/dev/scss/main/pagination.scss
index 75e9458..d41fb73 100644
--- a/dev/scss/main/pagination.scss
+++ b/dev/scss/main/pagination.scss
@@ -20,107 +20,55 @@
* This may need to be overwritten in case multiple
* paginations have to be activated.
*/
- position: fixed;
- font-size: 0;
- right: ($standard-margin / 4);
- bottom: ($standard-margin / 2);
- z-index: 35;
- padding: 0;
- height: auto;
- line-height: 0;
+ position: fixed;
+ font-size: 0;
+ right: ($standard-margin / 4);
+ bottom: ($standard-margin / 2);
+ z-index: 35;
+ padding: 0;
+ height: auto;
+ line-height: 0;
+
+ > * {
+ font-size: 10pt;
+ line-height: 2em;
- > a {
- margin: 0;
- font-size: 10pt;
- padding: 0;
+ &:not(:link):not([rel=self]) {
+ color: $choose-blind-color;
+ }
- > span {
- @include standard-text-padding;
- @include choose-item;
- box-shadow: $choose-box-shadow;
- display: inline-block;
- line-height: 2em;
- text-align: center;
+ &.ellipsis, &[rel=prev], &[rel=next] {
+ > span {
+ @include blind;
+ }
+ }
+
+ &.ellipsis::after {
+ @include icon-font;
+ content: $fa-elipsis;
+ line-height: 1em;
+ }
- border: {
- top-width: $border-size;
- bottom-width: $border-size;
- top-style: solid;
- bottom-style: solid;
- }
+ &[rel=self] {
+ @include choose-active;
+ border: {
+ left-width: $border-size;
+ right-width: $border-size;
+ left-style: solid;
+ right-style: solid;
+ }
+ }
+
+ &[rel=prev]::after {
+ @include icon-font;
+ content: $fa-previous;
+ line-height: 1em;
+ }
+
+ &[rel=next]::after {
+ @include icon-font;
+ content: $fa-next;
+ line-height: 1em;
+ }
}
-
- &:not(:link):not([rel=self]) span {
- color: $choose-blind-color;
- }
-
- &.ellipsis > span {
- > span {
- @include blind;
- }
-
- &::after {
- @include icon-font;
- content: $fa-elipsis;
- line-height: 1em;
- }
- }
-
- &[rel=self] > span {
- @include choose-active;
-
- border: {
- left-width: $border-size;
- right-width: $border-size;
- left-style: solid;
- right-style: solid;
- }
- }
-
- &[rel=prev] > span {
- border: {
- top-left-radius: $standard-border-radius;
- bottom-left-radius: $standard-border-radius;
- left-width: $border-size;
- left-style: solid;
- }
-
- > span {
- @include blind;
- }
-
- &::after {
- @include icon-font;
- content: $fa-previous;
- line-height: 1em;
- }
- }
-
- &[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 {
- @include icon-font;
- content: $fa-next;
- line-height: 1em;
- }
- }
-
- &:link:hover,
- &:link:focus {
- outline: none;
- span {
- @include choose-hover;
- }
- }
- }
-}
\ No newline at end of file
+}