From 6e82064d5827ca4f1d67a8d6d7f1699183adbda8 Mon Sep 17 00:00:00 2001 From: Vivek Teega Date: Thu, 28 Feb 2019 13:46:20 +0530 Subject: [PATCH] First commit --- README.md | 14 + css/component.css | 889 +++++++++++++++++++ css/cs-select.css | 109 +++ css/cs-skin-boxes.css | 319 +++++++ css/demo.css | 135 +++ css/normalize.css | 1 + css/testcss.css | 7 + fonts/.DS_Store | Bin 0 -> 6148 bytes fonts/codropsicons/codropsicons.eot | Bin 0 -> 2244 bytes fonts/codropsicons/codropsicons.svg | 24 + fonts/codropsicons/codropsicons.ttf | Bin 0 -> 2060 bytes fonts/codropsicons/codropsicons.woff | Bin 0 -> 2072 bytes fonts/codropsicons/license.txt | 6 + img/.DS_Store | Bin 0 -> 15364 bytes img/Readme.txt | 1 + img/abacusstar.svg | 13 + img/conversion.svg | 70 ++ img/dollar.svg | 6 + img/mobile.svg | 95 ++ img/relatedposts/MorphingButtons-300x162.png | Bin 0 -> 27428 bytes img/relatedposts/minimalform1-300x162.png | Bin 0 -> 8160 bytes img/social.svg | 69 ++ index.html | 80 ++ js/classie.js | 80 ++ js/createResult.js | 28 + js/fullscreenForm.js | 663 ++++++++++++++ js/modernizr.custom.js | 257 ++++++ js/selectFx.js | 326 +++++++ test-css-priority.html | 11 + test-js.html | 47 + test.html | 107 +++ 31 files changed, 3357 insertions(+) create mode 100644 README.md create mode 100755 css/component.css create mode 100644 css/cs-select.css create mode 100644 css/cs-skin-boxes.css create mode 100644 css/demo.css create mode 100644 css/normalize.css create mode 100644 css/testcss.css create mode 100644 fonts/.DS_Store create mode 100644 fonts/codropsicons/codropsicons.eot create mode 100644 fonts/codropsicons/codropsicons.svg create mode 100644 fonts/codropsicons/codropsicons.ttf create mode 100644 fonts/codropsicons/codropsicons.woff create mode 100644 fonts/codropsicons/license.txt create mode 100644 img/.DS_Store create mode 100644 img/Readme.txt create mode 100644 img/abacusstar.svg create mode 100644 img/conversion.svg create mode 100644 img/dollar.svg create mode 100644 img/mobile.svg create mode 100644 img/relatedposts/MorphingButtons-300x162.png create mode 100644 img/relatedposts/minimalform1-300x162.png create mode 100644 img/social.svg create mode 100755 index.html create mode 100755 js/classie.js create mode 100644 js/createResult.js create mode 100644 js/fullscreenForm.js create mode 100644 js/modernizr.custom.js create mode 100644 js/selectFx.js create mode 100644 test-css-priority.html create mode 100644 test-js.html create mode 100644 test.html diff --git a/README.md b/README.md new file mode 100644 index 0000000..13f0f82 --- /dev/null +++ b/README.md @@ -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) \ No newline at end of file diff --git a/css/component.css b/css/component.css new file mode 100755 index 0000000..e998a2d --- /dev/null +++ b/css/component.css @@ -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; +} diff --git a/css/cs-select.css b/css/cs-select.css new file mode 100644 index 0000000..15c9d61 --- /dev/null +++ b/css/cs-select.css @@ -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; +} diff --git a/css/cs-skin-boxes.css b/css/cs-skin-boxes.css new file mode 100644 index 0000000..ed4d540 --- /dev/null +++ b/css/cs-skin-boxes.css @@ -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; +} diff --git a/css/demo.css b/css/demo.css new file mode 100644 index 0000000..dfd7fe6 --- /dev/null +++ b/css/demo.css @@ -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; +} diff --git a/css/normalize.css b/css/normalize.css new file mode 100644 index 0000000..77feb20 --- /dev/null +++ b/css/normalize.css @@ -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;} \ No newline at end of file diff --git a/css/testcss.css b/css/testcss.css new file mode 100644 index 0000000..f503e73 --- /dev/null +++ b/css/testcss.css @@ -0,0 +1,7 @@ +.firstcss { + color: red; +} + +.secondcss { + color: blue; +} \ No newline at end of file diff --git a/fonts/.DS_Store b/fonts/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..5008ddfcf53c02e82d7eee2e57c38e5672ef89f6 GIT binary patch literal 6148 zcmeH~Jr2S!425mzP>H1@V-^m;4Wg<&0T*E43hX&L&p$$qDprKhvt+--jT7}7np#A3 zem<@ulZcFPQ@L2!n>{z**++&mCkOWA81W14cNZlEfg7;MkzE(HCqgga^y>{tEnwC%0;vJ&^%eQ zLs35+`xjp>T0_@+Qe&^5k z<$ULS-#Pt4C2GKAl1L1RWS0#fxyS;&JX+_;?@(x{Dsb+Oj+IZ2Fy*L36I8*sO!G8t z^F<&cAB|C-3Ur=kDGLjtW*Ud2V%wFdND=C%UW!5UU;98UeDlH&7ma2zufI~b{6hzk z=RTyZ$A*t)C`}6ZTi_!nPxZxnfBX(QJ`H|6HQT$g$w#69F%xf@Ux{{ zmVcAZVSNmIa4vhHOrwOo_yG7wF*}$4+5GY?BKaz0pO;JX3pf8-`xL)F0sVx1Hk?n@ z@8sUxap(^+cpY-O@yV{|AJW=7U*{@#)kz(;!e6zvPF=!&YlyGgJBcORL$f6sy-2bx z5=m!UHsqKvf5aD|RoUVfAUo{PJ4h8$`0#!Rd%v?tkkQGb6Et*}?r-~0rJ<_rlhD>r z0C361XW+SC$ixXA=nybih}r6RJ`PS~x|Q5C0IF`E_OAOrA!iuk7wgEc+P26$hJuwc zd9aQc60wOGEKXd%>NanGwv`Vh|6dfr6a1Jq+2k1FaHjSR7kCQC4G=Z<``k^tIG&Cs zdtIB#&K|3cPnJ${TeQ1{3!at}!((lU<0lerqsL$B5D{YX*KTl?Pf>(uPg79Y%c17r z4puC)k2_PzBb-jece4;B;>}$3dsjzvy;1Xe^%YH9(Y;=+QP)RSz5Wj)-o_JZs~Xg_ zt3rK6*LUhI`bZ;kNVR*o>8DXVOgcb^XbA77-HZ;eQfyT9$&0be38MT_)_as6V>@B{$^d8|}|2iF!C*B0Mj zo|##mS?Ov}1L3e4R`yAK!+qv+U0p*^F0OG9+L`4_s9S9ao1sv^&<(vk7He_elY`Q1a6OZ-7@EP5HN;@6TSLUZn#YlfITGBIa^{+Z + + + +This is a custom SVG font generated by IcoMoon. + + + + + + + + + + + + + + \ No newline at end of file diff --git a/fonts/codropsicons/codropsicons.ttf b/fonts/codropsicons/codropsicons.ttf new file mode 100644 index 0000000000000000000000000000000000000000..72bed1fc166049e8b1a6865d60876c7b66c9c33f GIT binary patch literal 2060 zcmd^AT}&KR6h3EmXLf$r?QU6Ef|ZN|77g9DBnpBdZ6vW9SQZ3!Hw#T_ z;=?AqOJl6%(Lm#qCiSU?7wMD6P}?RZO^m@tV^SY9eNYnwmtPMhMn_XPKs$Zu$=(mKvP?*Z_FVbbKk3tVFX08@#l&}|{gdWak7PCK^pT9{Y z--PY6Vqt0d-XEKv;QiC^Pm?$srm8=jdgD<4Z)ETmEOhtdmgoPLl`X!*W#}qN!is@4 zT&`?Uhlt-DG; z)#_;xf|yn~1^U#8tj*i!fHf|3HRmj6R|rHaQ9& zE>*tb9M9t10ixPopS!MwW2s1@+qI({?y{PBq%gwGkW?ln5V7QP=39imR^B66GUiBzmUD49yIK9)*&>a1h}6-Xu8P4E%2 zP!jl2Cy$kk^T6iH%I3;@YxDDK^BWyCYM`OPY*3C%JwrX_a~&OnaIS1}5Z?KO>0sHP@33npmU>ChYXB_NC%xwqD=vzAuR;U5r{}dI_ zV@r4z(b48?JuiCORAIVQC@#%S74p!=C`&oILJO2ZFpXt%R~9k=X)MgsvMo!9$l~(H zsGFjYeVEVMe$Sgip^}&}#P?Dh+ZFQ5=|U-&4ad5p;lA*}B%r3cl3lTAF9M&n??2L> zKtd(^Tq4adULsPXiEL?Uu87(Tm7p~+9f^k(14jFme|E^mRVts=SqI=Y&6>I y$b=(fj*L1oE@V0y75_&@_m=ER`=E*HiVn@Fnds-Z=T06h9NPoy_k=w7FZ>JB7%cJt literal 0 HcmV?d00001 diff --git a/fonts/codropsicons/codropsicons.woff b/fonts/codropsicons/codropsicons.woff new file mode 100644 index 0000000000000000000000000000000000000000..1003218f04a098dcf26cf9260f28f9e58ea77b5f GIT binary patch literal 2072 zcmZXWdpy(oAIHCA47p6UnTVNAx#f~eb{QTrOKoOzopLBsIOg6FLUIq?b18%h zoyIie{&NbOTE-$B)FPL5IA7<{f4|S;@p^n7ujl*ycz-^h$LI0*ygxAnJf1)#5&%F3 z4eS8Gp#TRU+w=bqdpsTk01z1ffQ|tG><8h6k0TyWbOivZ4`B8#P#Qsn{5_6G9q=F% zgMK$C3}6mG37*CW060fl%*IK z=MfA-kWGSK6Vx8b(5;?edNc!M+iR$U(vSmy5IUIw)`OuzFa4ij?mz^YP6ZhT^q;{s zUJ9|@q36#LzV6muAN&o8Y;qD+xhNBz)vp`Q zEml)lP->n#fI8HFMCz*E(btJyv01Xp*omFDFC3m+;3(-lSTp5_`^DNGwEmXB-2If2 zS6!@UR|ltYOP6=_Z(6OkFWJoEv{qxQnWM5L_v(0jpDpLl$LX#=e0{k`q7tRO-lEdI zuG54#hl?dW7g2$BBNvtA8U%r#19Ff})<#-!?eAgr9kBb0Uu@F|Tl--0921hwjNKuG zy&kdi_U`?z7D6F%zQNw6rN;63rOD$t{?R_XL3$k|*mOZ*!IgeQh3i`xg@i3zwcO2W zy*U=OvOgjvQ_HLJ?XZ`?L2;{9*vcex_-P!HEcSDeVaKyY zhKpZL;3#`D7zQNloTO}5DO)>bIi2~!hxY_EXSCoZLM3aH4ZS_N)5}R&nE^>uVD|keSoe-E!1MbHZ(dePZgQ^Ds(DfPDQ>Xq&hXJW`cP9%ruUJ z4qy>|%_kqc@QqT7jKEgBRLzA}1>SO#NtjVzX811aXg&{uPK}nF?y6mDau13N?{r-3 zTPSbZyOF!4ZX0<961rY0|5xZe^(()(g}tAxmk~6a$F1~|^-m$No5%{h1~OgQdg?&= zXuLS$hB-%;deO7(q1CD&U~bgil^U>s2pNP3Or> z=hu24!o@)yL7szl$!Q0vPF)2Lln(C1eMAKkWgTo{-Z=zB8lk?4%!-cW>1@cI^E0z8 z&2iBm)9*t@(GUIbb_#K--pm=Qg<0yq}nj5J#g<- z@!N`$_n~g|6l_7l-{i4*f?m;zqvw5MPj%DEeMGqaS8m_O9lRdQ<~OwilbH*bGv1U_ znx1d4KDXpLS~8*ys~78y;ndNA7@PT5^Se{WjdknpyU!0hm0hY-ocdJD&e%8GmcipE zkV^Bv~cI$5Xu`=#BBKGm-G4$QsxEsTI z8|Ql$VIh&(;aE$Kfgil@#n8izvK(J}zUPJfKY5>`yTamC={h+N z+a#)V1_?G-7}F<=iw&BX>yKZ{3HhnlYaboG>KRqR@ZNH|GkIZE6xlcJ^46!hl~=uD zsJW_04cdgU51O}u?;3?fA_W3TW-Xb6$#YM_giR!Kz)^eqf!vM-l1LvU17xM)qyQ4s z&Jsg|d_x1!s{rn2oaV=|VloSu$sWZcc}!-9qVw4xI7OF60`sY~L`euVUmG)Ek=ii@ zVZ)?3Xe&&a-{hnx>{1uR7ABJIM5w?)OffRKq zup5DKYZi;eNYu`2VA>`scSQi-Ism{`2nE{+;10Hp?VPOahETQ%Jnb;f%{gT5lwEIS zU4GU=9-=Y2Z(Q5{`v){d=H#{f*}1pgpQ4tfHqhlicq7Ai;T=wVCw{qNk%(D!7B5Cy z3DOE#IyV_g8hz_>)*rJgSSt5uMx$L%TZjP%6h#@E$kojvNQP9yO>`_pPvwqZHij= zkgIfOX02<=!w6xspI@UwXx`tK;Le4;SiMF+K>_8Q#Wk&z&58N^1oM`HrCnoO>w!n~ Ul^xt5XNmvrh{ggx0r3FzU+*`ItpET3 literal 0 HcmV?d00001 diff --git a/fonts/codropsicons/license.txt b/fonts/codropsicons/license.txt new file mode 100644 index 0000000..88a5cbc --- /dev/null +++ b/fonts/codropsicons/license.txt @@ -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/ \ No newline at end of file diff --git a/img/.DS_Store b/img/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..ab7ff7b861bfd2b4aa1c4e24bee2dd60befa2ee3 GIT binary patch literal 15364 zcmeI1U2GIp6vyv5EoBzAcA!>Rw75`}uTt8ASU!~PQa;N^=`P)E`DkZ%20A+3X?AA2 zXsv9}ga<E<@#*@A1GrGpY@3qY1{ z0i28Sv=4A%!k&$Iw%}SPl-hK658#D@x5WTAoa)2eoovLj1=qUa4BT)AUeDm|P{8S( z;=+zQgNSQIDhLPy6A5tn1X-5$?FLiE?B8u>rSjHb$}m&p^ImGu&@H>M@oT`c@@W;* zrGO*__b2p>YUZP6E~8reV*O@5rmI>?$sTa>wqob3sFHPRIuyH~YMgxBG!4q{_q-Fj zYWMfbbBBkUTUzSFYgUichliV1u4<-yWAn&JKneupTT;!!hV@(H%JU;H94)vb0dF;6 zmG1LsdW>?u!!oR)4tH2(=S#!7F*>XnGlP})9XQzArv!WD*+aUP-#uvSX2$B$vKHB1 zxyqt}ZcCe)j;zM(d*xYa#YpE2#nxI4Bc?y6S&6i1eRmLCFd-yQ=`W9A+3$Nuw)2G=c?w07p-_=!R?T9 zPGU&6^pv6P&2ygJij~$fs-8LAL!U{;)(`1gHZTk71M!S9pcSh_^B#PtwlX;0yVS~l zmHOIgsyt4WKac{&>IDny9;vOY^o!WXBQ|C=N>xcJRxe(%bXmQB2XTua$O><`v8j3G zs-W+y#Gj#QCR+jWY+18*-TI*KE9^CtlxE0kfVz*gMmM(kyC#O*&r@#a&Re%_Z?Exp zPNvO)0fK08-`yR1I%EDA4sr}T6wBT{sAUM<=bS|%+1*p?Kf-Pv)2gbP8VJ;tW^r9) zv6~$&8S|OcMH=1e0DX7XvS!xClB|!kJj_n8*V!5NKD)>+vCHfe_5~}l8|)VQh5gEY zXSdlOfFQwamXKf!Ns2NBD08dhKx*5Jdq2ph2pn{gesVmrn#g(_-z2u;l4 zQ9O<(@l`y9Z{S(HfLHKScQ9Czbh?DWE5Ay1GD&+YRoN*YNpnS~rn023S8*ZVU-Q76 zxeJywt!dr1CpkLp#?7g_mFCFEo%fDTO7q%L`Ire)bQC|IW;w}8JK`r}c{*Ptq+*EF z{^(==^IVpksU0GbFK?K{4QcV9)=1%xul8RJe9B*l@-#=>A(Hl{&Hj3l z%bn#Sw7q@D&RvtVR^h0>GZqg8=LZv|rEfeL`u1VPPDFXL%EgXhLcR~;wa^OH$;D3;9_X67*Yl%zj4Ts#Q^f`A|(2nYg# zz&#{T=C&2)=l`4h|Np;-J&L9T0YPA@5rFcxSX-3d%J26#KWh)u-A6aSxL?7wP6#F3 zg_ra5ME<~!w^j`~SNR?*7gFzau=6 n2m*qDARq_`0)l`bAP5Kof`A|(2nYg#fFK|U2m*q@|B}Gp?-qKC literal 0 HcmV?d00001 diff --git a/img/Readme.txt b/img/Readme.txt new file mode 100644 index 0000000..dda7640 --- /dev/null +++ b/img/Readme.txt @@ -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 \ No newline at end of file diff --git a/img/abacusstar.svg b/img/abacusstar.svg new file mode 100644 index 0000000..32b2bc4 --- /dev/null +++ b/img/abacusstar.svg @@ -0,0 +1,13 @@ + + + + + + diff --git a/img/conversion.svg b/img/conversion.svg new file mode 100644 index 0000000..f83967e --- /dev/null +++ b/img/conversion.svg @@ -0,0 +1,70 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/img/dollar.svg b/img/dollar.svg new file mode 100644 index 0000000..8cfd3b8 --- /dev/null +++ b/img/dollar.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/img/mobile.svg b/img/mobile.svg new file mode 100644 index 0000000..149a4af --- /dev/null +++ b/img/mobile.svg @@ -0,0 +1,95 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/img/relatedposts/MorphingButtons-300x162.png b/img/relatedposts/MorphingButtons-300x162.png new file mode 100644 index 0000000000000000000000000000000000000000..214fc4f14df6badd3e0ad272b7a3161ccf553fd3 GIT binary patch literal 27428 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 c5rFlUmfa + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/index.html b/index.html new file mode 100755 index 0000000..1df3a48 --- /dev/null +++ b/index.html @@ -0,0 +1,80 @@ + + + + + + + FLOdata tester + + + + + + + + + + + + +
+ +
+
+

