We Keep Coding

Second css animation is added but not causing effect

I have a menu button and a menu, there is 1 known bug:
Bug: One of the events is on mouseleave of the menu box and it should add a class dropDownMenuPulsate which is applied but does not work, I am forced to use !important in css animation declaration, why?
To reproduce this bug: click the menu button, place the mouse over the menu and then out(don't go back over), wait... in 2 seconds it applies animation if !important is used and 4 seconds later menu closes as expected.
var menuAutoHideTimeoutId = '';
var menuAutoWarningTimeoutId = '';
// dropdown menu button click
$("#dropDownMenuBtn").on("click", function(){
event.stopPropagation();
if($("#dropDownMenuWrap").css("opacity") == 0){
$("#dropDownMenuWrap").removeClass('dropDownMenuWrapHideAnimation').addClass('dropDownMenuWrapShowAnimation');
}else{
$("#dropDownMenuWrap").removeClass('dropDownMenuWrapShowAnimation').addClass('dropDownMenuWrapHideAnimation');
if($("#dropDownMenuWrap").hasClass("dropDownMenuPulsate")){
$("#dropDownMenuWrap").removeClass('dropDownMenuPulsate');
window.clearTimeout(menuAutoWarningTimeoutId);
window.clearTimeout(menuAutoHideTimeoutId);
}
}
});
$(".dropDownMenuLinkWrap").on("click", function(){
console.log('page render');
// avoid menu hide to fire when click click outside menu wrap
event.stopPropagation();
})
// dropdown menu hide on click outside menu wrap
$(document).on("click", function(){
if($("#dropDownMenuBtn:hover").length == 0){
if($("#dropDownMenuWrap").css("opacity") == 1){
$("#dropDownMenuWrap").removeClass('dropDownMenuWrapShowAnimation').addClass('dropDownMenuWrapHideAnimation');
}
}
});
$("#dropDownMenuWrap").on("mouseleave", function(){
// add class showing pulsating effect as warning of closing soon
menuAutoWarningTimeoutId = setTimeout(function(){
if($("#dropDownMenuWrap").hasClass("dropDownMenuWrapShowAnimation")){
$("#dropDownMenuWrap").addClass('dropDownMenuPulsate');
}
}, 2000);
menuAutoHideTimeoutId = setTimeout(function(){
// add closing animation and remove others
if($("#dropDownMenuWrap").hasClass("dropDownMenuWrapShowAnimation")){
$("#dropDownMenuWrap").removeClass('dropDownMenuWrapShowAnimation dropDownMenuPulsate').addClass('dropDownMenuWrapHideAnimation');
}
}, 6000);
})
//mouse re enter cancel mouseout event
$("#dropDownMenuWrap").on("mouseenter", function(){
window.clearTimeout(menuAutoWarningTimeoutId);
window.clearTimeout(menuAutoHideTimeoutId);
if($("#dropDownMenuWrap").hasClass("dropDownMenuPulsate")){
$("#dropDownMenuWrap").removeClass('dropDownMenuPulsate');
}
})
.dropDownMenuPulsate{
/*ANIMATION WORKS ONLY WITH !IMPORTANT!!!!*/
/*ANIMATION WORKS ONLY WITH !IMPORTANT!!!!*/
/*ANIMATION WORKS ONLY WITH !IMPORTANT!!!!*/
/*ANIMATION WORKS ONLY WITH !IMPORTANT!!!!*/
/*ANIMATION WORKS ONLY WITH !IMPORTANT!!!!*/
/*ANIMATION WORKS ONLY WITH !IMPORTANT!!!!*/
animation: pulsateAnimation .2s linear infinite !important;
}
#keyframes pulsateAnimation {
0% { transform: rotate(10deg); }
33% { transform: rotate(0deg); }
66% { transform: rotate(-10deg); }
100% { transform: rotate(0deg); }
}
#dropDownMenuBtn {
cursor: pointer;
position: fixed;
top: 3px;
right: 20px;
font-size: xx-large;
color: #f997bb;
}
#dropDownMenuBtn:hover {
color: lightgrey;
}
.dropDownMenuWrapInitial{
position: fixed;
z-index: 99;
top: 60px;
background: white;
border: 1px solid lightgrey;
width: 200px;
padding: 10px;
border-radius: 5px;
pointer-events :none;
right:-300px;
opacity: 0;
}
.dropDownMenuWrapShowAnimation{
pointer-events :auto;
opacity:1;
right:10px;
transform-origin: top right;
-webkit-transform-origin: top right;
-ms-transform-origin: top right;
animation: .2s ease 1 linkMenuShowAnimation;
-webkit-animation: .2s ease 1 linkMenuShowAnimation;
}
#-webkit-keyframes linkMenuShowAnimation {
0%{
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
100%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
#keyframes linkMenuShowAnimation {
0%{
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
100%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
.dropDownMenuWrapHideAnimation{
pointer-events :none;
opacity:0;
right:-300px;
transform-origin: top right;
-webkit-transform-origin: top right;
-ms-transform-origin: top right;
animation: .2s ease 1 linkMenuHideAnimation;
-webkit-animation: .2s ease 1 linkMenuHideAnimation;
}
#-webkit-keyframes linkMenuHideAnimation {
0%{
right:10px;
opacity:1;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
right:10px;
opacity:1;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
}
#keyframes linkMenuHideAnimation {
0%{
right:10px;
opacity:1;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
right:10px;
opacity:1;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dropDownMenuBtn">
Menu button
</div>
<div id="dropDownMenuWrap" class="dropDownMenuWrapInitial">
<div class="dropDownMenuLinkWrap">
<p class="dropDownMenuLinkText">Link 1</p>
</div>
<div class="dropDownMenuLinkWrap">
<p class="dropDownMenuLinkText">Link 2</p>
</div>
<div class="dropDownMenuLinkWrap">
<p class="dropDownMenuLinkText">Link 3</p>
</div>
</div>
</div>

This happens because the element have three classes among which 2 of them contains animations. In such cases, the order from the css file will be followed. Since you put
dropDownMenuPulsate first and dropDownMenuWrapShowAnimation second in css file, the animation of dropDownMenuWrapShowAnimation will override the animation of dropDownMenuPulsate (you can see it in element inspector).
The fix
Move dropDownMenuPulsate block below dropDownMenuWrapShowAnimation block in css file, as you can see here.
var menuAutoHideTimeoutId = '';
var menuAutoWarningTimeoutId = '';
// dropdown menu button click
$("#dropDownMenuBtn").on("click", function(){
event.stopPropagation();
if($("#dropDownMenuWrap").css("opacity") == 0){
$("#dropDownMenuWrap").removeClass('dropDownMenuWrapHideAnimation').addClass('dropDownMenuWrapShowAnimation');
}else{
$("#dropDownMenuWrap").removeClass('dropDownMenuWrapShowAnimation').addClass('dropDownMenuWrapHideAnimation');
if($("#dropDownMenuWrap").hasClass("dropDownMenuPulsate")){
$("#dropDownMenuWrap").removeClass('dropDownMenuPulsate');
window.clearTimeout(menuAutoWarningTimeoutId);
window.clearTimeout(menuAutoHideTimeoutId);
}
}
});
$(".dropDownMenuLinkWrap").on("click", function(){
console.log('page render');
// avoid menu hide to fire when click click outside menu wrap
event.stopPropagation();
})
// dropdown menu hide on click outside menu wrap
$(document).on("click", function(){
if($("#dropDownMenuBtn:hover").length == 0){
if($("#dropDownMenuWrap").css("opacity") == 1){
$("#dropDownMenuWrap").removeClass('dropDownMenuWrapShowAnimation').addClass('dropDownMenuWrapHideAnimation');
}
}
});
$("#dropDownMenuWrap").on("mouseleave", function(){
// add class showing pulsating effect as warning of closing soon
menuAutoWarningTimeoutId = setTimeout(function(){
if($("#dropDownMenuWrap").hasClass("dropDownMenuWrapShowAnimation")){
$("#dropDownMenuWrap").addClass('dropDownMenuPulsate');
}
}, 2000);
menuAutoHideTimeoutId = setTimeout(function(){
// add closing animation and remove others
if($("#dropDownMenuWrap").hasClass("dropDownMenuWrapShowAnimation")){
$("#dropDownMenuWrap").removeClass('dropDownMenuWrapShowAnimation dropDownMenuPulsate').addClass('dropDownMenuWrapHideAnimation');
}
}, 6000);
})
//mouse re enter cancel mouseout event
$("#dropDownMenuWrap").on("mouseenter", function(){
window.clearTimeout(menuAutoWarningTimeoutId);
window.clearTimeout(menuAutoHideTimeoutId);
if($("#dropDownMenuWrap").hasClass("dropDownMenuPulsate")){
$("#dropDownMenuWrap").removeClass('dropDownMenuPulsate');
}
})
#keyframes pulsateAnimation {
0% { transform: rotate(10deg); }
33% { transform: rotate(0deg); }
66% { transform: rotate(-10deg); }
100% { transform: rotate(0deg); }
}
#dropDownMenuBtn {
cursor: pointer;
position: fixed;
top: 3px;
right: 20px;
font-size: xx-large;
color: #f997bb;
}
#dropDownMenuBtn:hover {
color: lightgrey;
}
.dropDownMenuWrapInitial{
position: fixed;
z-index: 99;
top: 60px;
background: white;
border: 1px solid lightgrey;
width: 200px;
padding: 10px;
border-radius: 5px;
pointer-events :none;
right:-300px;
opacity: 0;
}
.dropDownMenuWrapShowAnimation{
pointer-events :auto;
opacity:1;
right:10px;
transform-origin: top right;
-webkit-transform-origin: top right;
-ms-transform-origin: top right;
animation: .2s ease 1 linkMenuShowAnimation;
-webkit-animation: .2s ease 1 linkMenuShowAnimation;
}
.dropDownMenuPulsate{
/*ANIMATION Works without !important
¯\_(ツ)_/¯
*/
animation: pulsateAnimation .2s linear infinite;
}
#-webkit-keyframes linkMenuShowAnimation {
0%{
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
100%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
#keyframes linkMenuShowAnimation {
0%{
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
100%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
}
.dropDownMenuWrapHideAnimation{
pointer-events :none;
opacity:0;
right:-300px;
transform-origin: top right;
-webkit-transform-origin: top right;
-ms-transform-origin: top right;
animation: .2s ease 1 linkMenuHideAnimation;
-webkit-animation: .2s ease 1 linkMenuHideAnimation;
}
#-webkit-keyframes linkMenuHideAnimation {
0%{
right:10px;
opacity:1;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
right:10px;
opacity:1;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
}
#keyframes linkMenuHideAnimation {
0%{
right:10px;
opacity:1;
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
right:10px;
opacity:1;
-webkit-transform: rotate(-90deg);
transform: rotate(-90deg);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dropDownMenuBtn">
Menu button
</div>
<div id="dropDownMenuWrap" class="dropDownMenuWrapInitial">
<div class="dropDownMenuLinkWrap">
<p class="dropDownMenuLinkText">Link 1</p>
</div>
<div class="dropDownMenuLinkWrap">
<p class="dropDownMenuLinkText">Link 2</p>
</div>
<div class="dropDownMenuLinkWrap">
<p class="dropDownMenuLinkText">Link 3</p>
</div>
</div>
</div>
Reference
Just a personal opinion, are you sure you want to show such an animation in a page?

When .dropDownMenuPulsate is added to #dropDownMenuWrap, that element already has .dropDownMenuWrapShowAnimation.
Both classes have an "animation" property, and since .dropDownMenuPulsate is declared first, .dropDownMenuWrapShowAnimation is overriding it.
You could move .dropDownMenuPulsate declaration to the bottom, or make it more specific:
.dropDownMenuWrapShowAnimation.dropDownMenuPulsate {
...
}

Change hover button class from onClick of other div

That button changes "TE LAAT" into "NU BETALEN" on hover with CSS, which works like a charm. Now I want the "TE LAAT" text to change only when you click the "collapsible-header" div. So when that div becomes active (I added that class now, but the active class toggles when you click it.) the text in the button changes to NU BETALEN.
Basically change the "TE LAAT" into the data-hover or data-active "NU BETALEN" when the div collapsible-header also has the active class.
.collapsible-header.active {
background-color: #e4e4e4;
}
/* .button */
.button {
display: inline-block;
position: relative;
min-width: 7rem;
margin-top: 3.7em;
margin-right: 15px;
padding: 5 6px;
border: 3px solid #EE6E73;
border-radius: 2px;
overflow: hidden;
text-decoration: none;
font-size: 0.8rem;
font-weight: bold;
outline: none;
color: #fff;
background-color: #EE6E73;
font-family: 'Roboto', sans-serif;
line-height: 1.7rem !important;
}
.button span {
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
-o-transition: 0.6s;
transition: 0.6s;
-webkit-transition-delay: 0.2s;
-moz-transition-delay: 0.2s;
-o-transition-delay: 0.2s;
transition-delay: 0.2s;
}
.button:before,
.button:after {
content: '';
position: absolute;
top: ;
left: 0;
width: 100%;
text-align: center;
opacity: 0;
-webkit-transition: .4s,opacity .6s;
-moz-transition: .4s,opacity .6s;
-o-transition: .4s,opacity .6s;
transition: .4s,opacity .6s;
}
/* :before */
.button:before {
content: attr(data-hover);
-webkit-transform: translate(-150%,0);
-moz-transform: translate(-150%,0);
-ms-transform: translate(-150%,0);
-o-transform: translate(-150%,0);
transform: translate(-150%,0);
}
/* :after */
.button:after {
content: attr(data-active);
-webkit-transform: translate(150%,0);
-moz-transform: translate(150%,0);
-ms-transform: translate(150%,0);
-o-transform: translate(150%,0);
transform: translate(150%,0);
}
/* Span on :hover and :active */
.button:hover span,
.button:active span {
opacity: 0;
-webkit-transform: scale(0.3);
-moz-transform: scale(0.3);
-ms-transform: scale(0.3);
-o-transform: scale(0.3);
transform: scale(0.3);
}
/*
We show :before pseudo-element on :hover
and :after pseudo-element on :active
*/
.button:hover:before,
.button:active:after {
opacity: 1;
-webkit-transform: translate(0,0);
-moz-transform: translate(0,0);
-ms-transform: translate(0,0);
-o-transform: translate(0,0);
transform: translate(0,0);
-webkit-transition-delay: .4s;
-moz-transition-delay: .4s;
-o-transition-delay: .4s;
transition-delay: .4s;
}
/*
We hide :before pseudo-element on :active
*/
.button:active:before {
-webkit-transform: translate(-150%,0);
-moz-transform: translate(-150%,0);
-ms-transform: translate(-150%,0);
-o-transform: translate(-150%,0);
transform: translate(-150%,0);
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
}
<link href="https://raw.githubusercontent.com/Dogfalo/materialize/master/css/ghpages-materialize.css" rel="stylesheet"/>
<button class="button right" type="button" data-hover="NU BETALEN" data-active="NU BETALEN TWEE"><span>TE LAAT</span></button>
<div class="collapsible-header active">
<p>content</p>
</div>

You should just need to replace .button:hover/.button:active with .button.active in your CSS, then add the JS below to toggle its .active class:
$('.collapsible-header').click(function(){
$('.button').toggleClass('active');
});

Text rendering changing un-expectedly

I've got an issue which I'm struggling to isolate whereby some of my text changes it appearance, looking slightly more bold than other times. This is in sync with a "pulsing" effect I've introduced, but I'm struggling to see why.
Here's an example of the affect. Things to look for in this animated GIF:
Name: Notice the exclamation mark that appears with a grey pulse over it
Server Item/Item Type/File Extension: Watch carefully and you'll see the text get bolder
Note that the other changes (the larger exclamation and the Item Type data changing and irrelevant, I've since commented out and still see the affect).
EDIT I've managed to get a reproduction and updated the snippet to this affect.
I should note that I've only seen this in Chrome. Firefox seems fine, IE unfortunately doesn't yet work with the codebase so I can't test until I get a reproduction working.
What the code below does is to simply toggle an animate class on a new <span class="pulse"> that has been added. This should trigger the CSS animation to kick in again, which changes the size of the grey pulse.
// Sets up a pulsing affect on any invalid icons within the Deck
(function () {
setInterval(function () {
// Check for any invalid classes, if none were found then just return
var cardErrors = $(".card.invalid");
if (cardErrors.length === 0) return;
function pulse(selection, size, position) {
var missingPulses = selection.filter(function (index, element) {
return $(element).find(".pulse").length === 0;
});
missingPulses.prepend("<div class='pulse'></div>");
// Find the pulse and remove the animation class
var pulse = selection.find(".pulse");
pulse.removeClass("animate");
// Define the pulse size if it's not done already
if (!pulse.filter(function (index, element) {
return !pulse.height() && !pulse.width();
}).length !== 0) {
pulse.css(size);
pulse.css(position);
}
//set the position and add class .animate
//pulse.css(position)
pulse.addClass("animate");
}
pulse(cardErrors, {
height: 12,
width: 12
}, {
top: 11 + 'px',
left: 316 + 'px'
});
}, 2500);
})();
.pulse {
display: block;
position: absolute;
background: #555;
border-radius: 100%;
-moz-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
-webkit-transform: scale(0);
transform: scale(0);
}
/*animation effect*/
.pulse.animate {
-moz-animation: pulse-ripple 0.65s linear;
-o-animation: pulse-ripple 0.65s linear;
-webkit-animation: pulse-ripple 0.65s linear;
animation: pulse-ripple 0.65s linear;
}
#keyframes pulse-ripple {
/*scale the element to 250% to safely cover the entire link and fade it out*/
100% {
opacity: 0;
-moz-transform: scale(2.5);
-ms-transform: scale(2.5);
-o-transform: scale(2.5);
-webkit-transform: scale(2.5);
transform: scale(2.5);
}
}
/* Mixins */
/* Comment here */
html {
height: 100%;
}
body {
height: 100%;
}
body {
scrollbar-base-color: #999;
scrollbar-track-color: #EBEBEB;
scrollbar-arrow-color: black;
scrollbar-shadow-color: #C0C0C0;
scrollbar-dark-shadow-color: #C0C0C0;
}
::-webkit-scrollbar {
width: 10px;
height: 30px;
}
::-webkit-scrollbar-button {
height: 0px;
}
::-webkit-scrollbar-track-piece {
background-color: #EBEBEB;
}
::-webkit-scrollbar-thumb {
height: 20px;
background-color: #999;
border-radius: 5px;
}
::-webkit-scrollbar-corner {
background-color: #999;
}
::-webkit-resizer {
background-color: #999;
}
.deck {
background: rgba(250, 250, 251, 0.88);
position: absolute;
top: 0;
right: 0;
width: 345px;
padding: 10px 10px 10px 10px;
opacity: 1;
height: 100%;
z-index: 10;
}
.deck .scrollable {
overflow-y: scroll;
width: 338px;
height: 100%;
padding-right: 7px;
}
.deck .non-scrollable {
width: 338px;
overflow: hidden;
}
.deck .non-scrollable .card {
width: 338px !important;
}
.deck .card {
margin-bottom: 11px;
background: #FFFFFF;
float: right;
clear: both;
font-family:'Open Sans', Arial, sans-serif;
width: 318px;
padding: 10px 12px 10px 12px;
-moz-transition: box-shadow 0.5s ease;
-webkit-transition: box-shadow 0.5s ease;
-o-transition: box-shadow 0.5s ease;
transition: box-shadow 0.5s ease;
box-shadow: 0px 1px 5px 1px rgba(198, 198, 198, 0.75);
/*relative positioning for list items along with overflow hidden to contain the overflowing ripple*/
position: relative;
overflow: hidden !important;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
/* remove padding added by bootstrap, but only within cards */
}
.deck .card[class*='col-'] {
padding-right: 0;
padding-left: 0;
}
.deck .card.summary-card {
cursor: pointer;
/* https://github.com/ConnorAtherton/loaders.css MIT */
}
.deck .card.summary-card:hover {
box-shadow: 10px 10px 50px 0px #c6c6c6;
}
.deck .card.summary-card .title {
color: #33BDDE;
font-size: 14px;
font-weight: normal;
display: block;
padding-bottom: 5px;
padding-left: 10px;
}
.deck .card.summary-card .notification {
top: 5px;
right: 5px;
width: 20px;
height: 20px;
position: absolute;
}
.deck .card.summary-card.busy .notification {
border-radius: 100%;
-webkit-animation-fill-mode: both;
-moz-animation-fill-mode: both;
-o-animation-fill-mode: both;
animation-fill-mode: both;
border: 3px solid #33BDDE;
border-bottom-color: transparent;
height: 15px;
width: 15px;
background: transparent !important;
display: inline-block;
-webkit-animation: rotate 1.25s 0s linear infinite;
-moz-animation: rotate 1.25s 0s linear infinite;
-o-animation: rotate 1.25s 0s linear infinite;
animation: rotate 1.25s 0s linear infinite;
}
.deck .card.summary-card.filtered .notification:before {
position: relative;
font-family: FontAwesome;
top: 0px;
left: 0px;
color: #33BDDE;
font-size: 18px;
content:"\f0b0";
}
.deck .card.summary-card .content {
padding: 0 0 0 0;
}
.deck .card.summary-card .content .label {
color: #303E45;
font-size: 12px;
font-weight: normal;
float: left;
}
.deck .card.summary-card .content .value {
color: #8BC34A;
font-size: 12px;
font-weight: normal;
float: right;
}
.deck .card.summary-card .content .ellipsis {
white-space: nowrap;
overflow: hidden;
-o-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
}
#keyframes rotate {
0% {
-moz-transform: rotateZ(0deg);
-ms-transform: rotateZ(0deg);
-o-transform: rotateZ(0deg);
-webkit-transform: rotateZ(0deg);
transform: rotateZ(0deg);
}
100% {
-moz-transform: rotateZ(360deg);
-ms-transform: rotateZ(360deg);
-o-transform: rotateZ(360deg);
-webkit-transform: rotateZ(360deg);
transform: rotateZ(360deg);
}
}
/* ripple effect from http://thecodeplayer.com/walkthrough/ripple-click-effect-google-material-design */
/*.ink styles - the elements which will create the ripple effect. The size and position of these elements will be set by the JS code. Initially these elements will be scaled down to 0% and later animated to large fading circles on user click.*/
.ink {
display: block;
position: absolute;
background: rgba(198, 198, 198, 0.5);
border-radius: 100%;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
/* animation effect */
.ink.animate {
-webkit-animation: ripple 0.65s linear;
-moz-animation: ripple 0.65s linear;
-o-animation: ripple 0.65s linear;
animation: ripple 0.65s linear;
}
#-webkit-keyframes ripple {
/*scale the element to 250% to safely cover the entire link and fade it out*/
100% {
opacity: 0;
-moz-transform: scale(2.5);
-ms-transform: scale(2.5);
-o-transform: scale(2.5);
-webkit-transform: scale(2.5);
transform: scale(2.5);
}
}
#-moz-keyframes ripple {
/*scale the element to 250% to safely cover the entire link and fade it out*/
100% {
opacity: 0;
-moz-transform: scale(2.5);
-ms-transform: scale(2.5);
-o-transform: scale(2.5);
-webkit-transform: scale(2.5);
transform: scale(2.5);
}
}
#keyframes ripple {
/*scale the element to 250% to safely cover the entire link and fade it out*/
100% {
opacity: 0;
-moz-transform: scale(2.5);
-ms-transform: scale(2.5);
-o-transform: scale(2.5);
-webkit-transform: scale(2.5);
transform: scale(2.5);
}
}
#-webkit-keyframes rotate {
0% {
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
100% {
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
#keyframes rotate {
0% {
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
50% {
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
100% {
-moz-transform: rotate(360deg);
-o-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
/* end of cards menu */
/* tooltips */
.dxc-tooltip {
z-index: 20;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="deck">
<div class="scrollable">
<div>
<div class="card summary-card string-card aggregate-card clickable filtered invalid" id="FI.NAM">
<div class="notification"></div> <span class="title" data-bind="text: name">Name</span>
</div>
</div>
<div>
<div class="card summary-card string-card aggregate-card clickable" id="FI.SER">
<div class="notification"></div> <span class="title" data-bind="text: name">Server Item</span>
</div>
</div>
<div>
<div class="card summary-card string-card aggregate-card clickable" id="FI.FIL">
<div class="notification"></div> <span class="title" data-bind="text: name">File Extension</span>
</div>
</div>
</div>
</div>

Rotate back div after the second click on it

I used CSS and Javascript in order to rotate a div after a click on it (from 0deg to 45deg). It's working good. I want the div to rotate back after a second click on it (from 45deg to 0deg), but nothing happens on the div... I didn't find more topics to fix this problem.
If you have any idea, it would be great ! Thanks.
Style
.home {
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
transition-property: transform;
}
.home.active {
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-o-transform:rotate(45deg);
}
Script
$(document).ready(function(){
$('.home').click(function(){
$('.home').removeClass('active');
$(this).addClass('active');
});
});

Try using toggleClass
$(document).ready(function(){
$('.home').click(function(){
$(this).toggleClass('active');
});
});

CSS3 can accomplish the transformation, See Firefox MDN Link for more info
HTML
<div class="description-wrapper">
<div class="category-desc-toggle rotate redbg"></div>
<div class="category-desc">REEED!</div>
</div>
<div class="description-wrapper">
<div class="category-desc-toggle bluebg rotate"></div>
<div class="category-desc">Blue</div>
</div>
<div class="description-wrapper">
<div class="category-desc-toggle yellowbg rotate"></div>
<div class="category-desc">Yellow Box</div>
</div>
Javascript
$(".description-wrapper").click(function() {
$(this).children('div.category-desc').slideToggle(300);
$(this).children('div.category-desc-toggle').toggleClass("rotate45");
});
CSS
.description-wrapper {
width: 80px;
text-align: center;
margin-bottom: 20px;
}
.redbg {
background-color: red;
}
.bluebg {
background-color: blue;
}
.yellowbg {
background-color: yellow;
}
.rotate {
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
-o-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg);
}
.rotate45 {
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-o-transform: rotate(45deg);
-moz-transform: rotate(45deg);
transform: rotate(45deg);
}
.category-desc-toggle {
width: 80px;
height: 75px;
-moz-transition: all .3s;
-webkit-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
}
Working Demo

dropzone js onclick submit file upload

upload all files with a single button click.
HTML:
<button id="submit-all">Submit all files</button>
<form action="/target" class="dropzone" id="my-dropzone"></form>
JS:
Dropzone.options.myDropzone = {
// Prevents Dropzone from uploading dropped files immediately
autoProcessQueue: false,
init: function() {
var submitButton = document.querySelector("#submit-all")
myDropzone = this; // closure
submitButton.addEventListener("click", function() {
myDropzone.processQueue(); // Tell Dropzone to process all queued files.
});
// You might want to show the submit button only when
// files are dropped here:
this.on("addedfile", function() {
// Show submit button here and/or inform user to click it.
});
}
};
But the file is upload after drag and drop..

use simple code
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone(element, {
url: "/upload.php",
autoProcessQueue: false,
});
$('#imgsubbutt').click(function(){
myDropzone.processQueue();
});

I accomplished this by placing my dropzone in a div instead of a form, thereby removing the ability for dropzone to automatically POST the uploads to a given URL. The URL I passed to the dropzone instance when I created it is literally 'dummy' since it will never be called. For example,
HTML
<button id="submit-all">Submit all files</button>
<div class="dropzone" id="my-dropzone"></div>
JavaScript
$('#submit-all').on('click', function() {
var files = $('#my-dropzone').get(0).dropzone.getAcceptedFiles();
// Do something with the files.
});

Here how i implement delayed uploading (initiated by click on any button, for an example):
Dropzone implementation
var count = 0;
var addedFilesHash = {};
var myDropzone = new Dropzone("#file_upload-form", {
paramName: "file", // The name that will be used to transfer the file
addRemoveLinks: true,
maxFilesize: 5, // MB
parallelUploads: 5,
uploadMultiple: true,
acceptedFiles: "image/*,.xlsx,.xls,.pdf,.doc,.docx",
maxFiles: 10,
init: function() {
this.on("removedfile", function (file) {
// delete from our dict removed file
delete addedFilesHash[file];
});
},
accept: function(file, done) {
var _id = count++;
file._id = _id;
addedFilesHash[_id] = done;
}
});
Somewhere else
// get all uploaded files in array
var addedFiles = Object.keys(addedFilesHash);
// iterate them
for (var i = 0; i< addedFiles.length; i++) {
// get file obj
var addedFile = addedFiles[i];
// get done function
var doneFile = addedFilesHash[addedFile];
// call done function to upload file to server
doneFile();
}
We override accept and removedFile functions. In accept function we collect file objects and done functions in dict where key is file and value is done function. Later in time, when we are ready to upload added files, we are iterating all done functions for all files in dict addedFilesHash which launches upload progress with progress bar and etc.

I got just finished messing around with this myself- I wanted to add information about the image to a database at the same time as uploading it. Dropping a file opens the input form for the extra info and then the queue needs sending after the form button is pressed.
I finally achieved this by putting a jquery click event handler inside the init 'on add file' function event:
this.on("addedfile", function(file){
var myDropzone = this;
$('#imageinfoCont').animate({left:'4.5%'});//brings form in
$('#imgsubbutt').click(function(){
$('#imageinfoCont').animate({left:'-10000px'}); //hides the form again
myDropzone.processQueue(); //processes the queue
});
});
I am then adding the extra data in a separate 'on sending' function event (could probably do it in the above code but baby steps I think).
Seems to work like a charm.

Although this has been answered, I ran into a situation where I only wanted to submit the queue IF it was a certain type of file. The bug I ran into was it was ignoring processQueue.
this.dropzone = new Dropzone('#my-dropzone', {
autoProcessQueue: false,
});
return this.dropzone.on('addedfile', (function(_this) {
return function(file) {
var IMAGE_EXTENSIONS, ext;
IMAGE_EXTENSIONS = 'png jpg jpeg gif'.split(' ');
ext = (_.last(file.name.split('.'))).toLowerCase();
if (_.include(IMAGE_EXTENSIONS, ext)) {
return console.log('IMAGE!');
} else {
return setTimeout(function() { // HERE!!!!!!!!!!!!!!!!!!!!
return _this.dropzone.processQueue();
}, 10);
}
};
})(this));
I had to use the setTimeout seen above because processQueue did nothing if I didn't defer it in this manner.

Working example
Dropzone.autoDiscover = false;
var myDropzone = new Dropzone('.dropzone-file', {
url: "https://keenthemes.com/scripts/void.php", // Set the url for your upload script location
paramName: "file", // The name that will be used to transfer the file
addRemoveLinks: true,
uploadMultiple: true,
autoProcessQueue: false,
});
$('.upload-files').on('click', function() {
var files = $('.dropzone-file').get(0).dropzone.getAcceptedFiles();
//upload bar
$('.dz-upload').addClass('dz-progress-bar');
// Do something with the files.
console.log(files)
});
.dropzone-file{
border: 1px dashed green;
padding: 1%;
text-align: center;
}
.dropzone-file:hover{
cursor:pointer;
background:whitesmoke;
}
#-webkit-keyframes passing-through {
0% {
opacity: 0;
-webkit-transform: translateY(40px);
-moz-transform: translateY(40px);
-ms-transform: translateY(40px);
-o-transform: translateY(40px);
transform: translateY(40px);
}
30%,
70% {
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
100% {
opacity: 0;
-webkit-transform: translateY(-40px);
-moz-transform: translateY(-40px);
-ms-transform: translateY(-40px);
-o-transform: translateY(-40px);
transform: translateY(-40px);
}
}
#-moz-keyframes passing-through {
0% {
opacity: 0;
-webkit-transform: translateY(40px);
-moz-transform: translateY(40px);
-ms-transform: translateY(40px);
-o-transform: translateY(40px);
transform: translateY(40px);
}
30%,
70% {
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
100% {
opacity: 0;
-webkit-transform: translateY(-40px);
-moz-transform: translateY(-40px);
-ms-transform: translateY(-40px);
-o-transform: translateY(-40px);
transform: translateY(-40px);
}
}
#keyframes passing-through {
0% {
opacity: 0;
-webkit-transform: translateY(40px);
-moz-transform: translateY(40px);
-ms-transform: translateY(40px);
-o-transform: translateY(40px);
transform: translateY(40px);
}
30%,
70% {
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
100% {
opacity: 0;
-webkit-transform: translateY(-40px);
-moz-transform: translateY(-40px);
-ms-transform: translateY(-40px);
-o-transform: translateY(-40px);
transform: translateY(-40px);
}
}
#-webkit-keyframes slide-in {
0% {
opacity: 0;
-webkit-transform: translateY(40px);
-moz-transform: translateY(40px);
-ms-transform: translateY(40px);
-o-transform: translateY(40px);
transform: translateY(40px);
}
30% {
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
}
#-moz-keyframes slide-in {
0% {
opacity: 0;
-webkit-transform: translateY(40px);
-moz-transform: translateY(40px);
-ms-transform: translateY(40px);
-o-transform: translateY(40px);
transform: translateY(40px);
}
30% {
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
}
#keyframes slide-in {
0% {
opacity: 0;
-webkit-transform: translateY(40px);
-moz-transform: translateY(40px);
-ms-transform: translateY(40px);
-o-transform: translateY(40px);
transform: translateY(40px);
}
30% {
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
-ms-transform: translateY(0px);
-o-transform: translateY(0px);
transform: translateY(0px);
}
}
#-webkit-keyframes pulse {
0% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
10% {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
20% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
}
#-moz-keyframes pulse {
0% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
10% {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
20% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
}
#keyframes pulse {
0% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
10% {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-ms-transform: scale(1.1);
-o-transform: scale(1.1);
transform: scale(1.1);
}
20% {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
}
.dropzone-file,
.dropzone-file * {
box-sizing: border-box;
}
.dropzone-file {
min-height: 150px;
border: 2px solid rgba(0, 0, 0, 0.3);
background: #fff;
padding: 20px 20px;
}
.dropzone-file.dz-clickable {
cursor: pointer;
}
.dropzone-file.dz-clickable * {
cursor: default;
}
.dropzone-file.dz-clickable .dz-message,
.dropzone-file.dz-clickable .dz-message * {
cursor: pointer;
}
.dropzone-file.dz-started .dz-message {
display: none;
}
.dropzone-file.dz-drag-hover {
border-style: solid;
}
.dropzone-file.dz-drag-hover .dz-message {
opacity: 0.5;
}
.dropzone-file .dz-message {
text-align: center;
margin: 2em 0;
}
.dropzone-file .dz-message .dz-button {
background: none;
color: inherit;
border: none;
padding: 0;
font: inherit;
cursor: pointer;
outline: inherit;
}
.dropzone-file .dz-preview {
position: relative;
display: inline-block;
vertical-align: top;
margin: 16px;
min-height: 100px;
}
.dropzone-file .dz-preview:hover {
z-index: 1000;
}
.dropzone-file .dz-preview:hover .dz-details {
opacity: 1;
}
.dropzone-file .dz-preview.dz-file-preview .dz-image {
border-radius: 20px;
background: #999;
background: linear-gradient(to bottom, #eee, #ddd);
}
.dropzone-file .dz-preview.dz-file-preview .dz-details {
opacity: 1;
}
.dropzone-file .dz-preview.dz-image-preview {
background: #fff;
}
.dropzone-file .dz-preview.dz-image-preview .dz-details {
-webkit-transition: opacity 0.2s linear;
-moz-transition: opacity 0.2s linear;
-ms-transition: opacity 0.2s linear;
-o-transition: opacity 0.2s linear;
transition: opacity 0.2s linear;
}
.dropzone-file .dz-preview .dz-remove {
font-size: 14px;
text-align: center;
display: block;
cursor: pointer;
border: none;
}
.dropzone-file .dz-preview .dz-remove:hover {
text-decoration: underline;
}
.dropzone-file .dz-preview:hover .dz-details {
opacity: 1;
}
.dropzone-file .dz-preview .dz-details {
z-index: 20;
position: absolute;
top: 0;
left: 0;
opacity: 0;
font-size: 13px;
min-width: 100%;
max-width: 100%;
padding: 2em 1em;
text-align: center;
color: rgba(0, 0, 0, 0.9);
line-height: 150%;
}
.dropzone-file .dz-preview .dz-details .dz-size {
margin-bottom: 1em;
font-size: 16px;
}
.dropzone-file .dz-preview .dz-details .dz-filename {
white-space: nowrap;
}
.dropzone-file .dz-preview .dz-details .dz-filename:hover span {
border: 1px solid rgba(200, 200, 200, 0.8);
background-color: rgba(255, 255, 255, 0.8);
}
.dropzone-file .dz-preview .dz-details .dz-filename:not(:hover) {
overflow: hidden;
text-overflow: ellipsis;
}
.dropzone-file .dz-preview .dz-details .dz-filename:not(:hover) span {
border: 1px solid transparent;
}
.dropzone-file .dz-preview .dz-details .dz-filename span,
.dropzone-file .dz-preview .dz-details .dz-size span {
background-color: rgba(255, 255, 255, 0.4);
padding: 0 0.4em;
border-radius: 3px;
}
.dropzone-file .dz-preview:hover .dz-image img {
-webkit-transform: scale(1.05, 1.05);
-moz-transform: scale(1.05, 1.05);
-ms-transform: scale(1.05, 1.05);
-o-transform: scale(1.05, 1.05);
transform: scale(1.05, 1.05);
-webkit-filter: blur(8px);
filter: blur(8px);
}
.dropzone-file .dz-preview .dz-image {
border-radius: 20px;
overflow: hidden;
width: 120px;
height: 120px;
position: relative;
display: block;
z-index: 10;
}
.dropzone-file .dz-preview .dz-image img {
display: block;
}
.dropzone-file .dz-preview.dz-success .dz-success-mark {
-webkit-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
-moz-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
-ms-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
-o-animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
animation: passing-through 3s cubic-bezier(0.77, 0, 0.175, 1);
}
.dropzone-file .dz-preview.dz-error .dz-error-mark {
opacity: 1;
-webkit-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
-moz-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
-ms-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
-o-animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
animation: slide-in 3s cubic-bezier(0.77, 0, 0.175, 1);
}
.dropzone-file .dz-preview .dz-success-mark,
.dropzone-file .dz-preview .dz-error-mark {
pointer-events: none;
opacity: 0;
z-index: 500;
position: absolute;
display: block;
top: 50%;
left: 50%;
margin-left: -27px;
margin-top: -27px;
}
.dropzone-file .dz-preview .dz-success-mark svg,
.dropzone-file .dz-preview .dz-error-mark svg {
display: block;
width: 54px;
height: 54px;
}
.dropzone-file .dz-preview.dz-processing .dz-progress {
opacity: 1;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-ms-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}
.dropzone-file .dz-preview.dz-complete .dz-progress {
opacity: 0;
-webkit-transition: opacity 0.4s ease-in;
-moz-transition: opacity 0.4s ease-in;
-ms-transition: opacity 0.4s ease-in;
-o-transition: opacity 0.4s ease-in;
transition: opacity 0.4s ease-in;
}
.dropzone-file .dz-preview:not(.dz-processing) .dz-progress {
-webkit-animation: pulse 6s ease infinite;
-moz-animation: pulse 6s ease infinite;
-ms-animation: pulse 6s ease infinite;
-o-animation: pulse 6s ease infinite;
animation: pulse 6s ease infinite;
}
.dropzone-file .dz-preview .dz-progress {
opacity: 1;
z-index: 1000;
pointer-events: none;
position: absolute;
height: 16px;
left: 50%;
top: 50%;
margin-top: -8px;
width: 80px;
margin-left: -40px;
background: rgba(255, 255, 255, 0.9);
-webkit-transform: scale(1);
border-radius: 8px;
overflow: hidden;
}
.dropzone-file .dz-preview .dz-progress .dz-upload {
background: #333;
background: linear-gradient(to bottom, #666, #444);
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 0;
-webkit-transition: width 300ms ease-in-out;
-moz-transition: width 300ms ease-in-out;
-ms-transition: width 300ms ease-in-out;
-o-transition: width 300ms ease-in-out;
transition: width 300ms ease-in-out;
}
.dropzone-file .dz-preview.dz-error .dz-error-message {
display: block;
}
.dropzone-file .dz-preview.dz-error:hover .dz-error-message {
opacity: 1;
pointer-events: auto;
}
.dropzone-file .dz-preview .dz-error-message {
pointer-events: none;
z-index: 1000;
position: absolute;
display: block;
display: none;
opacity: 0;
-webkit-transition: opacity 0.3s ease;
-moz-transition: opacity 0.3s ease;
-ms-transition: opacity 0.3s ease;
-o-transition: opacity 0.3s ease;
transition: opacity 0.3s ease;
border-radius: 8px;
font-size: 13px;
top: 130px;
left: -10px;
width: 140px;
background: #be2626;
background: linear-gradient(to bottom, #be2626, #a92222);
padding: 0.5em 1.2em;
color: #fff;
}
.dropzone-file .dz-preview .dz-error-message:after {
content: "";
position: absolute;
top: -6px;
left: 64px;
width: 0;
height: 0;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #be2626;
}
.dz-progress-bar {
width: 0;
animation: progress 1.5s ease-in-out forwards;
}
#keyframes progress {
from {
width: 0;
}
to {
width: 100%;
}
}
#keyframes show {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://unpkg.com/dropzone#5/dist/min/dropzone.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/dropzone#5/dist/min/dropzone.min.css" type="text/css" />
<!--begin::Dropzone-->
<div class="dropzone-file fileuploader">
<!--begin::Message-->
<div class="dz-message needsclick">
<!--begin::Icon-->
<i class="bi bi-file-earmark-arrow-up text-primary fs-3x"></i>
<!--end::Icon-->
<!--begin::Info-->
<div class="ms-4">
<h3 class="fs-5 fw-bolder text-gray-900 mb-1">Drop files here or click to upload.</h3>
<span class="fs-7 fw-bold text-gray-400">Upload any kind of files</span>
</div>
<!--end::Info-->
</div>
</div>
<!--end::Dropzone-->
<button class='upload-files'>Upload Files</button>