28 lines
703 B
CSS
28 lines
703 B
CSS
|
@import "https://unpkg.com/open-props" layer(design.system);
|
||
|
|
@import "https://unpkg.com/open-props/normalize.min.css" layer(demo.support);
|
||
|
|
@import "https://unpkg.com/open-props/buttons.min.css" layer(demo.support);
|
||
|
|
|
||
|
|
@layer demo {
|
||
|
|
@media (prefers-reduced-motion: no-preference) {
|
||
|
|
/* give the elements a name so they morph */
|
||
|
|
button {
|
||
|
|
view-transition-name: buy-btn;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* remove aspect-ratio and opt into squishing */
|
||
|
|
::view-transition-old(buy-btn),
|
||
|
|
::view-transition-new(buy-btn) {
|
||
|
|
height: 100%;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@layer demo.support {
|
||
|
|
body {
|
||
|
|
display: grid;
|
||
|
|
place-content: center;
|
||
|
|
padding: var(--size-5);
|
||
|
|
gap: var(--size-5);
|
||
|
|
}
|
||
|
|
}
|