Add reference documentation and examples for stretching module.
This commit is contained in:
parent
a82a5938b6
commit
a8a2f42b60
8
doc-src/content/examples/compass/layout/stretching.haml
Normal file
8
doc-src/content/examples/compass/layout/stretching.haml
Normal file
@ -0,0 +1,8 @@
|
||||
---
|
||||
title: Compass Stretch Layout Example
|
||||
description: How to do stretch out your elements.
|
||||
framework: compass
|
||||
stylesheet: compass/layout/_stretching.scss
|
||||
example: true
|
||||
---
|
||||
= render "partials/example"
|
@ -0,0 +1,17 @@
|
||||
.example
|
||||
Click on the the following links to make them stretch.
|
||||
Click <a href="#">here</a> to dismiss it.
|
||||
#stretch-container
|
||||
%ul
|
||||
%li
|
||||
%a#stretch-full(href="#stretch-full")
|
||||
This element is fully stretched.
|
||||
%li
|
||||
%a#stretch-offset(href="#stretch-offset")
|
||||
This element is stretched with a 1em offset on each side.
|
||||
%li
|
||||
%a#stretch-x(href="#stretch-x")
|
||||
This element is stretched horizontally.
|
||||
%li
|
||||
%a#stretch-y(href="#stretch-y")
|
||||
This element is stretched vertically.
|
@ -0,0 +1,29 @@
|
||||
@import "compass/layout/stretching"
|
||||
@import "compass/css3"
|
||||
|
||||
#stretch-container
|
||||
border: 1px solid #999
|
||||
min-width: 200px
|
||||
min-height: 200px
|
||||
position: relative
|
||||
.stretched
|
||||
$stretch-color: #4C6B99
|
||||
border: 3px solid $stretch-color
|
||||
+border-radius(8px)
|
||||
display: block
|
||||
background-color: darken($stretch-color, 30%)
|
||||
text-align: center
|
||||
vertical-align: middle
|
||||
padding: 2em 0
|
||||
#stretch-full:target
|
||||
@extend .stretched
|
||||
+stretch
|
||||
#stretch-offset:target
|
||||
@extend .stretched
|
||||
+stretch(1em, 1em, 1em, 1em)
|
||||
#stretch-x:target
|
||||
@extend .stretched
|
||||
+stretch-x
|
||||
#stretch-y:target
|
||||
@extend .stretched
|
||||
+stretch-y
|
15
doc-src/content/reference/compass/layout/stretching.haml
Normal file
15
doc-src/content/reference/compass/layout/stretching.haml
Normal file
@ -0,0 +1,15 @@
|
||||
---
|
||||
title: Compass Stretching
|
||||
crumb: Stretching
|
||||
framework: compass
|
||||
stylesheet: compass/layout/_stretching.scss
|
||||
layout: core
|
||||
classnames:
|
||||
- reference
|
||||
- core
|
||||
- layout
|
||||
---
|
||||
- render 'reference' do
|
||||
%p
|
||||
The stretch mixins allow you to style absolutely positioned elements
|
||||
such that they will stretch to fill their positioning parent.
|
Loading…
Reference in New Issue
Block a user