diff --git a/test/builder.js b/builder.js similarity index 97% rename from test/builder.js rename to builder.js index e14a3c508..3d71137ac 100644 --- a/test/builder.js +++ b/builder.js @@ -26,11 +26,9 @@ $(document).ready(function(){ var $checkGroup = $('
'); var $checkbox = $(''); - var $label = $('
@@ -159,18 +159,18 @@

Animate.css Builder

 - Voltar + Back
- +

Animate.css or Download Animate.css or View on GitHub

-

Developed by Igorxp5

+

Project contributors

diff --git a/style.css b/style.css index 9c872e136..03638d3a0 100644 --- a/style.css +++ b/style.css @@ -11,7 +11,7 @@ box-sizing: border-box; } -input, select, button, textarea { +select, button, textarea { -webkit-appearance: none; -moz-appearance: none; appearance: none; @@ -55,6 +55,10 @@ input, select, button, textarea { color: #fff; } + .butt--build { + margin-top: 20px; + } + .input { border: 1px solid #c0c8c9; border-radius: 4px; @@ -70,56 +74,19 @@ input, select, button, textarea { .checkbox-group { display: inline-block; - margin: 10px; + margin: 15px; position: relative; width: 160px; } .checkbox-group .input--checkbox { - visibility: hidden; -} - -.checkbox--check { - background: inherit; - border: 1px solid #ddd; - cursor: pointer; - height: 20px; position: absolute; top: 0; left: 0; - width: 20px; -} - -.checkbox--check:after { - content: ''; - background: transparent; - border: 3px solid #4D4C41; - border-top: none; - border-right: none; - height: 5px; - opacity: 0.2; - position: absolute; - top: 6px; left: 5px; - -webkit-transform: rotate(-45deg); - -moz-transform: rotate(-45deg); - -o-transform: rotate(-45deg); - -ms-transform: rotate(-45deg); - transform: rotate(-45deg); - -webkit-animation: hue 60s infinite linear; - animation: hue 60s infinite linear; - width: 9px; -} - - -.checkbox-group .input--checkbox:checked + .checkbox--check:after { - border: 3px solid #f35626; - border-top: none; - border-right: none; - opacity: 1; } .checkbox--label { position: absolute; - top: -1px; left: 25px; + top: -5px; left: 25px; } /*-----------------------------------*\ @@ -203,7 +170,6 @@ a { /* prevent fast down animation */ .section__builder.fadeOutDown { - -webkit-animation-duration: 2.5s; animation-duration: 2.5s; } @@ -302,8 +268,6 @@ html { } .modal__main { - -webkit-animation-duration: .5s; - -o-animation-duration: .5s; animation-duration: .5s; background-color: #fff; box-shadow: 0 0 13px -5px rgba(0, 0, 0, .8); @@ -324,8 +288,6 @@ html { } .modal__button { - -webkit-animation: hue 60s linear; - -o-animation: hue 60s linear; animation: hue 60s linear; background-color: transparent; border: 2px solid #f35626; @@ -334,8 +296,6 @@ html { font-size: 15px; outline: none; padding: 7px 22px; - -webkit-transition: background-color .4s, color .4s; - -o-transition: background-color .4s, color .4s; transition: background-color .4s, color .4s; } @@ -355,8 +315,6 @@ html { } .modal__close { - -webkit-animation: hue 60s linear; - -o-animation: hue 60s linear; animation: hue 60s linear; border: 3px solid #fff; background-color: #f35626; @@ -379,17 +337,9 @@ html { width: 15px; } .modal__close:before { - -webkit-transform: translateY(-1px) rotate(-45deg); - -moz-transform: translateY(-1px) rotate(-45deg); - -ms-transform: translateY(-1px) rotate(-45deg); - -o-transform: translateY(-1px) rotate(-45deg); transform: translateY(-1px) rotate(-45deg); } .modal__close:after { - -webkit-transform: translateY(-1px) rotate(45deg); - -moz-transform: translateY(-1px) rotate(45deg); - -ms-transform: translateY(-1px) rotate(45deg); - -o-transform: translateY(-1px) rotate(45deg); transform: translateY(-1px) rotate(45deg); } \ No newline at end of file diff --git a/test/index.html b/test/index.html index 4114968d6..f79eaaa90 100644 --- a/test/index.html +++ b/test/index.html @@ -14,151 +14,127 @@ -
-
-
-

Animate.css

 - Just-add-water CSS animations -
-
- -
-
-
- - - -
-
-

Builder or Download Animate.css or View on GitHub

-

Want to thank me for this? Buy me a coffee.

-
-
-
- - - +
+
+

Animate.css

 + Just-add-water CSS animations +
+
+ +
+
+
+ + + +
+
+

Download Animate.css or View on GitHub

+

Want to thank me for this? Buy me a coffee.

+
+
- diff --git a/test/style.css b/test/style.css index 9c872e136..fc8cd22c9 100644 --- a/test/style.css +++ b/test/style.css @@ -68,60 +68,6 @@ input, select, button, textarea { background-position: right center; } -.checkbox-group { - display: inline-block; - margin: 10px; - position: relative; - width: 160px; -} - -.checkbox-group .input--checkbox { - visibility: hidden; -} - -.checkbox--check { - background: inherit; - border: 1px solid #ddd; - cursor: pointer; - height: 20px; - position: absolute; - top: 0; left: 0; - width: 20px; -} - -.checkbox--check:after { - content: ''; - background: transparent; - border: 3px solid #4D4C41; - border-top: none; - border-right: none; - height: 5px; - opacity: 0.2; - position: absolute; - top: 6px; left: 5px; - -webkit-transform: rotate(-45deg); - -moz-transform: rotate(-45deg); - -o-transform: rotate(-45deg); - -ms-transform: rotate(-45deg); - transform: rotate(-45deg); - -webkit-animation: hue 60s infinite linear; - animation: hue 60s infinite linear; - width: 9px; -} - - -.checkbox-group .input--checkbox:checked + .checkbox--check:after { - border: 3px solid #f35626; - border-top: none; - border-right: none; - opacity: 1; -} - -.checkbox--label { - position: absolute; - top: -1px; left: 25px; -} - /*-----------------------------------*\ $TYPOGRAPHY \*-----------------------------------*/ @@ -190,7 +136,7 @@ a { } .island { - padding: 1.5rem 0; + padding: 1.5rem; } .isle { @@ -201,12 +147,6 @@ a { padding: .375rem; } -/* prevent fast down animation */ -.section__builder.fadeOutDown { - -webkit-animation-duration: 2.5s; - animation-duration: 2.5s; -} - /*-----------------------------------*\ $BASE \*-----------------------------------*/ @@ -283,113 +223,3 @@ html { -webkit-filter: hue-rotate(-360deg); } } - - - - -/*-----------------------------------*\ - $MODAL BUILDER -\*-----------------------------------*/ - -.modal__overlay { - background-color: rgba(0,0,0,.1); - display: none; - height: 100%; - position: fixed; - top: 0; left: 0; - width: 100%; - z-index: 1; -} - -.modal__main { - -webkit-animation-duration: .5s; - -o-animation-duration: .5s; - animation-duration: .5s; - background-color: #fff; - box-shadow: 0 0 13px -5px rgba(0, 0, 0, .8); - display: none; - height: 80%; - padding: 30px; - margin: auto; - position: fixed; - top: 0; left: 0; bottom: 0; right: 0; - width: 70%; - z-index: 2; -} - -.modal__code { - height: 90%; - text-align: left; - overflow: scroll; -} - -.modal__button { - -webkit-animation: hue 60s linear; - -o-animation: hue 60s linear; - animation: hue 60s linear; - background-color: transparent; - border: 2px solid #f35626; - color: #f35626; - cursor: pointer; - font-size: 15px; - outline: none; - padding: 7px 22px; - -webkit-transition: background-color .4s, color .4s; - -o-transition: background-color .4s, color .4s; - transition: background-color .4s, color .4s; -} - -.modal__button:hover { - background-color: #f35626; - color: #fff; -} - -.js--trigger-minify { - position: absolute; - right: 8%; - z-index: 3; -} - -.js--copy-build { - margin: 15px auto 0; -} - -.modal__close { - -webkit-animation: hue 60s linear; - -o-animation: hue 60s linear; - animation: hue 60s linear; - border: 3px solid #fff; - background-color: #f35626; - border-radius: 50%; - height: 35px; - position: absolute; - top: -15px; - right: -15px; - width: 35px; -} - -.modal__close:before, .modal__close:after { - content: ''; - background-color: #fff; - display: block; - height: 2px; - margin: auto; - position: absolute; - top: 0; right: 0; bottom: 0; left: 0; - width: 15px; -} -.modal__close:before { - -webkit-transform: translateY(-1px) rotate(-45deg); - -moz-transform: translateY(-1px) rotate(-45deg); - -ms-transform: translateY(-1px) rotate(-45deg); - -o-transform: translateY(-1px) rotate(-45deg); - transform: translateY(-1px) rotate(-45deg); -} - -.modal__close:after { - -webkit-transform: translateY(-1px) rotate(45deg); - -moz-transform: translateY(-1px) rotate(45deg); - -ms-transform: translateY(-1px) rotate(45deg); - -o-transform: translateY(-1px) rotate(45deg); - transform: translateY(-1px) rotate(45deg); -} \ No newline at end of file