Adds donation banner and modal window.

Includes auto-conversions between USD and BTC and autogeneration of QR code.
This commit is contained in:
Igor Kuzmenko 2017-08-05 22:23:57 +02:00
parent 0a4820ad1a
commit 9dc45b2827
7 changed files with 380 additions and 0 deletions

160
_sass/_donation-banner.scss Normal file
View file

@ -0,0 +1,160 @@
.donation-btn {
background-color: #4CAF50;
background-image: -webkit-linear-gradient(bottom, #318f20 14%, #4cad2c 70%);
border: none;
border-radius: 10px;
padding: 10px 20px;
color: white;
font-weight: 600;
}
.donation-container {
text-align: center;
.donation-text {
background-color: #ef9e5b;
color: #ffffff;
font-weight: 700;
transition: margin-top .2s ease-in;
height: 90px;
margin-top: -110px;
padding: 10px;
&.expanded {
margin-top: 0;
border-bottom: 4px solid #ef9e5b;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.22);
}
}
.donation-visibility-toggle {
cursor: pointer;
display: inline-block;
background-color: #ef9e5b;
color: #fefefe;
font-weight: 600;
border: 4px solid #ef9e5b;
border-top: 0;
padding: 10px 50px;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.22);
&.active {
margin-top: -4px;
}
}
}
.donation-modal {
/* display: block; */
background: white;
padding: 0 20px;
padding-bottom: 20px;
position: absolute;
top: 70px;
right: 0;
left: 0;
z-index: 1000;
max-width: 600px;
margin: 0 auto;
border-radius: 10px;
transition: transform .2s ease-in, opacity .12s ease-in;
transform-origin: top;
&.hidden {
transform: scale(0.7);
opacity: 0;
}
&.open {
transform: scale(1);
opacity: 1;
}
.modal-close-btn {
float: right;
cursor: pointer;
&:hover {
color: #2c6fad;
}
}
.modal-header-text {
color: #383838;
font-size: 110%;
text-align: left;
font-weight: bold;
margin: 1em 0;
}
.modal-subheader {
text-align: center;
font-size: 16px;
font-weight: bold;
margin: 1.33em 0;
}
.donation-btc-address {
text-align: center;
font-size: 16px;
font-weight: bold;
margin: 1.33em 0;
display: block;
text-align: center;
}
.modal-body {
.donation-amount-btn {
cursor: pointer;
background-color: #ef9e5b;
background-image: -webkit-linear-gradient(bottom, #de8236 14%, #ef9e5b 70%);
border: none;
border-radius: 10px;
padding: 10px 20px;
color: white;
margin-right: 10px;
font-weight: 600;
&:hover {
background-image: -webkit-linear-gradient(bottom, #ef9e5b 14%, #de8236 70%);
}
.donation-amount-usd-in-btc {
font-size: 75%;
}
}
.donation-amount-input {
width: 203px;
margin-top: 15px;
padding: 10px 15px;
border: 2px solid #dadada;
border-radius: 10px;
}
textarea.donation-amount-input {
width: 460px;
margin: 15px 0;
}
}
}
.modal-drop {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 101;
background-color: rgba(0, 0, 0, 0.38);
opacity: 0;
transition: opacity .2s ease-in;
}
@media handheld, only screen and ( max-width: 60em ), only screen and ( max-device-width: 60em ){
.donation-container {
display: none;
}
}

View file

@ -2320,3 +2320,4 @@ h2 .rssicon{
@import 'wallets';
@import 'wallets-menu';
@import 'donation-banner';