github-migration/compass
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

inline-block-list mixin

Browse Source
This commit is contained in:
Eric Meyer 2010-08-11 16:35:08 -06:00
parent c899b78aed
commit d20603296c
1 changed files with 46 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
frameworks/compass/stylesheets/compass/utilities/lists/_inline-block-list.scss Normal file
View File

@ -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); } }