fix(pagination): prevent page controls from stacking vertically (#7427)

* Revert "fix(Pagination): fix pagination controls line break, fix styles warnings (#7316)" This reverts commit 1978c01. * fix(pagination): prevent page controls from stacking vertically Co-authored-by: Andrea N. Cardona <andreancardona@gmail.com> Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Dec 10, 2020 · 3f736c8 · 3f736c8
1 parent 630a222
commit 3f736c8
Showing 1 changed file with 86 additions and 77 deletions.
diff --git a/packages/components/src/components/pagination/_pagination.scss b/packages/components/src/components/pagination/_pagination.scss
@@ -21,12 +21,30 @@ $css--helpers: true;
 /// @access private
 /// @group pagination
 @mixin pagination {
+  .#{$prefix}--data-table-container + .#{$prefix}--pagination {
+    border-top: 0;
+  }
+
   .#{$prefix}--pagination {
     @include reset;
     @include type-style('body-short-01');
 
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    width: 100%;
+    min-height: rem(48px);
+    overflow-x: auto;
+    background-color: $ui-01;
+    border-top: 1px solid $ui-03;
+
     @include carbon--breakpoint('md') {
       overflow: initial;
+
+      .#{$prefix}--pagination__control-buttons {
+        display: flex;
+      }
     }
 
     // mobile friendly pagination
@@ -36,114 +54,99 @@ $css--helpers: true;
         display: none;
       }
 
-      .#{$prefix}--pagination__items-count,
-      .#{$prefix}--pagination__control-buttons {
+      .#{$prefix}--pagination__items-count {
         display: initial;
       }
-    }
-
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
 
-    width: 100%;
-    min-height: rem(48px);
-    overflow-x: auto;
-    background-color: $ui-01;
-    border-top: 1px solid $ui-03;
-
-    .#{$prefix}--data-table-container + & {
-      border-top: 0;
-    }
-
-    .#{$prefix}--pagination__control-buttons {
-      flex-shrink: 0;
+      .#{$prefix}--pagination__control-buttons {
+        display: flex;
+      }
     }
+  }
 
-    .#{$prefix}--select {
-      align-items: center;
-      height: 100%;
-    }
+  .#{$prefix}--pagination .#{$prefix}--select {
+    align-items: center;
+    height: 100%;
+  }
 
-    .#{$prefix}--select-input {
-      @include type-style('body-short-01');
+  .#{$prefix}--pagination .#{$prefix}--select-input--inline__wrapper {
+    display: flex;
+    height: 100%;
+  }
 
-      width: auto;
-      min-width: auto;
-      height: rem(48px);
-      padding: 0 2.25rem 0 $spacing-05;
+  .#{$prefix}--pagination .#{$prefix}--select-input {
+    @include type-style('body-short-01');
 
-      &:hover {
-        background: $hover-ui;
-      }
+    width: auto;
+    min-width: auto;
+    height: rem(48px);
+    padding: 0 2.25rem 0 $spacing-05;
+  }
 
-      &--inline__wrapper {
-        display: flex;
-        height: 100%;
-      }
-    }
+  .#{$prefix}--pagination .#{$prefix}--select-input:hover {
+    background: $hover-ui;
+  }
 
-    .#{$prefix}--select__arrow {
-      top: 50%;
-      transform: translate(-0.5rem, -50%);
-    }
+  .#{$prefix}--pagination .#{$prefix}--select__arrow {
+    top: 50%;
+    transform: translate(-0.5rem, -50%);
+  }
 
-    .#{$prefix}--select__item-count {
-      .#{$prefix}--select-input {
-        border-right: $spacing-4xs solid $ui-03;
-      }
-    }
+  .#{$prefix}--pagination
+    .#{$prefix}--select__item-count
+    .#{$prefix}--select-input {
+    border-right: $spacing-4xs solid $ui-03;
+  }
 
-    .#{$prefix}--select__page-number {
-      .#{$prefix}--select-input {
-        border-left: 1px solid $ui-03;
-      }
-    }
+  .#{$prefix}--pagination
+    .#{$prefix}--select__page-number
+    .#{$prefix}--select-input {
+    border-left: 1px solid $ui-03;
   }
 
   .#{$prefix}--pagination__left,
   .#{$prefix}--pagination__right {
     display: flex;
     align-items: center;
     height: rem(48px);
+  }
 
-    > .#{$prefix}--form-item {
-      height: 100%;
-    }
+  .#{$prefix}--pagination__left > .#{$prefix}--form-item,
+  .#{$prefix}--pagination__right > .#{$prefix}--form-item {
+    height: 100%;
+  }
 
-    .#{$prefix}--pagination__text {
-      white-space: nowrap;
-    }
+  .#{$prefix}--pagination__left .#{$prefix}--pagination__text,
+  .#{$prefix}--pagination__right .#{$prefix}--pagination__text {
+    white-space: nowrap;
   }
 
-  .#{$prefix}--pagination__text {
-    @include carbon--breakpoint('md') {
-      display: inline-block;
-    }
+  .#{$prefix}--pagination__left .#{$prefix}--pagination__text {
+    margin-right: rem(1px);
+  }
 
-    margin-left: $carbon--spacing-05;
-    overflow: hidden;
-    color: $text-02;
-    text-overflow: ellipsis;
+  .#{$prefix}--pagination__right .#{$prefix}--pagination__text {
+    margin-right: 1rem;
+    margin-left: rem(1px);
+  }
 
-    .#{$prefix}--pagination__left & {
-      margin-right: rem(1px);
-    }
+  .#{$prefix}--pagination__left {
+    padding: 0 $carbon--spacing-05 0 0;
 
-    .#{$prefix}--pagination__right & {
-      margin-right: 1rem;
-      margin-left: rem(1px);
+    @include carbon--breakpoint('md') {
+      padding: 0 $carbon--spacing-05;
     }
+  }
 
-    // Skeleton state
-    .#{$prefix}--pagination.#{$prefix}--skeleton & {
-      margin-right: 1rem;
-      margin-bottom: 0;
+  .#{$prefix}--pagination__text {
+    @include carbon--breakpoint('md') {
+      display: inline-block;
     }
   }
 
-  .#{$prefix}--pagination__left {
-    padding: 0 $carbon--spacing-05;
+  span.#{$prefix}--pagination__text {
+    margin-left: $carbon--spacing-05;
+    color: $text-02;
   }
 
   .#{$prefix}--pagination__button,
@@ -200,6 +203,12 @@ $css--helpers: true;
     cursor: not-allowed;
     fill: $disabled-02;
   }
+
+  // Skeleton state
+  .#{$prefix}--pagination.#{$prefix}--skeleton .#{$prefix}--skeleton__text {
+    margin-right: 1rem;
+    margin-bottom: 0;
+  }
 }
 
 @include exports('pagination') {