Donate -> Payment form plugin setup

diff --git a/css/app.css b/css/app.css
index 2b86f26..f722a47 100644 (file)
--- a/css/app.css
+++ b/css/app.css
@@ -6298,218 +6298,20 @@ nav.top-bar {
   max-height: 45px;
   transition: max-height 0.3s ease-in-out; }
 
-/*
- * Menu Effects: A collection of CSS3 menu effects (degrades gracefully in IE8).
- *
- * Don't hesitate to create new effects and remove the ones you don't need.
- *
- * latest version and complete README available on Github:
- * https://github.com/louisremi/menu-effects
- *
- * Copyright 2012 @louis_remi
- * Licensed under the MIT license.
- *
- * Are you using this in a paid work?
- * Send me music http://www.amazon.co.uk/wishlist/HNTU0468LQON
- *
- */
-/*
-.top-bar-menu > li > .sub-menu {
-  position: absolute;
-  left: 0;
-  top: 100%;
-  z-index: 0;
-  overflow: hidden;
-  max-height: 0;
-   The transition-delay prevents the menu to disappear before the transition is run backward
-   * It's ~= length of the animation (.6s) + highest item transition delay (466ms) 
-  -webkit-transition: max-height 1ms linear 1s;
-     -moz-transition: max-height 1ms linear 1s;
-   A .submenu should be only revealed when hovering the .menu 
-  pointer-events: none;
-}
- 
-.top-bar-menu > li:hover .sub-menu, .top-bar-menu > li:focus .sub-menu {
-  pointer-events: auto;
-  z-index: 10;
-  max-height: 2000px;
-  -webkit-transition: none;
-     -moz-transition: none;
-}
-&.has-dropdown.not-click {
-    .dropdown {
-        @extend %anim-button;
-        display:block;
-        visibility: hidden;
-        opacity: 0;
-    }
-    &:hover > .dropdown {
-        visibility: visible;
-        opacity: 1;
-    }
-}
- Progressive Anim
- * ==================================================================
- * This is a lot of redundant code but the result is worth it
- * This should be edited for menus with more or much less than 8 items 
- 
-$baseTime: 66;
-@mixin transition-delay($transitionTime) {
-    $newTime: $transitionTime * $baseTime;
-      -webkit-transition-delay: $newTime;
-     -moz-transition-delay: $newTime;
-      -ms-transition-delay: $newTime;
-       -o-transition-delay: $newTime;
-          transition-delay: $newTime;
-}
-  forward 
-.top-bar-menu > li:hover .sub-menu li:nth-child(1),
-.menu > li:hover .sub-menu li:nth-child(1),
-.sub-menu li:nth-child(8) {
-    @include transition-delay(0);
-}
-
-.top-bar-menu > li:hover .sub-menu li:nth-child(2),
-.sub-menu li:nth-child(7)  {
-    @include transition-delay(1);
-}
-
-.top-bar-menu > li:hover .sub-menu li:nth-child(3),
-.sub-menu li:nth-child(6)  {
-    @include transition-delay(2);
-}
-
-.top-bar-menu > li:hover .sub-menu li:nth-child(4),
-.sub-menu li:nth-child(5)  {
-    @include transition-delay(3);
-}
-
-.top-bar-menu > li:hover .sub-menu li:nth-child(5),
-.sub-menu li:nth-child(4)  {
-    @include transition-delay(4);
-}
-
-.top-bar-menu > li:hover .sub-menu li:nth-child(6),
-.sub-menu li:nth-child(3)  {
-    @include transition-delay(5);
-}
-
-.top-bar-menu > li:hover .sub-menu li:nth-child(7),
-.sub-menu li:nth-child(2) {
-    @include transition-delay(6);
-}
-
-.top-bar-menu > li:hover .sub-menu li:nth-child(8),
-.sub-menu li:nth-child(1)  {
-    @include transition-delay(7);
-}
-
- Default
- ================================================================= 
-.sub-menu li {
-  opacity: 0;
-
-  -webkit-transition: opacity .4s, -webkit-transform .6s, max-height .6s;
-     -moz-transition: opacity .4s,    -moz-transform .6s, max-height .6s;
-      -ms-transition: opacity .4s,     -ms-transform .6s, max-height .6s;
-       -o-transition: opacity .4s,      -o-transform .6s, max-height .6s;
-          transition: opacity .4s,         transform .6s, max-height .6s;
-}
-
-.top-bar-menu > li:hover .sub-menu li, .top-bar-menu > li:focus .sub-menu li {
-  opacity: 1;
+@media (max-width: 640px) {
+  #donate_form tbody tr {
+    width: 100%;
+    display: block; }
+  #donate_form table {
+    /*            width: 250px;*/
+    width: 100%;
+    display: block; }
+  #donate_form tbody {
+    width: 100%;
+    display: block; }
+  #main {
+    padding: 0; } }
 
