diff --git a/packages/components/src/components/pagination/_pagination.scss b/packages/components/src/components/pagination/_pagination.scss index a2081f337085..1b9bb5a3be3c 100644 --- 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,69 +54,54 @@ $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, @@ -106,44 +109,44 @@ $css--helpers: true; 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') {