notid/integreat
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

animates with shake

Browse Source
This commit is contained in:
Bryce
2023-10-21 20:08:08 -07:00
parent 34f4a12b2e
commit 998d29690e
4 changed files with 178 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files

215
resources/public/output.css
View File

@@ -1147,14 +1147,14 @@ input:checked + .toggle-bg {
grid-column-start: 1;
}
.m-4 {
margin: 1rem;
}
.m-1 {
margin: 0.25rem;
}
.m-4 {
margin: 1rem;
}
.mx-2 {
margin-left: 0.5rem;
margin-right: 0.5rem;
@@ -1180,6 +1180,14 @@ input:checked + .toggle-bg {
margin-bottom: 1rem;
}
.\!mt-0 {
margin-top: 0px !important;
}
.\!mt-1 {
margin-top: 0.25rem !important;
}
.-mb-1 {
margin-bottom: -0.25rem;
}
@@ -1260,26 +1268,6 @@ input:checked + .toggle-bg {
margin-top: 1.25rem;
}
.\!mt-0 {
margin-top: 0px !important;
}
.\!mt-3 {
margin-top: 0.75rem !important;
}
.mt-3 {
margin-top: 0.75rem;
}
.\!mt-1 {
margin-top: 0.25rem !important;
}
.ml-64 {
margin-left: 16rem;
}
.block {
display: block;
}
@@ -1352,10 +1340,6 @@ input:checked + .toggle-bg {
height: 24rem;
}
.h-\[calc\(100\%-1rem\)\] {
height: calc(100% - 1rem);
}
.h-full {
height: 100%;
}
@@ -1428,14 +1412,14 @@ input:checked + .toggle-bg {
width: 24rem;
}
.w-full {
width: 100%;
}
.w-auto {
width: auto;
}
.w-full {
width: 100%;
}
.w-max {
width: -moz-max-content;
width: max-content;
@@ -1497,6 +1481,16 @@ input:checked + .toggle-bg {
flex-basis: 25%;
}
.\!translate-y-0 {
--tw-translate-y: 0px !important;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
}
.\!translate-y-32 {
--tw-translate-y: 8rem !important;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
}
.-translate-x-1\/2 {
--tw-translate-x: -50%;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1532,16 +1526,6 @@ input:checked + .toggle-bg {
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.\!translate-y-0 {
--tw-translate-y: 0px !important;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
}
.\!translate-y-32 {
--tw-translate-y: 8rem !important;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)) !important;
}
.rotate-180 {
--tw-rotate: 180deg;
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1565,6 +1549,48 @@ input:checked + .toggle-bg {
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}
@keyframes shake {
0% {
transform: translateX(0px);
}
12.5% {
transform: translateX(-5px);
}
25% {
transform: translateX(0px);
}
37.5% {
transform: translateX(5px);
}
50% {
transform: translateX(0px);
}
62.5% {
transform: translateX(-5px);
}
75% {
transform: translateX(5px);
}
87.5% {
transform: translateX(5px);
}
100% {
transform: translateX(0px);
}
}
.animate-shake {
animation: shake 0.5s ease-out 1;
}
@keyframes spin {
to {
transform: rotate(360deg);
@@ -1773,26 +1799,10 @@ input:checked + .toggle-bg {
border-color: rgb(243 244 246 / var(--tw-divide-opacity));
}
.place-self-start {
place-self: start;
}
.place-self-end {
place-self: end;
}
.self-start {
align-self: flex-start;
}
.self-center {
align-self: center;
}
.justify-self-start {
justify-self: start;
}
.justify-self-end {
justify-self: end;
}
@@ -1817,10 +1827,6 @@ input:checked + .toggle-bg {
overflow-y: auto;
}
.overflow-x-hidden {
overflow-x: hidden;
}
.truncate {
overflow: hidden;
text-overflow: ellipsis;
@@ -2094,15 +2100,6 @@ input:checked + .toggle-bg {
background-color: rgb(253 246 178 / var(--tw-bg-opacity));
}
.bg-gray-300 {
--tw-bg-opacity: 1;
background-color: rgb(209 213 219 / var(--tw-bg-opacity));
}
.bg-opacity-50 {
--tw-bg-opacity: 0.5;
}
.\!bg-opacity-0 {
--tw-bg-opacity: 0 !important;
}
@@ -2115,10 +2112,18 @@ input:checked + .toggle-bg {
--tw-bg-opacity: 0.5 !important;
}
.bg-opacity-50 {
--tw-bg-opacity: 0.5;
}
.p-1 {
padding: 0.25rem;
}
.p-12 {
padding: 3rem;
}
.p-2 {
padding: 0.5rem;
}
@@ -2139,10 +2144,6 @@ input:checked + .toggle-bg {
padding: 1.5rem;
}
.p-12 {
padding: 3rem;
}
.px-2 {
padding-left: 0.5rem;
padding-right: 0.5rem;
@@ -2426,23 +2427,10 @@ input:checked + .toggle-bg {
color: rgb(114 59 19 / var(--tw-text-opacity));
}
.text-gray-200 {
--tw-text-opacity: 1;
color: rgb(229 231 235 / var(--tw-text-opacity));
}
.underline {
text-decoration-line: underline;
}
.opacity-0 {
opacity: 0;
}
.opacity-100 {
opacity: 1;
}
.\!opacity-0 {
opacity: 0 !important;
}
@@ -2451,6 +2439,14 @@ input:checked + .toggle-bg {
opacity: 1 !important;
}
.opacity-0 {
opacity: 0;
}
.opacity-100 {
opacity: 1;
}
.shadow {
--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
@@ -2528,6 +2524,10 @@ input:checked + .toggle-bg {
transition-duration: 100ms;
}
.duration-200 {
transition-duration: 200ms;
}
.duration-300 {
transition-duration: 300ms;
}
@@ -2540,8 +2540,8 @@ input:checked + .toggle-bg {
transition-duration: 75ms;
}
.duration-200 {
transition-duration: 200ms;
.ease-\[cubic-bezier\(\.3\2c 2\.3\2c \.6\2c 1\)\] {
transition-timing-function: cubic-bezier(.3,2.3,.6,1);
}
.ease-in-out {
@@ -2552,10 +2552,6 @@ input:checked + .toggle-bg {
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
}
.ease-\[cubic-bezier\(\.3\2c 2\.3\2c \.6\2c 1\)\] {
transition-timing-function: cubic-bezier(.3,2.3,.6,1);
}
.htmx-added .fade-in {
opacity: 0.0 !important;
}
@@ -2984,6 +2980,11 @@ input:checked + .toggle-bg {
background-color: rgb(73 109 28 / var(--tw-bg-opacity));
}
.hover\:bg-neutral-100:hover {
--tw-bg-opacity: 1;
background-color: rgb(245 245 245 / var(--tw-bg-opacity));
}
.hover\:bg-primary-100:hover {
--tw-bg-opacity: 1;
background-color: rgb(228 240 213 / var(--tw-bg-opacity));
@@ -2999,11 +3000,6 @@ input:checked + .toggle-bg {
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.hover\:bg-neutral-100:hover {
--tw-bg-opacity: 1;
background-color: rgb(245 245 245 / var(--tw-bg-opacity));
}
.hover\:text-blue-600:hover {
--tw-text-opacity: 1;
color: rgb(0 125 187 / var(--tw-text-opacity));
@@ -3547,18 +3543,10 @@ input:checked + .toggle-bg {
display: block;
}
.sm\:max-h-\[80vh\] {
max-height: 80vh;
}
.sm\:max-h-\[90vh\] {
max-height: 90vh;
}
.sm\:max-w-4xl {
max-width: 56rem;
}
.sm\:max-w-2xl {
max-width: 42rem;
}
@@ -3583,10 +3571,6 @@ input:checked + .toggle-bg {
}
@media (min-width: 768px) {
.md\:inset-0 {
inset: 0px;
}
.md\:ml-2 {
margin-left: 0.5rem;
}
@@ -3688,9 +3672,9 @@ input:checked + .toggle-bg {
}
}
.\[\&\.active\]\:bg-red-500.active {
.\[\&\.active\]\:bg-primary-300.active {
--tw-bg-opacity: 1;
background-color: rgb(255 3 3 / var(--tw-bg-opacity));
background-color: rgb(175 211 130 / var(--tw-bg-opacity));
}
.\[\&\.active\]\:bg-primary-500.active {
@@ -3698,11 +3682,6 @@ input:checked + .toggle-bg {
background-color: rgb(121 181 46 / var(--tw-bg-opacity));
}
.\[\&\.active\]\:bg-primary-300.active {
--tw-bg-opacity: 1;
background-color: rgb(175 211 130 / var(--tw-bg-opacity));
}
:is(.dark .\[\&\.active\]\:dark\:bg-primary-700).active {
--tw-bg-opacity: 1;
background-color: rgb(73 109 28 / var(--tw-bg-opacity));