Skip to content

Commit d672653

Browse files
mrholekmrholek
committed
docs: update content
1 parent 6d1a053 commit d672653

23 files changed

+1769
-163
lines changed

‎packages/docs/content/4.2/components/accordion.mdx‎

Lines changed: 208 additions & 163 deletions
Large diffs are not rendered by default.

‎packages/docs/content/4.2/components/alert.mdx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -334,6 +334,48 @@ React Alert component can also be easily dismissed. Just add the `dismissible` p
334334
</p>
335335
</CCallout>
336336

337+
## Customizing
338+
339+
### CSS variables
340+
341+
React 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.
342+
343+
```sass
344+
--cui-alert-bg: transparent;
345+
--cui-alert-padding-x: #{$alert-padding-x};
346+
--cui-alert-padding-y: #{$alert-padding-y};
347+
--cui-alert-margin-bottom: #{$alert-margin-bottom};
348+
--cui-alert-color: inherit;
349+
--cui-alert-border-color: transparent;
350+
--cui-alert-border: #{$alert-border-width} solid var(--cui-alert-border-color);
351+
--cui-alert-border-radius: #{$alert-border-radius};
352+
```
353+
354+
#### How to use CSS variables
355+
356+
```jsx
357+
const vars = {
358+
'--my-css-var': 10,
359+
'--my-another-css-var': "red"
360+
}
361+
return <CAlert style={vars}>...</CAlert>
362+
```
363+
364+
### SASS variables
365+
366+
```sass
367+
$alert-padding-y: $spacer;
368+
$alert-padding-x: $spacer;
369+
$alert-margin-bottom: 1rem;
370+
$alert-border-radius: $border-radius;
371+
$alert-link-font-weight: $font-weight-bold;
372+
$alert-border-width: $border-width;
373+
$alert-bg-scale: -80%;
374+
$alert-border-scale: -70%;
375+
$alert-color-scale: 40%;
376+
$alert-dismissible-padding-r: $alert-padding-x * 3; // 3x covers width of x plus default padding on either side
377+
```
378+
337379
## API
338380

339381
### CAlert

