"use strict";(self.webpackChunkwebsite=self.webpackChunkwebsite||[]).push([[3557],{3905:function(e,t,r){r.d(t,{Zo:function(){return h},kt:function(){return m}});var n=r(7294);function a(e,t,r){return t in e?Object.defineProperty(e,t,{value:r,enumerable:!0,configurable:!0,writable:!0}):e[t]=r,e}function l(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 s(e){for(var t=1;t<arguments.length;t++){var r=null!=arguments[t]?arguments[t]:{};t%2?l(Object(r),!0).forEach((function(t){a(e,t,r[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(r)):l(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,n,a=function(e,t){if(null==e)return{};var r,n,a={},l=Object.keys(e);for(n=0;n<l.length;n++)r=l[n],t.indexOf(r)>=0||(a[r]=e[r]);return a}(e,t);if(Object.getOwnPropertySymbols){var l=Object.getOwnPropertySymbols(e);for(n=0;n<l.length;n++)r=l[n],t.indexOf(r)>=0||Object.prototype.propertyIsEnumerable.call(e,r)&&(a[r]=e[r])}return a}var o=n.createContext({}),c=function(e){var t=n.useContext(o),r=t;return e&&(r="function"==typeof e?e(t):s(s({},t),e)),r},h=function(e){var t=c(e.components);return n.createElement(o.Provider,{value:t},e.children)},p={inlineCode:"code",wrapper:function(e){var t=e.children;return n.createElement(n.Fragment,{},t)}},d=n.forwardRef((function(e,t){var r=e.components,a=e.mdxType,l=e.originalType,o=e.parentName,h=i(e,["components","mdxType","originalType","parentName"]),d=c(r),m=a,u=d["".concat(o,".").concat(m)]||d[m]||p[m]||l;return r?n.createElement(u,s(s({ref:t},h),{},{components:r})):n.createElement(u,s({ref:t},h))}));function m(e,t){var r=arguments,a=t&&t.mdxType;if("string"==typeof e||a){var l=r.length,s=new Array(l);s[0]=d;var i={};for(var o in t)hasOwnProperty.call(t,o)&&(i[o]=t[o]);i.originalType=e,i.mdxType="string"==typeof e?e:a,s[1]=i;for(var c=2;c<l;c++)s[c]=r[c];return n.createElement.apply(null,s)}return n.createElement.apply(null,r)}d.displayName="MDXCreateElement"},2695:function(e,t,r){r.d(t,{Z:function(){return i}});var n=r(7462),a=r(3366),l=r(7294),s=["isBad","isGood","children","disableFullscreen","limitWidth"];function i(e){var t=e.isBad,r=e.isGood,i=e.children,o=e.disableFullscreen,c=e.limitWidth,h=(0,a.Z)(e,s),p=(0,l.useState)(!1),d=p[0],m=p[1];return l.createElement("div",{className:"preview-box-wrapper",style:c?{width:c,display:"table",margin:"0 auto"}:{}},!o&&l.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(),m(!d)}},d?l.createElement("svg",{"aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",x:"0",y:"0",viewBox:"0 0 24 24"},l.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"})):l.createElement("svg",{"aria-hidden":"true",xmlns:"http://www.w3.org/2000/svg",x:"0",y:"0",viewBox:"26 26 48 48"},l.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&&l.createElement("div",{className:"is-bad-example style-red"},l.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",x:"0",y:"0",viewBox:"2 2 12 12"},l.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&&l.createElement("div",{className:"is-good-example style-green"},l.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",x:"0",y:"0",viewBox:"0 0 18 18"},l.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"}))),l.createElement("iframe",(0,n.Z)({width:"100%",className:"docus-preview-box"+(d?" is-fullscreen":""),srcDoc:i},h)))}},1118:function(e,t,r){r.r(t),r.d(t,{frontMatter:function(){return o},contentTitle:function(){return c},metadata:function(){return h},toc:function(){return p},default:function(){return m}});var n=r(7462),a=r(3366),l=(r(7294),r(3905)),s=r(2695),i=["components"],o={title:"Separators"},c=void 0,h={unversionedId:"content/separators",id:"content/separators",isDocsHomePage:!1,title:"Separators",description:"With separators, content can have an area to breathe, suitable whitespace, or anything you call it.",source:"@site/docs/content/separators.mdx",sourceDirName:"content",slug:"/content/separators",permalink:"/docs/content/separators",editUrl:"https://github.com/amir2mi/flatifycss/tree/master/website/docs/content/separators.mdx",tags:[],version:"current",frontMatter:{title:"Separators"},sidebar:"tutorialSidebar",previous:{title:"Keyboard buttons",permalink:"/docs/content/keyboard-buttons"},next:{title:"Table",permalink:"/docs/content/table"}},p=[{value:"Dots",id:"dots",children:[],level:3},{value:"Classic line",id:"classic-line",children:[],level:3},{value:"Short line",id:"short-line",children:[],level:3}],d={toc:p};function m(e){var t=e.components,r=(0,a.Z)(e,i);return(0,l.kt)("wrapper",(0,n.Z)({},d,r,{components:t,mdxType:"MDXLayout"}),(0,l.kt)("p",null,"With separators, content can have an area to breathe, suitable whitespace, or anything you call it.",(0,l.kt)("br",{parentName:"p"}),"\n","Three kinds of separators are available in FlatifyCSS, dots, line, and short line."),(0,l.kt)("h3",{id:"dots"},"Dots"),(0,l.kt)("p",null,"Three gorgeous dots, that is all a long document needs. The opacity of the separators primarily are decreased, it helps element to tread more as a passive object in the playground, you can use ",(0,l.kt)("a",{parentName:"p",href:"/docs/helpers/opacity-setters"},"opacity helper classes")," to change it."),(0,l.kt)(s.Z,{height:"340px",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.min.css" /> <title>Separators</title> </head> <hr class="dots opacity-90" /> <hr class="dots color-red" /> <hr class="dots style-blue opacity-100" />\n</html>',mdxType:"PreviewBox"}),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-html",metastring:'title="index.html"',title:'"index.html"'},'<hr class="dots opacity-90" />\n<hr class="dots color-red" />\n<hr class="dots style-blue opacity-100" />\n')),(0,l.kt)("h3",{id:"classic-line"},"Classic line"),(0,l.kt)("p",null,"This is a simple ",(0,l.kt)("inlineCode",{parentName:"p"},"<hr>"),"."),(0,l.kt)(s.Z,{height:"80px",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.min.css" /> <title>Separators</title> </head> <hr>\n</html>',mdxType:"PreviewBox"}),(0,l.kt)("h3",{id:"short-line"},"Short line"),(0,l.kt)("p",null,"Sometimes classic ",(0,l.kt)("inlineCode",{parentName:"p"},"<hr>")," is more interrupting than it should be, however, a short one can be beneficial."),(0,l.kt)(s.Z,{height:"275px",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.min.css" /> <title>Separators</title> </head> <hr class="short"> <hr class="short style-green"> <hr class="short style-warning"> <hr class="short style-danger">\n</html>',mdxType:"PreviewBox"}),(0,l.kt)("pre",null,(0,l.kt)("code",{parentName:"pre",className:"language-html",metastring:'title="index.html"',title:'"index.html"'},'<hr class="short" />\n<hr class="short style-green" />\n<hr class="short style-warning" />\n')))}m.isMDXComponent=!0}}]);