From 7048a791ccb1d297d0a7109fac947c7792fd1c05 Mon Sep 17 00:00:00 2001 From: mrholek Date: Tue, 26 Sep 2023 23:38:41 +0200 Subject: [PATCH] refactor: change `.text-medium-emphasis` to `.text-body-secondary` --- src/views/base/Accordion.vue | 6 +-- src/views/base/Breadcrumbs.vue | 2 +- src/views/base/Cards.vue | 86 +++++++++++++++--------------- src/views/base/Carousels.vue | 12 ++--- src/views/base/Collapses.vue | 6 +-- src/views/base/ListGroups.vue | 30 +++++------ src/views/base/Navs.vue | 22 ++++---- src/views/base/Paginations.vue | 14 ++--- src/views/base/Placeholders.vue | 2 +- src/views/base/Popovers.vue | 2 +- src/views/base/Progress.vue | 14 ++--- src/views/base/Spinners.vue | 12 ++--- src/views/base/Tables.vue | 28 +++++----- src/views/base/Tooltips.vue | 6 +-- src/views/buttons/ButtonGroups.vue | 4 +- src/views/buttons/Buttons.vue | 28 +++++----- src/views/buttons/Dropdowns.vue | 20 +++---- src/views/dashboard/Dashboard.vue | 30 +++++------ src/views/forms/ChecksRadios.vue | 16 +++--- src/views/forms/FloatingLabels.vue | 12 ++--- src/views/forms/FormControl.vue | 8 +-- src/views/forms/InputGroup.vue | 16 +++--- src/views/forms/Layout.vue | 20 +++---- src/views/forms/Range.vue | 8 +-- src/views/forms/Select.vue | 8 +-- src/views/forms/Validation.vue | 16 +++--- src/views/notifications/Alerts.vue | 8 +-- src/views/notifications/Badges.vue | 12 ++--- src/views/notifications/Modals.vue | 20 +++---- src/views/pages/Login.vue | 2 +- src/views/pages/Page404.vue | 2 +- src/views/pages/Page500.vue | 2 +- src/views/pages/Register.vue | 2 +- src/views/widgets/Widgets.vue | 8 +-- 34 files changed, 242 insertions(+), 242 deletions(-) diff --git a/src/views/base/Accordion.vue b/src/views/base/Accordion.vue index e9e5a9fd..addf3053 100644 --- a/src/views/base/Accordion.vue +++ b/src/views/base/Accordion.vue @@ -6,7 +6,7 @@ Vue Accordion -

+

Click the accordions below to expand/collapse the accordion content.

@@ -62,7 +62,7 @@ Vue Accordion Flush -

+

Add flush to remove the default background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent @@ -121,7 +121,7 @@ Vue Accordion Always open -

+

Add always-open property to make accordion items stay open when another item is opened.

diff --git a/src/views/base/Breadcrumbs.vue b/src/views/base/Breadcrumbs.vue index f2840008..1052fca3 100644 --- a/src/views/base/Breadcrumbs.vue +++ b/src/views/base/Breadcrumbs.vue @@ -6,7 +6,7 @@ Vue Breadcrumb -

+

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 diff --git a/src/views/base/Cards.vue b/src/views/base/Cards.vue index f838ac75..cb071768 100644 --- a/src/views/base/Cards.vue +++ b/src/views/base/Cards.vue @@ -6,7 +6,7 @@ Card Example -

+

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'll fill the full width of its parent.

-

+

Below is an example of a basic card with mixed content and a fixed width. Cards have no fixed width to start, so they'll naturally fill the full width of its parent element. @@ -43,7 +43,7 @@ Card Body -

+

The main block of a card is the <CCardBody>. Use it whenever you need a padded section within a card.

@@ -61,14 +61,14 @@ Card Titles, text, and links -

+

Card titles are managed by <CCardTitle> component. Identically, links are attached and collected next to each other by <CCardLink> component.

-

+

Subtitles are managed by <CCardSubtitle> component. If the <CCardTitle> also, the @@ -80,7 +80,7 @@ Card title - Card subtitle @@ -99,7 +99,7 @@ Card Images -

+

.card-img-top places a picture to the top of the card. With .card-text, text can be added to the card. Text within .card-text can additionally be styled with the @@ -125,7 +125,7 @@ Card List groups -

+

Create lists of content in a card with a flush list group.

@@ -170,7 +170,7 @@ Card Kitchen sink -

+

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 @@ Card Header and footer -

+

Add an optional header and/or footer within a card.

@@ -221,7 +221,7 @@ -

+

Card headers can be styled by adding ex. component="h5".

@@ -266,7 +266,7 @@ Go somewhere - 2 days ago + 2 days ago @@ -276,14 +276,14 @@ Card Body -

+

Cards assume no specific width to start, so they'll be 100% wide unless otherwise stated. You can adjust this as required with custom CSS, grid classes, grid Sass mixins, or services.

Using grid markup

-

+

Using the grid, wrap cards in columns and rows as needed.

