Mercurial > minori
annotate dep/fmt/doc/bootstrap/mixins/image.less @ 367:8d45d892be88 default tip
*: instead of pugixml, use Qt XML features
this means we have one extra Qt dependency though...
author | Paper <paper@tflc.us> |
---|---|
date | Sun, 17 Nov 2024 22:55:47 -0500 |
parents | 1faa72660932 |
children |
rev | line source |
---|---|
343
1faa72660932
*: transfer back to cmake from autotools
Paper <paper@paper.us.eu.org>
parents:
diff
changeset
|
1 // Image Mixins |
1faa72660932
*: transfer back to cmake from autotools
Paper <paper@paper.us.eu.org>
parents:
diff
changeset
|
2 // - Responsive image |
1faa72660932
*: transfer back to cmake from autotools
Paper <paper@paper.us.eu.org>
parents:
diff
changeset
|
3 // - Retina image |
1faa72660932
*: transfer back to cmake from autotools
Paper <paper@paper.us.eu.org>
parents:
diff
changeset
|
4 |
1faa72660932
*: transfer back to cmake from autotools
Paper <paper@paper.us.eu.org>
parents:
diff
changeset
|
5 |
1faa72660932
*: transfer back to cmake from autotools
Paper <paper@paper.us.eu.org>
parents:
diff
changeset
|
6 // Responsive image |
1faa72660932
*: transfer back to cmake from autotools
Paper <paper@paper.us.eu.org>
parents:
diff
changeset
|
7 // |
1faa72660932
*: transfer back to cmake from autotools
Paper <paper@paper.us.eu.org>
parents:
diff
changeset
|
8 // Keep images from scaling beyond the width of their parents. |
1faa72660932
*: transfer back to cmake from autotools
Paper <paper@paper.us.eu.org>
parents:
diff
changeset
|
9 .img-responsive(@display: block) { |
1faa72660932
*: transfer back to cmake from autotools
Paper <paper@paper.us.eu.org>
parents:
diff
changeset
|
10 display: @display; |
1faa72660932
*: transfer back to cmake from autotools
Paper <paper@paper.us.eu.org>
parents:
diff
changeset
|
11 max-width: 100%; // Part 1: Set a maximum relative to the parent |
1faa72660932
*: transfer back to cmake from autotools
Paper <paper@paper.us.eu.org>
parents:
diff
changeset
|
12 height: auto; // Part 2: Scale the height according to the width, otherwise you get stretching |
1faa72660932
*: transfer back to cmake from autotools
Paper <paper@paper.us.eu.org>
parents:
diff
changeset
|
13 } |
1faa72660932
*: transfer back to cmake from autotools
Paper <paper@paper.us.eu.org>
parents:
diff
changeset
|
14 |
1faa72660932
*: transfer back to cmake from autotools
Paper <paper@paper.us.eu.org>
parents:
diff
changeset
|
15 |
1faa72660932
*: transfer back to cmake from autotools
Paper <paper@paper.us.eu.org>
parents:
diff
changeset
|
16 // Retina image |
1faa72660932
*: transfer back to cmake from autotools
Paper <paper@paper.us.eu.org>
parents:
diff
changeset
|
17 // |
1faa72660932
*: transfer back to cmake from autotools
Paper <paper@paper.us.eu.org>
parents:
diff
changeset
|
18 // Short retina mixin for setting background-image and -size. Note that the |
1faa72660932
*: transfer back to cmake from autotools
Paper <paper@paper.us.eu.org>
parents:
diff
changeset
|
19 // spelling of `min--moz-device-pixel-ratio` is intentional. |
1faa72660932
*: transfer back to cmake from autotools
Paper <paper@paper.us.eu.org>
parents:
diff
changeset
|
20 .img-retina(@file-1x; @file-2x; @width-1x; @height-1x) { |
1faa72660932
*: transfer back to cmake from autotools
Paper <paper@paper.us.eu.org>
parents:
diff
changeset
|
21 background-image: url("@{file-1x}"); |
1faa72660932
*: transfer back to cmake from autotools
Paper <paper@paper.us.eu.org>
parents:
diff
changeset
|
22 |
1faa72660932
*: transfer back to cmake from autotools
Paper <paper@paper.us.eu.org>
parents:
diff
changeset
|
23 @media |
1faa72660932
*: transfer back to cmake from autotools
Paper <paper@paper.us.eu.org>
parents:
diff
changeset
|
24 only screen and (-webkit-min-device-pixel-ratio: 2), |
1faa72660932
*: transfer back to cmake from autotools
Paper <paper@paper.us.eu.org>
parents:
diff
changeset
|
25 only screen and ( min--moz-device-pixel-ratio: 2), |
1faa72660932
*: transfer back to cmake from autotools
Paper <paper@paper.us.eu.org>
parents:
diff
changeset
|
26 only screen and ( -o-min-device-pixel-ratio: 2/1), |
1faa72660932
*: transfer back to cmake from autotools
Paper <paper@paper.us.eu.org>
parents:
diff
changeset
|
27 only screen and ( min-device-pixel-ratio: 2), |
1faa72660932
*: transfer back to cmake from autotools
Paper <paper@paper.us.eu.org>
parents:
diff
changeset
|
28 only screen and ( min-resolution: 192dpi), |
1faa72660932
*: transfer back to cmake from autotools
Paper <paper@paper.us.eu.org>
parents:
diff
changeset
|
29 only screen and ( min-resolution: 2dppx) { |
1faa72660932
*: transfer back to cmake from autotools
Paper <paper@paper.us.eu.org>
parents:
diff
changeset
|
30 background-image: url("@{file-2x}"); |
1faa72660932
*: transfer back to cmake from autotools
Paper <paper@paper.us.eu.org>
parents:
diff
changeset
|
31 background-size: @width-1x @height-1x; |
1faa72660932
*: transfer back to cmake from autotools
Paper <paper@paper.us.eu.org>
parents:
diff
changeset
|
32 } |
1faa72660932
*: transfer back to cmake from autotools
Paper <paper@paper.us.eu.org>
parents:
diff
changeset
|
33 } |