kodadot/nft-gallery

View on GitHub
assets/styles/components/_connect-wallet.scss

Summary

Maintainability
Test Coverage
@import '@/assets/styles/abstracts/variables';

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.connect-wallet-modal {
  .modal-content {
    border: none !important;
  }
  .modal-background {
    background-color: rgba(0, 0, 0, 0.17) !important;
  }

  .wallet-modal-container {
    position: fixed;
    top: 0;
    right: 0;
    height: calc(100% - $navbar-desktop-min-height) ;
    margin-top: $navbar-desktop-min-height;
    max-width: 360px;
    width: 100%;

    @include mobile {
      inset: 0;
      border-left: none !important;
      max-width: 100vw;
      height: calc(100% - $navbar-mobile-min-height) ;
      margin-top: $navbar-mobile-min-height;
    }
    @include ktheme() {
      background: theme('background-color');
      border-left: 1px solid theme('border-color');
    }

    .modal-card-body {
      padding: 0;
      display: block;
      @include ktheme() {
        background-color: theme('background-color');
      }

      hr {
        @apply bg-k-shade2 #{!important};
      }  
    }

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

    .confirm-button {
      width: 100%;
      height: 2.2rem;
      font-size: 1rem;
    }

    .wallet-menu-item {
      width: 100%;
      .button {
        @apply w-full text-xl rounded-none border-none transition-none;
        background: unset;
        box-shadow: none !important;
        > span {
          flex: 1;
        }
        .icon {
          margin-right: 0 !important;
        }
        @include ktheme() {
          color: theme('text-color');
          &:hover {
            background-color: theme('k-accentlight2') !important;
          }
        }
      }
      .auth-tip {
        margin: 0 2rem;
        @include ktheme() {
          color: theme('text-color');
          border-left: 1px solid theme('k-shade');
        }
        i {
          animation: rotate 1s linear infinite;
        }
      }
      .account-list {
        .account-item {
          padding: 10px 0;
          margin: 0 2rem;
          a {
            @include ktheme() {
              color: theme('text-color');
              border-left: 1px solid theme('k-shade');

              &:hover {
                color: theme('text-color');
              }
            }

            .account-name {
              line-height: 14px;
            }
            .account-address {
              line-height: 19px;
            }
          }
          &:hover {
            @include ktheme() {
              background-color: theme('k-accentlight2') !important;
            }
          }
        }
      }
    }

    section {
      height: 100%;
      overflow-y: auto;
    }
  }

  .wallet-asset {
    height: 100%;

    &-container {
      padding: 0 2rem;
    }

    .identity-address a {
      font-weight: normal !important;
      @include ktheme() {
        color: theme('k-blue') !important;
      }
    }
  }
}

.modal-card-title {
  @include ktheme() {
    color: theme('text-color');
  }
}