@tekkare/romulus 0.1.30 → 0.1.31
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/module.json
CHANGED
|
@@ -1,129 +1,163 @@
|
|
|
1
|
+
<!--
|
|
2
|
+
Constructeur de recherche complexe : une ligne par terme, chacune reliee aux
|
|
3
|
+
precedentes par ET, OU ou SAUF.
|
|
4
|
+
|
|
5
|
+
Le composant ne garde pas d'etat : les lignes vivent chez l'appelant
|
|
6
|
+
(`v-model`), qui les traduit en requete. Il vit dans le panneau
|
|
7
|
+
« Recherche avancee » de RmFilterBar (slot #Advanced), a cote des panneaux
|
|
8
|
+
Filtres et Personnaliser.
|
|
9
|
+
|
|
10
|
+
L'operateur se choisit en ajoutant la ligne (« + and », « | or », « − not »)
|
|
11
|
+
et se change ensuite en cliquant sa pastille, qui tourne and → or → not.
|
|
12
|
+
La premiere ligne n'a pas d'operateur : il n'y a rien avant elle.
|
|
13
|
+
-->
|
|
1
14
|
<script setup lang="ts">
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
export interface AdvancedSearchRow {
|
|
15
|
+
import { computed, ref, watch } from 'vue'
|
|
16
|
+
|
|
17
|
+
export type RmSearchOperator = 'and' | 'or' | 'not'
|
|
18
|
+
|
|
19
|
+
export type RmSearchRow = {
|
|
20
|
+
/** Identite stable de la ligne, pour la cle de rendu. */
|
|
10
21
|
id: number
|
|
11
|
-
type:
|
|
22
|
+
type: RmSearchOperator
|
|
12
23
|
value: string
|
|
13
24
|
}
|
|
14
25
|
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
26
|
+
const props = withDefaults(
|
|
27
|
+
defineProps<{
|
|
28
|
+
modelValue: RmSearchRow[]
|
|
29
|
+
lang?: 'fr' | 'en'
|
|
30
|
+
/** Placeholder des champs de terme. */
|
|
31
|
+
placeholder?: string
|
|
32
|
+
}>(),
|
|
33
|
+
{ lang: 'fr', placeholder: '' },
|
|
34
|
+
)
|
|
35
|
+
|
|
36
|
+
const emit = defineEmits<{ 'update:modelValue': [rows: RmSearchRow[]] }>()
|
|
37
|
+
|
|
38
|
+
const LABELS = {
|
|
39
|
+
fr: { keyword: 'Mot-clé', clear: 'Tout effacer', remove: 'Retirer cette ligne' },
|
|
40
|
+
en: { keyword: 'Keyword', clear: 'Clear all', remove: 'Remove this row' },
|
|
41
|
+
} as const
|
|
42
|
+
|
|
43
|
+
const t = computed(() => LABELS[props.lang] ?? LABELS.fr)
|
|
44
|
+
const ORDER: RmSearchOperator[] = ['and', 'or', 'not']
|
|
45
|
+
|
|
46
|
+
/** Toujours une ligne a remplir, sinon le panneau s'ouvre vide. */
|
|
47
|
+
function normalize(list: RmSearchRow[]): RmSearchRow[] {
|
|
48
|
+
return list.length > 0 ? list.map((row) => ({ ...row })) : [{ id: 0, type: 'and', value: '' }]
|
|
49
|
+
}
|
|
25
50
|
|
|
26
|
-
|
|
51
|
+
function same(a: RmSearchRow[], b: RmSearchRow[]) {
|
|
52
|
+
return (
|
|
53
|
+
a.length === b.length &&
|
|
54
|
+
a.every((row, i) => row.id === b[i]?.id && row.type === b[i]?.type && row.value === b[i]?.value)
|
|
55
|
+
)
|
|
56
|
+
}
|
|
27
57
|
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
58
|
+
/**
|
|
59
|
+
* Les lignes sont editees en local puis publiees.
|
|
60
|
+
*
|
|
61
|
+
* Lier les champs directement a `modelValue` faisait un aller-retour par
|
|
62
|
+
* frappe : le parent republie, le champ se repatche, et une frappe rapide se
|
|
63
|
+
* perdait dans l'intervalle. Le parent ne renvoie donc l'etat que quand il
|
|
64
|
+
* change vraiment ailleurs (la barre de recherche, un scope repris).
|
|
65
|
+
*/
|
|
66
|
+
const rows = ref<RmSearchRow[]>(normalize(props.modelValue))
|
|
67
|
+
|
|
68
|
+
watch(
|
|
69
|
+
() => props.modelValue,
|
|
70
|
+
(val) => {
|
|
71
|
+
if (!same(val, rows.value)) rows.value = normalize(val)
|
|
72
|
+
},
|
|
73
|
+
{ deep: true },
|
|
74
|
+
)
|
|
75
|
+
|
|
76
|
+
function nextId() {
|
|
77
|
+
return rows.value.reduce((max, row) => Math.max(max, row.id), 0) + 1
|
|
78
|
+
}
|
|
31
79
|
|
|
32
|
-
|
|
80
|
+
/** La premiere ligne n'est reliee a rien : son operateur est toujours ET. */
|
|
81
|
+
function commit() {
|
|
82
|
+
emit(
|
|
83
|
+
'update:modelValue',
|
|
84
|
+
rows.value.map((row, i) => (i === 0 ? { ...row, type: 'and' } : { ...row })),
|
|
85
|
+
)
|
|
86
|
+
}
|
|
33
87
|
|
|
34
|
-
function
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
emit('apply', rows.value.filter(r => r.value.trim() !== ''))
|
|
38
|
-
}, 500)
|
|
88
|
+
function cycleType(row: RmSearchRow) {
|
|
89
|
+
row.type = ORDER[(ORDER.indexOf(row.type) + 1) % ORDER.length]
|
|
90
|
+
commit()
|
|
39
91
|
}
|
|
40
92
|
|
|
41
|
-
function addRow(type:
|
|
42
|
-
rows.value.push({ id: nextId
|
|
93
|
+
function addRow(type: RmSearchOperator) {
|
|
94
|
+
rows.value.push({ id: nextId(), type, value: '' })
|
|
95
|
+
commit()
|
|
43
96
|
}
|
|
44
97
|
|
|
45
98
|
function removeRow(id: number) {
|
|
46
|
-
rows.value = rows.value.filter(
|
|
47
|
-
|
|
48
|
-
rows.value.push({ id: nextId++, type: 'and', value: '' })
|
|
49
|
-
}
|
|
50
|
-
emitApply()
|
|
99
|
+
rows.value = normalize(rows.value.filter((row) => row.id !== id))
|
|
100
|
+
commit()
|
|
51
101
|
}
|
|
52
102
|
|
|
53
103
|
function clearAll() {
|
|
54
|
-
rows.value = [
|
|
55
|
-
|
|
56
|
-
emitApply()
|
|
57
|
-
}
|
|
58
|
-
|
|
59
|
-
const typeColors: Record<string, string> = {
|
|
60
|
-
and: 'var(--color-healthcare)',
|
|
61
|
-
or: 'var(--color-discovery)',
|
|
62
|
-
not: 'var(--color-pharma)',
|
|
104
|
+
rows.value = normalize([])
|
|
105
|
+
commit()
|
|
63
106
|
}
|
|
64
107
|
</script>
|
|
65
108
|
|
|
66
109
|
<template>
|
|
67
|
-
<div
|
|
68
|
-
<div class="
|
|
69
|
-
<
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
<div
|
|
77
|
-
v-for="row in rows"
|
|
78
|
-
:key="row.id"
|
|
79
|
-
class="advanced-search__row"
|
|
80
|
-
>
|
|
81
|
-
<span
|
|
82
|
-
class="advanced-search__type"
|
|
83
|
-
:style="{ color: typeColors[row.type] }"
|
|
110
|
+
<div class="rm-asearch">
|
|
111
|
+
<div class="rm-asearch__rows">
|
|
112
|
+
<div v-for="(row, index) in rows" :key="row.id" class="rm-asearch__row">
|
|
113
|
+
<button
|
|
114
|
+
v-if="index > 0"
|
|
115
|
+
type="button"
|
|
116
|
+
class="rm-asearch__type"
|
|
117
|
+
:class="`rm-asearch__type--${row.type}`"
|
|
118
|
+
@click="cycleType(row)"
|
|
84
119
|
>
|
|
85
|
-
{{ row.type
|
|
86
|
-
</
|
|
120
|
+
{{ row.type }}
|
|
121
|
+
</button>
|
|
122
|
+
<span v-else class="rm-asearch__type rm-asearch__type--first">and</span>
|
|
123
|
+
|
|
87
124
|
<input
|
|
88
125
|
v-model="row.value"
|
|
89
126
|
type="text"
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
'advanced-search__input--and': row.type === 'and',
|
|
94
|
-
'advanced-search__input--or': row.type === 'or',
|
|
95
|
-
'advanced-search__input--not': row.type === 'not',
|
|
96
|
-
}"
|
|
97
|
-
@input="emitApply"
|
|
98
|
-
@keydown.enter="emitApply"
|
|
127
|
+
class="rm-asearch__input"
|
|
128
|
+
:placeholder="placeholder || t.keyword"
|
|
129
|
+
@input="commit"
|
|
99
130
|
>
|
|
100
|
-
|
|
101
|
-
|
|
131
|
+
|
|
132
|
+
<button
|
|
133
|
+
type="button"
|
|
134
|
+
class="rm-asearch__remove"
|
|
135
|
+
:aria-label="t.remove"
|
|
136
|
+
@click="removeRow(row.id)"
|
|
137
|
+
>
|
|
138
|
+
<RmIcon name="Trash" :size="16" />
|
|
102
139
|
</button>
|
|
103
140
|
</div>
|
|
104
141
|
</div>
|
|
105
142
|
|
|
106
|
-
<div class="
|
|
107
|
-
<button class="
|
|
108
|
-
<
|
|
109
|
-
and
|
|
143
|
+
<div class="rm-asearch__actions">
|
|
144
|
+
<button type="button" class="rm-asearch__add rm-asearch__add--and" @click="addRow('and')">
|
|
145
|
+
<RmIcon name="Plus" :size="12" /> and
|
|
110
146
|
</button>
|
|
111
|
-
<button class="
|
|
112
|
-
<
|
|
113
|
-
or
|
|
147
|
+
<button type="button" class="rm-asearch__add rm-asearch__add--or" @click="addRow('or')">
|
|
148
|
+
<RmIcon name="LineVertical" :size="12" /> or
|
|
114
149
|
</button>
|
|
115
|
-
<button class="
|
|
116
|
-
<
|
|
117
|
-
not
|
|
150
|
+
<button type="button" class="rm-asearch__add rm-asearch__add--not" @click="addRow('not')">
|
|
151
|
+
<RmIcon name="Minus" :size="12" /> not
|
|
118
152
|
</button>
|
|
119
|
-
</div>
|
|
120
153
|
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
154
|
+
<button type="button" class="rm-asearch__clear" @click="clearAll">
|
|
155
|
+
{{ t.clear }}
|
|
156
|
+
</button>
|
|
157
|
+
</div>
|
|
124
158
|
</div>
|
|
125
159
|
</template>
|
|
126
160
|
|
|
127
161
|
<style scoped>
|
|
128
|
-
.
|
|
162
|
+
.rm-asearch{font-family:var(--font-sans);gap:12px;width:100%}.rm-asearch,.rm-asearch__rows{display:flex;flex-direction:column}.rm-asearch__rows{gap:8px}.rm-asearch__row{align-items:center;display:flex;gap:8px}.rm-asearch__type{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-pill);cursor:pointer;flex:0 0 auto;font-family:inherit;font-size:var(--font-13);font-weight:var(--weight-semibold);height:32px;min-width:56px;padding:0 12px;text-transform:capitalize}.rm-asearch__type--first{align-items:center;color:var(--text-muted);cursor:default;display:inline-flex;justify-content:center}.rm-asearch__type--and{color:var(--color-primary)}.rm-asearch__type--or{color:var(--color-success)}.rm-asearch__type--not{color:var(--color-danger)}.rm-asearch__input{background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-pill);box-sizing:border-box;color:var(--text-primary);flex:1 1 auto;font-family:inherit;font-size:var(--font-14);height:32px;min-width:0;padding:0 14px}.rm-asearch__input:focus{border-color:var(--color-primary);outline:none}.rm-asearch__remove{background:none;border:none;border-radius:var(--radius-md);color:var(--text-muted);cursor:pointer;display:inline-flex;flex:0 0 auto;padding:6px}.rm-asearch__remove:hover{background:var(--bg-surface-3);color:var(--color-danger)}.rm-asearch__actions{align-items:center;display:flex;gap:8px}.rm-asearch__add{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-pill);cursor:pointer;display:inline-flex;font-family:inherit;font-size:var(--font-13);font-weight:var(--weight-medium);gap:4px;height:28px;padding:0 12px}.rm-asearch__add:hover{background:var(--bg-surface-3)}.rm-asearch__add--and{color:var(--color-primary)}.rm-asearch__add--or{color:var(--color-success)}.rm-asearch__add--not{color:var(--color-danger)}.rm-asearch__clear{background:none;border:none;color:var(--text-secondary);cursor:pointer;font-family:inherit;font-size:var(--font-14);font-weight:var(--weight-medium);margin-left:auto;padding:0;text-decoration-line:underline}
|
|
129
163
|
</style>
|
|
@@ -49,24 +49,29 @@ const props = withDefaults(
|
|
|
49
49
|
const emit = defineEmits<{ clearFilters: []; saveScope: [] }>()
|
|
50
50
|
|
|
51
51
|
const LABELS = {
|
|
52
|
-
fr: { title: 'Filtres', save: 'Sauvegarder un scope', clear: 'Tout effacer', customize: 'Personnaliser' },
|
|
53
|
-
en: { title: 'Filters', save: 'Save a scope', clear: 'Clear all', customize: 'Customize' },
|
|
52
|
+
fr: { title: 'Filtres', save: 'Sauvegarder un scope', clear: 'Tout effacer', customize: 'Personnaliser', advanced: 'Recherche avancée' },
|
|
53
|
+
en: { title: 'Filters', save: 'Save a scope', clear: 'Clear all', customize: 'Customize', advanced: 'Advanced search' },
|
|
54
54
|
} as const
|
|
55
55
|
|
|
56
56
|
const t = computed(() => LABELS[props.lang] ?? LABELS.fr)
|
|
57
57
|
|
|
58
58
|
/**
|
|
59
|
-
*
|
|
60
|
-
* (slot #
|
|
61
|
-
* ouvert a la
|
|
59
|
+
* Trois panneaux possibles sous la barre : les filtres, la recherche avancee
|
|
60
|
+
* (slot #Advanced) et la personnalisation (slot #Customize). Les deux derniers
|
|
61
|
+
* n'ont de puce que si la page fournit le slot. Un seul panneau ouvert a la
|
|
62
|
+
* fois : ils occupent la meme place et se liraient l'un par-dessus l'autre.
|
|
62
63
|
*/
|
|
63
|
-
|
|
64
|
+
type RmFilterBarPanel = 'filters' | 'advanced' | 'customize'
|
|
65
|
+
|
|
66
|
+
const panel = ref<RmFilterBarPanel | null>(null)
|
|
64
67
|
const open = computed(() => panel.value === 'filters')
|
|
68
|
+
const advancedOpen = computed(() => panel.value === 'advanced')
|
|
65
69
|
const customizeOpen = computed(() => panel.value === 'customize')
|
|
66
70
|
const slots = useSlots()
|
|
71
|
+
const hasAdvanced = computed(() => !!slots.Advanced)
|
|
67
72
|
const hasCustomize = computed(() => !!slots.Customize)
|
|
68
73
|
|
|
69
|
-
function toggle(which:
|
|
74
|
+
function toggle(which: RmFilterBarPanel) {
|
|
70
75
|
panel.value = panel.value === which ? null : which
|
|
71
76
|
}
|
|
72
77
|
|
|
@@ -131,6 +136,19 @@ onBeforeUnmount(() => {
|
|
|
131
136
|
<slot name="Search" />
|
|
132
137
|
</div>
|
|
133
138
|
|
|
139
|
+
<!-- La recherche avancee s'ouvre par un lien pose au bout du champ : elle
|
|
140
|
+
prolonge la recherche, elle n'est pas un troisieme reglage a cote de
|
|
141
|
+
« Filtres » et « Personnaliser ». -->
|
|
142
|
+
<button
|
|
143
|
+
v-if="hasAdvanced"
|
|
144
|
+
type="button"
|
|
145
|
+
class="rm-fbar__advanced"
|
|
146
|
+
:class="{ 'is-active': advancedOpen }"
|
|
147
|
+
@click="toggle('advanced')"
|
|
148
|
+
>
|
|
149
|
+
{{ t.advanced }}
|
|
150
|
+
</button>
|
|
151
|
+
|
|
134
152
|
<button
|
|
135
153
|
v-if="hasCustomize"
|
|
136
154
|
type="button"
|
|
@@ -170,6 +188,13 @@ onBeforeUnmount(() => {
|
|
|
170
188
|
</div>
|
|
171
189
|
</div>
|
|
172
190
|
|
|
191
|
+
<div v-if="hasAdvanced" v-show="advancedOpen" class="rm-fbar__panel rm-fbar__panel--wide">
|
|
192
|
+
<div class="rm-fbar__panel-head">
|
|
193
|
+
<p class="rm-fbar__panel-title">{{ t.advanced }}</p>
|
|
194
|
+
</div>
|
|
195
|
+
<slot name="Advanced" />
|
|
196
|
+
</div>
|
|
197
|
+
|
|
173
198
|
<div v-if="hasCustomize" v-show="customizeOpen" class="rm-fbar__panel">
|
|
174
199
|
<div class="rm-fbar__panel-head">
|
|
175
200
|
<p class="rm-fbar__panel-title">{{ t.customize }}</p>
|
|
@@ -182,5 +207,5 @@ onBeforeUnmount(() => {
|
|
|
182
207
|
</template>
|
|
183
208
|
|
|
184
209
|
<style scoped>
|
|
185
|
-
.rm-fbar{margin-inline:calc((min(var(--oip-content-max, 100%), 100%) - var(--oip-main-w, 100%))/2);position:sticky;width:var(--oip-main-w,100%);z-index:91;--rm-fbar-field-h:32px;backdrop-filter:blur(12px);background:rgba(245,245,249,.8);border-bottom:1px solid var(--border-default);display:flex;flex-direction:column;font-family:var(--font-sans)}.rm-fbar__row{align-items:flex-start;display:flex;gap:12px;padding-block:8px;padding-inline:max(32px,(100% - var(--oip-content-max,100%))/2 + 32px)}.rm-fbar--open .rm-fbar__row{border-bottom:1px solid var(--border-default)}.rm-fbar__toggle :deep(p),.rm-fbar__toggle :deep(span){font-size:inherit;font-weight:inherit;line-height:inherit;margin:0}.rm-fbar__toggle{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-pill);color:var(--text-primary);cursor:pointer;display:flex;flex:0 0 auto;font-family:inherit;font-size:var(--font-14);font-weight:var(--weight-medium);gap:6px;height:var(--rm-fbar-field-h);justify-content:center;padding:0 14px}.rm-fbar__toggle:hover{background:var(--bg-surface-3)}.rm-fbar__toggle.is-active,.rm-fbar__toggle.is-active:hover{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-text-inverse)}.rm-fbar__toggle.is-active .rm-fbar__badge{background:var(--color-text-inverse);color:var(--color-primary)}.rm-fbar__badge{align-items:center;background:var(--color-primary);border-radius:16px;color:var(--color-text-inverse);display:inline-flex;font-size:var(--font-11);font-weight:var(--weight-bold);justify-content:center;min-width:18px;padding:0 5px}.rm-fbar__view{align-items:center;display:flex;flex:0 0 auto}.rm-fbar__search{align-items:center;display:flex;flex:1 1 auto;gap:8px;min-width:0}.rm-fbar__search:empty{display:none}.rm-fbar__search :deep(.filters_input_search){border-radius:var(--radius-pill);box-sizing:border-box;height:auto;min-height:var(--rm-fbar-field-h);width:100%}.rm-fbar__search :deep(.research_tags:not(:has(*))){display:none}.rm-fbar__search :deep(.select_shortcut){box-sizing:border-box;font-size:var(--font-11);height:24px;padding-block:0}.rm-fbar__search :deep(.select_shortcut:hover){background:var(--bg-surface-3)!important;border-color:var(--border-default)!important;color:inherit!important}.rm-fbar__search :deep(.select_shortcut:hover svg){color:inherit!important}.rm-fbar__search :deep(.remove_search_section){border-left:none;border-radius:0 var(--radius-pill) var(--radius-pill) 0}.rm-fbar__search :deep(.remove_search_section:hover){background:transparent!important}.rm-fbar__search :deep(.remove_search_section:hover svg){color:var(--text-primary)!important}.rm-fbar__search :deep(.filters_input_search.no_bottom){border-bottom:1.5px solid var(--color-primary)!important;border-radius:var(--radius-pill)}.rm-fbar__search :deep(.search_suggestions){border:1px solid var(--border-default);border-radius:var(--radius-2xl);box-shadow:var(--shadow-lg);left:0;padding:6px;right:0;top:calc(100% + 6px);width:auto}.rm-fbar__search :deep(.sugg_container>*){border-radius:var(--radius-lg)}.rm-fbar__search :deep(.sugg_container>.selected){background:color-mix(in srgb,var(--color-primary) 6%,transparent)!important}.rm-fbar__panel{--rm-filter-col:224px;align-items:end;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(0,var(--rm-filter-col)));justify-content:center;padding-block:16px 20px;padding-inline:56px}.rm-fbar__filters{display:contents}.rm-fbar__panel-head{align-items:baseline;display:flex;gap:16px;grid-column:1/-1;width:100%}.rm-fbar__customize{grid-column:1/-1}.rm-fbar__panel :deep(.filters_row_break){grid-column:1/-1}.rm-fbar__panel-title{font-size:var(--font-18);font-weight:800;margin:0}.rm-fbar__action{background:none;border:none;cursor:pointer;font-family:inherit;font-size:var(--font-14);font-weight:var(--weight-medium);padding:0;text-decoration-line:underline}.rm-fbar__action--save{color:var(--color-primary)}.rm-fbar__action--clear{color:var(--text-secondary)}
|
|
210
|
+
.rm-fbar{margin-inline:calc((min(var(--oip-content-max, 100%), 100%) - var(--oip-main-w, 100%))/2);position:sticky;width:var(--oip-main-w,100%);z-index:91;--rm-fbar-field-h:32px;backdrop-filter:blur(12px);background:rgba(245,245,249,.8);border-bottom:1px solid var(--border-default);display:flex;flex-direction:column;font-family:var(--font-sans)}.rm-fbar__row{align-items:flex-start;display:flex;gap:12px;padding-block:8px;padding-inline:max(32px,(100% - var(--oip-content-max,100%))/2 + 32px)}.rm-fbar--open .rm-fbar__row{border-bottom:1px solid var(--border-default)}.rm-fbar__toggle :deep(p),.rm-fbar__toggle :deep(span){font-size:inherit;font-weight:inherit;line-height:inherit;margin:0}.rm-fbar__toggle{align-items:center;background:var(--bg-surface);border:1px solid var(--border-default);border-radius:var(--radius-pill);color:var(--text-primary);cursor:pointer;display:flex;flex:0 0 auto;font-family:inherit;font-size:var(--font-14);font-weight:var(--weight-medium);gap:6px;height:var(--rm-fbar-field-h);justify-content:center;padding:0 14px}.rm-fbar__toggle:hover{background:var(--bg-surface-3)}.rm-fbar__toggle.is-active,.rm-fbar__toggle.is-active:hover{background:var(--color-primary);border-color:var(--color-primary);color:var(--color-text-inverse)}.rm-fbar__toggle.is-active .rm-fbar__badge{background:var(--color-text-inverse);color:var(--color-primary)}.rm-fbar__badge{align-items:center;background:var(--color-primary);border-radius:16px;color:var(--color-text-inverse);display:inline-flex;font-size:var(--font-11);font-weight:var(--weight-bold);justify-content:center;min-width:18px;padding:0 5px}.rm-fbar__view{align-items:center;display:flex;flex:0 0 auto}.rm-fbar__advanced{align-items:center;background:none;border:none;color:var(--color-primary);cursor:pointer;display:inline-flex;flex:0 0 auto;font-family:inherit;font-size:var(--font-13);font-weight:var(--weight-medium);height:var(--rm-fbar-field-h);padding:0;text-decoration-line:underline;white-space:nowrap}.rm-fbar__advanced.is-active,.rm-fbar__advanced:hover{color:var(--color-primary-hover,var(--color-primary));text-decoration-thickness:2px}.rm-fbar__search{align-items:center;display:flex;flex:1 1 auto;gap:8px;min-width:0}.rm-fbar__search:empty{display:none}.rm-fbar__search :deep(.filters_input_search){border-radius:var(--radius-pill);box-sizing:border-box;height:auto;min-height:var(--rm-fbar-field-h);width:100%}.rm-fbar__search :deep(.research_tags:not(:has(*))){display:none}.rm-fbar__search :deep(.select_shortcut){box-sizing:border-box;font-size:var(--font-11);height:24px;padding-block:0}.rm-fbar__search :deep(.select_shortcut:hover){background:var(--bg-surface-3)!important;border-color:var(--border-default)!important;color:inherit!important}.rm-fbar__search :deep(.select_shortcut:hover svg){color:inherit!important}.rm-fbar__search :deep(.remove_search_section){border-left:none;border-radius:0 var(--radius-pill) var(--radius-pill) 0}.rm-fbar__search :deep(.remove_search_section:hover){background:transparent!important}.rm-fbar__search :deep(.remove_search_section:hover svg){color:var(--text-primary)!important}.rm-fbar__search :deep(.filters_input_search.no_bottom){border-bottom:1.5px solid var(--color-primary)!important;border-radius:var(--radius-pill)}.rm-fbar__search :deep(.search_suggestions){border:1px solid var(--border-default);border-radius:var(--radius-2xl);box-shadow:var(--shadow-lg);left:0;padding:6px;right:0;top:calc(100% + 6px);width:auto}.rm-fbar__search :deep(.sugg_container>*){border-radius:var(--radius-lg)}.rm-fbar__search :deep(.sugg_container>.selected){background:color-mix(in srgb,var(--color-primary) 6%,transparent)!important}.rm-fbar__panel{--rm-filter-col:224px;align-items:end;display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(0,var(--rm-filter-col)));justify-content:center;padding-block:16px 20px;padding-inline:56px}.rm-fbar__panel--wide{align-items:stretch;display:flex;flex-direction:column;gap:12px}.rm-fbar__filters{display:contents}.rm-fbar__panel-head{align-items:baseline;display:flex;gap:16px;grid-column:1/-1;width:100%}.rm-fbar__customize{grid-column:1/-1}.rm-fbar__panel :deep(.filters_row_break){grid-column:1/-1}.rm-fbar__panel-title{font-size:var(--font-18);font-weight:800;margin:0}.rm-fbar__action{background:none;border:none;cursor:pointer;font-family:inherit;font-size:var(--font-14);font-weight:var(--weight-medium);padding:0;text-decoration-line:underline}.rm-fbar__action--save{color:var(--color-primary)}.rm-fbar__action--clear{color:var(--text-secondary)}
|
|
186
211
|
</style>
|