Skip to content

Commit 87826ed

Browse files
mrholekmrholek
committed
docs: update content
1 parent 3250a75 commit 87826ed

30 files changed

+2194
-6
lines changed

‎packages/docs/.vuepress/config.ts

+23
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,29 @@ export default defineUserConfig<DefaultThemeOptions>({
7070
text: 'Introduction',
7171
link: `/getting-started/introduction.html`,
7272
},
73+
{
74+
text: 'Accessibility',
75+
link: `/getting-started/accessibility.html`,
76+
},
77+
],
78+
},
79+
{
80+
text: 'Customize',
81+
icon: '<path fill="var(--ci-primary-color, currentColor)" d="M425.514,82.055C380.778,39.458,320.673,16,256.271,16,196.248,16,136.415,36.073,92.115,71.071,43.032,109.85,16,164.161,16,224c0,60.1,15.531,98.87,48.876,122.019,28,19.438,68.412,27.731,135.124,27.731h29.75A26.28,26.28,0,0,1,256,400v47.984a32,32,0,0,0,32,32h.032l90.755-.088a32.094,32.094,0,0,0,19.686-6.8c9.725-7.622,34.727-29.4,56.8-66.9C482.3,360.262,496,307.037,496,248,496,184.268,470.968,125.334,425.514,82.055Zm2.173,307.915c-19.3,32.792-40.663,51.447-48.932,57.926L288,447.984V400a58.316,58.316,0,0,0-58.25-58.25H200c-59.69,0-94.644-6.585-116.876-22.019C58.833,302.869,48,273.344,48,224,48,113.833,153.9,48,256.271,48,372.755,48,464,135.851,464,248,464,301.253,451.782,349.019,427.687,389.97Z" class="ci-primary"/><path fill="var(--ci-primary-color, currentColor)" d="M128,144a56,56,0,1,0,56,56A56.064,56.064,0,0,0,128,144Zm0,80a24,24,0,1,1,24-24A24.027,24.027,0,0,1,128,224Z" class="ci-primary"/><path fill="var(--ci-primary-color, currentColor)" d="M240,72a56,56,0,1,0,56,56A56.064,56.064,0,0,0,240,72Zm0,80a24,24,0,1,1,24-24A24.027,24.027,0,0,1,240,152Z" class="ci-primary"/><path fill="var(--ci-primary-color, currentColor)" d="M360,128a56,56,0,1,0,56,56A56.064,56.064,0,0,0,360,128Zm0,80a24,24,0,1,1,24-24A24.027,24.027,0,0,1,360,208Z" class="ci-primary"/><path fill="var(--ci-primary-color, currentColor)" d="M376,264a56,56,0,1,0,56,56A56.064,56.064,0,0,0,376,264Zm0,80a24,24,0,1,1,24-24A24.027,24.027,0,0,1,376,344Z" class="ci-primary"/>',
82+
link: '/customize/',
83+
children: [
84+
{
85+
text: 'Sass',
86+
link: '/customize/sass.html',
87+
},
88+
{
89+
text: 'Options',
90+
link: '/customize/options.html',
91+
},
92+
{
93+
text: 'CSS Variables',
94+
link: '/customize/css-variables.html',
95+
},
7396
],
7497
},
7598
{

‎packages/docs/components/accordion.md

+78-1
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ Click the accordions below to expand/collapse the accordion content.
1010

1111
::: demo
1212
<CAccordion>
13-
<CAccordionItem :item-key="1">
13+
<CAccordionItem :item-key="1" :style="{ '--cui-accordion-bg': 'red' }">
1414
<CAccordionHeader>
1515
Accordion Item #1
1616
</CAccordionHeader>
@@ -277,6 +277,83 @@ Add `always-open` property to make accordion items stay open when another item i
277277
</CAccordion>
278278
```
279279

280+
## Customizing
281+
282+
### CSS variables
283+
284+
Vue accordions use local CSS variables on `.accordion` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
285+
286+
```sass
287+
--cui-accordion-color: #{color-contrast($accordion-bg)};
288+
--cui-accordion-bg: #{$accordion-bg};
289+
--cui-accordion-transition: #{$accordion-transition};
290+
--cui-accordion-border-color: #{$accordion-border-color};
291+
--cui-accordion-border-width: #{$accordion-border-width};
292+
--cui-accordion-border-radius: #{$accordion-border-radius};
293+
--cui-accordion-inner-border-radius: #{$accordion-inner-border-radius};
294+
--cui-accordion-btn-padding-x: #{$accordion-button-padding-x};
295+
--cui-accordion-btn-padding-y: #{$accordion-button-padding-y};
296+
--cui-accordion-btn-color: #{$accordion-color};
297+
--cui-accordion-btn-bg: #{$accordion-button-bg};
298+
--cui-accordion-btn-icon: #{escape-svg($accordion-button-icon)};
299+
--cui-accordion-btn-icon-width: #{$accordion-icon-width};
300+
--cui-accordion-btn-icon-transform: #{$accordion-icon-transform};
301+
--cui-accordion-btn-icon-transition: #{$accordion-icon-transition};
302+
--cui-accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon)};
303+
--cui-accordion-btn-focus-border-color: #{$accordion-button-focus-border-color};
304+
--cui-accordion-btn-focus-box-shadow: #{$accordion-button-focus-box-shadow};
305+
--cui-accordion-body-padding-x: #{$accordion-body-padding-x};
306+
--cui-accordion-body-padding-y: #{$accordion-body-padding-y};
307+
--cui-accordion-active-color: #{$accordion-button-active-color};
308+
--cui-accordion-active-bg: #{$accordion-button-active-bg};
309+
```
310+
311+
#### How to use CSS variables
312+
313+
```js
314+
const vars = {
315+
'--my-css-var': 10,
316+
'--my-another-css-var': "red"
317+
}
318+
return <CAccordion :style="vars">...</CAccordion>
319+
```
320+
321+
### SASS variables
322+
323+
```sass
324+
$accordion-padding-y: 1rem;
325+
$accordion-padding-x: 1.25rem;
326+
$accordion-color: var(--cui-body-color);
327+
$accordion-bg: $body-bg;
328+
$accordion-border-width: $border-width;
329+
$accordion-border-color: var(--cui-border-color);
330+
$accordion-border-radius: $border-radius;
331+
$accordion-inner-border-radius: subtract($accordion-border-radius, $accordion-border-width);
332+
333+
$accordion-body-padding-y: $accordion-padding-y;
334+
$accordion-body-padding-x: $accordion-padding-x;
335+
336+
$accordion-button-padding-y: $accordion-padding-y;
337+
$accordion-button-padding-x: $accordion-padding-x;
338+
$accordion-button-color: $accordion-color;
339+
$accordion-button-bg: var(--cui-accordion-bg);
340+
$accordion-transition: $btn-transition, border-radius .15s ease;
341+
$accordion-button-active-bg: tint-color($component-active-bg, 90%);
342+
$accordion-button-active-color: shade-color($primary, 10%);
343+
344+
$accordion-button-focus-border-color: $input-focus-border-color;
345+
$accordion-button-focus-box-shadow: $btn-focus-box-shadow;
346+
347+
$accordion-icon-width: 1.25rem;
348+
$accordion-icon-color: $accordion-button-color;
349+
$accordion-icon-active-color: $accordion-button-active-color;
350+
$accordion-icon-transition: transform .2s ease-in-out;
351+
$accordion-icon-transform: rotate(-180deg);
352+
353+
$accordion-button-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
354+
$accordion-button-active-icon: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-active-color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>");
355+
```
356+
280357
## API
281358

282359
!!!include(./api/accordion/CAccordion.api.md)!!!

‎packages/docs/components/alert.md

+42
Original file line numberDiff line numberDiff line change
@@ -266,6 +266,48 @@ Alerts can also be easily dismissed. Just add the `dismissible` prop.
266266
}
267267
}
268268
</script>
269+
270+
## Customizing
271+
272+
### CSS variables
273+
274+
Vue alerts use local CSS variables on `.alert` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
275+
276+
```sass
277+
--cui-alert-bg: transparent;
278+
--cui-alert-padding-x: #{$alert-padding-x};
279+
--cui-alert-padding-y: #{$alert-padding-y};
280+
--cui-alert-margin-bottom: #{$alert-margin-bottom};
281+
--cui-alert-color: inherit;
282+
--cui-alert-border-color: transparent;
283+
--cui-alert-border: #{$alert-border-width} solid var(--cui-alert-border-color);
284+
--cui-alert-border-radius: #{$alert-border-radius};
285+
```
286+
287+
#### How to use CSS variables
288+
289+
```js
290+
const vars = {
291+
'--my-css-var': 10,
292+
'--my-another-css-var': "red"
293+
}
294+
return <CAlert :style="vars">...</CAlert>
295+
```
296+
297+
### SASS variables
298+
299+
```sass
300+
$alert-padding-y: $spacer;
301+
$alert-padding-x: $spacer;
302+
$alert-margin-bottom: 1rem;
303+
$alert-border-radius: $border-radius;
304+
$alert-link-font-weight: $font-weight-bold;
305+
$alert-border-width: $border-width;
306+
$alert-bg-scale: -80%;
307+
$alert-border-scale: -70%;
308+
$alert-color-scale: 40%;
309+
$alert-dismissible-padding-r: $alert-padding-x * 3; // 3x covers width of x plus default padding on either side
310+
```
269311
## API
270312

271313
!!!include(./api/alert/CAlert.api.md)!!!

‎packages/docs/components/badge.md

+40
Original file line numberDiff line numberDiff line change
@@ -180,6 +180,46 @@ Apply the `shape="rounded-pill"` prop to make badges rounded.
180180
<CBadge color="dark" shape="rounded-pill">dark</CBadge>
181181
```
182182

