729 lines
11 KiB
SCSS
729 lines
11 KiB
SCSS
|
|
.dons2{
|
|
|
|
|
|
#validate_don{
|
|
text-transform:uppercase;
|
|
font-size:1.2em;
|
|
|
|
cursor:pointer;
|
|
}
|
|
.dons_top{
|
|
|
|
min-height:470px;
|
|
box-shadow:0 0 10px rgba(0,0,0,0.5) inset;
|
|
background: url('/dons/fond.jpg') black center center no-repeat;
|
|
background-size:100%;
|
|
background-size:cover;
|
|
margin:0 -10px;
|
|
position:relative;
|
|
padding:30px 0;
|
|
margin-bottom:30px;
|
|
h1{
|
|
position:absolute;
|
|
z-index:10;
|
|
right:20px;
|
|
bottom:20px;
|
|
left:20px;
|
|
font-size:2.3em;
|
|
color:white;
|
|
}
|
|
.gradient{
|
|
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 99%, rgba(0, 0, 0, 0.5) 100%);
|
|
height: 250px;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0px;
|
|
right: 0px;
|
|
|
|
|
|
}
|
|
|
|
&.with_img{
|
|
|
|
padding-top:300px;
|
|
color:white;
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
.donate_panel{
|
|
|
|
position:relative;
|
|
float:left;
|
|
width:33.33%;
|
|
padding:5px;
|
|
box-sizing:border-box;
|
|
min-height:500px;
|
|
|
|
box-sizing:border-box;
|
|
|
|
|
|
z-index:2;
|
|
|
|
.inner{
|
|
padding:15px;
|
|
padding-bottom:60px;
|
|
background:rgba(255,255,255,0.85);
|
|
}
|
|
|
|
.title{
|
|
background:$orange;
|
|
padding:10px;
|
|
color:white;
|
|
font-size:1.3em;
|
|
text-transform:uppercase;
|
|
}
|
|
|
|
|
|
.radio{
|
|
display:inline-block;
|
|
margin-right:50px;
|
|
}
|
|
.actions{
|
|
position:absolute;
|
|
bottom:10px;
|
|
right:10px;
|
|
}
|
|
td{
|
|
vertical-align:top;
|
|
}
|
|
.steps{
|
|
width:100%;
|
|
text-align:center;
|
|
border-top:1px solid $orange;
|
|
border-bottom:1px solid $orange;
|
|
padding:3px 0;
|
|
padding-bottom:0px;
|
|
|
|
margin-bottom:5px;
|
|
td{
|
|
|
|
width:33%;
|
|
}
|
|
|
|
.step{
|
|
width:1.5em;
|
|
height:1.5em;
|
|
border-radius:50%;
|
|
margin:auto;
|
|
color:rgba(107,130,126,1);
|
|
border:3px solid rgba(107,130,126,1);
|
|
font-weight:bold;
|
|
}
|
|
.label{
|
|
font-size:0.9em;
|
|
}
|
|
a{
|
|
|
|
.step{
|
|
border-color:$orange;
|
|
background:$orange;
|
|
color:white;
|
|
|
|
|
|
}
|
|
|
|
|
|
color:$orange;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.input{
|
|
|
|
&.has-error{
|
|
|
|
|
|
.form-control{
|
|
border: 1px solid red;
|
|
}
|
|
}
|
|
.control-label{
|
|
display:block;
|
|
font-size:0.9em;
|
|
|
|
}
|
|
.form-control{
|
|
display:block;
|
|
box-sizing:border-box;
|
|
width:100%;
|
|
padding:5px;
|
|
font-size:1em;
|
|
|
|
}
|
|
.help-block{
|
|
display:block;
|
|
color:red;
|
|
font-size:0.9em;
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
fieldset{
|
|
border:0;
|
|
padding:0;
|
|
}
|
|
|
|
.btn{
|
|
box-sizing:border-box;
|
|
width:100%;
|
|
font-size:1em;
|
|
padding:10px 20px;
|
|
|
|
border:1px solid gray;
|
|
|
|
display:inline-block;
|
|
color:white;
|
|
width:auto;
|
|
font-size:1em;
|
|
background:orange;
|
|
border-color:transparent;
|
|
margin:0 !important;
|
|
margin-top:10px !important;
|
|
cursor:pointer;
|
|
&:hover{
|
|
background:rgba(80,80,80,1);
|
|
|
|
}
|
|
&:btn-primary{
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
.donate_grid{
|
|
padding-top:10px;
|
|
.amount, .personalized_amount_container{
|
|
|
|
margin-right:13px;
|
|
|
|
|
|
display:inline-block;
|
|
|
|
cursor:pointer;
|
|
|
|
|
|
margin-bottom:13px;
|
|
padding-right:0px;
|
|
|
|
.price{
|
|
display:inline-block;
|
|
padding:7px 12px;
|
|
font-weight:bold;
|
|
|
|
background:#d9d9d9;
|
|
color:black;
|
|
|
|
border:1px solid transparent;
|
|
}
|
|
|
|
.fiscal{
|
|
display:block;
|
|
font-size:0.8em;
|
|
font-weight:normal;
|
|
|
|
|
|
}
|
|
&.active{
|
|
.price, .personalized_amount{
|
|
// border:2px solid black;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.personalized_amount_ponctuel_container, .personalized_amount_mensuel_container{
|
|
|
|
display:inline;
|
|
}
|
|
.personalized_amount{
|
|
display:inline-block;
|
|
width:125px !important;
|
|
|
|
padding:8px 10px;
|
|
font-size:1em;
|
|
&.active{
|
|
border:2px solid black;
|
|
|
|
}
|
|
}
|
|
}
|
|
.donate_content{
|
|
|
|
|
|
.donate_bottom_text{
|
|
margin:30px 0;
|
|
padding:15px;
|
|
background:rgba(239,239,239,1);
|
|
h2{
|
|
margin-top:0;
|
|
}
|
|
}
|
|
.donate_panel{
|
|
.inner{
|
|
|
|
background:rgba(239,239,239,1);
|
|
}
|
|
h2{
|
|
margin-top:0;
|
|
}
|
|
|
|
}
|
|
|
|
.orange{
|
|
.inner{
|
|
background:$orange;
|
|
color:white;
|
|
h2{
|
|
color:white;
|
|
}
|
|
}
|
|
}
|
|
h2{
|
|
font-weight:900;
|
|
line-height:1.2em;
|
|
font-size:1.1em;
|
|
color:$orange;
|
|
}
|
|
.voice_img{
|
|
position:relative;
|
|
text-align:justify;
|
|
|
|
h2{
|
|
|
|
margin-top:0;
|
|
position:absolute;
|
|
top:5px;
|
|
left:10px;
|
|
right:10px;
|
|
text-align:center;
|
|
font-size:1.25em !important;
|
|
}
|
|
|
|
img{
|
|
display:block;
|
|
}
|
|
.gradient{
|
|
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 99%, rgba(0, 0, 0, 0.5) 100%);
|
|
height: 100px;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0px;
|
|
right: 0px;
|
|
|
|
|
|
}
|
|
|
|
p{
|
|
position:absolute;
|
|
text-align:center;
|
|
color:white;
|
|
bottom:10px;
|
|
left:10px;
|
|
right:10px;
|
|
font-size:0.9em;
|
|
margin:0;
|
|
}
|
|
|
|
}
|
|
.inner-left{
|
|
h2{
|
|
font-size:1.3em;
|
|
margin-top:0;
|
|
}
|
|
width:45%;
|
|
box-sizing:border-box;
|
|
padding:20px;
|
|
float:left;
|
|
|
|
|
|
.inner{
|
|
padding:20px;
|
|
background:$orange;
|
|
color:white;
|
|
|
|
a{
|
|
display:inline-block;
|
|
margin-top:20px;
|
|
margin-bottom:10px;
|
|
color:white;
|
|
padding:10px 20px;
|
|
border:1px solid white;
|
|
|
|
|
|
width:auto;
|
|
font-size:1em;
|
|
background:transparent;
|
|
border-radius:0;
|
|
cursor:pointer;
|
|
&:hover{
|
|
background:rgba(80,80,80,1);
|
|
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
.inner-right{
|
|
width:55%;
|
|
box-sizing:border-box;
|
|
padding:20px 30px;
|
|
padding-left:10px;
|
|
float:left;
|
|
|
|
}
|
|
|
|
.inner{
|
|
padding:20px;
|
|
}
|
|
.bar{
|
|
max-width:400px;
|
|
text-align:right;
|
|
color:white;
|
|
|
|
}
|
|
.dark{
|
|
background:rgba(243,243,243,1);
|
|
padding:10px 20px;
|
|
margin-top:10px;
|
|
p{ margin-bottom:5px;}
|
|
h2{
|
|
margin-top:10px;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.donate_month{
|
|
|
|
h4{
|
|
font-weight:bold;
|
|
margin-top:0;
|
|
margin-bottom:10px;
|
|
margin:0;
|
|
padding:0;
|
|
}
|
|
img{
|
|
float:left;
|
|
width:120px;
|
|
margin-left:10px;
|
|
margin-bottom:10px;
|
|
}
|
|
p{
|
|
margin:2px 0;
|
|
font-size:0.9em;
|
|
}
|
|
.desc{
|
|
margin-left:140px;
|
|
}
|
|
}
|
|
|
|
|
|
.sponsorship_animal{
|
|
|
|
img{
|
|
width:290px;
|
|
float:left;
|
|
border-radius:50%;
|
|
margin:30px;
|
|
}
|
|
margin-bottom:20px;
|
|
h3{
|
|
font-weight:bold;
|
|
color:$orange;
|
|
}
|
|
.inner{
|
|
padding:10px;
|
|
margin-left:350px;
|
|
}
|
|
a{
|
|
display:inline-block;
|
|
color:$orange;
|
|
padding:10px 20px;
|
|
border:1px solid $orange;
|
|
}
|
|
}
|
|
|
|
#sponsorship_donate{
|
|
float:right;
|
|
#donate_panel{
|
|
|
|
.steps{
|
|
border-top:0;
|
|
}
|
|
position:relative;
|
|
background:white;
|
|
border-top:2px solid $orange;
|
|
width:550px;
|
|
padding-left:20px;
|
|
padding-right:20px;
|
|
box-shadow:0 0 0 white;
|
|
&:after{
|
|
content: '';
|
|
position: absolute;
|
|
border: 15px solid transparent;
|
|
top: 40%;
|
|
left: 0;
|
|
|
|
border-color: transparent;
|
|
border-left-color: $orange;
|
|
|
|
|
|
}
|
|
}
|
|
|
|
}
|
|
.sponsor_container{
|
|
background:$orange;
|
|
border-bottom:2px solid $orange;
|
|
}
|
|
.sponsorship_animal_show{
|
|
margin-right:550px;
|
|
background:$orange;
|
|
color:white;
|
|
.inner{
|
|
max-width:500px;
|
|
margin:auto;
|
|
padding:20px 10px;
|
|
}
|
|
img{
|
|
border-radius:50%;
|
|
display:block;
|
|
margin:auto;
|
|
}
|
|
text-align:center;
|
|
|
|
}
|
|
|
|
.bloc-grille-dons{
|
|
background:rgba(255,255,255,0.8);
|
|
.header{
|
|
input{
|
|
display:none;
|
|
//margin-right:10px;
|
|
}
|
|
label{
|
|
display:block;
|
|
color:white;
|
|
font-weight:bold;
|
|
padding:10px;
|
|
cursor:pointer;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.content{
|
|
padding:10px;
|
|
|
|
}
|
|
|
|
|
|
}
|
|
.bloc-recurrent{
|
|
border: 1px solid #628DC4;
|
|
|
|
.header{
|
|
background:#628DC4;
|
|
|
|
}
|
|
|
|
.personalized_amount_mensuel_container{
|
|
|
|
&.active{
|
|
#personalized_amount_mensuel{
|
|
border:4px solid #628DC4 ;}
|
|
}
|
|
}
|
|
|
|
.amount{
|
|
|
|
&.active{
|
|
.price{
|
|
background:#628DC4;
|
|
color:white;}
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.bloc-ponctuel{
|
|
border: 1px solid #6BB3E5;
|
|
|
|
.header{
|
|
background:#6BB3E5;
|
|
|
|
}
|
|
.personalized_amount_ponctuel_container{
|
|
|
|
&.active{
|
|
#personalized_amount_ponctuel{
|
|
border:4px solid #6BB3E5 ;}
|
|
}
|
|
}
|
|
.amount{
|
|
|
|
&.active{
|
|
.price{
|
|
background:#6BB3E5;
|
|
color:white;}
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.donate_infos{
|
|
font-size:0.9em;
|
|
line-height:1.3em;
|
|
p{
|
|
margin:0;
|
|
}
|
|
|
|
p:first-child{
|
|
margin-bottom:5px;
|
|
|
|
}
|
|
p:last-child{
|
|
margin-bottom:0;
|
|
}
|
|
padding-top:5px;
|
|
//padding-bottom:10px;
|
|
}
|
|
|
|
.top{
|
|
background:rgba(255,255,255,0.85);
|
|
img{
|
|
height:100px;
|
|
padding:20px 10px;
|
|
float:left;
|
|
}
|
|
h2{
|
|
font-size:2em;
|
|
line-height:1em;
|
|
text-align:center;
|
|
margin:0;
|
|
padding:30px;
|
|
padding-top:60px;
|
|
}
|
|
}
|
|
.top_desc{
|
|
background:rgba($orange, 0.85);
|
|
padding:15px;
|
|
color:white;
|
|
margin-bottom:30px;
|
|
p{
|
|
margin:5px 0;
|
|
line-height:1.4em;
|
|
|
|
}
|
|
padding-bottom:10px;
|
|
}
|
|
|
|
|
|
@media screen and (max-width:600px) {
|
|
|
|
.dons_top{
|
|
padding:0;
|
|
|
|
}
|
|
|
|
#donate_panel{
|
|
width:auto;
|
|
|
|
}
|
|
|
|
.adhesion_top{
|
|
#donate_panel{
|
|
width:auto;
|
|
|
|
}
|
|
}
|
|
|
|
.donate_months, .donate_content{
|
|
display:none;
|
|
}
|
|
|
|
#sponsorship_donate{
|
|
float:none;
|
|
#donate_panel{
|
|
width:auto;
|
|
|
|
.actions{
|
|
position:static;
|
|
text-align:center;
|
|
padding-top:20px;
|
|
}
|
|
&:after{
|
|
display:none;
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
.sponsorship_animal{
|
|
|
|
|
|
|
|
|
|
img{
|
|
width:200px;
|
|
float:none;
|
|
display:block;
|
|
margin:auto;
|
|
margin-bottom:0;
|
|
}
|
|
.inner{
|
|
margin-left: 0px;
|
|
}
|
|
margin-bottom:30px;
|
|
h3{
|
|
margin-top:0;
|
|
}
|
|
}
|
|
.sponsorship_center{
|
|
width:auto !important;
|
|
text-align:center;
|
|
padding:10px;
|
|
}
|
|
|
|
.sponsorship_animal_show{
|
|
|
|
margin:0;
|
|
|
|
img{
|
|
width:150px;
|
|
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@media screen and (max-width:800px) {
|
|
.dons2 .top h2{
|
|
padding-top:0px;
|
|
}
|
|
.dons2 .donate_panel{
|
|
float:none;
|
|
min-height:auto !important;
|
|
width:100%;
|
|
.inner{
|
|
height:auto !important;
|
|
}
|
|
}
|
|
|
|
} |