_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;
}
.w-100 {
  width: 100%;
}
.min-vh100 {
  min-height: 100vh;
}
.vw100 {
  width: 100vw;
  min-width: 100%;
}

/* SPACING HELPERS */
/* To create new margin classes, multiply by 4px then divide by 16 */
/* Exceptions with 1 - 5 since those are stock with Bootstrap */
.mb-3-sm-i {
  @include media-breakpoint-down(sm) {
    margin-bottom: 1rem !important;
  }
}
.ml-5 {
  margin-left: 1.25rem;
  &-until-md {
    @include media-breakpoint-up(md) {
      margin-left: 1.25rem;
    }
  }
}
.mr-5 {
  margin-right: 1.25rem;
  &-until-md {
    @include media-breakpoint-up(md) {
      margin-right: 1.25rem;
    }
  }
}
.mb-6 {
  margin-bottom: 1.5rem;
  &-sm {
    @include media-breakpoint-down(sm) {
      margin-bottom: 1.5rem;
    }
  }
}
.mt-6 {
  margin-top: 1.5rem;
  &-until-sm {
    @include media-breakpoint-up(sm) {
      margin-top: 1.5rem !important;
    }
  }
}
.mb-8 {
  margin-bottom: 2rem;
  &-sm {
    @include media-breakpoint-down(sm) {
      margin-bottom: 2rem;
    }
  }
}
.mt-8 {
  margin-top: 2rem;
  &-until-sm {
    @include media-breakpoint-up(sm) {
      margin-top: 2rem !important;
    }
  }
}
.mt-9 {
  margin-top: 2.25rem;
}
.mb-9 {
  margin-bottom: 2.25rem;
}
.mt-10 {
  margin-top: 2.5rem;
  &-sm {
    @include media-breakpoint-down(sm) {
      margin-top: 2.5rem;
    }
  }
}
.mb-10 {
  margin-bottom: 2.5rem;
  &-until-sm {
    @include media-breakpoint-up(sm) {
      margin-bottom: 2.5rem;
    }
  }
  &-sm {
    @include media-breakpoint-down(sm) {
      margin-bottom: 2.5rem;
    }
  }
}
.ml-10 {
  margin-left: 2.5rem;
}
.mr-10 {
  margin-right: 2.5rem;
}
.my-10 {
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}
.mx-10 {
  margin-left: 2.5rem;
  margin-right: 2.5rem;
  &-until-sm {
    @include media-breakpoint-up(sm) {
      margin-left: 2.5rem;
      margin-right: 2.5rem;
    }
  }
  &-until-md {
    @include media-breakpoint-up(md) {
      margin-left: 2.5rem;
      margin-right: 2.5rem;
    }
  }
  &-sm {
    @include media-breakpoint-down(sm) {
      margin-left: 2.5rem;
      margin-right: 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;
  &-sm {
    @include media-breakpoint-down(sm) {
      margin-top: 4rem;
    }
  }
}
.mb-16 {
  margin-bottom: 4rem;
  &-sm {
    @include media-breakpoint-down(sm) {
      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;
  &-sm {
    @include media-breakpoint-down(sm) {
      margin-bottom: 5rem;
    }
  }
  &-until-sm {
    @include media-breakpoint-up(sm) {
      margin-bottom: 5rem;
    }
  }
}
.my-20 {
  margin-top: 5rem;
  margin-bottom: 5rem;
}
.my-26 {
  margin-top: 6.5rem;
  margin-bottom: 6.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;
    }
  }
}
.pl-0-sm {
  @include media-breakpoint-down(sm) {
    padding-left: 0 !important;
  }
}
.pr-0-sm {
  @include media-breakpoint-down(sm) {
    padding-right: 0 !important;
  }
}
.pt-3-sm {
  @include media-breakpoint-down(sm) {
    padding-top: 1rem !important;
  }
}
.p-6 {
  padding: 1.5rem;
  &-sm {
    @include media-breakpoint-down(sm) {
      padding: 1.5rem;
    }
  }
}
.p-8 {
  padding: 2rem;
  &-sm {
    @include media-breakpoint-down(sm) {
      padding: 2rem;
    }
  }
}
.p-10 {
  padding: 2.5rem;
  &-until-sm {
    @include media-breakpoint-up(sm) {
      padding: 2.5rem;
    }
  }
}
.py-20 {
  padding-bottom: 5rem;
  padding-top: 5rem;
}
.px-20 {
  padding-left: 5rem;
  padding-right: 5rem;
}
.pt-20 {
  padding-top: 5rem;
}
.pb-20 {
  padding-bottom: 5rem;
}
.py-26 {
  padding-top: 6.5rem;
  padding-bottom: 6.5rem;
  @include media-breakpoint-down(sm) {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }
}
.pt-26 {
  padding-top: 2.5rem;
  &-until-sm {
    @include media-breakpoint-up(sm) {
      padding-top: 6.5rem;
    }
  }
}
.pb-26 {
  padding-bottom: 6.5rem;
  &-until-sm {
    @include media-breakpoint-up(sm) {
      padding-bottom: 6.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;
    }
  }
}
.floating-nav {
  top: 6rem;
}
.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;
  }
}
.d-block {
  display: block;
}

/* 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;
}
.white {
  color: $white;
}

.stat-highlight {
  color: $green-500;
}

/* ETC */
.br-8 {
  border-radius: 8px;
}
br {
  @include media-breakpoint-down(sm) {
    &.until-sm {
      content: '';
    }
  }
}
.z-index-1 {
  z-index: 1;
}
.bb-gray {
  border-bottom: 1px solid $gray-600;
}

// Arrow bouncing animation
@keyframes arrowDance {
  0% { padding-left: 7px; }
  50% { padding-left: 14px; }
  100% { padding-left: 7px; }
}

// Alt version for elements absolute-positioned to the right
@keyframes arrowDance2 {
  0% { right: 0; }
  50% { right: 7px; }
  100% { right: 0; }
}

// Diagonal up-right arrow bouncing (also for absolute-positioned to the right)
@keyframes arrowDanceDiag {
  0% { right: 7px; margin-top: 0; }
  50% { right: 0; margin-top: -7px; }
  100% { right: 7px; margin-top: 0; }
}