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