gistfile1.txt

  
  // for desktop (notes: @ab_test_class is a variable to determine the style and this is how i do it in front-end, and the values are       // v1,v2,v3,v4 and you can refer the styles below)
  <% if @ab_aff_calc %>
    <% unless is_mobile? %>
      <div id="vu-get-preapproved" class="col-xxs-12 <%= @ab_test_class %>-vu-get-preapproved">
        <div class="<%= @ab_test_class %>-vu-get-preapproved-text">Veterans: Get Preapproved for a $0 down VA Loan</div>
      </div>
    <% end %>    
  <% end %>    
  
  // for mobile
    <a id="mobile-vu-get-preapproved">Veterans: Get Preapproved for a $0 down VA Loan</a>
  
  // CSS for desktop
    #vu-get-preapproved {
      margin-bottom: -12px;
      text-align: center;
      padding-top: 13px;
      height: 45px;
      width: 100.5%;
      margin-left: -1px;
      border-radius: 0px 0px 4px 4px;
      cursor: pointer;
    }
    .v1-vu-get-preapproved, .v3-vu-get-preapproved {
      background-color: white !important;
      border: 1px solid #C2C2C6;
      .v1-vu-get-preapproved-text, .v3-vu-get-preapproved-text {
        color: #0099cc !important;
      }
    }
    .v2-vu-get-preapproved, .v4-vu-get-preapproved {
      background-color: rgb(174, 31, 36) !important;
      .v2-vu-get-preapproved-text, .v4-vu-get-preapproved-text {
        color: white !important;
      }
    }

  // CSS for mobile
  
    #mobile-vu-get-preapproved {
      margin-bottom: 16px;
      display: block;
    }