row-has-background

@include row-has-background(
  $element
) {
  /* ... */
};

Description

Detect and define styles for elements when the row they are in has a background image.

Parameters

$element (CSS selector)
An optional selector can be specified to target specific elements.

Return

(CSS) Scoped styles for when element is inside row with row--has-background class.

Examples

Add outline to text to ensure readability

@include row-has-background() {
  h1, h2, h3, h5, h6, p {
    text-shadow:
      2px 0 0 rgba(0,0,0,0.75),
      0 2px 0 rgba(0,0,0,0.75),
      -2px 0 0 rgba(0,0,0,0.75),
      0 -2px 0 rgba(0,0,0,0.751),
      2px 2px 0 rgba(0,0,0,0.75),
      2px -2px 0 rgba(0,0,0,0.75),
      -2px -2px 0 rgba(0,0,0,0.75),
      -2px 2px 0 rgba(0,0,0,0.75)
    ;
  }
}

Add background

Lorem ipsum

Updated almost 4 years ago