gitcoinco/code_fund_ads

View on GitHub
app/javascript/advertisements/sponsored-text/theme.scss

Summary

Maintainability
Test Coverage
ins#cf[data-template='sponsored-text'][data-theme='dark'] {
  text-decoration: none !important;
  color: #aaaaaa;
  line-height: 1.7;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;

  span.cf-wrapper {
    a {
      color: #3498db;
      background-color: transparent;
      cursor: pointer;
      text-decoration: none !important;
      box-shadow: none !important;
    }

    .img,
    svg {
      vertical-align: middle;
      position: relative;
    }

    a.cf-cta {
      b {
        text-decoration: underline;
      }
    }
  }

  a.cf-powered-by {
    color: #6c757e;
    font-size: 12px;
    text-decoration: none !important;
    position: relative;
    display: inline-block;

    /* Tooltip text */
    .tooltiptext {
      visibility: hidden;
      width: 140px;
      color: #cccccc;
      text-align: center;
      padding: 0;
      /* Position the tooltip text - see examples below! */
      position: absolute;
      left: 4px;
      z-index: 1;
    }

    /* Show the tooltip text when you mouse over the tooltip container */
    &:hover {
      .tooltiptext {
        visibility: visible !important;
      }
    }
  }
}

ins#cf[data-template='sponsored-text'][data-theme='light'] {
  text-decoration: none !important;
  color: #6c757e;
  line-height: 1.7;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;

  .cf-wrapper {
    a {
      color: #3498db;
      background-color: transparent;
      cursor: pointer;
      text-decoration: none !important;
      box-shadow: none !important;
    }

    img,
    svg {
      vertical-align: middle;
      position: relative;
    }

    .cf-cta {
      b {
        text-decoration: underline;
      }
    }
  }
  a.cf-powered-by {
    color: #aaaaaa;
    text-decoration: none !important;
    position: relative;
    display: inline-block;
    font-size: 12px;

    /* Tooltip text */
    .tooltiptext {
      visibility: hidden;
      width: 140px;
      color: #aaaaaa;
      text-align: center;
      padding: 5px 0;
      /* Position the tooltip text - see examples below! */
      position: absolute;
      top: -4px;
      left: 4px;
      z-index: 1;
    }

    /* Show the tooltip text when you mouse over the tooltip container */
    &:hover {
      .tooltiptext {
        visibility: visible !important;
      }
    }
  }
}