gitcoinco/code_fund_ads

View on GitHub
app/javascript/advertisements/media/theme.scss

Summary

Maintainability
Test Coverage
div#cf[data-template='media'] {
  margin: 0 auto;

  span.cf-wrapper {
    display: flex;
    font-size: 14px;
    line-height: 17px;
    text-align: left;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;

    a {
      text-decoration: none;
    }

    a.cf-img-wrapper {
      flex: 0 0 60px;

      img.cf-img {
        border-radius: 5px;
        position: relative;
      }
    }

    a.cf-text {
      font-weight: 350;
      letter-spacing: 0.5px;

      strong {
        font-weight: bold;
        display: block;
        font-weight: 500;
        letter-spacing: -0.1px;
        margin-bottom: 2px;
      }

      span.cf-link {
        text-decoration: underline;
        font-weight: 400;
      }
    }

    a.cf-powered-by {
      display: block;
      font-size: 11px;
      margin-top: 5px;
      font-weight: 350;
    }
  }

  &[data-theme='dark'] {
    $text-color: rgba(255, 255, 255, 0.8);
    $bold-text-color: #ffffff;
    $link-color: #ffffff;
    $powered-by-color: rgba(255, 255, 255, 0.5);

    span.cf-wrapper {
      a.cf-text {
        color: $text-color;
        strong {
          color: $bold-text-color;
        }
        span.cf-link {
          color: $link-color;
        }
      }

      a.cf-powered-by {
        color: $powered-by-color;
      }
    }
  }

  &[data-theme='light'] {
    $text-color: rgba(0, 0, 0, 0.8);
    $bold-text-color: rgba(0, 0, 0, 0.8);
    $link-color: #2c6ac7;
    $powered-by-color: rgba(0, 0, 0, 0.5);

    span.cf-wrapper {
      a.cf-text {
        color: $text-color;
        strong {
          color: $bold-text-color;
        }
        span.cf-link {
          color: $link-color;
        }
      }

      a.cf-powered-by {
        color: $powered-by-color;
      }
    }
  }
}