First commit
This commit is contained in:
Vivek Teega
commit
6e82064d58
14
README.md
Normal file
14
README.md
Normal file
@ -0,0 +1,14 @@
|
||||
Fullscreen Form Interface
|
||||
=========
|
||||
|
||||
An experimental fullscreen form concept where the idea is to allow distraction-free form filling with some fancy animations when moving between form fields.
|
||||
|
||||
[Article on Codrops](http://tympanus.net/codrops/?p=19520)
|
||||
|
||||
[Demo](http://tympanus.net/Development/FullscreenForm/)
|
||||
|
||||
Integrate or build upon it for free in your personal or commercial projects. Don't republish, redistribute or sell "as-is".
|
||||
|
||||
Read more here: [License](http://tympanus.net/codrops/licensing/)
|
||||
|
||||
[© Codrops 2014](http://www.codrops.com)
|
||||
889
css/component.css
Executable file
889
css/component.css
Executable file
@ -0,0 +1,889 @@
|
||||
/* Main form wrapper */
|
||||
.fs-form-wrap {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.overview .fs-form-wrap {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* Title */
|
||||
.fs-title {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
margin: 0;
|
||||
padding: 40px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.fs-title h1 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
/* Form */
|
||||
.fs-form {
|
||||
position: relative;
|
||||
text-align: left;
|
||||
font-size: 2.5em;
|
||||
}
|
||||
|
||||
.no-js .fs-form {
|
||||
padding: 0 0 6em 0;
|
||||
}
|
||||
|
||||
/* Views (fullscreen and overview)*/
|
||||
.fs-form-full {
|
||||
top: 32%;
|
||||
margin: 0 auto;
|
||||
width: 70%;
|
||||
}
|
||||
|
||||
.fs-form-full,
|
||||
.fs-message-error {
|
||||
max-width: 960px;
|
||||
}
|
||||
|
||||
.fs-form-overview {
|
||||
padding: 2.5em 30% 6em;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #fffed8;
|
||||
color: #3b3f45;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.fs-form-overview .fs-fields::before {
|
||||
display: block;
|
||||
margin-bottom: 2.5em;
|
||||
color: #3b3f45;
|
||||
content: 'Parsed FLO data';
|
||||
font-weight: 700;
|
||||
font-size: 1.85em;
|
||||
}
|
||||
|
||||
/* Switch view animation (we hide the current view, switch the view class and show it again) */
|
||||
.fs-form.fs-show {
|
||||
-webkit-animation: animFadeIn 0.5s;
|
||||
animation: animFadeIn 0.5s;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animFadeIn {
|
||||
0% { opacity: 0; }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
|
||||
@keyframes animFadeIn {
|
||||
0% { opacity: 0; }
|
||||
100% { opacity: 1; }
|
||||
}
|
||||
|
||||
.fs-form.fs-show .fs-fields {
|
||||
-webkit-animation: animMove 0.5s;
|
||||
animation: animMove 0.5s;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animMove {
|
||||
from { top: 100px; }
|
||||
}
|
||||
|
||||
@keyframes animMove {
|
||||
from { top: 100px; }
|
||||
} /* we need to use top here because otherwise all our fixed elements will become absolute */
|
||||
|
||||
/* Visibility control of elements */
|
||||
.fs-form-full .fs-fields > li,
|
||||
.fs-nav-dots,
|
||||
.fs-progress,
|
||||
.fs-numbers,
|
||||
button.fs-continue,
|
||||
.fs-message-error,
|
||||
.fs-message-final {
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.no-js .fs-form-full .fs-fields > li {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.fs-show {
|
||||
visibility: visible !important;
|
||||
}
|
||||
|
||||
/* Some general styles */
|
||||
.fs-form-wrap button {
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.fs-form-wrap button[disabled] {
|
||||
opacity: 0.3;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.fs-form-wrap input:focus,
|
||||
.fs-form-wrap button:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Hide the submit button */
|
||||
.fs-form .fs-submit {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Fields */
|
||||
.fs-fields {
|
||||
position: relative;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
top: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.fs-form-overview ol {
|
||||
max-width: ;
|
||||
}
|
||||
|
||||
.fs-fields > li {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.fs-fields > li:hover {
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.js .fs-form-full .fs-fields > li {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.fs-form-overview .fs-fields > li,
|
||||
.no-js .fs-form .fs-fields > li {
|
||||
margin: 1em 0 2em;
|
||||
padding: 0 0 2em 0;
|
||||
border-bottom: 2px solid rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
/* Labels & info */
|
||||
.fs-fields > li label {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.fs-fields > li label.fs-field-label {
|
||||
display: inline-block;
|
||||
padding: 0 5px 1em 0;
|
||||
font-weight: 700;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.fs-form-full .fs-fields > li label[data-info]::after {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border: 2px solid rgba(0,0,0,0.4);
|
||||
color: rgba(0,0,0,0.4);
|
||||
border-radius: 50%;
|
||||
content: 'i';
|
||||
vertical-align: top;
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
font-style: italic;
|
||||
font-size: 14px;
|
||||
font-family: Georgia, serif;
|
||||
line-height: 20px;
|
||||
cursor: pointer;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
.fs-form-full .fs-fields > li label[data-info]::before {
|
||||
position: absolute;
|
||||
bottom: 100%;
|
||||
left: 0;
|
||||
padding: 0 0 10px;
|
||||
min-width: 200px;
|
||||
content: attr(data-info);
|
||||
font-size: 0.4em;
|
||||
color: #6a7b7e;
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
|
||||
transition: opacity 0.3s, transform 0.3s;
|
||||
-webkit-transform: translate3d(0,-5px,0);
|
||||
transform: translate3d(0,-5px,0);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.fs-form-full .fs-fields > li label[data-info]:hover::before {
|
||||
opacity: 1;
|
||||
-webkit-transform: translate3d(0,0,0);
|
||||
transform: translate3d(0,0,0);
|
||||
}
|
||||
|
||||
.fs-form-full .fs-fields > li label:hover ~ .fs-info,
|
||||
.fs-form-full .fs-fields > li .fs-info:hover {
|
||||
opacity: 1;
|
||||
-webkit-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
/* Inputs */
|
||||
.fs-fields input {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0 0 0.15em;
|
||||
width: 100%;
|
||||
border: none;
|
||||
border-bottom: 2px solid rgba(0,0,0,0.2);
|
||||
background-color: transparent;
|
||||
color: #fffed8;
|
||||
text-overflow: ellipsis;
|
||||
font-weight: bold;
|
||||
font-size: 1.5em;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.fs-fields input:invalid {
|
||||
box-shadow: none; /* removes red shadow in FF*/
|
||||
}
|
||||
|
||||
.fs-form-overview .fs-fields input {
|
||||
border-bottom-color: transparent;
|
||||
color: rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
.fs-fields [required] {
|
||||
background-image: url(../img/abacusstar.svg);
|
||||
background-position: top right;
|
||||
background-size: 18px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.fs-fields input:focus {
|
||||
background-color: #3b3f45; /* Fixes chrome bug with placeholder */
|
||||
}
|
||||
|
||||
.fs-form-overview .fs-fields input:focus {
|
||||
background-color: #fffed8; /* Fixes chrome bug with placeholder */
|
||||
}
|
||||
|
||||
.fs-form-overview .fs-fields input {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.fs-fields .fs-radio-custom input[type="radio"] {
|
||||
position: absolute;
|
||||
display: block;
|
||||
margin: 30px auto 20px;
|
||||
margin: 0 auto 20px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.fs-fields > li .fs-radio-custom span {
|
||||
float: left;
|
||||
position: relative;
|
||||
margin-right: 3%;
|
||||
padding: 10px;
|
||||
max-width: 200px;
|
||||
width: 30%;
|
||||
text-align: center;
|
||||
font-weight: 700;
|
||||
font-size: 50%;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.fs-fields > li .fs-radio-custom span label {
|
||||
color: rgba(0,0,0,0.4);
|
||||
-webkit-transition: color 0.3s;
|
||||
transition: color 0.3s;
|
||||
}
|
||||
|
||||
.fs-form-overview .fs-fields > li .fs-radio-custom span {
|
||||
max-width: 140px;
|
||||
}
|
||||
|
||||
.fs-form-overview .fs-fields > li .fs-radio-custom span {
|
||||
font-size: 75%;
|
||||
}
|
||||
|
||||
.fs-fields > li .fs-radio-custom label {
|
||||
display: block;
|
||||
padding-top: 100%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.fs-fields .fs-radio-custom label::after {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-position: 50% 0%;
|
||||
background-size: 85%;
|
||||
background-repeat: no-repeat;
|
||||
content: '';
|
||||
opacity: 0.5;
|
||||
-webkit-transition: opacity 0.2s;
|
||||
transition: opacity 0.2s;
|
||||
-webkit-transform: translate(-50%,-50%);
|
||||
transform: translate(-50%,-50%);
|
||||
}
|
||||
|
||||
.fs-fields .fs-radio-custom label.radio-mobile::after {
|
||||
background-image: url(../img/mobile.svg);
|
||||
}
|
||||
|
||||
.fs-fields .fs-radio-custom label.radio-social::after {
|
||||
background-image: url(../img/social.svg);
|
||||
}
|
||||
|
||||
.fs-fields .fs-radio-custom label.radio-conversion::after {
|
||||
background-image: url(../img/conversion.svg);
|
||||
}
|
||||
|
||||
.fs-fields .fs-radio-custom label:hover::after,
|
||||
.fs-fields input[type="radio"]:focus + label::after,
|
||||
.fs-fields input[type="radio"]:checked + label::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.fs-fields .fs-radio-custom input[type="radio"]:checked + label {
|
||||
color: #fffed8;
|
||||
}
|
||||
|
||||
.fs-form-overview .fs-fields .fs-radio-custom input[type="radio"]:checked + label {
|
||||
color: rgba(0,0,0,0.8);
|
||||
}
|
||||
|
||||
.fs-fields textarea {
|
||||
padding: 0.25em;
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
border: 2px solid rgba(0,0,0,0.2);
|
||||
background-color: transparent;
|
||||
color: #fffed8;
|
||||
font-weight: 700;
|
||||
font-size: 0.85em;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.fs-form-overview .fs-fields textarea {
|
||||
height: 100px;
|
||||
color: rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
.fs-fields textarea:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
. .fs-fields textarea {
|
||||
padding: 0;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.fs-form-overview .fs-fields textarea:focus {
|
||||
background: #fffed8;
|
||||
}
|
||||
|
||||
.fs-form div.cs-select.cs-skin-boxes {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.fs-form-overview .cs-skin-boxes > span {
|
||||
border-radius: 5px;
|
||||
width: 90px;
|
||||
height: 70px;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
.fs-form-overview .cs-skin-boxes > span::before {
|
||||
padding-top: 50px;
|
||||
box-shadow: 0 20px 0 #292c30, inset 0 -5px #292c30;
|
||||
}
|
||||
|
||||
.fs-fields input.fs-mark {
|
||||
padding-left: 1em;
|
||||
background-image: url(../img/dollar.svg);
|
||||
background-position: 0% 0.15em;
|
||||
background-size: auto 75%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.fs-fields input.fs-mark[required] {
|
||||
background-image: url(../img/dollar.svg), url(../img/abacusstar.svg);
|
||||
background-position: 0% 0.15em, top right;
|
||||
background-size: auto 75%, 18px;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
/* placeholder */
|
||||
.fs-fields input::-webkit-input-placeholder,
|
||||
.fs-fields textarea::-webkit-input-placeholder {
|
||||
color: rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.fs-fields input:-moz-placeholder,
|
||||
.fs-fields textarea:-moz-placeholder {
|
||||
color: rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.fs-fields input::-moz-placeholder,
|
||||
.fs-fields textarea::-moz-placeholder {
|
||||
color: rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.fs-fields input:-ms-input-placeholder,
|
||||
.fs-fields textarea:-ms-input-placeholder {
|
||||
color: rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
/* Hide placeholder when focused in Webkit browsers */
|
||||
.fs-fields input:focus::-webkit-input-placeholder {
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
/* Dot navigation */
|
||||
.fs-nav-dots {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 60px;
|
||||
left: auto;
|
||||
-webkit-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
.fs-nav-dots button {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding: 0;
|
||||
margin: 16px 0;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
background: transparent;
|
||||
-webkit-transition: -webkit-transform 0.3s ease, opacity 0.3s ease;
|
||||
transition: transform 0.3s ease, opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.fs-nav-dots button::before,
|
||||
.fs-nav-dots button::after {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(0,0,0,0.5);
|
||||
content: '';
|
||||
text-indent: 0;
|
||||
-webkit-backface-visibility: hidden;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.fs-nav-dots button::after {
|
||||
background-color: rgba(0,0,0,0.4);
|
||||
-webkit-transform: perspective(1000px) rotate3d(0,1,0,180deg);
|
||||
transform: perspective(1000px) rotate3d(0,1,0,180deg);
|
||||
}
|
||||
|
||||
.fs-nav-dots button.fs-dot-current {
|
||||
-webkit-transform: perspective(1000px) rotate3d(0,1,0,180deg);
|
||||
transform: perspective(1000px) rotate3d(0,1,0,180deg);
|
||||
}
|
||||
|
||||
.fs-nav-dots button:hover::before,
|
||||
.fs-nav-dots button.fs-dot-current::before {
|
||||
background: #fffed8;
|
||||
}
|
||||
|
||||
/* Progress bar */
|
||||
.fs-progress {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 0%;
|
||||
height: 0.5em;
|
||||
background: #fffed8;
|
||||
-webkit-transition: width 0.3s ease-in-out;
|
||||
transition: width 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
/* Number indicator */
|
||||
.fs-numbers {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
overflow: hidden;
|
||||
color: rgba(0,0,0,0.4);
|
||||
margin: 40px;
|
||||
width: 2em;
|
||||
font-weight: 700;
|
||||
font-size: 2em;
|
||||
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
.fs-numbers:after {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
content: '/';
|
||||
font-weight: 300;
|
||||
opacity: 0.4;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.fs-numbers span {
|
||||
float: right;
|
||||
width: 40%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.fs-numbers .fs-number-current {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.fs-numbers .fs-number-new {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
-webkit-transform: translateY(100%);
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
/* Animations for numbers */
|
||||
/* Show next number */
|
||||
.fs-numbers.fs-show-next .fs-number-new {
|
||||
-webkit-animation: animMoveUpFromDown 0.4s both;
|
||||
animation: animMoveUpFromDown 0.4s both;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animMoveUpFromDown {
|
||||
from { -webkit-transform: translateY(100%); }
|
||||
to { -webkit-transform: translateY(0); }
|
||||
}
|
||||
|
||||
@keyframes animMoveUpFromDown {
|
||||
from { -webkit-transform: translateY(100%); transform: translateY(100%); }
|
||||
to { -webkit-transform: translateY(0); transform: translateY(0); }
|
||||
}
|
||||
|
||||
.fs-numbers.fs-show-next .fs-number-current {
|
||||
-webkit-animation: animMoveUp 0.4s both;
|
||||
animation: animMoveUp 0.4s both;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animMoveUp {
|
||||
to { -webkit-transform: translateY(-100%); }
|
||||
}
|
||||
|
||||
@keyframes animMoveUp {
|
||||
to { -webkit-transform: translateY(-100%); transform: translateY(-100%); }
|
||||
}
|
||||
|
||||
/* Show previous number */
|
||||
.fs-numbers.fs-show-prev .fs-number-new {
|
||||
-webkit-animation: animMoveDownFromUp 0.4s both;
|
||||
animation: animMoveDownFromUp 0.4s both;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animMoveDownFromUp {
|
||||
from { -webkit-transform: translateY(-100%); }
|
||||
to { -webkit-transform: translateY(0); }
|
||||
}
|
||||
|
||||
@keyframes animMoveDownFromUp {
|
||||
from { -webkit-transform: translateY(-100%); transform: translateY(-100%); }
|
||||
to { -webkit-transform: translateY(0); transform: translateY(0); }
|
||||
}
|
||||
|
||||
.fs-numbers.fs-show-prev .fs-number-current {
|
||||
-webkit-animation: animMoveDown 0.4s both;
|
||||
animation: animMoveDown 0.4s both;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animMoveDown {
|
||||
to { -webkit-transform: translateY(100%); }
|
||||
}
|
||||
|
||||
@keyframes animMoveDown {
|
||||
to { -webkit-transform: translateY(100%); transform: translateY(100%); }
|
||||
}
|
||||
|
||||
/* Continue button and submit button */
|
||||
button.fs-submit,
|
||||
button.fs-continue {
|
||||
padding: 0.6em 1.5em;
|
||||
border: 3px solid #232529;
|
||||
border-radius: 40px;
|
||||
font-weight: 700;
|
||||
color: rgba(0,0,0,0.4);
|
||||
}
|
||||
|
||||
.fs-form-overview .fs-submit,
|
||||
.no-js .fs-form .fs-submit {
|
||||
display: block;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.fs-form-overview .fs-submit {
|
||||
border-color: #232529;
|
||||
color: #232529;
|
||||
}
|
||||
|
||||
button.fs-continue {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
margin: 0 40px 60px 0;
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
button.fs-submit:hover,
|
||||
button.fs-submit:focus,
|
||||
button.fs-continue:hover {
|
||||
background: #232529;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.fs-continue::after {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
line-height: 3;
|
||||
text-align: center;
|
||||
background: transparent;
|
||||
color: rgba(0,0,0,0.3);
|
||||
content: 'or press ENTER';
|
||||
font-size: 0.65em;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Error message */
|
||||
.fs-message-error {
|
||||
position: absolute;
|
||||
bottom: 75%;
|
||||
left: 50%;
|
||||
z-index: 800;
|
||||
max-width: 960px;
|
||||
width: 70%;
|
||||
color: #eb7e7f;
|
||||
font-weight: 700;
|
||||
font-size: 1em;
|
||||
opacity: 0;
|
||||
-webkit-transform: translate3d(-50%,-5px,0);
|
||||
transform: translate3d(-50%,-5px,0);
|
||||
}
|
||||
|
||||
.fs-message-error.fs-show {
|
||||
opacity: 1;
|
||||
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
|
||||
transition: transform 0.3s, opacity 0.3s;
|
||||
-webkit-transform: translate3d(-50%,0,0);
|
||||
transform: translate3d(-50%,0,0);
|
||||
}
|
||||
|
||||
/* Animation classes & animations */
|
||||
.fs-form li.fs-current {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.fs-form li.fs-hide,
|
||||
.fs-form li.fs-show {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* Hide current li when navigating to next question */
|
||||
.fs-form .fs-display-next .fs-hide {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.fs-form .fs-display-next .fs-hide .fs-anim-lower,
|
||||
.fs-form .fs-display-next .fs-hide .fs-anim-upper {
|
||||
-webkit-animation: animHideNext 0.5s cubic-bezier(0.7,0,0.3,1) forwards;
|
||||
animation: animHideNext 0.5s cubic-bezier(0.7,0,0.3,1) forwards;
|
||||
}
|
||||
|
||||
.fs-form .fs-display-next .fs-hide .fs-anim-lower {
|
||||
-webkit-animation-delay: 0.1s;
|
||||
animation-delay: 0.1s;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animHideNext {
|
||||
to { opacity: 0; -webkit-transform: translate3d(0,-500px,0); }
|
||||
}
|
||||
|
||||
@keyframes animHideNext {
|
||||
to { opacity: 0; -webkit-transform: translate3d(0,-500px,0); transform: translate3d(0,-500px,0); }
|
||||
}
|
||||
|
||||
/* Show new li when navigating to next question */
|
||||
.fs-form .fs-display-next .fs-show .fs-anim-lower,
|
||||
.fs-form .fs-display-next .fs-show .fs-anim-upper {
|
||||
-webkit-animation: animShowNext 0.5s cubic-bezier(0.7,0,0.3,1) both 0.15s;
|
||||
animation: animShowNext 0.5s cubic-bezier(0.7,0,0.3,1) both 0.15s;
|
||||
}
|
||||
|
||||
.fs-form .fs-display-next .fs-show .fs-anim-lower {
|
||||
-webkit-animation-delay: 0.25s;
|
||||
animation-delay: 0.25s;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animShowNext {
|
||||
from { opacity: 0; -webkit-transform: translate3d(0,500px,0); }
|
||||
}
|
||||
|
||||
@keyframes animShowNext {
|
||||
from { opacity: 0; -webkit-transform: translate3d(0,500px,0); transform: translate3d(0,500px,0); }
|
||||
}
|
||||
|
||||
/* Hide current li when navigating to previous question */
|
||||
.fs-form .fs-display-prev .fs-hide {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.fs-form .fs-display-prev .fs-hide .fs-anim-lower,
|
||||
.fs-form .fs-display-prev .fs-hide .fs-anim-upper {
|
||||
-webkit-animation: animHidePrev 0.5s cubic-bezier(0.7,0,0.3,1) forwards;
|
||||
animation: animHidePrev 0.5s cubic-bezier(0.7,0,0.3,1) forwards;
|
||||
}
|
||||
|
||||
.fs-form .fs-display-prev .fs-hide .fs-anim-upper {
|
||||
-webkit-animation-delay: 0.1s;
|
||||
animation-delay: 0.1s;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animHidePrev {
|
||||
to { opacity: 0; -webkit-transform: translate3d(0,500px,0); }
|
||||
}
|
||||
|
||||
@keyframes animHidePrev {
|
||||
to { opacity: 0; -webkit-transform: translate3d(0,500px,0); transform: translate3d(0,500px,0); }
|
||||
}
|
||||
|
||||
/* Show new li when navigating to previous question */
|
||||
.fs-form .fs-display-prev .fs-show .fs-anim-lower,
|
||||
.fs-form .fs-display-prev .fs-show .fs-anim-upper {
|
||||
-webkit-animation: animShowPrev 0.5s cubic-bezier(0.7,0,0.3,1) both 0.15s;
|
||||
animation: animShowPrev 0.5s cubic-bezier(0.7,0,0.3,1) both 0.15s;
|
||||
}
|
||||
|
||||
.fs-form .fs-display-prev .fs-show .fs-anim-upper {
|
||||
-webkit-animation-delay: 0.25s;
|
||||
animation-delay: 0.25s;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animShowPrev {
|
||||
from { opacity: 0; -webkit-transform: translate3d(0,-500px,0); }
|
||||
}
|
||||
|
||||
@keyframes animShowPrev {
|
||||
from { opacity: 0; -webkit-transform: translate3d(0,-500px,0); transform: translate3d(0,-500px,0); }
|
||||
}
|
||||
|
||||
/* Remove IE clear cross */
|
||||
input[type=text]::-ms-clear {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Adjust form for smaller screens */
|
||||
@media screen and (max-width: 52.5em) {
|
||||
body {
|
||||
min-height: 500px;
|
||||
}
|
||||
|
||||
.fs-form-wrap {
|
||||
font-size: 70%;
|
||||
}
|
||||
|
||||
.fs-form {
|
||||
top: 6em;
|
||||
right: 2em;
|
||||
left: 0;
|
||||
padding: 0 3.75em 0 1em;
|
||||
width: auto;
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
.fs-form.fs-form-overview {
|
||||
top: 0;
|
||||
right: 0;
|
||||
padding: 1.5em 1em 8em 1em;
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
.fs-title {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.fs-numbers {
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.fs-nav-dots {
|
||||
right: 25px;
|
||||
}
|
||||
|
||||
button.fs-continue {
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
margin: 0;
|
||||
padding: 50px 0 0 50px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
border-radius: 50%;
|
||||
font-size: 2em;
|
||||
}
|
||||
|
||||
button.fs-continue::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
content: '\27A1';
|
||||
text-align: center;
|
||||
font-size: 1em;
|
||||
line-height: 50px;
|
||||
}
|
||||
|
||||
.fs-continue::after {
|
||||
content: '';
|
||||
}
|
||||
|
||||
button.fs-submit {
|
||||
width: 100%;
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
.fs-message-error {
|
||||
bottom: 1.75em;
|
||||
left: 0;
|
||||
padding: 0 90px 0 2em;
|
||||
width: 100%;
|
||||
font-size: 1.5em;
|
||||
-webkit-transform: translate3d(0,-5px,0);
|
||||
transform: translate3d(0,-5px,0);
|
||||
}
|
||||
|
||||
.fs-message-error.fs-show {
|
||||
-webkit-transform: translate3d(0,0,0);
|
||||
transform: translate3d(0,0,0);
|
||||
}
|
||||
}
|
||||
|
||||
.hideElement {
|
||||
display: none;
|
||||
}
|
||||
109
css/cs-select.css
Normal file
109
css/cs-select.css
Normal file
@ -0,0 +1,109 @@
|
||||
/* Custom select */
|
||||
/* Read the article: http://tympanus.net/codrops/2014/07/10/inspiration-for-custom-select-elements/ */
|
||||
/* Demo: http://tympanus.net/Development/SelectInspiration/ */
|
||||
/* GitHub: https://github.com/codrops/SelectInspiration */
|
||||
|
||||
/* Default custom select styles */
|
||||
div.cs-select {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
background: #fff;
|
||||
z-index: 100;
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
-webkit-touch-callout: none;
|
||||
-webkit-user-select: none;
|
||||
-khtml-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
div.cs-select:focus {
|
||||
outline: none; /* For better accessibility add a style for this in your skin */
|
||||
}
|
||||
|
||||
.cs-select select {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cs-select span {
|
||||
display: block;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
padding: 1em;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* Placeholder and selected option */
|
||||
.cs-select > span {
|
||||
padding-right: 3em;
|
||||
}
|
||||
|
||||
.cs-select > span::after,
|
||||
.cs-select .cs-selected span::after {
|
||||
speak: none;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
-webkit-transform: translateY(-50%);
|
||||
transform: translateY(-50%);
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.cs-select > span::after {
|
||||
content: '\25BE';
|
||||
right: 1em;
|
||||
}
|
||||
|
||||
.cs-select .cs-selected span::after {
|
||||
content: '\2713';
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.cs-select.cs-active > span::after {
|
||||
-webkit-transform: translateY(-50%) rotate(180deg);
|
||||
transform: translateY(-50%) rotate(180deg);
|
||||
}
|
||||
|
||||
/* Options */
|
||||
.cs-select .cs-options {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
background: #fff;
|
||||
visibility: hidden;
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
.cs-select.cs-active .cs-options {
|
||||
visibility: visible;
|
||||
}
|
||||
|
||||
.cs-select ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cs-select ul span {
|
||||
padding: 1em;
|
||||
}
|
||||
|
||||
.cs-select ul li.cs-focus span {
|
||||
background-color: #ddd;
|
||||
}
|
||||
|
||||
/* Optgroup and optgroup label */
|
||||
.cs-select li.cs-optgroup ul {
|
||||
padding-left: 1em;
|
||||
}
|
||||
|
||||
.cs-select li.cs-optgroup > span {
|
||||
cursor: default;
|
||||
}
|
||||
319
css/cs-skin-boxes.css
Normal file
319
css/cs-skin-boxes.css
Normal file
@ -0,0 +1,319 @@
|
||||
/* Custom select */
|
||||
/* Read the article: http://tympanus.net/codrops/2014/07/10/inspiration-for-custom-select-elements/ */
|
||||
/* Demo: http://tympanus.net/Development/SelectInspiration/ */
|
||||
/* GitHub: https://github.com/codrops/SelectInspiration */
|
||||
|
||||
/* Custom select skin: fullscreen color picker (adjusted for fullscreen form) */
|
||||
div.cs-skin-boxes {
|
||||
background: transparent;
|
||||
font-size: 0.65em;
|
||||
font-weight: 700;
|
||||
max-width: 300px;
|
||||
z-index: 2000;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 30em) {
|
||||
div.cs-skin-boxes { font-size: 1em; }
|
||||
}
|
||||
|
||||
.cs-skin-boxes > span {
|
||||
border: 3px solid #292c30;
|
||||
border-radius: 5px;
|
||||
width: 150px;
|
||||
height: 140px;
|
||||
font-size: 0.5em;
|
||||
padding: 0 0 0 10px;
|
||||
background: #555b64;
|
||||
}
|
||||
|
||||
div.cs-skin-boxes:focus > span {
|
||||
box-shadow: 0 0 0 2px rgba(255,255,255,0.1);
|
||||
}
|
||||
|
||||
.cs-skin-boxes > span::before {
|
||||
content: '';
|
||||
display: block;
|
||||
padding-top: 110px;
|
||||
margin-left: -10px;
|
||||
box-shadow: 0 25px 0 #292c30, inset 0 -10px #292c30;
|
||||
}
|
||||
|
||||
.cs-skin-boxes > span::after,
|
||||
.cs-skin-boxes.cs-active > span::after {
|
||||
top: auto;
|
||||
-webkit-transform: none;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.cs-skin-boxes .cs-options {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
overflow: auto;
|
||||
background: #3b3f45;
|
||||
font-size: 12px;
|
||||
opacity: 0;
|
||||
-webkit-transition: opacity 0.3s, visibility 0s 0.3s;
|
||||
transition: opacity 0.3s, visibility 0s 0.3s;
|
||||
}
|
||||
|
||||
.cs-skin-boxes.cs-active .cs-options {
|
||||
opacity: 1;
|
||||
-webkit-transition: opacity 0.3s;
|
||||
transition: opacity 0.3s;
|
||||
}
|
||||
|
||||
.cs-skin-boxes .cs-options ul {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.cs-skin-boxes .cs-options li {
|
||||
width: 20%;
|
||||
height: 25%;
|
||||
float: left;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
border-radius: 14px;
|
||||
overflow: hidden;
|
||||
opacity: 0;
|
||||
color: rgba(255,255,255,0.6);
|
||||
border: 10px solid transparent;
|
||||
background-clip: padding-box;
|
||||
-webkit-transform: scale3d(0.8,0.8,1);
|
||||
transform: scale3d(0.8,0.8,1);
|
||||
box-shadow: inset 0 -6em 0 -2em #282b30, inset 0 -1px 1px #000;
|
||||
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
|
||||
transition: transform 0.3s, opacity 0.3s;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 30em) {
|
||||
.cs-skin-boxes .cs-options li { box-shadow: none; border-width: 3px; border-radius: 8px;}
|
||||
}
|
||||
|
||||
.cs-skin-boxes.cs-active .cs-options li {
|
||||
opacity: 1;
|
||||
-webkit-transform: scale3d(1,1,1);
|
||||
transform: scale3d(1,1,1);
|
||||
}
|
||||
|
||||
.cs-skin-boxes.cs-active .cs-options li:nth-child(2) {
|
||||
-webkit-transition-delay: 0.01s;
|
||||
transition-delay: 0.01s;
|
||||
}
|
||||
|
||||
.cs-skin-boxes.cs-active .cs-options li:nth-child(3) {
|
||||
-webkit-transition-delay: 0.02s;
|
||||
transition-delay: 0.02s;
|
||||
}
|
||||
|
||||
.cs-skin-boxes.cs-active .cs-options li:nth-child(4) {
|
||||
-webkit-transition-delay: 0.03s;
|
||||
transition-delay: 0.03s;
|
||||
}
|
||||
|
||||
.cs-skin-boxes.cs-active .cs-options li:nth-child(5) {
|
||||
-webkit-transition-delay: 0.04s;
|
||||
transition-delay: 0.04s;
|
||||
}
|
||||
|
||||
.cs-skin-boxes.cs-active .cs-options li:nth-child(6) {
|
||||
-webkit-transition-delay: 0.05s;
|
||||
transition-delay: 0.05s;
|
||||
}
|
||||
|
||||
.cs-skin-boxes.cs-active .cs-options li:nth-child(7) {
|
||||
-webkit-transition-delay: 0.06s;
|
||||
transition-delay: 0.06s;
|
||||
}
|
||||
|
||||
.cs-skin-boxes.cs-active .cs-options li:nth-child(8) {
|
||||
-webkit-transition-delay: 0.07s;
|
||||
transition-delay: 0.07s;
|
||||
}
|
||||
|
||||
.cs-skin-boxes.cs-active .cs-options li:nth-child(9) {
|
||||
-webkit-transition-delay: 0.08s;
|
||||
transition-delay: 0.08s;
|
||||
}
|
||||
|
||||
.cs-skin-boxes.cs-active .cs-options li:nth-child(10) {
|
||||
-webkit-transition-delay: 0.09s;
|
||||
transition-delay: 0.09s;
|
||||
}
|
||||
|
||||
.cs-skin-boxes.cs-active .cs-options li:nth-child(11) {
|
||||
-webkit-transition-delay: 0.1s;
|
||||
transition-delay: 0.1s;
|
||||
}
|
||||
|
||||
.cs-skin-boxes.cs-active .cs-options li:nth-child(12) {
|
||||
-webkit-transition-delay: 0.11s;
|
||||
transition-delay: 0.11s;
|
||||
}
|
||||
|
||||
.cs-skin-boxes.cs-active .cs-options li:nth-child(13) {
|
||||
-webkit-transition-delay: 0.12s;
|
||||
transition-delay: 0.12s;
|
||||
}
|
||||
|
||||
.cs-skin-boxes.cs-active .cs-options li:nth-child(14) {
|
||||
-webkit-transition-delay: 0.13s;
|
||||
transition-delay: 0.13s;
|
||||
}
|
||||
|
||||
.cs-skin-boxes.cs-active .cs-options li:nth-child(15) {
|
||||
-webkit-transition-delay: 0.14s;
|
||||
transition-delay: 0.14s;
|
||||
}
|
||||
|
||||
.cs-skin-boxes.cs-active .cs-options li:nth-child(16) {
|
||||
-webkit-transition-delay: 0.15s;
|
||||
transition-delay: 0.15s;
|
||||
}
|
||||
|
||||
.cs-skin-boxes.cs-active .cs-options li:nth-child(17) {
|
||||
-webkit-transition-delay: 0.16s;
|
||||
transition-delay: 0.16s;
|
||||
}
|
||||
|
||||
.cs-skin-boxes.cs-active .cs-options li:nth-child(18) {
|
||||
-webkit-transition-delay: 0.17s;
|
||||
transition-delay: 0.17s;
|
||||
}
|
||||
|
||||
.cs-skin-boxes.cs-active .cs-options li:nth-child(19) {
|
||||
-webkit-transition-delay: 0.18s;
|
||||
transition-delay: 0.18s;
|
||||
}
|
||||
|
||||
.cs-skin-boxes.cs-active .cs-options li:nth-child(20) {
|
||||
-webkit-transition-delay: 0.19s;
|
||||
transition-delay: 0.19s;
|
||||
}
|
||||
|
||||
.cs-skin-boxes .cs-options li.cs-selected::after {
|
||||
content: '\2714';
|
||||
color: rgba(0,0,0,0.1);
|
||||
position: absolute;
|
||||
font-size: 2em;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
-webkit-transform: translate3d(-50%,-50%,0) translate3d(0,-1em,0);
|
||||
transform: translate3d(-50%,-50%,0) translate3d(0,-1em,0);
|
||||
}
|
||||
|
||||
.cs-skin-boxes .cs-options li.cs-selected span::after {
|
||||
content: '';
|
||||
}
|
||||
|
||||
@media screen and (max-width: 30em) {
|
||||
.cs-skin-boxes .cs-options li.cs-selected::after {
|
||||
-webkit-transform: translate3d(-50%,-50%,0);
|
||||
transform: translate3d(-50%,-50%,0);
|
||||
}
|
||||
}
|
||||
|
||||
.cs-skin-boxes .cs-options li.color-588c75 {
|
||||
background-color: #588c75;
|
||||
}
|
||||
|
||||
.cs-skin-boxes .cs-options li.color-b0c47f {
|
||||
background-color: #b0c47f;
|
||||
}
|
||||
|
||||
.cs-skin-boxes .cs-options li.color-f3e395 {
|
||||
background-color: #f3e395;
|
||||
}
|
||||
|
||||
.cs-skin-boxes .cs-options li.color-f3ae73 {
|
||||
background-color: #f3ae73;
|
||||
}
|
||||
|
||||
.cs-skin-boxes .cs-options li.color-da645a {
|
||||
background-color: #da645a;
|
||||
}
|
||||
|
||||
.cs-skin-boxes .cs-options li.color-79a38f {
|
||||
background-color: #79a38f;
|
||||
}
|
||||
|
||||
.cs-skin-boxes .cs-options li.color-c1d099 {
|
||||
background-color: #c1d099;
|
||||
}
|
||||
|
||||
.cs-skin-boxes .cs-options li.color-f5eaaa {
|
||||
background-color: #f5eaaa;
|
||||
}
|
||||
|
||||
.cs-skin-boxes .cs-options li.color-f5be8f {
|
||||
background-color: #f5be8f;
|
||||
}
|
||||
|
||||
.cs-skin-boxes .cs-options li.color-e1837b {
|
||||
background-color: #e1837b;
|
||||
}
|
||||
|
||||
.cs-skin-boxes .cs-options li.color-9bbaab {
|
||||
background-color: #9bbaab;
|
||||
}
|
||||
|
||||
.cs-skin-boxes .cs-options li.color-d1dcb2 {
|
||||
background-color: #d1dcb2;
|
||||
}
|
||||
|
||||
.cs-skin-boxes .cs-options li.color-f9eec0 {
|
||||
background-color: #f9eec0;
|
||||
}
|
||||
|
||||
.cs-skin-boxes .cs-options li.color-f7cda9 {
|
||||
background-color: #f7cda9;
|
||||
}
|
||||
|
||||
.cs-skin-boxes .cs-options li.color-e8a19b {
|
||||
background-color: #e8a19b;
|
||||
}
|
||||
|
||||
.cs-skin-boxes .cs-options li.color-bdd1c8 {
|
||||
background-color: #bdd1c8;
|
||||
}
|
||||
|
||||
.cs-skin-boxes .cs-options li.color-e1e7cd {
|
||||
background-color: #e1e7cd;
|
||||
}
|
||||
|
||||
.cs-skin-boxes .cs-options li.color-faf4d4 {
|
||||
background-color: #faf4d4;
|
||||
}
|
||||
|
||||
.cs-skin-boxes .cs-options li.color-fbdfc9 {
|
||||
background-color: #fbdfc9;
|
||||
}
|
||||
|
||||
.cs-skin-boxes .cs-options li.color-f1c1bd {
|
||||
background-color: #f1c1bd;
|
||||
}
|
||||
|
||||
.cs-skin-boxes .cs-options span {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
line-height: 2em;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 30em) {
|
||||
.cs-skin-boxes .cs-options span { display: none; }
|
||||
}
|
||||
|
||||
.cs-skin-boxes .cs-options li span:hover,
|
||||
.cs-skin-boxes li.cs-focus span,
|
||||
.cs-skin-boxes li.cs-selected span {
|
||||
color: #fff;
|
||||
}
|
||||
135
css/demo.css
Normal file
135
css/demo.css
Normal file
@ -0,0 +1,135 @@
|
||||
@import url(http://fonts.googleapis.com/css?family=Raleway:400,700);
|
||||
@font-face {
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-family: 'codropsicons';
|
||||
src:url('../fonts/codropsicons/codropsicons.eot');
|
||||
src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),
|
||||
url('../fonts/codropsicons/codropsicons.woff') format('woff'),
|
||||
url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),
|
||||
url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');
|
||||
}
|
||||
|
||||
*, *:after, *:before { -webkit-box-sizing: border-box; box-sizing: border-box; }
|
||||
.clearfix:before, .clearfix:after { content: ''; display: table; }
|
||||
.clearfix:after { clear: both; }
|
||||
|
||||
html, body, .container {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #3b3f45;
|
||||
color: #fff;
|
||||
font-weight: 400;
|
||||
font-size: 1em;
|
||||
font-family: 'Raleway', Arial, sans-serif;
|
||||
overflow: hidden;
|
||||
overflow-y: scroll;
|
||||
min-height: 590px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: rgba(0,0,0,0.3);
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
a:hover, a:focus {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Top Navigation Style */
|
||||
.codrops-top {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
.codrops-top a {
|
||||
font-size: 0.69em;
|
||||
padding: 0 0.25em;
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
.codrops-icon:before {
|
||||
margin: 0 4px;
|
||||
text-transform: none;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-variant: normal;
|
||||
font-family: 'codropsicons';
|
||||
line-height: 1;
|
||||
speak: none;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
.codrops-icon-drop:before {
|
||||
content: "\e001";
|
||||
}
|
||||
|
||||
.codrops-icon-prev:before {
|
||||
content: "\e004";
|
||||
}
|
||||
|
||||
.codrops-icon-info:before {
|
||||
content: "\e003";
|
||||
}
|
||||
|
||||
.codrops-icon span {
|
||||
display: none;
|
||||
position: absolute;
|
||||
font-size: 0.85em;
|
||||
padding: 0.5em 0 0 0.25em;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.codrops-icon:hover span {
|
||||
display: block;
|
||||
color: #6a7b7e;
|
||||
}
|
||||
|
||||
/* Related demos */
|
||||
.related {
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
padding: 5em 0;
|
||||
display: none;
|
||||
background: #fff;
|
||||
color: rgba(0,0,0,0.3);
|
||||
}
|
||||
|
||||
.overview .related {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.related > a {
|
||||
border: 3px solid black;
|
||||
border-color: initial;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
margin: 20px 10px;
|
||||
padding: 25px;
|
||||
}
|
||||
|
||||
.related > a:hover,
|
||||
.related > a:focus {
|
||||
color: rgba(0,0,0,0.5);
|
||||
}
|
||||
|
||||
.related a img {
|
||||
max-width: 100%;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.related a:hover img,
|
||||
.related a:active img {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.related a h3 {
|
||||
margin: 0;
|
||||
padding: 0.5em 0 0.3em;
|
||||
max-width: 300px;
|
||||
text-align: left;
|
||||
}
|
||||
1
css/normalize.css
vendored
Normal file
1
css/normalize.css
vendored
Normal file
@ -0,0 +1 @@
|
||||
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}audio,canvas,video{display:inline-block;}audio:not([controls]){display:none;height:0;}[hidden]{display:none;}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}body{margin:0;}a:focus{outline:thin dotted;}a:active,a:hover{outline:0;}h1{font-size:2em;margin:0.67em 0;}abbr[title]{border-bottom:1px dotted;}b,strong{font-weight:bold;}dfn{font-style:italic;}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}mark{background:#ff0;color:#000;}code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}pre{white-space:pre-wrap;}q{quotes:"\201C" "\201D" "\2018" "\2019";}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sup{top:-0.5em;}sub{bottom:-0.25em;}img{border:0;}svg:not(:root){overflow:hidden;}figure{margin:0;}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}legend{border:0;padding:0;}button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}button,input{line-height:normal;}button,select{text-transform:none;}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}textarea{overflow:auto;vertical-align:top;}table{border-collapse:collapse;border-spacing:0;}
|
||||
7
css/testcss.css
Normal file
7
css/testcss.css
Normal file
@ -0,0 +1,7 @@
|
||||
.firstcss {
|
||||
color: red;
|
||||
}
|
||||
|
||||
.secondcss {
|
||||
color: blue;
|
||||
}
|
||||
BIN
fonts/.DS_Store
vendored
Normal file
BIN
fonts/.DS_Store
vendored
Normal file
Binary file not shown.
BIN
fonts/codropsicons/codropsicons.eot
Normal file
BIN
fonts/codropsicons/codropsicons.eot
Normal file
Binary file not shown.
24
fonts/codropsicons/codropsicons.svg
Normal file
24
fonts/codropsicons/codropsicons.svg
Normal file
@ -0,0 +1,24 @@
|
||||
<?xml version="1.0" standalone="no"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<metadata>
|
||||
This is a custom SVG font generated by IcoMoon.
|
||||
<iconset grid="14"></iconset>
|
||||
</metadata>
|
||||
<defs>
|
||||
<font id="codropsicons" horiz-adv-x="448" >
|
||||
<font-face units-per-em="448" ascent="384" descent="-64" />
|
||||
<missing-glyph horiz-adv-x="448" />
|
||||
<glyph unicode="" d="M 221.657,359.485 ,m0.00,0.00,c 0.00,0.00 -132.984-182.838 -132.205-286.236 0.515-68.522 61.089-123.688 135.314-123.218 74.202,0.479 133.943,56.421 133.428,124.943 C 357.414,178.368 221.657,359.485 221.657,359.485 z" />
|
||||
<glyph unicode="" d="M 384.00,160.00l0.00-32.00 q0.00-13.25 -8.125-22.625t-21.125-9.375l-176.00,0.00 l 73.25-73.50q 9.50-9.00 9.50-22.50t-9.50-22.50l-18.75-19.00q-9.25-9.25 -22.50-9.25q-13.00,0.00 -22.75,9.25l-162.75,163.00q-9.25,9.25 -9.25,22.50q0.00,13.00 9.25,22.75l 162.75,162.50q 9.50,9.50 22.75,9.50q 13.00,0.00 22.50-9.50l 18.75-18.50q 9.50-9.50 9.50-22.75t-9.50-22.75l-73.25-73.25l 176.00,0.00 q 13.00,0.00 21.125-9.375 t 8.125-22.625z" horiz-adv-x="384" />
|
||||
<glyph unicode="" d="M 407.273-23.273c0.00,0.00-325.818,0.00-366.545,0.00s-40.727,40.727-40.727,40.727l0.00,142.545 l 101.818,183.273l 244.364,0.00 l 101.818-183.273c0.00,0.00,0.00-101.818,0.00-142.545S 407.273-23.273, 407.273-23.273z M 325.818,302.545L 122.182,302.545
|
||||
l-71.273-142.545L 142.545,160.00 c0.00,0.00, 40.727,0.00, 40.727-40.727l0.00-20.364 l 81.455,0.00 l0.00,20.364 c0.00,0.00,0.00,40.727, 40.727,40.727l 91.636,0.00 L 325.818,302.545z M 407.273,119.273l-96.911,0.00 C 307.532,113.917, 305.455,107.503, 305.455,98.909c0.00-40.727-40.727-40.727-40.727-40.727L 183.273,58.182 c0.00,0.00-40.727,0.00-40.727,40.727
|
||||
c0.00,8.593-2.077,15.008-4.908,20.364L 40.727,119.273 l0.00-101.818 l 366.545,0.00 L 407.273,119.273 z M 132.364,221.091l 183.273,0.00 L 325.818,200.727L 122.182,200.727 L 132.364,221.091z M 152.727,261.818l 142.545,0.00 L 305.455,241.455L 142.545,241.455 L 152.727,261.818z" />
|
||||
<glyph unicode="" d="M 368.00,144.00q0.00-13.50 -9.25-22.75l-162.75-162.75q-9.75-9.25 -22.75-9.25q-12.75,0.00 -22.50,9.25l-18.75,18.75q-9.50,9.50 -9.50,22.75t 9.50,22.75l 73.25,73.25l-176.00,0.00 q-13.00,0.00 -21.125,9.375t-8.125,22.625l0.00,32.00 q0.00,13.25 8.125,22.625t 21.125,9.375l 176.00,0.00 l-73.25,73.50q-9.50,9.00 -9.50,22.50t 9.50,22.50l 18.75,18.75q 9.50,9.50 22.50,9.50q 13.25,0.00 22.75-9.50l 162.75-162.75q 9.25-8.75 9.25-22.50z" horiz-adv-x="384" />
|
||||
<glyph unicode="" d="M 224.00-64.00C 100.291-64.00,0.00,36.291,0.00,160.00S 100.291,384.00, 224.00,384.00s 224.00-100.291, 224.00-224.00S 347.709-64.00, 224.00-64.00z
|
||||
M 224.00,343.273c-101.228,0.00-183.273-82.045-183.273-183.273s 82.045-183.273, 183.273-183.273s 183.273,82.045, 183.273,183.273S 325.228,343.273, 224.00,343.273z M 244.364,122.164C 244.364,111.005, 244.364,98.909, 244.364,98.909l-40.727,0.00 c0.00,0.00,0.00,29.466,0.00,40.727
|
||||
s 9.123,20.364, 20.364,20.364l0.00,0.00c 22.481,0.00, 40.727,18.246, 40.727,40.727s-18.246,40.727-40.727,40.727S 183.273,223.209, 183.273,200.727c0.00-7.453, 2.138-14.356, 5.641-20.364L 145.437,180.364 C 143.727,186.90, 142.545,193.661, 142.545,200.727
|
||||
c0.00,44.983, 36.471,81.455, 81.455,81.455s 81.455-36.471, 81.455-81.455C 305.455,162.831, 279.45,131.247, 244.364,122.164z M 244.364,37.818l-40.727,0.00 l0.00,40.727 l 40.727,0.00 L 244.364,37.818 z" />
|
||||
<glyph unicode=" " horiz-adv-x="224" />
|
||||
<glyph class="hidden" unicode="" d="M0,384L 448 -64L0 -64 z" horiz-adv-x="0" />
|
||||
</font></defs></svg>
|
||||
|
After Width: | Height: | Size: 3.5 KiB |
BIN
fonts/codropsicons/codropsicons.ttf
Normal file
BIN
fonts/codropsicons/codropsicons.ttf
Normal file
Binary file not shown.
BIN
fonts/codropsicons/codropsicons.woff
Normal file
BIN
fonts/codropsicons/codropsicons.woff
Normal file
Binary file not shown.
6
fonts/codropsicons/license.txt
Normal file
6
fonts/codropsicons/license.txt
Normal file
@ -0,0 +1,6 @@
|
||||
Icon Set: Font Awesome -- http://fortawesome.github.com/Font-Awesome/
|
||||
License: SIL -- http://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL
|
||||
|
||||
|
||||
Icon Set: Eco Ico -- http://dribbble.com/shots/665585-Eco-Ico
|
||||
License: CC0 -- http://creativecommons.org/publicdomain/zero/1.0/
|
||||
BIN
img/.DS_Store
vendored
Normal file
BIN
img/.DS_Store
vendored
Normal file
Binary file not shown.
1
img/Readme.txt
Normal file
1
img/Readme.txt
Normal file
@ -0,0 +1 @@
|
||||
Star Icon from http://wiki.sugarlabs.org/go/File:Abacus-star.svg
--------------------------------
Freebie: Roundicons Icon Set (60 Icons, PNG, SVG, EPS, AI) from Smashing Magazine:
This freebie has been brought to you by SmashingMagazine.com.
The icon set was designed by Ramy Wafaa, Suzanne de Jong and Natalie Schaubert (http://roundicons.com/about-us/) from Roundicons (http://roundicons.com/), and released exclusively for Smashing Magazine and its readers.
- - - - - - - - - - - - - - - - - -
Dearest Smashing reader,
Thank you for downloading this icon set! :-) All round icons are royalty-free. You can use them in your commercial as well as your personal works. You may modify the size, color or shape of the icons. No attribution is required. However, reselling of bundles or individual pictograms is prohibited.
You may make one copy of the assets solely for backup or archival purposes or transfer the assets to a single hard drive, provided that you keep the original and accompanying documentation in your possession. You may enter projects into contests, film festivals, publications and or exhibitions that use the assets in the permitted listed methods.
Furthermore, no claim or action of any sort can arise against "roundicons.com" in this agreement for the use of these assets and no liability can attach to "roundicons.com" for any acts, omissions or failures on the part the terms.
The icons may not be resold, sublicensed, rented, transferred or otherwise made available for use. The icons may not be offered for free downloading from websites other than SmashingMagazine.com.
Please link to the article in which this freebie was released if you would like to spread the word: http://www.smashingmagazine.com/2014/01/24/roundicons-set-60-icons-png-ai-source/
Sincerely yours,
The Smashing Magazine Team
www.smashingmagazine.com
|
||||
13
img/abacusstar.svg
Normal file
13
img/abacusstar.svg
Normal file
@ -0,0 +1,13 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="60px" height="60px" viewBox="0 0 60 60" enable-background="new 0 0 60 60" xml:space="preserve">
|
||||
<path id="rect3894" fill="#00000" opacity="0.3" d="M30.02,11.932c-1.739,0-3.168,1.429-3.168,3.17v7.27l-5.156-5.157
|
||||
c-1.233-1.23-3.21-1.231-4.439,0c-1.23,1.233-1.231,3.25,0,4.481l5.2,5.156h-7.354c-1.741,0-3.17,1.43-3.17,3.169
|
||||
c0,1.741,1.429,3.128,3.17,3.128h7.312l-5.158,5.156c-1.23,1.231-1.231,3.249,0,4.479c1.233,1.23,3.25,1.191,4.48-0.042l5.115-5.156
|
||||
v7.354c0,1.742,1.43,3.129,3.168,3.129c1.742,0,3.128-1.387,3.128-3.129v-7.395l5.241,5.197c1.233,1.23,3.207,1.233,4.438,0
|
||||
c1.23-1.231,1.232-3.207,0-4.438l-5.198-5.156h7.311c1.742,0,3.129-1.387,3.129-3.128c0-1.739-1.387-3.169-3.129-3.169h-7.354
|
||||
l5.198-5.241c1.23-1.233,1.232-3.167,0-4.396c-1.23-1.23-3.207-1.274-4.438-0.042l-5.198,5.241v-7.312
|
||||
C33.148,13.361,31.762,11.932,30.02,11.932z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
70
img/conversion.svg
Normal file
70
img/conversion.svg
Normal file
@ -0,0 +1,70 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="136.913px" height="136.914px" viewBox="0 0 136.913 136.914" enable-background="new 0 0 136.913 136.914"
|
||||
xml:space="preserve">
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<circle fill="#D35387" cx="68.456" cy="68.456" r="63.333"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path fill="#505251" d="M76.771,105.904c-2.031-5.91-3.182-7.449-7.041-7.449c-3.809,0-5.131,1.954-7.037,7.449
|
||||
c-6.502,0.63-11.064,2.107-11.064,3.828c0,2.295,8.104,4.154,18.102,4.154s18.104-1.859,18.104-4.154
|
||||
C87.834,108.012,83.271,106.535,76.771,105.904z"/>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path fill="#3D4040" d="M115.543,95.147c0,3.024-2.451,5.476-5.475,5.476c0,0-22.531,3.174-41.525,3.174
|
||||
c-14.541,0-39.25-3.174-39.25-3.174c-3.025,0-5.477-2.451-5.477-5.476V41.069c0-3.024,2.451-5.476,5.477-5.476h80.775
|
||||
c3.023,0,5.475,2.451,5.475,5.476V95.147z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<rect x="27.516" y="39.547" fill="#5DC0C1" width="84.135" height="56.905"/>
|
||||
</g>
|
||||
<g>
|
||||
<circle fill="#FDF2F7" cx="52.655" cy="69.302" r="4.384"/>
|
||||
</g>
|
||||
<g>
|
||||
<circle fill="#FDF2F7" cx="74.76" cy="61.84" r="4.383"/>
|
||||
</g>
|
||||
<g>
|
||||
<circle fill="#FDF2F7" cx="96.585" cy="51.954" r="4.384"/>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<path fill="#357180" d="M111.449,43.433c-3.805-0.975-6.607,2.007-10.156,5.777c-0.256,0.272-0.518,0.55-0.783,0.829
|
||||
c0.285,0.581,0.459,1.226,0.459,1.915c0,2.42-1.965,4.383-4.385,4.383c-0.805,0-1.549-0.232-2.197-0.61
|
||||
c-3.787,2.894-8.578,5.292-15.248,5.901c-0.004,0-0.012,0.002-0.016,0.002c0.002,0.071,0.02,0.138,0.02,0.21
|
||||
c0,2.421-1.963,4.384-4.383,4.384c-1.922,0-3.537-1.245-4.129-2.965c-2.494,0.593-4.971,1.234-6.881,1.73l-1.699,0.438
|
||||
c-2.07,0.528-3.936,1.048-5.646,1.634c0.395,0.657,0.635,1.418,0.635,2.241c0,2.42-1.963,4.383-4.383,4.383
|
||||
c-1.789,0-3.322-1.074-4.004-2.609c-3.043,2.377-5.748,5.784-8.723,11.139c-2.1,3.777-4.326,5.69-6.621,5.69
|
||||
c-0.047,0-0.092,0-0.137-0.002c-2.863-0.094-4.896-3.127-5.656-4.464v13.014h84.135V43.491L111.449,43.433z"/>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path fill="#FDF7FA" d="M27.506,81.496v1.956c0.76,1.338,2.844,4.384,5.709,4.478c0.045,0.002,0.09,0.003,0.135,0.003
|
||||
c2.295,0,4.521-1.914,6.621-5.69C46.504,70.487,51.729,68.1,62.094,65.454l1.697-0.438c4.355-1.129,11.648-3.018,15.391-3.361
|
||||
c11.447-1.046,17.383-7.351,22.152-12.417c3.551-3.771,6.5-6.748,10.305-5.774l-0.006-0.871
|
||||
c-4.307-1.101-7.195,2.051-10.945,6.035C96.02,53.585,90.211,59.754,79.1,60.769c-3.814,0.35-11.148,2.25-15.531,3.387
|
||||
l-1.695,0.437c-10.623,2.711-15.979,5.159-22.68,17.218c-1.965,3.535-3.969,5.303-5.949,5.231
|
||||
c-3.055-0.099-5.189-4.531-5.211-4.576L27.506,81.496z"/>
|
||||
</g>
|
||||
<g>
|
||||
<polygon fill="#FDF7FA" points="27.516,83.438 27.516,83.438 27.512,83.43 "/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 3.1 KiB |
6
img/dollar.svg
Normal file
6
img/dollar.svg
Normal file
@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="500" height="500">
|
||||
<path d="m 145,312 c -2,69 31,100 104,102 78,1 113,-34 109,-101 -6,-58 -62,-73 -106,-79 -48,-17 -99,-25 -99,-95 0,-48 32,-79 99,-78 60,0 97,25 96,84" style="fill:none;stroke:#232529;stroke-width:40;" />
|
||||
<path d="m 250,15 0,470" style="stroke:#232529;stroke-width:30;" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 500 B |
95
img/mobile.svg
Normal file
95
img/mobile.svg
Normal file
@ -0,0 +1,95 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="136.913px" height="136.914px" viewBox="0 0 136.913 136.914" enable-background="new 0 0 136.913 136.914"
|
||||
xml:space="preserve">
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<circle fill="#EDBF00" cx="68.456" cy="68.458" r="63.333"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path fill="#F3F4F5" d="M93.348,106.704c0,5.815-2.084,7.897-7.898,7.897H53.857c-5.816,0-7.898-2.082-7.898-7.897V32.989
|
||||
c0-5.815,2.082-7.897,7.898-7.897h31.592c5.814,0,7.898,2.082,7.898,7.897V106.704z"/>
|
||||
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="69.543" y1="33.6475" x2="69.543" y2="105.1685">
|
||||
<stop offset="0" style="stop-color:#5978BA"/>
|
||||
<stop offset="0.703" style="stop-color:#4E9DB8"/>
|
||||
<stop offset="1" style="stop-color:#379CC9"/>
|
||||
</linearGradient>
|
||||
<rect x="48.152" y="33.647" fill="url(#SVGID_1_)" width="42.781" height="71.521"/>
|
||||
<g>
|
||||
<path fill="#6CC077" d="M53.074,63.195h33.264c0.816,0,1.475-0.66,1.475-1.474v-5.349l-2.754-2.754c0,0-1.564-2.017-3.018-1.935
|
||||
c-1.311,0.075-2.836,1.713-3.129,2.037L77.08,51.89c0,0-1.832-2.363-3.537-2.269c-1.705,0.098-3.74,2.472-3.74,2.472
|
||||
l-0.557,0.558l-3.447-3.448c0,0-2.254-2.904-4.35-2.786c-2.092,0.118-4.596,3.034-4.596,3.034l-5.256,5.256v7.016
|
||||
C51.598,62.535,52.26,63.195,53.074,63.195z"/>
|
||||
<path fill="#DBF0F5" d="M61.449,46.416c2.096-0.118,4.35,2.786,4.35,2.786l3.447,3.448l0.557-0.558c0,0,2.035-2.374,3.74-2.472
|
||||
c1.705-0.095,3.537,2.269,3.537,2.269l1.832,1.832c0.293-0.324,1.818-1.962,3.129-2.037c1.453-0.082,3.018,1.935,3.018,1.935
|
||||
l2.754,2.754V42.498c0-0.815-0.658-1.477-1.475-1.477H53.074c-0.814,0-1.477,0.661-1.477,1.477v12.208l5.256-5.256
|
||||
C56.854,49.45,59.357,46.534,61.449,46.416z"/>
|
||||
</g>
|
||||
<path fill="#B8B9BA" d="M74.385,28.089c0,0.333-0.391,0.6-0.871,0.6h-7.719c-0.482,0-0.873-0.267-0.873-0.6l0,0
|
||||
c0-0.33,0.391-0.599,0.873-0.599h7.719C73.994,27.49,74.385,27.759,74.385,28.089L74.385,28.089z"/>
|
||||
<g>
|
||||
<circle fill="#FFFFFF" cx="69.64" cy="88.575" r="1.206"/>
|
||||
<circle fill="#FFFFFF" cx="74.027" cy="88.575" r="0.768"/>
|
||||
<circle fill="#FFFFFF" cx="77.537" cy="88.575" r="0.768"/>
|
||||
<circle fill="#FFFFFF" cx="61.741" cy="88.575" r="0.769"/>
|
||||
<circle fill="#FFFFFF" cx="65.252" cy="88.575" r="0.768"/>
|
||||
</g>
|
||||
<rect x="48.152" y="33.647" opacity="0.5" fill="#202121" width="42.762" height="3.585"/>
|
||||
<circle fill="#FFFFFF" cx="84.517" cy="35.33" r="0.913"/>
|
||||
<circle fill="#FFFFFF" cx="50.347" cy="35.33" r="0.913"/>
|
||||
<circle fill="#FFFFFF" cx="88.685" cy="35.33" r="0.913"/>
|
||||
<g>
|
||||
<defs>
|
||||
<rect id="SVGID_2_" x="48.152" y="33.647" width="42.781" height="71.521"/>
|
||||
</defs>
|
||||
<clipPath id="SVGID_3_">
|
||||
<use xlink:href="#SVGID_2_" overflow="visible"/>
|
||||
</clipPath>
|
||||
</g>
|
||||
<g>
|
||||
<path fill="#B5DBAF" d="M58.633,82.005c0,0.814-0.66,1.474-1.475,1.474h-4.305c-0.816,0-1.477-0.659-1.477-1.474v-4.306
|
||||
c0-0.816,0.66-1.477,1.477-1.477h4.305c0.814,0,1.475,0.66,1.475,1.477V82.005z"/>
|
||||
<path fill="#F6A2A3" d="M68.396,82.005c0,0.814-0.662,1.474-1.477,1.474h-4.303c-0.816,0-1.477-0.659-1.477-1.474v-4.306
|
||||
c0-0.816,0.66-1.477,1.477-1.477h4.303c0.814,0,1.477,0.66,1.477,1.477V82.005z"/>
|
||||
<path fill="#67B8CB" d="M78.158,82.005c0,0.814-0.662,1.474-1.475,1.474h-4.305c-0.814,0-1.479-0.659-1.479-1.474v-4.306
|
||||
c0-0.816,0.664-1.477,1.479-1.477h4.305c0.812,0,1.475,0.66,1.475,1.477V82.005z"/>
|
||||
<path fill="#F5E554" d="M87.92,82.005c0,0.814-0.66,1.474-1.475,1.474h-4.305c-0.816,0-1.475-0.659-1.475-1.474v-4.306
|
||||
c0-0.816,0.658-1.477,1.475-1.477h4.305c0.814,0,1.475,0.66,1.475,1.477V82.005z"/>
|
||||
</g>
|
||||
<path fill="none" stroke="#67B8CB" stroke-width="0.5" stroke-miterlimit="10" d="M87.811,69.72c0,0.813-0.658,1.473-1.475,1.473
|
||||
H53.072c-0.814,0-1.477-0.659-1.477-1.473v-1.674c0-0.815,0.662-1.476,1.477-1.476h33.264c0.816,0,1.475,0.66,1.475,1.476V69.72z
|
||||
"/>
|
||||
<g>
|
||||
<circle fill="#DBF0F5" cx="84.373" cy="68.42" r="1.096"/>
|
||||
<path fill="#DBF0F5" d="M86.355,70.415c-0.086,0.085-0.25,0.061-0.365-0.056l-1.232-1.232c-0.115-0.114-0.141-0.277-0.055-0.363
|
||||
l0.109-0.109c0.086-0.087,0.25-0.061,0.365,0.056l1.232,1.23c0.115,0.116,0.141,0.279,0.053,0.365L86.355,70.415z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path fill="#67B8CB" d="M56.957,98.483c0,0.662-0.537,1.2-1.201,1.2H52.25c-0.664,0-1.203-0.538-1.203-1.2v-3.508
|
||||
c0-0.663,0.539-1.201,1.203-1.201h3.506c0.664,0,1.201,0.538,1.201,1.201V98.483z"/>
|
||||
<path fill="#F5E554" d="M64.91,98.483c0,0.662-0.541,1.2-1.203,1.2h-3.506c-0.664,0-1.201-0.538-1.201-1.2v-3.508
|
||||
c0-0.663,0.537-1.201,1.201-1.201h3.506c0.662,0,1.203,0.538,1.203,1.201V98.483z"/>
|
||||
<path fill="#B5DBAF" d="M72.859,98.483c0,0.662-0.539,1.2-1.201,1.2h-3.506c-0.664,0-1.203-0.538-1.203-1.2v-3.508
|
||||
c0-0.663,0.539-1.201,1.203-1.201h3.506c0.662,0,1.201,0.538,1.201,1.201V98.483z"/>
|
||||
<path fill="#D3D4E3" d="M80.811,98.483c0,0.662-0.539,1.2-1.201,1.2h-3.506c-0.666,0-1.201-0.538-1.201-1.2v-3.508
|
||||
c0-0.663,0.535-1.201,1.201-1.201h3.506c0.662,0,1.201,0.538,1.201,1.201V98.483z"/>
|
||||
<path fill="#F6A2A3" d="M88.709,98.483c0,0.662-0.539,1.2-1.201,1.2h-3.506c-0.666,0-1.203-0.538-1.203-1.2v-3.508
|
||||
c0-0.663,0.537-1.201,1.203-1.201h3.506c0.662,0,1.201,0.538,1.201,1.201V98.483z"/>
|
||||
</g>
|
||||
<path fill="none" stroke="#B8B9BA" stroke-width="0.5" stroke-miterlimit="10" d="M74.463,110.35
|
||||
c0,0.892-0.543,1.615-1.213,1.615h-7.117c-0.668,0-1.211-0.724-1.211-1.615v-1.146c0-0.893,0.543-1.615,1.211-1.615h7.117
|
||||
c0.67,0,1.213,0.723,1.213,1.615V110.35z"/>
|
||||
<circle fill="#B8B9BA" cx="75.672" cy="28.133" r="0.658"/>
|
||||
<circle fill="#B8B9BA" cx="77.428" cy="28.133" r="0.658"/>
|
||||
<circle fill="#B8B9BA" cx="83.734" cy="28.407" r="0.885"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.0 KiB |
BIN
img/relatedposts/MorphingButtons-300x162.png
Normal file
BIN
img/relatedposts/MorphingButtons-300x162.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
BIN
img/relatedposts/minimalform1-300x162.png
Normal file
BIN
img/relatedposts/minimalform1-300x162.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.0 KiB |
69
img/social.svg
Normal file
69
img/social.svg
Normal file
@ -0,0 +1,69 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="136.914px" height="136.914px" viewBox="0 0 136.914 136.914" enable-background="new 0 0 136.914 136.914"
|
||||
xml:space="preserve">
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<circle fill="#2DB58E" cx="68.456" cy="68.457" r="63.333"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<g>
|
||||
<path fill="#D35959" d="M69.437,28.656c-22.37,0-40.504,18.135-40.504,40.504s18.134,40.504,40.504,40.504
|
||||
c22.369,0,40.504-18.135,40.504-40.504S91.806,28.656,69.437,28.656z M69.437,103.664c-19.057,0-34.504-15.448-34.504-34.504
|
||||
S50.38,34.656,69.437,34.656c19.056,0,34.504,15.448,34.504,34.504S88.492,103.664,69.437,103.664z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path fill="#D35959" d="M69.437,40.156c-16.019,0-29.004,12.986-29.004,29.004s12.985,29.004,29.004,29.004
|
||||
S98.44,85.178,98.44,69.16S85.455,40.156,69.437,40.156z M69.437,93.867c-13.646,0-24.708-11.062-24.708-24.707
|
||||
s11.062-24.707,24.708-24.707S94.144,55.515,94.144,69.16S83.082,93.867,69.437,93.867z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path fill="#CD4F4F" d="M69.437,50.156c-10.496,0-19.004,8.509-19.004,19.004s8.508,19.004,19.004,19.004
|
||||
c10.495,0,19.004-8.509,19.004-19.004S79.932,50.156,69.437,50.156z M69.437,84.349c-8.389,0-15.189-6.8-15.189-15.188
|
||||
s6.801-15.188,15.189-15.188s15.188,6.8,15.188,15.188S77.825,84.349,69.437,84.349z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path fill="#C54342" d="M69.437,75.523c-3.515,0-6.363-2.849-6.363-6.363s2.849-6.363,6.363-6.363
|
||||
c3.514,0,6.362,2.849,6.362,6.363S72.95,75.523,69.437,75.523z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<polygon fill="#C93435" points="89.482,50.309 99.465,52.612 115.974,36.103 105.992,33.799 "/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<polygon fill="#E79E2D" points="108.712,35.227 107.711,31.395 103.88,30.395 66.981,67.291 66.981,72.123 71.814,72.123
|
||||
"/>
|
||||
</g>
|
||||
<g>
|
||||
<polygon fill="#F2BE3E" points="107.711,31.395 103.88,30.395 66.981,67.291 66.981,72.123 "/>
|
||||
</g>
|
||||
<g>
|
||||
<polygon fill="#F9CA62" points="108.707,35.354 104.693,34.388 103.749,30.397 107.763,31.364 "/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<polygon fill="#C93435" points="76.983,47.475 86.965,49.778 103.475,33.269 93.492,30.965 "/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
80
index.html
Executable file
80
index.html
Executable file
@ -0,0 +1,80 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="no-js">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>FLOdata tester</title>
|
||||
<meta name="description" content="Fullscreen Form Interface: A distraction-free form concept with fancy animations" />
|
||||
<meta name="keywords" content="fullscreen form, css animations, distraction-free, web design" />
|
||||
<meta name="author" content="Codrops" />
|
||||
<link rel="shortcut icon" href="../favicon.ico">
|
||||
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
|
||||
<link rel="stylesheet" type="text/css" href="css/demo.css" />
|
||||
<link rel="stylesheet" type="text/css" href="css/component.css" />
|
||||
<link rel="stylesheet" type="text/css" href="css/cs-select.css" />
|
||||
<link rel="stylesheet" type="text/css" href="css/cs-skin-boxes.css" />
|
||||
<script src="js/modernizr.custom.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
|
||||
<div class="fs-form-wrap" id="fs-form-wrap">
|
||||
<div class="fs-title">
|
||||
<h1>FLOdata tester</h1>
|
||||
<div class="codrops-top">
|
||||
<a class="codrops-icon codrops-icon-prev" href="http://tympanus.net/Development/NotificationStyles/"><span>Previous Demo</span></a>
|
||||
<a class="codrops-icon codrops-icon-drop" href="http://tympanus.net/codrops/?p=19520"><span>Back to the Codrops Article</span></a>
|
||||
<a class="codrops-icon codrops-icon-info" href="#"><span>This is a demo for a fullscreen form</span></a>
|
||||
</div>
|
||||
</div>
|
||||
<form id="myform" class="fs-form fs-form-full" autocomplete="off">
|
||||
<ol class="fs-fields">
|
||||
<li>
|
||||
<label class="fs-field-label fs-anim-upper" for="q1">Enter FLO data</label>
|
||||
<input class="fs-anim-lower" id="q1" name="q1" type="text" placeholder="Send 50 rmt#" required/>
|
||||
</li>
|
||||
</ol><!-- /fs-fields -->
|
||||
<button class="fs-submit" type="submit">Send answers</button>
|
||||
</form><!-- /fs-form -->
|
||||
</div><!-- /fs-form-wrap -->
|
||||
|
||||
<!-- Related demos -->
|
||||
<div class="related">
|
||||
<p>If you enjoyed this demo you might also like:</p>
|
||||
<a href="http://tympanus.net/Development/MinimalForm/">
|
||||
<img src="img/relatedposts/minimalform1-300x162.png" />
|
||||
<h3>Minimal Form Interface</h3>
|
||||
</a>
|
||||
<a href="http://tympanus.net/Development/ButtonComponentMorph/">
|
||||
<img src="img/relatedposts/MorphingButtons-300x162.png" />
|
||||
<h3>Morphing Buttons Concept</h3>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
</div><!-- /container -->
|
||||
<script src="js/classie.js"></script>
|
||||
<script src="js/selectFx.js"></script>
|
||||
<script src="js/fullscreenForm.js"></script>
|
||||
<script>
|
||||
(function() {
|
||||
var formWrap = document.getElementById( 'fs-form-wrap' );
|
||||
|
||||
[].slice.call( document.querySelectorAll( 'select.cs-select' ) ).forEach( function(el) {
|
||||
new SelectFx( el, {
|
||||
stickyPlaceholder: false,
|
||||
onChange: function(val){
|
||||
document.querySelector('span.cs-placeholder').style.backgroundColor = val;
|
||||
}
|
||||
});
|
||||
} );
|
||||
|
||||
new FForm( formWrap, {
|
||||
onReview : function() {
|
||||
classie.add( document.body, 'overview' ); // for demo purposes only
|
||||
}
|
||||
} );
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
80
js/classie.js
Executable file
80
js/classie.js
Executable file
@ -0,0 +1,80 @@
|
||||
/*!
|
||||
* classie - class helper functions
|
||||
* from bonzo https://github.com/ded/bonzo
|
||||
*
|
||||
* classie.has( elem, 'my-class' ) -> true/false
|
||||
* classie.add( elem, 'my-new-class' )
|
||||
* classie.remove( elem, 'my-unwanted-class' )
|
||||
* classie.toggle( elem, 'my-class' )
|
||||
*/
|
||||
|
||||
/*jshint browser: true, strict: true, undef: true */
|
||||
/*global define: false */
|
||||
|
||||
( function( window ) {
|
||||
|
||||
'use strict';
|
||||
|
||||
// class helper functions from bonzo https://github.com/ded/bonzo
|
||||
|
||||
function classReg( className ) {
|
||||
return new RegExp("(^|\\s+)" + className + "(\\s+|$)");
|
||||
}
|
||||
|
||||
// classList support for class management
|
||||
// altho to be fair, the api sucks because it won't accept multiple classes at once
|
||||
var hasClass, addClass, removeClass;
|
||||
|
||||
if ( 'classList' in document.documentElement ) {
|
||||
hasClass = function( elem, c ) {
|
||||
return elem.classList.contains( c );
|
||||
};
|
||||
addClass = function( elem, c ) {
|
||||
elem.classList.add( c );
|
||||
};
|
||||
removeClass = function( elem, c ) {
|
||||
elem.classList.remove( c );
|
||||
};
|
||||
}
|
||||
else {
|
||||
hasClass = function( elem, c ) {
|
||||
return classReg( c ).test( elem.className );
|
||||
};
|
||||
addClass = function( elem, c ) {
|
||||
if ( !hasClass( elem, c ) ) {
|
||||
elem.className = elem.className + ' ' + c;
|
||||
}
|
||||
};
|
||||
removeClass = function( elem, c ) {
|
||||
elem.className = elem.className.replace( classReg( c ), ' ' );
|
||||
};
|
||||
}
|
||||
|
||||
function toggleClass( elem, c ) {
|
||||
var fn = hasClass( elem, c ) ? removeClass : addClass;
|
||||
fn( elem, c );
|
||||
}
|
||||
|
||||
var classie = {
|
||||
// full names
|
||||
hasClass: hasClass,
|
||||
addClass: addClass,
|
||||
removeClass: removeClass,
|
||||
toggleClass: toggleClass,
|
||||
// short names
|
||||
has: hasClass,
|
||||
add: addClass,
|
||||
remove: removeClass,
|
||||
toggle: toggleClass
|
||||
};
|
||||
|
||||
// transport
|
||||
if ( typeof define === 'function' && define.amd ) {
|
||||
// AMD
|
||||
define( classie );
|
||||
} else {
|
||||
// browser global
|
||||
window.classie = classie;
|
||||
}
|
||||
|
||||
})( window );
|
||||
28
js/createResult.js
Normal file
28
js/createResult.js
Normal file
@ -0,0 +1,28 @@
|
||||
var div = document.createElement("div");
|
||||
div.setAttribute("id", "myform");
|
||||
div.setAttribute("class", "fs-form fs-form-overview fs-show");
|
||||
|
||||
var ol = document.createElement('ol');
|
||||
ol.setAttribute("class","fs-fields");
|
||||
|
||||
var fieldnames = [{'FLO data':'hey i wrote FLO data'},{'Type':'transfer'},{'Identification':'rmt#'},{'Amount':5000}]
|
||||
|
||||
for (var i=0; i<fieldnames.length; i++){
|
||||
var item= document.createElement('li');
|
||||
var label = document.createElement('label');
|
||||
label.setAttribute('class','fs-field-label fs-anim-upper');
|
||||
label.setAttribute('for','q'+ i.toString());
|
||||
label.innerHTML = Object.keys(fieldnames[i])[0]
|
||||
var input = document.createElement('input');
|
||||
input.setAttribute('class','fs-anim-lower');
|
||||
input.setAttribute("id",'q'+ i.toString());
|
||||
input.setAttribute("name",'q'+ i.toString());
|
||||
input.setAttribute("type","text");
|
||||
input.setAttribute("value",fieldnames[i][label.innerHTML]);
|
||||
item.appendChild(label)
|
||||
item.appendChild(input)
|
||||
ol.appendChild(item)
|
||||
}
|
||||
|
||||
div.appendChild(ol)
|
||||
document.body.appendChild(div);
|
||||
663
js/fullscreenForm.js
Normal file
663
js/fullscreenForm.js
Normal file
@ -0,0 +1,663 @@
|
||||
/**
|
||||
* fullscreenForm.js v1.0.0
|
||||
* http://www.codrops.com
|
||||
*
|
||||
* Licensed under the MIT license.
|
||||
* http://www.opensource.org/licenses/mit-license.php
|
||||
*
|
||||
* Copyright 2014, Codrops
|
||||
* http://www.codrops.com
|
||||
*/
|
||||
;( function( window ) {
|
||||
|
||||
'use strict';
|
||||
|
||||
var support = { animations : Modernizr.cssanimations },
|
||||
animEndEventNames = { 'WebkitAnimation' : 'webkitAnimationEnd', 'OAnimation' : 'oAnimationEnd', 'msAnimation' : 'MSAnimationEnd', 'animation' : 'animationend' },
|
||||
// animation end event name
|
||||
animEndEventName = animEndEventNames[ Modernizr.prefixed( 'animation' ) ];
|
||||
|
||||
/**
|
||||
* extend obj function
|
||||
*/
|
||||
function extend( a, b ) {
|
||||
for( var key in b ) {
|
||||
if( b.hasOwnProperty( key ) ) {
|
||||
a[key] = b[key];
|
||||
}
|
||||
}
|
||||
return a;
|
||||
}
|
||||
|
||||
/**
|
||||
* createElement function
|
||||
* creates an element with tag = tag, className = opt.cName, innerHTML = opt.inner and appends it to opt.appendTo
|
||||
*/
|
||||
function createElement( tag, opt ) {
|
||||
var el = document.createElement( tag )
|
||||
if( opt ) {
|
||||
if( opt.cName ) {
|
||||
el.className = opt.cName;
|
||||
}
|
||||
if( opt.inner ) {
|
||||
el.innerHTML = opt.inner;
|
||||
}
|
||||
if( opt.appendTo ) {
|
||||
opt.appendTo.appendChild( el );
|
||||
}
|
||||
}
|
||||
return el;
|
||||
}
|
||||
|
||||
// finds no of occurances of substring
|
||||
function occurrences(string, subString, allowOverlapping) {
|
||||
string += "";
|
||||
subString += "";
|
||||
if (subString.length <= 0) return (string.length + 1);
|
||||
|
||||
var n = 0,
|
||||
pos = 0,
|
||||
step = allowOverlapping ? 1 : subString.length;
|
||||
|
||||
while (true) {
|
||||
pos = string.indexOf(subString, pos);
|
||||
if (pos >= 0) {
|
||||
++n;
|
||||
pos += step;
|
||||
} else break;
|
||||
}
|
||||
return n;
|
||||
}
|
||||
|
||||
function isTransfer(text){
|
||||
var wordlist = ['transfer','send','give']; // keep list's content lowercase
|
||||
var textList = text.split(' ');
|
||||
for (var i=0; i<wordlist.length; i++) {
|
||||
if (textList.includes(wordlist[i])) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function isIncorp(text){
|
||||
var wordlist = ['incorporate','create','start', 'begin']; // keep list's content lowercase
|
||||
var textList = text.split(' ');
|
||||
for (var i=0; i<wordlist.length; i++) {
|
||||
if (textList.includes(wordlist[i])) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function extractMarker(text) {
|
||||
var textList = text.split(' ');
|
||||
for (var i=0; i<textList.length; i++){
|
||||
if ( textList[i][textList[i].length-1] == '#') {
|
||||
return textList[i];
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
|
||||
function extractOperation(text) {
|
||||
var operationList = ['send', 'transfer', 'give']; // keep list's content lowercase
|
||||
var count = 0;
|
||||
var returnval;
|
||||
for (var i=0; i<operationList.length; i++){
|
||||
count += occurrences(text,operationList[i]);
|
||||
if (count>1){
|
||||
return 'too many';
|
||||
}
|
||||
if (count==1 && !returnval) {
|
||||
returnval = operationList[i];
|
||||
}
|
||||
}
|
||||
return returnval;
|
||||
}
|
||||
|
||||
function extractAmount(text) {
|
||||
var count=0;
|
||||
var returnval;
|
||||
var splitText = text.split(/\W+/);
|
||||
|
||||
for (var i=0; i<splitText.length; i++) {
|
||||
if (parseFloat(splitText[i])) {
|
||||
count += 1;
|
||||
returnval = parseFloat(splitText[i]);
|
||||
}
|
||||
if (count>1){
|
||||
return 'Too many';
|
||||
}
|
||||
}
|
||||
return returnval;
|
||||
}
|
||||
|
||||
function extractInitTokens(text){
|
||||
var base_units = {'thousand':10**3 , 'million':10**6 ,'billion':10**9, 'trillion':10**12};
|
||||
var textList = text.split(' ');
|
||||
for (var i=0; i<textList.length; i++){
|
||||
for (var j=0; j<base_units.length; j++){
|
||||
temp = textList[i].split(base_units[j]);
|
||||
if (temp.length==2 && temp[1]=='') {
|
||||
return parseFloat(temp[0])*base_units[base_units[j]]
|
||||
}
|
||||
}
|
||||
|
||||
if (parseFloat(textList[i])){
|
||||
var result = parseFloat(textList[i]);
|
||||
if (base_units.hasOwnProperty(textList[i+1])){
|
||||
return result*base_units[textList[i+1]];
|
||||
}
|
||||
return result;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function parse_flodata(flodata){
|
||||
if (flodata.slice(0,5) == 'text'){
|
||||
flodata = flodata.split('text:')[1];
|
||||
}
|
||||
|
||||
var cleanstring = flodata.replace(/ +/g,' ');
|
||||
cleanstring = cleanstring.toLowerCase();
|
||||
|
||||
var parsed_data;
|
||||
|
||||
if (isTransfer(cleanstring)) {
|
||||
var marker = extractMarker(cleanstring);
|
||||
var operation = extractOperation(cleanstring);
|
||||
var amount = extractAmount(cleanstring);
|
||||
parsed_data = {'type': 'transfer', 'flodata': flodata, 'marker': marker, 'operation': operation,
|
||||
'amount': amount};
|
||||
} else if (isIncorp(cleanstring)) {
|
||||
var incMarker = extractMarker(cleanstring);
|
||||
var initTokens = extractInitTokens(cleanstring);
|
||||
parsed_data = {'type': 'incorporation', 'flodata': flodata, 'marker': incMarker, 'initTokens': initTokens}
|
||||
}
|
||||
else{
|
||||
parsed_data = {'type': 'noise', 'flodata': flodata}
|
||||
}
|
||||
|
||||
return parsed_data
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* FForm function
|
||||
*/
|
||||
function FForm( el, options ) {
|
||||
this.el = el;
|
||||
this.options = extend( {}, this.options );
|
||||
extend( this.options, options );
|
||||
this._init();
|
||||
}
|
||||
|
||||
/**
|
||||
* FForm options
|
||||
*/
|
||||
FForm.prototype.options = {
|
||||
// show progress bar
|
||||
ctrlProgress : true,
|
||||
// show navigation dots
|
||||
ctrlNavDots : true,
|
||||
// show [current field]/[total fields] status
|
||||
ctrlNavPosition : true,
|
||||
// reached the review and submit step
|
||||
onReview : function() { return false; }
|
||||
};
|
||||
|
||||
/**
|
||||
* init function
|
||||
* initialize and cache some vars
|
||||
*/
|
||||
FForm.prototype._init = function() {
|
||||
// the form element
|
||||
this.formEl = this.el.querySelector( 'form' );
|
||||
|
||||
// list of fields
|
||||
this.fieldsList = this.formEl.querySelector( 'ol.fs-fields' );
|
||||
|
||||
// current field position
|
||||
this.current = 0;
|
||||
|
||||
// all fields
|
||||
this.fields = [].slice.call( this.fieldsList.children );
|
||||
|
||||
// total fields
|
||||
this.fieldsCount = this.fields.length;
|
||||
|
||||
// show first field
|
||||
classie.add( this.fields[ this.current ], 'fs-current' );
|
||||
|
||||
// create/add controls
|
||||
this._addControls();
|
||||
|
||||
// create/add messages
|
||||
this._addErrorMsg();
|
||||
|
||||
// init events
|
||||
this._initEvents();
|
||||
};
|
||||
|
||||
/**
|
||||
* addControls function
|
||||
* create and insert the structure for the controls
|
||||
*/
|
||||
FForm.prototype._addControls = function() {
|
||||
// main controls wrapper
|
||||
this.ctrls = createElement( 'div', { cName : 'fs-controls', appendTo : this.el } );
|
||||
|
||||
// continue button (jump to next field)
|
||||
this.ctrlContinue = createElement( 'button', { cName : 'fs-continue', inner : 'Continue', appendTo : this.ctrls } );
|
||||
this._showCtrl( this.ctrlContinue );
|
||||
|
||||
// navigation dots
|
||||
if( this.options.ctrlNavDots ) {
|
||||
this.ctrlNav = createElement( 'nav', { cName : 'fs-nav-dots', appendTo : this.ctrls } );
|
||||
var dots = '';
|
||||
for( var i = 0; i < this.fieldsCount; ++i ) {
|
||||
dots += i === this.current ? '<button class="fs-dot-current"></button>' : '<button disabled></button>';
|
||||
}
|
||||
this.ctrlNav.innerHTML = dots;
|
||||
this._showCtrl( this.ctrlNav );
|
||||
this.ctrlNavDots = [].slice.call( this.ctrlNav.children );
|
||||
}
|
||||
|
||||
// field number status
|
||||
if( this.options.ctrlNavPosition ) {
|
||||
this.ctrlFldStatus = createElement( 'span', { cName : 'fs-numbers', appendTo : this.ctrls } );
|
||||
|
||||
// current field placeholder
|
||||
this.ctrlFldStatusCurr = createElement( 'span', { cName : 'fs-number-current', inner : Number( this.current + 1 ) } );
|
||||
this.ctrlFldStatus.appendChild( this.ctrlFldStatusCurr );
|
||||
|
||||
// total fields placeholder
|
||||
this.ctrlFldStatusTotal = createElement( 'span', { cName : 'fs-number-total', inner : this.fieldsCount } );
|
||||
this.ctrlFldStatus.appendChild( this.ctrlFldStatusTotal );
|
||||
this._showCtrl( this.ctrlFldStatus );
|
||||
}
|
||||
|
||||
// progress bar
|
||||
if( this.options.ctrlProgress ) {
|
||||
this.ctrlProgress = createElement( 'div', { cName : 'fs-progress', appendTo : this.ctrls } );
|
||||
this._showCtrl( this.ctrlProgress );
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* addErrorMsg function
|
||||
* create and insert the structure for the error message
|
||||
*/
|
||||
FForm.prototype._addErrorMsg = function() {
|
||||
// error message
|
||||
this.msgError = createElement( 'span', { cName : 'fs-message-error', appendTo : this.el } );
|
||||
}
|
||||
|
||||
/**
|
||||
* init events
|
||||
*/
|
||||
FForm.prototype._initEvents = function() {
|
||||
var self = this;
|
||||
|
||||
// show next field
|
||||
this.ctrlContinue.addEventListener( 'click', function() {
|
||||
var flodata = document.getElementById('q1');
|
||||
var result = parse_flodata(flodata.value);
|
||||
console.log(result);
|
||||
self._nextField(undefined,result);
|
||||
} );
|
||||
|
||||
// navigation dots
|
||||
if( this.options.ctrlNavDots ) {
|
||||
this.ctrlNavDots.forEach( function( dot, pos ) {
|
||||
dot.addEventListener( 'click', function() {
|
||||
self._showField( pos );
|
||||
} );
|
||||
} );
|
||||
}
|
||||
|
||||
// jump to next field without clicking the continue button (for fields/list items with the attribute "data-input-trigger")
|
||||
this.fields.forEach( function( fld ) {
|
||||
if( fld.hasAttribute( 'data-input-trigger' ) ) {
|
||||
var input = fld.querySelector( 'input[type="radio"]' ) || /*fld.querySelector( '.cs-select' ) ||*/ fld.querySelector( 'select' ); // assuming only radio and select elements (TODO: exclude multiple selects)
|
||||
if( !input ) return;
|
||||
|
||||
switch( input.tagName.toLowerCase() ) {
|
||||
case 'select' :
|
||||
input.addEventListener( 'change', function() { self._nextField(); } );
|
||||
break;
|
||||
|
||||
case 'input' :
|
||||
[].slice.call( fld.querySelectorAll( 'input[type="radio"]' ) ).forEach( function( inp ) {
|
||||
inp.addEventListener( 'change', function(ev) { self._nextField(); } );
|
||||
} );
|
||||
break;
|
||||
|
||||
/*
|
||||
// for our custom select we would do something like:
|
||||
case 'div' :
|
||||
[].slice.call( fld.querySelectorAll( 'ul > li' ) ).forEach( function( inp ) {
|
||||
inp.addEventListener( 'click', function(ev) { self._nextField(); } );
|
||||
} );
|
||||
break;
|
||||
*/
|
||||
}
|
||||
}
|
||||
} );
|
||||
|
||||
// keyboard navigation events - jump to next field when pressing enter
|
||||
document.addEventListener( 'keydown', function( ev ) {
|
||||
if( !self.isLastStep && ev.target.tagName.toLowerCase() !== 'textarea' ) {
|
||||
var keyCode = ev.keyCode || ev.which;
|
||||
if( keyCode === 13 ) {
|
||||
ev.preventDefault();
|
||||
var flodata = document.getElementById('q1');
|
||||
var result = parse_flodata(flodata.value);
|
||||
console.log(result);
|
||||
self._nextField(undefined,result);
|
||||
}
|
||||
}
|
||||
} );
|
||||
};
|
||||
|
||||
/**
|
||||
* nextField function
|
||||
* jumps to the next field
|
||||
*/
|
||||
FForm.prototype._nextField = function( backto, result ) {
|
||||
if( this.isLastStep || !this._validade() || this.isAnimating ) {
|
||||
return false;
|
||||
}
|
||||
this.isAnimating = true;
|
||||
|
||||
// check if on last step
|
||||
this.isLastStep = this.current === this.fieldsCount - 1 && backto === undefined ? true : false;
|
||||
|
||||
// clear any previous error messages
|
||||
this._clearError();
|
||||
|
||||
// current field
|
||||
var currentFld = this.fields[ this.current ];
|
||||
|
||||
// save the navigation direction
|
||||
this.navdir = backto !== undefined ? backto < this.current ? 'prev' : 'next' : 'next';
|
||||
|
||||
// update current field
|
||||
this.current = backto !== undefined ? backto : this.current + 1;
|
||||
|
||||
if( backto === undefined ) {
|
||||
// update progress bar (unless we navigate backwards)
|
||||
this._progress();
|
||||
|
||||
// save farthest position so far
|
||||
this.farthest = this.current;
|
||||
}
|
||||
|
||||
// add class "fs-display-next" or "fs-display-prev" to the list of fields
|
||||
classie.add( this.fieldsList, 'fs-display-' + this.navdir );
|
||||
|
||||
// remove class "fs-current" from current field and add it to the next one
|
||||
// also add class "fs-show" to the next field and the class "fs-hide" to the current one
|
||||
classie.remove( currentFld, 'fs-current' );
|
||||
classie.add( currentFld, 'fs-hide' );
|
||||
|
||||
if( !this.isLastStep ) {
|
||||
// update nav
|
||||
this._updateNav();
|
||||
|
||||
// change the current field number/status
|
||||
this._updateFieldNumber();
|
||||
|
||||
var nextField = this.fields[ this.current ];
|
||||
classie.add( nextField, 'fs-current' );
|
||||
classie.add( nextField, 'fs-show' );
|
||||
}
|
||||
|
||||
// after animation ends remove added classes from fields
|
||||
var self = this,
|
||||
onEndAnimationFn = function( ev ) {
|
||||
if( support.animations ) {
|
||||
this.removeEventListener( animEndEventName, onEndAnimationFn );
|
||||
}
|
||||
|
||||
classie.remove( self.fieldsList, 'fs-display-' + self.navdir );
|
||||
classie.remove( currentFld, 'fs-hide' );
|
||||
|
||||
if( self.isLastStep ) {
|
||||
// show the complete form and hide the controls
|
||||
self._hideCtrl( self.ctrlNav );
|
||||
self._hideCtrl( self.ctrlProgress );
|
||||
self._hideCtrl( self.ctrlContinue );
|
||||
self._hideCtrl( self.ctrlFldStatus );
|
||||
// replace class fs-form-full with fs-form-overview
|
||||
classie.remove( self.formEl, 'fs-form-full' );
|
||||
classie.add( self.formEl, 'fs-form-overview' );
|
||||
classie.add( self.formEl, 'fs-show' );
|
||||
classie.add( self.formEl, 'hideElement' );
|
||||
|
||||
// Result display page
|
||||
var div = document.createElement("div");
|
||||
div.setAttribute("id", "resultPage");
|
||||
div.setAttribute("class", "fs-form fs-form-overview fs-show");
|
||||
|
||||
var ol = document.createElement('ol');
|
||||
ol.setAttribute("class","fs-fields");
|
||||
|
||||
if (result['type'] == 'transfer'){
|
||||
var fieldnames = [{'FLO data':result['flodata']},{'Type':'Transfer'},{'Identification':result['marker']},{'Amount':result['amount']}]
|
||||
}else if (result['type'] == 'incorporation'){
|
||||
var fieldnames = [{'FLO data':result['flodata']},{'Type':'Incorporation'},{'Identification':result['marker']},{'Amount':result['initTokens']}]
|
||||
}else{
|
||||
var fieldnames = [{'FLO data':result['flodata']},{'Type':'Noise'}]
|
||||
}
|
||||
|
||||
for (var i=0; i<fieldnames.length; i++){
|
||||
var item= document.createElement('li');
|
||||
var label = document.createElement('label');
|
||||
label.setAttribute('class','fs-field-label fs-anim-upper');
|
||||
label.setAttribute('for','q'+ i.toString());
|
||||
label.innerHTML = Object.keys(fieldnames[i])[0]
|
||||
var input = document.createElement('input');
|
||||
input.setAttribute('class','fs-anim-lower');
|
||||
input.setAttribute("id",'q'+ i.toString());
|
||||
input.setAttribute("name",'q'+ i.toString());
|
||||
input.setAttribute("type","text");
|
||||
input.setAttribute("value",fieldnames[i][label.innerHTML]);
|
||||
item.appendChild(label);
|
||||
item.appendChild(input);
|
||||
ol.appendChild(item);
|
||||
}
|
||||
|
||||
var returnButton = document.createElement('button');
|
||||
returnButton.setAttribute('class','fs-submit');
|
||||
returnButton.setAttribute('type','submit');
|
||||
returnButton.innerHTML = 'Go Back';
|
||||
returnButton.onclick = function () {
|
||||
location.href = "index.html";
|
||||
};
|
||||
|
||||
div.appendChild(ol);
|
||||
div.appendChild(returnButton);
|
||||
var formElement = document.getElementById('myform');
|
||||
formElement.insertAdjacentElement('afterend', div);
|
||||
|
||||
// callback
|
||||
self.options.onReview();
|
||||
}
|
||||
else {
|
||||
classie.remove( nextField, 'fs-show' );
|
||||
|
||||
if( self.options.ctrlNavPosition ) {
|
||||
self.ctrlFldStatusCurr.innerHTML = self.ctrlFldStatusNew.innerHTML;
|
||||
self.ctrlFldStatus.removeChild( self.ctrlFldStatusNew );
|
||||
classie.remove( self.ctrlFldStatus, 'fs-show-' + self.navdir );
|
||||
}
|
||||
}
|
||||
self.isAnimating = false;
|
||||
};
|
||||
|
||||
if( support.animations ) {
|
||||
if( this.navdir === 'next' ) {
|
||||
if( this.isLastStep ) {
|
||||
currentFld.querySelector( '.fs-anim-upper' ).addEventListener( animEndEventName, onEndAnimationFn );
|
||||
}
|
||||
else {
|
||||
nextField.querySelector( '.fs-anim-lower' ).addEventListener( animEndEventName, onEndAnimationFn );
|
||||
}
|
||||
}
|
||||
else {
|
||||
nextField.querySelector( '.fs-anim-upper' ).addEventListener( animEndEventName, onEndAnimationFn );
|
||||
}
|
||||
}
|
||||
else {
|
||||
onEndAnimationFn();
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* showField function
|
||||
* jumps to the field at position pos
|
||||
*/
|
||||
FForm.prototype._showField = function( pos ) {
|
||||
if( pos === this.current || pos < 0 || pos > this.fieldsCount - 1 ) {
|
||||
return false;
|
||||
}
|
||||
this._nextField( pos );
|
||||
}
|
||||
|
||||
/**
|
||||
* updateFieldNumber function
|
||||
* changes the current field number
|
||||
*/
|
||||
FForm.prototype._updateFieldNumber = function() {
|
||||
if( this.options.ctrlNavPosition ) {
|
||||
// first, create next field number placeholder
|
||||
this.ctrlFldStatusNew = document.createElement( 'span' );
|
||||
this.ctrlFldStatusNew.className = 'fs-number-new';
|
||||
this.ctrlFldStatusNew.innerHTML = Number( this.current + 1 );
|
||||
|
||||
// insert it in the DOM
|
||||
this.ctrlFldStatus.appendChild( this.ctrlFldStatusNew );
|
||||
|
||||
// add class "fs-show-next" or "fs-show-prev" depending on the navigation direction
|
||||
var self = this;
|
||||
setTimeout( function() {
|
||||
classie.add( self.ctrlFldStatus, self.navdir === 'next' ? 'fs-show-next' : 'fs-show-prev' );
|
||||
}, 25 );
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* progress function
|
||||
* updates the progress bar by setting its width
|
||||
*/
|
||||
FForm.prototype._progress = function() {
|
||||
if( this.options.ctrlProgress ) {
|
||||
this.ctrlProgress.style.width = this.current * ( 100 / this.fieldsCount ) + '%';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* updateNav function
|
||||
* updates the navigation dots
|
||||
*/
|
||||
FForm.prototype._updateNav = function() {
|
||||
if( this.options.ctrlNavDots ) {
|
||||
classie.remove( this.ctrlNav.querySelector( 'button.fs-dot-current' ), 'fs-dot-current' );
|
||||
classie.add( this.ctrlNavDots[ this.current ], 'fs-dot-current' );
|
||||
this.ctrlNavDots[ this.current ].disabled = false;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* showCtrl function
|
||||
* shows a control
|
||||
*/
|
||||
FForm.prototype._showCtrl = function( ctrl ) {
|
||||
classie.add( ctrl, 'fs-show' );
|
||||
}
|
||||
|
||||
/**
|
||||
* hideCtrl function
|
||||
* hides a control
|
||||
*/
|
||||
FForm.prototype._hideCtrl = function( ctrl ) {
|
||||
classie.remove( ctrl, 'fs-show' );
|
||||
}
|
||||
|
||||
// TODO: this is a very basic validation function. Only checks for required fields..
|
||||
FForm.prototype._validade = function() {
|
||||
var fld = this.fields[ this.current ],
|
||||
input = fld.querySelector( 'input[required]' ) || fld.querySelector( 'textarea[required]' ) || fld.querySelector( 'select[required]' ),
|
||||
error;
|
||||
|
||||
if( !input ) return true;
|
||||
|
||||
switch( input.tagName.toLowerCase() ) {
|
||||
case 'input' :
|
||||
if( input.type === 'radio' || input.type === 'checkbox' ) {
|
||||
var checked = 0;
|
||||
[].slice.call( fld.querySelectorAll( 'input[type="' + input.type + '"]' ) ).forEach( function( inp ) {
|
||||
if( inp.checked ) {
|
||||
++checked;
|
||||
}
|
||||
} );
|
||||
if( !checked ) {
|
||||
error = 'NOVAL';
|
||||
}
|
||||
}
|
||||
else if( input.value === '' ) {
|
||||
error = 'NOVAL';
|
||||
}
|
||||
break;
|
||||
|
||||
case 'select' :
|
||||
// assuming here '' or '-1' only
|
||||
if( input.value === '' || input.value === '-1' ) {
|
||||
error = 'NOVAL';
|
||||
}
|
||||
break;
|
||||
|
||||
case 'textarea' :
|
||||
if( input.value === '' ) {
|
||||
error = 'NOVAL';
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
if( error != undefined ) {
|
||||
this._showError( error );
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
// TODO
|
||||
FForm.prototype._showError = function( err ) {
|
||||
var message = '';
|
||||
switch( err ) {
|
||||
case 'NOVAL' :
|
||||
message = 'Please fill the field before continuing';
|
||||
break;
|
||||
case 'INVALIDEMAIL' :
|
||||
message = 'Please fill a valid email address';
|
||||
break;
|
||||
// ...
|
||||
};
|
||||
this.msgError.innerHTML = message;
|
||||
this._showCtrl( this.msgError );
|
||||
}
|
||||
|
||||
// clears/hides the current error message
|
||||
FForm.prototype._clearError = function() {
|
||||
this._hideCtrl( this.msgError );
|
||||
}
|
||||
|
||||
// add to global namespace
|
||||
window.FForm = FForm;
|
||||
|
||||
|
||||
})( window );
|
||||
257
js/modernizr.custom.js
Normal file
257
js/modernizr.custom.js
Normal file
@ -0,0 +1,257 @@
|
||||
/* Modernizr 2.8.3 (Custom Build) | MIT & BSD
|
||||
* Build: http://modernizr.com/download/#-cssanimations-shiv-cssclasses-prefixed-teststyles-testprop-testallprops-prefixes-domprefixes-css_calc-css_vhunit-load
|
||||
*/
|
||||
;
|
||||
window.Modernizr = function(a, b, c) {
|
||||
function z(a) { j.cssText = a }
|
||||
|
||||
function A(a, b) { return z(m.join(a + ";") + (b || "")) }
|
||||
|
||||
function B(a, b) { return typeof a === b }
|
||||
|
||||
function C(a, b) { return !!~("" + a).indexOf(b) }
|
||||
|
||||
function D(a, b) { for (var d in a) { var e = a[d]; if (!C(e, "-") && j[e] !== c) return b == "pfx" ? e : !0 } return !1 }
|
||||
|
||||
function E(a, b, d) { for (var e in a) { var f = b[a[e]]; if (f !== c) return d === !1 ? a[e] : B(f, "function") ? f.bind(d || b) : f } return !1 }
|
||||
|
||||
function F(a, b, c) {
|
||||
var d = a.charAt(0).toUpperCase() + a.slice(1),
|
||||
e = (a + " " + o.join(d + " ") + d).split(" ");
|
||||
return B(b, "string") || B(b, "undefined") ? D(e, b) : (e = (a + " " + p.join(d + " ") + d).split(" "), E(e, b, c))
|
||||
}
|
||||
var d = "2.8.3",
|
||||
e = {},
|
||||
f = !0,
|
||||
g = b.documentElement,
|
||||
h = "modernizr",
|
||||
i = b.createElement(h),
|
||||
j = i.style,
|
||||
k, l = {}.toString,
|
||||
m = " -webkit- -moz- -o- -ms- ".split(" "),
|
||||
n = "Webkit Moz O ms",
|
||||
o = n.split(" "),
|
||||
p = n.toLowerCase().split(" "),
|
||||
q = {},
|
||||
r = {},
|
||||
s = {},
|
||||
t = [],
|
||||
u = t.slice,
|
||||
v, w = function(a, c, d, e) {
|
||||
var f, i, j, k, l = b.createElement("div"),
|
||||
m = b.body,
|
||||
n = m || b.createElement("body");
|
||||
if (parseInt(d, 10))
|
||||
while (d--) j = b.createElement("div"), j.id = e ? e[d] : h + (d + 1), l.appendChild(j);
|
||||
return f = ["­", '<style id="s', h, '">', a, "</style>"].join(""), l.id = h, (m ? l : n).innerHTML += f, n.appendChild(l), m || (n.style.background = "", n.style.overflow = "hidden", k = g.style.overflow, g.style.overflow = "hidden", g.appendChild(n)), i = c(l, a), m ? l.parentNode.removeChild(l) : (n.parentNode.removeChild(n), g.style.overflow = k), !!i
|
||||
},
|
||||
x = {}.hasOwnProperty,
|
||||
y;
|
||||
!B(x, "undefined") && !B(x.call, "undefined") ? y = function(a, b) { return x.call(a, b) } : y = function(a, b) { return b in a && B(a.constructor.prototype[b], "undefined") }, Function.prototype.bind || (Function.prototype.bind = function(b) {
|
||||
var c = this;
|
||||
if (typeof c != "function") throw new TypeError;
|
||||
var d = u.call(arguments, 1),
|
||||
e = function() {
|
||||
if (this instanceof e) {
|
||||
var a = function() {};
|
||||
a.prototype = c.prototype;
|
||||
var f = new a,
|
||||
g = c.apply(f, d.concat(u.call(arguments)));
|
||||
return Object(g) === g ? g : f
|
||||
}
|
||||
return c.apply(b, d.concat(u.call(arguments)))
|
||||
};
|
||||
return e
|
||||
}), q.cssanimations = function() { return F("animationName") };
|
||||
for (var G in q) y(q, G) && (v = G.toLowerCase(), e[v] = q[G](), t.push((e[v] ? "" : "no-") + v));
|
||||
return e.addTest = function(a, b) {
|
||||
if (typeof a == "object")
|
||||
for (var d in a) y(a, d) && e.addTest(d, a[d]);
|
||||
else {
|
||||
a = a.toLowerCase();
|
||||
if (e[a] !== c) return e;
|
||||
b = typeof b == "function" ? b() : b, typeof f != "undefined" && f && (g.className += " " + (b ? "" : "no-") + a), e[a] = b
|
||||
}
|
||||
return e
|
||||
}, z(""), i = k = null,
|
||||
function(a, b) {
|
||||
function l(a, b) {
|
||||
var c = a.createElement("p"),
|
||||
d = a.getElementsByTagName("head")[0] || a.documentElement;
|
||||
return c.innerHTML = "x<style>" + b + "</style>", d.insertBefore(c.lastChild, d.firstChild)
|
||||
}
|
||||
|
||||
function m() { var a = s.elements; return typeof a == "string" ? a.split(" ") : a }
|
||||
|
||||
function n(a) { var b = j[a[h]]; return b || (b = {}, i++, a[h] = i, j[i] = b), b }
|
||||
|
||||
function o(a, c, d) {
|
||||
c || (c = b);
|
||||
if (k) return c.createElement(a);
|
||||
d || (d = n(c));
|
||||
var g;
|
||||
return d.cache[a] ? g = d.cache[a].cloneNode() : f.test(a) ? g = (d.cache[a] = d.createElem(a)).cloneNode() : g = d.createElem(a), g.canHaveChildren && !e.test(a) && !g.tagUrn ? d.frag.appendChild(g) : g
|
||||
}
|
||||
|
||||
function p(a, c) {
|
||||
a || (a = b);
|
||||
if (k) return a.createDocumentFragment();
|
||||
c = c || n(a);
|
||||
var d = c.frag.cloneNode(),
|
||||
e = 0,
|
||||
f = m(),
|
||||
g = f.length;
|
||||
for (; e < g; e++) d.createElement(f[e]);
|
||||
return d
|
||||
}
|
||||
|
||||
function q(a, b) { b.cache || (b.cache = {}, b.createElem = a.createElement, b.createFrag = a.createDocumentFragment, b.frag = b.createFrag()), a.createElement = function(c) { return s.shivMethods ? o(c, a, b) : b.createElem(c) }, a.createDocumentFragment = Function("h,f", "return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&(" + m().join().replace(/[\w\-]+/g, function(a) { return b.createElem(a), b.frag.createElement(a), 'c("' + a + '")' }) + ");return n}")(s, b.frag) }
|
||||
|
||||
function r(a) { a || (a = b); var c = n(a); return s.shivCSS && !g && !c.hasCSS && (c.hasCSS = !!l(a, "article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}mark{background:#FF0;color:#000}template{display:none}")), k || q(a, c), a }
|
||||
var c = "3.7.0",
|
||||
d = a.html5 || {},
|
||||
e = /^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,
|
||||
f = /^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,
|
||||
g, h = "_html5shiv",
|
||||
i = 0,
|
||||
j = {},
|
||||
k;
|
||||
(function() {
|
||||
try {
|
||||
var a = b.createElement("a");
|
||||
a.innerHTML = "<xyz></xyz>", g = "hidden" in a, k = a.childNodes.length == 1 || function() { b.createElement("a"); var a = b.createDocumentFragment(); return typeof a.cloneNode == "undefined" || typeof a.createDocumentFragment == "undefined" || typeof a.createElement == "undefined" }()
|
||||
} catch (c) { g = !0, k = !0 }
|
||||
})();
|
||||
var s = { elements: d.elements || "abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output progress section summary template time video", version: c, shivCSS: d.shivCSS !== !1, supportsUnknownElements: k, shivMethods: d.shivMethods !== !1, type: "default", shivDocument: r, createElement: o, createDocumentFragment: p };
|
||||
a.html5 = s, r(b)
|
||||
}(this, b), e._version = d, e._prefixes = m, e._domPrefixes = p, e._cssomPrefixes = o, e.testProp = function(a) { return D([a]) }, e.testAllProps = F, e.testStyles = w, e.prefixed = function(a, b, c) { return b ? F(a, b, c) : F(a, "pfx") }, g.className = g.className.replace(/(^|\s)no-js(\s|$)/, "$1$2") + (f ? " js " + t.join(" ") : ""), e
|
||||
}(this, this.document),
|
||||
function(a, b, c) {
|
||||
function d(a) { return "[object Function]" == o.call(a) }
|
||||
|
||||
function e(a) { return "string" == typeof a }
|
||||
|
||||
function f() {}
|
||||
|
||||
function g(a) { return !a || "loaded" == a || "complete" == a || "uninitialized" == a }
|
||||
|
||||
function h() {
|
||||
var a = p.shift();
|
||||
q = 1, a ? a.t ? m(function() {
|
||||
("c" == a.t ? B.injectCss : B.injectJs)(a.s, 0, a.a, a.x, a.e, 1)
|
||||
}, 0) : (a(), h()) : q = 0
|
||||
}
|
||||
|
||||
function i(a, c, d, e, f, i, j) {
|
||||
function k(b) { if (!o && g(l.readyState) && (u.r = o = 1, !q && h(), l.onload = l.onreadystatechange = null, b)) { "img" != a && m(function() { t.removeChild(l) }, 50); for (var d in y[c]) y[c].hasOwnProperty(d) && y[c][d].onload() } }
|
||||
var j = j || B.errorTimeout,
|
||||
l = b.createElement(a),
|
||||
o = 0,
|
||||
r = 0,
|
||||
u = { t: d, s: c, e: f, a: i, x: j };
|
||||
1 === y[c] && (r = 1, y[c] = []), "object" == a ? l.data = c : (l.src = c, l.type = a), l.width = l.height = "0", l.onerror = l.onload = l.onreadystatechange = function() { k.call(this, r) }, p.splice(e, 0, u), "img" != a && (r || 2 === y[c] ? (t.insertBefore(l, s ? null : n), m(k, j)) : y[c].push(l))
|
||||
}
|
||||
|
||||
function j(a, b, c, d, f) { return q = 0, b = b || "j", e(a) ? i("c" == b ? v : u, a, b, this.i++, c, d, f) : (p.splice(this.i++, 0, a), 1 == p.length && h()), this }
|
||||
|
||||
function k() { var a = B; return a.loader = { load: j, i: 0 }, a }
|
||||
var l = b.documentElement,
|
||||
m = a.setTimeout,
|
||||
n = b.getElementsByTagName("script")[0],
|
||||
o = {}.toString,
|
||||
p = [],
|
||||
q = 0,
|
||||
r = "MozAppearance" in l.style,
|
||||
s = r && !!b.createRange().compareNode,
|
||||
t = s ? l : n.parentNode,
|
||||
l = a.opera && "[object Opera]" == o.call(a.opera),
|
||||
l = !!b.attachEvent && !l,
|
||||
u = r ? "object" : l ? "script" : "img",
|
||||
v = l ? "script" : u,
|
||||
w = Array.isArray || function(a) { return "[object Array]" == o.call(a) },
|
||||
x = [],
|
||||
y = {},
|
||||
z = { timeout: function(a, b) { return b.length && (a.timeout = b[0]), a } },
|
||||
A, B;
|
||||
B = function(a) {
|
||||
function b(a) {
|
||||
var a = a.split("!"),
|
||||
b = x.length,
|
||||
c = a.pop(),
|
||||
d = a.length,
|
||||
c = { url: c, origUrl: c, prefixes: a },
|
||||
e, f, g;
|
||||
for (f = 0; f < d; f++) g = a[f].split("="), (e = z[g.shift()]) && (c = e(c, g));
|
||||
for (f = 0; f < b; f++) c = x[f](c);
|
||||
return c
|
||||
}
|
||||
|
||||
function g(a, e, f, g, h) {
|
||||
var i = b(a),
|
||||
j = i.autoCallback;
|
||||
i.url.split(".").pop().split("?").shift(), i.bypass || (e && (e = d(e) ? e : e[a] || e[g] || e[a.split("/").pop().split("?")[0]]), i.instead ? i.instead(a, e, f, g, h) : (y[i.url] ? i.noexec = !0 : y[i.url] = 1, f.load(i.url, i.forceCSS || !i.forceJS && "css" == i.url.split(".").pop().split("?").shift() ? "c" : c, i.noexec, i.attrs, i.timeout), (d(e) || d(j)) && f.load(function() { k(), e && e(i.origUrl, h, g), j && j(i.origUrl, h, g), y[i.url] = 2 })))
|
||||
}
|
||||
|
||||
function h(a, b) {
|
||||
function c(a, c) {
|
||||
if (a) {
|
||||
if (e(a)) c || (j = function() {
|
||||
var a = [].slice.call(arguments);
|
||||
k.apply(this, a), l()
|
||||
}), g(a, j, b, 0, h);
|
||||
else if (Object(a) === a)
|
||||
for (n in m = function() {
|
||||
var b = 0,
|
||||
c;
|
||||
for (c in a) a.hasOwnProperty(c) && b++;
|
||||
return b
|
||||
}(), a) a.hasOwnProperty(n) && (!c && !--m && (d(j) ? j = function() {
|
||||
var a = [].slice.call(arguments);
|
||||
k.apply(this, a), l()
|
||||
} : j[n] = function(a) {
|
||||
return function() {
|
||||
var b = [].slice.call(arguments);
|
||||
a && a.apply(this, b), l()
|
||||
}
|
||||
}(k[n])), g(a[n], j, b, n, h))
|
||||
} else !c && l()
|
||||
}
|
||||
var h = !!a.test,
|
||||
i = a.load || a.both,
|
||||
j = a.callback || f,
|
||||
k = j,
|
||||
l = a.complete || f,
|
||||
m, n;
|
||||
c(h ? a.yep : a.nope, !!i), i && c(i)
|
||||
}
|
||||
var i, j, l = this.yepnope.loader;
|
||||
if (e(a)) g(a, 0, l, 0);
|
||||
else if (w(a))
|
||||
for (i = 0; i < a.length; i++) j = a[i], e(j) ? g(j, 0, l, 0) : w(j) ? B(j) : Object(j) === j && h(j, l);
|
||||
else Object(a) === a && h(a, l)
|
||||
}, B.addPrefix = function(a, b) { z[a] = b }, B.addFilter = function(a) { x.push(a) }, B.errorTimeout = 1e4, null == b.readyState && b.addEventListener && (b.readyState = "loading", b.addEventListener("DOMContentLoaded", A = function() { b.removeEventListener("DOMContentLoaded", A, 0), b.readyState = "complete" }, 0)), a.yepnope = k(), a.yepnope.executeStack = h, a.yepnope.injectJs = function(a, c, d, e, i, j) {
|
||||
var k = b.createElement("script"),
|
||||
l, o, e = e || B.errorTimeout;
|
||||
k.src = a;
|
||||
for (o in d) k.setAttribute(o, d[o]);
|
||||
c = j ? h : c || f, k.onreadystatechange = k.onload = function() {!l && g(k.readyState) && (l = 1, c(), k.onload = k.onreadystatechange = null) }, m(function() { l || (l = 1, c(1)) }, e), i ? k.onload() : n.parentNode.insertBefore(k, n)
|
||||
}, a.yepnope.injectCss = function(a, c, d, e, g, i) {
|
||||
var e = b.createElement("link"),
|
||||
j, c = i ? h : c || f;
|
||||
e.href = a, e.rel = "stylesheet", e.type = "text/css";
|
||||
for (j in d) e.setAttribute(j, d[j]);
|
||||
g || (n.parentNode.insertBefore(e, n), m(c, 0))
|
||||
}
|
||||
}(this, document), Modernizr.load = function() { yepnope.apply(window, [].slice.call(arguments, 0)) }, Modernizr.addTest("csscalc", function() {
|
||||
var a = "width:",
|
||||
b = "calc(10px);",
|
||||
c = document.createElement("div");
|
||||
return c.style.cssText = a + Modernizr._prefixes.join(b + a), !!c.style.length
|
||||
}), Modernizr.addTest("cssvhunit", function() {
|
||||
var a;
|
||||
return Modernizr.testStyles("#modernizr { height: 50vh; }", function(b, c) {
|
||||
var d = parseInt(window.innerHeight / 2, 10),
|
||||
e = parseInt((window.getComputedStyle ? getComputedStyle(b, null) : b.currentStyle).height, 10);
|
||||
a = e == d
|
||||
}), a
|
||||
});
|
||||
326
js/selectFx.js
Normal file
326
js/selectFx.js
Normal file
@ -0,0 +1,326 @@
|
||||
/**
|
||||
* selectFx.js v1.0.0
|
||||
* http://www.codrops.com
|
||||
*
|
||||
* Licensed under the MIT license.
|
||||
* http://www.opensource.org/licenses/mit-license.php
|
||||
*
|
||||
* Copyright 2014, Codrops
|
||||
* http://www.codrops.com
|
||||
*/
|
||||
;( function( window ) {
|
||||
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* based on from https://github.com/inuyaksa/jquery.nicescroll/blob/master/jquery.nicescroll.js
|
||||
*/
|
||||
function hasParent( e, p ) {
|
||||
if (!e) return false;
|
||||
var el = e.target||e.srcElement||e||false;
|
||||
while (el && el != p) {
|
||||
el = el.parentNode||false;
|
||||
}
|
||||
return (el!==false);
|
||||
};
|
||||
|
||||
/**
|
||||
* extend obj function
|
||||
*/
|
||||
function extend( a, b ) {
|
||||
for( var key in b ) {
|
||||
if( b.hasOwnProperty( key ) ) {
|
||||
a[key] = b[key];
|
||||
}
|
||||
}
|
||||
return a;
|
||||
}
|
||||
|
||||
/**
|
||||
* SelectFx function
|
||||
*/
|
||||
function SelectFx( el, options ) {
|
||||
this.el = el;
|
||||
this.options = extend( {}, this.options );
|
||||
extend( this.options, options );
|
||||
this._init();
|
||||
}
|
||||
|
||||
/**
|
||||
* SelectFx options
|
||||
*/
|
||||
SelectFx.prototype.options = {
|
||||
// if true all the links will open in a new tab.
|
||||
// if we want to be redirected when we click an option, we need to define a data-link attr on the option of the native select element
|
||||
newTab : true,
|
||||
// when opening the select element, the default placeholder (if any) is shown
|
||||
stickyPlaceholder : true,
|
||||
// callback when changing the value
|
||||
onChange : function( val ) { return false; }
|
||||
}
|
||||
|
||||
/**
|
||||
* init function
|
||||
* initialize and cache some vars
|
||||
*/
|
||||
SelectFx.prototype._init = function() {
|
||||
// check if we are using a placeholder for the native select box
|
||||
// we assume the placeholder is disabled and selected by default
|
||||
var selectedOpt = this.el.querySelector( 'option[selected]' );
|
||||
this.hasDefaultPlaceholder = selectedOpt && selectedOpt.disabled;
|
||||
|
||||
// get selected option (either the first option with attr selected or just the first option)
|
||||
this.selectedOpt = selectedOpt || this.el.querySelector( 'option' );
|
||||
|
||||
// create structure
|
||||
this._createSelectEl();
|
||||
|
||||
// all options
|
||||
this.selOpts = [].slice.call( this.selEl.querySelectorAll( 'li[data-option]' ) );
|
||||
|
||||
// total options
|
||||
this.selOptsCount = this.selOpts.length;
|
||||
|
||||
// current index
|
||||
this.current = this.selOpts.indexOf( this.selEl.querySelector( 'li.cs-selected' ) ) || -1;
|
||||
|
||||
// placeholder elem
|
||||
this.selPlaceholder = this.selEl.querySelector( 'span.cs-placeholder' );
|
||||
|
||||
// init events
|
||||
this._initEvents();
|
||||
}
|
||||
|
||||
/**
|
||||
* creates the structure for the select element
|
||||
*/
|
||||
SelectFx.prototype._createSelectEl = function() {
|
||||
var self = this, options = '', createOptionHTML = function(el) {
|
||||
var optclass = '', classes = '', link = '';
|
||||
|
||||
if( el.selectedOpt && !this.foundSelected && !this.hasDefaultPlaceholder ) {
|
||||
classes += 'cs-selected ';
|
||||
this.foundSelected = true;
|
||||
}
|
||||
// extra classes
|
||||
if( el.getAttribute( 'data-class' ) ) {
|
||||
classes += el.getAttribute( 'data-class' );
|
||||
}
|
||||
// link options
|
||||
if( el.getAttribute( 'data-link' ) ) {
|
||||
link = 'data-link=' + el.getAttribute( 'data-link' );
|
||||
}
|
||||
|
||||
if( classes !== '' ) {
|
||||
optclass = 'class="' + classes + '" ';
|
||||
}
|
||||
|
||||
return '<li ' + optclass + link + ' data-option data-value="' + el.value + '"><span>' + el.textContent + '</span></li>';
|
||||
};
|
||||
|
||||
[].slice.call( this.el.children ).forEach( function(el) {
|
||||
if( el.disabled ) { return; }
|
||||
|
||||
var tag = el.tagName.toLowerCase();
|
||||
|
||||
if( tag === 'option' ) {
|
||||
options += createOptionHTML(el);
|
||||
}
|
||||
else if( tag === 'optgroup' ) {
|
||||
options += '<li class="cs-optgroup"><span>' + el.label + '</span><ul>';
|
||||
[].slice.call( el.children ).forEach( function(opt) {
|
||||
options += createOptionHTML(opt);
|
||||
} )
|
||||
options += '</ul></li>';
|
||||
}
|
||||
} );
|
||||
|
||||
var opts_el = '<div class="cs-options"><ul>' + options + '</ul></div>';
|
||||
this.selEl = document.createElement( 'div' );
|
||||
this.selEl.className = this.el.className;
|
||||
this.selEl.tabIndex = this.el.tabIndex;
|
||||
this.selEl.innerHTML = '<span class="cs-placeholder">' + this.selectedOpt.textContent + '</span>' + opts_el;
|
||||
this.el.parentNode.appendChild( this.selEl );
|
||||
this.selEl.appendChild( this.el );
|
||||
}
|
||||
|
||||
/**
|
||||
* initialize the events
|
||||
*/
|
||||
SelectFx.prototype._initEvents = function() {
|
||||
var self = this;
|
||||
|
||||
// open/close select
|
||||
this.selPlaceholder.addEventListener( 'click', function() {
|
||||
self._toggleSelect();
|
||||
} );
|
||||
|
||||
// clicking the options
|
||||
this.selOpts.forEach( function(opt, idx) {
|
||||
opt.addEventListener( 'click', function() {
|
||||
self.current = idx;
|
||||
self._changeOption();
|
||||
// close select elem
|
||||
self._toggleSelect();
|
||||
} );
|
||||
} );
|
||||
|
||||
// close the select element if the target it´s not the select element or one of its descendants..
|
||||
document.addEventListener( 'click', function(ev) {
|
||||
var target = ev.target;
|
||||
if( self._isOpen() && target !== self.selEl && !hasParent( target, self.selEl ) ) {
|
||||
self._toggleSelect();
|
||||
}
|
||||
} );
|
||||
|
||||
// keyboard navigation events
|
||||
this.selEl.addEventListener( 'keydown', function( ev ) {
|
||||
var keyCode = ev.keyCode || ev.which;
|
||||
|
||||
switch (keyCode) {
|
||||
// up key
|
||||
case 38:
|
||||
ev.preventDefault();
|
||||
self._navigateOpts('prev');
|
||||
break;
|
||||
// down key
|
||||
case 40:
|
||||
ev.preventDefault();
|
||||
self._navigateOpts('next');
|
||||
break;
|
||||
// space key
|
||||
case 32:
|
||||
ev.preventDefault();
|
||||
if( self._isOpen() && typeof self.preSelCurrent != 'undefined' && self.preSelCurrent !== -1 ) {
|
||||
self._changeOption();
|
||||
}
|
||||
self._toggleSelect();
|
||||
break;
|
||||
// enter key
|
||||
case 13:
|
||||
ev.stopPropagation();
|
||||
ev.preventDefault();
|
||||
if( self._isOpen() && typeof self.preSelCurrent != 'undefined' && self.preSelCurrent !== -1 ) {
|
||||
self._changeOption();
|
||||
self._toggleSelect();
|
||||
}
|
||||
break;
|
||||
// esc key
|
||||
case 27:
|
||||
ev.preventDefault();
|
||||
if( self._isOpen() ) {
|
||||
self._toggleSelect();
|
||||
}
|
||||
break;
|
||||
}
|
||||
} );
|
||||
}
|
||||
|
||||
/**
|
||||
* navigate with up/dpwn keys
|
||||
*/
|
||||
SelectFx.prototype._navigateOpts = function(dir) {
|
||||
if( !this._isOpen() ) {
|
||||
this._toggleSelect();
|
||||
}
|
||||
|
||||
var tmpcurrent = typeof this.preSelCurrent != 'undefined' && this.preSelCurrent !== -1 ? this.preSelCurrent : this.current;
|
||||
|
||||
if( dir === 'prev' && tmpcurrent > 0 || dir === 'next' && tmpcurrent < this.selOptsCount - 1 ) {
|
||||
// save pre selected current - if we click on option, or press enter, or press space this is going to be the index of the current option
|
||||
this.preSelCurrent = dir === 'next' ? tmpcurrent + 1 : tmpcurrent - 1;
|
||||
// remove focus class if any..
|
||||
this._removeFocus();
|
||||
// add class focus - track which option we are navigating
|
||||
classie.add( this.selOpts[this.preSelCurrent], 'cs-focus' );
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* open/close select
|
||||
* when opened show the default placeholder if any
|
||||
*/
|
||||
SelectFx.prototype._toggleSelect = function() {
|
||||
// remove focus class if any..
|
||||
this._removeFocus();
|
||||
|
||||
if( this._isOpen() ) {
|
||||
if( this.current !== -1 ) {
|
||||
// update placeholder text
|
||||
this.selPlaceholder.textContent = this.selOpts[ this.current ].textContent;
|
||||
}
|
||||
classie.remove( this.selEl, 'cs-active' );
|
||||
}
|
||||
else {
|
||||
if( this.hasDefaultPlaceholder && this.options.stickyPlaceholder ) {
|
||||
// everytime we open we wanna see the default placeholder text
|
||||
this.selPlaceholder.textContent = this.selectedOpt.textContent;
|
||||
}
|
||||
classie.add( this.selEl, 'cs-active' );
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* change option - the new value is set
|
||||
*/
|
||||
SelectFx.prototype._changeOption = function() {
|
||||
// if pre selected current (if we navigate with the keyboard)...
|
||||
if( typeof this.preSelCurrent != 'undefined' && this.preSelCurrent !== -1 ) {
|
||||
this.current = this.preSelCurrent;
|
||||
this.preSelCurrent = -1;
|
||||
}
|
||||
|
||||
// current option
|
||||
var opt = this.selOpts[ this.current ];
|
||||
|
||||
// update current selected value
|
||||
this.selPlaceholder.textContent = opt.textContent;
|
||||
|
||||
// change native select element´s value
|
||||
this.el.value = opt.getAttribute( 'data-value' );
|
||||
|
||||
// remove class cs-selected from old selected option and add it to current selected option
|
||||
var oldOpt = this.selEl.querySelector( 'li.cs-selected' );
|
||||
if( oldOpt ) {
|
||||
classie.remove( oldOpt, 'cs-selected' );
|
||||
}
|
||||
classie.add( opt, 'cs-selected' );
|
||||
|
||||
// if there´s a link defined
|
||||
if( opt.getAttribute( 'data-link' ) ) {
|
||||
// open in new tab?
|
||||
if( this.options.newTab ) {
|
||||
window.open( opt.getAttribute( 'data-link' ), '_blank' );
|
||||
}
|
||||
else {
|
||||
window.location = opt.getAttribute( 'data-link' );
|
||||
}
|
||||
}
|
||||
|
||||
// callback
|
||||
this.options.onChange( this.el.value );
|
||||
}
|
||||
|
||||
/**
|
||||
* returns true if select element is opened
|
||||
*/
|
||||
SelectFx.prototype._isOpen = function(opt) {
|
||||
return classie.has( this.selEl, 'cs-active' );
|
||||
}
|
||||
|
||||
/**
|
||||
* removes the focus class from the option
|
||||
*/
|
||||
SelectFx.prototype._removeFocus = function(opt) {
|
||||
var focusEl = this.selEl.querySelector( 'li.cs-focus' )
|
||||
if( focusEl ) {
|
||||
classie.remove( focusEl, 'cs-focus' );
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* add to global namespace
|
||||
*/
|
||||
window.SelectFx = SelectFx;
|
||||
|
||||
} )( window );
|
||||
11
test-css-priority.html
Normal file
11
test-css-priority.html
Normal file
@ -0,0 +1,11 @@
|
||||
<html>
|
||||
<head>
|
||||
<title> Testing css priority </title>
|
||||
<link rel="stylesheet" type="text/css" href="css/testcss.css" />
|
||||
</head>
|
||||
<body>
|
||||
<p class="firstcss secondcss">
|
||||
From now on I am not going to be in denial of my feelings.
|
||||
</p>
|
||||
</body>
|
||||
</html>
|
||||
47
test-js.html
Normal file
47
test-js.html
Normal file
@ -0,0 +1,47 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="no-js">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Fullscreen Form Interface</title>
|
||||
<meta name="description" content="Fullscreen Form Interface: A distraction-free form concept with fancy animations" />
|
||||
<meta name="keywords" content="fullscreen form, css animations, distraction-free, web design" />
|
||||
<meta name="author" content="Codrops" />
|
||||
<link rel="shortcut icon" href="../favicon.ico">
|
||||
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
|
||||
<link rel="stylesheet" type="text/css" href="css/demo.css" />
|
||||
<link rel="stylesheet" type="text/css" href="css/component.css" />
|
||||
<link rel="stylesheet" type="text/css" href="css/cs-select.css" />
|
||||
<link rel="stylesheet" type="text/css" href="css/cs-skin-boxes.css" />
|
||||
<script src="js/modernizr.custom.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<script src="js/createResult.js"></script>
|
||||
<script src="js/classie.js"></script>
|
||||
<script src="js/classie.js"></script>
|
||||
<script src="js/selectFx.js"></script>
|
||||
<script src="js/fullscreenForm.js"></script>
|
||||
<script>
|
||||
(function() {
|
||||
var formWrap = document.getElementById( 'fs-form-wrap' );
|
||||
|
||||
[].slice.call( document.querySelectorAll( 'select.cs-select' ) ).forEach( function(el) {
|
||||
new SelectFx( el, {
|
||||
stickyPlaceholder: false,
|
||||
onChange: function(val){
|
||||
document.querySelector('span.cs-placeholder').style.backgroundColor = val;
|
||||
}
|
||||
});
|
||||
} );
|
||||
|
||||
new FForm( formWrap, {
|
||||
onReview : function() {
|
||||
classie.add( document.body, 'overview' ); // for demo purposes only
|
||||
}
|
||||
} );
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
107
test.html
Normal file
107
test.html
Normal file
@ -0,0 +1,107 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en" class="no-js">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Fullscreen Form Interface</title>
|
||||
<meta name="description" content="Fullscreen Form Interface: A distraction-free form concept with fancy animations" />
|
||||
<meta name="keywords" content="fullscreen form, css animations, distraction-free, web design" />
|
||||
<meta name="author" content="Codrops" />
|
||||
<link rel="shortcut icon" href="../favicon.ico">
|
||||
<link rel="stylesheet" type="text/css" href="css/normalize.css" />
|
||||
<link rel="stylesheet" type="text/css" href="css/demo.css" />
|
||||
<link rel="stylesheet" type="text/css" href="css/component.css" />
|
||||
<link rel="stylesheet" type="text/css" href="css/cs-select.css" />
|
||||
<link rel="stylesheet" type="text/css" href="css/cs-skin-boxes.css" />
|
||||
<script src="js/modernizr.custom.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
|
||||
<!-- <div class="fs-form-wrap" id="fs-form-wrap">
|
||||
<form id="myform" class="fs-form fs-form-full" autocomplete="off">
|
||||
<ol class="fs-fields">
|
||||
<li>
|
||||
<label class="fs-field-label fs-anim-upper" for="q1">Enter FLO data</label>
|
||||
<input class="fs-anim-lower" id="q1" name="q1" type="text" placeholder="Send 50 rmt#" required/>
|
||||
</li>
|
||||
</ol>
|
||||
<button class="fs-submit" type="submit">Send answers</button>
|
||||
</form>
|
||||
</div>-->
|
||||
|
||||
<!-- Related demos -->
|
||||
<!-- <div class="related">
|
||||
<p>If you enjoyed this demo you might also like:</p>
|
||||
<a href="http://tympanus.net/Development/MinimalForm/">
|
||||
<img src="img/relatedposts/minimalform1-300x162.png" />
|
||||
<h3>Minimal Form Interface</h3>
|
||||
</a>
|
||||
<a href="http://tympanus.net/Development/ButtonComponentMorph/">
|
||||
<img src="img/relatedposts/MorphingButtons-300x162.png" />
|
||||
<h3>Morphing Buttons Concept</h3>
|
||||
</a>
|
||||
</div>-->
|
||||
|
||||
<div id="myform" class="fs-form fs-form-overview fs-show">
|
||||
<ol class="fs-fields">
|
||||
<li>
|
||||
<label class="fs-field-label fs-anim-upper" for="q1">FLO data</label>
|
||||
<input class="fs-anim-lower" id="q1" name="q1" type="text" value="Send 50 rmt#" required/>
|
||||
</li>
|
||||
<li>
|
||||
<label class="fs-field-label fs-anim-upper" for="q2">Type</label>
|
||||
<input class="fs-anim-lower" id="q2" name="q2" type="text" value="Transfer" required/>
|
||||
</li>
|
||||
<li>
|
||||
<label class="fs-field-label fs-anim-upper" for="q3">Identification</label>
|
||||
<input class="fs-anim-lower" id="q3" name="q3" type="text" value="rmt#" required/>
|
||||
</li>
|
||||
<li>
|
||||
<label class="fs-field-label fs-anim-upper" for="q4">Amount</label>
|
||||
<input class="fs-anim-lower" id="q4" name="q4" type="text" value="50000" required/>
|
||||
</li>
|
||||
</ol>
|
||||
<button class="fs-submit" type="submit">Go Back</button>
|
||||
</div>
|
||||
|
||||
<!-- Related demos -->
|
||||
<!-- <div class="related">
|
||||
<p>If you enjoyed this demo you might also like:</p>
|
||||
<a href="http://tympanus.net/Development/MinimalForm/">
|
||||
<img src="img/relatedposts/minimalform1-300x162.png" />
|
||||
<h3>Minimal Form Interface</h3>
|
||||
</a>
|
||||
<a href="http://tympanus.net/Development/ButtonComponentMorph/">
|
||||
<img src="img/relatedposts/MorphingButtons-300x162.png" />
|
||||
<h3>Morphing Buttons Concept</h3>
|
||||
</a>
|
||||
</div>-->
|
||||
|
||||
</div><!-- /container -->
|
||||
<script src="js/classie.js"></script>
|
||||
<script src="js/selectFx.js"></script>
|
||||
<script src="js/fullscreenForm.js"></script>
|
||||
<script>
|
||||
(function() {
|
||||
var formWrap = document.getElementById( 'fs-form-wrap' );
|
||||
|
||||
[].slice.call( document.querySelectorAll( 'select.cs-select' ) ).forEach( function(el) {
|
||||
new SelectFx( el, {
|
||||
stickyPlaceholder: false,
|
||||
onChange: function(val){
|
||||
document.querySelector('span.cs-placeholder').style.backgroundColor = val;
|
||||
}
|
||||
});
|
||||
} );
|
||||
|
||||
new FForm( formWrap, {
|
||||
onReview : function() {
|
||||
classie.add( document.body, 'overview' ); // for demo purposes only
|
||||
}
|
||||
} );
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user