‎packages/docs/content/4.2/components/badge.mdx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -190,6 +190,46 @@ Apply the `shape="rounded-pill"` prop to make badges rounded.
190190
<CBadge color="dark" shape="rounded-pill">dark</CBadge>
191191
```
192192

193+
## Customizing
194+
195+
### CSS variables
196+
197+
React 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.
198+
199+
```sass
200+
--cui-badge-padding-x: #{$badge-padding-x};
201+
--cui-badge-padding-y: #{$badge-padding-y};
202+
--cui-badge-font-size: #{$badge-font-size};
203+
--cui-badge-font-weight: #{$badge-font-weight};
204+
--cui-badge-color: #{$badge-color};
205+
--cui-badge-border-radius: #{$badge-border-radius};
206+
```
207+
208+
#### How to use CSS variables
209+
210+
```jsx
211+
const vars = {
212+
'--my-css-var': 10,
213+
'--my-another-css-var': "red"
214+
}
215+
return <CBadge style={vars}>...</CBadge>
216+
```
217+
218+
### SASS variables
219+
220+
```sass
221+
$badge-font-size: .75em;
222+
$badge-font-weight: $font-weight-bold;
223+
$badge-color: $high-emphasis-inverse;
224+
$badge-padding-y: .35em;
225+
$badge-padding-x: .65em;
226+
$badge-border-radius: $border-radius;
227+
228+
$badge-font-size-sm: .65em;
229+
$badge-padding-y-sm: .3em;
230+
$badge-padding-x-sm: .5em;
231+
```
232+
193233
## API
194234

195235
### CBadge

‎packages/docs/content/4.2/components/breadcrumb.mdx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -118,6 +118,50 @@ Since react breadcrumbs provide navigation, it's useful to add a significant lab
118118

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

121+
## Customizing
122+
123+
### CSS variables
124+
125+
React 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.
126+
127+
```sass
128+
--cui-breadcrumb-padding-x: #{$breadcrumb-padding-x};
129+
--cui-breadcrumb-padding-y: #{$breadcrumb-padding-y};
130+
--cui-breadcrumb-margin-bottom: #{$breadcrumb-margin-bottom};
131+
--cui-breadcrumb-font-size: #{$breadcrumb-font-size};
132+
--cui-breadcrumb-bg: #{$breadcrumb-bg};
133+
--cui-breadcrumb-border-radius: #{$breadcrumb-border-radius};
134+
--cui-breadcrumb-divider-color: #{$breadcrumb-divider-color};
135+
--cui-breadcrumb-item-padding-x: #{$breadcrumb-item-padding-x};
136+
--cui-breadcrumb-item-active-color: #{$breadcrumb-active-color};
137+
```
138+
139+
#### How to use CSS variables
140+
141+
```jsx
142+
const vars = {
143+
'--my-css-var': 10,
144+
'--my-another-css-var': "red"
145+
}
146+
return <CBreadcrumb style={vars}>...</CBreadcrumb>
147+
```
148+
149+
### SASS variables
150+
151+
```sass
152+
$breadcrumb-font-size: null;
153+
$breadcrumb-padding-y: 0;
154+
$breadcrumb-padding-x: 0;
155+
$breadcrumb-item-padding-x: .5rem;
156+
$breadcrumb-margin-bottom: 1rem;
157+
$breadcrumb-bg: unset;
158+
$breadcrumb-divider-color: $gray-600;
159+
$breadcrumb-active-color: $gray-600;
160+
$breadcrumb-divider: quote("/");
161+
$breadcrumb-divider-flipped: $breadcrumb-divider;
162+
$breadcrumb-border-radius: null;
163+
```
164+
121165
## API
122166

123167
### CBreadcrumb

‎packages/docs/content/4.2/components/button.mdx‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -397,6 +397,111 @@ Additional utilities can be used to adjust the alignment of buttons when horizon
397397
</div>
398398
```
399399

