{"componentChunkName":"component---src-templates-category-js","path":"/mixins/position","result":{"pageContext":{"node":{"frontmatter":{"category":"mixins","description":"Designed to easily write position rules","slug":"position","title":"Position"},"body":"var _excluded = [\"components\"];\n\nfunction _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\n/* @jsxRuntime classic */\n\n/* @jsx mdx */\nvar _frontmatter = {\n  \"title\": \"Position\",\n  \"slug\": \"position\",\n  \"category\": \"mixins\",\n  \"description\": \"Designed to easily write position rules\"\n};\nvar layoutProps = {\n  _frontmatter: _frontmatter\n};\nvar MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  var components = _ref.components,\n      props = _objectWithoutProperties(_ref, _excluded);\n\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"div\", {\n    className: \"code-block__description\"\n  }, \"Position mixins follow the following naming pattern:\"), mdx(\"div\", {\n    className: \"code-block\"\n  }, mdx(CodeBlock, {\n    mixinName: \"position\",\n    mdxType: \"CodeBlock\"\n  }, \"#position.position-type(@position, @x-value, @y-value);\")), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"The supported \", mdx(\"em\", {\n    parentName: \"li\"\n  }, \"position-type\"), \" options are: \", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"absolute\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"relative\"), \" \"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"fixed\")))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"The \", mdx(\"em\", {\n    parentName: \"li\"\n  }, \"position\"), \" parameter options are\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"top-left\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"bottom-left\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"top-right\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"bottom-right\"), \" \"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"All \", mdx(\"em\", {\n    parentName: \"li\"\n  }, \"position\"), \" values default to \", mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"0\"), \".\")), mdx(\"h2\", null, \"Absolute Positioning\"), mdx(\"div\", {\n    className: \"code-block__description\"\n  }, \"In the following examples the parent element is set with relative positioning and the child purple div has the position mixin applied so it will be positioned within the grey bordered wrapper. All position mixins require the first parameter.\"), mdx(\"div\", {\n    className: \"code-block\"\n  }, mdx(CodeBlock, {\n    mixinName: \"position\",\n    mdxType: \"CodeBlock\"\n  }, \"#position.absolute(top-left);\"), mdx(Position, {\n    index: \"01\",\n    mdxType: \"Position\"\n  })), mdx(\"div\", {\n    className: \"code-block__description\"\n  }, \"To set desired values pass in the postion values. In the next example, absolute positioning is set on the element with the bottom value as 10px and right value as 5px.\"), mdx(\"div\", {\n    className: \"code-block\"\n  }, mdx(CodeBlock, {\n    mixinName: \"position\",\n    mdxType: \"CodeBlock\"\n  }, \"#position.absolute(bottom-right, 10px, 5px);\"), mdx(Position, {\n    index: \"02\",\n    mdxType: \"Position\"\n  })), mdx(\"h2\", null, \"Relative Positioning\"), mdx(\"div\", {\n    className: \"code-block__description\"\n  }, \"The next example shows how to set relative positioning with a top value of 10px and right value of -50px.\"), mdx(\"div\", {\n    className: \"code-block\"\n  }, mdx(CodeBlock, {\n    mixinName: \"position\",\n    mdxType: \"CodeBlock\"\n  }, \"#position.relative(top-right, 10px, -50px);\"), mdx(Position, {\n    index: \"03\",\n    mdxType: \"Position\"\n  })), mdx(\"div\", {\n    className: \"code-block__description\"\n  }, \"This example shows a fixed positioning example, however as fixed positioning is calculated from the body element so there is no visual example here as if there was a small square purple div would ppear at the top left of the screen and would look out of place. In general fixed positioning is only used for elements that need to be fixed to the screen, like menu bars for example.\"), mdx(\"h2\", null, \"Fixed Positioning\"), mdx(\"div\", {\n    className: \"code-block\"\n  }, mdx(CodeBlock, {\n    mixinName: \"position\",\n    mdxType: \"CodeBlock\"\n  }, \"#position.fixed(top-left, 20px, 50px);\")));\n}\n;\nMDXContent.isMDXComponent = true;"},"documentationLinks":{"Installation":{"linkText":"Installation","linkRoute":"/documentation/installation"},"Settings":{"linkText":"Settings","linkRoute":"/documentation/settings"}},"mixinLinks":{"Border":{"linkText":"Border","linkRoute":"/mixins/border"},"Button":{"linkText":"Button","linkRoute":"/mixins/button"},"Font":{"linkText":"Font","linkRoute":"/mixins/font"},"Display":{"linkText":"Display","linkRoute":"/mixins/display"},"Form":{"linkText":"Form","linkRoute":"/mixins/form"},"Gradient":{"linkText":"Gradient","linkRoute":"/mixins/gradient"},"Grid":{"linkText":"Grid","linkRoute":"/mixins/grid"},"Hide":{"linkText":"Hide","linkRoute":"/mixins/hide"},"Position":{"linkText":"Position","linkRoute":"/mixins/position"},"Shape":{"linkText":"Shape","linkRoute":"/mixins/shape"}},"variablesLinks":{"Breakpoints":{"linkText":"Breakpoints","linkRoute":"/variables/breakpoints"},"Color Names":{"linkText":"Color Names","linkRoute":"/variables/color-names"}},"category":"mixins"}},"staticQueryHashes":[]}