Files
dolibarr/htdocs/admin/tools/ui/experimental/experiments/input-feedback/assets/feddback-01.css
John BOTELLA fc34a12e30 UIUX : Giff UX Doc : add experiment ux ajax input feedback (#33661)
* New experiment Tooltip freeze

* fix tooltip ception

* clean

* New giff experimental input feedback

* New giff experimental input feedback

---------

Co-authored-by: Laurent Destailleur <eldy@destailleur.fr>
2025-03-31 12:01:00 +02:00

49 lines
985 B
CSS

.processing-feedback {
background-size: 30px 30px !important;
background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.05) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.05) 50%, rgba(0, 0, 0, 0.05) 75%, transparent 75%, transparent) !important;
animation: input-background-loader 0.5s linear infinite;
}
@keyframes input-background-loader {
from {
background-position: 0 0;
}
to {
background-position: 60px 30px;
}
}
.success-feedback{
animation: 1s ease-out success-feedback-animation;
}
@-webkit-keyframes success-feedback-animation {
0% {
outline: 3px solid rgba(255, 255, 255, 0);
}
20% {
outline: 3px solid #8cd55b;
}
100% {
outline: 3px solid rgba(255, 255, 255, 0);
}
}
.fail-feedback {
animation: 1s ease-out fail-feedback-animation;
}
@-webkit-keyframes fail-feedback-animation {
0% {
outline: 3px solid rgba(255, 255, 255, 0);
}
20% {
outline: 3px solid #d55b5b;
}
100% {
outline: 3px solid rgba(255, 255, 255, 0);
}
}