change notify style
This commit is contained in:
parent
1ad13c2b59
commit
41f8eec259
7 changed files with 1112 additions and 488 deletions
|
@ -36,27 +36,14 @@ class App.Notify extends App.ControllerWidgetPermanent
|
||||||
$.noty.closeAll()
|
$.noty.closeAll()
|
||||||
if data.link
|
if data.link
|
||||||
data.msg = '<a href="' + data.link + '">' + data.msg + '</a>'
|
data.msg = '<a href="' + data.link + '">' + data.msg + '</a>'
|
||||||
$('#notify').noty(
|
$('#notify').noty
|
||||||
{
|
text: data.msg
|
||||||
dismissQueue: true
|
type: data.type
|
||||||
text: data.msg
|
animation:
|
||||||
layout: 'top'
|
open: 'animated fadeInDown'
|
||||||
type: data.type
|
close: 'animated fadeOutDown'
|
||||||
theme: 'noty_theme_twitter'
|
timeout: data.timeout || 3800
|
||||||
animateOpen: {
|
closeWith: ['click']
|
||||||
height: 'toggle'
|
|
||||||
opacity: 0.85,
|
|
||||||
},
|
|
||||||
animateClose: {
|
|
||||||
opacity: 0.25
|
|
||||||
},
|
|
||||||
speed: 450
|
|
||||||
timeout: data.timeout || 3800
|
|
||||||
closeButton: false
|
|
||||||
closeOnSelfClick: true
|
|
||||||
closeOnSelfOver: false
|
|
||||||
}
|
|
||||||
)
|
|
||||||
|
|
||||||
destroy: (e) ->
|
destroy: (e) ->
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
|
|
File diff suppressed because it is too large
Load diff
|
@ -7,11 +7,8 @@
|
||||||
*= require ./cropper.css
|
*= require ./cropper.css
|
||||||
*= require ./fineuploader.css
|
*= require ./fineuploader.css
|
||||||
*= require ./ui-lightness/jquery-ui-1.11.2.css
|
*= require ./ui-lightness/jquery-ui-1.11.2.css
|
||||||
*= require ./jquery.noty.css
|
|
||||||
*= require ./bootstrap-tokenfield.css
|
*= require ./bootstrap-tokenfield.css
|
||||||
*= require ./noty_theme_twitter.css
|
|
||||||
*= require ./sew.css
|
*= require ./sew.css
|
||||||
*= require ./medium.css
|
|
||||||
*= require ./fira-sans.css
|
*= require ./fira-sans.css
|
||||||
*= require ./svg-dimensions.css
|
*= require ./svg-dimensions.css
|
||||||
*= require ./zammad.scss
|
*= require ./zammad.scss
|
||||||
|
|
|
@ -1,105 +0,0 @@
|
||||||
|
|
||||||
/* CORE STYLES */
|
|
||||||
|
|
||||||
/* noty bar */
|
|
||||||
.noty_bar {
|
|
||||||
position: fixed;
|
|
||||||
display: none;
|
|
||||||
z-index: 9999999;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* noty_message */
|
|
||||||
.noty_bar .noty_message {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* noty close button */
|
|
||||||
.noty_bar .noty_close {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* noty modal */
|
|
||||||
.noty_modal {
|
|
||||||
position: fixed;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-color: #000;
|
|
||||||
z-index: 10000;
|
|
||||||
opacity: 0.6;
|
|
||||||
display: none;
|
|
||||||
left: 0;
|
|
||||||
top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* noty container for noty_layout_topLeft & noty_layout_topRight */
|
|
||||||
ul.noty_cont {
|
|
||||||
position: fixed;
|
|
||||||
z-index: 10000000;
|
|
||||||
margin: 0px;
|
|
||||||
padding: 0px;
|
|
||||||
list-style: none;
|
|
||||||
width: 300px;
|
|
||||||
}
|
|
||||||
ul.noty_cont li {
|
|
||||||
position: relative;
|
|
||||||
float: left;
|
|
||||||
clear: both;
|
|
||||||
list-style: none;
|
|
||||||
padding: 0px;
|
|
||||||
margin: 10px 0 0 0;
|
|
||||||
width: 300px; /* Fix for: http://bugs.jquery.com/ticket/2278 */
|
|
||||||
}
|
|
||||||
ul.noty_cont.noty_layout_topLeft {left:20px; top:20px;}
|
|
||||||
ul.noty_cont.noty_layout_topRight {right:40px; top:20px;}
|
|
||||||
ul.noty_cont.noty_layout_bottomLeft {left:20px; bottom:20px}
|
|
||||||
ul.noty_cont.noty_layout_bottomRight {right:40px; bottom:20px}
|
|
||||||
ul.noty_cont.noty_layout_topRight li {float:right}
|
|
||||||
|
|
||||||
/* LAYOUTS */
|
|
||||||
|
|
||||||
/* noty_layout_top */
|
|
||||||
.noty_bar.noty_layout_top {
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
-webkit-border-radius: 0px;
|
|
||||||
-moz-border-radius: 0px;
|
|
||||||
border-radius: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* noty_layout_bottom */
|
|
||||||
.noty_bar.noty_layout_bottom {
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
-webkit-border-radius: 0px;
|
|
||||||
-moz-border-radius: 0px;
|
|
||||||
border-radius: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* noty_layout_center */
|
|
||||||
.noty_bar.noty_layout_center {
|
|
||||||
top: 40%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* noty_layout_topLeft & noty_layout_topRight */
|
|
||||||
.noty_bar.noty_layout_topLeft,
|
|
||||||
.noty_bar.noty_layout_topRight,
|
|
||||||
.noty_bar.noty_layout_bottomLeft,
|
|
||||||
.noty_bar.noty_layout_bottomRight {
|
|
||||||
width: 100%;
|
|
||||||
clear: both;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.noty_bar.noty_layout_topLeft .noty_message,
|
|
||||||
.noty_bar.noty_layout_topRight .noty_message,
|
|
||||||
.noty_bar.noty_layout_bottomLeft .noty_message,
|
|
||||||
.noty_bar.noty_layout_bottomRight .noty_message {
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* noty_layout_topCenter */
|
|
||||||
.noty_bar.noty_layout_topCenter {
|
|
||||||
top: 20px;
|
|
||||||
}
|
|
|
@ -1,44 +0,0 @@
|
||||||
.Medium{
|
|
||||||
position: relative;
|
|
||||||
min-height: 10px;
|
|
||||||
}
|
|
||||||
.Medium-clear{
|
|
||||||
background: transparent !important;
|
|
||||||
background-color: transparent !important;
|
|
||||||
border-color: transparent !important;
|
|
||||||
}
|
|
||||||
.Medium,
|
|
||||||
.Medium p:first-child{
|
|
||||||
margin-top:0;
|
|
||||||
}
|
|
||||||
.Medium p:last-child{
|
|
||||||
margin-bottom:0;
|
|
||||||
}
|
|
||||||
.Medium p:empty {
|
|
||||||
display: block;
|
|
||||||
height: 1em;
|
|
||||||
}
|
|
||||||
.Medium-paste-hook{
|
|
||||||
position: absolute;
|
|
||||||
opacity:0;
|
|
||||||
}
|
|
||||||
.Medium-placeholder{
|
|
||||||
position: absolute;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
.Medium-placeholder div{
|
|
||||||
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
|
|
||||||
filter: alpha(opacity=50);
|
|
||||||
opacity: 0.5;
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
.Medium-placeholder-rich div{
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
.Medium-inline,
|
|
||||||
.Medium-placeholder-inline div,
|
|
||||||
.Medium-inlineRich,
|
|
||||||
.Medium-placeholder-inlineRich div{
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
|
@ -1,129 +0,0 @@
|
||||||
|
|
||||||
/* CORE STYLES*/
|
|
||||||
|
|
||||||
/* custom container */
|
|
||||||
.noty_custom_container.noty_theme_twitter.noty_layout_inline {
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* custom growl container */
|
|
||||||
.noty_custom_container.noty_theme_twitter.noty_layout_inline .noty_cont.noty_layout_inline {
|
|
||||||
position: static;
|
|
||||||
}
|
|
||||||
/* custom noty bar */
|
|
||||||
.noty_custom_container.noty_theme_twitter.noty_layout_inline .noty_bar {
|
|
||||||
position: static;
|
|
||||||
}
|
|
||||||
.noty_custom_container.noty_theme_twitter.noty_layout_inline .noty_bar .noty_message {
|
|
||||||
font-size: 13px;
|
|
||||||
padding: 4px;
|
|
||||||
}
|
|
||||||
.noty_custom_container.noty_theme_twitter.noty_layout_inline .noty_bar .noty_message .noty_buttons {
|
|
||||||
margin-top: -1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* noty_message */
|
|
||||||
.noty_bar.noty_theme_twitter .noty_message {
|
|
||||||
padding: 8px 14px;
|
|
||||||
}
|
|
||||||
/* noty_has_close_button */
|
|
||||||
.noty_bar.noty_theme_twitter.noty_closable .noty_message {
|
|
||||||
padding: 8px 35px 8px 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* noty_buttons */
|
|
||||||
.noty_bar.noty_theme_twitter .noty_message .noty_buttons {
|
|
||||||
float: right;
|
|
||||||
margin-top: -5px;
|
|
||||||
margin-left: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* noty_button */
|
|
||||||
.noty_bar.noty_theme_twitter .noty_message .noty_buttons button {
|
|
||||||
margin-left: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* noty close button */
|
|
||||||
.noty_bar.noty_theme_twitter .noty_close {
|
|
||||||
position: absolute;
|
|
||||||
top: 7px;
|
|
||||||
right: 16px;
|
|
||||||
font-size: 18px;
|
|
||||||
line-height: 18px;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #000;
|
|
||||||
opacity: 0.2;
|
|
||||||
text-shadow: 0 1px 0 #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* noty close button hover */
|
|
||||||
.noty_bar.noty_theme_twitter .noty_close:hover {
|
|
||||||
opacity: 0.4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.noty_bar.noty_theme_twitter .noty_close:after {
|
|
||||||
content: "x";
|
|
||||||
}
|
|
||||||
|
|
||||||
/* noty modal */
|
|
||||||
.noty_modal.noty_theme_twitter {
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* LAYOUTS */
|
|
||||||
|
|
||||||
/* noty_layout_topLeft & noty_layout_topRight */
|
|
||||||
.noty_bar.noty_theme_twitter.noty_layout_center,
|
|
||||||
.noty_bar.noty_theme_twitter.noty_layout_topCenter,
|
|
||||||
.noty_bar.noty_theme_twitter.noty_layout_topLeft,
|
|
||||||
.noty_bar.noty_theme_twitter.noty_layout_topRight,
|
|
||||||
.noty_bar.noty_theme_twitter.noty_layout_bottomLeft,
|
|
||||||
.noty_bar.noty_theme_twitter.noty_layout_bottomRight {
|
|
||||||
-webkit-border-radius: 4px;
|
|
||||||
-moz-border-radius: 4px;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
.noty_bar.noty_theme_twitter.noty_layout_topLeft .noty_message .noty_buttons,
|
|
||||||
.noty_bar.noty_theme_twitter.noty_layout_topRight .noty_message .noty_buttons,
|
|
||||||
.noty_bar.noty_theme_twitter.noty_layout_bottomLeft .noty_message .noty_buttons,
|
|
||||||
.noty_bar.noty_theme_twitter.noty_layout_bottomRight .noty_message .noty_buttons {
|
|
||||||
float: none;
|
|
||||||
border-top: 1px solid #FBEED5;
|
|
||||||
margin-left: 0;
|
|
||||||
margin-top: 10px;
|
|
||||||
padding-top: 10px;
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.noty_bar.noty_theme_twitter.noty_layout_center .noty_message .noty_buttons,
|
|
||||||
.noty_bar.noty_theme_twitter.noty_layout_topCenter .noty_message .noty_buttons {
|
|
||||||
margin-left: 15px;
|
|
||||||
margin-top: -2px
|
|
||||||
}
|
|
||||||
|
|
||||||
/* NOTIFICATION TYPES */
|
|
||||||
|
|
||||||
/* noty_alert */
|
|
||||||
.noty_bar.noty_theme_twitter.noty_alert {
|
|
||||||
background-color: #FCF8E3;
|
|
||||||
border: 1px solid #FBEED5;
|
|
||||||
color: #C09853;
|
|
||||||
}
|
|
||||||
/* noty_error */
|
|
||||||
.noty_bar.noty_theme_twitter.noty_error {
|
|
||||||
background-color: #F2DEDE;
|
|
||||||
border: 1px solid #EED3D7;
|
|
||||||
color: #B94A48;
|
|
||||||
}
|
|
||||||
/* noty_success */
|
|
||||||
.noty_bar.noty_theme_twitter.noty_success {
|
|
||||||
background-color: #DFF0D8;
|
|
||||||
border: 1px solid #D6E9C6;
|
|
||||||
color: #468847;
|
|
||||||
}
|
|
||||||
/* noty_information */
|
|
||||||
.noty_bar.noty_theme_twitter.noty_information {
|
|
||||||
background-color: #D9EDF7;
|
|
||||||
border: 1px solid #BCE8F1;
|
|
||||||
color: #3A87AD;
|
|
||||||
}
|
|
|
@ -6410,6 +6410,93 @@ output {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#notify {
|
||||||
|
position: absolute;
|
||||||
|
top: 20px;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
@extend .zIndex-10;
|
||||||
|
|
||||||
|
.defaultTheme {
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.noty_bar {
|
||||||
|
max-width: 500px;
|
||||||
|
text-align: center;
|
||||||
|
margin: 0 auto 10px;
|
||||||
|
|
||||||
|
.noty_message {
|
||||||
|
pointer-events: auto;
|
||||||
|
display: inline-block;
|
||||||
|
background: white;
|
||||||
|
border: 1px solid hsl(0,0%,80%);
|
||||||
|
border-bottom-color: hsl(0,0%,70%);
|
||||||
|
padding: 10px 15px;
|
||||||
|
border-radius: 3px;
|
||||||
|
color: hsl(202,5%,18%);
|
||||||
|
box-shadow:
|
||||||
|
0 6px 12px hsla(210,17%,10%,.21);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.noty_type_success .noty_message {
|
||||||
|
border-color: hsl(145,51%,70%);
|
||||||
|
background: hsl(145,51%,77%);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.noty_type_alert .noty_message {
|
||||||
|
border-color: hsl(43,92%,71%);
|
||||||
|
background: hsl(42,94%,80%);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.noty_type_error .noty_message {
|
||||||
|
border-color: hsl(9,72%,62%);
|
||||||
|
background: hsl(12,73%,66%);
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: inherit;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.animated {
|
||||||
|
animation-duration: 300ms;
|
||||||
|
animation-fill-mode: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fadeInDown {
|
||||||
|
animation-name: fadeInDown;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeInDown {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translate3d(0, -50%, 0);
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.fadeOutDown {
|
||||||
|
animation-name: fadeOutDown;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fadeOutDown {
|
||||||
|
from {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translate3d(0, 50%, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
|
||||||
----------------
|
----------------
|
||||||
|
|
Loading…
Reference in a new issue