400+
## Customizing
401+
402+
### CSS variables
403+
404+
React 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.
405+
406+
```sass
407+
--cui-btn-padding-x: #{$btn-padding-x};
408+
--cui-btn-padding-y: #{$btn-padding-y};
409+
--cui-btn-font-family: #{$btn-font-family};
410+
--cui-btn-font-size: #{$btn-font-size};
411+
--cui-btn-font-weight: #{$btn-font-weight};
412+
--cui-btn-line-height: #{$btn-line-height};
413+
--cui-btn-color: #{$body-color};
414+
--cui-btn-bg: transparent;
415+
--cui-btn-border-width: #{$btn-border-width};
416+
--cui-btn-border-color: transparent;
417+
--cui-btn-border-radius: #{$btn-border-radius};
418+
--cui-btn-box-shadow: #{$btn-box-shadow};
419+
--cui-btn-disabled-opacity: #{$btn-disabled-opacity};
420+
--cui-btn-focus-box-shadow: 0 0 0 #{$btn-focus-width} rgba(var(--cui-btn-focus-shadow-rgb), .5);
421+
```
422+
423+
#### How to use CSS variables
424+
425+
```jsx
426+
const vars = {
427+
'--my-css-var': 10,
428+
'--my-another-css-var': "red"
429+
}
430+
return <CButton style={vars}>...</CButton>
431+
```
432+
433+
### SASS variables
434+
435+
```sass
436+
$btn-padding-y: $input-btn-padding-y;
437+
$btn-padding-x: $input-btn-padding-x;
438+
$btn-font-family: $input-btn-font-family;
439+
$btn-font-size: $input-btn-font-size;
440+
$btn-line-height: $input-btn-line-height;
441+
$btn-white-space: null; // Set to `nowrap` to prevent text wrapping
442+
443+
$btn-padding-y-sm: $input-btn-padding-y-sm;
444+
$btn-padding-x-sm: $input-btn-padding-x-sm;
445+
$btn-font-size-sm: $input-btn-font-size-sm;
446+
447+
$btn-padding-y-lg: $input-btn-padding-y-lg;
448+
$btn-padding-x-lg: $input-btn-padding-x-lg;
449+
$btn-font-size-lg: $input-btn-font-size-lg;
450+
451+
$btn-border-width: $input-btn-border-width;
452+
453+
$btn-font-weight: $font-weight-normal;
454+
$btn-box-shadow: inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075);
455+
$btn-focus-width: $input-btn-focus-width;
456+
$btn-focus-box-shadow: $input-btn-focus-box-shadow;
457+
$btn-disabled-opacity: .65;
458+
$btn-active-box-shadow: inset 0 3px 5px rgba($black, .125);
459+
460+
$btn-link-color: var(--cui-link-color);
461+
$btn-link-hover-color: var(--cui-link-hover-color);
462+
$btn-link-disabled-color: $gray-600;
463+
464+
// Allows for customizing button radius independently from global border radius
465+
$btn-border-radius: $border-radius;
466+
$btn-border-radius-sm: $border-radius-sm;
467+
$btn-border-radius-lg: $border-radius-lg;
468+
469+
$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;
470+
471+
$btn-hover-bg-shade-amount: 15%;
472+
$btn-hover-bg-tint-amount: 15%;
473+
$btn-hover-border-shade-amount: 20%;
474+
$btn-hover-border-tint-amount: 10%;
475+
$btn-active-bg-shade-amount: 20%;
476+
$btn-active-bg-tint-amount: 20%;
477+
$btn-active-border-shade-amount: 25%;
478+
$btn-active-border-tint-amount: 10%;
479+
480+
// scss-docs-start button-variants
481+
$button-variants: (
482+
"primary": btn-color-map($primary, $primary),
483+
"secondary": btn-color-map($secondary, $secondary),
484+
"success": btn-color-map($success, $success),
485+
"danger": btn-color-map($danger, $danger),
486+
"warning": btn-color-map($warning, $warning),
487+
"info": btn-color-map($info, $info),
488+
"light": btn-color-map($light, $light),
489+
"dark": btn-color-map($dark, $dark)
490+
);
491+
492+
$button-outline-ghost-variants: (
493+
"primary": btn-outline-color-map($primary),
494+
"secondary": btn-outline-color-map($secondary),
495+
"success": btn-outline-color-map($success),
496+
"danger": btn-outline-color-map($danger),
497+
"warning": btn-outline-color-map($warning),
498+
"info": btn-outline-color-map($info),
499+
"light": btn-outline-color-map($light),
500+
"dark": btn-outline-color-map($dark)
501+
);
502+
// scss-docs-end button-variants
503+
```
504+
400505
## API
401506

402507
### CButton

