github-migration/compass
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Added examples for compass/css3: border radius, box shadow, box sizing, columns, inline block, opacity, text shadow. Slighty modified example CSS for better display.

Browse Source
This commit is contained in:
Johan Ronsse 2010-02-03 00:11:58 +01:00
parent 244bc0d944
commit acf2182d87
22 changed files with 189 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
doc-src/content/examples/compass/css3/border_radius.haml Normal file
View File

@ -0,0 +1,8 @@
---
title: Border-radius
description: css3 mixin for border-radius
framework: compass/css3
stylesheet: compass/css3/_border_radius.sass
example: true
---
= render "partials/example"

1
doc-src/content/examples/compass/css3/border_radius/markup.haml Normal file
View File

@ -0,0 +1 @@
#border-radius

7
doc-src/content/examples/compass/css3/border_radius/stylesheet.sass Normal file
View File

@ -0,0 +1,7 @@
@import compass/css3
#border-radius
+border-radius('10px')
:width 40px
:height 40px
:background red

8
doc-src/content/examples/compass/css3/box_shadow.haml Normal file
View File

@ -0,0 +1,8 @@
---
title: Box-shadow
description: css3 mixin for box-shadow
framework: compass/css3
stylesheet: compass/css3/_box_shadow.sass
example: true
---
= render "partials/example"

3
doc-src/content/examples/compass/css3/box_shadow/markup.haml Normal file
View File

@ -0,0 +1,3 @@
#box-shadow-default
#box-shadow-custom

17
doc-src/content/examples/compass/css3/box_shadow/stylesheet.sass Normal file
View File

@ -0,0 +1,17 @@
@import compass/css3
// Default box shadow
#box-shadow-default
+box-shadow
:width 40px
:height 40px
:background #EEE
:margin 20px
// Box shadow with custom settings
#box-shadow-custom
+box-shadow(red, 2px, 2px, 10px)
:width 40px
:height 40px
:background #EEE
:margin 20px

8
doc-src/content/examples/compass/css3/box_sizing.haml Normal file
View File

@ -0,0 +1,8 @@
---
title: Box-sizing
description: css3 mixin for box-sizing
framework: compass/css3
stylesheet: compass/css3/_box_sizing.sass
example: true
---
= render "partials/example"

3
doc-src/content/examples/compass/css3/box_sizing/markup.haml Normal file
View File

@ -0,0 +1,3 @@
#contentBox
#borderBox

17
doc-src/content/examples/compass/css3/box_sizing/stylesheet.sass Normal file
View File

@ -0,0 +1,17 @@
@import compass/css3
#contentBox
+box-sizing('content-box')
:background red
:padding 20px
:border 10px solid green
:margin 20px
:width 200px
#borderBox
+box-sizing('border-box')
:background red
:padding 20px
:border 10px solid green
:margin 20px
:width 200px

8
doc-src/content/examples/compass/css3/columns.haml Normal file
View File

@ -0,0 +1,8 @@
---
title: Columns
description: css3 mixin for css columns
framework: compass/css3
stylesheet: compass/css3/_columns.sass
example: true
---
= render "partials/example"

8
doc-src/content/examples/compass/css3/columns/markup.haml Normal file
View File

@ -0,0 +1,8 @@
%div(id="twoColumn")
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
%div(id="threeColumn")
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
%div(id="fourColumnWithRule")
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

17
doc-src/content/examples/compass/css3/columns/stylesheet.sass Normal file
View File

@ -0,0 +1,17 @@
@import compass/css3
#twoColumn
+column-count(2)
:width 300px
:margin-bottom 20px
#threeColumn
+column-count(3)
:width 300px
:margin-bottom 20px
#fourColumnWithRule
+column-count(4)
+column-rule(1px, solid, red)
:width 300px
:margin-bottom 20px

8
doc-src/content/examples/compass/css3/inline_block.haml Normal file
View File

@ -0,0 +1,8 @@
---
title: Inline-block
description: css3 mixin for inline-block
framework: compass/css3
stylesheet: compass/css3/_inline_block.sass
example: true
---
= render "partials/example"

3
doc-src/content/examples/compass/css3/inline_block/markup.haml Normal file
View File

@ -0,0 +1,3 @@
%p
this is an
%span(id="inline-block") inline block

7
doc-src/content/examples/compass/css3/inline_block/stylesheet.sass Normal file
View File

@ -0,0 +1,7 @@
@import compass/css3
#inline-block
+inline-block
:padding 4px 10px
:background red
:color white

8
doc-src/content/examples/compass/css3/opacity.haml Normal file
View File

@ -0,0 +1,8 @@
---
title: Opacity
description: css3 mixin for opacity
framework: compass/css3
stylesheet: compass/css3/_opacity.sass
example: true
---
= render "partials/example"

9
doc-src/content/examples/compass/css3/opacity/markup.haml Normal file
View File

@ -0,0 +1,9 @@
#opacity10.opacityExample
#opacity20.opacityExample
#opacity50.opacityExample
#opaque.opacityExample
#transparent.opacityExample

22
doc-src/content/examples/compass/css3/opacity/stylesheet.sass Normal file
View File

@ -0,0 +1,22 @@
@import compass/css3
.opacityExample
:background red
:width 40px
:height 40px
:float left
#opacity10
+opacity(0.1)
#opacity20
+opacity(0.2)
#opacity50
+opacity(0.5)
#opaque
+opaque
#transparent
+transparent

8
doc-src/content/examples/compass/css3/text_shadow.haml Normal file
View File

@ -0,0 +1,8 @@
---
title: Text-shadow
description: css3 mixin for text-shadow
framework: compass/css3
stylesheet: compass/css3/_text_shadow.sass
example: true
---
= render "partials/example"

8
doc-src/content/examples/compass/css3/text_shadow/markup.haml Normal file
View File

@ -0,0 +1,8 @@
#p
this text has no shadow
#p
%span(class="hasShadow") this text does have shadow
#p
%span(class="hasCustomShadow") this text has a custom shadow

7
doc-src/content/examples/compass/css3/text_shadow/stylesheet.sass Normal file
View File

@ -0,0 +1,7 @@
@import compass/css3
.hasShadow
+text-shadow
.hasCustomShadow
+text-shadow(red, 3px, 3px, 0)

5
doc-src/content/stylesheets/example.sass
View File

@ -1,3 +1,6 @@
body
font-family: "Lucida Grande", Arial, sans-serif
#example
width: 100%
td
@ -5,7 +8,7 @@
padding: 6px 4px
vertical-align: top
width: 48%
max-width: 400px
pre
margin: 0
height: 200px
overflow: auto