Skip to content

Commit ca4aa01

Browse files
atabelatabel
authored
feat(mistica-css): Chip (#1350)
https://jira.tid.es/browse/WEB-2191
1 parent 19aeaf1 commit ca4aa01

2 files changed

Lines changed: 146 additions & 0 deletions

File tree

‎css/mistica-common.css‎

Lines changed: 121 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -265,6 +265,127 @@
265265
}
266266
}
267267

268+
/* Chip */
269+
270+
.mistica-chip {
271+
font-weight: var(--mistica-font-weight-indicator);
272+
font-size: var(--mistica-font-size-2);
273+
line-height: var(--mistica-line-height-2);
274+
color: var(--mistica-color-textPrimary);
275+
border: 1px solid var(--mistica-color-control);
276+
border-radius: var(--mistica-border-radius-indicator);
277+
background: var(--mistica-color-backgroundContainer);
278+
position: relative;
279+
overflow: hidden;
280+
min-width: 72px;
281+
min-height: 40px;
282+
padding: 0 20px;
283+
display: inline-flex;
284+
align-items: center;
285+
justify-content: center;
286+
text-decoration: none;
287+
}
288+
label.mistica-chip {
289+
padding: 0;
290+
border: none;
291+
overflow: visible;
292+
background: transparent;
293+
}
294+
label.mistica-chip > span {
295+
border: 1px solid var(--mistica-color-control);
296+
border-radius: var(--mistica-border-radius-indicator);
297+
background: var(--mistica-color-backgroundContainer);
298+
position: relative;
299+
overflow: hidden;
300+
min-width: 72px;
301+
min-height: 40px;
302+
padding: 0 20px;
303+
display: flex;
304+
align-items: center;
305+
}
306+
307+
@media (min-width: 1024px) {
308+
.mistica-chip,
309+
label.mistica-chip > span {
310+
min-width: 56px;
311+
min-height: 32px;
312+
padding: 0 12px;
313+
}
314+
}
315+
316+
button.mistica-chip,
317+
a.mistica-chip,
318+
label.mistica-chip {
319+
cursor: pointer;
320+
user-select: none;
321+
}
322+
323+
button.mistica-chip:before,
324+
a.mistica-chip:before,
325+
label.mistica-chip > span:before {
326+
position: absolute;
327+
content: '';
328+
top: 0;
329+
left: 0;
330+
width: 100%;
331+
height: 100%;
332+
background: transparent;
333+
transition: background-color 0.1s ease-in-out;
334+
}
335+
336+
button.mistica-chip:hover:before,
337+
a.mistica-chip:hover:before,
338+
label.mistica-chip > input:hover + span:before {
339+
background: var(--mistica-color-backgroundContainerHover);
340+
}
341+
342+
button.mistica-chip:active:before,
343+
a.mistica-chip:active:before,
344+
label.mistica-chip > input:active + span:before {
345+
background: var(--mistica-color-backgroundContainerPressed);
346+
}
347+
348+
label.mistica-chip > input {
349+
appearance: none;
350+
position: absolute;
351+
top: 0;
352+
left: 0;
353+
width: 100%;
354+
height: 100%;
355+
margin: 0;
356+
padding: 0;
357+
border-radius: var(--mistica-border-radius-indicator);
358+
outline-offset: 0;
359+
}
360+
361+
label.mistica-chip > input:checked + span {
362+
color: var(--mistica-color-textActivated);
363+
background: var(--mistica-color-brandLow);
364+
border-color: var(--mistica-color-controlActivated);
365+
}
366+
367+
.mistica-chip > button {
368+
display: flex;
369+
align-items: center;
370+
justify-content: center;
371+
background: transparent;
372+
border: none;
373+
color: inherit;
374+
font: inherit;
375+
cursor: pointer;
376+
padding: 0;
377+
margin: 0;
378+
min-width: 24px;
379+
min-height: 24px;
380+
margin-left: 4px;
381+
margin-right: -4px;
382+
}
383+
384+
.mistica-chip > button > svg {
385+
width: 1rem;
386+
height: 1rem;
387+
}
388+
268389
/* Tag */
269390
[class^='mistica-tag'] {
270391
font-weight: var(--mistica-font-weight-indicator);

‎examples/css/index.html‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,31 @@ <h3 class="mistica-text-title2">Tag</h3>
8383
<div class="mistica-tag-error">Error</div>
8484
</div>
8585

86+
<h3 class="mistica-text-title2">Chip</h3>
87+
<div>
88+
<button class="mistica-chip">Chip button</button>
89+
<a href="#" class="mistica-chip">Chip a</a>
90+
<label class="mistica-chip"><input type="checkbox" /><span>Chip checkbox</span></label>
91+
<span class="mistica-chip"
92+
>Chip closable<button aria-label="cerrar">
93+
<svg viewBox="0 0 24 24">
94+
<path
95+
fill="currentColor"
96+
d="M16.841 17.853a.722.722 0 0 0 .948-1.086L13.022 12l4.766-4.767.065-.074a.722.722 0 0 0-1.086-.947L12 10.978 7.233 6.211l-.074-.064a.722.722 0 0 0-.947 1.086L10.979 12 6.21 16.767l-.064.074a.722.722 0 0 0 1.086.947L12 13.022l4.767 4.767z"
97+
/>
98+
</svg></button
99+
></span>
100+
<label class="mistica-chip"
101+
><input type="radio" name="chip-radio-example" /><span>Chip radio 1</span></label
102+
>
103+
<label class="mistica-chip"
104+
><input type="radio" name="chip-radio-example" /><span>Chip radio 2</span></label
105+
>
106+
<label class="mistica-chip"
107+
><input type="radio" name="chip-radio-example" /><span>Chip radio 3</span></label
108+
>
109+
</div>
110+
86111
<h3 class="mistica-text-title2">Buttons</h3>
87112
<div>
88113
<a class="mistica-button-primary" href="#">Primary</a>

0 commit comments

Comments
 (0)