diff --git a/src/components/Project/FeaturesListAndMap/FeaturesListAndMapFilters.vue b/src/components/Project/FeaturesListAndMap/FeaturesListAndMapFilters.vue index 2fc77496d4686f9c59aeb8022792c8c369a43abb..de17614dd21dd8bad09a3624ba5a5f4635a6887b 100644 --- a/src/components/Project/FeaturesListAndMap/FeaturesListAndMapFilters.vue +++ b/src/components/Project/FeaturesListAndMap/FeaturesListAndMapFilters.vue @@ -469,4 +469,14 @@ export default { #form-filters .multiselect__tags { white-space: normal !important; } +#form-filters .multiselect__tag { + background: var(--primary-color, #008c86) !important; +} +#form-filters .multiselect__tag-icon:focus, #form-filters .multiselect__tag-icon:hover{ + background: var(--primary-highlight-color, #006f6a) !important; +} +#form-filters .multiselect__tag-icon:not(:hover)::after { + color: var(--primary-highlight-color, #006f6a); + filter: brightness(0.6); +} </style> \ No newline at end of file diff --git a/src/views/Project/FeaturesListAndMap.vue b/src/views/Project/FeaturesListAndMap.vue index c624ea7e2b6db216a500aeccf1cff42811eb250c..a6fc7e4bb07230fa11601769fbfcdb4bdeb170fe 100644 --- a/src/views/Project/FeaturesListAndMap.vue +++ b/src/views/Project/FeaturesListAndMap.vue @@ -57,11 +57,10 @@ @update:page="handlePageChange" @update:sort="handleSortChange" /> - <Transition name="ease"> + <Transition name="fadeIn"> <div v-if="loading" - :class="{ active: loading }" - class="ui inverted dimmer" + class="ui inverted dimmer active" > <div class="ui text loader"> Récupération des signalements en cours... @@ -540,7 +539,11 @@ export default { <style lang="less" scoped> .loader-container { position: relative; + min-height: 250px; // keep a the spinner above result and below table header z-index: 1; + .ui.inverted.dimmer.active { + opacity: .6; + } } .map-container { width: 80vw; @@ -590,19 +593,36 @@ div.geolocation-container { } } -.ease-enter-active { - animation: ease-in 0.5s; +.fadeIn-enter-active { + animation: fadeIn .5s; +} +.fadeIn-leave-active { + animation: fadeIn .5s reverse; +} +.transition.fade.in { + -webkit-animation-name: fadeIn; + animation-name: fadeIn } -.ease-leave-active { - animation: ease-in 0.5s reverse; + +@-webkit-keyframes fadeIn { + 0% { + opacity: 0 + } + + 100% { + opacity: .9 + } } -@keyframes ease-in { + +@keyframes fadeIn { 0% { - opacity: 0; + opacity: 0 } + 100% { - opacity: 1; + opacity: .9 } } + </style>