v3 UI

frontend/src/Components/Table/TablePager.css

@@ -0,0 +1,77 @@
+.pager {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.loadingContainer,
+.controlsContainer,
+.recordsContainer {
+  flex: 0 1 33%;
+}
+
+.controlsContainer {
+  display: flex;
+  justify-content: center;
+}
+
+.recordsContainer {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.loading {
+  composes: loading from 'Components/Loading/LoadingIndicator.css';
+
+  margin: 0;
+  margin-left: 5px;
+  text-align: left;
+}
+
+.controls {
+  display: flex;
+  align-items: center;
+  text-align: center;
+}
+
+.pageNumber {
+  line-height: 30px;
+}
+
+.pageLink {
+  padding: 0;
+  width: 30px;
+  height: 30px;
+  line-height: 30px;
+}
+
+.records {
+  color: $disabledColor;
+}
+
+.disabledPageButton {
+  color: $disabledColor;
+}
+
+.pageSelect {
+  composes: select from 'Components/Form/SelectInput.css';
+
+  padding: 0 2px;
+  height: 25px;
+}
+
+@media only screen and (max-width: $breakpointSmall) {
+  .pager {
+    flex-wrap: wrap;
+  }
+
+  .loadingContainer,
+  .recordsContainer {
+    flex: 0 1 50%;
+  }
+
+  .controlsContainer {
+    flex: 0 1 100%;
+    order: -1;
+  }
+}