* Added examples for CSS3 transforms, transitions and gradients.
* Updated every CSS3 example to follow doc conventions: no tabs, spaces(2), colon after property (e.g. background: red), id naming like #id-name, no camelCasing
This commit is contained in:
Johan Ronsse
parent
acf2182d87
commit
13af3a7521
@ -1 +1,49 @@
|
||||
#border-radius
|
||||
%p
|
||||
Box with all corners rounded
|
||||
|
||||
#border-radius.border-radius-example
|
||||
|
||||
%p
|
||||
Box with only top left corner rounded
|
||||
|
||||
#border-radius-top-left.border-radius-example
|
||||
|
||||
%p
|
||||
Box with only top right corner rounded
|
||||
|
||||
#border-radius-top-right.border-radius-example
|
||||
|
||||
%p
|
||||
Box with only bottom left corner rounded
|
||||
|
||||
#border-radius-bottom-left.border-radius-example
|
||||
|
||||
%p
|
||||
Box with only bottom right corner rounded
|
||||
|
||||
#border-radius-bottom-right.border-radius-example
|
||||
|
||||
%p
|
||||
Box with top corners rounded
|
||||
|
||||
#border-radiusTop.border-radius-example
|
||||
|
||||
%p
|
||||
Box with bottom corners rounded
|
||||
|
||||
#border-radius-bottom.border-radius-example
|
||||
|
||||
%p
|
||||
Box with left corners rounded
|
||||
|
||||
#border-radius-left.border-radius-example
|
||||
|
||||
%p
|
||||
Box with right corners rounded
|
||||
|
||||
#border-radius-right.border-radius-example
|
||||
|
||||
%p
|
||||
Box with different roundings for top/bottom and left/right
|
||||
|
||||
#border-radius-combo.border-radius-example
|
||||
|
||||
@ -1,7 +1,40 @@
|
||||
@import compass/css3
|
||||
|
||||
.border-radius-example
|
||||
width: 40px
|
||||
height: 40px
|
||||
background: red
|
||||
margin: 20px
|
||||
|
||||
#border-radius
|
||||
+border-radius('10px')
|
||||
:width 40px
|
||||
:height 40px
|
||||
:background red
|
||||
+border-radius("10px")
|
||||
|
||||
#border-radius-top-left
|
||||
+border-top-left-radius("10px")
|
||||
|
||||
#border-radius-top-right
|
||||
+border-top-right-radius("10px")
|
||||
|
||||
#border-radius-bottom-left
|
||||
+border-bottom-left-radius("10px")
|
||||
|
||||
#border-radius-bottom-right
|
||||
+border-bottom-right-radius("10px")
|
||||
|
||||
#border-radius-top
|
||||
+border-top-radius("10px")
|
||||
|
||||
#border-radius-bottom
|
||||
+border-bottom-radius("10px")
|
||||
|
||||
#border-radius-left
|
||||
+border-left-radius("10px")
|
||||
|
||||
#border-radius-right
|
||||
+border-right-radius("10px")
|
||||
|
||||
#border-radius-combo
|
||||
+border-corner-radius("top", "left", "20px")
|
||||
+border-corner-radius("top", "right", "5px")
|
||||
+border-corner-radius("bottom", "left", "12px")
|
||||
+border-corner-radius("bottom", "right", "28px")
|
||||
@ -1,3 +1,3 @@
|
||||
#box-shadow-default
|
||||
#box-shadow-default.box-shadow-example
|
||||
|
||||
#box-shadow-custom
|
||||
#box-shadow-custom.box-shadow-example
|
||||
@ -1,17 +1,15 @@
|
||||
@import compass/css3
|
||||
|
||||
.box-shadow-example
|
||||
width: 40px
|
||||
height: 40px
|
||||
background: #EEE
|
||||
margin: 20px
|
||||
|
||||
// Default box shadow
|
||||
#box-shadow-default
|
||||
+box-shadow
|
||||
:width 40px
|
||||
:height 40px
|
||||
:background #EEE
|
||||
:margin 20px
|
||||
+box-shadow
|
||||
|
||||
// Box shadow with custom settings
|
||||
#box-shadow-custom
|
||||
+box-shadow(red, 2px, 2px, 10px)
|
||||
:width 40px
|
||||
:height 40px
|
||||
:background #EEE
|
||||
:margin 20px
|
||||
+box-shadow(red, 2px, 2px, 10px)
|
||||
@ -1,3 +1,3 @@
|
||||
#contentBox
|
||||
#content-box.box-sizing-example
|
||||
|
||||
#borderBox
|
||||
#border-box.box-sizing-example
|
||||
@ -1,17 +1,14 @@
|
||||
@import compass/css3
|
||||
|
||||
#contentBox
|
||||
+box-sizing('content-box')
|
||||
:background red
|
||||
:padding 20px
|
||||
:border 10px solid green
|
||||
:margin 20px
|
||||
:width 200px
|
||||
.box-sizing-example
|
||||
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
|
||||
#content-box
|
||||
+box-sizing('content-box')
|
||||
|
||||
#border-box
|
||||
+box-sizing('border-box')
|
||||
@ -1,8 +1,8 @@
|
||||
%div(id="twoColumn")
|
||||
%div(id="two-column")
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
|
||||
%div(id="threeColumn")
|
||||
%div(id="three-column")
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
|
||||
%div(id="fourColumnWithRule")
|
||||
%div(id="four-column-with-rule")
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
|
||||
@ -1,17 +1,17 @@
|
||||
@import compass/css3
|
||||
|
||||
#twoColumn
|
||||
+column-count(2)
|
||||
:width 300px
|
||||
:margin-bottom 20px
|
||||
#two-column
|
||||
+column-count(2)
|
||||
width: 300px
|
||||
margin-bottom: 20px
|
||||
|
||||
#threeColumn
|
||||
+column-count(3)
|
||||
:width 300px
|
||||
:margin-bottom 20px
|
||||
#three-column
|
||||
+column-count(3)
|
||||
width: 300px
|
||||
margin-bottom: 20px
|
||||
|
||||
#fourColumnWithRule
|
||||
+column-count(4)
|
||||
+column-rule(1px, solid, red)
|
||||
:width 300px
|
||||
:margin-bottom 20px
|
||||
#four-column-with-rule
|
||||
+column-count(4)
|
||||
+column-rule(1px, "solid", red)
|
||||
width: 300px
|
||||
margin-bottom: 20px
|
||||
|
||||
8
doc-src/content/examples/compass/css3/gradient.haml
Normal file
8
doc-src/content/examples/compass/css3/gradient.haml
Normal file
@ -0,0 +1,8 @@
|
||||
---
|
||||
title: Gradient
|
||||
description: css3 mixin for css gradients
|
||||
framework: compass/css3
|
||||
stylesheet: compass/css3/_gradient.sass
|
||||
example: true
|
||||
---
|
||||
= render "partials/example"
|
||||
34
doc-src/content/examples/compass/css3/gradient/markup.haml
Normal file
34
doc-src/content/examples/compass/css3/gradient/markup.haml
Normal file
@ -0,0 +1,34 @@
|
||||
%p
|
||||
this box has no gradients
|
||||
|
||||
.gradient-example
|
||||
|
||||
%p
|
||||
This will yield a radial gradient with an apparent specular highlight
|
||||
|
||||
#radial-gradient.gradient-example
|
||||
|
||||
%p
|
||||
This yields a linear gradient spanning from !start to !end coordinates
|
||||
|
||||
#linear-gradient.gradient-example
|
||||
|
||||
%p
|
||||
This yields a gradient starting at the top with #fff, ending in #aaa
|
||||
|
||||
#v-gradient.gradient-example
|
||||
|
||||
%p
|
||||
Same as above but with a #ccc at the halfway point
|
||||
|
||||
#v-gradient-2.gradient-example
|
||||
|
||||
%p
|
||||
Same as the first example but with #ccc at the 30% from the top, and #bbb at 70% from the top
|
||||
|
||||
#v-gradient-3.gradient-example
|
||||
|
||||
%p
|
||||
This yields a horizontal linear gradient spanning from left to right. It can be used just like v-gradient above
|
||||
|
||||
#h-gradient.gradient-example
|
||||
@ -0,0 +1,31 @@
|
||||
@import compass/css3
|
||||
|
||||
.gradient-example
|
||||
width: 80px
|
||||
height: 80px
|
||||
background: red
|
||||
margin: 20px
|
||||
|
||||
// This will yield a radial gradient with an apparent specular highlight
|
||||
#radial-gradient
|
||||
+radial-gradient("45 45, 10, 52 50, 30", "Cyan", "DodgerBlue")
|
||||
|
||||
// This yields a linear gradient spanning from !start to !end coordinates
|
||||
#linear-gradient
|
||||
+linear-gradient("left top", "left bottom", #fff, #ddd)
|
||||
|
||||
// This yields a gradient starting at the top with #fff, ending in #aaa
|
||||
#v-gradient
|
||||
+v-gradient(#fff, #aaa)
|
||||
|
||||
// Same as above but with a #ccc at the halfway point
|
||||
#v-gradient-2
|
||||
+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-3
|
||||
+v-gradient(#fff, #aaa, color_stop(30%, #ccc, 70%, #bbb))
|
||||
|
||||
// This yields a horizontal linear gradient spanning from left to right. It can be used just like v-gradient above
|
||||
#h-gradient
|
||||
+h-gradient(#fff, #ddd)
|
||||
@ -1,7 +1,7 @@
|
||||
@import compass/css3
|
||||
|
||||
#inline-block
|
||||
+inline-block
|
||||
:padding 4px 10px
|
||||
:background red
|
||||
:color white
|
||||
+inline-block
|
||||
padding: 4px 10px
|
||||
background: red
|
||||
color: white
|
||||
|
||||
@ -1,9 +1,9 @@
|
||||
#opacity10.opacityExample
|
||||
#opacity-10.opacity-example
|
||||
|
||||
#opacity20.opacityExample
|
||||
#opacity-20.opacity-example
|
||||
|
||||
#opacity50.opacityExample
|
||||
#opacity-50.opacity-example
|
||||
|
||||
#opaque.opacityExample
|
||||
#opaque.opacity-example
|
||||
|
||||
#transparent.opacityExample
|
||||
#transparent.opacity-example
|
||||
@ -1,22 +1,22 @@
|
||||
@import compass/css3
|
||||
|
||||
.opacityExample
|
||||
:background red
|
||||
:width 40px
|
||||
:height 40px
|
||||
:float left
|
||||
.opacity-example
|
||||
background: red
|
||||
width: 40px
|
||||
height: 40px
|
||||
float: left
|
||||
|
||||
#opacity10
|
||||
+opacity(0.1)
|
||||
#opacity-10
|
||||
+opacity(0.1)
|
||||
|
||||
#opacity20
|
||||
+opacity(0.2)
|
||||
#opacity-20
|
||||
+opacity(0.2)
|
||||
|
||||
#opacity50
|
||||
+opacity(0.5)
|
||||
#opacity-50
|
||||
+opacity(0.5)
|
||||
|
||||
#opaque
|
||||
+opaque
|
||||
+opaque
|
||||
|
||||
#transparent
|
||||
+transparent
|
||||
+transparent
|
||||
@ -2,7 +2,7 @@
|
||||
this text has no shadow
|
||||
|
||||
#p
|
||||
%span(class="hasShadow") this text does have shadow
|
||||
%span(class="has-shadow") this text has a shadow
|
||||
|
||||
#p
|
||||
%span(class="hasCustomShadow") this text has a custom shadow
|
||||
%span(class="has-custom-shadow") this text has a custom shadow
|
||||
@ -1,7 +1,7 @@
|
||||
@import compass/css3
|
||||
|
||||
.hasShadow
|
||||
+text-shadow
|
||||
.has-shadow
|
||||
+text-shadow
|
||||
|
||||
.hasCustomShadow
|
||||
+text-shadow(red, 3px, 3px, 0)
|
||||
.has-custom-shadow
|
||||
+text-shadow(red, 3px, 3px, 0)
|
||||
8
doc-src/content/examples/compass/css3/transform.haml
Normal file
8
doc-src/content/examples/compass/css3/transform.haml
Normal file
@ -0,0 +1,8 @@
|
||||
---
|
||||
title: Transform
|
||||
description: css3 mixin for css transforms
|
||||
framework: compass/css3
|
||||
stylesheet: compass/css3/_transform.sass
|
||||
example: true
|
||||
---
|
||||
= render "partials/example"
|
||||
24
doc-src/content/examples/compass/css3/transform/markup.haml
Normal file
24
doc-src/content/examples/compass/css3/transform/markup.haml
Normal file
@ -0,0 +1,24 @@
|
||||
%p
|
||||
this div will change scale on hover
|
||||
|
||||
#scale.transform-example
|
||||
|
||||
%p
|
||||
this div will rotate on hover
|
||||
|
||||
#rotate.transform-example
|
||||
|
||||
%p
|
||||
this div will translate on hover
|
||||
|
||||
#translate.transform-example
|
||||
|
||||
%p
|
||||
this div will skew on hover
|
||||
|
||||
#skew.transform-example
|
||||
|
||||
%p
|
||||
this div will change scale, rotate, translate and skew on hover
|
||||
|
||||
#combo.transform-example
|
||||
@ -0,0 +1,37 @@
|
||||
@import compass/css3
|
||||
|
||||
.transform-example
|
||||
width: 40px
|
||||
height: 40px
|
||||
background: red
|
||||
margin: 20px
|
||||
|
||||
#scale
|
||||
+scale(1)
|
||||
|
||||
#scale:hover
|
||||
+scale(2)
|
||||
|
||||
#rotate
|
||||
+rotate(0)
|
||||
|
||||
#rotate:hover
|
||||
+rotate(45)
|
||||
|
||||
#translate
|
||||
+translate(0, 0)
|
||||
|
||||
#translate:hover
|
||||
+translate(20px, 20px)
|
||||
|
||||
#skew
|
||||
+skew(0, 0)
|
||||
|
||||
#skew:hover
|
||||
+skew(20, 20)
|
||||
|
||||
#combo
|
||||
+transform(1, 0, 0, 0, 0, 0)
|
||||
|
||||
#combo:hover
|
||||
+transform(1, 45, 20px, 20px, 20, 20)
|
||||
8
doc-src/content/examples/compass/css3/transition.haml
Normal file
8
doc-src/content/examples/compass/css3/transition.haml
Normal file
@ -0,0 +1,8 @@
|
||||
---
|
||||
title: Transition
|
||||
description: css3 mixin for css transitions
|
||||
framework: compass/css3
|
||||
stylesheet: compass/css3/_transform.sass
|
||||
example: true
|
||||
---
|
||||
= render "partials/example"
|
||||
19
doc-src/content/examples/compass/css3/transition/markup.haml
Normal file
19
doc-src/content/examples/compass/css3/transition/markup.haml
Normal file
@ -0,0 +1,19 @@
|
||||
%p
|
||||
this box has a width transition on hover
|
||||
|
||||
#width.transition-example
|
||||
|
||||
%p
|
||||
this box has a width transition on hover, with a set duration
|
||||
|
||||
#width-duration.transition-example
|
||||
|
||||
%p
|
||||
this box has a width transition on hover, with a set duration, and uses the 'easein' timing function
|
||||
|
||||
#width-duration-easein.transition-example
|
||||
|
||||
%p
|
||||
this box has a few seconds delay, so wait a little before the transition occurs
|
||||
|
||||
#width-delay.transition-example
|
||||
@ -0,0 +1,35 @@
|
||||
@import compass/css3
|
||||
|
||||
.transition-example
|
||||
width: 40px
|
||||
height: 40px
|
||||
background: red
|
||||
margin: 20px
|
||||
|
||||
#width
|
||||
+transition-property('width')
|
||||
|
||||
#width:hover
|
||||
width: 80px
|
||||
|
||||
#width-duration
|
||||
+transition-property('width')
|
||||
+transition-duration('2s')
|
||||
|
||||
#width-duration:hover
|
||||
width: 80px
|
||||
|
||||
#width-duration-easein
|
||||
+transition-property('width')
|
||||
+transition-duration('2s')
|
||||
+transition-timing-function('ease-in')
|
||||
|
||||
#width-duration-easein:hover
|
||||
width: 80px
|
||||
|
||||
#width-delay
|
||||
+transition-property('width')
|
||||
+transition-delay('2s')
|
||||
|
||||
#width-delay:hover
|
||||
width: 80px
|
||||
Loading…
Reference in New Issue
Block a user