diff --git a/doc-src/content/reference/compass/helpers.haml b/doc-src/content/reference/compass/helpers.haml index cc9626bb..607c128a 100644 --- a/doc-src/content/reference/compass/helpers.haml +++ b/doc-src/content/reference/compass/helpers.haml @@ -18,6 +18,7 @@ layout: core All Helpers: + * [color-stops()](/docs/reference/compass/helpers/color-stops/) * [elements-of-type()](/docs/reference/compass/helpers/display/) * [enumerate()](/docs/reference/compass/helpers/enumerate/) * [font-files()](/docs/reference/compass/helpers/font-files/) diff --git a/doc-src/content/reference/compass/helpers/color-stops.haml b/doc-src/content/reference/compass/helpers/color-stops.haml new file mode 100644 index 00000000..c62a3643 --- /dev/null +++ b/doc-src/content/reference/compass/helpers/color-stops.haml @@ -0,0 +1,51 @@ +--- +title: Compass Color Stops Helper +crumb: Color Stops +framework: compass +meta_description: Helper function for color-stops. +layout: core +classnames: + - reference + - core + - helpers +--- +%h1 Compass Color Stops Helper + +#color-stops.helper + %h3 + %a(href="#color-stops") + color-stops([$color-stop]*) + .details + %p + The color-stops helper provides a way to pass an arbitrary number of + colors stops to the gradient mixins. + %p + Any number of comma-delimited color stops can be passed, each color stop + should take the form of a color followed by an optional stopping point (separated by a space). + Where stop values are not provided they will be inferred by assuming an equal distribution + of colors between any specified locations. + %dl + %dg.head + %dt Example Call + %dd Means + %dg#ex1 + %dt + color-stops(#FFF,#F00,#00C) + %dd + \#FFF 0%, #F00 50%, #00C 100% + %dg#ex2 + %dt + color-stops(#FFF, #F00 25%, #0C0, #00C) + %dd + \#FFF 0%, #F00 25%, #0C0 62.5%, #00C 100% + %dg#ex3 + %dt + color-stops(#FFF, #F00 5px, #0C0, #00C 25px) + %dd + \#FFF 0px, #F00 5px, #0C0 15px, #00C 25px + .examples + %h4 Examples + %ul + %li + %a(href="/docs/examples/compass/css3/gradient/") Example of Gradients + diff --git a/doc-src/content/stylesheets/_specifics.sass b/doc-src/content/stylesheets/_specifics.sass new file mode 100644 index 00000000..59b1c221 --- /dev/null +++ b/doc-src/content/stylesheets/_specifics.sass @@ -0,0 +1,18 @@ +// This partial is where we put specific styling for certain + +#reference-compass-helpers-color-stops + dl + width: 100% + dt, dd + white-space: normal + text-align: left + dd + +text-shadow(white, 1px, 1px, 1px) + #ex1 dd + +linear-gradient(color-stops(#fff,#f00,#00c), left) + #ex2 dd + +linear-gradient(color-stops(#FFF, #F00 25%, #0C0, #00C), left) + #ex3 dd + +radial-gradient(color-stops(#FFF, #F00 5px, #0C0, #00C 25px), center center) + + \ No newline at end of file diff --git a/doc-src/content/stylesheets/screen.sass b/doc-src/content/stylesheets/screen.sass index 886f7fb8..07b3863c 100644 --- a/doc-src/content/stylesheets/screen.sass +++ b/doc-src/content/stylesheets/screen.sass @@ -264,6 +264,7 @@ aside[role="sidebar"] + article @import reference @import examples @import sidebar +@import specifics /* @group OVERRIDES by page