Skip to content
Browse files

remove elements and tend toward divitis, it's less prone to break in …

…the wild where people have lots of global styles, cleaned up the stylesheet some more, also a couple of little bugs
  • Loading branch information...
1 parent b8518e1 commit 145a74763ec1cd89b77c5b36d9e8e2c3c46acff8 @em em committed Jul 23, 2011
Showing with 127 additions and 170 deletions.
  1. +33 −49 recurly.css
  2. +41 −41 recurly.js
  3. +53 −80 recurly.styl
View
82 recurly.css
@@ -93,23 +93,23 @@
.recurly .vat.applicable {
display: block;
}
-.recurly .vat label {
- font-size: 18px;
+.recurly .vat .title {
+ font-size: 16px;
font-weight: normal;
float: left;
}
.recurly .vat .cost {
float: right;
font-size: 18px;
}
-.recurly ul.add_ons {
+.recurly .add_ons {
clear: both;
margin: 0;
}
-.recurly ul.add_ons.any {
+.recurly .add_ons.any {
padding: 10px;
}
-.recurly ul.add_ons li {
+.recurly .add_ons .add_on {
background: -webkit-linear-gradient(top, #ecedee, #e5e6e7);
background: -moz-linear-gradient(top, #ecedee, #e5e6e7);
background: -o-linear-gradient(top, #ecedee, #e5e6e7);
@@ -134,16 +134,16 @@
-o-user-select: none;
user-select: none;
}
-.recurly ul.add_ons li:first-child {
+.recurly .add_ons .add_on:first-child {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
-.recurly ul.add_ons li:last-child {
+.recurly .add_ons .add_on:last-child {
border-bottom: 1px solid #ccc;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
-.recurly ul.add_ons li .name {
+.recurly .add_ons .add_on .name {
font-size: inherit;
font-weight: inherit;
color: inherit;
@@ -153,16 +153,16 @@
margin-right: 20px;
font-style: italic;
}
-.recurly ul.add_ons li .quantity.field {
+.recurly .add_ons .add_on .quantity.field {
clear: none;
margin: 4px 0;
width: 60px;
display: none;
}
-.recurly ul.add_ons li .quantity.field input {
+.recurly .add_ons .add_on .quantity.field input {
width: 48px;
}
-.recurly ul.add_ons li .quantity.field:before {
+.recurly .add_ons .add_on .quantity.field:before {
content: "\d7";
height: 48px;
line-height: 30px;
@@ -175,14 +175,14 @@
z-index: 1337;
color: #666;
}
-.recurly ul.add_ons li .cost {
+.recurly .add_ons .add_on .cost {
float: right;
margin: 0px 10px 0px 55px;
font-size: inherit;
line-height: inherit;
vertical-align: middle;
}
-.recurly ul.add_ons li:hover {
+.recurly .add_ons .add_on:hover {
background: -webkit-linear-gradient(top, #f0f0f0 0%, #dfdfdf 50%, #d5d5d5 50%, #e0e0e0 100%);
background: -moz-linear-gradient(top, #f0f0f0 0%, #dfdfdf 50%, #d5d5d5 50%, #e0e0e0 100%);
background: -o-linear-gradient(top, #f0f0f0 0%, #dfdfdf 50%, #d5d5d5 50%, #e0e0e0 100%);
@@ -191,8 +191,8 @@
text-shadow: none;
color: #111;
}
-.recurly ul.add_ons li:active,
-.recurly ul.add_ons li.selected {
+.recurly .add_ons .add_on:active,
+.recurly .add_ons .add_on.selected {
color: #111;
background: -webkit-linear-gradient(top, #f0f0f0, #fff);
background: -moz-linear-gradient(top, #f0f0f0, #fff);
@@ -202,14 +202,14 @@
box-shadow: inset 0 1px 4px 0 rgba(0,0,0,0.075);
text-shadow: none;
}
-.recurly ul.add_ons li.selected {
+.recurly .add_ons .add_on.selected {
background: #fff url("images/check.png") no-repeat 10px center;
padding-left: 24px;
}
-.recurly ul.add_ons li.selected:hover {
+.recurly .add_ons .add_on.selected:hover {
background: #fcf5f0 url("images/uncheck.png") no-repeat 10px center;
}
-.recurly ul.add_ons li.selected .quantity {
+.recurly .add_ons .add_on.selected .quantity {
display: block;
}
.recurly .coupon {
@@ -421,12 +421,13 @@
.recurly .field.expires input {
width: 288px;
}
-.recurly .field.expires label {
+.recurly .field.expires .title {
float: left;
+ font-size: 13px;
line-height: 24px;
vertical-align: middle;
}
-.recurly .field.expires label:after {
+.recurly .field.expires .title:after {
content: ":";
}
.recurly .field.expires .month {
@@ -480,15 +481,14 @@
margin-left: 0;
clear: left;
}
-.recurly ul.accepted_cards {
+.recurly .accepted_cards {
float: right;
margin: 0;
padding: 0;
margin-right: 160px;
width: 160px;
- list-style-type: none;
}
-.recurly ul.accepted_cards li {
+.recurly .card {
background-position: right 0px;
background-repeat: no-repeat;
text-indent: -3000px;
@@ -498,35 +498,27 @@
padding: 0;
float: left;
}
-.recurly ul.accepted_cards li.mastercard {
+.recurly .card.mastercard {
background-image: url("images/credit_cards/mastercard.png");
}
-.recurly ul.accepted_cards li.american_express {
+.recurly .card.american_express {
background-image: url("images/credit_cards/amex.png");
}
-.recurly ul.accepted_cards li.visa {
+.recurly .card.visa {
background-image: url("images/credit_cards/visa.png");
}
-.recurly ul.accepted_cards li.discover {
+.recurly .card.discover {
background-image: url("images/credit_cards/discover.png");
}
-.recurly ul.accepted_cards li.no_match {
+.recurly .card.no_match {
opacity: 0.5;
}
-.recurly label {
- display: block;
- font-size: 13px;
- color: #333;
- font-weight: bold;
-}
.recurly input,
-.recurly textarea,
.recurly select {
vertical-align: middle;
color: #000;
}
.recurly input.invalid,
-.recurly textarea.invalid,
.recurly select.invalid {
border-color: #a55;
background: #fee;
@@ -609,10 +601,10 @@
background: -moz-linear-gradient(top, #fecd00, #ce7b00);
cursor: pointer;
}
-.recurly button.submit hover {
+.recurly button.submit:hover {
color: #555;
}
-.recurly button.submit active {
+.recurly button.submit:active {
top: 2px;
color: #302106;
text-shadow: rgba(255,255,255,0.5694) 0 -1px 0;
@@ -628,9 +620,8 @@
height: 46px;
max-width: 600px;
padding: 0 10px;
- font-size: 15px;
font-weight: 700;
- color: #555 !important;
+ color: #555;
text-shadow: rgba(255,255,255,0.5694) 0 1px 0;
text-align: center;
opacity: 0.75;
@@ -642,16 +633,9 @@
-webkit-user-select: none;
-moz-user-select: -moz-none;
outline: none;
- background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#dbd9d2), to(#999)) !important;
- background: -moz-linear-gradient(top, #dbd9d2, #999) !important;
+ background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#dbd9d2), to(#999));
+ background: -moz-linear-gradient(top, #dbd9d2, #999);
-webkit-background-clip: padding-box;
-webkit-box-shadow: rgba(255,255,255,0.69) 0px 1px 0px inset, rgba(0,0,0,0.26) 0px 2px 3px;
box-shadow: rgba(255,255,255,0.699219) 0px 1px 0px inset, rgba(0,0,0,0.269219) 0px 2px 3px;
}
-.recurly button.submit span {
- font-weight: 500;
- font-size: 13px;
-}
-.recurly button.submit:hover {
- color: #555;
-}
View
82 recurly.js
@@ -1049,37 +1049,6 @@ function initBillingInfoForm($form, options) {
});
- // == VAT
- var $vat = $form.find('.vat');
- var $vatNumber = $form.find('.vat_number');
- var $vatNumberInput = $vatNumber.find('input');
-
- $vat.find('label').text('VAT at ' + R.settings.VATPercent + '%');
- function showHideVAT() {
- var buyerCountry = $form.find('.country select').val();
- var applicable = R.isVATApplicable(buyerCountry);
- var vatNumber = $vatNumberInput.val();
-
- $vatNumber.toggleClass('applicable', applicable);
- $vatNumber.toggleClass('inapplicable', !applicable);
-
- applicable = applicable && !vatNumber;
- $vat.toggleClass('applicable', applicable);
- $vat.toggleClass('inapplicable', !applicable);
- }
- showHideVAT();
- $form.find('.country select').change(function() {
- billingInfo.country = $(this).val();
- updateTotals();
- showHideVAT();
- });
- $vatNumberInput.bind('keyup change', function() {
- billingInfo.vatNumber = $(this).val();
- updateTotals();
- showHideVAT();
- });
-
-
}
R.buildAccountUpdateForm = function(options) {
@@ -1115,7 +1084,6 @@ R.buildSubscribeForm = function(options) {
initCommonForm($form, options);
- initBillingInfoForm($form, options);
R.getPlan(options.plan, function(plan) {
var subscription = plan.makeSubscription(),
@@ -1126,6 +1094,7 @@ R.buildSubscribeForm = function(options) {
subscription.billingInfo = billingInfo;
+ initBillingInfoForm($form, options, billingInfo);
// == EDITABLE PLAN QUANTITY
if(!plan.displayQuantity) {
@@ -1161,7 +1130,7 @@ R.buildSubscribeForm = function(options) {
$form.find('.coupon .discount').text('' + (totals.coupon || ''));
$form.find('.vat .cost').text('' + (totals.vat || ''));
- $form.find('ul.add_ons li').each(function() {
+ $form.find('.add_ons .add_on').each(function() {
var addOn = $(this).data('add_on');
if($(this).hasClass('selected')) {
var cost = totals.addOns[addOn.code];
@@ -1193,14 +1162,14 @@ R.buildSubscribeForm = function(options) {
for(var i=0; i < l; ++i) {
var addOn = plan.addOns[i];
- var $addOn = $('<li class="add_on_'+ addOn.code + ' ' + (i % 2 ? 'even' : 'odd') +'">' +
+ var $addOn = $('<div class="add_on add_on_'+ addOn.code + ' ' + (i % 2 ? 'even' : 'odd') +'">' +
'<label class="name">'+addOn.name+'</label>' +
'<div class="field quantity">' +
'<label class="placeholder">Qty</label>' +
'<input type="text">' +
'</div>' +
'<div class="cost"/>' +
- '</li>');
+ '</div>');
if(!addOn.displayQuantity) {
$addOn.find('.quantity').remove();
}
@@ -1209,16 +1178,16 @@ R.buildSubscribeForm = function(options) {
}
// Quantity Change
- $addOnsList.delegate('ul.add_ons .quantity input', 'change keyup', function(e) {
- var $addOn = $(this).closest('li');
+ $addOnsList.delegate('.add_ons .quantity input', 'change keyup', function(e) {
+ var $addOn = $(this).closest('.add_on');
var addOn = $addOn.data('add_on');
var newQty = parseInt($(this).val(),10) || 1;
subscription.findAddOnByCode(addOn.code).quantity = newQty;
updateTotals();
});
// Add-on click
- $addOnsList.delegate('ul.add_ons li', 'click', function(e) {
+ $addOnsList.delegate('.add_ons .add_on', 'click', function(e) {
if($(e.target).closest('.quantity').length) return;
var selected = !$(this).hasClass('selected');
@@ -1295,7 +1264,6 @@ R.buildSubscribeForm = function(options) {
});
}
-
if(options.enableCoupons) {
$coupon.find('input').bind('keyup change', function(e) {
});
@@ -1319,6 +1287,38 @@ R.buildSubscribeForm = function(options) {
}
+ // == VAT
+ var $vat = $form.find('.vat');
+ var $vatNumber = $form.find('.vat_number');
+ var $vatNumberInput = $vatNumber.find('input');
+
+ $vat.find('label').text('VAT at ' + R.settings.VATPercent + '%');
+ function showHideVAT() {
+ var buyerCountry = $form.find('.country select').val();
+ var applicable = R.isVATApplicable(buyerCountry);
+ var vatNumber = $vatNumberInput.val();
+
+ $vatNumber.toggleClass('applicable', applicable);
+ $vatNumber.toggleClass('inapplicable', !applicable);
+
+ applicable = applicable && !vatNumber;
+ $vat.toggleClass('applicable', applicable);
+ $vat.toggleClass('inapplicable', !applicable);
+ }
+ showHideVAT();
+ $form.find('.country select').change(function() {
+ billingInfo.country = $(this).val();
+ updateTotals();
+ showHideVAT();
+ });
+ $vatNumberInput.bind('keyup change', function() {
+ billingInfo.vatNumber = $(this).val();
+ updateTotals();
+ showHideVAT();
+ });
+
+
+
//
// Pulls user input into model objects
function syncUserInput() {
@@ -1428,11 +1428,11 @@ R.buildSubscribeForm = function(options) {
-R.subscribeFormHTML = '<form class="recurly subscribe"><div class="subscription"><div class="plan"><div class="name"></div><div class="field quantity"><div class="placeholder">Qty</div><input type="text"/></div><div class="recurring_cost"><div class="cost"></div><div class="interval"></div></div><div class="free_trial"></div><div class="setup_fee"><div class="title">Setup Fee</div><div class="cost"></div></div></div><ul class="add_ons none"></ul><div class="coupon"><div class="coupon_code field"><div class="placeholder">Coupon Code</div><input type="text" class="coupon_code"/></div><div class="check"></div><div class="description"></div><div class="discount"></div></div><div class="vat"><label>VAT</label><div class="cost"></div></div></div><div class="due_now"><div class="title">Order Total</div><div class="cost"></div></div><div class="server_errors none"></div><div class="contact_info"><div class="title">Contact Info</div><div class="field first_name"><div class="placeholder">First Name </div><input type="text"/></div><div class="field last_name"><div class="placeholder">Last Name </div><input type="text"/></div><div class="field email"><div class="placeholder">Email </div><input type="text"/></div></div><div class="billing_info"></div><div class="footer"><button class="submit">Subscribe</button></div></form>';
+R.subscribeFormHTML = '<form class="recurly subscribe"><div class="subscription"><div class="plan"><div class="name"></div><div class="field quantity"><div class="placeholder">Qty</div><input type="text"/></div><div class="recurring_cost"><div class="cost"></div><div class="interval"></div></div><div class="free_trial"></div><div class="setup_fee"><div class="title">Setup Fee</div><div class="cost"></div></div></div><div class="add_ons none"></div><div class="coupon"><div class="coupon_code field"><div class="placeholder">Coupon Code</div><input type="text" class="coupon_code"/></div><div class="check"></div><div class="description"></div><div class="discount"></div></div><div class="vat"><div class="title">VAT</div><div class="cost"></div></div></div><div class="due_now"><div class="title">Order Total</div><div class="cost"></div></div><div class="server_errors none"></div><div class="contact_info"><div class="title">Contact Info</div><div class="field first_name"><div class="placeholder">First Name </div><input type="text"/></div><div class="field last_name"><div class="placeholder">Last Name </div><input type="text"/></div><div class="field email"><div class="placeholder">Email </div><input type="text"/></div></div><div class="billing_info"></div><div class="footer"><button class="submit">Subscribe</button></div></form>';
R.accountUpdateFormHTML = '<form class="recurly account_update"><div class="contact_info"><div class="title">Contact Info</div><div class="field first_name"><div class="placeholder">First Name </div><input type="text"/></div><div class="field last_name"><div class="placeholder">Last Name </div><input type="text"/></div><div class="field email"><div class="placeholder">Email </div><input type="text"/></div></div><div class="billing_info"></div><div class="footer"><button class="submit">Update</button></div></form>';
-R.billingInfoFieldsHTML = '<div class="title">Billing Info</div><ul class="accepted_cards"><li class="american_express">American Express</li><li class="discover">Discover</li><li class="mastercard">MasterCard </li><li class="visa">Visa</li></ul><div class="credit_card"><div class="field card_number"><div class="placeholder">Credit Card Number </div><input type="text"/></div><div class="field cvv"><div class="placeholder">CVV </div><input type="text"/></div><div class="field expires"><label>Expires </label><div class="month"><select><option value="1">01 - January</option><option value="2">02 - February</option><option value="3">03 - March</option><option value="4">04 - April</option><option value="5">05 - May</option><option value="6">06 - June</option><option value="7">07 - July</option><option value="8">08 - August</option><option value="9">09 - September</option><option value="10">10 - October</option><option value="11">11 - November</option><option value="12">12 - December</option><!-- = render :partial => \'months\' --></select></div><div class="year"><select></select></div></div></div><div class="address"><div class="field address1"><div class="placeholder">Address</div><input type="text"/></div><div class="field address2"><div class="placeholder">Apt/Suite</div><input type="text"/></div><div class="field city"><div class="placeholder">City</div><input type="text"/></div><div class="field state"><div class="placeholder">State</div><input type="text"/></div><div class="field zip"><div class="placeholder">Zip/Postal</div><input type="text"/></div><div class="field country"><!-- label Country --><select><option value="-">Select Country</option><option value="-">-------------- </option><option value="AF">Afghanistan</option><option value="AL">Albania</option><option value="DZ">Algeria</option><option value="AS">American Samoa</option><option value="AD">Andorra</option><option value="AO">Angola</option><option value="AI">Anguilla</option><option value="AQ">Antarctica</option><option value="AG">Antigua and Barbuda</option><option value="AR">Argentina</option><option value="AM">Armenia</option><option value="AW">Aruba</option><option value="AC">Ascension(Island</option><option value="AU">Australia</option><option value="AT">Austria</option><option value="AZ">Azerbaijan</option><option value="BS">Bahamas</option><option value="BH">Bahrain</option><option value="BD">Bangladesh</option><option value="BB">Barbados</option><option value="BY">Belarus</option><option value="BE">Belgium</option><option value="BZ">Belize</option><option value="BJ">Benin</option><option value="BM">Bermuda</option><option value="BT">Bhutan</option><option value="BO">Bolivia</option><option value="BA">Bosnia and Herzegovina</option><option value="BW">Botswana</option><option value="BV">Bouvet Island</option><option value="BR">Brazil</option><option value="BQ">British Antarctic Territory</option><option value="IO">British Indian Ocean Territory</option><option value="VG">British Virgin Islands</option><option value="BN">Brunei</option><option value="BG">Bulgaria</option><option value="BF">Burkina Faso</option><option value="BI">Burundi</option><option value="KH">Cambodia</option><option value="CM">Cameroon</option><option value="CA">Canada</option><option value="IC">Canary Islands</option><option value="CT">Canton and Enderbury Islands</option><option value="CV">Cape Verde</option><option value="KY">Cayman Islands</option><option value="CF">Central African Republic</option><option value="EA">Ceuta and Melilla</option><option value="TD">Chad</option><option value="CL">Chile</option><option value="CN">China</option><option value="CX">Christmas Island</option><option value="CP">Clipperton Island</option><option value="CC">Cocos [Keeling] Islands</option><option value="CO">Colombia</option><option value="KM">Comoros</option><option value="CD">Congo [DRC]</option><option value="CG">Congo [Republic]</option><option value="CK">Cook Islands</option><option value="CR">Costa Rica</option><option value="HR">Croatia</option><option value="CU">Cuba</option><option value="CY">Cyprus</option><option value="CZ">Czech Republic</option><option value="DK">Denmark</option><option value="DG">Diego Garcia</option><option value="DJ">Djibouti</option><option value="DM">Dominica</option><option value="DO">Dominican Republic</option><option value="NQ">Dronning Maud Land</option><option value="DD">East Germany</option><option value="TL">East Timor</option><option value="EC">Ecuador</option><option value="EG">Egypt</option><option value="SV">El Salvador</option><option value="GQ">Equatorial Guinea</option><option value="ER">Eritrea</option><option value="EE">Estonia</option><option value="ET">Ethiopia</option><option value="EU">European Union</option><option value="FK">Falkland Islands [Islas Malvinas]</option><option value="FO">Faroe Islands</option><option value="FJ">Fiji</option><option value="FI">Finland</option><option value="FR">France</option><option value="GF">French Guiana</option><option value="PF">French Polynesia</option><option value="TF">French Southern Territories</option><option value="FQ">French Southern and Antarctic Territories</option><option value="GA">Gabon</option><option value="GM">Gambia</option><option value="GE">Georgia</option><option value="DE">Germany</option><option value="GH">Ghana</option><option value="GI">Gibraltar</option><option value="GR">Greece</option><option value="GL">Greenland</option><option value="GD">Grenada</option><option value="GP">Guadeloupe</option><option value="GU">Guam</option><option value="GT">Guatemala</option><option value="GG">Guernsey</option><option value="GN">Guinea</option><option value="GW">Guinea-Bissau</option><option value="GY">Guyana</option><option value="HT">Haiti</option><option value="HM">Heard Island and McDonald Islands</option><option value="HN">Honduras</option><option value="HK">Hong Kong</option><option value="HU">Hungary</option><option value="IS">Iceland</option><option value="IN">India</option><option value="ID">Indonesia</option><option value="IR">Iran</option><option value="IQ">Iraq</option><option value="IE">Ireland</option><option value="IM">Isle of Man</option><option value="IL">Israel</option><option value="IT">Italy</option><option value="CI">Ivory Coast</option><option value="JM">Jamaica</option><option value="JP">Japan</option><option value="JE">Jersey</option><option value="JT">Johnston Island</option><option value="JO">Jordan</option><option value="KZ">Kazakhstan</option><option value="KE">Kenya</option><option value="KI">Kiribati</option><option value="KW">Kuwait</option><option value="KG">Kyrgyzstan</option><option value="LA">Laos</option><option value="LV">Latvia</option><option value="LB">Lebanon</option><option value="LS">Lesotho</option><option value="LR">Liberia</option><option value="LY">Libya</option><option value="LI">Liechtenstein</option><option value="LT">Lithuania</option><option value="LU">Luxembourg</option><option value="MO">Macau</option><option value="MK">Macedonia [FYROM]</option><option value="MG">Madagascar</option><option value="MW">Malawi</option><option value="MY">Malaysia</option><option value="MV">Maldives</option><option value="ML">Mali</option><option value="MT">Malta</option><option value="MH">Marshall Islands</option><option value="MQ">Martinique</option><option value="MR">Mauritania</option><option value="MU">Mauritius</option><option value="YT">Mayotte</option><option value="FX">Metropolitan France</option><option value="MX">Mexico</option><option value="FM">Micronesia</option><option value="MI">Midway Islands</option><option value="MD">Moldova</option><option value="MC">Monaco</option><option value="MN">Mongolia</option><option value="ME">Montenegro</option><option value="MS">Montserrat</option><option value="MA">Morocco</option><option value="MZ">Mozambique</option><option value="MM">Myanmar [Burma]</option><option value="NA">Namibia</option><option value="NR">Nauru</option><option value="NP">Nepal</option><option value="NL">Netherlands</option><option value="AN">Netherlands Antilles</option><option value="NT">Neutral Zone</option><option value="NC">New Caledonia</option><option value="NZ">New Zealand</option><option value="NI">Nicaragua</option><option value="NE">Niger</option><option value="NG">Nigeria</option><option value="NU">Niue</option><option value="NF">Norfolk Island</option><option value="KP">North Korea</option><option value="VD">North Vietnam</option><option value="MP">Northern Mariana Islands</option><option value="NO">Norway</option><option value="OM">Oman</option><option value="QO">Outlying Oceania</option><option value="PC">Pacific Islands Trust Territory</option><option value="PK">Pakistan</option><option value="PW">Palau</option><option value="PS">Palestinian Territories</option><option value="PA">Panama</option><option value="PZ">Panama Canal Zone</option><option value="PG">Papua New Guinea</option><option value="PY">Paraguay</option><option value="YD">People\'s Democratic Republic of Yemen</option><option value="PE">Peru</option><option value="PH">Philippines</option><option value="PN">Pitcairn Islands</option><option value="PL">Poland</option><option value="PT">Portugal</option><option value="PR">Puerto Rico</option><option value="QA">Qatar</option><option value="RO">Romania</option><option value="RU">Russia</option><option value="RW">Rwanda</option><option value="RE">R\u00e9union</option><option value="BL">Saint Barth\u00e9lemy</option><option value="SH">Saint Helena</option><option value="KN">Saint Kitts and Nevis</option><option value="LC">Saint Lucia</option><option value="MF">Saint Martin</option><option value="PM">Saint Pierre and Miquelon</option><option value="VC">Saint Vincent and the Grenadines</option><option value="WS">Samoa</option><option value="SM">San Marino</option><option value="SA">Saudi Arabia</option><option value="SN">Senegal</option><option value="RS">Serbia</option><option value="CS">Serbia and Montenegro</option><option value="SC">Seychelles</option><option value="SL">Sierra Leone</option><option value="SG">Singapore</option><option value="SK">Slovakia</option><option value="SI">Slovenia</option><option value="SB">Solomon Islands</option><option value="SO">Somalia</option><option value="ZA">South Africa</option><option value="GS">South Georgia and the South Sandwich Islands</option><option value="KR">South Korea</option><option value="ES">Spain</option><option value="LK">Sri Lanka</option><option value="SD">Sudan</option><option value="SR">Suriname</option><option value="SJ">Svalbard and Jan Mayen</option><option value="SZ">Swaziland</option><option value="SE">Sweden</option><option value="CH">Switzerland</option><option value="SY">Syria</option><option value="ST">S\u00e3o Tom\u00e9 and Pr\u00edncipe</option><option value="TW">Taiwan</option><option value="TJ">Tajikistan</option><option value="TZ">Tanzania</option><option value="TH">Thailand</option><option value="TG">Togo</option><option value="TK">Tokelau</option><option value="TO">Tonga</option><option value="TT">Trinidad and Tobago</option><option value="TA">Tristan da Cunha</option><option value="TN">Tunisia</option><option value="TR">Turkey</option><option value="TM">Turkmenistan</option><option value="TC">Turks and Caicos Islands</option><option value="TV">Tuvalu</option><option value="UM">U.S. Minor Outlying Islands</option><option value="PU">U.S. Miscellaneous Pacific Islands</option><option value="VI">U.S. Virgin Islands</option><option value="UG">Uganda</option><option value="UA">Ukraine</option><option value="SU">Union(of Soviet Socialist Republics</option><option value="AE">United Arab Emirates</option><option value="GB">United Kingdom</option><option value="US">United States</option><option value="UY">Uruguay</option><option value="UZ">Uzbekistan</option><option value="VU">Vanuatu</option><option value="VA">Vatican City</option><option value="VE">Venezuela</option><option value="VN">Vietnam</option><option value="WK">Wake Island</option><option value="WF">Wallis and Futuna</option><option value="EH">Western Sahara</option><option value="YE">Yemen</option><option value="ZM">Zambia</option><option value="ZW">Zimbabwe</option><option value="AX">\u00c5land Islands</option></select></div></div><div class="field vat_number"><div class="placeholder">VAT Number</div><input type="text"/></div>';
+R.billingInfoFieldsHTML = '<div class="title">Billing Info</div><div class="accepted_cards"><div class="card american_express">American Express</div><div class="card discover">Discover</div><div class="card mastercard">MasterCard </div><div class="card visa">Visa</div></div><div class="credit_card"><div class="field card_number"><div class="placeholder">Credit Card Number </div><input type="text"/></div><div class="field cvv"><div class="placeholder">CVV </div><input type="text"/></div><div class="field expires"><div class="title">Expires </div><div class="month"><select><option value="1">01 - January</option><option value="2">02 - February</option><option value="3">03 - March</option><option value="4">04 - April</option><option value="5">05 - May</option><option value="6">06 - June</option><option value="7">07 - July</option><option value="8">08 - August</option><option value="9">09 - September</option><option value="10">10 - October</option><option value="11">11 - November</option><option value="12">12 - December</option><!-- = render :partial => \'months\' --></select></div><div class="year"><select></select></div></div></div><div class="address"><div class="field address1"><div class="placeholder">Address</div><input type="text"/></div><div class="field address2"><div class="placeholder">Apt/Suite</div><input type="text"/></div><div class="field city"><div class="placeholder">City</div><input type="text"/></div><div class="field state"><div class="placeholder">State</div><input type="text"/></div><div class="field zip"><div class="placeholder">Zip/Postal</div><input type="text"/></div><div class="field country"><!-- label Country --><select><option value="-">Select Country</option><option value="-">-------------- </option><option value="AF">Afghanistan</option><option value="AL">Albania</option><option value="DZ">Algeria</option><option value="AS">American Samoa</option><option value="AD">Andorra</option><option value="AO">Angola</option><option value="AI">Anguilla</option><option value="AQ">Antarctica</option><option value="AG">Antigua and Barbuda</option><option value="AR">Argentina</option><option value="AM">Armenia</option><option value="AW">Aruba</option><option value="AC">Ascension(Island</option><option value="AU">Australia</option><option value="AT">Austria</option><option value="AZ">Azerbaijan</option><option value="BS">Bahamas</option><option value="BH">Bahrain</option><option value="BD">Bangladesh</option><option value="BB">Barbados</option><option value="BY">Belarus</option><option value="BE">Belgium</option><option value="BZ">Belize</option><option value="BJ">Benin</option><option value="BM">Bermuda</option><option value="BT">Bhutan</option><option value="BO">Bolivia</option><option value="BA">Bosnia and Herzegovina</option><option value="BW">Botswana</option><option value="BV">Bouvet Island</option><option value="BR">Brazil</option><option value="BQ">British Antarctic Territory</option><option value="IO">British Indian Ocean Territory</option><option value="VG">British Virgin Islands</option><option value="BN">Brunei</option><option value="BG">Bulgaria</option><option value="BF">Burkina Faso</option><option value="BI">Burundi</option><option value="KH">Cambodia</option><option value="CM">Cameroon</option><option value="CA">Canada</option><option value="IC">Canary Islands</option><option value="CT">Canton and Enderbury Islands</option><option value="CV">Cape Verde</option><option value="KY">Cayman Islands</option><option value="CF">Central African Republic</option><option value="EA">Ceuta and Melilla</option><option value="TD">Chad</option><option value="CL">Chile</option><option value="CN">China</option><option value="CX">Christmas Island</option><option value="CP">Clipperton Island</option><option value="CC">Cocos [Keeling] Islands</option><option value="CO">Colombia</option><option value="KM">Comoros</option><option value="CD">Congo [DRC]</option><option value="CG">Congo [Republic]</option><option value="CK">Cook Islands</option><option value="CR">Costa Rica</option><option value="HR">Croatia</option><option value="CU">Cuba</option><option value="CY">Cyprus</option><option value="CZ">Czech Republic</option><option value="DK">Denmark</option><option value="DG">Diego Garcia</option><option value="DJ">Djibouti</option><option value="DM">Dominica</option><option value="DO">Dominican Republic</option><option value="NQ">Dronning Maud Land</option><option value="DD">East Germany</option><option value="TL">East Timor</option><option value="EC">Ecuador</option><option value="EG">Egypt</option><option value="SV">El Salvador</option><option value="GQ">Equatorial Guinea</option><option value="ER">Eritrea</option><option value="EE">Estonia</option><option value="ET">Ethiopia</option><option value="EU">European Union</option><option value="FK">Falkland Islands [Islas Malvinas]</option><option value="FO">Faroe Islands</option><option value="FJ">Fiji</option><option value="FI">Finland</option><option value="FR">France</option><option value="GF">French Guiana</option><option value="PF">French Polynesia</option><option value="TF">French Southern Territories</option><option value="FQ">French Southern and Antarctic Territories</option><option value="GA">Gabon</option><option value="GM">Gambia</option><option value="GE">Georgia</option><option value="DE">Germany</option><option value="GH">Ghana</option><option value="GI">Gibraltar</option><option value="GR">Greece</option><option value="GL">Greenland</option><option value="GD">Grenada</option><option value="GP">Guadeloupe</option><option value="GU">Guam</option><option value="GT">Guatemala</option><option value="GG">Guernsey</option><option value="GN">Guinea</option><option value="GW">Guinea-Bissau</option><option value="GY">Guyana</option><option value="HT">Haiti</option><option value="HM">Heard Island and McDonald Islands</option><option value="HN">Honduras</option><option value="HK">Hong Kong</option><option value="HU">Hungary</option><option value="IS">Iceland</option><option value="IN">India</option><option value="ID">Indonesia</option><option value="IR">Iran</option><option value="IQ">Iraq</option><option value="IE">Ireland</option><option value="IM">Isle of Man</option><option value="IL">Israel</option><option value="IT">Italy</option><option value="CI">Ivory Coast</option><option value="JM">Jamaica</option><option value="JP">Japan</option><option value="JE">Jersey</option><option value="JT">Johnston Island</option><option value="JO">Jordan</option><option value="KZ">Kazakhstan</option><option value="KE">Kenya</option><option value="KI">Kiribati</option><option value="KW">Kuwait</option><option value="KG">Kyrgyzstan</option><option value="LA">Laos</option><option value="LV">Latvia</option><option value="LB">Lebanon</option><option value="LS">Lesotho</option><option value="LR">Liberia</option><option value="LY">Libya</option><option value="LI">Liechtenstein</option><option value="LT">Lithuania</option><option value="LU">Luxembourg</option><option value="MO">Macau</option><option value="MK">Macedonia [FYROM]</option><option value="MG">Madagascar</option><option value="MW">Malawi</option><option value="MY">Malaysia</option><option value="MV">Maldives</option><option value="ML">Mali</option><option value="MT">Malta</option><option value="MH">Marshall Islands</option><option value="MQ">Martinique</option><option value="MR">Mauritania</option><option value="MU">Mauritius</option><option value="YT">Mayotte</option><option value="FX">Metropolitan France</option><option value="MX">Mexico</option><option value="FM">Micronesia</option><option value="MI">Midway Islands</option><option value="MD">Moldova</option><option value="MC">Monaco</option><option value="MN">Mongolia</option><option value="ME">Montenegro</option><option value="MS">Montserrat</option><option value="MA">Morocco</option><option value="MZ">Mozambique</option><option value="MM">Myanmar [Burma]</option><option value="NA">Namibia</option><option value="NR">Nauru</option><option value="NP">Nepal</option><option value="NL">Netherlands</option><option value="AN">Netherlands Antilles</option><option value="NT">Neutral Zone</option><option value="NC">New Caledonia</option><option value="NZ">New Zealand</option><option value="NI">Nicaragua</option><option value="NE">Niger</option><option value="NG">Nigeria</option><option value="NU">Niue</option><option value="NF">Norfolk Island</option><option value="KP">North Korea</option><option value="VD">North Vietnam</option><option value="MP">Northern Mariana Islands</option><option value="NO">Norway</option><option value="OM">Oman</option><option value="QO">Outlying Oceania</option><option value="PC">Pacific Islands Trust Territory</option><option value="PK">Pakistan</option><option value="PW">Palau</option><option value="PS">Palestinian Territories</option><option value="PA">Panama</option><option value="PZ">Panama Canal Zone</option><option value="PG">Papua New Guinea</option><option value="PY">Paraguay</option><option value="YD">People\'s Democratic Republic of Yemen</option><option value="PE">Peru</option><option value="PH">Philippines</option><option value="PN">Pitcairn Islands</option><option value="PL">Poland</option><option value="PT">Portugal</option><option value="PR">Puerto Rico</option><option value="QA">Qatar</option><option value="RO">Romania</option><option value="RU">Russia</option><option value="RW">Rwanda</option><option value="RE">R\u00e9union</option><option value="BL">Saint Barth\u00e9lemy</option><option value="SH">Saint Helena</option><option value="KN">Saint Kitts and Nevis</option><option value="LC">Saint Lucia</option><option value="MF">Saint Martin</option><option value="PM">Saint Pierre and Miquelon</option><option value="VC">Saint Vincent and the Grenadines</option><option value="WS">Samoa</option><option value="SM">San Marino</option><option value="SA">Saudi Arabia</option><option value="SN">Senegal</option><option value="RS">Serbia</option><option value="CS">Serbia and Montenegro</option><option value="SC">Seychelles</option><option value="SL">Sierra Leone</option><option value="SG">Singapore</option><option value="SK">Slovakia</option><option value="SI">Slovenia</option><option value="SB">Solomon Islands</option><option value="SO">Somalia</option><option value="ZA">South Africa</option><option value="GS">South Georgia and the South Sandwich Islands</option><option value="KR">South Korea</option><option value="ES">Spain</option><option value="LK">Sri Lanka</option><option value="SD">Sudan</option><option value="SR">Suriname</option><option value="SJ">Svalbard and Jan Mayen</option><option value="SZ">Swaziland</option><option value="SE">Sweden</option><option value="CH">Switzerland</option><option value="SY">Syria</option><option value="ST">S\u00e3o Tom\u00e9 and Pr\u00edncipe</option><option value="TW">Taiwan</option><option value="TJ">Tajikistan</option><option value="TZ">Tanzania</option><option value="TH">Thailand</option><option value="TG">Togo</option><option value="TK">Tokelau</option><option value="TO">Tonga</option><option value="TT">Trinidad and Tobago</option><option value="TA">Tristan da Cunha</option><option value="TN">Tunisia</option><option value="TR">Turkey</option><option value="TM">Turkmenistan</option><option value="TC">Turks and Caicos Islands</option><option value="TV">Tuvalu</option><option value="UM">U.S. Minor Outlying Islands</option><option value="PU">U.S. Miscellaneous Pacific Islands</option><option value="VI">U.S. Virgin Islands</option><option value="UG">Uganda</option><option value="UA">Ukraine</option><option value="SU">Union(of Soviet Socialist Republics</option><option value="AE">United Arab Emirates</option><option value="GB">United Kingdom</option><option value="US">United States</option><option value="UY">Uruguay</option><option value="UZ">Uzbekistan</option><option value="VU">Vanuatu</option><option value="VA">Vatican City</option><option value="VE">Venezuela</option><option value="VN">Vietnam</option><option value="WK">Wake Island</option><option value="WF">Wallis and Futuna</option><option value="EH">Western Sahara</option><option value="YE">Yemen</option><option value="ZM">Zambia</option><option value="ZW">Zimbabwe</option><option value="AX">\u00c5land Islands</option></select></div></div><div class="field vat_number"><div class="placeholder">VAT Number</div><input type="text"/></div>';
window.Recurly = R;
View
133 recurly.styl
@@ -160,24 +160,24 @@ hstack(cols)
&.applicable
display block
- label
- font-size 18px
+ .title
+ font-size base_font_size
font-weight normal
float left
.cost
float right
font-size 18px
- ul.add_ons
+ .add_ons
clear both
margin 0
// background url(images/dash.png) repeat-x 1px top
&.any
padding (outer_margin/2)
- li
+ .add_on
background linear-gradient(top, #ecedee, #e5e6e7)
margin 0
height 43px
@@ -444,8 +444,9 @@ hstack(cols)
&.expires
field-width columns(8)
- label
+ .title
float left
+ font-size round(base_font_size*0.8)
line-height 24px
vertical-align middle
@@ -484,15 +485,14 @@ hstack(cols)
margin-left 0
clear left
- ul.accepted_cards
+ .accepted_cards
float right
margin 0
padding 0
margin-right columns(4) + column_space
width 160px
- list-style-type none
- li
+ .card
background-position right 0px
background-repeat no-repeat
text-indent -3000px
@@ -517,18 +517,9 @@ hstack(cols)
&.no_match
opacity 0.5
- // /fieldset
-
- label
- display block
- font-size 13px
- color #333
- font-weight bold
-
-
+
// General
input,
- textarea,
select
vertical-align middle
color #000000
@@ -539,7 +530,6 @@ hstack(cols)
color #311
input
- // margin 0 0 5px 0
background white
border input_border solid #a0a0a5
box-shadow inset 0 2px 3px rgba(0,0,0,0.1)
@@ -624,69 +614,52 @@ hstack(cols)
cursor pointer
-
-
- button.submit hover
- color #555
-
-
- button.submit active
- top 2px
-
- color #302106
- text-shadow rgba(255,255,255, .5694) 0 -1px 0
-
- -webkit-user-select none
- -moz-user-select -moz-none
- outline none
-
- background-image -webkit-gradient(linear, 0% 0%, 0% 100%, from(#CE7B00), to(#FECD00))
- background -moz-linear-gradient(top, #ce7b00, #fecd00)
- box-shadow rgba(255, 255, 255, 0.69) 0px -1px 0px inset, rgba(0,0,0, 0.26) 0px 2px 3px
-
-
- button.submit[disabled]
- position relative
- height 46px
- max-width 600px
- padding 0 10px
+
- font-size 15px
- font-weight 700
- color #555 !important
- text-shadow rgba(255,255,255, .5694) 0 1px 0
- text-align center
-
- opacity .75
- border 1px solid #767674
- background #e7a500
-
- -moz-border-radius 10px
- -webkit-border-radius 10px
- border-radius 10px
-
- -webkit-user-select none
- -moz-user-select -moz-none
- outline none
-
- background-image -webkit-gradient(linear, 0% 0%, 0% 100%, from(#DBD9D2), to(#999)) !important
- background -moz-linear-gradient(top, #DBD9D2, #999999) !important
-
- -webkit-background-clip padding-box
-
- -webkit-box-shadow rgba(255, 255, 255, 0.69) 0px 1px 0px inset, rgba(0,0,0, 0.26) 0px 2px 3px
+ &:hover
+ color #555
- box-shadow rgba(255, 255, 255, 0.699219) 0px 1px 0px inset, rgba(0,0,0, 0.269219) 0px 2px 3px
-
-
- button.submit span
- font-weight 500
- font-size 13px
-
+
+ &:active
+ top 2px
+
+ color #302106
+ text-shadow rgba(255,255,255, .5694) 0 -1px 0
+
+ -webkit-user-select none
+ -moz-user-select -moz-none
+ outline none
+
+ background-image -webkit-gradient(linear, 0% 0%, 0% 100%, from(#CE7B00), to(#FECD00))
+ background -moz-linear-gradient(top, #ce7b00, #fecd00)
+ box-shadow rgba(255, 255, 255, 0.69) 0px -1px 0px inset, rgba(0,0,0, 0.26) 0px 2px 3px
- button.submit:hover
- color #555
-
-
+
+ &[disabled]
+ position relative
+ height 46px
+ max-width 600px
+ padding 0 10px
+ font-weight 700
+ color #555
+ text-shadow rgba(255,255,255, .5694) 0 1px 0
+ text-align center
+
+ opacity .75
+ border 1px solid #767674
+ background #e7a500
+
+ -moz-border-radius 10px
+ -webkit-border-radius 10px
+ border-radius 10px
+ -webkit-user-select none
+ -moz-user-select -moz-none
+ outline none
+ background-image -webkit-gradient(linear, 0% 0%, 0% 100%, from(#DBD9D2), to(#999))
+ background -moz-linear-gradient(top, #DBD9D2, #999999)
+ -webkit-background-clip padding-box
+ -webkit-box-shadow rgba(255, 255, 255, 0.69) 0px 1px 0px inset, rgba(0,0,0, 0.26) 0px 2px 3px
+ box-shadow rgba(255, 255, 255, 0.699219) 0px 1px 0px inset, rgba(0,0,0, 0.269219) 0px 2px 3px
+
// code == art

0 comments on commit 145a747

Please sign in to comment.
Something went wrong with that request. Please try again.