"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[1156],{3905:function(e,t,a){a.d(t,{Zo:function(){return c},kt:function(){return f}});var s=a(7294);function n(e,t,a){return t in e?Object.defineProperty(e,t,{value:a,enumerable:!0,configurable:!0,writable:!0}):e[t]=a,e}function i(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 r(e){for(var t=1;t<arguments.length;t++){var a=null!=arguments[t]?arguments[t]:{};t%2?i(Object(a),!0).forEach((function(t){n(e,t,a[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(a)):i(Object(a)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(a,t))}))}return e}function l(e,t){if(null==e)return{};var a,s,n=function(e,t){if(null==e)return{};var a,s,n={},i=Object.keys(e);for(s=0;s<i.length;s++)a=i[s],t.indexOf(a)>=0||(n[a]=e[a]);return n}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(s=0;s<i.length;s++)a=i[s],t.indexOf(a)>=0||Object.prototype.propertyIsEnumerable.call(e,a)&&(n[a]=e[a])}return n}var o=s.createContext({}),p=function(e){var t=s.useContext(o),a=t;return e&&(a="function"==typeof e?e(t):r(r({},t),e)),a},c=function(e){var t=p(e.components);return s.createElement(o.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return s.createElement(s.Fragment,{},t)}},d=s.forwardRef((function(e,t){var a=e.components,n=e.mdxType,i=e.originalType,o=e.parentName,c=l(e,["components","mdxType","originalType","parentName"]),d=p(a),f=n,h=d["".concat(o,".").concat(f)]||d[f]||m[f]||i;return a?s.createElement(h,r(r({ref:t},c),{},{components:a})):s.createElement(h,r({ref:t},c))}));function f(e,t){var a=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var i=a.length,r=new Array(i);r[0]=d;var l={};for(var o in t)hasOwnProperty.call(t,o)&&(l[o]=t[o]);l.originalType=e,l.mdxType="string"==typeof e?e:n,r[1]=l;for(var p=2;p<i;p++)r[p]=a[p];return s.createElement.apply(null,r)}return s.createElement.apply(null,a)}d.displayName="MDXCreateElement"},2695:function(e,t,a){a.d(t,{Z:function(){return l}});var s=a(7462),n=a(3366),i=a(7294),r=["isBad","isGood","children","disableFullscreen","limitWidth"];function l(e){var t=e.isBad,a=e.isGood,l=e.children,o=e.disableFullscreen,p=e.limitWidth,c=(0,n.Z)(e,r),m=(0,i.useState)(!1),d=m[0],f=m[1];return i.createElement("div",{className:"preview-box-wrapper",style:p?{width:p,display:"table",margin:"0 auto"}:{}},!o&&i.createElement("button",{"aria-label":d?"Minimize the example":"Fullscreen the example",className:"preview-box-fullscreen-toggle",onClick:function(e){var t=e.target.closest(".preview-box-wrapper");d?document.exitFullscreen?document.exitFullscreen():document.webkitExitFullscreen?document.webkitExitFullscreen():document.msExitFullscreen&&document.msExitFullscreen():t.requestFullscreen?t.requestFullscreen():t.webkitRequestFullscreen?t.webkitRequestFullscreen():t.msRequestFullscreen&&t.msRequestFullscreen(),f(!d)}},d?i.createElement("svg",{"aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",x:"0",y:"0",viewBox:"0 0 24 24"},i.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"})):i.createElement("svg",{"aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",x:"0",y:"0",viewBox:"26 26 48 48"},i.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&&i.createElement("div",{className:"is-bad-example style-red"},i.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",x:"0",y:"0",viewBox:"2 2 12 12"},i.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&&i.createElement("div",{className:"is-good-example style-green"},i.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",x:"0",y:"0",viewBox:"0 0 18 18"},i.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"}))),i.createElement("iframe",(0,s.Z)({width:"100%",className:"docus-preview-box"+(d?" is-fullscreen":""),srcDoc:l},c)))}},4115:function(e,t,a){a.r(t),a.d(t,{frontMatter:function(){return o},contentTitle:function(){return p},metadata:function(){return c},toc:function(){return m},default:function(){return f}});var s=a(7462),n=a(3366),i=(a(7294),a(3905)),r=a(2695),l=["components"],o={title:"Fireworks"},p=void 0,c={unversionedId:"components/fireworks",id:"components/fireworks",isDocsHomePage:!1,title:"Fireworks",description:"Fireworks is a minimal component to express something is done successfully.",source:"@site/docs/components/fireworks.mdx",sourceDirName:"components",slug:"/components/fireworks",permalink:"/docs/components/fireworks",editUrl:"https://github.com/amir2mi/flatifycss/tree/master/website/docs/components/fireworks.mdx",tags:[],version:"current",frontMatter:{title:"Fireworks"},sidebar:"tutorialSidebar",previous:{title:"Dropdowns",permalink:"/docs/components/dropdown"},next:{title:"Loading",permalink:"/docs/components/loading"}},m=[{value:"A simple fireworks example",id:"a-simple-fireworks-example",children:[],level:2},{value:"Simple",id:"simple",children:[],level:2},{value:"Sizes",id:"sizes",children:[],level:2},{value:"Color &amp; customization",id:"color--customization",children:[],level:2}],d={toc:m};function f(e){var t=e.components,a=(0,n.Z)(e,l);return(0,i.kt)("wrapper",(0,s.Z)({},d,a,{components:t,mdxType:"MDXLayout"}),(0,i.kt)("p",null,"Fireworks is a minimal component to express something is done successfully."),(0,i.kt)("h2",{id:"a-simple-fireworks-example"},"A simple fireworks example"),(0,i.kt)("p",null,"It is simply a wrapper ",(0,i.kt)("inlineCode",{parentName:"p"},".fireworks")," with three elements inside that have the ",(0,i.kt)("inlineCode",{parentName:"p"},".spark")," class."),(0,i.kt)(r.Z,{height:"200px",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>Fireworks</title> </head> <body> <div class="flex-center" style="padding-top: 3em"> <div class="fireworks" aria-hidden="true"> <span class="spark"></span> <span class="spark"></span> <span class="spark"></span> <span class="spark"></span> </div> </div> </body>\n</html>\n',mdxType:"PreviewBox"}),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-html",metastring:'title="index.html"',title:'"index.html"'},'<div class="fireworks" aria-hidden="true">\n  <span class="spark"></span>\n  <span class="spark"></span>\n  <span class="spark"></span>\n  <span class="spark"></span>\n</div>\n')),(0,i.kt)("div",{className:"admonition admonition-info alert alert--info"},(0,i.kt)("div",{parentName:"div",className:"admonition-heading"},(0,i.kt)("h5",{parentName:"div"},(0,i.kt)("span",{parentName:"h5",className:"admonition-icon"},(0,i.kt)("svg",{parentName:"span",xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"},(0,i.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"}))),"Accessibility matters!")),(0,i.kt)("div",{parentName:"div",className:"admonition-content"},(0,i.kt)("p",{parentName:"div"},"This element does not have meaning for assistive technologies and it is just a fancy ornate, thus we should hide it from the accessibility tree by setting ",(0,i.kt)("inlineCode",{parentName:"p"},'aria-hidden="true"'),".",(0,i.kt)("br",{parentName:"p"}),"\n",(0,i.kt)("a",{parentName:"p",href:"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-hidden_attribute"},"Read more about ",(0,i.kt)("inlineCode",{parentName:"a"},"aria-hidden")),"."))),(0,i.kt)("h2",{id:"simple"},"Simple"),(0,i.kt)("p",null,"You can add the ",(0,i.kt)("inlineCode",{parentName:"p"},".simple")," class to the ",(0,i.kt)("inlineCode",{parentName:"p"},".fireworks"),", it will remove the main glow effect."),(0,i.kt)(r.Z,{height:"200px",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>Fireworks</title> </head> <body> <div class="flex-center" style="padding-top: 3em"> <div class="fireworks simple" aria-hidden="true"> <span class="spark"></span> <span class="spark"></span> <span class="spark"></span> <span class="spark"></span> </div> </div> </body>\n</html>\n',mdxType:"PreviewBox"}),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-html",metastring:'title="index.html"',title:'"index.html"'},'<div class="fireworks simple" aria-hidden="true">\n  <span class="spark"></span>\n  <span class="spark"></span>\n  <span class="spark"></span>\n  <span class="spark"></span>\n</div>\n')),(0,i.kt)("h2",{id:"sizes"},"Sizes"),(0,i.kt)("p",null,"To change the fireworks size use ",(0,i.kt)("a",{parentName:"p",href:"/docs/helpers/size-setters"},"size setter classes"),".\nThese classes just set a ",(0,i.kt)("inlineCode",{parentName:"p"},"font-size")," property so it is possible to change it yourself by writing custom CSS."),(0,i.kt)(r.Z,{height:"350px",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>Fireworks</title> </head> <body> <div class="flex-center" style="padding-top: 5em; gap: 5em;"> <div class="fireworks size-xs" aria-hidden="true"> <span class="spark"></span> <span class="spark"></span> <span class="spark"></span> <span class="spark"></span> </div> <div class="fireworks size-lg" aria-hidden="true"> <span class="spark"></span> <span class="spark"></span> <span class="spark"></span> <span class="spark"></span> </div> <div class="fireworks size-3x" aria-hidden="true"> <span class="spark"></span> <span class="spark"></span> <span class="spark"></span> <span class="spark"></span> </div> </div> </body>\n</html>\n',mdxType:"PreviewBox"}),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-html",metastring:'title="index.html"',title:'"index.html"'},'<div class="fireworks size-xs" aria-hidden="true">...</div>\n<div class="fireworks size-lg" aria-hidden="true">...</div>\n<div class="fireworks size-3x" aria-hidden="true">...</div>\n')),(0,i.kt)("h2",{id:"color--customization"},"Color & customization"),(0,i.kt)("p",null,"Fireworks can be customized with CSS variables that is defined for it. Here is the list of them:"),(0,i.kt)("p",null,"Color:",(0,i.kt)("br",{parentName:"p"}),"\n",(0,i.kt)("inlineCode",{parentName:"p"},"--flatify__firework-color-main"),(0,i.kt)("br",{parentName:"p"}),"\n",(0,i.kt)("inlineCode",{parentName:"p"},"--flatify__firework-color-center-top-bottom"),(0,i.kt)("br",{parentName:"p"}),"\n",(0,i.kt)("inlineCode",{parentName:"p"},"--flatify__firework-color-center-left-right"),(0,i.kt)("br",{parentName:"p"}),"\n",(0,i.kt)("inlineCode",{parentName:"p"},"--flatify__firework-color-left-top-bottom"),(0,i.kt)("br",{parentName:"p"}),"\n",(0,i.kt)("inlineCode",{parentName:"p"},"--flatify__firework-color-right-top-bottom")),(0,i.kt)("p",null,"Animation:",(0,i.kt)("br",{parentName:"p"}),"\n",(0,i.kt)("inlineCode",{parentName:"p"},"--flatify__firework-animation-delay"),(0,i.kt)("br",{parentName:"p"}),"\n",(0,i.kt)("inlineCode",{parentName:"p"},"--flatify__firework-animation-duration"),(0,i.kt)("br",{parentName:"p"}),"\n",(0,i.kt)("inlineCode",{parentName:"p"},"--flatify__firework-animation-iteration-count")),(0,i.kt)("p",null,"The example below shows how to use this variables:"),(0,i.kt)(r.Z,{height:"200px",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>Fireworks</title> <style> .my-custom-fireworks-1, .my-custom-fireworks-2, .my-custom-fireworks-3{ --flatify__firework-color-main: #FFCE54; --flatify__firework-color-center-top-bottom: #FC6E51; --flatify__firework-color-center-left-right: #F6BB42; --flatify__firework-color-left-top-bottom: #2ECC71; --flatify__firework-color-right-top-bottom: #EC87C0; --flatify__firework-animation-duration: 2s; } .my-custom-fireworks-1{ --flatify__firework-animation-delay: 200ms; } .my-custom-fireworks-2{ --flatify__firework-animation-delay: 400ms; } .my-custom-fireworks-3{ --flatify__firework-animation-delay: 600ms; } </style> </head> <body> <div class="flex-center" style="padding-top: 3em; gap: 4em"> <div class="fireworks my-custom-fireworks-1" aria-hidden="true"> <span class="spark"></span> <span class="spark"></span> <span class="spark"></span> <span class="spark"></span> </div> <div class="fireworks my-custom-fireworks-2" aria-hidden="true"> <span class="spark"></span> <span class="spark"></span> <span class="spark"></span> <span class="spark"></span> </div> <div class="fireworks my-custom-fireworks-3" aria-hidden="true"> <span class="spark"></span> <span class="spark"></span> <span class="spark"></span> <span class="spark"></span> </div> </div> </body>\n</html>\n',mdxType:"PreviewBox"}),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-html",metastring:'title="index.html"',title:'"index.html"'},'<div class="fireworks my-custom-fireworks-1" aria-hidden="true">...</div>\n<div class="fireworks my-custom-fireworks-2" aria-hidden="true">...</div>\n<div class="fireworks my-custom-fireworks-3" aria-hidden="true">...</div>\n')),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-css",metastring:'title="style.css"',title:'"style.css"'},".my-custom-fireworks-1,\n.my-custom-fireworks-2,\n.my-custom-fireworks-3 {\n  --flatify__firework-color-main: #ffce54;\n  --flatify__firework-color-center-top-bottom: #fc6e51;\n  --flatify__firework-color-center-left-right: #f6bb42;\n  --flatify__firework-color-left-top-bottom: #2ecc71;\n  --flatify__firework-color-right-top-bottom: #ec87c0;\n  --flatify__firework-animation-duration: 2s;\n}\n\n.my-custom-fireworks-1 {\n  --flatify__firework-animation-delay: 200ms;\n}\n\n.my-custom-fireworks-2 {\n  --flatify__firework-animation-delay: 400ms;\n}\n\n.my-custom-fireworks-3 {\n  --flatify__firework-animation-delay: 600ms;\n}\n")),(0,i.kt)("div",{className:"admonition admonition-success alert alert--success"},(0,i.kt)("div",{parentName:"div",className:"admonition-heading"},(0,i.kt)("h5",{parentName:"div"},(0,i.kt)("span",{parentName:"h5",className:"admonition-icon"},(0,i.kt)("svg",{parentName:"span",xmlns:"http://www.w3.org/2000/svg",width:"12",height:"16",viewBox:"0 0 12 16"},(0,i.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"}))),"Dynamic color for fireworks")),(0,i.kt)("div",{parentName:"div",className:"admonition-content"},(0,i.kt)("p",{parentName:"div"},"FlatifyCSS has ",(0,i.kt)("a",{parentName:"p",href:"/docs/helpers/animation"},"predefined animation and helper classes")," to change the element hue, you can use ",(0,i.kt)("inlineCode",{parentName:"p"},"flatify-hue")," and ",(0,i.kt)("inlineCode",{parentName:"p"},"flatify-hue-min")," animations or directly set animation setter helper classes that are ",(0,i.kt)("inlineCode",{parentName:"p"},".anim-hue")," and ",(0,i.kt)("inlineCode",{parentName:"p"},".anim-hue-min"),"."),(0,i.kt)(r.Z,{height:"200px",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>Fireworks</title> </head> <body> <div class="flex-center" style="padding-top: 3em; gap: 4em;"> <div class="fireworks anim-hue" aria-hidden="true"> <span class="spark"></span> <span class="spark"></span> <span class="spark"></span> <span class="spark"></span> </div> <div class="fireworks anim-hue-min" aria-hidden="true"> <span class="spark"></span> <span class="spark"></span> <span class="spark"></span> <span class="spark"></span> </div> </div> </body>\n</html>\n',mdxType:"PreviewBox"}),(0,i.kt)("pre",{parentName:"div"},(0,i.kt)("code",{parentName:"pre",className:"language-html",metastring:'title="index.html"',title:'"index.html"'},'<div class="fireworks anim-hue" aria-hidden="true">...</div>\n<div class="fireworks anim-hue-min" aria-hidden="true">...</div>\n')))))}f.isMDXComponent=!0}}]);