Movatterモバイル変換

[0]ホーム
URL:

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

 Sign up
Appearance settings

Commit87826ed

Browse files
committed
docs: update content
1 parent3250a75 commit87826ed

30 files changed

+2194
-6
lines changed

‎packages/docs/.vuepress/config.ts

Lines changed: 23 additions & 0 deletions
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

Lines changed: 78 additions & 1 deletion
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+
constvars= {
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

Lines changed: 42 additions & 0 deletions
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+
constvars= {
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

Lines changed: 40 additions & 0 deletions
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+
constvars= {
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

Lines changed: 44 additions & 0 deletions
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+
constvars= {
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

Lines changed: 105 additions & 0 deletions
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+
constvars= {
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)
[8]ページ先頭
©2009-2025 Movatter.jp