183+
## Customizing
184+
185+
### CSS variables
186+
187+
Vue badges use local CSS variables on `.badges` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
188+
189+
```sass
190+
--cui-badge-padding-x: #{$badge-padding-x};
191+
--cui-badge-padding-y: #{$badge-padding-y};
192+
--cui-badge-font-size: #{$badge-font-size};
193+
--cui-badge-font-weight: #{$badge-font-weight};
194+
--cui-badge-color: #{$badge-color};
195+
--cui-badge-border-radius: #{$badge-border-radius};
196+
```
197+
198+
#### How to use CSS variables
199+
200+
```js
201+
const vars = {
202+
'--my-css-var': 10,
203+
'--my-another-css-var': "red"
204+
}
205+
return <CBadge :style="vars">...</CBadge>
206+
```
207+
208+
### SASS variables
209+
210+
```sass
211+
$badge-font-size: .75em;
212+
$badge-font-weight: $font-weight-bold;
213+
$badge-color: $high-emphasis-inverse;
214+
$badge-padding-y: .35em;
215+
$badge-padding-x: .65em;
216+
$badge-border-radius: $border-radius;
217+
218+
$badge-font-size-sm: .65em;
219+
$badge-padding-y-sm: .3em;
220+
$badge-padding-x-sm: .5em;
221+
```
222+
183223
## API
184224

