Contents

// @category   ui/scopes

// a mixin to output the current context in a BEM style selector
// @link http://bem.info/method/
// @mixin     BEM
// @param     $element {String} the element name
// @param     $modifier {String} the modifier
// @content
@mixin bem($element: null, $modifier: null) {
  @at-root #{bem-selector("#{'&'}", $element, $modifier)} {
    @content;
  }
}

// scopes content block for high resolution (HiDPI/Retina) displays
// @mixin     high-resolution
// @param     $resolution {Number} the resolution to use (either a ratio, dpi, dpcm, or dppx)
// @content
@mixin high-resolution($resolution: $CONFIG_RESOLUTION_HIGH) {
  @if $resolution {
    $ratio: resolution-to-ratio($resolution);
    $query: ();

    $queries: (
      if(support-legacy-browser('firefox', '16', $threshold: $critical-usage-threshold), '(min--moz-device-pixel-ratio: #{$ratio})', null),
      '(-webkit-min-device-pixel-ratio: #{$ratio})',
      '(-o-min-device-pixel-ratio: #{to-fraction($ratio)})',
      '(min-resolution: #{resolution-to-dpi($resolution)})',
      '(min-resolution: #{resolution-to-dppx($resolution)})'
    );

    @each $q in $queries {
      @if $q {
        $query: append($query, unquote('only screen and #{$q}'), comma);
      }
    }

    @media #{$query} {
      @content;
    }
  }
}

Version data entries

5 entries across 5 versions & 1 rubygems

Version	Path
archetype-1.0.0.alpha.5	stylesheets/archetype/ui/_scopes.scss
archetype-1.0.0.alpha.4	stylesheets/archetype/ui/_scopes.scss
archetype-1.0.0.alpha.3	stylesheets/archetype/ui/_scopes.scss
archetype-1.0.0.alpha.2	stylesheets/archetype/ui/_scopes.scss
archetype-1.0.0.alpha.1	stylesheets/archetype/ui/_scopes.scss