Responsive Visibility specificity issue.

[peterbraden]

When using the responsive visibility classes with:

@include sensibleGrid (
    $modern: false,
    $gutter: 24px, 
    $gutterType: margin,
    $base-font-size: 1rem,
    $slug: "l-",
    $pushClasses: true,
    $gridWidths: (
        "one-whole"         : 100%,
        "one-half"          : 50%,
        "one-quarter"       : 25%,
        "three-quarters"    : 75%,
        "one-third"         : 33.333%,
        "two-thirds"        : 66.666%,
        "one-fifth"         : 20%,
        "four-fifths"       : 80%,
        "one-sixth"         : 16.666%,
        "five-sixths"       : 83.333%
    ),
    $gridBreakpoints: "desktop" "tablet" "mobile"
);

@include responsive-visibility("mobile" "desktop" "tablet" , true);

The generated CSS has:

@media only screen and (max-width: 600px)
.is-visible-mobile.is-visible-mobile {
    display: block !important;
    visibility: visible;
}

After:

media only screen and (max-width: 988px)
.is-hidden-tablet, .is-visible-mobile, .is-visible-desktop {
    display: none !important;
    visibility: hidden;
}

Meaning the content is never visible. The visible class needs more specificity.

Workaround:

// Fix a bug where sensible has the wrong specificity for mobile/hidden
@include breakpoint(mobile){
  .is-visible-mobile.is-visible-mobile {
    display: block !important;
    visibility:visible;
  }
}