-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
6 changed files
with
250 additions
and
20 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,118 @@ | ||
| /*custom font*/ | ||
| @import url(https://fonts.googleapis.com/css?family=Montserrat); | ||
|
|
||
| body { | ||
| font-family: montserrat, arial, verdana; | ||
| } | ||
| /*form styles*/ | ||
| #msform { | ||
| width: 400px; | ||
| margin: 50px auto; | ||
| text-align: center; | ||
| position: relative; | ||
| } | ||
| #msform fieldset { | ||
| background-color: #fff; | ||
| border: 0 none; | ||
| border-radius: 3px; | ||
| box-shadow: 0 0 15px 1px rgba(0, 0, 0, 0.4); | ||
| padding: 20px 30px; | ||
| box-sizing: border-box; | ||
| width: 80%; | ||
| margin: 0 10%; | ||
| position: relative; | ||
| } | ||
| /*Hide all except first fieldset*/ | ||
| #msform fieldset:not(:first-of-type) { | ||
| display: none; | ||
| } | ||
| /*inputs*/ | ||
| #msform input, #msform textarea { | ||
| padding: 15px; | ||
| border: 1px solid #ccc; | ||
| border-radius: 3px; | ||
| margin-bottom: 10px; | ||
| width: 100%; | ||
| box-sizing: border-box; | ||
| font-family: montserrat; | ||
| color: #2C3E50; | ||
| font-size: 13px; | ||
| } | ||
| /*buttons*/ | ||
| #msform .action-button { | ||
| width: 100px; | ||
| background-color: #27AE60; | ||
| font-weight: bold; | ||
| color: #fff; | ||
| border: 0 none; | ||
| border-radius: 1px; | ||
| cursor: pointer; | ||
| padding: 10px 5px; | ||
| margin: 10px 5px; | ||
| } | ||
| #msform .action-button:hover, #msform .action-button:focus { | ||
| box-shadow: 0 0 0 2px #fff, 0 0 0 3px #27AE60; | ||
| } | ||
| /*headings*/ | ||
| .fs-title { | ||
| font-size: 15px; | ||
| text-transform: uppercase; | ||
| color: #2C3E50; | ||
| margin-bottom: 10px; | ||
| } | ||
| .fs-subtitle { | ||
| font-weight: normal; | ||
| font-size: 13px; | ||
| color: #666; | ||
| margin-bottom: 20px; | ||
| } | ||
| /*progressbar*/ | ||
| #progressbar { | ||
| margin-bottom: 30px; | ||
| overflow: hidden; | ||
| /*CSS counters to number the steps*/ | ||
| counter-reset: step; | ||
| } | ||
| #progressbar li { | ||
| list-style-type: none; | ||
| color: black; | ||
| font-weight: bold; | ||
| text-transform: uppercase; | ||
| font-size: 9px; | ||
| width: 33.33%; | ||
| float: left; | ||
| position: relative; | ||
| } | ||
| #progressbar li:before { | ||
| content: counter(step); | ||
| counter-increment: step; | ||
| width: 20px; | ||
| line-height: 20px; | ||
| display: block; | ||
| font-size: 10px; | ||
| color: #333; | ||
| background-color:#fff; | ||
| border-radius: 3px; | ||
| margin: 0 auto 5px auto; | ||
| } | ||
| /*progressbar connectors*/ | ||
| #progressbar li:after { | ||
| content: ''; | ||
| width: 100%; | ||
| height: 2px; | ||
| background-color: #fff; | ||
| position: absolute; | ||
| left: -50%; | ||
| top: 9px; | ||
| z-index: -1; /*put it behind the numbers*/ | ||
| } | ||
| #progressbar li:first-child:after { | ||
| /*connector not needed before the first step*/ | ||
| content: none; | ||
| } | ||
| /*marking active/completed steps green*/ | ||
| /*The number of the step and the connector before it = green*/ | ||
| #progressbar li.active:before, #progressbar li.active:after{ | ||
| background-color: #27AE60; | ||
| color: black; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,81 @@ | ||
| //jQuery time | ||
| var current_fs, next_fs, previous_fs; //fieldsets | ||
| var left, opacity, scale; //fieldset properties which we will animate | ||
| var animating; //flag to prevent quick multi-click glitches | ||
|
|
||
| $(".next").click(function(){ | ||
| if(animating) return false; | ||
| animating = true; | ||
|
|
||
| current_fs = $(this).parent(); | ||
| next_fs = $(this).parent().next(); | ||
|
|
||
| //activate next step on progressbar using the index of next_fs | ||
| $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active"); | ||
|
|
||
| //show the next fieldset | ||
| next_fs.show(); | ||
| //hide the current fieldset with style | ||
| current_fs.animate({opacity: 0}, { | ||
| step: function(now, mx) { | ||
| //as the opacity of current_fs reduces to 0 - stored in "now" | ||
| //1. scale current_fs down to 80% | ||
| scale = 1 - (1 - now) * 0.2; | ||
| //2. bring next_fs from the right(50%) | ||
| left = (now * 50)+"%"; | ||
| //3. increase opacity of next_fs to 1 as it moves in | ||
| opacity = 1 - now; | ||
| current_fs.css({ | ||
| 'transform': 'scale('+scale+')', | ||
| 'position': 'absolute' | ||
| }); | ||
| next_fs.css({'left': left, 'opacity': opacity}); | ||
| }, | ||
| duration: 800, | ||
| complete: function(){ | ||
| current_fs.hide(); | ||
| animating = false; | ||
| }, | ||
| //this comes from the custom easing plugin | ||
| easing: 'easeInOutBack' | ||
| }); | ||
| }); | ||
|
|
||
| $(".previous").click(function(){ | ||
| if(animating) return false; | ||
| animating = true; | ||
|
|
||
| current_fs = $(this).parent(); | ||
| previous_fs = $(this).parent().prev(); | ||
|
|
||
| //de-activate current step on progressbar | ||
| $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active"); | ||
|
|
||
| //show the previous fieldset | ||
| previous_fs.show(); | ||
| //hide the current fieldset with style | ||
| current_fs.animate({opacity: 0}, { | ||
| step: function(now, mx) { | ||
| //as the opacity of current_fs reduces to 0 - stored in "now" | ||
| //1. scale previous_fs from 80% to 100% | ||
| scale = 0.8 + (1 - now) * 0.2; | ||
| //2. take current_fs to the right(50%) - from 0% | ||
| left = ((1-now) * 50)+"%"; | ||
| //3. increase opacity of previous_fs to 1 as it moves in | ||
| opacity = 1 - now; | ||
| current_fs.css({'left': left}); | ||
| previous_fs.css({'transform': 'scale('+scale+')', 'opacity': opacity}); | ||
| }, | ||
| duration: 800, | ||
| complete: function(){ | ||
| current_fs.hide(); | ||
| animating = false; | ||
| }, | ||
| //this comes from the custom easing plugin | ||
| easing: 'easeInOutBack' | ||
| }); | ||
| }); | ||
|
|
||
| $(".submit").click(function(){ | ||
| return false; | ||
| }) |
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters