noph-ui 0.11.7 → 0.11.8
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/chip/FilterChip.svelte +20 -10
- package/package.json +1 -1
|
@@ -30,22 +30,21 @@
|
|
|
30
30
|
class={[
|
|
31
31
|
'np-filter-chip',
|
|
32
32
|
elevated ? 'np-filter-chip-elevated' : 'np-filter-chip-default',
|
|
33
|
-
icon
|
|
34
|
-
selected ? 'np-filter-chip-selected' : '',
|
|
33
|
+
icon ? 'np-filter-chip-icon' : '',
|
|
35
34
|
removable ? 'np-filter-chip-removable' : '',
|
|
36
35
|
disabled ? 'np-filter-chip-disabled' : '',
|
|
37
36
|
attributes.class,
|
|
38
37
|
]}
|
|
39
38
|
>
|
|
40
39
|
<label bind:this={chipLabel} class="np-filter-chip-label">
|
|
41
|
-
{#if icon
|
|
40
|
+
{#if icon}
|
|
42
41
|
<div class="np-chip-icon">
|
|
43
42
|
{@render icon()}
|
|
44
43
|
</div>
|
|
45
44
|
{/if}
|
|
46
|
-
|
|
45
|
+
<div class="np-chip-icon-checked">
|
|
47
46
|
<CheckIcon width={18} height={18} />
|
|
48
|
-
|
|
47
|
+
</div>
|
|
49
48
|
<div class="np-chip-label">{label}</div>
|
|
50
49
|
{#if group !== undefined}
|
|
51
50
|
<input type="checkbox" bind:checked={selected} {value} {name} {disabled} bind:group />
|
|
@@ -95,6 +94,7 @@
|
|
|
95
94
|
display: inline-flex;
|
|
96
95
|
align-items: center;
|
|
97
96
|
height: 2rem;
|
|
97
|
+
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
|
98
98
|
color: var(--np-color-on-surface-variant);
|
|
99
99
|
fill: currentColor;
|
|
100
100
|
gap: 0.5rem;
|
|
@@ -102,10 +102,20 @@
|
|
|
102
102
|
padding-left: 1rem;
|
|
103
103
|
padding-right: 1rem;
|
|
104
104
|
}
|
|
105
|
+
.np-chip-icon-checked {
|
|
106
|
+
display: none;
|
|
107
|
+
}
|
|
108
|
+
.np-filter-chip:has(input:checked) .np-chip-icon-checked {
|
|
109
|
+
display: flex;
|
|
110
|
+
}
|
|
111
|
+
.np-filter-chip:has(input:checked) .np-chip-icon {
|
|
112
|
+
display: none;
|
|
113
|
+
}
|
|
105
114
|
.np-chip-icon {
|
|
106
115
|
color: var(--np-color-primary);
|
|
107
116
|
display: flex;
|
|
108
117
|
}
|
|
118
|
+
.np-filter-chip:has(input:checked) .np-filter-chip-label,
|
|
109
119
|
.np-filter-chip-icon .np-filter-chip-label {
|
|
110
120
|
padding-left: 0.5rem;
|
|
111
121
|
}
|
|
@@ -133,7 +143,7 @@
|
|
|
133
143
|
border-style: solid;
|
|
134
144
|
border-color: var(--np-filter-chip-outline-color, var(--np-color-outline-variant));
|
|
135
145
|
}
|
|
136
|
-
.np-filter-chip
|
|
146
|
+
.np-filter-chip:has(input:checked)::before {
|
|
137
147
|
border-width: 0;
|
|
138
148
|
background-color: var(--np-color-secondary-container);
|
|
139
149
|
}
|
|
@@ -141,10 +151,10 @@
|
|
|
141
151
|
border-width: 0;
|
|
142
152
|
box-shadow: var(--np-elevation-1);
|
|
143
153
|
}
|
|
144
|
-
.np-filter-chip
|
|
154
|
+
.np-filter-chip:has(input:checked) {
|
|
145
155
|
--np-icon-button-icon-color: var(--np-color-on-secondary-container);
|
|
146
156
|
}
|
|
147
|
-
.np-filter-chip
|
|
157
|
+
.np-filter-chip:has(input:checked) .np-filter-chip-label {
|
|
148
158
|
color: var(--np-color-on-secondary-container);
|
|
149
159
|
}
|
|
150
160
|
.np-filter-chip-label:focus-visible {
|
|
@@ -177,10 +187,10 @@
|
|
|
177
187
|
.np-filter-chip-disabled.np-filter-chip-elevated {
|
|
178
188
|
box-shadow: none;
|
|
179
189
|
}
|
|
180
|
-
.np-filter-chip-disabled
|
|
190
|
+
.np-filter-chip-disabled:has(input:checked)::before {
|
|
181
191
|
opacity: 0.12;
|
|
182
192
|
}
|
|
183
|
-
|
|
193
|
+
.np-filter-chip-disabled:has(input:not(:checked)).np-filter-chip-default::after {
|
|
184
194
|
content: '';
|
|
185
195
|
position: absolute;
|
|
186
196
|
inset: 0;
|