testio-tailwind 3.21.0 → 3.23.0
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/AI_DESIGN_SYSTEM_REFERENCE.md +2618 -0
- package/package.json +1 -1
- package/src/_data/navigation.json +4 -0
- package/src/_includes/example-header-centered.njk +53 -0
- package/src/_includes/header.njk +8 -8
- package/src/_includes/page-with-sidebar.njk +10 -1
- package/src/_layouts/page-example-centered.njk +19 -0
- package/src/_layouts/page-example-darkmode.njk +19 -0
- package/src/assets/scripts/app.js +27 -0
- package/src/assets/stylesheets/components/actionbar.css +8 -0
- package/src/assets/stylesheets/components/designsystem/designsystem-styles.css +4 -2
- package/src/assets/stylesheets/components/header.css +22 -0
- package/src/assets/stylesheets/components/tables.css +4 -0
- package/src/pages/buttons/block.haml +1 -0
- package/src/pages/buttons/button_group.haml +1 -0
- package/src/pages/buttons/buttons-lg.haml +1 -0
- package/src/pages/buttons/buttons-round.haml +1 -0
- package/src/pages/buttons/buttons-sm.haml +1 -0
- package/src/pages/buttons/buttons-xl.haml +1 -0
- package/src/pages/buttons/buttons.haml +1 -0
- package/src/pages/buttons/buttons_input.haml +4 -0
- package/src/pages/buttons/dropdown-menu.haml +2 -11
- package/src/pages/buttons/square-buttons.haml +15 -0
- package/src/pages/components/alerts.haml +1 -0
- package/src/pages/components/banner_cards.haml +1 -0
- package/src/pages/components/card_badges.haml +8 -7
- package/src/pages/components/cards.haml +15 -22
- package/src/pages/components/cards_customer.haml +1 -0
- package/src/pages/components/cards_fixedwidth.haml +7 -0
- package/src/pages/components/cards_iconheader.haml +1 -0
- package/src/pages/components/cards_tester.haml +1 -0
- package/src/pages/components/descriptionlist.haml +12 -3
- package/src/pages/components/devices.haml +1 -0
- package/src/pages/components/drawer.haml +1 -0
- package/src/pages/components/drawer_filter.haml +1 -0
- package/src/pages/components/emptystate.haml +2 -0
- package/src/pages/{buttons → components}/info_popover.haml +2 -1
- package/src/pages/components/listitem_with_actionbar.haml +1 -0
- package/src/pages/components/listitem_with_footer.haml +1 -0
- package/src/pages/components/listitems.haml +1 -0
- package/src/pages/components/listitems_badge.haml +1 -0
- package/src/pages/components/listitems_collapsable.haml +1 -0
- package/src/pages/components/listitems_nested.haml +1 -0
- package/src/pages/components/listitems_selectable.haml +1 -0
- package/src/pages/components/loading_spinner.haml +1 -0
- package/src/pages/components/metasidebar.haml +1 -0
- package/src/pages/components/modal_details.haml +3 -1
- package/src/pages/components/notifications.haml +2 -1
- package/src/pages/components/user_item.haml +1 -0
- package/src/pages/forms/attachments.pug +71 -0
- package/src/pages/forms/checkboxes.haml +1 -0
- package/src/pages/forms/checkboxes_devices.haml +1 -0
- package/src/pages/forms/date-time.haml +1 -0
- package/src/pages/forms/dropzone.pug +38 -0
- package/src/pages/forms/flatpickr.haml +1 -1
- package/src/pages/forms/form-addon.haml +1 -0
- package/src/pages/forms/form-card.haml +1 -0
- package/src/pages/forms/form_grid.haml +1 -0
- package/src/pages/forms/form_hint.haml +1 -0
- package/src/pages/forms/forms.haml +1 -0
- package/src/pages/forms/radiobuttons.haml +1 -0
- package/src/pages/forms/rating_scale.haml +1 -0
- package/src/pages/forms/search.haml +1 -0
- package/src/pages/forms/selectable_token.haml +1 -0
- package/src/pages/forms/selectable_token_browsers.haml +1 -0
- package/src/pages/forms/selectable_token_lg.haml +1 -0
- package/src/pages/forms/selectable_token_xl.haml +1 -0
- package/src/pages/forms/textarea.haml +4 -0
- package/src/pages/forms/toggle-buttons.haml +1 -0
- package/src/pages/forms/toggle-switch.haml +1 -0
- package/src/pages/forms/trix_editor.pug +1 -0
- package/src/pages/icons/bug-icons.haml +1 -0
- package/src/pages/icons/index.njk +18 -14
- package/src/pages/icons/status-icons.haml +1 -0
- package/src/pages/layout/app_layout.haml +5 -1
- package/src/pages/layout/centered_layout.haml +26 -0
- package/src/pages/layout/darkmode.haml +9 -0
- package/src/pages/layout/margins.haml +1 -0
- package/src/pages/layout/max_width.haml +2 -1
- package/src/pages/layout/paddings.haml +1 -0
- package/src/pages/layout/spacing.haml +1 -0
- package/src/pages/{examples → layouts}/agenticqa_splitview.haml +1 -1
- package/src/pages/layouts/layout-actionbar.haml +45 -0
- package/src/pages/{examples → layouts}/layout-basic.haml +3 -2
- package/src/pages/layouts/layout-centered.haml +26 -0
- package/src/pages/{examples → layouts}/layout-chat.haml +3 -2
- package/src/pages/{examples → layouts}/layout-customer.haml +3 -2
- package/src/pages/{examples/layout-sidebar-actionbar.haml → layouts/layout-darkmode.haml} +20 -18
- package/src/pages/{examples → layouts}/layout-form-sidebar-actionbar-metasidebar.haml +5 -228
- package/src/pages/{examples/layout-sidebar-actionbar-metasidebar.haml → layouts/layout-full.haml} +3 -2
- package/src/pages/{examples → layouts}/layout-manager.haml +3 -2
- package/src/pages/{examples → layouts}/layout-metasidebar.haml +3 -2
- package/src/pages/{examples → layouts}/layout-sidebar.haml +3 -2
- package/src/pages/{examples → layouts}/layout-tester.haml +3 -2
- package/src/pages/{examples → layouts}/splitview-metasidebar.haml +3 -3
- package/src/pages/{examples → layouts}/splitview-testcases.haml +2 -2
- package/src/pages/{examples → layouts}/splitview.haml +3 -3
- package/src/pages/navigation/header-centered.haml +77 -0
- package/src/pages/navigation/header-manager.haml +1 -0
- package/src/pages/navigation/header-tester.haml +1 -0
- package/src/pages/navigation/header.haml +1 -0
- package/src/pages/navigation/header_customer.haml +1 -0
- package/src/pages/navigation/header_tester_epam.haml +1 -0
- package/src/pages/navigation/product_dropdown.haml +2 -0
- package/src/pages/navigation/radio_tabs.haml +1 -0
- package/src/pages/navigation/sidebar-manager.haml +2 -1
- package/src/pages/navigation/sidebar-tester-elements.haml +1 -0
- package/src/pages/navigation/sidebar-tester-seatlimitation.haml +1 -1
- package/src/pages/navigation/sidebar-tester.haml +1 -1
- package/src/pages/navigation/sidebar.haml +1 -0
- package/src/pages/navigation/sidebar_collapsables.haml +1 -0
- package/src/pages/navigation/sidebar_customer.haml +1 -0
- package/src/pages/navigation/tabnavigation.haml +1 -0
- package/src/pages/navigation/tabnavigation_actions.haml +1 -0
- package/src/pages/navigation/tabnavigation_pills.haml +1 -0
- package/src/pages/navigation/tabnavigation_sm.haml +1 -0
- package/src/pages/navigation/test-header-tester.haml +2 -0
- package/src/pages/tables/index.njk +7 -0
- package/src/pages/tables/tables-cellstyle.haml +38 -0
- package/src/pages/tables/tables-grid.haml +31 -0
- package/src/pages/tables/tables.haml +16 -0
- package/src/pages/tables/tables_alternating.haml +27 -0
- package/src/pages/tables/tables_borders.haml +22 -0
- package/src/pages/tables/tables_cells.haml +50 -0
- package/src/pages/tables/tables_footer.haml +27 -0
- package/src/pages/tables/tables_formrow.haml +31 -0
- package/src/pages/tables/tables_header.haml +22 -0
- package/src/pages/{components → tables}/tables_linked.haml +11 -10
- package/src/pages/typography/link_with_icon.haml +10 -2
- package/src/pages/typography/linked_icon.haml +6 -0
- package/src/pages/typography/section_header.haml +1 -0
- package/src/pages/typography/section_header_actions.haml +1 -0
- package/src/pages/typography/text_with_icon.haml +3 -2
- package/utils/filters.js +161 -0
- package/CLAUDE_DESIGN_SYSTEM_REFERENCE.md +0 -1978
- package/src/pages/buttons/link-with-icon.haml +0 -13
- package/src/pages/components/tables-cellstyle.pug +0 -285
- package/src/pages/components/tables-grid.pug +0 -258
- package/src/pages/components/tables.haml +0 -57
- package/src/pages/components/tables_cells.pug +0 -57
- package/src/pages/components/tables_formrow.haml +0 -55
- package/src/pages/examples/layout-actionbar.haml +0 -268
- package/src/pages/forms/uploads.pug +0 -101
|
@@ -1,285 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
tags: ['components']
|
|
3
|
-
title: Tables - Cell style
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
.space-y-5
|
|
7
|
-
|
|
8
|
-
.overflow-x-auto
|
|
9
|
-
table.table-standard.table-cellstyle
|
|
10
|
-
thead
|
|
11
|
-
tr
|
|
12
|
-
th Key
|
|
13
|
-
th
|
|
14
|
-
.language-code.sm.mr-icon-spacing.text-language-source CD-SM
|
|
15
|
-
span Source
|
|
16
|
-
th.missing
|
|
17
|
-
.language-code.sm.mr-icon-spacing.text-language-target DE
|
|
18
|
-
span German
|
|
19
|
-
th.inprogress
|
|
20
|
-
.language-code.sm.mr-icon-spacing.text-language-target FR
|
|
21
|
-
span French
|
|
22
|
-
th.completed
|
|
23
|
-
.language-code.sm.mr-icon-spacing.text-language-target UK
|
|
24
|
-
span Ukrainian
|
|
25
|
-
th
|
|
26
|
-
.inline-block.icon.icon-cloud-upload.mr-icon-spacing
|
|
27
|
-
span Export to
|
|
28
|
-
|
|
29
|
-
tbody
|
|
30
|
-
tr
|
|
31
|
-
td Key
|
|
32
|
-
td Text to translate
|
|
33
|
-
td Text zur Übersetzung
|
|
34
|
-
td Texte à traduire
|
|
35
|
-
td.completed текст для перекладу
|
|
36
|
-
td my-file.yaml
|
|
37
|
-
tr
|
|
38
|
-
td Key
|
|
39
|
-
td.wrap
|
|
40
|
-
| Add
|
|
41
|
-
code.bg-tag .wrap
|
|
42
|
-
| to allow line breaks within a cell.
|
|
43
|
-
| Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
|
|
44
|
-
td.missing Missing
|
|
45
|
-
td.inprogress In progress
|
|
46
|
-
td.completed Completed
|
|
47
|
-
td my-file.yaml
|
|
48
|
-
tr
|
|
49
|
-
td Key
|
|
50
|
-
td Text to translate
|
|
51
|
-
td.missing Missing
|
|
52
|
-
td.inprogress In progress
|
|
53
|
-
td.completed Completed
|
|
54
|
-
td my-file.yaml
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
h2.pt-5 Table cellstyle with checkboxes
|
|
58
|
-
|
|
59
|
-
.overflow-x-auto
|
|
60
|
-
table.table-standard.table-cellstyle
|
|
61
|
-
thead
|
|
62
|
-
tr
|
|
63
|
-
th Key
|
|
64
|
-
th
|
|
65
|
-
.language-code.sm.mr-icon-spacing.text-language-source CD-SM
|
|
66
|
-
span Source
|
|
67
|
-
th.missing
|
|
68
|
-
.form-check.sm
|
|
69
|
-
input#checkde1(type='checkbox')
|
|
70
|
-
label(for='checkde1')
|
|
71
|
-
.language-code.sm.mr-icon-spacing.text-language-target DE
|
|
72
|
-
span German
|
|
73
|
-
th.inprogress
|
|
74
|
-
.form-check.sm
|
|
75
|
-
input#checkfr1(type='checkbox')
|
|
76
|
-
label(for='checkfr1')
|
|
77
|
-
.language-code.sm.mr-icon-spacing.text-language-target FR
|
|
78
|
-
span French
|
|
79
|
-
th.completed
|
|
80
|
-
.form-check.sm
|
|
81
|
-
input#checkuk1(type='checkbox')
|
|
82
|
-
label(for='checkuk1')
|
|
83
|
-
.language-code.sm.mr-icon-spacing.text-language-target UK
|
|
84
|
-
span Ukrainian
|
|
85
|
-
th
|
|
86
|
-
.inline-block.icon.icon-cloud-upload.mr-icon-spacing
|
|
87
|
-
span Export to
|
|
88
|
-
|
|
89
|
-
tbody
|
|
90
|
-
tr
|
|
91
|
-
td Key
|
|
92
|
-
td Text to translate
|
|
93
|
-
td
|
|
94
|
-
.form-check.sm
|
|
95
|
-
input#checkde2(type='checkbox')
|
|
96
|
-
label(for='checkde2') Text zur Übersetzung
|
|
97
|
-
td
|
|
98
|
-
.form-check.sm
|
|
99
|
-
input#checkfr2(type='checkbox')
|
|
100
|
-
label(for='checkfr2') Texte à traduire
|
|
101
|
-
td.completed
|
|
102
|
-
.form-check.sm
|
|
103
|
-
input#checkuk2(type='checkbox')
|
|
104
|
-
label(for='checkuk2') текст для перекладу
|
|
105
|
-
td my-file.yaml
|
|
106
|
-
tr
|
|
107
|
-
td Key
|
|
108
|
-
td Text to translate
|
|
109
|
-
td.missing
|
|
110
|
-
.form-check.sm
|
|
111
|
-
input#checkde3(type='checkbox')
|
|
112
|
-
label(for='checkde3') Missing
|
|
113
|
-
td.inprogress
|
|
114
|
-
.form-check.sm
|
|
115
|
-
input#checkfr3(type='checkbox')
|
|
116
|
-
label(for='checkfr3') In progress
|
|
117
|
-
td.completed
|
|
118
|
-
.form-check.sm
|
|
119
|
-
input#checkuk3(type='checkbox')
|
|
120
|
-
label(for='checkuk3') Completed
|
|
121
|
-
td my-file.yaml
|
|
122
|
-
tr
|
|
123
|
-
td Key
|
|
124
|
-
td Text to translate
|
|
125
|
-
td.missing
|
|
126
|
-
.form-check.sm
|
|
127
|
-
input#checkde4(type='checkbox')
|
|
128
|
-
label(for='checkde4') Missing
|
|
129
|
-
td.inprogress
|
|
130
|
-
.form-check.sm
|
|
131
|
-
input#checkfr4(type='checkbox')
|
|
132
|
-
label(for='checkfr4') In progress
|
|
133
|
-
td.completed
|
|
134
|
-
.form-check.sm
|
|
135
|
-
input#checkuk4(type='checkbox')
|
|
136
|
-
label(for='checkuk4') Completed
|
|
137
|
-
td my-file.yaml
|
|
138
|
-
tr
|
|
139
|
-
td Key
|
|
140
|
-
td Text to translate
|
|
141
|
-
td
|
|
142
|
-
.form-check.sm
|
|
143
|
-
input#checkde5(type='checkbox', checked='')
|
|
144
|
-
label(for='checkde5') Text zur Übersetzung
|
|
145
|
-
td
|
|
146
|
-
.form-check.sm
|
|
147
|
-
input#checkfr5(type='checkbox', checked='')
|
|
148
|
-
label(for='checkfr5') Texte à traduire
|
|
149
|
-
td.completed
|
|
150
|
-
.form-check.sm
|
|
151
|
-
input#checkuk5(type='checkbox', checked='')
|
|
152
|
-
label(for='checkuk5') текст для перекладу
|
|
153
|
-
td my-file.yaml
|
|
154
|
-
tr
|
|
155
|
-
td Key
|
|
156
|
-
td Text to translate
|
|
157
|
-
td.missing
|
|
158
|
-
.form-check.sm
|
|
159
|
-
input#checkde6(type='checkbox', checked='')
|
|
160
|
-
label(for='checkde6') Missing
|
|
161
|
-
td.inprogress
|
|
162
|
-
.form-check.sm
|
|
163
|
-
input#checkfr6(type='checkbox', checked='')
|
|
164
|
-
label(for='checkfr6') In progress
|
|
165
|
-
td.completed
|
|
166
|
-
.form-check.sm
|
|
167
|
-
input#checkuk6(type='checkbox', checked='')
|
|
168
|
-
label(for='checkuk6') Completed
|
|
169
|
-
td my-file.yaml
|
|
170
|
-
|
|
171
|
-
h2.pt-5 Table cellstyle with editable cells
|
|
172
|
-
|
|
173
|
-
.overflow-x-auto
|
|
174
|
-
table.table-standard.table-cellstyle
|
|
175
|
-
thead
|
|
176
|
-
tr
|
|
177
|
-
th Key
|
|
178
|
-
th
|
|
179
|
-
.language-code.sm.mr-icon-spacing.text-language-source CD-SM
|
|
180
|
-
span Source
|
|
181
|
-
th.missing
|
|
182
|
-
.language-code.sm.mr-icon-spacing.text-language-target DE
|
|
183
|
-
span German
|
|
184
|
-
th.inprogress
|
|
185
|
-
.language-code.sm.mr-icon-spacing.text-language-target FR
|
|
186
|
-
span French
|
|
187
|
-
|
|
188
|
-
tbody
|
|
189
|
-
tr
|
|
190
|
-
td Key
|
|
191
|
-
td.cell-editable
|
|
192
|
-
.cell-content-editable Text to translate
|
|
193
|
-
td.cell-editable
|
|
194
|
-
.cell-content-editable Text zur Übersetzung
|
|
195
|
-
td.cell-editable
|
|
196
|
-
.cell-edit-state
|
|
197
|
-
form.edit-form
|
|
198
|
-
textarea(rows="1")
|
|
199
|
-
| The height of this textarea grows with its content
|
|
200
|
-
.cell-actions
|
|
201
|
-
button.btn.btn-success.white(name='button', type='submit')
|
|
202
|
-
.icon.icon-sm.icon-check-circle-filled
|
|
203
|
-
a.btn.btn-danger(href='#')
|
|
204
|
-
.icon.icon-sm.icon-cross-circle-filled
|
|
205
|
-
tr
|
|
206
|
-
td Key
|
|
207
|
-
td.wrap.cell-editable
|
|
208
|
-
.cell-content-editable
|
|
209
|
-
p
|
|
210
|
-
| Add
|
|
211
|
-
code.bg-tag .wrap
|
|
212
|
-
| to allow line breaks within a cell.
|
|
213
|
-
| Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
|
|
214
|
-
td.missing.cell-editable.wrap
|
|
215
|
-
a.cell-content-editable ## En-tête ## **Bold** *italic* > quelques citations 1. Élément de la liste 2. Élément de la liste ![entrer la description de l'image ici][1] [1] : https://eu-images.contentstack.com/v3/assets/bltd7ba2d79b5449a0e/blt14d22b920d2f1fb2/63d1080ea8a9cb64655f0a65/cslogo.png?branch=test
|
|
216
|
-
td.inprogress.cell-editable
|
|
217
|
-
.cell-edit-state
|
|
218
|
-
form.edit-form
|
|
219
|
-
textarea(rows="1")
|
|
220
|
-
| The height of this textarea grows with its content
|
|
221
|
-
.cell-actions
|
|
222
|
-
button.btn.btn-success.white(name='button', type='submit')
|
|
223
|
-
.icon.icon-sm.icon-check-circle-filled
|
|
224
|
-
a.btn.btn-danger(href='#')
|
|
225
|
-
.icon.icon-sm.icon-cross-circle-filled
|
|
226
|
-
tr
|
|
227
|
-
td Key
|
|
228
|
-
td.cell-editable
|
|
229
|
-
.cell-content-editable Text to translate
|
|
230
|
-
td.missing.cell-editable
|
|
231
|
-
.cell-content-editable Missing
|
|
232
|
-
td.inprogress.cell-editable
|
|
233
|
-
.cell-content-editable In progress
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
h2.pt-5 With action column at the end
|
|
237
|
-
.overflow-x-auto
|
|
238
|
-
table.table-standard.table-cellstyle
|
|
239
|
-
thead
|
|
240
|
-
tr
|
|
241
|
-
th ID
|
|
242
|
-
th Name
|
|
243
|
-
th Roles
|
|
244
|
-
th Language
|
|
245
|
-
th Status
|
|
246
|
-
th
|
|
247
|
-
|
|
248
|
-
tbody
|
|
249
|
-
tr
|
|
250
|
-
td #123321
|
|
251
|
-
td.cell-full-width Master Translator
|
|
252
|
-
td.tags
|
|
253
|
-
span.tag Candidate
|
|
254
|
-
td Check
|
|
255
|
-
td Check
|
|
256
|
-
td.action-cell
|
|
257
|
-
.btn.btn-sm.btn-primary
|
|
258
|
-
.icon.icon-review.mr-icon-spacing
|
|
259
|
-
| Review
|
|
260
|
-
.btn.btn-sm.btn-primary
|
|
261
|
-
.icon.icon-pencil.mr-icon-spacing
|
|
262
|
-
| Edit
|
|
263
|
-
tr
|
|
264
|
-
td #123321
|
|
265
|
-
td.cell-full-width Master Translator
|
|
266
|
-
td.tags
|
|
267
|
-
span.tag Candidate
|
|
268
|
-
td Check
|
|
269
|
-
td Check
|
|
270
|
-
td.action-cell
|
|
271
|
-
.btn.btn-sm.btn-primary
|
|
272
|
-
.icon.icon-pencil.mr-icon-spacing
|
|
273
|
-
| Edit
|
|
274
|
-
tr
|
|
275
|
-
td #123321
|
|
276
|
-
td.cell-full-width Master Translator
|
|
277
|
-
td.tags
|
|
278
|
-
span.tag Candidate
|
|
279
|
-
span.tag Another tag
|
|
280
|
-
td Check
|
|
281
|
-
td Check
|
|
282
|
-
td.action-cell
|
|
283
|
-
.btn.btn-sm.btn-primary
|
|
284
|
-
.icon.icon-pencil.mr-icon-spacing
|
|
285
|
-
| Edit
|
|
@@ -1,258 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
tags: ['components']
|
|
3
|
-
title: Tables - Grid
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
.space-y-5
|
|
7
|
-
p
|
|
8
|
-
| You need to set inline styles with the number of columns: <code class="bg-tag">grid-template-columns: repeat({NUMBER OF COLUMNS}, minmax(12rem, 1fr));</code>
|
|
9
|
-
<br>
|
|
10
|
-
| Example: <code class="bg-tag">grid-template-columns: repeat(6, minmax(12rem, 1fr));</code>
|
|
11
|
-
.overflow-x-auto
|
|
12
|
-
table.table-standard.table-cellstyle.table-grid(style="grid-template-columns: repeat(6, minmax(12rem, 1fr));")
|
|
13
|
-
thead
|
|
14
|
-
tr
|
|
15
|
-
th Key
|
|
16
|
-
th
|
|
17
|
-
.language-code.sm.mr-icon-spacing.text-language-source CD-SM
|
|
18
|
-
span Source
|
|
19
|
-
th.missing
|
|
20
|
-
.language-code.sm.mr-icon-spacing.text-language-target DE
|
|
21
|
-
span German
|
|
22
|
-
th.inprogress
|
|
23
|
-
.language-code.sm.mr-icon-spacing.text-language-target FR
|
|
24
|
-
span French
|
|
25
|
-
th.completed
|
|
26
|
-
.language-code.sm.mr-icon-spacing.text-language-target UK
|
|
27
|
-
span Ukrainian
|
|
28
|
-
th
|
|
29
|
-
.inline-block.icon.icon-cloud-upload.mr-icon-spacing
|
|
30
|
-
span Export to
|
|
31
|
-
|
|
32
|
-
tbody
|
|
33
|
-
tr
|
|
34
|
-
td Key
|
|
35
|
-
td Text to translate with some extra lorem ipsum
|
|
36
|
-
td Text zur Übersetzung mit etwas extra lorem ipsum
|
|
37
|
-
td Texte à traduire avec un petit lorem ipsum
|
|
38
|
-
td.completed текст для перекладу lorem ipsum
|
|
39
|
-
td my-file.yaml
|
|
40
|
-
tr
|
|
41
|
-
td Key
|
|
42
|
-
td
|
|
43
|
-
| No need to add anything
|
|
44
|
-
| to allow line breaks within a cell. It wraps automatically.
|
|
45
|
-
| Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
|
|
46
|
-
td.missing Missing
|
|
47
|
-
td.inprogress In progress
|
|
48
|
-
td.completed Completed
|
|
49
|
-
td my-file.yaml
|
|
50
|
-
tr
|
|
51
|
-
td.pre
|
|
52
|
-
| Add
|
|
53
|
-
code.bg-tag .pre
|
|
54
|
-
| to show preformatted white space.
|
|
55
|
-
| Multi
|
|
56
|
-
| Line
|
|
57
|
-
| textbox
|
|
58
|
-
| Cat and dog
|
|
59
|
-
td Text to translate
|
|
60
|
-
td.missing Missing
|
|
61
|
-
td.inprogress In progress
|
|
62
|
-
td.completed Completed
|
|
63
|
-
td my-file.yaml
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
h2.pt-5 Table cellstyle, grid, with checkboxes
|
|
67
|
-
p
|
|
68
|
-
| You need to set inline styles with the number of columns: <code class="bg-tag">grid-template-columns: repeat({NUMBER OF COLUMNS}, minmax(12rem, 1fr));</code>
|
|
69
|
-
<br>
|
|
70
|
-
| Example: <code class="bg-tag">grid-template-columns: repeat(6, minmax(12rem, 1fr));</code>
|
|
71
|
-
.overflow-x-auto
|
|
72
|
-
table.table-standard.table-cellstyle.table-grid(style="grid-template-columns: repeat(6, minmax(12rem, 1fr));")
|
|
73
|
-
thead
|
|
74
|
-
tr
|
|
75
|
-
th Key
|
|
76
|
-
th
|
|
77
|
-
.language-code.sm.mr-icon-spacing.text-language-source CD-SM
|
|
78
|
-
span Source
|
|
79
|
-
th.missing
|
|
80
|
-
.form-check.sm
|
|
81
|
-
input#checkde1grid(type='checkbox')
|
|
82
|
-
label(for='checkde1grid')
|
|
83
|
-
.language-code.sm.mr-icon-spacing.text-language-target DE
|
|
84
|
-
span German
|
|
85
|
-
th.inprogress
|
|
86
|
-
.form-check.sm
|
|
87
|
-
input#checkfr1grid(type='checkbox')
|
|
88
|
-
label(for='checkfr1grid')
|
|
89
|
-
.language-code.sm.mr-icon-spacing.text-language-target FR
|
|
90
|
-
span French
|
|
91
|
-
th.completed
|
|
92
|
-
.form-check.sm
|
|
93
|
-
input#checkuk1grid(type='checkbox')
|
|
94
|
-
label(for='checkuk1grid')
|
|
95
|
-
.language-code.sm.mr-icon-spacing.text-language-target UK
|
|
96
|
-
span Ukrainian
|
|
97
|
-
th
|
|
98
|
-
.inline-block.icon.icon-cloud-upload.mr-icon-spacing
|
|
99
|
-
span Export to
|
|
100
|
-
|
|
101
|
-
tbody
|
|
102
|
-
tr
|
|
103
|
-
td Key
|
|
104
|
-
td Text to translate with some extra lorem ipsum
|
|
105
|
-
td
|
|
106
|
-
.form-check.sm
|
|
107
|
-
input#checkde2grid(type='checkbox')
|
|
108
|
-
label(for='checkde2grid') Text zur Übersetzung mit etwas extra lorem ipsum
|
|
109
|
-
td
|
|
110
|
-
.form-check.sm
|
|
111
|
-
input#checkfr2grid(type='checkbox')
|
|
112
|
-
label(for='checkfr2grid') Texte à traduire avec un petit lorem ipsum
|
|
113
|
-
td.completed
|
|
114
|
-
.form-check.sm
|
|
115
|
-
input#checkuk2grid(type='checkbox')
|
|
116
|
-
label(for='checkuk2grid') текст для перекладу lorem ipsum
|
|
117
|
-
td my-file.yaml
|
|
118
|
-
tr
|
|
119
|
-
td Key
|
|
120
|
-
td Text to translate
|
|
121
|
-
td.missing
|
|
122
|
-
.form-check.sm
|
|
123
|
-
input#checkde3grid(type='checkbox')
|
|
124
|
-
label(for='checkde3grid') Missing
|
|
125
|
-
td.inprogress
|
|
126
|
-
.form-check.sm
|
|
127
|
-
input#checkfr3grid(type='checkbox')
|
|
128
|
-
label(for='checkfr3grid') In progress
|
|
129
|
-
td.completed
|
|
130
|
-
.form-check.sm
|
|
131
|
-
input#checkuk3grid(type='checkbox')
|
|
132
|
-
label(for='checkuk3grid') Completed
|
|
133
|
-
td my-file.yaml
|
|
134
|
-
tr
|
|
135
|
-
td Key
|
|
136
|
-
td Text to translate
|
|
137
|
-
td.missing
|
|
138
|
-
.form-check.sm
|
|
139
|
-
input#checkde4grid(type='checkbox')
|
|
140
|
-
label(for='checkde4grid') Missing
|
|
141
|
-
td.inprogress
|
|
142
|
-
.form-check.sm
|
|
143
|
-
input#checkfr4grid(type='checkbox')
|
|
144
|
-
label(for='checkfr4grid') In progress
|
|
145
|
-
td.completed
|
|
146
|
-
.form-check.sm
|
|
147
|
-
input#checkuk4grid(type='checkbox')
|
|
148
|
-
label(for='checkuk4grid') Completed
|
|
149
|
-
td my-file.yaml
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
h2.pt-5 Table cellstyle, grid, with editable cells
|
|
153
|
-
p
|
|
154
|
-
| You need to set inline styles with the number of columns: <code class="bg-tag">grid-template-columns: repeat({NUMBER OF COLUMNS}, minmax(12rem, 1fr));</code>
|
|
155
|
-
<br>
|
|
156
|
-
| Example: <code class="bg-tag">grid-template-columns: repeat(6, minmax(12rem, 1fr));</code>
|
|
157
|
-
|
|
158
|
-
.overflow-x-auto
|
|
159
|
-
table.table-standard.table-cellstyle.table-grid(style="grid-template-columns: repeat(6, minmax(12rem, 1fr));")
|
|
160
|
-
thead
|
|
161
|
-
tr
|
|
162
|
-
th Key
|
|
163
|
-
th
|
|
164
|
-
.language-code.sm.mr-icon-spacing.text-language-source CD-SM
|
|
165
|
-
span Source
|
|
166
|
-
th
|
|
167
|
-
.language-code.sm.mr-icon-spacing.text-language-target DE
|
|
168
|
-
span German
|
|
169
|
-
details.dropdown-actions.dropright.ml-auto
|
|
170
|
-
summary
|
|
171
|
-
a.link-with.icon
|
|
172
|
-
span.icon.icon-xs.icon-menu
|
|
173
|
-
.popover-menu(role='menu', aria-orientation='vertical', aria-labelledby='popover-menu')
|
|
174
|
-
a.popover-action(href='#', role='menuitem')
|
|
175
|
-
span.icon.icon-check-circle-filled.mr-icon-spacing
|
|
176
|
-
| Popover action
|
|
177
|
-
|
|
178
|
-
th
|
|
179
|
-
.language-code.sm.mr-icon-spacing.text-language-target FR
|
|
180
|
-
span French
|
|
181
|
-
details.dropdown-actions.dropright.ml-auto
|
|
182
|
-
summary
|
|
183
|
-
a.link-with.icon
|
|
184
|
-
span.icon.icon-xs.icon-menu
|
|
185
|
-
.popover-menu(role='menu', aria-orientation='vertical', aria-labelledby='popover-menu')
|
|
186
|
-
a.popover-action(href='#', role='menuitem')
|
|
187
|
-
span.icon.icon-check-circle-filled.mr-icon-spacing
|
|
188
|
-
| Popover action
|
|
189
|
-
|
|
190
|
-
th
|
|
191
|
-
.language-code.sm.mr-icon-spacing.text-language-target UK
|
|
192
|
-
span Ukrainian
|
|
193
|
-
details.dropdown-actions.dropright.ml-auto
|
|
194
|
-
summary
|
|
195
|
-
a.link-with.icon
|
|
196
|
-
span.icon.icon-xs.icon-menu
|
|
197
|
-
.popover-menu(role='menu', aria-orientation='vertical', aria-labelledby='popover-menu')
|
|
198
|
-
a.popover-action(href='#', role='menuitem')
|
|
199
|
-
span.icon.icon-check-circle-filled.mr-icon-spacing
|
|
200
|
-
| Popover action
|
|
201
|
-
|
|
202
|
-
th
|
|
203
|
-
.inline-block.icon.icon-cloud-upload.mr-icon-spacing
|
|
204
|
-
span Export to
|
|
205
|
-
|
|
206
|
-
tbody
|
|
207
|
-
tr
|
|
208
|
-
td Key
|
|
209
|
-
td.cell-editable
|
|
210
|
-
.cell-content-editable Text to translate with some extra lorem ipsum
|
|
211
|
-
td.cell-editable
|
|
212
|
-
.cell-content-editable Text zur Übersetzung mit etwas extra lorem ipsum
|
|
213
|
-
td.cell-editable
|
|
214
|
-
.cell-content-editable Texte à traduire avec un petit lorem ipsum
|
|
215
|
-
td.cell-editable
|
|
216
|
-
form.cell-edit-state
|
|
217
|
-
textarea(rows="1")
|
|
218
|
-
| The height of this textarea grows with its content
|
|
219
|
-
.cell-actions
|
|
220
|
-
button.btn.btn-success.white(name='button', type='submit')
|
|
221
|
-
.icon.icon-sm.icon-check-circle-filled
|
|
222
|
-
a.btn.btn-danger(href='#')
|
|
223
|
-
.icon.icon-sm.icon-cross-circle-filled
|
|
224
|
-
td my-file.yaml
|
|
225
|
-
tr
|
|
226
|
-
td Key
|
|
227
|
-
td.wrap.cell-editable
|
|
228
|
-
.cell-content-editable
|
|
229
|
-
| No need to add anything
|
|
230
|
-
| to allow line breaks within a cell. It wraps automatically.
|
|
231
|
-
| Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
|
|
232
|
-
td.missing.cell-editable
|
|
233
|
-
.cell-content-editable Missing
|
|
234
|
-
td.inprogress.cell-editable
|
|
235
|
-
form.cell-edit-state
|
|
236
|
-
textarea(rows="1")
|
|
237
|
-
| The height of this textarea grows with its content
|
|
238
|
-
.cell-actions
|
|
239
|
-
button.btn.btn-success.white(name='button', type='submit')
|
|
240
|
-
.icon.icon-sm.icon-check-circle-filled
|
|
241
|
-
a.btn.btn-danger(href='#')
|
|
242
|
-
.icon.icon-sm.icon-cross-circle-filled
|
|
243
|
-
td.completed.cell-editable
|
|
244
|
-
.cell-content-editable Completed
|
|
245
|
-
td my-file.yaml
|
|
246
|
-
tr
|
|
247
|
-
td Key
|
|
248
|
-
td.wrap.cell-editable
|
|
249
|
-
turbo-frame#paragraph_84054
|
|
250
|
-
a.cell-content-editable(href='/customers/test_io/continuous_projects/1/paragraphs/84054/edit')
|
|
251
|
-
| Marquer tous les documents comme étant révisés
|
|
252
|
-
td.missing.cell-editable
|
|
253
|
-
.cell-content-editable Missing
|
|
254
|
-
td.inprogress.cell-editable
|
|
255
|
-
.cell-content-editable In progress
|
|
256
|
-
td.completed.cell-editable
|
|
257
|
-
.cell-content-editable Completed
|
|
258
|
-
td my-file.yaml
|
|
@@ -1,57 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
tags: components
|
|
3
|
-
title: Tables
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
%h5.mb-heading Standard table
|
|
7
|
-
%table.table
|
|
8
|
-
%tr
|
|
9
|
-
%td Cell content
|
|
10
|
-
%td Cell content
|
|
11
|
-
%td Cell content
|
|
12
|
-
%tr
|
|
13
|
-
%td Cell content Lorem ipsum dolor sit amet, consetetur sadipscing.
|
|
14
|
-
%td Cell content
|
|
15
|
-
%td.cell-with-buttons
|
|
16
|
-
%button.btn.btn-primary action
|
|
17
|
-
|
|
18
|
-
%h5.mb-heading Table with borders and alternating rows
|
|
19
|
-
%table.table.table-bordered.table-striped
|
|
20
|
-
%tr
|
|
21
|
-
%td Cell content
|
|
22
|
-
%td Cell content
|
|
23
|
-
%td.cell-with-buttons
|
|
24
|
-
%button.btn.btn-primary action
|
|
25
|
-
%tr
|
|
26
|
-
%td Cell content
|
|
27
|
-
%td Cell content
|
|
28
|
-
%td.cell-with-buttons
|
|
29
|
-
%button.btn.btn-primary action
|
|
30
|
-
%tr
|
|
31
|
-
%td Cell content Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
|
|
32
|
-
%td Cell content
|
|
33
|
-
%td.cell-with-buttons
|
|
34
|
-
%button.btn.btn-primary action
|
|
35
|
-
|
|
36
|
-
%h5.mb-heading Table with header
|
|
37
|
-
%table.table.table-bordered.table-striped
|
|
38
|
-
%thead
|
|
39
|
-
%th Table header
|
|
40
|
-
%th Table header
|
|
41
|
-
%th Table header
|
|
42
|
-
%tbody
|
|
43
|
-
%tr
|
|
44
|
-
%td Cell content Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
|
|
45
|
-
%td Cell content
|
|
46
|
-
%td.cell-with-buttons
|
|
47
|
-
%button.btn.btn-primary action
|
|
48
|
-
%tr
|
|
49
|
-
%td Cell content Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
|
|
50
|
-
%td Cell content
|
|
51
|
-
%td.cell-with-buttons
|
|
52
|
-
%button.btn.btn-primary action
|
|
53
|
-
%tr
|
|
54
|
-
%td Cell content
|
|
55
|
-
%td Cell content Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
|
|
56
|
-
%td.cell-with-buttons
|
|
57
|
-
%button.btn.btn-primary action
|
|
@@ -1,57 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
tags: ['components']
|
|
3
|
-
title: Table cells
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
p.mb-heading
|
|
7
|
-
| Using the class
|
|
8
|
-
code.bg-tag.mx-xxs table-standard
|
|
9
|
-
| enables more table cell behaviors.
|
|
10
|
-
|
|
11
|
-
.space-y-10
|
|
12
|
-
|
|
13
|
-
table.table-standard
|
|
14
|
-
tbody
|
|
15
|
-
tr
|
|
16
|
-
td A cell with some lorem ipsum
|
|
17
|
-
td Cell content
|
|
18
|
-
td A small cell
|
|
19
|
-
tr
|
|
20
|
-
td This cell will take as much space as it's content
|
|
21
|
-
td Cell content
|
|
22
|
-
td The last cell will take up all the free space
|
|
23
|
-
|
|
24
|
-
table.table-standard
|
|
25
|
-
tbody
|
|
26
|
-
tr
|
|
27
|
-
td.cell-full-width
|
|
28
|
-
| Add
|
|
29
|
-
code.bg-tag .cell-full-width
|
|
30
|
-
| to let a cell take all the available space.
|
|
31
|
-
td.wrap.min-w-12
|
|
32
|
-
| Add
|
|
33
|
-
code.bg-tag .wrap
|
|
34
|
-
| to allow line breaks within a cell.
|
|
35
|
-
td Another cell content
|
|
36
|
-
td € 40.00
|
|
37
|
-
tr
|
|
38
|
-
td.cell-full-width.pre
|
|
39
|
-
| Add
|
|
40
|
-
code.bg-tag .pre
|
|
41
|
-
| to show preformatted white space.
|
|
42
|
-
| Multi
|
|
43
|
-
| Line
|
|
44
|
-
| textbox
|
|
45
|
-
| Cat and dog
|
|
46
|
-
td.wrap.min-w-spacing-2xl
|
|
47
|
-
| Wrapping cells need a
|
|
48
|
-
code.bg-tag .min-w
|
|
49
|
-
| rule to not be squished.
|
|
50
|
-
td Another cell content
|
|
51
|
-
td € 999.00
|
|
52
|
-
tfoot
|
|
53
|
-
tr
|
|
54
|
-
td Table footer
|
|
55
|
-
td Empty cell
|
|
56
|
-
td Sum
|
|
57
|
-
td € 999.00
|