kodadot/nft-gallery

View on GitHub
assets/styles/components/_gallery-item.scss

Summary

Maintainability
Test Coverage
.gallery-avatar {
  .avatar {
    @apply rounded-[50%];
    & > div {
      display: flex;
      align-items: center;
    }

    @include ktheme() {
      box-shadow: theme('primary-shadow');
      border: 1px solid theme('border-color');
    }
  }
}

.gallery-parent-item {
  max-height: 240px;
  max-width: 240px;
  margin: 0 auto;

  &__name {
    padding-top: 0.25rem;
    width: fit-content;
    margin: 0 auto;
  }
}

.gallery-item {
  .media-object {
    @include ktheme() {
      box-shadow: theme('primary-shadow');
      border: 1px solid theme('border-color');
    }
  }
}

.gallery-item-desc-markdown {
  pre {
    background-color: transparent;
    margin: 1rem 0;
    white-space: pre-wrap;
    @include ktheme() {
      border: 1px solid theme('k-shade');
      color: theme('k-shade');
    }
  }

  a {
    @include ktheme() {
      color: theme('k-blue') !important;
      &:hover {
        color: theme('k-blue-hover') !important;
      }
    }
  }

  word-break: 'break-word';
}

.buy-tooltip {
  width: max-content!important;
  &.o-tip__content--top {
    // o-tip__content--top is for the mobile
    // calc base on the cart-icon and button padding
    transform: translateX(calc(-50% + 16px + 0.75rem));
    .o-tip__arrow{
      transform: translateX(calc(-50% - 16px - 0.75rem));
    }
  }
  a {
    @apply cursor-pointer;
    @include ktheme() {
      color: theme('k-blue') !important;
      &:hover {
        color: theme('k-blue-hover') !important;
      }
    }
  }
}

.gallery-item-disabled {
  @include ktheme() {
    box-shadow: 4px 4px theme('k-grey');
    width: 10rem;
  }

  .o-tip,
  .is-neo {
    height: 3.375rem;
    width: 100%;
  }
}