/*
* Styles: Body, HTML, and container
* 1: Make the application fullscreen
* 2: Basic reset styles
*/
body,
html,
.seq {
/* #1 */
width: 100%;
height: 100%;
/* #2 */
margin: 0;
padding: 0;
}
/*
* Styles: Container
* 1: Canvas, steps, and content should be positioned relative to the container
* 2: Hide anything that goes beyond the boundaries of the Sequence container
* 3: Some basic styles
* 4: Set the initial background color
* 5: Make the background color transition when navigating between steps
*/
.seq {
/* #1 */
position: relative;
/* #2 */
overflow: hidden;
/* #3 */
font-family: sans-serif;
color: white;
text-align: center;
/* #4 */
background-color: #2A93BC;
/* #5 */
-webkit-transition-duration: .5s;
transition-duration: .5s;
-webkit-transition-property: background-color;
transition-property: background-color;
}
/*
* Styles: Canvas and steps
* 1: Make the width/height of the screen, canvas, and steps the same size as the Sequence element
* 2: Reset the canvas and steps for better browser consistency
*/
.seq-canvas,
.seq-canvas > * {
/* #1 */
height: 60%;
width: 100%;
/* #2 */
margin: 0;
padding: 0;
list-style: none;
}
/*
* Styles: steps
* 1: Position steps all in the same place
* 2: Add whitespace around each step
* 3: Make space for the pagination
*/
.seq-canvas > * {
/* #1 */
position: absolute;
/* #2 */
padding: 2px;
box-sizing: border-box;
/* #3 */
height: 70%;
top: 0;
bottom: 0px;
}
.seq-step1 {
background-color: #2A93BC;
}
.seq-step2 {
background-color: #6BC85E;
}
.seq-step3 {
background-color: #45367E;
}
.seq-step4 {
background-color: #2A93BC;
}
.seq-step5 {
background-color: #6BC85E;
}
.seq-step6 {
background-color: #45367E;
}
.seq-step7 {
background-color: #2A93BC;
}
.feature {
width: 60%;
height: 60%;
}
.seq-next,
.seq-prev,
.seq-pagination {
position: relative;
display: inline-block;
vertical-align: middle;
margin-top: 0;
}
/*
* Add some space to sides of pagination
*/
.seq-pagination {
margin: 1 1em;
padding: 1;
}
/*
* Styles: pagination links
* 1: Make the links relative so their active indicator dot can be position: absolute
* 2: Reset styles
* 3: Make the links sit side-by-side
* 4: General styles
*/
.seq-pagination li {
/* #1 */
position: relative;
/* #2 */
list-style: none;
/* #3 */
display: inline-block;
vertical-align: middle;
/* #4 */
width: 80px;
height: 80px;
margin: 0 .10em;
}
/*
* Styles: A small dot that appears when a pagination link is active
* 1: position the dot under the image and centered
* 2: Make the dot transparent when not active and set up a transition for when it becomes active
*/
.seq-pagination li:before {
/* #1 */
content: "";
display: block;
position: absolute;
top: 100%;
left: 50%;
width: 6px;
height: 6px;
margin-left: -3px;
margin-top: .1em;
border-radius: 50%;
background: white;
/* #2 */
opacity: 0;
-webkit-transition-duration: .25s;
transition-duration: .25s;
-webkit-transition-property: opacity;
transition-property: opacity;
}
/*
* Show the indicator dot for the current link
*/
.seq-pagination .seq-current:before {
opacity: .7;
}
/*
* Reset styles
*/
.seq-pagination img,
.seq-pagination a {
display: block;
border: none;
}
@media only screen and (min-width: 200px) {
.feature {
width: 30%;
}
/* Reset font-size on valigned elements */
.valign > .vcenter {
font-size: 12px;
}
.seq-pagination {
/*margin: 1 1em;*/
padding: 0;
}
.seq-pagination li {
/* #1 */
position: relative;
/* #2 */
list-style: none;
/* #3 */
display: inline-block;
vertical-align: middle;
/* #4 */
width: 25px;
height: 25px;
margin: 0 0.2em;
}
/* Ghost element */
.valign:before {
content: "";
height: 30%;
}
}
@media only screen and (min-width: 601px) {
.feature {
width: 60%;
}
/* Reset font-size on valigned elements */
.valign > .vcenter {
font-size: 16px;
}
.seq-pagination {
margin: 1 1em;
padding: 1;
}
.seq-pagination li {
/* #1 */
position: relative;
/* #2 */
list-style: none;
/* #3 */
display: inline-block;
vertical-align: middle;
/* #4 */
width: 60px;
height: 60px;
margin: 0 .25em;
}
/* Ghost element */
.valign:before {
content: "";
height: 60%;
}
}
/* Vertically align the ghost and desired elements */
.valign:before,
.valign > .vcenter {
display: inline-block;
vertical-align: middle;
}
/* Remove 4px gap to allow consistent valign */
.valign {
font-size: 0;
}
/*
* 1: Reset
* 2: Titles should start as transparent
* 3: When a change in opacity occurs, transition over .5s
*/
.title {
/* #1 */
margin: 0;
/* #2 */
opacity: 0;
-webkit-transform: translateX(50px) translateZ(0);
transform: translateX(50px) translateZ(0);
/* #3 */
-webkit-transition-duration: .5s;
transition-duration: .5s;
-webkit-transition-property: opacity, -webkit-transform;
transition-property: opacity, -webkit-transform;
transition-property: opacity, transform;
transition-property: opacity, transform, -webkit-transform;
}
/*
* When a step is active, fade in to opaque and slide to the center
*/
.seq-in .title {
opacity: 1;
-webkit-transform: translateX(0) translateZ(0);
transform: translateX(0) translateZ(0);
}
/*
* When a step becomes inactive, fade out and slide to the left
*/
.seq-out .title {
opacity: 0;
-webkit-transform: translateX(-50px) translateZ(0);
transform: translateX(-50px) translateZ(0);
}
/*
* Scale an image to 0 (so it can't be seen) when in its start position
*/
.feature {
-webkit-transform: translateZ(0) scale(0);
transform: translateZ(0) scale(0);
-webkit-transition-duration: .5s;
transition-duration: .5s;
-webkit-transition-property: opacity, -webkit-transform;
transition-property: opacity, -webkit-transform;
transition-property: transform, opacity;
transition-property: transform, opacity, -webkit-transform;
}
/*
* When a step is active, make the image scale in
*/
.seq-in .feature {
-webkit-transform: translateZ(0) scale(1);
transform: translateZ(0) scale(1);
}
/*
* When a step becomes inactive, make the image fade out but maintain full scale
*/
.seq-out .feature {
-webkit-transform: translateZ(0) scale(1);
transform: translateZ(0) scale(1);
opacity: 0;
}
/*
* Styles: element holding navigation UI
* 1: Position the nav 40px from the bottom and make it full-width
* 2: Reset styles for the