inline-block-list mixin
This commit is contained in:
parent
c899b78aed
commit
d20603296c
@ -0,0 +1,46 @@
|
|||||||
|
// Inline-Block list layout module.
|
||||||
|
//
|
||||||
|
// Easy mode using simple descendant li selectors:
|
||||||
|
//
|
||||||
|
// ul.nav
|
||||||
|
// +inline-block-list
|
||||||
|
//
|
||||||
|
// Advanced mode:
|
||||||
|
// If you need to target the list items using a different selector then use
|
||||||
|
// +inline-block-list-container on your ul/ol and +inline-block-list-item on your li.
|
||||||
|
// This may help when working on layouts involving nested lists. For example:
|
||||||
|
//
|
||||||
|
// ul.nav
|
||||||
|
// +inline-block-list-container
|
||||||
|
// > li
|
||||||
|
// +inline-block-list-item
|
||||||
|
|
||||||
|
@import "bullets";
|
||||||
|
@import "horizontal-list";
|
||||||
|
@import "compass/utilities/general/float";
|
||||||
|
|
||||||
|
// Can be mixed into any selector that target a ul or ol that is meant
|
||||||
|
// to have an inline-block layout. Used to implement +inline-block-list.
|
||||||
|
@mixin inline-block-list-container {
|
||||||
|
@include horizontal-list-container; }
|
||||||
|
|
||||||
|
// Can be mixed into any li selector that is meant to participate in a horizontal layout.
|
||||||
|
// Used to implement +inline-block-list.
|
||||||
|
|
||||||
|
@mixin inline-block-list-item($padding: false) {
|
||||||
|
@include no-bullet;
|
||||||
|
@include inline-block;
|
||||||
|
white-space: nowrap;
|
||||||
|
@if $padding {
|
||||||
|
padding: {
|
||||||
|
left: $padding;
|
||||||
|
right: $padding;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// A list(ol,ul) that is layed out such that the elements are inline-block and won't wrap.
|
||||||
|
@mixin inline-block-list($padding: false) {
|
||||||
|
@include inline-block-list-container;
|
||||||
|
li {
|
||||||
|
@include inline-block-list-item($padding); } }
|
Loading…
Reference in New Issue
Block a user