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[
@include pds-media("tablet", min) {
ul.pas-form-pager {
display: flex;
}
}
]]>
$breakpoints are defined as a map, like
<![CDATA[
$pds-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 add your own breakpoints by adding entries to the map:
<![CDATA[
@use "sass:map";
$pds-breakpoints: map.set($pds-breakpoints, phone-small, 375px);
$pds-breakpoints: map.set($pds-breakpoints, phone, 400px);
]]>