"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[9912],{3905:function(e,t,r){r.d(t,{Zo:function(){return p},kt:function(){return d}});var a=r(7294);function n(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function c(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var a=Object.getOwnPropertySymbols(e);t&&(a=a.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,a)}return r}function o(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?c(Object(r),!0).forEach((function(t){n(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):c(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function i(e,t){if(null==e)return{};var r,a,n=function(e,t){if(null==e)return{};var r,a,n={},c=Object.keys(e);for(a=0;a<c.length;a++)r=c[a],t.indexOf(r)>=0||(n[r]=e[r]);return n}(e,t);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(a=0;a<c.length;a++)r=c[a],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(n[r]=e[r])}return n}var l=a.createContext({}),s=function(e){var t=a.useContext(l),r=t;return e&&(r="function"==typeof e?e(t):o(o({},t),e)),r},p=function(e){var t=s(e.components);return a.createElement(l.Provider,{value:t},e.children)},m={inlineCode:"code",wrapper:function(e){var t=e.children;return a.createElement(a.Fragment,{},t)}},u=a.forwardRef((function(e,t){var r=e.components,n=e.mdxType,c=e.originalType,l=e.parentName,p=i(e,["components","mdxType","originalType","parentName"]),u=s(r),d=n,y=u["".concat(l,".").concat(d)]||u[d]||m[d]||c;return r?a.createElement(y,o(o({ref:t},p),{},{components:r})):a.createElement(y,o({ref:t},p))}));function d(e,t){var r=arguments,n=t&&t.mdxType;if("string"==typeof e||n){var c=r.length,o=new Array(c);o[0]=u;var i={};for(var l in t)hasOwnProperty.call(t,l)&&(i[l]=t[l]);i.originalType=e,i.mdxType="string"==typeof e?e:n,o[1]=i;for(var s=2;s<c;s++)o[s]=r[s];return a.createElement.apply(null,o)}return a.createElement.apply(null,r)}u.displayName="MDXCreateElement"},1942:function(e,t,r){r.d(t,{Z:function(){return n}});var a=r(7294);function n(e){var t=e.color,r=e.title,n=e.inline,c=e.style,o=e.className;return a.createElement("div",{className:"docus-color-indicator flex-center-y "+(n?"inline":"")},a.createElement("div",{className:"docus-color"+(o?" "+o:""),style:Object.assign({backgroundColor:t},c)}),a.createElement("code",null,r))}},2695:function(e,t,r){r.d(t,{Z:function(){return i}});var a=r(7462),n=r(3366),c=r(7294),o=["isBad","isGood","children","disableFullscreen","limitWidth"];function i(e){var t=e.isBad,r=e.isGood,i=e.children,l=e.disableFullscreen,s=e.limitWidth,p=(0,n.Z)(e,o),m=(0,c.useState)(!1),u=m[0],d=m[1];return c.createElement("div",{className:"preview-box-wrapper",style:s?{width:s,display:"table",margin:"0 auto"}:{}},!l&&c.createElement("button",{"aria-label":u?"Minimize the example":"Fullscreen the example",className:"preview-box-fullscreen-toggle",onClick:function(e){var t=e.target.closest(".preview-box-wrapper");u?document.exitFullscreen?document.exitFullscreen():document.webkitExitFullscreen?document.webkitExitFullscreen():document.msExitFullscreen&&document.msExitFullscreen():t.requestFullscreen?t.requestFullscreen():t.webkitRequestFullscreen?t.webkitRequestFullscreen():t.msRequestFullscreen&&t.msRequestFullscreen(),d(!u)}},u?c.createElement("svg",{"aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",x:"0",y:"0",viewBox:"0 0 24 24"},c.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"})):c.createElement("svg",{"aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",x:"0",y:"0",viewBox:"26 26 48 48"},c.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&&c.createElement("div",{className:"is-bad-example style-red"},c.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",x:"0",y:"0",viewBox:"2 2 12 12"},c.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"}))),r&&c.createElement("div",{className:"is-good-example style-green"},c.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",x:"0",y:"0",viewBox:"0 0 18 18"},c.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"}))),c.createElement("iframe",(0,a.Z)({width:"100%",className:"docus-preview-box"+(u?" is-fullscreen":""),srcDoc:i},p)))}},8677:function(e,t,r){r.r(t),r.d(t,{frontMatter:function(){return l},contentTitle:function(){return s},metadata:function(){return p},toc:function(){return m},default:function(){return d}});var a=r(7462),n=r(3366),c=(r(7294),r(3905)),o=(r(2695),r(1942)),i=["components"],l={title:"Opacity setters",sidebar_position:3},s=void 0,p={unversionedId:"helpers/opacity-setters",id:"helpers/opacity-setters",isDocsHomePage:!1,title:"Opacity setters",description:"Opacity setter classes are practical for any element,",source:"@site/docs/helpers/opacity-setters.mdx",sourceDirName:"helpers",slug:"/helpers/opacity-setters",permalink:"/docs/helpers/opacity-setters",editUrl:"https://github.com/amir2mi/flatifycss/tree/master/website/docs/helpers/opacity-setters.mdx",tags:[],version:"current",sidebarPosition:3,frontMatter:{title:"Opacity setters",sidebar_position:3},sidebar:"tutorialSidebar",previous:{title:"Alignment & positioning",permalink:"/docs/helpers/alignment"},next:{title:"Color setters",permalink:"/docs/helpers/color-setters"}},m=[],u={toc:m};function d(e){var t=e.components,r=(0,n.Z)(e,i);return(0,c.kt)("wrapper",(0,a.Z)({},u,r,{components:t,mdxType:"MDXLayout"}),(0,c.kt)("p",null,"Opacity setter classes are practical for any element,\nyou can change the impact an element can have on others by adjusting opacity."),(0,c.kt)(o.Z,{className:"opacity-0",color:"#1cb0f6",title:".opacity-0",mdxType:"ColorIndicator"}),(0,c.kt)(o.Z,{className:"opacity-10",color:"#1cb0f6",title:".opacity-10",mdxType:"ColorIndicator"}),(0,c.kt)(o.Z,{className:"opacity-20",color:"#1cb0f6",title:".opacity-20",mdxType:"ColorIndicator"}),(0,c.kt)(o.Z,{className:"opacity-30",color:"#1cb0f6",title:".opacity-30",mdxType:"ColorIndicator"}),(0,c.kt)(o.Z,{className:"opacity-40",color:"#1cb0f6",title:".opacity-40",mdxType:"ColorIndicator"}),(0,c.kt)(o.Z,{className:"opacity-50",color:"#1cb0f6",title:".opacity-50",mdxType:"ColorIndicator"}),(0,c.kt)(o.Z,{className:"opacity-60",color:"#1cb0f6",title:".opacity-60",mdxType:"ColorIndicator"}),(0,c.kt)(o.Z,{className:"opacity-70",color:"#1cb0f6",title:".opacity-70",mdxType:"ColorIndicator"}),(0,c.kt)(o.Z,{className:"opacity-80",color:"#1cb0f6",title:".opacity-80",mdxType:"ColorIndicator"}),(0,c.kt)(o.Z,{className:"opacity-90",color:"#1cb0f6",title:".opacity-90",mdxType:"ColorIndicator"}),(0,c.kt)(o.Z,{className:"opacity-100",color:"#1cb0f6",title:".opacity-100",mdxType:"ColorIndicator"})," ",(0,c.kt)("br",null),(0,c.kt)("div",{className:"admonition admonition-info alert alert--info"},(0,c.kt)("div",{parentName:"div",className:"admonition-heading"},(0,c.kt)("h5",{parentName:"div"},(0,c.kt)("span",{parentName:"h5",className:"admonition-icon"},(0,c.kt)("svg",{parentName:"span",xmlns:"http://www.w3.org/2000/svg",width:"14",height:"16",viewBox:"0 0 14 16"},(0,c.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"}))),"Custom helper classes")),(0,c.kt)("div",{parentName:"div",className:"admonition-content"},(0,c.kt)("p",{parentName:"div"},"Note that these classes can be customized in ",(0,c.kt)("inlineCode",{parentName:"p"},"_config.scss")," file, there is a variable called ",(0,c.kt)("inlineCode",{parentName:"p"},"$OPACITY_LIST"),",\nall classes are generated from this list.\nSo it is possible to create customized helper classes for opacity simply!"))),(0,c.kt)("pre",null,(0,c.kt)("code",{parentName:"pre",className:"language-scss",metastring:'{5,6,12} title="_config.scss"',"{5,6,12}":!0,title:'"_config.scss"'},"// This list will be converted to helper classes.\n// .opacity-[]\n$OPACITY_LIST: (0, 5, 8, 10, 20, 30, 40, 50, 55, 60, 70, 80, 90, 100);\n")))}d.isMDXComponent=!0}}]);