Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit d672653

Browse filesBrowse files
mrholekmrholek
committed
docs: update content
1 parent 6d1a053 commit d672653
Copy full SHA for d672653
Expand file treeCollapse file tree

23 files changed

+1769
-163
lines changed

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

Copy file name to clipboardExpand all lines: packages/docs/content/4.2/components/accordion.mdx
+208-163Lines changed: 208 additions & 163 deletions
Large diffs are not rendered by default.

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

Copy file name to clipboardExpand all lines: packages/docs/content/4.2/components/alert.mdx
+42Lines 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

Copy file name to clipboardExpand all lines: packages/docs/content/4.2/components/badge.mdx
+40Lines 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

Copy file name to clipboardExpand all lines: packages/docs/content/4.2/components/breadcrumb.mdx
+44Lines 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

Copy file name to clipboardExpand all lines: packages/docs/content/4.2/components/button.mdx
+105Lines 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

Copy file name to clipboardExpand all lines: packages/docs/content/4.2/components/callout.mdx
+52Lines 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

Copy file name to clipboardExpand all lines: packages/docs/content/4.2/components/card.mdx
+59Lines 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 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.