Skip to content

Commit d26129e

Browse files
atabelatabel
authored
feat(mistica-css): Table implementation (#1352)
WEB-2198 Not all the cases are implemented, for example the boxed case.
1 parent 1c45c55 commit d26129e

2 files changed

Lines changed: 184 additions & 0 deletions

File tree

‎css/mistica-common.css‎

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -938,3 +938,99 @@ button.mistica-display-card:has(.mistica-card__media):active:after {
938938
.mistica-accordion-item[open]::details-content {
939939
height: auto;
940940
}
941+
942+
/* Table */
943+
.mistica-table {
944+
border-collapse: separate;
945+
border-spacing: 0;
946+
position: relative;
947+
width: 100%;
948+
}
949+
950+
.mistica-table thead tr {
951+
font-size: var(--mistica-font-size-1);
952+
line-height: var(--mistica-line-height-1);
953+
font-weight: 500;
954+
text-transform: uppercase;
955+
color: var(--vcolor-textSecondary);
956+
}
957+
958+
.mistica-table tbody td,
959+
.mistica-table tbody th {
960+
color: var(--vcolor-textPrimary);
961+
font-size: var(--mistica-font-size-2);
962+
line-height: var(--mistica-line-height-2);
963+
}
964+
965+
.mistica-table th,
966+
.mistica-table td {
967+
border-bottom: 1px solid var(--mistica-color-divider);
968+
padding: 16px 12px;
969+
height: 56px;
970+
vertical-align: middle;
971+
text-align: left;
972+
}
973+
.mistica-table th:first-child,
974+
.mistica-table td:first-child {
975+
padding-left: 0;
976+
}
977+
.mistica-table th:last-child,
978+
.mistica-table td:last-child {
979+
padding-right: 0;
980+
}
981+
.mistica-table tbody tr:last-child td,
982+
.mistica-table tbody tr:last-child th {
983+
border-bottom: none;
984+
}
985+
986+
@media (max-width: 1023px) {
987+
.mistica-table-mobile-collapsed,
988+
.mistica-table-mobile-collapsed thead,
989+
.mistica-table-mobile-collapsed tbody,
990+
.mistica-table-mobile-collapsed th,
991+
.mistica-table-mobile-collapsed td,
992+
.mistica-table-mobile-collapsed tr {
993+
display: block;
994+
}
995+
.mistica-table-mobile-collapsed tr {
996+
display: flex;
997+
flex-direction: column;
998+
}
999+
.mistica-table-mobile-collapsed tbody th {
1000+
order: -1;
1001+
font-size: var(--mistica-font-size-4);
1002+
line-height: var(--mistica-line-height-4);
1003+
font-weight: var(--mistica-font-weight-cardTitle);
1004+
padding-bottom: 8px;
1005+
}
1006+
.mistica-table-mobile-collapsed tbody td,
1007+
.mistica-table-mobile-collapsed tbody th {
1008+
vertical-align: initial;
1009+
border: none;
1010+
height: auto;
1011+
padding: 0 0 8px 0;
1012+
}
1013+
.mistica-table-mobile-collapsed tbody td:last-child {
1014+
padding-bottom: 0;
1015+
}
1016+
.mistica-table-mobile-collapsed tbody tr {
1017+
padding: 16px 0;
1018+
}
1019+
.mistica-table-mobile-collapsed tbody tr:not(:last-child) {
1020+
border-bottom: 1px solid var(--mistica-color-divider);
1021+
}
1022+
.mistica-table-mobile-collapsed td[data-heading]:before {
1023+
display: block;
1024+
content: attr(data-heading);
1025+
font-size: var(--mistica-font-size-1);
1026+
line-height: var(--mistica-line-height-1);
1027+
font-weight: 500;
1028+
color: var(--vcolor-textSecondary);
1029+
padding-bottom: 4px;
1030+
}
1031+
.mistica-table-mobile-collapsed thead tr {
1032+
position: absolute;
1033+
top: -9999px;
1034+
left: -9999px;
1035+
}
1036+
}

‎examples/css/index.html‎

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

86+
<h3 class="mistica-text-title2">Table</h3>
87+
<h4 class="mistica-text-title1">Column headings</h4>
88+
<table class="mistica-table mistica-table-mobile-collapsed">
89+
<thead>
90+
<tr>
91+
<th>Type of food</th>
92+
<th>Calories</th>
93+
<th>Tasty factor</th>
94+
<th>Price</th>
95+
<th>Average rating</th>
96+
</tr>
97+
</thead>
98+
<tbody>
99+
<tr>
100+
<td data-heading="Type of food">Slice of pizza</td>
101+
<td data-heading="Calories">285</td>
102+
<td data-heading="Tasty factor">95%</td>
103+
<td data-heading="Price">5,00€</td>
104+
<td data-heading="Average rating">9/10</td>
105+
</tr>
106+
<tr>
107+
<td data-heading="Type of food">Hamburger</td>
108+
<td data-heading="Calories">354</td>
109+
<td data-heading="Tasty factor">90%</td>
110+
<td data-heading="Price">6,00€</td>
111+
<td data-heading="Average rating">8/10</td>
112+
</tr>
113+
<tr>
114+
<td data-heading="Type of food">Sushi</td>
115+
<td data-heading="Calories">200</td>
116+
<td data-heading="Tasty factor">85%</td>
117+
<td data-heading="Price">10,00€</td>
118+
<td data-heading="Average rating">10/10</td>
119+
</tr>
120+
<tr>
121+
<td data-heading="Type of food">Salad</td>
122+
<td data-heading="Calories">150</td>
123+
<td data-heading="Tasty factor">70%</td>
124+
<td data-heading="Price">4,00€</td>
125+
<td data-heading="Average rating">7/10</td>
126+
</tr>
127+
<tr>
128+
<td data-heading="Type of food">Ice cream</td>
129+
<td data-heading="Calories">250</td>
130+
<td data-heading="Tasty factor">95%</td>
131+
<td data-heading="Price">3,00€</td>
132+
<td data-heading="Average rating">9/10</td>
133+
</tr>
134+
</tbody>
135+
</table>
136+
<h4 class="mistica-text-title1">Row headings</h4>
137+
<table class="mistica-table mistica-table-mobile-collapsed">
138+
<tbody>
139+
<tr>
140+
<th scope="row">
141+
<span class="mistica-text-3">Sistema operativo y procesador</span>
142+
</th>
143+
<td>
144+
<p>Sistema operativo: Android 15 con One UI 7</p>
145+
<p>Procesador: Snapdragon 8 Elite (3nm) - Ray Tracing</p>
146+
</td>
147+
</tr>
148+
<tr>
149+
<th scope="row"><span class="mistica-text-3">Conectividad</span></th>
150+
<td>
151+
<p>5G</p>
152+
<p>WiFi 802.11 a/b/g/n/ac/ax 2.4 + 5 + 6 Ghz</p>
153+
<p>Bluetooth 5.3</p>
154+
<p>USB type C</p>
155+
<p>GPS</p>
156+
<p>NFC</p>
157+
</td>
158+
</tr>
159+
<tr>
160+
<th scope="row"><span class="mistica-text-3">Características físicas</span></th>
161+
<td>
162+
<p>Tipo de SIM: Dual SIM (SIM1+SIM2 o eSIM)</p>
163+
<p>Dimensiones: 146,9 x 70,5 x 7,2mm</p>
164+
<p>Peso: 162 g</p>
165+
<p>Colores Disponibles: Gris</p>
166+
</td>
167+
</tr>
168+
<tr>
169+
<th scope="row"><span class="mistica-text-3">Pantalla</span></th>
170+
<td>6,2" Dynamic AMOLED 2340x1080 FHD+ (1-120 Hz)</td>
171+
</tr>
172+
</tbody>
173+
</table>
86174
<h3 class="mistica-text-title2">Chip</h3>
87175
<div>
88176
<button class="mistica-chip">Chip button</button>

0 commit comments

Comments
 (0)