|
$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; |
|
} |
|
} |
|
} |
|
} |