Commit efe78c7
committed
Pulling CSS and JS into their own files
1 parent 0f5f562 commit efe78c7
3 files changed
Lines changed: 126 additions & 129 deletions
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
@@ -0,0 +1,84 @@ | |||
| 1 | + body { | ||
| 2 | + margin: 0 auto; | ||
| 3 | + padding: 20px; | ||
| 4 | + max-width: 980px; | ||
| 5 | + background: url(https://www.paypalobjects.com/webstatic/i/ex_ce2/scr/scr_content-bkgd.png) repeat #F8F8F8; | ||
| 6 | + font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; | ||
| 7 | + } | ||
| 8 | + | ||
| 9 | + h1, h2, h3 { | ||
| 10 | + font-weight: normal; | ||
| 11 | + text-shadow: 0 1px 0 #fff; | ||
| 12 | + } | ||
| 13 | + | ||
| 14 | + h1 { | ||
| 15 | + margin: 38px 0 0 0; | ||
| 16 | + font-size: 38px; | ||
| 17 | + line-height: 45px; | ||
| 18 | + color: #0079C1; | ||
| 19 | + } | ||
| 20 | + | ||
| 21 | + h2 { | ||
| 22 | + font-size: 1.4em; | ||
| 23 | + line-height: 1.4em; | ||
| 24 | + } | ||
| 25 | + | ||
| 26 | + h3 { | ||
| 27 | + margin-top: 40px; | ||
| 28 | + } | ||
| 29 | + | ||
| 30 | + .nav-tabs { | ||
| 31 | + margin: 40px 0 0; | ||
| 32 | + } | ||
| 33 | + | ||
| 34 | + .nav-tabs a { | ||
| 35 | + font-size: 20px; | ||
| 36 | + } | ||
| 37 | + | ||
| 38 | + .example { | ||
| 39 | + position: relative; | ||
| 40 | + margin: 0; | ||
| 41 | + padding: 22px; | ||
| 42 | + background-color: white; | ||
| 43 | + border: 1px solid #DDD; | ||
| 44 | + border-top: 0; | ||
| 45 | + -webkit-border-bottom-right-radius: 4px; | ||
| 46 | + -webkit-border-bottom-left-radius: 4px; | ||
| 47 | + -moz-border-radius-bottomright: 4px; | ||
| 48 | + -moz-border-radius-bottomleft: 4px; | ||
| 49 | + border-bottom-right-radius: 4px; | ||
| 50 | + border-bottom-left-radius: 4px; | ||
| 51 | + } | ||
| 52 | + | ||
| 53 | + .example .tryit { | ||
| 54 | + margin: 12px 0 -24px; | ||
| 55 | + } | ||
| 56 | + | ||
| 57 | + .example pre { | ||
| 58 | + margin: 0 -23px; | ||
| 59 | + padding: 1em 24px; | ||
| 60 | + -webkit-border-radius: 0; | ||
| 61 | + -moz-border-radius: 0; | ||
| 62 | + border-radius: 0; | ||
| 63 | + } | ||
| 64 | + | ||
| 65 | + .edit { | ||
| 66 | + float: right; | ||
| 67 | + } | ||
| 68 | + | ||
| 69 | + .modal form { | ||
| 70 | + margin: 0; | ||
| 71 | + padding: 35px 20px 20px; | ||
| 72 | + } | ||
| 73 | + | ||
| 74 | + @media (min-width: 0) and (max-width: 660px) { | ||
| 75 | + .nav-tabs > li > a { | ||
| 76 | + padding: 8px; | ||
| 77 | + font-size: 13px; | ||
| 78 | + font-weight: bold; | ||
| 79 | + } | ||
| 80 | + | ||
| 81 | + .edit { | ||
| 82 | + float: none; | ||
| 83 | + } | ||
| 84 | + } | ||
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
@@ -5,92 +5,7 @@ | |||
| 5 | 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| 6 | 6 | <title>PayPal Payment Buttons</title> | |
| 7 | 7 | <link rel="stylesheet" href="css/bootstrap.min.css" /> | |
| 8 | - <style type="text/css"> | ||
| 9 | - body { | ||
| 10 | - margin: 0 auto; | ||
| 11 | - padding: 20px; | ||
| 12 | - max-width: 980px; | ||
| 13 | - background: url(https://www.paypalobjects.com/webstatic/i/ex_ce2/scr/scr_content-bkgd.png) repeat #F8F8F8; | ||
| 14 | - font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; | ||
| 15 | - } | ||
| 16 | - | ||
| 17 | - h1, h2, h3 { | ||
| 18 | - font-weight: normal; | ||
| 19 | - text-shadow: 0 1px 0 #fff; | ||
| 20 | - } | ||
| 21 | - | ||
| 22 | - h1 { | ||
| 23 | - margin: 38px 0 0 0; | ||
| 24 | - font-size: 38px; | ||
| 25 | - line-height: 45px; | ||
| 26 | - color: #0079C1; | ||
| 27 | - } | ||
| 28 | - | ||
| 29 | - h2 { | ||
| 30 | - font-size: 1.4em; | ||
| 31 | - line-height: 1.4em; | ||
| 32 | - } | ||
| 33 | - | ||
| 34 | - h3 { | ||
| 35 | - margin-top: 40px; | ||
| 36 | - } | ||
| 37 | - | ||
| 38 | - .nav-tabs { | ||
| 39 | - margin: 40px 0 0; | ||
| 40 | - } | ||
| 41 | - | ||
| 42 | - .nav-tabs a { | ||
| 43 | - font-size: 20px; | ||
| 44 | - } | ||
| 45 | - | ||
| 46 | - .example { | ||
| 47 | - position: relative; | ||
| 48 | - margin: 0; | ||
| 49 | - padding: 22px; | ||
| 50 | - background-color: white; | ||
| 51 | - border: 1px solid #DDD; | ||
| 52 | - border-top: 0; | ||
| 53 | - -webkit-border-bottom-right-radius: 4px; | ||
| 54 | - -webkit-border-bottom-left-radius: 4px; | ||
| 55 | - -moz-border-radius-bottomright: 4px; | ||
| 56 | - -moz-border-radius-bottomleft: 4px; | ||
| 57 | - border-bottom-right-radius: 4px; | ||
| 58 | - border-bottom-left-radius: 4px; | ||
| 59 | - } | ||
| 60 | - | ||
| 61 | - .example .tryit { | ||
| 62 | - margin: 12px 0 -24px; | ||
| 63 | - } | ||
| 64 | - | ||
| 65 | - .example pre { | ||
| 66 | - margin: 0 -23px; | ||
| 67 | - padding: 1em 24px; | ||
| 68 | - -webkit-border-radius: 0; | ||
| 69 | - -moz-border-radius: 0; | ||
| 70 | - border-radius: 0; | ||
| 71 | - } | ||
| 72 | - | ||
| 73 | - .edit { | ||
| 74 | - float: right; | ||
| 75 | - } | ||
| 76 | - | ||
| 77 | - .modal form { | ||
| 78 | - margin: 0; | ||
| 79 | - padding: 35px 20px 20px; | ||
| 80 | - } | ||
| 81 | - | ||
| 82 | - @media (min-width: 0) and (max-width: 660px) { | ||
| 83 | - .nav-tabs > li > a { | ||
| 84 | - padding: 8px; | ||
| 85 | - font-size: 13px; | ||
| 86 | - font-weight: bold; | ||
| 87 | - } | ||
| 88 | - | ||
| 89 | - .edit { | ||
| 90 | - float: none; | ||
| 91 | - } | ||
| 92 | - } | ||
| 93 | - </style> | ||
| 8 | + <link rel="stylesheet" href="css/app.css" /> | ||
| 94 | 9 | </head> | |
| 95 | 10 | <body> | |
| 96 | 11 | <div id="page"> | |
@@ -407,48 +322,6 @@ <h3>Find out more</h3> | |||
| 407 | 322 | ||
| 408 | 323 | <script src="js/jquery.min.js"></script> | |
| 409 | 324 | <script src="js/bootstrap.min.js"></script> | |
| 410 | - <script> | ||
| 411 | - | ||
| 412 | - $('.modal').on('hide', function () { | ||
| 413 | - var data = {}, | ||
| 414 | - modal = $(this), | ||
| 415 | - example = modal.closest('.example'), | ||
| 416 | - code = example.find('code'), | ||
| 417 | - tryit = example.find('.tryit'), | ||
| 418 | - inputs = modal.find('.modal-body :input'), | ||
| 419 | - input, merchant, el, len, i; | ||
| 420 | - | ||
| 421 | - // Build a map out of the form inputs | ||
| 422 | - for (i = 0, len = inputs.length; i < len; i++) { | ||
| 423 | - input = $(inputs[i]); | ||
| 424 | - | ||
| 425 | - data[input.attr('name')] = { | ||
| 426 | - value: input.val() | ||
| 427 | - }; | ||
| 428 | - } | ||
| 429 | - | ||
| 430 | - // Create a script tag to use as the HTML | ||
| 431 | - el = document.createElement('script'); | ||
| 432 | - | ||
| 433 | - if (data.button && data.button.value === 'cart') { | ||
| 434 | - el.src = 'paypal-button-minicart.js?merchant=' + data.business.value; | ||
| 435 | - } else { | ||
| 436 | - el.src = 'paypal-button.js?merchant=' + data.business.value; | ||
| 437 | - } | ||
| 438 | - | ||
| 439 | - for (key in data) { | ||
| 440 | - if (key !== 'business') { | ||
| 441 | - el.setAttribute('data-' + key, data[key].value); | ||
| 442 | - } | ||
| 443 | - } | ||
| 444 | - | ||
| 445 | - code.text(el.outerHTML.replace(/data-/g, "\n data-").replace("></" + "script>", "\n></" + "script>")); | ||
| 446 | - | ||
| 447 | - // Update the button | ||
| 448 | - tryit.empty(); | ||
| 449 | - PAYPAL.apps.ButtonFactory.create(data.business.value, data, data.button, tryit[0]); | ||
| 450 | - }); | ||
| 451 | - | ||
| 452 | - </script> | ||
| 325 | + <script src="js/app.js"></script> | ||
| 453 | 326 | </body> | |
| 454 | 327 | </html> | |
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
@@ -0,0 +1,40 @@ | |||
| 1 | + | ||
| 2 | + $('.modal').on('hide', function () { | ||
| 3 | + var data = {}, | ||
| 4 | + modal = $(this), | ||
| 5 | + example = modal.closest('.example'), | ||
| 6 | + code = example.find('code'), | ||
| 7 | + tryit = example.find('.tryit'), | ||
| 8 | + inputs = modal.find('.modal-body :input'), | ||
| 9 | + input, merchant, el, len, i; | ||
| 10 | + | ||
| 11 | + // Build a map out of the form inputs | ||
| 12 | + for (i = 0, len = inputs.length; i < len; i++) { | ||
| 13 | + input = $(inputs[i]); | ||
| 14 | + | ||
| 15 | + data[input.attr('name')] = { | ||
| 16 | + value: input.val() | ||
| 17 | + }; | ||
| 18 | + } | ||
| 19 | + | ||
| 20 | + // Create a script tag to use as the HTML | ||
| 21 | + el = document.createElement('script'); | ||
| 22 | + | ||
| 23 | + if (data.button && data.button.value === 'cart') { | ||
| 24 | + el.src = 'paypal-button-minicart.js?merchant=' + data.business.value; | ||
| 25 | + } else { | ||
| 26 | + el.src = 'paypal-button.js?merchant=' + data.business.value; | ||
| 27 | + } | ||
| 28 | + | ||
| 29 | + for (key in data) { | ||
| 30 | + if (key !== 'business') { | ||
| 31 | + el.setAttribute('data-' + key, data[key].value); | ||
| 32 | + } | ||
| 33 | + } | ||
| 34 | + | ||
| 35 | + code.text(el.outerHTML.replace(/data-/g, "\n data-").replace("></" + "script>", "\n></" + "script>")); | ||
| 36 | + | ||
| 37 | + // Update the button | ||
| 38 | + tryit.empty(); | ||
| 39 | + PAYPAL.apps.ButtonFactory.create(data.business.value, data, data.button, tryit[0]); | ||
| 40 | + }); | ||
0 commit comments