refactor: change .text-medium-emphasis to .text-body-secondary
This commit is contained in:
mrholek
@@ -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><label></code>s are automatically styled to match with a
|
||||
lighter color to help indicate the input'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><label></code>s are automatically styled to match with a
|
||||
lighter color to help indicate the input'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><CFormCheck></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><CFormCheck></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>
|
||||
|
||||
@@ -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><CFormInput></code> and
|
||||
<code><CFormLabel></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's a <code>value</code> already defined,
|
||||
<code><CFormLabel></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><CFormTextarea></code>s will be the same
|
||||
height as <code><CFormInput></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><CFormTextarea;></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><CFormInput></code>, floating labels are only
|
||||
available on <code><CFormSelect></code>s. They work in the
|
||||
same way, but unlike <code><CFormInput></code>s, they'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>
|
||||
|
||||
@@ -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="lg"</code> and <code>size="sm"</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'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><input readonly></code> elements in
|
||||
your form styled as plain text, use the
|
||||
<code>plain-text</code> boolean property to remove the default form
|
||||
|
||||
@@ -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><CFormLabel></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><CInputGroup></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'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'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><CFormInput></code>s are supported
|
||||
visually, validation styles are only available for input groups with
|
||||
a single <code><CFormInput></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>
|
||||
|
||||
+10
-10
@@ -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><CFormLabel></code>s as well so they'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'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><CFormLabel></code>s or <code><legend></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><CCol></code>s within a <code><CRow></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><CCol></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><CCol xs="auto"></code> class to create
|
||||
horizontal layouts. By adding
|
||||
<a href="https://coreui.io/docs/layout/gutters/"
|
||||
|
||||
@@ -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><input type="range"></code> controls with
|
||||
<code><CFormRange></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 "snap" 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
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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'll need to add
|
||||
the
|
||||
<code>novalidate</code> boolean property to your
|
||||
@@ -17,7 +17,7 @@
|
||||
attempting to submit, you'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'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
|
||||
|
||||
Reference in New Issue
Block a user