This commit is contained in:
ct
2025-07-08 04:32:04 +08:00
parent 6bf69ef366
commit a0cbe192e7
5 changed files with 159 additions and 19 deletions

10
package-lock.json generated
View File

@@ -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",

View File

@@ -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",

View File

@@ -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);

View File

@@ -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" &&

View File

@@ -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',
}}
/>