diff --git a/demo.css b/demo.css index 383ec35..49cf1b4 100644 --- a/demo.css +++ b/demo.css @@ -5,33 +5,67 @@ body { } body { - font-family: 'PT Sans', sans-serif; + font-family: 'Roboto', sans-serif; width: 100%; height: 100%; background-color: #1d1d22; } -form { - width: 40%; - margin: 15px auto; - padding: 15px 35px; - color: #fdfeff; - background-color: #18181b; +.container-form { + position: relative; + overflow: hidden; + height: 100%; + width: 70%; + margin: 25px auto; + display: flex; + background-color: #0d1117; border: 1px solid #c6c6c6; border-radius: 5px; box-shadow: 0 0 8px#999999; +} + +form { + width: 50%; + min-width: 200px; + padding: 15px 35px; + color: #fdfeff; box-sizing: border-box; + justify-content: center; + flex-grow: 1; } form h1 { font-size: 3em; font-weight: 300; text-align: center; - color: #20a0eb; + /*color: #2196f3;*/ + color: #2196f3; padding-top: 0; margin-top: 0; } +.code { + position: relative; + overflow: auto; + width: 50%; + color: #f8f8f2; + font-size: 1.2em; + border-left: 1px solid #c6c6c6; + box-shadow: 0 0 8px#999999; + justify-content: left; + flex-grow: 1; + display: flex; + align-items: left; + padding: 0 !important; + margin: 0 !important; +} + +pre { + margin: 0 !important; + padding: 0 !important; + white-space: pre; +} + input, select { border: 1px solid #c6c6c6; @@ -43,7 +77,7 @@ select { .group { position: relative; - margin: 40px 0; + margin: 50px 0; box-sizing: border-box; } @@ -114,8 +148,9 @@ select { .btn { background: #fff; + background-position: center; color: #959595; - border: none; + border: 0; padding: 10px 20px; font-size: 1.1em; border-radius: 3px; @@ -123,7 +158,8 @@ select { text-decoration: none; outline: none; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); - transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); + transition: background 400ms; + /*transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);*/ } .btn-box { @@ -131,27 +167,42 @@ select { margin: 20px 10px; } -.btn.btn-submit { +.btn { cursor: pointer; background-color: #2196f3; color: #deeffd; } -.btn.btn-submit:hover { - background-color: #0d8bf1; +.btn:hover { + background: #0875ce; color: #fff; } -.btn.btn-submit:active { - background-color: #2196f3; - color: #061e31; +.ripple { + position: relative; + overflow: hidden; + transform: translate3d(0, 0, 0); } -.btn.btn-cancel { - background: #eee; +.ripple:after { + content: ""; + display: block; + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + pointer-events: none; + background-image: radial-gradient(circle, #fff 10%, transparent 10.01%); + background-repeat: no-repeat; + background-position: 50%; + transform: scale(10, 10); + opacity: 0; + transition: transform .5s, opacity 1s; } -.btn.btn-cancel:hover { - background: #e1e1e1; - color: #8b8b8b; +.ripple:active:after { + transform: scale(0, 0); + opacity: .3; + transition: 0s; } \ No newline at end of file diff --git a/index.html b/index.html index bacca50..b883272 100644 --- a/index.html +++ b/index.html @@ -8,67 +8,141 @@ Notifications + -
-

Notifications

-
- - - -
-
- - - -
-
- - - -
-
- + + +
+
+ + + +
+
+ + + +
+
+ - - -
-
- - - + + +
+
+ +
+
+
+ 
+
+/*
+  position may be:
+    top-right //default value
+    bottom-right
+    top-left
+    bottom-left
+    center
+  default duration value: 4000(ms)
+*/
+// Example of using
+const popup = Notification({
+  position: 'top-left',
+  duration: 3500
+});
+
+popup.error({
+  title: 'Error',
+  message: 'An error has occurred'
+});
+/*
+  Available methods:
+    error
+    warning
+    success
+    info
+    dialog 
+    
+  If you use dialog - 
+    the third parameter is the callback function
+*/  
+
+
-
- -
- + +
+ + diff --git a/notification.css b/notification.css index f54debc..f91e090 100644 --- a/notification.css +++ b/notification.css @@ -2,7 +2,7 @@ .notification-container { position: fixed; - font-family: "Lato", sans-serif; + font-family: 'Roboto', sans-serif; font-size: 1.1em; box-sizing: border-box; z-index: 1000; @@ -36,6 +36,11 @@ bottom: 10px; } +.notification-container.top-right .notification, +.notification-container.bottom-right .notification { + margin-left: auto; +} + .notification { position: relative; overflow: hidden; @@ -51,6 +56,7 @@ -moz-user-select: none; -ms-user-select: none; user-select: none; + z-index: 100; } .notification:hover { @@ -59,10 +65,27 @@ cursor: pointer; } +.overlay { + position: fixed; + top: 0; + left: 0; + height: 100%; + width: 100%; + background-color: #000; + background: rgba(0, 0, 0, .5); + z-index: 10; + display: none; +} + +.notification:not(.notification-default) { + width: 310px +} + .notification-default { background: rgba(255, 255, 255, 0.99); color: rgba(0, 0, 0, 0.8); border-left: 4px solid rgb(194, 191, 191); + width: 350px; } .notification-error { @@ -263,11 +286,14 @@ .notification-action:before { content: "\2714"; +} + +.notification-action { color: green; } .notification-action:hover { - color: #1983da; + color: rgb(4, 173, 4); } @keyframes left-slide-in { diff --git a/notification.js b/notification.js index 6732eeb..6600d90 100644 --- a/notification.js +++ b/notification.js @@ -1,7 +1,7 @@ function Notification(opts) { const defaultOpts = { - position: 'bottom-right', - duration: 3000 + position: 'top-right', + duration: 4000 }; opts = Object.assign({}, defaultOpts, opts); opts.duration = parseInt(opts.duration); @@ -19,6 +19,7 @@ function Notification(opts) { const closeSelector = '.notification-close'; const actionButSelector = '.notification-action'; const cancelButSelector = '.notification-cancel'; + const overlaySelector = '.overlay'; // class, defaultTitle and defaultMessage const dataByType = { @@ -42,7 +43,6 @@ function Notification(opts) { 'defaultTitle': 'Warning', 'defaultMessage': 'default Warning' }, - 'error': { 'classType': 'notification-error', 'defaultTitle': 'Error', @@ -50,6 +50,10 @@ function Notification(opts) { } }; + const setPosition = (newPosition) => { + opts.position = newPosition; + } + const tempatePopup = () => { return ` @@ -106,6 +110,7 @@ function Notification(opts) { // add buttons if confirm dialog if (type == 'dialog') { elPopup.insertAdjacentHTML('beforeend', dialogButtons()); + document.querySelector(overlaySelector).style.display = 'block'; } // add element to container in the required sequence @@ -168,6 +173,10 @@ function Notification(opts) { setTimeout(function() { if (elPopup.parentNode == container) { container.removeChild(elPopup); + + if (opts.type == 'dialog') { + document.querySelector(overlaySelector).style.display = 'none'; + } } // Remove container if it empty @@ -178,6 +187,7 @@ function Notification(opts) { } const showPopup = ({ type, title, message, callback = null } = {}) => { + opts.type = type; const elPopup = createPopup(type); // set title and message to created element @@ -213,5 +223,5 @@ function Notification(opts) { const success = ({ title, message }) => showPopup({ type: 'success', title, message }); const warning = ({ title, message }) => showPopup({ type: 'warning', title, message }); const error = ({ title, message }) => showPopup({ type: 'error', title, message }); - return { dialog, info, success, warning, error }; + return { dialog, info, success, warning, error, setPosition }; } \ No newline at end of file