text: "use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[2319],{3905:function(e,t,r){r.d(t,{Zo:function(){return c},kt:function(){return d}});var n=r(7294);function o(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function i(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function l(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?i(Object(r),!0).forEach((function(t){o(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):i(Object(r)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(r,t))}))}return e}function a(e,t){if(null==e)return{};var r,n,o=function(e,t){if(null==e)return{};var r,n,o={},i=Object.keys(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||(o[r]=e[r]);return o}(e,t);if(Object.getOwnPropertySymbols){var i=Object.getOwnPropertySymbols(e);for(n=0;n<i.length;n++)r=i[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(o[r]=e[r])}return o}var s=n.createContext({}),p=function(e){var t=n.useContext(s),r=t;return e&&(r="function"==typeof e?e(t):l(l({},t),e)),r},c=function(e){var t=p(e.components);return n.createElement(s.Provider,{value:t},e.children)},u={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},f=n.forwardRef((function(e,t){var r=e.components,o=e.mdxType,i=e.originalType,s=e.parentName,c=a(e,["components","mdxType","originalType","parentName"]),f=p(r),d=o,m=f["".concat(s,".").concat(d)]||f[d]||u[d]||i;return r?n.createElement(m,l(l({ref:t},c),{},{components:r})):n.createElement(m,l({ref:t},c))}));function d(e,t){var r=arguments,o=t&&t.mdxType;if("string"==typeof e||o){var i=r.length,l=new Array(i);l[0]=f;var a={};for(var s in t)hasOwnProperty.call(t,s)&&(a[s]=t[s]);a.originalType=e,a.mdxType="string"==typeof e?e:o,l[1]=a;for(var p=2;p<i;p++)l[p]=r[p];return n.createElement.apply(null,l)}return n.createElement.apply(null,r)}f.displayName="MDXCreateElement"},7897:function(e,t,r){r.r(t),r.d(t,{frontMatter:function(){return a},contentTitle:function(){return s},metadata:function(){return p},toc:function(){return c},default:function(){return f}});var n=r(7462),o=r(3366),i=(r(7294),r(3905)),l=["components"],a={title:"Right to left",sidebar_position:8},s=void 0,p={unversionedId:"overview/rtl",id:"overview/rtl",isDocsHomePage:!1,title:"Right to left",description:"FlatifyCSS supports the right to left languages, we provide files with the -rtl suffix. on development page we have disgusted how files are compiled. if you run gulp or gulp release you will get the RTL files, however gulp watch does not compile files to RTL.",source:"@site/docs/overview/rtl.mdx",sourceDirName:"overview",slug:"/overview/rtl",permalink:"/docs/overview/rtl",editUrl:"https://github.com/amir2mi/flatifycss/tree/master/website/docs/overview/rtl.mdx",tags:[],version:"current",sidebarPosition:8,frontMatter:{title:"Right to left",sidebar_position:8},sidebar:"tutorialSidebar",previous:{title:"Accessibility",permalink:"/docs/overview/a11y"},next:{title:"Dark mode",permalink:"/docs/overview/darkmode"}},c=[],u={toc:c};function f(e){var t=e.components,r=(0,o.Z)(e,l);return(0,i.kt)("wrapper",(0,n.Z)({},u,r,{components:t,mdxType:"MDXLayout"}),(0,i.kt)("p",null,"FlatifyCSS supports the right to left languages, we provide files with the ",(0,i.kt)("inlineCode",{parentName:"p"},"-rtl")," suffix. on ",(0,i.kt)("a",{parentName:"p",href:"/docs/overview/development"},"development page")," we have disgusted how files are compiled. if you run ",(0,i.kt)("inlineCode",{parentName:"p"},"gulp")," or ",(0,i.kt)("inlineCode",{parentName:"p"},"gulp release")," you will get the RTL files, ",(0,i.kt)("strong",{parentName:"p"},"however ",(0,i.kt)("inlineCode",{parentName:"strong"},"gulp watch")," does not compile files to RTL"),"."),(0,i.kt)("p",null,"There is a file called ",(0,i.kt)("inlineCode",{parentName:"p"},"flatify-rtl.scss")," it is just the main file but ",(0,i.kt)("inlineCode",{parentName:"p"},"$IS_LTR")," is set to ",(0,i.kt)("inlineCode",{parentName:"p"},"FALSE")," so we will get the RTL version of the files."),(0,i.kt)("p",null,"With Sass we decide values based on the ",(0,i.kt)("inlineCode",{parentName:"p"},"$IS_LTR")," variable, for example:"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-scss"},"body {\n  @if $IS_LTR {\n    direction: ltr;\n  } @else {\n    direction: rtl;\n  }\n}\n")),(0,i.kt)("p",null,"The snippet above will be compiled to (Left to right):"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-css"},"body {\n  direction: ltr;\n}\n")),(0,i.kt)("p",null,"and for (Right to left):"),(0,i.kt)("pre",null,(0,i.kt)("code",{parentName:"pre",className:"language-css"},"body {\n  direction: rtl;\n}\n")),(0,i.kt)("p",null,"So you can extend features for both LTR and RTL with this condition easily."))}f.isMDXComponent=!0}}]);