[Compass Core] Extracted two new mixins from +horizontal-list. Closes GH-9.
The new +horizontal-list-container and +horizontal-list-item mixins can be used to build your horizontal list when you need more control over the selectors (E.g. when working with nested lists).
This commit is contained in:
parent
f5bb9ff0f2
commit
faadde2379
@ -1,20 +1,52 @@
|
|||||||
|
//**\\
|
||||||
|
Horizontal list layout module.
|
||||||
|
|
||||||
|
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
|
||||||
|
|
||||||
@import bullets.sass
|
@import bullets.sass
|
||||||
@import compass/utilities/general/reset.sass
|
@import compass/utilities/general/reset.sass
|
||||||
@import compass/utilities/general/float.sass
|
@import compass/utilities/general/float.sass
|
||||||
|
|
||||||
// A list(ol,ul) that is layed out such that the elements are floated left and won't wrap.
|
//**
|
||||||
// This is not an inline list.
|
Can be mixed into any selector that target a ul or ol that is meant
|
||||||
=horizontal-list(!padding = 4px)
|
to have a horizontal layout. Used to implement +horizontal-list.
|
||||||
|
=horizontal-list-container
|
||||||
+reset-box-model
|
+reset-box-model
|
||||||
+clearfix
|
+clearfix
|
||||||
|
|
||||||
|
//**
|
||||||
|
Can be mixed into any li selector that is meant to participate in a horizontal layout.
|
||||||
|
Used to implement +horizontal-list.
|
||||||
|
=horizontal-list-item(!padding = 4px)
|
||||||
|
+no-bullet
|
||||||
|
:white-space nowrap
|
||||||
|
+float-left
|
||||||
|
:padding
|
||||||
|
:left= !padding
|
||||||
|
:right= !padding
|
||||||
|
&.first
|
||||||
|
:padding-left 0px
|
||||||
|
&.last
|
||||||
|
:padding-right 0px
|
||||||
|
|
||||||
|
//**
|
||||||
|
A list(ol,ul) that is layed out such that the elements are floated left and won't wrap.
|
||||||
|
This is not an inline list.
|
||||||
|
=horizontal-list(!padding = 4px)
|
||||||
|
+horizontal-list-item-container
|
||||||
li
|
li
|
||||||
+no-bullet
|
+horizontal-list-item(!padding)
|
||||||
:white-space nowrap
|
|
||||||
+float-left
|
|
||||||
:padding
|
|
||||||
:left= !padding
|
|
||||||
:right= !padding
|
|
||||||
&.first
|
|
||||||
:padding-left 0px
|
|
||||||
&.last
|
|
||||||
:padding-right 0px
|
|
||||||
|
Loading…
Reference in New Issue
Block a user