Skip to content

Commit 55781c4

Browse files
atabelyceballost
atabel
and
yceballost
authored
feat(mistica-css): TextField / SearchField (#1370)
WEB-2194 --------- Co-authored-by: Ignacio Ceballos (Yayo) <yceballost@gmail.com>
1 parent 4e4ebff commit 55781c4

3 files changed

Lines changed: 178 additions & 40 deletions

File tree

‎css/mistica-common.css‎

Lines changed: 108 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1361,3 +1361,111 @@ button.mistica-display-card:has(.mistica-card__media):active:after {
13611361
.mistica-checkbox-label:has(.mistica-checkbox:disabled) > .mistica-checkbox {
13621362
opacity: initial; /* avoid applying 0.5 opacity twice */
13631363
}
1364+
1365+
/* TextField */
1366+
.mistica-text-field {
1367+
--border-width: 1px;
1368+
--vertical-padding: calc(8px - var(--border-width));
1369+
--gap: 12px;
1370+
--right-padding: calc(16px - var(--border-width));
1371+
--shrinked-label-line-height: 1.25rem;
1372+
--label-scale: 1;
1373+
--icon-size: 1.5rem;
1374+
position: relative;
1375+
overflow: hidden;
1376+
border-radius: var(--mistica-border-radius-input);
1377+
border: var(--border-width) solid var(--mistica-color-inputBorder);
1378+
width: 328px;
1379+
background: var(--mistica-color-backgroundContainer);
1380+
color: var(--mistica-color-textPrimary);
1381+
}
1382+
1383+
@media (max-width: 1023px) {
1384+
.mistica-text-field {
1385+
--shrinked-label-line-height: 1rem;
1386+
width: 100%;
1387+
}
1388+
}
1389+
1390+
.mistica-text-field > * {
1391+
--start-icon-size: 0px;
1392+
--left-padding: calc(12px - var(--border-width) + var(--start-icon-size));
1393+
}
1394+
1395+
.mistica-text-field .mistica-text-field__start-icon ~ * {
1396+
--start-icon-size: calc(var(--icon-size) + var(--gap));
1397+
}
1398+
1399+
.mistica-text-field__start-icon {
1400+
width: var(--icon-size);
1401+
height: var(--icon-size);
1402+
position: absolute;
1403+
top: calc(50% - var(--icon-size) / 2);
1404+
left: 12px;
1405+
color: var(--mistica-color-neutralHigh);
1406+
margin-right: var(--gap);
1407+
pointer-events: none;
1408+
}
1409+
1410+
.mistica-text-field > label {
1411+
position: absolute;
1412+
left: var(--left-padding);
1413+
top: var(--vertical-padding);
1414+
pointer-events: none;
1415+
transform-origin: 0 0;
1416+
font-size: var(--mistica-font-size-3);
1417+
line-height: var(--mistica-line-height-3);
1418+
width: calc(100% - var(--left-padding) - var(--right-padding));
1419+
transform: translateY(calc(var(--shrinked-label-line-height) / 2));
1420+
transition:
1421+
transform 150ms,
1422+
width 150ms;
1423+
color: var(--mistica-color-textSecondary);
1424+
-webkit-line-clamp: 1;
1425+
overflow: hidden;
1426+
display: -webkit-box;
1427+
-webkit-box-orient: vertical;
1428+
}
1429+
1430+
.mistica-text-field:focus-within > label,
1431+
.mistica-text-field > input:not(:placeholder-shown) + label {
1432+
--label-scale: 0.75;
1433+
transform: translateY(0) scale(var(--label-scale));
1434+
line-height: calc(var(--shrinked-label-line-height) / var(--label-scale));
1435+
width: calc((100% - var(--left-padding) - var(--right-padding)) / var(--label-scale));
1436+
color: var(--mistica-color-textActivated);
1437+
}
1438+
1439+
.mistica-text-field > input {
1440+
width: 100%;
1441+
background: transparent;
1442+
border: none;
1443+
appearance: none;
1444+
font-size: var(--mistica-font-size-3);
1445+
line-height: var(--mistica-line-height-3);
1446+
font-weight: 400;
1447+
padding: calc(var(--vertical-padding) + var(--shrinked-label-line-height)) var(--right-padding)
1448+
var(--vertical-padding) var(--left-padding);
1449+
caret-color: var(--mistica-color-textActivated);
1450+
color: inherit;
1451+
border-radius: calc(var(--mistica-border-radius-input) - var(--border-width));
1452+
text-overflow: ellipsis;
1453+
outline: none;
1454+
box-shadow: none;
1455+
}
1456+
1457+
.mistica-text-field > input::placeholder {
1458+
opacity: 0;
1459+
transition: opacity 150ms cubic-bezier(0, 0, 0.2, 1) 0ms;
1460+
}
1461+
1462+
.mistica-text-field > input:focus::placeholder {
1463+
opacity: 0.5;
1464+
}
1465+
1466+
.mistica-text-field > input::-webkit-search-cancel-button {
1467+
appearance: none;
1468+
}
1469+
.mistica-text-field > input::-webkit-search-decoration {
1470+
appearance: none;
1471+
}

‎examples/css/index.html‎

Lines changed: 62 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
</head>
1010
<body data-mistica-skin="movistar" data-mistica-color-scheme="light">
1111
<div id="app" class="mistica-responsive-layout">
12-
<h1 class="mistica-text-title4">Hello mistica css</h1>
12+
<h1 class="mistica-text-title4">Mística CSS</h1>
1313

1414
<div class="controls">
1515
<div>
@@ -46,7 +46,7 @@ <h1 class="mistica-text-title4">Hello mistica css</h1>
4646
<h2 class="mistica-text-title3">Components</h2>
4747

4848
<h3 class="mistica-text-title2">Texts / Titles</h3>
49-
<div class="cards-group">
49+
<div class="horizontal-group">
5050
<div>
5151
<p class="mistica-text-1">Text 1</p>
5252
<p class="mistica-text-2">Text 2</p>
@@ -89,8 +89,36 @@ <h3 class="mistica-text-title2">Tag</h3>
8989
<div class="mistica-tag-error">Error</div>
9090
</div>
9191

92+
<h3 class="mistica-text-title2">TextFields</h3>
93+
<h4 class="mistica-text-title1">TextField</h4>
94+
<div class="vertical-group">
95+
<div class="mistica-text-field">
96+
<input id="text-field-1" type="text" placeholder=" " />
97+
<label for="text-field-1"
98+
>Label too long to fit in one line too long to fit in one line too long to fit in
99+
one line too long to fit in one line</label
100+
>
101+
</div>
102+
<div class="mistica-text-field">
103+
<input id="text-field-1" type="text" placeholder="Some placeholder" />
104+
<label for="text-field-1">Label</label>
105+
</div>
106+
</div>
107+
<h4 class="mistica-text-title1">SearchField</h4>
108+
<div class="mistica-text-field">
109+
<svg class="mistica-text-field__start-icon" viewBox="0 0 24 24" aria-hidden>
110+
<path
111+
fill="currentColor"
112+
d="M10.021 17.83A7.846 7.846 0 0 1 4.472 4.435a7.848 7.848 0 0 1 11.473 10.677l5.704 5.704a.561.561 0 0 1-.793.793l-5.697-5.697a7.8 7.8 0 0 1-5.138 1.918m0-14.571A6.726 6.726 0 0 0 5.265 14.74a6.73 6.73 0 0 0 9.513-.036 6.724 6.724 0 0 0 0-9.473 6.67 6.67 0 0 0-4.757-1.972"
113+
/>
114+
</svg>
115+
<input id="search-field-1" type="search" placeholder=" " />
116+
<label for="search-field-1">Search</label>
117+
</div>
118+
92119
<h3 class="mistica-text-title2">Switch</h3>
93120
<input type="checkbox" class="mistica-switch" />
121+
94122
<h3 class="mistica-text-title2">Checkbox</h3>
95123
<h4 class="mistica-text-title1">Without label</h4>
96124
<input type="checkbox" class="mistica-checkbox" />
@@ -217,36 +245,32 @@ <h3 class="mistica-text-title2">Chip</h3>
217245
</div>
218246

219247
<h3 class="mistica-text-title2">Breadcrumbs</h3>
220-
<div class="cards-group">
221-
<nav class="mistica-breadcrumb">
222-
<ol>
223-
<li>
224-
<a href="/">Home</a>
225-
</li>
226-
<li>
227-
<a href="/">Section</a>
228-
</li>
229-
<li>
230-
<a aria-current="page" href="">Subsection</a>
231-
</li>
232-
</ol>
233-
</nav>
234-
</div>
235-
<div class="cards-group">
236-
<nav class="mistica-breadcrumb">
237-
<ol>
238-
<li>
239-
<a href="/">This is a long link in the breadcrumbs</a>
240-
</li>
241-
<li>
242-
<a href="/">This is a long link in the breadcrumbs</a>
243-
</li>
244-
<li>
245-
<a aria-current="page" href="">Subsection</a>
246-
</li>
247-
</ol>
248-
</nav>
249-
</div>
248+
<nav class="mistica-breadcrumb">
249+
<ol>
250+
<li>
251+
<a href="/">Home</a>
252+
</li>
253+
<li>
254+
<a href="/">Section</a>
255+
</li>
256+
<li>
257+
<a aria-current="page" href="">Subsection</a>
258+
</li>
259+
</ol>
260+
</nav>
261+
<nav class="mistica-breadcrumb">
262+
<ol>
263+
<li>
264+
<a href="/">This is a long link in the breadcrumbs</a>
265+
</li>
266+
<li>
267+
<a href="/">This is a long link in the breadcrumbs</a>
268+
</li>
269+
<li>
270+
<a aria-current="page" href="">Subsection</a>
271+
</li>
272+
</ol>
273+
</nav>
250274

251275
<h3 class="mistica-text-title2">Buttons</h3>
252276
<div>
@@ -456,7 +480,7 @@ <h4 class="mistica-text-title1">Multiple Open</h4>
456480

457481
<h3 class="mistica-text-title2">Cards</h3>
458482
<h4 class="mistica-text-title1">MediaCard / DataCard / SnapCard</h4>
459-
<div class="cards-group">
483+
<div class="horizontal-group">
460484
<section class="mistica-card">
461485
<div
462486
class="mistica-card__asset-floating"
@@ -541,7 +565,7 @@ <h2 class="mistica-card__title">Title</h2>
541565
<p class="mistica-card__description">Description</p>
542566
</section>
543567
</div>
544-
<div class="cards-group">
568+
<div class="horizontal-group">
545569
<a href="#" class="mistica-card">
546570
<img class="mistica-card__media" src="https://picsum.photos/1200/1200" />
547571
<div class="mistica-tag-promo">Headline</div>
@@ -564,7 +588,7 @@ <h2 class="mistica-card__title">Title</h2>
564588
</a>
565589
</div>
566590
<h4 class="mistica-text-title1">NakedCard / SmallNakedCard</h4>
567-
<div class="cards-group">
591+
<div class="horizontal-group">
568592
<section class="mistica-naked-card">
569593
<img class="mistica-card__media" src="https://picsum.photos/1200/1200" />
570594
<div class="mistica-tag-promo">Headline</div>
@@ -596,7 +620,7 @@ <h2 class="mistica-card__title">Title</h2>
596620
<p class="mistica-card__description">Description</p>
597621
</section>
598622
</div>
599-
<div class="cards-group">
623+
<div class="horizontal-group">
600624
<a href="#" class="mistica-naked-card">
601625
<img class="mistica-card__media" src="https://picsum.photos/1200/1200" />
602626
<div class="mistica-tag-promo">Headline</div>
@@ -614,7 +638,7 @@ <h2 class="mistica-card__title">Title</h2>
614638
</div>
615639

616640
<h4 class="mistica-text-title1">DisplayMediaCard / DisplayDataCard</h4>
617-
<div class="cards-group">
641+
<div class="horizontal-group">
618642
<div class="mistica-aspect-ratio" style="--aspect-ratio: 16 / 9">
619643
<section class="mistica-display-card">
620644
<img class="mistica-card__media" src="https://picsum.photos/1200/1200" />
@@ -665,7 +689,7 @@ <h2 class="mistica-card__title">Title</h2>
665689
</section>
666690
</div>
667691
</div>
668-
<div class="cards-group">
692+
<div class="horizontal-group">
669693
<div class="mistica-aspect-ratio" style="--aspect-ratio: 16 / 9">
670694
<a href="#" class="mistica-display-card">
671695
<img class="mistica-card__media" src="https://picsum.photos/1200/1200" />

‎examples/css/style.css‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -70,11 +70,17 @@ select {
7070
margin-top: 16px;
7171
}
7272

73-
.cards-group {
73+
.horizontal-group {
7474
display: flex;
7575
gap: 16px;
7676
}
7777

78-
.cards-group + .cards-group {
78+
.horizontal-group + .horizontal-group {
7979
margin-top: 16px;
8080
}
81+
82+
.vertical-group {
83+
display: flex;
84+
flex-direction: column;
85+
gap: 16px;
86+
}

0 commit comments

Comments
 (0)