Skip to content

Commit 39197fa

Browse files
mrholekmrholek
committed
docs: update content
1 parent 6795b6b commit 39197fa

File tree

10 files changed

+117
-5
lines changed

10 files changed

+117
-5
lines changed

‎packages/docs/forms/checkbox.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -135,6 +135,12 @@ Different variants of button, such at the various outlined styles, are supported
135135
<CFormCheck :button="{ color: 'secondary', variant: 'outline' }" id="btn-check-2-outlined" autocomplete="off" label="Checked" checked/>
136136
```
137137

138+
## Customizing
139+
140+
### SASS variables
141+
142+
<ScssDocs file="_variables.scss" capture="form-check-variables" />
143+
138144
## API
139145

140146
!!!include(./api/form/CFormCheck.api.md)!!!

‎packages/docs/forms/floating-labels.md

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -247,4 +247,10 @@ When working with the CoreUI for Bootstrap grid system, be sure to place form el
247247
</CFormFloating>
248248
</CCol>
249249
</CRow>
250-
```
250+
```
251+
252+
## Customizing
253+
254+
### SASS variables
255+
256+
<ScssDocs file="_variables.scss" capture="form-floating-variables" />

‎packages/docs/forms/input-group.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -536,6 +536,12 @@ Input groups include support for custom selects and custom file inputs. Browser
536536
</CInputGroup>
537537
```
538538

539+
## Customizing
540+
541+
### SASS variables
542+
543+
<ScssDocs file="_variables.scss" capture="input-group-variables" />
544+
539545
## API
540546

541547
!!!include(./api/form/CInputGroup.api.md)!!!

‎packages/docs/forms/input.md

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -230,6 +230,24 @@ If you want to have `<input readonly>` elements in your form styled as plain tex
230230
/>
231231
```
232232

233+
## Customizing
234+
235+
### SASS variables
236+
237+
`$input-*` are shared across most of our form controls (and not buttons).
238+
239+
<ScssDocs file="_variables.scss" capture="form-input-variables" />
240+
241+
`$form-label-*` and `$form-text-*` are for our `<CFormLabel />`s and `<CFormText />` component.
242+
243+
<ScssDocs file="_variables.scss" capture="form-label-variables" />
244+
245+
<ScssDocs file="_variables.scss" capture="form-text-variables" />
246+
247+
`$form-file-*` are for file input.
248+
249+
<ScssDocs file="_variables.scss" capture="form-file-variables" />
250+
233251
## API
234252

235253
!!!include(./api/form/CFormInput.api.md)!!!

‎packages/docs/forms/radio.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -117,6 +117,12 @@ Different variants of button, such at the various outlined styles, are supported
117117
<CFormCheck :button="{ color: 'danger', variant: 'outline' }" type="radio" name="options-outlined" id="danger-outlined" autocomplete="off" label="Radio"/>
118118
```
119119

120+
## Customizing
121+
122+
### SASS variables
123+
124+
<ScssDocs file="_variables.scss" capture="form-check-variables" />
125+
120126
## API
121127

122128
!!!include(./api/form/CFormCheck.api.md)!!!

‎packages/docs/forms/range.md

Lines changed: 10 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -32,23 +32,29 @@ Add the `disabled` boolean attribute on an input to give it a grayed out appeara
3232
Range inputs have implicit values for `min` and `max`—`0` and `100`, respectively. You may specify new values for those using the `min` and `max` attributes.
3333

3434
::: demo
35-
<CFormRange label="Example range" :min="0" :max="5" value="3" id="customRange2"/>
35+
<CFormRange label="Example range" :min="0" :max="5" :value="3" id="customRange2"/>
3636
:::
3737
```vue
38-
<CFormRange label="Example range" :min="0" :max="5" value="3" id="customRange2"/>
38+
<CFormRange label="Example range" :min="0" :max="5" :value="3" id="customRange2"/>
3939
```
4040

4141
## Steps
4242

4343
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 `:step="0.5"`.
4444

