<div class="loud-archive loud-archive-news container">
<h1>Actualités</h1>
<div class="block-archive-filter">
<p class="block-archive-filter__label">Filtre</p>
<ul class="block-archive-filter__listing list--unstyled">
<li>
<button class="js-open-sibling-dropdown button--unstyled">Par catégorie</button>
<ul class="list--dropdown list--dropdown--arrow-center">
<li><a href="#">Nouveautés</a></li>
<li><a href="#">Evénements</a></li>
<li><a href="#">Informations</a></li>
<li><a href="#">Offres d'emplois</a></li>
</ul>
</li>
<li>
<button class="js-open-sibling-dropdown button--unstyled">Par magasin</button>
<ul class="list--dropdown list--dropdown--arrow-center list--dropdown--max-height">
<span>
<li><a href="#">JMT Beauvais</a></li>
<li><a href="#">JMT Avallon</a></li>
<li><a href="#">JMT Nieppe</a></li>
<li><a href="#">JMT Beauvais</a></li>
<li><a href="#">JMT Avallon</a></li>
<li><a href="#">JMT Nieppe</a></li>
<li><a href="#">JMT Beauvais</a></li>
<li><a href="#">JMT Avallon</a></li>
<li><a href="#">JMT Nieppe</a></li>
<li><a href="#">JMT Beauvais</a></li>
<li><a href="#">JMT Avallon</a></li>
<li><a href="#">JMT Nieppe</a></li>
<li><a href="#">JMT Beauvais</a></li>
<li><a href="#">JMT Avallon</a></li>
<li><a href="#">JMT Nieppe</a></li>
<li><a href="#">JMT Beauvais</a></li>
<li><a href="#">JMT Avallon</a></li>
<li><a href="#">JMT Nieppe</a></li>
<li><a href="#">JMT Beauvais</a></li>
<li><a href="#">JMT Avallon</a></li>
<li><a href="#">JMT Nieppe</a></li>
<li><a href="#">JMT Beauvais</a></li>
<li><a href="#">JMT Avallon</a></li>
<li><a href="#">JMT Nieppe</a></li>
<li><a href="#">JMT Beauvais</a></li>
<li><a href="#">JMT Avallon</a></li>
<li><a href="#">JMT Nieppe</a></li>
</span>
</ul>
</li>
</ul>
</div>
</div>
<div class="loud-archive loud-archive-news container">
<h1>Actualités</h1>
<div class="block-archive-filter">
<p class="block-archive-filter__label">Filtre</p>
<ul class="block-archive-filter__listing list--unstyled">
<li>
<button class="js-open-sibling-dropdown button--unstyled">Par catégorie</button>
<ul class="list--dropdown list--dropdown--arrow-center">
<li><a href="#">Nouveautés</a></li>
<li><a href="#">Evénements</a></li>
<li><a href="#">Informations</a></li>
<li><a href="#">Offres d'emplois</a></li>
</ul>
</li>
<li>
<button class="js-open-sibling-dropdown button--unstyled">Par magasin</button>
<ul class="list--dropdown list--dropdown--arrow-center list--dropdown--max-height">
<span>
<li><a href="#">JMT Beauvais</a></li>
<li><a href="#">JMT Avallon</a></li>
<li><a href="#">JMT Nieppe</a></li>
<li><a href="#">JMT Beauvais</a></li>
<li><a href="#">JMT Avallon</a></li>
<li><a href="#">JMT Nieppe</a></li>
<li><a href="#">JMT Beauvais</a></li>
<li><a href="#">JMT Avallon</a></li>
<li><a href="#">JMT Nieppe</a></li>
<li><a href="#">JMT Beauvais</a></li>
<li><a href="#">JMT Avallon</a></li>
<li><a href="#">JMT Nieppe</a></li>
<li><a href="#">JMT Beauvais</a></li>
<li><a href="#">JMT Avallon</a></li>
<li><a href="#">JMT Nieppe</a></li>
<li><a href="#">JMT Beauvais</a></li>
<li><a href="#">JMT Avallon</a></li>
<li><a href="#">JMT Nieppe</a></li>
<li><a href="#">JMT Beauvais</a></li>
<li><a href="#">JMT Avallon</a></li>
<li><a href="#">JMT Nieppe</a></li>
<li><a href="#">JMT Beauvais</a></li>
<li><a href="#">JMT Avallon</a></li>
<li><a href="#">JMT Nieppe</a></li>
<li><a href="#">JMT Beauvais</a></li>
<li><a href="#">JMT Avallon</a></li>
<li><a href="#">JMT Nieppe</a></li>
</span>
</ul>
</li>
</ul>
</div>
</div>
/* No context defined for this component. */
.loud-archive {
display: flex;
flex-direction: column;
padding-top: $margin-xl;
//padding-bottom: $margin-xl;
@include mediaWQuery($media-query-l) {
flex-direction: row;
justify-content: space-between;
//padding-bottom: $margin-xxl;
}
}
.block-archive-filter {
margin-top: 0;
&__label {
margin: 0;
color: $c-red;
font-weight: 700;
}
> select {
width: 100%;
margin-top: 0;
@include mediaWQuery($media-query-l) {
width: 300px;
}
}
}
.loud-archive-news {
.block-archive-filter {
margin: 0 0 1rem;
@include mediaWQuery($media-query-l) {
margin: 0 0 0 1rem
}
&__listing {
width: 100%;
display: grid;
grid-gap: 1rem;
padding: $margin-m;
border-radius: 0 $border-radius-m $border-radius-m;
background: $c-brown-lightest;
@include mediaWQuery($media-query-s) {
grid-template-columns: 1fr 1fr;
}
@include mediaWQuery($media-query-m) {
grid-template-columns: 1fr 1fr 1fr;
}
@include mediaWQuery($media-query-l) {
width: 500px;
grid-template-columns: 1fr 1fr;
}
> li { position: relative }
> li > button {
display: inline-block;
position: relative;
color: $c-font-color;
text-decoration: underline;
&::after {
content: '';
display: inline-block;
width: 15px;
height: 12px;
margin-top: -3px;
vertical-align: middle;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg aria-hidden='true' data-prefix='far' data-icon='chevron-down' class='svg-inline--fa fa-chevron-down fa-w-14' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23000' d='M441.9 167.3l-19.8-19.8a12 12 0 00-17 0L224 328.2 42.9 147.5a12 12 0 00-17 0L6.1 167.3a12 12 0 000 17l209.4 209.4a12 12 0 0017 0l209.4-209.4a12 12 0 000-17z'/%3E%3C/svg%3E");
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
&:hover, &:focus {
text-decoration: none;
}
}
.list--dropdown {
display: none;
}
}
}
}
There are no notes for this item.