CSS only order process steps

css-only-order-process-steps.markdown

CSS only order process steps

It's been a while. Just a nice process bar here where you can click on the different steps and be presented with information. The box at the top will also animate depending on the steps.

A Pen by Jamie Coulter on CodePen.

License.

index.haml

-@steps = ['Start order', 'Prepare gift', 'Pack gift', 'Decorate box', 'Send gift']

.progress
    .progress_inner
        -@steps.each_with_index  do |step, i|
            .progress_inner__step
                %label{:for => "step-#{i + 1}"} #{step}
        %input{:type => 'radio', :name => 'step', :id => "step-1", :checked => 'checked'}
        -(1..4).each_with_index  do |i|
            %input{:type => 'radio', :name => 'step', :id => "step-#{i + 1}"}
        .progress_inner__bar
        .progress_inner__bar--set
        .progress_inner__tabs
            -@steps.each_with_index  do |step, i|
                .tab{:class => "tab-#{i}"}
                    %h1 #{step}
                    %p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tortor ipsum, eleifend vitae massa non, dignissim finibus eros. Maecenas non eros tristique nisl maximus sollicitudin.
        .progress_inner__status
            .box_base
            .box_lid
            .box_ribbon
            .box_bow
                .box_bow__left
                .box_bow__right
            .box_item
            .box_tag
            .box_string
        
            

script.babel

// Nope

style.scss

$font: 'Nunito', sans-serif;

$scheme-base: #a6cde2;
$color-bg: $scheme-base;
$color-mid: darken($scheme-base, 14);
$color-dark: darken($scheme-base, 40);

$steps: 5; // Change in html
$step-width: 100% / $steps;
$step-point-width: 30px;
$step-point-height: $step-point-width;
$step-point-color: $color-mid;
$step-point-bg: white;
$step-font-size: 14px;
$step-padding: 10px;
$step-gap: 50px;

$tab-spacing: 80px;

$form-width: 700;

$counter-spacing: 3px;
$counter-font-size: 12px;

$bar-transition-speed: 800ms;
$bar-bg: repeating-linear-gradient(
  45deg,
  #1ea4ec,
  #1ea4ec 4px,
  #1f8bc5 4px,
  #1f8bc5 10px
);
$bar-height: 6px;

$status-width: 40px;

$box-color: #986c5d;

$box-color: repeating-linear-gradient(
  45deg,
  #986c5d,
  #986c5d 2px,
  #775144 2px,
  #775144 4px
);

$lid-color: #775144;
$box-lid-offset: 4px;

$box-item-color: #be69d2;
$box-item-thickness: 4px;
$box-item-width: $status-width - 20;
$box-item-height: $box-item-width;

$ribbon-color: #ee0f29;
$ribbon-width: $status-width / 4;

$bow-width: 6px;
$bow-height: 10px;
$bow-color: darken($ribbon-color, 10);

@mixin move-item($item, $top, $left, $opacity) {
    & > .#{$item} {
        top: $top;
        left: $left;
        opacity: $opacity;
    }
}

%box-animation-5{
    @include move-item('box_base', 50%, 0px, 1);
    @include move-item('box_item', -30px, 0px, 0); 
}

%box-animation-4{
    @extend %box-animation-5; 
    @include move-item('box_lid', -20px, 0px, 0);
    @include move-item('box_item', -10px, 0px, 1);    
}

%box-animation-3{
    @extend %box-animation-5;
    @include move-item('box_item', 10px, 0px, 1);
    @include move-item('box_lid', -1px, 0px, 1);
    @include move-item('box_ribbon', 70%, 0px, 0);
    @include move-item('box_bow', 0px, 0px, 0);
}

%box-animation-2{
    @extend %box-animation-5;
    @extend %box-animation-4;
    @extend %box-animation-3;
    
    @include move-item('box_ribbon', 50%, 0px, 1);
    @include move-item('box_bow', -10px, 0px, 1);    
}

%box-animation-1{
    @extend %box-animation-5;
    @extend %box-animation-4;
    @extend %box-animation-3;
    @extend %box-animation-2;
    
    @include move-item('box_tag', 10px, 20px, 1);
    @include move-item('box_string', 10px, 20px, 1);    
      
}

@mixin traverse($n) {
    $step: '';
    $tab: '';

    @for $i from 1 through $n {
        $int: #{($n + 1) - $i};

        & #step-#{$int}:checked #{$step} + div {
            width: ($n - $i) * $step-width;
        }

        & #step-#{$int}:checked #{$step} + div + div + div {
            & > .tab:nth-of-type(#{$int}) {
                opacity: 1;
                top: 0;
            }
        }

        & #step-#{$int}:checked #{$step} + div + div + div + div {
            right: - ($step-width / 2) + ($i * $step-width);
            @extend %box-animation-#{$i}; 
        }

        $step: $step + '+ input';
        $tab: $tab + '+ div';
    }
}

@import url('https://fonts.googleapis.com/css?family=Nunito:400,900');

* {
    box-sizing: border-box;
}

