diff --git a/assets/js/main.js b/assets/js/main.js index 1224e0f..bd38669 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -94,72 +94,4 @@ }, settings.delay); })(); - - // Signup Form. - (function() { - - // Vars. - var $form = document.querySelectorAll('#signup-form')[0], - $submit = document.querySelectorAll('#signup-form input[type="submit"]')[0], - $message; - - // Bail if addEventListener isn't supported. - if (!('addEventListener' in $form)) - return; - - // Message. - $message = document.createElement('span'); - $message.classList.add('message'); - $form.appendChild($message); - - $message._show = function(type, text) { - - $message.innerHTML = text; - $message.classList.add(type); - $message.classList.add('visible'); - - window.setTimeout(function() { - $message._hide(); - }, 3000); - - }; - - $message._hide = function() { - $message.classList.remove('visible'); - }; - - // Events. - // Note: If you're *not* using AJAX, get rid of this event listener. - $form.addEventListener('submit', function(event) { - - event.stopPropagation(); - event.preventDefault(); - - // Hide message. - $message._hide(); - - // Disable submit. - $submit.disabled = true; - - // Process form. - // Note: Doesn't actually do anything yet (other than report back with a "thank you"), - // but there's enough here to piece together a working AJAX submission call that does. - window.setTimeout(function() { - - // Reset form. - $form.reset(); - - // Enable submit. - $submit.disabled = false; - - // Show message. - $message._show('success', 'Thank you!'); - //$message._show('failure', 'Something went wrong. Please try again.'); - - }, 750); - - }); - - })(); - })(); \ No newline at end of file diff --git a/assets/sass/components/_form.scss b/assets/sass/components/_form.scss deleted file mode 100644 index ea8a7a6..0000000 --- a/assets/sass/components/_form.scss +++ /dev/null @@ -1,221 +0,0 @@ -/* Form */ - - form { - margin: 0 0 _size(element-margin) 0; - - .message { - @include icon(false, solid); - @include vendor('transition', ( - 'opacity #{_duration(transition)} ease-in-out', - 'transform #{_duration(transition)} ease-in-out' - )); - @include vendor('transform', 'scale(1.05)'); - height: _size(element-height); - line-height: _size(element-height); - opacity: 0; - - &:before { - margin-right: 0.5em; - } - - &.visible { - @include vendor('transform', 'scale(1)'); - opacity: 1; - } - - &.success { - color: _palette(positive, bg); - - &:before { - content: '\f00c'; - } - } - - &.failure { - color: _palette(negative, bg); - - &:before { - content: '\f119'; - } - } - } - } - - label { - color: _palette(fg-bold); - display: block; - font-size: 0.9em; - font-weight: _font(weight-bold); - margin: 0 0 (_size(element-margin) * 0.5) 0; - } - - @include keyframes(focus) { - 0% { @include vendor('transform', 'scale(1)'); } - 50% { @include vendor('transform', 'scale(1.025)'); } - 100% { @include vendor('transform', 'scale(1)'); } - } - - input[type="text"], - input[type="password"], - input[type="email"], - select, - textarea { - @include vendor('appearance', 'none'); - @include vendor('transform', 'scale(1)'); - @include vendor('transition', ( - 'border-color #{_duration(transition)} ease', - 'background-color #{_duration(transition)} ease' - )); - background-color: transparent; - border-radius: _size(border-radius); - border: none; - border: solid _size(border-width) _palette(border); - color: inherit; - display: block; - outline: 0; - padding: 0 1em; - text-decoration: none; - width: 100%; - - &:invalid { - box-shadow: none; - } - - &:focus { - @include vendor('animation', 'focus 0.1s'); - background-color: _palette(border-bg); - border-color: _palette(accent, bg); - } - } - - select { - background-image: svg-url(""); - background-size: 1.25rem; - background-repeat: no-repeat; - background-position: calc(100% - 1rem) center; - height: _size(element-height); - padding-right: _size(element-height); - text-overflow: ellipsis; - - option { - color: _palette(fg-bold); - background: _palette(bg); - } - - &:focus { - &::-ms-value { - background-color: transparent; - } - } - - &::-ms-expand { - display: none; - } - } - - input[type="text"], - input[type="password"], - input[type="email"], - select { - height: _size(element-height); - } - - textarea { - padding: 0.75em 1em; - } - - input[type="checkbox"], - input[type="radio"], { - @include vendor('appearance', 'none'); - display: block; - float: left; - margin-right: -2em; - opacity: 0; - width: 1em; - z-index: -1; - - & + label { - @include icon(false, solid); - color: _palette(fg); - cursor: pointer; - display: inline-block; - font-size: 1em; - font-weight: _font(weight); - padding-left: (_size(element-height) * 0.6) + 0.75em; - padding-right: 0.75em; - position: relative; - - &:before { - background: _palette(border-bg); - border-radius: _size(border-radius); - border: solid _size(border-width) _palette(border); - content: ''; - display: inline-block; - font-size: 0.8em; - height: (_size(element-height) * 0.6); - left: 0; - line-height: (_size(element-height) * 0.6); - position: absolute; - text-align: center; - top: 0; - width: (_size(element-height) * 0.6); - } - } - - &:checked + label { - &:before { - background: _palette(accent, bg); - border-color: _palette(accent, bg); - color: _palette(accent, fg-bold); - content: '\f00c'; - } - } - - &:focus + label { - &:before { - border-color: _palette(accent, bg); - box-shadow: 0 0 0 _size(border-width) _palette(accent, bg); - } - } - } - - input[type="checkbox"] { - & + label { - &:before { - border-radius: _size(border-radius); - } - } - } - - input[type="radio"] { - & + label { - &:before { - border-radius: 100%; - } - } - } - - ::-webkit-input-placeholder { - color: _palette(fg-light) !important; - opacity: 1.0; - } - - :-moz-placeholder { - color: _palette(fg-light) !important; - opacity: 1.0; - } - - ::-moz-placeholder { - color: _palette(fg-light) !important; - opacity: 1.0; - } - - :-ms-input-placeholder { - color: _palette(fg-light) !important; - opacity: 1.0; - } - - .formerize-placeholder { - color: _palette(fg-light) !important; - opacity: 1.0; - } \ No newline at end of file diff --git a/assets/sass/main.scss b/assets/sass/main.scss index e8bb162..575c8fc 100644 --- a/assets/sass/main.scss +++ b/assets/sass/main.scss @@ -31,11 +31,9 @@ @import 'components/icon'; @import 'components/list'; @import 'components/icons'; - @import 'components/form'; @import 'components/button'; // Layout. @import 'layout/header'; - @import 'layout/signup-form'; @import 'layout/footer'; \ No newline at end of file diff --git a/index.html b/index.html index 938a532..8aaa548 100644 --- a/index.html +++ b/index.html @@ -25,7 +25,7 @@
  • QQ
  • PKI
  • Facebook
    • -
  • Steam
    • +
  • Steam