Skip to content

Commit 5516b26

Browse files
mrholekmrholek
committed
refactor: improve syntax
1 parent 5227646 commit 5516b26

19 files changed

+291
-454
lines changed

‎src/pug/_mixins/callout.pug‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ mixin callout(name, href)
33
| CoreUI #{name} has been created as an extension of Bootstrap #{name}. #{name} is delivered with some new features, variants, and unique design that matches CoreUI Design System requirements.
44
br
55
br
6-
| For more information please visit our official
7-
|
6+
| For more information please visit our official
87
a(href=href target="_blank") documentation
98
| .

‎src/pug/views/base/accordion.pug‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ block canonical
66
block view
77
+callout('Accordion', 'https://coreui.io/docs/4.0/components/accordion/')
88
.row
9-
.col-12.col-md-6
9+
.col-12
1010
.card.mb-4
1111
.card-header
1212
strong Accordion
@@ -45,7 +45,7 @@ block view
4545
| It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the
4646
code .accordion-body
4747
| , though the transition does limit overflow.
48-
.col-12.col-md-6
48+
.col-12
4949
.card.mb-4
5050
.card-header
5151
strong Accordion

‎src/pug/views/base/breadcrumb.pug‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,13 +12,11 @@ block view
1212
strong Breadcrumb
1313
.card-body
1414
p.text-medium-emphasis.small
15-
| The breadcrumb navigation provides links back to each previous page the user navigated through and shows the current location in a website or an application. You don’t have to add separators, because they automatically added in CSS through
16-
a(href='https://developer.mozilla.org/en-US/docs/Web/CSS/::before')
17-
|
15+
| The breadcrumb navigation provides links back to each previous page the user navigated through and shows the current location in a website or an application. You don’t have to add separators, because they automatically added in CSS through
16+
a(href='https://developer.mozilla.org/en-US/docs/Web/CSS/::before')
1817
code ::before
19-
| and
20-
a(href='https://developer.mozilla.org/en-US/docs/Web/CSS/content')
21-
|
18+
| and
19+
a(href='https://developer.mozilla.org/en-US/docs/Web/CSS/content')
2220
code content
2321
| .
2422
+example()

‎src/pug/views/base/collapse.pug‎

Lines changed: 15 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,11 @@ block view
1010
strong Collapse
1111
.card-body
1212
p.text-medium-emphasis.small
13-
| You can use a link with the
14-
|
13+
| You can use a link with the
1514
code href
16-
| attribute, or a button with the
17-
|
15+
| attribute, or a button with the
1816
code data-coreui-target
19-
| attribute. In both samples, the
20-
|
17+
| attribute. In both samples, the
2118
code data-coreui-toggle="collapse""
2219
| is required.
2320
+example()
@@ -35,33 +32,25 @@ block view
3532
span.small.ms-1 multiple targets
3633
.card-body
3734
p.text-medium-emphasis.small
38-
| A
39-
|
35+
| A
4036
code
41-
='<button>'
42-
| or
43-
|
37+
= '<button>'
38+
| or
4439
code
45-
='<a>'
46-
| can show and hide multiple elements by referencing them with a selector in its
47-
|
40+
= '<a>'
41+
| can show and hide multiple elements by referencing them with a selector in its
4842
code href
49-
| or
50-
|
43+
| or
5144
code data-coreui-target
52-
| attribute. Multiple
53-
|
45+
| attribute. Multiple
5446
code
55-
='<button>'
56-
| or
57-
|
47+
= '<button>'
48+
| or
5849
code
59-
='<a>'
60-
| can show and hide an element if they each reference it with their
61-
|
50+
= '<a>'
51+
| can show and hide an element if they each reference it with their
6252
code href
63-
| or
64-
|
53+
| or
6554
code data-coreui-target
6655
| attribute
6756
+example()

‎src/pug/views/base/list-group.pug‎

Lines changed: 36 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ block canonical
55

