gitcoinco/code_fund_ads

View on GitHub
app/javascript/themes/current/stylesheets/utilities.scss

Summary

Maintainability
Test Coverage
// =========== Mixins ===========
@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
  $max: breakpoint-max($name, $breakpoints);
  @if $max {
    @media (max-width: $max) {
      @content;
    }
  } @else {
    @content;
  }
}

.bg-success-light {
  background-color: #e7faf2;
}

// =========== Opacity ===========
.opacity-0 {
  opacity: 0 !important;
}
.opacity-10 {
  opacity: 0.1 !important;
}
.opacity-20 {
  opacity: 0.2 !important;
}
.opacity-30 {
  opacity: 0.3 !important;
}
.opacity-40 {
  opacity: 0.4 !important;
}
.opacity-50 {
  opacity: 0.5 !important;
}
.opacity-60 {
  opacity: 0.6 !important;
}
.opacity-70 {
  opacity: 0.7 !important;
}
.opacity-80 {
  opacity: 0.8 !important;
}
.opacity-90 {
  opacity: 0.9 !important;
}
.opacity-100 {
  opacity: 1 !important;
}

// =========== Cursor ===========
.cursor-pointer {
  cursor: pointer !important;
}

// =========== Sizing ===========
@each $size in (10, 20, 30, 40, 50, 60, 70, 80, 90) {
  .min-height-lg-#{$size}vh {
    min-height: #{$size}vh;
  }
}

// =========== Text ===========
@each $opacity in (10, 20, 30, 40, 50, 60, 70, 80, 90) {
  .text-black-#{$opacity} {
    color: rgba(0, 0, 0, ($opacity/100));
  }
}

.code {
  font-family: monospace;
  color: $code-text-color;
  word-break: break-word;
  font-size: 1.25em;
}

.leading-relaxed {
  line-height: 1.625 !important;
}

.leading-loose {
  line-height: 2 !important;
}

// =========== Grid ===========
.grid {
  display: grid;
  grid-gap: 10px;
}

.grid-tcolumns-400 {
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
}

.grid-tcolumns-300 {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.grid-trows-200 {
  grid-template-rows: repeat(auto-fit, minmax(200px, 1fr));
}

// =========== Buttons ===========
@include media-breakpoint-down(sm) {
  .btn-block-sm-only {
    display: block;
    width: 100%;
  }
}