Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /*custom font*/
- @import url(https://fonts.googleapis.com/css?family=Open+Sans);
- @primary-color: #63a2cb;
- @secondary-color: #67d5bf;
- /*basic reset*/
- * {margin: 0; padding: 0;}
- body {
- background-color:blue;
- font-family: "Open Sans", arial, verdana;
- }
- .content {
- width: 64%;
- position: relative;
- height: 500px;
- background-color:#fff;
- margin: auto;
- display: table;
- }
- /*form styles*/
- #msform {
- width: 100%;
- margin: 50px auto;
- text-align: center;
- background: white;
- //position: relative;
- }
- #msform fieldset {
- //background: white;
- 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%;
- /*stacking fieldsets above each other*/
- position: absolute;
- }
- /*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: @secondary-color;
- font-weight: bold;
- color: white;
- 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 white, 0 0 0 3px @secondary-color;
- }
- /*headings*/
- .fs-title {
- font-size: 16px;
- text-transform: uppercase;
- color: @primary-color;
- margin-bottom: 10px;
- }
- .fs-subtitle {
- font-weight: normal;
- font-size: 14px;
- color: #666;
- margin-bottom: 20px;
- }
- /*progressbar*/
- #progressbar {
- margin-bottom: 30px;
- overflow: hidden;
- /*CSS counters to number the steps*/
- counter-reset: step;
- position: absolute;
- top: 294px;
- left: 0;
- right: 0;
- width: 50%;
- margin:10% auto;
- z-index: 1;
- }
- #progressbar li {
- list-style-type: none;
- color: white;
- text-transform: uppercase;
- font-size: 9px;
- width: 16%;
- 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: white;
- border-radius: 3px;
- margin: 0 auto 5px auto;
- }
- /*progressbar connectors*/
- #progressbar li:after {
- content: '';
- width: 100%;
- height: 2px;
- background: #67d5bf;
- 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: @secondary-color;
- color: white;
- }
- .help-block {
- font-size: .8em;
- color: #7c7c7c;
- text-align: left;
- margin-bottom: .5em;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement