Contents

// CSS for pagination navigation

.va-pagination {
  border-top: 1px solid $color-gray-lightest;
  font-size: .9em;
  overflow: hidden;
  padding: 1rem;
  position: relative;
  text-align: center;
  width: 100%;

  a {
    line-height: 2;
    text-decoration: none;
  }

  &-prev,
  &-next {
    padding: 0 1rem;
    &:hover,
    &:focus {
      text-decoration: underline;
    }
  }

  &-prev,
  &-next,
  &-inner {
    display: inline-block;
    vertical-align: middle;
  }

  &-inner {
    line-height: 1.5;
    overflow: hidden;
    max-width: 66%;
    white-space: nowrap;

    @media (max-width: $small-screen) {
      @supports (display: flex) {
        display: flex;
        justify-content: space-between;
        flex-wrap: nowrap;
        align-items: center;
      }
    }

    @media (min-width: $large-screen) {
      margin: 0 1rem;
      max-width: 85%;
    }
  }

  &-prev {
    &::before {
      content: '\003c\a0\a0';
    }
  }

  &-next {
    &::after {
      content: '\a0\a0\003e';
    }
  }

  @media (max-width: $small-screen) {
    @supports (display: flex) {
      display: flex;
      justify-content: space-between;
      flex-wrap: nowrap;
      align-items: center;
    }
  }
}

.va-pagination-inner a {
  border-radius: 1000px;
  display: inline-block;
  height: 3rem;
  margin: 0 .25rem;
  width: 3rem;
  text-decoration: none;

  @media (max-width: $small-screen) {
    flex: 0 0 3rem;
  }
}
.va-pagination-inner a:hover,
.va-pagination-inner a:focus,
.va-pagination-active {
  background: $color-primary;
  color: $color-white;
}

Version data entries

2 entries across 2 versions & 1 rubygems

Version	Path
va_common-0.4.4	app/assets/stylesheets/components/_va-pagination.scss
va_common-0.4.3	app/assets/stylesheets/components/_va-pagination.scss