+
Previous
+
+
+
+ Previous
+
+
+
Next
+
+
+ Next
+
+
+
+
+
+
\ No newline at end of file
diff --git a/src/stories/SectionPagination.stories.js b/src/stories/SectionPagination.stories.js
index 60d1e131c..f29888f3a 100644
--- a/src/stories/SectionPagination.stories.js
+++ b/src/stories/SectionPagination.stories.js
@@ -1,4 +1,5 @@
import SectionPagination from '@/lib-components/SectionPagination'
+import { computed } from 'vue'
// Storybook default settings
export default {
@@ -26,3 +27,22 @@ export function LastPage() {
template: '
',
}
}
+
+export function WithPagesAndCurrentPage() {
+ return {
+ components: { SectionPagination },
+ template: '
',
+ }
+}
+
+export function FTVA() {
+ return {
+ components: { SectionPagination },
+ provide() {
+ return {
+ theme: computed(() => 'ftva'),
+ }
+ },
+ template: '
',
+ }
+}
\ No newline at end of file
diff --git a/src/styles/default/_section-pagination.scss b/src/styles/default/_section-pagination.scss
new file mode 100644
index 000000000..53d1d6f3d
--- /dev/null
+++ b/src/styles/default/_section-pagination.scss
@@ -0,0 +1,79 @@
+.section-pagination {
+ max-width: 990px;
+
+ font-family: var(--font-secondary);
+ font-size: 18px;
+ padding-left: 13px;
+
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ justify-content: space-between;
+ align-content: center;
+ align-items: center;
+
+ .previous {
+ display: flex;
+ align-items: center;
+ }
+
+ .next {
+ display: flex;
+ align-items: center;
+ }
+
+ .previous-svg {
+ transform: scaleX(-1);
+ margin-right: 5px;
+ }
+
+ .next-svg {
+ margin-left: 5px;
+ }
+
+ &.first-page {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ justify-content: flex-end;
+ align-content: stretch;
+ align-items: center;
+ }
+
+ &.last-page {
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ justify-content: flex-start;
+ align-content: stretch;
+ align-items: center;
+ }
+
+ .page-list-left {
+ position: relative;
+ display: flex;
+ // flex-direction: row;
+ // flex-wrap: nowrap;
+ // justify-content: flex-start;
+ // align-content: stretch;
+ // align-items: center;
+ // max-width: 50px;
+ white-space: nowrap; //pre;
+ overflow: hidden;
+ width:calc(100% - 60px) // TODO check size of buttons once done
+ }
+
+ // Hover states
+ @media #{$has-hover} {
+
+ .previous:hover,
+ .previous:active {
+ color: var(--color-primary-blue-03);
+ }
+
+ .next:hover,
+ .next:active {
+ color: var(--color-primary-blue-03);
+ }
+ }
+}
\ No newline at end of file
diff --git a/src/styles/ftva/_section-pagination.scss b/src/styles/ftva/_section-pagination.scss
new file mode 100644
index 000000000..9ee8df217
--- /dev/null
+++ b/src/styles/ftva/_section-pagination.scss
@@ -0,0 +1,3 @@
+.ftva.section-pagination {
+
+}
\ No newline at end of file