added "or" line and javascript switching for currency and frequency

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

diff --git a/static/scss/_donation.scss b/static/scss/_donation.scss
index 82322f3bd9255a2522e56b5ac2bd10b15d6461cc..09a733b434db7c94645dac87b125995455037b22 100644 (file)
--- a/static/scss/_donation.scss
+++ b/static/scss/_donation.scss
@@ -39,6 +39,8 @@ input.radiobtn:not(old):checked + label {
        border-radius: 8px;
        background-color: $blue-grey-50;
        padding: 24px;
+       position: relative;
+       padding: 24px 20px;
 }
 
 label.amount {
@@ -50,9 +52,9 @@ label.amount {
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 1px 2px 0 rgba(0, 0, 0, 0.23);
        font-size: 20px;
        color: $blue-400;
-       text-align: left;
+       text-align: center;
        margin: 0 8px 16px 8px;
-       padding-top: 8px;
+       padding: 8px 0 0 0;
 }
 
 input[name=amount] {
@@ -62,4 +64,28 @@ input[name=amount] {
 input[name=amount]:checked + label {
        background-image: linear-gradient(120deg, rgb(79, 195, 247), rgb(25, 118, 210));
        color: white;
+}
+
+.or {
+       display: block;
+       height: 200px;
+       width: 1px;
+       border: 1px solid $blue-grey-300;
+       position: absolute;
+       left: 350px;
+       top: 12px;
+       &:before {
+               content: "OR";
+               font-family: 'Ubuntu', sans-serif;
+               font-size: 16px;
+               font-weight: 500;
+               color: $blue-grey-300;
+               background-color: $blue-grey-50;
+               display: block;
+               position: absolute;
+               top: 12px;
+               left: -12px;
+               width: 24px;
+               height: 24px;
+       }
 }
\ No newline at end of file