Merge pull request #741 from ae-utbm/better-pagination

improve pagination

core/static/core/colors.scss

@@ -0,0 +1,30 @@
+$first-color: hsl(220, 100%, 50%);
+$second-color: hsl(48, 100%, 67%);
+$primary-color: hsl(219.9, 53.7%, 50%);
+$secondary-color: hsl(204, 64%, 44%);
+$primary-color-text: hsl(0, 0%, 100%);
+$secondary-color-text: hsla(0, 0%, 0%, 0.87);
+
+$primary-light-color: hsl(219.8, 46.4%, 64.9%);
+$primary-dark-color: hsl(203, 75%, 40%);
+
+$secondary-light-color: hsl(40, 68%, 65%);
+$secondary-dark-color: hsl(40, 68%, 35%);
+
+$primary-neutral-color: hsl(219.6, 20.8%, 50%);
+$primary-neutral-light-color: hsl(0, 0%, 94%);
+$primary-neutral-dark-color: hsl(210, 29%, 29%);
+
+$secondary-neutral-color: hsl(204, 64%, 44%);
+$secondary-neutral-light-color: hsl(0, 0%, 91%);
+$secondary-neutral-dark-color: hsl(40, 57.6%, 17%);
+
+$white-color: hsl(219.6, 20.8%, 98%);
+$black-color: hsl(0, 0%, 17%);
+
+$faceblue: hsl(221, 44%, 41%);
+$twitblue: hsl(206, 82%, 63%);
+
+$shadow-color: rgb(223, 223, 223);
+
+$background-button-color: hsl(0, 0%, 95%);

core/static/core/navbar.scss

@@ -1,5 +1,7 @@
+@import "colors";
+
 nav.navbar {
-  background-color: hsl(203, 75%, 40%);
+  background-color: $primary-dark-color;
   margin: 1em;
   color: white;
   border-radius: 0.6em;

core/static/core/pagination.scss

@@ -0,0 +1,37 @@
+@import "colors";
+
+.pagination {
+  text-align: center;
+  gap: 10px;
+
+  button {
+    background-color: $secondary-neutral-light-color;
+    min-width: 37px;
+
+    &:hover {
+      background-color: darken($secondary-neutral-light-color, 10%);
+    }
+
+    &:disabled {
+      color: #fff;
+      background-color: darken($secondary-neutral-light-color, 5%);
+    }
+
+    &.active,
+    &.active:hover {
+      background-color: $primary-neutral-color;
+      color: white;
+      border-radius: 50%;
+    }
+
+    &:first-of-type,
+    &:last-of-type {
+      // previous and next buttons
+      &:disabled {
+        // Hide the arrows when they are disabled, without
+        // changing the layout of the navigation
+        opacity: 0;
+      }
+    }
+  }
+}