"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[494],{3905:function(t,e,a){a.d(e,{Zo:function(){return d},kt:function(){return u}});var s=a(7294);function i(t,e,a){return e in t?Object.defineProperty(t,e,{value:a,enumerable:!0,configurable:!0,writable:!0}):t[e]=a,t}function n(t,e){var a=Object.keys(t);if(Object.getOwnPropertySymbols){var s=Object.getOwnPropertySymbols(t);e&&(s=s.filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable}))),a.push.apply(a,s)}return a}function o(t){for(var e=1;e<arguments.length;e++){var a=null!=arguments[e]?arguments[e]:{};e%2?n(Object(a),!0).forEach((function(e){i(t,e,a[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(a)):n(Object(a)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(a,e))}))}return t}function l(t,e){if(null==t)return{};var a,s,i=function(t,e){if(null==t)return{};var a,s,i={},n=Object.keys(t);for(s=0;s<n.length;s++)a=n[s],e.indexOf(a)>=0||(i[a]=t[a]);return i}(t,e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);for(s=0;s<n.length;s++)a=n[s],e.indexOf(a)>=0||Object.prototype.propertyIsEnumerable.call(t,a)&&(i[a]=t[a])}return i}var r=s.createContext({}),c=function(t){var e=s.useContext(r),a=e;return t&&(a="function"==typeof t?t(e):o(o({},e),t)),a},d=function(t){var e=c(t.components);return s.createElement(r.Provider,{value:e},t.children)},p={inlineCode:"code",wrapper:function(t){var e=t.children;return s.createElement(s.Fragment,{},e)}},m=s.forwardRef((function(t,e){var a=t.components,i=t.mdxType,n=t.originalType,r=t.parentName,d=l(t,["components","mdxType","originalType","parentName"]),m=c(a),u=i,h=m["".concat(r,".").concat(u)]||m[u]||p[u]||n;return a?s.createElement(h,o(o({ref:e},d),{},{components:a})):s.createElement(h,o({ref:e},d))}));function u(t,e){var a=arguments,i=e&&e.mdxType;if("string"==typeof t||i){var n=a.length,o=new Array(n);o[0]=m;var l={};for(var r in e)hasOwnProperty.call(e,r)&&(l[r]=e[r]);l.originalType=t,l.mdxType="string"==typeof t?t:i,o[1]=l;for(var c=2;c<n;c++)o[c]=a[c];return s.createElement.apply(null,o)}return s.createElement.apply(null,a)}m.displayName="MDXCreateElement"},2695:function(t,e,a){a.d(e,{Z:function(){return l}});var s=a(7462),i=a(3366),n=a(7294),o=["isBad","isGood","children","disableFullscreen","limitWidth"];function l(t){var e=t.isBad,a=t.isGood,l=t.children,r=t.disableFullscreen,c=t.limitWidth,d=(0,i.Z)(t,o),p=(0,n.useState)(!1),m=p[0],u=p[1];return n.createElement("div",{className:"preview-box-wrapper",style:c?{width:c,display:"table",margin:"0 auto"}:{}},!r&&n.createElement("button",{"aria-label":m?"Minimize the example":"Fullscreen the example",className:"preview-box-fullscreen-toggle",onClick:function(t){var e=t.target.closest(".preview-box-wrapper");m?document.exitFullscreen?document.exitFullscreen():document.webkitExitFullscreen?document.webkitExitFullscreen():document.msExitFullscreen&&document.msExitFullscreen():e.requestFullscreen?e.requestFullscreen():e.webkitRequestFullscreen?e.webkitRequestFullscreen():e.msRequestFullscreen&&e.msRequestFullscreen(),u(!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"}))),e&&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:l},d)))}},7054:function(t,e,a){a.r(e),a.d(e,{frontMatter:function(){return r},contentTitle:function(){return c},metadata:function(){return d},toc:function(){return p},default:function(){return u}});var s=a(7462),i=a(3366),n=(a(7294),a(3905)),o=a(2695),l=["components"],r={title:"Toast"},c=void 0,d={unversionedId:"mockups/toast",id:"mockups/toast",isDocsHomePage:!1,title:"Toast",description:"To notify users and communicate, you need something look-alike toasts that come on top of each other and will get hidden after an amount of time.",source:"@site/docs/mockups/toast.mdx",sourceDirName:"mockups",slug:"/mockups/toast",permalink:"/docs/mockups/toast",editUrl:"https://github.com/amir2mi/flatifycss/tree/master/website/docs/mockups/toast.mdx",tags:[],version:"current",frontMatter:{title:"Toast"},sidebar:"tutorialSidebar",previous:{title:"Items group",permalink:"/docs/mockups/items-group"},next:{title:"Animations",permalink:"/docs/helpers/animation"}},p=[{value:"Positions",id:"positions",children:[],level:2},{value:"Sizes",id:"sizes",children:[],level:2},{value:"Colors",id:"colors",children:[],level:2},{value:"Customization",id:"customization",children:[],level:2}],m={toc:p};function u(t){var e=t.components,a=(0,i.Z)(t,l);return(0,n.kt)("wrapper",(0,s.Z)({},m,a,{components:e,mdxType:"MDXLayout"}),(0,n.kt)("p",null,"To notify users and communicate, you need something look-alike toasts that come on top of each other and will get hidden after an amount of time.",(0,n.kt)("br",{parentName:"p"}),"\n","In this page, the toast mockup is presented, but appending the functionality is up to you."),(0,n.kt)(o.Z,{height:"500px",children:'<!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.css" /> <title>Toasts</title>  </head> <body> <div class="toast-wrapper right bottom"> <div class="toast"> <svg class="toast-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" ></path> </svg> Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum reprehenderit id nobis error. <button type="button" class="close-button" aria-label="Close"></button> </div> <div class="toast"> <svg class="toast-svg" xmlns="http://www.w3.org/2000/svg" x="10" y="0" viewBox="-5 -5 110 110"> <path d="M41.4 81.8c-10.8 0-20.9-4.2-28.6-11.8S1 52.2 1 41.4s4.2-20.9 11.8-28.6C20.5 5.2 30.6 1 41.4 1S62.3 5.2 70 12.8s11.8 17.8 11.8 28.6S77.6 62.3 70 70c-7.7 7.6-17.8 11.8-28.6 11.8zm0-68.4c-7.5 0-14.5 2.9-19.8 8.2s-8.2 12.3-8.2 19.8 2.9 14.5 8.2 19.8 12.3 8.2 19.8 8.2 14.5-2.9 19.8-8.2c5.3-5.3 8.2-12.3 8.2-19.8s-2.9-14.5-8.2-19.8-12.3-8.2-19.8-8.2z" ></path> <path d="M92.8 99c-1.6 0-3.2-.6-4.4-1.8l-25-25c-2.4-2.4-2.4-6.4 0-8.8 2.4-2.4 6.4-2.4 8.8 0l25 25c2.4 2.4 2.4 6.4 0 8.8-1.2 1.2-2.8 1.8-4.4 1.8z" ></path> </svg> Lorem ipsum dolor sit amet <button type="button" class="close-button" aria-label="Close"></button> </div> <div class="toast"> <svg class="toast-svg" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 100 125"> <path d="M24.503 12.412C13.732 12.412 5 21.144 5 31.916c0 10.771 8.732 19.502 19.503 19.502.232 0 6.279-.034 6.279-.034-.153 10.869-7.646 19.99-17.738 22.613a55.73 55.73 0 01-2.123.473A6.572 6.572 0 005 81.008c0 3.288 2.422 6.003 5.574 6.485.033.006.066.008.099.016.151.02.304.035.458.045.074.004.145.021.22.021 0 0 .789.025 1.05.004 1.165-.098 1.529-.246 2.281-.404 16.618-3.49 29.156-18.187 29.315-35.791h.01V31.829l-.005.004c-.045-10.733-8.755-19.421-19.499-19.421zM94.995 31.833c-.045-10.732-8.756-19.42-19.499-19.42-10.771 0-19.503 8.732-19.503 19.503s8.732 19.502 19.503 19.502c.231 0 6.278-.034 6.278-.034-.152 10.869-7.646 19.99-17.737 22.613-.68.176-2.103.471-2.123.473a6.572 6.572 0 00-5.921 6.538c0 3.288 2.422 6.003 5.574 6.485.032.006.065.008.099.016.15.02.303.035.457.045.074.004.145.021.221.021 0 0 .788.025 1.049.004 1.166-.098 1.53-.246 2.282-.404 16.618-3.49 29.156-18.187 29.315-35.791H95V31.829l-.005.004z" ></path> </svg> Lorem ipsum dolor sit amet <button type="button" class="close-button" aria-label="Close"></button> </div> </div> </body>\n</html>',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="toast-wrapper right bottom">\n  <div class="toast">\n    <svg class="toast-svg">...</svg>\n    Lorem ipsum dolor sit amet\n    <button type="button" class="close-button" aria-label="Close"></button>\n  </div>\n</div>\n')),(0,n.kt)("h2",{id:"positions"},"Positions"),(0,n.kt)("p",null,"You can change toasts wrapper element position by adding x-axis classes: ",(0,n.kt)("inlineCode",{parentName:"p"},"left"),", ",(0,n.kt)("inlineCode",{parentName:"p"},"center")," and ",(0,n.kt)("inlineCode",{parentName:"p"},"right")," and y-axis classes: ",(0,n.kt)("inlineCode",{parentName:"p"},"top")," and ",(0,n.kt)("inlineCode",{parentName:"p"},"bottom"),"."),(0,n.kt)(o.Z,{height:"300px",children:'<!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.css" /> <title>Toasts</title>  </head> <body> <div class="toast-wrapper right bottom"> <div class="toast">...</div> <div class="toast">...</div> <div class="toast">...</div> </div> <div class="toast-wrapper center bottom"> <div class="toast">...</div> <div class="toast">...</div> <div class="toast">...</div> </div> <div class="toast-wrapper left top"> <div class="toast">...</div> <div class="toast">...</div> <div class="toast">...</div> </div> </body>\n</html>',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="toast-wrapper right bottom">...</div>\n<div class="toast-wrapper center bottom">...</div>\n<div class="toast-wrapper left top">...</div>\n')),(0,n.kt)("h2",{id:"sizes"},"Sizes"),(0,n.kt)("p",null,"To change the toast size use ",(0,n.kt)("a",{parentName:"p",href:"/docs/helpers/size-setters"},"size setter classes"),".\nThese classes just set a ",(0,n.kt)("inlineCode",{parentName:"p"},"font-size")," property so it is possible to change it yourself by writing custom CSS."),(0,n.kt)(o.Z,{height:"500px",children:'<!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.css" /> <title>Toasts</title>  </head> <body> <div class="toast-wrapper right bottom"> <div class="toast size-xs"> Lorem ipsum dolor sit amet. <button type="button" class="close-button" aria-label="Close"></button> </div> <div class="toast size-md"> Lorem ipsum dolor sit amet. <button type="button" class="close-button" aria-label="Close"></button> </div> <div class="toast size-lg"> Lorem ipsum dolor sit amet. <button type="button" class="close-button" aria-label="Close"></button> </div> </div> </body>\n</html>',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="toast size-xs">...</div>\n<div class="toast size-lg">...</div>\n<div class="toast size-2x">...</div>\n')),(0,n.kt)("h2",{id:"colors"},"Colors"),(0,n.kt)("p",null,"There are helper classes for styling elements, first read about ",(0,n.kt)("a",{parentName:"p",href:"/docs/helpers/color-setters"},"color setter classes"),", you can add classes to the wrapper element or each item separately."),(0,n.kt)(o.Z,{height:"300px",children:'<!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.css" /> <title>Toasts</title>  </head> <body> <div class="toast-wrapper right bottom"> <div class="toast style-orange-light"> <svg class="toast-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" ></path> </svg> Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum reprehenderit id nobis error. <button type="button" class="close-button" aria-label="Close"></button> </div> <div class="toast style-red-light"> <svg class="toast-svg" xmlns="http://www.w3.org/2000/svg" x="10" y="0" viewBox="-5 -5 110 110"> <path d="M41.4 81.8c-10.8 0-20.9-4.2-28.6-11.8S1 52.2 1 41.4s4.2-20.9 11.8-28.6C20.5 5.2 30.6 1 41.4 1S62.3 5.2 70 12.8s11.8 17.8 11.8 28.6S77.6 62.3 70 70c-7.7 7.6-17.8 11.8-28.6 11.8zm0-68.4c-7.5 0-14.5 2.9-19.8 8.2s-8.2 12.3-8.2 19.8 2.9 14.5 8.2 19.8 12.3 8.2 19.8 8.2 14.5-2.9 19.8-8.2c5.3-5.3 8.2-12.3 8.2-19.8s-2.9-14.5-8.2-19.8-12.3-8.2-19.8-8.2z" ></path> <path d="M92.8 99c-1.6 0-3.2-.6-4.4-1.8l-25-25c-2.4-2.4-2.4-6.4 0-8.8 2.4-2.4 6.4-2.4 8.8 0l25 25c2.4 2.4 2.4 6.4 0 8.8-1.2 1.2-2.8 1.8-4.4 1.8z" ></path> </svg> Lorem ipsum dolor sit amet <button type="button" class="close-button" aria-label="Close"></button> </div> <div class="toast style-green-light"> <svg class="toast-svg" xmlns="http://www.w3.org/2000/svg" x="0" y="0" viewBox="0 0 100 125"> <path d="M24.503 12.412C13.732 12.412 5 21.144 5 31.916c0 10.771 8.732 19.502 19.503 19.502.232 0 6.279-.034 6.279-.034-.153 10.869-7.646 19.99-17.738 22.613a55.73 55.73 0 01-2.123.473A6.572 6.572 0 005 81.008c0 3.288 2.422 6.003 5.574 6.485.033.006.066.008.099.016.151.02.304.035.458.045.074.004.145.021.22.021 0 0 .789.025 1.05.004 1.165-.098 1.529-.246 2.281-.404 16.618-3.49 29.156-18.187 29.315-35.791h.01V31.829l-.005.004c-.045-10.733-8.755-19.421-19.499-19.421zM94.995 31.833c-.045-10.732-8.756-19.42-19.499-19.42-10.771 0-19.503 8.732-19.503 19.503s8.732 19.502 19.503 19.502c.231 0 6.278-.034 6.278-.034-.152 10.869-7.646 19.99-17.737 22.613-.68.176-2.103.471-2.123.473a6.572 6.572 0 00-5.921 6.538c0 3.288 2.422 6.003 5.574 6.485.032.006.065.008.099.016.15.02.303.035.457.045.074.004.145.021.221.021 0 0 .788.025 1.049.004 1.166-.098 1.53-.246 2.282-.404 16.618-3.49 29.156-18.187 29.315-35.791H95V31.829l-.005.004z" ></path> </svg> Lorem ipsum dolor sit amet <button type="button" class="close-button" aria-label="Close"></button> </div> </div> </body>\n</html>',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="toast style-orange-light">...</div>\n<div class="toast style-red-light">...</div>\n<div class="toast style-green-light">...</div>\n')),(0,n.kt)("h2",{id:"customization"},"Customization"),(0,n.kt)("p",null,"Use CSS variables for customization, they can be set as ",(0,n.kt)("inlineCode",{parentName:"p"},":root")," for all toasts default style or just for a specific selector."),(0,n.kt)("p",null,(0,n.kt)("inlineCode",{parentName:"p"},"--flatify__toast-txt-color"),(0,n.kt)("br",{parentName:"p"}),"\n",(0,n.kt)("inlineCode",{parentName:"p"},"--flatify__toast-bg-color"),(0,n.kt)("br",{parentName:"p"}),"\n",(0,n.kt)("inlineCode",{parentName:"p"},"--flatify__toast-border-color"),(0,n.kt)("br",{parentName:"p"}),"\n",(0,n.kt)("inlineCode",{parentName:"p"},"--flatify__toast-inner-space"),(0,n.kt)("br",{parentName:"p"}),"\n",(0,n.kt)("inlineCode",{parentName:"p"},"--flatify__toast-animation-show"),(0,n.kt)("br",{parentName:"p"}),"\n",(0,n.kt)("inlineCode",{parentName:"p"},"--flatify__toast-animation-hide")))}u.isMDXComponent=!0}}]);