// Note: vf-url-friendly-color does not work with the new theming variable
// setup, since it can't interpolate CSS variables during compilation. Instead,
// we're hard-coding light/dark icons here when necessary.
@import 'settings';
@mixin vf-p-media-object {
%p-media-object {
display: flex;
flex-shrink: 0;
margin-bottom: $spv--x-large;
}
%vf-meta-list-item {
@extend %small-text;
color: $colors--theme--text-default;
padding-left: map-get($icon-sizes, default) + $sph--large;
}
%vf-iconed-list-item {
@extend %vf-meta-list-item;
background-position: 0 75%;
background-repeat: no-repeat;
background-size: map-get($icon-sizes, default);
}
.p-media-object {
@extend %p-media-object;
}
.p-media-object__image {
align-self: flex-start;
flex-basis: inherit;
flex-shrink: 0;
margin-right: $sph--large;
max-height: map-get($icon-sizes, thumb);
max-width: map-get($icon-sizes, thumb);
vertical-align: middle;
width: auto;
}
.p-media-object__content {
margin-bottom: $spv-nudge-compensation + $sp-unit;
margin-top: 0;
}
.p-media-object__image.is-round {
border-radius: 50%;
}
.p-media-object__title {
@extend %vf-heading-4;
@extend %u-no-margin--bottom--h4;
}
.p-media-object__meta-list {
list-style: none;
margin: 0;
padding-left: 0;
padding-top: $spv--small;
}
.p-media-object__meta-list-item {
@extend %vf-meta-list-item;
&--date {
@extend %vf-iconed-list-item;
// prettier-ignore
background-image: url('data:image/svg+xml;utf8,');
.is-dark & {
// prettier-ignore
background-image: url('data:image/svg+xml;utf8,');
}
}
&--location {
@extend %vf-iconed-list-item;
// prettier-ignore
background-image: url('data:image/svg+xml;utf8,');
.is-dark & {
// prettier-ignore
background-image: url('data:image/svg+xml;utf8,');
}
}
&--venue {
@extend %vf-iconed-list-item;
// prettier-ignore
background-image: url('data:image/svg+xml;utf8,');
.is-dark & {
@extend %vf-iconed-list-item;
// prettier-ignore
background-image: url('data:image/svg+xml;utf8,');
}
}
}
.p-media-object--large {
@extend %p-media-object;
.p-media-object__image {
max-height: map-get($icon-sizes, thumb--large);
max-width: map-get($icon-sizes, thumb--large);
}
.p-media-object__title {
@extend %vf-heading-1;
}
}
}