<!-- Default -->
<!-- Max mobilelarge -->
u-hidden-maxmobilelarge
<!-- Min mobilelarge -->
u-hidden-minmobilelarge
<!-- Max tablet -->
u-hidden-maxtablet
<!-- Min tablet -->
u-hidden-mintablet
<!-- Max desktop -->
u-hidden-maxdesktop
<!-- Min desktop -->
u-hidden-mindesktop
<!-- Max hd -->
u-hidden-maxhd
<!-- Min hd -->
u-hidden-minhd
{{#if modifier}} {{modifier}}{{/if}}
/* Default: No context defined. */
/* Max mobilelarge */
{
"modifier": "u-hidden-maxmobilelarge"
}
/* Min mobilelarge */
{
"modifier": "u-hidden-minmobilelarge"
}
/* Max tablet */
{
"modifier": "u-hidden-maxtablet"
}
/* Min tablet */
{
"modifier": "u-hidden-mintablet"
}
/* Max desktop */
{
"modifier": "u-hidden-maxdesktop"
}
/* Min desktop */
{
"modifier": "u-hidden-mindesktop"
}
/* Max hd */
{
"modifier": "u-hidden-maxhd"
}
/* Min hd */
{
"modifier": "u-hidden-minhd"
}
@each $breakpoint, $value in $breakpoints {
.u-hidden-max#{$breakpoint} {
&:empty + .u-hidden-peekaboo::before {
content: '🙉';
}
@media (max-width: $value - 1px) {
display: none;
&:empty + .u-hidden-peekaboo::before {
content: '🙈';
}
}
}
.u-hidden-min#{$breakpoint} {
&:empty + .u-hidden-peekaboo::before {
content: '🙉';
}
@media (min-width: $value) {
display: none;
&:empty + .u-hidden-peekaboo::before {
content: '🙈';
}
}
}
}
No notes defined.