elementdrawing 1.0.0

package/src/css/utilities.css

@@ -0,0 +1,475 @@
+/*
+ * ElementDrawing Framework - Utilities CSS
+ * Custom utility classes: scrollbar, selection, glass-morphism, gradient text,
+ * text truncate, aspect ratio, grid helpers, spacing, borders, shadows,
+ * transitions, and responsive helpers.
+ *
+ * @version 1.0.0
+ * @license MIT
+ */
+
+/* ─── Scrollbar Utilities ──────────────────────────────────────────────────── */
+
+.ed-scrollbar-thin {
+  scrollbar-width: thin;
+}
+
+.ed-scrollbar-thin::-webkit-scrollbar {
+  width: 6px;
+  height: 6px;
+}
+
+.ed-scrollbar-none {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.ed-scrollbar-none::-webkit-scrollbar {
+  display: none;
+}
+
+.ed-scrollbar-auto {
+  scrollbar-width: auto;
+}
+
+.ed-scrollbar-auto::-webkit-scrollbar {
+  width: auto;
+  height: auto;
+}
+
+.ed-scrollbar-track-transparent::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.ed-scrollbar-thumb-rounded::-webkit-scrollbar-thumb {
+  border-radius: 9999px;
+}
+
+/* ─── Selection Utilities ──────────────────────────────────────────────────── */
+
+.ed-select-none {
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.ed-select-text {
+  user-select: text;
+  -webkit-user-select: text;
+}
+
+.ed-select-all {
+  user-select: all;
+  -webkit-user-select: all;
+}
+
+.ed-select-auto {
+  user-select: auto;
+  -webkit-user-select: auto;
+}
+
+.ed-select-contain {
+  user-select: contain;
+  -webkit-user-select: contain;
+}
+
+/* ─── Glass Morphism Utilities ─────────────────────────────────────────────── */
+
+.ed-glass {
+  background: rgba(255, 255, 255, 0.15);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.ed-glass-dark {
+  background: rgba(0, 0, 0, 0.25);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.ed-glass-strong {
+  background: rgba(255, 255, 255, 0.3);
+  backdrop-filter: blur(20px) saturate(180%);
+  -webkit-backdrop-filter: blur(20px) saturate(180%);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+.ed-glass-subtle {
+  background: rgba(255, 255, 255, 0.08);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  border: 1px solid rgba(255, 255, 255, 0.12);
+}
+
+.ed-glass-colored {
+  background: rgba(59, 130, 246, 0.15);
+  backdrop-filter: blur(12px) saturate(150%);
+  -webkit-backdrop-filter: blur(12px) saturate(150%);
+  border: 1px solid rgba(59, 130, 246, 0.25);
+}
+
+.ed-glass-no-border {
+  background: rgba(255, 255, 255, 0.15);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: none;
+}
+
+.ed-blur-sm { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
+.ed-blur { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
+.ed-blur-md { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
+.ed-blur-lg { backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
+.ed-blur-xl { backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); }
+.ed-blur-none { backdrop-filter: none; -webkit-backdrop-filter: none; }
+
+/* ─── Gradient Text Utilities ──────────────────────────────────────────────── */
+
+.ed-gradient-text {
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.ed-gradient-text-primary {
+  background-image: linear-gradient(135deg, #3b82f6, #8b5cf6);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.ed-gradient-text-success {
+  background-image: linear-gradient(135deg, #22c55e, #14b8a6);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.ed-gradient-text-warning {
+  background-image: linear-gradient(135deg, #f59e0b, #ef4444);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.ed-gradient-text-danger {
+  background-image: linear-gradient(135deg, #ef4444, #ec4899);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.ed-gradient-text-info {
+  background-image: linear-gradient(135deg, #0ea5e9, #6366f1);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.ed-gradient-text-rainbow {
+  background-image: linear-gradient(90deg, #ef4444, #f59e0b, #22c55e, #3b82f6, #8b5cf6);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+/* ─── Text Truncate Utilities ──────────────────────────────────────────────── */
+
+.ed-truncate {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ed-line-clamp-1 {
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.ed-line-clamp-2 {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.ed-line-clamp-3 {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.ed-line-clamp-4 {
+  display: -webkit-box;
+  -webkit-line-clamp: 4;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.ed-line-clamp-5 {
+  display: -webkit-box;
+  -webkit-line-clamp: 5;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.ed-line-clamp-none {
+  -webkit-line-clamp: unset;
+  display: block;
+  overflow: visible;
+}
+
+/* ─── Aspect Ratio Utilities ───────────────────────────────────────────────── */
+
+.ed-aspect-square { aspect-ratio: 1 / 1; }
+.ed-aspect-video { aspect-ratio: 16 / 9; }
+.ed-aspect-photo { aspect-ratio: 4 / 3; }
+.ed-aspect-wide { aspect-ratio: 21 / 9; }
+.ed-aspect-golden { aspect-ratio: 1.618 / 1; }
+.ed-aspect-portrait { aspect-ratio: 3 / 4; }
+.ed-aspect-auto { aspect-ratio: auto; }
+
+/* ─── Grid Helpers ─────────────────────────────────────────────────────────── */
+
+.ed-grid {
+  display: grid;
+  gap: 1rem;
+}
+
+.ed-grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
+.ed-grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
+.ed-grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
+.ed-grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
+.ed-grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
+.ed-grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
+.ed-grid-cols-12 { grid-template-columns: repeat(12, minmax(0, 1fr)); }
+
+.ed-grid-auto-fill {
+  grid-template-columns: repeat(auto-fill, minmax(var(--ed-grid-min, 15rem), 1fr));
+}
+
+.ed-grid-auto-fit {
+  grid-template-columns: repeat(auto-fit, minmax(var(--ed-grid-min, 15rem), 1fr));
+}
+
+.ed-grid-flow-col { grid-auto-flow: column; }
+.ed-grid-flow-dense { grid-auto-flow: dense; }
+
+.ed-col-span-1 { grid-column: span 1 / span 1; }
+.ed-col-span-2 { grid-column: span 2 / span 2; }
+.ed-col-span-3 { grid-column: span 3 / span 3; }
+.ed-col-span-4 { grid-column: span 4 / span 4; }
+.ed-col-span-6 { grid-column: span 6 / span 6; }
+.ed-col-span-full { grid-column: 1 / -1; }
+
+.ed-row-span-1 { grid-row: span 1 / span 1; }
+.ed-row-span-2 { grid-row: span 2 / span 2; }
+.ed-row-span-3 { grid-row: span 3 / span 3; }
+.ed-row-span-full { grid-row: 1 / -1; }
+
+/* ─── Spacing Utilities ────────────────────────────────────────────────────── */
+
+.ed-gap-xs { gap: 0.25rem; }
+.ed-gap-sm { gap: 0.5rem; }
+.ed-gap-md { gap: 1rem; }
+.ed-gap-lg { gap: 1.5rem; }
+.ed-gap-xl { gap: 2rem; }
+.ed-gap-2xl { gap: 3rem; }
+
+.ed-p-xs { padding: 0.25rem; }
+.ed-p-sm { padding: 0.5rem; }
+.ed-p-md { padding: 1rem; }
+.ed-p-lg { padding: 1.5rem; }
+.ed-p-xl { padding: 2rem; }
+.ed-p-2xl { padding: 3rem; }
+
+.ed-m-xs { margin: 0.25rem; }
+.ed-m-sm { margin: 0.5rem; }
+.ed-m-md { margin: 1rem; }
+.ed-m-lg { margin: 1.5rem; }
+.ed-m-xl { margin: 2rem; }
+.ed-m-auto { margin: auto; }
+
+.ed-mx-auto { margin-left: auto; margin-right: auto; }
+
+.ed-space-y-xs > * + * { margin-top: 0.25rem; }
+.ed-space-y-sm > * + * { margin-top: 0.5rem; }
+.ed-space-y-md > * + * { margin-top: 1rem; }
+.ed-space-y-lg > * + * { margin-top: 1.5rem; }
+.ed-space-y-xl > * + * { margin-top: 2rem; }
+
+.ed-space-x-xs > * + * { margin-left: 0.25rem; }
+.ed-space-x-sm > * + * { margin-left: 0.5rem; }
+.ed-space-x-md > * + * { margin-left: 1rem; }
+.ed-space-x-lg > * + * { margin-left: 1.5rem; }
+.ed-space-x-xl > * + * { margin-left: 2rem; }
+
+/* ─── Border Utilities ─────────────────────────────────────────────────────── */
+
+.ed-border { border: 1px solid var(--ed-border-primary); }
+.ed-border-0 { border: 0; }
+.ed-border-t { border-top: 1px solid var(--ed-border-primary); }
+.ed-border-b { border-bottom: 1px solid var(--ed-border-primary); }
+.ed-border-l { border-left: 1px solid var(--ed-border-primary); }
+.ed-border-r { border-right: 1px solid var(--ed-border-primary); }
+
+.ed-border-primary { border-color: var(--ed-primary-500); }
+.ed-border-success { border-color: var(--ed-success-500); }
+.ed-border-warning { border-color: var(--ed-warning-500); }
+.ed-border-danger { border-color: var(--ed-danger-500); }
+
+.ed-rounded-none { border-radius: 0; }
+.ed-rounded-sm { border-radius: 0.25rem; }
+.ed-rounded { border-radius: 0.375rem; }
+.ed-rounded-md { border-radius: 0.5rem; }
+.ed-rounded-lg { border-radius: 0.75rem; }
+.ed-rounded-xl { border-radius: 1rem; }
+.ed-rounded-2xl { border-radius: 1.5rem; }
+.ed-rounded-full { border-radius: 9999px; }
+
+/* ─── Shadow Utilities ─────────────────────────────────────────────────────── */
+
+.ed-shadow-none { box-shadow: none; }
+.ed-shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
+.ed-shadow { box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1); }
+.ed-shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); }
+.ed-shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); }
+.ed-shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); }
+.ed-shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }
+.ed-shadow-inner { box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06); }
+
+.ed-shadow-primary { box-shadow: 0 4px 14px 0 rgba(59, 130, 246, 0.35); }
+.ed-shadow-success { box-shadow: 0 4px 14px 0 rgba(34, 197, 94, 0.35); }
+.ed-shadow-danger { box-shadow: 0 4px 14px 0 rgba(239, 68, 68, 0.35); }
+
+/* ─── Transition Utilities ─────────────────────────────────────────────────── */
+
+.ed-transition-none { transition: none; }
+.ed-transition-all { transition: all 250ms ease; }
+.ed-transition-colors { transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease; }
+.ed-transition-opacity { transition: opacity 200ms ease; }
+.ed-transition-transform { transition: transform 200ms ease; }
+.ed-transition-shadow { transition: box-shadow 200ms ease; }
+.ed-transition-fast { transition-duration: 150ms; }
+.ed-transition-normal { transition-duration: 250ms; }
+.ed-transition-slow { transition-duration: 350ms; }
+.ed-transition-slower { transition-duration: 500ms; }
+
+.ed-ease-linear { transition-timing-function: linear; }
+.ed-ease-in { transition-timing-function: cubic-bezier(0.4, 0, 1, 1); }
+.ed-ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
+.ed-ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }
+.ed-ease-spring { transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275); }
+.ed-ease-bounce { transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55); }
+
+/* ─── Responsive Helpers ───────────────────────────────────────────────────── */
+
+.ed-container {
+  width: 100%;
+  max-width: var(--ed-container-xl, 1280px);
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.ed-container-sm { max-width: var(--ed-container-sm, 640px); }
+.ed-container-md { max-width: var(--ed-container-md, 768px); }
+.ed-container-lg { max-width: var(--ed-container-lg, 1024px); }
+.ed-container-xl { max-width: var(--ed-container-xl, 1280px); }
+.ed-container-2xl { max-width: var(--ed-container-2xl, 1536px); }
+
+.ed-hide-scrollbar {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
+}
+
+.ed-hide-scrollbar::-webkit-scrollbar {
+  display: none;
+}
+
+.ed-sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border-width: 0;
+}
+
+.ed-not-sr-only {
+  position: static;
+  width: auto;
+  height: auto;
+  padding: 0;
+  margin: 0;
+  overflow: visible;
+  clip: auto;
+  white-space: normal;
+}
+
+/* Responsive visibility */
+.ed-hidden-mobile { display: none; }
+.ed-visible-mobile { display: initial; }
+.ed-hidden-tablet { display: none; }
+.ed-visible-tablet { display: initial; }
+.ed-hidden-desktop { display: none; }
+.ed-visible-desktop { display: initial; }
+
+@media (min-width: 640px) {
+  .ed-hidden-mobile { display: initial; }
+  .ed-visible-mobile { display: none; }
+}
+
+@media (min-width: 768px) {
+  .ed-hidden-tablet { display: initial; }
+  .ed-visible-tablet { display: none; }
+}
+
+@media (min-width: 1024px) {
+  .ed-hidden-desktop { display: initial; }
+  .ed-visible-desktop { display: none; }
+}
+
+/* ─── Overflow Utilities ───────────────────────────────────────────────────── */
+
+.ed-overflow-hidden { overflow: hidden; }
+.ed-overflow-auto { overflow: auto; }
+.ed-overflow-x-auto { overflow-x: auto; }
+.ed-overflow-y-auto { overflow-y: auto; }
+.ed-overflow-clip { overflow: clip; }
+
+/* ─── Z-Index Utilities ────────────────────────────────────────────────────── */
+
+.ed-z-0 { z-index: 0; }
+.ed-z-10 { z-index: 10; }
+.ed-z-20 { z-index: 20; }
+.ed-z-30 { z-index: 30; }
+.ed-z-40 { z-index: 40; }
+.ed-z-50 { z-index: 50; }
+.ed-z-auto { z-index: auto; }
+.ed-z-dropdown { z-index: var(--ed-z-dropdown, 1000); }
+.ed-z-sticky { z-index: var(--ed-z-sticky, 1020); }
+.ed-z-fixed { z-index: var(--ed-z-fixed, 1030); }
+.ed-z-modal { z-index: var(--ed-z-modal, 1050); }
+.ed-z-popover { z-index: var(--ed-z-popover, 1060); }
+.ed-z-tooltip { z-index: var(--ed-z-tooltip, 1070); }
+.ed-z-toast { z-index: var(--ed-z-toast, 1080); }
+
+/* ─── Pointer Events ──────────────────────────────────────────────────────── */
+
+.ed-pointer-events-none { pointer-events: none; }
+.ed-pointer-events-auto { pointer-events: auto; }
+
+/* ─── Resize Utilities ─────────────────────────────────────────────────────── */
+
+.ed-resize-none { resize: none; }
+.ed-resize-y { resize: vertical; }
+.ed-resize-x { resize: horizontal; }
+.ed-resize-both { resize: both; }