package.scss._pagination.scss Maven / Gradle / Ivy

Go to download
Show more of this group Show more artifacts with this name
Show all versions of boosted Show documentation
Orange Boosted with Bootstrap is a Bootstrap based, Orange branded accessible and ergonomic components library.
The newest version!
.pagination {
  // scss-docs-start pagination-css-vars
  --#{$prefix}pagination-padding-x: #{$pagination-padding-x};
  --#{$prefix}pagination-padding-y: #{$pagination-padding-y};
  --#{$prefix}pagination-padding-end: #{$pagination-padding-end}; // Boosted mod
  --#{$prefix}pagination-margin-y: #{$pagination-margin-y}; // Boosted mod
  --#{$prefix}pagination-margin-x-first-last: #{$pagination-margin-x-first-last}; // Boosted mod
  @include rfs($pagination-font-size, --#{$prefix}pagination-font-size);
  --#{$prefix}pagination-font-weight: #{$font-weight-bold}; // Boosted mod
  --#{$prefix}pagination-color: #{$pagination-color};
  --#{$prefix}pagination-bg: #{$pagination-bg};
  --#{$prefix}pagination-border-width: #{$pagination-border-width};
  --#{$prefix}pagination-border-color: #{$pagination-border-color};
  --#{$prefix}pagination-border-radius: #{$pagination-border-radius};
  --#{$prefix}pagination-hover-color: #{$pagination-hover-color};
  --#{$prefix}pagination-hover-bg: #{$pagination-hover-bg};
  --#{$prefix}pagination-hover-border-color: #{$pagination-hover-border-color};
  // Boosted mod: no --#{$prefix}pagination-focus-color
  // Boosted mod: no --#{$prefix}pagination-focus-bg
  // Boosted mod: no --#{$prefix}pagination-focus-box-shadow
  --#{$prefix}pagination-active-color: #{$pagination-active-color};
  --#{$prefix}pagination-active-bg: #{$pagination-active-bg};
  --#{$prefix}pagination-active-border-color: #{$pagination-active-border-color};
  --#{$prefix}pagination-active-item-color: #{$pagination-active-item-color}; // Boosted mod
  --#{$prefix}pagination-active-item-bg: #{$pagination-active-item-bg}; // Boosted mod
  --#{$prefix}pagination-active-item-border-color: #{$pagination-active-item-border}; // Boosted mod
  --#{$prefix}pagination-disabled-color: #{$pagination-disabled-color};
  --#{$prefix}pagination-disabled-bg: #{$pagination-disabled-bg};
  --#{$prefix}pagination-disabled-border-color: #{$pagination-disabled-border-color};
  --#{$prefix}pagination-icon: #{$pagination-icon}; // Boosted mod
  --#{$prefix}pagination-icon-size: #{$pagination-icon-size}; // Boosted mod
  --#{$prefix}pagination-icon-width: #{$pagination-icon-width}; // Boosted mod
  --#{$prefix}pagination-icon-height: #{$pagination-icon-height}; // Boosted mod
  // scss-docs-end pagination-css-vars

  display: flex;
  flex-wrap: if($pagination-margin-start == (-$pagination-border-width), null, wrap); // Boosted mod
  margin: var(--#{$prefix}pagination-margin-y) 0; // Boosted mod
  background-color: transparent; // Boosted mod
  @include list-unstyled();
}

.page-link {
  position: relative;
  box-sizing: content-box; // Boosted mod
  display: flex; // Boosted mod
  align-items: center; // Boosted mod
  justify-content: center; // Boosted mod
  padding: var(--#{$prefix}pagination-padding-y) var(--#{$prefix}pagination-padding-x);
  @include font-size(var(--#{$prefix}pagination-font-size));
  font-weight: var(--#{$prefix}pagination-font-weight); // Boosted mod
  color: var(--#{$prefix}pagination-color);
  text-decoration: if($link-decoration == none, null, none);
  background-color: var(--#{$prefix}pagination-bg);
  border: var(--#{$prefix}pagination-border-width) solid var(--#{$prefix}pagination-border-color);
  @include transition($pagination-transition);
  // Boosted mod: embed icon as mask-image
  @include button-icon(
    var(--#{$prefix}pagination-icon),
    var(--#{$prefix}pagination-icon-size),
    $size: var(--#{$prefix}pagination-icon-width) var(--#{$prefix}pagination-icon-height) ,
    $selector: ".page-item:first-child .page-link, .page-item:last-child .page-link",
    $position: calc(50% - 1px)
  );
  // End mod

  &:hover {
    z-index: 2;
    color: var(--#{$prefix}pagination-hover-color);
    text-decoration: if($link-hover-decoration == underline, none, null);
    background-color: var(--#{$prefix}pagination-hover-bg);
    border-color: var(--#{$prefix}pagination-hover-border-color);
  }

  // Boosted mod: no focus

  // Boosted mod
  &:active,
  &:active > & {
    color: var(--#{$prefix}pagination-active-item-color);
    background-color: var(--#{$prefix}pagination-active-item-bg);
    border-color: var(--#{$prefix}pagination-active-item-border-color);
  }
  // End mod

  &.active,
  .active > & {
    z-index: 3;
    color: var(--#{$prefix}pagination-active-color);
    @include gradient-bg(var(--#{$prefix}pagination-active-bg));
    border-color: var(--#{$prefix}pagination-active-border-color);
  }

  &.disabled,
  .disabled > & {
    color: var(--#{$prefix}pagination-disabled-color);
    pointer-events: none;
    background-color: var(--#{$prefix}pagination-disabled-bg);
    border-color: var(--#{$prefix}pagination-disabled-border-color);
  }
}

.page-item {
  &:not(:first-child) .page-link {
    margin-left: $pagination-margin-start;
  }

  @if $pagination-margin-start == calc(#{$pagination-border-width} * -1) {
    &:first-child {
      .page-link {
        @include border-start-radius(var(--#{$prefix}pagination-border-radius));
      }
    }

    &:last-child {
      .page-link {
        @include border-end-radius(var(--#{$prefix}pagination-border-radius));
      }
    }
  } @else {
    // Add border-radius to all pageLinks in case they have left margin
    .page-link {
      @include border-radius(var(--#{$prefix}pagination-border-radius));
    }
  }

  // Boosted mod
  &:first-child:not(.active) .page-link,
  &:last-child:not(.active) .page-link {
    border-color: currentcolor;

    &:hover {
      color: var(--#{$prefix}pagination-active-color);
      background-color: var(--#{$prefix}pagination-active-bg);
      border-color: var(--#{$prefix}pagination-active-border-color);
    }

    &.active {
      border-color: var(--#{$prefix}pagination-border-color);
    }

    &:active {
      color: var(--#{$prefix}pagination-active-item-color);
      background-color: var(--#{$prefix}pagination-active-item-bg);
      border-color: var(--#{$prefix}pagination-active-item-border-color);
    }
  }

  &:first-child .page-link {
    margin-right: var(--#{$prefix}pagination-margin-x-first-last);

    &:not(:empty) {
      padding-right: var(--#{$prefix}pagination-padding-end);
    }

    &::before {
      /* rtl:raw:
      transform: scaleX(-1);
      */
    }
  }

  &:last-child .page-link {
    &:not(:empty) {
      padding-left: var(--#{$prefix}pagination-padding-end);
    }

    &::before {
      order: 1;

      /* rtl:remove */
      transform: scaleX(-1);
    }
  }

  &:last-child:not(:nth-child(2)) .page-link {
    margin-left: var(--#{$prefix}pagination-margin-x-first-last);
  }

  @include media-breakpoint-down(sm) {
    @include pagination-max-items(4);
  }

  @include media-breakpoint-between(sm, md) {
    @include pagination-max-items(6);
  }

  @include media-breakpoint-between(md, lg) {
    @include pagination-max-items(8);
  }

  @include media-breakpoint-between(lg, xl) {
    @include pagination-max-items(10);
  }

  @include media-breakpoint-up(xl) {
    @include pagination-max-items(12);
  }
  // End mod
}


//
// Sizing
//

// Boosted mod: no pagination sizes