4545
::: demo
46-
<CFormRange label="Example range" :min="0" :max="5" :step="0.5" value="3" id="customRange3"/>
46+
<CFormRange label="Example range" :min="0" :max="5" :step="0.5" :value="3" id="customRange3"/>
4747
:::
4848
```vue
49-
<CFormRange label="Example range" :min="0" :max="5" :step="0.5" value="3" id="customRange3"/>
49+
<CFormRange label="Example range" :min="0" :max="5" :step="0.5" :value="3" id="customRange3"/>
5050
```
5151

52+
## Customizing
53+
54+
### SASS variables
55+
56+
<ScssDocs file="_variables.scss" capture="form-range-variables" />
57+
5258
## API
5359

5460
!!!include(./api/form/CFormRange.api.md)!!!

‎packages/docs/forms/select.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -128,6 +128,13 @@ Add the `disabled` boolean attribute on a select to give it a grayed out appeara
128128
</CFormSelect>
129129
```
130130

131+
132+
## Customizing
133+
134+
### SASS variables
135+
136+
<ScssDocs file="_variables.scss" capture="form-select-variables" />
137+
131138
## API
132139

133140
!!!include(./api/form/CFormSelect.api.md)!!!

‎packages/docs/forms/switch.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,12 @@ Put your switches on the opposite side by adding `reverse` boolean property.
5454
<CFormSwitch reverse type="radio" id="reverseFormSwitch2" label="Disabled reverse switch" disabled/>
5555
```
5656

57+
## Customizing
58+
59+
### SASS variables
60+
61+
<ScssDocs file="_variables.scss" capture="form-switch-variables" />
62+
5763
## API
5864

5965
!!!include(./api/form/CFormSwitch.api.md)!!!

‎packages/docs/forms/textarea.md

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -82,6 +82,20 @@ Add the `readonly` boolean attribute on an textarea to prevent modification of t
8282
></CFormTextarea>
8383
```
8484

85+
## Customizing
86+
87+
### SASS variables
88+
89+
`$input-*` are shared across most of our form controls (and not buttons).
90+
91+
<ScssDocs file="_variables.scss" capture="form-input-variables" />
92+
93+
`$form-label-*` and `$form-text-*` are for our `<CFormLabel />`s and `<CFormText />` component.
94+
95+
<ScssDocs file="_variables.scss" capture="form-label-variables" />
96+
97+
<ScssDocs file="_variables.scss" capture="form-text-variables" />
98+
8599
## API
86100

87101
!!!include(./api/form/CFormTextarea.api.md)!!!

‎packages/docs/forms/validation.md

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -804,6 +804,43 @@ If your form layout allows it, you can swap the text for the tooltip to display
804804
</script>
805805
```
806806

807+
## Customizing
808+
809+
### CSS variables
810+
811+
CoreUI forms components use local CSS variables for validation for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
812+
813+
<ScssDocs file="_root.scss" capture="root-form-validation-variables"/>
814+
815+
These variables are also color mode adaptive, meaning they change color while in dark mode.
816+
817+
### SASS variables
818+
819+
<ScssDocs file="_variables.scss" capture="form-feedback-variables" />
820+
821+
<ScssDocs file="_variables.scss" capture="form-validation-colors" />
822+
823+
<ScssDocs file="_variables-dark.scss" capture="form-validation-colors-dark" />
824+
825+
### SASS mixins
826+
827+
Two mixins are combined, through our loop, to generate our form validation feedback styles.
828+
829+
<ScssDocs file="mixins/_forms.scss" capture="form-validation-mixins" />
830+
831+
### SASS maps
832+
This is the validation Sass map from `_variables.scss`. Override or extend this to generate different or additional states.
833+
834+
<ScssDocs file="_variables.scss" capture="form-validation-states" />
835+
836+
Maps of `$form-validation-states` can contain three optional parameters to override tooltips and focus styles.
837+
838+
### SASS loops
839+
840+
Used to iterate over `$form-validation-states` map values to generate our validation styles. Any modifications to the above Sass map will be reflected in your compiled CSS via this loop.
841+
842+
<ScssDocs file="forms/_validation.scss" capture="form-validation-states-loop" />
843+
807844
<script>
808845
export default {
809846
data: () => {

0 commit comments

Comments
 (0)