xrpl-dev-portal/styles/_helpers.scss

/* HEIGHT AND WIDTH HELPERS */
.h32 {
  height: 32px;
}
.w32 {
  width: 32px;
}
.h36 {
  height: 36px;
}
.w36 {
  width: 36px;
}
.h40 {
  height: 40px;
}
.w40 {
  width: 40px;
}
.w44 {
  width: 44px;
}
.w48 {
  width: 48px;
}
.min-vh100 {
  min-height: 100vh;
}
.vw100 {
  width: 100vw;
  min-width: 100%;
}

/* SPACING HELPERS */
/* To create new margin classes, multiply by 4px */
.mb-8 {
  margin-bottom: 2rem;
}
.mt-8 {
  margin-top: 2rem;
}
.mt-9 {
  margin-top: 2.25rem;
}
.mb-9 {
  margin-bottom: 2.25rem;
}
.mt-10 {
  margin-top: 2.5rem;
}
.mb-10 {
  margin-bottom: 2.5rem;
}
.my-10 {
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}
.mt-12 {
  margin-top: 3rem;
}
.mb-12 {
  margin-bottom: 3rem;
}
.my-12 {
  margin-top: 3rem;
  margin-bottom: 3rem;
}
.mt-13 {
  margin-top: 3.25rem;
}
.mb-13 {
  margin-bottom: 3.25rem;
}
.mt-14 {
  margin-top: 3.5rem;
}
.mt-16 {
  margin-top: 4rem;
}
.mb-16 {
  margin-bottom: 4rem;
}
.mb-18 {
  margin-bottom: 4.5rem;
}
.mt-20 {
  margin-top: 5rem;
  &-sm {
    @include media-breakpoint-down(sm) {
      margin-top: 5rem;
    }
  }
  &-until-sm {
    @include media-breakpoint-up(sm) {
      margin-top: 5rem;
    }
  }
}
.mb-20 {
  margin-bottom: 5rem;
  &-until-sm {
    @include media-breakpoint-up(sm) {
      margin-bottom: 5rem;
    }
  }
}
.my-20 {
  margin-top: 5rem;
  margin-bottom: 5rem;
}
.mb-30 {
  margin-bottom: 7.5rem;
}
.mt-30 {
  margin-top: 7.5rem;
  &-until-sm {
    @include media-breakpoint-up(sm) {
      margin-top: 7.5rem;
    }
  }
}
.mt-40 {
  margin-top: 10rem;
  &-until-sm {
    @include media-breakpoint-up(sm) {
      margin-top: 10rem;
    }
  }
}
.mb-40 {
  margin-bottom: 10rem;
  &-until-sm {
    @include media-breakpoint-up(sm) {
      margin-bottom: 10rem;
    }
  }
}
.mb-49 {
  margin-bottom: 12.25rem;
}
.mb-50 {
  margin-bottom: 12.5rem;
  &-until-sm {
    @include media-breakpoint-up(sm) {
      margin-bottom: 12.5rem;
    }
  }
}
.py-20 {
  padding-bottom: 5rem;
  padding-top: 5rem;
}
.pt-20 {
  padding-top: 5rem;
}
.pb-20 {
  padding-bottom: 5rem;
}
.pt-30 {
  padding-top: 7.5rem;
}
.pb-30 {
  padding-bottom: 7.5rem;
}
.pt-40 {
  padding-top: 10rem;
  &-until-sm {
    @include media-breakpoint-up(sm) {
      padding-top: 10rem;
    }
  }
}
.pb-40 {
  padding-bottom: 10rem;
}
.pb-50 {
  padding-bottom: 12.5rem;
}
.pt-50 {
  padding-top: 12.5rem;
}
.py-50 {
  padding-bottom: 12.5rem;
  padding-top: 12.5rem;
  &-until-sm {
    @include media-breakpoint-up(sm) {
      padding-bottom: 12.5rem;
      padding-top: 12.5rem;
    }
  }
}
.top-10 {
  top: 2.5rem;
}
.last-section {
  margin-bottom: 100px;
}
.bottom-0 {
  bottom: 0;
}
.justify-center {
  justify-content: center;
  &-sm {
    @include media-breakpoint-down(sm) {
      justify-content: center;
    }
  }
}
@include media-breakpoint-down(xs) {
  .overflow-xs {
    overflow: scroll;
  }
  .overflow-x-xs {
    overflow-x: scroll;
    overflow-y: hidden;
  }
}
@include media-breakpoint-up(md) {
  .position-sm-absolute {
    position: absolute;
  }
}

/*  TEXT HELPERS */
.va-middle {
  vertical-align: middle;
}
.ls-none {
  list-style: none;
}
.no-wrap {
  white-space: nowrap;
}
.align-items-stretch {
  align-items: stretch;
}
.underline {
  text-decoration: underline;
}

/*  DISPLAY HELPERS */
.d-none-xs {
  @include media-breakpoint-down(xs) {
    display: none;
  }
}
.d-none-sm {
  @include media-breakpoint-down(sm) {
    display: none;
  }
}

/* COLOR ELEMENTS */
.border-green {
  border: 1px solid $primary;
}
.border-none {
  border: none !important;
}
.grey-400 {
  color: $gray-400;
}
.grey-500 {
  color: $gray-500;
}
.grey-700 {
  color: $gray-700;
}