Non-visible paging component padding (#1935)

Resolves #1935
blackbaud · Sep 12, 2018 · 949cfd1 · 949cfd1
1 parent aee7f7d
commit 949cfd1
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 53 deletions.
diff --git a/skyux-spa-visual-tests/screenshots-baseline/paging-First-chrome-1000x800-dpr-1.png b/skyux-spa-visual-tests/screenshots-baseline/paging-First-chrome-1000x800-dpr-1.png
diff --git a/...x-spa-visual-tests/screenshots-baseline/paging-Middle-chrome-1000x800-dpr-1.png b/...x-spa-visual-tests/screenshots-baseline/paging-Middle-chrome-1000x800-dpr-1.png
diff --git a/src/modules/list-paging/list-paging.component.html b/src/modules/list-paging/list-paging.component.html
@@ -1,10 +1,8 @@
-<div>
-  <sky-paging
-    [pageSize]="itemsPerPage | async"
-    [maxPages]="maxDisplayedPages | async"
-    [currentPage]="currentPageNumber | async"
-    [itemCount]="itemCount | async"
-    (currentPageChange)="pageChange($event)"
-    >
-  </sky-paging>
-</div>
+<sky-paging
+  [pageSize]="itemsPerPage | async"
+  [maxPages]="maxDisplayedPages | async"
+  [currentPage]="currentPageNumber | async"
+  [itemCount]="itemCount | async"
+  (currentPageChange)="pageChange($event)"
+  >
+</sky-paging>
diff --git a/src/modules/paging/paging.component.html b/src/modules/paging/paging.component.html
@@ -1,6 +1,5 @@
-<ul
+<ul *ngIf="pageCount > 1"
   role="navigation"
-  *ngIf="pageCount > 1"
   [attr.aria-label]="pagingLabel || 'paging_label' | skyResources"
   >
   <li>

diff --git a/src/modules/paging/paging.component.scss b/src/modules/paging/paging.component.scss
@@ -3,49 +3,48 @@
 
 :host {
   display: block;
-  margin-top: $sky-margin-plus-half;
+}
 
-  ul {
-    margin: 0;
-    display: inline-block;
-    padding-left: 0;
-    border-radius: 4px;
-  }
+ul {
+  margin: $sky-margin-plus-half 0 0 0;
+  display: inline-block;
+  padding-left: 0;
+  border-radius: 4px;
+}
+
+li {
+  display: inline;
+
+  a {
+    background-color: $sky-color-white;
+    color: inherit;
+    @include sky-border(light, top, right, bottom, left);
+    float: left;
+    margin-left: -1px;
+    padding: 4px 10px;
+    text-decoration: none;
+    line-height: 1.42857;
+    font-size: $sky-font-size-base;
+    cursor: pointer;
+
+    &.sky-paging-caret {
+      padding-left: 8.5px;
+      padding-right: 8.5px;
+      transform: none;
+    }
+
+    &.sky-paging-current {
+      background-color: $sky-background-color-neutral-light;
+    }
+
+    &:hover {
+      background-color: darken($sky-background-color-neutral-light, 10%);
+    }
 
-  li {
-    display: inline;
-
-    a {
-      background-color: $sky-color-white;
-      color: inherit;
-      @include sky-border(light, top, right, bottom, left);
-      float: left;
-      margin-left: -1px;
-      padding: 4px 10px;
-      text-decoration: none;
-      line-height: 1.42857;
-      font-size: $sky-font-size-base;
-      cursor: pointer;
-
-      &.sky-paging-caret {
-        padding-left: 8.5px;
-        padding-right: 8.5px;
-        transform: none;
-      }
-
-      &.sky-paging-current {
-        background-color: $sky-background-color-neutral-light;
-      }
-
-      &:hover {
-        background-color: darken($sky-background-color-neutral-light, 10%);
-      }
-
-       &.sky-paging-disabled {
-        color: $sky-text-color-deemphasized;
-        cursor: not-allowed;
-        pointer-events: none;
-      }
+      &.sky-paging-disabled {
+      color: $sky-text-color-deemphasized;
+      cursor: not-allowed;
+      pointer-events: none;
     }
   }
 }