FLOdata tester

+
+ Previous Demo + Back to the Codrops Article + This is a demo for a fullscreen form +
+
+
+
    +
  1. + + +
    2. +
+ +
+
+ + +
+

If you enjoyed this demo you might also like:

+ + +

Minimal Form Interface

+ + + +

Morphing Buttons Concept

+ +
+ +
+ + + + + + \ No newline at end of file diff --git a/js/classie.js b/js/classie.js new file mode 100755 index 0000000..1c7be2f --- /dev/null +++ b/js/classie.js @@ -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 ); diff --git a/js/createResult.js b/js/createResult.js new file mode 100644 index 0000000..93480af --- /dev/null +++ b/js/createResult.js @@ -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= 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; i1){ + 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; i1){ + 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' : ''; + } + 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 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 ); diff --git a/js/modernizr.custom.js b/js/modernizr.custom.js new file mode 100644 index 0000000..9a75ce3 --- /dev/null +++ b/js/modernizr.custom.js @@ -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 = ["­", '"].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", 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 = "", 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 + }); diff --git a/js/selectFx.js b/js/selectFx.js new file mode 100644 index 0000000..f75bdfb --- /dev/null +++ b/js/selectFx.js @@ -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 '
  • ' + el.textContent + '
    • '; + }; + + [].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 += '
  • ' + el.label + '
      '; + [].slice.call( el.children ).forEach( function(opt) { + options += createOptionHTML(opt); + } ) + options += '
    • '; + } + } ); + + var opts_el = '
      ' + options + '
    '; + this.selEl = document.createElement( 'div' ); + this.selEl.className = this.el.className; + this.selEl.tabIndex = this.el.tabIndex; + this.selEl.innerHTML = '' + this.selectedOpt.textContent + '' + 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 ); diff --git a/test-css-priority.html b/test-css-priority.html new file mode 100644 index 0000000..e659509 --- /dev/null +++ b/test-css-priority.html @@ -0,0 +1,11 @@ + + + Testing css priority + + + +

    + From now on I am not going to be in denial of my feelings. +

    + + \ No newline at end of file diff --git a/test-js.html b/test-js.html new file mode 100644 index 0000000..3e49f21 --- /dev/null +++ b/test-js.html @@ -0,0 +1,47 @@ + + + + + + + Fullscreen Form Interface + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/test.html b/test.html new file mode 100644 index 0000000..10ae1cd --- /dev/null +++ b/test.html @@ -0,0 +1,107 @@ + + + + + + + Fullscreen Form Interface + + + + + + + + + + + + +
    + + + + + + +
    +
      +
    1. + + +
      2. +
    2. + + +
      3. +
    3. + + +
      4. +
    4. + + +
      5. +
    + +
    + + + + +
    + + + + + + \ No newline at end of file