%center {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    margin: auto;
}

%bar {
    height: $bar-height;
    left: $step-width / 2;
    background: $bar-bg;
    transition: width $bar-transition-speed cubic-bezier(0.915, 0.015, 0.300, 1.005);
    border-radius: $bar-height;
    width: 0;
    position: relative;
    z-index: -1;
}

%counter {
    @extend %center;
    width: $step-point-width;
    height: $step-point-height;
    color: $step-point-color;
    background: $step-point-bg;
    line-height: $step-point-height;
    border: $counter-spacing solid $color-bg;
    font-size: $counter-font-size;
    top: $bar-height / 2;
    border-radius: 100%;
    transition: all .4s;
    cursor: pointer;
    pointer-events: none;
}

%step {
    width: $step-width;
    font-size: $step-font-size;
    padding: 0 $step-padding;
    transition: all .4s;
    float: left;
    text-align: center;
    position: relative;

    label {
        padding-top: $step-gap;
        top: -20px;
        display: block;
        position: relative;
        cursor: pointer;
    }

    &:before {
        @extend %counter;
    }
    
    &:hover {
        color: white;
        
        &:before {
            color: white;
            background: #1ea4ec;
        }
    }
}

body {
    font-family: $font;
    background: $color-bg;
    color: $color-dark;
    text-align: center;
    font-weight: 900;
    .progress {
        &_inner {
            @include traverse($steps);
            @extend %center;
            height: 200px;
            width: $form-width + px;

            @for $i from 1 through $steps {
                &__step:nth-of-type(#{$i}) {
                    &:before {
                        content: '#{$i}';
                    }
                }
            }

            &__step {
                @extend %step;
            }

            &__bar {
                @extend %bar;
                &--set {
                    @extend %bar;
                    width: 100% - $step-width;
                    top: - $bar-height;
                    background: $color-mid;
                    position: relative;
                    z-index: -2;
                }
            }

            &__tabs {
                & .tab {
                    opacity: 0;
                    position: absolute;
                    top: 40px;
                    text-align: center;
                    margin-top: $tab-spacing;
                    box-shadow: 0px 2px 1px darken($color-bg, 10);
                    padding: 30px;
                    background: white;
                    border-radius: 10px;
                    transition: all .2s;

                    h1 {
                        margin: 0;
                    }
                    
                    p {
                        font-weight: 400;
                        opacity: 0.8;
                    }
                }
            }

            &__status {
                width: $status-width;
                height: $status-width;
                top: - $status-width * 2;
                transition: right $bar-transition-speed cubic-bezier(0.915, 0.015, 0.300, 1.005);
                transform: translateX(50%);
                position: absolute;
                
                %animatable {
                    opacity: 0;
                    transition: all 600ms cubic-bezier(0.915, 0.015, 0.300, 1.005);
                    transition-delay: 300ms
                }
                
                div {
                    position: absolute;
                    @extend %animatable;
                }

                & .box_base {
                    @extend %center;
                    background: $box-color;
                    width: $status-width - $box-lid-offset;
                    height: $status-width;
                    z-index: 1;
                    border-radius: 1px;
                }

                & .box_lid {
                    width: $status-width;
                    height: $status-width / 3;
                    background: $lid-color;
                    z-index: 2;
                    border-radius: 1px;
                    top: 0;
                }

                & .box_item {
                    @extend %center;
                    width: $box-item-width;
                    height: $box-item-height;
                    background: $box-item-color;
                    z-index: 0;
                    border-radius: 4px;
                    transform: rotate(45deg);
                }

                & .box_ribbon {
                    @extend %center;
                    width: $ribbon-width;
                    height: $status-width + 2;
                    background: $ribbon-color;
                    z-index: 4;
                    border-radius: 1px;
                    
                }
                 
                %bow {
                    width: $bow-width;
                    height: $bow-height;
                    background: $bow-color;
                    position: absolute;
                    z-index: 3;
                    opacity: 1;
                    border-radius: 1px;
                }

                & .box_bow {
                    @extend %center;
                    top: - $bow-width;
                    z-index: 1;
                    transition-delay: 500ms;
                    &__left {
                        @extend %bow;
                        @extend %center;
                        left: $bow-width;
                        transform: rotate(45deg);
                    }

                    &__right {
                        @extend %bow;
                        @extend %center;
                        left: -4px;
                        transform: rotate(-45deg);
                    }
                }
                
                // Refactor
                
                & .box_tag {
                    @extend %center;
                    width: 20px;
                    height: 10px;
                    background: #487ac7;
                    z-index: 4;
                    transform: rotate(-10deg) translateX(-40px) translateY(0px);
                    border-radius: 2px;
                    transition-delay: 500ms
                }
                
                & .box_string {
                    width: 17px;
                    height: 2px;
                    background: #343434;
                    @extend %center;
                    z-index: 4;
                    transform: rotate(-39deg) translateX(-22px) translateY(-12px);
                }
                
                //
            }

            input[type="radio"] {
                display: none;
            }
        }
    }
}