Change in 4.2.2 affects intended styles #94
Description
With the following source CSS:
.c-meta {
@apply --typeset-caption;
display: flex;
flex-flow: row wrap;
margin-bottom: map(spaces, medium);
border-top: 1px solid $prose-color--rule;
padding: map(spaces, small) 0 map(spaces, large);
@media (--from-large-screen) {
flex-flow: column nowrap;
border: 0;
padding: 0;
}
}
.c-meta__item {
flex: 0 0 auto;
@media screen and (max-width: 24.9375em) {
.dt-published span {
display: none;
}
}
@media (--upto-large-screen) {
&:not(:last-child)::after {
content: '•';
margin: 0 map(spaces, small);
opacity: 0.5;
}
}
@media (--from-large-screen) {
display: block;
border-top: 1px solid $prose-color--rule;
padding: map(spaces, small) 0 map(spaces, large);
text-align: right;
}
@media print {
&:not(:last-child)::after {
content: '•';
margin: 0 map(spaces, small);
}
}
}The following rules for .c-meta are affected:
display: flex;
flex-flow: row wrap;
margin-bottom: map(spaces, medium);
border-top: 1px solid $prose-color--rule;
padding: map(spaces, small) 0 map(spaces, large);With 4.2.2, these rules – common to .c-meta – are moved out into a separate declaration later in the stylesheet:
.c-meta {
font-size: calc(.875rem 0.125 *(100vw - 30rem) /30);
font-family: sans-serif;
font-weight: 400;
font-variant: common-ligatures lining-nums;
- line-height: 1.25;
- display: flex;
- flex-flow: row wrap;
- margin-bottom: 1rem;
- border-top: 1px solid rgba(119, 119, 136, .25);
- padding:.5rem 0 1.5rem
+ line-height:1.25
}
@media screen and (min-width: 60rem) {
.c-meta {
font-size:1rem
}
}
@media screen and (max-width: 30rem) {
.c-meta {
font-size:.875rem
}
}
@media print {
.c-meta {
font-size:.875rem
}
}
.fonts-loaded .c-meta {
font-family:Source Sans Pro, sans-serif
}
@media screen and (min-width: 800px) {
.c-meta {
flex-flow: column nowrap;
border: 0;
padding:0
}
}
+ .c-meta {
+ display: flex;
+ flex-flow: row wrap;
+ margin-bottom: 1rem;
+ border-top: 1px solid rgba(119, 119, 136, .25);
+ padding:.5rem 0 1.5rem
+ }
.c-meta__item {
flex:0 0 auto
}
@media screen and (max-width: 24.9375em) {
.c-meta__item .dt-published span {
display:none
}
}
@media screen and (max-width: 799px) {
.c-meta__item:not(:last-child):after {
content: "•";
margin: 0 .5rem;
opacity:.5
}
}
@media screen and (min-width: 800px) {
.c-meta__item {
display: block;
border-top: 1px solid rgba(119, 119, 136, .25);
padding: .5rem 0 1.5rem;
text-align:right
}
}
@media print {
.c-meta__item:not(:last-child):after {
content: "•";
margin:0 .5rem
}
}It’s new location means this portion of CSS is overruled:
@media screen and (min-width: 800px) {
.c-meta {
flex-flow: column nowrap;
border: 0;
padding:0
}
}I suspect this is related to the change in #93. Let me know if you need more information.