185225
!!!include(./api/badge/CBadge.api.md)!!!

‎packages/docs/components/breadcrumb.md

+44
Original file line numberDiff line numberDiff line change
@@ -105,6 +105,50 @@ Since breadcrumbs provide navigation, it's useful to add a significant label suc
105105

106106
For more information, see the [WAI-ARIA Authoring Practices for the breadcrumb pattern](https://www.w3.org/TR/wai-aria-practices/#breadcrumb).
107107

108+
## Customizing
109+
110+
### CSS variables
111+
112+
Vue breadcrumbs use local CSS variables on `.breadcrumb` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
113+
114+
```sass
115+
--cui-breadcrumb-padding-x: #{$breadcrumb-padding-x};
116+
--cui-breadcrumb-padding-y: #{$breadcrumb-padding-y};
117+
--cui-breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom};
118+
--cui-breadcrumb-font-size: #{$breadcrumb-font-size};
119+
--cui-breadcrumb-bg: #{$breadcrumb-bg};
120+
--cui-breadcrumb-border-radius: #{$breadcrumb-border-radius};
121+
--cui-breadcrumb-divider-color: #{$breadcrumb-divider-color};
122+
--cui-breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x};
123+
--cui-breadcrumb-item-active-color: #{$breadcrumb-active-color};
124+
```
125+
126+
#### How to use CSS variables
127+
128+
```js
129+
const vars = {
130+
'--my-css-var': 10,
131+
'--my-another-css-var': "red"
132+
}
133+
return <CBreadcrumb :style="vars">...</CBreadcrumb>
134+
```
135+
136+
### SASS variables
137+
138+
```sass
139+
$breadcrumb-font-size: null;
140+
$breadcrumb-padding-y: 0;
141+
$breadcrumb-padding-x: 0;
142+
$breadcrumb-item-padding-x: .5rem;
143+
$breadcrumb-margin-bottom: 1rem;
144+
$breadcrumb-bg: unset;
145+
$breadcrumb-divider-color: $gray-600;
146+
$breadcrumb-active-color: $gray-600;
147+
$breadcrumb-divider: quote("/");
148+
$breadcrumb-divider-flipped: $breadcrumb-divider;
149+
$breadcrumb-border-radius: null;
150+
```
151+
108152
## API
109153

110154
!!!include(./api/breadcrumb/CBreadcrumbItem.api.md)!!!

‎packages/docs/components/button.md

+105
Original file line numberDiff line numberDiff line change
@@ -272,6 +272,111 @@ Additional utilities can be used to adjust the alignment of buttons when horizon
272272
</div>
273273
```
274274

275+
## Customizing
276+
277+
### CSS variables
278+
279+
Vue buttons use local CSS variables on `.btn` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
280+
281+
```sass
282+
--cui-btn-padding-x: #{$btn-padding-x};
283+
--cui-btn-padding-y: #{$btn-padding-y};
284+
--cui-btn-font-family: #{$btn-font-family};
285+
--cui-btn-font-size: #{$btn-font-size};
286+
--cui-btn-font-weight: #{$btn-font-weight};
287+
--cui-btn-line-height: #{$btn-line-height};
288+
--cui-btn-color: #{$body-color};
289+
--cui-btn-bg: transparent;
290+
--cui-btn-border-width: #{$btn-border-width};
291+
--cui-btn-border-color: transparent;
292+
--cui-btn-border-radius: #{$btn-border-radius};
293+
--cui-btn-box-shadow: #{$btn-box-shadow};
294+
--cui-btn-disabled-opacity: #{$btn-disabled-opacity};
295+
--cui-btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--cui-btn-focus-shadow-rgb), .5);
296+
```
297+
298+
#### How to use CSS variables
299+
300+
```js
301+
const vars = {
302+
'--my-css-var': 10,
303+
'--my-another-css-var': "red"
304+
}
305+
return <CButton :style="vars">...</CButton>
306+
```
307+
308+
### SASS variables
309+
310+
```sass
311+
$btn-padding-y: $input-btn-padding-y;
312+
$btn-padding-x: $input-btn-padding-x;
313+
$btn-font-family: $input-btn-font-family;
314+
$btn-font-size: $input-btn-font-size;
315+
$btn-line-height: $input-btn-line-height;
316+
$btn-white-space: null; // Set to `nowrap` to prevent text wrapping
317+
318+
$btn-padding-y-sm: $input-btn-padding-y-sm;
319+
$btn-padding-x-sm: $input-btn-padding-x-sm;
320+
$btn-font-size-sm: $input-btn-font-size-sm;
321+
322+
$btn-padding-y-lg: $input-btn-padding-y-lg;
323+
$btn-padding-x-lg: $input-btn-padding-x-lg;
324+
$btn-font-size-lg: $input-btn-font-size-lg;
325+
326+
$btn-border-width: $input-btn-border-width;
327+
328+
$btn-font-weight: $font-weight-normal;
329+
$btn-box-shadow: inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075);
330+
$btn-focus-width: $input-btn-focus-width;
331+
$btn-focus-box-shadow: $input-btn-focus-box-shadow;
332+
$btn-disabled-opacity: .65;
333+
$btn-active-box-shadow: inset 0 3px 5px rgba($black, .125);
334+
335+
$btn-link-color: var(--cui-link-color);
336+
$btn-link-hover-color: var(--cui-link-hover-color);
337+
$btn-link-disabled-color: $gray-600;
338+
339+
// Allows for customizing button radius independently from global border radius
340+
$btn-border-radius: $border-radius;
341+
$btn-border-radius-sm: $border-radius-sm;
342+
$btn-border-radius-lg: $border-radius-lg;
343+
344+
$btn-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
345+
346+
$btn-hover-bg-shade-amount: 15%;
347+
$btn-hover-bg-tint-amount: 15%;
348+
$btn-hover-border-shade-amount: 20%;
349+
$btn-hover-border-tint-amount: 10%;
350+
$btn-active-bg-shade-amount: 20%;
351+
$btn-active-bg-tint-amount: 20%;
352+
$btn-active-border-shade-amount: 25%;
353+
$btn-active-border-tint-amount: 10%;
354+
355+
// scss-docs-start button-variants
356+
$button-variants: (
357+
"primary": btn-color-map($primary, $primary),
358+
"secondary": btn-color-map($secondary, $secondary),
359+
"success": btn-color-map($success, $success),
360+
"danger": btn-color-map($danger, $danger),
361+
"warning": btn-color-map($warning, $warning),
362+
"info": btn-color-map($info, $info),
363+
"light": btn-color-map($light, $light),
364+
"dark": btn-color-map($dark, $dark)
365+
);
366+
367+
$button-outline-ghost-variants: (
368+
"primary": btn-outline-color-map($primary),
369+
"secondary": btn-outline-color-map($secondary),
370+
"success": btn-outline-color-map($success),
371+
"danger": btn-outline-color-map($danger),
372+
"warning": btn-outline-color-map($warning),
373+
"info": btn-outline-color-map($info),
374+
"light": btn-outline-color-map($light),
375+
"dark": btn-outline-color-map($dark)
376+
);
377+
// scss-docs-end button-variants
378+
```
379+
275380
## API
276381

277382
!!!include(./api/button/CButton.api.md)!!!

0 commit comments

Comments
 (0)