This commit is contained in:
Robin Hägg 2015-09-10 18:02:45 +02:00
parent 16120cad84
commit 181795fcb2
6 changed files with 37 additions and 28 deletions

View File

@ -1,4 +1,5 @@
<div class="page row process"> <div class="page row process">
<div class="bgel">&nbsp;</div>
<div class="process-band response-band"> <div class="process-band response-band">
<div class="cgbg title-box"> <div class="cgbg title-box">
<h1>Our Process</h1> <h1>Our Process</h1>

View File

@ -7,6 +7,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col splashspacer">&nbsp;</div>
<div class="col postsplash" id="content"> <div class="col postsplash" id="content">
<div class="row top-icon-row"> <div class="row top-icon-row">
<div class="col"> <div class="col">

View File

@ -7,6 +7,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col splashspacer">&nbsp;</div>
<div class="col postsplash" id="content"> <div class="col postsplash" id="content">
<div class="row top-icon-row"> <div class="row top-icon-row">
<div class="col"> <div class="col">

View File

@ -7,6 +7,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="col splashspacer">&nbsp;</div>
<div class="col postsplash" id="content"> <div class="col postsplash" id="content">
<div class="row top-icon-row"> <div class="row top-icon-row">
<div class="col"> <div class="col">

View File

@ -51,10 +51,9 @@
} }
.page.process { .page.process {
@include backgrounder("process-background", "jpg", "no-repeat fixed center/cover"); .bgel{position:fixed;top:0;width:100%;height:100%;@include backgrounder("process-background", "jpg", "no-repeat center/cover");}
height:1%; height:1%;
width:100%; width:100%;
position:relative;
.process-band { .process-band {
@include std-shadow; @include std-shadow;
@ -164,10 +163,13 @@
.splash { .splash {
height:100%; height:100%;
min-height:700px; min-height:500px;
width:100%; width:100%;
position:fixed; position:fixed;
z-index:1; z-index:1;
@media all and(max-height:500px){
position:absolute;
}
.splash-text { .splash-text {
position:absolute; position:absolute;
bottom:20%; bottom:20%;
@ -180,9 +182,12 @@
} }
} }
} }
.splashspacer{
height:100%;
min-height:500px;
width:100%;
}
.postsplash { .postsplash {
position:absolute;
top:100%;
z-index:2; z-index:2;
background:$hardgrey; background:$hardgrey;
text-align:center; text-align:center;

View File

@ -258,40 +258,40 @@ body {
opacity: 1; opacity: 1;
} }
} }
&.anim-pos .page {
&.animate {
transition: transform 0.5s ease-out;
position: absolute;
}
&.leave {
transform:translate(-100%,0)
}
&.leave.active {
transform:translate(-100%,0)
}
&.enter {
transform:translate(100%,0)
}
&.enter.active, &.leave {
transform:translate(0,0)
}
}
&.anim-neg .page { &.anim-neg .page {
&.animate { &.animate {
transition: transform 0.5s ease-out; transition: right 0.5s ease-out;
position: absolute; position: absolute;
} }
&.leave { &.leave {
transform:translate(100%,0) right:-100%;
} }
&.leave.active { &.leave.active {
transform:translate(100%,0) right:-100%;
} }
&.enter { &.enter {
transform:translate(-100%,0) right:100%;
} }
&.enter.active, &.leave { &.enter.active, &.leave {
transform:translate(0,0) right:0;
}
}
&.anim-pos .page {
&.animate {
transition: right 0.5s ease-out;
position: absolute;
}
&.leave {
right:100%;
}
&.leave.active {
right:100%;
}
&.enter {
right:-100%;
}
&.enter.active, &.leave {
right:0;
} }
} }
} }