<header>
<h1>Pure <strong>CSS</strong> Steps</h1>
<p>... a sassy "Step By Step" process.</p>
</header>
<section>
<article>
<form class="pure-steps">
<input type="radio" name="steps" class="pure-steps_radio" id="step-0" checked="">
<input type="radio" name="steps" class="pure-steps_radio" id="step-1">
<input type="radio" name="steps" class="pure-steps_radio" id="step-2">
<div class="pure-steps_group">
<ol>
<li class="pure-steps_group-step">
<header>
<h2 class="pure-steps_group-step_legend">Welcome</h2>
<p class="pure-steps_group-step_item">The <strong>"Step By Step"</strong> pattern is usually 100% developed with JavaScript but you can use CSS too.</p>
<p class="pure-steps_group-step_item">Enjoy this example of "what can be done" <strong>just with SASS,</strong> simulating a "sign-up" process.</p>
<p class="pure-steps_group-step_item"></p>
</header>
</li>
<li class="pure-steps_group-step">
<fieldset>
<legend class="pure-steps_group-step_legend">Sign Up</legend>
<p class="pure-steps_group-step_item flexy-item flexy-column reverse">
<input type="text" placeholder="Type your email here" value="" id="input_email">
<label for="input_email">Email</label>
</p>
<p class="pure-steps_group-step_item flexy-item flexy-column reverse">
<input type="text" placeholder="Type your nick here" value="" id="input_nick">
<label for="input_nick">Nick</label>
</p>
<p class="pure-steps_group-step_item flexy-item flexy-column reverse">
<input type="password" placeholder="Type your password here" value="" id="input_password">
<label for="input_password">Password</label>
</p>
</fieldset>
</li>
<li class="pure-steps_group-step flexy-item">
<div class="pure-steps_preload">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
<path d="M31.8,3.6c-0.2-0.5-0.4-0.9-0.9-1.2C30.4,2,29.7,1.8,29,1.9c-0.6,0.1-1.2,0.4-1.6,1l-8.5,11.2l0,0l-7.2,9.5l-7.1-9.4 c-0.5-0.7-1.3-1-2.1-1c-0.5,0-1,0.2-1.4,0.5c-0.5,0.4-0.9,1-1,1.7s0.1,1.2,0.5,1.8l9.1,12.1l0,0c0.1,0.2,0.3,0.3,0.4,0.4 c0.4,0.3,0.9,0.5,1.4,0.5c0.8,0,1.6-0.3,2.1-1L22.1,18l0,0l9.1-12.1C32,5.2,32.1,4.4,31.8,3.6z"></path>
</svg>
</div>
</li>
</ol>
<ol class="pure-steps_group-triggers">
<li class="pure-steps_group-triggers_item">
<label for="step-0">Restart</label>
</li>
<li class="pure-steps_group-triggers_item">
<label for="step-1">Sign Up</label>
</li>
<li class="pure-steps_group-triggers_item">
<label for="step-2">Jump in</label>
</li>
</ol>
</div>
<br>
<label for="step-0">Restart</label>
</form>
</article>
</section>@import 'compass/css3';
@import 'compass/reset';
@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300);
$base-font: 'Open Sans', sans-serif;
$height: 26em;
$factor: 1.618;
$duration: .6s;
$red: #FF3B99;
$blue: #5eb9cc;
$green: #B2FF41;
$orange: #FF9D00;
$textColor: #444;
body
{
font-family: $base-font;
font-size: 16px;
text-align: center;
color: $textColor;
background: #d0d0d0;
}
header
{
margin-bottom: 2em;
}
h1
{
font-size: 2em;
margin: 2em 0 1em;
}
strong
{
font-weight: 700;
}
p
{
line-height: 1.4em;
}
article header
{
margin: 0;
}
.full-height
{
height: $height;
align-items: center;
}
.flexy-item
{
display: flex;
flex-direction: row;
justify-content: center;
position: relative;
}
.flexy-column
{
flex-direction: column;
&.reverse
{
flex-direction: column-reverse;
}
}
.flexy-item_child
{
flex: 1 0 100%;
}
.pure-steps
{
display: inline-block;
width: 20em;
color: white;
margin-bottom: 3em;
strong
{
color: $green;
font-weight: 300;
}
.pure-steps_group
{
position: relative;
min-height: $height;
border-radius: .4em;
overflow: hidden;
box-shadow: 0 1.7em 5.5em -.94em rgba(black, .3), 0 2em 3em .5em rgba(black, .1), 0 1.8em 2em -1.5em rgba(black, .2);
background-image: linear-gradient(-120deg, #26E289 0, #1a5fa2 100%, red 200%);
background-position: 0 0;
background-size: 300%;
will-change: background, box-shadow;
transition: all ($duration / 2) ease-out;
.pure-steps_group-step
{
position: absolute;
left: 0;
top: 0;
width: 100%;
transform: translate(100%);
opacity: 0;
will-change: transform, opacity;
transition: all $duration ease-in-out;
text-align: left;
&:last-child
{
text-align: center;
}
.pure-steps_group-step_legend
{
font-size: 1.5em;
font-weight: 700;
padding: 1.5em 1.34em 1em;
line-height: 1em;
position: relative;
}
.pure-steps_group-step_item
{
padding: 0 2em 1em;
label
{
font-size: .8em;
display: block;
// padding-bottom: .6em;
opacity: .6;
}
input
{
font-size: 1em;
box-sizing: border-box;
width: 100%;
border: 0;
line-height: 1.5em;
background-color: transparent;
background-image: linear-gradient(0deg, transparent 0, #e5e5e5 1px),
linear-gradient(0deg, transparent 0, #B2FF41 1px);
background-size: 100% 1px, 0% 1px;
background-repeat: no-repeat;
outline: none;
will-change: background;
transition: background ($duration / 2) ease-in-out;
color: white;
font-family: $base-font;
font-weight: 300;
$placeholderColor: rgba(white, .6);
&:focus
{
color: white;
background-size: 0% 1px, 100% 1px;
&+ label
{
opacity: 1;
color: $green;
}
}
&::-webkit-input-placeholder
{
color: $placeholderColor;
}
&:-moz-placeholder
{ /* Firefox 18- */
color: $placeholderColor;
}
&::-moz-placeholder
{ /* Firefox 19+ */
color: $placeholderColor;
}
&:-ms-input-placeholder
{
color: $placeholderColor;
}
}
}
}
}
.pure-steps_radio
{
display: none;
}
.pure-steps_group-triggers
{
position: absolute;
left: 0;
bottom: 0;
width: 100%;
height: 3.6em;
border-radius: 0 0 .4em .4em;
background-color: rgba(black, .1);
will-change: opacity;
transition: opacity ($duration / 2) ease-in-out;
&:before
{
content: '';
display: inline-block;
position: absolute;
left: 0;
width: 0%;
height: .1em;
background: rgba($green, .4);
will-change: width;
transition: width $duration ease-in-out;
}
.pure-steps_group-triggers_item
{
display: none;
label
{
display: block;
padding: 1.2em;
color: white;
}
}
}
$pureSteps: 4; // staring index: 1
@for $i from 1 to $pureSteps
{
.pure-steps_radio:nth-child(#{$i}):checked ~ .pure-steps_group
{
$bgPosition: (100 / $pureSteps) * $i;
background-position: ($bgPosition * 1%) 0;
@if $i == ($pureSteps - 1) {
.pure-steps_group-triggers
{
opacity: 0;
transition-delay: $duration;
}
.pure-steps_group-step
{
align-items: center;
height: 100%;
.pure-steps_preload
{
display: block;
height: .1em;
width: 100%;
box-sizing: border-box;
margin: 0 2em;
background-image: linear-gradient(0deg, rgba($red, .4) 0%, rgba($orange, .4) 50%, rgba($green, .4) 100%);
background-size: 0 10em;
background-position: top center;
background-repeat: no-repeat;
will-change: background-image;
transition: background-image 3s linear;
animation: preloadLine 3s ease-out forwards;
svg
{
font-size: 1.2em;
width: auto;
height: 1em;
padding: 1em;
border-radius: 2em;
background-color: #5BD670;
fill: white;
margin-top: -1.5em;
transform: scale(0);
animation: preloadTic .8s linear forwards;
animation-delay: 3s;
}
}
}
}
.pure-steps_group-triggers
{
&:before
{
width: 33.333% * $i;
}
.pure-steps_group-triggers_item:nth-child(#{$i+1})
{
display: block;
}
}
}
.pure-steps_radio:nth-child(#{$i}):checked ~ .pure-steps_group .pure-steps_group-step:nth-child(#{$i})
{
opacity: 1;
transform: translate(0);
}
}
}
@keyframes preloadLine
{
0%
{
background-position: bottom center;
background-size: 0 10em;
}
100%
{
background-position: top center;
background-size: 100% 10em;
}
}
@keyframes preloadTic
{
0%
{
transform: scale(0);
}
20%
{
transform: scale(.2);
animation-timing-function: ease-out;
}
50%
{
transform: scale(1.3);
animation-timing-function: ease-in;
}
65%
{
transform: scale(.9);
animation-timing-function: ease-out;
}
80%,
100%
{
transform: scale(1);
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.