Menu icon Foundation
Inline List Mixin does not work

Hi,

whats wrong with this mixin? I want to set margin-left to a negative value, but this does not work. There are 3 margin-values and the last one overwrites the other one?

$inline-list-default-float-margin is the right variable?

@mixin inline-list {
  list-style: none;
  margin-#{$default-float}: $inline-list-default-float-margin;
  margin-#{$opposite-direction}: $inline-list-opposite-margin;
  margin: $inline-list-top-margin auto $inline-list-bottom-margin auto;
  overflow: $inline-list-overflow;
  padding: $inline-list-padding;

  > li {
    display: $inline-list-display;
    float: $default-float;
    list-style: none;
    margin-#{$default-float}: $inline-list-default-float-list-margin;
    > * { display: $inline-list-children-display; }
  }
}
            

         

inline list

Hi,

whats wrong with this mixin? I want to set margin-left to a negative value, but this does not work. There are 3 margin-values and the last one overwrites the other one?

$inline-list-default-float-margin is the right variable?

@mixin inline-list {
  list-style: none;
  margin-#{$default-float}: $inline-list-default-float-margin;
  margin-#{$opposite-direction}: $inline-list-opposite-margin;
  margin: $inline-list-top-margin auto $inline-list-bottom-margin auto;
  overflow: $inline-list-overflow;
  padding: $inline-list-padding;

  > li {
    display: $inline-list-display;
    float: $default-float;
    list-style: none;
    margin-#{$default-float}: $inline-list-default-float-list-margin;
    > * { display: $inline-list-children-display; }
  }
}
            

         
Rafi Benkual about 4 years ago

Not sure what you mean, going to settings and changing

$inline-list-default-float-margin: rem-calc(-55);

works well.

Alex about 4 years ago

Hi,

exactly thats what i did, but it does not work.

$inline-list-default-float-margin: rem-calc(-55);

output is this:

.inline-list {
list-style: outside none none;
margin: 0 auto 1.0625rem;
overflow: hidden;
padding: 0;
}

this variable works:
$inline-list-bottom-margin: rem-calc(87);

Alex about 4 years ago

Hi,

there is a bug in the mixin.

if i comment out this line

margin: $inline-list-top-margin auto $inline-list-bottom-margin auto;

then the values are working. But with this line all the values before are overwritten by the auto value

ul {
margin-left: -30px;
margin: 0 auto;
}

the margin left value will never displayed in the css, because the next line overwrites this value.

Rafi Benkual about 4 years ago

I think you're referring to this https://github.com/zurb/foundation/commit/e0987972a2b290684b7b8827ce09fabb3893de68

This fix is on the master branch. For now you can do the same in your code.

Alex about 4 years ago

Thank you very much. I looked only into my local version and not on github.