{"componentChunkName":"component---src-templates-category-js","path":"/mixins/gradient","result":{"pageContext":{"node":{"frontmatter":{"category":"mixins","description":"Gradient mixins make it easier to write simple gradients in CSS","slug":"gradient","title":"Gradient"},"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\": \"Gradient\",\n  \"slug\": \"gradient\",\n  \"category\": \"mixins\",\n  \"description\": \"Gradient mixins make it easier to write simple gradients in CSS\"\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(\"h2\", null, \"Linear Gradients\"), mdx(\"div\", {\n    className: \"code-block__description\"\n  }, \"Gradient styles are based on the following naming pattern:\"), mdx(\"div\", {\n    className: \"code-block\"\n  }, mdx(CodeBlock, {\n    mdxType: \"CodeBlock\"\n  }, \"#gradient.gradient-type(@direction, @from-color, @to-color)\")), mdx(\"div\", {\n    className: \"code-block__description\"\n  }, \"gradient-types currently supported:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"linear\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"radial\")), mdx(\"div\", {\n    className: \"code-block__description\"\n  }, \"@direction is optional, by default it is set as 'to bottom'. linear gradient supports the following directions:\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"top  (to top)\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"left (to left)\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"right (to right)\")), mdx(\"div\", {\n    className: \"code-block__description\"\n  }, \"@from-color is set to @color[primary]\", mdx(\"br\", null), \"@to-color is set to @color[secondary]\"), mdx(\"div\", {\n    className: \"code-block\"\n  }, mdx(CodeBlock, {\n    mixinName: \"gradient\",\n    mdxType: \"CodeBlock\"\n  }, \"#gradient.linear();\"), mdx(Gradient, {\n    index: \"01\",\n    mdxType: \"Gradient\"\n  })), mdx(\"div\", {\n    className: \"code-block__description\"\n  }, \"Default Linear Gradient (Top)\"), mdx(\"div\", {\n    className: \"code-block\"\n  }, mdx(CodeBlock, {\n    mixinName: \"gradient\",\n    mdxType: \"CodeBlock\"\n  }, \"#gradient.linear(top);\"), mdx(Gradient, {\n    index: \"02\",\n    mdxType: \"Gradient\"\n  })), mdx(\"div\", {\n    className: \"code-block__description\"\n  }, \"Default Blue to Right Gradient\"), mdx(\"div\", {\n    className: \"code-block\"\n  }, mdx(CodeBlock, {\n    mdxType: \"CodeBlock\"\n  }, \"#gradient.linear(right, @forest-green, @mint-green);\"), mdx(Gradient, {\n    index: \"03\",\n    mdxType: \"Gradient\"\n  })), mdx(\"div\", {\n    className: \"code-block__description\"\n  }, \"Default Orange to Left Gradient\"), mdx(\"div\", {\n    className: \"code-block\"\n  }, mdx(CodeBlock, {\n    mdxType: \"CodeBlock\"\n  }, \"#gradient.linear(left, @forest-green, @mint-green);\"), mdx(Gradient, {\n    index: \"04\",\n    mdxType: \"Gradient\"\n  })), mdx(\"h2\", null, \"Radial Gradients\"), mdx(\"div\", {\n    className: \"code-block\"\n  }, mdx(CodeBlock, {\n    mdxType: \"CodeBlock\"\n  }, \"#gradient.radial(@from-color, @to-color);\")), mdx(\"div\", {\n    className: \"code-block__description\"\n  }, \"For radial gradients use the following mixin:\"), mdx(\"div\", {\n    className: \"code-block\"\n  }, mdx(CodeBlock, {\n    mdxType: \"CodeBlock\"\n  }, \"#gradient.radial();\"), mdx(Gradient, {\n    index: \"05\",\n    mdxType: \"Gradient\"\n  })), mdx(\"div\", {\n    className: \"code-block__description\"\n  }, \"To customize the gradient colors pass them in as parameters\"), mdx(\"div\", {\n    className: \"code-block\"\n  }, mdx(CodeBlock, {\n    mdxType: \"CodeBlock\"\n  }, \"#gradient.radial(@apricot, @vermilion);\"), mdx(Gradient, {\n    index: \"06\",\n    mdxType: \"Gradient\"\n  })));\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":[]}