blockscout/apps/explorer_web/assets/css/components/_transactions.scss

.transactions {
  @extend %paper;

  &__container {
    padding: explorer-size(-1) explorer-size(0);
    & + & { padding-top: 0; }
    &--title { padding-top: explorer-size(0); }
  }

  &__headline-title,
  &__title {
    @include explorer-typography("title");
    color: explorer-color("slate", "900");
  }

  &__title { margin: 0; }

  &__table {
    @extend %table;
    @include explorer-typography("body1");
    color: explorer-color("slate", "900");

    & > thead > tr > th.transactions__column-header--status {
      border-bottom: 0 none;
    }
  }

  &__column-header { @include explorer-typography("body1"); }
  &__column-title {
    &--status { display: none; }
  }
  &__link {
    color: explorer-color("blue", "500");

    &--truncated {
      display: inline-block;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }

    &--next-page {
      @include explorer-typography("body1");
      display: block;
      text-align: center;
      padding: explorer-size(-1) 0;
      border-top: 1px solid explorer-color("slate", "50");
    }

    &--long-hash { max-width: explorer-size(2); }
    &--hash { max-width: explorer-size(2); }
  }

  &__pagination {
    margin: explorer-size(-1) 0 explorer-size(-2) 0;
    .pagination { text-align: right; }
  }

  &__column-header {
    &--optional { display: none; }
  }

  &__column {
    &--status {
      width: explorer-size(-1);
      text-align: center;
    }
    &--optional { display: none; }
  }

  &__tabs { @extend %section-tabs; }

  &__tab {
    @extend %section-tabs__tab;
    &--active { @extend %section-tabs__tab--active; }
  }

  &__tab-link {
    color: explorer-color("blue", "500");
    text-decoration: none;
    &--active { color: explorer-color("slate", "900"); }
  }

  &__hash-container { height: 1rem; }

  &__dot {
    @extend %dot;
    vertical-align: baseline;
    &--pending { @extend %dot--pending; }
    &--success { @extend %dot--succeeded; }
    &--failed { @extend %dot--failed; }
    &--out_of_gas { @extend %dot--warned; }
  }
}

@media (min-width: $explorer-breakpoint-sm) {
  .transactions {
    &__link {
      &--long-hash { max-width: explorer-size(3); }
      &--hash { max-width: explorer-size(1); }
    }
  }
}

@media (min-width: $explorer-breakpoint-md) {
  .transactions {
    &__headline {
      display: flex;
      align-items: center;
      justify-content: center;
    }
    &__headline-title { flex: 1; }
    &__pagination {
      margin: explorer-size(-1) 0 explorer-size(-2) 0;
    }
    &__link {
      &--long-hash { max-width: explorer-size(4); }
      &--hash { max-width: explorer-size(3); }
    }
  }
}

@media (min-width: $explorer-breakpoint-lg) {
  .transactions {
    &__link {
      &--long-hash { max-width: explorer-size(5); }
      &--hash { max-width: explorer-size(4); }
    }
  }
}

@media (min-width: $explorer-breakpoint-xl) {
  .transactions {
    &__column-header {
      &--optional { display: table-cell; }
    }
    &__column {
      &--optional { display: table-cell; }
    }
    &__link {
      &--long-hash { max-width: explorer-size(5); }
      &--hash { max-width: explorer-size(4); }
    }
  }
}