support-foo/web

View on GitHub
app/assets/stylesheets/modules/pricing_table.scss

Summary

Maintainability
Test Coverage
.pricing-table {
  max-width: calc(100% + 80px) !important;
  text-align: center;
  border-spacing: 40px 0;
  margin: 0 -40px;
  border-collapse: collapse;

  tr:nth-child(1) td:nth-child(2) {
    color: #82C451;
    font-size: 20px;
    height: 30px;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 20px 0;
  }

  tr:nth-child(n + 2) td:nth-child(2) {
    background-color: #E4F1D9;
  }

  tr:nth-child(2) {

    td {
      padding-top: 20px;
      font-size: 26px;
      font-weight: 300;
      letter-spacing: 2px;
      padding-bottom: 20px;
      text-transform: uppercase;
    }

    div {
      height: 8.5px;
      width: 85%;
      text-align: center;
      margin: 20px auto;
    }

    td:nth-child(1) div {
      background-color: #FFB305;
    }

    td:nth-child(2) div {
      background-color: #82C451;
    }

    td:nth-child(3) div {
      background-color: #3782BA;
    }

    td:nth-child(4) div {
      background-color: #FF5656;
    }
  }

  tr:nth-child(3) {
    h1 {
      font-size: 40px;
      font-weight: 100 !important;
      margin-bottom: 0px;

      font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
    }

    h2 {
      font-size: 40px;
      font-weight: 500 !important;
      margin-top: 0px;
      font-style: italic;
      color: $gray-darker;

      font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
    }

    h3 {
      font-size: 24px;
      font-weight: 100;
      margin-bottom: 0px;

      font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
    }

    h4 {
      font-size: 24px;
      font-weight: 400 !important;
      margin: 0px 0px 40px 0px;
      font-style: italic;

      font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
    }

    a {
      display: inline-block;
      width: 238px;
      height: 63px;
      text-decoration: none;
      border-radius: 5px;
      box-shadow: 0px -2px 0px rgba(0, 0, 0, 0.15) inset;
      color: #ffffff;
      line-height: 61px;
      font-size: 24px;
      margin-bottom: 20px;
    }

    td:nth-child(1) a {
      background: #FFB305;
    }

    td:nth-child(1) a:hover {
      background-color: darken(#FFB305, 3%);
    }

    td:nth-child(2) a {
      background: #82C451;
    }

    td:nth-child(2) a:hover {
      background-color: darken(#82C451, 3%);
    }

    td:nth-child(3) a {
      background: #3782BA;
    }

    td:nth-child(3) a:hover {
      background-color: darken(#3782BA, 3%);
    }

    td:nth-child(4) a {
      background: #FF5656;
    }

    td:nth-child(4) a:hover {
      background-color: darken(#FF5656, 3%);
    }

  }
}