Update the docs for lists.
This commit is contained in:
parent
29d64f367f
commit
8d5e6406fa
@ -5,11 +5,10 @@ framework: compass
|
||||
stylesheet: compass/utilities/_lists.scss
|
||||
layout: core
|
||||
nav_stylesheet: compass/_utilities.scss
|
||||
meta_description: Tools for styling lists.
|
||||
classnames:
|
||||
- reference
|
||||
- core
|
||||
- utilities
|
||||
---
|
||||
- render 'reference' do
|
||||
%p
|
||||
Lorem ipsum dolor sit amet.
|
||||
= render 'reference'
|
||||
|
@ -4,12 +4,11 @@ crumb: Bullets
|
||||
framework: compass
|
||||
stylesheet: compass/utilities/lists/_bullets.scss
|
||||
layout: core
|
||||
meta_description: Mixins for managing list bullets.
|
||||
nav_stylesheet: compass/_utilities.scss
|
||||
classnames:
|
||||
- reference
|
||||
- core
|
||||
- utilities
|
||||
---
|
||||
- render 'reference' do
|
||||
%p
|
||||
Lorem ipsum dolor sit amet.
|
||||
= render 'reference'
|
||||
|
@ -4,6 +4,7 @@ crumb: Horizontal List
|
||||
framework: compass
|
||||
stylesheet: compass/utilities/lists/_horizontal-list.scss
|
||||
layout: core
|
||||
meta_description: Float a list so it appears horizontally.
|
||||
nav_stylesheet: compass/_utilities.scss
|
||||
classnames:
|
||||
- reference
|
||||
@ -11,5 +12,18 @@ classnames:
|
||||
- utilities
|
||||
---
|
||||
- render 'reference' do
|
||||
%p
|
||||
Lorem ipsum dolor sit amet.
|
||||
:markdown
|
||||
Easy mode using simple descendant li selectors:
|
||||
|
||||
ul.nav
|
||||
+horizontal-list
|
||||
|
||||
Advanced mode:
|
||||
If you need to target the list items using a different selector then use
|
||||
+horizontal-list-container on your ul/ol and +horizontal-list-item on your li.
|
||||
This may help when working on layouts involving nested lists. For example:
|
||||
|
||||
ul.nav
|
||||
+horizontal-list-container
|
||||
> li
|
||||
+horizontal-list-item
|
||||
|
@ -4,12 +4,11 @@ crumb: Inline List
|
||||
framework: compass
|
||||
stylesheet: compass/utilities/lists/_inline-list.scss
|
||||
layout: core
|
||||
meta_description: Style a list as inline text.
|
||||
nav_stylesheet: compass/_utilities.scss
|
||||
classnames:
|
||||
- reference
|
||||
- core
|
||||
- utilities
|
||||
---
|
||||
- render 'reference' do
|
||||
%p
|
||||
Lorem ipsum dolor sit amet.
|
||||
= render 'reference'
|
||||
|
@ -2,21 +2,33 @@
|
||||
@mixin no-bullet {
|
||||
list-style-image : none;
|
||||
list-style-type : none;
|
||||
margin-left: 0px; }
|
||||
margin-left : 0px;
|
||||
}
|
||||
|
||||
// turns off the bullets for an entire list
|
||||
@mixin no-bullets {
|
||||
list-style: none;
|
||||
li {
|
||||
@include no-bullet; } }
|
||||
li { @include no-bullet; }
|
||||
}
|
||||
|
||||
// Make a list(ul/ol) have an image bullet
|
||||
// mixin should be used like this for an icon that is 5x7:
|
||||
// Make a list(ul/ol) have an image bullet.
|
||||
//
|
||||
// The mixin should be used like this for an icon that is 5x7:
|
||||
//
|
||||
// ul.pretty
|
||||
// +pretty-bullets("my-icon.png", 5px, 7px)
|
||||
@mixin pretty-bullets($bullet-icon, $width, $height, $line-height: 18px, $padding: 14px) {
|
||||
//
|
||||
// Additionally, if the image dimensions are not provided,
|
||||
// The image dimensions will be extracted from the image itself.
|
||||
//
|
||||
// ul.pretty
|
||||
// +pretty-bullets("my-icon.png")
|
||||
//
|
||||
@mixin pretty-bullets($bullet-icon, $width: image-width($bullet-icon), $height: image-height($bullet-icon), $line-height: 18px, $padding: 14px) {
|
||||
margin-left: 0;
|
||||
li {
|
||||
padding-left: $padding;
|
||||
background: image-url($bullet-icon) no-repeat 0 + ($padding - $width) / 2 ($line-height - $height) / 2;
|
||||
list-style-type: none; } }
|
||||
list-style-type: none;
|
||||
}
|
||||
}
|
||||
|
@ -11,13 +11,13 @@
|
||||
display: inline; } }
|
||||
|
||||
// makes an inline list that is comma delimited.
|
||||
// use of this recipe is not recommended at this time due to browser support issues.
|
||||
// Please make note of the browser support issues before using this mixin.
|
||||
//
|
||||
// use of :content and :after is not fully supported in all browsers.
|
||||
// See http://www.quirksmode.org/css/contents.html#t15 for the support matrix
|
||||
// use of `:content` and `:after` is not fully supported in all browsers.
|
||||
// See quirksmode for the [support matrix](http://www.quirksmode.org/css/contents.html#t15)
|
||||
//
|
||||
// :last-child is not fully supported
|
||||
// see http://www.quirksmode.org/css/contents.html#t29 for the support matrix
|
||||
// `:last-child` is not fully supported.
|
||||
// see quirksmode for the [support matrix](http://www.quirksmode.org/css/contents.html#t29).
|
||||
|
||||
@mixin comma-delimited-list {
|
||||
@include inline-list;
|
||||
|
Loading…
Reference in New Issue
Block a user