"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[7069],{3905:function(e,t,a){a.d(t,{Zo:function(){return d},kt:function(){return p}});var s=a(7294);function i(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function n(e,t){var a=Object.keys(e);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(e);t&&(s=s.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),a.push.apply(a,s)}return a}function l(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?n(Object(a),!0).forEach((function(t){i(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):n(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}function r(e,t){if(null==e)return{};var a,s,i=function(e,t){if(null==e)return{};var a,s,i={},n=Object.keys(e);for(s=0;s<n.length;s++)a=n[s],t.indexOf(a)>=0||(i[a]=e[a]);return i}(e,t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);for(s=0;s<n.length;s++)a=n[s],t.indexOf(a)>=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(i[a]=e[a])}return i}var o=s.createContext({}),c=function(e){var t=s.useContext(o),a=t;return e&&(a="function"==typeof e?e(t):l(l({},t),e)),a},d=function(e){var t=c(e.components);return s.createElement(o.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return s.createElement(s.Fragment,{},t)}},m=s.forwardRef((function(e,t){var a=e.components,i=e.mdxType,n=e.originalType,o=e.parentName,d=r(e,["components","mdxType","originalType","parentName"]),m=c(a),p=i,h=m["".concat(o,".").concat(p)]||m[p]||u[p]||n;return a?s.createElement(h,l(l({ref:t},d),{},{components:a})):s.createElement(h,l({ref:t},d))}));function p(e,t){var a=arguments,i=t&&t.mdxType;if("string"==typeof e||i){var n=a.length,l=new Array(n);l[0]=m;var r={};for(var o in t)hasOwnProperty.call(t,o)&&(r[o]=t[o]);r.originalType=e,r.mdxType="string"==typeof e?e:i,l[1]=r;for(var c=2;c<n;c++)l[c]=a[c];return s.createElement.apply(null,l)}return s.createElement.apply(null,a)}m.displayName="MDXCreateElement"},2695:function(e,t,a){a.d(t,{Z:function(){return r}});var s=a(7462),i=a(3366),n=a(7294),l=["isBad","isGood","children","disableFullscreen","limitWidth"];function r(e){var t=e.isBad,a=e.isGood,r=e.children,o=e.disableFullscreen,c=e.limitWidth,d=(0,i.Z)(e,l),u=(0,n.useState)(!1),m=u[0],p=u[1];return n.createElement("div",{className:"preview-box-wrapper",style:c?{width:c,display:"table",margin:"0 auto"}:{}},!o&&n.createElement("button",{"aria-label":m?"Minimize the example":"Fullscreen the example",className:"preview-box-fullscreen-toggle",onClick:function(e){var t=e.target.closest(".preview-box-wrapper");m?document.exitFullscreen?document.exitFullscreen():document.webkitExitFullscreen?document.webkitExitFullscreen():document.msExitFullscreen&&document.msExitFullscreen():t.requestFullscreen?t.requestFullscreen():t.webkitRequestFullscreen?t.webkitRequestFullscreen():t.msRequestFullscreen&&t.msRequestFullscreen(),p(!m)}},m?n.createElement("svg",{"aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",x:"0",y:"0",viewBox:"0 0 24 24"},n.createElement("path",{d:"M19.707 18.293a1 1 0 01-1.414 1.414L16 17.414V18a1 1 0 01-2 0v-3a1 1 0 011-1h3a1 1 0 010 2h-.586zM9 14H6a1 1 0 000 2h.586l-2.293 2.293a1 1 0 001.414 1.414L8 17.414V18a1 1 0 002 0v-3a1 1 0 00-1-1zm0-9a1 1 0 00-1 1v.586L5.707 4.293a1 1 0 00-1.414 1.414L6.586 8H6a1 1 0 000 2h3a1 1 0 001-1V6a1 1 0 00-1-1zm6 5h3a1 1 0 000-2h-.586l2.293-2.293a1 1 0 00-1.414-1.414L16 6.586V6a1 1 0 00-2 0v3a1 1 0 001 1z"})):n.createElement("svg",{"aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",x:"0",y:"0",viewBox:"26 26 48 48"},n.createElement("path",{d:"M54.347 57.882A8.96 8.96 0 0150 59a8.96 8.96 0 01-4.347-1.118L40.736 62.8c-.38.38-.257.701.29.701h.98A2.503 2.503 0 0144.5 66c0 1.39-1.122 2.5-2.507 2.5h-7.986a2.505 2.505 0 01-2.507-2.507v-7.986A2.502 2.502 0 0134 55.5a2.49 2.49 0 012.5 2.493v.98c0 .547.314.678.7.29l4.918-4.916A8.96 8.96 0 0141 50a8.96 8.96 0 011.118-4.347L37.2 40.736c-.38-.38-.701-.257-.701.29v.98A2.503 2.503 0 0134 44.5c-1.39 0-2.5-1.122-2.5-2.507v-7.986a2.505 2.505 0 012.507-2.507h7.986A2.502 2.502 0 0144.5 34a2.49 2.49 0 01-2.493 2.5h-.98c-.547 0-.678.314-.29.7l4.916 4.918A8.96 8.96 0 0150 41a8.96 8.96 0 014.347 1.118l4.917-4.917c.38-.38.257-.701-.29-.701h-.98A2.503 2.503 0 0155.5 34c0-1.39 1.122-2.5 2.507-2.5h7.986a2.505 2.505 0 012.507 2.507v7.986A2.502 2.502 0 0166 44.5a2.49 2.49 0 01-2.5-2.493v-.98c0-.547-.314-.678-.7-.29l-4.918 4.916A8.96 8.96 0 0159 50a8.96 8.96 0 01-1.118 4.347l4.917 4.917c.38.38.701.257.701-.29v-.98A2.503 2.503 0 0166 55.5c1.39 0 2.5 1.122 2.5 2.507v7.986a2.505 2.505 0 01-2.507 2.507h-7.986A2.502 2.502 0 0155.5 66a2.49 2.49 0 012.493-2.5h.98c.547 0 .678-.314.29-.7l-4.916-4.918zM50 54a4 4 0 100-8 4 4 0 000 8z"}))),t&&n.createElement("div",{className:"is-bad-example style-red"},n.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",x:"0",y:"0",viewBox:"2 2 12 12"},n.createElement("path",{d:"M3.3 12.7c.2.2.4.3.7.3s.5-.1.7-.3L8 9.4l3.3 3.3c.2.2.5.3.7.3s.5-.1.7-.3c.4-.4.4-1 0-1.4L9.4 8l3.3-3.3c.4-.4.4-1 0-1.4s-1-.4-1.4 0L8 6.6 4.7 3.3c-.4-.4-1-.4-1.4 0s-.4 1 0 1.4L6.6 8l-3.3 3.3c-.4.4-.4 1 0 1.4z"}))),a&&n.createElement("div",{className:"is-good-example style-green"},n.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",x:"0",y:"0",viewBox:"0 0 18 18"},n.createElement("path",{d:"M5.056 15.04a1.5 1.5 0 002.217-.119l10.17-12.476A1.5 1.5 0 0015.118.55L6.007 11.758l-3.453-3.41a1.5 1.5 0 10-2.109 2.133l4.611 4.56"}))),n.createElement("iframe",(0,s.Z)({width:"100%",className:"docus-preview-box"+(m?" is-fullscreen":""),srcDoc:r},d)))}},8163:function(e,t,a){a.r(t),a.d(t,{frontMatter:function(){return o},contentTitle:function(){return c},metadata:function(){return d},toc:function(){return u},default:function(){return p}});var s=a(7462),i=a(3366),n=(a(7294),a(3905)),l=a(2695),r=["components"],o={title:"Alerts"},c=void 0,d={unversionedId:"components/alert",id:"components/alert",isDocsHomePage:!1,title:"Alerts",description:"Alerts are a great way to communicate with users, to show errors warnings, tips, and much more ideas an alert can be helpful.",source:"@site/docs/components/alert.mdx",sourceDirName:"components",slug:"/components/alert",permalink:"/docs/components/alert",editUrl:"https://github.com/amir2mi/flatifycss/tree/master/website/docs/components/alert.mdx",tags:[],version:"current",frontMatter:{title:"Alerts"},sidebar:"tutorialSidebar",previous:{title:"Accordion",permalink:"/docs/components/accordion"},next:{title:"Backdrop layer",permalink:"/docs/components/backdrop-layer"}},u=[{value:"A simple alert",id:"a-simple-alert",children:[],level:3},{value:"Colors",id:"colors",children:[],level:3},{value:"Dismissable",id:"dismissable",children:[],level:3},{value:"With icon",id:"with-icon",children:[],level:3},{value:"Customization",id:"customization",children:[],level:3}],m={toc:u};function p(e){var t=e.components,a=(0,i.Z)(e,r);return(0,n.kt)("wrapper",(0,s.Z)({},m,a,{components:t,mdxType:"MDXLayout"}),(0,n.kt)("p",null,"Alerts are a great way to communicate with users, to show errors warnings, tips, and much more ideas an alert can be helpful.",(0,n.kt)("br",{parentName:"p"}),"\n","Alerts can be dismissable so if users do not want to see them again they can close it."),(0,n.kt)("h3",{id:"a-simple-alert"},"A simple alert"),(0,n.kt)("p",null,"Any HTML tag can be alert with the ",(0,n.kt)("inlineCode",{parentName:"p"},".alert")," class, however, a ",(0,n.kt)("inlineCode",{parentName:"p"},"<div>")," with paragraphs in it is the most common choice."),(0,n.kt)(l.Z,{height:"120px",children:'\n<!DOCTYPE html>\n<html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatifycss/dist/css/flatify.min.css" /> <title>Alerts</title> </head> <body> <div class="flex-center" style="flex-wrap: wrap"> <div class="alert"> I am an alert to notify you about how great you are. </div> </div> </body>\n</html>\n',mdxType:"PreviewBox"}),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-html",metastring:'title="index.html"',title:'"index.html"'},'<div class="alert">...</div>\n')),(0,n.kt)("h3",{id:"colors"},"Colors"),(0,n.kt)("p",null,"Like any other component, alerts can have different colors by adding ",(0,n.kt)("a",{parentName:"p",href:"/docs/helpers/color-setters"},"color setter classes"),"."),(0,n.kt)("div",{className:"admonition admonition-success alert alert--success"},(0,n.kt)("div",{parentName:"div",className:"admonition-heading"},(0,n.kt)("h5",{parentName:"div"},(0,n.kt)("span",{parentName:"h5",className:"admonition-icon"},(0,n.kt)("svg",{parentName:"span",xmlns:"http://www.w3.org/2000/svg",width:"12",height:"16",viewBox:"0 0 12 16"},(0,n.kt)("path",{parentName:"svg",fillRule:"evenodd",d:"M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"}))),"Light theme")),(0,n.kt)("div",{parentName:"div",className:"admonition-content"},(0,n.kt)("p",{parentName:"div"},"Alerts can have the light theme to gain less attention since you can set color setter helper class with ",(0,n.kt)("inlineCode",{parentName:"p"},"-light")," suffix, e.g. ",(0,n.kt)("inlineCode",{parentName:"p"},"style-danger-light"),"."))),(0,n.kt)(l.Z,{height:"450px",children:'\n<!DOCTYPE html>\n<html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatifycss/dist/css/flatify.min.css" /> <title>Alerts</title> <style> .alert{ margin: 10px; } </style> </head> <body> <div class="flex-center" style="flex-wrap: wrap"> <div class="alert style-info"> I am an alert to notify you about how great you are. </div> <div class="alert style-info-light"> I am an alert to notify you about how great you are. </div> <div class="alert style-success"> I am an alert to notify you about how great you are. </div> <div class="alert style-success-light"> I am an alert to notify you about how great you are. </div> <div class="alert style-danger"> I am an alert to notify you about how great you are. </div> <div class="alert style-danger-light"> I am an alert to notify you about how great you are. </div> <div class="alert style-purple"> I am an alert to notify you about how great you are. </div> <div class="alert style-purple-light"> I am an alert to notify you about how great you are. </div> </div> </body>\n</html>\n',mdxType:"PreviewBox"}),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-html",metastring:'title="index.html"',title:'"index.html"'},'<div class="alert style-info">...</div>\n\n<div class="alert style-info-light">...</div>\n\n<div class="alert style-success">...</div>\n\n<div class="alert style-success-light">...</div>\n\n<div class="alert style-danger">...</div>\n\n<div class="alert style-danger-light">...</div>\n\n<div class="alert style-purple">...</div>\n\n<div class="alert style-purple-light">...</div>\n')),(0,n.kt)("h3",{id:"dismissable"},"Dismissable"),(0,n.kt)("p",null,"Alerts might be dismissable in this case implementation of this feature is so simple, first, you need to make sure you are using the flatify JS file on your web page, then add a button insidealert with the ",(0,n.kt)("inlineCode",{parentName:"p"},".close-button")," class, nothing more. Now your alert can be closed by users!"),(0,n.kt)("div",{className:"admonition admonition-info alert alert--info"},(0,n.kt)("div",{parentName:"div",className:"admonition-heading"},(0,n.kt)("h5",{parentName:"div"},(0,n.kt)("span",{parentName:"h5",className:"admonition-icon"},(0,n.kt)("svg",{parentName:"span",xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"},(0,n.kt)("path",{parentName:"svg",fillRule:"evenodd",d:"M7 2.3c3.14 0 5.7 2.56 5.7 5.7s-2.56 5.7-5.7 5.7A5.71 5.71 0 0 1 1.3 8c0-3.14 2.56-5.7 5.7-5.7zM7 1C3.14 1 0 4.14 0 8s3.14 7 7 7 7-3.14 7-7-3.14-7-7-7zm1 3H6v5h2V4zm0 6H6v2h2v-2z"}))),"Floating close button")),(0,n.kt)("div",{parentName:"div",className:"admonition-content"},(0,n.kt)("p",{parentName:"div"},"You can add the ",(0,n.kt)("inlineCode",{parentName:"p"},".floating")," class to the ",(0,n.kt)("inlineCode",{parentName:"p"},".close-button")," for having a floating button, it means that the button is hidden by default, does not get the space of alert and it just shows up when the user hovers/focuses alert."))),(0,n.kt)(l.Z,{height:"240px",children:'\n<!DOCTYPE html>\n<html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatifycss/dist/css/flatify.min.css" /> <title>Alerts</title> <script src="https://raw.githack.com/amir2mi/flatifycss/master/dist/js/flatify-min.js"><\/script> </head> <body> <div class="alert" role="alert"> <button class="close-button" aria-label="Close"></button> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. </p> </div> <div class="alert" role="alert"> <button class="close-button floating" aria-label="Close"></button> <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. </p> </div> </body>\n</html>\n',mdxType:"PreviewBox"}),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-html",metastring:'{2,11} title="index.html"',"{2,11}":!0,title:'"index.html"'},'<div class="alert" role="alert">\n  <button class="close-button" aria-label="Close"></button>\n\n  <p>\n    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada\n    erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.\n  </p>\n</div>\n\n<div class="alert" role="alert">\n  <button class="close-button floating" aria-label="Close"></button>\n\n  <p>\n    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada\n    erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.\n  </p>\n</div>\n')),(0,n.kt)("h3",{id:"with-icon"},"With icon"),(0,n.kt)("p",null,"It is possible to have an SVG as an icon for alert just add ",(0,n.kt)("inlineCode",{parentName:"p"},".has-icon")," to the alert and put SVG inside a div with ",(0,n.kt)("inlineCode",{parentName:"p"},".alert-svg")," class before message."),(0,n.kt)(l.Z,{height:"540px",children:'\n<!DOCTYPE html>\n<html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatifycss/dist/css/flatify.min.css" /> <title>Alerts</title> <script src="https://raw.githack.com/amir2mi/flatifycss/master/dist/js/flatify-min.js"><\/script> </head> <body> <div class="alert has-icon" role="alert"> <div class="alert-svg"> <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 100"> <path d="M0 22.815H10.937V34.223H0z"></path> <path d="M0 66.719H10.937V78.12599999999999H0z"></path> <path d="M21.612 100c5.547-10.815 9.123-18.699 10.727-23.653 2.442-7.5 3.664-16.291 3.664-26.373s-1.413-19.309-4.24-27.682C30.019 17.129 26.583 9.699 21.455 0h6.331c5.374 8.583 8.626 13.876 9.76 15.882 1.134 2.006 2.363 4.771 3.689 8.293 1.674 4.361 2.87 8.669 3.585 12.925s1.072 8.355 1.072 12.297c0 10.327-1.639 19.536-4.919 27.629-2.059 5.198-6.332 12.855-12.82 22.973h-6.541z" ></path> </svg> </div> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. <button class="close-button floating" aria-label="Close"></button> </div> <div class="alert style-success has-icon" role="alert"> <div class="alert-svg"> <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> <path d="M39.1 77l48.7-48.7c1.5-1.4 1.6-3.8.2-5.3-1.4-1.5-3.8-1.6-5.3-.2l-.2.2-46.1 46.1-19.8-19.9c-1.5-1.4-3.9-1.3-5.3.2-1.3 1.4-1.3 3.7 0 5.1L33.8 77c1.4 1.5 3.8 1.5 5.3 0z" ></path> </svg> </div> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. <button class="close-button floating" aria-label="Close"></button> </div> <div class="alert style-info has-icon" role="alert"> <div class="alert-svg"> <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"> <path d="M864.5 512.5c0 17.6-1.2 35.2-3.5 52.7.5-3.5 1-7.1 1.4-10.6-4.7 34.3-13.8 67.9-27.3 99.8 1.3-3.2 2.7-6.4 4-9.6-13.2 31.2-30.4 60.5-51.1 87.3l6.3-8.1c-20.4 26.2-44 49.8-70.2 70.2l8.1-6.3c-26.8 20.7-56.1 37.9-87.3 51.1 3.2-1.3 6.4-2.7 9.6-4a397.09 397.09 0 01-99.8 27.3c3.5-.5 7.1-1 10.6-1.4-35 4.6-70.5 4.6-105.5 0 3.5.5 7.1 1 10.6 1.4-34.3-4.7-67.9-13.8-99.8-27.3 3.2 1.3 6.4 2.7 9.6 4-31.2-13.2-60.5-30.4-87.3-51.1l8.1 6.3c-26.2-20.4-49.8-44-70.2-70.2l6.3 8.1c-20.7-26.8-37.9-56.1-51.1-87.3 1.3 3.2 2.7 6.4 4 9.6a397.09 397.09 0 01-27.3-99.8c.5 3.5 1 7.1 1.4 10.6-4.6-35-4.6-70.5 0-105.5-.5 3.5-1 7.1-1.4 10.6 4.7-34.3 13.8-67.9 27.3-99.8-1.3 3.2-2.7 6.4-4 9.6 13.2-31.2 30.4-60.5 51.1-87.3l-6.3 8.1c20.4-26.2 44-49.8 70.2-70.2l-8.1 6.3c26.8-20.7 56.1-37.9 87.3-51.1-3.2 1.3-6.4 2.7-9.6 4 31.9-13.4 65.5-22.6 99.8-27.3-3.5.5-7.1 1-10.6 1.4 35-4.6 70.5-4.6 105.5 0-3.5-.5-7.1-1-10.6-1.4 34.3 4.7 67.9 13.8 99.8 27.3-3.2-1.3-6.4-2.7-9.6-4 31.2 13.2 60.5 30.4 87.3 51.1l-8.1-6.3c26.2 20.4 49.8 44 70.2 70.2l-6.3-8.1c20.7 26.8 37.9 56.1 51.1 87.3-1.3-3.2-2.7-6.4-4-9.6 13.4 31.9 22.6 65.5 27.3 99.8-.5-3.5-1-7.1-1.4-10.6 2.3 17.6 3.5 35.2 3.5 52.8 0 20.9 18.4 41 40 40s40-17.6 40-40c-.2-87.7-27-175.9-78-247.4-13.4-18.8-27.9-36.8-43.9-53.4-15.8-16.3-33-30.8-51-44.6-34.3-26.3-72.6-46.3-113.2-61.2-83.6-30.7-178.2-33.4-263.8-9.1-82.4 23.4-158.6 72.1-213.1 138.3-14.7 17.8-28.4 36.5-40.3 56.3-11.8 19.7-21.4 40.3-30.1 61.5-16.8 41-26.1 84.6-29.5 128.8-6.8 88 15.1 178.6 60.9 254.1 44.2 72.9 110.7 133.5 188.6 168.7 21.2 9.6 42.9 18 65.4 24.3 22.9 6.4 46.4 10.3 70 13.1 44.9 5.2 90.6 2.4 134.9-6.6 84.3-17.1 163.6-61.7 222.9-123.8C884 749 925.6 668.2 938.6 582.7c3.5-23.3 5.9-46.6 5.9-70.2 0-20.9-18.4-41-40-40-21.7 1-40 17.6-40 40z" ></path> <path d="M551.5 704v-76.7-122.2V477c0-20.9-18.4-41-40-40-21.7 1-40 17.6-40 40v227c0 20.9 18.4 41 40 40 21.7-1 40-17.6 40-40zM551.5 346v-27c0-20.9-18.4-41-40-40-21.7 1-40 17.6-40 40v27c0 20.9 18.4 41 40 40 21.7-1 40-17.6 40-40z" ></path> </svg> </div> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. <button class="close-button floating" aria-label="Close"></button> </div> <div class="alert style-warning has-icon" role="alert"> <div class="alert-svg"> <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <path d="M21.72,18,13.82,4a2.09,2.09,0,0,0-3.64,0L2.28,18a2.08,2.08,0,0,0,1.81,3.11H19.91A2.08,2.08,0,0,0,21.72,18Zm-1.81,1.11H4.09L4,18.94l8-14a.1.1,0,0,1,.08,0h0L20,19h0ZM11,14V11a1,1,0,0,1,2,0v3a1,1,0,0,1-2,0Zm2,3a1,1,0,1,1-1-1A1,1,0,0,1,13,17Z" /> </svg> </div> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. <button class="close-button floating" aria-label="Close"></button> </div> <div class="alert style-danger has-icon" role="alert"> <div class="alert-svg"> <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"> <path d="M79.001 49.667c-2.002-7-5.336-15-10-22.333-1-1.667-3.002-2-4.668-1.001-.013.007-.021.017-.032.023-.812.41-1.458 1.096-1.635 1.977-.438 2.188-1.456 4.23-2.76 6.131-4.176-6.131-6.573-13.509-6.573-21.131 0-2-1.334-3.333-3.333-3.333-7.334 0-16.667 14.333-18.667 17.334C28 32.666 20 46.667 20 60c0 16.667 13.333 30 30 30s30-13.333 30-30c0-3.001-.332-6.667-.999-10.333zM40 73.333c0-5.854 4.278-13.119 7.49-17.127.908 3.358 2.549 6.54 4.844 9.461.667.668 1.667 1 2.666 1 .667 0 1.667-.332 1.999-1 .28-.233.544-.481.798-.741.684 1.52 1.223 3.001 1.536 4.407.335 1.666.667 3.001.667 4 0 5.668-4.333 10-10 10s-10-4.332-10-10zm26.33 3.411c.221-1.1.337-2.239.337-3.411 0-1.998-.332-3.665-.668-5.667-.999-3.665-2.998-7.998-5.332-11.667-.999-1.666-3.001-1.998-4.668-.999a3.124 3.124 0 00-1.358 1.628A17.443 17.443 0 0153.333 50c0-2-1.334-3.333-3.333-3.333-.208 0-.421.02-.637.054-.099.016-.19.041-.285.063-6.363 1.418-15.745 16.702-15.745 26.549 0 1.172.117 2.312.337 3.411-4.331-4.223-7.003-10.137-7.003-16.744 0-15.797 13.367-35.409 20.305-41.472.999 8.702 4.51 16.787 10.362 23.472.667.666 1.667 1 2.666 1 .667 0 1.667-.333 1.999-.666.065-.066.119-.142.181-.211.051-.043.107-.076.154-.122a32.995 32.995 0 004.111-5.68c2.688 5.102 4.656 10.331 5.889 15.012.667 3.335.999 6.001.999 8.667 0 6.607-2.672 12.521-7.003 16.744z" ></path> </svg> </div> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. <button class="close-button floating" aria-label="Close"></button> </div> </body>\n</html>\n',mdxType:"PreviewBox"}),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-html",metastring:'title="index.html"',title:'"index.html"'},'<div class="alert has-icon" role="alert">\n    <div class="alert-svg">\n        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 100"><path d="M0 22.815H10.937V34.223H0z"></path><path d="M0 66.719H10.937V78.12599999999999H0z"></path><pathd="M21.612 100c5.547-10.815 9.123-18.699 10.727-23.653 2.442-7.5 3.664-16.291 3.664-26.373s-1.413-19.309-4.24-27.682C30.019 17.129 26.583 9.699 21.455 0h6.331c5.374 8.583 8.626 13.876 9.76 15.882 1.134 2.006 2.363 4.771 3.689 8.293 1.674 4.361 2.87 8.669 3.585 12.925s1.072 8.355 1.072 12.297c0 10.327-1.639 19.536-4.919 27.629-2.059 5.198-6.332 12.855-12.82 22.973h-6.541z"></path></svg>\n    </div>\n    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada\n    erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.\n    <button class="close-button floating" aria-label="Close"></button>\n</div>\n\n<div class="alert style-success has-icon" role="alert">\n    <div class="alert-svg">\n        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><pathd="M39.1 77l48.7-48.7c1.5-1.4 1.6-3.8.2-5.3-1.4-1.5-3.8-1.6-5.3-.2l-.2.2-46.1 46.1-19.8-19.9c-1.5-1.4-3.9-1.3-5.3.2-1.3 1.4-1.3 3.7 0 5.1L33.8 77c1.4 1.5 3.8 1.5 5.3 0z"></path></svg>\n    </div>\n    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada\n    erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.\n    <button class="close-button floating" aria-label="Close"></button>\n</div>\n\n<div class="alert style-info has-icon" role="alert">\n    <div class="alert-svg">\n        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><pathd="M864.5 512.5c0 17.6-1.2 35.2-3.5 52.7.5-3.5 1-7.1 1.4-10.6-4.7 34.3-13.8 67.9-27.3 99.8 1.3-3.2 2.7-6.4 4-9.6-13.2 31.2-30.4 60.5-51.1 87.3l6.3-8.1c-20.4 26.2-44 49.8-70.2 70.2l8.1-6.3c-26.8 20.7-56.1 37.9-87.3 51.1 3.2-1.3 6.4-2.7 9.6-4a397.09 397.09 0 01-99.8 27.3c3.5-.5 7.1-1 10.6-1.4-35 4.6-70.5 4.6-105.5 0 3.5.5 7.1 1 10.6 1.4-34.3-4.7-67.9-13.8-99.8-27.3 3.2 1.3 6.4 2.7 9.6 4-31.2-13.2-60.5-30.4-87.3-51.1l8.1 6.3c-26.2-20.4-49.8-44-70.2-70.2l6.3 8.1c-20.7-26.8-37.9-56.1-51.1-87.3 1.3 3.2 2.7 6.4 4 9.6a397.09 397.09 0 01-27.3-99.8c.5 3.5 1 7.1 1.4 10.6-4.6-35-4.6-70.5 0-105.5-.5 3.5-1 7.1-1.4 10.6 4.7-34.3 13.8-67.9 27.3-99.8-1.3 3.2-2.7 6.4-4 9.6 13.2-31.2 30.4-60.5 51.1-87.3l-6.3 8.1c20.4-26.2 44-49.8 70.2-70.2l-8.1 6.3c26.8-20.7 56.1-37.9 87.3-51.1-3.2 1.3-6.4 2.7-9.6 4 31.9-13.4 65.5-22.6 99.8-27.3-3.5.5-7.1 1-10.6 1.4 35-4.6 70.5-4.6 105.5 0-3.5-.5-7.1-1-10.6-1.4 34.3 4.7 67.9 13.8 99.8 27.3-3.2-1.3-6.4-2.7-9.6-4 31.2 13.2 60.5 30.4 87.3 51.1l-8.1-6.3c26.2 20.4 49.8 44 70.2 70.2l-6.3-8.1c20.7 26.8 37.9 56.1 51.1 87.3-1.3-3.2-2.7-6.4-4-9.6 13.4 31.9 22.6 65.5 27.3 99.8-.5-3.5-1-7.1-1.4-10.6 2.3 17.6 3.5 35.2 3.5 52.8 0 20.9 18.4 41 40 40s40-17.6 40-40c-.2-87.7-27-175.9-78-247.4-13.4-18.8-27.9-36.8-43.9-53.4-15.8-16.3-33-30.8-51-44.6-34.3-26.3-72.6-46.3-113.2-61.2-83.6-30.7-178.2-33.4-263.8-9.1-82.4 23.4-158.6 72.1-213.1 138.3-14.7 17.8-28.4 36.5-40.3 56.3-11.8 19.7-21.4 40.3-30.1 61.5-16.8 41-26.1 84.6-29.5 128.8-6.8 88 15.1 178.6 60.9 254.1 44.2 72.9 110.7 133.5 188.6 168.7 21.2 9.6 42.9 18 65.4 24.3 22.9 6.4 46.4 10.3 70 13.1 44.9 5.2 90.6 2.4 134.9-6.6 84.3-17.1 163.6-61.7 222.9-123.8C884 749 925.6 668.2 938.6 582.7c3.5-23.3 5.9-46.6 5.9-70.2 0-20.9-18.4-41-40-40-21.7 1-40 17.6-40 40z"></path><pathd="M551.5 704v-76.7-122.2V477c0-20.9-18.4-41-40-40-21.7 1-40 17.6-40 40v227c0 20.9 18.4 41 40 40 21.7-1 40-17.6 40-40zM551.5 346v-27c0-20.9-18.4-41-40-40-21.7 1-40 17.6-40 40v27c0 20.9 18.4 41 40 40 21.7-1 40-17.6 40-40z"></path></svg>\n    </div>\n    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada\n    erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.\n    <button class="close-button floating" aria-label="Close"></button>\n</div>\n\n<div class="alert style-warning has-icon" role="alert">\n    <div class="alert-svg">\n        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><pathd="M21.72,18,13.82,4a2.09,2.09,0,0,0-3.64,0L2.28,18a2.08,2.08,0,0,0,1.81,3.11H19.91A2.08,2.08,0,0,0,21.72,18Zm-1.81,1.11H4.09L4,18.94l8-14a.1.1,0,0,1,.08,0h0L20,19h0ZM11,14V11a1,1,0,0,1,2,0v3a1,1,0,0,1-2,0Zm2,3a1,1,0,1,1-1-1A1,1,0,0,1,13,17Z"/></svg>\n    </div>\n    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada\n    erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.\n    <button class="close-button floating" aria-label="Close"></button>\n</div>\n\n<div class="alert style-danger has-icon" role="alert">\n    <div class="alert-svg"><svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><pathd="M79.001 49.667c-2.002-7-5.336-15-10-22.333-1-1.667-3.002-2-4.668-1.001-.013.007-.021.017-.032.023-.812.41-1.458 1.096-1.635 1.977-.438 2.188-1.456 4.23-2.76 6.131-4.176-6.131-6.573-13.509-6.573-21.131 0-2-1.334-3.333-3.333-3.333-7.334 0-16.667 14.333-18.667 17.334C28 32.666 20 46.667 20 60c0 16.667 13.333 30 30 30s30-13.333 30-30c0-3.001-.332-6.667-.999-10.333zM40 73.333c0-5.854 4.278-13.119 7.49-17.127.908 3.358 2.549 6.54 4.844 9.461.667.668 1.667 1 2.666 1 .667 0 1.667-.332 1.999-1 .28-.233.544-.481.798-.741.684 1.52 1.223 3.001 1.536 4.407.335 1.666.667 3.001.667 4 0 5.668-4.333 10-10 10s-10-4.332-10-10zm26.33 3.411c.221-1.1.337-2.239.337-3.411 0-1.998-.332-3.665-.668-5.667-.999-3.665-2.998-7.998-5.332-11.667-.999-1.666-3.001-1.998-4.668-.999a3.124 3.124 0 00-1.358 1.628A17.443 17.443 0 0153.333 50c0-2-1.334-3.333-3.333-3.333-.208 0-.421.02-.637.054-.099.016-.19.041-.285.063-6.363 1.418-15.745 16.702-15.745 26.549 0 1.172.117 2.312.337 3.411-4.331-4.223-7.003-10.137-7.003-16.744 0-15.797 13.367-35.409 20.305-41.472.999 8.702 4.51 16.787 10.362 23.472.667.666 1.667 1 2.666 1 .667 0 1.667-.333 1.999-.666.065-.066.119-.142.181-.211.051-.043.107-.076.154-.122a32.995 32.995 0 004.111-5.68c2.688 5.102 4.656 10.331 5.889 15.012.667 3.335.999 6.001.999 8.667 0 6.607-2.672 12.521-7.003 16.744z"></path></svg></div>\n    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada\n    erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.\n    <button class="close-button floating" aria-label="Close"></button>\n</div>\n')),(0,n.kt)("h3",{id:"customization"},"Customization"),(0,n.kt)("p",null,"Each alert has these CSS variables for customization, they can be set as ",(0,n.kt)("inlineCode",{parentName:"p"},":root")," for all alerts default style or just for a specific selector."),(0,n.kt)("p",null,(0,n.kt)("inlineCode",{parentName:"p"},"--flatify__alert-bg-color"),(0,n.kt)("br",{parentName:"p"}),"\n",(0,n.kt)("inlineCode",{parentName:"p"},"--flatify__alert-txt-color"),(0,n.kt)("br",{parentName:"p"}),"\n",(0,n.kt)("inlineCode",{parentName:"p"},"--flatify__alert-border-color"),(0,n.kt)("br",{parentName:"p"}),"\n",(0,n.kt)("inlineCode",{parentName:"p"},"--flatify__alert-animation-hide")," to have a custom animation when alert is removed"),(0,n.kt)(l.Z,{height:"180px",children:'\n<!DOCTYPE html>\n<html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/flatifycss/dist/css/flatify.min.css" /> <title>Alerts</title> <style> @keyframes my-custom-animation{ from{ opacity: 1; transform: scale(1); }  to{ opacity: 0; transform: scale(0.5) rotate(0.5turn); } } .my-alert{ --flatify__alert-bg-color: #A0CECB; --flatify__alert-txt-color: #434A54; --flatify__alert-border-color: #A0CECB; --flatify__alert-animation-hide: my-custom-animation 0.4s ease; } </style> <script src="https://raw.githack.com/amir2mi/flatifycss/master/dist/js/flatify-min.js"><\/script> </head> <body> <div class="flex-column-center"> <div class="alert has-icon my-alert" role="alert"> <div class="alert-svg"> <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 100"> <path d="M0 22.815H10.937V34.223H0z"></path> <path d="M0 66.719H10.937V78.12599999999999H0z"></path> <path d="M21.612 100c5.547-10.815 9.123-18.699 10.727-23.653 2.442-7.5 3.664-16.291 3.664-26.373s-1.413-19.309-4.24-27.682C30.019 17.129 26.583 9.699 21.455 0h6.331c5.374 8.583 8.626 13.876 9.76 15.882 1.134 2.006 2.363 4.771 3.689 8.293 1.674 4.361 2.87 8.669 3.585 12.925s1.072 8.355 1.072 12.297c0 10.327-1.639 19.536-4.919 27.629-2.059 5.198-6.332 12.855-12.82 22.973h-6.541z" ></path> </svg> </div> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede. <button class="close-button floating" aria-label="Close"></button> </div> </div> </body>\n</html>\n',mdxType:"PreviewBox"}),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-html",metastring:'title="index.html"',title:'"index.html"'},'<div class="alert has-icon my-alert" role="alert">\n    <div class="alert-svg">\n        <svg aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 45 100"><path d="M0 22.815H10.937V34.223H0z"></path><path d="M0 66.719H10.937V78.12599999999999H0z"></path><pathd="M21.612 100c5.547-10.815 9.123-18.699 10.727-23.653 2.442-7.5 3.664-16.291 3.664-26.373s-1.413-19.309-4.24-27.682C30.019 17.129 26.583 9.699 21.455 0h6.331c5.374 8.583 8.626 13.876 9.76 15.882 1.134 2.006 2.363 4.771 3.689 8.293 1.674 4.361 2.87 8.669 3.585 12.925s1.072 8.355 1.072 12.297c0 10.327-1.639 19.536-4.919 27.629-2.059 5.198-6.332 12.855-12.82 22.973h-6.541z"></path></svg>\n    </div>\n    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada\n    erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.\n    <button class="close-button floating" aria-label="Close"></button>\n</div>\n')),(0,n.kt)("div",{className:"admonition admonition-success alert alert--success"},(0,n.kt)("div",{parentName:"div",className:"admonition-heading"},(0,n.kt)("h5",{parentName:"div"},(0,n.kt)("span",{parentName:"h5",className:"admonition-icon"},(0,n.kt)("svg",{parentName:"span",xmlns:"http://www.w3.org/2000/svg",width:"12",height:"16",viewBox:"0 0 12 16"},(0,n.kt)("path",{parentName:"svg",fillRule:"evenodd",d:"M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"}))),"Alert remove animation custom duration")),(0,n.kt)("div",{parentName:"div",className:"admonition-content"},(0,n.kt)("p",{parentName:"div"},"To change alert remove animation duration you need to change ",(0,n.kt)("inlineCode",{parentName:"p"},"$ALERT_REMOVE_ANIMATION")," in ",(0,n.kt)("inlineCode",{parentName:"p"},"_config.scss")," or ",(0,n.kt)("inlineCode",{parentName:"p"},"--flatify__alert-remove-animation")," CSS variable. JavaScript automatically will remove alert when animation is finished."))),(0,n.kt)("pre",null,(0,n.kt)("code",{parentName:"pre",className:"language-css",metastring:'title="style.css"',title:'"style.css"'},"/* Define the custom animation */\n@keyframes my-custom-animation {\n  from {\n    opacity: 1;\n    transform: scale(1);\n  }\n  to {\n    opacity: 0;\n    transform: scale(0.5) rotate(0.5turn);\n  }\n}\n\n.my-alert {\n  --flatify__alert-bg-color: #a0cecb;\n  --flatify__alert-txt-color: #434a54;\n  --flatify__alert-border-color: #a0cecb;\n  --flatify__alert-animation-hide: my-custom-animation 0.4s ease;\n}\n")))}p.isMDXComponent=!0}}]);