{"id":47,"date":"2018-04-27T14:55:50","date_gmt":"2018-04-27T14:55:50","guid":{"rendered":"https:\/\/sites.neoninspire.com\/style-guide\/?page_id=47"},"modified":"2018-06-26T22:12:42","modified_gmt":"2018-06-26T22:12:42","slug":"notifications","status":"publish","type":"page","link":"https:\/\/sites.neoninspire.com\/style-guide\/components\/notifications\/","title":{"rendered":"Notifications"},"content":{"rendered":"<p>Components<\/p>\n<h1>\n\t\tNotifications<br \/>\n\t<\/h1>\n<h4>\n\t\tNotifications help alert our customers to new messages, product updates, and changes to our terms and policy.<br \/>\n\t<\/h4>\n<h4>\n\t\t<a href=\"#\" title=\"Toast Notification\" target=\"_self\"><br \/>\n\t\tToast Notification<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<pre>.notification_text {\nfont-family: Lato-Regular;\nfont-size: 12px;\ncolor: #FFFFFF;\nletter-spacing: -0px;\ntext-align: left;\n}\n<\/pre>\n<h2>\n\t\tVariations<br \/>\n\t<\/h2>\n<p>There are 5 variations of notifications<\/p>\n<ul>\n<li>info<\/li>\n<li>success<\/li>\n<li>warning<\/li>\n<li>error<\/li>\n<li>toolbar<\/li>\n<\/ul>\n<h4>\n\t\t<a href=\"#\" title=\"Info\" target=\"_self\"><br \/>\n\t\tInfo<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<pre>.notification_info {\nbackground: #0074D9;\nfont-family: Lato-Regular;\nfont-size: 12px;\ncolor: #FFFFFF;\nletter-spacing: 0;\nwidth: 320px;\nheight: 34px;\n}\n.notification_icon {\nfont-family: \"Font Awesome 5 Solid\";\ncontent: fa-times-circle;\n}\n.close_icon {\nfont-family: \"Font Awesome 5 Solid\";\ncontent: fa-times;\n}\n<\/pre>\n<h4>\n\t\t<a href=\"#\" title=\"Success\" target=\"_self\"><br \/>\n\t\tSuccess<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<pre>.notification_success {\nbackground: #008000;\nfont-family: Lato-Regular;\nfont-size: 12px;\ncolor: #FFFFFF;\nletter-spacing: 0;\nwidth: 320px;\nheight: 34px;\n}\n.notification_icon {\nfont-family: \"Font Awesome 5 Solid\";\ncontent: fa-check-circle;\n}\n.close_icon {\nfont-family: \"Font Awesome 5 Solid\";\ncontent: fa-times;\n}\n<\/pre>\n<h4>\n\t\t<a href=\"#\" title=\"Warning\" target=\"_self\"><br \/>\n\t\tWarning<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<pre>.notification_warning {\nbackground: #F49D10;\nfont-family: Lato-Regular;\nfont-size: 12px;\ncolor: #FFFFFF;\nletter-spacing: 0;\nwidth: 320px;\nheight: 34px;\n}\n.notification_icon {\nfont-family: \"Font Awesome 5 Solid\";\ncontent: fa-exclamation-circle;\n}\n.close_icon {\nfont-family: \"Font Awesome 5 Solid\";\ncontent: fa-times;\n}\n<\/pre>\n<h4>\n\t\t<a href=\"#\" title=\"Error\" target=\"_self\"><br \/>\n\t\tError<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<pre>.notification_error {\nbackground: #F49D10;\nfont-family: Lato-Regular;\nfont-size: 12px;\ncolor: #FFFFFF;\nletter-spacing: 0;\nwidth: 320px;\nheight: 34px;\n}\n.notification_icon {\nfont-family: \"Font Awesome 5 Solid\";\ncontent: fa-times-circle;\n}\n.close_icon {\nfont-family: \"Font Awesome 5 Solid\";\ncontent: fa-times;\n}\n<\/pre>\n<h4>\n\t\t<a href=\"#\" title=\"Toolbar\" target=\"_self\"><br \/>\n\t\tToolbar<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<p>\t\t\t\t<img decoding=\"async\" src=\"https:\/\/sites.neoninspire.com\/style-guide\/wp-content\/uploads\/sites\/141\/2018\/05\/toolbar.svg\" alt=\"toolbar\" itemprop=\"image\" height=\"36px\" width=\"36px\" title=\"toolbar\"  \/><\/p>\n<pre>.notification_text {\nfont-family: Lato-Bold;\nfont-size: 14px;\ncolor: #FFFFFF;\nletter-spacing: -0px;\ntext-align: left;\n}\n.notification_button {\nbackground: rgba(220,20,60,0.87);\nbox-shadow: 0 0 2px 0 rgba(0,0,0,0.14), 0 2px 2px 0 rgba(0,0,0,0.12), 0 1px 3px 0 rgba(0,0,0,0.20);\n}\n<\/pre>\n<h4>\n\t\t<a href=\"#\" title=\"Inline notifications\" target=\"_self\"><br \/>\n\t\tInline notifications<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<p>Inline notifications appear near the related item. We use these in form to indicate a validation error or success. See <a href=\"https:\/\/sites.neoninspire.com\/style-guide\/components\/text-fields\">Text Fields.<\/a><\/p>\n<h2>\n\t\tOverview of CSS Classes<br \/>\n\t<\/h2>\n<h5>\n\t\tSelector<br \/>\n\t<\/h5>\n<h5>\n\t\tSummary<br \/>\n\t<\/h5>\n<h5>\n\t\tParent Selector<br \/>\n\t<\/h5>\n<p><em>.notification-text<\/em><\/p>\n<p><em>.notification-info<\/em><\/p>\n<p><em>.notification-icon<\/em><\/p>\n<p><em>.close-icon<\/em><\/p>\n<p><em>.notification-text-success<\/em><\/p>\n<p><em>.notification-text-warning<\/em><\/p>\n<p><em>.notification-text-error<\/em><\/p>\n<p>default text style for notifications\u00a0<\/p>\n<p>notification used to convey information to users<\/p>\n<p>icon used on notification messages<\/p>\n<p>icon used for closing notification messages<\/p>\n<p>notification used to indicate a user&#8217;s action has been successful<\/p>\n<p>notification used for alerting a user to a potential irreversible action or problem<\/p>\n<p>notification used for indicating an error that has occurred in a user&#8217;s system<\/p>\n<h4>\n\t\t<a href=\"#\" title=\"Notification Panel\" target=\"_self\"><br \/>\n\t\tNotification Panel<br \/>\n\t\t<\/a><br \/>\n\t<\/h4>\n<p>\t\t\t\t<img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/sites.neoninspire.com\/style-guide\/wp-content\/uploads\/sites\/141\/2018\/06\/Screen-Shot-2018-06-26-at-2.20.31-PM.png\" alt=\"Screen Shot 2018-06-26 at 2.20.31 PM\" itemprop=\"image\" height=\"925\" width=\"600\" title=\"Screen Shot 2018-06-26 at 2.20.31 PM\"  \/><br \/>\n\thtml coming<\/p>\n<p>Clicking the title will take the user to the duplicate scan page.<\/p>\n<p><strong>Components<\/strong><\/p>\n<ul>\n<li>Type &#8211; &#8220;Duplicate Scan&#8221;<\/li>\n<li>Button &#8211; &#8220;Mark as Unread&#8221;<\/li>\n<li>Title (Large blue text) &#8220;Your &lt;&lt;name of scan&gt;&gt; is Complete&#8221;<\/li>\n<li>Amount of duplicates found<\/li>\n<li>Time of completion (relative time)<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Components Notifications Notifications help alert our customers to new messages, product updates, and changes to our terms and policy. Toast Notification .notification_text { font-family: Lato-Regular; font-size: 12px; color: #FFFFFF; letter-spacing: -0px; text-align: left; } Variations There are 5 variations of notifications info success warning error toolbar Info .notification_info { background: #0074D9; font-family: Lato-Regular; font-size: 12px;&hellip;<\/p>\n","protected":false},"author":32,"featured_media":0,"parent":380,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"inline_featured_image":false,"footnotes":""},"class_list":["post-47","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/47","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/users\/32"}],"replies":[{"embeddable":true,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/comments?post=47"}],"version-history":[{"count":13,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/47\/revisions"}],"predecessor-version":[{"id":1224,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/47\/revisions\/1224"}],"up":[{"embeddable":true,"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/pages\/380"}],"wp:attachment":[{"href":"https:\/\/sites.neoninspire.com\/style-guide\/wp-json\/wp\/v2\/media?parent=47"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}