‎packages/docs/content/4.2/components/callout.mdx‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,58 @@ Callout component is prepared for any length of text, as well as an optional ele
9292
</p>
9393
</CCallout>
9494
95+
## Customizing
96+
97+
### CSS variables
98+
99+
React callouts use local CSS variables on `.callout` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
100+
101+
```sass
102+
--cui-callout-padding-x: #{$callout-padding-x};
103+
--cui-callout-padding-y: #{$callout-padding-y};
104+
--cui-callout-margin-x: #{$callout-margin-x};
105+
--cui-callout-margin-y: #{$callout-margin-y};
106+
--cui-callout-border-width: #{$callout-border-width};
107+
--cui-callout-border-color: #{$callout-border-color};
108+
--cui-callout-border-left-width: #{$callout-border-left-width};
109+
--cui-callout-border-radius: #{$callout-border-radius};
110+
```
111+
112+
#### How to use CSS variables
113+
114+
```jsx
115+
const vars = {
116+
'--my-css-var': 10,
117+
'--my-another-css-var': "red"
118+
}
119+
return <CCallout style={vars}>...</CCallout>
120+
```
121+
122+
### SASS variables
123+
124+
```sass
125+
$callout-padding-y: $spacer;
126+
$callout-padding-x: $spacer;
127+
$callout-margin-y: $spacer;
128+
$callout-margin-x: 0;
129+
$callout-border-radius: $border-radius;
130+
$callout-border-width: $border-width;
131+
$callout-border-color: $border-color;
132+
$callout-border-left-width: (4 * $callout-border-width);
133+
134+
$callout-variants: (
135+
"primary": $primary,
136+
"secondary": $secondary,
137+
"success": $success,
138+
"danger": $danger,
139+
"warning": $warning,
140+
"info": $info,
141+
"light": $light,
142+
"dark": $dark
143+
);
144+
```
145+
146+
95147
## API
96148

97149
### CCallout

‎packages/docs/content/4.2/components/card.mdx‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1664,6 +1664,65 @@ Just like with card groups, card footers will automatically line up.
16641664
</CRow>
16651665
```
16661666

1667+
1668+
## Customizing
1669+
1670+
### CSS variables
1671+
1672+
React cards use local CSS variables on `.card` for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.
1673+
1674+
```sass
1675+
--cui-card-spacer-y: #{$card-spacer-y};
1676+
--cui-card-spacer-x: #{$card-spacer-x};
1677+
--cui-card-title-spacer-y: #{$card-title-spacer-y};
1678+
--cui-card-border-width: #{$card-border-width};
1679+
--cui-card-border-color: #{$card-border-color};
1680+
--cui-card-border-radius: #{$card-border-radius};
1681+
--cui-card-box-shadow: #{$card-box-shadow};
1682+
--cui-card-inner-border-radius: #{$card-inner-border-radius};
1683+
--cui-card-cap-padding-y: #{$card-cap-padding-y};
1684+
--cui-card-cap-padding-x: #{$card-cap-padding-x};
1685+
--cui-card-cap-bg: #{$card-cap-bg};
1686+
--cui-card-cap-color: #{$card-cap-color};
1687+
--cui-card-height: #{$card-height};
1688+
--cui-card-color: #{$card-color};
1689+
--cui-card-bg: #{$card-bg};
1690+
--cui-card-img-overlay-padding: #{$card-img-overlay-padding};
1691+
--cui-card-group-margin: #{$card-group-margin};
1692+
```
1693+
1694+
#### How to use CSS variables
1695+
1696+
```jsx
1697+
const vars = {
1698+
'--my-css-var': 10,
1699+
'--my-another-css-var': "red"
1700+
}
1701+
return <CCard style={vars}>...</CCard>
1702+
```
1703+
1704+
### SASS variables
1705+
1706+
```sass
1707+
$card-spacer-y: $spacer;
1708+
$card-spacer-x: $spacer;
1709+
$card-title-spacer-y: $spacer * .5;
1710+
$card-border-width: $border-width;
1711+
$card-border-color: var(--cui-border-color-translucent);
1712+
$card-border-radius: $border-radius;
1713+
$card-box-shadow: null;
1714+
$card-inner-border-radius: subtract($card-border-radius, $card-border-width);
1715+
$card-cap-padding-y: $card-spacer-y * .5;
1716+
$card-cap-padding-x: $card-spacer-x;
1717+
$card-cap-bg: rgba($black, .03);
1718+
$card-cap-color: unset;
1719+
$card-height: null;
1720+
$card-color: unset;
1721+
$card-bg: $white;
1722+
$card-img-overlay-padding: $spacer;
1723+
$card-group-margin: $grid-gutter-width * .5;
1724+
```
1725+
16671726
## API
16681727

16691728
### CCard

0 commit comments

Comments
 (0)