@sandlada/material-design-css
Version:
A ready-made npm package for a collection of css styles in the material design style.
52 lines (50 loc) • 5.05 kB
CSS
@theme inline {
--ease-emphasized : var(--md-sys-motion-easing-emphasized ,cubic-bezier(0.2, 0.0, 0, 1.0));
--ease-emphasized-decelerate : var(--md-sys-motion-easing-emphasized-decelerate ,cubic-bezier(0.05, 0.7, 0.1, 1.0));
--ease-emphasized-accelerate : var(--md-sys-motion-easing-emphasized-accelerate ,cubic-bezier(0.3, 0.0, 0.8, 0.15));
--ease-standard : var(--md-sys-motion-easing-standard ,cubic-bezier(0.2, 0.0, 0, 1.0));
--ease-standard-decelerate : var(--md-sys-motion-easing-standard-decelerate ,cubic-bezier(0, 0, 0, 1));
--ease-standard-accelerate : var(--md-sys-motion-easing-standard-accelerate ,cubic-bezier(0.3, 0, 1, 1));
--ease-expressive-fast-spatial : var(--md-sys-motion-easing-expressive-fast-spatial, cubic-bezier(0.42, 1.67, 0.21, 0.90));
--ease-expressive-default-spatial: var(--md-sys-motion-easing-expressive-default-spatial, cubic-bezier(0.38, 1.21, 0.22, 1.00));
--ease-expressive-slow-spatial : var(--md-sys-motion-easing-expressive-slow-spatial, cubic-bezier(0.39, 1.29, 0.35, 0.98));
--ease-expressive-fast-effects : var(--md-sys-motion-easing-expressive-fast-effects, cubic-bezier(0.31, 0.94, 0.34, 1.00));
--ease-expressive-default-effects: var(--md-sys-motion-easing-expressive-default-effects, cubic-bezier(0.34, 0.80, 0.34, 1.00));
--ease-expressive-slow-effects : var(--md-sys-motion-easing-expressive-slow-effects, cubic-bezier(0.34, 0.88, 0.34, 1.00));
--ease-standard-fast-spatial : var(--md-sys-motion-easing-standard-fast-spatial, cubic-bezier(0.27, 1.06, 0.18, 1.00));
--ease-standard-default-spatial : var(--md-sys-motion-easing-standard-default-spatial, cubic-bezier(0.27, 1.06, 0.18, 1.00));
--ease-standard-slow-spatial : var(--md-sys-motion-easing-standard-slow-spatial, cubic-bezier(0.27, 1.06, 0.18, 1.00));
--ease-standard-fast-effects : var(--md-sys-motion-easing-standard-fast-effects, cubic-bezier(0.31, 0.94, 0.34, 1.00));
--ease-standard-default-effects : var(--md-sys-motion-easing-standard-default-effects, cubic-bezier(0.34, 0.80, 0.34, 1.00));
--ease-standard-slow-effects : var(--md-sys-motion-easing-standard-slow-effects, cubic-bezier(0.34, 0.88, 0.34, 1.00));
}
@theme static inline {
--duration-short1 : var(--md-sys-motion-duration-short1, 50ms);
--duration-short2 : var(--md-sys-motion-duration-short2, 100ms);
--duration-short3 : var(--md-sys-motion-duration-short3, 150ms);
--duration-short4 : var(--md-sys-motion-duration-short4, 200ms);
--duration-medium1 : var(--md-sys-motion-duration-medium1, 250ms);
--duration-medium2 : var(--md-sys-motion-duration-medium2, 300ms);
--duration-medium3 : var(--md-sys-motion-duration-medium3, 350ms);
--duration-medium4 : var(--md-sys-motion-duration-medium4, 400ms);
--duration-long1 : var(--md-sys-motion-duration-long1, 450ms);
--duration-long2 : var(--md-sys-motion-duration-long2, 500ms);
--duration-long3 : var(--md-sys-motion-duration-long3, 550ms);
--duration-long4 : var(--md-sys-motion-duration-long4, 600ms);
--duration-extra-long1 : var(--md-sys-motion-duration-extra-long1, 700ms);
--duration-extra-long2 : var(--md-sys-motion-duration-extra-long2, 800ms);
--duration-extra-long3 : var(--md-sys-motion-duration-extra-long3, 900ms);
--duration-extra-long4 : var(--md-sys-motion-duration-extra-long4, 1000ms);
--duration-expressive-fast-spatial : var(--md-sys-motion-duration-expressive-fast-spatial, 350ms);
--duration-expressive-default-spatial: var(--md-sys-motion-duration-expressive-default-spatial, 500ms);
--duration-expressive-slow-spatial : var(--md-sys-motion-duration-expressive-slow-spatial, 650ms);
--duration-expressive-fast-effects : var(--md-sys-motion-duration-expressive-fast-effects, 150ms);
--duration-expressive-default-effects: var(--md-sys-motion-duration-expressive-default-effects, 200ms);
--duration-expressive-slow-effects : var(--md-sys-motion-duration-expressive-slow-effects, 300ms);
--duration-standard-fast-spatial : var(--md-sys-motion-duration-standard-fast-spatial, 350ms);
--duration-standard-default-spatial : var(--md-sys-motion-duration-standard-default-spatial, 500ms);
--duration-standard-slow-spatial : var(--md-sys-motion-duration-standard-slow-spatial, 750ms);
--duration-standard-fast-effects : var(--md-sys-motion-duration-standard-fast-effects, 150ms);
--duration-standard-default-effects : var(--md-sys-motion-duration-standard-default-effects, 200ms);
--duration-standard-slow-effects : var(--md-sys-motion-duration-standard-slow-effects, 300ms);
}