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

Commitd68e5b0

Browse files
committed
docs: migrate to Sass modules and enhance responsive behavior.
1 parenteac3a79 commitd68e5b0

File tree

15 files changed

+318
-226
lines changed

15 files changed

+318
-226
lines changed

‎packages/docs/.vuepress/client.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { defineClientConfig } from '@vuepress/client'
33
import{CIcon,CIconSvg}from'@coreui/icons-vue'
44
importCChartPluginfrom'@coreui/vue-chartjs'
55
importCoreuiVuefrom'@coreui/vue/src/'
6-
import'@coreui/coreui/scss/coreui.scss'
76
import'@coreui/chartjs/scss/coreui-chartjs.scss'
87

98
import{
@@ -21,6 +20,7 @@ import {
2120
cilCheckCircle,
2221
cilCloudDownload,
2322
cilContrast,
23+
cilExternalLink,
2424
cilHandshake,
2525
cilInfo,
2626
cilLayers,
@@ -51,6 +51,7 @@ export const icons = {
5151
cilCheckCircle,
5252
cilCloudDownload,
5353
cilContrast,
54+
cilExternalLink,
5455
cilHandshake,
5556
cilInfo,
5657
cilLayers,

‎packages/docs/.vuepress/src/client/components/Header.vue‎

Lines changed: 53 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
<script setup lang="ts">
2+
import {RouterLink}from'vue-router'
23
import {useColorModes }from'@coreui/vue/src'
34
45
const props=defineProps({
@@ -12,16 +13,60 @@ const { colorMode, setColorMode } = useColorModes('coreui-vue-docs-theme')
1213
<CHeaderTogglerclass="ms-md-3"@click="$emit('toggle-sidebar')">
1314
<CIconicon="cil-menu"size="lg" />
1415
</CHeaderToggler>
15-
<divclass="docs-search"id="docsearch"></div>
16-
<CHeaderNavclass="ms-auto">
16+
<CHeaderBrand
17+
:as="RouterLink"
18+
class="d-lg-none"
19+
to="/"
20+
aria-label="Go to CoreUI for Vue.js documentation"
21+
>
22+
<svgxmlns="http://www.w3.org/2000/svg"viewBox="0 0 102 116"height="32">
23+
<gfill="var(--cui-body-color, currentColor)"fillRule="nonzero">
24+
<path
25+
d="M96 25.091 57 2.574a12 12 0 0 0-12 0L6 25.091a12.034 12.034 0 0 0-6 10.392v45.034a12.033 12.033 0 0 0 6 10.392l39 22.517a12 12 0 0 0 12 0l39-22.517a12.033 12.033 0 0 0 6-10.392V35.483a12.034 12.034 0 0 0-6-10.392Zm-2 55.426a4 4 0 0 1-2 3.464l-39 22.516a4 4 0 0 1-4 0L10 83.981a4 4 0 0 1-2-3.464V35.483a4 4 0 0 1 2-3.464L49 9.502a4 4 0 0 1 4 0L92 32.02a4 4 0 0 1 2 3.464v45.034Z"
26+
></path>
27+
<path
28+
d="M74.022 71.038h-2.866a4 4 0 0 0-1.925.493L51.95 81.017 32 69.498V46.521l19.95-11.519 17.29 9.455a4 4 0 0 0 1.919.49h2.863a2 2 0 0 0 2-2v-2.711a2 2 0 0 0-1.04-1.755L55.793 27.985a8.04 8.04 0 0 0-7.843.09L28 39.593a8.024 8.024 0 0 0-4 6.929v22.976a8 8 0 0 0 4 6.928l19.95 11.518a8.042 8.042 0 0 0 7.843.088l19.19-10.53a2 2 0 0 0 1.038-1.754v-2.71a2 2 0 0 0-2-2Z"
29+
></path>
30+
</g>
31+
</svg>
32+
</CHeaderBrand>
33+
<CHeaderNavclass="me-auto d-none d-xl-flex"role="{undefined}">
34+
<CNavItem
35+
href="https://coreui.io/pricing/?framework=vue&src=react-docs&cta=coreui-header-pricing"
36+
>
37+
Pricing
38+
</CNavItem>
39+
<CNavItem
40+
href="https://coreui.requestshub.com/p/coreui-for-vuejs/roadmap"
41+
target="blank"
42+
rel="noopener noreferrer"
43+
>
44+
Roadmap
45+
<CIconicon="cil-external-link"class="ms-2"size="sm" />
46+
</CNavItem>
47+
</CHeaderNav>
48+
<divclass="docs-search ms-auto"id="docsearch"></div>
49+
<CHeaderNavclass="ms-2">
1750
<CNavItemhref="https://github.com/coreui">
1851
<CIconicon="cib-github"size="xl" />
1952
</CNavItem>
20-
<CNavItemhref="https://twitter.com/core_ui">
21-
<CIconicon="cib-twitter"size="xl" />
53+
<CNavItemhref="https://x.com/core_ui">
54+
<CIconSvgsize="xl">
55+
<svgxmlns="http://www.w3.org/2000/svg"viewBox="0 0 300 271">
56+
<path
57+
d="M236 0h46L181 115l118 156h-92.6l-72.5-94.8-83 94.8h-46l107-123L-1.1 0h94.9l65.5 86.6zm-16.1 244h25.5L80.4 26H53z"
58+
></path>
59+
</svg>
60+
</CIconSvg>
2261
</CNavItem>
23-
<CNavItemhref="https://opencollective.com/coreui">
24-
<CIconicon="cib-open-collective"size="xl" />
62+
<CNavItemhref="https://discord.gg/pQRWe5XdGm">
63+
<CIconSvgsize="xl">
64+
<svgxmlns="http://www.w3.org/2000/svg"fill="currentColor"viewBox="0 0 16 16">
65+
<path
66+
d="M13.545 2.907a13.2 13.2 0 0 0-3.257-1.011.05.05 0 0 0-.052.025c-.141.25-.297.577-.406.833a12.2 12.2 0 0 0-3.658 0 8 8 0 0 0-.412-.833.05.05 0 0 0-.052-.025c-1.125.194-2.22.534-3.257 1.011a.04.04 0 0 0-.021.018C.356 6.024-.213 9.047.066 12.032q.003.022.021.037a13.3 13.3 0 0 0 3.995 2.02.05.05 0 0 0 .056-.019q.463-.63.818-1.329a.05.05 0 0 0-.01-.059l-.018-.011a9 9 0 0 1-1.248-.595.05.05 0 0 1-.02-.066l.015-.019q.127-.095.248-.195a.05.05 0 0 1 .051-.007c2.619 1.196 5.454 1.196 8.041 0a.05.05 0 0 1 .053.007q.121.1.248.195a.05.05 0 0 1-.004.085 8 8 0 0 1-1.249.594.05.05 0 0 0-.03.03.05.05 0 0 0 .003.041c.24.465.515.909.817 1.329a.05.05 0 0 0 .056.019 13.2 13.2 0 0 0 4.001-2.02.05.05 0 0 0 .021-.037c.334-3.451-.559-6.449-2.366-9.106a.03.03 0 0 0-.02-.019m-8.198 7.307c-.789 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.45.73 1.438 1.613 0 .888-.637 1.612-1.438 1.612m5.316 0c-.788 0-1.438-.724-1.438-1.612s.637-1.613 1.438-1.613c.807 0 1.451.73 1.438 1.613 0 .888-.631 1.612-1.438 1.612"
67+
></path>
68+
</svg>
69+
</CIconSvg>
2570
</CNavItem>
2671
<liclass="nav-item py-2 py-lg-1">
2772
<divclass="vr d-none d-lg-flex h-100 mx-lg-2 text-body text-opacity-75"></div>
@@ -68,30 +113,21 @@ const { colorMode, setColorMode } = useColorModes('coreui-vue-docs-theme')
68113
<hrclass="d-lg-none my-2 text-white-50" />
69114
</li>
70115
</CHeaderNav>
71-
<CButton
72-
class="d-lg-inline-block my-2 my-md-0 ms-md-3"
73-
color="primary"
74-
as="a"
75-
href="https://coreui.io/vue/docs/getting-started/introduction.html"
76-
variant="outline"
77-
>
78-
<CIconicon="cil-cloud-download" /> Download
79-
</CButton>
80116
<CButton
81117
class="d-lg-inline-block my-2 my-md-0 ms-md-3"
82118
color="primary"
83119
href="https://coreui.io/about/services/?docs=coreui-header-button"
84120
variant="outline"
85121
>
86-
<CIconclass="me-2"icon="cil-handshake" /> Hire Us
122+
<CIconclass="me-xxl-2 d-none d-xxl-inline"icon="cil-handshake" /> Hire Us
87123
</CButton>
88124
<CButton
89125
class="d-lg-inline-block my-2 my-md-0 ms-md-3"
90126
color="primary"
91127
as="a"
92128
href="https://coreui.io/pricing/?framework=vue&docs=coreui-header-button"
93129
>
94-
Get CoreUI PRO
130+
Get CoreUI PRO<spanclassName="d-none d-xxl-inline"> all-access</span> →
95131
</CButton>
96132
</CHeader>
97133
</template>

‎packages/docs/.vuepress/src/client/components/Toc.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@ const toggleVisible = () => {
77
</script>
88

99
<template>
10-
<divclass="docs-toc mt-4 mb-5 my-md-0 ps-xl-5 mb-lg-5 text-body-secondary">
10+
<divclass="docs-toc mt-4 mb-5 my-lg-0 ps-xl-5 mb-lg-5 text-body-secondary">
1111
<button
12-
class="btn btn-link p-md-0 mb-2 mb-md-0 text-decoration-none docs-toc-toggle d-md-none"
12+
class="btn btn-link p-lg-0 mb-2 mb-lg-0 text-decoration-none docs-toc-toggle d-lg-none"
1313
type="button"
1414
:aria-expanded="visible ? true : false"
1515
aria-controls="tocContents"
@@ -18,7 +18,7 @@ const toggleVisible = () => {
1818
On this page
1919
<svg
2020
xmlns="http://www.w3.org/2000/svg"
21-
class="icon d-md-none ms-2"
21+
class="icon d-lg-none ms-2"
2222
aria-hidden="true"
2323
viewBox="0 0 512 512"
2424
>
@@ -29,7 +29,7 @@ const toggleVisible = () => {
2929
/>
3030
</svg>
3131
</button>
32-
<strongclass="d-none d-md-block h6 mb-2 pb-2 border-bottom">On this page</strong>
32+
<strongclass="d-none d-lg-block h6 mb-2 pb-2 border-bottom">On this page</strong>
3333
<CCollapseclass="docs-toc-collapse"id="tocContents":visible="visible">
3434
<Toc />
3535
</CCollapse>

‎packages/docs/.vuepress/src/client/styles/_ads.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
11
// stylelint-disable declaration-no-important, selector-max-id
2+
@use"@coreui/coreui/scss/mixins/border-radius"as*;
3+
@use"@coreui/coreui/scss/mixins/breakpoints"as*;
4+
@use"@coreui/coreui/scss/vendor/rfs"as*;
25

36
//
47
// Carbon ads

‎packages/docs/.vuepress/src/client/styles/_anchor.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
@use"@coreui/coreui/scss/mixins/transition"as*;
2+
@use"@coreui/coreui/scss/variables"as*;
3+
14
.anchor-link {
25
font-weight:400;
36
color:rgba($link-color,.5);

‎packages/docs/.vuepress/src/client/styles/_callouts.scss‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
@use"@coreui/coreui/scss/variables"as*;
2+
@use"variables"as*;
3+
14
//
25
// Callouts
36
//

‎packages/docs/.vuepress/src/client/styles/_component-examples.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,12 @@
1+
@use"@coreui/coreui/scss/mixins/border-radius"as*;
2+
@use"@coreui/coreui/scss/mixins/breakpoints"as*;
3+
@use"@coreui/coreui/scss/mixins/clearfix"as*;
4+
@use"@coreui/coreui/scss/mixins/container"as*;
5+
@use"@coreui/coreui/scss/mixins/grid"as*;
6+
@use"@coreui/coreui/scss/vendor/rfs"as*;
7+
@use"@coreui/coreui/scss/variables"as*;
8+
@use"variables"as*;
9+
110
//
211
// Docs examples
312
//
Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,6 @@
1+
@use"@coreui/coreui/scss/vendor/rfs"as*;
2+
@use"@coreui/coreui/scss/variables"as*;
3+
14
//
25
// Footer
36
//
@@ -7,13 +10,12 @@
710
@includefont-size(.875rem);
811

912
a {
10-
color:var(--#{$prefix}tertiary-color);
11-
text-decoration:none;
13+
color:var(--#{$prefix}secondary-color);
14+
//text-decoration: none;
1215

1316
&:hover,
1417
&:focus {
1518
color:var(--cui-link-hover-color);
16-
text-decoration:underline;
1719
}
1820
}
1921
}

‎packages/docs/.vuepress/src/client/styles/_layout.scss‎

Lines changed: 20 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
1+
@use"@coreui/coreui/scss/mixins/breakpoints"as*;
2+
@use"@coreui/coreui/scss/mixins/transition"as*;
3+
@use"@coreui/coreui/scss/variables"as*;
4+
15
.wrapper {
26
width:100%;
3-
@includeltr-rtl("padding-left",var(--cui-sidebar-occupy-start,0));
7+
padding-inline-start:var(--cui-sidebar-occupy-start,0);
48
will-change:auto;
59
@includetransition(padding.15s);
6-
7-
>.container-lg {
8-
--cui-gutter-x:3rem;
9-
}
1010
}
1111

1212
.docs-sidebar {
@@ -15,31 +15,34 @@
1515

1616
.docs-main {
1717
grid-area: main;
18+
display:grid;
19+
grid-template-areas:
20+
"header"
21+
"intro"
22+
"toc"
23+
"content";
24+
grid-template-rows:autoauto1fr;
25+
gap:.5rem;
1826

1927
@includemedia-breakpoint-down(lg) {
2028
max-width:760px;
2129
margin-inline:auto;
2230
}
2331

24-
@includemedia-breakpoint-up(md) {
25-
display:grid;
26-
grid-template-areas:
27-
"intro"
28-
"toc"
29-
"content";
30-
grid-template-rows:autoauto1fr;
31-
gap:$grid-gutter-width;
32-
}
33-
34-
@includemedia-breakpoint-up(lg) {
32+
@includemedia-breakpoint-up(xl) {
3533
grid-template-areas:
3634
"intro toc"
3735
"content toc";
38-
grid-template-rows:auto1fr;
36+
grid-template-rows:autoauto;
3937
grid-template-columns:4fr1fr;
38+
gap:$grid-gutter-width;
4039
}
4140
}
4241

42+
.docs-header {
43+
grid-area:header;
44+
}
45+
4346
.docs-intro {
4447
grid-area: intro;
4548
}

‎packages/docs/.vuepress/src/client/styles/_prism.scss‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
@use"sass:color";
2+
@use"@coreui/coreui/scss/mixins/color-mode"as*;
3+
@use"@coreui/coreui/scss/variables"as*;
4+
15
/* PrismJS 1.24.1
26
https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+clike+javascript*/
37
/**
@@ -16,7 +20,7 @@ https://prismjs.com/download.html#themes=prism-tomorrow&languages=markup+css+cli
1620
--base05:#333;
1721
--base06:#fff;
1822
--base07:#{$teal-700};// #9a6700
19-
--base08:#{mix($red-500,$red-600,50%)};// #bc4c00
23+
--base08:#{color.mix($red-500,$red-600,50%)};// #bc4c00
2024
--base09:#{$cyan-700};// #087990
2125
--base0A:#{$purple-500};// #795da3
2226
--base0B:#{$blue-700};// #183691

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp