pagination componant

pages/_includes/parts/pagination.html

 {% assign count = include.count | default: 5 %}
 {% assign active-item = include.active-item | default: 2 %}
-<ul class="pagination {{ include.class }}{% if include.pager %} pagination-pager{% endif %}">
-   <li class="page-item page-prev disabled">
+<ul class="pagination {{ include.class }}">
+   <li class="page-item{% if include.prev-description %} page-prev{% endif %} disabled">
       <a class="page-link" href="#" tabindex="-1">
-         {% if include.left-icon %}<i class="{{ include.left-icon }}"></i>{% else %}Prev{% endif %}
+         {% if include.prev-description %}
+            <div class="page-item-subtitle">Previous</div>
+            <div class="page-item-title">{{ include.prev-description }}</div>
+         {% else %}
+            {% if include.icons %}{% include ui/icon.html icon="chevron-left" %}{% else %}Prev{% endif %}
+         {% endif %}
       </a>
    </li>
 
@@ -11,9 +16,15 @@
    <li class="page-item{% if i == active-item %} active{% endif %}"><a class="page-link" href="#">{{ i }}</a></li>
    {% endfor %}
 
-   <li class="page-item page-next">
+   <li class="page-item{% if include.prev-description %} page-next{% endif %}">
       <a class="page-link" href="#">
-         {% if include.right-icon %}<i class="{{ include.right-icon }}"></i>{% else %}Next{% endif %}
+
+         {% if include.next-description %}
+            <div class="page-item-subtitle">Next</div>
+            <div class="page-item-title">{{ include.next-description }}</div>
+         {% else %}
+            {% if include.icons %}{% include ui/icon.html icon="chevron-right" %}{% else %}Next{% endif %}
+         {% endif %}
       </a>
    </li>
 </ul>

pages/pagination.html

+---
+title: Pagination
+---
+
+
+{% card %}
+   {% include parts/pagination.html %}
+   {% include parts/pagination.html icons=true %}
+{% endcard %}
+
+
+{% card %}
+   {% include parts/pagination.html count=0 prev-description="Getting started" next-description="Breadcrumbs" %}
+{% endcard %}

scss/_variables.scss

 // FONTS
-$font-family-base: "Roboto", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
+$font-family-base: "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, "Helvetica Neue", arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
 $font-family-serif: "Georgia", "Times New Roman", times, serif !default;
 
 // EXTERNAL FONTS
-$google-font-url: "https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700" !default;
+$google-font-url: "https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,500,600,700" !default;
 $icon-fonts: (
   "https://use.fontawesome.com/releases/v5.3.1/css/brands.css"
 ) !default;
@@ -26,7 +26,7 @@ $gray-700: #495057 !default;
 $gray-800: #343a40 !default;
 $gray-900: #212529 !default;
 
-$blue: #467fcf !default;
+$blue: #458edd !default;
 $azure: #45aaf2 !default;
 $indigo: #6574cd !default;
 $purple: #a55eea !default;
@@ -47,7 +47,7 @@ $white: #fff !default;
 $body-bg: #f5f7fb !default;
 $body-bg-dark: mix(#fff, $dark, 8%) !default;
 
-$text-color: #647787 !default;
+$text-color: #495057 !default;
 $text-muted: #778ca2 !default;
 $text-muted-light: #adb5bd !default;
 
@@ -155,6 +155,13 @@ $container-max-widths: (
   xl: 1200px
 ) !default;
 
+//pagination
+$pagination-border-width: 0 !default;
+$pagination-padding-y: .25rem !default;
+$pagination-padding-x: .25rem !default;
+$pagination-color: $text-muted !default;
+$pagination-disabled-color: $text-muted-light !default;
+
 //docelowo przeniesc gdzieindziej
 $yiq-contrasted-threshold: 200 !default;
 

scss/layout/_core.scss

 body {
-  background: $body-bg;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-text-size-adjust: none;
+  -ms-touch-action: manipulation;
+  touch-action: manipulation;
+  -webkit-font-feature-settings: "liga" 0;
+  font-feature-settings: "liga" 0;
+}
+
+body *::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+  transition: .3s background;
+}
+
+body *::-webkit-scrollbar-thumb {
+  background: $gray-400;
+}
+body *:hover::-webkit-scrollbar-thumb {
+  background: $gray-500;
 }

scss/ui-kit.scss

@@ -51,6 +51,7 @@
 @import "ui/ribbons";
 @import "ui/nav";
 @import "ui/calendars";
+@import "ui/pagination";
 
 @import "ui/highlight";
 @import "ui/examples";

scss/ui/_pagination.scss

+.pagination {
+  user-select: none;
+}
+
+.page-link {
+  border-radius: $border-radius;
+  min-width: px2rem(26px);
+
+  &:hover {
+    background: transparent;
+  }
+}
+
+.page-item {
+  text-align: center;
+
+  &.page-prev,
+  &.page-next {
+    flex: 0 0 50%;
+    text-align: left;
+  }
+
+  &.page-next {
+    margin-left: auto;
+    text-align: right;
+  }
+}
+
+.page-item-subtitle {
+  color: $text-muted;
+  text-transform: uppercase;
+  font-size: 12px;
+  margin-bottom: 2px;
+
+  .page-item.disabled &{
+    color: $pagination-disabled-color;
+  }
+}
+
+.page-item-title {
+  color: $text-color;
+  font-weight: 400;
+  font-size: $h3-font-size;
+
+  .page-link:hover & {
+    color: $link-color;
+  }
+
+  .page-item.disabled &{
+    color: $pagination-disabled-color;
+  }
+}