/* ------------------------------------------------------------------------------ * * # PNotify notifications * * Styles for pnotify.min.js - a flexible JavaScript notification plugin * * Version: 1.1 * Latest update: Mar 10, 2016 * * ---------------------------------------------------------------------------- */ // Core // ------------------------------ .ui-pnotify { top: @line-height-computed; right: @grid-gutter-width; position: absolute; height: auto; z-index: 2; border-radius: @border-radius-base; // Related to window body > & { position: fixed; z-index: 100040; } // Rounded alerts &.alert-rounded > .ui-pnotify-container { border-radius: 100px; } // Solid color alerts &[class*=bg-] > .ui-pnotify-container { background-color: inherit; border-color: transparent; color: #fff; } // Custom text and light background colors &[class*=text-] > .ui-pnotify-container, &[class*=alpha-] > .ui-pnotify-container { background-color: inherit; border-color: inherit; color: inherit; } // // Stack positions // // Alternate stack initial positioning &.stack-top-left, &.stack-bottom-left { left: @grid-gutter-width; right: auto; } &.stack-bottom-right, &.stack-bottom-left { bottom: @line-height-computed; top: auto; } &.stack-modal { left: 50%; right: auto; margin-left: -150px; } // Custom stack positions &.stack-custom-right { top: auto; left: auto; bottom: 200px; right: 200px; } &.stack-custom-left { top: 200px; left: 200px; right: auto; bottom: auto; } &.stack-custom-top { right: 0; left: 0; top: 0; } &.stack-custom-bottom { right: 0; left: 0; bottom: 0; top: auto; } // // Animations // // Display notification &.ui-pnotify-in { display: block!important; } // Move notification &.ui-pnotify-move { .transition(~"left .5s ease, top .5s ease, right .5s ease, bottom .5s ease"); } // Slow fading &.ui-pnotify-fade-slow { .transition(opacity linear 0.6s); .opacity(0); &.ui-pnotify.ui-pnotify-move { .transition(~"opacity .6s linear, left .5s ease, top .5s ease, right .5s ease, bottom .5s ease"); } } // Normal fading &.ui-pnotify-fade-normal { .transition(opacity linear 0.4s); .opacity(0); &.ui-pnotify.ui-pnotify-move { .transition(~"opacity .4s linear, left .5s ease, top .5s ease, right .5s ease, bottom .5s ease"); } } // Fast fading &.ui-pnotify-fade-fast { transition: opacity .2s linear; opacity: 0; .transition(opacity linear 0.2s); .opacity(0); &.ui-pnotify.ui-pnotify-move { .transition(~"opacity .2s linear, left .5s ease, top .5s ease, right .5s ease, bottom .5s ease"); } } // Fading &.ui-pnotify-fade-in { .opacity(1); } } // Notification layout // ------------------------------ // Container .ui-pnotify-container { padding: @content-padding-base @content-padding-large; height: 100%; position: relative; left: 0; margin: 0; border-radius: @border-radius-base; // Clearing floats &:after { content: " "; visibility: hidden; display: block; height: 0; clear: both; } // Roundless notifications &.ui-pnotify-sharp { border-radius: 0; } } // Title .ui-pnotify-title { display: block; margin-top: 0; margin-bottom: @padding-base-vertical; font-size: @font-size-h6; } // Text .ui-pnotify-text { display: block; } // Notification icon .ui-pnotify-icon { display: block; float: left; line-height: 1; > [class^=icon-] { margin-top: (@line-height-computed - @icon-font-size); margin-right: @content-padding-base; } } // Control buttons .ui-pnotify-closer, .ui-pnotify-sticker { float: right; margin-left: 8px; margin-top: 4px; line-height: 1; outline: 0; } // Utility classes // ------------------------------ // Overlay .ui-pnotify-modal-overlay { background-color: fade(#000, 50%); top: 0; left: 0; position: absolute; height: 100%; width: 100%; z-index: 1; body > & { position: fixed; z-index: 100039; } } // Notification theme // ------------------------------ .brighttheme { border: 1px solid; .ui-pnotify[class*=bg-] > & { background-color: inherit; border-color: inherit; color: inherit; } } // // Contextual alternatives // .brighttheme-notice { background-color: @alert-warning-bg; border-color: @alert-warning-border; } .brighttheme-info { background-color: @alert-primary-bg; border-color: @alert-primary-border; } .brighttheme-success { background-color: @alert-success-bg; border-color: @alert-success-border; } .brighttheme-error { background-color: @alert-danger-bg; border-color: @alert-danger-border; } // // Notification controls // // Base .brighttheme-icon-closer, .brighttheme-icon-sticker { position: relative; width: @icon-font-size; height: @icon-font-size; display: inline-block; width: 10px; height: 10px; outline: 0; // Icons &:after { content: ''; font-family: 'Icomoon'; font-size: 10px; display: block; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } } // Closer icon .brighttheme-icon-closer:after { content: "\ed6a"; } // Sticker icon .brighttheme-icon-sticker:after { content: "\ee70"; } // Sticked icon .brighttheme-icon-sticker.brighttheme-icon-stuck:after { content: "\ee75"; } // // Custom alert styles // // Styled alert .ui-pnotify[class*=alert-styled-] { border-width: 0; padding: 0; } // Left position .ui-pnotify.alert-styled-left { // Border .brighttheme { border-left-width: (((@alert-padding * 2) + @icon-font-size) - 2); } // Icon &:after { left: 0; } } // Right position .ui-pnotify.alert-styled-right { // Border .brighttheme { border-right-width: (((@alert-padding * 2) + @icon-font-size) - 2); } // Icon &:after { right: 0; } } // // Action bar // .brighttheme { // Base .ui-pnotify-action-bar { padding-top: @content-padding-base; // Inputs textarea, input { display: block; width: 100%; border: 1px solid @input-border; background-color: @input-bg; margin-bottom: @content-padding-base!important; color: @input-color; padding: @padding-base-vertical @padding-base-horizontal; // In colored background .ui-pnotify[class*=bg-] & { border-color: #fff; color: #fff; .placeholder(@input-placeholder-light); } } } } // // Custom background color // // Inputs .ui-pnotify[class*=bg-] .form-control { border-bottom-color: #fff; color: #fff; .placeholder(@input-placeholder-light); } // Notification history // ------------------------------ // Container .ui-pnotify-history-container { position: absolute; top: 0; right: @grid-gutter-width; width: 70px; border-top: none; padding: 0; z-index: 10000; .border-top-radius(0); // Fixed container &.ui-pnotify-history-fixed { position: fixed; } // Header .ui-pnotify-history-header { padding: 2px; text-align: center; } // Button button { cursor: pointer; display: block; width: 100%; } // Pulldown .ui-pnotify-history-pulldown { display: block; margin: 0 auto; } } // Mobile view setup // ------------------------------ @media (max-width: @screen-xs) { // On mobile .ui-pnotify-mobile-able { // Notification &.ui-pnotify { position: fixed; top: 0; right: 0; left: 0; width: auto !important; -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -ms-font-smoothing: antialiased; font-smoothing: antialiased; // Shadow .ui-pnotify-shadow { border-bottom-width: 5px; .box-shadow(none); } // // Alternate stack initial positioning // &.stack-top-left, &.stack-bottom-left { left: 0; right: 0; } &.stack-bottom-right, &.stack-bottom-left { left: 0; right: 0; bottom: 0; top: auto; // Shadow .ui-pnotify-shadow, .ui-pnotify-shadow { border-top-width: 5px; border-bottom-width: 1px; } } // // Utility classes // // Fade out &.ui-pnotify-nonblock-fade { .opacity(0.2); } // Hide &.ui-pnotify-nonblock-hide { display: none !important; } } // Container .ui-pnotify-container { border-radius: 0; } } }