Donation page responsivness

[people/shoehn/ipfire.org.git] / static / scss / _donation.scss

diff --git a/static/scss/_donation.scss b/static/scss/_donation.scss
index 09a733b434db7c94645dac87b125995455037b22..322b00cd6ef5169f8dbcda9d38145463544c19fd 100644 (file)
--- a/static/scss/_donation.scss
+++ b/static/scss/_donation.scss
@@ -1,7 +1,63 @@
+.donation {
+       background-image: url('../img/header-background.jpg');
+       background-size: cover;
+       background-attachment: fixed;
+       background-position: center center;
+       width: 100vw;
+       height: 768px;
+       margin-bottom: 1122px;
+       @include media-breakpoint-up(sm) {
+               margin-bottom: 1078px;
+       }
+       @include media-breakpoint-up(md) {
+               margin-bottom: 668px;
+       }
+       @include media-breakpoint-up(lg) {
+               margin-bottom: 522px;
+       }
+       @include media-breakpoint-up(xl) {
+               height: 800px;
+               margin-bottom: 328px;
+       }
+}
+
 .donation-card {
        border-radius: 4px;
        background-color: white;
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
+       @include media-breakpoint-down(sm) {
+               background-color: transparent;
+               box-shadow: none;
+               border-radius: 0;
+       }
+       h3 a {
+               color: white;
+       }
+       .card {
+               @include media-breakpoint-down(sm) {
+                       height: 1100px;
+                       margin-bottom: 32px;
+                       border-radius: 4px;
+                       background-color: white;
+                       box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
+               }
+               @include media-breakpoint-down(xs) {
+                       border-radius: 0;
+                       box-shadow: none;
+                       margin-bottom: 0;
+               }
+       }
+       .info {
+               border-radius: 4px 0 0 4px;
+               @include media-breakpoint-down(sm) {
+                       border-radius: 4px;
+                       box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.12), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
+               }
+               @include media-breakpoint-down(xs) {
+                       border-radius: 0;
+                       box-shadow: none;
+               }
+       }
 }
 
 .ownamount {
@@ -28,7 +84,10 @@ input.radiobtn:not(old) + label {
        background-image: url("/static/img/icons/icon-radiobtn-off.png");
        background-repeat: no-repeat;
        background-position: 0 0;
-       padding-left: 38px;
+       padding-left: 40px;
+       @include media-breakpoint-up(lg) {
+               padding-left: 28px;
+       }
 }
 
 input.radiobtn:not(old):checked + label {
@@ -41,10 +100,13 @@ input.radiobtn:not(old):checked + label {
        padding: 24px;
        position: relative;
        padding: 24px 20px;
+       #amount {
+               margin-left: -8px;
+       }
 }
 
 label.amount {
-       width: 84px;
+       width: 76px;
        height: 48px;
        display: block;
        background-color: white;
@@ -53,8 +115,63 @@ label.amount {
        font-size: 20px;
        color: $blue-400;
        text-align: center;
-       margin: 0 8px 16px 8px;
+       margin: 0 4px 12px 4px;
        padding: 8px 0 0 0;
+       @include media-breakpoint-up(sm) {
+               width: 84px;
+               margin: 0 8px 16px 8px;
+       }
+}
+
+label.cc img {
+       height: 24px;
+}
+
+#ccpayment,
+#paymentpaypal,
+#sepapayment {
+       @include media-breakpoint-down(lg) {
+               padding-bottom: 24px;
+               margin-bottom: 32px;
+               label img {
+                       position: relative;
+               }
+       }
+}
+
+#ccpayment {
+       @include media-breakpoint-up(lg) {
+               margin-top: 16px;
+               label {
+                       background-position: 0 4px;
+               }
+       }
+}
+
+#paymentpaypal {
+       @include media-breakpoint-down(lg) {
+               label img {
+                       top: -7px;
+               }
+       }
+       @include media-breakpoint-up(lg) {
+               margin-top: 14px;
+               label {
+                       background-position: 0 6px;
+               }
+       }
+       @include media-breakpoint-up(xl) {
+               margin-top: 0;
+               label {
+                       background-position: 0 20px;
+               }
+       }
+}
+
+#sepapayment {
+       @include media-breakpoint-up(lg) {
+               padding-top: 20px;
+       }
 }
 
 input[name=amount] {
@@ -68,24 +185,48 @@ input[name=amount]:checked + label {
 
 .or {
        display: block;
-       height: 200px;
-       width: 1px;
+       height: 1px;
+       width: 90%;
        border: 1px solid $blue-grey-300;
        position: absolute;
-       left: 350px;
-       top: 12px;
+       left: 5%;
+       top: 212px;
+       @include media-breakpoint-up(sm) {
+               top: 222px;
+       }
+       @include media-breakpoint-up(lg) {
+               height: 200px;
+               width: 1px;
+               border: 1px solid $blue-grey-300;
+               left: 257px;
+               top: 12px;
+       }
+       @include media-breakpoint-up(xl) {
+               left: 350px;
+       }
        &:before {
                content: "OR";
                font-family: 'Ubuntu', sans-serif;
                font-size: 16px;
                font-weight: 500;
+               text-align: center;
                color: $blue-grey-300;
                background-color: $blue-grey-50;
                display: block;
                position: absolute;
-               top: 12px;
-               left: -12px;
-               width: 24px;
+               top: -13px;
+               left: 50%;
+               margin-left: -20px;
+               width: 40px;
                height: 24px;
+               @include media-breakpoint-up(lg) {
+                       text-align: left;
+                       display: block;
+                       top: 12px;
+                       left: -12px;
+                       margin-left: 0;
+                       width: 24px;
+                       height: 24px;
+               }
        }
 }
\ No newline at end of file