Merge pull request #8 from AlexandreJunges/master

Created Metro style
2014-01-17 23:31:02 -08:00
parent 27eea96855 1b111dfcfa
commit 1421a03303
4 changed files with 116 additions and 0 deletions
@@ -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;
+    }
@@ -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"
+        }
+    }
+});
@@ -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>