forked from alphagov/govuk-frontend
-
Notifications
You must be signed in to change notification settings - Fork 0
/
_device-pixels.scss
39 lines (37 loc) · 1.23 KB
/
_device-pixels.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
////
/// @group helpers
////
/// Media query for retina images (device-pixel-ratio)
///
/// @param {Number} $ratio [2] - Device pixel ratio
/// @content Passed content will be outputted within the media query
///
/// @example scss - Providing a @2x image for screens that support it
/// background-image: govuk-image-url("my-image.png");
///
/// @include govuk-device-pixel-ratio {
/// background-image: govuk-image-url("my-image-2x.png");
/// }
///
/// @example scss - Using a custom ratio
/// background-image: govuk-image-url("my-image.png");
///
/// @include govuk-device-pixel-ratio {
/// background-image: govuk-image-url("my-image-2x.png");
/// }
///
/// @include govuk-device-pixel-ratio(3) {
/// background-image: govuk-image-url("my-image-3x.png");
/// }
///
/// @access public
@mixin govuk-device-pixel-ratio($ratio: 2) {
// stylelint-disable indentation -- stylelint and sass-lint have a
// disagreement over indentation in this file
@media only screen and (-webkit-min-device-pixel-ratio: $ratio),
only screen and (-o-min-device-pixel-ratio: #{($ratio * 10)} / 10),
only screen and (min-resolution: #{($ratio * 96)}dpi),
only screen and (min-resolution: #{$ratio}dppx) {
@content;
}
}