Current Path : /var/www/mainsite/wp-content/themes/maxcoach/assets/scss/objects/ |
Current File : /var/www/mainsite/wp-content/themes/maxcoach/assets/scss/objects/_popup.scss |
// General popup style. .popup-close-button { position: fixed; top: 40px; right: 55px; z-index: 100000; visibility: hidden; opacity: 0; cursor: pointer; height: 40px; width: 40px; color: #111; transition: all .3s linear .1s; .burger-icon-top, .burger-icon-bottom { display: block; position: absolute; top: 19px; left: 5px; width: 29px; height: 3px; transform: translateZ(0); transition: transform .6s cubic-bezier(.165, .84, .44, 1); &:before, &:after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: currentColor; opacity: .99; } &:before { transform-origin: right; transform: scaleX(1) translateZ(0); transition: transform .6s cubic-bezier(.165, .84, .44, 1) .2s; } &:after { transform-origin: left; transform: scaleX(0) translateZ(0); transition: transform .6s cubic-bezier(.165, .84, .44, 1); } } .burger-icon-top { transform: rotate(-45deg); } .burger-icon-bottom { transform: rotate(225deg); &:before { transform-origin: left; } &:after { transform-origin: right; } } &:hover { .burger-icon-top, .burger-icon-bottom { &:before { -webkit-transform: scaleX(0) translateZ(0); transform: scaleX(0) translateZ(0); transition: -webkit-transform .6s cubic-bezier(.165, .84, .44, 1); transition: transform .6s cubic-bezier(.165, .84, .44, 1); transition: transform .6s cubic-bezier(.165, .84, .44, 1), -webkit-transform .6s cubic-bezier(.165, .84, .44, 1); } &:after { -webkit-transform: scaleX(1) translateZ(0); transform: scaleX(1) translateZ(0); transition: -webkit-transform .6s cubic-bezier(.165, .84, .44, 1) .2s; transition: transform .6s cubic-bezier(.165, .84, .44, 1) .2s; transition: transform .6s cubic-bezier(.165, .84, .44, 1) .2s, -webkit-transform .6s cubic-bezier(.165, .84, .44, 1) .2s; } } } } .page-popup { transition: all .5s ease-in-out; // Wait for elements fade out. transition-delay: .5s; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 99999; visibility: hidden; overflow: hidden; opacity: 0; &.open { visibility: visible; opacity: 1; // Reset delay on open. transition-delay: 0s; .popup-close-button { transition-delay: .6s; } .popup-close-button { visibility: visible; opacity: 1; } } } .admin-bar { .popup-close-button { top: 72px; } }