You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
193 lines
2.8 KiB
SCSS
193 lines
2.8 KiB
SCSS
.container {
|
|
padding-top: 10%;
|
|
}
|
|
|
|
.card {
|
|
padding: 5%;
|
|
margin-bottom: 10vh;
|
|
}
|
|
|
|
.birthdayPar {
|
|
display: flex;
|
|
}
|
|
|
|
#subCard1 {
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
-ms-background-size: cover;
|
|
-o-background-size: cover;
|
|
-moz-background-size: cover;
|
|
-webkit-background-size: cover;
|
|
background-position: center;
|
|
height: 25vh;
|
|
margin-top: 2vh;
|
|
margin-right: auto;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.subCard1-row {
|
|
height: 100%;
|
|
z-index: 3;
|
|
}
|
|
|
|
.subCard1-row div {
|
|
width: 100%;
|
|
}
|
|
|
|
.merchant-name p {
|
|
font-size: 3rem;
|
|
}
|
|
|
|
.merchant-logo {
|
|
background-repeat: no-repeat;
|
|
background-size:50%;
|
|
background-position : center;
|
|
}
|
|
|
|
#image1 {
|
|
z-index: 1;
|
|
padding: 0;
|
|
}
|
|
|
|
#subCard1::before {
|
|
content: ' ';
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
background-color: fade_out(black, 0.5);
|
|
left: 0;
|
|
top: 0;
|
|
z-index: 2;
|
|
}
|
|
|
|
#subCard2Part1 {
|
|
padding-top: 5%;
|
|
display: flex;
|
|
flex-direction: column
|
|
}
|
|
|
|
#subCard2Part2 {
|
|
padding-top: 5%;
|
|
}
|
|
|
|
#dateFin {
|
|
height: 10%;
|
|
font-size: 0.9rem;
|
|
z-index: 2;
|
|
}
|
|
|
|
.parrainExit, .newParrain {
|
|
}
|
|
|
|
@media screen and (max-width: 720px) {
|
|
.container {
|
|
padding-top: 20%;
|
|
}
|
|
.mainCard {
|
|
margin-bottom: 20%;
|
|
}
|
|
#nouvelleOp {
|
|
margin-bottom: 20%;
|
|
}
|
|
|
|
.card-data > ul {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
|
|
.card-data ul li {
|
|
margin-bottom: 2%;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 786px) {
|
|
|
|
.subCard1-row {
|
|
height: 35vw;
|
|
.merchant-name p {
|
|
font-size: 2rem;
|
|
}
|
|
.operation-data p {
|
|
font-size: 1rem;
|
|
}
|
|
|
|
.operation-id p {
|
|
font-size: 0.8rem;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
|
|
#footer-1, #footer-2, #footer-3 {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
#footer-1bis {
|
|
padding-bottom: 2% ;
|
|
}
|
|
|
|
.card-footer {
|
|
padding-top: 2%;
|
|
}
|
|
|
|
// This is just to center the spinner
|
|
|
|
html, body { height: 100%; }
|
|
|
|
body {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
// Here is where the magic happens
|
|
|
|
$offset: 187;
|
|
$duration: 1.4s;
|
|
|
|
.spinner {
|
|
animation: rotator $duration linear infinite;
|
|
}
|
|
|
|
@keyframes rotator {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(270deg); }
|
|
}
|
|
|
|
.path {
|
|
stroke-dasharray: $offset;
|
|
stroke-dashoffset: 0;
|
|
transform-origin: center;
|
|
animation:
|
|
dash $duration ease-in-out infinite,
|
|
colors ($duration*4) ease-in-out infinite;
|
|
}
|
|
|
|
@keyframes colors {
|
|
0% { stroke: #4285F4; }
|
|
25% { stroke: #DE3E35; }
|
|
50% { stroke: #F7C223; }
|
|
75% { stroke: #1B9A59; }
|
|
100% { stroke: #4285F4; }
|
|
}
|
|
|
|
@keyframes dash {
|
|
0% { stroke-dashoffset: $offset; }
|
|
50% {
|
|
stroke-dashoffset: $offset/4;
|
|
transform:rotate(135deg);
|
|
}
|
|
100% {
|
|
stroke-dashoffset: $offset;
|
|
transform:rotate(450deg);
|
|
}
|
|
}
|