Created
April 2, 2017 08:30
-
-
Save omeome762/d149a30e615f9635e45525f32237452f to your computer and use it in GitHub Desktop.
Style Sheet Snippet for Notification Pop Up
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
@import url(//fonts.googleapis.com/css?family=Raleway:300,700); | |
#someone-purchased{background:#fff;border:0;display:none; | |
border-radius:0;bottom:20px;left:20px;top:auto !important;right:auto !important;padding:0;position:fixed;text-align:left;width:auto;z-index:99999;font-family:Raleway,sans-serif;-webkit-box-shadow:0 0 4px 0 rgba(0,0,0,.4);-moz-box-shadow:0 0 4px 0 rgba(0,0,0,.4);box-shadow:0 0 4px 0 rgba(0,0,0,.4);} | |
#someone-purchased div img{cursor:pointer;float:left;max-height:85px; | |
max-width:120px;width:auto}#someone-purchased div p{color:{{ settings.popup_message }};float:left;font-size:13px;margin:0 0 0 13px;width:auto;padding:10px 10px 0 0;line-height:20px} | |
#someone-purchased div p a{padding-right: 51px; color:{{ settings.popup_product_title_olor }} !important; display:block;font-size:15px;font-weight:700} | |
#someone-purchased div p a:hover{color:#000}#someone-purchased div p small{text-align: right; display:block;font-size:10px;margin-bottom:8px;} | |
@media screen and (max-width:767px){#someone-purchased{bottom: 0 !important;left: 0 !important;top:auto !important;width:100%;box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;max-width:auto !important;}#someone-purchased div img{ max-width: 20%; max-height:auto;} | |
#someone-purchased div p{font-size:11px; width:70%;}#someone-purchased div p a{font-size:13px;}} | |
@keyframes nFadeIn {from {opacity: 0;transform: translate3d(0, 100%, 0);}to {opacity: 1;transform: none;}}#someone-purchased.fade-in {opacity: 0; animation-name: nFadeIn; animation-duration: 1s;animation-fill-mode: both;} | |
@media screen and (max-width:767px){@keyframes nFadeIn {from {opacity: 0;transform: translate3d(0, 100%, 0);}to {opacity: 1;transform: none;}}}@keyframes nFadeOut {from {opacity: 1;}to {opacity: 0;transform: translate3d(0, 100%, 0);bottom:0;}}#someone-purchased.fade-out {opacity: 0; animation-name: nFadeOut; animation-duration: 1s;animation-fill-mode: both;} | |
@media screen and (max-width:767px){@keyframes nFadeOut {from {opacity: 1;}to {opacity: 0;transform: translate3d(0, 100%, 0);bottom:0}}} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment