Skip to content

Instantly share code, notes, and snippets.

@CodeMyUI

CodeMyUI/css-only-order-process-steps.markdown

Created August 11, 2017 05:45
Show Gist options
  • Save CodeMyUI/61924b689164e4c74c56e8a8c4881108 to your computer and use it in GitHub Desktop.
Save CodeMyUI/61924b689164e4c74c56e8a8c4881108 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. CodeMyUI created this gist Aug 11, 2017.
    7 changes: 7 additions & 0 deletions css-only-order-process-steps.markdown
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    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](https://codepen.io/jcoulterdesign/pen/zdwajv) by [Jamie Coulter](http://codepen.io/jcoulterdesign) on [CodePen](http://codepen.io/).

    [License](https://codepen.io/jcoulterdesign/pen/zdwajv/license).
    29 changes: 29 additions & 0 deletions index.haml
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,29 @@
    -@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


    1 change: 1 addition & 0 deletions script.babel
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1 @@
    // Nope
    388 changes: 388 additions & 0 deletions style.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,388 @@
    $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;
    }
    }
    }
    }