-  -webkit-transform: none;
-     -moz-transform: none;
-      -ms-transform: none;
-       -o-transform: none;
-          transform: none;
-}
-
- Helix
- ================================================================= 
-.helix {
-  -webkit-perspective: 400px;
-     -moz-perspective: 400px;
-      -ms-perspective: 400px;
-       -o-perspective: 400px;
-          perspective: 400px;
-}
-
-.helix li {
-  -webkit-transform: rotateY(90deg);
-     -moz-transform: rotateY(90deg);
-      -ms-transform: rotateY(90deg);
-       -o-transform: rotateY(90deg);
-          transform: rotateY(90deg);
-}
-
- Wave
- ================================================================= 
-.wave li {
-  -webkit-transform-origin: 0% 0%;
-     -moz-transform-origin: 0% 0%;
-      -ms-transform-origin: 0% 0%;
-       -o-transform-origin: 0% 0%;
-          transform-origin: 0% 0%;
-
-  -webkit-transform: skewY(-90deg);
-     -moz-transform: skewY(-90deg);
-      -ms-transform: skewY(-90deg);
-       -o-transform: skewY(-90deg);
-          transform: skewY(-90deg);
-}
-
- Fly
- ================================================================= 
-.fly {
-  -webkit-perspective: 400px;
-     -moz-perspective: 400px;
-      -ms-perspective: 400px;
-       -o-perspective: 400px;
-          perspective: 400px;
-}
-
-.fly li {
-  -webkit-transform-origin: 50% 50% -50px;
-     -moz-transform-origin: 50% 50% -50px;
-      -ms-transform-origin: 50% 50% -50px;
-       -o-transform-origin: 50% 50% -50px;
-          transform-origin: 50% 50% -50px;
-
-  -webkit-transform: rotateX( -180deg );
-     -moz-transform: rotateX( -180deg );
-      -ms-transform: rotateX( -180deg );
-       -o-transform: rotateX( -180deg );
-          transform: rotateX( -180deg );
-}
-
- Blind
- ================================================================= 
-.blind li {
-  max-height: 0;
-}
-
-.top-bar-menu > li:hover .blind li, .top-bar-menu > li:focus .blind li {
-   This should be changed to the normal height of list-items 
-  max-height: 55px;
-}
-
- Venitian
- ================================================================= 
-.venitian li {
-  -webkit-transform-origin: 50% 0;
-     -moz-transform-origin: 50% 0;
-      -ms-transform-origin: 50% 0;
-       -o-transform-origin: 50% 0;
-          transform-origin: 50% 0;
-
-  -webkit-transform: scale(1,0);
-     -moz-transform: scale(1,0);
-      -ms-transform: scale(1,0);
-       -o-transform: scale(1,0);
-          transform: scale(1,0);
-}*/
 /* Assets */
 /* 
  * Foundation Icons v 3.0

diff --git a/footer.php b/footer.php
index 113d3b5..ff61036 100644 (file)
--- a/footer.php
+++ b/footer.php
@@ -32,6 +32,12 @@
 </div>
 <script>
     jQuery(document).ready( function() {
+//        jQuery("#donate_form > table > tbody").unwrap();
+//        jQuery("#donate_form tbody").addClass("small-10 columns");
+        jQuery("#donate_form tbody > tr").addClass("small-12 medium-10 columns");
+        jQuery("#donate_form tbody .title_cell").addClass("small-12 medium-2 columns");
+        jQuery("#donate_form tbody .field_cell").addClass("small-12 medium-10 columns");
+        jQuery("#donate_form #tr_exp_date .field_cell select").addClass("small-5");
         jQuery(".homepage_testimonials_text :not(div :first-child)").hide();
         jQuery(".homepage_testimonials_rarrow").click(function() {
             if (jQuery("#testimonial1").is(":visible")) {

diff --git a/scss/site/_structure.scss b/scss/site/_structure.scss
index a31405c..8676470 100644 (file)
--- a/scss/site/_structure.scss
+++ b/scss/site/_structure.scss
@@ -813,217 +813,22 @@ nav.top-bar {
     transition: max-height .3s ease-in-out;
 }
 
-
-// Insert styles here
-/*
- * Menu Effects: A collection of CSS3 menu effects (degrades gracefully in IE8).
- *
- * Don't hesitate to create new effects and remove the ones you don't need.
- *
- * latest version and complete README available on Github:
- * https://github.com/louisremi/menu-effects
- *
- * Copyright 2012 @louis_remi
- * Licensed under the MIT license.
- *
- * Are you using this in a paid work?
- * Send me music http://www.amazon.co.uk/wishlist/HNTU0468LQON
- *
- */
-/*
-.top-bar-menu > li > .sub-menu {
-  position: absolute;
-  left: 0;
-  top: 100%;
-  z-index: 0;
-  overflow: hidden;
-  max-height: 0;
-   The transition-delay prevents the menu to disappear before the transition is run backward
-   * It's ~= length of the animation (.6s) + highest item transition delay (466ms) 
-  -webkit-transition: max-height 1ms linear 1s;
-     -moz-transition: max-height 1ms linear 1s;
-   A .submenu should be only revealed when hovering the .menu 
-  pointer-events: none;
-}
- 
-.top-bar-menu > li:hover .sub-menu, .top-bar-menu > li:focus .sub-menu {
-  pointer-events: auto;
-  z-index: 10;
-  max-height: 2000px;
-  -webkit-transition: none;
-     -moz-transition: none;
-}
-&.has-dropdown.not-click {
-    .dropdown {
-        @extend %anim-button;
-        display:block;
-        visibility: hidden;
-        opacity: 0;
-    }
-    &:hover > .dropdown {
-        visibility: visible;
-        opacity: 1;
+@media (max-width: 640px) {
+        #donate_form tbody tr {
+            width: 100%;
+            display: block;
+        }
+        #donate_form table {
+/*            width: 250px;*/
+            width: 100%;
+            display: block;
+        }
+        #donate_form tbody {
+            width: 100%;
+            display: block;
+        }
+        #main {
+            padding: 0;
+        }
+        
     }
