plumes
Version:
Flying-fast Metro future vision components
1 lines • 3.51 kB
CSS
@-webkit-keyframes pl-notifications-panel-item-show{0%{-webkit-transform:translateX(10rem);opacity:0}100%{-webkit-transform:translateX(0);opacity:1}}@-moz-keyframes pl-notifications-panel-item-show{0%{-moz-transform:translateX(10rem);opacity:0}100%{-moz-transform:translateX(0);opacity:1}}@-ms-keyframes pl-notifications-panel-item-show{0%{-ms-transform:translateX(10rem);opacity:0}100%{-ms-transform:translateX(0);opacity:1}}@-o-keyframes pl-notifications-panel-item-show{0%{-o-transform:translateX(10rem);opacity:0}100%{-o-transform:translateX(0);opacity:1}}@keyframes pl-notifications-panel-item-show{0%{transform:translateX(10rem);opacity:0}100%{transform:translateX(0);opacity:1}}.pl-notifications-panel{position:relative;width:100%;height:100%;-webkit-transition:all .35s cubic-bezier(.165,.84,.44,1);-moz-transition:all .35s cubic-bezier(.165,.84,.44,1);-ms-transition:all .35s cubic-bezier(.165,.84,.44,1);-o-transition:all .35s cubic-bezier(.165,.84,.44,1);transition:all .35s cubic-bezier(.165,.84,.44,1)}.pl-notifications-panel .pl-notifications-panel-list{position:absolute;top:0;left:0;right:0;bottom:0;margin:0;padding:0}.pl-notifications-panel .pl-notifications-panel-list ul{margin-bottom:0}.pl-notifications-panel .pl-notifications-panel-item{cursor:pointer;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;list-style:none;padding:1rem 2rem;margin:0;position:relative;min-height:7.1rem;box-sizing:border-box;border-bottom:1px solid #ddd;-webkit-animation:pl-notifications-panel-item-show .35s cubic-bezier(.165,.84,.44,1);-moz-animation:pl-notifications-panel-item-show .35s cubic-bezier(.165,.84,.44,1);-ms-animation:pl-notifications-panel-item-show .35s cubic-bezier(.165,.84,.44,1);-o-animation:pl-notifications-panel-item-show .35s cubic-bezier(.165,.84,.44,1);animation:pl-notifications-panel-item-show .35s cubic-bezier(.165,.84,.44,1)}.pl-notifications-panel .pl-notifications-panel-item:hover{background:#f6f6f6}.pl-notifications-panel .pl-notifications-panel-item.pl-notifications-panel-noitem{cursor:default;border:none;min-height:auto}.pl-notifications-panel .pl-notifications-panel-item.pl-notifications-panel-noitem:hover{background:#fff}.pl-notifications-panel .pl-notifications-panel-item.pl-notifications-panel-noitem p{margin:0}.pl-notifications-panel .pl-notifications-panel-item img{position:absolute;top:1rem;left:2rem;width:5rem;height:5rem}.pl-notifications-panel .pl-notifications-panel-item p{margin:0 0 0 6.5rem;padding:0;font-size:1.4rem;line-height:1.4;font-weight:400}.pl-notifications-panel .pl-notifications-panel-item p strong{font-weight:600}.pl-notifications-panel .pl-notifications-panel-item .pl-notifications-panel-item-time{color:#aaa;font-size:1.2rem;margin-top:.2rem}.pl-notifications-panel .pl-notifications-panel-emails{position:absolute;bottom:1rem;right:1rem}.pl-notifications-panel.theme-dark .pl-notifications-panel-item{color:#fff;border-bottom:1px solid #555}.pl-notifications-panel.theme-dark .pl-notifications-panel-item:hover{background:#3c3c3c}.pl-notifications-panel.theme-dark .pl-notifications-panel-item.pl-notifications-panel-noitem{color:#fff;border-bottom:none}.pl-notifications-panel.theme-dark .pl-notifications-panel-item.pl-notifications-panel-noitem:hover{background:#333}.pl-notifications-panel.theme-dark .pl-notifications-panel-emails .pl-button-onoff{color:#fff}.pl-notifications-panel.use-emails .pl-notifications-panel-list{bottom:5rem}