@@ -315,7 +315,7 @@

Using utilities

-

+

Use some of available sizing utilities Using custom CSS -

+

Use custom CSS in your stylesheets or as inline styles to set a width.

@@ -370,7 +370,7 @@ Card Text alignment -

+

You can instantly change the text arrangement of any card—in its whole or specific parts—with Card Navigation -

+

Add some navigation to a <CCardHeader> with our <CNav> component.

@@ -482,7 +482,7 @@ Card Image caps -

+

Similar to headers and footers, cards can include top and bottom "image caps"—images at the top or bottom of a card.

@@ -499,7 +499,7 @@ little bit longer. - Last updated 3 mins ago @@ -516,7 +516,7 @@ little bit longer. - Last updated 3 mins ago @@ -535,12 +535,12 @@ Card Card styles -

+

Cards include various options for customizing their backgrounds, borders, and color.

Background and color

-

+

Use color property to change the appearance of a card.

@@ -584,7 +584,7 @@

Border

-

+

Use border utilities

Top border

-

+

Use border utilitiesCard Card groups -

+

Use card groups to render cards as a single, attached element with equal width and height columns. Card groups start off stacked and use display: flex; to become attached with uniform @@ -694,7 +694,7 @@ longer. - Last updated 3 mins ago @@ -709,7 +709,7 @@ additional content. - Last updated 3 mins ago @@ -725,7 +725,7 @@ content than the first to show that equal height action. - Last updated 3 mins ago @@ -733,7 +733,7 @@ -

+

When using card groups with footers, their content will automatically line up.

@@ -750,7 +750,7 @@ - Last updated 3 mins ago @@ -765,7 +765,7 @@ - Last updated 3 mins ago @@ -781,7 +781,7 @@ - Last updated 3 mins ago @@ -797,7 +797,7 @@ Card Grid cards -

+

