134 lines
3.4 KiB
CSS
134 lines
3.4 KiB
CSS
.post-grid {
|
|
&__toolbar {
|
|
/* @apply flex flex-col md:grid md:grid-cols-2 gap-4 md:items-center justify-between pb-12; */
|
|
@apply pb-12 grid grid-cols-2 gap-4 gap-y-8 items-end;
|
|
.post-count {
|
|
@apply flex items-end gap-2;
|
|
|
|
&__count {
|
|
@apply font-normal uppercase fjalla;
|
|
line-height: 0.8;
|
|
}
|
|
|
|
&__text {
|
|
@apply text-lg nunito;
|
|
}
|
|
}
|
|
|
|
.search-bar {
|
|
@apply md:justify-self-end text-primary relative;
|
|
|
|
&:after {
|
|
@apply absolute top-1/2 -translate-y-1/2;
|
|
content: '';
|
|
right: 10px;
|
|
display: flex;
|
|
width: 30px;
|
|
height: 30px;
|
|
background-image: url('../resources/img/icons/carhop-rechercher-green-circle.svg');
|
|
background-repeat: no-repeat;
|
|
background-position: center center;
|
|
background-size: contain;
|
|
}
|
|
input {
|
|
@apply w-full md:w-auto !py-4 px-4 border border-primary rounded-full text-base;
|
|
padding-right: 33px;
|
|
line-height: 1.5;
|
|
height: auto;
|
|
width: 500px;
|
|
max-width: 100%;
|
|
&::placeholder {
|
|
@apply !text-base font-normal text-carhop-green-700;
|
|
}
|
|
}
|
|
}
|
|
|
|
select {
|
|
@apply w-full md:w-auto border border-carhop-green-700 text-carhop-green-700 rounded-full !py-4 px-4 max-w-full text-base;
|
|
line-height: 1.5;
|
|
height: auto;
|
|
|
|
appearance: none; /* Disable the default arrow */
|
|
-webkit-appearance: none; /* For WebKit-based browsers */
|
|
-moz-appearance: none; /* For Firefox */
|
|
|
|
background-color: #fff;
|
|
background-image: url('../resources/img/elements/select-drop-button.svg');
|
|
|
|
background-repeat: no-repeat;
|
|
background-position: right 10px center;
|
|
background-size: 30px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
select[name='sort_by'] {
|
|
@apply pr-12 w-fit justify-self-end;
|
|
}
|
|
}
|
|
.search-by {
|
|
&__label {
|
|
@apply text-primary font-semibold nunito;
|
|
}
|
|
.search-by__buttons {
|
|
@apply flex items-center border border-primary border-solid w-fit;
|
|
|
|
button {
|
|
@apply block font-normal nunito text-primary py-2 px-4;
|
|
&[aria-selected='true'] {
|
|
@apply bg-primary text-white;
|
|
&:hover {
|
|
@apply bg-primary text-white;
|
|
}
|
|
}
|
|
&:hover {
|
|
@apply bg-carhop-green-50;
|
|
}
|
|
}
|
|
&[data-filter='thematique'] {
|
|
}
|
|
}
|
|
}
|
|
&__toolbar-actions {
|
|
@apply flex flex-wrap items-center gap-4 justify-self-end;
|
|
|
|
select[name='etiquettes'] {
|
|
/* @apply bg-blue-300; */
|
|
}
|
|
|
|
select[name='auteurs'] {
|
|
/* @apply bg-red-300; */
|
|
}
|
|
}
|
|
|
|
&__list {
|
|
@apply grid grid-cols-1 lg:grid-cols-2 gap-8;
|
|
}
|
|
}
|
|
|
|
body:has(.search-by button[data-filter='thematique'][aria-selected='true']) {
|
|
.post-grid__toolbar-actions {
|
|
select[name='auteurs'],
|
|
.search-bar {
|
|
@apply hidden;
|
|
}
|
|
}
|
|
}
|
|
|
|
body:has(.search-by button[data-filter='auteur'][aria-selected='true']) {
|
|
.post-grid__toolbar-actions {
|
|
select[name='etiquettes'],
|
|
.search-bar {
|
|
@apply hidden;
|
|
}
|
|
}
|
|
}
|
|
|
|
body:has(.search-by button[data-filter='occurence'][aria-selected='true']) {
|
|
.post-grid__toolbar-actions {
|
|
select[name='etiquettes'],
|
|
select[name='auteurs'] {
|
|
@apply hidden;
|
|
}
|
|
}
|
|
}
|