Update
This commit is contained in:
10
package-lock.json
generated
10
package-lock.json
generated
@@ -74,7 +74,6 @@
|
||||
"sonner": "^2.0.5",
|
||||
"tailwind-merge": "^3.0.1",
|
||||
"tailwindcss": "^4.0.0",
|
||||
"tailwindcss-animate": "^1.0.7",
|
||||
"typescript": "^5.7.2",
|
||||
"vaul": "^1.1.2",
|
||||
"vite": "^6.0",
|
||||
@@ -8333,15 +8332,6 @@
|
||||
"integrity": "sha512-P3nr6WkvKV/ONsTzj6Gb57sWPMX29EPNPopo7+FcpkQaNsrNpZ1pv8QmrYI2RqEKD7mlGqLnGovlcYnBK0IqUA==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/tailwindcss-animate": {
|
||||
"version": "1.0.7",
|
||||
"resolved": "https://registry.npmjs.org/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz",
|
||||
"integrity": "sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"tailwindcss": ">=3.0.0 || insiders"
|
||||
}
|
||||
},
|
||||
"node_modules/tapable": {
|
||||
"version": "2.2.2",
|
||||
"resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.2.tgz",
|
||||
|
||||
@@ -93,7 +93,6 @@
|
||||
"sonner": "^2.0.5",
|
||||
"tailwind-merge": "^3.0.1",
|
||||
"tailwindcss": "^4.0.0",
|
||||
"tailwindcss-animate": "^1.0.7",
|
||||
"typescript": "^5.7.2",
|
||||
"vaul": "^1.1.2",
|
||||
"vite": "^6.0",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
@import 'tailwindcss';
|
||||
|
||||
@plugin 'tailwindcss-animate';
|
||||
/* @plugin 'tailwindcss-animate'; */
|
||||
|
||||
@source '../views';
|
||||
@source '../../vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php';
|
||||
@@ -96,6 +96,96 @@ @layer base {
|
||||
height: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeOut {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideInFromRight {
|
||||
from {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
to {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideOutToRight {
|
||||
from {
|
||||
transform: translateX(0);
|
||||
}
|
||||
to {
|
||||
transform: translateX(100%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideInFromLeft {
|
||||
from {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
to {
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideOutToLeft {
|
||||
from {
|
||||
transform: translateX(0);
|
||||
}
|
||||
to {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideInFromTop {
|
||||
from {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideOutToTop {
|
||||
from {
|
||||
transform: translateY(0);
|
||||
}
|
||||
to {
|
||||
transform: translateY(-100%);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideInFromBottom {
|
||||
from {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
to {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideOutToBottom {
|
||||
from {
|
||||
transform: translateY(0);
|
||||
}
|
||||
to {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@utility animate-accordion-down {
|
||||
@@ -106,6 +196,67 @@ @utility animate-accordion-up {
|
||||
animation: accordion-up 0.2s ease-out;
|
||||
}
|
||||
|
||||
/* Shadcn animation utilities */
|
||||
@utility animate-in {
|
||||
animation-name: fadeIn, slideIn;
|
||||
animation-duration: 0.2s;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
@utility animate-out {
|
||||
animation-name: fadeOut, slideOut;
|
||||
animation-duration: 0.2s;
|
||||
animation-fill-mode: both;
|
||||
}
|
||||
|
||||
@utility fade-in-0 {
|
||||
animation-name: fadeIn;
|
||||
}
|
||||
|
||||
@utility fade-out-0 {
|
||||
animation-name: fadeOut;
|
||||
}
|
||||
|
||||
@utility slide-in-from-right {
|
||||
animation-name: slideInFromRight;
|
||||
}
|
||||
|
||||
@utility slide-out-to-right {
|
||||
animation-name: slideOutToRight;
|
||||
}
|
||||
|
||||
@utility slide-in-from-left {
|
||||
animation-name: slideInFromLeft;
|
||||
}
|
||||
|
||||
@utility slide-out-to-left {
|
||||
animation-name: slideOutToLeft;
|
||||
}
|
||||
|
||||
@utility slide-in-from-top {
|
||||
animation-name: slideInFromTop;
|
||||
}
|
||||
|
||||
@utility slide-out-to-top {
|
||||
animation-name: slideOutToTop;
|
||||
}
|
||||
|
||||
@utility slide-in-from-bottom {
|
||||
animation-name: slideInFromBottom;
|
||||
}
|
||||
|
||||
@utility slide-out-to-bottom {
|
||||
animation-name: slideOutToBottom;
|
||||
}
|
||||
|
||||
@utility duration-300 {
|
||||
animation-duration: 300ms;
|
||||
}
|
||||
|
||||
@utility duration-500 {
|
||||
animation-duration: 500ms;
|
||||
}
|
||||
|
||||
:root {
|
||||
--background: oklch(1 0 0);
|
||||
--foreground: oklch(0.145 0 0);
|
||||
|
||||
@@ -56,7 +56,7 @@ function SheetContent({
|
||||
<SheetPrimitive.Content
|
||||
data-slot="sheet-content"
|
||||
className={cn(
|
||||
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
|
||||
"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg data-[state=closed]:duration-300 data-[state=open]:duration-500",
|
||||
side === "right" &&
|
||||
"data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
|
||||
side === "left" &&
|
||||
|
||||
@@ -225,12 +225,12 @@ export default function TextSidebar({ isOpen, onClose }) {
|
||||
color: fillColor,
|
||||
textShadow:
|
||||
strokeWidth > 0
|
||||
? `
|
||||
-${strokeWidth * 0.6}px -${strokeWidth * 0.6}px 0 ${strokeColor},
|
||||
${strokeWidth * 0.6}px -${strokeWidth * 0.6}px 0 ${strokeColor},
|
||||
-${strokeWidth * 0.6}px ${strokeWidth * 0.6}px 0 ${strokeColor},
|
||||
${strokeWidth * 0.6}px ${strokeWidth * 0.6}px 0 ${strokeColor}
|
||||
`
|
||||
? Array.from({ length: 10 }, (_, i) => {
|
||||
const angle = (i * Math.PI * 2) / 8;
|
||||
const x = Math.cos(angle) * strokeWidth * 0.6;
|
||||
const y = Math.sin(angle) * strokeWidth * 0.6;
|
||||
return `${x.toFixed(1)}px ${y.toFixed(1)}px 0 ${strokeColor}`;
|
||||
}).join(', ')
|
||||
: 'none',
|
||||
}}
|
||||
/>
|
||||
|
||||
Reference in New Issue
Block a user