mister-webdev / movie-app

src/feature/pagination/Pagination.module.scss

@import '@/styles/mixins.scss';

Imported partial @/styles/mixins.scss should be written as @/styles/mixins

.paginationWrapper {

Selector paginationWrapper should be written in lowercase with hyphens

  position: fixed;

Properties should be ordered bottom, display, justify-content, position, transition, width

  bottom: 0;

  display: flex;

  justify-content: center;

  width: 100%;

  transition: all 0.3s ease-out;

0.3 should be written without a leading zero as .3

}


.pagination {

  display: flex;

Properties should be ordered background, border, border-radius, box-shadow, display, max-width, padding, transition

  padding: 4px;

  max-width: 100%;

  background: rgba(0, 0, 0, 0.514);

0.514 should be written without a leading zero as .514

Color literals like rgba(0, 0, 0, 0.514) should only be used in variable declarations; they should be referred to via variable everywhere else.

  border-radius: 10px 10px 0 0;

  box-shadow: 2px 5px 10px 5px #0000008f;

  border: 1px solid #252525;

Color literals like #252525 should only be used in variable declarations; they should be referred to via variable everywhere else.

  transition: all 0.3s ease-out;

0.3 should be written without a leading zero as .3

  &:hover {

    background: rgba(0, 0, 0, 0.808);

Color literals like rgba(0, 0, 0, 0.808) should only be used in variable declarations; they should be referred to via variable everywhere else.

0.808 should be written without a leading zero as .808

    & > * {

Unnecessary parent selector (&)

      opacity: 1;

    }

  }

}


.paginationItem {

Selector paginationItem should be written in lowercase with hyphens

  display: flex;

Properties should be ordered align-items, border-radius, box-sizing, color, display, height, justify-content, letter-spacing, line-height, margin, opacity, padding, text-align, user-select

  justify-content: center;

  align-items: center;

  padding: 22px 0;

  @include fluid(padding-left, 8, 16);

Expected item on line 36 to appear before line 32. Rule sets should be ordered as follows: @extends, @includes without @content, properties, @includes with @content, nested rule sets

  @include fluid(padding-right, 8, 16);

  margin: auto 4px;

  height: 32px;

  text-align: center;

  box-sizing: border-box;

  color: rgba(255, 255, 255, 0.705);

Color literals like rgba(255, 255, 255, 0.705) should only be used in variable declarations; they should be referred to via variable everywhere else.

0.705 should be written without a leading zero as .705

  letter-spacing: 0.01071em;

0.01071 should be written without a leading zero as .01071

  line-height: 1.43;

  border-radius: 100px;

  user-select: none;

  opacity: 0.3;

0.3 should be written without a leading zero as .3

  &.dots {

    display: none;

Properties should be ordered color, display, transform

    color: rgb(95, 95, 95);

Color literals like rgb(95, 95, 95) should only be used in variable declarations; they should be referred to via variable everywhere else.

    transform: translateY(-8px);

    @include media(374) {

@include declaration should be preceded by an empty line

      display: block;

    };

  }


  &.dots:hover {

    color: rgb(95, 95, 95);

Properties should be ordered background-color, color, cursor

Color literals like rgb(95, 95, 95) should only be used in variable declarations; they should be referred to via variable everywhere else.

    background-color: transparent;

    cursor: default;

  }


  &:hover {

    color: rgba(255, 255, 255, 0.959);

Properties should be ordered background-color, color, cursor, opacity

Color literals like rgba(255, 255, 255, 0.959) should only be used in variable declarations; they should be referred to via variable everywhere else.

0.959 should be written without a leading zero as .959

    background-color: rgba(47, 0, 255, 0.185);

0.185 should be written without a leading zero as .185

Color literals like rgba(47, 0, 255, 0.185) should only be used in variable declarations; they should be referred to via variable everywhere else.

    cursor: pointer;

    opacity: 1;

  }


  &.selected {

    pointer-events: none;

Properties should be ordered animation, background-color, color, opacity, pointer-events

    color: rgba(255, 255, 255, 0.959);

0.959 should be written without a leading zero as .959

Color literals like rgba(255, 255, 255, 0.959) should only be used in variable declarations; they should be referred to via variable everywhere else.

    background-color: rgba(153, 0, 0, 0.712);

0.712 should be written without a leading zero as .712

Color literals like rgba(153, 0, 0, 0.712) should only be used in variable declarations; they should be referred to via variable everywhere else.

    opacity: 1;

    animation: selectedAnim 0.3s;

0.3 should be written without a leading zero as .3

  }


  &.disabled {

    pointer-events: none;

Properties should be ordered color, pointer-events

    color: rgb(95, 95, 95);

Color literals like rgb(95, 95, 95) should only be used in variable declarations; they should be referred to via variable everywhere else.

    &:hover {

      cursor: default;

    }

  }

}


.arrow {

  font-size: 24px;

}


.paginationForward {

Selector paginationForward should be written in lowercase with hyphens

  animation: paginationForwardAnim 1s;

}


.paginationBackward {

Selector paginationBackward should be written in lowercase with hyphens

  animation: paginationBackwardAnim 1s;

}


@keyframes selectedAnim {

  0% {

    background-color: rgba(153, 0, 0, 0.712);

0.712 should be written without a leading zero as .712

Color literals like rgba(153, 0, 0, 0.712) should only be used in variable declarations; they should be referred to via variable everywhere else.

  }

Rule declaration should be followed by an empty line

  50% {

    background-color: transparent;

  }

Rule declaration should be followed by an empty line

  100% {

    background-color: rgba(153, 0, 0, 0.712);

Color literals like rgba(153, 0, 0, 0.712) should only be used in variable declarations; they should be referred to via variable everywhere else.

0.712 should be written without a leading zero as .712

  }

}


@keyframes paginationForwardAnim {

  from {

    opacity: 0.3;

0.3 should be written without a leading zero as .3

    transform: translateX(50%) skew(-4deg);

  }

Rule declaration should be followed by an empty line

  to {

    opacity: 1;

    transform: translateX(0);

  }

}


@keyframes paginationBackwardAnim {

  from {

    opacity: 0.3;

0.3 should be written without a leading zero as .3

    transform: translateX(-50%) skew(4deg);

  }

Rule declaration should be followed by an empty line

  to {

    opacity: 1;

    transform: translateX(0);

  }

}