Metiers_du_patrimoine_theme/resources/css/pages/repertoire-metiers.css

147 lines
3.4 KiB
CSS

.artisans-posts {
@apply flex gap-4 pt-8;
&__grid {
@apply flex flex-col lg:grid grid-cols-1 lg:grid-cols-2 gap-6 w-full h-fit;
}
.card-artisans {
/* @apply h-fit; */
}
}
.metier-patrimoine-searchbar {
@apply w-80 lg:w-80 shrink-0;
h4 {
@apply my-0;
}
.checkbox-choice {
@apply pl-0 pt-1;
@apply flex flex-wrap;
transition: all 0.3s ease;
&__subtaxonomy-list {
@apply pl-4 my-1 w-full hidden;
}
&:has(> input[type='checkbox']:checked) {
.checkbox-choice__subtaxonomy-list {
@apply block;
}
}
&.checkbox-choice-parent {
@apply px-2 rounded-2xl;
}
&.checkbox-choice-parent:has(.child-checkbox:checked) {
transition: all 0.3s ease;
@apply bg-patrimoine-sante-securite-light pt-3;
.checkbox-choice__subtaxonomy-list {
@apply block;
}
}
li {
@apply flex w-auto flex-shrink;
}
&:before {
content: none;
/* box-shadow: inset 1em 1em #8B2FF7; */
}
label,
input {
/* @apply inline; */
}
label {
@apply -translate-y-1 ml-2 flex;
}
> label {
max-width: 80%;
}
input[type='checkbox'] {
@apply shrink-0;
}
input[type='checkbox']:before {
box-shadow: inset 1em 1em #8b2ff7;
}
}
.fieldset-titling {
@apply flex items-center gap-4;
}
.fieldset-icon {
@apply w-10 h-10 p-2 bg-white rounded-lg shadowed;
object-fit: contain;
}
&__search-by {
@apply flex flex-col gap-4 mt-4;
legend {
@apply block text-neutral-400 uppercase !text-base tracking-wider mb-4;
}
.search-radio-card {
@apply bg-white rounded-lg p-4 shadowed flex justify-between;
label {
@apply font-bold;
}
label:before {
@apply mr-2 translate-y-2 bg-no-repeat;
background-position: center;
background-size: contain;
content: '';
display: inline-block;
height: 30px;
width: 36px;
}
label[for='building_elements']:before {
background-image: url('../resources/img/pictogrammes/Homegrade_repertoire-elements.svg');
}
label[for='job_types']:before {
background-image: url('../resources/img/pictogrammes/Homegrade_repertoire-metiers.svg');
}
}
}
&__geographic-filters,
&__elements-batiments-filters,
&__metiers-filters {
@apply border border-neutral-300 p-4 rounded-3xl my-4 w-full;
}
&__geographic-filters {
@apply hidden;
}
&:has(
#elements_batiments_checkbox:checked,
#metiers_checkbox:checked
) {
.metier-patrimoine-searchbar__geographic-filters {
@apply block;
}
}
&__elements-batiments-filters,
&__metiers-filters {
@apply hidden;
}
/* HIDE METIERS FILTERS WHEN SEARCH IS ON ELEMENTS BATIMENTS */
&:has(
.metier-patrimoine-searchbar__search-by
#elements_batiments_checkbox:checked
) {
.metier-patrimoine-searchbar__elements-batiments-filters {
@apply block;
/* @apply opacity-40; */
}
}
/* HIDE ELEMENTS BATIMENTS FILTERS WHEN SEARCH IS ON METIERS */
&:has(
.metier-patrimoine-searchbar__search-by
#metiers_checkbox:checked
) {
.metier-patrimoine-searchbar__metiers-filters {
@apply block;
/* @apply opacity-40; */
}
}
}