tamga-ui 0.8.0 → 0.8.1
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/CHANGELOG.md +28 -0
- package/dist/blocks/filter-bar.d.ts +13 -0
- package/dist/blocks/filter-bar.d.ts.map +1 -1
- package/dist/blocks/filter-bar.js +6 -4
- package/dist/fonts.css +1 -1
- package/dist/kit.css +70 -18
- package/dist/styles.css +1 -1
- package/dist/theme.css +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,34 @@ Versions follow [semver](https://semver.org/). Through `0.x`, breaking changes m
|
|
|
5
5
|
|
|
6
6
|
> 🇹🇷 Türkçe için [tamga.org.tr/tr](https://tamga.org.tr/tr).
|
|
7
7
|
|
|
8
|
+
## 0.8.1
|
|
9
|
+
|
|
10
|
+
> Five things the chip layout showed on a real page.
|
|
11
|
+
|
|
12
|
+
### Fixed
|
|
13
|
+
|
|
14
|
+
- **`FilterBar` `look="chips"`** · the search box's visible label is gone (it stays for screen
|
|
15
|
+
readers), the box is the chips' size and sits on their line, centred with them. "Clear all"
|
|
16
|
+
is a plain link at the end of the chip row, on the same line. A set chip is one object: the
|
|
17
|
+
edge and shadow belong to the chip, the trigger inside and the remove square carry none, the
|
|
18
|
+
remove stays a separate button named `labels.remove(label)`. In the narrow-screen sheet the
|
|
19
|
+
panels show only the value; the field's name is already above each. On a narrow screen the
|
|
20
|
+
scrolling row of set chips and "Clear all" stay inside the card. All of it in kit classes;
|
|
21
|
+
`pnpm olc:filtre` measures each point at 1280 and 390.
|
|
22
|
+
- **The narrow layout keys off the bar's own width, not the screen's.** With the app's sidebar
|
|
23
|
+
open on a phone the card is 210px wide while the viewport is 390; a viewport media query
|
|
24
|
+
could not see that, so the fixed search box and the "Filter · N" button overflowed the card.
|
|
25
|
+
`.tamga-filter-bar` is now an inline-size container and the narrow/wide rules are
|
|
26
|
+
`@container` queries; every flex ancestor down to the chip has `min-width: 0`, the search
|
|
27
|
+
shrinks (`flex: 1 1 0`), the button never does (`flex-shrink: 0`), the set-chip row scrolls
|
|
28
|
+
inside the card, and the chips in it never shrink (`flex-shrink: 0`, one line of text): with
|
|
29
|
+
three filters set they were squashed to 24px and the row did not scroll. `pnpm olc:filtre`
|
|
30
|
+
also measures a 210px card on a 1280px screen, with three set chips. Applies to
|
|
31
|
+
`look="fields"` too.
|
|
32
|
+
- **A chip panel's search box showed the bar's own search text** ("Search by name or
|
|
33
|
+
address" inside the Tags panel). It now reads the field's `searchPlaceholder`, else
|
|
34
|
+
`labels.searchIn(label)`, else the field's label.
|
|
35
|
+
|
|
8
36
|
## 0.8.0
|
|
9
37
|
|
|
10
38
|
> A choice panel opened from a button, and a filter bar made of chips.
|
|
@@ -59,6 +59,13 @@ export type FilterField = {
|
|
|
59
59
|
* the label. TR: Yalnız `look="chips"`: çipin panelinin başlığı, "Müşteri seçin"; yoksa ad.
|
|
60
60
|
*/
|
|
61
61
|
panelTitle?: string;
|
|
62
|
+
/**
|
|
63
|
+
* `look="chips"`, `searchable` only: the panel's search box text, "Search tags". Absent,
|
|
64
|
+
* `labels.searchIn(label)`, else the label itself; never the bar's own search text. TR: Yalnız
|
|
65
|
+
* `look="chips"` ve `searchable`: panelin arama kutusunun metni, "Etiket ara". Yoksa
|
|
66
|
+
* `labels.searchIn(label)`, o da yoksa alanın adı; asla çubuğun kendi arama metni.
|
|
67
|
+
*/
|
|
68
|
+
searchPlaceholder?: string;
|
|
62
69
|
/**
|
|
63
70
|
* A glyph before the value, naming what this filter is about. TR: Değerin
|
|
64
71
|
* önünde, bu filtrenin neyle ilgili olduğunu söyleyen glif.
|
|
@@ -115,6 +122,12 @@ export type FilterBarLabels = {
|
|
|
115
122
|
open: (label: string) => string;
|
|
116
123
|
/** Like "Remove the <filter> filter". TR: "<filtre> filtresini kaldır". */
|
|
117
124
|
remove: (label: string) => string;
|
|
125
|
+
/**
|
|
126
|
+
* Like "Search in <field>"; the chip panel's search box when the field gives no
|
|
127
|
+
* `searchPlaceholder`. TR: "<alan> içinde ara" gibi; alan `searchPlaceholder` vermezse çip
|
|
128
|
+
* panelinin arama kutusu.
|
|
129
|
+
*/
|
|
130
|
+
searchIn?: (label: string) => string;
|
|
118
131
|
rangeStart: string;
|
|
119
132
|
rangeEnd: string;
|
|
120
133
|
calendar: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"filter-bar.d.ts","sourceRoot":"","sources":["../../src/blocks/filter-bar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA6B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAOlE,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACxD,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAKlD;;;;;;GAMG;AAEH,8EAA8E;AAC9E,MAAM,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAElD,MAAM,MAAM,eAAe,GACvB,MAAM,GACN,QAAQ;AACV,2EAA2E;GACzE,YAAY;AACd;;;GAGG;GACD,OAAO;AACT,sEAAsE;GACpE,WAAW,CAAC;AAEhB;;;;GAIG;AACH,MAAM,MAAM,YAAY,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAAC;AAE5D,MAAM,MAAM,WAAW,GAAG;IACxB,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,eAAe,CAAC;IACtB;;;;OAIG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC,MAAM,GAAG,YAAY,CAAC,EAAE,CAAC;IAC7C;;;;;;;;;;;;;OAaG;IACH,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB;;;;;;;;;;OAUG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,WAAW,EAAE,CAAA;CAAE,CAAC;AAInE,eAAO,MAAM,UAAU,QAAS,MAAM,WAAkB,CAAC;AACzD,eAAO,MAAM,QAAQ,QAAS,MAAM,WAAgB,CAAC;AAErD,MAAM,MAAM,eAAe,GAAG;IAC5B,sEAAsE;IACtE,MAAM,EAAE,MAAM,CAAC;IACf;;;;;;;OAOG;IACH,GAAG,EAAE,MAAM,CAAC;IACZ,UAAU,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,CAAC;IAChB,uJAAuJ;IACvJ,IAAI,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAChC,2EAA2E;IAC3E,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IAClC,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE;QAAE,aAAa,EAAE,MAAM,CAAC;QAAC,SAAS,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IACpF,wJAAwJ;IACxJ,UAAU,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,SAAS,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;CAChG,CAAC;
|
|
1
|
+
{"version":3,"file":"filter-bar.d.ts","sourceRoot":"","sources":["../../src/blocks/filter-bar.tsx"],"names":[],"mappings":"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"}
|
|
@@ -62,10 +62,12 @@ function PanelAlani({ field, values, write, optionSource, labels, cip = false, }
|
|
|
62
62
|
const ortak = {
|
|
63
63
|
title: field.panelTitle ?? field.label,
|
|
64
64
|
"aria-label": field.label,
|
|
65
|
-
|
|
65
|
+
/* Çipte ad önek ("Durum:"); çekmece panelinde ad zaten üstte, önek yok. */
|
|
66
|
+
prefix: cip ? `${field.label}:` : undefined,
|
|
66
67
|
placeholder: labels.all,
|
|
67
68
|
searchable: field.kind === "searchable",
|
|
68
|
-
|
|
69
|
+
/* Panelin araması kendi metnini taşır; çubuğun arama metni ("Ad ya da adres ara") değil. */
|
|
70
|
+
labels: { noMatch: labels.noMatch, search: field.searchPlaceholder ?? labels.searchIn?.(field.label) ?? field.label, clear: labels.clear },
|
|
69
71
|
size: cip ? "sm" : "base",
|
|
70
72
|
className: cip ? undefined : "tamga-select-panel-tam",
|
|
71
73
|
};
|
|
@@ -125,9 +127,9 @@ export function FilterBar({ values, onChange, top, drawer, optionSource = {}, se
|
|
|
125
127
|
return value.split(",").map((v) => adlar.get(v) ?? v).join(field.kind === "multi" ? ", " : ",");
|
|
126
128
|
};
|
|
127
129
|
const ustAlanlar = (sinif) => top.map((field) => (_jsxs("div", { className: `tamga-filter-alan ${field.kind === "dateRange" ? "sm:col-span-2" : ""}`, children: [_jsx("span", { className: sinif, children: field.label }), _jsx(FieldControl, { field: field, values: values, write: write, optionSource: optionSource, locale: locale, labels: labels, panel: cipler })] }, field.key)));
|
|
128
|
-
const aramaKutusu = (_jsxs("span", { className: "relative flex items-center", children: [_jsx(Icon, { icon: Search, size: "xs", "aria-hidden": true, className: "pointer-events-none absolute left-2.5 text-ink-faint" }), _jsx(Input, { type: "search", full: true, leading: true, placeholder: labels.search, value: values[searchKey] ?? "", onChange: (e) => write(searchKey, e.target.value) })] }));
|
|
130
|
+
const aramaKutusu = (_jsxs("span", { className: "relative flex items-center", children: [_jsx(Icon, { icon: Search, size: "xs", "aria-hidden": true, className: "pointer-events-none absolute left-2.5 text-ink-faint" }), _jsx(Input, { type: "search", full: true, leading: true, size: cipler ? "sm" : "md", placeholder: labels.search, value: values[searchKey] ?? "", onChange: (e) => write(searchKey, e.target.value) })] }));
|
|
129
131
|
const cekmeceDugmesi = (drawer.length > 0 || top.length > 0) && (_jsxs(Button, { className: drawer.length > 0 ? "ml-auto" : "tamga-filter-dar ml-auto", onClick: () => setDrawerOpen(true), children: [_jsx(Icon, { icon: Customize, size: "xs" }), _jsxs("span", { className: "tamga-filter-genis", children: [labels.allFilters, hiddenActive > 0 && _jsx("span", { className: "tamga-count ml-1 tabular-nums", children: hiddenActive })] }), _jsx("span", { className: "tamga-filter-dar", children: darMetin })] }));
|
|
130
|
-
return (_jsxs("div", { className: "tamga-card tamga-card-open tamga-filter-bar", children: [cipler ? (_jsxs("div", { className: "tamga-filter-cips", children: [_jsxs("label", { className: "tamga-filter-ara-sabit", children: [_jsx("span", { className: "
|
|
132
|
+
return (_jsxs("div", { className: "tamga-card tamga-card-open tamga-filter-bar", children: [cipler ? (_jsxs("div", { className: "tamga-filter-cips", children: [_jsxs("label", { className: "tamga-filter-ara-sabit", children: [_jsx("span", { className: "tamga-filter-ara-etiket", children: labels.search }), aramaKutusu] }), _jsxs("span", { className: "tamga-filter-cip-sira", children: [top.map((field) => field.kind === "select" || field.kind === "searchable" || field.kind === "multi" ? (_jsxs("span", { className: "tamga-filter-cip", "data-set": values[field.key] ? "true" : undefined, children: [_jsx(PanelAlani, { field: field, values: values, write: write, optionSource: optionSource, labels: labels, cip: true }), values[field.key] ? (_jsx("button", { type: "button", className: "tamga-filter-cip-x", "aria-label": labels.remove(field.label), onClick: () => write(field.key, ""), children: _jsx(Icon, { icon: Close, size: "xs" }) })) : null] }, field.key)) : (_jsxs("div", { className: "tamga-filter-genis tamga-filter-alan", "data-range": field.kind === "dateRange" || undefined, children: [_jsx("span", { className: "text-small font-bold text-ink-faint", children: field.label }), _jsx(FieldControl, { field: field, values: values, write: write, optionSource: optionSource, locale: locale, labels: labels })] }, field.key))), darAktif > 0 ? (_jsx("button", { type: "button", className: "tamga-link tamga-filter-cip-temizle", onClick: () => onChange({}), children: labels.clearAll })) : null] }), cekmeceDugmesi, extra] })) : (_jsxs("div", { className: "tamga-filter-row", children: [_jsxs("label", { className: "tamga-filter-ara", children: [_jsx("span", { className: "text-small font-bold text-ink-faint", children: labels.search }), aramaKutusu] }), top.map((field) => (_jsxs(Fragment, { children: [field.break ? _jsx("span", { "aria-hidden": true, className: "tamga-filter-genis tamga-filter-kir" }) : null, _jsxs("div", { className: `tamga-filter-genis tamga-filter-alan ${field.kind === "dateRange" ? "" : "tamga-filter-cap"}`, "data-range": field.kind === "dateRange" || undefined, children: [_jsx("span", { className: "text-small font-bold text-ink-faint", children: field.label }), _jsx(FieldControl, { field: field, values: values, write: write, optionSource: optionSource, locale: locale, labels: labels })] })] }, field.key))), cekmeceDugmesi, extra] })), !cipler && active.length > 0 && (_jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [active.map(([key, value]) => (_jsxs("span", { className: "tamga-token", children: [_jsxs("span", { className: "font-normal text-ink-faint", children: [labelFor(key), ":"] }), valueText(key, value), _jsx("button", { type: "button", className: "tamga-token-x", "aria-label": labels.remove(labelFor(key)), onClick: () => write(key, ""), children: _jsx(Icon, { icon: Close, size: "xs" }) })] }, key))), _jsx(Button, { variant: "link", size: "sm", onClick: () => onChange({}), children: labels.clearAll })] })), _jsx(Sheet, { open: drawerOpen, onClose: () => setDrawerOpen(false), title: cipler ? (labels.filter ?? labels.allFilters) : labels.allFilters, closeLabel: labels.calendar.clear, footer: _jsxs(_Fragment, { children: [_jsx(Button, { type: "button", onClick: () => onChange({}), children: labels.clear }), _jsx(Button, { type: "submit", form: formId, variant: "primary", children: labels.apply })] }), children: _jsxs("form", { id: formId, onSubmit: (e) => {
|
|
131
133
|
e.preventDefault();
|
|
132
134
|
setDrawerOpen(false);
|
|
133
135
|
}, className: "flex flex-col", children: [top.length > 0 && (_jsx("div", { className: "tamga-filter-dar tamga-filter-grup border-b border-dashed border-line py-4.5 last:border-b-0", children: _jsx("div", { className: "grid gap-3 sm:grid-cols-[repeat(2,minmax(0,1fr))]", children: ustAlanlar("text-small text-ink-soft") }) })), drawer.map((group) => (_jsxs("div", { className: "flex flex-col gap-3.5 border-b border-dashed border-line py-4.5 last:border-b-0", children: [_jsx("p", { className: "text-caption font-extrabold uppercase tracking-label text-ink-faint", children: group.title }), _jsx("div", { className: "grid gap-3 sm:grid-cols-[repeat(2,minmax(0,1fr))]", children: group.fields.map((field) => (_jsxs("div", { className: `flex flex-col gap-1.5 ${field.kind === "dateRange" ? "sm:col-span-2" : ""}`, children: [_jsx("span", { className: "text-small text-ink-soft", children: field.label }), _jsx(FieldControl, { field: field, values: values, write: write, optionSource: optionSource, locale: locale, labels: labels, panel: cipler })] }, field.key))) })] }, group.title))), fileSearchKey && labels.fileSearch && (_jsxs("div", { children: [_jsx("p", { className: "mb-3 text-micro font-semibold uppercase tracking-wide text-ink-faint", children: labels.fileSearch.title }), _jsx("p", { className: "mb-3 text-small leading-relaxed text-ink-soft", children: labels.fileSearch.help }), values[fileSearchKey] ? (_jsxs("span", { className: "flex items-center gap-2", children: [_jsx("span", { className: "truncate text-small text-ink", children: values[fileSearchKey] }), _jsx(Button, { type: "button", size: "sm", onClick: () => {
|
package/dist/fonts.css
CHANGED
package/dist/kit.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/*! tamga-ui 0.8.
|
|
1
|
+
/*! tamga-ui 0.8.1 · MIT · https://tamga.org.tr */
|
|
2
2
|
:root {
|
|
3
3
|
|
|
4
4
|
--overlay-gap: 8px;
|
|
@@ -1106,6 +1106,9 @@
|
|
|
1106
1106
|
flex-direction: column;
|
|
1107
1107
|
gap: 14px;
|
|
1108
1108
|
padding: 16px;
|
|
1109
|
+
|
|
1110
|
+
container-type: inline-size;
|
|
1111
|
+
min-width: 0;
|
|
1109
1112
|
}
|
|
1110
1113
|
|
|
1111
1114
|
[data-filters] > .tamga-filter-bar {
|
|
@@ -1148,46 +1151,80 @@
|
|
|
1148
1151
|
.tamga-filter-cips {
|
|
1149
1152
|
display: flex;
|
|
1150
1153
|
flex-wrap: wrap;
|
|
1151
|
-
align-items:
|
|
1154
|
+
align-items: center;
|
|
1152
1155
|
gap: 8px;
|
|
1156
|
+
min-width: 0;
|
|
1153
1157
|
}
|
|
1154
1158
|
.tamga-filter-ara-sabit {
|
|
1155
1159
|
display: flex;
|
|
1156
1160
|
flex-direction: column;
|
|
1157
|
-
gap: 6px;
|
|
1158
1161
|
min-width: 0;
|
|
1159
1162
|
max-width: 100%;
|
|
1160
1163
|
flex: 0 0 17.5rem;
|
|
1161
1164
|
}
|
|
1165
|
+
|
|
1166
|
+
.tamga-filter-ara-etiket {
|
|
1167
|
+
position: absolute;
|
|
1168
|
+
width: 1px;
|
|
1169
|
+
height: 1px;
|
|
1170
|
+
overflow: hidden;
|
|
1171
|
+
clip: rect(0 0 0 0);
|
|
1172
|
+
white-space: nowrap;
|
|
1173
|
+
}
|
|
1162
1174
|
.tamga-filter-cip-sira {
|
|
1163
1175
|
display: contents;
|
|
1164
1176
|
}
|
|
1177
|
+
.tamga-filter-cip-temizle {
|
|
1178
|
+
white-space: nowrap;
|
|
1179
|
+
font-size: var(--text-small);
|
|
1180
|
+
}
|
|
1181
|
+
|
|
1165
1182
|
.tamga-filter-cip {
|
|
1166
1183
|
display: inline-flex;
|
|
1167
1184
|
align-items: center;
|
|
1168
|
-
|
|
1185
|
+
flex-shrink: 0;
|
|
1169
1186
|
max-width: 100%;
|
|
1187
|
+
white-space: nowrap;
|
|
1170
1188
|
}
|
|
1171
|
-
|
|
1172
|
-
|
|
1173
|
-
|
|
1174
|
-
|
|
1175
|
-
height: calc(var(--control) - 8px);
|
|
1176
|
-
flex-shrink: 0;
|
|
1189
|
+
|
|
1190
|
+
.tamga-filter-cip[data-set] {
|
|
1191
|
+
gap: 2px;
|
|
1192
|
+
padding-right: 6px;
|
|
1177
1193
|
border: 1.5px solid var(--color-edge-strong);
|
|
1178
1194
|
border-radius: var(--radius-ctl);
|
|
1179
1195
|
background: var(--color-accent-soft);
|
|
1180
1196
|
color: var(--color-accent-soft-ink);
|
|
1181
1197
|
box-shadow: 3px 3px 0 var(--color-edge-strong);
|
|
1198
|
+
}
|
|
1199
|
+
.tamga-filter-cip[data-set] > .tamga-select-panel > .tamga-select-panel-tetik {
|
|
1200
|
+
border: 0;
|
|
1201
|
+
box-shadow: none;
|
|
1202
|
+
background: transparent;
|
|
1203
|
+
padding-right: 4px;
|
|
1204
|
+
}
|
|
1205
|
+
.tamga-filter-cip[data-set] > .tamga-select-panel > .tamga-select-panel-tetik:not(:disabled):hover,
|
|
1206
|
+
.tamga-filter-cip[data-set] > .tamga-select-panel > .tamga-select-panel-tetik:not(:disabled):active {
|
|
1207
|
+
transform: none;
|
|
1208
|
+
box-shadow: none;
|
|
1209
|
+
background: transparent;
|
|
1210
|
+
text-decoration: underline;
|
|
1211
|
+
text-underline-offset: 3px;
|
|
1212
|
+
}
|
|
1213
|
+
.tamga-filter-cip-x {
|
|
1214
|
+
display: grid;
|
|
1215
|
+
place-items: center;
|
|
1216
|
+
width: 18px;
|
|
1217
|
+
height: 18px;
|
|
1218
|
+
flex-shrink: 0;
|
|
1219
|
+
border: 0;
|
|
1220
|
+
border-radius: var(--mark-dot-radius);
|
|
1221
|
+
background: transparent;
|
|
1222
|
+
color: var(--color-accent-soft-ink);
|
|
1223
|
+
box-shadow: none;
|
|
1182
1224
|
cursor: pointer;
|
|
1183
1225
|
}
|
|
1184
1226
|
.tamga-filter-cip-x:hover {
|
|
1185
|
-
|
|
1186
|
-
box-shadow: 4px 4px 0 var(--color-edge-strong);
|
|
1187
|
-
}
|
|
1188
|
-
.tamga-filter-cip-x:active {
|
|
1189
|
-
transform: translate(3px, 3px);
|
|
1190
|
-
box-shadow: 0 0 0 var(--color-edge-strong);
|
|
1227
|
+
background: var(--color-shell);
|
|
1191
1228
|
}
|
|
1192
1229
|
|
|
1193
1230
|
.tamga-select-panel-tam,
|
|
@@ -1204,7 +1241,7 @@
|
|
|
1204
1241
|
text-align: start;
|
|
1205
1242
|
}
|
|
1206
1243
|
|
|
1207
|
-
@
|
|
1244
|
+
@container (max-width: 39.9375rem) {
|
|
1208
1245
|
.tamga-filter-genis {
|
|
1209
1246
|
display: none;
|
|
1210
1247
|
}
|
|
@@ -1214,6 +1251,12 @@
|
|
|
1214
1251
|
|
|
1215
1252
|
.tamga-filter-cips > .tamga-filter-ara-sabit {
|
|
1216
1253
|
flex: 1 1 0;
|
|
1254
|
+
min-width: 0;
|
|
1255
|
+
}
|
|
1256
|
+
|
|
1257
|
+
.tamga-filter-cips > .tamga-btn,
|
|
1258
|
+
.tamga-filter-row > .tamga-btn {
|
|
1259
|
+
flex-shrink: 0;
|
|
1217
1260
|
}
|
|
1218
1261
|
.tamga-filter-cips .tamga-filter-cip:not([data-set]) {
|
|
1219
1262
|
display: none;
|
|
@@ -1222,6 +1265,9 @@
|
|
|
1222
1265
|
display: flex;
|
|
1223
1266
|
order: 2;
|
|
1224
1267
|
flex: 1 1 100%;
|
|
1268
|
+
min-width: 0;
|
|
1269
|
+
max-width: 100%;
|
|
1270
|
+
align-items: center;
|
|
1225
1271
|
flex-wrap: nowrap;
|
|
1226
1272
|
gap: 8px;
|
|
1227
1273
|
overflow-x: auto;
|
|
@@ -1230,8 +1276,12 @@
|
|
|
1230
1276
|
.tamga-filter-cip-sira:empty {
|
|
1231
1277
|
display: none;
|
|
1232
1278
|
}
|
|
1279
|
+
.tamga-filter-cip-sira > .tamga-filter-cip,
|
|
1280
|
+
.tamga-filter-cip-sira > .tamga-filter-cip-temizle {
|
|
1281
|
+
flex: 0 0 auto;
|
|
1282
|
+
}
|
|
1233
1283
|
}
|
|
1234
|
-
@
|
|
1284
|
+
@container (min-width: 40rem) {
|
|
1235
1285
|
.tamga-filter-dar {
|
|
1236
1286
|
display: none;
|
|
1237
1287
|
}
|
|
@@ -3226,9 +3276,11 @@
|
|
|
3226
3276
|
.tamga-select-panel {
|
|
3227
3277
|
position: relative;
|
|
3228
3278
|
display: inline-flex;
|
|
3279
|
+
min-width: 0;
|
|
3229
3280
|
max-width: 100%;
|
|
3230
3281
|
}
|
|
3231
3282
|
.tamga-select-panel-tetik {
|
|
3283
|
+
min-width: 0;
|
|
3232
3284
|
max-width: 100%;
|
|
3233
3285
|
}
|
|
3234
3286
|
.tamga-select-panel-onek {
|
package/dist/styles.css
CHANGED
package/dist/theme.css
CHANGED