EaseMotion-css/easemotion.css at main · SAPTARSHI-coder/EaseMotion-css · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
/* ============================================================
   EaseMotion CSS — easemotion.css
   Single entry point. Import this one file to use the entire
   framework. Order matters: variables must load first.
   ============================================================

   Usage:
     <link rel="stylesheet" href="easemotion.css" />

   Or in CSS:
     @import "easemotion.css";

   ============================================================ */

/* ── Cascade Layers ──────────────────────────────────────── */

/* Unique names prefixed with 'easemotion-' to avoid cascade
   conflicts with other frameworks using generic @layer names. */
@layer easemotion-base, easemotion-components, easemotion-utilities;

/* ── Core (required, load in this order) ─────────────────── */

/* variables.css is left unlayered so custom properties are globally defined.
   base.css is wrapped in easemotion-base layer. */
@import "./core/variables.css";
@import "./core/base.css";
@import "./core/animations.css";
@import "./core/utilities.css";
@import "./components/ease-marquee.css";

/* ── Components (tree-shakeable in future versions) ──────── */
@import "./components/buttons.css";
@import "./components/cards.css";
@import "./components/navbar.css";
@import "./components/masonry.css";
@import "./components/chip.css";
@import "./components/footer.css";
@import "./components/sidebar.css";
@import "./components/scroll-progress.css";
@import "./components/tabs.css";
@import "./components/badges.css";
@import "./components/loaders.css";
@import "./components/tooltips.css";
@import "./components/modals.css";
@import "./components/command-palette.css";
@import "./components/announce-bar.css";
@import "./components/avatar.css";
@import "./components/breadcrumb.css";
@import "./components/btn-magnetic.css";
@import "./components/compare-table.css";
@import "./components/connection-status.css";
@import "./components/fab.css";
@import "./components/kbd.css";
@import "./components/pagination.css";
@import "./components/password-strength.css";
@import "./components/progress.css";
@import "./components/read-more.css";
@import "./components/scroll-gallery.css";
@import "./components/skeleton.css";
@import "./components/tag.css";
@import "./components/toast.css";
@import "./components/view-transitions.css";
@import "./components/forms.css";


/* Accessibility: Respect user's reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  :root {
    --ease-speed-fast: 0.01ms;
    --ease-speed-medium: 0.01ms;
    --ease-speed-slow: 0.01ms;
    --ease-animation-iterations: 1;
  }

  html {
    scroll-behavior: auto !important;
  }
}