Merge branch 'edge' of git://github.com/imathis/compass into edge
This commit is contained in:
commit
5d812effd6
6
examples/css3/config.rb
Normal file
6
examples/css3/config.rb
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
# Require any additional compass plugins here.
|
||||||
|
project_type = :stand_alone
|
||||||
|
css_dir = "stylesheets"
|
||||||
|
sass_dir = "src"
|
||||||
|
images_dir = "images"
|
||||||
|
relative_assets = true
|
10
examples/css3/src/gradient.sass
Normal file
10
examples/css3/src/gradient.sass
Normal file
@ -0,0 +1,10 @@
|
|||||||
|
@import compass/css3/gradient.sass
|
||||||
|
|
||||||
|
div
|
||||||
|
width: 200px
|
||||||
|
height: 100px
|
||||||
|
border: 1px solid #777
|
||||||
|
.linear
|
||||||
|
+v-gradient(#fff, #aaa, color_stop(50%, #ccc, 50%, #bbb))
|
||||||
|
.radial
|
||||||
|
+radial-gradient("45 45, 10, 52 50, 30", Cyan, DodgerBlue)
|
@ -4,3 +4,5 @@
|
|||||||
@import css3/box_shadow.sass
|
@import css3/box_shadow.sass
|
||||||
@import css3/columns.sass
|
@import css3/columns.sass
|
||||||
@import css3/box_sizing.sass
|
@import css3/box_sizing.sass
|
||||||
|
@import css3/box_shadow.sass
|
||||||
|
@import css3/text_shadow.sass
|
@ -1,12 +1,20 @@
|
|||||||
//**
|
//**
|
||||||
Provides cross-browser css box shadows
|
Provides cross-browser css box shadows for Webkit, Gecko, and CSS3 standard
|
||||||
for Webkit and the future
|
arguments are color, horizontal offset, vertical offset, and blur
|
||||||
arguments are horizontal offset, vertical offset, blur and color
|
|
||||||
|
|
||||||
=box-shadow(!ho, !vo, !b, !c )
|
//**
|
||||||
/* Webkit (Safari, Chrome)
|
These defaults make the arguments optional for this mixin
|
||||||
-webkit-box-shadow= !ho !vo !b !c
|
If you like, set different defaults in your project
|
||||||
/* Mozilla (Firefox, Camino)
|
|
||||||
-moz-box-shadow= !ho !vo !b !c
|
!default_box_shadow_color ||= #333
|
||||||
/* CSS3
|
!default_box_shadow_h_offset ||= 1px
|
||||||
box-shadow= !ho !vo !b !c
|
!default_box_shadow_v_offset ||= 1px
|
||||||
|
!default_box_shadow_blur ||= 5px
|
||||||
|
|
||||||
|
=box-shadow(!color = !default_box_shadow_color, !hoff = !default_box_shadow_h_offset, !voff = !default_box_shadow_v_offset, !blur = !default_box_shadow_blur)
|
||||||
|
/* Webkit (Safari, Chrome) */
|
||||||
|
-webkit-box-shadow= !color !hoff !voff !blur
|
||||||
|
/* Gecko (Firefox, Camino) */
|
||||||
|
-moz-box-shadow= !color !hoff !voff !blur
|
||||||
|
/* CSS3 */
|
||||||
|
box-shadow= !color !hoff !voff !blur
|
@ -0,0 +1,40 @@
|
|||||||
|
=gradient(!type, !coords, !color_start, !color_end, !color_stop = false)
|
||||||
|
!gradient= "#{!coords}, from(#{!color_start}), to(#{!color_end})"
|
||||||
|
@if !color_stop
|
||||||
|
!gradient= !gradient + ", " + !color_stop
|
||||||
|
background: -webkit-gradient(#{!type}, #{!gradient})
|
||||||
|
background: -moz-#{!type}-gradient(#{!gradient})
|
||||||
|
|
||||||
|
//*
|
||||||
|
// This will yeild a radial gradient with an apparent specular highlight
|
||||||
|
+radial-gradient("45 45, 10, 52 50, 30", Cyan, DodgerBlue)
|
||||||
|
|
||||||
|
=radial-gradient(!coords, !color1, !color2, !color_stop = false)
|
||||||
|
+gradient("radial", !coords, !color1, !color2, !color_stop)
|
||||||
|
|
||||||
|
//*
|
||||||
|
// This yields a linear gradient spanning from !start to !end coordinates
|
||||||
|
+linear-gradient("left top", "left bottom", #fff, #ddd)
|
||||||
|
|
||||||
|
=linear-gradient(!start, !end, !color1, !color2, !color_stop = false)
|
||||||
|
!coords = !start + ", " + !end
|
||||||
|
+gradient("linear", !coords, !color1, !color2, !color_stop)
|
||||||
|
|
||||||
|
//*
|
||||||
|
// This yields a gradient starting at the top with #fff, ending in #aaa
|
||||||
|
+v-gradient(#fff, #aaa)
|
||||||
|
// Same as above but with a #ccc at the halfway point
|
||||||
|
+v-gradient(#fff, #aaa, color_stop(50%, #ccc))
|
||||||
|
// Same as the first example but with #ccc at the 30% from the top, and #bbb at 70% from the top
|
||||||
|
+v-gradient(#fff, #aaa, color_stop(30%, #ccc, 70%, #bbb))
|
||||||
|
|
||||||
|
=v-gradient(!color1, !color2, !color_stop = false)
|
||||||
|
+linear-gradient("left top", "left bottom", !color1, !color2, !color_stop)
|
||||||
|
|
||||||
|
//*
|
||||||
|
// This yields a horizontal linear gradient spanning from left to right
|
||||||
|
// It can be used just like v-gradient above
|
||||||
|
h-gradient(#fff, #ddd)
|
||||||
|
|
||||||
|
=h-gradient(!color1, !color2, !color_stop = false)
|
||||||
|
+linear-gradient("left top", "right top", !color1, !color2, !color_stop)
|
@ -0,0 +1,15 @@
|
|||||||
|
//**
|
||||||
|
Provides css text shadows
|
||||||
|
arguments are color, horizontal offset, vertical offset, and blur
|
||||||
|
|
||||||
|
//**
|
||||||
|
These defaults make the arguments optional for this mixin
|
||||||
|
If you like, set different defaults in your project
|
||||||
|
|
||||||
|
!default_text_shadow_color ||= #aaa
|
||||||
|
!default_text_shadow_h_offset ||= 1px
|
||||||
|
!default_text_shadow_v_offset ||= 1px
|
||||||
|
!default_text_shadow_blur ||= 1px
|
||||||
|
|
||||||
|
=text-shadow(!color = !default_text_shadow_color, !hoff = !default_text_shadow_h_offset, !voff = !default_text_shadow_v_offset, !blur = !default_text_shadow_blur)
|
||||||
|
text-shadow= !color !hoff !voff !blur
|
Loading…
Reference in New Issue
Block a user