Menu icon Foundation
A fix for the form scss postfix mixin border-left property

This was driving me bonkers but I fixed it.

If you do a mixin with scss variables in their current state... And you only want to use the postfix and not a prefix i.e. for background colors or whatever. You will come across an annoying little feature that would be better served to turn off and on. So that is how I fixed it by adding it into the mixin variable set and giving it an if true/false statement.

// old code NOT FIXED 
@mixin postfix($bg:$input-prefix-bg, $border:$input-prefix-border-color, $is-button:false) {

  @if $bg {
    $bg-lightness: lightness($bg);
    background: $bg;
    border-#{$default-float}: none;
    
// New code fixed
@mixin postfix($bg:$input-prefix-bg, $border-left-hidden:false, $border:$input-prefix-border-color, $is-button:false) {

  @if $bg {
    $bg-lightness: lightness($bg);
    background: $bg;
    @if $border-left-hidden {
      border-#{$default-float}: none;
    }
            

         

mixinSassscssFoundationforms

This was driving me bonkers but I fixed it.

If you do a mixin with scss variables in their current state... And you only want to use the postfix and not a prefix i.e. for background colors or whatever. You will come across an annoying little feature that would be better served to turn off and on. So that is how I fixed it by adding it into the mixin variable set and giving it an if true/false statement.

// old code NOT FIXED 
@mixin postfix($bg:$input-prefix-bg, $border:$input-prefix-border-color, $is-button:false) {

  @if $bg {
    $bg-lightness: lightness($bg);
    background: $bg;
    border-#{$default-float}: none;
    
// New code fixed
@mixin postfix($bg:$input-prefix-bg, $border-left-hidden:false, $border:$input-prefix-border-color, $is-button:false) {

  @if $bg {
    $bg-lightness: lightness($bg);
    background: $bg;
    @if $border-left-hidden {
      border-#{$default-float}: none;
    }
            

         
Christian Matthias over 4 years ago

and this should be background-color not background... the arrow won't show up otherwise when color is changed..

@if $bg {
    $bg-lightness: lightness($bg);
    background-color: $bg;

Rafi Benkual over 4 years ago

Hey Christian, awesome stuff! I think it would be helpful to other, how about a Pull Request?

Christian Matthias over 4 years ago

sure is that on git? I am not familiar with doing that really.

Rafi Benkual over 4 years ago

Found this great tutorial on it https://www.youtube.com/watch?v=YTbRzhQju4c

In the meantime you can log issue on GitHub.

Christian Matthias over 4 years ago

added git pull request... Thanks Rafi