framework7/lazy-components/notification.css

Full featured mobile HTML framework for building iOS & Android apps

.notification{position:absolute;left:0;top:0;width:100%;z-index:20000;font-size:14px;margin:0;border:none;display:none;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform,-webkit-transform;direction:ltr}.notification-icon{font-size:0}.notification-header{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-webkit-justify-content:flex-start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.notification-close-button{margin-left:auto;cursor:pointer}html.with-statusbar.device-ios .notification,html.with-statusbar.ios:not(.device-ios):not(.device-android) .notification{margin-top:20px}html.with-statusbar.device-android .notification,html.with-statusbar.md:not(.device-ios):not(.device-android) .notification{margin-top:24px}html.with-statusbar.device-iphone-x .notification{margin-top:constant(safe-area-inset-top);margin-top:env(safe-area-inset-top)}.ios .notification{left:8px;top:8px;width:calc(100% - 16px);background:rgba(250,250,250,.95);border-radius:12px;-webkit-box-shadow:0px 5px 25px -10px rgba(0,0,0,.7);box-shadow:0px 5px 25px -10px rgba(0,0,0,.7);padding:10px;color:#000;max-width:568px;-webkit-transition-duration:450ms;transition-duration:450ms;-webkit-transform:translate3d(0%,-200%,0);transform:translate3d(0%,-200%,0)}@supports ((-webkit-backdrop-filter:blur(10px)) or (backdrop-filter:blur(10px))){.ios .notification{background:rgba(255,255,255,.65);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}}@media (min-width:584px){.ios .notification{left:50%;width:568px;margin-left:-284px}}.ios .notification.modal-in{-webkit-transform:translate3d(0%,0%,0);transform:translate3d(0%,0%,0);opacity:1}.ios .notification.modal-out{-webkit-transform:translate3d(0%,-200%,0);transform:translate3d(0%,-200%,0)}.ios .notification-icon{width:20px;height:20px;line-height:20px;margin-right:8px}.ios .notification-icon i{width:20px;height:20px;font-size:20px}.ios .notification-title{font-size:13px;text-transform:uppercase;letter-spacing:.02em}.ios .notification-subtitle{font-size:15px;font-weight:600;line-height:1.35}.ios .notification-text{font-size:15px;line-height:1.2}.ios .notification-header+.notification-content{margin-top:10px}.ios .notification-title-right-text{color:#444a51;font-size:13px;margin-right:6px;margin-left:auto}.ios .notification-title-right-text+.notification-close-button{margin-left:10px}.ios .notification-close-button{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%2044%2044'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cg%20stroke%3D'none'%20stroke-width%3D'1'%20fill%3D'none'%20fill-rule%3D'evenodd'%3E%3Cpath%20d%3D'M22.5%2C20.3786797%20L14.7218254%2C12.6005051%20L12.6005051%2C14.7218254%20L20.3786797%2C22.5%20L12.6005051%2C30.2781746%20L14.7218254%2C32.3994949%20L22.5%2C24.6213203%20L30.2781746%2C32.3994949%20L32.3994949%2C30.2781746%20L24.6213203%2C22.5%20L32.3994949%2C14.7218254%20L30.2781746%2C12.6005051%20L22.5%2C20.3786797%20Z%20M22%2C44%20C34.1502645%2C44%2044%2C34.1502645%2044%2C22%20C44%2C9.8497355%2034.1502645%2C0%2022%2C0%20C9.8497355%2C0%200%2C9.8497355%200%2C22%20C0%2C34.1502645%209.8497355%2C44%2022%2C44%20Z'%20fill%3D'%23000000'%3E%3C%2Fpath%3E%3C%2Fg%3E%3C%2Fsvg%3E");width:20px;height:20px;background-position:center top;background-repeat:no-repeat;background-size:100% auto;position:relative;opacity:.3;-webkit-transition-duration:.3s;transition-duration:.3s}.ios .notification-close-button.active-state{-webkit-transition-duration:0s;transition-duration:0s;opacity:.1}.ios .notification-close-button:after{content:'';position:absolute;left:50%;top:50%;width:44px;height:44px;margin-left:-22px;margin-top:-22px}.md .notification{left:0;top:0;width:100%;background:#fff;border-radius:0px;-webkit-box-shadow:0 2px 4px rgba(0,0,0,.22),0 1px 2px rgba(0,0,0,.24);box-shadow:0 2px 4px rgba(0,0,0,.22),0 1px 2px rgba(0,0,0,.24);padding:16px;color:#000;max-width:568px}@media (min-width:568px){.md .notification{left:50%;margin-left:-284px}}.md .notification.modal-in{-webkit-transition-duration:0s;transition-duration:0s;-webkit-animation:notification-md-in .4s ease-out;animation:notification-md-in .4s ease-out}.md .notification.modal-in.notification-transitioning{-webkit-transition-duration:.2s;transition-duration:.2s}.md .notification.modal-out{-webkit-animation:none;animation:none;-webkit-transition-duration:.2s;transition-duration:.2s;-webkit-transition-timing-function:ease-in;transition-timing-function:ease-in;-webkit-transform:translate3d(0,-150%,0);transform:translate3d(0,-150%,0)}.md .notification-icon{width:16px;height:16px;margin-right:8px;line-height:16px}.md .notification-icon i{width:16px;height:16px;font-size:16px}.md .notification-title{font-size:12px;line-height:1;color:#2196f3}.md .notification-subtitle{font-size:14px;line-height:1.35;color:#212121}.md .notification-subtitle+.notification-text{margin-top:2px}.md .notification-text{font-size:14px;line-height:1.35;color:#757575}.md .notification-header+.notification-content{margin-top:6px}.md .notification-title-right-text{font-size:12px;color:#757575;margin-left:4px}.md .notification-title-right-text:before{content:'';width:3px;height:3px;border-radius:50%;display:inline-block;vertical-align:middle;margin-right:4px;background:#757575}.md .notification-close-button{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20fill%3D'%23737373'%20height%3D'24'%20viewBox%3D'0%200%2024%2024'%20width%3D'24'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%3E%3Cpath%20d%3D'M19%206.41L17.59%205%2012%2010.59%206.41%205%205%206.41%2010.59%2012%205%2017.59%206.41%2019%2012%2013.41%2017.59%2019%2019%2017.59%2013.41%2012z'%2F%3E%3Cpath%20d%3D'M0%200h24v24H0z'%20fill%3D'none'%2F%3E%3C%2Fsvg%3E");width:16px;height:16px;background-position:center top;background-repeat:no-repeat;background-size:100% auto;position:relative;-webkit-transition-duration:.3s;transition-duration:.3s}.md .notification-close-button:before{content:'';width:152%;height:152%;position:absolute;left:-26%;top:-26%;background-image:-webkit-radial-gradient(center,circle,rgba(0,0,0,.1) 66%,rgba(0,0,0,0) 66%);background-image:radial-gradient(circle at center,rgba(0,0,0,.1) 66%,rgba(0,0,0,0) 66%);background-repeat:no-repeat;background-position:center;background-size:100% 100%;opacity:0;pointer-events:none;-webkit-transition-duration:.6s;transition-duration:.6s}.md .notification-close-button.active-state:before{opacity:1;-webkit-transition-duration:150ms;transition-duration:150ms}.md .notification-close-button:before{width:48px;height:48px;left:50%;top:50%;margin-left:-24px;margin-top:-24px}.md .notification-close-button:after{content:'';position:absolute;left:50%;top:50%;width:48px;height:48px;margin-left:-22px;margin-top:-22px}@-webkit-keyframes notification-md-in{0%{-webkit-transform:translate3d(0,-150%,0);transform:translate3d(0,-150%,0)}50%{-webkit-transform:translate3d(0,10%,0);transform:translate3d(0,10%,0)}100%{-webkit-transform:translate3d(0,0%,0);transform:translate3d(0,0%,0)}}@keyframes notification-md-in{0%{-webkit-transform:translate3d(0,-150%,0);transform:translate3d(0,-150%,0)}50%{-webkit-transform:translate3d(0,10%,0);transform:translate3d(0,10%,0)}100%{-webkit-transform:translate3d(0,0%,0);transform:translate3d(0,0%,0)}}