Skip to content

Instantly share code, notes, and snippets.

@cmchase

cmchase/gradient-mixins

Last active December 20, 2015 02:19
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save cmchase/6056034 to your computer and use it in GitHub Desktop.
Save cmchase/6056034 to your computer and use it in GitHub Desktop.
Download ZIP
Bootstrap v2 Mixins for gradients with alpha transparencies. These go in the existing #gradient namespace in mixins.less and assume that the both the .vertical and .vertical-three-color mixins are present.
Raw
gradient-mixins
.vertical-alpha(@startColor: #555, @startAlpha: 1, @endColor: #333, @endAlpha: 1) {
@startAlphaColor: hsla(hue(@startColor), saturation(@startColor), lightness(@startColor), @startAlpha);
@endAlphaColor: hsla(hue(@endColor), saturation(@endColor), lightness(@endColor), @endAlpha);
.vertical(@startAlphaColor, @endAlphaColor);
}
.vertical-three-colors-alpha(@startColor: #00b3ee, @startAlpha: 1, @midColor: #7a43b6, @midAlpha: 1, @colorStop: 50%, @endColor: #0026ff, @endAlpha: 1) {
@startAlphaColor: hsla(hue(@startColor), saturation(@startColor), lightness(@startColor), @startAlpha);
@midAlphaColor: hsla(hue(@midColor), saturation(@midColor), lightness(@midColor), @midAlpha);
@endAlphaColor: hsla(hue(@endColor), saturation(@endColor), lightness(@endColor), @endAlpha);
.vertical-three-colors(@startAlphaColor, @midAlphaColor, @colorStop, @endAlphaColor);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment