You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
453 lines
7.7 KiB
453 lines
7.7 KiB
// Carrousel
|
|
// --------------------------------------------------
|
|
|
|
.Carrousel-nav {
|
|
position: absolute;
|
|
z-index: 1;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
padding: 50px 0 10px;
|
|
background: linear-gradient(to bottom, rgba(#000, 0) 0%, rgba(#000, 0.6) 100%);
|
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000', endColorstr='#99000000', GradientType=0);
|
|
}
|
|
|
|
.Carrousel-navItem {
|
|
position: relative;
|
|
margin-left: 5px;
|
|
text-indent: -9000px;
|
|
|
|
&:first-child {
|
|
margin-left: 0;
|
|
}
|
|
|
|
&.is-active {
|
|
.Carrousel-navLink {
|
|
background: #364046;
|
|
}
|
|
}
|
|
}
|
|
|
|
.Carrousel-navLink {
|
|
display: block;
|
|
position: relative;
|
|
z-index: 2;
|
|
width: 12px;
|
|
height: 12px;
|
|
border-radius: 50%;
|
|
background: #FFF;
|
|
}
|
|
|
|
.Carrousel-slide {
|
|
position: absolute;
|
|
z-index: 1;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
-webkit-transform: translateX(-100%);
|
|
transform: translateX(-100%);
|
|
opacity: 0;
|
|
background-color: #F7F7F7;
|
|
|
|
&.is-active {
|
|
-webkit-animation: slideIn 0.8s ease 0.3s;
|
|
animation: slideIn 0.8s ease 0.3s;
|
|
-webkit-animation-fill-mode: forwards;
|
|
animation-fill-mode: forwards;
|
|
}
|
|
|
|
&.is-disabled {
|
|
picture,
|
|
img {
|
|
opacity: 0.6;
|
|
}
|
|
}
|
|
}
|
|
|
|
.Carrousel-slide--01 {
|
|
background: url($assetsDir + "/images/layout/signup/slide-01-bg.png") no-repeat;
|
|
|
|
&.is-active {
|
|
.Carrousel-card {
|
|
position: absolute;
|
|
width: 110px;
|
|
height: 110px;
|
|
-webkit-transform: scale(0);
|
|
transform: scale(0);
|
|
-webkit-animation-name: fadeIn;
|
|
animation-name: fadeIn;
|
|
-webkit-animation-duration: 0.3s;
|
|
animation-duration: 0.3s;
|
|
opacity: 0;
|
|
background-repeat: no-repeat;
|
|
-webkit-animation-fill-mode: forwards;
|
|
animation-fill-mode: forwards;
|
|
}
|
|
}
|
|
}
|
|
|
|
.Carrousel-card--01,
|
|
.Carrousel-card--06 {
|
|
background-image: url($assetsDir + "/images/layout/signup/slide-01-card-01-bg.png");
|
|
}
|
|
|
|
.Carrousel-card--02,
|
|
.Carrousel-card--03,
|
|
.Carrousel-card--07 {
|
|
background-image: url($assetsDir + "/images/layout/signup/slide-01-card-02-bg.png");
|
|
}
|
|
|
|
.Carrousel-card--04,
|
|
.Carrousel-card--05,
|
|
.Carrousel-card--08 {
|
|
background-image: url($assetsDir + "/images/layout/signup/slide-01-card-03-bg.png");
|
|
}
|
|
|
|
.Carrousel-card--01 {
|
|
top: 160px;
|
|
left: 26px;
|
|
-webkit-animation-delay: 0.8s;
|
|
animation-delay: 0.8s;
|
|
}
|
|
|
|
.Carrousel-card--02 {
|
|
top: 160px;
|
|
left: 156px;
|
|
-webkit-animation-delay: 0.9s;
|
|
animation-delay: 0.9s;
|
|
}
|
|
|
|
.Carrousel-card--03 {
|
|
top: 160px;
|
|
left: 284px;
|
|
-webkit-animation-delay: 1s;
|
|
animation-delay: 1s;
|
|
}
|
|
|
|
.Carrousel-card--04 {
|
|
top: 160px;
|
|
left: 412px;
|
|
-webkit-animation-delay: 1.1s;
|
|
animation-delay: 1.1s;
|
|
}
|
|
|
|
.Carrousel-card--05 {
|
|
top: 293px;
|
|
left: 28px;
|
|
-webkit-animation-delay: 1.2s;
|
|
animation-delay: 1.2s;
|
|
}
|
|
|
|
.Carrousel-card--06 {
|
|
top: 293px;
|
|
left: 156px;
|
|
-webkit-animation-delay: 1.3s;
|
|
animation-delay: 1.3s;
|
|
}
|
|
|
|
.Carrousel-card--07 {
|
|
top: 293px;
|
|
left: 284px;
|
|
-webkit-animation-delay: 1.4s;
|
|
animation-delay: 1.4s;
|
|
}
|
|
|
|
.Carrousel-card--08 {
|
|
top: 293px;
|
|
left: 412px;
|
|
-webkit-animation-delay: 1.5s;
|
|
animation-delay: 1.5s;
|
|
}
|
|
|
|
.Carrousel-text {
|
|
position: relative;
|
|
height: 44px;
|
|
}
|
|
|
|
.Carrousel-textItem {
|
|
position: absolute;
|
|
left: 20px;
|
|
width: 100%;
|
|
-webkit-transition: all 0.8s ease-out;
|
|
transition: all 0.8s ease-out;
|
|
opacity: 0;
|
|
color: rgba(white, 0.5);
|
|
font-size: 16px;
|
|
font-weight: 200;
|
|
line-height: 42px;
|
|
text-align: center;
|
|
|
|
&.is-active {
|
|
left: 0;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.Carrousel-textIcon {
|
|
display: inline-block;
|
|
width: 42px;
|
|
height: 42px;
|
|
margin-right: 20px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.Carrousel-slide--02 {
|
|
background: url($assetsDir + "/images/layout/signup/slide-02-bg.png") no-repeat;
|
|
|
|
&.is-active {
|
|
.Carrousel-slide--02-inner {
|
|
opacity: 1;
|
|
background-position: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
.Carrousel-slide--02-inner,
|
|
.Carrousel-slide--04-inner {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
-webkit-transition: all 0.4s ease-out 1s;
|
|
transition: all 0.4s ease-out 1s;
|
|
opacity: 0;
|
|
background-color: rgba(#000, 0.5);
|
|
background-repeat: no-repeat;
|
|
background-position: center 0;
|
|
}
|
|
|
|
.Carrousel-slide--02-inner {
|
|
background-image: url($assetsDir + "/images/layout/signup/slide-02-upload.png");
|
|
}
|
|
|
|
.Carrousel-slide--03 {
|
|
background: url($assetsDir + "/images/layout/signup/slide-03-bg.png") no-repeat;
|
|
|
|
&.is-active {
|
|
.Carrousel-point {
|
|
-webkit-animation-name: fadeIn;
|
|
animation-name: fadeIn;
|
|
-webkit-animation-duration: 0.3s;
|
|
animation-duration: 0.3s;
|
|
-webkit-animation-fill-mode: forwards;
|
|
animation-fill-mode: forwards;
|
|
}
|
|
|
|
.Carrousel-slide--03-inner {
|
|
right: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.Carrousel-slide--03-inner {
|
|
position: absolute;
|
|
z-index: 1001;
|
|
right: -120px;
|
|
bottom: 0;
|
|
width: 211px;
|
|
height: 330px;
|
|
-webkit-transition: all 0.3s ease-out 1.5s;
|
|
transition: all 0.3s ease-out 1.5s;
|
|
background: url($assetsDir + "/images/layout/signup/slide-03-editor.png") no-repeat;
|
|
}
|
|
|
|
.Carrousel-points {
|
|
position: relative;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.Carrousel-point {
|
|
position: absolute;
|
|
z-index: 1000;
|
|
width: 15px;
|
|
height: 15px;
|
|
-webkit-transform: scale(0);
|
|
transform: scale(0);
|
|
border: 2px solid #FFF;
|
|
border-radius: 50%;
|
|
opacity: 0;
|
|
background: #ED9259;
|
|
}
|
|
|
|
.Carrousel-point--01 {
|
|
top: 150px;
|
|
left: 150px;
|
|
-webkit-animation-delay: 2.3s;
|
|
animation-delay: 2.3s;
|
|
}
|
|
|
|
.Carrousel-point--02 {
|
|
top: 252px;
|
|
left: 124px;
|
|
-webkit-animation-delay: 3s;
|
|
animation-delay: 3s;
|
|
}
|
|
|
|
.Carrousel-point--03 {
|
|
top: 332px;
|
|
left: 124px;
|
|
-webkit-animation-delay: 3.3s;
|
|
animation-delay: 3.3s;
|
|
}
|
|
|
|
.Carrousel-point--04 {
|
|
top: 274px;
|
|
left: 150px;
|
|
-webkit-animation-delay: 2.8s;
|
|
animation-delay: 2.8s;
|
|
}
|
|
|
|
.Carrousel-point--05 {
|
|
top: 304px;
|
|
left: 216px;
|
|
-webkit-animation-delay: 3.5s;
|
|
animation-delay: 3.5s;
|
|
}
|
|
|
|
.Carrousel-point--06 {
|
|
top: 246px;
|
|
left: 216px;
|
|
-webkit-animation-delay: 2.5s;
|
|
animation-delay: 2.5s;
|
|
}
|
|
|
|
.Carrousel-point--07 {
|
|
top: 246px;
|
|
left: 246px;
|
|
-webkit-animation-delay: 4s;
|
|
animation-delay: 4s;
|
|
}
|
|
|
|
.Carrousel-point--08 {
|
|
top: 238px;
|
|
left: 266px;
|
|
-webkit-animation-delay: 2.3s;
|
|
animation-delay: 2.3s;
|
|
}
|
|
|
|
.Carrousel-point--09 {
|
|
top: 216px;
|
|
left: 314px;
|
|
-webkit-animation-delay: 2.5s;
|
|
animation-delay: 2.5s;
|
|
}
|
|
|
|
.Carrousel-point--10 {
|
|
top: 180px;
|
|
left: 294px;
|
|
-webkit-animation-delay: 2.4s;
|
|
animation-delay: 2.4s;
|
|
}
|
|
|
|
.Carrousel-slide--04 {
|
|
background: url($assetsDir + "/images/layout/signup/slide-04-bg.png") no-repeat;
|
|
|
|
&.is-active {
|
|
.Carrousel-slide--04-inner {
|
|
opacity: 1;
|
|
background-position: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
.Carrousel-slide--04-inner {
|
|
background-image: url($assetsDir + "/images/layout/signup/slide-04-share.png");
|
|
}
|
|
|
|
@-webkit-keyframes slideIn {
|
|
0% {
|
|
-webkit-transform: translateX(-100%);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translateX(0%);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes slideIn {
|
|
0% {
|
|
transform: translateX(-100%);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(0%);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes fadeIn {
|
|
0% {
|
|
-webkit-transform: scale(0);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes fadeIn {
|
|
0% {
|
|
transform: scale(0);
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes animationProgress {
|
|
0% {
|
|
width: 0;
|
|
}
|
|
|
|
100% {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
@keyframes animationProgress {
|
|
0% {
|
|
width: 0;
|
|
}
|
|
|
|
100% {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
@-webkit-keyframes slideOut {
|
|
0% {
|
|
-webkit-transform: translateX(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
-webkit-transform: translateX(-100%);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
@keyframes slideOut {
|
|
0% {
|
|
transform: translateX(0);
|
|
opacity: 1;
|
|
}
|
|
|
|
100% {
|
|
transform: translateX(-100%);
|
|
opacity: 0;
|
|
}
|
|
}
|