Use the CRow component and set {xs|sm|md|lg|xl|xxl}="{ cols: * }" property to control how many grid columns (wrapped around your @@ -821,7 +821,7 @@ - Last updated 3 mins ago @@ -839,7 +839,7 @@ - Last updated 3 mins ago @@ -857,7 +857,7 @@ - Last updated 3 mins ago @@ -875,7 +875,7 @@ - Last updated 3 mins ago @@ -883,7 +883,7 @@ -

+

Change it to md="{ cols: 3}" and you'll see the fourth card wrap.

@@ -901,7 +901,7 @@ - Last updated 3 mins ago @@ -919,7 +919,7 @@ - Last updated 3 mins ago @@ -937,7 +937,7 @@ - Last updated 3 mins ago @@ -955,7 +955,7 @@ - Last updated 3 mins ago diff --git a/src/views/base/Carousels.vue b/src/views/base/Carousels.vue index a8e50be6..3433ec1c 100644 --- a/src/views/base/Carousels.vue +++ b/src/views/base/Carousels.vue @@ -6,7 +6,7 @@ Vue Carousels Slide only -

+

Here’s a carousel with slides

@@ -29,7 +29,7 @@ Vue Carousels With controls -

+

Adding in the previous and next controls by controls property.

@@ -53,7 +53,7 @@ Vue Carousels With indicators -

+

You can attach the indicators to the carousel, lengthwise the controls, too.

@@ -77,7 +77,7 @@ Vue Carousels With captions -

+

You can add captions to slides with the <CCarouselCaption> element within any <CCarouselItem>. They can be immediately hidden @@ -125,7 +125,7 @@ Vue Carousels Crossfade -

+

Add transition="crossfade" to your carousel to animate slides with a fade transition instead of a slide.

@@ -149,7 +149,7 @@ Vue Carousels Dark variant -

+

Add dark property to the CCarousel for darker controls, indicators, and captions. Controls have been inverted from their default white fill with the diff --git a/src/views/base/Collapses.vue b/src/views/base/Collapses.vue index 1e62460d..34d00f96 100644 --- a/src/views/base/Collapses.vue +++ b/src/views/base/Collapses.vue @@ -6,7 +6,7 @@ Vue Collapse -

+

You can use a link or a button component.

@@ -34,7 +34,7 @@ Vue Collapse Horizontal -

+

The collapse plugin also supports horizontal collapsing. Add the horizontal property to transition the width instead of height and set a @@ -67,7 +67,7 @@ Vue Collapse multi target -

+

A <CButton> can show and hide multiple elements.

Toggle multiple targets

diff --git a/src/views/base/ListGroups.vue b/src/views/base/ListGroups.vue index 13933e3f..1cf4cfbb 100644 --- a/src/views/base/ListGroups.vue +++ b/src/views/base/ListGroups.vue @@ -6,7 +6,7 @@ Vue List Group Basic example -

+

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 @@ Vue List Group Active items -

+

Add active boolean property to a <CListGroupItem> to show the current active selection. @@ -52,7 +52,7 @@ Vue List Group Disabled items -

+

Add disabled boolean property to a <CListGroupItem> to make it appear disabled.

@@ -74,7 +74,7 @@ Vue List Group Links and buttons -

+

Use <a>s or <button>s to create actionable list group items with hover, disabled, and active states by adding @@ -112,7 +112,7 @@ Vue List Group Flush -

+

Add flush 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 @@ Vue List Group Horizontal -

+

Add layout="horizontal" to change the layout of list group items from vertical to horizontal across all breakpoints. Alternatively, choose a responsive variant @@ -171,7 +171,7 @@ Vue List Group Contextual classes -

+

Use contextual classes to style list items with a stateful background and color.

@@ -195,7 +195,7 @@ > -

+

Contextual classes also work with <a>s or <button>s. Note the addition of the hover styles here not present in the previous example. Also supported is the @@ -235,7 +235,7 @@ Vue List Group With badges -

+

Add badges to any list group item to show unread counts, activity, and more.

@@ -270,7 +270,7 @@ Vue List Group Custom content -

+

Add nearly any HTML within, even for linked list groups like the one below, with the help of

List group item heading
- 3 days ago + 3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

- Donec id elit non mi porta.
List group item heading
- 3 days ago + 3 days ago

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

- Donec id elit non mi porta. @@ -327,7 +327,7 @@ Vue List Group Checkboxes and radios -

+

Place CoreUI's checkboxes and radios within list group items and customize as needed.

diff --git a/src/views/base/Navs.vue b/src/views/base/Navs.vue index 8440b764..652afd87 100644 --- a/src/views/base/Navs.vue +++ b/src/views/base/Navs.vue @@ -6,7 +6,7 @@ Vue Navs Base navs -

+

The base .nav 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 @@ -

+

Classes are used throughout, so your markup can be super flexible. Use <ul>s like above, <ol> if the order of your items is important, or roll your own with a @@ -54,7 +54,7 @@ Vue Navs Horizontal alignment -

+

Change the horizontal alignment of your nav with flexbox utilities @@ -62,7 +62,7 @@ . By default, navs are left-aligned, but you can easily change them to center or right aligned.

-

+

Centered with .justify-content-center:

@@ -81,7 +81,7 @@ -

+

Right-aligned with .justify-content-end:

@@ -109,7 +109,7 @@ Vue Navs Vertical -

+

Stack your navigation by changing the flex item direction with the{' '} .flex-column utility. Need to stack them on some @@ -141,7 +141,7 @@ Vue Navs Tabs -

+

Takes the basic nav from above and adds the variant="tabs" class to generate a tabbed interface @@ -171,7 +171,7 @@ Vue Navs Pills -

+

Take that same HTML, but use variant="pills" instead:

@@ -200,7 +200,7 @@ Vue Navs Fill and justify -

+

Force your .nav's contents to extend the full available width one of two modifier classes. To proportionately fill all available space with your .nav-items, use @@ -223,7 +223,7 @@ -

+

For equal-width elements, use layout="justified". All horizontal space will be occupied by nav links, but unlike the .nav-fill above, every nav @@ -254,7 +254,7 @@ Vue Navs Working with flex utilities -

+

If you need responsive nav variations, consider using a series of{' '} flexbox utilitiesVue Pagination -

+

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 @@ <nav> element to identify it as a navigation section to screen readers and other assistive technologies.

-

+

In addition, as pages likely have more than one such navigation section, it's advisable to provide a descriptive aria-label for the <nav> to reflect @@ -40,7 +40,7 @@ Vue Pagination Working with icons -

+

Looking to use an icon or symbol in place of text for some pagination links? Be sure to provide proper screen reader support with aria attributes. @@ -68,12 +68,12 @@ Disabled and active states -

+

Pagination links are customizable for different circumstances. Use disabled for links that appear un-clickable and .active to indicate the current page.

-

+

While the disabled prop uses pointer-events: none to try to disable the link functionality of <a>s, that CSS property is @@ -106,7 +106,7 @@ Vue Pagination Sizing -

+

Fancy larger or smaller pagination? Add size="lg" or size="sm" for additional sizes. @@ -138,7 +138,7 @@ Vue Pagination Alignment -

+

Change the alignment of pagination components with flexbox utilitiesVue Placeholder -

+

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. diff --git a/src/views/base/Popovers.vue b/src/views/base/Popovers.vue index f10d0a3c..1127cf3c 100644 --- a/src/views/base/Popovers.vue +++ b/src/views/base/Popovers.vue @@ -29,7 +29,7 @@ Vue Popover Four directions -

+

Four options are available: top, right, bottom, and left aligned. Directions are mirrored when using CoreUI for Vue in RTL.

diff --git a/src/views/base/Progress.vue b/src/views/base/Progress.vue index 200b2231..ff300e5a 100644 --- a/src/views/base/Progress.vue +++ b/src/views/base/Progress.vue @@ -6,7 +6,7 @@ Vue Progress Basic example -

+

Progress components are built with two HTML elements, some CSS to set the width, and a few attributes. We don'tuse Vue Progress Labels -

+

Add labels to your progress bars by placing text within the <CProgressBar>.

@@ -61,7 +61,7 @@ Vue Progress Height -

+

We only set a height value on the <CProgress>, so if you change that value the inner <CProgressBar> will automatically resize @@ -84,7 +84,7 @@ Vue Progress Backgrounds -

+

Use color prop to change the appearance of individual progress bars.

@@ -111,7 +111,7 @@ Vue Progress Multiple bars -

+

Include multiple progress bars in a progress component if you need.

@@ -130,7 +130,7 @@ Vue Progress Striped -

+

Add variant="striped" to any <CProgressBar> to apply a stripe via CSS gradient over the progress bar's background color. @@ -158,7 +158,7 @@ Vue Progress Animated stripes -

+

The striped gradient can also be animated. Add animated property to <CProgressBar> to animate the stripes right to diff --git a/src/views/base/Spinners.vue b/src/views/base/Spinners.vue index 93658024..8c366349 100644 --- a/src/views/base/Spinners.vue +++ b/src/views/base/Spinners.vue @@ -6,13 +6,13 @@ Vue Spinner Border -

+

Use the border spinners for a lightweight loading indicator.

-

+

The border spinner uses currentColor for its border-color. You can use any of our text color utilities on the standard spinner. @@ -36,14 +36,14 @@ Vue Spinner Growing -

+

If you don'tfancy a border spinner, switch to the grow spinner. While it doesn't technically spin, it does repeatedly grow!

-

+

Once again, this spinner is built with currentColor, so you can easily change its appearance. Here it is in blue, along with the supported variants. @@ -67,7 +67,7 @@ Vue Spinner Size -

+

Add size="sm" property to make a smaller spinner that can quickly be used within other components.

@@ -84,7 +84,7 @@ Vue Spinner Buttons -

+

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. diff --git a/src/views/base/Tables.vue b/src/views/base/Tables.vue index b0c8acef..7247135b 100644 --- a/src/views/base/Tables.vue +++ b/src/views/base/Tables.vue @@ -6,7 +6,7 @@ Vue Table Basic example -

+

Using the most basic table CoreUI, here's how <CTable>-based tables look in CoreUI.

@@ -50,7 +50,7 @@ Vue Table Variants -

+

Use contextual classes to color tables, table rows or individual cells.

@@ -121,7 +121,7 @@ Vue Table Striped rows -

+

Use striped property to add zebra-striping to any table row within the <CTableBody>.

@@ -156,7 +156,7 @@ -

+

These classes can also be added to table variants:

@@ -230,7 +230,7 @@ Vue Table Hoverable rows -

+

Use hover property to enable a hover state on table rows within a <CTableBody>.

@@ -411,7 +411,7 @@ Vue Table Bordered tables -

+

Add bordered property for borders on all sides of the table and cells.

@@ -446,7 +446,7 @@ -

+

Border color utilities @@ -492,7 +492,7 @@ Vue Table Tables without borders -

+

Add borderless property for a table without borders.

@@ -566,7 +566,7 @@ Vue Table Small tables -

+

Add small property to make any <CTable> more compact by cutting all cell padding in half. @@ -611,7 +611,7 @@ Vue Table Vertical alignment -

+

Table cells of <CTableHead> are always vertical aligned to the bottom. Table cells in <CTableBody> inherit their alignment from @@ -705,7 +705,7 @@ Vue Table Nesting -

+

Border styles, active styles, and table variants are not inherited by nested tables.

@@ -779,7 +779,7 @@ Vue Table Table head -

+

Similar to tables and dark tables, use the modifier prop color="light" or color="dark" to make @@ -905,7 +905,7 @@ Vue Table Captions -

+

A <CTableCaption> functions like a heading for a table. It helps users with screen readers to find a table and understand what it's about and decide if they want to read it. @@ -943,7 +943,7 @@ -

+

You can also put the <CTableCaption> on the top of the table with caption="top".

diff --git a/src/views/base/Tooltips.vue b/src/views/base/Tooltips.vue index f7195edf..31bc9841 100644 --- a/src/views/base/Tooltips.vue +++ b/src/views/base/Tooltips.vue @@ -6,11 +6,11 @@ Vue Tooltips Basic example -

+

Hover over the links below to see tooltips:

-

+

Tight pants next level keffiyeh you probably haven't heard of them. Photo booth beard raw denim letterpress @@ -26,7 +26,7 @@ freegan cred raw denim single-origin coffee viral.

-

+

Hover over the links below to see tooltips:

diff --git a/src/views/buttons/ButtonGroups.vue b/src/views/buttons/ButtonGroups.vue index ecd83ae0..d1b97bf5 100644 --- a/src/views/buttons/ButtonGroups.vue +++ b/src/views/buttons/ButtonGroups.vue @@ -269,7 +269,7 @@ Vue Button Group Nesting -

+

Put a <CButtonGroup> inside another <CButtonGroup> when you need dropdown menus combined with a series of buttons. @@ -302,7 +302,7 @@ Vue Button Group Vertical variation -

+

Create a set of buttons that appear vertically stacked rather than horizontally. Split button dropdowns are not supported here. diff --git a/src/views/buttons/Buttons.vue b/src/views/buttons/Buttons.vue index 4dbd6bc7..b99174e9 100644 --- a/src/views/buttons/Buttons.vue +++ b/src/views/buttons/Buttons.vue @@ -6,7 +6,7 @@ Vue Button -

+

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 @@ Vue Button with icons -

+

You can combine button with our CoreUI Icons.

@@ -107,14 +107,14 @@ Vue Button Button components -

+

The <CButton> component are designed for <button> , <a> or <input> elements (though some browsers may apply a slightly different rendering).

-

+

If you're using <CButton> component as <a> elements that are used to trigger functionality ex. collapsing content, these links should be given a @@ -154,7 +154,7 @@ Vue Button outline -

+

If you need a button, but without the strong background colors. Set variant="outline" prop to remove all background colors. @@ -205,7 +205,7 @@ Vue Button ghost -

+

If you need a ghost variant of button, set variant="ghost" prop to remove all background colors. @@ -256,7 +256,7 @@ Vue Button Sizes -

+

Larger or smaller buttons? Add size="lg" or size="sm" for additional sizes.

@@ -333,7 +333,7 @@ Vue Button Disabled state -

+

Add the disabled boolean prop to any <CButton> component to make buttons look inactive. Disabled button has @@ -346,11 +346,11 @@ Button -

+

Disabled buttons using the <a> component act a little different:

-

+

<a>s don'tsupport the disabled attribute, so CoreUI has to add .disabled class to make buttons look inactive. CoreUI @@ -381,7 +381,7 @@ Vue Button Block buttons -

+

Create buttons that span the full width of a parent—by using utilities.

@@ -391,7 +391,7 @@ Button -

+

Here we create a responsive variation, starting with vertically stacked buttons until the md breakpoint, where .d-md-block replaces the .d-grid class, @@ -404,7 +404,7 @@ Button -

+

You can adjust the width of your block buttons with grid column width classes. For example, for a half-width "block button", use .col-6. Center it horizontally with @@ -416,7 +416,7 @@ Button -

+

Additional utilities can be used to adjust the alignment of buttons when horizontal. Here we've taken our previous responsive example and added some flex utilities and a margin utility on the diff --git a/src/views/buttons/Dropdowns.vue b/src/views/buttons/Dropdowns.vue index fb248b6d..8b0b93b6 100644 --- a/src/views/buttons/Dropdowns.vue +++ b/src/views/buttons/Dropdowns.vue @@ -6,7 +6,7 @@ Vue Dropdown Single button -

+

Here's how you can put them to work with either <button> elements: @@ -23,7 +23,7 @@ -

+

The best part is you can do this with any button variant, too:

@@ -61,13 +61,13 @@ Vue Dropdown Split button -

+

Similarly, create split button dropdowns with virtually the same markup as single button dropdowns, but with the addition of boolean prop split for proper spacing around the dropdown caret.

-

+

We use this extra class to reduce the horizontal padding on either side of the caret by 25% and remove the margin-left that's attached for normal button @@ -113,7 +113,7 @@ Vue Dropdown Sizing -

+

Button dropdowns work with buttons of all sizes, including default and split dropdown buttons.

@@ -180,7 +180,7 @@ Vue Dropdown Single button -

+

Opt into darker dropdowns to match a dark navbar or custom style by set dark property. No changes are required to the dropdown @@ -200,7 +200,7 @@ -

+

And putting it to use in a navbar:

@@ -251,7 +251,7 @@ Vue Dropdown Dropup -

+

Trigger dropdown menus above elements by adding direction="dropup" to the <CDropdown> @@ -289,7 +289,7 @@ Vue Dropdown Dropright -

+

Trigger dropdown menus at the right of the elements by adding direction="dropend" to the <CDropdown> @@ -327,7 +327,7 @@ Vue Dropdown Dropleft -

+

Trigger dropdown menus at the left of the elements by adding direction="dropstart" to the <CDropdown> diff --git a/src/views/dashboard/Dashboard.vue b/src/views/dashboard/Dashboard.vue index a9cfe60a..e654f717 100644 --- a/src/views/dashboard/Dashboard.vue +++ b/src/views/dashboard/Dashboard.vue @@ -8,7 +8,7 @@

Traffic

-
January 2021
+
January 2021
@@ -36,7 +36,7 @@ -
Visits
+
Visits
29.703 Users (40%) -
Unique
+
Unique
24.093 Users (20%) -
Pageviews
+
Pageviews
78.706 Views (60%) -
New Users
+
New Users
22.123 Users (80%) -
Bounce Rate
+
Bounce Rate
Average Rate (40.15%) @@ -102,7 +102,7 @@
-
New Clients
+
New Clients
9,123
 @@ -110,7 +110,7 @@
-
+
Recurring Clients
22,643
@@ -124,7 +124,7 @@ class="progress-group mb-4" >
- {{ + {{ item.title }}
@@ -140,7 +140,7 @@
-
Pageviews
+
Pageviews
78,623
@@ -148,7 +148,7 @@
-
Organic
+
Organic
49,123
@@ -181,7 +181,7 @@ {{ item.title }} {{ item.value }} - ({{ item.percent }}%) @@ -221,7 +221,7 @@
{{ item.user.name }}
-
+
{{ item.user.new ? 'New' : 'Recurring' }} | {{ item.user.registered }}
@@ -239,7 +239,7 @@ {{ item.usage.value }}%
- + {{ item.usage.period }}
@@ -254,7 +254,7 @@ -
Last login
+
Last login
{{ item.activity }}
diff --git a/src/views/forms/ChecksRadios.vue b/src/views/forms/ChecksRadios.vue index b4e86fa9..b41d44ca 100644 --- a/src/views/forms/ChecksRadios.vue +++ b/src/views/forms/ChecksRadios.vue @@ -23,7 +23,7 @@ Vue Checkbox Disabled -

+

Add the disabled attribute and the associated <label>s are automatically styled to match with a lighter color to help indicate the input's state. @@ -41,7 +41,7 @@ Vue Radio -

+

Add the disabled attribute and the associated <label>s are automatically styled to match with a lighter color to help indicate the input's state. @@ -96,7 +96,7 @@ Vue Switches -

+

A switch has the markup of a custom checkbox but uses the switch boolean properly to render a toggle switch. Switches also support the disabled attribute. @@ -158,7 +158,7 @@ Default layout (stacked) -

+

By default, any number of checkboxes and radios that are immediate sibling will be vertically stacked and appropriately spaced.

@@ -200,7 +200,7 @@ Vue Checks and Radios Inline -

+

Group checkboxes or radios on the same horizontal row by adding inline boolean property to any <CFormCheck>. @@ -252,7 +252,7 @@ Vue Checks and Radios Without labels -

+

Remember to still provide some form of accessible name for assistive technologies (for instance, using aria-label).

@@ -279,7 +279,7 @@ Toggle buttons -

+

Create button-like checkboxes and radio buttons by using button boolean property on the <CFormCheck> component. These toggle buttons can @@ -349,7 +349,7 @@ />

Outlined styles

-

+

Different variants of button, such at the various outlined styles, are supported.

diff --git a/src/views/forms/FloatingLabels.vue b/src/views/forms/FloatingLabels.vue index 7d2c452e..0ecc2ae9 100644 --- a/src/views/forms/FloatingLabels.vue +++ b/src/views/forms/FloatingLabels.vue @@ -6,7 +6,7 @@ Vue Floating labels -

+

Wrap a pair of <CFormInput> and <CFormLabel> elements in CFormFloating to enable floating labels with textual @@ -34,7 +34,7 @@ Password -

+

When there's a value already defined, <CFormLabel> s will automatically adjust to their floated position. @@ -59,7 +59,7 @@ Vue Floating labels Textareas -

+

By default, <CFormTextarea>s will be the same height as <CFormInput>s.

@@ -72,7 +72,7 @@ Comments -

+

To set a custom height on your <CFormTextarea;>, do not use the rows attribute. Instead, set an explicit height (either inline or via custom CSS). @@ -96,7 +96,7 @@ Vue Floating labels Selects -

+

Other than <CFormInput>, floating labels are only available on <CFormSelect>s. They work in the same way, but unlike <CFormInput>s, they'll @@ -130,7 +130,7 @@ Vue Floating labels Layout -

+

When working with the CoreUI for Bootstrap grid system, be sure to place form elements within column classes.

diff --git a/src/views/forms/FormControl.vue b/src/views/forms/FormControl.vue index 560a6adc..c36e6d00 100644 --- a/src/views/forms/FormControl.vue +++ b/src/views/forms/FormControl.vue @@ -38,7 +38,7 @@ Vue Form Control Sizing -

+

Set heights using size property like size="lg" and size="sm".

@@ -72,7 +72,7 @@ Vue Form Control Disabled -

+

Add the disabled boolean attribute on an input to give it a grayed out appearance and remove pointer events.

@@ -102,7 +102,7 @@ Vue Form Control Readonly -

+

Add the readonly boolean attribute on an input to prevent modification of the input's value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard @@ -125,7 +125,7 @@ Vue Form Control Readonly plain text -

+

If you want to have <input readonly> elements in your form styled as plain text, use the plain-text boolean property to remove the default form diff --git a/src/views/forms/InputGroup.vue b/src/views/forms/InputGroup.vue index 7014beff..7322fc69 100644 --- a/src/views/forms/InputGroup.vue +++ b/src/views/forms/InputGroup.vue @@ -6,7 +6,7 @@ Vue Input group Basic example -

+

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 <CFormLabel>s outside the input group. @@ -59,7 +59,7 @@ Vue Input group Wrapping -

+

Input groups wrap by default via flex-wrap: wrap in order to accommodate custom form field validation within an input group. You may disable this with .flex-nowrap. @@ -83,13 +83,13 @@ Vue Input group Sizing -

+

Add the relative form sizing classes to the <CInputGroup> itself and contents within will automatically resize—no need for repeating the form control size classes on each element.

-

+

Sizing on the individual input group elements isn'tsupported.Vue Input group Checkboxes and radios -

+

Place any checkbox or radio option within an input group's addon instead of text.

@@ -164,7 +164,7 @@ Vue Input group Multiple inputs -

+

While multiple <CFormInput>s are supported visually, validation styles are only available for input groups with a single <CFormInput>. @@ -185,7 +185,7 @@ Vue Input group Multiple addons -

+

Multiple add-ons are supported and can be mixed with checkbox and radio input versions..

@@ -214,7 +214,7 @@ Vue Input group Button addons -

+

Multiple add-ons are supported and can be mixed with checkbox and radio input versions..

diff --git a/src/views/forms/Layout.vue b/src/views/forms/Layout.vue index 4e508ab8..aae8cc4f 100644 --- a/src/views/forms/Layout.vue +++ b/src/views/forms/Layout.vue @@ -6,7 +6,7 @@ Layout Form grid -

+

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 @@ Layout Gutters -

+

By adding gutter modifier classes -

+

More complex layouts can also be created with the grid system.

@@ -108,7 +108,7 @@ Layout Horizontal form -

+

Create horizontal forms with the grid by adding the .row class to form groups and using the .col-*-* classes to specify the width of your labels @@ -116,7 +116,7 @@ <CFormLabel>s as well so they're vertically centered with their associated form controls.

-

+

At times, you maybe need to use margin or padding utilities to create that perfect alignment you need. For example, we've removed the padding-top on our stacked radio inputs @@ -192,7 +192,7 @@ Layout Horizontal form label sizing -

+

Be sure to use .col-form-label-sm or .col-form-label-lg to your <CFormLabel>s or <legend>s to @@ -254,7 +254,7 @@ Layout Column sizing -

+

As shown in the previous examples, our grid system allows you to place any number of <CCol>s within a <CRow>. @@ -286,7 +286,7 @@ Layout Auto-sizing -

+

The example below uses a flexbox utility to vertically center the contents and changes <CCol> to @@ -337,7 +337,7 @@ -

+

You can then remix that once again with size-specific column classes.

@@ -396,7 +396,7 @@ Layout Inline forms -

+

Use the <CCol xs="auto"> class to create horizontal layouts. By adding Vue Range -

+

Create custom <input type="range"> controls with <CFormRange>. @@ -22,7 +22,7 @@ Vue Range Disabled -

+

Add the disabled boolean attribute on an input to give it a grayed out appearance and remove pointer events.

@@ -39,7 +39,7 @@ Vue Range Min and max -

+

Range inputs have implicit values for min and max— 0 and 100, respectively. You may specify new values for those using the min and @@ -58,7 +58,7 @@ Vue Range Steps -

+

By default, range inputs "snap" to integer values. To change this, you can specify a step value. In the example below, we double the number of steps by using diff --git a/src/views/forms/Select.vue b/src/views/forms/Select.vue index 765cddfd..96a75f78 100644 --- a/src/views/forms/Select.vue +++ b/src/views/forms/Select.vue @@ -23,7 +23,7 @@ Vue Select Sizing -

+

You may also choose from small and large custom selects to match our similarly sized text inputs.

@@ -49,7 +49,7 @@ -

+

The multiple attribute is also supported:

@@ -64,7 +64,7 @@ -

+

As is the html-size property:

@@ -88,7 +88,7 @@ Vue Select Disabled -

+

Add the disabled boolean attribute on a select to give it a grayed out appearance and remove pointer events.

diff --git a/src/views/forms/Validation.vue b/src/views/forms/Validation.vue index 94bc5f67..905325ed 100644 --- a/src/views/forms/Validation.vue +++ b/src/views/forms/Validation.vue @@ -6,7 +6,7 @@ Validation Custom styles -

+

For custom CoreUI form validation messages, you'll need to add the novalidate boolean property to your @@ -17,7 +17,7 @@ attempting to submit, you'll see the :invalid and :valid styles applied to your form controls.

-

+

Custom feedback styles apply custom colors, borders, focus styles, and background icons to better communicate feedback.

@@ -102,14 +102,14 @@ Validation Browser defaults -

+

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'll see a slightly different style of feedback.

-

+

While these feedback styles cannot be styled with CSS, you can still customize the feedback text through JavaScript.

@@ -195,13 +195,13 @@ Validation Server side -

+

We recommend using client-side validation, but in case you require server-side validation, you can indicate invalid and valid form fields with invalid and valid boolean properties.

-

+

For invalid fields, ensure that the invalid feedback/error message is associated with the relevant form field using aria-describedby (noting that this attribute allows @@ -309,7 +309,7 @@ Validation Supported elements -

+

Validation styles are available for the following form controls and components:

@@ -399,7 +399,7 @@ Validation Tooltips -

+

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 diff --git a/src/views/notifications/Alerts.vue b/src/views/notifications/Alerts.vue index be809b85..1c9ebcc7 100644 --- a/src/views/notifications/Alerts.vue +++ b/src/views/notifications/Alerts.vue @@ -6,7 +6,7 @@ Vue Alert -

+

Vue Alert is prepared for any length of text, as well as an optional close button. For a styling, use one of the required contextual color props (e.g., @@ -45,7 +45,7 @@ Vue Alert Link color -

+

Use the <CAlertLink> component to immediately give matching colored links inside any alert.

@@ -100,7 +100,7 @@ Vue Alert Additional content -

+

Alert can also incorporate supplementary components & elements like heading, paragraph, and divider.

@@ -128,7 +128,7 @@ Vue Alert Dismissing -

+

Alerts can also be easily dismissed. Just add the dismissible prop.

diff --git a/src/views/notifications/Badges.vue b/src/views/notifications/Badges.vue index a07988b0..d50b4e65 100644 --- a/src/views/notifications/Badges.vue +++ b/src/views/notifications/Badges.vue @@ -6,7 +6,7 @@ Vue Badges Dismissing -

+

Bootstrap badge scale to suit the size of the parent element by using relative font sizing and em units.

@@ -18,7 +18,7 @@
Example heading New
Example heading New
 -

+

Badges can be used as part of links or buttons to provide a counter.

@@ -26,11 +26,11 @@ Notifications 4 -

+

Remark that depending on how you use them, badges may be complicated for users of screen readers and related assistive technologies.

-

+

Unless the context is clear, consider including additional context with a visually hidden piece of additional text.

@@ -49,7 +49,7 @@ Vue Badges Contextual variations -

+

Add any of the below-mentioned color props to modify the presentation of a badge.

@@ -69,7 +69,7 @@ Vue Badges Pill badges -

+

Apply the shape="rounded-pill" prop to make badges rounded.

diff --git a/src/views/notifications/Modals.vue b/src/views/notifications/Modals.vue index cffc5a92..acc0e57f 100644 --- a/src/views/notifications/Modals.vue +++ b/src/views/notifications/Modals.vue @@ -6,7 +6,7 @@ Vue Modals -

+

Below is a static modal example (meaning its position and display have been overridden). Included are the modal header, modal body (required for @@ -40,7 +40,7 @@ Vue Modal Live demo -

+

Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page.

@@ -99,7 +99,7 @@ Vue Modal Static backdrop -

+

If you set backdrop property to static, 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 @@ Vue Modal Scrolling long content -

+

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 @@ -

+

You can also create a scrollable modal that allows scroll the modal body by adding scrollable prop. @@ -437,7 +437,7 @@ Vue Modal Vertically centered -

+

Add alignment="center" to <CModal> to vertically center the modal.

@@ -550,7 +550,7 @@ Vue Modal Tooltips and popovers -

+

<CTooltips> and <CPopovers> can be placed within modals as needed. When modals are closed, any tooltips and popovers within are @@ -629,7 +629,7 @@ Vue Modal Optional sizes -

+

Modals have three optional sizes, available via modifier classes to be placed on a <CModal>. These sizes kick in at certain @@ -655,7 +655,7 @@ Default - None + None 500px @@ -781,7 +781,7 @@ Vue Modal Fullscreen Modal -

+

Another override is the option to pop up a modal that covers the user viewport, available via property fullscrean.

diff --git a/src/views/pages/Login.vue b/src/views/pages/Login.vue index aabc4710..11075f06 100644 --- a/src/views/pages/Login.vue +++ b/src/views/pages/Login.vue @@ -8,7 +8,7 @@

Login

-

Sign In to your account

+

Sign In to your account

diff --git a/src/views/pages/Page404.vue b/src/views/pages/Page404.vue index 11b4900e..d07771a1 100644 --- a/src/views/pages/Page404.vue +++ b/src/views/pages/Page404.vue @@ -6,7 +6,7 @@

404

Oops! You're lost.

-

+

The page you are looking for was not found.

diff --git a/src/views/pages/Page500.vue b/src/views/pages/Page500.vue index 9c80396e..63dd18c6 100644 --- a/src/views/pages/Page500.vue +++ b/src/views/pages/Page500.vue @@ -6,7 +6,7 @@

500

Houston, we have a problem!

-

+

The page you are looking for is temporarily unavailable.

diff --git a/src/views/pages/Register.vue b/src/views/pages/Register.vue index 51708129..d76232f1 100644 --- a/src/views/pages/Register.vue +++ b/src/views/pages/Register.vue @@ -7,7 +7,7 @@

Register

-

Create your account

+

Create your account

diff --git a/src/views/widgets/Widgets.vue b/src/views/widgets/Widgets.vue index c58759dc..0ca0dee6 100644 --- a/src/views/widgets/Widgets.vue +++ b/src/views/widgets/Widgets.vue @@ -289,7 +289,7 @@