new donation page with basic styling.

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

diff --git a/static/scss/_donation.scss b/static/scss/_donation.scss
new file mode 100644 (file)
index 0000000..6033dc9
--- /dev/null
+++ b/static/scss/_donation.scss
@@ -0,0 +1,57 @@
+.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);
+}
+
+.currency-dropdown,
+.ownamount {
+       overflow: hidden;
+       width: 95%;
+       height: 48px;
+       padding: 0 16px;
+       border-radius: 2px;
+       border: none;
+}
+
+.dropdown-wrapper,
+.ownamount {
+       background-color: rgba($blue-grey-900, .08);
+       border-bottom: 2px solid $blue-grey-900;
+       width: 90%;
+}
+.currency-dropdown {
+       background-color: transparent;
+       &:focus {
+               outline: none;
+       }
+}
+
+.inline-card {
+       border-radius: 8px;
+       background-color: $blue-grey-50;
+       padding: 24px;
+}
+
+label.amount {
+       width: 84px;
+       height: 48px;
+       display: block;
+       background-color: white;
+       border-radius: 2px;
+       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;
+       margin: 0 8px 16px 8px;
+       padding-top: 8px;
+}
+
+input[name=amount] {
+       display: none;
+}
+
+input[name=amount]:checked + label {
+       background-image: linear-gradient(120deg, rgb(79, 195, 247), rgb(25, 118, 210));
+       color: white;
+}
\ No newline at end of file