@import 'yellow'; @import 'animations'; //@import 'typography';
.layout-envelope {
.envelope {
/* animation: spin 10s infinite linear; */ background-color: $envelope-side-color; width: 40em; height: 22.5em; box-shadow: -1em 1em 2em 0em rgba(0, 0, 0, 0.25); margin: 0 auto; position: relative; transform-style: preserve-3d; transition: 1s; .front { transform: translateZ(-1px) rotateY(180deg); background-color: $envelope-bottom-color; width: 40em; height: 22.5em; position: absolute; } .inner { position: absolute; &:before { border-left: 20em solid transparent; border-right: 20em solid transparent; border-top: 15em solid $envelope-inside-color; position: absolute; content:""; } } .bottom { position: absolute; height: 22.5em; &:before { border-left: 20em solid transparent; border-right: 20em solid transparent; border-bottom: 15em solid $envelope-bottom-edge-color; position: absolute; content: ""; top: 7.4em; } &:after { border-left: 17em solid transparent; border-right: 17em solid transparent; border-bottom: 12em solid $envelope-bottom-color; position: absolute; margin: 0 auto; text-align: center; left: 3em; content:""; top: 10.5em; } } .flap { animation: open 1s 1 ease-in-out; animation-fill-mode: forwards; transform: rotateX(10deg); transform-origin: top right; width: 0; height: 0; position: relative; transition: all 1s; &:before { border-left: 20em solid transparent; border-right: 20em solid transparent; border-top: 15em solid $envelope-top-edge-color; position: absolute; content:""; } &:after { border-left: 17em solid transparent; border-right: 17em solid transparent; border-top: 12em solid $envelope-top-color; position: absolute; margin: 0 auto; text-align: center; left: 3em; content:""; } }
}
}