Antoine/homegrade_theme_production
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactoring component and its classes

Browse Source
This commit is contained in:
Antoine M 2023-12-06 16:31:07 +01:00
parent 0aa83d08e1
commit 6100025613
1 changed files with 104 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

122
resources/css/components/filters-toolbar.css
View File

@ -1,30 +1,22 @@
.filters-toolbar {
@apply py-8;
ul {
@apply flex
flex-row
justify-start
md:justify-center
lg:justify-start
flex-wrap
container
mx-auto
gap-x-4 gap-y-3 p-0;
}
li {
@apply h-auto;
}
hr {
@apply border-neutral-300 my-6;
}
&__posts-results-indications {
@apply flex justify-between items-center;
@apply flex flex-wrap justify-between items-center pb-4;
}
&__posts-results-amount {
@apply pb-4;
.results-filter-name {
@apply font-bold;
}
.results-amount {
@apply font-semibold;
}
&.filter-disable {
.results-filter-name,
.results-for {
@ -32,6 +24,12 @@
}
}
}
&__accessibility-action-buttons {
@apply flex flex-wrap gap-x-6 justify-start;
button {
@apply underline;
}
}
&__action-button {
@apply bg-white shadowed py-4 px-4 rounded-xl
font-bold
@ -39,8 +37,7 @@
justify-center
items-center
gap-3
w-fit
h-full;
w-fit;
outline-offset: 0 !important;
transition: transform 0.2s ease-in-out;
&:hover {
@ -53,7 +50,6 @@
@apply block;
}
}
&__action-button--load-all {
@apply underline;
}
@ -61,4 +57,94 @@
@apply text-secondary;
outline: transparent;
}
/* FILTERS */
&__filters-container {
@apply flex gap-4;
}
.publication-type-filters-wrapper {
@apply flex
flex-row
justify-start
md:justify-center
lg:justify-start
flex-wrap
container
w-fit
gap-x-4 gap-y-3 p-0;
}
.action-thematiques-filters-wrapper {
@apply h-20 border-b border-neutral-300;
}
&__action-thematiques-filters {
@apply absolute pb-0 border-b border-neutral-400 bg-white border w-fit rounded-xl;
/* THEMATIQUES FILTERS */
.filter-by-thematiques-submenu-toggle {
@apply font-bold p-4 rounded-xl flex items-center gap-12;
box-sizing: border-box;
outline-offset: 0;
outline-radius: 10px;
&:after {
@apply inline-block top-0 right-0 bottom-0 w-3 h-3;
content: '';
filter: invert(17%) sepia(69%) saturate(4735%) hue-rotate(351deg) brightness(94%)
contrast(94%);
background-image: url('../resources/img/graphic-assets/chevron_down.svg');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
transform: translateY(1px);
transition: transform 0.2s ease-in-out;
}
&[active] {
&:after {
transform: translateY(2px) rotate(180deg);
}
}
}
.action-thematiques-filters-list {
@apply w-full flex-col items-start gap-0 pb-4 mt-4;
/* @apply bg-red-500 absolute bottom-0 left-0 translate-y-full w-full; */
}
li {
@apply flex gap-2 items-center justify-start w-full px-4 py-1;
}
li:hover {
@apply bg-neutral-100 rounded-md;
}
}
&__active-filters-viewer {
@apply mt-2 flex flex-wrap gap-6 items-center;
.active-filters-button-container {
@apply flex gap-4 flex-wrap;
button {
@apply bg-neutral-100 px-4 py-3 rounded-xl font-bold h-fit;
}
}
.filters-toolbar__action-button--reset-filter {
@apply !py-2;
}
.filters-toolbar__action-button--active-filter-remover {
@apply flex items-center gap-3;
&:after {
@apply inline-block w-5 h-5;
content: '';
background-image: url('../resources/img/graphic-assets/cross-in-cirle-thick.svg');
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
}
}
&:not([thematique-filter-active]) {
.filters-toolbar__active-filters-viewer {
@apply hidden;
}
}
}