Responsive
Mixin: pds.media
pds.media(name,[min|max],[breakpoints])
name- refers to a breakpoint name, like 'tablet' or 'phone'
min|max (default: min)- wether supplied content should be applied until given breakpoint (+1) or from that breakpoint
breakpoints (default: pds defaults)- the list of breakpoints to use.
Example:
<![CDATA[
@use "...pds/pds";
@include pds.media("tablet", min) {
ul.pas-form-pager {
display: flex;
}
}
]]>
Breakpoints are defined as a map, like
<![CDATA[
$breakpoints: (
none:0,
tiny: 280px,
xxs: 320px,
xs: 480px,
s: 576px,
default: 768px,
m: 768px,
l: 992px,
xl: 1200px,
xxl: 1400px,
huge: 1600px,
);
]]>
You can override these breakpoints, or define your own,
when configuring settings:
<![CDATA[
use "...pds/settings" with (
$assets-path: "...path-to-assets",
$custom-breakpoints: (
phone-small: 375px,
xs: 400px
)
);
...
@use "...pds/pds";
@include pds.media("phone-small", min) {
ul.pas-form-pager {
display: flex;
}
}
]]>