Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Already on GitHub? Sign in to your account

Inline block list update #1203

Closed
wants to merge 4 commits into
from
@@ -26,20 +26,49 @@
// 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; }
+@mixin inline-block-list-container($remove-inline-block-gap: true, $legacy-opera-support: false, $monospaced-font: false) {
+
+ // do we need to use clearfix and reset the box model?
+ // I don't see why
+ @include horizontal-list-container;
+
+ // Remove inter-unit whitespace that appears between `inline-block` child
+ // elements. Work for all non-monospace font-families. If you're using a
+ // monospace base font, you will need to set the `Grid` font-family to
+ // `sans-serif` and then redeclare the monospace font on the `Grid-cell`
+ // objects.
+ @if $remove-inline-block-gap {
+ letter-spacing: -0.31em;
+ @if $legacy-opera-support {
+ &:-o-prefocus,
+ & {
+ word-spacing: -0.43em; //Opera 12 Windows
+ }
+ }
+ @if $monospaced-font {
+ font-family: 'sans-serif';
+ li {
+ font-family: $monospaced-font;
+ }
+ }
+ }
+}
// 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) {
+@mixin inline-block-list-item($padding: false, $direction: left) {
@include no-bullet;
@include inline-block;
white-space: nowrap;
@if $padding {
padding: {
left: $padding;
right: $padding;
- };
+ };
+ &:first-child #{if($legacy-support-for-ie6, ', &.first', '')} { padding-#{$direction}: 0; }
+ &:last-child { padding-#{opposite-position($direction)}: 0; }
+ @if $legacy-support-for-ie6 or $legacy-support-for-ie7 {
+ &.last { padding-#{opposite-position($direction)}: 0; } }
}
}