testio-tailwind 1.0.0 → 1.1.1
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/package.json +1 -1
- package/src/assets/stylesheets/components/forms.css +5 -2
- package/src/assets/stylesheets/components/tables.css +280 -2
- package/src/assets/stylesheets/tailwind.config.js +15 -0
- package/src/pages/components/tables-cellstyle.pug +285 -0
- package/src/pages/components/tables-grid.pug +258 -0
- package/src/pages/components/tables_cells.pug +57 -0
- package/src/pages/layout/margins.haml +55 -0
- package/src/pages/layout/paddings.haml +86 -0
- package/src/pages/layout/spacing.haml +30 -8
- package/src/static/app.compiled.css +828 -48
- package/src/static/app.compiled.css.map +1 -1
|
@@ -0,0 +1,258 @@
|
|
|
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-gray-200">grid-template-columns: repeat({NUMBER OF COLUMNS}, minmax(12rem, 1fr));</code>
|
|
9
|
+
<br>
|
|
10
|
+
| Example: <code class="bg-gray-200">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-gray-200 .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-gray-200">grid-template-columns: repeat({NUMBER OF COLUMNS}, minmax(12rem, 1fr));</code>
|
|
69
|
+
<br>
|
|
70
|
+
| Example: <code class="bg-gray-200">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-gray-200">grid-template-columns: repeat({NUMBER OF COLUMNS}, minmax(12rem, 1fr));</code>
|
|
155
|
+
<br>
|
|
156
|
+
| Example: <code class="bg-gray-200">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
|
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
---
|
|
2
|
+
tags: ['components']
|
|
3
|
+
title: Table cells
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
p.mb-heading
|
|
7
|
+
| Using the class
|
|
8
|
+
code.bg-gray-lighter.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-gray-200 .cell-full-width
|
|
30
|
+
| to let a cell take all the available space.
|
|
31
|
+
td.wrap.min-w-12
|
|
32
|
+
| Add
|
|
33
|
+
code.bg-gray-200 .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-gray-200 .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-gray-200 .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
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
---
|
|
2
|
+
tags: layout
|
|
3
|
+
title: Margins
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
%dl.list-inline
|
|
7
|
+
%dd xxs
|
|
8
|
+
%dt.flex.flex-row.bg-gray-lightest
|
|
9
|
+
.h-xs.w-xs.bg-gray.mt-xxs.mr-xxs
|
|
10
|
+
.h-xs.w-xs.bg-gray.mr-xxs
|
|
11
|
+
.h-xs.w-xs.bg-gray.mb-xxs
|
|
12
|
+
.h-xs.w-xs.bg-gray.ml-xxs
|
|
13
|
+
%dd xs
|
|
14
|
+
%dt.flex.flex-row.bg-gray-lightest
|
|
15
|
+
.h-xs.w-xs.bg-gray.mt-xs.mr-xs
|
|
16
|
+
.h-xs.w-xs.bg-gray.mr-xs
|
|
17
|
+
.h-xs.w-xs.bg-gray.mb-xs
|
|
18
|
+
.h-xs.w-xs.bg-gray.ml-xs
|
|
19
|
+
%dd sm
|
|
20
|
+
%dt.flex.flex-row.bg-gray-lightest
|
|
21
|
+
.h-xs.w-xs.bg-gray.mt-sm.mr-sm
|
|
22
|
+
.h-xs.w-xs.bg-gray.mr-sm
|
|
23
|
+
.h-xs.w-xs.bg-gray.mb-sm
|
|
24
|
+
.h-xs.w-xs.bg-gray.ml-sm
|
|
25
|
+
%dd md
|
|
26
|
+
%dt.flex.flex-row.bg-gray-lightest
|
|
27
|
+
.h-xs.w-xs.bg-gray.mt-md.mr-md
|
|
28
|
+
.h-xs.w-xs.bg-gray.mr-md
|
|
29
|
+
.h-xs.w-xs.bg-gray.mb-md
|
|
30
|
+
.h-xs.w-xs.bg-gray.ml-md
|
|
31
|
+
%dd spacing
|
|
32
|
+
%dt.flex.flex-row.bg-gray-lightest
|
|
33
|
+
.h-xs.w-xs.bg-gray.mt-spacing.mr-spacing
|
|
34
|
+
.h-xs.w-xs.bg-gray.mr-spacing
|
|
35
|
+
.h-xs.w-xs.bg-gray.mb-spacing
|
|
36
|
+
.h-xs.w-xs.bg-gray.ml-spacing
|
|
37
|
+
%dd lg
|
|
38
|
+
%dt.flex.flex-row.bg-gray-lightest
|
|
39
|
+
.h-xs.w-xs.bg-gray.mt-lg.mr-lg
|
|
40
|
+
.h-xs.w-xs.bg-gray.mr-lg
|
|
41
|
+
.h-xs.w-xs.bg-gray.mb-lg
|
|
42
|
+
.h-xs.w-xs.bg-gray.ml-lg
|
|
43
|
+
%dd xl
|
|
44
|
+
%dt.flex.flex-row.bg-gray-lightest
|
|
45
|
+
.h-xs.w-xs.bg-gray.mt-xl.mr-xl
|
|
46
|
+
.h-xs.w-xs.bg-gray.mr-xl
|
|
47
|
+
.h-xs.w-xs.bg-gray.mb-xl
|
|
48
|
+
.h-xs.w-xs.bg-gray.ml-xl
|
|
49
|
+
%dd xxl
|
|
50
|
+
%dt.flex.flex-row.bg-gray-lightest
|
|
51
|
+
.h-xs.w-xs.bg-gray.mt-xxl.mr-xxl
|
|
52
|
+
.h-xs.w-xs.bg-gray.mr-xxl
|
|
53
|
+
.h-xs.w-xs.bg-gray.mb-xxl
|
|
54
|
+
.h-xs.w-xs.bg-gray.ml-xxl
|
|
55
|
+
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
---
|
|
2
|
+
tags: layout
|
|
3
|
+
title: Paddings
|
|
4
|
+
---
|
|
5
|
+
|
|
6
|
+
%dl.list-inline
|
|
7
|
+
%dd xxs
|
|
8
|
+
%dt.flex.flex-row.items-start.bg-gray-lightest
|
|
9
|
+
.bg-gray-light.mr-xs.pt-xxs
|
|
10
|
+
.bg-gray.h-xs.w-xs
|
|
11
|
+
.bg-gray-light.mr-xs.pb-xxs
|
|
12
|
+
.bg-gray.h-xs.w-xs
|
|
13
|
+
.bg-gray-light.mr-xs.pr-xxs
|
|
14
|
+
.bg-gray.h-xs.w-xs
|
|
15
|
+
.bg-gray-light.mr-xs.pl-xxs
|
|
16
|
+
.bg-gray.h-xs.w-xs
|
|
17
|
+
%dd xs
|
|
18
|
+
%dt.flex.flex-row.items-start.bg-gray-lightest
|
|
19
|
+
.bg-gray-light.mr-xs.pt-xs
|
|
20
|
+
.bg-gray.h-xs.w-xs
|
|
21
|
+
.bg-gray-light.mr-xs.pb-xs
|
|
22
|
+
.bg-gray.h-xs.w-xs
|
|
23
|
+
.bg-gray-light.mr-xs.pr-xs
|
|
24
|
+
.bg-gray.h-xs.w-xs
|
|
25
|
+
.bg-gray-light.mr-xs.pl-xs
|
|
26
|
+
.bg-gray.h-xs.w-xs
|
|
27
|
+
%dd sm
|
|
28
|
+
%dt.flex.flex-row.items-start.bg-gray-lightest
|
|
29
|
+
.bg-gray-light.mr-xs.pt-sm
|
|
30
|
+
.bg-gray.h-xs.w-xs
|
|
31
|
+
.bg-gray-light.mr-xs.pb-sm
|
|
32
|
+
.bg-gray.h-xs.w-xs
|
|
33
|
+
.bg-gray-light.mr-xs.pr-sm
|
|
34
|
+
.bg-gray.h-xs.w-xs
|
|
35
|
+
.bg-gray-light.mr-xs.pl-sm
|
|
36
|
+
.bg-gray.h-xs.w-xs
|
|
37
|
+
%dd md
|
|
38
|
+
%dt.flex.flex-row.items-start.bg-gray-lightest
|
|
39
|
+
.bg-gray-light.mr-xs.pt-md
|
|
40
|
+
.bg-gray.h-xs.w-xs
|
|
41
|
+
.bg-gray-light.mr-xs.pb-md
|
|
42
|
+
.bg-gray.h-xs.w-xs
|
|
43
|
+
.bg-gray-light.mr-xs.pr-md
|
|
44
|
+
.bg-gray.h-xs.w-xs
|
|
45
|
+
.bg-gray-light.mr-xs.pl-md
|
|
46
|
+
.bg-gray.h-xs.w-xs
|
|
47
|
+
%dd spacing
|
|
48
|
+
%dt.flex.flex-row.items-start.bg-gray-lightest
|
|
49
|
+
.bg-gray-light.mr-xs.pt-spacing
|
|
50
|
+
.bg-gray.h-xs.w-xs
|
|
51
|
+
.bg-gray-light.mr-xs.pb-spacing
|
|
52
|
+
.bg-gray.h-xs.w-xs
|
|
53
|
+
.bg-gray-light.mr-xs.pr-spacing
|
|
54
|
+
.bg-gray.h-xs.w-xs
|
|
55
|
+
.bg-gray-light.mr-xs.pl-spacing
|
|
56
|
+
.bg-gray.h-xs.w-xs
|
|
57
|
+
%dd lg
|
|
58
|
+
%dt.flex.flex-row.items-start.bg-gray-lightest
|
|
59
|
+
.bg-gray-light.mr-xs.pt-lg
|
|
60
|
+
.bg-gray.h-xs.w-xs
|
|
61
|
+
.bg-gray-light.mr-xs.pb-lg
|
|
62
|
+
.bg-gray.h-xs.w-xs
|
|
63
|
+
.bg-gray-light.mr-xs.pr-lg
|
|
64
|
+
.bg-gray.h-xs.w-xs
|
|
65
|
+
.bg-gray-light.mr-xs.pl-lg
|
|
66
|
+
.bg-gray.h-xs.w-xs
|
|
67
|
+
%dd xl
|
|
68
|
+
%dt.flex.flex-row.items-start.bg-gray-lightest
|
|
69
|
+
.bg-gray-light.mr-xs.pt-xl
|
|
70
|
+
.bg-gray.h-xs.w-xs
|
|
71
|
+
.bg-gray-light.mr-xs.pb-xl
|
|
72
|
+
.bg-gray.h-xs.w-xs
|
|
73
|
+
.bg-gray-light.mr-xs.pr-xl
|
|
74
|
+
.bg-gray.h-xs.w-xs
|
|
75
|
+
.bg-gray-light.mr-xs.pl-xl
|
|
76
|
+
.bg-gray.h-xs.w-xs
|
|
77
|
+
%dd xxl
|
|
78
|
+
%dt.flex.flex-row.items-start.bg-gray-lightest
|
|
79
|
+
.bg-gray-light.mr-xs.pt-xxl
|
|
80
|
+
.bg-gray.h-xs.w-xs
|
|
81
|
+
.bg-gray-light.mr-xs.pb-xxl
|
|
82
|
+
.bg-gray.h-xs.w-xs
|
|
83
|
+
.bg-gray-light.mr-xs.pr-xxl
|
|
84
|
+
.bg-gray.h-xs.w-xs
|
|
85
|
+
.bg-gray-light.mr-xs.pl-xxl
|
|
86
|
+
.bg-gray.h-xs.w-xs
|
|
@@ -4,27 +4,49 @@ title: Spacing
|
|
|
4
4
|
---
|
|
5
5
|
|
|
6
6
|
%dl.list-inline
|
|
7
|
-
%dd
|
|
7
|
+
%dd xxs
|
|
8
8
|
%dt
|
|
9
9
|
.h-xxs.w-xxs.bg-gray
|
|
10
|
-
%dd
|
|
10
|
+
%dd xs
|
|
11
11
|
%dt
|
|
12
12
|
.h-xs.w-xs.bg-gray
|
|
13
|
-
%dd
|
|
13
|
+
%dd sm
|
|
14
14
|
%dt
|
|
15
15
|
.h-sm.w-sm.bg-gray
|
|
16
|
-
%dd
|
|
16
|
+
%dd md
|
|
17
17
|
%dt
|
|
18
18
|
.h-md.w-md.bg-gray
|
|
19
|
-
%dd
|
|
19
|
+
%dd spacing
|
|
20
20
|
%dt
|
|
21
21
|
.h-spacing.w-spacing.bg-gray
|
|
22
|
-
%dd
|
|
22
|
+
%dd lg
|
|
23
23
|
%dt
|
|
24
24
|
.h-lg.w-lg.bg-gray
|
|
25
|
-
%dd
|
|
25
|
+
%dd xl
|
|
26
26
|
%dt
|
|
27
27
|
.h-xl.w-xl.bg-gray
|
|
28
|
-
%dd
|
|
28
|
+
%dd xxl
|
|
29
29
|
%dt
|
|
30
30
|
.h-xxl.w-xxl.bg-gray
|
|
31
|
+
%dd spacing-2xl
|
|
32
|
+
%dt
|
|
33
|
+
.h-spacing-2xl.w-spacing-2xl.bg-gray
|
|
34
|
+
%dd spacing-3xl
|
|
35
|
+
%dt
|
|
36
|
+
.h-spacing-3xl.w-spacing-3xl.bg-gray
|
|
37
|
+
%dd spacing-4xl
|
|
38
|
+
%dt
|
|
39
|
+
.h-spacing-4xl.w-spacing-4xl.bg-gray
|
|
40
|
+
%dd spacing-5xl
|
|
41
|
+
%dt
|
|
42
|
+
.h-spacing-5xl.w-spacing-5xl.bg-gray
|
|
43
|
+
%dd spacing-6xl
|
|
44
|
+
%dt
|
|
45
|
+
.h-spacing-6xl.w-spacing-6xl.bg-gray
|
|
46
|
+
%dd spacing-7xl
|
|
47
|
+
%dt
|
|
48
|
+
.h-spacing-7xl.w-spacing-7xl.bg-gray
|
|
49
|
+
%dd spacing-8xl
|
|
50
|
+
%dt
|
|
51
|
+
.h-spacing-8xl.w-spacing-8xl.bg-gray
|
|
52
|
+
|