kodadot/nft-gallery

View on GitHub
assets/styles/components/_carousel.scss

Summary

Maintainability
Test Coverage
.carousel-agnostic {
  @import './carousel-arrows';
  .keen-slider {
    padding-bottom: 16px;
  }

  .carousel-item {
    a:hover {
      color: unset !important;
    }
    @include ktheme() {
      background: theme('background-color');
      border: 1px solid theme('card-border-color');
      &:hover {
        border-color: theme('border-color');
        .carousel-media {
          opacity: theme('card-hover-opacity');
        }
      }
    }
  }

  .carousel-media {
    display: grid;
    align-items: center;
    @include ktheme() {
      border-bottom: 1px solid theme('card-border-color');
    }
    &-collection {
      border-bottom: none !important;
      padding: 16px 16px 0 16px;

      a {
        @include ktheme() {
          border: 1px solid theme('card-border-color');
        }

        display: block;
      }
    }

    &-wrapper {
      box-shadow: none !important;
      border: none !important;
    }
  }

  .carousel-info-arrow {
    font-family: 'Fira Code', monospace;
  }

  .dots {
    display: flex;
    padding: 32px 0;
    justify-content: center;

    @media screen and (max-width: 640px) {
      display: none;
    }
  }

  .dot {
    @apply w-2.5 h-2.5 cursor-pointer mx-3 my-0 p-[5px] border-[none];

    &:focus {
      outline: none;
    }

    @include ktheme() {
      background: theme('k-shade');
      &.active {
        background: theme('k-grey');
      }
    }
  }
}