Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- /* Flip
- ------------------------------------
- */
- .pgn-wrapper[data-position^='bottom-'] .pgn-flip .alert {
- -webkit-transform-origin: 50% 100%;
- transform-origin: 50% 100%;
- }
- .pgn-flip .alert {
- -webkit-transform-origin: 50% 0%;
- transform-origin: 50% 0%;
- box-shadow: 0 6px 4px -3px rgba(0, 0, 0, 0.2);
- -webkit-animation-name: flipInX;
- animation-name: flipInX;
- -webkit-animation-duration: 0.8s;
- animation-duration: 0.8s;
- border-radius: 0;
- padding: 25px 35px;
- max-width: 500px;
- max-height: 250px;
- overflow: hidden;
- }
- @-webkit-keyframes flipInX {
- 0% {
- -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -90deg);
- -webkit-transition-timing-function: ease-in;
- }
- 40% {
- -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 20deg);
- -webkit-transition-timing-function: ease-out;
- }
- 60% {
- -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -10deg);
- -webkit-transition-timing-function: ease-in;
- opacity: 1;
- }
- 80% {
- -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 5deg);
- -webkit-transition-timing-function: ease-out;
- }
- 100% {
- -webkit-transform: perspective(400px);
- }
- }
- @keyframes flipInX {
- 0% {
- -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -90deg);
- transform: perspective(400px) rotate3d(1, 0, 0, -90deg);
- -webkit-transition-timing-function: ease-in;
- transition-timing-function: ease-in;
- }
- 40% {
- -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 20deg);
- transform: perspective(400px) rotate3d(1, 0, 0, 20deg);
- -webkit-transition-timing-function: ease-out;
- transition-timing-function: ease-out;
- }
- 60% {
- -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -10deg);
- transform: perspective(400px) rotate3d(1, 0, 0, -10deg);
- -webkit-transition-timing-function: ease-in;
- transition-timing-function: ease-in;
- opacity: 1;
- }
- 80% {
- -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 5deg);
- transform: perspective(400px) rotate3d(1, 0, 0, 5deg);
- -webkit-transition-timing-function: ease-out;
- transition-timing-function: ease-out;
- }
- 100% {
- -webkit-transform: perspective(400px);
- transform: perspective(400px);
- }
- }
- @keyframes fadeIn {
- 0% {
- opacity: 0;
- }
- 100% {
- opacity: 1;
- }
- }
- @-webkit-keyframes fadeIn {
- 0% {
- opacity: 0;
- }
- 100% {
- opacity: 1;
- }
- }
- .pgn-circle .alert .close {
- margin-top: -4px;
- }
- body > .pgn-wrapper {
- z-index: 900;
- }
- @media (max-width: 979px) {
- body .pgn-wrapper[data-position="top"] {
- left: 0 !important;
- }
- body .pgn-wrapper[data-position="bottom"] {
- left: 0 !important;
- }
- }
- @media (max-width: 767px) {
- body .pgn-wrapper[data-position$='-left'],
- body .pgn-wrapper[data-position$='-right'] {
- left: 10px !important;
- right: 10px !important;
- }
- body .pgn-wrapper[data-position$='-right'] .alert,
- body .pgn-wrapper[data-position$='-left'] .alert {
- max-width: 100%;
- width: 100%;
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement