feat: Pagination component.

2026-02-17 13:20:31 +00:00 · 2020-06-21 19:21:27 +02:00
parent 3e15cd42c8
commit 15bcd55979
19 changed files with 668 additions and 167 deletions
--- a/client/src/style/components/pagination.scss
+++ b/client/src/style/components/pagination.scss
@@ -0,0 +1,101 @@
+
+.pagination{
+  display: flex;
+  padding: 25px 14px;
+  font-size: 13px;
+
+  .bp3-button{
+    background: transparent;
+    padding: 4px 4px;
+  }
+
+  &__item{
+    min-width: 24px;
+    min-height: 24px;
+
+    &:not([class*="bp3-intent-"]){
+      color: #666666; 
+      border-radius: 3px;
+
+      &:hover{
+        background-color: #E6EFFB;
+      }
+    }
+
+    .bp3-icon{
+      margin-right: 4px;
+      color: #666666;
+    }
+
+    .pagination .pagination__buttons-group .bp3-button-group &{
+      border-radius: 3px;
+    }
+    &--next,
+    &--previous{
+
+      &.bp3-button{
+        padding-left: 6px;
+        padding-right: 6px;
+      }
+    }
+
+    &.is-active{
+      &.bp3-intent-primary:disabled,
+      &.bp3-intent-primary.bp3-disabled{
+        background-color: #E6EFFB;
+      }
+
+      &:not([class*="bp3-intent-"]) {
+      }
+      .bp3-button-text{        
+        color: #000;
+      }
+    }
+
+    &--next{
+
+      .bp3-icon{
+        order: 1;
+        margin-right: 0;
+        margin-left: 4px;
+      }
+    }
+  }
+
+  &__info{
+    padding-top: 6px;
+    color: #999;
+    margin-left: 12px;
+  }
+
+  &__controls{
+    display: flex;
+    margin-left: auto;
+
+    .bp3-html-select{
+      margin-left: 6px;
+
+      select{
+        height: 20px;
+        width: auto;
+        padding: 0;
+        padding-right: 0px;
+        border: 1px solid #e8e8e8;
+        font-size: 13px;
+        border-radius: 3px;
+        color: #666;
+        padding-right: 8px;
+      }
+    }
+  }
+
+  &__goto-control{
+    display: none;
+  }
+
+  &__pagesize-control{
+    margin-left: 12px;
+    padding-top: 4px;
+    color: #777;
+  }
+}