nightmare/jquery-notify
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Created Metro style

Browse Source
This commit is contained in:
Alexandre Junges
2014-01-17 13:15:09 -02:00
parent 27eea96855
commit 1b111dfcfa
4 changed files with 116 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/styles/metro/notify-metro.css
Vendored
+40
View File
@@ -0,0 +1,40 @@
.notifyjs-metro-base {
position: relative;
min-height: 52px;
color:#444;
}
.notifyjs-metro-base .image {
display: table;
position: absolute;
height: auto;
width: auto;
left: 25px;
top: 50%;
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.notifyjs-metro-base .text-wrapper {
display: inline-block;
vertical-align: top;
text-align: left;
margin: 10px 10px 10px 52px;
clear: both;
font-family: 'Segoe UI';
}
.notifyjs-metro-base .title {
font-size: 15px;
font-weight: bold;
}
.notifyjs-metro-base .text {
font-size: 12px;
font-weight: normal;
vertical-align: middle;
}
dist/styles/metro/notify-metro.js
Vendored
+39
View File
@@ -0,0 +1,39 @@
$.notify.addStyle("metro", {
html:
"<div>" +
"<div class='image' data-notify-html='image'/>" +
"<div class='text-wrapper'>" +
"<div class='title' data-notify-html='title'/>" +
"<div class='text' data-notify-html='text'/>" +
"</div>" +
"</div>",
classes: {
error: {
"color": "#fafafa !important",
"background-color": "#F71919",
"border": "1px solid #FF0026"
},
success: {
"background-color": "#32CD32",
"border": "1px solid #4DB149"
},
info: {
"color": "#fafafa !important",
"background-color": "#1E90FF",
"border": "1px solid #1E90FF"
},
warning: {
"background-color": "#FAFA47",
"border": "1px solid #EEEE45"
},
black: {
"color": "#fafafa !important",
"background-color": "#333",
"border": "1px solid #000"
},
white: {
"background-color": "#f1f1f1",
"border": "1px solid #ddd"
}
}
});
examples/images/Mail.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1010 B

examples/metro.html
+37
View File
@@ -0,0 +1,37 @@
<html>
<body>
<head>
<link href="../dist/styles/metro/notify-metro.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="../dist/notify.js"></script>
<script src="../dist/styles/metro/notify-metro.js"></script>
</head>
<h2>Index</h2>
<button onclick="notify('white')">White</button>
<button onclick="notify('black')">Black</button>
<button onclick="notify('error')">Err</button>
<button onclick="notify('success')">Success</button>
<button onclick="notify('warning')">Warning</button>
<button onclick="notify('info')">Info</button>
<div style="background-image:url('/Content/mail.png')"></div>
<script type="text/javascript">
function notify(style) {
$.notify({
title: 'Email Notification',
text: 'You received an e-mail from your boss. You should read it right now!',
image: "<img src='images/Mail.png'/>"
}, {
style: 'metro',
className: style,
autoHide: false,
clickToHide: true
});
}
</script>
</body>
</html>