sean/manja_ui_dev
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

refactor: change .text-medium-emphasis to .text-body-secondary

Browse Source
This commit is contained in:
mrholek
2023-09-26 23:38:41 +02:00
parent 7381ae2837
commit 7048a791cc
34 changed files with 242 additions and 242 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/base/Accordion.vue
+3 -3
View File
@@ -6,7 +6,7 @@
<strong>Vue Accordion</strong>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Click the accordions below to expand/collapse the accordion content.
</p>
<DocsExample href="components/accordion.html">
@@ -62,7 +62,7 @@
<strong>Vue Accordion</strong> <small>Flush</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Add <code>flush</code> to remove the default
<code>background-color</code>, some borders, and some rounded
corners to render accordions edge-to-edge with their parent
@@ -121,7 +121,7 @@
<strong>Vue Accordion</strong> <small>Always open</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Add <code>always-open</code> property to make accordion items stay
open when another item is opened.
</p>
src/views/base/Breadcrumbs.vue
+1 -1
View File
@@ -6,7 +6,7 @@
<strong>Vue Breadcrumb</strong>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
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
src/views/base/Cards.vue
+43 -43
View File
@@ -6,7 +6,7 @@
<strong>Card</strong> <small>Example</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Cards are built with as little markup and styles as possible but
still manage to deliver a bunch of control and customization. Built
with flexbox, they offer easy alignment and mix well with other
@@ -18,7 +18,7 @@
as needed. They have no fixed width to start, so they&#39;ll fill
the full width of its parent.
</p>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Below is an example of a basic card with mixed content and a fixed
width. Cards have no fixed width to start, so they&#39;ll naturally
fill the full width of its parent element.
@@ -43,7 +43,7 @@
<CCard class="mb-4">
<CCardHeader> <strong>Card</strong> <small>Body</small> </CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
The main block of a card is the <code>&lt;CCardBody&gt;</code>. Use
it whenever you need a padded section within a card.
</p>
@@ -61,14 +61,14 @@
<strong>Card</strong> <small>Titles, text, and links</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Card titles are managed by
<code>&lt;CCardTitle&gt;</code> component. Identically, links are
attached and collected next to each other by
<code>&lt;CCardLink&gt;</code>
component.
</p>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Subtitles are managed by
<code>&lt;CCardSubtitle&gt;</code> component. If the
<code>&lt;CCardTitle&gt;</code> also, the
@@ -80,7 +80,7 @@
<CCard style="width: 18rem">
<CCardBody>
<CCardTitle>Card title</CCardTitle>
<CCardSubtitle class="mb-2 text-medium-emphasis"
<CCardSubtitle class="mb-2 text-body-secondary"
>Card subtitle</CCardSubtitle
>
<CCardText>
@@ -99,7 +99,7 @@
<CCard class="mb-4">
<CCardHeader> <strong>Card</strong> <small>Images</small> </CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
<code>.card-img-top</code> places a picture to the top of the card.
With <code>.card-text</code>, text can be added to the card. Text
within <code>.card-text</code> can additionally be styled with the
@@ -125,7 +125,7 @@
<strong>Card</strong> <small>List groups</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Create lists of content in a card with a flush list group.
</p>
<DocsExample href="components/card.html/#list-groups">
@@ -170,7 +170,7 @@
<strong>Card</strong> <small>Kitchen sink</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Combine and match many content types to build the card you need, or
throw everything in there. Shown below are image styles, blocks,
text styles, and a list group—all wrapped in a fixed-width card.
@@ -205,7 +205,7 @@
<strong>Card</strong> <small>Header and footer</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Add an optional header and/or footer within a card.
</p>
<DocsExample href="components/card.html/#header-and-footer">
@@ -221,7 +221,7 @@
</CCardBody>
</CCard>
</DocsExample>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Card headers can be styled by adding ex.
<code>component=&#34;h5&#34;</code>.
</p>
@@ -266,7 +266,7 @@
</CCardText>
<CButton href="#">Go somewhere</CButton>
</CCardBody>
<CCardFooter class="text-medium-emphasis">2 days ago</CCardFooter>
<CCardFooter class="text-body-secondary">2 days ago</CCardFooter>
</CCard>
</DocsExample>
</CCardBody>
@@ -276,14 +276,14 @@
<CCard class="mb-4">
<CCardHeader> <strong>Card</strong> <small>Body</small> </CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Cards assume no specific <code>width</code> to start, so they&#39;ll
be 100% wide unless otherwise stated. You can adjust this as
required with custom CSS, grid classes, grid Sass mixins, or
services.
</p>
<h3>Using grid markup</h3>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Using the grid, wrap cards in columns and rows as needed.
</p>
<DocsExample href="components/card.html/#sizing">
@@ -315,7 +315,7 @@
</CRow>
</DocsExample>
<h3>Using utilities</h3>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Use some of
<a href="https://coreui.io/docs/utilities/sizing/"
>available sizing utilities</a
@@ -345,7 +345,7 @@
</CCard>
</DocsExample>
<strong>Using custom CSS</strong>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Use custom CSS in your stylesheets or as inline styles to set a
width.
</p>
@@ -370,7 +370,7 @@
<strong>Card</strong> <small>Text alignment</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
You can instantly change the text arrangement of any card—in its
whole or specific parts—with
<a href="https://coreui.io/docs/utilities/text/#text-alignment"
@@ -419,7 +419,7 @@
<strong>Card</strong> <small>Navigation</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Add some navigation to a <code>&lt;CCardHeader&gt;</code> with our
<code>&lt;CNav&gt;</code> component.
</p>
@@ -482,7 +482,7 @@
<strong>Card</strong> <small>Image caps</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Similar to headers and footers, cards can include top and bottom
&#34;image caps&#34;—images at the top or bottom of a card.
</p>
@@ -499,7 +499,7 @@
little bit longer.
</CCardText>
<CCardText>
<small class="text-medium-emphasis"
<small class="text-body-secondary"
>Last updated 3 mins ago</small
>
</CCardText>
@@ -516,7 +516,7 @@
little bit longer.
</CCardText>
<CCardText>
<small class="text-medium-emphasis"
<small class="text-body-secondary"
>Last updated 3 mins ago</small
>
</CCardText>
@@ -535,12 +535,12 @@
<strong>Card</strong> <small>Card styles</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Cards include various options for customizing their backgrounds,
borders, and color.
</p>
<h3>Background and color</h3>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Use <code>color</code> property to change the appearance of a card.
</p>
<DocsExample href="components/card.html/#background-and-color">
@@ -584,7 +584,7 @@
</CRow>
</DocsExample>
<h3>Border</h3>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Use
<a href="https://coreui.io/docs/utilities/borders/"
>border utilities</a
@@ -626,7 +626,7 @@
</template>
</DocsExample>
<h3>Top border</h3>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Use
<a href="https://coreui.io/docs/utilities/borders/"
>border utilities</a
@@ -676,7 +676,7 @@
<strong>Card</strong> <small>Card groups</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Use card groups to render cards as a single, attached element with
equal width and height columns. Card groups start off stacked and
use <code>display: flex;</code> to become attached with uniform
@@ -694,7 +694,7 @@
longer.
</CCardText>
<CCardText>
<small class="text-medium-emphasis"
<small class="text-body-secondary"
>Last updated 3 mins ago</small
>
</CCardText>
@@ -709,7 +709,7 @@
additional content.
</CCardText>
<CCardText>
<small class="text-medium-emphasis"
<small class="text-body-secondary"
>Last updated 3 mins ago</small
>
</CCardText>
@@ -725,7 +725,7 @@
content than the first to show that equal height action.
</CCardText>
<CCardText>
<small class="text-medium-emphasis"
<small class="text-body-secondary"
>Last updated 3 mins ago</small
>
</CCardText>
@@ -733,7 +733,7 @@
</CCard>
</CCardGroup>
</DocsExample>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
When using card groups with footers, their content will
automatically line up.
</p>
@@ -750,7 +750,7 @@
</CCardText>
</CCardBody>
<CCardFooter>
<small class="text-medium-emphasis"
<small class="text-body-secondary"
>Last updated 3 mins ago</small
>
</CCardFooter>
@@ -765,7 +765,7 @@
</CCardText>
</CCardBody>
<CCardFooter>
<small class="text-medium-emphasis"
<small class="text-body-secondary"
>Last updated 3 mins ago</small
>
</CCardFooter>
@@ -781,7 +781,7 @@
</CCardText>
</CCardBody>
<CCardFooter>
<small class="text-medium-emphasis"
<small class="text-body-secondary"
>Last updated 3 mins ago</small
>
</CCardFooter>
@@ -797,7 +797,7 @@
<strong>Card</strong> <small>Grid cards</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Use the <code>CRow</code> component and set
<code>&#123;xs|sm|md|lg|xl|xxl&#125;="&#123; cols: * &#125;"</code>
property to control how many grid columns (wrapped around your
@@ -821,7 +821,7 @@
</CCardText>
</CCardBody>
<CCardFooter>
<small class="text-medium-emphasis"
<small class="text-body-secondary"
>Last updated 3 mins ago</small
>
</CCardFooter>
@@ -839,7 +839,7 @@
</CCardText>
</CCardBody>
<CCardFooter>
<small class="text-medium-emphasis"
<small class="text-body-secondary"
>Last updated 3 mins ago</small
>
</CCardFooter>
@@ -857,7 +857,7 @@
</CCardText>
</CCardBody>
<CCardFooter>
<small class="text-medium-emphasis"
<small class="text-body-secondary"
>Last updated 3 mins ago</small
>
</CCardFooter>
@@ -875,7 +875,7 @@
</CCardText>
</CCardBody>
<CCardFooter>
<small class="text-medium-emphasis"
<small class="text-body-secondary"
>Last updated 3 mins ago</small
>
</CCardFooter>
@@ -883,7 +883,7 @@
</CCol>
</CRow>
</DocsExample>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Change it to <code>md="&#123; cols: 3&#125;"</code> and you&#39;ll
see the fourth card wrap.
</p>
@@ -901,7 +901,7 @@
</CCardText>
</CCardBody>
<CCardFooter>
<small class="text-medium-emphasis"
<small class="text-body-secondary"
>Last updated 3 mins ago</small
>
</CCardFooter>
@@ -919,7 +919,7 @@
</CCardText>
</CCardBody>
<CCardFooter>
<small class="text-medium-emphasis"
<small class="text-body-secondary"
>Last updated 3 mins ago</small
>
</CCardFooter>
@@ -937,7 +937,7 @@
</CCardText>
</CCardBody>
<CCardFooter>
<small class="text-medium-emphasis"
<small class="text-body-secondary"
>Last updated 3 mins ago</small
>
</CCardFooter>
@@ -955,7 +955,7 @@
</CCardText>
</CCardBody>
<CCardFooter>
<small class="text-medium-emphasis"
<small class="text-body-secondary"
>Last updated 3 mins ago</small
>
</CCardFooter>
src/views/base/Carousels.vue
+6 -6
View File
@@ -6,7 +6,7 @@
<strong>Vue Carousels</strong> <small>Slide only</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Here’s a carousel with slides
</p>
<DocsExample href="components/carousel.html#slides-only">
@@ -29,7 +29,7 @@
<strong>Vue Carousels</strong> <small>With controls</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Adding in the previous and next controls by
<code>controls</code> property.
</p>
@@ -53,7 +53,7 @@
<strong>Vue Carousels</strong> <small>With indicators</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
You can attach the indicators to the carousel, lengthwise the
controls, too.
</p>
@@ -77,7 +77,7 @@
<strong>Vue Carousels</strong> <small>With captions</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
You can add captions to slides with the
<code>&lt;CCarouselCaption&gt;</code> element within any
<code>&lt;CCarouselItem&gt;</code>. They can be immediately hidden
@@ -125,7 +125,7 @@
<strong>Vue Carousels</strong> <small>Crossfade</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Add <code>transition=&#34;crossfade&#34;</code> to your carousel to
animate slides with a fade transition instead of a slide.
</p>
@@ -149,7 +149,7 @@
<strong>Vue Carousels</strong> <small>Dark variant</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Add <code>dark</code> property to the <code>CCarousel</code> for
darker controls, indicators, and captions. Controls have been
inverted from their default white fill with the
src/views/base/Collapses.vue
+3 -3
View File
@@ -6,7 +6,7 @@
<strong>Vue Collapse</strong>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
You can use a link or a button component.
</p>
<DocsExample href="components/collapse.html#example">
@@ -34,7 +34,7 @@
<strong>Vue Collapse</strong> <small> Horizontal</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
The collapse plugin also supports horizontal collapsing. Add the
<code>horizontal</code> property to transition the
<code>width</code> instead of <code>height</code> and set a
@@ -67,7 +67,7 @@
<strong>Vue Collapse</strong> <small> multi target</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
A <code>&lt;CButton&gt;</code> can show and hide multiple elements.
</p>
<h4 class="mt-4">Toggle multiple targets</h4>
src/views/base/ListGroups.vue
+15 -15
View File
@@ -6,7 +6,7 @@
<strong>Vue List Group</strong> <small>Basic example</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
The default list group is an unordered list with items and the
proper CSS classes. Build upon it with the options that follow, or
with your CSS as required.
@@ -29,7 +29,7 @@
<strong>Vue List Group</strong> <small>Active items</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Add <code>active</code> boolean property to a
<code>&lt;CListGroupItem&gt;</code> to show the current active
selection.
@@ -52,7 +52,7 @@
<strong>Vue List Group</strong> <small>Disabled items</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Add <code>disabled</code> boolean property to a
<code>&lt;CListGroupItem&gt;</code> to make it appear disabled.
</p>
@@ -74,7 +74,7 @@
<strong>Vue List Group</strong> <small>Links and buttons</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Use <code>&lt;a&gt;</code>s or <code>&lt;button&gt;</code>s to
create <em>actionable</em> list group items with hover, disabled,
and active states by adding
@@ -112,7 +112,7 @@
<strong>Vue List Group</strong> <small>Flush</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Add <code>flush</code> boolean property to remove some borders and
rounded corners to render list group items edge-to-edge in a parent
container (e.g., cards).
@@ -135,7 +135,7 @@
<strong>Vue List Group</strong> <small>Horizontal</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Add <code>layout=&#34;horizontal&#34;</code> to change the layout of
list group items from vertical to horizontal across all breakpoints.
Alternatively, choose a responsive variant
@@ -171,7 +171,7 @@
<strong>Vue List Group</strong> <small>Contextual classes</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Use contextual classes to style list items with a stateful
background and color.
</p>
@@ -195,7 +195,7 @@
>
</CListGroup>
</DocsExample>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Contextual classes also work with <code>&lt;a&gt;</code>s or
<code>&lt;button&gt;</code>s. Note the addition of the hover styles
here not present in the previous example. Also supported is the
@@ -235,7 +235,7 @@
<strong>Vue List Group</strong> <small>With badges</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Add badges to any list group item to show unread counts, activity,
and more.
</p>
@@ -270,7 +270,7 @@
<strong>Vue List Group</strong> <small>Custom content</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Add nearly any HTML within, even for linked list groups like the one
below, with the help of
<a href="https://coreui.io/docs/utilities/flex/"
@@ -293,26 +293,26 @@
<CListGroupItem component="a" href="#">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small class="text-medium-emphasis">3 days ago</small>
<small class="text-body-secondary">3 days ago</small>
</div>
<p class="mb-1">
Donec id elit non mi porta gravida at eget metus. Maecenas sed
diam eget risus varius blandit.
</p>
<small class="text-medium-emphasis"
<small class="text-body-secondary"
>Donec id elit non mi porta.</small
>
</CListGroupItem>
<CListGroupItem component="a" href="#">
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small class="text-medium-emphasis">3 days ago</small>
<small class="text-body-secondary">3 days ago</small>
</div>
<p class="mb-1">
Donec id elit non mi porta gravida at eget metus. Maecenas sed
diam eget risus varius blandit.
</p>
<small class="text-medium-emphasis"
<small class="text-body-secondary"
>Donec id elit non mi porta.</small
>
</CListGroupItem>
@@ -327,7 +327,7 @@
<strong>Vue List Group</strong> <small>Checkboxes and radios</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Place CoreUI&#39;s checkboxes and radios within list group items and
customize as needed.
</p>
src/views/base/Navs.vue
+11 -11
View File
@@ -6,7 +6,7 @@
<strong>Vue Navs</strong> <small>Base navs</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
The base <code>.nav</code> component is built with flexbox and
provide a strong foundation for building all types of navigation
components. It includes some style overrides (for working with
@@ -29,7 +29,7 @@
</CNavItem>
</CNav>
</DocsExample>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Classes are used throughout, so your markup can be super flexible.
Use <code>&lt;ul&gt;</code>s like above, <code>&lt;ol&gt;</code> if
the order of your items is important, or roll your own with a
@@ -54,7 +54,7 @@
<strong>Vue Navs</strong> <small>Horizontal alignment</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Change the horizontal alignment of your nav with
<a href="https://coreui.io/docs/layout/grid/#horizontal-alignment">
flexbox utilities
@@ -62,7 +62,7 @@
. By default, navs are left-aligned, but you can easily change them
to center or right aligned.
</p>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Centered with <code>.justify-content-center</code>:
</p>
<DocsExample href="components/nav.html#horizontal-alignment">
@@ -81,7 +81,7 @@
</CNavItem>
</CNav>
</DocsExample>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Right-aligned with <code>.justify-content-end</code>:
</p>
<DocsExample href="components/nav.html#base-nav">
@@ -109,7 +109,7 @@
<strong>Vue Navs</strong> <small>Vertical</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Stack your navigation by changing the flex item direction with the{'
'}
<code>.flex-column</code> utility. Need to stack them on some
@@ -141,7 +141,7 @@
<strong>Vue Navs</strong> <small>Tabs</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Takes the basic nav from above and adds the
<code>variant=&#34;tabs&#34;</code> class to generate a tabbed
interface
@@ -171,7 +171,7 @@
<strong>Vue Navs</strong> <small>Pills</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Take that same HTML, but use
<code>variant=&#34;pills&#34;</code> instead:
</p>
@@ -200,7 +200,7 @@
<strong>Vue Navs</strong> <small>Fill and justify</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Force your <code>.nav</code>&#39;s contents to extend the full
available width one of two modifier classes. To proportionately fill
all available space with your <code>.nav-item</code>s, use
@@ -223,7 +223,7 @@
</CNavItem>
</CNav>
</DocsExample>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
For equal-width elements, use
<code>layout=&#34;justified&#34;</code>. All horizontal space will
be occupied by nav links, but unlike the .nav-fill above, every nav
@@ -254,7 +254,7 @@
<strong>Vue Navs</strong> <small>Working with flex utilities</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
If you need responsive nav variations, consider using a series of{'
'}
<a href="https://coreui.io/docs/utilities/flex">flexbox utilities</a
src/views/base/Paginations.vue
+7 -7
View File
@@ -6,7 +6,7 @@
<strong>Vue Pagination</strong>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
We use a large block of connected links for our pagination, making
links hard to miss and easily scalable—all while providing large hit
areas. Pagination is built with list HTML elements so screen readers
@@ -14,7 +14,7 @@
<code>&lt;nav&gt;</code> element to identify it as a navigation
section to screen readers and other assistive technologies.
</p>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
In addition, as pages likely have more than one such navigation
section, it&#39;s advisable to provide a descriptive
<code>aria-label</code> for the <code>&lt;nav&gt;</code> to reflect
@@ -40,7 +40,7 @@
<strong>Vue Pagination</strong> <small>Working with icons</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Looking to use an icon or symbol in place of text for some
pagination links? Be sure to provide proper screen reader support
with <code>aria</code> attributes.
@@ -68,12 +68,12 @@
<small>Disabled and active states</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Pagination links are customizable for different circumstances. Use
<code>disabled</code> for links that appear un-clickable and
<code>.active</code> to indicate the current page.
</p>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
While the <code>disabled</code> prop uses
<code>pointer-events: none</code> to <em>try</em> to disable the
link functionality of <code>&lt;a&gt;</code>s, that CSS property is
@@ -106,7 +106,7 @@
<strong>Vue Pagination</strong> <small>Sizing</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Fancy larger or smaller pagination? Add
<code>size=&#34;lg&#34;</code> or <code>size=&#34;sm&#34;</code> for
additional sizes.
@@ -138,7 +138,7 @@
<strong>Vue Pagination</strong> <small>Alignment</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Change the alignment of pagination components with
<a href="https://coreui.io/docs/utilities/flex/"
>flexbox utilities</a
src/views/base/Placeholders.vue
+1 -1
View File
@@ -6,7 +6,7 @@
<strong>Vue Placeholder</strong>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
In the example below, we take a typical card component and recreate
it with placeholders applied to create a "loading card". Size and
proportions are the same between the two.
src/views/base/Popovers.vue
+1 -1
View File
@@ -29,7 +29,7 @@
<strong>Vue Popover</strong> <small>Four directions</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Four options are available: top, right, bottom, and left aligned.
Directions are mirrored when using CoreUI for Vue in RTL.
</p>
src/views/base/Progress.vue
+7 -7
View File
@@ -6,7 +6,7 @@
<strong>Vue Progress</strong> <small>Basic example</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Progress components are built with two HTML elements, some CSS to
set the width, and a few attributes. We don&#39;tuse
<a
@@ -43,7 +43,7 @@
<strong>Vue Progress</strong> <small>Labels</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Add labels to your progress bars by placing text within the
<code>&lt;CProgressBar&gt;</code>.
</p>
@@ -61,7 +61,7 @@
<strong>Vue Progress</strong> <small>Height</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
We only set a <code>height</code> value on the
<code>&lt;CProgress&gt;</code>, so if you change that value the
inner <code>&lt;CProgressBar&gt;</code> will automatically resize
@@ -84,7 +84,7 @@
<strong>Vue Progress</strong> <small>Backgrounds</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Use <code>color</code> prop to change the appearance of individual
progress bars.
</p>
@@ -111,7 +111,7 @@
<strong>Vue Progress</strong> <small>Multiple bars</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Include multiple progress bars in a progress component if you need.
</p>
<DocsExample href="components/progress.html#multiple-bars">
@@ -130,7 +130,7 @@
<strong>Vue Progress</strong> <small>Striped</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Add <code>variant=&#34;striped&#34;</code> to any
<code>&lt;CProgressBar&gt;</code> to apply a stripe via CSS gradient
over the progress bar&#39;s background color.
@@ -158,7 +158,7 @@
<strong>Vue Progress</strong> <small>Animated stripes</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
The striped gradient can also be animated. Add
<code>animated</code> property to
<code>&lt;CProgressBar&gt;</code> to animate the stripes right to
src/views/base/Spinners.vue
+6 -6
View File
@@ -6,13 +6,13 @@
<strong>Vue Spinner</strong> <small>Border</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Use the border spinners for a lightweight loading indicator.
</p>
<DocsExample href="components/spinner.html">
<CSpinner />
</DocsExample>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
The border spinner uses <code>currentColor</code> for its
<code>border-color</code>. You can use any of our text color
utilities on the standard spinner.
@@ -36,14 +36,14 @@
<strong>Vue Spinner</strong> <small>Growing</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
If you don&#39;tfancy a border spinner, switch to the grow spinner.
While it doesn&#39;t technically spin, it does repeatedly grow!
</p>
<DocsExample href="components/spinner.html#growing-spinner">
<CSpinner variant="grow" />
</DocsExample>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Once again, this spinner is built with <code>currentColor</code>, so
you can easily change its appearance. Here it is in blue, along with
the supported variants.
@@ -67,7 +67,7 @@
<strong>Vue Spinner</strong> <small>Size</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Add <code>size=&#34;sm&#34;</code> property to make a smaller
spinner that can quickly be used within other components.
</p>
@@ -84,7 +84,7 @@
<strong>Vue Spinner</strong> <small>Buttons</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Use spinners within buttons to indicate an action is currently
processing or taking place. You may also swap the text out of the
spinner element and utilize button text as needed.
src/views/base/Tables.vue
+14 -14
View File
@@ -6,7 +6,7 @@
<strong>Vue Table</strong> <small>Basic example</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Using the most basic table CoreUI, here&#39;s how
<code>&lt;CTable&gt;</code>-based tables look in CoreUI.
</p>
@@ -50,7 +50,7 @@
<strong>Vue Table</strong> <small>Variants</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Use contextual classes to color tables, table rows or individual
cells.
</p>
@@ -121,7 +121,7 @@
<strong>Vue Table</strong> <small>Striped rows</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Use <code>striped</code> property to add zebra-striping to any table
row within the <code>&lt;CTableBody&gt;</code>.
</p>
@@ -156,7 +156,7 @@
</CTableBody>
</CTable>
</DocsExample>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
These classes can also be added to table variants:
</p>
<DocsExample href="components/table.html#striped-rows">
@@ -230,7 +230,7 @@
<strong>Vue Table</strong> <small>Hoverable rows</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Use <code>hover</code> property to enable a hover state on table
rows within a <code>&lt;CTableBody&gt;</code>.
</p>
@@ -411,7 +411,7 @@
<strong>Vue Table</strong> <small>Bordered tables</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Add <code>bordered</code> property for borders on all sides of the
table and cells.
</p>
@@ -446,7 +446,7 @@
</CTableBody>
</CTable>
</DocsExample>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
<a href="https://coreui.io/docs/4.0/utilities/borders#border-color">
Border color utilities
</a>
@@ -492,7 +492,7 @@
<strong>Vue Table</strong> <small>Tables without borders</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Add <code>borderless</code> property for a table without borders.
</p>
<DocsExample href="components/table.html#tables-without-borders">
@@ -566,7 +566,7 @@
<strong>Vue Table</strong> <small>Small tables</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Add <code>small</code> property to make any
<code>&lt;CTable&gt;</code> more compact by cutting all cell
<code>padding</code> in half.
@@ -611,7 +611,7 @@
<strong>Vue Table</strong> <small>Vertical alignment</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Table cells of <code>&lt;CTableHead&gt;</code> are always vertical
aligned to the bottom. Table cells in
<code>&lt;CTableBody&gt;</code> inherit their alignment from
@@ -705,7 +705,7 @@
<strong>Vue Table</strong> <small>Nesting</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Border styles, active styles, and table variants are not inherited
by nested tables.
</p>
@@ -779,7 +779,7 @@
<strong>Vue Table</strong> <small>Table head</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Similar to tables and dark tables, use the modifier prop
<code>color=&#34;light&#34;</code> or
<code>color=&#34;dark&#34;</code> to make
@@ -905,7 +905,7 @@
<strong>Vue Table</strong> <small>Captions</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
A <code>&lt;CTableCaption&gt;</code> functions like a heading for a
table. It helps users with screen readers to find a table and
understand what it&#39;s about and decide if they want to read it.
@@ -943,7 +943,7 @@
</CTableBody>
</CTable>
</DocsExample>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
You can also put the <code>&lt;CTableCaption&gt;</code> on the top
of the table with <code>caption=&#34;top&#34;</code>.
</p>
src/views/base/Tooltips.vue
+3 -3
View File
@@ -6,11 +6,11 @@
<strong>Vue Tooltips</strong> <small>Basic example</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Hover over the links below to see tooltips:
</p>
<DocsExample href="components/tooltip.html">
<p class="text-medium-emphasis">
<p class="text-body-secondary">
Tight pants next level keffiyeh
<CLink v-c-tooltip="'Tooltip text'"> you probably </CLink>
haven't heard of them. Photo booth beard raw denim letterpress
@@ -26,7 +26,7 @@
freegan cred raw denim single-origin coffee viral.
</p>
</DocsExample>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Hover over the links below to see tooltips:
</p>
<DocsExample href="components/tooltip.html">
src/views/buttons/ButtonGroups.vue
+2 -2
View File
@@ -269,7 +269,7 @@
<strong>Vue Button Group</strong> <span>Nesting</span>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Put a <code>&lt;CButtonGroup&gt;</code> inside another
<code>&lt;CButtonGroup&gt;</code> when you need dropdown menus
combined with a series of buttons.
@@ -302,7 +302,7 @@
<strong>Vue Button Group</strong> <span>Vertical variation</span>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Create a set of buttons that appear vertically stacked rather than
horizontally.
<strong>Split button dropdowns are not supported here.</strong>
src/views/buttons/Buttons.vue
+14 -14
View File
@@ -6,7 +6,7 @@
<strong>Vue Button</strong>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
CoreUI includes a bunch of predefined buttons components, each
serving its own semantic purpose. Buttons show what action will
happen when the user clicks or touches it. CoreUI buttons are used
@@ -57,7 +57,7 @@
<strong>Vue Button</strong> <small>with icons</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
You can combine button with our
<a href="https://icons.coreui.io/">CoreUI Icons</a>.
</p>
@@ -107,14 +107,14 @@
<strong>Vue Button</strong> <small>Button components</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
The <code>&lt;CButton&gt;</code> component are designed for
<code>&lt;button&gt;</code> , <code>&lt;a&gt;</code> or
<code>&lt;input&gt;</code>
elements (though some browsers may apply a slightly different
rendering).
</p>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
If you&#39;re using <code>&lt;CButton&gt;</code> component as
<code>&lt;a&gt;</code> elements that are used to trigger
functionality ex. collapsing content, these links should be given a
@@ -154,7 +154,7 @@
<strong>Vue Button</strong> <small>outline</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
If you need a button, but without the strong background colors. Set
<code>variant=&#34;outline&#34;</code> prop to remove all background
colors.
@@ -205,7 +205,7 @@
<strong>Vue Button</strong> <small>ghost</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
If you need a ghost variant of button, set
<code>variant=&#34;ghost&#34;</code> prop to remove all background
colors.
@@ -256,7 +256,7 @@
<strong>Vue Button</strong> <small>Sizes</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Larger or smaller buttons? Add <code>size=&#34;lg&#34;</code> or
<code>size=&#34;sm&#34;</code> for additional sizes.
</p>
@@ -333,7 +333,7 @@
<strong>Vue Button</strong> <small>Disabled state</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Add the <code>disabled</code> boolean prop to any
<code>&lt;CButton&gt;</code>
component to make buttons look inactive. Disabled button has
@@ -346,11 +346,11 @@
</CButton>
<CButton color="secondary" size="lg" disabled> Button </CButton>
</DocsExample>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Disabled buttons using the <code>&lt;a&gt;</code> component act a
little different:
</p>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
<code>&lt;a&gt;</code>s don&#39;tsupport the
<code>disabled</code> attribute, so CoreUI has to add
<code>.disabled</code> class to make buttons look inactive. CoreUI
@@ -381,7 +381,7 @@
<strong>Vue Button</strong> <small>Block buttons</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Create buttons that span the full width of a parent—by using
utilities.
</p>
@@ -391,7 +391,7 @@
<CButton color="primary">Button</CButton>
</div>
</DocsExample>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Here we create a responsive variation, starting with vertically
stacked buttons until the <code>md</code> breakpoint, where
<code>.d-md-block</code> replaces the <code>.d-grid</code> class,
@@ -404,7 +404,7 @@
<CButton color="primary">Button</CButton>
</div>
</DocsExample>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
You can adjust the width of your block buttons with grid column
width classes. For example, for a half-width &#34;block button&#34;,
use <code>.col-6</code>. Center it horizontally with
@@ -416,7 +416,7 @@
<CButton color="primary">Button</CButton>
</div>
</DocsExample>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Additional utilities can be used to adjust the alignment of buttons
when horizontal. Here we&#39;ve taken our previous responsive
example and added some flex utilities and a margin utility on the
src/views/buttons/Dropdowns.vue
+10 -10
View File
@@ -6,7 +6,7 @@
<strong>Vue Dropdown</strong> <small>Single button</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Here&#39;s how you can put them to work with either
<code>&lt;button&gt;</code>
elements:
@@ -23,7 +23,7 @@
</CDropdownMenu>
</CDropdown>
</DocsExample>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
The best part is you can do this with any button variant, too:
</p>
<DocsExample href="components/dropdown.html#single-button">
@@ -61,13 +61,13 @@
<strong>Vue Dropdown</strong> <small>Split button</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Similarly, create split button dropdowns with virtually the same
markup as single button dropdowns, but with the addition of boolean
prop <code>split</code> for proper spacing around the dropdown
caret.
</p>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
We use this extra class to reduce the horizontal
<code>padding</code> on either side of the caret by 25% and remove
the <code>margin-left</code> that&#39;s attached for normal button
@@ -113,7 +113,7 @@
<strong>Vue Dropdown</strong> <small>Sizing</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Button dropdowns work with buttons of all sizes, including default
and split dropdown buttons.
</p>
@@ -180,7 +180,7 @@
<strong>Vue Dropdown</strong> <small>Single button</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Opt into darker dropdowns to match a dark navbar or custom style by
set
<code>dark</code> property. No changes are required to the dropdown
@@ -200,7 +200,7 @@
</CDropdownMenu>
</CDropdown>
</DocsExample>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
And putting it to use in a navbar:
</p>
<DocsExample href="components/dropdown.html#dark-dropdowns">
@@ -251,7 +251,7 @@
<strong>Vue Dropdown</strong> <small>Dropup</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Trigger dropdown menus above elements by adding
<code>direction=&#34;dropup&#34;</code> to the
<code>&lt;CDropdown&gt;</code>
@@ -289,7 +289,7 @@
<strong>Vue Dropdown</strong> <small>Dropright</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Trigger dropdown menus at the right of the elements by adding
<code>direction=&#34;dropend&#34;</code> to the
<code>&lt;CDropdown&gt;</code>
@@ -327,7 +327,7 @@
<strong>Vue Dropdown</strong> <small>Dropleft</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Trigger dropdown menus at the left of the elements by adding
<code>direction=&#34;dropstart&#34;</code> to the
<code>&lt;CDropdown&gt;</code>
src/views/dashboard/Dashboard.vue
+15 -15
View File
@@ -8,7 +8,7 @@
<CRow>
<CCol :sm="5">
<h4 id="traffic" class="card-title mb-0">Traffic</h4>
<div class="small text-medium-emphasis">January 2021</div>
<div class="small text-body-secondary">January 2021</div>
</CCol>
<CCol :sm="7" class="d-none d-md-block">
<CButton color="primary" class="float-end">
@@ -36,7 +36,7 @@
<CCardFooter>
<CRow :xs="{ cols: 1 }" :md="{ cols: 5 }" class="text-center">
<CCol class="mb-sm-2 mb-0">
<div class="text-medium-emphasis">Visits</div>
<div class="text-body-secondary">Visits</div>
<strong>29.703 Users (40%)</strong>
<CProgress
class="mt-2"
@@ -47,7 +47,7 @@
/>
</CCol>
<CCol class="mb-sm-2 mb-0 d-md-down-none">
<div class="text-medium-emphasis">Unique</div>
<div class="text-body-secondary">Unique</div>
<strong>24.093 Users (20%)</strong>
<CProgress
class="mt-2"
@@ -58,7 +58,7 @@
/>
</CCol>
<CCol class="mb-sm-2 mb-0">
<div class="text-medium-emphasis">Pageviews</div>
<div class="text-body-secondary">Pageviews</div>
<strong>78.706 Views (60%)</strong>
<CProgress
class="mt-2"
@@ -69,7 +69,7 @@
/>
</CCol>
<CCol class="mb-sm-2 mb-0">
<div class="text-medium-emphasis">New Users</div>
<div class="text-body-secondary">New Users</div>
<strong>22.123 Users (80%)</strong>
<CProgress
class="mt-2"
@@ -80,7 +80,7 @@
/>
</CCol>
<CCol class="mb-sm-2 mb-0 d-md-down-none">
<div class="text-medium-emphasis">Bounce Rate</div>
<div class="text-body-secondary">Bounce Rate</div>
<strong>Average Rate (40.15%)</strong>
<CProgress class="mt-2" :value="40" thin :precision="1" />
</CCol>
@@ -102,7 +102,7 @@
<div
class="border-start border-start-4 border-start-info py-1 px-3 mb-3"
>
<div class="text-medium-emphasis small">New Clients</div>
<div class="text-body-secondary small">New Clients</div>
<div class="fs-5 fw-semibold">9,123</div>
</div>
</CCol>
@@ -110,7 +110,7 @@
<div
class="border-start border-start-4 border-start-danger py-1 px-3 mb-3"
>
<div class="text-medium-emphasis small">
<div class="text-body-secondary small">
Recurring Clients
</div>
<div class="fs-5 fw-semibold">22,643</div>
@@ -124,7 +124,7 @@
class="progress-group mb-4"
>
<div class="progress-group-prepend">
<span class="text-medium-emphasis small">{{
<span class="text-body-secondary small">{{
item.title
}}</span>
</div>
@@ -140,7 +140,7 @@
<div
class="border-start border-start-4 border-start-warning py-1 px-3 mb-3"
>
<div class="text-medium-emphasis small">Pageviews</div>
<div class="text-body-secondary small">Pageviews</div>
<div class="fs-5 fw-semibold">78,623</div>
</div>
</CCol>
@@ -148,7 +148,7 @@
<div
class="border-start border-start-4 border-start-success py-1 px-3 mb-3"
>
<div class="text-medium-emphasis small">Organic</div>
<div class="text-body-secondary small">Organic</div>
<div class="fs-5 fw-semibold">49,123</div>
</div>
</CCol>
@@ -181,7 +181,7 @@
<span class="title">{{ item.title }}</span>
<span class="ms-auto fw-semibold">
{{ item.value }}
<span class="text-medium-emphasis small"
<span class="text-body-secondary small"
>({{ item.percent }}%)</span
>
</span>
@@ -221,7 +221,7 @@
</CTableDataCell>
<CTableDataCell>
<div>{{ item.user.name }}</div>
<div class="small text-medium-emphasis text-nowrap">
<div class="small text-body-secondary text-nowrap">
<span>{{ item.user.new ? 'New' : 'Recurring' }}</span> |
{{ item.user.registered }}
</div>
@@ -239,7 +239,7 @@
<strong>{{ item.usage.value }}%</strong>
</div>
<div class="ms-1">
<small class="text-medium-emphasis">
<small class="text-body-secondary">
{{ item.usage.period }}
</small>
</div>
@@ -254,7 +254,7 @@
<CIcon size="xl" :name="item.payment.icon" />
</CTableDataCell>
<CTableDataCell>
<div class="small text-medium-emphasis">Last login</div>
<div class="small text-body-secondary">Last login</div>
<div class="fw-semibold text-nowrap">
{{ item.activity }}
</div>
src/views/forms/ChecksRadios.vue
+8 -8
View File
@@ -23,7 +23,7 @@
<strong>Vue Checkbox</strong> <small>Disabled</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Add the <code>disabled</code> attribute and the associated
<code>&lt;label&gt;</code>s are automatically styled to match with a
lighter color to help indicate the input&#39;s state.
@@ -41,7 +41,7 @@
<strong>Vue Radio</strong>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Add the <code>disabled</code> attribute and the associated
<code>&lt;label&gt;</code>s are automatically styled to match with a
lighter color to help indicate the input&#39;s state.
@@ -96,7 +96,7 @@
<strong>Vue Switches</strong>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
A switch has the markup of a custom checkbox but uses the
<code>switch</code> boolean properly to render a toggle switch.
Switches also support the <code>disabled</code> attribute.
@@ -158,7 +158,7 @@
<small>Default layout (stacked)</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
By default, any number of checkboxes and radios that are immediate
sibling will be vertically stacked and appropriately spaced.
</p>
@@ -200,7 +200,7 @@
<strong>Vue Checks and Radios</strong> <small>Inline</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Group checkboxes or radios on the same horizontal row by adding
<code>inline</code> boolean property to any
<code>&lt;CFormCheck&gt;</code>.
@@ -252,7 +252,7 @@
<strong>Vue Checks and Radios</strong> <small>Without labels</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Remember to still provide some form of accessible name for assistive
technologies (for instance, using <code>aria-label</code>).
</p>
@@ -279,7 +279,7 @@
<strong>Toggle buttons</strong>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Create button-like checkboxes and radio buttons by using
<code>button</code> boolean property on the
<code>&lt;CFormCheck&gt;</code> component. These toggle buttons can
@@ -349,7 +349,7 @@
/>
</DocsExample>
<h3>Outlined styles</h3>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Different variants of button, such at the various outlined styles,
are supported.
</p>
src/views/forms/FloatingLabels.vue
+6 -6
View File
@@ -6,7 +6,7 @@
<strong>Vue Floating labels</strong>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Wrap a pair of <code>&lt;CFormInput&gt;</code> and
<code>&lt;CFormLabel&gt;</code> elements in
<code>CFormFloating</code> to enable floating labels with textual
@@ -34,7 +34,7 @@
<CFormLabel for="floatingPassword">Password</CFormLabel>
</CFormFloating>
</DocsExample>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
When there&#39;s a <code>value</code> already defined,
<code>&lt;CFormLabel&gt;</code>
s will automatically adjust to their floated position.
@@ -59,7 +59,7 @@
<strong>Vue Floating labels</strong> <small>Textareas</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
By default, <code>&lt;CFormTextarea&gt;</code>s will be the same
height as <code>&lt;CFormInput&gt;</code>s.
</p>
@@ -72,7 +72,7 @@
<CFormLabel for="floatingTextarea">Comments</CFormLabel>
</CFormFloating>
</DocsExample>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
To set a custom height on your <code>&lt;CFormTextarea;&gt;</code>,
do not use the <code>rows</code> attribute. Instead, set an explicit
<code>height</code> (either inline or via custom CSS).
@@ -96,7 +96,7 @@
<strong>Vue Floating labels</strong> <small>Selects</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Other than <code>&lt;CFormInput&gt;</code>, floating labels are only
available on <code>&lt;CFormSelect&gt;</code>s. They work in the
same way, but unlike <code>&lt;CFormInput&gt;</code>s, they&#39;ll
@@ -130,7 +130,7 @@
<strong>Vue Floating labels</strong> <small>Layout</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
When working with the CoreUI for Bootstrap grid system, be sure to
place form elements within column classes.
</p>
src/views/forms/FormControl.vue
+4 -4
View File
@@ -38,7 +38,7 @@
<strong>Vue Form Control</strong> <small>Sizing</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Set heights using <code>size</code> property like
<code>size=&#34;lg&#34;</code> and <code>size=&#34;sm&#34;</code>.
</p>
@@ -72,7 +72,7 @@
<strong>Vue Form Control</strong> <small>Disabled</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Add the <code>disabled</code> boolean attribute on an input to give
it a grayed out appearance and remove pointer events.
</p>
@@ -102,7 +102,7 @@
<strong>Vue Form Control</strong> <small>Readonly</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Add the <code>readonly</code> boolean attribute on an input to
prevent modification of the input&#39;s value. Read-only inputs
appear lighter (just like disabled inputs), but retain the standard
@@ -125,7 +125,7 @@
<strong>Vue Form Control</strong> <small>Readonly plain text</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
If you want to have <code>&lt;input readonly&gt;</code> elements in
your form styled as plain text, use the
<code>plain-text</code> boolean property to remove the default form
src/views/forms/InputGroup.vue
+8 -8
View File
@@ -6,7 +6,7 @@
<strong>Vue Input group</strong> <small>Basic example</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Place one add-on or button on either side of an input. You may also
place one on both sides of an input. Remember to place
<code>&lt;CFormLabel&gt;</code>s outside the input group.
@@ -59,7 +59,7 @@
<strong>Vue Input group</strong> <small>Wrapping</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Input groups wrap by default via <code>flex-wrap: wrap</code> in
order to accommodate custom form field validation within an input
group. You may disable this with <code>.flex-nowrap</code>.
@@ -83,13 +83,13 @@
<strong>Vue Input group</strong> <small>Sizing</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Add the relative form sizing classes to the
<code>&lt;CInputGroup&gt;</code> itself and contents within will
automatically resize—no need for repeating the form control size
classes on each element.
</p>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
<strong
>Sizing on the individual input group elements
isn&#39;tsupported.</strong
@@ -129,7 +129,7 @@
<strong>Vue Input group</strong> <small>Checkboxes and radios</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Place any checkbox or radio option within an input group&#39;s addon
instead of text.
</p>
@@ -164,7 +164,7 @@
<strong>Vue Input group</strong> <small>Multiple inputs</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
While multiple <code>&lt;CFormInput&gt;</code>s are supported
visually, validation styles are only available for input groups with
a single <code>&lt;CFormInput&gt;</code>.
@@ -185,7 +185,7 @@
<strong>Vue Input group</strong> <small>Multiple addons</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Multiple add-ons are supported and can be mixed with checkbox and
radio input versions..
</p>
@@ -214,7 +214,7 @@
<strong>Vue Input group</strong> <small>Button addons</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Multiple add-ons are supported and can be mixed with checkbox and
radio input versions..
</p>
src/views/forms/Layout.vue
+10 -10
View File
@@ -6,7 +6,7 @@
<strong>Layout</strong> <small>Form grid</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
More complex forms can be built using our grid classes. Use these
for form layouts that require multiple columns, varied widths, and
additional alignment options.
@@ -30,7 +30,7 @@
<strong>Layout</strong> <small>Gutters</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
By adding
<a href="https://coreui.io/docs/layout/gutters/"
>gutter modifier classes</a
@@ -48,7 +48,7 @@
</CCol>
</CRow>
</DocsExample>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
More complex layouts can also be created with the grid system.
</p>
<DocsExample href="forms/layout.html#gutters">
@@ -108,7 +108,7 @@
<strong>Layout</strong> <small>Horizontal form</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Create horizontal forms with the grid by adding the
<code>.row</code> class to form groups and using the
<code>.col-*-*</code> classes to specify the width of your labels
@@ -116,7 +116,7 @@
<code>&lt;CFormLabel&gt;</code>s as well so they&#39;re vertically
centered with their associated form controls.
</p>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
At times, you maybe need to use margin or padding utilities to
create that perfect alignment you need. For example, we&#39;ve
removed the <code>padding-top</code> on our stacked radio inputs
@@ -192,7 +192,7 @@
<strong>Layout</strong> <small>Horizontal form label sizing</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Be sure to use <code>.col-form-label-sm</code> or
<code>.col-form-label-lg</code> to your
<code>&lt;CFormLabel&gt;</code>s or <code>&lt;legend&gt;</code>s to
@@ -254,7 +254,7 @@
<strong>Layout</strong> <small>Column sizing</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
As shown in the previous examples, our grid system allows you to
place any number of
<code>&lt;CCol&gt;</code>s within a <code>&lt;CRow&gt;</code>.
@@ -286,7 +286,7 @@
<strong>Layout</strong> <small>Auto-sizing</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
The example below uses a flexbox utility to vertically center the
contents and changes
<code>&lt;CCol&gt;</code> to
@@ -337,7 +337,7 @@
</CCol>
</CForm>
</DocsExample>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
You can then remix that once again with size-specific column
classes.
</p>
@@ -396,7 +396,7 @@
<strong>Layout</strong> <small>Inline forms</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Use the <code>&lt;CCol xs=&#34;auto&#34;&gt;</code> class to create
horizontal layouts. By adding
<a href="https://coreui.io/docs/layout/gutters/"
src/views/forms/Range.vue
+4 -4
View File
@@ -4,7 +4,7 @@
<CCard class="mb-4">
<CCardHeader> <strong>Vue Range</strong> <small></small> </CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Create custom
<code>&lt;input type=&#34;range&#34;&gt;</code> controls with
<code>&lt;CFormRange&gt;</code>.
@@ -22,7 +22,7 @@
<strong>Vue Range</strong> <small>Disabled</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Add the <code>disabled</code> boolean attribute on an input to give
it a grayed out appearance and remove pointer events.
</p>
@@ -39,7 +39,7 @@
<strong>Vue Range</strong> <small>Min and max</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Range inputs have implicit values for <code>min</code> and
<code>max</code>— <code>0</code> and <code>100</code>, respectively.
You may specify new values for those using the <code>min</code> and
@@ -58,7 +58,7 @@
<strong>Vue Range</strong> <small>Steps</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
By default, range inputs &#34;snap&#34; to integer values. To change
this, you can specify a <code>step</code> value. In the example
below, we double the number of steps by using
src/views/forms/Select.vue
+4 -4
View File
@@ -23,7 +23,7 @@
<strong>Vue Select</strong> <small>Sizing</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
You may also choose from small and large custom selects to match our
similarly sized text inputs.
</p>
@@ -49,7 +49,7 @@
<option value="3">Three</option>
</CFormSelect>
</DocsExample>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
The <code>multiple</code> attribute is also supported:
</p>
<DocsExample href="forms/select.html#sizing">
@@ -64,7 +64,7 @@
<option value="3">Three</option>
</CFormSelect>
</DocsExample>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
As is the <code>html-size</code> property:
</p>
<DocsExample href="forms/select.html#sizing">
@@ -88,7 +88,7 @@
<strong>Vue Select</strong> <small>Disabled</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Add the <code>disabled</code> boolean attribute on a select to give
it a grayed out appearance and remove pointer events.
</p>
src/views/forms/Validation.vue
+8 -8
View File
@@ -6,7 +6,7 @@
<strong>Validation</strong> <small>Custom styles</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
For custom CoreUI form validation messages, you&#39;ll need to add
the
<code>novalidate</code> boolean property to your
@@ -17,7 +17,7 @@
attempting to submit, you&#39;ll see the <code>:invalid</code> and
<code>:valid</code> styles applied to your form controls.
</p>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Custom feedback styles apply custom colors, borders, focus styles,
and background icons to better communicate feedback.
</p>
@@ -102,14 +102,14 @@
<strong>Validation</strong> <small>Browser defaults</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Not interested in custom validation feedback messages or writing
JavaScript to change form behaviors? All good, you can use the
browser defaults. Try submitting the form below. Depending on your
browser and OS, you&#39;ll see a slightly different style of
feedback.
</p>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
While these feedback styles cannot be styled with CSS, you can still
customize the feedback text through JavaScript.
</p>
@@ -195,13 +195,13 @@
<strong>Validation</strong> <small>Server side</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
We recommend using client-side validation, but in case you require
server-side validation, you can indicate invalid and valid form
fields with <code>invalid</code> and <code>valid</code> boolean
properties.
</p>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
For invalid fields, ensure that the invalid feedback/error message
is associated with the relevant form field using
<code>aria-describedby</code> (noting that this attribute allows
@@ -309,7 +309,7 @@
<strong>Validation</strong> <small>Supported elements</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Validation styles are available for the following form controls and
components:
</p>
@@ -399,7 +399,7 @@
<strong>Validation</strong> <small>Tooltips</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
If your form layout allows it, you can swap the text for the tooltip
to display validation feedback in a styled tooltip. Be sure to have
a parent with
src/views/notifications/Alerts.vue
+4 -4
View File
@@ -6,7 +6,7 @@
<strong>Vue Alert</strong>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Vue Alert is prepared for any length of text, as well as an optional
close button. For a styling, use one of the
<strong>required</strong> contextual <code>color</code> props (e.g.,
@@ -45,7 +45,7 @@
<strong>Vue Alert</strong> <small>Link color</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Use the <code>&lt;CAlertLink&gt;</code> component to immediately
give matching colored links inside any alert.
</p>
@@ -100,7 +100,7 @@
<strong>Vue Alert</strong> <small>Additional content</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Alert can also incorporate supplementary components &amp; elements
like heading, paragraph, and divider.
</p>
@@ -128,7 +128,7 @@
<strong>Vue Alert</strong> <small>Dismissing</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Alerts can also be easily dismissed. Just add the
<code>dismissible</code> prop.
</p>
src/views/notifications/Badges.vue
+6 -6
View File
@@ -6,7 +6,7 @@
<strong>Vue Badges</strong> <small>Dismissing</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Bootstrap badge scale to suit the size of the parent element by
using relative font sizing and <code>em</code> units.
</p>
@@ -18,7 +18,7 @@
<h5>Example heading <CBadge color="secondary">New</CBadge></h5>
<h6>Example heading <CBadge color="secondary">New</CBadge></h6>
</DocsExample>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Badges can be used as part of links or buttons to provide a counter.
</p>
<DocsExample href="components/badge.html">
@@ -26,11 +26,11 @@
Notifications <CBadge color="secondary">4</CBadge>
</CButton>
</DocsExample>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Remark that depending on how you use them, badges may be complicated
for users of screen readers and related assistive technologies.
</p>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Unless the context is clear, consider including additional context
with a visually hidden piece of additional text.
</p>
@@ -49,7 +49,7 @@
<strong>Vue Badges</strong> <small>Contextual variations</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Add any of the below-mentioned <code>color</code> props to modify
the presentation of a badge.
</p>
@@ -69,7 +69,7 @@
<strong>Vue Badges</strong> <small>Pill badges</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Apply the <code>shape=&#34;rounded-pill&#34;</code> prop to make
badges rounded.
</p>
src/views/notifications/Modals.vue
+10 -10
View File
@@ -6,7 +6,7 @@
<strong>Vue Modals</strong>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Below is a static modal example (meaning its
<code>position</code> and <code>display</code> have been
overridden). Included are the modal header, modal body (required for
@@ -40,7 +40,7 @@
<strong>Vue Modal</strong> <small>Live demo</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Toggle a working modal demo by clicking the button below. It will
slide down and fade in from the top of the page.
</p>
@@ -99,7 +99,7 @@
<strong>Vue Modal</strong> <small>Static backdrop</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
If you set <code>backdrop</code> property to <code>static</code>,
your modal will behave as though the backdrop is static, meaning it
will not close when clicking outside it. Click the button below to
@@ -161,7 +161,7 @@
<strong>Vue Modal</strong> <small>Scrolling long content</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
When modals become too long for the user's viewport or device, they
scroll independent of the page itself. Try the demo below to see
what we mean.
@@ -294,7 +294,7 @@
</CModalBody>
</CModal>
</DocsExample>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
You can also create a scrollable modal that allows scroll the modal
body by adding
<code>scrollable</code> prop.
@@ -437,7 +437,7 @@
<strong>Vue Modal</strong> <small>Vertically centered</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Add <code>alignment=&#34;center&#34;</code> to
<code>&lt;CModal&gt;</code> to vertically center the modal.
</p>
@@ -550,7 +550,7 @@
<strong>Vue Modal</strong> <small>Tooltips and popovers</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
<code>&lt;CTooltips&gt;</code> and
<code>&lt;CPopovers&gt;</code> can be placed within modals as
needed. When modals are closed, any tooltips and popovers within are
@@ -629,7 +629,7 @@
<strong>Vue Modal</strong> <small>Optional sizes</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Modals have three optional sizes, available via modifier classes to
be placed on a
<code>&lt;CModal&gt;</code>. These sizes kick in at certain
@@ -655,7 +655,7 @@
</tr>
<tr>
<td>Default</td>
<td class="text-medium-emphasis">None</td>
<td class="text-body-secondary">None</td>
<td>
<code>500px</code>
</td>
@@ -781,7 +781,7 @@
<strong>Vue Modal</strong> <small>Fullscreen Modal</small>
</CCardHeader>
<CCardBody>
<p class="text-medium-emphasis small">
<p class="text-body-secondary small">
Another override is the option to pop up a modal that covers the
user viewport, available via property <code>fullscrean</code>.
</p>
src/views/pages/Login.vue
+1 -1
View File
@@ -8,7 +8,7 @@
<CCardBody>
<CForm>
<h1>Login</h1>
<p class="text-medium-emphasis">Sign In to your account</p>
<p class="text-body-secondary">Sign In to your account</p>
<CInputGroup class="mb-3">
<CInputGroupText>
<CIcon icon="cil-user" />
src/views/pages/Page404.vue
+1 -1
View File
@@ -6,7 +6,7 @@
<div class="clearfix">
<h1 class="float-start display-3 me-4">404</h1>
<h4 class="pt-3">Oops! You're lost.</h4>
<p class="text-medium-emphasis float-start">
<p class="text-body-secondary float-start">
The page you are looking for was not found.
</p>
</div>
src/views/pages/Page500.vue
+1 -1
View File
@@ -6,7 +6,7 @@
<span class="clearfix">
<h1 class="float-start display-3 me-4">500</h1>
<h4 class="pt-3">Houston, we have a problem!</h4>
<p class="text-medium-emphasis float-start">
<p class="text-body-secondary float-start">
The page you are looking for is temporarily unavailable.
</p>
</span>
src/views/pages/Register.vue
+1 -1
View File
@@ -7,7 +7,7 @@
<CCardBody class="p-4">
<CForm>
<h1>Register</h1>
<p class="text-medium-emphasis">Create your account</p>
<p class="text-body-secondary">Create your account</p>
<CInputGroup class="mb-3">
<CInputGroupText>
<CIcon icon="cil-user" />
src/views/widgets/Widgets.vue
+4 -4
View File
@@ -289,7 +289,7 @@
</template>
<template #footer>
<CLink
class="fw-semibold font-xs text-medium-emphasis"
class="fw-semibold font-xs text-body-secondary"
href="https://coreui.io/"
rel="noopener norefferer"
target="_blank"
@@ -311,7 +311,7 @@
</template>
<template #footer>
<CLink
class="fw-semibold font-xs text-medium-emphasis"
class="fw-semibold font-xs text-body-secondary"
href="https://coreui.io/"
rel="noopener norefferer"
target="_blank"
@@ -333,7 +333,7 @@
</template>
<template #footer>
<CLink
class="fw-semibold font-xs text-medium-emphasis"
class="fw-semibold font-xs text-body-secondary"
href="https://coreui.io/"
rel="noopener norefferer"
target="_blank"
@@ -355,7 +355,7 @@
</template>
<template #footer>
<CLink
class="fw-semibold font-xs text-medium-emphasis"
class="fw-semibold font-xs text-body-secondary"
href="https://coreui.io/"
rel="noopener norefferer"
target="_blank"