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.
513 lines
8.6 KiB
513 lines
8.6 KiB
3 years ago
|
/* ------------------------------------------------------------------------------
|
||
|
|
*
|
||
|
|
* # 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;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|