66
block view
77
+callout('List group', 'https://coreui.io/docs/4.0/components/list-group/')
8-
.row(data-masonry='{"percentPosition": true }')
9-
.col-sm-12.col-xl-6
8+
.row
9+
.col-12
1010
.card.mb-4
1111
.card-header
1212
strong List group
@@ -20,18 +20,16 @@ block view
2020
li.list-group-item Morbi leo risus
2121
li.list-group-item Porta ac consectetur ac
2222
li.list-group-item Vestibulum at eros
23-
.col-sm-12.col-xl-6
23+
.col-12
2424
.card.mb-4
2525
.card-header
2626
strong List group
2727
span.small.ms-1 active items
2828
.card-body
2929
p.text-medium-emphasis.small
30-
| Attach
31-
|
30+
| Attach
3231
code .active
33-
| to a
34-
|
32+
| to a
3533
code .list-group-item
3634
| to show the current active selection.
3735
+example()
@@ -41,21 +39,18 @@ block view
4139
li.list-group-item Morbi leo risus
4240
li.list-group-item Porta ac consectetur ac
4341
li.list-group-item Vestibulum at eros
44-
.col-sm-12.col-xl-6
42+
.col-12
4543
.card.mb-4
4644
.card-header
4745
strong List group
4846
span.small.ms-1 disabled items
4947
.card-body
5048
p.text-medium-emphasis.small
51-
| Attach
52-
|
49+
| Attach
5350
code .disabled
54-
| to a
55-
|
51+
| to a
5652
code .list-group-item
57-
| to make it appear disabled. Remark that some of the elements with
58-
|
53+
| to make it appear disabled. Remark that some of the elements with
5954
code .disabled
6055
| will also require custom JavaScript to disable their click events (e.g., links).
6156
+example()
@@ -65,41 +60,35 @@ block view
6560
li.list-group-item A third item
6661
li.list-group-item A fourth item
6762
li.list-group-item And a fifth one
68-
.col-sm-12.col-xl-6
63+
.col-12
6964
.card.mb-4
7065
.card-header
7166
strong List group
7267
span.small.ms-1 disabled links
7368
.card-body
7469
.list-group
7570
p.text-medium-emphasis.small
76-
| Use
77-
|
71+
| Use
7872
code
7973
= '<a>'
80-
| s or
81-
|
74+
| s or
8275
code
8376
= '<button>'
8477
| s to create
8578
em actionable
86-
| list group items with hover, disabled, and active states by adding
87-
|
79+
| list group items with hover, disabled, and active states by adding
8880
code .list-group-item-action
89-
| . We separate these pseudo-classes to ensure list groups made of non-interactive elements (like
90-
|
81+
| . We separate these pseudo-classes to ensure list groups made of non-interactive elements (like
9182
code
9283
= '<li>'
93-
| s or
94-
|
84+
| s or
9585
code
9686
= '<div>'
9787
| s) don’t provide a click or tap affordance.
9888
p.text-medium-emphasis.small
9989
| Be sure to
10090
strong
101-
| not use the standard
102-
|
91+
| not use the standard
10392
code .btn
10493
| classes here
10594
| .
@@ -110,26 +99,22 @@ block view
11099
a.list-group-item.list-group-item-action(href='#') A third link item
111100
a.list-group-item.list-group-item-action(href='#') A fourth link item
112101
a.list-group-item.list-group-item-action.disabled(href='#' tabindex='-1' aria-disabled='true') A disabled link item
113-
.col-sm-12.col-xl-6
102+
.col-12
114103
.card.mb-4
115104
.card-header
116105
strong List group
117106
span.small.ms-1 disabled buttons
118107
.card-body
119108
.list-group
120109
p.text-medium-emphasis.small
121-
| With
122-
|
110+
| With
123111
code
124112
= '<button>'
125-
| s, you can also make use of the
126-
|
113+
| s, you can also make use of the
127114
code disabled
128-
| attribute instead of the
129-
|
115+
| attribute instead of the
130116
code .disabled
131-
| class. Sadly,
132-
|
117+
| class. Sadly,
133118
code
134119
= '<a>'
135120
| s don’t support the disabled attribute.
@@ -141,15 +126,14 @@ block view
141126
button.list-group-item.list-group-item-action(type='button') A third button item
142127
button.list-group-item.list-group-item-action(type='button') A fourth button item
143128
button.list-group-item.list-group-item-action(type='button' disabled) A disabled button item
144-
.col-sm-12.col-xl-6
129+
.col-12
145130
.card.mb-4
146131
.card-header
147132
strong List group
148133
span.small.ms-1 flush
149134
.card-body
150135
p.text-medium-emphasis.small
151-
| Add
152-
|
136+
| Add
153137
code .list-group-flush
154138
| to remove some borders and rounded corners to render list group items edge-to-edge in a parent container (e.g., cards).
155139
+example()
@@ -159,28 +143,24 @@ block view
159143
li.list-group-item A third item
160144
li.list-group-item A fourth item
161145
li.list-group-item And a fifth one
162-
.col-sm-12.col-xl-6
146+
.col-12
163147
.card.mb-4
164148
.card-header
165149
strong List group
166150
span.small.ms-1 horizontal
167151
.card-body
168152
p.text-medium-emphasis.small
169-
| Add
170-
|
153+
| Add
171154
code .list-group-horizontal
172-
| to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant
173-
|
155+
| to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant
174156
code .list-group-horizontal-{sm|md|lg|xl|xxl}
175-
| to make a list group horizontal starting at that breakpoint’s
176-
|
157+
| to make a list group horizontal starting at that breakpoint’s
177158
code min-width
178159
| . Currently
179160
strong horizontal list groups cannot be combined with flush list groups.
180161
p.text-medium-emphasis.small
181162
strong ProTip:
182-
| Want equal-width list group items when horizontal? Add
183-
|
163+
| Want equal-width list group items when horizontal? Add
184164
code .flex-fill
185165
| to each list group item.
186166
.list-group
@@ -209,7 +189,7 @@ block view
209189
li.list-group-item An item
210190
li.list-group-item A second item
211191
li.list-group-item A third item
212-
.col-sm-12.col-xl-6
192+
.col-12
213193
.card.mb-4
214194
.card-header
215195
strong List group
@@ -227,21 +207,18 @@ block view
227207
li.list-group-item.list-group-item-info This is a info list group item
228208
li.list-group-item.list-group-item-light This is a light list group item
229209
li.list-group-item.list-group-item-dark This is a dark list group item
230-
.col-sm-12.col-xl-6
210+
.col-12
231211
.card.mb-4
232212
.card-header
233213
strong List group
234214
span.small.ms-1
235-
| contextual with
236-
|
215+
| contextual with
237216
code .action
238217
.card-body
239218
p.text-medium-emphasis.small
240-
| Contextual classes also work with
241-
|
219+
| Contextual classes also work with
242220
code .list-group-item-action
243-
| . Note the addition of the hover styles here not present in the previous example. Also supported is the
244-
|
221+
| . Note the addition of the hover styles here not present in the previous example. Also supported is the
245222
code .active
246223
| state; apply it to indicate an active selection on a contextual list group item.
247224
+example()
@@ -271,7 +248,7 @@ block view
271248
a.list-group-item.list-group-item-action.list-group-item-dark(href='#')
272249
| This is a dark list group
273250
| item
274-
.col-sm-12.col-xl-6
251+
.col-12
275252
.card.mb-4
276253
.card-header
277254
strong List group
@@ -292,7 +269,7 @@ block view
292269
li.list-group-item.d-flex.justify-content-between.align-items-center
293270
| A third list item
294271
span.badge.bg-primary.rounded-pill 1
295-
.col-sm-12.col-xl-6
272+
.col-12
296273
.card.mb-4
297274
.card-header
298275
stron List group
@@ -333,8 +310,7 @@ block view
333310
span.small.ms-1 tab Javascript plugin
334311
.card-body
335312
p.text-medium-emphasis.small
336-
| Use the tab JavaScript plugin—include it individually or through the compiled
337-
|
313+
| Use the tab JavaScript plugin—include it individually or through the compiled
338314
code coreui.js
339315
| file—to extend our list group to create tabbable panes of local content.
340316
+example()

0 commit comments

Comments
 (0)