Skip to content

Commit cd8ee87

Browse files
mrholekmrholek
committed
refactor: change .text-medium-emphasis to .text-body-secondary 
1 parent 26982f8 commit cd8ee87

File tree

38 files changed

+256
-258
lines changed

38 files changed

+256
-258
lines changed

‎src/components/DocsLink.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ const DocsLink = (props) => {
1616
target="_blank"
1717
className="card-header-action"
1818
>
19-
<small className="text-medium-emphasis">{text || 'docs'}</small>
19+
<small className="text-body-secondary">{text || 'docs'}</small>
2020
</CLink>
2121
</div>
2222
)

‎src/views/base/accordion/Accordion.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ const Accordion = () => {
2121
<strong>React Accordion</strong>
2222
</CCardHeader>
2323
<CCardBody>
24-
<p className="text-medium-emphasis small">
24+
<p className="text-body-secondary small">
2525
Click the accordions below to expand/collapse the accordion content.
2626
</p>
2727
<DocsExample href="components/accordion">
@@ -71,7 +71,7 @@ const Accordion = () => {
7171
<strong>React Accordion</strong> <small>Flush</small>
7272
</CCardHeader>
7373
<CCardBody>
74-
<p className="text-medium-emphasis small">
74+
<p className="text-body-secondary small">
7575
Add <code>flush</code> to remove the default <code>background-color</code>, some
7676
borders, and some rounded corners to render accordions edge-to-edge with their parent
7777
container.
@@ -123,7 +123,7 @@ const Accordion = () => {
123123
<strong>React Accordion</strong> <small>Always open</small>
124124
</CCardHeader>
125125
<CCardBody>
126-
<p className="text-medium-emphasis small">
126+
<p className="text-body-secondary small">
127127
Add <code>alwaysOpen</code> property to make accordion items stay open when another
128128
item is opened.
129129
</p>

‎src/views/base/breadcrumbs/Breadcrumbs.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ const Breadcrumbs = () => {
2020
<strong>React Breadcrumb</strong>
2121
</CCardHeader>
2222
<CCardBody>
23-
<p className="text-medium-emphasis small">
23+
<p className="text-body-secondary small">
2424
The breadcrumb navigation provides links back to each previous page the user navigated
2525
through and shows the current location in a website or an application. You don’t have
2626
to add separators, because they automatically added in CSS through{' '}

‎src/views/base/cards/Cards.js

+43-43
Large diffs are not rendered by default.

‎src/views/base/carousels/Carousels.js

+6-6
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ const Carousels = () => {
3030
<strong>Carousel</strong> <small>Slide only</small>
3131
</CCardHeader>
3232
<CCardBody>
33-
<p className="text-medium-emphasis small">Here’s a carousel with slides</p>
33+
<p className="text-body-secondary small">Here’s a carousel with slides</p>
3434
<DocsExample href="components/carousel">
3535
<CCarousel>
3636
<CCarouselItem>
@@ -53,7 +53,7 @@ const Carousels = () => {
5353
<strong>Carousel</strong> <small>With controls</small>
5454
</CCardHeader>
5555
<CCardBody>
56-
<p className="text-medium-emphasis small">
56+
<p className="text-body-secondary small">
5757
Adding in the previous and next controls by <code>controls</code> property.
5858
</p>
5959
<DocsExample href="components/carousel/#with-controls">
@@ -78,7 +78,7 @@ const Carousels = () => {
7878
<strong>Carousel</strong> <small>With indicators</small>
7979
</CCardHeader>
8080
<CCardBody>
81-
<p className="text-medium-emphasis small">
81+
<p className="text-body-secondary small">
8282
You can attach the indicators to the carousel, lengthwise the controls, too.
8383
</p>
8484
<DocsExample href="components/carousel/#with-indicators">
@@ -103,7 +103,7 @@ const Carousels = () => {
103103
<strong>Carousel</strong> <small>With captions</small>
104104
</CCardHeader>
105105
<CCardBody>
106-
<p className="text-medium-emphasis small">
106+
<p className="text-body-secondary small">
107107
You can add captions to slides with the <code>&lt;CCarouselCaption&gt;</code> element
108108
within any <code>&lt;CCarouselItem&gt;</code>. They can be immediately hidden on
109109
smaller viewports, as shown below, with optional{' '}
@@ -145,7 +145,7 @@ const Carousels = () => {
145145
<strong>Carousel</strong> <small>Crossfade</small>
146146
</CCardHeader>
147147
<CCardBody>
148-
<p className="text-medium-emphasis small">
148+
<p className="text-body-secondary small">
149149
Add <code>transition=&#34;crossfade&#34;</code> to your carousel to animate slides
150150
with a fade transition instead of a slide.
151151
</p>
@@ -171,7 +171,7 @@ const Carousels = () => {
171171
<strong>Carousel</strong> <small>Dark variant</small>
172172
</CCardHeader>
173173
<CCardBody>
174-
<p className="text-medium-emphasis small">
174+
<p className="text-body-secondary small">
175175
Add <code>dark</code> property to the <code>CCarousel</code> for darker controls,
176176
indicators, and captions. Controls have been inverted from their default white fill
177177
with the <code>filter</code> CSS property. Captions and controls have additional Sass

‎src/views/base/collapses/Collapses.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ const Collapses = () => {
1616
<strong>React Collapse</strong>
1717
</CCardHeader>
1818
<CCardBody>
19-
<p className="text-medium-emphasis small">You can use a link or a button component.</p>
19+
<p className="text-body-secondary small">You can use a link or a button component.</p>
2020
<DocsExample href="components/collapse">
2121
<CButton
2222
href="#"
@@ -47,7 +47,7 @@ const Collapses = () => {
4747
<strong>React Collapse</strong> <small> Horizontal</small>
4848
</CCardHeader>
4949
<CCardBody>
50-
<p className="text-medium-emphasis small">You can use a link or a button component.</p>
50+
<p className="text-body-secondary small">You can use a link or a button component.</p>
5151
<DocsExample href="components/collapse#horizontal">
5252
<CButton
5353
className="mb-3"
@@ -77,7 +77,7 @@ const Collapses = () => {
7777
<strong>React Collapse</strong> <small> multi target</small>
7878
</CCardHeader>
7979
<CCardBody>
80-
<p className="text-medium-emphasis small">
80+
<p className="text-body-secondary small">
8181
A <code>&lt;CButton&gt;</code> can show and hide multiple elements.
8282
</p>
8383
<DocsExample href="components/collapse#multiple-targets">

‎src/views/base/list-groups/ListGroups.js

+15-15
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ const ListGroups = () => {
2121
<strong>React List Group</strong> <small>Basic example</small>
2222
</CCardHeader>
2323
<CCardBody>
24-
<p className="text-medium-emphasis small">
24+
<p className="text-body-secondary small">
2525
The default list group is an unordered list with items and the proper CSS classes.
2626
Build upon it with the options that follow, or with your CSS as required.
2727
</p>
@@ -43,7 +43,7 @@ const ListGroups = () => {
4343
<strong>React List Group</strong> <small>Active items</small>
4444
</CCardHeader>
4545
<CCardBody>
46-
<p className="text-medium-emphasis small">
46+
<p className="text-body-secondary small">
4747
Add <code>active</code> boolean property to a <code>&lt;CListGroupItem&gt;</code> to
4848
show the current active selection.
4949
</p>
@@ -65,7 +65,7 @@ const ListGroups = () => {
6565
<strong>React List Group</strong> <small>Disabled items</small>
6666
</CCardHeader>
6767
<CCardBody>
68-
<p className="text-medium-emphasis small">
68+
<p className="text-body-secondary small">
6969
Add <code>disabled</code> boolean property to a <code>&lt;CListGroupItem&gt;</code> to
7070
make it appear disabled.
7171
</p>
@@ -87,7 +87,7 @@ const ListGroups = () => {
8787
<strong>React List Group</strong> <small>Links and buttons</small>
8888
</CCardHeader>
8989
<CCardBody>
90-
<p className="text-medium-emphasis small">
90+
<p className="text-body-secondary small">
9191
Use <code>&lt;a&gt;</code>s or <code>&lt;button&gt;</code>s to create{' '}
9292
<em>actionable</em> list group items with hover, disabled, and active states by adding{' '}
9393
<code>component=&#34;a|button&#34;</code>. We separate these pseudo-classes to ensure
@@ -123,7 +123,7 @@ const ListGroups = () => {
123123
<strong>React List Group</strong> <small>Flush</small>
124124
</CCardHeader>
125125
<CCardBody>
126-
<p className="text-medium-emphasis small">
126+
<p className="text-body-secondary small">
127127
Add <code>flush</code> boolean property to remove some borders and rounded corners to
128128
render list group items edge-to-edge in a parent container (e.g., cards).
129129
</p>
@@ -145,7 +145,7 @@ const ListGroups = () => {
145145
<strong>React List Group</strong> <small>Horizontal</small>
146146
</CCardHeader>
147147
<CCardBody>
148-
<p className="text-medium-emphasis small">
148+
<p className="text-body-secondary small">
149149
Add <code>layout=&#34;horizontal&#34;</code> to change the layout of list group items
150150
from vertical to horizontal across all breakpoints. Alternatively, choose a responsive
151151
variant <code>.layout=&#34;horizontal-&#123;sm | md | lg | xl | xxl&#125;&#34;</code>{' '}
@@ -171,7 +171,7 @@ const ListGroups = () => {
171171
<strong>React List Group</strong> <small>Contextual classes</small>
172172
</CCardHeader>
173173
<CCardBody>
174-
<p className="text-medium-emphasis small">
174+
<p className="text-body-secondary small">
175175
Use contextual classes to style list items with a stateful background and color.
176176
</p>
177177
<DocsExample href="components/list-group/#contextual-classes">
@@ -193,7 +193,7 @@ const ListGroups = () => {
193193
))}
194194
</CListGroup>
195195
</DocsExample>
196-
<p className="text-medium-emphasis small">
196+
<p className="text-body-secondary small">
197197
Contextual classes also work with <code>&lt;a&gt;</code>s or{' '}
198198
<code>&lt;button&gt;</code>s. Note the addition of the hover styles here not present
199199
in the previous example. Also supported is the <code>active</code> state; apply it to
@@ -229,7 +229,7 @@ const ListGroups = () => {
229229
<strong>React List Group</strong> <small>With badges</small>
230230
</CCardHeader>
231231
<CCardBody>
232-
<p className="text-medium-emphasis small">
232+
<p className="text-body-secondary small">
233233
Add badges to any list group item to show unread counts, activity, and more.
234234
</p>
235235
<DocsExample href="components/list-group/#with-badges">
@@ -263,7 +263,7 @@ const ListGroups = () => {
263263
<strong>React List Group</strong> <small>Custom content</small>
264264
</CCardHeader>
265265
<CCardBody>
266-
<p className="text-medium-emphasis small">
266+
<p className="text-body-secondary small">
267267
Add nearly any HTML within, even for linked list groups like the one below, with the
268268
help of <a href="https://coreui.io/docs/utilities/flex/">flexbox utilities</a>.
269269
</p>
@@ -283,24 +283,24 @@ const ListGroups = () => {
283283
<CListGroupItem component="a" href="#">
284284
<div className="d-flex w-100 justify-content-between">
285285
<h5 className="mb-1">List group item heading</h5>
286-
<small className="text-medium-emphasis">3 days ago</small>
286+
<small className="text-body-secondary">3 days ago</small>
287287
</div>
288288
<p className="mb-1">
289289
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus
290290
varius blandit.
291291
</p>
292-
<small className="text-medium-emphasis">Donec id elit non mi porta.</small>
292+
<small className="text-body-secondary">Donec id elit non mi porta.</small>
293293
</CListGroupItem>
294294
<CListGroupItem component="a" href="#">
295295
<div className="d-flex w-100 justify-content-between">
296296
<h5 className="mb-1">List group item heading</h5>
297-
<small className="text-medium-emphasis">3 days ago</small>
297+
<small className="text-body-secondary">3 days ago</small>
298298
</div>
299299
<p className="mb-1">
300300
Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus
301301
varius blandit.
302302
</p>
303-
<small className="text-medium-emphasis">Donec id elit non mi porta.</small>
303+
<small className="text-body-secondary">Donec id elit non mi porta.</small>
304304
</CListGroupItem>
305305
</CListGroup>
306306
</DocsExample>
@@ -313,7 +313,7 @@ const ListGroups = () => {
313313
<strong>React List Group</strong> <small>Checkboxes and radios</small>
314314
</CCardHeader>
315315
<CCardBody>
316-
<p className="text-medium-emphasis small">
316+
<p className="text-body-secondary small">
317317
Place CoreUI&#39;s checkboxes and radios within list group items and customize as
318318
needed.
319319
</p>

‎src/views/base/navs/Navs.js

+11-11
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ const Navs = () => {
2424
<strong>React Navs</strong> <small>Base navs</small>
2525
</CCardHeader>
2626
<CCardBody>
27-
<p className="text-medium-emphasis small">
27+
<p className="text-body-secondary small">
2828
The base <code>.nav</code> component is built with flexbox and provide a strong
2929
foundation for building all types of navigation components. It includes some style
3030
overrides (for working with lists), some link padding for larger hit areas, and basic
@@ -50,7 +50,7 @@ const Navs = () => {
5050
</CNavItem>
5151
</CNav>
5252
</DocsExample>
53-
<p className="text-medium-emphasis small">
53+
<p className="text-body-secondary small">
5454
Classes are used throughout, so your markup can be super flexible. Use{' '}
5555
<code>&lt;ul&gt;</code>s like above, <code>&lt;ol&gt;</code> if the order of your
5656
items is important, or roll your own with a <code>&lt;nav&gt;</code> element. Because
@@ -78,15 +78,15 @@ const Navs = () => {
7878
<strong>React Navs</strong> <small>Horizontal alignment</small>
7979
</CCardHeader>
8080
<CCardBody>
81-
<p className="text-medium-emphasis small">
81+
<p className="text-body-secondary small">
8282
Change the horizontal alignment of your nav with{' '}
8383
<a href="https://coreui.io/docs/layout/grid/#horizontal-alignment">
8484
flexbox utilities
8585
</a>
8686
. By default, navs are left-aligned, but you can easily change them to center or right
8787
aligned.
8888
</p>
89-
<p className="text-medium-emphasis small">
89+
<p className="text-body-secondary small">
9090
Centered with <code>.justify-content-center</code>:
9191
</p>
9292
<DocsExample href="components/nav#horizontal-alignment">
@@ -109,7 +109,7 @@ const Navs = () => {
109109
</CNavItem>
110110
</CNav>
111111
</DocsExample>
112-
<p className="text-medium-emphasis small">
112+
<p className="text-body-secondary small">
113113
Right-aligned with <code>.justify-content-end</code>:
114114
</p>
115115
<DocsExample href="components/nav#base-nav">
@@ -141,7 +141,7 @@ const Navs = () => {
141141
<strong>React Navs</strong> <small>Vertical</small>
142142
</CCardHeader>
143143
<CCardBody>
144-
<p className="text-medium-emphasis small">
144+
<p className="text-body-secondary small">
145145
Stack your navigation by changing the flex item direction with the{' '}
146146
<code>.flex-column</code> utility. Need to stack them on some viewports but not
147147
others? Use the responsive versions (e.g., <code>.flex-sm-column</code>).
@@ -175,7 +175,7 @@ const Navs = () => {
175175
<strong>React Navs</strong> <small>Tabs</small>
176176
</CCardHeader>
177177
<CCardBody>
178-
<p className="text-medium-emphasis small">
178+
<p className="text-body-secondary small">
179179
Takes the basic nav from above and adds the <code>variant=&#34;tabs&#34;</code> class
180180
to generate a tabbed interface
181181
</p>
@@ -208,7 +208,7 @@ const Navs = () => {
208208
<strong>React Navs</strong> <small>Pills</small>
209209
</CCardHeader>
210210
<CCardBody>
211-
<p className="text-medium-emphasis small">
211+
<p className="text-body-secondary small">
212212
Take that same HTML, but use <code>variant=&#34;pills&#34;</code> instead:
213213
</p>
214214
<DocsExample href="components/nav#pills">
@@ -240,7 +240,7 @@ const Navs = () => {
240240
<strong>React Navs</strong> <small>Fill and justify</small>
241241
</CCardHeader>
242242
<CCardBody>
243-
<p className="text-medium-emphasis small">
243+
<p className="text-body-secondary small">
244244
Force your <code>.nav</code>&#39;s contents to extend the full available width one of
245245
two modifier classes. To proportionately fill all available space with your{' '}
246246
<code>.nav-item</code>s, use <code>layout=&#34;fill&#34;</code>. Notice that all
@@ -266,7 +266,7 @@ const Navs = () => {
266266
</CNavItem>
267267
</CNav>
268268
</DocsExample>
269-
<p className="text-medium-emphasis small">
269+
<p className="text-body-secondary small">
270270
For equal-width elements, use <code>layout=&#34;justified&#34;</code>. All horizontal
271271
space will be occupied by nav links, but unlike the .nav-fill above, every nav item
272272
will be the same width.
@@ -300,7 +300,7 @@ const Navs = () => {
300300
<strong>React Navs</strong> <small>Working with flex utilities</small>
301301
</CCardHeader>
302302
<CCardBody>
303-
<p className="text-medium-emphasis small">
303+
<p className="text-body-secondary small">
304304
If you need responsive nav variations, consider using a series of{' '}
305305
<a href="https://coreui.io/docs/utilities/flex">flexbox utilities</a>. While more
306306
verbose, these utilities offer greater customization across responsive breakpoints. In

0 commit comments

Comments
 (0)