You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
512 lines
8.6 KiB
512 lines
8.6 KiB
/* ------------------------------------------------------------------------------ |
|
* |
|
* # 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; |
|
} |
|
} |
|
}
|
|
|