-}
- Progressive Anim
- * ==================================================================
- * This is a lot of redundant code but the result is worth it
- * This should be edited for menus with more or much less than 8 items 
- 
-$baseTime: 66;
-@mixin transition-delay($transitionTime) {
-    $newTime: $transitionTime * $baseTime;
-      -webkit-transition-delay: $newTime;
-     -moz-transition-delay: $newTime;
-      -ms-transition-delay: $newTime;
-       -o-transition-delay: $newTime;
-          transition-delay: $newTime;
-}
-  forward 
-.top-bar-menu > li:hover .sub-menu li:nth-child(1),
-.menu > li:hover .sub-menu li:nth-child(1),
-.sub-menu li:nth-child(8) {
-    @include transition-delay(0);
-}
-
-.top-bar-menu > li:hover .sub-menu li:nth-child(2),
-.sub-menu li:nth-child(7)  {
-    @include transition-delay(1);
-}
-
-.top-bar-menu > li:hover .sub-menu li:nth-child(3),
-.sub-menu li:nth-child(6)  {
-    @include transition-delay(2);
-}
-
-.top-bar-menu > li:hover .sub-menu li:nth-child(4),
-.sub-menu li:nth-child(5)  {
-    @include transition-delay(3);
-}
-
-.top-bar-menu > li:hover .sub-menu li:nth-child(5),
-.sub-menu li:nth-child(4)  {
-    @include transition-delay(4);
-}
-
-.top-bar-menu > li:hover .sub-menu li:nth-child(6),
-.sub-menu li:nth-child(3)  {
-    @include transition-delay(5);
-}
-
-.top-bar-menu > li:hover .sub-menu li:nth-child(7),
-.sub-menu li:nth-child(2) {
-    @include transition-delay(6);
-}
-
-.top-bar-menu > li:hover .sub-menu li:nth-child(8),
-.sub-menu li:nth-child(1)  {
-    @include transition-delay(7);
-}
-
- Default
- ================================================================= 
-.sub-menu li {
-  opacity: 0;
-
-  -webkit-transition: opacity .4s, -webkit-transform .6s, max-height .6s;
-     -moz-transition: opacity .4s,    -moz-transform .6s, max-height .6s;
-      -ms-transition: opacity .4s,     -ms-transform .6s, max-height .6s;
-       -o-transition: opacity .4s,      -o-transform .6s, max-height .6s;
-          transition: opacity .4s,         transform .6s, max-height .6s;
-}
-
-.top-bar-menu > li:hover .sub-menu li, .top-bar-menu > li:focus .sub-menu li {
-  opacity: 1;
-
-  -webkit-transform: none;
-     -moz-transform: none;
-      -ms-transform: none;
-       -o-transform: none;
-          transform: none;
-}
-
- Helix
- ================================================================= 
-.helix {
-  -webkit-perspective: 400px;
-     -moz-perspective: 400px;
-      -ms-perspective: 400px;
-       -o-perspective: 400px;
-          perspective: 400px;
-}
-
-.helix li {
-  -webkit-transform: rotateY(90deg);
-     -moz-transform: rotateY(90deg);
-      -ms-transform: rotateY(90deg);
-       -o-transform: rotateY(90deg);
-          transform: rotateY(90deg);
-}
-
- Wave
- ================================================================= 
-.wave li {
-  -webkit-transform-origin: 0% 0%;
-     -moz-transform-origin: 0% 0%;
-      -ms-transform-origin: 0% 0%;
-       -o-transform-origin: 0% 0%;
-          transform-origin: 0% 0%;
-
-  -webkit-transform: skewY(-90deg);
-     -moz-transform: skewY(-90deg);
-      -ms-transform: skewY(-90deg);
-       -o-transform: skewY(-90deg);
-          transform: skewY(-90deg);
-}
-
- Fly
- ================================================================= 
-.fly {
-  -webkit-perspective: 400px;
-     -moz-perspective: 400px;
-      -ms-perspective: 400px;
-       -o-perspective: 400px;
-          perspective: 400px;
-}
-
-.fly li {
-  -webkit-transform-origin: 50% 50% -50px;
-     -moz-transform-origin: 50% 50% -50px;
-      -ms-transform-origin: 50% 50% -50px;
-       -o-transform-origin: 50% 50% -50px;
-          transform-origin: 50% 50% -50px;
-
-  -webkit-transform: rotateX( -180deg );
-     -moz-transform: rotateX( -180deg );
-      -ms-transform: rotateX( -180deg );
-       -o-transform: rotateX( -180deg );
-          transform: rotateX( -180deg );
-}
-
- Blind
- ================================================================= 
-.blind li {
-  max-height: 0;
-}
-
-.top-bar-menu > li:hover .blind li, .top-bar-menu > li:focus .blind li {
-   This should be changed to the normal height of list-items 
-  max-height: 55px;
-}
-
- Venitian
- ================================================================= 
-.venitian li {
-  -webkit-transform-origin: 50% 0;
-     -moz-transform-origin: 50% 0;
-      -ms-transform-origin: 50% 0;
-       -o-transform-origin: 50% 0;
-          transform-origin: 50% 0;
-
-  -webkit-transform: scale(1,0);
-     -moz-transform: scale(1,0);
-      -ms-transform: scale(1,0);
-       -o-transform: scale(1,0);
-          transform: scale(1,0);
-}*/